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 | 45x 45x 554x 554x 554x 554x 554x | import { RichUtils } from "draft-js";
import IconWrapper from "./IconWrapper";
import { EditorState } from "react-draft-wysiwyg-next";
import { ListNumbersIcon } from "@phosphor-icons/react";
import { ICON_STATE } from "./richInput.types";
import { updateLastListItem } from "./FontSize/utils";
const KEY = "ordered-list-item";
export const OrderedList = ({
editorState,
handleEditorChange,
}: {
editorState: EditorState;
handleEditorChange: (state: EditorState) => void;
}) => {
const toggleList = () => {
updateLastListItem(editorState);
const newState = RichUtils.toggleBlockType(editorState, KEY);
handleEditorChange(newState);
};
const getListStyleState = (): ICON_STATE => {
const currentBlockType = editorState
.getCurrentContent()
.getBlockForKey(editorState.getSelection().getStartKey())
.getType();
return currentBlockType === KEY ? "active" : "default";
};
return (
<IconWrapper
state={getListStyleState()}
key="list"
icon={ListNumbersIcon}
onClick={toggleList}
/>
);
};
|