@jvs-milkdown/components 1.1.4 → 1.1.6

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

@@ -3,7 +3,11 @@ import type { Node } from '@jvs-milkdown/prose/model'
 import type { EditorView } from '@jvs-milkdown/prose/view'
 
 import { computePosition } from '@floating-ui/dom'
-import { CellSelection } from '@jvs-milkdown/prose/tables'
+import {
+  CellSelection,
+  mergeCells,
+  splitCell,
+} from '@jvs-milkdown/prose/tables'
 import {
   defineComponent,
   ref,
@@ -12,6 +16,7 @@ import {
   onMounted,
   onBeforeUnmount,
   type Ref,
+  watch,
 } from 'vue'
 
 import type { TableBlockConfig } from '../config'
@@ -122,7 +127,11 @@ export const TableBlock = defineComponent<TableBlockProps>({
     }
 
     const { pointerLeave, pointerMove } = usePointerHandlers(refs, view)
-    const { dragRow, dragCol } = useDragHandlers(refs, ctx, getPos)
+    const { dragRow, dragCol, onDragOver, onDragEnd, onDrop } = useDragHandlers(
+      refs,
+      ctx,
+      getPos
+    )
     const {
       addRowByIndex,
       addColByIndex,
@@ -153,18 +162,16 @@ export const TableBlock = defineComponent<TableBlockProps>({
         return
       }
 
-      if (selection instanceof CellSelection) {
-        // Compute merge/split availability
-        let _cellCount = 0
-        let hasMerged = false
-        selection.forEachCell((cell) => {
-          _cellCount++
-          if ((cell.attrs.rowspan ?? 1) > 1 || (cell.attrs.colspan ?? 1) > 1) {
-            hasMerged = true
-          }
-        })
-        canMerge.value = _cellCount > 1
-        canSplit.value = hasMerged
+      // Bypass instanceof checks due to potential multiple instances of prosemirror-tables
+      const isCellSelection = (sel: any) =>
+        sel &&
+        typeof sel.isColSelection === 'function' &&
+        typeof sel.forEachCell === 'function'
+
+      if (isCellSelection(selection)) {
+        // Use prosemirror-tables commands (without dispatch) to check if merge/split is currently possible
+        canMerge.value = mergeCells(view.state)
+        canSplit.value = splitCell(view.state)
       } else {
         // TextSelection: only show toolbar for CellSelection-based actions
         showCellToolbar.value = false
@@ -176,6 +183,11 @@ export const TableBlock = defineComponent<TableBlockProps>({
         return
       }
 
+      if (activeColIndex.value !== -1 || activeRowIndex.value !== -1) {
+        showCellToolbar.value = false
+        return
+      }
+
       showCellToolbar.value = true
 
       // Position toolbar above the first selected cell using floating-ui
@@ -306,27 +318,39 @@ export const TableBlock = defineComponent<TableBlockProps>({
 
     // Listen for ProseMirror state updates
     const dispatchListener = () => {
-      updateCellToolbar()
-
-      // Update active handler button groups based on selection
-      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
-          // Simple approach for row index: derive from hoverIndex which is updated by pointer? Or compute.
-          // recoveryStateBetweenUpdate updates hoverIndex.
+      setTimeout(() => {
+        // Update active handler button groups based on selection
+        const { selection } = view.state
+        const isCellSelection = (sel: any) =>
+          sel &&
+          typeof sel.isColSelection === 'function' &&
+          typeof sel.forEachCell === 'function'
+
+        if (isCellSelection(selection)) {
+          const selAny = selection as any
+          if (selAny.isColSelection()) {
+            const $headCell = selAny.$headCell
+            activeColIndex.value = $headCell
+              ? $headCell.index($headCell.depth)
+              : -1
+            activeRowIndex.value = -1
+          } else if (selAny.isRowSelection()) {
+            const $headCell = selAny.$headCell
+            activeColIndex.value = -1
+            activeRowIndex.value = $headCell
+              ? $headCell.index($headCell.depth - 1)
+              : -1
+          } else {
+            activeColIndex.value = -1
+            activeRowIndex.value = -1
+          }
         } else {
           activeColIndex.value = -1
           activeRowIndex.value = -1
         }
-      } else {
-        activeColIndex.value = -1
-        activeRowIndex.value = -1
-      }
+
+        updateCellToolbar()
+      }, 0)
     }
 
     onMounted(() => {
@@ -378,6 +402,10 @@ export const TableBlock = defineComponent<TableBlockProps>({
       }
     })
 
+    watch(node, () => {
+      dispatchListener()
+    })
+
     onBeforeUnmount(() => {
       view.dom.removeEventListener('keyup', dispatchListener)
       view.dom.removeEventListener('pointerup', dispatchListener)
@@ -386,12 +414,26 @@ export const TableBlock = defineComponent<TableBlockProps>({
     })
 
     return () => {
-      updateCellToolbar()
-
       return (
         <div
-          onDragstart={(e) => e.preventDefault()}
-          onDragover={(e) => e.preventDefault()}
+          onDragend={onDragEnd}
+          onDragover={(e) => {
+            e.preventDefault()
+            onDragOver(e)
+            // Stop propagation during active drag to prevent ProseMirror interference
+            if (dragInfo.value) {
+              e.stopPropagation()
+            }
+          }}
+          onDrop={(e) => {
+            const isDragging = !!dragInfo.value
+            onDrop(e)
+            // Stop ProseMirror from handling the drop during table drag
+            if (isDragging) {
+              e.preventDefault()
+              e.stopPropagation()
+            }
+          }}
           onDragleave={(e) => e.preventDefault()}
           onPointermove={pointerMove}
           onPointerleave={pointerLeave}
@@ -405,7 +447,7 @@ export const TableBlock = defineComponent<TableBlockProps>({
             contenteditable="false"
             onPointerdown={(e: PointerEvent) => e.stopPropagation()}
           >
-            {canMerge.value && (
+            {
               <button
                 type="button"
                 class="cell-toolbar-btn"
@@ -413,8 +455,8 @@ export const TableBlock = defineComponent<TableBlockProps>({
               >
                 <Icon icon={config.renderButton('merge_cells')} />
               </button>
-            )}
-            {canSplit.value && (
+            }
+            {
               <button
                 type="button"
                 class="cell-toolbar-btn"
@@ -422,7 +464,7 @@ export const TableBlock = defineComponent<TableBlockProps>({
               >
                 <Icon icon={config.renderButton('split_cell')} />
               </button>
-            )}
+            }
           </div>
 
           <div class="table-wrapper" ref={tableWrapperRef}>
@@ -442,6 +484,7 @@ export const TableBlock = defineComponent<TableBlockProps>({
                   onClick={() => {
                     hoverIndex.value = [0, i]
                     selectCol()
+                    dispatchListener()
                     activeColIndex.value = i
                     activeRowIndex.value = -1
                   }}
@@ -489,6 +532,16 @@ export const TableBlock = defineComponent<TableBlockProps>({
                     >
                       <Icon icon={config.renderButton('delete_col')} />
                     </button>
+                    {canMerge.value && (
+                      <button type="button" onPointerdown={onMergeCells}>
+                        <Icon icon={config.renderButton('merge_cells')} />
+                      </button>
+                    )}
+                    {canSplit.value && (
+                      <button type="button" onPointerdown={onSplitCell}>
+                        <Icon icon={config.renderButton('split_cell')} />
+                      </button>
+                    )}
                   </div>
                 </div>
               ))}
@@ -548,6 +601,7 @@ export const TableBlock = defineComponent<TableBlockProps>({
                   onClick={() => {
                     hoverIndex.value = [i, 0]
                     selectRow()
+                    dispatchListener()
                     activeRowIndex.value = i
                     activeColIndex.value = -1
                   }}
@@ -567,6 +621,16 @@ export const TableBlock = defineComponent<TableBlockProps>({
                     >
                       <Icon icon={config.renderButton('delete_row')} />
                     </button>
+                    {canMerge.value && (
+                      <button type="button" onPointerdown={onMergeCells}>
+                        <Icon icon={config.renderButton('merge_cells')} />
+                      </button>
+                    )}
+                    {canSplit.value && (
+                      <button type="button" onPointerdown={onSplitCell}>
+                        <Icon icon={config.renderButton('split_cell')} />
+                      </button>
+                    )}
                   </div>
                 </div>
               ))}
@@ -604,6 +668,24 @@ export const TableBlock = defineComponent<TableBlockProps>({
               </table>
             </div>
 
+            {/* Drop Indicators */}
+            <div
+              data-show="false"
+              contenteditable="false"
+              data-display-type="indicator"
+              data-role="x-line-drag-handle"
+              class="handle line-handle"
+              ref={xLineHandleRef}
+            />
+            <div
+              data-show="false"
+              contenteditable="false"
+              data-display-type="indicator"
+              data-role="y-line-drag-handle"
+              class="handle line-handle"
+              ref={yLineHandleRef}
+            />
+
             <table ref={contentWrapperFunctionRef} class="children">
               <colgroup>
                 {colWidths.value.map((w, i) => (

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

@@ -7,7 +7,6 @@ import {
   selectColCommand,
   selectRowCommand,
 } from '@jvs-milkdown/preset-gfm'
-import { onMounted, onUnmounted } from 'vue'
 
 import type { CellIndex, Refs } from './types'
 
@@ -27,21 +26,25 @@ export function useDragHandlers(
   const dragRow = createDragRowHandler(refs, ctx)
   const dragCol = createDragColHandler(refs, ctx)
 
-  const onDragEnd = () => {
+  const onDragEnd = (e: DragEvent) => {
     const preview = dragPreviewRef.value
     if (!preview) return
 
     if (preview.dataset.show === 'false') return
 
+    e.preventDefault()
+    e.stopPropagation()
+
     const previewRoot = preview?.querySelector('tbody')
 
     while (previewRoot?.firstChild)
       previewRoot?.removeChild(previewRoot.firstChild)
 
     if (preview) preview.dataset.show = 'false'
+    dragInfo.value = undefined
   }
 
-  const onDrop = () => {
+  const onDrop = (e: DragEvent) => {
     const preview = dragPreviewRef.value
     if (!preview) return
     const yHandle = yLineHandleRef.value
@@ -53,10 +56,22 @@ export function useDragHandlers(
     if (!ctx) return
     if (preview.dataset.show === 'false') return
 
+    // Prevent browser default drop behavior and stop ProseMirror from handling
+    e.preventDefault()
+    e.stopPropagation()
+
     yHandle.dataset.show = 'false'
     xHandle.dataset.show = 'false'
 
-    if (info.startIndex === info.endIndex) return
+    if (info.startIndex === info.endIndex) {
+      // Clean up preview even when no move is needed
+      const previewRoot = preview?.querySelector('tbody')
+      while (previewRoot?.firstChild)
+        previewRoot?.removeChild(previewRoot.firstChild)
+      preview.dataset.show = 'false'
+      dragInfo.value = undefined
+      return
+    }
 
     const commands = ctx.get(commandsCtx)
     const payload = {
@@ -82,26 +97,24 @@ export function useDragHandlers(
       refs.hoverIndex.value = index
     }
 
+    // Clean up preview
+    const previewRoot = preview?.querySelector('tbody')
+    while (previewRoot?.firstChild)
+      previewRoot?.removeChild(previewRoot.firstChild)
+    preview.dataset.show = 'false'
+    dragInfo.value = undefined
+
     requestAnimationFrame(() => {
       ctx.get(editorViewCtx).focus()
     })
   }
   const onDragOver = createDragOverHandler(refs)
 
-  onMounted(() => {
-    window.addEventListener('dragover', onDragOver)
-    window.addEventListener('dragend', onDragEnd)
-    window.addEventListener('drop', onDrop)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('dragover', onDragOver)
-    window.removeEventListener('dragend', onDragEnd)
-    window.removeEventListener('drop', onDrop)
-  })
-
   return {
     dragRow,
     dragCol,
+    onDragOver,
+    onDrop,
+    onDragEnd,
   }
 }

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

@@ -88,7 +88,12 @@ export function recoveryStateBetweenUpdate(
   if (!node) return
   if (!view) return
   const { selection } = view.state
-  if (!(selection instanceof CellSelection)) return
+  const isCellSelection = (sel: any) =>
+    sel &&
+    typeof sel.isColSelection === 'function' &&
+    typeof sel.forEachCell === 'function'
+
+  if (!isCellSelection(selection)) return
 
   const { $from } = selection
   const table = findTable($from)