@progress/kendo-react-editor 5.16.0-dev.202307201227 → 5.16.0-dev.202307241523

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

@@ -0,0 +1,498 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { CellSelection, TableMap, fragmentToHtml, pmDocToFragment, addColumnAfter, addRowAfter, Selection, TextSelection, parseContent } from '@progress/kendo-editor-common';
+import { deleteColumnCmd, deleteRowCmd } from '../tableEdit';
+import { nodeSize, parseStyle, setNodeStyle, selectedCells, tableCells } from './utils';
+import { parentNode } from '../utils';
+/**
+ * @hidden
+ */
+var initialTableData = {
+    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'
+};
+/**
+ * @hidden
+ */
+var tablePositionStyles = {
+    left: { 'margin-left': '', 'margin-right': 'auto' },
+    center: { 'margin-left': 'auto', 'margin-right': 'auto' },
+    right: { 'margin-left': 'auto', 'margin-right': '' },
+    '': {}
+};
+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 tableCellsPadding = function (table) {
+    var padding = new Set();
+    table.content.forEach(function (row) {
+        row.content.forEach(function (cell) {
+            padding.add(parseStyle(cell.attrs.style).padding || '');
+        });
+    });
+    return padding.size === 1 ? Array.from(padding)[0] : '';
+};
+var associateHeadersType = function (table) {
+    var useScope = true;
+    var useIds = true;
+    table.content.forEach(function (row) {
+        row.content.forEach(function (cell) {
+            var th = cell.type.name === 'table_header';
+            var td = cell.type.name === 'table_cell';
+            if (th && !cell.attrs.scope) {
+                useScope = false;
+            }
+            if ((th && !cell.attrs.id) || (td && !cell.attrs.headers)) {
+                useIds = false;
+            }
+        });
+    });
+    return useScope ? 'scope' : (useIds ? 'id' : 'none');
+};
+/**
+ * @hidden
+ */
+var tableDefaultData = function (state) {
+    var _a, _b, _c;
+    var cells = selectedCells(state);
+    var $pos = state.selection.$from;
+    var table = cells.length ? parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; }) : null;
+    if (!table) {
+        return initialTableData;
+    }
+    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);
+                captionStr = captionStr === '<img>' ? '' : captionStr;
+                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') ? 'center' :
+        parentStyles['margin-right'] === 'auto' ? 'left' :
+            parentStyles['margin-left'] === 'auto' ? 'right' : null;
+    var headerCells = headerCellsCount(table.node, map);
+    var cellsPadding = tableCellsPadding(table.node);
+    return __assign(__assign(__assign(__assign(__assign(__assign({}, initialTableData), { columns: map.width, rows: map.height }), nodeSize(table.node, 'width')), (tableParent && /%/.test(parentStyles.width || '') ? nodeSize(tableParent.node, 'width') : {})), nodeSize(table.node, 'height')), { textAlign: styles['text-align'] || '', position: pos || null, cellPadding: cellsPadding ? parseFloat(cellsPadding) : 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'] || null, collapseBorders: styles['border-collapse'] === 'collapse', caption: captionStr || undefined, captionAlignment: captionStyles['text-align'] || null, captionPosition: captionStyles['caption-side'] || null, headerRows: headerCells.rows, headerColumns: headerCells.columns, associateHeaders: (headerCells.rows || headerCells.columns) ? associateHeadersType(table.node) : 'none', 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 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 table = state.doc.nodeAt(tablePos);
+    if (!table) {
+        return state;
+    }
+    var attrs = __assign({}, table.attrs);
+    var shouldSetWidth = data.width !== null && (data.widthUnit !== '%' || (!data.caption && !data.position));
+    attrs = setNodeStyle(attrs, 'width', shouldSetWidth ? 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 = tablePositionStyles[data.position || ''] || {};
+    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 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;
+    }
+    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) {
+    var result = {
+        state: state,
+        pos: tablePos
+    };
+    if (!tableWrapper && (data.position || data.caption)) {
+        var wrapperAttrs_1 = { table: '', style: 'display: table' };
+        var children = [];
+        var position = data.position;
+        var posStyles_1 = position && tablePositionStyles[position];
+        if (posStyles_1) {
+            Object.keys(posStyles_1).forEach(function (styleName) {
+                wrapperAttrs_1 = setNodeStyle(wrapperAttrs_1, styleName, posStyles_1[styleName] || '');
+            });
+        }
+        if (typeof data.width === 'number' && data.widthUnit === '%') {
+            wrapperAttrs_1 = setNodeStyle(wrapperAttrs_1, 'width', data.width + data.widthUnit);
+        }
+        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);
+            result = { state: state, pos: tablePos };
+        }
+    }
+    else if (tableWrapper && (data.position || data.caption || (!data.caption && hasCaption(tableWrapper.node)))) {
+        state = setTablePosition(state, tableWrapper.node, tableWrapperPos, data.position && tablePositionStyles[data.position]);
+        state = setTableCaption(state, tableWrapper.node, tableWrapperPos, data);
+        result = { state: state, pos: tableWrapperPos };
+    }
+    else if (tableWrapper && !(data.position || data.caption)) {
+        result = { state: state, node: tableWrapper.node, pos: state.selection.$from.start(tableWrapper.depth) - 1 };
+    }
+    else {
+        result = { state: state, pos: tablePos };
+    }
+    var wrapper = tableWrapper && result.state.doc.nodeAt(tableWrapperPos);
+    if (wrapper) {
+        var attrs = void 0;
+        if (typeof data.width === 'number' && data.widthUnit === '%') {
+            attrs = setNodeStyle(wrapper.attrs, 'width', data.width + data.widthUnit);
+        }
+        else if (data.widthUnit !== '%' && /%/.test(parseStyle(wrapper.attrs.style || '').width || '')) {
+            attrs = setNodeStyle(wrapper.attrs, 'width', '');
+        }
+        if (attrs) {
+            result.state = result.state.apply(result.state.tr.setNodeMarkup(tableWrapperPos, null, attrs));
+        }
+    }
+    return result;
+};
+/**
+ * @hidden
+ */
+var applyTableData = function (state, data) {
+    var $from = 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 nextState = resizeTable(state, tablePos, data.rows, data.columns);
+    if (!nextState) {
+        return;
+    }
+    var transaction = nextState.tr;
+    tableCells(nextState).forEach(function (cell) {
+        var attrs = __assign({}, cell.node.attrs);
+        attrs = setNodeStyle(attrs, 'padding', typeof data.cellPadding === 'number' ? data.cellPadding + 'px' : '');
+        transaction.setNodeMarkup(cell.pos, null, attrs);
+    });
+    nextState = nextState.apply(transaction);
+    nextState = setTableStyles(nextState, data, tablePos);
+    nextState = setTableHeaderCells(nextState, 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(nextState, data, tablePos, tableParent, tableParentPos);
+    nextState = result.state;
+    var from = result.pos;
+    var node = nextState.doc.nodeAt(result.pos);
+    if (!node) {
+        return;
+    }
+    var to = from + (tableParent || table).node.content.size;
+    var tr = state.tr.replaceWith(from, to, node);
+    var atEnd = Selection.atEnd(node);
+    var selection = TextSelection.create(tr.doc, from + atEnd.to + 1);
+    tr.setSelection(selection);
+    return tr;
+};
+export { initialTableData, tablePositionStyles, tableDefaultData, applyTableData };

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

@@ -1,4 +1,4 @@
-import { Node } from '@progress/kendo-editor-common';
+import { EditorState, Node } from '@progress/kendo-editor-common';
 /**
  * @hidden
  */
@@ -23,3 +23,17 @@ export declare const parseStyle: (styleText: string | null) => {
  * @hidden
  */
 export declare function setNodeStyle(nodeAttrs: any, styleType: string, value: string): any;
+/**
+ * @hidden
+ */
+export declare const selectedCells: (state: EditorState) => Array<{
+    node: Node;
+    pos: number;
+}>;
+/**
+ * @hidden
+ */
+export declare const tableCells: (state: EditorState) => Array<{
+    node: Node;
+    pos: number;
+}>;

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

@@ -9,6 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { TableMap } from '@progress/kendo-editor-common';
+import { parentNode } from '../utils';
 /**
  * @hidden
  */
@@ -88,3 +90,55 @@ export function setNodeStyle(nodeAttrs, styleType, value) {
     }
     return attrs;
 }
+var getCells = function (state) {
+    var doc = state.doc, selection = state.selection;
+    var result = [];
+    selection.ranges.forEach(function (range) {
+        var from = range.$from.pos;
+        var to = range.$to.pos;
+        doc.nodesBetween(from, to, function (node, pos, _parent, _index) {
+            if (node.type.name === 'table_cell' || node.type.name === 'table_header') {
+                result.push({ node: node, pos: pos });
+            }
+        });
+    });
+    return result;
+};
+/**
+ * @hidden
+ */
+export var selectedCells = function (state) {
+    var startNodeTable = parentNode(state.selection.$from, function (n) { return n.type.name === 'table'; });
+    var endNodeTable = parentNode(state.selection.$to, function (n) { return n.type.name === 'table'; });
+    if (startNodeTable && endNodeTable && startNodeTable.depth === endNodeTable.depth && startNodeTable.node.eq(endNodeTable.node)) {
+        var cells = getCells(state).filter(function (_a) {
+            var pos = _a.pos;
+            var parentTable = parentNode(state.doc.resolve(pos), function (n) { return n.type.name === 'table'; });
+            return parentTable && parentTable.depth === startNodeTable.depth && startNodeTable.node.eq(parentTable.node);
+        });
+        return cells;
+    }
+    return [];
+};
+/**
+ * @hidden
+ */
+export var tableCells = function (state) {
+    var cells = [];
+    if (selectedCells(state).length) {
+        var $pos = state.selection.$from;
+        var parentTable = parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; });
+        if (parentTable === null) {
+            return cells;
+        }
+        var tablePos_1 = $pos.start(parentTable.depth);
+        var tableNode = parentTable.node;
+        var map = TableMap.get(tableNode);
+        var doc_1 = state.doc;
+        map.map.forEach(function (m) {
+            var pos = m + tablePos_1;
+            cells.push({ pos: pos, node: doc_1.nodeAt(pos) });
+        });
+    }
+    return cells;
+};

