@webiny/lexical-editor 6.3.0 → 6.4.0-beta.0

package/components/ToolbarActions/FontColorAction.js.map

@@ -1 +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.js\";\nimport type { FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): React.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: React.JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): React.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,MAAgC;EAC9FH,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,KAAwB;EACrF,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":[]}
+{"version":3,"file":"components/ToolbarActions/FontColorAction.js","sources":["../../../src/components/ToolbarActions/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.js\";\nimport type { FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): React.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: React.JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): React.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"],"names":["FontColorPicker","makeDecoratable","useEffect","console","FontActionColorPicker","element","Compose","FontColorAction","editor","useRichTextEditor","fontColor","useDeriveValueFromSelection","rangeSelection","node","getSelectedNode","$isFontColorNode","onFontColorSelect","useCallback","colorValue","themeColorName","ADD_FONT_COLOR_COMMAND","ThemeColorValue","context","useMemo","FontColorActionContext"],"mappings":";;;;;;;AAUO,MAAMA,kBAAkBC,gBAAgB,mBAAmB;IAC9DC,UAAU;QACNC,QAAQ,GAAG,CAAC;IAChB,GAAG,EAAE;IACL,OAAO;AACX;AAMA,MAAMC,wBAAwB,CAAC,EAAEC,OAAO,EAAyB,GACtD,WAAP,GAAO,oBAACC,SAAOA;QAAC,WAAWN;QAAiB,MAAM,IAAM,IAAMK;;AAO3D,MAAME,kBAAmC;IAC5C,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAMC,YAAYC,4BAA4B,CAAC,EAAEC,cAAc,EAAE;QAC7D,IAAI,CAACA,gBACD,OAAO;QAGX,MAAMC,OAAOC,gBAAgBF;QAC7B,OAAOG,iBAAiBF,QAAQA,KAAK,aAAa,GAAG,KAAK,GAAG;IACjE;IAEA,MAAMG,oBAAoBC,YACtB,CAACC,YAAoBC;QACjBX,OAAO,eAAe,CAAmCY,wBAAwB;YAC7E,OAAO,IAAIC,gBAAgBH,YAAYC;QAC3C;IACJ,GACA,EAAE;IAGN,MAAMG,UAAUC,QACZ,IAAO;YACH,OAAOb;YACP,YAAYM;QAChB,IACA;QAACA;QAAmBN;KAAU;IAGlC,OAAO,WAAP,GACI,oBAACc,uBAAuB,QAAQ;QAAC,OAAOF;qBACpC,oBAACtB,iBAAeA;AAG5B;AAEAO,gBAAgB,WAAW,GAAGH"}

package/components/ToolbarActions/ImageAction.js

@@ -1,37 +1,35 @@
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
 import { fileToImagePayload } from "../../utils/files.js";
 import { INSERT_IMAGE_COMMAND } from "../../commands/index.js";
-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);
+const ImageAction = ()=>{
+    const { editor, toolbarActionPlugins } = useRichTextEditor();
+    const [imageActionPlugin, setImageActionPlugin] = useState();
+    useEffect(()=>{
+        if (!!toolbarActionPlugins?.length) {
+            const actionPlugin = toolbarActionPlugins.find((action)=>"image-action" === action.targetAction);
+            setImageActionPlugin(actionPlugin);
         }
-      };
-      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"
-  }));
+    }, [
+        toolbarActionPlugins
+    ]);
+    const handleClick = ()=>{
+        if ("function" == typeof imageActionPlugin?.plugin) {
+            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"
+    }));
 };
+export { ImageAction };
 
 //# sourceMappingURL=ImageAction.js.map

package/components/ToolbarActions/ImageAction.js.map

@@ -1 +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.js\";\nimport type { FileManagerFileItem } from \"~/utils/files.js\";\nimport { fileToImagePayload } from \"~/utils/files.js\";\nimport type { ImagePayload } from \"~/commands/index.js\";\nimport { INSERT_IMAGE_COMMAND } from \"~/commands/index.js\";\nimport type { ToolbarActionPlugin } from \"~/types.js\";\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":[]}
+{"version":3,"file":"components/ToolbarActions/ImageAction.js","sources":["../../../src/components/ToolbarActions/ImageAction.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport type { FileManagerFileItem } from \"~/utils/files.js\";\nimport { fileToImagePayload } from \"~/utils/files.js\";\nimport type { ImagePayload } from \"~/commands/index.js\";\nimport { INSERT_IMAGE_COMMAND } from \"~/commands/index.js\";\nimport type { ToolbarActionPlugin } from \"~/types.js\";\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"],"names":["ImageAction","editor","toolbarActionPlugins","useRichTextEditor","imageActionPlugin","setImageActionPlugin","useState","useEffect","actionPlugin","action","handleClick","cb","data","imagePayload","fileToImagePayload","INSERT_IMAGE_COMMAND"],"mappings":";;;;AASO,MAAMA,cAAc;IACvB,MAAM,EAAEC,MAAM,EAAEC,oBAAoB,EAAE,GAAGC;IACzC,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC;IAElDC,UAAU;QACN,IAAI,CAAC,CAACL,sBAAsB,QAAQ;YAChC,MAAMM,eAAeN,qBAAqB,IAAI,CAC1CO,CAAAA,SAAUA,AAAwB,mBAAxBA,OAAO,YAAY;YAEjCJ,qBAAqBG;QACzB;IACJ,GAAG;QAACN;KAAqB;IAEzB,MAAMQ,cAAc;QAChB,IAAI,AAAqC,cAArC,OAAON,mBAAmB,QAAuB;YACjD,MAAMO,KAAK,CAACC;gBACR,MAAMC,eAAeC,mBAAmBF;gBACxC,IAAIC,cACAZ,OAAO,eAAe,CAClBc,sBACAF;YAGZ;YACAT,kBAAkB,MAAM,CAACO;QAC7B;IACJ;IAEA,OAAO,WAAP,GACI,oBAAC;QAAO,SAAS,IAAMD;QAAe,WAAW;QAAc,cAAW;qBACtE,oBAAC;QAAE,WAAU;;AAGzB"}

