@webiny/lexical-editor 5.40.0 → 5.40.1-beta.1

package/components/Toolbar/Toolbar.js

@@ -11,13 +11,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _lexical = require("lexical");
 var _reactDom = require("react-dom");
 var _utils = require("@lexical/utils");
-var _lexicalNodes = require("@webiny/lexical-nodes");
 require("./Toolbar.css");
 var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
 var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
 var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
 var _useCurrentSelection = require("../../hooks/useCurrentSelection");
-var _getSelectedNode = require("../../utils/getSelectedNode");
 var _hooks = require("../../hooks");
 var _isChildOfFloatingToolbar = require("../../utils/isChildOfFloatingToolbar");
 var FloatingToolbar = function FloatingToolbar(_ref) {
@@ -129,15 +127,6 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
     }, action.element);
   })));
 };
-
-/**
- * TODO: this logic should live in Node classes. A toolbar should not decide when to show itself.
- */
-function isLinkNode(selection) {
-  var node = (0, _getSelectedNode.getSelectedNode)(selection);
-  var parent = node.getParent();
-  return (0, _lexicalNodes.$isLinkNode)(parent) || (0, _lexicalNodes.$isLinkNode)(node);
-}
 var Toolbar = exports.Toolbar = function Toolbar(_ref3) {
   var _ref3$anchorElem = _ref3.anchorElem,
     anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem;
@@ -148,7 +137,7 @@ var Toolbar = exports.Toolbar = function Toolbar(_ref3) {
     if (!rangeSelection) {
       return false;
     }
-    return !isLinkNode(rangeSelection) && !rangeSelection.isCollapsed();
+    return !rangeSelection.isCollapsed();
   });
   if (!showToolbar) {
     return null;

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_lexicalNodes","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_getSelectedNode","_hooks","_isChildOfFloatingToolbar","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","isLinkNode","node","getSelectedNode","parent","getParent","$isLinkNode","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    RangeSelection,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isLinkNode } from \"@webiny/lexical-nodes\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n    const [isVisible, setIsVisible] = useState(true);\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    const mouseMoveListener = useCallback(\n        (e: MouseEvent) => {\n            /* Indicates which mouse button(s) was pressed.\n             / 1 = mouse left button\n             / 3 = mouse left and right button in the same time\n             / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n             */\n            if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n                if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n                    const x = e.clientX;\n                    const y = e.clientY;\n                    const elementUnderMouse = document.elementFromPoint(x, y);\n\n                    if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n                        // Mouse is not over the target element => not a normal click, but probably a drag\n                        popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n                    }\n                }\n            }\n        },\n        [popupCharStylesEditorRef]\n    );\n\n    const mouseUpListener = useCallback(() => {\n        if (popupCharStylesEditorRef?.current) {\n            if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n                popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n            }\n        }\n    }, [popupCharStylesEditorRef]);\n\n    useEffect(() => {\n        if (popupCharStylesEditorRef?.current) {\n            document.addEventListener(\"mousemove\", mouseMoveListener);\n            document.addEventListener(\"mouseup\", mouseUpListener);\n\n            return () => {\n                document.removeEventListener(\"mousemove\", mouseMoveListener);\n                document.removeEventListener(\"mouseup\", mouseUpListener);\n            };\n        }\n        return;\n    }, [popupCharStylesEditorRef]);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    setIsVisible(true);\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n                        setIsVisible(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\n/**\n * TODO: this logic should live in Node classes. A toolbar should not decide when to show itself.\n */\nfunction isLinkNode(selection: RangeSelection) {\n    const node = getSelectedNode(selection);\n    const parent = node.getParent();\n\n    return $isLinkNode(parent) || $isLinkNode(node);\n}\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const { editor } = useRichTextEditor();\n    const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n\n        return !isLinkNode(rangeSelection) && !rangeSelection.isCollapsed();\n    });\n\n    if (!showToolbar) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_hooks","_isChildOfFloatingToolbar","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n    const [isVisible, setIsVisible] = useState(true);\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    const mouseMoveListener = useCallback(\n        (e: MouseEvent) => {\n            /* Indicates which mouse button(s) was pressed.\n             / 1 = mouse left button\n             / 3 = mouse left and right button in the same time\n             / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n             */\n            if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n                if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n                    const x = e.clientX;\n                    const y = e.clientY;\n                    const elementUnderMouse = document.elementFromPoint(x, y);\n\n                    if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n                        // Mouse is not over the target element => not a normal click, but probably a drag\n                        popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n                    }\n                }\n            }\n        },\n        [popupCharStylesEditorRef]\n    );\n\n    const mouseUpListener = useCallback(() => {\n        if (popupCharStylesEditorRef?.current) {\n            if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n                popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n            }\n        }\n    }, [popupCharStylesEditorRef]);\n\n    useEffect(() => {\n        if (popupCharStylesEditorRef?.current) {\n            document.addEventListener(\"mousemove\", mouseMoveListener);\n            document.addEventListener(\"mouseup\", mouseUpListener);\n\n            return () => {\n                document.removeEventListener(\"mousemove\", mouseMoveListener);\n                document.removeEventListener(\"mouseup\", mouseUpListener);\n            };\n        }\n        return;\n    }, [popupCharStylesEditorRef]);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    setIsVisible(true);\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n                        setIsVisible(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const { editor } = useRichTextEditor();\n    const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n\n        return !rangeSelection.isCollapsed();\n    });\n\n    if (!showToolbar) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}

package/components/ToolbarActions/FontColorAction.js

