@webiny/lexical-editor 0.0.0-unstable.06b2ede40f

package/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "@webiny/lexical-editor",
+	"version": "0.0.0-unstable.06b2ede40f",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"license": "MIT",
+	"dependencies": {
+		"@emotion/react": "11.10.8",
+		"@lexical/code": "0.23.1",
+		"@lexical/history": "0.23.1",
+		"@lexical/react": "0.23.1",
+		"@lexical/rich-text": "0.23.1",
+		"@lexical/selection": "0.23.1",
+		"@lexical/text": "0.23.1",
+		"@lexical/utils": "0.23.1",
+		"@webiny/lexical-nodes": "0.0.0-unstable.06b2ede40f",
+		"@webiny/lexical-theme": "0.0.0-unstable.06b2ede40f",
+		"@webiny/react-composition": "0.0.0-unstable.06b2ede40f",
+		"@webiny/react-properties": "0.0.0-unstable.06b2ede40f",
+		"emotion": "10.0.27",
+		"lexical": "0.23.1",
+		"lodash": "4.17.21",
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
+	},
+	"devDependencies": {
+		"@webiny/project-utils": "0.0.0-unstable.06b2ede40f"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "node ../cli/bin.js run build",
+		"watch": "node ../cli/bin.js run watch"
+	},
+	"gitHead": "06b2ede40fc2212a70eeafd74afd50b56fb0ce82"
+}

package/plugins/BlurEventPlugin/BlurEventPlugin.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import type { LexicalValue } from "../../types";
+interface BlurEventPlugin {
+    onBlur?: (editorState: LexicalValue) => void;
+}
+export declare const BlurEventPlugin: FC<BlurEventPlugin>;
+export {};

package/plugins/BlurEventPlugin/BlurEventPlugin.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { BLUR_COMMAND, COMMAND_PRIORITY_LOW } from "lexical";
+import { useRichTextEditor } from "../../hooks";
+export const BlurEventPlugin = ({
+  onBlur
+}) => {
+  const {
+    editor
+  } = useRichTextEditor();
+  useEffect(() => editor.registerCommand(BLUR_COMMAND, () => {
+    if (typeof onBlur === "function") {
+      const editorState = editor.getEditorState();
+      onBlur(JSON.stringify(editorState.toJSON()));
+    }
+    return false;
+  }, COMMAND_PRIORITY_LOW), []);
+  return null;
+};
+
+//# sourceMappingURL=BlurEventPlugin.js.map

package/plugins/BlurEventPlugin/BlurEventPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","BLUR_COMMAND","COMMAND_PRIORITY_LOW","useRichTextEditor","BlurEventPlugin","onBlur","editor","registerCommand","editorState","getEditorState","JSON","stringify","toJSON"],"sources":["BlurEventPlugin.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect } from \"react\";\nimport { BLUR_COMMAND, COMMAND_PRIORITY_LOW } from \"lexical\";\nimport type { LexicalValue } from \"~/types\";\nimport { useRichTextEditor } from \"~/hooks\";\n\ninterface BlurEventPlugin {\n    onBlur?: (editorState: LexicalValue) => void;\n}\n\nexport const BlurEventPlugin: FC<BlurEventPlugin> = ({ onBlur }) => {\n    const { editor } = useRichTextEditor();\n\n    useEffect(\n        () =>\n            editor.registerCommand(\n                BLUR_COMMAND,\n                () => {\n                    if (typeof onBlur === \"function\") {\n                        const editorState = editor.getEditorState();\n                        onBlur(JSON.stringify(editorState.toJSON()));\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n        []\n    );\n    return null;\n};\n"],"mappings":"AACA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,YAAY,EAAEC,oBAAoB,QAAQ,SAAS;AAE5D,SAASC,iBAAiB;AAM1B,OAAO,MAAMC,eAAoC,GAAGA,CAAC;EAAEC;AAAO,CAAC,KAAK;EAChE,MAAM;IAAEC;EAAO,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EAEtCH,SAAS,CACL,MACIM,MAAM,CAACC,eAAe,CAClBN,YAAY,EACZ,MAAM;IACF,IAAI,OAAOI,MAAM,KAAK,UAAU,EAAE;MAC9B,MAAMG,WAAW,GAAGF,MAAM,CAACG,cAAc,CAAC,CAAC;MAC3CJ,MAAM,CAACK,IAAI,CAACC,SAAS,CAACH,WAAW,CAACI,MAAM,CAAC,CAAC,CAAC,CAAC;IAChD;IACA,OAAO,KAAK;EAChB,CAAC,EACDV,oBACJ,CAAC,EACL,EACJ,CAAC;EACD,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.d.ts

