@webiny/lexical-editor 6.0.0-alpha.5 → 6.0.0-rc.0

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/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./typography";
-export * from "./image";
-export * from "./list";
-export * from "./quote";
-export * from "./toolbar";
+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,7 +1,7 @@
-export * from "./typography";
-export * from "./image";
-export * from "./list";
-export * from "./quote";
-export * from "./toolbar";
+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":[],"sources":["index.ts"],"sourcesContent":["export * from \"~/commands/typography\";\nexport * from \"~/commands/image\";\nexport * from \"~/commands/list\";\nexport * from \"~/commands/quote\";\nexport * from \"~/commands/toolbar\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"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/components/Editor/EnsureHeadingTagPlugin.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { ParagraphNode, $createHeadingNode } from "@webiny/lexical-nodes";
-import { useRichTextEditor } from "../../hooks";
+import { useRichTextEditor } from "../../hooks/index.js";
 
 /**
  * In the "Heading" editor, we only want to support heading tags.

package/components/Editor/EnsureHeadingTagPlugin.js.map

@@ -1 +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\";\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":[]}
+{"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 type { CSSObject } from "@emotion/react";
 import type { Klass, LexicalNode } from "lexical";
-import type { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
-import type { LexicalValue, ToolbarActionPlugin } from "../../types";
+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,18 +14,17 @@ 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: EditorTheme;
-    themeEmotionMap?: ThemeEmotionMap;
     toolbarActionPlugins?: ToolbarActionPlugin[];
-    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
     toolbar?: React.ReactNode;
     value: LexicalValue | null | undefined;
+    configRef?: React.MutableRefObject<InitialEditorConfig | undefined>;
     width?: number | string;
 }
 /**
@@ -47,3 +49,6 @@ export declare const RichTextEditor: ((props: RichTextEditorProps) => React.JSX.
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
+export declare namespace RichTextEditor {
+    type InitialConfig = InitialEditorConfig;
+}

package/components/Editor/RichTextEditor.js

@@ -1,5 +1,4 @@
-import React, { Fragment, useRef, useState } from "react";
-import { css } from "emotion";
+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";
@@ -8,18 +7,17 @@ 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 { createTheme, toTypographyEmotionMap } from "@webiny/lexical-theme";
 import { allNodes } from "@webiny/lexical-nodes";
-import { RichTextEditorProvider } from "../../context/RichTextEditorContext";
-import { BlurEventPlugin } from "../../plugins/BlurEventPlugin/BlurEventPlugin";
-import { Placeholder } from "../../ui/Placeholder";
-import { SharedHistoryContext, useSharedHistoryContext } from "../../context/SharedHistoryContext";
-import { LexicalEditorWithConfig, useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig";
-import { StateHandlingPlugin } from "../../plugins/StateHandlingPlugin";
+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,
-  onChange,
   nodes,
   placeholder,
   children,
@@ -32,8 +30,7 @@ const BaseRichTextEditor = ({
   placeholderStyles,
   ...props
 }) => {
-  const themeEmotionMap = props.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);
-  const editorTheme = useRef(createTheme(props.theme));
+  const editorTheme = useRef(props.theme);
   const config = useLexicalEditorConfig();
   const {
     historyState
@@ -57,7 +54,7 @@ const BaseRichTextEditor = ({
     key: plugin.name
   }, plugin.element));
   const initialConfig = {
-    editorState: null,
+    editorId: useId(),
     namespace: "webiny",
     onError: () => {
       // Ignore errors. We don't want to break the app because of errors caused by config/value updates.
@@ -65,10 +62,17 @@ const BaseRichTextEditor = ({
     },
     nodes: [...allNodes, ...configNodes, ...(nodes || [])],
     theme: {
-      ...editorTheme.current,
-      emotionMap: themeEmotionMap
+      ...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)
     }
   };
+  if (props.configRef) {
+    props.configRef.current = initialConfig;
+  }
   return (
     /*#__PURE__*/
     /**
@@ -83,9 +87,11 @@ const BaseRichTextEditor = ({
       key: initialConfig.nodes.length
     }, /*#__PURE__*/React.createElement(RichTextEditorProvider, {
       theme: props.theme,
-      themeEmotionMap: themeEmotionMap,
       toolbarActionPlugins: props.toolbarActionPlugins
     }, 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,

package/components/Editor/RichTextEditor.js.map

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

package/components/Editor/normalizeInputValue.d.ts

@@ -1,4 +1,4 @@
-import type { LexicalValue, NormalizedInputValue } from "../../types";
+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`.

package/components/Editor/normalizeInputValue.js.map

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

@@ -1,20 +1,18 @@
-import React from "react";
-import type { ToolbarElementConfig } from "./components/ToolbarElement";
-import type { PluginConfig } from "./components/Plugin";
-import type { NodeConfig } from "./components/Node";
-export declare const LexicalEditorConfig: {
-    ({ children }: {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    ToolbarElement: ({ name, element, after, before, remove }: import("./components/ToolbarElement").ToolbarElementProps) => React.JSX.Element;
-    Plugin: ({ name, element, after, before, remove }: import("./components/Plugin").PluginProps) => React.JSX.Element;
-    Node: ({ name, node, after, before, remove }: import("./components/Node").NodeProps) => React.JSX.Element;
+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: ({ children }: {
-    children: React.ReactNode;
-}) => React.JSX.Element;
-export declare function useLexicalEditorConfig(): {
+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

@@ -1,63 +1,25 @@
-import React, { useContext, useMemo, useState } from "react";
-import { makeDecoratable, Compose } from "@webiny/react-composition";
-import { Properties, toObject } from "@webiny/react-properties";
-import { ToolbarElement } from "./components/ToolbarElement";
-import { Plugin } from "./components/Plugin";
-import { Node } from "./components/Node";
-const LexicalEditorConfigApply = makeDecoratable("LexicalEditorConfigApply", ({
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+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
 });
-const createHOC = newChildren => BaseComponent => {
-  return function ConfigHOC({
-    children
-  }) {
-    return /*#__PURE__*/React.createElement(BaseComponent, null, newChildren, children);
-  };
-};
-export const LexicalEditorConfig = ({
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(Compose, {
-    component: LexicalEditorConfigApply,
-    with: createHOC(children)
-  });
-};
-LexicalEditorConfig.ToolbarElement = ToolbarElement;
-LexicalEditorConfig.Plugin = Plugin;
-LexicalEditorConfig.Node = Node;
-const ViewContext = /*#__PURE__*/React.createContext({
-  properties: []
-});
-export const LexicalEditorWithConfig = ({
-  children
-}) => {
-  const [properties, setProperties] = useState([]);
-  const context = {
-    properties
-  };
-  const stateUpdater = properties => {
-    setProperties(properties);
-  };
-  return /*#__PURE__*/React.createElement(ViewContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(Properties, {
-    onChange: stateUpdater
-  }, /*#__PURE__*/React.createElement(LexicalEditorConfigApply, null), children));
-};
+export const LexicalEditorWithConfig = base.WithConfig;
 export function useLexicalEditorConfig() {
-  const {
-    properties
-  } = useContext(ViewContext);
-  const config = useMemo(() => {
-    return toObject(properties);
-  }, [properties]);
-  return {
-    toolbarElements: config.toolbarElements || [],
-    plugins: config.plugins || [],
-    nodes: config.nodes || []
-  };
+  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

package/components/LexicalEditorConfig/LexicalEditorConfig.js.map

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

package/components/LexicalHtmlRenderer.d.ts

@@ -1,14 +1,11 @@
 import React from "react";
 import type { Klass, LexicalNode } from "lexical";
-import type { CSSObject } from "@emotion/react";
-import type { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
-import type { LexicalValue } from "../types";
+import type { EditorTheme } from "@webiny/lexical-theme";
+import type { LexicalValue } from "../types.js";
 interface LexicalHtmlRendererProps {
     nodes?: Klass<LexicalNode>[];
     value: LexicalValue | null;
-    theme: Partial<EditorTheme>;
-    themeEmotionMap?: ThemeEmotionMap;
-    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
+    theme: EditorTheme;
 }
 export declare const LexicalHtmlRenderer: ({ nodes, value, ...props }: LexicalHtmlRendererProps) => React.JSX.Element;
 export {};

package/components/LexicalHtmlRenderer.js

@@ -1,25 +1,18 @@
 import React, { useRef } from "react";
-import { css } from "emotion";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary.js";
 import { allNodes } from "@webiny/lexical-nodes";
-import { createTheme, toTypographyEmotionMap } from "@webiny/lexical-theme";
-import { RichTextEditorProvider } from "../context/RichTextEditorContext";
-import { StateHandlingPlugin } from "../plugins/StateHandlingPlugin";
+import { RichTextEditorProvider } from "../context/RichTextEditorContext.js";
+import { StateHandlingPlugin } from "../plugins/StateHandlingPlugin.js";
 export const LexicalHtmlRenderer = ({
   nodes,
   value,
   ...props
 }) => {
-  const theme = {
-    styles: {},
-    emotionMap: {},
-    ...props.theme
-  };
-  const themeEmotionMap = props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);
-  const editorTheme = useRef(createTheme(theme));
+  const theme = props.theme;
+  const editorTheme = useRef(theme);
   const initialConfig = {
     editorState: null,
     namespace: "webiny",
@@ -30,17 +23,19 @@ export const LexicalHtmlRenderer = ({
     editable: false,
     nodes: [...allNodes, ...(nodes || [])],
     theme: {
-      ...editorTheme.current,
-      emotionMap: themeEmotionMap,
-      styles: theme.styles
+      ...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)
     }
   };
   return /*#__PURE__*/React.createElement(LexicalComposer, {
     initialConfig: initialConfig,
     key: initialConfig.nodes.length
   }, /*#__PURE__*/React.createElement(RichTextEditorProvider, {
-    theme: theme,
-    themeEmotionMap: themeEmotionMap
+    theme: theme
   }, /*#__PURE__*/React.createElement(RichTextPlugin, {
     contentEditable: /*#__PURE__*/React.createElement("div", {
       className: "editor"

package/components/LexicalHtmlRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","css","LexicalComposer","RichTextPlugin","ContentEditable","LexicalErrorBoundary","allNodes","createTheme","toTypographyEmotionMap","RichTextEditorProvider","StateHandlingPlugin","LexicalHtmlRenderer","nodes","value","props","theme","styles","emotionMap","themeEmotionMap","themeStylesTransformer","editorTheme","initialConfig","editorState","namespace","onError","editable","current","createElement","key","length","contentEditable","className","ErrorBoundary","placeholder"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { css } from \"emotion\";\nimport type { CSSObject } from \"@emotion/react\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { EditorTheme, ThemeEmotionMap } from \"@webiny/lexical-theme\";\nimport { createTheme, toTypographyEmotionMap } from \"@webiny/lexical-theme\";\nimport type { LexicalValue } from \"~/types\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: Partial<EditorTheme>;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = { styles: {}, emotionMap: {}, ...props.theme };\n    const themeEmotionMap =\n        props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);\n    const editorTheme = useRef(createTheme(theme));\n\n    const initialConfig = {\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme} themeEmotionMap={themeEmotionMap}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <StateHandlingPlugin value={value} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAErC,SAASC,GAAG,QAAQ,SAAS;AAE7B,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,sCAAsC;AACrE,SAASC,eAAe,QAAQ,uCAAuC;AACvE,OAAOC,oBAAoB,MAAM,qCAAqC;AACtE,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,WAAW,EAAEC,sBAAsB,QAAQ,uBAAuB;AAE3E,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAU5B,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACzF,MAAMC,KAAkB,GAAG;IAAEC,MAAM,EAAE,CAAC,CAAC;IAAEC,UAAU,EAAE,CAAC,CAAC;IAAE,GAAGH,KAAK,CAACC;EAAM,CAAC;EACzE,MAAMG,eAAe,GACjBJ,KAAK,EAAEI,eAAe,IAAIV,sBAAsB,CAACP,GAAG,EAAEc,KAAK,EAAED,KAAK,CAACK,sBAAsB,CAAC;EAC9F,MAAMC,WAAW,GAAGpB,MAAM,CAACO,WAAW,CAACQ,KAAK,CAAC,CAAC;EAE9C,MAAMM,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAEA,CAAA,KAAM;MACX;MACA;IAAA,CACH;IACDC,QAAQ,EAAE,KAAK;IACfb,KAAK,EAAE,CAAC,GAAGN,QAAQ,EAAE,IAAIM,KAAK,IAAI,EAAE,CAAC,CAAC;IACtCG,KAAK,EAAE;MAAE,GAAGK,WAAW,CAACM,OAAO;MAAET,UAAU,EAAEC,eAAe;MAAEF,MAAM,EAAED,KAAK,CAACC;IAAO;EACvF,CAAC;EAED,oBACIjB,KAAA,CAAA4B,aAAA,CAACzB,eAAe;IAACmB,aAAa,EAAEA,aAAc;IAACO,GAAG,EAAEP,aAAa,CAACT,KAAK,CAACiB;EAAO,gBAC3E9B,KAAA,CAAA4B,aAAA,CAAClB,sBAAsB;IAACM,KAAK,EAAEA,KAAM;IAACG,eAAe,EAAEA;EAAgB,gBACnEnB,KAAA,CAAA4B,aAAA,CAACxB,cAAc;IACX2B,eAAe,eACX/B,KAAA,CAAA4B,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBhC,KAAA,CAAA4B,aAAA,CAACvB,eAAe,MAAE,CACjB,CACR;IACD4B,aAAa,EAAE3B,oBAAqB;IACpC4B,WAAW,EAAE;EAAK,CACrB,CAAC,eACFlC,KAAA,CAAA4B,aAAA,CAACjB,mBAAmB;IAACG,KAAK,EAAEA;EAAM,CAAE,CAChB,CACX,CAAC;AAE1B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useRef","LexicalComposer","RichTextPlugin","ContentEditable","LexicalErrorBoundary","allNodes","RichTextEditorProvider","StateHandlingPlugin","LexicalHtmlRenderer","nodes","value","props","theme","editorTheme","initialConfig","editorState","namespace","onError","editable","current","tokens","$colors","colors","$typography","typography","$cacheKey","JSON","stringify","createElement","key","length","contentEditable","className","ErrorBoundary","placeholder"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary.js\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport type { LexicalValue } from \"~/types.js\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: EditorTheme;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = props.theme;\n    const editorTheme = useRef(theme);\n\n    const initialConfig = {\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: {\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    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <StateHandlingPlugin value={value} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAErC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,sCAAsC;AACrE,SAASC,eAAe,QAAQ,uCAAuC;AACvE,SAASC,oBAAoB,QAAQ,wCAAwC;AAC7E,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAQ5B,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACzF,MAAMC,KAAkB,GAAGD,KAAK,CAACC,KAAK;EACtC,MAAMC,WAAW,GAAGb,MAAM,CAACY,KAAK,CAAC;EAEjC,MAAME,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAEA,CAAA,KAAM;MACX;MACA;IAAA,CACH;IACDC,QAAQ,EAAE,KAAK;IACfT,KAAK,EAAE,CAAC,GAAGJ,QAAQ,EAAE,IAAII,KAAK,IAAI,EAAE,CAAC,CAAC;IACtCG,KAAK,EAAE;MACH,GAAGC,WAAW,CAACM,OAAO,CAACC,MAAM;MAC7B;MACA;MACAC,OAAO,EAAER,WAAW,CAACM,OAAO,CAACG,MAAM;MACnCC,WAAW,EAAEV,WAAW,CAACM,OAAO,CAACK,UAAU;MAC3CC,SAAS,EAAEC,IAAI,CAACC,SAAS,CAACd,WAAW,CAACM,OAAO;IACjD;EACJ,CAAC;EAED,oBACIpB,KAAA,CAAA6B,aAAA,CAAC3B,eAAe;IAACa,aAAa,EAAEA,aAAc;IAACe,GAAG,EAAEf,aAAa,CAACL,KAAK,CAACqB;EAAO,gBAC3E/B,KAAA,CAAA6B,aAAA,CAACtB,sBAAsB;IAACM,KAAK,EAAEA;EAAM,gBACjCb,KAAA,CAAA6B,aAAA,CAAC1B,cAAc;IACX6B,eAAe,eACXhC,KAAA,CAAA6B,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBjC,KAAA,CAAA6B,aAAA,CAACzB,eAAe,MAAE,CACjB,CACR;IACD8B,aAAa,EAAE7B,oBAAqB;IACpC8B,WAAW,EAAE;EAAK,CACrB,CAAC,eACFnC,KAAA,CAAA6B,aAAA,CAACrB,mBAAmB;IAACG,KAAK,EAAEA;EAAM,CAAE,CAChB,CACX,CAAC;AAE1B,CAAC","ignoreList":[]}