@webiny/app-website-builder 6.3.0-beta.4 → 6.4.0-beta.0

package/inputRenderers/LexicalInput/LexicalEditorConfig.js

@@ -1,38 +1,25 @@
-import React from "react";
-import { LexicalEditorConfig as BaseConfig } from "@webiny/lexical-editor";
+import react from "react";
+import { LexicalEditorConfig } from "@webiny/lexical-editor";
 import { CompositionScope } from "@webiny/react-composition";
-const ToolbarAction = props => {
-  return /*#__PURE__*/React.createElement(BaseConfig.ToolbarElement, props);
-};
-const PluginConfig = props => {
-  return /*#__PURE__*/React.createElement(BaseConfig.Plugin, props);
-};
-const NodeConfig = props => {
-  return /*#__PURE__*/React.createElement(BaseConfig.Node, props);
-};
-export const CompactEditorConfig = ({
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(CompositionScope, {
-    name: "compact"
-  }, /*#__PURE__*/React.createElement(BaseConfig, {
-    priority: "secondary"
-  }, children));
-};
+const ToolbarAction = (props)=>/*#__PURE__*/ react.createElement(LexicalEditorConfig.ToolbarElement, props);
+const PluginConfig = (props)=>/*#__PURE__*/ react.createElement(LexicalEditorConfig.Plugin, props);
+const NodeConfig = (props)=>/*#__PURE__*/ react.createElement(LexicalEditorConfig.Node, props);
+const CompactEditorConfig = ({ children })=>/*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "compact"
+    }, /*#__PURE__*/ react.createElement(LexicalEditorConfig, {
+        priority: "secondary"
+    }, children));
 CompactEditorConfig.ToolbarAction = ToolbarAction;
 CompactEditorConfig.Plugin = PluginConfig;
 CompactEditorConfig.Node = NodeConfig;
-export const ExpandedEditorConfig = ({
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(CompositionScope, {
-    name: "expanded"
-  }, /*#__PURE__*/React.createElement(BaseConfig, {
-    priority: "secondary"
-  }, children));
-};
+const ExpandedEditorConfig = ({ children })=>/*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "expanded"
+    }, /*#__PURE__*/ react.createElement(LexicalEditorConfig, {
+        priority: "secondary"
+    }, children));
 ExpandedEditorConfig.ToolbarAction = ToolbarAction;
 ExpandedEditorConfig.Plugin = PluginConfig;
 ExpandedEditorConfig.Node = NodeConfig;
+export { CompactEditorConfig, ExpandedEditorConfig };
 
 //# sourceMappingURL=LexicalEditorConfig.js.map

