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

package/components/ToolbarActions/FontSizeAction.js

@@ -0,0 +1,101 @@
+"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.FontSizeAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _selection = require("@lexical/selection");
+var _utils = require("@lexical/utils");
+var _lexical = require("lexical");
+var _DropDown = require("../../ui/DropDown");
+var FONT_SIZE_OPTIONS = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"];
+function dropDownActiveClass(active) {
+  if (active) {
+    return "active dropdown-item-active";
+  }
+  return "";
+}
+function FontSizeDropDown(props) {
+  var editor = props.editor,
+    value = props.value,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+  var handleClick = (0, _react.useCallback)(function (option) {
+    editor.update(function () {
+      var selection = (0, _lexical.$getSelection)();
+      if ((0, _lexical.$isRangeSelection)(selection)) {
+        (0, _selection.$patchStyleText)(selection, (0, _defineProperty2.default)({}, "font-size", option));
+      }
+    });
+  }, [editor]);
+  return /*#__PURE__*/_react.default.createElement(_DropDown.DropDown, {
+    disabled: disabled,
+    buttonClassName: "toolbar-item font-size",
+    buttonLabel: value,
+    buttonAriaLabel: "Formatting options for font size"
+  }, FONT_SIZE_OPTIONS.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_DropDown.DropDownItem, {
+      className: "item fontsize-item ".concat(dropDownActiveClass(value === option)),
+      onClick: function onClick() {
+        return handleClick(option);
+      },
+      key: option
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "text"
+    }, option));
+  }));
+}
+var FontSizeAction = function FontSizeAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(function () {
+      return editor.isEditable();
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isEditable = _useState2[0],
+    setIsEditable = _useState2[1];
+  var _useState3 = (0, _react.useState)(editor),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeEditor = _useState4[0],
+    setActiveEditor = _useState4[1];
+  var _useState5 = (0, _react.useState)("15px"),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    fontSize = _useState6[0],
+    setFontSize = _useState6[1];
+  var updateToolbar = (0, _react.useCallback)(function () {
+    var selection = (0, _lexical.$getSelection)();
+    if ((0, _lexical.$isRangeSelection)(selection)) {
+      setFontSize((0, _selection.$getSelectionStyleValueForProperty)(selection, "font-size", "15px"));
+    }
+  }, [activeEditor]);
+  (0, _react.useEffect)(function () {
+    return (0, _utils.mergeRegister)(editor.registerEditableListener(function (editable) {
+      setIsEditable(editable);
+    }), activeEditor.registerUpdateListener(function (_ref) {
+      var editorState = _ref.editorState;
+      editorState.read(function () {
+        updateToolbar();
+      });
+    }));
+  }, [activeEditor, editor]);
+  (0, _react.useEffect)(function () {
+    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
+      updateToolbar();
+      setActiveEditor(newEditor);
+      return false;
+    }, _lexical.COMMAND_PRIORITY_CRITICAL);
+  }, [editor, updateToolbar]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FontSizeDropDown, {
+    disabled: !isEditable,
+    value: fontSize,
+    editor: editor
+  }));
+};
+exports.FontSizeAction = FontSizeAction;

package/components/ToolbarActions/FontSizeAction.js.map

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

package/components/ToolbarActions/ItalicAction.d.ts

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

package/components/ToolbarActions/ItalicAction.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.ItalicAction = 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 ItalicAction = function ItalicAction() {
+  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),
+    isItalic = _useState2[0],
+    setIsItalic = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection;
+  var isItalicSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.italic);
+  var handleClick = function handleClick() {
+    editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "italic");
+    setIsItalic(!isItalic);
+  };
+  (0, _react.useEffect)(function () {
+    setIsItalic(isItalicSelected);
+  }, [isItalicSelected]);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return handleClick();
+    },
+    className: "popup-item spaced " + (isItalic ? "active" : ""),
+    "aria-label": "Format text as italic"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "format italic"
+  }));
+};
+exports.ItalicAction = ItalicAction;

