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

package/components/Toolbar/Toolbar.js

@@ -0,0 +1,215 @@
+"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.Toolbar = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lexical = require("lexical");
+var _reactComposition = require("@webiny/react-composition");
+var _reactDom = require("react-dom");
+var _utils = require("@lexical/utils");
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+require("./Toolbar.css");
+var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
+var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
+var _useRichTextEditor3 = require("../../hooks/useRichTextEditor");
+var _getLexicalTextSelectionState = require("../../utils/getLexicalTextSelectionState");
+var FloatingToolbar = function FloatingToolbar(_ref) {
+  var children = _ref.children,
+    type = _ref.type,
+    anchorElem = _ref.anchorElem,
+    editor = _ref.editor;
+  var popupCharStylesEditorRef = (0, _react.useRef)(null);
+  var _useRichTextEditor = (0, _useRichTextEditor3.useRichTextEditor)(),
+    toolbarType = _useRichTextEditor.toolbarType,
+    setToolbarType = _useRichTextEditor.setToolbarType;
+  (0, _react.useEffect)(function () {
+    if (toolbarType !== type) {
+      setToolbarType(type);
+    }
+  }, [type]);
+  var mouseMoveListener = (0, _react.useCallback)(function (e) {
+    /* Indicates which mouse button(s) was pressed.
+     / 1 = mouse left button
+     / 3 = mouse left and right button in the same time
+     / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+     */
+    if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current && (e.buttons === 1 || e.buttons === 3)) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
+        var x = e.clientX;
+        var y = e.clientY;
+        var elementUnderMouse = document.elementFromPoint(x, y);
+        if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+          // Mouse is not over the target element => not a normal click, but probably a drag
+          popupCharStylesEditorRef.current.style.pointerEvents = "none";
+        }
+      }
+    }
+  }, [popupCharStylesEditorRef]);
+  var mouseUpListener = (0, _react.useCallback)(function () {
+    if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
+        popupCharStylesEditorRef.current.style.pointerEvents = "auto";
+      }
+    }
+  }, [popupCharStylesEditorRef]);
+  (0, _react.useEffect)(function () {
+    if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current) {
+      document.addEventListener("mousemove", mouseMoveListener);
+      document.addEventListener("mouseup", mouseUpListener);
+      return function () {
+        document.removeEventListener("mousemove", mouseMoveListener);
+        document.removeEventListener("mouseup", mouseUpListener);
+      };
+    }
+    return;
+  }, [popupCharStylesEditorRef]);
+  var updateTextFormatFloatingToolbar = (0, _react.useCallback)(function () {
+    var selection = (0, _lexical.$getSelection)();
+    var popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+    var nativeSelection = window.getSelection();
+    if (popupCharStylesEditorElem === null) {
+      return;
+    }
+    var rootElement = editor.getRootElement();
+    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
+      var rangeRect = (0, _getDOMRangeRect.getDOMRangeRect)(nativeSelection, rootElement);
+      (0, _setFloatingElemPosition.setFloatingElemPosition)(rangeRect, popupCharStylesEditorElem, anchorElem);
+    }
+  }, [editor, anchorElem]);
+  (0, _react.useEffect)(function () {
+    var scrollerElem = anchorElem.parentElement;
+    var update = function update() {
+      editor.getEditorState().read(function () {
+        updateTextFormatFloatingToolbar();
+      });
+    };
+    window.addEventListener("resize", update);
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update);
+    }
+    return function () {
+      window.removeEventListener("resize", update);
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update);
+      }
+    };
+  }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
+  (0, _react.useEffect)(function () {
+    editor.getEditorState().read(function () {
+      updateTextFormatFloatingToolbar();
+    });
+    return (0, _utils.mergeRegister)(editor.registerUpdateListener(function (_ref2) {
+      var editorState = _ref2.editorState;
+      editorState.read(function () {
+        updateTextFormatFloatingToolbar();
+      });
+    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
+      updateTextFormatFloatingToolbar();
+      return false;
+    }, _lexical.COMMAND_PRIORITY_LOW));
+  }, [editor, updateTextFormatFloatingToolbar]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: popupCharStylesEditorRef,
+    className: "floating-text-format-popup"
+  }, editor.isEditable() && children);
+};
+var useToolbar = function useToolbar(_ref3) {
+  var editor = _ref3.editor,
+    _ref3$anchorElem = _ref3.anchorElem,
+    anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem,
+    type = _ref3.type,
+    children = _ref3.children;
+  var _useRichTextEditor2 = (0, _useRichTextEditor3.useRichTextEditor)(),
+    nodeIsText = _useRichTextEditor2.nodeIsText,
+    setNodeIsText = _useRichTextEditor2.setNodeIsText,
+    setActiveEditor = _useRichTextEditor2.setActiveEditor,
+    setIsEditable = _useRichTextEditor2.setIsEditable,
+    setTextBlockSelection = _useRichTextEditor2.setTextBlockSelection;
+  var _useState = (0, _react.useState)(editor),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    toolbarActiveEditor = _useState2[0],
+    setToolbarActiveEditor = _useState2[1];
+  var updateToolbar = (0, _react.useCallback)(function () {
+    editor.getEditorState().read(function () {
+      // Should not to pop up the floating toolbar when using IME input
+      if (editor.isComposing()) {
+        return;
+      }
+      var selection = (0, _lexical.$getSelection)();
+      if ((0, _lexical.$isRangeSelection)(selection)) {
+        var selectionState = (0, _getLexicalTextSelectionState.getLexicalTextSelectionState)(toolbarActiveEditor, selection);
+        if (selectionState) {
+          setTextBlockSelection(selectionState);
+          if (selectionState.selectedText !== "") {
+            setNodeIsText(true);
+          } else {
+            setNodeIsText(false);
+          }
+        }
+      }
+      if (!(0, _lexical.$isRangeSelection)(selection)) {
+        setNodeIsText(false);
+        return;
+      }
+    });
+  }, [toolbarActiveEditor]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("selectionchange", updateToolbar);
+    return function () {
+      document.removeEventListener("selectionchange", updateToolbar);
+    };
+  }, [updateToolbar]);
+  (0, _react.useEffect)(function () {
+    return editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_payload, newEditor) {
+      updateToolbar();
+      setToolbarActiveEditor(newEditor);
+      setActiveEditor(newEditor);
+      return false;
+    }, _lexical.COMMAND_PRIORITY_CRITICAL);
+  }, [editor, updateToolbar]);
+  (0, _react.useEffect)(function () {
+    return (0, _utils.mergeRegister)(editor.registerEditableListener(function (editable) {
+      setIsEditable(editable);
+    }), toolbarActiveEditor.registerUpdateListener(function (_ref4) {
+      var editorState = _ref4.editorState;
+      editorState.read(function () {
+        updateToolbar();
+      });
+    }), editor.registerRootListener(function () {
+      if (editor.getRootElement() === null) {
+        setNodeIsText(false);
+      }
+    }));
+  }, [updateToolbar, editor, toolbarActiveEditor]);
+  if (!nodeIsText) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(FloatingToolbar, {
+    type: type,
+    anchorElem: anchorElem,
+    editor: editor
+  }, children), anchorElem);
+};
+/**
+ * @description Main toolbar container
+ */
+var Toolbar = (0, _reactComposition.makeComposable)("Toolbar", function (_ref5) {
+  var anchorElem = _ref5.anchorElem,
+    type = _ref5.type,
+    children = _ref5.children;
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  return useToolbar({
+    editor: editor,
+    anchorElem: anchorElem,
+    type: type,
+    children: children
+  });
+});
+exports.Toolbar = Toolbar;