package/inputRenderers/LexicalInput/LexicalEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","LexicalEditorConfig","BaseConfig","CompositionScope","ToolbarAction","props","createElement","ToolbarElement","PluginConfig","Plugin","NodeConfig","Node","CompactEditorConfig","children","name","priority","ExpandedEditorConfig"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditorConfig as BaseConfig } from \"@webiny/lexical-editor\";\nimport { CompositionScope } from \"@webiny/react-composition\";\n\nconst ToolbarAction = (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => {\n    return <BaseConfig.ToolbarElement {...props} />;\n};\n\nconst PluginConfig = (props: React.ComponentProps<typeof BaseConfig.Plugin>) => {\n    return <BaseConfig.Plugin {...props} />;\n};\n\nconst NodeConfig = (props: React.ComponentProps<typeof BaseConfig.Node>) => {\n    return <BaseConfig.Node {...props} />;\n};\n\nexport const CompactEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <BaseConfig priority={\"secondary\"}>{children}</BaseConfig>\n        </CompositionScope>\n    );\n};\n\nCompactEditorConfig.ToolbarAction = ToolbarAction;\nCompactEditorConfig.Plugin = PluginConfig;\nCompactEditorConfig.Node = NodeConfig;\n\nexport const ExpandedEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <BaseConfig priority={\"secondary\"}>{children}</BaseConfig>\n        </CompositionScope>\n    );\n};\n\nExpandedEditorConfig.ToolbarAction = ToolbarAction;\nExpandedEditorConfig.Plugin = PluginConfig;\nExpandedEditorConfig.Node = NodeConfig;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,IAAIC,UAAU,QAAQ,wBAAwB;AAC1E,SAASC,gBAAgB,QAAQ,2BAA2B;AAE5D,MAAMC,aAAa,GAAIC,KAA6D,IAAK;EACrF,oBAAOL,KAAA,CAAAM,aAAA,CAACJ,UAAU,CAACK,cAAc,EAAKF,KAAQ,CAAC;AACnD,CAAC;AAED,MAAMG,YAAY,GAAIH,KAAqD,IAAK;EAC5E,oBAAOL,KAAA,CAAAM,aAAA,CAACJ,UAAU,CAACO,MAAM,EAAKJ,KAAQ,CAAC;AAC3C,CAAC;AAED,MAAMK,UAAU,GAAIL,KAAmD,IAAK;EACxE,oBAAOL,KAAA,CAAAM,aAAA,CAACJ,UAAU,CAACS,IAAI,EAAKN,KAAQ,CAAC;AACzC,CAAC;AAED,OAAO,MAAMO,mBAAmB,GAAGA,CAAC;EAAEC;AAAwC,CAAC,KAAK;EAChF,oBACIb,KAAA,CAAAM,aAAA,CAACH,gBAAgB;IAACW,IAAI,EAAE;EAAU,gBAC9Bd,KAAA,CAAAM,aAAA,CAACJ,UAAU;IAACa,QAAQ,EAAE;EAAY,GAAEF,QAAqB,CAC3C,CAAC;AAE3B,CAAC;AAEDD,mBAAmB,CAACR,aAAa,GAAGA,aAAa;AACjDQ,mBAAmB,CAACH,MAAM,GAAGD,YAAY;AACzCI,mBAAmB,CAACD,IAAI,GAAGD,UAAU;AAErC,OAAO,MAAMM,oBAAoB,GAAGA,CAAC;EAAEH;AAAwC,CAAC,KAAK;EACjF,oBACIb,KAAA,CAAAM,aAAA,CAACH,gBAAgB;IAACW,IAAI,EAAE;EAAW,gBAC/Bd,KAAA,CAAAM,aAAA,CAACJ,UAAU;IAACa,QAAQ,EAAE;EAAY,GAAEF,QAAqB,CAC3C,CAAC;AAE3B,CAAC;AAEDG,oBAAoB,CAACZ,aAAa,GAAGA,aAAa;AAClDY,oBAAoB,CAACP,MAAM,GAAGD,YAAY;AAC1CQ,oBAAoB,CAACL,IAAI,GAAGD,UAAU","ignoreList":[]}
+{"version":3,"file":"inputRenderers/LexicalInput/LexicalEditorConfig.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalEditorConfig as BaseConfig } from \"@webiny/lexical-editor\";\nimport { CompositionScope } from \"@webiny/react-composition\";\n\nconst ToolbarAction = (props: React.ComponentProps<typeof BaseConfig.ToolbarElement>) => {\n    return <BaseConfig.ToolbarElement {...props} />;\n};\n\nconst PluginConfig = (props: React.ComponentProps<typeof BaseConfig.Plugin>) => {\n    return <BaseConfig.Plugin {...props} />;\n};\n\nconst NodeConfig = (props: React.ComponentProps<typeof BaseConfig.Node>) => {\n    return <BaseConfig.Node {...props} />;\n};\n\nexport const CompactEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return (\n        <CompositionScope name={\"compact\"}>\n            <BaseConfig priority={\"secondary\"}>{children}</BaseConfig>\n        </CompositionScope>\n    );\n};\n\nCompactEditorConfig.ToolbarAction = ToolbarAction;\nCompactEditorConfig.Plugin = PluginConfig;\nCompactEditorConfig.Node = NodeConfig;\n\nexport const ExpandedEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return (\n        <CompositionScope name={\"expanded\"}>\n            <BaseConfig priority={\"secondary\"}>{children}</BaseConfig>\n        </CompositionScope>\n    );\n};\n\nExpandedEditorConfig.ToolbarAction = ToolbarAction;\nExpandedEditorConfig.Plugin = PluginConfig;\nExpandedEditorConfig.Node = NodeConfig;\n"],"names":["ToolbarAction","props","BaseConfig","PluginConfig","NodeConfig","CompactEditorConfig","children","CompositionScope","ExpandedEditorConfig"],"mappings":";;;AAIA,MAAMA,gBAAgB,CAACC,QACZ,WAAP,GAAO,oBAACC,oBAAAA,cAAyB,EAAKD;AAG1C,MAAME,eAAe,CAACF,QACX,WAAP,GAAO,oBAACC,oBAAAA,MAAiB,EAAKD;AAGlC,MAAMG,aAAa,CAACH,QACT,WAAP,GAAO,oBAACC,oBAAAA,IAAe,EAAKD;AAGzB,MAAMI,sBAAsB,CAAC,EAAEC,QAAQ,EAAiC,GACpE,WAAP,GACI,oBAACC,kBAAgBA;QAAC,MAAM;qBACpB,oBAACL,qBAAUA;QAAC,UAAU;OAAcI;AAKhDD,oBAAoB,aAAa,GAAGL;AACpCK,oBAAoB,MAAM,GAAGF;AAC7BE,oBAAoB,IAAI,GAAGD;AAEpB,MAAMI,uBAAuB,CAAC,EAAEF,QAAQ,EAAiC,GACrE,WAAP,GACI,oBAACC,kBAAgBA;QAAC,MAAM;qBACpB,oBAACL,qBAAUA;QAAC,UAAU;OAAcI;AAKhDE,qBAAqB,aAAa,GAAGR;AACrCQ,qBAAqB,MAAM,GAAGL;AAC9BK,qBAAqB,IAAI,GAAGJ"}

package/inputRenderers/LexicalInput/LexicalInput.js

@@ -1,79 +1,76 @@
-import React, { useCallback, useEffect, useState } from "react";
+import react, { useCallback, useEffect, useState } from "react";
 import { Dialog, FormComponentLabel } from "@webiny/admin-ui";
 import { CompositionScope } from "@webiny/app-admin";
 import { LexicalEditor } from "./LexicalEditor.js";
 import { ExpandedEditorProvider, useExpandedEditor } from "./ExpandedEditor.js";
-export const LexicalInputRenderer = props => {
-  const onChange = lexicalValue => {
-    props.onChange(({
-      value
-    }) => {
-      value.set(lexicalValue);
-    });
-  };
-  const value = props.value ?? {};
-  return /*#__PURE__*/React.createElement(ExpandedEditorProvider, null, /*#__PURE__*/React.createElement(ExpandableLexicalInputRenderer, Object.assign({}, props, {
-    value: value,
-    onChange: onChange
-  })));
+const LexicalInputRenderer = (props)=>{
+    const onChange = (lexicalValue)=>{
+        props.onChange(({ value })=>{
+            value.set(lexicalValue);
+        });
+    };
+    const value = props.value ?? {};
+    return /*#__PURE__*/ react.createElement(ExpandedEditorProvider, null, /*#__PURE__*/ react.createElement(ExpandableLexicalInputRenderer, {
+        ...props,
+        value: value,
+        onChange: onChange
+    }));
 };
-const EditorDialog = props => {
-  const [localValue, setLocalValue] = useState(props.value);
-  useEffect(() => {
-    setLocalValue(props.value);
-  }, [props.value]);
-  return /*#__PURE__*/React.createElement(Dialog, {
-    id: "lexical-editor-dialog",
-    open: props.open,
-    className: "w-[900px] max-w-[900px] overflow-visible",
-    "data-hover-manager": "ignore",
-    title: `Edit ${props.input.label}`,
-    dismissible: false,
-    showCloseButton: false,
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, {
-      onClick: props.onClose
-    }), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, {
-      text: "Save Changes",
-      onClick: () => {
-        props.onChange(localValue);
-      }
-    }))
-  }, /*#__PURE__*/React.createElement(CompositionScope, {
-    name: "expanded"
-  }, /*#__PURE__*/React.createElement(LexicalEditor, {
-    value: localValue,
-    onChange: setLocalValue
-  })));
+const EditorDialog = (props)=>{
+    const [localValue, setLocalValue] = useState(props.value);
+    useEffect(()=>{
+        setLocalValue(props.value);
+    }, [
+        props.value
+    ]);
+    return /*#__PURE__*/ react.createElement(Dialog, {
+        id: "lexical-editor-dialog",
+        open: props.open,
+        className: "w-[900px] max-w-[900px] overflow-visible",
+        "data-hover-manager": "ignore",
+        title: `Edit ${props.input.label}`,
+        dismissible: false,
+        showCloseButton: false,
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Dialog.CancelAction, {
+            onClick: props.onClose
+        }), /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, {
+            text: "Save Changes",
+            onClick: ()=>{
+                props.onChange(localValue);
+            }
+        }))
+    }, /*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "expanded"
+    }, /*#__PURE__*/ react.createElement(LexicalEditor, {
+        value: localValue,
+        onChange: setLocalValue
+    })));
 };
