@progress/kendo-editor-common 1.8.2-dev.202204060750 → 1.9.0-dev.202204180753

package/dist/es/config/constants.js

@@ -1,2 +1,7 @@
 export var rowTypeAttr = 'k-parent-node';
 export var colgroupAttr = 'k-colgroup-data';
+export var resizableAttr = 'resizable-node';
+export var resizableWrap = 'k-editor-resize-wrap-element';
+export var resizeHandle = 'k-editor-resize-handle';
+export var dataResizeDirTable = 'data-direction';
+export var dataResizeDirImage = 'data-direction-image';

package/dist/es/config/schema.js

@@ -2,7 +2,7 @@ import * as tslib_1 from "tslib";
 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';
 var hole = 0;
 var blockquoteDOM = ['blockquote', hole], hrDOM = ['hr'], preDOM = ['pre', ['code', hole]];
 var olDOM = ['ol', 0], ulDOM = ['ul', 0], liDOM = ['li', 0];
@@ -109,18 +109,22 @@ var shouldSkipColgroup = function (node) {
     }
     return shouldSkip;
 };
+export var parseStrColgroup = function (colgroup) {
+    var doc = domToPmDoc(htmlToFragment(colgroup), colgroupSchema, { preserveWhitespace: false });
+    var fragment = pmDocToFragment(doc);
+    var colgroupEl = fragment.firstChild;
+    return colgroupEl;
+};
 var tNodes = tableNodes({ tableGroup: 'block', cellContent: 'block+', cellAttributes: cellAttributes });
 tNodes.table_row.attrs = tslib_1.__assign({}, tNodes.table_row.attrs, defaultAttrs([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', colgroupAttr]));
+tNodes.table.attrs = tslib_1.__assign({}, tNodes.table.attrs, defaultAttrs(['style', 'class', 'id', colgroupAttr, resizableAttr]));
 tNodes.table.toDOM = function (node) {
     var tableAttrs = hasAttrs(node.attrs) ? pmAttributes(node.attrs, colgroupAttr) : {};
     var colgroup = null;
     if (node.attrs[colgroupAttr] && !shouldSkipColgroup(node)) {
-        var doc = domToPmDoc(htmlToFragment(node.attrs[colgroupAttr]), colgroupSchema, { preserveWhitespace: false });
-        var fragment = pmDocToFragment(doc);
-        var colgroupEl = fragment.firstChild;
+        var colgroupEl = parseStrColgroup(node.attrs[colgroupAttr]);
         if (colgroupEl) {
             var cols = Array.from(colgroupEl.children).map(function (c) { return ['col', domAttributes(c)]; });
             colgroup = [

package/dist/es/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/es/plugins/image-resize.js

@@ -1,19 +1,10 @@
 import * as tslib_1 from "tslib";
 import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { dataResizeDirImage, resizeHandle } from "../config/constants";
 import { changeStylesString } from "../utils";
+import { directions, handles } from './resize-utils';
 export var imageResizeKey = new 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';
 };
@@ -109,7 +100,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(dataResizeDirImage);
     if (!activeHandle) {
         return false;
     }
@@ -221,8 +212,8 @@ export var 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 = resizeHandle + ' ' + handles[i];
+                        dom.setAttribute(dataResizeDirImage, handles[i]);
                         wrapper.appendChild(dom);
                     }
                     return DecorationSet.create(state.doc, [Decoration.widget(state.selection.from + 1, wrapper)]);

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

@@ -0,0 +1,11 @@
+export 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
+};
+export var handles = Object.keys(directions);

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

@@ -0,0 +1,273 @@
+import * as tslib_1 from "tslib";
+import { Plugin } from 'prosemirror-state';
+import { tableNodeTypes, TableMap } from 'prosemirror-tables';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { colgroupAttr } from '../../config/constants';
+import { TableView } from './table-view';
+import { cellIndexes, domCellAround, otherResizeHandle, otherResizing, parentNode, parseStyle, setNodeStyle, tableColumnResizing as key } from './utils';
+export function columnResizing() {
+    // tslint:disable-next-line:variable-name
+    var View = TableView, handleWidth = 5, cellMinWidth = 25;
+    var plugin = new Plugin({
+        key: key,
+        state: {
+            init: function (_, state) {
+                this.spec.props.nodeViews[tableNodeTypes(state.schema).table.name] = function (node, view) { return new View(node, view); };
+                return new ResizeState(-1, null);
+            },
+            apply: function (tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            attributes: function (state) {
+                if (otherResizeHandle(key, state)) {
+                    return null;
+                }
+                var pluginState = key.getState(state);
+                return pluginState.activeHandle > -1 ? { class: 'resize-cursor' } : null;
+            },
+            handleDOMEvents: {
+                mousemove: function (view, event) {
+                    if (!otherResizing(key, view.state)) {
+                        handleMouseMove(view, event, handleWidth);
+                    }
+                    return false;
+                },
+                mouseleave: function (view) {
+                    handleMouseLeave(view);
+                    return false;
+                },
+                mousedown: function (view, event) {
+                    return handleMouseDown(view, event, cellMinWidth);
+                }
+            },
+            decorations: function (state) {
+                if (!otherResizing(key, state)) {
+                    var pluginState = key.getState(state);
+                    if (pluginState.activeHandle > -1) {
+                        return handleDecorations(state, pluginState.activeHandle);
+                    }
+                }
+                return DecorationSet.empty;
+            },
+            nodeViews: {}
+        }
+    });
+    return plugin;
+}
+function pointsAtCell($pos) {
+    return Boolean($pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter);
+}
+var ResizeState = /** @class */ (function () {
+    function ResizeState(activeHandle, dragging) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+    }
+    ResizeState.prototype.apply = function (tr) {
+        var state = this, action = tr.getMeta(key);
+        if (action && action.setHandle != null) {
+            return new ResizeState(action.setHandle, null);
+        }
+        if (action && action.setDragging !== undefined) {
+            return new ResizeState(state.activeHandle, action.setDragging);
+        }
+        if (state.activeHandle > -1 && tr.docChanged) {
+            var handle = tr.mapping.map(state.activeHandle, -1);
+            if (!pointsAtCell(tr.doc.resolve(handle))) {
+                handle = -1;
+            }
+            state = new ResizeState(handle, state.dragging);
+        }
+        return state;
+    };
+    return ResizeState;
+}());
+function handleMouseMove(view, event, handleWidth) {
+    var pluginState = key.getState(view.state);
+    if (!pluginState.dragging) {
+        var target = domCellAround(event.target), cell = -1;
+        if (target) {
+            var indexes = cellIndexes(target);
+            var _a = target.getBoundingClientRect(), left = _a.left, right = _a.right;
+            if (Math.abs(event.clientX - left) <= handleWidth && indexes.cellIndex > 0) {
+                indexes.cellIndex--;
+                cell = edgeCell(view, event, indexes);
+            }
+            else if (right - event.clientX > 0 && right - event.clientX <= handleWidth) {
+                cell = edgeCell(view, event, indexes);
+            }
+        }
+        if (cell !== pluginState.activeHandle) {
+            updateHandle(view, cell);
+        }
+    }
+}
+function handleMouseLeave(view) {
+    var pluginState = key.getState(view.state);
+    if (pluginState.activeHandle > -1 && !pluginState.dragging) {
+        updateHandle(view, -1);
+    }
+}
+function handleMouseDown(view, event, cellMinWidth) {
+    var _a;
+    var pluginState = key.getState(view.state);
+    if (pluginState.activeHandle === -1 || pluginState.dragging) {
+        return false;
+    }
+    var $cell = view.state.doc.resolve(pluginState.activeHandle);
+    var row = $cell.parent;
+    var cellIndex = $cell.index();
+    var colSpan = 0;
+    for (var i = 0; i <= cellIndex; i++) {
+        colSpan += row.child(i).attrs.colspan;
+    }
+    var tableNode = $cell.node($cell.depth - 1);
+    var dom = view.domAtPos(pluginState.activeHandle);
+    var domCell = dom.node.childNodes[dom.offset];
+    var tableDom = domCell.closest('table');
+    var col, tableAttrs;
+    if (tableNode.attrs[colgroupAttr]) {
+        var colgroup = tableDom.firstChild;
+        col = colgroup.children[colSpan - 1];
+        if (!col.style.width) {
+            col.style.width = col.offsetWidth + 'px';
+        }
+    }
+    else {
+        var total = 0;
+        for (var i = 0; i < row.childCount; i++) {
+            total += row.child(i).attrs.colspan;
+        }
+        var colgroup = document.createElement('colgroup');
+        var cols = new Array(total);
+        for (var i = 0; i < total; i++) {
+            cols[i] = document.createElement('col');
+            colgroup.appendChild(cols[i]);
+        }
+        tableDom.insertBefore(colgroup, tableDom.firstChild);
+        col = cols[cellIndex];
+        col.style.width = col.offsetWidth + 'px';
+        tableAttrs = tslib_1.__assign({}, tableNode.attrs, (_a = {}, _a[colgroupAttr] = '<colgroup>' + cols.reduce(function (acc, cur) { return acc + cur.outerHTML; }, '') + '</colgroup>', _a));
+    }
+    var width = parseFloat(col.style.width);
+    var tr = view.state.tr.setMeta(key, { setDragging: { startX: event.clientX, startWidth: width } });
+    if (!tableDom.style.width) {
+        var widths = Array.from(col.parentNode.children).map(function (c) { return c.style.width; });
+        if (widths.every(Boolean)) {
+            var sum = widths.reduce(function (acc, cur) { return acc + parseFloat(cur); }, 0);
+            tableAttrs = setNodeStyle(tableAttrs || tableNode.attrs, 'width', sum + 'px');
+        }
+    }
+    if (tableAttrs) {
+        var tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
+        tr.setNodeMarkup(tablePos, null, tableAttrs);
+    }
+    view.dispatch(tr);
+    function finish(ev) {
+        ev.view.removeEventListener('mouseup', finish);
+        ev.view.removeEventListener('mousemove', move);
+        var curPluginState = key.getState(view.state);
+        if (curPluginState.dragging) {
+            updateColumnWidth(view, curPluginState.activeHandle, draggedWidth(curPluginState.dragging, ev, cellMinWidth));
+            view.dispatch(view.state.tr.setMeta(key, { setDragging: null }));
+        }
+    }
+    function move(ev) {
+        if (!ev.which) {
+            return finish(ev);
+        }
+        var curPluginState = key.getState(view.state);
+        var dragged = draggedWidth(curPluginState.dragging, ev, cellMinWidth);
+        displayColumnWidth(view, curPluginState.activeHandle, dragged, cellMinWidth);
+    }
+    event.view.addEventListener('mouseup', finish);
+    event.view.addEventListener('mousemove', move);
+    event.preventDefault();
+    return true;
+}
+function edgeCell(view, event, indexes) {
+    var found = view.posAtCoords({ left: event.clientX, top: event.clientY });
+    if (!found) {
+        return -1;
+    }
+    var $pos = view.state.doc.resolve(found.pos);
+    var parentTable = parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; });
+    if (parentTable === null) {
+        return -1;
+    }
+    var tablePos = $pos.start(parentTable.depth);
+    var tableNode = parentTable.node;
+    var map = TableMap.get(tableNode);
+    var cell = tablePos + map.map[(map.width * indexes.rowIndex) + indexes.cellIndex];
+    return cell;
+}
+function draggedWidth(dragging, event, cellMinWidth) {
+    var offset = event.clientX - dragging.startX;
+    return Math.max(cellMinWidth, dragging.startWidth + offset);
+}
+function updateHandle(view, value) {
+    view.dispatch(view.state.tr.setMeta(key, { setHandle: value }));
+}
+function updateColumnWidth(view, cell, _width) {
+    var _a;
+    var $cell = view.state.doc.resolve(cell);
+    var tableNode = $cell.node(-1), start = $cell.start(-1);
+    var tr = view.state.tr;
+    var tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
+    var tableDom = view.nodeDOM(start).closest('table');
+    var attrs = tableNode.attrs;
+    if (tableNode && attrs[colgroupAttr]) {
+        var colgroup = tableDom.firstChild;
+        attrs = tslib_1.__assign({}, attrs, (_a = {}, _a[colgroupAttr] = colgroup.outerHTML, _a));
+    }
+    var tableDomWidth = tableDom.style.width;
+    if (tableDom && tableDomWidth && parseStyle(attrs.style).width !== tableDomWidth) {
+        attrs = setNodeStyle(attrs, 'width', tableDomWidth);
+        tr.setNodeMarkup(tablePos, null, attrs);
+    }
+    if (tr.docChanged) {
+        view.dispatch(tr);
+    }
+}
+function displayColumnWidth(view, cell, width, _cellMinWidth) {
+    var $cell = view.state.doc.resolve(cell);
+    var table = $cell.node(-1), start = $cell.start(-1);
+    var col = TableMap.get(table).colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan - 1;
+    var dom = view.domAtPos($cell.start(-1)).node;
+    if (dom.nodeName !== 'TABLE') {
+        dom = dom.closest('table');
+    }
+    var tableDom = dom;
+    var colgroup = tableDom.firstChild;
+    var cols = Array.from(colgroup.children);
+    cols[col].style.width = width + 'px';
+    if (tableDom.style.width) {
+        var widths = cols.map(function (c) { return c.style.width; });
+        if (widths.every(Boolean)) {
+            var sum = widths.reduce(function (acc, cur) { return acc + parseFloat(cur); }, 0);
+            tableDom.style.width = sum + 'px';
+        }
+    }
+}
+function handleDecorations(state, cell) {
+    var decorations = [];
+    var $cell = state.doc.resolve(cell);
+    var table = $cell.node(-1), map = TableMap.get(table), start = $cell.start(-1);
+    var col = map.colCount($cell.pos - start) + $cell.nodeAfter.attrs.colspan;
+    for (var row = 0; row < map.height; row++) {
+        var index = col + row * map.width - 1;
+        // For positions that are have either a different cell or the end
+        // of the table to their right, and either the top of the table or
+        // a different cell above them, add a decoration
+        if ((col === map.width || map.map[index] !== map.map[index + 1]) &&
+            (row === 0 || map.map[index - 1] !== map.map[index - 1 - map.width])) {
+            var cellPos = map.map[index];
+            var pos = start + cellPos + table.nodeAt(cellPos).nodeSize - 1;
+            var dom = document.createElement('div');
+            dom.className = 'column-resize-handle';
+            decorations.push(Decoration.widget(pos, dom));
+        }
+    }
+    return DecorationSet.create(state.doc, decorations);
+}

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

@@ -0,0 +1,8 @@
+import { columnResizing } from './column-resize';
+import { tableResizing as tableResize } from './table-resize';
+import { rowResizing } from './row-resize';
+export var tableResizing = function () { return [
+    tableResize(),
+    columnResizing(),
+    rowResizing()
+]; };

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

@@ -0,0 +1,230 @@
+import { Plugin } from 'prosemirror-state';
+import { TableMap, tableNodeTypes } from 'prosemirror-tables';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { domCellAround, otherResizeHandle, otherResizing, parentNode, parseStyle, setNodeStyle, tableRowResizing as key } from './utils';
+var TableRowView = /** @class */ (function () {
+    function TableRowView() {
+    }
+    TableRowView.prototype.ignoreMutation = function (record) {
+        return record.type === 'attributes' && record.attributeName === 'style' && record.target.nodeName === 'TR';
+    };
+    return TableRowView;
+}());
+export function rowResizing() {
+    var handleWidth = 5;
+    var plugin = new Plugin({
+        key: key,
+        state: {
+            init: function (_, state) {
+                this.spec.props.nodeViews[tableNodeTypes(state.schema).row.name] = function (_node, _view) { return new TableRowView(); };
+                return new ResizeState(-1, null);
+            },
+            apply: function (tr, prev) {
+                return prev.apply(tr);
+            }
+        },
+        props: {
+            attributes: function (state) {
+                if (otherResizeHandle(key, state)) {
+                    return null;
+                }
+                var pluginState = key.getState(state);
+                return pluginState.activeHandle > -1 ? { class: 'resize-cursor-vertical' } : null;
+            },
+            handleDOMEvents: {
+                mousemove: function (view, event) {
+                    if (!otherResizing(key, view.state)) {
+                        handleMouseMove(view, event, handleWidth);
+                    }
+                    return false;
+                },
+                mouseleave: function (view) {
+                    handleMouseLeave(view);
+                    return false;
+                },
+                mousedown: function (view, event) {
+                    return handleMouseDown(view, event);
+                }
+            },
+            decorations: function (state) {
+                if (otherResizing(key, state)) {
+                    return DecorationSet.empty;
+                }
+                var pluginState = key.getState(state);
+                if (pluginState.activeHandle > -1) {
+                    return handleDecorations(state, pluginState.activeHandle);
+                }
+            },
+            nodeViews: {}
+        }
+    });
+    return plugin;
+}
+function pointsAtCell($pos) {
+    return $pos.parent.type.spec.tableRole === 'row' && $pos.nodeAfter;
+}
+var ResizeState = /** @class */ (function () {
+    function ResizeState(activeHandle, dragging) {
+        this.activeHandle = activeHandle;
+        this.dragging = dragging;
+    }
+    ResizeState.prototype.apply = function (tr) {
+        var state = this, action = tr.getMeta(key);
+        if (action && action.setHandle != null) {
+            return new ResizeState(action.setHandle, null);
+        }
+        if (action && action.setDragging !== undefined) {
+            return new ResizeState(state.activeHandle, action.setDragging);
+        }
+        if (state.activeHandle > -1) {
+            var handle = tr.mapping.map(state.activeHandle, -1);
+            if (!pointsAtCell(tr.doc.resolve(handle))) {
+                handle = null;
+            }
+            state = new ResizeState(handle, state.dragging);
+        }
+        return state;
+    };
+    return ResizeState;
+}());
+function handleMouseMove(view, event, handleWidth) {
+    var pluginState = key.getState(view.state);
+    if (!pluginState.dragging) {
+        var target = domCellAround(event.target), row = -1;
+        if (target) {
+            var rowDom = target.parentNode;
+            var domRect = rowDom.getBoundingClientRect();
+            if (Math.abs(event.clientY - domRect.top) <= handleWidth && rowDom.rowIndex > 0) {
+                row = edgeRow(view, event, rowDom.rowIndex - 1);
+            }
+            else if (domRect.bottom - event.clientY > 0 && domRect.bottom - event.clientY <= handleWidth) {
+                row = edgeRow(view, event, rowDom.rowIndex);
+            }
+        }
+        if (row !== pluginState.activeHandle) {
+            updateHandle(view, row);
+        }
+    }
+}
+function handleMouseLeave(view) {
+    var pluginState = key.getState(view.state);
+    if (pluginState.activeHandle > -1 && !pluginState.dragging) {
+        updateHandle(view, -1);
+    }
+}
+function handleMouseDown(view, event) {
+    var pluginState = key.getState(view.state);
+    if (pluginState.activeHandle === -1 || pluginState.dragging) {
+        return false;
+    }
+    var doc = view.state.doc;
+    var $pos = doc.resolve(pluginState.activeHandle);
+    var row = doc.nodeAt(pluginState.activeHandle);
+    var table = $pos.parent;
+    var rowHeightStr = parseStyle(row.attrs.style).height;
+    var tableHeight = parseStyle(table.attrs.style).height;
+    var rowHeight = rowHeightStr ? parseFloat(rowHeightStr) : 0;
+    if (!rowHeightStr) {
+        var tr = view.nodeDOM(pluginState.activeHandle);
+        rowHeight = tr.offsetHeight;
+    }
+    view.dispatch(view.state.tr.setMeta(key, {
+        setDragging: {
+            startY: event.clientY,
+            startHeight: { rowHeight: rowHeight, tableHeight: tableHeight }
+        }
+    }));
+    function finish(ev) {
+        ev.view.removeEventListener('mouseup', finish);
+        ev.view.removeEventListener('mousemove', move);
+        var curPluginState = key.getState(view.state);
+        if (curPluginState.dragging) {
+            var tr = view.state.tr.setMeta(key, { setDragging: null });
+            updateRowHeight(view, tr, curPluginState.activeHandle);
+            view.dispatch(tr);
+        }
+    }
+    function move(ev) {
+        if (!ev.which) {
+            return finish(ev);
+        }
+        var curPluginState = key.getState(view.state);
+        var dragged = draggedHeight(curPluginState.dragging, ev);
+        var offset = ev.clientY - curPluginState.dragging.startY;
+        displayRowHeight(view, curPluginState.activeHandle, dragged, offset, tableHeight);
+    }
+    event.view.addEventListener('mouseup', finish);
+    event.view.addEventListener('mousemove', move);
+    event.preventDefault();
+    return true;
+}
+function edgeRow(view, event, rowIndex) {
+    var found = view.posAtCoords({ left: event.clientX, top: event.clientY });
+    if (!found) {
+        return -1;
+    }
+    var $pos = view.state.doc.resolve(found.pos);
+    var parentTable = parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; });
+    if (parentTable === null) {
+        return -1;
+    }
+    var tablePos = $pos.start(parentTable.depth);
+    var tableNode = parentTable.node;
+    var map = TableMap.get(tableNode);
+    var row = tablePos + map.map[(map.width * rowIndex)] - 1;
+    return row;
+}
+function draggedHeight(dragging, event) {
+    var offset = event.clientY - dragging.startY;
+    return dragging.startHeight.rowHeight + offset;
+}
+function updateHandle(view, value) {
+    view.dispatch(view.state.tr.setMeta(key, { setHandle: value }));
+}
+function updateRowHeight(view, tr, rowPos) {
+    var doc = view.state.doc;
+    var row = doc.nodeAt(rowPos);
+    var dom = view.nodeDOM(rowPos);
+    var 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));
+    var table = dom && dom.closest('table');
+    var tableHeight = table && table.style.height;
+    if (tableHeight) {
+        var $pos = doc.resolve(rowPos);
+        var tablePos = $pos.start($pos.depth) - 1;
+        tr.setNodeMarkup(tablePos, null, setNodeStyle($pos.parent.attrs, 'height', tableHeight));
+    }
+}
+function displayRowHeight(view, rowPos, height, offset, tableHeight) {
+    var dom = view.nodeDOM(rowPos);
+    if (dom) {
+        dom.style.height = height + 'px';
+        var win = (dom.ownerDocument && dom.ownerDocument.defaultView) || window;
+        dom.style.height = win.getComputedStyle(dom).height;
+        var table = dom.closest('table');
+        var newHeight = (parseFloat(tableHeight) + offset) + 'px';
+        var 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) {
+    var decorations = [];
+    if (typeof pos !== 'number') {
+        return DecorationSet.empty;
+    }
+    var $row = state.doc.resolve(pos), table = $row.parent, map = TableMap.get(table), rowIndex = $row.index($row.depth), start = $row.start($row.depth);
+    for (var col = 0; col < map.width; col++) {
+        var index = col + rowIndex * map.width;
+        var cellPos = map.map[index];
+        var cell = table.nodeAt(cellPos);
+        var widgetPos = start + cellPos + (cell ? cell.nodeSize : 0) - 1;
+        var dom = document.createElement('div');
+        dom.className = 'row-resize-handle';
+        decorations.push(Decoration.widget(widgetPos, dom));
+    }
+    return DecorationSet.create(state.doc, decorations);
+}