fix(studio): keep the live preview attribute in sync with what gets persisted

Author: miguel-heygen

packages/studio/src/hooks/useDomEditAttributeCommits.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { resolveOptimisticAttributeValue } from "./useDomEditAttributeCommits";
+
+describe("resolveOptimisticAttributeValue", () => {
+  it("removes an HTML boolean attribute when the value is the literal string false", () => {
+    expect(resolveOptimisticAttributeValue("loop", "false")).toBeNull();
+    expect(resolveOptimisticAttributeValue("muted", "false")).toBeNull();
+  });
+
+  it("keeps the literal string false for a non-boolean attribute, matching what persist() writes", () => {
+    expect(resolveOptimisticAttributeValue("data-example", "false")).toBe("false");
+  });
+
+  it("always removes on null regardless of attribute", () => {
+    expect(resolveOptimisticAttributeValue("loop", null)).toBeNull();
+    expect(resolveOptimisticAttributeValue("data-example", null)).toBeNull();
+  });
+
+  it("passes any other value through unchanged", () => {
+    expect(resolveOptimisticAttributeValue("data-example", "true")).toBe("true");
+    expect(resolveOptimisticAttributeValue("loop", "true")).toBe("true");
+  });
+});

packages/studio/src/hooks/useDomEditAttributeCommits.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from "react";
-import type { PatchOperation } from "../utils/sourcePatcher";
+import { HTML_BOOLEAN_ATTRIBUTES, type PatchOperation } from "../utils/sourcePatcher";
 import {
   findElementForSelection,
   getDomEditTargetKey,
@@ -55,6 +55,14 @@ function resolveFullAttrName(attr: string, prefixData: boolean | undefined): str
   return prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
 }
 
+// Matches sourcePatcher's own boolean handling: "false" means "remove" only
+// for HTML_BOOLEAN_ATTRIBUTES (loop, muted, ...), so the live preview node
+// ends up holding what persist() actually writes to disk.
+export function resolveOptimisticAttributeValue(attr: string, value: string | null): string | null {
+  if (value === null) return null;
+  return value === "false" && HTML_BOOLEAN_ATTRIBUTES.has(attr) ? null : value;
+}
+
 function setOrRemovePreviewAttribute(
   el: HTMLElement,
   fullAttr: string,
@@ -393,8 +401,11 @@ export function useDomEditAttributeCommits({
         },
         apply: () => {
           if (!editedElement) return;
-          const nextValue = value === null || value === "false" ? null : value;
-          setOrRemovePreviewAttribute(editedElement, attr, nextValue);
+          setOrRemovePreviewAttribute(
+            editedElement,
+            attr,
+            resolveOptimisticAttributeValue(attr, value),
+          );
         },
         persist: () =>
           persistDomEditOperations(domEditSelection, [op], {

packages/studio/src/utils/sourcePatcher.ts

@@ -420,7 +420,7 @@ function findMatchingClosingTagIndex(html: string, tagName: string, contentStart
   return -1;
 }
 
-const HTML_BOOLEAN_ATTRIBUTES = new Set([
+export const HTML_BOOLEAN_ATTRIBUTES = new Set([
   "loop",
   "muted",
   "autoplay",