@webiny/lexical-editor 5.40.6 → 5.41.0-beta.0

package/commands/list.d.ts

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

package/commands/quote.d.ts

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

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,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EnsureHeadingTagPlugin = void 0;
+var _react = require("react");
+var _lexicalNodes = require("@webiny/lexical-nodes");
+var _hooks = require("../../hooks");
+/**
+ * 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.
+ */
+var EnsureHeadingTagPlugin = exports.EnsureHeadingTagPlugin = function EnsureHeadingTagPlugin() {
+  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
+  (0, _react.useEffect)(function () {
+    return editor.registerNodeTransform(_lexicalNodes.ParagraphNode, function (node) {
+      node.replace((0, _lexicalNodes.$createHeadingNode)("h1"), true);
+    });
+  }, []);
+  return null;
+};
+
+//# sourceMappingURL=EnsureHeadingTagPlugin.js.map

package/components/Editor/EnsureHeadingTagPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_lexicalNodes","_hooks","EnsureHeadingTagPlugin","exports","_useRichTextEditor","useRichTextEditor","editor","useEffect","registerNodeTransform","ParagraphNode","node","replace","$createHeadingNode"],"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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMG,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,SAAzBA,sBAAsBA,CAAA,EAAS;EACxC,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EAEd,IAAAC,gBAAS,EACL;IAAA,OACID,MAAM,CAACE,qBAAqB,CAACC,2BAAa,EAAE,UAAAC,IAAI,EAAI;MAChDA,IAAI,CAACC,OAAO,CAAC,IAAAC,gCAAkB,EAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAChD,CAAC,CAAC;EAAA,GACN,EACJ,CAAC;EACD,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/components/Editor/HeadingEditor.js

@@ -9,6 +9,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _RichTextEditor = require("./RichTextEditor");
 var _Toolbar = require("../Toolbar/Toolbar");
+var _EnsureHeadingTagPlugin = require("./EnsureHeadingTagPlugin");
 var _excluded = ["tag", "placeholder"];
 var styles = {
   padding: 5
@@ -23,7 +24,7 @@ var HeadingEditor = exports.HeadingEditor = function HeadingEditor(_ref) {
     placeholder: placeholder ?? "Enter your heading text here..."
   }, rest, {
     styles: styles
-  }), rest?.children);
+  }), /*#__PURE__*/_react.default.createElement(_EnsureHeadingTagPlugin.EnsureHeadingTagPlugin, null), rest?.children);
 };
 
 //# sourceMappingURL=HeadingEditor.js.map

package/components/Editor/HeadingEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_RichTextEditor","_Toolbar","_excluded","styles","padding","HeadingEditor","exports","_ref","tag","placeholder","rest","_objectWithoutProperties2","default","createElement","RichTextEditor","Object","assign","toolbar","Toolbar","children"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nconst styles = { padding: 5 };\n\nexport const HeadingEditor = ({ tag, placeholder, ...rest }: HeadingEditorProps) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n            styles={styles}\n        >\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAuD,IAAAG,SAAA;AAMvD,IAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAE,CAAC;AAEtB,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,SAAhBA,aAAaA,CAAAE,IAAA,EAA0D;EAAA,IAApDC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAL,SAAA;EACrD,oBACIL,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,eAAA,CAAAc,cAAc,EAAAC,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAEpB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,QAAA,CAAAiB,OAAO,MAAE,CAAE;IACrBV,GAAG,EAAEA,GAAG,IAAI,IAAK;IACjBC,WAAW,EAAEA,WAAW,IAAI;EAAkC,GAC1DC,IAAI;IACRP,MAAM,EAAEA;EAAO,IAEdO,IAAI,EAAES,QACK,CAAC;AAEzB,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_RichTextEditor","_Toolbar","_EnsureHeadingTagPlugin","_excluded","styles","padding","HeadingEditor","exports","_ref","tag","placeholder","rest","_objectWithoutProperties2","default","createElement","RichTextEditor","Object","assign","toolbar","Toolbar","EnsureHeadingTagPlugin","children"],"sources":["HeadingEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { RichTextEditor, RichTextEditorProps } from \"~/components/Editor/RichTextEditor\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\nimport { EnsureHeadingTagPlugin } from \"~/components/Editor/EnsureHeadingTagPlugin\";\n\ninterface HeadingEditorProps extends RichTextEditorProps {\n    tag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nconst styles = { padding: 5 };\n\nexport const HeadingEditor = ({ tag, placeholder, ...rest }: HeadingEditorProps) => {\n    return (\n        <RichTextEditor\n            toolbar={<Toolbar />}\n            tag={tag ?? \"h1\"}\n            placeholder={placeholder ?? \"Enter your heading text here...\"}\n            {...rest}\n            styles={styles}\n        >\n            <EnsureHeadingTagPlugin />\n            {rest?.children}\n        </RichTextEditor>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAAoF,IAAAI,SAAA;AAMpF,IAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAE,CAAC;AAEtB,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,SAAhBA,aAAaA,CAAAE,IAAA,EAA0D;EAAA,IAApDC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAAL,IAAA,EAAAL,SAAA;EACrD,oBACIN,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACd,eAAA,CAAAe,cAAc,EAAAC,MAAA,CAAAC,MAAA;IACXC,OAAO,eAAErB,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACb,QAAA,CAAAkB,OAAO,MAAE,CAAE;IACrBV,GAAG,EAAEA,GAAG,IAAI,IAAK;IACjBC,WAAW,EAAEA,WAAW,IAAI;EAAkC,GAC1DC,IAAI;IACRP,MAAM,EAAEA;EAAO,iBAEfP,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACZ,uBAAA,CAAAkB,sBAAsB,MAAE,CAAC,EACzBT,IAAI,EAAEU,QACK,CAAC;AAEzB,CAAC","ignoreList":[]}

