@meowdown/react 0.81.0 → 0.81.1

package/dist/index.js

@@ -286,6 +286,24 @@ function CodeBlockView(props) {
 	});
 }
 function CodeBlockToolbar({ code, language, setLanguage }) {
+	const [comboboxOpen, setComboboxOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: code_block_view_module_default.Toolbar,
+		contentEditable: false,
+		"data-open": comboboxOpen || void 0,
+		children: [/* @__PURE__ */ jsx(CodeBlockLanguagePickerMemo, {
+			language,
+			setLanguage,
+			onShownChange: setComboboxOpen
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			getText: () => code,
+			label: "Copy code",
+			className: code_block_view_module_default.CopyButton,
+			"data-testid": "code-block-copy"
+		})]
+	});
+}
+function CodeBlockLanguagePicker({ language, setLanguage, onShownChange }) {
 	const collisionBoundary = use(CollisionBoundaryContext);
 	const selected = useMemo(() => {
 		return codeBlockLanguages.find((item) => item.value === language) ?? {
@@ -294,7 +312,6 @@ function CodeBlockToolbar({ code, language, setLanguage }) {
 		};
 	}, [language]);
 	const [query, setQuery] = useState("");
-	const [comboboxOpen, setComboboxOpen] = useState(false);
 	const itemsForView = useMemo(() => {
 		const value = query.trim();
 		if (!value) return codeBlockLanguages;
@@ -304,74 +321,65 @@ function CodeBlockToolbar({ code, language, setLanguage }) {
 			label: `Use "${value}"`
 		}];
 	}, [query]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: code_block_view_module_default.Toolbar,
-		contentEditable: false,
-		"data-open": comboboxOpen || void 0,
-		children: [/* @__PURE__ */ jsxs(Combobox.Root, {
-			items: itemsForView,
-			value: selected,
-			onValueChange: (item) => setLanguage(item?.value ?? ""),
-			inputValue: query,
-			onInputValueChange: setQuery,
-			onOpenChange: (open) => {
-				if (open) setComboboxOpen(true);
-				else setQuery("");
-			},
-			onOpenChangeComplete: (open) => {
-				if (!open) setComboboxOpen(false);
-			},
-			children: [/* @__PURE__ */ jsxs(Combobox.Trigger, {
-				className: code_block_view_module_default.Trigger,
-				"data-testid": "code-block-language",
-				children: [/* @__PURE__ */ jsx(Combobox.Value, { placeholder: "Plain Text" }), /* @__PURE__ */ jsx(Combobox.Icon, {
-					className: code_block_view_module_default.TriggerIcon,
-					children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
-				})]
-			}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
-				className: code_block_view_module_default.Positioner,
-				sideOffset: 4,
-				collisionBoundary,
-				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
-					className: code_block_view_module_default.Popup,
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: code_block_view_module_default.SearchRow,
-							children: /* @__PURE__ */ jsx(Combobox.Input, {
-								className: code_block_view_module_default.Search,
-								placeholder: "Search or type a language",
-								"data-testid": "code-block-language-search"
-							})
-						}),
-						/* @__PURE__ */ jsx(Combobox.Empty, {
-							className: code_block_view_module_default.Empty,
-							children: "No languages found."
-						}),
-						/* @__PURE__ */ jsx(Combobox.List, {
-							className: code_block_view_module_default.List,
-							children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
-								value: item,
-								className: code_block_view_module_default.Item,
-								children: [/* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-									className: code_block_view_module_default.ItemIndicator,
-									children: /* @__PURE__ */ jsx(CheckIcon, {})
-								}), /* @__PURE__ */ jsx("span", {
-									className: code_block_view_module_default.ItemText,
-									children: item.label
-								})]
-							}, item.label)
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		items: itemsForView,
+		value: selected,
+		onValueChange: (item) => setLanguage(item?.value ?? ""),
+		inputValue: query,
+		onInputValueChange: setQuery,
+		onOpenChange: (open) => {
+			if (open) onShownChange(true);
+			else setQuery("");
+		},
+		onOpenChangeComplete: (open) => {
+			if (!open) onShownChange(false);
+		},
+		children: [/* @__PURE__ */ jsxs(Combobox.Trigger, {
+			className: code_block_view_module_default.Trigger,
+			"data-testid": "code-block-language",
+			children: [/* @__PURE__ */ jsx(Combobox.Value, { placeholder: "Plain Text" }), /* @__PURE__ */ jsx(Combobox.Icon, {
+				className: code_block_view_module_default.TriggerIcon,
+				children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
+			})]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			className: code_block_view_module_default.Positioner,
+			sideOffset: 4,
+			collisionBoundary,
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				className: code_block_view_module_default.Popup,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: code_block_view_module_default.SearchRow,
+						children: /* @__PURE__ */ jsx(Combobox.Input, {
+							className: code_block_view_module_default.Search,
+							placeholder: "Search or type a language",
+							"data-testid": "code-block-language-search"
 						})
-					]
-				})
-			}) })]
-		}), /* @__PURE__ */ jsx(CopyButton, {
-			getText: () => code,
-			label: "Copy code",
-			className: code_block_view_module_default.CopyButton,
-			"data-testid": "code-block-copy"
-		})]
+					}),
+					/* @__PURE__ */ jsx(Combobox.Empty, {
+						className: code_block_view_module_default.Empty,
+						children: "No languages found."
+					}),
+					/* @__PURE__ */ jsx(Combobox.List, {
+						className: code_block_view_module_default.List,
+						children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
+							value: item,
+							className: code_block_view_module_default.Item,
+							children: [/* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+								className: code_block_view_module_default.ItemIndicator,
+								children: /* @__PURE__ */ jsx(CheckIcon, {})
+							}), /* @__PURE__ */ jsx("span", {
+								className: code_block_view_module_default.ItemText,
+								children: item.label
+							})]
+						}, item.label)
+					})
+				]
+			})
+		}) })]
 	});
 }
