@hyperframes/studio 0.7.37 → 0.7.38

package/src/components/editor/colorGradingScopePatch.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { patchMediaColorGradingInHtml } from "./colorGradingScopePatch";
+
+describe("patchMediaColorGradingInHtml", () => {
+  it("adds color grading to video and image tags only", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      `<div><video id="v"></video><img id="i" /><audio id="a"></audio></div>`,
+      `{"preset":"natural-lift"}`,
+    );
+
+    expect(count).toBe(2);
+    expect(html).toContain(
+      `video id="v" data-color-grading="{&quot;preset&quot;:&quot;natural-lift&quot;}"`,
+    );
+    expect(html).toContain(
+      `img id="i" data-color-grading="{&quot;preset&quot;:&quot;natural-lift&quot;}"`,
+    );
+    expect(html).toContain(`<audio id="a"></audio>`);
+  });
+
+  it("replaces existing color grading without touching other attributes", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      `<video muted data-color-grading='old' playsinline></video>`,
+      `{"adjust":{"exposure":0.2}}`,
+    );
+
+    expect(count).toBe(1);
+    expect(html).toBe(
+      `<video muted data-color-grading="{&quot;adjust&quot;:{&quot;exposure&quot;:0.2}}" playsinline></video>`,
+    );
+  });
+
+  it("keeps quoted greater-than characters inside media attributes", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      `<img alt="before > after" src="photo.jpg">`,
+      `{"adjust":{"contrast":0.1}}`,
+    );
+
+    expect(count).toBe(1);
+    expect(html).toBe(
+      `<img alt="before > after" src="photo.jpg" data-color-grading="{&quot;adjust&quot;:{&quot;contrast&quot;:0.1}}">`,
+    );
+  });
+
+  it("removes color grading when value is empty", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      `<video data-color-grading="old"></video><img alt="">`,
+      null,
+    );
+
+    expect(count).toBe(1);
+    expect(html).toBe(`<video></video><img alt="">`);
+  });
+
+  it("does not patch media-looking text inside scripts, styles, or comments", () => {
+    const { html, count } = patchMediaColorGradingInHtml(
+      [
+        `<script>const tpl = '<video id="script-video"></video>';</script>`,
+        `<style>.icon::before { content: "<img>"; }</style>`,
+        `<!-- <img id="commented"> -->`,
+        `<video id="real"></video>`,
+      ].join(""),
+      `{"preset":"clean-studio"}`,
+    );
+
+    expect(count).toBe(1);
+    expect(html).toContain(`<script>const tpl = '<video id="script-video"></video>';</script>`);
+    expect(html).toContain(`<style>.icon::before { content: "<img>"; }</style>`);
+    expect(html).toContain(`<!-- <img id="commented"> -->`);
+    expect(html).toContain(
+      `<video id="real" data-color-grading="{&quot;preset&quot;:&quot;clean-studio&quot;}"></video>`,
+    );
+  });
+});

package/src/components/editor/colorGradingScopePatch.ts

@@ -0,0 +1,57 @@
+const MEDIA_TAG_RE = /<\s*(video|img)\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+const COLOR_GRADING_ATTR_RE = /\sdata-color-grading=(["'])([\s\S]*?)\1/i;
+const IGNORED_HTML_RANGE_RE = /<!--[\s\S]*?-->|<(script|style)\b[\s\S]*?<\/\1\s*>/gi;
+
+interface TextRange {
+  start: number;
+  end: number;
+}
+
+function collectIgnoredRanges(html: string): TextRange[] {
+  const ranges: TextRange[] = [];
+  let match: RegExpExecArray | null;
+  IGNORED_HTML_RANGE_RE.lastIndex = 0;
+  while ((match = IGNORED_HTML_RANGE_RE.exec(html)) !== null) {
+    ranges.push({ start: match.index, end: match.index + match[0].length });
+  }
+  return ranges;
+}
+
+function isInsideRange(offset: number, ranges: TextRange[]): boolean {
+  return ranges.some((range) => offset >= range.start && offset < range.end);
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function patchMediaTag(tag: string, value: string | null): string {
+  if (value === null || value === "") {
+    return tag.replace(COLOR_GRADING_ATTR_RE, "");
+  }
+
+  const nextAttr = ` data-color-grading="${escapeHtmlAttribute(value)}"`;
+  if (COLOR_GRADING_ATTR_RE.test(tag)) {
+    return tag.replace(COLOR_GRADING_ATTR_RE, nextAttr);
+  }
+  return tag.replace(/\s*\/?>$/, (end) => `${nextAttr}${end}`);
+}
+
+export function patchMediaColorGradingInHtml(
+  html: string,
+  value: string | null,
+): { html: string; count: number } {
+  let count = 0;
+  const ignoredRanges = collectIgnoredRanges(html);
+  const patched = html.replace(MEDIA_TAG_RE, (tag, _tagName, offset: number) => {
+    if (isInsideRange(offset, ignoredRanges)) return tag;
+    const next = patchMediaTag(tag, value);
+    if (next !== tag) count += 1;
+    return next;
+  });
+  return { html: patched, count };
+}

package/src/components/editor/manualEditingAvailability.test.ts

@@ -24,18 +24,6 @@ describe("manual editing availability", () => {
     expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
   });
 
-  it("keeps color grading off by default", async () => {
-    const availability = await loadAvailabilityWithEnv({});
-    expect(availability.STUDIO_COLOR_GRADING_ENABLED).toBe(false);
-  });
-
-  it("enables color grading with an explicit env flag", async () => {
-    const availability = await loadAvailabilityWithEnv({
-      VITE_STUDIO_ENABLE_COLOR_GRADING: "1",
-    });
-    expect(availability.STUDIO_COLOR_GRADING_ENABLED).toBe(true);
-  });
-
   it("disables preview selection when the inspector panel flag is explicitly off", async () => {
     const availability = await loadAvailabilityWithEnv({
       VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "0",

package/src/components/editor/manualEditingAvailability.ts

@@ -64,12 +64,6 @@ export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
-export const STUDIO_COLOR_GRADING_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_ENABLE_COLOR_GRADING", "VITE_STUDIO_COLOR_GRADING_ENABLED"],
-  false,
-);
-
 export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],