@progress/kendo-react-editor 5.16.0-dev.202307211637 → 5.16.0

package/dist/es/tools/table-wizard/tableProperties.js

@@ -37,336 +37,10 @@ import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
 import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
 import { tableAlignMiddleCenterIcon, tableAlignMiddleLeftIcon, tableAlignMiddleRightIcon, tableAlignRemoveIcon, tablePropertiesIcon, tablePositionStartIcon, tablePositionCenterIcon, tablePositionEndIcon, positionTopIcon, positionBottomIcon } from '@progress/kendo-svg-icons';
 import { borderStyles, onDownPreventDefault, popupSettings, units, parentNode } from './../utils';
-import { nodeSize, parseStyle, setNodeStyle } from './utils';
-import { itemRenderWithIcon, selectedCells, tableCells, valueRenderWithIcon } from './tableCellProperties';
-import { Selection, TableMap, TextSelection, addColumnAfter, addRowAfter, pmDocToFragment, fragmentToHtml, parseContent, CellSelection } from '@progress/kendo-editor-common';
-import { deleteColumnCmd, deleteRowCmd } from '../tableEdit';
+import { itemRenderWithIcon, valueRenderWithIcon } from './tableCellProperties';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { messages, keys } from './../../messages';
-var lastCell = function (table) {
-    var lastRow = table.lastChild;
-    var cell = lastRow.lastChild;
-    return { node: cell, pos: table.content.size - cell.nodeSize };
-};
-var addTableNodes = function (state, tablePos, table, toAdd, command) {
-    var last = lastCell(table);
-    var cellPos = tablePos + last.pos;
-    var cell = state.doc.nodeAt(cellPos);
-    if (!cell) {
-        return state;
-    }
-    var res = state.doc.resolve(cellPos);
-    var sel = new CellSelection(res, res);
-    var selTr = state.tr.setSelection(sel);
-    var resultState = state.apply(selTr);
-    for (var i = 0; i < toAdd; i++) {
-        command(resultState, function (tr) {
-            resultState = resultState.apply(tr);
-        });
-    }
-    return resultState;
-};
-var removeTableNodes = function (state, tablePos, toDelete, command) {
-    var resultState = state;
-    for (var i = 0; i < toDelete; i++) {
-        var table = resultState.doc.nodeAt(tablePos);
-        if (table) {
-            var last = lastCell(table);
-            var cellPos = tablePos + last.pos;
-            var res = resultState.doc.resolve(cellPos);
-            var selection = new CellSelection(res, res);
-            var selTr = resultState.tr.setSelection(selection);
-            resultState = resultState.apply(selTr);
-            command(resultState, function (tr) {
-                resultState = resultState.apply(tr);
-            });
-        }
-    }
-    return resultState;
-};
-var resizeTable = function (state, tablePos, rows, columns) {
-    var nextState = state;
-    var table = nextState.doc.nodeAt(tablePos);
-    if (!table) {
-        return nextState;
-    }
-    var map = TableMap.get(table);
-    if (map.width === columns && map.height === rows) {
-        return nextState;
-    }
-    if (columns > map.width) {
-        nextState = addTableNodes(nextState, tablePos, table, columns - map.width, addColumnAfter);
-    }
-    else if (columns < map.width) {
-        nextState = removeTableNodes(nextState, tablePos, map.width - columns, deleteColumnCmd);
-    }
-    table = nextState.doc.nodeAt(tablePos);
-    if (!table) {
-        return nextState;
-    }
-    map = TableMap.get(table);
-    if (rows > map.height) {
-        nextState = addTableNodes(nextState, tablePos, table, rows - map.height, addRowAfter);
-    }
-    else if (rows < map.height) {
-        nextState = removeTableNodes(nextState, tablePos, map.height - rows, deleteRowCmd);
-    }
-    return nextState;
-};
-var setTableStyles = function (state, data, tablePos) {
-    var _a;
-    var table = state.doc.nodeAt(tablePos);
-    if (!table) {
-        return state;
-    }
-    var attrs = __assign({}, table.attrs);
-    attrs = setNodeStyle(attrs, 'width', data.width !== null ? data.width + data.widthUnit : '');
-    attrs = setNodeStyle(attrs, 'height', data.height !== null ? data.height + data.heightUnit : '');
-    attrs = setNodeStyle(attrs, 'text-align', data.textAlign || '');
-    attrs = setNodeStyle(attrs, 'background-color', data.backgroundColor || '');
-    attrs = setNodeStyle(attrs, 'border-width', data.borderWidth ? data.borderWidth + 'px' : '');
-    attrs = setNodeStyle(attrs, 'border-style', data.borderStyle || '');
-    attrs = setNodeStyle(attrs, 'border-color', data.borderColor || '');
-    attrs = setNodeStyle(attrs, 'border-spacing', data.cellSpacing !== null ? data.cellSpacing + 'px' : '');
-    if (data.cellSpacing !== null) {
-        attrs = setNodeStyle(attrs, 'border-collapse', 'unset');
-    }
-    else {
-        attrs = setNodeStyle(attrs, 'border-collapse', data.collapseBorders ? 'collapse' : '');
-    }
-    var posStyles = ((_a = data.position) === null || _a === void 0 ? void 0 : _a.style) || {};
-    Object.keys(posStyles).forEach(function (style) {
-        attrs = setNodeStyle(attrs, style, posStyles[style]);
-    });
-    attrs.id = data.id || null;
-    attrs.class = data.className || null;
-    var tr = state.tr.setNodeMarkup(tablePos, null, attrs);
-    state = state.apply(tr);
-    return state;
-};
-var toCellsMap = function (map) {
-    var cells = [];
-    for (var h = 0; h < map.height; h++) {
-        var start = h * map.width;
-        var end = start + map.width;
-        cells.push(map.map.slice(start, end));
-    }
-    return cells;
-};
-var headerCellsCount = function (table, map) {
-    var headerRows = 0;
-    var headerColumns = 0;
-    var cells = toCellsMap(map);
-    cells.forEach(function (row) {
-        var headerCells = true;
-        row.forEach(function (cellPos) {
-            var cell = table.nodeAt(cellPos);
-            if (cell && cell.type.name !== 'table_header') {
-                headerCells = false;
-            }
-        });
-        if (headerCells) {
-            headerRows++;
-        }
-    });
-    for (var col = 0; col < map.width; col++) {
-        var headerCells = true;
-        for (var row = 0; row < map.height; row++) {
-            var cellPos = cells[row] && cells[row][col];
-            var cell = typeof cellPos === 'number' && table.nodeAt(cellPos);
-            if (cell && cell.type.name !== 'table_header') {
-                headerCells = false;
-            }
-        }
-        if (headerCells) {
-            headerColumns++;
-        }
-    }
-    return { rows: headerRows, columns: headerColumns };
-};
-var setCellType = function (state, cell, pos, type, attrs) {
-    if (cell.type.name !== type.name || Object.keys(attrs).length > 0) {
-        var tr = state.tr.setNodeMarkup(pos, type, __assign(__assign({}, cell.attrs), attrs));
-        return state.apply(tr);
-    }
-    return state;
-};
-var resetId = function (cell, attrs) {
-    if (/^cell-[0-9]+-[0-9]+$/.test(cell.attrs.id || '')) {
-        attrs.id = null;
-    }
-};
-var setTableHeaderCells = function (state, data, tablePos) {
-    var table = state.doc.nodeAt(tablePos);
-    var map = table && TableMap.get(table);
-    if (!table || !map) {
-        return state;
-    }
-    // const headerCells = headerCellsCount(table, map);
-    // if (data.headerRows === headerCells.rows && data.headerColumns === headerCells.columns) {
-    //     return state;
-    // }
-    var cells = toCellsMap(map);
-    var newState = state;
-    var _a = state.schema.nodes, table_header = _a.table_header, table_cell = _a.table_cell;
-    var id = String(new Date().getTime());
-    var ids = [];
-    var cellId = function (row, col) {
-        var result = "cell-".concat(row).concat(col, "-").concat(id);
-        if (!ids[row]) {
-            ids.push([]);
-        }
-        if (!ids[row][col]) {
-            ids[row].push([]);
-        }
-        ids[row][col] = result;
-        return result;
-    };
-    var headers = function (row, col, colHeader, rowHeader) {
-        var result = [];
-        if (rowHeader) {
-            for (var r = 0; r < row; r++) {
-                if (ids[r] && ids[r][col]) {
-                    result.push(ids[r][col]);
-                }
-            }
-        }
-        if (colHeader) {
-            for (var c = 0; c < col; c++) {
-                if (ids[row] && ids[row][c]) {
-                    result.push(ids[row][c]);
-                }
-            }
-        }
-        return result.join(' ');
-    };
-    cells.forEach(function (row, rowIndex) {
-        row.forEach(function (cellPos, cellIndex) {
-            var cell = table.nodeAt(cellPos);
-            if (cell) {
-                var colHeader = cellIndex < data.headerColumns;
-                var rowHeader = rowIndex < data.headerRows;
-                var attrs = __assign({}, cell.attrs);
-                resetId(cell, attrs);
-                attrs.headers = null;
-                attrs.scope = null;
-                if (rowHeader || colHeader) {
-                    if (data.associateHeaders === 'scope') {
-                        attrs.scope = rowHeader ? 'col' : 'row';
-                    }
-                    if (data.associateHeaders === 'id') {
-                        attrs.id = cellId(rowIndex, cellIndex);
-                        if (cellIndex > 0 || rowIndex > 0) {
-                            attrs.headers = headers(rowIndex, cellIndex, colHeader, rowHeader) || null;
-                        }
-                    }
-                    newState = setCellType(newState, cell, tablePos + cellPos + 1, table_header, attrs);
-                }
-                else {
-                    if (data.associateHeaders === 'id') {
-                        attrs.headers = headers(rowIndex, cellIndex, data.headerColumns > 0, data.headerRows > 0) || null;
-                    }
-                    newState = setCellType(newState, cell, tablePos + cellPos + 1, table_cell, attrs);
-                }
-            }
-        });
-    });
-    return newState;
-};
-var setTablePosition = function (state, wrapperNode, wrapperPos, styles) {
-    var attrs = __assign({}, wrapperNode.attrs);
-    attrs = setNodeStyle(attrs, 'margin-left', '');
-    attrs = setNodeStyle(attrs, 'margin-right', '');
-    Object.keys(styles || {}).forEach(function (s) {
-        attrs = setNodeStyle(attrs, s, (styles || {})[s] || '');
-    });
-    return state.apply(state.tr.setNodeMarkup(wrapperPos, null, attrs));
-};
-var parseCaptionContent = function (content, schema) {
-    var doc = parseContent('<p>' + content + '</p>', schema);
-    return doc.content.firstChild.content;
-};
-var createCaption = function (data, schema) {
-    if (!data.caption) {
-        return;
-    }
-    var captAttrs = { caption: '', style: 'display: table-caption' };
-    if (data.captionAlignment) {
-        captAttrs = setNodeStyle(captAttrs, 'text-align', data.captionAlignment);
-    }
-    if (data.captionPosition) {
-        captAttrs = setNodeStyle(captAttrs, 'caption-side', data.captionPosition);
-    }
-    var captionContent = parseCaptionContent(data.caption, schema);
-    var captionNode = (captionContent && schema.nodes.table_caption_external.createAndFill(captAttrs, captionContent)) || undefined;
-    return captionNode;
-};
-var hasCaption = function (wrapperNode) {
-    return wrapperNode.firstChild && wrapperNode.firstChild.type.name === 'table_caption_external';
-};
-var setTableCaption = function (state, wrapperNode, wrapperPos, data) {
-    var nextState = state;
-    var captionNode;
-    var captContentPos = wrapperPos + 2;
-    var captPos = wrapperPos + 1;
-    var schema = nextState.schema;
-    if (hasCaption(wrapperNode)) {
-        captionNode = wrapperNode.firstChild;
-        if (data.caption) {
-            var captionContent = parseCaptionContent(data.caption, schema);
-            nextState = nextState.apply(nextState.tr.replaceWith(captContentPos, captContentPos + captionNode.content.size, captionContent));
-            captionNode = nextState.doc.nodeAt(captPos);
-            if (captionNode) {
-                var captAttrs = __assign({}, captionNode.attrs);
-                captAttrs = setNodeStyle(captAttrs, 'text-align', data.captionAlignment || '');
-                captAttrs = setNodeStyle(captAttrs, 'caption-side', data.captionPosition || '');
-                nextState = nextState.apply(nextState.tr.setNodeAttribute(captPos, 'style', captAttrs.style));
-            }
-        }
-        else {
-            nextState = nextState.apply(nextState.tr.deleteRange(captContentPos, captContentPos + captionNode.content.size));
-        }
-    }
-    else {
-        captionNode = createCaption(data, schema);
-        if (captionNode) {
-            nextState = nextState.apply(nextState.tr.replaceWith(captPos, captPos, captionNode));
-        }
-    }
-    return nextState;
-};
-var updateWrapper = function (state, data, tablePos, tableWrapper, tableWrapperPos) {
-    if (!tableWrapper && (data.position || data.caption)) {
-        var wrapperAttrs_1 = { table: '', style: 'display: table' };
-        var children = [];
-        if (data.position) {
-            Object.keys(data.position.style).forEach(function (s) {
-                wrapperAttrs_1 = setNodeStyle(wrapperAttrs_1, s, data.position.style[s] || '');
-            });
-        }
-        var captionNode = createCaption(data, state.schema);
-        if (captionNode) {
-            children.push(captionNode);
-        }
-        var table = state.doc.nodeAt(tablePos);
-        children.push(table);
-        var createdWrapper = state.schema.nodes.table_wrapper.createAndFill(wrapperAttrs_1, children);
-        if (createdWrapper) {
-            var tr = state.tr.replaceWith(tablePos, tablePos + table.content.size, createdWrapper);
-            state = state.apply(tr);
-            return { state: state, pos: tablePos };
-        }
-    }
-    else if (tableWrapper && (data.position || data.caption || (!data.caption && hasCaption(tableWrapper.node)))) {
-        state = setTablePosition(state, tableWrapper.node, tableWrapperPos, data.position && data.position.style);
-        state = setTableCaption(state, tableWrapper.node, tableWrapperPos, data);
-        return { state: state, pos: tableWrapperPos };
-    }
-    else if (tableWrapper && !(data.position || data.caption)) {
-        return { state: state, node: tableWrapper.node, pos: state.selection.$from.start(tableWrapper.depth) - 1 };
-    }
-    return { state: state, pos: tablePos };
-};
+import { applyTableData, initialTableData, tableDefaultData, tablePositionStyles } from './tablePropsUtils';
 /**
  * @hidden
  */
