@milkdown/preset-gfm 7.15.0 → 7.15.2

package/src/node/table/command.ts

@@ -112,11 +112,20 @@ export const moveRowCommand = $command(
     ({ from, to, pos }: { from?: number; to?: number; pos?: number } = {}) =>
     (state, dispatch) => {
       const { tr } = state
-      const result = dispatch?.(
-        moveRow({ tr, origin: from ?? 0, target: to ?? 0, pos, select: true })
-      )
-
-      return Boolean(result)
+      if (
+        moveRow({
+          tr,
+          origin: from ?? 0,
+          target: to ?? 0,
+          pos: pos ?? state.selection.from,
+          select: true,
+        })
+      ) {
+        dispatch?.(tr)
+        return true
+      }
+
+      return false
     }
 )
 
@@ -133,11 +142,20 @@ export const moveColCommand = $command(
     ({ from, to, pos }: { from?: number; to?: number; pos?: number } = {}) =>
     (state, dispatch) => {
       const { tr } = state
-      const result = dispatch?.(
-        moveCol({ tr, origin: from ?? 0, target: to ?? 0, pos, select: true })
-      )
-
-      return Boolean(result)
+      if (
+        moveCol({
+          tr,
+          origin: from ?? 0,
+          target: to ?? 0,
+          pos: pos ?? state.selection.from,
+          select: true,
+        })
+      ) {
+        dispatch?.(tr)
+        return true
+      }
+
+      return false
     }
 )
 

package/src/node/table/utils/add-row-with-alignment.ts

@@ -0,0 +1,32 @@
+import type { Ctx } from '@milkdown/ctx'
+import type { Node } from '@milkdown/prose/model'
+import type { Transaction } from '@milkdown/prose/state'
+import type { TableRect } from '@milkdown/prose/tables'
+
+import { tableCellSchema, tableRowSchema } from '../schema'
+
+/// @internal
+export function addRowWithAlignment(
+  ctx: Ctx,
+  tr: Transaction,
+  { map, tableStart, table }: TableRect,
+  row: number
+) {
+  const rowPos = Array(row)
+    .fill(0)
+    .reduce((acc, _, i) => {
+      return acc + table.child(i).nodeSize
+    }, tableStart)
+
+  const cells = Array(map.width)
+    .fill(0)
+    .map((_, col) => {
+      const headerCol = table.nodeAt(map.map[col] as number)
+      return tableCellSchema
+        .type(ctx)
+        .createAndFill({ alignment: headerCol?.attrs.alignment }) as Node
+    })
+
+  tr.insert(rowPos, tableRowSchema.type(ctx).create(null, cells))
+  return tr
+}

package/src/node/table/utils/convert-rows-to-table.ts

@@ -0,0 +1,43 @@
+import type { Node } from '@milkdown/prose/model'
+
+import { TableMap } from '@milkdown/prose/tables'
+
+/// @internal
+///
+/// Convert an array of rows to a table node.
+export function convertRowsToTable(
+  tableNode: Node,
+  arrayOfNodes: (Node | null)[][]
+) {
+  const rowsPM = []
+  const map = TableMap.get(tableNode)
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    const row = tableNode.child(rowIndex)
+    const rowCells = []
+
+    for (let colIndex = 0; colIndex < map.width; colIndex++) {
+      if (!arrayOfNodes[rowIndex]![colIndex]) continue
+
+      const cellPos = map.map[rowIndex * map.width + colIndex]!
+
+      const cell = arrayOfNodes[rowIndex]![colIndex]!
+      const oldCell = tableNode.nodeAt(cellPos)!
+      const newCell = oldCell.type.createChecked(
+        Object.assign({}, cell.attrs),
+        cell.content,
+        cell.marks
+      )
+      rowCells.push(newCell)
+    }
+
+    rowsPM.push(row.type.createChecked(row.attrs, rowCells, row.marks))
+  }
+
+  const newTable = tableNode.type.createChecked(
+    tableNode.attrs,
+    rowsPM,
+    tableNode.marks
+  )
+
+  return newTable
+}

package/src/node/table/utils/convert-table-to-rows.ts

