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

package/components/ToolbarActions/TextAlignmentAction.js

@@ -9,9 +9,11 @@ exports.TextAlignmentAction = exports.BaseTextAlignmentDropDown = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _lexical = require("lexical");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _reactComposition = require("@webiny/react-composition");
 var _TextAlignmentActionContextProps = require("../../context/TextAlignmentActionContextProps");
+var _useCurrentSelection = require("../../hooks/useCurrentSelection");
+var _getSelectedNode = require("../../utils/getSelectedNode");
 /*
  * Base text alignment dropdown composable component.
  * Note: To add a custom dropdown component use @see LexicalEditorConfig API.
@@ -35,36 +37,40 @@ var TextAlignmentActionDropDown = function TextAlignmentActionDropDown(_ref) {
   });
 };
 var TextAlignmentAction = function TextAlignmentAction() {
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    activeEditor = _useRichTextEditor.activeEditor;
-  var _useState = (0, _react.useState)(""),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    alignmentValue = _useState2[0],
-    setAlignmentValue = _useState2[1];
-  var applyTextAlignment = function applyTextAlignment(value) {
-    if (activeEditor) {
-      activeEditor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, value);
-      setAlignmentValue(value);
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var alignmentValue = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref2) {
+    var rangeSelection = _ref2.rangeSelection;
+    var node = rangeSelection ? (0, _getSelectedNode.getSelectedNode)(rangeSelection) : null;
+    if (node) {
+      var _node$getParent;
+      return ((_node$getParent = node.getParent()) === null || _node$getParent === void 0 ? void 0 : _node$getParent.getFormatType()) || "";
     }
+    return "";
+  });
+  var applyTextAlignment = function applyTextAlignment(value) {
+    editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, value);
   };
   var outdentText = function outdentText() {
-    if (activeEditor) {
-      activeEditor.dispatchCommand(_lexical.OUTDENT_CONTENT_COMMAND, undefined);
-    }
+    editor.dispatchCommand(_lexical.OUTDENT_CONTENT_COMMAND, undefined);
   };
   var indentText = function indentText() {
-    if (activeEditor) {
-      activeEditor.dispatchCommand(_lexical.INDENT_CONTENT_COMMAND, undefined);
-    }
+    editor.dispatchCommand(_lexical.INDENT_CONTENT_COMMAND, undefined);
   };
-  return /*#__PURE__*/_react.default.createElement(_TextAlignmentActionContextProps.TextAlignmentActionContext.Provider, {
-    value: {
+  var context = (0, _react.useMemo)(function () {
+    return {
       value: alignmentValue,
       applyTextAlignment: applyTextAlignment,
       outdentText: outdentText,
       indentText: indentText
-    }
+    };
+  }, [alignmentValue]);
+  return /*#__PURE__*/_react.default.createElement(_TextAlignmentActionContextProps.TextAlignmentActionContext.Provider, {
+    value: context
   }, /*#__PURE__*/_react.default.createElement(BaseTextAlignmentDropDown, null));
 };
 exports.TextAlignmentAction = TextAlignmentAction;
-TextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;
+TextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;
+
+//# sourceMappingURL=TextAlignmentAction.js.map

package/components/ToolbarActions/TextAlignmentAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_useRichTextEditor2","_reactComposition","_TextAlignmentActionContextProps","BaseTextAlignmentDropDown","makeComposable","useEffect","console","log","exports","TextAlignmentActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TextAlignmentAction","_useRichTextEditor","useRichTextEditor","activeEditor","_useState","useState","_useState2","_slicedToArray2","alignmentValue","setAlignmentValue","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","TextAlignmentActionContext","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport {\n    ElementFormatType,\n    FORMAT_ELEMENT_COMMAND,\n    INDENT_CONTENT_COMMAND,\n    OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeComposable(\n    \"BaseTextAlignmentDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TextAlignmentActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TextAlignmentActionDropDown: React.FC<TextAlignmentActionDropdownProps> = ({\n    element\n}): JSX.Element => {\n    return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport interface TextAlignmentAction extends React.FC<unknown> {\n    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n}\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n    const { activeEditor } = useRichTextEditor();\n    const [alignmentValue, setAlignmentValue] = useState<ElementFormatType>(\"\");\n    const applyTextAlignment = (value: ElementFormatType) => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n            setAlignmentValue(value);\n        }\n    };\n\n    const outdentText = () => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n        }\n    };\n\n    const indentText = () => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <TextAlignmentActionContext.Provider\n            value={{ value: alignmentValue, applyTextAlignment, outdentText, indentText }}\n        >\n            <BaseTextAlignmentDropDown />\n        </TextAlignmentActionContext.Provider>\n    );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,gCAAA,GAAAJ,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMK,yBAAyB,GAAG,IAAAC,gCAAc,EACnD,2BAA2B,EAC3B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAACC,OAAA,CAAAL,yBAAA,GAAAA,yBAAA;AAMF,IAAMM,2BAAuE,GAAG,SAA1EA,2BAAuEA,CAAAC,IAAA,EAE1D;EAAA,IADfC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAEP,oBAAOf,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACZ,iBAAA,CAAAa,OAAO;IAACC,SAAS,EAAEZ,yBAA0B;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AACvF,CAAC;AAMM,IAAMO,mBAAwC,GAAG,SAA3CA,mBAAwCA,CAAA,EAAS;EAC1D,IAAAC,kBAAA,GAAyB,IAAAC,qCAAiB,EAAC,CAAC;IAApCC,YAAY,GAAAF,kBAAA,CAAZE,YAAY;EACpB,IAAAC,SAAA,GAA4C,IAAAC,eAAQ,EAAoB,EAAE,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAb,OAAA,EAAAU,SAAA;IAApEI,cAAc,GAAAF,UAAA;IAAEG,iBAAiB,GAAAH,UAAA;EACxC,IAAMI,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAwB,EAAK;IACrD,IAAIR,YAAY,EAAE;MACdA,YAAY,CAACS,eAAe,CAACC,+BAAsB,EAAEF,KAAK,CAAC;MAC3DF,iBAAiB,CAACE,KAAK,CAAC;IAC5B;EACJ,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtB,IAAIX,YAAY,EAAE;MACdA,YAAY,CAACS,eAAe,CAACG,gCAAuB,EAAEC,SAAS,CAAC;IACpE;EACJ,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACrB,IAAId,YAAY,EAAE;MACdA,YAAY,CAACS,eAAe,CAACM,+BAAsB,EAAEF,SAAS,CAAC;IACnE;EACJ,CAAC;EAED,oBACItC,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACX,gCAAA,CAAAmC,0BAA0B,CAACC,QAAQ;IAChCT,KAAK,EAAE;MAAEA,KAAK,EAAEH,cAAc;MAAEE,kBAAkB,EAAlBA,kBAAkB;MAAEI,WAAW,EAAXA,WAAW;MAAEG,UAAU,EAAVA;IAAW;EAAE,gBAE9EvC,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACV,yBAAyB,MAAE,CACK,CAAC;AAE9C,CAAC;AAACK,OAAA,CAAAU,mBAAA,GAAAA,mBAAA;AAEFA,mBAAmB,CAACqB,qBAAqB,GAAG9B,2BAA2B"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_LexicalComposerContext","_reactComposition","_TextAlignmentActionContextProps","_useCurrentSelection","_getSelectedNode","BaseTextAlignmentDropDown","makeComposable","useEffect","console","log","exports","TextAlignmentActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TextAlignmentAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","alignmentValue","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","_node$getParent","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","context","useMemo","TextAlignmentActionContext","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    ElementFormatType,\n    FORMAT_ELEMENT_COMMAND,\n    INDENT_CONTENT_COMMAND,\n    OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeComposable(\n    \"BaseTextAlignmentDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TextAlignmentActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TextAlignmentActionDropDown: React.FC<TextAlignmentActionDropdownProps> = ({\n    element\n}): JSX.Element => {\n    return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport interface TextAlignmentAction extends React.FC<unknown> {\n    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n}\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const alignmentValue: ElementFormatType = useDeriveValueFromSelection(({ rangeSelection }) => {\n        const node = rangeSelection ? getSelectedNode(rangeSelection) : null;\n        if (node) {\n            return node.getParent()?.getFormatType() || \"\";\n        }\n        return \"\";\n    });\n\n    const applyTextAlignment = (value: ElementFormatType) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n    };\n\n    const outdentText = () => {\n        editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const indentText = () => {\n        editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const context = useMemo(\n        () => ({\n            value: alignmentValue,\n            applyTextAlignment,\n            outdentText,\n            indentText\n        }),\n        [alignmentValue]\n    );\n\n    return (\n        <TextAlignmentActionContext.Provider value={context}>\n            <BaseTextAlignmentDropDown />\n        </TextAlignmentActionContext.Provider>\n    );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":"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"}

package/components/ToolbarActions/TypographyAction.js

@@ -11,13 +11,10 @@ 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 _lexicalNodes = require("@webiny/lexical-nodes");
 var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _webinyList = require("../../commands/webiny-list");
-var _webinyQuote = require("../../commands/webiny-quote");
-var _ParagraphNode = require("../../nodes/ParagraphNode");
-var _HeadingNode = require("../../nodes/HeadingNode");
-var _QuoteNode = require("../../nodes/QuoteNode");
+var _commands = require("../../commands");
+var _useCurrentElement2 = require("../../hooks/useCurrentElement");
 /*
  * 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
@@ -41,7 +38,6 @@ var TypographyActionDropDown = function TypographyActionDropDown(_ref) {
   });
 };
 var TypographyAction = function TypographyAction() {
-  var _textBlockSelection$s, _textBlockSelection$s2, _textBlockSelection$s3, _textBlockSelection$s4, _textBlockSelection$s5;
   var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
     _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -50,87 +46,85 @@ var TypographyAction = function TypographyAction() {
     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 isParagraphSelected = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s2 = textBlockSelection.state) === null || _textBlockSelection$s2 === void 0 ? void 0 : _textBlockSelection$s2.paragraph.isSelected) || false;
-  var isHeadingSelected = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s3 = textBlockSelection.state) === null || _textBlockSelection$s3 === void 0 ? void 0 : _textBlockSelection$s3.heading.isSelected) || false;
-  var textType = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s4 = textBlockSelection.state) === null || _textBlockSelection$s4 === void 0 ? void 0 : _textBlockSelection$s4.textType;
-  var isQuoteSelected = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s5 = textBlockSelection.state) === null || _textBlockSelection$s5 === void 0 ? void 0 : _textBlockSelection$s5.quote.isSelected) || false;
+  var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
+    element = _useCurrentElement.element;
+  var isTypographySelected = (0, _lexicalNodes.$isTypographyNode)(element);
+  var isParagraphSelected = (0, _lexicalNodes.$isParagraphNode)(element);
+  var isHeadingSelected = (0, _lexicalNodes.$isHeadingNode)(element);
+  var isQuoteSelected = (0, _lexicalNodes.$isQuoteNode)(element);
   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, {
+      editor.dispatchCommand(_lexicalNodes.ADD_TYPOGRAPHY_COMMAND, {
         value: value
       });
     }
     if (value.tag === "ol") {
-      editor.dispatchCommand(_webinyList.INSERT_ORDERED_WEBINY_LIST_COMMAND, {
+      editor.dispatchCommand(_commands.INSERT_ORDERED_LIST_COMMAND, {
         themeStyleId: value.id
       });
     }
     if (value.tag === "ul") {
-      editor.dispatchCommand(_webinyList.INSERT_UNORDERED_WEBINY_LIST_COMMAND, {
+      editor.dispatchCommand(_commands.INSERT_UNORDERED_LIST_COMMAND, {
         themeStyleId: value.id
       });
     }
     if (value.tag === "quoteblock") {
-      editor.dispatchCommand(_webinyQuote.INSERT_WEBINY_QUOTE_COMMAND, {
+      editor.dispatchCommand(_commands.INSERT_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());
+    if (!element) {
+      return;
+    }
+    // header and paragraph elements inserted with typography node
+    if (isTypographySelected) {
+      var el = element;
+      setTypography(el.getTypographyValue());
+      return;
+    }
+    if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {
+      var styleId = element.getTypographyStyleId();
+      if (!styleId) {
         return;
       }
-      if ((0, _ParagraphNode.$isParagraphNode)(textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element) || (0, _HeadingNode.$isHeadingNode)(textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element) || (0, _QuoteNode.$isQuoteNode)(textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element)) {
-        var elementWithThemeStyle = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : textBlockSelection.element;
-        var styleId = elementWithThemeStyle.getTypographyStyleId();
-        if (!styleId) {
-          return;
-        }
-        if (!themeEmotionMap) {
-          return;
-        }
-        var style = themeEmotionMap[styleId];
-        if (style) {
-          setTypography({
-            name: style === null || style === void 0 ? void 0 : style.name,
-            id: style.id,
-            css: style.styles,
-            tag: style.tag
-          });
-        }
+      if (!themeEmotionMap) {
         return;
       }
+      var style = themeEmotionMap[styleId];
+      if (style) {
+        setTypography({
+          name: style === null || style === void 0 ? void 0 : style.name,
+          id: style.id,
+          css: style.styles,
+          tag: style.tag
+        });
+      }
+      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
-            });
-          }
+    // list and quote element
+    if (themeEmotionMap && element !== null && element !== void 0 && element.getStyleId) {
+      var themeStyleId = (element === null || element === void 0 ? void 0 : element.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, isQuoteSelected, isParagraphSelected, isHeadingSelected]);
+  }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);
   return /*#__PURE__*/_react.default.createElement(_TypographyActionContext.TypographyActionContext.Provider, {
     value: {
       value: typography,
@@ -139,7 +133,6 @@ var TypographyAction = function TypographyAction() {
   }, /*#__PURE__*/_react.default.createElement(BaseTypographyActionDropDown, null));
 };
 exports.TypographyAction = TypographyAction;
-{
-  /* Typography dropdown settings */
-}
-TypographyAction.TypographyDropDown = TypographyActionDropDown;
+TypographyAction.TypographyDropDown = TypographyActionDropDown;
+
+//# sourceMappingURL=TypographyAction.js.map

package/components/ToolbarActions/TypographyAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_reactComposition","_TypographyActionContext","_TypographyElementNode","_useRichTextEditor2","_webinyList","_webinyQuote","_ParagraphNode","_HeadingNode","_QuoteNode","BaseTypographyActionDropDown","makeComposable","useEffect","console","log","exports","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_textBlockSelection$s","_textBlockSelection$s2","_textBlockSelection$s3","_textBlockSelection$s4","_textBlockSelection$s5","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","_useState","useState","_useState2","typography","setTypography","_useRichTextEditor","useRichTextEditor","textBlockSelection","themeEmotionMap","isTypographySelected","state","isSelected","isParagraphSelected","paragraph","isHeadingSelected","heading","textType","isQuoteSelected","quote","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","_textBlockSelection$e","$isTypographyElementNode","el","getTypographyValue","$isParagraphNode","$isHeadingNode","$isQuoteNode","elementWithThemeStyle","styleId","getTypographyStyleId","style","name","css","styles","getStyleId","_textBlockSelection$e2","undefined","elementStyle","TypographyActionContext","Provider","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\";\nimport { $isParagraphNode } from \"~/nodes/ParagraphNode\";\nimport { $isHeadingNode } from \"~/nodes/HeadingNode\";\nimport { $isQuoteNode } from \"~/nodes/QuoteNode\";\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 isParagraphSelected = textBlockSelection?.state?.paragraph.isSelected || false;\n    const isHeadingSelected = textBlockSelection?.state?.heading.isSelected || false;\n    const textType = textBlockSelection?.state?.textType;\n    const isQuoteSelected = textBlockSelection?.state?.quote.isSelected || false;\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        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\n            if (\n                $isParagraphNode(textBlockSelection?.element) ||\n                $isHeadingNode(textBlockSelection?.element) ||\n                $isQuoteNode(textBlockSelection?.element)\n            ) {\n                const elementWithThemeStyle = textBlockSelection?.element;\n                const styleId = elementWithThemeStyle.getTypographyStyleId();\n                if (!styleId) {\n                    return;\n                }\n\n                if (!themeEmotionMap) {\n                    return;\n                }\n\n                const style = themeEmotionMap[styleId];\n                if (style) {\n                    setTypography({\n                        name: style?.name,\n                        id: style.id,\n                        css: style.styles,\n                        tag: style.tag\n                    });\n                }\n                return;\n            }\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, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\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    /* Typography dropdown settings */\n}\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_reactComposition","_TypographyActionContext","_lexicalNodes","_useRichTextEditor2","_commands","_useCurrentElement2","BaseTypographyActionDropDown","makeComposable","useEffect","console","log","exports","TypographyActionDropDown","_ref","element","default","createElement","Compose","component","with","_with","TypographyAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","_useState","useState","_useState2","typography","setTypography","_useRichTextEditor","useRichTextEditor","themeEmotionMap","_useCurrentElement","useCurrentElement","isTypographySelected","$isTypographyNode","isParagraphSelected","$isParagraphNode","isHeadingSelected","$isHeadingNode","isQuoteSelected","$isQuoteNode","setTypographySelect","useCallback","value","onTypographySelect","tag","includes","dispatchCommand","ADD_TYPOGRAPHY_COMMAND","INSERT_ORDERED_LIST_COMMAND","themeStyleId","id","INSERT_UNORDERED_LIST_COMMAND","INSERT_QUOTE_COMMAND","el","getTypographyValue","styleId","getTypographyStyleId","style","name","css","styles","getStyleId","undefined","elementStyle","TypographyActionContext","Provider","applyTypography","TypographyDropDown"],"sources":["TypographyAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\nimport { TypographyActionContext } from \"~/context/TypographyActionContext\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isTypographyNode,\n    ADD_TYPOGRAPHY_COMMAND,\n    TypographyNode,\n    TypographyPayload\n} from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport {\n    INSERT_ORDERED_LIST_COMMAND,\n    INSERT_UNORDERED_LIST_COMMAND,\n    INSERT_QUOTE_COMMAND,\n    ListCommandPayload,\n    QuoteCommandPayload\n} from \"~/commands\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\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 { themeEmotionMap } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isTypographySelected = $isTypographyNode(element);\n    const isParagraphSelected = $isParagraphNode(element);\n    const isHeadingSelected = $isHeadingNode(element);\n    const isQuoteSelected = $isQuoteNode(element);\n\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        if (value.tag.includes(\"h\") || value.tag.includes(\"p\")) {\n            editor.dispatchCommand<LexicalCommand<TypographyPayload>>(ADD_TYPOGRAPHY_COMMAND, {\n                value\n            });\n        }\n\n        if (value.tag === \"ol\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_ORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"ul\") {\n            editor.dispatchCommand<LexicalCommand<ListCommandPayload>>(\n                INSERT_UNORDERED_LIST_COMMAND,\n                {\n                    themeStyleId: value.id\n                }\n            );\n        }\n\n        if (value.tag === \"quoteblock\") {\n            editor.dispatchCommand<LexicalCommand<QuoteCommandPayload>>(INSERT_QUOTE_COMMAND, {\n                themeStyleId: value.id\n            });\n        }\n    }, []);\n\n    useEffect(() => {\n        if (!element) {\n            return;\n        }\n        // header and paragraph elements inserted with typography node\n        if (isTypographySelected) {\n            const el = element as TypographyNode;\n            setTypography(el.getTypographyValue());\n            return;\n        }\n\n        if (isParagraphSelected || isHeadingSelected || isQuoteSelected) {\n            const styleId = element.getTypographyStyleId();\n            if (!styleId) {\n                return;\n            }\n\n            if (!themeEmotionMap) {\n                return;\n            }\n\n            const style = themeEmotionMap[styleId];\n            if (style) {\n                setTypography({\n                    name: style?.name,\n                    id: style.id,\n                    css: style.styles,\n                    tag: style.tag\n                });\n            }\n            return;\n        }\n\n        // list and quote element\n        if (themeEmotionMap && element?.getStyleId) {\n            const themeStyleId = 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    }, [element, isTypographySelected, isQuoteSelected, isParagraphSelected, isHeadingSelected]);\n\n    return (\n        <TypographyActionContext.Provider\n            value={{\n                value: typography,\n                applyTypography: onTypographySelect\n            }}\n        >\n            <BaseTypographyActionDropDown />\n        </TypographyActionContext.Provider>\n    );\n};\n\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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"}

package/components/ToolbarActions/UnderlineAction.js

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

package/components/ToolbarActions/UnderlineAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","_useRichTextEditor2","UnderlineAction","_textBlockSelection$s","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isUnderline","setIsUnderline","_useRichTextEditor","useRichTextEditor","textBlockSelection","isUnderlineSelected","state","underline","useEffect","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAEO,IAAMI,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EAAA,IAAAC,qBAAA;EACjC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;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,IAAAG,kBAAA,GAA+B,IAAAC,qCAAiB,EAAC,CAAC;IAA1CC,kBAAkB,GAAAF,kBAAA,CAAlBE,kBAAkB;EAC1B,IAAMC,mBAAmB,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,gBAAAd,qBAAA,GAAlBc,kBAAkB,CAAEE,KAAK,cAAAhB,qBAAA,eAAzBA,qBAAA,CAA2BiB,SAAS;EAElE,IAAAC,gBAAS,EAAC,YAAM;IACZP,cAAc,CAACI,mBAAmB,CAAC;EACvC,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBb,MAAM,CAACc,eAAe,CAACC,4BAAmB,EAAE,WAAW,CAAC;IACxDV,cAAc,CAAC,CAACD,WAAW,CAAC;EAChC,CAAC;EAED,oBACIjB,MAAA,CAAAY,OAAA,CAAAiB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,CAAC,CAAC;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAId,WAAW,GAAG,QAAQ,GAAG,EAAE,CAAE;IAChE,cAAW;EAAuB,gBAElCjB,MAAA,CAAAY,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAA1B,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_useCurrentSelection2","_LexicalComposerContext","UnderlineAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isUnderlineSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["UnderlineAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\n\nexport const UnderlineAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { rangeSelection } = useCurrentSelection();\n    const isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat(\"underline\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isUnderlineSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format underline\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAEO,IAAMI,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACjC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,mBAAmB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,WAAW,CAAC,GAAG,KAAK;EAE1F,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,WAAW,CAAC;EAC5D,CAAC;EAED,oBACIpB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAEJ,WAAY;IACrBK,SAAS,EAAE,oBAAoB,IAAIP,mBAAmB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACxE,cAAW;EAAuB,gBAElChB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAlB,eAAA,GAAAA,eAAA"}

package/context/FontColorActionContext.js

@@ -7,4 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.FontColorActionContext = void 0;
 var _react = _interopRequireDefault(require("react"));
 var FontColorActionContext = /*#__PURE__*/_react.default.createContext(undefined);
-exports.FontColorActionContext = FontColorActionContext;
+exports.FontColorActionContext = FontColorActionContext;
+
+//# sourceMappingURL=FontColorActionContext.js.map

package/context/RichTextEditorContext.d.ts

@@ -1,14 +1,10 @@
 import React from "react";
-import { TextBlockSelection, ThemeEmotionMap, ToolbarActionPlugin, ToolbarType } from "../types";
-import { WebinyTheme } from "../themes/webinyLexicalTheme";
 import { LexicalEditor } from "lexical";
+import type { ThemeEmotionMap, WebinyTheme } from "@webiny/lexical-theme";
+import { ToolbarActionPlugin, ToolbarType } from "../types";
 export interface RichTextEditorContext {
-    nodeIsText: boolean;
-    setNodeIsText: (nodeIsText: boolean) => void;
     toolbarType?: ToolbarType;
     setToolbarType: (type: ToolbarType) => void;
-    textBlockSelection: TextBlockSelection | null;
-    setTextBlockSelection: (textBlockSelection: TextBlockSelection) => void;
     theme?: WebinyTheme;
     setTheme: (theme: WebinyTheme) => void;
     themeEmotionMap?: ThemeEmotionMap;

package/context/RichTextEditorContext.js

@@ -12,52 +12,34 @@ var RichTextEditorContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.RichTextEditorContext = RichTextEditorContext;
 var RichTextEditorProvider = function RichTextEditorProvider(_ref) {
   var children = _ref.children;
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    nodeIsText = _useState2[0],
-    setIsText = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
+    toolbarType = _useState2[0],
+    setToolbarType = _useState2[1];
+  var _useState3 = (0, _react.useState)(undefined),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    toolbarType = _useState4[0],
-    setToolbarType = _useState4[1];
+    theme = _useState4[0],
+    setTheme = _useState4[1];
   var _useState5 = (0, _react.useState)(undefined),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    theme = _useState6[0],
-    setTheme = _useState6[1];
-  var _useState7 = (0, _react.useState)(undefined),
+    themeEmotionMap = _useState6[0],
+    setThemeEmotionMap = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    themeEmotionMap = _useState8[0],
-    setThemeEmotionMap = _useState8[1];
-  var _useState9 = (0, _react.useState)([]),
+    toolbarActionPlugins = _useState8[0],
+    setToolbarActionPlugins = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    toolbarActionPlugins = _useState10[0],
-    setToolbarActionPlugins = _useState10[1];
-  var _useState11 = (0, _react.useState)(),
+    activeEditor = _useState10[0],
+    setActiveEditor = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    activeEditor = _useState12[0],
-    setActiveEditor = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
-    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    isEditable = _useState14[0],
-    setIsEditable = _useState14[1];
-  /*
-   * @desc Keeps data from current user text selection like range selection, nodes, node key...
-   */
-  var _useState15 = (0, _react.useState)(null),
-    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    textBlockSelection = _useState16[0],
-    setTextBlockSelection = _useState16[1];
-  var setNodeIsText = function setNodeIsText(nodeIsText) {
-    setIsText(nodeIsText);
-  };
+    isEditable = _useState12[0],
+    setIsEditable = _useState12[1];
   return /*#__PURE__*/_react.default.createElement(RichTextEditorContext.Provider, {
     value: {
-      nodeIsText: nodeIsText,
-      setNodeIsText: setNodeIsText,
       toolbarType: toolbarType,
       setToolbarType: setToolbarType,
-      textBlockSelection: textBlockSelection,
-      setTextBlockSelection: setTextBlockSelection,
       theme: theme,
       setTheme: setTheme,
       themeEmotionMap: themeEmotionMap,
@@ -71,4 +53,6 @@ var RichTextEditorProvider = function RichTextEditorProvider(_ref) {
     }
   }, children);
 };
-exports.RichTextEditorProvider = RichTextEditorProvider;
+exports.RichTextEditorProvider = RichTextEditorProvider;
+
+//# sourceMappingURL=RichTextEditorContext.js.map

package/context/RichTextEditorContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","RichTextEditorContext","createContext","undefined","exports","RichTextEditorProvider","_ref","children","_useState","useState","_useState2","_slicedToArray2","default","nodeIsText","setIsText","_useState3","_useState4","toolbarType","setToolbarType","_useState5","_useState6","theme","setTheme","_useState7","_useState8","themeEmotionMap","setThemeEmotionMap","_useState9","_useState10","toolbarActionPlugins","setToolbarActionPlugins","_useState11","_useState12","activeEditor","setActiveEditor","_useState13","_useState14","isEditable","setIsEditable","_useState15","_useState16","textBlockSelection","setTextBlockSelection","setNodeIsText","createElement","Provider","value"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext, useState } from \"react\";\nimport { TextBlockSelection, ThemeEmotionMap, ToolbarActionPlugin, ToolbarType } from \"~/types\";\nimport { WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { LexicalEditor } from \"lexical\";\n\nexport interface RichTextEditorContext {\n    nodeIsText: boolean;\n    setNodeIsText: (nodeIsText: boolean) => void;\n    toolbarType?: ToolbarType;\n    setToolbarType: (type: ToolbarType) => void;\n    textBlockSelection: TextBlockSelection | null;\n    setTextBlockSelection: (textBlockSelection: TextBlockSelection) => void;\n    theme?: WebinyTheme;\n    setTheme: (theme: WebinyTheme) => void;\n    themeEmotionMap?: ThemeEmotionMap;\n    setThemeEmotionMap: (themeEmotionMap?: ThemeEmotionMap) => void;\n    toolbarActionPlugins: ToolbarActionPlugin[];\n    setToolbarActionPlugins: (actionPlugins: ToolbarActionPlugin[]) => void;\n    activeEditor?: LexicalEditor;\n    setActiveEditor: (editor: LexicalEditor) => void;\n    isEditable: boolean;\n    setIsEditable: (isEditable: boolean) => void;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext | undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const RichTextEditorProvider: React.FC<RichTextEditorProviderProps> = ({ children }) => {\n    const [nodeIsText, setIsText] = useState<boolean>(false);\n    const [toolbarType, setToolbarType] = useState<ToolbarType | undefined>();\n    const [theme, setTheme] = useState<WebinyTheme | undefined>(undefined);\n    const [themeEmotionMap, setThemeEmotionMap] = useState<ThemeEmotionMap | undefined>(undefined);\n    const [toolbarActionPlugins, setToolbarActionPlugins] = useState<ToolbarActionPlugin[]>([]);\n    const [activeEditor, setActiveEditor] = useState<LexicalEditor>();\n    const [isEditable, setIsEditable] = useState<boolean>(false);\n    /*\n     * @desc Keeps data from current user text selection like range selection, nodes, node key...\n     */\n    const [textBlockSelection, setTextBlockSelection] = useState<TextBlockSelection | null>(null);\n\n    const setNodeIsText = (nodeIsText: boolean) => {\n        setIsText(nodeIsText);\n    };\n\n    return (\n        <RichTextEditorContext.Provider\n            value={{\n                nodeIsText,\n                setNodeIsText,\n                toolbarType,\n                setToolbarType,\n                textBlockSelection,\n                setTextBlockSelection,\n                theme,\n                setTheme,\n                themeEmotionMap,\n                setThemeEmotionMap,\n                activeEditor,\n                setActiveEditor,\n                isEditable,\n                setIsEditable,\n                toolbarActionPlugins,\n                setToolbarActionPlugins\n            }}\n        >\n            {children}\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","RichTextEditorContext","createContext","undefined","exports","RichTextEditorProvider","_ref","children","_useState","useState","_useState2","_slicedToArray2","default","toolbarType","setToolbarType","_useState3","_useState4","theme","setTheme","_useState5","_useState6","themeEmotionMap","setThemeEmotionMap","_useState7","_useState8","toolbarActionPlugins","setToolbarActionPlugins","_useState9","_useState10","activeEditor","setActiveEditor","_useState11","_useState12","isEditable","setIsEditable","createElement","Provider","value"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext, useState } from \"react\";\nimport { LexicalEditor } from \"lexical\";\nimport type { ThemeEmotionMap, WebinyTheme } from \"@webiny/lexical-theme\";\nimport { ToolbarActionPlugin, ToolbarType } from \"~/types\";\n\nexport interface RichTextEditorContext {\n    toolbarType?: ToolbarType;\n    setToolbarType: (type: ToolbarType) => void;\n    theme?: WebinyTheme;\n    setTheme: (theme: WebinyTheme) => void;\n    themeEmotionMap?: ThemeEmotionMap;\n    setThemeEmotionMap: (themeEmotionMap?: ThemeEmotionMap) => void;\n    toolbarActionPlugins: ToolbarActionPlugin[];\n    setToolbarActionPlugins: (actionPlugins: ToolbarActionPlugin[]) => void;\n    activeEditor?: LexicalEditor;\n    setActiveEditor: (editor: LexicalEditor) => void;\n    isEditable: boolean;\n    setIsEditable: (isEditable: boolean) => void;\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext | undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const RichTextEditorProvider: React.FC<RichTextEditorProviderProps> = ({ children }) => {\n    const [toolbarType, setToolbarType] = useState<ToolbarType | undefined>();\n    const [theme, setTheme] = useState<WebinyTheme | undefined>(undefined);\n    const [themeEmotionMap, setThemeEmotionMap] = useState<ThemeEmotionMap | undefined>(undefined);\n    const [toolbarActionPlugins, setToolbarActionPlugins] = useState<ToolbarActionPlugin[]>([]);\n    const [activeEditor, setActiveEditor] = useState<LexicalEditor>();\n    const [isEditable, setIsEditable] = useState<boolean>(false);\n\n    return (\n        <RichTextEditorContext.Provider\n            value={{\n                toolbarType,\n                setToolbarType,\n                theme,\n                setTheme,\n                themeEmotionMap,\n                setThemeEmotionMap,\n                activeEditor,\n                setActiveEditor,\n                isEditable,\n                setIsEditable,\n                toolbarActionPlugins,\n                setToolbarActionPlugins\n            }}\n        >\n            {children}\n        </RichTextEditorContext.Provider>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAoBO,IAAMC,qBAAqB,gBAAG,IAAAC,oBAAa,EAAoCC,SAAS,CAAC;AAACC,OAAA,CAAAH,qBAAA,GAAAA,qBAAA;AAM1F,IAAMI,sBAA6D,GAAG,SAAhEA,sBAA6DA,CAAAC,IAAA,EAAqB;EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EACpF,IAAAC,SAAA,GAAsC,IAAAC,eAAQ,EAA0B,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,SAAA;IAAlEK,WAAW,GAAAH,UAAA;IAAEI,cAAc,GAAAJ,UAAA;EAClC,IAAAK,UAAA,GAA0B,IAAAN,eAAQ,EAA0BN,SAAS,CAAC;IAAAa,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAG,UAAA;IAA/DE,KAAK,GAAAD,UAAA;IAAEE,QAAQ,GAAAF,UAAA;EACtB,IAAAG,UAAA,GAA8C,IAAAV,eAAQ,EAA8BN,SAAS,CAAC;IAAAiB,UAAA,OAAAT,eAAA,CAAAC,OAAA,EAAAO,UAAA;IAAvFE,eAAe,GAAAD,UAAA;IAAEE,kBAAkB,GAAAF,UAAA;EAC1C,IAAAG,UAAA,GAAwD,IAAAd,eAAQ,EAAwB,EAAE,CAAC;IAAAe,UAAA,OAAAb,eAAA,CAAAC,OAAA,EAAAW,UAAA;IAApFE,oBAAoB,GAAAD,UAAA;IAAEE,uBAAuB,GAAAF,UAAA;EACpD,IAAAG,UAAA,GAAwC,IAAAlB,eAAQ,EAAgB,CAAC;IAAAmB,WAAA,OAAAjB,eAAA,CAAAC,OAAA,EAAAe,UAAA;IAA1DE,YAAY,GAAAD,WAAA;IAAEE,eAAe,GAAAF,WAAA;EACpC,IAAAG,WAAA,GAAoC,IAAAtB,eAAQ,EAAU,KAAK,CAAC;IAAAuB,WAAA,OAAArB,eAAA,CAAAC,OAAA,EAAAmB,WAAA;IAArDE,UAAU,GAAAD,WAAA;IAAEE,aAAa,GAAAF,WAAA;EAEhC,oBACIlC,MAAA,CAAAc,OAAA,CAAAuB,aAAA,CAAClC,qBAAqB,CAACmC,QAAQ;IAC3BC,KAAK,EAAE;MACHxB,WAAW,EAAXA,WAAW;MACXC,cAAc,EAAdA,cAAc;MACdG,KAAK,EAALA,KAAK;MACLC,QAAQ,EAARA,QAAQ;MACRG,eAAe,EAAfA,eAAe;MACfC,kBAAkB,EAAlBA,kBAAkB;MAClBO,YAAY,EAAZA,YAAY;MACZC,eAAe,EAAfA,eAAe;MACfG,UAAU,EAAVA,UAAU;MACVC,aAAa,EAAbA,aAAa;MACbT,oBAAoB,EAApBA,oBAAoB;MACpBC,uBAAuB,EAAvBA;IACJ;EAAE,GAEDnB,QAC2B,CAAC;AAEzC,CAAC;AAACH,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}

package/context/SharedHistoryContext.js

@@ -23,4 +23,6 @@ exports.SharedHistoryContext = SharedHistoryContext;
 var useSharedHistoryContext = function useSharedHistoryContext() {
   return (0, React.useContext)(Context);
 };
-exports.useSharedHistoryContext = useSharedHistoryContext;
+exports.useSharedHistoryContext = useSharedHistoryContext;
+
+//# sourceMappingURL=SharedHistoryContext.js.map

package/context/TextAlignmentActionContextProps.js

@@ -7,4 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.TextAlignmentActionContext = void 0;
 var _react = _interopRequireDefault(require("react"));
 var TextAlignmentActionContext = /*#__PURE__*/_react.default.createContext(undefined);
-exports.TextAlignmentActionContext = TextAlignmentActionContext;
+exports.TextAlignmentActionContext = TextAlignmentActionContext;
+
+//# sourceMappingURL=TextAlignmentActionContextProps.js.map

package/context/TypographyActionContext.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TypographyValue } from "../types";
+import { TypographyValue } from "@webiny/lexical-theme";
 export interface TypographyActionContextProps {
     value: TypographyValue | undefined;
     applyTypography: (value: TypographyValue) => void;

package/context/TypographyActionContext.js

@@ -7,4 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.TypographyActionContext = void 0;
 var _react = _interopRequireDefault(require("react"));
 var TypographyActionContext = /*#__PURE__*/_react.default.createContext(undefined);
-exports.TypographyActionContext = TypographyActionContext;
+exports.TypographyActionContext = TypographyActionContext;
+
+//# sourceMappingURL=TypographyActionContext.js.map

package/context/TypographyActionContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","TypographyActionContext","React","createContext","undefined","exports"],"sources":["TypographyActionContext.tsx"],"sourcesContent":["import React from \"react\";\nimport { TypographyValue } from \"~/types\";\n\nexport interface TypographyActionContextProps {\n    /*\n     * @desc Current selected typography\n     * */\n    value: TypographyValue | undefined;\n\n    /*\n     * @desc Apply font family to selected text.\n     * @params: value\n     */\n    applyTypography: (value: TypographyValue) => void;\n}\n\nexport const TypographyActionContext = React.createContext<\n    TypographyActionContextProps | undefined\n>(undefined);\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAgBO,IAAMC,uBAAuB,gBAAGC,cAAK,CAACC,aAAa,CAExDC,SAAS,CAAC;AAACC,OAAA,CAAAJ,uBAAA,GAAAA,uBAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","TypographyActionContext","React","createContext","undefined","exports"],"sources":["TypographyActionContext.tsx"],"sourcesContent":["import React from \"react\";\nimport { TypographyValue } from \"@webiny/lexical-theme\";\n\nexport interface TypographyActionContextProps {\n    /*\n     * @desc Current selected typography\n     * */\n    value: TypographyValue | undefined;\n\n    /*\n     * @desc Apply font family to selected text.\n     * @params: value\n     */\n    applyTypography: (value: TypographyValue) => void;\n}\n\nexport const TypographyActionContext = React.createContext<\n    TypographyActionContextProps | undefined\n>(undefined);\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAgBO,IAAMC,uBAAuB,gBAAGC,cAAK,CAACC,aAAa,CAExDC,SAAS,CAAC;AAACC,OAAA,CAAAJ,uBAAA,GAAAA,uBAAA"}

package/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./useRichTextEditor";
+export * from "./useFontColorPicker";
+export * from "./useTypographyAction";
+export * from "./useTextAlignmentAction";
+export * from "./useCurrentSelection";
+export * from "./useCurrentElement";
+export * from "./useIsMounted";