@jvs-milkdown/components 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/components",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "keywords": [
     "milkdown",
     "milkdown plugin"
@@ -50,15 +50,15 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
-    "@jvs-milkdown/core": "^1.2.3",
-    "@jvs-milkdown/ctx": "^1.2.3",
-    "@jvs-milkdown/exception": "^1.2.3",
-    "@jvs-milkdown/plugin-tooltip": "^1.2.3",
-    "@jvs-milkdown/preset-commonmark": "^1.2.3",
-    "@jvs-milkdown/preset-gfm": "^1.2.3",
-    "@jvs-milkdown/prose": "^1.2.3",
-    "@jvs-milkdown/transformer": "^1.2.3",
-    "@jvs-milkdown/utils": "^1.2.3",
+    "@jvs-milkdown/core": "^1.2.5",
+    "@jvs-milkdown/ctx": "^1.2.5",
+    "@jvs-milkdown/exception": "^1.2.5",
+    "@jvs-milkdown/plugin-tooltip": "^1.2.5",
+    "@jvs-milkdown/preset-commonmark": "^1.2.5",
+    "@jvs-milkdown/preset-gfm": "^1.2.5",
+    "@jvs-milkdown/prose": "^1.2.5",
+    "@jvs-milkdown/transformer": "^1.2.5",
+    "@jvs-milkdown/utils": "^1.2.5",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "dompurify": "^3.2.5",

package/src/table-block/view/component.tsx

@@ -7,6 +7,7 @@ import {
   CellSelection,
   mergeCells,
   splitCell,
+  selectedRect,
 } from '@jvs-milkdown/prose/tables'
 import {
   defineComponent,
@@ -195,7 +196,8 @@ export const TableBlock = defineComponent<TableBlockProps>({
       addColByIndex,
       selectCol,
       selectRow,
-      deleteSelected,
+      deleteRowByIndex,
+      deleteColByIndex,
       onAlign,
       onMergeCells,
       onSplitCell,
@@ -397,18 +399,34 @@ export const TableBlock = defineComponent<TableBlockProps>({
 
         if (isCellSelection(selection)) {
           const selAny = selection as any
+          const rect = selectedRect(view.state)
+          
           if (selAny.isColSelection()) {
-            const $headCell = selAny.$headCell
-            activeColIndex.value = $headCell
-              ? $headCell.index($headCell.depth)
-              : -1
+            if (
+              activeColIndex.value >= rect.left &&
+              activeColIndex.value < rect.right
+            ) {
+              // Keep current col index if it's within the selection
+            } else {
+              const $headCell = selAny.$headCell
+              activeColIndex.value = $headCell
+                ? $headCell.index($headCell.depth)
+                : -1
+            }
             activeRowIndex.value = -1
           } else if (selAny.isRowSelection()) {
-            const $headCell = selAny.$headCell
+            if (
+              activeRowIndex.value >= rect.top &&
+              activeRowIndex.value < rect.bottom
+            ) {
+              // Keep current row index if it's within the selection
+            } else {
+              const $headCell = selAny.$headCell
+              activeRowIndex.value = $headCell
+                ? $headCell.index($headCell.depth - 1)
+                : -1
+            }
             activeColIndex.value = -1
-            activeRowIndex.value = $headCell
-              ? $headCell.index($headCell.depth - 1)
-              : -1
           } else {
             activeColIndex.value = -1
             activeRowIndex.value = -1
@@ -603,9 +621,9 @@ export const TableBlock = defineComponent<TableBlockProps>({
                     </button>
                     <button
                       type="button"
-                      onPointerdown={(e) => {
+                      onPointerdown={() => {
                         hoverIndex.value = [0, i]
-                        deleteSelected(e)
+                        deleteColByIndex(i)
                       }}
                     >
                       <Icon icon={config.renderButton('delete_col')} />
@@ -691,9 +709,9 @@ export const TableBlock = defineComponent<TableBlockProps>({
                     ) : undefined}
                     <button
                       type="button"
-                      onPointerdown={(e) => {
+                      onPointerdown={() => {
                         hoverIndex.value = [i, 0]
-                        deleteSelected(e)
+                        deleteRowByIndex(i)
                       }}
                     >
                       <Icon icon={config.renderButton('delete_row')} />

package/src/table-block/view/operation.ts

@@ -17,6 +17,8 @@ import {
   TableMap,
   type TableRect,
   addColumn,
+  removeRow,
+  removeColumn,
 } from '@jvs-milkdown/prose/tables'
 
 import type { Refs } from './types'
@@ -116,6 +118,64 @@ export function useOperation(
     })
   }
 
+  const deleteRowByIndex = (index: number) => {
+    if (!ctx || !ctx.get(editorViewCtx).editable) return
+    const view = ctx.get(editorViewCtx)
+    const tablePos = getPos?.()
+    if (tablePos == null) return
+
+    const table = view.state.doc.nodeAt(tablePos)
+    if (!table) return
+
+    const tableStart = tablePos + 1
+    const map = TableMap.get(table)
+    const tr = view.state.tr
+    const rect: TableRect = {
+      map,
+      tableStart,
+      table,
+      left: 0,
+      right: map.width,
+      top: 0,
+      bottom: map.height,
+    }
+
+    removeRow(tr, rect, index)
+    view.dispatch(tr)
+    requestAnimationFrame(() => {
+      ctx.get(editorViewCtx).focus()
+    })
+  }
+
+  const deleteColByIndex = (index: number) => {
+    if (!ctx || !ctx.get(editorViewCtx).editable) return
+    const view = ctx.get(editorViewCtx)
+    const tablePos = getPos?.()
+    if (tablePos == null) return
+
+    const table = view.state.doc.nodeAt(tablePos)
+    if (!table) return
+
+    const tableStart = tablePos + 1
+    const map = TableMap.get(table)
+    const tr = view.state.tr
+    const rect: TableRect = {
+      map,
+      tableStart,
+      table,
+      left: 0,
+      right: map.width,
+      top: 0,
+      bottom: map.height,
+    }
+
+    removeColumn(tr, rect, index)
+    view.dispatch(tr)
+    requestAnimationFrame(() => {
+      ctx.get(editorViewCtx).focus()
+    })
+  }
+
   const onAlign =
     (direction: 'left' | 'center' | 'right') => (e: PointerEvent) => {
       if (!ctx) return
@@ -225,6 +285,8 @@ export function useOperation(
     selectCol,
     selectRow,
     deleteSelected,
+    deleteRowByIndex,
+    deleteColByIndex,
     onAlign,
     onMergeCells,
     onSplitCell,