@webiny/lexical-editor 0.0.0-unstable.085ff6572f → 0.0.0-unstable.0d717d18dd

package/README.md

@@ -1,17 +1,11 @@
 # @webiny/lexical-editor
-[![](https://img.shields.io/npm/dw/@webiny/app-page-builder.svg)](https://www.npmjs.com/package/@webiny/lexical-editor) 
-[![](https://img.shields.io/npm/v/@webiny/app-page-builder.svg)](https://www.npmjs.com/package/@webiny/lexical-editor)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
 
-## About
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
 
-This package provides a web text editor with rich text editing features. It's built on top of the Lexical framework.
+---
 
-
-To find more about the Lexical framework go to their website [lexical.dev](https://lexical.dev/)
-
-## Where is it used?
-
-Currently, this packaged is used in [@webiny/app-pagebuilder](../app-page-builder).
+_This README file is automatically generated during the publish process._

package/commands/image.d.ts

@@ -0,0 +1,6 @@
+import type { LexicalCommand, NodeKey } from "lexical";
+import type { ImageNodeProps } from "@webiny/lexical-nodes";
+export interface ImagePayload extends ImageNodeProps {
+    key?: NodeKey;
+}
+export declare const INSERT_IMAGE_COMMAND: LexicalCommand<ImagePayload>;

package/commands/image.js

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

package/commands/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands/image.js","sources":["../../src/commands/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"],"names":["INSERT_IMAGE_COMMAND","createCommand"],"mappings":";AAQO,MAAMA,uBACTC,cAAc"}

package/commands/index.d.ts

@@ -0,0 +1,5 @@
+export * from "../commands/typography.js";
+export * from "../commands/image.js";
+export * from "../commands/list.js";
+export * from "../commands/quote.js";
+export * from "../commands/toolbar.js";

package/commands/index.js

@@ -0,0 +1,5 @@
+export * from "./typography.js";
+export * from "./image.js";
+export * from "./list.js";
+export * from "./quote.js";
+export * from "./toolbar.js";

package/commands/list.d.ts

@@ -0,0 +1,7 @@
+import type { LexicalCommand } from "lexical";
+export type ListCommandPayload = {
+    themeStyleId?: string;
+};
+export declare const INSERT_UNORDERED_LIST_COMMAND: LexicalCommand<ListCommandPayload>;
+export declare const INSERT_ORDERED_LIST_COMMAND: LexicalCommand<ListCommandPayload>;
+export declare const REMOVE_LIST_COMMAND: LexicalCommand<void>;

package/commands/list.js

@@ -0,0 +1,7 @@
+import { createCommand } from "lexical";
+const INSERT_UNORDERED_LIST_COMMAND = createCommand("INSERT_UNORDERED_LIST_COMMAND");
+const INSERT_ORDERED_LIST_COMMAND = createCommand("INSERT_ORDERED_LIST_COMMAND");
+const REMOVE_LIST_COMMAND = createCommand("REMOVE_LIST_COMMAND");
+export { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND };
+
+//# sourceMappingURL=list.js.map

package/commands/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands/list.js","sources":["../../src/commands/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"],"names":["INSERT_UNORDERED_LIST_COMMAND","createCommand","INSERT_ORDERED_LIST_COMMAND","REMOVE_LIST_COMMAND"],"mappings":";AAOO,MAAMA,gCAAoEC,cAC7E;AAGG,MAAMC,8BAAkED,cAC3E;AAGG,MAAME,sBAA4CF,cAAc"}

package/commands/quote.d.ts

@@ -0,0 +1,5 @@
+import type { LexicalCommand } from "lexical";
+export type QuoteCommandPayload = {
+    themeStyleId: string;
+};
+export declare const INSERT_QUOTE_COMMAND: LexicalCommand<QuoteCommandPayload>;

package/commands/quote.js

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

package/commands/quote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands/quote.js","sources":["../../src/commands/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"],"names":["INSERT_QUOTE_COMMAND","createCommand"],"mappings":";AAOO,MAAMA,uBACTC,cAAc"}

package/commands/toolbar.d.ts

@@ -0,0 +1 @@
+export declare const HIDE_FLOATING_TOOLBAR: import("lexical").LexicalCommand<unknown>;

package/commands/toolbar.js

@@ -0,0 +1,5 @@
+import { createCommand } from "lexical";
+const HIDE_FLOATING_TOOLBAR = createCommand("HIDE_FLOATING_TOOLBAR_COMMAND");
+export { HIDE_FLOATING_TOOLBAR };
+
+//# sourceMappingURL=toolbar.js.map

package/commands/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands/toolbar.js","sources":["../../src/commands/toolbar.ts"],"sourcesContent":["import { createCommand } from \"lexical\";\n\nexport const HIDE_FLOATING_TOOLBAR = createCommand(\"HIDE_FLOATING_TOOLBAR_COMMAND\");\n"],"names":["HIDE_FLOATING_TOOLBAR","createCommand"],"mappings":";AAEO,MAAMA,wBAAwBC,cAAc"}

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,5 @@
+import { createCommand } from "lexical";
+const ADD_TYPOGRAPHY_COMMAND = createCommand("ADD_TYPOGRAPHY_COMMAND");
+export { ADD_TYPOGRAPHY_COMMAND };
+
+//# sourceMappingURL=typography.js.map

package/commands/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands/typography.js","sources":["../../src/commands/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"],"names":["ADD_TYPOGRAPHY_COMMAND","createCommand"],"mappings":";AAIO,MAAMA,yBACTC,cAAc"}

package/components/Editor/EditorPlaceholder.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface EditorPlaceholderProps {
+    text: React.ReactNode;
+    styles?: React.CSSProperties;
+    fallbackClassName?: string;
+}
+/**
+ * Renders our own placeholder, shown whenever the editor's text content is empty —
+ * regardless of the current block type. Lexical's built-in placeholder only shows for an
+ * empty paragraph, so it disappears when the block is a heading, quote, etc. The placeholder
+ * also picks up the current block's typography (via its style id), falling back to the
+ * default paragraph style, so its size/font matches whatever the user is about to type.
+ */
+export declare const EditorPlaceholder: ({ text, styles, fallbackClassName }: EditorPlaceholderProps) => React.JSX.Element | null;
+export {};

package/components/Editor/EditorPlaceholder.js

@@ -0,0 +1,41 @@
+import react, { useEffect, useState } from "react";
+import { $getRoot } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $isRootTextContentEmpty } from "@lexical/text";
+import { Placeholder } from "../../ui/Placeholder.js";
+import { useRichTextEditor } from "../../hooks/index.js";
+const hasStyleId = (node)=>!!node && "function" == typeof node.getStyleId;
+const EditorPlaceholder = ({ text, styles, fallbackClassName })=>{
+    const [editor] = useLexicalComposerContext();
+    const { theme } = useRichTextEditor();
+    const [state, setState] = useState({
+        isEmpty: true
+    });
+    useEffect(()=>{
+        const update = ()=>{
+            editor.getEditorState().read(()=>{
+                const isEmpty = $isRootTextContentEmpty(editor.isComposing());
+                const firstBlock = $getRoot().getFirstChild();
+                const styleId = hasStyleId(firstBlock) ? firstBlock.getStyleId() : void 0;
+                const className = styleId ? theme.getTypographyById(styleId)?.className : void 0;
+                setState({
+                    isEmpty,
+                    className
+                });
+            });
+        };
+        update();
+        return editor.registerUpdateListener(update);
+    }, [
+        editor,
+        theme
+    ]);
+    if (!state.isEmpty) return null;
+    return /*#__PURE__*/ react.createElement(Placeholder, {
+        styles: styles,
+        className: state.className ?? fallbackClassName
+    }, text);
+};
+export { EditorPlaceholder };
+
+//# sourceMappingURL=EditorPlaceholder.js.map

package/components/Editor/EditorPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Editor/EditorPlaceholder.js","sources":["../../../src/components/Editor/EditorPlaceholder.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport type { LexicalNode } from \"lexical\";\nimport { $getRoot } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { Placeholder } from \"~/ui/Placeholder.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\ninterface EditorPlaceholderProps {\n    text: React.ReactNode;\n    styles?: React.CSSProperties;\n    fallbackClassName?: string;\n}\n\ninterface WithStyleId {\n    getStyleId(): string | undefined;\n}\n\nconst hasStyleId = (node: LexicalNode | null): node is LexicalNode & WithStyleId => {\n    return !!node && typeof (node as Partial<WithStyleId>).getStyleId === \"function\";\n};\n\n/**\n * Renders our own placeholder, shown whenever the editor's text content is empty —\n * regardless of the current block type. Lexical's built-in placeholder only shows for an\n * empty paragraph, so it disappears when the block is a heading, quote, etc. The placeholder\n * also picks up the current block's typography (via its style id), falling back to the\n * default paragraph style, so its size/font matches whatever the user is about to type.\n */\nexport const EditorPlaceholder = ({ text, styles, fallbackClassName }: EditorPlaceholderProps) => {\n    const [editor] = useLexicalComposerContext();\n    const { theme } = useRichTextEditor();\n    const [state, setState] = useState<{ isEmpty: boolean; className?: string }>({\n        isEmpty: true\n    });\n\n    useEffect(() => {\n        const update = () => {\n            editor.getEditorState().read(() => {\n                const isEmpty = $isRootTextContentEmpty(editor.isComposing());\n                const firstBlock = $getRoot().getFirstChild();\n                const styleId = hasStyleId(firstBlock) ? firstBlock.getStyleId() : undefined;\n                const className = styleId ? theme.getTypographyById(styleId)?.className : undefined;\n                setState({ isEmpty, className });\n            });\n        };\n        update();\n        return editor.registerUpdateListener(update);\n    }, [editor, theme]);\n\n    if (!state.isEmpty) {\n        return null;\n    }\n\n    return (\n        <Placeholder styles={styles} className={state.className ?? fallbackClassName}>\n            {text}\n        </Placeholder>\n    );\n};\n"],"names":["hasStyleId","node","EditorPlaceholder","text","styles","fallbackClassName","editor","useLexicalComposerContext","theme","useRichTextEditor","state","setState","useState","useEffect","update","isEmpty","$isRootTextContentEmpty","firstBlock","$getRoot","styleId","undefined","className","Placeholder"],"mappings":";;;;;;AAkBA,MAAMA,aAAa,CAACC,OACT,CAAC,CAACA,QAAQ,AAAqD,cAArD,OAAQA,KAA8B,UAAU;AAU9D,MAAMC,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,MAAM,EAAEC,iBAAiB,EAA0B;IACzF,MAAM,CAACC,OAAO,GAAGC;IACjB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmD;QACzE,SAAS;IACb;IAEAC,UAAU;QACN,MAAMC,SAAS;YACXR,OAAO,cAAc,GAAG,IAAI,CAAC;gBACzB,MAAMS,UAAUC,wBAAwBV,OAAO,WAAW;gBAC1D,MAAMW,aAAaC,WAAW,aAAa;gBAC3C,MAAMC,UAAUnB,WAAWiB,cAAcA,WAAW,UAAU,KAAKG;gBACnE,MAAMC,YAAYF,UAAUX,MAAM,iBAAiB,CAACW,UAAU,YAAYC;gBAC1ET,SAAS;oBAAEI;oBAASM;gBAAU;YAClC;QACJ;QACAP;QACA,OAAOR,OAAO,sBAAsB,CAACQ;IACzC,GAAG;QAACR;QAAQE;KAAM;IAElB,IAAI,CAACE,MAAM,OAAO,EACd,OAAO;IAGX,OAAO,WAAP,GACI,oBAACY,aAAWA;QAAC,QAAQlB;QAAQ,WAAWM,MAAM,SAAS,IAAIL;OACtDF;AAGb"}

