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 | 45x 554x 554x 554x 73x 554x 451x 554x | import { useMemo } from "react";
import { options, optionsWithParagraphSmall } from "./consts";
import { RichUtils } from "draft-js";
import { getSelectedBlocksType } from "draftjs-utils";
import { optionType } from "./types";
import { WrapperActionComponent } from "../components/Wrapper";
export const HeadingsMenuSelector = ({
onChange,
editorState,
includeParagraphSmall = false,
}: any) => {
// "Paragraph Small" is opt-in (legal documents); default editors keep the
// standard heading set.
const headingsOptions = includeParagraphSmall
? optionsWithParagraphSmall
: options;
const handleHeadingItemClick = (optionsMap: optionType) => {
const newState = RichUtils.toggleBlockType(
editorState,
optionsMap.blockTypeValue as any,
);
if (newState && typeof onChange === "function") {
onChange(newState);
}
};
const blockState = useMemo(
() => getSelectedBlocksType(editorState),
[editorState],
);
const headingActiveIndex = useMemo(
() => headingsOptions.findIndex((x) => x.blockTypeValue === blockState),
[blockState, headingsOptions],
);
return (
<WrapperActionComponent
value={headingsOptions[headingActiveIndex]?.label ?? "Paragraph"}
options={headingsOptions}
menuWidth={329}
activeIndex={headingActiveIndex}
handleClick={handleHeadingItemClick}
/>
);
};
|