@webiny/lexical-editor 0.0.0-unstable.06b2ede40f

package/components/Toolbar/Toolbar.js

@@ -0,0 +1,148 @@
+import React, { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { $getSelection, BLUR_COMMAND, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from "lexical";
+import { createPortal } from "react-dom";
+import { mergeRegister } from "@lexical/utils";
+import "./Toolbar.css";
+import { getDOMRangeRect } from "../../utils/getDOMRangeRect";
+import { setFloatingElemPosition } from "../../utils/setFloatingElemPosition";
+import { useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+import { isChildOfFloatingToolbar } from "../../utils/isChildOfFloatingToolbar";
+import { HIDE_FLOATING_TOOLBAR } from "../../commands";
+const FloatingToolbar = ({
+  anchorElem,
+  editor
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const popupCharStylesEditorRef = useRef(null);
+  const {
+    toolbarElements
+  } = useLexicalEditorConfig();
+  const mouseMoveListener = useCallback(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?.current && (e.buttons === 1 || e.buttons === 3)) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
+        const x = e.clientX;
+        const y = e.clientY;
+        const 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]);
+  const mouseUpListener = useCallback(() => {
+    if (popupCharStylesEditorRef?.current) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
+        popupCharStylesEditorRef.current.style.pointerEvents = "auto";
+      }
+    }
+  }, [popupCharStylesEditorRef]);
+  useEffect(() => {
+    if (popupCharStylesEditorRef?.current) {
+      document.addEventListener("mousemove", mouseMoveListener);
+      document.addEventListener("mouseup", mouseUpListener);
+      return () => {
+        document.removeEventListener("mousemove", mouseMoveListener);
+        document.removeEventListener("mouseup", mouseUpListener);
+      };
+    }
+    return;
+  }, [popupCharStylesEditorRef]);
+  const updateTextFormatFloatingToolbar = useCallback(() => {
+    const selection = $getSelection();
+    const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+    const nativeSelection = window.getSelection();
+    if (popupCharStylesEditorElem === null) {
+      return;
+    }
+    const rootElement = editor.getRootElement();
+    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
+      const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
+    }
+  }, [editor, anchorElem]);
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement;
+    const update = () => {
+      editor.getEditorState().read(() => {
+        updateTextFormatFloatingToolbar();
+      });
+    };
+    window.addEventListener("resize", update);
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update);
+    }
+    return () => {
+      window.removeEventListener("resize", update);
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update);
+      }
+    };
+  }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateTextFormatFloatingToolbar();
+    });
+    return mergeRegister(editor.registerUpdateListener(({
+      editorState
+    }) => {
+      editorState.read(() => {
+        updateTextFormatFloatingToolbar();
+      });
+    }), editor.registerCommand(HIDE_FLOATING_TOOLBAR, () => {
+      setTimeout(() => {
+        setIsVisible(false);
+      }, 10);
+      return true;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+      setIsVisible(true);
+      updateTextFormatFloatingToolbar();
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(BLUR_COMMAND, payload => {
+      if (!isChildOfFloatingToolbar(payload.relatedTarget)) {
+        setIsVisible(false);
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW));
+  }, [editor, updateTextFormatFloatingToolbar]);
+  if (!isVisible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: popupCharStylesEditorRef,
+    className: "floating-toolbar"
+  }, editor.isEditable() && /*#__PURE__*/React.createElement(React.Fragment, null, toolbarElements.map(action => /*#__PURE__*/React.createElement(Fragment, {
+    key: action.name
+  }, action.element))));
+};
+export const Toolbar = ({
+  anchorElem = document.body
+}) => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const showToolbar = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
+    if (!rangeSelection) {
+      return false;
+    }
+    return !rangeSelection.isCollapsed();
+  });
+  if (!showToolbar) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(FloatingToolbar, {
+    anchorElem: anchorElem,
+    editor: editor
+  }), anchorElem);
+};
+
+//# sourceMappingURL=Toolbar.js.map