package/components/ToolbarActions/ItalicAction.js

@@ -1,25 +1,22 @@
-import React from "react";
+import react from "react";
 import { FORMAT_TEXT_COMMAND } from "lexical";
 import { useCurrentSelection } from "../../hooks/useCurrentSelection.js";
 import { useRichTextEditor } from "../../hooks/index.js";
-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"
-  }));
+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"
+    }));
 };
+export { ItalicAction };
 
 //# sourceMappingURL=ItalicAction.js.map

package/components/ToolbarActions/ItalicAction.js.map

@@ -1 +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.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\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":[]}
+{"version":3,"file":"components/ToolbarActions/ItalicAction.js","sources":["../../../src/components/ToolbarActions/ItalicAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\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"],"names":["ItalicAction","editor","useRichTextEditor","rangeSelection","useCurrentSelection","isItalicSelected","handleClick","FORMAT_TEXT_COMMAND"],"mappings":";;;;AAKO,MAAMA,eAAe;IACxB,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,mBAAmBF,iBAAiBA,eAAe,SAAS,CAAC,YAAY;IAE/E,MAAMG,cAAc;QAChBL,OAAO,eAAe,CAACM,qBAAqB;IAChD;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAASD;QACT,WAAW,uBAAwBD,CAAAA,mBAAmB,WAAW,EAAC;QAClE,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}

package/components/ToolbarActions/LinkAction.js

@@ -1,37 +1,32 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@webiny/lexical-nodes";
 import { getNodeFromSelection } from "../../hooks/useCurrentElement.js";
 import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection.js";
 import { useRichTextEditor } from "../../hooks/index.js";
-export const LinkAction = () => {
-  const {
-    editor
-  } = useRichTextEditor();
-  const isLink = useDeriveValueFromSelection(({
-    rangeSelection
-  }) => {
-    if (!rangeSelection) {
-      return false;
-    }
-    const node = getNodeFromSelection(rangeSelection);
-    return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;
-  });
-  const insertLink = useCallback(() => {
-    if (!isLink) {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
-        url: "https://"
-      });
-    } else {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-    }
-  }, [editor, isLink]);
-  return /*#__PURE__*/React.createElement("button", {
-    onClick: insertLink,
-    className: "popup-item spaced " + (isLink ? "active" : ""),
-    "aria-label": "Insert link"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "format link"
-  }));
+const LinkAction = ()=>{
+    const { editor } = useRichTextEditor();
+    const isLink = useDeriveValueFromSelection(({ rangeSelection })=>{
+        if (!rangeSelection) return false;
+        const node = getNodeFromSelection(rangeSelection);
+        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;
+    });
+    const insertLink = useCallback(()=>{
+        if (isLink) editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        else editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
+            url: "https://"
+        });
+    }, [
+        editor,
+        isLink
+    ]);
+    return /*#__PURE__*/ react.createElement("button", {
+        onClick: insertLink,
+        className: "popup-item spaced " + (isLink ? "active" : ""),
+        "aria-label": "Insert link"
+    }, /*#__PURE__*/ react.createElement("i", {
+        className: "format link"
+    }));
 };
+export { LinkAction };
 
 //# sourceMappingURL=LinkAction.js.map

