@webiny/lexical-editor 0.0.0-unstable.d65ec29d44 → 0.0.0-unstable.dbdf5d6258

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

package/commands/image.js.map

@@ -0,0 +1 @@
+{"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

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

@@ -0,0 +1 @@
+{"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

@@ -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,6 @@
+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

@@ -0,0 +1 @@
+{"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

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

package/commands/quote.js.map

@@ -0,0 +1 @@
+{"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,23 +1,55 @@
 import React from "react";
-import { LexicalValue } from "../../types";
-import { Klass, LexicalNode } from "lexical";
+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;
 }
 /**
  * @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,107 +1,142 @@
-"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 _webinyNodes = require("../../nodes/webinyNodes");
-var _webinyLexicalTheme = require("../../themes/webinyLexicalTheme");
-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 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;
-  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 onRef = function onRef(_floatingAnchorElem) {
+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,
+  disabled = false,
+  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...");
+  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 initialConfig = {
-    editorState: (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)(),
+  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: function onError(error) {
-      throw error;
+    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)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
-    theme: _webinyLexicalTheme.theme
+    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__*/_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), 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));
+  return (
+    /*#__PURE__*/
+    /**
+     * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future
+     * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,
+     * and initially, there can be multiple re-renders, while the config object is settled.
+     *
+     * To bypass this issue, we generate a naive `key` based on the number of Nodes.
+     */
+    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", {
+      /* This className is necessary for targeting of editor container from CSS files. */
+      className: "editor-shell",
+      ref: scrollRef,
+      style: {
+        ...styles,
+        ...sizeStyle,
+        overflow: "auto",
+        position: "relative"
+      }
+    }, /*#__PURE__*/React.createElement(StateHandlingPlugin, {
+      value: props.value,
+      onChange: disabled ? undefined : 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: placeholderElem,
+      ErrorBoundary: LexicalErrorBoundary
+    }), disabled ? null : floatingAnchorElem && toolbar))))
+  );
 };
 
 /**
  * @description Main editor container
  */
-var RichTextEditor = (0, _reactComposition.makeComposable)("RichTextEditor", function (props) {
-  return /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, null, /*#__PURE__*/_react.default.createElement(BaseRichTextEditor, props));
+export const RichTextEditor = makeDecoratable("RichTextEditor", props => {
+  return /*#__PURE__*/React.createElement(LexicalEditorWithConfig, null, /*#__PURE__*/React.createElement(BaseRichTextEditor, props));
 });
-exports.RichTextEditor = RichTextEditor;
+
+//# sourceMappingURL=RichTextEditor.js.map

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Placeholder","_generateInitialLexicalValue","_webinyNodes","_webinyLexicalTheme","_LexicalComposer","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_interopRequireDefault","_reactComposition","_LexicalContentEditable","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","BaseRichTextEditor","_ref","toolbar","onChange","value","nodes","placeholder","children","onBlur","focus","width","height","placeholderElem","default","createElement","Placeholder","scrollRef","useRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","concat","_toConsumableArray2","WebinyNodes","theme","handleOnChange","editor","read","getEditorState","JSON","stringify","toJSON","LexicalComposer","ref","style","_objectSpread2","OnChangePlugin","LexicalUpdateStatePlugin","ClearEditorPlugin","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","className","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","makeComposable","props","RichTextEditorProvider","exports"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { LexicalValue } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { theme } from \"~/themes/webinyLexicalTheme\";\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\";\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\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}: RichTextEditorProps) => {\n    const placeholderElem = <Placeholder>{placeholder || \"Enter text...\"}</Placeholder>;\n    const scrollRef = useRef(null);\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\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: theme\n    };\n\n    function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n        editorState.read(() => {\n            if (typeof onChange === \"function\") {\n                const editorState = editor.getEditorState();\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                {/* 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            <BaseRichTextEditor {...props} />\n        </RichTextEditorProvider>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","Fragment","useId","useRef","useState","LexicalComposer","AutoFocusPlugin","ClearEditorPlugin","RichTextPlugin","LexicalErrorBoundary","makeDecoratable","HistoryPlugin","ContentEditable","allNodes","RichTextEditorProvider","BlurEventPlugin","Placeholder","SharedHistoryContext","useSharedHistoryContext","LexicalEditorWithConfig","useLexicalEditorConfig","StateHandlingPlugin","BaseRichTextEditor","onChange","toolbar","staticToolbar","nodes","placeholder","children","onBlur","focus","styles","width","disabled","height","contentEditableStyles","placeholderStyles","props","editorTheme","theme","config","historyState","placeholderElem","createElement","scrollRef","floatingAnchorElem","setFloatingAnchorElem","undefined","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","key","name","element","initialConfig","editorId","editable","namespace","onError","current","tokens","$colors","colors","$typography","typography","$cacheKey","JSON","stringify","configRef","length","toolbarActionPlugins","className","ref","style","overflow","position","value","externalHistoryState","contentEditable","outline","ErrorBoundary","RichTextEditor"],"sources":["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 { Placeholder } from \"~/ui/Placeholder.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    const placeholderElem = (\n        <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n    );\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={placeholderElem}\n                            ErrorBoundary={LexicalErrorBoundary}\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"],"mappings":"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","ignoreList":[]}

