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

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

@@ -0,0 +1,283 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var prosemirror_state_1 = require("prosemirror-state");
+var constants_1 = require("../../config/constants");
+var utils_1 = require("./utils");
+function parentNode(pos, predicate) {
+    for (var d = pos.depth; d > 0; d--) {
+        var node = pos.node(d);
+        if (predicate(node)) {
+            return node;
+        }
+    }
+    return null;
+}
+var directions = {
+    'southeast': { x: 1, y: 1 },
+    'east': { x: 1, y: 0 },
+    'south': { x: 0, y: 1 },
+    'north': { x: 0, y: -1 },
+    'west': { x: -1, y: 0 },
+    'southwest': { x: -1, y: 1 },
+    'northwest': { x: -1, y: -1 },
+    'northeast': { x: 1, y: -1 } // top right
+};
+var commonDir = {
+    'southeast': true,
+    'southwest': true,
+    'northwest': true,
+    'northeast': true
+};
+var horizontalDir = tslib_1.__assign({ 'east': true, 'west': true }, commonDir);
+var verticalDir = tslib_1.__assign({ 'south': true, 'north': true }, commonDir);
+var setSize = function (domNode, sizeType, value) {
+    domNode.style[sizeType] = value + 'px';
+};
+var ResizeState = /** @class */ (function () {
+    function ResizeState(activeHandle, dragging, nodePosition) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+        this.nodePosition = nodePosition;
+    }
+    ResizeState.prototype.apply = function (tr) {
+        var state = this, next = tr.getMeta(utils_1.tableResizeKey);
+        if (next) {
+            var nextState = new ResizeState(next.activeHandle, next.setDragging, next.nodePosition);
+            return nextState;
+        }
+        return state;
+    };
+    return ResizeState;
+}());
+var handleMouseMove = function (view, event, options) {
+    var state = utils_1.tableResizeKey.getState(view.state);
+    var dragging = state.dragging, nodePosition = state.nodePosition, activeHandle = state.activeHandle;
+    if (nodePosition < 0 || !dragging) {
+        return;
+    }
+    var resizedNode = utils_1.getTable(view.nodeDOM(nodePosition));
+    var rect = resizedNode.getBoundingClientRect();
+    var dir = directions[activeHandle];
+    var diffX = (event.clientX - dragging.startX) * dir.x;
+    var diffY = (event.clientY - dragging.startY) * dir.y;
+    var nodeWidth = resizedNode.offsetWidth;
+    var nodeHeight = resizedNode.offsetHeight;
+    var width = dir.x ? diffX + nodeWidth : rect.width;
+    var height = dir.y ? diffY + nodeHeight : rect.height;
+    if (options.lockRatio && dir.x && dir.y) {
+        var ratio = Math.min(width / nodeWidth, height / nodeHeight);
+        var lockWidth = nodeWidth * ratio;
+        var lockHeight = nodeHeight * ratio;
+        dragging.startX = event.clientX - (width - lockWidth) * dir.x;
+        dragging.startY = event.clientY - (height - lockHeight) * dir.y;
+        width = lockWidth;
+        height = lockHeight;
+    }
+    else {
+        dragging.startX = dir.x ? event.clientX : dragging.startX;
+        dragging.startY = dir.y ? event.clientY : dragging.startY;
+    }
+    if (horizontalDir[activeHandle]) {
+        setSize(resizedNode, 'width', width);
+    }
+    if (verticalDir[activeHandle]) {
+        setSize(resizedNode, 'height', height);
+    }
+};
+var toPercents = function (view, tr, tablePos) {
+    var tableNode = view.state.doc.nodeAt(tablePos);
+    var tableDom = utils_1.getTable(view.nodeDOM(tablePos));
+    var _a = tableSize(tableDom), tableWidth = _a.width, tableHeight = _a.height, colsWidth = _a.colsWidth;
+    var colgroup = tableDom.firstChild;
+    var cols = Array.from((colgroup && colgroup.children) || []);
+    // const borders = new Array(cols.length).fill(tableWidth / tableOffsetWidth / cols.length);
+    var widthChanged = false;
+    cols.forEach(function (col, i) {
+        if (col.style.width && !/%$/.test(col.style.width)) {
+            col.style.width = ((colsWidth[i]) * 100 / tableWidth) + '%';
+            widthChanged = true;
+        }
+    });
+    var rows = Array.from(tableDom.rows);
+    var heightChange = false;
+    tableNode.forEach(function (row, offset, index) {
+        var rowHeight = utils_1.parseStyle(row.attrs.style).height;
+        if (rowHeight && !/%$/.test(rowHeight)) {
+            tr.setNodeMarkup(tablePos + offset + 1, null, utils_1.setNodeStyle(row.attrs, 'height', (rows[index].offsetHeight * 100 / tableHeight) + '%'));
+            heightChange = true;
+        }
+    });
+    var tableAttrs = tableNode.attrs;
+    if (utils_1.parseStyle(tableAttrs.style).width !== tableWidth + 'px') {
+        tableAttrs = utils_1.setNodeStyle(tableAttrs, 'width', tableWidth + 'px');
+    }
+    if (widthChanged) {
+        tableAttrs[constants_1.colgroupAttr] = colgroup.outerHTML;
+    }
+    if (heightChange) {
+        tableAttrs = utils_1.setNodeStyle(tableAttrs, 'height', tableHeight + 'px');
+    }
+    if (widthChanged || heightChange) {
+        tr.setNodeMarkup(tablePos, null, tableAttrs);
+    }
+};
+var toPixels = function (view, tr, tablePos, attrs) {
+    var tableNode = view.state.doc.nodeAt(tablePos);
+    var tableDom = utils_1.getTable(view.nodeDOM(tablePos));
+    var rows = Array.from(tableDom.rows);
+    tableNode.forEach(function (row, offset, index) {
+        var rowHeight = utils_1.parseStyle(row.attrs.style).height;
+        if (rowHeight && !/px$/.test(rowHeight)) {
+            tr.setNodeMarkup(tablePos + offset + 1, null, utils_1.setNodeStyle(row.attrs, 'height', rows[index].offsetHeight + 'px'));
+        }
+    });
+    var colgroup = tableDom.firstChild;
+    var cols = Array.from((colgroup && colgroup.children) || []);
+    var widthChanged = false;
+    cols.forEach(function (col, i) {
+        if (col.style.width && !/px$/.test(col.style.width)) {
+            col.style.width = cols[i].offsetWidth + 'px';
+            widthChanged = true;
+        }
+    });
+    var tableAttrs = tslib_1.__assign({}, attrs);
+    if (widthChanged) {
+        tableAttrs[constants_1.colgroupAttr] = colgroup.outerHTML;
+    }
+    return tableAttrs;
+};
+var tableSize = function (table) {
+    var cols = Array.from(table.firstChild.children);
+    var colsWidth = cols.map(function (c) { return c.offsetWidth; });
+    var width = colsWidth.reduce(function (acc, cur) { return acc + cur; }, 0);
+    var height = table.offsetHeight; // Array.from(table.rows).reduce((acc, cur) => acc + cur.offsetHeight, 0);
+    return { width: width, height: height, colsWidth: colsWidth, offsetWidth: table.offsetWidth };
+};
+var handleMouseUp = function (view) {
+    var _a = utils_1.tableResizeKey.getState(view.state), dragging = _a.dragging, nodePosition = _a.nodePosition, activeHandle = _a.activeHandle;
+    if (dragging) {
+        var node = view.state.doc.nodeAt(nodePosition);
+        var dom = utils_1.getTable(view.nodeDOM(nodePosition));
+        var rect = tableSize(dom);
+        if (node) {
+            var width = rect.offsetWidth + 'px';
+            var height = rect.height + 'px';
+            var tr = view.state.tr;
+            var attrs = node.attrs;
+            var parsedStyles = utils_1.parseStyle(attrs.style);
+            if (horizontalDir[activeHandle] && dom.style.width && parsedStyles.width !== width) {
+                attrs = utils_1.setNodeStyle(attrs, 'width', width);
+            }
+            if (verticalDir[activeHandle] && dom.style.height && parsedStyles.height !== height) {
+                attrs = utils_1.setNodeStyle(attrs, 'height', height);
+            }
+            toPixels(view, tr, nodePosition, attrs);
+            tr.setNodeMarkup(nodePosition, null, attrs);
+            tr.setMeta('commandName', 'node-resize');
+            tr.setMeta('args', attrs);
+            tr.setMeta(utils_1.tableResizeKey, {
+                setDragging: null,
+                activeHandle: null,
+                nodePosition: nodePosition
+            });
+            view.dispatch(tr);
+        }
+    }
+};
+var handleMouseDown = function (view, event, options) {
+    var target = event.target;
+    var activeHandle = target.getAttribute(constants_1.dataDirection);
+    if (!activeHandle) {
+        return false;
+    }
+    var resizeState = utils_1.tableResizeKey.getState(view.state);
+    event.preventDefault();
+    var transaction = view.state.tr;
+    transaction.setMeta(utils_1.tableResizeKey, {
+        setDragging: { startX: event.clientX, startY: event.clientY },
+        activeHandle: activeHandle,
+        nodePosition: resizeState.nodePosition
+    });
+    transaction.setMeta('addToHistory', false);
+    toPercents(view, transaction, resizeState.nodePosition);
+    view.dispatch(transaction);
+    var curWindow = event.view || window;
+    function move(e) {
+        handleMouseMove(view, e, options);
+    }
+    function finish(_e) {
+        curWindow.removeEventListener('mouseup', finish);
+        curWindow.removeEventListener('mousemove', move);
+        handleMouseUp(view);
+    }
+    curWindow.addEventListener('mouseup', finish);
+    curWindow.addEventListener('mousemove', move);
+    return true;
+};
+exports.tableResizing = function (options) {
+    if (options === void 0) { options = { node: 'table', lockRatio: false }; }
+    return new prosemirror_state_1.Plugin({
+        key: utils_1.tableResizeKey,
+        view: function (_viewObj) { return ({
+            selectedNode: function (state, nodeType) {
+                var selection = state.selection;
+                var isNodeSelected = selection instanceof prosemirror_state_1.NodeSelection && nodeType === selection.node.type;
+                if (isNodeSelected && selection instanceof prosemirror_state_1.NodeSelection) {
+                    return { node: selection.node, pos: selection.from };
+                }
+                var node = parentNode(selection.$from, function (n) { return n.type === nodeType; });
+                if (node) {
+                    var tableDepth = new Array(selection.$from.depth + 1).fill(0)
+                        .findIndex(function (_, i) { return selection.$from.node(i).type.spec.tableRole === 'table'; });
+                    var pos = selection.$from.start(tableDepth) - 1;
+                    return { node: node, pos: pos };
+                }
+                return null;
+            },
+            update: function (view, prevState) {
+                var _a, _b, _c, _d;
+                var state = view.state;
+                var nodeType = state.schema.nodes[options.node];
+                var selected = this.selectedNode(state, nodeType);
+                var prevSelected = this.selectedNode(prevState, nodeType);
+                if (!selected && prevSelected && !prevState.doc.eq(view.state.doc)) {
+                    // selected table is deleted
+                    return;
+                }
+                if (selected || prevSelected) {
+                    var tr = state.tr;
+                    if (selected && prevSelected && selected.pos !== prevSelected.pos) {
+                        tr.setMeta(utils_1.tableResizeKey, { nodePosition: selected.pos });
+                        tr.setNodeMarkup(prevSelected.pos, nodeType, tslib_1.__assign({}, prevSelected.node.attrs, (_a = {}, _a[constants_1.resizableAttr] = false, _a)));
+                        tr.setNodeMarkup(selected.pos, nodeType, tslib_1.__assign({}, selected.node.attrs, (_b = {}, _b[constants_1.resizableAttr] = true, _b)));
+                        view.dispatch(tr);
+                    }
+                    else if (selected && !prevSelected) {
+                        tr.setMeta(utils_1.tableResizeKey, { nodePosition: selected.pos });
+                        view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, tslib_1.__assign({}, selected.node.attrs, (_c = {}, _c[constants_1.resizableAttr] = true, _c))));
+                    }
+                    else if (!selected && prevSelected) {
+                        tr.setMeta(utils_1.tableResizeKey, { nodePosition: -1 });
+                        view.dispatch(tr.setNodeMarkup(prevSelected.pos, nodeType, tslib_1.__assign({}, prevSelected.node.attrs, (_d = {}, _d[constants_1.resizableAttr] = false, _d))));
+                    }
+                }
+            }
+        }); },
+        state: {
+            init: function () {
+                return new ResizeState('', null, -1);
+            },
+            apply: function (tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            handleDOMEvents: {
+                mousedown: function (view, event) {
+                    return handleMouseDown(view, event, options);
+                }
+            }
+        }
+    });
+};

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

