@progress/kendo-editor-common 1.8.2-dev.202204060750 → 1.9.0-dev.202204180753

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

@@ -0,0 +1,276 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var prosemirror_state_1 = require("prosemirror-state");
+var prosemirror_tables_1 = require("prosemirror-tables");
+var prosemirror_view_1 = require("prosemirror-view");
+var constants_1 = require("../../config/constants");
+var table_view_1 = require("./table-view");
+var utils_1 = require("./utils");
+function columnResizing() {
+    // tslint:disable-next-line:variable-name
+    var View = table_view_1.TableView, handleWidth = 5, cellMinWidth = 25;
+    var plugin = new prosemirror_state_1.Plugin({
+        key: utils_1.tableColumnResizing,
+        state: {
+            init: function (_, state) {
+                this.spec.props.nodeViews[prosemirror_tables_1.tableNodeTypes(state.schema).table.name] = function (node, view) { return new View(node, view); };
+                return new ResizeState(-1, null);
+            },
+            apply: function (tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            attributes: function (state) {
+                if (utils_1.otherResizeHandle(utils_1.tableColumnResizing, state)) {
+                    return null;
+                }
+                var pluginState = utils_1.tableColumnResizing.getState(state);
+                return pluginState.activeHandle > -1 ? { class: 'resize-cursor' } : null;
+            },
+            handleDOMEvents: {
+                mousemove: function (view, event) {
+                    if (!utils_1.otherResizing(utils_1.tableColumnResizing, view.state)) {
+                        handleMouseMove(view, event, handleWidth);
+                    }
+                    return false;
+                },
+                mouseleave: function (view) {
+                    handleMouseLeave(view);
+                    return false;
+                },
+                mousedown: function (view, event) {
+                    return handleMouseDown(view, event, cellMinWidth);
+                }
+            },
+            decorations: function (state) {
+                if (!utils_1.otherResizing(utils_1.tableColumnResizing, state)) {
+                    var pluginState = utils_1.tableColumnResizing.getState(state);
+                    if (pluginState.activeHandle > -1) {
+                        return handleDecorations(state, pluginState.activeHandle);
+                    }
+                }
+                return prosemirror_view_1.DecorationSet.empty;
+            },
+            nodeViews: {}
+        }
+    });
+    return plugin;
+}
+exports.columnResizing = columnResizing;
+function pointsAtCell($pos) {
+    return Boolean($pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter);
+}
+var ResizeState = /** @class */ (function () {
+    function ResizeState(activeHandle, dragging) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+    }
+    ResizeState.prototype.apply = function (tr) {
+        var state = this, action = tr.getMeta(utils_1.tableColumnResizing);
+        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) {
+            var handle = tr.mapping.map(state.activeHandle, -1);
+            if (!pointsAtCell(tr.doc.resolve(handle))) {
+                handle = -1;
+            }
+            state = new ResizeState(handle, state.dragging);
+        }
+        return state;
+    };
+    return ResizeState;
+}());
+function handleMouseMove(view, event, handleWidth) {
+    var pluginState = utils_1.tableColumnResizing.getState(view.state);
+    if (!pluginState.dragging) {
+        var target = utils_1.domCellAround(event.target), cell = -1;
+        if (target) {
+            var indexes = utils_1.cellIndexes(target);
+            var _a = target.getBoundingClientRect(), left = _a.left, right = _a.right;
+            if (Math.abs(event.clientX - left) <= handleWidth && indexes.cellIndex > 0) {
+                indexes.cellIndex--;
+                cell = edgeCell(view, event, indexes);
+            }
+            else if (right - event.clientX > 0 && right - event.clientX <= handleWidth) {
+                cell = edgeCell(view, event, indexes);
+            }
+        }
+        if (cell !== pluginState.activeHandle) {
+            updateHandle(view, cell);
+        }
+    }
+}
+function handleMouseLeave(view) {
+    var pluginState = utils_1.tableColumnResizing.getState(view.state);
+    if (pluginState.activeHandle > -1 && !pluginState.dragging) {
+        updateHandle(view, -1);
+    }
+}
+function handleMouseDown(view, event, cellMinWidth) {
+    var _a;
+    var pluginState = utils_1.tableColumnResizing.getState(view.state);
+    if (pluginState.activeHandle === -1 || pluginState.dragging) {
+        return false;
+    }
+    var $cell = view.state.doc.resolve(pluginState.activeHandle);
+    var row = $cell.parent;
+    var cellIndex = $cell.index();
+    var colSpan = 0;
+    for (var i = 0; i <= cellIndex; i++) {
+        colSpan += row.child(i).attrs.colspan;
+    }
+    var tableNode = $cell.node($cell.depth - 1);
+    var dom = view.domAtPos(pluginState.activeHandle);
+    var domCell = dom.node.childNodes[dom.offset];
+    var tableDom = domCell.closest('table');
+    var col, tableAttrs;
+    if (tableNode.attrs[constants_1.colgroupAttr]) {
+        var colgroup = tableDom.firstChild;
+        col = colgroup.children[colSpan - 1];
+        if (!col.style.width) {
+            col.style.width = col.offsetWidth + 'px';
+        }
+    }
+    else {
+        var total = 0;
+        for (var i = 0; i < row.childCount; i++) {
+            total += row.child(i).attrs.colspan;
+        }
+        var colgroup = document.createElement('colgroup');
+        var cols = new Array(total);
+        for (var 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 = tslib_1.__assign({}, tableNode.attrs, (_a = {}, _a[constants_1.colgroupAttr] = '<colgroup>' + cols.reduce(function (acc, cur) { return acc + cur.outerHTML; }, '') + '</colgroup>', _a));
+    }
+    var width = parseFloat(col.style.width);
+    var tr = view.state.tr.setMeta(utils_1.tableColumnResizing, { setDragging: { startX: event.clientX, startWidth: width } });
+    if (!tableDom.style.width) {
+        var widths = Array.from(col.parentNode.children).map(function (c) { return c.style.width; });
+        if (widths.every(Boolean)) {
+            var sum = widths.reduce(function (acc, cur) { return acc + parseFloat(cur); }, 0);
+            tableAttrs = utils_1.setNodeStyle(tableAttrs || tableNode.attrs, 'width', sum + 'px');
+        }
+    }
+    if (tableAttrs) {
+        var 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);
+        var curPluginState = utils_1.tableColumnResizing.getState(view.state);
+        if (curPluginState.dragging) {
+            updateColumnWidth(view, curPluginState.activeHandle, draggedWidth(curPluginState.dragging, ev, cellMinWidth));
+            view.dispatch(view.state.tr.setMeta(utils_1.tableColumnResizing, { setDragging: null }));
+        }
+    }
+    function move(ev) {
+        if (!ev.which) {
+            return finish(ev);
+        }
+        var curPluginState = utils_1.tableColumnResizing.getState(view.state);
+        var 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 edgeCell(view, event, indexes) {
+    var found = view.posAtCoords({ left: event.clientX, top: event.clientY });
+    if (!found) {
+        return -1;
+    }
+    var $pos = view.state.doc.resolve(found.pos);
+    var parentTable = utils_1.parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; });
+    if (parentTable === null) {
+        return -1;
+    }
+    var tablePos = $pos.start(parentTable.depth);
+    var tableNode = parentTable.node;
+    var map = prosemirror_tables_1.TableMap.get(tableNode);
+    var cell = tablePos + map.map[(map.width * indexes.rowIndex) + indexes.cellIndex];
+    return cell;
+}
+function draggedWidth(dragging, event, cellMinWidth) {
+    var offset = event.clientX - dragging.startX;
+    return Math.max(cellMinWidth, dragging.startWidth + offset);
+}
+function updateHandle(view, value) {
+    view.dispatch(view.state.tr.setMeta(utils_1.tableColumnResizing, { setHandle: value }));
+}
+function updateColumnWidth(view, cell, _width) {
+    var _a;
+    var $cell = view.state.doc.resolve(cell);
+    var tableNode = $cell.node(-1), start = $cell.start(-1);
+    var tr = view.state.tr;
+    var tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
+    var tableDom = view.nodeDOM(start).closest('table');
+    var attrs = tableNode.attrs;
+    if (tableNode && attrs[constants_1.colgroupAttr]) {
+        var colgroup = tableDom.firstChild;
+        attrs = tslib_1.__assign({}, attrs, (_a = {}, _a[constants_1.colgroupAttr] = colgroup.outerHTML, _a));
+    }
+    var tableDomWidth = tableDom.style.width;
+    if (tableDom && tableDomWidth && utils_1.parseStyle(attrs.style).width !== tableDomWidth) {
+        attrs = utils_1.setNodeStyle(attrs, 'width', tableDomWidth);
+        tr.setNodeMarkup(tablePos, null, attrs);
+    }
+    if (tr.docChanged) {
+        view.dispatch(tr);
+    }
+}
+function displayColumnWidth(view, cell, width, _cellMinWidth) {
+    var $cell = view.state.doc.resolve(cell);
+    var table = $cell.node(-1), start = $cell.start(-1);
+    var col = prosemirror_tables_1.TableMap.get(table).colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
+    var dom = view.domAtPos($cell.start(-1)).node;
+    if (dom.nodeName !== 'TABLE') {
+        dom = dom.closest('table');
+    }
+    var tableDom = dom;
+    var colgroup = tableDom.firstChild;
+    var cols = Array.from(colgroup.children);
+    cols[col].style.width = width + 'px';
+    if (tableDom.style.width) {
+        var widths = cols.map(function (c) { return c.style.width; });
+        if (widths.every(Boolean)) {
+            var sum = widths.reduce(function (acc, cur) { return acc + parseFloat(cur); }, 0);
+            tableDom.style.width = sum + 'px';
+        }
+    }
+}
+function handleDecorations(state, cell) {
+    var decorations = [];
+    var $cell = state.doc.resolve(cell);
+    var table = $cell.node(-1), map = prosemirror_tables_1.TableMap.get(table), start = $cell.start(-1);
+    var col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan;
+    for (var row = 0; row < map.height; row++) {
+        var 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])) {
+            var cellPos = map.map[index];
+            var pos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1;
+            var dom = document.createElement('div');
+            dom.className = 'column-resize-handle';
+            decorations.push(prosemirror_view_1.Decoration.widget(pos, dom));
+        }
+    }
+    return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
+}

