@astryxdesign/richtext 0.6.0-canary.f574abd → 0.6.1-canary.09decfb

package/dist/RichTextEditor.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file RichTextEditor.tsx
- * @input Uses React, useId, Lexical (lexical + @lexical/react), Field,
- *   VisuallyHidden, useInputStatusIcon, mergeProps, design tokens
+ * @input Uses React, useId, Lexical (lexical + @lexical/react, composed through
+ *   LexicalExtensionComposer), Field, VisuallyHidden, useInputStatusIcon,
+ *   mergeProps, design tokens
  * @output Exports an accessibly labelled RichTextEditor component with a flush
  *   top toolbar slot and configurable editable-surface minimum height, RichTextEditorProps,
  *   RichTextEditorStatus, RichTextEditorStatusType, RichTextEditorSize

package/dist/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../src/RichTextEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../src/RichTextEditor.tsx"],"names":[],"mappings":"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"}

package/dist/RichTextEditor.js

@@ -4,8 +4,9 @@
 
 /**
  * @file RichTextEditor.tsx
- * @input Uses React, useId, Lexical (lexical + @lexical/react), Field,
- *   VisuallyHidden, useInputStatusIcon, mergeProps, design tokens
+ * @input Uses React, useId, Lexical (lexical + @lexical/react, composed through
+ *   LexicalExtensionComposer), Field, VisuallyHidden, useInputStatusIcon,
+ *   mergeProps, design tokens
  * @output Exports an accessibly labelled RichTextEditor component with a flush
  *   top toolbar slot and configurable editable-surface minimum height, RichTextEditorProps,
  *   RichTextEditorStatus, RichTextEditorStatusType, RichTextEditorSize
@@ -34,7 +35,7 @@ import { useInputStatusIcon } from '@astryxdesign/core/hooks';
 import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { mergeProps, themeProps } from '@astryxdesign/core/utils';
 import { useSize } from '@astryxdesign/core/SizeContext';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -48,7 +49,7 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { TRANSFORMERS, $convertToMarkdownString } from '@lexical/markdown';
 import { $generateHtmlFromNodes } from '@lexical/html';
 import { DEFAULT_NODES } from "./editorNodes.js";
-import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, mergeRegister } from 'lexical';
+import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, defineExtension, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, mergeRegister } from 'lexical';
 
 /**
  * Serialized state for an empty editor: a root containing a single empty
@@ -248,17 +249,36 @@ export const RichTextEditor = /*#__PURE__*/forwardRef(function RichTextEditor({
   // array each time; memoize on the prop identity instead. (React Compiler
   // isn't running the transform in this repo, so this isn't auto-memoized.)
   const markdownTransformers = useMemo(() => [...transformers], [transformers]);
-  const initialConfig = {
-    namespace,
-    theme: themeRef.current,
-    editable,
-    editorState: defaultValue ?? undefined,
-    nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
-    onError(error) {
-      // Surface errors to the host app rather than swallowing them.
-      throw error;
-    }
-  };
+
+  // The extension replaces LexicalComposer's `initialConfig`: it carries the
+  // same editor configuration (namespace, theme, nodes, editability, initial
+  // state) in the shape LexicalBuilder consumes.
+  //
+  // LexicalExtensionComposer re-creates the editor whenever the extension's
+  // identity changes, whereas LexicalComposer read `initialConfig` exactly once
+  // on mount. Build it on first render and keep it, so the editor's lifetime —
+  // and the content it holds — is unaffected by later renders (a consumer
+  // passing an inline `nodes={[...]}` array would otherwise blow away the
+  // editor's content on every render).
+  const extensionRef = useRef(null);
+  if (extensionRef.current === null) {
+    extensionRef.current = defineExtension({
+      name: '@astryxdesign/richtext/RichTextEditor',
+      namespace,
+      theme: themeRef.current,
+      editable,
+      nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
+      // `undefined` (not `null`) leaves Lexical's default initializer in place,
+      // which seeds the empty document with one paragraph — what
+      // LexicalComposer did when no `editorState` was given. `null` would mean
+      // "start from a genuinely empty root".
+      $initialEditorState: defaultValue ?? undefined,
+      onError(error) {
+        // Surface errors to the host app rather than swallowing them.
+        throw error;
+      }
+    });
+  }
   const hasTabEscapeHint = editable && tabEscapeHint !== '';
   const hasToolbar = toolbar != null && typeof toolbar !== 'boolean';
   const {
@@ -295,8 +315,9 @@ export const RichTextEditor = /*#__PURE__*/forwardRef(function RichTextEditor({
         size,
         status: status?.type ?? null
       }), stylex.props(inputWrapperStyles.base, styles.wrapper, (isDisabled || isReadOnly) && inputWrapperStyles.disabled, isDisabled && styles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && !isReadOnly && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
-      children: [/*#__PURE__*/_jsxs(LexicalComposer, {
-        initialConfig: initialConfig,
+      children: [/*#__PURE__*/_jsxs(LexicalExtensionComposer, {
+        extension: extensionRef.current,
+        contentEditable: null,
         children: [hasToolbar ? toolbar : null, /*#__PURE__*/_jsxs("div", {
           ...stylex.props(styles.editorBody, hasToolbar && styles.editorBodyWithToolbar, !!statusIcon && styles.editorBodyWithStatus, editorBodySizeStyles[size]),
           children: [/*#__PURE__*/_jsxs("div", {

package/dist/RichTextView.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file RichTextView.tsx
- * @input Uses React, Lexical (lexical + @lexical/react), design tokens
+ * @input Uses React, Lexical (lexical + @lexical/react, composed through
+ *   LexicalExtensionComposer), design tokens
  * @output Exports RichTextView component and RichTextViewProps
  * @position Read-only renderer for serialized Lexical editor state; experimental
  *   (richtext), exported from @astryxdesign/richtext

package/dist/RichTextView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextView.d.ts","sourceRoot":"","sources":["../src/RichTextView.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAA8B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGlE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAclD,OAAO,KAAK,EAAC,KAAK,EAAE,WAAW,EAAqB,MAAM,SAAS,CAAC;AAmBpE,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AA2CD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,OAAO,EACP,SAAyB,EACzB,YAAY,EACZ,aAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAyEnB;yBApFe,YAAY"}
+{"version":3,"file":"RichTextView.d.ts","sourceRoot":"","sources":["../src/RichTextView.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAA8B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGlE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAWlD,OAAO,KAAK,EAEV,KAAK,EACL,WAAW,EAEZ,MAAM,SAAS,CAAC;AAoBjB,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAC1C;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAyCD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,OAAO,EACP,SAAyB,EACzB,YAAY,EACZ,aAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAyFnB;yBApGe,YAAY"}

package/dist/RichTextView.js

@@ -4,7 +4,8 @@
 
 /**
  * @file RichTextView.tsx
- * @input Uses React, Lexical (lexical + @lexical/react), design tokens
+ * @input Uses React, Lexical (lexical + @lexical/react, composed through
+ *   LexicalExtensionComposer), design tokens
  * @output Exports RichTextView component and RichTextViewProps
  * @position Read-only renderer for serialized Lexical editor state; experimental
  *   (richtext), exported from @astryxdesign/richtext
@@ -17,7 +18,7 @@
 import { useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { sharedEditorTheme } from "./editorTheme.js";
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -26,6 +27,7 @@ import { ListNode, ListItemNode } from '@lexical/list';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { LinkNode, AutoLinkNode } from '@lexical/link';
 import { CodeNode, CodeHighlightNode } from '@lexical/code';
+import { defineExtension } from 'lexical';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   root: {
@@ -37,30 +39,28 @@ const DEFAULT_NODES = [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode,
 /**
  * Keeps the rendered content in sync with the `value` prop after mount.
  *
- * `LexicalComposer`'s `initialConfig.editorState` is only read once on mount, so
- * a plain `<RichTextView value={changingValue} />` would freeze at its first
+ * The editor's initial state is seeded once, when the composer mounts, so a
+ * plain `<RichTextView value={changingValue} />` would freeze at its first
  * value — the content would never update when `value` changed. This plugin runs
  * inside the composer context and re-applies `value` whenever it changes, so the
  * read-only view stays reactive (e.g. previewing content edited elsewhere).
  *
- * The initial `value` is already applied via `initialConfig.editorState`, so we
- * skip the first run to avoid a redundant re-parse on mount.
+ * The initial `value` is already applied via the extension's
+ * `$initialEditorState`, so we skip the first run to avoid a redundant re-parse
+ * on mount.
  *
  * This mirrors the canonical Lexical pattern for applying externally-sourced
  * serialized state after mount: the Lexical Playground's ActionsPlugin does the
  * same `editor.setEditorState(editor.parseEditorState(...))` from inside a
  * plugin (see facebook/lexical
  * packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx). It is
- * necessary because `LexicalComposer` builds the editor in a `useMemo(..., [])`
- * and reads `initialConfig.editorState` exactly once on init
- * (packages/lexical-react/src/LexicalComposer.tsx), so a changed prop cannot
- * re-seed the editor on its own. A read-only view has no history, so we skip the
- * Playground's accompanying CLEAR_HISTORY_COMMAND.
+ * necessary because the composer builds the editor once and reads the initial
+ * state exactly once at that point, so a changed prop cannot re-seed the editor
+ * on its own. A read-only view has no history, so we skip the Playground's
+ * accompanying CLEAR_HISTORY_COMMAND.
  *
  * `parseEditorState` / `setEditorState` are methods on the editor instance, so
- * this avoids a top-level `lexical` *value* import (which would force the
- * sandbox's Next build to transpile lexical's raw `src/*.ts` and fail — see the
- * matching note in RichTextEditor.tsx).
+ * this plugin needs no module-level Lexical imports of its own.
  */
 function SyncValuePlugin({
   value
@@ -103,6 +103,12 @@ export function RichTextView({
   if (themeRef.current === null) {
     themeRef.current = sharedEditorTheme();
   }
+
+  // Built on first render (and again after an error, below) rather than per
+  // render: LexicalExtensionComposer re-creates the editor whenever the
+  // extension's identity changes, and `value` updates are applied in place by
+  // SyncValuePlugin instead.
+  const extensionRef = useRef(null);
   const [hasError, setHasError] = useState(false);
 
   // Reset the error state when the value changes so a corrected value recovers.
@@ -119,8 +125,9 @@ export function RichTextView({
   };
 
   // Validate `value` parses as JSON before handing it to Lexical. Malformed
-  // JSON would otherwise throw synchronously during LexicalComposer init and
-  // escape any error boundary, taking down the host on the render path.
+  // JSON would otherwise throw synchronously while the composer builds the
+  // editor and escape any error boundary, taking down the host on the render
+  // path.
   if (!hasError) {
     try {
       JSON.parse(value);
@@ -129,6 +136,10 @@ export function RichTextView({
     }
   }
   if (hasError) {
+    // The composer subtree is unmounted while the fallback renders. Drop the
+    // extension so that recovering from the error builds a fresh one, seeded
+    // with the corrected `value`.
+    extensionRef.current = null;
     return /*#__PURE__*/_jsx("div", {
       ...stylex.props(styles.root, xstyle),
       className: className,
@@ -137,23 +148,27 @@ export function RichTextView({
       children: errorFallback
     });
   }
-  const initialConfig = {
-    namespace,
-    theme: themeRef.current,
-    editable: false,
-    editorState: value,
-    nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
-    // A read-only view renders persisted content; a bad node/schema should not
-    // crash the host. Surface it via onParseError + fallback instead of re-throwing.
-    onError: handleError
-  };
+  if (extensionRef.current === null) {
+    extensionRef.current = defineExtension({
+      name: '@astryxdesign/richtext/RichTextView',
+      namespace,
+      theme: themeRef.current,
+      editable: false,
+      nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
+      $initialEditorState: value,
+      // A read-only view renders persisted content; a bad node/schema should not
+      // crash the host. Surface it via onParseError + fallback instead of re-throwing.
+      onError: handleError
+    });
+  }
   return /*#__PURE__*/_jsx("div", {
     ...stylex.props(styles.root, xstyle),
     className: className,
     style: style,
     ...rest,
-    children: /*#__PURE__*/_jsxs(LexicalComposer, {
-      initialConfig: initialConfig,
+    children: /*#__PURE__*/_jsxs(LexicalExtensionComposer, {
+      extension: extensionRef.current,
+      contentEditable: null,
       children: [/*#__PURE__*/_jsx(SyncValuePlugin, {
         value: value
       }), /*#__PURE__*/_jsx(RichTextPlugin, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryxdesign/richtext",
   "displayName": "Rich Text",
-  "version": "0.6.0-canary.f574abd",
+  "version": "0.6.1-canary.09decfb",
   "description": "Astryx rich text — a Lexical-based rich text editor and viewer. Published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -50,7 +50,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.6.0-canary.f574abd",
+    "@astryxdesign/core": "0.6.1-canary.09decfb",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.46.0",
@@ -101,7 +101,11 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.6.0-canary.f574abd",
+    "@astryxdesign/cli": "0.6.1-canary.09decfb",
+    "@babel/cli": "^7.29.7",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
     "@lexical/code": "^0.46.0",
     "@lexical/headless": "^0.46.0",
     "@lexical/html": "^0.46.0",
@@ -112,6 +116,8 @@
     "@lexical/rich-text": "^0.46.0",
     "@lexical/selection": "^0.46.0",
     "@lexical/utils": "^0.46.0",
+    "@stylexjs/babel-plugin": "^0.19.0",
+    "@testing-library/react": "^16.3.2",
     "lexical": "^0.46.0"
   },
   "scripts": {

package/src/RichTextEditor.tsx

@@ -4,8 +4,9 @@
 
 /**
  * @file RichTextEditor.tsx
- * @input Uses React, useId, Lexical (lexical + @lexical/react), Field,
- *   VisuallyHidden, useInputStatusIcon, mergeProps, design tokens
+ * @input Uses React, useId, Lexical (lexical + @lexical/react, composed through
+ *   LexicalExtensionComposer), Field, VisuallyHidden, useInputStatusIcon,
+ *   mergeProps, design tokens
  * @output Exports an accessibly labelled RichTextEditor component with a flush
  *   top toolbar slot and configurable editable-surface minimum height, RichTextEditorProps,
  *   RichTextEditorStatus, RichTextEditorStatusType, RichTextEditorSize
@@ -58,10 +59,7 @@ import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
 import {mergeProps, themeProps, type SizeValue} from '@astryxdesign/core/utils';
 import {useSize} from '@astryxdesign/core/SizeContext';
 
-import {
-  LexicalComposer,
-  type InitialConfigType,
-} from '@lexical/react/LexicalComposer';
+import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
@@ -83,10 +81,12 @@ import {DEFAULT_NODES} from './editorNodes';
 import {
   BLUR_COMMAND,
   COMMAND_PRIORITY_LOW,
+  defineExtension,
   KEY_DOWN_COMMAND,
   KEY_ESCAPE_COMMAND,
   KEY_TAB_COMMAND,
   mergeRegister,
+  type AnyLexicalExtension,
   type EditorState,
   type Klass,
   type LexicalEditor,
@@ -526,17 +526,35 @@ export const RichTextEditor = forwardRef<
   // isn't running the transform in this repo, so this isn't auto-memoized.)
   const markdownTransformers = useMemo(() => [...transformers], [transformers]);
 
-  const initialConfig: InitialConfigType = {
-    namespace,
-    theme: themeRef.current,
-    editable,
-    editorState: defaultValue ?? undefined,
-    nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
-    onError(error: Error) {
-      // Surface errors to the host app rather than swallowing them.
-      throw error;
-    },
-  };
+  // The extension replaces LexicalComposer's `initialConfig`: it carries the
+  // same editor configuration (namespace, theme, nodes, editability, initial
+  // state) in the shape LexicalBuilder consumes.
+  //
+  // LexicalExtensionComposer re-creates the editor whenever the extension's
+  // identity changes, whereas LexicalComposer read `initialConfig` exactly once
+  // on mount. Build it on first render and keep it, so the editor's lifetime —
+  // and the content it holds — is unaffected by later renders (a consumer
+  // passing an inline `nodes={[...]}` array would otherwise blow away the
+  // editor's content on every render).
+  const extensionRef = useRef<AnyLexicalExtension | null>(null);
+  if (extensionRef.current === null) {
+    extensionRef.current = defineExtension({
+      name: '@astryxdesign/richtext/RichTextEditor',
+      namespace,
+      theme: themeRef.current,
+      editable,
+      nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
+      // `undefined` (not `null`) leaves Lexical's default initializer in place,
+      // which seeds the empty document with one paragraph — what
+      // LexicalComposer did when no `editorState` was given. `null` would mean
+      // "start from a genuinely empty root".
+      $initialEditorState: defaultValue ?? undefined,
+      onError(error: Error) {
+        // Surface errors to the host app rather than swallowing them.
+        throw error;
+      },
+    });
+  }
 
   const hasTabEscapeHint = editable && tabEscapeHint !== '';
   const hasToolbar = toolbar != null && typeof toolbar !== 'boolean';
@@ -606,7 +624,9 @@ export const RichTextEditor = forwardRef<
           className,
           style,
         )}>
-        <LexicalComposer initialConfig={initialConfig}>
+        <LexicalExtensionComposer
+          extension={extensionRef.current}
+          contentEditable={null}>
           {hasToolbar ? toolbar : null}
           <div
             {...stylex.props(
@@ -664,7 +684,7 @@ export const RichTextEditor = forwardRef<
               <div {...stylex.props(styles.statusIcon)}>{statusIcon}</div>
             )}
           </div>
-        </LexicalComposer>
+        </LexicalExtensionComposer>
         {hasTabEscapeHint && (
           <VisuallyHidden id={tabEscapeHintID}>{tabEscapeHint}</VisuallyHidden>
         )}

package/src/RichTextView.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file RichTextView.tsx
- * @input Uses React, Lexical (lexical + @lexical/react), design tokens
+ * @input Uses React, Lexical (lexical + @lexical/react, composed through
+ *   LexicalExtensionComposer), design tokens
  * @output Exports RichTextView component and RichTextViewProps
  * @position Read-only renderer for serialized Lexical editor state; experimental
  *   (richtext), exported from @astryxdesign/richtext
@@ -20,10 +21,7 @@ import * as stylex from '@stylexjs/stylex';
 import {sharedEditorTheme} from './editorTheme';
 import type {BaseProps} from '@astryxdesign/core';
 
-import {
-  LexicalComposer,
-  type InitialConfigType,
-} from '@lexical/react/LexicalComposer';
+import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
@@ -32,7 +30,13 @@ import {ListNode, ListItemNode} from '@lexical/list';
 import {HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {LinkNode, AutoLinkNode} from '@lexical/link';
 import {CodeNode, CodeHighlightNode} from '@lexical/code';
-import type {Klass, LexicalNode, EditorThemeClasses} from 'lexical';
+import type {
+  AnyLexicalExtension,
+  Klass,
+  LexicalNode,
+  EditorThemeClasses,
+} from 'lexical';
+import {defineExtension} from 'lexical';
 
 const styles = stylex.create({
   root: {
@@ -89,30 +93,28 @@ export interface RichTextViewProps extends BaseProps {
 /**
  * Keeps the rendered content in sync with the `value` prop after mount.
  *
- * `LexicalComposer`'s `initialConfig.editorState` is only read once on mount, so
- * a plain `<RichTextView value={changingValue} />` would freeze at its first
+ * The editor's initial state is seeded once, when the composer mounts, so a
+ * plain `<RichTextView value={changingValue} />` would freeze at its first
  * value — the content would never update when `value` changed. This plugin runs
  * inside the composer context and re-applies `value` whenever it changes, so the
  * read-only view stays reactive (e.g. previewing content edited elsewhere).
  *
- * The initial `value` is already applied via `initialConfig.editorState`, so we
- * skip the first run to avoid a redundant re-parse on mount.
+ * The initial `value` is already applied via the extension's
+ * `$initialEditorState`, so we skip the first run to avoid a redundant re-parse
+ * on mount.
  *
  * This mirrors the canonical Lexical pattern for applying externally-sourced
  * serialized state after mount: the Lexical Playground's ActionsPlugin does the
  * same `editor.setEditorState(editor.parseEditorState(...))` from inside a
  * plugin (see facebook/lexical
  * packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx). It is
- * necessary because `LexicalComposer` builds the editor in a `useMemo(..., [])`
- * and reads `initialConfig.editorState` exactly once on init
- * (packages/lexical-react/src/LexicalComposer.tsx), so a changed prop cannot
- * re-seed the editor on its own. A read-only view has no history, so we skip the
- * Playground's accompanying CLEAR_HISTORY_COMMAND.
+ * necessary because the composer builds the editor once and reads the initial
+ * state exactly once at that point, so a changed prop cannot re-seed the editor
+ * on its own. A read-only view has no history, so we skip the Playground's
+ * accompanying CLEAR_HISTORY_COMMAND.
  *
  * `parseEditorState` / `setEditorState` are methods on the editor instance, so
- * this avoids a top-level `lexical` *value* import (which would force the
- * sandbox's Next build to transpile lexical's raw `src/*.ts` and fail — see the
- * matching note in RichTextEditor.tsx).
+ * this plugin needs no module-level Lexical imports of its own.
  */
 function SyncValuePlugin({value}: {value: string}): null {
   const [editor] = useLexicalComposerContext();
@@ -154,6 +156,12 @@ export function RichTextView({
     themeRef.current = sharedEditorTheme();
   }
 
+  // Built on first render (and again after an error, below) rather than per
+  // render: LexicalExtensionComposer re-creates the editor whenever the
+  // extension's identity changes, and `value` updates are applied in place by
+  // SyncValuePlugin instead.
+  const extensionRef = useRef<AnyLexicalExtension | null>(null);
+
   const [hasError, setHasError] = useState(false);
 
   // Reset the error state when the value changes so a corrected value recovers.
@@ -171,8 +179,9 @@ export function RichTextView({
   };
 
   // Validate `value` parses as JSON before handing it to Lexical. Malformed
-  // JSON would otherwise throw synchronously during LexicalComposer init and
-  // escape any error boundary, taking down the host on the render path.
+  // JSON would otherwise throw synchronously while the composer builds the
+  // editor and escape any error boundary, taking down the host on the render
+  // path.
   if (!hasError) {
     try {
       JSON.parse(value);
@@ -182,6 +191,10 @@ export function RichTextView({
   }
 
   if (hasError) {
+    // The composer subtree is unmounted while the fallback renders. Drop the
+    // extension so that recovering from the error builds a fresh one, seeded
+    // with the corrected `value`.
+    extensionRef.current = null;
     return (
       <div
         {...stylex.props(styles.root, xstyle)}
@@ -193,16 +206,19 @@ export function RichTextView({
     );
   }
 
-  const initialConfig: InitialConfigType = {
-    namespace,
-    theme: themeRef.current,
-    editable: false,
-    editorState: value,
-    nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
-    // A read-only view renders persisted content; a bad node/schema should not
-    // crash the host. Surface it via onParseError + fallback instead of re-throwing.
-    onError: handleError,
-  };
+  if (extensionRef.current === null) {
+    extensionRef.current = defineExtension({
+      name: '@astryxdesign/richtext/RichTextView',
+      namespace,
+      theme: themeRef.current,
+      editable: false,
+      nodes: nodes ? [...DEFAULT_NODES, ...nodes] : [...DEFAULT_NODES],
+      $initialEditorState: value,
+      // A read-only view renders persisted content; a bad node/schema should not
+      // crash the host. Surface it via onParseError + fallback instead of re-throwing.
+      onError: handleError,
+    });
+  }
 
   return (
     <div
@@ -210,7 +226,9 @@ export function RichTextView({
       className={className}
       style={style}
       {...rest}>
-      <LexicalComposer initialConfig={initialConfig}>
+      <LexicalExtensionComposer
+        extension={extensionRef.current}
+        contentEditable={null}>
         <SyncValuePlugin value={value} />
         <RichTextPlugin
           contentEditable={<ContentEditable />}
@@ -218,7 +236,7 @@ export function RichTextView({
           ErrorBoundary={LexicalErrorBoundary}
         />
         {plugins}
-      </LexicalComposer>
+      </LexicalExtensionComposer>
     </div>
   );
 }