@milkdown/preset-gfm 6.5.4 → 7.0.0-next.1

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

@@ -1,369 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-import { keydownHandler } from '@milkdown/prose/keymap'
-import type { ResolvedPos } from '@milkdown/prose/model'
-import { Fragment, Slice } from '@milkdown/prose/model'
-import type { Command, EditorState, Transaction } from '@milkdown/prose/state'
-import {
-  Plugin,
-  PluginKey,
-  Selection,
-  TextSelection,
-} from '@milkdown/prose/state'
-import type { EditorView } from '@milkdown/prose/view'
-
-import {
-  CellSelection,
-  drawCellSelection,
-  normalizeSelection,
-} from './cell-selection'
-import { clipCells, fitSlice, insertCells, pastedCells } from './copy-paste'
-import { fixTables } from './fix-tables'
-import { tableNodeTypes } from './schema'
-import { TableMap } from './table-map'
-import {
-  cellAround,
-  inSameTable,
-  isInTable,
-  nextCell,
-  selectionCell,
-} from './util'
-
-export const tableEditingKey = new PluginKey('selectingCells')
-
-function domInCell(view: EditorView, dom: EventTarget | null) {
-  for (; dom && dom != view.dom; dom = (dom as Element).parentNode as Element) {
-    if ((dom as Element).nodeName == 'TD' || (dom as Element).nodeName == 'TH')
-      return dom
-  }
-
-  return undefined
-}
-
-function cellUnderMouse(view: EditorView, event: MouseEvent) {
-  const mousePos = view.posAtCoords({
-    left: event.clientX,
-    top: event.clientY,
-  })
-  if (!mousePos)
-    return null
-  return mousePos ? cellAround(view.state.doc.resolve(mousePos.pos)) : null
-}
-
-function handleMouseDown(view: EditorView, event: Event) {
-  const startEvent = event as MouseEvent
-  if (startEvent.ctrlKey || startEvent.metaKey)
-    return
-
-  const startDOMCell = domInCell(view, startEvent.target as Element)
-  let $anchor
-  if (startEvent.shiftKey && view.state.selection instanceof CellSelection) {
-    // Adding to an existing cell selection
-    setCellSelection(view.state.selection.$anchorCell, startEvent)
-    startEvent.preventDefault()
-  }
-  else if (
-    startEvent.shiftKey
-    && startDOMCell
-    // eslint-disable-next-line no-cond-assign
-    && ($anchor = cellAround(view.state.selection.$anchor)) != null
-    && cellUnderMouse(view, startEvent)!.pos != $anchor.pos
-  ) {
-    // Adding to a selection that starts in another cell (causing a
-    // cell selection to be created).
-    setCellSelection($anchor, startEvent)
-    startEvent.preventDefault()
-  }
-  else if (!startDOMCell) {
-    // Not in a cell, let the default behavior happen.
-    return
-  }
-
-  // Create and dispatch a cell selection between the given anchor and
-  // the position under the mouse.
-  function setCellSelection($anchor: ResolvedPos, event: MouseEvent) {
-    let $head = cellUnderMouse(view, event)
-    const starting = tableEditingKey.getState(view.state) == null
-    if (!$head || !inSameTable($anchor, $head)) {
-      if (starting)
-        $head = $anchor
-      else return
-    }
-    const selection = new CellSelection($anchor, $head)
-    if (starting || !view.state.selection.eq(selection)) {
-      const tr = view.state.tr.setSelection(selection)
-      if (starting)
-        tr.setMeta(tableEditingKey, $anchor.pos)
-      view.dispatch(tr)
-    }
-  }
-
-  // Stop listening to mouse motion events.
-  function stop() {
-    view.root.removeEventListener('mouseup', stop)
-    view.root.removeEventListener('dragstart', stop)
-    view.root.removeEventListener('mousemove', move)
-    if (tableEditingKey.getState(view.state) != null)
-      view.dispatch(view.state.tr.setMeta(tableEditingKey, -1))
-  }
-
-  function move(event: Event) {
-    const anchor = tableEditingKey.getState(view.state)
-    let $anchor
-    if (anchor != null) {
-      // Continuing an existing cross-cell selection
-      $anchor = view.state.doc.resolve(anchor)
-    }
-    else if (domInCell(view, event.target) != startDOMCell) {
-      // Moving out of the initial cell -- start a new cell selection
-      $anchor = cellUnderMouse(view, startEvent)
-      if (!$anchor)
-        return stop()
-    }
-    if ($anchor)
-      setCellSelection($anchor, event as MouseEvent)
-  }
-  view.root.addEventListener('mouseup', stop)
-  view.root.addEventListener('dragstart', stop)
-  view.root.addEventListener('mousemove', move)
-}
-
-function handleTripleClick(view: EditorView, pos: number) {
-  const doc = view.state.doc
-  const $cell = cellAround(doc.resolve(pos))
-  if (!$cell)
-    return false
-  view.dispatch(view.state.tr.setSelection(new CellSelection($cell)))
-  return true
-}
-
-function maybeSetSelection(
-  state: EditorState,
-  dispatch: undefined | ((tr: Transaction) => void),
-  selection: Selection,
-) {
-  if (selection.eq(state.selection))
-    return false
-  if (dispatch)
-    dispatch(state.tr.setSelection(selection).scrollIntoView())
-  return true
-}
-
-function atEndOfCell(view: EditorView, axis: string, dir: number) {
-  if (!(view.state.selection instanceof TextSelection))
-    return null
-  const { $head } = view.state.selection
-  for (let d = $head.depth - 1; d >= 0; d--) {
-    const parent = $head.node(d)
-    const index = dir < 0 ? $head.index(d) : $head.indexAfter(d)
-    if (index != (dir < 0 ? 0 : parent.childCount))
-      return null
-    if (
-      parent.type.spec.tableRole == 'cell'
-      || parent.type.spec.tableRole == 'header_cell'
-    ) {
-      const cellPos = $head.before(d)
-      const dirStr
-        = axis == 'vert' ? (dir > 0 ? 'down' : 'up') : dir > 0 ? 'right' : 'left'
-      return view.endOfTextblock(dirStr) ? cellPos : null
-    }
-  }
-  return null
-}
-
-function arrow(axis: string, dir: number): Command {
-  return (state, dispatch, view) => {
-    const sel = state.selection
-    if (sel instanceof CellSelection) {
-      return maybeSetSelection(
-        state,
-        dispatch,
-        Selection.near(sel.$headCell, dir),
-      )
-    }
-
-    if (axis != 'horiz' && !sel.empty)
-      return false
-    const end = atEndOfCell(view as EditorView, axis, dir)
-    if (end == null)
-      return false
-    if (axis == 'horiz') {
-      return maybeSetSelection(
-        state,
-        dispatch,
-        Selection.near(state.doc.resolve(sel.head + dir), dir),
-      )
-    }
-    else {
-      const $cell = state.doc.resolve(end)
-      const $next = nextCell($cell, axis, dir)
-      let newSel
-      if ($next)
-        newSel = Selection.near($next, 1)
-      else if (dir < 0)
-        newSel = Selection.near(state.doc.resolve($cell.before(-1)), -1)
-      else newSel = Selection.near(state.doc.resolve($cell.after(-1)), 1)
-      return maybeSetSelection(state, dispatch, newSel)
-    }
-  }
-}
-
-function shiftArrow(axis: string, dir: number): Command {
-  return (state, dispatch, view) => {
-    let sel = state.selection
-    if (!(sel instanceof CellSelection)) {
-      const end = atEndOfCell(view as EditorView, axis, dir)
-      if (end == null)
-        return false
-      sel = new CellSelection(state.doc.resolve(end))
-    }
-    const $head = nextCell((sel as CellSelection).$headCell, axis, dir)
-    if (!$head)
-      return false
-    return maybeSetSelection(
-      state,
-      dispatch,
-      new CellSelection((sel as CellSelection).$anchorCell, $head),
-    )
-  }
-}
-
-function deleteCellSelection(
-  state: EditorState,
-  dispatch?: (tr: Transaction) => void,
-) {
-  const sel = state.selection
-  if (!(sel instanceof CellSelection))
-    return false
-  if (dispatch) {
-    const tr = state.tr
-    const baseContent = tableNodeTypes(state.schema).cell.createAndFill()
-      .content
-    sel.forEachCell((cell, pos) => {
-      if (!cell.content.eq(baseContent)) {
-        tr.replace(
-          tr.mapping.map(pos + 1),
-          tr.mapping.map(pos + cell.nodeSize - 1),
-          new Slice(baseContent, 0, 0),
-        )
-      }
-    })
-    if (tr.docChanged)
-      dispatch(tr)
-  }
-  return true
-}
-
-const handleKeyDown = keydownHandler({
-  'ArrowLeft': arrow('horiz', -1),
-  'ArrowRight': arrow('horiz', 1),
-  'ArrowUp': arrow('vert', -1),
-  'ArrowDown': arrow('vert', 1),
-
-  'Shift-ArrowLeft': shiftArrow('horiz', -1),
-  'Shift-ArrowRight': shiftArrow('horiz', 1),
-  'Shift-ArrowUp': shiftArrow('vert', -1),
-  'Shift-ArrowDown': shiftArrow('vert', 1),
-
-  'Backspace': deleteCellSelection,
-  'Mod-Backspace': deleteCellSelection,
-  'Delete': deleteCellSelection,
-  'Mod-Delete': deleteCellSelection,
-})
-
-export function handlePaste(view: EditorView, _: Event, slice: Slice) {
-  if (!isInTable(view.state))
-    return false
-  let cells = pastedCells(slice)
-  const sel = view.state.selection
-  if (sel instanceof CellSelection) {
-    if (!cells) {
-      cells = {
-        width: 1,
-        height: 1,
-        rows: [
-          Fragment.from(
-            fitSlice(tableNodeTypes(view.state.schema).cell, slice),
-          ),
-        ],
-      }
-    }
-    const table = sel.$anchorCell.node(-1)
-    const start = sel.$anchorCell.start(-1)
-    const rect = TableMap.get(table).rectBetween(
-      sel.$anchorCell.pos - start,
-      sel.$headCell.pos - start,
-    )
-    cells = clipCells(cells, rect.right - rect.left, rect.bottom - rect.top)
-    insertCells(view.state, view.dispatch, start, rect, cells)
-    return true
-  }
-  else if (cells) {
-    const $cell = selectionCell(view.state) as ResolvedPos
-    const start = $cell.start(-1)
-    insertCells(
-      view.state,
-      view.dispatch,
-      start,
-      TableMap.get($cell.node(-1)).findCell($cell.pos - start),
-      cells,
-    )
-    return true
-  }
-  else {
-    return false
-  }
-}
-
-export function tableEditing({ allowTableNodeSelection = false } = {}) {
-  return new Plugin({
-    key: tableEditingKey,
-
-    // This piece of state is used to remember when a mouse-drag
-    // cell-selection is happening, so that it can continue even as
-    // transactions (which might move its anchor cell) come in.
-    state: {
-      init() {
-        return null
-      },
-      apply(tr, cur) {
-        const set = tr.getMeta(tableEditingKey)
-        if (set != null)
-          return set == -1 ? null : set
-        if (cur == null || !tr.docChanged)
-          return cur
-        const { deleted, pos } = tr.mapping.mapResult(cur)
-        return deleted ? null : pos
-      },
-    },
-
-    props: {
-      decorations: drawCellSelection,
-
-      handleDOMEvents: {
-        mousedown: handleMouseDown,
-      },
-
-      createSelectionBetween(view) {
-        if (tableEditingKey.getState(view.state) != null)
-          return view.state.selection
-
-        return null
-      },
-
-      handleTripleClick,
-
-      handleKeyDown,
-
-      handlePaste,
-    },
-
-    appendTransaction(_, oldState, state) {
-      return normalizeSelection(
-        state,
-        fixTables(state, oldState),
-        allowTableNodeSelection,
-      )
-    },
-  })
-}

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

