@lofcz/platejs-table 52.0.11 → 52.3.6

package/dist/react/index.js

@@ -1,11 +1,28 @@
-import { B as getTableOverriddenColSizes, Q as isSelectedCellBorder, V as getTableGridAbove, Y as getTableCellBorders, Z as getSelectedCellsBorders, _ as setTableMarginLeft, a as BaseTableRowPlugin, dt as getColSpan, g as setTableRowSize, i as BaseTablePlugin, j as isTableRectangular, lt as getCellIndices, n as BaseTableCellHeaderPlugin, nt as getSelectedCellsBoundingBox, ot as getLeftTableCell, r as BaseTableCellPlugin, rt as getRowSpan, st as getCellTypes, t as KEY_SHIFT_EDGES, tt as getTopTableCell, ut as computeCellIndices, v as setTableColSize, x as moveSelectionFromCell, y as setBorderSize } from "../constants-B6Sm9BNa.js";
+import { $ as getSelectedCellEntries, C as moveSelectionFromCell, Ct as getColSpan, K as getSelectedCellsBorders, S as setBorderSize, St as getRowSpan, V as getTableOverriddenColSizes, W as getTableCellBorders, X as getTopTableCell, Z as getSelectedCellsBoundingBox, _ as hasAdjacentBlockInCell, _t as getCellTypes, a as BaseTableRowPlugin, b as setTableMarginLeft, bt as computeCellIndices, et as getSelectedCellIds, ft as getLeftTableCell, g as getTableMoveSelectionContext, i as BaseTablePlugin, n as BaseTableCellHeaderPlugin, q as isSelectedCellBorder, r as BaseTableCellPlugin, t as KEY_SHIFT_EDGES, v as shouldMoveSelectionFromCell, x as setTableColSize, y as setTableRowSize, yt as getCellIndices } from "../constants-DGdhsla3.js";
 import { Hotkeys, KEYS, PathApi } from "platejs";
-import { atom, createAtomStore, toPlatePlugin, useEditorPlugin, useEditorRef, useEditorSelection, useEditorSelector, useElement, useElementSelector, usePluginOption, useReadOnly, useSelected } from "platejs/react";
+import { atom, createAtomStore, toPlatePlugin, useEditorPlugin, useEditorSelector, useElement, useElementSelector, usePluginOption, useReadOnly } from "platejs/react";
 import { c } from "react-compiler-runtime";
 import React from "react";
 import { resizeLengthClampStatic } from "@platejs/resizable";
 
 //#region src/react/onKeyDownTable.ts