package/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","useCallback","useEffect","useRef","useState","$getSelection","BLUR_COMMAND","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","createPortal","mergeRegister","getDOMRangeRect","setFloatingElemPosition","useLexicalEditorConfig","useDeriveValueFromSelection","useRichTextEditor","isChildOfFloatingToolbar","HIDE_FLOATING_TOOLBAR","FloatingToolbar","anchorElem","editor","isVisible","setIsVisible","popupCharStylesEditorRef","toolbarElements","mouseMoveListener","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","setTimeout","payload","relatedTarget","createElement","ref","className","isEditable","map","action","key","name","element","Toolbar","body","showToolbar","rangeSelection"],"sources":["Toolbar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, { Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport {\n    $getSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\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 { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\nimport { HIDE_FLOATING_TOOLBAR } from \"~/commands\";\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                HIDE_FLOATING_TOOLBAR,\n                () => {\n                    setTimeout(() => {\n                        setIsVisible(false);\n                    }, 10);\n                    return true;\n                },\n                COMMAND_PRIORITY_LOW\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\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 !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

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

package/components/ToolbarActions/BoldAction.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { useCurrentSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+export const BoldAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    rangeSelection
+  } = useCurrentSelection();
+  const isBoldSelected = rangeSelection ? rangeSelection.hasFormat("bold") : false;
+  const handleClick = () => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: handleClick,
+    className: "popup-item spaced " + (isBoldSelected ? "active" : ""),
+    "aria-label": "Format text as bold"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "format bold"
+  }));
+};
+
+//# sourceMappingURL=BoldAction.js.map

package/components/ToolbarActions/BoldAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","BoldAction","editor","rangeSelection","isBoldSelected","hasFormat","handleClick","dispatchCommand","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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/BulletListAction.d.ts

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

package/components/ToolbarActions/BulletListAction.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../commands";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor";
+import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { $isListNode } from "@webiny/lexical-nodes";
+import { useCurrentElement } from "../../hooks/useCurrentElement";
+export const BulletListAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    element
+  } = useCurrentElement();
+  const {
+    themeEmotionMap
+  } = useRichTextEditor();
+  const isList = $isListNode(element);
+  const isBullet = isList && element.getListType() === "bullet";
+  const formatBulletList = () => {
+    if (!isBullet) {
+      const styleId = themeEmotionMap ? findTypographyStyleByHtmlTag("ul", themeEmotionMap)?.id : undefined;
+
+      // will update the active state in the useEffect
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, {
+        themeStyleId: styleId
+      });
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: () => formatBulletList(),
+    className: "popup-item spaced " + (isBullet ? "active" : ""),
+    "aria-label": "Format text as bullet list"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon bullet-list"
+  }));
+};
+
+//# sourceMappingURL=BulletListAction.js.map

package/components/ToolbarActions/BulletListAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","INSERT_UNORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","findTypographyStyleByHtmlTag","$isListNode","useCurrentElement","BulletListAction","editor","element","themeEmotionMap","isList","isBullet","getListType","formatBulletList","styleId","id","undefined","dispatchCommand","themeStyleId","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 type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } 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\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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,6BAA6B,EAAEC,mBAAmB;AAC3D,SAASC,iBAAiB;AAC1B,SAASC,4BAA4B,QAAQ,uBAAuB;AAEpE,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEM;EAAQ,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEI;EAAgB,CAAC,GAAGP,iBAAiB,CAAC,CAAC;EAC/C,MAAMQ,MAAM,GAAGN,WAAW,CAACI,OAAO,CAAC;EAEnC,MAAMG,QAAQ,GAAGD,MAAM,IAAKF,OAAO,CAAcI,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,MAAMG,OAAO,GAAGL,eAAe,GACzBN,4BAA4B,CAAC,IAAI,EAAEM,eAAe,CAAC,EAAEM,EAAE,GACvDC,SAAS;;MAEf;MACAT,MAAM,CAACU,eAAe,CAACjB,6BAA6B,EAAE;QAAEkB,YAAY,EAAEJ;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHP,MAAM,CAACU,eAAe,CAAChB,mBAAmB,EAAEe,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACIjB,KAAA,CAAAoB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAMP,gBAAgB,CAAC,CAAE;IAClCQ,SAAS,EAAE,oBAAoB,IAAIV,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCZ,KAAA,CAAAoB,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/CodeHighlightAction.d.ts

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

