@webiny/lexical-editor 6.4.11 → 6.6.0-alpha.1

package/components/ToolbarActions/BoldAction.js

@@ -2,6 +2,8 @@ import react from "react";
 import { FORMAT_TEXT_COMMAND } from "lexical";
 import { useCurrentSelection } from "../../hooks/useCurrentSelection.js";
 import { useRichTextEditor } from "../../hooks/index.js";
+import { ReactComponent } from "@webiny/icons/format_bold.svg";
+import clsx from "clsx";
 const BoldAction = ()=>{
     const { editor } = useRichTextEditor();
     const { rangeSelection } = useCurrentSelection();
@@ -11,10 +13,12 @@ const BoldAction = ()=>{
     };
     return /*#__PURE__*/ react.createElement("button", {
         onClick: handleClick,
-        className: "popup-item spaced " + (isBoldSelected ? "active" : ""),
+        className: clsx("popup-item", "spaced", {
+            active: isBoldSelected
+        }),
         "aria-label": "Format text as bold"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "format bold"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "format"
     }));
 };
 export { BoldAction };

package/components/ToolbarActions/BoldAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ToolbarActions/BoldAction.js","sources":["../../../src/components/ToolbarActions/BoldAction.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 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"],"names":["BoldAction","editor","useRichTextEditor","rangeSelection","useCurrentSelection","isBoldSelected","handleClick","FORMAT_TEXT_COMMAND"],"mappings":";;;;AAKO,MAAMA,aAAa;IACtB,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,iBAAiBF,iBAAiBA,eAAe,SAAS,CAAC,UAAU;IAE3E,MAAMG,cAAc;QAChBL,OAAO,eAAe,CAACM,qBAAqB;IAChD;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAASD;QACT,WAAW,uBAAwBD,CAAAA,iBAAiB,WAAW,EAAC;QAChE,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}
+{"version":3,"file":"components/ToolbarActions/BoldAction.js","sources":["../../../src/components/ToolbarActions/BoldAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport cn from \"clsx\";\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={cn(\"popup-item\", \"spaced\", { active: isBoldSelected })}\n            aria-label=\"Format text as bold\"\n        >\n            <BoldIcon className=\"format\" />\n        </button>\n    );\n};\n"],"names":["BoldAction","editor","useRichTextEditor","rangeSelection","useCurrentSelection","isBoldSelected","handleClick","FORMAT_TEXT_COMMAND","cn","BoldIcon"],"mappings":";;;;;;AAOO,MAAMA,aAAa;IACtB,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,iBAAiBF,iBAAiBA,eAAe,SAAS,CAAC,UAAU;IAE3E,MAAMG,cAAc;QAChBL,OAAO,eAAe,CAACM,qBAAqB;IAChD;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAASD;QACT,WAAWE,KAAG,cAAc,UAAU;YAAE,QAAQH;QAAe;QAC/D,cAAW;qBAEX,oBAACI,gBAAQA;QAAC,WAAU;;AAGhC"}

package/components/ToolbarActions/BulletListAction.js

@@ -3,6 +3,8 @@ import { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../comman
 import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
 import { $isListNode } from "@webiny/lexical-nodes";
 import { useCurrentElement } from "../../hooks/useCurrentElement.js";
+import { ReactComponent } from "@webiny/icons/format_list_bulleted.svg";
+import clsx from "clsx";
 const BulletListAction = ()=>{
     const { editor } = useRichTextEditor();
     const { element } = useCurrentElement();
@@ -20,10 +22,12 @@ const BulletListAction = ()=>{
     };
     return /*#__PURE__*/ react.createElement("button", {
         onClick: ()=>formatBulletList(),
-        className: "popup-item spaced " + (isBullet ? "active" : ""),
+        className: clsx("popup-item", "spaced", {
+            active: isBullet
+        }),
         "aria-label": "Format text as bullet list"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon bullet-list"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "icon"
     }));
 };
 export { BulletListAction };