-const ExpandableLexicalInputRenderer = ({
-  value,
-  onChange,
-  input,
-  label
-}) => {
-  const {
-    isExpanded,
-    setExpanded
-  } = useExpandedEditor();
-  const applyChanges = useCallback(newValue => {
-    onChange(newValue);
-    setExpanded(false);
-  }, [onChange, setExpanded]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: label
-  }), /*#__PURE__*/React.createElement(CompositionScope, {
-    name: "compact"
-  }, /*#__PURE__*/React.createElement(LexicalEditor, {
-    value: value,
-    onChange: onChange,
-    key: input.name
-  })), /*#__PURE__*/React.createElement(EditorDialog, {
-    open: isExpanded,
-    value: value,
-    onChange: applyChanges,
-    onClose: () => setExpanded(false),
-    input: input
-  }));
+const ExpandableLexicalInputRenderer = ({ value, onChange, input, label })=>{
+    const { isExpanded, setExpanded } = useExpandedEditor();
+    const applyChanges = useCallback((newValue)=>{
+        onChange(newValue);
+        setExpanded(false);
+    }, [
+        onChange,
+        setExpanded
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: label
+    }), /*#__PURE__*/ react.createElement(CompositionScope, {
+        name: "compact"
+    }, /*#__PURE__*/ react.createElement(LexicalEditor, {
+        value: value,
+        onChange: onChange,
+        key: input.name
+    })), /*#__PURE__*/ react.createElement(EditorDialog, {
+        open: isExpanded,
+        value: value,
+        onChange: applyChanges,
+        onClose: ()=>setExpanded(false),
+        input: input
+    }));
 };
+export { LexicalInputRenderer };
 
 //# sourceMappingURL=LexicalInput.js.map

