@syncfusion/ej2-richtexteditor 23.2.6 → 23.2.7

package/dist/es6/ej2-richtexteditor.es5.js

@@ -3340,7 +3340,7 @@ var ToolbarRenderer = /** @__PURE__ @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);
         }
@@ -3501,17 +3501,86 @@ var ToolbarRenderer = /** @__PURE__ @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 (!isNullOrUndefined(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 (!isNullOrUndefined(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') && !isNullOrUndefined(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 (!isNullOrUndefined(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 (!isNullOrUndefined(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(beforeDropDownOpen, args);
@@ -13684,7 +13753,9 @@ var InsertHtml = /** @__PURE__ @class */ (function () {
     InsertHtml.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNullOrUndefined(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' &&
                 isNullOrUndefined(element.parentElement.querySelector('img'))) {
                 removableElement = this.findDetachEmptyElem(element.parentElement);
             }
@@ -17939,7 +18010,9 @@ var MsWordPaste = /** @__PURE__ @class */ (function () {
                     isNullOrUndefined(allElements[i].nextElementSibling)))) {
                 var detachableElement = this.findDetachElem(allElements[i]);
                 var brElement = createElement('br');
-                if (!isNullOrUndefined(detachableElement.parentElement)) {
+                var hasNbsp = detachableElement.textContent.length > 0 && detachableElement.textContent.match(/\u00a0/g)
+                    && detachableElement.textContent.match(/\u00a0/g).length > 0;
+                if (!hasNbsp && !isNullOrUndefined(detachableElement.parentElement)) {
                     detachableElement.parentElement.insertBefore(brElement, detachableElement);
                     detach(detachableElement);
                 }
@@ -17978,7 +18051,9 @@ var MsWordPaste = /** @__PURE__ @class */ (function () {
     MsWordPaste.prototype.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNullOrUndefined(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')) &&
                 isNullOrUndefined(element.parentElement.querySelector('img'))) {
@@ -21345,7 +21420,7 @@ var PasteCleanup = /** @__PURE__ @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, {
@@ -21973,7 +22048,9 @@ var PasteCleanup = /** @__PURE__ @class */ (function () {
     PasteCleanup.prototype.findDetachEmptyElem = function (element) {
         var removableElement;
         if (!isNullOrUndefined(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);
             }
@@ -25330,7 +25407,6 @@ var Image$1 = /** @__PURE__ @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) {
@@ -25380,7 +25456,7 @@ var Image$1 = /** @__PURE__ @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) {
@@ -25607,7 +25683,7 @@ var Image$1 = /** @__PURE__ @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) {
@@ -25673,7 +25749,6 @@ var Image$1 = /** @__PURE__ @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),
@@ -27167,7 +27242,6 @@ var Audio = /** @__PURE__ @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),
@@ -27600,7 +27674,7 @@ var Video = /** @__PURE__ @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) {
@@ -28505,7 +28579,6 @@ var Video = /** @__PURE__ @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),
@@ -28988,13 +29061,13 @@ var ViewSource = /** @__PURE__ @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);
@@ -29175,6 +29248,7 @@ var Table = /** @__PURE__ @class */ (function () {
         this.parent.on(tableToolbarAction, this.onToolbarAction, this);
         this.parent.on(dropDownSelect, this.dropdownSelect, this);
         this.parent.on(keyDown, this.keyDown, this);
+        this.parent.on(keyUp, this.keyUp, this);
         this.parent.on(mouseUp, this.selectionTable, this);
         this.parent.on(tableModulekeyUp, this.tableModulekeyUp, this);
         this.parent.on(bindCssClass, this.setCssClass, this);
@@ -29197,6 +29271,7 @@ var Table = /** @__PURE__ @class */ (function () {
         this.parent.off(dropDownSelect, this.dropdownSelect);
         this.parent.off(mouseDown, this.cellSelect);
         this.parent.off(tableColorPickerChanged, this.setBGColor);
+        this.parent.off(keyUp, this.keyUp);
         this.parent.off(keyDown, this.keyDown);
         this.parent.off(mouseUp, this.selectionTable);
         this.parent.off(tableModulekeyUp, this.tableModulekeyUp);
@@ -29301,6 +29376,12 @@ var Table = /** @__PURE__ @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
@@ -30708,6 +30789,7 @@ var DialogRenderer = /** @__PURE__ @class */ (function () {
         var dlgObj;
         e.beforeOpen = this.beforeOpen.bind(this);
         e.open = this.open.bind(this);
+        e.position = { X: 'center', Y: this.getDialogPosition() };
         if (isNullOrUndefined(e.close)) {
             e.close = this.close.bind(this);
         }
@@ -30752,6 +30834,16 @@ var DialogRenderer = /** @__PURE__ @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
      *
@@ -31945,7 +32037,7 @@ var EnterKeyAction = /** @__PURE__ @class */ (function () {
                                     var newElem = void 0;
                                     var outerBRElem = _this.parent.createElement('br');
                                     if (_this.range.startOffset === 0 && _this.range.endOffset === 0 &&
-                                        !isNullOrUndefined(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR') {
+                                        !isNullOrUndefined(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);