package/components/ToolbarActions/BulletListAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ToolbarActions/BulletListAction.js","sources":["../../../src/components/ToolbarActions/BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands/index.js\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\n\nexport const BulletListAction = () => {\n    const { editor } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const { theme } = 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 = theme.getTypographyByTag(\"ul\")?.id;\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"],"names":["BulletListAction","editor","useRichTextEditor","element","useCurrentElement","theme","isList","$isListNode","isBullet","formatBulletList","REMOVE_LIST_COMMAND","undefined","styleId","INSERT_UNORDERED_LIST_COMMAND"],"mappings":";;;;;AAOO,MAAMA,mBAAmB;IAC5B,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,KAAK,EAAE,GAAGH;IAClB,MAAMI,SAASC,YAAYJ;IAE3B,MAAMK,WAAWF,UAAWH,AAAuC,aAAvCA,QAAqB,WAAW;IAE5D,MAAMM,mBAAmB;QACrB,IAAKD,UAMDP,OAAO,eAAe,CAACS,qBAAqBC;aANjC;YACX,MAAMC,UAAUP,MAAM,kBAAkB,CAAC,OAAO;YAGhDJ,OAAO,eAAe,CAACY,+BAA+B;gBAAE,cAAcD;YAAQ;QAClF;IAGJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAAS,IAAMH;QACf,WAAW,uBAAwBD,CAAAA,WAAW,WAAW,EAAC;QAC1D,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}
+{"version":3,"file":"components/ToolbarActions/BulletListAction.js","sources":["../../../src/components/ToolbarActions/BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands/index.js\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor.js\";\nimport type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement.js\";\nimport { ReactComponent as BulletListIcon } from \"@webiny/icons/format_list_bulleted.svg\";\nimport cn from \"clsx\";\n\nexport const BulletListAction = () => {\n    const { editor } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const { theme } = 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 = theme.getTypographyByTag(\"ul\")?.id;\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={cn(\"popup-item\", \"spaced\", { active: isBullet })}\n            aria-label=\"Format text as bullet list\"\n        >\n            <BulletListIcon className=\"icon\" />\n        </button>\n    );\n};\n"],"names":["BulletListAction","editor","useRichTextEditor","element","useCurrentElement","theme","isList","$isListNode","isBullet","formatBulletList","REMOVE_LIST_COMMAND","undefined","styleId","INSERT_UNORDERED_LIST_COMMAND","cn","BulletListIcon"],"mappings":";;;;;;;AASO,MAAMA,mBAAmB;IAC5B,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,KAAK,EAAE,GAAGH;IAClB,MAAMI,SAASC,YAAYJ;IAE3B,MAAMK,WAAWF,UAAWH,AAAuC,aAAvCA,QAAqB,WAAW;IAE5D,MAAMM,mBAAmB;QACrB,IAAKD,UAMDP,OAAO,eAAe,CAACS,qBAAqBC;aANjC;YACX,MAAMC,UAAUP,MAAM,kBAAkB,CAAC,OAAO;YAGhDJ,OAAO,eAAe,CAACY,+BAA+B;gBAAE,cAAcD;YAAQ;QAClF;IAGJ;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAAS,IAAMH;QACf,WAAWK,KAAG,cAAc,UAAU;YAAE,QAAQN;QAAS;QACzD,cAAW;qBAEX,oBAACO,gBAAcA;QAAC,WAAU;;AAGtC"}

package/components/ToolbarActions/CodeHighlightAction.js

@@ -2,6 +2,8 @@ import react from "react";
 import { FORMAT_TEXT_COMMAND } from "lexical";
 import { useCurrentSelection } from "../../hooks/useCurrentSelection.js";
 import { useRichTextEditor } from "../../hooks/index.js";
+import { ReactComponent } from "@webiny/icons/code.svg";
+import clsx from "clsx";
 const CodeHighlightAction = ()=>{
     const { editor } = useRichTextEditor();
     const { rangeSelection } = useCurrentSelection();
@@ -11,10 +13,12 @@ const CodeHighlightAction = ()=>{
     };
     return /*#__PURE__*/ react.createElement("button", {
         onClick: handleClick,
-        className: "popup-item spaced " + (isCodeSelected ? "active" : ""),
+        className: clsx("popup-item", "spaced", {
+            active: isCodeSelected
+        }),
         "aria-label": "Text code highlight"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "format code"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "format"
     }));
 };
 export { CodeHighlightAction };

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ToolbarActions/CodeHighlightAction.js","sources":["../../../src/components/ToolbarActions/CodeHighlightAction.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 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"],"names":["CodeHighlightAction","editor","useRichTextEditor","rangeSelection","useCurrentSelection","isCodeSelected","handleClick","FORMAT_TEXT_COMMAND"],"mappings":";;;;AAKO,MAAMA,sBAAsB;IAC/B,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,iBAAiBF,iBAAiBA,eAAe,SAAS,CAAC,UAAU;IAE3E,MAAMG,cAAc;QAChBL,OAAO,eAAe,CAACM,qBAAqB;IAChD;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAASD;QACT,WAAW,uBAAwBD,CAAAA,iBAAiB,WAAW,EAAC;QAChE,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}
+{"version":3,"file":"components/ToolbarActions/CodeHighlightAction.js","sources":["../../../src/components/ToolbarActions/CodeHighlightAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { ReactComponent as CodeIcon } from \"@webiny/icons/code.svg\";\nimport cn from \"clsx\";\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={cn(\"popup-item\", \"spaced\", { active: isCodeSelected })}\n            aria-label=\"Text code highlight\"\n        >\n            <CodeIcon className=\"format\" />\n        </button>\n    );\n};\n"],"names":["CodeHighlightAction","editor","useRichTextEditor","rangeSelection","useCurrentSelection","isCodeSelected","handleClick","FORMAT_TEXT_COMMAND","cn","CodeIcon"],"mappings":";;;;;;AAOO,MAAMA,sBAAsB;IAC/B,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,iBAAiBF,iBAAiBA,eAAe,SAAS,CAAC,UAAU;IAE3E,MAAMG,cAAc;QAChBL,OAAO,eAAe,CAACM,qBAAqB;IAChD;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAASD;QACT,WAAWE,KAAG,cAAc,UAAU;YAAE,QAAQH;QAAe;QAC/D,cAAW;qBAEX,oBAACI,gBAAQA;QAAC,WAAU;;AAGhC"}

package/components/ToolbarActions/FontSizeAction.js