package/inputRenderers/LexicalInput/LexicalInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","Dialog","FormComponentLabel","CompositionScope","LexicalEditor","ExpandedEditorProvider","useExpandedEditor","LexicalInputRenderer","props","onChange","lexicalValue","value","set","createElement","ExpandableLexicalInputRenderer","Object","assign","EditorDialog","localValue","setLocalValue","id","open","className","title","input","label","dismissible","showCloseButton","actions","Fragment","CancelAction","onClick","onClose","ConfirmAction","text","name","isExpanded","setExpanded","applyChanges","newValue","key"],"sources":["LexicalInput.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { Dialog, FormComponentLabel } from \"@webiny/admin-ui\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport type { RichTextValueWithHtml } from \"@webiny/app-admin\";\nimport { LexicalEditor } from \"./LexicalEditor.js\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport {\n    ExpandedEditorProvider,\n    useExpandedEditor\n} from \"~/inputRenderers/LexicalInput/ExpandedEditor.js\";\n\ntype LexicalInputRendererProps = Omit<ElementInputRendererProps, \"onChange\" | \"metadata\"> & {\n    onChange: (value: RichTextValueWithHtml) => void;\n};\n\nexport const LexicalInputRenderer = (props: ElementInputRendererProps) => {\n    const onChange = (lexicalValue: RichTextValueWithHtml) => {\n        props.onChange(({ value }) => {\n            value.set(lexicalValue);\n        });\n    };\n\n    const value = props.value ?? {};\n\n    return (\n        <ExpandedEditorProvider>\n            <ExpandableLexicalInputRenderer {...props} value={value} onChange={onChange} />\n        </ExpandedEditorProvider>\n    );\n};\n\ninterface EditorDialogProps extends Omit<LexicalInputRendererProps, \"onPreviewChange\" | \"label\"> {\n    open: boolean;\n    onClose: () => void;\n}\n\nconst EditorDialog = (props: EditorDialogProps) => {\n    const [localValue, setLocalValue] = useState(props.value);\n\n    useEffect(() => {\n        setLocalValue(props.value);\n    }, [props.value]);\n\n    return (\n        <Dialog\n            id={\"lexical-editor-dialog\"}\n            open={props.open}\n            className={\"w-[900px] max-w-[900px] overflow-visible\"}\n            data-hover-manager={\"ignore\"}\n            title={`Edit ${props.input.label}`}\n            dismissible={false}\n            showCloseButton={false}\n            actions={\n                <>\n                    <Dialog.CancelAction onClick={props.onClose} />\n                    <Dialog.ConfirmAction\n                        text={\"Save Changes\"}\n                        onClick={() => {\n                            props.onChange(localValue);\n                        }}\n                    />\n                </>\n            }\n        >\n            <CompositionScope name={\"expanded\"}>\n                <LexicalEditor value={localValue} onChange={setLocalValue} />\n            </CompositionScope>\n        </Dialog>\n    );\n};\n\nconst ExpandableLexicalInputRenderer = ({\n    value,\n    onChange,\n    input,\n    label\n}: LexicalInputRendererProps) => {\n    const { isExpanded, setExpanded } = useExpandedEditor();\n\n    const applyChanges = useCallback(\n        (newValue: any) => {\n            onChange(newValue);\n            setExpanded(false);\n        },\n        [onChange, setExpanded]\n    );\n\n    return (\n        <>\n            <FormComponentLabel text={label} />\n            <CompositionScope name={\"compact\"}>\n                <LexicalEditor value={value} onChange={onChange} key={input.name} />\n            </CompositionScope>\n            <EditorDialog\n                open={isExpanded}\n                value={value}\n                onChange={applyChanges}\n                onClose={() => setExpanded(false)}\n                input={input}\n            />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,MAAM,EAAEC,kBAAkB,QAAQ,kBAAkB;AAC7D,SAASC,gBAAgB,QAAQ,mBAAmB;AAEpD,SAASC,aAAa;AAEtB,SACIC,sBAAsB,EACtBC,iBAAiB;AAOrB,OAAO,MAAMC,oBAAoB,GAAIC,KAAgC,IAAK;EACtE,MAAMC,QAAQ,GAAIC,YAAmC,IAAK;IACtDF,KAAK,CAACC,QAAQ,CAAC,CAAC;MAAEE;IAAM,CAAC,KAAK;MAC1BA,KAAK,CAACC,GAAG,CAACF,YAAY,CAAC;IAC3B,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,KAAK,GAAGH,KAAK,CAACG,KAAK,IAAI,CAAC,CAAC;EAE/B,oBACId,KAAA,CAAAgB,aAAA,CAACR,sBAAsB,qBACnBR,KAAA,CAAAgB,aAAA,CAACC,8BAA8B,EAAAC,MAAA,CAAAC,MAAA,KAAKR,KAAK;IAAEG,KAAK,EAAEA,KAAM;IAACF,QAAQ,EAAEA;EAAS,EAAE,CAC1D,CAAC;AAEjC,CAAC;AAOD,MAAMQ,YAAY,GAAIT,KAAwB,IAAK;EAC/C,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAGnB,QAAQ,CAACQ,KAAK,CAACG,KAAK,CAAC;EAEzDZ,SAAS,CAAC,MAAM;IACZoB,aAAa,CAACX,KAAK,CAACG,KAAK,CAAC;EAC9B,CAAC,EAAE,CAACH,KAAK,CAACG,KAAK,CAAC,CAAC;EAEjB,oBACId,KAAA,CAAAgB,aAAA,CAACZ,MAAM;IACHmB,EAAE,EAAE,uBAAwB;IAC5BC,IAAI,EAAEb,KAAK,CAACa,IAAK;IACjBC,SAAS,EAAE,0CAA2C;IACtD,sBAAoB,QAAS;IAC7BC,KAAK,EAAE,QAAQf,KAAK,CAACgB,KAAK,CAACC,KAAK,EAAG;IACnCC,WAAW,EAAE,KAAM;IACnBC,eAAe,EAAE,KAAM;IACvBC,OAAO,eACH/B,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAgC,QAAA,qBACIhC,KAAA,CAAAgB,aAAA,CAACZ,MAAM,CAAC6B,YAAY;MAACC,OAAO,EAAEvB,KAAK,CAACwB;IAAQ,CAAE,CAAC,eAC/CnC,KAAA,CAAAgB,aAAA,CAACZ,MAAM,CAACgC,aAAa;MACjBC,IAAI,EAAE,cAAe;MACrBH,OAAO,EAAEA,CAAA,KAAM;QACXvB,KAAK,CAACC,QAAQ,CAACS,UAAU,CAAC;MAC9B;IAAE,CACL,CACH;EACL,gBAEDrB,KAAA,CAAAgB,aAAA,CAACV,gBAAgB;IAACgC,IAAI,EAAE;EAAW,gBAC/BtC,KAAA,CAAAgB,aAAA,CAACT,aAAa;IAACO,KAAK,EAAEO,UAAW;IAACT,QAAQ,EAAEU;EAAc,CAAE,CAC9C,CACd,CAAC;AAEjB,CAAC;AAED,MAAML,8BAA8B,GAAGA,CAAC;EACpCH,KAAK;EACLF,QAAQ;EACRe,KAAK;EACLC;AACuB,CAAC,KAAK;EAC7B,MAAM;IAAEW,UAAU;IAAEC;EAAY,CAAC,GAAG/B,iBAAiB,CAAC,CAAC;EAEvD,MAAMgC,YAAY,GAAGxC,WAAW,CAC3ByC,QAAa,IAAK;IACf9B,QAAQ,CAAC8B,QAAQ,CAAC;IAClBF,WAAW,CAAC,KAAK,CAAC;EACtB,CAAC,EACD,CAAC5B,QAAQ,EAAE4B,WAAW,CAC1B,CAAC;EAED,oBACIxC,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAAgC,QAAA,qBACIhC,KAAA,CAAAgB,aAAA,CAACX,kBAAkB;IAACgC,IAAI,EAAET;EAAM,CAAE,CAAC,eACnC5B,KAAA,CAAAgB,aAAA,CAACV,gBAAgB;IAACgC,IAAI,EAAE;EAAU,gBAC9BtC,KAAA,CAAAgB,aAAA,CAACT,aAAa;IAACO,KAAK,EAAEA,KAAM;IAACF,QAAQ,EAAEA,QAAS;IAAC+B,GAAG,EAAEhB,KAAK,CAACW;EAAK,CAAE,CACrD,CAAC,eACnBtC,KAAA,CAAAgB,aAAA,CAACI,YAAY;IACTI,IAAI,EAAEe,UAAW;IACjBzB,KAAK,EAAEA,KAAM;IACbF,QAAQ,EAAE6B,YAAa;IACvBN,OAAO,EAAEA,CAAA,KAAMK,WAAW,CAAC,KAAK,CAAE;IAClCb,KAAK,EAAEA;EAAM,CAChB,CACH,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"file":"inputRenderers/LexicalInput/LexicalInput.js","sources":["../../../src/inputRenderers/LexicalInput/LexicalInput.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { Dialog, FormComponentLabel } from \"@webiny/admin-ui\";\nimport { CompositionScope } from \"@webiny/app-admin\";\nimport type { RichTextValueWithHtml } from \"@webiny/app-admin\";\nimport { LexicalEditor } from \"./LexicalEditor.js\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport {\n    ExpandedEditorProvider,\n    useExpandedEditor\n} from \"~/inputRenderers/LexicalInput/ExpandedEditor.js\";\n\ntype LexicalInputRendererProps = Omit<ElementInputRendererProps, \"onChange\" | \"metadata\"> & {\n    onChange: (value: RichTextValueWithHtml) => void;\n};\n\nexport const LexicalInputRenderer = (props: ElementInputRendererProps) => {\n    const onChange = (lexicalValue: RichTextValueWithHtml) => {\n        props.onChange(({ value }) => {\n            value.set(lexicalValue);\n        });\n    };\n\n    const value = props.value ?? {};\n\n    return (\n        <ExpandedEditorProvider>\n            <ExpandableLexicalInputRenderer {...props} value={value} onChange={onChange} />\n        </ExpandedEditorProvider>\n    );\n};\n\ninterface EditorDialogProps extends Omit<LexicalInputRendererProps, \"onPreviewChange\" | \"label\"> {\n    open: boolean;\n    onClose: () => void;\n}\n\nconst EditorDialog = (props: EditorDialogProps) => {\n    const [localValue, setLocalValue] = useState(props.value);\n\n    useEffect(() => {\n        setLocalValue(props.value);\n    }, [props.value]);\n\n    return (\n        <Dialog\n            id={\"lexical-editor-dialog\"}\n            open={props.open}\n            className={\"w-[900px] max-w-[900px] overflow-visible\"}\n            data-hover-manager={\"ignore\"}\n            title={`Edit ${props.input.label}`}\n            dismissible={false}\n            showCloseButton={false}\n            actions={\n                <>\n                    <Dialog.CancelAction onClick={props.onClose} />\n                    <Dialog.ConfirmAction\n                        text={\"Save Changes\"}\n                        onClick={() => {\n                            props.onChange(localValue);\n                        }}\n                    />\n                </>\n            }\n        >\n            <CompositionScope name={\"expanded\"}>\n                <LexicalEditor value={localValue} onChange={setLocalValue} />\n            </CompositionScope>\n        </Dialog>\n    );\n};\n\nconst ExpandableLexicalInputRenderer = ({\n    value,\n    onChange,\n    input,\n    label\n}: LexicalInputRendererProps) => {\n    const { isExpanded, setExpanded } = useExpandedEditor();\n\n    const applyChanges = useCallback(\n        (newValue: any) => {\n            onChange(newValue);\n            setExpanded(false);\n        },\n        [onChange, setExpanded]\n    );\n\n    return (\n        <>\n            <FormComponentLabel text={label} />\n            <CompositionScope name={\"compact\"}>\n                <LexicalEditor value={value} onChange={onChange} key={input.name} />\n            </CompositionScope>\n            <EditorDialog\n                open={isExpanded}\n                value={value}\n                onChange={applyChanges}\n                onClose={() => setExpanded(false)}\n                input={input}\n            />\n        </>\n    );\n};\n"],"names":["LexicalInputRenderer","props","onChange","lexicalValue","value","ExpandedEditorProvider","ExpandableLexicalInputRenderer","EditorDialog","localValue","setLocalValue","useState","useEffect","Dialog","CompositionScope","LexicalEditor","input","label","isExpanded","setExpanded","useExpandedEditor","applyChanges","useCallback","newValue","FormComponentLabel"],"mappings":";;;;;AAeO,MAAMA,uBAAuB,CAACC;IACjC,MAAMC,WAAW,CAACC;QACdF,MAAM,QAAQ,CAAC,CAAC,EAAEG,KAAK,EAAE;YACrBA,MAAM,GAAG,CAACD;QACd;IACJ;IAEA,MAAMC,QAAQH,MAAM,KAAK,IAAI,CAAC;IAE9B,OAAO,WAAP,GACI,oBAACI,wBAAsBA,MAAAA,WAAAA,GACnB,oBAACC,gCAA8BA;QAAE,GAAGL,KAAK;QAAE,OAAOG;QAAO,UAAUF;;AAG/E;AAOA,MAAMK,eAAe,CAACN;IAClB,MAAM,CAACO,YAAYC,cAAc,GAAGC,SAAST,MAAM,KAAK;IAExDU,UAAU;QACNF,cAAcR,MAAM,KAAK;IAC7B,GAAG;QAACA,MAAM,KAAK;KAAC;IAEhB,OAAO,WAAP,GACI,oBAACW,QAAMA;QACH,IAAI;QACJ,MAAMX,MAAM,IAAI;QAChB,WAAW;QACX,sBAAoB;QACpB,OAAO,CAAC,KAAK,EAAEA,MAAM,KAAK,CAAC,KAAK,EAAE;QAClC,aAAa;QACb,iBAAiB;QACjB,uBACI,wDACI,oBAACW,OAAO,YAAY;YAAC,SAASX,MAAM,OAAO;0BAC3C,oBAACW,OAAO,aAAa;YACjB,MAAM;YACN,SAAS;gBACLX,MAAM,QAAQ,CAACO;YACnB;;qBAKZ,oBAACK,kBAAgBA;QAAC,MAAM;qBACpB,oBAACC,eAAaA;QAAC,OAAON;QAAY,UAAUC;;AAI5D;AAEA,MAAMH,iCAAiC,CAAC,EACpCF,KAAK,EACLF,QAAQ,EACRa,KAAK,EACLC,KAAK,EACmB;IACxB,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAE,GAAGC;IAEpC,MAAMC,eAAeC,YACjB,CAACC;QACGpB,SAASoB;QACTJ,YAAY;IAChB,GACA;QAAChB;QAAUgB;KAAY;IAG3B,OAAO,WAAP,GACI,wDACI,oBAACK,oBAAkBA;QAAC,MAAMP;sBAC1B,oBAACH,kBAAgBA;QAAC,MAAM;qBACpB,oBAACC,eAAaA;QAAC,OAAOV;QAAO,UAAUF;QAAU,KAAKa,MAAM,IAAI;uBAEpE,oBAACR,cAAYA;QACT,MAAMU;QACN,OAAOb;QACP,UAAUgB;QACV,SAAS,IAAMF,YAAY;QAC3B,OAAOH;;AAIvB"}

