@webiny/app-admin 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a4f3e4ea8b

package/components/LexicalEditor/DefaultLexicalEditorConfig.js

@@ -0,0 +1,81 @@
+import react from "react";
+import { BoldAction, BulletListAction, CodeHighlightAction, CodeHighlightPlugin, Divider, FontColorAction, FontColorPlugin, ImageAction, ImagesPlugin, ItalicAction, LexicalEditorConfig, LinkAction, LinkPlugin, ListPlugin, NumberedListAction, QuoteAction, QuotePlugin, TextAlignmentAction, TypographyAction, TypographyPlugin, UnderlineAction } from "@webiny/lexical-editor";
+import { TypographyDropDown } from "./TypographyDropDown.js";
+const { ToolbarElement: ToolbarElement, Plugin: Plugin } = LexicalEditorConfig;
+const DefaultLexicalEditorConfig = ()=>/*#__PURE__*/ react.createElement(LexicalEditorConfig, {
+        priority: "primary"
+    }, /*#__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: "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, {
+        name: "link",
+        element: /*#__PURE__*/ react.createElement(LinkAction, null)
+    }), /*#__PURE__*/ react.createElement(ToolbarElement, {
+        name: "quote",
+        element: /*#__PURE__*/ react.createElement(QuoteAction, 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: "codeHighlight",
+        element: /*#__PURE__*/ react.createElement(CodeHighlightPlugin, 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: "images",
+        element: /*#__PURE__*/ react.createElement(ImagesPlugin, null)
+    }), /*#__PURE__*/ react.createElement(Plugin, {
+        name: "quote",
+        element: /*#__PURE__*/ react.createElement(QuotePlugin, null)
+    }), /*#__PURE__*/ react.createElement(TypographyAction.TypographyDropDown, {
+        element: /*#__PURE__*/ react.createElement(TypographyDropDown, null)
+    }));
+export { DefaultLexicalEditorConfig };
+
+//# sourceMappingURL=DefaultLexicalEditorConfig.js.map

package/components/LexicalEditor/DefaultLexicalEditorConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalEditor/DefaultLexicalEditorConfig.js","sources":["../../../src/components/LexicalEditor/DefaultLexicalEditorConfig.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TypographyAction,\n    LexicalEditorConfig,\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    CodeHighlightPlugin,\n    LinkPlugin,\n    ListPlugin,\n    TypographyPlugin,\n    FontColorPlugin,\n    TextAlignmentAction\n} from \"@webiny/lexical-editor\";\nimport { TypographyDropDown } from \"./TypographyDropDown.js\";\n\nconst { ToolbarElement, Plugin } = LexicalEditorConfig;\n\nexport const DefaultLexicalEditorConfig = () => {\n    return (\n        <LexicalEditorConfig priority={\"primary\"}>\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            <Plugin name={\"fontColor\"} element={<FontColorPlugin />} />\n            <Plugin name={\"list\"} element={<ListPlugin />} />\n            <Plugin name={\"codeHighlight\"} element={<CodeHighlightPlugin />} />\n            <Plugin name={\"typography\"} element={<TypographyPlugin />} />\n            <Plugin name={\"link\"} element={<LinkPlugin />} />\n            <Plugin name={\"images\"} element={<ImagesPlugin />} />\n            <Plugin name={\"quote\"} element={<QuotePlugin />} />\n            <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />\n        </LexicalEditorConfig>\n    );\n};\n"],"names":["ToolbarElement","Plugin","LexicalEditorConfig","DefaultLexicalEditorConfig","FontColorAction","TypographyAction","TextAlignmentAction","Divider","BoldAction","ItalicAction","UnderlineAction","CodeHighlightAction","NumberedListAction","BulletListAction","ImageAction","LinkAction","QuoteAction","FontColorPlugin","ListPlugin","CodeHighlightPlugin","TypographyPlugin","LinkPlugin","ImagesPlugin","QuotePlugin","TypographyDropDown"],"mappings":";;;AA0BA,MAAM,EAAEA,gBAAAA,cAAc,EAAEC,QAAAA,MAAM,EAAE,GAAGC;AAE5B,MAAMC,6BAA6B,IAC/B,WAAP,GACI,oBAACD,qBAAmBA;QAAC,UAAU;qBAC3B,oBAACF,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACI,iBAAeA;sBAC1D,oBAACJ,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACK,kBAAgBA;sBAC5D,oBAACL,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACM,qBAAmBA;sBAClE,oBAACN,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACO,SAAOA;sBACjD,oBAACP,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACQ,YAAUA;sBACtD,oBAACR,gBAAcA;QAAC,MAAK;QAAS,uBAAS,oBAACS,cAAYA;sBACpD,oBAACT,gBAAcA;QAAC,MAAK;QAAY,uBAAS,oBAACU,iBAAeA;sBAC1D,oBAACV,gBAAcA;QAAC,MAAK;QAAgB,uBAAS,oBAACW,qBAAmBA;sBAClE,oBAACX,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACO,SAAOA;sBACjD,oBAACP,gBAAcA;QAAC,MAAK;QAAe,uBAAS,oBAACY,oBAAkBA;sBAChE,oBAACZ,gBAAcA;QAAC,MAAK;QAAa,uBAAS,oBAACa,kBAAgBA;sBAC5D,oBAACb,gBAAcA;QAAC,MAAK;QAAU,uBAAS,oBAACO,SAAOA;sBAChD,oBAACP,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAACc,aAAWA;sBAClD,oBAACd,gBAAcA;QAAC,MAAK;QAAW,uBAAS,oBAACO,SAAOA;sBACjD,oBAACP,gBAAcA;QAAC,MAAK;QAAO,uBAAS,oBAACe,YAAUA;sBAChD,oBAACf,gBAAcA;QAAC,MAAK;QAAQ,uBAAS,oBAACgB,aAAWA;sBAClD,oBAACf,QAAMA;QAAC,MAAM;QAAa,uBAAS,oBAACgB,iBAAeA;sBACpD,oBAAChB,QAAMA;QAAC,MAAM;QAAQ,uBAAS,oBAACiB,YAAUA;sBAC1C,oBAACjB,QAAMA;QAAC,MAAM;QAAiB,uBAAS,oBAACkB,qBAAmBA;sBAC5D,oBAAClB,QAAMA;QAAC,MAAM;QAAc,uBAAS,oBAACmB,kBAAgBA;sBACtD,oBAACnB,QAAMA;QAAC,MAAM;QAAQ,uBAAS,oBAACoB,YAAUA;sBAC1C,oBAACpB,QAAMA;QAAC,MAAM;QAAU,uBAAS,oBAACqB,cAAYA;sBAC9C,oBAACrB,QAAMA;QAAC,MAAM;QAAS,uBAAS,oBAACsB,aAAWA;sBAC5C,oBAAClB,iBAAiB,kBAAkB;QAAC,uBAAS,oBAACmB,oBAAkBA"}

