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

package/components/ToolbarActions/LinkAction.js

@@ -13,11 +13,6 @@ var _link = require("@lexical/link");
 var _lexical = require("lexical");
 var _getSelectedNode = require("../../utils/getSelectedNode");
 var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-/**
- * 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.
- */
 var LinkAction = function LinkAction() {
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),

package/components/ToolbarActions/LinkAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_link","_lexical","_getSelectedNode","_useRichTextEditor2","LinkAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isLink","setIsLink","_useRichTextEditor","useRichTextEditor","setNodeIsText","insertLink","useCallback","dispatchCommand","TOGGLE_LINK_COMMAND","updatePopup","getEditorState","read","selection","$getSelection","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","useEffect","document","addEventListener","removeEventListener","createElement","onClick","className","exports"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@lexical/link\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\n/**\n * Toolbar action. User can convert selected text in clickble link.\n * - Small size popup will be opened with input so user can enter the link.\n * - To remove the link, user need to select the already added link and click again in the action button.\n */\nexport const LinkAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isLink, setIsLink] = useState(false);\n    const { setNodeIsText } = useRichTextEditor();\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, \"https://\");\n            setNodeIsText(false);\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            const selection = $getSelection();\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                setIsLink(true);\n            } else {\n                setIsLink(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMM,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,IAAAG,kBAAA,GAA0B,IAAAC,qCAAiB,GAAE;IAArCC,aAAa,GAAAF,kBAAA,CAAbE,aAAa;EAErB,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjC,IAAI,CAACN,MAAM,EAAE;MACTJ,MAAM,CAACW,eAAe,CAACC,yBAAmB,EAAE,UAAU,CAAC;MACvDJ,aAAa,CAAC,KAAK,CAAC;IACxB,CAAC,MAAM;MACHR,MAAM,CAACW,eAAe,CAACC,yBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACZ,MAAM,EAAEI,MAAM,CAAC,CAAC;EAEpB,IAAMS,WAAW,GAAG,IAAAH,kBAAW,EAAC,YAAM;IAClCV,MAAM,CAACc,cAAc,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;MACA,IAAMK,MAAM,GAAGF,IAAI,CAACG,SAAS,EAAE;MAC/B,IAAI,IAAAC,iBAAW,EAACF,MAAM,CAAC,IAAI,IAAAE,iBAAW,EAACJ,IAAI,CAAC,EAAE;QAC1Cd,SAAS,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACHA,SAAS,CAAC,KAAK,CAAC;MACpB;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ,IAAAwB,gBAAS,EAAC,YAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEb,WAAW,CAAC;IACzD,OAAO,YAAM;MACTY,QAAQ,CAACE,mBAAmB,CAAC,iBAAiB,EAAEd,WAAW,CAAC;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACI3B,MAAA,CAAAa,OAAA,CAAA6B,aAAA;IACIC,OAAO,EAAEpB,UAAW;IACpBqB,SAAS,EAAE,oBAAoB,IAAI1B,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBlB,MAAA,CAAAa,OAAA,CAAA6B,aAAA;IAAGE,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAACC,OAAA,CAAArC,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["LinkAction","useLexicalComposerContext","editor","useState","isLink","setIsLink","useRichTextEditor","setNodeIsText","insertLink","useCallback","dispatchCommand","TOGGLE_LINK_COMMAND","updatePopup","getEditorState","read","selection","$getSelection","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","useEffect","document","addEventListener","removeEventListener"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@lexical/link\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const LinkAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isLink, setIsLink] = useState(false);\n    const { setNodeIsText } = useRichTextEditor();\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, \"https://\");\n            setNodeIsText(false);\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            const selection = $getSelection();\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                setIsLink(true);\n            } else {\n                setIsLink(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAU,GAAS;EAC5B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,yBAA0B,IAAAC,qCAAiB,GAAE;IAArCC,aAAa,sBAAbA,aAAa;EAErB,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjC,IAAI,CAACL,MAAM,EAAE;MACTF,MAAM,CAACQ,eAAe,CAACC,yBAAmB,EAAE,UAAU,CAAC;MACvDJ,aAAa,CAAC,KAAK,CAAC;IACxB,CAAC,MAAM;MACHL,MAAM,CAACQ,eAAe,CAACC,yBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACT,MAAM,EAAEE,MAAM,CAAC,CAAC;EAEpB,IAAMQ,WAAW,GAAG,IAAAH,kBAAW,EAAC,YAAM;IAClCP,MAAM,CAACW,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;MACA,IAAMK,MAAM,GAAGF,IAAI,CAACG,SAAS,EAAE;MAC/B,IAAI,IAAAC,iBAAW,EAACF,MAAM,CAAC,IAAI,IAAAE,iBAAW,EAACJ,IAAI,CAAC,EAAE;QAC1Cb,SAAS,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACHA,SAAS,CAAC,KAAK,CAAC;MACpB;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACH,MAAM,CAAC,CAAC;EAEZ,IAAAqB,gBAAS,EAAC,YAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEb,WAAW,CAAC;IACzD,OAAO,YAAM;MACTY,QAAQ,CAACE,mBAAmB,CAAC,iBAAiB,EAAEd,WAAW,CAAC;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACI;IACI,OAAO,EAAEJ,UAAW;IACpB,SAAS,EAAE,oBAAoB,IAAIJ,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExB;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/NumberedListAction.d.ts

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

