@webiny/lexical-editor 5.40.0-beta.2 → 5.40.0-beta.3

package/components/Toolbar/Toolbar.js

@@ -12,16 +12,21 @@ var _lexical = require("lexical");
 var _reactDom = require("react-dom");
 var _utils = require("@lexical/utils");
 var _lexicalNodes = require("@webiny/lexical-nodes");
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 require("./Toolbar.css");
 var _getDOMRangeRect = require("../../utils/getDOMRangeRect");
 var _setFloatingElemPosition = require("../../utils/setFloatingElemPosition");
 var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
 var _useCurrentSelection = require("../../hooks/useCurrentSelection");
 var _getSelectedNode = require("../../utils/getSelectedNode");
+var _hooks = require("../../hooks");
+var _isChildOfFloatingToolbar = require("../../utils/isChildOfFloatingToolbar");
 var FloatingToolbar = function FloatingToolbar(_ref) {
   var anchorElem = _ref.anchorElem,
     editor = _ref.editor;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
   var popupCharStylesEditorRef = (0, _react.useRef)(null);
   var _useLexicalEditorConf = (0, _LexicalEditorConfig.useLexicalEditorConfig)(),
     toolbarElements = _useLexicalEditorConf.toolbarElements;
@@ -102,13 +107,22 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
         updateTextFormatFloatingToolbar();
       });
     }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
+      setIsVisible(true);
       updateTextFormatFloatingToolbar();
       return false;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.BLUR_COMMAND, function (payload) {
+      if (!(0, _isChildOfFloatingToolbar.isChildOfFloatingToolbar)(payload.relatedTarget)) {
+        setIsVisible(false);
+      }
+      return false;
     }, _lexical.COMMAND_PRIORITY_LOW));
   }, [editor, updateTextFormatFloatingToolbar]);