package/components/Editor/EnsureHeadingTagPlugin.d.ts

@@ -0,0 +1,6 @@
+/**
+ * In the "Heading" editor, we only want to support heading tags.
+ * However, when the editor is empty, and you start typing, Lexical automatically creates an empty "paragraph" node.
+ * This ensures that any paragraph node is automatically converted to a heading node.
+ */
+export declare const EnsureHeadingTagPlugin: () => null;

package/components/Editor/EnsureHeadingTagPlugin.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { $createHeadingNode, ParagraphNode } from "@webiny/lexical-nodes";
+import { useRichTextEditor } from "../../hooks/index.js";
+const EnsureHeadingTagPlugin = ()=>{
+    const { editor } = useRichTextEditor();
+    useEffect(()=>editor.registerNodeTransform(ParagraphNode, (node)=>{
+            node.replace($createHeadingNode("h1"), true);
+        }), []);
+    return null;
+};
+export { EnsureHeadingTagPlugin };
+
+//# sourceMappingURL=EnsureHeadingTagPlugin.js.map

package/components/Editor/EnsureHeadingTagPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/Editor/EnsureHeadingTagPlugin.js","sources":["../../../src/components/Editor/EnsureHeadingTagPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { ParagraphNode, $createHeadingNode } from \"@webiny/lexical-nodes\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\n/**\n * In the \"Heading\" editor, we only want to support heading tags.\n * However, when the editor is empty, and you start typing, Lexical automatically creates an empty \"paragraph\" node.\n * This ensures that any paragraph node is automatically converted to a heading node.\n */\nexport const EnsureHeadingTagPlugin = () => {\n    const { editor } = useRichTextEditor();\n\n    useEffect(\n        () =>\n            editor.registerNodeTransform(ParagraphNode, node => {\n                node.replace($createHeadingNode(\"h1\"), true);\n            }),\n        []\n    );\n    return null;\n};\n"],"names":["EnsureHeadingTagPlugin","editor","useRichTextEditor","useEffect","ParagraphNode","node","$createHeadingNode"],"mappings":";;;AASO,MAAMA,yBAAyB;IAClC,MAAM,EAAEC,MAAM,EAAE,GAAGC;IAEnBC,UACI,IACIF,OAAO,qBAAqB,CAACG,eAAeC,CAAAA;YACxCA,KAAK,OAAO,CAACC,mBAAmB,OAAO;QAC3C,IACJ,EAAE;IAEN,OAAO;AACX"}

