Community Extension: custom table

[MR5553]

Description

export default function TableControls({ editor }: NodeViewProps) {
const [coord, setCoord] = useState<COORD | null>(null);

useEffect(() => {
    const handlePosition = () => {
        if (!editor.isActive("table")) {
            return setCoord(null);
        };

        const { selection } = editor.state;
        const { $from } = selection;

        let cell: HTMLTableCellElement | null = null;

        for (let d = $from.depth; d > 0; d--) {
            const node = editor.view.nodeDOM($from.before(d));
            if (!cell && node instanceof HTMLTableCellElement) {
                cell = node;
                break;
            }
        }
        if (!cell) return setCoord(null);


        const table = cell.closest("table") as HTMLTableElement;
        if (!table) return;

        const row = cell.parentElement as HTMLTableRowElement;
        const colIndex = cell.cellIndex;
        const rowStart = row.cells[0];
        const colStart = table.rows[0].cells[colIndex];
        const tableRect = table.getBoundingClientRect();
        const rowRect = rowStart.getBoundingClientRect();
        const colRect = colStart.getBoundingClientRect();

        setCoord({
            table: tableRect,
            row: rowRect,
            col: colRect
        })
    }


    window.addEventListener("resize", handlePosition)
    editor.on("selectionUpdate", handlePosition);
    editor.on("transaction", handlePosition);
    handlePosition()

    return () => {
        window.removeEventListener("resize", handlePosition)
        editor.off("selectionUpdate", handlePosition);
        editor.off("transaction", handlePosition);
    }

}, [editor]);

if (!coord) return null;


return (
    <div className="table-controls">
        <Button
            variant="outlined"
            size="icon_sm"
            className="px-2 z-50"
            style={{
                position: "absolute",
                left: coord.col.left + coord.col.width / 2,
                top: coord.table.top - 8,
                transform: "translateX(-50%)"
            }}
        >
            <Kebab className="size-4 rotate-90" />
        </Button>

        <Button
            variant="outlined"
            size="icon_sm"
            className="py-1 z-50"
            style={{
                position: "absolute",
                left: coord.table.left - 8,
                top: coord.row.top + coord.row.height / 2,
                transform: "translateY(-50%)"
            }}
        >
            <Kebab className="size-4" />
        </Button>

        <Button
            variant="outlined"
            size="sm"
            className="px-0 z-50"
            style={{
                position: "absolute",
                left: coord.table.right,
                top: coord.col.top,
                transform: "translateY(-50%)"
            }}
            onClick={() => editor.chain().focus().addColumnAfter().run()}
        >
            <Plus className="size-4 text-blue-700" />
        </Button>

        <Button
            variant="outlined"
            size="sm"
            className="justify-center z-50"
            style={{
                width: coord.table.width,
                position: "absolute",
                left: coord.row.left,
                top: coord.table.bottom,
                transform: "translateX(-50%)"
            }}
            onClick={() => editor.chain().focus().addRowAfter().run()}
        >
            <Plus className="size-4 text-red-600" />
        </Button>
    </div>
)

}

Installation

