@syncfusion/ej2-richtexteditor 23.2.6 → 23.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.6
+*  version : 23.2.7
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@23.2.5",
+  "_id": "@syncfusion/ej2-richtexteditor@23.2.6",
   "_inBundle": false,
-  "_integrity": "sha512-LDSabG1NiIxMf92vUcISlwF+vT/mAsvve1XDfHd1nOik3PCWxJk1nYnhkWYlDvBLE2nTJGLZ3yTU9cWvQXSgFw==",
+  "_integrity": "sha512-yiMdrOTe/kK+B6CGHKyKTYE+XvhMVnznfPPgziZDZgT11BPn/mdRhpMyCtfjlTybpQ5ohE9WGNqpeWndalRhZA==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-23.2.5.tgz",
-  "_shasum": "3197d4da512b1f6bebfda2e43c93a35204c6f6a5",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-23.2.6.tgz",
+  "_shasum": "b567bbae22fa4e6718a8f076b6c14c4a16e2977b",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -38,10 +38,10 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~23.2.6",
-    "@syncfusion/ej2-buttons": "~23.2.4",
+    "@syncfusion/ej2-buttons": "~23.2.7",
     "@syncfusion/ej2-filemanager": "~23.2.6",
     "@syncfusion/ej2-inputs": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.5",
+    "@syncfusion/ej2-navigations": "~23.2.7",
     "@syncfusion/ej2-popups": "~23.2.4",
     "@syncfusion/ej2-splitbuttons": "~23.2.4"
   },
@@ -69,6 +69,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.6",
+  "version": "23.2.7",
   "sideEffects": false
 }

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

