@fuma-content/studio 1.0.0 → 1.0.2

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

@@ -1,68 +0,0 @@
-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

@@ -1,375 +0,0 @@
-"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

@@ -1,190 +0,0 @@
-"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 };