@hyperframes/studio 0.7.106 → 0.7.107

package/src/contexts/DomEditContext.tsx

@@ -24,6 +24,7 @@ export interface DomEditActionsValue extends Pick<
   | "handleDomRotationCommit"
   | "handleDomManualEditsReset"
   | "handleDomTextCommit"
+  | "handleDomRichTextCommit"
   | "handleDomTextFieldStyleCommit"
   | "handleDomAddTextField"
   | "handleDomRemoveTextField"
@@ -149,6 +150,7 @@ export function DomEditProvider({
     handleDomManualEditsReset,
 
     handleDomTextCommit,
+    handleDomRichTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
     handleDomRemoveTextField,
@@ -236,6 +238,7 @@ export function DomEditProvider({
       handleDomRotationCommit,
       handleDomManualEditsReset,
       handleDomTextCommit,
+      handleDomRichTextCommit,
       handleDomTextFieldStyleCommit,
       handleDomAddTextField,
       handleDomRemoveTextField,
@@ -305,6 +308,7 @@ export function DomEditProvider({
       handleDomRotationCommit,
       handleDomManualEditsReset,
       handleDomTextCommit,
+      handleDomRichTextCommit,
       handleDomTextFieldStyleCommit,
       handleDomAddTextField,
       handleDomRemoveTextField,

package/src/hooks/domEditPersistFailure.ts

@@ -19,13 +19,6 @@ export class DomEditPersistUnsafeValueError extends Error {
   }
 }
 
-export class DomEditPersistUnsupportedTextStructureError extends Error {
-  constructor() {
-    super("Couldn't save this text structure change");
-    this.name = "DomEditPersistUnsupportedTextStructureError";
-  }
-}
-
 export type DomEditPersistFailureSelection = Pick<
   DomEditSelection,
   "label" | "hfId" | "id" | "selector" | "selectorIndex" | "sourceFile"

package/src/hooks/useAppHotkeys.ts

@@ -4,7 +4,7 @@ import type { TimelineElement } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
-import { isEditableTarget } from "../utils/timelineDiscovery";
+import { isTypingTarget } from "../utils/typingTarget";
 import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { trackStudioEvent } from "../utils/studioTelemetry";
@@ -188,14 +188,14 @@ function dispatchModifierKey(event: KeyboardEvent, key: string, cb: HotkeyCallba
     return true;
   }
 
-  if (key === "g" && !event.altKey && !isEditableTarget(event.target)) {
+  if (key === "g" && !event.altKey && !isTypingTarget(event.target)) {
     event.preventDefault();
     if (event.shiftKey) cb.onUngroupSelection?.();
     else cb.onGroupSelection?.();
     return true;
   }
 
-  if (!event.shiftKey && !event.altKey && !isEditableTarget(event.target)) {
+  if (!event.shiftKey && !event.altKey && !isTypingTarget(event.target)) {
     if (key === "c") {
       if (cb.handleCopy()) {
         event.preventDefault();
@@ -454,7 +454,7 @@ export function useAppHotkeys({
       dispatchModifierKey(event, key, cb);
       return;
     }
-    if (!isEditableTarget(event.target)) dispatchPlainKey(event, key, cb);
+    if (!isTypingTarget(event.target)) dispatchPlainKey(event, key, cb);
   }, []);
 
   // eslint-disable-next-line no-restricted-syntax

package/src/hooks/useDomEditCommits.test.tsx

@@ -117,14 +117,6 @@ function stubPatchFetch(
   return fetchMock;
 }
 
-function stubUnexpectedPersistFetch() {
-  const fetchMock = vi.fn(async (): Promise<Response> => {
-    throw new Error("persist should not run");
-  });
-  vi.stubGlobal("fetch", fetchMock);
-  return fetchMock;
-}
-
 async function flushAsyncWork(): Promise<void> {
   for (let i = 0; i < 8; i += 1) {
     await Promise.resolve();
@@ -812,14 +804,26 @@ function renderStyleCommitWithFetch(fetchHandler: FetchHandler) {
   };
 }
 
-async function expectRejectedTextStructureEdit(
+/**
+ * Adding or removing a text layer, which no per-child operation can express.
+ *
+ * Both used to be refused outright — the panel offered the buttons and neither
+ * could ever save — so this asserts the opposite of what it used to: one
+ * `rich-text` operation carrying the element's new markup, and no complaint.
+ */
+async function expectPersistedTextStructureEdit(
   commit: (hook: ReturnType<typeof useDomEditCommits>) => Promise<unknown>,
+  expectedMarkup: (markup: string) => void,
 ): Promise<void> {
-  const fetchMock = stubUnexpectedPersistFetch();
+  const fetchMock = stubPatchFetch({
+    ok: true,
+    changed: true,
+    matched: true,
+    content: '<div data-hf-id="hf-card"><span>First</span></div>',
+  });
   const { iframe, element } = createPreviewElement(
     '<div data-hf-id="hf-card"><span>First</span><span>Second</span></div>',
   );
-  const originalInnerHtml = element.innerHTML;
   const selection = createSelection(element, {
     textFields: [
       textField({ key: "first", value: "First", source: "child" }),
@@ -833,18 +837,82 @@ async function expectRejectedTextStructureEdit(
       await commit(rendered.hook);
     });
 
-    expect(fetchMock).not.toHaveBeenCalled();
-    expect(rendered.showToast).toHaveBeenCalledWith(
-      expect.stringContaining("text structure change"),
-      "error",
+    const patchPost = fetchMock.mock.calls.find((call) =>
+      requestUrl(call[0]).includes("/file-mutations/patch-element/"),
     );
-    expect(element.innerHTML).toBe(originalInnerHtml);
-    expect(rendered.recordEdit).not.toHaveBeenCalled();
+    expect(patchPost).toBeDefined();
+    const body = JSON.parse(String(patchPost?.[1]?.body)) as {
+      operations: Array<{ type: string; value?: string }>;
+    };
+    expect(body.operations).toHaveLength(1);
+    expect(body.operations[0]?.type).toBe("rich-text");
+    expectedMarkup(body.operations[0]?.value ?? "");
+    expect(rendered.showToast).not.toHaveBeenCalled();
   } finally {
     rendered.cleanup();
   }
 }
 
+describe("useDomEditCommits rich-text persist handling", () => {
+  beforeEach(() => {
+    ensureCssEscape();
+    vi.clearAllMocks();
+    vi.unstubAllGlobals();
+    document.body.replaceChildren();
+  });
+
+  it("restores the session snapshot when rich-text persistence fails", async () => {
+    stubPatchFetch({ ok: true, changed: false, matched: false });
+    const previousHtml = '<span style="color: red">Before</span>';
+    const html = '<span style="color: blue">After</span>';
+    const { iframe, element } = createPreviewElement(`<div data-hf-id="hf-card">${html}</div>`);
+    const rendered = renderDomEditCommits(createSelection(element), iframe);
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    try {
+      await act(async () => {
+        await rendered.hook.handleDomRichTextCommit({ element, html, previousHtml });
+      });
+
+      expect(element.innerHTML).toBe(previousHtml);
+      expect(rendered.showToast).toHaveBeenCalledWith(
+        expect.stringMatching(/Couldn't save "Hero title"/),
+        "error",
+      );
+    } finally {
+      warnSpy.mockRestore();
+      rendered.cleanup();
+    }
+  });
+
+  it("does not retarget a commit onto a replacement preview node", async () => {
+    const fetchMock = stubPatchFetch({ ok: true, changed: true, matched: true });
+    const html = '<span style="color: blue">After</span>';
+    const { iframe, element } = createPreviewElement(`<div data-hf-id="hf-card">${html}</div>`);
+    const rendered = renderDomEditCommits(createSelection(element), iframe);
+    const replacement = document.createElement("div");
+    replacement.dataset.hfId = "hf-card";
+    replacement.innerHTML = "Reloaded elsewhere";
+    element.replaceWith(replacement);
+
+    try {
+      await act(async () => {
+        await rendered.hook.handleDomRichTextCommit({
+          element,
+          html,
+          previousHtml: "Before",
+        });
+      });
+
+      expect(replacement.innerHTML).toBe("Reloaded elsewhere");
+      expect(fetchMock).not.toHaveBeenCalled();
+      expect(rendered.showToast).not.toHaveBeenCalled();
+    } finally {
+      rendered.cleanup();
+    }
+  });
+});
+
 describe("useDomEditCommits style persist handling", () => {
   beforeEach(() => {
     ensureCssEscape();
@@ -1146,12 +1214,26 @@ describe("useDomEditCommits style persist handling", () => {
     }
   });
 
-  it("refuses added child text fields without persisting serialized markup", async () => {
-    await expectRejectedTextStructureEdit((hook) => hook.handleDomAddTextField("first"));
+  it("persists an added child text field as the element's new markup", async () => {
+    await expectPersistedTextStructureEdit(
+      (hook) => hook.handleDomAddTextField("first"),
+      (markup) => {
+        expect(markup).toContain("First");
+        expect(markup).toContain("Second");
+        // The layer that was added, between the two that were there.
+        expect(markup.match(/<span/g) ?? []).toHaveLength(3);
+      },
+    );
   });
 
-  it("refuses removed child text fields without persisting serialized markup", async () => {
-    await expectRejectedTextStructureEdit((hook) => hook.handleDomRemoveTextField("first"));
+  it("persists a removed child text field as the element's new markup", async () => {
+    await expectPersistedTextStructureEdit(
+      (hook) => hook.handleDomRemoveTextField("first"),
+      (markup) => {
+        expect(markup).not.toContain("First");
+        expect(markup).toContain("Second");
+      },
+    );
   });
 
   it("keeps single self text commits on the text-content path", async () => {

package/src/hooks/useDomEditCommits.ts

@@ -378,6 +378,7 @@ export function useDomEditCommits({
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
     handleDomTextCommit,
+    handleDomRichTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
@@ -441,6 +442,7 @@ export function useDomEditCommits({
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
     handleDomTextCommit,
+    handleDomRichTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,

package/src/hooks/useDomEditSession.ts

@@ -231,6 +231,7 @@ export function useDomEditSession({
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
     handleDomTextCommit,
+    handleDomRichTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
     handleDomRemoveTextField,
@@ -501,6 +502,7 @@ export function useDomEditSession({
     handleDomRotationCommit: handleGsapAwareRotationCommit,
     handleDomManualEditsReset,
     handleDomTextCommit,
+    handleDomRichTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
     handleDomRemoveTextField,

package/src/hooks/useDomEditTextCommits.ts

@@ -11,6 +11,7 @@ import {
   ensureImportedFontFace,
 } from "../utils/studioFontHelpers";
 import {
+  buildDomEditRichTextPatchOperation,
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
   findElementForSelection,
@@ -23,17 +24,16 @@ import {
 } from "../components/editor/domEditing";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { PersistDomEditOperations } from "./domEditCommitTypes";
+import { canEditElementTextInline } from "../components/editor/domEditInlineText";
 import { buildTextFieldChildOperations } from "./domEditTextFieldCommitOps";
-import {
-  DomEditPersistUnsupportedTextStructureError,
-  reportDomEditPersistFailure,
-} from "./domEditPersistFailure";
+import { reportDomEditPersistFailure } from "./domEditPersistFailure";
 import {
   bumpDomEditCommitMapVersion,
   bumpDomEditCommitVersion,
   runDomEditCommit,
 } from "./domEditCommitRunner";
 import { useDomEditAttributeCommits } from "./useDomEditAttributeCommits";
+import type { InlineTextEditCommit } from "./useInlineTextEdit";
 
 // ── Types ──
 
@@ -62,6 +62,20 @@ interface DomTextCommitPlan {
   operations: PatchOperation[];
 }
 
+function canCommitInlineTextSelection(selection: DomEditSelection, element: HTMLElement): boolean {
+  if (selection.isCompositionHost || selection.isInsideLockedComposition) return false;
+  return canEditElementTextInline(element);
+}
+
+function ownsCurrentPreviewElement(
+  selection: DomEditSelection,
+  element: HTMLElement,
+  document: Document | null | undefined,
+): document is Document {
+  if (!document || !element.isConnected) return false;
+  return element === selection.element && element.ownerDocument === document;
+}
+
 function buildDomStyleCommitOperations(
   property: string,
   value: string,
@@ -102,9 +116,20 @@ function planDomTextCommit(
   const childOperations = usesSerializedTextFields
     ? buildTextFieldChildOperations(originalTextFields, nextTextFields)
     : null;
+  // Per-child operations when the layers still line up one-for-one, and the
+  // element's whole markup when they do not.
+  //
+  // `buildTextFieldChildOperations` can only address children that already
+  // exist, so it returns null for any change in how many there are — which is
+  // every delete and every add. That used to end here with "Couldn't save this
+  // text structure change": the panel offered a remove button and an Add text
+  // field row, and neither could ever save. A structure change has one honest
+  // operation, which is to write the structure.
   const operations =
     childOperations ??
-    (usesSerializedTextFields ? [] : [buildDomEditTextPatchOperation(nextContent)]);
+    (usesSerializedTextFields
+      ? [buildDomEditRichTextPatchOperation(nextContent)]
+      : [buildDomEditTextPatchOperation(nextContent)]);
 
   return {
     usesSerializedTextFields,
@@ -269,9 +294,6 @@ export function useDomEditTextCommits({
           }
         },
         persist: async () => {
-          if (textCommit.usesSerializedTextFields && textCommit.childOperations === null) {
-            throw new DomEditPersistUnsupportedTextStructureError();
-          }
           await persistDomEditOperations(domEditSelection, textCommit.operations, {
             label: "Edit text",
             skipRefresh: true,
@@ -307,6 +329,85 @@ export function useDomEditTextCommits({
     ],
   );
 
+  /**
+   * Persist an element's own markup, for a text edit that styled part of it.
+   *
+   * Its own commit rather than a mode of the one above: that one plans a change
+   * to the text-field model, which escapes markup on the way out and refuses a
+   * change in child structure, and both of those are correct for the design
+   * panel. Styling a run of characters is neither of those things. The element
+   * already holds what the user typed, so there is nothing to apply, only
+   * something to save and something to put back if saving fails.
+   */
+  const handleDomRichTextCommit = useCallback(
+    async ({ element, html, previousHtml }: InlineTextEditCommit) => {
+      if (!domEditSelection) return;
+      // The same gate that let the edit open, not the design panel's.
+      //
+      // The panel's rule is about its text fields, and it has none for an
+      // element whose text contains a line break: a `<span>` holding `<br>`s
+      // is not a leaf, so nothing inside is a field and the element reports no
+      // editable text at all. Editing in place does not use fields — it
+      // rewrites the element's own markup — so refusing on that rule refused
+      // elements the caret had just been opened in, and every colour the user
+      // chose was dropped on the way out with nothing said about it.
+      if (!canCommitInlineTextSelection(domEditSelection, element)) return;
+      const iframe = previewIframeRef.current;
+      const doc = iframe?.contentDocument;
+      // A preview reload replaces the document. Never resolve this commit onto
+      // the replacement node: it did not own the edit or its rollback snapshot.
+      if (!ownsCurrentPreviewElement(domEditSelection, element, doc)) return;
+      const isLatestTextCommit = bumpDomEditCommitVersion(domTextCommitVersionRef);
+      const operations = [buildDomEditRichTextPatchOperation(html)];
+      let appliedHtml = "";
+
+      await runDomEditCommit({
+        capture: () => {},
+        apply: () => {
+          // Idempotent: the caret put this there. Assigned anyway so a commit
+          // raised from anywhere but the element itself still lands.
+          element.innerHTML = html;
+          appliedHtml = element.innerHTML;
+        },
+        persist: async () => {
+          await persistDomEditOperations(domEditSelection, operations, {
+            label: "Edit text",
+            skipRefresh: true,
+            shouldSave: isLatestTextCommit,
+          });
+        },
+        shouldRevert: () => isLatestTextCommit(),
+        revert: () => {
+          // An external actor that changed the live node while the request was
+          // in flight owns its new value; only roll back the value we submitted.
+          if (element.isConnected && element.innerHTML === appliedHtml) {
+            element.innerHTML = previousHtml;
+          }
+        },
+        onError: (error) =>
+          reportDomEditPersistFailure(domEditSelection, operations, error, showToast),
+        shouldResync: isLatestTextCommit,
+        resync: () =>
+          resyncDomTextSelectionFromPreview(
+            doc,
+            domEditSelection,
+            activeCompPath,
+            buildDomSelectionFromTarget,
+            applyDomSelection,
+          ),
+      });
+    },
+    [
+      activeCompPath,
+      applyDomSelection,
+      buildDomSelectionFromTarget,
+      domEditSelection,
+      persistDomEditOperations,
+      previewIframeRef,
+      showToast,
+    ],
+  );
+
   const commitDomTextFields = useCallback(
     async (
       selection: DomEditSelection,
@@ -342,9 +443,6 @@ export function useDomEditTextCommits({
           }
         },
         persist: async () => {
-          if (textCommit.usesSerializedTextFields && textCommit.childOperations === null) {
-            throw new DomEditPersistUnsupportedTextStructureError();
-          }
           await persistDomEditOperations(selection, textCommit.operations, {
             label: "Edit text",
             skipRefresh: true,
@@ -477,6 +575,7 @@ export function useDomEditTextCommits({
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
     handleDomTextCommit,
+    handleDomRichTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,

package/src/hooks/useFileTree.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect, useMemo } from "react";
 import { FONT_EXT } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
+import { captureProjectProvenance } from "../components/feedback/projectProvenance";
 
 interface UseFileTreeOptions {
   projectId: string | null;
@@ -24,9 +25,13 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
     fetch(`/api/projects/${projectId}`)
       .then((r) => r.json())
       .then((data: { files?: string[]; dir?: string; compositions?: string[] }) => {
-        if (!cancelled && data.files) setFileTree(data.files);
-        if (!cancelled && data.compositions) setCompositionPaths(data.compositions);
-        if (!cancelled) setProjectDir(typeof data.dir === "string" ? data.dir : null);
+        if (cancelled) return;
+        if (data.files) setFileTree(data.files);
+        if (data.compositions) setCompositionPaths(data.compositions);
+        setProjectDir(typeof data.dir === "string" ? data.dir : null);
+        // Snapshot how this project was made, while the listing is in hand and
+        // the app is still alive. A crash later has no other way to learn it.
+        void captureProjectProvenance(projectId, data.files ?? [], data.compositions ?? []);
       })
       .catch(() => {
         if (!cancelled) setProjectDir(null);