@webiny/lexical-editor 0.0.0-unstable.d65ec29d44 → 0.0.0-unstable.da99e0b846

package/components/AddRichTextEditorNodeType.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactComposition","_RichTextEditor","_excluded","AddRichTextEditorNodeType","_ref","type","NodePlugin","createComponentPlugin","RichTextEditor","Original","_ref2","nodes","children","rest","_objectWithoutProperties2","default","createElement","Object","assign","concat","_toConsumableArray2","exports"],"sources":["AddRichTextEditorNodeType.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\n\nexport interface AddRichTextEditorNodeTypeProps {\n    type: Klass<LexicalNode>;\n}\n\nexport const AddRichTextEditorNodeType: FC<AddRichTextEditorNodeTypeProps> = ({ type }) => {\n    const NodePlugin = createComponentPlugin(RichTextEditor, Original => {\n        return function RichTextEditor({ nodes, children, ...rest }): JSX.Element {\n            return (\n                <Original {...rest} nodes={[...(nodes || []), type]}>\n                    {children}\n                </Original>\n            );\n        };\n    });\n\n    return <NodePlugin />;\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAAoE,IAAAG,SAAA;AAM7D,IAAMC,yBAA6D,GAAG,SAAhEA,yBAA6DA,CAAAC,IAAA,EAAiB;EAAA,IAAXC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAChF,IAAMC,UAAU,GAAG,IAAAC,uCAAqB,EAACC,8BAAc,EAAE,UAAAC,QAAQ,EAAI;IACjE,OAAO,SAASD,cAAcA,CAAAE,KAAA,EAA4C;MAAA,IAAzCC,KAAK,GAAAD,KAAA,CAALC,KAAK;QAAEC,QAAQ,GAAAF,KAAA,CAARE,QAAQ;QAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,KAAA,EAAAR,SAAA;MACrD,oBACIL,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACP,QAAQ,EAAAQ,MAAA,CAAAC,MAAA,KAAKL,IAAI;QAAEF,KAAK,KAAAQ,MAAA,KAAAC,mBAAA,CAAAL,OAAA,EAAOJ,KAAK,IAAI,EAAE,IAAGN,IAAI;MAAE,IAC/CO,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC;EAEF,oBAAOf,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACV,UAAU,OAAG;AACzB,CAAC;AAACe,OAAA,CAAAlB,yBAAA,GAAAA,yBAAA"}
+{"version":3,"names":["AddRichTextEditorNodeType","type","NodePlugin","createComponentPlugin","RichTextEditor","Original","nodes","children","rest"],"sources":["AddRichTextEditorNodeType.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\n\nexport interface AddRichTextEditorNodeTypeProps {\n    type: Klass<LexicalNode>;\n}\n\nexport const AddRichTextEditorNodeType: FC<AddRichTextEditorNodeTypeProps> = ({ type }) => {\n    const NodePlugin = createComponentPlugin(RichTextEditor, Original => {\n        return function RichTextEditor({ nodes, children, ...rest }): JSX.Element {\n            return (\n                <Original {...rest} nodes={[...(nodes || []), type]}>\n                    {children}\n                </Original>\n            );\n        };\n    });\n\n    return <NodePlugin />;\n};\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AAAoE;AAM7D,IAAMA,yBAA6D,GAAG,SAAhEA,yBAA6D,OAAiB;EAAA,IAAXC,IAAI,QAAJA,IAAI;EAChF,IAAMC,UAAU,GAAG,IAAAC,uCAAqB,EAACC,8BAAc,EAAE,UAAAC,QAAQ,EAAI;IACjE,OAAO,SAASD,cAAc,QAA4C;MAAA,IAAzCE,KAAK,SAALA,KAAK;QAAEC,QAAQ,SAARA,QAAQ;QAAKC,IAAI;MACrD,oBACI,6BAAC,QAAQ,oBAAKA,IAAI;QAAE,KAAK,6CAAOF,KAAK,IAAI,EAAE,IAAGL,IAAI;MAAE,IAC/CM,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC;EAEF,oBAAO,6BAAC,UAAU,OAAG;AACzB,CAAC;AAAC"}

package/components/AddRichTextEditorPlugin.d.ts

@@ -1,10 +1,12 @@
 import React, { FC } from "react";
 import { LexicalValue } from "../types";
+import { WebinyTheme } from "../themes/webinyLexicalTheme";
 interface AddRichTextEditorProps {
     toolbar: React.ReactNode;
     placeholder?: string;
     value: LexicalValue;
     children?: React.ReactNode;
+    theme: WebinyTheme;
 }
 export declare const AddRichTextEditorPlugin: FC<AddRichTextEditorProps>;
 export {};

package/components/AddRichTextEditorPlugin.js

@@ -16,13 +16,15 @@ var AddRichTextEditorPlugin = function AddRichTextEditorPlugin(_ref) {
     return function RichTextEditorElem(_ref2) {
       var tag = _ref2.tag,
         value = _ref2.value,
-        onChange = _ref2.onChange;
+        onChange = _ref2.onChange,
+        theme = _ref2.theme;
       return /*#__PURE__*/_react.default.createElement(Original, {
         toolbar: toolbar,
         tag: tag,
         placeholder: placeholder,
         value: value,
-        onChange: onChange
+        onChange: onChange,
+        theme: theme
       }, children);
     };
   }));

