[pull] main from Milkdown:main

.github/renovate.json

@@ -1,6 +1,5 @@
 {
   "extends": ["config:base", ":preserveSemverRanges", "group:all"],
-  "postUpdateOptions": [
-    "pnpmDedupe"
-  ]
+  "postUpdateOptions": ["pnpmDedupe"],
+  "ignoreDeps": ["mermaid"]
 }

package.json

@@ -64,7 +64,7 @@
     "eslint-plugin-tailwindcss": "^3.15.1",
     "git-cz": "^4.7.6",
     "husky": "^9.0.10",
-    "jsdom": "^24.0.0",
+    "jsdom": "^25.0.0",
     "lint-staged": "^15.0.0",
     "nx": "19.6.2",
     "pathe": "^1.0.0",

packages/components/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @milkdown/components
 
+## 7.5.5
+
+### Patch Changes
+
+- 56af3f5: Optimize table drag behavior
+
+## 7.5.4
+
+### Patch Changes
+
+- 705c263: Fix plugin block bugs
+
 ## 7.5.3
 
 ### Patch Changes

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/components",
   "type": "module",
-  "version": "7.5.3",
+  "version": "7.5.5",
   "license": "MIT",
   "repository": {
     "type": "git",

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)
 

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 {

packages/components/src/table-block/view/utils.ts

@@ -20,31 +20,37 @@ export function findNodeIndex(parent: Node, child: Node) {
 export function findPointerIndex(event: PointerEvent, view?: EditorView): CellIndex | undefined {
   if (!view)
     return
-  const posAtCoords = view.posAtCoords({ left: event.clientX, top: event.clientY })
-  if (!posAtCoords)
-    return
-  const pos = posAtCoords?.inside
-  if (pos == null || pos < 0)
-    return
 
-  const $pos = view.state.doc.resolve(pos)
-  const node = view.state.doc.nodeAt(pos)
-  if (!node)
-    return
+  try {
+    const posAtCoords = view.posAtCoords({ left: event.clientX, top: event.clientY })
+    if (!posAtCoords)
+      return
+    const pos = posAtCoords?.inside
+    if (pos == null || pos < 0)
+      return
 
-  const cellType = ['table_cell', 'table_header']
-  const rowType = ['table_row', 'table_header_row']
+    const $pos = view.state.doc.resolve(pos)
+    const node = view.state.doc.nodeAt(pos)
+    if (!node)
+      return
 
-  const cell = cellType.includes(node.type.name) ? node : findParent(node => cellType.includes(node.type.name))($pos)?.node
-  const row = findParent(node => rowType.includes(node.type.name))($pos)?.node
-  const table = findParent(node => node.type.name === 'table')($pos)?.node
-  if (!cell || !row || !table)
-    return
+    const cellType = ['table_cell', 'table_header']
+    const rowType = ['table_row', 'table_header_row']
+
+    const cell = cellType.includes(node.type.name) ? node : findParent(node => cellType.includes(node.type.name))($pos)?.node
+    const row = findParent(node => rowType.includes(node.type.name))($pos)?.node
+    const table = findParent(node => node.type.name === 'table')($pos)?.node
+    if (!cell || !row || !table)
+      return
 
-  const columnIndex = findNodeIndex(row, cell)
-  const rowIndex = findNodeIndex(table, row)
+    const columnIndex = findNodeIndex(row, cell)
+    const rowIndex = findNodeIndex(table, row)
 
-  return [rowIndex, columnIndex]
+    return [rowIndex, columnIndex]
+  }
+  catch {
+    return undefined
+  }
 }
 
 export function getRelatedDOM(contentWrapperRef: Ref<HTMLDivElement>, [rowIndex, columnIndex]: CellIndex) {

packages/crepe/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @milkdown/crepe
 
+## 7.5.5
+
+### Patch Changes
+
+- 56af3f5: Optimize table drag behavior
+- Updated dependencies [56af3f5]
+  - @milkdown/kit@7.5.5
+
+## 7.5.4
+
+### Patch Changes
+
+- 705c263: Fix plugin block bugs
+- Updated dependencies [705c263]
+  - @milkdown/kit@7.5.4
+
 ## 7.5.3
 
 ### Patch Changes

packages/crepe/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/crepe",
   "type": "module",
-  "version": "7.5.3",
+  "version": "7.5.5",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/crepe/src/feature/block-edit/handle/index.ts

@@ -1,10 +1,11 @@
 import type { PluginView } from '@milkdown/kit/prose/state'
 import { TextSelection } from '@milkdown/kit/prose/state'
-import { BlockProvider, block } from '@milkdown/kit/plugin/block'
+import { BlockProvider, block, blockConfig } from '@milkdown/kit/plugin/block'
 import type { Ctx } from '@milkdown/kit/ctx'
 import type { AtomicoThis } from 'atomico/types/dom'
 import { editorViewCtx } from '@milkdown/kit/core'
 import { paragraphSchema } from '@milkdown/kit/preset/commonmark'
+import { findParent } from '@milkdown/kit/prose'
 import { menuAPI } from '../menu'
 import { defIfNotExists } from '../../../utils'
 import type { BlockEditFeatureConfig } from '../index'
@@ -28,6 +29,9 @@ export class BlockHandleView implements PluginView {
       content,
       getOffset: () => 16,
       getPlacement: ({ active, blockDom }) => {
+        if (active.node.type.name === 'heading')
+          return 'left'
+
         let totalDescendant = 0
         active.node.descendants((node) => {
           totalDescendant += node.childCount
@@ -40,7 +44,7 @@ export class BlockHandleView implements PluginView {
         const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0
         const height = domRect.height - paddingTop - paddingBottom
         const handleHeight = handleRect.height
-        return totalDescendant > 2 || handleHeight * 2 < height ? 'left-start' : 'left'
+        return totalDescendant > 2 || handleHeight < height ? 'left-start' : 'left'
       },
     })
     this.update()
@@ -79,6 +83,15 @@ export class BlockHandleView implements PluginView {
 
 defIfNotExists('milkdown-block-handle', BlockHandleElement)
 export function configureBlockHandle(ctx: Ctx, config?: BlockEditFeatureConfig) {
+  ctx.set(blockConfig.key, {
+    filterNodes: (pos) => {
+      const filter = findParent(node => ['table', 'blockquote'].includes(node.type.name))(pos)
+      if (filter)
+        return false
+
+      return true
+    },
+  })
   ctx.set(block.key, {
     view: () => new BlockHandleView(ctx, config),
   })

packages/crepe/src/theme/common/block-edit.css

@@ -2,6 +2,7 @@
   milkdown-block-handle {
     &[data-show='false'] {
       opacity: 0;
+      pointer-events: none;
     }
     transition: all 0.2s;
     position: absolute;

packages/kit/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @milkdown/kit
 
+## 7.5.5
+
+### Patch Changes
+
+- 56af3f5: Optimize table drag behavior
+- Updated dependencies [56af3f5]
+  - @milkdown/components@7.5.5
+
+## 7.5.4
+
+### Patch Changes
+
+- 705c263: Fix plugin block bugs
+- Updated dependencies [705c263]
+  - @milkdown/plugin-block@7.5.4
+  - @milkdown/components@7.5.4
+
 ## 7.5.3
 
 ### Patch Changes

packages/kit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/kit",
   "type": "module",
-  "version": "7.5.3",
+  "version": "7.5.5",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/plugins/plugin-block/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @milkdown/plugin-block
 
+## 7.5.4
+
+### Patch Changes
+
+- 705c263: Fix plugin block bugs
+
 ## 7.5.0
 
 ### Minor Changes

packages/plugins/plugin-block/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@milkdown/plugin-block",
   "type": "module",
-  "version": "7.5.0",
+  "version": "7.5.4",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/plugins/plugin-block/src/__internal__/select-node-by-dom.ts

@@ -8,39 +8,44 @@ export function selectRootNodeByDom(view: EditorView, coords: { x: number, y: nu
   if (!root)
     return null
 
-  const pos = view.posAtCoords({
-    left: coords.x,
-    top: coords.y,
-  })?.inside
-  if (pos == null || pos < 0)
-    return null
-
-  let $pos = view.state.doc.resolve(pos)
-  let node = view.state.doc.nodeAt(pos)
-  let element = view.nodeDOM(pos) as HTMLElement | null
-
-  const filter = (needLookup: boolean) => {
-    const checkDepth = $pos.depth >= 1 && $pos.index($pos.depth) === 0
-    const shouldLookUp = needLookup || checkDepth
-
-    if (!shouldLookUp)
-      return
-
-    const ancestorPos = $pos.before($pos.depth)
-    node = view.state.doc.nodeAt(ancestorPos)
-    element = view.nodeDOM(ancestorPos) as HTMLElement | null
-    $pos = view.state.doc.resolve(ancestorPos)
-
-    if (!filterNodes($pos, node!))
-      filter(true)
+  try {
+    const pos = view.posAtCoords({
+      left: coords.x,
+      top: coords.y,
+    })?.inside
+    if (pos == null || pos < 0)
+      return null
+
+    let $pos = view.state.doc.resolve(pos)
+    let node = view.state.doc.nodeAt(pos)
+    let element = view.nodeDOM(pos) as HTMLElement | null
+
+    const filter = (needLookup: boolean) => {
+      const checkDepth = $pos.depth >= 1 && $pos.index($pos.depth) === 0
+      const shouldLookUp = needLookup || checkDepth
+
+      if (!shouldLookUp)
+        return
+
+      const ancestorPos = $pos.before($pos.depth)
+      node = view.state.doc.nodeAt(ancestorPos)
+      element = view.nodeDOM(ancestorPos) as HTMLElement | null
+      $pos = view.state.doc.resolve(ancestorPos)
+
+      if (!filterNodes($pos, node!))
+        filter(true)
+    }
+
+    // If filterNodes returns false, we should look up the parent node.
+    const filterResult = filterNodes($pos, node!)
+    filter(!filterResult)
+
+    if (!element || !node)
+      return null
+
+    return { node, $pos, el: element }
   }
-
-  // If filterNodes returns false, we should look up the parent node.
-  const filterResult = filterNodes($pos, node!)
-  filter(!filterResult)
-
-  if (!element || !node)
+  catch {
     return null
-
-  return { node, $pos, el: element }
+  }
 }