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

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

@@ -1,80 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Node } from '@milkdown/prose/model'
-import type { NodeView } from '@milkdown/prose/view'
-
-export class TableView implements NodeView {
-  public dom: HTMLElement
-  public contentDOM: HTMLElement
-  public table: HTMLTableElement
-  public colgroup: HTMLTableColElement
-
-  constructor(public node: Node, public cellMinWidth: number) {
-    this.node = node
-    this.cellMinWidth = cellMinWidth
-    this.dom = document.createElement('div')
-    this.dom.className = 'tableWrapper'
-    this.table = this.dom.appendChild(document.createElement('table'))
-    this.colgroup = this.table.appendChild(document.createElement('colgroup'))
-    updateColumns(node, this.colgroup, this.table, cellMinWidth)
-    this.contentDOM = this.table.appendChild(document.createElement('tbody'))
-  }
-
-  update(node: Node) {
-    if (node.type != this.node.type)
-      return false
-    this.node = node
-    updateColumns(node, this.colgroup, this.table, this.cellMinWidth)
-    return true
-  }
-
-  ignoreMutation(record: MutationRecord) {
-    return record.type == 'attributes' && (record.target == this.table || this.colgroup.contains(record.target))
-  }
-}
-
-export function updateColumns(
-  node: Node,
-  colgroup: HTMLTableColElement,
-  table: HTMLTableElement,
-  cellMinWidth: number,
-  overrideCol?: number,
-  overrideValue?: number,
-) {
-  let totalWidth = 0
-  let fixedWidth = true
-  let nextDOM = colgroup.firstChild
-  const row = node.firstChild as Node
-  for (let i = 0, col = 0; i < row.childCount; i++) {
-    const { colspan, colwidth } = row.child(i).attrs
-    for (let j = 0; j < colspan; j++, col++) {
-      const hasWidth = overrideCol == col ? overrideValue : colwidth && colwidth[j]
-      const cssWidth = hasWidth ? `${hasWidth}px` : ''
-      totalWidth += hasWidth || cellMinWidth
-      if (!hasWidth)
-        fixedWidth = false
-      if (!nextDOM) {
-        colgroup.appendChild(document.createElement('col')).style.width = cssWidth
-      }
-      else {
-        if ((nextDOM as HTMLElement).style.width != cssWidth)
-          (nextDOM as HTMLElement).style.width = cssWidth
-        nextDOM = nextDOM.nextSibling
-      }
-    }
-  }
-
-  while (nextDOM) {
-    const after = nextDOM.nextSibling
-    nextDOM.parentNode?.removeChild(nextDOM)
-    nextDOM = after
-  }
-
-  if (fixedWidth) {
-    table.style.width = `${totalWidth}px`
-    table.style.minWidth = ''
-  }
-  else {
-    table.style.width = ''
-    table.style.minWidth = `${totalWidth}px`
-  }
-}

package/src/table/plugin/types.ts

@@ -1,16 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-export type getFromDOM<T> = (dom: Element) => T
-export type setDOMAttr = <Value>(value: Value, attrs: Record<string, unknown>) => void
-
-export interface CellAttributes<T = unknown> {
-  default: T
-  getFromDOM?: getFromDOM<T>
-  setDOMAttr?: setDOMAttr
-}
-
-export interface TableNodesOptions {
-  tableGroup?: string
-  cellContent: string
-  cellAttributes: { [key: string]: CellAttributes }
-}

package/src/table/plugin/util.ts

