@progress/kendo-editor-common 1.10.0 → 1.10.1-dev.202307241031

package/dist/es/config/schema.js

@@ -183,10 +183,7 @@ var nodes = __assign({
     }, table_caption_external: {
         content: 'inline+',
         group: 'block',
-        attrs: {
-            caption: { default: null },
-            style: { default: null }
-        },
+        attrs: __assign({ caption: { default: null } }, commonAttributes()),
         parseDOM: [{
                 tag: 'div[caption]',
                 getAttrs: domAttributes

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

@@ -1,18 +1,16 @@
 import { __assign } from "tslib";
 import { Plugin } from 'prosemirror-state';
-import { tableNodeTypes, TableMap } from 'prosemirror-tables';
+import { TableMap } from 'prosemirror-tables';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { colgroupAttr } from '../../config/constants';
-import { TableView } from './table-view';
+import { TableView, TableWrapperView } from './table-view';
 import { cellIndexes, domCellAround, otherResizeHandle, otherResizing, edgeCell, parseStyle, setNodeStyle, tableColumnResizeKey as key } from './utils';
 export function columnResizing() {
-    // tslint:disable-next-line:variable-name
-    var View = TableView, handleWidth = 5, cellMinWidth = 25;
+    var 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); };
+            init: function (_, _state) {
                 return new ResizeState(-1, null);
             },
             apply: function (tr, prev) {
@@ -51,7 +49,10 @@ export function columnResizing() {
                 }
                 return DecorationSet.empty;
             },
-            nodeViews: {}
+            nodeViews: {
+                table_wrapper: function (node, view) { return new TableWrapperView(node, view); },
+                table: function (node, view) { return new TableView(node, view); }
+            }
         }
     });
     return plugin;

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

@@ -28,6 +28,7 @@ var ResizeState = /** @class */ (function () {
     return ResizeState;
 }());
 var handleMouseMove = function (view, event) {
+    var _a;
     var state = key.getState(view.state);
     var dragging = state.dragging, nodePosition = state.nodePosition, activeHandle = state.activeHandle;
     if (nodePosition < 0 || !dragging) {
@@ -52,6 +53,12 @@ var handleMouseMove = function (view, event) {
     if (verticalDir[activeHandle]) {
         tableDom.style.height = height + 'px';
     }
+    if (/px/.test(tableDom.style.width)) {
+        var 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 = '';
+        }
+    }
 };
 var toPercents = function (view, tr, tablePos) {
     var tableNode = view.state.doc.nodeAt(tablePos);
@@ -152,6 +159,15 @@ var handleMouseUp = function (view) {
                 activeHandle: null,
                 nodePosition: nodePosition
             });
+            if (!/%/.test(parseStyle(attrs.style).width || '')) {
+                var $pos = tr.doc.resolve(nodePosition);
+                var wrapper = parentNode($pos, function (n) { return n.type.name === 'table_wrapper'; });
+                if (wrapper && /%/.test(parseStyle(wrapper.node.attrs.style).width || '')) {
+                    var wrapperAttrs = setNodeStyle(wrapper.node.attrs, 'width', '');
+                    var wrapperPos = $pos.start(wrapper.depth) - 1;
+                    tr.setNodeMarkup(wrapperPos, null, wrapperAttrs);
+                }
+            }
             view.dispatch(tr);
         }
     }

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

@@ -81,7 +81,61 @@ var TableView = /** @class */ (function () {
                 }
             }
         }
+        if (/%$/.test(table.style.width)) {
+            this.dom.style.width = table.style.width;
+            table.style.width = '';
+        }
+        else {
+            this.dom.style.width = '';
+        }
     };
     return TableView;
 }());
 export { TableView };