package/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FloatingToolbar","children","type","anchorElem","editor","popupCharStylesEditorRef","useRef","useRichTextEditor","toolbarType","setToolbarType","useEffect","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","isEditable","useToolbar","body","nodeIsText","setNodeIsText","setActiveEditor","setIsEditable","setTextBlockSelection","useState","toolbarActiveEditor","setToolbarActiveEditor","updateToolbar","isComposing","$isRangeSelection","selectionState","getLexicalTextSelectionState","selectedText","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","registerEditableListener","editable","registerRootListener","createPortal","Toolbar","makeComposable","useLexicalComposerContext"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    COMMAND_PRIORITY_CRITICAL,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { ToolbarType } from \"~/types\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { getLexicalTextSelectionState } from \"~/utils/getLexicalTextSelectionState\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, type, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarType, setToolbarType } = useRichTextEditor();\n\n    useEffect(() => {\n        if (toolbarType !== type) {\n            setToolbarType(type);\n        }\n    }, [type]);\n\n    const mouseMoveListener = useCallback(\n        (e: MouseEvent) => {\n            /* Indicates which mouse button(s) was pressed.\n             / 1 = mouse left button\n             / 3 = mouse left and right button in the same time\n             / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n             */\n            if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n                if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n                    const x = e.clientX;\n                    const y = e.clientY;\n                    const elementUnderMouse = document.elementFromPoint(x, y);\n\n                    if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n                        // Mouse is not over the target element => not a normal click, but probably a drag\n                        popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n                    }\n                }\n            }\n        },\n        [popupCharStylesEditorRef]\n    );\n\n    const mouseUpListener = useCallback(() => {\n        if (popupCharStylesEditorRef?.current) {\n            if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n                popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n            }\n        }\n    }, [popupCharStylesEditorRef]);\n\n    useEffect(() => {\n        if (popupCharStylesEditorRef?.current) {\n            document.addEventListener(\"mousemove\", mouseMoveListener);\n            document.addEventListener(\"mouseup\", mouseUpListener);\n\n            return () => {\n                document.removeEventListener(\"mousemove\", mouseMoveListener);\n                document.removeEventListener(\"mouseup\", mouseUpListener);\n            };\n        }\n        return;\n    }, [popupCharStylesEditorRef]);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-text-format-popup\">\n            {editor.isEditable() && children}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body,\n    type,\n    children\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText, setActiveEditor, setIsEditable, setTextBlockSelection } =\n        useRichTextEditor();\n\n    const [toolbarActiveEditor, setToolbarActiveEditor] = useState<LexicalEditor>(editor);\n\n    const updateToolbar = useCallback(() => {\n        editor.getEditorState().read(() => {\n            // Should not to pop up the floating toolbar when using IME input\n            if (editor.isComposing()) {\n                return;\n            }\n\n            const selection = $getSelection();\n\n            if ($isRangeSelection(selection)) {\n                const selectionState = getLexicalTextSelectionState(toolbarActiveEditor, selection);\n                if (selectionState) {\n                    setTextBlockSelection(selectionState);\n                    if (selectionState.selectedText !== \"\") {\n                        setNodeIsText(true);\n                    } else {\n                        setNodeIsText(false);\n                    }\n                }\n            }\n\n            if (!$isRangeSelection(selection)) {\n                setNodeIsText(false);\n                return;\n            }\n        });\n    }, [toolbarActiveEditor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updateToolbar);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updateToolbar);\n        };\n    }, [updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setToolbarActiveEditor(newEditor);\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            }),\n            toolbarActiveEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [updateToolbar, editor, toolbarActiveEditor]);\n\n    if (!nodeIsText) {\n        return null;\n    }\n\n    return createPortal(\n        <FloatingToolbar type={type} anchorElem={anchorElem} editor={editor}>\n            {children}\n        </FloatingToolbar>,\n        anchorElem\n    );\n};\n\nexport interface ToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\n/**\n * @description Main toolbar container\n */\nexport const Toolbar = makeComposable<ToolbarProps>(\n    \"Toolbar\",\n    ({ anchorElem, type, children }): JSX.Element | null => {\n        const [editor] = useLexicalComposerContext();\n        return useToolbar({ editor, anchorElem, type, children });\n    }\n);\n"],"mappings":"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"}

