@jvs-milkdown/components 1.0.0 → 1.1.0

package/lib/table-block/index.js

@@ -1,51 +1,51 @@
 import { $ctx, $view } from '@jvs-milkdown/utils';
-import { selectColCommand, moveColCommand, selectRowCommand, moveRowCommand, setAlignCommand, deleteSelectedCellsCommand, addColAfterCommand, addColBeforeCommand, addRowAfterCommand, addRowBeforeCommand, tableSchema } from '@jvs-milkdown/preset-gfm';
-import { findParent } from '@jvs-milkdown/prose';
-import { h, onMounted, onUnmounted, defineComponent, ref, shallowRef, createApp } from 'vue';
+import { selectColCommand, moveColCommand, selectRowCommand, moveRowCommand, mergeCellsCommand, setAlignCommand, deleteSelectedCellsCommand, addColAfterCommand, addColBeforeCommand, addRowAfterCommand, addRowBeforeCommand, tableSchema } from '@jvs-milkdown/preset-gfm';
+import { h, onMounted, onUnmounted, defineComponent, ref, onBeforeUnmount, shallowRef, createApp, triggerRef } from 'vue';
+import { computePosition, offset } from '@floating-ui/dom';
 import clsx from 'clsx';
 import DOMPurify from 'dompurify';
 import { editorViewCtx, commandsCtx } from '@jvs-milkdown/core';
-import { computePosition, offset } from '@floating-ui/dom';
 import { throttle } from 'lodash-es';