package/components/ToolbarActions/CodeHighlightAction.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { useCurrentSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+export const CodeHighlightAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    rangeSelection
+  } = useCurrentSelection();
+  const isCodeSelected = rangeSelection ? rangeSelection.hasFormat("code") : false;
+  const handleClick = () => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: handleClick,
+    className: "popup-item spaced " + (isCodeSelected ? "active" : ""),
+    "aria-label": "Text code highlight"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "format code"
+  }));
+};
+
+//# sourceMappingURL=CodeHighlightAction.js.map

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","CodeHighlightAction","editor","rangeSelection","isCodeSelected","hasFormat","handleClick","dispatchCommand","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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACrC,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/FontColorAction.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export declare const FontColorPicker: (() => JSX.Element | null) & {
+    original: () => JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface FontActionColorPicker {
+    element: JSX.Element;
+}
+declare const FontActionColorPicker: ({ element }: FontActionColorPicker) => JSX.Element;
+export type FontColorAction = React.ComponentType<unknown> & {
+    ColorPicker: typeof FontActionColorPicker;
+};
+export declare const FontColorAction: FontColorAction;
+export {};

package/components/ToolbarActions/FontColorAction.js

@@ -0,0 +1,50 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import { Compose, makeDecoratable } from "@webiny/react-composition";
+import { FontColorActionContext } from "../../context/FontColorActionContext";
+import { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from "@webiny/lexical-nodes";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+export const FontColorPicker = makeDecoratable("FontColorPicker", () => {
+  useEffect(() => {
+    console.log("Default FontColorPicker, please add your own component");
+  }, []);
+  return null;
+});
+const FontActionColorPicker = ({
+  element
+}) => {
+  return /*#__PURE__*/React.createElement(Compose, {
+    component: FontColorPicker,
+    with: () => () => element
+  });
+};
+export const FontColorAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const fontColor = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
+    if (!rangeSelection) {
+      return "#000";
+    }
+    const node = getSelectedNode(rangeSelection);
+    return $isFontColorNode(node) ? node.getColorStyle().color : "#000";
+  });
+  const onFontColorSelect = useCallback((colorValue, themeColorName) => {
+    editor.dispatchCommand(ADD_FONT_COLOR_COMMAND, {
+      color: new ThemeColorValue(colorValue, themeColorName)
+    });
+  }, []);
+  const context = useMemo(() => ({
+    value: fontColor,
+    applyColor: onFontColorSelect
+  }), [onFontColorSelect, fontColor]);
+  return /*#__PURE__*/React.createElement(FontColorActionContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(FontColorPicker, null));
+};
+FontColorAction.ColorPicker = FontActionColorPicker;
+
+//# sourceMappingURL=FontColorAction.js.map