export default function TableControls({ editor }: NodeViewProps) {
const [coord, setCoord] = useState<COORD | null>(null);

useEffect(() => {
    const handlePosition = () => {
        if (!editor.isActive("table")) {
            return setCoord(null);
        };

        const { selection } = editor.state;
        const { $from } = selection;

        let cell: HTMLTableCellElement | null = null;

        for (let d = $from.depth; d > 0; d--) {
            const node = editor.view.nodeDOM($from.before(d));
            if (!cell && node instanceof HTMLTableCellElement) {
                cell = node;
                break;
            }
        }
        if (!cell) return setCoord(null);


        const table = cell.closest("table") as HTMLTableElement;
        if (!table) return;

        const row = cell.parentElement as HTMLTableRowElement;
        const colIndex = cell.cellIndex;
        const rowStart = row.cells[0];
        const colStart = table.rows[0].cells[colIndex];
        const tableRect = table.getBoundingClientRect();
        const rowRect = rowStart.getBoundingClientRect();
        const colRect = colStart.getBoundingClientRect();

        setCoord({
            table: tableRect,
            row: rowRect,
            col: colRect
        })
    }


    window.addEventListener("resize", handlePosition)
    editor.on("selectionUpdate", handlePosition);
    editor.on("transaction", handlePosition);
    handlePosition()

    return () => {
        window.removeEventListener("resize", handlePosition)
        editor.off("selectionUpdate", handlePosition);
        editor.off("transaction", handlePosition);
    }

}, [editor]);

if (!coord) return null;


return (
    <div className="table-controls">
        <Button
            variant="outlined"
            size="icon_sm"
            className="px-2 z-50"
            style={{
                position: "absolute",
                left: coord.col.left + coord.col.width / 2,
                top: coord.table.top - 8,
                transform: "translateX(-50%)"
            }}
        >
            <Kebab className="size-4 rotate-90" />
        </Button>

        <Button
            variant="outlined"
            size="icon_sm"
            className="py-1 z-50"
            style={{
                position: "absolute",
                left: coord.table.left - 8,
                top: coord.row.top + coord.row.height / 2,
                transform: "translateY(-50%)"
            }}
        >
            <Kebab className="size-4" />
        </Button>

        <Button
            variant="outlined"
            size="sm"
            className="px-0 z-50"
            style={{
                position: "absolute",
                left: coord.table.right,
                top: coord.col.top,
                transform: "translateY(-50%)"
            }}
            onClick={() => editor.chain().focus().addColumnAfter().run()}
        >
            <Plus className="size-4 text-blue-700" />
        </Button>

        <Button
            variant="outlined"
            size="sm"
            className="justify-center z-50"
            style={{
                width: coord.table.width,
                position: "absolute",
                left: coord.row.left,
                top: coord.table.bottom,
                transform: "translateX(-50%)"
            }}
            onClick={() => editor.chain().focus().addRowAfter().run()}
        >
            <Plus className="size-4 text-red-600" />
        </Button>
    </div>
)

}

Usage

export default function TableControls({ editor }: NodeViewProps) {
const [coord, setCoord] = useState<COORD | null>(null);

useEffect(() => {
    const handlePosition = () => {
        if (!editor.isActive("table")) {
            return setCoord(null);
        };

        const { selection } = editor.state;
        const { $from } = selection;

        let cell: HTMLTableCellElement | null = null;

        for (let d = $from.depth; d > 0; d--) {
            const node = editor.view.nodeDOM($from.before(d));
            if (!cell && node instanceof HTMLTableCellElement) {
                cell = node;
                break;
            }
        }
        if (!cell) return setCoord(null);


        const table = cell.closest("table") as HTMLTableElement;
        if (!table) return;

        const row = cell.parentElement as HTMLTableRowElement;
        const colIndex = cell.cellIndex;
        const rowStart = row.cells[0];
        const colStart = table.rows[0].cells[colIndex];
        const tableRect = table.getBoundingClientRect();
        const rowRect = rowStart.getBoundingClientRect();
        const colRect = colStart.getBoundingClientRect();

        setCoord({
            table: tableRect,
            row: rowRect,
            col: colRect
        })
    }


    window.addEventListener("resize", handlePosition)
    editor.on("selectionUpdate", handlePosition);
    editor.on("transaction", handlePosition);
    handlePosition()

    return () => {
        window.removeEventListener("resize", handlePosition)
        editor.off("selectionUpdate", handlePosition);
        editor.off("transaction", handlePosition);
    }

}, [editor]);

if (!coord) return null;


return (
    <div className="table-controls">
        <Button
            variant="outlined"
            size="icon_sm"
            className="px-2 z-50"
            style={{
                position: "absolute",
                left: coord.col.left + coord.col.width / 2,
                top: coord.table.top - 8,
                transform: "translateX(-50%)"
            }}
        >
            <Kebab className="size-4 rotate-90" />
        </Button>

        <Button
            variant="outlined"
            size="icon_sm"
            className="py-1 z-50"
            style={{
                position: "absolute",
                left: coord.table.left - 8,
                top: coord.row.top + coord.row.height / 2,
                transform: "translateY(-50%)"
            }}
        >
            <Kebab className="size-4" />
        </Button>

        <Button
            variant="outlined"
            size="sm"
            className="px-0 z-50"
            style={{
                position: "absolute",
                left: coord.table.right,
                top: coord.col.top,
                transform: "translateY(-50%)"
            }}
            onClick={() => editor.chain().focus().addColumnAfter().run()}
        >
            <Plus className="size-4 text-blue-700" />
        </Button>

        <Button
            variant="outlined"
            size="sm"
            className="justify-center z-50"
            style={{
                width: coord.table.width,
                position: "absolute",
                left: coord.row.left,
                top: coord.table.bottom,
                transform: "translateX(-50%)"
            }}
            onClick={() => editor.chain().focus().addRowAfter().run()}
        >
            <Plus className="size-4 text-red-600" />
        </Button>
    </div>
)

}