+const shouldMoveSingleCellSelection = (editor, key) => {
+	const context = getTableMoveSelectionContext(editor, editor.selection?.focus);
+	if (!context) return false;
+	const { blockPath, cellPath, point } = context;
+	if (key === "shift+left") return editor.api.isStart(point, cellPath);
+	if (key === "shift+right") return editor.api.isEnd(point, cellPath);
+	if (hasAdjacentBlockInCell(editor, {
+		blockPath,
+		cellPath,
+		reverse: key === "shift+up"
+	})) return false;
+	return shouldMoveSelectionFromCell(editor, {
+		blockPath,
+		point,
+		reverse: key === "shift+up"
+	});
+};
 const onKeyDownTable = ({ editor, event }) => {
 	if (event.defaultPrevented) return;
 	if (event.which === 229 && editor.selection && editor.api.isExpanded()) {
@@ -24,9 +41,15 @@ const onKeyDownTable = ({ editor, event }) => {
 		"shift+up": Hotkeys.isExtendUpward(event)
 	};
 	Object.keys(isKeyDown).forEach((key) => {
-		if (isKeyDown[key] && moveSelectionFromCell(editor, {
+		if (!isKeyDown[key]) return;
+		if (moveSelectionFromCell(editor, {
 			edge: KEY_SHIFT_EDGES[key],
 			reverse: key === "shift+up"
+		}) || shouldMoveSingleCellSelection(editor, key) && moveSelectionFromCell(editor, {
+			at: editor.selection,
+			edge: KEY_SHIFT_EDGES[key],
+			fromOneCell: true,
+			reverse: key === "shift+up"
 		})) {
 			event.preventDefault();
 			event.stopPropagation();
@@ -52,8 +75,7 @@ const TablePlugin = toPlatePlugin(BaseTablePlugin, {
 //#endregion
 //#region src/react/components/TableCellElement/getOnSelectTableBorderFactory.ts
 /** Helper: sets one cell's specific border(s) to `size`. */
-function setCellBorderSize(editor, cell, directions, size) {
-	const at = editor.api.findPath(cell);
+function setCellBorderSize(editor, at, directions, size) {
 	if (!at) return;
 	if (directions === "all") setBorderSize(editor, size, {
 		at,
@@ -64,6 +86,19 @@ function setCellBorderSize(editor, cell, directions, size) {
 		border: dir
 	});
 }
+const getSelectedCellBorderTargets = (editor, cells) => cells.map((cell) => {
+	const path = editor.api.findPath(cell) ?? null;
+	const { col, row } = getCellIndices(editor, cell);
+	return {
+		cSpan: getColSpan(cell),
+		col,
+		leftCellPath: path ? getLeftTableCell(editor, { at: path })?.[1] ?? null : null,
+		path,
+		rSpan: getRowSpan(cell),
+		row,
+		topCellPath: path ? getTopTableCell(editor, { at: path })?.[1] ?? null : null
+	};
+});
 /**
 * Toggle logic for `'none'`, `'outer'`, `'top'|'bottom'|'left'|'right'`.
 * `'none'` toggles no borders ↔ all borders, `'outer'` toggles the bounding
@@ -72,32 +107,19 @@ function setCellBorderSize(editor, cell, directions, size) {
 */
 function setSelectedCellsBorder(editor, { border, cells }) {
 	if (cells.length === 0) return;
+	const targets = getSelectedCellBorderTargets(editor, cells);
 	if (border === "none") {
 		const { none: allNone } = getSelectedCellsBorders(editor, cells);
 		const newSize$1 = allNone ? 1 : 0;
-		for (const cell of cells) {
-			const cellPath = editor.api.findPath(cell);
-			if (!cellPath) continue;
-			const { col, row } = getCellIndices(editor, cell);
+		for (const target of targets) {
+			if (!target.path) continue;
 			const edges = [];
-			if (row === 0) edges.push("top");
-			if (col === 0) edges.push("left");
+			if (target.row === 0) edges.push("top");
+			if (target.col === 0) edges.push("left");
 			edges.push("bottom", "right");
-			if (row > 0) {
-				const cellAboveEntry = getTopTableCell(editor, { at: cellPath });
-				if (cellAboveEntry) {
-					const [cellAbove] = cellAboveEntry;
-					setCellBorderSize(editor, cellAbove, ["bottom"], newSize$1);
-				}
-			}
-			if (col > 0) {
-				const prevCellEntry = getLeftTableCell(editor, { at: cellPath });
-				if (prevCellEntry) {
-					const [prevCell] = prevCellEntry;
-					setCellBorderSize(editor, prevCell, ["right"], newSize$1);
-				}
-			}
-			if (edges.length > 0) setCellBorderSize(editor, cell, edges, newSize$1);
+			if (target.row > 0) setCellBorderSize(editor, target.topCellPath, ["bottom"], newSize$1);
+			if (target.col > 0) setCellBorderSize(editor, target.leftCellPath, ["right"], newSize$1);
+			if (edges.length > 0) setCellBorderSize(editor, target.path, edges, newSize$1);
 		}
 		return;
 	}
@@ -105,49 +127,31 @@ function setSelectedCellsBorder(editor, { border, cells }) {
 		const { outer: allOut } = getSelectedCellsBorders(editor, cells);
 		const newSize$1 = allOut ? 0 : 1;
 		const { maxCol: maxCol$1, maxRow: maxRow$1, minCol: minCol$1, minRow: minRow$1 } = getSelectedCellsBoundingBox(editor, cells);
-		for (const cell of cells) {
-			const { col, row } = getCellIndices(editor, cell);
-			const cSpan = getColSpan(cell);
-			const rSpan = getRowSpan(cell);
-			for (let rr = row; rr < row + rSpan; rr++) for (let cc = col; cc < col + cSpan; cc++) {
+		for (const target of targets) {
+			if (!target.path) continue;
+			for (let rr = target.row; rr < target.row + target.rSpan; rr++) for (let cc = target.col; cc < target.col + target.cSpan; cc++) {
 				const edges = [];
 				if (rr === minRow$1) edges.push("top");
 				if (rr === maxRow$1) edges.push("bottom");
 				if (cc === minCol$1) edges.push("left");
 				if (cc === maxCol$1) edges.push("right");
-				if (edges.length > 0) setCellBorderSize(editor, cell, edges, newSize$1);
+				if (edges.length > 0) setCellBorderSize(editor, target.path, edges, newSize$1);
 			}
 		}
 		return;
 	}
 	const newSize = isSelectedCellBorder(editor, cells, border) ? 0 : 1;
 	const { maxCol, maxRow, minCol, minRow } = getSelectedCellsBoundingBox(editor, cells);
-	for (const cell of cells) {
-		const { col, row } = getCellIndices(editor, cell);
-		const cSpan = getColSpan(cell);
-		const rSpan = getRowSpan(cell);
-		const cellPath = editor.api.findPath(cell);
-		if (!cellPath) continue;
+	for (const target of targets) {
+		if (!target.path) continue;
 		const edges = [];
-		if (border === "top" && row === minRow) if (row === 0) edges.push("top");
-		else {
-			const cellAboveEntry = getTopTableCell(editor, { at: cellPath });
-			if (cellAboveEntry) {
-				const [cellAbove] = cellAboveEntry;
-				setCellBorderSize(editor, cellAbove, ["bottom"], newSize);
-			}
-		}
-		if (border === "bottom" && row + rSpan - 1 === maxRow) edges.push("bottom");
-		if (border === "left" && col === minCol) if (col === 0) edges.push("left");
-		else {
-			const prevCellEntry = getLeftTableCell(editor, { at: cellPath });
-			if (prevCellEntry) {
-				const [prevCell] = prevCellEntry;
-				setCellBorderSize(editor, prevCell, ["right"], newSize);
-			}
-		}
-		if (border === "right" && col + cSpan - 1 === maxCol) edges.push("right");
-		if (edges.length > 0) setCellBorderSize(editor, cell, edges, newSize);
+		if (border === "top" && target.row === minRow) if (target.row === 0) edges.push("top");
+		else setCellBorderSize(editor, target.topCellPath, ["bottom"], newSize);
+		if (border === "bottom" && target.row + target.rSpan - 1 === maxRow) edges.push("bottom");
+		if (border === "left" && target.col === minCol) if (target.col === 0) edges.push("left");
+		else setCellBorderSize(editor, target.leftCellPath, ["right"], newSize);
+		if (border === "right" && target.col + target.cSpan - 1 === maxCol) edges.push("right");
+		if (edges.length > 0) setCellBorderSize(editor, target.path, edges, newSize);
 	}
 }
 /**
@@ -155,8 +159,8 @@ function setSelectedCellsBorder(editor, { border, cells }) {
 * selection has one or many cells, it's the same approach: we read the bounding
 * rectangle, then decide which edges to flip on/off.
 */
-const getOnSelectTableBorderFactory = (editor, selectedCells) => (border) => () => {
-	let cells = selectedCells;
+const getOnSelectTableBorderFactory = (editor) => (border) => () => {
+	let cells = editor.getApi(TablePlugin).table.getSelectedCells();
 	if (!cells || cells.length === 0) {
 		const cell = editor.api.block({ match: { type: getCellTypes(editor) } });
 		if (cell) cells = [cell[0]];
@@ -180,21 +184,25 @@ const roundCellSizeToStep = (size, step) => step ? Math.round(size / step) * ste
 //#region src/react/components/TableCellElement/useIsCellSelected.ts
 const useIsCellSelected = (element) => {
 	const $ = c(3);
-	const selectedCells = usePluginOption(TablePlugin, "selectedCells");
 	let t0;
-	if ($[0] !== element || $[1] !== selectedCells) {
-		t0 = selectedCells?.includes(element);
-		$[0] = element;
-		$[1] = selectedCells;
-		$[2] = t0;
-	} else t0 = $[2];
-	return !!t0;
+	let t1;
+	if ($[0] !== element.id) {
+		t0 = (editor) => editor.getApi(TablePlugin).table.isCellSelected(element.id);
+		t1 = [element.id];
+		$[0] = element.id;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	return useEditorSelector(t0, t1);
 };
 
 //#endregion
 //#region src/react/components/TableCellElement/useTableBordersDropdownMenuContentState.ts
 const useTableBordersDropdownMenuContentState = (t0) => {
-	const $ = c(18);
+	const $ = c(14);
 	let t1;
 	if ($[0] !== t0) {
 		t1 = t0 === void 0 ? {} : t0;
@@ -204,32 +212,23 @@ const useTableBordersDropdownMenuContentState = (t0) => {
 	const { element: el } = t1;
 	const { editor } = useEditorPlugin(TablePlugin);
 	const element = useElement() ?? el;
-	const selectedCells = usePluginOption(TablePlugin, "selectedCells");
 	let t2;
-	if ($[2] !== selectedCells) {
-		t2 = (editor_0) => getSelectedCellsBorders(editor_0, selectedCells);
-		$[2] = selectedCells;
+	if ($[2] !== element) {
+		t2 = [element];
+		$[2] = element;
 		$[3] = t2;
 	} else t2 = $[3];
+	const borderStates = useEditorSelector(_temp$5, t2);
 	let t3;
-	if ($[4] !== element || $[5] !== selectedCells) {
-		t3 = [selectedCells, element];
-		$[4] = element;
-		$[5] = selectedCells;
-		$[6] = t3;
-	} else t3 = $[6];
-	const borderStates = useEditorSelector(t2, t3);
+	if ($[4] !== editor) {
+		t3 = getOnSelectTableBorderFactory(editor);
+		$[4] = editor;
+		$[5] = t3;
+	} else t3 = $[5];
 	let t4;
-	if ($[7] !== editor || $[8] !== selectedCells) {
-		t4 = getOnSelectTableBorderFactory(editor, selectedCells);
-		$[7] = editor;
-		$[8] = selectedCells;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== borderStates.bottom || $[11] !== borderStates.left || $[12] !== borderStates.none || $[13] !== borderStates.outer || $[14] !== borderStates.right || $[15] !== borderStates.top || $[16] !== t4) {
-		t5 = {
-			getOnSelectTableBorder: t4,
+	if ($[6] !== borderStates.bottom || $[7] !== borderStates.left || $[8] !== borderStates.none || $[9] !== borderStates.outer || $[10] !== borderStates.right || $[11] !== borderStates.top || $[12] !== t3) {
+		t4 = {
+			getOnSelectTableBorder: t3,
 			hasBottomBorder: borderStates.bottom,
 			hasLeftBorder: borderStates.left,
 			hasNoBorders: borderStates.none,
@@ -237,17 +236,20 @@ const useTableBordersDropdownMenuContentState = (t0) => {
 			hasRightBorder: borderStates.right,
 			hasTopBorder: borderStates.top
 		};
-		$[10] = borderStates.bottom;
-		$[11] = borderStates.left;
-		$[12] = borderStates.none;
-		$[13] = borderStates.outer;
-		$[14] = borderStates.right;
-		$[15] = borderStates.top;
-		$[16] = t4;
-		$[17] = t5;
-	} else t5 = $[17];
-	return t5;
+		$[6] = borderStates.bottom;
+		$[7] = borderStates.left;
+		$[8] = borderStates.none;
+		$[9] = borderStates.outer;
+		$[10] = borderStates.right;
+		$[11] = borderStates.top;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 };
+function _temp$5(editor_0) {
+	return getSelectedCellsBorders(editor_0);
+}
 
 //#endregion
 //#region src/react/hooks/useCellIndices.ts
@@ -350,94 +352,68 @@ const useOverrideMarginLeft = () => {
 
 //#endregion
 //#region src/react/components/TableElement/useSelectedCells.ts
-/**
-* Many grid cells above and diff -> set No many grid cells above and diff ->
-* unset No selection -> unset
-*/
+const hasSameIds$1 = (nextValue, prevValue) => {
+	if (nextValue === prevValue) return true;
+	if (!nextValue || !prevValue) return !nextValue && !prevValue;
+	if (nextValue.length !== prevValue.length) return false;
+	for (const [index, nextId] of nextValue.entries()) if (nextId !== prevValue[index]) return false;
+	return true;
+};
+const hasSameSelectionState = (nextValue, prevValue) => nextValue.selectedContent === prevValue.selectedContent && hasSameIds$1(nextValue.selectedCellIds, prevValue.selectedCellIds);
 const useSelectedCells = () => {
-	const $ = c(20);
+	const $ = c(8);
 	const readOnly = useReadOnly();
-	const selected = useSelected();
-	const editor = useEditorRef();
-	const selection = useEditorSelection();
-	const { setOption } = useEditorPlugin(TablePlugin);
-	const selectedCells = usePluginOption(TablePlugin, "selectedCells");
+	const { setOptions } = useEditorPlugin(BaseTablePlugin);
 	let t0;
-	if ($[0] !== readOnly || $[1] !== selected || $[2] !== setOption) {
-		t0 = () => {
-			if (!selected || readOnly) {
-				setOption("selectedCells", null);
-				setOption("selectedTables", null);
-			}
+	let t1;
+	if ($[0] !== readOnly) {
+		t0 = (editor) => {
+			if (readOnly) return {
+				selectedCellIds: null,
+				selectedContent: null
+			};
+			const selectedCellIds = getSelectedCellIds(editor);
+			return {
+				selectedCellIds,
+				selectedContent: selectedCellIds ? editor.children : null
+			};
 		};
+		t1 = [readOnly];
 		$[0] = readOnly;
-		$[1] = selected;
-		$[2] = setOption;
-		$[3] = t0;
-	} else t0 = $[3];
-	let t1;
-	if ($[4] !== editor || $[5] !== readOnly || $[6] !== selected || $[7] !== setOption) {
-		t1 = [
-			selected,
-			editor,
-			readOnly,
-			setOption
-		];
-		$[4] = editor;
-		$[5] = readOnly;
-		$[6] = selected;
-		$[7] = setOption;
-		$[8] = t1;
-	} else t1 = $[8];
-	React.useEffect(t0, t1);
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
 	let t2;
-	if ($[9] !== editor || $[10] !== readOnly || $[11] !== selectedCells || $[12] !== setOption) {
-		t2 = () => {
-			if (readOnly) return;
-			const tableEntries = getTableGridAbove(editor, { format: "table" });
-			const cellEntries = getTableGridAbove(editor, { format: "cell" });
-			if (cellEntries?.length > 1) {
-				const cells = cellEntries.map(_temp$3);
-				const tables = tableEntries.map(_temp2);
-				if (JSON.stringify(cells) !== JSON.stringify(selectedCells)) {
-					setOption("selectedCells", cells);
-					setOption("selectedTables", tables);
-				}
-			} else if (selectedCells) {
-				setOption("selectedCells", null);
-				setOption("selectedTables", null);
-			}
-		};
-		$[9] = editor;
-		$[10] = readOnly;
-		$[11] = selectedCells;
-		$[12] = setOption;
-		$[13] = t2;
-	} else t2 = $[13];
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { equalityFn: hasSameSelectionState };
+		$[3] = t2;
+	} else t2 = $[3];
+	const selectionState = useEditorSelector(t0, t1, t2);
 	let t3;
-	if ($[14] !== editor || $[15] !== readOnly || $[16] !== selectedCells || $[17] !== selection || $[18] !== setOption) {
-		t3 = [
-			editor,
-			selection,
-			readOnly,
-			selectedCells,
-			setOption
-		];
-		$[14] = editor;
-		$[15] = readOnly;
-		$[16] = selectedCells;
-		$[17] = selection;
-		$[18] = setOption;
-		$[19] = t3;
-	} else t3 = $[19];
-	React.useEffect(t2, t3);
+	let t4;
+	if ($[4] !== selectionState || $[5] !== setOptions) {
+		t3 = () => {
+			const nextSelectedCellIds = selectionState.selectedCellIds;
+			setOptions((draft) => {
+				if (!hasSameIds$1(draft._selectedCellIds, nextSelectedCellIds)) draft._selectedCellIds = nextSelectedCellIds;
+				if (draft._selectedTableIds !== void 0) draft._selectedTableIds = void 0;
+				draft._selectionVersion = (draft._selectionVersion ?? 0) + 1;
+			});
+		};
+		t4 = [selectionState, setOptions];
+		$[4] = selectionState;
+		$[5] = setOptions;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	React.useLayoutEffect(t3, t4);
 };
-function _temp$3(entry) {
-	return entry[0];
-}
-function _temp2(entry_0) {
-	return entry_0[0];
-}
 
 //#endregion
 //#region src/react/components/TableElement/useTableColSizes.ts
@@ -483,52 +459,153 @@ const useTableColSizes = (t0) => {
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = {
 			key: KEYS.table,
-			equalityFn: _temp$2
+			equalityFn: _temp$4
 		};
 		$[7] = t5;
 	} else t5 = $[7];
 	return useElementSelector(t3, t4, t5);
 };
-function _temp$2(a, b) {
+function _temp$4(a, b) {
 	return !!a && !!b && PathApi.equals(a, b);
 }
 
 //#endregion
 //#region src/react/components/TableElement/useTableElement.ts
 const useTableElement = () => {
-	const $ = c(7);
+	const $ = c(5);
 	const { editor, getOptions } = useEditorPlugin(TablePlugin);
 	const { disableMarginLeft } = getOptions();
 	const element = useElement();
-	const selectedCells = usePluginOption(TablePlugin, "selectedCells");
 	const marginLeftOverride = useTableValue("marginLeftOverride");
 	const marginLeft = disableMarginLeft ? 0 : marginLeftOverride ?? element.marginLeft ?? 0;
-	useSelectedCells();
-	const t0 = !!selectedCells;
-	let t1;
-	if ($[0] !== editor || $[1] !== selectedCells) {
-		t1 = { onMouseDown: () => {
-			if (selectedCells) editor.tf.collapse();
+	let t0;
+	if ($[0] !== editor) {
+		t0 = { onMouseDown: () => {
+			if (editor.getOption(TablePlugin, "isSelectingCell")) editor.tf.collapse();
 		} };
 		$[0] = editor;
-		$[1] = selectedCells;
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== marginLeft || $[4] !== t0 || $[5] !== t1) {
-		t2 = {
-			isSelectingCell: t0,
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== marginLeft || $[3] !== t0) {
+		t1 = {
 			marginLeft,
-			props: t1
+			props: t0
 		};
-		$[3] = marginLeft;
-		$[4] = t0;
-		$[5] = t1;
-		$[6] = t2;
-	} else t2 = $[6];
-	return t2;
+		$[2] = marginLeft;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 };
 
+//#endregion
+//#region src/react/components/TableElement/useTableSelectionDom.ts
+const hasSameIds = (nextValue, prevValue) => {
+	if (nextValue === prevValue) return true;
+	if (!nextValue || !prevValue) return !nextValue && !prevValue;
+	if (nextValue.length !== prevValue.length) return false;
+	for (const [index, nextId] of nextValue.entries()) if (nextId !== prevValue[index]) return false;
+	return true;
+};
+const TABLE_CELL_SELECTED_ATTRIBUTE = "data-table-cell-selected";
+const TABLE_SELECTING_ATTRIBUTE = "data-table-selecting";
+const TABLE_CELL_SELECTOR = "[data-table-cell-id]";
+const setTableSelectingAttribute = (table, isSelecting) => {
+	if (isSelecting) {
+		table.setAttribute(TABLE_SELECTING_ATTRIBUTE, "true");
+		return;
+	}
+	table.removeAttribute(TABLE_SELECTING_ATTRIBUTE);
+};
+const escapeForAttributeSelector = (value) => globalThis.CSS?.escape ? globalThis.CSS.escape(value) : value.replaceAll("\"", "\\\"");
+const createTableCellElementsById = (table) => {
+	const tableCellElementsById = /* @__PURE__ */ new Map();
+	table.querySelectorAll(TABLE_CELL_SELECTOR).forEach((element) => {
+		const cellId = element.getAttribute("data-table-cell-id");
+		if (cellId) tableCellElementsById.set(cellId, element);
+	});
+	return tableCellElementsById;
+};
+const getSelectedCellElement = (table, cellId, tableCellElementsById) => {
+	const cachedElement = tableCellElementsById.get(cellId);
+	if (cachedElement?.isConnected && table.contains(cachedElement)) return cachedElement;
+	const element = table.querySelector(`[data-table-cell-id="${escapeForAttributeSelector(cellId)}"]`);
+	if (element) tableCellElementsById.set(cellId, element);
+	else tableCellElementsById.delete(cellId);
+	return element;
+};
+const useTableSelectionDom = (tableRef) => {
+	const $ = c(5);
+	const previousTableRef = React.useRef(null);
+	const previousSelectedCellIdsRef = React.useRef(null);
+	const tableCellElementsByIdRef = React.useRef(null);
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		t1 = { equalityFn: hasSameIds };
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	const selectedCellIds = useEditorSelector(_temp$3, t0, t1);
+	let t2;
+	if ($[2] !== selectedCellIds || $[3] !== tableRef) {
+		t2 = () => {
+			const table = tableRef.current;
+			if (!table) return;
+			const tableChanged = previousTableRef.current !== table;
+			const previousSelectedCellIdsRefValue = previousSelectedCellIdsRef.current;
+			if (!tableChanged && hasSameIds(selectedCellIds, previousSelectedCellIdsRefValue)) return;
+			const previousSelectedCellIds = tableChanged ? [] : previousSelectedCellIdsRefValue ?? [];
+			const nextSelectedCellIds = selectedCellIds ?? [];
+			const tableCellElementsById = tableChanged || !tableCellElementsByIdRef.current ? createTableCellElementsById(table) : tableCellElementsByIdRef.current;
+			tableCellElementsByIdRef.current = tableCellElementsById;
+			if (previousSelectedCellIds.length === 0) {
+				setTableSelectingAttribute(table, nextSelectedCellIds.length > 0);
+				nextSelectedCellIds.forEach((cellId) => {
+					getSelectedCellElement(table, cellId, tableCellElementsById)?.setAttribute(TABLE_CELL_SELECTED_ATTRIBUTE, "true");
+				});
+				previousTableRef.current = table;
+				previousSelectedCellIdsRef.current = nextSelectedCellIds;
+				return;
+			}
+			if (nextSelectedCellIds.length === 0) {
+				setTableSelectingAttribute(table, false);
+				previousSelectedCellIds.forEach((cellId_0) => {
+					getSelectedCellElement(table, cellId_0, tableCellElementsById)?.removeAttribute(TABLE_CELL_SELECTED_ATTRIBUTE);
+				});
+				previousTableRef.current = table;
+				previousSelectedCellIdsRef.current = nextSelectedCellIds;
+				return;
+			}
+			const nextSelectedCellIdsSet = new Set(nextSelectedCellIds);
+			const previousSelectedCellIdsSet = new Set(previousSelectedCellIds);
+			setTableSelectingAttribute(table, true);
+			previousSelectedCellIds.forEach((cellId_1) => {
+				if (nextSelectedCellIdsSet.has(cellId_1)) return;
+				getSelectedCellElement(table, cellId_1, tableCellElementsById)?.removeAttribute(TABLE_CELL_SELECTED_ATTRIBUTE);
+			});
+			nextSelectedCellIds.forEach((cellId_2) => {
+				if (previousSelectedCellIdsSet.has(cellId_2)) return;
+				getSelectedCellElement(table, cellId_2, tableCellElementsById)?.setAttribute(TABLE_CELL_SELECTED_ATTRIBUTE, "true");
+			});
+			previousTableRef.current = table;
+			previousSelectedCellIdsRef.current = nextSelectedCellIds;
+		};
+		$[2] = selectedCellIds;
+		$[3] = tableRef;
+		$[4] = t2;
+	} else t2 = $[4];
+	React.useLayoutEffect(t2);
+};
+function _temp$3(editor) {
+	return getSelectedCellIds(editor);
+}
+
 //#endregion
 //#region src/react/components/TableCellElement/useTableCellSize.ts
 function useTableCellSize(t0) {
@@ -555,7 +632,7 @@ function useTableCellSize(t0) {
 		t2 = $[2];
 		t3 = $[3];
 	}
-	const rowSize = useElementSelector(_temp$1, t2, t3);
+	const rowSize = useElementSelector(_temp$2, t2, t3);
 	let t4;
 	if ($[4] !== api.table || $[5] !== cellIndices || $[6] !== colSizes || $[7] !== element || $[8] !== rowSize) {
 		t4 = api.table.getCellSize({
@@ -573,7 +650,7 @@ function useTableCellSize(t0) {
 	} else t4 = $[9];
 	return t4;
 }
-function _temp$1(t0) {
+function _temp$2(t0) {
 	const [node] = t0;
 	return node.size;
 }
@@ -581,34 +658,70 @@ function _temp$1(t0) {
 //#endregion
 //#region src/react/components/TableCellElement/useTableCellElement.ts
 const useTableCellElement = () => {
-	const { api, setOption } = useEditorPlugin(TablePlugin);
+	const $ = c(18);
+	const { api } = useEditorPlugin(TablePlugin);
 	const element = useElement();
 	const isCellSelected = useIsCellSelected(element);
-	const selectedCells = usePluginOption(TablePlugin, "selectedCells");
-	React.useEffect(() => {
-		if (selectedCells?.some((v) => v.id === element.id && element !== v)) setOption("selectedCells", selectedCells.map((v) => v.id === element.id ? element : v));
-	}, [element]);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const isSelectingCell = useEditorSelector(_temp$1, t0);
 	const rowSizeOverrides = useTableValue("rowSizeOverrides");
-	const { minHeight, width } = useTableCellSize({ element });
-	const borders = useTableCellBorders({ element });
-	/**
-	* Row size: if rowSpan > 1, we might look up the rowSize for the bottom row
-	* or you can do something simpler if row-spanning is unusual in your app.
-	*/
+	let t1;
+	if ($[1] !== element) {
+		t1 = { element };
+		$[1] = element;
+		$[2] = t1;
+	} else t1 = $[2];
+	const { minHeight, width } = useTableCellSize(t1);
+	let t2;
+	if ($[3] !== element) {
+		t2 = { element };
+		$[3] = element;
+		$[4] = t2;
+	} else t2 = $[4];
+	const borders = useTableCellBorders(t2);
 	const { col, row } = useCellIndices();
 	const colSpan = api.table.getColSpan(element);
 	const endingRowIndex = row + api.table.getRowSpan(element) - 1;
-	return {
-		borders,
-		colIndex: col + colSpan - 1,
-		colSpan,
-		isSelectingCell: !!selectedCells,
-		minHeight: rowSizeOverrides.get?.(endingRowIndex) ?? minHeight,
-		rowIndex: endingRowIndex,
-		selected: isCellSelected,
-		width
-	};
+	const endingColIndex = col + colSpan - 1;
+	let t3;
+	if ($[5] !== endingRowIndex || $[6] !== minHeight || $[7] !== rowSizeOverrides) {
+		t3 = rowSizeOverrides.get?.(endingRowIndex) ?? minHeight;
+		$[5] = endingRowIndex;
+		$[6] = minHeight;
+		$[7] = rowSizeOverrides;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== borders || $[10] !== colSpan || $[11] !== endingColIndex || $[12] !== endingRowIndex || $[13] !== isCellSelected || $[14] !== isSelectingCell || $[15] !== t3 || $[16] !== width) {
+		t4 = {
+			borders,
+			colIndex: endingColIndex,
+			colSpan,
+			isSelectingCell,
+			minHeight: t3,
+			rowIndex: endingRowIndex,
+			selected: isCellSelected,
+			width
+		};
+		$[9] = borders;
+		$[10] = colSpan;
+		$[11] = endingColIndex;
+		$[12] = endingRowIndex;
+		$[13] = isCellSelected;
+		$[14] = isSelectingCell;
+		$[15] = t3;
+		$[16] = width;
+		$[17] = t4;
+	} else t4 = $[17];
+	return t4;
 };
+function _temp$1(editor) {
+	return editor.getApi(TablePlugin).table.isSelectingCell();
+}
 
 //#endregion
 //#region src/react/components/TableCellElement/useTableCellElementResizable.ts
@@ -852,28 +965,36 @@ function _temp(t0) {
 //#endregion
 //#region src/react/hooks/useTableMergeState.ts
 const useTableMergeState = () => {
-	const { api, getOptions } = useEditorPlugin(TablePlugin);
+	const { api, editor, getOptions } = useEditorPlugin(TablePlugin);
 	const { disableMerge } = getOptions();
 	if (disableMerge) return {
 		canMerge: false,
 		canSplit: false
 	};
 	const readOnly = useReadOnly();
-	const someTable = useEditorSelector((editor) => editor.api.some({ match: { type: KEYS.table } }), []);
-	const selectionExpanded = useEditorSelector((editor) => editor.api.isExpanded(), []);
+	const someTable = useEditorSelector((editor$1) => editor$1.api.some({ match: { type: KEYS.table } }), []);
+	const selectionExpanded = useEditorSelector((editor$1) => editor$1.api.isExpanded(), []);
 	const collapsed = !readOnly && someTable && !selectionExpanded;
-	const selectedTable = usePluginOption(TablePlugin, "selectedTables")?.[0];
-	const selectedCellEntries = useEditorSelector((editor) => getTableGridAbove(editor, { format: "cell" }), []);
+	const selectedCellEntries = useEditorSelector((editor$1) => getSelectedCellEntries(editor$1), []);
+	const isRectangularSelection = React.useMemo(() => {
+		if (selectedCellEntries.length <= 1) return false;
+		const selectedCells = selectedCellEntries.map(([cell]) => cell);
+		const { maxCol, maxRow, minCol, minRow } = getSelectedCellsBoundingBox(editor, selectedCells);
+		return selectedCells.reduce((total, cell) => total + api.table.getColSpan(cell) * api.table.getRowSpan(cell), 0) === (maxCol - minCol + 1) * (maxRow - minRow + 1);
+	}, [
+		api.table,
+		editor,
+		selectedCellEntries
+	]);
 	if (!selectedCellEntries) return {
 		canMerge: false,
 		canSplit: false
 	};
 	return {
-		canMerge: !readOnly && someTable && selectionExpanded && selectedCellEntries.length > 1 && isTableRectangular(selectedTable),
+		canMerge: !readOnly && someTable && selectionExpanded && selectedCellEntries.length > 1 && isRectangularSelection,
 		canSplit: collapsed && selectedCellEntries.length === 1 && (api.table.getColSpan(selectedCellEntries[0][0]) > 1 || api.table.getRowSpan(selectedCellEntries[0][0]) > 1)
 	};
 };
 
 //#endregion
-export { TableCellHeaderPlugin, TableCellPlugin, TablePlugin, TableProvider, TableRowPlugin, getOnSelectTableBorderFactory, onKeyDownTable, roundCellSizeToStep, setSelectedCellsBorder, tableStore, useCellIndices, useIsCellSelected, useOverrideColSize, useOverrideMarginLeft, useOverrideRowSize, useSelectedCells, useTableBordersDropdownMenuContentState, useTableCellBorders, useTableCellElement, useTableCellElementResizable, useTableCellSize, useTableColSizes, useTableElement, useTableMergeState, useTableSet, useTableState, useTableStore, useTableValue };
-//# sourceMappingURL=index.js.map
+export { TableCellHeaderPlugin, TableCellPlugin, TablePlugin, TableProvider, TableRowPlugin, getOnSelectTableBorderFactory, onKeyDownTable, roundCellSizeToStep, setSelectedCellsBorder, tableStore, useCellIndices, useIsCellSelected, useOverrideColSize, useOverrideMarginLeft, useOverrideRowSize, useSelectedCells, useTableBordersDropdownMenuContentState, useTableCellBorders, useTableCellElement, useTableCellElementResizable, useTableCellSize, useTableColSizes, useTableElement, useTableMergeState, useTableSelectionDom, useTableSet, useTableState, useTableStore, useTableValue };