package/components/ToolbarActions/NumberedListAction.js

@@ -9,69 +9,33 @@ exports.NumberedListAction = 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 numbered list style.
- */
+var _webinyList = require("../../commands/webiny-list");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var NumberedListAction = function NumberedListAction() {
+  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 === "number") {
-          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) === "number";
+    setIsActive(isListBulletType);
+  }, [isListSelected]);
   var formatNumberedList = function formatNumberedList() {
     if (!isActive) {
       // will update the active state in the useEffect
-      editor.dispatchCommand(_list.INSERT_ORDERED_LIST_COMMAND, undefined);
+      editor.dispatchCommand(_webinyList.INSERT_ORDERED_WEBINY_LIST_COMMAND, {
+        themeStyleId: "list"
+      });
     } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND, undefined);
+      editor.dispatchCommand(_webinyList.REMOVE_WEBINY_LIST_COMMAND, undefined);
       // removing will not update correctly the active state, so we need to set to false manually.
       setIsActive(false);
     }

package/components/ToolbarActions/NumberedListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_list","_lexical","_utils","NumberedListAction","_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","formatNumberedList","dispatchCommand","INSERT_ORDERED_LIST_COMMAND","undefined","REMOVE_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    $isListNode,\n    INSERT_ORDERED_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 numbered list style.\n */\nexport const NumberedListAction = () => {\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 === \"number\") {\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 formatNumberedList = () => {\n        if (!isActive) {\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_ORDERED_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={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["NumberedListAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","isListSelected","state","list","isSelected","useEffect","isListBulletType","textType","formatNumberedList","dispatchCommand","INSERT_ORDERED_WEBINY_LIST_COMMAND","themeStyleId","REMOVE_WEBINY_LIST_COMMAND","undefined"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    INSERT_ORDERED_WEBINY_LIST_COMMAND,\n    REMOVE_WEBINY_LIST_COMMAND\n} from \"~/commands/webiny-list\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const NumberedListAction = () => {\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 === \"number\";\n        setIsActive(isListBulletType);\n    }, [isListSelected]);\n\n    const formatNumberedList = () => {\n        if (!isActive) {\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_ORDERED_WEBINY_LIST_COMMAND, { themeStyleId: \"list\" });\n        } else {\n            editor.dispatchCommand(REMOVE_WEBINY_LIST_COMMAND, undefined);\n            // removing will not update correctly the active state, so we need to set to false manually.\n            setIsActive(false);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAIA;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;EAAA;EACpC,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,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;IAC7B,IAAI,CAACX,QAAQ,EAAE;MACX;MACAF,MAAM,CAACc,eAAe,CAACC,8CAAkC,EAAE;QAAEC,YAAY,EAAE;MAAO,CAAC,CAAC;IACxF,CAAC,MAAM;MACHhB,MAAM,CAACc,eAAe,CAACG,sCAA0B,EAAEC,SAAS,CAAC;MAC7D;MACAf,WAAW,CAAC,KAAK,CAAC;IACtB;EACJ,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAMU,kBAAkB,EAAE;IAAA,CAAC;IACpC,SAAS,EAAE,oBAAoB,IAAIX,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA8B,gBAEzC;IAAG,SAAS,EAAC;EAAoB,EAAG,CAC/B;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/QuoteAction.d.ts

@@ -1,4 +1,2 @@
 /// <reference types="react" />
-import { QuoteNode } from "@lexical/rich-text";
-export declare function $createQuoteNode(): QuoteNode;
 export declare const QuoteAction: () => JSX.Element;

package/components/ToolbarActions/QuoteAction.js

@@ -5,18 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.$createQuoteNode = $createQuoteNode;
 exports.QuoteAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _selection = require("@lexical/selection");
-var _lexical = require("lexical");
 var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _richText = require("@lexical/rich-text");
-function $createQuoteNode() {
-  return new _richText.QuoteNode();
-}
+var _formatToQuote = require("../../utils/nodes/formatToQuote");
+var _formatToParagraph = require("../../utils/nodes/formatToParagraph");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var QuoteAction = function QuoteAction() {
+  var _textBlockSelection$s;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -24,35 +21,25 @@ var QuoteAction = function QuoteAction() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isActive = _useState2[0],
     setIsActive = _useState2[1];
-  var formatToParagraph = function formatToParagraph() {
-    editor.update(function () {
-      var selection = (0, _lexical.$getSelection)();
-      if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
-        (0, _selection.$wrapNodes)(selection, function () {
-          return (0, _lexical.$createParagraphNode)();
-        });
-      }
-    });
-  };
-  var formatToQuote = function formatToQuote() {
-    editor.update(function () {
-      var selection = (0, _lexical.$getSelection)();
-      if ((0, _lexical.$isRangeSelection)(selection) || (0, _lexical.DEPRECATED_$isGridSelection)(selection)) {
-        (0, _selection.$wrapNodes)(selection, function () {
-          return $createQuoteNode();
-        });
-      }
-    });
-  };
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection,
+    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
+  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) {
-      formatToQuote();
+      // Try to set default quote style, when the action button is clicked for first time
+      var DEFAULT_QUOTE_ID = "quote";
+      var hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];
+      (0, _formatToQuote.formatToQuote)(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);
       setIsActive(true);
       return;
     }