package/inputRenderers/LexicalInput/TypographyDropDown.js

@@ -1,87 +1,66 @@
-import React, { useEffect, useState } from "react";
+import react, { useEffect, useState } from "react";
 import { $getNearestNodeOfType } from "@lexical/utils";
-import { DropDown, DropDownItem, useCurrentSelection, useCurrentElement, useTypographyAction } from "@webiny/lexical-editor";
-import { $isHeadingNode, $isParagraphNode, $isQuoteNode, $isListNode, ListNode } from "@webiny/lexical-nodes";
+import { DropDown, DropDownItem, useCurrentElement, useCurrentSelection, useTypographyAction } from "@webiny/lexical-editor";
+import { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode, ListNode } from "@webiny/lexical-nodes";
 import { useWebsiteBuilderTheme } from "../../BaseEditor/components/index.js";
-export const TypographyDropDown = () => {
-  const {
-    value,
-    applyTypography
-  } = useTypographyAction();
-  const {
-    theme
-  } = useWebsiteBuilderTheme();
-  const [styles, setStyles] = useState([]);
-  const {
-    element
-  } = useCurrentElement();
-  const {
-    rangeSelection
-  } = useCurrentSelection();
-  const getAllTextStyles = () => {
-    if (!theme?.typography) {
-      return [];
-    }
-    const headingsStyles = theme.typography?.headings || [];
-    const paragraphStyles = theme.typography?.paragraphs || [];
-    return [...headingsStyles, ...paragraphStyles];
-  };
-  useEffect(() => {
-    // In static toolbar typography, styles always need to be visible.
-    if (theme?.typography) {
-      setStyles(getAllTextStyles());
-    }
-  }, [theme?.typography]);
-  const getListStyles = tag => {
-    const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];
-    if (listStyles.length > 0) {
-      return listStyles;
-    }
-    const fallbackTag = tag === "ul" ? "ol" : "ul";
-    return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];
-  };
-  useEffect(() => {
-    if (!element || !rangeSelection) {
-      return;
-    }
-    if ($isParagraphNode(element) || $isHeadingNode(element)) {
-      setStyles(getAllTextStyles());
-    } else if ($isListNode(element)) {
-      let type;
-      try {
-        const anchorNode = rangeSelection.anchor.getNode();
-        const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-        if (parentList) {
-          type = parentList.getListType();
-        }
-      } catch {
-        type = element.getListType();
-      }
-      if (type === "bullet") {
-        setStyles(getListStyles("ul"));
-      } else {
-        setStyles(getListStyles("ol"));
-      }
-    } else if ($isQuoteNode(element)) {
-      setStyles(theme?.typography?.quotes || []);
-    } else {
-      setStyles([]);
-    }
-  }, [element]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !!styles?.length ? /*#__PURE__*/React.createElement(DropDown, {
-    buttonClassName: "toolbar-item typography-dropdown",
-    buttonAriaLabel: "Typography formatting options",
-    buttonLabel: value?.label || "Typography",
-    stopCloseOnClickSelf: true,
-    disabled: false,
-    showScroll: true
-  }, styles?.map(option => /*#__PURE__*/React.createElement(DropDownItem, {
-    className: `item typography-item ${value?.id === option.id ? "active dropdown-item-active" : ""}`,
-    onClick: () => applyTypography(option),
-    key: option.id
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, option.label)))) : null);
+const TypographyDropDown = ()=>{
+    const { value, applyTypography } = useTypographyAction();
+    const { theme } = useWebsiteBuilderTheme();
+    const [styles, setStyles] = useState([]);
+    const { element } = useCurrentElement();
+    const { rangeSelection } = useCurrentSelection();
+    const getAllTextStyles = ()=>{
+        if (!theme?.typography) return [];
+        const headingsStyles = theme.typography?.headings || [];
+        const paragraphStyles = theme.typography?.paragraphs || [];
+        return [
+            ...headingsStyles,
+            ...paragraphStyles
+        ];
+    };
+    useEffect(()=>{
+        if (theme?.typography) setStyles(getAllTextStyles());
+    }, [
+        theme?.typography
+    ]);
+    const getListStyles = (tag)=>{
+        const listStyles = theme?.typography.lists?.filter((x)=>x.tag === tag) || [];
+        if (listStyles.length > 0) return listStyles;
+        const fallbackTag = "ul" === tag ? "ol" : "ul";
+        return theme?.typography.lists?.filter((x)=>x.tag === fallbackTag) || [];
+    };
+    useEffect(()=>{
+        if (!element || !rangeSelection) return;
+        if ($isParagraphNode(element) || $isHeadingNode(element)) setStyles(getAllTextStyles());
+        else if ($isListNode(element)) {
+            let type;
+            try {
+                const anchorNode = rangeSelection.anchor.getNode();
+                const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                if (parentList) type = parentList.getListType();
+            } catch  {
+                type = element.getListType();
+            }
+            "bullet" === type ? setStyles(getListStyles("ul")) : setStyles(getListStyles("ol"));
+        } else $isQuoteNode(element) ? setStyles(theme?.typography?.quotes || []) : setStyles([]);
+    }, [
+        element
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, styles?.length ? /*#__PURE__*/ react.createElement(DropDown, {
+        buttonClassName: "toolbar-item typography-dropdown",
+        buttonAriaLabel: "Typography formatting options",
+        buttonLabel: value?.label || "Typography",
+        stopCloseOnClickSelf: true,
+        disabled: false,
+        showScroll: true
+    }, styles?.map((option)=>/*#__PURE__*/ react.createElement(DropDownItem, {
+            className: `item typography-item ${value?.id === option.id ? "active dropdown-item-active" : ""}`,
+            onClick: ()=>applyTypography(option),
+            key: option.id
+        }, /*#__PURE__*/ react.createElement("span", {
+            className: "text"
+        }, option.label)))) : null);
 };
+export { TypographyDropDown };
 
 //# sourceMappingURL=TypographyDropDown.js.map

package/inputRenderers/LexicalInput/TypographyDropDown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","$getNearestNodeOfType","DropDown","DropDownItem","useCurrentSelection","useCurrentElement","useTypographyAction","$isHeadingNode","$isParagraphNode","$isQuoteNode","$isListNode","ListNode","useWebsiteBuilderTheme","TypographyDropDown","value","applyTypography","theme","styles","setStyles","element","rangeSelection","getAllTextStyles","typography","headingsStyles","headings","paragraphStyles","paragraphs","getListStyles","tag","listStyles","lists","filter","x","length","fallbackTag","type","anchorNode","anchor","getNode","parentList","getListType","quotes","createElement","Fragment","buttonClassName","buttonAriaLabel","buttonLabel","label","stopCloseOnClickSelf","disabled","showScroll","map","option","className","id","onClick","key"],"sources":["TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.typography) {\n            return [];\n        }\n        const headingsStyles = theme.typography?.headings || [];\n        const paragraphStyles = theme.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.typography) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.typography]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.label || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className={`item typography-item ${\n                                value?.id === option.id ? \"active dropdown-item-active\" : \"\"\n                            }`}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.label}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"inputRenderers/LexicalInput/TypographyDropDown.js","sources":["../../../src/inputRenderers/LexicalInput/TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { $getNearestNodeOfType } from \"@lexical/utils\";\nimport {\n    DropDown,\n    DropDownItem,\n    useCurrentSelection,\n    useCurrentElement,\n    useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport {\n    $isHeadingNode,\n    $isParagraphNode,\n    $isQuoteNode,\n    $isListNode,\n    ListNode\n} from \"@webiny/lexical-nodes\";\nimport { useWebsiteBuilderTheme } from \"~/BaseEditor/components/index.js\";\nimport type { TypographyStyle } from \"@webiny/website-builder-sdk/types/WebsiteBuilderTheme.js\";\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { theme } = useWebsiteBuilderTheme();\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        if (!theme?.typography) {\n            return [];\n        }\n        const headingsStyles = theme.typography?.headings || [];\n        const paragraphStyles = theme.typography?.paragraphs || [];\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    useEffect(() => {\n        // In static toolbar typography, styles always need to be visible.\n        if (theme?.typography) {\n            setStyles(getAllTextStyles());\n        }\n    }, [theme?.typography]);\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = theme?.typography.lists?.filter(x => x.tag === tag) || [];\n        if (listStyles.length > 0) {\n            return listStyles;\n        }\n\n        const fallbackTag = tag === \"ul\" ? \"ol\" : \"ul\";\n        return theme?.typography.lists?.filter(x => x.tag === fallbackTag) || [];\n    };\n\n    useEffect(() => {\n        if (!element || !rangeSelection) {\n            return;\n        }\n\n        if ($isParagraphNode(element) || $isHeadingNode(element)) {\n            setStyles(getAllTextStyles());\n        } else if ($isListNode(element)) {\n            let type;\n            try {\n                const anchorNode = rangeSelection.anchor.getNode();\n                const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);\n                if (parentList) {\n                    type = parentList.getListType();\n                }\n            } catch {\n                type = element.getListType();\n            }\n\n            if (type === \"bullet\") {\n                setStyles(getListStyles(\"ul\"));\n            } else {\n                setStyles(getListStyles(\"ol\"));\n            }\n        } else if ($isQuoteNode(element)) {\n            setStyles(theme?.typography?.quotes || []);\n        } else {\n            setStyles([]);\n        }\n    }, [element]);\n\n    return (\n        <>\n            {!!styles?.length ? (\n                <DropDown\n                    buttonClassName=\"toolbar-item typography-dropdown\"\n                    buttonAriaLabel={\"Typography formatting options\"}\n                    buttonLabel={value?.label || \"Typography\"}\n                    stopCloseOnClickSelf={true}\n                    disabled={false}\n                    showScroll={true}\n                >\n                    {styles?.map(option => (\n                        <DropDownItem\n                            className={`item typography-item ${\n                                value?.id === option.id ? \"active dropdown-item-active\" : \"\"\n                            }`}\n                            onClick={() => applyTypography(option)}\n                            key={option.id}\n                        >\n                            <span className=\"text\">{option.label}</span>\n                        </DropDownItem>\n                    ))}\n                </DropDown>\n            ) : null}\n        </>\n    );\n};\n"],"names":["TypographyDropDown","value","applyTypography","useTypographyAction","theme","useWebsiteBuilderTheme","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","useEffect","getListStyles","tag","listStyles","x","fallbackTag","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAmBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,IAAI,CAACT,OAAO,YACR,OAAO,EAAE;QAEb,MAAMU,iBAAiBV,MAAM,UAAU,EAAE,YAAY,EAAE;QACvD,MAAMW,kBAAkBX,MAAM,UAAU,EAAE,cAAc,EAAE;QAC1D,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEAC,UAAU;QAEN,IAAIZ,OAAO,YACPG,UAAUM;IAElB,GAAG;QAACT,OAAO;KAAW;IAEtB,MAAMa,gBAAgB,CAACC;QACnB,MAAMC,aAAaf,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAC5E,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOd,OAAO,WAAW,OAAO,OAAOgB,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAC5E;IAEAL,UAAU;QACN,IAAI,CAACP,WAAW,CAACE,gBACb;QAGJ,IAAIW,iBAAiBb,YAAYc,eAAed,UAC5CF,UAAUM;aACP,IAAIW,YAAYf,UAAU;YAC7B,IAAIgB;YACJ,IAAI;gBACA,MAAMC,aAAaf,eAAe,MAAM,CAAC,OAAO;gBAChD,MAAMgB,aAAaC,sBAAgCF,YAAYG;gBAC/D,IAAIF,YACAF,OAAOE,WAAW,WAAW;YAErC,EAAE,OAAM;gBACJF,OAAOhB,QAAQ,WAAW;YAC9B;YAEa,aAATgB,OACAlB,UAAUU,cAAc,SAExBV,UAAUU,cAAc;QAEhC,OAAWa,aAAarB,WACpBF,UAAUH,OAAO,YAAY,UAAU,EAAE,IAEzCG,UAAU,EAAE;IAEpB,GAAG;QAACE;KAAQ;IAEZ,OAAO,WAAP,GACI,0CACK,AAAEH,QAAQ,SAAS,WAAT,GACP,oBAACyB,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,aAAa9B,OAAO,SAAS;QAC7B,sBAAsB;QACtB,UAAU;QACV,YAAY;OAEXK,QAAQ,IAAI0B,CAAAA,SAAAA,WAAAA,GACT,oBAACC,cAAYA;YACT,WAAW,CAAC,qBAAqB,EAC7BhC,OAAO,OAAO+B,OAAO,EAAE,GAAG,gCAAgC,IAC5D;YACF,SAAS,IAAM9B,gBAAgB8B;YAC/B,KAAKA,OAAO,EAAE;yBAEd,oBAAC;YAAK,WAAU;WAAQA,OAAO,KAAK,OAIhD;AAGhB"}

