@webiny/lexical-editor 0.0.0-unstable.ecd8734205 → 5.35.0-beta.0

package/components/Toolbar/Toolbar.js

@@ -19,12 +19,27 @@ require("./Toolbar.css");
 var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
 var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
 var _getSelectedNode = require("../../utils/getSelectedNode");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _useRichTextEditor3 = require("../../hooks/useRichTextEditor");
+var _getLexicalTextSelectionState = require("../../utils/getLexicalTextSelectionState");
 var FloatingToolbar = function FloatingToolbar(_ref) {
   var children = _ref.children,
+    type = _ref.type,
     anchorElem = _ref.anchorElem,
     editor = _ref.editor;
   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];
+  (0, _react.useEffect)(function () {
+    if (toolbarType !== type) {
+      setToolbarType(type);
+    }
+  }, [type]);
   var updateTextFormatFloatingToolbar = (0, _react.useCallback)(function () {
     var selection = (0, _lexical.$getSelection)();
     var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
@@ -34,6 +49,10 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
     }
     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();
@@ -74,8 +93,9 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
       editorState.read(function () {
         updateTextFormatFloatingToolbar();
       });
-    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
+    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
       updateTextFormatFloatingToolbar();
+      setActiveEditor(newEditor);
       return false;
     }, _lexical.COMMAND_PRIORITY_LOW));
   }, [editor, updateTextFormatFloatingToolbar]);