+import { findParent } from '@jvs-milkdown/prose';
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
 function withMeta(plugin, meta) {
   Object.assign(plugin, {
-    meta: __spreadValues$1({
+    meta: __spreadValues$2({
       package: "@jvs-milkdown/components"
     }, meta)
   });
   return plugin;
 }
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
@@ -70,11 +70,15 @@ const defaultTableBlockConfig = {
         return "=";
       case "row_drag_handle":
         return "=";
+      case "merge_cells":
+        return "\u229E";
+      case "split_cell":
+        return "\u229F";
     }
   }
 };
 const tableBlockConfig = $ctx(
-  __spreadValues({}, defaultTableBlockConfig),
+  __spreadValues$1({}, defaultTableBlockConfig),
   "tableBlockConfigCtx"
 );
 withMeta(tableBlockConfig, {
@@ -2430,6 +2434,13 @@ function cellAround($pos) {
 	for (let d = $pos.depth - 1; d > 0; d--) if ($pos.node(d).type.spec.tableRole == "row") return $pos.node(0).resolve($pos.before(d + 1));
 	return null;
 }
+function cellWrapping($pos) {
+	for (let d = $pos.depth; d > 0; d--) {
+		const role = $pos.node(d).type.spec.tableRole;
+		if (role === "cell" || role === "header_cell") return $pos.node(d);
+	}
+	return null;
+}
 /**
 * @public
 */
@@ -2747,6 +2758,70 @@ function selectedRect(state) {
 		table
 	};
 }
+/**
+* Split a selected cell, whose rowpan or colspan is greater than one,
+* into smaller cells with the cell type (th, td) returned by getType function.
+*
+* @public
+*/
+function splitCellWithType(getCellType) {
+	return (state, dispatch) => {
+		const sel = state.selection;
+		let cellNode;
+		let cellPos;
+		if (!(sel instanceof CellSelection)) {
+			var _cellAround;
+			cellNode = cellWrapping(sel.$from);
+			if (!cellNode) return false;
+			cellPos = (_cellAround = cellAround(sel.$from)) === null || _cellAround === void 0 ? void 0 : _cellAround.pos;
+		} else {
+			if (sel.$anchorCell.pos != sel.$headCell.pos) return false;
+			cellNode = sel.$anchorCell.nodeAfter;
+			cellPos = sel.$anchorCell.pos;
+		}
+		if (cellNode == null || cellPos == null) return false;
+		if (cellNode.attrs.colspan == 1 && cellNode.attrs.rowspan == 1) return false;
+		if (dispatch) {
+			let baseAttrs = cellNode.attrs;
+			const attrs = [];
+			const colwidth = baseAttrs.colwidth;
+			if (baseAttrs.rowspan > 1) baseAttrs = {
+				...baseAttrs,
+				rowspan: 1
+			};
+			if (baseAttrs.colspan > 1) baseAttrs = {
+				...baseAttrs,
+				colspan: 1
+			};
+			const rect = selectedRect(state), tr = state.tr;
+			for (let i = 0; i < rect.right - rect.left; i++) attrs.push(colwidth ? {
+				...baseAttrs,
+				colwidth: colwidth && colwidth[i] ? [colwidth[i]] : null
+			} : baseAttrs);
+			let lastCell;
+			for (let row = rect.top; row < rect.bottom; row++) {
+				let pos = rect.map.positionAt(row, rect.left, rect.table);
+				if (row == rect.top) pos += cellNode.nodeSize;
+				for (let col = rect.left, i = 0; col < rect.right; col++, i++) {
+					if (col == rect.left && row == rect.top) continue;
+					tr.insert(lastCell = tr.mapping.map(pos + rect.tableStart, 1), getCellType({
+						node: cellNode,
+						row,
+						col
+					}).createAndFill(attrs[i]));
+				}
+			}
+			tr.setNodeMarkup(cellPos, getCellType({
+				node: cellNode,
+				row: rect.top,
+				col: rect.left
+			}), attrs[0]);
+			if (sel instanceof CellSelection) tr.setSelection(new CellSelection(tr.doc.resolve(sel.$anchorCell.pos), lastCell ? tr.doc.resolve(lastCell) : void 0));
+			dispatch(tr);
+		}
+		return true;
+	};
+}
 function deprecated_toggleHeader(type) {
 	return function(state, dispatch) {
 		if (!isInTable(state)) return false;
@@ -2978,9 +3053,7 @@ function prepareDndContext(refs) {
     tableWrapperRef,
     contentWrapperRef,
     yLineHandleRef,
-    xLineHandleRef,
-    colHandleRef,
-    rowHandleRef
+    xLineHandleRef
   } = refs;
   const preview = dragPreviewRef.value;
   if (!preview) return;
@@ -2996,10 +3069,6 @@ function prepareDndContext(refs) {
   if (!yHandle) return;
   const xHandle = xLineHandleRef.value;
   if (!xHandle) return;
-  const colHandle = colHandleRef.value;
-  if (!colHandle) return;
-  const rowHandle = rowHandleRef.value;
-  if (!rowHandle) return;
   const context = {
     preview,
     wrapper,
@@ -3007,9 +3076,7 @@ function prepareDndContext(refs) {
     contentRoot,
     previewRoot,
     yHandle,
-    xHandle,
-    colHandle,
-    rowHandle
+    xHandle
   };
   return context;
 }
@@ -3078,16 +3145,9 @@ function createDragColHandler(refs, ctx) {
   };
 }
 function updateDragInfo(axis, event, context, refs) {
-  const { xHandle, yHandle, colHandle, rowHandle, preview } = context;
+  const { xHandle, yHandle, preview } = context;
   xHandle.dataset.displayType = axis === "y" ? "indicator" : "none";
   yHandle.dataset.displayType = axis === "x" ? "indicator" : "none";
-  if (axis === "y") {
-    colHandle.dataset.show = "false";
-    hideButtonGroup(rowHandle);
-  } else {
-    rowHandle.dataset.show = "false";
-    hideButtonGroup(colHandle);
-  }
   const { hoverIndex, dragInfo } = refs;
   const [rowIndex, colIndex] = hoverIndex.value;
   dragInfo.value = {
@@ -3109,10 +3169,6 @@ function handleDrag(refs, event, ctx, fn) {
     fn(context);
   });
 }
-function hideButtonGroup(handle) {
-  var _a;
-  (_a = handle.querySelector(".button-group")) == null ? void 0 : _a.setAttribute("data-show", "false");
-}
 
 function findNodeIndex(parent, child) {
   for (let i = 0; i < parent.childCount; i++) {
@@ -3120,35 +3176,6 @@ function findNodeIndex(parent, child) {
   }
   return -1;
 }
-function findPointerIndex(event, view) {
-  var _a, _b, _c;
-  if (!view) return;
-  try {
-    const posAtCoords = view.posAtCoords({
-      left: event.clientX,
-      top: event.clientY
-    });
-    if (!posAtCoords) return;
-    const pos = posAtCoords == null ? void 0 : posAtCoords.inside;
-    if (pos == null || pos < 0) return;
-    const $pos = view.state.doc.resolve(pos);
-    const node = view.state.doc.nodeAt(pos);
-    if (!node) return;
-    const cellType = ["table_cell", "table_header"];
-    const rowType = ["table_row", "table_header_row"];
-    const cell = cellType.includes(node.type.name) ? node : (_a = findParent((node2) => cellType.includes(node2.type.name))($pos)) == null ? void 0 : _a.node;
-    const row = (_b = findParent((node2) => rowType.includes(node2.type.name))(
-      $pos
-    )) == null ? void 0 : _b.node;
-    const table = (_c = findParent((node2) => node2.type.name === "table")($pos)) == null ? void 0 : _c.node;
-    if (!cell || !row || !table) return;
-    const columnIndex = findNodeIndex(row, cell);
-    const rowIndex = findNodeIndex(table, row);
-    return [rowIndex, columnIndex];
-  } catch (e) {
-    return void 0;
-  }
-}
 function getRelatedDOM(contentWrapperRef, [rowIndex, columnIndex]) {
   const content = contentWrapperRef.value;
   if (!content) return;
@@ -3178,14 +3205,7 @@ function recoveryStateBetweenUpdate(refs, view, node) {
   if (selection.isColSelection()) {
     const { $head } = selection;
     const colIndex = $head.index($head.depth - 1);
-    computeColHandlePositionByIndex({
-      refs,
-      index: [0, colIndex],
-      before: (handleDOM) => {
-        var _a;
-        (_a = handleDOM.querySelector(".button-group")) == null ? void 0 : _a.setAttribute("data-show", "true");
-      }
-    });
+    refs.hoverIndex.value = [0, colIndex];
     return;
   }
   if (selection.isRowSelection()) {
@@ -3195,63 +3215,9 @@ function recoveryStateBetweenUpdate(refs, view, node) {
     )($head);
     if (!rowNode) return;
     const rowIndex = findNodeIndex(table.node, rowNode.node);
-    computeRowHandlePositionByIndex({
-      refs,
-      index: [rowIndex, 0],
-      before: (handleDOM) => {
-        var _a;
-        if (rowIndex > 0)
-          (_a = handleDOM.querySelector(".button-group")) == null ? void 0 : _a.setAttribute("data-show", "true");
-      }
-    });
+    refs.hoverIndex.value = [rowIndex, 0];
   }
 }
-function computeColHandlePositionByIndex({
-  refs,
-  index,
-  before,
-  after
-}) {
-  const { contentWrapperRef, colHandleRef, hoverIndex } = refs;
-  const colHandle = colHandleRef.value;
-  if (!colHandle) return;
-  hoverIndex.value = index;
-  const dom = getRelatedDOM(contentWrapperRef, index);
-  if (!dom) return;
-  const { headerCol: col } = dom;
-  colHandle.dataset.show = "true";
-  if (before) before(colHandle);
-  computePosition(col, colHandle, { placement: "top" }).then(({ x, y }) => {
-    Object.assign(colHandle.style, {
-      left: `${x}px`,
-      top: `${y}px`
-    });
-    if (after) after(colHandle);
-  }).catch(console.error);
-}
-function computeRowHandlePositionByIndex({
-  refs,
-  index,
-  before,
-  after
-}) {
-  const { contentWrapperRef, rowHandleRef, hoverIndex } = refs;
-  const rowHandle = rowHandleRef.value;
-  if (!rowHandle) return;
-  hoverIndex.value = index;
-  const dom = getRelatedDOM(contentWrapperRef, index);
-  if (!dom) return;
-  const { row } = dom;
-  rowHandle.dataset.show = "true";
-  if (before) before(rowHandle);
-  computePosition(row, rowHandle, { placement: "left" }).then(({ x, y }) => {
-    Object.assign(rowHandle.style, {
-      left: `${x}px`,
-      top: `${y}px`
-    });
-    if (after) after(rowHandle);
-  }).catch(console.error);
-}
 
 function findDragOverElement(elements, pointer, axis) {
   const startProp = axis === "x" ? "left" : "top";
@@ -3380,10 +3346,6 @@ function useDragHandlers(refs, ctx, getPos) {
     if (!info) return;
     if (!ctx) return;
     if (preview.dataset.show === "false") return;
-    const colHandle = refs.colHandleRef.value;
-    if (!colHandle) return;
-    const rowHandle = refs.rowHandleRef.value;
-    if (!rowHandle) return;
     yHandle.dataset.show = "false";
     xHandle.dataset.show = "false";
     if (info.startIndex === info.endIndex) return;
@@ -3400,10 +3362,7 @@ function useDragHandlers(refs, ctx, getPos) {
       });
       commands.call(moveColCommand.key, payload);
       const index = [0, info.endIndex];
-      computeColHandlePositionByIndex({
-        refs,
-        index
-      });
+      refs.hoverIndex.value = index;
     } else {
       commands.call(selectRowCommand.key, {
         pos: payload.pos,
@@ -3411,10 +3370,7 @@ function useDragHandlers(refs, ctx, getPos) {
       });
       commands.call(moveRowCommand.key, payload);
       const index = [info.endIndex, 0];
-      computeRowHandlePositionByIndex({
-        refs,
-        index
-      });
+      refs.hoverIndex.value = index;
     }
     requestAnimationFrame(() => {
       ctx.get(editorViewCtx).focus();
@@ -3438,80 +3394,56 @@ function useDragHandlers(refs, ctx, getPos) {
 }
 
 function useOperation(refs, ctx, getPos) {
-  const {
-    xLineHandleRef,
-    contentWrapperRef,
-    colHandleRef,
-    rowHandleRef,
-    hoverIndex,
-    lineHoverIndex
-  } = refs;
-  const onAddRow = () => {
+  const { contentWrapperRef, hoverIndex } = refs;
+  const addRowByIndex = (index) => {
     var _a, _b, _c;
-    if (!ctx) return;
-    const xHandle = xLineHandleRef.value;
-    if (!xHandle) return;
-    const [rowIndex] = lineHoverIndex.value;
-    if (rowIndex < 0) return;
-    if (!ctx.get(editorViewCtx).editable) return;
+    if (!ctx || !ctx.get(editorViewCtx).editable) return;
     const rows = Array.from(
       (_b = (_a = contentWrapperRef.value) == null ? void 0 : _a.querySelectorAll("tr")) != null ? _b : []
     );
     const commands = ctx.get(commandsCtx);
     const pos = ((_c = getPos == null ? void 0 : getPos()) != null ? _c : 0) + 1;
-    if (rows.length === rowIndex) {
-      commands.call(selectRowCommand.key, { pos, index: rowIndex - 1 });
+    if (rows.length === index) {
+      commands.call(selectRowCommand.key, { pos, index: index - 1 });
       commands.call(addRowAfterCommand.key);
     } else {
-      commands.call(selectRowCommand.key, { pos, index: rowIndex });
+      commands.call(selectRowCommand.key, { pos, index });
       commands.call(addRowBeforeCommand.key);
     }
-    commands.call(selectRowCommand.key, { pos, index: rowIndex });
-    xHandle.dataset.show = "false";
+    commands.call(selectRowCommand.key, { pos, index });
   };
-  const onAddCol = () => {
+  const addColByIndex = (index) => {
     var _a, _b, _c, _d;
-    if (!ctx) return;
-    const xHandle = xLineHandleRef.value;
-    if (!xHandle) return;
-    const [_, colIndex] = lineHoverIndex.value;
-    if (colIndex < 0) return;
-    if (!ctx.get(editorViewCtx).editable) return;
+    if (!ctx || !ctx.get(editorViewCtx).editable) return;
     const cols = Array.from(
       (_c = (_b = (_a = contentWrapperRef.value) == null ? void 0 : _a.querySelector("tr")) == null ? void 0 : _b.children) != null ? _c : []
     );
     const commands = ctx.get(commandsCtx);
     const pos = ((_d = getPos == null ? void 0 : getPos()) != null ? _d : 0) + 1;
-    if (cols.length === colIndex) {
-      commands.call(selectColCommand.key, { pos, index: colIndex - 1 });
+    if (cols.length === index) {
+      commands.call(selectColCommand.key, { pos, index: index - 1 });
       commands.call(addColAfterCommand.key);
     } else {
-      commands.call(selectColCommand.key, { pos, index: colIndex });
+      commands.call(selectColCommand.key, { pos, index });
       commands.call(addColBeforeCommand.key);
     }
-    commands.call(selectColCommand.key, { pos, index: colIndex });
+    commands.call(selectColCommand.key, { pos, index });
   };
   const selectCol = () => {
-    var _a, _b;
+    var _a;
     if (!ctx) return;
     const [_, colIndex] = hoverIndex.value;
     const commands = ctx.get(commandsCtx);
     const pos = ((_a = getPos == null ? void 0 : getPos()) != null ? _a : 0) + 1;
     commands.call(selectColCommand.key, { pos, index: colIndex });
-    const buttonGroup = (_b = colHandleRef.value) == null ? void 0 : _b.querySelector(".button-group");
-    if (buttonGroup)
-      buttonGroup.dataset.show = buttonGroup.dataset.show === "true" ? "false" : "true";
   };
   const selectRow = () => {
-    var _a, _b;
+    var _a;
     if (!ctx) return;
     const [rowIndex, _] = hoverIndex.value;
     const commands = ctx.get(commandsCtx);
     const pos = ((_a = getPos == null ? void 0 : getPos()) != null ? _a : 0) + 1;
     commands.call(selectRowCommand.key, { pos, index: rowIndex });
-    const buttonGroup = (_b = rowHandleRef.value) == null ? void 0 : _b.querySelector(".button-group");
-    if (buttonGroup && rowIndex > 0)
-      buttonGroup.dataset.show = buttonGroup.dataset.show === "true" ? "false" : "true";
   };
   const deleteSelected = (e) => {
     if (!ctx) return;
@@ -3535,137 +3467,107 @@ function useOperation(refs, ctx, getPos) {
       ctx.get(editorViewCtx).focus();
     });
   };
+  const onMergeCells = (e) => {
+    if (!ctx) return;
+    if (!ctx.get(editorViewCtx).editable) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const commands = ctx.get(commandsCtx);
+    commands.call(mergeCellsCommand.key);
+    requestAnimationFrame(() => {
+      ctx.get(editorViewCtx).focus();
+    });
+  };
+  const onSplitCell = (e) => {
+    var _a, _b;
+    if (!ctx) return;
+    if (!ctx.get(editorViewCtx).editable) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const view = ctx.get(editorViewCtx);
+    const { state } = view;
+    const { selection } = state;
+    let cellNode = null;
+    let cellPos = null;
+    if (selection instanceof CellSelection) {
+      selection.forEachCell((cell, pos) => {
+        var _a2, _b2;
+        if (!cellNode && (((_a2 = cell.attrs.rowspan) != null ? _a2 : 1) > 1 || ((_b2 = cell.attrs.colspan) != null ? _b2 : 1) > 1)) {
+          cellNode = cell;
+          cellPos = pos;
+        }
+      });
+    } else {
+      const { $from } = selection;
+      for (let d = $from.depth; d > 0; d--) {
+        const n = $from.node(d);
+        if (n.type.name === "table_cell" || n.type.name === "table_header") {
+          cellNode = n;
+          cellPos = $from.before(d);
+          break;
+        }
+      }
+    }
+    if (!cellNode || cellPos == null) return;
+    if (((_a = cellNode.attrs.colspan) != null ? _a : 1) == 1 && ((_b = cellNode.attrs.rowspan) != null ? _b : 1) == 1)
+      return;
+    const $cellPos = state.doc.resolve(cellPos + 2);
+    view.dispatch(state.tr.setSelection(TextSelection.near($cellPos)));
+    const newState = view.state;
+    const { table } = selectedRect(newState);
+    const { schema } = newState;
+    splitCellWithType(({ row }) => {
+      const rowNode = table.child(row);
+      return rowNode.type.name === "table_header_row" ? schema.nodes.table_header : schema.nodes.table_cell;
+    })(newState, (tr) => {
+      view.dispatch(tr);
+    });
+    requestAnimationFrame(() => {
+      view.focus();
+    });
+  };
   return {
-    onAddRow,
-    onAddCol,
+    addRowByIndex,
+    addColByIndex,
     selectCol,
     selectRow,
     deleteSelected,
-    onAlign
+    onAlign,
+    onMergeCells,
+    onSplitCell
   };
 }
 
-function createPointerMoveHandler(refs, view) {
-  return throttle((e) => {
-    if (!(view == null ? void 0 : view.editable)) return;
-    const {
-      contentWrapperRef,
-      yLineHandleRef,
-      xLineHandleRef,
-      colHandleRef,
-      rowHandleRef,
-      hoverIndex,
-      lineHoverIndex
-    } = refs;
-    const yHandle = yLineHandleRef.value;
-    if (!yHandle) return;
-    const xHandle = xLineHandleRef.value;
-    if (!xHandle) return;
-    const content = contentWrapperRef.value;
-    if (!content) return;
-    const rowHandle = rowHandleRef.value;
-    if (!rowHandle) return;
-    const colHandle = colHandleRef.value;
-    if (!colHandle) return;
-    const index = findPointerIndex(e, view);
-    if (!index) return;
-    const dom = getRelatedDOM(contentWrapperRef, index);
-    if (!dom) return;
-    const [rowIndex, colIndex] = index;
-    const boundary = dom.col.getBoundingClientRect();
-    const closeToBoundaryLeft = Math.abs(e.clientX - boundary.left) < 8;
-    const closeToBoundaryRight = Math.abs(boundary.right - e.clientX) < 8;
-    const closeToBoundaryTop = Math.abs(e.clientY - boundary.top) < 8;
-    const closeToBoundaryBottom = Math.abs(boundary.bottom - e.clientY) < 8;
-    const closeToBoundary = closeToBoundaryLeft || closeToBoundaryRight || closeToBoundaryTop || closeToBoundaryBottom;
-    const rowButtonGroup = rowHandle.querySelector(".button-group");
-    const colButtonGroup = colHandle.querySelector(".button-group");
-    if (rowButtonGroup) rowButtonGroup.dataset.show = "false";
-    if (colButtonGroup) colButtonGroup.dataset.show = "false";
-    if (closeToBoundary) {
-      const contentBoundary = content.getBoundingClientRect();
-      rowHandle.dataset.show = "false";
-      colHandle.dataset.show = "false";
-      xHandle.dataset.displayType = "tool";
-      yHandle.dataset.displayType = "tool";
-      const yHandleWidth = yHandle.getBoundingClientRect().width;
-      const xHandleHeight = xHandle.getBoundingClientRect().height;
-      if (closeToBoundaryLeft || closeToBoundaryRight) {
-        lineHoverIndex.value[1] = closeToBoundaryLeft ? colIndex : colIndex + 1;
-        computePosition(dom.col, yHandle, {
-          placement: closeToBoundaryLeft ? "left" : "right",
-          middleware: [offset(closeToBoundaryLeft ? -1 * yHandleWidth : 0)]
-        }).then(({ x }) => {
-          yHandle.dataset.show = "true";
-          Object.assign(yHandle.style, {
-            height: `${contentBoundary.height}px`,
-            left: `${x}px`
-          });
-        }).catch(console.error);
-      } else {
-        yHandle.dataset.show = "false";
-      }
-      if (index[0] !== 0 && (closeToBoundaryTop || closeToBoundaryBottom)) {
-        lineHoverIndex.value[0] = closeToBoundaryTop ? rowIndex : rowIndex + 1;
-        computePosition(dom.row, xHandle, {
-          placement: closeToBoundaryTop ? "top" : "bottom",
-          middleware: [offset(closeToBoundaryTop ? -1 * xHandleHeight : 0)]
-        }).then(({ y }) => {
-          xHandle.dataset.show = "true";
-          Object.assign(xHandle.style, {
-            width: `${contentBoundary.width}px`,
-            top: `${y}px`
-          });
-        }).catch(console.error);
-      } else {
-        xHandle.dataset.show = "false";
-      }
-      return;
-    }
-    lineHoverIndex.value = [-1, -1];
-    yHandle.dataset.show = "false";
-    xHandle.dataset.show = "false";
-    rowHandle.dataset.show = "true";
-    colHandle.dataset.show = "true";
-    computeRowHandlePositionByIndex({
-      refs,
-      index
-    });
-    computeColHandlePositionByIndex({
-      refs,
-      index
-    });
-    hoverIndex.value = index;
-  }, 20);
-}
-function createPointerLeaveHandler(refs) {
-  return () => {
-    const { rowHandleRef, colHandleRef, yLineHandleRef, xLineHandleRef } = refs;
-    setTimeout(() => {
-      const rowHandle = rowHandleRef.value;
-      if (!rowHandle) return;
-      const colHandle = colHandleRef.value;
-      if (!colHandle) return;
-      const yHandle = yLineHandleRef.value;
-      if (!yHandle) return;
-      const xHandle = xLineHandleRef.value;
-      if (!xHandle) return;
-      rowHandle.dataset.show = "false";
-      colHandle.dataset.show = "false";
-      yHandle.dataset.show = "false";
-      xHandle.dataset.show = "false";
-    }, 200);
+function usePointerHandlers(_refs, _view) {
+  const pointerMove = (_e) => {
+  };
+  const pointerLeave = () => {
   };
-}
-function usePointerHandlers(refs, view) {
-  const pointerMove = createPointerMoveHandler(refs, view);
-  const pointerLeave = createPointerLeaveHandler(refs);
   return {
     pointerMove,
     pointerLeave
   };
 }
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 keepAlive(h);
 const TableBlock = defineComponent({
   props: {
@@ -3696,52 +3598,267 @@ const TableBlock = defineComponent({
   },
   setup({ view, node, ctx, getPos, config, onMount }) {
     const contentWrapperRef = ref();
+    let contentMounted = false;
     const contentWrapperFunctionRef = (div) => {
       if (div == null) return;
       if (div instanceof HTMLElement) {
         contentWrapperRef.value = div;
-        onMount(div);
+        if (!contentMounted) {
+          onMount(div);
+          contentMounted = true;
+        }
       } else {
         contentWrapperRef.value = void 0;
       }
     };
-    const colHandleRef = ref();
-    const rowHandleRef = ref();
-    const xLineHandleRef = ref();
-    const yLineHandleRef = ref();
     const tableWrapperRef = ref();
     const dragPreviewRef = ref();
     const hoverIndex = ref([0, 0]);
-    const lineHoverIndex = ref([-1, -1]);
+    ref([-1, -1]);
     const dragInfo = ref();
+    const resizingCol = ref(-1);
+    const colWidths = ref([]);
+    const syncColWidths = () => {
+      if (resizingCol.value >= 0) return;
+      const firstRow = node.value.firstChild;
+      if (!firstRow) return;
+      const colCount = firstRow.content.childCount;
+      const widths = [];
+      const hasBounds = colBounds.value.length === colCount;
+      for (let i = 0; i < colCount; i++) {
+        const cell = firstRow.content.child(i);
+        const w = cell.attrs.colwidth;
+        if (Array.isArray(w) && w[0]) {
+          widths.push(w[0]);
+        } else if (hasBounds) {
+          widths.push(Math.round(colBounds.value[i].width));
+        } else {
+          widths.push(0);
+        }
+      }
+      colWidths.value = widths;
+    };
     const refs = {
       dragPreviewRef,
       tableWrapperRef,
       contentWrapperRef,
-      yLineHandleRef,
-      xLineHandleRef,
-      colHandleRef,
-      rowHandleRef,
       hoverIndex,
-      lineHoverIndex,
       dragInfo
     };
-    const { pointerLeave, pointerMove } = usePointerHandlers(refs, view);
+    const { pointerLeave, pointerMove } = usePointerHandlers();
     const { dragRow, dragCol } = useDragHandlers(refs, ctx, getPos);
     const {
-      onAddRow,
-      onAddCol,
+      addRowByIndex,
+      addColByIndex,
       selectCol,
       selectRow,
       deleteSelected,
-      onAlign
+      onAlign,
+      onMergeCells,
+      onSplitCell
     } = useOperation(refs, ctx, getPos);
+    const cellToolbarRef = ref();
+    const showCellToolbar = ref(false);
+    const canMerge = ref(false);
+    const canSplit = ref(false);
+    const updateCellToolbar = () => {
+      const { selection } = view.state;
+      const tablePos = getPos();
+      if (tablePos == null) {
+        showCellToolbar.value = false;
+        return;
+      }
+      const tableEnd = tablePos + node.value.nodeSize;
+      if (selection.from < tablePos || selection.from > tableEnd) {
+        showCellToolbar.value = false;
+        return;
+      }
+      if (selection instanceof CellSelection) {
+        let _cellCount = 0;
+        let hasMerged = false;
+        selection.forEachCell((cell) => {
+          var _a, _b;
+          _cellCount++;
+          if (((_a = cell.attrs.rowspan) != null ? _a : 1) > 1 || ((_b = cell.attrs.colspan) != null ? _b : 1) > 1) {
+            hasMerged = true;
+          }
+        });
+        canMerge.value = _cellCount > 1;
+        canSplit.value = hasMerged;
+      } else {
+        showCellToolbar.value = false;
+        return;
+      }
+      if (!canMerge.value && !canSplit.value) {
+        showCellToolbar.value = false;
+        return;
+      }
+      showCellToolbar.value = true;
+      requestAnimationFrame(() => {
+        const toolbar = cellToolbarRef.value;
+        const content = contentWrapperRef.value;
+        if (!toolbar || !content) return;
+        const selectedCells = content.querySelectorAll(".selectedCell");
+        let refEl = selectedCells.length > 0 ? selectedCells[0] : null;
+        if (!refEl && !(view.state.selection instanceof CellSelection)) {
+          const { $from } = view.state.selection;
+          for (let d = $from.depth; d > 0; d--) {
+            const node2 = $from.node(d);
+            if (node2.type.name === "table_cell" || node2.type.name === "table_header") {
+              const cellPos = $from.before(d);
+              const dom = view.nodeDOM(cellPos);
+              if (dom instanceof HTMLElement) refEl = dom;
+              break;
+            }
+          }
+        }
+        if (!refEl) return;
+        computePosition(refEl, toolbar, { placement: "top" }).then(({ x, y }) => {
+          toolbar.style.left = `${x}px`;
+          toolbar.style.top = `${y}px`;
+          toolbar.dataset.show = "true";
+        }).catch(console.error);
+      });
+    };
+    const colBounds = ref([]);
+    const rowBounds = ref([]);
+    let ro = null;
+    let mo = null;
+    const updateBounds = () => {
+      const content = contentWrapperRef.value;
+      if (!content) return;
+      const firstRow = content.querySelector("tr");
+      const tableRect = content.getBoundingClientRect();
+      if (firstRow) {
+        colBounds.value = Array.from(firstRow.children).map((c) => {
+          const rect = c.getBoundingClientRect();
+          return { left: rect.left - tableRect.left, width: rect.width };
+        });
+      }
+      const rows = content.querySelectorAll("tr");
+      rowBounds.value = Array.from(rows).map((c) => {
+        const rect = c.getBoundingClientRect();
+        return { top: rect.top - tableRect.top, height: rect.height };
+      });
+      syncColWidths();
+    };
+    const startResize = (e, colIndex) => {
+      var _a, _b;
+      if (!view.editable) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const startX = e.clientX;
+      const startWidth = (_b = (_a = colBounds.value[colIndex]) == null ? void 0 : _a.width) != null ? _b : 100;
+      resizingCol.value = colIndex;
+      const onMove = (ev) => {
+        const delta = ev.clientX - startX;
+        const newWidth = Math.max(50, startWidth + delta);
+        colWidths.value = colWidths.value.map(
+          (w, i) => i === colIndex ? newWidth : w
+        );
+      };
+      const onUp = (ev) => {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        const delta = ev.clientX - startX;
+        const newWidth = Math.max(50, startWidth + delta);
+        const tablePos = getPos();
+        if (tablePos == null) {
+          resizingCol.value = -1;
+          return;
+        }
+        const tableNode = node.value;
+        let tr = view.state.tr;
+        let pos = tablePos + 1;
+        tableNode.forEach((row) => {
+          let cellIdx = 0;
+          row.forEach((cell, _offset, cellNodePos) => {
+            if (cellIdx === colIndex) {
+              const absPos = tablePos + 1 + cellNodePos;
+              const colwidth = [Math.round(newWidth)];
+              tr = tr.setNodeMarkup(absPos, void 0, __spreadProps(__spreadValues({}, cell.attrs), {
+                colwidth
+              }));
+            }
+            cellIdx++;
+          });
+          pos += row.nodeSize;
+        });
+        resizingCol.value = -1;
+        if (tr.docChanged) view.dispatch(tr);
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    };
+    const activeColIndex = ref(-1);
+    const activeRowIndex = ref(-1);
+    const dispatchListener = () => {
+      updateCellToolbar();
+      const { selection } = view.state;
+      if (selection instanceof CellSelection) {
+        if (selection.isColSelection()) {
+          const { $head } = selection;
+          activeColIndex.value = $head.index($head.depth - 1);
+          activeRowIndex.value = -1;
+        } else if (selection.isRowSelection()) {
+          activeColIndex.value = -1;
+        } else {
+          activeColIndex.value = -1;
+          activeRowIndex.value = -1;
+        }
+      } else {
+        activeColIndex.value = -1;
+        activeRowIndex.value = -1;
+      }
+    };
     onMounted(() => {
       requestAnimationFrame(() => {
         if (view.editable) recoveryStateBetweenUpdate(refs, view, node.value);
+        syncColWidths();
+      });
+      view.dom.addEventListener("keyup", dispatchListener);
+      view.dom.addEventListener("pointerup", dispatchListener);
+      updateCellToolbar();
+      ro = new ResizeObserver(() => {
+        requestAnimationFrame(updateBounds);
       });
+      mo = new MutationObserver((mutations) => {
+        let shouldUpdate = false;
+        for (const mut of mutations) {
+          if (mut.type === "childList") {
+            for (const node2 of mut.addedNodes) {
+              if (node2 instanceof HTMLElement && ["TR", "TD", "TH", "TBODY"].includes(node2.nodeName))
+                shouldUpdate = true;
+            }
+            for (const node2 of mut.removedNodes) {
+              if (node2 instanceof HTMLElement && ["TR", "TD", "TH", "TBODY"].includes(node2.nodeName))
+                shouldUpdate = true;
+            }
+          } else if (mut.type === "attributes") {
+            shouldUpdate = true;
+          }
+        }
+        if (shouldUpdate) {
+          requestAnimationFrame(updateBounds);
+        }
+      });
+      if (contentWrapperRef.value) {
+        ro.observe(contentWrapperRef.value);
+        mo.observe(contentWrapperRef.value, {
+          childList: true,
+          subtree: true,
+          attributes: true
+        });
+      }
+    });
+    onBeforeUnmount(() => {
+      view.dom.removeEventListener("keyup", dispatchListener);
+      view.dom.removeEventListener("pointerup", dispatchListener);
+      if (ro) ro.disconnect();
+      if (mo) mo.disconnect();
     });
     return () => {
+      updateCellToolbar();
       return /* @__PURE__ */ h(
         "div",
         {
@@ -3749,62 +3866,189 @@ const TableBlock = defineComponent({
           onDragover: (e) => e.preventDefault(),
           onDragleave: (e) => e.preventDefault(),
           onPointermove: pointerMove,
-          onPointerleave: pointerLeave
+          onPointerleave: pointerLeave,
+          class: "milkdown-table-wrapper-outer"
         },
         /* @__PURE__ */ h(
           "div",
           {
-            "data-show": "false",
+            ref: cellToolbarRef,
+            "data-show": showCellToolbar.value ? "true" : "false",
+            class: "cell-toolbar",
             contenteditable: "false",
-            draggable: "true",
+            onPointerdown: (e) => e.stopPropagation()
+          },
+          canMerge.value && /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              class: "cell-toolbar-btn",
+              onPointerdown: onMergeCells
+            },
+            /* @__PURE__ */ h(Icon, { icon: config.renderButton("merge_cells") })
+          ),
+          canSplit.value && /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              class: "cell-toolbar-btn",
+              onPointerdown: onSplitCell
+            },
+            /* @__PURE__ */ h(Icon, { icon: config.renderButton("split_cell") })
+          )
+        ),
+        /* @__PURE__ */ h("div", { class: "table-wrapper", ref: tableWrapperRef }, /* @__PURE__ */ h("div", { contenteditable: "false", class: "fixed-handles-col" }, colBounds.value.map((bound, i) => /* @__PURE__ */ h(
+          "div",
+          {
+            key: `col-${i}`,
+            class: "handle cell-handle fixed",
             "data-role": "col-drag-handle",
-            class: "handle cell-handle",
-            onDragstart: dragCol,
-            onClick: selectCol,
+            draggable: "true",
+            style: { left: `${bound.left}px`, width: `${bound.width}px` },
+            onDragstart: (e) => {
+              hoverIndex.value = [0, i];
+              dragCol(e);
+            },
+            onClick: (e) => {
+              hoverIndex.value = [0, i];
+              selectCol(e);
+              activeColIndex.value = i;
+              activeRowIndex.value = -1;
+            },
             onPointerdown: (e) => e.stopPropagation(),
-            onPointermove: (e) => e.stopPropagation(),
-            ref: colHandleRef
+            onPointermove: (e) => e.stopPropagation()
           },
-          /* @__PURE__ */ h(Icon, { icon: config.renderButton("col_drag_handle") }),
           /* @__PURE__ */ h(
             "div",
             {
-              "data-show": "false",
               class: "button-group",
+              "data-show": activeColIndex.value === i ? "true" : "false",
               onPointermove: (e) => e.stopPropagation()
             },
-            /* @__PURE__ */ h("button", { type: "button", onPointerdown: onAlign("left") }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("align_col_left") })),
-            /* @__PURE__ */ h("button", { type: "button", onPointerdown: onAlign("center") }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("align_col_center") })),
-            /* @__PURE__ */ h("button", { type: "button", onPointerdown: onAlign("right") }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("align_col_right") })),
-            /* @__PURE__ */ h("button", { type: "button", onPointerdown: deleteSelected }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("delete_col") }))
+            /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                onPointerdown: (e) => {
+                  hoverIndex.value = [0, i];
+                  onAlign("left")(e);
+                }
+              },
+              /* @__PURE__ */ h(Icon, { icon: config.renderButton("align_col_left") })
+            ),
+            /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                onPointerdown: (e) => {
+                  hoverIndex.value = [0, i];
+                  onAlign("center")(e);
+                }
+              },
+              /* @__PURE__ */ h(Icon, { icon: config.renderButton("align_col_center") })
+            ),
+            /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                onPointerdown: (e) => {
+                  hoverIndex.value = [0, i];
+                  onAlign("right")(e);
+                }
+              },
+              /* @__PURE__ */ h(Icon, { icon: config.renderButton("align_col_right") })
+            ),
+            /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                onPointerdown: (e) => {
+                  hoverIndex.value = [0, i];
+                  deleteSelected(e);
+                }
+              },
+              /* @__PURE__ */ h(Icon, { icon: config.renderButton("delete_col") })
+            )
           )
-        ),
-        /* @__PURE__ */ h(
+        ))), /* @__PURE__ */ h("div", { contenteditable: "false", class: "add-dots-col" }, [
+          ...colBounds.value.map((b) => b.left),
+          colBounds.value.length ? colBounds.value[colBounds.value.length - 1].left + colBounds.value[colBounds.value.length - 1].width : 0
+        ].map((left, i) => /* @__PURE__ */ h(
           "div",
           {
-            "data-show": "false",
-            contenteditable: "false",
-            draggable: "true",
+            key: `add-col-${i}`,
+            class: "add-dot",
+            style: { left: `${left}px` },
+            onClick: () => addColByIndex(i),
+            onPointerdown: (e) => e.stopPropagation()
+          },
+          /* @__PURE__ */ h(Icon, { icon: config.renderButton("add_col") })
+        ))), /* @__PURE__ */ h("div", { contenteditable: "false", class: "resize-handles-col" }, colBounds.value.map((bound, i) => /* @__PURE__ */ h(
+          "div",
+          {
+            key: `resize-${i}`,
+            class: [
+              "col-resize-handle",
+              resizingCol.value === i ? "active" : ""
+            ].join(" "),
+            style: {
+              left: `${bound.left + bound.width - 3}px`
+            },
+            onPointerdown: (e) => startResize(e, i)
+          }
+        ))), /* @__PURE__ */ h("div", { contenteditable: "false", class: "fixed-handles-row" }, rowBounds.value.map((bound, i) => /* @__PURE__ */ h(
+          "div",
+          {
+            key: `row-${i}`,
+            class: "handle cell-handle fixed",
             "data-role": "row-drag-handle",
-            class: "handle cell-handle",
-            onDragstart: dragRow,
-            onClick: selectRow,
-            onPointerdown: (e) => e.stopPropagation(),
-            onPointermove: (e) => e.stopPropagation(),
-            ref: rowHandleRef
+            draggable: "true",
+            style: { top: `${bound.top}px`, height: `${bound.height}px` },
+            onDragstart: (e) => {
+              hoverIndex.value = [i, 0];
+              dragRow(e);
+            },
+            onClick: (e) => {
+              hoverIndex.value = [i, 0];
+              selectRow(e);
+              activeRowIndex.value = i;
+              activeColIndex.value = -1;
+            },
+            onPointerdown: (e) => e.stopPropagation()
           },
-          /* @__PURE__ */ h(Icon, { icon: config.renderButton("row_drag_handle") }),
           /* @__PURE__ */ h(
             "div",
             {
-              "data-show": "false",
               class: "button-group",
+              "data-show": activeRowIndex.value === i ? "true" : "false",
               onPointermove: (e) => e.stopPropagation()
             },
-            /* @__PURE__ */ h("button", { type: "button", onPointerdown: deleteSelected }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("delete_row") }))
+            /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                onPointerdown: (e) => {
+                  hoverIndex.value = [i, 0];
+                  deleteSelected(e);
+                }
+              },
+              /* @__PURE__ */ h(Icon, { icon: config.renderButton("delete_row") })
+            )
           )
-        ),
-        /* @__PURE__ */ h("div", { class: "table-wrapper", ref: tableWrapperRef }, /* @__PURE__ */ h(
+        ))), /* @__PURE__ */ h("div", { contenteditable: "false", class: "add-dots-row" }, [
+          ...rowBounds.value.map((b) => b.top),
+          rowBounds.value.length ? rowBounds.value[rowBounds.value.length - 1].top + rowBounds.value[rowBounds.value.length - 1].height : 0
+        ].map((top, i) => /* @__PURE__ */ h(
+          "div",
+          {
+            key: `add-row-${i}`,
+            class: "add-dot",
+            style: { top: `${top}px` },
+            onClick: () => addRowByIndex(i),
+            onPointerdown: (e) => e.stopPropagation()
+          },
+          /* @__PURE__ */ h(Icon, { icon: config.renderButton("add_row") })
+        ))), /* @__PURE__ */ h(
           "div",
           {
             "data-show": "false",
@@ -3813,29 +4057,13 @@ const TableBlock = defineComponent({
             ref: dragPreviewRef
           },
           /* @__PURE__ */ h("table", null, /* @__PURE__ */ h("tbody", null))
-        ), /* @__PURE__ */ h(
-          "div",
+        ), /* @__PURE__ */ h("table", { ref: contentWrapperFunctionRef, class: "children" }, /* @__PURE__ */ h("colgroup", null, colWidths.value.map((w, i) => /* @__PURE__ */ h(
+          "col",
           {
-            "data-show": "false",
-            contenteditable: "false",
-            "data-display-type": "tool",
-            "data-role": "x-line-drag-handle",
-            class: "handle line-handle",
-            ref: xLineHandleRef
-          },
-          /* @__PURE__ */ h("button", { type: "button", onClick: onAddRow, class: "add-button" }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("add_row") }))
-        ), /* @__PURE__ */ h(
-          "div",
-          {
-            "data-show": "false",
-            contenteditable: "false",
-            "data-display-type": "tool",
-            "data-role": "y-line-drag-handle",
-            class: "handle line-handle",
-            ref: yLineHandleRef
-          },
-          /* @__PURE__ */ h("button", { type: "button", onClick: onAddCol, class: "add-button" }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("add_col") }))
-        ), /* @__PURE__ */ h("table", { ref: contentWrapperFunctionRef, class: "children" }))
+            key: i,
+            style: w > 0 ? { width: `${w}px` } : void 0
+          }
+        )))))
       );
     };
   }
