@progress/kendo-editor-common 1.8.2-dev.202204011319 → 1.9.0-dev.202204060830

package/dist/es2015/plugins/table-resize/column-resize.js

@@ -0,0 +1,290 @@
+import { Plugin } from 'prosemirror-state';
+import { tableNodeTypes, TableMap } from 'prosemirror-tables';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { colgroupAttr } from '../../config/constants';
+import { TableView } from './table-view';
+import { otherResizeHandle, otherResizing, parseStyle, setNodeStyle, tableColumnResizing as key } from './utils';
+export function columnResizing() {
+    // tslint:disable-next-line:variable-name
+    const View = TableView, lastColumnResizable = true, handleWidth = 5, cellMinWidth = 25;
+    let plugin = new Plugin({
+        key,
+        state: {
+            init(_, state) {
+                this.spec.props.nodeViews[tableNodeTypes(state.schema).table.name] = (node, view) => new View(node, view);
+                return new ResizeState(-1, null);
+            },
+            apply(tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            attributes(state) {
+                if (otherResizeHandle(key, state)) {
+                    return null;
+                }
+                let pluginState = key.getState(state);
+                return pluginState.activeHandle > -1 ? { class: 'resize-cursor' } : null;
+            },
+            handleDOMEvents: {
+                mousemove(view, event) {
+                    if (!otherResizing(key, view.state)) {
+                        handleMouseMove(view, event, handleWidth, cellMinWidth, lastColumnResizable);
+                    }
+                    return false;
+                },
+                mouseleave(view) {
+                    handleMouseLeave(view);
+                    return false;
+                },
+                mousedown(view, event) {
+                    return handleMouseDown(view, event, cellMinWidth);
+                }
+            },
+            decorations(state) {
+                if (otherResizing(key, state)) {
+                    return DecorationSet.empty;
+                }
+                let pluginState = key.getState(state);
+                if (pluginState.activeHandle > -1) {
+                    return handleDecorations(state, pluginState.activeHandle);
+                }
+            },
+            nodeViews: {}
+        }
+    });
+    return plugin;
+}
+function cellAround($pos) {
+    for (let d = $pos.depth - 1; d > 0; d--) {
+        if ($pos.node(d).type.spec.tableRole === 'row') {
+            return $pos.node(0).resolve($pos.before(d + 1));
+        }
+    }
+    return null;
+}
+function pointsAtCell($pos) {
+    return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
+}
+class ResizeState {
+    constructor(activeHandle, dragging) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+    }
+    apply(tr) {
+        let state = this, action = tr.getMeta(key);
+        if (action && action.setHandle != null) {
+            return new ResizeState(action.setHandle, null);
+        }
+        if (action && action.setDragging !== undefined) {
+            return new ResizeState(state.activeHandle, action.setDragging);
+        }
+        if (state.activeHandle > -1 && tr.docChanged) {
+            let handle = tr.mapping.map(state.activeHandle, -1);
+            if (!pointsAtCell(tr.doc.resolve(handle))) {
+                handle = null;
+            }
+            state = new ResizeState(handle, state.dragging);
+        }
+        return state;
+    }
+}
+function handleMouseMove(view, event, handleWidth, _cellMinWidth, lastColumnResizable) {
+    let pluginState = key.getState(view.state);
+    if (!pluginState.dragging) {
+        let target = domCellAround(event.target), cell = -1;
+        if (target) {
+            let { left, right } = target.getBoundingClientRect();
+            if (event.clientX - left <= handleWidth) {
+                cell = edgeCell(view, event, 'left');
+            }
+            else if (right - event.clientX <= handleWidth) {
+                cell = edgeCell(view, event, 'right');
+            }
+        }
+        if (cell !== pluginState.activeHandle) {
+            if (!lastColumnResizable && cell !== -1) {
+                let $cell = view.state.doc.resolve(cell);
+                let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
+                let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
+                if (col === map.width - 1) {
+                    return;
+                }
+            }
+            updateHandle(view, cell);
+        }
+    }
+}
+function handleMouseLeave(view) {
+    let pluginState = key.getState(view.state);
+    if (pluginState.activeHandle > -1 && !pluginState.dragging) {
+        updateHandle(view, -1);
+    }
+}
+function handleMouseDown(view, event, cellMinWidth) {
+    let pluginState = key.getState(view.state);
+    if (pluginState.activeHandle === -1 || pluginState.dragging) {
+        return false;
+    }
+    let $cell = view.state.doc.resolve(pluginState.activeHandle);
+    const row = $cell.parent;
+    const cellIndex = $cell.index();
+    let colSpan = 0;
+    for (let i = 0; i <= cellIndex; i++) {
+        colSpan += row.child(i).attrs.colspan;
+    }
+    const tableNode = $cell.node($cell.depth - 1);
+    let dom = view.domAtPos(pluginState.activeHandle);
+    let domCell = dom.node.childNodes[dom.offset];
+    let tableDom = domCell.closest('table');
+    let col, tableAttrs;
+    if (tableNode.attrs[colgroupAttr]) {
+        const colgroup = tableDom.firstChild;
+        col = colgroup.children[colSpan - 1];
+        if (!col.style.width) {
+            col.style.width = col.offsetWidth + 'px';
+        }
+    }
+    else {
+        let total = 0;
+        for (let i = 0; i < row.childCount; i++) {
+            total += row.child(i).attrs.colspan;
+        }
+        const colgroup = document.createElement('colgroup');
+        const cols = new Array(total);
+        for (let i = 0; i < total; i++) {
+            cols[i] = document.createElement('col');
+            colgroup.appendChild(cols[i]);
+        }
+        tableDom.insertBefore(colgroup, tableDom.firstChild);
+        col = cols[cellIndex];
+        col.style.width = col.offsetWidth + 'px';
+        tableAttrs = Object.assign({}, tableNode.attrs, { [colgroupAttr]: '<colgroup>' + cols.reduce((acc, cur) => acc + cur.outerHTML, '') + '</colgroup>' });
+    }
+    let width = parseFloat(col.style.width);
+    const tr = view.state.tr.setMeta(key, { setDragging: { startX: event.clientX, startWidth: width } });
+    if (!tableDom.style.width) {
+        const widths = Array.from(col.parentNode.children).map((c) => c.style.width);
+        if (widths.every(Boolean)) {
+            const sum = widths.reduce((acc, cur) => acc + parseFloat(cur), 0);
+            tableAttrs = setNodeStyle(tableNode.attrs, 'width', sum + 'px');
+        }
+    }
+    if (tableAttrs) {
+        const tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
+        tr.setNodeMarkup(tablePos, null, tableAttrs);
+    }
+    view.dispatch(tr);
+    function finish(ev) {
+        ev.view.removeEventListener('mouseup', finish);
+        ev.view.removeEventListener('mousemove', move);
+        let curPluginState = key.getState(view.state);
+        if (curPluginState.dragging) {
+            updateColumnWidth(view, curPluginState.activeHandle, draggedWidth(curPluginState.dragging, ev, cellMinWidth));
+            view.dispatch(view.state.tr.setMeta(key, { setDragging: null }));
+        }
+    }
+    function move(ev) {
+        if (!ev.which) {
+            return finish(ev);
+        }
+        let curPluginState = key.getState(view.state);
+        let dragged = draggedWidth(curPluginState.dragging, ev, cellMinWidth);
+        displayColumnWidth(view, curPluginState.activeHandle, dragged, cellMinWidth);
+    }
+    event.view.addEventListener('mouseup', finish);
+    event.view.addEventListener('mousemove', move);
+    event.preventDefault();
+    return true;
+}
+function domCellAround(target) {
+    while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
+        target = target.classList.contains('ProseMirror') ? null : target.parentNode;
+    }
+    return target;
+}
+function edgeCell(view, event, side) {
+    let found = view.posAtCoords({ left: event.clientX, top: event.clientY });
+    if (!found) {
+        return -1;
+    }
+    let { pos } = found;
+    let $cell = cellAround(view.state.doc.resolve(pos));
+    if (!$cell) {
+        return -1;
+    }
+    if (side === 'right') {
+        return $cell.pos;
+    }
+    let map = TableMap.get($cell.node(-1)), start = $cell.start(-1);
+    let index = map.map.indexOf($cell.pos - start);
+    return index % map.width === 0 ? -1 : start + map.map[index - 1];
+}
+function draggedWidth(dragging, event, cellMinWidth) {
+    let offset = event.clientX - dragging.startX;
+    return Math.max(cellMinWidth, dragging.startWidth + offset);
+}
+function updateHandle(view, value) {
+    view.dispatch(view.state.tr.setMeta(key, { setHandle: value }));
+}
+function updateColumnWidth(view, cell, _width) {
+    let $cell = view.state.doc.resolve(cell);
+    let tableNode = $cell.node(-1), start = $cell.start(-1);
+    let tr = view.state.tr;
+    const tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
+    const tableDom = view.nodeDOM(start).closest('table');
+    let attrs = tableNode.attrs;
+    if (tableNode && attrs[colgroupAttr]) {
+        const colgroup = tableDom.firstChild;
+        attrs = Object.assign({}, attrs, { [colgroupAttr]: colgroup.outerHTML });
+    }
+    const tableDomWidth = tableDom.style.width;
+    if (tableDom && tableDomWidth && parseStyle(attrs.style).width !== tableDomWidth) {
+        attrs = setNodeStyle(attrs, 'width', tableDomWidth);
+        tr.setNodeMarkup(tablePos, null, attrs);
+    }
+    if (tr.docChanged) {
+        view.dispatch(tr);
+    }
+}
+function displayColumnWidth(view, cell, width, _cellMinWidth) {
+    let $cell = view.state.doc.resolve(cell);
+    let table = $cell.node(-1), start = $cell.start(-1);
+    let col = TableMap.get(table).colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
+    let dom = view.domAtPos($cell.start(-1)).node;
+    if (dom.nodeName !== 'TABLE') {
+        dom = dom.closest('table');
+    }
+    const tableDom = dom;
+    const colgroup = tableDom.firstChild;
+    const cols = Array.from(colgroup.children);
+    cols[col].style.width = width + 'px';
+    if (tableDom.style.width) {
+        const widths = cols.map(c => c.style.width);
+        if (widths.every(Boolean)) {
+            const sum = widths.reduce((acc, cur) => acc + parseFloat(cur), 0);
+            tableDom.style.width = sum + 'px';
+        }
+    }
+}
+function handleDecorations(state, cell) {
+    let decorations = [];
+    let $cell = state.doc.resolve(cell);
+    let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
+    let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan;
+    for (let row = 0; row < map.height; row++) {
+        let index = col + row * map.width - 1;
+        // For positions that are 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 || map.map[index] !== map.map[index + 1]) &&
+            (row === 0 || map.map[index - 1] !== map.map[index - 1 - map.width])) {
+            let cellPos = map.map[index];
+            let pos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1;
+            let dom = document.createElement('div');
+            dom.className = 'column-resize-handle';
+            decorations.push(Decoration.widget(pos, dom));
+        }
+    }
+    return DecorationSet.create(state.doc, decorations);
+}

