@jvs-milkdown/components 1.1.5 → 1.1.6

package/src/link-tooltip/edit/component.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { defineComponent, ref, watch, type Ref, h } from 'vue'
 
 import type { LinkTooltipConfig } from '../slices'
@@ -40,15 +41,30 @@ export const EditLink = defineComponent<EditLinkProps>({
       link.value = value
     })
 
+    const isValidUrl = (url: string) => {
+      if (!url) return false
+      const trimmedUrl = url.trim()
+      // Accept standard http/https links, relative links, anchors, or mailto
+      return /^(https?:\/\/|\/|\.\.?\/|mailto:|#|[a-zA-Z0-9-]+\.[a-zA-Z]+)/i.test(
+        trimmedUrl
+      )
+    }
+
     const onConfirmEdit = () => {
-      onConfirm(link.value)
+      const val = link.value?.trim() ?? ''
+      if (isValidUrl(val)) {
+        onConfirm(val)
+      }
     }
 
     const onKeydown = (e: KeyboardEvent) => {
       e.stopPropagation()
       if (e.key === 'Enter') {
         e.preventDefault()
-        onConfirmEdit()
+        const val = link.value?.trim() ?? ''
+        if (isValidUrl(val)) {
+          onConfirmEdit()
+        }
       }
       if (e.key === 'Escape') {
         e.preventDefault()
@@ -70,9 +86,17 @@ export const EditLink = defineComponent<EditLinkProps>({
           />
           {link.value ? (
             <Icon
-              class="button confirm"
+              class={clsx(
+                'button confirm',
+                !isValidUrl(link.value) && 'disabled'
+              )}
               icon={config.value.confirmButton}
               onClick={onConfirmEdit}
+              style={
+                !isValidUrl(link.value)
+                  ? { opacity: 0.5, cursor: 'not-allowed' }
+                  : undefined
+              }
             />
           ) : null}
         </div>

package/src/table-block/dnd/create-drag-handler.ts

@@ -73,7 +73,11 @@ function handleDrag(
   if (!view?.editable) return
 
   event.stopPropagation()
-  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    // Required by some browsers to properly initiate the drag; empty string might be rejected
+    event.dataTransfer.setData('text/plain', 'milkdown-table-drag')
+  }
 
   const context = prepareDndContext(refs)
 

package/src/table-block/dnd/drag-over-handler.ts

@@ -8,7 +8,7 @@ import { getDragOverColumn, getDragOverRow } from './calc-drag-over'
 import { prepareDndContext } from './prepare-dnd-context'
 
 export function createDragOverHandler(refs: Refs): (e: DragEvent) => void {
-  return throttle((e: DragEvent) => {
+  const updatePosition = throttle((e: DragEvent) => {
     const context = prepareDndContext(refs)
     if (!context) return
     const { preview, content, contentRoot, xHandle, yHandle } = context
@@ -110,4 +110,32 @@ export function createDragOverHandler(refs: Refs): (e: DragEvent) => void {
       }
     }
   }, 20)
+
+  return (e: DragEvent) => {
+    const context = prepareDndContext(refs)
+    if (!context) return
+    const { preview, contentRoot } = context
+    if (preview.dataset.show === 'false') return
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    // SYNCHRONOUSLY update the endIndex so that rapid drops don't miss the final position
+    const info = refs.dragInfo.value
+    if (info) {
+      if (info.type === 'col') {
+        const dragOverColumn = getDragOverColumn(contentRoot, e.clientX)
+        if (dragOverColumn) {
+          info.endIndex = dragOverColumn[1]
+        }
+      } else if (info.type === 'row') {
+        const dragOverRow = getDragOverRow(contentRoot, e.clientY)
+        if (dragOverRow) {
+          info.endIndex = dragOverRow[1]
+        }
+      }
+    }
+
+    updatePosition(e)
+  }
 }

package/src/table-block/dnd/preview.ts

@@ -9,9 +9,9 @@ export function renderPreview(
   tableContent: HTMLElement,
   index: number
 ) {
-  const { width: tableWidth, height: tableHeight } = tableContent
-    .querySelector('tbody')!
-    .getBoundingClientRect()
+  const tableBodyOrContent = tableContent.querySelector('tbody') || tableContent
+  const { width: tableWidth, height: tableHeight } =
+    tableBodyOrContent.getBoundingClientRect()
   if (axis === 'y') {
     const rows = tableContent.querySelectorAll('tr')
     const row = rows[index]

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)