@webiny/lexical-editor 6.4.11 → 6.6.0-alpha.1

package/components/Editor/EditorPlaceholder.d.ts

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

package/components/Editor/EditorPlaceholder.js

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

package/components/Editor/EditorPlaceholder.js.map

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

package/components/Editor/RichTextEditor.js

@@ -10,7 +10,7 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { allNodes } from "@webiny/lexical-nodes";
 import { RichTextEditorProvider } from "../../context/RichTextEditorContext.js";
 import { BlurEventPlugin } from "../../plugins/BlurEventPlugin/BlurEventPlugin.js";
-import { Placeholder } from "../../ui/Placeholder.js";
+import { EditorPlaceholder } from "./EditorPlaceholder.js";
 import { SharedHistoryContext, useSharedHistoryContext } from "../../context/SharedHistoryContext.js";
 import { LexicalEditorWithConfig, useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig.js";
 import { StateHandlingPlugin } from "../../plugins/StateHandlingPlugin.js";
@@ -18,9 +18,7 @@ const BaseRichTextEditor = ({ onChange, toolbar, staticToolbar, nodes, placehold
     const editorTheme = useRef(props.theme);
     const config = useLexicalEditorConfig();
     const { historyState } = useSharedHistoryContext();
-    const placeholderElem = /*#__PURE__*/ react.createElement(Placeholder, {
-        styles: placeholderStyles
-    }, placeholder || "Enter text...");
+    const defaultParagraphClassName = props.theme?.typography?.paragraphs?.[0]?.className;
     const scrollRef = useRef(null);
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(void 0);
     const onRef = (_floatingAnchorElem)=>{
@@ -93,8 +91,12 @@ const BaseRichTextEditor = ({ onChange, toolbar, staticToolbar, nodes, placehold
                 ...contentEditableStyles
             }
         }))),
-        placeholder: placeholderElem,
+        placeholder: null,
         ErrorBoundary: LexicalErrorBoundary
+    }), /*#__PURE__*/ react.createElement(EditorPlaceholder, {
+        text: placeholder || "Enter text...",
+        styles: placeholderStyles,
+        fallbackClassName: defaultParagraphClassName
     }), disabled ? null : floatingAnchorElem && toolbar))));
 };
 const RichTextEditor = makeDecoratable("RichTextEditor", (props)=>/*#__PURE__*/ react.createElement(LexicalEditorWithConfig, null, /*#__PURE__*/ react.createElement(BaseRichTextEditor, props)));