-    formatToParagraph();
+    (0, _formatToParagraph.formatToParagraph)(editor);
     setIsActive(false);
   };
+  (0, _react.useEffect)(function () {
+    setIsActive(isQuoteSelected);
+  }, [isQuoteSelected]);
   return /*#__PURE__*/_react.default.createElement("button", {
     onClick: function onClick() {
       return formatText();

package/components/ToolbarActions/QuoteAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_lexical","_LexicalComposerContext","_richText","$createQuoteNode","QuoteNode","QuoteAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isActive","setIsActive","formatToParagraph","update","selection","$getSelection","$isRangeSelection","DEPRECATED_$isGridSelection","$wrapNodes","$createParagraphNode","formatToQuote","formatText","createElement","onClick","className","exports"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { $wrapNodes } from \"@lexical/selection\";\nimport {\n    $createParagraphNode,\n    $getSelection,\n    $isRangeSelection,\n    DEPRECATED_$isGridSelection\n} from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { QuoteNode } from \"@lexical/rich-text\";\n\nexport function $createQuoteNode(): QuoteNode {\n    return new QuoteNode();\n}\n\nexport const QuoteAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n\n    const formatToParagraph = () => {\n        editor.update(() => {\n            const selection = $getSelection();\n\n            if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n                $wrapNodes(selection, () => $createParagraphNode());\n            }\n        });\n    };\n\n    const formatToQuote = () => {\n        editor.update(() => {\n            const selection = $getSelection();\n            if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {\n                $wrapNodes(selection, () => $createQuoteNode());\n            }\n        });\n    };\n\n    const formatText = () => {\n        if (!isActive) {\n            formatToQuote();\n            setIsActive(true);\n            return;\n        }\n        formatToParagraph();\n        setIsActive(false);\n    };\n\n    return (\n        <button\n            onClick={() => formatText()}\n            className={\"popup-item \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAMA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAEO,SAASK,gBAAgBA,CAAA,EAAc;EAC1C,OAAO,IAAIC,mBAAS,EAAE;AAC1B;AAEO,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAAjDG,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAE5B,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,EAAS;IAC5BN,MAAM,CAACO,MAAM,CAAC,YAAM;MAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MAEjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;QACxE,IAAAI,qBAAU,EAACJ,SAAS,EAAE;UAAA,OAAM,IAAAK,6BAAoB,GAAE;QAAA,EAAC;MACvD;IACJ,CAAC,CAAC;EACN,CAAC;EAED,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAA,EAAS;IACxBd,MAAM,CAACO,MAAM,CAAC,YAAM;MAChB,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MACjC,IAAI,IAAAC,0BAAiB,EAACF,SAAS,CAAC,IAAI,IAAAG,oCAA2B,EAACH,SAAS,CAAC,EAAE;QACxE,IAAAI,qBAAU,EAACJ,SAAS,EAAE;UAAA,OAAMhB,gBAAgB,EAAE;QAAA,EAAC;MACnD;IACJ,CAAC,CAAC;EACN,CAAC;EAED,IAAMuB,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrB,IAAI,CAACX,QAAQ,EAAE;MACXU,aAAa,EAAE;MACfT,WAAW,CAAC,IAAI,CAAC;MACjB;IACJ;IACAC,iBAAiB,EAAE;IACnBD,WAAW,CAAC,KAAK,CAAC;EACtB,CAAC;EAED,oBACIpB,MAAA,CAAAc,OAAA,CAAAiB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMF,UAAU,EAAE;IAAA,CAAC;IAC5BG,SAAS,EAAE,aAAa,IAAId,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IACtD,cAAW;EAAsB,gBAEjCnB,MAAA,CAAAc,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAY,EAAG,CACvB;AAEjB,CAAC;AAACC,OAAA,CAAAzB,WAAA,GAAAA,WAAA"}
+{"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\n            formatToQuote(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);\n            setIsActive(true);\n            return;\n        }\n        formatToParagraph(editor);\n        setIsActive(false);\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;MAE3E,IAAAE,4BAAa,EAACd,MAAM,EAAEa,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpEZ,WAAW,CAAC,IAAI,CAAC;MACjB;IACJ;IACA,IAAAa,oCAAiB,EAAChB,MAAM,CAAC;IACzBG,WAAW,CAAC,KAAK,CAAC;EACtB,CAAC;EAED,IAAAc,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"}

package/components/ToolbarActions/TypographyAction.d.ts

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

package/components/ToolbarActions/TypographyAction.js

@@ -0,0 +1,118 @@
+"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.TypographyAction = exports.BaseTypographyActionDropDown = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _reactComposition = require("@webiny/react-composition");
+var _TypographyActionContext = require("../../context/TypographyActionContext");
+var _TypographyElementNode = require("../../nodes/TypographyElementNode");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _webinyList = require("../../commands/webiny-list");
+var _webinyQuote = require("../../commands/webiny-quote");
+/*
+ * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.
+ * Note: Toa add custom component access trough @see LexicalEditorConfig API
+ * */
+var BaseTypographyActionDropDown = (0, _reactComposition.makeComposable)("BaseTypographyActionDropDown", function () {
+  (0, _react.useEffect)(function () {
+    console.log("Default BaseTypographyActionDropDown, please add your own component");
+  }, []);
+  return null;
+});
+exports.BaseTypographyActionDropDown = BaseTypographyActionDropDown;
+var TypographyActionDropDown = function TypographyActionDropDown(_ref) {
+  var element = _ref.element;
+  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+    component: BaseTypographyActionDropDown,
+    with: function _with() {
+      return function () {
+        return element;
+      };
+    }
+  });
+};
+var TypographyAction = function TypographyAction() {
+  var _textBlockSelection$s, _textBlockSelection$s2;
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    typography = _useState2[0],
+    setTypography = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection,
+    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
+  var isTypographySelected = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s = textBlockSelection.state) === null || _textBlockSelection$s === void 0 ? void 0 : _textBlockSelection$s.typography.isSelected) || false;
+  var textType = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s2 = textBlockSelection.state) === null || _textBlockSelection$s2 === void 0 ? void 0 : _textBlockSelection$s2.textType;
+  var setTypographySelect = (0, _react.useCallback)(function (value) {
+    setTypography(value);
+  }, [typography]);
+  var onTypographySelect = (0, _react.useCallback)(function (value) {
+    setTypographySelect(value);
+    if (value.tag.includes("h") || value.tag.includes("p")) {
+      editor.dispatchCommand(_TypographyElementNode.ADD_TYPOGRAPHY_ELEMENT_COMMAND, {
+        value: value
+      });
+    }
+    if (value.tag === "ol") {
+      editor.dispatchCommand(_webinyList.INSERT_ORDERED_WEBINY_LIST_COMMAND, {
+        themeStyleId: value.id
+      });
+    }
+    if (value.tag === "ul") {
+      editor.dispatchCommand(_webinyList.INSERT_UNORDERED_WEBINY_LIST_COMMAND, {
+        themeStyleId: value.id
+      });
+    }
+    if (value.tag === "quoteblock") {
+      editor.dispatchCommand(_webinyQuote.INSERT_WEBINY_QUOTE_COMMAND, {
+        themeStyleId: value.id
+      });
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (textBlockSelection) {
+      var _textBlockSelection$e;
+      // header and paragraph elements inserted with typography node
+      if ((0, _TypographyElementNode.$isTypographyElementNode)(textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element)) {
+        var el = textBlockSelection.element;
+        setTypography(el.getTypographyValue());
+        return;
+      }
+      // list and quote element
+      if (themeEmotionMap && textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$e = textBlockSelection.element) !== null && _textBlockSelection$e !== void 0 && _textBlockSelection$e.getStyleId) {
+        var _textBlockSelection$e2;
+        var themeStyleId = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$e2 = textBlockSelection.element) === null || _textBlockSelection$e2 === void 0 ? void 0 : _textBlockSelection$e2.getStyleId()) || undefined;
+        if (themeStyleId) {
+          var elementStyle = themeEmotionMap[themeStyleId];
+          if (elementStyle) {
+            setTypography({
+              id: elementStyle.id,
+              css: elementStyle.styles,
+              name: elementStyle.name,
+              tag: elementStyle.tag
+            });
+          }
+        }
+      }
+    }
+  }, [isTypographySelected, textType]);
+  return /*#__PURE__*/_react.default.createElement(_TypographyActionContext.TypographyActionContext.Provider, {
+    value: {
+      value: typography,
+      applyTypography: onTypographySelect
+    }
+  }, /*#__PURE__*/_react.default.createElement(BaseTypographyActionDropDown, null));
+};
+exports.TypographyAction = TypographyAction;
+{
+  /* Color action settings */
+}
+TypographyAction.TypographyDropDown = TypographyActionDropDown;

