@explita/editor
Version:
`@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.
33 lines (32 loc) • 2.08 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { useEditorStore } from "../store/useEditorState";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./ui/dropdown-menu";
export function Table({ children, isToolbar = false, }) {
const { editor } = useEditorStore();
const [rows, setRows] = useState(0);
const [cols, setCols] = useState(0);
function onClick() {
if (rows > 0 && cols > 0) {
editor
?.chain()
.focus()
.insertTable({ rows, cols, withHeaderRow: false })
.run();
}
}
function onMouseEnter(row, col) {
setRows(row);
setCols(col);
}
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: children }), _jsxs(DropdownMenuContent, { onMouseOut: () => {
setRows(0), setCols(0);
}, align: isToolbar ? "center" : "start", className: "editor-dropdown-content", children: [_jsx("div", { className: "explitaeditor:p-2.5 explitaeditor:grid explitaeditor:grid-cols-8 explitaeditor:items-center explitaeditor:justify-center explitaeditor:gap-2", children: Array.from({ length: 8 }).map((_, row) => Array.from({ length: 8 }).map((_, col) => {
const currentRow = row + 1;
const currentCol = col + 1;
return (_jsx("button", { className: `explitaeditor:size-5 explitaeditor:border ${currentRow <= rows && currentCol <= cols
? "explitaeditor:border-blue-400"
: "explitaeditor:border-gray-200"}`, onMouseEnter: () => onMouseEnter(currentRow, currentCol), onClick: onClick }, `${currentRow}-${currentCol}`));
})) }), _jsx("div", { className: "explitaeditor:m-2 explitaeditor:text-sm explitaeditor:text-neutral-700", children: _jsxs("span", { children: ["Selected: ", rows, " x ", cols] }) })] })] }));
}