package/components/Editor/RichTextEditor.d.ts

@@ -1,26 +1,55 @@
 import React from "react";
-import { LexicalValue, ThemeEmotionMap } from "../../types";
-import { Klass, LexicalNode } from "lexical";
-import { WebinyTheme } from "../../themes/webinyLexicalTheme";
+import type { Klass, LexicalNode } from "lexical";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import type { EditorTheme } from "@webiny/lexical-theme";
+import type { LexicalValue, ToolbarActionPlugin } from "../../types.js";
+export type InitialEditorConfig = React.ComponentProps<typeof LexicalComposer>["initialConfig"] & {
+    editorId: string;
+};
 export interface RichTextEditorProps {
-    toolbar?: React.ReactNode;
-    tag?: string;
-    onChange?: (json: LexicalValue) => void;
-    value: LexicalValue | null;
+    children?: React.ReactNode | React.ReactNode[];
+    classes?: string;
+    disabled?: boolean;
+    contentEditableStyles?: React.CSSProperties;
     focus?: boolean;
-    placeholder?: string;
+    height?: number | string;
     nodes?: Klass<LexicalNode>[];
-    /**
-     * @description Lexical plugins
-     */
-    children?: React.ReactNode | React.ReactNode[];
     onBlur?: (editorState: LexicalValue) => void;
-    height?: number | string;
+    onChange?: (value: LexicalValue) => void;
+    placeholder?: string;
+    placeholderStyles?: React.CSSProperties;
+    staticToolbar?: React.ReactNode;
+    styles?: React.CSSProperties;
+    tag?: string;
+    theme: EditorTheme;
+    toolbarActionPlugins?: ToolbarActionPlugin[];
+    toolbar?: React.ReactNode;
+    value: LexicalValue | null | undefined;
+    configRef?: React.MutableRefObject<InitialEditorConfig | undefined>;
     width?: number | string;
-    theme: WebinyTheme;
-    themeEmotionMap?: ThemeEmotionMap;
 }
 /**
  * @description Main editor container
  */
