@webiny/lexical-editor 0.0.0-unstable.496cf268ac → 0.0.0-unstable.606fc9c866

package/commands/webiny-list.d.ts

@@ -0,0 +1,7 @@
+import { LexicalCommand } from "lexical";
+export declare type WebinyListCommandPayload = {
+    themeStyleId: string;
+};
+export declare const INSERT_UNORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload>;
+export declare const INSERT_ORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload>;
+export declare const REMOVE_WEBINY_LIST_COMMAND: LexicalCommand<void>;

package/commands/webiny-list.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.REMOVE_WEBINY_LIST_COMMAND = exports.INSERT_UNORDERED_WEBINY_LIST_COMMAND = exports.INSERT_ORDERED_WEBINY_LIST_COMMAND = void 0;
+var _lexical = require("lexical");
+var INSERT_UNORDERED_WEBINY_LIST_COMMAND = (0, _lexical.createCommand)("INSERT_UNORDERED_WEBINY_LIST_COMMAND");
+exports.INSERT_UNORDERED_WEBINY_LIST_COMMAND = INSERT_UNORDERED_WEBINY_LIST_COMMAND;
+var INSERT_ORDERED_WEBINY_LIST_COMMAND = (0, _lexical.createCommand)("INSERT_ORDERED_WEBINY_LIST_COMMAND");
+exports.INSERT_ORDERED_WEBINY_LIST_COMMAND = INSERT_ORDERED_WEBINY_LIST_COMMAND;
+var REMOVE_WEBINY_LIST_COMMAND = (0, _lexical.createCommand)("REMOVE_WEBINY_LIST_COMMAND");
+exports.REMOVE_WEBINY_LIST_COMMAND = REMOVE_WEBINY_LIST_COMMAND;

package/commands/webiny-list.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["INSERT_UNORDERED_WEBINY_LIST_COMMAND","createCommand","INSERT_ORDERED_WEBINY_LIST_COMMAND","REMOVE_WEBINY_LIST_COMMAND"],"sources":["webiny-list.ts"],"sourcesContent":["import { createCommand, LexicalCommand } from \"lexical\";\n\nexport type WebinyListCommandPayload = {\n    themeStyleId: string;\n};\n\nexport const INSERT_UNORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload> =\n    createCommand(\"INSERT_UNORDERED_WEBINY_LIST_COMMAND\");\nexport const INSERT_ORDERED_WEBINY_LIST_COMMAND: LexicalCommand<WebinyListCommandPayload> =\n    createCommand(\"INSERT_ORDERED_WEBINY_LIST_COMMAND\");\n\nexport const REMOVE_WEBINY_LIST_COMMAND: LexicalCommand<void> = createCommand(\n    \"REMOVE_WEBINY_LIST_COMMAND\"\n);\n"],"mappings":";;;;;;AAAA;AAMO,IAAMA,oCAA8E,GACvF,IAAAC,sBAAa,EAAC,sCAAsC,CAAC;AAAC;AACnD,IAAMC,kCAA4E,GACrF,IAAAD,sBAAa,EAAC,oCAAoC,CAAC;AAAC;AAEjD,IAAME,0BAAgD,GAAG,IAAAF,sBAAa,EACzE,4BAA4B,CAC/B;AAAC"}

package/commands/webiny-quote.d.ts

@@ -0,0 +1,5 @@
+import { LexicalCommand } from "lexical";
+export declare type WebinyQuoteCommandPayload = {
+    themeStyleId: string;
+};
+export declare const INSERT_WEBINY_QUOTE_COMMAND: LexicalCommand<WebinyQuoteCommandPayload>;

package/commands/webiny-quote.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INSERT_WEBINY_QUOTE_COMMAND = void 0;
+var _lexical = require("lexical");
+var INSERT_WEBINY_QUOTE_COMMAND = (0, _lexical.createCommand)("INSERT_WEBINY_QUOTE_COMMAND");
+exports.INSERT_WEBINY_QUOTE_COMMAND = INSERT_WEBINY_QUOTE_COMMAND;

package/commands/webiny-quote.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["INSERT_WEBINY_QUOTE_COMMAND","createCommand"],"sources":["webiny-quote.ts"],"sourcesContent":["import { createCommand, LexicalCommand } from \"lexical\";\n\nexport type WebinyQuoteCommandPayload = {\n    themeStyleId: string;\n};\n\nexport const INSERT_WEBINY_QUOTE_COMMAND: LexicalCommand<WebinyQuoteCommandPayload> = createCommand(\n    \"INSERT_WEBINY_QUOTE_COMMAND\"\n);\n"],"mappings":";;;;;;AAAA;AAMO,IAAMA,2BAAsE,GAAG,IAAAC,sBAAa,EAC/F,6BAA6B,CAChC;AAAC"}

package/components/Editor/HeadingEditor.js

@@ -12,6 +12,7 @@ var _ClickableLinkPlugin = require("../../plugins/ClickableLinkPlugin/ClickableL
 var _FloatingLinkEditorPlugin = require("../../plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin");
 var _HeadingToolbar = require("../Toolbar/HeadingToolbar");
 var _RichTextEditor = require("./RichTextEditor");
+var _WebinyQuoteNodePlugin = require("../../plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin");
 var _excluded = ["tag", "placeholder"];
 var HeadingEditor = function HeadingEditor(_ref) {
   var tag = _ref.tag,
@@ -21,7 +22,7 @@ var HeadingEditor = function HeadingEditor(_ref) {
     toolbar: /*#__PURE__*/_react.default.createElement(_HeadingToolbar.HeadingToolbar, null),
     tag: tag !== null && tag !== void 0 ? tag : "h1",
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter your heading text here..."
-  }, rest), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyQuoteNodePlugin.WebinyQuotePlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
     anchorElem: document.body
   }));
 };

