@webiny/lexical-editor 6.0.0-alpha.0 → 6.0.0-alpha.2

package/commands/image.d.ts

@@ -1,5 +1,5 @@
-import { LexicalCommand, NodeKey } from "lexical";
-import { ImageNodeProps } from "@webiny/lexical-nodes";
+import type { LexicalCommand, NodeKey } from "lexical";
+import type { ImageNodeProps } from "@webiny/lexical-nodes";
 export interface ImagePayload extends ImageNodeProps {
     key?: NodeKey;
 }

package/commands/image.js.map

@@ -1 +1 @@
-{"version":3,"names":["createCommand","INSERT_IMAGE_COMMAND"],"sources":["image.ts"],"sourcesContent":["import { createCommand, LexicalCommand, NodeKey } from \"lexical\";\nimport { ImageNodeProps } from \"@webiny/lexical-nodes\";\n\nexport interface ImagePayload extends ImageNodeProps {\n    key?: NodeKey;\n}\n\nexport const INSERT_IMAGE_COMMAND: LexicalCommand<ImagePayload> =\n    createCommand(\"INSERT_IMAGE_COMMAND\");\n"],"mappings":"AAAA,SAASA,aAAa,QAAiC,SAAS;AAOhE,OAAO,MAAMC,oBAAkD,GAC3DD,aAAa,CAAC,sBAAsB,CAAC","ignoreList":[]}
+{"version":3,"names":["createCommand","INSERT_IMAGE_COMMAND"],"sources":["image.ts"],"sourcesContent":["import type { LexicalCommand, NodeKey } from \"lexical\";\nimport { createCommand } from \"lexical\";\nimport type { ImageNodeProps } from \"@webiny/lexical-nodes\";\n\nexport interface ImagePayload extends ImageNodeProps {\n    key?: NodeKey;\n}\n\nexport const INSERT_IMAGE_COMMAND: LexicalCommand<ImagePayload> =\n    createCommand(\"INSERT_IMAGE_COMMAND\");\n"],"mappings":"AACA,SAASA,aAAa,QAAQ,SAAS;AAOvC,OAAO,MAAMC,oBAAkD,GAC3DD,aAAa,CAAC,sBAAsB,CAAC","ignoreList":[]}

package/commands/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./typography";
 export * from "./image";
 export * from "./list";
 export * from "./quote";

package/commands/index.js

@@ -1,3 +1,4 @@
+export * from "./typography";
 export * from "./image";
 export * from "./list";
 export * from "./quote";

package/commands/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"~/commands/image\";\nexport * from \"~/commands/list\";\nexport * from \"~/commands/quote\";\nexport * from \"~/commands/toolbar\";\n"],"mappings":"AAAA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"~/commands/typography\";\nexport * from \"~/commands/image\";\nexport * from \"~/commands/list\";\nexport * from \"~/commands/quote\";\nexport * from \"~/commands/toolbar\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/commands/list.d.ts

@@ -1,4 +1,4 @@
-import { LexicalCommand } from "lexical";
+import type { LexicalCommand } from "lexical";
 export type ListCommandPayload = {
     themeStyleId?: string;
 };

package/commands/list.js.map

@@ -1 +1 @@
-{"version":3,"names":["createCommand","INSERT_UNORDERED_LIST_COMMAND","INSERT_ORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND"],"sources":["list.ts"],"sourcesContent":["import { createCommand, LexicalCommand } from \"lexical\";\n\nexport type ListCommandPayload = {\n    themeStyleId?: string;\n};\n\nexport const INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<ListCommandPayload> = createCommand(\n    \"INSERT_UNORDERED_LIST_COMMAND\"\n);\n\nexport const INSERT_ORDERED_LIST_COMMAND: LexicalCommand<ListCommandPayload> = createCommand(\n    \"INSERT_ORDERED_LIST_COMMAND\"\n);\n\nexport const REMOVE_LIST_COMMAND: LexicalCommand<void> = createCommand(\"REMOVE_LIST_COMMAND\");\n"],"mappings":"AAAA,SAASA,aAAa,QAAwB,SAAS;AAMvD,OAAO,MAAMC,6BAAiE,GAAGD,aAAa,CAC1F,+BACJ,CAAC;AAED,OAAO,MAAME,2BAA+D,GAAGF,aAAa,CACxF,6BACJ,CAAC;AAED,OAAO,MAAMG,mBAAyC,GAAGH,aAAa,CAAC,qBAAqB,CAAC","ignoreList":[]}
+{"version":3,"names":["createCommand","INSERT_UNORDERED_LIST_COMMAND","INSERT_ORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND"],"sources":["list.ts"],"sourcesContent":["import type { LexicalCommand } from \"lexical\";\nimport { createCommand } from \"lexical\";\n\nexport type ListCommandPayload = {\n    themeStyleId?: string;\n};\n\nexport const INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<ListCommandPayload> = createCommand(\n    \"INSERT_UNORDERED_LIST_COMMAND\"\n);\n\nexport const INSERT_ORDERED_LIST_COMMAND: LexicalCommand<ListCommandPayload> = createCommand(\n    \"INSERT_ORDERED_LIST_COMMAND\"\n);\n\nexport const REMOVE_LIST_COMMAND: LexicalCommand<void> = createCommand(\"REMOVE_LIST_COMMAND\");\n"],"mappings":"AACA,SAASA,aAAa,QAAQ,SAAS;AAMvC,OAAO,MAAMC,6BAAiE,GAAGD,aAAa,CAC1F,+BACJ,CAAC;AAED,OAAO,MAAME,2BAA+D,GAAGF,aAAa,CACxF,6BACJ,CAAC;AAED,OAAO,MAAMG,mBAAyC,GAAGH,aAAa,CAAC,qBAAqB,CAAC","ignoreList":[]}

package/commands/quote.d.ts

@@ -1,4 +1,4 @@
-import { LexicalCommand } from "lexical";
+import type { LexicalCommand } from "lexical";
 export type QuoteCommandPayload = {
     themeStyleId: string;
 };

package/commands/quote.js.map

@@ -1 +1 @@
-{"version":3,"names":["createCommand","INSERT_QUOTE_COMMAND"],"sources":["quote.ts"],"sourcesContent":["import { createCommand, LexicalCommand } from \"lexical\";\n\nexport type QuoteCommandPayload = {\n    themeStyleId: string;\n};\n\nexport const INSERT_QUOTE_COMMAND: LexicalCommand<QuoteCommandPayload> =\n    createCommand(\"INSERT_QUOTE_COMMAND\");\n"],"mappings":"AAAA,SAASA,aAAa,QAAwB,SAAS;AAMvD,OAAO,MAAMC,oBAAyD,GAClED,aAAa,CAAC,sBAAsB,CAAC","ignoreList":[]}
+{"version":3,"names":["createCommand","INSERT_QUOTE_COMMAND"],"sources":["quote.ts"],"sourcesContent":["import type { LexicalCommand } from \"lexical\";\nimport { createCommand } from \"lexical\";\n\nexport type QuoteCommandPayload = {\n    themeStyleId: string;\n};\n\nexport const INSERT_QUOTE_COMMAND: LexicalCommand<QuoteCommandPayload> =\n    createCommand(\"INSERT_QUOTE_COMMAND\");\n"],"mappings":"AACA,SAASA,aAAa,QAAQ,SAAS;AAMvC,OAAO,MAAMC,oBAAyD,GAClED,aAAa,CAAC,sBAAsB,CAAC","ignoreList":[]}

package/commands/typography.d.ts

@@ -0,0 +1,8 @@
+import type { LexicalCommand, LexicalEditor, NodeKey } from "lexical";
+import type { TypographyValue } from "@webiny/lexical-theme";
+export declare const ADD_TYPOGRAPHY_COMMAND: LexicalCommand<TypographyPayload>;
+export interface TypographyPayload {
+    value: TypographyValue;
+    caption?: LexicalEditor;
+    key?: NodeKey;
+}

package/commands/typography.js

@@ -0,0 +1,4 @@
+import { createCommand } from "lexical";
+export const ADD_TYPOGRAPHY_COMMAND = createCommand("ADD_TYPOGRAPHY_COMMAND");
+
+//# sourceMappingURL=typography.js.map

package/commands/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createCommand","ADD_TYPOGRAPHY_COMMAND"],"sources":["typography.ts"],"sourcesContent":["import type { LexicalCommand, LexicalEditor, NodeKey } from \"lexical\";\nimport { createCommand } from \"lexical\";\nimport type { TypographyValue } from \"@webiny/lexical-theme\";\n\nexport const ADD_TYPOGRAPHY_COMMAND: LexicalCommand<TypographyPayload> =\n    createCommand(\"ADD_TYPOGRAPHY_COMMAND\");\n\nexport interface TypographyPayload {\n    value: TypographyValue;\n    caption?: LexicalEditor;\n    key?: NodeKey;\n}\n"],"mappings":"AACA,SAASA,aAAa,QAAQ,SAAS;AAGvC,OAAO,MAAMC,sBAAyD,GAClED,aAAa,CAAC,wBAAwB,CAAC","ignoreList":[]}

package/components/Editor/HeadingEditor.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { RichTextEditorProps } from "./RichTextEditor";
+import type { RichTextEditorProps } from "./RichTextEditor";
 interface HeadingEditorProps extends RichTextEditorProps {
     tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }

package/components/Editor/HeadingEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","RichTextEditor","Toolbar","EnsureHeadingTagPlugin","styles","padding","HeadingEditor","tag","placeholder","rest","createElement","Object","assign","toolbar","children"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\nimport { EnsureHeadingTagPlugin } from \"~/components/Editor/EnsureHeadingTagPlugin\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nconst styles = { padding: 5 };\n\nexport const HeadingEditor = ({ tag, placeholder, ...rest }: HeadingEditorProps) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n            styles={styles}\n        >\n            <EnsureHeadingTagPlugin />\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc;AACvB,SAASC,OAAO;AAChB,SAASC,sBAAsB;AAM/B,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAE,CAAC;AAE7B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,GAAG;EAAEC,WAAW;EAAE,GAAGC;AAAyB,CAAC,KAAK;EAChF,oBACIT,KAAA,CAAAU,aAAA,CAACT,cAAc,EAAAU,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEb,KAAA,CAAAU,aAAA,CAACR,OAAO,MAAE,CAAE;IACrBK,GAAG,EAAEA,GAAG,IAAI,IAAK;IACjBC,WAAW,EAAEA,WAAW,IAAI;EAAkC,GAC1DC,IAAI;IACRL,MAAM,EAAEA;EAAO,iBAEfJ,KAAA,CAAAU,aAAA,CAACP,sBAAsB,MAAE,CAAC,EACzBM,IAAI,EAAEK,QACK,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","RichTextEditor","Toolbar","EnsureHeadingTagPlugin","styles","padding","HeadingEditor","tag","placeholder","rest","createElement","Object","assign","toolbar","children"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport type { RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\nimport { EnsureHeadingTagPlugin } from \"~/components/Editor/EnsureHeadingTagPlugin\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nconst styles = { padding: 5 };\n\nexport const HeadingEditor = ({ tag, placeholder, ...rest }: HeadingEditorProps) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n            styles={styles}\n        >\n            <EnsureHeadingTagPlugin />\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc;AACvB,SAASC,OAAO;AAChB,SAASC,sBAAsB;AAM/B,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAE,CAAC;AAE7B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,GAAG;EAAEC,WAAW;EAAE,GAAGC;AAAyB,CAAC,KAAK;EAChF,oBACIT,KAAA,CAAAU,aAAA,CAACT,cAAc,EAAAU,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEb,KAAA,CAAAU,aAAA,CAACR,OAAO,MAAE,CAAE;IACrBK,GAAG,EAAEA,GAAG,IAAI,IAAK;IACjBC,WAAW,EAAEA,WAAW,IAAI;EAAkC,GAC1DC,IAAI;IACRL,MAAM,EAAEA;EAAO,iBAEfJ,KAAA,CAAAU,aAAA,CAACP,sBAAsB,MAAE,CAAC,EACzBM,IAAI,EAAEK,QACK,CAAC;AAEzB,CAAC","ignoreList":[]}

package/components/Editor/ParagraphEditor.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { RichTextEditorProps } from "./RichTextEditor";
+import type { RichTextEditorProps } from "./RichTextEditor";
 interface ParagraphLexicalEditorProps extends RichTextEditorProps {
     tag?: "p";
 }

