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

package/components/Toolbar/StaticToolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_useRichTextEditor2","_utils","_LexicalComposerContext","_getLexicalTextSelectionState","_LexicalEditorConfig","useStaticToolbar","_ref","editor","_useRichTextEditor","useRichTextEditor","setNodeIsText","setTextBlockSelection","setActiveEditor","_useState","useState","_useState2","_slicedToArray2","default","toolbarActiveEditor","setToolbarActiveEditor","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","updateToolbar","useCallback","getEditorState","read","isComposing","selection","$getSelection","$isRangeSelection","selectionState","getLexicalTextSelectionState","_selectionState$state","selectedText","state","link","isSelected","useEffect","document","addEventListener","removeEventListener","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","mergeRegister","registerUpdateListener","_ref2","editorState","registerRootListener","getRootElement","createElement","className","isEditable","Fragment","map","action","key","name","element","StaticToolbar","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","exports"],"sources":["StaticToolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useState } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    COMMAND_PRIORITY_CRITICAL,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./StaticToolbar.css\";\nimport { getLexicalTextSelectionState } from \"~/utils/getLexicalTextSelectionState\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n\ninterface useStaticToolbarProps {\n    editor: LexicalEditor;\n}\n\nconst useStaticToolbar: FC<useStaticToolbarProps> = ({ editor }) => {\n    const { setNodeIsText, setTextBlockSelection, setActiveEditor } = useRichTextEditor();\n    const [toolbarActiveEditor, setToolbarActiveEditor] = useState<LexicalEditor>(editor);\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    const updateToolbar = useCallback(() => {\n        editor.getEditorState().read(() => {\n            // Should not to pop up the floating toolbar when using IME input\n            if (editor.isComposing()) {\n                return;\n            }\n\n            const selection = $getSelection();\n\n            if ($isRangeSelection(selection)) {\n                const selectionState = getLexicalTextSelectionState(toolbarActiveEditor, selection);\n                if (selectionState) {\n                    setTextBlockSelection(selectionState);\n                    if (\n                        selectionState.selectedText !== \"\" &&\n                        !selectionState.state?.link.isSelected\n                    ) {\n                        setNodeIsText(true);\n                    } else {\n                        setNodeIsText(false);\n                    }\n                }\n            }\n\n            if (!$isRangeSelection(selection)) {\n                setNodeIsText(false);\n                return;\n            }\n        });\n    }, [toolbarActiveEditor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updateToolbar);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updateToolbar);\n        };\n    }, [updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setToolbarActiveEditor(newEditor);\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n\n    useEffect(() => {\n        return mergeRegister(\n            toolbarActiveEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [updateToolbar, editor, toolbarActiveEditor]);\n\n    return (\n        <div className=\"static-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 const StaticToolbar = () => {\n    const [editor] = useLexicalComposerContext();\n    return useStaticToolbar({ editor });\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAOA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAJ,OAAA;AACAA,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AAMA,IAAMO,gBAA2C,GAAG,SAA9CA,gBAA2CA,CAAAC,IAAA,EAAmB;EAAA,IAAbC,MAAM,GAAAD,IAAA,CAANC,MAAM;EACzD,IAAAC,kBAAA,GAAkE,IAAAC,qCAAiB,EAAC,CAAC;IAA7EC,aAAa,GAAAF,kBAAA,CAAbE,aAAa;IAAEC,qBAAqB,GAAAH,kBAAA,CAArBG,qBAAqB;IAAEC,eAAe,GAAAJ,kBAAA,CAAfI,eAAe;EAC7D,IAAAC,SAAA,GAAsD,IAAAC,eAAQ,EAAgBP,MAAM,CAAC;IAAAQ,UAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,SAAA;IAA9EK,mBAAmB,GAAAH,UAAA;IAAEI,sBAAsB,GAAAJ,UAAA;EAClD,IAAAK,qBAAA,GAA4B,IAAAC,2CAAsB,EAAC,CAAC;IAA5CC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;EAEvB,IAAMC,aAAa,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACpCjB,MAAM,CAACkB,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,YAAM;MAC/B;MACA,IAAInB,MAAM,CAACoB,WAAW,CAAC,CAAC,EAAE;QACtB;MACJ;MAEA,IAAMC,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;MAEjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC9B,IAAMG,cAAc,GAAG,IAAAC,0DAA4B,EAACd,mBAAmB,EAAEU,SAAS,CAAC;QACnF,IAAIG,cAAc,EAAE;UAAA,IAAAE,qBAAA;UAChBtB,qBAAqB,CAACoB,cAAc,CAAC;UACrC,IACIA,cAAc,CAACG,YAAY,KAAK,EAAE,IAClC,GAAAD,qBAAA,GAACF,cAAc,CAACI,KAAK,cAAAF,qBAAA,eAApBA,qBAAA,CAAsBG,IAAI,CAACC,UAAU,GACxC;YACE3B,aAAa,CAAC,IAAI,CAAC;UACvB,CAAC,MAAM;YACHA,aAAa,CAAC,KAAK,CAAC;UACxB;QACJ;MACJ;MAEA,IAAI,CAAC,IAAAoB,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC/BlB,aAAa,CAAC,KAAK,CAAC;QACpB;MACJ;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACQ,mBAAmB,CAAC,CAAC;EAEzB,IAAAoB,gBAAS,EAAC,YAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEjB,aAAa,CAAC;IAC3D,OAAO,YAAM;MACTgB,QAAQ,CAACE,mBAAmB,CAAC,iBAAiB,EAAElB,aAAa,CAAC;IAClE,CAAC;EACL,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,IAAAe,gBAAS,EAAC,YAAM;IACZ,OAAO/B,MAAM,CAACmC,eAAe,CACzBC,iCAAwB,EACxB,UAACC,QAAQ,EAAEC,SAAS,EAAK;MACrBtB,aAAa,CAAC,CAAC;MACfJ,sBAAsB,CAAC0B,SAAS,CAAC;MACjCjC,eAAe,CAACiC,SAAS,CAAC;MAC1B,OAAO,KAAK;IAChB,CAAC,EACDC,kCACJ,CAAC;EACL,CAAC,EAAE,CAACvC,MAAM,EAAEgB,aAAa,CAAC,CAAC;EAE3B,IAAAe,gBAAS,EAAC,YAAM;IACZ,OAAO,IAAAS,oBAAa,EAChB7B,mBAAmB,CAAC8B,sBAAsB,CAAC,UAAAC,KAAA,EAAqB;MAAA,IAAlBC,WAAW,GAAAD,KAAA,CAAXC,WAAW;MACrDA,WAAW,CAACxB,IAAI,CAAC,YAAM;QACnBH,aAAa,CAAC,CAAC;MACnB,CAAC,CAAC;IACN,CAAC,CAAC,EACFhB,MAAM,CAAC4C,oBAAoB,CAAC,YAAM;MAC9B,IAAI5C,MAAM,CAAC6C,cAAc,CAAC,CAAC,KAAK,IAAI,EAAE;QAClC1C,aAAa,CAAC,KAAK,CAAC;MACxB;IACJ,CAAC,CAAC,EACFH,MAAM,CAAC4C,oBAAoB,CAAC,YAAM;MAC9B,IAAI5C,MAAM,CAAC6C,cAAc,CAAC,CAAC,KAAK,IAAI,EAAE;QAClC1C,aAAa,CAAC,KAAK,CAAC;MACxB;IACJ,CAAC,CACL,CAAC;EACL,CAAC,EAAE,CAACa,aAAa,EAAEhB,MAAM,EAAEW,mBAAmB,CAAC,CAAC;EAEhD,oBACItB,MAAA,CAAAqB,OAAA,CAAAoC,aAAA;IAAKC,SAAS,EAAC;EAAgB,GAC1B/C,MAAM,CAACgD,UAAU,CAAC,CAAC,iBAChB3D,MAAA,CAAAqB,OAAA,CAAAoC,aAAA,CAAAzD,MAAA,CAAAqB,OAAA,CAAAuC,QAAA,QACKlC,eAAe,CAACmC,GAAG,CAAC,UAAAC,MAAM;IAAA,oBACvB9D,MAAA,CAAAqB,OAAA,CAAAoC,aAAA,CAACzD,MAAA,CAAA4D,QAAQ;MAACG,GAAG,EAAED,MAAM,CAACE;IAAK,GAAEF,MAAM,CAACG,OAAkB,CAAC;EAAA,CAC1D,CACH,CAEL,CAAC;AAEd,CAAC;AAEM,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAA,EAAS;EAC/B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAjD,eAAA,CAAAC,OAAA,EAAA8C,qBAAA;IAArCxD,MAAM,GAAA0D,sBAAA;EACb,OAAO5D,gBAAgB,CAAC;IAAEE,MAAM,EAANA;EAAO,CAAC,CAAC;AACvC,CAAC;AAAC2D,OAAA,CAAAJ,aAAA,GAAAA,aAAA"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_LexicalEditorConfig","StaticToolbar","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","createElement","className","isEditable","Fragment","map","action","key","name","element","exports"],"sources":["StaticToolbar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./StaticToolbar.css\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n\nexport const StaticToolbar = () => {\n    const [editor] = useLexicalComposerContext();\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    return (\n        <div className=\"static-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"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACAA,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AAEO,IAAMG,aAAa,GAAG,SAAhBA,aAAaA,CAAA,EAAS;EAC/B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,qBAAA,GAA4B,IAAAC,2CAAsB,EAAC,CAAC;IAA5CC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;EAEvB,oBACId,MAAA,CAAAU,OAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAAgB,GAC1BL,MAAM,CAACM,UAAU,CAAC,CAAC,iBAChBjB,MAAA,CAAAU,OAAA,CAAAK,aAAA,CAAAf,MAAA,CAAAU,OAAA,CAAAQ,QAAA,QACKJ,eAAe,CAACK,GAAG,CAAC,UAAAC,MAAM;IAAA,oBACvBpB,MAAA,CAAAU,OAAA,CAAAK,aAAA,CAACf,MAAA,CAAAkB,QAAQ;MAACG,GAAG,EAAED,MAAM,CAACE;IAAK,GAAEF,MAAM,CAACG,OAAkB,CAAC;EAAA,CAC1D,CACH,CAEL,CAAC;AAEd,CAAC;AAACC,OAAA,CAAAnB,aAAA,GAAAA,aAAA"}

package/components/Toolbar/Toolbar.d.ts

@@ -4,4 +4,4 @@ import "./Toolbar.css";
 export interface ToolbarProps {
     anchorElem?: HTMLElement;
 }
-export declare const Toolbar: ({ anchorElem }: ToolbarProps) => React.ReactElement<any, any> | null;
+export declare const Toolbar: ({ anchorElem }: ToolbarProps) => React.ReactPortal | null;

package/components/Toolbar/Toolbar.js

@@ -11,13 +11,14 @@ 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");
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 require("./Toolbar.css");
 var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
 var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _getLexicalTextSelectionState = require("../../utils/getLexicalTextSelectionState");
 var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
+var _useCurrentSelection = require("../../hooks/useCurrentSelection");
+var _getSelectedNode = require("../../utils/getSelectedNode");
 var FloatingToolbar = function FloatingToolbar(_ref) {
   var anchorElem = _ref.anchorElem,
     editor = _ref.editor;
@@ -114,74 +115,29 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
     }, action.element);
   })));
 };
