@progress/kendo-editor-common 1.12.2-develop.4 → 1.12.2-develop.6

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

@@ -1,278 +0,0 @@
-import { Plugin, NodeSelection } from 'prosemirror-state';
-import { resizableAttr, dataResizeDirTable, colgroupAttr } from '../../config/constants.js';
-import { tableResizeKey, getTable } from './utils.js';
-import { parentNode, parseStyle, setNodeStyle } from '../../utils.js';
-import { directions } from '../resize-utils.js';
-
-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);
-class ResizeState {
-    constructor(activeHandle, dragging, nodePosition) {
-        this.activeHandle = activeHandle;
-        this.dragging = dragging;
-        this.nodePosition = nodePosition;
-    }
-    apply(tr) {
-        const next = tr.getMeta(tableResizeKey);
-        if (next) {
-            const nextState = new ResizeState(next.activeHandle, next.setDragging, next.nodePosition);
-            return nextState;
-        }
-        return this;
-    }
-}
-const handleMouseMove = (view, event) => {
-    var _a;
-    const state = tableResizeKey.getState(view.state);
-    const { dragging, nodePosition, activeHandle } = state;
-    if (nodePosition < 0 || !dragging) {
-        return;
-    }
-    const tableDom = getTable(view.nodeDOM(nodePosition));
-    const rect = tableDom.getBoundingClientRect();
-    const dir = directions[activeHandle];
-    const diffX = (event.clientX - dragging.startX) * dir.x;
-    const diffY = (event.clientY - dragging.startY) * dir.y;
-    const win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
-    const compStyles = win.getComputedStyle(tableDom);
-    const nodeWidth = /px/.test(compStyles.width) ? parseFloat(compStyles.width) : tableDom.offsetWidth;
-    const nodeHeight = /px/.test(compStyles.height) ? parseFloat(compStyles.height) : tableDom.offsetHeight;
-    const width = dir.x ? diffX + nodeWidth : rect.width;
-    const height = dir.y ? diffY + nodeHeight : rect.height;
-    dragging.startX = dir.x ? event.clientX : dragging.startX;
-    dragging.startY = dir.y ? event.clientY : dragging.startY;
-    if (horizontalDir[activeHandle]) {
-        tableDom.style.width = width + 'px';
-    }
-    if (verticalDir[activeHandle]) {
-        tableDom.style.height = height + 'px';
-    }
-    if (/px/.test(tableDom.style.width)) {
-        const wrapper = (_a = tableDom.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode;
-        if (wrapper instanceof HTMLDivElement && wrapper.matches('div[table]') && /%/.test(wrapper.style.width)) {
-            wrapper.style.width = '';
-        }
-    }
-};
-const toPercents = (view, tr, tablePos) => {
-    const tableNode = view.state.doc.nodeAt(tablePos);
-    const tableDom = getTable(view.nodeDOM(tablePos));
-    const { width, height, colsWidth, rowsHeight, offsetWidth, offsetHeight } = tableSize(tableDom);
-    const colgroup = tableDom.firstChild;
-    const cols = Array.from((colgroup && colgroup.children) || []);
-    let widthChanged = false;
-    cols.forEach((col, i) => {
-        if (col.style.width && !/%$/.test(col.style.width)) {
-            col.style.width = ((colsWidth[i]) * 100 / width) + '%';
-            widthChanged = true;
-        }
-    });
-    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', (rowsHeight[index] * 100 / height) + '%'));
-            heightChange = true;
-        }
-    });
-    let tableAttrs = tableNode.attrs;
-    if (parseStyle(tableAttrs.style).width !== offsetWidth + 'px') {
-        tableAttrs = setNodeStyle(tableAttrs, 'width', offsetWidth + 'px');
-    }
-    if (widthChanged) {
-        tableAttrs[colgroupAttr] = colgroup.outerHTML;
-    }
-    if (heightChange) {
-        tableAttrs = setNodeStyle(tableAttrs, 'height', offsetHeight + '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 win = (tableDom.ownerDocument && tableDom.ownerDocument.defaultView) || window;
-    const calcStyle = win.getComputedStyle;
-    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', calcStyle(rows[index]).height));
-        }
-    });
-    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 = calcStyle(cols[i]).width;
-            widthChanged = true;
-        }
-    });
-    const 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 rowsHeight = Array.from(table.rows).map(row => row.offsetHeight);
-    const width = colsWidth.reduce((acc, cur) => acc + cur, 0);
-    const height = rowsHeight.reduce((acc, cur) => acc + cur, 0);
-    const offsetHeight = table.offsetHeight;
-    const offsetWidth = table.offsetWidth;
-    return { width, height, colsWidth, rowsHeight, offsetWidth, offsetHeight };
-};
-const handleMouseUp = (view) => {
-    const { dragging, nodePosition, activeHandle } = tableResizeKey.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.offsetHeight + '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);
-            }
-            attrs = toPixels(view, tr, nodePosition, attrs);
-            tr.setNodeMarkup(nodePosition, null, attrs);
-            tr.setMeta('commandName', 'node-resize');
-            tr.setMeta('args', attrs);
-            tr.setMeta(tableResizeKey, {
-                setDragging: null,
-                activeHandle: null,
-                nodePosition
-            });
-            if (!/%/.test(parseStyle(attrs.style).width || '')) {
-                const $pos = tr.doc.resolve(nodePosition);
-                const wrapper = parentNode($pos, n => n.type.name === 'table_wrapper');
-                if (wrapper && /%/.test(parseStyle(wrapper.node.attrs.style).width || '')) {
-                    const wrapperAttrs = setNodeStyle(wrapper.node.attrs, 'width', '');
-                    const wrapperPos = $pos.start(wrapper.depth) - 1;
-                    tr.setNodeMarkup(wrapperPos, null, wrapperAttrs);
-                }
-            }
-            view.dispatch(tr);
-        }
-    }
-};
-const handleMouseDown = (view, event) => {
-    const target = event.target;
-    const activeHandle = target.getAttribute(dataResizeDirTable);
-    if (!activeHandle) {
-        return false;
-    }
-    const resizeState = tableResizeKey.getState(view.state);
-    event.preventDefault();
-    const transaction = view.state.tr;
-    transaction.setMeta(tableResizeKey, {
-        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);
-    }
-    function finish() {
-        curWindow.removeEventListener('mouseup', finish);
-        curWindow.removeEventListener('mousemove', move);
-        handleMouseUp(view);
-    }
-    curWindow.addEventListener('mouseup', finish);
-    curWindow.addEventListener('mousemove', move);
-    return true;
-};
-const tableResizing = (options = { node: 'table' }) => {
-    return new Plugin({
-        key: tableResizeKey,
-        view: () => ({
-            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 parent = parentNode(selection.$from, (n) => n.type === nodeType);
-                const node = parent && parent.node;
-                if (node) {
-                    const pos = selection.$from.start(parent.depth) - 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) {
-                    const tr = state.tr;
-                    tr.setMeta('addToHistory', false);
-                    if (selected && prevSelected && selected.pos !== prevSelected.pos) {
-                        tr.setMeta(tableResizeKey, { nodePosition: selected.pos });
-                        const prevNode = tr.doc.nodeAt(prevSelected.pos);
-                        if (prevNode && prevNode.type.name === nodeType.name) {
-                            tr.setNodeMarkup(prevSelected.pos, nodeType, Object.assign(Object.assign({}, prevSelected.node.attrs), { [resizableAttr]: false }));
-                        }
-                        tr.setNodeMarkup(selected.pos, nodeType, Object.assign(Object.assign({}, selected.node.attrs), { [resizableAttr]: true }));
-                        view.dispatch(tr);
-                    }
-                    else if (selected && prevSelected && selected.pos === prevSelected.pos &&
-                        !selected.node.attrs[resizableAttr] && !state.selection.eq(prevState.selection)) {
-                        tr.setMeta(tableResizeKey, { nodePosition: selected.pos });
-                        view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, Object.assign(Object.assign({}, selected.node.attrs), { [resizableAttr]: true })));
-                    }
-                    else if (selected && !prevSelected) {
-                        tr.setMeta(tableResizeKey, { nodePosition: selected.pos });
-                        view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, Object.assign(Object.assign({}, selected.node.attrs), { [resizableAttr]: true })));
-                    }
-                    else if (!selected && prevSelected) {
-                        tr.setMeta(tableResizeKey, { nodePosition: -1 });
-                        view.dispatch(tr.setNodeMarkup(prevSelected.pos, nodeType, Object.assign(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);
-                }
-            }
-        }
-    });
-};
-
-export { tableResizing };

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

