@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/table-node-static.mjs

@@ -0,0 +1,68 @@
+import { cn } from "../../../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { SlateElement } from "platejs/static";
+import { BaseTablePlugin } from "@platejs/table";
+
+//#region src/components/editor/ui/table-node-static.tsx
+function TableElementStatic({ children, ...props }) {
+	const { disableMarginLeft } = props.editor.getOptions(BaseTablePlugin);
+	const marginLeft = disableMarginLeft ? 0 : props.element.marginLeft;
+	return /* @__PURE__ */ jsx(SlateElement, {
+		...props,
+		className: "overflow-x-auto py-5",
+		style: { paddingLeft: marginLeft },
+		children: /* @__PURE__ */ jsx("div", {
+			className: "group/table relative w-fit",
+			children: /* @__PURE__ */ jsx("table", {
+				className: "mr-0 ml-px table h-px table-fixed border-collapse",
+				children: /* @__PURE__ */ jsx("tbody", {
+					className: "min-w-full",
+					children
+				})
+			})
+		})
+	});
+}
+function TableRowElementStatic(props) {
+	return /* @__PURE__ */ jsx(SlateElement, {
+		...props,
+		as: "tr",
+		className: "h-full",
+		children: props.children
+	});
+}
+function TableCellElementStatic({ isHeader, ...props }) {
+	const { editor, element } = props;
+	const { api } = editor.getPlugin(BaseTablePlugin);
+	const { minHeight, width } = api.table.getCellSize({ element });
+	const borders = api.table.getCellBorders({ element });
+	return /* @__PURE__ */ jsx(SlateElement, {
+		...props,
+		as: isHeader ? "th" : "td",
+		className: cn("h-full overflow-visible border-none bg-background p-0", element.background ? "bg-(--cellBackground)" : "bg-background", isHeader && "text-left font-normal *:m-0", "before:size-full", "before:absolute before:box-border before:select-none before:content-['']", borders && cn(borders.bottom?.size && "before:border-b before:border-b-border", borders.right?.size && "before:border-r before:border-r-border", borders.left?.size && "before:border-l before:border-l-border", borders.top?.size && "before:border-t before:border-t-border")),
+		style: {
+			"--cellBackground": element.background,
+			maxWidth: width || 240,
+			minWidth: width || 120
+		},
+		attributes: {
+			...props.attributes,
+			colSpan: api.table.getColSpan(element),
+			rowSpan: api.table.getRowSpan(element)
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative z-20 box-border h-full px-4 py-2",
+			style: { minHeight },
+			children: props.children
+		})
+	});
+}
+function TableCellHeaderElementStatic(props) {
+	return /* @__PURE__ */ jsx(TableCellElementStatic, {
+		...props,
+		isHeader: true
+	});
+}
+
+//#endregion
+export { TableCellElementStatic, TableCellHeaderElementStatic, TableElementStatic, TableRowElementStatic };

package/dist/src/components/editor/ui/table-node.mjs