@@ -52,7 +52,8 @@ const FontSizeDropdown = ({ sizes })=>{
         disabled: false,
         showScroll: true
     }, fontSizeOptions.map((option)=>/*#__PURE__*/ react.createElement(DropDownItem, {
-            className: `item typography-item ${selectedFontSize === option.value ? "active dropdown-item-active" : ""}`,
+            className: "item typography-item",
+            selected: selectedFontSize === option.value,
             onClick: ()=>onFontSizeSelect(option.value),
             key: option.value
         }, /*#__PURE__*/ react.createElement("span", {

package/components/ToolbarActions/FontSizeAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ToolbarActions/FontSizeAction.js","sources":["../../../src/components/ToolbarActions/FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { $patchStyleText } from \"@lexical/selection\";\nimport { $getSelectionStyleValueForProperty } from \"@lexical/selection\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { DropDown } from \"~/ui/DropDown.js\";\nimport { DropDownItem } from \"~/ui/DropDown.js\";\n\ninterface FontSizeDropdownProps {\n    sizes: string[];\n}\n\nconst FontSizeDropdown = ({ sizes }: FontSizeDropdownProps) => {\n    const { editor } = useRichTextEditor();\n\n    const fontSizeOptions = useMemo(() => {\n        return [\n            {\n                value: \"inherit\",\n                label: \"Auto\"\n            },\n            ...sizes.map(size => {\n                return {\n                    value: size,\n                    label: `${size}`\n                };\n            })\n        ];\n    }, [sizes]);\n\n    const selectedFontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"inherit\";\n        }\n        return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\", \"inherit\");\n    });\n\n    const onFontSizeSelect = useCallback(\n        (size: string) => {\n            editor.update(() => {\n                if (editor.isEditable()) {\n                    const selection = $getSelection();\n                    if (selection === null) {\n                        return;\n                    }\n\n                    if ($isRangeSelection(selection) && selection.isCollapsed()) {\n                        const anchor = selection.anchor.getNode();\n                        const topElement = anchor.getTopLevelElementOrThrow();\n                        topElement.select(0, topElement.getChildrenSize());\n                        const expanded = $getSelection();\n                        if (expanded !== null) {\n                            $patchStyleText(expanded, { \"font-size\": size });\n                        }\n                    } else {\n                        $patchStyleText(selection, { \"font-size\": size });\n                    }\n                }\n            });\n        },\n        [editor]\n    );\n\n    const selectedOption = fontSizeOptions.find(option => option.value === selectedFontSize);\n\n    return (\n        <DropDown\n            buttonClassName=\"toolbar-item typography-dropdown\"\n            buttonAriaLabel={\"Typography formatting options\"}\n            buttonLabel={selectedOption?.label || \"Auto\"}\n            stopCloseOnClickSelf={true}\n            disabled={false}\n            showScroll={true}\n        >\n            {fontSizeOptions.map(option => (\n                <DropDownItem\n                    className={`item typography-item ${\n                        selectedFontSize === option.value ? \"active dropdown-item-active\" : \"\"\n                    }`}\n                    onClick={() => onFontSizeSelect(option.value)}\n                    key={option.value}\n                >\n                    <span className=\"text\">{option.label}</span>\n                </DropDownItem>\n            ))}\n        </DropDown>\n    );\n};\n\nexport const FontSizeAction = () => {\n    const { theme } = useRichTextEditor();\n\n    if (!theme.fontSizes || theme.fontSizes.length === 0) {\n        return null;\n    }\n\n    return <FontSizeDropdown sizes={theme.fontSizes} />;\n};\n"],"names":["FontSizeDropdown","sizes","editor","useRichTextEditor","fontSizeOptions","useMemo","size","selectedFontSize","useDeriveValueFromSelection","rangeSelection","$getSelectionStyleValueForProperty","onFontSizeSelect","useCallback","selection","$getSelection","$isRangeSelection","anchor","topElement","expanded","$patchStyleText","selectedOption","option","DropDown","DropDownItem","FontSizeAction","theme"],"mappings":";;;;;;AAaA,MAAMA,mBAAmB,CAAC,EAAEC,KAAK,EAAyB;IACtD,MAAM,EAAEC,MAAM,EAAE,GAAGC;IAEnB,MAAMC,kBAAkBC,QAAQ,IACrB;YACH;gBACI,OAAO;gBACP,OAAO;YACX;eACGJ,MAAM,GAAG,CAACK,CAAAA,OACF;oBACH,OAAOA;oBACP,OAAO,GAAGA,MAAM;gBACpB;SAEP,EACF;QAACL;KAAM;IAEV,MAAMM,mBAAmBC,4BAA4B,CAAC,EAAEC,cAAc,EAAE;QACpE,IAAI,CAACA,gBACD,OAAO;QAEX,OAAOC,mCAAmCD,gBAAgB,aAAa;IAC3E;IAEA,MAAME,mBAAmBC,YACrB,CAACN;QACGJ,OAAO,MAAM,CAAC;YACV,IAAIA,OAAO,UAAU,IAAI;gBACrB,MAAMW,YAAYC;gBAClB,IAAID,AAAc,SAAdA,WACA;gBAGJ,IAAIE,kBAAkBF,cAAcA,UAAU,WAAW,IAAI;oBACzD,MAAMG,SAASH,UAAU,MAAM,CAAC,OAAO;oBACvC,MAAMI,aAAaD,OAAO,yBAAyB;oBACnDC,WAAW,MAAM,CAAC,GAAGA,WAAW,eAAe;oBAC/C,MAAMC,WAAWJ;oBACjB,IAAII,AAAa,SAAbA,UACAC,gBAAgBD,UAAU;wBAAE,aAAaZ;oBAAK;gBAEtD,OACIa,gBAAgBN,WAAW;oBAAE,aAAaP;gBAAK;YAEvD;QACJ;IACJ,GACA;QAACJ;KAAO;IAGZ,MAAMkB,iBAAiBhB,gBAAgB,IAAI,CAACiB,CAAAA,SAAUA,OAAO,KAAK,KAAKd;IAEvE,OAAO,WAAP,GACI,oBAACe,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAaF,gBAAgB,SAAS;QACtC,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXhB,gBAAgB,GAAG,CAACiB,CAAAA,SAAAA,WAAAA,GACjB,oBAACE,cAAYA;YACT,WAAW,CAAC,qBAAqB,EAC7BhB,qBAAqBc,OAAO,KAAK,GAAG,gCAAgC,IACtE;YACF,SAAS,IAAMV,iBAAiBU,OAAO,KAAK;YAC5C,KAAKA,OAAO,KAAK;yBAEjB,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK;AAKxD;AAEO,MAAMG,iBAAiB;IAC1B,MAAM,EAAEC,KAAK,EAAE,GAAGtB;IAElB,IAAI,CAACsB,MAAM,SAAS,IAAIA,AAA2B,MAA3BA,MAAM,SAAS,CAAC,MAAM,EAC1C,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACzB,kBAAgBA;QAAC,OAAOyB,MAAM,SAAS;;AACnD"}
+{"version":3,"file":"components/ToolbarActions/FontSizeAction.js","sources":["../../../src/components/ToolbarActions/FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { $getSelection, $isRangeSelection } from \"lexical\";\nimport { $patchStyleText } from \"@lexical/selection\";\nimport { $getSelectionStyleValueForProperty } from \"@lexical/selection\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { DropDown } from \"~/ui/DropDown.js\";\nimport { DropDownItem } from \"~/ui/DropDown.js\";\n\ninterface FontSizeDropdownProps {\n    sizes: string[];\n}\n\nconst FontSizeDropdown = ({ sizes }: FontSizeDropdownProps) => {\n    const { editor } = useRichTextEditor();\n\n    const fontSizeOptions = useMemo(() => {\n        return [\n            {\n                value: \"inherit\",\n                label: \"Auto\"\n            },\n            ...sizes.map(size => {\n                return {\n                    value: size,\n                    label: `${size}`\n                };\n            })\n        ];\n    }, [sizes]);\n\n    const selectedFontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"inherit\";\n        }\n        return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\", \"inherit\");\n    });\n\n    const onFontSizeSelect = useCallback(\n        (size: string) => {\n            editor.update(() => {\n                if (editor.isEditable()) {\n                    const selection = $getSelection();\n                    if (selection === null) {\n                        return;\n                    }\n\n                    if ($isRangeSelection(selection) && selection.isCollapsed()) {\n                        const anchor = selection.anchor.getNode();\n                        const topElement = anchor.getTopLevelElementOrThrow();\n                        topElement.select(0, topElement.getChildrenSize());\n                        const expanded = $getSelection();\n                        if (expanded !== null) {\n                            $patchStyleText(expanded, { \"font-size\": size });\n                        }\n                    } else {\n                        $patchStyleText(selection, { \"font-size\": size });\n                    }\n                }\n            });\n        },\n        [editor]\n    );\n\n    const selectedOption = fontSizeOptions.find(option => option.value === selectedFontSize);\n\n    return (\n        <DropDown\n            buttonClassName=\"toolbar-item typography-dropdown\"\n            buttonAriaLabel={\"Typography formatting options\"}\n            buttonLabel={selectedOption?.label || \"Auto\"}\n            stopCloseOnClickSelf={true}\n            disabled={false}\n            showScroll={true}\n        >\n            {fontSizeOptions.map(option => (\n                <DropDownItem\n                    className=\"item typography-item\"\n                    selected={selectedFontSize === option.value}\n                    onClick={() => onFontSizeSelect(option.value)}\n                    key={option.value}\n                >\n                    <span className=\"text\">{option.label}</span>\n                </DropDownItem>\n            ))}\n        </DropDown>\n    );\n};\n\nexport const FontSizeAction = () => {\n    const { theme } = useRichTextEditor();\n\n    if (!theme.fontSizes || theme.fontSizes.length === 0) {\n        return null;\n    }\n\n    return <FontSizeDropdown sizes={theme.fontSizes} />;\n};\n"],"names":["FontSizeDropdown","sizes","editor","useRichTextEditor","fontSizeOptions","useMemo","size","selectedFontSize","useDeriveValueFromSelection","rangeSelection","$getSelectionStyleValueForProperty","onFontSizeSelect","useCallback","selection","$getSelection","$isRangeSelection","anchor","topElement","expanded","$patchStyleText","selectedOption","option","DropDown","DropDownItem","FontSizeAction","theme"],"mappings":";;;;;;AAaA,MAAMA,mBAAmB,CAAC,EAAEC,KAAK,EAAyB;IACtD,MAAM,EAAEC,MAAM,EAAE,GAAGC;IAEnB,MAAMC,kBAAkBC,QAAQ,IACrB;YACH;gBACI,OAAO;gBACP,OAAO;YACX;eACGJ,MAAM,GAAG,CAACK,CAAAA,OACF;oBACH,OAAOA;oBACP,OAAO,GAAGA,MAAM;gBACpB;SAEP,EACF;QAACL;KAAM;IAEV,MAAMM,mBAAmBC,4BAA4B,CAAC,EAAEC,cAAc,EAAE;QACpE,IAAI,CAACA,gBACD,OAAO;QAEX,OAAOC,mCAAmCD,gBAAgB,aAAa;IAC3E;IAEA,MAAME,mBAAmBC,YACrB,CAACN;QACGJ,OAAO,MAAM,CAAC;YACV,IAAIA,OAAO,UAAU,IAAI;gBACrB,MAAMW,YAAYC;gBAClB,IAAID,AAAc,SAAdA,WACA;gBAGJ,IAAIE,kBAAkBF,cAAcA,UAAU,WAAW,IAAI;oBACzD,MAAMG,SAASH,UAAU,MAAM,CAAC,OAAO;oBACvC,MAAMI,aAAaD,OAAO,yBAAyB;oBACnDC,WAAW,MAAM,CAAC,GAAGA,WAAW,eAAe;oBAC/C,MAAMC,WAAWJ;oBACjB,IAAII,AAAa,SAAbA,UACAC,gBAAgBD,UAAU;wBAAE,aAAaZ;oBAAK;gBAEtD,OACIa,gBAAgBN,WAAW;oBAAE,aAAaP;gBAAK;YAEvD;QACJ;IACJ,GACA;QAACJ;KAAO;IAGZ,MAAMkB,iBAAiBhB,gBAAgB,IAAI,CAACiB,CAAAA,SAAUA,OAAO,KAAK,KAAKd;IAEvE,OAAO,WAAP,GACI,oBAACe,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAaF,gBAAgB,SAAS;QACtC,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXhB,gBAAgB,GAAG,CAACiB,CAAAA,SAAAA,WAAAA,GACjB,oBAACE,cAAYA;YACT,WAAU;YACV,UAAUhB,qBAAqBc,OAAO,KAAK;YAC3C,SAAS,IAAMV,iBAAiBU,OAAO,KAAK;YAC5C,KAAKA,OAAO,KAAK;yBAEjB,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK;AAKxD;AAEO,MAAMG,iBAAiB;IAC1B,MAAM,EAAEC,KAAK,EAAE,GAAGtB;IAElB,IAAI,CAACsB,MAAM,SAAS,IAAIA,AAA2B,MAA3BA,MAAM,SAAS,CAAC,MAAM,EAC1C,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACzB,kBAAgBA;QAAC,OAAOyB,MAAM,SAAS;;AACnD"}

package/components/ToolbarActions/ImageAction.js

@@ -2,6 +2,7 @@ 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";
+import { ReactComponent } from "@webiny/icons/image.svg";
 const ImageAction = ()=>{
     const { editor, toolbarActionPlugins } = useRichTextEditor();
     const [imageActionPlugin, setImageActionPlugin] = useState();
@@ -26,8 +27,8 @@ const ImageAction = ()=>{
         onClick: ()=>handleClick(),
         className: "popup-item",
         "aria-label": "Insert image"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon insert-image"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "icon"
     }));
 };
 export { ImageAction };