package/inputRenderers/LexicalInput/icons/fullscreen.js

@@ -0,0 +1,16 @@
+import __rslib_svgr_url__0__ from "../../../static/svg/fullscreen.e17233bb.svg";
+import * as __rspack_external_react from "react";
+const SvgFullscreen = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        d: "M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z"
+    }));
+const fullscreen = __rslib_svgr_url__0__;
+export default fullscreen;
+export { SvgFullscreen as ReactComponent };
+
+//# sourceMappingURL=fullscreen.js.map

package/inputRenderers/LexicalInput/icons/fullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/LexicalInput/icons/fullscreen.js","sources":["../../../../src/inputRenderers/LexicalInput/icons/fullscreen.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgFullscreen = props => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} viewBox=\"0 0 24 24\" {...props}><path d=\"M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z\" /></svg>;\nexport { SvgFullscreen as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/fullscreen.e17233bb.svg\";"],"names":["SvgFullscreen","props"],"mappings":";;AACA,MAAMA,gBAAgBC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,SAAQ;QAAa,GAAGA,KAAK;qBAAE,sCAAC;QAAK,GAAE;;AAErI"}

package/inputRenderers/LexicalInput/icons/list-ol.js

@@ -0,0 +1,20 @@
+import __rslib_svgr_url__0__ from "../../../static/svg/list-ol.d64946f3.svg";
+import * as __rspack_external_react from "react";
+const SvgListOl = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "currentColor",
+        className: "list-ol_svg__bi list-ol_svg__bi-list-ol",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fillRule: "evenodd",
+        d: "M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"
+    }), /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        d: "M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z"
+    }));
+const list_ol = __rslib_svgr_url__0__;
+export default list_ol;
+export { SvgListOl as ReactComponent };
+
+//# sourceMappingURL=list-ol.js.map

