@avocadostudio-ai/preview-adapter 0.29.0 → 0.30.0

package/dist/bridge-functions.d.ts

@@ -417,7 +417,13 @@ export type BridgeState = {
     serverVersion: number;
     liveDraftActiveBlockId: string | null;
     liveDraftBadgeTimer: number | null;
-    liveDraftOriginals: Map<HTMLElement, string>;
+    liveDraftOriginals: Map<HTMLElement, LiveDraftOriginal>;
+    /**
+     * React's own child nodes for fields whose streamed content was committed
+     * while foreign nodes were still on screen. Put back immediately before the
+     * next refresh, so React reconciles nodes it owns. See `LiveDraftOriginal`.
+     */
+    liveDraftDetached: Map<HTMLElement, ChildNode[]>;
     knownBlockIds: Set<string>;
     expectingNewBlocks: boolean;
     hoveredItemRoot: HTMLElement | null;
@@ -437,6 +443,21 @@ export type BridgeState = {
     fixedBlockTypes: Set<string>;
 };
 export declare function createBridgeState(): BridgeState;
+export type LiveDraftOriginal = {
+    mode: "text";
+    textNode: Text;
+    value: string;
+} | {
+    mode: "replaced";
+    nodes: ChildNode[];
+};
+/** The text an HTML string renders, when it is only text (no elements). */
+export declare function plainTextOfHtml(html: string): string | null;
+/**
+ * Set an element's text without replacing React's text node when it has
+ * exactly one; `textContent =` would. Falls back to `textContent` otherwise.
+ */
+export declare function setTextKeepingNode(node: HTMLElement, text: string): void;
 export type BridgeFunctions = ReturnType<typeof createBridgeFunctions>;
 /**
  * Creates all stateful DOM manipulation functions bound to the given state and callbacks.

package/dist/bridge-functions.js

@@ -905,6 +905,7 @@ export function createBridgeState() {
         liveDraftActiveBlockId: null,
         liveDraftBadgeTimer: null,
         liveDraftOriginals: new Map(),
+        liveDraftDetached: new Map(),
         knownBlockIds: new Set(Array.from(document.querySelectorAll("[data-block-id]"))
             .map((node) => node.getAttribute("data-block-id"))
             .filter((id) => Boolean(id))),
@@ -916,6 +917,27 @@ export function createBridgeState() {
         fixedBlockTypes: new Set(),
     };
 }
+/** The text an HTML string renders, when it is only text (no elements). */
+export function plainTextOfHtml(html) {
+    if (/<[a-zA-Z!/]/.test(html))
+        return null;
+    const scratch = document.createElement("textarea");
+    scratch.innerHTML = html;
+    return scratch.value;
+}
+/**
+ * Set an element's text without replacing React's text node when it has
+ * exactly one; `textContent =` would. Falls back to `textContent` otherwise.
+ */
+export function setTextKeepingNode(node, text) {
+    const only = node.childNodes.length === 1 ? node.firstChild : null;
+    if (only && only.nodeType === Node.TEXT_NODE) {
+        if (only.nodeValue !== text)
+            only.nodeValue = text;
+        return;
+    }
+    node.textContent = text;
+}
 /**
  * Creates all stateful DOM manipulation functions bound to the given state and callbacks.
  * Used by both PreviewBridgeCore (iframe/postMessage) and the immersive widget (direct).
@@ -955,31 +977,56 @@ export function createBridgeFunctions(state, callbacks, config) {
             badge.append(status);
         }, 600);
     };
-    const restoreLiveDraftOriginals = () => {
-        for (const [node, html] of state.liveDraftOriginals) {
-            node.innerHTML = html;
-            node.classList.remove("editor-live-typing");
+    /** Put React's content back exactly as it was: its own nodes, its own text. */
+    const putBackOriginal = (node, original) => {
+        if (original.mode === "text") {
+            original.textNode.nodeValue = original.value;
+            if (original.textNode.parentNode !== node)
+                node.replaceChildren(original.textNode);
         }
+        else {
+            node.replaceChildren(...original.nodes);
+        }
+        node.classList.remove("editor-live-typing");
+    };
+    const restoreLiveDraftOriginals = () => {
+        for (const [node, original] of state.liveDraftOriginals)
+            putBackOriginal(node, original);
         state.liveDraftOriginals.clear();
     };
-    /** Discard stored originals without restoring them (use after content is committed). */
+    /**
+     * The streamed content was committed: keep it on screen. A field edited in
+     * place needs nothing more — React's node holds the committed text and the
+     * refresh reconciles it. A replaced field's React nodes wait in
+     * `liveDraftDetached` and go back in just before that refresh.
+     */
     const discardLiveDraftOriginals = () => {
-        for (const [node] of state.liveDraftOriginals) {
+        for (const [node, original] of state.liveDraftOriginals) {
             node.classList.remove("editor-live-typing");
+            if (original.mode === "replaced" && !state.liveDraftDetached.has(node)) {
+                state.liveDraftDetached.set(node, original.nodes);
+            }
         }
         state.liveDraftOriginals.clear();
         state.liveDraftActiveBlockId = null;
     };
+    /** Hand every committed field's nodes back to React before it re-renders. */
+    const reattachLiveDraftNodes = () => {
+        for (const [node, nodes] of state.liveDraftDetached) {
+            if (node.isConnected)
+                node.replaceChildren(...nodes);
+        }
+        state.liveDraftDetached.clear();
+    };
     // Write each streamed field value into its editable node (plain-text fields
     // only; rich fields stay under React's control — see isRichEditableNode).
     // Used by both the active streaming path and the final commit post.
     const applyLiveDraftFields = (block, fields) => {
         const nextPaths = new Set(Object.keys(fields));
-        for (const [node, html] of [...state.liveDraftOriginals.entries()]) {
+        for (const [node, original] of [...state.liveDraftOriginals.entries()]) {
             const path = editablePathOf(node);
             if (!nextPaths.has(path)) {
-                node.innerHTML = html;
-                node.classList.remove("editor-live-typing");
+                putBackOriginal(node, original);
                 state.liveDraftOriginals.delete(node);
             }
         }
@@ -998,10 +1045,32 @@ export function createBridgeFunctions(state, callbacks, config) {
                 node.classList.add("editor-live-typing");
                 continue;
             }
-            if (!state.liveDraftOriginals.has(node)) {
-                state.liveDraftOriginals.set(node, node.innerHTML);
+            const html = markdownToHtml(value);
+            let original = state.liveDraftOriginals.get(node);
+            if (!original) {
+                const only = node.childNodes.length === 1 ? node.firstChild : null;
+                original = only && only.nodeType === Node.TEXT_NODE
+                    ? { mode: "text", textNode: only, value: only.nodeValue ?? "" }
+                    : { mode: "replaced", nodes: Array.from(node.childNodes) };
+                state.liveDraftOriginals.set(node, original);
+            }
+            const text = original.mode === "text" ? plainTextOfHtml(html) : null;
+            if (original.mode === "text" && text !== null) {
+                // React's own node, new text: nothing for React to lose track of.
+                if (original.textNode.parentNode !== node)
+                    node.replaceChildren(original.textNode);
+                original.textNode.nodeValue = text;
+            }
+            else {
+                if (original.mode === "text") {
+                    // The stream gained markup (bold, a link): from here it replaces, and
+                    // React's text node is what goes back.
+                    original.textNode.nodeValue = original.value;
+                    original = { mode: "replaced", nodes: [original.textNode] };
+                    state.liveDraftOriginals.set(node, original);
+                }
+                node.innerHTML = html;
             }
-            node.innerHTML = markdownToHtml(value);
             node.classList.add("editor-live-typing");
         }
     };
@@ -1163,7 +1232,8 @@ export function createBridgeFunctions(state, callbacks, config) {
         const s = state.inlineEditing;
         if (!s)
             return;
-        s.node.textContent = s.initialValue;
+        // Not `textContent =`: that replaces React's text node (see LiveDraftOriginal).
+        setTextKeepingNode(s.node, s.initialValue);
         s.node.setAttribute("contenteditable", "false");
         s.node.classList.remove("editor-inline-editing");
         s.node.append(...s.liftedControls);
@@ -1706,6 +1776,7 @@ export function createBridgeFunctions(state, callbacks, config) {
             state.pendingScrollRestore = null;
         }
         cancelInlineEdit();
+        reattachLiveDraftNodes();
         const restoreAndFocus = () => {
             if (state.pendingScrollRestore) {
                 const { x, y } = state.pendingScrollRestore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avocadostudio-ai/preview-adapter",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,7 +39,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@avocadostudio-ai/shared": "^0.29.0"
+    "@avocadostudio-ai/shared": "^0.30.0"
   },
   "peerDependencies": {
     "next": ">=15.0.0",