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

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

@@ -4,25 +4,7 @@ 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 resize_utils_1 = require("./../resize-utils");
 var commonDir = {
     'southeast': true,
     'southwest': true,
@@ -31,9 +13,6 @@ var commonDir = {
 };
 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;
@@ -50,73 +29,62 @@ var ResizeState = /** @class */ (function () {
     };
     return ResizeState;
 }());
-var handleMouseMove = function (view, event, options) {
+var handleMouseMove = function (view, event) {
     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 tableDom = utils_1.getTable(view.nodeDOM(nodePosition));
+    var rect = tableDom.getBoundingClientRect();
+    var dir = resize_utils_1.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 win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
+    var compStyles = win.getComputedStyle(tableDom);
+    var nodeWidth = /px/.test(compStyles.width) ? parseFloat(compStyles.width) : tableDom.offsetWidth;
+    var nodeHeight = /px/.test(compStyles.height) ? parseFloat(compStyles.height) : tableDom.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;
-    }
+    dragging.startX = dir.x ? event.clientX : dragging.startX;
+    dragging.startY = dir.y ? event.clientY : dragging.startY;
     if (horizontalDir[activeHandle]) {
-        setSize(resizedNode, 'width', width);
+        tableDom.style.width = width + 'px';
     }
     if (verticalDir[activeHandle]) {
-        setSize(resizedNode, 'height', height);
+        tableDom.style.height = height + 'px';
     }
 };
 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 _a = tableSize(tableDom), width = _a.width, height = _a.height, colsWidth = _a.colsWidth, rowsHeight = _a.rowsHeight, offsetWidth = _a.offsetWidth, offsetHeight = _a.offsetHeight;
     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) + '%';
+            col.style.width = ((colsWidth[i]) * 100 / width) + '%';
             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) + '%'));
+            tr.setNodeMarkup(tablePos + offset + 1, null, utils_1.setNodeStyle(row.attrs, 'height', (rowsHeight[index] * 100 / height) + '%'));
             heightChange = true;
         }
     });
     var tableAttrs = tableNode.attrs;