package/components/ToolbarActions/BoldAction.d.ts

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

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

package/components/ToolbarActions/BoldAction.js.map

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

package/components/ToolbarActions/BulletListAction.d.ts

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

package/components/ToolbarActions/BulletListAction.js

@@ -0,0 +1,56 @@
+"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.BulletListAction = 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 BulletListAction = function BulletListAction() {
+  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) === "bullet";
+    setIsActive(isListBulletType);
+  }, [isListSelected]);
+  var formatBulletList = function formatBulletList() {
+    if (!isActive) {
+      var _findTypographyStyleB;
+      var styleId = themeEmotionMap ? (_findTypographyStyleB = (0, _findTypographyStyleByHtmlTag.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)) === null || _findTypographyStyleB === void 0 ? void 0 : _findTypographyStyleB.id : undefined;
+      // will update the active state in the useEffect
+      editor.dispatchCommand(_webinyList.INSERT_UNORDERED_WEBINY_LIST_COMMAND, {
+        themeStyleId: styleId
+      });
+      setIsActive(true);
+    } else {
+      editor.dispatchCommand(_webinyList.REMOVE_WEBINY_LIST_COMMAND, undefined);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return formatBulletList();
+    },
+    className: "popup-item spaced " + (isActive ? "active" : ""),
+    "aria-label": "Format text as bullet list"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon bullet-list"
+  }));
+};
+exports.BulletListAction = BulletListAction;