package/components/ToolbarActions/FontColorAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useMemo","Compose","makeDecoratable","FontColorActionContext","$isFontColorNode","ADD_FONT_COLOR_COMMAND","ThemeColorValue","getSelectedNode","useDeriveValueFromSelection","useRichTextEditor","FontColorPicker","console","log","FontActionColorPicker","element","createElement","component","with","FontColorAction","editor","fontColor","rangeSelection","node","getColorStyle","color","onFontColorSelect","colorValue","themeColorName","dispatchCommand","context","value","applyColor","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport type { FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } 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: new ThemeColorValue(colorValue, 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,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAE9D,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,sBAAsB;AAE/B,SAASC,gBAAgB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,uBAAuB;AACjG,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,eAAe,GAAGR,eAAe,CAAC,iBAAiB,EAAE,MAA0B;EACxFH,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAkB;EAC/E,oBAAOjB,KAAA,CAAAkB,aAAA,CAACd,OAAO;IAACe,SAAS,EAAEN,eAAgB;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AAC7E,CAAC;AAMD,OAAO,MAAMI,eAAgC,GAAGA,CAAA,KAAM;EAClD,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,SAAS,GAAGZ,2BAA2B,CAAC,CAAC;IAAEa;EAAe,CAAC,KAAK;IAClE,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,MAAMC,IAAI,GAAGf,eAAe,CAACc,cAAc,CAAC;IAC5C,OAAOjB,gBAAgB,CAACkB,IAAI,CAAC,GAAGA,IAAI,CAACC,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,MAAMC,iBAAiB,GAAG3B,WAAW,CACjC,CAAC4B,UAAkB,EAAEC,cAAkC,KAAK;IACxDR,MAAM,CAACS,eAAe,CAAmCvB,sBAAsB,EAAE;MAC7EmB,KAAK,EAAE,IAAIlB,eAAe,CAACoB,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,MAAME,OAAO,GAAG7B,OAAO,CACnB,OAAO;IACH8B,KAAK,EAAEV,SAAS;IAChBW,UAAU,EAAEN;EAChB,CAAC,CAAC,EACF,CAACA,iBAAiB,EAAEL,SAAS,CACjC,CAAC;EAED,oBACIvB,KAAA,CAAAkB,aAAA,CAACZ,sBAAsB,CAAC6B,QAAQ;IAACF,KAAK,EAAED;EAAQ,gBAC5ChC,KAAA,CAAAkB,aAAA,CAACL,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDQ,eAAe,CAACe,WAAW,GAAGpB,qBAAqB","ignoreList":[]}

package/components/ToolbarActions/FontSizeAction.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface FontSize {
+    id: string;
+    name: string;
+    value: string;
+}
+export declare const FONT_SIZES_FALLBACK: FontSize[];
+interface FontSizeActionProps {
+    fontSizes?: FontSize[];
+}
+export declare const FontSizeAction: (({ fontSizes }: FontSizeActionProps) => React.JSX.Element) & {
+    FONT_SIZES_FALLBACK: FontSize[];
+};
+export {};

package/components/ToolbarActions/FontSizeAction.js

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { $getSelectionStyleValueForProperty, $patchStyleText } from "@lexical/selection";
+import { mergeRegister } from "@lexical/utils";
+import { $getSelection, $isRangeSelection } from "lexical";
+import { DropDown, DropDownItem } from "../../ui/DropDown";
+import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+export const FONT_SIZES_FALLBACK = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"].map(size => ({
+  id: size,
+  name: size,
+  value: size,
+  default: size === "15px"
+}));
+const emptyOption = {
+  value: "",
+  name: "Font Size",
+  id: "empty"
+};
+function dropDownActiveClass(active) {
+  if (active) {
+    return "active dropdown-item-active";
+  }
+  return "";
+}
+function FontSizeDropDown(props) {
+  const {
+    editor,
+    value,
+    fontSizes,
+    disabled = false
+  } = props;
+  const handleClick = useCallback(option => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $patchStyleText(selection, {
+          ["font-size"]: option.value
+        });
+      }
+    });
+  }, [editor]);
+  const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;
+  return /*#__PURE__*/React.createElement(DropDown, {
+    disabled: disabled,
+    buttonClassName: "toolbar-item font-size",
+    buttonLabel: selectedOption.name,
+    buttonAriaLabel: "Formatting options for font size"
+  }, fontSizes.map(option => /*#__PURE__*/React.createElement(DropDownItem, {
+    className: `item fontsize-item ${dropDownActiveClass(value === option.id)}`,
+    onClick: () => handleClick(option),
+    key: option.id
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, option.name))));
+}
+const FontSize = ({
+  fontSizes = FONT_SIZES_FALLBACK
+}) => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+  const fontSize = useDeriveValueFromSelection(({
+    rangeSelection
+  }) => {
+    if (!rangeSelection) {
+      return undefined;
+    }
+    try {
+      return $getSelectionStyleValueForProperty(rangeSelection, "font-size");
+    } catch {
+      return undefined;
+    }
+  });
+  useEffect(() => {
+    return mergeRegister(editor.registerEditableListener(editable => {
+      setIsEditable(editable);
+    }));
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontSizeDropDown, {
+    disabled: !isEditable,
+    value: fontSize,
+    editor: editor,
+    fontSizes: fontSizes
+  }));
+};
+export const FontSizeAction = Object.assign(FontSize, {
+  FONT_SIZES_FALLBACK
+});
+
+//# sourceMappingURL=FontSizeAction.js.map