-    if (utils_1.parseStyle(tableAttrs.style).width !== tableWidth + 'px') {
-        tableAttrs = utils_1.setNodeStyle(tableAttrs, 'width', tableWidth + 'px');
+    if (utils_1.parseStyle(tableAttrs.style).width !== offsetWidth + 'px') {
+        tableAttrs = utils_1.setNodeStyle(tableAttrs, 'width', offsetWidth + 'px');
     }
     if (widthChanged) {
         tableAttrs[constants_1.colgroupAttr] = colgroup.outerHTML;
     }
     if (heightChange) {
-        tableAttrs = utils_1.setNodeStyle(tableAttrs, 'height', tableHeight + 'px');
+        tableAttrs = utils_1.setNodeStyle(tableAttrs, 'height', offsetHeight + 'px');
     }
     if (widthChanged || heightChange) {
         tr.setNodeMarkup(tablePos, null, tableAttrs);
@@ -125,11 +93,13 @@ var toPercents = function (view, tr, tablePos) {
 var toPixels = function (view, tr, tablePos, attrs) {
     var tableNode = view.state.doc.nodeAt(tablePos);
     var tableDom = utils_1.getTable(view.nodeDOM(tablePos));
+    var win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
+    var calcStyle = win.getComputedStyle;
     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'));
+            tr.setNodeMarkup(tablePos + offset + 1, null, utils_1.setNodeStyle(row.attrs, 'height', calcStyle(rows[index]).height));
         }
     });
     var colgroup = tableDom.firstChild;
@@ -137,7 +107,7 @@ var toPixels = function (view, tr, tablePos, attrs) {
     var widthChanged = false;
     cols.forEach(function (col, i) {
         if (col.style.width && !/px$/.test(col.style.width)) {
-            col.style.width = cols[i].offsetWidth + 'px';
+            col.style.width = calcStyle(cols[i]).width;
             widthChanged = true;
         }
     });
@@ -150,9 +120,12 @@ var toPixels = function (view, tr, tablePos, attrs) {
 var tableSize = function (table) {
     var cols = Array.from(table.firstChild.children);
     var colsWidth = cols.map(function (c) { return c.offsetWidth; });
+    var rowsHeight = Array.from(table.rows).map(function (row) { return row.offsetHeight; });
     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 height = rowsHeight.reduce(function (acc, cur) { return acc + cur; }, 0);
+    var offsetHeight = table.offsetHeight;
+    var offsetWidth = table.offsetWidth;
+    return { width: width, height: height, colsWidth: colsWidth, rowsHeight: rowsHeight, offsetWidth: offsetWidth, offsetHeight: offsetHeight };
 };
 var handleMouseUp = function (view) {
     var _a = utils_1.tableResizeKey.getState(view.state), dragging = _a.dragging, nodePosition = _a.nodePosition, activeHandle = _a.activeHandle;
@@ -162,7 +135,7 @@ var handleMouseUp = function (view) {
         var rect = tableSize(dom);
         if (node) {
             var width = rect.offsetWidth + 'px';
-            var height = rect.height + 'px';
+            var height = rect.offsetHeight + 'px';
             var tr = view.state.tr;
             var attrs = node.attrs;
             var parsedStyles = utils_1.parseStyle(attrs.style);
@@ -172,7 +145,7 @@ var handleMouseUp = function (view) {
             if (verticalDir[activeHandle] && dom.style.height && parsedStyles.height !== height) {
                 attrs = utils_1.setNodeStyle(attrs, 'height', height);
             }
-            toPixels(view, tr, nodePosition, attrs);
+            attrs = toPixels(view, tr, nodePosition, attrs);
             tr.setNodeMarkup(nodePosition, null, attrs);
             tr.setMeta('commandName', 'node-resize');
             tr.setMeta('args', attrs);
@@ -185,9 +158,9 @@ var handleMouseUp = function (view) {
         }
     }
 };
-var handleMouseDown = function (view, event, options) {
+var handleMouseDown = function (view, event) {
     var target = event.target;
-    var activeHandle = target.getAttribute(constants_1.dataDirection);
+    var activeHandle = target.getAttribute(constants_1.dataResizeDirTable);
     if (!activeHandle) {
         return false;
     }
@@ -204,7 +177,7 @@ var handleMouseDown = function (view, event, options) {
     view.dispatch(transaction);
     var curWindow = event.view || window;
     function move(e) {
-        handleMouseMove(view, e, options);
+        handleMouseMove(view, e);
     }
     function finish(_e) {
         curWindow.removeEventListener('mouseup', finish);
@@ -216,7 +189,7 @@ var handleMouseDown = function (view, event, options) {
     return true;
 };
 exports.tableResizing = function (options) {
-    if (options === void 0) { options = { node: 'table', lockRatio: false }; }
+    if (options === void 0) { options = { node: 'table' }; }
     return new prosemirror_state_1.Plugin({
         key: utils_1.tableResizeKey,
         view: function (_viewObj) { return ({
@@ -226,7 +199,8 @@ exports.tableResizing = function (options) {
                 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; });
+                var parent = utils_1.parentNode(selection.$from, function (n) { return n.type === nodeType; });
+                var node = parent && parent.node;
                 if (node) {
                     var tableDepth = new Array(selection.$from.depth + 1).fill(0)
                         .findIndex(function (_, i) { return selection.$from.node(i).type.spec.tableRole === 'table'; });
@@ -236,7 +210,7 @@ exports.tableResizing = function (options) {
                 return null;
             },
             update: function (view, prevState) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _f;
                 var state = view.state;
                 var nodeType = state.schema.nodes[options.node];
                 var selected = this.selectedNode(state, nodeType);
@@ -253,13 +227,18 @@ exports.tableResizing = function (options) {
                         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) {
+                    else if (selected && prevSelected && selected.pos === prevSelected.pos &&
+                        !selected.node.attrs[constants_1.resizableAttr] && !state.selection.eq(prevState.selection)) {
                         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: selected.pos });
+                        view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, tslib_1.__assign({}, selected.node.attrs, (_d = {}, _d[constants_1.resizableAttr] = true, _d))));
+                    }
                     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))));
+                        view.dispatch(tr.setNodeMarkup(prevSelected.pos, nodeType, tslib_1.__assign({}, prevSelected.node.attrs, (_f = {}, _f[constants_1.resizableAttr] = false, _f))));
                     }
                 }
             }
@@ -275,7 +254,7 @@ exports.tableResizing = function (options) {
         props: {
             handleDOMEvents: {
                 mousedown: function (view, event) {
-                    return handleMouseDown(view, event, options);
+                    return handleMouseDown(view, event);
                 }
             }
         }

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

@@ -1,13 +1,13 @@
 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;
+    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;

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

@@ -2,7 +2,7 @@
 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 resize_utils_1 = require("./../resize-utils");
 var TableView = /** @class */ (function () {
     function TableView(node, view) {
         this.node = node;
@@ -15,10 +15,10 @@ var TableView = /** @class */ (function () {
         }
         var tBody = this.table.appendChild(document.createElement('tbody'));
         this.setAttributes(this.table, node.attrs);
-        this.resizeHandles = directions.map(function (dir) {
+        this.resizeHandles = resize_utils_1.handles.map(function (dir) {
             var handle = document.createElement('span');
             handle.className = constants_1.resizeHandle + ' ' + dir;
-            handle.setAttribute(constants_1.dataDirection, dir);
+            handle.setAttribute(constants_1.dataResizeDirTable, dir);
             return handle;
         });
         this.contentDOM = tBody;
@@ -54,11 +54,11 @@ var TableView = /** @class */ (function () {
         return result;
     };
     TableView.prototype.destroy = function () {
-        this.node = null;
-        this.view = null;
-        this.table = null;
-        this.colgroup = null;
-        this.resizeHandles = null;
+        this.node = undefined;
+        this.view = undefined;
+        this.table = undefined;
+        this.colgroup = undefined;
+        this.resizeHandles = undefined;
     };
     TableView.prototype.renderColgroup = function (colgroupStr) {
         if (this.table && this.table.firstChild && this.table.firstChild.nodeName === 'COLGROUP') {

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

@@ -1,3 +1,4 @@
+import { Node, ResolvedPos } from 'prosemirror-model';
 import { EditorState, PluginKey } from 'prosemirror-state';
 export declare const reAnyValue: RegExp;
 export declare const parseStyle: (styleText: string) => {
@@ -10,3 +11,12 @@ 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;
+export declare function domCellAround(target: any): HTMLTableCellElement | null;
+export declare function cellIndexes(cell: HTMLTableCellElement): {
+    cellIndex: number;
+    rowIndex: number;
+};
+export declare function parentNode(pos: ResolvedPos, predicate: (node: Node) => boolean): {
+    node: Node;
+    depth: number;
+} | null;

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

@@ -44,9 +44,11 @@ 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);
+        (current !== exports.tableColumnResizing &&
+            Boolean(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);
+        (current !== exports.tableRowResizing && Boolean(exports.tableRowResizing.get(state)) && exports.tableRowResizing.getState(state).activeHandle > -1);
     return activeResize;
 }
 exports.otherResizeHandle = otherResizeHandle;
@@ -57,3 +59,28 @@ function getTable(dom) {
     return dom;
 }
 exports.getTable = getTable;
+function domCellAround(target) {
+    while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
+        target = target.classList.contains('ProseMirror') ? null : target.parentNode;
+    }
+    return target;
+}
+exports.domCellAround = domCellAround;
+function cellIndexes(cell) {
+    var row = cell.parentNode;
+    return {
+        cellIndex: cell.cellIndex,
+        rowIndex: row.rowIndex
+    };
+}
+exports.cellIndexes = cellIndexes;
+function parentNode(pos, predicate) {
+    for (var depth = pos.depth; depth > 0; depth--) {
+        var node = pos.node(depth);
+        if (predicate(node)) {
+            return { node: node, depth: depth };
+        }
+    }
+    return null;
+}
+exports.parentNode = parentNode;