@webiny/lexical-editor 5.36.2-beta.0 → 5.36.2-beta.2

package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { FontColorAction } from "../ToolbarActions/FontColorAction";
 import { TypographyAction } from "../ToolbarActions/TypographyAction";
+import { TextAlignmentAction } from "../ToolbarActions/TextAlignmentAction";
 interface LexicalEditorConfig extends React.FC<unknown> {
     FontColorAction: typeof FontColorAction;
     TypographyAction: typeof TypographyAction;
+    TextAlignmentAction: typeof TextAlignmentAction;
 }
 export declare const LexicalEditorConfig: LexicalEditorConfig;
 export {};

package/components/LexicalEditorConfig/LexicalEditorConfig.js

@@ -8,10 +8,12 @@ exports.LexicalEditorConfig = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FontColorAction = require("../ToolbarActions/FontColorAction");
 var _TypographyAction = require("../ToolbarActions/TypographyAction");
+var _TextAlignmentAction = require("../ToolbarActions/TextAlignmentAction");
 var LexicalEditorConfig = function LexicalEditorConfig(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 exports.LexicalEditorConfig = LexicalEditorConfig;
 LexicalEditorConfig.FontColorAction = _FontColorAction.FontColorAction;
-LexicalEditorConfig.TypographyAction = _TypographyAction.TypographyAction;
+LexicalEditorConfig.TypographyAction = _TypographyAction.TypographyAction;
+LexicalEditorConfig.TextAlignmentAction = _TextAlignmentAction.TextAlignmentAction;

package/components/LexicalEditorConfig/LexicalEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["LexicalEditorConfig","children","FontColorAction","TypographyAction"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nimport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\n\ninterface LexicalEditorConfig extends React.FC<unknown> {\n    FontColorAction: typeof FontColorAction;\n    TypographyAction: typeof TypographyAction;\n}\n\nexport const LexicalEditorConfig: LexicalEditorConfig = ({ children }) => {\n    return <>{children}</>;\n};\n\nLexicalEditorConfig.FontColorAction = FontColorAction;\nLexicalEditorConfig.TypographyAction = TypographyAction;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAOO,IAAMA,mBAAwC,GAAG,SAA3CA,mBAAwC,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EAC/D,oBAAO,4DAAGA,QAAQ,CAAI;AAC1B,CAAC;AAAC;AAEFD,mBAAmB,CAACE,eAAe,GAAGA,gCAAe;AACrDF,mBAAmB,CAACG,gBAAgB,GAAGA,kCAAgB"}
+{"version":3,"names":["LexicalEditorConfig","children","FontColorAction","TypographyAction","TextAlignmentAction"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nimport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\nimport { TextAlignmentAction } from \"../ToolbarActions/TextAlignmentAction\";\n\ninterface LexicalEditorConfig extends React.FC<unknown> {\n    FontColorAction: typeof FontColorAction;\n    TypographyAction: typeof TypographyAction;\n    TextAlignmentAction: typeof TextAlignmentAction;\n}\n\nexport const LexicalEditorConfig: LexicalEditorConfig = ({ children }) => {\n    return <>{children}</>;\n};\n\nLexicalEditorConfig.FontColorAction = FontColorAction;\nLexicalEditorConfig.TypographyAction = TypographyAction;\nLexicalEditorConfig.TextAlignmentAction = TextAlignmentAction;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAQO,IAAMA,mBAAwC,GAAG,SAA3CA,mBAAwC,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EAC/D,oBAAO,4DAAGA,QAAQ,CAAI;AAC1B,CAAC;AAAC;AAEFD,mBAAmB,CAACE,eAAe,GAAGA,gCAAe;AACrDF,mBAAmB,CAACG,gBAAgB,GAAGA,kCAAgB;AACvDH,mBAAmB,CAACI,mBAAmB,GAAGA,wCAAmB"}

package/components/Toolbar/Toolbar.css

@@ -169,6 +169,18 @@ i.right-align {
   background-image: url("../../images/icons/text-right.svg");
 }
 
+i.indent {
+  background-image: url("../../images/icons/indent.svg");
+}
+
+i.outdent {
+  background-image: url("../../images/icons/outdent.svg");
+}
+
+i.justify-align {
+  background-image: url("../../images/icons/justify.svg");
+}
+
 i.chevron-down {
   background-color: transparent;
   background-size: contain;

package/components/Toolbar/Toolbar.js

@@ -10,15 +10,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _lexical = require("lexical");
 var _reactComposition = require("@webiny/react-composition");
-var _link = require("@lexical/link");
 var _reactDom = require("react-dom");
 var _utils = require("@lexical/utils");
-var _code = require("@lexical/code");
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 require("./Toolbar.css");
 var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
 var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
-var _getSelectedNode = require("../../utils/getSelectedNode");
 var _useRichTextEditor3 = require("../../hooks/useRichTextEditor");
 var _getLexicalTextSelectionState = require("../../utils/getLexicalTextSelectionState");
 var FloatingToolbar = function FloatingToolbar(_ref) {
@@ -29,17 +26,48 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
   var popupCharStylesEditorRef = (0, _react.useRef)(null);
   var _useRichTextEditor = (0, _useRichTextEditor3.useRichTextEditor)(),
     toolbarType = _useRichTextEditor.toolbarType,
-    setToolbarType = _useRichTextEditor.setToolbarType,
-    setTextBlockSelection = _useRichTextEditor.setTextBlockSelection;
-  var _useState = (0, _react.useState)(editor),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeEditor = _useState2[0],
-    setActiveEditor = _useState2[1];
+    setToolbarType = _useRichTextEditor.setToolbarType;
   (0, _react.useEffect)(function () {
     if (toolbarType !== type) {
       setToolbarType(type);
     }
   }, [type]);
+  var mouseMoveListener = (0, _react.useCallback)(function (e) {
+    /* Indicates which mouse button(s) was pressed.
+     / 1 = mouse left button
+     / 3 = mouse left and right button in the same time
+     / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+     */
+    if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current && (e.buttons === 1 || e.buttons === 3)) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
+        var x = e.clientX;
+        var y = e.clientY;
+        var elementUnderMouse = document.elementFromPoint(x, y);
+        if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+          // Mouse is not over the target element => not a normal click, but probably a drag
+          popupCharStylesEditorRef.current.style.pointerEvents = "none";
+        }
+      }
+    }
+  }, [popupCharStylesEditorRef]);
+  var mouseUpListener = (0, _react.useCallback)(function () {
+    if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
+        popupCharStylesEditorRef.current.style.pointerEvents = "auto";
+      }
+    }
+  }, [popupCharStylesEditorRef]);
+  (0, _react.useEffect)(function () {
+    if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current) {
+      document.addEventListener("mousemove", mouseMoveListener);
+      document.addEventListener("mouseup", mouseUpListener);
+      return function () {
+        document.removeEventListener("mousemove", mouseMoveListener);
+        document.removeEventListener("mouseup", mouseUpListener);
+      };
+    }
+    return;
+  }, [popupCharStylesEditorRef]);
   var updateTextFormatFloatingToolbar = (0, _react.useCallback)(function () {
     var selection = (0, _lexical.$getSelection)();
     var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
@@ -47,21 +75,8 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
     if (popupCharStylesEditorElem === null) {
       return;
     }
-    var isLink = false;
-    if ((0, _lexical.$isRangeSelection)(selection)) {
-      var selectionState = (0, _getLexicalTextSelectionState.getLexicalTextSelectionState)(activeEditor, selection);
-      if (selectionState) {
-        setTextBlockSelection(selectionState);
-      }
-      var node = (0, _getSelectedNode.getSelectedNode)(selection);
-      // Update links
-      var parent = node.getParent();
-      if ((0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node)) {
-        isLink = true;
-      }
-    }
     var rootElement = editor.getRootElement();
-    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && !isLink) {
+    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
       var rangeRect = (0, _getDOMRangeRect.getDOMRangeRect)(nativeSelection, rootElement);
       (0, _setFloatingElemPosition.setFloatingElemPosition)(rangeRect, popupCharStylesEditorElem, anchorElem);
     }
@@ -93,9 +108,8 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
       editorState.read(function () {
         updateTextFormatFloatingToolbar();
       });
-    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
+    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
       updateTextFormatFloatingToolbar();
-      setActiveEditor(newEditor);
       return false;
     }, _lexical.COMMAND_PRIORITY_LOW));
   }, [editor, updateTextFormatFloatingToolbar]);
@@ -112,46 +126,66 @@ var useToolbar = function useToolbar(_ref3) {
     children = _ref3.children;
   var _useRichTextEditor2 = (0, _useRichTextEditor3.useRichTextEditor)(),
     nodeIsText = _useRichTextEditor2.nodeIsText,
-    setNodeIsText = _useRichTextEditor2.setNodeIsText;
-  var updatePopup = (0, _react.useCallback)(function () {
+    setNodeIsText = _useRichTextEditor2.setNodeIsText,
+    setActiveEditor = _useRichTextEditor2.setActiveEditor,
+    setIsEditable = _useRichTextEditor2.setIsEditable,
+    setTextBlockSelection = _useRichTextEditor2.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)();
-      var nativeSelection = window.getSelection();
-      var rootElement = editor.getRootElement();
-      if (nativeSelection !== null && (!(0, _lexical.$isRangeSelection)(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))) {
-        setNodeIsText(false);
-        return;
+      if ((0, _lexical.$isRangeSelection)(selection)) {
+        var selectionState = (0, _getLexicalTextSelectionState.getLexicalTextSelectionState)(toolbarActiveEditor, selection);
+        if (selectionState) {
+          setTextBlockSelection(selectionState);
+          if (selectionState.selectedText !== "") {
+            setNodeIsText(true);
+          } else {
+            setNodeIsText(false);
+          }
+        }
       }
       if (!(0, _lexical.$isRangeSelection)(selection)) {
-        return;
-      }
-      var node = (0, _getSelectedNode.getSelectedNode)(selection);
-      if (!(0, _code.$isCodeHighlightNode)(selection.anchor.getNode()) && selection.getTextContent() !== "") {
-        setNodeIsText((0, _lexical.$isTextNode)(node));
-      } else {
         setNodeIsText(false);
+        return;
       }
     });
-  }, [editor]);
+  }, [toolbarActiveEditor]);
   (0, _react.useEffect)(function () {
-    document.addEventListener("selectionchange", updatePopup);
+    document.addEventListener("selectionchange", updateToolbar);
     return function () {
-      document.removeEventListener("selectionchange", updatePopup);
+      document.removeEventListener("selectionchange", updateToolbar);
     };
-  }, [updatePopup]);
+  }, [updateToolbar]);
+  (0, _react.useEffect)(function () {
+    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
+      updateToolbar();
+      setToolbarActiveEditor(newEditor);
+      setActiveEditor(newEditor);
+      return false;
+    }, _lexical.COMMAND_PRIORITY_CRITICAL);
+  }, [editor, updateToolbar]);
   (0, _react.useEffect)(function () {
-    return (0, _utils.mergeRegister)(editor.registerUpdateListener(function () {
-      updatePopup();
+    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);
       }
     }));
-  }, [editor, updatePopup]);
+  }, [updateToolbar, editor, toolbarActiveEditor]);
   if (!nodeIsText) {
     return null;
   }