+var TableWrapperView = /** @class */ (function () {
+    function TableWrapperView(node, view) {
+        this.node = node;
+        this.view = view;
+        this.dom = document.createElement('div');
+        this.setAttributes(this.dom, node.attrs);
+        this.contentDOM = this.dom;
+    }
+    TableWrapperView.prototype.update = function (node) {
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        this.node = node;
+        this.setAttributes(this.dom, node.attrs);
+        return true;
+    };
+    TableWrapperView.prototype.ignoreMutation = function (record) {
+        return record.type === 'attributes' && record.attributeName === 'style';
+    };
+    TableWrapperView.prototype.destroy = function () {
+        this.node = undefined;
+        this.view = undefined;
+    };
+    TableWrapperView.prototype.setAttributes = function (dom, attrs) {
+        for (var attrName in attrs) {
+            if (attrName) {
+                var current = dom.getAttribute(attrName);
+                var next = attrs[attrName];
+                if (next && next !== current) {
+                    dom.setAttribute(attrName, next);
+                }
+                else if (!next) {
+                    dom.removeAttribute(attrName);
+                }
+            }
+        }
+        dom.setAttribute('table', '');
+        if (/%/.test(dom.style.width)) {
+            var table = dom.querySelector('table');
+            if (table && table.style.width && !/%/.test(table.style.width)) {
+                dom.style.width = '';
+            }
+        }
+    };
+    return TableWrapperView;
+}());
+export { TableWrapperView };

package/dist/es/source.js