@@ -383,40 +57,10 @@ export var TableProperties = function (props) {
     }, []);
     var onSave = React.useCallback(function (data) {
         if (view && data) {
-            var $from = view.state.selection.$from;
-            var table = parentNode($from, function (n) { return n.type.spec.tableRole === 'table'; });
-            if (!table) {
-                return;
-            }
-            var tablePos = $from.start(table.depth) - 1;
-            var state = resizeTable(view.state, tablePos, data.rows, data.columns);
-            if (!state) {
-                return;
-            }
-            var transaction_1 = state.tr;
-            tableCells(state).forEach(function (cell) {
-                var attrs = __assign({}, cell.node.attrs);
-                attrs = setNodeStyle(attrs, 'padding', typeof data.cellPadding === 'number' ? data.cellPadding + 'px' : '');
-                transaction_1.setNodeMarkup(cell.pos, null, attrs);
-            });
-            state = state.apply(transaction_1);
-            state = setTableStyles(state, data, tablePos);
-            state = setTableHeaderCells(state, data, tablePos);
-            var tableParent = parentNode($from, function (n) { return n.type.name === 'table_wrapper'; });
-            var tableParentPos = $from.start((tableParent === null || tableParent === void 0 ? void 0 : tableParent.depth) || 0) - 1;
-            var result = updateWrapper(state, data, tablePos, tableParent, tableParentPos);
-            state = result.state;
-            var from = result.pos;
-            var node = state.doc.nodeAt(result.pos);
-            if (!node) {
-                return;
+            var tr = applyTableData(view.state, data);
+            if (tr) {
+                view.dispatch(tr);
             }
-            var to = from + (tableParent || table).node.content.size;
-            var tr = view.state.tr.replaceWith(from, to, node);
-            var atEnd = Selection.atEnd(node);
-            var selection = TextSelection.create(tr.doc, from + atEnd.to);
-            tr.setSelection(selection);
-            view.dispatch(tr);
         }
         setShowDialog(false);
     }, [view]);
@@ -438,24 +82,24 @@ var tablePosition = [{
         textKey: keys.tablePropertiesLeft,
         text: messages[keys.tablePropertiesLeft],
         value: 'left',
-        style: { 'margin-left': '', 'margin-right': 'auto' },
+        style: {},
         icon: 'table-position-left',
         svgIcon: tablePositionStartIcon
     }, {
         textKey: keys.tablePropertiesCenter,
         text: messages[keys.tablePropertiesCenter],
         value: 'center',
-        style: { 'margin-left': 'auto', 'margin-right': 'auto' },
+        style: {},
         icon: 'table-position-center',
         svgIcon: tablePositionCenterIcon
     }, {
         textKey: keys.tablePropertiesRight,
         text: messages[keys.tablePropertiesRight],
         value: 'right',
-        style: { 'margin-left': 'auto', 'margin-right': '' },
+        style: {},
         icon: 'table-position-right',
         svgIcon: tablePositionEndIcon
-    }];
+    }].map(function (p) { return (__assign(__assign({}, p), { style: tablePositionStyles[p.value] })); });
 var captionPositionData = [{
         textKey: keys.tablePropertiesTop,
         text: messages[keys.tablePropertiesTop],
@@ -474,63 +118,11 @@ var associateHeadersData = [
     { textKey: keys.tablePropertiesUsingScopeAttribute, text: messages[keys.tablePropertiesUsingScopeAttribute], value: 'scope' },
     { textKey: keys.tablePropertiesUsingIdAttributes, text: messages[keys.tablePropertiesUsingIdAttributes], value: 'id' }
 ];
-var initialData = {
-    rows: 0,
-    columns: 0,
-    width: null,
-    widthUnit: '',
-    height: null,
-    heightUnit: '',
-    position: null,
-    textAlign: '',
-    cellPadding: null,
-    cellSpacing: null,
-    backgroundColor: undefined,
-    borderWidth: null,
-    borderColor: undefined,
-    borderStyle: null,
-    collapseBorders: false,
-    id: '',
-    className: '',
-    caption: '',
-    captionAlignment: null,
-    captionPosition: null,
-    headerRows: 0,
-    headerColumns: 0,
-    associateHeaders: 'none'
-};
 var TablePropertiesDialog = function (props) {
     var defaults = React.useMemo(function () {
-        var _a, _b, _c;
-        var cells = selectedCells(props.view.state);
-        var $pos = props.view.state.selection.$from;
-        var table = cells.length ? parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; }) : null;
-        if (!table) {
-            return initialData;
-        }
-        var tableParent = parentNode($pos, function (n) { return n.type.name === 'table_wrapper'; });
-        var captionStr = '';
-        var captionStyles = {};
-        var parentStyles = {};
-        if (tableParent) {
-            parentStyles = parseStyle(tableParent.node.attrs.style);
-            tableParent.node.content.forEach(function (node) {
-                if (node.type.name === 'table_caption_external') {
-                    var fr = pmDocToFragment(node);
-                    captionStr = fragmentToHtml(fr);
-                    captionStyles = parseStyle(node.attrs.style);
-                }
-            });
-        }
-        var styles = parseStyle(((_a = table.node.attrs) === null || _a === void 0 ? void 0 : _a.style) || '');
-        var map = TableMap.get(table.node);
-        var pos = (parentStyles['margin-left'] === 'auto' && parentStyles['margin-right'] === 'auto') ? tablePosition.find(function (p) { return p.value === 'center'; }) :
-            parentStyles['margin-right'] === 'auto' ? tablePosition.find(function (p) { return p.value === 'left'; }) :
-                parentStyles['margin-left'] === 'auto' ? tablePosition.find(function (p) { return p.value === 'right'; }) : null;
-        var headerCells = headerCellsCount(table.node, map);
-        return __assign(__assign(__assign(__assign(__assign({}, initialData), { columns: map.width, rows: map.height }), nodeSize(table.node, 'width')), nodeSize(table.node, 'height')), { textAlign: styles['text-align'] || '', position: pos || null, cellPadding: styles.padding ? parseFloat(styles.padding) : null, cellSpacing: styles['border-spacing'] ? parseFloat(styles['border-spacing']) : null, backgroundColor: styles['background-color'], borderWidth: styles['border-width'] ? parseFloat(styles['border-width']) : null, borderColor: styles['border-color'], borderStyle: styles['border-style'], collapseBorders: styles['border-collapse'] === 'collapse', caption: captionStr, captionAlignment: captionStyles['text-align'], captionPosition: captionStyles['caption-side'], headerRows: headerCells.rows, headerColumns: headerCells.columns, 
-            // associateHeaders
-            id: (_b = table.node.attrs) === null || _b === void 0 ? void 0 : _b.id, className: (_c = table.node.attrs) === null || _c === void 0 ? void 0 : _c.class });
+        var state = props.view && props.view.state;
+        var data = state ? tableDefaultData(state) : initialTableData;
+        return data;
     }, [props.view]);
     var loc = useLocalization();
     var _a = React.useState(0), selected = _a[0], setSelected = _a[1];
@@ -563,7 +155,7 @@ var TablePropertiesDialog = function (props) {
     var captionPosition = React.useRef(null);
     var associateHeaders = React.useRef(null);
     var onSave = React.useCallback(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         var data = {
             rows: ((_a = rows.current) === null || _a === void 0 ? void 0 : _a.value) || 0,
             columns: ((_b = columns.current) === null || _b === void 0 ? void 0 : _b.value) || 0,
@@ -574,20 +166,20 @@ var TablePropertiesDialog = function (props) {
             borderWidth: borderWidth.current ? borderWidth.current.value : null,
             widthUnit: ((_c = widthUnit.current) === null || _c === void 0 ? void 0 : _c.value) || '',
             heightUnit: ((_d = heightUnit.current) === null || _d === void 0 ? void 0 : _d.value) || '',
-            position: ((_e = position.current) === null || _e === void 0 ? void 0 : _e.value) || null,
-            textAlign: ((_f = alignment.current) === null || _f === void 0 ? void 0 : _f.value) ? alignment.current.value.value : null,
-            borderStyle: ((_g = borderStyle.current) === null || _g === void 0 ? void 0 : _g.value) ? borderStyle.current.value.value : null,
-            backgroundColor: (_h = backgroundColor.current) === null || _h === void 0 ? void 0 : _h.value,
-            borderColor: (_j = borderColor.current) === null || _j === void 0 ? void 0 : _j.value,
-            collapseBorders: Boolean((_l = (_k = collapseBorders.current) === null || _k === void 0 ? void 0 : _k.element) === null || _l === void 0 ? void 0 : _l.checked),
-            id: String(((_m = id.current) === null || _m === void 0 ? void 0 : _m.value) || ''),
-            className: String(((_o = className.current) === null || _o === void 0 ? void 0 : _o.value) || ''),
-            caption: String(((_p = caption.current) === null || _p === void 0 ? void 0 : _p.value) || ''),
-            headerRows: ((_q = headerRows.current) === null || _q === void 0 ? void 0 : _q.value) || 0,
-            headerColumns: ((_r = headerColumns.current) === null || _r === void 0 ? void 0 : _r.value) || 0,
-            captionAlignment: ((_s = captionAlignment.current) === null || _s === void 0 ? void 0 : _s.value) ? captionAlignment.current.value.value : null,
-            captionPosition: ((_t = captionPosition.current) === null || _t === void 0 ? void 0 : _t.value) ? captionPosition.current.value.value : null,
-            associateHeaders: ((_u = associateHeaders.current) === null || _u === void 0 ? void 0 : _u.value) ? associateHeaders.current.value.value : 'none'
+            position: ((_f = (_e = position.current) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.value) || null,
+            textAlign: ((_g = alignment.current) === null || _g === void 0 ? void 0 : _g.value) ? alignment.current.value.value : null,
+            borderStyle: ((_h = borderStyle.current) === null || _h === void 0 ? void 0 : _h.value) ? borderStyle.current.value.value : null,
+            backgroundColor: (_j = backgroundColor.current) === null || _j === void 0 ? void 0 : _j.value,
+            borderColor: (_k = borderColor.current) === null || _k === void 0 ? void 0 : _k.value,
+            collapseBorders: Boolean((_m = (_l = collapseBorders.current) === null || _l === void 0 ? void 0 : _l.element) === null || _m === void 0 ? void 0 : _m.checked),
+            id: String(((_o = id.current) === null || _o === void 0 ? void 0 : _o.value) || ''),
+            className: String(((_p = className.current) === null || _p === void 0 ? void 0 : _p.value) || ''),
+            caption: String(((_q = caption.current) === null || _q === void 0 ? void 0 : _q.value) || ''),
+            headerRows: ((_r = headerRows.current) === null || _r === void 0 ? void 0 : _r.value) || 0,
+            headerColumns: ((_s = headerColumns.current) === null || _s === void 0 ? void 0 : _s.value) || 0,
+            captionAlignment: ((_t = captionAlignment.current) === null || _t === void 0 ? void 0 : _t.value) ? captionAlignment.current.value.value : null,
+            captionPosition: ((_u = captionPosition.current) === null || _u === void 0 ? void 0 : _u.value) ? captionPosition.current.value.value : null,
+            associateHeaders: ((_v = associateHeaders.current) === null || _v === void 0 ? void 0 : _v.value) ? associateHeaders.current.value.value : 'none'
         };
         props.onSave.call(undefined, data);
     }, [props.onSave]);
@@ -621,7 +213,7 @@ var TablePropertiesDialog = function (props) {
                 React.createElement("div", { className: "k-form-field k-col-span-2" },
                     React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesPosition, messages[keys.tablePropertiesPosition])),
                     React.createElement("div", { className: "k-form-field-wrap" },
-                        React.createElement(DropDownList, { ref: position, defaultValue: defaults.position, popupSettings: popupSettings, data: tablePosition.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'value', valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
+                        React.createElement(DropDownList, { ref: position, defaultValue: tablePosition.find(function (p) { return p.value === defaults.position; }), popupSettings: popupSettings, data: tablePosition.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'value', valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
                 React.createElement("div", { className: "k-form-field k-col-span-2" },
                     React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesAlignment, messages[keys.tablePropertiesAlignment])),
                     React.createElement("div", { className: "k-form-field-wrap" },
@@ -690,7 +282,7 @@ var TablePropertiesDialog = function (props) {
                         React.createElement("div", { className: "k-form-field k-col-span-2" },
                             React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesAssociateHeaders, messages[keys.tablePropertiesAssociateHeaders])),
                             React.createElement("div", { className: "k-form-field-wrap" },
-                                React.createElement(DropDownList, { ref: associateHeaders, defaultValue: associateHeadersData[0], data: associateHeadersData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), popupSettings: popupSettings, textField: 'text', dataItemKey: 'value' })))))))));
+                                React.createElement(DropDownList, { ref: associateHeaders, defaultValue: associateHeadersData.find(function (i) { return i.value === defaults.associateHeaders; }), data: associateHeadersData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), popupSettings: popupSettings, textField: 'text', dataItemKey: 'value' })))))))));
     var content = (React.createElement(TabStrip, { selected: selected, onSelect: onSelect, animation: false, keepTabsMounted: true },
         React.createElement(TabStripTab, { title: loc.toLanguageString(keys.tablePropertiesGeneral, messages[keys.tablePropertiesGeneral]) }, general),
         React.createElement(TabStripTab, { title: loc.toLanguageString(keys.tablePropertiesAdvanced, messages[keys.tablePropertiesAdvanced]) }, advanced)));