+  if (!isVisible) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: popupCharStylesEditorRef,
-    className: "floating-text-format-popup"
+    className: "floating-toolbar"
   }, editor.isEditable() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolbarElements.map(function (action) {
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: action.name
@@ -124,12 +138,11 @@ function isLinkNode(selection) {
   var parent = node.getParent();
   return (0, _lexicalNodes.$isLinkNode)(parent) || (0, _lexicalNodes.$isLinkNode)(node);
 }
-var Toolbar = function Toolbar(_ref3) {
+var Toolbar = exports.Toolbar = function Toolbar(_ref3) {
   var _ref3$anchorElem = _ref3.anchorElem,
     anchorElem = _ref3$anchorElem === void 0 ? document.body : _ref3$anchorElem;
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
   var showToolbar = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref4) {
     var rangeSelection = _ref4.rangeSelection;
     if (!rangeSelection) {
@@ -145,6 +158,5 @@ var Toolbar = function Toolbar(_ref3) {
     editor: editor
   }), anchorElem);
 };
-exports.Toolbar = Toolbar;
 
 //# sourceMappingURL=Toolbar.js.map

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_lexicalNodes","_LexicalComposerContext","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_getSelectedNode","FloatingToolbar","_ref","anchorElem","editor","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","default","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","isLinkNode","node","getSelectedNode","parent","getParent","$isLinkNode","Toolbar","_ref3","_ref3$anchorElem","body","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal","exports"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef } from \"react\";\nimport {\n    $getSelection,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    RangeSelection,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isLinkNode } from \"@webiny/lexical-nodes\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarElements } = useLexicalEditorConfig();\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() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\n/**\n * TODO: this logic should live in Node classes. A toolbar should not decide when to show itself.\n */\nfunction isLinkNode(selection: RangeSelection) {\n    const node = getSelectedNode(selection);\n    const parent = node.getParent();\n\n    return $isLinkNode(parent) || $isLinkNode(node);\n}\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const [editor] = useLexicalComposerContext();\n    const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n\n        return !isLinkNode(rangeSelection) && !rangeSelection.isCollapsed();\n    });\n\n    if (!showToolbar) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_lexicalNodes","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_getSelectedNode","_hooks","_isChildOfFloatingToolbar","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","isLinkNode","node","getSelectedNode","parent","getParent","$isLinkNode","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    RangeSelection,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isLinkNode } from \"@webiny/lexical-nodes\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n    const [isVisible, setIsVisible] = useState(true);\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarElements } = useLexicalEditorConfig();\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                    setIsVisible(true);\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n                        setIsVisible(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\n/**\n * TODO: this logic should live in Node classes. A toolbar should not decide when to show itself.\n */\nfunction isLinkNode(selection: RangeSelection) {\n    const node = getSelectedNode(selection);\n    const parent = node.getParent();\n\n    return $isLinkNode(parent) || $isLinkNode(node);\n}\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const { editor } = useRichTextEditor();\n    const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n\n        return !isLinkNode(rangeSelection) && !rangeSelection.isCollapsed();\n    });\n\n    if (!showToolbar) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}

package/components/ToolbarActions/BoldAction.d.ts

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

package/components/ToolbarActions/BoldAction.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BoldAction = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _lexical = require("lexical");
 var _useCurrentSelection2 = require("../../hooks/useCurrentSelection");
-var BoldAction = function BoldAction() {
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+var _hooks = require("../../hooks");
+var BoldAction = exports.BoldAction = function BoldAction() {
+  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
   var _useCurrentSelection = (0, _useCurrentSelection2.useCurrentSelection)(),
     rangeSelection = _useCurrentSelection.rangeSelection;
   var isBoldSelected = rangeSelection ? rangeSelection.hasFormat("bold") : false;
@@ -28,6 +26,5 @@ var BoldAction = function BoldAction() {
     className: "format bold"
   }));
 };
-exports.BoldAction = BoldAction;
 
 //# sourceMappingURL=BoldAction.js.map

package/components/ToolbarActions/BoldAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_lexical","_useCurrentSelection2","BoldAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isBoldSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["BoldAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\n\nexport const BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { rangeSelection } = useCurrentSelection();\n    const isBoldSelected = rangeSelection ? rangeSelection.hasFormat(\"bold\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isBoldSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AAEO,IAAMI,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIpB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAEJ,WAAY;IACrBK,SAAS,EAAE,oBAAoB,IAAIP,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhChB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAlB,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_useCurrentSelection2","_hooks","BoldAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isBoldSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","default","createElement","onClick","className"],"sources":["BoldAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const BoldAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isBoldSelected = rangeSelection ? rangeSelection.hasFormat(\"bold\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isBoldSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,IAAMI,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEL,WAAY;IACrBM,SAAS,EAAE,oBAAoB,IAAIR,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCd,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/BulletListAction.d.ts

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

package/components/ToolbarActions/BulletListAction.js

@@ -5,22 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BulletListAction = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _commands = require("../../commands");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
+var _useRichTextEditor3 = require("../../hooks/useRichTextEditor");
 var _lexicalTheme = require("@webiny/lexical-theme");
 var _lexicalNodes = require("@webiny/lexical-nodes");
 var _useCurrentElement2 = require("../../hooks/useCurrentElement");
-var BulletListAction = function BulletListAction() {
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+var BulletListAction = exports.BulletListAction = function BulletListAction() {
+  var _useRichTextEditor = (0, _useRichTextEditor3.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
   var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
     element = _useCurrentElement.element;
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    themeEmotionMap = _useRichTextEditor.themeEmotionMap;
+  var _useRichTextEditor2 = (0, _useRichTextEditor3.useRichTextEditor)(),
+    themeEmotionMap = _useRichTextEditor2.themeEmotionMap;
   var isList = (0, _lexicalNodes.$isListNode)(element);
   var isBullet = isList && element.getListType() === "bullet";
   var formatBulletList = function formatBulletList() {
@@ -44,6 +41,5 @@ var BulletListAction = function BulletListAction() {
     className: "icon bullet-list"
   }));
 };
-exports.BulletListAction = BulletListAction;
 
 //# sourceMappingURL=BulletListAction.js.map

package/components/ToolbarActions/BulletListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_commands","_useRichTextEditor2","_lexicalTheme","_lexicalNodes","_useCurrentElement2","BulletListAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentElement","useCurrentElement","element","_useRichTextEditor","useRichTextEditor","themeEmotionMap","isList","$isListNode","isBullet","getListType","formatBulletList","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const BulletListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { element } = useCurrentElement();\n    const { themeEmotionMap } = useRichTextEditor();\n    const isList = $isListNode(element);\n\n    const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n    const formatBulletList = () => {\n        if (!isBullet) {\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_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AACA,IAAAM,mBAAA,GAAAN,OAAA;AAEO,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EAClC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,kBAAA,GAA4B,IAAAC,qCAAiB,EAAC,CAAC;IAAvCC,eAAe,GAAAF,kBAAA,CAAfE,eAAe;EACvB,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACL,OAAO,CAAC;EAEnC,IAAMM,QAAQ,GAAGF,MAAM,IAAKJ,OAAO,CAAcO,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,IAAMG,OAAO,GAAGN,eAAe,GACzB,IAAAO,0CAA4B,EAAC,IAAI,EAAEP,eAAe,CAAC,EAAEQ,EAAE,GACvDC,SAAS;MACf;MACAf,MAAM,CAACgB,eAAe,CAACC,uCAA6B,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHZ,MAAM,CAACgB,eAAe,CAACG,6BAAmB,EAAEJ,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACI9B,MAAA,CAAAc,OAAA,CAAAqB,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMV,gBAAgB,CAAC,CAAC;IAAA,CAAC;IAClCW,SAAS,EAAE,oBAAoB,IAAIb,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCxB,MAAA,CAAAc,OAAA,CAAAqB,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAA7B,gBAAA,GAAAA,gBAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_commands","_useRichTextEditor3","_lexicalTheme","_lexicalNodes","_useCurrentElement2","BulletListAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentElement","useCurrentElement","element","_useRichTextEditor2","themeEmotionMap","isList","$isListNode","isBullet","getListType","formatBulletList","styleId","findTypographyStyleByHtmlTag","id","undefined","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","themeStyleId","REMOVE_LIST_COMMAND","default","createElement","onClick","className"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const BulletListAction = () => {\n    const { editor } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const { themeEmotionMap } = useRichTextEditor();\n    const isList = $isListNode(element);\n\n    const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n    const formatBulletList = () => {\n        if (!isBullet) {\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_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AAEO,IAAMM,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;EAClC,IAAAE,kBAAA,GAAmB,IAAAC,qCAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,kBAAA,GAAoB,IAAAC,qCAAiB,EAAC,CAAC;IAA/BC,OAAO,GAAAF,kBAAA,CAAPE,OAAO;EACf,IAAAC,mBAAA,GAA4B,IAAAL,qCAAiB,EAAC,CAAC;IAAvCM,eAAe,GAAAD,mBAAA,CAAfC,eAAe;EACvB,IAAMC,MAAM,GAAG,IAAAC,yBAAW,EAACJ,OAAO,CAAC;EAEnC,IAAMK,QAAQ,GAAGF,MAAM,IAAKH,OAAO,CAAcM,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA,EAAS;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,IAAMG,OAAO,GAAGN,eAAe,GACzB,IAAAO,0CAA4B,EAAC,IAAI,EAAEP,eAAe,CAAC,EAAEQ,EAAE,GACvDC,SAAS;MACf;MACAd,MAAM,CAACe,eAAe,CAACC,uCAA6B,EAAE;QAAEC,YAAY,EAAEN;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHX,MAAM,CAACe,eAAe,CAACG,6BAAmB,EAAEJ,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACI1B,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMX,gBAAgB,CAAC,CAAC;IAAA,CAAC;IAClCY,SAAS,EAAE,oBAAoB,IAAId,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCpB,MAAA,CAAA+B,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/CodeHighlightAction.d.ts

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

package/components/ToolbarActions/CodeHighlightAction.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CodeHighlightAction = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _lexical = require("lexical");
 var _useCurrentSelection2 = require("../../hooks/useCurrentSelection");
-var CodeHighlightAction = function CodeHighlightAction() {
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+var _hooks = require("../../hooks");
+var CodeHighlightAction = exports.CodeHighlightAction = function CodeHighlightAction() {
+  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
   var _useCurrentSelection = (0, _useCurrentSelection2.useCurrentSelection)(),
     rangeSelection = _useCurrentSelection.rangeSelection;
   var isCodeSelected = rangeSelection ? rangeSelection.hasFormat("code") : false;
@@ -28,6 +26,5 @@ var CodeHighlightAction = function CodeHighlightAction() {
     className: "format code"
   }));
 };
-exports.CodeHighlightAction = CodeHighlightAction;
 
 //# sourceMappingURL=CodeHighlightAction.js.map

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_lexical","_useCurrentSelection2","CodeHighlightAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isCodeSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\n\nexport const CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { rangeSelection } = useCurrentSelection();\n    const isCodeSelected = rangeSelection ? rangeSelection.hasFormat(\"code\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isCodeSelected ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AAEO,IAAMI,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIpB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAEJ,WAAY;IACrBK,SAAS,EAAE,oBAAoB,IAAIP,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhChB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAlB,mBAAA,GAAAA,mBAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_useCurrentSelection2","_hooks","CodeHighlightAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isCodeSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","default","createElement","onClick","className"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const CodeHighlightAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isCodeSelected = rangeSelection ? rangeSelection.hasFormat(\"code\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isCodeSelected ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,IAAMI,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEL,WAAY;IACrBM,SAAS,EAAE,oBAAoB,IAAIR,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCd,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/FontColorAction.d.ts

@@ -2,8 +2,9 @@ import React from "react";
 export declare const FontColorPicker: import("@webiny/react-composition").GenericComponent<any> & {
     original: import("@webiny/react-composition").GenericComponent<any>;
     originalName: string;
+    displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: any) => JSX.Element | null>) => (props: unknown) => JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: any) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
 };
 interface FontActionColorPicker {
     element: JSX.Element;

package/components/ToolbarActions/FontColorAction.js

@@ -1,26 +1,23 @@
 "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 _reactComposition = require("@webiny/react-composition");
 var _FontColorActionContext = require("../../context/FontColorActionContext");
 var _lexicalNodes = require("@webiny/lexical-nodes");
 var _getSelectedNode = require("../../utils/getSelectedNode");
 var _useCurrentSelection = require("../../hooks/useCurrentSelection");
-var FontColorPicker = (0, _reactComposition.makeDecoratable)("FontColorPicker", function () {
+var _hooks = require("../../hooks");
+var FontColorPicker = exports.FontColorPicker = (0, _reactComposition.makeDecoratable)("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, {
@@ -32,10 +29,9 @@ var FontActionColorPicker = function FontActionColorPicker(_ref) {
     }
   });
 };
-var FontColorAction = function FontColorAction() {
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+var FontColorAction = exports.FontColorAction = function FontColorAction() {
+  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
   var fontColor = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref2) {
     var rangeSelection = _ref2.rangeSelection;
     if (!rangeSelection) {
@@ -60,7 +56,6 @@ var FontColorAction = function FontColorAction() {
     value: context
   }, /*#__PURE__*/_react.default.createElement(FontColorPicker, null));
 };
-exports.FontColorAction = FontColorAction;
 FontColorAction.ColorPicker = FontActionColorPicker;
 
 //# sourceMappingURL=FontColorAction.js.map

package/components/ToolbarActions/FontColorAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","FontColorPicker","makeDecoratable","useEffect","console","log","exports","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\n\nexport const FontColorPicker = makeDecoratable(\"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 = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: colorValue,\n                themeColorName\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,oBAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAG,IAAAC,iCAAe,EAAC,iBAAiB,EAAE,YAA0B;EACxF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAACC,OAAA,CAAAL,eAAA,GAAAA,eAAA;AAMH,IAAMM,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,iBAAA,CAAAgB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC7E,CAAC;AAMM,IAAMO,eAAgC,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAV,OAAA,EAAAO,qBAAA;IAArCI,MAAM,GAAAF,sBAAA;EACb,IAAMG,SAAS,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC3D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,IAAMC,IAAI,GAAG,IAAAC,gCAAe,EAACF,cAAc,CAAC;IAC5C,OAAO,IAAAG,8BAAgB,EAACF,IAAI,CAAC,GAAGA,IAAI,CAACG,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,UAAkB,EAAEC,cAAkC,EAAK;IACxDb,MAAM,CAACc,eAAe,CAAmCC,oCAAsB,EAAE;MAC7EN,KAAK,EAAEG,UAAU;MACjBC,cAAc,EAAdA;IACJ,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHC,KAAK,EAAEjB,SAAS;MAChBkB,UAAU,EAAET;IAChB,CAAC;EAAA,CAAC,EACF,CAACA,iBAAiB,EAAET,SAAS,CACjC,CAAC;EAED,oBACI9B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACd,uBAAA,CAAA4C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C7C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAACK,OAAA,CAAAU,eAAA,GAAAA,eAAA;AAEFA,eAAe,CAAC2B,WAAW,GAAGpC,qBAAqB"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactComposition","_FontColorActionContext","_lexicalNodes","_getSelectedNode","_useCurrentSelection","_hooks","FontColorPicker","exports","makeDecoratable","useEffect","console","log","FontActionColorPicker","_ref","element","default","createElement","Compose","component","with","_with","FontColorAction","_useRichTextEditor","useRichTextEditor","editor","fontColor","useDeriveValueFromSelection","_ref2","rangeSelection","node","getSelectedNode","$isFontColorNode","getColorStyle","color","onFontColorSelect","useCallback","colorValue","themeColorName","dispatchCommand","ADD_FONT_COLOR_COMMAND","context","useMemo","value","applyColor","FontColorActionContext","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPicker = makeDecoratable(\"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 = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: colorValue,\n                themeColorName\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAEO,IAAMO,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,IAAAE,iCAAe,EAAC,iBAAiB,EAAE,YAA0B;EACxF,IAAAC,gBAAS,EAAC,YAAM;IACZC,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAAwD;EAAA,IAAlDC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EACpC,oBAAOjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,iBAAA,CAAAiB,OAAO;IAACC,SAAS,EAAEZ,eAAgB;IAACa,IAAI,EAAE,SAAAC,MAAA;MAAA,OAAM;QAAA,OAAMN,OAAO;MAAA;IAAA;EAAC,CAAE,CAAC;AAC7E,CAAC;AAMM,IAAMO,eAAgC,GAAAd,OAAA,CAAAc,eAAA,GAAG,SAAnCA,eAAgCA,CAAA,EAAS;EAClD,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAMC,SAAS,GAAG,IAAAC,gDAA2B,EAAC,UAAAC,KAAA,EAAwB;IAAA,IAArBC,cAAc,GAAAD,KAAA,CAAdC,cAAc;IAC3D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,IAAMC,IAAI,GAAG,IAAAC,gCAAe,EAACF,cAAc,CAAC;IAC5C,OAAO,IAAAG,8BAAgB,EAACF,IAAI,CAAC,GAAGA,IAAI,CAACG,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,IAAMC,iBAAiB,GAAG,IAAAC,kBAAW,EACjC,UAACC,UAAkB,EAAEC,cAAkC,EAAK;IACxDb,MAAM,CAACc,eAAe,CAAmCC,oCAAsB,EAAE;MAC7EN,KAAK,EAAEG,UAAU;MACjBC,cAAc,EAAdA;IACJ,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,IAAMG,OAAO,GAAG,IAAAC,cAAO,EACnB;IAAA,OAAO;MACHC,KAAK,EAAEjB,SAAS;MAChBkB,UAAU,EAAET;IAChB,CAAC;EAAA,CAAC,EACF,CAACA,iBAAiB,EAAET,SAAS,CACjC,CAAC;EAED,oBACI5B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,uBAAA,CAAA2C,sBAAsB,CAACC,QAAQ;IAACH,KAAK,EAAEF;EAAQ,gBAC5C3C,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDe,eAAe,CAACyB,WAAW,GAAGlC,qBAAqB","ignoreList":[]}

package/components/ToolbarActions/FontSizeAction.d.ts

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

package/components/ToolbarActions/FontSizeAction.js

@@ -9,12 +9,12 @@ 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 _useCurrentSelection = require("../../hooks/useCurrentSelection");
+var _hooks = require("../../hooks");
 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) {
@@ -53,10 +53,9 @@ function FontSizeDropDown(props) {
   }));
 }
 var defaultSize = "15px";
-var FontSizeAction = function FontSizeAction() {
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+var FontSizeAction = exports.FontSizeAction = function FontSizeAction() {
+  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
   var _useState = (0, _react.useState)(function () {
       return editor.isEditable();
     }),
@@ -85,6 +84,5 @@ var FontSizeAction = function FontSizeAction() {
     editor: editor
   }));
 };
-exports.FontSizeAction = FontSizeAction;
 
 //# sourceMappingURL=FontSizeAction.js.map

package/components/ToolbarActions/FontSizeAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","FONT_SIZE_OPTIONS","dropDownActiveClass","active","FontSizeDropDown","props","editor","value","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","default","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","map","DropDownItem","className","concat","onClick","key","defaultSize","FontSizeAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","_useState","useState","isEditable","_useState2","setIsEditable","fontSize","useDeriveValueFromSelection","_ref","rangeSelection","$getSelectionStyleValueForProperty","_unused","useEffect","mergeRegister","registerEditableListener","editable","Fragment","exports"],"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 { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\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\nconst defaultSize = \"15px\";\n\nexport const FontSizeAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n    const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return defaultSize;\n        }\n        try {\n            return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\", \"15px\");\n        } catch {\n            return defaultSize;\n        }\n    });\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            })\n        );\n    }, [editor]);\n\n    return (\n        <>\n            <FontSizeDropDown disabled={!isEditable} value={fontSize} editor={editor} />\n        </>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","_hooks","FONT_SIZE_OPTIONS","dropDownActiveClass","active","FontSizeDropDown","props","editor","value","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","default","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","map","DropDownItem","className","concat","onClick","key","defaultSize","FontSizeAction","exports","_useRichTextEditor","useRichTextEditor","_useState","useState","isEditable","_useState2","_slicedToArray2","setIsEditable","fontSize","useDeriveValueFromSelection","_ref","rangeSelection","$getSelectionStyleValueForProperty","_unused","useEffect","mergeRegister","registerEditableListener","editable","Fragment"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\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\nconst defaultSize = \"15px\";\n\nexport const FontSizeAction = () => {\n    const { editor } = useRichTextEditor();\n    const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n    const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return defaultSize;\n        }\n        try {\n            return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\", \"15px\");\n        } catch {\n            return defaultSize;\n        }\n    });\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerEditableListener(editable => {\n                setIsEditable(editable);\n            })\n        );\n    }, [editor]);\n\n    return (\n        <>\n            <FontSizeDropDown disabled={!isEditable} value={fontSize} editor={editor} />\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/ToolbarActions/ImageAction.d.ts

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

package/components/ToolbarActions/ImageAction.js

@@ -8,15 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.ImageAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
 var _files = require("../../utils/files");
 var _commands = require("../../commands");
-var ImageAction = function ImageAction() {
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+var ImageAction = exports.ImageAction = function ImageAction() {
   var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor,
     toolbarActionPlugins = _useRichTextEditor.toolbarActionPlugins;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -51,6 +48,5 @@ var ImageAction = function ImageAction() {
     className: "icon insert-image"
   }));
 };
-exports.ImageAction = ImageAction;
 
 //# sourceMappingURL=ImageAction.js.map

package/components/ToolbarActions/ImageAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_useRichTextEditor2","_files","_commands","ImageAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useRichTextEditor","useRichTextEditor","toolbarActionPlugins","_useState","useState","_useState2","imageActionPlugin","setImageActionPlugin","useEffect","length","actionPlugin","find","action","targetAction","handleClick","plugin","cb","data","imagePayload","fileToImagePayload","dispatchCommand","INSERT_IMAGE_COMMAND","createElement","onClick","className","exports"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { FileManagerFileItem, fileToImagePayload } from \"~/utils/files\";\nimport { ImagePayload, INSERT_IMAGE_COMMAND } from \"~/commands\";\nimport { ToolbarActionPlugin } from \"~/types\";\n\nexport const ImageAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { toolbarActionPlugins } = useRichTextEditor();\n    const [imageActionPlugin, setImageActionPlugin] = useState<ToolbarActionPlugin | undefined>();\n\n    useEffect(() => {\n        if (!!toolbarActionPlugins?.length) {\n            const actionPlugin = toolbarActionPlugins.find(\n                action => action.targetAction === \"image-action\"\n            );\n            setImageActionPlugin(actionPlugin);\n        }\n    }, [toolbarActionPlugins]);\n\n    const handleClick = () => {\n        if (typeof imageActionPlugin?.plugin === \"function\") {\n            const cb = (data: FileManagerFileItem) => {\n                const imagePayload = fileToImagePayload(data);\n                if (imagePayload) {\n                    editor.dispatchCommand<LexicalCommand<ImagePayload>>(\n                        INSERT_IMAGE_COMMAND,\n                        imagePayload\n                    );\n                }\n            };\n            imageActionPlugin.plugin(cb);\n        }\n    };\n\n    return (\n        <button onClick={() => handleClick()} className={\"popup-item\"} aria-label=\"Insert image\">\n            <i className=\"icon insert-image\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAGO,IAAMK,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,kBAAA,GAAiC,IAAAC,qCAAiB,EAAC,CAAC;IAA5CC,oBAAoB,GAAAF,kBAAA,CAApBE,oBAAoB;EAC5B,IAAAC,SAAA,GAAkD,IAAAC,eAAQ,EAAkC,CAAC;IAAAC,UAAA,OAAAR,eAAA,CAAAC,OAAA,EAAAK,SAAA;IAAtFG,iBAAiB,GAAAD,UAAA;IAAEE,oBAAoB,GAAAF,UAAA;EAE9C,IAAAG,gBAAS,EAAC,YAAM;IACZ,IAAI,CAAC,CAACN,oBAAoB,EAAEO,MAAM,EAAE;MAChC,IAAMC,YAAY,GAAGR,oBAAoB,CAACS,IAAI,CAC1C,UAAAC,MAAM;QAAA,OAAIA,MAAM,CAACC,YAAY,KAAK,cAAc;MAAA,CACpD,CAAC;MACDN,oBAAoB,CAACG,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACR,oBAAoB,CAAC,CAAC;EAE1B,IAAMY,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtB,IAAI,OAAOR,iBAAiB,EAAES,MAAM,KAAK,UAAU,EAAE;MACjD,IAAMC,EAAE,GAAG,SAALA,EAAEA,CAAIC,IAAyB,EAAK;QACtC,IAAMC,YAAY,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdnB,MAAM,CAACqB,eAAe,CAClBC,8BAAoB,EACpBH,YACJ,CAAC;QACL;MACJ,CAAC;MACDZ,iBAAiB,CAACS,MAAM,CAACC,EAAE,CAAC;IAChC;EACJ,CAAC;EAED,oBACI9B,MAAA,CAAAY,OAAA,CAAAwB,aAAA;IAAQC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMT,WAAW,CAAC,CAAC;IAAA,CAAC;IAACU,SAAS,EAAE,YAAa;IAAC,cAAW;EAAc,gBACpFtC,MAAA,CAAAY,OAAA,CAAAwB,aAAA;IAAGE,SAAS,EAAC;EAAmB,CAAE,CAC9B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAhC,WAAA,GAAAA,WAAA"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_useRichTextEditor2","_files","_commands","ImageAction","exports","_useRichTextEditor","useRichTextEditor","editor","toolbarActionPlugins","_useState","useState","_useState2","_slicedToArray2","default","imageActionPlugin","setImageActionPlugin","useEffect","length","actionPlugin","find","action","targetAction","handleClick","plugin","cb","data","imagePayload","fileToImagePayload","dispatchCommand","INSERT_IMAGE_COMMAND","createElement","onClick","className"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { FileManagerFileItem, fileToImagePayload } from \"~/utils/files\";\nimport { ImagePayload, INSERT_IMAGE_COMMAND } from \"~/commands\";\nimport { ToolbarActionPlugin } from \"~/types\";\n\nexport const ImageAction = () => {\n    const { editor, toolbarActionPlugins } = useRichTextEditor();\n    const [imageActionPlugin, setImageActionPlugin] = useState<ToolbarActionPlugin | undefined>();\n\n    useEffect(() => {\n        if (!!toolbarActionPlugins?.length) {\n            const actionPlugin = toolbarActionPlugins.find(\n                action => action.targetAction === \"image-action\"\n            );\n            setImageActionPlugin(actionPlugin);\n        }\n    }, [toolbarActionPlugins]);\n\n    const handleClick = () => {\n        if (typeof imageActionPlugin?.plugin === \"function\") {\n            const cb = (data: FileManagerFileItem) => {\n                const imagePayload = fileToImagePayload(data);\n                if (imagePayload) {\n                    editor.dispatchCommand<LexicalCommand<ImagePayload>>(\n                        INSERT_IMAGE_COMMAND,\n                        imagePayload\n                    );\n                }\n            };\n            imageActionPlugin.plugin(cb);\n        }\n    };\n\n    return (\n        <button onClick={() => handleClick()} className={\"popup-item\"} aria-label=\"Insert image\">\n            <i className=\"icon insert-image\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAGO,IAAMI,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAA,EAAS;EAC7B,IAAAE,kBAAA,GAAyC,IAAAC,qCAAiB,EAAC,CAAC;IAApDC,MAAM,GAAAF,kBAAA,CAANE,MAAM;IAAEC,oBAAoB,GAAAH,kBAAA,CAApBG,oBAAoB;EACpC,IAAAC,SAAA,GAAkD,IAAAC,eAAQ,EAAkC,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,SAAA;IAAtFK,iBAAiB,GAAAH,UAAA;IAAEI,oBAAoB,GAAAJ,UAAA;EAE9C,IAAAK,gBAAS,EAAC,YAAM;IACZ,IAAI,CAAC,CAACR,oBAAoB,EAAES,MAAM,EAAE;MAChC,IAAMC,YAAY,GAAGV,oBAAoB,CAACW,IAAI,CAC1C,UAAAC,MAAM;QAAA,OAAIA,MAAM,CAACC,YAAY,KAAK,cAAc;MAAA,CACpD,CAAC;MACDN,oBAAoB,CAACG,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACV,oBAAoB,CAAC,CAAC;EAE1B,IAAMc,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtB,IAAI,OAAOR,iBAAiB,EAAES,MAAM,KAAK,UAAU,EAAE;MACjD,IAAMC,EAAE,GAAG,SAALA,EAAEA,CAAIC,IAAyB,EAAK;QACtC,IAAMC,YAAY,GAAG,IAAAC,yBAAkB,EAACF,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdnB,MAAM,CAACqB,eAAe,CAClBC,8BAAoB,EACpBH,YACJ,CAAC;QACL;MACJ,CAAC;MACDZ,iBAAiB,CAACS,MAAM,CAACC,EAAE,CAAC;IAChC;EACJ,CAAC;EAED,oBACI3B,MAAA,CAAAgB,OAAA,CAAAiB,aAAA;IAAQC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMT,WAAW,CAAC,CAAC;IAAA,CAAC;IAACU,SAAS,EAAE,YAAa;IAAC,cAAW;EAAc,gBACpFnC,MAAA,CAAAgB,OAAA,CAAAiB,aAAA;IAAGE,SAAS,EAAC;EAAmB,CAAE,CAC9B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/ItalicAction.d.ts

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

package/components/ToolbarActions/ItalicAction.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ItalicAction = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var _lexical = require("lexical");
 var _useCurrentSelection2 = require("../../hooks/useCurrentSelection");
-var ItalicAction = function ItalicAction() {
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+var _hooks = require("../../hooks");
+var ItalicAction = exports.ItalicAction = function ItalicAction() {
+  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
   var _useCurrentSelection = (0, _useCurrentSelection2.useCurrentSelection)(),
     rangeSelection = _useCurrentSelection.rangeSelection;
   var isItalicSelected = rangeSelection ? rangeSelection.hasFormat("italic") : false;
@@ -28,6 +26,5 @@ var ItalicAction = function ItalicAction() {
     className: "format italic"
   }));
 };
-exports.ItalicAction = ItalicAction;
 
 //# sourceMappingURL=ItalicAction.js.map

package/components/ToolbarActions/ItalicAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalComposerContext","_lexical","_useCurrentSelection2","ItalicAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isItalicSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\n\nexport const ItalicAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const { rangeSelection } = useCurrentSelection();\n    const isItalicSelected = rangeSelection ? rangeSelection.hasFormat(\"italic\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isItalicSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AAEO,IAAMI,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAC9B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,gBAAgB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,QAAQ,CAAC,GAAG,KAAK;EAEpF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;EACzD,CAAC;EAED,oBACIpB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAEJ,WAAY;IACrBK,SAAS,EAAE,oBAAoB,IAAIP,gBAAgB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrE,cAAW;EAAuB,gBAElChB,MAAA,CAAAW,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAe,CAAE,CAC1B,CAAC;AAEjB,CAAC;AAACC,OAAA,CAAAlB,YAAA,GAAAA,YAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_useCurrentSelection2","_hooks","ItalicAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isItalicSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","default","createElement","onClick","className"],"sources":["ItalicAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const ItalicAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isItalicSelected = rangeSelection ? rangeSelection.hasFormat(\"italic\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"italic\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isItalicSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as italic\"\n        >\n            <i className=\"format italic\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,IAAMI,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAC9B,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,gBAAgB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,QAAQ,CAAC,GAAG,KAAK;EAEpF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,QAAQ,CAAC;EACzD,CAAC;EAED,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEL,WAAY;IACrBM,SAAS,EAAE,oBAAoB,IAAIR,gBAAgB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrE,cAAW;EAAuB,gBAElCd,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAe,CAAE,CAC1B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/LinkAction.d.ts

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