@@ -90,9 +110,9 @@ var useToolbar = function useToolbar(_ref3) {
     anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem,
     type = _ref3.type,
     children = _ref3.children;
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    nodeIsText = _useRichTextEditor.nodeIsText,
-    setNodeIsText = _useRichTextEditor.setNodeIsText;
+  var _useRichTextEditor2 = (0, _useRichTextEditor3.useRichTextEditor)(),
+    nodeIsText = _useRichTextEditor2.nodeIsText,
+    setNodeIsText = _useRichTextEditor2.setNodeIsText;
   var updatePopup = (0, _react.useCallback)(function () {
     editor.getEditorState().read(function () {
       // Should not to pop up the floating toolbar when using IME input

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactComposition","_link","_reactDom","_utils","_code","_LexicalComposerContext","_getDOMRangeRect","_setFloatingElemPosition","_getSelectedNode","_useRichTextEditor2","FloatingToolbar","_ref","children","anchorElem","editor","popupCharStylesEditorRef","useRef","updateTextFormatFloatingToolbar","useCallback","selection","$getSelection","popupCharStylesEditorElem","current","nativeSelection","window","getSelection","isLink","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","rootElement","getRootElement","isCollapsed","contains","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","default","createElement","ref","className","isEditable","useToolbar","_ref3","_ref3$anchorElem","document","body","type","_useRichTextEditor","useRichTextEditor","nodeIsText","setNodeIsText","updatePopup","isComposing","$isCodeHighlightNode","anchor","getNode","getTextContent","$isTextNode","registerRootListener","createPortal","Toolbar","makeComposable","_ref4","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","exports"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } 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\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\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 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\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 } = 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\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","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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"}

package/components/ToolbarActions/BoldAction.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-/**
- * Toolbar action. On toolbar, you can see as button that is bold.
- */
 export declare const BoldAction: () => JSX.Element;

package/components/ToolbarActions/BoldAction.js

@@ -10,10 +10,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _lexical = require("lexical");
-/**
- * Toolbar action. On toolbar, you can see as button that is bold.
- */
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var BoldAction = function BoldAction() {
+  var _textBlockSelection$s;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -21,10 +20,16 @@ var BoldAction = function BoldAction() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isBold = _useState2[0],
     setIsBold = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection;
+  var isBoldSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.bold);
   var handleClick = function handleClick() {
     editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "bold");
     setIsBold(!isBold);
   };
+  (0, _react.useEffect)(function () {
+    setIsBold(isBoldSelected);
+  }, [isBoldSelected]);
   return /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
       return handleClick();

package/components/ToolbarActions/BoldAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","BoldAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isBold","setIsBold","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["BoldAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. On toolbar, you can see as button that is bold.\n */\nexport const BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isBold, setIsBold] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n        setIsBold(!isBold);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isBold ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACO,IAAMG,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAApCG,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDH,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACIf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,EAAE;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAIP,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhCf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAACC,OAAA,CAAAlB,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["BoldAction","useLexicalComposerContext","editor","useState","isBold","setIsBold","useRichTextEditor","textBlockSelection","isBoldSelected","state","bold","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","useEffect"],"sources":["BoldAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isBold, setIsBold] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isBoldSelected = !!textBlockSelection?.state?.bold;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n        setIsBold(!isBold);\n    };\n\n    useEffect(() => {\n        setIsBold(isBoldSelected);\n    }, [isBoldSelected]);\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isBold ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAU,GAAS;EAAA;EAC5B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,cAAc,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEE,KAAK,kDAAzB,sBAA2BC,IAAI;EAExD,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBT,MAAM,CAACU,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDR,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,IAAAU,gBAAS,EAAC,YAAM;IACZT,SAAS,CAACG,cAAc,CAAC;EAC7B,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,oBACI;IACI,OAAO,EAAE;MAAA,OAAMG,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIP,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhC;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/BulletListAction.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-/**
- * Toolbar button action. On click will wrap the content in bullet list style.
- */
 export declare const BulletListAction: () => JSX.Element;

package/components/ToolbarActions/BulletListAction.js

@@ -9,71 +9,33 @@ exports.BulletListAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _list = require("@lexical/list");
-var _lexical = require("lexical");
-var _utils = require("@lexical/utils");
-/**
- * Toolbar button action. On click will wrap the content in bullet list style.
- */
+var _webinyList = require("../../commands/webiny-list");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var BulletListAction = function BulletListAction() {
+  var _textBlockSelection$s;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
-  var _useState = (0, _react.useState)(editor),
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeEditor = _useState2[0],
-    setActiveEditor = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isActive = _useState4[0],
-    setIsActive = _useState4[1];
-  var updateToolbar = (0, _react.useCallback)(function () {
-    var selection = (0, _lexical.$getSelection)();
-    if ((0, _lexical.$isRangeSelection)(selection)) {
-      var anchorNode = selection.anchor.getNode();
-      var element = anchorNode.getKey() === "root" ? anchorNode : (0, _utils.$findMatchingParent)(anchorNode, function (e) {
-        var parent = e.getParent();
-        return parent !== null && (0, _lexical.$isRootOrShadowRoot)(parent);
-      });
-      if (element === null) {
-        element = anchorNode.getTopLevelElementOrThrow();
-      }
-      if ((0, _list.$isListNode)(element)) {
-        var parentList = (0, _utils.$getNearestNodeOfType)(anchorNode, _list.ListNode);
-        // get the type of the list that is selected with the cursor
-        var type = parentList ? parentList.getListType() : element.getListType();
-        // set the button as active for numbered list
-        if (type === "bullet") {
-          setIsActive(true);
-        } else {
-          setIsActive(false);
-        }
-      }
-    }
-  }, [activeEditor]);
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection;
+  var isListSelected = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s = textBlockSelection.state) === null || _textBlockSelection$s === void 0 ? void 0 : _textBlockSelection$s.list.isSelected;
   (0, _react.useEffect)(function () {
-    return (0, _utils.mergeRegister)(activeEditor.registerUpdateListener(function (_ref) {
-      var editorState = _ref.editorState;
-      editorState.read(function () {
-        updateToolbar();
-      });
-    }));
-  }, [activeEditor, editor, updateToolbar]);
-  (0, _react.useEffect)(function () {
-    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
-      updateToolbar();
-      setActiveEditor(newEditor);
-      return false;
-    }, _lexical.COMMAND_PRIORITY_CRITICAL);
-  }, [editor, updateToolbar]);
+    var _textBlockSelection$s2;
+    var isListBulletType = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s2 = textBlockSelection.state) === null || _textBlockSelection$s2 === void 0 ? void 0 : _textBlockSelection$s2.textType) === "bullet";
+    setIsActive(isListBulletType);
+  }, [isListSelected]);
   var formatBulletList = function formatBulletList() {
     if (!isActive) {
       // will update the active state in the useEffect
-      editor.dispatchCommand(_list.INSERT_UNORDERED_LIST_COMMAND, undefined);
+      editor.dispatchCommand(_webinyList.INSERT_UNORDERED_WEBINY_LIST_COMMAND, {
+        themeStyleId: "list"
+      });
     } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
-      // removing will not update correctly the active state, so we need to set to false manually.
-      setIsActive(false);
+      editor.dispatchCommand(_webinyList.REMOVE_WEBINY_LIST_COMMAND, undefined);
     }
   };
   return /*#__PURE__*/_react.default.createElement("button", {

package/components/ToolbarActions/BulletListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_list","_lexical","_utils","BulletListAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","activeEditor","setActiveEditor","_useState3","_useState4","isActive","setIsActive","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","anchor","getNode","element","getKey","$findMatchingParent","e","parent","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","$isListNode","parentList","$getNearestNodeOfType","ListNode","type","getListType","useEffect","mergeRegister","registerUpdateListener","_ref","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","formatBulletList","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","undefined","REMOVE_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    $isListNode,\n    INSERT_UNORDERED_LIST_COMMAND,\n    ListNode,\n    REMOVE_LIST_COMMAND\n} from \"@lexical/list\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    COMMAND_PRIORITY_CRITICAL,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from \"@lexical/utils\";\n\n/**\n * Toolbar button action. On click will wrap the content in bullet list style.\n */\nexport const BulletListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [activeEditor, setActiveEditor] = useState(editor);\n    const [isActive, setIsActive] = useState<boolean>(false);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\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            if ($isListNode(element)) {\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                // get the type of the list that is selected with the cursor\n                const type = parentList ? parentList.getListType() : element.getListType();\n                // set the button as active for numbered list\n                if (type === \"bullet\") {\n                    setIsActive(true);\n                } else {\n                    setIsActive(false);\n                }\n            }\n        }\n    }, [activeEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            activeEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            })\n        );\n    }, [activeEditor, editor, updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n\n    const formatBulletList = () => {\n        if (!isActive) {\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n            // removing will not update correctly the active state, so we need to set to false manually.\n            setIsActive(false);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["BulletListAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","isListSelected","state","list","isSelected","useEffect","isListBulletType","textType","formatBulletList","dispatchCommand","INSERT_UNORDERED_WEBINY_LIST_COMMAND","themeStyleId","REMOVE_WEBINY_LIST_COMMAND","undefined"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    INSERT_UNORDERED_WEBINY_LIST_COMMAND,\n    REMOVE_WEBINY_LIST_COMMAND\n} from \"~/commands/webiny-list\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const BulletListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isListSelected = textBlockSelection?.state?.list.isSelected;\n\n    useEffect(() => {\n        const isListBulletType = textBlockSelection?.state?.textType === \"bullet\";\n        setIsActive(isListBulletType);\n    }, [isListSelected]);\n\n    const formatBulletList = () => {\n        if (!isActive) {\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_WEBINY_LIST_COMMAND, { themeStyleId: \"list\" });\n        } else {\n            editor.dispatchCommand(REMOVE_WEBINY_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAIA;AAEO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;EAAA;EAClC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,QAAQ;IAAEC,WAAW;EAC5B,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,cAAc,GAAGD,kBAAkB,aAAlBA,kBAAkB,gDAAlBA,kBAAkB,CAAEE,KAAK,0DAAzB,sBAA2BC,IAAI,CAACC,UAAU;EAEjE,IAAAC,gBAAS,EAAC,YAAM;IAAA;IACZ,IAAMC,gBAAgB,GAAG,CAAAN,kBAAkB,aAAlBA,kBAAkB,iDAAlBA,kBAAkB,CAAEE,KAAK,2DAAzB,uBAA2BK,QAAQ,MAAK,QAAQ;IACzET,WAAW,CAACQ,gBAAgB,CAAC;EACjC,CAAC,EAAE,CAACL,cAAc,CAAC,CAAC;EAEpB,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC3B,IAAI,CAACX,QAAQ,EAAE;MACX;MACAF,MAAM,CAACc,eAAe,CAACC,gDAAoC,EAAE;QAAEC,YAAY,EAAE;MAAO,CAAC,CAAC;IAC1F,CAAC,MAAM;MACHhB,MAAM,CAACc,eAAe,CAACG,sCAA0B,EAAEC,SAAS,CAAC;IACjE;EACJ,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAML,gBAAgB,EAAE;IAAA,CAAC;IAClC,SAAS,EAAE,oBAAoB,IAAIX,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvC;IAAG,SAAS,EAAC;EAAkB,EAAG,CAC7B;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/CodeHighlightAction.d.ts

@@ -1,6 +1,2 @@
 /// <reference types="react" />
-/**
- * Toolbar action. User can highlight the selected text.
- * - Gray background will be visible on selected text after clicking on the button.
- */
 export declare const CodeHighlightAction: () => JSX.Element;

package/components/ToolbarActions/CodeHighlightAction.js

@@ -10,11 +10,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _lexical = require("lexical");
-/**
- * Toolbar action. User can highlight the selected text.
- * - Gray background will be visible on selected text after clicking on the button.
- */
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var CodeHighlightAction = function CodeHighlightAction() {
+  var _textBlockSelection$s;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -22,6 +20,12 @@ var CodeHighlightAction = function CodeHighlightAction() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isCode = _useState2[0],
     setIsCode = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection;
+  var isCodeSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.code);
+  (0, _react.useEffect)(function () {
+    setIsCode(isCodeSelected);
+  }, [isCodeSelected]);
   var handleClick = function handleClick() {
     editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "code");
     setIsCode(!isCode);

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","CodeHighlightAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isCode","setIsCode","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. User can highlight the selected text.\n * - Gray background will be visible on selected text after clicking on the button.\n */\nexport const CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isCode, setIsCode] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n        setIsCode(!isCode);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isCode ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAApCG,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDH,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACIf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,EAAE;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAIP,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhCf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAACC,OAAA,CAAAlB,mBAAA,GAAAA,mBAAA"}
+{"version":3,"names":["CodeHighlightAction","useLexicalComposerContext","editor","useState","isCode","setIsCode","useRichTextEditor","textBlockSelection","isCodeSelected","state","code","useEffect","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isCode, setIsCode] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isCodeSelected = !!textBlockSelection?.state?.code;\n\n    useEffect(() => {\n        setIsCode(isCodeSelected);\n    }, [isCodeSelected]);\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n        setIsCode(!isCode);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isCode ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EAAA;EACrC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,cAAc,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEE,KAAK,kDAAzB,sBAA2BC,IAAI;EAExD,IAAAC,gBAAS,EAAC,YAAM;IACZN,SAAS,CAACG,cAAc,CAAC;EAC7B,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,IAAMI,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBV,MAAM,CAACW,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDT,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAMQ,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIR,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhC;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/FontColorAction.d.ts

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

package/components/ToolbarActions/FontColorAction.js

@@ -0,0 +1,83 @@
+"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.FontColorPicker = exports.FontColorAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _lexical = require("lexical");
+var _reactComposition = require("@webiny/react-composition");
+var _FontColorActionContext = require("../../context/FontColorActionContext");
+var _FontColorNode = require("../../nodes/FontColorNode");
+var _getSelectedNode = require("../../utils/getSelectedNode");
+var FontColorPicker = (0, _reactComposition.makeComposable)("FontColorPicker", function () {
+  (0, _react.useEffect)(function () {
+    console.log("Default FontColorPicker, please add your own component");
+  }, []);
+  return null;
+});
+exports.FontColorPicker = FontColorPicker;
+var FontActionColorPicker = function FontActionColorPicker(_ref) {
+  var element = _ref.element;
+  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+    component: FontColorPicker,
+    with: function _with() {
+      return function () {
+        return element;
+      };
+    }
+  });
+};
+var FontColorAction = function FontColorAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)("#000"),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fontColor = _useState2[0],
+    setFontColor = _useState2[1];
+  var setFontColorSelect = (0, _react.useCallback)(function (fontColorValue) {
+    setFontColor(fontColorValue);
+  }, [fontColor]);
+  var onFontColorSelect = (0, _react.useCallback)(function (colorValue, themeColorName) {
+    setFontColorSelect(colorValue);
+    editor.dispatchCommand(_FontColorNode.ADD_FONT_COLOR_COMMAND, {
+      color: colorValue,
+      themeColorName: themeColorName
+    });
+  }, []);
+  var updatePopup = (0, _react.useCallback)(function () {
+    editor.getEditorState().read(function () {
+      var selection = (0, _lexical.$getSelection)();
+      if (!(0, _lexical.$isRangeSelection)(selection)) {
+        return;
+      }
+      var node = (0, _getSelectedNode.getSelectedNode)(selection);
+      if ((0, _FontColorNode.$isFontColorNode)(node)) {
+        var colorStyle = node.getColorStyle();
+        setFontColor(colorStyle.color);
+      }
+    });
+  }, [editor]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("selectionchange", updatePopup);
+    return function () {
+      document.removeEventListener("selectionchange", updatePopup);
+    };
+  }, [updatePopup]);
+  return /*#__PURE__*/_react.default.createElement(_FontColorActionContext.FontColorActionContext.Provider, {
+    value: {
+      value: fontColor,
+      applyColor: onFontColorSelect
+    }
+  }, /*#__PURE__*/_react.default.createElement(FontColorPicker, null));
+};
+exports.FontColorAction = FontColorAction;
+{
+  /* Color action settings */
+}
+FontColorAction.ColorPicker = FontActionColorPicker;

