@hyperframes/studio 0.7.28 → 0.7.30

package/src/hooks/useDomEditCommits.ts

@@ -10,6 +10,11 @@ import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/e
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { PersistDomEditOperations } from "./domEditCommitTypes";
 import type { PatchOperation } from "../utils/sourcePatcher";
+import {
+  DomEditPersistUnsafeValueError,
+  DomEditPersistUnresolvableError,
+  warnDomEditPersistNoOp,
+} from "./domEditPersistFailure";
 import { useDomEditPositionPatchCommit } from "./useDomEditPositionPatchCommit";
 import { useDomEditTextCommits } from "./useDomEditTextCommits";
 import { useDomGeometryCommits } from "./useDomGeometryCommits";
@@ -22,6 +27,10 @@ function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
   return fields.map((field) => field.path).join(", ");
 }
 
+function getErrorDetail(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
 async function readErrorResponseBody(
   response: Response,
 ): Promise<{ error?: string; fields?: string[] } | null> {
@@ -168,7 +177,9 @@ export function useDomEditCommits({
       if (unsafeFields.length > 0) {
         const fields = formatUnsafeFieldList(unsafeFields);
         showToast("Couldn't save edit because it contains invalid layout values", "error");
-        throw new Error(`DOM patch contains unsafe values: ${fields}`);
+        throw new DomEditPersistUnsafeValueError(`DOM patch contains unsafe values: ${fields}`, {
+          alreadyToasted: true,
+        });
       }
 
       // Skip the SDK path when prepareContent is set (e.g. @font-face injection
@@ -203,7 +214,9 @@ export function useDomEditCommits({
       );
       if (!patchResponse.ok) {
         showToast(formatPatchRejectionMessage(await readErrorResponseBody(patchResponse)), "error");
-        throw await createStudioSaveHttpError(patchResponse, `Failed to patch ${targetPath}`);
+        throw await createStudioSaveHttpError(patchResponse, `Failed to patch ${targetPath}`, {
+          alreadyToasted: true,
+        });
       }
 
       const patchData = (await patchResponse.json()) as {
@@ -225,7 +238,9 @@ export function useDomEditCommits({
               composition: activeCompPath ?? undefined,
             });
           }
+          throw new DomEditPersistUnresolvableError(targetPath);
         }
+        warnDomEditPersistNoOp(selection, operations);
         return;
       }
 
@@ -234,9 +249,21 @@ export function useDomEditCommits({
 
       let finalContent = patchedContent;
       if (options?.prepareContent) {
-        finalContent = options.prepareContent(patchedContent, targetPath);
-        if (finalContent !== patchedContent) {
-          await writeProjectFile(targetPath, finalContent);
+        const preparedContent = options.prepareContent(patchedContent, targetPath);
+        if (preparedContent !== patchedContent) {
+          try {
+            await writeProjectFile(targetPath, preparedContent);
+            finalContent = preparedContent;
+          } catch (error) {
+            // The patch above already landed on disk — only the prepareContent
+            // embellishment (e.g. an injected @font-face) failed to write. Keep
+            // the already-persisted patchedContent instead of throwing, which
+            // would otherwise revert a change the server already committed.
+            showToast(
+              `Saved, but couldn't finish updating ${targetPath}: ${getErrorDetail(error)}`,
+              "error",
+            );
+          }
         }
       }
 
@@ -286,6 +313,7 @@ export function useDomEditCommits({
     buildDomSelectionFromTarget,
     persistDomEditOperations,
     resolveImportedFontAsset,
+    showToast,
   });
 
   // ── Position patch helper (shared by geometry + lifecycle hooks) ──

package/src/hooks/useDomEditTextCommits.ts

@@ -23,12 +23,24 @@ import {
 } from "../components/editor/domEditing";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { PersistDomEditOperations } from "./domEditCommitTypes";
+import { buildTextFieldChildOperations } from "./domEditTextFieldCommitOps";
+import {
+  DomEditPersistUnsupportedTextStructureError,
+  reportDomEditPersistFailure,
+} from "./domEditPersistFailure";
+import {
+  bumpDomEditCommitMapVersion,
+  bumpDomEditCommitVersion,
+  runDomEditCommit,
+} from "./domEditCommitRunner";
+import { useDomEditAttributeCommits } from "./useDomEditAttributeCommits";
 
 // ── Types ──
 
 export interface UseDomEditTextCommitsParams {
   activeCompPath: string | null;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+  showToast: (message: string, tone?: "error" | "info") => void;
   domEditSelection: DomEditSelection | null;
   applyDomSelection: (
     selection: DomEditSelection | null,
@@ -43,31 +55,78 @@ export interface UseDomEditTextCommitsParams {
   resolveImportedFontAsset: (fontFamilyValue: string) => ImportedFontAsset | null;
 }
 
-function applyPreviewAttribute(
+interface DomTextCommitPlan {
+  usesSerializedTextFields: boolean;
+  nextContent: string;
+  childOperations: PatchOperation[] | null;
+  operations: PatchOperation[];
+}
+
+function buildDomStyleCommitOperations(
+  property: string,
+  value: string,
+  isImageBackgroundCommit: boolean,
+): PatchOperation[] {
+  const operations: PatchOperation[] = [
+    buildDomEditStylePatchOperation(property, normalizeDomEditStyleValue(property, value)),
+  ];
+  if (isImageBackgroundCommit) {
+    operations.push(
+      buildDomEditStylePatchOperation("background-position", "center"),
+      buildDomEditStylePatchOperation("background-repeat", "no-repeat"),
+      buildDomEditStylePatchOperation("background-size", "contain"),
+    );
+  }
+  return operations;
+}
+
+function buildNextDomTextFields(
+  textFields: DomEditTextField[],
+  value: string,
+  fieldKey?: string,
+): DomEditTextField[] {
+  if (textFields.length === 0) return [];
+  return textFields.map((field) => (field.key === fieldKey ? { ...field, value } : field));
+}
+
+function planDomTextCommit(
+  originalTextFields: DomEditTextField[],
+  nextTextFields: DomEditTextField[],
+  plainTextContent: string,
+): DomTextCommitPlan {
+  const usesSerializedTextFields =
+    nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child");
+  const nextContent = usesSerializedTextFields
+    ? serializeDomEditTextFields(nextTextFields)
+    : plainTextContent;
+  const childOperations = usesSerializedTextFields
+    ? buildTextFieldChildOperations(originalTextFields, nextTextFields)
+    : null;
+  const operations =
+    childOperations ??
+    (usesSerializedTextFields ? [] : [buildDomEditTextPatchOperation(nextContent)]);
+
+  return {
+    usesSerializedTextFields,
+    nextContent,
+    childOperations,
+    operations,
+  };
+}
+
+async function resyncDomTextSelectionFromPreview(
   doc: Document | null | undefined,
   selection: DomEditSelection,
   activeCompPath: string | null,
-  attr: string,
-  value: string | null,
-  options: { prefixData?: boolean; removeFalse?: boolean } = {},
-): void {
+  buildDomSelectionFromTarget: UseDomEditTextCommitsParams["buildDomSelectionFromTarget"],
+  applyDomSelection: UseDomEditTextCommitsParams["applyDomSelection"],
+): Promise<void> {
   if (!doc) return;
-  const el = findElementForSelection(doc, selection, activeCompPath);
-  if (!el) return;
-  const fullAttr = options.prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
-  if (value === null || value === "" || (options.removeFalse && value === "false")) {
-    el.removeAttribute(fullAttr);
-  } else {
-    el.setAttribute(fullAttr, value);
-  }
-}
-
-interface DataAttributeCommitOptions {
-  label: string;
-  coalescePrefix: string;
-  skipRefresh: boolean;
-  warningMessage: string;
-  refreshAfter?: boolean;
+  const refreshed = findElementForSelection(doc, selection, activeCompPath);
+  if (!refreshed) return;
+  const nextSelection = await buildDomSelectionFromTarget(refreshed);
+  if (!nextSelection) return;
+  applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
 }
 
 // ── Hook ──
@@ -75,6 +134,7 @@ interface DataAttributeCommitOptions {
 export function useDomEditTextCommits({
   activeCompPath,
   previewIframeRef,
+  showToast,
   domEditSelection,
   applyDomSelection,
   refreshDomEditSelectionFromPreview,
@@ -83,151 +143,91 @@ export function useDomEditTextCommits({
   resolveImportedFontAsset,
 }: UseDomEditTextCommitsParams) {
   const domTextCommitVersionRef = useRef(0);
+  const domStyleCommitVersionRef = useRef(new Map<string, number>());
+
+  const { handleDomAttributeCommit, handleDomAttributeLiveCommit, handleDomHtmlAttributeCommit } =
+    useDomEditAttributeCommits({
+      activeCompPath,
+      previewIframeRef,
+      showToast,
+      domEditSelection,
+      refreshDomEditSelectionFromPreview,
+      persistDomEditOperations,
+    });
 
   const handleDomStyleCommit = useCallback(
     async (property: string, value: string) => {
       if (!domEditSelection) return;
       if (isManualGeometryStyleProperty(property)) return;
       if (!domEditSelection.capabilities.canEditStyles) return;
+      const styleCommitKey = `${getDomEditTargetKey(domEditSelection)}:${property}`;
+      const isLatestStyleCommit = bumpDomEditCommitMapVersion(
+        domStyleCommitVersionRef.current,
+        styleCommitKey,
+      );
       const importedFont = property === "font-family" ? resolveImportedFontAsset(value) : null;
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
-      if (doc) {
-        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
-        if (el) {
-          el.style.setProperty(property, normalizeDomEditStyleValue(property, value));
-          if (property === "font-family") {
+      const normalizedValue = normalizeDomEditStyleValue(property, value);
+      const isImageBackgroundCommit =
+        property === "background-image" && isImageBackgroundValue(value);
+      let editedElement: HTMLElement | null = null;
+      let previousInlineValue: string | null = null;
+      const operations = buildDomStyleCommitOperations(property, value, isImageBackgroundCommit);
+      const skipRefresh = property !== "z-index";
+
+      await runDomEditCommit({
+        capture: () => {
+          if (!doc) return;
+          const el = findElementForSelection(doc, domEditSelection, activeCompPath);
+          if (!el) return;
+          editedElement = el;
+          previousInlineValue = el.style.getPropertyValue(property);
+        },
+        apply: () => {
+          if (!editedElement) return;
+          editedElement.style.setProperty(property, normalizedValue);
+          if (property === "font-family" && doc) {
             injectPreviewGoogleFont(doc, value);
             if (importedFont) injectPreviewImportedFont(doc, importedFont);
           }
-          if (property === "background-image" && isImageBackgroundValue(value)) {
-            el.style.setProperty("background-position", "center");
-            el.style.setProperty("background-repeat", "no-repeat");
-            el.style.setProperty("background-size", "contain");
+          if (isImageBackgroundCommit) {
+            editedElement.style.setProperty("background-position", "center");
+            editedElement.style.setProperty("background-repeat", "no-repeat");
+            editedElement.style.setProperty("background-size", "contain");
           }
-        }
-      }
-      const operations: PatchOperation[] = [
-        buildDomEditStylePatchOperation(property, normalizeDomEditStyleValue(property, value)),
-      ];
-      if (property === "background-image" && isImageBackgroundValue(value)) {
-        operations.push(
-          buildDomEditStylePatchOperation("background-position", "center"),
-          buildDomEditStylePatchOperation("background-repeat", "no-repeat"),
-          buildDomEditStylePatchOperation("background-size", "contain"),
-        );
-      }
-      const skipRefresh = property !== "z-index";
-      try {
-        await persistDomEditOperations(domEditSelection, operations, {
-          label: "Edit layer style",
-          skipRefresh,
-          prepareContent: importedFont
-            ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
-            : undefined,
-        });
-      } catch {}
-      refreshDomEditSelectionFromPreview(domEditSelection);
-    },
-    [
-      activeCompPath,
-      domEditSelection,
-      persistDomEditOperations,
-      refreshDomEditSelectionFromPreview,
-      resolveImportedFontAsset,
-      previewIframeRef,
-    ],
-  );
-
-  const commitDataAttribute = useCallback(
-    async (attr: string, value: string | null, options: DataAttributeCommitOptions) => {
-      if (!domEditSelection) return;
-      const iframe = previewIframeRef.current;
-      applyPreviewAttribute(
-        iframe?.contentDocument,
-        domEditSelection,
-        activeCompPath,
-        attr,
-        value,
-        {
-          prefixData: true,
         },
-      );
-      const op: PatchOperation = { type: "attribute", property: attr, value };
-      try {
-        await persistDomEditOperations(domEditSelection, [op], {
-          label: options.label,
-          coalesceKey: `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`,
-          skipRefresh: options.skipRefresh,
-        });
-      } catch {}
-      if (options.refreshAfter) {
-        refreshDomEditSelectionFromPreview(domEditSelection);
-      }
-    },
-    [
-      activeCompPath,
-      domEditSelection,
-      persistDomEditOperations,
-      refreshDomEditSelectionFromPreview,
-      previewIframeRef,
-    ],
-  );
-
-  const handleDomAttributeCommit = useCallback(
-    async (attr: string, value: string) => {
-      await commitDataAttribute(attr, value, {
-        label: `Edit ${attr.replace(/-/g, " ")}`,
-        coalescePrefix: "attr",
-        skipRefresh: false,
-        warningMessage: "[Studio] Attribute persist failed:",
-        refreshAfter: true,
-      });
-    },
-    [commitDataAttribute],
-  );
-
-  const handleDomAttributeLiveCommit = useCallback(
-    async (attr: string, value: string | null) => {
-      await commitDataAttribute(attr, value, {
-        label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
-        coalescePrefix: "attr-live",
-        skipRefresh: true,
-        warningMessage: "[Studio] Live attribute persist failed:",
-      });
-    },
-    [commitDataAttribute],
-  );
-
-  const handleDomHtmlAttributeCommit = useCallback(
-    async (attr: string, value: string | null) => {
-      if (!domEditSelection) return;
-      const iframe = previewIframeRef.current;
-      applyPreviewAttribute(
-        iframe?.contentDocument,
-        domEditSelection,
-        activeCompPath,
-        attr,
-        value,
-        {
-          removeFalse: true,
+        persist: () =>
+          persistDomEditOperations(domEditSelection, operations, {
+            label: "Edit layer style",
+            skipRefresh,
+            prepareContent: importedFont
+              ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
+              : undefined,
+          }),
+        shouldRevert: () => isLatestStyleCommit(),
+        revert: () => {
+          if (!editedElement || previousInlineValue === null) return;
+          // ponytail: background-image side-effect styles are not reverted here.
+          if (previousInlineValue === "") {
+            editedElement.style.removeProperty(property);
+          } else {
+            editedElement.style.setProperty(property, previousInlineValue);
+          }
         },
-      );
-      const op: PatchOperation = { type: "html-attribute", property: attr, value };
-      try {
-        await persistDomEditOperations(domEditSelection, [op], {
-          label: `Edit ${attr}`,
-          coalesceKey: `html-attr:${attr}:${getDomEditTargetKey(domEditSelection)}`,
-          skipRefresh: false,
-        });
-      } catch {}
-      refreshDomEditSelectionFromPreview(domEditSelection);
+        onError: (error) =>
+          reportDomEditPersistFailure(domEditSelection, operations, error, showToast),
+        shouldResync: isLatestStyleCommit,
+        resync: () => refreshDomEditSelectionFromPreview(domEditSelection),
+      });
     },
     [
       activeCompPath,
       domEditSelection,
       persistDomEditOperations,
       refreshDomEditSelectionFromPreview,
+      resolveImportedFontAsset,
+      showToast,
       previewIframeRef,
     ],
   );
@@ -236,53 +236,57 @@ export function useDomEditTextCommits({
     async (value: string, fieldKey?: string) => {
       if (!domEditSelection) return;
       if (!isTextEditableSelection(domEditSelection)) return;
-      const commitVersion = domTextCommitVersionRef.current + 1;
-      domTextCommitVersionRef.current = commitVersion;
-      const nextTextFields =
-        domEditSelection.textFields.length > 0
-          ? domEditSelection.textFields.map((field) =>
-              field.key === fieldKey ? { ...field, value } : field,
-            )
-          : [];
-      const nextContent =
-        nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child")
-          ? serializeDomEditTextFields(nextTextFields)
-          : value;
+      const isLatestTextCommit = bumpDomEditCommitVersion(domTextCommitVersionRef);
+      const nextTextFields = buildNextDomTextFields(domEditSelection.textFields, value, fieldKey);
+      const textCommit = planDomTextCommit(domEditSelection.textFields, nextTextFields, value);
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
-      if (doc) {
-        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
-        if (el) {
-          if (
-            nextTextFields.length > 1 ||
-            nextTextFields.some((field) => field.source === "child")
-          ) {
-            el.innerHTML = nextContent;
+      let editedElement: HTMLElement | null = null;
+      let previousInnerHtml: string | null = null;
+
+      await runDomEditCommit({
+        capture: () => {
+          if (!doc) return;
+          const el = findElementForSelection(doc, domEditSelection, activeCompPath);
+          if (!el) return;
+          editedElement = el;
+          previousInnerHtml = el.innerHTML;
+        },
+        apply: () => {
+          if (!editedElement) return;
+          if (textCommit.usesSerializedTextFields) {
+            editedElement.innerHTML = textCommit.nextContent;
           } else {
-            el.textContent = value;
+            editedElement.textContent = value;
           }
-        }
-      }
-      await persistDomEditOperations(
-        domEditSelection,
-        [buildDomEditTextPatchOperation(nextContent)],
-        {
-          label: "Edit text",
-          skipRefresh: true,
-          shouldSave: () => domTextCommitVersionRef.current === commitVersion,
         },
-      );
-      if (domTextCommitVersionRef.current !== commitVersion) return;
-
-      if (doc) {
-        const refreshed = findElementForSelection(doc, domEditSelection, activeCompPath);
-        if (refreshed) {
-          const nextSelection = await buildDomSelectionFromTarget(refreshed);
-          if (nextSelection) {
-            applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+        persist: async () => {
+          if (textCommit.usesSerializedTextFields && textCommit.childOperations === null) {
+            throw new DomEditPersistUnsupportedTextStructureError();
           }
-        }
-      }
+          await persistDomEditOperations(domEditSelection, textCommit.operations, {
+            label: "Edit text",
+            skipRefresh: true,
+            shouldSave: isLatestTextCommit,
+          });
+        },
+        shouldRevert: () => isLatestTextCommit(),
+        revert: () => {
+          if (!editedElement || previousInnerHtml === null) return;
+          editedElement.innerHTML = previousInnerHtml;
+        },
+        onError: (error) =>
+          reportDomEditPersistFailure(domEditSelection, textCommit.operations, error, showToast),
+        shouldResync: isLatestTextCommit,
+        resync: () =>
+          resyncDomTextSelectionFromPreview(
+            doc,
+            domEditSelection,
+            activeCompPath,
+            buildDomSelectionFromTarget,
+            applyDomSelection,
+          ),
+      });
     },
     [
       activeCompPath,
@@ -291,6 +295,7 @@ export function useDomEditTextCommits({
       domEditSelection,
       persistDomEditOperations,
       previewIframeRef,
+      showToast,
     ],
   );
 
@@ -300,45 +305,62 @@ export function useDomEditTextCommits({
       nextTextFields: DomEditTextField[],
       options?: { importedFont?: ImportedFontAsset | null },
     ) => {
-      const nextContent =
-        nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child")
-          ? serializeDomEditTextFields(nextTextFields)
-          : (nextTextFields[0]?.value ?? "");
-
+      const textCommit = planDomTextCommit(
+        selection.textFields,
+        nextTextFields,
+        nextTextFields[0]?.value ?? "",
+      );
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
-      if (doc) {
-        const el = findElementForSelection(doc, selection, activeCompPath);
-        if (el) {
-          if (
-            nextTextFields.length > 1 ||
-            nextTextFields.some((field) => field.source === "child")
-          ) {
-            el.innerHTML = nextContent;
-          } else {
-            el.textContent = nextContent;
-          }
-        }
-      }
-
+      let editedElement: HTMLElement | null = null;
+      let previousInnerHtml: string | null = null;
       const importedFont = options?.importedFont ?? null;
-      await persistDomEditOperations(selection, [buildDomEditTextPatchOperation(nextContent)], {
-        label: "Edit text",
-        skipRefresh: true,
-        prepareContent: importedFont
-          ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
-          : undefined,
-      });
 
-      if (doc) {
-        const refreshed = findElementForSelection(doc, selection, activeCompPath);
-        if (refreshed) {
-          const nextSelection = await buildDomSelectionFromTarget(refreshed);
-          if (nextSelection) {
-            applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+      await runDomEditCommit({
+        capture: () => {
+          if (!doc) return;
+          const el = findElementForSelection(doc, selection, activeCompPath);
+          if (!el) return;
+          editedElement = el;
+          previousInnerHtml = el.innerHTML;
+        },
+        apply: () => {
+          if (!editedElement) return;
+          if (textCommit.usesSerializedTextFields) {
+            editedElement.innerHTML = textCommit.nextContent;
+          } else {
+            editedElement.textContent = textCommit.nextContent;
           }
-        }
-      }
+        },
+        persist: async () => {
+          if (textCommit.usesSerializedTextFields && textCommit.childOperations === null) {
+            throw new DomEditPersistUnsupportedTextStructureError();
+          }
+          await persistDomEditOperations(selection, textCommit.operations, {
+            label: "Edit text",
+            skipRefresh: true,
+            prepareContent: importedFont
+              ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
+              : undefined,
+          });
+        },
+        shouldRevert: () => true,
+        revert: () => {
+          if (!editedElement || previousInnerHtml === null) return;
+          editedElement.innerHTML = previousInnerHtml;
+        },
+        onError: (error) =>
+          reportDomEditPersistFailure(selection, textCommit.operations, error, showToast),
+        shouldResync: () => true,
+        resync: () =>
+          resyncDomTextSelectionFromPreview(
+            doc,
+            selection,
+            activeCompPath,
+            buildDomSelectionFromTarget,
+            applyDomSelection,
+          ),
+      });
     },
     [
       activeCompPath,
@@ -346,6 +368,7 @@ export function useDomEditTextCommits({
       buildDomSelectionFromTarget,
       persistDomEditOperations,
       previewIframeRef,
+      showToast,
     ],
   );