package/components/Editor/HeadingEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["HeadingEditor","tag","placeholder","rest","document","body"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const HeadingEditor: React.FC<HeadingEditorProps> = ({ tag, placeholder, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<HeadingToolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAyF;AAMlF,IAAMA,aAA2C,GAAG,SAA9CA,aAA2C,OAAsC;EAAA,IAAhCC,GAAG,QAAHA,GAAG;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EACnF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAC5B,GAAG,EAAEF,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjB,WAAW,EAAEC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAAC"}
+{"version":3,"names":["HeadingEditor","tag","placeholder","rest","document","body"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { WebinyQuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const HeadingEditor: React.FC<HeadingEditorProps> = ({ tag, placeholder, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<HeadingToolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <WebinyQuotePlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0F;AAMnF,IAAMA,aAA2C,GAAG,SAA9CA,aAA2C,OAAsC;EAAA,IAAhCC,GAAG,QAAHA,GAAG;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EACnF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAC5B,GAAG,EAAEF,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjB,WAAW,EAAEC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,wCAAiB,OAAG,eACrB,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAAC"}

package/components/Editor/ParagraphEditor.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.ParagraphEditor = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _LexicalListPlugin = require("@lexical/react/LexicalListPlugin");
 var _CodeHighlightPlugin = require("../../plugins/CodeHighlightPlugin/CodeHighlightPlugin");
 var _LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
 var _FloatingLinkEditorPlugin = require("../../plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin");
 var _ClickableLinkPlugin = require("../../plugins/ClickableLinkPlugin/ClickableLinkPlugin");
 var _ParagraphToolbar = require("../Toolbar/ParagraphToolbar");
 var _RichTextEditor = require("./RichTextEditor");
+var _WebinyListPlugin = require("../../plugins/WebinyListPLugin/WebinyListPlugin");
 var _excluded = ["placeholder", "tag"];
 var ParagraphEditor = function ParagraphEditor(_ref) {
   var placeholder = _ref.placeholder,
@@ -23,8 +23,8 @@ var ParagraphEditor = function ParagraphEditor(_ref) {
     toolbar: /*#__PURE__*/_react.default.createElement(_ParagraphToolbar.ParagraphToolbar, null),
     tag: tag !== null && tag !== void 0 ? tag : "p",
     placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Enter your text here..."
-  }, rest), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/_react.default.createElement(_CodeHighlightPlugin.CodeHighlightPlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyListPlugin.WebinyListPlugin, null), /*#__PURE__*/_react.default.createElement(_CodeHighlightPlugin.CodeHighlightPlugin, null), /*#__PURE__*/_react.default.createElement(_ClickableLinkPlugin.ClickableLinkPlugin, null), /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditorPlugin, {
     anchorElem: document.body
-  }), /*#__PURE__*/_react.default.createElement(_LexicalListPlugin.ListPlugin, null));
+  }));
 };
 exports.ParagraphEditor = ParagraphEditor;

package/components/Editor/ParagraphEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["ParagraphEditor","placeholder","tag","rest","document","body"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { ListPlugin } from \"@lexical/react/LexicalListPlugin\";\nimport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { ParagraphToolbar } from \"~/components/Toolbar/ParagraphToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst ParagraphEditor: React.FC<ParagraphLexicalEditorProps> = ({ placeholder, tag, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<ParagraphToolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <CodeHighlightPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n            <ListPlugin />\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAyF;AAMzF,IAAMA,eAAsD,GAAG,SAAzDA,eAAsD,OAAsC;EAAA,IAAhCC,WAAW,QAAXA,WAAW;IAAEC,GAAG,QAAHA,GAAG;IAAKC,IAAI;EACvF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAC9B,GAAG,EAAED,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,GAAI;IAChB,WAAW,EAAED,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAA0B,GAClDE,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,eACvD,6BAAC,6BAAU,OAAG,CACD;AAEzB,CAAC;AAAC"}
+{"version":3,"names":["ParagraphEditor","placeholder","tag","rest","document","body"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { ParagraphToolbar } from \"~/components/Toolbar/ParagraphToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { WebinyListPlugin } from \"~/plugins/WebinyListPLugin/WebinyListPlugin\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst ParagraphEditor: React.FC<ParagraphLexicalEditorProps> = ({ placeholder, tag, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<ParagraphToolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <WebinyListPlugin />\n            <CodeHighlightPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+E;AAM/E,IAAMA,eAAsD,GAAG,SAAzDA,eAAsD,OAAsC;EAAA,IAAhCC,WAAW,QAAXA,WAAW;IAAEC,GAAG,QAAHA,GAAG;IAAKC,IAAI;EACvF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAC9B,GAAG,EAAED,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,GAAI;IAChB,WAAW,EAAED,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAA0B,GAClDE,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,kCAAgB,OAAG,eACpB,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAAC"}

package/components/Editor/RichTextEditor.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { LexicalValue } from "../../types";
+import { LexicalValue, ThemeEmotionMap } from "../../types";
 import { Klass, LexicalNode } from "lexical";
 import { WebinyTheme } from "../../themes/webinyLexicalTheme";
 export interface RichTextEditorProps {
@@ -18,6 +18,7 @@ export interface RichTextEditorProps {
     height?: number | string;
     width?: number | string;
     theme: WebinyTheme;
+    themeEmotionMap?: ThemeEmotionMap;
 }
 /**
  * @description Main editor container

package/components/Editor/RichTextEditor.js

@@ -27,6 +27,13 @@ var _BlurEventPlugin = require("../../plugins/BlurEventPlugin/BlurEventPlugin");
 var _FontColorPlugin = require("../../plugins/FontColorPlugin/FontColorPlugin");
 var _webinyLexicalTheme = require("../../themes/webinyLexicalTheme");
 var _webinyNodes = require("../../nodes/webinyNodes");
+var _TypographyPlugin = require("../../plugins/TypographyPlugin/TypographyPlugin");
+var _WebinyQuoteNodePlugin = require("../../plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin");
+var _LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
+var _SharedHistoryContext = require("../../context/SharedHistoryContext");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _react2 = require("@emotion/react");
+var _toTypographyEmotionMap = require("../../utils/toTypographyEmotionMap");
 var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
   var toolbar = _ref.toolbar,
     onChange = _ref.onChange,
@@ -38,13 +45,23 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     focus = _ref.focus,
     width = _ref.width,
     height = _ref.height,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    themeEmotionMap = _ref.themeEmotionMap;
+  var _useSharedHistoryCont = (0, _SharedHistoryContext.useSharedHistoryContext)(),
+    historyState = _useSharedHistoryCont.historyState;
   var placeholderElem = /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, null, placeholder || "Enter text...");
   var scrollRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     floatingAnchorElem = _useState2[0],
     setFloatingAnchorElem = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    setTheme = _useRichTextEditor.setTheme,
+    setThemeEmotionMap = _useRichTextEditor.setThemeEmotionMap;
+  (0, _react.useEffect)(function () {
+    setTheme(theme);
+    setThemeEmotionMap(themeEmotionMap);
+  }, [themeEmotionMap]);
   var onRef = function onRef(_floatingAnchorElem) {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
@@ -62,7 +79,7 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     },
     nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
     theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _webinyLexicalTheme.webinyEditorTheme), {}, {
-      styles: theme === null || theme === void 0 ? void 0 : theme.styles
+      emotionMap: themeEmotionMap
     })
   };
   function handleOnChange(editorState, editor) {
@@ -83,7 +100,9 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     onChange: handleOnChange
   }), value && /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.LexicalUpdateStatePlugin, {
     value: value
-  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_FontColorPlugin.FontColorPlugin, null), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
+  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_FontColorPlugin.FontColorPlugin, null), /*#__PURE__*/_react.default.createElement(_TypographyPlugin.TypographyPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyQuoteNodePlugin.WebinyQuotePlugin, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
+    externalHistoryState: historyState
+  }), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
     onBlur: onBlur
   }), focus && /*#__PURE__*/_react.default.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), children, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/_react.default.createElement("div", {
@@ -107,6 +126,13 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
  * @description Main editor container
  */
 var RichTextEditor = (0, _reactComposition.makeComposable)("RichTextEditor", function (props) {
-  return /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, null, /*#__PURE__*/_react.default.createElement(BaseRichTextEditor, props));
+  return /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, null, /*#__PURE__*/_react.default.createElement(_react2.ClassNames, null, function (_ref2) {
+    var _props$themeEmotionMa;
+    var css = _ref2.css;
+    var themeEmotionMap = (_props$themeEmotionMa = props === null || props === void 0 ? void 0 : props.themeEmotionMap) !== null && _props$themeEmotionMa !== void 0 ? _props$themeEmotionMa : (0, _toTypographyEmotionMap.toTypographyEmotionMap)(css, props.theme);
+    return /*#__PURE__*/_react.default.createElement(_SharedHistoryContext.SharedHistoryContext, null, /*#__PURE__*/_react.default.createElement(BaseRichTextEditor, Object.assign({}, props, {
+      themeEmotionMap: themeEmotionMap
+    })));
+  }));
 });
 exports.RichTextEditor = RichTextEditor;

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseRichTextEditor","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","theme","placeholderElem","scrollRef","useRef","useState","undefined","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","WebinyNodes","webinyEditorTheme","styles","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","outline","LexicalErrorBoundary","RichTextEditor","makeComposable","props"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { FontColorPlugin } from \"~/plugins/FontColorPlugin/FontColorPlugin\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    tag?: string;\n    onChange?: (json: LexicalValue) => void;\n    value: LexicalValue | null;\n    focus?: boolean;\n    placeholder?: string;\n    nodes?: Klass<LexicalNode>[];\n    /**\n     * @description Lexical plugins\n     */\n    children?: React.ReactNode | React.ReactNode[];\n    onBlur?: (editorState: LexicalValue) => void;\n    height?: number | string;\n    width?: number | string;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    width,\n    height,\n    theme\n}: RichTextEditorProps) => {\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, styles: theme?.styles }\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                //TODO: send plain JSON object\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <div ref={scrollRef} style={{ ...sizeStyle }}>\n                {/* data */}\n                <OnChangePlugin onChange={handleOnChange} />\n                {value && <LexicalUpdateStatePlugin value={value} />}\n                <ClearEditorPlugin />\n                <FontColorPlugin />\n                {/* Events */}\n                {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                {focus && <AutoFocusPlugin />}\n                {/* External plugins and components */}\n                {children}\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                            <div className=\"editor\" ref={onRef} style={{ ...sizeStyle }}>\n                                <ContentEditable style={{ outline: 0, ...sizeStyle }} />\n                            </div>\n                        </div>\n                    }\n                    placeholder={placeholderElem}\n                    ErrorBoundary={LexicalErrorBoundary}\n                />\n                {/* Toolbar */}\n                {floatingAnchorElem && toolbar}\n            </div>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <RichTextEditorProvider>\n            <BaseRichTextEditor {...props} />\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"names":["BaseRichTextEditor","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","theme","themeEmotionMap","useSharedHistoryContext","historyState","placeholderElem","scrollRef","useRef","useState","undefined","floatingAnchorElem","setFloatingAnchorElem","useRichTextEditor","setTheme","setThemeEmotionMap","useEffect","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","WebinyNodes","webinyEditorTheme","emotionMap","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","outline","LexicalErrorBoundary","RichTextEditor","makeComposable","props","css","toTypographyEmotionMap"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { LexicalValue, ThemeEmotionMap } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { FontColorPlugin } from \"~/plugins/FontColorPlugin/FontColorPlugin\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { TypographyPlugin } from \"~/plugins/TypographyPlugin/TypographyPlugin\";\nimport { WebinyQuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { ClassNames } from \"@emotion/react\";\nimport { toTypographyEmotionMap } from \"~/utils/toTypographyEmotionMap\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    tag?: string;\n    onChange?: (json: LexicalValue) => void;\n    value: LexicalValue | null;\n    focus?: boolean;\n    placeholder?: string;\n    nodes?: Klass<LexicalNode>[];\n    /**\n     * @description Lexical plugins\n     */\n    children?: React.ReactNode | React.ReactNode[];\n    onBlur?: (editorState: LexicalValue) => void;\n    height?: number | string;\n    width?: number | string;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    width,\n    height,\n    theme,\n    themeEmotionMap\n}: RichTextEditorProps) => {\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const { setTheme, setThemeEmotionMap } = useRichTextEditor();\n\n    useEffect(() => {\n        setTheme(theme);\n        setThemeEmotionMap(themeEmotionMap);\n    }, [themeEmotionMap]);\n\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, emotionMap: themeEmotionMap }\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                //TODO: send plain JSON object\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <div ref={scrollRef} style={{ ...sizeStyle }}>\n                {/* data */}\n                <OnChangePlugin onChange={handleOnChange} />\n                {value && <LexicalUpdateStatePlugin value={value} />}\n                <ClearEditorPlugin />\n                <FontColorPlugin />\n                <TypographyPlugin />\n                <WebinyQuotePlugin />\n                <HistoryPlugin externalHistoryState={historyState} />\n                {/* Events */}\n                {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                {focus && <AutoFocusPlugin />}\n                {/* External plugins and components */}\n                {children}\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                            <div className=\"editor\" ref={onRef} style={{ ...sizeStyle }}>\n                                <ContentEditable style={{ outline: 0, ...sizeStyle }} />\n                            </div>\n                        </div>\n                    }\n                    placeholder={placeholderElem}\n                    ErrorBoundary={LexicalErrorBoundary}\n                />\n                {/* Toolbar */}\n                {floatingAnchorElem && toolbar}\n            </div>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <RichTextEditorProvider>\n            <ClassNames>\n                {({ css }) => {\n                    const themeEmotionMap =\n                        props?.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme);\n                    return (\n                        <SharedHistoryContext>\n                            <BaseRichTextEditor {...props} themeEmotionMap={themeEmotionMap} />\n                        </SharedHistoryContext>\n                    );\n                }}\n            </ClassNames>\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}

