Function EditPopover

packages/studio/src/player/components/EditModal.tsx:16–169

({ rangeStart, rangeEnd, anchorX, anchorY, onClose }: EditPopoverProps)

}

export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }: EditPopoverProps) {
  const elements = usePlayerStore((s) => s.elements);
  const [prompt, setPrompt] = useState("");
  const [copiedAgentPrompt, setCopiedAgentPrompt] = useState(false);
  const [copiedPromptOnly, setCopiedPromptOnly] = useState(false);
  const popoverRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const start = Math.min(rangeStart, rangeEnd);
  const end = Math.max(rangeStart, rangeEnd);

  const elementsInRange = useMemo(() => {
    return elements.filter((el) => {
      const elEnd = el.start + el.duration;
      return el.start < end && elEnd > start;
    });
  }, [elements, start, end]);

  useMountEffect(() => {
    setTimeout(() => textareaRef.current?.focus(), 50);
  });

  useMountEffect(() => {
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  });

  useMountEffect(() => {
    const handleClick = (e: MouseEvent) => {
      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
        onClose();
      }
    };
    setTimeout(() => window.addEventListener("mousedown", handleClick), 100);
    return () => window.removeEventListener("mousedown", handleClick);
  });

  const buildClipboardText = useCallback(() => {
    return buildTimelineAgentPrompt({
      rangeStart: start,
      rangeEnd: end,
      elements: elementsInRange,
      prompt,
    });
  }, [start, end, elementsInRange, prompt]);

  const handleCopy = useCallback(async () => {
    const copied = await copyTextToClipboard(buildClipboardText());
    if (!copied) return;
    setCopiedAgentPrompt(true);
    setTimeout(() => {
      setCopiedAgentPrompt(false);
      onClose();
    }, 800);
  }, [buildClipboardText, onClose]);