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

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

@@ -1,14 +1,14 @@
 import { Plugin } from 'prosemirror-state';
 import { TableMap, tableNodeTypes } from 'prosemirror-tables';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { otherResizeHandle, otherResizing, parseStyle, setNodeStyle, tableRowResizing as key } from './utils';
+import { domCellAround, otherResizeHandle, otherResizing, parentNode, parseStyle, setNodeStyle, tableRowResizing as key } from './utils';
 class TableRowView {
     ignoreMutation(record) {
         return record.type === 'attributes' && record.attributeName === 'style' && record.target.nodeName === 'TR';
     }
 }
 export function rowResizing() {
-    const handleWidth = 5, rowMinHeight = 25, lastRowResizable = true;
+    const handleWidth = 5;
     let plugin = new Plugin({
         key,
         state: {
@@ -31,7 +31,7 @@ export function rowResizing() {
             handleDOMEvents: {
                 mousemove(view, event) {
                     if (!otherResizing(key, view.state)) {
-                        handleMouseMove(view, event, handleWidth, rowMinHeight, lastRowResizable);
+                        handleMouseMove(view, event, handleWidth);
                     }
                     return false;
                 },
@@ -40,7 +40,7 @@ export function rowResizing() {
                     return false;
                 },
                 mousedown(view, event) {
-                    return handleMouseDown(view, event, rowMinHeight);
+                    return handleMouseDown(view, event);
                 }
             },
             decorations(state) {
@@ -73,7 +73,7 @@ class ResizeState {
         if (action && action.setDragging !== undefined) {
             return new ResizeState(state.activeHandle, action.setDragging);
         }
-        if (state.activeHandle > -1) { //  && tr.docChanged
+        if (state.activeHandle > -1) {
             let handle = tr.mapping.map(state.activeHandle, -1);
             if (!pointsAtCell(tr.doc.resolve(handle))) {
                 handle = null;
@@ -83,30 +83,22 @@ class ResizeState {
         return state;
     }
 }
-function handleMouseMove(view, event, handleWidth, _rowMinHeight, lastRowResizable) {
+function handleMouseMove(view, event, handleWidth) {
     let pluginState = key.getState(view.state);
     if (!pluginState.dragging) {
-        let target = domCellAround(event.target), cell = -1;
+        let target = domCellAround(event.target), row = -1;
         if (target) {
             const rowDom = target.parentNode;
             let domRect = rowDom.getBoundingClientRect();
-            if (event.clientY - domRect.top <= handleWidth) {
-                cell = edgeCell(view, event, 'up');
+            if (Math.abs(event.clientY - domRect.top) <= handleWidth && rowDom.rowIndex > 0) {
+                row = edgeRow(view, event, rowDom.rowIndex - 1);
             }
-            else if (domRect.bottom - event.clientY <= handleWidth) {
-                cell = edgeCell(view, event, 'down');
+            else if (domRect.bottom - event.clientY > 0 && domRect.bottom - event.clientY <= handleWidth) {
+                row = edgeRow(view, event, rowDom.rowIndex);
             }
         }
-        if (cell !== pluginState.activeHandle) {
-            if (!lastRowResizable && cell !== -1) {
-                // let $cell = view.state.doc.resolve(cell);
-                // let table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
-                // let col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
-                // if (col === map.width - 1) {
-                //     return;
-                // }
-            }
-            updateHandle(view, cell);
+        if (row !== pluginState.activeHandle) {
+            updateHandle(view, row);
         }
     }
 }
@@ -116,7 +108,7 @@ function handleMouseLeave(view) {
         updateHandle(view, -1);
     }
 }
-function handleMouseDown(view, event, rowMinHeight) {
+function handleMouseDown(view, event) {
     let pluginState = key.getState(view.state);
     if (pluginState.activeHandle === -1 || pluginState.dragging) {
         return false;
@@ -144,7 +136,7 @@ function handleMouseDown(view, event, rowMinHeight) {
         let curPluginState = key.getState(view.state);
         if (curPluginState.dragging) {
             const tr = view.state.tr.setMeta(key, { setDragging: null });
-            updateRowHeight(view, tr, curPluginState.activeHandle, draggedHeight(curPluginState.dragging, ev, rowMinHeight));
+            updateRowHeight(view, tr, curPluginState.activeHandle);
             view.dispatch(tr);
         }
     }
@@ -153,54 +145,45 @@ function handleMouseDown(view, event, rowMinHeight) {
             return finish(ev);
         }
         let curPluginState = key.getState(view.state);
-        let dragged = draggedHeight(curPluginState.dragging, ev, rowMinHeight);
+        let dragged = draggedHeight(curPluginState.dragging, ev);
         let offset = ev.clientY - curPluginState.dragging.startY;
-        displayRowHeight(view, curPluginState.activeHandle, dragged, rowMinHeight, offset, tableHeight);
+        displayRowHeight(view, curPluginState.activeHandle, dragged, offset, tableHeight);
     }
     event.view.addEventListener('mouseup', finish);
     event.view.addEventListener('mousemove', move);
     event.preventDefault();
     return true;
 }
-function domCellAround(target) {
-    while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
-        target = target.classList.contains('ProseMirror') ? null : target.parentNode;
-    }
-    return target;
-}
-function edgeCell(view, event, side) {
+function edgeRow(view, event, rowIndex) {
     let found = view.posAtCoords({ left: event.clientX, top: event.clientY });
     if (!found) {
         return -1;
     }
-    let { pos } = found;
-    let doc = view.state.doc;
-    let $pos = doc.resolve(pos);
-    let rowDepth = new Array($pos.depth + 1).fill(0).findIndex((_, i) => $pos.node(i).type.spec.tableRole === 'row');
-    if (rowDepth === -1) {
-        return -1;
-    }
-    let tableDepth = rowDepth - 1;
-    let rowIndex = $pos.index(tableDepth);
-    rowIndex += side === 'up' ? -1 : 0;
-    if (rowIndex < 0) {
+    let $pos = view.state.doc.resolve(found.pos);
+    let parentTable = parentNode($pos, n => n.type.spec.tableRole === 'table');
+    if (parentTable === null) {
         return -1;
     }
-    let rowPos = $pos.posAtIndex(rowIndex, tableDepth);
-    return rowPos;
+    let tablePos = $pos.start(parentTable.depth);
+    const tableNode = parentTable.node;
+    const map = TableMap.get(tableNode);
+    const row = tablePos + map.map[(map.width * rowIndex)] - 1;
+    return row;
 }
-function draggedHeight(dragging, event, rowMinHeight) {
+function draggedHeight(dragging, event) {
     let offset = event.clientY - dragging.startY;
-    return Math.max(rowMinHeight, dragging.startHeight.rowHeight + offset);
+    return dragging.startHeight.rowHeight + offset;
 }
 function updateHandle(view, value) {
     view.dispatch(view.state.tr.setMeta(key, { setHandle: value }));
 }
-function updateRowHeight(view, tr, rowPos, height) {
+function updateRowHeight(view, tr, rowPos) {
     const doc = view.state.doc;
     let row = doc.nodeAt(rowPos);
-    tr.setNodeMarkup(rowPos, null, setNodeStyle(row.attrs, 'height', height + 'px'));
     const dom = view.nodeDOM(rowPos);
+    const win = (dom.ownerDocument && dom.ownerDocument.defaultView) || window;
+    dom.style.height = win.getComputedStyle(dom).height;
+    tr.setNodeMarkup(rowPos, null, setNodeStyle(row.attrs, 'height', dom.style.height));
     const table = dom && dom.closest('table');
     const tableHeight = table && table.style.height;
     if (tableHeight) {
@@ -209,29 +192,32 @@ function updateRowHeight(view, tr, rowPos, height) {
         tr.setNodeMarkup(tablePos, null, setNodeStyle($pos.parent.attrs, 'height', tableHeight));
     }
 }
-// tslint:disable-next-line:max-line-length
-function displayRowHeight(view, rowPos, height, rowMinHeight, offset, tableHeight) {
+function displayRowHeight(view, rowPos, height, offset, tableHeight) {
     const dom = view.nodeDOM(rowPos);
     if (dom) {
-        dom.style.height = Math.max(height, rowMinHeight) + 'px';
+        dom.style.height = height + 'px';
+        const win = (dom.ownerDocument && dom.ownerDocument.defaultView) || window;
+        dom.style.height = win.getComputedStyle(dom).height;
         const table = dom.closest('table');
         const newHeight = (parseFloat(tableHeight) + offset) + 'px';
         const current = table && table.style.height;
         if (current && current !== newHeight) {
             table.style.height = (parseFloat(tableHeight) + offset) + 'px';
+            table.style.height = win.getComputedStyle(table).height;
         }
     }
 }
 function handleDecorations(state, pos) {
     let decorations = [];
     if (typeof pos !== 'number') {
-        return;
+        return DecorationSet.empty;
     }
     let $row = state.doc.resolve(pos), table = $row.parent, map = TableMap.get(table), rowIndex = $row.index($row.depth), start = $row.start($row.depth);
     for (let col = 0; col < map.width; col++) {
         let index = col + rowIndex * map.width;
         let cellPos = map.map[index];
-        let widgetPos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1;
+        const cell = table.nodeAt(cellPos);
+        let widgetPos = start + cellPos + (cell ? cell.nodeSize : 0) - 1;
         let dom = document.createElement('div');
         dom.className = 'row-resize-handle';
         decorations.push(Decoration.widget(widgetPos, dom));

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

@@ -1,25 +1,7 @@
 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
-};
+import { colgroupAttr, dataResizeDirTable, resizableAttr } from '../../config/constants';
+import { getTable, parentNode, parseStyle, setNodeStyle, tableResizeKey as key } from './utils';
+import { directions } from './../resize-utils';
 const commonDir = {
     'southeast': true,
     'southwest': true,
@@ -28,9 +10,6 @@ const commonDir = {
 };
 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;
@@ -46,73 +25,62 @@ class ResizeState {
         return state;
     }
 }
-const handleMouseMove = (view, event, options) => {
+const handleMouseMove = (view, event) => {
     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();
+    let 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 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;
-    }
+    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]) {
-        setSize(resizedNode, 'width', width);
+        tableDom.style.width = width + 'px';
     }
     if (verticalDir[activeHandle]) {
-        setSize(resizedNode, 'height', height);
+        tableDom.style.height = height + 'px';
     }
 };
 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 { width, height, colsWidth, rowsHeight, offsetWidth, offsetHeight } = 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) + '%';
+            col.style.width = ((colsWidth[i]) * 100 / width) + '%';
             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) + '%'));
+            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 !== tableWidth + 'px') {
-        tableAttrs = setNodeStyle(tableAttrs, 'width', tableWidth + 'px');
+    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', tableHeight + 'px');
+        tableAttrs = setNodeStyle(tableAttrs, 'height', offsetHeight + 'px');
     }
     if (widthChanged || heightChange) {
         tr.setNodeMarkup(tablePos, null, tableAttrs);
@@ -121,11 +89,13 @@ const toPercents = (view, tr, tablePos) => {
 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', rows[index].offsetHeight + 'px'));
+            tr.setNodeMarkup(tablePos + offset + 1, null, setNodeStyle(row.attrs, 'height', calcStyle(rows[index]).height));
         }
     });
     const colgroup = tableDom.firstChild;
@@ -133,7 +103,7 @@ const toPixels = (view, tr, tablePos, attrs) => {
     let widthChanged = false;
     cols.forEach((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;
         }
     });
@@ -146,9 +116,12 @@ const toPixels = (view, tr, tablePos, attrs) => {
 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 = table.offsetHeight; // Array.from(table.rows).reduce((acc, cur) => acc + cur.offsetHeight, 0);
-    return { width, height, colsWidth, offsetWidth: table.offsetWidth };
+    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 } = key.getState(view.state);
@@ -158,7 +131,7 @@ const handleMouseUp = (view) => {
         const rect = tableSize(dom);
         if (node) {
             const width = rect.offsetWidth + 'px';
-            const height = rect.height + 'px';
+            const height = rect.offsetHeight + 'px';
             const tr = view.state.tr;
             let attrs = node.attrs;
             const parsedStyles = parseStyle(attrs.style);
@@ -168,7 +141,7 @@ const handleMouseUp = (view) => {
             if (verticalDir[activeHandle] && dom.style.height && parsedStyles.height !== height) {
                 attrs = 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);
@@ -181,9 +154,9 @@ const handleMouseUp = (view) => {
         }
     }
 };
-const handleMouseDown = (view, event, options) => {
+const handleMouseDown = (view, event) => {
     const target = event.target;
-    const activeHandle = target.getAttribute(dataDirection);
+    const activeHandle = target.getAttribute(dataResizeDirTable);
     if (!activeHandle) {
         return false;
     }
@@ -200,7 +173,7 @@ const handleMouseDown = (view, event, options) => {
     view.dispatch(transaction);
     const curWindow = event.view || window;
     function move(e) {
-        handleMouseMove(view, e, options);
+        handleMouseMove(view, e);
     }
     function finish(_e) {
         curWindow.removeEventListener('mouseup', finish);
@@ -211,7 +184,7 @@ const handleMouseDown = (view, event, options) => {
     curWindow.addEventListener('mousemove', move);
     return true;
 };
-export const tableResizing = (options = { node: 'table', lockRatio: false }) => {
+export const tableResizing = (options = { node: 'table' }) => {
     return new Plugin({
         key: key,
         view: (_viewObj) => ({
@@ -221,7 +194,8 @@ export const tableResizing = (options = { node: 'table', lockRatio: false }) =>
                 if (isNodeSelected && selection instanceof NodeSelection) {
                     return { node: selection.node, pos: selection.from };
                 }
-                const node = parentNode(selection.$from, (n) => n.type === nodeType);
+                const parent = parentNode(selection.$from, (n) => n.type === nodeType);
+                const node = parent && parent.node;
                 if (node) {
                     let tableDepth = new Array(selection.$from.depth + 1).fill(0)
                         .findIndex((_, i) => selection.$from.node(i).type.spec.tableRole === 'table');
@@ -247,6 +221,11 @@ export const tableResizing = (options = { node: 'table', lockRatio: false }) =>
                         tr.setNodeMarkup(selected.pos, nodeType, 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(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: selected.pos });
                         view.dispatch(tr.setNodeMarkup(selected.pos, nodeType, Object.assign({}, selected.node.attrs, { [resizableAttr]: true })));
@@ -269,7 +248,7 @@ export const tableResizing = (options = { node: 'table', lockRatio: false }) =>
         props: {
             handleDOMEvents: {
                 mousedown(view, event) {
-                    return handleMouseDown(view, event, options);
+                    return handleMouseDown(view, event);
                 }
             }
         }

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

@@ -1,6 +1,6 @@
-import { colgroupAttr, dataDirection, resizableAttr, resizableWrap, resizeHandle } from '../../config/constants';
+import { colgroupAttr, dataResizeDirTable, resizableAttr, resizableWrap, resizeHandle } from '../../config/constants';
 import { parseStrColgroup } from '../../config/schema';
-const directions = ['northwest', 'north', 'northeast', 'southwest', 'south', 'southeast', 'west', 'east'];
+import { handles } from './../resize-utils';
 export class TableView {
     constructor(node, view) {
         this.node = node;
@@ -13,10 +13,10 @@ export class TableView {
         }
         const tBody = this.table.appendChild(document.createElement('tbody'));
         this.setAttributes(this.table, node.attrs);
-        this.resizeHandles = directions.map(dir => {
+        this.resizeHandles = handles.map(dir => {
             const handle = document.createElement('span');
             handle.className = resizeHandle + ' ' + dir;
-            handle.setAttribute(dataDirection, dir);
+            handle.setAttribute(dataResizeDirTable, dir);
             return handle;
         });
         this.contentDOM = tBody;
@@ -51,11 +51,11 @@ export class TableView {
         return result;
     }
     destroy() {
-        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;
     }
     renderColgroup(colgroupStr) {
         if (this.table && this.table.firstChild && this.table.firstChild.nodeName === 'COLGROUP') {

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

@@ -38,9 +38,11 @@ export function otherResizing(current, state) {
 export function otherResizeHandle(current, state) {
     let activeResize = false;
     activeResize = activeResize ||
-        (current !== tableColumnResizing && tableColumnResizing.get(state) && tableColumnResizing.getState(state).activeHandle > -1);
+        (current !== tableColumnResizing &&
+            Boolean(tableColumnResizing.get(state)) &&
+            tableColumnResizing.getState(state).activeHandle > -1);
     activeResize = activeResize ||
-        (current !== tableRowResizing && tableRowResizing.get(state) && tableRowResizing.getState(state).activeHandle > -1);
+        (current !== tableRowResizing && Boolean(tableRowResizing.get(state)) && tableRowResizing.getState(state).activeHandle > -1);
     return activeResize;
 }
 export function getTable(dom) {
@@ -49,3 +51,25 @@ export function getTable(dom) {
     }
     return dom;
 }
+export function domCellAround(target) {
+    while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
+        target = target.classList.contains('ProseMirror') ? null : target.parentNode;
+    }
+    return target;
+}
+export function cellIndexes(cell) {
+    const row = cell.parentNode;
+    return {
+        cellIndex: cell.cellIndex,
+        rowIndex: row.rowIndex
+    };
+}
+export function parentNode(pos, predicate) {
+    for (let depth = pos.depth; depth > 0; depth--) {
+        let node = pos.node(depth);
+        if (predicate(node)) {
+            return { node, depth };
+        }
+    }
+    return null;
+}

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

@@ -3,4 +3,5 @@ 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";
+export declare const dataResizeDirTable = "data-direction";
+export declare const dataResizeDirImage = "data-direction-image";

package/dist/npm/config/constants.js

@@ -5,4 +5,5 @@ 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';
+exports.dataResizeDirTable = 'data-direction';
+exports.dataResizeDirImage = 'data-direction-image';

package/dist/npm/config/schema.js

@@ -34,11 +34,15 @@ var hasAttrs = function (attrs, exclude) {
     return false;
 };
 var pmAttributes = function (attrs, exclude) {
+    if (exclude === void 0) { exclude = []; }
     var result = {};
-    for (var attr in attrs) {
-        if (attr && attrs[attr] !== null && attr !== exclude) {
+    var _loop_1 = function (attr) {
+        if (attr && attrs[attr] !== null && !exclude.find(function (e) { return e === attr; })) {
             result[attr] = attrs[attr];
         }
+    };
+    for (var attr in attrs) {
+        _loop_1(attr);
     }
     return result;
 };
@@ -124,7 +128,7 @@ tNodes.table_row.toDOM = function (node) { return ['tr', pmAttributes(node.attrs
 tNodes.table_row.parseDOM = [{ tag: 'tr', getAttrs: domAttributes }];
 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 tableAttrs = hasAttrs(node.attrs) ? pmAttributes(node.attrs, [constants_1.colgroupAttr, constants_1.resizableAttr]) : {};
     var colgroup = null;
     if (node.attrs[constants_1.colgroupAttr] && !shouldSkipColgroup(node)) {
         var colgroupEl = exports.parseStrColgroup(node.attrs[constants_1.colgroupAttr]);
@@ -213,7 +217,7 @@ var nodes = tslib_1.__assign({
             { tag: 'h6', getAttrs: function (node) { return (tslib_1.__assign({}, domAttributes(node), { level: 6 })); } }
         ],
         toDOM: function (node) { return hasAttrs(node.attrs, 'level') ?
-            ['h' + node.attrs.level, pmAttributes(node.attrs, 'level'), hole] :
+            ['h' + node.attrs.level, pmAttributes(node.attrs, ['level']), hole] :
             ['h' + node.attrs.level, hole]; }
     }, 
     // :: NodeSpec A code listing. Disallows marks or non-text inline
@@ -270,8 +274,8 @@ var nodes = tslib_1.__assign({
                 } }],
         toDOM: function (node) {
             return node.attrs.order === 1 ?
-                (hasAttrs(node.attrs, 'order') ? ['ol', pmAttributes(node.attrs, 'order'), hole] : olDOM) :
-                ['ol', tslib_1.__assign({}, pmAttributes(node.attrs, 'order'), { start: node.attrs.order }), hole];
+                (hasAttrs(node.attrs, 'order') ? ['ol', pmAttributes(node.attrs, ['order']), hole] : olDOM) :
+                ['ol', tslib_1.__assign({}, pmAttributes(node.attrs, ['order']), { start: node.attrs.order }), hole];
         }
     }, 
     // :: NodeSpec

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

@@ -5,18 +5,8 @@ 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");
+var resize_utils_1 = require("./resize-utils");
 exports.imageResizeKey = new prosemirror_state_1.PluginKey('image-resize');
-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 handles = Object.keys(directions);
 var setSize = function (domNode, sizeType, value) {
     domNode.style[sizeType] = value + 'px';
 };
@@ -45,7 +35,7 @@ var handleMouseMove = function (view, event, options) {
         return;
     }
     var img = view.nodeDOM(nodePosition);
-    var dir = directions[activeHandle];
+    var dir = resize_utils_1.directions[activeHandle];
     var diffX = (event.clientX - dragging.startX) * dir.x;
     var diffY = (event.clientY - dragging.startY) * dir.y;
     var width = dir.x ? diffX + img.width : rect.width;
@@ -112,7 +102,7 @@ var handleMouseUp = function (view) {
 };
 var handleMouseDown = function (view, event, options) {
     var target = event.target;
-    var activeHandle = target.getAttribute(constants_1.dataDirection);
+    var activeHandle = target.getAttribute(constants_1.dataResizeDirImage);
     if (!activeHandle) {
         return false;
     }
@@ -222,10 +212,10 @@ exports.imageResizing = function (options) {
                     wrapper.style.height = rect.height + 'px';
                     wrapper.style.top = rect.top + 'px';
                     wrapper.style.left = rect.left + 'px';
-                    for (var i = 0; i < handles.length; i++) {
+                    for (var i = 0; i < resize_utils_1.handles.length; i++) {
                         var dom = document.createElement('div');
-                        dom.className = constants_1.resizeHandle + ' ' + handles[i];
-                        dom.setAttribute(constants_1.dataDirection, handles[i]);
+                        dom.className = constants_1.resizeHandle + ' ' + resize_utils_1.handles[i];
+                        dom.setAttribute(constants_1.dataResizeDirImage, resize_utils_1.handles[i]);
                         wrapper.appendChild(dom);
                     }
                     return prosemirror_view_1.DecorationSet.create(state.doc, [prosemirror_view_1.Decoration.widget(state.selection.from + 1, wrapper)]);