@@ -1,119 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { Attrs, Node, ResolvedPos } from '@milkdown/prose/model'
-import type { EditorState, NodeSelection } from '@milkdown/prose/state'
-
-import { CellSelection } from './cell-selection'
-import { tableNodeTypes } from './schema'
-import { TableMap } from './table-map'
-
-export function cellAround($pos: ResolvedPos) {
-  for (let d = $pos.depth - 1; d > 0; d--) {
-    if ($pos.node(d).type.spec.tableRole == 'row')
-      return $pos.node(0).resolve($pos.before(d + 1))
-  }
-  return undefined
-}
-
-export function cellWrapping($pos: ResolvedPos) {
-  for (let d = $pos.depth; d > 0; d--) {
-    // Sometimes the cell can be in the same depth.
-    const role = $pos.node(d).type.spec.tableRole
-    if (role === 'cell' || role === 'header_cell')
-      return $pos.node(d)
-  }
-  return null
-}
-
-export function pointsAtCell($pos: ResolvedPos): Node | null {
-  if ($pos.parent.type.spec.tableRole == 'row')
-    return $pos.nodeAfter
-  return null
-}
-
-export function moveCellForward($pos: ResolvedPos) {
-  return $pos.node(0).resolve($pos.pos + ($pos.nodeAfter as Node).nodeSize)
-}
-
-export function inSameTable($a: ResolvedPos, $b: ResolvedPos) {
-  return $a.depth == $b.depth && $a.pos >= $b.start(-1) && $a.pos <= $b.end(-1)
-}
-
-export function nextCell($pos: ResolvedPos, axis: string, dir: number) {
-  const start = $pos.start(-1)
-  const map = TableMap.get($pos.node(-1))
-  const moved = map.nextCell($pos.pos - start, axis, dir)
-  return moved == null ? null : $pos.node(0).resolve(start + moved)
-}
-
-export function setAttr<T>(attrs: Attrs, name: string, value: T) {
-  const result: Record<string, unknown> = {}
-  for (const prop in attrs) result[prop] = attrs[prop]
-  result[name] = value
-  return result as Attrs
-}
-
-export function removeColSpan(attrs: Attrs, pos: number, n = 1) {
-  const result = setAttr(attrs, 'colspan', attrs.colspan - n) as Record<string, unknown>
-  if (result.colwidth) {
-    const widths = result.colwidth as number[]
-    result.colwidth = widths.slice()
-    widths.splice(pos, n)
-    if (!widths.some(w => w > 0))
-      result.colwidth = null
-  }
-  return result
-}
-
-export function isInTable(state: EditorState) {
-  const $head = state.selection.$head
-  for (let d = $head.depth; d > 0; d--) {
-    if ($head.node(d).type.spec.tableRole == 'row')
-      return true
-  }
-  return false
-}
-
-export function selectionCell(state: EditorState) {
-  const sel = state.selection
-  if (sel instanceof CellSelection)
-    return sel.$anchorCell.pos > sel.$headCell.pos ? sel.$anchorCell : sel.$headCell
-  else if ((sel as NodeSelection).node && (sel as NodeSelection).node.type.spec.tableRole == 'cell')
-    return sel.$anchor
-
-  return cellAround(sel.$head) || cellNear(sel.$head)
-}
-
-function cellNear($pos: ResolvedPos) {
-  for (let after = $pos.nodeAfter, pos = $pos.pos; after; after = after.firstChild, pos++) {
-    const role = after.type.spec.tableRole
-    if (role == 'cell' || role == 'header_cell')
-      return $pos.doc.resolve(pos)
-  }
-  for (let before = $pos.nodeBefore, pos = $pos.pos; before; before = before.lastChild, pos--) {
-    const role = before.type.spec.tableRole
-    if (role == 'cell' || role == 'header_cell')
-      return $pos.doc.resolve(pos - before.nodeSize)
-  }
-
-  return undefined
-}
-
-export function addColSpan(attrs: Attrs, pos: number, n = 1) {
-  const result = setAttr(attrs, 'colspan', attrs.colspan + n) as Record<string, unknown>
-  if (result.colwidth) {
-    const widths = result.colwidth as number[]
-    result.colwidth = widths.slice()
-    for (let i = 0; i < n; i++) widths.splice(pos, 0, 0)
-  }
-  return result as Attrs
-}
-
-export function columnIsHeader(map: TableMap, table: Node, col: number) {
-  const headerCell = tableNodeTypes(table.type.schema).header_cell
-  for (let row = 0; row < map.height; row++) {
-    const pos = map.map[col + row * map.width] as number
-    if ((table.nodeAt(pos) as Node).type != headerCell)
-      return false
-  }
-  return true
-}

package/src/table/utils.ts