-export declare const RichTextEditor: import("@webiny/react-composition").ComposableFC<RichTextEditorProps>;
+export declare const RichTextEditor: ((props: RichTextEditorProps) => React.JSX.Element) & {
+    original: (props: RichTextEditorProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: RichTextEditorProps) => React.JSX.Element) & {
+        original: (props: RichTextEditorProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: RichTextEditorProps) => React.JSX.Element) & {
+        original: (props: RichTextEditorProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export declare namespace RichTextEditor {
+    type InitialConfig = InitialEditorConfig;
+}

package/components/Editor/RichTextEditor.js

@@ -1,138 +1,105 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RichTextEditor = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _Placeholder = require("../../ui/Placeholder");
-var _generateInitialLexicalValue = require("../../utils/generateInitialLexicalValue");
-var _LexicalComposer = require("@lexical/react/LexicalComposer");
-var _LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
-var _LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
-var _LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
-var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
-var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/LexicalErrorBoundary"));
-var _reactComposition = require("@webiny/react-composition");
-var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
-var _RichTextEditorContext = require("../../context/RichTextEditorContext");
-var _isValidLexicalData = require("../../utils/isValidLexicalData");
-var _LexicalUpdateStatePlugin = require("../../plugins/LexicalUpdateStatePlugin");
-var _BlurEventPlugin = require("../../plugins/BlurEventPlugin/BlurEventPlugin");
-var _FontColorPlugin = require("../../plugins/FontColorPlugin/FontColorPlugin");
-var _webinyLexicalTheme = require("../../themes/webinyLexicalTheme");
-var _webinyNodes = require("../../nodes/webinyNodes");
-var _TypographyPlugin = require("../../plugins/TypographyPlugin/TypographyPlugin");
-var _WebinyQuoteNodePlugin = require("../../plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin");
-var _LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
-var _SharedHistoryContext = require("../../context/SharedHistoryContext");
-var _useRichTextEditor2 = require("../../hooks/useRichTextEditor");
-var _react2 = require("@emotion/react");
-var _toTypographyEmotionMap = require("../../utils/toTypographyEmotionMap");
-var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
-  var toolbar = _ref.toolbar,
-    onChange = _ref.onChange,
-    value = _ref.value,
-    nodes = _ref.nodes,
-    placeholder = _ref.placeholder,
-    children = _ref.children,
-    onBlur = _ref.onBlur,
-    focus = _ref.focus,
-    width = _ref.width,
-    height = _ref.height,
-    theme = _ref.theme,
-    themeEmotionMap = _ref.themeEmotionMap;
-  var _useSharedHistoryCont = (0, _SharedHistoryContext.useSharedHistoryContext)(),
-    historyState = _useSharedHistoryCont.historyState;
-  var placeholderElem = /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, null, placeholder || "Enter text...");
-  var scrollRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(undefined),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    floatingAnchorElem = _useState2[0],
-    setFloatingAnchorElem = _useState2[1];
-  var _useRichTextEditor = (0, _useRichTextEditor2.useRichTextEditor)(),
-    setTheme = _useRichTextEditor.setTheme,
-    setThemeEmotionMap = _useRichTextEditor.setThemeEmotionMap;
-  (0, _react.useEffect)(function () {
-    setTheme(theme);
-    setThemeEmotionMap(themeEmotionMap);
-  }, [themeEmotionMap]);
-  var onRef = function onRef(_floatingAnchorElem) {
-    if (_floatingAnchorElem !== null) {
-      setFloatingAnchorElem(_floatingAnchorElem);
-    }
-  };
-  var sizeStyle = {
-    height: height || "",
-    width: width || ""
-  };
-  var initialConfig = {
-    editorState: (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)(),
-    namespace: "webiny",
-    onError: function onError(error) {
-      throw error;
-    },
-    nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
-    theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _webinyLexicalTheme.webinyEditorTheme), {}, {
-      emotionMap: themeEmotionMap
-    })
-  };
-  function handleOnChange(editorState, editor) {
-    editorState.read(function () {
-      if (typeof onChange === "function") {
-        var _editorState = editor.getEditorState();
-        //TODO: send plain JSON object
-        onChange(JSON.stringify(_editorState.toJSON()));
-      }
-    });
-  }
-  return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
-    initialConfig: initialConfig
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: scrollRef,
-    style: (0, _objectSpread2.default)({}, sizeStyle)
-  }, /*#__PURE__*/_react.default.createElement(_LexicalOnChangePlugin.OnChangePlugin, {
-    onChange: handleOnChange
-  }), value && /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.LexicalUpdateStatePlugin, {
-    value: value
-  }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_FontColorPlugin.FontColorPlugin, null), /*#__PURE__*/_react.default.createElement(_TypographyPlugin.TypographyPlugin, null), /*#__PURE__*/_react.default.createElement(_WebinyQuoteNodePlugin.QuotePlugin, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
-    externalHistoryState: historyState
-  }), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
-    onBlur: onBlur
-  }), focus && /*#__PURE__*/_react.default.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), children, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
-    contentEditable: /*#__PURE__*/_react.default.createElement("div", {
-      className: "editor-scroller",
-      style: (0, _objectSpread2.default)({}, sizeStyle)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "editor",
-      ref: onRef,
-      style: (0, _objectSpread2.default)({}, sizeStyle)
-    }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, {
-      style: (0, _objectSpread2.default)({
-        outline: 0
-      }, sizeStyle)
-    }))),
-    placeholder: placeholderElem,
-    ErrorBoundary: _LexicalErrorBoundary.default
-  }), floatingAnchorElem && toolbar));
+import react, { Fragment, useId, useRef, useState } from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { makeDecoratable } from "@webiny/react-composition";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { allNodes } from "@webiny/lexical-nodes";
+import { RichTextEditorProvider } from "../../context/RichTextEditorContext.js";
+import { BlurEventPlugin } from "../../plugins/BlurEventPlugin/BlurEventPlugin.js";
+import { EditorPlaceholder } from "./EditorPlaceholder.js";
+import { SharedHistoryContext, useSharedHistoryContext } from "../../context/SharedHistoryContext.js";
+import { LexicalEditorWithConfig, useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig.js";
+import { StateHandlingPlugin } from "../../plugins/StateHandlingPlugin.js";
+const BaseRichTextEditor = ({ onChange, toolbar, staticToolbar, nodes, placeholder, children, onBlur, focus, styles, width, disabled = false, height, contentEditableStyles, placeholderStyles, ...props })=>{
+    const editorTheme = useRef(props.theme);
+    const config = useLexicalEditorConfig();
+    const { historyState } = useSharedHistoryContext();
+    const defaultParagraphClassName = props.theme?.typography?.paragraphs?.[0]?.className;
+    const scrollRef = useRef(null);
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(void 0);
+    const onRef = (_floatingAnchorElem)=>{
+        if (null !== _floatingAnchorElem) setFloatingAnchorElem(_floatingAnchorElem);
+    };
+    const sizeStyle = {
+        height: height || "",
+        width: width || ""
+    };
+    const configNodes = config.nodes.map((node)=>node.node);
+    const configPlugins = config.plugins.map((plugin)=>/*#__PURE__*/ react.createElement(Fragment, {
+            key: plugin.name
+        }, plugin.element));
+    const initialConfig = {
+        editorId: useId(),
+        editable: !disabled,
+        namespace: "webiny",
+        onError: ()=>{},
+        nodes: [
+            ...allNodes,
+            ...configNodes,
+            ...nodes || []
+        ],
+        theme: {
+            ...editorTheme.current.tokens,
+            $colors: editorTheme.current.colors,
+            $typography: editorTheme.current.typography,
+            $cacheKey: JSON.stringify(editorTheme.current)
+        }
+    };
+    if (props.configRef) props.configRef.current = initialConfig;
+    return /*#__PURE__*/ react.createElement(SharedHistoryContext, null, /*#__PURE__*/ react.createElement(LexicalComposer, {
+        initialConfig: initialConfig,
+        key: initialConfig.nodes.length
+    }, /*#__PURE__*/ react.createElement(RichTextEditorProvider, {
+        theme: props.theme,
+        toolbarActionPlugins: props.toolbarActionPlugins
+    }, staticToolbar && !disabled ? staticToolbar : null, /*#__PURE__*/ react.createElement("div", {
+        "data-role": "overlays",
+        className: "relative"
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "editor-shell",
+        ref: scrollRef,
+        style: {
+            ...styles,
+            ...sizeStyle,
+            overflow: "auto",
+            position: "relative"
+        }
+    }, /*#__PURE__*/ react.createElement(StateHandlingPlugin, {
+        value: props.value,
+        onChange: disabled ? void 0 : onChange
+    }), /*#__PURE__*/ react.createElement(ClearEditorPlugin, null), /*#__PURE__*/ react.createElement(HistoryPlugin, {
+        externalHistoryState: historyState
+    }), onBlur && /*#__PURE__*/ react.createElement(BlurEventPlugin, {
+        onBlur: onBlur
+    }), focus && /*#__PURE__*/ react.createElement(AutoFocusPlugin, null), configPlugins, children, /*#__PURE__*/ react.createElement(RichTextPlugin, {
+        contentEditable: /*#__PURE__*/ react.createElement("div", {
+            className: "editor-scroller",
+            style: {
+                ...sizeStyle
+            }
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "editor",
+            ref: onRef
+        }, /*#__PURE__*/ react.createElement(ContentEditable, {
+            disabled: disabled,
+            style: {
+                outline: 0,
+                ...contentEditableStyles
+            }
+        }))),
+        placeholder: null,
+        ErrorBoundary: LexicalErrorBoundary
+    }), /*#__PURE__*/ react.createElement(EditorPlaceholder, {
+        text: placeholder || "Enter text...",
+        styles: placeholderStyles,
+        fallbackClassName: defaultParagraphClassName
+    }), disabled ? null : floatingAnchorElem && toolbar))));
 };
