{
- setLinkUrl(event.target.value);
- }}
- onKeyDown={(event) => {
- if (event.key === "Enter") {
- event.preventDefault();
- if (lastSelection !== null) {
- if (linkUrl !== "") {
- editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
- }
- setEditMode(false);
- }
- } else if (event.key === "Escape") {
- event.preventDefault();
- setEditMode(false);
+ const updateLinkEditor = useCallback(() => {
+ const selection = $getSelection();
+ if ($isRangeSelection(selection)) {
+ const node = getSelectedNode(selection);
+ const parent = node.getParent();
+ if ($isLinkNode(parent)) {
+ setLinkUrl(parent.getURL());
+ } else if ($isLinkNode(node)) {
+ setLinkUrl(node.getURL());
+ } else {
+ setLinkUrl("");
}
- }}
- />
- ) : (
- <>
-
- );
+ }
+ const editorElem = editorRef.current;
+ const nativeSelection = window.getSelection();
+ const activeElement = document.activeElement;
+
+ if (editorElem === null) {
+ return;
+ }
+
+ const rootElement = editor.getRootElement();
+ if (
+ selection !== null &&
+ !nativeSelection.isCollapsed &&
+ rootElement !== null &&
+ rootElement.contains(nativeSelection.anchorNode)
+ ) {
+ const domRange = nativeSelection.getRangeAt(0);
+ let rect;
+ if (nativeSelection.anchorNode === rootElement) {
+ let inner = rootElement;
+ while (inner.firstElementChild != null) {
+ inner = inner.firstElementChild;
+ }
+ rect = inner.getBoundingClientRect();
+ } else {
+ rect = domRange.getBoundingClientRect();
+ }
+
+ if (!mouseDownRef.current) {
+ positionEditorElement(editorElem, rect);
+ }
+ setLastSelection(selection);
+ } else if (!activeElement || activeElement.className !== "link-input") {
+ positionEditorElement(editorElem, null);
+ setLastSelection(null);
+ setEditMode(false);
+ setLinkUrl("");
+ }
+
+ return true;
+ }, [editor]);
+
+ useEffect(() => {
+ return mergeRegister(
+ editor.registerUpdateListener(({editorState}) => {
+ editorState.read(() => {
+ updateLinkEditor();
+ });
+ }),
+
+ editor.registerCommand(
+ SELECTION_CHANGE_COMMAND,
+ () => {
+ updateLinkEditor();
+ return true;
+ },
+ LowPriority
+ )
+ );
+ }, [editor, updateLinkEditor]);
+
+ useEffect(() => {
+ editor.getEditorState().read(() => {
+ updateLinkEditor();
+ });
+ }, [editor, updateLinkEditor]);
+
+ useEffect(() => {
+ if (isEditMode && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }, [isEditMode]);
+
+ return (
+
+ {isEditMode ? (
+
{
+ setLinkUrl(event.target.value);
+ }}
+ onKeyDown={(event) => {
+ if (event.key === "Enter") {
+ event.preventDefault();
+ if (lastSelection !== null) {
+ if (linkUrl !== "") {
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
+ }
+ setEditMode(false);
+ }
+ } else if (event.key === "Escape") {
+ event.preventDefault();
+ setEditMode(false);
+ }
+ }}
+ />
+ ) : (
+ <>
+
+
+ {linkUrl}
+
+
event.preventDefault()}
+ onClick={() => {
+ setEditMode(true);
+ }}
+ />
+
+
+ )}
+
+ );
}
-function Select({ onChange, className, options, value }) {
- return (
-
- );
+function Select({onChange, className, options, value}) {
+ return (
+
+ );
}
function getSelectedNode(selection) {
- const anchor = selection.anchor;
- const focus = selection.focus;
- const anchorNode = selection.anchor.getNode();
- const focusNode = selection.focus.getNode();
- if (anchorNode === focusNode) {
- return anchorNode;
- }
- const isBackward = selection.isBackward();
- if (isBackward) {
- return $isAtNodeEnd(focus) ? anchorNode : focusNode;
- } else {
- return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
- }
+ const anchor = selection.anchor;
+ const focus = selection.focus;
+ const anchorNode = selection.anchor.getNode();
+ const focusNode = selection.focus.getNode();
+ if (anchorNode === focusNode) {
+ return anchorNode;
+ }
+ const isBackward = selection.isBackward();
+ if (isBackward) {
+ return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+ } else {
+ return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+ }
}
function BlockOptionsDropdownList({
- editor,
- blockType,
- toolbarRef,
- setShowBlockOptionsDropDown
-}) {
- const dropDownRef = useRef(null);
+ editor,
+ blockType,
+ toolbarRef,
+ setShowBlockOptionsDropDown
+ }) {
+ const dropDownRef = useRef(null);
- useEffect(() => {
- const toolbar = toolbarRef.current;
- const dropDown = dropDownRef.current;
+ useEffect(() => {
+ const toolbar = toolbarRef.current;
+ const dropDown = dropDownRef.current;
- if (toolbar !== null && dropDown !== null) {
- const { top, left } = toolbar.getBoundingClientRect();
- dropDown.style.top = `${top + 40}px`;
- dropDown.style.left = `${left}px`;
- }
- }, [dropDownRef, toolbarRef]);
-
- useEffect(() => {
- const dropDown = dropDownRef.current;
- const toolbar = toolbarRef.current;
-
- if (dropDown !== null && toolbar !== null) {
- const handle = (event) => {
- const target = event.target;
-
- if (!dropDown.contains(target) && !toolbar.contains(target)) {
- setShowBlockOptionsDropDown(false);
+ if (toolbar !== null && dropDown !== null) {
+ const {top, left} = toolbar.getBoundingClientRect();
+ dropDown.style.top = `${top + 40}px`;
+ dropDown.style.left = `${left}px`;
}
- };
- document.addEventListener("click", handle);
+ }, [dropDownRef, toolbarRef]);
- return () => {
- document.removeEventListener("click", handle);
- };
- }
- }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
+ useEffect(() => {
+ const dropDown = dropDownRef.current;
+ const toolbar = toolbarRef.current;
- const formatParagraph = () => {
- if (blockType !== "paragraph") {
- editor.update(() => {
- const selection = $getSelection();
+ if (dropDown !== null && toolbar !== null) {
+ const handle = (event) => {
+ const target = event.target;
- if ($isRangeSelection(selection)) {
- $wrapNodes(selection, () => $createParagraphNode());
+ if (!dropDown.contains(target) && !toolbar.contains(target)) {
+ setShowBlockOptionsDropDown(false);
+ }
+ };
+ document.addEventListener("click", handle);
+
+ return () => {
+ document.removeEventListener("click", handle);
+ };
}
- });
- }
- setShowBlockOptionsDropDown(false);
- };
+ }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
- const formatLargeHeading = () => {
- if (blockType !== "h1") {
- editor.update(() => {
- const selection = $getSelection();
+ const formatParagraph = () => {
+ if (blockType !== "paragraph") {
+ editor.update(() => {
+ const selection = $getSelection();
- if ($isRangeSelection(selection)) {
- $wrapNodes(selection, () => $createHeadingNode("h1"));
+ if ($isRangeSelection(selection)) {
+ $wrapNodes(selection, () => $createParagraphNode());
+ }
+ });
}
- });
- }
- setShowBlockOptionsDropDown(false);
- };
+ setShowBlockOptionsDropDown(false);
+ };
- const formatSmallHeading = () => {
- if (blockType !== "h2") {
- editor.update(() => {
- const selection = $getSelection();
+ const formatLargeHeading = () => {
+ if (blockType !== "h1") {
+ editor.update(() => {
+ const selection = $getSelection();
- if ($isRangeSelection(selection)) {
- $wrapNodes(selection, () => $createHeadingNode("h2"));
+ if ($isRangeSelection(selection)) {
+ $wrapNodes(selection, () => $createHeadingNode("h1"));
+ }
+ });
}
- });
- }
- setShowBlockOptionsDropDown(false);
- };
+ setShowBlockOptionsDropDown(false);
+ };
- const formatBulletList = () => {
- if (blockType !== "ul") {
- editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
- } else {
- editor.dispatchCommand(REMOVE_LIST_COMMAND);
- }
- setShowBlockOptionsDropDown(false);
- };
+ const formatSmallHeading = () => {
+ if (blockType !== "h2") {
+ editor.update(() => {
+ const selection = $getSelection();
- const formatNumberedList = () => {
- if (blockType !== "ol") {
- editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
- } else {
- editor.dispatchCommand(REMOVE_LIST_COMMAND);
- }
- setShowBlockOptionsDropDown(false);
- };
-
- const formatQuote = () => {
- if (blockType !== "quote") {
- editor.update(() => {
- const selection = $getSelection();
-
- if ($isRangeSelection(selection)) {
- $wrapNodes(selection, () => $createQuoteNode());
+ if ($isRangeSelection(selection)) {
+ $wrapNodes(selection, () => $createHeadingNode("h2"));
+ }
+ });
}
- });
- }
- setShowBlockOptionsDropDown(false);
- };
+ setShowBlockOptionsDropDown(false);
+ };
- const formatCode = () => {
- if (blockType !== "code") {
- editor.update(() => {
- const selection = $getSelection();
-
- if ($isRangeSelection(selection)) {
- $wrapNodes(selection, () => $createCodeNode());
+ const formatBulletList = () => {
+ if (blockType !== "ul") {
+ editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+ } else {
+ editor.dispatchCommand(REMOVE_LIST_COMMAND);
}
- });
- }
- setShowBlockOptionsDropDown(false);
- };
+ setShowBlockOptionsDropDown(false);
+ };
- return (
-
-
-
-
-
-
-
-
-
- );
+ const formatNumberedList = () => {
+ if (blockType !== "ol") {
+ editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+ } else {
+ editor.dispatchCommand(REMOVE_LIST_COMMAND);
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ const formatQuote = () => {
+ if (blockType !== "quote") {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $wrapNodes(selection, () => $createQuoteNode());
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ const formatCode = () => {
+ if (blockType !== "code") {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $wrapNodes(selection, () => $createCodeNode());
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
}
export default function ToolbarPlugin() {
- const [editor] = useLexicalComposerContext();
- const toolbarRef = useRef(null);
- const [canUndo, setCanUndo] = useState(false);
- const [canRedo, setCanRedo] = useState(false);
- const [blockType, setBlockType] = useState("paragraph");
- const [selectedElementKey, setSelectedElementKey] = useState(null);
- const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(
- false
- );
- const [codeLanguage, setCodeLanguage] = useState("");
- const [isRTL, setIsRTL] = useState(false);
- const [isLink, setIsLink] = useState(false);
- const [isBold, setIsBold] = useState(false);
- const [isItalic, setIsItalic] = useState(false);
- const [isUnderline, setIsUnderline] = useState(false);
- const [isStrikethrough, setIsStrikethrough] = useState(false);
- const [isCode, setIsCode] = useState(false);
-
- const updateToolbar = useCallback(() => {
- const selection = $getSelection();
- if ($isRangeSelection(selection)) {
- const anchorNode = selection.anchor.getNode();
- const element =
- anchorNode.getKey() === "root"
- ? anchorNode
- : anchorNode.getTopLevelElementOrThrow();
- const elementKey = element.getKey();
- const elementDOM = editor.getElementByKey(elementKey);
- if (elementDOM !== null) {
- setSelectedElementKey(elementKey);
- if ($isListNode(element)) {
- const parentList = $getNearestNodeOfType(anchorNode, ListNode);
- const type = parentList ? parentList.getTag() : element.getTag();
- setBlockType(type);
- } else {
- const type = $isHeadingNode(element)
- ? element.getTag()
- : element.getType();
- setBlockType(type);
- if ($isCodeNode(element)) {
- setCodeLanguage(element.getLanguage() || getDefaultCodeLanguage());
- }
- }
- }
- // Update text format
- setIsBold(selection.hasFormat("bold"));
- setIsItalic(selection.hasFormat("italic"));
- setIsUnderline(selection.hasFormat("underline"));
- setIsStrikethrough(selection.hasFormat("strikethrough"));
- setIsCode(selection.hasFormat("code"));
- setIsRTL($isParentElementRTL(selection));
-
- // Update links
- const node = getSelectedNode(selection);
- const parent = node.getParent();
- if ($isLinkNode(parent) || $isLinkNode(node)) {
- setIsLink(true);
- } else {
- setIsLink(false);
- }
- }
- }, [editor]);
-
- useEffect(() => {
- return mergeRegister(
- editor.registerUpdateListener(({ editorState }) => {
- editorState.read(() => {
- updateToolbar();
- });
- }),
- editor.registerCommand(
- SELECTION_CHANGE_COMMAND,
- (_payload, newEditor) => {
- updateToolbar();
- return false;
- },
- LowPriority
- ),
- editor.registerCommand(
- CAN_UNDO_COMMAND,
- (payload) => {
- setCanUndo(payload);
- return false;
- },
- LowPriority
- ),
- editor.registerCommand(
- CAN_REDO_COMMAND,
- (payload) => {
- setCanRedo(payload);
- return false;
- },
- LowPriority
- )
+ const [modal, showModal] = useModal();
+ const [editor] = useLexicalComposerContext();
+ const [activeEditor, setActiveEditor] = useState(editor);
+ const toolbarRef = useRef(null);
+ const [canUndo, setCanUndo] = useState(false);
+ const [canRedo, setCanRedo] = useState(false);
+ const [blockType, setBlockType] = useState("paragraph");
+ const [selectedElementKey, setSelectedElementKey] = useState(null);
+ const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(
+ false
);
- }, [editor, updateToolbar]);
+ const [codeLanguage, setCodeLanguage] = useState("");
+ const [isRTL, setIsRTL] = useState(false);
+ const [isLink, setIsLink] = useState(false);
+ const [isBold, setIsBold] = useState(false);
+ const [isItalic, setIsItalic] = useState(false);
+ const [isUnderline, setIsUnderline] = useState(false);
+ const [isStrikethrough, setIsStrikethrough] = useState(false);
+ const [isCode, setIsCode] = useState(false);
- const codeLanguges = useMemo(() => getCodeLanguages(), []);
- const onCodeLanguageSelect = useCallback(
- (e) => {
- editor.update(() => {
- if (selectedElementKey !== null) {
- const node = $getNodeByKey(selectedElementKey);
- if ($isCodeNode(node)) {
- node.setLanguage(e.target.value);
- }
+ const updateToolbar = useCallback(() => {
+ const selection = $getSelection();
+ if ($isRangeSelection(selection)) {
+ const anchorNode = selection.anchor.getNode();
+ const element =
+ anchorNode.getKey() === "root"
+ ? anchorNode
+ : anchorNode.getTopLevelElementOrThrow();
+ const elementKey = element.getKey();
+ const elementDOM = editor.getElementByKey(elementKey);
+ if (elementDOM !== null) {
+ setSelectedElementKey(elementKey);
+ if ($isListNode(element)) {
+ const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+ const type = parentList ? parentList.getTag() : element.getTag();
+ setBlockType(type);
+ } else {
+ const type = $isHeadingNode(element)
+ ? element.getTag()
+ : element.getType();
+ setBlockType(type);
+ if ($isCodeNode(element)) {
+ setCodeLanguage(element.getLanguage() || getDefaultCodeLanguage());
+ }
+ }
+ }
+ // Update text format
+ setIsBold(selection.hasFormat("bold"));
+ setIsItalic(selection.hasFormat("italic"));
+ setIsUnderline(selection.hasFormat("underline"));
+ setIsStrikethrough(selection.hasFormat("strikethrough"));
+ setIsCode(selection.hasFormat("code"));
+ setIsRTL($isParentElementRTL(selection));
+
+ // Update links
+ const node = getSelectedNode(selection);
+ const parent = node.getParent();
+ if ($isLinkNode(parent) || $isLinkNode(node)) {
+ setIsLink(true);
+ } else {
+ setIsLink(false);
+ }
}
- });
- },
- [editor, selectedElementKey]
- );
+ }, [editor]);
- const insertLink = useCallback(() => {
- if (!isLink) {
- editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
- } else {
- editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
- }
- }, [editor, isLink]);
+ useEffect(() => {
+ return mergeRegister(
+ editor.registerUpdateListener(({editorState}) => {
+ editorState.read(() => {
+ updateToolbar();
+ });
+ }),
+ editor.registerCommand(
+ SELECTION_CHANGE_COMMAND,
+ (_payload, newEditor) => {
+ updateToolbar();
+ return false;
+ },
+ LowPriority
+ ),
+ editor.registerCommand(
+ CAN_UNDO_COMMAND,
+ (payload) => {
+ setCanUndo(payload);
+ return false;
+ },
+ LowPriority
+ ),
+ editor.registerCommand(
+ CAN_REDO_COMMAND,
+ (payload) => {
+ setCanRedo(payload);
+ return false;
+ },
+ LowPriority
+ )
+ );
+ }, [editor, updateToolbar]);
- return (
-
-
-
-
- {supportedBlockTypes.has(blockType) && (
- <>
-
- {showBlockOptionsDropDown &&
- createPortal(
-
,
- document.body
+ const codeLanguges = useMemo(() => getCodeLanguages(), []);
+ const onCodeLanguageSelect = useCallback(
+ (e) => {
+ editor.update(() => {
+ if (selectedElementKey !== null) {
+ const node = $getNodeByKey(selectedElementKey);
+ if ($isCodeNode(node)) {
+ node.setLanguage(e.target.value);
+ }
+ }
+ });
+ },
+ [editor, selectedElementKey]
+ );
+
+ const insertLink = useCallback(() => {
+ if (!isLink) {
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+ } else {
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+ }
+ }, [editor, isLink]);
+
+ return (
+
+
+
+
+ {supportedBlockTypes.has(blockType) && (
+ <>
+
+ {showBlockOptionsDropDown &&
+ createPortal(
+
,
+ document.body
+ )}
+
+
)}
-
-
- )}
- {blockType === "code" ? (
- <>
-
-
-
- ) : (
- <>
-
-
-
-
-
-
- {isLink &&
- createPortal(
, document.body)}
-
-
-
-
-
{" "}
-
- )}
-
- );
+ {blockType === "code" ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+ {isLink &&
+ createPortal(
, document.body)}
+
+
+
+
+
+ {" "}
+
+
+ {
+ activeEditor.dispatchCommand(
+ INSERT_HORIZONTAL_RULE_COMMAND,
+ undefined,
+ );
+ }}
+ className="item">
+
+ Horizontal Rule
+
+ {
+ activeEditor.dispatchCommand(INSERT_PAGE_BREAK, undefined);
+ }}
+ className="item">
+
+ Page Break
+
+ {
+ showModal('Insert Image', (onClose) => (
+
+ ));
+ }}
+ className="item">
+
+ Image
+
+ {
+ showModal('Insert Inline Image', (onClose) => (
+
+ ));
+ }}
+ className="item">
+
+ Inline Image
+
+
+ insertGifOnClick({
+ altText: 'Cat typing on a laptop',
+ src: catTypingGif,
+ })
+ }
+ className="item">
+
+ GIF
+
+ {
+ activeEditor.dispatchCommand(
+ INSERT_EXCALIDRAW_COMMAND,
+ undefined,
+ );
+ }}
+ className="item">
+
+ Excalidraw
+
+ {
+ showModal('插入表格', (onClose) => (
+
+ ));
+ }}
+ className="item">
+
+ 表格
+
+
+
+
+ )}
+
+ );
}
diff --git a/src/pages/Note/Hlexical/themes/ExampleTheme.js b/src/pages/Note/Hlexical/themes/FirstTheme.js
similarity index 97%
rename from src/pages/Note/Hlexical/themes/ExampleTheme.js
rename to src/pages/Note/Hlexical/themes/FirstTheme.js
index 3313bb3..77628cf 100644
--- a/src/pages/Note/Hlexical/themes/ExampleTheme.js
+++ b/src/pages/Note/Hlexical/themes/FirstTheme.js
@@ -1,4 +1,4 @@
-const exampleTheme = {
+const firstTheme = {
ltr: "ltr",
rtl: "rtl",
placeholder: "editor-placeholder",
@@ -66,5 +66,5 @@ const exampleTheme = {
}
};
- export default exampleTheme;
+ export default firstTheme;
\ No newline at end of file