package/components/AddRichTextEditorPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactComposition","_RichTextEditor","AddRichTextEditorPlugin","_ref","toolbar","placeholder","children","RichTextEditorPlugin","React","memo","createComponentPlugin","RichTextEditor","Original","RichTextEditorElem","_ref2","tag","value","onChange","default","createElement","exports"],"sources":["AddRichTextEditorPlugin.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nimport { LexicalValue } from \"~/types\";\n\ninterface AddRichTextEditorProps {\n    toolbar: React.ReactNode;\n    placeholder?: string;\n    value: LexicalValue;\n    children?: React.ReactNode;\n}\n\nexport const AddRichTextEditorPlugin: FC<AddRichTextEditorProps> = ({\n    toolbar,\n    placeholder,\n    children\n}) => {\n    const RichTextEditorPlugin = React.memo(\n        createComponentPlugin(RichTextEditor, Original => {\n            return function RichTextEditorElem({ tag, value, onChange }): JSX.Element {\n                return (\n                    <Original\n                        toolbar={toolbar}\n                        tag={tag}\n                        placeholder={placeholder}\n                        value={value}\n                        onChange={onChange}\n                    >\n                        {children}\n                    </Original>\n                );\n            };\n        })\n    );\n\n    return <RichTextEditorPlugin />;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAUO,IAAMG,uBAAmD,GAAG,SAAtDA,uBAAmDA,CAAAC,IAAA,EAI1D;EAAA,IAHFC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EAER,IAAMC,oBAAoB,gBAAGC,cAAK,CAACC,IAAI,CACnC,IAAAC,uCAAqB,EAACC,8BAAc,EAAE,UAAAC,QAAQ,EAAI;IAC9C,OAAO,SAASC,kBAAkBA,CAAAC,KAAA,EAAwC;MAAA,IAArCC,GAAG,GAAAD,KAAA,CAAHC,GAAG;QAAEC,KAAK,GAAAF,KAAA,CAALE,KAAK;QAAEC,QAAQ,GAAAH,KAAA,CAARG,QAAQ;MACrD,oBACIpB,MAAA,CAAAqB,OAAA,CAAAC,aAAA,CAACP,QAAQ;QACLR,OAAO,EAAEA,OAAQ;QACjBW,GAAG,EAAEA,GAAI;QACTV,WAAW,EAAEA,WAAY;QACzBW,KAAK,EAAEA,KAAM;QACbC,QAAQ,EAAEA;MAAS,GAElBX,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC,CACL;EAED,oBAAOT,MAAA,CAAAqB,OAAA,CAAAC,aAAA,CAACZ,oBAAoB,OAAG;AACnC,CAAC;AAACa,OAAA,CAAAlB,uBAAA,GAAAA,uBAAA"}
+{"version":3,"names":["AddRichTextEditorPlugin","toolbar","placeholder","children","RichTextEditorPlugin","React","memo","createComponentPlugin","RichTextEditor","Original","RichTextEditorElem","tag","value","onChange","theme"],"sources":["AddRichTextEditorPlugin.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nimport { LexicalValue } from \"~/types\";\nimport { WebinyTheme } from \"~/themes/webinyLexicalTheme\";\n\ninterface AddRichTextEditorProps {\n    toolbar: React.ReactNode;\n    placeholder?: string;\n    value: LexicalValue;\n    children?: React.ReactNode;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n}\n\nexport const AddRichTextEditorPlugin: FC<AddRichTextEditorProps> = ({\n    toolbar,\n    placeholder,\n    children\n}) => {\n    const RichTextEditorPlugin = React.memo(\n        createComponentPlugin(RichTextEditor, Original => {\n            return function RichTextEditorElem({ tag, value, onChange, theme }): JSX.Element {\n                return (\n                    <Original\n                        toolbar={toolbar}\n                        tag={tag}\n                        placeholder={placeholder}\n                        value={value}\n                        onChange={onChange}\n                        theme={theme}\n                    >\n                        {children}\n                    </Original>\n                );\n            };\n        })\n    );\n\n    return <RichTextEditorPlugin />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAeO,IAAMA,uBAAmD,GAAG,SAAtDA,uBAAmD,OAI1D;EAAA,IAHFC,OAAO,QAAPA,OAAO;IACPC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;EAER,IAAMC,oBAAoB,gBAAGC,cAAK,CAACC,IAAI,CACnC,IAAAC,uCAAqB,EAACC,8BAAc,EAAE,UAAAC,QAAQ,EAAI;IAC9C,OAAO,SAASC,kBAAkB,QAA+C;MAAA,IAA5CC,GAAG,SAAHA,GAAG;QAAEC,KAAK,SAALA,KAAK;QAAEC,QAAQ,SAARA,QAAQ;QAAEC,KAAK,SAALA,KAAK;MAC5D,oBACI,6BAAC,QAAQ;QACL,OAAO,EAAEb,OAAQ;QACjB,GAAG,EAAEU,GAAI;QACT,WAAW,EAAET,WAAY;QACzB,KAAK,EAAEU,KAAM;QACb,QAAQ,EAAEC,QAAS;QACnB,KAAK,EAAEC;MAAM,GAEZX,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC,CACL;EAED,oBAAO,6BAAC,oBAAoB,OAAG;AACnC,CAAC;AAAC"}

package/components/AddToolbarAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactComposition","_Toolbar","AddToolbarAction","_ref","element","targetType","type","ToolbarPlugin","React","memo","createComponentPlugin","Toolbar","Original","_ref2","children","anchorElem","default","createElement","exports"],"sources":["AddToolbarAction.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\ninterface AddToolbarActionProps {\n    type?: \"heading\" | \"paragraph\" | string;\n    element: JSX.Element;\n}\n\nexport const AddToolbarAction: FC<AddToolbarActionProps> = ({ element, type: targetType }) => {\n    const ToolbarPlugin = React.memo(\n        createComponentPlugin(Toolbar, Original => {\n            return function Toolbar({ type, children, anchorElem }): JSX.Element {\n                if (!targetType || targetType === type) {\n                    return (\n                        <Original type={type} anchorElem={anchorElem}>\n                            {element}\n                            {children}\n                        </Original>\n                    );\n                }\n\n                return (\n                    <Original anchorElem={anchorElem} type={type}>\n                        {children}\n                    </Original>\n                );\n            };\n        })\n    );\n\n    return <ToolbarPlugin />;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAMO,IAAMG,gBAA2C,GAAG,SAA9CA,gBAA2CA,CAAAC,IAAA,EAAsC;EAAA,IAAhCC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAQC,UAAU,GAAAF,IAAA,CAAhBG,IAAI;EACvE,IAAMC,aAAa,gBAAGC,cAAK,CAACC,IAAI,CAC5B,IAAAC,uCAAqB,EAACC,gBAAO,EAAE,UAAAC,QAAQ,EAAI;IACvC,OAAO,SAASD,OAAOA,CAAAE,KAAA,EAA8C;MAAA,IAA3CP,IAAI,GAAAO,KAAA,CAAJP,IAAI;QAAEQ,QAAQ,GAAAD,KAAA,CAARC,QAAQ;QAAEC,UAAU,GAAAF,KAAA,CAAVE,UAAU;MAChD,IAAI,CAACV,UAAU,IAAIA,UAAU,KAAKC,IAAI,EAAE;QACpC,oBACIT,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACL,QAAQ;UAACN,IAAI,EAAEA,IAAK;UAACS,UAAU,EAAEA;QAAW,GACxCX,OAAO,EACPU,QAAQ,CACF;MAEnB;MAEA,oBACIjB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACL,QAAQ;QAACG,UAAU,EAAEA,UAAW;QAACT,IAAI,EAAEA;MAAK,GACxCQ,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC,CACL;EAED,oBAAOjB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACV,aAAa,OAAG;AAC5B,CAAC;AAACW,OAAA,CAAAhB,gBAAA,GAAAA,gBAAA"}
+{"version":3,"names":["AddToolbarAction","element","targetType","type","ToolbarPlugin","React","memo","createComponentPlugin","Toolbar","Original","children","anchorElem"],"sources":["AddToolbarAction.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { createComponentPlugin } from \"@webiny/react-composition\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\ninterface AddToolbarActionProps {\n    type?: \"heading\" | \"paragraph\" | string;\n    element: JSX.Element;\n}\n\nexport const AddToolbarAction: FC<AddToolbarActionProps> = ({ element, type: targetType }) => {\n    const ToolbarPlugin = React.memo(\n        createComponentPlugin(Toolbar, Original => {\n            return function Toolbar({ type, children, anchorElem }): JSX.Element {\n                if (!targetType || targetType === type) {\n                    return (\n                        <Original type={type} anchorElem={anchorElem}>\n                            {element}\n                            {children}\n                        </Original>\n                    );\n                }\n\n                return (\n                    <Original anchorElem={anchorElem} type={type}>\n                        {children}\n                    </Original>\n                );\n            };\n        })\n    );\n\n    return <ToolbarPlugin />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAMO,IAAMA,gBAA2C,GAAG,SAA9CA,gBAA2C,OAAsC;EAAA,IAAhCC,OAAO,QAAPA,OAAO;IAAQC,UAAU,QAAhBC,IAAI;EACvE,IAAMC,aAAa,gBAAGC,cAAK,CAACC,IAAI,CAC5B,IAAAC,uCAAqB,EAACC,gBAAO,EAAE,UAAAC,QAAQ,EAAI;IACvC,OAAO,SAASD,OAAO,QAA8C;MAAA,IAA3CL,IAAI,SAAJA,IAAI;QAAEO,QAAQ,SAARA,QAAQ;QAAEC,UAAU,SAAVA,UAAU;MAChD,IAAI,CAACT,UAAU,IAAIA,UAAU,KAAKC,IAAI,EAAE;QACpC,oBACI,6BAAC,QAAQ;UAAC,IAAI,EAAEA,IAAK;UAAC,UAAU,EAAEQ;QAAW,GACxCV,OAAO,EACPS,QAAQ,CACF;MAEnB;MAEA,oBACI,6BAAC,QAAQ;QAAC,UAAU,EAAEC,UAAW;QAAC,IAAI,EAAER;MAAK,GACxCO,QAAQ,CACF;IAEnB,CAAC;EACL,CAAC,CAAC,CACL;EAED,oBAAO,6BAAC,aAAa,OAAG;AAC5B,CAAC;AAAC"}

package/components/Editor/HeadingEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalLinkPlugin","_ClickableLinkPlugin","_FloatingLinkEditorPlugin","_HeadingToolbar","_RichTextEditor","_excluded","HeadingEditor","_ref","tag","placeholder","rest","_objectWithoutProperties2","default","createElement","RichTextEditor","Object","assign","toolbar","HeadingToolbar","LinkPlugin","ClickableLinkPlugin","FloatingLinkEditorPlugin","anchorElem","document","body","exports"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const HeadingEditor: React.FC<HeadingEditorProps> = ({ tag, placeholder, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<HeadingToolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AACA,IAAAG,yBAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAAyF,IAAAM,SAAA;AAMlF,IAAMC,aAA2C,GAAG,SAA9CA,aAA2CA,CAAAC,IAAA,EAAsC;EAAA,IAAhCC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAF,SAAA;EACnF,oBACIR,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACT,eAAA,CAAAU,cAAc,EAAAC,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEpB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACV,eAAA,CAAAe,cAAc,OAAI;IAC5BV,GAAG,EAAEA,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjBC,WAAW,EAAEA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI,gBAERb,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,kBAAA,CAAAmB,UAAU,OAAG,eACdtB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,oBAAA,CAAAmB,mBAAmB,OAAG,eACvBvB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACX,yBAAA,CAAAmB,wBAAwB;IAACC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAACC,OAAA,CAAAnB,aAAA,GAAAA,aAAA"}
+{"version":3,"names":["HeadingEditor","tag","placeholder","rest","document","body"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { HeadingToolbar } from \"~/components/Toolbar/HeadingToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const HeadingEditor: React.FC<HeadingEditorProps> = ({ tag, placeholder, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<HeadingToolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAyF;AAMlF,IAAMA,aAA2C,GAAG,SAA9CA,aAA2C,OAAsC;EAAA,IAAhCC,GAAG,QAAHA,GAAG;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EACnF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,8BAAc,OAAI;IAC5B,GAAG,EAAEF,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,IAAK;IACjB,WAAW,EAAEC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAAkC,GAC1DC,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,CAC1C;AAEzB,CAAC;AAAC"}

package/components/Editor/ParagraphEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_LexicalListPlugin","_CodeHighlightPlugin","_LexicalLinkPlugin","_FloatingLinkEditorPlugin","_ClickableLinkPlugin","_ParagraphToolbar","_RichTextEditor","_excluded","ParagraphEditor","_ref","placeholder","tag","rest","_objectWithoutProperties2","default","createElement","RichTextEditor","Object","assign","toolbar","ParagraphToolbar","LinkPlugin","CodeHighlightPlugin","ClickableLinkPlugin","FloatingLinkEditorPlugin","anchorElem","document","body","ListPlugin","exports"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { ListPlugin } from \"@lexical/react/LexicalListPlugin\";\nimport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { ParagraphToolbar } from \"~/components/Toolbar/ParagraphToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst ParagraphEditor: React.FC<ParagraphLexicalEditorProps> = ({ placeholder, tag, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<ParagraphToolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <CodeHighlightPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n            <ListPlugin />\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,yBAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,iBAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AAAyF,IAAAQ,SAAA;AAMzF,IAAMC,eAAsD,GAAG,SAAzDA,eAAsDA,CAAAC,IAAA,EAAsC;EAAA,IAAhCC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAF,SAAA;EACvF,oBACIV,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACT,eAAA,CAAAU,cAAc,EAAAC,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEtB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACV,iBAAA,CAAAe,gBAAgB,OAAI;IAC9BT,GAAG,EAAEA,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,GAAI;IAChBD,WAAW,EAAEA,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAA0B,GAClDE,IAAI,gBAERf,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACb,kBAAA,CAAAmB,UAAU,OAAG,eACdxB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACd,oBAAA,CAAAqB,mBAAmB,OAAG,eACvBzB,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACX,oBAAA,CAAAmB,mBAAmB,OAAG,eACvB1B,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACZ,yBAAA,CAAAqB,wBAAwB;IAACC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,eACvD9B,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACf,kBAAA,CAAA4B,UAAU,OAAG,CACD;AAEzB,CAAC;AAACC,OAAA,CAAArB,eAAA,GAAAA,eAAA"}
+{"version":3,"names":["ParagraphEditor","placeholder","tag","rest","document","body"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { ListPlugin } from \"@lexical/react/LexicalListPlugin\";\nimport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nimport { LinkPlugin } from \"@lexical/react/LexicalLinkPlugin\";\nimport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nimport { ClickableLinkPlugin } from \"~/plugins/ClickableLinkPlugin/ClickableLinkPlugin\";\nimport { ParagraphToolbar } from \"~/components/Toolbar/ParagraphToolbar\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst ParagraphEditor: React.FC<ParagraphLexicalEditorProps> = ({ placeholder, tag, ...rest }) => {\n    return (\n        <RichTextEditor\n            toolbar={<ParagraphToolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n        >\n            <LinkPlugin />\n            <CodeHighlightPlugin />\n            <ClickableLinkPlugin />\n            <FloatingLinkEditorPlugin anchorElem={document.body} />\n            <ListPlugin />\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAyF;AAMzF,IAAMA,eAAsD,GAAG,SAAzDA,eAAsD,OAAsC;EAAA,IAAhCC,WAAW,QAAXA,WAAW;IAAEC,GAAG,QAAHA,GAAG;IAAKC,IAAI;EACvF,oBACI,6BAAC,8BAAc;IACX,OAAO,eAAE,6BAAC,kCAAgB,OAAI;IAC9B,GAAG,EAAED,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,GAAI;IAChB,WAAW,EAAED,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI;EAA0B,GAClDE,IAAI,gBAER,6BAAC,6BAAU,OAAG,eACd,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,wCAAmB,OAAG,eACvB,6BAAC,kDAAwB;IAAC,UAAU,EAAEC,QAAQ,CAACC;EAAK,EAAG,eACvD,6BAAC,6BAAU,OAAG,CACD;AAEzB,CAAC;AAAC"}

package/components/Editor/RichTextEditor.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { LexicalValue } from "../../types";
 import { Klass, LexicalNode } from "lexical";
+import { WebinyTheme } from "../../themes/webinyLexicalTheme";
 export interface RichTextEditorProps {
     toolbar?: React.ReactNode;
     tag?: string;
@@ -16,6 +17,7 @@ export interface RichTextEditorProps {
     onBlur?: (editorState: LexicalValue) => void;
     height?: number | string;
     width?: number | string;
+    theme: WebinyTheme;
 }
 /**
  * @description Main editor container

package/components/Editor/RichTextEditor.js

@@ -12,8 +12,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _Placeholder = require("../../ui/Placeholder");
 var _generateInitialLexicalValue = require("../../utils/generateInitialLexicalValue");
-var _webinyNodes = require("../../nodes/webinyNodes");
-var _webinyLexicalTheme = require("../../themes/webinyLexicalTheme");
 var _LexicalComposer = require("@lexical/react/LexicalComposer");
 var _LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
 var _LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
@@ -26,6 +24,9 @@ var _RichTextEditorContext = require("../../context/RichTextEditorContext");
 var _isValidLexicalData = require("../../utils/isValidLexicalData");
 var _LexicalUpdateStatePlugin = require("../../plugins/LexicalUpdateStatePlugin");
 var _BlurEventPlugin = require("../../plugins/BlurEventPlugin/BlurEventPlugin");
+var _FontColorPlugin = require("../../plugins/FontColorPlugin/FontColorPlugin");
+var _webinyLexicalTheme = require("../../themes/webinyLexicalTheme");
+var _webinyNodes = require("../../nodes/webinyNodes");
 var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
   var toolbar = _ref.toolbar,
     onChange = _ref.onChange,
@@ -36,7 +37,8 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     onBlur = _ref.onBlur,
     focus = _ref.focus,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    theme = _ref.theme;
   var placeholderElem = /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, null, placeholder || "Enter text...");
   var scrollRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(undefined),
@@ -59,12 +61,15 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
       throw error;
     },
     nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
-    theme: _webinyLexicalTheme.theme
+    theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _webinyLexicalTheme.webinyEditorTheme), {}, {
+      styles: theme === null || theme === void 0 ? void 0 : theme.styles
+    })
   };
   function handleOnChange(editorState, editor) {
     editorState.read(function () {
       if (typeof onChange === "function") {
         var _editorState = editor.getEditorState();
+        //TODO: send plain JSON object
         onChange(JSON.stringify(_editorState.toJSON()));
       }
     });
@@ -78,7 +83,7 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     onChange: handleOnChange
   }), value && /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.LexicalUpdateStatePlugin, {
     value: value
-  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
+  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_FontColorPlugin.FontColorPlugin, null), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
     onBlur: onBlur
   }), focus && /*#__PURE__*/_react.default.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), children, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/_react.default.createElement("div", {

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Placeholder","_generateInitialLexicalValue","_webinyNodes","_webinyLexicalTheme","_LexicalComposer","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_interopRequireDefault","_reactComposition","_LexicalContentEditable","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","BaseRichTextEditor","_ref","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","placeholderElem","default","createElement","Placeholder","scrollRef","useRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","concat","_toConsumableArray2","WebinyNodes","theme","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","LexicalComposer","ref","style","_objectSpread2","OnChangePlugin","LexicalUpdateStatePlugin","ClearEditorPlugin","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","className","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","makeComposable","props","RichTextEditorProvider","exports"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { theme } from \"~/themes/webinyLexicalTheme\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    tag?: string;\n    onChange?: (json: LexicalValue) => void;\n    value: LexicalValue | null;\n    focus?: boolean;\n    placeholder?: string;\n    nodes?: Klass<LexicalNode>[];\n    /**\n     * @description Lexical plugins\n     */\n    children?: React.ReactNode | React.ReactNode[];\n    onBlur?: (editorState: LexicalValue) => void;\n    height?: number | string;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    width,\n    height\n}: RichTextEditorProps) => {\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: theme\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <div ref={scrollRef} style={{ ...sizeStyle }}>\n                {/* data */}\n                <OnChangePlugin onChange={handleOnChange} />\n                {value && <LexicalUpdateStatePlugin value={value} />}\n                <ClearEditorPlugin />\n                {/* Events */}\n                {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                {focus && <AutoFocusPlugin />}\n                {/* External plugins and components */}\n                {children}\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                            <div className=\"editor\" ref={onRef} style={{ ...sizeStyle }}>\n                                <ContentEditable style={{ outline: 0, ...sizeStyle }} />\n                            </div>\n                        </div>\n                    }\n                    placeholder={placeholderElem}\n                    ErrorBoundary={LexicalErrorBoundary}\n                />\n                {/* Toolbar */}\n                {floatingAnchorElem && toolbar}\n            </div>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <RichTextEditorProvider>\n            <BaseRichTextEditor {...props} />\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"names":["BaseRichTextEditor","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","theme","placeholderElem","scrollRef","useRef","useState","undefined","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","WebinyNodes","webinyEditorTheme","styles","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","outline","LexicalErrorBoundary","RichTextEditor","makeComposable","props"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { FontColorPlugin } from \"~/plugins/FontColorPlugin/FontColorPlugin\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    tag?: string;\n    onChange?: (json: LexicalValue) => void;\n    value: LexicalValue | null;\n    focus?: boolean;\n    placeholder?: string;\n    nodes?: Klass<LexicalNode>[];\n    /**\n     * @description Lexical plugins\n     */\n    children?: React.ReactNode | React.ReactNode[];\n    onBlur?: (editorState: LexicalValue) => void;\n    height?: number | string;\n    width?: number | string;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    width,\n    height,\n    theme\n}: RichTextEditorProps) => {\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, styles: theme?.styles }\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                //TODO: send plain JSON object\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <div ref={scrollRef} style={{ ...sizeStyle }}>\n                {/* data */}\n                <OnChangePlugin onChange={handleOnChange} />\n                {value && <LexicalUpdateStatePlugin value={value} />}\n                <ClearEditorPlugin />\n                <FontColorPlugin />\n                {/* Events */}\n                {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                {focus && <AutoFocusPlugin />}\n                {/* External plugins and components */}\n                {children}\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                            <div className=\"editor\" ref={onRef} style={{ ...sizeStyle }}>\n                                <ContentEditable style={{ outline: 0, ...sizeStyle }} />\n                            </div>\n                        </div>\n                    }\n                    placeholder={placeholderElem}\n                    ErrorBoundary={LexicalErrorBoundary}\n                />\n                {/* Toolbar */}\n                {floatingAnchorElem && toolbar}\n            </div>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <RichTextEditorProvider>\n            <BaseRichTextEditor {...props} />\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}

package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FontColorAction } from "../ToolbarActions/FontColorAction";
+interface LexicalEditorConfig extends React.FC<unknown> {
+    FontColorAction: typeof FontColorAction;
+}
+export declare const LexicalEditorConfig: LexicalEditorConfig;
+export {};

package/components/LexicalEditorConfig/LexicalEditorConfig.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LexicalEditorConfig = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FontColorAction = require("../ToolbarActions/FontColorAction");
+var LexicalEditorConfig = function LexicalEditorConfig(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+exports.LexicalEditorConfig = LexicalEditorConfig;
+LexicalEditorConfig.FontColorAction = _FontColorAction.FontColorAction;

package/components/LexicalEditorConfig/LexicalEditorConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LexicalEditorConfig","children","FontColorAction"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\n\ninterface LexicalEditorConfig extends React.FC<unknown> {\n    FontColorAction: typeof FontColorAction;\n}\n\nexport const LexicalEditorConfig: LexicalEditorConfig = ({ children }) => {\n    return <>{children}</>;\n};\n\nLexicalEditorConfig.FontColorAction = FontColorAction;\n"],"mappings":";;;;;;;AAAA;AACA;AAMO,IAAMA,mBAAwC,GAAG,SAA3CA,mBAAwC,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EAC/D,oBAAO,4DAAGA,QAAQ,CAAI;AAC1B,CAAC;AAAC;AAEFD,mBAAmB,CAACE,eAAe,GAAGA,gCAAe"}

package/components/LexicalHtmlRenderer.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { LexicalValue } from "../types";
 import { Klass, LexicalNode } from "lexical";
+import { WebinyTheme } from "../themes/webinyLexicalTheme";
 interface LexicalHtmlRendererProps {
     nodes?: Klass<LexicalNode>[];
     value: LexicalValue | null;
+    theme: WebinyTheme;
 }
 export declare const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps>;
 export {};

package/components/LexicalHtmlRenderer.js

@@ -5,20 +5,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LexicalHtmlRenderer = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _isValidLexicalData = require("../utils/isValidLexicalData");
 var _generateInitialLexicalValue = require("../utils/generateInitialLexicalValue");
-var _webinyNodes = require("../nodes/webinyNodes");
-var _webinyLexicalTheme = require("../themes/webinyLexicalTheme");
 var _LexicalComposer = require("@lexical/react/LexicalComposer");
 var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
 var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
 var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/LexicalErrorBoundary"));
 var _LexicalUpdateStatePlugin = require("../plugins/LexicalUpdateStatePlugin");
+var _webinyNodes = require("../nodes/webinyNodes");
+var _webinyLexicalTheme = require("../themes/webinyLexicalTheme");
 var LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
   var nodes = _ref.nodes,
-    value = _ref.value;
+    value = _ref.value,
+    theme = _ref.theme;
   var initialConfig = {
     editorState: (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)(),
     namespace: "webiny",
@@ -27,7 +29,9 @@ var LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
     },
     editable: false,
     nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
-    theme: _webinyLexicalTheme.theme
+    theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _webinyLexicalTheme.webinyEditorTheme), {}, {
+      styles: theme.styles
+    })
   };
   return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
     initialConfig: initialConfig