@@ -164,10 +198,10 @@ var useToolbar = function useToolbar(_ref3) {
 /**
  * @description Main toolbar container
  */
-var Toolbar = (0, _reactComposition.makeComposable)("Toolbar", function (_ref4) {
-  var anchorElem = _ref4.anchorElem,
-    type = _ref4.type,
-    children = _ref4.children;
+var Toolbar = (0, _reactComposition.makeComposable)("Toolbar", function (_ref5) {
+  var anchorElem = _ref5.anchorElem,
+    type = _ref5.type,
+    children = _ref5.children;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["FloatingToolbar","children","type","anchorElem","editor","popupCharStylesEditorRef","useRef","useRichTextEditor","toolbarType","setToolbarType","setTextBlockSelection","useState","activeEditor","setActiveEditor","useEffect","updateTextFormatFloatingToolbar","useCallback","selection","$getSelection","popupCharStylesEditorElem","current","nativeSelection","window","getSelection","isLink","$isRangeSelection","selectionState","getLexicalTextSelectionState","node","getSelectedNode","parent","getParent","$isLinkNode","rootElement","getRootElement","isCollapsed","contains","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","editorState","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_LOW","isEditable","useToolbar","document","body","nodeIsText","setNodeIsText","updatePopup","isComposing","$isCodeHighlightNode","anchor","getNode","getTextContent","$isTextNode","registerRootListener","createPortal","Toolbar","makeComposable","useLexicalComposerContext"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isTextNode,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isCodeHighlightNode } from \"@lexical/code\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { ToolbarType } from \"~/types\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { getLexicalTextSelectionState } from \"~/utils/getLexicalTextSelectionState\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, type, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarType, setToolbarType, setTextBlockSelection } = useRichTextEditor();\n    const [activeEditor, setActiveEditor] = useState(editor);\n\n    useEffect(() => {\n        if (toolbarType !== type) {\n            setToolbarType(type);\n        }\n    }, [type]);\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        let isLink = false;\n        if ($isRangeSelection(selection)) {\n            const selectionState = getLexicalTextSelectionState(activeEditor, selection);\n            if (selectionState) {\n                setTextBlockSelection(selectionState);\n            }\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                isLink = true;\n            }\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            !isLink\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\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            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                (_payload, newEditor) => {\n                    updateTextFormatFloatingToolbar();\n                    setActiveEditor(newEditor);\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() && children}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body,\n    type,\n    children\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText } = useRichTextEditor();\n\n    const updatePopup = 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            const selection = $getSelection();\n            const nativeSelection = window.getSelection();\n            const rootElement = editor.getRootElement();\n\n            if (\n                nativeSelection !== null &&\n                (!$isRangeSelection(selection) ||\n                    rootElement === null ||\n                    !rootElement.contains(nativeSelection.anchorNode))\n            ) {\n                setNodeIsText(false);\n                return;\n            }\n\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n\n            const node = getSelectedNode(selection);\n            if (\n                !$isCodeHighlightNode(selection.anchor.getNode()) &&\n                selection.getTextContent() !== \"\"\n            ) {\n                setNodeIsText($isTextNode(node));\n            } else {\n                setNodeIsText(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    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(() => {\n                updatePopup();\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [editor, updatePopup]);\n\n    if (!nodeIsText) {\n        return null;\n    }\n\n    return createPortal(\n        <FloatingToolbar type={type} anchorElem={anchorElem} editor={editor}>\n            {children}\n        </FloatingToolbar>,\n        anchorElem\n    );\n};\n\nexport interface ToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\n/**\n * @description Main toolbar container\n */\nexport const Toolbar = makeComposable<ToolbarProps>(\n    \"Toolbar\",\n    ({ anchorElem, type, children }): JSX.Element | null => {\n        const [editor] = useLexicalComposerContext();\n        return useToolbar({ editor, anchorElem, type, children });\n    }\n);\n"],"mappings":"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"}
+{"version":3,"names":["FloatingToolbar","children","type","anchorElem","editor","popupCharStylesEditorRef","useRef","useRichTextEditor","toolbarType","setToolbarType","useEffect","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","isEditable","useToolbar","body","nodeIsText","setNodeIsText","setActiveEditor","setIsEditable","setTextBlockSelection","useState","toolbarActiveEditor","setToolbarActiveEditor","updateToolbar","isComposing","$isRangeSelection","selectionState","getLexicalTextSelectionState","selectedText","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","registerEditableListener","editable","registerRootListener","createPortal","Toolbar","makeComposable","useLexicalComposerContext"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, 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 { makeComposable } from \"@webiny/react-composition\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { ToolbarType } from \"~/types\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { getLexicalTextSelectionState } from \"~/utils/getLexicalTextSelectionState\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, type, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarType, setToolbarType } = useRichTextEditor();\n\n    useEffect(() => {\n        if (toolbarType !== type) {\n            setToolbarType(type);\n        }\n    }, [type]);\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() && children}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body,\n    type,\n    children\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText, setActiveEditor, setIsEditable, setTextBlockSelection } =\n        useRichTextEditor();\n\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 (selectionState.selectedText !== \"\") {\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(\n        <FloatingToolbar type={type} anchorElem={anchorElem} editor={editor}>\n            {children}\n        </FloatingToolbar>,\n        anchorElem\n    );\n};\n\nexport interface ToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\n/**\n * @description Main toolbar container\n */\nexport const Toolbar = makeComposable<ToolbarProps>(\n    \"Toolbar\",\n    ({ anchorElem, type, children }): JSX.Element | null => {\n        const [editor] = useLexicalComposerContext();\n        return useToolbar({ editor, anchorElem, type, children });\n    }\n);\n"],"mappings":";;;;;;;;;AAAA;AACA;AAQA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AASA,IAAMA,eAAyC,GAAG,SAA5CA,eAAyC,OAA+C;EAAA,IAAzCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,UAAU,QAAVA,UAAU;IAAEC,MAAM,QAANA,MAAM;EACnF,IAAMC,wBAAwB,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACpE,yBAAwC,IAAAC,qCAAiB,GAAE;IAAnDC,WAAW,sBAAXA,WAAW;IAAEC,cAAc,sBAAdA,cAAc;EAEnC,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAIF,WAAW,KAAKN,IAAI,EAAE;MACtBO,cAAc,CAACP,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAMS,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,CAAa,EAAK;IACf;AACZ;AACA;AACA;AACA;IACY,IAAIR,wBAAwB,aAAxBA,wBAAwB,eAAxBA,wBAAwB,CAAES,OAAO,KAAKD,CAAC,CAACE,OAAO,KAAK,CAAC,IAAIF,CAAC,CAACE,OAAO,KAAK,CAAC,CAAC,EAAE;MAC3E,IAAIV,wBAAwB,CAACS,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,CAACf,wBAAwB,CAACS,OAAO,CAACW,QAAQ,CAACH,iBAAiB,CAAC,EAAE;UAC/D;UACAjB,wBAAwB,CAACS,OAAO,CAACE,KAAK,CAACC,aAAa,GAAG,MAAM;QACjE;MACJ;IACJ;EACJ,CAAC,EACD,CAACZ,wBAAwB,CAAC,CAC7B;EAED,IAAMqB,eAAe,GAAG,IAAAd,kBAAW,EAAC,YAAM;IACtC,IAAIP,wBAAwB,aAAxBA,wBAAwB,eAAxBA,wBAAwB,CAAES,OAAO,EAAE;MACnC,IAAIT,wBAAwB,CAACS,OAAO,CAACE,KAAK,CAACC,aAAa,KAAK,MAAM,EAAE;QACjEZ,wBAAwB,CAACS,OAAO,CAACE,KAAK,CAACC,aAAa,GAAG,MAAM;MACjE;IACJ;EACJ,CAAC,EAAE,CAACZ,wBAAwB,CAAC,CAAC;EAE9B,IAAAK,gBAAS,EAAC,YAAM;IACZ,IAAIL,wBAAwB,aAAxBA,wBAAwB,eAAxBA,wBAAwB,CAAES,OAAO,EAAE;MACnCS,QAAQ,CAACI,gBAAgB,CAAC,WAAW,EAAEhB,iBAAiB,CAAC;MACzDY,QAAQ,CAACI,gBAAgB,CAAC,SAAS,EAAED,eAAe,CAAC;MAErD,OAAO,YAAM;QACTH,QAAQ,CAACK,mBAAmB,CAAC,WAAW,EAAEjB,iBAAiB,CAAC;QAC5DY,QAAQ,CAACK,mBAAmB,CAAC,SAAS,EAAEF,eAAe,CAAC;MAC5D,CAAC;IACL;IACA;EACJ,CAAC,EAAE,CAACrB,wBAAwB,CAAC,CAAC;EAE9B,IAAMwB,+BAA+B,GAAG,IAAAjB,kBAAW,EAAC,YAAM;IACtD,IAAMkB,SAAS,GAAG,IAAAC,sBAAa,GAAE;IAEjC,IAAMC,yBAAyB,GAAG3B,wBAAwB,CAACS,OAAO;IAClE,IAAMmB,eAAe,GAAGC,MAAM,CAACC,YAAY,EAAE;IAE7C,IAAIH,yBAAyB,KAAK,IAAI,EAAE;MACpC;IACJ;IAEA,IAAMI,WAAW,GAAGhC,MAAM,CAACiC,cAAc,EAAE;IAC3C,IACIP,SAAS,KAAK,IAAI,IAClBG,eAAe,KAAK,IAAI,IACxB,CAACA,eAAe,CAACK,WAAW,IAC5BF,WAAW,KAAK,IAAI,IACpBA,WAAW,CAACX,QAAQ,CAACQ,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,IAAAO,gBAAS,EAAC,YAAM;IACZ,IAAMiC,YAAY,GAAGxC,UAAU,CAACyC,aAAa;IAE7C,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;MACjBzC,MAAM,CAAC0C,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;QAC/BlB,+BAA+B,EAAE;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,IAAAO,gBAAS,EAAC,YAAM;IACZN,MAAM,CAAC0C,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;MAC/BlB,+BAA+B,EAAE;IACrC,CAAC,CAAC;IACF,OAAO,IAAAmB,oBAAa,EAChB5C,MAAM,CAAC6C,sBAAsB,CAAC,iBAAqB;MAAA,IAAlBC,WAAW,SAAXA,WAAW;MACxCA,WAAW,CAACH,IAAI,CAAC,YAAM;QACnBlB,+BAA+B,EAAE;MACrC,CAAC,CAAC;IACN,CAAC,CAAC,EAEFzB,MAAM,CAAC+C,eAAe,CAClBC,iCAAwB,EACxB,YAAM;MACFvB,+BAA+B,EAAE;MACjC,OAAO,KAAK;IAChB,CAAC,EACDwB,6BAAoB,CACvB,CACJ;EACL,CAAC,EAAE,CAACjD,MAAM,EAAEyB,+BAA+B,CAAC,CAAC;EAE7C,oBACI;IAAK,GAAG,EAAExB,wBAAyB;IAAC,SAAS,EAAC;EAA4B,GACrED,MAAM,CAACkD,UAAU,EAAE,IAAIrD,QAAQ,CAC9B;AAEd,CAAC;AASD,IAAMsD,UAA+B,GAAG,SAAlCA,UAA+B,QAKX;EAAA,IAJtBnD,MAAM,SAANA,MAAM;IAAA,yBACND,UAAU;IAAVA,UAAU,iCAAGoB,QAAQ,CAACiC,IAAI;IAC1BtD,IAAI,SAAJA,IAAI;IACJD,QAAQ,SAARA,QAAQ;EAER,0BACI,IAAAM,qCAAiB,GAAE;IADfkD,UAAU,uBAAVA,UAAU;IAAEC,aAAa,uBAAbA,aAAa;IAAEC,eAAe,uBAAfA,eAAe;IAAEC,aAAa,uBAAbA,aAAa;IAAEC,qBAAqB,uBAArBA,qBAAqB;EAGxF,gBAAsD,IAAAC,eAAQ,EAAgB1D,MAAM,CAAC;IAAA;IAA9E2D,mBAAmB;IAAEC,sBAAsB;EAElD,IAAMC,aAAa,GAAG,IAAArD,kBAAW,EAAC,YAAM;IACpCR,MAAM,CAAC0C,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;MAC/B;MACA,IAAI3C,MAAM,CAAC8D,WAAW,EAAE,EAAE;QACtB;MACJ;MAEA,IAAMpC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MAEjC,IAAI,IAAAoC,0BAAiB,EAACrC,SAAS,CAAC,EAAE;QAC9B,IAAMsC,cAAc,GAAG,IAAAC,0DAA4B,EAACN,mBAAmB,EAAEjC,SAAS,CAAC;QACnF,IAAIsC,cAAc,EAAE;UAChBP,qBAAqB,CAACO,cAAc,CAAC;UACrC,IAAIA,cAAc,CAACE,YAAY,KAAK,EAAE,EAAE;YACpCZ,aAAa,CAAC,IAAI,CAAC;UACvB,CAAC,MAAM;YACHA,aAAa,CAAC,KAAK,CAAC;UACxB;QACJ;MACJ;MAEA,IAAI,CAAC,IAAAS,0BAAiB,EAACrC,SAAS,CAAC,EAAE;QAC/B4B,aAAa,CAAC,KAAK,CAAC;QACpB;MACJ;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACK,mBAAmB,CAAC,CAAC;EAEzB,IAAArD,gBAAS,EAAC,YAAM;IACZa,QAAQ,CAACI,gBAAgB,CAAC,iBAAiB,EAAEsC,aAAa,CAAC;IAC3D,OAAO,YAAM;MACT1C,QAAQ,CAACK,mBAAmB,CAAC,iBAAiB,EAAEqC,aAAa,CAAC;IAClE,CAAC;EACL,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,IAAAvD,gBAAS,EAAC,YAAM;IACZ,OAAON,MAAM,CAAC+C,eAAe,CACzBC,iCAAwB,EACxB,UAACmB,QAAQ,EAAEC,SAAS,EAAK;MACrBP,aAAa,EAAE;MACfD,sBAAsB,CAACQ,SAAS,CAAC;MACjCb,eAAe,CAACa,SAAS,CAAC;MAC1B,OAAO,KAAK;IAChB,CAAC,EACDC,kCAAyB,CAC5B;EACL,CAAC,EAAE,CAACrE,MAAM,EAAE6D,aAAa,CAAC,CAAC;EAE3B,IAAAvD,gBAAS,EAAC,YAAM;IACZ,OAAO,IAAAsC,oBAAa,EAChB5C,MAAM,CAACsE,wBAAwB,CAAC,UAAAC,QAAQ,EAAI;MACxCf,aAAa,CAACe,QAAQ,CAAC;IAC3B,CAAC,CAAC,EACFZ,mBAAmB,CAACd,sBAAsB,CAAC,iBAAqB;MAAA,IAAlBC,WAAW,SAAXA,WAAW;MACrDA,WAAW,CAACH,IAAI,CAAC,YAAM;QACnBkB,aAAa,EAAE;MACnB,CAAC,CAAC;IACN,CAAC,CAAC,EACF7D,MAAM,CAACwE,oBAAoB,CAAC,YAAM;MAC9B,IAAIxE,MAAM,CAACiC,cAAc,EAAE,KAAK,IAAI,EAAE;QAClCqB,aAAa,CAAC,KAAK,CAAC;MACxB;IACJ,CAAC,CAAC,CACL;EACL,CAAC,EAAE,CAACO,aAAa,EAAE7D,MAAM,EAAE2D,mBAAmB,CAAC,CAAC;EAEhD,IAAI,CAACN,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,oBAAO,IAAAoB,sBAAY,gBACf,6BAAC,eAAe;IAAC,IAAI,EAAE3E,IAAK;IAAC,UAAU,EAAEC,UAAW;IAAC,MAAM,EAAEC;EAAO,GAC/DH,QAAQ,CACK,EAClBE,UAAU,CACb;AACL,CAAC;AAQD;AACA;AACA;AACO,IAAM2E,OAAO,GAAG,IAAAC,gCAAc,EACjC,SAAS,EACT,iBAAwD;EAAA,IAArD5E,UAAU,SAAVA,UAAU;IAAED,IAAI,SAAJA,IAAI;IAAED,QAAQ,SAARA,QAAQ;EACzB,4BAAiB,IAAA+E,iDAAyB,GAAE;IAAA;IAArC5E,MAAM;EACb,OAAOmD,UAAU,CAAC;IAAEnD,MAAM,EAANA,MAAM;IAAED,UAAU,EAAVA,UAAU;IAAED,IAAI,EAAJA,IAAI;IAAED,QAAQ,EAARA;EAAS,CAAC,CAAC;AAC7D,CAAC,CACJ;AAAC"}

package/components/ToolbarActions/QuoteAction.js

@@ -23,7 +23,8 @@ var QuoteAction = function QuoteAction() {
     setIsActive = _useState2[1];
   var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
     textBlockSelection = _useRichTextEditor.textBlockSelection,
-    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
+    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);
   var formatText = function formatText() {
     if (!isActive) {
@@ -37,7 +38,7 @@ var QuoteAction = function QuoteAction() {
   };
   (0, _react.useEffect)(function () {
     setIsActive(isQuoteSelected);
-  }, [isQuoteSelected]);
+  }, [isQuoteSelected, activeEditor]);
   return /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
       return formatText();

package/components/ToolbarActions/QuoteAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["QuoteAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","themeEmotionMap","isQuoteSelected","state","quote","isSelected","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","useEffect"],"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 } = 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]);\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;AACA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,GAAS;EAAA;EAC7B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,QAAQ;IAAEC,WAAW;EAC5B,yBAAgD,IAAAC,qCAAiB,GAAE;IAA3DC,kBAAkB,sBAAlBA,kBAAkB;IAAEC,eAAe,sBAAfA,eAAe;EAC3C,IAAMC,eAAe,GAAG,CAAC,EAACF,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEG,KAAK,kDAAzB,sBAA2BC,KAAK,CAACC,UAAU;EAErE,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAI,CAACT,QAAQ,EAAE;MACX;MACA,IAAMU,gBAAgB,GAAG,OAAO;MAChC,IAAMC,cAAc,GAAGP,eAAe,IAAIA,eAAe,CAACM,gBAAgB,CAAC;MAC3E,IAAAE,4BAAa,EAACd,MAAM,EAAEa,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpE;IACJ;IACA,IAAAC,oCAAiB,EAAChB,MAAM,CAAC;EAC7B,CAAC;EAED,IAAAiB,gBAAS,EAAC,YAAM;IACZd,WAAW,CAACI,eAAe,CAAC;EAChC,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,oBACI;IACI,OAAO,EAAE;MAAA,OAAMI,UAAU,EAAE;IAAA,CAAC;IAC5B,SAAS,EAAE,aAAa,IAAIT,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IACtD,cAAW;EAAsB,gBAEjC;IAAG,SAAS,EAAC;EAAY,EAAG,CACvB;AAEjB,CAAC;AAAC"}
+{"version":3,"names":["QuoteAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","themeEmotionMap","activeEditor","isQuoteSelected","state","quote","isSelected","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","useEffect"],"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;AACA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,GAAS;EAAA;EAC7B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,QAAQ;IAAEC,WAAW;EAC5B,yBAA8D,IAAAC,qCAAiB,GAAE;IAAzEC,kBAAkB,sBAAlBA,kBAAkB;IAAEC,eAAe,sBAAfA,eAAe;IAAEC,YAAY,sBAAZA,YAAY;EACzD,IAAMC,eAAe,GAAG,CAAC,EAACH,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEI,KAAK,kDAAzB,sBAA2BC,KAAK,CAACC,UAAU;EAErE,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAI,CAACV,QAAQ,EAAE;MACX;MACA,IAAMW,gBAAgB,GAAG,OAAO;MAChC,IAAMC,cAAc,GAAGR,eAAe,IAAIA,eAAe,CAACO,gBAAgB,CAAC;MAC3E,IAAAE,4BAAa,EAACf,MAAM,EAAEc,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpE;IACJ;IACA,IAAAC,oCAAiB,EAACjB,MAAM,CAAC;EAC7B,CAAC;EAED,IAAAkB,gBAAS,EAAC,YAAM;IACZf,WAAW,CAACK,eAAe,CAAC;EAChC,CAAC,EAAE,CAACA,eAAe,EAAED,YAAY,CAAC,CAAC;EAEnC,oBACI;IACI,OAAO,EAAE;MAAA,OAAMK,UAAU,EAAE;IAAA,CAAC;IAC5B,SAAS,EAAE,aAAa,IAAIV,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IACtD,cAAW;EAAsB,gBAEjC;IAAG,SAAS,EAAC;EAAY,EAAG,CACvB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/TextAlignmentAction.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const BaseTextAlignmentDropDown: import("@webiny/react-composition").ComposableFC<unknown>;
+interface TextAlignmentActionDropdownProps {
+    element: JSX.Element;
+}
+declare const TextAlignmentActionDropDown: React.FC<TextAlignmentActionDropdownProps>;
+export interface TextAlignmentAction extends React.FC<unknown> {
+    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;
+}
+export declare const TextAlignmentAction: TextAlignmentAction;
+export {};

package/components/ToolbarActions/TextAlignmentAction.js

@@ -0,0 +1,70 @@
+"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.TextAlignmentAction = exports.BaseTextAlignmentDropDown = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lexical = require("lexical");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _reactComposition = require("@webiny/react-composition");
+var _TextAlignmentActionContextProps = require("../../context/TextAlignmentActionContextProps");
+/*
+ * Base text alignment dropdown composable component.
+ * Note: To add a custom dropdown component use @see LexicalEditorConfig API.
+ */
+var BaseTextAlignmentDropDown = (0, _reactComposition.makeComposable)("BaseTextAlignmentDropDown", function () {
+  (0, _react.useEffect)(function () {
+    console.log("Default BaseTextAlignmentDropDown, please add your own component");
+  }, []);
+  return null;
+});
+exports.BaseTextAlignmentDropDown = BaseTextAlignmentDropDown;
+var TextAlignmentActionDropDown = function TextAlignmentActionDropDown(_ref) {
+  var element = _ref.element;
+  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+    component: BaseTextAlignmentDropDown,
+    with: function _with() {
+      return function () {
+        return element;
+      };
+    }
+  });
+};
+var TextAlignmentAction = function TextAlignmentAction() {
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    activeEditor = _useRichTextEditor.activeEditor;
+  var _useState = (0, _react.useState)(""),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    alignmentValue = _useState2[0],
+    setAlignmentValue = _useState2[1];
+  var applyTextAlignment = function applyTextAlignment(value) {
+    if (activeEditor) {
+      activeEditor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, value);
+      setAlignmentValue(value);
+    }
+  };
+  var outdentText = function outdentText() {
+    if (activeEditor) {
+      activeEditor.dispatchCommand(_lexical.OUTDENT_CONTENT_COMMAND, undefined);
+    }
+  };
+  var indentText = function indentText() {
+    if (activeEditor) {
+      activeEditor.dispatchCommand(_lexical.INDENT_CONTENT_COMMAND, undefined);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_TextAlignmentActionContextProps.TextAlignmentActionContext.Provider, {
+    value: {
+      value: alignmentValue,
+      applyTextAlignment: applyTextAlignment,
+      outdentText: outdentText,
+      indentText: indentText
+    }
+  }, /*#__PURE__*/_react.default.createElement(BaseTextAlignmentDropDown, null));
+};
+exports.TextAlignmentAction = TextAlignmentAction;
+TextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;

package/components/ToolbarActions/TextAlignmentAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseTextAlignmentDropDown","makeComposable","useEffect","console","log","TextAlignmentActionDropDown","element","TextAlignmentAction","useRichTextEditor","activeEditor","useState","alignmentValue","setAlignmentValue","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport {\n    ElementFormatType,\n    FORMAT_ELEMENT_COMMAND,\n    INDENT_CONTENT_COMMAND,\n    OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeComposable(\n    \"BaseTextAlignmentDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TextAlignmentActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TextAlignmentActionDropDown: React.FC<TextAlignmentActionDropdownProps> = ({\n    element\n}): JSX.Element => {\n    return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport interface TextAlignmentAction extends React.FC<unknown> {\n    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n}\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n    const { activeEditor } = useRichTextEditor();\n    const [alignmentValue, setAlignmentValue] = useState<ElementFormatType>(\"\");\n    const applyTextAlignment = (value: ElementFormatType) => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n            setAlignmentValue(value);\n        }\n    };\n\n    const outdentText = () => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n        }\n    };\n\n    const indentText = () => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <TextAlignmentActionContext.Provider\n            value={{ value: alignmentValue, applyTextAlignment, outdentText, indentText }}\n        >\n            <BaseTextAlignmentDropDown />\n        </TextAlignmentActionContext.Provider>\n    );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":";;;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AAEA;AACA;AACA;AACA;AACO,IAAMA,yBAAyB,GAAG,IAAAC,gCAAc,EACnD,2BAA2B,EAC3B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CACJ;AAAC;AAMF,IAAMC,2BAAuE,GAAG,SAA1EA,2BAAuE,OAE1D;EAAA,IADfC,OAAO,QAAPA,OAAO;EAEP,oBAAO,6BAAC,yBAAO;IAAC,SAAS,EAAEN,yBAA0B;IAAC,IAAI,EAAE;MAAA,OAAM;QAAA,OAAMM,OAAO;MAAA;IAAA;EAAC,EAAG;AACvF,CAAC;AAMM,IAAMC,mBAAwC,GAAG,SAA3CA,mBAAwC,GAAS;EAC1D,yBAAyB,IAAAC,qCAAiB,GAAE;IAApCC,YAAY,sBAAZA,YAAY;EACpB,gBAA4C,IAAAC,eAAQ,EAAoB,EAAE,CAAC;IAAA;IAApEC,cAAc;IAAEC,iBAAiB;EACxC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAwB,EAAK;IACrD,IAAIL,YAAY,EAAE;MACdA,YAAY,CAACM,eAAe,CAACC,+BAAsB,EAAEF,KAAK,CAAC;MAC3DF,iBAAiB,CAACE,KAAK,CAAC;IAC5B;EACJ,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtB,IAAIR,YAAY,EAAE;MACdA,YAAY,CAACM,eAAe,CAACG,gCAAuB,EAAEC,SAAS,CAAC;IACpE;EACJ,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAIX,YAAY,EAAE;MACdA,YAAY,CAACM,eAAe,CAACM,+BAAsB,EAAEF,SAAS,CAAC;IACnE;EACJ,CAAC;EAED,oBACI,6BAAC,2DAA0B,CAAC,QAAQ;IAChC,KAAK,EAAE;MAAEL,KAAK,EAAEH,cAAc;MAAEE,kBAAkB,EAAlBA,kBAAkB;MAAEI,WAAW,EAAXA,WAAW;MAAEG,UAAU,EAAVA;IAAW;EAAE,gBAE9E,6BAAC,yBAAyB,OAAG,CACK;AAE9C,CAAC;AAAC;AAEFb,mBAAmB,CAACe,qBAAqB,GAAGjB,2BAA2B"}

package/components/ToolbarPresets/HeadingToolbarPreset.js

@@ -16,6 +16,7 @@ var _FontSizeAction = require("../ToolbarActions/FontSizeAction");
 var _Divider = require("../../ui/Divider");
 var _FontColorAction = require("../ToolbarActions/FontColorAction");
 var _TypographyAction = require("../ToolbarActions/TypographyAction");
+var _TextAlignmentAction = require("../ToolbarActions/TextAlignmentAction");
 var HeadingToolbarPreset = function HeadingToolbarPreset() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
     element: /*#__PURE__*/_react.default.createElement(_FontSizeAction.FontSizeAction, null),
@@ -26,6 +27,9 @@ var HeadingToolbarPreset = function HeadingToolbarPreset() {
   }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
     element: /*#__PURE__*/_react.default.createElement(_TypographyAction.TypographyAction, null),
     type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_TextAlignmentAction.TextAlignmentAction, null),
+    type: "heading"
   }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
     element: /*#__PURE__*/_react.default.createElement(_Divider.Divider, null),
     type: "heading"

