@syncfusion/ej2-richtexteditor 19.4.55 → 20.1.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.55
+*  version : 20.1.48
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@19.4.54",
+  "_id": "@syncfusion/ej2-richtexteditor@20.1.47",
   "_inBundle": false,
-  "_integrity": "sha512-E70Pq8AxDcCeqVsy3fVzowvlB2+hDCyW3MUz4uUZclwpVisLIjWm9otu8fNK3bhw6HBUkAqGSx3BxRAFMzlfUQ==",
+  "_integrity": "sha512-+JqSmzz8uh/Xuf7mVptZllX9DZbzfOt9enpA9JftvQiFGKQVDeZwRW2J9qrdtumUBBMmbasVPWkvpMMoLy7w2g==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -26,8 +26,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-19.4.54.tgz",
-  "_shasum": "ddaef5ddb9d9ec7598dfc300179180bd1fcbe491",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-20.1.47.tgz",
+  "_shasum": "7d854e478b53c30642348539aa9a389c4df071f9",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -38,13 +38,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.55",
-    "@syncfusion/ej2-filemanager": "~19.4.52",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-navigations": "~19.4.55",
-    "@syncfusion/ej2-popups": "~19.4.53",
-    "@syncfusion/ej2-splitbuttons": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.48",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-filemanager": "~20.1.47",
+    "@syncfusion/ej2-inputs": "~20.1.48",
+    "@syncfusion/ej2-navigations": "~20.1.48",
+    "@syncfusion/ej2-popups": "~20.1.47",
+    "@syncfusion/ej2-splitbuttons": "~20.1.47"
   },
   "deprecated": false,
   "description": "Essential JS 2 RichTextEditor component",
@@ -70,6 +70,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.4.55",
+  "version": "20.1.48",
   "sideEffects": false
 }

package/src/editor-manager/base/constant.d.ts

@@ -74,3 +74,9 @@ export declare const INSERT_TEXT_TYPE: string;
  * @hidden
  */
 export declare const CLEAR_TYPE: string;
+/**
+ * Self closing tags
+ *
+ * @hidden
+ */
+export declare const SELF_CLOSING_TAGS: string[];

package/src/editor-manager/base/constant.js

@@ -79,3 +79,9 @@ export var INSERT_TEXT_TYPE = 'insert-text-type';
  * @hidden
  */
 export var CLEAR_TYPE = 'clear-type';
+/**
+ * Self closing tags
+ *
+ * @hidden
+ */
+export var SELF_CLOSING_TAGS = ['area', 'base', 'br', 'embed', 'hr', 'img', 'input', 'param', 'source', 'track', 'wbr', 'iframe', 'td'];

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