package/components/ToolbarActions/ItalicAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ItalicAction","useLexicalComposerContext","editor","useState","isItalic","setIsItalic","useRichTextEditor","textBlockSelection","isItalicSelected","state","italic","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","useEffect"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const ItalicAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isItalic, setIsItalic] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isItalicSelected = !!textBlockSelection?.state?.italic;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n        setIsItalic(!isItalic);\n    };\n\n    useEffect(() => {\n        setIsItalic(isItalicSelected);\n    }, [isItalicSelected]);\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isItalic ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,YAAY,GAAG,SAAfA,YAAY,GAAS;EAAA;EAC9B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAxCC,QAAQ;IAAEC,WAAW;EAC5B,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,gBAAgB,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEE,KAAK,kDAAzB,sBAA2BC,MAAM;EAE5D,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBT,MAAM,CAACU,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;IACrDR,WAAW,CAAC,CAACD,QAAQ,CAAC;EAC1B,CAAC;EAED,IAAAU,gBAAS,EAAC,YAAM;IACZT,WAAW,CAACG,gBAAgB,CAAC;EACjC,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAEtB,oBACI;IACI,OAAO,EAAE;MAAA,OAAMG,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIP,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAAuB,gBAElC;IAAG,SAAS,EAAC;EAAe,EAAG,CAC1B;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/LinkAction.d.ts

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

package/components/ToolbarActions/LinkAction.js

@@ -0,0 +1,64 @@
+"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.LinkAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _link = require("@lexical/link");
+var _lexical = require("lexical");
+var _getSelectedNode = require("../../utils/getSelectedNode");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var LinkAction = function LinkAction() {
+  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),
+    isLink = _useState2[0],
+    setIsLink = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    setNodeIsText = _useRichTextEditor.setNodeIsText;
+  var insertLink = (0, _react.useCallback)(function () {
+    if (!isLink) {
+      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, "https://");
+      setNodeIsText(false);
+    } else {
+      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+  var updatePopup = (0, _react.useCallback)(function () {
+    editor.getEditorState().read(function () {
+      var selection = (0, _lexical.$getSelection)();
+      if (!(0, _lexical.$isRangeSelection)(selection)) {
+        return;
+      }
+      var node = (0, _getSelectedNode.getSelectedNode)(selection);
+      // Update links
+      var parent = node.getParent();
+      if ((0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    });
+  }, [editor]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("selectionchange", updatePopup);
+    return function () {
+      document.removeEventListener("selectionchange", updatePopup);
+    };
+  }, [updatePopup]);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: insertLink,
+    className: "popup-item spaced " + (isLink ? "active" : ""),
+    "aria-label": "Insert link"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "format link"
+  }));
+};
+exports.LinkAction = LinkAction;

package/components/ToolbarActions/LinkAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LinkAction","useLexicalComposerContext","editor","useState","isLink","setIsLink","useRichTextEditor","setNodeIsText","insertLink","useCallback","dispatchCommand","TOGGLE_LINK_COMMAND","updatePopup","getEditorState","read","selection","$getSelection","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","useEffect","document","addEventListener","removeEventListener"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@lexical/link\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\nexport const LinkAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isLink, setIsLink] = useState(false);\n    const { setNodeIsText } = useRichTextEditor();\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, \"https://\");\n            setNodeIsText(false);\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            const selection = $getSelection();\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                setIsLink(true);\n            } else {\n                setIsLink(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAU,GAAS;EAC5B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,yBAA0B,IAAAC,qCAAiB,GAAE;IAArCC,aAAa,sBAAbA,aAAa;EAErB,IAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACjC,IAAI,CAACL,MAAM,EAAE;MACTF,MAAM,CAACQ,eAAe,CAACC,yBAAmB,EAAE,UAAU,CAAC;MACvDJ,aAAa,CAAC,KAAK,CAAC;IACxB,CAAC,MAAM;MACHL,MAAM,CAACQ,eAAe,CAACC,yBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACT,MAAM,EAAEE,MAAM,CAAC,CAAC;EAEpB,IAAMQ,WAAW,GAAG,IAAAH,kBAAW,EAAC,YAAM;IAClCP,MAAM,CAACW,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;MAC/B,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MACjC,IAAI,CAAC,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC/B;MACJ;MACA,IAAMG,IAAI,GAAG,IAAAC,gCAAe,EAACJ,SAAS,CAAC;MACvC;MACA,IAAMK,MAAM,GAAGF,IAAI,CAACG,SAAS,EAAE;MAC/B,IAAI,IAAAC,iBAAW,EAACF,MAAM,CAAC,IAAI,IAAAE,iBAAW,EAACJ,IAAI,CAAC,EAAE;QAC1Cb,SAAS,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACHA,SAAS,CAAC,KAAK,CAAC;MACpB;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACH,MAAM,CAAC,CAAC;EAEZ,IAAAqB,gBAAS,EAAC,YAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEb,WAAW,CAAC;IACzD,OAAO,YAAM;MACTY,QAAQ,CAACE,mBAAmB,CAAC,iBAAiB,EAAEd,WAAW,CAAC;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACI;IACI,OAAO,EAAEJ,UAAW;IACpB,SAAS,EAAE,oBAAoB,IAAIJ,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExB;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/NumberedListAction.d.ts

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

