@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.41-569421

package/src/editor-manager/plugin/selection-commands.d.ts

@@ -13,7 +13,7 @@ export declare class SelectionCommands {
      * @param {FormatPainterValue} painterValues specifies the element created and last child
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     static applyFormat(docElement: Document, format: string, endNode: Node, enterAction: string, value?: string, selector?: string, painterValues?: FormatPainterValue): void;
     private static insertCursorNode;
@@ -29,4 +29,6 @@ export declare class SelectionCommands {
     private static updateStyles;
     private static insertFormatPainterElem;
     private static formatPainterCleanup;
+    private static concatenateTextExcludingList;
+    private static conCatenateTextNode;
 }

package/src/editor-manager/plugin/selection-commands.js

@@ -23,7 +23,7 @@ var SelectionCommands = /** @class */ (function () {
      * @param {FormatPainterValue} painterValues specifies the element created and last child
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     SelectionCommands.applyFormat = function (docElement, format, endNode, enterAction, value, selector, painterValues) {
         this.enterAction = enterAction;
@@ -38,6 +38,45 @@ var SelectionCommands = /** @class */ (function () {
             var nodeCutter = new NodeCutter();
             var isFormatted = new IsFormatted();
             var range = domSelection.getRange(docElement);
+            var currentAnchorNode = range.startContainer.parentElement;
+            if (range.collapsed && !isNOU(currentAnchorNode) &&
+                currentAnchorNode.tagName === 'A' &&
+                (range.startOffset === currentAnchorNode.textContent.length || range.startOffset === 0)) {
+                var emptyTextNode = document.createTextNode('');
+                if (range.startOffset === 0) {
+                    currentAnchorNode.parentNode.insertBefore(emptyTextNode, currentAnchorNode);
+                }
+                else {
+                    if (!isNOU(currentAnchorNode.nextSibling)) {
+                        currentAnchorNode.parentElement.insertBefore(emptyTextNode, currentAnchorNode.nextSibling);
+                    }
+                    else {
+                        currentAnchorNode.parentNode.appendChild(emptyTextNode);
+                    }
+                }
+                // Set the range to the empty text node
+                var newRange = docElement.createRange();
+                range.setStart(emptyTextNode, 0);
+                range.setEnd(emptyTextNode, 0);
+                range.collapse(true);
+                domSelection.setRange(docElement, newRange);
+            }
+            if (Browser.userAgent.indexOf('Firefox') !== -1 && range.startContainer === range.endContainer && !isNOU(endNode) && range.startContainer === endNode) {
+                var startChildNodes = range.startContainer.childNodes;
+                var startNode = ((startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) :
+                    range.startOffset]) || range.startContainer);
+                var endNode_1 = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) :
+                    range.endOffset] || range.endContainer);
+                var lastSelectionNode = (endNode_1.lastChild.nodeName === 'BR' ? (isNOU(endNode_1.lastChild.previousSibling) ? endNode_1
+                    : endNode_1.lastChild.previousSibling) : endNode_1.firstChild);
+                while (!isNOU(lastSelectionNode) && lastSelectionNode.nodeName !== '#text' && lastSelectionNode.nodeName !== 'IMG' &&
+                    lastSelectionNode.nodeName !== 'BR' && lastSelectionNode.nodeName !== 'HR') {
+                    lastSelectionNode = lastSelectionNode.lastChild;
+                }
+                ;
+                domSelection.setSelectionText(docElement, startNode, lastSelectionNode, 0, 0);
+                range = domSelection.getRange(docElement);
+            }
             var save = domSelection.save(range, docElement);
             var nodes = range.collapsed ? domSelection.getSelectionNodeCollection(range) :
                 domSelection.getSelectionNodeCollectionBr(range);
@@ -185,8 +224,7 @@ var SelectionCommands = /** @class */ (function () {
                 cursorNodes[0].firstElementChild.tagName.toLowerCase() === 'br')) {
                 cursorNodes[0].innerHTML = '';
             }
-            if (cursorNodes.length === 1 && range.startOffset === 0 && (cursorNodes[0].nodeName === 'BR' ||
-                cursorNodes[0].nextSibling.nodeName === 'BR')) {
+            if (cursorNodes.length === 1 && range.startOffset === 0 && (cursorNodes[0].nodeName === 'BR' || (isNOU(cursorNodes[0].nextSibling) ? false : cursorNodes[0].nextSibling.nodeName === 'BR'))) {
                 detach(cursorNodes[0].nodeName === '#text' ? cursorNodes[0].nextSibling : cursorNodes[0]);
             }
             cursorNode = this.getInsertNode(docElement, range, format, value).firstChild;
@@ -211,11 +249,15 @@ var SelectionCommands = /** @class */ (function () {
             && range.endOffset === range.startContainer.length)) {
             var nodeIndex = [];
             var cloneNode = nodes[index];
+            var clonedElement = cloneNode;
             do {
                 nodeIndex.push(domSelection.getIndex(cloneNode));
                 cloneNode = cloneNode.parentNode;
             } while (cloneNode && (cloneNode !== formatNode));
             if (nodes[index].nodeName !== 'BR') {
+                if (clonedElement.nodeName === '#text' && clonedElement.textContent.includes('\u200B')) {
+                    clonedElement.remove();
+                }
                 cloneNode = splitNode = (isCursor && (formatNode.textContent.length - 1) === range.startOffset) ?
                     nodeCutter.SplitNode(range, formatNode, true)
                     : nodeCutter.GetSpliceNode(range, formatNode);
@@ -293,8 +335,49 @@ var SelectionCommands = /** @class */ (function () {
             formatNode.style.textDecoration = 'none';
             child = [formatNode];
         }
+        else if (IsFormatted.inlineTags.indexOf(formatNodeTagName.toLowerCase()) !== -1 && isFontStyle && formatNodeTagName.toLocaleLowerCase() !== 'span') {
+            var fontNodeStyle = formatNode.style;
+            if (fontNodeStyle.color && format === 'fontcolor') {
+                if (formatNode.nodeName === 'A') {
+                    fontNodeStyle.color = value;
+                }
+                else {
+                    fontNodeStyle.color = '';
+                }
+            }
+            else if (fontNodeStyle.backgroundColor && format === 'backgroundcolor') {
+                fontNodeStyle.backgroundColor = '';
+            }
+            else if (fontNodeStyle.fontSize && format === 'fontsize') {
+                fontNodeStyle.fontSize = '';
+            }
+            else if (fontNodeStyle.fontFamily && format === 'fontname') {
+                fontNodeStyle.fontFamily = '';
+            }
+            if (formatNode.getAttribute("style") === '') {
+                formatNode.removeAttribute("style");
+            }
+            child = [formatNode];
+        }
         else {
             child = InsertMethods.unwrap(formatNode);
+            var liElement = nodes[index].parentElement;
+            if (!isNOU(liElement) && liElement.tagName.toLowerCase() !== 'li') {
+                liElement = closest(liElement, 'li');
+            }
+            if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                if (format === 'bold') {
+                    liElement.style.fontWeight = 'normal';
+                }
+                else if (format === "italic") {
+                    liElement.style.fontStyle = 'normal';
+                }
+            }
+            else if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li'
+                && liElement.textContent.trim() !== nodes[index].textContent.trim()) {
+                SelectionCommands.conCatenateTextNode(liElement, format, '', 'normal');
+            }
         }
         if (child[0] && !isFontStyle) {
             var nodeTraverse = child[index] ? child[index] : child[0];
@@ -343,6 +426,20 @@ var SelectionCommands = /** @class */ (function () {
                 if (child[num].nodeType !== 3 || (child[num].textContent &&
                     child[num].textContent.trim().length > 0)) {
                     child[num] = InsertMethods.Wrap(child[num], this.GetFormatNode(format, value, formatNodeTagName, formatNodeStyles));
+                    var liElement = nodes[index].parentElement;
+                    if (!isNOU(liElement) && liElement.tagName.toLowerCase() !== 'li') {
+                        liElement = closest(liElement, 'li');
+                    }
+                    if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                        liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                        if (format === 'fontname') {
+                            liElement.style.fontFamily = value;
+                        }
+                    }
+                    if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li'
+                        && liElement.textContent.trim() !== nodes[index].textContent.trim()) {
+                        SelectionCommands.conCatenateTextNode(liElement, format, liElement.textContent, format, value);
+                    }
                     if (child[num].textContent === startText) {
                         if (num === 0) {
                             range.setStartBefore(child[num]);
@@ -375,7 +472,10 @@ var SelectionCommands = /** @class */ (function () {
                 }
                 var num = index;
                 var liChildContent = '';
-                while (num >= 0 && !isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' && liElement.textContent.replace('/\u200B/g', '').trim().includes(nodes[num].textContent.trim())) {
+                /* eslint-disable security/detect-object-injection */
+                while (num >= 0 && !isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' && liElement.contains(nodes[num]) &&
+                    liElement.textContent.replace('/\u200B/g', '').trim().includes(nodes[num].textContent.trim())) {
+                    /* eslint-enable security/detect-object-injection */
                     liChildContent = ' ' + nodes[num].textContent.trim() + liChildContent;
                     num--;
                 }
@@ -447,6 +547,54 @@ var SelectionCommands = /** @class */ (function () {
                             parentElement = parentElement.parentElement;
                             liElement = parentElement;
                         }
+                        if (format === 'fontcolor' || format === 'fontname' || format === 'fontsize') {
+                            var parentElem = nodes[index].parentElement;
+                            if (!isNOU(parentElem) && parentElem.childNodes) {
+                                for (var i = 0; i < parentElem.childNodes.length; i++) {
+                                    if (this.concatenateTextExcludingList(nodes, index) === nodes[index].textContent) {
+                                        var liElement_1 = void 0;
+                                        if (parentElem.tagName === 'LI') {
+                                            liElement_1 = parentElem;
+                                        }
+                                        else if (parentElem.closest('li')) {
+                                            liElement_1 = parentElem.closest('li');
+                                        }
+                                        if (!isNOU(liElement_1)) {
+                                            switch (format) {
+                                                case 'fontcolor':
+                                                    liElement_1.style.color = value;
+                                                    break;
+                                                case 'fontname':
+                                                    liElement_1.style.fontFamily = value;
+                                                    break;
+                                                case 'fontsize':
+                                                    liElement_1.style.fontSize = value;
+                                                    break;
+                                                default:
+                                                    break;
+                                            }
+                                        }
+                                    }
+                                    // eslint-disable-next-line
+                                    var childElement = parentElem.childNodes[i];
+                                    if (childElement.tagName === 'OL' || childElement.tagName === 'UL') {
+                                        switch (format) {
+                                            case 'fontcolor':
+                                                childElement.style.color = 'initial';
+                                                break;
+                                            case 'fontname':
+                                                childElement.style.fontFamily = 'initial';
+                                                break;
+                                            case 'fontsize':
+                                                childElement.style.fontSize = 'initial';
+                                                break;
+                                            default:
+                                                break;
+                                        }
+                                    }
+                                }
+                            }
+                        }
                         if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
                             liElement.textContent.trim() === nodes[index].textContent.trim()) {
                             if (format === 'fontsize') {
@@ -456,6 +604,9 @@ var SelectionCommands = /** @class */ (function () {
                                 liElement.style.color = value;
                                 liElement.style.textDecoration = 'inherit';
                             }
+                            else if (format === 'fontname') {
+                                liElement.style.fontFamily = value;
+                            }
                         }
                         if (value === 'formatPainter') {
                             return this.insertFormatPainterElem(nodes, index, range, nodeCutter, painterValues, domNode);
@@ -496,6 +647,10 @@ var SelectionCommands = /** @class */ (function () {
                             }
                             nodeList[0] = currentFormatNode;
                             this.applyStyles(nodeList, 0, element);
+                            if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li'
+                                && liElement.textContent.trim() !== nodes[index].textContent.trim()) {
+                                SelectionCommands.conCatenateTextNode(liElement, format, liElement.textContent, format, value);
+                            }
                         }
                         else {
                             nodes[index] = this.applyStyles(nodes, index, element);
@@ -503,6 +658,23 @@ var SelectionCommands = /** @class */ (function () {
                     }
                     else {
                         nodes[index] = this.applyStyles(nodes, index, element);
+                        var liElement = nodes[index].parentElement;
+                        if (!isNOU(liElement) && liElement.tagName.toLowerCase() !== 'li') {
+                            liElement = closest(liElement, 'li');
+                        }
+                        if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                            liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                            if (format === 'bold') {
+                                liElement.style.fontWeight = 'bold';
+                            }
+                            else if (format === "italic") {
+                                liElement.style.fontStyle = 'italic';
+                            }
+                        }
+                        else if (!isNOU(liElement) && liElement.tagName.toLowerCase() === 'li'
+                            && liElement.textContent.trim() !== nodes[index].textContent.trim()) {
+                            SelectionCommands.conCatenateTextNode(liElement, format, liElement.textContent, format);
+                        }
                     }
                 }
             }
@@ -706,7 +878,9 @@ var SelectionCommands = /** @class */ (function () {
             }
             var blockChildNodes = parent.parentElement.childNodes;
             for (var k = 0; k < blockChildNodes.length; k++) {
-                if (blockChildNodes[k].textContent.trim() === '' || blockChildNodes[k].textContent.length === 0) {
+                if ((blockChildNodes[k].textContent.trim() === '' || blockChildNodes[k].textContent.length === 0) &&
+                    blockChildNodes[k].textContent.charCodeAt(0) !== 160) {
+                    // 160 is the char code for &nbsp;
                     detach(blockChildNodes[k]);
                 }
             }
@@ -730,6 +904,76 @@ var SelectionCommands = /** @class */ (function () {
             }
         }
     };
+    SelectionCommands.concatenateTextExcludingList = function (nodes, index) {
+        var result = '';
+        var parentNode = nodes[index].parentElement;
+        for (var i = 0; i < parentNode.childNodes.length; i++) {
+            // eslint-disable-next-line
+            var childNode = parentNode.childNodes[i];
+            if ((childNode.nodeType === 3) || (childNode.nodeType === 1 && (childNode.tagName !== 'OL' && childNode.tagName !== 'UL'))) {
+                result += childNode.textContent;
+            }
+        }
+        return result;
+    };
+    SelectionCommands.conCatenateTextNode = function (liElement, format, value, formatStr, constVal) {
+        var result = '';
+        switch (format) {
+            case 'bold':
+                liElement.querySelectorAll('strong').forEach(function (e) {
+                    result = result + e.textContent;
+                });
+                if (result === value) {
+                    liElement.style.fontWeight = formatStr;
+                }
+                break;
+            case 'italic':
+                liElement.querySelectorAll('em').forEach(function (e) {
+                    result = result + e.textContent;
+                });
+                if (result === value) {
+                    liElement.style.fontStyle = formatStr;
+                }
+                break;
+            case 'fontcolor':
+                var colorStyle_1 = '';
+                liElement.querySelectorAll('span').forEach(function (span) {
+                    colorStyle_1 = span.style.color;
+                    if (colorStyle_1 === constVal) {
+                        result = result + span.textContent;
+                    }
+                });
+                if (result === value) {
+                    liElement.style.color = colorStyle_1;
+                    liElement.style.textDecoration = 'inherit';
+                }
+                break;
+            case 'fontsize':
+                var fontSize_1 = '';
+                liElement.querySelectorAll('span').forEach(function (span) {
+                    fontSize_1 = span.style.getPropertyValue('font-size');
+                    if (fontSize_1 === constVal) {
+                        result = result + span.textContent;
+                    }
+                });
+                if (result === value) {
+                    liElement.style.fontSize = fontSize_1;
+                }
+                break;
+            case 'fontname':
+                var fontFamily_1 = '';
+                liElement.querySelectorAll('span').forEach(function (span) {
+                    fontFamily_1 = span.style.getPropertyValue('font-family');
+                    if (fontFamily_1 === constVal) {
+                        result = result + span.textContent;
+                    }
+                });
+                if (result === value) {
+                    liElement.style.fontFamily = fontFamily_1;
+                }
+                break;
+        }
+    };
     SelectionCommands.enterAction = 'P';
     return SelectionCommands;
 }());

package/src/editor-manager/plugin/selection-exec.d.ts

@@ -3,7 +3,7 @@ import { EditorManager } from './../base/editor-manager';
  * Selection EXEC internal component
  *
  * @hidden
-
+ * @deprecated
  */
 export declare class SelectionBasedExec {
     private parent;
@@ -12,7 +12,7 @@ export declare class SelectionBasedExec {
      *
      * @param {EditorManager} parent - specifies the parent element
      * @hidden
-
+     * @deprecated
      */
     constructor(parent: EditorManager);
     private addEventListener;

package/src/editor-manager/plugin/selection-exec.js

@@ -5,7 +5,7 @@ import * as EVENTS from './../../common/constant';
  * Selection EXEC internal component
  *
  * @hidden
-
+ * @deprecated
  */
 var SelectionBasedExec = /** @class */ (function () {
     /**
@@ -13,7 +13,7 @@ var SelectionBasedExec = /** @class */ (function () {
      *
      * @param {EditorManager} parent - specifies the parent element
      * @hidden
-
+     * @deprecated
      */
     function SelectionBasedExec(parent) {
         this.parent = parent;

package/src/editor-manager/plugin/table.d.ts

@@ -3,7 +3,7 @@ import { EditorManager } from './../base/editor-manager';
  * Link internal component
  *
  * @hidden
-
+ * @deprecated
  */
 export declare class TableCommand {
     private parent;
@@ -14,13 +14,12 @@ export declare class TableCommand {
      *
      * @param {EditorManager} parent - specifies the parent element
      * @hidden
-
+     * @deprecated
      */
     constructor(parent: EditorManager);
     private addEventListener;
     private createTable;
     private calculateStyleValue;
-    private removeEmptyNode;
     private insertAfter;
     private getSelectedCellMinMaxIndex;
     private insertRow;
@@ -39,6 +38,10 @@ export declare class TableCommand {
     private getSelectedMinMaxIndexes;
     private HorizontalSplit;
     private VerticalSplit;
+    private getSplitColWidth;
+    private getColSizes;
+    private getCellIndex;
+    private convertPixelToPercentage;
     private getCorrespondingColumns;
     private FindIndex;
     private getCorrespondingIndex;

package/src/editor-manager/plugin/table.js

@@ -5,7 +5,7 @@ import { InsertHtml } from './inserthtml';
  * Link internal component
  *
  * @hidden
-
+ * @deprecated
  */
 var TableCommand = /** @class */ (function () {
     /**
@@ -13,7 +13,7 @@ var TableCommand = /** @class */ (function () {
      *
      * @param {EditorManager} parent - specifies the parent element
      * @hidden
-
+     * @deprecated
      */
     function TableCommand(parent) {
         this.parent = parent;
@@ -60,9 +60,8 @@ var TableCommand = /** @class */ (function () {
         table.appendChild(tblBody);
         e.item.selection.restore();
         InsertHtml.Insert(this.parent.currentDocument, table, this.parent.editableElement);
-        this.removeEmptyNode();
         e.item.selection.setSelectionText(this.parent.currentDocument, table.querySelector('td'), table.querySelector('td'), 0, 0);
-        if (table.nextElementSibling === null) {
+        if (table.nextElementSibling === null && !table.classList.contains('ignore-table')) {
             var insertElem = void 0;
             if (e.enterAction === 'DIV') {
                 insertElem = createElement('div');
@@ -77,6 +76,9 @@ var TableCommand = /** @class */ (function () {
             }
             this.insertAfter(insertElem, table);
         }
+        if (table.classList.contains('ignore-table')) {
+            table.classList.remove('ignore-table');
+        }
         table.querySelector('td').classList.add('e-cell-select');
         if (e.callBack) {
             e.callBack({
@@ -104,24 +106,6 @@ var TableCommand = /** @class */ (function () {
         }
         return styleValue;
     };
-    TableCommand.prototype.removeEmptyNode = function () {
-        var emptyUl = this.parent.editableElement.querySelectorAll('ul:empty, ol:empty');
-        for (var i = 0; i < emptyUl.length; i++) {
-            detach(emptyUl[i]);
-        }
-        var emptyLiChild = this.parent.editableElement.querySelectorAll('li *:empty:not(img)');
-        for (var i = 0; i < emptyLiChild.length; i++) {
-            detach(emptyLiChild[i]);
-            if (emptyLiChild.length === i + 1) {
-                emptyLiChild = this.parent.editableElement.querySelectorAll('li *:empty:not(img)');
-                i = -1;
-            }
-        }
-        var emptyLi = this.parent.editableElement.querySelectorAll('li:empty');
-        for (var i = 0; i < emptyLi.length; i++) {
-            detach(emptyLi[i]);
-        }
-    };
     TableCommand.prototype.insertAfter = function (newNode, referenceNode) {
         referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
     };
@@ -472,14 +456,21 @@ var TableCommand = /** @class */ (function () {
         }
     };
     TableCommand.prototype.tableVerticalAlign = function (e) {
-        if (e.item.subCommand === 'AlignTop') {
-            e.item.tableCell.style.verticalAlign = 'top';
-        }
-        else if (e.item.subCommand === 'AlignMiddle') {
-            e.item.tableCell.style.verticalAlign = 'middle';
+        var value = '';
+        switch (e.item.subCommand) {
+            case 'AlignTop':
+                value = 'top';
+                break;
+            case 'AlignMiddle':
+                value = 'middle';
+                break;
+            case 'AlignBottom':
+                value = 'bottom';
+                break;
         }
-        else {
-            e.item.tableCell.style.verticalAlign = 'bottom';
+        e.item.tableCell.style.verticalAlign = value;
+        if (value && value !== '' && e.item.tableCell.getAttribute('valign')) {
+            e.item.tableCell.removeAttribute('valign');
         }
         if (e.callBack) {
             e.callBack({
@@ -510,10 +501,22 @@ var TableCommand = /** @class */ (function () {
             firstCell.setAttribute('rowspan', (minMaxIndexes.endRow - minMaxIndexes.startRow + 1).toString());
         }
         var totalWidth = 0;
+        var unit;
         for (var j = rowSelectedCells.length - 1; j >= 0; j--) {
-            totalWidth = totalWidth + parseFloat(rowSelectedCells[j].style.width);
+            if (!isNOU(rowSelectedCells[j].style.width)
+                && rowSelectedCells[j].style.width !== '') {
+                if (!unit) {
+                    var match = rowSelectedCells[j].style.width.match(/^([\d.]+)([a-z%]+)$/i);
+                    unit = match ? match[2] : '%';
+                }
+                totalWidth = totalWidth + parseFloat(rowSelectedCells[j].style.width);
+            }
+            else {
+                totalWidth = totalWidth + ((rowSelectedCells[j].offsetWidth / this.curTable.offsetWidth) * 100);
+                unit = '%';
+            }
         }
-        firstCell.style.width = totalWidth + '%';
+        firstCell.style.width = totalWidth + unit;
         for (var i = 1; i <= selectedCells.length - 1; i++) {
             detach(selectedCells[i]);
         }
@@ -550,7 +553,7 @@ var TableCommand = /** @class */ (function () {
         var eleArray = elements;
         //eslint-disable-next-line
         if (min < (max = Math.min(max, eleArray[0].length - 1))) {
-            for (colIndex === min; colIndex <= max; colIndex++) {
+            for (colIndex = min; colIndex <= max; colIndex++) {
                 // eslint-disable-next-line
                 if (!(min < colIndex && eleArray[0][colIndex] === eleArray[0][colIndex - 1]) && 1 < (index =
                     Math.min(parseInt(eleArray[0][colIndex].getAttribute('colspan'), 10) || 1, max - min + 1)) &&
@@ -741,28 +744,23 @@ var TableCommand = /** @class */ (function () {
         var newCell = this.activeCell.cloneNode(true);
         newCell.removeAttribute('class');
         newCell.innerHTML = '</br>';
-        var avgWidth = parseFloat(this.activeCell.style.width) / 2;
-        if (this.activeCell.tagName === 'TH' && isNaN(avgWidth)) {
-            var cellCount = this.curTable.querySelector('tr').childElementCount;
-            var colSpanCount = 0;
-            for (var i = 0; i < cellCount; i++) {
-                colSpanCount = colSpanCount + (parseInt(this.curTable.querySelector('tr').children[i].getAttribute('colspan'), 10) || 1);
-            }
-            avgWidth = parseFloat((((this.activeCell.offsetWidth / 2) / this.curTable.offsetWidth) * 100).toFixed(1));
-        }
         var activeCellIndex = this.getCorrespondingIndex(this.activeCell, this.getCorrespondingColumns());
         var correspondingColumns = this.getCorrespondingColumns();
-        var activeCellcolSpan = parseInt(this.activeCell.getAttribute('colspan'), 10);
+        var activeCellcolSpan = parseInt(this.activeCell.getAttribute('colspan'), 10) || 1;
         if (activeCellcolSpan > 1) {
-            // eslint-disable-next-line
-            1 < Math.ceil(activeCellcolSpan / 2) ? this.activeCell.setAttribute('colspan', (activeCellcolSpan / 2).toString())
-                : this.activeCell.removeAttribute('colspan');
-            // eslint-disable-next-line
-            1 < (activeCellcolSpan - activeCellcolSpan / 2) ? newCell.setAttribute('colspan', 
-            // eslint-disable-next-line
-            (activeCellcolSpan - activeCellcolSpan / 2).toString()) : newCell.removeAttribute('colspan');
+            var colSpan = Math.ceil(activeCellcolSpan / 2);
+            var getColSizes = this.getColSizes(this.curTable);
+            var activeCellUpdatedWidth = this.getSplitColWidth(activeCellIndex[1], activeCellIndex[1] + colSpan - 1, getColSizes);
+            var newCellWidth = this.getSplitColWidth(activeCellIndex[1] + colSpan, activeCellIndex[1] + activeCellcolSpan - 1, getColSizes);
+            var activeCellWidth = this.convertPixelToPercentage(this.activeCell.offsetWidth, this.curTable.offsetWidth);
+            newCellWidth = (activeCellWidth - activeCellUpdatedWidth) < newCellWidth ? (activeCellWidth - activeCellUpdatedWidth) : newCellWidth;
+            1 < colSpan ? this.activeCell.setAttribute('colspan', colSpan.toString()) : this.activeCell.removeAttribute('colspan');
+            1 < activeCellcolSpan - colSpan ? newCell.setAttribute('colspan', (activeCellcolSpan - colSpan).toString()) : newCell.removeAttribute('colspan');
+            this.activeCell.style.width = activeCellUpdatedWidth + '%';
+            newCell.style.width = newCellWidth + '%';
         }
         else {
+            var avgWidth = parseFloat(this.activeCell.style.width) / 2;
             for (var i = 0; i <= allRows.length - 1; i++) {
                 if (0 === i || correspondingColumns[i][activeCellIndex[1]] !== correspondingColumns[i - 1][activeCellIndex[1]]) {
                     var currentCell = correspondingColumns[i][activeCellIndex[1]];
@@ -772,9 +770,9 @@ var TableCommand = /** @class */ (function () {
                     }
                 }
             }
+            this.activeCell.style.width = avgWidth + '%';
+            newCell.style.width = avgWidth + '%';
         }
-        this.activeCell.style.width = avgWidth + '%';
-        newCell.style.width = avgWidth + '%';
         this.activeCell.parentNode.insertBefore(newCell, this.activeCell.nextSibling);
         if (e.callBack) {
             e.callBack({
@@ -786,6 +784,54 @@ var TableCommand = /** @class */ (function () {
             });
         }
     };
+    TableCommand.prototype.getSplitColWidth = function (startIndex, endInex, sizes) {
+        var width = 0;
+        for (var i = startIndex; i <= endInex; i++) {
+            width += sizes[i];
+        }
+        return this.convertPixelToPercentage(width, this.curTable.offsetWidth);
+    };
+    TableCommand.prototype.getColSizes = function (curTable) {
+        var cellColl = curTable.rows[0].cells;
+        var cellCount = 0;
+        for (var cell = 0; cell < cellColl.length; cell++) {
+            cellCount = cellCount + cellColl[cell].colSpan;
+        }
+        var sizes = new Array(cellCount);
+        var rowSpanCells = new Map();
+        for (var i = 0; i < curTable.rows.length; i++) {
+            var currentColIndex = 0;
+            for (var k = 0; k < curTable.rows[i].cells.length; k++) {
+                for (var l = 1; l < curTable.rows[i].cells[k].rowSpan; l++) {
+                    var key = "" + (i + l) + currentColIndex;
+                    rowSpanCells.set(key, curTable.rows[i].cells[k]);
+                }
+                var cellIndex = this.getCellIndex(rowSpanCells, i, k);
+                if (cellIndex > currentColIndex) {
+                    currentColIndex = cellIndex;
+                }
+                var width = curTable.rows[i].cells[k].offsetWidth;
+                if (!sizes[currentColIndex] || width < sizes[currentColIndex]) {
+                    sizes[currentColIndex] = width;
+                }
+                currentColIndex += 1 + curTable.rows[i].cells[k].colSpan - 1;
+            }
+        }
+        return sizes;
+    };
+    TableCommand.prototype.getCellIndex = function (rowSpanCells, rowIndex, colIndex) {
+        var cellKey = "" + rowIndex + colIndex;
+        var spannedCell = rowSpanCells.get(cellKey);
+        if (spannedCell) {
+            return this.getCellIndex(rowSpanCells, rowIndex, colIndex + spannedCell.colSpan);
+        }
+        else {
+            return colIndex;
+        }
+    };
+    TableCommand.prototype.convertPixelToPercentage = function (value, offsetValue) {
+        return (value / offsetValue) * 100;
+    };
     TableCommand.prototype.getCorrespondingColumns = function () {
         var elementArray = [];
         // eslint-disable-next-line