package/components/Editor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/Editor/RichTextEditor.js","sources":["../../../src/components/Editor/RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useId, useRef, useState } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin.js\";\nimport type { LexicalValue, ToolbarActionPlugin } from \"~/types.js\";\nimport { Placeholder } from \"~/ui/Placeholder.js\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext.js\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\nexport type InitialEditorConfig = React.ComponentProps<typeof LexicalComposer>[\"initialConfig\"] & {\n    editorId: string;\n};\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    disabled?: boolean;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (value: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: EditorTheme;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    toolbar?: React.ReactNode;\n    value: LexicalValue | null | undefined;\n    configRef?: React.MutableRefObject<InitialEditorConfig | undefined>;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor = ({\n    onChange,\n    toolbar,\n    staticToolbar,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    disabled = false,\n    height,\n    contentEditableStyles,\n    placeholderStyles,\n    ...props\n}: RichTextEditorProps) => {\n    const editorTheme = useRef(props.theme);\n    const config = useLexicalEditorConfig();\n    const { historyState } = useSharedHistoryContext();\n    const placeholderElem = (\n        <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n    );\n    const scrollRef = useRef(null);\n\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const configNodes = config.nodes.map(node => node.node);\n    const configPlugins = config.plugins.map(plugin => (\n        <Fragment key={plugin.name}>{plugin.element}</Fragment>\n    ));\n\n    const initialConfig = {\n        editorId: useId(),\n        editable: !disabled,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n        theme: {\n            ...editorTheme.current.tokens,\n            // I'm not aware of a better way to pass custom data to nodes.\n            // For now, we're using Lexical's theme to pass colors and typography.\n            $colors: editorTheme.current.colors,\n            $typography: editorTheme.current.typography,\n            $cacheKey: JSON.stringify(editorTheme.current)\n        }\n    };\n\n    if (props.configRef) {\n        props.configRef.current = initialConfig;\n    }\n\n    return (\n        /**\n         * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n         * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n         * and initially, there can be multiple re-renders, while the config object is settled.\n         *\n         * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n         */\n        <SharedHistoryContext>\n            <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n                <RichTextEditorProvider\n                    theme={props.theme}\n                    toolbarActionPlugins={props.toolbarActionPlugins}\n                >\n                    {staticToolbar && !disabled ? staticToolbar : null}\n                    <div data-role={\"overlays\"} className={\"relative\"}></div>\n                    <div\n                        /* This className is necessary for targeting of editor container from CSS files. */\n                        className={\"editor-shell\"}\n                        ref={scrollRef}\n                        style={{\n                            ...styles,\n                            ...sizeStyle,\n                            overflow: \"auto\",\n                            position: \"relative\"\n                        }}\n                    >\n                        {/* State plugins. */}\n                        <StateHandlingPlugin\n                            value={props.value}\n                            onChange={disabled ? undefined : onChange}\n                        />\n                        <ClearEditorPlugin />\n                        <HistoryPlugin externalHistoryState={historyState} />\n                        {/* Event plugins. */}\n                        {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                        {focus && <AutoFocusPlugin />}\n                        {/* External plugins and components. */}\n                        {configPlugins}\n                        {children}\n                        <RichTextPlugin\n                            contentEditable={\n                                <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                                    <div className=\"editor\" ref={onRef}>\n                                        <ContentEditable\n                                            disabled={disabled}\n                                            style={{ outline: 0, ...contentEditableStyles }}\n                                        />\n                                    </div>\n                                </div>\n                            }\n                            placeholder={placeholderElem}\n                            ErrorBoundary={LexicalErrorBoundary}\n                        />\n                        {/* Toolbar. */}\n                        {disabled ? null : floatingAnchorElem && toolbar}\n                    </div>\n                </RichTextEditorProvider>\n            </LexicalComposer>\n        </SharedHistoryContext>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n    return (\n        <LexicalEditorWithConfig>\n            <BaseRichTextEditor {...props} />\n        </LexicalEditorWithConfig>\n    );\n});\n\nexport namespace RichTextEditor {\n    export type InitialConfig = InitialEditorConfig;\n}\n"],"names":["BaseRichTextEditor","onChange","toolbar","staticToolbar","nodes","placeholder","children","onBlur","focus","styles","width","disabled","height","contentEditableStyles","placeholderStyles","props","editorTheme","useRef","config","useLexicalEditorConfig","historyState","useSharedHistoryContext","placeholderElem","Placeholder","scrollRef","floatingAnchorElem","setFloatingAnchorElem","useState","undefined","onRef","_floatingAnchorElem","sizeStyle","configNodes","node","configPlugins","plugin","Fragment","initialConfig","useId","allNodes","JSON","SharedHistoryContext","LexicalComposer","RichTextEditorProvider","StateHandlingPlugin","ClearEditorPlugin","HistoryPlugin","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","ContentEditable","LexicalErrorBoundary","RichTextEditor","makeDecoratable","LexicalEditorWithConfig"],"mappings":"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"}
+{"version":3,"file":"components/Editor/RichTextEditor.js","sources":["../../../src/components/Editor/RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useId, useRef, useState } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin.js\";\nimport type { LexicalValue, ToolbarActionPlugin } from \"~/types.js\";\nimport { EditorPlaceholder } from \"~/components/Editor/EditorPlaceholder.js\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext.js\";\nimport {\n    LexicalEditorWithConfig,\n    useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\nexport type InitialEditorConfig = React.ComponentProps<typeof LexicalComposer>[\"initialConfig\"] & {\n    editorId: string;\n};\n\nexport interface RichTextEditorProps {\n    children?: React.ReactNode | React.ReactNode[];\n    classes?: string;\n    disabled?: boolean;\n    contentEditableStyles?: React.CSSProperties;\n    focus?: boolean;\n    height?: number | string;\n    nodes?: Klass<LexicalNode>[];\n    onBlur?: (editorState: LexicalValue) => void;\n    onChange?: (value: LexicalValue) => void;\n    placeholder?: string;\n    placeholderStyles?: React.CSSProperties;\n    staticToolbar?: React.ReactNode;\n    styles?: React.CSSProperties;\n    tag?: string;\n    theme: EditorTheme;\n    toolbarActionPlugins?: ToolbarActionPlugin[];\n    toolbar?: React.ReactNode;\n    value: LexicalValue | null | undefined;\n    configRef?: React.MutableRefObject<InitialEditorConfig | undefined>;\n    width?: number | string;\n}\n\nconst BaseRichTextEditor = ({\n    onChange,\n    toolbar,\n    staticToolbar,\n    nodes,\n    placeholder,\n    children,\n    onBlur,\n    focus,\n    styles,\n    width,\n    disabled = false,\n    height,\n    contentEditableStyles,\n    placeholderStyles,\n    ...props\n}: RichTextEditorProps) => {\n    const editorTheme = useRef(props.theme);\n    const config = useLexicalEditorConfig();\n    const { historyState } = useSharedHistoryContext();\n    // Apply the default paragraph's typography class so the placeholder matches the real\n    // text's size/line-height/font (the muted color is kept via placeholderStyles).\n    const defaultParagraphClassName = props.theme?.typography?.paragraphs?.[0]?.className;\n    const scrollRef = useRef(null);\n\n    const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n        undefined\n    );\n    const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n        if (_floatingAnchorElem !== null) {\n            setFloatingAnchorElem(_floatingAnchorElem);\n        }\n    };\n\n    const sizeStyle = {\n        height: height || \"\",\n        width: width || \"\"\n    };\n\n    const configNodes = config.nodes.map(node => node.node);\n    const configPlugins = config.plugins.map(plugin => (\n        <Fragment key={plugin.name}>{plugin.element}</Fragment>\n    ));\n\n    const initialConfig = {\n        editorId: useId(),\n        editable: !disabled,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n        theme: {\n            ...editorTheme.current.tokens,\n            // I'm not aware of a better way to pass custom data to nodes.\n            // For now, we're using Lexical's theme to pass colors and typography.\n            $colors: editorTheme.current.colors,\n            $typography: editorTheme.current.typography,\n            $cacheKey: JSON.stringify(editorTheme.current)\n        }\n    };\n\n    if (props.configRef) {\n        props.configRef.current = initialConfig;\n    }\n\n    return (\n        /**\n         * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n         * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n         * and initially, there can be multiple re-renders, while the config object is settled.\n         *\n         * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n         */\n        <SharedHistoryContext>\n            <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n                <RichTextEditorProvider\n                    theme={props.theme}\n                    toolbarActionPlugins={props.toolbarActionPlugins}\n                >\n                    {staticToolbar && !disabled ? staticToolbar : null}\n                    <div data-role={\"overlays\"} className={\"relative\"}></div>\n                    <div\n                        /* This className is necessary for targeting of editor container from CSS files. */\n                        className={\"editor-shell\"}\n                        ref={scrollRef}\n                        style={{\n                            ...styles,\n                            ...sizeStyle,\n                            overflow: \"auto\",\n                            position: \"relative\"\n                        }}\n                    >\n                        {/* State plugins. */}\n                        <StateHandlingPlugin\n                            value={props.value}\n                            onChange={disabled ? undefined : onChange}\n                        />\n                        <ClearEditorPlugin />\n                        <HistoryPlugin externalHistoryState={historyState} />\n                        {/* Event plugins. */}\n                        {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n                        {focus && <AutoFocusPlugin />}\n                        {/* External plugins and components. */}\n                        {configPlugins}\n                        {children}\n                        <RichTextPlugin\n                            contentEditable={\n                                <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n                                    <div className=\"editor\" ref={onRef}>\n                                        <ContentEditable\n                                            disabled={disabled}\n                                            style={{ outline: 0, ...contentEditableStyles }}\n                                        />\n                                    </div>\n                                </div>\n                            }\n                            placeholder={null}\n                            ErrorBoundary={LexicalErrorBoundary}\n                        />\n                        <EditorPlaceholder\n                            text={placeholder || \"Enter text...\"}\n                            styles={placeholderStyles}\n                            fallbackClassName={defaultParagraphClassName}\n                        />\n                        {/* Toolbar. */}\n                        {disabled ? null : floatingAnchorElem && toolbar}\n                    </div>\n                </RichTextEditorProvider>\n            </LexicalComposer>\n        </SharedHistoryContext>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n    return (\n        <LexicalEditorWithConfig>\n            <BaseRichTextEditor {...props} />\n        </LexicalEditorWithConfig>\n    );\n});\n\nexport namespace RichTextEditor {\n    export type InitialConfig = InitialEditorConfig;\n}\n"],"names":["BaseRichTextEditor","onChange","toolbar","staticToolbar","nodes","placeholder","children","onBlur","focus","styles","width","disabled","height","contentEditableStyles","placeholderStyles","props","editorTheme","useRef","config","useLexicalEditorConfig","historyState","useSharedHistoryContext","defaultParagraphClassName","scrollRef","floatingAnchorElem","setFloatingAnchorElem","useState","undefined","onRef","_floatingAnchorElem","sizeStyle","configNodes","node","configPlugins","plugin","Fragment","initialConfig","useId","allNodes","JSON","SharedHistoryContext","LexicalComposer","RichTextEditorProvider","StateHandlingPlugin","ClearEditorPlugin","HistoryPlugin","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","ContentEditable","LexicalErrorBoundary","EditorPlaceholder","RichTextEditor","makeDecoratable","LexicalEditorWithConfig"],"mappings":"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"}