package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts

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

package/components/LexicalEditorConfig/LexicalEditorConfig.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.LexicalEditorConfig = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _FontColorAction = require("../ToolbarActions/FontColorAction");
+var _TypographyAction = require("../ToolbarActions/TypographyAction");
 var LexicalEditorConfig = function LexicalEditorConfig(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 exports.LexicalEditorConfig = LexicalEditorConfig;
-LexicalEditorConfig.FontColorAction = _FontColorAction.FontColorAction;
+LexicalEditorConfig.FontColorAction = _FontColorAction.FontColorAction;
+LexicalEditorConfig.TypographyAction = _TypographyAction.TypographyAction;

package/components/LexicalEditorConfig/LexicalEditorConfig.js.map

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

package/components/LexicalHtmlRenderer.d.ts

@@ -1,11 +1,16 @@
 import React from "react";
-import { LexicalValue } from "../types";
+import { LexicalValue, ThemeEmotionMap } from "../types";
 import { Klass, LexicalNode } from "lexical";
 import { WebinyTheme } from "../themes/webinyLexicalTheme";
 interface LexicalHtmlRendererProps {
     nodes?: Klass<LexicalNode>[];
     value: LexicalValue | null;
     theme: WebinyTheme;
+    themeEmotionMap?: ThemeEmotionMap;
 }
+export declare const BaseLexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps>;
+/**
+ * @description Main editor container
+ */
 export declare const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps>;
 export {};

package/components/LexicalHtmlRenderer.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LexicalHtmlRenderer = void 0;
+exports.LexicalHtmlRenderer = exports.BaseLexicalHtmlRenderer = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
@@ -17,10 +17,13 @@ var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/Lexic
 var _LexicalUpdateStatePlugin = require("../plugins/LexicalUpdateStatePlugin");
 var _webinyNodes = require("../nodes/webinyNodes");
 var _webinyLexicalTheme = require("../themes/webinyLexicalTheme");
-var LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
+var _react2 = require("@emotion/react");
+var _toTypographyEmotionMap = require("../utils/toTypographyEmotionMap");
+var BaseLexicalHtmlRenderer = function BaseLexicalHtmlRenderer(_ref) {
   var nodes = _ref.nodes,
     value = _ref.value,
-    theme = _ref.theme;
+    theme = _ref.theme,
+    themeEmotionMap = _ref.themeEmotionMap;
   var initialConfig = {
     editorState: (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)(),
     namespace: "webiny",
@@ -30,6 +33,7 @@ var LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
     editable: false,
     nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
     theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _webinyLexicalTheme.webinyEditorTheme), {}, {
+      emotionMap: themeEmotionMap,
       styles: theme.styles
     })
   };