package/components/LexicalEditor/LexicalEditor.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
-import type { RichTextEditorProps } from "@webiny/lexical-editor/types";
-import type { EditorTheme } from "@webiny/lexical-theme";
-interface LexicalEditorProps extends Omit<RichTextEditorProps, "theme"> {
-    theme?: Partial<EditorTheme>;
+import type { RichTextEditorProps } from "@webiny/lexical-editor/types.js";
+import { type RichTextValueWithHtml } from "./lexicalValueWithHtml.js";
+export interface LexicalEditorProps extends Omit<RichTextEditorProps, "value" | "onChange" | "theme"> {
+    value?: RichTextValueWithHtml;
+    onChange?: (value: RichTextValueWithHtml) => void;
+    theme?: RichTextEditorProps["theme"];
 }
 export declare const LexicalEditor: (props: LexicalEditorProps) => React.JSX.Element;
-export {};
+export declare namespace LexicalEditor {
+    type Props = LexicalEditorProps;
+}

package/components/LexicalEditor/LexicalEditor.js

@@ -1,29 +1,48 @@
-import React from "react";
-import { FileManager } from "./..";
-import { RichTextEditor as BaseEditor } from "@webiny/lexical-editor";
-import { useTheme } from "@webiny/app-theme";
-const imagesOnly = ["image/*"];
-export const LexicalEditor = props => {
-  const {
-    theme
-  } = useTheme();
-  const editorTheme = {
-    styles: {},
-    emotionMap: {},
-    ...theme,
-    ...(props.theme || {})
-  };
-  return /*#__PURE__*/React.createElement(FileManager, {
-    accept: imagesOnly
-  }, ({
-    showFileManager
-  }) => /*#__PURE__*/React.createElement(BaseEditor, Object.assign({}, props, {
-    theme: editorTheme,
-    toolbarActionPlugins: [...(props.toolbarActionPlugins || []), {
-      targetAction: "image-action",
-      plugin: showFileManager
-    }]
-  })));
+import react, { useEffect, useMemo, useRef } from "react";
+import { FileManager } from "../index.js";
+import { RichTextEditor } from "@webiny/lexical-editor";
+import { DelayedOnChange } from "@webiny/admin-ui";
+import { useAdminConfig } from "../../config/AdminConfig.js";
+import { lexicalValueWithHtml } from "./lexicalValueWithHtml.js";
+import { lexicalValueFromHtml } from "./lexicalValueFromHtml.js";
+const imagesOnly = [
+    "image/*"
+];
+const noop = ()=>{};
+const LexicalEditor = (props)=>{
+    const { lexicalTheme } = useAdminConfig();
+    const configRef = useRef(void 0);
+    useEffect(()=>{
+        if (configRef.current && props.value?.html && !props.value.state && props.onChange) lexicalValueFromHtml(configRef, props.onChange)(props.value.html);
+    }, [
+        configRef.current,
+        props.value,
+        props.onChange
+    ]);
+    const onChange = useMemo(()=>lexicalValueWithHtml(configRef, props.onChange ?? noop), [
+        props.onChange
+    ]);
+    return /*#__PURE__*/ react.createElement(FileManager, {
+        accept: imagesOnly,
+        render: ({ showFileManager })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+                value: props.value?.state,
+                onChange: onChange
+            }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(RichTextEditor, {
+                    ...props,
+                    value: value,
+                    onChange: onChange,
+                    theme: props.theme ?? lexicalTheme,
+                    configRef: configRef,
+                    toolbarActionPlugins: [
+                        ...props.toolbarActionPlugins || [],
+                        {
+                            targetAction: "image-action",
+                            plugin: showFileManager
+                        }
+                    ]
+                }))
+    });
 };
+export { LexicalEditor };
 
 //# sourceMappingURL=LexicalEditor.js.map