package/dist/es/tools/table-wizard/tablePropsUtils.d.ts

@@ -0,0 +1,52 @@
+import { EditorState, Transaction } from '@progress/kendo-editor-common';
+/**
+ * @hidden
+ */
+declare type TablePosition = 'left' | 'right' | 'center' | '';
+/**
+ * @hidden
+ */
+interface TableData {
+    rows: number;
+    columns: number;
+    width: number | null;
+    widthUnit: string;
+    height: number | null;
+    heightUnit: string;
+    position: TablePosition | null;
+    textAlign: string;
+    cellPadding: number | null;
+    cellSpacing: number | null;
+    backgroundColor: string | undefined;
+    borderWidth: number | null;
+    borderColor: string | undefined;
+    borderStyle: string | null;
+    collapseBorders: boolean;
+    id: string;
+    className: string;
+    caption?: string;
+    captionPosition: string | null;
+    captionAlignment: string | null;
+    headerRows: number;
+    headerColumns: number;
+    associateHeaders: 'none' | 'scope' | 'id';
+}
+/**
+ * @hidden
+ */
+declare const initialTableData: TableData;
+/**
+ * @hidden
+ */
+declare const tablePositionStyles: Record<TablePosition, {
+    [styleName: string]: string;
+}>;
+/**
+ * @hidden
+ */
+declare const tableDefaultData: (state: EditorState) => TableData;
+/**
+ * @hidden
+ */
+declare const applyTableData: (state: EditorState, data: TableData) => Transaction | undefined;
+export { TableData, initialTableData, tablePositionStyles, TablePosition, tableDefaultData, applyTableData };