@webiny/lexical-editor 6.0.0-beta.0 → 6.0.0-rc.1

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

@@ -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

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.INSERT_IMAGE_COMMAND = void 0;
-var _lexical = require("lexical");
-var INSERT_IMAGE_COMMAND = exports.INSERT_IMAGE_COMMAND = (0, _lexical.createCommand)("INSERT_IMAGE_COMMAND");
+import { createCommand } from "lexical";
+export const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
 
 //# sourceMappingURL=image.js.map

package/commands/image.js.map

@@ -1 +1 @@
-{"version":3,"names":["_lexical","require","INSERT_IMAGE_COMMAND","exports","createCommand"],"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,IAAAA,QAAA,GAAAC,OAAA;AAOO,IAAMC,oBAAkD,GAAAC,OAAA,CAAAD,oBAAA,GAC3D,IAAAE,sBAAa,EAAC,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,5 @@
-export * from "./image";
-export * from "./list";
-export * from "./quote";
+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

@@ -1,40 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _image = require("./image");
-Object.keys(_image).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _image[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _image[key];
-    }
-  });
-});
-var _list = require("./list");
-Object.keys(_list).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _list[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _list[key];
-    }
-  });
-});
-var _quote = require("./quote");
-Object.keys(_quote).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _quote[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _quote[key];
-    }
-  });
-});
+export * from "./typography.js";
+export * from "./image.js";
+export * from "./list.js";
+export * from "./quote.js";
+export * from "./toolbar.js";
 
 //# sourceMappingURL=index.js.map

package/commands/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_image","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_list","_quote"],"sources":["index.ts"],"sourcesContent":["export * from \"~/commands/image\";\nexport * from \"~/commands/list\";\nexport * from \"~/commands/quote\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,KAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,KAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,KAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,KAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,MAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,MAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,MAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAE,MAAA,CAAAN,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"~/commands/typography.js\";\nexport * from \"~/commands/image.js\";\nexport * from \"~/commands/list.js\";\nexport * from \"~/commands/quote.js\";\nexport * from \"~/commands/toolbar.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/commands/list.d.ts

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

package/commands/list.js

@@ -1,12 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.REMOVE_LIST_COMMAND = exports.INSERT_UNORDERED_LIST_COMMAND = exports.INSERT_ORDERED_LIST_COMMAND = void 0;
-var _lexical = require("lexical");
-var INSERT_UNORDERED_LIST_COMMAND = exports.INSERT_UNORDERED_LIST_COMMAND = (0, _lexical.createCommand)("INSERT_UNORDERED_LIST_COMMAND");
-var INSERT_ORDERED_LIST_COMMAND = exports.INSERT_ORDERED_LIST_COMMAND = (0, _lexical.createCommand)("INSERT_ORDERED_LIST_COMMAND");
-var REMOVE_LIST_COMMAND = exports.REMOVE_LIST_COMMAND = (0, _lexical.createCommand)("REMOVE_LIST_COMMAND");
+import { createCommand } from "lexical";
+export const INSERT_UNORDERED_LIST_COMMAND = createCommand("INSERT_UNORDERED_LIST_COMMAND");
+export const INSERT_ORDERED_LIST_COMMAND = createCommand("INSERT_ORDERED_LIST_COMMAND");
+export const REMOVE_LIST_COMMAND = createCommand("REMOVE_LIST_COMMAND");
 
 //# sourceMappingURL=list.js.map

package/commands/list.js.map

