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

package/components/LexicalEditorConfig/components/Plugin.js

@@ -1,30 +1,25 @@
-import React from "react";
+import react from "react";
 import { Property } from "@webiny/react-properties";
-export const Plugin = ({
-  name,
-  element,
-  after = undefined,
-  before = undefined,
-  remove = false
-}) => {
-  const placeBefore = before !== undefined ? `plugin:${before}` : undefined;
-  const placeAfter = after !== undefined ? `plugin:${after}` : undefined;
-  return /*#__PURE__*/React.createElement(Property, {
-    id: `plugins:${name}`,
-    name: "plugins",
-    array: true,
-    before: placeBefore,
-    after: placeAfter,
-    remove: remove
-  }, /*#__PURE__*/React.createElement(Property, {
-    id: `plugin:${name}:name`,
-    name: "name",
-    value: name
-  }), element ? /*#__PURE__*/React.createElement(Property, {
-    id: `plugin:${name}:element`,
-    name: "element",
-    value: element
-  }) : null);
+const Plugin = ({ name, element, after, before, remove = false })=>{
+    const placeBefore = void 0 !== before ? `plugin:${before}` : void 0;
+    const placeAfter = void 0 !== after ? `plugin:${after}` : void 0;
+    return /*#__PURE__*/ react.createElement(Property, {
+        id: `plugins:${name}`,
+        name: "plugins",
+        array: true,
+        before: placeBefore,
+        after: placeAfter,
+        remove: remove
+    }, /*#__PURE__*/ react.createElement(Property, {
+        id: `plugin:${name}:name`,
+        name: "name",
+        value: name
+    }), element ? /*#__PURE__*/ react.createElement(Property, {
+        id: `plugin:${name}:element`,
+        name: "element",
+        value: element
+    }) : null);
 };
+export { Plugin };
 
 //# sourceMappingURL=Plugin.js.map

package/components/LexicalEditorConfig/components/Plugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Property","Plugin","name","element","after","undefined","before","remove","placeBefore","placeAfter","createElement","id","array","value"],"sources":["Plugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\n\nexport interface PluginConfig {\n    name: string;\n    element: React.ReactElement;\n}\n\nexport interface PluginProps {\n    name: string;\n    element?: React.ReactElement<unknown>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Plugin = ({\n    name,\n    element,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: PluginProps) => {\n    const placeBefore = before !== undefined ? `plugin:${before}` : undefined;\n    const placeAfter = after !== undefined ? `plugin:${after}` : undefined;\n\n    return (\n        <Property\n            id={`plugins:${name}`}\n            name={\"plugins\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`plugin:${name}:name`} name={\"name\"} value={name} />\n            {element ? (\n                <Property id={`plugin:${name}:element`} name={\"element\"} value={element} />\n            ) : null}\n        </Property>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,0BAA0B;AAenD,OAAO,MAAMC,MAAM,GAAGA,CAAC;EACnBC,IAAI;EACJC,OAAO;EACPC,KAAK,GAAGC,SAAS;EACjBC,MAAM,GAAGD,SAAS;EAClBE,MAAM,GAAG;AACA,CAAC,KAAK;EACf,MAAMC,WAAW,GAAGF,MAAM,KAAKD,SAAS,GAAG,UAAUC,MAAM,EAAE,GAAGD,SAAS;EACzE,MAAMI,UAAU,GAAGL,KAAK,KAAKC,SAAS,GAAG,UAAUD,KAAK,EAAE,GAAGC,SAAS;EAEtE,oBACIN,KAAA,CAAAW,aAAA,CAACV,QAAQ;IACLW,EAAE,EAAE,WAAWT,IAAI,EAAG;IACtBA,IAAI,EAAE,SAAU;IAChBU,KAAK,EAAE,IAAK;IACZN,MAAM,EAAEE,WAAY;IACpBJ,KAAK,EAAEK,UAAW;IAClBF,MAAM,EAAEA;EAAO,gBAEfR,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,UAAUT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEX;EAAK,CAAE,CAAC,EACjEC,OAAO,gBACJJ,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,UAAUT,IAAI,UAAW;IAACA,IAAI,EAAE,SAAU;IAACW,KAAK,EAAEV;EAAQ,CAAE,CAAC,GAC3E,IACE,CAAC;AAEnB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/LexicalEditorConfig/components/Plugin.js","sources":["../../../../src/components/LexicalEditorConfig/components/Plugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\n\nexport interface PluginConfig {\n    name: string;\n    element: React.ReactElement;\n}\n\nexport interface PluginProps {\n    name: string;\n    element?: React.ReactElement<unknown>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Plugin = ({\n    name,\n    element,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: PluginProps) => {\n    const placeBefore = before !== undefined ? `plugin:${before}` : undefined;\n    const placeAfter = after !== undefined ? `plugin:${after}` : undefined;\n\n    return (\n        <Property\n            id={`plugins:${name}`}\n            name={\"plugins\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`plugin:${name}:name`} name={\"name\"} value={name} />\n            {element ? (\n                <Property id={`plugin:${name}:element`} name={\"element\"} value={element} />\n            ) : null}\n        </Property>\n    );\n};\n"],"names":["Plugin","name","element","after","before","remove","placeBefore","undefined","placeAfter","Property"],"mappings":";;AAgBO,MAAMA,SAAS,CAAC,EACnBC,IAAI,EACJC,OAAO,EACPC,KAAiB,EACjBC,MAAkB,EAClBC,SAAS,KAAK,EACJ;IACV,MAAMC,cAAcF,AAAWG,WAAXH,SAAuB,CAAC,OAAO,EAAEA,QAAQ,GAAGG;IAChE,MAAMC,aAAaL,AAAUI,WAAVJ,QAAsB,CAAC,OAAO,EAAEA,OAAO,GAAGI;IAE7D,OAAO,WAAP,GACI,oBAACE,UAAQA;QACL,IAAI,CAAC,QAAQ,EAAER,MAAM;QACrB,MAAM;QACN,OAAO;QACP,QAAQK;QACR,OAAOE;QACP,QAAQH;qBAER,oBAACI,UAAQA;QAAC,IAAI,CAAC,OAAO,EAAER,KAAK,KAAK,CAAC;QAAE,MAAM;QAAQ,OAAOA;QACzDC,UAAU,WAAVA,GACG,oBAACO,UAAQA;QAAC,IAAI,CAAC,OAAO,EAAER,KAAK,QAAQ,CAAC;QAAE,MAAM;QAAW,OAAOC;SAChE;AAGhB"}

package/components/LexicalEditorConfig/components/ToolbarElement.js

@@ -1,30 +1,25 @@
-import React from "react";
+import react from "react";
 import { Property } from "@webiny/react-properties";
-export const ToolbarElement = ({
-  name,
-  element,
-  after = undefined,
-  before = undefined,
-  remove = false
-}) => {
-  const placeBefore = before !== undefined ? `element:${before}` : undefined;
-  const placeAfter = after !== undefined ? `element:${after}` : undefined;
-  return /*#__PURE__*/React.createElement(Property, {
-    id: `element:${name}`,
-    name: "toolbarElements",
-    array: true,
-    before: placeBefore,
-    after: placeAfter,
-    remove: remove
-  }, /*#__PURE__*/React.createElement(Property, {
-    id: `element:${name}:name`,
-    name: "name",
-    value: name
-  }), element ? /*#__PURE__*/React.createElement(Property, {
-    id: `element:${name}:element`,
-    name: "element",
-    value: element
-  }) : null);
+const ToolbarElement = ({ name, element, after, before, remove = false })=>{
+    const placeBefore = void 0 !== before ? `element:${before}` : void 0;
+    const placeAfter = void 0 !== after ? `element:${after}` : void 0;
+    return /*#__PURE__*/ react.createElement(Property, {
+        id: `element:${name}`,
+        name: "toolbarElements",
+        array: true,
+        before: placeBefore,
+        after: placeAfter,
+        remove: remove
+    }, /*#__PURE__*/ react.createElement(Property, {
+        id: `element:${name}:name`,
+        name: "name",
+        value: name
+    }), element ? /*#__PURE__*/ react.createElement(Property, {
+        id: `element:${name}:element`,
+        name: "element",
+        value: element
+    }) : null);
 };
+export { ToolbarElement };
 
 //# sourceMappingURL=ToolbarElement.js.map

package/components/LexicalEditorConfig/components/ToolbarElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Property","ToolbarElement","name","element","after","undefined","before","remove","placeBefore","placeAfter","createElement","id","array","value"],"sources":["ToolbarElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\n\nexport interface ToolbarElementConfig {\n    name: string;\n    element: React.ReactElement;\n}\n\nexport interface ToolbarElementProps {\n    name: string;\n    element?: React.ReactElement<unknown>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const ToolbarElement = ({\n    name,\n    element,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: ToolbarElementProps) => {\n    const placeBefore = before !== undefined ? `element:${before}` : undefined;\n    const placeAfter = after !== undefined ? `element:${after}` : undefined;\n\n    return (\n        <Property\n            id={`element:${name}`}\n            name={\"toolbarElements\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`element:${name}:name`} name={\"name\"} value={name} />\n            {element ? (\n                <Property id={`element:${name}:element`} name={\"element\"} value={element} />\n            ) : null}\n        </Property>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,0BAA0B;AAenD,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC3BC,IAAI;EACJC,OAAO;EACPC,KAAK,GAAGC,SAAS;EACjBC,MAAM,GAAGD,SAAS;EAClBE,MAAM,GAAG;AACQ,CAAC,KAAK;EACvB,MAAMC,WAAW,GAAGF,MAAM,KAAKD,SAAS,GAAG,WAAWC,MAAM,EAAE,GAAGD,SAAS;EAC1E,MAAMI,UAAU,GAAGL,KAAK,KAAKC,SAAS,GAAG,WAAWD,KAAK,EAAE,GAAGC,SAAS;EAEvE,oBACIN,KAAA,CAAAW,aAAA,CAACV,QAAQ;IACLW,EAAE,EAAE,WAAWT,IAAI,EAAG;IACtBA,IAAI,EAAE,iBAAkB;IACxBU,KAAK,EAAE,IAAK;IACZN,MAAM,EAAEE,WAAY;IACpBJ,KAAK,EAAEK,UAAW;IAClBF,MAAM,EAAEA;EAAO,gBAEfR,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,WAAWT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEX;EAAK,CAAE,CAAC,EAClEC,OAAO,gBACJJ,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,WAAWT,IAAI,UAAW;IAACA,IAAI,EAAE,SAAU;IAACW,KAAK,EAAEV;EAAQ,CAAE,CAAC,GAC5E,IACE,CAAC;AAEnB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/LexicalEditorConfig/components/ToolbarElement.js","sources":["../../../../src/components/LexicalEditorConfig/components/ToolbarElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\n\nexport interface ToolbarElementConfig {\n    name: string;\n    element: React.ReactElement;\n}\n\nexport interface ToolbarElementProps {\n    name: string;\n    element?: React.ReactElement<unknown>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const ToolbarElement = ({\n    name,\n    element,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: ToolbarElementProps) => {\n    const placeBefore = before !== undefined ? `element:${before}` : undefined;\n    const placeAfter = after !== undefined ? `element:${after}` : undefined;\n\n    return (\n        <Property\n            id={`element:${name}`}\n            name={\"toolbarElements\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`element:${name}:name`} name={\"name\"} value={name} />\n            {element ? (\n                <Property id={`element:${name}:element`} name={\"element\"} value={element} />\n            ) : null}\n        </Property>\n    );\n};\n"],"names":["ToolbarElement","name","element","after","before","remove","placeBefore","undefined","placeAfter","Property"],"mappings":";;AAgBO,MAAMA,iBAAiB,CAAC,EAC3BC,IAAI,EACJC,OAAO,EACPC,KAAiB,EACjBC,MAAkB,EAClBC,SAAS,KAAK,EACI;IAClB,MAAMC,cAAcF,AAAWG,WAAXH,SAAuB,CAAC,QAAQ,EAAEA,QAAQ,GAAGG;IACjE,MAAMC,aAAaL,AAAUI,WAAVJ,QAAsB,CAAC,QAAQ,EAAEA,OAAO,GAAGI;IAE9D,OAAO,WAAP,GACI,oBAACE,UAAQA;QACL,IAAI,CAAC,QAAQ,EAAER,MAAM;QACrB,MAAM;QACN,OAAO;QACP,QAAQK;QACR,OAAOE;QACP,QAAQH;qBAER,oBAACI,UAAQA;QAAC,IAAI,CAAC,QAAQ,EAAER,KAAK,KAAK,CAAC;QAAE,MAAM;QAAQ,OAAOA;QAC1DC,UAAU,WAAVA,GACG,oBAACO,UAAQA;QAAC,IAAI,CAAC,QAAQ,EAAER,KAAK,QAAQ,CAAC;QAAE,MAAM;QAAW,OAAOC;SACjE;AAGhB"}

package/components/LexicalHtmlRenderer.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import react, { useRef } from "react";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -6,45 +6,40 @@ import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary.js";
 import { allNodes } from "@webiny/lexical-nodes";
 import { RichTextEditorProvider } from "../context/RichTextEditorContext.js";
 import { StateHandlingPlugin } from "../plugins/StateHandlingPlugin.js";
-export const LexicalHtmlRenderer = ({
-  nodes,
-  value,
-  ...props
-}) => {
-  const theme = props.theme;
-  const editorTheme = useRef(theme);
-  const initialConfig = {
-    editorState: null,
-    namespace: "webiny",
-    onError: () => {
-      // Ignore errors. We don't want to break the app because of errors caused by config/value updates.
-      // These are usually resolved in the next component render cycle.
-    },
-    editable: false,
-    nodes: [...allNodes, ...(nodes || [])],
-    theme: {
-      ...editorTheme.current.tokens,
-      // I'm not aware of a better way to pass custom data to nodes.
-      // For now, we're using Lexical's theme to pass colors and typography.
-      $colors: editorTheme.current.colors,
-      $typography: editorTheme.current.typography,
-      $cacheKey: JSON.stringify(editorTheme.current)
-    }
-  };
-  return /*#__PURE__*/React.createElement(LexicalComposer, {
-    initialConfig: initialConfig,
-    key: initialConfig.nodes.length
-  }, /*#__PURE__*/React.createElement(RichTextEditorProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement("div", {
-      className: "editor"
-    }, /*#__PURE__*/React.createElement(ContentEditable, null)),
-    ErrorBoundary: LexicalErrorBoundary,
-    placeholder: null
-  }), /*#__PURE__*/React.createElement(StateHandlingPlugin, {
-    value: value
-  })));
+const LexicalHtmlRenderer = ({ nodes, value, ...props })=>{
+    const theme = props.theme;
+    const editorTheme = useRef(theme);
+    const initialConfig = {
+        editorState: null,
+        namespace: "webiny",
+        onError: ()=>{},
+        editable: false,
+        nodes: [
+            ...allNodes,
+            ...nodes || []
+        ],
+        theme: {
+            ...editorTheme.current.tokens,
+            $colors: editorTheme.current.colors,
+            $typography: editorTheme.current.typography,
+            $cacheKey: JSON.stringify(editorTheme.current)
+        }
+    };
+    return /*#__PURE__*/ react.createElement(LexicalComposer, {
+        initialConfig: initialConfig,
+        key: initialConfig.nodes.length
+    }, /*#__PURE__*/ react.createElement(RichTextEditorProvider, {
+        theme: theme
+    }, /*#__PURE__*/ react.createElement(RichTextPlugin, {
+        contentEditable: /*#__PURE__*/ react.createElement("div", {
+            className: "editor"
+        }, /*#__PURE__*/ react.createElement(ContentEditable, null)),
+        ErrorBoundary: LexicalErrorBoundary,
+        placeholder: null
+    }), /*#__PURE__*/ react.createElement(StateHandlingPlugin, {
+        value: value
+    })));
 };
+export { LexicalHtmlRenderer };
 
 //# sourceMappingURL=LexicalHtmlRenderer.js.map

package/components/LexicalHtmlRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","LexicalComposer","RichTextPlugin","ContentEditable","LexicalErrorBoundary","allNodes","RichTextEditorProvider","StateHandlingPlugin","LexicalHtmlRenderer","nodes","value","props","theme","editorTheme","initialConfig","editorState","namespace","onError","editable","current","tokens","$colors","colors","$typography","typography","$cacheKey","JSON","stringify","createElement","key","length","contentEditable","className","ErrorBoundary","placeholder"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary.js\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport type { LexicalValue } from \"~/types.js\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: EditorTheme;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = props.theme;\n    const editorTheme = useRef(theme);\n\n    const initialConfig = {\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: {\n            ...editorTheme.current.tokens,\n            // I'm not aware of a better way to pass custom data to nodes.\n            // For now, we're using Lexical's theme to pass colors and typography.\n            $colors: editorTheme.current.colors,\n            $typography: editorTheme.current.typography,\n            $cacheKey: JSON.stringify(editorTheme.current)\n        }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <StateHandlingPlugin value={value} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAErC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,sCAAsC;AACrE,SAASC,eAAe,QAAQ,uCAAuC;AACvE,SAASC,oBAAoB,QAAQ,wCAAwC;AAC7E,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAQ5B,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACzF,MAAMC,KAAkB,GAAGD,KAAK,CAACC,KAAK;EACtC,MAAMC,WAAW,GAAGb,MAAM,CAACY,KAAK,CAAC;EAEjC,MAAME,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAEA,CAAA,KAAM;MACX;MACA;IAAA,CACH;IACDC,QAAQ,EAAE,KAAK;IACfT,KAAK,EAAE,CAAC,GAAGJ,QAAQ,EAAE,IAAII,KAAK,IAAI,EAAE,CAAC,CAAC;IACtCG,KAAK,EAAE;MACH,GAAGC,WAAW,CAACM,OAAO,CAACC,MAAM;MAC7B;MACA;MACAC,OAAO,EAAER,WAAW,CAACM,OAAO,CAACG,MAAM;MACnCC,WAAW,EAAEV,WAAW,CAACM,OAAO,CAACK,UAAU;MAC3CC,SAAS,EAAEC,IAAI,CAACC,SAAS,CAACd,WAAW,CAACM,OAAO;IACjD;EACJ,CAAC;EAED,oBACIpB,KAAA,CAAA6B,aAAA,CAAC3B,eAAe;IAACa,aAAa,EAAEA,aAAc;IAACe,GAAG,EAAEf,aAAa,CAACL,KAAK,CAACqB;EAAO,gBAC3E/B,KAAA,CAAA6B,aAAA,CAACtB,sBAAsB;IAACM,KAAK,EAAEA;EAAM,gBACjCb,KAAA,CAAA6B,aAAA,CAAC1B,cAAc;IACX6B,eAAe,eACXhC,KAAA,CAAA6B,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBjC,KAAA,CAAA6B,aAAA,CAACzB,eAAe,MAAE,CACjB,CACR;IACD8B,aAAa,EAAE7B,oBAAqB;IACpC8B,WAAW,EAAE;EAAK,CACrB,CAAC,eACFnC,KAAA,CAAA6B,aAAA,CAACrB,mBAAmB;IAACG,KAAK,EAAEA;EAAM,CAAE,CAChB,CACX,CAAC;AAE1B,CAAC","ignoreList":[]}
+{"version":3,"file":"components/LexicalHtmlRenderer.js","sources":["../../src/components/LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary.js\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport type { LexicalValue } from \"~/types.js\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: EditorTheme;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = props.theme;\n    const editorTheme = useRef(theme);\n\n    const initialConfig = {\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: {\n            ...editorTheme.current.tokens,\n            // I'm not aware of a better way to pass custom data to nodes.\n            // For now, we're using Lexical's theme to pass colors and typography.\n            $colors: editorTheme.current.colors,\n            $typography: editorTheme.current.typography,\n            $cacheKey: JSON.stringify(editorTheme.current)\n        }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <StateHandlingPlugin value={value} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"names":["LexicalHtmlRenderer","nodes","value","props","theme","editorTheme","useRef","initialConfig","allNodes","JSON","LexicalComposer","RichTextEditorProvider","RichTextPlugin","ContentEditable","LexicalErrorBoundary","StateHandlingPlugin"],"mappings":";;;;;;;;AAkBO,MAAMA,sBAAsB,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,OAAiC;IACpF,MAAMC,QAAqBD,MAAM,KAAK;IACtC,MAAME,cAAcC,OAAOF;IAE3B,MAAMG,gBAAgB;QAClB,aAAa;QACb,WAAW;QACX,SAAS,KAGT;QACA,UAAU;QACV,OAAO;eAAIC;eAAcP,SAAS,EAAE;SAAE;QACtC,OAAO;YACH,GAAGI,YAAY,OAAO,CAAC,MAAM;YAG7B,SAASA,YAAY,OAAO,CAAC,MAAM;YACnC,aAAaA,YAAY,OAAO,CAAC,UAAU;YAC3C,WAAWI,KAAK,SAAS,CAACJ,YAAY,OAAO;QACjD;IACJ;IAEA,OAAO,WAAP,GACI,oBAACK,iBAAeA;QAAC,eAAeH;QAAe,KAAKA,cAAc,KAAK,CAAC,MAAM;qBAC1E,oBAACI,wBAAsBA;QAAC,OAAOP;qBAC3B,oBAACQ,gBAAcA;QACX,+BACI,oBAAC;YAAI,WAAU;yBACX,oBAACC,iBAAeA;QAGxB,eAAeC;QACf,aAAa;sBAEjB,oBAACC,qBAAmBA;QAAC,OAAOb;;AAI5C"}

package/components/Toolbar/StaticToolbar.js

@@ -1,22 +1,17 @@
-import React, { Fragment } from "react";
+import react, { Fragment } from "react";
 import "./StaticToolbar.css";
 import { useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig.js";
 import { useRichTextEditor } from "../../hooks/index.js";
-export const StaticToolbar = ({
-  className
-}) => {
-  const {
-    toolbarElements
-  } = useLexicalEditorConfig();
-  const {
-    editor
-  } = useRichTextEditor();
-  return /*#__PURE__*/React.createElement("div", {
-    className: className ?? "static-toolbar",
-    "data-role": "toolbar"
-  }, editor.isEditable() && /*#__PURE__*/React.createElement(React.Fragment, null, toolbarElements.map(action => /*#__PURE__*/React.createElement(Fragment, {
-    key: action.name
-  }, action.element))));
+const StaticToolbar = ({ className })=>{
+    const { toolbarElements } = useLexicalEditorConfig();
+    const { editor } = useRichTextEditor();
+    return /*#__PURE__*/ react.createElement("div", {
+        className: className ?? "static-toolbar",
+        "data-role": "toolbar"
+    }, editor.isEditable() && /*#__PURE__*/ react.createElement(react.Fragment, null, toolbarElements.map((action)=>/*#__PURE__*/ react.createElement(Fragment, {
+            key: action.name
+        }, action.element))));
 };
+export { StaticToolbar };
 
 //# sourceMappingURL=StaticToolbar.js.map

package/components/Toolbar/StaticToolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","useLexicalEditorConfig","useRichTextEditor","StaticToolbar","className","toolbarElements","editor","createElement","isEditable","map","action","key","name","element"],"sources":["StaticToolbar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport \"./StaticToolbar.css\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const StaticToolbar = ({ className }: { className?: string }) => {\n    const { toolbarElements } = useLexicalEditorConfig();\n    const { editor } = useRichTextEditor();\n\n    return (\n        <div className={className ?? \"static-toolbar\"} data-role={\"toolbar\"}>\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC;AACA,SAASC,sBAAsB;AAC/B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAK;EACpE,MAAM;IAAEC;EAAgB,CAAC,GAAGJ,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEK;EAAO,CAAC,GAAGJ,iBAAiB,CAAC,CAAC;EAEtC,oBACIH,KAAA,CAAAQ,aAAA;IAAKH,SAAS,EAAEA,SAAS,IAAI,gBAAiB;IAAC,aAAW;EAAU,GAC/DE,MAAM,CAACE,UAAU,CAAC,CAAC,iBAChBT,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAC,QAAA,QACKK,eAAe,CAACI,GAAG,CAACC,MAAM,iBACvBX,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACW,GAAG,EAAED,MAAM,CAACE;EAAK,GAAEF,MAAM,CAACG,OAAkB,CACzD,CACH,CAEL,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"components/Toolbar/StaticToolbar.js","sources":["../../../src/components/Toolbar/StaticToolbar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport \"./StaticToolbar.css\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const StaticToolbar = ({ className }: { className?: string }) => {\n    const { toolbarElements } = useLexicalEditorConfig();\n    const { editor } = useRichTextEditor();\n\n    return (\n        <div className={className ?? \"static-toolbar\"} data-role={\"toolbar\"}>\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n"],"names":["StaticToolbar","className","toolbarElements","useLexicalEditorConfig","editor","useRichTextEditor","action","Fragment"],"mappings":";;;;AAKO,MAAMA,gBAAgB,CAAC,EAAEC,SAAS,EAA0B;IAC/D,MAAM,EAAEC,eAAe,EAAE,GAAGC;IAC5B,MAAM,EAAEC,MAAM,EAAE,GAAGC;IAEnB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAWJ,aAAa;QAAkB,aAAW;OACrDG,OAAO,UAAU,MAAM,WAAN,GACd,0CACKF,gBAAgB,GAAG,CAACI,CAAAA,SAAAA,WAAAA,GACjB,oBAACC,UAAQA;YAAC,KAAKD,OAAO,IAAI;WAAGA,OAAO,OAAO;AAMnE"}

package/components/ToolbarActions/BoldAction.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 BoldAction = () => {
-  const {
-    editor
-  } = useRichTextEditor();
-  const {
-    rangeSelection
-  } = useCurrentSelection();
-  const isBoldSelected = rangeSelection ? rangeSelection.hasFormat("bold") : false;
-  const handleClick = () => {
-    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-  };
-  return /*#__PURE__*/React.createElement("button", {
-    onClick: handleClick,
-    className: "popup-item spaced " + (isBoldSelected ? "active" : ""),
-    "aria-label": "Format text as bold"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "format bold"
-  }));
+const BoldAction = ()=>{
+    const { editor } = useRichTextEditor();
+    const { rangeSelection } = useCurrentSelection();
+    const isBoldSelected = rangeSelection ? rangeSelection.hasFormat("bold") : false;
+    const handleClick = ()=>{
+        editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+    };
+    return /*#__PURE__*/ react.createElement("button", {
+        onClick: handleClick,
+        className: "popup-item spaced " + (isBoldSelected ? "active" : ""),
+        "aria-label": "Format text as bold"
+    }, /*#__PURE__*/ react.createElement("i", {
+        className: "format bold"
+    }));
 };
+export { BoldAction };
 
 //# sourceMappingURL=BoldAction.js.map

package/components/ToolbarActions/BoldAction.js.map

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

package/components/ToolbarActions/BulletListAction.js

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

package/components/ToolbarActions/BulletListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","INSERT_UNORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","$isListNode","useCurrentElement","BulletListAction","editor","element","theme","isList","isBullet","getListType","formatBulletList","styleId","getTypographyByTag","id","dispatchCommand","themeStyleId","undefined","createElement","onClick","className"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,6BAA6B,EAAEC,mBAAmB;AAC3D,SAASC,iBAAiB;AAE1B,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGJ,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEK;EAAQ,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEI;EAAM,CAAC,GAAGN,iBAAiB,CAAC,CAAC;EACrC,MAAMO,MAAM,GAAGN,WAAW,CAACI,OAAO,CAAC;EAEnC,MAAMG,QAAQ,GAAGD,MAAM,IAAKF,OAAO,CAAcI,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,MAAMG,OAAO,GAAGL,KAAK,CAACM,kBAAkB,CAAC,IAAI,CAAC,EAAEC,EAAE;;MAElD;MACAT,MAAM,CAACU,eAAe,CAAChB,6BAA6B,EAAE;QAAEiB,YAAY,EAAEJ;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHP,MAAM,CAACU,eAAe,CAACf,mBAAmB,EAAEiB,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACInB,KAAA,CAAAoB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAMR,gBAAgB,CAAC,CAAE;IAClCS,SAAS,EAAE,oBAAoB,IAAIX,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCX,KAAA,CAAAoB,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"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"}

package/components/ToolbarActions/CodeHighlightAction.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 CodeHighlightAction = () => {
-  const {
-    editor
-  } = useRichTextEditor();
-  const {
-    rangeSelection
-  } = useCurrentSelection();
-  const isCodeSelected = rangeSelection ? rangeSelection.hasFormat("code") : false;
-  const handleClick = () => {
-    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
-  };
-  return /*#__PURE__*/React.createElement("button", {
-    onClick: handleClick,
-    className: "popup-item spaced " + (isCodeSelected ? "active" : ""),
-    "aria-label": "Text code highlight"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "format code"
-  }));
+const CodeHighlightAction = ()=>{
+    const { editor } = useRichTextEditor();
+    const { rangeSelection } = useCurrentSelection();
+    const isCodeSelected = rangeSelection ? rangeSelection.hasFormat("code") : false;
+    const handleClick = ()=>{
+        editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+    };
+    return /*#__PURE__*/ react.createElement("button", {
+        onClick: handleClick,
+        className: "popup-item spaced " + (isCodeSelected ? "active" : ""),
+        "aria-label": "Text code highlight"
+    }, /*#__PURE__*/ react.createElement("i", {
+        className: "format code"
+    }));
 };
+export { CodeHighlightAction };
 
 //# sourceMappingURL=CodeHighlightAction.js.map

package/components/ToolbarActions/CodeHighlightAction.js.map

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

package/components/ToolbarActions/FontColorAction.js

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