@@ -0,0 +1,65 @@
+import type { Node } from '@milkdown/prose/model'
+
+import { TableMap } from '@milkdown/prose/tables'
+
+/// @internal
+///
+/// This function will transform the table node into a matrix of rows and columns
+/// respecting merged cells, for example this table:
+///
+/// ```
+/// ┌──────┬──────┬─────────────┐
+/// │  A1  │  B1  │     C1      │
+/// ├──────┼──────┴──────┬──────┤
+/// │  A2  │     B2      │      │
+/// ├──────┼─────────────┤  D1  │
+/// │  A3  │  B3  │  C3  │      │
+/// └──────┴──────┴──────┴──────┘
+/// ```
+///
+/// will be converted to the below:
+///
+/// ```javascript
+/// [
+///   [A1, B1, C1, null],
+///   [A2, B2, null, D1],
+///   [A3, B3, C3, null],
+/// ]
+/// ```
+export function convertTableToRows(tableNode: Node): (Node | null)[][] {
+  const map = TableMap.get(tableNode)
+  const rows: (Node | null)[][] = []
+  const rowCount = map.height
+  const colCount = map.width
+  for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+    const row: (Node | null)[] = []
+    for (let colIndex = 0; colIndex < colCount; colIndex++) {
+      let cellIndex = rowIndex * colCount + colIndex
+      let cellPos = map.map[cellIndex]
+      if (rowIndex > 0) {
+        const topCellIndex = cellIndex - colCount
+        const topCellPos = map.map[topCellIndex]
+        if (cellPos === topCellPos) {
+          row.push(null)
+          continue
+        }
+      }
+      if (colIndex > 0) {
+        const leftCellIndex = cellIndex - 1
+        const leftCellPos = map.map[leftCellIndex]
+        if (cellPos === leftCellPos) {
+          row.push(null)
+          continue
+        }
+      }
+      if (!cellPos) {
+        row.push(null)
+      } else {
+        row.push(tableNode.nodeAt(cellPos))
+      }
+    }
+    rows.push(row)
+  }
+
+  return rows
+}

package/src/node/table/utils/create-table.ts

@@ -0,0 +1,31 @@
+import type { Ctx } from '@milkdown/ctx'
+import type { Node } from '@milkdown/prose/model'
+
+import {
+  tableCellSchema,
+  tableHeaderRowSchema,
+  tableHeaderSchema,
+  tableRowSchema,
+  tableSchema,
+} from '../schema'
+
+/// @internal
+export function createTable(ctx: Ctx, rowsCount = 3, colsCount = 3): Node {
+  const cells = Array(colsCount)
+    .fill(0)
+    .map(() => tableCellSchema.type(ctx).createAndFill()!)
+
+  const headerCells = Array(colsCount)
+    .fill(0)
+    .map(() => tableHeaderSchema.type(ctx).createAndFill()!)
+
+  const rows = Array(rowsCount)
+    .fill(0)
+    .map((_, i) =>
+      i === 0
+        ? tableHeaderRowSchema.type(ctx).create(null, headerCells)
+        : tableRowSchema.type(ctx).create(null, cells)
+    )
+
+  return tableSchema.type(ctx).create(null, rows)
+}

package/src/node/table/utils/find-table.ts

@@ -0,0 +1,10 @@
+import type { ResolvedPos } from '@milkdown/prose/model'
+
+import { findParentNodeClosestToPos } from '@milkdown/prose'
+
+/// Find the table node with position information for target pos.
+export function findTable($pos: ResolvedPos) {
+  return findParentNodeClosestToPos(
+    (node) => node.type.spec.tableRole === 'table'
+  )($pos)
+}

package/src/node/table/utils/get-all-cells-in-table.ts

@@ -0,0 +1,24 @@
+import type { Selection } from '@milkdown/prose/state'
+
+import { TableMap } from '@milkdown/prose/tables'
+
+import { findTable } from './find-table'
+
+/// Get all cells in a table.
+export function getAllCellsInTable(selection: Selection) {
+  const table = findTable(selection.$from)
+  if (!table) return
+
+  const map = TableMap.get(table.node)
+  const cells = map.cellsInRect({
+    left: 0,
+    right: map.width,
+    top: 0,
+    bottom: map.height,
+  })
+  return cells.map((nodePos) => {
+    const node = table.node.nodeAt(nodePos)
+    const pos = nodePos + table.start
+    return { pos, start: pos + 1, node }
+  })
+}

