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

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

@@ -0,0 +1,277 @@
+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 (let d = pos.depth; d > 0; d--) {
+        let node = pos.node(d);
+        if (predicate(node)) {
+            return node;
+        }
+    }
+    return null;
+}
+const 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
+};
+const commonDir = {
+    'southeast': true,
+    'southwest': true,
+    'northwest': true,
+    'northeast': true
+};
+const horizontalDir = Object.assign({ 'east': true, 'west': true }, commonDir);
+const verticalDir = Object.assign({ 'south': true, 'north': true }, commonDir);
+const setSize = (domNode, sizeType, value) => {
+    domNode.style[sizeType] = value + 'px';
+};
+class ResizeState {
+    constructor(activeHandle, dragging, nodePosition) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+        this.nodePosition = nodePosition;
+    }
+    apply(tr) {
+        let state = this, next = tr.getMeta(key);
+        if (next) {
+            const nextState = new ResizeState(next.activeHandle, next.setDragging, next.nodePosition);
+            return nextState;
+        }
+        return state;
+    }
+}
+const handleMouseMove = (view, event, options) => {
+    const state = key.getState(view.state);
+    const { dragging, nodePosition, activeHandle } = state;
+    if (nodePosition < 0 || !dragging) {
+        return;
+    }
+    let resizedNode = getTable(view.nodeDOM(nodePosition));
+    const rect = resizedNode.getBoundingClientRect();
+    const dir = directions[activeHandle];
+    const diffX = (event.clientX - dragging.startX) * dir.x;
+    const diffY = (event.clientY - dragging.startY) * dir.y;
+    const nodeWidth = resizedNode.offsetWidth;
+    const nodeHeight = resizedNode.offsetHeight;
+    let width = dir.x ? diffX + nodeWidth : rect.width;
+    let height = dir.y ? diffY + nodeHeight : rect.height;
+    if (options.lockRatio && dir.x && dir.y) {
+        let ratio = Math.min(width / nodeWidth, height / nodeHeight);
+        let lockWidth = nodeWidth * ratio;
+        let 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);
+    }
+};
+const toPercents = (view, tr, tablePos) => {
+    const tableNode = view.state.doc.nodeAt(tablePos);
+    const tableDom = getTable(view.nodeDOM(tablePos));
+    const { width: tableWidth, height: tableHeight, colsWidth } = tableSize(tableDom);
+    const colgroup = tableDom.firstChild;
+    const cols = Array.from((colgroup && colgroup.children) || []);
+    // const borders = new Array(cols.length).fill(tableWidth / tableOffsetWidth / cols.length);
+    let widthChanged = false;
+    cols.forEach((col, i) => {
+        if (col.style.width && !/%$/.test(col.style.width)) {
+            col.style.width = ((colsWidth[i]) * 100 / tableWidth) + '%';
+            widthChanged = true;
+        }
+    });
+    const rows = Array.from(tableDom.rows);
+    let heightChange = false;
+    tableNode.forEach((row, offset, index) => {
+        const 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;
+        }
+    });
+    let 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);
+    }
+};
+const toPixels = (view, tr, tablePos, attrs) => {
+    const tableNode = view.state.doc.nodeAt(tablePos);
+    const tableDom = getTable(view.nodeDOM(tablePos));
+    const rows = Array.from(tableDom.rows);
+    tableNode.forEach((row, offset, index) => {
+        const 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'));
+        }
+    });
+    const colgroup = tableDom.firstChild;
+    const cols = Array.from((colgroup && colgroup.children) || []);
+    let widthChanged = false;
+    cols.forEach((col, i) => {
+        if (col.style.width && !/px$/.test(col.style.width)) {
+            col.style.width = cols[i].offsetWidth + 'px';
+            widthChanged = true;
+        }
+    });
+    let tableAttrs = Object.assign({}, attrs);
+    if (widthChanged) {
+        tableAttrs[colgroupAttr] = colgroup.outerHTML;
+    }
+    return tableAttrs;
+};
+const tableSize = (table) => {
+    const cols = Array.from(table.firstChild.children);
+    const colsWidth = cols.map(c => c.offsetWidth);
+    const width = colsWidth.reduce((acc, cur) => acc + cur, 0);
+    const height = table.offsetHeight; // Array.from(table.rows).reduce((acc, cur) => acc + cur.offsetHeight, 0);
+    return { width, height, colsWidth, offsetWidth: table.offsetWidth };
+};
+const handleMouseUp = (view) => {
+    const { dragging, nodePosition, activeHandle } = key.getState(view.state);
+    if (dragging) {
+        const node = view.state.doc.nodeAt(nodePosition);
+        const dom = getTable(view.nodeDOM(nodePosition));
+        const rect = tableSize(dom);
+        if (node) {
+            const width = rect.offsetWidth + 'px';
+            const height = rect.height + 'px';
+            const tr = view.state.tr;
+            let attrs = node.attrs;
+            const 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
+            });
+            view.dispatch(tr);
+        }
+    }
+};
+const handleMouseDown = (view, event, options) => {
+    const target = event.target;
+    const activeHandle = target.getAttribute(dataDirection);
+    if (!activeHandle) {
+        return false;
+    }
+    const resizeState = key.getState(view.state);
+    event.preventDefault();
+    const transaction = view.state.tr;
+    transaction.setMeta(key, {
+        setDragging: { startX: event.clientX, startY: event.clientY },
+        activeHandle,
+        nodePosition: resizeState.nodePosition
+    });
+    transaction.setMeta('addToHistory', false);
+    toPercents(view, transaction, resizeState.nodePosition);
+    view.dispatch(transaction);
+    const 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 const tableResizing = (options = { node: 'table', lockRatio: false }) => {
+    return new Plugin({
+        key: key,
+        view: (_viewObj) => ({
+            selectedNode(state, nodeType) {
+                const selection = state.selection;
+                const isNodeSelected = selection instanceof NodeSelection && nodeType === selection.node.type;
+                if (isNodeSelected && selection instanceof NodeSelection) {
+                    return { node: selection.node, pos: selection.from };
+                }
+                const node = parentNode(selection.$from, (n) => n.type === nodeType);
+                if (node) {
+                    let tableDepth = new Array(selection.$from.depth + 1).fill(0)
+                        .findIndex((_, i) => selection.$from.node(i).type.spec.tableRole === 'table');
+                    const pos = selection.$from.start(tableDepth) - 1;
+                    return { node, pos };
+                }
+                return null;
+            },
+            update(view, prevState) {
+                const state = view.state;
+                const nodeType = state.schema.nodes[options.node];
+                const selected = this.selectedNode(state, nodeType);
+                const prevSelected = this.selectedNode(prevState, nodeType);
+                if (!selected && prevSelected && !prevState.doc.eq(view.state.doc)) {
+                    // selected table is deleted
+                    return;
+                }
+                if (selected || prevSelected) {
+                    let tr = state.tr;
+                    if (selected && prevSelected && selected.pos !== prevSelected.pos) {
+                        tr.setMeta(key, { nodePosition: selected.pos });
+                        tr.setNodeMarkup(prevSelected.pos, nodeType, Object.assign({}, prevSelected.node.attrs, { [resizableAttr]: false }));
+                        tr.setNodeMarkup(selected.pos, nodeType, Object.assign({}, selected.node.attrs, { [resizableAttr]: true }));
+                        view.dispatch(tr);
+                    }
+                    else if (selected && !prevSelected) {
+                        tr.setMeta(key, { nodePosition: selected.pos });
+                        view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, Object.assign({}, selected.node.attrs, { [resizableAttr]: true })));
+                    }
+                    else if (!selected && prevSelected) {
+                        tr.setMeta(key, { nodePosition: -1 });
+                        view.dispatch(tr.setNodeMarkup(prevSelected.pos, nodeType, Object.assign({}, prevSelected.node.attrs, { [resizableAttr]: false })));
+                    }
+                }
+            }
+        }),
+        state: {
+            init() {
+                return new ResizeState('', null, -1);
+            },
+            apply(tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            handleDOMEvents: {
+                mousedown(view, event) {
+                    return handleMouseDown(view, event, options);
+                }
+            }
+        }
+    });
+};

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

