@syncfusion/ej2-richtexteditor 20.2.38 → 20.2.43

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.38
+*  version : 20.2.43
 *  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@20.2.36",
+  "_id": "@syncfusion/ej2-richtexteditor@20.2.40",
   "_inBundle": false,
-  "_integrity": "sha512-C8xFE0QDv7mvp6MUMDvckFoZ9m7Sd0jr6HhC124W+91UuAiWCIQhyEEE32UHNP5cxCDoQ9nQU7xmzf9rKdt9PA==",
+  "_integrity": "sha512-UujypHiBETmZH0BRvYEQ3Ymz7fo37930L/lnqY5z4JGCRf1pcPGRfbNAVcY40vXJOkxbEnmH5nzge0JyMK3SfA==",
   "_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-20.2.36.tgz",
-  "_shasum": "71f185c480d459c1ab2e7d402d00a1faa27b6415",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-20.2.40.tgz",
+  "_shasum": "d1096ffac3f968b575499b3d57ac92d8d2f85558",
   "_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": "~20.2.38",
-    "@syncfusion/ej2-buttons": "~20.2.38",
-    "@syncfusion/ej2-filemanager": "~20.2.38",
-    "@syncfusion/ej2-inputs": "~20.2.38",
-    "@syncfusion/ej2-navigations": "~20.2.38",
-    "@syncfusion/ej2-popups": "~20.2.38",
-    "@syncfusion/ej2-splitbuttons": "~20.2.38"
+    "@syncfusion/ej2-base": "~20.2.43",
+    "@syncfusion/ej2-buttons": "~20.2.43",
+    "@syncfusion/ej2-filemanager": "~20.2.43",
+    "@syncfusion/ej2-inputs": "~20.2.43",
+    "@syncfusion/ej2-navigations": "~20.2.43",
+    "@syncfusion/ej2-popups": "~20.2.43",
+    "@syncfusion/ej2-splitbuttons": "~20.2.43"
   },
   "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": "20.2.38",
+  "version": "20.2.43",
   "sideEffects": false
 }

package/src/editor-manager/plugin/toolbar-status.js