@@ -42,8 +42,7 @@ var FontColorAction = exports.FontColorAction = function FontColorAction() {
   });
   var onFontColorSelect = (0, _react.useCallback)(function (colorValue, themeColorName) {
     editor.dispatchCommand(_lexicalNodes.ADD_FONT_COLOR_COMMAND, {
-      color: colorValue,
-      themeColorName: themeColorName
+      color: new _lexicalNodes.ThemeColorValue(colorValue, themeColorName)
     });
   }, []);
   var context = (0, _react.useMemo)(function () {

package/components/ToolbarActions/FontColorAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","_hooks","FontColorPicker","exports","makeDecoratable","useEffect","console","log","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useRichTextEditor","useRichTextEditor","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: colorValue,\n                themeColorName\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,iCAAe,EAAC,iBAAiB,EAAE,YAA0B;EACxF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC7E,CAAC;AAMM,IAAMO,eAAgC,GAAAd,OAAA,CAAAc,eAAA,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAMC,SAAS,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC3D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,IAAMC,IAAI,GAAG,IAAAC,gCAAe,EAACF,cAAc,CAAC;IAC5C,OAAO,IAAAG,8BAAgB,EAACF,IAAI,CAAC,GAAGA,IAAI,CAACG,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,UAAkB,EAAEC,cAAkC,EAAK;IACxDb,MAAM,CAACc,eAAe,CAAmCC,oCAAsB,EAAE;MAC7EN,KAAK,EAAEG,UAAU;MACjBC,cAAc,EAAdA;IACJ,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHC,KAAK,EAAEjB,SAAS;MAChBkB,UAAU,EAAET;IAChB,CAAC;EAAA,CAAC,EACF,CAACA,iBAAiB,EAAET,SAAS,CACjC,CAAC;EAED,oBACI5B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,uBAAA,CAAA2C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C3C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDe,eAAe,CAACyB,WAAW,GAAGlC,qBAAqB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","_hooks","FontColorPicker","exports","makeDecoratable","useEffect","console","log","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useRichTextEditor","useRichTextEditor","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","ThemeColorValue","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport {\n    $isFontColorNode,\n    ADD_FONT_COLOR_COMMAND,\n    FontColorPayload,\n    ThemeColorValue\n} from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: new ThemeColorValue(colorValue, themeColorName)\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAMA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,iCAAe,EAAC,iBAAiB,EAAE,YAA0B;EACxF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC7E,CAAC;AAMM,IAAMO,eAAgC,GAAAd,OAAA,CAAAc,eAAA,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAMC,SAAS,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC3D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,IAAMC,IAAI,GAAG,IAAAC,gCAAe,EAACF,cAAc,CAAC;IAC5C,OAAO,IAAAG,8BAAgB,EAACF,IAAI,CAAC,GAAGA,IAAI,CAACG,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,UAAkB,EAAEC,cAAkC,EAAK;IACxDb,MAAM,CAACc,eAAe,CAAmCC,oCAAsB,EAAE;MAC7EN,KAAK,EAAE,IAAIO,6BAAe,CAACJ,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,IAAMI,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHC,KAAK,EAAElB,SAAS;MAChBmB,UAAU,EAAEV;IAChB,CAAC;EAAA,CAAC,EACF,CAACA,iBAAiB,EAAET,SAAS,CACjC,CAAC;EAED,oBACI5B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,uBAAA,CAAA4C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C5C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDe,eAAe,CAAC0B,WAAW,GAAGnC,qBAAqB","ignoreList":[]}

package/components/ToolbarActions/TypographyAction.js

@@ -106,7 +106,7 @@ var TypographyAction = exports.TypographyAction = function TypographyAction() {
     }
 
     // list and quote element
-    if (themeEmotionMap && element?.getStyleId) {
+    if (themeEmotionMap && ((0, _lexicalNodes.$isListNode)(element) || (0, _lexicalNodes.$isQuoteNode)(element))) {
       var themeStyleId = element?.getStyleId() || undefined;
       if (themeStyleId) {
         var elementStyle = themeEmotionMap[themeStyleId];

package/components/ToolbarActions/TypographyAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_TypographyActionContext","_lexicalNodes","_useRichTextEditor2","_commands","_useCurrentElement2","BaseTypographyActionDropDown","exports","makeDecoratable","useEffect","console","log","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_useState","useState","_useState2","_slicedToArray2","typography","setTypography","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","_useCurrentElement","useCurrentElement","isTypographySelected","$isTypographyNode","isParagraphSelected","$isParagraphNode","isHeadingSelected","$isHeadingNode","isQuoteSelected","$isQuoteNode","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_COMMAND","INSERT_ORDERED_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","getStyleId","undefined","elementStyle","TypographyActionContext","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isTypographyNode,\n    ADD_TYPOGRAPHY_COMMAND,\n    TypographyNode,\n    TypographyPayload\n} from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    INSERT_QUOTE_COMMAND,\n    ListCommandPayload,\n    QuoteCommandPayload\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\n/*\n * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.\n * Note: Toa add custom component access trough @see LexicalEditorConfig API\n * */\nexport const BaseTypographyActionDropDown = makeDecoratable(\n    \"BaseTypographyActionDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTypographyActionDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TypographyActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TypographyActionDropDown = ({ element }: TypographyActionDropdownProps): JSX.Element => {\n    return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport type TypographyAction = React.ComponentType<unknown> & {\n    TypographyDropDown: typeof TypographyActionDropDown;\n};\n\nexport const TypographyAction: TypographyAction = () => {\n    const [typography, setTypography] = useState<TypographyValue>();\n    const { editor, themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isTypographySelected = $isTypographyNode(element);\n    const isParagraphSelected = $isParagraphNode(element);\n    const isHeadingSelected = $isHeadingNode(element);\n    const isQuoteSelected = $isQuoteNode(element);\n\n    const setTypographySelect = useCallback(\n        (value: TypographyValue) => {\n            setTypography(value);\n        },\n        [typography]\n    );\n\n    const onTypographySelect = useCallback((value: TypographyValue) => {\n        setTypographySelect(value);\n        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n                value\n            });\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_ORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_UNORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n                themeStyleId: value.id\n            });\n        }\n    }, []);\n\n    useEffect(() => {\n        if (!element) {\n            return;\n        }\n        // header and paragraph elements inserted with typography node\n        if (isTypographySelected) {\n            const el = element as TypographyNode;\n            setTypography(el.getTypographyValue());\n            return;\n        }\n\n        if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n            const styleId = element.getTypographyStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            if (!themeEmotionMap) {\n                return;\n            }\n\n            const style = themeEmotionMap[styleId];\n            if (style) {\n                setTypography({\n                    name: style?.name,\n                    id: style.id,\n                    css: style.styles,\n                    tag: style.tag\n                });\n            }\n            return;\n        }\n\n        // list and quote element\n        if (themeEmotionMap && element?.getStyleId) {\n            const themeStyleId = element?.getStyleId() || undefined;\n            if (themeStyleId) {\n                const elementStyle = themeEmotionMap[themeStyleId];\n                if (elementStyle) {\n                    setTypography({\n                        id: elementStyle.id,\n                        css: elementStyle.styles,\n                        name: elementStyle.name,\n                        tag: elementStyle.tag\n                    });\n                }\n            }\n        }\n    }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\n\n    return (\n        <TypographyActionContext.Provider\n            value={{\n                value: typography,\n                applyTypography: onTypographySelect\n            }}\n        >\n            <BaseTypographyActionDropDown />\n        </TypographyActionContext.Provider>\n    );\n};\n\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_TypographyActionContext","_lexicalNodes","_useRichTextEditor2","_commands","_useCurrentElement2","BaseTypographyActionDropDown","exports","makeDecoratable","useEffect","console","log","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_useState","useState","_useState2","_slicedToArray2","typography","setTypography","_useRichTextEditor","useRichTextEditor","editor","themeEmotionMap","_useCurrentElement","useCurrentElement","isTypographySelected","$isTypographyNode","isParagraphSelected","$isParagraphNode","isHeadingSelected","$isHeadingNode","isQuoteSelected","$isQuoteNode","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_COMMAND","INSERT_ORDERED_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","$isListNode","getStyleId","undefined","elementStyle","TypographyActionContext","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport {\n    $isHeadingNode,\n    $isListNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isTypographyNode,\n    ADD_TYPOGRAPHY_COMMAND,\n    TypographyNode,\n    TypographyPayload\n} from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    INSERT_QUOTE_COMMAND,\n    ListCommandPayload,\n    QuoteCommandPayload\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\n/*\n * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.\n * Note: Toa add custom component access trough @see LexicalEditorConfig API\n * */\nexport const BaseTypographyActionDropDown = makeDecoratable(\n    \"BaseTypographyActionDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTypographyActionDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TypographyActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TypographyActionDropDown = ({ element }: TypographyActionDropdownProps): JSX.Element => {\n    return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport type TypographyAction = React.ComponentType<unknown> & {\n    TypographyDropDown: typeof TypographyActionDropDown;\n};\n\nexport const TypographyAction: TypographyAction = () => {\n    const [typography, setTypography] = useState<TypographyValue>();\n    const { editor, themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isTypographySelected = $isTypographyNode(element);\n    const isParagraphSelected = $isParagraphNode(element);\n    const isHeadingSelected = $isHeadingNode(element);\n    const isQuoteSelected = $isQuoteNode(element);\n\n    const setTypographySelect = useCallback(\n        (value: TypographyValue) => {\n            setTypography(value);\n        },\n        [typography]\n    );\n\n    const onTypographySelect = useCallback((value: TypographyValue) => {\n        setTypographySelect(value);\n        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n                value\n            });\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_ORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_UNORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n                themeStyleId: value.id\n            });\n        }\n    }, []);\n\n    useEffect(() => {\n        if (!element) {\n            return;\n        }\n        // header and paragraph elements inserted with typography node\n        if (isTypographySelected) {\n            const el = element as TypographyNode;\n            setTypography(el.getTypographyValue());\n            return;\n        }\n\n        if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n            const styleId = element.getTypographyStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            if (!themeEmotionMap) {\n                return;\n            }\n\n            const style = themeEmotionMap[styleId];\n            if (style) {\n                setTypography({\n                    name: style?.name,\n                    id: style.id,\n                    css: style.styles,\n                    tag: style.tag\n                });\n            }\n            return;\n        }\n\n        // list and quote element\n        if (themeEmotionMap && ($isListNode(element) || $isQuoteNode(element))) {\n            const themeStyleId = element?.getStyleId() || undefined;\n            if (themeStyleId) {\n                const elementStyle = themeEmotionMap[themeStyleId];\n                if (elementStyle) {\n                    setTypography({\n                        id: elementStyle.id,\n                        css: elementStyle.styles,\n                        name: elementStyle.name,\n                        tag: elementStyle.tag\n                    });\n                }\n            }\n        }\n    }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\n\n    return (\n        <TypographyActionContext.Provider\n            value={{\n                value: typography,\n                applyTypography: onTypographySelect\n            }}\n        >\n            <BaseTypographyActionDropDown />\n        </TypographyActionContext.Provider>\n    );\n};\n\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,wBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAUA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAOA,IAAAM,mBAAA,GAAAN,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMO,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,iCAAe,EACvD,8BAA8B,EAC9B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,qEAAqE,CAAC;EACtF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAAC,IAAA,EAAgE;EAAA,IAA1DC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACvC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,4BAA6B;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC1F,CAAC;AAMM,IAAMO,gBAAkC,GAAAd,OAAA,CAAAc,gBAAA,GAAG,SAArCA,gBAAkCA,CAAA,EAAS;EACpD,IAAAC,SAAA,GAAoC,IAAAC,eAAQ,EAAkB,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,SAAA;IAAxDI,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAChC,IAAAI,kBAAA,GAAoC,IAAAC,qCAAiB,EAAC,CAAC;IAA/CC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,eAAe,GAAAH,kBAAA,CAAfG,eAAe;EAC/B,IAAAC,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BnB,OAAO,GAAAkB,kBAAA,CAAPlB,OAAO;EACf,IAAMoB,oBAAoB,GAAG,IAAAC,+BAAiB,EAACrB,OAAO,CAAC;EACvD,IAAMsB,mBAAmB,GAAG,IAAAC,8BAAgB,EAACvB,OAAO,CAAC;EACrD,IAAMwB,iBAAiB,GAAG,IAAAC,4BAAc,EAACzB,OAAO,CAAC;EACjD,IAAM0B,eAAe,GAAG,IAAAC,0BAAY,EAAC3B,OAAO,CAAC;EAE7C,IAAM4B,mBAAmB,GAAG,IAAAC,kBAAW,EACnC,UAACC,KAAsB,EAAK;IACxBjB,aAAa,CAACiB,KAAK,CAAC;EACxB,CAAC,EACD,CAAClB,UAAU,CACf,CAAC;EAED,IAAMmB,kBAAkB,GAAG,IAAAF,kBAAW,EAAC,UAACC,KAAsB,EAAK;IAC/DF,mBAAmB,CAACE,KAAK,CAAC;IAC1B,IAAIA,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,IAAIH,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MACpDjB,MAAM,CAACkB,eAAe,CAAoCC,oCAAsB,EAAE;QAC9EL,KAAK,EAALA;MACJ,CAAC,CAAC;IACN;IAEA,IAAIA,KAAK,CAACE,GAAG,KAAK,IAAI,EAAE;MACpBhB,MAAM,CAACkB,eAAe,CAClBE,qCAA2B,EAC3B;QACIC,YAAY,EAAEP,KAAK,CAACQ;MACxB,CACJ,CAAC;IACL;IAEA,IAAIR,KAAK,CAACE,GAAG,KAAK,IAAI,EAAE;MACpBhB,MAAM,CAACkB,eAAe,CAClBK,uCAA6B,EAC7B;QACIF,YAAY,EAAEP,KAAK,CAACQ;MACxB,CACJ,CAAC;IACL;IAEA,IAAIR,KAAK,CAACE,GAAG,KAAK,YAAY,EAAE;MAC5BhB,MAAM,CAACkB,eAAe,CAAsCM,8BAAoB,EAAE;QAC9EH,YAAY,EAAEP,KAAK,CAACQ;MACxB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA3C,gBAAS,EAAC,YAAM;IACZ,IAAI,CAACK,OAAO,EAAE;MACV;IACJ;IACA;IACA,IAAIoB,oBAAoB,EAAE;MACtB,IAAMqB,EAAE,GAAGzC,OAAyB;MACpCa,aAAa,CAAC4B,EAAE,CAACC,kBAAkB,CAAC,CAAC,CAAC;MACtC;IACJ;IAEA,IAAIpB,mBAAmB,IAAIE,iBAAiB,IAAIE,eAAe,EAAE;MAC7D,IAAMiB,OAAO,GAAG3C,OAAO,CAAC4C,oBAAoB,CAAC,CAAC;MAC9C,IAAI,CAACD,OAAO,EAAE;QACV;MACJ;MAEA,IAAI,CAAC1B,eAAe,EAAE;QAClB;MACJ;MAEA,IAAM4B,KAAK,GAAG5B,eAAe,CAAC0B,OAAO,CAAC;MACtC,IAAIE,KAAK,EAAE;QACPhC,aAAa,CAAC;UACViC,IAAI,EAAED,KAAK,EAAEC,IAAI;UACjBR,EAAE,EAAEO,KAAK,CAACP,EAAE;UACZS,GAAG,EAAEF,KAAK,CAACG,MAAM;UACjBhB,GAAG,EAAEa,KAAK,CAACb;QACf,CAAC,CAAC;MACN;MACA;IACJ;;IAEA;IACA,IAAIf,eAAe,KAAK,IAAAgC,yBAAW,EAACjD,OAAO,CAAC,IAAI,IAAA2B,0BAAY,EAAC3B,OAAO,CAAC,CAAC,EAAE;MACpE,IAAMqC,YAAY,GAAGrC,OAAO,EAAEkD,UAAU,CAAC,CAAC,IAAIC,SAAS;MACvD,IAAId,YAAY,EAAE;QACd,IAAMe,YAAY,GAAGnC,eAAe,CAACoB,YAAY,CAAC;QAClD,IAAIe,YAAY,EAAE;UACdvC,aAAa,CAAC;YACVyB,EAAE,EAAEc,YAAY,CAACd,EAAE;YACnBS,GAAG,EAAEK,YAAY,CAACJ,MAAM;YACxBF,IAAI,EAAEM,YAAY,CAACN,IAAI;YACvBd,GAAG,EAAEoB,YAAY,CAACpB;UACtB,CAAC,CAAC;QACN;MACJ;IACJ;EACJ,CAAC,EAAE,CAAChC,OAAO,EAAEoB,oBAAoB,EAAEM,eAAe,EAAEJ,mBAAmB,EAAEE,iBAAiB,CAAC,CAAC;EAE5F,oBACIzC,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,wBAAA,CAAAkE,uBAAuB,CAACC,QAAQ;IAC7BxB,KAAK,EAAE;MACHA,KAAK,EAAElB,UAAU;MACjB2C,eAAe,EAAExB;IACrB;EAAE,gBAEFhD,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,4BAA4B,MAAE,CACD,CAAC;AAE3C,CAAC;AAEDe,gBAAgB,CAACiD,kBAAkB,GAAG1D,wBAAwB","ignoreList":[]}

package/hooks/useCurrentElement.d.ts

@@ -2,6 +2,6 @@ import { RangeSelection } from "lexical";
 export declare function useCurrentElement(): {
     element: null;
 } | {
-    element: import("lexical").LexicalNode;
+    element: import("lexical").TextNode | import("lexical").ElementNode | import("lexical").LexicalNode;
 };
-export declare function getNodeFromSelection(selection: RangeSelection): import("lexical").LexicalNode;
+export declare function getNodeFromSelection(selection: RangeSelection): import("lexical").TextNode | import("lexical").ElementNode | import("lexical").LexicalNode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/lexical-editor",
-	"version": "5.40.0",
+	"version": "5.40.1-beta.1",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -8,25 +8,25 @@
 	"license": "MIT",
 	"dependencies": {
 		"@emotion/react": "11.10.8",
-		"@lexical/code": "0.12.2",
-		"@lexical/history": "0.12.2",
-		"@lexical/react": "0.12.2",
-		"@lexical/rich-text": "0.12.2",
-		"@lexical/selection": "0.12.2",
-		"@lexical/utils": "0.12.2",
-		"@webiny/lexical-nodes": "5.40.0",
-		"@webiny/lexical-theme": "5.40.0",
-		"@webiny/react-composition": "5.40.0",
-		"@webiny/react-properties": "5.40.0",
+		"@lexical/code": "0.16.0",
+		"@lexical/history": "0.16.0",
+		"@lexical/react": "0.16.0",
+		"@lexical/rich-text": "0.16.0",
+		"@lexical/selection": "0.16.0",
+		"@lexical/utils": "0.16.0",
+		"@webiny/lexical-nodes": "5.40.1-beta.1",
+		"@webiny/lexical-theme": "5.40.1-beta.1",
+		"@webiny/react-composition": "5.40.1-beta.1",
+		"@webiny/react-properties": "5.40.1-beta.1",
 		"emotion": "10.0.27",
-		"lexical": "0.12.2",
+		"lexical": "0.16.0",
 		"lodash": "4.17.21",
 		"react": "18.2.0",
 		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
-		"@webiny/cli": "5.40.0",
-		"@webiny/project-utils": "5.40.0"
+		"@webiny/cli": "5.40.1-beta.1",
+		"@webiny/project-utils": "5.40.1-beta.1"
 	},
 	"publishConfig": {
 		"access": "public",
@@ -36,5 +36,5 @@
 		"build": "yarn webiny run build",
 		"watch": "yarn webiny run watch"
 	},
-	"gitHead": "e6ce53a387a9b1ab39aa8d15e4ed9be2359f17aa"
+	"gitHead": "f30c8c482d2a8836651c4e0ee446e13fa490264d"
 }

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_lexical","_lexicalNodes","_getSelectedNode","_setFloatingElemPosition","_useFloatingLinkEditor","_LinkEditForm","_LinkPreviewForm","_sanitizeUrl","_isChildOfLinkEditor","FloatingLinkEditor","_ref","editor","isVisible","anchorElem","editorRef","useRef","_useState","useState","url","target","alt","_useState2","_slicedToArray2","default","linkData","setLinkData","_useState3","_useState4","isEditMode","setEditMode","_useState5","_useState6","lastSelection","setLastSelection","updateLinkEditor","useCallback","selection","$getSelection","emptyLinkData","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","getURL","getTarget","getAlt","editorElem","current","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","domRange","getRangeAt","rect","inner","firstElementChild","getBoundingClientRect","setFloatingElemPosition","className","removeLink","dispatchCommand","TOGGLE_LINK_COMMAND","applyChanges","confirmedLinkData","sanitizeUrl","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfLinkEditor","relatedTarget","createElement","ref","style","display","LinkEditForm","onSave","onCancel","LinkPreviewForm","onEdit","FloatingLinkEditorPlugin","_ref3","_ref3$anchorElem","body","useFloatingLinkEditor"],"sources":["FloatingLinkEditorPlugin.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    GridSelection,\n    LexicalEditor,\n    NodeSelection,\n    RangeSelection,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useFloatingLinkEditor } from \"./useFloatingLinkEditor\";\nimport { LinkEditForm } from \"./LinkEditForm\";\nimport { LinkPreviewForm } from \"./LinkPreviewForm\";\nimport \"./FloatingLinkEditorPlugin.css\";\nimport { sanitizeUrl } from \"~/utils/sanitizeUrl\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\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}\n\nexport function FloatingLinkEditor({ editor, isVisible, anchorElem }: 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<\n        RangeSelection | GridSelection | NodeSelection | null\n    >(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\nexport function FloatingLinkEditorPlugin({\n    anchorElem = document.body\n}: {\n    anchorElem?: HTMLElement;\n}): JSX.Element | null {\n    return useFloatingLinkEditor(anchorElem);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_lexical","_lexicalNodes","_getSelectedNode","_setFloatingElemPosition","_useFloatingLinkEditor","_LinkEditForm","_LinkPreviewForm","_sanitizeUrl","_isChildOfLinkEditor","FloatingLinkEditor","_ref","editor","isVisible","anchorElem","editorRef","useRef","_useState","useState","url","target","alt","_useState2","_slicedToArray2","default","linkData","setLinkData","_useState3","_useState4","isEditMode","setEditMode","_useState5","_useState6","lastSelection","setLastSelection","updateLinkEditor","useCallback","selection","$getSelection","emptyLinkData","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","getURL","getTarget","getAlt","editorElem","current","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","domRange","getRangeAt","rect","inner","firstElementChild","getBoundingClientRect","setFloatingElemPosition","className","removeLink","dispatchCommand","TOGGLE_LINK_COMMAND","applyChanges","confirmedLinkData","sanitizeUrl","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfLinkEditor","relatedTarget","createElement","ref","style","display","LinkEditForm","onSave","onCancel","LinkPreviewForm","onEdit","FloatingLinkEditorPlugin","_ref3","_ref3$anchorElem","body","useFloatingLinkEditor"],"sources":["FloatingLinkEditorPlugin.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BaseSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useFloatingLinkEditor } from \"./useFloatingLinkEditor\";\nimport { LinkEditForm } from \"./LinkEditForm\";\nimport { LinkPreviewForm } from \"./LinkPreviewForm\";\nimport \"./FloatingLinkEditorPlugin.css\";\nimport { sanitizeUrl } from \"~/utils/sanitizeUrl\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\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}\n\nexport function FloatingLinkEditor({ editor, isVisible, anchorElem }: 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\nexport function FloatingLinkEditorPlugin({\n    anchorElem = document.body\n}: {\n    anchorElem?: HTMLElement;\n}): JSX.Element | null {\n    return useFloatingLinkEditor(anchorElem);\n}\n"],"mappings":"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","ignoreList":[]}