@@ -0,0 +1,84 @@
+import { colgroupAttr, dataDirection, resizableAttr, resizableWrap, resizeHandle } from '../../config/constants';
+import { parseStrColgroup } from '../../config/schema';
+const directions = ['northwest', 'north', 'northeast', 'southwest', 'south', 'southeast', 'west', 'east'];
+export class TableView {
+    constructor(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]);
+        }
+        const tBody = this.table.appendChild(document.createElement('tbody'));
+        this.setAttributes(this.table, node.attrs);
+        this.resizeHandles = directions.map(dir => {
+            const handle = document.createElement('span');
+            handle.className = resizeHandle + ' ' + dir;
+            handle.setAttribute(dataDirection, dir);
+            return handle;
+        });
+        this.contentDOM = tBody;
+    }
+    update(node) {
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        const prev = this.node;
+        this.node = node;
+        if (node.attrs[resizableAttr]) {
+            this.resizeHandles.forEach(handle => {
+                this.dom.appendChild(handle);
+            });
+        }
+        else {
+            Array.from(this.dom.children)
+                .filter((e) => e.classList.contains(resizeHandle))
+                .forEach((e) => e.remove());
+        }
+        this.setAttributes(this.table, node.attrs);
+        if (prev.attrs[colgroupAttr] !== node.attrs[colgroupAttr]) {
+            this.renderColgroup(node.attrs[colgroupAttr]);
+        }
+        return true;
+    }
+    ignoreMutation(record) {
+        const result = record.type === 'attributes' &&
+            (record.target === this.table ||
+                record.target.firstChild === this.table ||
+                (this.colgroup && this.colgroup.contains(record.target)));
+        return result;
+    }
+    destroy() {
+        this.node = null;
+        this.view = null;
+        this.table = null;
+        this.colgroup = null;
+        this.resizeHandles = null;
+    }
+    renderColgroup(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);
+        }
+    }
+    setAttributes(table, attrs) {
+        const skip = [colgroupAttr, resizableAttr];
+        for (let attrName in attrs) {
+            if (attrName && skip.indexOf(attrName) === -1) {
+                const current = table.getAttribute(attrName);
+                const next = attrs[attrName];
+                if (next && next !== current) {
+                    table.setAttribute(attrName, next);
+                }
+                else if (!next) {
+                    table.removeAttribute(attrName);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+import { PluginKey } from 'prosemirror-state';
+import { changeStylesString } from '../../utils';
+export const reAnyValue = /^.+$/;
+export const parseStyle = (styleText) => {
+    const styles = (styleText || '').split(/\s*;\s*/).filter(Boolean).map(s => {
+        const nameValue = s.split(/\s*:\s*/);
+        return { [nameValue[0]]: nameValue[1] };
+    }).reduce((acc, val) => (Object.assign({}, acc, val)), {});
+    return styles;
+};
+export function setNodeStyle(nodeAttrs, styleType, value) {
+    let attrs;
+    if (new RegExp('[^-]?' + styleType + ':').test(nodeAttrs.style || '')) {
+        const { style } = changeStylesString(nodeAttrs.style || '', { style: styleType, value: reAnyValue, newValue: value });
+        attrs = Object.assign({}, nodeAttrs, { style });
+    }
+    else if (nodeAttrs.style) {
+        attrs = Object.assign({}, nodeAttrs, { style: nodeAttrs.style.replace(/;$/, '') + '; ' + styleType + ': ' + value + ';' });
+    }
+    else {
+        attrs = Object.assign({}, nodeAttrs, { style: styleType + ': ' + value + ';' });
+    }
+    return attrs;
+}
+export const tableResizeKey = new PluginKey('table-resize');
+export const tableColumnResizing = new PluginKey('table-column-resizing');
+export const tableRowResizing = new PluginKey('table-row-resizing');
+export function otherResizing(current, state) {
+    let 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) {
+    let 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/npm/config/constants.d.ts

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

package/dist/npm/config/constants.js

@@ -2,3 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rowTypeAttr = 'k-parent-node';
 exports.colgroupAttr = 'k-colgroup-data';
+exports.resizableAttr = 'resizable-node';
+exports.resizableWrap = 'k-editor-resize-wrap-element';
+exports.resizeHandle = 'k-editor-resize-handle';
+exports.dataDirection = 'data-direction';

package/dist/npm/config/schema.d.ts

@@ -2,6 +2,7 @@ import { NodeSpec, MarkSpec } from 'prosemirror-model';
 declare const marks: {
     [mark: string]: MarkSpec;
 };
+export declare const parseStrColgroup: (colgroup: string) => HTMLTableColElement;
 declare const nodes: {
     [node: string]: NodeSpec;
 };

package/dist/npm/config/schema.js

@@ -112,18 +112,22 @@ var shouldSkipColgroup = function (node) {
     }
     return shouldSkip;
 };
+exports.parseStrColgroup = function (colgroup) {
+    var doc = source_1.domToPmDoc(source_1.htmlToFragment(colgroup), colgroupSchema, { preserveWhitespace: false });
+    var fragment = source_1.pmDocToFragment(doc);
+    var colgroupEl = fragment.firstChild;
+    return colgroupEl;
+};
 var tNodes = prosemirror_tables_1.tableNodes({ tableGroup: 'block', cellContent: 'block+', cellAttributes: cellAttributes });
 tNodes.table_row.attrs = tslib_1.__assign({}, tNodes.table_row.attrs, defaultAttrs([constants_1.rowTypeAttr, 'style', 'class', 'id']));
 tNodes.table_row.toDOM = function (node) { return ['tr', pmAttributes(node.attrs), 0]; };
 tNodes.table_row.parseDOM = [{ tag: 'tr', getAttrs: domAttributes }];
-tNodes.table.attrs = tslib_1.__assign({}, tNodes.table.attrs, defaultAttrs(['style', 'class', 'id', constants_1.colgroupAttr]));
+tNodes.table.attrs = tslib_1.__assign({}, tNodes.table.attrs, defaultAttrs(['style', 'class', 'id', constants_1.colgroupAttr, constants_1.resizableAttr]));
 tNodes.table.toDOM = function (node) {
     var tableAttrs = hasAttrs(node.attrs) ? pmAttributes(node.attrs, constants_1.colgroupAttr) : {};
     var colgroup = null;
     if (node.attrs[constants_1.colgroupAttr] && !shouldSkipColgroup(node)) {
-        var doc = source_1.domToPmDoc(source_1.htmlToFragment(node.attrs[constants_1.colgroupAttr]), colgroupSchema, { preserveWhitespace: false });
-        var fragment = source_1.pmDocToFragment(doc);
-        var colgroupEl = fragment.firstChild;
+        var colgroupEl = exports.parseStrColgroup(node.attrs[constants_1.colgroupAttr]);
         if (colgroupEl) {
             var cols = Array.from(colgroupEl.children).map(function (c) { return ['col', domAttributes(c)]; });
             colgroup = [

package/dist/npm/main.d.ts

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

package/dist/npm/main.js

@@ -120,6 +120,8 @@ exports.imageResizeKey = image_resize_1.imageResizeKey;
 var caret_color_1 = require("./plugins/caret-color");
 exports.caretColor = caret_color_1.caretColor;
 exports.caretColorKey = caret_color_1.caretColorKey;
+var table_resize_1 = require("./plugins/table-resize");
+exports.tableResizing = table_resize_1.tableResizing;
 // ProseMirror re-exports
 tslib_1.__exportStar(require("prosemirror-commands"), exports);
 tslib_1.__exportStar(require("prosemirror-dropcursor"), exports);

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var prosemirror_state_1 = require("prosemirror-state");
 var prosemirror_view_1 = require("prosemirror-view");
+var constants_1 = require("../config/constants");
 var utils_1 = require("../utils");
 exports.imageResizeKey = new prosemirror_state_1.PluginKey('image-resize');
 var directions = {
@@ -111,7 +112,7 @@ var handleMouseUp = function (view) {
 };
 var handleMouseDown = function (view, event, options) {
     var target = event.target;
-    var activeHandle = target.getAttribute('data-direction');
+    var activeHandle = target.getAttribute(constants_1.dataDirection);
     if (!activeHandle) {
         return false;
     }
@@ -223,8 +224,8 @@ exports.imageResizing = function (options) {
                     wrapper.style.left = rect.left + 'px';
                     for (var i = 0; i < handles.length; i++) {
                         var dom = document.createElement('div');
-                        dom.className = 'k-editor-resize-handle ' + handles[i];
-                        dom.setAttribute('data-direction', handles[i]);
+                        dom.className = constants_1.resizeHandle + ' ' + handles[i];
+                        dom.setAttribute(constants_1.dataDirection, handles[i]);
                         wrapper.appendChild(dom);
                     }
                     return prosemirror_view_1.DecorationSet.create(state.doc, [prosemirror_view_1.Decoration.widget(state.selection.from + 1, wrapper)]);

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

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