@@ -0,0 +1,17 @@
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+export declare class TableView {
+    node: Node;
+    view: EditorView;
+    table: HTMLTableElement;
+    colgroup: HTMLTableColElement;
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    private resizeHandles;
+    constructor(node: Node, view: EditorView);
+    update(node: Node): boolean;
+    ignoreMutation(record: MutationRecord): boolean;
+    destroy(): void;
+    private renderColgroup;
+    private setAttributes;
+}

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var constants_1 = require("../../config/constants");
+var schema_1 = require("../../config/schema");
+var directions = ['northwest', 'north', 'northeast', 'southwest', 'south', 'southeast', 'west', 'east'];
+var TableView = /** @class */ (function () {
+    function TableView(node, view) {
+        this.node = node;
+        this.view = view;
+        this.dom = document.createElement('div');
+        this.dom.className = constants_1.resizableWrap;
+        this.table = this.dom.appendChild(document.createElement('table'));
+        if (node.attrs[constants_1.colgroupAttr]) {
+            this.renderColgroup(node.attrs[constants_1.colgroupAttr]);
+        }
+        var tBody = this.table.appendChild(document.createElement('tbody'));
+        this.setAttributes(this.table, node.attrs);
+        this.resizeHandles = directions.map(function (dir) {
+            var handle = document.createElement('span');
+            handle.className = constants_1.resizeHandle + ' ' + dir;
+            handle.setAttribute(constants_1.dataDirection, dir);
+            return handle;
+        });
+        this.contentDOM = tBody;
+    }
+    TableView.prototype.update = function (node) {
+        var _this = this;
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        var prev = this.node;
+        this.node = node;
+        if (node.attrs[constants_1.resizableAttr]) {
+            this.resizeHandles.forEach(function (handle) {
+                _this.dom.appendChild(handle);
+            });
+        }
+        else {
+            Array.from(this.dom.children)
+                .filter(function (e) { return e.classList.contains(constants_1.resizeHandle); })
+                .forEach(function (e) { return e.remove(); });
+        }
+        this.setAttributes(this.table, node.attrs);
+        if (prev.attrs[constants_1.colgroupAttr] !== node.attrs[constants_1.colgroupAttr]) {
+            this.renderColgroup(node.attrs[constants_1.colgroupAttr]);
+        }
+        return true;
+    };
+    TableView.prototype.ignoreMutation = function (record) {
+        var result = record.type === 'attributes' &&
+            (record.target === this.table ||
+                record.target.firstChild === this.table ||
+                (this.colgroup && this.colgroup.contains(record.target)));
+        return result;
+    };
+    TableView.prototype.destroy = function () {
+        this.node = null;
+        this.view = null;
+        this.table = null;
+        this.colgroup = null;
+        this.resizeHandles = null;
+    };
+    TableView.prototype.renderColgroup = function (colgroupStr) {
+        if (this.table && this.table.firstChild && this.table.firstChild.nodeName === 'COLGROUP') {
+            this.table.removeChild(this.table.firstChild);
+        }
+        if (colgroupStr) {
+            this.colgroup = schema_1.parseStrColgroup(colgroupStr);
+            this.table.insertBefore(this.colgroup, this.table.firstChild);
+        }
+    };
+    TableView.prototype.setAttributes = function (table, attrs) {
+        var skip = [constants_1.colgroupAttr, constants_1.resizableAttr];
+        for (var attrName in attrs) {
+            if (attrName && skip.indexOf(attrName) === -1) {
+                var current = table.getAttribute(attrName);
+                var next = attrs[attrName];
+                if (next && next !== current) {
+                    table.setAttribute(attrName, next);
+                }
+                else if (!next) {
+                    table.removeAttribute(attrName);
+                }
+            }
+        }
+    };
+    return TableView;
+}());
+exports.TableView = TableView;

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