package/components/Editor/RichTextEditor.d.ts

@@ -24,14 +24,27 @@ export interface RichTextEditorProps {
     toolbar?: React.ReactNode;
     value: LexicalValue | null | undefined;
     width?: number | string;
+    generateInitialValue?: () => LexicalValue;
 }
 /**
  * @description Main editor container
  */
-export declare const RichTextEditor: import("@webiny/react-composition").GenericComponent<RichTextEditorProps> & {
-    original: import("@webiny/react-composition").GenericComponent<RichTextEditorProps>;
+export declare const RichTextEditor: ((props: RichTextEditorProps) => React.JSX.Element) & {
+    original: (props: RichTextEditorProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: RichTextEditorProps) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
+    original: ((props: RichTextEditorProps) => React.JSX.Element) & {
+        original: (props: RichTextEditorProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: RichTextEditorProps) => React.JSX.Element) & {
+        original: (props: RichTextEditorProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
 };

package/components/Editor/RichTextEditor.js

@@ -33,7 +33,7 @@ var _generateInitialLexicalValue = require("../../utils/generateInitialLexicalVa
 var _SharedHistoryContext = require("../../context/SharedHistoryContext");
 var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
 var _normalizeInputValue = require("./normalizeInputValue");
-var _excluded = ["toolbar", "staticToolbar", "onChange", "nodes", "placeholder", "children", "onBlur", "focus", "styles", "width", "height", "contentEditableStyles", "placeholderStyles"];
+var _excluded = ["toolbar", "staticToolbar", "onChange", "nodes", "placeholder", "children", "onBlur", "focus", "styles", "width", "height", "contentEditableStyles", "placeholderStyles", "generateInitialValue"];
 var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
   var toolbar = _ref.toolbar,
     staticToolbar = _ref.staticToolbar,
@@ -48,6 +48,8 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     height = _ref.height,
     contentEditableStyles = _ref.contentEditableStyles,
     placeholderStyles = _ref.placeholderStyles,
+    _ref$generateInitialV = _ref.generateInitialValue,
+    generateInitialValue = _ref$generateInitialV === void 0 ? _generateInitialLexicalValue.generateInitialLexicalValue : _ref$generateInitialV,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var themeEmotionMap = props.themeEmotionMap ?? (0, _lexicalTheme.toTypographyEmotionMap)(_emotion.css, props.theme, props.themeStylesTransformer);
   var editorTheme = (0, _react.useRef)((0, _lexicalTheme.createTheme)());
@@ -80,7 +82,7 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     }, plugin.element);
   });
   var value = (0, _normalizeInputValue.normalizeInputValue)(props.value);
