@webiny/app-website-builder 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/inputRenderers/LexicalInput/DefaultLexicalConfig.js

@@ -1,110 +1,101 @@
-import React from "react";
-import { TypographyAction, FontColorAction, Divider, BoldAction, ItalicAction, UnderlineAction, CodeHighlightAction, NumberedListAction, BulletListAction, ImageAction, LinkAction, QuoteAction, ImagesPlugin, QuotePlugin, FloatingLinkEditorPlugin, LinkPlugin, ListPlugin, TypographyPlugin, FontColorPlugin, TextAlignmentAction } from "@webiny/lexical-editor";
-import { CompositionScope } from "@webiny/app-admin";
-import { LexicalEditorConfig } from "@webiny/lexical-editor";
-import { TypographyDropDown } from "./TypographyDropDown";
-import { ExpandEditorAction } from "./ExpandEditorAction";
-import { LinkEditForm } from "./LinkEditForm";
-const {
-  ToolbarElement,
-  Plugin
-} = LexicalEditorConfig;
-const sharedPlugins = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Plugin, {
-  name: "fontColor",
-  element: /*#__PURE__*/React.createElement(FontColorPlugin, null)
-}), /*#__PURE__*/React.createElement(Plugin, {
-  name: "list",
-  element: /*#__PURE__*/React.createElement(ListPlugin, null)
-}), /*#__PURE__*/React.createElement(Plugin, {
-  name: "typography",
-  element: /*#__PURE__*/React.createElement(TypographyPlugin, null)
-}), /*#__PURE__*/React.createElement(Plugin, {
-  name: "link",
-  element: /*#__PURE__*/React.createElement(LinkPlugin, null)
-}), /*#__PURE__*/React.createElement(Plugin, {
-  name: "floatingLinkEditor",
-  element: /*#__PURE__*/React.createElement(FloatingLinkEditorPlugin, {
-    anchorElem: () => document.body,
-    LinkEditForm: LinkEditForm
-  })
-}), /*#__PURE__*/React.createElement(Plugin, {
-  name: "images",
-  element: /*#__PURE__*/React.createElement(ImagesPlugin, null)
-}), /*#__PURE__*/React.createElement(Plugin, {
-  name: "quote",
-  element: /*#__PURE__*/React.createElement(QuotePlugin, null)
-}));
-export const DefaultLexicalConfig = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CompositionScope, {
-    name: "compact"
-  }, /*#__PURE__*/React.createElement(LexicalEditorConfig, null, sharedPlugins, /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "textAlignment",
-    element: /*#__PURE__*/React.createElement(TextAlignmentAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "boldAction",
-    element: /*#__PURE__*/React.createElement(BoldAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "italic",
-    element: /*#__PURE__*/React.createElement(ItalicAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "underline",
-    element: /*#__PURE__*/React.createElement(UnderlineAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "expand",
-    element: /*#__PURE__*/React.createElement(ExpandEditorAction, null)
-  }))), /*#__PURE__*/React.createElement(CompositionScope, {
-    name: "expanded"
-  }, /*#__PURE__*/React.createElement(TypographyAction.TypographyDropDown, {
-    element: /*#__PURE__*/React.createElement(TypographyDropDown, null)
-  }), /*#__PURE__*/React.createElement(LexicalEditorConfig, null, sharedPlugins, /*#__PURE__*/React.createElement(ToolbarElement, {
+import react from "react";
+import { BoldAction, BulletListAction, CodeHighlightAction, Divider, FloatingLinkEditorPlugin, FontColorAction, FontColorPlugin, FontSizeAction, ItalicAction, LexicalEditorConfig, LinkAction, LinkPlugin, ListPlugin, NumberedListAction, QuoteAction, QuotePlugin, TextAlignmentAction, TypographyAction, TypographyPlugin, UnderlineAction } from "@webiny/lexical-editor";
+import { CompositionScope, LexicalLinkForm } from "@webiny/app-admin";
+import { TypographyDropDown } from "./TypographyDropDown.js";
+import { ExpandEditorAction } from "./ExpandEditorAction.js";
+const { ToolbarElement: ToolbarElement, Plugin: Plugin } = LexicalEditorConfig;
+const sharedPlugins = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Plugin, {
     name: "fontColor",
-    element: /*#__PURE__*/React.createElement(FontColorAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
+    element: /*#__PURE__*/ react.createElement(FontColorPlugin, null)
+}), /*#__PURE__*/ react.createElement(Plugin, {
+    name: "list",
+    element: /*#__PURE__*/ react.createElement(ListPlugin, null)
+}), /*#__PURE__*/ react.createElement(Plugin, {
     name: "typography",
-    element: /*#__PURE__*/React.createElement(TypographyAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "textAlignment",
-    element: /*#__PURE__*/React.createElement(TextAlignmentAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "divider1",
-    element: /*#__PURE__*/React.createElement(Divider, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "boldAction",
-    element: /*#__PURE__*/React.createElement(BoldAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "italic",
-    element: /*#__PURE__*/React.createElement(ItalicAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "underline",
-    element: /*#__PURE__*/React.createElement(UnderlineAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "codeHighlight",
-    element: /*#__PURE__*/React.createElement(CodeHighlightAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "divider2",
-    element: /*#__PURE__*/React.createElement(Divider, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "numberedList",
-    element: /*#__PURE__*/React.createElement(NumberedListAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "bulletList",
-    element: /*#__PURE__*/React.createElement(BulletListAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "divider",
-    element: /*#__PURE__*/React.createElement(Divider, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "image",
-    element: /*#__PURE__*/React.createElement(ImageAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
-    name: "divider3",
-    element: /*#__PURE__*/React.createElement(Divider, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
+    element: /*#__PURE__*/ react.createElement(TypographyPlugin, null)
+}), /*#__PURE__*/ react.createElement(Plugin, {
     name: "link",
-    element: /*#__PURE__*/React.createElement(LinkAction, null)
-  }), /*#__PURE__*/React.createElement(ToolbarElement, {
+    element: /*#__PURE__*/ react.createElement(LinkPlugin, null)
+}), /*#__PURE__*/ react.createElement(Plugin, {
     name: "quote",
-    element: /*#__PURE__*/React.createElement(QuoteAction, null)
-  }))));
-};
+    element: /*#__PURE__*/ react.createElement(QuotePlugin, null)
+}));
+const DefaultLexicalConfig = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "compact"
+    }, /*#__PURE__*/ react.createElement(LexicalEditorConfig, {
+        priority: "primary"
+    }, sharedPlugins, /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "textAlignment",
+        element: /*#__PURE__*/ react.createElement(TextAlignmentAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "boldAction",
+        element: /*#__PURE__*/ react.createElement(BoldAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "italic",
+        element: /*#__PURE__*/ react.createElement(ItalicAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "underline",
+        element: /*#__PURE__*/ react.createElement(UnderlineAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "expand",
+        element: /*#__PURE__*/ react.createElement(ExpandEditorAction, null)
+    }))), /*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "expanded"
+    }, /*#__PURE__*/ react.createElement(TypographyAction.TypographyDropDown, {
+        element: /*#__PURE__*/ react.createElement(TypographyDropDown, null)
+    }), /*#__PURE__*/ react.createElement(LexicalEditorConfig, {
+        priority: "primary"
+    }, sharedPlugins, /*#__PURE__*/ react.createElement(Plugin, {
+        name: "floatingLinkEditor",
+        element: /*#__PURE__*/ react.createElement(FloatingLinkEditorPlugin, {
+            LinkForm: LexicalLinkForm
+        })
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "fontSize",
+        element: /*#__PURE__*/ react.createElement(FontSizeAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "fontColor",
+        element: /*#__PURE__*/ react.createElement(FontColorAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "typography",
+        element: /*#__PURE__*/ react.createElement(TypographyAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "textAlignment",
+        element: /*#__PURE__*/ react.createElement(TextAlignmentAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider1",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "boldAction",
+        element: /*#__PURE__*/ react.createElement(BoldAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "italic",
+        element: /*#__PURE__*/ react.createElement(ItalicAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "underline",
+        element: /*#__PURE__*/ react.createElement(UnderlineAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "codeHighlight",
+        element: /*#__PURE__*/ react.createElement(CodeHighlightAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider2",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "numberedList",
+        element: /*#__PURE__*/ react.createElement(NumberedListAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "bulletList",
+        element: /*#__PURE__*/ react.createElement(BulletListAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "divider2",
+        element: /*#__PURE__*/ react.createElement(Divider, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "link",
+        element: /*#__PURE__*/ react.createElement(LinkAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "quote",
+        element: /*#__PURE__*/ react.createElement(QuoteAction, null)
+    }))));
+export { DefaultLexicalConfig };
 
 //# sourceMappingURL=DefaultLexicalConfig.js.map

package/inputRenderers/LexicalInput/DefaultLexicalConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TypographyAction","FontColorAction","Divider","BoldAction","ItalicAction","UnderlineAction","CodeHighlightAction","NumberedListAction","BulletListAction","ImageAction","LinkAction","QuoteAction","ImagesPlugin","QuotePlugin","FloatingLinkEditorPlugin","LinkPlugin","ListPlugin","TypographyPlugin","FontColorPlugin","TextAlignmentAction","CompositionScope","LexicalEditorConfig","TypographyDropDown","ExpandEditorAction","LinkEditForm","ToolbarElement","Plugin","sharedPlugins","createElement","Fragment","name","element","anchorElem","document","body","DefaultLexicalConfig"],"sources":["DefaultLexicalConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TypographyAction,\n    FontColorAction,\n    Divider,\n    BoldAction,\n    ItalicAction,\n    UnderlineAction,\n    CodeHighlightAction,\n    NumberedListAction,\n    BulletListAction,\n    ImageAction,\n    LinkAction,\n    QuoteAction,\n    ImagesPlugin,\n    QuotePlugin,\n    FloatingLinkEditorPlugin,\n    LinkPlugin,\n    ListPlugin,\n    TypographyPlugin,\n    FontColorPlugin,\n    TextAlignmentAction\n} from \"@webiny/lexical-editor\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport { LexicalEditorConfig } from \"@webiny/lexical-editor\";\nimport { TypographyDropDown } from \"./TypographyDropDown\";\nimport { ExpandEditorAction } from \"./ExpandEditorAction\";\nimport { LinkEditForm } from \"./LinkEditForm\";\n\nconst { ToolbarElement, Plugin } = LexicalEditorConfig;\n\nconst sharedPlugins = (\n    <>\n        <Plugin name={\"fontColor\"} element={<FontColorPlugin />} />\n        <Plugin name={\"list\"} element={<ListPlugin />} />\n        <Plugin name={\"typography\"} element={<TypographyPlugin />} />\n        <Plugin name={\"link\"} element={<LinkPlugin />} />\n        <Plugin\n            name={\"floatingLinkEditor\"}\n            element={\n                <FloatingLinkEditorPlugin\n                    anchorElem={() => document.body}\n                    LinkEditForm={LinkEditForm}\n                />\n            }\n        />\n        <Plugin name={\"images\"} element={<ImagesPlugin />} />\n        <Plugin name={\"quote\"} element={<QuotePlugin />} />\n    </>\n);\n\nexport const DefaultLexicalConfig = () => {\n    return (\n        <>\n            <CompositionScope name={\"compact\"}>\n                <LexicalEditorConfig>\n                    {sharedPlugins}\n                    <ToolbarElement name=\"textAlignment\" element={<TextAlignmentAction />} />\n                    <ToolbarElement name=\"boldAction\" element={<BoldAction />} />\n                    <ToolbarElement name=\"italic\" element={<ItalicAction />} />\n                    <ToolbarElement name=\"underline\" element={<UnderlineAction />} />\n                    <ToolbarElement name=\"expand\" element={<ExpandEditorAction />} />\n                </LexicalEditorConfig>\n            </CompositionScope>\n            <CompositionScope name={\"expanded\"}>\n                <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />\n                <LexicalEditorConfig>\n                    {sharedPlugins}\n                    <ToolbarElement name=\"fontColor\" element={<FontColorAction />} />\n                    <ToolbarElement name=\"typography\" element={<TypographyAction />} />\n                    <ToolbarElement name=\"textAlignment\" element={<TextAlignmentAction />} />\n                    <ToolbarElement name=\"divider1\" element={<Divider />} />\n                    <ToolbarElement name=\"boldAction\" element={<BoldAction />} />\n                    <ToolbarElement name=\"italic\" element={<ItalicAction />} />\n                    <ToolbarElement name=\"underline\" element={<UnderlineAction />} />\n                    <ToolbarElement name=\"codeHighlight\" element={<CodeHighlightAction />} />\n                    <ToolbarElement name=\"divider2\" element={<Divider />} />\n                    <ToolbarElement name=\"numberedList\" element={<NumberedListAction />} />\n                    <ToolbarElement name=\"bulletList\" element={<BulletListAction />} />\n                    <ToolbarElement name=\"divider\" element={<Divider />} />\n                    <ToolbarElement name=\"image\" element={<ImageAction />} />\n                    <ToolbarElement name=\"divider3\" element={<Divider />} />\n                    <ToolbarElement name=\"link\" element={<LinkAction />} />\n                    <ToolbarElement name=\"quote\" element={<QuoteAction />} />\n                </LexicalEditorConfig>\n            </CompositionScope>\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"inputRenderers/LexicalInput/DefaultLexicalConfig.js","sources":["../../../src/inputRenderers/LexicalInput/DefaultLexicalConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TypographyAction,\n    FontColorAction,\n    Divider,\n    BoldAction,\n    ItalicAction,\n    UnderlineAction,\n    CodeHighlightAction,\n    NumberedListAction,\n    BulletListAction,\n    LinkAction,\n    QuoteAction,\n    QuotePlugin,\n    FloatingLinkEditorPlugin,\n    LinkPlugin,\n    ListPlugin,\n    TypographyPlugin,\n    FontColorPlugin,\n    TextAlignmentAction\n} from \"@webiny/lexical-editor\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport { LexicalLinkForm } from \"@webiny/app-admin\";\nimport { LexicalEditorConfig } from \"@webiny/lexical-editor\";\nimport { TypographyDropDown } from \"./TypographyDropDown.js\";\nimport { ExpandEditorAction } from \"./ExpandEditorAction.js\";\nimport { FontSizeAction } from \"@webiny/lexical-editor\";\n\nconst { ToolbarElement, Plugin } = LexicalEditorConfig;\n\nconst sharedPlugins = (\n    <>\n        <Plugin name={\"fontColor\"} element={<FontColorPlugin />} />\n        <Plugin name={\"list\"} element={<ListPlugin />} />\n        <Plugin name={\"typography\"} element={<TypographyPlugin />} />\n        <Plugin name={\"link\"} element={<LinkPlugin />} />\n        <Plugin name={\"quote\"} element={<QuotePlugin />} />\n    </>\n);\n\nexport const DefaultLexicalConfig = () => {\n    return (\n        <>\n            <CompositionScope name={\"compact\"}>\n                <LexicalEditorConfig priority={\"primary\"}>\n                    {sharedPlugins}\n                    <ToolbarElement name=\"textAlignment\" element={<TextAlignmentAction />} />\n                    <ToolbarElement name=\"boldAction\" element={<BoldAction />} />\n                    <ToolbarElement name=\"italic\" element={<ItalicAction />} />\n                    <ToolbarElement name=\"underline\" element={<UnderlineAction />} />\n                    <ToolbarElement name=\"expand\" element={<ExpandEditorAction />} />\n                </LexicalEditorConfig>\n            </CompositionScope>\n            <CompositionScope name={\"expanded\"}>\n                <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />\n                <LexicalEditorConfig priority={\"primary\"}>\n                    {sharedPlugins}\n                    <Plugin\n                        name={\"floatingLinkEditor\"}\n                        element={<FloatingLinkEditorPlugin LinkForm={LexicalLinkForm} />}\n                    />\n                    <ToolbarElement name=\"fontSize\" element={<FontSizeAction />} />\n                    <ToolbarElement name=\"fontColor\" element={<FontColorAction />} />\n                    <ToolbarElement name=\"typography\" element={<TypographyAction />} />\n                    <ToolbarElement name=\"textAlignment\" element={<TextAlignmentAction />} />\n                    <ToolbarElement name=\"divider1\" element={<Divider />} />\n                    <ToolbarElement name=\"boldAction\" element={<BoldAction />} />\n                    <ToolbarElement name=\"italic\" element={<ItalicAction />} />\n                    <ToolbarElement name=\"underline\" element={<UnderlineAction />} />\n                    <ToolbarElement name=\"codeHighlight\" element={<CodeHighlightAction />} />\n                    <ToolbarElement name=\"divider2\" element={<Divider />} />\n                    <ToolbarElement name=\"numberedList\" element={<NumberedListAction />} />\n                    <ToolbarElement name=\"bulletList\" element={<BulletListAction />} />\n                    <ToolbarElement name=\"divider2\" element={<Divider />} />\n                    <ToolbarElement name=\"link\" element={<LinkAction />} />\n                    <ToolbarElement name=\"quote\" element={<QuoteAction />} />\n                </LexicalEditorConfig>\n            </CompositionScope>\n        </>\n    );\n};\n"],"names":["ToolbarElement","Plugin","LexicalEditorConfig","sharedPlugins","FontColorPlugin","ListPlugin","TypographyPlugin","LinkPlugin","QuotePlugin","DefaultLexicalConfig","CompositionScope","TextAlignmentAction","BoldAction","ItalicAction","UnderlineAction","ExpandEditorAction","TypographyAction","TypographyDropDown","FloatingLinkEditorPlugin","LexicalLinkForm","FontSizeAction","FontColorAction","Divider","CodeHighlightAction","NumberedListAction","BulletListAction","LinkAction","QuoteAction"],"mappings":";;;;;AA4BA,MAAM,EAAEA,gBAAAA,cAAc,EAAEC,QAAAA,MAAM,EAAE,GAAGC;AAEnC,MAAMC,gBAAgB,WAAHA,GACf,wDACI,oBAACF,QAAMA;IAAC,MAAM;IAAa,uBAAS,oBAACG,iBAAeA;kBACpD,oBAACH,QAAMA;IAAC,MAAM;IAAQ,uBAAS,oBAACI,YAAUA;kBAC1C,oBAACJ,QAAMA;IAAC,MAAM;IAAc,uBAAS,oBAACK,kBAAgBA;kBACtD,oBAACL,QAAMA;IAAC,MAAM;IAAQ,uBAAS,oBAACM,YAAUA;kBAC1C,oBAACN,QAAMA;IAAC,MAAM;IAAS,uBAAS,oBAACO,aAAWA;;AAI7C,MAAMC,uBAAuB,IACzB,WAAP,GACI,wDACI,oBAACC,kBAAgBA;QAAC,MAAM;qBACpB,oBAACR,qBAAmBA;QAAC,UAAU;OAC1BC,eAAaA,WAAAA,GACd,oBAACH,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACW,qBAAmBA;sBAClE,oBAACX,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACY,YAAUA;sBACtD,oBAACZ,gBAAcA;QAAC,MAAK;QAAS,uBAAS,oBAACa,cAAYA;sBACpD,oBAACb,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACc,iBAAeA;sBAC1D,oBAACd,gBAAcA;QAAC,MAAK;QAAS,uBAAS,oBAACe,oBAAkBA;wBAGlE,oBAACL,kBAAgBA;QAAC,MAAM;qBACpB,oBAACM,iBAAiB,kBAAkB;QAAC,uBAAS,oBAACC,oBAAkBA;sBACjE,oBAACf,qBAAmBA;QAAC,UAAU;OAC1BC,eAAaA,WAAAA,GACd,oBAACF,QAAMA;QACH,MAAM;QACN,uBAAS,oBAACiB,0BAAwBA;YAAC,UAAUC;;sBAEjD,oBAACnB,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACoB,gBAAcA;sBACxD,oBAACpB,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACqB,iBAAeA;sBAC1D,oBAACrB,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACgB,kBAAgBA;sBAC5D,oBAAChB,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACW,qBAAmBA;sBAClE,oBAACX,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACsB,SAAOA;sBACjD,oBAACtB,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACY,YAAUA;sBACtD,oBAACZ,gBAAcA;QAAC,MAAK;QAAS,uBAAS,oBAACa,cAAYA;sBACpD,oBAACb,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACc,iBAAeA;sBAC1D,oBAACd,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACuB,qBAAmBA;sBAClE,oBAACvB,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACsB,SAAOA;sBACjD,oBAACtB,gBAAcA;QAAC,MAAK;QAAe,uBAAS,oBAACwB,oBAAkBA;sBAChE,oBAACxB,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACyB,kBAAgBA;sBAC5D,oBAACzB,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACsB,SAAOA;sBACjD,oBAACtB,gBAAcA;QAAC,MAAK;QAAO,uBAAS,oBAAC0B,YAAUA;sBAChD,oBAAC1B,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAAC2B,aAAWA"}

package/inputRenderers/LexicalInput/ExpandEditorAction.js

@@ -1,16 +1,18 @@
-import React from "react";
-import { useExpandedEditor } from "./ExpandedEditor";
-export const ExpandEditorAction = () => {
-  const {
-    setExpanded
-  } = useExpandedEditor();
-  return /*#__PURE__*/React.createElement("button", {
-    onClick: () => setExpanded(expanded => !expanded),
-    className: "popup-item wby-absolute wby-right-0 wby-z-1",
-    "aria-label": "Expand editor"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "format expand"
-  }));
+import react from "react";
+import { useExpandedEditor } from "./ExpandedEditor.js";
+const ExpandEditorAction = ()=>{
+    const { setExpanded } = useExpandedEditor();
+    return /*#__PURE__*/ react.createElement("button", {
+        onClick: ()=>setExpanded((expanded)=>!expanded),
+        className: "popup-item absolute z-1",
+        style: {
+            right: 5
+        },
+        "aria-label": "Expand editor"
+    }, /*#__PURE__*/ react.createElement("i", {
+        className: "format expand"
+    }));
 };
+export { ExpandEditorAction };
 
 //# sourceMappingURL=ExpandEditorAction.js.map

package/inputRenderers/LexicalInput/ExpandEditorAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useExpandedEditor","ExpandEditorAction","setExpanded","createElement","onClick","expanded","className"],"sources":["ExpandEditorAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useExpandedEditor } from \"./ExpandedEditor\";\n\nexport const ExpandEditorAction = () => {\n    const { setExpanded } = useExpandedEditor();\n\n    return (\n        <button\n            onClick={() => setExpanded(expanded => !expanded)}\n            className={\"popup-item wby-absolute wby-right-0 wby-z-1\"}\n            aria-label=\"Expand editor\"\n        >\n            <i className=\"format expand\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACpC,MAAM;IAAEC;EAAY,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EAE3C,oBACID,KAAA,CAAAI,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAMF,WAAW,CAACG,QAAQ,IAAI,CAACA,QAAQ,CAAE;IAClDC,SAAS,EAAE,6CAA8C;IACzD,cAAW;EAAe,gBAE1BP,KAAA,CAAAI,aAAA;IAAGG,SAAS,EAAC;EAAe,CAAE,CAC1B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/LexicalInput/ExpandEditorAction.js","sources":["../../../src/inputRenderers/LexicalInput/ExpandEditorAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { useExpandedEditor } from \"./ExpandedEditor.js\";\n\nexport const ExpandEditorAction = () => {\n    const { setExpanded } = useExpandedEditor();\n\n    return (\n        <button\n            onClick={() => setExpanded(expanded => !expanded)}\n            className={\"popup-item absolute z-1\"}\n            style={{ right: 5 }}\n            aria-label=\"Expand editor\"\n        >\n            <i className=\"format expand\" />\n        </button>\n    );\n};\n"],"names":["ExpandEditorAction","setExpanded","useExpandedEditor","expanded"],"mappings":";;AAGO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,WAAW,EAAE,GAAGC;IAExB,OAAO,WAAP,GACI,oBAAC;QACG,SAAS,IAAMD,YAAYE,CAAAA,WAAY,CAACA;QACxC,WAAW;QACX,OAAO;YAAE,OAAO;QAAE;QAClB,cAAW;qBAEX,oBAAC;QAAE,WAAU;;AAGzB"}

package/inputRenderers/LexicalInput/ExpandedEditor.js

@@ -1,22 +1,19 @@
-import React, { useState } from "react";
-const ExpandedEditorContext = /*#__PURE__*/React.createContext(undefined);
-export const ExpandedEditorProvider = ({
-  children
-}) => {
-  const [isExpanded, setExpanded] = useState(false);
-  return /*#__PURE__*/React.createElement(ExpandedEditorContext.Provider, {
-    value: {
-      isExpanded,
-      setExpanded
-    }
-  }, children);
+import react, { useState } from "react";
+const ExpandedEditorContext = /*#__PURE__*/ react.createContext(void 0);
+const ExpandedEditorProvider = ({ children })=>{
+    const [isExpanded, setExpanded] = useState(false);
+    return /*#__PURE__*/ react.createElement(ExpandedEditorContext.Provider, {
+        value: {
+            isExpanded,
+            setExpanded
+        }
+    }, children);
 };
-export const useExpandedEditor = () => {
-  const context = React.useContext(ExpandedEditorContext);
-  if (!context) {
-    throw new Error(`Missing ExpandedEditorProvider in the component hierarchy!`);
-  }
-  return context;
+const useExpandedEditor = ()=>{
+    const context = react.useContext(ExpandedEditorContext);
+    if (!context) throw new Error("Missing ExpandedEditorProvider in the component hierarchy!");
+    return context;
 };
+export { ExpandedEditorProvider, useExpandedEditor };
 
 //# sourceMappingURL=ExpandedEditor.js.map

package/inputRenderers/LexicalInput/ExpandedEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ExpandedEditorContext","createContext","undefined","ExpandedEditorProvider","children","isExpanded","setExpanded","createElement","Provider","value","useExpandedEditor","context","useContext","Error"],"sources":["ExpandedEditor.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface ExpandedEditorContext {\n    isExpanded: boolean;\n    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst ExpandedEditorContext = React.createContext<ExpandedEditorContext | undefined>(undefined);\n\nexport const ExpandedEditorProvider = ({ children }: { children: React.ReactNode }) => {\n    const [isExpanded, setExpanded] = useState(false);\n    return (\n        <ExpandedEditorContext.Provider value={{ isExpanded, setExpanded }}>\n            {children}\n        </ExpandedEditorContext.Provider>\n    );\n};\n\nexport const useExpandedEditor = () => {\n    const context = React.useContext(ExpandedEditorContext);\n    if (!context) {\n        throw new Error(`Missing ExpandedEditorProvider in the component hierarchy!`);\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAOvC,MAAMC,qBAAqB,gBAAGF,KAAK,CAACG,aAAa,CAAoCC,SAAS,CAAC;AAE/F,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EAAEC;AAAwC,CAAC,KAAK;EACnF,MAAM,CAACC,UAAU,EAAEC,WAAW,CAAC,GAAGP,QAAQ,CAAC,KAAK,CAAC;EACjD,oBACID,KAAA,CAAAS,aAAA,CAACP,qBAAqB,CAACQ,QAAQ;IAACC,KAAK,EAAE;MAAEJ,UAAU;MAAEC;IAAY;EAAE,GAC9DF,QAC2B,CAAC;AAEzC,CAAC;AAED,OAAO,MAAMM,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,OAAO,GAAGb,KAAK,CAACc,UAAU,CAACZ,qBAAqB,CAAC;EACvD,IAAI,CAACW,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CAAC,4DAA4D,CAAC;EACjF;EAEA,OAAOF,OAAO;AAClB,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/LexicalInput/ExpandedEditor.js","sources":["../../../src/inputRenderers/LexicalInput/ExpandedEditor.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface ExpandedEditorContext {\n    isExpanded: boolean;\n    setExpanded: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst ExpandedEditorContext = React.createContext<ExpandedEditorContext | undefined>(undefined);\n\nexport const ExpandedEditorProvider = ({ children }: { children: React.ReactNode }) => {\n    const [isExpanded, setExpanded] = useState(false);\n    return (\n        <ExpandedEditorContext.Provider value={{ isExpanded, setExpanded }}>\n            {children}\n        </ExpandedEditorContext.Provider>\n    );\n};\n\nexport const useExpandedEditor = () => {\n    const context = React.useContext(ExpandedEditorContext);\n    if (!context) {\n        throw new Error(`Missing ExpandedEditorProvider in the component hierarchy!`);\n    }\n\n    return context;\n};\n"],"names":["ExpandedEditorContext","React","undefined","ExpandedEditorProvider","children","isExpanded","setExpanded","useState","useExpandedEditor","context","Error"],"mappings":";AAOA,MAAMA,wBAAwB,WAAHA,GAAGC,MAAAA,aAAmB,CAAoCC;AAE9E,MAAMC,yBAAyB,CAAC,EAAEC,QAAQ,EAAiC;IAC9E,MAAM,CAACC,YAAYC,YAAY,GAAGC,SAAS;IAC3C,OAAO,WAAP,GACI,oBAACP,sBAAsB,QAAQ;QAAC,OAAO;YAAEK;YAAYC;QAAY;OAC5DF;AAGb;AAEO,MAAMI,oBAAoB;IAC7B,MAAMC,UAAUR,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACS,SACD,MAAM,IAAIC,MAAM;IAGpB,OAAOD;AACX"}

package/inputRenderers/LexicalInput/LexicalEditor.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
-import type { RichTextEditorProps } from "@webiny/lexical-editor/types";
+import { LexicalEditor as BaseLexicalEditor } from "@webiny/app-admin";
 import "./wbStaticToolbar.css";
-export declare const LexicalEditor: (props: Omit<RichTextEditorProps, "theme">) => React.JSX.Element;
+export type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, "theme">;
+declare const ExpandedLexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
+declare const CompactLexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
+export declare const LexicalEditor: {
+    Expanded: typeof ExpandedLexicalEditor;
+    Compact: typeof CompactLexicalEditor;
+};
+export {};

package/inputRenderers/LexicalInput/LexicalEditor.js

@@ -1,65 +1,66 @@
-import React, { useCallback } from "react";
-import { RichTextEditor, StaticToolbar } from "@webiny/lexical-editor";
-import { FileManager } from "@webiny/app-admin";
-import { useWebsiteBuilderTheme } from "../../BaseEditor/components";
+import react from "react";
+import { AdminConfig, CompositionScope, LexicalEditor } from "@webiny/app-admin";
+import { StaticToolbar } from "@webiny/lexical-editor";
+import { createLexicalTokens } from "@webiny/lexical-theme/createLexicalEditorTokens.js";
+import { useWebsiteBuilderTheme } from "../../BaseEditor/components/index.js";
 import "./wbStaticToolbar.css";
 const placeholderStyles = {
-  position: "absolute",
-  top: 40,
-  left: 25
+    position: "absolute",
+    top: 0,
+    left: 0,
+    padding: "8px 12px",
+    marginTop: 0,
+    color: "var(--text-color-neutral-muted)"
 };
 const contentEditableStyles = {
-  minHeight: 200,
-  display: "block",
-  padding: 10
+    minHeight: 200,
+    display: "block",
+    padding: "8px 12px"
 };
 const styles = {
-  backgroundColor: "#fff",
-  border: "1px solid #e1e1e1",
-  padding: "10px 14px",
-  minHeight: 200,
-  maxHeight: 350,
-  fontFamily: "var(--wb-theme-font-family)"
+    backgroundColor: "var(--color-neutral-base)",
+    border: "1px solid var(--border-color-neutral-muted)",
+    borderTop: "none",
+    borderRadius: "0 0 var(--radius-md) var(--radius-md)",
+    minHeight: 200,
+    maxHeight: 350,
+    fontFamily: "var(--wb-theme-font-family)"
 };
-const toolbar = /*#__PURE__*/React.createElement(StaticToolbar, {
-  className: "wb-static-toolbar"
-});
-export const LexicalEditor = props => {
-  const {
-    theme
-  } = useWebsiteBuilderTheme();
-  const onChange = useCallback(jsonString => {
-    if (props?.onChange) {
-      props?.onChange(jsonString);
-    }
-  }, [props?.onChange]);
-  const editorTheme = {
-    emotionMap: {},
-    styles: theme?.styles ?? {},
-    ...theme?.lexical
-  };
-
-  /**
-   * To use Website Builder theme, we can't use the LexicalEditor component from @webiny/app-admin.
-   */
-  return /*#__PURE__*/React.createElement(FileManager, {
-    accept: ["image/*"]
-  }, ({
-    showFileManager
-  }) => /*#__PURE__*/React.createElement(RichTextEditor, Object.assign({}, props, {
-    onChange: onChange,
-    staticToolbar: toolbar,
-    tag: "p",
-    placeholder: props?.placeholder || "Enter your text here...",
-    placeholderStyles: placeholderStyles,
-    contentEditableStyles: contentEditableStyles,
-    styles: styles,
-    theme: editorTheme,
-    toolbarActionPlugins: [...(props.toolbarActionPlugins || []), {
-      targetAction: "image-action",
-      plugin: showFileManager
-    }]
-  })));
+const lexicalTokens = createLexicalTokens("wb-lx-");
+const { useAdminConfig: useAdminConfig } = AdminConfig;
+const LexicalEditorComponent = (props)=>{
+    const { theme } = useWebsiteBuilderTheme();
+    const { lexicalTheme } = useAdminConfig();
+    const editorTheme = {
+        colors: theme?.colors ?? [],
+        typography: theme?.typography ?? {},
+        fontSizes: theme?.fontSizes ?? [],
+        tokens: lexicalTokens,
+        allowCustomColors: theme?.allowCustomColors ?? lexicalTheme.allowCustomColors
+    };
+    return /*#__PURE__*/ react.createElement(LexicalEditor, {
+        ...props,
+        staticToolbar: /*#__PURE__*/ react.createElement(StaticToolbar, {
+            className: "wb-static-toolbar"
+        }),
+        tag: "p",
+        placeholder: props?.placeholder || "Enter your text here...",
+        placeholderStyles: placeholderStyles,
+        contentEditableStyles: contentEditableStyles,
+        styles: styles,
+        theme: editorTheme
+    });
+};
+const ExpandedLexicalEditor = (props)=>/*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "expanded"
+    }, /*#__PURE__*/ react.createElement(LexicalEditorComponent, props));
+const CompactLexicalEditor = (props)=>/*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "compact"
+    }, /*#__PURE__*/ react.createElement(LexicalEditorComponent, props));
+const LexicalEditor_LexicalEditor = {
+    Expanded: ExpandedLexicalEditor,
+    Compact: CompactLexicalEditor
 };
+export { LexicalEditor_LexicalEditor as LexicalEditor };
 
 //# sourceMappingURL=LexicalEditor.js.map

package/inputRenderers/LexicalInput/LexicalEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","RichTextEditor","StaticToolbar","FileManager","useWebsiteBuilderTheme","placeholderStyles","position","top","left","contentEditableStyles","minHeight","display","padding","styles","backgroundColor","border","maxHeight","fontFamily","toolbar","createElement","className","LexicalEditor","props","theme","onChange","jsonString","editorTheme","emotionMap","lexical","accept","showFileManager","Object","assign","staticToolbar","tag","placeholder","toolbarActionPlugins","targetAction","plugin"],"sources":["LexicalEditor.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { RichTextEditor, StaticToolbar } from \"@webiny/lexical-editor\";\nimport type { RichTextEditorProps } from \"@webiny/lexical-editor/types\";\nimport { FileManager } from \"@webiny/app-admin\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components\";\nimport \"./wbStaticToolbar.css\";\n\nconst placeholderStyles: React.CSSProperties = { position: \"absolute\", top: 40, left: 25 };\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: 10\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"#fff\",\n    border: \"1px solid #e1e1e1\",\n    padding: \"10px 14px\",\n    minHeight: 200,\n    maxHeight: 350,\n    fontFamily: \"var(--wb-theme-font-family)\"\n};\n\nconst toolbar = <StaticToolbar className={\"wb-static-toolbar\"} />;\n\nexport const LexicalEditor = (props: Omit<RichTextEditorProps, \"theme\">) => {\n    const { theme } = useWebsiteBuilderTheme();\n\n    const onChange = useCallback(\n        (jsonString: string) => {\n            if (props?.onChange) {\n                props?.onChange(jsonString);\n            }\n        },\n        [props?.onChange]\n    );\n\n    const editorTheme: EditorTheme = {\n        emotionMap: {},\n        styles: theme?.styles ?? {},\n        ...theme?.lexical\n    };\n\n    /**\n     * To use Website Builder theme, we can't use the LexicalEditor component from @webiny/app-admin.\n     */\n    return (\n        <FileManager accept={[\"image/*\"]}>\n            {({ showFileManager }) => (\n                <RichTextEditor\n                    {...props}\n                    onChange={onChange}\n                    staticToolbar={toolbar}\n                    tag={\"p\"}\n                    placeholder={props?.placeholder || \"Enter your text here...\"}\n                    placeholderStyles={placeholderStyles}\n                    contentEditableStyles={contentEditableStyles}\n                    styles={styles}\n                    theme={editorTheme}\n                    toolbarActionPlugins={[\n                        ...(props.toolbarActionPlugins || []),\n                        { targetAction: \"image-action\", plugin: showFileManager }\n                    ]}\n                />\n            )}\n        </FileManager>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,cAAc,EAAEC,aAAa,QAAQ,wBAAwB;AAEtE,SAASC,WAAW,QAAQ,mBAAmB;AAE/C,SAASC,sBAAsB;AAC/B;AAEA,MAAMC,iBAAsC,GAAG;EAAEC,QAAQ,EAAE,UAAU;EAAEC,GAAG,EAAE,EAAE;EAAEC,IAAI,EAAE;AAAG,CAAC;AAE1F,MAAMC,qBAA0C,GAAG;EAC/CC,SAAS,EAAE,GAAG;EACdC,OAAO,EAAE,OAAO;EAChBC,OAAO,EAAE;AACb,CAAC;AAED,MAAMC,MAA2B,GAAG;EAChCC,eAAe,EAAE,MAAM;EACvBC,MAAM,EAAE,mBAAmB;EAC3BH,OAAO,EAAE,WAAW;EACpBF,SAAS,EAAE,GAAG;EACdM,SAAS,EAAE,GAAG;EACdC,UAAU,EAAE;AAChB,CAAC;AAED,MAAMC,OAAO,gBAAGnB,KAAA,CAAAoB,aAAA,CAACjB,aAAa;EAACkB,SAAS,EAAE;AAAoB,CAAE,CAAC;AAEjE,OAAO,MAAMC,aAAa,GAAIC,KAAyC,IAAK;EACxE,MAAM;IAAEC;EAAM,CAAC,GAAGnB,sBAAsB,CAAC,CAAC;EAE1C,MAAMoB,QAAQ,GAAGxB,WAAW,CACvByB,UAAkB,IAAK;IACpB,IAAIH,KAAK,EAAEE,QAAQ,EAAE;MACjBF,KAAK,EAAEE,QAAQ,CAACC,UAAU,CAAC;IAC/B;EACJ,CAAC,EACD,CAACH,KAAK,EAAEE,QAAQ,CACpB,CAAC;EAED,MAAME,WAAwB,GAAG;IAC7BC,UAAU,EAAE,CAAC,CAAC;IACdd,MAAM,EAAEU,KAAK,EAAEV,MAAM,IAAI,CAAC,CAAC;IAC3B,GAAGU,KAAK,EAAEK;EACd,CAAC;;EAED;AACJ;AACA;EACI,oBACI7B,KAAA,CAAAoB,aAAA,CAAChB,WAAW;IAAC0B,MAAM,EAAE,CAAC,SAAS;EAAE,GAC5B,CAAC;IAAEC;EAAgB,CAAC,kBACjB/B,KAAA,CAAAoB,aAAA,CAAClB,cAAc,EAAA8B,MAAA,CAAAC,MAAA,KACPV,KAAK;IACTE,QAAQ,EAAEA,QAAS;IACnBS,aAAa,EAAEf,OAAQ;IACvBgB,GAAG,EAAE,GAAI;IACTC,WAAW,EAAEb,KAAK,EAAEa,WAAW,IAAI,yBAA0B;IAC7D9B,iBAAiB,EAAEA,iBAAkB;IACrCI,qBAAqB,EAAEA,qBAAsB;IAC7CI,MAAM,EAAEA,MAAO;IACfU,KAAK,EAAEG,WAAY;IACnBU,oBAAoB,EAAE,CAClB,IAAId,KAAK,CAACc,oBAAoB,IAAI,EAAE,CAAC,EACrC;MAAEC,YAAY,EAAE,cAAc;MAAEC,MAAM,EAAER;IAAgB,CAAC;EAC3D,EACL,CAEI,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/LexicalInput/LexicalEditor.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditor as BaseLexicalEditor, AdminConfig } from \"@webiny/app-admin\";\nimport { StaticToolbar } from \"@webiny/lexical-editor\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { createLexicalTokens } from \"@webiny/lexical-theme/createLexicalEditorTokens.js\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport \"./wbStaticToolbar.css\";\nimport { CompositionScope } from \"@webiny/app-admin\";\n\n// Overlay the contentEditable: same origin + same padding as `contentEditableStyles`, and\n// neutralize the Placeholder component's default -20px margin. This makes the placeholder's\n// first line land exactly on the editor's text start.\nconst placeholderStyles: React.CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    padding: \"8px 12px\",\n    marginTop: 0,\n    // Font size/family come from the paragraph typography class (applied by RichTextEditor);\n    // keep the placeholder muted.\n    color: \"var(--text-color-neutral-muted)\"\n};\n\nconst contentEditableStyles: React.CSSProperties = {\n    minHeight: 200,\n    display: \"block\",\n    padding: \"8px 12px\"\n};\n\nconst styles: React.CSSProperties = {\n    backgroundColor: \"var(--color-neutral-base)\",\n    border: \"1px solid var(--border-color-neutral-muted)\",\n    // The static toolbar carries the top border; the body drops it and rounds only the\n    // bottom corners so the two read as one seamless rounded box (matches Figma).\n    borderTop: \"none\",\n    borderRadius: \"0 0 var(--radius-md) var(--radius-md)\",\n    // Padding lives on the contentEditable only (avoids doubled inset).\n    minHeight: 200,\n    maxHeight: 350,\n    fontFamily: \"var(--wb-theme-font-family)\"\n};\n\nconst lexicalTokens = createLexicalTokens(\"wb-lx-\");\n\nexport type LexicalEditorProps = Omit<React.ComponentProps<typeof BaseLexicalEditor>, \"theme\">;\n\nconst { useAdminConfig } = AdminConfig;\n\nconst LexicalEditorComponent = (props: LexicalEditorProps) => {\n    const { theme } = useWebsiteBuilderTheme();\n    const { lexicalTheme } = useAdminConfig();\n\n    const editorTheme: EditorTheme = {\n        colors: theme?.colors ?? [],\n        typography: theme?.typography ?? {},\n        fontSizes: theme?.fontSizes ?? [],\n        tokens: lexicalTokens,\n        allowCustomColors: theme?.allowCustomColors ?? lexicalTheme.allowCustomColors\n    };\n\n    return (\n        <BaseLexicalEditor\n            {...props}\n            staticToolbar={<StaticToolbar className={\"wb-static-toolbar\"} />}\n            tag={\"p\"}\n            placeholder={props?.placeholder || \"Enter your text here...\"}\n            placeholderStyles={placeholderStyles}\n            contentEditableStyles={contentEditableStyles}\n            styles={styles}\n            theme={editorTheme}\n        />\n    );\n};\n\nconst ExpandedLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nconst CompactLexicalEditor = (props: LexicalEditorProps) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <LexicalEditorComponent {...props} />\n        </CompositionScope>\n    );\n};\n\nexport const LexicalEditor = {\n    Expanded: ExpandedLexicalEditor,\n    Compact: CompactLexicalEditor\n};\n"],"names":["placeholderStyles","contentEditableStyles","styles","lexicalTokens","createLexicalTokens","useAdminConfig","AdminConfig","LexicalEditorComponent","props","theme","useWebsiteBuilderTheme","lexicalTheme","editorTheme","BaseLexicalEditor","StaticToolbar","ExpandedLexicalEditor","CompositionScope","CompactLexicalEditor","LexicalEditor"],"mappings":";;;;;;AAYA,MAAMA,oBAAyC;IAC3C,UAAU;IACV,KAAK;IACL,MAAM;IACN,SAAS;IACT,WAAW;IAGX,OAAO;AACX;AAEA,MAAMC,wBAA6C;IAC/C,WAAW;IACX,SAAS;IACT,SAAS;AACb;AAEA,MAAMC,SAA8B;IAChC,iBAAiB;IACjB,QAAQ;IAGR,WAAW;IACX,cAAc;IAEd,WAAW;IACX,WAAW;IACX,YAAY;AAChB;AAEA,MAAMC,gBAAgBC,oBAAoB;AAI1C,MAAM,EAAEC,gBAAAA,cAAc,EAAE,GAAGC;AAE3B,MAAMC,yBAAyB,CAACC;IAC5B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,MAAMO,cAA2B;QAC7B,QAAQH,OAAO,UAAU,EAAE;QAC3B,YAAYA,OAAO,cAAc,CAAC;QAClC,WAAWA,OAAO,aAAa,EAAE;QACjC,QAAQN;QACR,mBAAmBM,OAAO,qBAAqBE,aAAa,iBAAiB;IACjF;IAEA,OAAO,WAAP,GACI,oBAACE,eAAiBA;QACb,GAAGL,KAAK;QACT,6BAAe,oBAACM,eAAaA;YAAC,WAAW;;QACzC,KAAK;QACL,aAAaN,OAAO,eAAe;QACnC,mBAAmBR;QACnB,uBAAuBC;QACvB,QAAQC;QACR,OAAOU;;AAGnB;AAEA,MAAMG,wBAAwB,CAACP,QACpB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKxC,MAAMS,uBAAuB,CAACT,QACnB,WAAP,GACI,oBAACQ,kBAAgBA;QAAC,MAAM;qBACpB,oBAACT,wBAA2BC;AAKjC,MAAMU,8BAAgB;IACzB,UAAUH;IACV,SAASE;AACb"}

package/inputRenderers/LexicalInput/LexicalEditorConfig.d.ts

@@ -1,10 +1,26 @@
 import React from "react";
 import { LexicalEditorConfig as BaseConfig } from "@webiny/lexical-editor";
+declare const ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
+declare const PluginConfig: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
+declare const NodeConfig: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
+export declare function CompactEditorConfig({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace CompactEditorConfig {
+    export { ToolbarAction };
+    export { PluginConfig as Plugin };
+    export { NodeConfig as Node };
+}
+export declare function ExpandedEditorConfig({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare namespace ExpandedEditorConfig {
+    export { ToolbarAction };
+    export { PluginConfig as Plugin };
+    export { NodeConfig as Node };
+}
 export declare const LexicalEditorConfig: {
-    ({ children }: {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    ToolbarAction: (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => React.JSX.Element;
-    Plugin: (props: React.ComponentProps<typeof BaseConfig.Plugin>) => React.JSX.Element;
-    Node: (props: React.ComponentProps<typeof BaseConfig.Node>) => React.JSX.Element;
+    Expanded: typeof ExpandedEditorConfig;
+    Compact: typeof CompactEditorConfig;
 };
+export {};