package/components/ToolbarActions/BulletListAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BulletListAction","useLexicalComposerContext","editor","useState","isActive","setIsActive","useRichTextEditor","textBlockSelection","themeEmotionMap","isListSelected","state","list","isSelected","useEffect","isListBulletType","textType","formatBulletList","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_UNORDERED_WEBINY_LIST_COMMAND","themeStyleId","REMOVE_WEBINY_LIST_COMMAND"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    INSERT_UNORDERED_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 BulletListAction = () => {\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 === \"bullet\";\n        setIsActive(isListBulletType);\n    }, [isListSelected]);\n\n    const formatBulletList = () => {\n        if (!isActive) {\n            const styleId = themeEmotionMap\n                ? findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id\n                : undefined;\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_WEBINY_LIST_COMMAND, { themeStyleId: styleId });\n            setIsActive(true);\n        } else {\n            editor.dispatchCommand(REMOVE_WEBINY_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAIA;AACA;AAEO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;EAAA;EAClC,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,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC3B,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,gDAAoC,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;MACvFZ,WAAW,CAAC,IAAI,CAAC;IACrB,CAAC,MAAM;MACHH,MAAM,CAACmB,eAAe,CAACG,sCAA0B,EAAEJ,SAAS,CAAC;IACjE;EACJ,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAMJ,gBAAgB,EAAE;IAAA,CAAC;IAClC,SAAS,EAAE,oBAAoB,IAAIZ,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvC;IAAG,SAAS,EAAC;EAAkB,EAAG,CAC7B;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/CodeHighlightAction.d.ts

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

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

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CodeHighlightAction","useLexicalComposerContext","editor","useState","isCode","setIsCode","useRichTextEditor","textBlockSelection","isCodeSelected","state","code","useEffect","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND"],"sources":["CodeHighlightAction.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 CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isCode, setIsCode] = useState(false);\n    const { textBlockSelection } = useRichTextEditor();\n    const isCodeSelected = !!textBlockSelection?.state?.code;\n\n    useEffect(() => {\n        setIsCode(isCodeSelected);\n    }, [isCodeSelected]);\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n        setIsCode(!isCode);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isCode ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AAEO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EAAA;EACrC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,yBAA+B,IAAAC,qCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,cAAc,GAAG,CAAC,EAACD,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEE,KAAK,kDAAzB,sBAA2BC,IAAI;EAExD,IAAAC,gBAAS,EAAC,YAAM;IACZN,SAAS,CAACG,cAAc,CAAC;EAC7B,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,IAAMI,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBV,MAAM,CAACW,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDT,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAMQ,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIR,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhC;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/FontColorAction.d.ts

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

