@webiny/lexical-editor 0.0.0-unstable.085ff6572f

package/components/ToolbarActions/TypographyAction.js

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

package/components/ToolbarActions/TypographyAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseTypographyActionDropDown","makeComposable","useEffect","console","log","TypographyActionDropDown","element","TypographyAction","useLexicalComposerContext","editor","useState","typography","setTypography","useRichTextEditor","textBlockSelection","themeEmotionMap","isTypographySelected","state","isSelected","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","$isTypographyElementNode","el","getTypographyValue","$isParagraphNode","$isHeadingNode","$isQuoteNode","elementWithThemeStyle","styleId","getTypographyStyleId","style","name","css","styles","getStyleId","undefined","elementStyle","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    /* Color action settings */\n}\nTypographyAction.TypographyDropDown = TypographyActionDropDown;\n"],"mappings":"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"}

package/components/ToolbarActions/UnderlineAction.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const UnderlineAction: () => JSX.Element;

package/components/ToolbarActions/UnderlineAction.js

@@ -0,0 +1,43 @@
+"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 _lexical = require("lexical");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var UnderlineAction = function UnderlineAction() {
+  var _textBlockSelection$s;
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  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 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" : ""),
+    "aria-label": "Format text as italic"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "format underline"
+  }));
+};
+exports.UnderlineAction = UnderlineAction;

package/components/ToolbarActions/UnderlineAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UnderlineAction","useLexicalComposerContext","editor","useState","isUnderline","setIsUnderline","useRichTextEditor","textBlockSelection","isUnderlineSelected","state","underline","useEffect","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND"],"sources":["UnderlineAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const UnderlineAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isUnderline, setIsUnderline] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isUnderlineSelected = !!textBlockSelection?.state?.underline;\n\n    useEffect(() => {\n        setIsUnderline(isUnderlineSelected);\n    }, [isUnderlineSelected]);\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n        setIsUnderline(!isUnderline);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isUnderline ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format underline\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAe,GAAS;EAAA;EACjC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAsC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAA9CC,WAAW;IAAEC,cAAc;EAClC,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,mBAAmB,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEE,KAAK,kDAAzB,sBAA2BC,SAAS;EAElE,IAAAC,gBAAS,EAAC,YAAM;IACZN,cAAc,CAACG,mBAAmB,CAAC;EACvC,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,IAAMI,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBV,MAAM,CAACW,eAAe,CAACC,4BAAmB,EAAE,WAAW,CAAC;IACxDT,cAAc,CAAC,CAACD,WAAW,CAAC;EAChC,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAMQ,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIR,WAAW,GAAG,QAAQ,GAAG,EAAE,CAAE;IAChE,cAAW;EAAuB,gBAElC;IAAG,SAAS,EAAC;EAAkB,EAAG,CAC7B;AAEjB,CAAC;AAAC"}

package/components/ToolbarPresets/HeadingToolbarPreset.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HeadingToolbarPreset: () => JSX.Element;

package/components/ToolbarPresets/HeadingToolbarPreset.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadingToolbarPreset = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BoldAction = require("../ToolbarActions/BoldAction");
+var _AddToolbarAction = require("../AddToolbarAction");
+var _ItalicAction = require("../ToolbarActions/ItalicAction");
+var _UnderlineAction = require("../ToolbarActions/UnderlineAction");
+var _CodeHighlightAction = require("../ToolbarActions/CodeHighlightAction");
+var _LinkAction = require("../ToolbarActions/LinkAction");
+var _FontSizeAction = require("../ToolbarActions/FontSizeAction");
+var _Divider = require("../../ui/Divider");
+var _FontColorAction = require("../ToolbarActions/FontColorAction");
+var _TypographyAction = require("../ToolbarActions/TypographyAction");
+var _TextAlignmentAction = require("../ToolbarActions/TextAlignmentAction");
+var HeadingToolbarPreset = function HeadingToolbarPreset() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_FontSizeAction.FontSizeAction, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_FontColorAction.FontColorAction, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_TypographyAction.TypographyAction, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_TextAlignmentAction.TextAlignmentAction, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_Divider.Divider, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_BoldAction.BoldAction, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_ItalicAction.ItalicAction, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_UnderlineAction.UnderlineAction, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_CodeHighlightAction.CodeHighlightAction, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_Divider.Divider, null),
+    type: "heading"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_LinkAction.LinkAction, null),
+    type: "heading"
+  }));
+};
+exports.HeadingToolbarPreset = HeadingToolbarPreset;

