@lobehub/editor 4.15.2 → 4.16.0

package/es/plugins/table/react/TableResize/index.js

@@ -1,19 +1,36 @@
+import { createDefaultTableColWidths, syncTableWidthDOM } from "../../utils/index.js";
 import { styles } from "./style.js";
 import { getCellColumnIndex, getCellNodeHeight } from "./utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cssVar, cx } from "antd-style";
-import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableRowNode, TableNode, getDOMCellFromTarget, getTableElement } from "@lexical/table";
-import { $getNearestNodeFromDOMNode, SKIP_SCROLL_INTO_VIEW_TAG, isHTMLElement } from "lexical";
+import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableNode, getDOMCellFromTarget, getTableElement } from "@lexical/table";
+import { $getNearestNodeFromDOMNode, $getNodeByKey, HISTORIC_TAG, SKIP_SCROLL_INTO_VIEW_TAG, isHTMLElement } from "lexical";
 import { calculateZoomLevel, mergeRegister } from "@lexical/utils";
 import { createPortal } from "react-dom";
 //#region src/plugins/table/react/TableResize/index.tsx
-const TableCellResize = memo(({ editor, eventEmitter }) => {
+const isHeightChanging = (direction) => {
+	return direction === "bottom";
+};
+const getTableColWidths = (tableNode) => {
+	return tableNode.getColWidths() || createDefaultTableColWidths(tableNode.getColumnCount());
+};
+const $getTableNodeByKey = (tableKey) => {
+	const node = $getNodeByKey(tableKey);
+	return $isTableNode(node) ? node : null;
+};
+const getCurrentTableRect = (activeCell, fallbackRect) => {
+	return activeCell.elem.closest("table.editor_table, table")?.getBoundingClientRect() ?? fallbackRect;
+};
+const getResizeUpdateTags = (skipHistory) => {
+	return skipHistory ? [SKIP_SCROLL_INTO_VIEW_TAG, HISTORIC_TAG] : SKIP_SCROLL_INTO_VIEW_TAG;
+};
+const TableCellResize = memo(({ editor, eventEmitter, resizeMode }) => {
 	const targetRef = useRef(null);
 	const resizerRef = useRef(null);
 	const tableRectRef = useRef(null);
 	const [hasTable, setHasTable] = useState(false);
-	const pointerStartPosRef = useRef(null);
+	const resizeStartStateRef = useRef(null);
 	const [pointerCurrentPos, updatePointerCurrentPos] = useState(null);
 	const [activeCell, updateActiveCell] = useState(null);
 	const [draggingDirection, updateDraggingDirection] = useState(null);
@@ -21,7 +38,8 @@ const TableCellResize = memo(({ editor, eventEmitter }) => {
 		updateActiveCell(null);
 		targetRef.current = null;
 		updateDraggingDirection(null);
-		pointerStartPosRef.current = null;
+		updatePointerCurrentPos(null);
+		resizeStartStateRef.current = null;
 		tableRectRef.current = null;
 	}, []);
 	useEffect(() => {
@@ -30,13 +48,108 @@ const TableCellResize = memo(({ editor, eventEmitter }) => {
 			for (const [nodeKey, mutation] of nodeMutations) if (mutation === "destroyed") tableKeys.delete(nodeKey);
 			else tableKeys.add(nodeKey);
 			setHasTable(tableKeys.size > 0);
-		}), editor.registerNodeTransform(TableNode, (tableNode) => {
-			if (tableNode.getColWidths()) return tableNode;
-			const numColumns = tableNode.getColumnCount();
-			tableNode.setColWidths(new Array(numColumns).fill(92));
-			return tableNode;
 		}));
 	}, [editor]);
+	const getResizeStartState = useCallback((direction, startPos) => {
+		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
+		let resizeState = null;
+		editor.getEditorState().read(() => {
+			const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
+			if (!$isTableCellNode(tableCellNode)) throw new Error("TableCellResizer: Table cell node not found.");
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+			if (!isHeightChanging(direction)) {
+				const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+				const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
+				if (columnIndex === void 0) throw new Error("TableCellResizer: Table column not found.");
+				const width = getTableColWidths(tableNode)[columnIndex] ?? 92;
+				resizeState = {
+					...startPos,
+					columnIndex,
+					direction: "right",
+					size: width,
+					tableKey: tableNode.getKey()
+				};
+				return;
+			}
+			const baseRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+			const tableRows = tableNode.getChildren();
+			const rowIndex = tableCellNode.getColSpan() === tableNode.getColumnCount() ? baseRowIndex : baseRowIndex + tableCellNode.getRowSpan() - 1;
+			if (rowIndex >= tableRows.length || rowIndex < 0) throw new Error("Expected table cell to be inside of table row.");
+			const tableRow = tableRows[rowIndex];
+			if (!$isTableRowNode(tableRow)) throw new Error("Expected table row");
+			let height = tableRow.getHeight();
+			if (height === void 0) {
+				const rowCells = tableRow.getChildren();
+				height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));
+			}
+			resizeState = {
+				...startPos,
+				direction: "bottom",
+				rowIndex,
+				size: height,
+				tableKey: tableNode.getKey()
+			};
+		}, { editor });
+		return resizeState;
+	}, [activeCell, editor]);
+	const updateRowHeight = useCallback((tableKey, rowIndex, nextHeight, skipHistory = false) => {
+		let didUpdate = false;
+		editor.update(() => {
+			const tableNode = $getTableNodeByKey(tableKey);
+			if (!tableNode) return;
+			const tableRows = tableNode.getChildren();
+			if (rowIndex >= tableRows.length || rowIndex < 0) throw new Error("Expected table cell to be inside of table row.");
+			const tableRow = tableRows[rowIndex];
+			if (!$isTableRowNode(tableRow)) throw new Error("Expected table row");
+			let height = tableRow.getHeight();
+			if (height === void 0) {
+				const rowCells = tableRow.getChildren();
+				height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));
+			}
+			const newHeight = Math.max(nextHeight, 33);
+			tableRow.setHeight(newHeight);
+			didUpdate = true;
+			eventEmitter.emit("table:resize", {
+				heightChange: newHeight - height,
+				newHeight
+			});
+		}, { tag: getResizeUpdateTags(skipHistory) });
+		return didUpdate;
+	}, [editor, eventEmitter]);
+	const updateColumnWidth = useCallback((tableKey, columnIndex, nextWidth, skipHistory = false) => {
+		let didUpdate = false;
+		editor.update(() => {
+			const tableNode = $getTableNodeByKey(tableKey);
+			if (!tableNode) return;
+			const colWidths = getTableColWidths(tableNode);
+			if (colWidths[columnIndex] === void 0) return;
+			const newColWidths = [...colWidths];
+			newColWidths[columnIndex] = Math.max(nextWidth, 92);
+			tableNode.setColWidths(newColWidths);
+			didUpdate = true;
+			requestAnimationFrame(() => {
+				syncTableWidthDOM(editor, tableKey, newColWidths);
+				eventEmitter.emit("table:resize", { newColWidths });
+			});
+		}, { tag: getResizeUpdateTags(skipHistory) });
+		return didUpdate;
+	}, [editor, eventEmitter]);
+	const commitResizeChange = useCallback((currentPos, startState, target, options) => {
+		const zoom = calculateZoomLevel(target);
+		const skipHistory = options?.skipHistory ?? resizeMode === "realtime";
+		if (startState.direction === "bottom") {
+			const heightChange = (currentPos.y - startState.y) / zoom;
+			if (heightChange === 0) return false;
+			return updateRowHeight(startState.tableKey, startState.rowIndex, startState.size + heightChange, skipHistory);
+		}
+		const widthChange = (currentPos.x - startState.x) / zoom;
+		if (widthChange === 0) return false;
+		return updateColumnWidth(startState.tableKey, startState.columnIndex, startState.size + widthChange, skipHistory);
+	}, [
+		resizeMode,
+		updateColumnWidth,
+		updateRowHeight
+	]);
 	useEffect(() => {
 		if (!hasTable) return;
 		const onPointerMove = (event) => {
@@ -45,10 +158,12 @@ const TableCellResize = memo(({ editor, eventEmitter }) => {
 			if (draggingDirection) {
 				event.preventDefault();
 				event.stopPropagation();
-				updatePointerCurrentPos({
+				const currentPos = {
 					x: event.clientX,
 					y: event.clientY
-				});
+				};
+				updatePointerCurrentPos(currentPos);
+				if (resizeMode === "realtime" && activeCell && resizeStartStateRef.current) commitResizeChange(currentPos, resizeStartStateRef.current, activeCell.elem);
 				return;
 			}
 			if (resizerRef.current && resizerRef.current.contains(target)) return;
@@ -85,72 +200,24 @@ const TableCellResize = memo(({ editor, eventEmitter }) => {
 		};
 	}, [
 		activeCell,
+		commitResizeChange,
 		draggingDirection,
 		editor,
+		hasTable,
 		resetState,
-		hasTable
+		resizeMode
 	]);
-	const isHeightChanging = (direction) => {
-		if (direction === "bottom") return true;
-		return false;
-	};
-	const updateRowHeight = useCallback((heightChange) => {
-		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
-		editor.update(() => {
-			const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-			if (!$isTableCellNode(tableCellNode)) throw new Error("TableCellResizer: Table cell node not found.");
-			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-			const baseRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
-			const tableRows = tableNode.getChildren();
-			const tableRowIndex = tableCellNode.getColSpan() === tableNode.getColumnCount() ? baseRowIndex : baseRowIndex + tableCellNode.getRowSpan() - 1;
-			if (tableRowIndex >= tableRows.length || tableRowIndex < 0) throw new Error("Expected table cell to be inside of table row.");
-			const tableRow = tableRows[tableRowIndex];
-			if (!$isTableRowNode(tableRow)) throw new Error("Expected table row");
-			let height = tableRow.getHeight();
-			if (height === void 0) {
-				const rowCells = tableRow.getChildren();
-				height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));
-			}
-			const newHeight = Math.max(height + heightChange, 33);
-			tableRow.setHeight(newHeight);
-			eventEmitter.emit("table:resize", {
-				heightChange,
-				newHeight
-			});
-		}, { tag: SKIP_SCROLL_INTO_VIEW_TAG });
-	}, [activeCell, editor]);
-	const updateColumnWidth = useCallback((widthChange) => {
-		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
-		editor.update(() => {
-			const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);
-			if (!$isTableCellNode(tableCellNode)) throw new Error("TableCellResizer: Table cell node not found.");
-			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-			const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
-			const columnIndex = getCellColumnIndex(tableCellNode, tableMap);
-			if (columnIndex === void 0) throw new Error("TableCellResizer: Table column not found.");
-			const colWidths = tableNode.getColWidths();
-			if (!colWidths) return;
-			const width = colWidths[columnIndex];
-			if (width === void 0) return;
-			const newColWidths = [...colWidths];
-			newColWidths[columnIndex] = Math.max(width + widthChange, 92);
-			tableNode.setColWidths(newColWidths);
-			requestAnimationFrame(() => {
-				eventEmitter.emit("table:resize", { newColWidths });
-			});
-		}, { tag: SKIP_SCROLL_INTO_VIEW_TAG });
-	}, [activeCell, editor]);
-	const pointerUpHandler = useCallback((direction) => {
+	const pointerUpHandler = useCallback(() => {
 		const handler = (event) => {
 			event.preventDefault();
 			event.stopPropagation();
 			if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
-			if (pointerStartPosRef.current) {
-				const { x, y } = pointerStartPosRef.current;
+			if (resizeStartStateRef.current) {
 				if (activeCell === null) return;
-				const zoom = calculateZoomLevel(event.target);
-				if (isHeightChanging(direction)) updateRowHeight((event.clientY - y) / zoom);
-				else updateColumnWidth((event.clientX - x) / zoom);
+				commitResizeChange({
+					x: event.clientX,
+					y: event.clientY
+				}, resizeStartStateRef.current, activeCell.elem, { skipHistory: false });
 				resetState();
 				if (typeof document !== "undefined") document.removeEventListener("pointerup", handler);
 			}
@@ -158,22 +225,29 @@ const TableCellResize = memo(({ editor, eventEmitter }) => {
 		return handler;
 	}, [
 		activeCell,
+		commitResizeChange,
 		resetState,
-		updateColumnWidth,
-		updateRowHeight
+		resizeMode
 	]);
 	const toggleResize = useCallback((direction) => (event) => {
 		event.preventDefault();
 		event.stopPropagation();
 		if (!activeCell) throw new Error("TableCellResizer: Expected active cell.");
-		pointerStartPosRef.current = {
+		const startPos = {
 			x: event.clientX,
 			y: event.clientY
 		};
-		updatePointerCurrentPos(pointerStartPosRef.current);
+		const resizeStartState = getResizeStartState(direction, startPos);
+		if (!resizeStartState) return;
+		resizeStartStateRef.current = resizeStartState;
+		updatePointerCurrentPos(startPos);
 		updateDraggingDirection(direction);
-		if (typeof document !== "undefined") document.addEventListener("pointerup", pointerUpHandler(direction));
-	}, [activeCell, pointerUpHandler]);
+		if (typeof document !== "undefined") document.addEventListener("pointerup", pointerUpHandler());
+	}, [
+		activeCell,
+		getResizeStartState,
+		pointerUpHandler
+	]);
 	const resizerStyles = useCallback(() => {
 		if (activeCell) {
 			const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
@@ -199,7 +273,7 @@ const TableCellResize = memo(({ editor, eventEmitter }) => {
 					width: `${zoneWidth}px`
 				}
 			};
-			const tableRect = tableRectRef.current;
+			const tableRect = getCurrentTableRect(activeCell, tableRectRef.current);
 			if (draggingDirection && pointerCurrentPos && tableRect) {
 				if (isHeightChanging(draggingDirection)) {
 					styles[draggingDirection].left = `${scrollX + tableRect.left}px`;
@@ -241,12 +315,13 @@ const TableCellResize = memo(({ editor, eventEmitter }) => {
 		})] })
 	});
 });
-var TableResize_default = memo(({ editor, eventEmitter }) => {
+var TableResize_default = memo(({ editor, eventEmitter, resizeMode }) => {
 	if (typeof document === "undefined") return null;
 	const container = document.querySelector(".ant-app") || document.body;
 	return createPortal(/* @__PURE__ */ jsx(TableCellResize, {
 		editor,
-		eventEmitter
+		eventEmitter,
+		resizeMode
 	}), container);
 });
 //#endregion

package/es/plugins/table/react/TableRowController.js

@@ -0,0 +1,349 @@
+import { INSERT_TABLE_ROW_COMMAND, MOVE_TABLE_ROW_COMMAND, SELECT_TABLE_COMMAND } from "../command/index.js";
+import { sum, useTableAxisDrag, useTableRowMetrics } from "./TableController/hooks.js";
+import { styles } from "./TableController/style.js";
+import { createTableDragImage } from "./TableController/utils.js";
+import TableControllerMenu from "./TableControllerMenu.js";
+import TableInsertButton from "./TableInsertButton.js";
+import { useTableControllerSelection } from "./hooks.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { $computeTableMapSkipCellCheck } from "@lexical/table";
+//#region src/plugins/table/react/TableRowController.tsx
+const INSERT_BUTTON_HIDE_DELAY = 160;
+const TABLE_DELETE_PREVIEW_CLASS = "lobe-editor-table-delete-preview";
+const DOTS = Array.from({ length: 6 }, (_, index) => index);
+const isBeforeFirstRow = (target) => {
+	return target?.index === 0 && !target.insertAfter;
+};
+const TableRowController = memo((props) => {
+	const { blockMenuService, editor, menuService, node, onInsertPreviewChange } = props;
+	const { rowHeights, tableWidth } = useTableRowMetrics(editor, node);
+	const { isTableFocused, isTableSelected, selectedRows } = useTableControllerSelection(editor, node);
+	const anchorRowIndexRef = useRef(null);
+	const deletePreviewElementsRef = useRef([]);
+	const insertButtonHoveredRef = useRef(false);
+	const insertButtonHideTimerRef = useRef(null);
+	const rowLeftRef = useRef(null);
+	const showMenu = selectedRows.length > 0 && !isTableSelected;
+	const [insertTarget, setInsertTarget] = useState(null);
+	const [menuAnchorElement, setMenuAnchorElement] = useState(null);
+	const [, setMenuVersion] = useState(0);
+	const pendingDragRowsRef = useRef(null);
+	const [isControllerHovered, setControllerHovered] = useState(false);
+	const clearInsertButtonHideTimer = () => {
+		if (insertButtonHideTimerRef.current) {
+			clearTimeout(insertButtonHideTimerRef.current);
+			insertButtonHideTimerRef.current = null;
+		}
+	};
+	const clearDeletePreview = useCallback(() => {
+		deletePreviewElementsRef.current.forEach((element) => {
+			element.classList.remove(TABLE_DELETE_PREVIEW_CLASS);
+		});
+		deletePreviewElementsRef.current = [];
+	}, []);
+	const showDeletePreview = useCallback(() => {
+		clearDeletePreview();
+		if (!showMenu) return;
+		editor.getEditorState().read(() => {
+			const [tableMap] = $computeTableMapSkipCellCheck(node.getLatest(), null, null);
+			const previewCellKeys = /* @__PURE__ */ new Set();
+			for (const rowIndex of selectedRows) {
+				const row = tableMap[rowIndex];
+				if (!row) continue;
+				for (const mapCell of row) if (mapCell?.cell) previewCellKeys.add(mapCell.cell.getKey());
+			}
+			for (const cellKey of previewCellKeys) {
+				const element = editor.getElementByKey(cellKey);
+				if (element instanceof HTMLElement) {
+					element.classList.add(TABLE_DELETE_PREVIEW_CLASS);
+					deletePreviewElementsRef.current.push(element);
+				}
+			}
+		});
+	}, [
+		clearDeletePreview,
+		editor,
+		node,
+		selectedRows,
+		showMenu
+	]);
+	const closeMenu = useCallback(() => {
+		setMenuAnchorElement(null);
+		onInsertPreviewChange?.(null);
+		clearDeletePreview();
+	}, [clearDeletePreview, onInsertPreviewChange]);
+	const menuContext = {
+		axis: "row",
+		editor,
+		node,
+		selectedIndexes: selectedRows
+	};
+	const menuItems = menuService?.getItems(menuContext).map((item) => {
+		if (item.type === "separator") return {
+			key: item.key,
+			type: "separator"
+		};
+		return {
+			danger: item.danger,
+			key: item.key,
+			label: typeof item.label === "function" ? item.label(menuContext) : item.label,
+			onClick: () => {
+				item.onClick(menuContext);
+			},
+			onMouseEnter: item.preview === "delete" ? showDeletePreview : item.preview === "insert-before" ? () => {
+				onInsertPreviewChange?.("top");
+			} : item.preview === "insert-after" ? () => {
+				onInsertPreviewChange?.("bottom");
+			} : void 0,
+			onMouseLeave: item.preview === "delete" ? clearDeletePreview : item.preview === "insert-before" || item.preview === "insert-after" ? () => {
+				onInsertPreviewChange?.(null);
+			} : void 0
+		};
+	}) ?? [];
+	const scheduleHideInsertButton = () => {
+		clearInsertButtonHideTimer();
+		insertButtonHideTimerRef.current = setTimeout(() => {
+			if (!insertButtonHoveredRef.current) setInsertTarget(null);
+		}, INSERT_BUTTON_HIDE_DELAY);
+	};
+	const { clearDragState, dragTarget, finishDrag: finishRowDrag, isDragging, startDrag } = useTableAxisDrag({
+		getDropTarget: useCallback((event) => {
+			const controller = rowLeftRef.current;
+			if (!controller) return null;
+			const rows = Array.from(controller.querySelectorAll(".row"));
+			if (rows.length === 0) return null;
+			for (const [index, row] of rows.entries()) {
+				const rect = row.getBoundingClientRect();
+				if (event.clientY <= rect.top + rect.height / 2) return {
+					index,
+					insertAfter: false
+				};
+			}
+			return {
+				index: rows.length - 1,
+				insertAfter: true
+			};
+		}, []),
+		onMove: useCallback((target, selectedIndexes) => {
+			editor.dispatchCommand(MOVE_TABLE_ROW_COMMAND, {
+				insertAfter: target.insertAfter,
+				rowIndex: target.index,
+				selectedRows: selectedIndexes,
+				table: node.getKey()
+			});
+		}, [editor, node])
+	});
+	const startRowDrag = useCallback((event, selectedIndexes) => {
+		event.dataTransfer.effectAllowed = "move";
+		event.dataTransfer.dropEffect = "move";
+		event.dataTransfer.setData("text/plain", "");
+		const dragImage = createTableDragImage(`拖拽 ${selectedIndexes.length} 行`);
+		event.dataTransfer.setDragImage(dragImage, dragImage.offsetWidth / 2, dragImage.offsetHeight / 2);
+		setInsertTarget(null);
+		closeMenu();
+		startDrag(event.nativeEvent, selectedIndexes);
+	}, [closeMenu, startDrag]);
+	const insertRowOffset = insertTarget ? sum(rowHeights.slice(0, insertTarget.index)) + (insertTarget.insertAfter ? rowHeights[insertTarget.index] || 0 : 0) : 0;
+	const dragRowOffset = dragTarget ? sum(rowHeights.slice(0, dragTarget.index)) + (dragTarget.insertAfter ? rowHeights[dragTarget.index] || 0 : 0) : 0;
+	const showRowInsertButton = !isDragging && Boolean(insertTarget) && !isBeforeFirstRow(insertTarget);
+	useEffect(() => {
+		if (selectedRows.length > 0) anchorRowIndexRef.current = selectedRows[0];
+	}, [selectedRows]);
+	useEffect(() => {
+		return menuService?.subscribe(() => {
+			setMenuVersion((version) => version + 1);
+		});
+	}, [menuService]);
+	useEffect(() => {
+		return () => {
+			clearInsertButtonHideTimer();
+			clearDeletePreview();
+			onInsertPreviewChange?.(null);
+			setMenuAnchorElement(null);
+			pendingDragRowsRef.current = null;
+			clearDragState();
+		};
+	}, [
+		clearDeletePreview,
+		clearDragState,
+		onInsertPreviewChange
+	]);
+	const shouldShowController = isTableFocused || isControllerHovered;
+	useEffect(() => {
+		if (!shouldShowController) {
+			clearInsertButtonHideTimer();
+			clearDeletePreview();
+			setInsertTarget(null);
+			onInsertPreviewChange?.(null);
+			setMenuAnchorElement(null);
+			pendingDragRowsRef.current = null;
+			clearDragState();
+		}
+	}, [
+		clearDeletePreview,
+		clearDragState,
+		onInsertPreviewChange,
+		shouldShowController
+	]);
+	useEffect(() => {
+		if (!showMenu) closeMenu();
+	}, [closeMenu, showMenu]);
+	if (!shouldShowController) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "table-controller-row",
+		contentEditable: false,
+		onMouseEnter: () => {
+			setControllerHovered(true);
+		},
+		onMouseLeave: () => {
+			setControllerHovered(false);
+			scheduleHideInsertButton();
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("left", styles.rowLeft),
+			ref: rowLeftRef,
+			children: [
+				/* @__PURE__ */ jsx(TableControllerMenu, {
+					anchorElement: menuAnchorElement,
+					blockMenuService,
+					items: menuItems,
+					onOpenChange: (open) => {
+						if (!open) closeMenu();
+					},
+					open: Boolean(menuAnchorElement) && showMenu && menuItems.length > 0,
+					position: "left"
+				}),
+				/* @__PURE__ */ jsx(TableInsertButton, {
+					ariaLabel: "Insert row",
+					offset: insertRowOffset,
+					onInsert: () => {
+						if (!insertTarget) return;
+						editor.dispatchCommand(INSERT_TABLE_ROW_COMMAND, {
+							insertAfter: insertTarget.insertAfter,
+							rowIndex: insertTarget.index,
+							table: node.getKey()
+						});
+						setInsertTarget(null);
+					},
+					onMouseEnter: () => {
+						insertButtonHoveredRef.current = true;
+						clearInsertButtonHideTimer();
+					},
+					onMouseLeave: () => {
+						insertButtonHoveredRef.current = false;
+						scheduleHideInsertButton();
+					},
+					position: "left",
+					reference: rowLeftRef.current,
+					visible: showRowInsertButton
+				}),
+				rowHeights.map((height, index) => {
+					const isLastRow = index + 1 === rowHeights.length;
+					const isSelected = selectedRows.includes(index);
+					const isSelectedController = isSelected && !isTableSelected;
+					const showSelectionDots = isSelected && !isTableSelected;
+					return /* @__PURE__ */ jsx("div", {
+						className: cx("row", styles.row, isLastRow && styles.rowLast, isSelected && styles.selected),
+						draggable: true,
+						onClickCapture: (event) => {
+							if (isSelectedController) {
+								event.preventDefault();
+								event.stopPropagation();
+								clearInsertButtonHideTimer();
+								setInsertTarget(null);
+								setMenuAnchorElement(event.currentTarget);
+							}
+						},
+						onDragEnd: () => {
+							pendingDragRowsRef.current = null;
+							finishRowDrag();
+						},
+						onDragStart: (event) => {
+							event.stopPropagation();
+							startRowDrag(event, pendingDragRowsRef.current || (isSelectedController ? selectedRows : [index]));
+						},
+						onMouseDown: (event) => {
+							event.stopPropagation();
+							if (isSelectedController) {
+								event.preventDefault();
+								pendingDragRowsRef.current = selectedRows;
+								return;
+							}
+							closeMenu();
+							pendingDragRowsRef.current = [index];
+							const anchorIndex = event.shiftKey ? selectedRows[0] ?? anchorRowIndexRef.current : index;
+							editor.dispatchCommand(SELECT_TABLE_COMMAND, {
+								anchorIndex,
+								extend: event.shiftKey,
+								rowIndex: index,
+								table: node.getKey()
+							});
+							if (!event.shiftKey) anchorRowIndexRef.current = index;
+						},
+						onMouseDownCapture: (event) => {
+							if (isSelectedController) {
+								event.stopPropagation();
+								pendingDragRowsRef.current = selectedRows;
+							}
+						},
+						onMouseMove: (event) => {
+							if (isDragging || isSelectedController) {
+								setInsertTarget(null);
+								return;
+							}
+							const rect = event.currentTarget.getBoundingClientRect();
+							const insertAfter = event.clientY - rect.top > rect.height / 2;
+							if (isBeforeFirstRow({
+								index,
+								insertAfter
+							})) {
+								setInsertTarget(null);
+								return;
+							}
+							setInsertTarget({
+								index,
+								insertAfter
+							});
+						},
+						onMouseUpCapture: (event) => {
+							if (isSelectedController) {
+								event.preventDefault();
+								event.stopPropagation();
+							}
+						},
+						onPointerDownCapture: (event) => {
+							if (isSelectedController) {
+								event.stopPropagation();
+								pendingDragRowsRef.current = selectedRows;
+							}
+						},
+						style: { height },
+						children: /* @__PURE__ */ jsx("span", {
+							className: cx(styles.selectionDots, styles.rowSelectionDots, showSelectionDots && styles.selectionDotsVisible),
+							children: DOTS.map((dot) => /* @__PURE__ */ jsx("span", {}, dot))
+						})
+					}, index);
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cx(styles.dragIndicator, styles.rowDragIndicator, Boolean(dragTarget) && isDragging && styles.dragIndicatorVisible),
+					style: {
+						inlineSize: tableWidth,
+						top: dragRowOffset
+					}
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("corner", styles.corner, isTableSelected && styles.selected, isTableSelected && styles.selectedCorner),
+			onMouseDown: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				editor.dispatchCommand(SELECT_TABLE_COMMAND, { table: node.getKey() });
+			}
+		})]
+	});
+});
+TableRowController.displayName = "TableRowController";
+//#endregion
+export { TableRowController as default };