Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 45x 21x 21x 21x 6x 6x 21x 6x 66x 21x 21x 21x 21x 21x 6x 21x | import { useMemo, useState } from "react";
import { EditorState } from "draft-js";
import { fontOptions } from "./consts";
import { getSelectionCustomInlineStyle } from "draftjs-utils";
import { WrapperActionComponent } from "../components/Wrapper";
export const FontFamilies = ({
editorState,
onClick,
}: {
editorState: EditorState;
onClick?: any;
}) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [searchValue, setSearchValue] = useState("");
const currentFontStyle = useMemo(() => {
const selectedFont = getSelectionCustomInlineStyle(editorState, [
"FONTFAMILY",
]).FONTFAMILY;
return selectedFont?.split("-")[1] || "Font";
}, [editorState]);
const fontSizeActiveIndex = useMemo(
() =>
fontOptions.findIndex((x) => {
return currentFontStyle === x.label;
}),
[currentFontStyle],
);
const defaultFont =
fontOptions[fontSizeActiveIndex]?.label ?? fontOptions[0]?.label;
const [selectedOption, setSelectedOption] = useState(defaultFont);
const closeMenu = () => {
setAnchorEl(null);
setSearchValue("");
};
const handleMenuItemClick = (fontOption: any) => {
onClick?.(fontOption);
closeMenu();
setSelectedOption(fontOption?.label);
};
const filteredOptions = useMemo(() => {
Eif (!searchValue) return fontOptions;
return fontOptions.filter((option) =>
option.label.toLowerCase().includes(searchValue.toLowerCase()),
);
}, [searchValue]);
return (
<WrapperActionComponent
value={selectedOption ?? defaultFont}
options={filteredOptions}
menuWidth={280}
activeIndex={fontSizeActiveIndex}
handleClick={handleMenuItemClick}
searchBarProps={{
value: searchValue,
handleChange: (val: string) => setSearchValue(val),
}}
/>
);
};
export default FontFamilies;
|