@kerebron/editor-kits 0.4.1

package/esm/extension-tables/src/utilities/columnResizing.js

@@ -0,0 +1,307 @@
+import * as dntShim from "../../../_dnt.shims.js";
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet, } from 'prosemirror-view';
+import { tableNodeTypes } from './tableNodeTypes.js';
+import { TableMap } from './TableMap.js';
+import { TableView, updateColumnsOnResize } from './TableView.js';
+import { cellAround, pointsAtCell } from './util.js';
+/**
+ * @public
+ */
+export const columnResizingPluginKey = new PluginKey('tableColumnResizing');
+/**
+ * @public
+ */
+export function columnResizing({ handleWidth = 5, cellMinWidth = 25, defaultCellMinWidth = 100, View = TableView, lastColumnResizable = true, } = {}) {
+    const plugin = new Plugin({
+        key: columnResizingPluginKey,
+        state: {
+            init(_, state) {
+                const nodeViews = plugin.spec?.props?.nodeViews;
+                const tableName = tableNodeTypes(state.schema).table.name;
+                if (View && nodeViews) {
+                    nodeViews[tableName] = (node, view) => {
+                        return new View(node, defaultCellMinWidth, view);
+                    };
+                }
+                return new ResizeState(-1, false);
+            },
+            apply(tr, prev) {
+                return prev.apply(tr);
+            },
+        },
+        props: {
+            attributes: (state) => {
+                const pluginState = columnResizingPluginKey.getState(state);
+                return pluginState && pluginState.activeHandle > -1
+                    ? { class: 'resize-cursor' }
+                    : {};
+            },
+            handleDOMEvents: {
+                mousemove: (view, event) => {
+                    handleMouseMove(view, event, handleWidth, lastColumnResizable);
+                },
+                mouseleave: (view) => {
+                    handleMouseLeave(view);
+                },
+                mousedown: (view, event) => {
+                    handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth);
+                },
+            },
+            decorations: (state) => {
+                const pluginState = columnResizingPluginKey.getState(state);
+                if (pluginState && pluginState.activeHandle > -1) {
+                    return handleDecorations(state, pluginState.activeHandle);
+                }
+            },
+            nodeViews: {},
+        },
+    });
+    return plugin;
+}
+/**
+ * @public
+ */
+export class ResizeState {
+    constructor(activeHandle, dragging) {
+        Object.defineProperty(this, "activeHandle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: activeHandle
+        });
+        Object.defineProperty(this, "dragging", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: dragging
+        });
+    }
+    apply(tr) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const action = tr.getMeta(columnResizingPluginKey);
+        if (action && action.setHandle != null) {
+            return new ResizeState(action.setHandle, false);
+        }
+        if (action && action.setDragging !== undefined) {
+            return new ResizeState(this.activeHandle, action.setDragging);
+        }
+        if (this.activeHandle > -1 && tr.docChanged) {
+            let handle = tr.mapping.map(this.activeHandle, -1);
+            if (!pointsAtCell(tr.doc.resolve(handle))) {
+                handle = -1;
+            }
+            return new ResizeState(handle, this.dragging);
+        }
+        return this;
+    }
+}
+function handleMouseMove(view, event, handleWidth, lastColumnResizable) {
+    if (!view.editable)
+        return;
+    const pluginState = columnResizingPluginKey.getState(view.state);
+    if (!pluginState)
+        return;
+    if (!pluginState.dragging) {
+        const target = domCellAround(event.target);
+        let cell = -1;
+        if (target) {
+            const { left, right } = target.getBoundingClientRect();
+            if (event.clientX - left <= handleWidth) {
+                cell = edgeCell(view, event, 'left', handleWidth);
+            }
+            else if (right - event.clientX <= handleWidth) {
+                cell = edgeCell(view, event, 'right', handleWidth);
+            }
+        }
+        if (cell != pluginState.activeHandle) {
+            if (!lastColumnResizable && cell !== -1) {
+                const $cell = view.state.doc.resolve(cell);
+                const table = $cell.node(-1);
+                const map = TableMap.get(table);
+                const tableStart = $cell.start(-1);
+                const col = map.colCount($cell.pos - tableStart) +
+                    $cell.nodeAfter.attrs.colspan -
+                    1;
+                if (col == map.width - 1) {
+                    return;
+                }
+            }
+            updateHandle(view, cell);
+        }
+    }
+}
+function handleMouseLeave(view) {
+    if (!view.editable)
+        return;
+    const pluginState = columnResizingPluginKey.getState(view.state);
+    if (pluginState && pluginState.activeHandle > -1 && !pluginState.dragging) {
+        updateHandle(view, -1);
+    }
+}
+function handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth) {
+    if (!view.editable)
+        return false;
+    const win = view.dom.ownerDocument.defaultView || dntShim.dntGlobalThis;
+    const pluginState = columnResizingPluginKey.getState(view.state);
+    if (!pluginState || pluginState.activeHandle == -1 || pluginState.dragging) {
+        return false;
+    }
+    const cell = view.state.doc.nodeAt(pluginState.activeHandle);
+    const width = currentColWidth(view, pluginState.activeHandle, cell.attrs);
+    view.dispatch(view.state.tr.setMeta(columnResizingPluginKey, {
+        setDragging: { startX: event.clientX, startWidth: width },
+    }));
+    function finish(event) {
+        win.removeEventListener('mouseup', finish);
+        win.removeEventListener('mousemove', move);
+        const pluginState = columnResizingPluginKey.getState(view.state);
+        if (pluginState?.dragging) {
+            updateColumnWidth(view, pluginState.activeHandle, draggedWidth(pluginState.dragging, event, cellMinWidth));
+            view.dispatch(view.state.tr.setMeta(columnResizingPluginKey, { setDragging: null }));
+        }
+    }
+    function move(event) {
+        if (!event.which)
+            return finish(event);
+        const pluginState = columnResizingPluginKey.getState(view.state);
+        if (!pluginState)
+            return;
+        if (pluginState.dragging) {
+            const dragged = draggedWidth(pluginState.dragging, event, cellMinWidth);
+            displayColumnWidth(view, pluginState.activeHandle, dragged, defaultCellMinWidth);
+        }
+    }
+    displayColumnWidth(view, pluginState.activeHandle, width, defaultCellMinWidth);
+    win.addEventListener('mouseup', finish);
+    win.addEventListener('mousemove', move);
+    event.preventDefault();
+    return true;
+}
+function currentColWidth(view, cellPos, { colspan, colwidth }) {
+    const width = colwidth && colwidth[colwidth.length - 1];
+    if (width)
+        return width;
+    const dom = view.domAtPos(cellPos);
+    const node = dom.node.childNodes[dom.offset];
+    let domWidth = node.offsetWidth, parts = colspan;
+    if (colwidth) {
+        for (let i = 0; i < colspan; i++) {
+            if (colwidth[i]) {
+                domWidth -= colwidth[i];
+                parts--;
+            }
+        }
+    }
+    return domWidth / parts;
+}
+function domCellAround(target) {
+    while (target && target.nodeName != 'TD' && target.nodeName != 'TH') {
+        target = target.classList && target.classList.contains('ProseMirror')
+            ? null
+            : target.parentNode;
+    }
+    return target;
+}
+function edgeCell(view, event, side, handleWidth) {
+    // posAtCoords returns inconsistent positions when cursor is moving
+    // across a collapsed table border. Use an offset to adjust the
+    // target viewport coordinates away from the table border.
+    const offset = side == 'right' ? -handleWidth : handleWidth;
+    const found = view.posAtCoords({
+        left: event.clientX + offset,
+        top: event.clientY,
+    });
+    if (!found)
+        return -1;
+    const { pos } = found;
+    const $cell = cellAround(view.state.doc.resolve(pos));
+    if (!$cell)
+        return -1;
+    if (side == 'right')
+        return $cell.pos;
+    const map = TableMap.get($cell.node(-1)), start = $cell.start(-1);
+    const index = map.map.indexOf($cell.pos - start);
+    return index % map.width == 0 ? -1 : start + map.map[index - 1];
+}
+function draggedWidth(dragging, event, resizeMinWidth) {
+    const offset = event.clientX - dragging.startX;
+    return Math.max(resizeMinWidth, dragging.startWidth + offset);
+}
+function updateHandle(view, value) {
+    view.dispatch(view.state.tr.setMeta(columnResizingPluginKey, { setHandle: value }));
+}
+function updateColumnWidth(view, cell, width) {
+    const $cell = view.state.doc.resolve(cell);
+    const table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
+    const col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan -
+        1;
+    const tr = view.state.tr;
+    for (let row = 0; row < map.height; row++) {
+        const mapIndex = row * map.width + col;
+        // Rowspanning cell that has already been handled
+        if (row && map.map[mapIndex] == map.map[mapIndex - map.width])
+            continue;
+        const pos = map.map[mapIndex];
+        const attrs = table.nodeAt(pos).attrs;
+        const index = attrs.colspan == 1 ? 0 : col - map.colCount(pos);
+        if (attrs.colwidth && attrs.colwidth[index] == width)
+            continue;
+        const colwidth = attrs.colwidth
+            ? attrs.colwidth.slice()
+            : zeroes(attrs.colspan);
+        colwidth[index] = width;
+        tr.setNodeMarkup(start + pos, null, { ...attrs, colwidth: colwidth });
+    }
+    if (tr.docChanged)
+        view.dispatch(tr);
+}
+function displayColumnWidth(view, cell, width, defaultCellMinWidth) {
+    const $cell = view.state.doc.resolve(cell);
+    const table = $cell.node(-1), start = $cell.start(-1);
+    const col = TableMap.get(table).colCount($cell.pos - start) +
+        $cell.nodeAfter.attrs.colspan -
+        1;
+    let dom = view.domAtPos($cell.start(-1)).node;
+    while (dom && dom.nodeName != 'TABLE') {
+        dom = dom.parentNode;
+    }
+    if (!dom)
+        return;
+    updateColumnsOnResize(table, dom.firstChild, dom, defaultCellMinWidth, col, width);
+}
+function zeroes(n) {
+    return Array(n).fill(0);
+}
+export function handleDecorations(state, cell) {
+    const decorations = [];
+    const $cell = state.doc.resolve(cell);
+    const table = $cell.node(-1);
+    if (!table) {
+        return DecorationSet.empty;
+    }
+    const map = TableMap.get(table);
+    const start = $cell.start(-1);
+    const col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan -
+        1;
+    for (let row = 0; row < map.height; row++) {
+        const index = col + row * map.width;
+        // For positions that have either a different cell or the end
+        // of the table to their right, and either the top of the table or
+        // a different cell above them, add a decoration
+        if ((col == map.width - 1 || map.map[index] != map.map[index + 1]) &&
+            (row == 0 || map.map[index] != map.map[index - map.width])) {
+            const cellPos = map.map[index];
+            const pos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1;
+            const dom = document.createElement('div');
+            dom.className = 'column-resize-handle';
+            if (columnResizingPluginKey.getState(state)?.dragging) {
+                decorations.push(Decoration.node(start + cellPos, start + cellPos + table.nodeAt(cellPos).nodeSize, {
+                    class: 'column-resize-dragging',
+                }));
+            }
+            decorations.push(Decoration.widget(pos, dom));
+        }
+    }
+    return DecorationSet.create(state.doc, decorations);
+}