@@ -3845,16 +4073,17 @@ var __typeError = (msg) => {
   throw TypeError(msg);
 };
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _TableNodeView_instances, handleClick_fn;
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _selectionUpdateScheduled;
 class TableNodeView {
   constructor(ctx, node, view, getPos) {
     this.ctx = ctx;
     this.node = node;
     this.view = view;
     this.getPos = getPos;
-    __privateAdd(this, _TableNodeView_instances);
+    __privateAdd(this, _selectionUpdateScheduled, false);
     const dom = document.createElement("div");
     dom.className = "milkdown-table-block";
     const contentDOM = document.createElement("tbody");
@@ -3878,8 +4107,16 @@ class TableNodeView {
   }
   update(node) {
     if (node.type !== this.node.type) return false;
-    if (node.sameMarkup(this.node) && node.content.eq(this.node.content))
-      return false;
+    if (node.sameMarkup(this.node) && node.content.eq(this.node.content)) {
+      if (!__privateGet(this, _selectionUpdateScheduled)) {
+        __privateSet(this, _selectionUpdateScheduled, true);
+        queueMicrotask(() => {
+          triggerRef(this.nodeRef);
+          __privateSet(this, _selectionUpdateScheduled, false);
+        });
+      }
+      return true;
+    }
     this.node = node;
     this.nodeRef.value = node;
     return true;
@@ -3888,11 +4125,6 @@ class TableNodeView {
     if (e.type === "drop" || e.type.startsWith("drag")) return true;
     if (e.type === "mousedown" || e.type === "pointerdown") {
       if (e.target instanceof Element && e.target.closest("button")) return true;
-      const target = e.target;
-      if (target instanceof HTMLElement && (target.closest("th") || target.closest("td"))) {
-        const event = e;
-        return __privateMethod(this, _TableNodeView_instances, handleClick_fn).call(this, event);
-      }
     }
     return false;
   }
@@ -3910,38 +4142,7 @@ class TableNodeView {
     this.contentDOM.remove();
   }
 }
-_TableNodeView_instances = new WeakSet();
-handleClick_fn = function(event) {
-  const view = this.view;
-  if (!view.editable) return false;
-  const { state, dispatch } = view;
-  const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
-  if (!pos) return false;
-  const $pos = state.doc.resolve(pos.inside);
-  const node = findParent(
-    (node2) => node2.type.name === "table_cell" || node2.type.name === "table_header"
-  )($pos);
-  if (!node) return false;
-  if (state.selection instanceof TextSelection) {
-    const currentNode = findParent(
-      (node2) => node2.type.name === "table_cell" || node2.type.name === "table_header"
-    )(state.selection.$from);
-    if ((currentNode == null ? void 0 : currentNode.node) === node.node) return false;
-  }
-  const { from } = node;
-  const selection = NodeSelection.create(state.doc, from + 1);
-  if (state.selection.eq(selection)) return false;
-  if (state.selection instanceof CellSelection) {
-    setTimeout(() => {
-      dispatch(state.tr.setSelection(selection).scrollIntoView());
-    }, 20);
-  } else {
-    requestAnimationFrame(() => {
-      dispatch(state.tr.setSelection(selection).scrollIntoView());
-    });
-  }
-  return true;
-};
+_selectionUpdateScheduled = new WeakMap();
 const tableBlockView = $view(
   tableSchema.node,
   (ctx) => {