fix: 🐛 table issues (#1405)

e2e/package.json

@@ -31,6 +31,7 @@
     "@milkdown/ctx": "workspace:*",
     "@milkdown/plugin-automd": "workspace:*",
     "@milkdown/plugin-clipboard": "workspace:*",
+    "@milkdown/plugin-cursor": "workspace:*",
     "@milkdown/plugin-emoji": "workspace:*",
     "@milkdown/plugin-history": "workspace:*",
     "@milkdown/plugin-listener": "workspace:*",

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

@@ -19,18 +19,25 @@ export function selectRootNodeByDom(view: EditorView, coords: { x: number, y: nu
   let node = view.state.doc.nodeAt(pos)
   let element = view.nodeDOM(pos) as HTMLElement | null
 
-  const filter = () => {
-    if ($pos.depth >= 1 && $pos.index($pos.depth) === 0) {
-      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()
-    }
+  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)
   }
 
-  filter()
+  // If filterNodes returns false, we should look up the parent node.
+  const filterResult = filterNodes($pos, node!)
+  filter(!filterResult)
 
   if (!element || !node)
     return null

packages/plugins/plugin-block/src/block-config.ts

@@ -1,15 +1,16 @@
 import type { Node, ResolvedPos } from '@milkdown/prose/model'
 import { $ctx } from '@milkdown/utils'
 
+import { findParent } from '@milkdown/prose'
 import { withMeta } from './__internal__/with-meta'
 
 /// @internal
 export type FilterNodes = (pos: ResolvedPos, node: Node) => boolean
 
 /// @internal
-export const defaultNodeFilter: FilterNodes = (_pos, node) => {
-  const { name } = node.type
-  if (name.startsWith('table') && name !== 'table')
+export const defaultNodeFilter: FilterNodes = (pos) => {
+  const table = findParent(node => node.type.name === 'table')(pos)
+  if (table)
     return false
 
   return true

packages/plugins/plugin-block/src/block-plugin.ts

@@ -33,8 +33,8 @@ export const blockPlugin = $prose((ctx) => {
     props: {
       ...spec.props,
       handleDOMEvents: {
-        drop: (view, event) => {
-          return service.dropCallback(view, event)
+        drop: (view) => {
+          return service.dropCallback(view)
         },
         pointermove: (view, event) => {
           return service.mousemoveCallback(view, event)

packages/plugins/plugin-block/src/block-service.ts

@@ -8,7 +8,6 @@ import throttle from 'lodash.throttle'
 
 import type { FilterNodes } from './block-config'
 import { blockConfig } from './block-config'
-import { removePossibleTable } from './__internal__/remove-possible-table'
 import { selectRootNodeByDom } from './__internal__/select-node-by-dom'
 import { serializeForClipboard } from './__internal__/serialize-for-clipboard'
 import type { ActiveNode } from './types'
@@ -254,19 +253,9 @@ export class BlockService {
   }
 
   /// @internal
-  dropCallback = (view: EditorView, event: DragEvent) => {
-    const tr = removePossibleTable(view, event)
-
+  dropCallback = (view: EditorView) => {
     this.#dragEnd(view)
 
-    if (tr) {
-      view.dispatch(tr)
-
-      event.preventDefault()
-
-      return true
-    }
-
     return false
   }
 

packages/plugins/preset-gfm/src/composed/commands.ts

@@ -1,11 +1,11 @@
 import { toggleStrikethroughCommand } from '../mark'
-import { addColAfterCommand, addColBeforeCommand, addRowAfterCommand, addRowBeforeCommand, breakTableCommand, deleteSelectedCellsCommand, goToNextTableCellCommand, goToPrevTableCellCommand, insertTableCommand, moveColCommand, moveRowCommand, selectColCommand, selectRowCommand, selectTableCommand, setAlignCommand } from '../node'
+import { addColAfterCommand, addColBeforeCommand, addRowAfterCommand, addRowBeforeCommand, deleteSelectedCellsCommand, exitTable, goToNextTableCellCommand, goToPrevTableCellCommand, insertTableCommand, moveColCommand, moveRowCommand, selectColCommand, selectRowCommand, selectTableCommand, setAlignCommand } from '../node'
 
 /// @internal
 export const commands = [
   goToNextTableCellCommand,
   goToPrevTableCellCommand,
-  breakTableCommand,
+  exitTable,
   insertTableCommand,
   moveRowCommand,
   moveColCommand,

packages/plugins/preset-gfm/src/composed/plugins.ts

@@ -1,15 +1,15 @@
 import type { MilkdownPlugin } from '@milkdown/ctx'
 import {
   autoInsertSpanPlugin,
-  columnResizingPlugin,
+  keepTableAlignPlugin,
   remarkGFMPlugin,
   tableEditingPlugin,
 } from '../plugin'
 
 /// @internal
 export const plugins: MilkdownPlugin[] = [
+  keepTableAlignPlugin,
   autoInsertSpanPlugin,
   remarkGFMPlugin,
-  columnResizingPlugin,
   tableEditingPlugin,
 ].flat()

packages/plugins/preset-gfm/src/composed/schema.ts

@@ -1,12 +1,22 @@
 import type { MilkdownPlugin } from '@milkdown/ctx'
 import { strikethroughAttr, strikethroughSchema } from '../mark'
-import { extendListItemSchemaForTask, footnoteDefinitionSchema, footnoteReferenceSchema, tableCellSchema, tableHeaderSchema, tableRowSchema, tableSchema } from '../node'
+import {
+  extendListItemSchemaForTask,
+  footnoteDefinitionSchema,
+  footnoteReferenceSchema,
+  tableCellSchema,
+  tableHeaderRowSchema,
+  tableHeaderSchema,
+  tableRowSchema,
+  tableSchema,
+} from '../node'
 
 /// @internal
 export const schema: MilkdownPlugin[] = [
   extendListItemSchemaForTask,
 
   tableSchema,
+  tableHeaderRowSchema,
   tableRowSchema,
   tableHeaderSchema,
   tableCellSchema,

packages/plugins/preset-gfm/src/index.ts

@@ -6,4 +6,4 @@ export * from './plugin'
 export * from './composed'
 
 /// The GFM preset, includes all the plugins.
-export const gfm = [schema, inputRules, markInputRules, keymap, plugins, commands].flat()
+export const gfm = [schema, inputRules, markInputRules, keymap, commands, plugins].flat()