package/components/ToolbarPresets/HeadingToolbarPreset.js.map

@@ -1 +1 @@
-{"version":3,"names":["HeadingToolbarPreset"],"sources":["HeadingToolbarPreset.tsx"],"sourcesContent":["import React from \"react\";\nimport { BoldAction } from \"~/components/ToolbarActions/BoldAction\";\nimport { AddToolbarAction } from \"~/components/AddToolbarAction\";\nimport { ItalicAction } from \"~/components/ToolbarActions/ItalicAction\";\nimport { UnderlineAction } from \"~/components/ToolbarActions/UnderlineAction\";\nimport { CodeHighlightAction } from \"~/components/ToolbarActions/CodeHighlightAction\";\nimport { LinkAction } from \"~/components/ToolbarActions/LinkAction\";\nimport { FontSizeAction } from \"~/components/ToolbarActions/FontSizeAction\";\nimport { Divider } from \"~/ui/Divider\";\nimport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nimport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\n\nexport const HeadingToolbarPreset = () => {\n    return (\n        <>\n            <AddToolbarAction element={<FontSizeAction />} type={\"heading\"} />\n            <AddToolbarAction element={<FontColorAction />} type={\"heading\"} />\n            <AddToolbarAction element={<TypographyAction />} type={\"heading\"} />\n            <AddToolbarAction element={<Divider />} type={\"heading\"} />\n            <AddToolbarAction element={<BoldAction />} type={\"heading\"} />\n            <AddToolbarAction element={<ItalicAction />} type={\"heading\"} />\n            <AddToolbarAction element={<UnderlineAction />} type={\"heading\"} />\n            <AddToolbarAction element={<CodeHighlightAction />} type={\"heading\"} />\n            <AddToolbarAction element={<Divider />} type={\"heading\"} />\n            <AddToolbarAction element={<LinkAction />} type={\"heading\"} />\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,GAAS;EACtC,oBACI,yEACI,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAClE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gCAAe,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACnE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACpE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAC3D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sBAAU,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAC9D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,0BAAY,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAChE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gCAAe,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACnE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,wCAAmB,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACvE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAC3D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sBAAU,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,CAC/D;AAEX,CAAC;AAAC"}
+{"version":3,"names":["HeadingToolbarPreset"],"sources":["HeadingToolbarPreset.tsx"],"sourcesContent":["import React from \"react\";\nimport { BoldAction } from \"~/components/ToolbarActions/BoldAction\";\nimport { AddToolbarAction } from \"~/components/AddToolbarAction\";\nimport { ItalicAction } from \"~/components/ToolbarActions/ItalicAction\";\nimport { UnderlineAction } from \"~/components/ToolbarActions/UnderlineAction\";\nimport { CodeHighlightAction } from \"~/components/ToolbarActions/CodeHighlightAction\";\nimport { LinkAction } from \"~/components/ToolbarActions/LinkAction\";\nimport { FontSizeAction } from \"~/components/ToolbarActions/FontSizeAction\";\nimport { Divider } from \"~/ui/Divider\";\nimport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nimport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\nimport { TextAlignmentAction } from \"~/components/ToolbarActions/TextAlignmentAction\";\n\nexport const HeadingToolbarPreset = () => {\n    return (\n        <>\n            <AddToolbarAction element={<FontSizeAction />} type={\"heading\"} />\n            <AddToolbarAction element={<FontColorAction />} type={\"heading\"} />\n            <AddToolbarAction element={<TypographyAction />} type={\"heading\"} />\n            <AddToolbarAction element={<TextAlignmentAction />} type={\"heading\"} />\n            <AddToolbarAction element={<Divider />} type={\"heading\"} />\n            <AddToolbarAction element={<BoldAction />} type={\"heading\"} />\n            <AddToolbarAction element={<ItalicAction />} type={\"heading\"} />\n            <AddToolbarAction element={<UnderlineAction />} type={\"heading\"} />\n            <AddToolbarAction element={<CodeHighlightAction />} type={\"heading\"} />\n            <AddToolbarAction element={<Divider />} type={\"heading\"} />\n            <AddToolbarAction element={<LinkAction />} type={\"heading\"} />\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,GAAS;EACtC,oBACI,yEACI,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAClE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gCAAe,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACnE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACpE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,wCAAmB,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACvE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAC3D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sBAAU,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAC9D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,0BAAY,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAChE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gCAAe,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACnE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,wCAAmB,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eACvE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,eAC3D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sBAAU,OAAI;IAAC,IAAI,EAAE;EAAU,EAAG,CAC/D;AAEX,CAAC;AAAC"}

package/components/ToolbarPresets/ParagraphToolbarPreset.js

@@ -19,6 +19,7 @@ var _BulletListAction = require("../ToolbarActions/BulletListAction");
 var _QuoteAction = require("../ToolbarActions/QuoteAction");
 var _FontColorAction = require("../ToolbarActions/FontColorAction");
 var _TypographyAction = require("../ToolbarActions/TypographyAction");
+var _TextAlignmentAction = require("../ToolbarActions/TextAlignmentAction");
 var ParagraphToolbarPreset = function ParagraphToolbarPreset() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
     element: /*#__PURE__*/_react.default.createElement(_FontSizeAction.FontSizeAction, null),
@@ -29,6 +30,9 @@ var ParagraphToolbarPreset = function ParagraphToolbarPreset() {
   }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
     element: /*#__PURE__*/_react.default.createElement(_TypographyAction.TypographyAction, null),
     type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_TextAlignmentAction.TextAlignmentAction, null),
+    type: "paragraph"
   }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
     element: /*#__PURE__*/_react.default.createElement(_Divider.Divider, null),
     type: "paragraph"

