paint-ui/hooks/use-clipboard.ts

import { useEffect } from 'react';

export function useClipboard(onPaste: (dataTransfer: DataTransfer) => void) {
  useEffect(() => {
    const handlePaste = async (e: ClipboardEvent) => {
      // Don't interfere with text input fields
      const target = e.target as HTMLElement;
      if (
        target.tagName === 'INPUT' ||
        target.tagName === 'TEXTAREA' ||
        target.isContentEditable
      ) {
        return;
      }

      e.preventDefault();

      if (e.clipboardData) {
        onPaste(e.clipboardData);
      }
    };

    window.addEventListener('paste', handlePaste);

    return () => {
      window.removeEventListener('paste', handlePaste);
    };
  }, [onPaste]);
}