react-text-editor-kit
Version:
React Text Editor Kit is a customizable rich text editor component for React applications. It provides a flexible and easy-to-use interface for users to create and edit content with various formatting options. And also easy to integrate in react applicati
283 lines (273 loc) • 10.2 kB
JSX
import React, { useState } from "react";
import {
AlignLeft,
BoldIcon,
FontFamilyIcon,
FontSizeIcon,
ItalicIcon,
LineHeightIcon,
SubscriptIcon,
SuperscriptIcon,
UnderlineIcon,
} from ".";
import SelectFamily from "./SelectFamily";
import SelectFontSize from "./SelectFontSize";
import SelectAlignment from "./SelectAlignment";
import SelectLineHeight from "./SelectLineHeight";
import { FORMAT_OPTIONS, generateRandomID } from "./constant";
import Styles from "../css/style.module.css";
export default function SelectFileOptions(props) {
let { item, isFullScreen, remove_from_navbar, editorRef, isDisable } = props;
let options = item.options;
if (!options) {
options = FORMAT_OPTIONS;
}
const [showFormatOptions, setShowFormatOptions] = useState(false);
const [showChildOptions, setShowChildOptions] = useState(0);
const [dropdownTop, setDropdownTop] = useState(0);
const random_id = generateRandomID(16);
const handleShowFamily = (option, event) => {
if (isDisable) {
return;
}
if (event) {
let parent = document.getElementById(random_id);
let parent_top = parent.getBoundingClientRect().top;
const top = event.currentTarget.getBoundingClientRect().top;
setDropdownTop(isFullScreen ? top : top - parent_top);
}
setShowFormatOptions(true);
setShowChildOptions(option);
};
const handleHideChildOptions = () => {
setShowFormatOptions(false);
setShowChildOptions(0);
};
const handleClick = (e, name, option) => {
e.preventDefault();
editorRef.current.focus();
if (option?.handleClick) {
option.handleClick(option, item);
if (!option.add_functionality) return;
}
document.execCommand(name);
handleHideChildOptions();
};
if (remove_from_navbar?.length > 0) {
let find_remove = remove_from_navbar.find(
(toolbar) => toolbar.name === "format",
);
if (find_remove?.options?.length > 0) {
options = options.filter((item) => !find_remove?.options.includes(item));
}
}
return (
<div
className={Styles.customSelect}
onMouseOver={() => setShowFormatOptions(true)}
onMouseLeave={handleHideChildOptions}
id={random_id}
>
{item?.title ? item.title : "Format"}
<div
className={`${Styles.selectItems} ${
showFormatOptions ? `${Styles.show}` : ""
}`}
>
{options?.length > 0 &&
options.map((option, index) => {
let is_bold = option === "bold" || option.name === "bold";
let is_italic = option === "italic" || option.name === "italic";
let is_underline =
option === "underline" || option.name === "underline";
let is_superscript =
option === "superscript" || option.name === "superscript";
let is_subscript =
option === "subscript" || option.name === "subscript";
let is_font = option === "font" || option.name === "font";
let is_font_size =
option === "font_size" || option.name === "font_size";
let is_alignment =
option === "alignment" || option.name === "alignment";
return (
<>
{is_bold && (
<button
type="button"
className={`${Styles.selectInsert} ${
isDisable ? Styles.disabledButton : ""
}`}
onClick={(e) => handleClick(e, "bold", option)}
>
{option?.icon ? option.icon : <BoldIcon />}
<span>{option?.title ? option.title : "Bold"}</span>
</button>
)}
{is_italic && (
<button
type="button"
className={`${Styles.selectInsert} ${
isDisable ? Styles.disabledButton : ""
}`}
onClick={(e) => handleClick(e, "italic", option)}
>
{option?.icon ? option.icon : <ItalicIcon />}
<span>{option?.title ? option.title : "Italic"}</span>
</button>
)}
{is_underline && (
<button
type="button"
className={`${Styles.selectInsert} ${
isDisable ? Styles.disabledButton : ""
}`}
onClick={(e) => handleClick(e, "underline", option)}
>
{option?.icon ? option.icon : <UnderlineIcon />}
<span>{option?.title ? option.title : "Underline"}</span>
</button>
)}
{is_superscript && (
<button
type="button"
className={`${Styles.selectInsert} ${
isDisable ? Styles.disabledButton : ""
}`}
onClick={(e) => handleClick(e, "superscript", option)}
>
{option?.icon ? option.icon : <SuperscriptIcon />}
<span>{option?.title ? option.title : "Superscript"}</span>
</button>
)}
{is_subscript && (
<button
type="button"
className={`${Styles.selectInsert} ${
isDisable ? Styles.disabledButton : ""
}`}
onClick={(e) => handleClick(e, "subscript", option)}
>
{option?.icon ? option.icon : <SubscriptIcon />}
<span>{option?.title ? option.title : "Subscript"}</span>
</button>
)}
{is_font && (
<div
onMouseOver={(e) => {
handleShowFamily(1, e);
}}
onMouseLeave={handleHideChildOptions}
>
<div
className={`${Styles.selectInsert} ${
isDisable ? Styles.disabledButton : ""
}`}
>
{option?.icon ? option.icon : <FontFamilyIcon />}
<span>
{option?.title ? option.title : "Font Family"}
</span>
</div>
</div>
)}
{is_font_size && (
<div
onMouseOver={(e) => {
handleShowFamily(2, e);
}}
onMouseLeave={handleHideChildOptions}
>
<div
className={`${Styles.selectInsert} ${
isDisable ? Styles.disabledButton : ""
}`}
>
{option?.icon ? option.icon : <FontSizeIcon />}
<span>{option?.title ? option.title : "Font Size"}</span>
</div>
</div>
)}
{is_alignment && (
<div
onMouseOver={(e) => {
handleShowFamily(3, e);
}}
onMouseLeave={handleHideChildOptions}
>
<div
className={`${Styles.selectInsert} ${
isDisable ? Styles.disabledButton : ""
}`}
>
{option?.icon ? option.icon : <AlignLeft />}
<span>{option?.title ? option.title : "Align"}</span>
</div>
</div>
)}
</>
);
})}
{/* <div
className={Styles.selectInsert}
onMouseOver={() => {
handleShowFamily(4, 175);
}}
onMouseLeave={handleHideChildOptions}
>
<LineHeightIcon /> <span>Line Height</span>
</div> */}
</div>
<div
className={`${Styles.selectFormationDropdown} ${
showChildOptions === 1 ? `${Styles.show}` : ""
}`}
onMouseOver={() => {
handleShowFamily(1);
}}
onMouseLeave={() => setShowChildOptions(false)}
style={{ top: dropdownTop }}
>
<SelectFamily
handleHideChildOptions={handleHideChildOptions}
editorRef={editorRef}
/>
</div>
<div
className={`${Styles.selectFormationDropdown} ${
Styles.fontSizeDropdown
} ${showChildOptions === 2 ? `${Styles.show}` : ""}`}
onMouseOver={() => {
handleShowFamily(2);
}}
onMouseLeave={() => setShowChildOptions(false)}
style={{ top: dropdownTop }}
>
<SelectFontSize handleHideChildOptions={handleHideChildOptions} />
</div>
<div
className={`${Styles.selectFormationDropdown} ${
Styles.fontSizeDropdown
} ${showChildOptions === 3 ? `${Styles.show}` : ""}`}
onMouseOver={() => {
handleShowFamily(3);
}}
onMouseLeave={() => setShowChildOptions(false)}
style={{ top: dropdownTop }}
>
<SelectAlignment handleHideChildOptions={handleHideChildOptions} />
</div>
<div
className={`${Styles.selectFormationDropdown} ${
Styles.fontSizeDropdown
} ${showChildOptions === 4 ? `${Styles.show}` : ""}`}
onMouseOver={() => {
handleShowFamily(4);
}}
onMouseLeave={() => setShowChildOptions(false)}
style={{ top: dropdownTop }}
>
<SelectLineHeight handleHideChildOptions={handleHideChildOptions} />
</div>
</div>
);
}