@@ -1 +1 @@
-{"version":3,"names":["_lexical","require","INSERT_UNORDERED_LIST_COMMAND","exports","createCommand","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,IAAAA,QAAA,GAAAC,OAAA;AAMO,IAAMC,6BAAiE,GAAAC,OAAA,CAAAD,6BAAA,GAAG,IAAAE,sBAAa,EAC1F,+BACJ,CAAC;AAEM,IAAMC,2BAA+D,GAAAF,OAAA,CAAAE,2BAAA,GAAG,IAAAD,sBAAa,EACxF,6BACJ,CAAC;AAEM,IAAME,mBAAyC,GAAAH,OAAA,CAAAG,mBAAA,GAAG,IAAAF,sBAAa,EAAC,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,5 +1,5 @@
-import { LexicalCommand } from "lexical";
-export declare type QuoteCommandPayload = {
+import type { LexicalCommand } from "lexical";
+export type QuoteCommandPayload = {
     themeStyleId: string;
 };
 export declare const INSERT_QUOTE_COMMAND: LexicalCommand<QuoteCommandPayload>;

package/commands/quote.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.INSERT_QUOTE_COMMAND = void 0;
-var _lexical = require("lexical");
-var INSERT_QUOTE_COMMAND = exports.INSERT_QUOTE_COMMAND = (0, _lexical.createCommand)("INSERT_QUOTE_COMMAND");
+import { createCommand } from "lexical";
+export const INSERT_QUOTE_COMMAND = createCommand("INSERT_QUOTE_COMMAND");
 
 //# sourceMappingURL=quote.js.map

package/commands/quote.js.map

@@ -1 +1 @@
-{"version":3,"names":["_lexical","require","INSERT_QUOTE_COMMAND","exports","createCommand"],"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,IAAAA,QAAA,GAAAC,OAAA;AAMO,IAAMC,oBAAyD,GAAAC,OAAA,CAAAD,oBAAA,GAClE,IAAAE,sBAAa,EAAC,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/toolbar.d.ts

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

package/commands/toolbar.js

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

package/commands/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createCommand","HIDE_FLOATING_TOOLBAR"],"sources":["toolbar.ts"],"sourcesContent":["import { createCommand } from \"lexical\";\n\nexport const HIDE_FLOATING_TOOLBAR = createCommand(\"HIDE_FLOATING_TOOLBAR_COMMAND\");\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,SAAS;AAEvC,OAAO,MAAMC,qBAAqB,GAAGD,aAAa,CAAC,+BAA+B,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/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,20 @@
+import { useEffect } from "react";
+import { ParagraphNode, $createHeadingNode } from "@webiny/lexical-nodes";
+import { useRichTextEditor } from "../../hooks/index.js";
+
+/**
+ * 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 const EnsureHeadingTagPlugin = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  useEffect(() => editor.registerNodeTransform(ParagraphNode, node => {
+    node.replace($createHeadingNode("h1"), true);
+  }), []);
+  return null;
+};
+
+//# sourceMappingURL=EnsureHeadingTagPlugin.js.map

package/components/Editor/EnsureHeadingTagPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","ParagraphNode","$createHeadingNode","useRichTextEditor","EnsureHeadingTagPlugin","editor","registerNodeTransform","node","replace"],"sources":["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"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,uBAAuB;AACzE,SAASC,iBAAiB;;AAE1B;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;EACxC,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EAEtCH,SAAS,CACL,MACIK,MAAM,CAACC,qBAAqB,CAACL,aAAa,EAAEM,IAAI,IAAI;IAChDA,IAAI,CAACC,OAAO,CAACN,kBAAkB,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;EAChD,CAAC,CAAC,EACN,EACJ,CAAC;EACD,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/components/Editor/RichTextEditor.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
-import { CSSObject } from "@emotion/react";
-import { Klass, LexicalNode } from "lexical";
-import { LexicalValue, ToolbarActionPlugin } from "../../types";
-import { WebinyTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
+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 {
     children?: React.ReactNode | React.ReactNode[];
     classes?: string;
@@ -11,27 +14,41 @@ export interface RichTextEditorProps {
     height?: number | string;
     nodes?: Klass<LexicalNode>[];
     onBlur?: (editorState: LexicalValue) => void;
-    onChange?: (json: LexicalValue) => void;
+    onChange?: (value: LexicalValue) => void;
     placeholder?: string;
     placeholderStyles?: React.CSSProperties;
     staticToolbar?: React.ReactNode;
     styles?: React.CSSProperties;
     tag?: string;
-    theme: WebinyTheme;
-    themeEmotionMap?: ThemeEmotionMap;
+    theme: EditorTheme;
     toolbarActionPlugins?: ToolbarActionPlugin[];
-    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
     toolbar?: React.ReactNode;
-    value: LexicalValue | null;
+    value: LexicalValue | null | undefined;
+    configRef?: React.MutableRefObject<InitialEditorConfig | undefined>;
     width?: number | string;
 }
 /**
  * @description Main editor container
  */
-export declare const RichTextEditor: import("@webiny/react-composition").GenericComponent<RichTextEditorProps> & {
-    original: import("@webiny/react-composition").GenericComponent<RichTextEditorProps>;
+export declare const RichTextEditor: ((props: RichTextEditorProps) => React.JSX.Element) & {
+    original: (props: RichTextEditorProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: RichTextEditorProps) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
+    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,104 +1,77 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _emotion = require("emotion");
-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 _LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
-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 _Placeholder = require("../../ui/Placeholder");
-var _generateInitialLexicalValue = require("../../utils/generateInitialLexicalValue");
-var _lexicalTheme = require("@webiny/lexical-theme");
-var _lexicalNodes = require("@webiny/lexical-nodes");
-var _SharedHistoryContext = require("../../context/SharedHistoryContext");
-var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
-var _excluded = ["toolbar", "staticToolbar", "onChange", "value", "nodes", "placeholder", "children", "onBlur", "focus", "styles", "width", "height", "contentEditableStyles", "placeholderStyles"];
-var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
-  var toolbar = _ref.toolbar,
-    staticToolbar = _ref.staticToolbar,
-    onChange = _ref.onChange,
-    value = _ref.value,
-    nodes = _ref.nodes,
-    placeholder = _ref.placeholder,
-    children = _ref.children,
-    onBlur = _ref.onBlur,
-    focus = _ref.focus,
-    styles = _ref.styles,
-    width = _ref.width,
-    height = _ref.height,
-    contentEditableStyles = _ref.contentEditableStyles,
-    placeholderStyles = _ref.placeholderStyles,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var themeEmotionMap = props.themeEmotionMap ?? (0, _lexicalTheme.toTypographyEmotionMap)(_emotion.css, props.theme, props.themeStylesTransformer);
-  var editorTheme = (0, _react.useRef)((0, _lexicalTheme.createTheme)());
-  var config = (0, _LexicalEditorConfig.useLexicalEditorConfig)();
-  var _useSharedHistoryCont = (0, _SharedHistoryContext.useSharedHistoryContext)(),
-    historyState = _useSharedHistoryCont.historyState;
-  var placeholderElem = /*#__PURE__*/_react.default.createElement(_Placeholder.Placeholder, {
+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 { Placeholder } from "../../ui/Placeholder.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,
+  height,
+  contentEditableStyles,
+  placeholderStyles,
+  ...props
+}) => {
+  const editorTheme = useRef(props.theme);
+  const config = useLexicalEditorConfig();
+  const {
+    historyState
+  } = useSharedHistoryContext();
+  const placeholderElem = /*#__PURE__*/React.createElement(Placeholder, {
     styles: placeholderStyles
   }, 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 onRef = function onRef(_floatingAnchorElem) {
+  const scrollRef = useRef(null);
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState(undefined);
+  const onRef = _floatingAnchorElem => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  var sizeStyle = {
+  const sizeStyle = {
     height: height || "",
     width: width || ""
   };
-  var configNodes = config.nodes.map(function (node) {
-    return node.node;
-  });
-  var configPlugins = config.plugins.map(function (plugin) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-      key: plugin.name
-    }, plugin.element);
-  });
-  var editorValue = (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)();
-  var initialConfig = {
-    // We update the state via the `<LexicalUpdateStatePlugin/>`.
-    editorState: null,
+  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(),
     namespace: "webiny",
-    onError: function onError() {
+    onError: () => {
       // Ignore errors. We don't want to break the app because of errors caused by config/value updates.
       // These are usually resolved in the next component render cycle.
     },
-    nodes: [].concat((0, _toConsumableArray2.default)(_lexicalNodes.allNodes), (0, _toConsumableArray2.default)(configNodes), (0, _toConsumableArray2.default)(nodes || [])),
-    theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, editorTheme.current), {}, {
-      emotionMap: themeEmotionMap
-    })
+    nodes: [...allNodes, ...configNodes, ...(nodes || [])],
+    theme: {
+      ...editorTheme.current.tokens,
+      // I'm not aware of a better way to pass custom data to nodes.
+      // For now, we're using Lexical's theme to pass colors and typography.
+      $colors: editorTheme.current.colors,
+      $typography: editorTheme.current.typography,
+      $cacheKey: JSON.stringify(editorTheme.current)
+    }
   };
-  function handleOnChange(editorState, editor) {
-    editorState.read(function () {
-      if (typeof onChange === "function") {
-        var _editorState = editor.getEditorState();
-        onChange(JSON.stringify(_editorState.toJSON()));
-      }
-    });
+  if (props.configRef) {
+    props.configRef.current = initialConfig;
   }
   return (
     /*#__PURE__*/
@@ -109,43 +82,49 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
      *
      * To bypass this issue, we generate a naive `key` based on the number of Nodes.
      */
-    _react.default.createElement(_SharedHistoryContext.SharedHistoryContext, null, /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
+    React.createElement(SharedHistoryContext, null, /*#__PURE__*/React.createElement(LexicalComposer, {
       initialConfig: initialConfig,
       key: initialConfig.nodes.length
-    }, /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, {
+    }, /*#__PURE__*/React.createElement(RichTextEditorProvider, {
       theme: props.theme,
-      themeEmotionMap: themeEmotionMap,
       toolbarActionPlugins: props.toolbarActionPlugins
-    }, staticToolbar && staticToolbar, /*#__PURE__*/_react.default.createElement("div", {
+    }, staticToolbar ? staticToolbar : null, /*#__PURE__*/React.createElement("div", {
+      "data-role": "overlays",
+      className: "relative"
+    }), /*#__PURE__*/React.createElement("div", {
       /* This className is necessary for targeting of editor container from CSS files. */
       className: "editor-shell",
       ref: scrollRef,
-      style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), sizeStyle), {}, {
+      style: {
+        ...styles,
+        ...sizeStyle,
         overflow: "auto",
         position: "relative"
-      })
-    }, /*#__PURE__*/_react.default.createElement(_LexicalOnChangePlugin.OnChangePlugin, {
-      onChange: handleOnChange
-    }), /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.UpdateStatePlugin, {
-      value: editorValue
-    }), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
+      }
+    }, /*#__PURE__*/React.createElement(StateHandlingPlugin, {
+      value: props.value,
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(ClearEditorPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, {
       externalHistoryState: historyState
-    }), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
+    }), onBlur && /*#__PURE__*/React.createElement(BlurEventPlugin, {
       onBlur: onBlur
-    }), focus && /*#__PURE__*/_react.default.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), configPlugins, children, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
-      contentEditable: /*#__PURE__*/_react.default.createElement("div", {
+    }), focus && /*#__PURE__*/React.createElement(AutoFocusPlugin, null), configPlugins, children, /*#__PURE__*/React.createElement(RichTextPlugin, {
+      contentEditable: /*#__PURE__*/React.createElement("div", {
         className: "editor-scroller",
-        style: (0, _objectSpread2.default)({}, sizeStyle)
-      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          ...sizeStyle
+        }
+      }, /*#__PURE__*/React.createElement("div", {
         className: "editor",
         ref: onRef
-      }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, {
-        style: (0, _objectSpread2.default)({
-          outline: 0
-        }, contentEditableStyles)
+      }, /*#__PURE__*/React.createElement(ContentEditable, {
+        style: {
+          outline: 0,
+          ...contentEditableStyles
+        }
       }))),
       placeholder: placeholderElem,
-      ErrorBoundary: _LexicalErrorBoundary.default
+      ErrorBoundary: LexicalErrorBoundary
     }), floatingAnchorElem && toolbar))))
   );
 };
@@ -153,8 +132,8 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
 /**
  * @description Main editor container
  */
-var RichTextEditor = exports.RichTextEditor = (0, _reactComposition.makeDecoratable)("RichTextEditor", function (props) {
-  return /*#__PURE__*/_react.default.createElement(_LexicalEditorConfig.LexicalEditorWithConfig, null, /*#__PURE__*/_react.default.createElement(BaseRichTextEditor, props));
+export const RichTextEditor = makeDecoratable("RichTextEditor", props => {
+  return /*#__PURE__*/React.createElement(LexicalEditorWithConfig, null, /*#__PURE__*/React.createElement(BaseRichTextEditor, props));
 });
 
 //# sourceMappingURL=RichTextEditor.js.map