@octane-xplat/lexical 0.10.0 → 0.11.1

package/dist/native/index3.js

@@ -2,7 +2,7 @@ import { ensureJSONBridge, htmlToJSON, jsonBridgeReady, jsonToHTML } from "./ind
 import { defineUniversalComponent, hookSlots, universalComponent, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef, useState } from "@nativescript-community/octane";
 import { RichTextEditor, supported } from "@octane-xplat/richtext";
 //#region src/LexicalEditor.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(8);
+var _hs$ = /* @__PURE__ */ hookSlots(9);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
@@ -11,6 +11,7 @@ var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
 var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
 var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
 var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "slot",
 	"slot": 0
@@ -20,20 +21,32 @@ var LexicalEditor = defineUniversalComponent("nativescript", function LexicalEdi
 	const inner = useRef(null, _h$0);
 	const [exposedHandle, setHandle] = useState(null, _h$1);
 	useImperativeHandle(props.ref, () => exposedHandle, [exposedHandle], _h$2);
-	const jsonReady = useRef(false, _h$3);
-	const lastJSON = useRef(void 0, _h$4);
+	const lastJSON = useRef(void 0, _h$3);
+	const appliedHost = useRef(null, _h$4);
+	const desiredDoc = useRef(void 0, _h$5);
+	const applyDoc = () => {
+		const host = inner.current;
+		const doc = desiredDoc.current;
+		if (!host || doc === void 0 || !jsonBridgeReady()) return;
+		const stamp = JSON.stringify(doc);
+		if (stamp === lastJSON.current && appliedHost.current === host) return;
+		const html = jsonToHTML(doc);
+		if (html != null) {
+			lastJSON.current = stamp;
+			appliedHost.current = host;
+			host.setHTML(html);
+		}
+	};
 	const bindHost = useCallback((h) => {
 		inner.current = h;
+		if (h) queueMicrotask(applyDoc);
 		setHandle((previous) => previous?.native === h?.native ? previous : h ? {
 			getHTML: () => h.getHTML(),
 			setHTML: (html) => h.setHTML(html),
 			getJSON: () => jsonBridgeReady() ? htmlToJSON(h.getHTML()) : null,
 			setJSON: (doc) => {
-				const html = jsonBridgeReady() ? jsonToHTML(doc) : null;
-				if (html != null) {
-					lastJSON.current = JSON.stringify(doc);
-					h.setHTML(html);
-				}
+				desiredDoc.current = doc;
+				applyDoc();
 			},
 			apply: (format) => h.apply(format),
 			linkTo: (url, anchor) => h.linkTo(url, anchor),
@@ -46,28 +59,29 @@ var LexicalEditor = defineUniversalComponent("nativescript", function LexicalEdi
 			isFocused: () => h.isFocused(),
 			native: h.native
 		} : null);
-	}, [], _h$5);
+	}, [], _h$6);
 	useEffect(() => {
+		let alive = true;
 		ensureJSONBridge().then((ok) => {
-			jsonReady.current = ok;
+			if (!alive) return;
 			props.onJSONReady?.(ok);
+			applyDoc();
 		});
-	}, [], _h$6);
+		return () => {
+			alive = false;
+		};
+	}, [], _h$7);
 	useEffect(() => {
-		if (!props.json || !jsonBridgeReady() || !inner.current) return;
-		const stamp = JSON.stringify(props.json);
-		if (stamp === lastJSON.current) return;
-		const html = jsonToHTML(props.json);
-		if (html != null) {
-			lastJSON.current = stamp;
-			inner.current.setHTML(html);
-		}
-	}, [props.json], _h$7);
+		if (!props.json) return;
+		desiredDoc.current = props.json;
+		applyDoc();
+	}, [props.json], _h$8);
 	const emitJSON = () => {
 		if (!inner.current || !jsonBridgeReady()) return;
 		const doc = htmlToJSON(inner.current.getHTML());
 		if (doc) {
 			lastJSON.current = JSON.stringify(doc);
+			appliedHost.current = inner.current;
 			props.onJSONChange?.(doc);
 		}
 	};
