feat(studio): Timing inspector + fix mixed-content text editing (#896)

miguel-heygen · web-flow · commit cd0e6b02a02a · 2026-05-16T09:46:52.000+02:00
* feat(studio): add clipboard payload types and ID deduplication * feat(studio): add Ctrl+C/V/X copy/paste for timeline clips and DOM elements * fix(studio): use duck-typing for cross-frame element access in clipboard Elements from the preview iframe are from a different window context, so `el instanceof HTMLElement` always returns false. Use `"outerHTML" in el` instead to correctly detect elements across frame boundaries. * fix(studio): preserve playhead position after paste reloadPreview() used location.reload() which bypassed the NLELayout saveSeekPosition effect, causing the playhead to reset to 0:00 after paste. Switch to setRefreshKey which triggers the effect and restores the seek position after the iframe reloads. * fix(studio): paste DOM elements as siblings, not at composition root DOM element paste was inserting at the composition root, losing the parent context that provides CSS styles and positioning. Now stores the origin selector on copy and inserts the paste as a sibling immediately after the original element, preserving style inheritance. Falls back to root insertion if the selector can't be matched. * fix(studio): address review — deduplicateIds, native copy, altKey guard - deduplicateIds regex used \b which matched data-composition-id, data-clip-id, etc. Switch to lookbehind (?<=\s) so only standalone id="..." attributes are rewritten. Add test pinning this. - Ctrl+C no longer calls preventDefault() before confirming there's a selected element. Native browser copy (text selections outside inputs) is preserved when nothing is selected in the Studio. - Add !event.altKey guard on C/V/X to avoid intercepting Cmd+Alt+V (paste-as-plain-text) and similar OS gestures. - Remove no-op .replace(/"/g, '"') flagged by CodeQL. * fix(studio): address review round 2 — Cmd+X guard, data-start scope, revert drive-by - Cmd+X now pre-checks selection state before preventDefault, mirroring the Cmd+C fix. Native cut preserved when nothing is selected. - handleCut returns Promise<boolean> so the caller can gate on it. - data-start rewrite scoped to the outermost opening tag only, so nested clip timing is preserved on paste. - Removed system clipboard write (cross-tab paste unsupported, in-memory ref is the only read path). - Reverted the reloadPreview drive-by (setRefreshKey→location.reload); the perf branch (#895) handles this properly via refreshPlayer(). * perf(studio): use lightweight iframe.src reload instead of Player teardown Content refreshes (paste, move, resize, delete, asset drop) previously triggered setRefreshKey which changed the Player's React key, causing full web-component destruction + iframe teardown + crossfade animation + re-initialization of all event listeners and asset polling. Now NLELayout intercepts refreshKey changes and calls refreshPlayer() which just appends a cache-busting _t param to the iframe src. The Player web component stays alive, event listeners persist, and the reload is ~10x faster with no "waiting for media" flash. Key-based teardown is preserved for actual structural changes (project switch, composition drill-down via directUrl change). * perf(studio): skip asset-loading overlay on content refreshes The asset-loading overlay ("Preparing preview assets") polled for video/audio readyState on every iframe load, including content refreshes from paste/move/resize. On reloads the browser serves assets from cache so they resolve near-instantly — the overlay just created a disruptive flash. Now skips the polling on subsequent loads (loadCountRef > 1), only showing it on the initial cold load. * feat(studio): add Timing section to inspector Design panel Adds Start, End, and Duration fields to the Design panel when the selected element has data-start/data-duration attributes. Editing any field commits via the attribute patch pipeline (same as timeline edits) and refreshes the preview. End is computed from start+duration and writing End adjusts duration accordingly. * 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. * fix(studio): address #896 review — remove scrub from timing, add mixed-content test - Remove scrub from Timing fields: 1px = 1 second is too coarse. Scroll-wheel and direct typing still work with sub-second precision. - Add mixed-content text-node serialization test in a separate file (domEditingTextFields.test.ts) to avoid bloating the existing domEditing.test.ts past the filesize limit.
diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
@@ -55,6 +55,7 @@ export function StudioRightPanel({
     copiedAgentPrompt,
     clearDomSelection,
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -168,6 +169,7 @@ export function StudioRightPanel({
                   copiedAgentPrompt={copiedAgentPrompt}
                   onClearSelection={clearDomSelection}
                   onSetStyle={handleDomStyleCommit}
+                  onSetAttribute={handleDomAttributeCommit}
                   onSetManualOffset={handleDomPathOffsetCommit}
                   onSetManualSize={handleDomBoxSizeCommit}
                   onSetManualRotation={handleDomRotationCommit}
diff --git a/packages/studio/src/components/editor/PropertyPanel.tsx b/packages/studio/src/components/editor/PropertyPanel.tsx
@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
+import { Clock, Eye, Layers, MessageSquare, Move, X } from "../../icons/SystemIcons";
 import {
   collectDomEditLayerItems,
   getDomEditLayerKey,
@@ -39,6 +39,7 @@ interface PropertyPanelProps {
   copiedAgentPrompt: boolean;
   onClearSelection: () => void;
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  onSetAttribute: (attr: string, value: string) => void | Promise<void>;
   onSetManualOffset: (element: DomEditSelection, next: { x: number; y: number }) => void;
   onSetManualSize: (element: DomEditSelection, next: { width: number; height: number }) => void;
   onSetManualRotation: (element: DomEditSelection, next: { angle: number }) => void;
@@ -114,6 +115,67 @@ function LayerTree({
   );
 }
 
+/* ------------------------------------------------------------------ */
+/*  TimingSection                                                      */
+/* ------------------------------------------------------------------ */
+
+function formatTimingValue(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0.00s";
+  return `${seconds.toFixed(2)}s`;
+}
+
+function parseTimingValue(input: string): number | null {
+  const cleaned = input.replace(/s$/i, "").trim();
+  const parsed = Number.parseFloat(cleaned);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+}
+
+function TimingSection({
+  element,
+  onSetAttribute,
+}: {
+  element: DomEditSelection;
+  onSetAttribute: (attr: string, value: string) => void | Promise<void>;
+}) {
+  const start = Number.parseFloat(element.dataAttributes.start ?? "0") || 0;
+  const duration = Number.parseFloat(element.dataAttributes.duration ?? "0") || 0;
+  const end = start + duration;
+
+  const commitStart = (nextValue: string) => {
+    const parsed = parseTimingValue(nextValue);
+    if (parsed == null) return;
+    void onSetAttribute("start", parsed.toFixed(2));
+  };
+
+  const commitDuration = (nextValue: string) => {
+    const parsed = parseTimingValue(nextValue);
+    if (parsed == null || parsed <= 0) return;
+    void onSetAttribute("duration", parsed.toFixed(2));
+  };
+
+  const commitEnd = (nextValue: string) => {
+    const parsed = parseTimingValue(nextValue);
+    if (parsed == null || parsed <= start) return;
+    void onSetAttribute("duration", (parsed - start).toFixed(2));
+  };
+
+  return (
+    <Section title="Timing" icon={<Clock size={15} />}>
+      <div className={RESPONSIVE_GRID}>
+        <MetricField label="Start" value={formatTimingValue(start)} onCommit={commitStart} />
+        <MetricField label="End" value={formatTimingValue(end)} onCommit={commitEnd} />
+      </div>
+      <div className="mt-3">
+        <MetricField
+          label="Duration"
+          value={formatTimingValue(duration)}
+          onCommit={commitDuration}
+        />
+      </div>
+    </Section>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  PropertyPanel                                                      */
 /* ------------------------------------------------------------------ */
@@ -126,6 +188,7 @@ export const PropertyPanel = memo(function PropertyPanel({
   copiedAgentPrompt,
   onClearSelection,
   onSetStyle,
+  onSetAttribute,
   onSetManualOffset,
   onSetManualSize,
   onSetManualRotation,
@@ -322,6 +385,10 @@ export const PropertyPanel = memo(function PropertyPanel({
           </div>
         </Section>
 
+        {element.dataAttributes.start != null && (
+          <TimingSection element={element} onSetAttribute={onSetAttribute} />
+        )}
+
         {showEditableSections && (
           <StyleSections
             projectId={projectId}
diff --git a/packages/studio/src/components/editor/domEditingLayers.ts b/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 === 3 && node.textContent?.trim(),
+    );
+
+    if (hasMixedContent) {
+      const fields: DomEditTextField[] = [];
+      let childIdx = 0;
+      for (const node of el.childNodes) {
+        if (node.nodeType === 3) {
+          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 },
diff --git a/packages/studio/src/components/editor/domEditingTextFields.test.ts b/packages/studio/src/components/editor/domEditingTextFields.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { serializeDomEditTextFields } from "./domEditing";
+
+describe("serializeDomEditTextFields — mixed content", () => {
+  it("round-trips text-node + child element fields", () => {
+    expect(
+      serializeDomEditTextFields([
+        {
+          key: "text-node:0",
+          label: "Text 1",
+          value: "If you're ",
+          tagName: "#text",
+          attributes: [],
+          inlineStyles: {},
+          computedStyles: {},
+          source: "text-node",
+        },
+        {
+          key: "child:1:span",
+          label: "Text 2",
+          value: "turning 65",
+          tagName: "span",
+          attributes: [{ name: "class", value: "accent" }],
+          inlineStyles: { color: "red" },
+          computedStyles: {},
+          source: "child",
+        },
+        {
+          key: "text-node:2",
+          label: "Text 3",
+          value: " soon...",
+          tagName: "#text",
+          attributes: [],
+          inlineStyles: {},
+          computedStyles: {},
+          source: "text-node",
+        },
+      ]),
+    ).toBe(
+      `If you're <span class="accent" data-hf-text-key="child:1:span" style="color: red">turning 65</span> soon...`,
+    );
+  });
+
+  it("escapes HTML entities in text-node values", () => {
+    expect(
+      serializeDomEditTextFields([
+        {
+          key: "text-node:0",
+          label: "Text 1",
+          value: "A < B & C > D",
+          tagName: "#text",
+          attributes: [],
+          inlineStyles: {},
+          computedStyles: {},
+          source: "text-node",
+        },
+      ]),
+    ).toBe("A &lt; B &amp; C &gt; D");
+  });
+});
diff --git a/packages/studio/src/components/editor/domEditingTypes.ts b/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 {
diff --git a/packages/studio/src/contexts/DomEditContext.tsx b/packages/studio/src/contexts/DomEditContext.tsx
@@ -28,6 +28,7 @@ export function DomEditProvider({
     applyDomSelection,
     clearDomSelection,
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomBoxSizeCommit,
@@ -74,6 +75,7 @@ export function DomEditProvider({
       applyDomSelection,
       clearDomSelection,
       handleDomStyleCommit,
+      handleDomAttributeCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomBoxSizeCommit,
@@ -114,6 +116,7 @@ export function DomEditProvider({
       applyDomSelection,
       clearDomSelection,
       handleDomStyleCommit,
+      handleDomAttributeCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomBoxSizeCommit,
diff --git a/packages/studio/src/hooks/useDomEditCommits.ts b/packages/studio/src/hooks/useDomEditCommits.ts
@@ -189,6 +189,7 @@ export function useDomEditCommits({
 
   const {
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
@@ -437,6 +438,7 @@ export function useDomEditCommits({
   return {
     resolveImportedFontAsset,
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
diff --git a/packages/studio/src/hooks/useDomEditSession.ts b/packages/studio/src/hooks/useDomEditSession.ts
@@ -193,6 +193,7 @@ export function useDomEditSession({
   const {
     resolveImportedFontAsset,
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
@@ -305,6 +306,7 @@ export function useDomEditSession({
     applyDomSelection,
     clearDomSelection,
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomBoxSizeCommit,
diff --git a/packages/studio/src/hooks/useDomEditTextCommits.ts b/packages/studio/src/hooks/useDomEditTextCommits.ts
@@ -113,6 +113,38 @@ export function useDomEditTextCommits({
     ],
   );
 
+  const handleDomAttributeCommit = useCallback(
+    async (attr: string, value: string) => {
+      if (!domEditSelection) return;
+      const iframe = previewIframeRef.current;
+      const doc = iframe?.contentDocument;
+      if (doc) {
+        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
+        if (el) el.setAttribute(`data-${attr}`, value);
+      }
+      const op: PatchOperation = { type: "attribute", property: attr, value };
+      try {
+        await persistDomEditOperations(domEditSelection, [op], {
+          label: "Edit timing",
+          skipRefresh: false,
+        });
+      } catch (err) {
+        console.warn(
+          "[Studio] Attribute persist failed:",
+          err instanceof Error ? err.message : err,
+        );
+      }
+      refreshDomEditSelectionFromPreview(domEditSelection);
+    },
+    [
+      activeCompPath,
+      domEditSelection,
+      persistDomEditOperations,
+      refreshDomEditSelectionFromPreview,
+      previewIframeRef,
+    ],
+  );
+
   const handleDomTextCommit = useCallback(
     async (value: string, fieldKey?: string) => {
       if (!domEditSelection) return;
@@ -321,6 +353,7 @@ export function useDomEditTextCommits({
 
   return {
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,

Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@ export interface DomEditTextField {`
`65`	`65`	`attributes: Array<{ name: string; value: string }>;`
`66`	`66`	`inlineStyles: Record<string, string>;`
`67`	`67`	`computedStyles: Record<string, string>;`
`68`		`- source: "self" \| "child";`
	`68`	`+ source: "self" \| "child" \| "text-node";`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`export interface DomEditSelection extends PatchTarget {`