package/components/ToolbarActions/FontSizeAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useState","$getSelectionStyleValueForProperty","$patchStyleText","mergeRegister","$getSelection","$isRangeSelection","DropDown","DropDownItem","useDeriveValueFromSelection","useRichTextEditor","FONT_SIZES_FALLBACK","map","size","id","name","value","default","emptyOption","dropDownActiveClass","active","FontSizeDropDown","props","editor","fontSizes","disabled","handleClick","option","update","selection","selectedOption","find","opt","createElement","buttonClassName","buttonLabel","buttonAriaLabel","className","onClick","key","FontSize","isEditable","setIsEditable","fontSize","rangeSelection","undefined","registerEditableListener","editable","Fragment","FontSizeAction","Object","assign"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport type { LexicalEditor } from \"lexical\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport interface FontSize {\n    id: string;\n    name: string;\n    value: string;\n}\n\nexport const FONT_SIZES_FALLBACK: FontSize[] = [\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].map(size => ({\n    id: size,\n    name: size,\n    value: size,\n    default: size === \"15px\"\n}));\n\nconst emptyOption: FontSize = {\n    value: \"\",\n    name: \"Font Size\",\n    id: \"empty\"\n};\n\nfunction dropDownActiveClass(active: boolean) {\n    if (active) {\n        return \"active dropdown-item-active\";\n    }\n    return \"\";\n}\n\ninterface FontSizeDropDownProps {\n    fontSizes: FontSize[];\n    editor: LexicalEditor;\n    value: string | undefined;\n    disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n    const { editor, value, fontSizes, disabled = false } = props;\n\n    const handleClick = useCallback(\n        (option: FontSize) => {\n            editor.update(() => {\n                const selection = $getSelection();\n                if ($isRangeSelection(selection)) {\n                    $patchStyleText(selection, {\n                        [\"font-size\"]: option.value\n                    });\n                }\n            });\n        },\n        [editor]\n    );\n\n    const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;\n\n    return (\n        <DropDown\n            disabled={disabled}\n            buttonClassName=\"toolbar-item font-size\"\n            buttonLabel={selectedOption.name}\n            buttonAriaLabel={\"Formatting options for font size\"}\n        >\n            {fontSizes.map(option => (\n                <DropDownItem\n                    className={`item fontsize-item ${dropDownActiveClass(value === option.id)}`}\n                    onClick={() => handleClick(option)}\n                    key={option.id}\n                >\n                    <span className=\"text\">{option.name}</span>\n                </DropDownItem>\n            ))}\n        </DropDown>\n    );\n}\n\ninterface FontSizeActionProps {\n    fontSizes?: FontSize[];\n}\n\nconst FontSize = ({ fontSizes = FONT_SIZES_FALLBACK }: FontSizeActionProps) => {\n    const { editor } = useRichTextEditor();\n    const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n    const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return undefined;\n        }\n        try {\n            return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\");\n        } catch {\n            return undefined;\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\n                disabled={!isEditable}\n                value={fontSize}\n                editor={editor}\n                fontSizes={fontSizes}\n            />\n        </>\n    );\n};\n\nexport const FontSizeAction = Object.assign(FontSize, { FONT_SIZES_FALLBACK });\n"],"mappings":"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","ignoreList":[]}

package/components/ToolbarActions/ImageAction.d.ts

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

package/components/ToolbarActions/ImageAction.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor";
+import { fileToImagePayload } from "../../utils/files";
+import { INSERT_IMAGE_COMMAND } from "../../commands";
+export const ImageAction = () => {
+  const {
+    editor,
+    toolbarActionPlugins
+  } = useRichTextEditor();
+  const [imageActionPlugin, setImageActionPlugin] = useState();
+  useEffect(() => {
+    if (!!toolbarActionPlugins?.length) {
+      const actionPlugin = toolbarActionPlugins.find(action => action.targetAction === "image-action");
+      setImageActionPlugin(actionPlugin);
+    }
+  }, [toolbarActionPlugins]);
+  const handleClick = () => {
+    if (typeof imageActionPlugin?.plugin === "function") {
+      const cb = data => {
+        const imagePayload = fileToImagePayload(data);
+        if (imagePayload) {
+          editor.dispatchCommand(INSERT_IMAGE_COMMAND, imagePayload);
+        }
+      };
+      imageActionPlugin.plugin(cb);
+    }
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: () => handleClick(),
+    className: "popup-item",
+    "aria-label": "Insert image"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "icon insert-image"
+  }));
+};
+
+//# sourceMappingURL=ImageAction.js.map