@@ -45,4 +49,19 @@ var LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
     value: value
   }));
 };
+
+/**
+ * @description Main editor container
+ */
+exports.BaseLexicalHtmlRenderer = BaseLexicalHtmlRenderer;
+var LexicalHtmlRenderer = function LexicalHtmlRenderer(props) {
+  return /*#__PURE__*/_react.default.createElement(_react2.ClassNames, null, function (_ref2) {
+    var _props$themeEmotionMa;
+    var css = _ref2.css;
+    var themeEmotionMap = (_props$themeEmotionMa = props === null || props === void 0 ? void 0 : props.themeEmotionMap) !== null && _props$themeEmotionMa !== void 0 ? _props$themeEmotionMa : (0, _toTypographyEmotionMap.toTypographyEmotionMap)(css, props.theme);
+    return /*#__PURE__*/_react.default.createElement(BaseLexicalHtmlRenderer, Object.assign({}, props, {
+      themeEmotionMap: themeEmotionMap
+    }));
+  });
+};
 exports.LexicalHtmlRenderer = LexicalHtmlRenderer;

package/components/LexicalHtmlRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["LexicalHtmlRenderer","nodes","value","theme","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","editable","WebinyNodes","webinyEditorTheme","styles","LexicalErrorBoundary"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n}\n\nexport const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps> = ({\n    nodes,\n    value,\n    theme\n}) => {\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        editable: false,\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <RichTextPlugin\n                contentEditable={\n                    <div className=\"editor\">\n                        <ContentEditable />\n                    </div>\n                }\n                ErrorBoundary={LexicalErrorBoundary}\n                placeholder={null}\n            />\n            <LexicalUpdateStatePlugin value={value} />\n        </LexicalComposer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAWO,IAAMA,mBAAuD,GAAG,SAA1DA,mBAAuD,OAI9D;EAAA,IAHFC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;EAEL,IAAMC,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAAC,sCAAkB,EAACJ,KAAK,CAAC,GAAGA,KAAK,GAAG,IAAAK,wDAA2B,GAAE;IAC9EC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAE,iBAACC,KAAY,EAAK;MACvB,MAAMA,KAAK;IACf,CAAC;IACDC,QAAQ,EAAE,KAAK;IACfV,KAAK,6CAAMW,wBAAW,oCAAMX,KAAK,IAAI,EAAE,EAAE;IACzCE,KAAK,8DAAOU,qCAAiB;MAAEC,MAAM,EAAEX,KAAK,CAACW;IAAM;EACvD,CAAC;EAED,oBACI,6BAAC,gCAAe;IAAC,aAAa,EAAEV;EAAc,gBAC1C,6BAAC,qCAAc;IACX,eAAe,eACX;MAAK,SAAS,EAAC;IAAQ,gBACnB,6BAAC,uCAAe,OAAG,CAE1B;IACD,aAAa,EAAEW,6BAAqB;IACpC,WAAW,EAAE;EAAK,EACpB,eACF,6BAAC,kDAAwB;IAAC,KAAK,EAAEb;EAAM,EAAG,CAC5B;AAE1B,CAAC;AAAC"}
+{"version":3,"names":["BaseLexicalHtmlRenderer","nodes","value","theme","themeEmotionMap","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","editable","WebinyNodes","webinyEditorTheme","emotionMap","styles","LexicalErrorBoundary","LexicalHtmlRenderer","props","css","toTypographyEmotionMap"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalValue, ThemeEmotionMap } from \"~/types\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { ClassNames } from \"@emotion/react\";\nimport { toTypographyEmotionMap } from \"~/utils/toTypographyEmotionMap\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n}\n\nexport const BaseLexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps> = ({\n    nodes,\n    value,\n    theme,\n    themeEmotionMap\n}) => {\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        editable: false,\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, emotionMap: themeEmotionMap, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <RichTextPlugin\n                contentEditable={\n                    <div className=\"editor\">\n                        <ContentEditable />\n                    </div>\n                }\n                ErrorBoundary={LexicalErrorBoundary}\n                placeholder={null}\n            />\n            <LexicalUpdateStatePlugin value={value} />\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps> = props => {\n    return (\n        <ClassNames>\n            {({ css }) => {\n                const themeEmotionMap =\n                    props?.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme);\n                return <BaseLexicalHtmlRenderer {...props} themeEmotionMap={themeEmotionMap} />;\n            }}\n        </ClassNames>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAYO,IAAMA,uBAA2D,GAAG,SAA9DA,uBAA2D,OAKlE;EAAA,IAJFC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,eAAe,QAAfA,eAAe;EAEf,IAAMC,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAAC,sCAAkB,EAACL,KAAK,CAAC,GAAGA,KAAK,GAAG,IAAAM,wDAA2B,GAAE;IAC9EC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAE,iBAACC,KAAY,EAAK;MACvB,MAAMA,KAAK;IACf,CAAC;IACDC,QAAQ,EAAE,KAAK;IACfX,KAAK,6CAAMY,wBAAW,oCAAMZ,KAAK,IAAI,EAAE,EAAE;IACzCE,KAAK,8DAAOW,qCAAiB;MAAEC,UAAU,EAAEX,eAAe;MAAEY,MAAM,EAAEb,KAAK,CAACa;IAAM;EACpF,CAAC;EAED,oBACI,6BAAC,gCAAe;IAAC,aAAa,EAAEX;EAAc,gBAC1C,6BAAC,qCAAc;IACX,eAAe,eACX;MAAK,SAAS,EAAC;IAAQ,gBACnB,6BAAC,uCAAe,OAAG,CAE1B;IACD,aAAa,EAAEY,6BAAqB;IACpC,WAAW,EAAE;EAAK,EACpB,eACF,6BAAC,kDAAwB;IAAC,KAAK,EAAEf;EAAM,EAAG,CAC5B;AAE1B,CAAC;;AAED;AACA;AACA;AAFA;AAGO,IAAMgB,mBAAuD,GAAG,SAA1DA,mBAAuD,CAAGC,KAAK,EAAI;EAC5E,oBACI,6BAAC,kBAAU,QACN,iBAAa;IAAA;IAAA,IAAVC,GAAG,SAAHA,GAAG;IACH,IAAMhB,eAAe,4BACjBe,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEf,eAAe,yEAAI,IAAAiB,8CAAsB,EAACD,GAAG,EAAED,KAAK,CAAChB,KAAK,CAAC;IACtE,oBAAO,6BAAC,uBAAuB,oBAAKgB,KAAK;MAAE,eAAe,EAAEf;IAAgB,GAAG;EACnF,CAAC,CACQ;AAErB,CAAC;AAAC"}

package/components/Toolbar/Toolbar.js

@@ -19,12 +19,27 @@ require("./Toolbar.css");
 var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
 var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
 var _getSelectedNode = require("../../utils/getSelectedNode");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _useRichTextEditor3 = require("../../hooks/useRichTextEditor");
+var _getLexicalTextSelectionState = require("../../utils/getLexicalTextSelectionState");
 var FloatingToolbar = function FloatingToolbar(_ref) {
   var children = _ref.children,
+    type = _ref.type,
     anchorElem = _ref.anchorElem,
     editor = _ref.editor;
   var popupCharStylesEditorRef = (0, _react.useRef)(null);
+  var _useRichTextEditor = (0, _useRichTextEditor3.useRichTextEditor)(),
+    toolbarType = _useRichTextEditor.toolbarType,
+    setToolbarType = _useRichTextEditor.setToolbarType,
+    setTextBlockSelection = _useRichTextEditor.setTextBlockSelection;
+  var _useState = (0, _react.useState)(editor),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeEditor = _useState2[0],
+    setActiveEditor = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (toolbarType !== type) {
+      setToolbarType(type);
+    }
+  }, [type]);
   var updateTextFormatFloatingToolbar = (0, _react.useCallback)(function () {
     var selection = (0, _lexical.$getSelection)();
     var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
@@ -34,6 +49,10 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
     }
     var isLink = false;
     if ((0, _lexical.$isRangeSelection)(selection)) {
+      var selectionState = (0, _getLexicalTextSelectionState.getLexicalTextSelectionState)(activeEditor, selection);
+      if (selectionState) {
+        setTextBlockSelection(selectionState);
+      }
       var node = (0, _getSelectedNode.getSelectedNode)(selection);
       // Update links
       var parent = node.getParent();
@@ -74,8 +93,9 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
       editorState.read(function () {
         updateTextFormatFloatingToolbar();
       });
-    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
+    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
       updateTextFormatFloatingToolbar();
+      setActiveEditor(newEditor);
       return false;
     }, _lexical.COMMAND_PRIORITY_LOW));
   }, [editor, updateTextFormatFloatingToolbar]);
