mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Miguel Ángel
acd141b2ae
* feat(studio): add clipboard payload types and ID deduplication * feat(studio): add Ctrl+C/V/X copy/paste for timeline clips and DOM elements * fix(studio): use duck-typing for cross-frame element access in clipboard Elements from the preview iframe are from a different window context, so `el instanceof HTMLElement` always returns false. Use `"outerHTML" in el` instead to correctly detect elements across frame boundaries. * fix(studio): preserve playhead position after paste reloadPreview() used location.reload() which bypassed the NLELayout saveSeekPosition effect, causing the playhead to reset to 0:00 after paste. Switch to setRefreshKey which triggers the effect and restores the seek position after the iframe reloads. * fix(studio): paste DOM elements as siblings, not at composition root DOM element paste was inserting at the composition root, losing the parent context that provides CSS styles and positioning. Now stores the origin selector on copy and inserts the paste as a sibling immediately after the original element, preserving style inheritance. Falls back to root insertion if the selector can't be matched. * fix(studio): address review — deduplicateIds, native copy, altKey guard - deduplicateIds regex used \b which matched data-composition-id, data-clip-id, etc. Switch to lookbehind (?<=\s) so only standalone id="..." attributes are rewritten. Add test pinning this. - Ctrl+C no longer calls preventDefault() before confirming there's a selected element. Native browser copy (text selections outside inputs) is preserved when nothing is selected in the Studio. - Add !event.altKey guard on C/V/X to avoid intercepting Cmd+Alt+V (paste-as-plain-text) and similar OS gestures. - Remove no-op .replace(/"/g, '"') flagged by CodeQL. * fix(studio): address review round 2 — Cmd+X guard, data-start scope, revert drive-by - Cmd+X now pre-checks selection state before preventDefault, mirroring the Cmd+C fix. Native cut preserved when nothing is selected. - handleCut returns Promise<boolean> so the caller can gate on it. - data-start rewrite scoped to the outermost opening tag only, so nested clip timing is preserved on paste. - Removed system clipboard write (cross-tab paste unsupported, in-memory ref is the only read path). - Reverted the reloadPreview drive-by (setRefreshKey→location.reload); the perf branch (#895) handles this properly via refreshPlayer().
63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
// @vitest-environment node
|
|
import { describe, expect, it } from "vitest";
|
|
import {
|
|
deduplicateIds,
|
|
serializeClipboardPayload,
|
|
deserializeClipboardPayload,
|
|
type ClipboardPayload,
|
|
} from "./clipboardPayload";
|
|
|
|
describe("deduplicateIds", () => {
|
|
it("renames ids that collide with existing ids", () => {
|
|
const html = '<div id="hero"><img id="photo" src="a.png" /></div>';
|
|
const existingIds = ["hero", "other"];
|
|
const result = deduplicateIds(html, existingIds);
|
|
expect(result).not.toContain('id="hero"');
|
|
expect(result).toContain('id="photo"');
|
|
expect(result).toMatch(/id="hero-\d+"/);
|
|
});
|
|
|
|
it("returns html unchanged when no collisions", () => {
|
|
const html = '<div id="unique"><p>hello</p></div>';
|
|
const result = deduplicateIds(html, ["other"]);
|
|
expect(result).toBe(html);
|
|
});
|
|
|
|
it("does not rewrite data-composition-id or other data-*-id attributes", () => {
|
|
const html = '<div data-composition-id="hero" data-clip-id="hero" id="hero">content</div>';
|
|
const result = deduplicateIds(html, ["hero"]);
|
|
expect(result).toContain('data-composition-id="hero"');
|
|
expect(result).toContain('data-clip-id="hero"');
|
|
expect(result).toMatch(/\sid="hero-\d+"/);
|
|
});
|
|
});
|
|
|
|
describe("serializeClipboardPayload / deserializeClipboardPayload", () => {
|
|
it("round-trips a timeline clip payload", () => {
|
|
const payload: ClipboardPayload = {
|
|
kind: "timeline-clip",
|
|
html: '<img id="photo" src="a.png" data-start="1" data-duration="3" />',
|
|
sourceFile: "index.html",
|
|
};
|
|
const json = serializeClipboardPayload(payload);
|
|
const parsed = deserializeClipboardPayload(json);
|
|
expect(parsed).toEqual(payload);
|
|
});
|
|
|
|
it("round-trips a dom-element payload", () => {
|
|
const payload: ClipboardPayload = {
|
|
kind: "dom-element",
|
|
html: '<div class="card"><p>Hello</p></div>',
|
|
sourceFile: "compositions/scene.html",
|
|
};
|
|
const json = serializeClipboardPayload(payload);
|
|
const parsed = deserializeClipboardPayload(json);
|
|
expect(parsed).toEqual(payload);
|
|
});
|
|
|
|
it("returns null for invalid JSON", () => {
|
|
expect(deserializeClipboardPayload("not json")).toBeNull();
|
|
expect(deserializeClipboardPayload('{"kind":"unknown"}')).toBeNull();
|
|
});
|
|
});
|