package/components/ToolbarActions/LinkAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","$isLinkNode","TOGGLE_LINK_COMMAND","getNodeFromSelection","useDeriveValueFromSelection","useRichTextEditor","LinkAction","editor","isLink","rangeSelection","node","getParent","insertLink","dispatchCommand","url","createElement","onClick","className"],"sources":["LinkAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const LinkAction = () => {\n    const { editor } = useRichTextEditor();\n    const isLink = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n        const node = getNodeFromSelection(rangeSelection);\n        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;\n    });\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: \"https://\" });\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,uBAAuB;AACxE,SAASC,oBAAoB;AAC7B,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAMG,MAAM,GAAGJ,2BAA2B,CAAC,CAAC;IAAEK;EAAe,CAAC,KAAK;IAC/D,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,KAAK;IAChB;IACA,MAAMC,IAAI,GAAGP,oBAAoB,CAACM,cAAc,CAAC;IACjD,OAAOC,IAAI,GAAGT,WAAW,CAACS,IAAI,CAAC,IAAIT,WAAW,CAACS,IAAI,CAACC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK;EAC5E,CAAC,CAAC;EAEF,MAAMC,UAAU,GAAGZ,WAAW,CAAC,MAAM;IACjC,IAAI,CAACQ,MAAM,EAAE;MACTD,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE;QAAEY,GAAG,EAAE;MAAW,CAAC,CAAC;IACpE,CAAC,MAAM;MACHP,MAAM,CAACM,eAAe,CAACX,mBAAmB,EAAE,IAAI,CAAC;IACrD;EACJ,CAAC,EAAE,CAACK,MAAM,EAAEC,MAAM,CAAC,CAAC;EAEpB,oBACIT,KAAA,CAAAgB,aAAA;IACIC,OAAO,EAAEJ,UAAW;IACpBK,SAAS,EAAE,oBAAoB,IAAIT,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAa,gBAExBT,KAAA,CAAAgB,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/ToolbarActions/LinkAction.js","sources":["../../../src/components/ToolbarActions/LinkAction.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getNodeFromSelection } from \"~/hooks/useCurrentElement.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const LinkAction = () => {\n    const { editor } = useRichTextEditor();\n    const isLink = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n        const node = getNodeFromSelection(rangeSelection);\n        return node ? $isLinkNode(node) || $isLinkNode(node.getParent()) : false;\n    });\n\n    const insertLink = useCallback(() => {\n        if (!isLink) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, { url: \"https://\" });\n        } else {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        }\n    }, [editor, isLink]);\n\n    return (\n        <button\n            onClick={insertLink}\n            className={\"popup-item spaced \" + (isLink ? \"active\" : \"\")}\n            aria-label=\"Insert link\"\n        >\n            <i className=\"format link\" />\n        </button>\n    );\n};\n"],"names":["LinkAction","editor","useRichTextEditor","isLink","useDeriveValueFromSelection","rangeSelection","node","getNodeFromSelection","$isLinkNode","insertLink","useCallback","TOGGLE_LINK_COMMAND"],"mappings":";;;;;AAMO,MAAMA,aAAa;IACtB,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAMC,SAASC,4BAA4B,CAAC,EAAEC,cAAc,EAAE;QAC1D,IAAI,CAACA,gBACD,OAAO;QAEX,MAAMC,OAAOC,qBAAqBF;QAClC,OAAOC,OAAOE,YAAYF,SAASE,YAAYF,KAAK,SAAS,MAAM;IACvE;IAEA,MAAMG,aAAaC,YAAY;QAC3B,IAAKP,QAGDF,OAAO,eAAe,CAACU,qBAAqB;aAF5CV,OAAO,eAAe,CAACU,qBAAqB;YAAE,KAAK;QAAW;IAItE,GAAG;QAACV;QAAQE;KAAO;IAEnB,OAAO,WAAP,GACI,oBAAC;QACG,SAASM;QACT,WAAW,uBAAwBN,CAAAA,SAAS,WAAW,EAAC;QACxD,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}

package/components/ToolbarActions/NumberedListAction.js

@@ -1,44 +1,35 @@
-import React from "react";
+import react from "react";
 import { $isListNode } from "@webiny/lexical-nodes";
 import { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../commands/index.js";
 import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
 import { useCurrentElement } from "../../hooks/useCurrentElement.js";
-export const NumberedListAction = () => {
-  const {
-    element
-  } = useCurrentElement();
-  const {
-    editor,
-    theme
-  } = useRichTextEditor();
-  const isList = $isListNode(element);
-  const isNumbered = isList && element.getListType() === "number";
-  const getStyleId = () => {
-    // check default style for numbered list
-    const id = theme.getTypographyByTag("ol")?.id;
-    if (id) {
-      return id;
-    }
-    // fallback to ul list styles
-    return theme.getTypographyByTag("ul")?.id;
-  };
-  const formatNumberedList = () => {
-    if (!isNumbered) {
-      const styleId = getStyleId();
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
-        themeStyleId: styleId
-      });
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    }
-  };
-  return /*#__PURE__*/React.createElement("button", {
-    onClick: () => formatNumberedList(),
-    className: "popup-item spaced " + (isNumbered ? "active" : ""),
-    "aria-label": "Format text as numbered list"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "icon numbered-list"
-  }));
+const NumberedListAction = ()=>{
+    const { element } = useCurrentElement();
+    const { editor, theme } = useRichTextEditor();
+    const isList = $isListNode(element);
+    const isNumbered = isList && "number" === element.getListType();
+    const getStyleId = ()=>{
+        const id = theme.getTypographyByTag("ol")?.id;
+        if (id) return id;
+        return theme.getTypographyByTag("ul")?.id;
+    };
+    const formatNumberedList = ()=>{
+        if (isNumbered) editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+        else {
+            const styleId = getStyleId();
+            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, {
+                themeStyleId: styleId
+            });
+        }
+    };
+    return /*#__PURE__*/ react.createElement("button", {
+        onClick: ()=>formatNumberedList(),
+        className: "popup-item spaced " + (isNumbered ? "active" : ""),
+        "aria-label": "Format text as numbered list"
+    }, /*#__PURE__*/ react.createElement("i", {
+        className: "icon numbered-list"
+    }));
 };