package/components/ToolbarPresets/ParagraphToolbarPreset.js.map

@@ -1 +1 @@
-{"version":3,"names":["ParagraphToolbarPreset"],"sources":["ParagraphToolbarPreset.tsx"],"sourcesContent":["import React from \"react\";\nimport { BoldAction } from \"~/components/ToolbarActions/BoldAction\";\nimport { AddToolbarAction } from \"~/components/AddToolbarAction\";\nimport { ItalicAction } from \"~/components/ToolbarActions/ItalicAction\";\nimport { UnderlineAction } from \"~/components/ToolbarActions/UnderlineAction\";\nimport { CodeHighlightAction } from \"~/components/ToolbarActions/CodeHighlightAction\";\nimport { LinkAction } from \"~/components/ToolbarActions/LinkAction\";\nimport { FontSizeAction } from \"~/components/ToolbarActions/FontSizeAction\";\nimport { Divider } from \"~/ui/Divider\";\nimport { NumberedListAction } from \"~/components/ToolbarActions/NumberedListAction\";\nimport { BulletListAction } from \"~/components/ToolbarActions/BulletListAction\";\nimport { QuoteAction } from \"~/components/ToolbarActions/QuoteAction\";\nimport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nimport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\n\nexport const ParagraphToolbarPreset = () => {\n    return (\n        <>\n            <AddToolbarAction element={<FontSizeAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<FontColorAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<TypographyAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<Divider />} type={\"paragraph\"} />\n            <AddToolbarAction element={<BoldAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<ItalicAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<UnderlineAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<CodeHighlightAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<Divider />} type={\"paragraph\"} />\n            <AddToolbarAction element={<NumberedListAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<BulletListAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<Divider />} type={\"paragraph\"} />\n            <AddToolbarAction element={<LinkAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<QuoteAction />} type={\"paragraph\"} />\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,GAAS;EACxC,oBACI,yEACI,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACpE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gCAAe,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACrE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACtE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAC7D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sBAAU,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAChE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,0BAAY,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAClE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gCAAe,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACrE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,wCAAmB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACzE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAC7D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sCAAkB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACxE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACtE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAC7D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sBAAU,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAChE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,wBAAW,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,CAClE;AAEX,CAAC;AAAC"}
+{"version":3,"names":["ParagraphToolbarPreset"],"sources":["ParagraphToolbarPreset.tsx"],"sourcesContent":["import React from \"react\";\nimport { BoldAction } from \"~/components/ToolbarActions/BoldAction\";\nimport { AddToolbarAction } from \"~/components/AddToolbarAction\";\nimport { ItalicAction } from \"~/components/ToolbarActions/ItalicAction\";\nimport { UnderlineAction } from \"~/components/ToolbarActions/UnderlineAction\";\nimport { CodeHighlightAction } from \"~/components/ToolbarActions/CodeHighlightAction\";\nimport { LinkAction } from \"~/components/ToolbarActions/LinkAction\";\nimport { FontSizeAction } from \"~/components/ToolbarActions/FontSizeAction\";\nimport { Divider } from \"~/ui/Divider\";\nimport { NumberedListAction } from \"~/components/ToolbarActions/NumberedListAction\";\nimport { BulletListAction } from \"~/components/ToolbarActions/BulletListAction\";\nimport { QuoteAction } from \"~/components/ToolbarActions/QuoteAction\";\nimport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nimport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\nimport { TextAlignmentAction } from \"~/components/ToolbarActions/TextAlignmentAction\";\n\nexport const ParagraphToolbarPreset = () => {\n    return (\n        <>\n            <AddToolbarAction element={<FontSizeAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<FontColorAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<TypographyAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<TextAlignmentAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<Divider />} type={\"paragraph\"} />\n            <AddToolbarAction element={<BoldAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<ItalicAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<UnderlineAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<CodeHighlightAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<Divider />} type={\"paragraph\"} />\n            <AddToolbarAction element={<NumberedListAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<BulletListAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<Divider />} type={\"paragraph\"} />\n            <AddToolbarAction element={<LinkAction />} type={\"paragraph\"} />\n            <AddToolbarAction element={<QuoteAction />} type={\"paragraph\"} />\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,GAAS;EACxC,oBACI,yEACI,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACpE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gCAAe,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACrE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACtE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,wCAAmB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACzE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAC7D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sBAAU,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAChE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,0BAAY,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAClE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gCAAe,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACrE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,wCAAmB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACzE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAC7D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sCAAkB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACxE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eACtE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,gBAAO,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAC7D,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,sBAAU,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,eAChE,6BAAC,kCAAgB;IAAC,OAAO,eAAE,6BAAC,wBAAW,OAAI;IAAC,IAAI,EAAE;EAAY,EAAG,CAClE;AAEX,CAAC;AAAC"}

package/context/RichTextEditorContext.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { TextBlockSelection, ThemeEmotionMap, ToolbarType } from "../types";
 import { WebinyTheme } from "../themes/webinyLexicalTheme";
+import { LexicalEditor } from "lexical";
 export interface RichTextEditorContext {
     nodeIsText: boolean;
     setNodeIsText: (nodeIsText: boolean) => void;
@@ -12,6 +13,10 @@ export interface RichTextEditorContext {
     setTheme: (theme: WebinyTheme) => void;
     themeEmotionMap?: ThemeEmotionMap;
     setThemeEmotionMap: (themeEmotionMap?: ThemeEmotionMap) => void;
+    activeEditor?: LexicalEditor;
+    setActiveEditor: (editor: LexicalEditor) => void;
+    isEditable: boolean;
+    setIsEditable: (isEditable: boolean) => void;
 }
 export declare const RichTextEditorContext: React.Context<RichTextEditorContext | undefined>;
 interface RichTextEditorProviderProps {

package/context/RichTextEditorContext.js

@@ -28,13 +28,21 @@ var RichTextEditorProvider = function RichTextEditorProvider(_ref) {
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     themeEmotionMap = _useState8[0],
     setThemeEmotionMap = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    activeEditor = _useState10[0],
+    setActiveEditor = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    isEditable = _useState12[0],
+    setIsEditable = _useState12[1];
   /*
    * @desc Keeps data from current user text selection like range selection, nodes, node key...
    */
-  var _useState9 = (0, _react.useState)(null),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    textBlockSelection = _useState10[0],
-    setTextBlockSelection = _useState10[1];
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    textBlockSelection = _useState14[0],
+    setTextBlockSelection = _useState14[1];
   var setNodeIsText = function setNodeIsText(nodeIsText) {
     setIsText(nodeIsText);
   };
@@ -49,7 +57,11 @@ var RichTextEditorProvider = function RichTextEditorProvider(_ref) {
       theme: theme,
       setTheme: setTheme,
       themeEmotionMap: themeEmotionMap,
-      setThemeEmotionMap: setThemeEmotionMap
+      setThemeEmotionMap: setThemeEmotionMap,
+      activeEditor: activeEditor,
+      setActiveEditor: setActiveEditor,
+      isEditable: isEditable,
+      setIsEditable: setIsEditable
     }
   }, children);
 };

package/context/RichTextEditorContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["RichTextEditorContext","createContext","undefined","RichTextEditorProvider","children","useState","nodeIsText","setIsText","toolbarType","setToolbarType","theme","setTheme","themeEmotionMap","setThemeEmotionMap","textBlockSelection","setTextBlockSelection","setNodeIsText"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext, useState } from \"react\";\nimport { TextBlockSelection, ThemeEmotionMap, ToolbarType } from \"~/types\";\nimport { WebinyTheme } from \"~/themes/webinyLexicalTheme\";\n\nexport interface RichTextEditorContext {\n    nodeIsText: boolean;\n    setNodeIsText: (nodeIsText: boolean) => void;\n    toolbarType?: ToolbarType;\n    setToolbarType: (type: ToolbarType) => void;\n    textBlockSelection: TextBlockSelection | null;\n    setTextBlockSelection: (textBlockSelection: TextBlockSelection) => void;\n    theme?: WebinyTheme;\n    setTheme: (theme: WebinyTheme) => void;\n    themeEmotionMap?: ThemeEmotionMap;\n    setThemeEmotionMap: (themeEmotionMap?: ThemeEmotionMap) => void;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext | undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const RichTextEditorProvider: React.FC<RichTextEditorProviderProps> = ({ children }) => {\n    const [nodeIsText, setIsText] = useState<boolean>(false);\n    const [toolbarType, setToolbarType] = useState<ToolbarType | undefined>();\n    const [theme, setTheme] = useState<WebinyTheme | undefined>(undefined);\n    const [themeEmotionMap, setThemeEmotionMap] = useState<ThemeEmotionMap | undefined>(undefined);\n    /*\n     * @desc Keeps data from current user text selection like range selection, nodes, node key...\n     */\n    const [textBlockSelection, setTextBlockSelection] = useState<TextBlockSelection | null>(null);\n\n    const setNodeIsText = (nodeIsText: boolean) => {\n        setIsText(nodeIsText);\n    };\n\n    return (\n        <RichTextEditorContext.Provider\n            value={{\n                nodeIsText,\n                setNodeIsText,\n                toolbarType,\n                setToolbarType,\n                textBlockSelection,\n                setTextBlockSelection,\n                theme,\n                setTheme,\n                themeEmotionMap,\n                setThemeEmotionMap\n            }}\n        >\n            {children}\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAiBO,IAAMA,qBAAqB,gBAAG,IAAAC,oBAAa,EAAoCC,SAAS,CAAC;AAAC;AAM1F,IAAMC,sBAA6D,GAAG,SAAhEA,sBAA6D,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACpF,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,UAAU;IAAEC,SAAS;EAC5B,iBAAsC,IAAAF,eAAQ,GAA2B;IAAA;IAAlEG,WAAW;IAAEC,cAAc;EAClC,iBAA0B,IAAAJ,eAAQ,EAA0BH,SAAS,CAAC;IAAA;IAA/DQ,KAAK;IAAEC,QAAQ;EACtB,iBAA8C,IAAAN,eAAQ,EAA8BH,SAAS,CAAC;IAAA;IAAvFU,eAAe;IAAEC,kBAAkB;EAC1C;AACJ;AACA;EACI,iBAAoD,IAAAR,eAAQ,EAA4B,IAAI,CAAC;IAAA;IAAtFS,kBAAkB;IAAEC,qBAAqB;EAEhD,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIV,UAAmB,EAAK;IAC3CC,SAAS,CAACD,UAAU,CAAC;EACzB,CAAC;EAED,oBACI,6BAAC,qBAAqB,CAAC,QAAQ;IAC3B,KAAK,EAAE;MACHA,UAAU,EAAVA,UAAU;MACVU,aAAa,EAAbA,aAAa;MACbR,WAAW,EAAXA,WAAW;MACXC,cAAc,EAAdA,cAAc;MACdK,kBAAkB,EAAlBA,kBAAkB;MAClBC,qBAAqB,EAArBA,qBAAqB;MACrBL,KAAK,EAALA,KAAK;MACLC,QAAQ,EAARA,QAAQ;MACRC,eAAe,EAAfA,eAAe;MACfC,kBAAkB,EAAlBA;IACJ;EAAE,GAEDT,QAAQ,CACoB;AAEzC,CAAC;AAAC"}
+{"version":3,"names":["RichTextEditorContext","createContext","undefined","RichTextEditorProvider","children","useState","nodeIsText","setIsText","toolbarType","setToolbarType","theme","setTheme","themeEmotionMap","setThemeEmotionMap","activeEditor","setActiveEditor","isEditable","setIsEditable","textBlockSelection","setTextBlockSelection","setNodeIsText"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext, useState } from \"react\";\nimport { TextBlockSelection, ThemeEmotionMap, ToolbarType } from \"~/types\";\nimport { WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { LexicalEditor } from \"lexical\";\n\nexport interface RichTextEditorContext {\n    nodeIsText: boolean;\n    setNodeIsText: (nodeIsText: boolean) => void;\n    toolbarType?: ToolbarType;\n    setToolbarType: (type: ToolbarType) => void;\n    textBlockSelection: TextBlockSelection | null;\n    setTextBlockSelection: (textBlockSelection: TextBlockSelection) => void;\n    theme?: WebinyTheme;\n    setTheme: (theme: WebinyTheme) => void;\n    themeEmotionMap?: ThemeEmotionMap;\n    setThemeEmotionMap: (themeEmotionMap?: ThemeEmotionMap) => void;\n    activeEditor?: LexicalEditor;\n    setActiveEditor: (editor: LexicalEditor) => void;\n    isEditable: boolean;\n    setIsEditable: (isEditable: boolean) => void;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext | undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const RichTextEditorProvider: React.FC<RichTextEditorProviderProps> = ({ children }) => {\n    const [nodeIsText, setIsText] = useState<boolean>(false);\n    const [toolbarType, setToolbarType] = useState<ToolbarType | undefined>();\n    const [theme, setTheme] = useState<WebinyTheme | undefined>(undefined);\n    const [themeEmotionMap, setThemeEmotionMap] = useState<ThemeEmotionMap | undefined>(undefined);\n    const [activeEditor, setActiveEditor] = useState<LexicalEditor>();\n    const [isEditable, setIsEditable] = useState<boolean>(false);\n    /*\n     * @desc Keeps data from current user text selection like range selection, nodes, node key...\n     */\n    const [textBlockSelection, setTextBlockSelection] = useState<TextBlockSelection | null>(null);\n\n    const setNodeIsText = (nodeIsText: boolean) => {\n        setIsText(nodeIsText);\n    };\n\n    return (\n        <RichTextEditorContext.Provider\n            value={{\n                nodeIsText,\n                setNodeIsText,\n                toolbarType,\n                setToolbarType,\n                textBlockSelection,\n                setTextBlockSelection,\n                theme,\n                setTheme,\n                themeEmotionMap,\n                setThemeEmotionMap,\n                activeEditor,\n                setActiveEditor,\n                isEditable,\n                setIsEditable\n            }}\n        >\n            {children}\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAsBO,IAAMA,qBAAqB,gBAAG,IAAAC,oBAAa,EAAoCC,SAAS,CAAC;AAAC;AAM1F,IAAMC,sBAA6D,GAAG,SAAhEA,sBAA6D,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACpF,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,UAAU;IAAEC,SAAS;EAC5B,iBAAsC,IAAAF,eAAQ,GAA2B;IAAA;IAAlEG,WAAW;IAAEC,cAAc;EAClC,iBAA0B,IAAAJ,eAAQ,EAA0BH,SAAS,CAAC;IAAA;IAA/DQ,KAAK;IAAEC,QAAQ;EACtB,iBAA8C,IAAAN,eAAQ,EAA8BH,SAAS,CAAC;IAAA;IAAvFU,eAAe;IAAEC,kBAAkB;EAC1C,iBAAwC,IAAAR,eAAQ,GAAiB;IAAA;IAA1DS,YAAY;IAAEC,eAAe;EACpC,kBAAoC,IAAAV,eAAQ,EAAU,KAAK,CAAC;IAAA;IAArDW,UAAU;IAAEC,aAAa;EAChC;AACJ;AACA;EACI,kBAAoD,IAAAZ,eAAQ,EAA4B,IAAI,CAAC;IAAA;IAAtFa,kBAAkB;IAAEC,qBAAqB;EAEhD,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAId,UAAmB,EAAK;IAC3CC,SAAS,CAACD,UAAU,CAAC;EACzB,CAAC;EAED,oBACI,6BAAC,qBAAqB,CAAC,QAAQ;IAC3B,KAAK,EAAE;MACHA,UAAU,EAAVA,UAAU;MACVc,aAAa,EAAbA,aAAa;MACbZ,WAAW,EAAXA,WAAW;MACXC,cAAc,EAAdA,cAAc;MACdS,kBAAkB,EAAlBA,kBAAkB;MAClBC,qBAAqB,EAArBA,qBAAqB;MACrBT,KAAK,EAALA,KAAK;MACLC,QAAQ,EAARA,QAAQ;MACRC,eAAe,EAAfA,eAAe;MACfC,kBAAkB,EAAlBA,kBAAkB;MAClBC,YAAY,EAAZA,YAAY;MACZC,eAAe,EAAfA,eAAe;MACfC,UAAU,EAAVA,UAAU;MACVC,aAAa,EAAbA;IACJ;EAAE,GAEDb,QAAQ,CACoB;AAEzC,CAAC;AAAC"}

package/context/TextAlignmentActionContextProps.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ElementFormatType } from "lexical";
+export interface TextAlignmentActionContextProps {
+    value: ElementFormatType;
+    applyTextAlignment: (value: ElementFormatType) => void;
+    outdentText: () => void;
+    indentText: () => void;
+}
+export declare const TextAlignmentActionContext: React.Context<TextAlignmentActionContextProps | undefined>;