package/dist/es2015/plugins/table-resize/index.js

@@ -0,0 +1,8 @@
+import { columnResizing } from './column-resize';
+import { tableResizing as tableResize } from './table-resize';
+import { rowResizing } from './row-resize';
+export const tableResizing = () => [
+    tableResize(),
+    columnResizing(),
+    rowResizing()
+];

package/dist/es2015/plugins/table-resize/row-resize.js

@@ -0,0 +1,240 @@
+import { Plugin } from 'prosemirror-state';
+import { TableMap, tableNodeTypes } from 'prosemirror-tables';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { otherResizeHandle, otherResizing, parseStyle, setNodeStyle, tableRowResizing as key } from './utils';
+class TableRowView {
+    ignoreMutation(record) {
+        return record.type === 'attributes' && record.attributeName === 'style' && record.target.nodeName === 'TR';
+    }
+}
+export function rowResizing() {
+    const handleWidth = 5, rowMinHeight = 25, lastRowResizable = true;
+    let plugin = new Plugin({
+        key,
+        state: {
+            init(_, state) {
+                this.spec.props.nodeViews[tableNodeTypes(state.schema).row.name] = (_node, _view) => new TableRowView();
+                return new ResizeState(-1, null);
+            },
+            apply(tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            attributes(state) {
+                if (otherResizeHandle(key, state)) {
+                    return null;
+                }
+                let pluginState = key.getState(state);
+                return pluginState.activeHandle > -1 ? { class: 'resize-cursor-vertical' } : null;
+            },
+            handleDOMEvents: {
+                mousemove(view, event) {
+                    if (!otherResizing(key, view.state)) {
+                        handleMouseMove(view, event, handleWidth, rowMinHeight, lastRowResizable);
+                    }
+                    return false;
+                },
+                mouseleave(view) {
+                    handleMouseLeave(view);
+                    return false;
+                },
+                mousedown(view, event) {
+                    return handleMouseDown(view, event, rowMinHeight);
+                }
+            },
+            decorations(state) {
+                if (otherResizing(key, state)) {
+                    return DecorationSet.empty;
+                }
+                let pluginState = key.getState(state);
+                if (pluginState.activeHandle > -1) {
+                    return handleDecorations(state, pluginState.activeHandle);
+                }
+            },
+            nodeViews: {}
+        }
+    });
+    return plugin;
+}
+function pointsAtCell($pos) {
+    return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
+}
+class ResizeState {
+    constructor(activeHandle, dragging) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+    }
+    apply(tr) {
+        let state = this, action = tr.getMeta(key);
+        if (action && action.setHandle != null) {
+            return new ResizeState(action.setHandle, null);
+        }
+        if (action && action.setDragging !== undefined) {
+            return new ResizeState(state.activeHandle, action.setDragging);
+        }
+        if (state.activeHandle > -1) { //  && tr.docChanged
+            let handle = tr.mapping.map(state.activeHandle, -1);
+            if (!pointsAtCell(tr.doc.resolve(handle))) {
+                handle = null;
+            }
+            state = new ResizeState(handle, state.dragging);
+        }
+        return state;
+    }
+}
+function handleMouseMove(view, event, handleWidth, _rowMinHeight, lastRowResizable) {
+    let pluginState = key.getState(view.state);
+    if (!pluginState.dragging) {
+        let target = domCellAround(event.target), cell = -1;
+        if (target) {
+            const rowDom = target.parentNode;
+            let domRect = rowDom.getBoundingClientRect();
+            if (event.clientY - domRect.top <= handleWidth) {
+                cell = edgeCell(view, event, 'up');
+            }
+            else if (domRect.bottom - event.clientY <= handleWidth) {
+                cell = edgeCell(view, event, 'down');
+            }
+        }
+        if (cell !== pluginState.activeHandle) {
+            if (!lastRowResizable && cell !== -1) {
+                // let $cell = view.state.doc.resolve(cell);
+                // let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
+                // let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
+                // if (col === map.width - 1) {
+                //     return;
+                // }
+            }
+            updateHandle(view, cell);
+        }
+    }
+}
+function handleMouseLeave(view) {
+    let pluginState = key.getState(view.state);
+    if (pluginState.activeHandle > -1 && !pluginState.dragging) {
+        updateHandle(view, -1);
+    }
+}
+function handleMouseDown(view, event, rowMinHeight) {
+    let pluginState = key.getState(view.state);
+    if (pluginState.activeHandle === -1 || pluginState.dragging) {
+        return false;
+    }
+    const doc = view.state.doc;
+    let $pos = doc.resolve(pluginState.activeHandle);
+    let row = doc.nodeAt(pluginState.activeHandle);
+    let table = $pos.parent;
+    let rowHeightStr = parseStyle(row.attrs.style).height;
+    let tableHeight = parseStyle(table.attrs.style).height;
+    let rowHeight = rowHeightStr ? parseFloat(rowHeightStr) : 0;
+    if (!rowHeightStr) {
+        const tr = view.nodeDOM(pluginState.activeHandle);
+        rowHeight = tr.offsetHeight;
+    }
+    view.dispatch(view.state.tr.setMeta(key, {
+        setDragging: {
+            startY: event.clientY,
+            startHeight: { rowHeight, tableHeight }
+        }
+    }));
+    function finish(ev) {
+        ev.view.removeEventListener('mouseup', finish);
+        ev.view.removeEventListener('mousemove', move);
+        let curPluginState = key.getState(view.state);
+        if (curPluginState.dragging) {
+            const tr = view.state.tr.setMeta(key, { setDragging: null });
+            updateRowHeight(view, tr, curPluginState.activeHandle, draggedHeight(curPluginState.dragging, ev, rowMinHeight));
+            view.dispatch(tr);
+        }
+    }
+    function move(ev) {
+        if (!ev.which) {
+            return finish(ev);
+        }
+        let curPluginState = key.getState(view.state);
+        let dragged = draggedHeight(curPluginState.dragging, ev, rowMinHeight);
+        let offset = ev.clientY - curPluginState.dragging.startY;
+        displayRowHeight(view, curPluginState.activeHandle, dragged, rowMinHeight, offset, tableHeight);
+    }
+    event.view.addEventListener('mouseup', finish);
+    event.view.addEventListener('mousemove', move);
+    event.preventDefault();
+    return true;
+}
+function domCellAround(target) {
+    while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
+        target = target.classList.contains('ProseMirror') ? null : target.parentNode;
+    }
+    return target;
+}
+function edgeCell(view, event, side) {
+    let found = view.posAtCoords({ left: event.clientX, top: event.clientY });
+    if (!found) {
+        return -1;
+    }
+    let { pos } = found;
+    let doc = view.state.doc;
+    let $pos = doc.resolve(pos);
+    let rowDepth = new Array($pos.depth + 1).fill(0).findIndex((_, i) => $pos.node(i).type.spec.tableRole === 'row');
+    if (rowDepth === -1) {
+        return -1;
+    }
+    let tableDepth = rowDepth - 1;
+    let rowIndex = $pos.index(tableDepth);
+    rowIndex += side === 'up' ? -1 : 0;
+    if (rowIndex < 0) {
+        return -1;
+    }
+    let rowPos = $pos.posAtIndex(rowIndex, tableDepth);
+    return rowPos;
+}
+function draggedHeight(dragging, event, rowMinHeight) {
+    let offset = event.clientY - dragging.startY;
+    return Math.max(rowMinHeight, dragging.startHeight.rowHeight + offset);
+}
+function updateHandle(view, value) {
+    view.dispatch(view.state.tr.setMeta(key, { setHandle: value }));
+}
+function updateRowHeight(view, tr, rowPos, height) {
+    const doc = view.state.doc;
+    let row = doc.nodeAt(rowPos);
+    tr.setNodeMarkup(rowPos, null, setNodeStyle(row.attrs, 'height', height + 'px'));
+    const dom = view.nodeDOM(rowPos);
+    const table = dom && dom.closest('table');
+    const tableHeight = table && table.style.height;
+    if (tableHeight) {
+        let $pos = doc.resolve(rowPos);
+        let tablePos = $pos.start($pos.depth) - 1;
+        tr.setNodeMarkup(tablePos, null, setNodeStyle($pos.parent.attrs, 'height', tableHeight));
+    }
+}
+// tslint:disable-next-line:max-line-length
+function displayRowHeight(view, rowPos, height, rowMinHeight, offset, tableHeight) {
+    const dom = view.nodeDOM(rowPos);
+    if (dom) {
+        dom.style.height = Math.max(height, rowMinHeight) + 'px';
+        const table = dom.closest('table');
+        const newHeight = (parseFloat(tableHeight) + offset) + 'px';
+        const current = table && table.style.height;
+        if (current && current !== newHeight) {
+            table.style.height = (parseFloat(tableHeight) + offset) + 'px';
+        }
+    }
+}
+function handleDecorations(state, pos) {
+    let decorations = [];
+    if (typeof pos !== 'number') {
+        return;
+    }
+    let $row = state.doc.resolve(pos), table = $row.parent, map = TableMap.get(table), rowIndex = $row.index($row.depth), start = $row.start($row.depth);
+    for (let col = 0; col < map.width; col++) {
+        let index = col + rowIndex * map.width;
+        let cellPos = map.map[index];
+        let widgetPos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1;
+        let dom = document.createElement('div');
+        dom.className = 'row-resize-handle';
+        decorations.push(Decoration.widget(widgetPos, dom));
+    }
+    return DecorationSet.create(state.doc, decorations);
+}