+const CodeBlockLanguagePickerMemo = /* @__PURE__ */ memo(CodeBlockLanguagePicker);
 
 //#endregion
 //#region src/extensions/code-block-view.ts
@@ -1124,11 +1132,11 @@ function SelectionMenu({ onSelectionMenuSearch, context, onOpen, onClose, afford
 			const { from, to, empty } = view.state.selection;
 			const anchorable = !empty && isTextSelection(view.state.selection) && !getPendingReplacement(view.state) && getSearchStatus(view.state).active === 0;
 			setSelection((previous) => {
-				if (previous?.from === from && previous?.to === to && previous?.anchorable === anchorable) return previous;
+				if (!anchorable) return;
+				if (previous?.from === from && previous?.to === to) return previous;
 				return {
 					from,
-					to,
-					anchorable
+					to
 				};
 			});
 		});
@@ -1141,7 +1149,7 @@ function SelectionMenu({ onSelectionMenuSearch, context, onOpen, onClose, afford
 		if (!context) return;
 		return getMenuAnchor(editor.view, context.from, context.to);
 	}, [context, editor]);
-	const showAffordance = affordance && !!!context && !!selection?.anchorable;
+	const showAffordance = affordance && !!!context && !!selection;
 	const affordanceVisible = useDelayedFlag(showAffordance, 250, 0);
 	const affordanceAnchor = useMemo(() => {
 		if (!showAffordance || !selection) return;
@@ -1364,11 +1372,104 @@ function SlashMenuItem({ label, keywords, detail, kbd, onSelect }) {
 function selectionInTableCell(editor) {
 	return isSelectionInTableCell(editor.state);
 }
+function BuiltinSlashMenuItems({ editor, timeFormat, onAttachFile }) {
+	const inTableCell = useEditorDerivedValue(selectionInTableCell);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		!inTableCell && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Text",
+				keywords: ["paragraph", "plain"],
+				onSelect: () => editor.commands.turnIntoText()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Heading 1",
+				keywords: ["h1"],
+				kbd: "#",
+				onSelect: () => editor.commands.setHeading({ level: 1 })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Heading 2",
+				keywords: ["h2"],
+				kbd: "##",
+				onSelect: () => editor.commands.setHeading({ level: 2 })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Heading 3",
+				keywords: ["h3"],
+				kbd: "###",
+				onSelect: () => editor.commands.setHeading({ level: 3 })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Heading 4",
+				keywords: ["h4"],
+				kbd: "####",
+				onSelect: () => editor.commands.setHeading({ level: 4 })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Blockquote",
+				kbd: ">",
+				onSelect: () => editor.commands.setBlockquote()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Bullet list",
+				kbd: "-",
+				onSelect: () => editor.commands.wrapInList({ kind: "bullet" })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Ordered list",
+				kbd: "1.",
+				onSelect: () => editor.commands.wrapInList({ kind: "ordered" })
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Task list",
+				kbd: "+ [ ] ",
+				onSelect: () => editor.commands.wrapInCircleTask()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Checkbox list",
+				kbd: "- [ ] ",
+				onSelect: () => editor.commands.wrapInSquareTask()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Code block",
+				kbd: "```",
+				onSelect: () => editor.commands.setCodeBlock()
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Math",
+				keywords: ["latex"],
+				kbd: "```math",
+				onSelect: () => editor.commands.insertMarkdown("```math\n```")
+			}),
+			/* @__PURE__ */ jsx(SlashMenuItem, {
+				label: "Table",
+				onSelect: () => editor.commands.insertTable({
+					row: 3,
+					col: 3,
+					header: true
+				})
+			})
+		] }),
+		/* @__PURE__ */ jsx(SlashMenuItem, {
+			label: "Now",
+			onSelect: () => editor.commands.insertText({ text: formatNowTime(timeFormat) })
+		}),
+		onAttachFile ? /* @__PURE__ */ jsx(SlashMenuItem, {
+			label: "Attach file",
+			keywords: [
+				"attachment",
+				"file",
+				"upload"
+			],
+			onSelect: onAttachFile
+		}) : null
+	] });
+}
+const BuiltinSlashMenuItemsMemo = /* @__PURE__ */ memo(BuiltinSlashMenuItems);
 function SlashMenu({ timeFormat = "12", onSlashMenuSearch, onFilePaste, onFileSaveError }) {
 	const editor = useEditor$1();
 	const collisionBoundary = use(CollisionBoundaryContext);
 	const fileInputRef = useRef(null);
-	const inTableCell = useEditorDerivedValue(selectionInTableCell);
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
 	const [hostItems, setHostItems] = useState([]);
@@ -1434,94 +1535,11 @@ function SlashMenu({ timeFormat = "12", onSlashMenuSearch, onFilePaste, onFileSa
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "slash-menu",
 				children: [
-					!inTableCell && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Text",
-							keywords: ["paragraph", "plain"],
-							onSelect: () => editor.commands.turnIntoText()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Heading 1",
-							keywords: ["h1"],
-							kbd: "#",
-							onSelect: () => editor.commands.setHeading({ level: 1 })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Heading 2",
-							keywords: ["h2"],
-							kbd: "##",
-							onSelect: () => editor.commands.setHeading({ level: 2 })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Heading 3",
-							keywords: ["h3"],
-							kbd: "###",
-							onSelect: () => editor.commands.setHeading({ level: 3 })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Heading 4",
-							keywords: ["h4"],
-							kbd: "####",
-							onSelect: () => editor.commands.setHeading({ level: 4 })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Blockquote",
-							kbd: ">",
-							onSelect: () => editor.commands.setBlockquote()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Bullet list",
-							kbd: "-",
-							onSelect: () => editor.commands.wrapInList({ kind: "bullet" })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Ordered list",
-							kbd: "1.",
-							onSelect: () => editor.commands.wrapInList({ kind: "ordered" })
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Task list",
-							kbd: "+ [ ] ",
-							onSelect: () => editor.commands.wrapInCircleTask()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Checkbox list",
-							kbd: "- [ ] ",
-							onSelect: () => editor.commands.wrapInSquareTask()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Code block",
-							kbd: "```",
-							onSelect: () => editor.commands.setCodeBlock()
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Math",
-							keywords: ["latex"],
-							kbd: "```math",
-							onSelect: () => editor.commands.insertMarkdown("```math\n```")
-						}),
-						/* @__PURE__ */ jsx(SlashMenuItem, {
-							label: "Table",
-							onSelect: () => editor.commands.insertTable({
-								row: 3,
-								col: 3,
-								header: true
-							})
-						})
-					] }),
-					/* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Now",
-						onSelect: () => editor.commands.insertText({ text: formatNowTime(timeFormat) })
+					/* @__PURE__ */ jsx(BuiltinSlashMenuItemsMemo, {
+						editor,
+						timeFormat,
+						onAttachFile: onFilePaste ? openFilePicker : void 0
 					}),
