@milkdown/preset-gfm 6.1.5 → 6.2.0

package/src/table/nodes/copy-paste.ts

@@ -0,0 +1,306 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { Fragment, Node, NodeType, Schema, Slice } from '@milkdown/prose/model';
+import { EditorState, Transaction } from '@milkdown/prose/state';
+import { Transform } from '@milkdown/prose/transform';
+
+import { CellSelection } from './cell-selection';
+import { tableNodeTypes } from './schema';
+import { Rect, TableMap } from './table-map';
+import { removeColSpan, setAttr } from './util';
+
+// Utilities to help with copying and pasting table cells
+
+// : (Slice) → ?{width: number, height: number, rows: [Fragment]}
+// Get a rectangular area of cells from a slice, or null if the outer
+// nodes of the slice aren't table cells or rows.
+export function pastedCells(slice: Slice) {
+    if (!slice.size) return null;
+    let { content, openStart, openEnd } = slice;
+    while (
+        content.childCount == 1 &&
+        ((openStart > 0 && openEnd > 0) || (content.firstChild as Node).type.spec['tableRole'] == 'table')
+    ) {
+        openStart--;
+        openEnd--;
+        content = (content.firstChild as Node).content;
+    }
+    const first = content.firstChild as Node,
+        role = first.type.spec['tableRole'];
+    const schema = first.type.schema,
+        rows = [];
+    if (role == 'row') {
+        for (let i = 0; i < content.childCount; i++) {
+            let cells = content.child(i).content;
+            const left = i ? 0 : Math.max(0, openStart - 1);
+            const right = i < content.childCount - 1 ? 0 : Math.max(0, openEnd - 1);
+            if (left || right) cells = fitSlice(tableNodeTypes(schema).row, new Slice(cells, left, right)).content;
+            rows.push(cells);
+        }
+    } else if (role == 'cell' || role == 'header_cell') {
+        rows.push(
+            openStart || openEnd
+                ? fitSlice(tableNodeTypes(schema).row, new Slice(content, openStart, openEnd)).content
+                : content,
+        );
+    } else {
+        return null;
+    }
+    return ensureRectangular(schema, rows);
+}
+
+// : (Schema, [Fragment]) → {width: number, height: number, rows: [Fragment]}
+// Compute the width and height of a set of cells, and make sure each
+// row has the same number of cells.
+export type R = { width: number; height: number; rows: Fragment[] };
+function ensureRectangular(schema: Schema, rows: Fragment[]): R {
+    const widths: number[] = [];
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i] as Fragment;
+        for (let j = row.childCount - 1; j >= 0; j--) {
+            const { rowspan, colspan } = row.child(j).attrs;
+            for (let r = i; r < i + rowspan; r++) widths[r] = (widths[r] || 0) + colspan;
+        }
+    }
+    let width = 0;
+    for (let r = 0; r < widths.length; r++) width = Math.max(width, widths[r] as number);
+    for (let r = 0; r < widths.length; r++) {
+        if (r >= rows.length) rows.push(Fragment.empty);
+        if ((widths[r] as number) < width) {
+            const empty = tableNodeTypes(schema).cell.createAndFill(),
+                cells = [];
+            for (let i = widths[r] as number; i < width; i++) cells.push(empty);
+            rows[r] = (rows[r] as Fragment).append(Fragment.from(cells));
+        }
+    }
+    return { height: rows.length, width, rows };
+}
+
+export function fitSlice(nodeType: NodeType, slice: Slice) {
+    const node = nodeType.createAndFill() as Node;
+    const tr = new Transform(node).replace(0, node.content.size, slice);
+    return tr.doc;
+}
+
+// Clip or extend (repeat) the given set of cells to cover the given
+// width and height. Will clip rowspan/colspan cells at the edges when
+// they stick out.
+export function clipCells({ width, height, rows }: R, newWidth: number, newHeight: number): R {
+    if (width != newWidth) {
+        const added: number[] = [],
+            newRows: Fragment[] = [];
+        for (let row = 0; row < rows.length; row++) {
+            const frag = rows[row] as Fragment,
+                cells = [];
+            for (let col = added[row] || 0, i = 0; col < newWidth; i++) {
+                let cell = frag.child(i % frag.childCount);
+                if (col + cell.attrs['colspan'] > newWidth)
+                    cell = cell.type.create(
+                        removeColSpan(cell.attrs, cell.attrs['colspan'], col + cell.attrs['colspan'] - newWidth),
+                        cell.content,
+                    );
+                cells.push(cell);
+                col += cell.attrs['colspan'];
+                for (let j = 1; j < cell.attrs['rowspan']; j++)
+                    added[row + j] = (added[row + j] || 0) + cell.attrs['colspan'];
+            }
+            newRows.push(Fragment.from(cells));
+        }
+        rows = newRows;
+        width = newWidth;
+    }
+
+    if (height != newHeight) {
+        const newRows = [];
+        for (let row = 0, i = 0; row < newHeight; row++, i++) {
+            const cells = [],
+                source = rows[i % height] as Fragment;
+            for (let j = 0; j < source.childCount; j++) {
+                let cell = source.child(j);
+                if (row + cell.attrs['rowspan'] > newHeight)
+                    cell = cell.type.create(
+                        setAttr(cell.attrs, 'rowspan', Math.max(1, newHeight - cell.attrs['rowspan'])),
+                        cell.content,
+                    );
+                cells.push(cell);
+            }
+            newRows.push(Fragment.from(cells));
+        }
+        rows = newRows;
+        height = newHeight;
+    }
+
+    return { width, height, rows };
+}
+
+// Make sure a table has at least the given width and height. Return
+// true if something was changed.
+function growTable(
+    tr: Transaction,
+    map: TableMap,
+    table: Node,
+    start: number,
+    width: number,
+    height: number,
+    mapFrom: number,
+) {
+    const schema = tr.doc.type.schema,
+        types = tableNodeTypes(schema);
+    let empty, emptyHead;
+    if (width > map.width) {
+        for (let row = 0, rowEnd = 0; row < map.height; row++) {
+            const rowNode = table.child(row);
+            rowEnd += rowNode.nodeSize;
+            const cells = [];
+            let add;
+            if (rowNode.lastChild == null || rowNode.lastChild.type == types.cell)
+                add = empty || (empty = types.cell.createAndFill());
+            else add = emptyHead || (emptyHead = types.header_cell.createAndFill());
+            for (let i = map.width; i < width; i++) cells.push(add);
+            tr.insert(tr.mapping.slice(mapFrom).map(rowEnd - 1 + start), cells);
+        }
+    }
+    if (height > map.height) {
+        const cells = [];
+        for (let i = 0, start = (map.height - 1) * map.width; i < Math.max(map.width, width); i++) {
+            const header =
+                i >= map.width ? false : (table.nodeAt(map.map[start + i] as number) as Node).type == types.header_cell;
+            cells.push(
+                header
+                    ? emptyHead || (emptyHead = types.header_cell.createAndFill())
+                    : empty || (empty = types.cell.createAndFill()),
+            );
+        }
+
+        const emptyRow = types.row.create(null, Fragment.from(cells)),
+            rows = [];
+        for (let i = map.height; i < height; i++) rows.push(emptyRow);
+        tr.insert(tr.mapping.slice(mapFrom).map(start + table.nodeSize - 2), rows);
+    }
+    return !!(empty || emptyHead);
+}
+
+// Make sure the given line (left, top) to (right, top) doesn't cross
+// any rowspan cells by splitting cells that cross it. Return true if
+// something changed.
+function isolateHorizontal(
+    tr: Transaction,
+    map: TableMap,
+    table: Node,
+    start: number,
+    left: number,
+    right: number,
+    top: number,
+    mapFrom: number,
+) {
+    if (top == 0 || top == map.height) return false;
+    let found = false;
+    for (let col = left; col < right; col++) {
+        const index = top * map.width + col,
+            pos = map.map[index] as number;
+        if (map.map[index - map.width] == pos) {
+            found = true;
+            const cell = table.nodeAt(pos) as Node;
+            const { top: cellTop, left: cellLeft } = map.findCell(pos);
+            tr.setNodeMarkup(
+                tr.mapping.slice(mapFrom).map(pos + start),
+                null,
+                setAttr(cell.attrs, 'rowspan', top - cellTop),
+            );
+            tr.insert(
+                tr.mapping.slice(mapFrom).map(map.positionAt(top, cellLeft, table)),
+                cell.type.createAndFill(setAttr(cell.attrs, 'rowspan', cellTop + cell.attrs['rowspan'] - top)) as Node,
+            );
+            col += cell.attrs['colspan'] - 1;
+        }
+    }
+    return found;
+}
+
+// Make sure the given line (left, top) to (left, bottom) doesn't
+// cross any colspan cells by splitting cells that cross it. Return
+// true if something changed.
+function isolateVertical(
+    tr: Transaction,
+    map: TableMap,
+    table: Node,
+    start: number,
+    top: number,
+    bottom: number,
+    left: number,
+    mapFrom: number,
+) {
+    if (left == 0 || left == map.width) return false;
+    let found = false;
+    for (let row = top; row < bottom; row++) {
+        const index = row * map.width + left,
+            pos = map.map[index] as number;
+        if (map.map[index - 1] == pos) {
+            found = true;
+            const cell = table.nodeAt(pos) as Node,
+                cellLeft = map.colCount(pos);
+            const updatePos = tr.mapping.slice(mapFrom).map(pos + start);
+            tr.setNodeMarkup(
+                updatePos,
+                null,
+                removeColSpan(cell.attrs, left - cellLeft, cell.attrs['colspan'] - (left - cellLeft)),
+            );
+            tr.insert(
+                updatePos + cell.nodeSize,
+                cell.type.createAndFill(removeColSpan(cell.attrs, 0, left - cellLeft)) as Node,
+            );
+            row += cell.attrs['rowspan'] - 1;
+        }
+    }
+    return found;
+}
+
+// Insert the given set of cells (as returned by `pastedCells`) into a
+// table, at the position pointed at by rect.
+export function insertCells(
+    state: EditorState,
+    dispatch: (tr: Transaction) => void,
+    tableStart: number,
+    rect: Rect,
+    cells: R,
+) {
+    let table = (tableStart ? state.doc.nodeAt(tableStart - 1) : state.doc) as Node,
+        map = TableMap.get(table);
+    const { top, left } = rect;
+    const right = left + cells.width,
+        bottom = top + cells.height;
+    const tr = state.tr;
+    let mapFrom = 0;
+    function recomp() {
+        table = (tableStart ? tr.doc.nodeAt(tableStart - 1) : tr.doc) as Node;
+        map = TableMap.get(table);
+        mapFrom = tr.mapping.maps.length;
+    }
+    // Prepare the table to be large enough and not have any cells
+    // crossing the boundaries of the rectangle that we want to
+    // insert into. If anything about it changes, recompute the table
+    // map so that subsequent operations can see the current shape.
+    if (growTable(tr, map, table, tableStart, right, bottom, mapFrom)) recomp();
+    if (isolateHorizontal(tr, map, table, tableStart, left, right, top, mapFrom)) recomp();
+    if (isolateHorizontal(tr, map, table, tableStart, left, right, bottom, mapFrom)) recomp();
+    if (isolateVertical(tr, map, table, tableStart, top, bottom, left, mapFrom)) recomp();
+    if (isolateVertical(tr, map, table, tableStart, top, bottom, right, mapFrom)) recomp();
+
+    for (let row = top; row < bottom; row++) {
+        const from = map.positionAt(row, left, table),
+            to = map.positionAt(row, right, table);
+        tr.replace(
+            tr.mapping.slice(mapFrom).map(from + tableStart),
+            tr.mapping.slice(mapFrom).map(to + tableStart),
+            new Slice(cells.rows[row - top] as Fragment, 0, 0),
+        );
+    }
+    recomp();
+    tr.setSelection(
+        new CellSelection(
+            tr.doc.resolve(tableStart + map.positionAt(top, left, table)),
+            tr.doc.resolve(tableStart + map.positionAt(bottom - 1, right - 1, table)),
+        ),
+    );
+    dispatch(tr);
+}