package/esm/extension-tables/src/utilities/commands.d.ts

@@ -0,0 +1,164 @@
+import { Node } from 'prosemirror-model';
+import { Command, EditorState, Transaction } from 'prosemirror-state';
+import { Rect, TableMap } from './TableMap.js';
+import { CommandFactory } from '../../../editor/src/commands/mod.js';
+/**
+ * @public
+ */
+export type TableRect = Rect & {
+    tableStart: number;
+    map: TableMap;
+    table: Node;
+};
+/**
+ * Helper to get the selected rectangle in a table, if any. Adds table
+ * map, table node, and table start offset to the object for
+ * convenience.
+ *
+ * @public
+ */
+export declare function selectedRect(state: EditorState): TableRect;
+/**
+ * Add a column at the given position in a table.
+ *
+ * @public
+ */
+export declare function addColumn(tr: Transaction, { map, tableStart, table }: TableRect, col: number): Transaction;
+/**
+ * Command to add a column before the column with the selection.
+ *
+ * @public
+ */
+export declare function addColumnBefore(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * Command to add a column after the column with the selection.
+ *
+ * @public
+ */
+export declare function addColumnAfter(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * @public
+ */
+export declare function removeColumn(tr: Transaction, { map, table, tableStart }: TableRect, col: number): void;
+/**
+ * Command function that removes the selected columns from a table.
+ *
+ * @public
+ */
+export declare function deleteColumn(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * @public
+ */
+export declare function rowIsHeader(map: TableMap, table: Node, row: number): boolean;
+/**
+ * @public
+ */
+export declare function addRow(tr: Transaction, { map, tableStart, table }: TableRect, row: number): Transaction;
+/**
+ * Add a table row before the selection.
+ *
+ * @public
+ */
+export declare function addRowBefore(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * Add a table row after the selection.
+ *
+ * @public
+ */
+export declare function addRowAfter(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * @public
+ */
+export declare function removeRow(tr: Transaction, { map, table, tableStart }: TableRect, row: number): void;
+/**
+ * Remove the selected rows from a table.
+ *
+ * @public
+ */
+export declare function deleteRow(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * Merge the selected cells into a single cell. Only available when
+ * the selected cells' outline forms a rectangle.
+ *
+ * @public
+ */
+export declare function mergeCells(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * Split a selected cell, whose rowpan or colspan is greater than one,
+ * into smaller cells. Use the first cell type for the new cells.
+ *
+ * @public
+ */
+export declare function splitCell(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * @public
+ */
+export interface GetCellTypeOptions {
+    node: Node;
+    row: number;
+    col: number;
+}
+/**
+ * Split a selected cell, whose rowpan or colspan is greater than one,
+ * into smaller cells with the cell type (th, td) returned by getType function.
+ *
+ * @public
+ */
+export declare const splitCellWithType: CommandFactory;
+/**
+ * Returns a command that sets the given attribute to the given value,
+ * and is only available when the currently selected cell doesn't
+ * already have that attribute set to that value.
+ *
+ * @public
+ */
+export declare const setCellAttr: CommandFactory;
+/**
+ * @public
+ */
+export type ToggleHeaderType = 'column' | 'row' | 'cell';
+/**
+ * Toggles between row/column header and normal cells (Only applies to first row/column).
+ * For deprecated behavior pass `useDeprecatedLogic` in options with true.
+ *
+ * @public
+ */
+export declare const toggleHeader: CommandFactory;
+/**
+ * Toggles whether the selected row contains header cells.
+ *
+ * @public
+ */
+export declare const toggleHeaderRow: Command;
+/**
+ * Toggles whether the selected column contains header cells.
+ *
+ * @public
+ */
+export declare const toggleHeaderColumn: Command;
+/**
+ * Toggles whether the selected cells are header cells.
+ *
+ * @public
+ */
+export declare const toggleHeaderCell: Command;
+/**
+ * Returns a command for selecting the next (direction=1) or previous
+ * (direction=-1) cell in a table.
+ *
+ * @public
+ */
+export declare const goToNextCell: CommandFactory;
+/**
+ * Deletes the table around the selection, if any.
+ *
+ * @public
+ */
+export declare function deleteTable(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+/**
+ * Deletes the content of the selected cells, if they are not empty.
+ *
+ * @public
+ */
+export declare function deleteCellSelection(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
+//# sourceMappingURL=commands.d.ts.map

package/esm/extension-tables/src/utilities/commands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.d.ts","sourceRoot":"","sources":["../../../../src/extension-tables/src/utilities/commands.ts"],"names":[],"mappings":"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"}