+const RichTextEditor = makeDecoratable("RichTextEditor", (props)=>/*#__PURE__*/ react.createElement(LexicalEditorWithConfig, null, /*#__PURE__*/ react.createElement(BaseRichTextEditor, props)));
+export { RichTextEditor };
 
-/**
- * @description Main editor container
- */
-var RichTextEditor = (0, _reactComposition.makeComposable)("RichTextEditor", function (props) {
-  return /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, null, /*#__PURE__*/_react.default.createElement(_react2.ClassNames, null, function (_ref2) {
-    var _props$themeEmotionMa;
-    var css = _ref2.css;
-    var themeEmotionMap = (_props$themeEmotionMa = props === null || props === void 0 ? void 0 : props.themeEmotionMap) !== null && _props$themeEmotionMa !== void 0 ? _props$themeEmotionMa : (0, _toTypographyEmotionMap.toTypographyEmotionMap)(css, props.theme);
-    return /*#__PURE__*/_react.default.createElement(_SharedHistoryContext.SharedHistoryContext, null, /*#__PURE__*/_react.default.createElement(BaseRichTextEditor, Object.assign({}, props, {
-      themeEmotionMap: themeEmotionMap
-    })));
-  }));
-});
-exports.RichTextEditor = RichTextEditor;
+//# sourceMappingURL=RichTextEditor.js.map

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseRichTextEditor","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","theme","themeEmotionMap","useSharedHistoryContext","historyState","placeholderElem","scrollRef","useRef","useState","undefined","floatingAnchorElem","setFloatingAnchorElem","useRichTextEditor","setTheme","setThemeEmotionMap","useEffect","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","WebinyNodes","webinyEditorTheme","emotionMap","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","outline","LexicalErrorBoundary","RichTextEditor","makeComposable","props","css","toTypographyEmotionMap"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { LexicalValue, ThemeEmotionMap } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeComposable } from \"@webiny/react-composition\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { FontColorPlugin } from \"~/plugins/FontColorPlugin/FontColorPlugin\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { TypographyPlugin } from \"~/plugins/TypographyPlugin/TypographyPlugin\";\nimport { QuotePlugin } from \"~/plugins/WebinyQuoteNodePlugin/WebinyQuoteNodePlugin\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport { useRichTextEditor } from \"~/hooks/useRichTextEditor\";\nimport { ClassNames } from \"@emotion/react\";\nimport { toTypographyEmotionMap } from \"~/utils/toTypographyEmotionMap\";\n\nexport interface RichTextEditorProps {\n    toolbar?: React.ReactNode;\n    tag?: string;\n    onChange?: (json: LexicalValue) => void;\n    value: LexicalValue | null;\n    focus?: boolean;\n    placeholder?: string;\n    nodes?: Klass<LexicalNode>[];\n    /**\n     * @description Lexical plugins\n     */\n    children?: React.ReactNode | React.ReactNode[];\n    onBlur?: (editorState: LexicalValue) => void;\n    height?: number | string;\n    width?: number | string;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n}\n\nconst BaseRichTextEditor: React.FC<RichTextEditorProps> = ({\n    toolbar,\n    onChange,\n    value,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    width,\n    height,\n    theme,\n    themeEmotionMap\n}: RichTextEditorProps) => {\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const { setTheme, setThemeEmotionMap } = useRichTextEditor();\n\n    useEffect(() => {\n        setTheme(theme);\n        setThemeEmotionMap(themeEmotionMap);\n    }, [themeEmotionMap]);\n\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, 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                //TODO: send plain JSON object\n                onChange(JSON.stringify(editorState.toJSON()));\n            }\n        });\n    }\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <div ref={scrollRef} style={{ ...sizeStyle }}>\n                {/* data */}\n                <OnChangePlugin onChange={handleOnChange} />\n                {value && <LexicalUpdateStatePlugin value={value} />}\n                <ClearEditorPlugin />\n                <FontColorPlugin />\n                <TypographyPlugin />\n                <QuotePlugin />\n                <HistoryPlugin externalHistoryState={historyState} />\n                {/* Events */}\n                {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                {focus && <AutoFocusPlugin />}\n                {/* External plugins and components */}\n                {children}\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                            <div className=\"editor\" ref={onRef} style={{ ...sizeStyle }}>\n                                <ContentEditable style={{ outline: 0, ...sizeStyle }} />\n                            </div>\n                        </div>\n                    }\n                    placeholder={placeholderElem}\n                    ErrorBoundary={LexicalErrorBoundary}\n                />\n                {/* Toolbar */}\n                {floatingAnchorElem && toolbar}\n            </div>\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeComposable<RichTextEditorProps>(\"RichTextEditor\", props => {\n    return (\n        <RichTextEditorProvider>\n            <ClassNames>\n                {({ css }) => {\n                    const themeEmotionMap =\n                        props?.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme);\n                    return (\n                        <SharedHistoryContext>\n                            <BaseRichTextEditor {...props} themeEmotionMap={themeEmotionMap} />\n                        </SharedHistoryContext>\n                    );\n                }}\n            </ClassNames>\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"file":"components/Editor/RichTextEditor.js","sources":["../../../src/components/Editor/RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useId, useRef, useState } from \"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 } from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin.js\";\nimport type { LexicalValue, ToolbarActionPlugin } from \"~/types.js\";\nimport { EditorPlaceholder } from \"~/components/Editor/EditorPlaceholder.js\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext.js\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\nexport type InitialEditorConfig = React.ComponentProps<typeof LexicalComposer>[\"initialConfig\"] & {\n    editorId: string;\n};\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    disabled?: boolean;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (value: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: EditorTheme;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    toolbar?: React.ReactNode;\n    value: LexicalValue | null | undefined;\n    configRef?: React.MutableRefObject<InitialEditorConfig | undefined>;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor = ({\n    onChange,\n    toolbar,\n    staticToolbar,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    disabled = false,\n    height,\n    contentEditableStyles,\n    placeholderStyles,\n    ...props\n}: RichTextEditorProps) => {\n    const editorTheme = useRef(props.theme);\n    const config = useLexicalEditorConfig();\n    const { historyState } = useSharedHistoryContext();\n    // Apply the default paragraph's typography class so the placeholder matches the real\n    // text's size/line-height/font (the muted color is kept via placeholderStyles).\n    const defaultParagraphClassName = props.theme?.typography?.paragraphs?.[0]?.className;\n    const scrollRef = useRef(null);\n\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        editorId: useId(),\n        editable: !disabled,\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: {\n            ...editorTheme.current.tokens,\n            // I'm not aware of a better way to pass custom data to nodes.\n            // For now, we're using Lexical's theme to pass colors and typography.\n            $colors: editorTheme.current.colors,\n            $typography: editorTheme.current.typography,\n            $cacheKey: JSON.stringify(editorTheme.current)\n        }\n    };\n\n    if (props.configRef) {\n        props.configRef.current = initialConfig;\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                    toolbarActionPlugins={props.toolbarActionPlugins}\n                >\n                    {staticToolbar && !disabled ? staticToolbar : null}\n                    <div data-role={\"overlays\"} className={\"relative\"}></div>\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\n                            value={props.value}\n                            onChange={disabled ? undefined : onChange}\n                        />\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                                            disabled={disabled}\n                                            style={{ outline: 0, ...contentEditableStyles }}\n                                        />\n                                    </div>\n                                </div>\n                            }\n                            placeholder={null}\n                            ErrorBoundary={LexicalErrorBoundary}\n                        />\n                        <EditorPlaceholder\n                            text={placeholder || \"Enter text...\"}\n                            styles={placeholderStyles}\n                            fallbackClassName={defaultParagraphClassName}\n                        />\n                        {/* Toolbar. */}\n                        {disabled ? null : 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\nexport namespace RichTextEditor {\n    export type InitialConfig = InitialEditorConfig;\n}\n"],"names":["BaseRichTextEditor","onChange","toolbar","staticToolbar","nodes","placeholder","children","onBlur","focus","styles","width","disabled","height","contentEditableStyles","placeholderStyles","props","editorTheme","useRef","config","useLexicalEditorConfig","historyState","useSharedHistoryContext","defaultParagraphClassName","scrollRef","floatingAnchorElem","setFloatingAnchorElem","useState","undefined","onRef","_floatingAnchorElem","sizeStyle","configNodes","node","configPlugins","plugin","Fragment","initialConfig","useId","allNodes","JSON","SharedHistoryContext","LexicalComposer","RichTextEditorProvider","StateHandlingPlugin","ClearEditorPlugin","HistoryPlugin","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","ContentEditable","LexicalErrorBoundary","EditorPlaceholder","RichTextEditor","makeDecoratable","LexicalEditorWithConfig"],"mappings":"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"}