@@ -1,165 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { cloneTr, findParentNode } from '@milkdown/prose'
-import type { Node as ProsemirrorNode, Schema } from '@milkdown/prose/model'
-import type { Selection, Transaction } from '@milkdown/prose/state'
-
-import { CellSelection } from './plugin/cell-selection'
-import { tableNodeTypes } from './plugin/schema'
-import type { Rect } from './plugin/table-map'
-import { TableMap } from './plugin/table-map'
-
-export interface CellPos {
-  pos: number
-  start: number
-  node: ProsemirrorNode
-}
-
-export const findTable = (selection: Selection) =>
-  findParentNode(node => node.type.spec.tableRole === 'table')(selection)
-
-export const getCellsInColumn
-    = (columnIndex: number) =>
-      (selection: Selection): CellPos[] | undefined => {
-        const table = findTable(selection)
-        if (!table)
-          return undefined
-        const map = TableMap.get(table.node)
-        if (columnIndex < 0 || columnIndex >= map.width)
-          return undefined
-
-        return map
-          .cellsInRect({ left: columnIndex, right: columnIndex + 1, top: 0, bottom: map.height })
-          .map((pos) => {
-            const node = table.node.nodeAt(pos)
-            if (!node)
-              return undefined
-            const start = pos + table.start
-            return {
-              pos: start,
-              start: start + 1,
-              node,
-            }
-          })
-          .filter((x): x is CellPos => x != null)
-      }
-
-export const getCellsInRow
-    = (rowIndex: number) =>
-      (selection: Selection): CellPos[] | undefined => {
-        const table = findTable(selection)
-        if (!table)
-          return undefined
-        const map = TableMap.get(table.node)
-        if (rowIndex < 0 || rowIndex >= map.height)
-          return undefined
-
-        return map
-          .cellsInRect({ left: 0, right: map.width, top: rowIndex, bottom: rowIndex + 1 })
-          .map((pos) => {
-            const node = table.node.nodeAt(pos)
-            if (!node)
-              return undefined
-            const start = pos + table.start
-            return {
-              pos: start,
-              start: start + 1,
-              node,
-            }
-          })
-          .filter((x): x is CellPos => x != null)
-      }
-
-export const createTable = (schema: Schema, rowsCount = 3, colsCount = 3) => {
-  const { cell: tableCell, header_cell: tableHeader, row: tableRow, table } = tableNodeTypes(schema)
-
-  const cells = Array(colsCount)
-    .fill(0)
-    .map(() => tableCell.createAndFill(null) as ProsemirrorNode)
-
-  const headerCells = Array(colsCount)
-    .fill(0)
-    .map(() => tableHeader.createAndFill(null) as ProsemirrorNode)
-
-  const rows = Array(rowsCount)
-    .fill(0)
-    .map((_, i) => tableRow.create(null, i === 0 ? headerCells : cells))
-
-  return table.create(null, rows)
-}
-
-export const selectLine = (type: 'row' | 'col') => (index: number) => (tr: Transaction) => {
-  const table = findTable(tr.selection)
-  const isRowSelection = type === 'row'
-  if (table) {
-    const map = TableMap.get(table.node)
-
-    // Check if the index is valid
-    if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
-      const lastCell = map.positionAt(
-        isRowSelection ? index : map.height - 1,
-        isRowSelection ? map.width - 1 : index,
-        table.node,
-      )
-      const $lastCell = tr.doc.resolve(table.start + 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)
-      return cloneTr(tr.setSelection(createCellSelection($lastCell, $firstCell) as unknown as Selection))
-    }
-  }
-  return tr
-}
-
-export const getCellsInTable = (selection: Selection) => {
-  const table = findTable(selection)
-  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 }
-  })
-}
-
-export const selectTable = (tr: Transaction) => {
-  const cells = getCellsInTable(tr.selection)
-  if (cells && cells[0]) {
-    const $firstCell = tr.doc.resolve(cells[0].pos)
-    const last = cells[cells.length - 1]
-    if (last) {
-      const $lastCell = tr.doc.resolve(last.pos)
-      return cloneTr(tr.setSelection(new CellSelection($lastCell, $firstCell) as unknown as Selection))
-    }
-  }
-  return tr
-}
-
-export function addRowWithAlignment(tr: Transaction, { map, tableStart, table }: Required<Rect>, row: number) {
-  const rowPos = Array(row)
-    .fill(0)
-    .reduce((acc, _, i) => {
-      return acc + table.child(i).nodeSize
-    }, tableStart)
-
-  const { cell: cellType, row: rowType } = tableNodeTypes(table.type.schema)
-
-  const cells = Array(map.width)
-    .fill(0)
-    .map((_, col) => {
-      const headerCol = table.nodeAt(map.map[col] as number)
-      return cellType.createAndFill({ alignment: headerCol?.attrs.alignment }) as ProsemirrorNode
-    })
-
-  tr.insert(rowPos, rowType.create(null, cells))
-  return tr
-}

package/src/task-list-item.ts

