@syncfusion/ej2-richtexteditor 25.1.42 → 25.2.4

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

@@ -4477,6 +4477,10 @@ function updateTextNode$1(value, enterAction) {
                     tableElm[i].classList.remove('e-rte-paste-onenote-table');
                     continue;
                 }
+                else if (tableElm[i].classList.contains('e-rte-paste-html-table')) {
+                    tableElm[i].classList.remove('e-rte-paste-html-table');
+                    continue;
+                }
             }
         }
         const imageElm = resultElm.querySelectorAll('img');
@@ -4581,6 +4585,54 @@ function nestedListCleanUp(range) {
         }
     }
 }
+/**
+ * Method to scroll the content to the cursor position
+ *
+ * @param {Document} document - specifies the document.
+ * @param {HTMLElement | HTMLBodyElement} inputElement - specifies the input element.
+ * @returns {void}
+ */
+function scrollToCursor(document, inputElement) {
+    const rootElement = inputElement.nodeName === 'BODY' ?
+        inputElement.ownerDocument.defaultView.frameElement.closest('.e-richtexteditor') :
+        inputElement.closest('.e-richtexteditor');
+    const height = rootElement.style.height;
+    if (document.getSelection().rangeCount === 0) {
+        return;
+    }
+    const range = document.getSelection().getRangeAt(0);
+    const finalFocusElement = range.startContainer.nodeName === '#text' ? range.startContainer.parentElement :
+        range.startContainer;
+    const rect = finalFocusElement.getBoundingClientRect();
+    const cursorTop = rect.top;
+    const cursorBottom = rect.bottom;
+    const rootRect = rootElement.getBoundingClientRect();
+    const hasMargin = rootElement.querySelectorAll('.e-count-enabled, .e-resize-enabled').length > 0;
+    if (inputElement.nodeName === 'BODY') {
+        if (height === 'auto') {
+            if (window.innerHeight < cursorTop) {
+                finalFocusElement.scrollIntoView(false);
+            }
+        }
+        else {
+            if (cursorTop > inputElement.getBoundingClientRect().height) {
+                finalFocusElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        }
+    }
+    else {
+        if (height === 'auto') {
+            if (window.innerHeight < cursorTop) {
+                finalFocusElement.scrollIntoView({ block: 'end', inline: 'nearest' });
+            }
+        }
+        else {
+            if (cursorBottom > rootRect.bottom) {
+                rootElement.querySelector('.e-rte-content').scrollTop += (cursorBottom - rootRect.bottom) + (hasMargin ? 20 : 0);
+            }
+        }
+    }
+}
 
 /**
  * Update Toolbar Status
@@ -12198,7 +12250,7 @@ class DOMNode {
     unWrap(element) {
         const parent = element.parentNode;
         let unWrapNode = [];
-        while (element.firstChild) {
+        while (element.firstChild && (element.previousSibling !== this.parent.querySelector('.e-mention-chip') || element.textContent !== ' ')) {
             unWrapNode.push(element.firstChild);
             parent.insertBefore(element.firstChild, element);
         }
@@ -18953,6 +19005,7 @@ class UndoRedoManager {
             this.parent.editableElement.innerHTML = '';
             this.parent.editableElement.appendChild(removedContent.cloneNode(true));
             this.parent.editableElement.focus();
+            scrollToCursor(this.parent.currentDocument, this.parent.editableElement);
             if (isIDevice$1()) {
                 setEditFrameFocus(this.parent.editableElement, e.selector);
             }
@@ -18985,6 +19038,7 @@ class UndoRedoManager {
             this.parent.editableElement.innerHTML = '';
             this.parent.editableElement.appendChild(addedContent.cloneNode(true));
             this.parent.editableElement.focus();
+            scrollToCursor(this.parent.currentDocument, this.parent.editableElement);
             if (isIDevice$1()) {
                 setEditFrameFocus(this.parent.editableElement, e.selector);
             }
@@ -19085,9 +19139,9 @@ class MsWordPaste {
         const patern2 = /class="?Mso|style="[^ ]*\bmso-/i;
         const patern3 = /(class="?Mso|class='?Mso|class="?Xl|class='?Xl|class=Xl|style="[^"]*\bmso-|style='[^']*\bmso-|w:WordDocument)/gi;
         const pattern4 = /style='mso-width-source:/i;
+        const source = this.findSource(elm);
         if (patern.test(tempHTMLContent) || patern2.test(tempHTMLContent) || patern3.test(tempHTMLContent) ||
             pattern4.test(tempHTMLContent)) {
-            const source = this.findSource(elm);
             tempHTMLContent = tempHTMLContent.replace(/<img[^>]+>/i, '');
             this.addListClass(elm);
             listNodes = this.cleanUp(elm, listNodes);
@@ -19112,7 +19166,7 @@ class MsWordPaste {
             e.callBack(elm.innerHTML, this.cropImageDimensions, source);
         }
         else {
-            e.callBack(elm.innerHTML);
+            e.callBack(elm.innerHTML, null, source);
         }
     }
     addDoubleBr(elm) {
@@ -21902,15 +21956,7 @@ class HtmlEditor {
                 }
                 else {
                     this.parent.notify(enterHandler, { args: e.args });
-                    const newRange = this.parent.getRange();
-                    if (!isNullOrUndefined(newRange.startContainer) && this.parent.height !== 'auto' && newRange.startContainer.nodeName !== '#text'
-                        && !this.parent.iframeSettings.enable && newRange.startContainer.getBoundingClientRect().bottom > this.parent.element.getBoundingClientRect().bottom) {
-                        this.parent.element.querySelector('.e-rte-content').scrollTop += newRange.startContainer.getBoundingClientRect().bottom - this.parent.element.getBoundingClientRect().bottom;
-                    }
-                    else if (!isNullOrUndefined(newRange.startContainer) && this.parent.height === 'auto' && newRange.startContainer.nodeName !== '#text'
-                        && !this.parent.iframeSettings.enable && window.innerHeight < newRange.startContainer.getBoundingClientRect().top) {
-                        newRange.startContainer.scrollIntoView({ block: 'end', inline: 'nearest' });
-                    }
+                    scrollToCursor(this.parent.contentModule.getDocument(), this.parent.inputElement);
                 }
             }
         }
@@ -22942,7 +22988,9 @@ class PasteCleanup {
             popupObj.close();
         }
         this.parent.trigger(imageUploadFailed, e);
-        uploadObj.destroy();
+        if (uploadObj && document.body.contains(uploadObj.element)) {
+            uploadObj.destroy();
+        }
     }
     popupClose(popupObj, uploadObj, imgElem, e) {
         this.parent.inputElement.contentEditable = 'true';
@@ -22957,7 +23005,7 @@ class PasteCleanup {
         });
         popupObj.close();
         imgElem.style.opacity = '1';
-        if (!uploadObj.isDestroyed) {
+        if (uploadObj && document.body.contains(uploadObj.element)) {
             uploadObj.destroy();
         }
         this.toolbarEnableDisable(false);
@@ -23255,11 +23303,34 @@ class PasteCleanup {
                 extend(args, { elements: returnArgs.elements, imageElements: returnArgs.imgElem }, true);
                 this.parent.formatter.onSuccess(this.parent, args);
             }, clipBoardElem, null, null, this.parent.enterKey);
+            scrollToCursor(this.parent.contentModule.getDocument(), this.parent.inputElement);
             this.removeTempClass();
             this.parent.notify(toolbarRefresh, {});
             this.cropImageHandler(this.parent.inputElement);
         }
     }
+    convertBlobToBase64(element) {
+        const imgElem = element.querySelectorAll('img');
+        for (let i = 0; i < imgElem.length; i++) {
+            if (imgElem[i].getAttribute('src') &&
+                imgElem[i].getAttribute('src').startsWith("blob")) {
+                let blobImageUrl = imgElem[i].getAttribute('src');
+                let img = new Image();
+                const onImageLoadEvent = () => {
+                    let canvas = document.createElement('canvas');
+                    let ctx = canvas.getContext('2d');
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    ctx.drawImage(img, 0, 0);
+                    let base64String = canvas.toDataURL('image/png');
+                    imgElem[i].src = base64String;
+                    img.removeEventListener('load', onImageLoadEvent);
+                };
+                img.src = blobImageUrl;
+                img.addEventListener('load', onImageLoadEvent);
+            }
+        }
+    }
     cropImageHandler(element) {
         const allImgElm = element.querySelectorAll('.e-img-cropped');
         if (allImgElm.length > 0) {
@@ -23298,22 +23369,33 @@ class PasteCleanup {
             }
         }
         else {
-            this.imgUploading(this.parent.inputElement);
-            if (this.parent.iframeSettings.enable) {
-                this.parent.updateValue();
+            if (!isNullOrUndefined(this.parent.insertImageSettings.saveUrl) && !isNullOrUndefined(this.parent.insertImageSettings.path) && !isNullOrUndefined(this.parent.inputElement.querySelectorAll("img")) && this.parent.inputElement.querySelectorAll("img")[0].src.startsWith("blob")) {
+                this.convertBlobToBase64(this.parent.inputElement);
+                setTimeout(() => {
+                    this.imgUploading(this.parent.inputElement);
+                    if (this.parent.iframeSettings.enable) {
+                        this.parent.updateValue();
+                    }
+                }, 20);
+            }
+            else {
+                this.imgUploading(this.parent.inputElement);
+                if (this.parent.iframeSettings.enable) {
+                    this.parent.updateValue();
+                }
             }
         }
     }
     addTableClass(element, source) {
-        source = isNullOrUndefined(source) ? '' : source;
         const tableElement = element.querySelectorAll('table');
         for (let i = 0; i < tableElement.length; i++) {
-            if (!tableElement[i].classList.contains('e-rte-table') && (source === 'html' || source === '')) {
-                tableElement[i].classList.add('e-rte-table');
-            }
-            else if (source && source !== 'html') {
+            const isMSTeamsTable = tableElement[i].parentElement.nodeName === 'FIGURE';
+            if (this.parent.pasteCleanupSettings.keepFormat && source && !isMSTeamsTable) {
                 tableElement[i].classList.add('e-rte-paste-' + source + '-table');
             }
+            else if (!tableElement[i].classList.contains('e-rte-table')) {
+                tableElement[i].classList.add('e-rte-table');
+            }
         }
         return element;
     }
@@ -33977,6 +34059,7 @@ let RichTextEditor = class RichTextEditor extends Component {
         this.persistData();
         setStyleAttribute(this.element, { 'width': formatUnit(this.width) });
         attributes(this.element, { role: 'application', 'aria-label': 'Rich Text Editor' });
+        this.beforeRenderClassValue = this.element.getAttribute('class');
     }
     persistData() {
         if (this.enablePersistence && this.originalElement.tagName === 'TEXTAREA') {
@@ -34847,6 +34930,10 @@ let RichTextEditor = class RichTextEditor extends Component {
         if (this.isDestroyed || !this.isRendered) {
             return;
         }
+        this.element.className = this.beforeRenderClassValue;
+        this.removeHtmlAttributes();
+        this.removeAttributes();
+        this.beforeRenderClassValue = null;
         if (!isNullOrUndefined(this.timeInterval)) {
             clearInterval(this.timeInterval);
             this.timeInterval = null;
@@ -34914,8 +35001,6 @@ let RichTextEditor = class RichTextEditor extends Component {
                 }
             }
         }
-        this.removeHtmlAttributes();
-        this.removeAttributes();
         super.destroy();
         this.isRendered = false;
     }
@@ -34946,6 +35031,7 @@ let RichTextEditor = class RichTextEditor extends Component {
         this.element.removeAttribute('aria-disabled');
         this.element.removeAttribute('role');
         this.element.removeAttribute('tabindex');
+        this.element.removeAttribute('aria-label');
     }
     destroyDependentModules() {
         /* destroy dependent modules */