@@ -0,0 +1,375 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Popover as Popover$1, PopoverContent } from "../../ui/popover.mjs";
+import { DropdownMenu as DropdownMenu$1, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { blockSelectionVariants } from "./block-selection.mjs";
+import { Toolbar as Toolbar$1, ToolbarButton, ToolbarGroup, ToolbarMenuGroup } from "../../ui/toolbar.mjs";
+import { ColorDropdownMenuItems, DEFAULT_COLORS } from "./font-color-toolbar-button.mjs";
+import { ResizeHandle } from "./resize-handle.mjs";
+import { BorderAllIcon, BorderBottomIcon, BorderLeftIcon, BorderNoneIcon, BorderRightIcon, BorderTopIcon } from "./table-icons.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement, useComposedRef, useEditorPlugin, useEditorRef, useEditorSelector, useElement, useElementSelector, useFocusedLast, usePluginOption, useReadOnly, useRemoveNodeButton, useSelected, withHOC } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS, PathApi } from "platejs";
+import { BlockSelectionPlugin, useBlockSelected } from "@platejs/selection/react";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CombineIcon, EraserIcon, Grid2X2Icon, GripVertical, PaintBucketIcon, SquareSplitHorizontalIcon, Trash2Icon, XIcon } from "lucide-react";
+import { Popover } from "radix-ui";
+import { setCellBackground } from "@platejs/table";
+import { useDraggable, useDropLine } from "@platejs/dnd";
+import { TablePlugin, TableProvider, useTableBordersDropdownMenuContentState, useTableCellElement, useTableCellElementResizable, useTableElement, useTableMergeState } from "@platejs/table/react";
+
+//#region src/components/editor/ui/table-node.tsx
+const TableElement = withHOC(TableProvider, function TableElement$1({ children, ...props }) {
+	const readOnly = useReadOnly();
+	const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
+	const hasControls = !readOnly && !isSelectionAreaVisible;
+	const { isSelectingCell, marginLeft, props: tableProps } = useTableElement();
+	const isSelectingTable = useBlockSelected(props.element.id);
+	const content = /* @__PURE__ */ jsx(PlateElement, {
+		...props,
+		className: cn("overflow-x-auto py-5", hasControls && "-ml-2 *:data-[slot=block-selection]:left-2"),
+		style: { paddingLeft: marginLeft },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "group/table relative w-fit",
+			children: [/* @__PURE__ */ jsx("table", {
+				className: cn("mr-0 ml-px table h-px table-fixed border-collapse", isSelectingCell && "selection:bg-transparent"),
+				...tableProps,
+				children: /* @__PURE__ */ jsx("tbody", {
+					className: "min-w-full",
+					children
+				})
+			}), isSelectingTable && /* @__PURE__ */ jsx("div", {
+				className: blockSelectionVariants(),
+				contentEditable: false
+			})]
+		})
+	});
+	if (readOnly) return content;
+	return /* @__PURE__ */ jsx(TableFloatingToolbar, { children: content });
+});
+function TableFloatingToolbar({ children, ...props }) {
+	const { tf } = useEditorPlugin(TablePlugin);
+	const selected = useSelected();
+	const { props: buttonProps } = useRemoveNodeButton({ element: useElement() });
+	const collapsedInside = useEditorSelector((editor) => selected && editor.api.isCollapsed(), [selected]);
+	const isFocusedLast = useFocusedLast();
+	const { canMerge, canSplit } = useTableMergeState();
+	return /* @__PURE__ */ jsxs(Popover$1, {
+		open: isFocusedLast && (canMerge || canSplit || collapsedInside),
+		modal: false,
+		children: [/* @__PURE__ */ jsx(Popover.Anchor, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			asChild: true,
+			onOpenAutoFocus: (e) => e.preventDefault(),
+			contentEditable: false,
+			...props,
+			children: /* @__PURE__ */ jsxs(Toolbar$1, {
+				className: "flex w-auto max-w-[80vw] flex-row overflow-x-auto rounded-md border bg-popover p-1 shadow-md print:hidden [scrollbar-width:none]",
+				contentEditable: false,
+				children: [
+					/* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+						/* @__PURE__ */ jsx(ColorDropdownMenu, {
+							tooltip: "Background color",
+							children: /* @__PURE__ */ jsx(PaintBucketIcon, {})
+						}),
+						canMerge && /* @__PURE__ */ jsx(ToolbarButton, {
+							onClick: () => tf.table.merge(),
+							onMouseDown: (e) => e.preventDefault(),
+							tooltip: "Merge cells",
+							children: /* @__PURE__ */ jsx(CombineIcon, {})
+						}),
+						canSplit && /* @__PURE__ */ jsx(ToolbarButton, {
+							onClick: () => tf.table.split(),
+							onMouseDown: (e) => e.preventDefault(),
+							tooltip: "Split cell",
+							children: /* @__PURE__ */ jsx(SquareSplitHorizontalIcon, {})
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenu$1, {
+							modal: false,
+							children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(ToolbarButton, {
+									tooltip: "Cell borders",
+									children: /* @__PURE__ */ jsx(Grid2X2Icon, {})
+								})
+							}), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(TableBordersDropdownMenuContent, {}) })]
+						}),
+						collapsedInside && /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, {
+							tooltip: "Delete table",
+							...buttonProps,
+							children: /* @__PURE__ */ jsx(Trash2Icon, {})
+						}) })
+					] }),
+					collapsedInside && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							onClick: () => {
+								tf.insert.tableRow({ before: true });
+							},
+							onMouseDown: (e) => e.preventDefault(),
+							tooltip: "Insert row before",
+							children: /* @__PURE__ */ jsx(ArrowUp, {})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							onClick: () => {
+								tf.insert.tableRow();
+							},
+							onMouseDown: (e) => e.preventDefault(),
+							tooltip: "Insert row after",
+							children: /* @__PURE__ */ jsx(ArrowDown, {})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							onClick: () => {
+								tf.remove.tableRow();
+							},
+							onMouseDown: (e) => e.preventDefault(),
+							tooltip: "Delete row",
+							children: /* @__PURE__ */ jsx(XIcon, {})
+						})
+					] }),
+					collapsedInside && /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							onClick: () => {
+								tf.insert.tableColumn({ before: true });
+							},
+							onMouseDown: (e) => e.preventDefault(),
+							tooltip: "Insert column before",
+							children: /* @__PURE__ */ jsx(ArrowLeft, {})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							onClick: () => {
+								tf.insert.tableColumn();
+							},
+							onMouseDown: (e) => e.preventDefault(),
+							tooltip: "Insert column after",
+							children: /* @__PURE__ */ jsx(ArrowRight, {})
+						}),
+						/* @__PURE__ */ jsx(ToolbarButton, {
+							onClick: () => {
+								tf.remove.tableColumn();
+							},
+							onMouseDown: (e) => e.preventDefault(),
+							tooltip: "Delete column",
+							children: /* @__PURE__ */ jsx(XIcon, {})
+						})
+					] })
+				]
+			})
+		})]
+	});
+}
+function TableBordersDropdownMenuContent(props) {
+	const editor = useEditorRef();
+	const { getOnSelectTableBorder, hasBottomBorder, hasLeftBorder, hasNoBorders, hasOuterBorders, hasRightBorder, hasTopBorder } = useTableBordersDropdownMenuContentState();
+	return /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		className: "min-w-[220px]",
+		onCloseAutoFocus: (e) => {
+			e.preventDefault();
+			editor.tf.focus();
+		},
+		align: "start",
+		side: "right",
+		sideOffset: 0,
+		...props,
+		children: [/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+			/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+				checked: hasTopBorder,
+				onCheckedChange: getOnSelectTableBorder("top"),
+				children: [/* @__PURE__ */ jsx(BorderTopIcon, {}), /* @__PURE__ */ jsx("div", { children: "Top Border" })]
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+				checked: hasRightBorder,
+				onCheckedChange: getOnSelectTableBorder("right"),
+				children: [/* @__PURE__ */ jsx(BorderRightIcon, {}), /* @__PURE__ */ jsx("div", { children: "Right Border" })]
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+				checked: hasBottomBorder,
+				onCheckedChange: getOnSelectTableBorder("bottom"),
+				children: [/* @__PURE__ */ jsx(BorderBottomIcon, {}), /* @__PURE__ */ jsx("div", { children: "Bottom Border" })]
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+				checked: hasLeftBorder,
+				onCheckedChange: getOnSelectTableBorder("left"),
+				children: [/* @__PURE__ */ jsx(BorderLeftIcon, {}), /* @__PURE__ */ jsx("div", { children: "Left Border" })]
+			})
+		] }), /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+			checked: hasNoBorders,
+			onCheckedChange: getOnSelectTableBorder("none"),
+			children: [/* @__PURE__ */ jsx(BorderNoneIcon, {}), /* @__PURE__ */ jsx("div", { children: "No Border" })]
+		}), /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+			checked: hasOuterBorders,
+			onCheckedChange: getOnSelectTableBorder("outer"),
+			children: [/* @__PURE__ */ jsx(BorderAllIcon, {}), /* @__PURE__ */ jsx("div", { children: "Outside Borders" })]
+		})] })]
+	});
+}
+function ColorDropdownMenu({ children, tooltip }) {
+	const [open, setOpen] = React$1.useState(false);
+	const editor = useEditorRef();
+	const selectedCells = usePluginOption(TablePlugin, "selectedCells");
+	const onUpdateColor = React$1.useCallback((color) => {
+		setOpen(false);
+		setCellBackground(editor, {
+			color,
+			selectedCells: selectedCells ?? []
+		});
+	}, [selectedCells, editor]);
+	const onClearColor = React$1.useCallback(() => {
+		setOpen(false);
+		setCellBackground(editor, {
+			color: null,
+			selectedCells: selectedCells ?? []
+		});
+	}, [selectedCells, editor]);
+	return /* @__PURE__ */ jsxs(DropdownMenu$1, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				tooltip,
+				children
+			})
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "start",
+			children: [/* @__PURE__ */ jsx(ToolbarMenuGroup, {
+				label: "Colors",
+				children: /* @__PURE__ */ jsx(ColorDropdownMenuItems, {
+					className: "px-2",
+					colors: DEFAULT_COLORS,
+					updateColor: onUpdateColor
+				})
+			}), /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "p-2",
+				onClick: onClearColor,
+				children: [/* @__PURE__ */ jsx(EraserIcon, {}), /* @__PURE__ */ jsx("span", { children: "Clear" })]
+			}) })]
+		})]
+	});
+}
+function TableRowElement({ children, ...props }) {
+	const { element } = props;
+	const readOnly = useReadOnly();
+	const selected = useSelected();
+	const editor = useEditorRef();
+	const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
+	const hasControls = !readOnly && !isSelectionAreaVisible;
+	const { isDragging, nodeRef, previewRef, handleRef } = useDraggable({
+		element,
+		type: element.type,
+		canDropNode: ({ dragEntry, dropEntry }) => PathApi.equals(PathApi.parent(dragEntry[1]), PathApi.parent(dropEntry[1])),
+		onDropHandler: (_, { dragItem }) => {
+			const dragElement = dragItem.element;
+			if (dragElement) editor.tf.select(dragElement);
+		}
+	});
+	return /* @__PURE__ */ jsxs(PlateElement, {
+		...props,
+		ref: useComposedRef(props.ref, previewRef, nodeRef),
+		as: "tr",
+		className: cn("group/row", isDragging && "opacity-50"),
+		attributes: {
+			...props.attributes,
+			"data-selected": selected ? "true" : void 0
+		},
+		children: [hasControls && /* @__PURE__ */ jsxs("td", {
+			className: "w-2 select-none",
+			contentEditable: false,
+			children: [/* @__PURE__ */ jsx(RowDragHandle, { dragRef: handleRef }), /* @__PURE__ */ jsx(RowDropLine, {})]
+		}), children]
+	});
+}
+function RowDragHandle({ dragRef }) {
+	const editor = useEditorRef();
+	const element = useElement();
+	return /* @__PURE__ */ jsx(Button, {
+		ref: dragRef,
+		variant: "outline",
+		className: cn("-translate-y-1/2 absolute top-1/2 left-0 z-51 h-6 w-4 p-0 focus-visible:ring-0 focus-visible:ring-offset-0", "cursor-grab active:cursor-grabbing", "opacity-0 transition-opacity duration-100 group-hover/row:opacity-100 group-has-data-[resizing=\"true\"]/row:opacity-0"),
+		onClick: () => {
+			editor.tf.select(element);
+		},
+		children: /* @__PURE__ */ jsx(GripVertical, { className: "text-muted-foreground" })
+	});
+}
+function RowDropLine() {
+	const { dropLine } = useDropLine();
+	if (!dropLine) return null;
+	return /* @__PURE__ */ jsx("div", { className: cn("absolute inset-x-0 left-2 z-50 h-0.5 bg-brand/50", dropLine === "top" ? "-top-px" : "-bottom-px") });
+}
+function TableCellElement({ isHeader, ...props }) {
+	const { api } = useEditorPlugin(TablePlugin);
+	const readOnly = useReadOnly();
+	const element = props.element;
+	const tableId = useElementSelector(([node]) => node.id, [], { key: KEYS.table });
+	const rowId = useElementSelector(([node]) => node.id, [], { key: KEYS.tr });
+	const isSelectingTable = useBlockSelected(tableId);
+	const isSelectingRow = useBlockSelected(rowId) || isSelectingTable;
+	const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, "isSelectionAreaVisible");
+	const { borders, colIndex, colSpan, minHeight, rowIndex, selected, width } = useTableCellElement();
+	const { bottomProps, hiddenLeft, leftProps, rightProps } = useTableCellElementResizable({
+		colIndex,
+		colSpan,
+		rowIndex
+	});
+	return /* @__PURE__ */ jsxs(PlateElement, {
+		...props,
+		as: isHeader ? "th" : "td",
+		className: cn("h-full overflow-visible border-none bg-background p-0", element.background ? "bg-(--cellBackground)" : "bg-background", isHeader && "text-left *:m-0", "before:size-full", selected && "before:z-10 before:bg-brand/5", "before:absolute before:box-border before:select-none before:content-['']", borders.bottom?.size && "before:border-b before:border-b-border", borders.right?.size && "before:border-r before:border-r-border", borders.left?.size && "before:border-l before:border-l-border", borders.top?.size && "before:border-t before:border-t-border"),
+		style: {
+			"--cellBackground": element.background,
+			maxWidth: width || 240,
+			minWidth: width || 120
+		},
+		attributes: {
+			...props.attributes,
+			colSpan: api.table.getColSpan(element),
+			rowSpan: api.table.getRowSpan(element)
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "relative z-20 box-border h-full px-3 py-2",
+				style: { minHeight },
+				children: props.children
+			}),
+			!isSelectionAreaVisible && /* @__PURE__ */ jsx("div", {
+				className: "group absolute top-0 size-full select-none",
+				contentEditable: false,
+				suppressContentEditableWarning: true,
+				children: !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(ResizeHandle, {
+						...rightProps,
+						className: "-top-2 -right-1 h-[calc(100%_+_8px)] w-2 hover:bg-ring/50 data-[resizing=true]:bg-ring/50"
+					}),
+					/* @__PURE__ */ jsx(ResizeHandle, {
+						...bottomProps,
+						className: "-bottom-1 h-2"
+					}),
+					!hiddenLeft && /* @__PURE__ */ jsx(ResizeHandle, {
+						...leftProps,
+						className: "-left-1 top-0 w-2",
+						"data-resizer-left": colIndex === 0 ? "true" : void 0
+					}),
+					colIndex === 0 && /* @__PURE__ */ jsx("div", { className: cn("absolute top-0 z-30 h-full w-1 bg-ring", "left-[-1.5px]", "fade-in hidden animate-in group-has-[[data-resizer-left]:hover]/table:block group-has-[[data-resizer-left][data-resizing=\"true\"]]/table:block") })
+				] })
+			}),
+			isSelectingRow && /* @__PURE__ */ jsx("div", {
+				className: blockSelectionVariants(),
+				contentEditable: false
+			})
+		]
+	});
+}
+function TableCellHeaderElement(props) {
+	return /* @__PURE__ */ jsx(TableCellElement, {
+		...props,
+		isHeader: true
+	});
+}
+
+//#endregion
+export { TableCellElement, TableCellHeaderElement, TableElement, TableRowElement };

