Function TableCopyDropdown

packages/streamdown/lib/table/copy-dropdown.tsx:21–154

({
  children,
  className,
  onCopy,
  onError,
  timeout = 2000,
}: TableCopyDropdownProps)

}

export const TableCopyDropdown = ({
  children,
  className,
  onCopy,
  onError,
  timeout = 2000,
}: TableCopyDropdownProps) => {
  const cn = useCn();
  const [isOpen, setIsOpen] = useState(false);
  const [isCopied, setIsCopied] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const timeoutRef = useRef(0);
  const { isAnimating } = useContext(StreamdownContext);
  const t = useTranslations();

  const copyTableData = async (format: "csv" | "tsv" | "md") => {
    if (typeof window === "undefined" || !navigator?.clipboard?.write) {
      onError?.(new Error("Clipboard API not available"));
      return;
    }

    try {
      const tableWrapper = dropdownRef.current?.closest(
        '[data-streamdown="table-wrapper"]'
      );
      const tableElement = tableWrapper?.querySelector(
        "table"
      ) as HTMLTableElement;

      if (!tableElement) {
        onError?.(new Error("Table not found"));
        return;
      }

      const tableData = extractTableDataFromElement(tableElement);

      const formatters = {
        csv: tableDataToCSV,
        tsv: tableDataToTSV,
        md: tableDataToMarkdown,
      };
      const formatter = formatters[format] || tableDataToMarkdown;
      const content = formatter(tableData);

      const clipboardItemData = new ClipboardItem({
        "text/plain": new Blob([content], { type: "text/plain" }),
        "text/html": new Blob([tableElement.outerHTML], {
          type: "text/html",
        }),
      });

      await navigator.clipboard.write([clipboardItemData]);
      setIsCopied(true);
      setIsOpen(false);
      onCopy?.(format);
      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
    } catch (error) {
      onError?.(error as Error);