package/components/ToolbarActions/FontColorAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FontColorPicker","makeComposable","useEffect","console","log","FontActionColorPicker","element","FontColorAction","useLexicalComposerContext","editor","useState","fontColor","setFontColor","setFontColorSelect","useCallback","fontColorValue","onFontColorSelect","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","color","updatePopup","getEditorState","read","selection","$getSelection","$isRangeSelection","node","getSelectedNode","$isFontColorNode","colorStyle","getColorStyle","document","addEventListener","removeEventListener","value","applyColor","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $getSelection, $isRangeSelection, LexicalCommand } from \"lexical\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"~/nodes/FontColorNode\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\n\nexport const FontColorPicker = makeComposable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker: React.FC<FontActionColorPicker> = ({ element }): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport interface FontColorAction extends React.FC<unknown> {\n    ColorPicker: typeof FontActionColorPicker;\n}\n\nexport const FontColorAction: FontColorAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [fontColor, setFontColor] = useState<string>(\"#000\");\n\n    const setFontColorSelect = useCallback(\n        (fontColorValue: string) => {\n            setFontColor(fontColorValue);\n        },\n        [fontColor]\n    );\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            setFontColorSelect(colorValue);\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: colorValue,\n                themeColorName\n            });\n        },\n        []\n    );\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            const selection = $getSelection();\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n            const node = getSelectedNode(selection);\n            if ($isFontColorNode(node)) {\n                const colorStyle = node.getColorStyle();\n                setFontColor(colorStyle.color);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    return (\n        <FontColorActionContext.Provider\n            value={{\n                value: fontColor,\n                applyColor: onFontColorSelect\n            }}\n        >\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\n{\n    /* Color action settings */\n}\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,eAAe,GAAG,IAAAC,gCAAc,EAAC,iBAAiB,EAAE,YAA0B;EACvF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAAC;AAMH,IAAMC,qBAAsD,GAAG,SAAzDA,qBAAsD,OAAiC;EAAA,IAA3BC,OAAO,QAAPA,OAAO;EACrE,oBAAO,6BAAC,yBAAO;IAAC,SAAS,EAAEN,eAAgB;IAAC,IAAI,EAAE;MAAA,OAAM;QAAA,OAAMM,OAAO;MAAA;IAAA;EAAC,EAAG;AAC7E,CAAC;AAMM,IAAMC,eAAgC,GAAG,SAAnCA,eAAgC,GAAS;EAClD,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAkC,IAAAC,eAAQ,EAAS,MAAM,CAAC;IAAA;IAAnDC,SAAS;IAAEC,YAAY;EAE9B,IAAMC,kBAAkB,GAAG,IAAAC,kBAAW,EAClC,UAACC,cAAsB,EAAK;IACxBH,YAAY,CAACG,cAAc,CAAC;EAChC,CAAC,EACD,CAACJ,SAAS,CAAC,CACd;EAED,IAAMK,iBAAiB,GAAG,IAAAF,kBAAW,EACjC,UAACG,UAAkB,EAAEC,cAAkC,EAAK;IACxDL,kBAAkB,CAACI,UAAU,CAAC;IAC9BR,MAAM,CAACU,eAAe,CAAmCC,qCAAsB,EAAE;MAC7EC,KAAK,EAAEJ,UAAU;MACjBC,cAAc,EAAdA;IACJ,CAAC,CAAC;EACN,CAAC,EACD,EAAE,CACL;EAED,IAAMI,WAAW,GAAG,IAAAR,kBAAW,EAAC,YAAM;IAClCL,MAAM,CAACc,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;MAC/B,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MACjC,IAAI,CAAC,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC/B;MACJ;MACA,IAAMG,IAAI,GAAG,IAAAC,gCAAe,EAACJ,SAAS,CAAC;MACvC,IAAI,IAAAK,+BAAgB,EAACF,IAAI,CAAC,EAAE;QACxB,IAAMG,UAAU,GAAGH,IAAI,CAACI,aAAa,EAAE;QACvCpB,YAAY,CAACmB,UAAU,CAACV,KAAK,CAAC;MAClC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACZ,MAAM,CAAC,CAAC;EAEZ,IAAAP,gBAAS,EAAC,YAAM;IACZ+B,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEZ,WAAW,CAAC;IACzD,OAAO,YAAM;MACTW,QAAQ,CAACE,mBAAmB,CAAC,iBAAiB,EAAEb,WAAW,CAAC;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACI,6BAAC,8CAAsB,CAAC,QAAQ;IAC5B,KAAK,EAAE;MACHc,KAAK,EAAEzB,SAAS;MAChB0B,UAAU,EAAErB;IAChB;EAAE,gBAEF,6BAAC,eAAe,OAAG,CACW;AAE1C,CAAC;AAAC;AAEF;EACI;AAAA;AAEJT,eAAe,CAAC+B,WAAW,GAAGjC,qBAAqB"}