@@ -90,9 +110,9 @@ var useToolbar = function useToolbar(_ref3) {
     anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem,
     type = _ref3.type,
     children = _ref3.children;
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    nodeIsText = _useRichTextEditor.nodeIsText,
-    setNodeIsText = _useRichTextEditor.setNodeIsText;
+  var _useRichTextEditor2 = (0, _useRichTextEditor3.useRichTextEditor)(),
+    nodeIsText = _useRichTextEditor2.nodeIsText,
+    setNodeIsText = _useRichTextEditor2.setNodeIsText;
   var updatePopup = (0, _react.useCallback)(function () {
     editor.getEditorState().read(function () {
       // Should not to pop up the floating toolbar when using IME input

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["FloatingToolbar","children","anchorElem","editor","popupCharStylesEditorRef","useRef","updateTextFormatFloatingToolbar","useCallback","selection","$getSelection","popupCharStylesEditorElem","current","nativeSelection","window","getSelection","isLink","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","rootElement","getRootElement","isCollapsed","contains","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","isEditable","useToolbar","document","body","type","useRichTextEditor","nodeIsText","setNodeIsText","updatePopup","isComposing","$isCodeHighlightNode","anchor","getNode","getTextContent","$isTextNode","registerRootListener","createPortal","Toolbar","makeComposable","useLexicalComposerContext"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isTextNode,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isCodeHighlightNode } from \"@lexical/code\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { ToolbarType } from \"~/types\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        let isLink = false;\n        if ($isRangeSelection(selection)) {\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                isLink = true;\n            }\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode) &&\n            !isLink\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-text-format-popup\">\n            {editor.isEditable() && children}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body,\n    type,\n    children\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText } = useRichTextEditor();\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            // Should not to pop up the floating toolbar when using IME input\n            if (editor.isComposing()) {\n                return;\n            }\n            const selection = $getSelection();\n            const nativeSelection = window.getSelection();\n            const rootElement = editor.getRootElement();\n\n            if (\n                nativeSelection !== null &&\n                (!$isRangeSelection(selection) ||\n                    rootElement === null ||\n                    !rootElement.contains(nativeSelection.anchorNode))\n            ) {\n                setNodeIsText(false);\n                return;\n            }\n\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n\n            const node = getSelectedNode(selection);\n\n            if (\n                !$isCodeHighlightNode(selection.anchor.getNode()) &&\n                selection.getTextContent() !== \"\"\n            ) {\n                setNodeIsText($isTextNode(node));\n            } else {\n                setNodeIsText(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(() => {\n                updatePopup();\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [editor, updatePopup]);\n\n    if (!nodeIsText) {\n        return null;\n    }\n\n    return createPortal(\n        <FloatingToolbar type={type} anchorElem={anchorElem} editor={editor}>\n            {children}\n        </FloatingToolbar>,\n        anchorElem\n    );\n};\n\nexport interface ToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\n/**\n * @description Main toolbar container\n */\nexport const Toolbar = makeComposable<ToolbarProps>(\n    \"Toolbar\",\n    ({ anchorElem, type, children }): JSX.Element | null => {\n        const [editor] = useLexicalComposerContext();\n        return useToolbar({ editor, anchorElem, type, children });\n    }\n);\n"],"mappings":";;;;;;;;;AAAA;AACA;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AASA,IAAMA,eAAyC,GAAG,SAA5CA,eAAyC,OAAyC;EAAA,IAAnCC,QAAQ,QAARA,QAAQ;IAAEC,UAAU,QAAVA,UAAU;IAAEC,MAAM,QAANA,MAAM;EAC7E,IAAMC,wBAAwB,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EAEpE,IAAMC,+BAA+B,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACtD,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;IAEjC,IAAMC,yBAAyB,GAAGN,wBAAwB,CAACO,OAAO;IAClE,IAAMC,eAAe,GAAGC,MAAM,CAACC,YAAY,EAAE;IAE7C,IAAIJ,yBAAyB,KAAK,IAAI,EAAE;MACpC;IACJ;IAEA,IAAIK,MAAM,GAAG,KAAK;IAClB,IAAI,IAAAC,0BAAiB,EAACR,SAAS,CAAC,EAAE;MAC9B,IAAMS,IAAI,GAAG,IAAAC,gCAAe,EAACV,SAAS,CAAC;MACvC;MACA,IAAMW,MAAM,GAAGF,IAAI,CAACG,SAAS,EAAE;MAE/B,IAAI,IAAAC,iBAAW,EAACF,MAAM,CAAC,IAAI,IAAAE,iBAAW,EAACJ,IAAI,CAAC,EAAE;QAC1CF,MAAM,GAAG,IAAI;MACjB;IACJ;IAEA,IAAMO,WAAW,GAAGnB,MAAM,CAACoB,cAAc,EAAE;IAC3C,IACIf,SAAS,KAAK,IAAI,IAClBI,eAAe,KAAK,IAAI,IACxB,CAACA,eAAe,CAACY,WAAW,IAC5BF,WAAW,KAAK,IAAI,IACpBA,WAAW,CAACG,QAAQ,CAACb,eAAe,CAACc,UAAU,CAAC,IAChD,CAACX,MAAM,EACT;MACE,IAAMY,SAAS,GAAG,IAAAC,gCAAe,EAAChB,eAAe,EAAEU,WAAW,CAAC;MAC/D,IAAAO,gDAAuB,EAACF,SAAS,EAAEjB,yBAAyB,EAAER,UAAU,CAAC;IAC7E;EACJ,CAAC,EAAE,CAACC,MAAM,EAAED,UAAU,CAAC,CAAC;EAExB,IAAA4B,gBAAS,EAAC,YAAM;IACZ,IAAMC,YAAY,GAAG7B,UAAU,CAAC8B,aAAa;IAE7C,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;MACjB9B,MAAM,CAAC+B,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;QAC/B7B,+BAA+B,EAAE;MACrC,CAAC,CAAC;IACN,CAAC;IAEDO,MAAM,CAACuB,gBAAgB,CAAC,QAAQ,EAAEH,MAAM,CAAC;IACzC,IAAIF,YAAY,EAAE;MACdA,YAAY,CAACK,gBAAgB,CAAC,QAAQ,EAAEH,MAAM,CAAC;IACnD;IAEA,OAAO,YAAM;MACTpB,MAAM,CAACwB,mBAAmB,CAAC,QAAQ,EAAEJ,MAAM,CAAC;MAC5C,IAAIF,YAAY,EAAE;QACdA,YAAY,CAACM,mBAAmB,CAAC,QAAQ,EAAEJ,MAAM,CAAC;MACtD;IACJ,CAAC;EACL,CAAC,EAAE,CAAC9B,MAAM,EAAEG,+BAA+B,EAAEJ,UAAU,CAAC,CAAC;EAEzD,IAAA4B,gBAAS,EAAC,YAAM;IACZ3B,MAAM,CAAC+B,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;MAC/B7B,+BAA+B,EAAE;IACrC,CAAC,CAAC;IACF,OAAO,IAAAgC,oBAAa,EAChBnC,MAAM,CAACoC,sBAAsB,CAAC,iBAAqB;MAAA,IAAlBC,WAAW,SAAXA,WAAW;MACxCA,WAAW,CAACL,IAAI,CAAC,YAAM;QACnB7B,+BAA+B,EAAE;MACrC,CAAC,CAAC;IACN,CAAC,CAAC,EAEFH,MAAM,CAACsC,eAAe,CAClBC,iCAAwB,EACxB,YAAM;MACFpC,+BAA+B,EAAE;MACjC,OAAO,KAAK;IAChB,CAAC,EACDqC,6BAAoB,CACvB,CACJ;EACL,CAAC,EAAE,CAACxC,MAAM,EAAEG,+BAA+B,CAAC,CAAC;EAE7C,oBACI;IAAK,GAAG,EAAEF,wBAAyB;IAAC,SAAS,EAAC;EAA4B,GACrED,MAAM,CAACyC,UAAU,EAAE,IAAI3C,QAAQ,CAC9B;AAEd,CAAC;AASD,IAAM4C,UAA+B,GAAG,SAAlCA,UAA+B,QAKX;EAAA,IAJtB1C,MAAM,SAANA,MAAM;IAAA,yBACND,UAAU;IAAVA,UAAU,iCAAG4C,QAAQ,CAACC,IAAI;IAC1BC,IAAI,SAAJA,IAAI;IACJ/C,QAAQ,SAARA,QAAQ;EAER,yBAAsC,IAAAgD,qCAAiB,GAAE;IAAjDC,UAAU,sBAAVA,UAAU;IAAEC,aAAa,sBAAbA,aAAa;EAEjC,IAAMC,WAAW,GAAG,IAAA7C,kBAAW,EAAC,YAAM;IAClCJ,MAAM,CAAC+B,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;MAC/B;MACA,IAAIhC,MAAM,CAACkD,WAAW,EAAE,EAAE;QACtB;MACJ;MACA,IAAM7C,SAAS,GAAG,IAAAC,sBAAa,GAAE;MACjC,IAAMG,eAAe,GAAGC,MAAM,CAACC,YAAY,EAAE;MAC7C,IAAMQ,WAAW,GAAGnB,MAAM,CAACoB,cAAc,EAAE;MAE3C,IACIX,eAAe,KAAK,IAAI,KACvB,CAAC,IAAAI,0BAAiB,EAACR,SAAS,CAAC,IAC1Bc,WAAW,KAAK,IAAI,IACpB,CAACA,WAAW,CAACG,QAAQ,CAACb,eAAe,CAACc,UAAU,CAAC,CAAC,EACxD;QACEyB,aAAa,CAAC,KAAK,CAAC;QACpB;MACJ;MAEA,IAAI,CAAC,IAAAnC,0BAAiB,EAACR,SAAS,CAAC,EAAE;QAC/B;MACJ;MAEA,IAAMS,IAAI,GAAG,IAAAC,gCAAe,EAACV,SAAS,CAAC;MAEvC,IACI,CAAC,IAAA8C,0BAAoB,EAAC9C,SAAS,CAAC+C,MAAM,CAACC,OAAO,EAAE,CAAC,IACjDhD,SAAS,CAACiD,cAAc,EAAE,KAAK,EAAE,EACnC;QACEN,aAAa,CAAC,IAAAO,oBAAW,EAACzC,IAAI,CAAC,CAAC;MACpC,CAAC,MAAM;QACHkC,aAAa,CAAC,KAAK,CAAC;MACxB;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAAChD,MAAM,CAAC,CAAC;EAEZ,IAAA2B,gBAAS,EAAC,YAAM;IACZgB,QAAQ,CAACV,gBAAgB,CAAC,iBAAiB,EAAEgB,WAAW,CAAC;IACzD,OAAO,YAAM;MACTN,QAAQ,CAACT,mBAAmB,CAAC,iBAAiB,EAAEe,WAAW,CAAC;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,IAAAtB,gBAAS,EAAC,YAAM;IACZ,OAAO,IAAAQ,oBAAa,EAChBnC,MAAM,CAACoC,sBAAsB,CAAC,YAAM;MAChCa,WAAW,EAAE;IACjB,CAAC,CAAC,EACFjD,MAAM,CAACwD,oBAAoB,CAAC,YAAM;MAC9B,IAAIxD,MAAM,CAACoB,cAAc,EAAE,KAAK,IAAI,EAAE;QAClC4B,aAAa,CAAC,KAAK,CAAC;MACxB;IACJ,CAAC,CAAC,CACL;EACL,CAAC,EAAE,CAAChD,MAAM,EAAEiD,WAAW,CAAC,CAAC;EAEzB,IAAI,CAACF,UAAU,EAAE;IACb,OAAO,IAAI;EACf;EAEA,oBAAO,IAAAU,sBAAY,gBACf,6BAAC,eAAe;IAAC,IAAI,EAAEZ,IAAK;IAAC,UAAU,EAAE9C,UAAW;IAAC,MAAM,EAAEC;EAAO,GAC/DF,QAAQ,CACK,EAClBC,UAAU,CACb;AACL,CAAC;AAQD;AACA;AACA;AACO,IAAM2D,OAAO,GAAG,IAAAC,gCAAc,EACjC,SAAS,EACT,iBAAwD;EAAA,IAArD5D,UAAU,SAAVA,UAAU;IAAE8C,IAAI,SAAJA,IAAI;IAAE/C,QAAQ,SAARA,QAAQ;EACzB,4BAAiB,IAAA8D,iDAAyB,GAAE;IAAA;IAArC5D,MAAM;EACb,OAAO0C,UAAU,CAAC;IAAE1C,MAAM,EAANA,MAAM;IAAED,UAAU,EAAVA,UAAU;IAAE8C,IAAI,EAAJA,IAAI;IAAE/C,QAAQ,EAARA;EAAS,CAAC,CAAC;AAC7D,CAAC,CACJ;AAAC"}
+{"version":3,"names":["FloatingToolbar","children","type","anchorElem","editor","popupCharStylesEditorRef","useRef","useRichTextEditor","toolbarType","setToolbarType","setTextBlockSelection","useState","activeEditor","setActiveEditor","useEffect","updateTextFormatFloatingToolbar","useCallback","selection","$getSelection","popupCharStylesEditorElem","current","nativeSelection","window","getSelection","isLink","$isRangeSelection","selectionState","getLexicalTextSelectionState","node","getSelectedNode","parent","getParent","$isLinkNode","rootElement","getRootElement","isCollapsed","contains","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","editorState","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_LOW","isEditable","useToolbar","document","body","nodeIsText","setNodeIsText","updatePopup","isComposing","$isCodeHighlightNode","anchor","getNode","getTextContent","$isTextNode","registerRootListener","createPortal","Toolbar","makeComposable","useLexicalComposerContext"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isTextNode,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isCodeHighlightNode } from \"@lexical/code\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { ToolbarType } from \"~/types\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { getLexicalTextSelectionState } from \"~/utils/getLexicalTextSelectionState\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, type, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarType, setToolbarType, setTextBlockSelection } = useRichTextEditor();\n    const [activeEditor, setActiveEditor] = useState(editor);\n\n    useEffect(() => {\n        if (toolbarType !== type) {\n            setToolbarType(type);\n        }\n    }, [type]);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        let isLink = false;\n        if ($isRangeSelection(selection)) {\n            const selectionState = getLexicalTextSelectionState(activeEditor, selection);\n            if (selectionState) {\n                setTextBlockSelection(selectionState);\n            }\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                isLink = true;\n            }\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode) &&\n            !isLink\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                (_payload, newEditor) => {\n                    updateTextFormatFloatingToolbar();\n                    setActiveEditor(newEditor);\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-text-format-popup\">\n            {editor.isEditable() && children}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body,\n    type,\n    children\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText } = useRichTextEditor();\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            // Should not to pop up the floating toolbar when using IME input\n            if (editor.isComposing()) {\n                return;\n            }\n            const selection = $getSelection();\n            const nativeSelection = window.getSelection();\n            const rootElement = editor.getRootElement();\n\n            if (\n                nativeSelection !== null &&\n                (!$isRangeSelection(selection) ||\n                    rootElement === null ||\n                    !rootElement.contains(nativeSelection.anchorNode))\n            ) {\n                setNodeIsText(false);\n                return;\n            }\n\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n\n            const node = getSelectedNode(selection);\n            if (\n                !$isCodeHighlightNode(selection.anchor.getNode()) &&\n                selection.getTextContent() !== \"\"\n            ) {\n                setNodeIsText($isTextNode(node));\n            } else {\n                setNodeIsText(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(() => {\n                updatePopup();\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [editor, updatePopup]);\n\n    if (!nodeIsText) {\n        return null;\n    }\n\n    return createPortal(\n        <FloatingToolbar type={type} anchorElem={anchorElem} editor={editor}>\n            {children}\n        </FloatingToolbar>,\n        anchorElem\n    );\n};\n\nexport interface ToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\n/**\n * @description Main toolbar container\n */\nexport const Toolbar = makeComposable<ToolbarProps>(\n    \"Toolbar\",\n    ({ anchorElem, type, children }): JSX.Element | null => {\n        const [editor] = useLexicalComposerContext();\n        return useToolbar({ editor, anchorElem, type, children });\n    }\n);\n"],"mappings":"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"}

package/components/ToolbarActions/BoldAction.d.ts

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

package/components/ToolbarActions/BoldAction.js

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

package/components/ToolbarActions/BoldAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["BoldAction","useLexicalComposerContext","editor","useState","isBold","setIsBold","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND"],"sources":["BoldAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. On toolbar, you can see as button that is bold.\n */\nexport const BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isBold, setIsBold] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n        setIsBold(!isBold);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isBold ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACO,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,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBJ,MAAM,CAACK,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDH,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAME,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIF,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhC;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}
+{"version":3,"names":["BoldAction","useLexicalComposerContext","editor","useState","isBold","setIsBold","useRichTextEditor","textBlockSelection","isBoldSelected","state","bold","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","useEffect"],"sources":["BoldAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isBold, setIsBold] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isBoldSelected = !!textBlockSelection?.state?.bold;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n        setIsBold(!isBold);\n    };\n\n    useEffect(() => {\n        setIsBold(isBoldSelected);\n    }, [isBoldSelected]);\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isBold ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAU,GAAS;EAAA;EAC5B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,cAAc,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEE,KAAK,kDAAzB,sBAA2BC,IAAI;EAExD,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBT,MAAM,CAACU,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDR,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,IAAAU,gBAAS,EAAC,YAAM;IACZT,SAAS,CAACG,cAAc,CAAC;EAC7B,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,oBACI;IACI,OAAO,EAAE;MAAA,OAAMG,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIP,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhC;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/BulletListAction.d.ts

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