package/components/Editor/ParagraphEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","RichTextEditor","Toolbar","styles","padding","ParagraphEditor","placeholder","tag","rest","createElement","Object","assign","toolbar","children"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst styles = { padding: 5 };\n\nconst ParagraphEditor = ({ placeholder, tag, ...rest }: ParagraphLexicalEditorProps) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n            styles={styles}\n        >\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc;AACvB,SAASC,OAAO;AAMhB,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAE,CAAC;AAE7B,MAAMC,eAAe,GAAGA,CAAC;EAAEC,WAAW;EAAEC,GAAG;EAAE,GAAGC;AAAkC,CAAC,KAAK;EACpF,oBACIR,KAAA,CAAAS,aAAA,CAACR,cAAc,EAAAS,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEZ,KAAA,CAAAS,aAAA,CAACP,OAAO,MAAE,CAAE;IACrBK,GAAG,EAAEA,GAAG,IAAI,GAAI;IAChBD,WAAW,EAAEA,WAAW,IAAI;EAA0B,GAClDE,IAAI;IACRL,MAAM,EAAEA;EAAO,IAEdK,IAAI,EAAEK,QACK,CAAC;AAEzB,CAAC;AAED,SAASR,eAAe","ignoreList":[]}
+{"version":3,"names":["React","RichTextEditor","Toolbar","styles","padding","ParagraphEditor","placeholder","tag","rest","createElement","Object","assign","toolbar","children"],"sources":["ParagraphEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport type { RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface ParagraphLexicalEditorProps extends RichTextEditorProps {\n    tag?: \"p\";\n}\n\nconst styles = { padding: 5 };\n\nconst ParagraphEditor = ({ placeholder, tag, ...rest }: ParagraphLexicalEditorProps) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"p\"}\n            placeholder={placeholder ?? \"Enter your text here...\"}\n            {...rest}\n            styles={styles}\n        >\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n\nexport { ParagraphEditor };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc;AACvB,SAASC,OAAO;AAMhB,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAE,CAAC;AAE7B,MAAMC,eAAe,GAAGA,CAAC;EAAEC,WAAW;EAAEC,GAAG;EAAE,GAAGC;AAAkC,CAAC,KAAK;EACpF,oBACIR,KAAA,CAAAS,aAAA,CAACR,cAAc,EAAAS,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEZ,KAAA,CAAAS,aAAA,CAACP,OAAO,MAAE,CAAE;IACrBK,GAAG,EAAEA,GAAG,IAAI,GAAI;IAChBD,WAAW,EAAEA,WAAW,IAAI;EAA0B,GAClDE,IAAI;IACRL,MAAM,EAAEA;EAAO,IAEdK,IAAI,EAAEK,QACK,CAAC;AAEzB,CAAC;AAED,SAASR,eAAe","ignoreList":[]}

package/components/Editor/RichTextEditor.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { CSSObject } from "@emotion/react";
-import { Klass, LexicalNode } from "lexical";
-import { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
-import { LexicalValue, ToolbarActionPlugin } from "../../types";
+import type { CSSObject } from "@emotion/react";
+import type { Klass, LexicalNode } from "lexical";
+import type { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
+import type { LexicalValue, ToolbarActionPlugin } from "../../types";
 export interface RichTextEditorProps {
     children?: React.ReactNode | React.ReactNode[];
     classes?: string;
@@ -24,7 +24,6 @@ export interface RichTextEditorProps {
     toolbar?: React.ReactNode;
     value: LexicalValue | null | undefined;
     width?: number | string;
-    generateInitialValue?: () => LexicalValue;
 }
 /**
  * @description Main editor container

package/components/Editor/RichTextEditor.js

@@ -1,8 +1,6 @@
 import React, { Fragment, useRef, useState } from "react";
 import { css } from "emotion";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { $isRootTextContentEmpty } from "@lexical/text";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
@@ -13,14 +11,11 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { createTheme, toTypographyEmotionMap } from "@webiny/lexical-theme";
 import { allNodes } from "@webiny/lexical-nodes";
 import { RichTextEditorProvider } from "../../context/RichTextEditorContext";
-import { isValidLexicalData } from "../../utils/isValidLexicalData";
-import { UpdateStatePlugin } from "../../plugins/LexicalUpdateStatePlugin";
 import { BlurEventPlugin } from "../../plugins/BlurEventPlugin/BlurEventPlugin";
 import { Placeholder } from "../../ui/Placeholder";
-import { generateInitialLexicalValue } from "../../utils/generateInitialLexicalValue";
 import { SharedHistoryContext, useSharedHistoryContext } from "../../context/SharedHistoryContext";
 import { LexicalEditorWithConfig, useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig";
-import { normalizeInputValue } from "./normalizeInputValue";
+import { StateHandlingPlugin } from "../../plugins/StateHandlingPlugin";
 const BaseRichTextEditor = ({
   toolbar,
   staticToolbar,
@@ -35,7 +30,6 @@ const BaseRichTextEditor = ({
   height,
   contentEditableStyles,
   placeholderStyles,
-  generateInitialValue = generateInitialLexicalValue,
   ...props
 }) => {
   const themeEmotionMap = props.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);
@@ -62,8 +56,6 @@ const BaseRichTextEditor = ({
   const configPlugins = config.plugins.map(plugin => /*#__PURE__*/React.createElement(Fragment, {
     key: plugin.name
   }, plugin.element));
-  const value = normalizeInputValue(props.value);
-  const editorValue = isValidLexicalData(value) ? value : generateInitialValue();
   const initialConfig = {
     editorState: null,
     namespace: "webiny",
@@ -77,23 +69,6 @@ const BaseRichTextEditor = ({
       emotionMap: themeEmotionMap
     }
   };
-  function handleOnChange(editorState, editor) {
-    editorState.read(() => {
-      if (typeof onChange === "function") {
-        const editorState = editor.getEditorState();
-        const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);
-        const newValue = JSON.stringify(editorState.toJSON());
-
-        // We don't want to call "onChange" if editor text is empty, and original `value` is empty.
-        if (!value && isEditorEmpty) {
-          return;
-        }
-        if (value !== newValue) {
-          onChange(newValue);
-        }
-      }
-    });
-  }
   return (
     /*#__PURE__*/
     /**
@@ -120,10 +95,9 @@ const BaseRichTextEditor = ({
         overflow: "auto",
         position: "relative"
       }
-    }, /*#__PURE__*/React.createElement(OnChangePlugin, {
-      onChange: handleOnChange
-    }), /*#__PURE__*/React.createElement(UpdateStatePlugin, {
-      value: editorValue
+    }, /*#__PURE__*/React.createElement(StateHandlingPlugin, {
+      value: props.value,
+      onChange: onChange
     }), /*#__PURE__*/React.createElement(ClearEditorPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, {
       externalHistoryState: historyState
     }), onBlur && /*#__PURE__*/React.createElement(BlurEventPlugin, {

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","useRef","useState","css","LexicalComposer","$isRootTextContentEmpty","OnChangePlugin","AutoFocusPlugin","ClearEditorPlugin","RichTextPlugin","LexicalErrorBoundary","makeDecoratable","HistoryPlugin","ContentEditable","createTheme","toTypographyEmotionMap","allNodes","RichTextEditorProvider","isValidLexicalData","UpdateStatePlugin","BlurEventPlugin","Placeholder","generateInitialLexicalValue","SharedHistoryContext","useSharedHistoryContext","LexicalEditorWithConfig","useLexicalEditorConfig","normalizeInputValue","BaseRichTextEditor","toolbar","staticToolbar","onChange","nodes","placeholder","children","onBlur","focus","styles","width","height","contentEditableStyles","placeholderStyles","generateInitialValue","props","themeEmotionMap","theme","themeStylesTransformer","editorTheme","config","historyState","placeholderElem","createElement","scrollRef","floatingAnchorElem","setFloatingAnchorElem","undefined","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","key","name","element","value","editorValue","initialConfig","editorState","namespace","onError","current","emotionMap","handleOnChange","editor","read","getEditorState","isEditorEmpty","isComposing","newValue","JSON","stringify","toJSON","length","toolbarActionPlugins","className","ref","style","overflow","position","externalHistoryState","contentEditable","outline","ErrorBoundary","RichTextEditor"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useRef, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport {\n    createTheme,\n    EditorTheme,\n    ThemeEmotionMap,\n    toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { LexicalValue, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { normalizeInputValue } from \"./normalizeInputValue\";\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (json: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: EditorTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n    toolbar?: React.ReactNode;\n    value: LexicalValue | null | undefined;\n    width?: number | string;\n    generateInitialValue?: () => LexicalValue;\n}\n\nconst BaseRichTextEditor = ({\n    toolbar,\n    staticToolbar,\n    onChange,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    height,\n    contentEditableStyles,\n    placeholderStyles,\n    generateInitialValue = generateInitialLexicalValue,\n    ...props\n}: RichTextEditorProps) => {\n    const themeEmotionMap =\n        props.themeEmotionMap ??\n        toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n\n    const editorTheme = useRef(createTheme(props.theme));\n    const config = useLexicalEditorConfig();\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = (\n        <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n    );\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const configNodes = config.nodes.map(node => node.node);\n    const configPlugins = config.plugins.map(plugin => (\n        <Fragment key={plugin.name}>{plugin.element}</Fragment>\n    ));\n\n    const value = normalizeInputValue(props.value);\n    const editorValue = isValidLexicalData(value) ? value : generateInitialValue();\n\n    const initialConfig = {\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap }\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\n                const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);\n\n                const newValue = JSON.stringify(editorState.toJSON());\n\n                // We don't want to call \"onChange\" if editor text is empty, and original `value` is empty.\n                if (!value && isEditorEmpty) {\n                    return;\n                }\n\n                if (value !== newValue) {\n                    onChange(newValue);\n                }\n            }\n        });\n    }\n\n    return (\n        /**\n         * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n         * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n         * and initially, there can be multiple re-renders, while the config object is settled.\n         *\n         * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n         */\n        <SharedHistoryContext>\n            <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n                <RichTextEditorProvider\n                    theme={props.theme}\n                    themeEmotionMap={themeEmotionMap}\n                    toolbarActionPlugins={props.toolbarActionPlugins}\n                >\n                    {staticToolbar ? staticToolbar : null}\n                    <div\n                        /* This className is necessary for targeting of editor container from CSS files. */\n                        className={\"editor-shell\"}\n                        ref={scrollRef}\n                        style={{ ...styles, ...sizeStyle, overflow: \"auto\", position: \"relative\" }}\n                    >\n                        {/* State plugins. */}\n                        <OnChangePlugin onChange={handleOnChange} />\n                        <UpdateStatePlugin value={editorValue} />\n                        <ClearEditorPlugin />\n                        <HistoryPlugin externalHistoryState={historyState} />\n                        {/* Event plugins. */}\n                        {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                        {focus && <AutoFocusPlugin />}\n                        {/* External plugins and components. */}\n                        {configPlugins}\n                        {children}\n                        <RichTextPlugin\n                            contentEditable={\n                                <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                                    <div className=\"editor\" ref={onRef}>\n                                        <ContentEditable\n                                            style={{ outline: 0, ...contentEditableStyles }}\n                                        />\n                                    </div>\n                                </div>\n                            }\n                            placeholder={placeholderElem}\n                            ErrorBoundary={LexicalErrorBoundary}\n                        />\n                        {/* Toolbar. */}\n                        {floatingAnchorElem && toolbar}\n                    </div>\n                </RichTextEditorProvider>\n            </LexicalComposer>\n        </SharedHistoryContext>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n    return (\n        <LexicalEditorWithConfig>\n            <BaseRichTextEditor {...props} />\n        </LexicalEditorWithConfig>\n    );\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Fragment","useRef","useState","css","LexicalComposer","AutoFocusPlugin","ClearEditorPlugin","RichTextPlugin","LexicalErrorBoundary","makeDecoratable","HistoryPlugin","ContentEditable","createTheme","toTypographyEmotionMap","allNodes","RichTextEditorProvider","BlurEventPlugin","Placeholder","SharedHistoryContext","useSharedHistoryContext","LexicalEditorWithConfig","useLexicalEditorConfig","StateHandlingPlugin","BaseRichTextEditor","toolbar","staticToolbar","onChange","nodes","placeholder","children","onBlur","focus","styles","width","height","contentEditableStyles","placeholderStyles","props","themeEmotionMap","theme","themeStylesTransformer","editorTheme","config","historyState","placeholderElem","createElement","scrollRef","floatingAnchorElem","setFloatingAnchorElem","undefined","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","key","name","element","initialConfig","editorState","namespace","onError","current","emotionMap","length","toolbarActionPlugins","className","ref","style","overflow","position","value","externalHistoryState","contentEditable","outline","ErrorBoundary","RichTextEditor"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useRef, useState } from \"react\";\nimport { css } from \"emotion\";\nimport type { CSSObject } from \"@emotion/react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport type { EditorTheme, ThemeEmotionMap } from \"@webiny/lexical-theme\";\nimport { createTheme, toTypographyEmotionMap } from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport type { LexicalValue, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin\";\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (json: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: EditorTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n    toolbar?: React.ReactNode;\n    value: LexicalValue | null | undefined;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor = ({\n    toolbar,\n    staticToolbar,\n    onChange,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    height,\n    contentEditableStyles,\n    placeholderStyles,\n    ...props\n}: RichTextEditorProps) => {\n    const themeEmotionMap =\n        props.themeEmotionMap ??\n        toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n\n    const editorTheme = useRef(createTheme(props.theme));\n    const config = useLexicalEditorConfig();\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = (\n        <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n    );\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const configNodes = config.nodes.map(node => node.node);\n    const configPlugins = config.plugins.map(plugin => (\n        <Fragment key={plugin.name}>{plugin.element}</Fragment>\n    ));\n\n    const initialConfig = {\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap }\n    };\n\n    return (\n        /**\n         * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n         * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n         * and initially, there can be multiple re-renders, while the config object is settled.\n         *\n         * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n         */\n        <SharedHistoryContext>\n            <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n                <RichTextEditorProvider\n                    theme={props.theme}\n                    themeEmotionMap={themeEmotionMap}\n                    toolbarActionPlugins={props.toolbarActionPlugins}\n                >\n                    {staticToolbar ? staticToolbar : null}\n                    <div\n                        /* This className is necessary for targeting of editor container from CSS files. */\n                        className={\"editor-shell\"}\n                        ref={scrollRef}\n                        style={{\n                            ...styles,\n                            ...sizeStyle,\n                            overflow: \"auto\",\n                            position: \"relative\"\n                        }}\n                    >\n                        {/* State plugins. */}\n                        <StateHandlingPlugin value={props.value} onChange={onChange} />\n                        <ClearEditorPlugin />\n                        <HistoryPlugin externalHistoryState={historyState} />\n                        {/* Event plugins. */}\n                        {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                        {focus && <AutoFocusPlugin />}\n                        {/* External plugins and components. */}\n                        {configPlugins}\n                        {children}\n                        <RichTextPlugin\n                            contentEditable={\n                                <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                                    <div className=\"editor\" ref={onRef}>\n                                        <ContentEditable\n                                            style={{ outline: 0, ...contentEditableStyles }}\n                                        />\n                                    </div>\n                                </div>\n                            }\n                            placeholder={placeholderElem}\n                            ErrorBoundary={LexicalErrorBoundary}\n                        />\n                        {/* Toolbar. */}\n                        {floatingAnchorElem && toolbar}\n                    </div>\n                </RichTextEditorProvider>\n            </LexicalComposer>\n        </SharedHistoryContext>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n    return (\n        <LexicalEditorWithConfig>\n            <BaseRichTextEditor {...props} />\n        </LexicalEditorWithConfig>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

package/components/Editor/normalizeInputValue.d.ts

@@ -1,4 +1,4 @@
-import { LexicalValue, NormalizedInputValue } from "../../types";
+import type { LexicalValue, NormalizedInputValue } from "../../types";
 /**
  * Value passed to the `RichTextEditor` component can be anything. This function normalizes some of the more common shapes
  * of input into a value that is either a `null` or a `LexicalValue`.

package/components/Editor/normalizeInputValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["isValueEmpty","value","undefined","includes","normalizeInputValue"],"sources":["normalizeInputValue.ts"],"sourcesContent":["import { LexicalValue, NormalizedInputValue } from \"~/types\";\n\nconst isValueEmpty = (value: any) => {\n    return [undefined, null, \"\", '\"\"', \"null\"].includes(value);\n};\n\n/**\n * Value passed to the `RichTextEditor` component can be anything. This function normalizes some of the more common shapes\n * of input into a value that is either a `null` or a `LexicalValue`.\n */\nexport function normalizeInputValue(value: LexicalValue | null | undefined) {\n    if (isValueEmpty(value)) {\n        return null;\n    }\n\n    return value as NormalizedInputValue;\n}\n"],"mappings":"AAEA,MAAMA,YAAY,GAAIC,KAAU,IAAK;EACjC,OAAO,CAACC,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACF,KAAK,CAAC;AAC9D,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,SAASG,mBAAmBA,CAACH,KAAsC,EAAE;EACxE,IAAID,YAAY,CAACC,KAAK,CAAC,EAAE;IACrB,OAAO,IAAI;EACf;EAEA,OAAOA,KAAK;AAChB","ignoreList":[]}
+{"version":3,"names":["isValueEmpty","value","undefined","includes","normalizeInputValue"],"sources":["normalizeInputValue.ts"],"sourcesContent":["import type { LexicalValue, NormalizedInputValue } from \"~/types\";\n\nconst isValueEmpty = (value: any) => {\n    return [undefined, null, \"\", '\"\"', \"null\"].includes(value);\n};\n\n/**\n * Value passed to the `RichTextEditor` component can be anything. This function normalizes some of the more common shapes\n * of input into a value that is either a `null` or a `LexicalValue`.\n */\nexport function normalizeInputValue(value: LexicalValue | null | undefined) {\n    if (isValueEmpty(value)) {\n        return null;\n    }\n\n    return value as NormalizedInputValue;\n}\n"],"mappings":"AAEA,MAAMA,YAAY,GAAIC,KAAU,IAAK;EACjC,OAAO,CAACC,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,CAACC,QAAQ,CAACF,KAAK,CAAC;AAC9D,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,SAASG,mBAAmBA,CAACH,KAAsC,EAAE;EACxE,IAAID,YAAY,CAACC,KAAK,CAAC,EAAE;IACrB,OAAO,IAAI;EACf;EAEA,OAAOA,KAAK;AAChB","ignoreList":[]}

package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ToolbarElementConfig } from "./components/ToolbarElement";
-import { PluginConfig } from "./components/Plugin";
-import { NodeConfig } from "./components/Node";
+import type { ToolbarElementConfig } from "./components/ToolbarElement";
+import type { PluginConfig } from "./components/Plugin";
+import type { NodeConfig } from "./components/Node";
 export declare const LexicalEditorConfig: {
     ({ children }: {
         children: React.ReactNode;

package/components/LexicalEditorConfig/LexicalEditorConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useMemo","useState","makeDecoratable","Compose","Properties","toObject","ToolbarElement","Plugin","Node","LexicalEditorConfigApply","children","createElement","Fragment","createHOC","newChildren","BaseComponent","ConfigHOC","LexicalEditorConfig","component","with","ViewContext","createContext","properties","LexicalEditorWithConfig","setProperties","context","stateUpdater","Provider","value","onChange","useLexicalEditorConfig","config","toolbarElements","plugins","nodes"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from \"react\";\nimport { makeDecoratable, Compose, Decorator, GenericComponent } from \"@webiny/react-composition\";\nimport { Property, Properties, toObject } from \"@webiny/react-properties\";\nimport { ToolbarElement, ToolbarElementConfig } from \"./components/ToolbarElement\";\nimport { Plugin, PluginConfig } from \"./components/Plugin\";\nimport { Node, NodeConfig } from \"./components/Node\";\n\nconst LexicalEditorConfigApply = makeDecoratable(\"LexicalEditorConfigApply\", ({ children }) => {\n    return <>{children}</>;\n});\n\nconst createHOC =\n    (newChildren: React.ReactNode): Decorator<GenericComponent> =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport const LexicalEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return <Compose component={LexicalEditorConfigApply} with={createHOC(children)} />;\n};\n\nLexicalEditorConfig.ToolbarElement = ToolbarElement;\nLexicalEditorConfig.Plugin = Plugin;\nLexicalEditorConfig.Node = Node;\n\ninterface ViewContext {\n    properties: Property[];\n}\n\nconst ViewContext = React.createContext<ViewContext>({ properties: [] });\n\nexport const LexicalEditorWithConfig = ({ children }: { children: React.ReactNode }) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n    const context = { properties };\n\n    const stateUpdater = (properties: Property[]) => {\n        setProperties(properties);\n    };\n\n    return (\n        <ViewContext.Provider value={context}>\n            <Properties onChange={stateUpdater}>\n                <LexicalEditorConfigApply />\n                {children}\n            </Properties>\n        </ViewContext.Provider>\n    );\n};\n\ninterface LexicalEditorConfigData {\n    toolbarElements: ToolbarElementConfig[];\n    plugins: PluginConfig[];\n    nodes: NodeConfig[];\n}\n\nexport function useLexicalEditorConfig() {\n    const { properties } = useContext(ViewContext);\n\n    const config = useMemo(() => {\n        return toObject<LexicalEditorConfigData>(properties);\n    }, [properties]);\n\n    return {\n        toolbarElements: config.toolbarElements || [],\n        plugins: config.plugins || [],\n        nodes: config.nodes || []\n    };\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SAASC,eAAe,EAAEC,OAAO,QAAqC,2BAA2B;AACjG,SAAmBC,UAAU,EAAEC,QAAQ,QAAQ,0BAA0B;AACzE,SAASC,cAAc;AACvB,SAASC,MAAM;AACf,SAASC,IAAI;AAEb,MAAMC,wBAAwB,GAAGP,eAAe,CAAC,0BAA0B,EAAE,CAAC;EAAEQ;AAAS,CAAC,KAAK;EAC3F,oBAAOZ,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QAAGF,QAAW,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAMG,SAAS,GACVC,WAA4B,IAC7BC,aAAa,IAAI;EACb,OAAO,SAASC,SAASA,CAAC;IAAEN;EAAS,CAAC,EAAE;IACpC,oBACIZ,KAAA,CAAAa,aAAA,CAACI,aAAa,QACTD,WAAW,EACXJ,QACU,CAAC;EAExB,CAAC;AACL,CAAC;AAEL,OAAO,MAAMO,mBAAmB,GAAGA,CAAC;EAAEP;AAAwC,CAAC,KAAK;EAChF,oBAAOZ,KAAA,CAAAa,aAAA,CAACR,OAAO;IAACe,SAAS,EAAET,wBAAyB;IAACU,IAAI,EAAEN,SAAS,CAACH,QAAQ;EAAE,CAAE,CAAC;AACtF,CAAC;AAEDO,mBAAmB,CAACX,cAAc,GAAGA,cAAc;AACnDW,mBAAmB,CAACV,MAAM,GAAGA,MAAM;AACnCU,mBAAmB,CAACT,IAAI,GAAGA,IAAI;AAM/B,MAAMY,WAAW,gBAAGtB,KAAK,CAACuB,aAAa,CAAc;EAAEC,UAAU,EAAE;AAAG,CAAC,CAAC;AAExE,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEb;AAAwC,CAAC,KAAK;EACpF,MAAM,CAACY,UAAU,EAAEE,aAAa,CAAC,GAAGvB,QAAQ,CAAa,EAAE,CAAC;EAC5D,MAAMwB,OAAO,GAAG;IAAEH;EAAW,CAAC;EAE9B,MAAMI,YAAY,GAAIJ,UAAsB,IAAK;IAC7CE,aAAa,CAACF,UAAU,CAAC;EAC7B,CAAC;EAED,oBACIxB,KAAA,CAAAa,aAAA,CAACS,WAAW,CAACO,QAAQ;IAACC,KAAK,EAAEH;EAAQ,gBACjC3B,KAAA,CAAAa,aAAA,CAACP,UAAU;IAACyB,QAAQ,EAAEH;EAAa,gBAC/B5B,KAAA,CAAAa,aAAA,CAACF,wBAAwB,MAAE,CAAC,EAC3BC,QACO,CACM,CAAC;AAE/B,CAAC;AAQD,OAAO,SAASoB,sBAAsBA,CAAA,EAAG;EACrC,MAAM;IAAER;EAAW,CAAC,GAAGvB,UAAU,CAACqB,WAAW,CAAC;EAE9C,MAAMW,MAAM,GAAG/B,OAAO,CAAC,MAAM;IACzB,OAAOK,QAAQ,CAA0BiB,UAAU,CAAC;EACxD,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,OAAO;IACHU,eAAe,EAAED,MAAM,CAACC,eAAe,IAAI,EAAE;IAC7CC,OAAO,EAAEF,MAAM,CAACE,OAAO,IAAI,EAAE;IAC7BC,KAAK,EAAEH,MAAM,CAACG,KAAK,IAAI;EAC3B,CAAC;AACL","ignoreList":[]}
+{"version":3,"names":["React","useContext","useMemo","useState","makeDecoratable","Compose","Properties","toObject","ToolbarElement","Plugin","Node","LexicalEditorConfigApply","children","createElement","Fragment","createHOC","newChildren","BaseComponent","ConfigHOC","LexicalEditorConfig","component","with","ViewContext","createContext","properties","LexicalEditorWithConfig","setProperties","context","stateUpdater","Provider","value","onChange","useLexicalEditorConfig","config","toolbarElements","plugins","nodes"],"sources":["LexicalEditorConfig.tsx"],"sourcesContent":["import React, { useContext, useMemo, useState } from \"react\";\nimport type { Decorator, GenericComponent } from \"@webiny/react-composition\";\nimport { makeDecoratable, Compose } from \"@webiny/react-composition\";\nimport type { Property } from \"@webiny/react-properties\";\nimport { Properties, toObject } from \"@webiny/react-properties\";\nimport type { ToolbarElementConfig } from \"./components/ToolbarElement\";\nimport { ToolbarElement } from \"./components/ToolbarElement\";\nimport type { PluginConfig } from \"./components/Plugin\";\nimport { Plugin } from \"./components/Plugin\";\nimport type { NodeConfig } from \"./components/Node\";\nimport { Node } from \"./components/Node\";\n\nconst LexicalEditorConfigApply = makeDecoratable(\"LexicalEditorConfigApply\", ({ children }) => {\n    return <>{children}</>;\n});\n\nconst createHOC =\n    (newChildren: React.ReactNode): Decorator<GenericComponent> =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport const LexicalEditorConfig = ({ children }: { children: React.ReactNode }) => {\n    return <Compose component={LexicalEditorConfigApply} with={createHOC(children)} />;\n};\n\nLexicalEditorConfig.ToolbarElement = ToolbarElement;\nLexicalEditorConfig.Plugin = Plugin;\nLexicalEditorConfig.Node = Node;\n\ninterface ViewContext {\n    properties: Property[];\n}\n\nconst ViewContext = React.createContext<ViewContext>({ properties: [] });\n\nexport const LexicalEditorWithConfig = ({ children }: { children: React.ReactNode }) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n    const context = { properties };\n\n    const stateUpdater = (properties: Property[]) => {\n        setProperties(properties);\n    };\n\n    return (\n        <ViewContext.Provider value={context}>\n            <Properties onChange={stateUpdater}>\n                <LexicalEditorConfigApply />\n                {children}\n            </Properties>\n        </ViewContext.Provider>\n    );\n};\n\ninterface LexicalEditorConfigData {\n    toolbarElements: ToolbarElementConfig[];\n    plugins: PluginConfig[];\n    nodes: NodeConfig[];\n}\n\nexport function useLexicalEditorConfig() {\n    const { properties } = useContext(ViewContext);\n\n    const config = useMemo(() => {\n        return toObject<LexicalEditorConfigData>(properties);\n    }, [properties]);\n\n    return {\n        toolbarElements: config.toolbarElements || [],\n        plugins: config.plugins || [],\n        nodes: config.nodes || []\n    };\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAE5D,SAASC,eAAe,EAAEC,OAAO,QAAQ,2BAA2B;AAEpE,SAASC,UAAU,EAAEC,QAAQ,QAAQ,0BAA0B;AAE/D,SAASC,cAAc;AAEvB,SAASC,MAAM;AAEf,SAASC,IAAI;AAEb,MAAMC,wBAAwB,GAAGP,eAAe,CAAC,0BAA0B,EAAE,CAAC;EAAEQ;AAAS,CAAC,KAAK;EAC3F,oBAAOZ,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QAAGF,QAAW,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAMG,SAAS,GACVC,WAA4B,IAC7BC,aAAa,IAAI;EACb,OAAO,SAASC,SAASA,CAAC;IAAEN;EAAS,CAAC,EAAE;IACpC,oBACIZ,KAAA,CAAAa,aAAA,CAACI,aAAa,QACTD,WAAW,EACXJ,QACU,CAAC;EAExB,CAAC;AACL,CAAC;AAEL,OAAO,MAAMO,mBAAmB,GAAGA,CAAC;EAAEP;AAAwC,CAAC,KAAK;EAChF,oBAAOZ,KAAA,CAAAa,aAAA,CAACR,OAAO;IAACe,SAAS,EAAET,wBAAyB;IAACU,IAAI,EAAEN,SAAS,CAACH,QAAQ;EAAE,CAAE,CAAC;AACtF,CAAC;AAEDO,mBAAmB,CAACX,cAAc,GAAGA,cAAc;AACnDW,mBAAmB,CAACV,MAAM,GAAGA,MAAM;AACnCU,mBAAmB,CAACT,IAAI,GAAGA,IAAI;AAM/B,MAAMY,WAAW,gBAAGtB,KAAK,CAACuB,aAAa,CAAc;EAAEC,UAAU,EAAE;AAAG,CAAC,CAAC;AAExE,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEb;AAAwC,CAAC,KAAK;EACpF,MAAM,CAACY,UAAU,EAAEE,aAAa,CAAC,GAAGvB,QAAQ,CAAa,EAAE,CAAC;EAC5D,MAAMwB,OAAO,GAAG;IAAEH;EAAW,CAAC;EAE9B,MAAMI,YAAY,GAAIJ,UAAsB,IAAK;IAC7CE,aAAa,CAACF,UAAU,CAAC;EAC7B,CAAC;EAED,oBACIxB,KAAA,CAAAa,aAAA,CAACS,WAAW,CAACO,QAAQ;IAACC,KAAK,EAAEH;EAAQ,gBACjC3B,KAAA,CAAAa,aAAA,CAACP,UAAU;IAACyB,QAAQ,EAAEH;EAAa,gBAC/B5B,KAAA,CAAAa,aAAA,CAACF,wBAAwB,MAAE,CAAC,EAC3BC,QACO,CACM,CAAC;AAE/B,CAAC;AAQD,OAAO,SAASoB,sBAAsBA,CAAA,EAAG;EACrC,MAAM;IAAER;EAAW,CAAC,GAAGvB,UAAU,CAACqB,WAAW,CAAC;EAE9C,MAAMW,MAAM,GAAG/B,OAAO,CAAC,MAAM;IACzB,OAAOK,QAAQ,CAA0BiB,UAAU,CAAC;EACxD,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,OAAO;IACHU,eAAe,EAAED,MAAM,CAACC,eAAe,IAAI,EAAE;IAC7CC,OAAO,EAAEF,MAAM,CAACE,OAAO,IAAI,EAAE;IAC7BC,KAAK,EAAEH,MAAM,CAACG,KAAK,IAAI;EAC3B,CAAC;AACL","ignoreList":[]}

package/components/LexicalEditorConfig/components/Node.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Klass, LexicalNode } from "lexical";
+import type { Klass, LexicalNode } from "lexical";
 export interface NodeConfig {
     name: string;
     node: Klass<LexicalNode>;

package/components/LexicalEditorConfig/components/Node.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Property","Node","name","node","after","undefined","before","remove","placeBefore","placeAfter","createElement","id","array","value"],"sources":["Node.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\nimport { Klass, LexicalNode } from \"lexical\";\n\nexport interface NodeConfig {\n    name: string;\n    node: Klass<LexicalNode>;\n}\n\nexport interface NodeProps {\n    name: string;\n    node?: Klass<LexicalNode>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Node = ({\n    name,\n    node,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: NodeProps) => {\n    const placeBefore = before !== undefined ? `node:${before}` : undefined;\n    const placeAfter = after !== undefined ? `node:${after}` : undefined;\n\n    return (\n        <Property\n            id={`nodes:${name}`}\n            name={\"nodes\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`node:${name}:name`} name={\"name\"} value={name} />\n            {node ? <Property id={`node:${name}:node`} name={\"node\"} value={node} /> : null}\n        </Property>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,0BAA0B;AAgBnD,OAAO,MAAMC,IAAI,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK,GAAGC,SAAS;EACjBC,MAAM,GAAGD,SAAS;EAClBE,MAAM,GAAG;AACF,CAAC,KAAK;EACb,MAAMC,WAAW,GAAGF,MAAM,KAAKD,SAAS,GAAG,QAAQC,MAAM,EAAE,GAAGD,SAAS;EACvE,MAAMI,UAAU,GAAGL,KAAK,KAAKC,SAAS,GAAG,QAAQD,KAAK,EAAE,GAAGC,SAAS;EAEpE,oBACIN,KAAA,CAAAW,aAAA,CAACV,QAAQ;IACLW,EAAE,EAAE,SAAST,IAAI,EAAG;IACpBA,IAAI,EAAE,OAAQ;IACdU,KAAK,EAAE,IAAK;IACZN,MAAM,EAAEE,WAAY;IACpBJ,KAAK,EAAEK,UAAW;IAClBF,MAAM,EAAEA;EAAO,gBAEfR,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,QAAQT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEX;EAAK,CAAE,CAAC,EAC/DC,IAAI,gBAAGJ,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,QAAQT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEV;EAAK,CAAE,CAAC,GAAG,IACrE,CAAC;AAEnB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Property","Node","name","node","after","undefined","before","remove","placeBefore","placeAfter","createElement","id","array","value"],"sources":["Node.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property } from \"@webiny/react-properties\";\nimport type { Klass, LexicalNode } from \"lexical\";\n\nexport interface NodeConfig {\n    name: string;\n    node: Klass<LexicalNode>;\n}\n\nexport interface NodeProps {\n    name: string;\n    node?: Klass<LexicalNode>;\n    remove?: boolean;\n    before?: string;\n    after?: string;\n}\n\nexport const Node = ({\n    name,\n    node,\n    after = undefined,\n    before = undefined,\n    remove = false\n}: NodeProps) => {\n    const placeBefore = before !== undefined ? `node:${before}` : undefined;\n    const placeAfter = after !== undefined ? `node:${after}` : undefined;\n\n    return (\n        <Property\n            id={`nodes:${name}`}\n            name={\"nodes\"}\n            array={true}\n            before={placeBefore}\n            after={placeAfter}\n            remove={remove}\n        >\n            <Property id={`node:${name}:name`} name={\"name\"} value={name} />\n            {node ? <Property id={`node:${name}:node`} name={\"node\"} value={node} /> : null}\n        </Property>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,0BAA0B;AAgBnD,OAAO,MAAMC,IAAI,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK,GAAGC,SAAS;EACjBC,MAAM,GAAGD,SAAS;EAClBE,MAAM,GAAG;AACF,CAAC,KAAK;EACb,MAAMC,WAAW,GAAGF,MAAM,KAAKD,SAAS,GAAG,QAAQC,MAAM,EAAE,GAAGD,SAAS;EACvE,MAAMI,UAAU,GAAGL,KAAK,KAAKC,SAAS,GAAG,QAAQD,KAAK,EAAE,GAAGC,SAAS;EAEpE,oBACIN,KAAA,CAAAW,aAAA,CAACV,QAAQ;IACLW,EAAE,EAAE,SAAST,IAAI,EAAG;IACpBA,IAAI,EAAE,OAAQ;IACdU,KAAK,EAAE,IAAK;IACZN,MAAM,EAAEE,WAAY;IACpBJ,KAAK,EAAEK,UAAW;IAClBF,MAAM,EAAEA;EAAO,gBAEfR,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,QAAQT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEX;EAAK,CAAE,CAAC,EAC/DC,IAAI,gBAAGJ,KAAA,CAAAW,aAAA,CAACV,QAAQ;IAACW,EAAE,EAAE,QAAQT,IAAI,OAAQ;IAACA,IAAI,EAAE,MAAO;IAACW,KAAK,EAAEV;EAAK,CAAE,CAAC,GAAG,IACrE,CAAC;AAEnB,CAAC","ignoreList":[]}

package/components/LexicalHtmlRenderer.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { Klass, LexicalNode } from "lexical";
-import { CSSObject } from "@emotion/react";
-import { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
-import { LexicalValue } from "../types";
+import type { Klass, LexicalNode } from "lexical";
+import type { CSSObject } from "@emotion/react";
+import type { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
+import type { LexicalValue } from "../types";
 interface LexicalHtmlRendererProps {
     nodes?: Klass<LexicalNode>[];
     value: LexicalValue | null;

package/components/LexicalHtmlRenderer.js

@@ -6,10 +6,8 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { allNodes } from "@webiny/lexical-nodes";
 import { createTheme, toTypographyEmotionMap } from "@webiny/lexical-theme";
-import { isValidLexicalData } from "../utils/isValidLexicalData";
-import { generateInitialLexicalValue } from "../utils/generateInitialLexicalValue";
-import { UpdateStatePlugin } from "../plugins/LexicalUpdateStatePlugin";
 import { RichTextEditorProvider } from "../context/RichTextEditorContext";
+import { StateHandlingPlugin } from "../plugins/StateHandlingPlugin";
 export const LexicalHtmlRenderer = ({
   nodes,
   value,
@@ -22,9 +20,7 @@ export const LexicalHtmlRenderer = ({
   };
   const themeEmotionMap = props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);
   const editorTheme = useRef(createTheme(theme));
-  const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();
   const initialConfig = {
-    // We update the state via the `<LexicalUpdateStatePlugin/>`.
     editorState: null,
     namespace: "webiny",
     onError: () => {
@@ -51,8 +47,8 @@ export const LexicalHtmlRenderer = ({
     }, /*#__PURE__*/React.createElement(ContentEditable, null)),
     ErrorBoundary: LexicalErrorBoundary,
     placeholder: null
-  }), /*#__PURE__*/React.createElement(UpdateStatePlugin, {
-    value: editorValue
+  }), /*#__PURE__*/React.createElement(StateHandlingPlugin, {
+    value: value
   })));
 };
 

package/components/LexicalHtmlRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","css","LexicalComposer","RichTextPlugin","ContentEditable","LexicalErrorBoundary","allNodes","createTheme","toTypographyEmotionMap","isValidLexicalData","generateInitialLexicalValue","UpdateStatePlugin","RichTextEditorProvider","LexicalHtmlRenderer","nodes","value","props","theme","styles","emotionMap","themeEmotionMap","themeStylesTransformer","editorTheme","editorValue","initialConfig","editorState","namespace","onError","editable","current","createElement","key","length","contentEditable","className","ErrorBoundary","placeholder"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport {\n    createTheme,\n    EditorTheme,\n    ThemeEmotionMap,\n    toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalValue } from \"~/types\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { LinkAction } from \"~/components/ToolbarActions/LinkAction.js\";\nimport { ToolbarElement } from \"~/components/LexicalEditorConfig/components/ToolbarElement.js\";\nimport { LexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: Partial<EditorTheme>;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = { styles: {}, emotionMap: {}, ...props.theme };\n    const themeEmotionMap =\n        props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);\n    const editorTheme = useRef(createTheme(theme));\n    const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();\n\n    const initialConfig = {\n        // We update the state via the `<LexicalUpdateStatePlugin/>`.\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme} themeEmotionMap={themeEmotionMap}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <UpdateStatePlugin value={editorValue} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAErC,SAASC,GAAG,QAAQ,SAAS;AAE7B,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,sCAAsC;AACrE,SAASC,eAAe,QAAQ,uCAAuC;AACvE,OAAOC,oBAAoB,MAAM,qCAAqC;AACtE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SACIC,WAAW,EAGXC,sBAAsB,QACnB,uBAAuB;AAC9B,SAASC,kBAAkB;AAC3B,SAASC,2BAA2B;AAEpC,SAASC,iBAAiB;AAC1B,SAASC,sBAAsB;AAa/B,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACzF,MAAMC,KAAkB,GAAG;IAAEC,MAAM,EAAE,CAAC,CAAC;IAAEC,UAAU,EAAE,CAAC,CAAC;IAAE,GAAGH,KAAK,CAACC;EAAM,CAAC;EACzE,MAAMG,eAAe,GACjBJ,KAAK,EAAEI,eAAe,IAAIZ,sBAAsB,CAACP,GAAG,EAAEgB,KAAK,EAAED,KAAK,CAACK,sBAAsB,CAAC;EAC9F,MAAMC,WAAW,GAAGtB,MAAM,CAACO,WAAW,CAACU,KAAK,CAAC,CAAC;EAC9C,MAAMM,WAAW,GAAGd,kBAAkB,CAACM,KAAK,CAAC,GAAGA,KAAK,GAAGL,2BAA2B,CAAC,CAAC;EAErF,MAAMc,aAAa,GAAG;IAClB;IACAC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAEA,CAAA,KAAM;MACX;MACA;IAAA,CACH;IACDC,QAAQ,EAAE,KAAK;IACfd,KAAK,EAAE,CAAC,GAAGR,QAAQ,EAAE,IAAIQ,KAAK,IAAI,EAAE,CAAC,CAAC;IACtCG,KAAK,EAAE;MAAE,GAAGK,WAAW,CAACO,OAAO;MAAEV,UAAU,EAAEC,eAAe;MAAEF,MAAM,EAAED,KAAK,CAACC;IAAO;EACvF,CAAC;EAED,oBACInB,KAAA,CAAA+B,aAAA,CAAC5B,eAAe;IAACsB,aAAa,EAAEA,aAAc;IAACO,GAAG,EAAEP,aAAa,CAACV,KAAK,CAACkB;EAAO,gBAC3EjC,KAAA,CAAA+B,aAAA,CAAClB,sBAAsB;IAACK,KAAK,EAAEA,KAAM;IAACG,eAAe,EAAEA;EAAgB,gBACnErB,KAAA,CAAA+B,aAAA,CAAC3B,cAAc;IACX8B,eAAe,eACXlC,KAAA,CAAA+B,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBnC,KAAA,CAAA+B,aAAA,CAAC1B,eAAe,MAAE,CACjB,CACR;IACD+B,aAAa,EAAE9B,oBAAqB;IACpC+B,WAAW,EAAE;EAAK,CACrB,CAAC,eACFrC,KAAA,CAAA+B,aAAA,CAACnB,iBAAiB;IAACI,KAAK,EAAEQ;EAAY,CAAE,CACpB,CACX,CAAC;AAE1B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useRef","css","LexicalComposer","RichTextPlugin","ContentEditable","LexicalErrorBoundary","allNodes","createTheme","toTypographyEmotionMap","RichTextEditorProvider","StateHandlingPlugin","LexicalHtmlRenderer","nodes","value","props","theme","styles","emotionMap","themeEmotionMap","themeStylesTransformer","editorTheme","initialConfig","editorState","namespace","onError","editable","current","createElement","key","length","contentEditable","className","ErrorBoundary","placeholder"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { css } from \"emotion\";\nimport type { CSSObject } from \"@emotion/react\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { EditorTheme, ThemeEmotionMap } from \"@webiny/lexical-theme\";\nimport { createTheme, toTypographyEmotionMap } from \"@webiny/lexical-theme\";\nimport type { LexicalValue } from \"~/types\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: Partial<EditorTheme>;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = { styles: {}, emotionMap: {}, ...props.theme };\n    const themeEmotionMap =\n        props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);\n    const editorTheme = useRef(createTheme(theme));\n\n    const initialConfig = {\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme} themeEmotionMap={themeEmotionMap}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <StateHandlingPlugin value={value} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAErC,SAASC,GAAG,QAAQ,SAAS;AAE7B,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,sCAAsC;AACrE,SAASC,eAAe,QAAQ,uCAAuC;AACvE,OAAOC,oBAAoB,MAAM,qCAAqC;AACtE,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,WAAW,EAAEC,sBAAsB,QAAQ,uBAAuB;AAE3E,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAU5B,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACzF,MAAMC,KAAkB,GAAG;IAAEC,MAAM,EAAE,CAAC,CAAC;IAAEC,UAAU,EAAE,CAAC,CAAC;IAAE,GAAGH,KAAK,CAACC;EAAM,CAAC;EACzE,MAAMG,eAAe,GACjBJ,KAAK,EAAEI,eAAe,IAAIV,sBAAsB,CAACP,GAAG,EAAEc,KAAK,EAAED,KAAK,CAACK,sBAAsB,CAAC;EAC9F,MAAMC,WAAW,GAAGpB,MAAM,CAACO,WAAW,CAACQ,KAAK,CAAC,CAAC;EAE9C,MAAMM,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAEA,CAAA,KAAM;MACX;MACA;IAAA,CACH;IACDC,QAAQ,EAAE,KAAK;IACfb,KAAK,EAAE,CAAC,GAAGN,QAAQ,EAAE,IAAIM,KAAK,IAAI,EAAE,CAAC,CAAC;IACtCG,KAAK,EAAE;MAAE,GAAGK,WAAW,CAACM,OAAO;MAAET,UAAU,EAAEC,eAAe;MAAEF,MAAM,EAAED,KAAK,CAACC;IAAO;EACvF,CAAC;EAED,oBACIjB,KAAA,CAAA4B,aAAA,CAACzB,eAAe;IAACmB,aAAa,EAAEA,aAAc;IAACO,GAAG,EAAEP,aAAa,CAACT,KAAK,CAACiB;EAAO,gBAC3E9B,KAAA,CAAA4B,aAAA,CAAClB,sBAAsB;IAACM,KAAK,EAAEA,KAAM;IAACG,eAAe,EAAEA;EAAgB,gBACnEnB,KAAA,CAAA4B,aAAA,CAACxB,cAAc;IACX2B,eAAe,eACX/B,KAAA,CAAA4B,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBhC,KAAA,CAAA4B,aAAA,CAACvB,eAAe,MAAE,CACjB,CACR;IACD4B,aAAa,EAAE3B,oBAAqB;IACpC4B,WAAW,EAAE;EAAK,CACrB,CAAC,eACFlC,KAAA,CAAA4B,aAAA,CAACjB,mBAAmB;IAACG,KAAK,EAAEA;EAAM,CAAE,CAChB,CACX,CAAC;AAE1B,CAAC","ignoreList":[]}

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","useCallback","useEffect","useRef","useState","$getSelection","BLUR_COMMAND","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","createPortal","mergeRegister","getDOMRangeRect","setFloatingElemPosition","useLexicalEditorConfig","useDeriveValueFromSelection","useRichTextEditor","isChildOfFloatingToolbar","HIDE_FLOATING_TOOLBAR","FloatingToolbar","anchorElem","editor","isVisible","setIsVisible","popupCharStylesEditorRef","toolbarElements","mouseMoveListener","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","setTimeout","payload","relatedTarget","createElement","ref","className","isEditable","map","action","key","name","element","Toolbar","body","showToolbar","rangeSelection"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\nimport { HIDE_FLOATING_TOOLBAR } from \"~/commands\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n    const [isVisible, setIsVisible] = useState(true);\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    const mouseMoveListener = useCallback(\n        (e: MouseEvent) => {\n            /* Indicates which mouse button(s) was pressed.\n             / 1 = mouse left button\n             / 3 = mouse left and right button in the same time\n             / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n             */\n            if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n                if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n                    const x = e.clientX;\n                    const y = e.clientY;\n                    const elementUnderMouse = document.elementFromPoint(x, y);\n\n                    if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n                        // Mouse is not over the target element => not a normal click, but probably a drag\n                        popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n                    }\n                }\n            }\n        },\n        [popupCharStylesEditorRef]\n    );\n\n    const mouseUpListener = useCallback(() => {\n        if (popupCharStylesEditorRef?.current) {\n            if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n                popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n            }\n        }\n    }, [popupCharStylesEditorRef]);\n\n    useEffect(() => {\n        if (popupCharStylesEditorRef?.current) {\n            document.addEventListener(\"mousemove\", mouseMoveListener);\n            document.addEventListener(\"mouseup\", mouseUpListener);\n\n            return () => {\n                document.removeEventListener(\"mousemove\", mouseMoveListener);\n                document.removeEventListener(\"mouseup\", mouseUpListener);\n            };\n        }\n        return;\n    }, [popupCharStylesEditorRef]);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                HIDE_FLOATING_TOOLBAR,\n                () => {\n                    setTimeout(() => {\n                        setIsVisible(false);\n                    }, 10);\n                    return true;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    setIsVisible(true);\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n                        setIsVisible(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const { editor } = useRichTextEditor();\n    const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n\n        return !rangeSelection.isCollapsed();\n    });\n\n    if (!showToolbar) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Fragment","useCallback","useEffect","useRef","useState","$getSelection","BLUR_COMMAND","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","createPortal","mergeRegister","getDOMRangeRect","setFloatingElemPosition","useLexicalEditorConfig","useDeriveValueFromSelection","useRichTextEditor","isChildOfFloatingToolbar","HIDE_FLOATING_TOOLBAR","FloatingToolbar","anchorElem","editor","isVisible","setIsVisible","popupCharStylesEditorRef","toolbarElements","mouseMoveListener","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","scrollerElem","parentElement","update","getEditorState","read","registerUpdateListener","editorState","registerCommand","setTimeout","payload","relatedTarget","createElement","ref","className","isEditable","map","action","key","name","element","Toolbar","body","showToolbar","rangeSelection"],"sources":["Toolbar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, { Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport type { LexicalEditor } from \"lexical\";\nimport {\n    $getSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\nimport { HIDE_FLOATING_TOOLBAR } from \"~/commands\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n    const [isVisible, setIsVisible] = useState(true);\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    const mouseMoveListener = useCallback(\n        (e: MouseEvent) => {\n            /* Indicates which mouse button(s) was pressed.\n             / 1 = mouse left button\n             / 3 = mouse left and right button in the same time\n             / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n             */\n            if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n                if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n                    const x = e.clientX;\n                    const y = e.clientY;\n                    const elementUnderMouse = document.elementFromPoint(x, y);\n\n                    if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n                        // Mouse is not over the target element => not a normal click, but probably a drag\n                        popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n                    }\n                }\n            }\n        },\n        [popupCharStylesEditorRef]\n    );\n\n    const mouseUpListener = useCallback(() => {\n        if (popupCharStylesEditorRef?.current) {\n            if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n                popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n            }\n        }\n    }, [popupCharStylesEditorRef]);\n\n    useEffect(() => {\n        if (popupCharStylesEditorRef?.current) {\n            document.addEventListener(\"mousemove\", mouseMoveListener);\n            document.addEventListener(\"mouseup\", mouseUpListener);\n\n            return () => {\n                document.removeEventListener(\"mousemove\", mouseMoveListener);\n                document.removeEventListener(\"mouseup\", mouseUpListener);\n            };\n        }\n        return;\n    }, [popupCharStylesEditorRef]);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                HIDE_FLOATING_TOOLBAR,\n                () => {\n                    setTimeout(() => {\n                        setIsVisible(false);\n                    }, 10);\n                    return true;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    setIsVisible(true);\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n                        setIsVisible(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const { editor } = useRichTextEditor();\n    const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n\n        return !rangeSelection.isCollapsed();\n    });\n\n    if (!showToolbar) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}

package/components/ToolbarActions/BulletListAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","INSERT_UNORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","findTypographyStyleByHtmlTag","$isListNode","useCurrentElement","BulletListAction","editor","element","themeEmotionMap","isList","isBullet","getListType","formatBulletList","styleId","id","undefined","dispatchCommand","themeStyleId","createElement","onClick","className"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { $isListNode, ListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const BulletListAction = () => {\n    const { editor } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const { themeEmotionMap } = useRichTextEditor();\n    const isList = $isListNode(element);\n\n    const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n    const formatBulletList = () => {\n        if (!isBullet) {\n            const styleId = themeEmotionMap\n                ? findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id\n                : undefined;\n\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,6BAA6B,EAAEC,mBAAmB;AAC3D,SAASC,iBAAiB;AAC1B,SAASC,4BAA4B,QAAQ,uBAAuB;AACpE,SAASC,WAAW,QAAkB,uBAAuB;AAC7D,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEM;EAAQ,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEI;EAAgB,CAAC,GAAGP,iBAAiB,CAAC,CAAC;EAC/C,MAAMQ,MAAM,GAAGN,WAAW,CAACI,OAAO,CAAC;EAEnC,MAAMG,QAAQ,GAAGD,MAAM,IAAKF,OAAO,CAAcI,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,MAAMG,OAAO,GAAGL,eAAe,GACzBN,4BAA4B,CAAC,IAAI,EAAEM,eAAe,CAAC,EAAEM,EAAE,GACvDC,SAAS;;MAEf;MACAT,MAAM,CAACU,eAAe,CAACjB,6BAA6B,EAAE;QAAEkB,YAAY,EAAEJ;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHP,MAAM,CAACU,eAAe,CAAChB,mBAAmB,EAAEe,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACIjB,KAAA,CAAAoB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAMP,gBAAgB,CAAC,CAAE;IAClCQ,SAAS,EAAE,oBAAoB,IAAIV,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCZ,KAAA,CAAAoB,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","INSERT_UNORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND","useRichTextEditor","findTypographyStyleByHtmlTag","$isListNode","useCurrentElement","BulletListAction","editor","element","themeEmotionMap","isList","isBullet","getListType","formatBulletList","styleId","id","undefined","dispatchCommand","themeStyleId","createElement","onClick","className"],"sources":["BulletListAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from \"~/commands\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport type { ListNode } from \"@webiny/lexical-nodes\";\nimport { $isListNode } from \"@webiny/lexical-nodes\";\nimport { useCurrentElement } from \"~/hooks/useCurrentElement\";\n\nexport const BulletListAction = () => {\n    const { editor } = useRichTextEditor();\n    const { element } = useCurrentElement();\n    const { themeEmotionMap } = useRichTextEditor();\n    const isList = $isListNode(element);\n\n    const isBullet = isList && (element as ListNode).getListType() === \"bullet\";\n\n    const formatBulletList = () => {\n        if (!isBullet) {\n            const styleId = themeEmotionMap\n                ? findTypographyStyleByHtmlTag(\"ul\", themeEmotionMap)?.id\n                : undefined;\n\n            // will update the active state in the useEffect\n            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, { themeStyleId: styleId });\n        } else {\n            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);\n        }\n    };\n\n    return (\n        <button\n            onClick={() => formatBulletList()}\n            className={\"popup-item spaced \" + (isBullet ? \"active\" : \"\")}\n            aria-label=\"Format text as bullet list\"\n        >\n            <i className=\"icon bullet-list\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,6BAA6B,EAAEC,mBAAmB;AAC3D,SAASC,iBAAiB;AAC1B,SAASC,4BAA4B,QAAQ,uBAAuB;AAEpE,SAASC,WAAW,QAAQ,uBAAuB;AACnD,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IAAEC;EAAO,CAAC,GAAGL,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEM;EAAQ,CAAC,GAAGH,iBAAiB,CAAC,CAAC;EACvC,MAAM;IAAEI;EAAgB,CAAC,GAAGP,iBAAiB,CAAC,CAAC;EAC/C,MAAMQ,MAAM,GAAGN,WAAW,CAACI,OAAO,CAAC;EAEnC,MAAMG,QAAQ,GAAGD,MAAM,IAAKF,OAAO,CAAcI,WAAW,CAAC,CAAC,KAAK,QAAQ;EAE3E,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAI,CAACF,QAAQ,EAAE;MACX,MAAMG,OAAO,GAAGL,eAAe,GACzBN,4BAA4B,CAAC,IAAI,EAAEM,eAAe,CAAC,EAAEM,EAAE,GACvDC,SAAS;;MAEf;MACAT,MAAM,CAACU,eAAe,CAACjB,6BAA6B,EAAE;QAAEkB,YAAY,EAAEJ;MAAQ,CAAC,CAAC;IACpF,CAAC,MAAM;MACHP,MAAM,CAACU,eAAe,CAAChB,mBAAmB,EAAEe,SAAS,CAAC;IAC1D;EACJ,CAAC;EAED,oBACIjB,KAAA,CAAAoB,aAAA;IACIC,OAAO,EAAEA,CAAA,KAAMP,gBAAgB,CAAC,CAAE;IAClCQ,SAAS,EAAE,oBAAoB,IAAIV,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAE;IAC7D,cAAW;EAA4B,gBAEvCZ,KAAA,CAAAoB,aAAA;IAAGE,SAAS,EAAC;EAAkB,CAAE,CAC7B,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/FontColorAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","Compose","makeDecoratable","FontColorActionContext","$isFontColorNode","ADD_FONT_COLOR_COMMAND","ThemeColorValue","getSelectedNode","useDeriveValueFromSelection","useRichTextEditor","FontColorPicker","console","log","FontActionColorPicker","element","createElement","component","with","FontColorAction","editor","fontColor","rangeSelection","node","getColorStyle","color","onFontColorSelect","colorValue","themeColorName","dispatchCommand","context","value","applyColor","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport {\n    $isFontColorNode,\n    ADD_FONT_COLOR_COMMAND,\n    FontColorPayload,\n    ThemeColorValue\n} from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: new ThemeColorValue(colorValue, themeColorName)\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAE9D,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,sBAAsB;AAC/B,SACIC,gBAAgB,EAChBC,sBAAsB,EAEtBC,eAAe,QACZ,uBAAuB;AAC9B,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,eAAe,GAAGR,eAAe,CAAC,iBAAiB,EAAE,MAA0B;EACxFH,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAkB;EAC/E,oBAAOjB,KAAA,CAAAkB,aAAA,CAACd,OAAO;IAACe,SAAS,EAAEN,eAAgB;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AAC7E,CAAC;AAMD,OAAO,MAAMI,eAAgC,GAAGA,CAAA,KAAM;EAClD,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,SAAS,GAAGZ,2BAA2B,CAAC,CAAC;IAAEa;EAAe,CAAC,KAAK;IAClE,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,MAAMC,IAAI,GAAGf,eAAe,CAACc,cAAc,CAAC;IAC5C,OAAOjB,gBAAgB,CAACkB,IAAI,CAAC,GAAGA,IAAI,CAACC,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,MAAMC,iBAAiB,GAAG3B,WAAW,CACjC,CAAC4B,UAAkB,EAAEC,cAAkC,KAAK;IACxDR,MAAM,CAACS,eAAe,CAAmCvB,sBAAsB,EAAE;MAC7EmB,KAAK,EAAE,IAAIlB,eAAe,CAACoB,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,MAAME,OAAO,GAAG7B,OAAO,CACnB,OAAO;IACH8B,KAAK,EAAEV,SAAS;IAChBW,UAAU,EAAEN;EAChB,CAAC,CAAC,EACF,CAACA,iBAAiB,EAAEL,SAAS,CACjC,CAAC;EAED,oBACIvB,KAAA,CAAAkB,aAAA,CAACZ,sBAAsB,CAAC6B,QAAQ;IAACF,KAAK,EAAED;EAAQ,gBAC5ChC,KAAA,CAAAkB,aAAA,CAACL,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDQ,eAAe,CAACe,WAAW,GAAGpB,qBAAqB","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","Compose","makeDecoratable","FontColorActionContext","$isFontColorNode","ADD_FONT_COLOR_COMMAND","ThemeColorValue","getSelectedNode","useDeriveValueFromSelection","useRichTextEditor","FontColorPicker","console","log","FontActionColorPicker","element","createElement","component","with","FontColorAction","editor","fontColor","rangeSelection","node","getColorStyle","color","onFontColorSelect","colorValue","themeColorName","dispatchCommand","context","value","applyColor","Provider","ColorPicker"],"sources":["FontColorAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from \"react\";\nimport type { LexicalCommand } from \"lexical\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport { FontColorActionContext } from \"~/context/FontColorActionContext\";\nimport type { FontColorPayload } from \"@webiny/lexical-nodes\";\nimport { $isFontColorNode, ADD_FONT_COLOR_COMMAND, ThemeColorValue } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const FontColorPicker = makeDecoratable(\"FontColorPicker\", (): JSX.Element | null => {\n    useEffect(() => {\n        console.log(\"Default FontColorPicker, please add your own component\");\n    }, []);\n    return null;\n});\n\ninterface FontActionColorPicker {\n    element: JSX.Element;\n}\n\nconst FontActionColorPicker = ({ element }: FontActionColorPicker): JSX.Element => {\n    return <Compose component={FontColorPicker} with={() => () => element} />;\n};\n\nexport type FontColorAction = React.ComponentType<unknown> & {\n    ColorPicker: typeof FontActionColorPicker;\n};\n\nexport const FontColorAction: FontColorAction = () => {\n    const { editor } = useRichTextEditor();\n    const fontColor = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return \"#000\";\n        }\n\n        const node = getSelectedNode(rangeSelection);\n        return $isFontColorNode(node) ? node.getColorStyle().color : \"#000\";\n    });\n\n    const onFontColorSelect = useCallback(\n        (colorValue: string, themeColorName: string | undefined) => {\n            editor.dispatchCommand<LexicalCommand<FontColorPayload>>(ADD_FONT_COLOR_COMMAND, {\n                color: new ThemeColorValue(colorValue, themeColorName)\n            });\n        },\n        []\n    );\n\n    const context = useMemo(\n        () => ({\n            value: fontColor,\n            applyColor: onFontColorSelect\n        }),\n        [onFontColorSelect, fontColor]\n    );\n\n    return (\n        <FontColorActionContext.Provider value={context}>\n            <FontColorPicker />\n        </FontColorActionContext.Provider>\n    );\n};\n\nFontColorAction.ColorPicker = FontActionColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAE9D,SAASC,OAAO,EAAEC,eAAe,QAAQ,2BAA2B;AACpE,SAASC,sBAAsB;AAE/B,SAASC,gBAAgB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,uBAAuB;AACjG,SAASC,eAAe;AACxB,SAASC,2BAA2B;AACpC,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,eAAe,GAAGR,eAAe,CAAC,iBAAiB,EAAE,MAA0B;EACxFH,SAAS,CAAC,MAAM;IACZY,OAAO,CAACC,GAAG,CAAC,wDAAwD,CAAC;EACzE,CAAC,EAAE,EAAE,CAAC;EACN,OAAO,IAAI;AACf,CAAC,CAAC;AAMF,MAAMC,qBAAqB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAkB;EAC/E,oBAAOjB,KAAA,CAAAkB,aAAA,CAACd,OAAO;IAACe,SAAS,EAAEN,eAAgB;IAACO,IAAI,EAAEA,CAAA,KAAM,MAAMH;EAAQ,CAAE,CAAC;AAC7E,CAAC;AAMD,OAAO,MAAMI,eAAgC,GAAGA,CAAA,KAAM;EAClD,MAAM;IAAEC;EAAO,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EACtC,MAAMW,SAAS,GAAGZ,2BAA2B,CAAC,CAAC;IAAEa;EAAe,CAAC,KAAK;IAClE,IAAI,CAACA,cAAc,EAAE;MACjB,OAAO,MAAM;IACjB;IAEA,MAAMC,IAAI,GAAGf,eAAe,CAACc,cAAc,CAAC;IAC5C,OAAOjB,gBAAgB,CAACkB,IAAI,CAAC,GAAGA,IAAI,CAACC,aAAa,CAAC,CAAC,CAACC,KAAK,GAAG,MAAM;EACvE,CAAC,CAAC;EAEF,MAAMC,iBAAiB,GAAG3B,WAAW,CACjC,CAAC4B,UAAkB,EAAEC,cAAkC,KAAK;IACxDR,MAAM,CAACS,eAAe,CAAmCvB,sBAAsB,EAAE;MAC7EmB,KAAK,EAAE,IAAIlB,eAAe,CAACoB,UAAU,EAAEC,cAAc;IACzD,CAAC,CAAC;EACN,CAAC,EACD,EACJ,CAAC;EAED,MAAME,OAAO,GAAG7B,OAAO,CACnB,OAAO;IACH8B,KAAK,EAAEV,SAAS;IAChBW,UAAU,EAAEN;EAChB,CAAC,CAAC,EACF,CAACA,iBAAiB,EAAEL,SAAS,CACjC,CAAC;EAED,oBACIvB,KAAA,CAAAkB,aAAA,CAACZ,sBAAsB,CAAC6B,QAAQ;IAACF,KAAK,EAAED;EAAQ,gBAC5ChC,KAAA,CAAAkB,aAAA,CAACL,eAAe,MAAE,CACW,CAAC;AAE1C,CAAC;AAEDQ,eAAe,CAACe,WAAW,GAAGpB,qBAAqB","ignoreList":[]}