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

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

@@ -0,0 +1,281 @@
+import * as tslib_1 from "tslib";
+import { NodeSelection, Plugin } from 'prosemirror-state';
+import { colgroupAttr, dataDirection, resizableAttr } from '../../config/constants';
+import { getTable, parseStyle, setNodeStyle, tableResizeKey as key } from './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(key);
+        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 = key.getState(view.state);
+    var dragging = state.dragging, nodePosition = state.nodePosition, activeHandle = state.activeHandle;
+    if (nodePosition < 0 || !dragging) {
+        return;
+    }
+    var resizedNode = 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 = 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 = parseStyle(row.attrs.style).height;
+        if (rowHeight && !/%$/.test(rowHeight)) {
+            tr.setNodeMarkup(tablePos + offset + 1, null, setNodeStyle(row.attrs, 'height', (rows[index].offsetHeight * 100 / tableHeight) + '%'));
+            heightChange = true;
+        }
+    });
+    var tableAttrs = tableNode.attrs;
+    if (parseStyle(tableAttrs.style).width !== tableWidth + 'px') {
+        tableAttrs = setNodeStyle(tableAttrs, 'width', tableWidth + 'px');
+    }
+    if (widthChanged) {
+        tableAttrs[colgroupAttr] = colgroup.outerHTML;
+    }
+    if (heightChange) {
+        tableAttrs = 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 = getTable(view.nodeDOM(tablePos));
+    var rows = Array.from(tableDom.rows);
+    tableNode.forEach(function (row, offset, index) {
+        var rowHeight = parseStyle(row.attrs.style).height;
+        if (rowHeight && !/px$/.test(rowHeight)) {
+            tr.setNodeMarkup(tablePos + offset + 1, null, 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[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 = key.getState(view.state), dragging = _a.dragging, nodePosition = _a.nodePosition, activeHandle = _a.activeHandle;
+    if (dragging) {
+        var node = view.state.doc.nodeAt(nodePosition);
+        var dom = 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 = parseStyle(attrs.style);
+            if (horizontalDir[activeHandle] && dom.style.width && parsedStyles.width !== width) {
+                attrs = setNodeStyle(attrs, 'width', width);
+            }
+            if (verticalDir[activeHandle] && dom.style.height && parsedStyles.height !== height) {
+                attrs = 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(key, {
+                setDragging: null,
+                activeHandle: null,
+                nodePosition: nodePosition
+            });
+            view.dispatch(tr);
+        }
+    }
+};
+var handleMouseDown = function (view, event, options) {
+    var target = event.target;
+    var activeHandle = target.getAttribute(dataDirection);
+    if (!activeHandle) {
+        return false;
+    }
+    var resizeState = key.getState(view.state);
+    event.preventDefault();
+    var transaction = view.state.tr;
+    transaction.setMeta(key, {
+        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;
+};
+export var tableResizing = function (options) {
+    if (options === void 0) { options = { node: 'table', lockRatio: false }; }
+    return new Plugin({
+        key: key,
+        view: function (_viewObj) { return ({
+            selectedNode: function (state, nodeType) {
+                var selection = state.selection;
+                var isNodeSelected = selection instanceof NodeSelection && nodeType === selection.node.type;
+                if (isNodeSelected && selection instanceof 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(key, { nodePosition: selected.pos });
+                        tr.setNodeMarkup(prevSelected.pos, nodeType, tslib_1.__assign({}, prevSelected.node.attrs, (_a = {}, _a[resizableAttr] = false, _a)));
+                        tr.setNodeMarkup(selected.pos, nodeType, tslib_1.__assign({}, selected.node.attrs, (_b = {}, _b[resizableAttr] = true, _b)));
+                        view.dispatch(tr);
+                    }
+                    else if (selected && !prevSelected) {
+                        tr.setMeta(key, { nodePosition: selected.pos });
+                        view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, tslib_1.__assign({}, selected.node.attrs, (_c = {}, _c[resizableAttr] = true, _c))));
+                    }
+                    else if (!selected && prevSelected) {
+                        tr.setMeta(key, { nodePosition: -1 });
+                        view.dispatch(tr.setNodeMarkup(prevSelected.pos, nodeType, tslib_1.__assign({}, prevSelected.node.attrs, (_d = {}, _d[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/es/plugins/table-resize/table-view.js

@@ -0,0 +1,87 @@
+import { colgroupAttr, dataDirection, resizableAttr, resizableWrap, resizeHandle } from '../../config/constants';
+import { parseStrColgroup } from '../../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 = resizableWrap;
+        this.table = this.dom.appendChild(document.createElement('table'));
+        if (node.attrs[colgroupAttr]) {
+            this.renderColgroup(node.attrs[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 = resizeHandle + ' ' + dir;
+            handle.setAttribute(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[resizableAttr]) {
+            this.resizeHandles.forEach(function (handle) {
+                _this.dom.appendChild(handle);
+            });
+        }
+        else {
+            Array.from(this.dom.children)
+                .filter(function (e) { return e.classList.contains(resizeHandle); })
+                .forEach(function (e) { return e.remove(); });
+        }
+        this.setAttributes(this.table, node.attrs);
+        if (prev.attrs[colgroupAttr] !== node.attrs[colgroupAttr]) {
+            this.renderColgroup(node.attrs[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 = parseStrColgroup(colgroupStr);
+            this.table.insertBefore(this.colgroup, this.table.firstChild);
+        }
+    };
+    TableView.prototype.setAttributes = function (table, attrs) {
+        var skip = [colgroupAttr, 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;
+}());
+export { TableView };

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

@@ -0,0 +1,53 @@
+import * as tslib_1 from "tslib";
+import { PluginKey } from 'prosemirror-state';
+import { changeStylesString } from '../../utils';
+export var reAnyValue = /^.+$/;
+export var 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;
+};
+export function setNodeStyle(nodeAttrs, styleType, value) {
+    var attrs;
+    if (new RegExp('[^-]?' + styleType + ':').test(nodeAttrs.style || '')) {
+        var style = changeStylesString(nodeAttrs.style || '', { style: styleType, value: 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;
+}
+export var tableResizeKey = new PluginKey('table-resize');
+export var tableColumnResizing = new PluginKey('table-column-resizing');
+export var tableRowResizing = new PluginKey('table-row-resizing');
+export function otherResizing(current, state) {
+    var activeResize = false;
+    activeResize = activeResize ||
+        (current !== tableResizeKey && Boolean(tableResizeKey.get(state)) && tableResizeKey.getState(state).dragging);
+    activeResize = activeResize ||
+        (current !== tableColumnResizing && Boolean(tableColumnResizing.get(state)) && tableColumnResizing.getState(state).dragging);
+    activeResize = activeResize ||
+        (current !== tableRowResizing && Boolean(tableRowResizing.get(state)) && tableRowResizing.getState(state).dragging);
+    return activeResize;
+}
+export function otherResizeHandle(current, state) {
+    var activeResize = false;
+    activeResize = activeResize ||
+        (current !== tableColumnResizing && tableColumnResizing.get(state) && tableColumnResizing.getState(state).activeHandle > -1);
+    activeResize = activeResize ||
+        (current !== tableRowResizing && tableRowResizing.get(state) && tableRowResizing.getState(state).activeHandle > -1);
+    return activeResize;
+}
+export function getTable(dom) {
+    if (dom && dom.firstChild && dom.firstChild.nodeName === 'TABLE') {
+        return dom.firstChild;
+    }
+    return dom;
+}

package/dist/es2015/config/constants.js

@@ -1,2 +1,6 @@
 export const rowTypeAttr = 'k-parent-node';
 export const colgroupAttr = 'k-colgroup-data';
+export const resizableAttr = 'resizable-node';
+export const resizableWrap = 'k-editor-resize-wrap-element';
+export const resizeHandle = 'k-editor-resize-handle';
+export const dataDirection = 'data-direction';

package/dist/es2015/config/schema.js

@@ -1,7 +1,7 @@
 import { Schema } from 'prosemirror-model';
 import { tableNodes } from 'prosemirror-tables';
 import { domToPmDoc, htmlToFragment, pmDocToFragment } from '../source';
-import { rowTypeAttr, colgroupAttr } from './constants';
+import { rowTypeAttr, colgroupAttr, resizableAttr } from './constants';
 const hole = 0;
 const blockquoteDOM = ['blockquote', hole], hrDOM = ['hr'], preDOM = ['pre', ['code', hole]];
 const olDOM = ['ol', 0], ulDOM = ['ul', 0], liDOM = ['li', 0];
@@ -106,25 +106,28 @@ const shouldSkipColgroup = (node) => {
     }
     return shouldSkip;
 };
+export const parseStrColgroup = (colgroup) => {
+    const doc = domToPmDoc(htmlToFragment(colgroup), colgroupSchema, { preserveWhitespace: false });
+    const fragment = pmDocToFragment(doc);
+    const colgroupEl = fragment.firstChild;
+    return colgroupEl;
+};
 const tNodes = tableNodes({ tableGroup: 'block', cellContent: 'block+', cellAttributes });
 tNodes.table_row.attrs = Object.assign({}, tNodes.table_row.attrs, defaultAttrs([rowTypeAttr, 'style', 'class', 'id']));
 tNodes.table_row.toDOM = node => ['tr', pmAttributes(node.attrs), 0];
 tNodes.table_row.parseDOM = [{ tag: 'tr', getAttrs: domAttributes }];
-tNodes.table.attrs = Object.assign({}, tNodes.table.attrs, defaultAttrs(['style', 'class', 'id', colgroupAttr]));
+tNodes.table.attrs = Object.assign({}, tNodes.table.attrs, defaultAttrs(['style', 'class', 'id', colgroupAttr, resizableAttr]));
 tNodes.table.toDOM = (node) => {
     const tableAttrs = hasAttrs(node.attrs) ? pmAttributes(node.attrs, colgroupAttr) : {};
     let colgroup = null;
     if (node.attrs[colgroupAttr] && !shouldSkipColgroup(node)) {
-        const doc = domToPmDoc(htmlToFragment(node.attrs[colgroupAttr]), colgroupSchema, { preserveWhitespace: false });
-        const fragment = pmDocToFragment(doc);
-        const colgroupEl = fragment.firstChild;
+        const colgroupEl = parseStrColgroup(node.attrs[colgroupAttr]);
         if (colgroupEl) {
             const cols = Array.from(colgroupEl.children).map((c) => ['col', domAttributes(c)]);
             colgroup = [
                 'colgroup',
-                domAttributes(colgroupEl),
-                ...cols
-            ];
+                domAttributes(colgroupEl)
+            ].concat(cols);
         }
     }
     return colgroup ? ['table', tableAttrs, colgroup, ['tbody', 0]] :

package/dist/es2015/main.js

@@ -24,6 +24,7 @@ export { spacesFix } from './plugins/spaces-fix';
 export { textHighlight, textHighlightKey } from './plugins/highlight';
 export { imageResizing, imageResizeKey } from './plugins/image-resize';
 export { caretColor, caretColorKey } from './plugins/caret-color';
+export { tableResizing } from './plugins/table-resize';
 // ProseMirror re-exports
 export * from 'prosemirror-commands';
 export * from 'prosemirror-dropcursor';

package/dist/es2015/plugins/image-resize.js

@@ -1,5 +1,6 @@
 import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { dataDirection, resizeHandle } from "../config/constants";
 import { changeStylesString } from "../utils";
 export const imageResizeKey = new PluginKey('image-resize');
 const directions = {
@@ -107,7 +108,7 @@ const handleMouseUp = (view) => {
 };
 const handleMouseDown = (view, event, options) => {
     const target = event.target;
-    const activeHandle = target.getAttribute('data-direction');
+    const activeHandle = target.getAttribute(dataDirection);
     if (!activeHandle) {
         return false;
     }
@@ -218,8 +219,8 @@ export const imageResizing = (options = { node: 'image', lockRatio: true }) => {
                     wrapper.style.left = rect.left + 'px';
                     for (let i = 0; i < handles.length; i++) {
                         let dom = document.createElement('div');
-                        dom.className = 'k-editor-resize-handle ' + handles[i];
-                        dom.setAttribute('data-direction', handles[i]);
+                        dom.className = resizeHandle + ' ' + handles[i];
+                        dom.setAttribute(dataDirection, handles[i]);
                         wrapper.appendChild(dom);
                     }
                     return DecorationSet.create(state.doc, [Decoration.widget(state.selection.from + 1, wrapper)]);