package/components/LexicalEditor/LexicalEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FileManager","RichTextEditor","BaseEditor","useTheme","imagesOnly","LexicalEditor","props","theme","editorTheme","styles","emotionMap","createElement","accept","showFileManager","Object","assign","toolbarActionPlugins","targetAction","plugin"],"sources":["LexicalEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { FileManager } from \"~/components\";\nimport { RichTextEditor as BaseEditor } from \"@webiny/lexical-editor\";\nimport type { RichTextEditorProps } from \"@webiny/lexical-editor/types\";\nimport { useTheme } from \"@webiny/app-theme\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\n\ninterface LexicalEditorProps extends Omit<RichTextEditorProps, \"theme\"> {\n    theme?: Partial<EditorTheme>;\n}\n\nconst imagesOnly = [\"image/*\"];\n\nexport const LexicalEditor = (props: LexicalEditorProps) => {\n    const { theme } = useTheme();\n\n    const editorTheme: EditorTheme = {\n        styles: {},\n        emotionMap: {},\n        ...theme,\n        ...(props.theme || {})\n    };\n\n    return (\n        <FileManager accept={imagesOnly}>\n            {({ showFileManager }) => (\n                <BaseEditor\n                    {...props}\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,MAAM,OAAO;AACzB,SAASC,WAAW;AACpB,SAASC,cAAc,IAAIC,UAAU,QAAQ,wBAAwB;AAErE,SAASC,QAAQ,QAAQ,mBAAmB;AAO5C,MAAMC,UAAU,GAAG,CAAC,SAAS,CAAC;AAE9B,OAAO,MAAMC,aAAa,GAAIC,KAAyB,IAAK;EACxD,MAAM;IAAEC;EAAM,CAAC,GAAGJ,QAAQ,CAAC,CAAC;EAE5B,MAAMK,WAAwB,GAAG;IAC7BC,MAAM,EAAE,CAAC,CAAC;IACVC,UAAU,EAAE,CAAC,CAAC;IACd,GAAGH,KAAK;IACR,IAAID,KAAK,CAACC,KAAK,IAAI,CAAC,CAAC;EACzB,CAAC;EAED,oBACIR,KAAA,CAAAY,aAAA,CAACX,WAAW;IAACY,MAAM,EAAER;EAAW,GAC3B,CAAC;IAAES;EAAgB,CAAC,kBACjBd,KAAA,CAAAY,aAAA,CAACT,UAAU,EAAAY,MAAA,CAAAC,MAAA,KACHT,KAAK;IACTC,KAAK,EAAEC,WAAY;IACnBQ,oBAAoB,EAAE,CAClB,IAAIV,KAAK,CAACU,oBAAoB,IAAI,EAAE,CAAC,EACrC;MAAEC,YAAY,EAAE,cAAc;MAAEC,MAAM,EAAEL;IAAgB,CAAC;EAC3D,EACL,CAEI,CAAC;AAEtB,CAAC","ignoreList":[]}
+{"version":3,"file":"components/LexicalEditor/LexicalEditor.js","sources":["../../../src/components/LexicalEditor/LexicalEditor.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { FileManager } from \"~/components/index.js\";\nimport { RichTextEditor as BaseEditor } from \"@webiny/lexical-editor\";\nimport type { RichTextEditorProps } from \"@webiny/lexical-editor/types.js\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { useAdminConfig } from \"~/config/AdminConfig.js\";\nimport { lexicalValueWithHtml, type RichTextValueWithHtml } from \"./lexicalValueWithHtml.js\";\nimport { lexicalValueFromHtml } from \"./lexicalValueFromHtml.js\";\n\nexport interface LexicalEditorProps extends Omit<\n    RichTextEditorProps,\n    \"value\" | \"onChange\" | \"theme\"\n> {\n    value?: RichTextValueWithHtml;\n    onChange?: (value: RichTextValueWithHtml) => void;\n    theme?: RichTextEditorProps[\"theme\"];\n}\n\nconst imagesOnly = [\"image/*\"];\nconst noop = () => {};\n\nexport const LexicalEditor = (props: LexicalEditorProps) => {\n    const { lexicalTheme } = useAdminConfig();\n    const configRef = useRef<BaseEditor.InitialConfig | undefined>(undefined);\n\n    useEffect(() => {\n        if (configRef.current && props.value?.html && !props.value.state && props.onChange) {\n            lexicalValueFromHtml(configRef, props.onChange)(props.value.html);\n        }\n    }, [configRef.current, props.value, props.onChange]);\n\n    const onChange = useMemo(() => {\n        return lexicalValueWithHtml(configRef, props.onChange ?? noop);\n    }, [props.onChange]);\n\n    return (\n        <FileManager\n            accept={imagesOnly}\n            render={({ showFileManager }) => (\n                <DelayedOnChange value={props.value?.state} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <BaseEditor\n                            {...props}\n                            value={value}\n                            onChange={onChange}\n                            theme={props.theme ?? lexicalTheme}\n                            configRef={configRef}\n                            toolbarActionPlugins={[\n                                ...(props.toolbarActionPlugins || []),\n                                { targetAction: \"image-action\", plugin: showFileManager }\n                            ]}\n                        />\n                    )}\n                </DelayedOnChange>\n            )}\n        />\n    );\n};\n\nexport namespace LexicalEditor {\n    export type Props = LexicalEditorProps;\n}\n"],"names":["imagesOnly","noop","LexicalEditor","props","lexicalTheme","useAdminConfig","configRef","useRef","undefined","useEffect","lexicalValueFromHtml","onChange","useMemo","lexicalValueWithHtml","FileManager","showFileManager","DelayedOnChange","value","BaseEditor"],"mappings":";;;;;;;AAkBA,MAAMA,aAAa;IAAC;CAAU;AAC9B,MAAMC,OAAO,KAAO;AAEb,MAAMC,gBAAgB,CAACC;IAC1B,MAAM,EAAEC,YAAY,EAAE,GAAGC;IACzB,MAAMC,YAAYC,OAA6CC;IAE/DC,UAAU;QACN,IAAIH,UAAU,OAAO,IAAIH,MAAM,KAAK,EAAE,QAAQ,CAACA,MAAM,KAAK,CAAC,KAAK,IAAIA,MAAM,QAAQ,EAC9EO,qBAAqBJ,WAAWH,MAAM,QAAQ,EAAEA,MAAM,KAAK,CAAC,IAAI;IAExE,GAAG;QAACG,UAAU,OAAO;QAAEH,MAAM,KAAK;QAAEA,MAAM,QAAQ;KAAC;IAEnD,MAAMQ,WAAWC,QAAQ,IACdC,qBAAqBP,WAAWH,MAAM,QAAQ,IAAIF,OAC1D;QAACE,MAAM,QAAQ;KAAC;IAEnB,OAAO,WAAP,GACI,oBAACW,aAAWA;QACR,QAAQd;QACR,QAAQ,CAAC,EAAEe,eAAe,EAAE,iBACxB,oBAACC,iBAAeA;gBAAC,OAAOb,MAAM,KAAK,EAAE;gBAAO,UAAUQ;eACjD,CAAC,EAAEM,KAAK,EAAEN,QAAQ,EAAE,iBACjB,oBAACO,gBAAUA;oBACN,GAAGf,KAAK;oBACT,OAAOc;oBACP,UAAUN;oBACV,OAAOR,MAAM,KAAK,IAAIC;oBACtB,WAAWE;oBACX,sBAAsB;2BACdH,MAAM,oBAAoB,IAAI,EAAE;wBACpC;4BAAE,cAAc;4BAAgB,QAAQY;wBAAgB;qBAC3D;;;AAO7B"}

package/components/LexicalEditor/LexicalLinkForm.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { FloatingLinkEditorPlugin } from "@webiny/lexical-editor";
+type LexicalLinkForm = NonNullable<React.ComponentProps<typeof FloatingLinkEditorPlugin>["LinkForm"]>;
+type LinkFormProps = React.ComponentProps<LexicalLinkForm>;
+export declare const LexicalLinkForm: ({ linkData, onSave, removeLink }: LinkFormProps) => React.JSX.Element;
+export {};

package/components/LexicalEditor/LexicalLinkForm.js