package/components/ToolbarActions/NumberedListAction.js

@@ -0,0 +1,58 @@
+"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.NumberedListAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _webinyList = require("../../commands/webiny-list");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _findTypographyStyleByHtmlTag = require("../../utils/findTypographyStyleByHtmlTag");
+var NumberedListAction = function NumberedListAction() {
+  var _textBlockSelection$s;
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection,
+    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
+  var isListSelected = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s = textBlockSelection.state) === null || _textBlockSelection$s === void 0 ? void 0 : _textBlockSelection$s.list.isSelected;
+  (0, _react.useEffect)(function () {
+    var _textBlockSelection$s2;
+    var isListBulletType = (textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s2 = textBlockSelection.state) === null || _textBlockSelection$s2 === void 0 ? void 0 : _textBlockSelection$s2.textType) === "number";
+    setIsActive(isListBulletType);
+  }, [isListSelected]);
+  var formatNumberedList = function formatNumberedList() {
+    if (!isActive) {
+      var _findTypographyStyleB;
+      var styleId = themeEmotionMap ? (_findTypographyStyleB = (0, _findTypographyStyleByHtmlTag.findTypographyStyleByHtmlTag)("ol", themeEmotionMap)) === null || _findTypographyStyleB === void 0 ? void 0 : _findTypographyStyleB.id : undefined;
+      // will update the active state in the useEffect
+      editor.dispatchCommand(_webinyList.INSERT_ORDERED_WEBINY_LIST_COMMAND, {
+        themeStyleId: styleId
+      });
+      setIsActive(true);
+    } else {
+      editor.dispatchCommand(_webinyList.REMOVE_WEBINY_LIST_COMMAND, undefined);
+      // removing will not update correctly the active state, so we need to set to false manually.
+      setIsActive(false);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return formatNumberedList();
+    },
+    className: "popup-item spaced " + (isActive ? "active" : ""),
+    "aria-label": "Format text as numbered list"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon numbered-list"
+  }));
+};
+exports.NumberedListAction = NumberedListAction;