@@ -0,0 +1 @@
+export declare function CodeHighlightPlugin(): null;

package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { registerCodeHighlighting } from "@lexical/code";
+import { useRichTextEditor } from "../../hooks";
+export function CodeHighlightPlugin() {
+  const {
+    editor
+  } = useRichTextEditor();
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+  return null;
+}
+
+//# sourceMappingURL=CodeHighlightPlugin.js.map

package/plugins/CodeHighlightPlugin/CodeHighlightPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","registerCodeHighlighting","useRichTextEditor","CodeHighlightPlugin","editor"],"sources":["CodeHighlightPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { registerCodeHighlighting } from \"@lexical/code\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport function CodeHighlightPlugin() {\n    const { editor } = useRichTextEditor();\n    useEffect(() => {\n        return registerCodeHighlighting(editor);\n    }, [editor]);\n    return null;\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,wBAAwB,QAAQ,eAAe;AACxD,SAASC,iBAAiB;AAE1B,OAAO,SAASC,mBAAmBA,CAAA,EAAG;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtCF,SAAS,CAAC,MAAM;IACZ,OAAOC,wBAAwB,CAACG,MAAM,CAAC;EAC3C,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EACZ,OAAO,IAAI;AACf","ignoreList":[]}

package/plugins/CodeHighlightPlugin/index.d.ts

@@ -0,0 +1 @@
+export * from "./CodeHighlightPlugin";

package/plugins/CodeHighlightPlugin/index.js

@@ -0,0 +1,3 @@
+export * from "./CodeHighlightPlugin";
+
+//# sourceMappingURL=index.js.map

package/plugins/CodeHighlightPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./CodeHighlightPlugin\";\n"],"mappings":"AAAA","ignoreList":[]}

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { LinkEditForm as DefaultLinkEditForm } from "./LinkEditForm";
+import { type LexicalEditor } from "lexical";
+export interface LinkData {
+    url: string;
+    target: string | null;
+    alt: string | null;
+}
+interface FloatingLinkEditorProps {
+    editor: LexicalEditor;
+    isVisible: boolean;
+    anchorElem: HTMLElement;
+    LinkEditForm?: typeof DefaultLinkEditForm;
+}
+export declare function FloatingLinkEditor({ editor, isVisible, anchorElem, LinkEditForm }: FloatingLinkEditorProps): React.JSX.Element;
+export {};

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js