package/dist/src/components/editor/ui/table-toolbar-button.mjs

@@ -0,0 +1,190 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorPlugin, useEditorSelector } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS } from "platejs";
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Combine, Grid3x3Icon, Table, Trash2Icon, Ungroup, XIcon } from "lucide-react";
+import { TablePlugin, useTableMergeState } from "@platejs/table/react";
+
+//#region src/components/editor/ui/table-toolbar-button.tsx
+function TableToolbarButton(props) {
+	const tableSelected = useEditorSelector((editor$1) => editor$1.api.some({ match: { type: KEYS.table } }), []);
+	const { editor, tf } = useEditorPlugin(TablePlugin);
+	const [open, setOpen] = React$1.useState(false);
+	const mergeState = useTableMergeState();
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				pressed: open,
+				tooltip: "Table",
+				isDropdown: true,
+				children: /* @__PURE__ */ jsx(Table, {})
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "flex w-[180px] min-w-0 flex-col",
+			align: "start",
+			children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+				/* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
+					className: "gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+					children: [/* @__PURE__ */ jsx(Grid3x3Icon, { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: "Table" })]
+				}), /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+					className: "m-0 p-0",
+					children: /* @__PURE__ */ jsx(TablePicker, {})
+				})] }),
+				/* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
+					className: "gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+					disabled: !tableSelected,
+					children: [/* @__PURE__ */ jsx("div", { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: "Cell" })]
+				}), /* @__PURE__ */ jsxs(DropdownMenuSubContent, { children: [/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					className: "min-w-[180px]",
+					disabled: !mergeState.canMerge,
+					onSelect: () => {
+						tf.table.merge();
+						editor.tf.focus();
+					},
+					children: [/* @__PURE__ */ jsx(Combine, {}), "Merge cells"]
+				}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					className: "min-w-[180px]",
+					disabled: !mergeState.canSplit,
+					onSelect: () => {
+						tf.table.split();
+						editor.tf.focus();
+					},
+					children: [/* @__PURE__ */ jsx(Ungroup, {}), "Split cell"]
+				})] })] }),
+				/* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
+					className: "gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+					disabled: !tableSelected,
+					children: [/* @__PURE__ */ jsx("div", { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: "Row" })]
+				}), /* @__PURE__ */ jsxs(DropdownMenuSubContent, { children: [
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						className: "min-w-[180px]",
+						disabled: !tableSelected,
+						onSelect: () => {
+							tf.insert.tableRow({ before: true });
+							editor.tf.focus();
+						},
+						children: [/* @__PURE__ */ jsx(ArrowUp, {}), "Insert row before"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						className: "min-w-[180px]",
+						disabled: !tableSelected,
+						onSelect: () => {
+							tf.insert.tableRow();
+							editor.tf.focus();
+						},
+						children: [/* @__PURE__ */ jsx(ArrowDown, {}), "Insert row after"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						className: "min-w-[180px]",
+						disabled: !tableSelected,
+						onSelect: () => {
+							tf.remove.tableRow();
+							editor.tf.focus();
+						},
+						children: [/* @__PURE__ */ jsx(XIcon, {}), "Delete row"]
+					})
+				] })] }),
+				/* @__PURE__ */ jsxs(DropdownMenuSub, { children: [/* @__PURE__ */ jsxs(DropdownMenuSubTrigger, {
+					className: "gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+					disabled: !tableSelected,
+					children: [/* @__PURE__ */ jsx("div", { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: "Column" })]
+				}), /* @__PURE__ */ jsxs(DropdownMenuSubContent, { children: [
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						className: "min-w-[180px]",
+						disabled: !tableSelected,
+						onSelect: () => {
+							tf.insert.tableColumn({ before: true });
+							editor.tf.focus();
+						},
+						children: [/* @__PURE__ */ jsx(ArrowLeft, {}), "Insert column before"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						className: "min-w-[180px]",
+						disabled: !tableSelected,
+						onSelect: () => {
+							tf.insert.tableColumn();
+							editor.tf.focus();
+						},
+						children: [/* @__PURE__ */ jsx(ArrowRight, {}), "Insert column after"]
+					}),
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						className: "min-w-[180px]",
+						disabled: !tableSelected,
+						onSelect: () => {
+							tf.remove.tableColumn();
+							editor.tf.focus();
+						},
+						children: [/* @__PURE__ */ jsx(XIcon, {}), "Delete column"]
+					})
+				] })] }),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					className: "min-w-[180px]",
+					disabled: !tableSelected,
+					onSelect: () => {
+						tf.remove.table();
+						editor.tf.focus();
+					},
+					children: [/* @__PURE__ */ jsx(Trash2Icon, {}), "Delete table"]
+				})
+			] })
+		})]
+	});
+}
+function TablePicker() {
+	const { editor, tf } = useEditorPlugin(TablePlugin);
+	const [tablePicker, setTablePicker] = React$1.useState({
+		grid: Array.from({ length: 8 }, () => Array.from({ length: 8 }).fill(0)),
+		size: {
+			colCount: 0,
+			rowCount: 0
+		}
+	});
+	const onCellMove = (rowIndex, colIndex) => {
+		const newGrid = [...tablePicker.grid];
+		for (let i = 0; i < newGrid.length; i++) for (let j = 0; j < newGrid[i].length; j++) newGrid[i][j] = i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;
+		setTablePicker({
+			grid: newGrid,
+			size: {
+				colCount: colIndex + 1,
+				rowCount: rowIndex + 1
+			}
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex! m-0 flex-col p-0",
+		onClick: () => {
+			tf.insert.table(tablePicker.size, { select: true });
+			editor.tf.focus();
+		},
+		role: "button",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "grid size-[130px] grid-cols-8 gap-0.5 p-1",
+			children: tablePicker.grid.map((rows, rowIndex) => rows.map((value, columIndex) => /* @__PURE__ */ jsx("div", {
+				className: cn("col-span-1 size-3 border border-solid bg-secondary", !!value && "border-current"),
+				onMouseMove: () => {
+					onCellMove(rowIndex, columIndex);
+				}
+			}, `(${rowIndex},${columIndex})`)))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "text-center text-current text-xs",
+			children: [
+				tablePicker.size.rowCount,
+				" x ",
+				tablePicker.size.colCount
+			]
+		})]
+	});
+}
+
+//#endregion
+export { TableToolbarButton };