package/src/node/table/utils/get-cells-in-col.ts

@@ -0,0 +1,35 @@
+import type { Selection } from '@milkdown/prose/state'
+
+import { TableMap } from '@milkdown/prose/tables'
+
+import type { CellPos } from './types'
+
+import { findTable } from './find-table'
+
+/// Get cells in a column of a table.
+export function getCellsInCol(
+  columnIndexes: number | number[],
+  selection: Selection
+): CellPos[] | undefined {
+  const table = findTable(selection.$from)
+  if (!table) return undefined
+
+  const map = TableMap.get(table.node)
+  const indexes = Array.isArray(columnIndexes) ? columnIndexes : [columnIndexes]
+
+  return indexes
+    .filter((index) => index >= 0 && index <= map.width - 1)
+    .flatMap((index) => {
+      const cells = map.cellsInRect({
+        left: index,
+        right: index + 1,
+        top: 0,
+        bottom: map.height,
+      })
+      return cells.map((nodePos) => {
+        const node = table.node.nodeAt(nodePos)!
+        const pos = nodePos + table.start
+        return { pos, start: pos + 1, node, depth: table.depth + 2 }
+      })
+    })
+}

package/src/node/table/utils/get-cells-in-row.ts

@@ -0,0 +1,37 @@
+import type { Selection } from '@milkdown/prose/state'
+
+import { TableMap } from '@milkdown/prose/tables'
+
+import type { CellPos } from './types'
+
+import { findTable } from './find-table'
+
+/// Get cells in a row of a table.
+export function getCellsInRow(
+  rowIndex: number | number[],
+  selection: Selection
+): CellPos[] | undefined {
+  const table = findTable(selection.$from)
+  if (!table) {
+    return
+  }
+
+  const map = TableMap.get(table.node)
+  const indexes = Array.isArray(rowIndex) ? rowIndex : [rowIndex]
+
+  return indexes
+    .filter((index) => index >= 0 && index <= map.height - 1)
+    .flatMap((index) => {
+      const cells = map.cellsInRect({
+        left: 0,
+        right: map.width,
+        top: index,
+        bottom: index + 1,
+      })
+      return cells.map((nodePos) => {
+        const node = table.node.nodeAt(nodePos)!
+        const pos = nodePos + table.start
+        return { pos, start: pos + 1, node, depth: table.depth + 2 }
+      })
+    })
+}

package/src/node/table/utils/get-selection-range-in-col.ts

@@ -0,0 +1,86 @@
+import type { Transaction } from '@milkdown/prose/state'
+
+import type { CellSelectionRange } from './types'
+
+import { getCellsInCol } from './get-cells-in-col'
+import { getCellsInRow } from './get-cells-in-row'
+
+export function getSelectionRangeInCol(
+  tr: Transaction,
+  startColIndex: number,
+  endColIndex: number = startColIndex
+): CellSelectionRange | undefined {
+  let startIndex = startColIndex
+  let endIndex = endColIndex
+
+  // looking for selection start column (startIndex)
+  for (let i = startColIndex; i >= 0; i--) {
+    const cells = getCellsInCol(i, tr.selection)
+    if (cells) {
+      cells.forEach((cell) => {
+        const maybeEndIndex = cell.node.attrs.colspan + i - 1
+        if (maybeEndIndex >= startIndex) {
+          startIndex = i
+        }
+        if (maybeEndIndex > endIndex) {
+          endIndex = maybeEndIndex
+        }
+      })
+    }
+  }
+  // looking for selection end column (endIndex)
+  for (let i = startColIndex; i <= endIndex; i++) {
+    const cells = getCellsInCol(i, tr.selection)
+    if (cells) {
+      cells.forEach((cell) => {
+        const maybeEndIndex = cell.node.attrs.colspan + i - 1
+        if (cell.node.attrs.colspan > 1 && maybeEndIndex > endIndex) {
+          endIndex = maybeEndIndex
+        }
+      })
+    }
+  }
+
+  // filter out columns without cells (where all rows have colspan > 1 in the same column)
+  const indexes = []
+  for (let i = startIndex; i <= endIndex; i++) {
+    const maybeCells = getCellsInCol(i, tr.selection)
+    if (maybeCells && maybeCells.length > 0) {
+      indexes.push(i)
+    }
+  }
+  startIndex = indexes[0]!
+  endIndex = indexes[indexes.length - 1]!
+
+  const firstSelectedColumnCells = getCellsInCol(startIndex, tr.selection)
+  const firstRowCells = getCellsInRow(0, tr.selection)
+  if (!firstSelectedColumnCells || !firstRowCells) {
+    return
+  }
+
+  const $anchor = tr.doc.resolve(
+    firstSelectedColumnCells[firstSelectedColumnCells.length - 1]!.pos
+  )
+
+  let headCell
+  for (let i = endIndex; i >= startIndex; i--) {
+    const columnCells = getCellsInCol(i, tr.selection)
+    if (columnCells && columnCells.length > 0) {
+      for (let j = firstRowCells.length - 1; j >= 0; j--) {
+        if (firstRowCells[j]!.pos === columnCells[0]!.pos) {
+          headCell = columnCells[0]
+          break
+        }
+      }
+      if (headCell) {
+        break
+      }
+    }
+  }
+  if (!headCell) {
+    return
+  }
+
+  const $head = tr.doc.resolve(headCell.pos)
+  return { $anchor, $head, indexes }
+}

