feat: 🎸 optimize table dnd behavior (#1487)

* feat: 🎸 optimize table dnd behavior * chore: fix * chore: fix drop dnd * chore: fix
Milkdown · Aug 25, 2024 · 56af3f5 · 56af3f5
1 parent b9e1ce5
commit 56af3f5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/.changeset/polite-dancers-mix.md b/.changeset/polite-dancers-mix.md
@@ -0,0 +1,7 @@
+---
+"@milkdown/components": patch
+"@milkdown/crepe": patch
+"@milkdown/kit": patch
+---
+
+Optimize table drag behavior
diff --git a/packages/components/src/table-block/view/drag.ts b/packages/components/src/table-block/view/drag.ts
@@ -243,15 +243,19 @@ export function createDragOverHandler(refs: Refs): (e: DragEvent) => void {
       const children = Array.from(firstRow.children)
       const col = children.find((col, index) => {
         const boundary = col.getBoundingClientRect()
-        const boundaryLeft = boundary.left + wrapperOffsetLeft - left
-        const boundaryRight = boundary.right + wrapperOffsetLeft - left
+        let boundaryLeft = boundary.left + wrapperOffsetLeft - left
+        let boundaryRight = boundary.right + wrapperOffsetLeft - left
         if (direction === 'right') {
+          boundaryLeft = boundaryLeft + boundary.width / 2
+          boundaryRight = boundaryRight + boundary.width / 2
           if (boundaryLeft <= previewRight && boundaryRight >= previewRight)
             return true
           if (index === firstRow.children.length - 1 && previewRight > boundaryRight)
             return true
         }
         else {
+          boundaryLeft = boundaryLeft - boundary.width / 2
+          boundaryRight = boundaryRight - boundary.width / 2
           if (boundaryLeft <= previewLeft && boundaryRight >= previewLeft)
             return true
           if (index === 0 && previewLeft < boundaryLeft)
@@ -303,15 +307,19 @@ export function createDragOverHandler(refs: Refs): (e: DragEvent) => void {
       const rows = Array.from(contentRoot.querySelectorAll('tr'))
       const row = rows.find((row, index) => {
         const boundary = row.getBoundingClientRect()
-        const boundaryTop = boundary.top + wrapperOffsetTop - top
-        const boundaryBottom = boundary.bottom + wrapperOffsetTop - top
+        let boundaryTop = boundary.top + wrapperOffsetTop - top
+        let boundaryBottom = boundary.bottom + wrapperOffsetTop - top
         if (direction === 'down') {
+          boundaryTop = boundaryTop + boundary.height / 2
+          boundaryBottom = boundaryBottom + boundary.height / 2
           if (boundaryTop <= previewBottom && boundaryBottom >= previewBottom)
             return true
           if (index === rows.length - 1 && previewBottom > boundaryBottom)
             return true
         }
         else {
+          boundaryTop = boundaryTop - boundary.height / 2
+          boundaryBottom = boundaryBottom - boundary.height / 2
           if (boundaryTop <= previewTop && boundaryBottom >= previewTop)
             return true
           if (index === 0 && previewTop < boundaryTop)
@@ -436,6 +444,10 @@ export function useDragHandlers(
           index,
         })
       }
+
+      requestAnimationFrame(() => {
+        ctx.get(editorViewCtx).focus()
+      })
     }
     const onDragOver = createDragOverHandler(refs)
 

diff --git a/packages/components/src/table-block/view/operation.ts b/packages/components/src/table-block/view/operation.ts
@@ -118,6 +118,9 @@ export function useOperation(refs: Refs, ctx?: Ctx, getPos?: () => number | unde
     e.stopPropagation()
     const commands = ctx.get(commandsCtx)
     commands.call(deleteSelectedCellsCommand.key)
+    requestAnimationFrame(() => {
+      ctx.get(editorViewCtx).focus()
+    })
   }, [])
 
   const onAlign = useCallback((direction: 'left' | 'center' | 'right') =>
@@ -132,6 +135,9 @@ export function useOperation(refs: Refs, ctx?: Ctx, getPos?: () => number | unde
       e.stopPropagation()
       const commands = ctx.get(commandsCtx)
       commands.call(setAlignCommand.key, direction)
+      requestAnimationFrame(() => {
+        ctx.get(editorViewCtx).focus()
+      })
     }, [])
 
   return {