package/plugins/FontColorPlugin/FontColorPlugin.js

@@ -5,26 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FontColorPlugin = void 0;
 var _react = require("react");
-var _lexicalNodes = require("@webiny/lexical-nodes");
 var _lexical = require("lexical");
-var _utils = require("@lexical/utils");
+var _lexicalNodes = require("@webiny/lexical-nodes");
 var _hooks = require("../../hooks");
+var _applyColorToSelection = require("./applyColorToSelection");
 var FontColorPlugin = exports.FontColorPlugin = function FontColorPlugin() {
   var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
     editor = _useRichTextEditor.editor;
   (0, _react.useEffect)(function () {
     return editor.registerCommand(_lexicalNodes.ADD_FONT_COLOR_COMMAND, function (payload) {
       editor.update(function () {
-        var color = payload.color,
-          themeColorName = payload.themeColorName;
+        var color = payload.color;
         var selection = (0, _lexical.$getSelection)();
         if ((0, _lexical.$isRangeSelection)(selection)) {
-          var fontColorNode = (0, _lexicalNodes.$createFontColorNode)(selection.getTextContent(), color, themeColorName);
-          (0, _lexicalNodes.$applyStylesToNode)(fontColorNode, selection);
-          (0, _lexical.$insertNodes)([fontColorNode]);
-          if ((0, _lexical.$isRootOrShadowRoot)(fontColorNode.getParentOrThrow())) {
-            (0, _utils.$wrapNodeInElement)(fontColorNode, _lexicalNodes.$createParagraphNode).selectEnd();
-          }
+          (0, _applyColorToSelection.applyColorToSelection)(selection, color);
         }
       });
       return true;

package/plugins/FontColorPlugin/FontColorPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_lexicalNodes","_lexical","_utils","_hooks","FontColorPlugin","exports","_useRichTextEditor","useRichTextEditor","editor","useEffect","registerCommand","ADD_FONT_COLOR_COMMAND","payload","update","color","themeColorName","selection","$getSelection","$isRangeSelection","fontColorNode","$createFontColorNode","getTextContent","$applyStylesToNode","$insertNodes","$isRootOrShadowRoot","getParentOrThrow","$wrapNodeInElement","$createParagraphNode","selectEnd","COMMAND_PRIORITY_EDITOR"],"sources":["FontColorPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport {\n    $applyStylesToNode,\n    $createFontColorNode,\n    ADD_FONT_COLOR_COMMAND,\n    FontColorPayload,\n    $createParagraphNode\n} from \"@webiny/lexical-nodes\";\nimport {\n    $getSelection,\n    $insertNodes,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    COMMAND_PRIORITY_EDITOR\n} from \"lexical\";\nimport { $wrapNodeInElement } from \"@lexical/utils\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPlugin = () => {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        return editor.registerCommand<FontColorPayload>(\n            ADD_FONT_COLOR_COMMAND,\n            payload => {\n                editor.update(() => {\n                    const { color, themeColorName } = payload;\n                    const selection = $getSelection();\n\n                    if ($isRangeSelection(selection)) {\n                        const fontColorNode = $createFontColorNode(\n                            selection.getTextContent(),\n                            color,\n                            themeColorName\n                        );\n                        $applyStylesToNode(fontColorNode, selection);\n                        $insertNodes([fontColorNode]);\n                        if ($isRootOrShadowRoot(fontColorNode.getParentOrThrow())) {\n                            $wrapNodeInElement(fontColorNode, $createParagraphNode).selectEnd();\n                        }\n                    }\n                });\n                return true;\n            },\n            COMMAND_PRIORITY_EDITOR\n        );\n    }, [editor]);\n\n    return null;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAOA,IAAAE,QAAA,GAAAF,OAAA;AAOA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEO,IAAMK,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACjC,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EAEd,IAAAC,gBAAS,EAAC,YAAM;IACZ,OAAOD,MAAM,CAACE,eAAe,CACzBC,oCAAsB,EACtB,UAAAC,OAAO,EAAI;MACPJ,MAAM,CAACK,MAAM,CAAC,YAAM;QAChB,IAAQC,KAAK,GAAqBF,OAAO,CAAjCE,KAAK;UAAEC,cAAc,GAAKH,OAAO,CAA1BG,cAAc;QAC7B,IAAMC,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;QAEjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;UAC9B,IAAMG,aAAa,GAAG,IAAAC,kCAAoB,EACtCJ,SAAS,CAACK,cAAc,CAAC,CAAC,EAC1BP,KAAK,EACLC,cACJ,CAAC;UACD,IAAAO,gCAAkB,EAACH,aAAa,EAAEH,SAAS,CAAC;UAC5C,IAAAO,qBAAY,EAAC,CAACJ,aAAa,CAAC,CAAC;UAC7B,IAAI,IAAAK,4BAAmB,EAACL,aAAa,CAACM,gBAAgB,CAAC,CAAC,CAAC,EAAE;YACvD,IAAAC,yBAAkB,EAACP,aAAa,EAAEQ,kCAAoB,CAAC,CAACC,SAAS,CAAC,CAAC;UACvE;QACJ;MACJ,CAAC,CAAC;MACF,OAAO,IAAI;IACf,CAAC,EACDC,gCACJ,CAAC;EACL,CAAC,EAAE,CAACrB,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","require","_lexical","_lexicalNodes","_hooks","_applyColorToSelection","FontColorPlugin","exports","_useRichTextEditor","useRichTextEditor","editor","useEffect","registerCommand","ADD_FONT_COLOR_COMMAND","payload","update","color","selection","$getSelection","$isRangeSelection","applyColorToSelection","COMMAND_PRIORITY_EDITOR"],"sources":["FontColorPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from \"lexical\";\nimport { ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { applyColorToSelection } from \"./applyColorToSelection\";\n\nexport const FontColorPlugin = () => {\n    const { editor } = useRichTextEditor();\n\n    useEffect(() => {\n        return editor.registerCommand<FontColorPayload>(\n            ADD_FONT_COLOR_COMMAND,\n            payload => {\n                editor.update(() => {\n                    const { color } = payload;\n                    const selection = $getSelection();\n\n                    if ($isRangeSelection(selection)) {\n                        applyColorToSelection(selection, color);\n                    }\n                });\n                return true;\n            },\n            COMMAND_PRIORITY_EDITOR\n        );\n    }, [editor]);\n\n    return null;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAJ,OAAA;AAEO,IAAMK,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACjC,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EAEd,IAAAC,gBAAS,EAAC,YAAM;IACZ,OAAOD,MAAM,CAACE,eAAe,CACzBC,oCAAsB,EACtB,UAAAC,OAAO,EAAI;MACPJ,MAAM,CAACK,MAAM,CAAC,YAAM;QAChB,IAAQC,KAAK,GAAKF,OAAO,CAAjBE,KAAK;QACb,IAAMC,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;QAEjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;UAC9B,IAAAG,4CAAqB,EAACH,SAAS,EAAED,KAAK,CAAC;QAC3C;MACJ,CAAC,CAAC;MACF,OAAO,IAAI;IACf,CAAC,EACDK,gCACJ,CAAC;EACL,CAAC,EAAE,CAACX,MAAM,CAAC,CAAC;EAEZ,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/plugins/FontColorPlugin/applyColorToNode.d.ts

@@ -0,0 +1,3 @@
+import { TextNode } from "lexical";
+import { ThemeColorValue } from "@webiny/lexical-nodes";
+export declare function applyColorToNode(textNode: TextNode, color: ThemeColorValue): import("@webiny/lexical-nodes").FontColorNode;

package/plugins/FontColorPlugin/applyColorToNode.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyColorToNode = applyColorToNode;
+var _lexicalNodes = require("@webiny/lexical-nodes");
+function applyColorToNode(textNode, color) {
+  var fontColorNode = (0, _lexicalNodes.$createFontColorNode)(textNode.getTextContent(), color);
+  (0, _lexicalNodes.$applyStylesToNode)(fontColorNode, textNode);
+  return textNode.replace(fontColorNode);
+}
+
+//# sourceMappingURL=applyColorToNode.js.map

package/plugins/FontColorPlugin/applyColorToNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_lexicalNodes","require","applyColorToNode","textNode","color","fontColorNode","$createFontColorNode","getTextContent","$applyStylesToNode","replace"],"sources":["applyColorToNode.ts"],"sourcesContent":["import { TextNode } from \"lexical\";\nimport { $applyStylesToNode, $createFontColorNode, ThemeColorValue } from \"@webiny/lexical-nodes\";\n\nexport function applyColorToNode(textNode: TextNode, color: ThemeColorValue) {\n    const fontColorNode = $createFontColorNode(textNode.getTextContent(), color);\n    $applyStylesToNode(fontColorNode, textNode);\n\n    return textNode.replace(fontColorNode);\n}\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AAEO,SAASC,gBAAgBA,CAACC,QAAkB,EAAEC,KAAsB,EAAE;EACzE,IAAMC,aAAa,GAAG,IAAAC,kCAAoB,EAACH,QAAQ,CAACI,cAAc,CAAC,CAAC,EAAEH,KAAK,CAAC;EAC5E,IAAAI,gCAAkB,EAACH,aAAa,EAAEF,QAAQ,CAAC;EAE3C,OAAOA,QAAQ,CAACM,OAAO,CAACJ,aAAa,CAAC;AAC1C","ignoreList":[]}

package/plugins/FontColorPlugin/applyColorToSelection.d.ts

@@ -0,0 +1,3 @@
+import { RangeSelection } from "lexical";
+import { ThemeColorValue } from "@webiny/lexical-nodes";
+export declare function applyColorToSelection(selection: RangeSelection, color: ThemeColorValue): void;

package/plugins/FontColorPlugin/applyColorToSelection.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyColorToSelection = applyColorToSelection;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _lexical = require("lexical");
+var _applyColorToNode = require("./applyColorToNode");
+function applyColorToSelection(selection, color) {
+  // Basic variables
+  var textNodes = selection.getNodes().filter(function (node) {
+    return node instanceof _lexical.TextNode;
+  });
+  var selectedTextNodesLength = textNodes.length;
+  var startEndPoints = selection.getStartEndPoints();
+  if (startEndPoints === null) {
+    return;
+  }
+  var _startEndPoints = (0, _slicedToArray2.default)(startEndPoints, 2),
+    anchor = _startEndPoints[0],
+    focus = _startEndPoints[1];
+  var lastIndex = selectedTextNodesLength - 1;
+  var firstNode = textNodes[0];
+  var lastNode = textNodes[lastIndex];
+  var firstNodeText = firstNode.getTextContent();
+  var firstNodeTextLength = firstNodeText.length;
+  var focusOffset = focus.offset;
+  var anchorOffset = anchor.offset;
+  var isBefore = anchor.isBefore(focus);
+  var startOffset = isBefore ? anchorOffset : focusOffset;
+  var endOffset = isBefore ? focusOffset : anchorOffset;
+
+  // No actual text is selected, so do nothing.
+  if (startOffset === endOffset) {
+    return;
+  }
+
+  // Only one node is selected.
+  if (selectedTextNodesLength === 1) {
+    // The entire node is selected.
+    if (startOffset === 0 && endOffset === firstNodeTextLength) {
+      var _fontColorNode = (0, _applyColorToNode.applyColorToNode)(firstNode, color);
+      _fontColorNode.select(startOffset, endOffset);
+      return;
+    }
+
+    // The node is partially selected, so split it into two nodes and style the selected part.
+    var splitNodes = firstNode.splitText(startOffset, endOffset);
+    var replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1];
+    var fontColorNode = (0, _applyColorToNode.applyColorToNode)(replacement, color);
+    fontColorNode.select(0, endOffset - startOffset);
+    return;
+  }
+
+  // Several nodes are selected.
+  textNodes.forEach(function (textNode) {
+    // First node is partially selected.
+    if (textNode === firstNode && startOffset > 0) {
+      var _textNode$splitText = textNode.splitText(startOffset),
+        _textNode$splitText2 = (0, _slicedToArray2.default)(_textNode$splitText, 2),
+        toColor = _textNode$splitText2[1];
+      (0, _applyColorToNode.applyColorToNode)(toColor, color);
+      return;
+    }
+
+    // Last node is partially selected.
+    if (textNode === lastNode && lastNode.getTextContent().length !== endOffset) {
+      var _textNode$splitText3 = textNode.splitText(endOffset),
+        _textNode$splitText4 = (0, _slicedToArray2.default)(_textNode$splitText3, 1),
+        _toColor = _textNode$splitText4[0];
+      (0, _applyColorToNode.applyColorToNode)(_toColor, color);
+      return;
+    }
+
+    // Colorize the whole node.
+    (0, _applyColorToNode.applyColorToNode)(textNode, color);
+  });
+}
+
+//# sourceMappingURL=applyColorToSelection.js.map

package/plugins/FontColorPlugin/applyColorToSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_lexical","require","_applyColorToNode","applyColorToSelection","selection","color","textNodes","getNodes","filter","node","TextNode","selectedTextNodesLength","length","startEndPoints","getStartEndPoints","_startEndPoints","_slicedToArray2","default","anchor","focus","lastIndex","firstNode","lastNode","firstNodeText","getTextContent","firstNodeTextLength","focusOffset","offset","anchorOffset","isBefore","startOffset","endOffset","fontColorNode","applyColorToNode","select","splitNodes","splitText","replacement","forEach","textNode","_textNode$splitText","_textNode$splitText2","toColor","_textNode$splitText3","_textNode$splitText4"],"sources":["applyColorToSelection.ts"],"sourcesContent":["import { RangeSelection, TextNode } from \"lexical\";\nimport { ThemeColorValue } from \"@webiny/lexical-nodes\";\nimport { applyColorToNode } from \"~/plugins/FontColorPlugin/applyColorToNode\";\n\nexport function applyColorToSelection(selection: RangeSelection, color: ThemeColorValue) {\n    // Basic variables\n    const textNodes = selection.getNodes().filter(node => node instanceof TextNode) as TextNode[];\n\n    const selectedTextNodesLength = textNodes.length;\n    const startEndPoints = selection.getStartEndPoints();\n\n    if (startEndPoints === null) {\n        return;\n    }\n\n    const [anchor, focus] = startEndPoints;\n\n    const lastIndex = selectedTextNodesLength - 1;\n    const firstNode = textNodes[0];\n    const lastNode = textNodes[lastIndex];\n    const firstNodeText = firstNode.getTextContent();\n    const firstNodeTextLength = firstNodeText.length;\n    const focusOffset = focus.offset;\n    const anchorOffset = anchor.offset;\n    const isBefore = anchor.isBefore(focus);\n    const startOffset = isBefore ? anchorOffset : focusOffset;\n    const endOffset = isBefore ? focusOffset : anchorOffset;\n\n    // No actual text is selected, so do nothing.\n    if (startOffset === endOffset) {\n        return;\n    }\n\n    // Only one node is selected.\n    if (selectedTextNodesLength === 1) {\n        // The entire node is selected.\n        if (startOffset === 0 && endOffset === firstNodeTextLength) {\n            const fontColorNode = applyColorToNode(firstNode, color);\n            fontColorNode.select(startOffset, endOffset);\n            return;\n        }\n\n        // The node is partially selected, so split it into two nodes and style the selected part.\n        const splitNodes = firstNode.splitText(startOffset, endOffset);\n        const replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1];\n        const fontColorNode = applyColorToNode(replacement, color);\n        fontColorNode.select(0, endOffset - startOffset);\n\n        return;\n    }\n\n    // Several nodes are selected.\n    textNodes.forEach(textNode => {\n        // First node is partially selected.\n        if (textNode === firstNode && startOffset > 0) {\n            const [, toColor] = textNode.splitText(startOffset);\n            applyColorToNode(toColor, color);\n\n            return;\n        }\n\n        // Last node is partially selected.\n        if (textNode === lastNode && lastNode.getTextContent().length !== endOffset) {\n            const [toColor] = textNode.splitText(endOffset);\n            applyColorToNode(toColor, color);\n            return;\n        }\n\n        // Colorize the whole node.\n        applyColorToNode(textNode, color);\n    });\n}\n"],"mappings":"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","ignoreList":[]}