@@ -0,0 +1,91 @@
+import react, { useEffect, useRef } from "react";
+import { Button, Grid, Icon, IconButton, Input, Switch } from "@webiny/admin-ui";
+import { Form, useBind } from "@webiny/form";
+import { validation } from "@webiny/validation";
+import { ReactComponent } from "@webiny/icons/language.svg";
+import { ReactComponent as open_in_new_svg_ReactComponent } from "@webiny/icons/open_in_new.svg";
+import { ReactComponent as link_off_svg_ReactComponent } from "@webiny/icons/link_off.svg";
+const LexicalLinkForm = ({ linkData, onSave, removeLink })=>{
+    const onSubmit = (data)=>{
+        onSave(data);
+    };
+    return /*#__PURE__*/ react.createElement(Form, {
+        data: linkData,
+        onSubmit: onSubmit,
+        validateOnFirstSubmit: true,
+        submitOnEnter: true
+    }, (form)=>/*#__PURE__*/ react.createElement("div", {
+            className: "p-md"
+        }, /*#__PURE__*/ react.createElement(Grid, {
+            gap: "small"
+        }, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(UrlInput, null))), /*#__PURE__*/ react.createElement("div", {
+            className: "flex w-full items-center justify-between mt-sm gap-sm"
+        }, /*#__PURE__*/ react.createElement(TargetSwitch, null), /*#__PURE__*/ react.createElement(Button, {
+            variant: "ghost",
+            size: "sm",
+            text: "Remove link",
+            className: "text-destructive-primary! [&_svg]:fill-destructive",
+            onClick: removeLink,
+            icon: /*#__PURE__*/ react.createElement(Icon, {
+                label: "Remove link",
+                icon: /*#__PURE__*/ react.createElement(link_off_svg_ReactComponent, null)
+            })
+        }), /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            size: "sm",
+            text: "Save",
+            onClick: form.submit
+        }))));
+};
+const UrlInput = ()=>{
+    const inputRef = useRef(null);
+    const urlBind = useBind({
+        name: "url",
+        validators: validation.create("required,url:allowRelative:allowHref")
+    });
+    useEffect(()=>{
+        if (inputRef.current) setTimeout(()=>{
+            inputRef.current?.focus();
+        }, 10);
+    }, []);
+    const openInNewTab = ()=>{
+        if (false !== urlBind.validation.isValid && urlBind.value) window.open(urlBind.value, "_blank");
+    };
+    return /*#__PURE__*/ react.createElement(Input, {
+        ...urlBind,
+        inputRef: (ref)=>{
+            inputRef.current = ref;
+        },
+        variant: "secondary",
+        size: "md",
+        placeholder: "Enter link",
+        autoFocus: true,
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "globe",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        endIcon: /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            icon: /*#__PURE__*/ react.createElement(open_in_new_svg_ReactComponent, null),
+            onClick: openInNewTab
+        })
+    });
+};
+const TargetSwitch = ()=>{
+    const targetBind = useBind({
+        name: "target",
+        defaultValue: "_self"
+    });
+    return /*#__PURE__*/ react.createElement(Switch, {
+        checked: "_blank" === targetBind.value,
+        label: "Open in new tab",
+        onChange: (value)=>{
+            targetBind.onChange(true === value ? "_blank" : "_self");
+        }
+    });
+};
+export { LexicalLinkForm };
+
+//# sourceMappingURL=LexicalLinkForm.js.map

package/components/LexicalEditor/LexicalLinkForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalEditor/LexicalLinkForm.js","sources":["../../../src/components/LexicalEditor/LexicalLinkForm.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { FloatingLinkEditorPlugin } from \"@webiny/lexical-editor\";\nimport { Button, Grid, Icon, IconButton, Input, Switch } from \"@webiny/admin-ui\";\nimport { Form, useBind } from \"@webiny/form\";\nimport { validation } from \"@webiny/validation\";\nimport { ReactComponent as GlobeIcon } from \"@webiny/icons/language.svg\";\nimport { ReactComponent as OpenInNew } from \"@webiny/icons/open_in_new.svg\";\nimport { ReactComponent as RemoveLink } from \"@webiny/icons/link_off.svg\";\n\ntype LexicalLinkForm = NonNullable<\n    React.ComponentProps<typeof FloatingLinkEditorPlugin>[\"LinkForm\"]\n>;\ntype LinkFormProps = React.ComponentProps<LexicalLinkForm>;\n\nexport const LexicalLinkForm = ({ linkData, onSave, removeLink }: LinkFormProps) => {\n    const onSubmit = (data: LinkFormProps[\"linkData\"]) => {\n        onSave(data);\n    };\n\n    return (\n        <Form data={linkData} onSubmit={onSubmit} validateOnFirstSubmit submitOnEnter>\n            {form => (\n                <div className={\"p-md\"}>\n                    <Grid gap={\"small\"}>\n                        <Grid.Column span={12}>\n                            <UrlInput />\n                        </Grid.Column>\n                    </Grid>\n                    <div className={\"flex w-full items-center justify-between mt-sm gap-sm\"}>\n                        <TargetSwitch />\n                        <Button\n                            variant={\"ghost\"}\n                            size={\"sm\"}\n                            text={`Remove link`}\n                            className={\"text-destructive-primary! [&_svg]:fill-destructive\"}\n                            onClick={removeLink}\n                            icon={<Icon label={\"Remove link\"} icon={<RemoveLink />} />}\n                        />\n                        <Button\n                            variant={\"primary\"}\n                            size={\"sm\"}\n                            text={`Save`}\n                            onClick={form.submit}\n                        />\n                    </div>\n                </div>\n            )}\n        </Form>\n    );\n};\n\nconst UrlInput = () => {\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const urlBind = useBind({\n        name: \"url\",\n        validators: validation.create(\"required,url:allowRelative:allowHref\")\n    });\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setTimeout(() => {\n                inputRef.current?.focus();\n            }, 10);\n        }\n    }, []);\n\n    const openInNewTab = () => {\n        if (urlBind.validation.isValid !== false && urlBind.value) {\n            window.open(urlBind.value, \"_blank\");\n        }\n    };\n\n    return (\n        <Input\n            {...urlBind}\n            inputRef={ref => {\n                inputRef.current = ref;\n            }}\n            variant={\"secondary\"}\n            size={\"md\"}\n            placeholder={\"Enter link\"}\n            autoFocus={true}\n            startIcon={<Icon label=\"globe\" icon={<GlobeIcon />} />}\n            endIcon={<IconButton variant=\"ghost\" icon={<OpenInNew />} onClick={openInNewTab} />}\n        />\n    );\n};\n\nconst TargetSwitch = () => {\n    const targetBind = useBind({\n        name: \"target\",\n        defaultValue: \"_self\"\n    });\n\n    return (\n        <Switch\n            checked={targetBind.value === \"_blank\"}\n            label={\"Open in new tab\"}\n            onChange={value => {\n                targetBind.onChange(value === true ? \"_blank\" : \"_self\");\n            }}\n        />\n    );\n};\n"],"names":["LexicalLinkForm","linkData","onSave","removeLink","onSubmit","data","Form","form","Grid","UrlInput","TargetSwitch","Button","Icon","RemoveLink","inputRef","useRef","urlBind","useBind","validation","useEffect","setTimeout","openInNewTab","window","Input","ref","GlobeIcon","IconButton","OpenInNew","targetBind","Switch","value"],"mappings":";;;;;;;AAcO,MAAMA,kBAAkB,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,UAAU,EAAiB;IAC3E,MAAMC,WAAW,CAACC;QACdH,OAAOG;IACX;IAEA,OAAO,WAAP,GACI,oBAACC,MAAIA;QAAC,MAAML;QAAU,UAAUG;QAAU;QAAsB;OAC3DG,CAAAA,OAAAA,WAAAA,GACG,oBAAC;YAAI,WAAW;yBACZ,oBAACC,MAAIA;YAAC,KAAK;yBACP,oBAACA,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACC,UAAQA,SAAAA,WAAAA,GAGjB,oBAAC;YAAI,WAAW;yBACZ,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,QAAMA;YACH,SAAS;YACT,MAAM;YACN,MAAM;YACN,WAAW;YACX,SAASR;YACT,oBAAM,oBAACS,MAAIA;gBAAC,OAAO;gBAAe,oBAAM,oBAACC,6BAAUA;;0BAEvD,oBAACF,QAAMA;YACH,SAAS;YACT,MAAM;YACN,MAAM;YACN,SAASJ,KAAK,MAAM;;AAOhD;AAEA,MAAME,WAAW;IACb,MAAMK,WAAWC,OAAgC;IAEjD,MAAMC,UAAUC,QAAQ;QACpB,MAAM;QACN,YAAYC,WAAW,MAAM,CAAC;IAClC;IAEAC,UAAU;QACN,IAAIL,SAAS,OAAO,EAChBM,WAAW;YACPN,SAAS,OAAO,EAAE;QACtB,GAAG;IAEX,GAAG,EAAE;IAEL,MAAMO,eAAe;QACjB,IAAIL,AAA+B,UAA/BA,QAAQ,UAAU,CAAC,OAAO,IAAcA,QAAQ,KAAK,EACrDM,OAAO,IAAI,CAACN,QAAQ,KAAK,EAAE;IAEnC;IAEA,OAAO,WAAP,GACI,oBAACO,OAAKA;QACD,GAAGP,OAAO;QACX,UAAUQ,CAAAA;YACNV,SAAS,OAAO,GAAGU;QACvB;QACA,SAAS;QACT,MAAM;QACN,aAAa;QACb,WAAW;QACX,yBAAW,oBAACZ,MAAIA;YAAC,OAAM;YAAQ,oBAAM,oBAACa,gBAASA;;QAC/C,uBAAS,oBAACC,YAAUA;YAAC,SAAQ;YAAQ,oBAAM,oBAACC,gCAASA;YAAK,SAASN;;;AAG/E;AAEA,MAAMX,eAAe;IACjB,MAAMkB,aAAaX,QAAQ;QACvB,MAAM;QACN,cAAc;IAClB;IAEA,OAAO,WAAP,GACI,oBAACY,QAAMA;QACH,SAASD,AAAqB,aAArBA,WAAW,KAAK;QACzB,OAAO;QACP,UAAUE,CAAAA;YACNF,WAAW,QAAQ,CAACE,AAAU,SAAVA,QAAiB,WAAW;QACpD;;AAGZ"}