package/dist/npm/Editor.d.ts

@@ -82,6 +82,7 @@ export declare class Editor extends React.Component<EditorProps, EditorStateInte
     private trOnChange;
     private htmlOnChange;
     private pasteEvent?;
+    private showLicenseWatermark;
     constructor(props: EditorProps);
     /**
      * @hidden

package/dist/npm/Editor.js

@@ -48,10 +48,10 @@ var main_1 = require("./dialogs/main");
 var utils_1 = require("./utils");
 var props_key_1 = require("./utils/props-key");
 var controlled_value_1 = require("./utils/controlled-value");
-var link = toolsSettings_1.EditorToolsSettings.link, bold = toolsSettings_1.EditorToolsSettings.bold, italic = toolsSettings_1.EditorToolsSettings.italic, underline = toolsSettings_1.EditorToolsSettings.underline;
 var browser_detection_1 = require("./utils/browser-detection");
-var licensing = require("@progress/kendo-licensing");
 var package_metadata_1 = require("./package-metadata");
+var kendo_react_common_2 = require("@progress/kendo-react-common");
+var link = toolsSettings_1.EditorToolsSettings.link, bold = toolsSettings_1.EditorToolsSettings.bold, italic = toolsSettings_1.EditorToolsSettings.italic, underline = toolsSettings_1.EditorToolsSettings.underline;
 var messages_1 = require("./messages");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 /**
@@ -90,6 +90,7 @@ var Editor = /** @class */ (function (_super) {
         _this.iframe = null;
         _this.trOnChange = null;
         _this.htmlOnChange = null;
+        _this.showLicenseWatermark = false;
         /**
          * @hidden
          */
@@ -179,15 +180,8 @@ var Editor = /** @class */ (function (_super) {
             }
             return false;
         };
-        if (typeof licensing !== 'undefined') {
-            licensing.validatePackage(package_metadata_1.packageMetadata);
-        }
-        else {
-            var message = "License activation failed for ".concat(package_metadata_1.packageMetadata.name, "\n");
-            message += 'The @progress/kendo-licensing script is not loaded.\n';
-            message += "See ".concat(package_metadata_1.packageMetadata.licensingDocsUrl, " for more information.\n");
-            console.warn(message);
-        }
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+        _this.showLicenseWatermark = (0, kendo_react_common_2.shouldShowValidationUI)(package_metadata_1.packageMetadata);
         return _this;
     }
     Object.defineProperty(Editor.prototype, "value", {
@@ -308,7 +302,8 @@ var Editor = /** @class */ (function (_super) {
                         } : undefined, ref: function (e) { return _this.iframe = e; }, frameBorder: "0", title: localization.toLanguageString(messages_1.keys.iframeTitle, messages_1.messages[messages_1.keys.iframeTitle]), style: contentStyle, className: "k-iframe" }))) :
                 (React.createElement("div", { style: contentStyle, className: "k-editor-content" },
                     React.createElement("div", { ref: function (e) { return _this._contentElement = e; }, suppressContentEditableWarning: true, role: "textbox", "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-label": this.props.ariaLabel }))),
-            this.renderDialog(main_1.EditorDialogs.InsertLinkDialog, link, 'linkDialog')));
+            this.renderDialog(main_1.EditorDialogs.InsertLinkDialog, link, 'linkDialog'),
+            this.showLicenseWatermark && React.createElement(kendo_react_common_2.WatermarkOverlay, null)));
     };
     Editor.prototype.initialize = function () {
         var _this = this;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1689853969,
+    publishDate: 1690210677,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };