@webiny/lexical-editor 5.37.8 → 5.38.0-beta.1

package/components/ToolbarActions/FontColorAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","_reactComposition","_FontColorActionContext","_FontColorNode","_getSelectedNode","FontColorPicker","makeComposable","useEffect","console","log","exports","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","_useState","useState","_useState2","fontColor","setFontColor","setFontColorSelect","useCallback","fontColorValue","onFontColorSelect","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","color","updatePopup","getEditorState","read","selection","$getSelection","$isRangeSelection","node","getSelectedNode","$isFontColorNode","colorStyle","getColorStyle","document","addEventListener","removeEventListener","FontColorActionContext","Provider","value","applyColor","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $getSelection, $isRangeSelection, LexicalCommand } from \"lexical\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"~/nodes/FontColorNode\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\n\nexport const FontColorPicker = makeComposable(\"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: React.FC<FontActionColorPicker> = ({ element }): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport interface FontColorAction extends React.FC<unknown> {\n    ColorPicker: typeof FontActionColorPicker;\n}\n\nexport const FontColorAction: FontColorAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [fontColor, setFontColor] = useState<string>(\"#000\");\n\n    const setFontColorSelect = useCallback(\n        (fontColorValue: string) => {\n            setFontColor(fontColorValue);\n        },\n        [fontColor]\n    );\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            setFontColorSelect(colorValue);\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: colorValue,\n                themeColorName\n            });\n        },\n        []\n    );\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            const selection = $getSelection();\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n            const node = getSelectedNode(selection);\n            if ($isFontColorNode(node)) {\n                const colorStyle = node.getColorStyle();\n                setFontColor(colorStyle.color);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    return (\n        <FontColorActionContext.Provider\n            value={{\n                value: fontColor,\n                applyColor: onFontColorSelect\n            }}\n        >\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\n{\n    /* Color picker dropdown settings */\n}\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","FontColorPicker","makeComposable","useEffect","console","log","exports","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","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 { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeComposable } 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\";\n\nexport const FontColorPicker = makeComposable(\"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: React.FC<FontActionColorPicker> = ({ element }): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport interface FontColorAction extends React.FC<unknown> {\n    ColorPicker: typeof FontActionColorPicker;\n}\n\nexport const FontColorAction: FontColorAction = () => {\n    const [editor] = useLexicalComposerContext();\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;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAG,IAAAC,gCAAc,EAAC,iBAAiB,EAAE,YAA0B;EACvF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAACC,OAAA,CAAAL,eAAA,GAAAA,eAAA;AAMH,IAAMM,qBAAsD,GAAG,SAAzDA,qBAAsDA,CAAAC,IAAA,EAAiC;EAAA,IAA3BC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACrE,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,iBAAA,CAAAgB,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,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,qBAAA;IAArCI,MAAM,GAAAF,sBAAA;EACb,IAAMG,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,oBACI9B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACd,uBAAA,CAAA4C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C7C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAACK,OAAA,CAAAU,eAAA,GAAAA,eAAA;AAEFA,eAAe,CAAC2B,WAAW,GAAGpC,qBAAqB"}

package/components/ToolbarActions/FontSizeAction.js

@@ -14,6 +14,7 @@ var _selection = require("@lexical/selection");
 var _utils = require("@lexical/utils");
 var _lexical = require("lexical");
 var _DropDown = require("../../ui/DropDown");
+var _useCurrentSelection = require("../../hooks/useCurrentSelection");
 var FONT_SIZE_OPTIONS = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"];
 function dropDownActiveClass(active) {
   if (active) {
@@ -61,41 +62,24 @@ var FontSizeAction = function FontSizeAction() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isEditable = _useState2[0],
     setIsEditable = _useState2[1];
-  var _useState3 = (0, _react.useState)(editor),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    activeEditor = _useState4[0],
-    setActiveEditor = _useState4[1];
-  var _useState5 = (0, _react.useState)("15px"),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    fontSize = _useState6[0],
-    setFontSize = _useState6[1];
-  var updateToolbar = (0, _react.useCallback)(function () {
-    var selection = (0, _lexical.$getSelection)();
-    if ((0, _lexical.$isRangeSelection)(selection)) {
-      setFontSize((0, _selection.$getSelectionStyleValueForProperty)(selection, "font-size", "15px"));
+  var fontSize = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref) {
+    var rangeSelection = _ref.rangeSelection;
+    if (!rangeSelection) {
+      return "15px";
     }
-  }, [activeEditor]);
+    return (0, _selection.$getSelectionStyleValueForProperty)(rangeSelection, "font-size", "15px");
+  });
   (0, _react.useEffect)(function () {
     return (0, _utils.mergeRegister)(editor.registerEditableListener(function (editable) {
       setIsEditable(editable);
-    }), activeEditor.registerUpdateListener(function (_ref) {
-      var editorState = _ref.editorState;
-      editorState.read(function () {
-        updateToolbar();
-      });
     }));
-  }, [activeEditor, editor]);
-  (0, _react.useEffect)(function () {
-    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
-      updateToolbar();
-      setActiveEditor(newEditor);
-      return false;
-    }, _lexical.COMMAND_PRIORITY_CRITICAL);
-  }, [editor, updateToolbar]);
+  }, [editor]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FontSizeDropDown, {
     disabled: !isEditable,
     value: fontSize,
     editor: editor
   }));
 };
-exports.FontSizeAction = FontSizeAction;
+exports.FontSizeAction = FontSizeAction;
+
+//# sourceMappingURL=FontSizeAction.js.map

package/components/ToolbarActions/FontSizeAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_selection","_utils","_lexical","_DropDown","FONT_SIZE_OPTIONS","dropDownActiveClass","active","FontSizeDropDown","props","editor","value","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","default","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","map","DropDownItem","className","concat","onClick","key","FontSizeAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","_useState","useState","isEditable","_useState2","setIsEditable","_useState3","_useState4","activeEditor","setActiveEditor","_useState5","_useState6","fontSize","setFontSize","updateToolbar","$getSelectionStyleValueForProperty","useEffect","mergeRegister","registerEditableListener","editable","registerUpdateListener","_ref","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","Fragment","exports"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    COMMAND_PRIORITY_CRITICAL,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { DropDown, DropDownItem } from \"../../ui/DropDown\";\n\nconst FONT_SIZE_OPTIONS: string[] = [\n    \"8px\",\n    \"9px\",\n    \"10px\",\n    \"11px\",\n    \"12px\",\n    \"14px\",\n    \"15px\",\n    \"16px\",\n    \"18px\",\n    \"21px\",\n    \"24px\",\n    \"30px\",\n    \"36px\",\n    \"48px\",\n    \"60px\",\n    \"72px\",\n    \"96px\"\n];\n\nfunction dropDownActiveClass(active: boolean) {\n    if (active) {\n        return \"active dropdown-item-active\";\n    }\n    return \"\";\n}\n\ninterface FontSizeDropDownProps {\n    editor: LexicalEditor;\n    value: string;\n    disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n    const { editor, value, disabled = false } = props;\n\n    const handleClick = useCallback(\n        (option: string) => {\n            editor.update(() => {\n                const selection = $getSelection();\n                if ($isRangeSelection(selection)) {\n                    $patchStyleText(selection, {\n                        [\"font-size\"]: option\n                    });\n                }\n            });\n        },\n        [editor]\n    );\n\n    return (\n        <DropDown\n            disabled={disabled}\n            buttonClassName=\"toolbar-item font-size\"\n            buttonLabel={value}\n            buttonAriaLabel={\"Formatting options for font size\"}\n        >\n            {FONT_SIZE_OPTIONS.map(option => (\n                <DropDownItem\n                    className={`item fontsize-item ${dropDownActiveClass(value === option)}`}\n                    onClick={() => handleClick(option)}\n                    key={option}\n                >\n                    <span className=\"text\">{option}</span>\n                </DropDownItem>\n            ))}\n        </DropDown>\n    );\n}\n\nexport const FontSizeAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n    const [activeEditor, setActiveEditor] = useState(editor);\n    const [fontSize, setFontSize] = useState<string>(\"15px\");\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection)) {\n            setFontSize($getSelectionStyleValueForProperty(selection, \"font-size\", \"15px\"));\n        }\n    }, [activeEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            }),\n            activeEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            })\n        );\n    }, [activeEditor, editor]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n    return (\n        <>\n            <FontSizeDropDown disabled={!isEditable} value={fontSize} editor={editor} />\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","FONT_SIZE_OPTIONS","dropDownActiveClass","active","FontSizeDropDown","props","editor","value","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","default","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","map","DropDownItem","className","concat","onClick","key","FontSizeAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","_useState","useState","isEditable","_useState2","setIsEditable","fontSize","useDeriveValueFromSelection","_ref","rangeSelection","$getSelectionStyleValueForProperty","useEffect","mergeRegister","registerEditableListener","editable","Fragment","exports"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\n\nconst FONT_SIZE_OPTIONS: string[] = [\n    \"8px\",\n    \"9px\",\n    \"10px\",\n    \"11px\",\n    \"12px\",\n    \"14px\",\n    \"15px\",\n    \"16px\",\n    \"18px\",\n    \"21px\",\n    \"24px\",\n    \"30px\",\n    \"36px\",\n    \"48px\",\n    \"60px\",\n    \"72px\",\n    \"96px\"\n];\n\nfunction dropDownActiveClass(active: boolean) {\n    if (active) {\n        return \"active dropdown-item-active\";\n    }\n    return \"\";\n}\n\ninterface FontSizeDropDownProps {\n    editor: LexicalEditor;\n    value: string;\n    disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n    const { editor, value, disabled = false } = props;\n\n    const handleClick = useCallback(\n        (option: string) => {\n            editor.update(() => {\n                const selection = $getSelection();\n                if ($isRangeSelection(selection)) {\n                    $patchStyleText(selection, {\n                        [\"font-size\"]: option\n                    });\n                }\n            });\n        },\n        [editor]\n    );\n\n    return (\n        <DropDown\n            disabled={disabled}\n            buttonClassName=\"toolbar-item font-size\"\n            buttonLabel={value}\n            buttonAriaLabel={\"Formatting options for font size\"}\n        >\n            {FONT_SIZE_OPTIONS.map(option => (\n                <DropDownItem\n                    className={`item fontsize-item ${dropDownActiveClass(value === option)}`}\n                    onClick={() => handleClick(option)}\n                    key={option}\n                >\n                    <span className=\"text\">{option}</span>\n                </DropDownItem>\n            ))}\n        </DropDown>\n    );\n}\n\nexport const FontSizeAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n    const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"15px\";\n        }\n        return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\", \"15px\");\n    });\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            })\n        );\n    }, [editor]);\n\n    return (\n        <>\n            <FontSizeDropDown disabled={!isEditable} value={fontSize} editor={editor} />\n        </>\n    );\n};\n"],"mappings":"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"}

package/components/ToolbarActions/ImageAction.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.ImageAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var _files = require("../../utils/files");
-var _insertFiles = require("../../commands/insertFiles");
+var _commands = require("../../commands");
 var ImageAction = function ImageAction() {
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
@@ -35,7 +35,7 @@ var ImageAction = function ImageAction() {
       imageActionPlugin === null || imageActionPlugin === void 0 ? void 0 : imageActionPlugin.plugin(function (data) {
         var imagePayload = (0, _files.fileToImagePayload)(data);
         if (imagePayload) {
-          editor.dispatchCommand(_insertFiles.INSERT_IMAGE_COMMAND, imagePayload);
+          editor.dispatchCommand(_commands.INSERT_IMAGE_COMMAND, imagePayload);
         }
       });
     }
@@ -50,4 +50,6 @@ var ImageAction = function ImageAction() {
     className: "icon insert-image"
   }));
 };
-exports.ImageAction = ImageAction;
+exports.ImageAction = ImageAction;
+
+//# sourceMappingURL=ImageAction.js.map

package/components/ToolbarActions/ImageAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_useRichTextEditor2","_LexicalComposerContext","_files","_insertFiles","ImageAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useRichTextEditor","useRichTextEditor","toolbarActionPlugins","_useState","useState","_useState2","imageActionPlugin","setImageActionPlugin","useEffect","length","actionPlugin","find","action","targetAction","handleClick","plugin","data","imagePayload","fileToImagePayload","dispatchCommand","INSERT_IMAGE_COMMAND","createElement","onClick","className","exports"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FileManagerFileItem, fileToImagePayload } from \"~/utils/files\";\nimport { ImagePayload, INSERT_IMAGE_COMMAND } from \"~/commands/insertFiles\";\nimport { LexicalCommand } from \"lexical\";\nimport { ToolbarActionPlugin } from \"~/types\";\n\nexport const ImageAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { toolbarActionPlugins } = useRichTextEditor();\n    const [imageActionPlugin, setImageActionPlugin] = useState<ToolbarActionPlugin | undefined>();\n\n    useEffect(() => {\n        if (!!toolbarActionPlugins?.length) {\n            const actionPlugin = toolbarActionPlugins.find(\n                action => action.targetAction === \"image-action\"\n            );\n            setImageActionPlugin(actionPlugin);\n        }\n    }, [toolbarActionPlugins]);\n\n    const handleClick = () => {\n        if (typeof imageActionPlugin?.plugin === \"function\") {\n            imageActionPlugin?.plugin((data: FileManagerFileItem) => {\n                const imagePayload = fileToImagePayload(data);\n                if (imagePayload) {\n                    editor.dispatchCommand<LexicalCommand<ImagePayload>>(\n                        INSERT_IMAGE_COMMAND,\n                        imagePayload\n                    );\n                }\n            });\n        }\n    };\n\n    return (\n        <button onClick={() => handleClick()} className={\"popup-item\"} aria-label=\"Insert image\">\n            <i className=\"icon insert-image\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AAIO,IAAMK,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,kBAAA,GAAiC,IAAAC,qCAAiB,EAAC,CAAC;IAA5CC,oBAAoB,GAAAF,kBAAA,CAApBE,oBAAoB;EAC5B,IAAAC,SAAA,GAAkD,IAAAC,eAAQ,EAAkC,CAAC;IAAAC,UAAA,OAAAR,eAAA,CAAAC,OAAA,EAAAK,SAAA;IAAtFG,iBAAiB,GAAAD,UAAA;IAAEE,oBAAoB,GAAAF,UAAA;EAE9C,IAAAG,gBAAS,EAAC,YAAM;IACZ,IAAI,CAAC,EAACN,oBAAoB,aAApBA,oBAAoB,eAApBA,oBAAoB,CAAEO,MAAM,GAAE;MAChC,IAAMC,YAAY,GAAGR,oBAAoB,CAACS,IAAI,CAC1C,UAAAC,MAAM;QAAA,OAAIA,MAAM,CAACC,YAAY,KAAK,cAAc;MAAA,CACpD,CAAC;MACDN,oBAAoB,CAACG,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACR,oBAAoB,CAAC,CAAC;EAE1B,IAAMY,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtB,IAAI,QAAOR,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAES,MAAM,MAAK,UAAU,EAAE;MACjDT,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAES,MAAM,CAAC,UAACC,IAAyB,EAAK;QACrD,IAAMC,YAAY,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdlB,MAAM,CAACoB,eAAe,CAClBC,iCAAoB,EACpBH,YACJ,CAAC;QACL;MACJ,CAAC,CAAC;IACN;EACJ,CAAC;EAED,oBACI/B,MAAA,CAAAY,OAAA,CAAAuB,aAAA;IAAQC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMR,WAAW,CAAC,CAAC;IAAA,CAAC;IAACS,SAAS,EAAE,YAAa;IAAC,cAAW;EAAc,gBACpFrC,MAAA,CAAAY,OAAA,CAAAuB,aAAA;IAAGE,SAAS,EAAC;EAAmB,CAAE,CAC9B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAA/B,WAAA,GAAAA,WAAA"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_useRichTextEditor2","_files","_commands","ImageAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useRichTextEditor","useRichTextEditor","toolbarActionPlugins","_useState","useState","_useState2","imageActionPlugin","setImageActionPlugin","useEffect","length","actionPlugin","find","action","targetAction","handleClick","plugin","data","imagePayload","fileToImagePayload","dispatchCommand","INSERT_IMAGE_COMMAND","createElement","onClick","className","exports"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { FileManagerFileItem, fileToImagePayload } from \"~/utils/files\";\nimport { ImagePayload, INSERT_IMAGE_COMMAND } from \"~/commands\";\nimport { ToolbarActionPlugin } from \"~/types\";\n\nexport const ImageAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { toolbarActionPlugins } = useRichTextEditor();\n    const [imageActionPlugin, setImageActionPlugin] = useState<ToolbarActionPlugin | undefined>();\n\n    useEffect(() => {\n        if (!!toolbarActionPlugins?.length) {\n            const actionPlugin = toolbarActionPlugins.find(\n                action => action.targetAction === \"image-action\"\n            );\n            setImageActionPlugin(actionPlugin);\n        }\n    }, [toolbarActionPlugins]);\n\n    const handleClick = () => {\n        if (typeof imageActionPlugin?.plugin === \"function\") {\n            imageActionPlugin?.plugin((data: FileManagerFileItem) => {\n                const imagePayload = fileToImagePayload(data);\n                if (imagePayload) {\n                    editor.dispatchCommand<LexicalCommand<ImagePayload>>(\n                        INSERT_IMAGE_COMMAND,\n                        imagePayload\n                    );\n                }\n            });\n        }\n    };\n\n    return (\n        <button onClick={() => handleClick()} className={\"popup-item\"} aria-label=\"Insert image\">\n            <i className=\"icon insert-image\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAGO,IAAMK,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,kBAAA,GAAiC,IAAAC,qCAAiB,EAAC,CAAC;IAA5CC,oBAAoB,GAAAF,kBAAA,CAApBE,oBAAoB;EAC5B,IAAAC,SAAA,GAAkD,IAAAC,eAAQ,EAAkC,CAAC;IAAAC,UAAA,OAAAR,eAAA,CAAAC,OAAA,EAAAK,SAAA;IAAtFG,iBAAiB,GAAAD,UAAA;IAAEE,oBAAoB,GAAAF,UAAA;EAE9C,IAAAG,gBAAS,EAAC,YAAM;IACZ,IAAI,CAAC,EAACN,oBAAoB,aAApBA,oBAAoB,eAApBA,oBAAoB,CAAEO,MAAM,GAAE;MAChC,IAAMC,YAAY,GAAGR,oBAAoB,CAACS,IAAI,CAC1C,UAAAC,MAAM;QAAA,OAAIA,MAAM,CAACC,YAAY,KAAK,cAAc;MAAA,CACpD,CAAC;MACDN,oBAAoB,CAACG,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACR,oBAAoB,CAAC,CAAC;EAE1B,IAAMY,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtB,IAAI,QAAOR,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAES,MAAM,MAAK,UAAU,EAAE;MACjDT,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAES,MAAM,CAAC,UAACC,IAAyB,EAAK;QACrD,IAAMC,YAAY,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdlB,MAAM,CAACoB,eAAe,CAClBC,8BAAoB,EACpBH,YACJ,CAAC;QACL;MACJ,CAAC,CAAC;IACN;EACJ,CAAC;EAED,oBACI/B,MAAA,CAAAY,OAAA,CAAAuB,aAAA;IAAQC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMR,WAAW,CAAC,CAAC;IAAA,CAAC;IAACS,SAAS,EAAE,YAAa;IAAC,cAAW;EAAc,gBACpFrC,MAAA,CAAAY,OAAA,CAAAuB,aAAA;IAAGE,SAAS,EAAC;EAAmB,CAAE,CAC9B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAA/B,WAAA,GAAAA,WAAA"}

package/components/ToolbarActions/ItalicAction.js

@@ -1,43 +1,33 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ItalicAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _lexical = require("lexical");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _useCurrentSelection2 = require("../../hooks/useCurrentSelection");
 var ItalicAction = function ItalicAction() {
-  var _textBlockSelection$s;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isItalic = _useState2[0],
-    setIsItalic = _useState2[1];
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    textBlockSelection = _useRichTextEditor.textBlockSelection;
-  var isItalicSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.italic);
+  var _useCurrentSelection = (0, _useCurrentSelection2.useCurrentSelection)(),
+    rangeSelection = _useCurrentSelection.rangeSelection;
+  var isItalicSelected = rangeSelection ? rangeSelection.hasFormat("italic") : false;
   var handleClick = function handleClick() {
     editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "italic");
-    setIsItalic(!isItalic);
   };
-  (0, _react.useEffect)(function () {
-    setIsItalic(isItalicSelected);
-  }, [isItalicSelected]);
   return /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return handleClick();
-    },
-    className: "popup-item spaced " + (isItalic ? "active" : ""),
+    onClick: handleClick,
+    className: "popup-item spaced " + (isItalicSelected ? "active" : ""),
     "aria-label": "Format text as italic"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "format italic"
   }));
 };
-exports.ItalicAction = ItalicAction;
+exports.ItalicAction = ItalicAction;
+
+//# sourceMappingURL=ItalicAction.js.map

package/components/ToolbarActions/ItalicAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","_useRichTextEditor2","ItalicAction","_textBlockSelection$s","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isItalic","setIsItalic","_useRichTextEditor","useRichTextEditor","textBlockSelection","isItalicSelected","state","italic","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","useEffect","createElement","onClick","className","exports"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const ItalicAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isItalic, setIsItalic] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isItalicSelected = !!textBlockSelection?.state?.italic;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n        setIsItalic(!isItalic);\n    };\n\n    useEffect(() => {\n        setIsItalic(isItalicSelected);\n    }, [isItalicSelected]);\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isItalic ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAEO,IAAMI,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAAA,IAAAC,qBAAA;EAC9B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAAgC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAAxCG,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,IAAAG,kBAAA,GAA+B,IAAAC,qCAAiB,EAAC,CAAC;IAA1CC,kBAAkB,GAAAF,kBAAA,CAAlBE,kBAAkB;EAC1B,IAAMC,gBAAgB,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,gBAAAd,qBAAA,GAAlBc,kBAAkB,CAAEE,KAAK,cAAAhB,qBAAA,eAAzBA,qBAAA,CAA2BiB,MAAM;EAE5D,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBZ,MAAM,CAACa,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;IACrDT,WAAW,CAAC,CAACD,QAAQ,CAAC;EAC1B,CAAC;EAED,IAAAW,gBAAS,EAAC,YAAM;IACZV,WAAW,CAACI,gBAAgB,CAAC;EACjC,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAEtB,oBACItB,MAAA,CAAAY,OAAA,CAAAiB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAML,WAAW,CAAC,CAAC;IAAA,CAAC;IAC7BM,SAAS,EAAE,oBAAoB,IAAId,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAAuB,gBAElCjB,MAAA,CAAAY,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAe,CAAE,CAC1B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAA1B,YAAA,GAAAA,YAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_lexical","_useCurrentSelection2","ItalicAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isItalicSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\n\nexport const ItalicAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { rangeSelection } = useCurrentSelection();\n    const isItalicSelected = rangeSelection ? rangeSelection.hasFormat(\"italic\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isItalicSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AAEO,IAAMI,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAC9B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,gBAAgB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,QAAQ,CAAC,GAAG,KAAK;EAEpF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;EACzD,CAAC;EAED,oBACIpB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAEJ,WAAY;IACrBK,SAAS,EAAE,oBAAoB,IAAIP,gBAAgB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrE,cAAW;EAAuB,gBAElChB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAe,CAAE,CAC1B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAlB,YAAA,GAAAA,YAAA"}

package/components/ToolbarActions/LinkAction.js

@@ -9,50 +9,30 @@ exports.LinkAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _link = require("@lexical/link");
-var _lexical = require("lexical");
-var _getSelectedNode = require("../../utils/getSelectedNode");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _lexicalNodes = require("@webiny/lexical-nodes");
+var _useCurrentElement = require("../../hooks/useCurrentElement");
+var _useCurrentSelection = require("../../hooks/useCurrentSelection");
 var LinkAction = function LinkAction() {
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isLink = _useState2[0],
-    setIsLink = _useState2[1];
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    setNodeIsText = _useRichTextEditor.setNodeIsText;
+  var isLink = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref) {
+    var rangeSelection = _ref.rangeSelection;
+    if (!rangeSelection) {
+      return false;
+    }
+    var node = (0, _useCurrentElement.getNodeFromSelection)(rangeSelection);
+    return node ? (0, _lexicalNodes.$isLinkNode)(node) || (0, _lexicalNodes.$isLinkNode)(node.getParent()) : false;
+  });
   var insertLink = (0, _react.useCallback)(function () {
     if (!isLink) {
-      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, "https://");
-      setNodeIsText(false);
+      editor.dispatchCommand(_lexicalNodes.TOGGLE_LINK_COMMAND, {
+        url: "https://"
+      });
     } else {
-      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, null);
+      editor.dispatchCommand(_lexicalNodes.TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink]);
-  var updatePopup = (0, _react.useCallback)(function () {
-    editor.getEditorState().read(function () {
-      var selection = (0, _lexical.$getSelection)();
-      if (!(0, _lexical.$isRangeSelection)(selection)) {
-        return;
-      }
-      var node = (0, _getSelectedNode.getSelectedNode)(selection);
-      // Update links
-      var parent = node.getParent();
-      if ((0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node)) {
-        setIsLink(true);
-      } else {
-        setIsLink(false);
-      }
-    });
-  }, [editor]);
-  (0, _react.useEffect)(function () {
-    document.addEventListener("selectionchange", updatePopup);
-    return function () {
-      document.removeEventListener("selectionchange", updatePopup);
-    };
-  }, [updatePopup]);
   return /*#__PURE__*/_react.default.createElement("button", {
     onClick: insertLink,
     className: "popup-item spaced " + (isLink ? "active" : ""),
@@ -61,4 +41,6 @@ var LinkAction = function LinkAction() {
     className: "format link"
   }));
 };
-exports.LinkAction = LinkAction;
+exports.LinkAction = LinkAction;
+
+//# sourceMappingURL=LinkAction.js.map

package/components/ToolbarActions/LinkAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_link","_lexical","_getSelectedNode","_useRichTextEditor2","LinkAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isLink","setIsLink","_useRichTextEditor","useRichTextEditor","setNodeIsText","insertLink","useCallback","dispatchCommand","TOGGLE_LINK_COMMAND","updatePopup","getEditorState","read","selection","$getSelection","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","useEffect","document","addEventListener","removeEventListener","createElement","onClick","className","exports"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@lexical/link\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const LinkAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isLink, setIsLink] = useState(false);\n    const { setNodeIsText } = useRichTextEditor();\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, \"https://\");\n            setNodeIsText(false);\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            const selection = $getSelection();\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                setIsLink(true);\n            } else {\n                setIsLink(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEO,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAApCG,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAAG,kBAAA,GAA0B,IAAAC,qCAAiB,EAAC,CAAC;IAArCC,aAAa,GAAAF,kBAAA,CAAbE,aAAa;EAErB,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjC,IAAI,CAACN,MAAM,EAAE;MACTJ,MAAM,CAACW,eAAe,CAACC,yBAAmB,EAAE,UAAU,CAAC;MACvDJ,aAAa,CAAC,KAAK,CAAC;IACxB,CAAC,MAAM;MACHR,MAAM,CAACW,eAAe,CAACC,yBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACZ,MAAM,EAAEI,MAAM,CAAC,CAAC;EAEpB,IAAMS,WAAW,GAAG,IAAAH,kBAAW,EAAC,YAAM;IAClCV,MAAM,CAACc,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,YAAM;MAC/B,IAAMC,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;MACjC,IAAI,CAAC,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC/B;MACJ;MACA,IAAMG,IAAI,GAAG,IAAAC,gCAAe,EAACJ,SAAS,CAAC;MACvC;MACA,IAAMK,MAAM,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC;MAC/B,IAAI,IAAAC,iBAAW,EAACF,MAAM,CAAC,IAAI,IAAAE,iBAAW,EAACJ,IAAI,CAAC,EAAE;QAC1Cd,SAAS,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACHA,SAAS,CAAC,KAAK,CAAC;MACpB;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,IAAAwB,gBAAS,EAAC,YAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEb,WAAW,CAAC;IACzD,OAAO,YAAM;MACTY,QAAQ,CAACE,mBAAmB,CAAC,iBAAiB,EAAEd,WAAW,CAAC;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACI3B,MAAA,CAAAa,OAAA,CAAA6B,aAAA;IACIC,OAAO,EAAEpB,UAAW;IACpBqB,SAAS,EAAE,oBAAoB,IAAI1B,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBlB,MAAA,CAAAa,OAAA,CAAA6B,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAArC,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexicalNodes","_useCurrentElement","_useCurrentSelection","LinkAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","isLink","useDeriveValueFromSelection","_ref","rangeSelection","node","getNodeFromSelection","$isLinkNode","getParent","insertLink","useCallback","dispatchCommand","TOGGLE_LINK_COMMAND","url","createElement","onClick","className","exports"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\n\nexport const LinkAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const isLink = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n        const node = getNodeFromSelection(rangeSelection);\n        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;\n    });\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: \"https://\" });\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAEO,IAAMK,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAMI,MAAM,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,IAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,IAAA,CAAdC,cAAc;IACxD,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,KAAK;IAChB;IACA,IAAMC,IAAI,GAAG,IAAAC,uCAAoB,EAACF,cAAc,CAAC;IACjD,OAAOC,IAAI,GAAG,IAAAE,yBAAW,EAACF,IAAI,CAAC,IAAI,IAAAE,yBAAW,EAACF,IAAI,CAACG,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK;EAC5E,CAAC,CAAC;EAEF,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjC,IAAI,CAACT,MAAM,EAAE;MACTD,MAAM,CAACW,eAAe,CAACC,iCAAmB,EAAE;QAAEC,GAAG,EAAE;MAAW,CAAC,CAAC;IACpE,CAAC,MAAM;MACHb,MAAM,CAACW,eAAe,CAACC,iCAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACZ,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,oBACId,MAAA,CAAAY,OAAA,CAAAe,aAAA;IACIC,OAAO,EAAEN,UAAW;IACpBO,SAAS,EAAE,oBAAoB,IAAIf,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBd,MAAA,CAAAY,OAAA,CAAAe,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAvB,UAAA,GAAAA,UAAA"}

package/components/ToolbarActions/NumberedListAction.js

@@ -1,70 +1,61 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberedListAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _webinyList = require("../../commands/webiny-list");
+var _lexicalNodes = require("@webiny/lexical-nodes");
+var _lexicalTheme = require("@webiny/lexical-theme");
+var _commands = require("../../commands");
 var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _findTypographyStyleByHtmlTag = require("../../utils/findTypographyStyleByHtmlTag");
+var _useCurrentElement2 = require("../../hooks/useCurrentElement");
 var NumberedListAction = function NumberedListAction() {
-  var _textBlockSelection$s, _textBlockSelection$s3;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isActive = _useState2[0],
-    setIsActive = _useState2[1];
+  var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
+    element = _useCurrentElement.element;
   var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    textBlockSelection = _useRichTextEditor.textBlockSelection,
     themeEmotionMap = _useRichTextEditor.themeEmotionMap;
-  var isListSelected = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s = textBlockSelection.state) === null || _textBlockSelection$s === void 0 ? void 0 : _textBlockSelection$s.list.isSelected;
-  (0, _react.useEffect)(function () {
-    var _textBlockSelection$s2;
-    var isListBulletType = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s2 = textBlockSelection.state) === null || _textBlockSelection$s2 === void 0 ? void 0 : _textBlockSelection$s2.textType) === "number";
-    setIsActive(isListBulletType);
-  }, [textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s3 = textBlockSelection.state) === null || _textBlockSelection$s3 === void 0 ? void 0 : _textBlockSelection$s3.textType, isListSelected]);
+  var isList = (0, _lexicalNodes.$isListNode)(element);
+  var isNumbered = isList && element.getListType() === "number";
   var getStyleId = function getStyleId() {
     var _findTypographyStyleB, _findTypographyStyleB2;
     if (!themeEmotionMap) {
       return undefined;
     }
     // check default style for numbered list
-    var id = (_findTypographyStyleB = (0, _findTypographyStyleByHtmlTag.findTypographyStyleByHtmlTag)("ol", themeEmotionMap)) === null || _findTypographyStyleB === void 0 ? void 0 : _findTypographyStyleB.id;
+    var id = (_findTypographyStyleB = (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ol", themeEmotionMap)) === null || _findTypographyStyleB === void 0 ? void 0 : _findTypographyStyleB.id;
     if (id) {
       return id;
     }
     // fallback to ul list styles
-    return (_findTypographyStyleB2 = (0, _findTypographyStyleByHtmlTag.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)) === null || _findTypographyStyleB2 === void 0 ? void 0 : _findTypographyStyleB2.id;
+    return (_findTypographyStyleB2 = (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)) === null || _findTypographyStyleB2 === void 0 ? void 0 : _findTypographyStyleB2.id;
   };
   var formatNumberedList = function formatNumberedList() {
-    if (!isActive) {
+    if (!isNumbered) {
       var styleId = themeEmotionMap ? getStyleId() : undefined;
-      // will update the active state in the useEffect
-      editor.dispatchCommand(_webinyList.INSERT_ORDERED_WEBINY_LIST_COMMAND, {
+      editor.dispatchCommand(_commands.INSERT_ORDERED_LIST_COMMAND, {
         themeStyleId: styleId
       });
-      setIsActive(true);
     } else {
-      editor.dispatchCommand(_webinyList.REMOVE_WEBINY_LIST_COMMAND, undefined);
-      // removing will not update correctly the active state, so we need to set to false manually.
-      setIsActive(false);
+      editor.dispatchCommand(_commands.REMOVE_LIST_COMMAND, undefined);
     }
   };
   return /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
       return formatNumberedList();
     },
-    className: "popup-item spaced " + (isActive ? "active" : ""),
+    className: "popup-item spaced " + (isNumbered ? "active" : ""),
     "aria-label": "Format text as numbered list"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "icon numbered-list"
   }));
 };
-exports.NumberedListAction = NumberedListAction;
+exports.NumberedListAction = NumberedListAction;
+
+//# sourceMappingURL=NumberedListAction.js.map

package/components/ToolbarActions/NumberedListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_webinyList","_useRichTextEditor2","_findTypographyStyleByHtmlTag","NumberedListAction","_textBlockSelection$s","_textBlockSelection$s3","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isActive","setIsActive","_useRichTextEditor","useRichTextEditor","textBlockSelection","themeEmotionMap","isListSelected","state","list","isSelected","useEffect","_textBlockSelection$s2","isListBulletType","textType","getStyleId","_findTypographyStyleB","_findTypographyStyleB2","undefined","id","findTypographyStyleByHtmlTag","formatNumberedList","styleId","dispatchCommand","INSERT_ORDERED_WEBINY_LIST_COMMAND","themeStyleId","REMOVE_WEBINY_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    INSERT_ORDERED_WEBINY_LIST_COMMAND,\n    REMOVE_WEBINY_LIST_COMMAND\n} from \"~/commands/webiny-list\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"~/utils/findTypographyStyleByHtmlTag\";\n\nexport const NumberedListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { textBlockSelection, themeEmotionMap } = useRichTextEditor();\n    const isListSelected = textBlockSelection?.state?.list.isSelected;\n\n    useEffect(() => {\n        const isListBulletType = textBlockSelection?.state?.textType === \"number\";\n        setIsActive(isListBulletType);\n    }, [textBlockSelection?.state?.textType, isListSelected]);\n\n    const getStyleId = (): string | undefined => {\n        if (!themeEmotionMap) {\n            return undefined;\n        }\n        // check default style for numbered list\n        const id = findTypographyStyleByHtmlTag(\"ol\", themeEmotionMap)?.id;\n        if (id) {\n            return id;\n        }\n        // fallback to ul list styles\n        return findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id;\n    };\n\n    const formatNumberedList = () => {\n        if (!isActive) {\n            const styleId = themeEmotionMap ? getStyleId() : undefined;\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_ORDERED_WEBINY_LIST_COMMAND, { themeStyleId: styleId });\n            setIsActive(true);\n        } else {\n            editor.dispatchCommand(REMOVE_WEBINY_LIST_COMMAND, undefined);\n            // removing will not update correctly the active state, so we need to set to false manually.\n            setIsActive(false);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_lexicalNodes","_lexicalTheme","_commands","_useRichTextEditor2","_useCurrentElement2","NumberedListAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentElement","useCurrentElement","element","_useRichTextEditor","useRichTextEditor","themeEmotionMap","isList","$isListNode","isNumbered","getListType","getStyleId","_findTypographyStyleB","_findTypographyStyleB2","undefined","id","findTypographyStyleByHtmlTag","formatNumberedList","styleId","dispatchCommand","INSERT_ORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const NumberedListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { element } = useCurrentElement();\n    const { themeEmotionMap } = useRichTextEditor();\n    const isList = $isListNode(element);\n    const isNumbered = isList && (element as ListNode).getListType() === \"number\";\n\n    const getStyleId = (): string | undefined => {\n        if (!themeEmotionMap) {\n            return undefined;\n        }\n        // check default style for numbered list\n        const id = findTypographyStyleByHtmlTag(\"ol\", themeEmotionMap)?.id;\n        if (id) {\n            return id;\n        }\n        // fallback to ul list styles\n        return findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id;\n    };\n\n    const formatNumberedList = () => {\n        if (!isNumbered) {\n            const styleId = themeEmotionMap ? getStyleId() : undefined;\n            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isNumbered ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,mBAAA,GAAAN,OAAA;AAEO,IAAMO,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;EACpC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,kBAAA,GAA4B,IAAAC,qCAAiB,EAAC,CAAC;IAAvCC,eAAe,GAAAF,kBAAA,CAAfE,eAAe;EACvB,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACL,OAAO,CAAC;EACnC,IAAMM,UAAU,GAAGF,MAAM,IAAKJ,OAAO,CAAcO,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE7E,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAA6B;IAAA,IAAAC,qBAAA,EAAAC,sBAAA;IACzC,IAAI,CAACP,eAAe,EAAE;MAClB,OAAOQ,SAAS;IACpB;IACA;IACA,IAAMC,EAAE,IAAAH,qBAAA,GAAG,IAAAI,0CAA4B,EAAC,IAAI,EAAEV,eAAe,CAAC,cAAAM,qBAAA,uBAAnDA,qBAAA,CAAqDG,EAAE;IAClE,IAAIA,EAAE,EAAE;MACJ,OAAOA,EAAE;IACb;IACA;IACA,QAAAF,sBAAA,GAAO,IAAAG,0CAA4B,EAAC,IAAI,EAAEV,eAAe,CAAC,cAAAO,sBAAA,uBAAnDA,sBAAA,CAAqDE,EAAE;EAClE,CAAC;EAED,IAAME,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;IAC7B,IAAI,CAACR,UAAU,EAAE;MACb,IAAMS,OAAO,GAAGZ,eAAe,GAAGK,UAAU,CAAC,CAAC,GAAGG,SAAS;MAC1Dd,MAAM,CAACmB,eAAe,CAACC,qCAA2B,EAAE;QAAEC,YAAY,EAAEH;MAAQ,CAAC,CAAC;IAClF,CAAC,MAAM;MACHlB,MAAM,CAACmB,eAAe,CAACG,6BAAmB,EAAER,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACI7B,MAAA,CAAAc,OAAA,CAAAwB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMP,kBAAkB,CAAC,CAAC;IAAA,CAAC;IACpCQ,SAAS,EAAE,oBAAoB,IAAIhB,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC/D,cAAW;EAA8B,gBAEzCxB,MAAA,CAAAc,OAAA,CAAAwB,aAAA;IAAGE,SAAS,EAAC;EAAoB,CAAE,CAC/B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAhC,kBAAA,GAAAA,kBAAA"}

package/components/ToolbarActions/QuoteAction.js

@@ -1,52 +1,43 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.QuoteAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _formatToQuote = require("../../utils/nodes/formatToQuote");
-var _formatToParagraph = require("../../utils/nodes/formatToParagraph");
+var _lexicalNodes = require("@webiny/lexical-nodes");
 var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _useCurrentElement2 = require("../../hooks/useCurrentElement");
 var QuoteAction = function QuoteAction() {
-  var _textBlockSelection$s;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isActive = _useState2[0],
-    setIsActive = _useState2[1];
   var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    textBlockSelection = _useRichTextEditor.textBlockSelection,
-    themeEmotionMap = _useRichTextEditor.themeEmotionMap,
-    activeEditor = _useRichTextEditor.activeEditor;
-  var isQuoteSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.quote.isSelected);
+    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
+  var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
+    element = _useCurrentElement.element;
+  var isQuote = (0, _lexicalNodes.$isQuoteNode)(element);
   var formatText = function formatText() {
-    if (!isActive) {
+    if (!isQuote) {
       // Try to set default quote style, when the action button is clicked for first time
       var DEFAULT_QUOTE_ID = "quote";
       var hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];
-      (0, _formatToQuote.formatToQuote)(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);
+      (0, _lexicalNodes.formatToQuote)(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);
       return;
     }
-    (0, _formatToParagraph.formatToParagraph)(editor);
+    (0, _lexicalNodes.formatToParagraph)(editor);
   };
-  (0, _react.useEffect)(function () {
-    setIsActive(isQuoteSelected);
-  }, [isQuoteSelected, activeEditor]);
   return /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return formatText();
-    },
-    className: "popup-item " + (isActive ? "active" : ""),
+    onClick: formatText,
+    className: "popup-item " + (isQuote ? "active" : ""),
     "aria-label": "Format text as quote"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "icon quote"
   }));
 };
-exports.QuoteAction = QuoteAction;
+exports.QuoteAction = QuoteAction;
+
+//# sourceMappingURL=QuoteAction.js.map

package/components/ToolbarActions/QuoteAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_formatToQuote","_formatToParagraph","_useRichTextEditor2","QuoteAction","_textBlockSelection$s","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isActive","setIsActive","_useRichTextEditor","useRichTextEditor","textBlockSelection","themeEmotionMap","activeEditor","isQuoteSelected","state","quote","isSelected","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","useEffect","createElement","onClick","className","exports"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { formatToQuote } from \"~/utils/nodes/formatToQuote\";\nimport { formatToParagraph } from \"~/utils/nodes/formatToParagraph\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nexport const QuoteAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { textBlockSelection, themeEmotionMap, activeEditor } = useRichTextEditor();\n    const isQuoteSelected = !!textBlockSelection?.state?.quote.isSelected;\n\n    const formatText = () => {\n        if (!isActive) {\n            // Try to set default quote style, when the action button is clicked for first time\n            const DEFAULT_QUOTE_ID = \"quote\";\n            const hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];\n            formatToQuote(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);\n            return;\n        }\n        formatToParagraph(editor);\n    };\n\n    useEffect(() => {\n        setIsActive(isQuoteSelected);\n    }, [isQuoteSelected, activeEditor]);\n\n    return (\n        <button\n            onClick={() => formatText()}\n            className={\"popup-item \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACO,IAAMK,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAAA,IAAAC,qBAAA;EAC7B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAAjDG,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,IAAAG,kBAAA,GAA8D,IAAAC,qCAAiB,EAAC,CAAC;IAAzEC,kBAAkB,GAAAF,kBAAA,CAAlBE,kBAAkB;IAAEC,eAAe,GAAAH,kBAAA,CAAfG,eAAe;IAAEC,YAAY,GAAAJ,kBAAA,CAAZI,YAAY;EACzD,IAAMC,eAAe,GAAG,CAAC,EAACH,kBAAkB,aAAlBA,kBAAkB,gBAAAd,qBAAA,GAAlBc,kBAAkB,CAAEI,KAAK,cAAAlB,qBAAA,eAAzBA,qBAAA,CAA2BmB,KAAK,CAACC,UAAU;EAErE,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrB,IAAI,CAACX,QAAQ,EAAE;MACX;MACA,IAAMY,gBAAgB,GAAG,OAAO;MAChC,IAAMC,cAAc,GAAGR,eAAe,IAAIA,eAAe,CAACO,gBAAgB,CAAC;MAC3E,IAAAE,4BAAa,EAAClB,MAAM,EAAEiB,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpE;IACJ;IACA,IAAAC,oCAAiB,EAACpB,MAAM,CAAC;EAC7B,CAAC;EAED,IAAAqB,gBAAS,EAAC,YAAM;IACZhB,WAAW,CAACM,eAAe,CAAC;EAChC,CAAC,EAAE,CAACA,eAAe,EAAED,YAAY,CAAC,CAAC;EAEnC,oBACIxB,MAAA,CAAAa,OAAA,CAAAuB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMR,UAAU,CAAC,CAAC;IAAA,CAAC;IAC5BS,SAAS,EAAE,aAAa,IAAIpB,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IACtD,cAAW;EAAsB,gBAEjClB,MAAA,CAAAa,OAAA,CAAAuB,aAAA;IAAGE,SAAS,EAAC;EAAY,CAAE,CACvB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAhC,WAAA,GAAAA,WAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_lexicalNodes","_useRichTextEditor2","_useCurrentElement2","QuoteAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useRichTextEditor","useRichTextEditor","themeEmotionMap","_useCurrentElement","useCurrentElement","element","isQuote","$isQuoteNode","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","createElement","onClick","className","exports"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isQuoteNode, formatToQuote, formatToParagraph } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const QuoteAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isQuote = $isQuoteNode(element);\n\n    const formatText = () => {\n        if (!isQuote) {\n            // Try to set default quote style, when the action button is clicked for first time\n            const DEFAULT_QUOTE_ID = \"quote\";\n            const hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];\n            formatToQuote(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);\n            return;\n        }\n        formatToParagraph(editor);\n    };\n\n    return (\n        <button\n            onClick={formatText}\n            className={\"popup-item \" + (isQuote ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AAEO,IAAMK,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,kBAAA,GAA4B,IAAAC,qCAAiB,EAAC,CAAC;IAAvCC,eAAe,GAAAF,kBAAA,CAAfE,eAAe;EACvB,IAAAC,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAMC,OAAO,GAAG,IAAAC,0BAAY,EAACF,OAAO,CAAC;EAErC,IAAMG,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrB,IAAI,CAACF,OAAO,EAAE;MACV;MACA,IAAMG,gBAAgB,GAAG,OAAO;MAChC,IAAMC,cAAc,GAAGR,eAAe,IAAIA,eAAe,CAACO,gBAAgB,CAAC;MAC3E,IAAAE,2BAAa,EAACZ,MAAM,EAAEW,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpE;IACJ;IACA,IAAAC,+BAAiB,EAACd,MAAM,CAAC;EAC7B,CAAC;EAED,oBACIb,MAAA,CAAAY,OAAA,CAAAgB,aAAA;IACIC,OAAO,EAAEP,UAAW;IACpBQ,SAAS,EAAE,aAAa,IAAIV,OAAO,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrD,cAAW;EAAsB,gBAEjCpB,MAAA,CAAAY,OAAA,CAAAgB,aAAA;IAAGE,SAAS,EAAC;EAAY,CAAE,CACvB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAxB,WAAA,GAAAA,WAAA"}