@@ -28,15 +28,24 @@ var restoreTables = function (fragment) {
         if (wrapper && wrapper.matches('div[table]')) {
             table.style.marginLeft = wrapper.style.marginLeft;
             table.style.marginRight = wrapper.style.marginRight;
-            var captionDiv = Array.from(wrapper.children).find(function (el) { return el.matches('div[caption]'); });
-            if (captionDiv) {
-                var caption = table.createCaption();
-                caption.style.textAlign = captionDiv.style.textAlign;
-                caption.style.verticalAlign = captionDiv.style.verticalAlign;
-                caption.style.captionSide = captionDiv.style.captionSide;
-                while (captionDiv.firstChild) {
-                    caption.appendChild(captionDiv.firstChild);
+            var captionDiv_1 = Array.from(wrapper.children).find(function (el) { return el.matches('div[caption]'); });
+            if (captionDiv_1 && captionDiv_1.innerHTML !== '<img>') {
+                var caption_1 = table.createCaption();
+                if (captionDiv_1.id) {
+                    caption_1.id = captionDiv_1.id;
                 }
+                if (captionDiv_1.className) {
+                    caption_1.className = captionDiv_1.className;
+                }
+                Array.from(captionDiv_1.style).forEach(function (styleName) {
+                    caption_1.style[styleName] = captionDiv_1.style[styleName];
+                });
+                while (captionDiv_1.firstChild) {
+                    caption_1.appendChild(captionDiv_1.firstChild);
+                }
+            }
+            if (wrapper.style.width && !table.style.width) {
+                table.style.width = wrapper.style.width;
             }
             wrapper.parentNode.insertBefore(table, wrapper);
             wrapper.parentNode.removeChild(wrapper);
@@ -75,20 +84,29 @@ var validateTablesToPmSchema = function (fragment) {
             wrapper.style.marginLeft = table.style.marginLeft;
             wrapper.style.marginRight = table.style.marginRight;
             if (table.caption) {
-                var captionDiv = document.createElement('div');
-                captionDiv.setAttribute('caption', '');
-                captionDiv.style.display = 'table-caption';
-                captionDiv.style.textAlign = table.caption.style.textAlign;
-                captionDiv.style.verticalAlign = table.caption.style.verticalAlign;
-                captionDiv.style.captionSide = table.caption.style.captionSide;
+                var captionDiv_2 = document.createElement('div');
+                captionDiv_2.setAttribute('caption', '');
+                if (table.caption.id) {
+                    captionDiv_2.id = table.caption.id;
+                }
+                if (table.caption.className) {
+                    captionDiv_2.className = table.caption.className;
+                }
+                Array.from(table.caption.style).forEach(function (styleName) {
+                    captionDiv_2.style[styleName] = table.caption.style[styleName];
+                });
                 while (table.caption.firstChild) {
-                    captionDiv.appendChild(table.caption.firstChild);
+                    captionDiv_2.appendChild(table.caption.firstChild);
                 }
                 table.removeChild(table.caption);
-                wrapper.appendChild(captionDiv);
+                wrapper.appendChild(captionDiv_2);
             }
             table.parentNode.insertBefore(wrapper, table);
             wrapper.appendChild(table);
+            if (/%/.test(table.style.width)) {
+                wrapper.style.width = table.style.width;
+                table.style.width = '';
+            }
         }
     });
 };

package/dist/es2015/config/schema.js

@@ -176,10 +176,7 @@ const nodes = Object.assign({
     }, table_caption_external: {
         content: 'inline+',
         group: 'block',
-        attrs: {
-            caption: { default: null },
-            style: { default: null }
-        },
+        attrs: Object.assign({ caption: { default: null } }, commonAttributes()),
         parseDOM: [{
                 tag: 'div[caption]',
                 getAttrs: domAttributes

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

@@ -1,17 +1,15 @@
 import { Plugin } from 'prosemirror-state';
-import { tableNodeTypes, TableMap } from 'prosemirror-tables';
+import { TableMap } from 'prosemirror-tables';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { colgroupAttr } from '../../config/constants';
-import { TableView } from './table-view';
+import { TableView, TableWrapperView } from './table-view';
 import { cellIndexes, domCellAround, otherResizeHandle, otherResizing, edgeCell, parseStyle, setNodeStyle, tableColumnResizeKey as key } from './utils';
 export function columnResizing() {
-    // tslint:disable-next-line:variable-name
-    const View = TableView, handleWidth = 5, cellMinWidth = 25;
+    const handleWidth = 5, cellMinWidth = 25;
     let plugin = new Plugin({
         key,
         state: {
-            init(_, state) {
-                this.spec.props.nodeViews[tableNodeTypes(state.schema).table.name] = (node, view) => new View(node, view);
+            init(_, _state) {
                 return new ResizeState(-1, null);
             },
             apply(tr, prev) {
@@ -50,7 +48,10 @@ export function columnResizing() {
                 }
                 return DecorationSet.empty;
             },
-            nodeViews: {}
+            nodeViews: {
+                table_wrapper: (node, view) => new TableWrapperView(node, view),
+                table: (node, view) => new TableView(node, view)
+            }
         }
     });
     return plugin;

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

@@ -26,6 +26,7 @@ class ResizeState {
     }
 }
 const handleMouseMove = (view, event) => {
+    var _a;
     const state = key.getState(view.state);
     const { dragging, nodePosition, activeHandle } = state;
     if (nodePosition < 0 || !dragging) {
@@ -50,6 +51,12 @@ const handleMouseMove = (view, event) => {
     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);
@@ -150,6 +157,15 @@ const handleMouseUp = (view) => {
                 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);
         }
     }

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

@@ -80,5 +80,57 @@ export class TableView {
                 }
             }
         }
+        if (/%$/.test(table.style.width)) {
+            this.dom.style.width = table.style.width;
+            table.style.width = '';
+        }
+        else {
+            this.dom.style.width = '';
+        }
+    }
+}
+export 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 (let attrName in attrs) {
+            if (attrName) {
+                const current = dom.getAttribute(attrName);
+                const next = attrs[attrName];
+                if (next && next !== current) {
+                    dom.setAttribute(attrName, next);
+                }
+                else if (!next) {
+                    dom.removeAttribute(attrName);
+                }
+            }
+        }
+        dom.setAttribute('table', '');
+        if (/%/.test(dom.style.width)) {
+            const table = dom.querySelector('table');
+            if (table && table.style.width && !/%/.test(table.style.width)) {
+                dom.style.width = '';
+            }
+        }
     }
 }

package/dist/es2015/source.js