package/components/ToolbarActions/ImageAction.js.map

@@ -1 +1 @@
-{"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"}
+{"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\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\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            <ImageIcon className=\"icon\" />\n        </button>\n    );\n};\n"],"names":["ImageAction","editor","toolbarActionPlugins","useRichTextEditor","imageActionPlugin","setImageActionPlugin","useState","useEffect","actionPlugin","action","handleClick","cb","data","imagePayload","fileToImagePayload","INSERT_IMAGE_COMMAND","ImageIcon"],"mappings":";;;;;AAUO,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,oBAACM,gBAASA;QAAC,WAAU;;AAGjC"}

package/components/ToolbarActions/ItalicAction.js

@@ -2,6 +2,8 @@ import react from "react";
 import { FORMAT_TEXT_COMMAND } from "lexical";
 import { useCurrentSelection } from "../../hooks/useCurrentSelection.js";
 import { useRichTextEditor } from "../../hooks/index.js";
+import { ReactComponent } from "@webiny/icons/format_italic.svg";
+import clsx from "clsx";
 const ItalicAction = ()=>{
     const { editor } = useRichTextEditor();
     const { rangeSelection } = useCurrentSelection();
@@ -11,10 +13,12 @@ const ItalicAction = ()=>{
     };
     return /*#__PURE__*/ react.createElement("button", {
         onClick: handleClick,
-        className: "popup-item spaced " + (isItalicSelected ? "active" : ""),
+        className: clsx("popup-item", "spaced", {
+            active: isItalicSelected
+        }),
         "aria-label": "Format text as italic"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "format italic"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "format"
     }));
 };
 export { ItalicAction };

package/components/ToolbarActions/ItalicAction.js.map

