@explita/editor/dist/components/TablePopUpMenu.js

`@explita/editor` is a versatile, modern rich-text editor built on TipTap for seamless integration into React applications. It provides extensive customization options and advanced features to cater to diverse content creation needs.

import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEditorStore } from "../store/useEditorState";
import { TbLayoutAlignBottomFilled, TbLayoutAlignLeftFilled, TbLayoutAlignRightFilled, TbLayoutAlignTopFilled, TbTableAlias, TbTableColumn, TbTableRow, } from "react-icons/tb";
import { RxTable } from "react-icons/rx";
import { FaDeleteLeft, FaTable } from "react-icons/fa6";
import { AiOutlineDeleteColumn, AiOutlineDeleteRow, AiOutlineMergeCells, AiOutlineSplitCells, } from "react-icons/ai";
import { BiArrowToRight, BiSolidArrowFromRight } from "react-icons/bi";
import { Separator } from "./ui/separator";
import { Table } from "./Table";
export function TablePopupMenu() {
    const { editor } = useEditorStore();
    if (!editor)
        return _jsx(_Fragment, {});
    return (_jsxs("div", { className: "table-popup-menu", children: [_jsx(Table, { children: _jsxs("button", { onClick: () => editor
                        .chain()
                        .focus()
                        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
                        .run(), className: "flex-col !p-2", children: [_jsx(FaTable, { className: "text-lg" }), "Insert table"] }) }), _jsxs("button", { onClick: () => editor.chain().focus().fixTables().run(), className: "flex-col !p-2", children: [_jsx(RxTable, { className: "text-lg" }), "Fix tables"] }), _jsx(Separator, { className: "h-14 bg-neutral-200" }), _jsxs("div", { className: "grid grid-cols-2", children: [_jsxs("button", { onClick: () => editor.chain().focus().addRowBefore().run(), children: [_jsx(TbLayoutAlignTopFilled, {}), "Add Row Above"] }), _jsxs("button", { onClick: () => editor.chain().focus().addRowAfter().run(), children: [_jsx(TbLayoutAlignBottomFilled, {}), "Add Row Below"] }), _jsxs("button", { onClick: () => editor.chain().focus().addColumnBefore().run(), children: [_jsx(TbLayoutAlignLeftFilled, {}), "Add Column Before"] }), _jsxs("button", { onClick: () => editor.chain().focus().addColumnAfter().run(), children: [_jsx(TbLayoutAlignRightFilled, {}), "Add Column After"] })] }), _jsx(Separator, { className: "h-14 bg-neutral-200" }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { onClick: () => editor.chain().focus().mergeCells().run(), disabled: editor?.state.selection.ranges.length < 2, children: [_jsx(AiOutlineMergeCells, {}), "Merge cells"] }), _jsxs("button", { onClick: () => editor.chain().focus().splitCell().run(), disabled: editor?.state.selection.$anchor.node(-1)?.attrs?.colspan < 2 ||
                            editor?.state.selection.ranges.length > 1, children: [_jsx(AiOutlineSplitCells, {}), "Split cell"] })] }), _jsx(Separator, { className: "h-14 bg-neutral-200" }), _jsxs("div", { className: "grid grid-cols-2", children: [_jsxs("button", { onClick: () => editor.chain().focus().toggleHeaderColumn().run(), children: [_jsx(TbTableColumn, {}), "Toggle header column"] }), _jsxs("button", { onClick: () => editor.chain().focus().toggleHeaderRow().run(), children: [_jsx(TbTableRow, {}), "Toggle header row"] }), _jsxs("button", { onClick: () => editor.chain().focus().toggleHeaderCell().run(), children: [_jsx(TbTableAlias, {}), "Toggle header cell"] })] }), _jsx(Separator, { className: "h-14 bg-neutral-200" }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { onClick: () => editor.chain().focus().goToNextCell().run(), children: [_jsx(BiArrowToRight, {}), "Go to next cell"] }), _jsxs("button", { onClick: () => editor.chain().focus().goToPreviousCell().run(), children: [_jsx(BiSolidArrowFromRight, {}), "Go to previous cell"] })] }), _jsx(Separator, { className: "h-14 bg-neutral-200" }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { onClick: () => editor.chain().focus().deleteRow().run(), className: "!text-red-400 hover:!bg-red-100", children: [_jsx(AiOutlineDeleteRow, {}), "Delete Row"] }), _jsxs("button", { onClick: () => editor.chain().focus().deleteColumn().run(), className: "!text-red-400 hover:!bg-red-100", children: [_jsx(AiOutlineDeleteColumn, {}), "Delete Column"] })] }), _jsxs("button", { onClick: () => editor.chain().focus().deleteTable().run(), className: "flex-col !p-2 bg-red-100 !text-red-500 hover:!bg-red-200 hover:text-red-900", children: [_jsx(FaDeleteLeft, {}), "Delete table"] })] }));
}