@@ -0,0 +1,158 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@webiny/lexical-nodes";
+import { setFloatingElemPosition } from "../../utils/setFloatingElemPosition";
+import { sanitizeUrl } from "../../utils/sanitizeUrl";
+import { isChildOfLinkEditor } from "./isChildOfLinkEditor";
+import { LinkEditForm as DefaultLinkEditForm } from "./LinkEditForm";
+import { LinkPreviewForm } from "./LinkPreviewForm";
+import { SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, BLUR_COMMAND, $getSelection, $isRangeSelection } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+export function FloatingLinkEditor({
+  editor,
+  isVisible,
+  anchorElem,
+  LinkEditForm = DefaultLinkEditForm
+}) {
+  const editorRef = useRef(null);
+  const [linkData, setLinkData] = useState({
+    url: "",
+    target: null,
+    alt: null
+  });
+  const [isEditMode, setEditMode] = useState(false);
+  const [lastSelection, setLastSelection] = useState(null);
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    const emptyLinkData = {
+      url: "",
+      target: null,
+      alt: null
+    };
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        const linkData = {
+          url: parent.getURL(),
+          target: parent.getTarget(),
+          alt: $isLinkNode(parent) ? parent.getAlt() : null
+        };
+        setLinkData(linkData);
+      } else if ($isLinkNode(node)) {
+        const linkData = {
+          url: node.getURL(),
+          target: node.getTarget(),
+          alt: $isLinkNode(node) ? node.getAlt() : null
+        };
+        setLinkData(linkData);
+      } else {
+        setLinkData(emptyLinkData);
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+    if (editorElem === null) {
+      return;
+    }
+    const rootElement = editor.getRootElement();
+    if (selection !== null && nativeSelection !== null && 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();
+      }
+      setFloatingElemPosition(rect, editorElem, anchorElem);
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== "link-input") {
+      if (rootElement !== null) {
+        setFloatingElemPosition(null, editorElem, anchorElem);
+      }
+      setLastSelection(null);
+      setEditMode(false);
+      setLinkData(emptyLinkData);
+    }
+    return true;
+  }, [anchorElem, editor]);
+  const removeLink = () => {
+    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    setEditMode(false);
+  };
+  const applyChanges = linkData => {
+    const confirmedLinkData = {
+      url: sanitizeUrl(linkData.url),
+      target: linkData.target,
+      alt: linkData.alt
+    };
+    if (lastSelection !== null) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, confirmedLinkData);
+      setEditMode(false);
+    }
+  };
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement;
+    const update = () => {
+      editor.getEditorState().read(() => {
+        updateLinkEditor();
+      });
+    };
+    window.addEventListener("resize", update);
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update);
+    }
+    return () => {
+      window.removeEventListener("resize", update);
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update);
+      }
+    };
+  }, [anchorElem.parentElement, editor, updateLinkEditor]);
+  useEffect(() => {
+    return mergeRegister(editor.registerUpdateListener(({
+      editorState
+    }) => {
+      editorState.read(() => {
+        updateLinkEditor();
+      });
+    }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+      updateLinkEditor();
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(BLUR_COMMAND, payload => {
+      if (!isChildOfLinkEditor(payload.relatedTarget)) {
+        // setEditMode(false);
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW));
+  }, [editor, updateLinkEditor]);
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: editorRef,
+    className: "link-editor",
+    style: {
+      display: isVisible ? "block" : "none"
+    }
+  }, isEditMode ? /*#__PURE__*/React.createElement(LinkEditForm, {
+    linkData: linkData,
+    onSave: applyChanges,
+    onCancel: () => setEditMode(false)
+  }) : /*#__PURE__*/React.createElement(LinkPreviewForm, {
+    linkData: linkData,
+    removeLink: removeLink,
+    onEdit: () => {
+      setEditMode(true);
+    }
+  }));
+}
+
+//# sourceMappingURL=FloatingLinkEditor.js.map

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useRef","useState","getSelectedNode","$isLinkNode","TOGGLE_LINK_COMMAND","setFloatingElemPosition","sanitizeUrl","isChildOfLinkEditor","LinkEditForm","DefaultLinkEditForm","LinkPreviewForm","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","$getSelection","$isRangeSelection","mergeRegister","FloatingLinkEditor","editor","isVisible","anchorElem","editorRef","linkData","setLinkData","url","target","alt","isEditMode","setEditMode","lastSelection","setLastSelection","updateLinkEditor","selection","emptyLinkData","node","parent","getParent","getURL","getTarget","getAlt","editorElem","current","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","domRange","getRangeAt","rect","inner","firstElementChild","getBoundingClientRect","className","removeLink","dispatchCommand","applyChanges","confirmedLinkData","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","registerUpdateListener","editorState","registerCommand","payload","relatedTarget","createElement","ref","style","display","onSave","onCancel","onEdit"],"sources":["FloatingLinkEditor.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { sanitizeUrl } from \"~/utils/sanitizeUrl\";\nimport { isChildOfLinkEditor } from \"./isChildOfLinkEditor\";\nimport { LinkEditForm as DefaultLinkEditForm } from \"./LinkEditForm\";\nimport { LinkPreviewForm } from \"./LinkPreviewForm\";\nimport {\n    SELECTION_CHANGE_COMMAND,\n    type BaseSelection,\n    type LexicalEditor,\n    COMMAND_PRIORITY_LOW,\n    BLUR_COMMAND,\n    $getSelection,\n    $isRangeSelection\n} from \"lexical\";\nimport { mergeRegister } from \"@lexical/utils\";\n\nexport interface LinkData {\n    url: string;\n    target: string | null;\n    alt: string | null;\n}\n\ninterface FloatingLinkEditorProps {\n    editor: LexicalEditor;\n    isVisible: boolean;\n    anchorElem: HTMLElement;\n    LinkEditForm?: typeof DefaultLinkEditForm;\n}\n\nexport function FloatingLinkEditor({\n    editor,\n    isVisible,\n    anchorElem,\n    LinkEditForm = DefaultLinkEditForm\n}: FloatingLinkEditorProps) {\n    const editorRef = useRef<HTMLDivElement | null>(null);\n    const [linkData, setLinkData] = useState<LinkData>({\n        url: \"\",\n        target: null,\n        alt: null\n    });\n\n    const [isEditMode, setEditMode] = useState(false);\n    const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);\n\n    const updateLinkEditor = useCallback(() => {\n        const selection = $getSelection();\n        const emptyLinkData = { url: \"\", target: null, alt: null };\n        if ($isRangeSelection(selection)) {\n            const node = getSelectedNode(selection);\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent)) {\n                const linkData = {\n                    url: parent.getURL(),\n                    target: parent.getTarget(),\n                    alt: $isLinkNode(parent) ? parent.getAlt() : null\n                };\n                setLinkData(linkData);\n            } else if ($isLinkNode(node)) {\n                const linkData = {\n                    url: node.getURL(),\n                    target: node.getTarget(),\n                    alt: $isLinkNode(node) ? node.getAlt() : null\n                };\n                setLinkData(linkData);\n            } else {\n                setLinkData(emptyLinkData);\n            }\n        }\n        const editorElem = editorRef.current;\n        const nativeSelection = window.getSelection();\n        const activeElement = document.activeElement;\n\n        if (editorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const domRange = nativeSelection.getRangeAt(0);\n            let rect;\n            if (nativeSelection.anchorNode === rootElement) {\n                let inner = rootElement;\n                while (inner.firstElementChild != null) {\n                    inner = inner.firstElementChild as HTMLElement;\n                }\n                rect = inner.getBoundingClientRect();\n            } else {\n                rect = domRange.getBoundingClientRect();\n            }\n\n            setFloatingElemPosition(rect, editorElem, anchorElem);\n            setLastSelection(selection);\n        } else if (!activeElement || activeElement.className !== \"link-input\") {\n            if (rootElement !== null) {\n                setFloatingElemPosition(null, editorElem, anchorElem);\n            }\n            setLastSelection(null);\n            setEditMode(false);\n            setLinkData(emptyLinkData);\n        }\n\n        return true;\n    }, [anchorElem, editor]);\n\n    const removeLink = () => {\n        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        setEditMode(false);\n    };\n\n    const applyChanges = (linkData: LinkData) => {\n        const confirmedLinkData = {\n            url: sanitizeUrl(linkData.url),\n            target: linkData.target,\n            alt: linkData.alt\n        };\n\n        if (lastSelection !== null) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, confirmedLinkData);\n            setEditMode(false);\n        }\n    };\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateLinkEditor();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [anchorElem.parentElement, editor, updateLinkEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateLinkEditor();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateLinkEditor();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n                        // setEditMode(false);\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateLinkEditor]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateLinkEditor();\n        });\n    }, [editor, updateLinkEditor]);\n\n    return (\n        <div\n            ref={editorRef}\n            className=\"link-editor\"\n            style={{ display: isVisible ? \"block\" : \"none\" }}\n        >\n            {isEditMode ? (\n                <LinkEditForm\n                    linkData={linkData}\n                    onSave={applyChanges}\n                    onCancel={() => setEditMode(false)}\n                />\n            ) : (\n                <LinkPreviewForm\n                    linkData={linkData}\n                    removeLink={removeLink}\n                    onEdit={() => {\n                        setEditMode(true);\n                    }}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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","ignoreList":[]}

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { LinkEditForm } from "./LinkEditForm";
+interface FloatingLinkEditorProps {
+    anchorElem: () => HTMLElement;
+    LinkEditForm?: typeof LinkEditForm;
+}
+export declare const FloatingLinkEditorController: (props: FloatingLinkEditorProps) => React.ReactPortal;
+export {};

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js