package/components/Editor/normalizeInputValue.d.ts

@@ -0,0 +1,6 @@
+import type { LexicalValue, NormalizedInputValue } from "../../types.js";
+/**
+ * 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`.
+ */
+export declare function normalizeInputValue(value: LexicalValue | null | undefined): NormalizedInputValue;

package/components/Editor/normalizeInputValue.js

@@ -0,0 +1,16 @@
+const isValueEmpty = value => {
+  return [undefined, null, "", '""', "null"].includes(value);
+};
+
+/**
+ * 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`.
+ */
+export function normalizeInputValue(value) {
+  if (isValueEmpty(value)) {
+    return null;
+  }
+  return value;
+}
+
+//# sourceMappingURL=normalizeInputValue.js.map

package/components/Editor/normalizeInputValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isValueEmpty","value","undefined","includes","normalizeInputValue"],"sources":["normalizeInputValue.ts"],"sourcesContent":["import type { LexicalValue, NormalizedInputValue } from \"~/types.js\";\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

@@ -0,0 +1,18 @@
+import type { ToolbarElementConfig } from "./components/ToolbarElement.js";
+import type { PluginConfig } from "./components/Plugin.js";
+import type { NodeConfig } from "./components/Node.js";
+export type { ToolbarElementConfig } from "./components/ToolbarElement.js";
+export type { PluginConfig } from "./components/Plugin.js";
+export type { NodeConfig } from "./components/Node.js";
+export declare const LexicalEditorConfig: (({ priority, children }: import("@webiny/react-properties").ConfigProps) => React.JSX.Element) & {
+    ToolbarElement: ({ name, element, after, before, remove }: import("./components/ToolbarElement.js").ToolbarElementProps) => import("react").JSX.Element;
+    Plugin: ({ name, element, after, before, remove }: import("./components/Plugin.js").PluginProps) => import("react").JSX.Element;
+    Node: ({ name, node, after, before, remove }: import("./components/Node.js").NodeProps) => import("react").JSX.Element;
+};
+export declare const LexicalEditorWithConfig: ({ onProperties, children }: import("@webiny/react-properties").WithConfigProps) => React.JSX.Element;
+interface LexicalEditorConfigData {
+    toolbarElements: ToolbarElementConfig[];
+    plugins: PluginConfig[];
+    nodes: NodeConfig[];
+}
+export declare function useLexicalEditorConfig(): LexicalEditorConfigData;

package/components/LexicalEditorConfig/LexicalEditorConfig.js

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+import { createConfigurableComponent } from "@webiny/react-properties";
+import { ToolbarElement } from "./components/ToolbarElement.js";
+import { Plugin } from "./components/Plugin.js";
+import { Node } from "./components/Node.js";
+const base = createConfigurableComponent("LexicalEditor");
+export const LexicalEditorConfig = Object.assign(base.Config, {
+  ToolbarElement,
+  Plugin,
+  Node
+});
+export const LexicalEditorWithConfig = base.WithConfig;
+export function useLexicalEditorConfig() {
+  const config = base.useConfig();
+  const toolbarElements = config.toolbarElements || [];
+  const plugins = config.plugins || [];
+  const nodes = config.nodes || [];
+  return useMemo(() => ({
+    toolbarElements: [...toolbarElements],
+    plugins: [...plugins],
+    nodes: [...nodes]
+  }), [config]);
+}
+
+//# sourceMappingURL=LexicalEditorConfig.js.map