@kerebron/editor-kits 0.4.4 → 0.4.6

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

@@ -1,307 +0,0 @@
-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

@@ -1,164 +0,0 @@
-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

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