package/components/ToolbarActions/TypographyAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseTypographyActionDropDown","makeComposable","useEffect","console","log","TypographyActionDropDown","element","TypographyAction","useLexicalComposerContext","editor","useState","typography","setTypography","useRichTextEditor","textBlockSelection","themeEmotionMap","isTypographySelected","state","isSelected","textType","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_ELEMENT_COMMAND","INSERT_ORDERED_WEBINY_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_WEBINY_LIST_COMMAND","INSERT_WEBINY_QUOTE_COMMAND","$isTypographyElementNode","el","getTypographyValue","getStyleId","undefined","elementStyle","css","styles","name","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\n\nimport { TypographyValue } from \"~/types\";\nimport {\n    $isTypographyElementNode,\n    ADD_TYPOGRAPHY_ELEMENT_COMMAND,\n    TypographyElementNode,\n    TypographyPayload\n} from \"~/nodes/TypographyElementNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_WEBINY_LIST_COMMAND,\n    INSERT_UNORDERED_WEBINY_LIST_COMMAND,\n    WebinyListCommandPayload\n} from \"~/commands/webiny-list\";\nimport { INSERT_WEBINY_QUOTE_COMMAND, WebinyQuoteCommandPayload } from \"~/commands/webiny-quote\";\n\n/*\n * Base composable action component that is mounted on toolbar action as a placeholder for the custom toolbar action.\n * Note: Toa add custom component access trough @see LexicalEditorConfig API\n * */\nexport const BaseTypographyActionDropDown = makeComposable(\n    \"BaseTypographyActionDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTypographyActionDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TypographyActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TypographyActionDropDown: React.FC<TypographyActionDropdownProps> = ({\n    element\n}): JSX.Element => {\n    return <Compose component={BaseTypographyActionDropDown} with={() => () => element} />;\n};\n\nexport interface TypographyAction extends React.FC<unknown> {\n    TypographyDropDown: typeof TypographyActionDropDown;\n}\n\nexport const TypographyAction: TypographyAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [typography, setTypography] = useState<TypographyValue>();\n    const { textBlockSelection, themeEmotionMap } = useRichTextEditor();\n    const isTypographySelected = textBlockSelection?.state?.typography.isSelected || false;\n    const textType = textBlockSelection?.state?.textType;\n    const setTypographySelect = useCallback(\n        (value: TypographyValue) => {\n            setTypography(value);\n        },\n        [typography]\n    );\n\n    const onTypographySelect = useCallback((value: TypographyValue) => {\n        setTypographySelect(value);\n\n        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(\n                ADD_TYPOGRAPHY_ELEMENT_COMMAND,\n                {\n                    value\n                }\n            );\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<WebinyListCommandPayload>>(\n                INSERT_ORDERED_WEBINY_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<WebinyListCommandPayload>>(\n                INSERT_UNORDERED_WEBINY_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<WebinyQuoteCommandPayload>>(\n                INSERT_WEBINY_QUOTE_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n    }, []);\n\n    useEffect(() => {\n        if (textBlockSelection) {\n            // header and paragraph elements inserted with typography node\n            if ($isTypographyElementNode(textBlockSelection?.element)) {\n                const el = textBlockSelection.element as TypographyElementNode;\n                setTypography(el.getTypographyValue());\n                return;\n            }\n            // list and quote element\n            if (themeEmotionMap && textBlockSelection?.element?.getStyleId) {\n                const themeStyleId = textBlockSelection?.element?.getStyleId() || undefined;\n                if (themeStyleId) {\n                    const elementStyle = themeEmotionMap[themeStyleId];\n                    if (elementStyle) {\n                        setTypography({\n                            id: elementStyle.id,\n                            css: elementStyle.styles,\n                            name: elementStyle.name,\n                            tag: elementStyle.tag\n                        });\n                    }\n                }\n            }\n        }\n    }, [isTypographySelected, textType]);\n\n    return (\n        <TypographyActionContext.Provider\n            value={{\n                value: typography,\n                applyTypography: onTypographySelect\n            }}\n        >\n            <BaseTypographyActionDropDown />\n        </TypographyActionContext.Provider>\n    );\n};\n\n{\n    /* Color action settings */\n}\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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"}

