@milkdown/preset-gfm 6.1.4 → 6.3.0

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

@@ -0,0 +1,275 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { keydownHandler } from '@milkdown/prose/keymap';
+import { Fragment, ResolvedPos, Slice } from '@milkdown/prose/model';
+import { Command, EditorState, Plugin, PluginKey, Selection, TextSelection, Transaction } from '@milkdown/prose/state';
+import { 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;
+}
+
+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 &&
+        ($anchor = cellAround(view.state.selection.$anchor)) != null &&
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        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,
+        $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),
+            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),
+                $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,
+            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),
+            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,
+            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

@@ -0,0 +1,280 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { 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,
+                top = (i / this.width) | 0;
+            let right = left + 1,
+                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[] = [],
+            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,
+                    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),
+        height = table.childCount;
+    const map: number[] = [];
+    const colWidths: number[] = [];
+    let mapPos = 0,
+        problems: Problem[] | undefined = 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),
+                { 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,
+                            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,
+        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,
+                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;
+}

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

@@ -0,0 +1,76 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Node } from '@milkdown/prose/model';
+import { NodeView } from '@milkdown/prose/view';
+
+/* Copyright 2021, Milkdown by Mirone. */
+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,
+        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

@@ -0,0 +1,16 @@
+/* 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 };
+}