@@ -0,0 +1,62 @@
+import React, { useCallback, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useRichTextEditor } from "../../hooks";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@webiny/lexical-nodes";
+import { isChildOfLinkEditor } from "./isChildOfLinkEditor";
+import debounce from "lodash/debounce";
+import { $getSelection, $isRangeSelection, BLUR_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from "lexical";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import { FloatingLinkEditor } from "./FloatingLinkEditor";
+export const FloatingLinkEditorController = props => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const [isLink, setIsLink] = useState(false);
+  const debounceSetIsLink = useCallback(debounce(setIsLink, 50), []);
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+    const node = getSelectedNode(selection);
+    const linkParent = $findMatchingParent(node, $isLinkNode);
+    const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
+    const isLinkOrChildOfLink = Boolean($isLinkNode(node) || linkParent);
+    if (!isLinkOrChildOfLink) {
+      // When hiding the toolbar, we want to hide immediately.
+      setIsLink(false);
+    }
+    if (selection.dirty) {
+      // We don't want this menu to open for auto links.
+      if (linkParent != null && autoLinkParent == null) {
+        // When showing the toolbar, we want to debounce it, because sometimes selection gets updated
+        // multiple times, and the `selection.dirty` flag goes from true to false multiple times,
+        // eventually settling on `false`, which we want to set once it has settled.
+        debounceSetIsLink(true);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    return mergeRegister(editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+      updateToolbar();
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(BLUR_COMMAND, payload => {
+      if (!isChildOfLinkEditor(payload.relatedTarget)) {
+        setIsLink(false);
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(TOGGLE_LINK_COMMAND, payload => {
+      setIsLink(!!payload);
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL));
+  }, [editor, updateToolbar]);
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(FloatingLinkEditor, {
+    isVisible: isLink,
+    editor: editor,
+    anchorElem: props.anchorElem(),
+    LinkEditForm: props.LinkEditForm
+  }), props.anchorElem());
+};
+
+//# sourceMappingURL=FloatingLinkEditorController.js.map

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useState","useEffect","createPortal","useRichTextEditor","getSelectedNode","$isAutoLinkNode","$isLinkNode","TOGGLE_LINK_COMMAND","isChildOfLinkEditor","debounce","$getSelection","$isRangeSelection","BLUR_COMMAND","COMMAND_PRIORITY_CRITICAL","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","$findMatchingParent","mergeRegister","FloatingLinkEditor","FloatingLinkEditorController","props","editor","isLink","setIsLink","debounceSetIsLink","updateToolbar","selection","node","linkParent","autoLinkParent","isLinkOrChildOfLink","Boolean","dirty","registerCommand","payload","relatedTarget","createElement","isVisible","anchorElem","LinkEditForm"],"sources":["FloatingLinkEditorController.tsx"],"sourcesContent":["import React, { useCallback, useState, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\nimport debounce from \"lodash/debounce\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_CRITICAL,\n    COMMAND_PRIORITY_LOW,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $findMatchingParent, mergeRegister } from \"@lexical/utils\";\nimport { FloatingLinkEditor } from \"./FloatingLinkEditor\";\nimport type { LinkEditForm } from \"./LinkEditForm\";\n\ninterface FloatingLinkEditorProps {\n    anchorElem: () => HTMLElement;\n    LinkEditForm?: typeof LinkEditForm;\n}\n\nexport const FloatingLinkEditorController = (props: FloatingLinkEditorProps) => {\n    const { editor } = useRichTextEditor();\n    const [isLink, setIsLink] = useState(false);\n\n    const debounceSetIsLink = useCallback(debounce(setIsLink, 50), []);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if (!$isRangeSelection(selection)) {\n            return;\n        }\n\n        const node = getSelectedNode(selection);\n        const linkParent = $findMatchingParent(node, $isLinkNode);\n        const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);\n        const isLinkOrChildOfLink = Boolean($isLinkNode(node) || linkParent);\n\n        if (!isLinkOrChildOfLink) {\n            // When hiding the toolbar, we want to hide immediately.\n            setIsLink(false);\n        }\n\n        if (selection.dirty) {\n            // We don't want this menu to open for auto links.\n            if (linkParent != null && autoLinkParent == null) {\n                // When showing the toolbar, we want to debounce it, because sometimes selection gets updated\n                // multiple times, and the `selection.dirty` flag goes from true to false multiple times,\n                // eventually settling on `false`, which we want to set once it has settled.\n                debounceSetIsLink(true);\n            }\n        }\n    }, []);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            ),\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n                        setIsLink(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                TOGGLE_LINK_COMMAND,\n                payload => {\n                    setIsLink(!!payload);\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            )\n        );\n    }, [editor, updateToolbar]);\n\n    return createPortal(\n        <FloatingLinkEditor\n            isVisible={isLink}\n            editor={editor}\n            anchorElem={props.anchorElem()}\n            LinkEditForm={props.LinkEditForm}\n        />,\n        props.anchorElem()\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.css

@@ -0,0 +1,176 @@
+.link-editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 51;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  will-change: transform;
+  padding: 10px 0;
+  pointer-events: all;
+}
+
+.link-editor .link-editor-target-checkbox {
+  padding: 10px 10px 5px 10px;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+.link-editor .link-editor-section {
+  margin: 0 15px;
+  padding: 10px 0;
+  width: calc(100% - 24px);
+}
+
+.link-editor .link-editor-popup-title {
+  margin: 0 15px 10px;
+  color: var(--mdc-theme-primary);
+}
+
+.link-editor .link-editor-section .header {
+  width: auto;
+  margin-bottom: 10px;
+}
+
+.link-editor .link-editor-section .header_icon {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.link-editor .link-editor-section .header_title {
+  font-size: 16px;
+  font-width: bold;
+  color: var(--mdc-theme-primary);
+}
+
+.link-editor .link-editor-section .section-desc {
+  color: #0a0a0a;
+}
+
+.link-editor .link-editor-section.edit-form-bottom-menu {
+  display: flex;
+  justify-content: right;
+  margin-top: 5px;
+  column-gap: 10px;
+}
+
+.link-editor .link-editor-section ul {
+  list-style: initial;
+  padding: 0 20px;
+}
+
+.link-editor .link-editor-section ul li {
+  padding: 3px 0;
+}
+
+.link-editor .link-input {
+  display: block;
+  width: calc(100% - 24px);
+  height: 42px;
+  box-sizing: border-box;
+  margin: 12px;
+  padding: 12px;
+  border-radius: 10px;
+  background-color: #eee;
+  font-size: 16px;
+  color: rgb(5, 5, 5);
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.link-editor .link-input.full-with {
+  width: 100%;
+  margin: 0;
+}
+
+.link-editor .link-input .link-unlink {
+  background-image: url(../../images/icons/unlink_icon.svg);
+  background-size: 18px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 5px;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor .link-input .link-edit {
+  background-image: url(../../images/icons/pencil-fill.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 35px;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor .link-input a {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 30px;
+  text-overflow: ellipsis;
+}
+
+.link-editor .link-input a:hover {
+  text-decoration: underline;
+}
+
+.link-editor .font-size-wrapper,
+.link-editor .font-family-wrapper {
+  display: flex;
+  margin: 0 4px;
+}
+
+.link-editor select {
+  padding: 6px;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.075);
+  border-radius: 4px;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { LinkEditForm } from "./LinkEditForm";
+import "./FloatingLinkEditorPlugin.css";
+export declare function FloatingLinkEditorPlugin({ anchorElem, ...props }: {
+    anchorElem?: () => HTMLElement;
+    LinkEditForm?: typeof LinkEditForm;
+}): JSX.Element | null;

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { FloatingLinkEditorController } from "./FloatingLinkEditorController";
+import "./FloatingLinkEditorPlugin.css";
+export function FloatingLinkEditorPlugin({
+  anchorElem = () => document.body,
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(FloatingLinkEditorController, {
+    anchorElem: anchorElem,
+    LinkEditForm: props.LinkEditForm
+  });
+}
+
+//# sourceMappingURL=FloatingLinkEditorPlugin.js.map

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FloatingLinkEditorController","FloatingLinkEditorPlugin","anchorElem","document","body","props","createElement","LinkEditForm"],"sources":["FloatingLinkEditorPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { FloatingLinkEditorController } from \"./FloatingLinkEditorController\";\nimport type { LinkEditForm } from \"./LinkEditForm\";\nimport \"./FloatingLinkEditorPlugin.css\";\n\nexport function FloatingLinkEditorPlugin({\n    anchorElem = () => document.body,\n    ...props\n}: {\n    anchorElem?: () => HTMLElement;\n    LinkEditForm?: typeof LinkEditForm;\n}): JSX.Element | null {\n    return (\n        <FloatingLinkEditorController anchorElem={anchorElem} LinkEditForm={props.LinkEditForm} />\n    );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,4BAA4B;AAErC;AAEA,OAAO,SAASC,wBAAwBA,CAAC;EACrCC,UAAU,GAAGA,CAAA,KAAMC,QAAQ,CAACC,IAAI;EAChC,GAAGC;AAIP,CAAC,EAAsB;EACnB,oBACIN,KAAA,CAAAO,aAAA,CAACN,4BAA4B;IAACE,UAAU,EAAEA,UAAW;IAACK,YAAY,EAAEF,KAAK,CAACE;EAAa,CAAE,CAAC;AAElG","ignoreList":[]}

package/plugins/FloatingLinkEditorPlugin/LinkEditForm.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { LinkData } from "./FloatingLinkEditor";
+export interface LinkFormProps {
+    linkData: LinkData;
+    onSave: (linkData: LinkData) => void;
+    onCancel: () => void;
+}
+export declare const LinkEditForm: ({ linkData, onSave, onCancel }: LinkFormProps) => React.JSX.Element;