-					onFilePaste ? /* @__PURE__ */ jsx(SlashMenuItem, {
-						label: "Attach file",
-						keywords: [
-							"attachment",
-							"file",
-							"upload"
-						],
-						onSelect: openFilePicker
-					}) : null,
 					hostItems.map((item) => /* @__PURE__ */ jsx(SlashMenuItem, {
 						label: item.label,
 						keywords: item.keywords,
@@ -1552,68 +1570,188 @@ var table_handle_module_default = {
 
 //#endregion
 //#region src/components/table-handle.tsx
-function getTableHandleState(editor) {
-	const commands = editor.commands;
-	const columnAlign = getTableColumnAlign(editor.state);
-	return {
-		columnAlign,
-		setTableColumnAlign: {
-			canExec: commands.setTableColumnAlign.canExec("left"),
-			command: (align) => {
-				return commands.setTableColumnAlign(columnAlign === align ? null : align);
-			}
-		},
-		addTableColumnBefore: {
-			canExec: commands.addTableColumnBefore.canExec(),
-			command: () => commands.addTableColumnBefore()
-		},
-		addTableColumnAfter: {
-			canExec: commands.addTableColumnAfter.canExec(),
-			command: () => commands.addTableColumnAfter()
-		},
-		addTableRowAbove: {
-			canExec: commands.addTableRowAbove.canExec(),
-			command: () => commands.addTableRowAbove()
-		},
-		addTableRowBelow: {
-			canExec: commands.addTableRowBelow.canExec(),
-			command: () => commands.addTableRowBelow()
-		},
-		deleteCellSelection: {
-			canExec: commands.deleteCellSelection.canExec(),
-			command: () => commands.deleteCellSelection()
-		},
-		deleteTableColumn: {
-			canExec: commands.deleteTableColumn.canExec(),
-			command: () => commands.deleteTableColumn()
-		},
-		deleteTableRow: {
-			canExec: commands.deleteTableRow.canExec(),
-			command: () => commands.deleteTableRow()
-		},
-		deleteTable: {
-			canExec: commands.deleteTable.canExec(),
-			command: () => commands.deleteTable()
-		}
-	};
-}
-const COLUMN_ALIGN_LABELS = {
-	left: "Align Left",
-	center: "Align Center",
-	right: "Align Right"
-};
-function ColumnAlignMenuItem({ align, columnAlign, onSelect }) {
-	const active = columnAlign === align;
-	return /* @__PURE__ */ jsxs(MenuItem, {
+function TableHandleItem({ children, onSelect, testId, active = false, danger = false }) {
+	return /* @__PURE__ */ jsx(MenuItem, {
 		className: table_handle_module_default.MenuItem,
-		"data-testid": `table-align-${align}`,
-		"data-active": active ? "" : void 0,
 		onSelect,
-		children: [/* @__PURE__ */ jsx("span", { children: COLUMN_ALIGN_LABELS[align] }), active && /* @__PURE__ */ jsx(CheckIcon, {})]
+		"data-testid": testId,
+		"data-active": active ? "" : void 0,
+		"data-danger": danger ? "" : void 0,
+		children
+	});
+}
+function canInsertLeft(editor) {
+	return editor.commands.addTableColumnBefore.canExec();
+}
+function runInsertLeft(editor) {
+	editor.commands.addTableColumnBefore();
+}
+function TableMenuInsertLeft({ editor }) {
+	const canExec = useEditorDerivedValue(canInsertLeft);
+	const handler = useCallback(() => runInsertLeft(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-insert-left",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Insert Left" })
+	}) : null;
+}
+function canInsertRight(editor) {
+	return editor.commands.addTableColumnAfter.canExec();
+}
+function runInsertRight(editor) {
+	editor.commands.addTableColumnAfter();
+}
+function TableMenuInsertRight({ editor }) {
+	const canExec = useEditorDerivedValue(canInsertRight);
+	const handler = useCallback(() => runInsertRight(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-insert-right",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Insert Right" })
+	}) : null;
+}
+function canAlign(editor) {
+	return editor.commands.setTableColumnAlign.canExec("left");
+}
+function getActiveAlign(editor) {
+	return getTableColumnAlign(editor.state);
+}
+function runAlign(editor, align, active) {
+	editor.commands.setTableColumnAlign(active ? null : align);
+}
+function TableMenuAlignItem({ label, editor, align, activeAlign }) {
+	const active = activeAlign === align;
+	const handler = useCallback(() => runAlign(editor, align, active), [
+		editor,
+		align,
+		active
+	]);
+	return /* @__PURE__ */ jsxs(TableHandleItem, {
+		testId: `table-align-${align}`,
+		active,
+		onSelect: handler,
+		children: [/* @__PURE__ */ jsx("span", { children: label }), active && /* @__PURE__ */ jsx(CheckIcon, {})]
 	});
 }
+function TableMenuAlignItems({ editor }) {
+	const activeAlign = useEditorDerivedValue(getActiveAlign);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(TableMenuAlignItem, {
+			align: "left",
+			label: "Align Left",
+			editor,
+			activeAlign
+		}),
+		/* @__PURE__ */ jsx(TableMenuAlignItem, {
+			align: "center",
+			label: "Align Center",
+			editor,
+			activeAlign
+		}),
+		/* @__PURE__ */ jsx(TableMenuAlignItem, {
+			align: "right",
+			label: "Align Right",
+			editor,
+			activeAlign
+		})
+	] });
+}
+function TableMenuAlign({ editor }) {
+	return useEditorDerivedValue(canAlign) ? /* @__PURE__ */ jsx(TableMenuAlignItems, { editor }) : null;
+}
+function canClearContents(editor) {
+	return editor.commands.deleteCellSelection.canExec();
+}
+function runClearContents(editor) {
+	editor.commands.deleteCellSelection();
+}
+function TableMenuClearContents({ editor, testId }) {
+	const canExec = useEditorDerivedValue(canClearContents);
+	const handler = useCallback(() => runClearContents(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsxs(TableHandleItem, {
+		testId,
+		onSelect: handler,
+		children: [/* @__PURE__ */ jsx("span", { children: "Clear Contents" }), /* @__PURE__ */ jsx("kbd", { children: "Del" })]
+	}) : null;
+}
+function canDeleteColumn(editor) {
+	return editor.commands.deleteTableColumn.canExec();
+}
+function runDeleteColumn(editor) {
+	editor.commands.deleteTableColumn();
+}
+function TableMenuDeleteColumn({ editor }) {
+	const canExec = useEditorDerivedValue(canDeleteColumn);
+	const handler = useCallback(() => runDeleteColumn(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-delete-column",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Delete Column" })
+	}) : null;
+}
+function canInsertAbove(editor) {
+	return editor.commands.addTableRowAbove.canExec();
+}
+function runInsertAbove(editor) {
+	editor.commands.addTableRowAbove();
+}
+function TableMenuInsertAbove({ editor }) {
+	const canExec = useEditorDerivedValue(canInsertAbove);
+	const handler = useCallback(() => runInsertAbove(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-insert-above",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Insert Above" })
+	}) : null;
+}
+function canInsertBelow(editor) {
+	return editor.commands.addTableRowBelow.canExec();
+}
+function runInsertBelow(editor) {
+	editor.commands.addTableRowBelow();
+}
+function TableMenuInsertBelow({ editor }) {
+	const canExec = useEditorDerivedValue(canInsertBelow);
+	const handler = useCallback(() => runInsertBelow(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-insert-below",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Insert Below" })
+	}) : null;
+}
+function canDeleteRow(editor) {
+	return editor.commands.deleteTableRow.canExec();
+}
+function runDeleteRow(editor) {
+	editor.commands.deleteTableRow();
+}
+function TableMenuDeleteRow({ editor }) {
+	const canExec = useEditorDerivedValue(canDeleteRow);
+	const handler = useCallback(() => runDeleteRow(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId: "table-delete-row",
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Delete Row" })
+	}) : null;
+}
+function canDeleteTable(editor) {
+	return editor.commands.deleteTable.canExec();
+}
+function runDeleteTable(editor) {
+	editor.commands.deleteTable();
+}
+function TableMenuDeleteTable({ editor, testId }) {
+	const canExec = useEditorDerivedValue(canDeleteTable);
+	const handler = useCallback(() => runDeleteTable(editor), [editor]);
+	return canExec ? /* @__PURE__ */ jsx(TableHandleItem, {
+		testId,
+		danger: true,
+		onSelect: handler,
+		children: /* @__PURE__ */ jsx("span", { children: "Delete Table" })
+	}) : null;
+}
 function TableHandle() {
-	const state = useEditorDerivedValue(getTableHandleState);
+	const editor = useEditor$1();
 	return /* @__PURE__ */ jsxs(TableHandleRoot, { children: [
 		/* @__PURE__ */ jsx(TableHandleDragPreview, {}),
 		/* @__PURE__ */ jsx(TableHandleDropIndicator, {}),
@@ -1631,53 +1769,17 @@ function TableHandle() {
 						className: table_handle_module_default.MenuPopup,
 						"data-testid": "table-handle-column-menu",
 						children: [
-							state.addTableColumnBefore.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-insert-left",
-								onSelect: state.addTableColumnBefore.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Insert Left" })
-							}),
-							state.addTableColumnAfter.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-insert-right",
-								onSelect: state.addTableColumnAfter.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Insert Right" })
-							}),
-							state.setTableColumnAlign.canExec && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-								/* @__PURE__ */ jsx(ColumnAlignMenuItem, {
-									align: "left",
-									columnAlign: state.columnAlign,
-									onSelect: () => state.setTableColumnAlign.command("left")
-								}),
-								/* @__PURE__ */ jsx(ColumnAlignMenuItem, {
-									align: "center",
-									columnAlign: state.columnAlign,
-									onSelect: () => state.setTableColumnAlign.command("center")
-								}),
-								/* @__PURE__ */ jsx(ColumnAlignMenuItem, {
-									align: "right",
-									columnAlign: state.columnAlign,
-									onSelect: () => state.setTableColumnAlign.command("right")
-								})
-							] }),
-							state.deleteCellSelection.canExec && /* @__PURE__ */ jsxs(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-clear-column",
-								onSelect: state.deleteCellSelection.command,
-								children: [/* @__PURE__ */ jsx("span", { children: "Clear Contents" }), /* @__PURE__ */ jsx("kbd", { children: "Del" })]
-							}),
-							state.deleteTableColumn.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-delete-column",
-								onSelect: state.deleteTableColumn.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Delete Column" })
+							/* @__PURE__ */ jsx(TableMenuInsertLeft, { editor }),
+							/* @__PURE__ */ jsx(TableMenuInsertRight, { editor }),
+							/* @__PURE__ */ jsx(TableMenuAlign, { editor }),
+							/* @__PURE__ */ jsx(TableMenuClearContents, {
+								editor,
+								testId: "table-clear-column"
 							}),