package/src/table/nodes/fix-tables.ts

@@ -0,0 +1,117 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { Node } from '@milkdown/prose/model';
+import { EditorState, PluginKey, Transaction } from '@milkdown/prose/state';
+
+import { tableNodeTypes } from './schema';
+import { Problem, TableMap } from './table-map';
+import { removeColSpan, setAttr } from './util';
+
+export const fixTablesKey = new PluginKey('fix-tables');
+
+// Helper for iterating through the nodes in a document that changed
+// compared to the given previous document. Useful for avoiding
+// duplicate work on each transaction.
+function changedDescendants(old: Node, cur: Node, offset: number, f: (node: Node, pos: number) => void | boolean) {
+    const oldSize = old.childCount,
+        curSize = cur.childCount;
+    outer: for (let i = 0, j = 0; i < curSize; i++) {
+        const child = cur.child(i);
+        for (let scan = j, e = Math.min(oldSize, i + 3); scan < e; scan++) {
+            if (old.child(scan) == child) {
+                j = scan + 1;
+                offset += child.nodeSize;
+                continue outer;
+            }
+        }
+        f(child, offset);
+        if (j < oldSize && old.child(j).sameMarkup(child)) changedDescendants(old.child(j), child, offset + 1, f);
+        else child.nodesBetween(0, child.content.size, f, offset + 1);
+        offset += child.nodeSize;
+    }
+}
+
+// :: (EditorState, ?EditorState) → ?Transaction
+// Inspect all tables in the given state's document and return a
+// transaction that fixes them, if necessary. If `oldState` was
+// provided, that is assumed to hold a previous, known-good state,
+// which will be used to avoid re-scanning unchanged parts of the
+// document.
+export function fixTables(state: EditorState, oldState: EditorState) {
+    let tr: undefined | Transaction;
+    const check = (node: Node, pos: number) => {
+        if (node.type.spec['tableRole'] == 'table') tr = fixTable(state, node, pos, tr);
+    };
+    if (!oldState) state.doc.descendants(check);
+    else if (oldState.doc != state.doc) changedDescendants(oldState.doc, state.doc, 0, check);
+    return tr;
+}
+
+// : (EditorState, Node, number, ?Transaction) → ?Transaction
+// Fix the given table, if necessary. Will append to the transaction
+// it was given, if non-null, or create a new one if necessary.
+export function fixTable(state: EditorState, table: Node, tablePos: number, tr?: Transaction) {
+    const map = TableMap.get(table);
+    if (!map.problems) return tr;
+    if (!tr) tr = state.tr;
+
+    // Track which rows we must add cells to, so that we can adjust that
+    // when fixing collisions.
+    const mustAdd = [];
+    for (let i = 0; i < map.height; i++) mustAdd.push(0);
+    for (let i = 0; i < map.problems.length; i++) {
+        const prob = map.problems[i] as Problem;
+        if (prob.type == 'collision') {
+            const cell = table.nodeAt(prob.pos) as Node;
+            for (let j = 0; j < cell.attrs['rowspan']; j++) mustAdd[prob.row + j] += prob.n;
+            tr.setNodeMarkup(
+                tr.mapping.map(tablePos + 1 + prob.pos),
+                null,
+                removeColSpan(cell.attrs, cell.attrs['colspan'] - prob.n, prob.n),
+            );
+        } else if (prob.type == 'missing') {
+            mustAdd[prob.row] += prob.n;
+        } else if (prob.type == 'overlong_rowspan') {
+            const cell = table.nodeAt(prob.pos) as Node;
+            tr.setNodeMarkup(
+                tr.mapping.map(tablePos + 1 + prob.pos),
+                null,
+                setAttr(cell.attrs, 'rowspan', cell.attrs['rowspan'] - prob.n),
+            );
+        } else if (prob.type == 'colwidth mismatch') {
+            const cell = table.nodeAt(prob.pos) as Node;
+            tr.setNodeMarkup(
+                tr.mapping.map(tablePos + 1 + prob.pos),
+                null,
+                setAttr(cell.attrs, 'colwidth', prob.colwidth),
+            );
+        }
+    }
+    let first, last;
+    for (let i = 0; i < mustAdd.length; i++)
+        if (mustAdd[i]) {
+            if (first == null) first = i;
+            last = i;
+        }
+    // Add the necessary cells, using a heuristic for whether to add the
+    // cells at the start or end of the rows (if it looks like a 'bite'
+    // was taken out of the table, add cells at the start of the row
+    // after the bite. Otherwise add them at the end).
+    for (let i = 0, pos = tablePos + 1; i < map.height; i++) {
+        const row = table.child(i);
+        const end = pos + row.nodeSize;
+        const add = mustAdd[i] as number;
+        if (add > 0) {
+            let tableNodeType = 'cell';
+            if (row.firstChild) {
+                tableNodeType = row.firstChild.type.spec['tableRole'];
+            }
+            const nodes = [];
+            for (let j = 0; j < add; j++) nodes.push(tableNodeTypes(state.schema)[tableNodeType].createAndFill());
+            const side = (i == 0 || first == i - 1) && last == i ? pos + 1 : end - 1;
+            tr.insert(tr.mapping.map(side), nodes);
+        }
+        pos = end;
+    }
+    return tr.setMeta(fixTablesKey, { fixTables: true });
+}