@@ -0,0 +1,12 @@
+import { EditorState, PluginKey } from 'prosemirror-state';
+export declare const reAnyValue: RegExp;
+export declare const parseStyle: (styleText: string) => {
+    [x: string]: string;
+};
+export declare function setNodeStyle(nodeAttrs: any, styleType: string, value: string): any;
+export declare const tableResizeKey: PluginKey<any, any>;
+export declare const tableColumnResizing: PluginKey<any, any>;
+export declare const tableRowResizing: PluginKey<any, any>;
+export declare function otherResizing(current: PluginKey, state: EditorState): boolean;
+export declare function otherResizeHandle(current: PluginKey, state: EditorState): boolean;
+export declare function getTable(dom: HTMLElement): HTMLTableElement;

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var prosemirror_state_1 = require("prosemirror-state");
+var utils_1 = require("../../utils");
+exports.reAnyValue = /^.+$/;
+exports.parseStyle = function (styleText) {
+    var styles = (styleText || '').split(/\s*;\s*/).filter(Boolean).map(function (s) {
+        var _a;
+        var nameValue = s.split(/\s*:\s*/);
+        return _a = {}, _a[nameValue[0]] = nameValue[1], _a;
+    }).reduce(function (acc, val) { return (tslib_1.__assign({}, acc, val)); }, {});
+    return styles;
+};
+function setNodeStyle(nodeAttrs, styleType, value) {
+    var attrs;
+    if (new RegExp('[^-]?' + styleType + ':').test(nodeAttrs.style || '')) {
+        var style = utils_1.changeStylesString(nodeAttrs.style || '', { style: styleType, value: exports.reAnyValue, newValue: value }).style;
+        attrs = tslib_1.__assign({}, nodeAttrs, { style: style });
+    }
+    else if (nodeAttrs.style) {
+        attrs = tslib_1.__assign({}, nodeAttrs, { style: nodeAttrs.style.replace(/;$/, '') + '; ' + styleType + ': ' + value + ';' });
+    }
+    else {
+        attrs = tslib_1.__assign({}, nodeAttrs, { style: styleType + ': ' + value + ';' });
+    }
+    return attrs;
+}
+exports.setNodeStyle = setNodeStyle;
+exports.tableResizeKey = new prosemirror_state_1.PluginKey('table-resize');
+exports.tableColumnResizing = new prosemirror_state_1.PluginKey('table-column-resizing');
+exports.tableRowResizing = new prosemirror_state_1.PluginKey('table-row-resizing');
+function otherResizing(current, state) {
+    var activeResize = false;
+    activeResize = activeResize ||
+        (current !== exports.tableResizeKey && Boolean(exports.tableResizeKey.get(state)) && exports.tableResizeKey.getState(state).dragging);
+    activeResize = activeResize ||
+        (current !== exports.tableColumnResizing && Boolean(exports.tableColumnResizing.get(state)) && exports.tableColumnResizing.getState(state).dragging);
+    activeResize = activeResize ||
+        (current !== exports.tableRowResizing && Boolean(exports.tableRowResizing.get(state)) && exports.tableRowResizing.getState(state).dragging);
+    return activeResize;
+}
+exports.otherResizing = otherResizing;
+function otherResizeHandle(current, state) {
+    var activeResize = false;
+    activeResize = activeResize ||
+        (current !== exports.tableColumnResizing && exports.tableColumnResizing.get(state) && exports.tableColumnResizing.getState(state).activeHandle > -1);
+    activeResize = activeResize ||
+        (current !== exports.tableRowResizing && exports.tableRowResizing.get(state) && exports.tableRowResizing.getState(state).activeHandle > -1);
+    return activeResize;
+}
+exports.otherResizeHandle = otherResizeHandle;
+function getTable(dom) {
+    if (dom && dom.firstChild && dom.firstChild.nodeName === 'TABLE') {
+        return dom.firstChild;
+    }
+    return dom;
+}
+exports.getTable = getTable;