+export { NumberedListAction };
 
 //# sourceMappingURL=NumberedListAction.js.map

package/components/ToolbarActions/NumberedListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","$isListNode","INSERT_ORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","useCurrentElement","NumberedListAction","element","editor","theme","isList","isNumbered","getListType","getStyleId","id","getTypographyByTag","formatNumberedList","styleId","dispatchCommand","themeStyleId","undefined","createElement","onClick","className"],"sources":["NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } from \"@webiny/lexical-nodes\";\nimport { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands/index.js\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\nexport const NumberedListAction = () => {\n    const { element } = useCurrentElement();\n    const { editor, theme } = useRichTextEditor();\n    const isList = $isListNode(element);\n    const isNumbered = isList && (element as ListNode).getListType() === \"number\";\n\n    const getStyleId = (): string | undefined => {\n        // check default style for numbered list\n        const id = theme.getTypographyByTag(\"ol\")?.id;\n        if (id) {\n            return id;\n        }\n        // fallback to ul list styles\n        return theme.getTypographyByTag(\"ul\")?.id;\n    };\n\n    const formatNumberedList = () => {\n        if (!isNumbered) {\n            const styleId = getStyleId();\n            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isNumbered ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,2BAA2B,EAAEC,mBAAmB;AACzD,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAQ,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEG,MAAM;IAAEC;EAAM,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAC7C,MAAMM,MAAM,GAAGT,WAAW,CAACM,OAAO,CAAC;EACnC,MAAMI,UAAU,GAAGD,MAAM,IAAKH,OAAO,CAAcK,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE7E,MAAMC,UAAU,GAAGA,CAAA,KAA0B;IACzC;IACA,MAAMC,EAAE,GAAGL,KAAK,CAACM,kBAAkB,CAAC,IAAI,CAAC,EAAED,EAAE;IAC7C,IAAIA,EAAE,EAAE;MACJ,OAAOA,EAAE;IACb;IACA;IACA,OAAOL,KAAK,CAACM,kBAAkB,CAAC,IAAI,CAAC,EAAED,EAAE;EAC7C,CAAC;EAED,MAAME,kBAAkB,GAAGA,CAAA,KAAM;IAC7B,IAAI,CAACL,UAAU,EAAE;MACb,MAAMM,OAAO,GAAGJ,UAAU,CAAC,CAAC;MAC5BL,MAAM,CAACU,eAAe,CAAChB,2BAA2B,EAAE;QAAEiB,YAAY,EAAEF;MAAQ,CAAC,CAAC;IAClF,CAAC,MAAM;MACHT,MAAM,CAACU,eAAe,CAACf,mBAAmB,EAAEiB,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACIpB,KAAA,CAAAqB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAMN,kBAAkB,CAAC,CAAE;IACpCO,SAAS,EAAE,oBAAoB,IAAIZ,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC/D,cAAW;EAA8B,gBAEzCX,KAAA,CAAAqB,aAAA;IAAGE,SAAS,EAAC;EAAoB,CAAE,CAC/B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/ToolbarActions/NumberedListAction.js","sources":["../../../src/components/ToolbarActions/NumberedListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } from \"@webiny/lexical-nodes\";\nimport { INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands/index.js\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\nexport const NumberedListAction = () => {\n    const { element } = useCurrentElement();\n    const { editor, theme } = useRichTextEditor();\n    const isList = $isListNode(element);\n    const isNumbered = isList && (element as ListNode).getListType() === \"number\";\n\n    const getStyleId = (): string | undefined => {\n        // check default style for numbered list\n        const id = theme.getTypographyByTag(\"ol\")?.id;\n        if (id) {\n            return id;\n        }\n        // fallback to ul list styles\n        return theme.getTypographyByTag(\"ul\")?.id;\n    };\n\n    const formatNumberedList = () => {\n        if (!isNumbered) {\n            const styleId = getStyleId();\n            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatNumberedList()}\n            className={\"popup-item spaced \" + (isNumbered ? \"active\" : \"\")}\n            aria-label=\"Format text as numbered list\"\n        >\n            <i className=\"icon numbered-list\" />\n        </button>\n    );\n};\n"],"names":["NumberedListAction","element","useCurrentElement","editor","theme","useRichTextEditor","isList","$isListNode","isNumbered","getStyleId","id","formatNumberedList","REMOVE_LIST_COMMAND","undefined","styleId","INSERT_ORDERED_LIST_COMMAND"],"mappings":";;;;;AAOO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAC1B,MAAMC,SAASC,YAAYN;IAC3B,MAAMO,aAAaF,UAAWL,AAAuC,aAAvCA,QAAqB,WAAW;IAE9D,MAAMQ,aAAa;QAEf,MAAMC,KAAKN,MAAM,kBAAkB,CAAC,OAAO;QAC3C,IAAIM,IACA,OAAOA;QAGX,OAAON,MAAM,kBAAkB,CAAC,OAAO;IAC3C;IAEA,MAAMO,qBAAqB;QACvB,IAAKH,YAIDL,OAAO,eAAe,CAACS,qBAAqBC;aAJ/B;YACb,MAAMC,UAAUL;YAChBN,OAAO,eAAe,CAACY,6BAA6B;gBAAE,cAAcD;YAAQ;QAChF;IAGJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAAS,IAAMH;QACf,WAAW,uBAAwBH,CAAAA,aAAa,WAAW,EAAC;QAC5D,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}