package/src/table/nodes/index.ts

@@ -3,13 +3,15 @@ import { createCmd, createCmdKey, MarkdownNode, schemaCtx } from '@milkdown/core
 import { InputRule } from '@milkdown/prose/inputrules';
 import { NodeType } from '@milkdown/prose/model';
 import { Plugin, PluginKey, Selection, TextSelection } from '@milkdown/prose/state';
-import { columnResizing, goToNextCell, tableEditing } from '@milkdown/prose/tables';
 import { createPlugin, createShortcut } from '@milkdown/utils';
 
 import { exitTable } from '../command';
 import { operatorPlugin } from '../operator-plugin';
 import { createTable } from '../utils';
+import { columnResizing } from './column-resizing';
+import { goToNextCell } from './commands';
 import { schema } from './schema';
+import { tableEditing } from './table-editing';
 
 export const SupportedKeys = {
     NextCell: 'NextCell',
@@ -195,3 +197,7 @@ export const table = createPlugin<Keys, Record<string, unknown>, keyof typeof sc
         },
     };
 });
+
+export * from './cell-selection';
+export * from './commands';
+export * from './util';

package/src/table/nodes/schema.ts

@@ -1,5 +1,103 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { tableNodes as tableNodesSpecCreator } from '@milkdown/prose/tables';
+import { Attrs, Node, NodeSpec, Schema } from '@milkdown/prose/model';
+
+import { TableNodesOptions } from './types';
+
+function getCellAttrs(dom: HTMLElement, extraAttrs: Attrs) {
+    const widthAttr = dom.getAttribute('data-colwidth');
+    const widths = widthAttr && /^\d+(,\d+)*$/.test(widthAttr) ? widthAttr.split(',').map((s) => Number(s)) : null;
+    const colspan = Number(dom.getAttribute('colspan') || 1);
+    const result = {
+        colspan,
+        rowspan: Number(dom.getAttribute('rowspan') || 1),
+        colwidth: widths && widths.length == colspan ? widths : null,
+    };
+    for (const prop in extraAttrs) {
+        const getter = extraAttrs[prop].getFromDOM;
+        const value = getter && getter(dom);
+        if (value != null) result[prop as keyof typeof result] = value;
+    }
+    return result;
+}
+
+function setCellAttrs(node: Node, extraAttrs: Attrs) {
+    const attrs: Record<string, unknown> = {};
+    if (node.attrs['colspan'] != 1) attrs['colspan'] = node.attrs['colspan'];
+    if (node.attrs['rowspan'] != 1) attrs['rowspan'] = node.attrs['rowspan'];
+    if (node.attrs['colwidth']) attrs['data-colwidth'] = node.attrs['colwidth'].join(',');
+    for (const prop in extraAttrs) {
+        const setter = extraAttrs[prop].setDOMAttr;
+        if (setter) setter(node.attrs[prop], attrs);
+    }
+    return attrs;
+}
+
+function tableNodesSpecCreator(options: TableNodesOptions) {
+    const extraAttrs: Attrs = options.cellAttributes || {};
+    const cellAttrs: Record<string, unknown> = {
+        colspan: { default: 1 },
+        rowspan: { default: 1 },
+        colwidth: { default: null },
+    };
+    for (const prop in extraAttrs) cellAttrs[prop] = { default: extraAttrs[prop].default };
+    const finalAttrs = cellAttrs as Attrs;
+
+    const schema: Record<'table' | 'table_row' | 'table_cell' | 'table_header', NodeSpec> = {
+        table: {
+            content: 'table_row+',
+            tableRole: 'table',
+            isolating: true,
+            group: options.tableGroup,
+            parseDOM: [{ tag: 'table' }],
+            toDOM() {
+                return ['table', ['tbody', 0]];
+            },
+        },
+        table_row: {
+            content: '(table_cell | table_header)*',
+            tableRole: 'row',
+            parseDOM: [{ tag: 'tr' }],
+            toDOM() {
+                return ['tr', 0];
+            },
+        },
+        table_cell: {
+            content: options.cellContent,
+            attrs: finalAttrs,
+            tableRole: 'cell',
+            isolating: true,
+            parseDOM: [{ tag: 'td', getAttrs: (dom) => getCellAttrs(dom as HTMLElement, extraAttrs) }],
+            toDOM(node) {
+                return ['td', setCellAttrs(node, extraAttrs), 0];
+            },
+        },
+        table_header: {
+            content: options.cellContent,
+            attrs: finalAttrs,
+            tableRole: 'header_cell',
+            isolating: true,
+            parseDOM: [{ tag: 'th', getAttrs: (dom) => getCellAttrs(dom as HTMLElement, extraAttrs) }],
+            toDOM(node) {
+                return ['th', setCellAttrs(node, extraAttrs), 0];
+            },
+        },
+    };
+
+    return schema;
+}
+
+export function tableNodeTypes(schema: Schema) {
+    let result = schema.cached['tableNodeTypes'];
+    if (!result) {
+        result = schema.cached['tableNodeTypes'] = {};
+        for (const name in schema.nodes) {
+            const type = schema.nodes[name],
+                role = type?.spec['tableRole'];
+            if (role) result[role] = type;
+        }
+    }
+    return result;
+}
 
 export const schema = tableNodesSpecCreator({
     tableGroup: 'block',
@@ -9,7 +107,7 @@ export const schema = tableNodesSpecCreator({
             default: 'left',
             getFromDOM: (dom) => (dom as HTMLElement).style.textAlign || 'left',
             setDOMAttr: (value, attrs) => {
-                attrs.style = `text-align: ${value || 'left'}`;
+                attrs['style'] = `text-align: ${value || 'left'}`;
             },
         },
     },