@@ -209,7 +209,8 @@ var ClearFormat = /** @class */ (function () {
         for (var index = 0; index < textNodes.length; index++) {
             var currentInlineNode = textNodes[index];
             var currentNode = void 0;
-            while (!this.domNode.isBlockNode(currentInlineNode)) {
+            while (!this.domNode.isBlockNode(currentInlineNode) &&
+                (currentInlineNode.parentElement && !currentInlineNode.parentElement.classList.contains('e-img-inner'))) {
                 currentNode = currentInlineNode;
                 currentInlineNode = currentInlineNode.parentElement;
             }
@@ -223,7 +224,7 @@ var ClearFormat = /** @class */ (function () {
     ClearFormat.removeInlineParent = function (textNodes) {
         var nodes = InsertMethods.unwrap(textNodes);
         for (var index = 0; index < nodes.length; index++) {
-            if (nodes[index].parentNode.childNodes.length === 1
+            if (nodes[index].parentNode.childNodes.length === 1 && !nodes[index].parentNode.classList.contains('e-img-inner')
                 && IsFormatted.inlineTags.indexOf(nodes[index].parentNode.nodeName.toLocaleLowerCase()) > -1) {
                 this.removeInlineParent(nodes[index].parentNode);
             }

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

@@ -39,6 +39,12 @@ var InsertHtml = /** @class */ (function () {
             nodeSelection.setSelectionText(docElement, range.startContainer.children[0], range.startContainer.children[0], 0, 0);
             range = nodeSelection.getRange(docElement);
         }
+        if (range.startContainer.nodeName === 'BR' && range.startOffset === 0 && range.startOffset === range.endOffset &&
+            range.startContainer === range.endContainer) {
+            var currentIndex = Array.prototype.slice.call(range.startContainer.parentElement.children).indexOf(range.startContainer);
+            nodeSelection.setSelectionText(docElement, range.startContainer.parentElement, range.startContainer.parentElement, currentIndex + 1, currentIndex + 1);
+            range = nodeSelection.getRange(docElement);
+        }
         var isCursor = range.startOffset === range.endOffset && range.startOffset === 0 &&
             range.startContainer === range.endContainer;
         var isCollapsed = range.collapsed;
@@ -222,7 +228,7 @@ var InsertHtml = /** @class */ (function () {
             else {
                 var tempSpan = createElement('span', { className: 'tempSpan' });
                 var nearestAnchor = closest(range.startContainer.parentElement, 'a');
-                if (range.startContainer.nodeType === 3 && nearestAnchor) {
+                if (range.startContainer.nodeType === 3 && nearestAnchor && closest(nearestAnchor, 'span')) {
                     var immediateBlockNode = this.getImmediateBlockNode(range.startContainer, editNode);
                     if (immediateBlockNode.querySelectorAll('br').length > 0) {
                         detach(immediateBlockNode.querySelector('br'));
@@ -374,7 +380,7 @@ var InsertHtml = /** @class */ (function () {
                 var currentNode = nodes[nodes.length - 1];
                 var splitedElm = void 0;
                 if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR') && !isNOU(currentNode.parentElement) &&
-                    currentNode.parentElement.textContent.trim().length === 0 && (currentNode.parentElement === editNode || !node.classList.contains('pasteContent'))) {
+                    currentNode.parentElement.textContent.trim().length === 0) {
                     splitedElm = currentNode;
                 }
                 else {
@@ -431,9 +437,7 @@ var InsertHtml = /** @class */ (function () {
     InsertHtml.removeEmptyElements = function (element) {
         var emptyElements = element.querySelectorAll(':empty');
         for (var i = 0; i < emptyElements.length; i++) {
-            if (emptyElements[i].tagName !== 'IMG' && emptyElements[i].tagName !== 'BR' &&
-                emptyElements[i].tagName !== 'IFRAME' && emptyElements[i].tagName !== 'TD' &&
-                emptyElements[i].tagName !== 'SOURCE' && emptyElements[i].tagName !== 'HR') {
+            if (CONSTANT.SELF_CLOSING_TAGS.indexOf(emptyElements[i].tagName.toLowerCase()) < 0) {
                 var detachableElement = this.findDetachEmptyElem(emptyElements[i]);
                 if (!isNOU(detachableElement)) {
                     detach(detachableElement);

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

@@ -92,6 +92,9 @@ var Lists = /** @class */ (function () {
             range.endContainer.parentElement.closest('LI');
         if (!isNOU(startNode) && !isNOU(endNode) && startNode === endNode && startNode.tagName === 'LI' &&
             startNode.textContent.trim() === '' && startNode.querySelectorAll('IMG').length === 0) {
+            if (startNode.innerHTML.indexOf(' ') >= 0) {
+                return;
+            }
             if (startNode.textContent.charCodeAt(0) === 65279) {
                 startNode.textContent = '';
             }
@@ -137,6 +140,10 @@ var Lists = /** @class */ (function () {
                 (startNode.textContent.length === 1 && startNode.textContent.charCodeAt(0) === 8203))) {
             startNode.textContent = '';
         }
+        if (startNode === endNode && startNode.tagName === 'LI' && startNode.textContent.length === 0 &&
+            isNOU(startNode.previousElementSibling)) {
+            startNode.removeAttribute('style');
+        }
         if (startNode === endNode && startNode.textContent === '') {
             if (startNode.parentElement.tagName === 'LI' && endNode.parentElement.tagName === 'LI') {
                 detach(startNode);
@@ -233,7 +240,7 @@ var Lists = /** @class */ (function () {
                 e.event.stopPropagation();
                 this.currentAction = this.getAction(nodes[0]);
                 if (e.event.shiftKey) {
-                    this.revertList(nodes);
+                    this.revertList(nodes, e);
                     this.revertClean();
                 }
                 else {
@@ -395,6 +402,9 @@ var Lists = /** @class */ (function () {
                         append([nestedElement], prevSibling);
                         append([elements[i]], nestedElement);
                     }
+                    else if (prevSibling.tagName === 'OL' || prevSibling.tagName === 'UL') {
+                        append([elements[i]], prevSibling);
+                    }
                 }
             }
             else {
@@ -489,7 +499,7 @@ var Lists = /** @class */ (function () {
                 listsNodes[i] = listsNodes[i].parentNode;
             }
         }
-        this.applyLists(listsNodes, this.currentAction, e.selector, e.item);
+        this.applyLists(listsNodes, this.currentAction, e.selector, e.item, e);
         if (e.callBack) {
             e.callBack({
                 requestType: this.currentAction,
@@ -510,10 +520,10 @@ var Lists = /** @class */ (function () {
             this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startElem, endElem, 0, 0);
         }
     };
-    Lists.prototype.applyLists = function (elements, type, selector, item) {
+    Lists.prototype.applyLists = function (elements, type, selector, item, e) {
         var isReverse = true;
         if (this.isRevert(elements, type) && isNOU(item)) {
-            this.revertList(elements);
+            this.revertList(elements, e);
             this.removeEmptyListElements();
         }
         else {
@@ -672,7 +682,7 @@ var Lists = /** @class */ (function () {
             }
         }
     };
-    Lists.prototype.revertList = function (elements) {
+    Lists.prototype.revertList = function (elements, e) {
         var temp = [];
         for (var i = elements.length - 1; i >= 0; i--) {
             for (var j = i - 1; j >= 0; j--) {
@@ -722,7 +732,9 @@ var Lists = /** @class */ (function () {
                         ' class="' + className + ' e-rte-wrap-inner"';
                     var wrapper = '<' + CONSTANT.DEFAULT_TAG + wrapperclass +
                         this.domNode.attributes(parentNode) + '></' + CONSTANT.DEFAULT_TAG + '>';
-                    this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                    if (e.enterAction !== 'BR') {
+                        this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
+                    }
                 }
                 else if (this.domNode.contents(element)[0].nodeType === 3) {
                     var replace = this.domNode.createTagString(CONSTANT.DEFAULT_TAG, parentNode, this.parent.domNode.encode(this.domNode.contents(element)[0].textContent));

package/src/editor-manager/plugin/ms-word-clean-up.js

@@ -110,6 +110,12 @@ var MsWordPaste = /** @class */ (function () {
     MsWordPaste.prototype.imageConversion = function (elm, rtfData) {
         this.checkVShape(elm);
         var imgElem = elm.querySelectorAll('img');
+        for (var i = 0; i < imgElem.length; i++) {
+            if (!isNOU(imgElem[i].getAttribute('v:shapes')) && imgElem[i].getAttribute('v:shapes').indexOf('Picture') < 0) {
+                detach(imgElem[i]);
+            }
+        }
+        imgElem = elm.querySelectorAll('img');
         var imgSrc = [];
         var base64Src = [];
         var imgName = [];

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

@@ -182,7 +182,7 @@ var TableCommand = /** @class */ (function () {
                     var tdElement = createElement('td');
                     tdElement.appendChild(createElement('br'));
                     newRow.appendChild(tdElement);
-                    tdElement.setAttribute('style', allCells[(isHeaderSelect && isBelow) ? (minVal + 1) : minVal][i].getAttribute('style'));
+                    tdElement.setAttribute('style', allCells[(isHeaderSelect && isBelow) ? allCells[(minVal + 1)] ? (minVal + 1) : minVal : minVal][i].getAttribute('style'));
                 }
             }
             // eslint-disable-next-line
@@ -566,7 +566,8 @@ var TableCommand = /** @class */ (function () {
         if (min < (max = Math.min(max, eleArray.length - 1))) {
             for (rowValue = min; rowValue <= max; rowValue++) {
                 // eslint-disable-next-line
-                if (!(min < rowValue && eleArray[rowValue][0] === eleArray[rowValue - 1][0]) && 1 < (index = Math.min(parseInt(eleArray[rowValue][0].getAttribute('rowspan'), 10) || 1, max - min + 1)) && eleArray[rowValue][0] === eleArray[rowValue + 1][0]) {
+                if (!(min < rowValue && eleArray[rowValue][0] === eleArray[rowValue - 1][0]) && eleArray[rowValue][0] &&
+                    1 < (index = Math.min(parseInt(eleArray[rowValue][0].getAttribute('rowspan'), 10) || 1, max - min + 1)) && eleArray[rowValue][0] === eleArray[rowValue + 1][0]) {
                     for (count = index - 1, colIndex = 1; colIndex < eleArray[0].length; colIndex++) {
                         if (eleArray[rowValue][colIndex] !== eleArray[rowValue][colIndex - 1]) {
                             for (rowMin = rowValue; rowMin < rowValue + index; rowMin++) {
@@ -608,10 +609,10 @@ var TableCommand = /** @class */ (function () {
     };
     TableCommand.prototype.mergeCellContent = function () {
         var selectedCells = this.curTable.querySelectorAll('.e-cell-select');
-        var innerHtml = selectedCells[0].innerHTML;
-        for (var i = 1; i < selectedCells.length - 1; i++) {
+        var innerHtml = selectedCells[0].innerHTML === '<br>' ? '' : selectedCells[0].innerHTML;
+        for (var i = 1; i < selectedCells.length; i++) {
             if ('<br>' !== selectedCells[i].innerHTML) {
-                innerHtml = innerHtml + selectedCells[i].innerHTML;
+                innerHtml = innerHtml ? innerHtml + '<br>' + selectedCells[i].innerHTML : innerHtml + selectedCells[i].innerHTML;
             }
         }
         selectedCells[0].innerHTML = innerHtml;

package/src/rich-text-editor/actions/count.js

@@ -34,8 +34,8 @@ var Count = /** @class */ (function () {
         }
     };
     Count.prototype.appendCount = function () {
-        var htmlText = this.parent.editorMode === 'Markdown' ? this.editPanel.value.trim() :
-            this.editPanel.textContent.trim();
+        var htmlText = this.parent.editorMode === 'Markdown' ? this.editPanel.value :
+            this.editPanel.textContent;
         if (this.parent.editorMode !== 'Markdown' && htmlText.indexOf('\u200B') !== -1) {
             this.htmlLength = htmlText.replace(/\u200B/g, '').length;
         }

package/src/rich-text-editor/actions/dropdown-buttons.js

@@ -159,7 +159,7 @@ var DropDownButtons = /** @class */ (function () {
                         }
                         _this.alignDropDown = _this.toolbarRenderer.renderDropDownButton({
                             iconCss: 'e-justify-left e-icons',
-                            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS,
+                            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_ALIGN_TB_BTN,
                             itemName: 'Alignments', items: model.alignmentItems, element: targetElement
                         });
                         break;

package/src/rich-text-editor/actions/html-editor.js

@@ -199,6 +199,7 @@ var HtmlEditor = /** @class */ (function () {
             if (!this.isImageDelete) {
                 args.preventDefault();
             }
+            args.preventDefault();
         }
     };
     HtmlEditor.prototype.isOrderedList = function (editorValue) {
@@ -245,8 +246,8 @@ var HtmlEditor = /** @class */ (function () {
                     }
                 }
             }
-            else if (this.rangeElement.tagName === 'TABLE' || (!isNullOrUndefined(this.rangeElement.previousElementSibling) &&
-                this.rangeElement.previousElementSibling.tagName === 'TABLE')) {
+            else if (this.rangeElement === this.parent.inputElement || this.rangeElement.tagName === 'TABLE' ||
+                (!isNullOrUndefined(this.rangeElement.previousElementSibling) && this.rangeElement.previousElementSibling.tagName === 'TABLE')) {
                 return;
             }
             else {

package/src/rich-text-editor/actions/paste-clean-up.d.ts

@@ -47,6 +47,7 @@ export declare class PasteCleanup {
     private selectFormatting;
     private pasteDialog;
     private destroyDialog;
+    private cleanAppleClass;
     private formatting;
     private addTempClass;
     private removeTempClass;

package/src/rich-text-editor/actions/paste-clean-up.js

@@ -77,7 +77,9 @@ var PasteCleanup = /** @class */ (function () {
                 this.containsHtml = htmlRegex.test(value);
                 var file = e && e.args.clipboardData &&
                     e.args.clipboardData.items.length > 0 ?
-                    e.args.clipboardData.items[0].getAsFile() : null;
+                    (e.args.clipboardData.items[0].getAsFile() === null ?
+                        (!isNOU(e.args.clipboardData.items[1]) ? e.args.clipboardData.items[1].getAsFile() : null) :
+                        e.args.clipboardData.items[0].getAsFile()) : null;
                 this.parent.notify(events.paste, {
                     file: file,
                     args: e.args,
@@ -558,6 +560,13 @@ var PasteCleanup = /** @class */ (function () {
             detach(rteDialogWrapper.children[0]);
         }
     };
+    PasteCleanup.prototype.cleanAppleClass = function (elem) {
+        var appleClassElem = elem.querySelectorAll('br.Apple-interchange-newline');
+        for (var i = 0; i < appleClassElem.length; i++) {
+            detach(appleClassElem[i]);
+        }
+        return elem;
+    };
     PasteCleanup.prototype.formatting = function (value, clean, args) {
         var _this = this;
         var clipBoardElem = this.parent.createElement('div', { className: 'pasteContent', styles: 'display:inline;' });
@@ -565,6 +574,7 @@ var PasteCleanup = /** @class */ (function () {
             value = this.splitBreakLine(value);
         }
         clipBoardElem.innerHTML = value;
+        clipBoardElem = this.cleanAppleClass(clipBoardElem);
         if (this.parent.pasteCleanupSettings.deniedTags !== null) {
             clipBoardElem = this.deniedTags(clipBoardElem);
         }

package/src/rich-text-editor/base/classes.d.ts

@@ -324,6 +324,11 @@ export declare const CLS_FONT_SIZE_TB_BTN: string;
 /**
  * @hidden
 
+ */
+export declare const CLS_ALIGN_TB_BTN: string;
+/**
+ * @hidden
+
  */
 export declare const CLS_FONT_COLOR_TARGET: string;
 /**

package/src/rich-text-editor/base/classes.js

@@ -324,6 +324,11 @@ export var CLS_FONT_SIZE_TB_BTN = 'e-font-size-tbar-btn';
 /**
  * @hidden
 
+ */
+export var CLS_ALIGN_TB_BTN = 'e-alignment-tbar-btn';
+/**
+ * @hidden
+
  */
 export var CLS_FONT_COLOR_TARGET = 'e-rte-fontcolor-element';
 /**

package/src/rich-text-editor/base/rich-text-editor.js

@@ -1211,7 +1211,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                         this.inputElement.parentElement.insertBefore(this.placeHolderWrapper, this.inputElement);
                     }
                     attributes(this.placeHolderWrapper, {
-                        'style': 'font-size: 14px; padding: 16px; margin-left: 0px; margin-right: 0px;'
+                        'style': 'font-size: 14px; margin-left: 0px; margin-right: 0px;'
                     });
                 }
                 this.placeHolderWrapper.innerHTML = this.placeholder;
@@ -1451,7 +1451,8 @@ var RichTextEditor = /** @class */ (function (_super) {
     };
     RichTextEditor.prototype.setValue = function () {
         if (this.valueTemplate) {
-            if (typeof this.valueTemplate === 'string') {
+            var regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
+            if (regEx.test(this.valueTemplate)) {
                 this.setProperties({ value: this.valueTemplate });
             }
             else {
@@ -2037,7 +2038,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.restrict = function (e) {
         if (this.maxLength >= 0) {
             var element = this.editorMode === 'Markdown' ? this.contentModule.getText() :
-                e.currentTarget.textContent.trim();
+                e.currentTarget.textContent;
             var array = [8, 16, 17, 37, 38, 39, 40, 46, 65];
             var arrayKey = void 0;
             for (var i = 0; i <= array.length - 1; i++) {

package/src/rich-text-editor/renderer/image-module.js

@@ -286,6 +286,7 @@ var Image = /** @class */ (function () {
     Image.prototype.calcPos = function (elem) {
         var ignoreOffset = ['TD', 'TH', 'TABLE', 'A'];
         var parentOffset = { top: 0, left: 0 };
+        var elementOffset;
         var doc = elem.ownerDocument;
         var offsetParent = ((elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption') ||
             ignoreOffset.indexOf(elem.offsetParent.tagName) > -1)) ?
@@ -299,10 +300,19 @@ var Image = /** @class */ (function () {
             // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
-        return {
-            top: elem.offsetTop,
-            left: elem.offsetLeft
-        };
+        if (elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption'))) {
+            elementOffset = elem.getBoundingClientRect();
+            return {
+                top: elementOffset.top - parentOffset.top,
+                left: elementOffset.left - parentOffset.left
+            };
+        }
+        else {
+            return {
+                top: elem.offsetTop,
+                left: elem.offsetLeft
+            };
+        }
     };
     Image.prototype.setAspectRatio = function (img, expectedX, expectedY, e) {
         if (isNullOrUndefined(img.width)) {
@@ -312,7 +322,7 @@ var Image = /** @class */ (function () {
             parseInt(img.style.width, 10) : img.width;
         var height = img.style.height !== '' ? parseInt(img.style.height, 10) : img.height;
         if (width > height) {
-            img.style.minWidth = '20px';
+            img.style.minWidth = this.parent.insertImageSettings.minWidth === 0 ? '20px' : formatUnit(this.parent.insertImageSettings.minWidth);
             if (this.parent.insertImageSettings.resizeByPercent) {
                 if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
                     var percentageValue = this.pixToPerc((width / height * expectedY), (img.previousElementSibling || img.parentElement));
@@ -635,6 +645,10 @@ var Image = /** @class */ (function () {
                         range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE))) {
                         detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE));
                     }
+                    else if (range.startContainer.nodeType === 1 &&
+                        range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK)) {
+                        detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK));
+                    }
                 }
                 break;
             case 'insert-image':
@@ -805,6 +819,8 @@ var Image = /** @class */ (function () {
         if (this.parent.quickToolbarModule.imageQTBar) {
             if (e.isNotify) {
                 setTimeout(function () {
+                    _this.parent.formatter.editorManager.nodeSelection.Clear(_this.contentModule.getDocument());
+                    _this.parent.formatter.editorManager.nodeSelection.setSelectionContents(_this.contentModule.getDocument(), target);
                     _this.quickToolObj.imageQTBar.showPopup(args.pageX, pageY, target);
                 }, 400);
             }

package/src/rich-text-editor/renderer/table-module.js

@@ -301,7 +301,7 @@ var Table = /** @class */ (function () {
                 ele.classList.add(classes.CLS_TABLE_SEL);
                 this.addRow(selection, event, true);
                 ele.classList.remove(classes.CLS_TABLE_SEL);
-                nextElement = nextElement.parentElement.nextSibling.firstChild;
+                nextElement = nextElement.parentElement.nextSibling ? nextElement.parentElement.nextSibling.firstChild : nextElement.parentElement.firstChild;
                 // eslint-disable-next-line
                 (nextElement.textContent.trim() !== '' && closest(nextElement, 'td')) ?
                     selection.setSelectionNode(this.contentModule.getDocument(), nextElement) :
@@ -590,6 +590,7 @@ var Table = /** @class */ (function () {
         var offset = elem.getBoundingClientRect();
         var doc = elem.ownerDocument;
         var offsetParent = elem.offsetParent || doc.documentElement;
+        var isNestedTable = false;
         while (offsetParent &&
             (offsetParent === doc.body || offsetParent === doc.documentElement) &&
             offsetParent.style.position === 'static') {
@@ -597,15 +598,29 @@ var Table = /** @class */ (function () {
         }
         if (offsetParent.nodeName === 'TD' && elem.nodeName === 'TABLE') {
             offsetParent = closest(offsetParent, '.e-rte-content');
+            isNestedTable = true;
         }
         if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
             // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
-        return {
-            top: elem.offsetTop,
-            left: elem.offsetLeft
-        };
+        if (isNestedTable) {
+            isNestedTable = false;
+            var topValue = this.parent.inputElement && this.parent.inputElement.scrollTop > 0 ?
+                (this.parent.inputElement.scrollTop + offset.top) - parentOffset.top : offset.top - parentOffset.top;
+            var leftValue = this.parent.inputElement && this.parent.inputElement.scrollLeft > 0 ?
+                (this.parent.inputElement.scrollLeft + offset.left) - parentOffset.left : offset.left - parentOffset.left;
+            return {
+                top: topValue,
+                left: leftValue
+            };
+        }
+        else {
+            return {
+                top: elem.offsetTop,
+                left: elem.offsetLeft
+            };
+        }
     };
     Table.prototype.getPointX = function (e) {
         if (e.touches && e.touches.length) {

package/src/selection/selection.js

@@ -296,6 +296,9 @@ var NodeSelection = /** @class */ (function () {
             node = node && node.childNodes[num[index]];
         }
         if (node && constant >= 0 && node.nodeName !== 'html') {
+            if (node.nodeType === 3 && node.nodeValue.replace(/\u00a0/g, ' ') === ' ') {
+                constant = node.textContent.length;
+            }
             range[isvalid ? 'setStart' : 'setEnd'](node, constant);
         }
         return range;

package/styles/bootstrap-dark.css

@@ -756,6 +756,7 @@
   line-height: 18px;
   opacity: 00.54;
   overflow: hidden;
+  padding: 16px;
   position: absolute;
   text-align: start;
   top: 0;
@@ -920,10 +921,9 @@
 .e-richtexteditor .e-rte-character-count {
   bottom: 0;
   color: #f0f0f0;
-  font-family: 'Times New Roman', Georgia, Serif;
   font-size: 14px;
   margin-right: 30px;
-  opacity: 00.54;
+  opacity: 0.54;
   padding-bottom: 2px;
   position: absolute;
   right: 0;
@@ -2388,7 +2388,10 @@
   padding: 0;
 }
 
-.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
+.e-rte-quick-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:hover,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active {
   padding-left: 0;
   padding-right: 0;
 }

package/styles/bootstrap.css

@@ -902,6 +902,7 @@
   line-height: 18px;
   opacity: 00.54;
   overflow: hidden;
+  padding: 16px;
   position: absolute;
   text-align: start;
   top: 0;
@@ -1066,10 +1067,9 @@
 .e-richtexteditor .e-rte-character-count {
   bottom: 0;
   color: #000;
-  font-family: 'Times New Roman', Georgia, Serif;
   font-size: 14px;
   margin-right: 30px;
-  opacity: 00.54;
+  opacity: 0.54;
   padding-bottom: 2px;
   position: absolute;
   right: 0;
@@ -2534,7 +2534,10 @@
   padding: 0;
 }
 
-.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
+.e-rte-quick-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:hover,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control:active,
+.e-rte-quick-toolbar.e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control.e-active {
   padding-left: 0;
   padding-right: 0;
 }

package/styles/bootstrap4.css

@@ -1035,6 +1035,7 @@
   line-height: 18px;
   opacity: 00.54;
   overflow: hidden;
+  padding: 16px;
   position: absolute;
   text-align: start;
   top: 0;
@@ -1199,10 +1200,9 @@
 .e-richtexteditor .e-rte-character-count {
   bottom: 0;
   color: #6c757d;
-  font-family: 'Times New Roman', Georgia, Serif;
   font-size: 14px;
   margin-right: 30px;
-  opacity: 00.54;
+  opacity: 1;
   padding-bottom: 2px;
   position: absolute;
   right: 0;