package/context/TextAlignmentActionContextProps.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextAlignmentActionContext = void 0;
+var _react = _interopRequireDefault(require("react"));
+var TextAlignmentActionContext = /*#__PURE__*/_react.default.createContext(undefined);
+exports.TextAlignmentActionContext = TextAlignmentActionContext;

package/context/TextAlignmentActionContextProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TextAlignmentActionContext","React","createContext","undefined"],"sources":["TextAlignmentActionContextProps.tsx"],"sourcesContent":["import React from \"react\";\nimport { ElementFormatType } from \"lexical\";\n\nexport interface TextAlignmentActionContextProps {\n    /*\n     * Selected text alignment value\n     * */\n    value: ElementFormatType;\n\n    /*\n     * Apply text alignment to selected text\n     */\n    applyTextAlignment: (value: ElementFormatType) => void;\n\n    outdentText: () => void;\n\n    indentText: () => void;\n}\n\nexport const TextAlignmentActionContext = React.createContext<\n    TextAlignmentActionContextProps | undefined\n>(undefined);\n"],"mappings":";;;;;;;AAAA;AAmBO,IAAMA,0BAA0B,gBAAGC,cAAK,CAACC,aAAa,CAE3DC,SAAS,CAAC;AAAC"}

package/hooks/useTextAlignmentAction.d.ts

@@ -0,0 +1 @@
+export declare function useTextAlignmentAction(): import("../context/TextAlignmentActionContextProps").TextAlignmentActionContextProps;

package/hooks/useTextAlignmentAction.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTextAlignmentAction = useTextAlignmentAction;
+var _react = require("react");
+var _TextAlignmentActionContextProps = require("../context/TextAlignmentActionContextProps");
+function useTextAlignmentAction() {
+  var context = (0, _react.useContext)(_TextAlignmentActionContextProps.TextAlignmentActionContext);
+  if (!context) {
+    throw Error("Missing TextAlignmentActionContext in the component hierarchy. Are you using \"useTextAlignmentAction()\" in the right place?");
+  }
+  return context;
+}

package/hooks/useTextAlignmentAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTextAlignmentAction","context","useContext","TextAlignmentActionContext","Error"],"sources":["useTextAlignmentAction.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\n\nexport function useTextAlignmentAction() {\n    const context = useContext(TextAlignmentActionContext);\n    if (!context) {\n        throw Error(\n            `Missing TextAlignmentActionContext in the component hierarchy. Are you using \"useTextAlignmentAction()\" in the right place?`\n        );\n    }\n\n    return context;\n}\n"],"mappings":";;;;;;AAAA;AACA;AAEO,SAASA,sBAAsB,GAAG;EACrC,IAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACC,2DAA0B,CAAC;EACtD,IAAI,CAACF,OAAO,EAAE;IACV,MAAMG,KAAK,iIAEV;EACL;EAEA,OAAOH,OAAO;AAClB"}

package/images/icons/indent.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-indent-left" viewBox="0 0 16 16">
+    <path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm.646 2.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L4.293 8 2.646 6.354a.5.5 0 0 1 0-.708zM7 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/images/icons/justify.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/images/icons/outdent.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-indent-right" viewBox="0 0 16 16">
+    <path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm10.646 2.146a.5.5 0 0 1 .708.708L11.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zM2 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/index.d.ts

@@ -2,6 +2,7 @@ export { LexicalHtmlRenderer } from "./components/LexicalHtmlRenderer";
 export { useRichTextEditor } from "./hooks/useRichTextEditor";
 export { useFontColorPicker } from "./hooks/useFontColorPicker";
 export { useTypographyAction } from "./hooks/useTypographyAction";