package/components/ToolbarPresets/HeadingToolbarPreset.js.map

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

package/components/ToolbarPresets/ParagraphToolbarPreset.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ParagraphToolbarPreset: () => JSX.Element;

package/components/ToolbarPresets/ParagraphToolbarPreset.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParagraphToolbarPreset = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BoldAction = require("../ToolbarActions/BoldAction");
+var _AddToolbarAction = require("../AddToolbarAction");
+var _ItalicAction = require("../ToolbarActions/ItalicAction");
+var _UnderlineAction = require("../ToolbarActions/UnderlineAction");
+var _CodeHighlightAction = require("../ToolbarActions/CodeHighlightAction");
+var _LinkAction = require("../ToolbarActions/LinkAction");
+var _FontSizeAction = require("../ToolbarActions/FontSizeAction");
+var _Divider = require("../../ui/Divider");
+var _NumberedListAction = require("../ToolbarActions/NumberedListAction");
+var _BulletListAction = require("../ToolbarActions/BulletListAction");
+var _QuoteAction = require("../ToolbarActions/QuoteAction");
+var _FontColorAction = require("../ToolbarActions/FontColorAction");
+var _TypographyAction = require("../ToolbarActions/TypographyAction");
+var _TextAlignmentAction = require("../ToolbarActions/TextAlignmentAction");
+var ParagraphToolbarPreset = function ParagraphToolbarPreset() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_FontSizeAction.FontSizeAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_FontColorAction.FontColorAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_TypographyAction.TypographyAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_TextAlignmentAction.TextAlignmentAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_Divider.Divider, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_BoldAction.BoldAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_ItalicAction.ItalicAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_UnderlineAction.UnderlineAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_CodeHighlightAction.CodeHighlightAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_Divider.Divider, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_NumberedListAction.NumberedListAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_BulletListAction.BulletListAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_Divider.Divider, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_LinkAction.LinkAction, null),
+    type: "paragraph"
+  }), /*#__PURE__*/_react.default.createElement(_AddToolbarAction.AddToolbarAction, {
+    element: /*#__PURE__*/_react.default.createElement(_QuoteAction.QuoteAction, null),
+    type: "paragraph"
+  }));
+};
+exports.ParagraphToolbarPreset = ParagraphToolbarPreset;

package/components/ToolbarPresets/ParagraphToolbarPreset.js.map

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

package/context/FontColorActionContext.d.ts

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

package/context/FontColorActionContext.js

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

package/context/FontColorActionContext.js.map

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

package/context/RichTextEditorContext.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { TextBlockSelection, ThemeEmotionMap, ToolbarType } from "../types";
+import { WebinyTheme } from "../themes/webinyLexicalTheme";
+import { LexicalEditor } from "lexical";
+export interface RichTextEditorContext {
+    nodeIsText: boolean;
+    setNodeIsText: (nodeIsText: boolean) => void;
+    toolbarType?: ToolbarType;
+    setToolbarType: (type: ToolbarType) => void;
+    textBlockSelection: TextBlockSelection | null;
+    setTextBlockSelection: (textBlockSelection: TextBlockSelection) => void;
+    theme?: WebinyTheme;
+    setTheme: (theme: WebinyTheme) => void;
+    themeEmotionMap?: ThemeEmotionMap;
+    setThemeEmotionMap: (themeEmotionMap?: ThemeEmotionMap) => void;
+    activeEditor?: LexicalEditor;
+    setActiveEditor: (editor: LexicalEditor) => void;
+    isEditable: boolean;
+    setIsEditable: (isEditable: boolean) => void;
+}
+export declare const RichTextEditorContext: React.Context<RichTextEditorContext | undefined>;
+interface RichTextEditorProviderProps {
+    children?: React.ReactNode | React.ReactNode[];
+}
+export declare const RichTextEditorProvider: React.FC<RichTextEditorProviderProps>;
+export {};

package/context/RichTextEditorContext.js

