@syncfusion/ej2-richtexteditor 19.4.54 → 20.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.54
+*  version : 20.1.47
 *  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.53",
+  "_id": "@syncfusion/ej2-richtexteditor@19.7.5",
   "_inBundle": false,
-  "_integrity": "sha512-wTMXB43eT3dngxxLXS+5BzGvEwh5tZOHKUd+5lLXgD0eWrFWAljm79JdfitOb89dyPBUGVHvbEcYbentqdKbgg==",
+  "_integrity": "sha512-qd8dxBBoB6NySpSez7cBo1QjzbpAmvbM3hS4N1NqHbVvaRjJWs8hnvOeCwDAqcS8U4KltG8Np81Ztg0Zsnn+zQ==",
   "_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.53.tgz",
-  "_shasum": "f7a93f74a7396e02d0f4694f12c06a20e088ae84",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-19.7.5.tgz",
+  "_shasum": "a9cbd4740f94fbe66b3fb49af4d63dc8fed5af77",
   "_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.53",
-    "@syncfusion/ej2-filemanager": "~19.4.52",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-navigations": "~19.4.53",
-    "@syncfusion/ej2-popups": "~19.4.53",
-    "@syncfusion/ej2-splitbuttons": "~19.4.52"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-filemanager": "~20.1.47",
+    "@syncfusion/ej2-inputs": "~20.1.47",
+    "@syncfusion/ej2-navigations": "~20.1.47",
+    "@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.54",
+  "version": "20.1.47",
   "sideEffects": false
 }

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/image.js