package/components/ToolbarActions/QuoteAction.js

@@ -1,33 +1,28 @@
-import React from "react";
-import { $isQuoteNode, formatToQuote, formatToParagraph } from "@webiny/lexical-nodes";
+import react from "react";
+import { $isQuoteNode, formatToParagraph, formatToQuote } from "@webiny/lexical-nodes";
 import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
 import { useCurrentElement } from "../../hooks/useCurrentElement.js";
 const QUOTE_TAG = "quote";
-export const QuoteAction = () => {
-  const {
-    editor,
-    theme
-  } = useRichTextEditor();
-  const {
-    element
-  } = useCurrentElement();
-  const isQuote = $isQuoteNode(element);
-  const formatText = () => {
-    if (!isQuote) {
-      // Try to set default quote style, when the action button is clicked for first time
-      const hasQuoteStyles = theme.getTypographyByTag(QUOTE_TAG);
-      formatToQuote(editor, hasQuoteStyles ? QUOTE_TAG : undefined);
-      return;
-    }
-    formatToParagraph(editor);
-  };
-  return /*#__PURE__*/React.createElement("button", {
-    onClick: formatText,
-    className: "popup-item " + (isQuote ? "active" : ""),
-    "aria-label": "Format text as quote"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "icon quote"
-  }));
+const QuoteAction = ()=>{
+    const { editor, theme } = useRichTextEditor();
+    const { element } = useCurrentElement();
+    const isQuote = $isQuoteNode(element);
+    const formatText = ()=>{
+        if (!isQuote) {
+            const hasQuoteStyles = theme.getTypographyByTag(QUOTE_TAG);
+            formatToQuote(editor, hasQuoteStyles ? QUOTE_TAG : void 0);
+            return;
+        }
+        formatToParagraph(editor);
+    };
+    return /*#__PURE__*/ react.createElement("button", {
+        onClick: formatText,
+        className: "popup-item " + (isQuote ? "active" : ""),
+        "aria-label": "Format text as quote"
+    }, /*#__PURE__*/ react.createElement("i", {
+        className: "icon quote"
+    }));
 };
+export { QuoteAction };
 
 //# sourceMappingURL=QuoteAction.js.map

package/components/ToolbarActions/QuoteAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","$isQuoteNode","formatToQuote","formatToParagraph","useRichTextEditor","useCurrentElement","QUOTE_TAG","QuoteAction","editor","theme","element","isQuote","formatText","hasQuoteStyles","getTypographyByTag","undefined","createElement","onClick","className"],"sources":["QuoteAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isQuoteNode, formatToQuote, formatToParagraph } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\nconst QUOTE_TAG = \"quote\";\n\nexport const QuoteAction = () => {\n    const { editor, theme } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isQuote = $isQuoteNode(element);\n\n    const formatText = () => {\n        if (!isQuote) {\n            // Try to set default quote style, when the action button is clicked for first time\n            const hasQuoteStyles = theme.getTypographyByTag(QUOTE_TAG);\n            formatToQuote(editor, hasQuoteStyles ? QUOTE_TAG : undefined);\n            return;\n        }\n        formatToParagraph(editor);\n    };\n\n    return (\n        <button\n            onClick={formatText}\n            className={\"popup-item \" + (isQuote ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,aAAa,EAAEC,iBAAiB,QAAQ,uBAAuB;AACtF,SAASC,iBAAiB;AAC1B,SAASC,iBAAiB;AAE1B,MAAMC,SAAS,GAAG,OAAO;AAEzB,OAAO,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAC7B,MAAM;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EAC7C,MAAM;IAAEM;EAAQ,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EACvC,MAAMM,OAAO,GAAGV,YAAY,CAACS,OAAO,CAAC;EAErC,MAAME,UAAU,GAAGA,CAAA,KAAM;IACrB,IAAI,CAACD,OAAO,EAAE;MACV;MACA,MAAME,cAAc,GAAGJ,KAAK,CAACK,kBAAkB,CAACR,SAAS,CAAC;MAC1DJ,aAAa,CAACM,MAAM,EAAEK,cAAc,GAAGP,SAAS,GAAGS,SAAS,CAAC;MAC7D;IACJ;IACAZ,iBAAiB,CAACK,MAAM,CAAC;EAC7B,CAAC;EAED,oBACIR,KAAA,CAAAgB,aAAA;IACIC,OAAO,EAAEL,UAAW;IACpBM,SAAS,EAAE,aAAa,IAAIP,OAAO,GAAG,QAAQ,GAAG,EAAE,CAAE;IACrD,cAAW;EAAsB,gBAEjCX,KAAA,CAAAgB,aAAA;IAAGE,SAAS,EAAC;EAAY,CAAE,CACvB,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/ToolbarActions/QuoteAction.js","sources":["../../../src/components/ToolbarActions/QuoteAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isQuoteNode, formatToQuote, formatToParagraph } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\nconst QUOTE_TAG = \"quote\";\n\nexport const QuoteAction = () => {\n    const { editor, theme } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const isQuote = $isQuoteNode(element);\n\n    const formatText = () => {\n        if (!isQuote) {\n            // Try to set default quote style, when the action button is clicked for first time\n            const hasQuoteStyles = theme.getTypographyByTag(QUOTE_TAG);\n            formatToQuote(editor, hasQuoteStyles ? QUOTE_TAG : undefined);\n            return;\n        }\n        formatToParagraph(editor);\n    };\n\n    return (\n        <button\n            onClick={formatText}\n            className={\"popup-item \" + (isQuote ? \"active\" : \"\")}\n            aria-label=\"Format text as quote\"\n        >\n            <i className=\"icon quote\" />\n        </button>\n    );\n};\n"],"names":["QUOTE_TAG","QuoteAction","editor","theme","useRichTextEditor","element","useCurrentElement","isQuote","$isQuoteNode","formatText","hasQuoteStyles","formatToQuote","undefined","formatToParagraph"],"mappings":";;;;AAKA,MAAMA,YAAY;AAEX,MAAMC,cAAc;IACvB,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAC1B,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAMC,UAAUC,aAAaH;IAE7B,MAAMI,aAAa;QACf,IAAI,CAACF,SAAS;YAEV,MAAMG,iBAAiBP,MAAM,kBAAkB,CAACH;YAChDW,cAAcT,QAAQQ,iBAAiBV,YAAYY;YACnD;QACJ;QACAC,kBAAkBX;IACtB;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAASO;QACT,WAAW,gBAAiBF,CAAAA,UAAU,WAAW,EAAC;QAClD,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}