package/inputRenderers/LexicalInput/icons/list-ol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/LexicalInput/icons/list-ol.js","sources":["../../../../src/inputRenderers/LexicalInput/icons/list-ol.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgListOl = props => <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentColor\" className=\"list-ol_svg__bi list-ol_svg__bi-list-ol\" {...props}><path fillRule=\"evenodd\" d=\"M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5\" /><path d=\"M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z\" /></svg>;\nexport { SvgListOl as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/list-ol.d64946f3.svg\";"],"names":["SvgListOl","props"],"mappings":";;AACA,MAAMA,YAAYC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,MAAK;QAAe,WAAU;QAA2C,GAAGA,KAAK;qBAAE,sCAAC;QAAK,UAAS;QAAU,GAAE;sBAAsL,sCAAC;QAAK,GAAE;;AAEtY"}

package/inputRenderers/LexicalInput/icons/list-ul.js

@@ -0,0 +1,18 @@
+import __rslib_svgr_url__0__ from "../../../static/svg/list-ul.1d54da3f.svg";
+import * as __rspack_external_react from "react";
+const SvgListUl = (props)=>/*#__PURE__*/ __rspack_external_react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "currentColor",
+        className: "list-ul_svg__bi list-ul_svg__bi-list-ul",
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("path", {
+        fillRule: "evenodd",
+        d: "M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+    }));
+const list_ul = __rslib_svgr_url__0__;
+export default list_ul;
+export { SvgListUl as ReactComponent };
+
+//# sourceMappingURL=list-ul.js.map

package/inputRenderers/LexicalInput/icons/list-ul.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputRenderers/LexicalInput/icons/list-ul.js","sources":["../../../../src/inputRenderers/LexicalInput/icons/list-ul.svg"],"sourcesContent":["import * as React from \"react\";\nconst SvgListUl = props => <svg xmlns=\"http://www.w3.org/2000/svg\" width={16} height={16} fill=\"currentColor\" className=\"list-ul_svg__bi list-ul_svg__bi-list-ul\" {...props}><path fillRule=\"evenodd\" d=\"M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2\" /></svg>;\nexport { SvgListUl as ReactComponent };\nexport default \"__RSLIB_SVGR_AUTO_PUBLIC_PATH__static/svg/list-ul.1d54da3f.svg\";"],"names":["SvgListUl","props"],"mappings":";;AACA,MAAMA,YAAYC,CAAAA,QAAAA,WAAAA,GAAS,sCAAC;QAAI,OAAM;QAA6B,OAAO;QAAI,QAAQ;QAAI,MAAK;QAAe,WAAU;QAA2C,GAAGA,KAAK;qBAAE,sCAAC;QAAK,UAAS;QAAU,GAAE;;AAExM"}