Type

Node

Other

export default function TableControls({ editor }: NodeViewProps) {
const [coord, setCoord] = useState<COORD | null>(null);

useEffect(() => {
    const handlePosition = () => {
        if (!editor.isActive("table")) {
            return setCoord(null);
        };

        const { selection } = editor.state;
        const { $from } = selection;

        let cell: HTMLTableCellElement | null = null;

        for (let d = $from.depth; d > 0; d--) {
            const node = editor.view.nodeDOM($from.before(d));
            if (!cell && node instanceof HTMLTableCellElement) {
                cell = node;
                break;
            }
        }
        if (!cell) return setCoord(null);


        const table = cell.closest("table") as HTMLTableElement;
        if (!table) return;

        const row = cell.parentElement as HTMLTableRowElement;
        const colIndex = cell.cellIndex;
        const rowStart = row.cells[0];
        const colStart = table.rows[0].cells[colIndex];
        const tableRect = table.getBoundingClientRect();
        const rowRect = rowStart.getBoundingClientRect();
        const colRect = colStart.getBoundingClientRect();

        setCoord({
            table: tableRect,
            row: rowRect,
            col: colRect
        })
    }


    window.addEventListener("resize", handlePosition)
    editor.on("selectionUpdate", handlePosition);
    editor.on("transaction", handlePosition);
    handlePosition()

    return () => {
        window.removeEventListener("resize", handlePosition)
        editor.off("selectionUpdate", handlePosition);
        editor.off("transaction", handlePosition);
    }

}, [editor]);

if (!coord) return null;


return (
    <div className="table-controls">
        <Button
            variant="outlined"
            size="icon_sm"
            className="px-2 z-50"
            style={{
                position: "absolute",
                left: coord.col.left + coord.col.width / 2,
                top: coord.table.top - 8,
                transform: "translateX(-50%)"
            }}
        >
            <Kebab className="size-4 rotate-90" />
        </Button>

        <Button
            variant="outlined"
            size="icon_sm"
            className="py-1 z-50"
            style={{
                position: "absolute",
                left: coord.table.left - 8,
                top: coord.row.top + coord.row.height / 2,
                transform: "translateY(-50%)"
            }}
        >
            <Kebab className="size-4" />
        </Button>

        <Button
            variant="outlined"
            size="sm"
            className="px-0 z-50"
            style={{
                position: "absolute",
                left: coord.table.right,
                top: coord.col.top,
                transform: "translateY(-50%)"
            }}
            onClick={() => editor.chain().focus().addColumnAfter().run()}
        >
            <Plus className="size-4 text-blue-700" />
        </Button>

        <Button
            variant="outlined"
            size="sm"
            className="justify-center z-50"
            style={{
                width: coord.table.width,
                position: "absolute",
                left: coord.row.left,
                top: coord.table.bottom,
                transform: "translateX(-50%)"
            }}
            onClick={() => editor.chain().focus().addRowAfter().run()}
        >
            <Plus className="size-4 text-red-600" />
        </Button>
    </div>
)

}

[arnaugomez]

Awesome. What does this table achieve? Do you think there's anything missing in the default Tiptap Table extension, that can be improved?