@@ -233,7 +233,7 @@ var ToolbarStatus = /** @class */ (function () {
         if ((name !== null && name !== '' && name !== undefined)
             && (fontName === null || fontName === undefined || (fontName.filter(function (value, pos) {
                 var pattern = new RegExp(name, 'i');
-                if ((value.replace(/"/g, '').replace(/ /g, '') === name.replace(/"/g, '').replace(/ /g, '')) ||
+                if ((value.replace(/"/g, '').replace(/ /g, '').toLowerCase() === name.replace(/"/g, '').replace(/ /g, '').toLowerCase()) ||
                     (value.search(pattern) > -1)) {
                     index = pos;
                 }

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

@@ -650,4 +650,9 @@ export declare const bindCssClass: string;
  * @hidden
 
  */
-export declare const blockInlineEmptyNodes: string;
+export declare const blockEmptyNodes: string;
+/**
+ * @hidden
+
+ */
+export declare const inlineEmptyNodes: string;

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

@@ -650,4 +650,9 @@ export var bindCssClass = 'closeTableDialog';
  * @hidden
 
  */
-export var blockInlineEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, hr:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty,\n a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\n canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\n ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\n q:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,\n template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";
+export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
+/**
+ * @hidden
+
+ */
+export var inlineEmptyNodes = "a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\n canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\n ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\n q:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,\n template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";

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

@@ -509,10 +509,10 @@ var RichTextEditor = /** @class */ (function (_super) {
                 }
             }
             var currentLastElem = closestLI;
-            while (currentLastElem.nodeName !== '#text') {
+            while (currentLastElem.lastChild !== null && currentLastElem.nodeName !== '#text') {
                 currentLastElem = currentLastElem.lastChild;
             }
-            this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentLastElem : currentStartContainer, currentLastElem, currentStartOffset, currentLastElem.textContent.length);
+            this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? (currentLastElem.nodeName === 'BR' && !isNOU(currentLastElem.previousSibling) ? currentLastElem.previousSibling : currentLastElem) : currentStartContainer, currentLastElem, currentStartOffset, (currentLastElem.nodeName === 'BR' ? 0 : currentLastElem.textContent.length));
         }
     };
     /**
@@ -851,8 +851,19 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.isDestroyed || !this.isRendered) {
             return;
         }
-        if (this.element.offsetParent === null && !isNOU(this.toolbarModule)) {
-            this.toolbarModule.destroy();
+        if (this.element.offsetParent === null) {
+            if (!isNOU(this.toolbarModule)) {
+                this.toolbarModule.destroy();
+            }
+            if (!isNOU(this.imageModule)) {
+                this.imageModule.moduleDestroy();
+            }
+            if (!isNOU(this.linkModule)) {
+                this.linkModule.moduleDestroy();
+            }
+            if (!isNOU(this.renderModule)) {
+                this.renderModule.moduleDestroy();
+            }
             return;
         }
         this.notify(events.destroy, {});
@@ -2146,6 +2157,11 @@ var RichTextEditor = /** @class */ (function (_super) {
             case 'cut':
                 this.onCut();
                 break;
+            case 'tab':
+                if (this.iframeSettings.enable) {
+                    this.isBlur = true;
+                }
+                break;
         }
         if (e.callBack && (e.event.action === 'copy' || e.event.action === 'cut' || e.event.action === 'delete')) {
             e.callBack({

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

@@ -414,9 +414,13 @@ export function updateTextNode(value, rteObj) {
         var previousParent = void 0;
         var insertElem = void 0;
         while (tempNode.firstChild) {
-            var emptyElem = tempNode.querySelectorAll(CONSTANT.blockInlineEmptyNodes);
-            for (var i = 0; i < emptyElem.length; i++) {
-                emptyElem[i].innerHTML = '<br>';
+            var emptyBlockElem = tempNode.querySelectorAll(CONSTANT.blockEmptyNodes);
+            for (var i = 0; i < emptyBlockElem.length; i++) {
+                emptyBlockElem[i].innerHTML = '<br>';
+            }
+            var emptyInlineElem = tempNode.querySelectorAll(CONSTANT.inlineEmptyNodes);
+            for (var i = 0; i < emptyInlineElem.length; i++) {
+                emptyInlineElem[i].innerHTML = '&ZeroWidthSpace;';
             }
             if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&
                 (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||

package/src/rich-text-editor/renderer/image-module.d.ts

@@ -30,6 +30,7 @@ export declare class Image {
     private isAllowedTypes;
     private pageX;
     private pageY;
+    private mouseX;
     private dialogRenderObj;
     private deletedImg;
     private changedWidthValue;
@@ -164,6 +165,14 @@ export declare class Image {
 
      */
     destroy(): void;
+    /**
+     * Clears the ImageModule.
+     *
+     * @returns {void}
+     * @hidden
+
+     */
+    moduleDestroy(): void;
     /**
      * For internal use only - Get the module name.
      *

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

@@ -17,6 +17,7 @@ var Image = /** @class */ (function () {
         this.isAllowedTypes = true;
         this.pageX = null;
         this.pageY = null;
+        this.mouseX = null;
         this.deletedImg = [];
         this.parent = parent;
         this.rteID = parent.element.id;
@@ -353,8 +354,9 @@ var Image = /** @class */ (function () {
             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));
-                    img.style.width = Math.min(Math.round((percentageValue / img.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';
+                    var original = img.offsetWidth + this.mouseX;
+                    var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() == 'NaN' ? (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(img.style.width));
+                    img.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
                 }
                 else {
                     img.style.width = this.pixToPerc((width / height * expectedY), (img.previousElementSibling || img.parentElement)) + '%';
@@ -377,13 +379,20 @@ var Image = /** @class */ (function () {
                 img.style.height = expectedY + 'px';
             }
             else {
-                img.setAttribute('width', ((width / height * expectedY) + width / height).toString());
+                if (this.parent.iframeSettings.enable) {
+                    img.setAttribute('width', (img.width + this.mouseX).toString());
+                }
+                else {
+                    img.setAttribute('width', (img.offsetWidth + this.mouseX).toString());
+                }
             }
         }
         else if (height > width) {
             if (this.parent.insertImageSettings.resizeByPercent) {
                 if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    img.style.width = Math.min(Math.round((width / img.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';
+                    var original = img.offsetWidth + this.mouseX;
+                    var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() == 'NaN' ? (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(img.style.width));
+                    img.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
                 }
                 else {
                     img.style.width = this.pixToPerc((expectedX / height * expectedY), (img.previousElementSibling || img.parentElement)) + '%';
@@ -450,6 +459,7 @@ var Image = /** @class */ (function () {
         var mouseY = (this.resizeBtnStat.topLeft || this.resizeBtnStat.topRight) ? -(pageY - this.pageY) : (pageY - this.pageY);
         var width = parseInt(this.imgDupPos.width, 10) + mouseX;
         var height = parseInt(this.imgDupPos.height, 10) + mouseY;
+        this.mouseX = mouseX;
         this.pageX = pageX;
         this.pageY = pageY;
         if (this.resizeBtnStat.botRight) {
@@ -2285,6 +2295,18 @@ var Image = /** @class */ (function () {
         this.prevSelectedImgEle = undefined;
         this.removeEventListener();
     };
+    /* eslint-disable */
+    /**
+     * Clears the ImageModule.
+     *
+     * @returns {void}
+     * @hidden
+
+     */
+    /* eslint-enable */
+    Image.prototype.moduleDestroy = function () {
+        this.parent = null;
+    };
     /**
      * For internal use only - Get the module name.
      *

package/src/rich-text-editor/renderer/link-module.d.ts

@@ -48,6 +48,14 @@ export declare class Link {
 
      */
     destroy(): void;
+    /**
+     * Clears the Link Module.
+     *
+     * @returns {void}
+     * @hidden
+
+     */
+    moduleDestroy(): void;
     /**
      * For internal use only - Get the module name.
      *

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

@@ -520,6 +520,16 @@ var Link = /** @class */ (function () {
     Link.prototype.destroy = function () {
         this.removeEventListener();
     };
+    /**
+     * Clears the Link Module.
+     *
+     * @returns {void}
+     * @hidden
+
+     */
+    Link.prototype.moduleDestroy = function () {
+        this.parent = null;
+    };
     /**
      * For internal use only - Get the module name.
      *

package/src/rich-text-editor/renderer/render.d.ts

@@ -40,6 +40,12 @@ export declare class Render {
      * @returns {void}
      */
     destroy(): void;
+    /**
+     * Clears the Render Module.
+     *
+     * @returns {void}
+     */
+    moduleDestroy(): void;
     private addEventListener;
     private removeEventListener;
     private keyUp;

package/src/rich-text-editor/renderer/render.js

@@ -51,6 +51,14 @@ var Render = /** @class */ (function () {
     Render.prototype.destroy = function () {
         this.removeEventListener();
     };
+    /**
+     * Clears the Render Module.
+     *
+     * @returns {void}
+     */
+    Render.prototype.moduleDestroy = function () {
+        this.parent = null;
+    };
     Render.prototype.addEventListener = function () {
         if (this.parent.isDestroyed) {
             return;

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

@@ -547,7 +547,8 @@ var Table = /** @class */ (function () {
         }
         var target = e.target || e.targetTouches[0].target;
         var closestTable = closest(target, 'table.e-rte-table');
-        if (!isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable) {
+        if (!isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable &&
+            this.parent.contentModule.getEditPanel().contains(closestTable)) {
             this.removeResizeElement();
             this.removeHelper(e);
             this.cancelResizeAction();
@@ -824,7 +825,8 @@ var Table = /** @class */ (function () {
                 var rteWidth = _this.contentModule.getEditPanel().offsetWidth - (_this.contentModule.getEditPanel().offsetWidth -
                     _this.contentModule.getEditPanel().clientWidth) - paddingSize * 2;
                 var widthCompare = void 0;
-                if (!isNOU(_this.curTable.parentElement.closest('table'))) {
+                if (!isNOU(_this.curTable.parentElement.closest('table')) && !isNOU(_this.curTable.closest('td')) &&
+                    _this.contentModule.getEditPanel().contains(_this.curTable.closest('td'))) {
                     var currentTd = _this.curTable.closest('td');
                     var currentTDPad = +getComputedStyle(currentTd).paddingRight.match(/\d/g).join('');
                     // Padding of the current table with the parent element multiply with 2.

package/src/rich-text-editor/renderer/toolbar-renderer.js

@@ -324,10 +324,11 @@ var ToolbarRenderer = /** @class */ (function () {
                     proxy.parent.notify(events.selectionRestore, {});
                     range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
                     var parentNode = range.startContainer.parentNode;
+                    var closestElement = closest(range.startContainer.parentNode, 'table');
                     if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' ||
                         (closest(range.startContainer.parentNode, 'td,th')) ||
                         (proxy.parent.iframeSettings.enable && !hasClass(parentNode.ownerDocument.querySelector('body'), 'e-lib')))
-                        && range.collapsed && args.subCommand === 'BackgroundColor') {
+                        && range.collapsed && args.subCommand === 'BackgroundColor' && closest(closestElement, '.' + classes.CLS_RTE)) {
                         proxy.parent.notify(events.tableColorPickerChanged, {
                             item: { command: args.command, subCommand: args.subCommand,
                                 value: colorpickerValue }
@@ -507,8 +508,9 @@ var ToolbarRenderer = /** @class */ (function () {
                 proxy.parent.notify(events.selectionRestore, {});
                 proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
                 var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
+                var closestElement = closest(range.startContainer.parentNode, 'table');
                 if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' || range.startContainer.nodeName === 'BODY' ||
-                    closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor') {
+                    closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor' && closest(closestElement, '.' + classes.CLS_RTE)) {
                     proxy.parent.notify(events.tableColorPickerChanged, colorPickerArgs);
                 }
                 else {

package/styles/fluent-dark.css

@@ -2541,7 +2541,7 @@
 
 span.e-rte-imageboxmark {
   background: #0078d4;
-  border: 1px solid #fff;
+  border: 1px solid #1b1a19;
   display: block;
   height: 10px;
   position: absolute;
@@ -2550,7 +2550,7 @@ span.e-rte-imageboxmark {
 }
 
 .e-mob-rte span.e-rte-imageboxmark {
-  background: #fff;
+  background: #1b1a19;
   border: 1px solid #0078d4;
   border-radius: 15px;
   height: 20px;
@@ -2559,7 +2559,7 @@ span.e-rte-imageboxmark {
 
 .e-mob-rte.e-mob-span span.e-rte-imageboxmark {
   background: #0078d4;
-  border: 1px solid #fff;
+  border: 1px solid #1b1a19;
 }
 
 .e-rte-content .e-content img.e-resize {

package/styles/rich-text-editor/fluent-dark.css

@@ -2541,7 +2541,7 @@
 
 span.e-rte-imageboxmark {
   background: #0078d4;
-  border: 1px solid #fff;
+  border: 1px solid #1b1a19;
   display: block;
   height: 10px;
   position: absolute;
@@ -2550,7 +2550,7 @@ span.e-rte-imageboxmark {
 }
 
 .e-mob-rte span.e-rte-imageboxmark {
-  background: #fff;
+  background: #1b1a19;
   border: 1px solid #0078d4;
   border-radius: 15px;
   height: 20px;
@@ -2559,7 +2559,7 @@ span.e-rte-imageboxmark {
 
 .e-mob-rte.e-mob-span span.e-rte-imageboxmark {
   background: #0078d4;
-  border: 1px solid #fff;
+  border: 1px solid #1b1a19;
 }
 
 .e-rte-content .e-content img.e-resize {