+export { useTextAlignmentAction } from "./hooks/useTextAlignmentAction";
 export { Divider } from "./ui/Divider";
 export { DropDownItem } from "./ui/DropDown";
 export { DropDown } from "./ui/DropDown";
@@ -16,6 +17,7 @@ export { NumberedListAction } from "./components/ToolbarActions/NumberedListActi
 export { QuoteAction } from "./components/ToolbarActions/QuoteAction";
 export { UnderlineAction } from "./components/ToolbarActions/UnderlineAction";
 export { TypographyAction } from "./components/ToolbarActions/TypographyAction";
+export { TextAlignmentAction } from "./components/ToolbarActions/TextAlignmentAction";
 export { HeadingToolbar } from "./components/Toolbar/HeadingToolbar";
 export { ParagraphToolbar } from "./components/Toolbar/ParagraphToolbar";
 export { Toolbar } from "./components/Toolbar/Toolbar";

package/index.js

@@ -184,6 +184,12 @@ Object.defineProperty(exports, "RichTextEditor", {
     return _RichTextEditor.RichTextEditor;
   }
 });
+Object.defineProperty(exports, "TextAlignmentAction", {
+  enumerable: true,
+  get: function get() {
+    return _TextAlignmentAction.TextAlignmentAction;
+  }
+});
 Object.defineProperty(exports, "Toolbar", {
   enumerable: true,
   get: function get() {
@@ -233,6 +239,12 @@ Object.defineProperty(exports, "useRichTextEditor", {
     return _useRichTextEditor.useRichTextEditor;
   }
 });
+Object.defineProperty(exports, "useTextAlignmentAction", {
+  enumerable: true,
+  get: function get() {
+    return _useTextAlignmentAction.useTextAlignmentAction;
+  }
+});
 Object.defineProperty(exports, "useTypographyAction", {
   enumerable: true,
   get: function get() {
@@ -243,6 +255,7 @@ var _LexicalHtmlRenderer = require("./components/LexicalHtmlRenderer");
 var _useRichTextEditor = require("./hooks/useRichTextEditor");
 var _useFontColorPicker = require("./hooks/useFontColorPicker");
 var _useTypographyAction = require("./hooks/useTypographyAction");
+var _useTextAlignmentAction = require("./hooks/useTextAlignmentAction");
 var _Divider = require("./ui/Divider");
 var _DropDown = require("./ui/DropDown");
 var _BoldAction = require("./components/ToolbarActions/BoldAction");
@@ -256,6 +269,7 @@ var _NumberedListAction = require("./components/ToolbarActions/NumberedListActio
 var _QuoteAction = require("./components/ToolbarActions/QuoteAction");
 var _UnderlineAction = require("./components/ToolbarActions/UnderlineAction");
 var _TypographyAction = require("./components/ToolbarActions/TypographyAction");
+var _TextAlignmentAction = require("./components/ToolbarActions/TextAlignmentAction");
 var _HeadingToolbar = require("./components/Toolbar/HeadingToolbar");
 var _ParagraphToolbar = require("./components/Toolbar/ParagraphToolbar");
 var _Toolbar = require("./components/Toolbar/Toolbar");

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["// render\nexport { LexicalHtmlRenderer } from \"~/components/LexicalHtmlRenderer\";\n// hooks\nexport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nexport { useFontColorPicker } from \"~/hooks/useFontColorPicker\";\nexport { useTypographyAction } from \"~/hooks/useTypographyAction\";\n// UI elements\nexport { Divider } from \"~/ui/Divider\";\nexport { DropDownItem } from \"~/ui/DropDown\";\nexport { DropDown } from \"~/ui/DropDown\";\n// actions\nexport { BoldAction } from \"~/components/ToolbarActions/BoldAction\";\nexport { BulletListAction } from \"~/components/ToolbarActions/BulletListAction\";\nexport { CodeHighlightAction } from \"~/components/ToolbarActions/CodeHighlightAction\";\nexport { FontSizeAction } from \"~/components/ToolbarActions/FontSizeAction\";\nexport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nexport { ItalicAction } from \"~/components/ToolbarActions/ItalicAction\";\nexport { LinkAction } from \"~/components/ToolbarActions/LinkAction\";\nexport { NumberedListAction } from \"~/components/ToolbarActions/NumberedListAction\";\nexport { QuoteAction } from \"~/components/ToolbarActions/QuoteAction\";\nexport { UnderlineAction } from \"~/components/ToolbarActions/UnderlineAction\";\nexport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\n// toolbars\nexport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nexport { ParagraphToolbar } from \"~/components/Toolbar/ParagraphToolbar\";\nexport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n// presets\nexport { ParagraphToolbarPreset } from \"~/components/ToolbarPresets/ParagraphToolbarPreset\";\nexport { HeadingToolbarPreset } from \"./components/ToolbarPresets/HeadingToolbarPreset\";\n// editor\nexport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nexport { HeadingEditor } from \"~/components/Editor/HeadingEditor\";\nexport { ParagraphEditor } from \"~/components/Editor/ParagraphEditor\";\n// plugins\nexport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nexport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nexport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nexport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nexport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nexport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin/LexicalUpdateStatePlugin\";\n// composition\nexport { AddToolbarAction } from \"~/components/AddToolbarAction\";\nexport { AddRichTextEditorPlugin } from \"~/components/AddRichTextEditorPlugin\";\nexport { AddRichTextEditorNodeType } from \"~/components/AddRichTextEditorNodeType\";\n// utils\nexport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nexport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nexport { clearNodeFormatting } from \"~/utils/nodes/clearNodeFormating\";\n// types\nexport * as types from \"./types\";\n// config\nexport { LexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;AAEA;AACA;AACA;AAEA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAAuE;AAAA;AAIvE"}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["// render\nexport { LexicalHtmlRenderer } from \"~/components/LexicalHtmlRenderer\";\n// hooks\nexport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nexport { useFontColorPicker } from \"~/hooks/useFontColorPicker\";\nexport { useTypographyAction } from \"~/hooks/useTypographyAction\";\nexport { useTextAlignmentAction } from \"~/hooks/useTextAlignmentAction\";\n// UI elements\nexport { Divider } from \"~/ui/Divider\";\nexport { DropDownItem } from \"~/ui/DropDown\";\nexport { DropDown } from \"~/ui/DropDown\";\n// actions\nexport { BoldAction } from \"~/components/ToolbarActions/BoldAction\";\nexport { BulletListAction } from \"~/components/ToolbarActions/BulletListAction\";\nexport { CodeHighlightAction } from \"~/components/ToolbarActions/CodeHighlightAction\";\nexport { FontSizeAction } from \"~/components/ToolbarActions/FontSizeAction\";\nexport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nexport { ItalicAction } from \"~/components/ToolbarActions/ItalicAction\";\nexport { LinkAction } from \"~/components/ToolbarActions/LinkAction\";\nexport { NumberedListAction } from \"~/components/ToolbarActions/NumberedListAction\";\nexport { QuoteAction } from \"~/components/ToolbarActions/QuoteAction\";\nexport { UnderlineAction } from \"~/components/ToolbarActions/UnderlineAction\";\nexport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\nexport { TextAlignmentAction } from \"~/components/ToolbarActions/TextAlignmentAction\";\n// toolbars\nexport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nexport { ParagraphToolbar } from \"~/components/Toolbar/ParagraphToolbar\";\nexport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n// presets\nexport { ParagraphToolbarPreset } from \"~/components/ToolbarPresets/ParagraphToolbarPreset\";\nexport { HeadingToolbarPreset } from \"./components/ToolbarPresets/HeadingToolbarPreset\";\n// editor\nexport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nexport { HeadingEditor } from \"~/components/Editor/HeadingEditor\";\nexport { ParagraphEditor } from \"~/components/Editor/ParagraphEditor\";\n// plugins\nexport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nexport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nexport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nexport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nexport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nexport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin/LexicalUpdateStatePlugin\";\n// composition\nexport { AddToolbarAction } from \"~/components/AddToolbarAction\";\nexport { AddRichTextEditorPlugin } from \"~/components/AddRichTextEditorPlugin\";\nexport { AddRichTextEditorNodeType } from \"~/components/AddRichTextEditorNodeType\";\n// utils\nexport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nexport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nexport { clearNodeFormatting } from \"~/utils/nodes/clearNodeFormating\";\n// types\nexport * as types from \"./types\";\n// config\nexport { LexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAAuE;AAAA;AAIvE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/lexical-editor",
-	"version": "5.36.2-beta.0",
+	"version": "5.36.2-beta.2",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -19,15 +19,15 @@
 		"@lexical/rich-text": "0.10.0",
 		"@lexical/selection": "0.10.0",
 		"@lexical/utils": "0.10.0",
-		"@webiny/react-composition": "5.36.2-beta.0",
+		"@webiny/react-composition": "5.36.2-beta.2",
 		"lexical": "0.10.0",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
 		"react-style-object-to-css": "1.1.2"
 	},
 	"devDependencies": {
-		"@webiny/cli": "5.36.2-beta.0",
-		"@webiny/project-utils": "5.36.2-beta.0"
+		"@webiny/cli": "5.36.2-beta.2",
+		"@webiny/project-utils": "5.36.2-beta.2"
 	},
 	"publishConfig": {
 		"access": "public",
@@ -37,5 +37,5 @@
 		"build": "yarn webiny run build",
 		"watch": "yarn webiny run watch"
 	},
-	"gitHead": "4db8c2e74ba3e5a7914dd1367467b558172e9087"
+	"gitHead": "908c591cd08d81da267ed6152e880b52e1157c8b"
 }

package/types.d.ts

@@ -19,6 +19,7 @@ export declare type ToolbarState = {
     underline: boolean;
     italic: boolean;
     code: boolean;
+    isRTL: boolean;
     link: NodeState;
     typography: NodeState;
     fontColor: NodeState;
@@ -36,6 +37,7 @@ export declare type TextBlockSelection = {
     node: ElementNode | TextNode;
     anchorNode: ElementNode | TextNode;
     isElementDom: boolean;
+    selectedText: string;
     state: ToolbarState | undefined;
 };
 export declare type ListHtmlTag = "ol" | "ul";

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import { ElementNode, LexicalNode, NodeSelection, RangeSelection, TextNode } from \"lexical\";\nimport { ListType } from \"@lexical/list\";\nimport { CSSObject } from \"@emotion/react\";\nexport type ToolbarType = \"heading\" | \"paragraph\" | string;\nexport type LexicalValue = string;\nexport { FontColorPicker } from \"~/components/ToolbarActions/FontColorAction\";\n\nexport type LexicalTextType =\n    | ListType\n    | \"paragraph\"\n    | \"heading\"\n    | \"quoteblock\"\n    | \"bullet\"\n    | \"number\"\n    | \"link\"\n    | undefined;\n\nexport type TextFormatting = {\n    bold: boolean;\n    underline: boolean;\n    italic: boolean;\n    // highlight: boolean #TODO implement with highlight action\n    code: boolean;\n};\n\nexport type NodeState = {\n    isSelected: boolean;\n};\n\nexport type ToolbarState = {\n    // text format\n    bold: boolean;\n    underline: boolean;\n    italic: boolean;\n    code: boolean;\n    // nodes selection state\n    link: NodeState;\n    typography: NodeState;\n    fontColor: NodeState;\n    list: NodeState;\n    quote: NodeState;\n    textType: LexicalTextType;\n    paragraph: NodeState;\n    heading: NodeState;\n};\n\n/*\n * Represent set of data from the current selection of the text and nodes selected by the user.\n * You can access this object through the @see useRichTextEditor context.\n */\nexport type TextBlockSelection = {\n    elementKey?: string;\n    selection: RangeSelection | NodeSelection | null;\n    element: LexicalNode;\n    parent: ElementNode | null;\n    node: ElementNode | TextNode;\n    anchorNode: ElementNode | TextNode;\n    isElementDom: boolean;\n    state: ToolbarState | undefined;\n};\n\n// Supported HTML tags by webiny lexical implementation\nexport type ListHtmlTag = \"ol\" | \"ul\";\nexport type HeadingHtmlTag = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type ParagraphHtmlTag = \"p\";\nexport type QuoteBlockHtmlTag = \"quoteblock\";\n\n// Typography\nexport type TypographyHTMLTag = HeadingHtmlTag | ParagraphHtmlTag | ListHtmlTag | QuoteBlockHtmlTag;\n\nexport type TypographyValue = {\n    // CSSObject type\n    css: CSSObject;\n    id: string;\n    tag: TypographyHTMLTag;\n    // Display name\n    name: string;\n};\n\n/* Nodes */\n\n/*\n * Contains IDs of the styles and Emotion generated classes.\n */\nexport type ThemeEmotionMap = {\n    [styleId: string]: {\n        id: string;\n        tag: TypographyHTMLTag;\n        name: string;\n        styles: Record<string, any>;\n        // emotion generated class\n        className: string;\n    };\n};\n"],"mappings":";;;;;;;;;;;AAKA"}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import { ElementNode, LexicalNode, NodeSelection, RangeSelection, TextNode } from \"lexical\";\nimport { ListType } from \"@lexical/list\";\nimport { CSSObject } from \"@emotion/react\";\nexport type ToolbarType = \"heading\" | \"paragraph\" | string;\nexport type LexicalValue = string;\nexport { FontColorPicker } from \"~/components/ToolbarActions/FontColorAction\";\n\nexport type LexicalTextType =\n    | ListType\n    | \"paragraph\"\n    | \"heading\"\n    | \"quoteblock\"\n    | \"bullet\"\n    | \"number\"\n    | \"link\"\n    | undefined;\n\nexport type TextFormatting = {\n    bold: boolean;\n    underline: boolean;\n    italic: boolean;\n    // highlight: boolean #TODO implement with highlight action\n    code: boolean;\n};\n\nexport type NodeState = {\n    isSelected: boolean;\n};\n\nexport type ToolbarState = {\n    // text format\n    bold: boolean;\n    underline: boolean;\n    italic: boolean;\n    code: boolean;\n    // is direction of the text right-to-left\n    isRTL: boolean;\n    // nodes selection state\n    link: NodeState;\n    typography: NodeState;\n    fontColor: NodeState;\n    list: NodeState;\n    quote: NodeState;\n    textType: LexicalTextType;\n    paragraph: NodeState;\n    heading: NodeState;\n};\n\n/*\n * Represent set of data from the current selection of the text and nodes selected by the user.\n * You can access this object through the @see useRichTextEditor context.\n */\nexport type TextBlockSelection = {\n    elementKey?: string;\n    selection: RangeSelection | NodeSelection | null;\n    element: LexicalNode;\n    parent: ElementNode | null;\n    node: ElementNode | TextNode;\n    anchorNode: ElementNode | TextNode;\n    isElementDom: boolean;\n    selectedText: string;\n    state: ToolbarState | undefined;\n};\n\n// Supported HTML tags by webiny lexical implementation\nexport type ListHtmlTag = \"ol\" | \"ul\";\nexport type HeadingHtmlTag = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type ParagraphHtmlTag = \"p\";\nexport type QuoteBlockHtmlTag = \"quoteblock\";\n\n// Typography\nexport type TypographyHTMLTag = HeadingHtmlTag | ParagraphHtmlTag | ListHtmlTag | QuoteBlockHtmlTag;\n\nexport type TypographyValue = {\n    // CSSObject type\n    css: CSSObject;\n    id: string;\n    tag: TypographyHTMLTag;\n    // Display name\n    name: string;\n};\n\n/* Nodes */\n\n/*\n * Contains IDs of the styles and Emotion generated classes.\n */\nexport type ThemeEmotionMap = {\n    [styleId: string]: {\n        id: string;\n        tag: TypographyHTMLTag;\n        name: string;\n        styles: Record<string, any>;\n        // emotion generated class\n        className: string;\n    };\n};\n"],"mappings":";;;;;;;;;;;AAKA"}

package/utils/getLexicalTextSelectionState.js

@@ -17,6 +17,7 @@ var _FontColorNode = require("../nodes/FontColorNode");
 var _ParagraphNode = require("../nodes/ParagraphNode");
 var _HeadingNode = require("../nodes/HeadingNode");
 var _QuoteNode = require("../nodes/QuoteNode");
+var _selection = require("@lexical/selection");
 var getSelectionTextFormat = function getSelectionTextFormat(selection) {
   return !(0, _lexical.$isRangeSelection)(selection) ? {
     italic: false,
@@ -37,6 +38,7 @@ var getDefaultToolbarState = function getDefaultToolbarState() {
     italic: false,
     underline: false,
     code: false,
+    isRTL: false,
     link: {
       isSelected: false
     },
@@ -70,12 +72,14 @@ var getToolbarState = function getToolbarState(selection, node, parent, element,
     underline: textFormat.underline,
     code: textFormat.code
   });
+  state.isRTL = (0, _selection.$isParentElementRTL)(selection);
 
   // link
   state.link.isSelected = (0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node);
   if (state.link.isSelected) {
     state.textType = "link";
   }
+
   // font color
   if ((0, _FontColorNode.$isFontColorNode)(node)) {
     state.fontColor.isSelected = true;
@@ -140,6 +144,7 @@ var getLexicalTextSelectionState = function getLexicalTextSelectionState(activeE
     var node = (0, _getSelectedNode.getSelectedNode)(selection);
     var parent = node.getParent();
     var isElementDom = elementDOM !== null;
+    var selectedText = selection.getTextContent();
     return {
       // node/element data from selection
       elementKey: elementKey,
@@ -149,6 +154,7 @@ var getLexicalTextSelectionState = function getLexicalTextSelectionState(activeE
       anchorNode: anchorNode,
       selection: selection,
       isElementDom: isElementDom,
+      selectedText: selectedText,
       state: getToolbarState(selection, node, parent, element, anchorNode)
     };
   }

package/utils/getLexicalTextSelectionState.js.map

@@ -1 +1 @@
-{"version":3,"names":["getSelectionTextFormat","selection","$isRangeSelection","italic","bold","underline","code","hasFormat","getDefaultToolbarState","link","isSelected","list","typography","fontColor","quote","paragraph","heading","textType","undefined","getToolbarState","node","parent","element","anchorNode","textFormat","state","$isLinkNode","$isFontColorNode","$isListNode","parentList","$getNearestNodeOfType","ListNode","type","getListType","$isBaseHeadingNode","$isHeadingNode","$isBaseParagraphNode","$isParagraphNode","$isTypographyElementNode","value","getTypographyValue","tag","includes","$isQuoteNode","getLexicalTextSelectionState","activeEditor","anchor","getNode","getKey","$findMatchingParent","e","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","elementKey","elementDOM","getElementByKey","getSelectedNode","isElementDom"],"sources":["getLexicalTextSelectionState.ts"],"sourcesContent":["import { TextFormatting, TextBlockSelection, ToolbarState, TypographyValue } from \"~/types\";\nimport {\n    $isParagraphNode as $isBaseParagraphNode,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    ElementNode,\n    LexicalEditor,\n    LexicalNode,\n    RangeSelection,\n    TextNode\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType } from \"@lexical/utils\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { $isListNode, ListNode } from \"~/nodes/ListNode\";\nimport { $isHeadingNode as $isBaseHeadingNode } from \"@lexical/rich-text\";\nimport { $isTypographyElementNode } from \"~/nodes/TypographyElementNode\";\nimport { $isFontColorNode } from \"~/nodes/FontColorNode\";\nimport { $isParagraphNode } from \"~/nodes/ParagraphNode\";\nimport { $isHeadingNode } from \"~/nodes/HeadingNode\";\nimport { $isQuoteNode } from \"~/nodes/QuoteNode\";\n\nexport const getSelectionTextFormat = (selection: RangeSelection | undefined): TextFormatting => {\n    return !$isRangeSelection(selection)\n        ? {\n              italic: false,\n              bold: false,\n              underline: false,\n              code: false\n          }\n        : {\n              bold: selection.hasFormat(\"bold\"),\n              italic: selection.hasFormat(\"italic\"),\n              underline: selection.hasFormat(\"underline\"),\n              code: selection.hasFormat(\"code\")\n          };\n};\n\nconst getDefaultToolbarState = (): ToolbarState => {\n    return {\n        bold: false,\n        italic: false,\n        underline: false,\n        code: false,\n        link: { isSelected: false },\n        list: { isSelected: false },\n        typography: { isSelected: false },\n        fontColor: { isSelected: false },\n        quote: { isSelected: false },\n        paragraph: { isSelected: false },\n        heading: { isSelected: false },\n        textType: undefined\n    };\n};\n\nexport const getToolbarState = (\n    selection: RangeSelection,\n    node: LexicalNode,\n    parent: LexicalNode | null,\n    element: LexicalNode | null,\n    anchorNode: ElementNode | TextNode\n): ToolbarState => {\n    const textFormat = getSelectionTextFormat(selection);\n    let state: ToolbarState = getDefaultToolbarState();\n    state = {\n        ...state,\n        bold: textFormat.bold,\n        italic: textFormat.italic,\n        underline: textFormat.underline,\n        code: textFormat.code\n    };\n\n    // link\n    state.link.isSelected = $isLinkNode(parent) || $isLinkNode(node);\n    if (state.link.isSelected) {\n        state.textType = \"link\";\n    }\n    // font color\n    if ($isFontColorNode(node)) {\n        state.fontColor.isSelected = true;\n    }\n\n    if ($isListNode(element)) {\n        const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n        const type = parentList ? parentList.getListType() : element.getListType();\n        state.textType = type;\n    }\n\n    if ($isBaseHeadingNode(element)) {\n        state.textType = \"heading\";\n    }\n\n    if ($isHeadingNode(element)) {\n        state.textType = \"heading\";\n        state.heading.isSelected = true;\n    }\n\n    if ($isBaseParagraphNode(element)) {\n        state.textType = \"paragraph\";\n    }\n\n    if ($isParagraphNode(element)) {\n        state.textType = \"paragraph\";\n        state.paragraph.isSelected = true;\n    }\n\n    if ($isTypographyElementNode(element)) {\n        state.typography.isSelected = true;\n        const value = element?.getTypographyValue() as TypographyValue;\n        if (value.tag.includes(\"h\")) {\n            state.textType = \"heading\";\n        }\n        if (value.tag.includes(\"p\")) {\n            state.textType = \"paragraph\";\n        }\n    }\n\n    if ($isTypographyElementNode(element)) {\n        state.fontColor.isSelected = true;\n    }\n\n    if ($isQuoteNode(element)) {\n        state.textType = \"quoteblock\";\n        state.quote.isSelected = true;\n    }\n\n    return state;\n};\n\n/*\n * @desc Get selection data and provide processed toolbar state and data about the text, element and parent nodes.\n */\nexport const getLexicalTextSelectionState = (\n    activeEditor: LexicalEditor,\n    selection: RangeSelection\n): TextBlockSelection | null => {\n    if ($isRangeSelection(selection)) {\n        const anchorNode = selection.anchor.getNode();\n        let element =\n            anchorNode.getKey() === \"root\"\n                ? anchorNode\n                : $findMatchingParent(anchorNode, e => {\n                      const parent = e.getParent();\n                      return parent !== null && $isRootOrShadowRoot(parent);\n                  });\n\n        if (element === null) {\n            element = anchorNode.getTopLevelElementOrThrow();\n        }\n\n        const elementKey = element.getKey();\n        const elementDOM = activeEditor.getElementByKey(elementKey);\n\n        // Update links\n        const node = getSelectedNode(selection);\n        const parent = node.getParent();\n        const isElementDom = elementDOM !== null;\n\n        return {\n            // node/element data from selection\n            elementKey,\n            element,\n            parent,\n            node,\n            anchorNode,\n            selection,\n            isElementDom,\n            state: getToolbarState(selection, node, parent, element, anchorNode)\n        };\n    }\n    return null;\n};\n"],"mappings":"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"}
+{"version":3,"names":["getSelectionTextFormat","selection","$isRangeSelection","italic","bold","underline","code","hasFormat","getDefaultToolbarState","isRTL","link","isSelected","list","typography","fontColor","quote","paragraph","heading","textType","undefined","getToolbarState","node","parent","element","anchorNode","textFormat","state","$isParentElementRTL","$isLinkNode","$isFontColorNode","$isListNode","parentList","$getNearestNodeOfType","ListNode","type","getListType","$isBaseHeadingNode","$isHeadingNode","$isBaseParagraphNode","$isParagraphNode","$isTypographyElementNode","value","getTypographyValue","tag","includes","$isQuoteNode","getLexicalTextSelectionState","activeEditor","anchor","getNode","getKey","$findMatchingParent","e","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","elementKey","elementDOM","getElementByKey","getSelectedNode","isElementDom","selectedText","getTextContent"],"sources":["getLexicalTextSelectionState.ts"],"sourcesContent":["import { TextFormatting, TextBlockSelection, ToolbarState, TypographyValue } from \"~/types\";\nimport {\n    $isParagraphNode as $isBaseParagraphNode,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    ElementNode,\n    LexicalEditor,\n    LexicalNode,\n    RangeSelection,\n    TextNode\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType } from \"@lexical/utils\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { $isListNode, ListNode } from \"~/nodes/ListNode\";\nimport { $isHeadingNode as $isBaseHeadingNode } from \"@lexical/rich-text\";\nimport { $isTypographyElementNode } from \"~/nodes/TypographyElementNode\";\nimport { $isFontColorNode } from \"~/nodes/FontColorNode\";\nimport { $isParagraphNode } from \"~/nodes/ParagraphNode\";\nimport { $isHeadingNode } from \"~/nodes/HeadingNode\";\nimport { $isQuoteNode } from \"~/nodes/QuoteNode\";\nimport { $isParentElementRTL } from \"@lexical/selection\";\n\nexport const getSelectionTextFormat = (selection: RangeSelection | undefined): TextFormatting => {\n    return !$isRangeSelection(selection)\n        ? {\n              italic: false,\n              bold: false,\n              underline: false,\n              code: false\n          }\n        : {\n              bold: selection.hasFormat(\"bold\"),\n              italic: selection.hasFormat(\"italic\"),\n              underline: selection.hasFormat(\"underline\"),\n              code: selection.hasFormat(\"code\")\n          };\n};\n\nconst getDefaultToolbarState = (): ToolbarState => {\n    return {\n        bold: false,\n        italic: false,\n        underline: false,\n        code: false,\n        isRTL: false,\n        link: { isSelected: false },\n        list: { isSelected: false },\n        typography: { isSelected: false },\n        fontColor: { isSelected: false },\n        quote: { isSelected: false },\n        paragraph: { isSelected: false },\n        heading: { isSelected: false },\n        textType: undefined\n    };\n};\n\nexport const getToolbarState = (\n    selection: RangeSelection,\n    node: LexicalNode,\n    parent: LexicalNode | null,\n    element: LexicalNode | null,\n    anchorNode: ElementNode | TextNode\n): ToolbarState => {\n    const textFormat = getSelectionTextFormat(selection);\n    let state: ToolbarState = getDefaultToolbarState();\n    state = {\n        ...state,\n        bold: textFormat.bold,\n        italic: textFormat.italic,\n        underline: textFormat.underline,\n        code: textFormat.code\n    };\n\n    state.isRTL = $isParentElementRTL(selection);\n\n    // link\n    state.link.isSelected = $isLinkNode(parent) || $isLinkNode(node);\n    if (state.link.isSelected) {\n        state.textType = \"link\";\n    }\n\n    // font color\n    if ($isFontColorNode(node)) {\n        state.fontColor.isSelected = true;\n    }\n\n    if ($isListNode(element)) {\n        const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n        const type = parentList ? parentList.getListType() : element.getListType();\n        state.textType = type;\n    }\n\n    if ($isBaseHeadingNode(element)) {\n        state.textType = \"heading\";\n    }\n\n    if ($isHeadingNode(element)) {\n        state.textType = \"heading\";\n        state.heading.isSelected = true;\n    }\n\n    if ($isBaseParagraphNode(element)) {\n        state.textType = \"paragraph\";\n    }\n\n    if ($isParagraphNode(element)) {\n        state.textType = \"paragraph\";\n        state.paragraph.isSelected = true;\n    }\n\n    if ($isTypographyElementNode(element)) {\n        state.typography.isSelected = true;\n        const value = element?.getTypographyValue() as TypographyValue;\n        if (value.tag.includes(\"h\")) {\n            state.textType = \"heading\";\n        }\n        if (value.tag.includes(\"p\")) {\n            state.textType = \"paragraph\";\n        }\n    }\n\n    if ($isTypographyElementNode(element)) {\n        state.fontColor.isSelected = true;\n    }\n\n    if ($isQuoteNode(element)) {\n        state.textType = \"quoteblock\";\n        state.quote.isSelected = true;\n    }\n\n    return state;\n};\n\n/*\n * @desc Get selection data and provide processed toolbar state and data about the text, element and parent nodes.\n */\nexport const getLexicalTextSelectionState = (\n    activeEditor: LexicalEditor,\n    selection: RangeSelection\n): TextBlockSelection | null => {\n    if ($isRangeSelection(selection)) {\n        const anchorNode = selection.anchor.getNode();\n        let element =\n            anchorNode.getKey() === \"root\"\n                ? anchorNode\n                : $findMatchingParent(anchorNode, e => {\n                      const parent = e.getParent();\n                      return parent !== null && $isRootOrShadowRoot(parent);\n                  });\n\n        if (element === null) {\n            element = anchorNode.getTopLevelElementOrThrow();\n        }\n\n        const elementKey = element.getKey();\n        const elementDOM = activeEditor.getElementByKey(elementKey);\n\n        // Update links\n        const node = getSelectedNode(selection);\n        const parent = node.getParent();\n        const isElementDom = elementDOM !== null;\n        const selectedText = selection.getTextContent();\n\n        return {\n            // node/element data from selection\n            elementKey,\n            element,\n            parent,\n            node,\n            anchorNode,\n            selection,\n            isElementDom,\n            selectedText,\n            state: getToolbarState(selection, node, parent, element, anchorNode)\n        };\n    }\n    return null;\n};\n"],"mappings":";;;;;;;;AACA;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIC,SAAqC,EAAqB;EAC7F,OAAO,CAAC,IAAAC,0BAAiB,EAACD,SAAS,CAAC,GAC9B;IACIE,MAAM,EAAE,KAAK;IACbC,IAAI,EAAE,KAAK;IACXC,SAAS,EAAE,KAAK;IAChBC,IAAI,EAAE;EACV,CAAC,GACD;IACIF,IAAI,EAAEH,SAAS,CAACM,SAAS,CAAC,MAAM,CAAC;IACjCJ,MAAM,EAAEF,SAAS,CAACM,SAAS,CAAC,QAAQ,CAAC;IACrCF,SAAS,EAAEJ,SAAS,CAACM,SAAS,CAAC,WAAW,CAAC;IAC3CD,IAAI,EAAEL,SAAS,CAACM,SAAS,CAAC,MAAM;EACpC,CAAC;AACX,CAAC;AAAC;AAEF,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,GAAuB;EAC/C,OAAO;IACHJ,IAAI,EAAE,KAAK;IACXD,MAAM,EAAE,KAAK;IACbE,SAAS,EAAE,KAAK;IAChBC,IAAI,EAAE,KAAK;IACXG,KAAK,EAAE,KAAK;IACZC,IAAI,EAAE;MAAEC,UAAU,EAAE;IAAM,CAAC;IAC3BC,IAAI,EAAE;MAAED,UAAU,EAAE;IAAM,CAAC;IAC3BE,UAAU,EAAE;MAAEF,UAAU,EAAE;IAAM,CAAC;IACjCG,SAAS,EAAE;MAAEH,UAAU,EAAE;IAAM,CAAC;IAChCI,KAAK,EAAE;MAAEJ,UAAU,EAAE;IAAM,CAAC;IAC5BK,SAAS,EAAE;MAAEL,UAAU,EAAE;IAAM,CAAC;IAChCM,OAAO,EAAE;MAAEN,UAAU,EAAE;IAAM,CAAC;IAC9BO,QAAQ,EAAEC;EACd,CAAC;AACL,CAAC;AAEM,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CACxBnB,SAAyB,EACzBoB,IAAiB,EACjBC,MAA0B,EAC1BC,OAA2B,EAC3BC,UAAkC,EACnB;EACf,IAAMC,UAAU,GAAGzB,sBAAsB,CAACC,SAAS,CAAC;EACpD,IAAIyB,KAAmB,GAAGlB,sBAAsB,EAAE;EAClDkB,KAAK,+DACEA,KAAK;IACRtB,IAAI,EAAEqB,UAAU,CAACrB,IAAI;IACrBD,MAAM,EAAEsB,UAAU,CAACtB,MAAM;IACzBE,SAAS,EAAEoB,UAAU,CAACpB,SAAS;IAC/BC,IAAI,EAAEmB,UAAU,CAACnB;EAAI,EACxB;EAEDoB,KAAK,CAACjB,KAAK,GAAG,IAAAkB,8BAAmB,EAAC1B,SAAS,CAAC;;EAE5C;EACAyB,KAAK,CAAChB,IAAI,CAACC,UAAU,GAAG,IAAAiB,iBAAW,EAACN,MAAM,CAAC,IAAI,IAAAM,iBAAW,EAACP,IAAI,CAAC;EAChE,IAAIK,KAAK,CAAChB,IAAI,CAACC,UAAU,EAAE;IACvBe,KAAK,CAACR,QAAQ,GAAG,MAAM;EAC3B;;EAEA;EACA,IAAI,IAAAW,+BAAgB,EAACR,IAAI,CAAC,EAAE;IACxBK,KAAK,CAACZ,SAAS,CAACH,UAAU,GAAG,IAAI;EACrC;EAEA,IAAI,IAAAmB,qBAAW,EAACP,OAAO,CAAC,EAAE;IACtB,IAAMQ,UAAU,GAAG,IAAAC,4BAAqB,EAAWR,UAAU,EAAES,kBAAQ,CAAC;IACxE,IAAMC,IAAI,GAAGH,UAAU,GAAGA,UAAU,CAACI,WAAW,EAAE,GAAGZ,OAAO,CAACY,WAAW,EAAE;IAC1ET,KAAK,CAACR,QAAQ,GAAGgB,IAAI;EACzB;EAEA,IAAI,IAAAE,wBAAkB,EAACb,OAAO,CAAC,EAAE;IAC7BG,KAAK,CAACR,QAAQ,GAAG,SAAS;EAC9B;EAEA,IAAI,IAAAmB,2BAAc,EAACd,OAAO,CAAC,EAAE;IACzBG,KAAK,CAACR,QAAQ,GAAG,SAAS;IAC1BQ,KAAK,CAACT,OAAO,CAACN,UAAU,GAAG,IAAI;EACnC;EAEA,IAAI,IAAA2B,yBAAoB,EAACf,OAAO,CAAC,EAAE;IAC/BG,KAAK,CAACR,QAAQ,GAAG,WAAW;EAChC;EAEA,IAAI,IAAAqB,+BAAgB,EAAChB,OAAO,CAAC,EAAE;IAC3BG,KAAK,CAACR,QAAQ,GAAG,WAAW;IAC5BQ,KAAK,CAACV,SAAS,CAACL,UAAU,GAAG,IAAI;EACrC;EAEA,IAAI,IAAA6B,+CAAwB,EAACjB,OAAO,CAAC,EAAE;IACnCG,KAAK,CAACb,UAAU,CAACF,UAAU,GAAG,IAAI;IAClC,IAAM8B,KAAK,GAAGlB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEmB,kBAAkB,EAAqB;IAC9D,IAAID,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MACzBlB,KAAK,CAACR,QAAQ,GAAG,SAAS;IAC9B;IACA,IAAIuB,KAAK,CAACE,GAAG,CAACC,QAAQ,CAAC,GAAG,CAAC,EAAE;MACzBlB,KAAK,CAACR,QAAQ,GAAG,WAAW;IAChC;EACJ;EAEA,IAAI,IAAAsB,+CAAwB,EAACjB,OAAO,CAAC,EAAE;IACnCG,KAAK,CAACZ,SAAS,CAACH,UAAU,GAAG,IAAI;EACrC;EAEA,IAAI,IAAAkC,uBAAY,EAACtB,OAAO,CAAC,EAAE;IACvBG,KAAK,CAACR,QAAQ,GAAG,YAAY;IAC7BQ,KAAK,CAACX,KAAK,CAACJ,UAAU,GAAG,IAAI;EACjC;EAEA,OAAOe,KAAK;AAChB,CAAC;;AAED;AACA;AACA;AAFA;AAGO,IAAMoB,4BAA4B,GAAG,SAA/BA,4BAA4B,CACrCC,YAA2B,EAC3B9C,SAAyB,EACG;EAC5B,IAAI,IAAAC,0BAAiB,EAACD,SAAS,CAAC,EAAE;IAC9B,IAAMuB,UAAU,GAAGvB,SAAS,CAAC+C,MAAM,CAACC,OAAO,EAAE;IAC7C,IAAI1B,OAAO,GACPC,UAAU,CAAC0B,MAAM,EAAE,KAAK,MAAM,GACxB1B,UAAU,GACV,IAAA2B,0BAAmB,EAAC3B,UAAU,EAAE,UAAA4B,CAAC,EAAI;MACjC,IAAM9B,MAAM,GAAG8B,CAAC,CAACC,SAAS,EAAE;MAC5B,OAAO/B,MAAM,KAAK,IAAI,IAAI,IAAAgC,4BAAmB,EAAChC,MAAM,CAAC;IACzD,CAAC,CAAC;IAEZ,IAAIC,OAAO,KAAK,IAAI,EAAE;MAClBA,OAAO,GAAGC,UAAU,CAAC+B,yBAAyB,EAAE;IACpD;IAEA,IAAMC,UAAU,GAAGjC,OAAO,CAAC2B,MAAM,EAAE;IACnC,IAAMO,UAAU,GAAGV,YAAY,CAACW,eAAe,CAACF,UAAU,CAAC;;IAE3D;IACA,IAAMnC,IAAI,GAAG,IAAAsC,gCAAe,EAAC1D,SAAS,CAAC;IACvC,IAAMqB,MAAM,GAAGD,IAAI,CAACgC,SAAS,EAAE;IAC/B,IAAMO,YAAY,GAAGH,UAAU,KAAK,IAAI;IACxC,IAAMI,YAAY,GAAG5D,SAAS,CAAC6D,cAAc,EAAE;IAE/C,OAAO;MACH;MACAN,UAAU,EAAVA,UAAU;MACVjC,OAAO,EAAPA,OAAO;MACPD,MAAM,EAANA,MAAM;MACND,IAAI,EAAJA,IAAI;MACJG,UAAU,EAAVA,UAAU;MACVvB,SAAS,EAATA,SAAS;MACT2D,YAAY,EAAZA,YAAY;MACZC,YAAY,EAAZA,YAAY;MACZnC,KAAK,EAAEN,eAAe,CAACnB,SAAS,EAAEoB,IAAI,EAAEC,MAAM,EAAEC,OAAO,EAAEC,UAAU;IACvE,CAAC;EACL;EACA,OAAO,IAAI;AACf,CAAC;AAAC"}