package/components/ToolbarActions/NumberedListAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NumberedListAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","themeEmotionMap","isListSelected","state","list","isSelected","useEffect","isListBulletType","textType","formatNumberedList","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_ORDERED_WEBINY_LIST_COMMAND","themeStyleId","REMOVE_WEBINY_LIST_COMMAND"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    INSERT_ORDERED_WEBINY_LIST_COMMAND,\n    REMOVE_WEBINY_LIST_COMMAND\n} from \"~/commands/webiny-list\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"~/utils/findTypographyStyleByHtmlTag\";\n\nexport const NumberedListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { textBlockSelection, themeEmotionMap } = useRichTextEditor();\n    const isListSelected = textBlockSelection?.state?.list.isSelected;\n\n    useEffect(() => {\n        const isListBulletType = textBlockSelection?.state?.textType === \"number\";\n        setIsActive(isListBulletType);\n    }, [isListSelected]);\n\n    const formatNumberedList = () => {\n        if (!isActive) {\n            const styleId = themeEmotionMap\n                ? findTypographyStyleByHtmlTag(\"ol\", themeEmotionMap)?.id\n                : undefined;\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_ORDERED_WEBINY_LIST_COMMAND, { themeStyleId: styleId });\n            setIsActive(true);\n        } else {\n            editor.dispatchCommand(REMOVE_WEBINY_LIST_COMMAND, undefined);\n            // removing will not update correctly the active state, so we need to set to false manually.\n            setIsActive(false);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAIA;AACA;AAEO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;EAAA;EACpC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,QAAQ;IAAEC,WAAW;EAC5B,yBAAgD,IAAAC,qCAAiB,GAAE;IAA3DC,kBAAkB,sBAAlBA,kBAAkB;IAAEC,eAAe,sBAAfA,eAAe;EAC3C,IAAMC,cAAc,GAAGF,kBAAkB,aAAlBA,kBAAkB,gDAAlBA,kBAAkB,CAAEG,KAAK,0DAAzB,sBAA2BC,IAAI,CAACC,UAAU;EAEjE,IAAAC,gBAAS,EAAC,YAAM;IAAA;IACZ,IAAMC,gBAAgB,GAAG,CAAAP,kBAAkB,aAAlBA,kBAAkB,iDAAlBA,kBAAkB,CAAEG,KAAK,2DAAzB,uBAA2BK,QAAQ,MAAK,QAAQ;IACzEV,WAAW,CAACS,gBAAgB,CAAC;EACjC,CAAC,EAAE,CAACL,cAAc,CAAC,CAAC;EAEpB,IAAMO,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;IAC7B,IAAI,CAACZ,QAAQ,EAAE;MAAA;MACX,IAAMa,OAAO,GAAGT,eAAe,4BACzB,IAAAU,0DAA4B,EAAC,IAAI,EAAEV,eAAe,CAAC,0DAAnD,sBAAqDW,EAAE,GACvDC,SAAS;MACf;MACAlB,MAAM,CAACmB,eAAe,CAACC,8CAAkC,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;MACrFZ,WAAW,CAAC,IAAI,CAAC;IACrB,CAAC,MAAM;MACHH,MAAM,CAACmB,eAAe,CAACG,sCAA0B,EAAEJ,SAAS,CAAC;MAC7D;MACAf,WAAW,CAAC,KAAK,CAAC;IACtB;EACJ,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAMW,kBAAkB,EAAE;IAAA,CAAC;IACpC,SAAS,EAAE,oBAAoB,IAAIZ,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA8B,gBAEzC;IAAG,SAAS,EAAC;EAAoB,EAAG,CAC/B;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/QuoteAction.d.ts

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

package/components/ToolbarActions/QuoteAction.js

@@ -0,0 +1,52 @@
+"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.QuoteAction = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _formatToQuote = require("../../utils/nodes/formatToQuote");
+var _formatToParagraph = require("../../utils/nodes/formatToParagraph");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var QuoteAction = function QuoteAction() {
+  var _textBlockSelection$s;
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection,
+    themeEmotionMap = _useRichTextEditor.themeEmotionMap,
+    activeEditor = _useRichTextEditor.activeEditor;
+  var isQuoteSelected = !!(textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.quote.isSelected);
+  var formatText = function formatText() {
+    if (!isActive) {
+      // Try to set default quote style, when the action button is clicked for first time
+      var DEFAULT_QUOTE_ID = "quote";
+      var hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];
+      (0, _formatToQuote.formatToQuote)(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);
+      return;
+    }
+    (0, _formatToParagraph.formatToParagraph)(editor);
+  };
+  (0, _react.useEffect)(function () {
+    setIsActive(isQuoteSelected);
+  }, [isQuoteSelected, activeEditor]);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return formatText();
+    },
+    className: "popup-item " + (isActive ? "active" : ""),
+    "aria-label": "Format text as quote"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon quote"
+  }));
+};
+exports.QuoteAction = QuoteAction;

