@syncfusion/ej2-richtexteditor 20.2.38 → 20.2.39

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.38
+*  version : 20.2.39
 *  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.38",
   "_inBundle": false,
-  "_integrity": "sha512-C8xFE0QDv7mvp6MUMDvckFoZ9m7Sd0jr6HhC124W+91UuAiWCIQhyEEE32UHNP5cxCDoQ9nQU7xmzf9rKdt9PA==",
+  "_integrity": "sha512-R8AtoHAIPqpoh/7JpkRUms9eRZPs7tWWTid2D9gZXd/JieNhPPEcoRKYjavpVRx/Cj4O7umyzzXHIekW+8h3Xw==",
   "_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.38.tgz",
+  "_shasum": "332d081f0e815d62053ba5a2d14d14f9a0813411",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -40,10 +40,10 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~20.2.38",
     "@syncfusion/ej2-buttons": "~20.2.38",
-    "@syncfusion/ej2-filemanager": "~20.2.38",
+    "@syncfusion/ej2-filemanager": "~20.2.39",
     "@syncfusion/ej2-inputs": "~20.2.38",
-    "@syncfusion/ej2-navigations": "~20.2.38",
-    "@syncfusion/ej2-popups": "~20.2.38",
+    "@syncfusion/ej2-navigations": "~20.2.39",
+    "@syncfusion/ej2-popups": "~20.2.39",
     "@syncfusion/ej2-splitbuttons": "~20.2.38"
   },
   "deprecated": false,
@@ -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.39",
   "sideEffects": false
 }

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));
         }
     };
     /**

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;

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) {

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

@@ -507,8 +507,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 {