package/components/ToolbarActions/FontColorAction.js

@@ -0,0 +1,83 @@
+"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.FontColorPicker = exports.FontColorAction = 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 _reactComposition = require("@webiny/react-composition");
+var _FontColorActionContext = require("../../context/FontColorActionContext");
+var _FontColorNode = require("../../nodes/FontColorNode");
+var _getSelectedNode = require("../../utils/getSelectedNode");
+var FontColorPicker = (0, _reactComposition.makeComposable)("FontColorPicker", function () {
+  (0, _react.useEffect)(function () {
+    console.log("Default FontColorPicker, please add your own component");
+  }, []);
+  return null;
+});
+exports.FontColorPicker = FontColorPicker;
+var FontActionColorPicker = function FontActionColorPicker(_ref) {
+  var element = _ref.element;
+  return /*#__PURE__*/_react.default.createElement(_reactComposition.Compose, {
+    component: FontColorPicker,
+    with: function _with() {
+      return function () {
+        return element;
+      };
+    }
+  });
+};
+var FontColorAction = function FontColorAction() {
+  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
+    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useState = (0, _react.useState)("#000"),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    fontColor = _useState2[0],
+    setFontColor = _useState2[1];
+  var setFontColorSelect = (0, _react.useCallback)(function (fontColorValue) {
+    setFontColor(fontColorValue);
+  }, [fontColor]);
+  var onFontColorSelect = (0, _react.useCallback)(function (colorValue, themeColorName) {
+    setFontColorSelect(colorValue);
+    editor.dispatchCommand(_FontColorNode.ADD_FONT_COLOR_COMMAND, {
+      color: colorValue,
+      themeColorName: themeColorName
+    });
+  }, []);
+  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);
+      if ((0, _FontColorNode.$isFontColorNode)(node)) {
+        var colorStyle = node.getColorStyle();
+        setFontColor(colorStyle.color);
+      }
+    });
+  }, [editor]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("selectionchange", updatePopup);
+    return function () {
+      document.removeEventListener("selectionchange", updatePopup);
+    };
+  }, [updatePopup]);
+  return /*#__PURE__*/_react.default.createElement(_FontColorActionContext.FontColorActionContext.Provider, {
+    value: {
+      value: fontColor,
+      applyColor: onFontColorSelect
+    }
+  }, /*#__PURE__*/_react.default.createElement(FontColorPicker, null));
+};
+exports.FontColorAction = FontColorAction;
+{
+  /* Color action settings */
+}
+FontColorAction.ColorPicker = FontActionColorPicker;