package/components/ToolbarActions/QuoteAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["QuoteAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","themeEmotionMap","activeEditor","isQuoteSelected","state","quote","isSelected","formatText","DEFAULT_QUOTE_ID","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","useEffect"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { formatToQuote } from \"~/utils/nodes/formatToQuote\";\nimport { formatToParagraph } from \"~/utils/nodes/formatToParagraph\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nexport const QuoteAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isActive, setIsActive] = useState<boolean>(false);\n    const { textBlockSelection, themeEmotionMap, activeEditor } = useRichTextEditor();\n    const isQuoteSelected = !!textBlockSelection?.state?.quote.isSelected;\n\n    const formatText = () => {\n        if (!isActive) {\n            // Try to set default quote style, when the action button is clicked for first time\n            const DEFAULT_QUOTE_ID = \"quote\";\n            const hasQuoteStyles = themeEmotionMap && themeEmotionMap[DEFAULT_QUOTE_ID];\n            formatToQuote(editor, hasQuoteStyles ? DEFAULT_QUOTE_ID : undefined);\n            return;\n        }\n        formatToParagraph(editor);\n    };\n\n    useEffect(() => {\n        setIsActive(isQuoteSelected);\n    }, [isQuoteSelected, activeEditor]);\n\n    return (\n        <button\n            onClick={() => formatText()}\n            className={\"popup-item \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,GAAS;EAAA;EAC7B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAgC,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjDC,QAAQ;IAAEC,WAAW;EAC5B,yBAA8D,IAAAC,qCAAiB,GAAE;IAAzEC,kBAAkB,sBAAlBA,kBAAkB;IAAEC,eAAe,sBAAfA,eAAe;IAAEC,YAAY,sBAAZA,YAAY;EACzD,IAAMC,eAAe,GAAG,CAAC,EAACH,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEI,KAAK,kDAAzB,sBAA2BC,KAAK,CAACC,UAAU;EAErE,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAI,CAACV,QAAQ,EAAE;MACX;MACA,IAAMW,gBAAgB,GAAG,OAAO;MAChC,IAAMC,cAAc,GAAGR,eAAe,IAAIA,eAAe,CAACO,gBAAgB,CAAC;MAC3E,IAAAE,4BAAa,EAACf,MAAM,EAAEc,cAAc,GAAGD,gBAAgB,GAAGG,SAAS,CAAC;MACpE;IACJ;IACA,IAAAC,oCAAiB,EAACjB,MAAM,CAAC;EAC7B,CAAC;EAED,IAAAkB,gBAAS,EAAC,YAAM;IACZf,WAAW,CAACK,eAAe,CAAC;EAChC,CAAC,EAAE,CAACA,eAAe,EAAED,YAAY,CAAC,CAAC;EAEnC,oBACI;IACI,OAAO,EAAE;MAAA,OAAMK,UAAU,EAAE;IAAA,CAAC;IAC5B,SAAS,EAAE,aAAa,IAAIV,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IACtD,cAAW;EAAsB,gBAEjC;IAAG,SAAS,EAAC;EAAY,EAAG,CACvB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/TextAlignmentAction.d.ts

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

package/components/ToolbarActions/TextAlignmentAction.js

@@ -0,0 +1,70 @@
+"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.TextAlignmentAction = exports.BaseTextAlignmentDropDown = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lexical = require("lexical");
+var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _reactComposition = require("@webiny/react-composition");
+var _TextAlignmentActionContextProps = require("../../context/TextAlignmentActionContextProps");
+/*
+ * Base text alignment dropdown composable component.
+ * Note: To add a custom dropdown component use @see LexicalEditorConfig API.
+ */
+var BaseTextAlignmentDropDown = (0, _reactComposition.makeComposable)("BaseTextAlignmentDropDown", function () {
+  (0, _react.useEffect)(function () {
+    console.log("Default BaseTextAlignmentDropDown, please add your own component");
+  }, []);
+  return null;
+});
+exports.BaseTextAlignmentDropDown = BaseTextAlignmentDropDown;
+var TextAlignmentActionDropDown = function TextAlignmentActionDropDown(_ref) {
+  var element = _ref.element;
+  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+    component: BaseTextAlignmentDropDown,
+    with: function _with() {
+      return function () {
+        return element;
+      };
+    }
+  });
+};
+var TextAlignmentAction = function TextAlignmentAction() {
+  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    activeEditor = _useRichTextEditor.activeEditor;
+  var _useState = (0, _react.useState)(""),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    alignmentValue = _useState2[0],
+    setAlignmentValue = _useState2[1];
+  var applyTextAlignment = function applyTextAlignment(value) {
+    if (activeEditor) {
+      activeEditor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, value);
+      setAlignmentValue(value);
+    }
+  };
+  var outdentText = function outdentText() {
+    if (activeEditor) {
+      activeEditor.dispatchCommand(_lexical.OUTDENT_CONTENT_COMMAND, undefined);
+    }
+  };
+  var indentText = function indentText() {
+    if (activeEditor) {
+      activeEditor.dispatchCommand(_lexical.INDENT_CONTENT_COMMAND, undefined);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_TextAlignmentActionContextProps.TextAlignmentActionContext.Provider, {
+    value: {
+      value: alignmentValue,
+      applyTextAlignment: applyTextAlignment,
+      outdentText: outdentText,
+      indentText: indentText
+    }
+  }, /*#__PURE__*/_react.default.createElement(BaseTextAlignmentDropDown, null));
+};
+exports.TextAlignmentAction = TextAlignmentAction;
+TextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;