package/src/node/table/utils/get-selection-range-in-row.ts

@@ -0,0 +1,86 @@
+import type { Transaction } from '@milkdown/prose/state'
+
+import type { CellSelectionRange } from './types'
+
+import { getCellsInCol } from './get-cells-in-col'
+import { getCellsInRow } from './get-cells-in-row'
+
+export function getSelectionRangeInRow(
+  tr: Transaction,
+  startRowIndex: number,
+  endRowIndex: number = startRowIndex
+): CellSelectionRange | undefined {
+  let startIndex = startRowIndex
+  let endIndex = endRowIndex
+
+  // looking for selection start row (startIndex)
+  for (let i = startRowIndex; i >= 0; i--) {
+    const cells = getCellsInRow(i, tr.selection)
+    if (cells) {
+      cells.forEach((cell) => {
+        const maybeEndIndex = cell.node.attrs.rowspan + i - 1
+        if (maybeEndIndex >= startIndex) {
+          startIndex = i
+        }
+        if (maybeEndIndex > endIndex) {
+          endIndex = maybeEndIndex
+        }
+      })
+    }
+  }
+  // looking for selection end row (endIndex)
+  for (let i = startRowIndex; i <= endIndex; i++) {
+    const cells = getCellsInRow(i, tr.selection)
+    if (cells) {
+      cells.forEach((cell) => {
+        const maybeEndIndex = cell.node.attrs.rowspan + i - 1
+        if (cell.node.attrs.rowspan > 1 && maybeEndIndex > endIndex) {
+          endIndex = maybeEndIndex
+        }
+      })
+    }
+  }
+
+  // filter out rows without cells (where all columns have rowspan > 1 in the same row)
+  const indexes = []
+  for (let i = startIndex; i <= endIndex; i++) {
+    const maybeCells = getCellsInRow(i, tr.selection)
+    if (maybeCells && maybeCells.length > 0) {
+      indexes.push(i)
+    }
+  }
+  startIndex = indexes[0]!
+  endIndex = indexes[indexes.length - 1]!
+
+  const firstSelectedRowCells = getCellsInRow(startIndex, tr.selection)
+  const firstColumnCells = getCellsInCol(0, tr.selection)
+  if (!firstSelectedRowCells || !firstColumnCells) {
+    return
+  }
+
+  const $anchor = tr.doc.resolve(
+    firstSelectedRowCells[firstSelectedRowCells.length - 1]!.pos
+  )
+
+  let headCell
+  for (let i = endIndex; i >= startIndex; i--) {
+    const rowCells = getCellsInRow(i, tr.selection)
+    if (rowCells && rowCells.length > 0) {
+      for (let j = firstColumnCells.length - 1; j >= 0; j--) {
+        if (firstColumnCells[j]!.pos === rowCells[0]!.pos) {
+          headCell = rowCells[0]
+          break
+        }
+      }
+      if (headCell) {
+        break
+      }
+    }
+  }
+  if (!headCell) {
+    return
+  }
+
+  const $head = tr.doc.resolve(headCell.pos)
+  return { $anchor, $head, indexes }
+}