package/components/ToolbarActions/ImageAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","useRichTextEditor","fileToImagePayload","INSERT_IMAGE_COMMAND","ImageAction","editor","toolbarActionPlugins","imageActionPlugin","setImageActionPlugin","length","actionPlugin","find","action","targetAction","handleClick","plugin","cb","data","imagePayload","dispatchCommand","createElement","onClick","className"],"sources":["ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport type { FileManagerFileItem } from \"~/utils/files\";\nimport { fileToImagePayload } from \"~/utils/files\";\nimport type { ImagePayload } from \"~/commands\";\nimport { INSERT_IMAGE_COMMAND } from \"~/commands\";\nimport type { 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,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAElD,SAASC,iBAAiB;AAE1B,SAASC,kBAAkB;AAE3B,SAASC,oBAAoB;AAG7B,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC,MAAM;IAAEC;EAAqB,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAC5D,MAAM,CAACM,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGR,QAAQ,CAAkC,CAAC;EAE7FD,SAAS,CAAC,MAAM;IACZ,IAAI,CAAC,CAACO,oBAAoB,EAAEG,MAAM,EAAE;MAChC,MAAMC,YAAY,GAAGJ,oBAAoB,CAACK,IAAI,CAC1CC,MAAM,IAAIA,MAAM,CAACC,YAAY,KAAK,cACtC,CAAC;MACDL,oBAAoB,CAACE,YAAY,CAAC;IACtC;EACJ,CAAC,EAAE,CAACJ,oBAAoB,CAAC,CAAC;EAE1B,MAAMQ,WAAW,GAAGA,CAAA,KAAM;IACtB,IAAI,OAAOP,iBAAiB,EAAEQ,MAAM,KAAK,UAAU,EAAE;MACjD,MAAMC,EAAE,GAAIC,IAAyB,IAAK;QACtC,MAAMC,YAAY,GAAGhB,kBAAkB,CAACe,IAAI,CAAC;QAC7C,IAAIC,YAAY,EAAE;UACdb,MAAM,CAACc,eAAe,CAClBhB,oBAAoB,EACpBe,YACJ,CAAC;QACL;MACJ,CAAC;MACDX,iBAAiB,CAACQ,MAAM,CAACC,EAAE,CAAC;IAChC;EACJ,CAAC;EAED,oBACIlB,KAAA,CAAAsB,aAAA;IAAQC,OAAO,EAAEA,CAAA,KAAMP,WAAW,CAAC,CAAE;IAACQ,SAAS,EAAE,YAAa;IAAC,cAAW;EAAc,gBACpFxB,KAAA,CAAAsB,aAAA;IAAGE,SAAS,EAAC;EAAmB,CAAE,CAC9B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/ItalicAction.d.ts

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

package/components/ToolbarActions/ItalicAction.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { useCurrentSelection } from "../../hooks/useCurrentSelection";
+import { useRichTextEditor } from "../../hooks";
+export const ItalicAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    rangeSelection
+  } = useCurrentSelection();
+  const isItalicSelected = rangeSelection ? rangeSelection.hasFormat("italic") : false;
+  const handleClick = () => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+  };
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: handleClick,
+    className: "popup-item spaced " + (isItalicSelected ? "active" : ""),
+    "aria-label": "Format text as italic"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "format italic"
+  }));
+};
+
+//# sourceMappingURL=ItalicAction.js.map

package/components/ToolbarActions/ItalicAction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","ItalicAction","editor","rangeSelection","isItalicSelected","hasFormat","handleClick","dispatchCommand","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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,gBAAgB,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,QAAQ,CAAC,GAAG,KAAK;EAEpF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,QAAQ,CAAC;EACzD,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,gBAAgB,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrE,cAAW;EAAuB,gBAElCP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAe,CAAE,CAC1B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/LinkAction.d.ts

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