@@ -1,128 +0,0 @@
-import { resizableWrap, colgroupAttr, resizeHandle, dataResizeDirTable, resizableAttr } from '../../config/constants.js';
-import { parseStrColgroup } from '../../config/schema.js';
-import { handles } from '../resize-utils.js';
-import { setAttribute, parseStyle } from '../../utils.js';
-
-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 = handles.map(dir => {
-            const handle = document.createElement('span');
-            handle.className = resizeHandle + ' ' + dir;
-            handle.setAttribute(dataResizeDirTable, 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 = undefined;
-        this.view = undefined;
-        this.table = undefined;
-        this.colgroup = undefined;
-        this.resizeHandles = undefined;
-    }
-    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 (const attrName in attrs) {
-            if (attrName && skip.indexOf(attrName) === -1) {
-                setAttribute(table, attrName, attrs[attrName]);
-            }
-        }
-        if (/%$/.test(table.style.width)) {
-            this.dom.style.width = table.style.width;
-            table.style.width = '';
-        }
-        else {
-            this.dom.style.width = '';
-        }
-    }
-}
-class TableWrapperView {
-    constructor(node, view) {
-        this.node = node;
-        this.view = view;
-        this.dom = document.createElement('div');
-        this.setAttributes(this.dom, node.attrs);
-        this.contentDOM = this.dom;
-    }
-    update(node) {
-        if (node.type !== this.node.type) {
-            return false;
-        }
-        this.node = node;
-        this.setAttributes(this.dom, node.attrs);
-        return true;
-    }
-    ignoreMutation(record) {
-        return record.type === 'attributes' && record.attributeName === 'style';
-    }
-    destroy() {
-        this.node = undefined;
-        this.view = undefined;
-    }
-    setAttributes(dom, attrs) {
-        for (const attrName in attrs) {
-            if (attrName) {
-                setAttribute(dom, attrName, attrs[attrName]);
-            }
-        }
-        dom.setAttribute('table', '');
-        if (/%/.test(dom.style.width)) {
-            const table = this.node && this.node.lastChild;
-            const tableStyles = table ? parseStyle(table.attrs.style) : {};
-            const tableWidth = tableStyles.width || '';
-            if (tableWidth && !/%/.test(tableWidth)) {
-                dom.style.width = '';
-            }
-        }
-    }
-}
-
-export { TableView, TableWrapperView };

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