package/components/ToolbarActions/TextAlignmentAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseTextAlignmentDropDown","makeComposable","useEffect","console","log","TextAlignmentActionDropDown","element","TextAlignmentAction","useRichTextEditor","activeEditor","useState","alignmentValue","setAlignmentValue","applyTextAlignment","value","dispatchCommand","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport {\n    ElementFormatType,\n    FORMAT_ELEMENT_COMMAND,\n    INDENT_CONTENT_COMMAND,\n    OUTDENT_CONTENT_COMMAND\n} from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeComposable(\n    \"BaseTextAlignmentDropDown\",\n    (): JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TextAlignmentActionDropdownProps {\n    element: JSX.Element;\n}\n\nconst TextAlignmentActionDropDown: React.FC<TextAlignmentActionDropdownProps> = ({\n    element\n}): JSX.Element => {\n    return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport interface TextAlignmentAction extends React.FC<unknown> {\n    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n}\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n    const { activeEditor } = useRichTextEditor();\n    const [alignmentValue, setAlignmentValue] = useState<ElementFormatType>(\"\");\n    const applyTextAlignment = (value: ElementFormatType) => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n            setAlignmentValue(value);\n        }\n    };\n\n    const outdentText = () => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n        }\n    };\n\n    const indentText = () => {\n        if (activeEditor) {\n            activeEditor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <TextAlignmentActionContext.Provider\n            value={{ value: alignmentValue, applyTextAlignment, outdentText, indentText }}\n        >\n            <BaseTextAlignmentDropDown />\n        </TextAlignmentActionContext.Provider>\n    );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":";;;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AAEA;AACA;AACA;AACA;AACO,IAAMA,yBAAyB,GAAG,IAAAC,gCAAc,EACnD,2BAA2B,EAC3B,YAA0B;EACtB,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CACJ;AAAC;AAMF,IAAMC,2BAAuE,GAAG,SAA1EA,2BAAuE,OAE1D;EAAA,IADfC,OAAO,QAAPA,OAAO;EAEP,oBAAO,6BAAC,yBAAO;IAAC,SAAS,EAAEN,yBAA0B;IAAC,IAAI,EAAE;MAAA,OAAM;QAAA,OAAMM,OAAO;MAAA;IAAA;EAAC,EAAG;AACvF,CAAC;AAMM,IAAMC,mBAAwC,GAAG,SAA3CA,mBAAwC,GAAS;EAC1D,yBAAyB,IAAAC,qCAAiB,GAAE;IAApCC,YAAY,sBAAZA,YAAY;EACpB,gBAA4C,IAAAC,eAAQ,EAAoB,EAAE,CAAC;IAAA;IAApEC,cAAc;IAAEC,iBAAiB;EACxC,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAwB,EAAK;IACrD,IAAIL,YAAY,EAAE;MACdA,YAAY,CAACM,eAAe,CAACC,+BAAsB,EAAEF,KAAK,CAAC;MAC3DF,iBAAiB,CAACE,KAAK,CAAC;IAC5B;EACJ,CAAC;EAED,IAAMG,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtB,IAAIR,YAAY,EAAE;MACdA,YAAY,CAACM,eAAe,CAACG,gCAAuB,EAAEC,SAAS,CAAC;IACpE;EACJ,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAIX,YAAY,EAAE;MACdA,YAAY,CAACM,eAAe,CAACM,+BAAsB,EAAEF,SAAS,CAAC;IACnE;EACJ,CAAC;EAED,oBACI,6BAAC,2DAA0B,CAAC,QAAQ;IAChC,KAAK,EAAE;MAAEL,KAAK,EAAEH,cAAc;MAAEE,kBAAkB,EAAlBA,kBAAkB;MAAEI,WAAW,EAAXA,WAAW;MAAEG,UAAU,EAAVA;IAAW;EAAE,gBAE9E,6BAAC,yBAAyB,OAAG,CACK;AAE9C,CAAC;AAAC;AAEFb,mBAAmB,CAACe,qBAAqB,GAAGjB,2BAA2B"}

package/components/ToolbarActions/TypographyAction.d.ts

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