@@ -1,345 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-import type { Attrs, Node } from '@milkdown/prose/model'
-
-const cache = new WeakMap<Node, TableMap>()
-const readFromCache = (key: Node) => cache.get(key)
-const addToCache = (key: Node, value: TableMap) => {
-  cache.set(key, value)
-  return value
-}
-
-export class Rect {
-  public tableStart?: number
-  public map?: TableMap
-  public table?: Node
-  constructor(
-    public left: number,
-    public top: number,
-    public right: number,
-    public bottom: number,
-  ) {}
-}
-
-// ::- A table map describes the structore of a given table. To avoid
-// recomputing them all the time, they are cached per table node. To
-// be able to do that, positions saved in the map are relative to the
-// start of the table, rather than the start of the document.
-export class TableMap {
-  constructor(
-    public width: number,
-    public height: number,
-    public map: number[],
-    public problems?: Problem[],
-  ) {
-    // :: number The width of the table
-    this.width = width
-    // :: number The table's height
-    this.height = height
-    // :: [number] A width * height array with the start position of
-    // the cell covering that part of the table in each slot
-    this.map = map
-    // An optional array of problems (cell overlap or non-rectangular
-    // shape) for the table, used by the table normalizer.
-    this.problems = problems
-  }
-
-  // Find the dimensions of the cell at the given position.
-  findCell(pos: number): Rect {
-    for (let i = 0; i < this.map.length; i++) {
-      const curPos = this.map[i]
-      if (curPos != pos)
-        continue
-      const left = i % this.width
-      const top = (i / this.width) | 0
-      let right = left + 1
-      let bottom = top + 1
-      for (let j = 1; right < this.width && this.map[i + j] == curPos; j++)
-        right++
-      for (
-        let j = 1;
-        bottom < this.height && this.map[i + this.width * j] == curPos;
-        j++
-      )
-        bottom++
-      return new Rect(left, top, right, bottom)
-    }
-    throw new RangeError(`No cell with offset ${pos} found`)
-  }
-
-  colCount(pos: number): number {
-    for (let i = 0; i < this.map.length; i++) {
-      if (this.map[i] == pos)
-        return i % this.width
-    }
-
-    throw new RangeError(`No cell with offset ${pos} found`)
-  }
-
-  // :: (number, string, number) → ?number
-  // Find the next cell in the given direction, starting from the cell
-  // at `pos`, if any.
-  nextCell(pos: number, axis: string, dir: number): number | undefined {
-    const { left, right, top, bottom } = this.findCell(pos)
-    if (axis == 'horiz') {
-      if (dir < 0 ? left == 0 : right == this.width)
-        return undefined
-      return this.map[top * this.width + (dir < 0 ? left - 1 : right)]
-    }
-    else {
-      if (dir < 0 ? top == 0 : bottom == this.height)
-        return undefined
-      return this.map[left + this.width * (dir < 0 ? top - 1 : bottom)]
-    }
-  }
-
-  // :: (number, number) → Rect
-  // Get the rectangle spanning the two given cells.
-  rectBetween(a: number, b: number): Rect {
-    const {
-      left: leftA,
-      right: rightA,
-      top: topA,
-      bottom: bottomA,
-    } = this.findCell(a)
-    const {
-      left: leftB,
-      right: rightB,
-      top: topB,
-      bottom: bottomB,
-    } = this.findCell(b)
-    return new Rect(
-      Math.min(leftA, leftB),
-      Math.min(topA, topB),
-      Math.max(rightA, rightB),
-      Math.max(bottomA, bottomB),
-    )
-  }
-
-  // :: (Rect) → [number]
-  // Return the position of all cells that have the top left corner in
-  // the given rectangle.
-  cellsInRect(rect: Rect): number[] {
-    const result: number[] = []
-    const seen: Record<number, boolean> = {}
-    for (let row = rect.top; row < rect.bottom; row++) {
-      for (let col = rect.left; col < rect.right; col++) {
-        const index = row * this.width + col
-        const pos = this.map[index] as number
-        if (seen[pos])
-          continue
-        seen[pos] = true
-        if (
-          (col != rect.left || !col || this.map[index - 1] != pos)
-          && (row != rect.top || !row || this.map[index - this.width] != pos)
-        )
-          result.push(pos)
-      }
-    }
-    return result
-  }
-
-  // :: (number, number, Node) → number
-  // Return the position at which the cell at the given row and column
-  // starts, or would start, if a cell started there.
-  positionAt(row: number, col: number, table: Node): number {
-    for (let i = 0, rowStart = 0; ; i++) {
-      const rowEnd = rowStart + table.child(i).nodeSize
-      if (i == row) {
-        let index = col + row * this.width
-        const rowEndIndex = (row + 1) * this.width
-        // Skip past cells from previous rows (via rowspan)
-        while (index < rowEndIndex && (this.map[index] as number) < rowStart)
-          index++
-        return index == rowEndIndex ? rowEnd - 1 : (this.map[index] as number)
-      }
-      rowStart = rowEnd
-    }
-  }
-
-  // Find the table map for the given table node.
-  static get(table: Node): TableMap {
-    return readFromCache(table) || addToCache(table, computeMap(table))
-  }
-}
-
-export type Problem =
-  | {
-    type: 'missing'
-    row: number
-    n: number
-  }
-  | {
-    type: 'overlong_rowspan'
-    pos: number
-    n: number
-  }
-  | {
-    type: 'collision'
-    row: number
-    pos: number
-    n: number
-  }
-  | {
-    type: 'colwidth mismatch'
-    pos: number
-    colwidth: boolean
-  }
-
-// Compute a table map.
-function computeMap(table: Node) {
-  if (table.type.spec.tableRole != 'table')
-    throw new RangeError(`Not a table node: ${table.type.name}`)
-  const width = findWidth(table)
-  const height = table.childCount
-  const map: number[] = []
-  const colWidths: number[] = []
-  let mapPos = 0
-  let problems: Problem[] | undefined
-  for (let i = 0, e = width * height; i < e; i++) map[i] = 0
-
-  for (let row = 0, pos = 0; row < height; row++) {
-    const rowNode = table.child(row)
-    pos++
-    for (let i = 0; ; i++) {
-      while (mapPos < map.length && map[mapPos] != 0) mapPos++
-      if (i == rowNode.childCount)
-        break
-      const cellNode = rowNode.child(i)
-      const { colspan, rowspan, colwidth } = cellNode.attrs
-      for (let h = 0; h < rowspan; h++) {
-        if (h + row >= height) {
-          (problems || (problems = [])).push({
-            type: 'overlong_rowspan',
-            pos,
-            n: rowspan - h,
-          })
-          break
-        }
-        const start = mapPos + h * width
-        for (let w = 0; w < colspan; w++) {
-          if (map[start + w] == 0) {
-            map[start + w] = pos
-          }
-          else {
-            (problems || (problems = [])).push({
-              type: 'collision',
-              row,
-              pos,
-              n: colspan - w,
-            })
-          }
-          const colW = colwidth && colwidth[w]
-          if (colW) {
-            const widthIndex = ((start + w) % width) * 2
-            const prev = colWidths[widthIndex]
-            if (
-              prev == null
-              || (prev != colW && colWidths[widthIndex + 1] == 1)
-            ) {
-              colWidths[widthIndex] = colW
-              colWidths[widthIndex + 1] = 1
-            }
-            else if (prev == colW) {
-              colWidths[widthIndex + 1]++
-            }
-          }
-        }
-      }
-      mapPos += colspan
-      pos += cellNode.nodeSize
-    }
-    const expectedPos = (row + 1) * width
-    let missing = 0
-    while (mapPos < expectedPos) {
-      if (map[mapPos++] == 0)
-        missing++
-    }
-
-    if (missing)
-      (problems || (problems = [])).push({ type: 'missing', row, n: missing })
-    pos++
-  }
-
-  const tableMap = new TableMap(width, height, map, problems)
-  let badWidths = false
-
-  // For columns that have defined widths, but whose widths disagree
-  // between rows, fix up the cells whose width doesn't match the
-  // computed one.
-  for (let i = 0; !badWidths && i < colWidths.length; i += 2) {
-    if (colWidths[i] != null && (colWidths[i + 1] as number) < height)
-      badWidths = true
-  }
-  if (badWidths)
-    findBadColWidths(tableMap, colWidths, table)
-
-  return tableMap
-}
-
-function findWidth(table: Node) {
-  let width = -1
-  let hasRowSpan = false
-  for (let row = 0; row < table.childCount; row++) {
-    const rowNode = table.child(row)
-    let rowWidth = 0
-    if (hasRowSpan) {
-      for (let j = 0; j < row; j++) {
-        const prevRow = table.child(j)
-        for (let i = 0; i < prevRow.childCount; i++) {
-          const cell = prevRow.child(i)
-          if (j + cell.attrs.rowspan > row)
-            rowWidth += cell.attrs.colspan
-        }
-      }
-    }
-    for (let i = 0; i < rowNode.childCount; i++) {
-      const cell = rowNode.child(i)
-      rowWidth += cell.attrs.colspan
-      if (cell.attrs.rowspan > 1)
-        hasRowSpan = true
-    }
-    if (width == -1)
-      width = rowWidth
-    else if (width != rowWidth)
-      width = Math.max(width, rowWidth)
-  }
-  return width
-}
-
-function findBadColWidths(map: TableMap, colWidths: number[], table: Node) {
-  if (!map.problems)
-    map.problems = []
-  for (let i = 0, seen: Record<number, boolean> = {}; i < map.map.length; i++) {
-    const pos = map.map[i] as number
-    if (seen[pos])
-      continue
-    seen[pos] = true
-    const node = table.nodeAt(pos) as Node
-    let updated = null
-    for (let j = 0; j < node.attrs.colspan; j++) {
-      const col = (i + j) % map.width
-      const colWidth = colWidths[col * 2]
-      if (
-        colWidth != null
-        && (!node.attrs.colwidth || node.attrs.colwidth[j] != colWidth)
-      )
-        (updated || (updated = freshColWidth(node.attrs)))[j] = colWidth
-    }
-    if (updated) {
-      map.problems.unshift({
-        type: 'colwidth mismatch',
-        pos,
-        colwidth: updated,
-      })
-    }
-  }
-}
-
-function freshColWidth(attrs: Attrs) {
-  if (attrs.colwidth)
-    return attrs.colwidth.slice()
-  const result = []
-  for (let i = 0; i < attrs.colspan; i++) result.push(0)
-  return result
-}