-var useToolbar = function useToolbar(_ref3) {
-  var editor = _ref3.editor,
-    _ref3$anchorElem = _ref3.anchorElem,
+
+/**
+ * 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 = function Toolbar(_ref3) {
+  var _ref3$anchorElem = _ref3.anchorElem,
     anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem;
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    nodeIsText = _useRichTextEditor.nodeIsText,
-    setNodeIsText = _useRichTextEditor.setNodeIsText,
-    setActiveEditor = _useRichTextEditor.setActiveEditor,
-    setIsEditable = _useRichTextEditor.setIsEditable,
-    setTextBlockSelection = _useRichTextEditor.setTextBlockSelection;
-  var _useState = (0, _react.useState)(editor),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    toolbarActiveEditor = _useState2[0],
-    setToolbarActiveEditor = _useState2[1];
-  var updateToolbar = (0, _react.useCallback)(function () {
-    editor.getEditorState().read(function () {
-      // Should not to pop up the floating toolbar when using IME input
-      if (editor.isComposing()) {
-        return;
-      }
-      var selection = (0, _lexical.$getSelection)();
-      if ((0, _lexical.$isRangeSelection)(selection)) {
-        var selectionState = (0, _getLexicalTextSelectionState.getLexicalTextSelectionState)(toolbarActiveEditor, selection);
-        if (selectionState) {
-          var _selectionState$state;
-          setTextBlockSelection(selectionState);
-          if (selectionState.selectedText !== "" && !((_selectionState$state = selectionState.state) !== null && _selectionState$state !== void 0 && _selectionState$state.link.isSelected)) {
-            setNodeIsText(true);
-          } else {
-            setNodeIsText(false);
-          }
-        }
-      }
-      if (!(0, _lexical.$isRangeSelection)(selection)) {
-        setNodeIsText(false);
-        return;
-      }
-    });
-  }, [toolbarActiveEditor]);
-  (0, _react.useEffect)(function () {
-    document.addEventListener("selectionchange", updateToolbar);
-    return function () {
-      document.removeEventListener("selectionchange", updateToolbar);
-    };
-  }, [updateToolbar]);
-  (0, _react.useEffect)(function () {
-    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
-      updateToolbar();
-      setToolbarActiveEditor(newEditor);
-      setActiveEditor(newEditor);
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var showToolbar = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref4) {
+    var rangeSelection = _ref4.rangeSelection;
+    if (!rangeSelection) {
       return false;
-    }, _lexical.COMMAND_PRIORITY_CRITICAL);
-  }, [editor, updateToolbar]);
-  (0, _react.useEffect)(function () {
-    return (0, _utils.mergeRegister)(editor.registerEditableListener(function (editable) {
-      setIsEditable(editable);
-    }), toolbarActiveEditor.registerUpdateListener(function (_ref4) {
-      var editorState = _ref4.editorState;
-      editorState.read(function () {
-        updateToolbar();
-      });
-    }), editor.registerRootListener(function () {
-      if (editor.getRootElement() === null) {
-        setNodeIsText(false);
-      }
-    }));
-  }, [updateToolbar, editor, toolbarActiveEditor]);
-  if (!nodeIsText) {
+    }
+    return !isLinkNode(rangeSelection) && !rangeSelection.isCollapsed();
+  });
+  if (!showToolbar) {
     return null;
   }
   return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(FloatingToolbar, {
@@ -189,15 +145,6 @@ var useToolbar = function useToolbar(_ref3) {
     editor: editor
   }), anchorElem);
 };
-var Toolbar = function Toolbar(_ref5) {
-  var _ref5$anchorElem = _ref5.anchorElem,
-    anchorElem = _ref5$anchorElem === void 0 ? document.body : _ref5$anchorElem;
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
-  return useToolbar({
-    editor: editor,
-    anchorElem: anchorElem
-  });
-};
-exports.Toolbar = Toolbar;
+exports.Toolbar = Toolbar;
+
+//# sourceMappingURL=Toolbar.js.map

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_LexicalComposerContext","_getDOMRangeRect","_setFloatingElemPosition","_useRichTextEditor2","_getLexicalTextSelectionState","_LexicalEditorConfig","FloatingToolbar","_ref","anchorElem","editor","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","default","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","useToolbar","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","nodeIsText","setNodeIsText","setActiveEditor","setIsEditable","setTextBlockSelection","_useState","useState","_useState2","_slicedToArray2","toolbarActiveEditor","setToolbarActiveEditor","updateToolbar","isComposing","$isRangeSelection","selectionState","getLexicalTextSelectionState","_selectionState$state","selectedText","state","link","isSelected","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","registerEditableListener","editable","_ref4","registerRootListener","createPortal","Toolbar","_ref5","_ref5$anchorElem","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","exports"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    COMMAND_PRIORITY_CRITICAL,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { getLexicalTextSelectionState } from \"~/utils/getLexicalTextSelectionState\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\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                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-text-format-popup\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    anchorElem: HTMLElement;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText, setActiveEditor, setIsEditable, setTextBlockSelection } =\n        useRichTextEditor();\n    const [toolbarActiveEditor, setToolbarActiveEditor] = useState<LexicalEditor>(editor);\n\n    const updateToolbar = useCallback(() => {\n        editor.getEditorState().read(() => {\n            // Should not to pop up the floating toolbar when using IME input\n            if (editor.isComposing()) {\n                return;\n            }\n\n            const selection = $getSelection();\n\n            if ($isRangeSelection(selection)) {\n                const selectionState = getLexicalTextSelectionState(toolbarActiveEditor, selection);\n                if (selectionState) {\n                    setTextBlockSelection(selectionState);\n                    if (\n                        selectionState.selectedText !== \"\" &&\n                        !selectionState.state?.link.isSelected\n                    ) {\n                        setNodeIsText(true);\n                    } else {\n                        setNodeIsText(false);\n                    }\n                }\n            }\n\n            if (!$isRangeSelection(selection)) {\n                setNodeIsText(false);\n                return;\n            }\n        });\n    }, [toolbarActiveEditor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updateToolbar);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updateToolbar);\n        };\n    }, [updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setToolbarActiveEditor(newEditor);\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            }),\n            toolbarActiveEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [updateToolbar, editor, toolbarActiveEditor]);\n\n    if (!nodeIsText) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const [editor] = useLexicalComposerContext();\n    return useToolbar({ editor, anchorElem });\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_lexicalNodes","_LexicalComposerContext","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_getSelectedNode","FloatingToolbar","_ref","anchorElem","editor","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","default","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","isLinkNode","node","getSelectedNode","parent","getParent","$isLinkNode","Toolbar","_ref3","_ref3$anchorElem","body","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal","exports"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef } from \"react\";\nimport {\n    $getSelection,\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 { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\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\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\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                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-text-format-popup\">\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] = useLexicalComposerContext();\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":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAOA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,uBAAA,GAAAL,OAAA;AACAA,OAAA;AACA,IAAAM,gBAAA,GAAAN,OAAA;AACA,IAAAO,wBAAA,GAAAP,OAAA;AACA,IAAAQ,oBAAA,GAAAR,OAAA;AACA,IAAAS,oBAAA,GAAAT,OAAA;AACA,IAAAU,gBAAA,GAAAV,OAAA;AAOA,IAAMW,eAAyC,GAAG,SAA5CA,eAAyCA,CAAAC,IAAA,EAA+B;EAAA,IAAzBC,UAAU,GAAAD,IAAA,CAAVC,UAAU;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;EACnE,IAAMC,wBAAwB,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACpE,IAAAC,qBAAA,GAA4B,IAAAC,2CAAsB,EAAC,CAAC;IAA5CC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;EAEvB,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,CAAa,EAAK;IACf;AACZ;AACA;AACA;AACA;IACY,IAAIP,wBAAwB,aAAxBA,wBAAwB,eAAxBA,wBAAwB,CAAEQ,OAAO,KAAKD,CAAC,CAACE,OAAO,KAAK,CAAC,IAAIF,CAAC,CAACE,OAAO,KAAK,CAAC,CAAC,EAAE;MAC3E,IAAIT,wBAAwB,CAACQ,OAAO,CAACE,KAAK,CAACC,aAAa,KAAK,MAAM,EAAE;QACjE,IAAMC,CAAC,GAAGL,CAAC,CAACM,OAAO;QACnB,IAAMC,CAAC,GAAGP,CAAC,CAACQ,OAAO;QACnB,IAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAACN,CAAC,EAAEE,CAAC,CAAC;QAEzD,IAAI,CAACd,wBAAwB,CAACQ,OAAO,CAACW,QAAQ,CAACH,iBAAiB,CAAC,EAAE;UAC/D;UACAhB,wBAAwB,CAACQ,OAAO,CAACE,KAAK,CAACC,aAAa,GAAG,MAAM;QACjE;MACJ;IACJ;EACJ,CAAC,EACD,CAACX,wBAAwB,CAC7B,CAAC;EAED,IAAMoB,eAAe,GAAG,IAAAd,kBAAW,EAAC,YAAM;IACtC,IAAIN,wBAAwB,aAAxBA,wBAAwB,eAAxBA,wBAAwB,CAAEQ,OAAO,EAAE;MACnC,IAAIR,wBAAwB,CAACQ,OAAO,CAACE,KAAK,CAACC,aAAa,KAAK,MAAM,EAAE;QACjEX,wBAAwB,CAACQ,OAAO,CAACE,KAAK,CAACC,aAAa,GAAG,MAAM;MACjE;IACJ;EACJ,CAAC,EAAE,CAACX,wBAAwB,CAAC,CAAC;EAE9B,IAAAqB,gBAAS,EAAC,YAAM;IACZ,IAAIrB,wBAAwB,aAAxBA,wBAAwB,eAAxBA,wBAAwB,CAAEQ,OAAO,EAAE;MACnCS,QAAQ,CAACK,gBAAgB,CAAC,WAAW,EAAEjB,iBAAiB,CAAC;MACzDY,QAAQ,CAACK,gBAAgB,CAAC,SAAS,EAAEF,eAAe,CAAC;MAErD,OAAO,YAAM;QACTH,QAAQ,CAACM,mBAAmB,CAAC,WAAW,EAAElB,iBAAiB,CAAC;QAC5DY,QAAQ,CAACM,mBAAmB,CAAC,SAAS,EAAEH,eAAe,CAAC;MAC5D,CAAC;IACL;IACA;EACJ,CAAC,EAAE,CAACpB,wBAAwB,CAAC,CAAC;EAE9B,IAAMwB,+BAA+B,GAAG,IAAAlB,kBAAW,EAAC,YAAM;IACtD,IAAMmB,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;IAEjC,IAAMC,yBAAyB,GAAG3B,wBAAwB,CAACQ,OAAO;IAClE,IAAMoB,eAAe,GAAGC,MAAM,CAACC,YAAY,CAAC,CAAC;IAE7C,IAAIH,yBAAyB,KAAK,IAAI,EAAE;MACpC;IACJ;IAEA,IAAMI,WAAW,GAAGhC,MAAM,CAACiC,cAAc,CAAC,CAAC;IAC3C,IACIP,SAAS,KAAK,IAAI,IAClBG,eAAe,KAAK,IAAI,IACxB,CAACA,eAAe,CAACK,WAAW,IAC5BF,WAAW,KAAK,IAAI,IACpBA,WAAW,CAACZ,QAAQ,CAACS,eAAe,CAACM,UAAU,CAAC,EAClD;MACE,IAAMC,SAAS,GAAG,IAAAC,gCAAe,EAACR,eAAe,EAAEG,WAAW,CAAC;MAE/D,IAAAM,gDAAuB,EAACF,SAAS,EAAER,yBAAyB,EAAE7B,UAAU,CAAC;IAC7E;EACJ,CAAC,EAAE,CAACC,MAAM,EAAED,UAAU,CAAC,CAAC;EAExB,IAAAuB,gBAAS,EAAC,YAAM;IACZ,IAAMiB,YAAY,GAAGxC,UAAU,CAACyC,aAAa;IAE7C,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAA,EAAS;MACjBzC,MAAM,CAAC0C,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,YAAM;QAC/BlB,+BAA+B,CAAC,CAAC;MACrC,CAAC,CAAC;IACN,CAAC;IAEDK,MAAM,CAACP,gBAAgB,CAAC,QAAQ,EAAEkB,MAAM,CAAC;IACzC,IAAIF,YAAY,EAAE;MACdA,YAAY,CAAChB,gBAAgB,CAAC,QAAQ,EAAEkB,MAAM,CAAC;IACnD;IAEA,OAAO,YAAM;MACTX,MAAM,CAACN,mBAAmB,CAAC,QAAQ,EAAEiB,MAAM,CAAC;MAC5C,IAAIF,YAAY,EAAE;QACdA,YAAY,CAACf,mBAAmB,CAAC,QAAQ,EAAEiB,MAAM,CAAC;MACtD;IACJ,CAAC;EACL,CAAC,EAAE,CAACzC,MAAM,EAAEyB,+BAA+B,EAAE1B,UAAU,CAAC,CAAC;EAEzD,IAAAuB,gBAAS,EAAC,YAAM;IACZtB,MAAM,CAAC0C,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,YAAM;MAC/BlB,+BAA+B,CAAC,CAAC;IACrC,CAAC,CAAC;IACF,OAAO,IAAAmB,oBAAa,EAChB5C,MAAM,CAAC6C,sBAAsB,CAAC,UAAAC,KAAA,EAAqB;MAAA,IAAlBC,WAAW,GAAAD,KAAA,CAAXC,WAAW;MACxCA,WAAW,CAACJ,IAAI,CAAC,YAAM;QACnBlB,+BAA+B,CAAC,CAAC;MACrC,CAAC,CAAC;IACN,CAAC,CAAC,EAEFzB,MAAM,CAACgD,eAAe,CAClBC,iCAAwB,EACxB,YAAM;MACFxB,+BAA+B,CAAC,CAAC;MACjC,OAAO,KAAK;IAChB,CAAC,EACDyB,6BACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAAClD,MAAM,EAAEyB,+BAA+B,CAAC,CAAC;EAE7C,oBACIzC,MAAA,CAAAmE,OAAA,CAAAC,aAAA;IAAKC,GAAG,EAAEpD,wBAAyB;IAACqD,SAAS,EAAC;EAA4B,GACrEtD,MAAM,CAACuD,UAAU,CAAC,CAAC,iBAChBvE,MAAA,CAAAmE,OAAA,CAAAC,aAAA,CAAApE,MAAA,CAAAmE,OAAA,CAAAK,QAAA,QACKnD,eAAe,CAACoD,GAAG,CAAC,UAAAC,MAAM;IAAA,oBACvB1E,MAAA,CAAAmE,OAAA,CAAAC,aAAA,CAACpE,MAAA,CAAAwE,QAAQ;MAACG,GAAG,EAAED,MAAM,CAACE;IAAK,GAAEF,MAAM,CAACG,OAAkB,CAAC;EAAA,CAC1D,CACH,CAEL,CAAC;AAEd,CAAC;;AAED;AACA;AACA;AACA,SAASC,UAAUA,CAACpC,SAAyB,EAAE;EAC3C,IAAMqC,IAAI,GAAG,IAAAC,gCAAe,EAACtC,SAAS,CAAC;EACvC,IAAMuC,MAAM,GAAGF,IAAI,CAACG,SAAS,CAAC,CAAC;EAE/B,OAAO,IAAAC,yBAAW,EAACF,MAAM,CAAC,IAAI,IAAAE,yBAAW,EAACJ,IAAI,CAAC;AACnD;AAMO,IAAMK,OAAO,GAAG,SAAVA,OAAOA,CAAAC,KAAA,EAAqD;EAAA,IAAAC,gBAAA,GAAAD,KAAA,CAA/CtE,UAAU;IAAVA,UAAU,GAAAuE,gBAAA,cAAGpD,QAAQ,CAACqD,IAAI,GAAAD,gBAAA;EAChD,IAAAE,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAxB,OAAA,EAAAqB,qBAAA;IAArCxE,MAAM,GAAA0E,sBAAA;EACb,IAAME,WAAW,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC7D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,KAAK;IAChB;IAEA,OAAO,CAACjB,UAAU,CAACiB,cAAc,CAAC,IAAI,CAACA,cAAc,CAAC7C,WAAW,CAAC,CAAC;EACvE,CAAC,CAAC;EAEF,IAAI,CAAC0C,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBAAO,IAAAI,sBAAY,gBAAChG,MAAA,CAAAmE,OAAA,CAAAC,aAAA,CAACvD,eAAe;IAACE,UAAU,EAAEA,UAAW;IAACC,MAAM,EAAEA;EAAO,CAAE,CAAC,EAAED,UAAU,CAAC;AAChG,CAAC;AAACkF,OAAA,CAAAb,OAAA,GAAAA,OAAA"}

package/components/ToolbarActions/BoldAction.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.BoldAction = 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 BoldAction = function BoldAction() {
-  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),
-    isBold = _useState2[0],
-    setIsBold = _useState2[1];
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    textBlockSelection = _useRichTextEditor.textBlockSelection;
-  var isBoldSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.bold);
+  var _useCurrentSelection = (0, _useCurrentSelection2.useCurrentSelection)(),
+    rangeSelection = _useCurrentSelection.rangeSelection;
+  var isBoldSelected = rangeSelection ? rangeSelection.hasFormat("bold") : false;
   var handleClick = function handleClick() {
     editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "bold");
-    setIsBold(!isBold);
   };
-  (0, _react.useEffect)(function () {
-    setIsBold(isBoldSelected);
-  }, [isBoldSelected]);
   return /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return handleClick();
-    },
-    className: "popup-item spaced " + (isBold ? "active" : ""),
+    onClick: handleClick,
+    className: "popup-item spaced " + (isBoldSelected ? "active" : ""),
     "aria-label": "Format text as bold"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "format bold"
   }));
 };
-exports.BoldAction = BoldAction;
+exports.BoldAction = BoldAction;
+
+//# sourceMappingURL=BoldAction.js.map

package/components/ToolbarActions/BoldAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","_useRichTextEditor2","BoldAction","_textBlockSelection$s","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isBold","setIsBold","_useRichTextEditor","useRichTextEditor","textBlockSelection","isBoldSelected","state","bold","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","useEffect","createElement","onClick","className","exports"],"sources":["BoldAction.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 BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isBold, setIsBold] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isBoldSelected = !!textBlockSelection?.state?.bold;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n        setIsBold(!isBold);\n    };\n\n    useEffect(() => {\n        setIsBold(isBoldSelected);\n    }, [isBoldSelected]);\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isBold ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\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,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAAA,IAAAC,qBAAA;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,GAA+B,IAAAC,qCAAiB,EAAC,CAAC;IAA1CC,kBAAkB,GAAAF,kBAAA,CAAlBE,kBAAkB;EAC1B,IAAMC,cAAc,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,gBAAAd,qBAAA,GAAlBc,kBAAkB,CAAEE,KAAK,cAAAhB,qBAAA,eAAzBA,qBAAA,CAA2BiB,IAAI;EAExD,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBZ,MAAM,CAACa,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDT,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,IAAAW,gBAAS,EAAC,YAAM;IACZV,SAAS,CAACI,cAAc,CAAC;EAC7B,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,oBACItB,MAAA,CAAAY,OAAA,CAAAiB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAML,WAAW,CAAC,CAAC;IAAA,CAAC;IAC7BM,SAAS,EAAE,oBAAoB,IAAId,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhCjB,MAAA,CAAAY,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAA1B,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_lexical","_useCurrentSelection2","BoldAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isBoldSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["BoldAction.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 BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { rangeSelection } = useCurrentSelection();\n    const isBoldSelected = rangeSelection ? rangeSelection.hasFormat(\"bold\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isBoldSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\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,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,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIpB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAEJ,WAAY;IACrBK,SAAS,EAAE,oBAAoB,IAAIP,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhChB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAlB,UAAA,GAAAA,UAAA"}

package/components/ToolbarActions/BulletListAction.js

@@ -1,56 +1,50 @@
 "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.BulletListAction = 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 _commands = require("../../commands");
 var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _findTypographyStyleByHtmlTag = require("../../utils/findTypographyStyleByHtmlTag");
+var _lexicalTheme = require("@webiny/lexical-theme");
+var _lexicalNodes = require("@webiny/lexical-nodes");
+var _useCurrentElement2 = require("../../hooks/useCurrentElement");
 var BulletListAction = function BulletListAction() {
-  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) === "bullet";
-    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 isBullet = isList && element.getListType() === "bullet";
   var formatBulletList = function formatBulletList() {
-    if (!isActive) {
+    if (!isBullet) {
       var _findTypographyStyleB;
-      var styleId = themeEmotionMap ? (_findTypographyStyleB = (0, _findTypographyStyleByHtmlTag.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)) === null || _findTypographyStyleB === void 0 ? void 0 : _findTypographyStyleB.id : undefined;
+      var styleId = themeEmotionMap ? (_findTypographyStyleB = (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)) === null || _findTypographyStyleB === void 0 ? void 0 : _findTypographyStyleB.id : undefined;
       // will update the active state in the useEffect
-      editor.dispatchCommand(_webinyList.INSERT_UNORDERED_WEBINY_LIST_COMMAND, {
+      editor.dispatchCommand(_commands.INSERT_UNORDERED_LIST_COMMAND, {
         themeStyleId: styleId
       });
-      setIsActive(true);
     } else {
-      editor.dispatchCommand(_webinyList.REMOVE_WEBINY_LIST_COMMAND, undefined);
+      editor.dispatchCommand(_commands.REMOVE_LIST_COMMAND, undefined);
     }
   };
   return /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
       return formatBulletList();
     },
-    className: "popup-item spaced " + (isActive ? "active" : ""),
+    className: "popup-item spaced " + (isBullet ? "active" : ""),
     "aria-label": "Format text as bullet list"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "icon bullet-list"
   }));
 };
-exports.BulletListAction = BulletListAction;
+exports.BulletListAction = BulletListAction;
+
+//# sourceMappingURL=BulletListAction.js.map

package/components/ToolbarActions/BulletListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_webinyList","_useRichTextEditor2","_findTypographyStyleByHtmlTag","BulletListAction","_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","formatBulletList","_findTypographyStyleB","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_UNORDERED_WEBINY_LIST_COMMAND","themeStyleId","REMOVE_WEBINY_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    INSERT_UNORDERED_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 BulletListAction = () => {\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 === \"bullet\";\n        setIsActive(isListBulletType);\n    }, [textBlockSelection?.state?.textType, isListSelected]);\n\n    const formatBulletList = () => {\n        if (!isActive) {\n            const styleId = themeEmotionMap\n                ? findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id\n                : undefined;\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_WEBINY_LIST_COMMAND, { themeStyleId: styleId });\n            setIsActive(true);\n        } else {\n            editor.dispatchCommand(REMOVE_WEBINY_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAIA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,6BAAA,GAAAJ,OAAA;AAEO,IAAMK,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EAAA,IAAAC,qBAAA,EAAAC,sBAAA;EAClC,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,GAAgD,IAAAC,qCAAiB,EAAC,CAAC;IAA3DC,kBAAkB,GAAAF,kBAAA,CAAlBE,kBAAkB;IAAEC,eAAe,GAAAH,kBAAA,CAAfG,eAAe;EAC3C,IAAMC,cAAc,GAAGF,kBAAkB,aAAlBA,kBAAkB,wBAAAf,qBAAA,GAAlBe,kBAAkB,CAAEG,KAAK,cAAAlB,qBAAA,uBAAzBA,qBAAA,CAA2BmB,IAAI,CAACC,UAAU;EAEjE,IAAAC,gBAAS,EAAC,YAAM;IAAA,IAAAC,sBAAA;IACZ,IAAMC,gBAAgB,GAAG,CAAAR,kBAAkB,aAAlBA,kBAAkB,wBAAAO,sBAAA,GAAlBP,kBAAkB,CAAEG,KAAK,cAAAI,sBAAA,uBAAzBA,sBAAA,CAA2BE,QAAQ,MAAK,QAAQ;IACzEZ,WAAW,CAACW,gBAAgB,CAAC;EACjC,CAAC,EAAE,CAACR,kBAAkB,aAAlBA,kBAAkB,wBAAAd,sBAAA,GAAlBc,kBAAkB,CAAEG,KAAK,cAAAjB,sBAAA,uBAAzBA,sBAAA,CAA2BuB,QAAQ,EAAEP,cAAc,CAAC,CAAC;EAEzD,IAAMQ,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;IAC3B,IAAI,CAACd,QAAQ,EAAE;MAAA,IAAAe,qBAAA;MACX,IAAMC,OAAO,GAAGX,eAAe,IAAAU,qBAAA,GACzB,IAAAE,0DAA4B,EAAC,IAAI,EAAEZ,eAAe,CAAC,cAAAU,qBAAA,uBAAnDA,qBAAA,CAAqDG,EAAE,GACvDC,SAAS;MACf;MACAvB,MAAM,CAACwB,eAAe,CAACC,gDAAoC,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;MACvFf,WAAW,CAAC,IAAI,CAAC;IACrB,CAAC,MAAM;MACHL,MAAM,CAACwB,eAAe,CAACG,sCAA0B,EAAEJ,SAAS,CAAC;IACjE;EACJ,CAAC;EAED,oBACItC,MAAA,CAAAc,OAAA,CAAA6B,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMX,gBAAgB,CAAC,CAAC;IAAA,CAAC;IAClCY,SAAS,EAAE,oBAAoB,IAAI1B,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCnB,MAAA,CAAAc,OAAA,CAAA6B,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAvC,gBAAA,GAAAA,gBAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_commands","_useRichTextEditor2","_lexicalTheme","_lexicalNodes","_useCurrentElement2","BulletListAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentElement","useCurrentElement","element","_useRichTextEditor","useRichTextEditor","themeEmotionMap","isList","$isListNode","isBullet","getListType","formatBulletList","_findTypographyStyleB","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const BulletListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { element } = useCurrentElement();\n    const { themeEmotionMap } = useRichTextEditor();\n    const isList = $isListNode(element);\n\n    const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n    const formatBulletList = () => {\n        if (!isBullet) {\n            const styleId = themeEmotionMap\n                ? findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id\n                : undefined;\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AACA,IAAAM,mBAAA,GAAAN,OAAA;AAEO,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EAClC,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;EAEnC,IAAMM,QAAQ,GAAGF,MAAM,IAAKJ,OAAO,CAAcO,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;IAC3B,IAAI,CAACF,QAAQ,EAAE;MAAA,IAAAG,qBAAA;MACX,IAAMC,OAAO,GAAGP,eAAe,IAAAM,qBAAA,GACzB,IAAAE,0CAA4B,EAAC,IAAI,EAAER,eAAe,CAAC,cAAAM,qBAAA,uBAAnDA,qBAAA,CAAqDG,EAAE,GACvDC,SAAS;MACf;MACAhB,MAAM,CAACiB,eAAe,CAACC,uCAA6B,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHb,MAAM,CAACiB,eAAe,CAACG,6BAAmB,EAAEJ,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACI/B,MAAA,CAAAc,OAAA,CAAAsB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMX,gBAAgB,CAAC,CAAC;IAAA,CAAC;IAClCY,SAAS,EAAE,oBAAoB,IAAId,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCxB,MAAA,CAAAc,OAAA,CAAAsB,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAA9B,gBAAA,GAAAA,gBAAA"}

package/components/ToolbarActions/CodeHighlightAction.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.CodeHighlightAction = 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 CodeHighlightAction = function CodeHighlightAction() {
-  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),
-    isCode = _useState2[0],
-    setIsCode = _useState2[1];
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    textBlockSelection = _useRichTextEditor.textBlockSelection;
-  var isCodeSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.code);
-  (0, _react.useEffect)(function () {
-    setIsCode(isCodeSelected);
-  }, [isCodeSelected]);
+  var _useCurrentSelection = (0, _useCurrentSelection2.useCurrentSelection)(),
+    rangeSelection = _useCurrentSelection.rangeSelection;
+  var isCodeSelected = rangeSelection ? rangeSelection.hasFormat("code") : false;
   var handleClick = function handleClick() {
     editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "code");
-    setIsCode(!isCode);
   };
   return /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return handleClick();
-    },
-    className: "popup-item spaced " + (isCode ? "active" : ""),
+    onClick: handleClick,
+    className: "popup-item spaced " + (isCodeSelected ? "active" : ""),
     "aria-label": "Text code highlight"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "format code"
   }));
 };
-exports.CodeHighlightAction = CodeHighlightAction;
+exports.CodeHighlightAction = CodeHighlightAction;
+
+//# sourceMappingURL=CodeHighlightAction.js.map

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","_useRichTextEditor2","CodeHighlightAction","_textBlockSelection$s","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isCode","setIsCode","_useRichTextEditor","useRichTextEditor","textBlockSelection","isCodeSelected","state","code","useEffect","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["CodeHighlightAction.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 CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isCode, setIsCode] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isCodeSelected = !!textBlockSelection?.state?.code;\n\n    useEffect(() => {\n        setIsCode(isCodeSelected);\n    }, [isCodeSelected]);\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n        setIsCode(!isCode);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isCode ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\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,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EAAA,IAAAC,qBAAA;EACrC,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,GAA+B,IAAAC,qCAAiB,EAAC,CAAC;IAA1CC,kBAAkB,GAAAF,kBAAA,CAAlBE,kBAAkB;EAC1B,IAAMC,cAAc,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,gBAAAd,qBAAA,GAAlBc,kBAAkB,CAAEE,KAAK,cAAAhB,qBAAA,eAAzBA,qBAAA,CAA2BiB,IAAI;EAExD,IAAAC,gBAAS,EAAC,YAAM;IACZP,SAAS,CAACI,cAAc,CAAC;EAC7B,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBb,MAAM,CAACc,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDV,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACIjB,MAAA,CAAAY,OAAA,CAAAiB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,CAAC,CAAC;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAId,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhCjB,MAAA,CAAAY,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAA1B,mBAAA,GAAAA,mBAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_lexical","_useCurrentSelection2","CodeHighlightAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isCodeSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["CodeHighlightAction.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 CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { rangeSelection } = useCurrentSelection();\n    const isCodeSelected = rangeSelection ? rangeSelection.hasFormat(\"code\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isCodeSelected ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\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,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,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,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIpB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAEJ,WAAY;IACrBK,SAAS,EAAE,oBAAoB,IAAIP,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhChB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAlB,mBAAA,GAAAA,mBAAA"}

package/components/ToolbarActions/FontColorAction.js

@@ -9,11 +9,11 @@ exports.FontColorPicker = exports.FontColorAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _lexical = require("lexical");
 var _reactComposition = require("@webiny/react-composition");
 var _FontColorActionContext = require("../../context/FontColorActionContext");
-var _FontColorNode = require("../../nodes/FontColorNode");
+var _lexicalNodes = require("@webiny/lexical-nodes");
 var _getSelectedNode = require("../../utils/getSelectedNode");
+var _useCurrentSelection = require("../../hooks/useCurrentSelection");
 var FontColorPicker = (0, _reactComposition.makeComposable)("FontColorPicker", function () {
   (0, _react.useEffect)(function () {
     console.log("Default FontColorPicker, please add your own component");
@@ -36,48 +36,31 @@ var FontColorAction = function FontColorAction() {
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useState = (0, _react.useState)("#000"),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    fontColor = _useState2[0],
-    setFontColor = _useState2[1];
-  var setFontColorSelect = (0, _react.useCallback)(function (fontColorValue) {
-    setFontColor(fontColorValue);
-  }, [fontColor]);
+  var fontColor = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref2) {
+    var rangeSelection = _ref2.rangeSelection;
+    if (!rangeSelection) {
+      return "#000";
+    }
+    var node = (0, _getSelectedNode.getSelectedNode)(rangeSelection);
+    return (0, _lexicalNodes.$isFontColorNode)(node) ? node.getColorStyle().color : "#000";
+  });
   var onFontColorSelect = (0, _react.useCallback)(function (colorValue, themeColorName) {
-    setFontColorSelect(colorValue);
-    editor.dispatchCommand(_FontColorNode.ADD_FONT_COLOR_COMMAND, {
+    editor.dispatchCommand(_lexicalNodes.ADD_FONT_COLOR_COMMAND, {
       color: colorValue,
       themeColorName: themeColorName
     });
   }, []);
-  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);
-      if ((0, _FontColorNode.$isFontColorNode)(node)) {
-        var colorStyle = node.getColorStyle();
-        setFontColor(colorStyle.color);
-      }
-    });
-  }, [editor]);
-  (0, _react.useEffect)(function () {
-    document.addEventListener("selectionchange", updatePopup);
-    return function () {
-      document.removeEventListener("selectionchange", updatePopup);
-    };
-  }, [updatePopup]);
-  return /*#__PURE__*/_react.default.createElement(_FontColorActionContext.FontColorActionContext.Provider, {
-    value: {
+  var context = (0, _react.useMemo)(function () {
+    return {
       value: fontColor,
       applyColor: onFontColorSelect
-    }
+    };
+  }, [onFontColorSelect, fontColor]);
+  return /*#__PURE__*/_react.default.createElement(_FontColorActionContext.FontColorActionContext.Provider, {
+    value: context
   }, /*#__PURE__*/_react.default.createElement(FontColorPicker, null));
 };
 exports.FontColorAction = FontColorAction;
-{
-  /* Color picker dropdown settings */
-}
-FontColorAction.ColorPicker = FontActionColorPicker;
+FontColorAction.ColorPicker = FontActionColorPicker;
+
+//# sourceMappingURL=FontColorAction.js.map