package/components/LexicalEditor/TypographyDropDown.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type TypographyStyle = {
+    id: string;
+    label: string;
+    tag: string;
+    className: string;
+};
+export declare const TypographyDropDown: () => React.JSX.Element;

package/components/LexicalEditor/TypographyDropDown.js

@@ -0,0 +1,60 @@
+import react, { useEffect, useState } from "react";
+import { $getNearestNodeOfType } from "@lexical/utils";
+import { DropDown, DropDownItem, useCurrentElement, useCurrentSelection, useTypographyAction } from "@webiny/lexical-editor";
+import { $isHeadingNode, $isListNode, $isParagraphNode, $isQuoteNode, ListNode } from "@webiny/lexical-nodes";
+import { useAdminConfig } from "../../config/AdminConfig.js";
+const TypographyDropDown = ()=>{
+    const { value, applyTypography } = useTypographyAction();
+    const { lexicalTheme } = useAdminConfig();
+    const [styles, setStyles] = useState([]);
+    const { element } = useCurrentElement();
+    const { rangeSelection } = useCurrentSelection();
+    const getAllTextStyles = ()=>{
+        const headingsStyles = lexicalTheme.typography.headings || [];
+        const paragraphStyles = lexicalTheme.typography.paragraphs || [];
+        return [
+            ...headingsStyles,
+            ...paragraphStyles
+        ];
+    };
+    const getListStyles = (tag)=>{
+        const listStyles = lexicalTheme.typography.lists?.filter((x)=>x.tag === tag) || [];
+        if (listStyles.length > 0) return listStyles;
+        const fallbackTag = "ul" === tag ? "ol" : "ul";
+        return lexicalTheme.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(lexicalTheme.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/components/LexicalEditor/TypographyDropDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalEditor/TypographyDropDown.js","sources":["../../../src/components/LexicalEditor/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 { useAdminConfig } from \"~/config/AdminConfig.js\";\n\nexport type TypographyStyle = {\n    id: string;\n    label: string;\n    tag: string;\n    className: string;\n};\n\nexport const TypographyDropDown = () => {\n    const { value, applyTypography } = useTypographyAction();\n    const { lexicalTheme } = useAdminConfig();\n\n    const [styles, setStyles] = useState<TypographyStyle[]>([]);\n    const { element } = useCurrentElement();\n    const { rangeSelection } = useCurrentSelection();\n\n    const getAllTextStyles = (): TypographyStyle[] => {\n        const headingsStyles = lexicalTheme.typography.headings || [];\n        const paragraphStyles = lexicalTheme.typography.paragraphs || [];\n\n        return [...headingsStyles, ...paragraphStyles];\n    };\n\n    const getListStyles = (tag: string): TypographyStyle[] => {\n        const listStyles = lexicalTheme.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 lexicalTheme.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(lexicalTheme.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","lexicalTheme","useAdminConfig","styles","setStyles","useState","element","useCurrentElement","rangeSelection","useCurrentSelection","getAllTextStyles","headingsStyles","paragraphStyles","getListStyles","tag","listStyles","x","fallbackTag","useEffect","$isParagraphNode","$isHeadingNode","$isListNode","type","anchorNode","parentList","$getNearestNodeOfType","ListNode","$isQuoteNode","DropDown","option","DropDownItem"],"mappings":";;;;;AAyBO,MAAMA,qBAAqB;IAC9B,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGC;IACnC,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAA4B,EAAE;IAC1D,MAAM,EAAEC,OAAO,EAAE,GAAGC;IACpB,MAAM,EAAEC,cAAc,EAAE,GAAGC;IAE3B,MAAMC,mBAAmB;QACrB,MAAMC,iBAAiBV,aAAa,UAAU,CAAC,QAAQ,IAAI,EAAE;QAC7D,MAAMW,kBAAkBX,aAAa,UAAU,CAAC,UAAU,IAAI,EAAE;QAEhE,OAAO;eAAIU;eAAmBC;SAAgB;IAClD;IAEA,MAAMC,gBAAgB,CAACC;QACnB,MAAMC,aAAad,aAAa,UAAU,CAAC,KAAK,EAAE,OAAOe,CAAAA,IAAKA,EAAE,GAAG,KAAKF,QAAQ,EAAE;QAClF,IAAIC,WAAW,MAAM,GAAG,GACpB,OAAOA;QAGX,MAAME,cAAcH,AAAQ,SAARA,MAAe,OAAO;QAC1C,OAAOb,aAAa,UAAU,CAAC,KAAK,EAAE,OAAOe,CAAAA,IAAKA,EAAE,GAAG,KAAKC,gBAAgB,EAAE;IAClF;IAEAC,UAAU;QACN,IAAI,CAACZ,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,UAAUS,cAAc,SAExBT,UAAUS,cAAc;QAEhC,OAAWc,aAAarB,WACpBF,UAAUH,aAAa,UAAU,CAAC,MAAM,IAAI,EAAE,IAE9CG,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/components/LexicalEditor/index.d.ts

@@ -1 +1,3 @@
-export { LexicalEditor } from "./LexicalEditor";
+export { LexicalEditor } from "./LexicalEditor.js";
+export { LexicalLinkForm } from "./LexicalLinkForm.js";
+export { lexicalValueWithHtml, type RichTextValueWithHtml } from "./lexicalValueWithHtml.js";

package/components/LexicalEditor/index.js

@@ -1,3 +1,3 @@
-export { LexicalEditor } from "./LexicalEditor";
-
-//# sourceMappingURL=index.js.map
+export { LexicalEditor } from "./LexicalEditor.js";
+export { LexicalLinkForm } from "./LexicalLinkForm.js";
+export { lexicalValueWithHtml } from "./lexicalValueWithHtml.js";

package/components/LexicalEditor/lexicalValueFromHtml.d.ts

@@ -0,0 +1,7 @@
+import { RichTextEditor } from "@webiny/lexical-editor";
+export type RichTextValueWithHtml = {
+    state: string;
+    html: string;
+};
+export type EditorConfigRef = React.MutableRefObject<RichTextEditor.InitialConfig | undefined>;
+export declare const lexicalValueFromHtml: (editorConfigRef: EditorConfigRef, onChange: (value: RichTextValueWithHtml) => void) => (value: string) => void;

package/components/LexicalEditor/lexicalValueFromHtml.js

@@ -0,0 +1,28 @@
+import { createHtmlToLexicalParser } from "@webiny/lexical-converter";
+import { lexicalValueWithHtml } from "./lexicalValueWithHtml.js";
+const parserCache = new Map();
+const getOrCreate = (editorConfigRef)=>{
+    if (!editorConfigRef.current) return;
+    const id = editorConfigRef.current.editorId;
+    if (!parserCache.has(id)) {
+        const parser = createHtmlToLexicalParser({
+            editorConfig: {
+                nodes: editorConfigRef.current.nodes,
+                theme: editorConfigRef.current.theme
+            }
+        });
+        parserCache.set(id, parser);
+    }
+    return parserCache.get(id);
+};
+const lexicalValueFromHtml = (editorConfigRef, onChange)=>(value)=>{
+        const parser = getOrCreate(editorConfigRef);
+        if (!parser) return;
+        const domParser = new DOMParser();
+        const state = parser(domParser.parseFromString(value, "text/html"));
+        if (!state) return;
+        lexicalValueWithHtml(editorConfigRef, onChange)(JSON.stringify(state));
+    };
+export { lexicalValueFromHtml };
+
+//# sourceMappingURL=lexicalValueFromHtml.js.map

package/components/LexicalEditor/lexicalValueFromHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalEditor/lexicalValueFromHtml.js","sources":["../../../src/components/LexicalEditor/lexicalValueFromHtml.ts"],"sourcesContent":["import { createHtmlToLexicalParser } from \"@webiny/lexical-converter\";\nimport { RichTextEditor } from \"@webiny/lexical-editor\";\nimport { lexicalValueWithHtml } from \"~/components/LexicalEditor/lexicalValueWithHtml.js\";\n\ntype LexicalHtmlTransformer = ReturnType<typeof createHtmlToLexicalParser>;\n\nexport type RichTextValueWithHtml = {\n    state: string;\n    html: string;\n};\n\nexport type EditorConfigRef = React.MutableRefObject<RichTextEditor.InitialConfig | undefined>;\n\nconst parserCache = new Map<string, LexicalHtmlTransformer>();\n\nconst getOrCreate = (editorConfigRef: EditorConfigRef) => {\n    if (!editorConfigRef.current) {\n        return undefined;\n    }\n\n    const id = editorConfigRef.current.editorId;\n\n    if (!parserCache.has(id)) {\n        const parser = createHtmlToLexicalParser({\n            editorConfig: {\n                nodes: editorConfigRef.current.nodes,\n                theme: editorConfigRef.current.theme\n            }\n        });\n\n        parserCache.set(id, parser);\n    }\n\n    return parserCache.get(id);\n};\n\nexport const lexicalValueFromHtml = (\n    editorConfigRef: EditorConfigRef,\n    onChange: (value: RichTextValueWithHtml) => void\n) => {\n    return (value: string) => {\n        const parser = getOrCreate(editorConfigRef);\n\n        if (!parser) {\n            return;\n        }\n\n        const domParser = new DOMParser();\n        const state = parser(domParser.parseFromString(value, \"text/html\"));\n\n        if (!state) {\n            return;\n        }\n\n        lexicalValueWithHtml(editorConfigRef, onChange)(JSON.stringify(state));\n    };\n};\n"],"names":["parserCache","Map","getOrCreate","editorConfigRef","id","parser","createHtmlToLexicalParser","lexicalValueFromHtml","onChange","value","domParser","DOMParser","state","lexicalValueWithHtml","JSON"],"mappings":";;AAaA,MAAMA,cAAc,IAAIC;AAExB,MAAMC,cAAc,CAACC;IACjB,IAAI,CAACA,gBAAgB,OAAO,EACxB;IAGJ,MAAMC,KAAKD,gBAAgB,OAAO,CAAC,QAAQ;IAE3C,IAAI,CAACH,YAAY,GAAG,CAACI,KAAK;QACtB,MAAMC,SAASC,0BAA0B;YACrC,cAAc;gBACV,OAAOH,gBAAgB,OAAO,CAAC,KAAK;gBACpC,OAAOA,gBAAgB,OAAO,CAAC,KAAK;YACxC;QACJ;QAEAH,YAAY,GAAG,CAACI,IAAIC;IACxB;IAEA,OAAOL,YAAY,GAAG,CAACI;AAC3B;AAEO,MAAMG,uBAAuB,CAChCJ,iBACAK,WAEO,CAACC;QACJ,MAAMJ,SAASH,YAAYC;QAE3B,IAAI,CAACE,QACD;QAGJ,MAAMK,YAAY,IAAIC;QACtB,MAAMC,QAAQP,OAAOK,UAAU,eAAe,CAACD,OAAO;QAEtD,IAAI,CAACG,OACD;QAGJC,qBAAqBV,iBAAiBK,UAAUM,KAAK,SAAS,CAACF;IACnE"}