package/components/ToolbarActions/UnderlineAction.d.ts

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

package/components/ToolbarActions/UnderlineAction.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 underline.
- */
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var UnderlineAction = function UnderlineAction() {
+  var _textBlockSelection$s;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -21,6 +20,12 @@ var UnderlineAction = function UnderlineAction() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isUnderline = _useState2[0],
     setIsUnderline = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection;
+  var isUnderlineSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.underline);
+  (0, _react.useEffect)(function () {
+    setIsUnderline(isUnderlineSelected);
+  }, [isUnderlineSelected]);
   var handleClick = function handleClick() {
     editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "underline");
     setIsUnderline(!isUnderline);

package/components/ToolbarActions/UnderlineAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","UnderlineAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isUnderline","setIsUnderline","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["UnderlineAction.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 underline.\n */\nexport const UnderlineAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isUnderline, setIsUnderline] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n        setIsUnderline(!isUnderline);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isUnderline ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format underline\" />\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,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACjC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAAsC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAA9CG,WAAW,GAAAD,UAAA;IAAEE,cAAc,GAAAF,UAAA;EAClC,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,WAAW,CAAC;IACxDH,cAAc,CAAC,CAACD,WAAW,CAAC;EAChC,CAAC;EAED,oBACIf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,EAAE;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAIP,WAAW,GAAG,QAAQ,GAAG,EAAE,CAAE;IAChE,cAAW;EAAuB,gBAElCf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAkB,EAAG,CAC7B;AAEjB,CAAC;AAACC,OAAA,CAAAlB,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["UnderlineAction","useLexicalComposerContext","editor","useState","isUnderline","setIsUnderline","useRichTextEditor","textBlockSelection","isUnderlineSelected","state","underline","useEffect","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND"],"sources":["UnderlineAction.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 UnderlineAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isUnderline, setIsUnderline] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isUnderlineSelected = !!textBlockSelection?.state?.underline;\n\n    useEffect(() => {\n        setIsUnderline(isUnderlineSelected);\n    }, [isUnderlineSelected]);\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n        setIsUnderline(!isUnderline);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isUnderline ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format underline\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAe,GAAS;EAAA;EACjC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAsC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAA9CC,WAAW;IAAEC,cAAc;EAClC,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,mBAAmB,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEE,KAAK,kDAAzB,sBAA2BC,SAAS;EAElE,IAAAC,gBAAS,EAAC,YAAM;IACZN,cAAc,CAACG,mBAAmB,CAAC;EACvC,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,IAAMI,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBV,MAAM,CAACW,eAAe,CAACC,4BAAmB,EAAE,WAAW,CAAC;IACxDT,cAAc,CAAC,CAACD,WAAW,CAAC;EAChC,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAMQ,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIR,WAAW,GAAG,QAAQ,GAAG,EAAE,CAAE;IAChE,cAAW;EAAuB,gBAElC;IAAG,SAAS,EAAC;EAAkB,EAAG,CAC7B;AAEjB,CAAC;AAAC"}

