@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/hooks/useDomEditSession.ts

@@ -0,0 +1,342 @@
+import { useEffect } from "react";
+import type { TimelineElement } from "../player";
+import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
+import { findElementForSelection } from "../components/editor/domEditing";
+import type { StudioManualEditManifest } from "../components/editor/manualEdits";
+import type { StudioMotionManifest } from "../components/editor/studioMotion";
+import type { ImportedFontAsset } from "../components/editor/fontAssets";
+import type { EditHistoryKind } from "../utils/editHistory";
+import type { RightPanelTab } from "../utils/studioHelpers";
+import { useAskAgentModal } from "./useAskAgentModal";
+import { useDomSelection } from "./useDomSelection";
+import { usePreviewInteraction } from "./usePreviewInteraction";
+import { useDomEditCommits } from "./useDomEditCommits";
+
+// ── Types ──
+
+interface RecordEditInput {
+  label: string;
+  kind: EditHistoryKind;
+  coalesceKey?: string;
+  files: Record<string, { before: string; after: string }>;
+}
+
+export interface UseDomEditSessionParams {
+  projectId: string | null;
+  activeCompPath: string | null;
+  isMasterView: boolean;
+  compIdToSrc: Map<string, string>;
+  captionEditMode: boolean;
+  compositionLoading: boolean;
+  previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+  timelineElements: TimelineElement[];
+  currentTime: number;
+  setSelectedTimelineElementId: (id: string | null) => void;
+  setRightCollapsed: (collapsed: boolean) => void;
+  setRightPanelTab: (tab: RightPanelTab) => void;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  refreshPreviewDocumentVersion: () => void;
+  commitStudioManualEditManifestOptimistically: (
+    updateManifest: (manifest: StudioManualEditManifest) => StudioManualEditManifest,
+    options: { label: string; coalesceKey: string },
+  ) => void;
+  commitStudioMotionManifestOptimistically: (
+    updateManifest: (manifest: StudioMotionManifest) => StudioMotionManifest,
+    options: { label: string; coalesceKey: string },
+  ) => void;
+  applyCurrentStudioManualEditsToPreview: (iframe: HTMLIFrameElement | null) => void;
+  applyCurrentStudioMotionToPreview: (iframe: HTMLIFrameElement | null) => void;
+  readProjectFile: (path: string) => Promise<string>;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  domEditSaveTimestampRef: React.MutableRefObject<number>;
+  editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
+  fileTree: string[];
+  importedFontAssetsRef: React.MutableRefObject<ImportedFontAsset[]>;
+  projectDir: string | null;
+  projectIdRef: React.MutableRefObject<string | null>;
+  previewIframe: HTMLIFrameElement | null;
+  refreshKey: number;
+  rightPanelTab: RightPanelTab;
+  applyStudioManualEditsToPreviewRef: React.MutableRefObject<
+    (iframe: HTMLIFrameElement) => Promise<void>
+  >;
+  applyStudioMotionToPreviewRef: React.MutableRefObject<
+    (iframe: HTMLIFrameElement) => Promise<void>
+  >;
+  syncPreviewHistoryHotkey: (iframe: HTMLIFrameElement | null) => void;
+  reloadPreview: () => void;
+  setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
+}
+
+// ── Hook ──
+
+export function useDomEditSession({
+  projectId,
+  activeCompPath,
+  isMasterView,
+  compIdToSrc,
+  captionEditMode,
+  compositionLoading,
+  previewIframeRef,
+  timelineElements,
+  currentTime,
+  setSelectedTimelineElementId,
+  setRightCollapsed,
+  setRightPanelTab,
+  showToast,
+  refreshPreviewDocumentVersion,
+  commitStudioManualEditManifestOptimistically,
+  commitStudioMotionManifestOptimistically,
+  applyCurrentStudioManualEditsToPreview,
+  applyCurrentStudioMotionToPreview,
+  readProjectFile: _readProjectFile,
+  writeProjectFile,
+  domEditSaveTimestampRef,
+  editHistory,
+  fileTree,
+  importedFontAssetsRef,
+  projectDir,
+  projectIdRef,
+  previewIframe,
+  refreshKey,
+  rightPanelTab,
+  applyStudioManualEditsToPreviewRef,
+  applyStudioMotionToPreviewRef,
+  syncPreviewHistoryHotkey,
+  reloadPreview,
+  setRefreshKey: _setRefreshKey,
+}: UseDomEditSessionParams) {
+  void _setRefreshKey;
+  // ── Selection (delegated to useDomSelection) ──
+
+  const {
+    domEditSelection,
+    domEditGroupSelections,
+    domEditHoverSelection,
+    domEditSelectionRef,
+    domEditGroupSelectionsRef,
+    applyDomSelection,
+    clearDomSelection,
+    buildDomSelectionFromTarget,
+    resolveDomSelectionFromPreviewPoint,
+    updateDomEditHoverSelection,
+    buildDomSelectionForTimelineElement,
+    handleTimelineElementSelect,
+    refreshDomEditSelectionFromPreview,
+    refreshDomEditGroupSelectionsFromPreview,
+  } = useDomSelection({
+    projectId,
+    activeCompPath,
+    isMasterView,
+    compIdToSrc,
+    captionEditMode,
+    previewIframeRef,
+    timelineElements,
+    setSelectedTimelineElementId,
+    setRightCollapsed,
+    setRightPanelTab,
+    previewIframe,
+    refreshKey,
+    rightPanelTab,
+  });
+
+  // ── Agent modal (delegated to useAskAgentModal) ──
+
+  const {
+    agentModalOpen,
+    agentModalAnchorPoint,
+    copiedAgentPrompt,
+    agentPromptSelectionContext,
+    setAgentModalOpen,
+    setAgentPromptSelectionContext,
+    setAgentModalAnchorPoint,
+    preloadAgentPromptSnippet,
+    handleAskAgent,
+    handleAgentModalSubmit,
+  } = useAskAgentModal({
+    projectId,
+    activeCompPath,
+    projectDir,
+    projectIdRef,
+    currentTime,
+    showToast,
+    domEditSelectionRef,
+    domEditSelection,
+  });
+
+  // ── Preview interaction (delegated to usePreviewInteraction) ──
+
+  const {
+    handlePreviewCanvasMouseDown,
+    handlePreviewCanvasPointerMove,
+    handlePreviewCanvasPointerLeave,
+    handleBlockedDomMove,
+    handleDomManualDragStart,
+  } = usePreviewInteraction({
+    captionEditMode,
+    compositionLoading,
+    previewIframeRef,
+    activeCompPath,
+    showToast,
+    applyDomSelection,
+    resolveDomSelectionFromPreviewPoint,
+    updateDomEditHoverSelection,
+    preloadAgentPromptSnippet,
+    setAgentPromptSelectionContext,
+    setAgentModalAnchorPoint,
+    setAgentModalOpen,
+  });
+
+  // ── Commit handlers (delegated to useDomEditCommits) ──
+
+  const {
+    resolveImportedFontAsset,
+    handleDomStyleCommit,
+    handleDomTextCommit,
+    handleDomTextFieldStyleCommit,
+    handleDomAddTextField,
+    handleDomRemoveTextField,
+    handleDomPathOffsetCommit,
+    handleDomGroupPathOffsetCommit,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
+    handleDomManualEditsReset,
+    handleDomMotionCommit,
+    handleDomMotionClear,
+    handleDomEditElementDelete,
+  } = useDomEditCommits({
+    activeCompPath,
+    previewIframeRef,
+    showToast,
+    commitStudioManualEditManifestOptimistically,
+    commitStudioMotionManifestOptimistically,
+    applyCurrentStudioManualEditsToPreview,
+    applyCurrentStudioMotionToPreview,
+    writeProjectFile,
+    domEditSaveTimestampRef,
+    editHistory,
+    fileTree,
+    importedFontAssetsRef,
+    projectId,
+    projectIdRef,
+    reloadPreview,
+    domEditSelection,
+    domEditSelectionRef,
+    domEditGroupSelectionsRef,
+    applyDomSelection,
+    clearDomSelection,
+    refreshDomEditSelectionFromPreview,
+    refreshDomEditGroupSelectionsFromPreview,
+    buildDomSelectionFromTarget,
+  });
+
+  // ── Effects ──
+
+  // Sync selection from preview document on load / refresh
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!previewIframe) return;
+
+    const syncSelectionFromDocument = () => {
+      if (!STUDIO_INSPECTOR_PANELS_ENABLED || captionEditMode) return;
+      const currentSelection = domEditSelectionRef.current;
+      if (!currentSelection) return;
+      let doc: Document | null = null;
+      try {
+        doc = previewIframe.contentDocument;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+
+      const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
+      if (!nextElement) {
+        applyDomSelection(null, { revealPanel: false });
+        return;
+      }
+
+      const nextSelection = buildDomSelectionFromTarget(nextElement);
+      if (nextSelection) {
+        applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+      }
+    };
+
+    syncPreviewHistoryHotkey(previewIframe);
+    void (async () => {
+      await applyStudioManualEditsToPreviewRef.current(previewIframe);
+      await applyStudioMotionToPreviewRef.current(previewIframe);
+    })();
+    syncSelectionFromDocument();
+    refreshPreviewDocumentVersion();
+
+    const handleLoad = () => {
+      syncPreviewHistoryHotkey(previewIframe);
+      void (async () => {
+        await applyStudioManualEditsToPreviewRef.current(previewIframe);
+        await applyStudioMotionToPreviewRef.current(previewIframe);
+      })();
+      syncSelectionFromDocument();
+      refreshPreviewDocumentVersion();
+    };
+
+    previewIframe.addEventListener("load", handleLoad);
+    return () => {
+      previewIframe.removeEventListener("load", handleLoad);
+    };
+  }, [
+    activeCompPath,
+    applyDomSelection,
+    buildDomSelectionFromTarget,
+    captionEditMode,
+    domEditSelectionRef,
+    previewIframe,
+    refreshPreviewDocumentVersion,
+    syncPreviewHistoryHotkey,
+    applyStudioManualEditsToPreviewRef,
+    applyStudioMotionToPreviewRef,
+  ]);
+
+  return {
+    // State
+    domEditSelection,
+    domEditGroupSelections,
+    domEditHoverSelection,
+    agentModalOpen,
+    agentModalAnchorPoint,
+    copiedAgentPrompt,
+    agentPromptSelectionContext,
+
+    // Refs
+    domEditSelectionRef,
+
+    // Callbacks
+    handleTimelineElementSelect,
+    handlePreviewCanvasMouseDown,
+    handlePreviewCanvasPointerMove,
+    handlePreviewCanvasPointerLeave,
+    applyDomSelection,
+    clearDomSelection,
+    handleDomStyleCommit,
+    handleDomPathOffsetCommit,
+    handleDomGroupPathOffsetCommit,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
+    handleDomManualEditsReset,
+    handleDomMotionCommit,
+    handleDomMotionClear,
+    handleDomTextCommit,
+    handleDomTextFieldStyleCommit,
+    handleDomAddTextField,
+    handleDomRemoveTextField,
+    handleAskAgent,
+    handleAgentModalSubmit,
+    handleBlockedDomMove,
+    handleDomManualDragStart,
+    handleDomEditElementDelete,
+    buildDomSelectionForTimelineElement,
+    resolveImportedFontAsset,
+    setAgentModalOpen,
+    setAgentPromptSelectionContext,
+    setAgentModalAnchorPoint,
+  };
+}