package/src/node/table/utils/index.ts

@@ -0,0 +1,11 @@
+export * from './create-table'
+export * from './find-table'
+export * from './get-cells-in-col'
+export * from './get-cells-in-row'
+export * from './select-line'
+export * from './types'
+export * from './add-row-with-alignment'
+export * from './move-row'
+export * from './move-col'
+export * from './select-table'
+export * from './get-all-cells-in-table'

package/src/node/table/utils/move-col.ts

@@ -0,0 +1,73 @@
+import type { Node } from '@milkdown/prose/model'
+import type { Transaction } from '@milkdown/prose/state'
+
+import { CellSelection, TableMap } from '@milkdown/prose/tables'
+
+import { convertRowsToTable } from './convert-rows-to-table'
+import { convertTableToRows } from './convert-table-to-rows'
+import { findTable } from './find-table'
+import { getSelectionRangeInCol } from './get-selection-range-in-col'
+import { moveRowInArrayOfRows } from './move-row-in-array-of-rows'
+import { transpose } from './transpose'
+
+export interface MoveColParams {
+  tr: Transaction
+  origin: number
+  target: number
+  pos: number
+  select?: boolean
+}
+
+/// 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(moveColParams: MoveColParams) {
+  const { tr, origin, target, select, pos } = moveColParams
+  const $pos = tr.doc.resolve(pos)
+  const table = findTable($pos)
+  if (!table) return false
+
+  const indexesOriginColumn = getSelectionRangeInCol(tr, origin)?.indexes
+  const indexesTargetColumn = getSelectionRangeInCol(tr, target)?.indexes
+
+  if (!indexesOriginColumn || !indexesTargetColumn) return false
+
+  if (indexesOriginColumn.includes(target)) return false
+
+  const newTable = moveTableCol(
+    table.node,
+    indexesOriginColumn,
+    indexesTargetColumn,
+    0
+  )
+
+  tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTable)
+
+  if (!select) return true
+
+  const map = TableMap.get(newTable)
+  const start = table.start
+  const index = target
+  const lastCell = map.positionAt(map.height - 1, index, newTable)
+  const $lastCell = tr.doc.resolve(start + lastCell)
+
+  const firstCell = map.positionAt(0, index, newTable)
+  const $firstCell = tr.doc.resolve(start + firstCell)
+
+  tr.setSelection(CellSelection.colSelection($lastCell, $firstCell))
+  return true
+}
+
+function moveTableCol(
+  table: Node,
+  indexesOrigin: number[],
+  indexesTarget: number[],
+  direction: -1 | 1 | 0
+) {
+  let rows = transpose(convertTableToRows(table))
+
+  rows = moveRowInArrayOfRows(rows, indexesOrigin, indexesTarget, direction)
+  rows = transpose(rows)
+
+  return convertRowsToTable(table, rows)
+}

package/src/node/table/utils/move-row-in-array-of-rows.ts

@@ -0,0 +1,29 @@
+import type { Node } from '@milkdown/prose/model'
+
+/// @internal
+export function moveRowInArrayOfRows(
+  rows: (Node | null)[][],
+  indexesOrigin: number[],
+  indexesTarget: number[],
+  directionOverride: -1 | 1 | 0
+) {
+  const direction = indexesOrigin[0]! > indexesTarget[0]! ? -1 : 1
+
+  const rowsExtracted = rows.splice(indexesOrigin[0]!, indexesOrigin.length)
+  const positionOffset = rowsExtracted.length % 2 === 0 ? 1 : 0
+  let target: number
+
+  if (directionOverride === -1 && direction === 1) {
+    target = indexesTarget[0]! - 1
+  } else if (directionOverride === 1 && direction === -1) {
+    target = indexesTarget[indexesTarget.length - 1]! - positionOffset + 1
+  } else {
+    target =
+      direction === -1
+        ? indexesTarget[0]!
+        : indexesTarget[indexesTarget.length - 1]! - positionOffset
+  }
+
+  rows.splice(target, 0, ...rowsExtracted)
+  return rows
+}