package/components/LexicalEditorConfig/LexicalEditorConfig.d.ts

@@ -1,13 +1,16 @@
 import type { ToolbarElementConfig } from "./components/ToolbarElement.js";
+import { ToolbarElement } from "./components/ToolbarElement.js";
 import type { PluginConfig } from "./components/Plugin.js";
+import { Plugin } from "./components/Plugin.js";
 import type { NodeConfig } from "./components/Node.js";
+import { Node } 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;
+    ToolbarElement: typeof ToolbarElement;
+    Plugin: typeof Plugin;
+    Node: typeof Node;
 };
 export declare const LexicalEditorWithConfig: ({ onProperties, children }: import("@webiny/react-properties").WithConfigProps) => React.JSX.Element;
 interface LexicalEditorConfigData {

package/components/Toolbar/StaticToolbar.css

@@ -3,9 +3,13 @@
   position: relative;
   padding: 4px;
   vertical-align: middle;
-  border: 1px solid #eee;
+  border: 1px solid var(--border-color-neutral-muted);
+  /* No divider between toolbar and body (matches Figma): the body carries the
+     bottom border, the toolbar the top — together one seamless rounded box. */
+  border-bottom: none;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
   will-change: transform;
-  background: #fff;
+  background: var(--color-neutral-base);
   flex-wrap: wrap;
   z-index: 1;
 }