package/src/hooks/useDomEditTextCommits.ts

@@ -0,0 +1,330 @@
+import { useCallback, useRef } from "react";
+import type { PatchOperation } from "../utils/sourcePatcher";
+import {
+  isImageBackgroundValue,
+  isManualGeometryStyleProperty,
+  normalizeDomEditStyleValue,
+} from "../utils/studioHelpers";
+import {
+  injectPreviewGoogleFont,
+  injectPreviewImportedFont,
+  ensureImportedFontFace,
+} from "../utils/studioFontHelpers";
+import {
+  buildDomEditStylePatchOperation,
+  buildDomEditTextPatchOperation,
+  findElementForSelection,
+  isTextEditableSelection,
+  serializeDomEditTextFields,
+  buildDefaultDomEditTextField,
+  type DomEditTextField,
+  type DomEditSelection,
+} from "../components/editor/domEditing";
+import type { ImportedFontAsset } from "../components/editor/fontAssets";
+import type { PersistDomEditOperations } from "./useDomEditCommits";
+
+// ── Types ──
+
+export interface UseDomEditTextCommitsParams {
+  activeCompPath: string | null;
+  previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+  domEditSelection: DomEditSelection | null;
+  applyDomSelection: (
+    selection: DomEditSelection | null,
+    options?: { revealPanel?: boolean; additive?: boolean; preserveGroup?: boolean },
+  ) => void;
+  refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => void;
+  buildDomSelectionFromTarget: (
+    target: HTMLElement,
+    options?: { preferClipAncestor?: boolean },
+  ) => DomEditSelection | null;
+  persistDomEditOperations: PersistDomEditOperations;
+  resolveImportedFontAsset: (fontFamilyValue: string) => ImportedFontAsset | null;
+}
+
+// ── Hook ──
+
+export function useDomEditTextCommits({
+  activeCompPath,
+  previewIframeRef,
+  domEditSelection,
+  applyDomSelection,
+  refreshDomEditSelectionFromPreview,
+  buildDomSelectionFromTarget,
+  persistDomEditOperations,
+  resolveImportedFontAsset,
+}: UseDomEditTextCommitsParams) {
+  const domTextCommitVersionRef = useRef(0);
+
+  const handleDomStyleCommit = useCallback(
+    async (property: string, value: string) => {
+      if (!domEditSelection) return;
+      if (isManualGeometryStyleProperty(property)) return;
+      if (!domEditSelection.capabilities.canEditStyles) return;
+      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") {
+            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");
+          }
+        }
+      }
+      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 (err) {
+        console.warn("[Studio] Style persist failed:", err instanceof Error ? err.message : err);
+      }
+      refreshDomEditSelectionFromPreview(domEditSelection);
+    },
+    [
+      activeCompPath,
+      domEditSelection,
+      persistDomEditOperations,
+      refreshDomEditSelectionFromPreview,
+      resolveImportedFontAsset,
+      previewIframeRef,
+    ],
+  );
+
+  const handleDomTextCommit = useCallback(
+    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 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;
+          } else {
+            el.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 = buildDomSelectionFromTarget(refreshed);
+          if (nextSelection) {
+            applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+          }
+        }
+      }
+    },
+    [
+      activeCompPath,
+      applyDomSelection,
+      buildDomSelectionFromTarget,
+      domEditSelection,
+      persistDomEditOperations,
+      previewIframeRef,
+    ],
+  );
+
+  const commitDomTextFields = useCallback(
+    async (
+      selection: DomEditSelection,
+      nextTextFields: DomEditTextField[],
+      options?: { importedFont?: ImportedFontAsset | null },
+    ) => {
+      const nextContent =
+        nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child")
+          ? serializeDomEditTextFields(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;
+          }
+        }
+      }
+
+      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 = buildDomSelectionFromTarget(refreshed);
+          if (nextSelection) {
+            applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+          }
+        }
+      }
+    },
+    [
+      activeCompPath,
+      applyDomSelection,
+      buildDomSelectionFromTarget,
+      persistDomEditOperations,
+      previewIframeRef,
+    ],
+  );
+
+  const handleDomTextFieldStyleCommit = useCallback(
+    async (fieldKey: string, property: string, value: string) => {
+      if (!domEditSelection) return;
+      const field = domEditSelection.textFields.find((entry) => entry.key === fieldKey);
+      if (!field) return;
+
+      if (field.source === "self") {
+        await handleDomStyleCommit(property, value);
+        return;
+      }
+
+      const normalizedValue = normalizeDomEditStyleValue(property, value);
+      const importedFont = property === "font-family" ? resolveImportedFontAsset(value) : null;
+      if (property === "font-family") {
+        const doc = previewIframeRef.current?.contentDocument;
+        if (doc) {
+          injectPreviewGoogleFont(doc, normalizedValue);
+          if (importedFont) injectPreviewImportedFont(doc, importedFont);
+        }
+      }
+      const nextTextFields = domEditSelection.textFields.map((entry) =>
+        entry.key === fieldKey
+          ? {
+              ...entry,
+              inlineStyles: {
+                ...entry.inlineStyles,
+                [property]: normalizedValue,
+              },
+              computedStyles: {
+                ...entry.computedStyles,
+                [property]: normalizedValue,
+              },
+            }
+          : entry,
+      );
+
+      await commitDomTextFields(domEditSelection, nextTextFields, { importedFont });
+    },
+    [
+      commitDomTextFields,
+      domEditSelection,
+      handleDomStyleCommit,
+      resolveImportedFontAsset,
+      previewIframeRef,
+    ],
+  );
+
+  const handleDomAddTextField = useCallback(
+    async (afterFieldKey?: string) => {
+      if (!domEditSelection) return null;
+      if (!domEditSelection.textFields.some((field) => field.source === "child")) return null;
+
+      const insertionIndex = domEditSelection.textFields.findIndex(
+        (field) => field.key === afterFieldKey,
+      );
+      const baseField =
+        domEditSelection.textFields[insertionIndex >= 0 ? insertionIndex : 0] ??
+        domEditSelection.textFields[0];
+      const nextField = buildDefaultDomEditTextField(baseField);
+      const nextTextFields = [...domEditSelection.textFields];
+      nextTextFields.splice(
+        insertionIndex >= 0 ? insertionIndex + 1 : nextTextFields.length,
+        0,
+        nextField,
+      );
+
+      await commitDomTextFields(domEditSelection, nextTextFields);
+      return nextField.key;
+    },
+    [commitDomTextFields, domEditSelection],
+  );
+
+  const handleDomRemoveTextField = useCallback(
+    async (fieldKey: string) => {
+      if (!domEditSelection) return;
+      const field = domEditSelection.textFields.find((entry) => entry.key === fieldKey);
+      if (!field) return;
+
+      if (field.source === "self") {
+        await handleDomTextCommit("", fieldKey);
+        return;
+      }
+
+      const nextTextFields = domEditSelection.textFields.filter((entry) => entry.key !== fieldKey);
+      await commitDomTextFields(domEditSelection, nextTextFields);
+    },
+    [commitDomTextFields, domEditSelection, handleDomTextCommit],
+  );
+
+  return {
+    handleDomStyleCommit,
+    handleDomTextCommit,
+    commitDomTextFields,
+    handleDomTextFieldStyleCommit,
+    handleDomAddTextField,
+    handleDomRemoveTextField,
+  };
+}