@milkdown/preset-gfm 7.4.0 → 7.5.0

package/src/node/table/schema.ts

@@ -0,0 +1,216 @@
+import { tableNodes } from '@milkdown/prose/tables'
+import { $nodeSchema } from '@milkdown/utils'
+import type { MarkdownNode } from '@milkdown/transformer'
+import type { NodeType } from '@milkdown/prose/model'
+import { withMeta } from '../../__internal__'
+
+const originalSchema = tableNodes({
+  tableGroup: 'block',
+  cellContent: 'paragraph',
+  cellAttributes: {
+    alignment: {
+      default: 'left',
+      getFromDOM: dom => (dom).style.textAlign || 'left',
+      setDOMAttr: (value, attrs) => {
+        attrs.style = `text-align: ${value || 'left'}`
+      },
+    },
+  },
+})
+
+/// Schema for table node.
+export const tableSchema = $nodeSchema('table', () => ({
+  ...originalSchema.table,
+  content: 'table_header_row table_row+',
+  disableDropCursor: true,
+  parseMarkdown: {
+    match: node => node.type === 'table',
+    runner: (state, node, type) => {
+      const align = node.align as (string | null)[]
+      const children = (node.children as MarkdownNode[]).map((x, i) => ({
+        ...x,
+        align,
+        isHeader: i === 0,
+      }))
+      state.openNode(type)
+      state.next(children)
+      state.closeNode()
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'table',
+    runner: (state, node) => {
+      const firstLine = node.content.firstChild?.content
+      if (!firstLine)
+        return
+
+      const align: (string | null)[] = []
+      firstLine.forEach((cell) => {
+        align.push(cell.attrs.alignment)
+      })
+      state.openNode('table', undefined, { align })
+      state.next(node.content)
+      state.closeNode()
+    },
+  },
+}))
+
+withMeta(tableSchema.node, {
+  displayName: 'NodeSchema<table>',
+  group: 'Table',
+})
+
+withMeta(tableSchema.ctx, {
+  displayName: 'NodeSchemaCtx<table>',
+  group: 'Table',
+})
+
+/// Schema for table header row node.
+export const tableHeaderRowSchema = $nodeSchema('table_header_row', () => ({
+  ...originalSchema.table_row,
+  disableDropCursor: true,
+  content: '(table_header)*',
+  parseDOM: [{ tag: 'tr[data-is-header]' }],
+  toDOM() {
+    return ['tr', { 'data-is-header': true }, 0]
+  },
+  parseMarkdown: {
+    match: node => Boolean(node.type === 'tableRow' && node.isHeader),
+    runner: (state, node, type) => {
+      const align = node.align as (string | null)[]
+      const children = (node.children as MarkdownNode[]).map((x, i) => ({
+        ...x,
+        align: align[i],
+        isHeader: node.isHeader,
+      }))
+      state.openNode(type)
+      state.next(children)
+      state.closeNode()
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'table_header_row',
+    runner: (state, node) => {
+      state.openNode('tableRow', undefined, { isHeader: true })
+      state.next(node.content)
+      state.closeNode()
+    },
+  },
+}))
+
+withMeta(tableHeaderRowSchema.node, {
+  displayName: 'NodeSchema<tableHeaderRow>',
+  group: 'Table',
+})
+
+withMeta(tableHeaderRowSchema.ctx, {
+  displayName: 'NodeSchemaCtx<tableHeaderRow>',
+  group: 'Table',
+})
+
+/// Schema for table row node.
+export const tableRowSchema = $nodeSchema('table_row', () => ({
+  ...originalSchema.table_row,
+  disableDropCursor: true,
+  content: '(table_cell)*',
+  parseMarkdown: {
+    match: node => node.type === 'tableRow',
+    runner: (state, node, type) => {
+      const align = node.align as (string | null)[]
+      const children = (node.children as MarkdownNode[]).map((x, i) => ({
+        ...x,
+        align: align[i],
+      }))
+      state.openNode(type)
+      state.next(children)
+      state.closeNode()
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'table_row',
+    runner: (state, node) => {
+      state.openNode('tableRow')
+      state.next(node.content)
+      state.closeNode()
+    },
+  },
+}))
+
+withMeta(tableRowSchema.node, {
+  displayName: 'NodeSchema<tableRow>',
+  group: 'Table',
+})
+
+withMeta(tableRowSchema.ctx, {
+  displayName: 'NodeSchemaCtx<tableRow>',
+  group: 'Table',
+})
+
+/// Schema for table cell node.
+export const tableCellSchema = $nodeSchema('table_cell', () => ({
+  ...originalSchema.table_cell,
+  disableDropCursor: true,
+  parseMarkdown: {
+    match: node => node.type === 'tableCell' && !node.isHeader,
+    runner: (state, node, type) => {
+      const align = node.align as string
+      state
+        .openNode(type, { alignment: align })
+        .openNode(state.schema.nodes.paragraph as NodeType)
+        .next(node.children)
+        .closeNode()
+        .closeNode()
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'table_cell',
+    runner: (state, node) => {
+      state.openNode('tableCell').next(node.content).closeNode()
+    },
+  },
+}))
+
+withMeta(tableCellSchema.node, {
+  displayName: 'NodeSchema<tableCell>',
+  group: 'Table',
+})
+
+withMeta(tableCellSchema.ctx, {
+  displayName: 'NodeSchemaCtx<tableCell>',
+  group: 'Table',
+})
+
+/// Schema for table header node.
+export const tableHeaderSchema = $nodeSchema('table_header', () => ({
+  ...originalSchema.table_header,
+  disableDropCursor: true,
+  parseMarkdown: {
+    match: node => node.type === 'tableCell' && !!node.isHeader,
+    runner: (state, node, type) => {
+      const align = node.align as string
+      state.openNode(type, { alignment: align })
+      state.openNode(state.schema.nodes.paragraph as NodeType)
+      state.next(node.children)
+      state.closeNode()
+      state.closeNode()
+    },
+  },
+  toMarkdown: {
+    match: node => node.type.name === 'table_header',
+    runner: (state, node) => {
+      state.openNode('tableCell')
+      state.next(node.content)
+      state.closeNode()
+    },
+  },
+}))
+
+withMeta(tableHeaderSchema.node, {
+  displayName: 'NodeSchema<tableHeader>',
+  group: 'Table',
+})
+
+withMeta(tableHeaderSchema.ctx, {
+  displayName: 'NodeSchemaCtx<tableHeader>',
+  group: 'Table',
+})

package/src/node/table/utils.ts

@@ -1,12 +1,12 @@
 import type { ContentNodeWithPos } from '@milkdown/prose'
-import { cloneTr, findParentNode } from '@milkdown/prose'
-import type { Node } from '@milkdown/prose/model'
+import { cloneTr, findParentNodeClosestToPos } from '@milkdown/prose'
+import type { Node, ResolvedPos } from '@milkdown/prose/model'
 import type { Selection, Transaction } from '@milkdown/prose/state'
 import type { TableRect } from '@milkdown/prose/tables'
 import { CellSelection, TableMap } from '@milkdown/prose/tables'
 
 import type { Ctx } from '@milkdown/ctx'
-import { tableCellSchema, tableHeaderSchema, tableRowSchema, tableSchema } from '.'
+import { tableCellSchema, tableHeaderRowSchema, tableHeaderSchema, tableRowSchema, tableSchema } from './schema'
 
 /// @internal
 export interface CellPos {
@@ -27,19 +27,21 @@ export function createTable(ctx: Ctx, rowsCount = 3, colsCount = 3): Node {
 
   const rows = Array(rowsCount)
     .fill(0)
-    .map((_, i) => tableRowSchema.type(ctx).create(null, i === 0 ? headerCells : cells))
+    .map((_, i) => i === 0
+      ? tableHeaderRowSchema.type(ctx).create(null, headerCells)
+      : tableRowSchema.type(ctx).create(null, cells))
 
   return tableSchema.type(ctx).create(null, rows)
 }
 
-/// Find the table node with position information for current selection.
-export function findTable(selection: Selection) {
-  return findParentNode(node => node.type.spec.tableRole === 'table')(selection)
+/// Find the table node with position information for target pos.
+export function findTable($pos: ResolvedPos) {
+  return findParentNodeClosestToPos(node => node.type.spec.tableRole === 'table')($pos)
 }
 
 /// Get cells in a column of a table.
 export function getCellsInCol(columnIndex: number, selection: Selection): CellPos[] | undefined {
-  const table = findTable(selection)
+  const table = findTable(selection.$from)
   if (!table)
     return undefined
   const map = TableMap.get(table.node)
@@ -64,7 +66,7 @@ export function getCellsInCol(columnIndex: number, selection: Selection): CellPo
 
 /// Get cells in a row of a table.
 export function getCellsInRow(rowIndex: number, selection: Selection): CellPos[] | undefined {
-  const table = findTable(selection)
+  const table = findTable(selection.$from)
   if (!table)
     return undefined
   const map = TableMap.get(table.node)
@@ -89,7 +91,7 @@ export function getCellsInRow(rowIndex: number, selection: Selection): CellPos[]
 
 /// Get all cells in a table.
 export function getAllCellsInTable(selection: Selection) {
-  const table = findTable(selection)
+  const table = findTable(selection.$from)
   if (!table)
     return
 
@@ -142,8 +144,17 @@ export function addRowWithAlignment(ctx: Ctx, tr: Transaction, { map, tableStart
 
 /// @internal
 export function selectLine(type: 'row' | 'col') {
-  return (index: number) => (tr: Transaction) => {
-    const table = findTable(tr.selection)
+  return (index: number, pos?: number) => (tr: Transaction) => {
+    pos = pos ?? tr.selection.from
+    const $pos = tr.doc.resolve(pos)
+    const $node = findParentNodeClosestToPos(node => node.type.name === 'table')($pos)
+    const table = $node
+      ? {
+          node: $node.node,
+          from: $node.start,
+        }
+      : undefined
+
     const isRowSelection = type === 'row'
     if (table) {
       const map = TableMap.get(table.node)
@@ -155,12 +166,12 @@ export function selectLine(type: 'row' | 'col') {
           isRowSelection ? map.width - 1 : index,
           table.node,
         )
-        const $lastCell = tr.doc.resolve(table.start + lastCell)
+        const $lastCell = tr.doc.resolve(table.from + lastCell)
 
         const createCellSelection = isRowSelection ? CellSelection.rowSelection : CellSelection.colSelection
 
         const firstCell = map.positionAt(isRowSelection ? index : 0, isRowSelection ? 0 : index, table.node)
-        const $firstCell = tr.doc.resolve(table.start + firstCell)
+        const $firstCell = tr.doc.resolve(table.from + firstCell)
         return cloneTr(tr.setSelection(createCellSelection($lastCell, $firstCell) as unknown as Selection))
       }
     }
@@ -407,11 +418,21 @@ function getSelectionRangeInRow(rowIndex: number, tr: Transaction) {
   return { $anchor, $head, indexes }
 }
 
+export interface MoveColParams {
+  tr: Transaction
+  origin: number
+  target: number
+  select?: boolean
+  pos?: number
+}
+
 /// If the selection is in a table,
 /// Move the columns at `origin` to `target` in current table.
 /// The `select` is true by default, which means the selection will be set to the moved column.
-export function moveCol(tr: Transaction, origin: number, target: number, select = true) {
-  const table = findTable(tr.selection)
+export function moveCol(moveColParams: MoveColParams) {
+  const { tr, origin, target, select = true, pos } = moveColParams
+  const $pos = pos != null ? tr.doc.resolve(pos) : tr.selection.$from
+  const table = findTable($pos)
   if (!table)
     return tr
 
@@ -451,11 +472,21 @@ export function moveCol(tr: Transaction, origin: number, target: number, select
   return _tr.setSelection(createCellSelection($lastCell, $firstCell))
 }
 
+export interface MoveRowParams {
+  tr: Transaction
+  origin: number
+  target: number
+  select?: boolean
+  pos?: number
+}
+
 /// If the selection is in a table,
 /// Move the rows at `origin` and `target` in current table.
 /// The `select` is true by default, which means the selection will be set to the moved row.
-export function moveRow(tr: Transaction, origin: number, target: number, select = true) {
-  const table = findTable(tr.selection)
+export function moveRow(moveRowParams: MoveRowParams) {
+  const { tr, origin, target, select = true, pos } = moveRowParams
+  const $pos = pos != null ? tr.doc.resolve(pos) : tr.selection.$from
+  const table = findTable($pos)
   if (!table)
     return tr
 

package/src/plugin/auto-insert-span-plugin.ts

@@ -0,0 +1,12 @@
+import { $prose } from '@milkdown/utils'
+import { imeSpan } from 'prosemirror-safari-ime-span'
+import { withMeta } from '../__internal__'
+
+/// This plugin is used to fix the bug of IME composing in table in Safari browser.
+/// original discussion in https://discuss.prosemirror.net/t/ime-composing-problems-on-td-or-th-element-in-safari-browser/4501
+export const autoInsertSpanPlugin = $prose(() => imeSpan)
+
+withMeta(autoInsertSpanPlugin, {
+  displayName: 'Prose<autoInsertSpanPlugin>',
+  group: 'Prose',
+})

package/src/plugin/index.ts

@@ -1,4 +1,5 @@
-export * from './auto-insert-zero-space-plugin'
+export * from './auto-insert-span-plugin'
 export * from './column-resizing-plugin'
 export * from './table-editing-plugin'
 export * from './remark-gfm-plugin'
+export * from './keep-table-align-plugin'

package/src/plugin/keep-table-align-plugin.ts

@@ -0,0 +1,60 @@
+import type { Transaction } from '@milkdown/prose/state'
+import { Plugin, PluginKey } from '@milkdown/prose/state'
+import type { Node } from '@milkdown/prose/model'
+import { $prose } from '@milkdown/utils'
+import { withMeta } from '../__internal__'
+
+const pluginKey = new PluginKey('MILKDOWN_KEEP_TABLE_ALIGN_PLUGIN')
+
+function getChildIndex(node: Node, parent: Node) {
+  let index = 0
+  parent.forEach((child, _offset, i) => {
+    if (child === node)
+      index = i
+  })
+  return index
+}
+
+export const keepTableAlignPlugin = $prose(() => {
+  return new Plugin({
+    key: pluginKey,
+    appendTransaction: (_tr, oldState, state) => {
+      let tr: Transaction | undefined
+      const check = (node: Node, pos: number) => {
+        if (!tr)
+          tr = state.tr
+
+        if (node.type.name !== 'table_cell')
+          return
+
+        const $pos = state.doc.resolve(pos)
+        const tableRow = $pos.node($pos.depth)
+        const table = $pos.node($pos.depth - 1)
+        const tableHeaderRow = table.firstChild
+        // TODO: maybe consider add a header row
+        if (!tableHeaderRow)
+          return
+
+        const index = getChildIndex(node, tableRow)
+        const headerCell = tableHeaderRow.maybeChild(index)
+        if (!headerCell)
+          return
+        const align = headerCell.attrs.alignment
+        const currentAlign = node.attrs.alignment
+        if (align === currentAlign)
+          return
+
+        tr.setNodeMarkup(pos, undefined, { ...node.attrs, alignment: align })
+      }
+      if (oldState.doc !== state.doc)
+        state.doc.descendants(check)
+
+      return tr
+    },
+  })
+})
+
+withMeta(keepTableAlignPlugin, {
+  displayName: 'Prose<keepTableAlignPlugin>',
+  group: 'Prose',
+})

package/src/plugin/table-editing-plugin.ts

@@ -3,7 +3,7 @@ import { $prose } from '@milkdown/utils'
 import { withMeta } from '../__internal__'
 
 /// This plugin is wrapping the `tableEditing` plugin from [prosemirror-tables](https://github.com/ProseMirror/prosemirror-tables).
-export const tableEditingPlugin = $prose(() => tableEditing())
+export const tableEditingPlugin = $prose(() => tableEditing({ allowTableNodeSelection: true }))
 
 withMeta(tableEditingPlugin, {
   displayName: 'Prose<tableEditingPlugin>',

package/lib/plugin/auto-insert-zero-space-plugin.d.ts

@@ -1,2 +0,0 @@
-export declare const autoInsertZeroSpaceInTablePlugin: import("@milkdown/utils").$Prose;
-//# sourceMappingURL=auto-insert-zero-space-plugin.d.ts.map

package/lib/plugin/auto-insert-zero-space-plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"auto-insert-zero-space-plugin.d.ts","sourceRoot":"","sources":["../../src/plugin/auto-insert-zero-space-plugin.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,gCAAgC,kCAuC3C,CAAA"}

package/src/plugin/auto-insert-zero-space-plugin.ts

@@ -1,55 +0,0 @@
-import { browser } from '@milkdown/prose'
-import type { Node } from '@milkdown/prose/model'
-import { isInTable } from '@milkdown/prose/tables'
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import { paragraphSchema } from '@milkdown/preset-commonmark'
-import { $prose } from '@milkdown/utils'
-import { withMeta } from '../__internal__'
-
-/// This plugin is used to fix the bug of IME composing in table in Safari browser.
-/// original discussion in https://discuss.prosemirror.net/t/ime-composing-problems-on-td-or-th-element-in-safari-browser/4501
-export const autoInsertZeroSpaceInTablePlugin = $prose((ctx) => {
-  const pluginKey = new PluginKey('MILKDOWN_AUTO_INSERT_ZERO_SPACE')
-
-  const isParagraph = (node: Node) => node.type === paragraphSchema.type(ctx)
-
-  const isEmptyParagraph = (node: Node) => isParagraph(node) && node.nodeSize === 2
-
-  return new Plugin({
-    key: pluginKey,
-    props: {
-      handleDOMEvents: {
-        compositionstart(view) {
-          const { state, dispatch } = view
-          const { tr, selection } = state
-          const { $from } = selection
-          if (browser.safari && isInTable(state) && selection.empty && isEmptyParagraph($from.parent))
-            dispatch(tr.insertText('\u2060', $from.start()))
-
-          return false
-        },
-        compositionend(view) {
-          const { state, dispatch } = view
-          const { tr, selection } = state
-          const { $from } = selection
-
-          if (
-            browser.safari
-            && isInTable(state)
-            && selection.empty
-            && isParagraph($from.parent)
-            && $from.parent.textContent.startsWith('\u2060')
-          )
-            dispatch(tr.delete($from.start(), $from.start() + 1))
-
-          return false
-        },
-      },
-    },
-  })
-})
-
-withMeta(autoInsertZeroSpaceInTablePlugin, {
-  displayName: 'Prose<autoInsertZeroSpaceInTablePlugin>',
-  group: 'Prose',
-})