package/components/LexicalEditor/lexicalValueWithHtml.d.ts

@@ -0,0 +1,7 @@
+import { RichTextEditor } from "@webiny/lexical-editor";
+export type RichTextValueWithHtml = {
+    state: string;
+    html: string;
+};
+export type EditorConfigRef = React.MutableRefObject<RichTextEditor.InitialConfig | undefined>;
+export declare const lexicalValueWithHtml: (editorConfigRef: EditorConfigRef, onChange: (value: RichTextValueWithHtml) => void) => (value: string) => void;

package/components/LexicalEditor/lexicalValueWithHtml.js

@@ -0,0 +1,30 @@
+import { createLexicalStateTransformer } from "@webiny/lexical-converter";
+const transformerCache = new Map();
+const getOrCreate = (editorConfigRef)=>{
+    if (!editorConfigRef.current) return;
+    const id = editorConfigRef.current.editorId;
+    if (!transformerCache.has(id)) {
+        const transformer = createLexicalStateTransformer({
+            editorConfig: {
+                nodes: editorConfigRef.current.nodes,
+                theme: editorConfigRef.current.theme
+            }
+        });
+        transformerCache.set(id, transformer);
+    }
+    return transformerCache.get(id);
+};
+const lexicalValueWithHtml = (editorConfigRef, onChange)=>(value)=>{
+        const transformer = getOrCreate(editorConfigRef);
+        if (!transformer) return void onChange({
+            state: value,
+            html: ""
+        });
+        onChange({
+            state: value,
+            html: transformer.toHtml(value)
+        });
+    };
+export { lexicalValueWithHtml };
+
+//# sourceMappingURL=lexicalValueWithHtml.js.map