package/components/ToolbarActions/TextAlignmentAction.js

@@ -1,61 +1,49 @@
-import React, { useEffect, useMemo } from "react";
+import react, { useEffect, useMemo } from "react";
 import { FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from "lexical";
 import { Compose, makeDecoratable } from "@webiny/react-composition";
 import { TextAlignmentActionContext } from "../../context/TextAlignmentActionContextProps.js";
 import { useDeriveValueFromSelection } from "../../hooks/useCurrentSelection.js";
 import { getSelectedNode } from "../../utils/getSelectedNode.js";
 import { useRichTextEditor } from "../../hooks/index.js";
-
-/*
- * Base text alignment dropdown composable component.
- * Note: To add a custom dropdown component use @see LexicalEditorConfig API.
- */
-export const BaseTextAlignmentDropDown = makeDecoratable("BaseTextAlignmentDropDown", () => {
-  useEffect(() => {
-    console.log("Default BaseTextAlignmentDropDown, please add your own component");
-  }, []);
-  return null;
+const BaseTextAlignmentDropDown = makeDecoratable("BaseTextAlignmentDropDown", ()=>{
+    useEffect(()=>{
+        console.log("Default BaseTextAlignmentDropDown, please add your own component");
+    }, []);
+    return null;
 });
-const TextAlignmentActionDropDown = ({
-  element
-}) => {
-  return /*#__PURE__*/React.createElement(Compose, {
-    component: BaseTextAlignmentDropDown,
-    with: () => () => element
-  });
-};
-export const TextAlignmentAction = () => {
-  const {
-    editor
-  } = useRichTextEditor();
-  const alignmentValue = useDeriveValueFromSelection(({
-    rangeSelection
-  }) => {
-    const node = rangeSelection ? getSelectedNode(rangeSelection) : null;
-    if (node) {
-      return node.getParent()?.getFormatType() || "";
-    }
-    return "";
-  });
-  const applyTextAlignment = value => {
-    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);
-  };
-  const outdentText = () => {
-    editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
-  };
-  const indentText = () => {
-    editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
-  };
-  const context = useMemo(() => ({
-    value: alignmentValue,
-    applyTextAlignment,
-    outdentText,
-    indentText
-  }), [alignmentValue]);
-  return /*#__PURE__*/React.createElement(TextAlignmentActionContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(BaseTextAlignmentDropDown, null));
+const TextAlignmentActionDropDown = ({ element })=>/*#__PURE__*/ react.createElement(Compose, {
+        component: BaseTextAlignmentDropDown,
+        with: ()=>()=>element
+    });
+const TextAlignmentAction = ()=>{
+    const { editor } = useRichTextEditor();
+    const alignmentValue = useDeriveValueFromSelection(({ rangeSelection })=>{
+        const node = rangeSelection ? getSelectedNode(rangeSelection) : null;
+        if (node) return node.getParent()?.getFormatType() || "";
+        return "";
+    });
+    const applyTextAlignment = (value)=>{
+        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);
+    };
+    const outdentText = ()=>{
+        editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, void 0);
+    };
+    const indentText = ()=>{
+        editor.dispatchCommand(INDENT_CONTENT_COMMAND, void 0);
+    };
+    const context = useMemo(()=>({
+            value: alignmentValue,
+            applyTextAlignment,
+            outdentText,
+            indentText
+        }), [
+        alignmentValue
+    ]);
+    return /*#__PURE__*/ react.createElement(TextAlignmentActionContext.Provider, {
+        value: context
+    }, /*#__PURE__*/ react.createElement(BaseTextAlignmentDropDown, null));
 };
 TextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;
+export { BaseTextAlignmentDropDown, TextAlignmentAction };
 
 //# sourceMappingURL=TextAlignmentAction.js.map

package/components/ToolbarActions/TextAlignmentAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","FORMAT_ELEMENT_COMMAND","INDENT_CONTENT_COMMAND","OUTDENT_CONTENT_COMMAND","Compose","makeDecoratable","TextAlignmentActionContext","useDeriveValueFromSelection","getSelectedNode","useRichTextEditor","BaseTextAlignmentDropDown","console","log","TextAlignmentActionDropDown","element","createElement","component","with","TextAlignmentAction","editor","alignmentValue","rangeSelection","node","getParent","getFormatType","applyTextAlignment","value","dispatchCommand","outdentText","undefined","indentText","context","Provider","TextAlignmentDropDown"],"sources":["TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport type { ElementFormatType } from \"lexical\";\nimport { FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeDecoratable(\n    \"BaseTextAlignmentDropDown\",\n    (): React.JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TextAlignmentActionDropdownProps {\n    element: React.JSX.Element;\n}\n\nconst TextAlignmentActionDropDown = ({\n    element\n}: TextAlignmentActionDropdownProps): React.JSX.Element => {\n    return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport type TextAlignmentAction = React.ComponentType<unknown> & {\n    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n};\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n    const { editor } = useRichTextEditor();\n    const alignmentValue: ElementFormatType = useDeriveValueFromSelection(({ rangeSelection }) => {\n        const node = rangeSelection ? getSelectedNode(rangeSelection) : null;\n        if (node) {\n            return node.getParent()?.getFormatType() || \"\";\n        }\n        return \"\";\n    });\n\n    const applyTextAlignment = (value: ElementFormatType) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n    };\n\n    const outdentText = () => {\n        editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const indentText = () => {\n        editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const context = useMemo(\n        () => ({\n            value: alignmentValue,\n            applyTextAlignment,\n            outdentText,\n            indentText\n        }),\n        [alignmentValue]\n    );\n\n    return (\n        <TextAlignmentActionContext.Provider value={context}>\n            <BaseTextAlignmentDropDown />\n        </TextAlignmentActionContext.Provider>\n    );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAEjD,SAASC,sBAAsB,EAAEC,sBAAsB,EAAEC,uBAAuB,QAAQ,SAAS;AACjG,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,0BAA0B;AACnC,SAASC,2BAA2B;AACpC,SAASC,eAAe;AACxB,SAASC,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA,OAAO,MAAMC,yBAAyB,GAAGL,eAAe,CACpD,2BAA2B,EAC3B,MAAgC;EAC5BN,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,kEAAkE,CAAC;EACnF,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CACJ,CAAC;AAMD,MAAMC,2BAA2B,GAAGA,CAAC;EACjCC;AAC8B,CAAC,KAAwB;EACvD,oBAAOhB,KAAA,CAAAiB,aAAA,CAACX,OAAO;IAACY,SAAS,EAAEN,yBAA0B;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AACvF,CAAC;AAMD,OAAO,MAAMI,mBAAwC,GAAGA,CAAA,KAAM;EAC1D,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,cAAiC,GAAGb,2BAA2B,CAAC,CAAC;IAAEc;EAAe,CAAC,KAAK;IAC1F,MAAMC,IAAI,GAAGD,cAAc,GAAGb,eAAe,CAACa,cAAc,CAAC,GAAG,IAAI;IACpE,IAAIC,IAAI,EAAE;MACN,OAAOA,IAAI,CAACC,SAAS,CAAC,CAAC,EAAEC,aAAa,CAAC,CAAC,IAAI,EAAE;IAClD;IACA,OAAO,EAAE;EACb,CAAC,CAAC;EAEF,MAAMC,kBAAkB,GAAIC,KAAwB,IAAK;IACrDP,MAAM,CAACQ,eAAe,CAAC1B,sBAAsB,EAAEyB,KAAK,CAAC;EACzD,CAAC;EAED,MAAME,WAAW,GAAGA,CAAA,KAAM;IACtBT,MAAM,CAACQ,eAAe,CAACxB,uBAAuB,EAAE0B,SAAS,CAAC;EAC9D,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACrBX,MAAM,CAACQ,eAAe,CAACzB,sBAAsB,EAAE2B,SAAS,CAAC;EAC7D,CAAC;EAED,MAAME,OAAO,GAAG/B,OAAO,CACnB,OAAO;IACH0B,KAAK,EAAEN,cAAc;IACrBK,kBAAkB;IAClBG,WAAW;IACXE;EACJ,CAAC,CAAC,EACF,CAACV,cAAc,CACnB,CAAC;EAED,oBACItB,KAAA,CAAAiB,aAAA,CAACT,0BAA0B,CAAC0B,QAAQ;IAACN,KAAK,EAAEK;EAAQ,gBAChDjC,KAAA,CAAAiB,aAAA,CAACL,yBAAyB,MAAE,CACK,CAAC;AAE9C,CAAC;AAEDQ,mBAAmB,CAACe,qBAAqB,GAAGpB,2BAA2B","ignoreList":[]}
+{"version":3,"file":"components/ToolbarActions/TextAlignmentAction.js","sources":["../../../src/components/ToolbarActions/TextAlignmentAction.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport type { ElementFormatType } from \"lexical\";\nimport { FORMAT_ELEMENT_COMMAND, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { TextAlignmentActionContext } from \"~/context/TextAlignmentActionContextProps.js\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\n/*\n * Base text alignment dropdown composable component.\n * Note: To add a custom dropdown component use @see LexicalEditorConfig API.\n */\nexport const BaseTextAlignmentDropDown = makeDecoratable(\n    \"BaseTextAlignmentDropDown\",\n    (): React.JSX.Element | null => {\n        useEffect(() => {\n            console.log(\"Default BaseTextAlignmentDropDown, please add your own component\");\n        }, []);\n        return null;\n    }\n);\n\ninterface TextAlignmentActionDropdownProps {\n    element: React.JSX.Element;\n}\n\nconst TextAlignmentActionDropDown = ({\n    element\n}: TextAlignmentActionDropdownProps): React.JSX.Element => {\n    return <Compose component={BaseTextAlignmentDropDown} with={() => () => element} />;\n};\n\nexport type TextAlignmentAction = React.ComponentType<unknown> & {\n    TextAlignmentDropDown: typeof TextAlignmentActionDropDown;\n};\n\nexport const TextAlignmentAction: TextAlignmentAction = () => {\n    const { editor } = useRichTextEditor();\n    const alignmentValue: ElementFormatType = useDeriveValueFromSelection(({ rangeSelection }) => {\n        const node = rangeSelection ? getSelectedNode(rangeSelection) : null;\n        if (node) {\n            return node.getParent()?.getFormatType() || \"\";\n        }\n        return \"\";\n    });\n\n    const applyTextAlignment = (value: ElementFormatType) => {\n        editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, value);\n    };\n\n    const outdentText = () => {\n        editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const indentText = () => {\n        editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);\n    };\n\n    const context = useMemo(\n        () => ({\n            value: alignmentValue,\n            applyTextAlignment,\n            outdentText,\n            indentText\n        }),\n        [alignmentValue]\n    );\n\n    return (\n        <TextAlignmentActionContext.Provider value={context}>\n            <BaseTextAlignmentDropDown />\n        </TextAlignmentActionContext.Provider>\n    );\n};\n\nTextAlignmentAction.TextAlignmentDropDown = TextAlignmentActionDropDown;\n"],"names":["BaseTextAlignmentDropDown","makeDecoratable","useEffect","console","TextAlignmentActionDropDown","element","Compose","TextAlignmentAction","editor","useRichTextEditor","alignmentValue","useDeriveValueFromSelection","rangeSelection","node","getSelectedNode","applyTextAlignment","value","FORMAT_ELEMENT_COMMAND","outdentText","OUTDENT_CONTENT_COMMAND","undefined","indentText","INDENT_CONTENT_COMMAND","context","useMemo","TextAlignmentActionContext"],"mappings":";;;;;;;AAaO,MAAMA,4BAA4BC,gBACrC,6BACA;IACIC,UAAU;QACNC,QAAQ,GAAG,CAAC;IAChB,GAAG,EAAE;IACL,OAAO;AACX;AAOJ,MAAMC,8BAA8B,CAAC,EACjCC,OAAO,EACwB,GACxB,WAAP,GAAO,oBAACC,SAAOA;QAAC,WAAWN;QAA2B,MAAM,IAAM,IAAMK;;AAOrE,MAAME,sBAA2C;IACpD,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAMC,iBAAoCC,4BAA4B,CAAC,EAAEC,cAAc,EAAE;QACrF,MAAMC,OAAOD,iBAAiBE,gBAAgBF,kBAAkB;QAChE,IAAIC,MACA,OAAOA,KAAK,SAAS,IAAI,mBAAmB;QAEhD,OAAO;IACX;IAEA,MAAME,qBAAqB,CAACC;QACxBR,OAAO,eAAe,CAACS,wBAAwBD;IACnD;IAEA,MAAME,cAAc;QAChBV,OAAO,eAAe,CAACW,yBAAyBC;IACpD;IAEA,MAAMC,aAAa;QACfb,OAAO,eAAe,CAACc,wBAAwBF;IACnD;IAEA,MAAMG,UAAUC,QACZ,IAAO;YACH,OAAOd;YACPK;YACAG;YACAG;QACJ,IACA;QAACX;KAAe;IAGpB,OAAO,WAAP,GACI,oBAACe,2BAA2B,QAAQ;QAAC,OAAOF;qBACxC,oBAACvB,2BAAyBA;AAGtC;AAEAO,oBAAoB,qBAAqB,GAAGH"}