@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: "explitaeditor:flex explitaeditor:flex-col explitaeditor:!p-2", children: [_jsx(FaTable, { className: "explitaeditor:text-lg" }), "Insert table"] }) }), _jsxs("button", { onClick: () => editor.chain().focus().fixTables().run(), className: "explitaeditor:flex explitaeditor:flex-col explitaeditor:!p-2", children: [_jsx(RxTable, { className: "explitaeditor:text-lg" }), "Fix tables"] }), _jsx(Separator, { className: "explitaeditor:h-14 explitaeditor:bg-neutral-200" }), _jsxs("div", { className: "explitaeditor:grid explitaeditor: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: "explitaeditor:h-14 explitaeditor:bg-neutral-200" }), _jsxs("div", { className: "explitaeditor:flex explitaeditor: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: "explitaeditor:h-14 explitaeditor:bg-neutral-200" }), _jsxs("div", { className: "explitaeditor:grid explitaeditor: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: "explitaeditor:h-14 explitaeditor:bg-neutral-200" }), _jsxs("div", { className: "explitaeditor:flex explitaeditor: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: "explitaeditor:h-14 explitaeditor:bg-neutral-200" }), _jsxs("div", { className: "explitaeditor:flex explitaeditor:flex-col", children: [_jsxs("button", { onClick: () => editor.chain().focus().deleteRow().run(), className: "explitaeditor:!text-red-400 explitaeditor:hover:!bg-red-100", children: [_jsx(AiOutlineDeleteRow, {}), "Delete Row"] }), _jsxs("button", { onClick: () => editor.chain().focus().deleteColumn().run(), className: "explitaeditor:!text-red-400 explitaeditor:hover:!bg-red-100", children: [_jsx(AiOutlineDeleteColumn, {}), "Delete Column"] })] }), _jsxs("button", { onClick: () => editor.chain().focus().deleteTable().run(), className: "explitaeditor:flex explitaeditor:flex-col explitaeditor:!p-2 explitaeditor:bg-red-100 explitaeditor:!text-red-500 explitaeditor:hover:!bg-red-200 explitaeditor:hover:!text-red-900", children: [_jsx(FaDeleteLeft, {}), "Delete table"] })] }));
}
TablePopupMenu.Mini = function Mini() {
    const { editor } = useEditorStore();
    if (!editor)
        return _jsx(_Fragment, {});
    return (_jsxs("div", { className: "explitaeditor:flex explitaeditor:flex-wrap explitaeditor:gap-2 explitaeditor:px-2 explitaeditor:border-t explitaeditor:border-[#C7C7C7]", children: [_jsx("button", { onClick: () => editor.chain().focus().addRowBefore().run(), title: "Add Row Above", className: "toolbar-button", children: _jsx(TbLayoutAlignTopFilled, {}) }), _jsx("button", { onClick: () => editor.chain().focus().addRowAfter().run(), title: "Add Row Below", className: "toolbar-button", children: _jsx(TbLayoutAlignBottomFilled, {}) }), _jsx("button", { onClick: () => editor.chain().focus().addColumnBefore().run(), title: "Add Column Before", className: "toolbar-button", children: _jsx(TbLayoutAlignLeftFilled, {}) }), _jsx("button", { onClick: () => editor.chain().focus().addColumnAfter().run(), title: "Add Column After", className: "toolbar-button", children: _jsx(TbLayoutAlignRightFilled, {}) }), _jsx("button", { onClick: () => editor.chain().focus().mergeCells().run(), disabled: editor?.state.selection.ranges.length < 2, className: "toolbar-button", children: _jsx(AiOutlineMergeCells, {}) }), _jsx("button", { onClick: () => editor.chain().focus().splitCell().run(), disabled: editor?.state.selection.$anchor.node(-1)?.attrs?.colspan < 2 ||
                    editor?.state.selection.ranges.length > 1, className: "toolbar-button", children: _jsx(AiOutlineSplitCells, {}) }), _jsx("button", { onClick: () => editor.chain().focus().toggleHeaderColumn().run(), title: "Toggle header column", className: "toolbar-button", children: _jsx(TbTableColumn, {}) }), _jsx("button", { onClick: () => editor.chain().focus().toggleHeaderRow().run(), title: "Toggle header row", className: "toolbar-button", children: _jsx(TbTableRow, {}) }), _jsx("button", { onClick: () => editor.chain().focus().toggleHeaderCell().run(), title: "Toggle header cell", className: "toolbar-button", children: _jsx(TbTableAlias, {}) }), _jsx("button", { onClick: () => editor.chain().focus().goToNextCell().run(), title: "Go to next cell", className: "toolbar-button", children: _jsx(BiArrowToRight, {}) }), _jsx("button", { onClick: () => editor.chain().focus().goToPreviousCell().run(), title: "Go to previous cell", className: "toolbar-button", children: _jsx(BiSolidArrowFromRight, {}) }), _jsx("button", { onClick: () => editor.chain().focus().deleteRow().run(), title: "Delete Row", className: "toolbar-button explitaeditor:!text-red-400 explitaeditor:hover:!bg-red-100", children: _jsx(AiOutlineDeleteRow, {}) }), _jsx("button", { onClick: () => editor.chain().focus().deleteColumn().run(), title: "Delete Column", className: "toolbar-button explitaeditor:!text-red-400 explitaeditor:hover:!bg-red-100", children: _jsx(AiOutlineDeleteColumn, {}) }), _jsx("button", { onClick: () => editor.chain().focus().deleteTable().run(), title: "Delete table", className: "toolbar-button explitaeditor:!text-red-400 explitaeditor:hover:!bg-red-100", children: _jsx(FaDeleteLeft, {}) })] }));
};