@@ -218,7 +218,12 @@ var ImageCommand = /** @class */ (function () {
     ImageCommand.prototype.removeImage = function (e) {
         if (closest(e.item.selectNode[0], 'a')) {
             if (e.item.selectNode[0].parentElement.nodeName === 'A' && !isNOU(e.item.selectNode[0].parentElement.innerText)) {
-                detach(e.item.selectNode[0]);
+                if (!isNOU(closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION))) {
+                    detach(closest(e.item.selectNode[0], '.' + classes.CLASS_CAPTION));
+                }
+                else {
+                    detach(e.item.selectNode[0]);
+                }
             }
             else {
                 detach(closest(e.item.selectNode[0], 'a'));

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 {

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

@@ -74,6 +74,11 @@ var LinkCommand = /** @class */ (function () {
         else {
             var domSelection = new NodeSelection();
             var range = domSelection.getRange(this.parent.currentDocument);
+            if (range.endContainer.nodeName === '#text' && range.startContainer.textContent.length === (range.endOffset + 1) &&
+                range.endContainer.textContent.charAt(range.endOffset) === ' ' && range.endContainer.nextSibling.nodeName === 'A') {
+                domSelection.setSelectionText(this.parent.currentDocument, range.startContainer, range.endContainer, range.startOffset, range.endOffset + 1);
+                range = domSelection.getRange(this.parent.currentDocument);
+            }
             var text = isNOU(e.item.text) ? true : e.item.text.replace(/ /g, '').localeCompare(range.toString()
                 .replace(/\n/g, ' ').replace(/ /g, '')) < 0;
             if (e.event && e.event.type === 'keydown' && (e.event.keyCode === 32

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 = '';
             }
@@ -233,7 +236,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 +398,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 {
@@ -407,6 +413,14 @@ var Lists = /** @class */ (function () {
     };
     Lists.prototype.applyListsHandler = function (e) {
         var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
+        if (range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement &&
+            range.startOffset === range.endOffset && range.startOffset === 0 &&
+            this.parent.editableElement.textContent.length === 0 && (this.parent.editableElement.childNodes[0].nodeName != 'TABLE' &&
+            this.parent.editableElement.childNodes[0].nodeName != 'IMG')) {
+            var focusNode = range.startContainer.childNodes[0];
+            this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, focusNode, focusNode, 0, 0);
+            range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
+        }
         this.saveSelection = this.parent.nodeSelection.save(range, this.parent.currentDocument);
         this.currentAction = e.subCommand;
         this.currentAction = e.subCommand = this.currentAction === 'NumberFormatList' ? 'OL' : this.currentAction === 'BulletFormatList' ? 'UL' : this.currentAction;
@@ -481,7 +495,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,
@@ -502,10 +516,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 {
@@ -664,7 +678,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--) {
@@ -714,7 +728,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/selection-commands.js

@@ -110,6 +110,7 @@ var SelectionCommands = /** @class */ (function () {
     };
     SelectionCommands.insertCursorNode = function (docElement, domSelection, range, isFormatted, nodeCutter, format, value, endNode) {
         var cursorNodes = domSelection.getNodeCollection(range);
+        var domNode = new DOMNode(endNode, docElement);
         var cursorFormat = (cursorNodes.length > 0) ?
             (cursorNodes.length > 1 && range.startContainer === range.endContainer) ?
                 this.getCursorFormat(isFormatted, cursorNodes, format, endNode) :
@@ -117,12 +118,17 @@ var SelectionCommands = /** @class */ (function () {
         var cursorNode = null;
         if (cursorFormat) {
             cursorNode = cursorNodes[0];
-            if (cursorFormat.firstChild.textContent.charCodeAt(0) === 8203) {
+            if (cursorFormat.firstChild.textContent.charCodeAt(0) === 8203 && cursorFormat.firstChild.nodeType === 3) {
                 var isCursorEqual = false;
                 var regEx = new RegExp(String.fromCharCode(8203), 'g');
                 var emptySpaceNode = void 0;
                 if (cursorFormat.firstChild === cursorNode) {
-                    cursorNode.textContent = cursorNode.textContent.replace(regEx, '');
+                    cursorNode.textContent = (cursorFormat.parentElement && (domNode.isBlockNode(cursorFormat.parentElement) &&
+                        cursorFormat.parentElement.textContent.length <= 1 ? cursorFormat.parentElement.childElementCount > 1 :
+                        cursorFormat.childElementCount === 0) &&
+                        (cursorFormat.parentElement.textContent.length > 1 ||
+                            cursorFormat.parentElement.firstChild && cursorFormat.parentElement.firstChild.nodeType === 1) ?
+                        cursorNode.textContent : cursorNode.textContent.replace(regEx, ''));
                     emptySpaceNode = cursorNode;
                     isCursorEqual = true;
                 }

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

@@ -106,7 +106,9 @@ var HtmlEditor = /** @class */ (function () {
                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), range.startContainer, pointer);
             }
             if (!isNOU(range.startContainer.previousSibling) && !isNOU(range.startContainer.previousSibling.parentElement) &&
-                range.startContainer.parentElement === range.startContainer.previousSibling.parentElement && range.startContainer.previousSibling.textContent.charCodeAt(0) === 8203) {
+                range.startContainer.parentElement === range.startContainer.previousSibling.parentElement &&
+                range.startContainer.previousSibling.textContent.charCodeAt(0) === 8203 &&
+                range.startContainer.previousSibling.textContent.length <= 1) {
                 range.startContainer.previousSibling.textContent = range.startContainer.previousSibling.textContent.replace(regEx, '');
             }
             if (range.endContainer.textContent.charCodeAt(range.endOffset) === 8203) {
@@ -197,6 +199,7 @@ var HtmlEditor = /** @class */ (function () {
             if (!this.isImageDelete) {
                 args.preventDefault();
             }
+            args.preventDefault();
         }
     };
     HtmlEditor.prototype.isOrderedList = function (editorValue) {

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);
             }
@@ -1846,7 +1862,8 @@ var Image = /** @class */ (function () {
         if (activePopupElement) {
             activePopupElement.classList.add(classes.CLS_HIDE);
         }
-        if (e.dataTransfer.files.length > 0) { //For external image drag and drop
+        var imgElement = this.parent.inputElement.ownerDocument.querySelector('.' + classes.CLS_RTE_DRAG_IMAGE);
+        if (e.dataTransfer.files.length > 0 && imgElement === null) { //For external image drag and drop
             if (e.dataTransfer.files.length > 1) {
                 return;
             }
@@ -1869,7 +1886,6 @@ var Image = /** @class */ (function () {
         }
         else { //For internal image drag and drop
             var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-            var imgElement = this.parent.inputElement.ownerDocument.querySelector('.' + classes.CLS_RTE_DRAG_IMAGE);
             if (imgElement && imgElement.tagName === 'IMG') {
                 if (imgElement.nextElementSibling) {
                     if (imgElement.nextElementSibling.classList.contains(classes.CLS_IMG_INNER)) {

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) :
@@ -511,7 +511,7 @@ var Table = /** @class */ (function () {
             return;
         }
         var target = e.target || e.targetTouches[0].target;
-        var closestTable = closest(target, 'table');
+        var closestTable = closest(target, 'table.e-rte-table');
         if (!isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable) {
             this.removeResizeElement();
             this.removeHelper(e);
@@ -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;