package/components/LexicalHtmlRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_isValidLexicalData","_generateInitialLexicalValue","_webinyNodes","_webinyLexicalTheme","_LexicalComposer","_LexicalRichTextPlugin","_LexicalContentEditable","_LexicalErrorBoundary","_LexicalUpdateStatePlugin","LexicalHtmlRenderer","_ref","nodes","value","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","editable","concat","_toConsumableArray2","default","WebinyNodes","theme","createElement","LexicalComposer","RichTextPlugin","contentEditable","className","ContentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","LexicalUpdateStatePlugin","exports"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { theme } from \"~/themes/webinyLexicalTheme\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { Klass, LexicalNode } from \"lexical\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n}\n\nexport const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps> = ({ nodes, value }) => {\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        editable: false,\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: theme\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <RichTextPlugin\n                contentEditable={\n                    <div className=\"editor\">\n                        <ContentEditable />\n                    </div>\n                }\n                ErrorBoundary={LexicalErrorBoundary}\n                placeholder={null}\n            />\n            <LexicalUpdateStatePlugin value={value} />\n        </LexicalComposer>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,4BAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,sBAAA,GAAAN,OAAA;AACA,IAAAO,uBAAA,GAAAP,OAAA;AACA,IAAAQ,qBAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,yBAAA,GAAAT,OAAA;AAQO,IAAMU,mBAAuD,GAAG,SAA1DA,mBAAuDA,CAAAC,IAAA,EAAyB;EAAA,IAAnBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;EAClF,IAAMC,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAAC,sCAAkB,EAACH,KAAK,CAAC,GAAGA,KAAK,GAAG,IAAAI,wDAA2B,GAAE;IAC9EC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAE,SAAAA,QAACC,KAAY,EAAK;MACvB,MAAMA,KAAK;IACf,CAAC;IACDC,QAAQ,EAAE,KAAK;IACfT,KAAK,KAAAU,MAAA,KAAAC,mBAAA,CAAAC,OAAA,EAAMC,wBAAW,OAAAF,mBAAA,CAAAC,OAAA,EAAMZ,KAAK,IAAI,EAAE,EAAE;IACzCc,KAAK,EAAEA;EACX,CAAC;EAED,oBACI5B,MAAA,CAAA0B,OAAA,CAAAG,aAAA,CAACtB,gBAAA,CAAAuB,eAAe;IAACd,aAAa,EAAEA;EAAc,gBAC1ChB,MAAA,CAAA0B,OAAA,CAAAG,aAAA,CAACrB,sBAAA,CAAAuB,cAAc;IACXC,eAAe,eACXhC,MAAA,CAAA0B,OAAA,CAAAG,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBjC,MAAA,CAAA0B,OAAA,CAAAG,aAAA,CAACpB,uBAAA,CAAAyB,eAAe,OAAG,CAE1B;IACDC,aAAa,EAAEC,6BAAqB;IACpCC,WAAW,EAAE;EAAK,EACpB,eACFrC,MAAA,CAAA0B,OAAA,CAAAG,aAAA,CAAClB,yBAAA,CAAA2B,wBAAwB;IAACvB,KAAK,EAAEA;EAAM,EAAG,CAC5B;AAE1B,CAAC;AAACwB,OAAA,CAAA3B,mBAAA,GAAAA,mBAAA"}
+{"version":3,"names":["LexicalHtmlRenderer","nodes","value","theme","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","editable","WebinyNodes","webinyEditorTheme","styles","LexicalErrorBoundary"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n}\n\nexport const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps> = ({\n    nodes,\n    value,\n    theme\n}) => {\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        editable: false,\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <RichTextPlugin\n                contentEditable={\n                    <div className=\"editor\">\n                        <ContentEditable />\n                    </div>\n                }\n                ErrorBoundary={LexicalErrorBoundary}\n                placeholder={null}\n            />\n            <LexicalUpdateStatePlugin value={value} />\n        </LexicalComposer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAWO,IAAMA,mBAAuD,GAAG,SAA1DA,mBAAuD,OAI9D;EAAA,IAHFC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;EAEL,IAAMC,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAAC,sCAAkB,EAACJ,KAAK,CAAC,GAAGA,KAAK,GAAG,IAAAK,wDAA2B,GAAE;IAC9EC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAE,iBAACC,KAAY,EAAK;MACvB,MAAMA,KAAK;IACf,CAAC;IACDC,QAAQ,EAAE,KAAK;IACfV,KAAK,6CAAMW,wBAAW,oCAAMX,KAAK,IAAI,EAAE,EAAE;IACzCE,KAAK,8DAAOU,qCAAiB;MAAEC,MAAM,EAAEX,KAAK,CAACW;IAAM;EACvD,CAAC;EAED,oBACI,6BAAC,gCAAe;IAAC,aAAa,EAAEV;EAAc,gBAC1C,6BAAC,qCAAc;IACX,eAAe,eACX;MAAK,SAAS,EAAC;IAAQ,gBACnB,6BAAC,uCAAe,OAAG,CAE1B;IACD,aAAa,EAAEW,6BAAqB;IACpC,WAAW,EAAE;EAAK,EACpB,eACF,6BAAC,kDAAwB;IAAC,KAAK,EAAEb;EAAM,EAAG,CAC5B;AAE1B,CAAC;AAAC"}

package/components/Toolbar/HeadingToolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Toolbar","HeadingToolbar","_ref","_ref$anchorElem","anchorElem","document","body","default","createElement","Toolbar","type","exports"],"sources":["HeadingToolbar.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface HeadingToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\n/**\n * Toolbar with actions specific for the heading elements from H1-H6.\n * @param anchorElem\n * @constructor\n */\nexport const HeadingToolbar: FC<HeadingToolbarProps> = ({ anchorElem = document.body }) => {\n    return <Toolbar type={\"heading\"} anchorElem={anchorElem} />;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA;AACA;AACA;AACA;AACA;AACO,IAAME,cAAuC,GAAG,SAA1CA,cAAuCA,CAAAC,IAAA,EAAuC;EAAA,IAAAC,eAAA,GAAAD,IAAA,CAAjCE,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAGE,QAAQ,CAACC,IAAI,GAAAH,eAAA;EAChF,oBAAON,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,QAAA,CAAAS,OAAO;IAACC,IAAI,EAAE,SAAU;IAACN,UAAU,EAAEA;EAAW,EAAG;AAC/D,CAAC;AAACO,OAAA,CAAAV,cAAA,GAAAA,cAAA"}
+{"version":3,"names":["HeadingToolbar","anchorElem","document","body"],"sources":["HeadingToolbar.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface HeadingToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\n/**\n * Toolbar with actions specific for the heading elements from H1-H6.\n * @param anchorElem\n * @constructor\n */\nexport const HeadingToolbar: FC<HeadingToolbarProps> = ({ anchorElem = document.body }) => {\n    return <Toolbar type={\"heading\"} anchorElem={anchorElem} />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AACA;AACO,IAAMA,cAAuC,GAAG,SAA1CA,cAAuC,OAAuC;EAAA,2BAAjCC,UAAU;IAAVA,UAAU,gCAAGC,QAAQ,CAACC,IAAI;EAChF,oBAAO,6BAAC,gBAAO;IAAC,IAAI,EAAE,SAAU;IAAC,UAAU,EAAEF;EAAW,EAAG;AAC/D,CAAC;AAAC"}

package/components/Toolbar/ParagraphToolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Toolbar","ParagraphToolbar","_ref","_ref$anchorElem","anchorElem","document","body","default","createElement","Toolbar","type","exports"],"sources":["ParagraphToolbar.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface ParagraphToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\n/**\n * Toolbar with actions for rich text editing specific for the paragraph element <p>.\n * @param anchorElem\n * @constructor\n */\nexport const ParagraphToolbar: FC<ParagraphToolbarProps> = ({ anchorElem = document.body }) => {\n    return <Toolbar type={\"paragraph\"} anchorElem={anchorElem} />;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAMA;AACA;AACA;AACA;AACA;AACO,IAAME,gBAA2C,GAAG,SAA9CA,gBAA2CA,CAAAC,IAAA,EAAuC;EAAA,IAAAC,eAAA,GAAAD,IAAA,CAAjCE,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAGE,QAAQ,CAACC,IAAI,GAAAH,eAAA;EACpF,oBAAON,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,QAAA,CAAAS,OAAO;IAACC,IAAI,EAAE,WAAY;IAACN,UAAU,EAAEA;EAAW,EAAG;AACjE,CAAC;AAACO,OAAA,CAAAV,gBAAA,GAAAA,gBAAA"}
+{"version":3,"names":["ParagraphToolbar","anchorElem","document","body"],"sources":["ParagraphToolbar.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface ParagraphToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\n/**\n * Toolbar with actions for rich text editing specific for the paragraph element <p>.\n * @param anchorElem\n * @constructor\n */\nexport const ParagraphToolbar: FC<ParagraphToolbarProps> = ({ anchorElem = document.body }) => {\n    return <Toolbar type={\"paragraph\"} anchorElem={anchorElem} />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AACA;AACO,IAAMA,gBAA2C,GAAG,SAA9CA,gBAA2C,OAAuC;EAAA,2BAAjCC,UAAU;IAAVA,UAAU,gCAAGC,QAAQ,CAACC,IAAI;EACpF,oBAAO,6BAAC,gBAAO;IAAC,IAAI,EAAE,WAAY;IAAC,UAAU,EAAEF;EAAW,EAAG;AACjE,CAAC;AAAC"}

package/components/Toolbar/Toolbar.css

@@ -194,6 +194,9 @@ i.chevron-down {
   background-color: rgb(223, 232, 250);
 }
 
+i.font-color, .icon.font-color {
+  background-image: url("../../images/icons/font-color.svg");
+}
 
 .floating-text-format-popup button.toolbar-item {
   border: 0;
@@ -320,6 +323,12 @@ i.chevron-down {
   overflow-y: auto;
 }
 
+.lexical-dropdown.no-scroll {
+  max-height: inherit;
+  overflow: auto;
+  overflow-y: auto;
+}
+
 .lexical-dropdown .item {
   margin: 0 8px 0 8px;
   padding: 8px;

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactComposition","_link","_reactDom","_utils","_code","_LexicalComposerContext","_getDOMRangeRect","_setFloatingElemPosition","_getSelectedNode","_useRichTextEditor2","FloatingToolbar","_ref","children","anchorElem","editor","popupCharStylesEditorRef","useRef","updateTextFormatFloatingToolbar","useCallback","selection","$getSelection","popupCharStylesEditorElem","current","nativeSelection","window","getSelection","isLink","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","rootElement","getRootElement","isCollapsed","contains","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","default","createElement","ref","className","isEditable","useToolbar","_ref3","_ref3$anchorElem","document","body","type","_useRichTextEditor","useRichTextEditor","nodeIsText","setNodeIsText","updatePopup","isComposing","$isCodeHighlightNode","anchor","getNode","getTextContent","$isTextNode","registerRootListener","createPortal","Toolbar","makeComposable","_ref4","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","exports"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isTextNode,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isCodeHighlightNode } from \"@lexical/code\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { ToolbarType } from \"~/types\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        let isLink = false;\n        if ($isRangeSelection(selection)) {\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                isLink = true;\n            }\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode) &&\n            !isLink\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-text-format-popup\">\n            {editor.isEditable() && children}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body,\n    type,\n    children\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText } = useRichTextEditor();\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            // Should not to pop up the floating toolbar when using IME input\n            if (editor.isComposing()) {\n                return;\n            }\n            const selection = $getSelection();\n            const nativeSelection = window.getSelection();\n            const rootElement = editor.getRootElement();\n\n            if (\n                nativeSelection !== null &&\n                (!$isRangeSelection(selection) ||\n                    rootElement === null ||\n                    !rootElement.contains(nativeSelection.anchorNode))\n            ) {\n                setNodeIsText(false);\n                return;\n            }\n\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n\n            const node = getSelectedNode(selection);\n\n            if (\n                !$isCodeHighlightNode(selection.anchor.getNode()) &&\n                selection.getTextContent() !== \"\"\n            ) {\n                setNodeIsText($isTextNode(node));\n            } else {\n                setNodeIsText(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(() => {\n                updatePopup();\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [editor, updatePopup]);\n\n    if (!nodeIsText) {\n        return null;\n    }\n\n    return createPortal(\n        <FloatingToolbar type={type} anchorElem={anchorElem} editor={editor}>\n            {children}\n        </FloatingToolbar>,\n        anchorElem\n    );\n};\n\nexport interface ToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\n/**\n * @description Main toolbar container\n */\nexport const Toolbar = makeComposable<ToolbarProps>(\n    \"Toolbar\",\n    ({ anchorElem, type, children }): JSX.Element | null => {\n        const [editor] = useLexicalComposerContext();\n        return useToolbar({ editor, anchorElem, type, children });\n    }\n);\n"],"mappings":"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"}
+{"version":3,"names":["FloatingToolbar","children","anchorElem","editor","popupCharStylesEditorRef","useRef","updateTextFormatFloatingToolbar","useCallback","selection","$getSelection","popupCharStylesEditorElem","current","nativeSelection","window","getSelection","isLink","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","rootElement","getRootElement","isCollapsed","contains","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","isEditable","useToolbar","document","body","type","useRichTextEditor","nodeIsText","setNodeIsText","updatePopup","isComposing","$isCodeHighlightNode","anchor","getNode","getTextContent","$isTextNode","registerRootListener","createPortal","Toolbar","makeComposable","useLexicalComposerContext"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useRef } from \"react\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isTextNode,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { $isLinkNode } from \"@lexical/link\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $isCodeHighlightNode } from \"@lexical/code\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./Toolbar.css\";\nimport { ToolbarType } from \"~/types\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\n\ninterface FloatingToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ children, anchorElem, editor }) => {\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        let isLink = false;\n        if ($isRangeSelection(selection)) {\n            const node = getSelectedNode(selection);\n            // Update links\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent) || $isLinkNode(node)) {\n                isLink = true;\n            }\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode) &&\n            !isLink\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-text-format-popup\">\n            {editor.isEditable() && children}\n        </div>\n    );\n};\n\ninterface useToolbarProps {\n    editor: LexicalEditor;\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\nconst useToolbar: FC<useToolbarProps> = ({\n    editor,\n    anchorElem = document.body,\n    type,\n    children\n}): JSX.Element | null => {\n    const { nodeIsText, setNodeIsText } = useRichTextEditor();\n\n    const updatePopup = useCallback(() => {\n        editor.getEditorState().read(() => {\n            // Should not to pop up the floating toolbar when using IME input\n            if (editor.isComposing()) {\n                return;\n            }\n            const selection = $getSelection();\n            const nativeSelection = window.getSelection();\n            const rootElement = editor.getRootElement();\n\n            if (\n                nativeSelection !== null &&\n                (!$isRangeSelection(selection) ||\n                    rootElement === null ||\n                    !rootElement.contains(nativeSelection.anchorNode))\n            ) {\n                setNodeIsText(false);\n                return;\n            }\n\n            if (!$isRangeSelection(selection)) {\n                return;\n            }\n\n            const node = getSelectedNode(selection);\n\n            if (\n                !$isCodeHighlightNode(selection.anchor.getNode()) &&\n                selection.getTextContent() !== \"\"\n            ) {\n                setNodeIsText($isTextNode(node));\n            } else {\n                setNodeIsText(false);\n            }\n        });\n    }, [editor]);\n\n    useEffect(() => {\n        document.addEventListener(\"selectionchange\", updatePopup);\n        return () => {\n            document.removeEventListener(\"selectionchange\", updatePopup);\n        };\n    }, [updatePopup]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(() => {\n                updatePopup();\n            }),\n            editor.registerRootListener(() => {\n                if (editor.getRootElement() === null) {\n                    setNodeIsText(false);\n                }\n            })\n        );\n    }, [editor, updatePopup]);\n\n    if (!nodeIsText) {\n        return null;\n    }\n\n    return createPortal(\n        <FloatingToolbar type={type} anchorElem={anchorElem} editor={editor}>\n            {children}\n        </FloatingToolbar>,\n        anchorElem\n    );\n};\n\nexport interface ToolbarProps {\n    type: ToolbarType;\n    anchorElem: HTMLElement;\n    children?: React.ReactNode;\n}\n\n/**\n * @description Main toolbar container\n */\nexport const Toolbar = makeComposable<ToolbarProps>(\n    \"Toolbar\",\n    ({ anchorElem, type, children }): JSX.Element | null => {\n        const [editor] = useLexicalComposerContext();\n        return useToolbar({ editor, anchorElem, type, children });\n    }\n);\n"],"mappings":"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"}

package/components/ToolbarActions/BoldAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","BoldAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isBold","setIsBold","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["BoldAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. On toolbar, you can see as button that is bold.\n */\nexport const BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isBold, setIsBold] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n        setIsBold(!isBold);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isBold ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACO,IAAMG,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAApCG,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDH,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACIf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,EAAE;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAIP,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhCf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAACC,OAAA,CAAAlB,UAAA,GAAAA,UAAA"}
+{"version":3,"names":["BoldAction","useLexicalComposerContext","editor","useState","isBold","setIsBold","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND"],"sources":["BoldAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. On toolbar, you can see as button that is bold.\n */\nexport const BoldAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isBold, setIsBold] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n        setIsBold(!isBold);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isBold ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,GAAS;EAC5B,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBJ,MAAM,CAACK,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDH,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAME,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIF,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhC;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/BulletListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_list","_lexical","_utils","BulletListAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","activeEditor","setActiveEditor","_useState3","_useState4","isActive","setIsActive","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","anchor","getNode","element","getKey","$findMatchingParent","e","parent","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","$isListNode","parentList","$getNearestNodeOfType","ListNode","type","getListType","useEffect","mergeRegister","registerUpdateListener","_ref","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","formatBulletList","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","undefined","REMOVE_LIST_COMMAND","createElement","onClick","className","exports"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    $isListNode,\n    INSERT_UNORDERED_LIST_COMMAND,\n    ListNode,\n    REMOVE_LIST_COMMAND\n} from \"@lexical/list\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    COMMAND_PRIORITY_CRITICAL,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from \"@lexical/utils\";\n\n/**\n * Toolbar button action. On click will wrap the content in bullet list style.\n */\nexport const BulletListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [activeEditor, setActiveEditor] = useState(editor);\n    const [isActive, setIsActive] = useState<boolean>(false);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection)) {\n            const anchorNode = selection.anchor.getNode();\n            let element =\n                anchorNode.getKey() === \"root\"\n                    ? anchorNode\n                    : $findMatchingParent(anchorNode, e => {\n                          const parent = e.getParent();\n                          return parent !== null && $isRootOrShadowRoot(parent);\n                      });\n\n            if (element === null) {\n                element = anchorNode.getTopLevelElementOrThrow();\n            }\n\n            if ($isListNode(element)) {\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                // get the type of the list that is selected with the cursor\n                const type = parentList ? parentList.getListType() : element.getListType();\n                // set the button as active for numbered list\n                if (type === \"bullet\") {\n                    setIsActive(true);\n                } else {\n                    setIsActive(false);\n                }\n            }\n        }\n    }, [activeEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            activeEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            })\n        );\n    }, [activeEditor, editor, updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n\n    const formatBulletList = () => {\n        if (!isActive) {\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n            // removing will not update correctly the active state, so we need to set to false manually.\n            setIsActive(false);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["BulletListAction","useLexicalComposerContext","editor","useState","activeEditor","setActiveEditor","isActive","setIsActive","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","anchorNode","anchor","getNode","element","getKey","$findMatchingParent","e","parent","getParent","$isRootOrShadowRoot","getTopLevelElementOrThrow","$isListNode","parentList","$getNearestNodeOfType","ListNode","type","getListType","useEffect","mergeRegister","registerUpdateListener","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_payload","newEditor","COMMAND_PRIORITY_CRITICAL","formatBulletList","dispatchCommand","INSERT_UNORDERED_LIST_COMMAND","undefined","REMOVE_LIST_COMMAND"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport {\n    $isListNode,\n    INSERT_UNORDERED_LIST_COMMAND,\n    ListNode,\n    REMOVE_LIST_COMMAND\n} from \"@lexical/list\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    $isRootOrShadowRoot,\n    COMMAND_PRIORITY_CRITICAL,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from \"@lexical/utils\";\n\n/**\n * Toolbar button action. On click will wrap the content in bullet list style.\n */\nexport const BulletListAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [activeEditor, setActiveEditor] = useState(editor);\n    const [isActive, setIsActive] = useState<boolean>(false);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection)) {\n            const anchorNode = selection.anchor.getNode();\n            let element =\n                anchorNode.getKey() === \"root\"\n                    ? anchorNode\n                    : $findMatchingParent(anchorNode, e => {\n                          const parent = e.getParent();\n                          return parent !== null && $isRootOrShadowRoot(parent);\n                      });\n\n            if (element === null) {\n                element = anchorNode.getTopLevelElementOrThrow();\n            }\n\n            if ($isListNode(element)) {\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                // get the type of the list that is selected with the cursor\n                const type = parentList ? parentList.getListType() : element.getListType();\n                // set the button as active for numbered list\n                if (type === \"bullet\") {\n                    setIsActive(true);\n                } else {\n                    setIsActive(false);\n                }\n            }\n        }\n    }, [activeEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            activeEditor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateToolbar();\n                });\n            })\n        );\n    }, [activeEditor, editor, updateToolbar]);\n\n    useEffect(() => {\n        return editor.registerCommand(\n            SELECTION_CHANGE_COMMAND,\n            (_payload, newEditor) => {\n                updateToolbar();\n                setActiveEditor(newEditor);\n                return false;\n            },\n            COMMAND_PRIORITY_CRITICAL\n        );\n    }, [editor, updateToolbar]);\n\n    const formatBulletList = () => {\n        if (!isActive) {\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n            // removing will not update correctly the active state, so we need to set to false manually.\n            setIsActive(false);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isActive ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":"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"}

package/components/ToolbarActions/CodeHighlightAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_lexical","CodeHighlightAction","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useState","useState","_useState2","isCode","setIsCode","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","createElement","onClick","className","exports"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. User can highlight the selected text.\n * - Gray background will be visible on selected text after clicking on the button.\n */\nexport const CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isCode, setIsCode] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n        setIsCode(!isCode);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isCode ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACO,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;EACrC,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,GAAE;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,SAAA,GAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAAC,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAE,SAAA;IAApCG,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDH,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACIf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IACIC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMJ,WAAW,EAAE;IAAA,CAAC;IAC7BK,SAAS,EAAE,oBAAoB,IAAIP,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhCf,MAAA,CAAAU,OAAA,CAAAU,aAAA;IAAGE,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAACC,OAAA,CAAAlB,mBAAA,GAAAA,mBAAA"}
+{"version":3,"names":["CodeHighlightAction","useLexicalComposerContext","editor","useState","isCode","setIsCode","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND"],"sources":["CodeHighlightAction.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\n\n/**\n * Toolbar action. User can highlight the selected text.\n * - Gray background will be visible on selected text after clicking on the button.\n */\nexport const CodeHighlightAction = () => {\n    const [editor] = useLexicalComposerContext();\n    const [isCode, setIsCode] = useState(false);\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"code\");\n        setIsCode(!isCode);\n    };\n\n    return (\n        <button\n            onClick={() => handleClick()}\n            className={\"popup-item spaced \" + (isCode ? \"active\" : \"\")}\n            aria-label=\"Text code highlight\"\n        >\n            <i className=\"format code\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EACrC,4BAAiB,IAAAC,iDAAyB,GAAE;IAAA;IAArCC,MAAM;EACb,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACtBJ,MAAM,CAACK,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;IACnDH,SAAS,CAAC,CAACD,MAAM,CAAC;EACtB,CAAC;EAED,oBACI;IACI,OAAO,EAAE;MAAA,OAAME,WAAW,EAAE;IAAA,CAAC;IAC7B,SAAS,EAAE,oBAAoB,IAAIF,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC3D,cAAW;EAAqB,gBAEhC;IAAG,SAAS,EAAC;EAAa,EAAG,CACxB;AAEjB,CAAC;AAAC"}

package/components/ToolbarActions/FontColorAction.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const FontColorPicker: import("@webiny/react-composition").ComposableFC<unknown>;
+interface FontActionColorPicker {
+    element: JSX.Element;
+}
+declare const FontActionColorPicker: React.FC<FontActionColorPicker>;
+export interface FontColorAction extends React.FC<unknown> {
+    ColorPicker: typeof FontActionColorPicker;
+}
+export declare const FontColorAction: FontColorAction;
+export {};