-							state.deleteTable.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-danger": "",
-								"data-testid": "table-delete-table-column",
-								onSelect: state.deleteTable.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Delete Table" })
+							/* @__PURE__ */ jsx(TableMenuDeleteColumn, { editor }),
+							/* @__PURE__ */ jsx(TableMenuDeleteTable, {
+								editor,
+								testId: "table-delete-table-column"
 							})
 						]
 					})
@@ -1685,7 +1787,6 @@ function TableHandle() {
 			})
 		}),
 		/* @__PURE__ */ jsx(TableHandleRowPositioner, {
-			placement: "left",
 			className: table_handle_module_default.Positioner,
 			children: /* @__PURE__ */ jsx(TableHandleRowPopup, {
 				className: table_handle_module_default.RowPopup,
@@ -1699,36 +1800,16 @@ function TableHandle() {
 						className: table_handle_module_default.MenuPopup,
 						"data-testid": "table-handle-row-menu",
 						children: [
-							state.addTableRowAbove.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-insert-above",
-								onSelect: state.addTableRowAbove.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Insert Above" })
-							}),
-							state.addTableRowBelow.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-insert-below",
-								onSelect: state.addTableRowBelow.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Insert Below" })
-							}),
-							state.deleteCellSelection.canExec && /* @__PURE__ */ jsxs(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-clear-row",
-								onSelect: state.deleteCellSelection.command,
-								children: [/* @__PURE__ */ jsx("span", { children: "Clear Contents" }), /* @__PURE__ */ jsx("kbd", { children: "Del" })]
-							}),
-							state.deleteTableRow.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-testid": "table-delete-row",
-								onSelect: state.deleteTableRow.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Delete Row" })
+							/* @__PURE__ */ jsx(TableMenuInsertAbove, { editor }),
+							/* @__PURE__ */ jsx(TableMenuInsertBelow, { editor }),
+							/* @__PURE__ */ jsx(TableMenuClearContents, {
+								editor,
+								testId: "table-clear-row"
 							}),
-							state.deleteTable.canExec && /* @__PURE__ */ jsx(MenuItem, {
-								className: table_handle_module_default.MenuItem,
-								"data-danger": "",
-								"data-testid": "table-delete-table-row",
-								onSelect: state.deleteTable.command,
-								children: /* @__PURE__ */ jsx("span", { children: "Delete Table" })
+							/* @__PURE__ */ jsx(TableMenuDeleteRow, { editor }),
+							/* @__PURE__ */ jsx(TableMenuDeleteTable, {
+								editor,
+								testId: "table-delete-table-row"
 							})
 						]
 					})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.81.0",
+  "version": "0.81.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -56,12 +56,12 @@
     "@tsdown/css": "^0.23.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@vitest/browser-playwright": "^5.0.3",
+    "@vitest/browser-playwright": "^5.0.5",
     "dedent": "^1.7.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tsdown": "^0.23.1",
-    "vitest": "^5.0.3",
+    "vitest": "^5.0.5",
     "vitest-browser-commands": "^0.5.0",
     "vitest-browser-react": "^2.3.0"
   },