@@ -29,15 +29,24 @@ const restoreTables = (fragment) => {
             table.style.marginLeft = wrapper.style.marginLeft;
             table.style.marginRight = wrapper.style.marginRight;
             const captionDiv = Array.from(wrapper.children).find(el => el.matches('div[caption]'));
-            if (captionDiv) {
+            if (captionDiv && captionDiv.innerHTML !== '<img>') {
                 const caption = table.createCaption();
-                caption.style.textAlign = captionDiv.style.textAlign;
-                caption.style.verticalAlign = captionDiv.style.verticalAlign;
-                caption.style.captionSide = captionDiv.style.captionSide;
+                if (captionDiv.id) {
+                    caption.id = captionDiv.id;
+                }
+                if (captionDiv.className) {
+                    caption.className = captionDiv.className;
+                }
+                Array.from(captionDiv.style).forEach((styleName) => {
+                    caption.style[styleName] = captionDiv.style[styleName];
+                });
                 while (captionDiv.firstChild) {
                     caption.appendChild(captionDiv.firstChild);
                 }
             }
+            if (wrapper.style.width && !table.style.width) {
+                table.style.width = wrapper.style.width;
+            }
             wrapper.parentNode.insertBefore(table, wrapper);
             wrapper.parentNode.removeChild(wrapper);
         }
@@ -77,10 +86,15 @@ const validateTablesToPmSchema = (fragment) => {
             if (table.caption) {
                 const captionDiv = document.createElement('div');
                 captionDiv.setAttribute('caption', '');
-                captionDiv.style.display = 'table-caption';
-                captionDiv.style.textAlign = table.caption.style.textAlign;
-                captionDiv.style.verticalAlign = table.caption.style.verticalAlign;
-                captionDiv.style.captionSide = table.caption.style.captionSide;
+                if (table.caption.id) {
+                    captionDiv.id = table.caption.id;
+                }
+                if (table.caption.className) {
+                    captionDiv.className = table.caption.className;
+                }
+                Array.from(table.caption.style).forEach((styleName) => {
+                    captionDiv.style[styleName] = table.caption.style[styleName];
+                });
                 while (table.caption.firstChild) {
                     captionDiv.appendChild(table.caption.firstChild);
                 }
@@ -89,6 +103,10 @@ const validateTablesToPmSchema = (fragment) => {
             }
             table.parentNode.insertBefore(wrapper, table);
             wrapper.appendChild(table);
+            if (/%/.test(table.style.width)) {
+                wrapper.style.width = table.style.width;
+                table.style.width = '';
+            }
         }
     });
 };

package/dist/npm/config/schema.js