package/components/LexicalEditor/lexicalValueWithHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LexicalEditor/lexicalValueWithHtml.js","sources":["../../../src/components/LexicalEditor/lexicalValueWithHtml.ts"],"sourcesContent":["import { createLexicalStateTransformer } from \"@webiny/lexical-converter\";\nimport { RichTextEditor } from \"@webiny/lexical-editor\";\n\ntype LexicalStateTransformer = ReturnType<typeof createLexicalStateTransformer>;\n\nexport type RichTextValueWithHtml = {\n    state: string;\n    html: string;\n};\n\nexport type EditorConfigRef = React.MutableRefObject<RichTextEditor.InitialConfig | undefined>;\n\nconst transformerCache = new Map<string, LexicalStateTransformer>();\n\nconst getOrCreate = (editorConfigRef: EditorConfigRef) => {\n    if (!editorConfigRef.current) {\n        return undefined;\n    }\n\n    const id = editorConfigRef.current.editorId;\n\n    if (!transformerCache.has(id)) {\n        const transformer = createLexicalStateTransformer({\n            editorConfig: {\n                nodes: editorConfigRef.current.nodes,\n                theme: editorConfigRef.current.theme\n            }\n        });\n\n        transformerCache.set(id, transformer);\n    }\n\n    return transformerCache.get(id);\n};\n\nexport const lexicalValueWithHtml = (\n    editorConfigRef: EditorConfigRef,\n    onChange: (value: RichTextValueWithHtml) => void\n) => {\n    return (value: string) => {\n        const transformer = getOrCreate(editorConfigRef);\n\n        if (!transformer) {\n            onChange({\n                state: value,\n                html: \"\"\n            });\n            return;\n        }\n\n        onChange({\n            state: value,\n            html: transformer.toHtml(value)\n        });\n    };\n};\n"],"names":["transformerCache","Map","getOrCreate","editorConfigRef","id","transformer","createLexicalStateTransformer","lexicalValueWithHtml","onChange","value"],"mappings":";AAYA,MAAMA,mBAAmB,IAAIC;AAE7B,MAAMC,cAAc,CAACC;IACjB,IAAI,CAACA,gBAAgB,OAAO,EACxB;IAGJ,MAAMC,KAAKD,gBAAgB,OAAO,CAAC,QAAQ;IAE3C,IAAI,CAACH,iBAAiB,GAAG,CAACI,KAAK;QAC3B,MAAMC,cAAcC,8BAA8B;YAC9C,cAAc;gBACV,OAAOH,gBAAgB,OAAO,CAAC,KAAK;gBACpC,OAAOA,gBAAgB,OAAO,CAAC,KAAK;YACxC;QACJ;QAEAH,iBAAiB,GAAG,CAACI,IAAIC;IAC7B;IAEA,OAAOL,iBAAiB,GAAG,CAACI;AAChC;AAEO,MAAMG,uBAAuB,CAChCJ,iBACAK,WAEO,CAACC;QACJ,MAAMJ,cAAcH,YAAYC;QAEhC,IAAI,CAACE,aAAa,YACdG,SAAS;YACL,OAAOC;YACP,MAAM;QACV;QAIJD,SAAS;YACL,OAAOC;YACP,MAAMJ,YAAY,MAAM,CAACI;QAC7B;IACJ"}