@@ -110,7 +124,10 @@ var LexicalEditor = defineUniversalComponent("nativescript", function LexicalEdi
 		[
 			"set",
 			"onReady",
-			props.onReady
+			() => {
+				applyDoc();
+				props.onReady?.();
+			}
 		],
 		[
 			"set",

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "5ca3a356-fe4b-4bf2-8331-5e237e22a4e8",
+  "buildId": "b62e9178-ae49-4f7a-9ff4-4837828c5c66",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/index2.js

@@ -1,4 +1,4 @@
-import { __s, bag10, bag3, child, clone, componentSlot, createScopedElement, createScopedValue, drainFrag, hookSlots, markChildrenBlock, setStyle, sibling, template, useEffect, useImperativeHandle, useRef, useState } from "octane";
+import { Fragment, __s, bag10, bag3, child, clone, componentSlot, createScopedElement, createScopedValue, drainFrag, hookSlots, markChildrenBlock, positionalChildren, setStyle, sibling, template, useEffect, useImperativeHandle, useRef, useState } from "octane";
 import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings } from "octane/internal/client";
 import { AutoFocusPlugin, ContentEditable, EditorRefPlugin, HistoryPlugin, LexicalComposer, LexicalErrorBoundary, LinkPlugin, ListPlugin, OnChangePlugin, RichTextPlugin } from "@octanejs/lexical";
 import { $createParagraphNode, $createTextNode, $findMatchingParent, $getRoot, $getSelection, $isNodeSelection, $isRangeSelection, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, REDO_COMMAND, UNDO_COMMAND } from "lexical";
@@ -11,7 +11,7 @@ import { $setBlocksType } from "@lexical/selection";
 import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
 //#region src/LexicalEditor.web.tsrx
 enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<!><!><!><!><!><!><!>", 3, 1);
+var _t$0 = /* @__PURE__ */ template("<!><!><!><!><!>", 3, 1);
 var _t$1 = /* @__PURE__ */ template("<div></div>");
 var _hs$ = /* @__PURE__ */ hookSlots(11);
 var __childrenBody = {};
@@ -177,7 +177,7 @@ var LexicalEditor = /* @__PURE__ */ __s(function LexicalEditor(props, __s, __ext
 	useImperativeHandle(props.ref, () => exposedHandle, [exposedHandle], _hs$ + 7);
 	const initialConfig = {
 		namespace: "octane-xplat/lexical",
-		nodes: NODES,
+		nodes: props.web?.replaceNodes ? props.web.nodes ?? [] : [.../* @__PURE__ */ new Set([...NODES, ...props.web?.nodes ?? []])],
 		editable: props.editable !== false,
 		editorState: props.json != null ? JSON.stringify(props.json) : props.value != null ? (editor) => {
 			const dom = new DOMParser().parseFromString(props.value, "text/html");
@@ -226,6 +226,7 @@ var LexicalEditor = /* @__PURE__ */ __s(function LexicalEditor(props, __s, __ext
 			native: editor
 		};
 		setHandle(bound.current);
+		props.onJSONReady?.(true);
 		props.onReady?.();
 	};
 	useEffect(() => {
@@ -270,11 +271,12 @@ var LexicalEditor = /* @__PURE__ */ __s(function LexicalEditor(props, __s, __ext
 			}
 		});
 	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	function __children$1(__props, __s, __extra) {
 		const __block = __s.block;
 		let _b = __s.slots[0];
 		if (_b === void 0) {
-			let _m0, _m1, _m2, _m3, _m4, _m5, _m8, _m9;
+			let _m0, _m1, _m2, _m5, _m6, _m7;
 			const _root = clone(_t$0);
 			_m0 = __block.parentNode;
 			const _el0 = child(_root);
@@ -282,24 +284,22 @@ var LexicalEditor = /* @__PURE__ */ __s(function LexicalEditor(props, __s, __ext
 			const _el1 = sibling(_el0, 1);
 			_m2 = _el1;
 			const _el2 = sibling(_el1, 1);
-			_m3 = _el2;
+			_m5 = _el2;
 			const _el3 = sibling(_el2, 1);
-			_m4 = _el3;
-			const _el4 = sibling(_el3, 1);
-			_m5 = _el4;
-			const _el5 = sibling(_el4, 1);
-			_m8 = _el5;
-			_m9 = sibling(_el5, 1);
+			_m6 = _el3;
+			_m7 = sibling(_el3, 1);
 			drainFrag(_root, __block.parentNode, __block.endMarker);
-			_b = bag10(__s, null, _m0, _m1, _m2, _m3, _m4, _m5, null, void 0, _m8, _m9);
+			_b = bag10(__s, null, _m0, _m1, _m2, null, void 0, _m5, _m6, _m7, null, void 0);
 		}
 		componentSlot(__s, 1, _b.a, RichTextPlugin, {
-			"contentEditable": createScopedValue(() => createElementFromConfig("c:7597daf3", ContentEditable, {
+			"contentEditable": createScopedValue(() => createElementFromConfig("c:8bd4dc5e", ContentEditable, {
 				id: props.id,
 				"aria-placeholder": props.placeholder ?? "",
 				placeholder: null,
 				className: "vx-lexical-input",
-				style: { outline: "none" }
+				style: { outline: "none" },
+				onFocus: props.onFocus,
+				onBlur: props.onBlur
 			})),
 			"placeholder": props.placeholder ? createScopedValue(() => createScopedElement("div", {
 				className: "vx-lexical-placeholder",
@@ -312,12 +312,15 @@ var LexicalEditor = /* @__PURE__ */ __s(function LexicalEditor(props, __s, __ext
 			}, () => props.placeholder)) : null,
 			"ErrorBoundary": LexicalErrorBoundary
 		}, _b.b, void 0, 2, void 0, void 0, "c:1283dc87");
-		componentSlot(__s, 2, _b.a, HistoryPlugin, {}, _b.c, void 0, 2, void 0, void 0, "c:1dd1c554");
-		componentSlot(__s, 3, _b.a, ListPlugin, {}, _b.d, void 0, 2, void 0, void 0, "c:4bb68e0f");
-		componentSlot(__s, 4, _b.a, LinkPlugin, {}, _b.e, void 0, 2, void 0, void 0, "c:5c76533c");
-		_b.k = bindSignalChild(__s, _b.k, 5, _b.a, props.autofocus ? createElementFromConfig("c:980e387e", AutoFocusPlugin, {}) : null, "b:928b159c", _b.f, true, void 0, void 0, void 0);
-		componentSlot(__s, 6, _b.a, OnChangePlugin, { "onChange": emitChange }, _b.i, void 0, 2, void 0, void 0, "c:079f6eaf");
-		componentSlot(__s, 7, _b.a, EditorRefPlugin, { "editorRef": attach }, _b.j, void 0, 2, void 0, void 0, "c:230323aa");
+		_b.k = bindSignalChild(__s, _b.k, 2, _b.a, !props.web?.replacePlugins ? createScopedElement(Fragment, {}, () => positionalChildren([
+			createElementFromConfig("c:2ac25b31", HistoryPlugin, {}),
+			createElementFromConfig("c:8c987b0a", ListPlugin, {}),
+			createElementFromConfig("c:c85acd4c", LinkPlugin, {}),
+			props.autofocus ? createElementFromConfig("c:4e4f8e9d", AutoFocusPlugin, {}) : null
+		])) : null, "b:d23e6e54", _b.c, true, void 0, void 0, void 0);
+		componentSlot(__s, 3, _b.a, OnChangePlugin, { "onChange": emitChange }, _b.f, void 0, 2, void 0, void 0, "c:fbe62b73");
+		componentSlot(__s, 4, _b.a, EditorRefPlugin, { "editorRef": attach }, _b.g, void 0, 2, void 0, void 0, "c:bcb623dd");
+		_b.l = bindSignalChild(__s, _b.l, 5, _b.a, props.web?.plugins, "b:6078ff9a", _b.h, true, void 0, void 0, void 0);
 	}
 	let _b = __s.slots[0];
 	if (_b === void 0) {
@@ -326,7 +329,7 @@ var LexicalEditor = /* @__PURE__ */ __s(function LexicalEditor(props, __s, __ext
 		_m1 = _root;
 		_b = bag3(__s, _root, void 0, _m1, void 0);
 	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:db7e728b", "class");
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.className, "b:748f4137", "class");
 	{
 		const _v = {
 			position: "relative",

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "41f913ce-4dc3-4a50-9909-0d4d1b93f3ed",
+  "buildId": "8d1e9a01-c578-493a-8940-55ea47770771",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/lexical",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Unified rich-text editor facade for Octane xplat — live lexical on web/AppKit, Aztec + lexical document model on Android",
   "keywords": [
     "cross-platform",
@@ -55,7 +55,7 @@
     "@lexical/rich-text": "0.51.0",
     "@lexical/selection": "0.51.0",
     "@lexical/utils": "0.51.0",
-    "@octane-xplat/richtext": "0.10.0",
+    "@octane-xplat/richtext": "0.11.1",
     "@octanejs/lexical": "0.2.0",
     "lexical": "0.51.0",
     "zeed-dom": "0.18.0"
@@ -63,11 +63,12 @@
   "devDependencies": {
     "@nativescript-community/octane": "0.2.4",
     "@nativescript/core": "9.1.2",
-    "@octane-xplat/macos-renderer": "0.10.0",
+    "@octane-xplat/macos-renderer": "0.11.1",
     "@octanejs/vite-plugin": "0.1.61",
     "octane": "0.6.3",
     "typescript": "5.9.3",
-    "vite": "8.3.0"
+    "vite": "8.3.0",
+    "vitest": "5.0.1"
   },
   "peerDependencies": {
     "@nativescript-community/octane": ">=0.2.1 <1",
@@ -92,6 +93,7 @@
     }
   },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs && node ../richtext/build-browser.mjs"
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs && node ../richtext/build-browser.mjs",
+    "test:native": "vitest run --config vitest.native.config.mts"
   }
 }

package/src/LexicalEditor.mobile.test.ts

@@ -0,0 +1,229 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+	flushUniversalSync,
+} from 'octane/universal/native'
+
+import type { LexicalJSON } from './types'
+
+// Controlled fake for the lazy JSON bridge — the real module's dynamic
+// imports aren't needed to test facade timing. `resolved`/`ready` model the
+// bridge settling; docs carry `html` so conversions stay deterministic.
+const bridge = vi.hoisted(() => ({
+	ready: false,
+	resolved: undefined as boolean | undefined,
+	waiters: [] as Array<(ok: boolean) => void>,
+}))
+
+vi.mock('./json-bridge', () => ({
+	ensureJSONBridge: () =>
+		bridge.resolved !== undefined
+			? Promise.resolve(bridge.resolved)
+			: new Promise<boolean>((resolve) => bridge.waiters.push(resolve)),
+	jsonBridgeReady: () => bridge.ready,
+	jsonToHTML: (doc: any) =>
+		doc && typeof doc === 'object' && typeof doc.html === 'string' ? doc.html : null,
+	htmlToJSON: (html: string) => ({ type: 'doc', html }),
+}))
+
+vi.mock('@octane-xplat/richtext', async () => {
+	return await import('../tests/fake-richtext.fixture.mobile.tsrx')
+})
+
+import { LexicalEditor } from './LexicalEditor.tsrx'
+import { hosts, resetFakeRichtext, setDefer } from '../tests/fake-richtext.fixture.mobile.tsrx'
+
+const docA = { type: 'doc', html: '<p>alpha</p>' } as unknown as LexicalJSON
+const docB = { type: 'doc', html: '<p>bravo</p>' } as unknown as LexicalJSON
+
+const roots: ReturnType<typeof createUniversalRoot>[] = []
+
+function mount(props: any) {
+	const container = createObjectContainer('nativescript')
+	const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+	roots.push(root)
+	let handle: any = null
+	root.render(LexicalEditor, {
+		...props,
+		ref: (next: any) => {
+			handle = next
+		},
+	})
+
+	return {
+		root,
+		container,
+		get handle() {
+			return handle
+		},
+	}
+}
+
+function settleBridge(ok: boolean) {
+	bridge.ready = ok
+	bridge.resolved = ok
+	for (const resolve of bridge.waiters.splice(0)) {
+		resolve(ok)
+	}
+}
+
+async function settle() {
+	for (let i = 0; i < 12; i++) {
+		await Promise.resolve()
+	}
+
+	flushUniversalSync(() => {})
+}
+
+beforeEach(() => {
+	bridge.ready = false
+	bridge.resolved = undefined
+	bridge.waiters.length = 0
+	resetFakeRichtext()
+})
+
+afterEach(() => {
+	for (const root of roots.splice(0)) {
+		root.unmount()
+	}
+})
+
+describe('LexicalEditor native JSON readiness', () => {
+	it('applies an initial props.json once when the bridge settles after mount', async () => {
+		const onJSONReady = vi.fn()
+		mount({ json: docA, onJSONReady })
+		await settle()
+		expect(hosts[0].setCalls).toEqual([])
+
+		settleBridge(true)
+		await settle()
+		expect(onJSONReady).toHaveBeenCalledWith(true)
+		expect(hosts[0].html).toBe('<p>alpha</p>')
+		expect(hosts[0].setCalls).toEqual(['<p>alpha</p>'])
+	})
+
+	it('applies an initial props.json when the host readies after the bridge', async () => {
+		bridge.ready = true
+		bridge.resolved = true
+		setDefer(true)
+		mount({ json: docA })
+		await settle()
+		expect(hosts[0].setCalls).toEqual([])
+
+		hosts[0].ready()
+		await settle()
+		expect(hosts[0].html).toBe('<p>alpha</p>')
+		expect(hosts[0].setCalls).toEqual(['<p>alpha</p>'])
+	})
+
+	it('applies an initial props.json once when host and bridge are both late', async () => {
+		setDefer(true)
+		mount({ json: docA })
+		await settle()
+		hosts[0].ready()
+		await settle()
+		expect(hosts[0].setCalls).toEqual([])
+
+		settleBridge(true)
+		await settle()
+		expect(hosts[0].setCalls).toEqual(['<p>alpha</p>'])
+	})
+
+	it('keeps json precedence over value once readiness lands', async () => {
+		mount({ value: '<p>value</p>', json: docA })
+		await settle()
+		settleBridge(true)
+		await settle()
+		expect(hosts[0].html).toBe('<p>alpha</p>')
+	})
+
+	it('applies later props.json updates and skips identical docs', async () => {
+		const view = mount({ json: docA })
+		settleBridge(true)
+		await settle()
+		expect(hosts[0].setCalls).toEqual(['<p>alpha</p>'])
+
+		view.root.render(LexicalEditor, { json: docB } as any)
+		await settle()
+		expect(hosts[0].setCalls).toEqual(['<p>alpha</p>', '<p>bravo</p>'])
+
+		view.root.render(LexicalEditor, { json: docB } as any)
+		await settle()
+		expect(hosts[0].setCalls).toEqual(['<p>alpha</p>', '<p>bravo</p>'])
+	})
+
+	it('does not push a doc the editor itself emitted back at it', async () => {
+		const onJSONChange = vi.fn()
+		const view = mount({ onJSONChange })
+		settleBridge(true)
+		await settle()
+
+		const rig = hosts[0]
+		rig.html = '<p>typed</p>'
+		// The leaf calls props.onChange(html); the facade wraps it to emit JSON.
+		rig.props.onChange('<p>typed</p>')
+		await settle()
+		const emitted = onJSONChange.mock.calls[0][0]
+		expect(emitted).toEqual({ type: 'doc', html: '<p>typed</p>' })
+
+		view.root.render(LexicalEditor, { json: emitted, onJSONChange } as any)
+		await settle()
+		expect(rig.setCalls).toEqual([])
+	})
+
+	it('defers an imperative setJSON issued before the bridge settles', async () => {
+		const view = mount({})
+		await settle()
+		expect(view.handle).not.toBeNull()
+
+		view.handle.setJSON(docB)
+		expect(hosts[0].setCalls).toEqual([])
+		settleBridge(true)
+		await settle()
+		expect(hosts[0].setCalls).toEqual(['<p>bravo</p>'])
+	})
+
+	it('re-applies the current doc when the host rebinds', async () => {
+		mount({ json: docA })
+		settleBridge(true)
+		await settle()
+		expect(hosts[0].setCalls).toEqual(['<p>alpha</p>'])
+
+		hosts[0].rebind()
+		await settle()
+		expect(hosts[0].html).toBe('<p>alpha</p>')
+		expect(hosts[0].setCalls).toEqual(['<p>alpha</p>'])
+	})
+
+	it('ignores a bridge that settles after unmount', async () => {
+		const onJSONReady = vi.fn()
+		const view = mount({ json: docA, onJSONReady })
+		await settle()
+		view.root.unmount()
+
+		settleBridge(true)
+		await settle()
+		expect(onJSONReady).not.toHaveBeenCalled()
+		expect(hosts[0].setCalls).toEqual([])
+	})
+
+	it('reports bridge failure through onJSONReady without touching the host', async () => {
+		const onJSONReady = vi.fn()
+		const view = mount({ json: docA, onJSONReady })
+		await settle()
+		settleBridge(false)
+		await settle()
+		expect(onJSONReady).toHaveBeenCalledWith(false)
+		expect(hosts[0].setCalls).toEqual([])
+		expect(view.handle.getJSON()).toBeNull()
+	})
+
+	it('drops a doc the converter rejects instead of writing null HTML', async () => {
+		mount({ json: { type: 'doc', content: [{ type: 'mystery' }] } as any })
+		settleBridge(true)
+		await settle()
+		expect(hosts[0].setCalls).toEqual([])
+	})
+})

package/src/LexicalEditor.tsrx

@@ -2,7 +2,7 @@
 import { useState, useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
 import { RichTextEditor, supported as leafSupported } from '@octane-xplat/richtext'
 import type { RichTextEditorHandle } from '@octane-xplat/richtext'
-import type { LexicalEditorHandle, LexicalEditorProps } from './types'
+import type { LexicalEditorHandle, LexicalEditorProps, LexicalJSON } from './types'
 import { ensureJSONBridge, htmlToJSON, jsonBridgeReady, jsonToHTML } from './json-bridge'
 
 export const supported = leafSupported
@@ -16,22 +16,45 @@ export function LexicalEditor(props: LexicalEditorProps) @{
 	const inner = useRef<RichTextEditorHandle | null>(null)
 	const [exposedHandle, setHandle] = useState<LexicalEditorHandle | null>(null)
 	useImperativeHandle<LexicalEditorHandle | null>(props.ref, () => exposedHandle, [exposedHandle])
-	const jsonReady = useRef(false)
 	const lastJSON = useRef<string | undefined>(undefined)
+	const appliedHost = useRef<RichTextEditorHandle | null>(null)
+	// Latest doc requested for the host — by `json` prop or `setJSON`. Kept
+	// after a successful push so a rebound (recreated) host still gets it.
+	const desiredDoc = useRef<LexicalJSON | undefined>(undefined)
+
+	// Push the requested doc once both halves are up — the JSON bridge
+	// (async module load) and the bound host (ref/onReady timing). Skips the
+	// stamp the host already shows, so editor-emitted echoes and repeat props
+	// never reach setHTML; a different host always gets its own copy.
+	const applyDoc = () => {
+		const host = inner.current
+		const doc = desiredDoc.current
+		if (!host || doc === undefined || !jsonBridgeReady()) return
+		const stamp = JSON.stringify(doc)
+		if (stamp === lastJSON.current && appliedHost.current === host) return
+		const html = jsonToHTML(doc)
+		if (html != null) {
+			lastJSON.current = stamp
+			appliedHost.current = host
+			host.setHTML(html)
+		}
+	}
 
 	const bindHost = useCallback((h: RichTextEditorHandle | null) => {
 		inner.current = h
+		if (h) {
+			// The ref binds inside the leaf's commit, before its own `value`
+			// seed — defer so `json` keeps precedence over `value`.
+			queueMicrotask(applyDoc)
+		}
 
 		setHandle((previous) => previous?.native === h?.native ? previous : h ? ({
 			getHTML: () => h.getHTML(),
 			setHTML: (html: string) => h.setHTML(html),
 			getJSON: () => (jsonBridgeReady() ? htmlToJSON(h.getHTML()) : null),
 			setJSON: (doc) => {
-				const html = jsonBridgeReady() ? jsonToHTML(doc) : null
-				if (html != null) {
-					lastJSON.current = JSON.stringify(doc)
-					h.setHTML(html)
-				}
+				desiredDoc.current = doc
+				applyDoc()
 			},
 			apply: (format) => h.apply(format),
 			linkTo: (url, anchor) => h.linkTo(url, anchor),
@@ -47,25 +70,28 @@ export function LexicalEditor(props: LexicalEditorProps) @{
 	}, [])
 
 	// The bridge loads once per process — dynamic imports of the DOM-free
-	// lexical slices, plus the zeed-dom parse shim.
+	// lexical slices, plus the zeed-dom parse shim. A doc that arrived before
+	// it settles is applied here, not dropped.
 	useEffect(() => {
+		let alive = true
 		ensureJSONBridge().then((ok) => {
-			jsonReady.current = ok
+			if (!alive) return
 			props.onJSONReady?.(ok)
+			applyDoc()
 		})
+
+		return () => {
+			alive = false
+		}
 	}, [])
 
-	// `json` prop → editor content, when the bridge is up and the doc wasn't
-	// emitted by the editor itself.
+	// `json` prop → editor content. It may land before the bridge settles or
+	// before the host binds — park it in desiredDoc and let the readiness
+	// flushes apply it.
 	useEffect(() => {
-		if (!props.json || !jsonBridgeReady() || !inner.current) return
-		const stamp = JSON.stringify(props.json)
-		if (stamp === lastJSON.current) return
-		const html = jsonToHTML(props.json)
-		if (html != null) {
-			lastJSON.current = stamp
-			inner.current.setHTML(html)
-		}
+		if (!props.json) return
+		desiredDoc.current = props.json
+		applyDoc()
 	}, [props.json])
 
 	const emitJSON = () => {
@@ -73,6 +99,7 @@ export function LexicalEditor(props: LexicalEditorProps) @{
 		const doc = htmlToJSON(inner.current.getHTML())
 		if (doc) {
 			lastJSON.current = JSON.stringify(doc)
+			appliedHost.current = inner.current
 			props.onJSONChange?.(doc)
 		}
 	}
@@ -85,7 +112,12 @@ export function LexicalEditor(props: LexicalEditorProps) @{
 		placeholder={props.placeholder}
 		editable={props.editable}
 		autofocus={props.autofocus}
-		onReady={props.onReady}
+		onReady={() => {
+			// Host signalled ready after the leaf's own initial content seed —
+			// the last apply point that still outranks a `value` prop.
+			applyDoc()
+			props.onReady?.()
+		}}
 		onChange={(html) => {
 			props.onChange?.(html)
 			emitJSON()