package/dist/npm/plugins/table-resize/index.d.ts

@@ -0,0 +1 @@
+export declare const tableResizing: () => import("prosemirror-state").Plugin<any, any>[];

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var column_resize_1 = require("./column-resize");
+var table_resize_1 = require("./table-resize");
+var row_resize_1 = require("./row-resize");
+exports.tableResizing = function () { return [
+    table_resize_1.tableResizing(),
+    column_resize_1.columnResizing(),
+    row_resize_1.rowResizing()
+]; };

package/dist/npm/plugins/table-resize/row-resize.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'prosemirror-state';
+export declare function rowResizing(): Plugin;

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

@@ -0,0 +1,233 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var prosemirror_state_1 = require("prosemirror-state");
+var prosemirror_tables_1 = require("prosemirror-tables");
+var prosemirror_view_1 = require("prosemirror-view");
+var utils_1 = require("./utils");
+var TableRowView = /** @class */ (function () {
+    function TableRowView() {
+    }
+    TableRowView.prototype.ignoreMutation = function (record) {
+        return record.type === 'attributes' && record.attributeName === 'style' && record.target.nodeName === 'TR';
+    };
+    return TableRowView;
+}());
+function rowResizing() {
+    var handleWidth = 5;
+    var plugin = new prosemirror_state_1.Plugin({
+        key: utils_1.tableRowResizing,
+        state: {
+            init: function (_, state) {
+                this.spec.props.nodeViews[prosemirror_tables_1.tableNodeTypes(state.schema).row.name] = function (_node, _view) { return new TableRowView(); };
+                return new ResizeState(-1, null);
+            },
+            apply: function (tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            attributes: function (state) {
+                if (utils_1.otherResizeHandle(utils_1.tableRowResizing, state)) {
+                    return null;
+                }
+                var pluginState = utils_1.tableRowResizing.getState(state);
+                return pluginState.activeHandle > -1 ? { class: 'resize-cursor-vertical' } : null;
+            },
+            handleDOMEvents: {
+                mousemove: function (view, event) {
+                    if (!utils_1.otherResizing(utils_1.tableRowResizing, view.state)) {
+                        handleMouseMove(view, event, handleWidth);
+                    }
+                    return false;
+                },
+                mouseleave: function (view) {
+                    handleMouseLeave(view);
+                    return false;
+                },
+                mousedown: function (view, event) {
+                    return handleMouseDown(view, event);
+                }
+            },
+            decorations: function (state) {
+                if (utils_1.otherResizing(utils_1.tableRowResizing, state)) {
+                    return prosemirror_view_1.DecorationSet.empty;
+                }
+                var pluginState = utils_1.tableRowResizing.getState(state);
+                if (pluginState.activeHandle > -1) {
+                    return handleDecorations(state, pluginState.activeHandle);
+                }
+            },
+            nodeViews: {}
+        }
+    });
+    return plugin;
+}
+exports.rowResizing = rowResizing;
+function pointsAtCell($pos) {
+    return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
+}
+var ResizeState = /** @class */ (function () {
+    function ResizeState(activeHandle, dragging) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+    }
+    ResizeState.prototype.apply = function (tr) {
+        var state = this, action = tr.getMeta(utils_1.tableRowResizing);
+        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) {
+            var handle = tr.mapping.map(state.activeHandle, -1);
+            if (!pointsAtCell(tr.doc.resolve(handle))) {
+                handle = null;
+            }
+            state = new ResizeState(handle, state.dragging);
+        }
+        return state;
+    };
+    return ResizeState;
+}());
+function handleMouseMove(view, event, handleWidth) {
+    var pluginState = utils_1.tableRowResizing.getState(view.state);
+    if (!pluginState.dragging) {
+        var target = utils_1.domCellAround(event.target), row = -1;
+        if (target) {
+            var rowDom = target.parentNode;
+            var domRect = rowDom.getBoundingClientRect();
+            if (Math.abs(event.clientY - domRect.top) <= handleWidth && rowDom.rowIndex > 0) {
+                row = edgeRow(view, event, rowDom.rowIndex - 1);
+            }
+            else if (domRect.bottom - event.clientY > 0 && domRect.bottom - event.clientY <= handleWidth) {
+                row = edgeRow(view, event, rowDom.rowIndex);
+            }
+        }
+        if (row !== pluginState.activeHandle) {
+            updateHandle(view, row);
+        }
+    }
+}
+function handleMouseLeave(view) {
+    var pluginState = utils_1.tableRowResizing.getState(view.state);
+    if (pluginState.activeHandle > -1 && !pluginState.dragging) {
+        updateHandle(view, -1);
+    }
+}
+function handleMouseDown(view, event) {
+    var pluginState = utils_1.tableRowResizing.getState(view.state);
+    if (pluginState.activeHandle === -1 || pluginState.dragging) {
+        return false;
+    }
+    var doc = view.state.doc;
+    var $pos = doc.resolve(pluginState.activeHandle);
+    var row = doc.nodeAt(pluginState.activeHandle);
+    var table = $pos.parent;
+    var rowHeightStr = utils_1.parseStyle(row.attrs.style).height;
+    var tableHeight = utils_1.parseStyle(table.attrs.style).height;
+    var rowHeight = rowHeightStr ? parseFloat(rowHeightStr) : 0;
+    if (!rowHeightStr) {
+        var tr = view.nodeDOM(pluginState.activeHandle);
+        rowHeight = tr.offsetHeight;
+    }
+    view.dispatch(view.state.tr.setMeta(utils_1.tableRowResizing, {
+        setDragging: {
+            startY: event.clientY,
+            startHeight: { rowHeight: rowHeight, tableHeight: tableHeight }
+        }
+    }));
+    function finish(ev) {
+        ev.view.removeEventListener('mouseup', finish);
+        ev.view.removeEventListener('mousemove', move);
+        var curPluginState = utils_1.tableRowResizing.getState(view.state);
+        if (curPluginState.dragging) {
+            var tr = view.state.tr.setMeta(utils_1.tableRowResizing, { setDragging: null });
+            updateRowHeight(view, tr, curPluginState.activeHandle);
+            view.dispatch(tr);
+        }
+    }
+    function move(ev) {
+        if (!ev.which) {
+            return finish(ev);
+        }
+        var curPluginState = utils_1.tableRowResizing.getState(view.state);
+        var dragged = draggedHeight(curPluginState.dragging, ev);
+        var offset = ev.clientY - curPluginState.dragging.startY;
+        displayRowHeight(view, curPluginState.activeHandle, dragged, offset, tableHeight);
+    }
+    event.view.addEventListener('mouseup', finish);
+    event.view.addEventListener('mousemove', move);
+    event.preventDefault();
+    return true;
+}
+function edgeRow(view, event, rowIndex) {
+    var found = view.posAtCoords({ left: event.clientX, top: event.clientY });
+    if (!found) {
+        return -1;
+    }
+    var $pos = view.state.doc.resolve(found.pos);
+    var parentTable = utils_1.parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; });
+    if (parentTable === null) {
+        return -1;
+    }
+    var tablePos = $pos.start(parentTable.depth);
+    var tableNode = parentTable.node;
+    var map = prosemirror_tables_1.TableMap.get(tableNode);
+    var row = tablePos + map.map[(map.width * rowIndex)] - 1;
+    return row;
+}
+function draggedHeight(dragging, event) {
+    var offset = event.clientY - dragging.startY;
+    return dragging.startHeight.rowHeight + offset;
+}
+function updateHandle(view, value) {
+    view.dispatch(view.state.tr.setMeta(utils_1.tableRowResizing, { setHandle: value }));
+}
+function updateRowHeight(view, tr, rowPos) {
+    var doc = view.state.doc;
+    var row = doc.nodeAt(rowPos);
+    var dom = view.nodeDOM(rowPos);
+    var win = (dom.ownerDocument && dom.ownerDocument.defaultView) || window;
+    dom.style.height = win.getComputedStyle(dom).height;
+    tr.setNodeMarkup(rowPos, null, utils_1.setNodeStyle(row.attrs, 'height', dom.style.height));
+    var table = dom && dom.closest('table');
+    var tableHeight = table && table.style.height;
+    if (tableHeight) {
+        var $pos = doc.resolve(rowPos);
+        var tablePos = $pos.start($pos.depth) - 1;
+        tr.setNodeMarkup(tablePos, null, utils_1.setNodeStyle($pos.parent.attrs, 'height', tableHeight));
+    }
+}
+function displayRowHeight(view, rowPos, height, offset, tableHeight) {
+    var dom = view.nodeDOM(rowPos);
+    if (dom) {
+        dom.style.height = height + 'px';
+        var win = (dom.ownerDocument && dom.ownerDocument.defaultView) || window;
+        dom.style.height = win.getComputedStyle(dom).height;
+        var table = dom.closest('table');
+        var newHeight = (parseFloat(tableHeight) + offset) + 'px';
+        var current = table && table.style.height;
+        if (current && current !== newHeight) {
+            table.style.height = (parseFloat(tableHeight) + offset) + 'px';
+            table.style.height = win.getComputedStyle(table).height;
+        }
+    }
+}
+function handleDecorations(state, pos) {
+    var decorations = [];
+    if (typeof pos !== 'number') {
+        return prosemirror_view_1.DecorationSet.empty;
+    }
+    var $row = state.doc.resolve(pos), table = $row.parent, map = prosemirror_tables_1.TableMap.get(table), rowIndex = $row.index($row.depth), start = $row.start($row.depth);
+    for (var col = 0; col < map.width; col++) {
+        var index = col + rowIndex * map.width;
+        var cellPos = map.map[index];
+        var cell = table.nodeAt(cellPos);
+        var widgetPos = start + cellPos + (cell ? cell.nodeSize : 0) - 1;
+        var dom = document.createElement('div');
+        dom.className = 'row-resize-handle';
+        decorations.push(prosemirror_view_1.Decoration.widget(widgetPos, dom));
+    }
+    return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
+}

package/dist/npm/plugins/table-resize/table-resize.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'prosemirror-state';
+export declare const tableResizing: (options?: {
+    node: string;
+}) => Plugin<any, any>;