@@ -13,8 +17,10 @@
 .static-toolbar button.popup-item {
   border: 0;
   display: flex;
-  background: #fff;
-  border-radius: 10px;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: var(--radius-md);
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -28,14 +34,11 @@
   margin-right: 2px;
 }
 
-.static-toolbar button.popup-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  margin-top: 2px;
-  vertical-align: -0.25em;
+.static-toolbar button.popup-item .format {
   display: flex;
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .static-toolbar button.popup-item:disabled i.format {
@@ -43,7 +46,7 @@
 }
 
 .static-toolbar button.popup-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
+  background-color: var(--color-primary-subtle);
 }
 
 .static-toolbar button.popup-item.active i {
@@ -51,20 +54,21 @@
 }
 
 .static-toolbar .popup-item:hover:not([disabled]) {
-  background-color: #eee;
+  /* Matches admin-ui ghost IconButton hover (bg-neutral-dark/5). */
+  background-color: color-mix(in oklab, var(--color-neutral-dark) 5%, transparent);
 }
 
 .static-toolbar select.popup-item {
   border: 0;
   display: flex;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: 8px;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 70px;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
 }
 
@@ -79,7 +83,7 @@
   width: 200px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
   width: 70px;
   overflow: hidden;
@@ -89,14 +93,14 @@
 
 .static-toolbar .popup-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   user-select: none;
   line-height: 16px;
   background-size: contain;
 }
 
-.static-toolbar i.chevron-down {
+.static-toolbar .chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -104,7 +108,7 @@
   user-select: none;
 }
 
