@kerebron/extension-tables 0.0.1

package/esm/utilities/TableMap.js

@@ -0,0 +1,335 @@
+let readFromCache;
+let addToCache;
+// Prefer using a weak map to cache table maps. Fall back on a
+// fixed-size cache if that's not supported.
+if (typeof WeakMap != 'undefined') {
+    // eslint-disable-next-line
+    const cache = new WeakMap();
+    readFromCache = (key) => cache.get(key);
+    addToCache = (key, value) => {
+        cache.set(key, value);
+        return value;
+    };
+}
+else {
+    const cache = [];
+    const cacheSize = 10;
+    let cachePos = 0;
+    readFromCache = (key) => {
+        for (let i = 0; i < cache.length; i += 2) {
+            if (cache[i] == key)
+                return cache[i + 1];
+        }
+    };
+    addToCache = (key, value) => {
+        if (cachePos == cacheSize)
+            cachePos = 0;
+        cache[cachePos++] = key;
+        return (cache[cachePos++] = value);
+    };
+}
+/**
+ * A table map describes the structure 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.
+ *
+ * @public
+ */
+export class TableMap {
+    constructor(
+    /**
+     * The number of columns
+     */
+    width, 
+    /**
+     * The number of rows
+     */
+    height, 
+    /**
+     * A width * height array with the start position of
+     * the cell covering that part of the table in each slot
+     */
+    map, 
+    /**
+     * An optional array of problems (cell overlap or non-rectangular
+     * shape) for the table, used by the table normalizer.
+     */
+    problems) {
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: width
+        });
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: height
+        });
+        Object.defineProperty(this, "map", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: map
+        });
+        Object.defineProperty(this, "problems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: problems
+        });
+    }
+    // Find the dimensions of the cell at the given position.
+    findCell(pos) {
+        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 { left, top, right, bottom };
+        }
+        throw new RangeError(`No cell with offset ${pos} found`);
+    }
+    // Find the left side of the cell at the given position.
+    colCount(pos) {
+        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`);
+    }
+    // Find the next cell in the given direction, starting from the cell
+    // at `pos`, if any.
+    nextCell(pos, axis, dir) {
+        const { left, right, top, bottom } = this.findCell(pos);
+        if (axis == 'horiz') {
+            if (dir < 0 ? left == 0 : right == this.width)
+                return null;
+            return this.map[top * this.width + (dir < 0 ? left - 1 : right)];
+        }
+        else {
+            if (dir < 0 ? top == 0 : bottom == this.height)
+                return null;
+            return this.map[left + this.width * (dir < 0 ? top - 1 : bottom)];
+        }
+    }
+    // Get the rectangle spanning the two given cells.
+    rectBetween(a, b) {
+        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 {
+            left: Math.min(leftA, leftB),
+            top: Math.min(topA, topB),
+            right: Math.max(rightA, rightB),
+            bottom: Math.max(bottomA, bottomB),
+        };
+    }
+    // Return the position of all cells that have the top left corner in
+    // the given rectangle.
+    cellsInRect(rect) {
+        const result = [];
+        const seen = {};
+        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];
+                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)) {
+                    continue;
+                }
+                result.push(pos);
+            }
+        }
+        return result;
+    }
+    // Return the position at which the cell at the given row and column
+    // starts, or would start, if a cell started there.
+    positionAt(row, col, table) {
+        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] < rowStart)
+                    index++;
+                return index == rowEndIndex ? rowEnd - 1 : this.map[index];
+            }
+            rowStart = rowEnd;
+        }
+    }
+    // Find the table map for the given table node.
+    static get(table) {
+        return readFromCache(table) || addToCache(table, computeMap(table));
+    }
+}
+// Compute a table map.
+function computeMap(table) {
+    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 = [];
+    let mapPos = 0;
+    let problems = null;
+    const colWidths = [];
+    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, 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++;
+    }
+    if (width === 0 || height === 0) {
+        (problems || (problems = [])).push({ type: 'zero_sized' });
+    }
+    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] < height)
+            badWidths = true;
+    }
+    if (badWidths)
+        findBadColWidths(tableMap, colWidths, table);
+    return tableMap;
+}
+function findWidth(table) {
+    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, colWidths, table) {
+    if (!map.problems)
+        map.problems = [];
+    const seen = {};
+    for (let i = 0; i < map.map.length; i++) {
+        const pos = map.map[i];
+        if (seen[pos])
+            continue;
+        seen[pos] = true;
+        const node = table.nodeAt(pos);
+        if (!node) {
+            throw new RangeError(`No cell with offset ${pos} found`);
+        }
+        let updated = null;
+        const attrs = node.attrs;
+        for (let j = 0; j < attrs.colspan; j++) {
+            const col = (i + j) % map.width;
+            const colWidth = colWidths[col * 2];
+            if (colWidth != null &&
+                (!attrs.colwidth || attrs.colwidth[j] != colWidth)) {
+                (updated || (updated = freshColWidth(attrs)))[j] = colWidth;
+            }
+        }
+        if (updated) {
+            map.problems.unshift({
+                type: 'colwidth mismatch',
+                pos,
+                colwidth: updated,
+            });
+        }
+    }
+}
+function freshColWidth(attrs) {
+    if (attrs.colwidth)
+        return attrs.colwidth.slice();
+    const result = [];
+    for (let i = 0; i < attrs.colspan; i++)
+        result.push(0);
+    return result;
+}

package/esm/utilities/TableView.d.ts

@@ -0,0 +1,21 @@
+import { Node } from 'prosemirror-model';
+import { NodeView, ViewMutationRecord } from 'prosemirror-view';
+/**
+ * @public
+ */
+export declare class TableView implements NodeView {
+    node: Node;
+    defaultCellMinWidth: number;
+    dom: HTMLDivElement;
+    table: HTMLTableElement;
+    colgroup: HTMLTableColElement;
+    contentDOM: HTMLTableSectionElement;
+    constructor(node: Node, defaultCellMinWidth: number);
+    update(node: Node): boolean;
+    ignoreMutation(record: ViewMutationRecord): boolean;
+}
+/**
+ * @public
+ */
+export declare function updateColumnsOnResize(node: Node, colgroup: HTMLTableColElement, table: HTMLTableElement, defaultCellMinWidth: number, overrideCol?: number, overrideValue?: number): void;
+//# sourceMappingURL=TableView.d.ts.map

package/esm/utilities/TableView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableView.d.ts","sourceRoot":"","sources":["../../src/utilities/TableView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGhE;;GAEG;AACH,qBAAa,SAAU,YAAW,QAAQ;IAO/B,IAAI,EAAE,IAAI;IACV,mBAAmB,EAAE,MAAM;IAP7B,GAAG,EAAE,cAAc,CAAC;IACpB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,UAAU,EAAE,uBAAuB,CAAC;gBAGlC,IAAI,EAAE,IAAI,EACV,mBAAmB,EAAE,MAAM;IAcpC,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO;IAY3B,cAAc,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO;CAMpD;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,mBAAmB,EAC7B,KAAK,EAAE,gBAAgB,EACvB,mBAAmB,EAAE,MAAM,EAC3B,WAAW,CAAC,EAAE,MAAM,EACpB,aAAa,CAAC,EAAE,MAAM,GACrB,IAAI,CA0CN"}

package/esm/utilities/TableView.js

@@ -0,0 +1,108 @@
+/**
+ * @public
+ */
+export class TableView {
+    constructor(node, defaultCellMinWidth) {
+        Object.defineProperty(this, "node", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: node
+        });
+        Object.defineProperty(this, "defaultCellMinWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: defaultCellMinWidth
+        });
+        Object.defineProperty(this, "dom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "table", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "colgroup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "contentDOM", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.dom = document.createElement('div');
+        this.dom.className = 'tableWrapper';
+        this.table = this.dom.appendChild(document.createElement('table'));
+        this.table.style.setProperty('--default-cell-min-width', `${defaultCellMinWidth}px`);
+        this.colgroup = this.table.appendChild(document.createElement('colgroup'));
+        updateColumnsOnResize(node, this.colgroup, this.table, defaultCellMinWidth);
+        this.contentDOM = this.table.appendChild(document.createElement('tbody'));
+    }
+    update(node) {
+        if (node.type != this.node.type)
+            return false;
+        this.node = node;
+        updateColumnsOnResize(node, this.colgroup, this.table, this.defaultCellMinWidth);
+        return true;
+    }
+    ignoreMutation(record) {
+        return (record.type == 'attributes' &&
+            (record.target == this.table || this.colgroup.contains(record.target)));
+    }
+}
+/**
+ * @public
+ */
+export function updateColumnsOnResize(node, colgroup, table, defaultCellMinWidth, overrideCol, overrideValue) {
+    let totalWidth = 0;
+    let fixedWidth = true;
+    let nextDOM = colgroup.firstChild;
+    const row = node.firstChild;
+    if (!row)
+        return;
+    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 || defaultCellMinWidth;
+            if (!hasWidth)
+                fixedWidth = false;
+            if (!nextDOM) {
+                const col = document.createElement('col');
+                col.style.width = cssWidth;
+                colgroup.appendChild(col);
+            }
+            else {
+                if (nextDOM.style.width != cssWidth) {
+                    nextDOM.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/esm/utilities/columnResizing.d.ts

@@ -0,0 +1,50 @@
+import { Node as ProsemirrorNode } from 'prosemirror-model';
+import { EditorState, Plugin, Transaction } from 'prosemirror-state';
+import { DecorationSet, EditorView, NodeView } from 'prosemirror-view';
+/**
+ * @public
+ */
+export declare const columnResizingPluginKey: any;
+/**
+ * @public
+ */
+export type ColumnResizingOptions = {
+    handleWidth?: number;
+    /**
+     * Minimum width of a cell /column. The column cannot be resized smaller than this.
+     */
+    cellMinWidth?: number;
+    /**
+     * The default minWidth of a cell / column when it doesn't have an explicit width (i.e.: it has not been resized manually)
+     */
+    defaultCellMinWidth?: number;
+    lastColumnResizable?: boolean;
+    /**
+     * A custom node view for the rendering table nodes. By default, the plugin
+     * uses the {@link TableView} class. You can explicitly set this to `null` to
+     * not use a custom node view.
+     */
+    View?: (new (node: ProsemirrorNode, cellMinWidth: number, view: EditorView) => NodeView) | null;
+};
+/**
+ * @public
+ */
+export type Dragging = {
+    startX: number;
+    startWidth: number;
+};
+/**
+ * @public
+ */
+export declare function columnResizing({ handleWidth, cellMinWidth, defaultCellMinWidth, View, lastColumnResizable, }?: ColumnResizingOptions): Plugin;
+/**
+ * @public
+ */
+export declare class ResizeState {
+    activeHandle: number;
+    dragging: Dragging | false;
+    constructor(activeHandle: number, dragging: Dragging | false);
+    apply(tr: Transaction): ResizeState;
+}
+export declare function handleDecorations(state: EditorState, cell: number): DecorationSet;
+//# sourceMappingURL=columnResizing.d.ts.map

package/esm/utilities/columnResizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnResizing.d.ts","sourceRoot":"","sources":["../../src/utilities/columnResizing.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,IAAI,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAEL,aAAa,EACb,UAAU,EACV,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAM1B;;GAEG;AACH,eAAO,MAAM,uBAAuB,KAEnC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EACD,CAAC,KACD,IAAI,EAAE,eAAe,EACrB,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,UAAU,KACb,QAAQ,CAAC,GACZ,IAAI,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,WAAe,EACf,YAAiB,EACjB,mBAAyB,EACzB,IAAgB,EAChB,mBAA0B,GAC3B,GAAE,qBAA0B,GAAG,MAAM,CAiDrC;AAED;;GAEG;AACH,qBAAa,WAAW;IAEb,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,QAAQ,GAAG,KAAK;gBAD1B,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,QAAQ,GAAG,KAAK;IAGnC,KAAK,CAAC,EAAE,EAAE,WAAW,GAAG,WAAW;CAkBpC;AA4PD,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,MAAM,GACX,aAAa,CAwCf"}