@@ -1,159 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { ThemeTaskListItemType } from '@milkdown/core'
-import { createCmd, createCmdKey, editorViewCtx } from '@milkdown/core'
-import { expectDomTypeError } from '@milkdown/exception'
-import { wrapIn } from '@milkdown/prose/commands'
-import { wrappingInputRule } from '@milkdown/prose/inputrules'
-import { liftListItem, sinkListItem, splitListItem } from '@milkdown/prose/schema-list'
-import type { NodeView } from '@milkdown/prose/view'
-import { createNode, createShortcut } from '@milkdown/utils'
-
-import { SupportedKeys } from './supported-keys'
-
-type Keys = Extract<keyof SupportedKeys, 'SinkListItem' | 'LiftListItem' | 'NextListItem' | 'TaskList'>
-
-export const SplitTaskListItem = createCmdKey('SplitTaskListItem')
-export const SinkTaskListItem = createCmdKey('SinkTaskListItem')
-export const LiftTaskListItem = createCmdKey('LiftTaskListItem')
-export const TurnIntoTaskList = createCmdKey('TurnIntoTaskList')
-
-export const taskListItem = createNode<Keys>((utils) => {
-  const id = 'task_list_item'
-
-  return {
-    id,
-    schema: ctx => ({
-      group: 'listItem',
-      content: 'paragraph block*',
-      defining: true,
-      priority: 60,
-      attrs: {
-        checked: {
-          default: false,
-        },
-      },
-      parseDOM: [
-        {
-          tag: 'li[data-type="task-item"]',
-          getAttrs: (dom) => {
-            if (!(dom instanceof HTMLElement))
-              throw expectDomTypeError(dom)
-
-            return { checked: dom.dataset.checked === 'true' }
-          },
-        },
-      ],
-      toDOM: (node) => {
-        const checkbox = document.createElement('input')
-        checkbox.type = 'checkbox'
-        checkbox.checked = node.attrs.checked
-        checkbox.className = utils.getClassName(node.attrs, 'task-list-item_checkbox')
-        checkbox.onchange = (event) => {
-          const target = event.target
-          if (!(target instanceof HTMLInputElement))
-            return
-          const view = ctx.get(editorViewCtx)
-
-          if (!view.editable) {
-            checkbox.checked = !checkbox.checked
-
-            return
-          }
-
-          const { top, left } = target.getBoundingClientRect()
-          const result = view.posAtCoords({ top, left })
-          if (!result)
-            return
-
-          const { tr } = view.state
-
-          view.dispatch(
-            tr.setNodeMarkup(result.inside, undefined, {
-              checked: target.checked,
-            }),
-          )
-        }
-        return [
-          'li',
-          {
-            'data-type': 'task-item',
-            'data-checked': node.attrs.checked ? 'true' : 'false',
-            'class': utils.getClassName(node.attrs, 'task-list-item'),
-          },
-          checkbox,
-          ['span', { class: utils.getClassName(node.attrs, 'task-list-item_body') }, 0],
-        ]
-      },
-      parseMarkdown: {
-        match: ({ type, checked }) => {
-          return type === 'listItem' && checked !== null
-        },
-        runner: (state, node, type) => {
-          state.openNode(type, { checked: node.checked as boolean })
-          state.next(node.children)
-          state.closeNode()
-        },
-      },
-      toMarkdown: {
-        match: node => node.type.name === id,
-        runner: (state, node) => {
-          state.openNode('listItem', undefined, { checked: node.attrs.checked })
-          state.next(node.content)
-          state.closeNode()
-        },
-      },
-    }),
-    inputRules: nodeType => [
-      wrappingInputRule(/^\s*(\[([ |x])\])\s$/, nodeType, match => ({
-        checked: match[match.length - 1] === 'x',
-      })),
-    ],
-    commands: nodeType => [
-      createCmd(SplitTaskListItem, () => splitListItem(nodeType)),
-      createCmd(SinkTaskListItem, () => sinkListItem(nodeType)),
-      createCmd(LiftTaskListItem, () => liftListItem(nodeType)),
-      createCmd(TurnIntoTaskList, () => wrapIn(nodeType)),
-    ],
-    shortcuts: {
-      [SupportedKeys.NextListItem]: createShortcut(SplitTaskListItem, 'Enter'),
-      [SupportedKeys.SinkListItem]: createShortcut(SinkTaskListItem, 'Mod-]'),
-      [SupportedKeys.LiftListItem]: createShortcut(LiftTaskListItem, 'Mod-['),
-      [SupportedKeys.TaskList]: createShortcut(TurnIntoTaskList, 'Mod-Alt-9'),
-    },
-    view: () => (node, view, getPos) => {
-      let currNode = node
-
-      const renderer = utils.themeManager.get<ThemeTaskListItemType>('task-list-item', {
-        editable: () => view.editable,
-        onChange: (selected) => {
-          const { tr } = view.state
-          view.dispatch(
-            tr.setNodeMarkup(getPos(), undefined, {
-              checked: selected,
-            }),
-          )
-        },
-      })
-
-      if (!renderer)
-        return {} as NodeView
-
-      const { dom, contentDOM, onUpdate } = renderer
-      onUpdate(currNode)
-
-      return {
-        dom,
-        contentDOM,
-        update: (updatedNode) => {
-          if (updatedNode.type.name !== id)
-            return false
-
-          currNode = updatedNode
-          onUpdate(currNode)
-
-          return true
-        },
-      }
-    },
-  }
-})