From 5fe53a0f9cb2bef1c2eda0f676780798085a52a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 28 Apr 2026 22:44:23 -0400
Subject: [PATCH] fix: keep caption shortcuts outside component

---
 .../studio/src/captions/components/CaptionOverlay.tsx    | 9 +--------
 .../CaptionOverlay.test.ts => keyboard.test.ts}          | 2 +-
 packages/studio/src/captions/keyboard.ts                 | 8 ++++++++
 3 files changed, 10 insertions(+), 9 deletions(-)
 rename packages/studio/src/captions/{components/CaptionOverlay.test.ts => keyboard.test.ts} (94%)
 create mode 100644 packages/studio/src/captions/keyboard.ts

diff --git a/packages/studio/src/captions/components/CaptionOverlay.tsx b/packages/studio/src/captions/components/CaptionOverlay.tsx
index 78e72bc96..6725844b6 100644
--- a/packages/studio/src/captions/components/CaptionOverlay.tsx
+++ b/packages/studio/src/captions/components/CaptionOverlay.tsx
@@ -1,6 +1,7 @@
 import { memo, useState, useCallback, useRef } from "react";
 import { useCaptionStore } from "../store";
 import { useMountEffect } from "../../hooks/useMountEffect";
+import { shouldHandleCaptionNudgeKey } from "../keyboard";
 
 interface CaptionOverlayProps {
   iframeRef: React.RefObject<HTMLIFrameElement | null>;
@@ -251,14 +252,6 @@ function syncToStore(segmentId: string, el: HTMLElement, iframeWin: Window) {
 
 const HANDLE = 8;
 const ROTATION_OFFSET = 20; // px above the selection box
-const CAPTION_NUDGE_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
-
-type CaptionNudgeKeyEvent = Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey" | "key">;
-
-export function shouldHandleCaptionNudgeKey(event: CaptionNudgeKeyEvent): boolean {
-  if (event.metaKey || event.ctrlKey || event.altKey) return false;
-  return CAPTION_NUDGE_KEYS.has(event.key);
-}
 
 export const CaptionOverlay = memo(function CaptionOverlay({ iframeRef }: CaptionOverlayProps) {
   const isEditMode = useCaptionStore((s) => s.isEditMode);
diff --git a/packages/studio/src/captions/components/CaptionOverlay.test.ts b/packages/studio/src/captions/keyboard.test.ts
similarity index 94%
rename from packages/studio/src/captions/components/CaptionOverlay.test.ts
rename to packages/studio/src/captions/keyboard.test.ts
index 886c4b80e..ce6a6f4e6 100644
--- a/packages/studio/src/captions/components/CaptionOverlay.test.ts
+++ b/packages/studio/src/captions/keyboard.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { shouldHandleCaptionNudgeKey } from "./CaptionOverlay";
+import { shouldHandleCaptionNudgeKey } from "./keyboard";
 
 function mockKeyboardEvent(
   key: string,
diff --git a/packages/studio/src/captions/keyboard.ts b/packages/studio/src/captions/keyboard.ts
new file mode 100644
index 000000000..0c7ef81df
--- /dev/null
+++ b/packages/studio/src/captions/keyboard.ts
@@ -0,0 +1,8 @@
+const CAPTION_NUDGE_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+
+type CaptionNudgeKeyEvent = Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey" | "key">;
+
+export function shouldHandleCaptionNudgeKey(event: CaptionNudgeKeyEvent): boolean {
+  if (event.metaKey || event.ctrlKey || event.altKey) return false;
+  return CAPTION_NUDGE_KEYS.has(event.key);
+}