@@ -1 +1 @@
-{"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"}
+{"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\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport cn from \"clsx\";\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={cn(\"popup-item\", \"spaced\", { active: isItalicSelected })}\n            aria-label=\"Format text as italic\"\n        >\n            <ItalicIcon className=\"format\" />\n        </button>\n    );\n};\n"],"names":["ItalicAction","editor","useRichTextEditor","rangeSelection","useCurrentSelection","isItalicSelected","handleClick","FORMAT_TEXT_COMMAND","cn","ItalicIcon"],"mappings":";;;;;;AAOO,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,WAAWE,KAAG,cAAc,UAAU;YAAE,QAAQH;QAAiB;QACjE,cAAW;qBAEX,oBAACI,gBAAUA;QAAC,WAAU;;AAGlC"}

package/components/ToolbarActions/LinkAction.js

@@ -3,6 +3,8 @@ 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";
+import { ReactComponent } from "@webiny/icons/link.svg";
+import clsx from "clsx";
 const LinkAction = ()=>{
     const { editor } = useRichTextEditor();
     const isLink = useDeriveValueFromSelection(({ rangeSelection })=>{
@@ -21,10 +23,12 @@ const LinkAction = ()=>{
     ]);
     return /*#__PURE__*/ react.createElement("button", {
         onClick: insertLink,
-        className: "popup-item spaced " + (isLink ? "active" : ""),
+        className: clsx("popup-item", "spaced", {
+            active: isLink
+        }),
         "aria-label": "Insert link"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "format link"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "format"
     }));
 };
 export { LinkAction };

package/components/ToolbarActions/LinkAction.js.map

@@ -1 +1 @@
-{"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"}
+{"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\";\nimport { ReactComponent as LinkIcon } from \"@webiny/icons/link.svg\";\nimport cn from \"clsx\";\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={cn(\"popup-item\", \"spaced\", { active: isLink })}\n            aria-label=\"Insert link\"\n        >\n            <LinkIcon className=\"format\" />\n        </button>\n    );\n};\n"],"names":["LinkAction","editor","useRichTextEditor","isLink","useDeriveValueFromSelection","rangeSelection","node","getNodeFromSelection","$isLinkNode","insertLink","useCallback","TOGGLE_LINK_COMMAND","cn","LinkIcon"],"mappings":";;;;;;;AAQO,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,WAAWG,KAAG,cAAc,UAAU;YAAE,QAAQT;QAAO;QACvD,cAAW;qBAEX,oBAACU,gBAAQA;QAAC,WAAU;;AAGhC"}

package/components/ToolbarActions/NumberedListAction.js

@@ -3,6 +3,8 @@ 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";
+import { ReactComponent } from "@webiny/icons/format_list_numbered.svg";
+import clsx from "clsx";
 const NumberedListAction = ()=>{
     const { element } = useCurrentElement();
     const { editor, theme } = useRichTextEditor();
@@ -24,10 +26,12 @@ const NumberedListAction = ()=>{
     };
     return /*#__PURE__*/ react.createElement("button", {
         onClick: ()=>formatNumberedList(),
-        className: "popup-item spaced " + (isNumbered ? "active" : ""),
+        className: clsx("popup-item", "spaced", {
+            active: isNumbered
+        }),
         "aria-label": "Format text as numbered list"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon numbered-list"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "icon"
     }));
 };
 export { NumberedListAction };

package/components/ToolbarActions/NumberedListAction.js.map

@@ -1 +1 @@
-{"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"}
+{"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\";\nimport { ReactComponent as NumberedListIcon } from \"@webiny/icons/format_list_numbered.svg\";\nimport cn from \"clsx\";\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={cn(\"popup-item\", \"spaced\", { active: isNumbered })}\n            aria-label=\"Format text as numbered list\"\n        >\n            <NumberedListIcon className=\"icon\" />\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","cn","NumberedListIcon"],"mappings":";;;;;;;AASO,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,WAAWK,KAAG,cAAc,UAAU;YAAE,QAAQR;QAAW;QAC3D,cAAW;qBAEX,oBAACS,gBAAgBA;QAAC,WAAU;;AAGxC"}

package/components/ToolbarActions/QuoteAction.js

@@ -2,6 +2,8 @@ import react from "react";
 import { $isQuoteNode, formatToParagraph, formatToQuote } from "@webiny/lexical-nodes";
 import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
 import { useCurrentElement } from "../../hooks/useCurrentElement.js";
+import { ReactComponent } from "@webiny/icons/format_quote.svg";
+import clsx from "clsx";
 const QUOTE_TAG = "quote";
 const QuoteAction = ()=>{
     const { editor, theme } = useRichTextEditor();
@@ -17,10 +19,12 @@ const QuoteAction = ()=>{
     };
     return /*#__PURE__*/ react.createElement("button", {
         onClick: formatText,
-        className: "popup-item " + (isQuote ? "active" : ""),
+        className: clsx("popup-item", {
+            active: isQuote
+        }),
         "aria-label": "Format text as quote"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon quote"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "icon"
     }));
 };
 export { QuoteAction };

package/components/ToolbarActions/QuoteAction.js.map

@@ -1 +1 @@
-{"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"}
+{"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\";\nimport { ReactComponent as QuoteIcon } from \"@webiny/icons/format_quote.svg\";\nimport cn from \"clsx\";\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={cn(\"popup-item\", { active: isQuote })}\n            aria-label=\"Format text as quote\"\n        >\n            <QuoteIcon className=\"icon\" />\n        </button>\n    );\n};\n"],"names":["QUOTE_TAG","QuoteAction","editor","theme","useRichTextEditor","element","useCurrentElement","isQuote","$isQuoteNode","formatText","hasQuoteStyles","formatToQuote","undefined","formatToParagraph","cn","QuoteIcon"],"mappings":";;;;;;AAOA,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,WAAWK,KAAG,cAAc;YAAE,QAAQP;QAAQ;QAC9C,cAAW;qBAEX,oBAACQ,gBAASA;QAAC,WAAU;;AAGjC"}

package/components/ToolbarActions/UnderlineAction.js

@@ -1,6 +1,8 @@
 import react from "react";
 import { FORMAT_TEXT_COMMAND } from "lexical";
 import { useCurrentSelection, useRichTextEditor } from "../../hooks/index.js";
+import { ReactComponent } from "@webiny/icons/format_underlined.svg";
+import clsx from "clsx";
 const UnderlineAction = ()=>{
     const { editor } = useRichTextEditor();
     const { rangeSelection } = useCurrentSelection();
@@ -10,10 +12,12 @@ const UnderlineAction = ()=>{
     };
     return /*#__PURE__*/ react.createElement("button", {
         onClick: handleClick,
-        className: "popup-item spaced " + (isUnderlineSelected ? "active" : ""),
+        className: clsx("popup-item", "spaced", {
+            active: isUnderlineSelected
+        }),
         "aria-label": "Underline text"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "format underline"
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "format"
     }));
 };
 export { UnderlineAction };