@@ -188,10 +188,7 @@ var nodes = tslib_1.__assign({
     }, table_caption_external: {
         content: 'inline+',
         group: 'block',
-        attrs: {
-            caption: { default: null },
-            style: { default: null }
-        },
+        attrs: tslib_1.__assign({ caption: { default: null } }, commonAttributes()),
         parseDOM: [{
                 tag: 'div[caption]',
                 getAttrs: domAttributes

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

@@ -9,13 +9,11 @@ var constants_1 = require("../../config/constants");
 var table_view_1 = require("./table-view");
 var utils_1 = require("./utils");
 function columnResizing() {
-    // tslint:disable-next-line:variable-name
-    var View = table_view_1.TableView, handleWidth = 5, cellMinWidth = 25;
+    var handleWidth = 5, cellMinWidth = 25;
     var plugin = new prosemirror_state_1.Plugin({
         key: utils_1.tableColumnResizeKey,
         state: {
-            init: function (_, state) {
-                this.spec.props.nodeViews[prosemirror_tables_1.tableNodeTypes(state.schema).table.name] = function (node, view) { return new View(node, view); };
+            init: function (_, _state) {
                 return new ResizeState(-1, null);
             },
             apply: function (tr, prev) {
@@ -54,7 +52,10 @@ function columnResizing() {
                 }
                 return prosemirror_view_1.DecorationSet.empty;
             },
-            nodeViews: {}
+            nodeViews: {
+                table_wrapper: function (node, view) { return new table_view_1.TableWrapperView(node, view); },
+                table: function (node, view) { return new table_view_1.TableView(node, view); }
+            }
         }
     });
     return plugin;

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

@@ -31,6 +31,7 @@ var ResizeState = /** @class */ (function () {
     return ResizeState;
 }());
 var handleMouseMove = function (view, event) {
+    var _a;
     var state = utils_1.tableResizeKey.getState(view.state);
     var dragging = state.dragging, nodePosition = state.nodePosition, activeHandle = state.activeHandle;
     if (nodePosition < 0 || !dragging) {
@@ -55,6 +56,12 @@ var handleMouseMove = function (view, event) {
     if (verticalDir[activeHandle]) {
         tableDom.style.height = height + 'px';
     }
+    if (/px/.test(tableDom.style.width)) {
+        var 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 = '';
+        }
+    }
 };
 var toPercents = function (view, tr, tablePos) {
     var tableNode = view.state.doc.nodeAt(tablePos);
@@ -155,6 +162,15 @@ var handleMouseUp = function (view) {
                 activeHandle: null,
                 nodePosition: nodePosition
             });
+            if (!/%/.test(utils_1.parseStyle(attrs.style).width || '')) {
+                var $pos = tr.doc.resolve(nodePosition);
+                var wrapper = utils_1.parentNode($pos, function (n) { return n.type.name === 'table_wrapper'; });
+                if (wrapper && /%/.test(utils_1.parseStyle(wrapper.node.attrs.style).width || '')) {
+                    var wrapperAttrs = utils_1.setNodeStyle(wrapper.node.attrs, 'width', '');
+                    var wrapperPos = $pos.start(wrapper.depth) - 1;
+                    tr.setNodeMarkup(wrapperPos, null, wrapperAttrs);
+                }
+            }
             view.dispatch(tr);
         }
     }

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

@@ -1,11 +1,11 @@
 import { Node } from 'prosemirror-model';
-import { EditorView } from 'prosemirror-view';
-export declare class TableView {
+import { EditorView, NodeView } from 'prosemirror-view';
+export declare class TableView implements NodeView {
     node?: Node;
     view?: EditorView;
     table?: HTMLTableElement;
     colgroup?: HTMLTableColElement;
-    dom?: HTMLElement;
+    dom: HTMLElement;
     contentDOM?: HTMLElement;
     private resizeHandles?;
     constructor(node: Node, view: EditorView);
@@ -15,3 +15,14 @@ export declare class TableView {
     private renderColgroup;
     private setAttributes;
 }
+export declare class TableWrapperView implements NodeView {
+    node?: Node;
+    view?: EditorView;
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+    constructor(node: Node, view: EditorView);
+    update(node: Node): boolean;
+    ignoreMutation(record: MutationRecord): boolean;
+    destroy(): void;
+    private setAttributes;
+}

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableView = void 0;
+exports.TableWrapperView = exports.TableView = void 0;
 var constants_1 = require("../../config/constants");
 var schema_1 = require("../../config/schema");
 var resize_utils_1 = require("./../resize-utils");
@@ -84,7 +84,61 @@ var TableView = /** @class */ (function () {
                 }
             }
         }
+        if (/%$/.test(table.style.width)) {
+            this.dom.style.width = table.style.width;
+            table.style.width = '';
+        }
+        else {
+            this.dom.style.width = '';
+        }
     };
     return TableView;
 }());
 exports.TableView = TableView;
+var TableWrapperView = /** @class */ (function () {
+    function TableWrapperView(node, view) {
+        this.node = node;
+        this.view = view;
+        this.dom = document.createElement('div');
+        this.setAttributes(this.dom, node.attrs);
+        this.contentDOM = this.dom;
+    }
+    TableWrapperView.prototype.update = function (node) {
+        if (node.type !== this.node.type) {
+            return false;
+        }
+        this.node = node;
+        this.setAttributes(this.dom, node.attrs);
+        return true;
+    };
+    TableWrapperView.prototype.ignoreMutation = function (record) {
+        return record.type === 'attributes' && record.attributeName === 'style';
+    };
+    TableWrapperView.prototype.destroy = function () {
+        this.node = undefined;
+        this.view = undefined;
+    };
+    TableWrapperView.prototype.setAttributes = function (dom, attrs) {
+        for (var attrName in attrs) {
+            if (attrName) {
+                var current = dom.getAttribute(attrName);
+                var next = attrs[attrName];
+                if (next && next !== current) {
+                    dom.setAttribute(attrName, next);
+                }
+                else if (!next) {
+                    dom.removeAttribute(attrName);
+                }
+            }
+        }
+        dom.setAttribute('table', '');
+        if (/%/.test(dom.style.width)) {
+            var table = dom.querySelector('table');
+            if (table && table.style.width && !/%/.test(table.style.width)) {
+                dom.style.width = '';
+            }
+        }
+    };
+    return TableWrapperView;
+}());
+exports.TableWrapperView = TableWrapperView;