From 56af3f5acfc1566dac0149e7725a9c2b3ab053d6 Mon Sep 17 00:00:00 2001
From: Mirone <Saul-Mirone@outlook.com>
Date: Sun, 25 Aug 2024 17:26:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20optimize=20table=20dnd?=
 =?UTF-8?q?=20behavior=20(#1487)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 optimize table dnd behavior

* chore: fix

* chore: fix drop dnd

* chore: fix
---
 .changeset/polite-dancers-mix.md              |  7 +++++++
 .../components/src/table-block/view/drag.ts   | 20 +++++++++++++++----
 .../src/table-block/view/operation.ts         |  6 ++++++
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/polite-dancers-mix.md

diff --git a/.changeset/polite-dancers-mix.md b/.changeset/polite-dancers-mix.md
new file mode 100644
index 00000000000..1af1002754e
--- /dev/null
+++ 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
index d53b4c0460d..b5e7f7c3966 100644
--- 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
index 8c8d5fa7c75..7b292ece5d1 100644
--- 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 {