-.static-toolbar i.chevron-down.inside {
+.static-toolbar .chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -116,30 +120,20 @@
 
 .static-toolbar .divider {
   width: 1px;
-  background-color: #eee;
+  background-color: var(--border-color-neutral-dimmed);
   margin: 0 4px;
 }
 
-.static-toolbar .icon.bullet-list,
-.static-toolbar .icon.bullet {
-  background-image: url("../../images/icons/list-ul.svg");
-}
-
-.static-toolbar .icon.numbered-list,
-.static-toolbar .icon.number {
-  background-image: url("../../images/icons/list-ol.svg");
-}
-
 .static-toolbar .link-editor .button.active,
 .static-toolbar .button.active {
-  background-color: rgb(223, 232, 250);
+  background-color: var(--color-primary-subtle);
 }
 
 .static-toolbar button.toolbar-item {
   border: 0;
   display: flex;
   background: none;
-  border-radius: 10px;
+  border-radius: var(--radius-md);
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -156,14 +150,11 @@
   margin-right: 2px;
 }
 
-.static-toolbar button.toolbar-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  vertical-align: -0.25em;
+.static-toolbar button.toolbar-item .format {
   display: flex;
-  opacity: 0.6;
+  height: 16px;
+  width: 16px;
+  flex-shrink: 0;
 }
 
 .static-toolbar button.toolbar-item:disabled .icon,
@@ -174,7 +165,7 @@
 }
 
 .static-toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
+  background-color: var(--color-primary-subtle);
 }
 
 .static-toolbar button.toolbar-item.active i {
@@ -182,7 +173,8 @@
 }
 
 .static-toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
+  /* Matches admin-ui ghost IconButton hover (bg-neutral-dark/5). */
+  background-color: color-mix(in oklab, var(--color-neutral-dark) 5%, transparent);
 }
 
 .static-toolbar .toolbar-item.font-family .text {
@@ -194,12 +186,20 @@
   width: 150px;
 }
 
+/* Fixed-width label so the trigger doesn't resize as the selected heading changes. */
+.static-toolbar .block-type-dropdown .dropdown-button-text {
+  width: 92px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .static-toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
+  color: var(--text-color-neutral-strong);
   text-overflow: ellipsis;
   overflow: hidden;
   height: 20px;
@@ -209,15 +209,15 @@
 
 .static-toolbar .toolbar-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   user-select: none;
   margin-right: 8px;
   line-height: 16px;
   background-size: contain;
 }
 
-.static-toolbar i.chevron-down {
+.static-toolbar .chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -225,7 +225,7 @@
   user-select: none;
 }
 