package/inputRenderers/LexicalInput/wbStaticToolbar.css

@@ -260,5 +260,5 @@
 }
 
 .wb-static-toolbar i.expand {
-  background-image: url("./icons/fullscreen.svg");
+  /* background-image: url("./icons/fullscreen.svg"); */
 }

package/inputRenderers/NumberInput.js

@@ -1,31 +1,25 @@
-import React, { useCallback } from "react";
+import react, { useCallback } from "react";
 import { Input } from "@webiny/admin-ui";
-export const NumberInputRenderer = ({
-  value,
-  onChange,
-  input,
-  label
-}) => {
-  const localOnChange = useCallback(value => {
-    const number = parseInt(value);
-    const minValue = input.minValue;
-    if (minValue && number < minValue) {
-      return;
-    }
-    onChange(({
-      value
-    }) => {
-      value.set(number);
+const NumberInputRenderer = ({ value, onChange, input, label })=>{
+    const localOnChange = useCallback((value)=>{
+        const number = parseInt(value);
+        const minValue = input.minValue;
+        if (minValue && number < minValue) return;
+        onChange(({ value })=>{
+            value.set(number);
+        });
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(Input, {
+        type: "number",
+        value: value,
+        onChange: localOnChange,
+        label: label,
+        description: input.description,
+        note: input.helperText
     });
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(Input, {
-    type: "number",
-    value: value,
-    onChange: localOnChange,
-    label: label,
-    description: input.description,
-    note: input.helperText
-  });
 };
+export { NumberInputRenderer };
 
 //# sourceMappingURL=NumberInput.js.map