-  var editorValue = (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)();
+  var editorValue = (0, _isValidLexicalData.isValidLexicalData)(value) ? value : generateInitialValue();
   var initialConfig = {
     editorState: null,
     namespace: "webiny",

package/components/Editor/RichTextEditor.js.map

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

package/components/ToolbarActions/FontColorAction.d.ts

@@ -1,16 +1,28 @@
 import React from "react";
-export declare const FontColorPicker: import("@webiny/react-composition").GenericComponent<any> & {
-    original: import("@webiny/react-composition").GenericComponent<any>;
+export declare const FontColorPicker: (() => JSX.Element | null) & {
+    original: () => JSX.Element | null;
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: any) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
+    original: (() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
 };
 interface FontActionColorPicker {
     element: JSX.Element;
 }
 declare const FontActionColorPicker: ({ element }: FontActionColorPicker) => JSX.Element;
-export declare type FontColorAction = React.ComponentType<unknown> & {
+export type FontColorAction = React.ComponentType<unknown> & {
     ColorPicker: typeof FontActionColorPicker;
 };
 export declare const FontColorAction: FontColorAction;

package/components/ToolbarActions/TextAlignmentAction.d.ts

@@ -1,16 +1,28 @@
 import React from "react";
-export declare const BaseTextAlignmentDropDown: import("@webiny/react-composition").GenericComponent<any> & {
-    original: import("@webiny/react-composition").GenericComponent<any>;
+export declare const BaseTextAlignmentDropDown: (() => JSX.Element | null) & {
+    original: () => JSX.Element | null;
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: any) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
+    original: (() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
 };
 interface TextAlignmentActionDropdownProps {
     element: JSX.Element;
 }
 declare const TextAlignmentActionDropDown: ({ element }: TextAlignmentActionDropdownProps) => JSX.Element;
-export declare type TextAlignmentAction = React.ComponentType<unknown> & {
+export type TextAlignmentAction = React.ComponentType<unknown> & {
     TextAlignmentDropDown: typeof TextAlignmentActionDropDown;
 };
 export declare const TextAlignmentAction: TextAlignmentAction;

package/components/ToolbarActions/TypographyAction.d.ts

@@ -1,16 +1,28 @@
 import React from "react";
-export declare const BaseTypographyActionDropDown: import("@webiny/react-composition").GenericComponent<any> & {
-    original: import("@webiny/react-composition").GenericComponent<any>;
+export declare const BaseTypographyActionDropDown: (() => JSX.Element | null) & {
+    original: () => JSX.Element | null;
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").Decorator<(props: any) => JSX.Element | null>) => (props: unknown) => React.JSX.Element;
+    original: (() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => JSX.Element | null) & {
+        original: () => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
 };
 interface TypographyActionDropdownProps {
     element: JSX.Element;
 }
 declare const TypographyActionDropDown: ({ element }: TypographyActionDropdownProps) => JSX.Element;
-export declare type TypographyAction = React.ComponentType<unknown> & {
+export type TypographyAction = React.ComponentType<unknown> & {
     TypographyDropDown: typeof TypographyActionDropDown;
 };
 export declare const TypographyAction: TypographyAction;

package/context/SharedHistoryContext.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { HistoryState } from "@lexical/history";
-declare type ContextShape = {
+type ContextShape = {
     historyState?: HistoryState;
 };
 export declare const SharedHistoryContext: ({ children }: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/lexical-editor",
-	"version": "5.40.6",
+	"version": "5.41.0-beta.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -15,10 +15,10 @@
 		"@lexical/selection": "0.16.1",
 		"@lexical/text": "0.16.1",
 		"@lexical/utils": "0.16.1",
-		"@webiny/lexical-nodes": "5.40.6",
-		"@webiny/lexical-theme": "5.40.6",
-		"@webiny/react-composition": "5.40.6",
-		"@webiny/react-properties": "5.40.6",
+		"@webiny/lexical-nodes": "5.41.0-beta.0",
+		"@webiny/lexical-theme": "5.41.0-beta.0",
+		"@webiny/react-composition": "5.41.0-beta.0",
+		"@webiny/react-properties": "5.41.0-beta.0",
 		"emotion": "10.0.27",
 		"lexical": "0.16.1",
 		"lodash": "4.17.21",
@@ -26,8 +26,8 @@
 		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
-		"@webiny/cli": "5.40.6",
-		"@webiny/project-utils": "5.40.6"
+		"@webiny/cli": "5.41.0-beta.0",
+		"@webiny/project-utils": "5.41.0-beta.0"
 	},
 	"publishConfig": {
 		"access": "public",
@@ -37,5 +37,5 @@
 		"build": "yarn webiny run build",
 		"watch": "yarn webiny run watch"
 	},
-	"gitHead": "f9da84b373e62f9f269599c4301e5e4418a98d51"
+	"gitHead": "9ce5e75fc577aa4de2cf08d5ca734b3c98fe65b6"
 }

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.css

@@ -2,7 +2,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 10;
+  z-index: 31;
   max-width: 400px;
   width: 100%;
   opacity: 0;

package/plugins/ImagesPlugin/ImagesPlugin.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ImagePayload } from "../../commands";
-export declare type InsertImagePayload = Readonly<ImagePayload>;
+export type InsertImagePayload = Readonly<ImagePayload>;
 export declare function ImagesPlugin({ captionsEnabled }: {
     captionsEnabled?: boolean;
 }): JSX.Element | null;

package/plugins/LinkPlugin/LinkPlugin.d.ts

@@ -1,4 +1,4 @@
-declare type Props = {
+type Props = {
     validateUrl?: (url: string) => boolean;
 };
 export declare function LinkPlugin({ validateUrl }: Props): null;

package/types.d.ts

@@ -1,8 +1,8 @@
-export declare type LexicalValue = string;
-export declare type NormalizedInputValue = LexicalValue | null;
+export type LexicalValue = string;
+export type NormalizedInputValue = LexicalValue | null;
 export { FontColorPicker } from "./components/ToolbarActions/FontColorAction";
-export declare type ImageActionType = "image-action";
-export declare type ToolbarActionType = ImageActionType | string;
+export type ImageActionType = "image-action";
+export type ToolbarActionType = ImageActionType | string;
 export interface ToolbarActionPlugin {
     targetAction: ToolbarActionType;
     plugin: Record<string, any> | ((cb: (value: any) => void) => any) | undefined;

package/ui/TextInput.d.ts

@@ -7,7 +7,7 @@
  */
 /// <reference types="react" />
 import "./Input.css";
-declare type Props = Readonly<{
+type Props = Readonly<{
     "data-test-id"?: string;
     label: string;
     onChange: (val: string) => void;

package/utils/rect.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { Point } from "./point";
-declare type ContainsPointReturn = {
+type ContainsPointReturn = {
     result: boolean;
     reason: {
         isOnTopSide: boolean;