import { useState, useEffect } from "react"; import { Rows, Columns, ToggleRight } from "lucide-react"; import { cn } from "../utils"; import { Tooltip } from "components/ui"; import InsertLeftTableIcon from "./InsertLeftTableIcon"; import InsertRightTableIcon from "./InsertRightTableIcon"; import InsertTopTableIcon from "./InsertTopTableIcon"; import InsertBottomTableIcon from "./InsertBottomTableIcon"; interface TableMenuItem { command: () => void; icon: any; key: string; name: string; } export const findTableAncestor = (node: Node | null): HTMLTableElement | null => { while (node !== null && node.nodeName !== "TABLE") { node = node.parentNode; } return node as HTMLTableElement; }; export const TableMenu = ({ editor }: { editor: any }) => { const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 }); const isOpen = editor?.isActive("table"); const items: TableMenuItem[] = [ { command: () => editor.chain().focus().addColumnBefore().run(), icon: InsertLeftTableIcon, key: "insert-column-left", name: "Insert 1 column left", }, { command: () => editor.chain().focus().addColumnAfter().run(), icon: InsertRightTableIcon, key: "insert-column-right", name: "Insert 1 column right", }, { command: () => editor.chain().focus().addRowBefore().run(), icon: InsertTopTableIcon, key: "insert-row-above", name: "Insert 1 row above", }, { command: () => editor.chain().focus().addRowAfter().run(), icon: InsertBottomTableIcon, key: "insert-row-below", name: "Insert 1 row below", }, { command: () => editor.chain().focus().deleteColumn().run(), icon: Columns, key: "delete-column", name: "Delete column", }, { command: () => editor.chain().focus().deleteRow().run(), icon: Rows, key: "delete-row", name: "Delete row", }, { command: () => editor.chain().focus().toggleHeaderRow().run(), icon: ToggleRight, key: "toggle-header-row", name: "Toggle header row", }, ]; useEffect(() => { if (!window) return; const handleWindowClick = () => { const selection: any = window?.getSelection(); if (selection.rangeCount !== 0) { const range = selection.getRangeAt(0); const tableNode = findTableAncestor(range.startContainer); if (tableNode) { const tableRect = tableNode.getBoundingClientRect(); const tableCenter = tableRect.left + tableRect.width / 2; const menuWidth = 45; const menuLeft = tableCenter - menuWidth / 2; const tableBottom = tableRect.bottom; setTableLocation({ bottom: tableBottom, left: menuLeft }); } } }; window.addEventListener("click", handleWindowClick); return () => { window.removeEventListener("click", handleWindowClick); }; }, [tableLocation, editor]); return (
{items.map((item, index) => ( ))}
); };