package/components/ToolbarActions/UnderlineAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ToolbarActions/UnderlineAction.js","sources":["../../../src/components/ToolbarActions/UnderlineAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection, useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const UnderlineAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat(\"underline\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isUnderlineSelected ? \"active\" : \"\")}\n            aria-label=\"Underline text\"\n        >\n            <i className=\"format underline\" />\n        </button>\n    );\n};\n"],"names":["UnderlineAction","editor","useRichTextEditor","rangeSelection","useCurrentSelection","isUnderlineSelected","handleClick","FORMAT_TEXT_COMMAND"],"mappings":";;;AAIO,MAAMA,kBAAkB;IAC3B,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,sBAAsBF,iBAAiBA,eAAe,SAAS,CAAC,eAAe;IAErF,MAAMG,cAAc;QAChBL,OAAO,eAAe,CAACM,qBAAqB;IAChD;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAASD;QACT,WAAW,uBAAwBD,CAAAA,sBAAsB,WAAW,EAAC;QACrE,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}
+{"version":3,"file":"components/ToolbarActions/UnderlineAction.js","sources":["../../../src/components/ToolbarActions/UnderlineAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection, useRichTextEditor } from \"~/hooks/index.js\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport cn from \"clsx\";\n\nexport const UnderlineAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isUnderlineSelected = rangeSelection ? rangeSelection.hasFormat(\"underline\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"underline\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={cn(\"popup-item\", \"spaced\", { active: isUnderlineSelected })}\n            aria-label=\"Underline text\"\n        >\n            <UnderlineIcon className=\"format\" />\n        </button>\n    );\n};\n"],"names":["UnderlineAction","editor","useRichTextEditor","rangeSelection","useCurrentSelection","isUnderlineSelected","handleClick","FORMAT_TEXT_COMMAND","cn","UnderlineIcon"],"mappings":";;;;;AAMO,MAAMA,kBAAkB;IAC3B,MAAM,EAAEC,MAAM,EAAE,GAAGC;IACnB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAC3B,MAAMC,sBAAsBF,iBAAiBA,eAAe,SAAS,CAAC,eAAe;IAErF,MAAMG,cAAc;QAChBL,OAAO,eAAe,CAACM,qBAAqB;IAChD;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,SAASD;QACT,WAAWE,KAAG,cAAc,UAAU;YAAE,QAAQH;QAAoB;QACpE,cAAW;qBAEX,oBAACI,gBAAaA;QAAC,WAAU;;AAGrC"}

package/hooks/useCurrentElement.d.ts

@@ -2,6 +2,6 @@ import type { RangeSelection } from "lexical";
 export declare function useCurrentElement(): {
     element: null;
 } | {
-    element: import("lexical").TextNode | import("lexical").LexicalNode;
+    element: import("lexical").LexicalNode;
 };
-export declare function getNodeFromSelection(selection: RangeSelection): import("lexical").TextNode | import("lexical").LexicalNode;
+export declare function getNodeFromSelection(selection: RangeSelection): import("lexical").LexicalNode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/lexical-editor",
-	"version": "6.4.11",
+	"version": "6.6.0-alpha.1",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -12,25 +12,27 @@
 	},
 	"license": "MIT",
 	"dependencies": {
-		"@lexical/code": "0.46.0",
-		"@lexical/history": "0.46.0",
-		"@lexical/react": "0.46.0",
-		"@lexical/rich-text": "0.46.0",
-		"@lexical/selection": "0.46.0",
-		"@lexical/text": "0.46.0",
-		"@lexical/utils": "0.46.0",
-		"@webiny/lexical-nodes": "6.4.11",
-		"@webiny/lexical-theme": "6.4.11",
-		"@webiny/react-composition": "6.4.11",
-		"@webiny/react-properties": "6.4.11",
-		"lexical": "0.46.0",
+		"@lexical/code": "0.49.0",
+		"@lexical/history": "0.49.0",
+		"@lexical/react": "0.49.0",
+		"@lexical/rich-text": "0.49.0",
+		"@lexical/selection": "0.49.0",
+		"@lexical/text": "0.49.0",
+		"@lexical/utils": "0.49.0",
+		"@webiny/icons": "6.6.0-alpha.1",
+		"@webiny/lexical-nodes": "6.6.0-alpha.1",
+		"@webiny/lexical-theme": "6.6.0-alpha.1",
+		"@webiny/react-composition": "6.6.0-alpha.1",
+		"@webiny/react-properties": "6.6.0-alpha.1",
+		"clsx": "2.1.1",
+		"lexical": "0.49.0",
 		"lodash": "4.18.1",
-		"radix-ui": "1.6.2",
+		"radix-ui": "1.6.7",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
-		"@webiny/build-tools": "6.4.11"
+		"@webiny/build-tools": "6.6.0-alpha.1"
 	},
 	"publishConfig": {
 		"access": "public"

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js

@@ -30,7 +30,7 @@ const FloatingLinkEditorController = (props)=>{
             if (!isChildOfLinkEditor(payload.relatedTarget)) setIsLink(false);
             return false;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(TOGGLE_LINK_COMMAND, (payload)=>{
-            setIsLink(!!payload);
+            setIsLink(!!payload && $isRangeSelection($getSelection()));
             return false;
         }, COMMAND_PRIORITY_CRITICAL)), [
         editor,

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js","sources":["../../../src/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.tsx"],"sourcesContent":["import React, { useCallback, useState, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor.js\";\nimport debounce from \"lodash/debounce.js\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_CRITICAL,\n    COMMAND_PRIORITY_LOW,\n    SELECTION_CHANGE_COMMAND,\n    mergeRegister,\n    $findMatchingParent\n} from \"lexical\";\nimport { FloatingLinkEditor } from \"./FloatingLinkEditor.js\";\nimport { LinkFormProps } from \"./types.js\";\n\ninterface FloatingLinkEditorProps {\n    LinkForm: React.FunctionComponent<LinkFormProps>;\n}\n\nexport const FloatingLinkEditorController = (props: FloatingLinkEditorProps) => {\n    const { editor, getOverlaysElement } = useRichTextEditor();\n    const [isLink, setIsLink] = useState(false);\n\n    const debounceSetIsLink = useCallback(debounce(setIsLink, 50), []);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if (!$isRangeSelection(selection)) {\n            return;\n        }\n\n        const node = getSelectedNode(selection);\n        const linkParent = $findMatchingParent(node, $isLinkNode);\n        const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);\n        const isLinkOrChildOfLink = Boolean($isLinkNode(node) || linkParent);\n\n        if (!isLinkOrChildOfLink) {\n            // When hiding the toolbar, we want to hide immediately.\n            setIsLink(false);\n        }\n\n        if (selection.dirty) {\n            // We don't want this menu to open for auto links.\n            if (linkParent != null && autoLinkParent == null) {\n                // When showing the toolbar, we want to debounce it, because sometimes selection gets updated\n                // multiple times, and the `selection.dirty` flag goes from true to false multiple times,\n                // eventually settling on `false`, which we want to set once it has settled.\n                debounceSetIsLink(true);\n            }\n        }\n    }, []);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            ),\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n                        setIsLink(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                TOGGLE_LINK_COMMAND,\n                payload => {\n                    setIsLink(!!payload);\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            )\n        );\n    }, [editor, updateToolbar]);\n\n    return createPortal(\n        <FloatingLinkEditor isVisible={isLink} editor={editor} LinkForm={props.LinkForm} />,\n        getOverlaysElement()\n    );\n};\n"],"names":["FloatingLinkEditorController","props","editor","getOverlaysElement","useRichTextEditor","isLink","setIsLink","useState","debounceSetIsLink","useCallback","debounce","updateToolbar","selection","$getSelection","$isRangeSelection","node","getSelectedNode","linkParent","$findMatchingParent","$isLinkNode","autoLinkParent","$isAutoLinkNode","isLinkOrChildOfLink","Boolean","useEffect","mergeRegister","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_CRITICAL","BLUR_COMMAND","payload","isChildOfLinkEditor","COMMAND_PRIORITY_LOW","TOGGLE_LINK_COMMAND","createPortal","FloatingLinkEditor"],"mappings":";;;;;;;;;AAwBO,MAAMA,+BAA+B,CAACC;IACzC,MAAM,EAAEC,MAAM,EAAEC,kBAAkB,EAAE,GAAGC;IACvC,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IAErC,MAAMC,oBAAoBC,YAAYC,SAASJ,WAAW,KAAK,EAAE;IAEjE,MAAMK,gBAAgBF,YAAY;QAC9B,MAAMG,YAAYC;QAClB,IAAI,CAACC,kBAAkBF,YACnB;QAGJ,MAAMG,OAAOC,gBAAgBJ;QAC7B,MAAMK,aAAaC,oBAAoBH,MAAMI;QAC7C,MAAMC,iBAAiBF,oBAAoBH,MAAMM;QACjD,MAAMC,sBAAsBC,QAAQJ,YAAYJ,SAASE;QAEzD,IAAI,CAACK,qBAEDhB,UAAU;QAGd,IAAIM,UAAU,KAAK,EAEf;YAAA,IAAIK,AAAc,QAAdA,cAAsBG,AAAkB,QAAlBA,gBAItBZ,kBAAkB;QACtB;IAER,GAAG,EAAE;IAELgB,UAAU,IACCC,cACHvB,OAAO,eAAe,CAClBwB,0BACA;YACIf;YACA,OAAO;QACX,GACAgB,4BAEJzB,OAAO,eAAe,CAClB0B,cACAC,CAAAA;YACI,IAAI,CAACC,oBAAoBD,QAAQ,aAAa,GAC1CvB,UAAU;YAGd,OAAO;QACX,GACAyB,uBAEJ7B,OAAO,eAAe,CAClB8B,qBACAH,CAAAA;YACIvB,UAAU,CAAC,CAACuB;YACZ,OAAO;QACX,GACAF,6BAGT;QAACzB;QAAQS;KAAc;IAE1B,OAAO,WAAP,GAAOsB,aAAa,WAADA,GACf,oBAACC,oBAAkBA;QAAC,WAAW7B;QAAQ,QAAQH;QAAQ,UAAUD,MAAM,QAAQ;QAC/EE;AAER"}
+{"version":3,"file":"plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.js","sources":["../../../src/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorController.tsx"],"sourcesContent":["import React, { useCallback, useState, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode.js\";\nimport { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor.js\";\nimport debounce from \"lodash/debounce.js\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_CRITICAL,\n    COMMAND_PRIORITY_LOW,\n    SELECTION_CHANGE_COMMAND,\n    mergeRegister,\n    $findMatchingParent\n} from \"lexical\";\nimport { FloatingLinkEditor } from \"./FloatingLinkEditor.js\";\nimport { LinkFormProps } from \"./types.js\";\n\ninterface FloatingLinkEditorProps {\n    LinkForm: React.FunctionComponent<LinkFormProps>;\n}\n\nexport const FloatingLinkEditorController = (props: FloatingLinkEditorProps) => {\n    const { editor, getOverlaysElement } = useRichTextEditor();\n    const [isLink, setIsLink] = useState(false);\n\n    const debounceSetIsLink = useCallback(debounce(setIsLink, 50), []);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if (!$isRangeSelection(selection)) {\n            return;\n        }\n\n        const node = getSelectedNode(selection);\n        const linkParent = $findMatchingParent(node, $isLinkNode);\n        const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);\n        const isLinkOrChildOfLink = Boolean($isLinkNode(node) || linkParent);\n\n        if (!isLinkOrChildOfLink) {\n            // When hiding the toolbar, we want to hide immediately.\n            setIsLink(false);\n        }\n\n        if (selection.dirty) {\n            // We don't want this menu to open for auto links.\n            if (linkParent != null && autoLinkParent == null) {\n                // When showing the toolbar, we want to debounce it, because sometimes selection gets updated\n                // multiple times, and the `selection.dirty` flag goes from true to false multiple times,\n                // eventually settling on `false`, which we want to set once it has settled.\n                debounceSetIsLink(true);\n            }\n        }\n    }, []);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            ),\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n                        setIsLink(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                TOGGLE_LINK_COMMAND,\n                payload => {\n                    // Only open the editor when there's a real range selection inside the\n                    // editor. Otherwise (e.g. the link button clicked with no cursor in the\n                    // editor) there's nothing to anchor to and the dialog jumps to (0, 0).\n                    setIsLink(!!payload && $isRangeSelection($getSelection()));\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            )\n        );\n    }, [editor, updateToolbar]);\n\n    return createPortal(\n        <FloatingLinkEditor isVisible={isLink} editor={editor} LinkForm={props.LinkForm} />,\n        getOverlaysElement()\n    );\n};\n"],"names":["FloatingLinkEditorController","props","editor","getOverlaysElement","useRichTextEditor","isLink","setIsLink","useState","debounceSetIsLink","useCallback","debounce","updateToolbar","selection","$getSelection","$isRangeSelection","node","getSelectedNode","linkParent","$findMatchingParent","$isLinkNode","autoLinkParent","$isAutoLinkNode","isLinkOrChildOfLink","Boolean","useEffect","mergeRegister","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_CRITICAL","BLUR_COMMAND","payload","isChildOfLinkEditor","COMMAND_PRIORITY_LOW","TOGGLE_LINK_COMMAND","createPortal","FloatingLinkEditor"],"mappings":";;;;;;;;;AAwBO,MAAMA,+BAA+B,CAACC;IACzC,MAAM,EAAEC,MAAM,EAAEC,kBAAkB,EAAE,GAAGC;IACvC,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAS;IAErC,MAAMC,oBAAoBC,YAAYC,SAASJ,WAAW,KAAK,EAAE;IAEjE,MAAMK,gBAAgBF,YAAY;QAC9B,MAAMG,YAAYC;QAClB,IAAI,CAACC,kBAAkBF,YACnB;QAGJ,MAAMG,OAAOC,gBAAgBJ;QAC7B,MAAMK,aAAaC,oBAAoBH,MAAMI;QAC7C,MAAMC,iBAAiBF,oBAAoBH,MAAMM;QACjD,MAAMC,sBAAsBC,QAAQJ,YAAYJ,SAASE;QAEzD,IAAI,CAACK,qBAEDhB,UAAU;QAGd,IAAIM,UAAU,KAAK,EAEf;YAAA,IAAIK,AAAc,QAAdA,cAAsBG,AAAkB,QAAlBA,gBAItBZ,kBAAkB;QACtB;IAER,GAAG,EAAE;IAELgB,UAAU,IACCC,cACHvB,OAAO,eAAe,CAClBwB,0BACA;YACIf;YACA,OAAO;QACX,GACAgB,4BAEJzB,OAAO,eAAe,CAClB0B,cACAC,CAAAA;YACI,IAAI,CAACC,oBAAoBD,QAAQ,aAAa,GAC1CvB,UAAU;YAGd,OAAO;QACX,GACAyB,uBAEJ7B,OAAO,eAAe,CAClB8B,qBACAH,CAAAA;YAIIvB,UAAU,CAAC,CAACuB,WAAWf,kBAAkBD;YACzC,OAAO;QACX,GACAc,6BAGT;QAACzB;QAAQS;KAAc;IAE1B,OAAO,WAAP,GAAOsB,aAAa,WAADA,GACf,oBAACC,oBAAkBA;QAAC,WAAW7B;QAAQ,QAAQH;QAAQ,UAAUD,MAAM,QAAQ;QAC/EE;AAER"}

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.css

@@ -4,9 +4,10 @@
   max-width: 400px;
   width: 100%;
   opacity: 0;
-  background-color: #fff;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
+  /* Border-defined like admin-ui menus (no shadow), rounded-md. */
+  background-color: var(--color-neutral-base);
+  border: 1px solid var(--border-color-neutral-muted);
+  border-radius: var(--radius-md);
   pointer-events: all;
 }
 .link-editor .button {

package/ui/DropDown.d.ts

@@ -1,20 +1,22 @@
 import type { ReactNode } from "react";
 import * as React from "react";
-export declare function DropDownItem({ children, className, onClick, title }: {
+export declare function DropDownItem({ children, className, onClick, title, selected }: {
     children: React.ReactNode;
     className: string;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     title?: string;
+    selected?: boolean;
 }): React.JSX.Element;
 interface DropDownProps {
     disabled?: boolean;
     buttonAriaLabel?: string;
     buttonClassName: string;
     buttonIconClassName?: string;
+    buttonIcon?: ReactNode;
     buttonLabel?: string;
     children: ReactNode;
     stopCloseOnClickSelf?: boolean;
     showScroll?: boolean;
 }
-export declare function DropDown({ disabled, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, children, showScroll }: DropDownProps): React.JSX.Element;
+export declare function DropDown({ disabled, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, buttonIcon, children, showScroll }: DropDownProps): React.JSX.Element;
 export {};

package/ui/DropDown.js

@@ -1,14 +1,22 @@
 import { DropdownMenu } from "radix-ui";
+import { ReactComponent } from "@webiny/icons/expand_more.svg";
+import { ReactComponent as check_svg_ReactComponent } from "@webiny/icons/check.svg";
 import * as __rspack_external_react from "react";
-function DropDownItem({ children, className, onClick, title }) {
+function DropDownItem({ children, className, onClick, title, selected }) {
+    const hasCheckSlot = void 0 !== selected;
     return /*#__PURE__*/ __rspack_external_react.createElement("button", {
         className: className,
         onClick: onClick,
         title: title,
         type: "button"
-    }, children);
+    }, hasCheckSlot ? selected ? /*#__PURE__*/ __rspack_external_react.createElement(check_svg_ReactComponent, {
+        className: "item-check"
+    }) : /*#__PURE__*/ __rspack_external_react.createElement("span", {
+        className: "item-check",
+        "aria-hidden": "true"
+    }) : null, children);
 }
-function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, children, showScroll = true }) {
+function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, buttonIcon, children, showScroll = true }) {
     return /*#__PURE__*/ __rspack_external_react.createElement(DropdownMenu.Root, null, /*#__PURE__*/ __rspack_external_react.createElement(DropdownMenu.Trigger, {
         asChild: true
     }, /*#__PURE__*/ __rspack_external_react.createElement("button", {
@@ -18,11 +26,11 @@ function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassN
         disabled: disabled,
         "aria-label": buttonAriaLabel || buttonLabel,
         className: buttonClassName
-    }, buttonIconClassName && /*#__PURE__*/ __rspack_external_react.createElement("span", {
+    }, buttonIcon ? buttonIcon : buttonIconClassName && /*#__PURE__*/ __rspack_external_react.createElement("span", {
         className: buttonIconClassName
     }), buttonLabel && /*#__PURE__*/ __rspack_external_react.createElement("span", {
         className: "text dropdown-button-text"
-    }, buttonLabel), /*#__PURE__*/ __rspack_external_react.createElement("i", {
+    }, buttonLabel), /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, {
         className: "chevron-down"
     }))), /*#__PURE__*/ __rspack_external_react.createElement(DropdownMenu.Portal, null, /*#__PURE__*/ __rspack_external_react.createElement(DropdownMenu.Content, {
         className: `lexical-dropdown z-overlay ${showScroll ? "" : "no-scroll"}`,