package/components/ToolbarPresets/HeadingToolbarPreset.js

@@ -14,10 +14,18 @@ var _CodeHighlightAction = require("../ToolbarActions/CodeHighlightAction");
 var _LinkAction = require("../ToolbarActions/LinkAction");
 var _FontSizeAction = require("../ToolbarActions/FontSizeAction");
 var _Divider = require("../../ui/Divider");
+var _FontColorAction = require("../ToolbarActions/FontColorAction");
+var _TypographyAction = require("../ToolbarActions/TypographyAction");
 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),
     type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_FontColorAction.FontColorAction, null),
+    type: "heading"
+  }), /*#__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(_Divider.Divider, null),
     type: "heading"

package/components/ToolbarPresets/HeadingToolbarPreset.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_BoldAction","_AddToolbarAction","_ItalicAction","_UnderlineAction","_CodeHighlightAction","_LinkAction","_FontSizeAction","_Divider","HeadingToolbarPreset","default","createElement","Fragment","AddToolbarAction","element","FontSizeAction","type","Divider","BoldAction","ItalicAction","UnderlineAction","CodeHighlightAction","LinkAction","exports"],"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\";\n\nexport const HeadingToolbarPreset = () => {\n    return (\n        <>\n            <AddToolbarAction element={<FontSizeAction />} 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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AACA,IAAAQ,QAAA,GAAAR,OAAA;AAEO,IAAMS,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA,EAAS;EACtC,oBACIX,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAAAb,MAAA,CAAAY,OAAA,CAAAE,QAAA,qBACId,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAW,gBAAgB;IAACC,OAAO,eAAEhB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACJ,eAAA,CAAAQ,cAAc,OAAI;IAACC,IAAI,EAAE;EAAU,EAAG,eAClElB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAW,gBAAgB;IAACC,OAAO,eAAEhB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACH,QAAA,CAAAS,OAAO,OAAI;IAACD,IAAI,EAAE;EAAU,EAAG,eAC3DlB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAW,gBAAgB;IAACC,OAAO,eAAEhB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,WAAA,CAAAiB,UAAU,OAAI;IAACF,IAAI,EAAE;EAAU,EAAG,eAC9DlB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAW,gBAAgB;IAACC,OAAO,eAAEhB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAgB,YAAY,OAAI;IAACH,IAAI,EAAE;EAAU,EAAG,eAChElB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAW,gBAAgB;IAACC,OAAO,eAAEhB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACP,gBAAA,CAAAgB,eAAe,OAAI;IAACJ,IAAI,EAAE;EAAU,EAAG,eACnElB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAW,gBAAgB;IAACC,OAAO,eAAEhB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACN,oBAAA,CAAAgB,mBAAmB,OAAI;IAACL,IAAI,EAAE;EAAU,EAAG,eACvElB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAW,gBAAgB;IAACC,OAAO,eAAEhB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACH,QAAA,CAAAS,OAAO,OAAI;IAACD,IAAI,EAAE;EAAU,EAAG,eAC3DlB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,iBAAA,CAAAW,gBAAgB;IAACC,OAAO,eAAEhB,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACL,WAAA,CAAAgB,UAAU,OAAI;IAACN,IAAI,EAAE;EAAU,EAAG,CAC/D;AAEX,CAAC;AAACO,OAAA,CAAAd,oBAAA,GAAAA,oBAAA"}
+{"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"}

package/components/ToolbarPresets/ParagraphToolbarPreset.js

@@ -17,10 +17,18 @@ var _Divider = require("../../ui/Divider");
 var _NumberedListAction = require("../ToolbarActions/NumberedListAction");
 var _BulletListAction = require("../ToolbarActions/BulletListAction");
 var _QuoteAction = require("../ToolbarActions/QuoteAction");
+var _FontColorAction = require("../ToolbarActions/FontColorAction");
+var _TypographyAction = require("../ToolbarActions/TypographyAction");
 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),
     type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_FontColorAction.FontColorAction, null),
+    type: "paragraph"
+  }), /*#__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(_Divider.Divider, null),
     type: "paragraph"

package/components/ToolbarPresets/ParagraphToolbarPreset.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_BoldAction","_AddToolbarAction","_ItalicAction","_UnderlineAction","_CodeHighlightAction","_LinkAction","_FontSizeAction","_Divider","_NumberedListAction","_BulletListAction","_QuoteAction","ParagraphToolbarPreset","default","createElement","Fragment","AddToolbarAction","element","FontSizeAction","type","Divider","BoldAction","ItalicAction","UnderlineAction","CodeHighlightAction","NumberedListAction","BulletListAction","LinkAction","QuoteAction","exports"],"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\";\n\nexport const ParagraphToolbarPreset = () => {\n    return (\n        <>\n            <AddToolbarAction element={<FontSizeAction />} 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":"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"}
+{"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"}

package/context/FontColorActionContext.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface FontColorActionContext {
+    value: string;
+    applyColor: (value: string, themeColorName: string | undefined) => void;
+}
+export declare const FontColorActionContext: React.Context<FontColorActionContext | undefined>;

package/context/FontColorActionContext.js

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

package/context/FontColorActionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FontColorActionContext","React","createContext","undefined"],"sources":["FontColorActionContext.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface FontColorActionContext {\n    /*\n     * @desc Current selected color value\n     * */\n    value: string;\n\n    /*\n     * @desc Apply color to selected text.\n     * @params: value\n     */\n    applyColor: (value: string, themeColorName: string | undefined) => void;\n}\n\nexport const FontColorActionContext = React.createContext<FontColorActionContext | undefined>(\n    undefined\n);\n"],"mappings":";;;;;;;AAAA;AAeO,IAAMA,sBAAsB,gBAAGC,cAAK,CAACC,aAAa,CACrDC,SAAS,CACZ;AAAC"}