From 427189e2d98dc5c7bf2cb2fc3e2794e06e146927 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Sun, 12 May 2024 18:15:15 -0500 Subject: [PATCH 01/16] feat(editorConfig.ts): add AutoLinkNode import to support automatic linking feature The AutoLinkNode import was added to the editorConfig.ts file to support the automatic linking feature in the editor. This allows for easier and more convenient linking within the editor without the need for manual input of link nodes. --- packages/editor/src/editorConfig.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/editorConfig.ts b/packages/editor/src/editorConfig.ts index 08d602fcc..a2c309f35 100644 --- a/packages/editor/src/editorConfig.ts +++ b/packages/editor/src/editorConfig.ts @@ -1,7 +1,7 @@ import { ListItemNode, ListNode } from "@lexical/list" import { HeadingNode, QuoteNode } from "@lexical/rich-text" import { TableCellNode, TableRowNode } from "@lexical/table" -import { LinkNode } from "@lexical/link" +import { LinkNode, AutoLinkNode } from "@lexical/link" import { ImageNode } from "image-plugin" import { WidthTableNode } from "width-table-plugin" import { FlexLayoutNode } from "flex-layout-plugin" @@ -32,6 +32,7 @@ const dictyEditorConfig = { ListItemNode, ListNode, LinkNode, + AutoLinkNode, ImageNode, TableCellNode, TableRowNode, From ab1df63a17c0ea260ee7fd5716adb998e6039550 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Sun, 12 May 2024 19:20:22 -0500 Subject: [PATCH 02/16] feat(editor-toolbar): add InsertLinkButton component to the project The InsertLinkButton component has been added to the project to provide a button with an insert link icon for use in the editor toolbar. This new component enhances the functionality of the editor toolbar by allowing users to easily insert links into the editor content. --- .../editor-toolbar/src/components/InsertLinkButton.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 packages/editor-toolbar/src/components/InsertLinkButton.tsx diff --git a/packages/editor-toolbar/src/components/InsertLinkButton.tsx b/packages/editor-toolbar/src/components/InsertLinkButton.tsx new file mode 100644 index 000000000..1d5dfbf72 --- /dev/null +++ b/packages/editor-toolbar/src/components/InsertLinkButton.tsx @@ -0,0 +1,8 @@ +import { IconButton } from "@material-ui/core" +import InsertLinkIcon from '@material-ui/icons/InsertLink' + +const InsertLinkButton = () => { + return +} + +export { InsertLinkButton } From 9a543b05c35b4e8a170fbe90bcf127bdf6ce8966 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Sun, 12 May 2024 19:39:27 -0500 Subject: [PATCH 03/16] feat(editor-toolbar): add InsertLinkButton component to the DictybaseToolbar The InsertLinkButton component has been added to the DictybaseToolbar, enhancing the functionality of the toolbar by providing users with the ability to insert links into the editor content. --- packages/editor-toolbar/src/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/editor-toolbar/src/index.tsx b/packages/editor-toolbar/src/index.tsx index 081253386..3454a8f97 100644 --- a/packages/editor-toolbar/src/index.tsx +++ b/packages/editor-toolbar/src/index.tsx @@ -10,6 +10,7 @@ import { FormatUnderlineButton } from "./components/FormatUnderlineButton" import { ColorPickerButton } from "./components/ColorPickerButton" import { InsertTableButton } from "./components/InsertTableButton" import { InsertImageButton } from "./components/InsertImageButton" +import { InsertLinkButton } from "./components/InsertLinkButton" import { useCleanup } from "./hooks/useCleanup" import { useToolbarStyles } from "./hooks/useToolbarStyles" @@ -27,6 +28,7 @@ const DictybaseToolbar = () => { + From 240c741839ce22cff8fae31eecd1b2bfea9852a2 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Sun, 12 May 2024 20:31:37 -0500 Subject: [PATCH 04/16] fix(InsertLinkButton.tsx): replace incorrect component name in IconButton with InsertLinkIcon The incorrect component name was used in the IconButton component, which was causing a rendering issue. By replacing it with the correct component name, InsertLinkIcon, the button now displays the intended icon correctly. --- packages/editor-toolbar/src/components/InsertLinkButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor-toolbar/src/components/InsertLinkButton.tsx b/packages/editor-toolbar/src/components/InsertLinkButton.tsx index 1d5dfbf72..7d291eaec 100644 --- a/packages/editor-toolbar/src/components/InsertLinkButton.tsx +++ b/packages/editor-toolbar/src/components/InsertLinkButton.tsx @@ -2,7 +2,7 @@ import { IconButton } from "@material-ui/core" import InsertLinkIcon from '@material-ui/icons/InsertLink' const InsertLinkButton = () => { - return + return } export { InsertLinkButton } From e19d35fccf8e51a9762991cce5cfd2be0ada265c Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Sun, 12 May 2024 22:32:10 -0500 Subject: [PATCH 05/16] feat(InsertLinkButton.tsx): add functionality to insert a link in the editor when the InsertLinkButton is clicked The InsertLinkButton component now includes functionality to insert a link in the editor when the button is clicked. This is achieved by updating the editor state on click to toggle a link and insert the specified link text. This enhancement improves the user experience by providing a convenient way to add links within the editor. --- .../src/components/InsertLinkButton.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/editor-toolbar/src/components/InsertLinkButton.tsx b/packages/editor-toolbar/src/components/InsertLinkButton.tsx index 7d291eaec..b559b85bd 100644 --- a/packages/editor-toolbar/src/components/InsertLinkButton.tsx +++ b/packages/editor-toolbar/src/components/InsertLinkButton.tsx @@ -1,8 +1,25 @@ import { IconButton } from "@material-ui/core" import InsertLinkIcon from '@material-ui/icons/InsertLink' +import { $createLinkNode, toggleLink, TOGGLE_LINK_COMMAND } from "@lexical/link" +import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext" +import { $getSelection, $isTextNode } from "lexical" const InsertLinkButton = () => { - return + const [editor] = useLexicalComposerContext() + + const onClick = () => { + editor.update(() => { + const selection = $getSelection() + const selectionNodes = selection.getNodes() + editor.dispatchCommand(TOGGLE_LINK_COMMAND, null) + toggleLink("test") + console.log(selection) + console.log(selectionNodes) + }) + + } + + return } export { InsertLinkButton } From 2246ace015040e7edbe12e853dd045bfc6ffba79 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 13 May 2024 16:26:37 -0500 Subject: [PATCH 06/16] chore(editor-toolbar): add ts-pattern package as a dependency The ts-pattern package has been added as a dependency to the editor-toolbar package to introduce pattern matching capabilities in the codebase. This addition enhances the functionality and flexibility of the editor-toolbar package by leveraging the features provided by the ts-pattern library. --- packages/editor-toolbar/package.json | 3 ++- yarn.lock | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/editor-toolbar/package.json b/packages/editor-toolbar/package.json index 9e4fce786..ab5cd8dc5 100644 --- a/packages/editor-toolbar/package.json +++ b/packages/editor-toolbar/package.json @@ -16,7 +16,8 @@ "fp-ts": "^2.16.0", "jotai-optics": "^0.3.0", "optics-ts": "^2.4.1", - "image-plugin": "*" + "image-plugin": "*", + "ts-pattern": "^4.0" }, "devDependencies": { "@testing-library/react": "^12.x", diff --git a/yarn.lock b/yarn.lock index 24d62f86d..2acf353cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18553,7 +18553,7 @@ ts-jest@^27.1.3: semver "7.x" yargs-parser "20.x" -ts-pattern@4.x: +ts-pattern@4.x, ts-pattern@^4.0: version "4.3.0" resolved "https://registry.yarnpkg.com/ts-pattern/-/ts-pattern-4.3.0.tgz#7a995b39342f1b00d1507c2d2f3b90ea16e178a6" integrity sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg== From 9c83080724a464878d868c7b7895ed27e5a70604 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 13 May 2024 16:27:16 -0500 Subject: [PATCH 07/16] feat(useLinkProperties.tsx): add a custom hook useLinkProperties to manage link properties in the editor toolbar The useLinkProperties custom hook is added to handle link properties in the editor toolbar. It utilizes Jotai for state management and provides a function to determine if a selected text contains a link node parent. This hook enhances the functionality of the editor toolbar by enabling link-related operations. --- .../src/hooks/useLinkProperties.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 packages/editor-toolbar/src/hooks/useLinkProperties.tsx diff --git a/packages/editor-toolbar/src/hooks/useLinkProperties.tsx b/packages/editor-toolbar/src/hooks/useLinkProperties.tsx new file mode 100644 index 000000000..67c1ef8ae --- /dev/null +++ b/packages/editor-toolbar/src/hooks/useLinkProperties.tsx @@ -0,0 +1,35 @@ +import { useSetAtom } from "jotai" +import { useCallback } from "react" +import { $isLinkNode } from "@lexical/link" +import { $getSelection, $isRangeSelection, $isTextNode, LexicalNode } from "lexical" +import { pipe } from "fp-ts/function" +import { map as Amap, reduce as Areduce, filter as Afilter } from "fp-ts/Array" +import { MonoidAny } from "fp-ts/boolean" +import { + isLinkAtom, +} from "../context/atomConfigs" + +const hasLinkNodeParent = (node: LexicalNode) => { + return pipe( + node.getParents(), + Amap((parent) => $isLinkNode(parent)), + Areduce(false, MonoidAny.concat) + ) +} + +const useLinkProperties = () => { + const setIsLink = useSetAtom(isLinkAtom) + return useCallback(() => { + const selection = $getSelection() + if (!$isRangeSelection(selection)) return + const isLink = pipe( + selection.getNodes(), + Afilter($isTextNode), + Amap((node) => hasLinkNodeParent(node)), + Areduce(false, MonoidAny.concat) + ) + setIsLink(isLink) + }, [setIsLink]) +} + +export { useLinkProperties } From 1fa212ee569904116438151afa26e52154f0766b Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 13 May 2024 16:27:44 -0500 Subject: [PATCH 08/16] feat(editor-toolbar): add isLinkAtom to manage link formatting in editor toolbar The isLinkAtom is added to the editor toolbar context to manage the state of whether a selected text should be formatted as a link. This new atom allows for better control and management of link formatting within the editor toolbar. --- packages/editor-toolbar/src/context/atomConfigs.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/editor-toolbar/src/context/atomConfigs.ts b/packages/editor-toolbar/src/context/atomConfigs.ts index 51a186d5d..ed16577e6 100644 --- a/packages/editor-toolbar/src/context/atomConfigs.ts +++ b/packages/editor-toolbar/src/context/atomConfigs.ts @@ -45,6 +45,7 @@ export const formatAtom = atom({ fontColor: "hsl(0, 0%, 0%)", fontFamily: FontFamily.ARIAL, blockType: BlockTypes.PARAGRAPH, + isLink: false, }) export const isBoldAtom = focusAtom(formatAtom, (optic) => optic.prop("isBold")) export const isItalicAtom = focusAtom(formatAtom, (optic) => @@ -67,6 +68,8 @@ export const blockTypeAtom = focusAtom(formatAtom, (optic) => optic.prop("blockType"), ) +export const isLinkAtom = focusAtom(formatAtom, (optic) => optic.prop("isLink")) + const historyAtom = atom({ canUndo: false, canRedo: false, From e52aa8af7386400a51a6b9b28d41b9890294b1a3 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 13 May 2024 16:31:03 -0500 Subject: [PATCH 09/16] feat(useUpdateToolbar): add support for updating link properties in the toolbar The useUpdateToolbar hook now includes a new function call to updateLinkProperties, which allows for updating link properties in the toolbar. This enhancement provides additional functionality to the toolbar by enabling users to modify link properties seamlessly. --- packages/editor-toolbar/src/hooks/useUpdateToolbar.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/editor-toolbar/src/hooks/useUpdateToolbar.ts b/packages/editor-toolbar/src/hooks/useUpdateToolbar.ts index 1b4e4d1ee..49fd52916 100644 --- a/packages/editor-toolbar/src/hooks/useUpdateToolbar.ts +++ b/packages/editor-toolbar/src/hooks/useUpdateToolbar.ts @@ -2,20 +2,24 @@ import { useCallback } from "react" import { useFontProperties } from "./useFontProperties" import { useFontColorProperties } from "./useFontColorProperties" import { useBlockTypeProperties } from "./useBlockTypeProperties" +import { useLinkProperties } from "./useLinkProperties" const useUpdateToolbar = () => { const updateFontProperties = useFontProperties() const updateTextColorProperties = useFontColorProperties() const updateBlockTypeProperties = useBlockTypeProperties() + const updateLinkProperties = useLinkProperties() return useCallback(() => { updateFontProperties() updateTextColorProperties() updateBlockTypeProperties() + updateLinkProperties() }, [ updateBlockTypeProperties, updateFontProperties, updateTextColorProperties, + updateLinkProperties, ]) } From e0c50f984f0c8892d36b2e9d28a71a01560996fd Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 13 May 2024 16:31:44 -0500 Subject: [PATCH 10/16] feat(Editor.tsx): add LinkPlugin to support adding hyperlinks in the editor The LinkPlugin is added to the Editor component to provide support for adding hyperlinks within the editor. This enhancement allows users to easily insert and manage hyperlinks in the content being edited. --- packages/editor/src/Editor.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/editor/src/Editor.tsx b/packages/editor/src/Editor.tsx index afdd502b8..0e2f5b847 100644 --- a/packages/editor/src/Editor.tsx +++ b/packages/editor/src/Editor.tsx @@ -6,6 +6,7 @@ import { import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin" import { ContentEditable } from "@lexical/react/LexicalContentEditable" import { ListPlugin } from "@lexical/react/LexicalListPlugin" +import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin" import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin" import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary" import { Grid, Container, Button, makeStyles, Theme } from "@material-ui/core" @@ -82,6 +83,7 @@ const Editor = ({ }}> <>{plugins} + From 4a8a67f4956ec914f5d96bf3806d552f8f749ac9 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 13 May 2024 16:32:05 -0500 Subject: [PATCH 11/16] feat(InsertLinkButton.tsx): add functionality to toggle link creation based on isLink state The code now includes functionality to toggle link creation based on the isLink state. When the isLink state is true, the editor will dispatch the TOGGLE_LINK_COMMAND with a null value. When the isLink state is false, the editor will dispatch the TOGGLE_LINK_COMMAND with an empty string. This change enhances the InsertLinkButton component's behavior by dynamically handling link creation based on the isLink state. --- .../src/components/InsertLinkButton.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/editor-toolbar/src/components/InsertLinkButton.tsx b/packages/editor-toolbar/src/components/InsertLinkButton.tsx index b559b85bd..a64b63062 100644 --- a/packages/editor-toolbar/src/components/InsertLinkButton.tsx +++ b/packages/editor-toolbar/src/components/InsertLinkButton.tsx @@ -3,23 +3,31 @@ import InsertLinkIcon from '@material-ui/icons/InsertLink' import { $createLinkNode, toggleLink, TOGGLE_LINK_COMMAND } from "@lexical/link" import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext" import { $getSelection, $isTextNode } from "lexical" +import { useAtom } from "jotai" +import { match } from "ts-pattern" +import { isLinkAtom } from "../context/atomConfigs" +import { useActiveClass } from "../hooks/useActiveClass" const InsertLinkButton = () => { const [editor] = useLexicalComposerContext() + const [isLink, setIsLink] = useAtom(isLinkAtom) + const isActive = useActiveClass(isLinkAtom) const onClick = () => { editor.update(() => { - const selection = $getSelection() - const selectionNodes = selection.getNodes() - editor.dispatchCommand(TOGGLE_LINK_COMMAND, null) - toggleLink("test") - console.log(selection) - console.log(selectionNodes) + match(isLink) + .with(true, () => { + editor.dispatchCommand(TOGGLE_LINK_COMMAND, null) + }) + .with(false, () => { + editor.dispatchCommand(TOGGLE_LINK_COMMAND, "") + }) + .exhaustive() }) } - return + return } export { InsertLinkButton } From 73934b98f7f2b3fff35c2507beb802b0f7183854 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 13 May 2024 21:45:47 -0500 Subject: [PATCH 12/16] feat(InsertLinkButton.tsx): add EditingLinkPopper component to InsertLinkButton for editing link functionality The changes in this commit focus on improving the code style by organizing imports and formatting the code for better readability. Additionally, a new EditingLinkPopper component is added to the InsertLinkButton component to provide functionality for editing links within the editor toolbar. --- .../src/components/InsertLinkButton.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/editor-toolbar/src/components/InsertLinkButton.tsx b/packages/editor-toolbar/src/components/InsertLinkButton.tsx index a64b63062..c4f5a25c8 100644 --- a/packages/editor-toolbar/src/components/InsertLinkButton.tsx +++ b/packages/editor-toolbar/src/components/InsertLinkButton.tsx @@ -1,10 +1,10 @@ import { IconButton } from "@material-ui/core" -import InsertLinkIcon from '@material-ui/icons/InsertLink' -import { $createLinkNode, toggleLink, TOGGLE_LINK_COMMAND } from "@lexical/link" +import InsertLinkIcon from "@material-ui/icons/InsertLink" +import { TOGGLE_LINK_COMMAND } from "@lexical/link" import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext" -import { $getSelection, $isTextNode } from "lexical" import { useAtom } from "jotai" import { match } from "ts-pattern" +import { EditingLinkPopper } from "./EditingLinkPopper" import { isLinkAtom } from "../context/atomConfigs" import { useActiveClass } from "../hooks/useActiveClass" @@ -23,11 +23,17 @@ const InsertLinkButton = () => { editor.dispatchCommand(TOGGLE_LINK_COMMAND, "") }) .exhaustive() - }) - + }) } - return + return ( + <> + + + + + + ) } export { InsertLinkButton } From 826720d5580fccc5d563dc6afe536a6ce51c7571 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Mon, 13 May 2024 21:46:07 -0500 Subject: [PATCH 13/16] feat(EditingLinkPopper.tsx): add a new component EditingLinkPopper to handle link editing functionality The EditingLinkPopper component is added to the project to handle link editing functionality within the editor toolbar. It utilizes various libraries and functions from fp-ts and lexical to manage the anchor element for the popper, determine if a link is present, and control its appearance based on certain conditions. The component listens for editor state updates and dynamically sets the anchor element for the popper to display a TextField for editing links. --- .../src/components/EditingLinkPopper.tsx | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 packages/editor-toolbar/src/components/EditingLinkPopper.tsx diff --git a/packages/editor-toolbar/src/components/EditingLinkPopper.tsx b/packages/editor-toolbar/src/components/EditingLinkPopper.tsx new file mode 100644 index 000000000..94c91d59c --- /dev/null +++ b/packages/editor-toolbar/src/components/EditingLinkPopper.tsx @@ -0,0 +1,76 @@ +import { useState, useEffect } from "react" +import { Popper, TextField } from "@material-ui/core" +import { $getSelection } from "lexical" +import { useAtomValue } from "jotai" +import { $isLinkNode, LinkNode } from "@lexical/link" +import { + TextNode, + $isRangeSelection, + $isTextNode, + LexicalEditor, +} from "lexical" +import { + head as Ahead, + reduce as Areduce, + map as Amap, + filter as Afilter, +} from "fp-ts/Array" +import { + fromNullable as OfromNullable, + toNullable as OtoNullable, + getOrElse as OgetOrElse, + bindTo as ObindTo, + bind as Obind, + let as Olet, + Do as ODo, + map as Omap, + none, +} from "fp-ts/Option" +import { MonoidAll } from "fp-ts/boolean" +import { pipe } from "fp-ts/function" +import { isLinkAtom } from "../context/atomConfigs" +import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext" + +const getAnchorElement = (editor: LexicalEditor) => { + const selection = $getSelection() + if (!$isRangeSelection(selection)) return none + return pipe( + ODo, + Obind("textNode", () => + pipe(selection.getNodes(), Afilter($isTextNode), Ahead), + ), + Obind("linkNode", ({ textNode }) => + pipe(textNode.getParents(), Afilter($isLinkNode), Ahead), + ), + Obind("anchorElement", ({ linkNode }) => + OfromNullable(linkNode.exportDOM(editor).element), + ), + Omap(({ anchorElement }) => anchorElement), + ) +} + +const EditingLinkPopper = () => { + const [editor] = useLexicalComposerContext() + const [anchorElement, setAnchorElement] = useState(null) + const isLink = useAtomValue(isLinkAtom) + const shouldAppear = MonoidAll.concat(isLink as boolean, editor.isEditable()) + + useEffect(() => { + editor.registerUpdateListener(({ editorState }) => { + editorState.read(() => { + setAnchorElement(pipe(editor, getAnchorElement, OtoNullable)) + console.log("popper") + console.log(shouldAppear) + }) + }) + }, [editor, setAnchorElement]) + + console.log(anchorElement) + return ( + + + + ) +} + +export { EditingLinkPopper } From 573aec67a78fe63b4accaafa4b68a8a4429934a9 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Tue, 14 May 2024 10:10:23 -0500 Subject: [PATCH 14/16] style(EditingLinkPopper.tsx): improve variable naming for clarity and consistency The variable shouldAppear has been renamed to isOpen for better clarity and consistency with the purpose of the variable. Additionally, comments have been added to explain the necessity of setting the anchorElement before opening the Popper component. --- .../src/components/EditingLinkPopper.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/editor-toolbar/src/components/EditingLinkPopper.tsx b/packages/editor-toolbar/src/components/EditingLinkPopper.tsx index 94c91d59c..6d5acd1ac 100644 --- a/packages/editor-toolbar/src/components/EditingLinkPopper.tsx +++ b/packages/editor-toolbar/src/components/EditingLinkPopper.tsx @@ -53,21 +53,19 @@ const EditingLinkPopper = () => { const [editor] = useLexicalComposerContext() const [anchorElement, setAnchorElement] = useState(null) const isLink = useAtomValue(isLinkAtom) - const shouldAppear = MonoidAll.concat(isLink as boolean, editor.isEditable()) - + const isOpen = MonoidAll.concat(isLink as boolean, editor.isEditable()) +// anchorElement needs to be set before open useEffect(() => { editor.registerUpdateListener(({ editorState }) => { editorState.read(() => { setAnchorElement(pipe(editor, getAnchorElement, OtoNullable)) - console.log("popper") - console.log(shouldAppear) }) }) }, [editor, setAnchorElement]) - console.log(anchorElement) + console.log(anchorElement) return ( - + ) From 870173ca17d37d69cfed31dd6d59757b8a6bbf7f Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Tue, 14 May 2024 11:08:21 -0500 Subject: [PATCH 15/16] refactor(EditingLinkPopper.tsx): optimize code by removing unused state and useEffect The code has been refactored to remove the unused state and useEffect related to setting the anchorElement. This optimization simplifies the component logic and improves code readability by eliminating unnecessary complexity. --- .../src/components/EditingLinkPopper.tsx | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/editor-toolbar/src/components/EditingLinkPopper.tsx b/packages/editor-toolbar/src/components/EditingLinkPopper.tsx index 6d5acd1ac..595cccfca 100644 --- a/packages/editor-toolbar/src/components/EditingLinkPopper.tsx +++ b/packages/editor-toolbar/src/components/EditingLinkPopper.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from "react" -import { Popper, TextField } from "@material-ui/core" +import { Popper, TextField, Paper } from "@material-ui/core" import { $getSelection } from "lexical" import { useAtomValue } from "jotai" import { $isLinkNode, LinkNode } from "@lexical/link" @@ -49,25 +49,30 @@ const getAnchorElement = (editor: LexicalEditor) => { ) } -const EditingLinkPopper = () => { +type EditingLinkPopper = { + anchorElement: HTMLElement | null +} + +const EditingLinkPopper = ({ anchorElement }: EditingLinkPopper) => { const [editor] = useLexicalComposerContext() - const [anchorElement, setAnchorElement] = useState(null) + // const [anchorElement, setAnchorElement] = useState(null) const isLink = useAtomValue(isLinkAtom) const isOpen = MonoidAll.concat(isLink as boolean, editor.isEditable()) + console.log(anchorElement) // anchorElement needs to be set before open - useEffect(() => { - editor.registerUpdateListener(({ editorState }) => { - editorState.read(() => { - setAnchorElement(pipe(editor, getAnchorElement, OtoNullable)) - }) - }) - }, [editor, setAnchorElement]) - - console.log(anchorElement) + // useEffect(() => { + // editor.registerUpdateListener(({ editorState }) => { + // editorState.read(() => { + // setAnchorElement(pipe(editor, getAnchorElement, OtoNullable)) + // }) + // }) + // }, [editor, setAnchorElement]) return ( - - - + + + + + ) } From 02c471c681efc91032bb18ae791958429ca57df5 Mon Sep 17 00:00:00 2001 From: Kevin Tun Date: Tue, 14 May 2024 11:08:36 -0500 Subject: [PATCH 16/16] feat(InsertLinkButton.tsx): add useRef hook to manage a reference to the IconButton element The useRef hook is added to manage a reference to the IconButton element in the InsertLinkButton component. This allows for more control over the element, such as accessing its properties or methods. --- packages/editor-toolbar/src/components/InsertLinkButton.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/editor-toolbar/src/components/InsertLinkButton.tsx b/packages/editor-toolbar/src/components/InsertLinkButton.tsx index c4f5a25c8..a8f031864 100644 --- a/packages/editor-toolbar/src/components/InsertLinkButton.tsx +++ b/packages/editor-toolbar/src/components/InsertLinkButton.tsx @@ -1,3 +1,4 @@ +import { useRef } from "react" import { IconButton } from "@material-ui/core" import InsertLinkIcon from "@material-ui/icons/InsertLink" import { TOGGLE_LINK_COMMAND } from "@lexical/link" @@ -12,6 +13,7 @@ const InsertLinkButton = () => { const [editor] = useLexicalComposerContext() const [isLink, setIsLink] = useAtom(isLinkAtom) const isActive = useActiveClass(isLinkAtom) + const ref = useRef(null) const onClick = () => { editor.update(() => { @@ -28,10 +30,10 @@ const InsertLinkButton = () => { return ( <> - + - + ) }