@@ -0,0 +1,68 @@
+"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.RichTextEditorProvider = exports.RichTextEditorContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+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),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    nodeIsText = _useState2[0],
+    setIsText = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    toolbarType = _useState4[0],
+    setToolbarType = _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),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    themeEmotionMap = _useState8[0],
+    setThemeEmotionMap = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    activeEditor = _useState10[0],
+    setActiveEditor = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    isEditable = _useState12[0],
+    setIsEditable = _useState12[1];
+  /*
+   * @desc Keeps data from current user text selection like range selection, nodes, node key...
+   */
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    textBlockSelection = _useState14[0],
+    setTextBlockSelection = _useState14[1];
+  var setNodeIsText = function setNodeIsText(nodeIsText) {
+    setIsText(nodeIsText);
+  };
+  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,
+      setThemeEmotionMap: setThemeEmotionMap,
+      activeEditor: activeEditor,
+      setActiveEditor: setActiveEditor,
+      isEditable: isEditable,
+      setIsEditable: setIsEditable
+    }
+  }, children);
+};
+exports.RichTextEditorProvider = RichTextEditorProvider;

package/context/RichTextEditorContext.js.map

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

package/context/SharedHistoryContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="web" />
+import { ReactNode } from "react";
+import { HistoryState } from "@lexical/history";
+declare type ContextShape = {
+    historyState?: HistoryState;
+};
+export declare const SharedHistoryContext: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSharedHistoryContext: () => ContextShape;
+export {};

package/context/SharedHistoryContext.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSharedHistoryContext = exports.SharedHistoryContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _history = require("@lexical/history");
+var Context = /*#__PURE__*/(0, React.createContext)({});
+var SharedHistoryContext = function SharedHistoryContext(_ref) {
+  var children = _ref.children;
+  var historyContext = (0, React.useMemo)(function () {
+    return {
+      historyState: (0, _history.createEmptyHistoryState)()
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: historyContext
+  }, children);
+};
+exports.SharedHistoryContext = SharedHistoryContext;
+var useSharedHistoryContext = function useSharedHistoryContext() {
+  return (0, React.useContext)(Context);
+};
+exports.useSharedHistoryContext = useSharedHistoryContext;

package/context/SharedHistoryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Context","createContext","SharedHistoryContext","children","historyContext","useMemo","historyState","createEmptyHistoryState","useSharedHistoryContext","useContext"],"sources":["SharedHistoryContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { createContext, ReactNode, useContext, useMemo } from \"react\";\nimport { createEmptyHistoryState, HistoryState } from \"@lexical/history\";\n\ntype ContextShape = {\n    historyState?: HistoryState;\n};\n\nconst Context: React.Context<ContextShape> = createContext({});\n\nexport const SharedHistoryContext = ({ children }: { children: ReactNode }): JSX.Element => {\n    const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);\n    return <Context.Provider value={historyContext}>{children}</Context.Provider>;\n};\n\nexport const useSharedHistoryContext = (): ContextShape => {\n    return useContext(Context);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAMA,IAAMA,OAAoC,gBAAG,IAAAC,mBAAa,EAAC,CAAC,CAAC,CAAC;AAEvD,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;EAC3C,IAAMC,cAAc,GAAG,IAAAC,aAAO,EAAC;IAAA,OAAO;MAAEC,YAAY,EAAE,IAAAC,gCAAuB;IAAG,CAAC;EAAA,CAAC,EAAE,EAAE,CAAC;EACvF,oBAAO,oBAAC,OAAO,CAAC,QAAQ;IAAC,KAAK,EAAEH;EAAe,GAAED,QAAQ,CAAoB;AACjF,CAAC;AAAC;AAEK,IAAMK,uBAAuB,GAAG,SAA1BA,uBAAuB,GAAuB;EACvD,OAAO,IAAAC,gBAAU,EAACT,OAAO,CAAC;AAC9B,CAAC;AAAC"}

package/context/TextAlignmentActionContextProps.d.ts

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

package/context/TextAlignmentActionContextProps.js

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

package/context/TextAlignmentActionContextProps.js.map

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

package/context/TypographyActionContext.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { TypographyValue } from "../types";
+export interface TypographyActionContextProps {
+    value: TypographyValue | undefined;
+    applyTypography: (value: TypographyValue) => void;
+}
+export declare const TypographyActionContext: React.Context<TypographyActionContextProps | undefined>;

package/context/TypographyActionContext.js

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

package/context/TypographyActionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TypographyActionContext","React","createContext","undefined"],"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;AAgBO,IAAMA,uBAAuB,gBAAGC,cAAK,CAACC,aAAa,CAExDC,SAAS,CAAC;AAAC"}

package/hooks/useFontColorPicker.d.ts

@@ -0,0 +1,2 @@
+import { FontColorActionContext } from "../context/FontColorActionContext";
+export declare function useFontColorPicker(): FontColorActionContext;