-.static-toolbar i.chevron-down.inside {
+.static-toolbar .chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -237,129 +237,28 @@
 
 .static-toolbar .divider {
   width: 1px;
-  background-color: #eee;
+  background-color: var(--border-color-neutral-dimmed);
   margin: 0 4px;
 }
 
-.static-toolbar button.item i {
-  opacity: 0.6;
-}
-
-.static-toolbar button.item.dropdown-item-active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.static-toolbar button.item.dropdown-item-active i {
-  opacity: 1;
-}
-
-i.bold {
-  background-image: url("../../images/icons/type-bold.svg");
-}
-
-i.italic {
-  background-image: url("../../images/icons/type-italic.svg");
-}
-
-i.code {
-  background-image: url("../../images/icons/code.svg");
-}
-
-i.underline {
-  background-image: url("../../images/icons/type-underline.svg");
-}
-
-i.strikethrough {
-  background-image: url("../../images/icons/type-strikethrough.svg");
-}
-
-i.link {
-  background-image: url("../../images/icons/link.svg");
-}
-
-i.quote {
-  background-image: url("../../images/icons/chat-square-quote.svg");
-}
-
-.icon.left-align,
-i.left-align {
-  background-image: url("../../images/icons/text-left.svg");
-}
-
-i.center-align {
-  background-image: url("../../images/icons/text-center.svg");
-}
-
-i.right-align {
-  background-image: url("../../images/icons/text-right.svg");
-}
-
-i.indent {
-  background-image: url("../../images/icons/indent.svg");
-}
-
-i.outdent {
-  background-image: url("../../images/icons/outdent.svg");
-}
-
-i.justify-align {
-  background-image: url("../../images/icons/justify.svg");
-}
-
-i.chevron-down {
-  background-color: transparent;
-  background-size: contain;
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  background-image: url("../../images/icons/chevron-down.svg");
-}
-
-i.insert-image,
-.icon.insert-image {
-  background-color: transparent;
-  background-size: contain;
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  background-image: url("../../images/icons/insert-image.svg");
-}
-
-.icon.bullet-list,
-.icon.bullet {
-  background-image: url("../../images/icons/list-ul.svg");
-}
-
-.icon.numbered-list,
-.icon.number {
-  background-image: url("../../images/icons/list-ol.svg");
-}
-
-i.font-color,
-.icon.font-color {
-  background-image: url("../../images/icons/font-color.svg");
-}
-
 .link-editor .button.active,
 .toolbar .button.active {
-  background-color: rgb(223, 232, 250);
+  background-color: var(--color-primary-subtle);
 }
 
 .toolbar .divider {
   width: 1px;
-  background-color: #eee;
+  background-color: var(--border-color-neutral-dimmed);
   margin: 0 4px;
 }
 
 .lexical-dropdown {
+  /* Matches admin-ui DropdownMenu: border-defined (no heavy shadow), rounded-md. */
   display: block;
-  box-shadow:
-    0 12px 28px 0 rgba(0, 0, 0, 0.2),
-    0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-  border-radius: 8px;
-  min-height: 40px;
-  background-color: #fff;
+  border: 1px solid var(--border-color-neutral-muted);
+  border-radius: var(--radius-md);
+  background-color: var(--color-neutral-base);
+  color: var(--text-color-neutral-primary);
   max-height: 250px;
   overflow: hidden;
   overflow-y: auto;
@@ -373,21 +272,20 @@ i.font-color,
 
 .lexical-dropdown .item {
   margin: 0 8px 0 8px;
-  padding: 8px;
-  color: #050505;
+  padding: var(--padding-xs-plus) var(--padding-sm);
   cursor: pointer;
-  line-height: 16px;
-  font-size: 15px;
+  line-height: 20px;
+  font-size: 14px;
   display: flex;
-  align-content: center;
+  align-items: center;
   flex-direction: row;
   flex-shrink: 0;
-  justify-content: space-between;
-  background-color: #fff;
-  border-radius: 8px;
+  gap: var(--spacing-sm);
+  background-color: transparent;
+  color: var(--text-color-neutral-primary);
+  border-radius: var(--radius-sm);
   border: 0;
   max-width: 250px;
-  min-width: 100px;
 }
 
 .lexical-dropdown .item.fontsize-item,
@@ -395,11 +293,13 @@ i.font-color,
   min-width: unset;
 }
 
-.lexical-dropdown .item .active {
+/* Selected-item check indicator (admin-ui style): a check, no background tint. */
+.lexical-dropdown .item-check {
   display: flex;
-  width: 20px;
-  height: 20px;
-  background-size: contain;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  fill: var(--fill-neutral-xstrong);
 }
 
 .lexical-dropdown .item:first-child {
@@ -411,31 +311,27 @@ i.font-color,
 }
 
 .lexical-dropdown .item:hover {
-  background-color: #eee;
+  background-color: var(--color-neutral-dimmed);
 }
 
 .lexical-dropdown .item .text {
   display: flex;
   line-height: 20px;
   flex-grow: 1;
-  min-width: 150px;
 }
 
 .lexical-dropdown .item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
   user-select: none;
-  margin-right: 12px;
-  line-height: 16px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
+  fill: var(--fill-neutral-xstrong);
 }
 
 .lexical-dropdown .divider {
   width: auto;
-  background-color: #eee;
+  background-color: var(--border-color-neutral-dimmed);
   margin: 4px 8px;
   height: 1px;
 }
@@ -452,18 +348,6 @@ i.font-color,
   }
 }
 
-button.item i {
-  opacity: 0.6;
-}
-
-button.item.dropdown-item-active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-button.item.dropdown-item-active i {
-  opacity: 1;
-}
-
 .editor-shell span.editor-image {
   cursor: default;
   display: inline-block;
@@ -660,3 +544,23 @@ button.item.dropdown-item-active i {
   color: #000;
   overflow: hidden;
 }
+
+/*
+ * Toolbar icons are inline SVGs from @webiny/icons (Material Symbols), replacing the
+ * legacy background-image glyphs. Sizing is handled per-button above; color via `fill`.
+ */
+.static-toolbar .format,
+.static-toolbar .icon,
+.lexical-dropdown .item .icon {
+  fill: var(--fill-neutral-xstrong);
+}
+
+.static-toolbar .chevron-down {
+  fill: var(--fill-neutral-strong);
+}
+
+.static-toolbar button:disabled .format,
+.static-toolbar button:disabled .icon,
+.static-toolbar button:disabled .chevron-down {
+  fill: var(--fill-neutral-disabled);
+}