package/components/ToolbarActions/FontSizeAction.js

@@ -14,9 +14,6 @@ var _selection = require("@lexical/selection");
 var _utils = require("@lexical/utils");
 var _lexical = require("lexical");
 var _DropDown = require("../../ui/DropDown");
-/**
- * Toolbar action. Allow user to change font size for selected text.
- */
 var FONT_SIZE_OPTIONS = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"];
 function dropDownActiveClass(active) {
   if (active) {

package/components/ToolbarActions/FontSizeAction.js.map

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

package/components/ToolbarActions/ItalicAction.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-/**
- * Toolbar action. On toolbar, you can see the button that is italic.
- */
 export declare const ItalicAction: () => JSX.Element;

package/components/ToolbarActions/ItalicAction.js

@@ -10,10 +10,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _lexical = require("lexical");
-/**
- * Toolbar action. On toolbar, you can see the button that is italic.
- */
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var ItalicAction = function ItalicAction() {
+  var _textBlockSelection$s;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -21,10 +20,16 @@ var ItalicAction = function ItalicAction() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isItalic = _useState2[0],
     setIsItalic = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection;
+  var isItalicSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.italic);
   var handleClick = function handleClick() {
     editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "italic");
     setIsItalic(!isItalic);
   };
+  (0, _react.useEffect)(function () {
+    setIsItalic(isItalicSelected);
+  }, [isItalicSelected]);
   return /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
       return handleClick();

package/components/ToolbarActions/ItalicAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","ItalicAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isItalic","setIsItalic","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. On toolbar, you can see the button that is italic.\n */\nexport const ItalicAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isItalic, setIsItalic] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n        setIsItalic(!isItalic);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isItalic ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACO,IAAMG,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAC9B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAAgC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAAxCG,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;IACrDH,WAAW,CAAC,CAACD,QAAQ,CAAC;EAC1B,CAAC;EAED,oBACIf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,EAAE;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAIP,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAAuB,gBAElCf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAe,EAAG,CAC1B;AAEjB,CAAC;AAACC,OAAA,CAAAlB,YAAA,GAAAA,YAAA"}
+{"version":3,"names":["ItalicAction","useLexicalComposerContext","editor","useState","isItalic","setIsItalic","useRichTextEditor","textBlockSelection","isItalicSelected","state","italic","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","useEffect"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const ItalicAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isItalic, setIsItalic] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isItalicSelected = !!textBlockSelection?.state?.italic;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n        setIsItalic(!isItalic);\n    };\n\n    useEffect(() => {\n        setIsItalic(isItalicSelected);\n    }, [isItalicSelected]);\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isItalic ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,YAAY,GAAG,SAAfA,YAAY,GAAS;EAAA;EAC9B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAxCC,QAAQ;IAAEC,WAAW;EAC5B,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,gBAAgB,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEE,KAAK,kDAAzB,sBAA2BC,MAAM;EAE5D,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBT,MAAM,CAACU,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;IACrDR,WAAW,CAAC,CAACD,QAAQ,CAAC;EAC1B,CAAC;EAED,IAAAU,gBAAS,EAAC,YAAM;IACZT,WAAW,CAACG,gBAAgB,CAAC;EACjC,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAEtB,oBACI;IACI,OAAO,EAAE;MAAA,OAAMG,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIP,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAAuB,gBAElC;IAAG,SAAS,EAAC;EAAe,EAAG,CAC1B;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/LinkAction.d.ts

@@ -1,7 +1,2 @@
 /// <reference types="react" />
-/**
- * Toolbar action. User can convert selected text in clickble link.
- * - Small size popup will be opened with input so user can enter the link.
- * - To remove the link, user need to select the already added link and click again in the action button.
- */
 export declare const LinkAction: () => JSX.Element;