@@ -1,93 +0,0 @@
-import { PluginKey } from 'prosemirror-state';
-import { TableMap } from 'prosemirror-tables';
-import { parentNode } from '../../utils.js';
-
-const tableResizeKey = new PluginKey('table-resize');
-const tableColumnResizeKey = new PluginKey('table-column-resizing');
-const tableRowResizeKey = new PluginKey('table-row-resizing');
-function otherResizing(current, state) {
-    let activeResize = false;
-    activeResize = activeResize ||
-        (current !== tableResizeKey && Boolean(tableResizeKey.get(state)) && tableResizeKey.getState(state).dragging);
-    activeResize = activeResize ||
-        (current !== tableColumnResizeKey && Boolean(tableColumnResizeKey.get(state)) && tableColumnResizeKey.getState(state).dragging);
-    activeResize = activeResize ||
-        (current !== tableRowResizeKey && Boolean(tableRowResizeKey.get(state)) && tableRowResizeKey.getState(state).dragging);
-    return activeResize;
-}
-function otherResizeHandle(current, state) {
-    let activeResize = false;
-    activeResize = activeResize ||
-        (current !== tableColumnResizeKey &&
-            Boolean(tableColumnResizeKey.get(state)) &&
-            tableColumnResizeKey.getState(state).activeHandle > -1);
-    activeResize = activeResize ||
-        (current !== tableRowResizeKey && Boolean(tableRowResizeKey.get(state)) && tableRowResizeKey.getState(state).activeHandle > -1);
-    return activeResize;
-}
-function getTable(dom) {
-    if (dom && dom.firstChild && dom.firstChild.nodeName === 'TABLE') {
-        return dom.firstChild;
-    }
-    return dom;
-}
-function domCellAround(target) {
-    while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
-        target = target.classList.contains('ProseMirror') ? null : target.parentNode;
-    }
-    return target;
-}
-function tableSpansMap(table) {
-    const rows = Array.from((table && table.rows) || []);
-    const colsCount = Array.from((rows && rows[0] && rows[0].cells) || [])
-        .map(c => c.colSpan)
-        .reduce((prev, cur) => prev + cur, 0);
-    const map = rows.map(() => new Array(colsCount));
-    rows.forEach((row, r) => {
-        let curColSpan = 0;
-        Array.from(row.cells).forEach((c) => {
-            for (let colSp = 0; colSp < c.colSpan; colSp++) {
-                for (let rowSp = 0; rowSp < c.rowSpan; rowSp++) {
-                    const ind = map[r + rowSp].findIndex((val, curInd) => curInd >= curColSpan && !val);
-                    map[r + rowSp][ind] = c;
-                }
-                curColSpan++;
-            }
-        });
-    });
-    return map;
-}
-function cellIndexes(dataCell) {
-    const map = tableSpansMap(dataCell.closest('table'));
-    let result = null;
-    for (let r = 0; r < map.length; r++) {
-        const row = map[r];
-        row.forEach((cell, c) => {
-            if (dataCell === cell) {
-                result = { rowIndex: r, cellIndex: c };
-            }
-        });
-        if (result) {
-            break;
-        }
-    }
-    return result || { rowIndex: -1, cellIndex: -1 };
-}
-function edgeCell(view, event, indexes) {
-    const found = view.posAtCoords({ left: event.clientX, top: event.clientY });
-    if (!found) {
-        return -1;
-    }
-    const $pos = view.state.doc.resolve(found.pos);
-    const parentTable = parentNode($pos, n => n.type.spec.tableRole === 'table');
-    if (parentTable === null) {
-        return -1;
-    }
-    const tablePos = $pos.start(parentTable.depth);
-    const tableNode = parentTable.node;
-    const map = TableMap.get(tableNode);
-    const cell = tablePos + map.map[(map.width * indexes.rowIndex) + indexes.cellIndex];
-    return cell;
-}
-
-export { cellIndexes, domCellAround, edgeCell, getTable, otherResizeHandle, otherResizing, tableColumnResizeKey, tableResizeKey, tableRowResizeKey };