package/components/ListView/ListView.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { IListViewModel, IListActions } from "../../presentation/listPresenter/abstractions.js";
+interface ListViewProps {
+    list: IListViewModel<any>;
+    actions: IListActions;
+    showingFilters?: boolean;
+    onToggleFilters?: () => void;
+    namespace: string;
+    sidebar?: React.ReactNode;
+    header?: React.ReactNode;
+    bulkActions?: React.ReactNode;
+    filters?: React.ReactNode;
+    content: React.ReactNode;
+    bottomBar?: React.ReactNode;
+}
+declare const ListViewBase: ({ list, actions, showingFilters, onToggleFilters, namespace, sidebar, header, bulkActions, filters, content, bottomBar }: ListViewProps) => React.JSX.Element;
+export { ListViewBase, type ListViewProps };

package/components/ListView/ListView.js

@@ -0,0 +1,36 @@
+import react, { useMemo } from "react";
+import { LeftPanel, RightPanel, SplitView } from "../SplitView/SplitView.js";
+import { ListViewProvider } from "./context.js";
+const ListViewBase = ({ list, actions, showingFilters = false, onToggleFilters, namespace, sidebar, header, bulkActions, filters, content, bottomBar })=>{
+    const ctx = useMemo(()=>({
+            list,
+            actions,
+            showingFilters,
+            onToggleFilters
+        }), [
+        list,
+        actions,
+        showingFilters,
+        onToggleFilters
+    ]);
+    const mainContent = /*#__PURE__*/ react.createElement("div", {
+        className: "h-full relative overflow-hidden"
+    }, header, /*#__PURE__*/ react.createElement("div", {
+        style: {
+            top: "105px"
+        },
+        className: "w-full overflow-hidden absolute top-0 bottom-0 left-0"
+    }, bulkActions, filters, content, bottomBar));
+    return /*#__PURE__*/ react.createElement(ListViewProvider, {
+        value: ctx
+    }, sidebar ? /*#__PURE__*/ react.createElement(SplitView, {
+        namespace: namespace
+    }, /*#__PURE__*/ react.createElement(LeftPanel, {
+        span: 2
+    }, sidebar), /*#__PURE__*/ react.createElement(RightPanel, {
+        span: 10
+    }, mainContent)) : mainContent);
+};
+export { ListViewBase };
+
+//# sourceMappingURL=ListView.js.map

package/components/ListView/ListView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ListView/ListView.js","sources":["../../../src/components/ListView/ListView.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { LeftPanel, RightPanel, SplitView } from \"~/components/SplitView/SplitView.js\";\nimport { ListViewProvider } from \"./context.js\";\nimport type { IListViewModel, IListActions } from \"~/presentation/listPresenter/abstractions.js\";\n\ninterface ListViewProps {\n    list: IListViewModel<any>;\n    actions: IListActions;\n    showingFilters?: boolean;\n    onToggleFilters?: () => void;\n    namespace: string;\n    sidebar?: React.ReactNode;\n    header?: React.ReactNode;\n    bulkActions?: React.ReactNode;\n    filters?: React.ReactNode;\n    content: React.ReactNode;\n    bottomBar?: React.ReactNode;\n}\n\nconst ListViewBase = ({\n    list,\n    actions,\n    showingFilters = false,\n    onToggleFilters,\n    namespace,\n    sidebar,\n    header,\n    bulkActions,\n    filters,\n    content,\n    bottomBar\n}: ListViewProps) => {\n    const ctx = useMemo(\n        () => ({ list, actions, showingFilters, onToggleFilters }),\n        [list, actions, showingFilters, onToggleFilters]\n    );\n\n    const mainContent = (\n        <div className={\"h-full relative overflow-hidden\"}>\n            {header}\n            <div\n                style={{ top: \"105px\" }}\n                className={\"w-full overflow-hidden absolute top-0 bottom-0 left-0\"}\n            >\n                {bulkActions}\n                {filters}\n                {content}\n                {bottomBar}\n            </div>\n        </div>\n    );\n\n    return (\n        <ListViewProvider value={ctx}>\n            {sidebar ? (\n                <SplitView namespace={namespace}>\n                    <LeftPanel span={2}>{sidebar}</LeftPanel>\n                    <RightPanel span={10}>{mainContent}</RightPanel>\n                </SplitView>\n            ) : (\n                mainContent\n            )}\n        </ListViewProvider>\n    );\n};\n\nexport { ListViewBase, type ListViewProps };\n"],"names":["ListViewBase","list","actions","showingFilters","onToggleFilters","namespace","sidebar","header","bulkActions","filters","content","bottomBar","ctx","useMemo","mainContent","ListViewProvider","SplitView","LeftPanel","RightPanel"],"mappings":";;;AAmBA,MAAMA,eAAe,CAAC,EAClBC,IAAI,EACJC,OAAO,EACPC,iBAAiB,KAAK,EACtBC,eAAe,EACfC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,OAAO,EACPC,OAAO,EACPC,SAAS,EACG;IACZ,MAAMC,MAAMC,QACR,IAAO;YAAEZ;YAAMC;YAASC;YAAgBC;QAAgB,IACxD;QAACH;QAAMC;QAASC;QAAgBC;KAAgB;IAGpD,MAAMU,cAAc,WAAdA,GACF,oBAAC;QAAI,WAAW;OACXP,QAAAA,WAAAA,GACD,oBAAC;QACG,OAAO;YAAE,KAAK;QAAQ;QACtB,WAAW;OAEVC,aACAC,SACAC,SACAC;IAKb,OAAO,WAAP,GACI,oBAACI,kBAAgBA;QAAC,OAAOH;OACpBN,UAAU,WAAVA,GACG,oBAACU,WAASA;QAAC,WAAWX;qBAClB,oBAACY,WAASA;QAAC,MAAM;OAAIX,UAAAA,WAAAA,GACrB,oBAACY,YAAUA;QAAC,MAAM;OAAKJ,gBAG3BA;AAIhB"}

package/components/ListView/ListViewBottomBar.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface ListViewBottomBarProps {
+    meta?: {
+        itemLabel: string | {
+            singular: string;
+            plural: string;
+        };
+    };
+    status?: {
+        loadingText?: string;
+    } | true;
+}
+declare const ListViewBottomBar: ({ meta, status }: ListViewBottomBarProps) => React.JSX.Element;
+export { ListViewBottomBar };