fix(studio): preserve bare text nodes in mixed-content elements

collectDomEditTextFields only captured child HTML elements, ignoring
bare text nodes. For elements like:
  <div class="headline">If you're <span>turning 65</span> soon...</div>
only the <span> was collected as a text field. When commitDomTextFields
serialized back, "If you're " and " soon..." were lost.

Now walks childNodes and creates text-node fields for bare text nodes
alongside child element fields. serializeDomEditTextFields emits bare
text for text-node fields, preserving the complete mixed content.

Author: miguel-heygen

packages/studio/src/components/editor/domEditingLayers.ts

@@ -73,10 +73,41 @@ function buildTextField(
 }
 
 export function collectDomEditTextFields(el: HTMLElement): DomEditTextField[] {
-  const childFields = Array.from(el.children).filter(isHtmlElement).filter(isEditableTextLeaf);
-  if (childFields.length > 0) {
-    return childFields.map((child, index) =>
-      buildTextField(child, index, childFields.length, "child"),
+  const childElements = Array.from(el.children).filter(isHtmlElement).filter(isEditableTextLeaf);
+
+  if (childElements.length > 0) {
+    const hasMixedContent = Array.from(el.childNodes).some(
+      (node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),
+    );
+
+    if (hasMixedContent) {
+      const fields: DomEditTextField[] = [];
+      let childIdx = 0;
+      for (const node of el.childNodes) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          const text = node.textContent ?? "";
+          if (!text.trim()) continue;
+          fields.push({
+            key: `text-node:${childIdx}`,
+            label: `Text ${childIdx + 1}`,
+            value: text,
+            tagName: "#text",
+            attributes: [],
+            inlineStyles: {},
+            computedStyles: {},
+            source: "text-node",
+          });
+          childIdx++;
+        } else if (isHtmlElement(node) && isEditableTextLeaf(node)) {
+          fields.push(buildTextField(node, childIdx, childElements.length, "child"));
+          childIdx++;
+        }
+      }
+      return fields;
+    }
+
+    return childElements.map((child, index) =>
+      buildTextField(child, index, childElements.length, "child"),
     );
   }
 
@@ -99,8 +130,11 @@ function serializeTextFieldStyle(field: DomEditTextField): string {
 
 export function serializeDomEditTextFields(fields: DomEditTextField[]): string {
   return fields
-    .filter((field) => field.source === "child")
+    .filter((field) => field.source === "child" || field.source === "text-node")
     .map((field) => {
+      if (field.source === "text-node") {
+        return escapeHtmlText(field.value);
+      }
       const attrs = [
         ...field.attributes.filter((attribute) => attribute.name !== "data-hf-text-key"),
         { name: "data-hf-text-key", value: field.key },

packages/studio/src/components/editor/domEditingTypes.ts

@@ -65,7 +65,7 @@ export interface DomEditTextField {
   attributes: Array<{ name: string; value: string }>;
   inlineStyles: Record<string, string>;
   computedStyles: Record<string, string>;
-  source: "self" | "child";
+  source: "self" | "child" | "text-node";
 }
 
 export interface DomEditSelection extends PatchTarget {