package/components/ToolbarActions/FontColorAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FontColorPicker","makeComposable","useEffect","console","log","FontActionColorPicker","element","FontColorAction","useLexicalComposerContext","editor","useState","fontColor","setFontColor","setFontColorSelect","useCallback","fontColorValue","onFontColorSelect","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","color","updatePopup","getEditorState","read","selection","$getSelection","$isRangeSelection","node","getSelectedNode","$isFontColorNode","colorStyle","getColorStyle","document","addEventListener","removeEventListener","value","applyColor","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $getSelection, $isRangeSelection, LexicalCommand } from \"lexical\";\nimport { Compose, makeComposable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"~/nodes/FontColorNode\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\n\nexport const FontColorPicker = makeComposable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker: React.FC<FontActionColorPicker> = ({ element }): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport interface FontColorAction extends React.FC<unknown> {\n    ColorPicker: typeof FontActionColorPicker;\n}\n\nexport const FontColorAction: FontColorAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [fontColor, setFontColor] = useState<string>(\"#000\");\n\n    const setFontColorSelect = useCallback(\n        (fontColorValue: string) => {\n            setFontColor(fontColorValue);\n        },\n        [fontColor]\n    );\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            setFontColorSelect(colorValue);\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: colorValue,\n                themeColorName\n            });\n        },\n        []\n    );\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            if ($isFontColorNode(node)) {\n                const colorStyle = node.getColorStyle();\n                setFontColor(colorStyle.color);\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        <FontColorActionContext.Provider\n            value={{\n                value: fontColor,\n                applyColor: onFontColorSelect\n            }}\n        >\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\n{\n    /* Color action settings */\n}\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,eAAe,GAAG,IAAAC,gCAAc,EAAC,iBAAiB,EAAE,YAA0B;EACvF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAAC;AAMH,IAAMC,qBAAsD,GAAG,SAAzDA,qBAAsD,OAAiC;EAAA,IAA3BC,OAAO,QAAPA,OAAO;EACrE,oBAAO,6BAAC,yBAAO;IAAC,SAAS,EAAEN,eAAgB;IAAC,IAAI,EAAE;MAAA,OAAM;QAAA,OAAMM,OAAO;MAAA;IAAA;EAAC,EAAG;AAC7E,CAAC;AAMM,IAAMC,eAAgC,GAAG,SAAnCA,eAAgC,GAAS;EAClD,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAAkC,IAAAC,eAAQ,EAAS,MAAM,CAAC;IAAA;IAAnDC,SAAS;IAAEC,YAAY;EAE9B,IAAMC,kBAAkB,GAAG,IAAAC,kBAAW,EAClC,UAACC,cAAsB,EAAK;IACxBH,YAAY,CAACG,cAAc,CAAC;EAChC,CAAC,EACD,CAACJ,SAAS,CAAC,CACd;EAED,IAAMK,iBAAiB,GAAG,IAAAF,kBAAW,EACjC,UAACG,UAAkB,EAAEC,cAAkC,EAAK;IACxDL,kBAAkB,CAACI,UAAU,CAAC;IAC9BR,MAAM,CAACU,eAAe,CAAmCC,qCAAsB,EAAE;MAC7EC,KAAK,EAAEJ,UAAU;MACjBC,cAAc,EAAdA;IACJ,CAAC,CAAC;EACN,CAAC,EACD,EAAE,CACL;EAED,IAAMI,WAAW,GAAG,IAAAR,kBAAW,EAAC,YAAM;IAClCL,MAAM,CAACc,cAAc,EAAE,CAACC,IAAI,CAAC,YAAM;MAC/B,IAAMC,SAAS,GAAG,IAAAC,sBAAa,GAAE;MACjC,IAAI,CAAC,IAAAC,0BAAiB,EAACF,SAAS,CAAC,EAAE;QAC/B;MACJ;MACA,IAAMG,IAAI,GAAG,IAAAC,gCAAe,EAACJ,SAAS,CAAC;MACvC,IAAI,IAAAK,+BAAgB,EAACF,IAAI,CAAC,EAAE;QACxB,IAAMG,UAAU,GAAGH,IAAI,CAACI,aAAa,EAAE;QACvCpB,YAAY,CAACmB,UAAU,CAACV,KAAK,CAAC;MAClC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACZ,MAAM,CAAC,CAAC;EAEZ,IAAAP,gBAAS,EAAC,YAAM;IACZ+B,QAAQ,CAACC,gBAAgB,CAAC,iBAAiB,EAAEZ,WAAW,CAAC;IACzD,OAAO,YAAM;MACTW,QAAQ,CAACE,mBAAmB,CAAC,iBAAiB,EAAEb,WAAW,CAAC;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACI,6BAAC,8CAAsB,CAAC,QAAQ;IAC5B,KAAK,EAAE;MACHc,KAAK,EAAEzB,SAAS;MAChB0B,UAAU,EAAErB;IAChB;EAAE,gBAEF,6BAAC,eAAe,OAAG,CACW;AAE1C,CAAC;AAAC;AAEF;EACI;AAAA;AAEJT,eAAe,CAAC+B,WAAW,GAAGjC,qBAAqB"}

package/components/ToolbarActions/FontSizeAction.d.ts

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