@@ -488,7 +488,9 @@ var InsertHtml = /** @class */ (function () {
     InsertHtml.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNOU(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true' &&
+            var hasNbsp = element.parentElement.textContent.length > 0 && element.parentElement.textContent.match(/\u00a0/g)
+                && element.parentElement.textContent.match(/\u00a0/g).length > 0;
+            if (!hasNbsp && element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true' &&
                 isNOU(element.parentElement.querySelector('img'))) {
                 removableElement = this.findDetachEmptyElem(element.parentElement);
             }

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

@@ -356,7 +356,9 @@ var MsWordPaste = /** @class */ (function () {
                     isNOU(allElements[i].nextElementSibling)))) {
                 var detachableElement = this.findDetachElem(allElements[i]);
                 var brElement = createElement('br');
-                if (!isNOU(detachableElement.parentElement)) {
+                var hasNbsp = detachableElement.textContent.length > 0 && detachableElement.textContent.match(/\u00a0/g)
+                    && detachableElement.textContent.match(/\u00a0/g).length > 0;
+                if (!hasNbsp && !isNOU(detachableElement.parentElement)) {
                     detachableElement.parentElement.insertBefore(brElement, detachableElement);
                     detach(detachableElement);
                 }
@@ -395,7 +397,9 @@ var MsWordPaste = /** @class */ (function () {
     MsWordPaste.prototype.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNOU(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' &&
+            var hasNbsp = element.parentElement.textContent.length > 0 && element.parentElement.textContent.match(/\u00a0/g)
+                && element.parentElement.textContent.match(/\u00a0/g).length > 0;
+            if (!hasNbsp && element.parentElement.textContent.trim() === '' &&
                 element.parentElement.getAttribute('id') !== 'MSWord-Content' &&
                 !(this.hasParentWithClass(element, 'MsoListParagraph')) &&
                 isNOU(element.parentElement.querySelector('img'))) {

package/src/rich-text-editor/actions/enter-key.js

@@ -399,7 +399,7 @@ var EnterKeyAction = /** @class */ (function () {
                                     var newElem = void 0;
                                     var outerBRElem = _this.parent.createElement('br');
                                     if (_this.range.startOffset === 0 && _this.range.endOffset === 0 &&
-                                        !isNOU(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR') {
+                                        !isNOU(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR' && currentParent.nodeName !== 'P' && currentParent.nodeName !== 'DIV') {
                                         // eslint-disable-next-line @typescript-eslint/no-unused-vars
                                         newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, false).cloneNode(true);
                                         _this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);

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

@@ -269,7 +269,7 @@ var PasteCleanup = /** @class */ (function () {
         var popupEle = this.parent.createElement('div');
         this.parent.element.appendChild(popupEle);
         var contentEle = this.parent.createElement('input', {
-            id: this.parent.element.id + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
+            id: this.parent.getID() + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
         });
         var offsetY = this.parent.iframeSettings.enable ? -50 : -90;
         this.popupObj = new Popup(popupEle, {
@@ -900,7 +900,9 @@ var PasteCleanup = /** @class */ (function () {
     PasteCleanup.prototype.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNOU(element.parentElement)) {
-            if (element.parentElement.textContent.trim() === '' &&
+            var hasNbsp = element.parentElement.textContent.length > 0 && element.parentElement.textContent.match(/\u00a0/g)
+                && element.parentElement.textContent.match(/\u00a0/g).length > 0;
+            if (!hasNbsp && element.parentElement.textContent.trim() === '' &&
                 element.parentElement.getAttribute('class') !== 'pasteContent') {
                 removableElement = this.findDetachEmptyElem(element.parentElement);
             }

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

@@ -555,7 +555,6 @@ var Audio = /** @class */ (function () {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertAudioUrl.bind(selectObj),

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

@@ -24,6 +24,7 @@ export declare class DialogRenderer {
     private beforeOpenCallback;
     private open;
     private beforeClose;
+    private getDialogPosition;
     /**
      * dialog close method
      *

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

@@ -35,6 +35,7 @@ var DialogRenderer = /** @class */ (function () {
         var dlgObj;
         e.beforeOpen = this.beforeOpen.bind(this);
         e.open = this.open.bind(this);
+        e.position = { X: 'center', Y: this.getDialogPosition() };
         if (isNOU(e.close)) {
             e.close = this.close.bind(this);
         }
@@ -79,6 +80,16 @@ var DialogRenderer = /** @class */ (function () {
             }
         });
     };
+    DialogRenderer.prototype.getDialogPosition = function () {
+        var distanceFromVisibleTop = this.parent.element.getBoundingClientRect().top;
+        if (distanceFromVisibleTop < 0) {
+            distanceFromVisibleTop = Math.abs(distanceFromVisibleTop);
+            return distanceFromVisibleTop.toString();
+        }
+        else {
+            return 'top';
+        }
+    };
     /**
      * dialog close method
      *

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

@@ -1007,7 +1007,6 @@ var Image = /** @class */ (function () {
                 width: '290px',
                 header: this.parent.localeObj.getConstant('imageInsertLinkHeader'),
                 content: linkWrap,
-                position: { X: 'center', Y: 'center' },
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -1057,7 +1056,7 @@ var Image = /** @class */ (function () {
                 alt: inputAlt
             };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: altHeader, content: altWrap, position: { X: 'center', Y: 'center' },
+                height: 'inherit', width: '290px', header: altHeader, content: altWrap,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -1284,7 +1283,7 @@ var Image = /** @class */ (function () {
             var dialogContent = this.imgsizeInput(e);
             var selectObj_1 = { args: e.args, selfImage: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: (Browser.isDevice) ? '300px' : 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },
+                height: (Browser.isDevice) ? '300px' : 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -1350,7 +1349,6 @@ var Image = /** @class */ (function () {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertImageUrl.bind(selectObj),

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

@@ -44,6 +44,7 @@ export declare class Table {
     private afterRender;
     private dropdownSelect;
     private UpdateCells;
+    private keyUp;
     private keyDown;
     private tableModulekeyUp;
     private openDialog;

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

@@ -40,6 +40,7 @@ var Table = /** @class */ (function () {
         this.parent.on(events.tableToolbarAction, this.onToolbarAction, this);
         this.parent.on(events.dropDownSelect, this.dropdownSelect, this);
         this.parent.on(events.keyDown, this.keyDown, this);
+        this.parent.on(events.keyUp, this.keyUp, this);
         this.parent.on(events.mouseUp, this.selectionTable, this);
         this.parent.on(events.tableModulekeyUp, this.tableModulekeyUp, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
@@ -62,6 +63,7 @@ var Table = /** @class */ (function () {
         this.parent.off(events.dropDownSelect, this.dropdownSelect);
         this.parent.off(events.mouseDown, this.cellSelect);
         this.parent.off(events.tableColorPickerChanged, this.setBGColor);
+        this.parent.off(events.keyUp, this.keyUp);
         this.parent.off(events.keyDown, this.keyDown);
         this.parent.off(events.mouseUp, this.selectionTable);
         this.parent.off(events.tableModulekeyUp, this.tableModulekeyUp);
@@ -166,6 +168,12 @@ var Table = /** @class */ (function () {
         this.parent.formatter.process(this.parent, e, e, { selection: selectCell, subCommand: e.item.subCommand });
         this.hideTableQuickToolbar();
     };
+    Table.prototype.keyUp = function (e) {
+        var target = e.args.target;
+        if (e.args.key.toLocaleLowerCase() === 'escape' && target && target.classList && (this.popupObj && !closest(target, '[id=' + "'" + this.popupObj.element.id + "'" + ']')) && this.popupObj) {
+            this.popupObj.hide();
+        }
+    };
     Table.prototype.keyDown = function (e) {
         var event = e.args;
         // eslint-disable-next-line

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

@@ -34,7 +34,7 @@ var ToolbarRenderer = /** @class */ (function () {
     };
     ToolbarRenderer.prototype.destroyTooltip = function () {
         if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(document.querySelector(' [data-tooltip-id]'))) {
-            var tooltipTargetEle = document.querySelector('#' + (this.parent.element).id + ' [data-tooltip-id]');
+            var tooltipTargetEle = this.parent.element.querySelector('[data-tooltip-id]');
             var event_1 = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
             tooltipTargetEle.dispatchEvent(event_1);
         }
@@ -195,17 +195,86 @@ var ToolbarRenderer = /** @class */ (function () {
                     return;
                 }
                 // eslint-disable-next-line
-                for (var index = 0; index < args.element.childNodes.length; index++) {
-                    var divNode = _this.parent.createElement('div');
-                    divNode.innerHTML = dropDown.content.trim();
-                    if (divNode.textContent.trim() !== ''
-                        && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {
-                        if (!args.element.childNodes[index].classList.contains('e-active')) {
-                            addClass([args.element.childNodes[index]], 'e-active');
+                // Table styles dropdown preselect
+                if (proxy.parent.editorMode !== 'Markdown') {
+                    var startNode = proxy.parent.getRange().startContainer.parentElement;
+                    var tableEle = startNode.closest('table');
+                    var trow = startNode.closest('tr');
+                    if (!isNOU(tableEle) && tableEle.classList.contains('e-dashed-border')) {
+                        for (var index = 0; index < args.element.childNodes.length; index++) {
+                            if (args.element.childNodes[index].classList.contains('e-dashed-borders')) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
                         }
                     }
-                    else {
-                        removeClass([args.element.childNodes[index]], 'e-active');
+                    else if (!isNOU(tableEle) && !tableEle.classList.contains('e-dashed-border') && tableEle.classList.contains('e-alternate-rows') && window.getComputedStyle(trow).backgroundColor !== '') {
+                        for (var index = 0; index < args.element.childNodes.length; index++) {
+                            if (args.element.childNodes[index].classList.contains('e-alternate-rows')) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
+                    }
+                    //Alignments preselect
+                    var alignEle = proxy.parent.getRange().startContainer;
+                    while (alignEle !== proxy.parent.element.querySelector('.e-content') && !isNOU(alignEle.parentElement)) {
+                        if (alignEle.nodeName === '#text') {
+                            alignEle = alignEle.parentElement;
+                        }
+                        var alignStyle = window.getComputedStyle(alignEle).textAlign;
+                        if (args.items[0].command === 'Alignments') {
+                            if ((args.items[0].text === 'Align Left' && (alignStyle === 'left') || alignStyle === 'start')) {
+                                addClass([args.element.childNodes[0]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[1].text === 'Align Center' && alignStyle === 'center') {
+                                addClass([args.element.childNodes[1]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[2].text === 'Align Right' && alignStyle === 'right') {
+                                addClass([args.element.childNodes[2]], 'e-active');
+                                break;
+                            }
+                            else if (args.items[3].text === 'Align Justify' && alignStyle === 'justify') {
+                                addClass([args.element.childNodes[3]], 'e-active');
+                                break;
+                            }
+                        }
+                        alignEle = alignEle.parentElement;
+                    }
+                    //image preselect
+                    var imageEle = startNode.closest('img') ? startNode.closest('img') : startNode.querySelector('img');
+                    if (args.items[0].command === 'Images') {
+                        if (!isNOU(imageEle)) {
+                            var index = void 0;
+                            if (imageEle.classList.contains('e-imgleft') || imageEle.classList.contains('e-imginline')) {
+                                index = 0;
+                            }
+                            else if (imageEle.classList.contains('e-imgcenter') || imageEle.classList.contains('e-imgbreak')) {
+                                index = 1;
+                            }
+                            else if (imageEle.classList.contains('e-imgright')) {
+                                index = 2;
+                            }
+                            if (!isNOU(args.element.childNodes[index])) {
+                                addClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
+                    }
+                    //Formats preselect
+                    if (args.items[0].command === 'Formats') {
+                        for (var index = 0; index < args.element.childNodes.length; index++) {
+                            var divNode = _this.parent.createElement('div');
+                            divNode.innerHTML = dropDown.content.trim();
+                            if (divNode.textContent.trim() !== ''
+                                && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {
+                                if (!args.element.childNodes[index].classList.contains('e-active')) {
+                                    addClass([args.element.childNodes[index]], 'e-active');
+                                }
+                            }
+                            else {
+                                removeClass([args.element.childNodes[index]], 'e-active');
+                            }
+                        }
                     }
                 }
                 proxy.parent.notify(events.beforeDropDownOpen, args);

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

@@ -143,7 +143,7 @@ var Video = /** @class */ (function () {
             var dialogContent = this.vidsizeInput(e);
             var selectObj_1 = { args: e.args, selfVideo: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent, position: { X: 'center', Y: 'center' },
+                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -1048,7 +1048,6 @@ var Video = /** @class */ (function () {
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
-            position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertVideoUrl.bind(selectObj),

package/src/rich-text-editor/renderer/view-source.js

@@ -123,13 +123,13 @@ var ViewSource = /** @class */ (function () {
         this.parent.updateValueData();
         if (this.parent.iframeSettings.enable) {
             var rteContent = void 0;
-            if (isNullOrUndefined(this.parent.element.querySelector('#' + this.parent.element.id + '_source-view'))) {
+            if (isNullOrUndefined(this.parent.element.querySelector('#' + this.parent.getID() + '_source-view'))) {
                 rteContent = this.parent.createElement('div', {
-                    className: 'e-source-content', id: this.parent.element.id + '_source-view'
+                    className: 'e-source-content', id: this.parent.getID() + '_source-view'
                 });
             }
             else {
-                rteContent = this.parent.element.querySelector('#' + this.parent.element.id + '_source-view');
+                rteContent = this.parent.element.querySelector('#' + this.parent.getID() + '_source-view');
             }
             rteContent.appendChild(this.previewElement);
             this.parent.element.appendChild(rteContent);