@syncfusion/ej2-richtexteditor 23.2.7-52849 → 24.1.41-569781

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

@@ -28,7 +28,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, EventHandler, Complex, Browser, addClass, select, detach } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Complex, Browser, addClass, detach } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, formatUnit, L10n, closest } from '@syncfusion/ej2-base';
 import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';
@@ -97,6 +97,14 @@ var RichTextEditor = /** @class */ (function (_super) {
                 member: 'image',
                 args: [this, this.serviceLocator]
             });
+            modules.push({
+                member: 'audio',
+                args: [this, this.serviceLocator]
+            });
+            modules.push({
+                member: 'video',
+                args: [this, this.serviceLocator]
+            });
             if (this.quickToolbarSettings.enable) {
                 modules.push({ member: 'quickToolbar', args: [this, this.serviceLocator] });
             }
@@ -110,14 +118,6 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.editorMode === 'HTML') {
             modules.push({ member: 'htmlEditor', args: [this, this.serviceLocator] });
             modules.push({ member: 'pasteCleanup', args: [this, this.serviceLocator] });
-            modules.push({
-                member: 'audio',
-                args: [this, this.serviceLocator]
-            });
-            modules.push({
-                member: 'video',
-                args: [this, this.serviceLocator]
-            });
             modules.push({
                 member: 'formatPainter',
                 args: [this]
@@ -149,7 +149,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         else {
             if (this.getToolbar()) {
                 removeClass(this.getToolbar().querySelectorAll('.' + classes.CLS_ACTIVE), classes.CLS_ACTIVE);
-                removeClass([this.getToolbar()], [classes.CLS_TB_FLOAT, classes.CLS_TB_ABS_FLOAT]);
+                removeClass([this.getToolbar().parentElement], [classes.CLS_TB_FLOAT]);
             }
             addClass([this.element], classes.CLS_DISABLED);
             this.element.tabIndex = -1;
@@ -390,7 +390,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             if (tool.command === 'InsertText') {
                 currentInsertContentLength = value.length;
             }
-            var currentLength = this.getText().trim().length;
+            var currentLength = this.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
             var selectionLength = this.getSelection().length;
             var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
             if (!(this.maxLength === -1 || totalLength <= this.maxLength)) {
@@ -551,6 +551,7 @@ var RichTextEditor = /** @class */ (function (_super) {
      * @deprecated
      */
     RichTextEditor.prototype.render = function () {
+        this.value = (!(this.editorMode === 'Markdown') && !isNOU(this.value)) ? this.addAnchorAriaLabel(this.value) : this.value;
         if (this.value && !this.valueTemplate) {
             this.setProperties({ value: this.serializeValue(this.value) }, true);
         }
@@ -565,17 +566,17 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.enableXhtml) {
             this.setProperties({ value: this.getXhtml() }, true);
         }
-        if (this.toolbarSettings.enable && this.toolbarSettings.type === 'Expand' && !isNOU(this.getToolbar()) &&
+        if (this.toolbarSettings.enable && (this.toolbarSettings.type === 'Expand' || this.toolbarSettings.type === 'MultiRow' || this.toolbarSettings.type === 'Scrollable') && !isNOU(this.getToolbar()) &&
             (this.toolbarSettings.items.indexOf('Undo') > -1 && this.toolbarSettings.items.indexOf('Redo') > -1)) {
             this.disableToolbarItem(['Undo', 'Redo']);
         }
-        this.setContentHeight();
+        this.setContentHeight('Init');
         if (this.value !== null) {
             this.valueContainer.defaultValue = this.value;
         }
         // eslint-disable-next-line
         (this.enabled && !this.readonly) ? this.eventInitializer() : this.unWireEvents();
-        this.notify(events.bindCssClass, { cssClass: this.cssClass });
+        this.notify(events.bindCssClass, { cssClass: this.getCssClass() });
         this.addAudioVideoWrapper();
         this.notify(events.tableclass, {});
         this.renderComplete();
@@ -666,7 +667,13 @@ var RichTextEditor = /** @class */ (function (_super) {
             range.endContainer;
         var closestLI = closest(endNode, 'LI');
         var isDetached = false;
-        if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&
+        var currentRangeEndOffset = range.endOffset;
+        if (currentEndContainer.nodeType === Node.TEXT_NODE) {
+            if (currentEndContainer.textContent.charAt(currentRangeEndOffset - 1) === '\uFEFF') {
+                currentRangeEndOffset--;
+            }
+        }
+        if (!isNOU(closestLI) && endNode.textContent.trim().length === currentRangeEndOffset &&
             !range.collapsed && isNOU(endNode.nextElementSibling)) {
             for (var i = 0; i < closestLI.childNodes.length; i++) {
                 if (closestLI.childNodes[i].nodeName === '#text' && closestLI.childNodes[i].textContent.trim().length === 0) {
@@ -745,12 +752,12 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         var notFormatPainterCopy = isNOU(e.action) ? true : (e.action !== 'format-copy' ? true : false);
         if (this.formatter.getUndoRedoStack().length === 0 && notFormatPainterCopy &&
-            !(e.altKey || e.shiftKey || (e.altKey && e.shiftKey && e.which === 67))) {
+            !(e.altKey || e.shiftKey || (e.altKey && e.shiftKey && e.which == 67))) {
             this.formatter.saveData();
         }
         if (e.action !== 'insert-link' &&
             e.action !== 'format-copy' && e.action !== 'format-paste' &&
-            (!e.target || !(e.target.classList.contains('e-mention') && e.code === 'Tab')) &&
+            (!e.target || !(e.target.classList.contains('e-mention') && !isNOU(document.querySelector('#' + e.target.id + '_popup.e-popup-open')) && e.code === 'Tab')) &&
             (e.action && e.action !== 'paste' && e.action !== 'space'
                 || e.which === 9 || (e.code === 'Backspace' && e.which === 8))) {
             var FormatPainterEscapeAction = false;
@@ -758,14 +765,26 @@ var RichTextEditor = /** @class */ (function (_super) {
                 FormatPainterEscapeAction = this.formatPainterModule.previousAction === 'escape';
             }
             if (!FormatPainterEscapeAction) {
-                this.formatter.process(this, null, e);
+                if (this.editorMode === 'HTML' && (e.action === 'increase-fontsize' || e.action === 'decrease-fontsize')) {
+                    this.notify(events.onHandleFontsizeChange, { member: 'onHandleFontsizeChange', args: e });
+                }
+                else {
+                    this.formatter.process(this, null, e);
+                }
             }
             switch (e.action) {
                 case 'toolbar-focus':
                     if (this.toolbarSettings.enable && this.getToolbarElement()) {
                         var firstActiveItem = this.getToolbarElement().querySelector('.e-toolbar-item:not(.e-overlay)[title]');
-                        firstActiveItem.firstElementChild.removeAttribute('tabindex');
-                        firstActiveItem.firstElementChild.focus();
+                        var quickToolbarElem = this.getRenderedQuickToolbarElem();
+                        if (quickToolbarElem) {
+                            firstActiveItem = quickToolbarElem.querySelector('.e-toolbar-item:not(.e-overlay)[title]');
+                        }
+                        if (firstActiveItem) {
+                            var firstChild = firstActiveItem.firstElementChild;
+                            firstChild.removeAttribute('tabindex');
+                            firstChild.focus();
+                        }
                     }
                     break;
                 case 'escape':
@@ -784,11 +803,22 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.setPlaceHolder();
             }
         }
+        this.notify(events.afterKeyDown, { member: 'afterKeyDown', args: e });
         this.autoResize();
     };
     RichTextEditor.prototype.keyUp = function (e) {
         if (this.editorMode === 'HTML') {
             var range = this.getRange();
+            if (!isNOU(e) && !isNOU(e.code) && (e.code === 'Backspace' || e.code === 'Delete')) {
+                // To prevent the reformatting the content removed browser behavior.
+                var currentRange = this.getRange();
+                var selection = this.iframeSettings.enable ? this.contentModule.getPanel().ownerDocument.getSelection() :
+                    this.contentModule.getDocument().getSelection();
+                if (selection.rangeCount > 0) {
+                    selection.removeAllRanges();
+                    selection.addRange(currentRange);
+                }
+            }
             if (Browser.userAgent.indexOf('Firefox') !== -1 && range.startContainer.nodeName === '#text' &&
                 range.startContainer.parentElement === this.inputElement && this.enterKey !== 'BR') {
                 var range_1 = this.getRange();
@@ -810,11 +840,11 @@ var RichTextEditor = /** @class */ (function (_super) {
         var formatPainterCopy = e.key === 'C' && e.altKey && e.shiftKey;
         var formatPainterPaste = e.key === 'V' && e.altKey && e.shiftKey;
         if ((!formatPainterCopy && !formatPainterPaste) && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys) || (this.editorMode === 'Markdown'
-            && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) && !this.inlineMode.enable) {
+            && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) || (this.autoSaveOnIdle && Browser.isDevice) && !this.inlineMode.enable) {
             this.formatter.onKeyHandler(this, e);
         }
         if (this.inputElement && this.inputElement.textContent.length !== 0
-            || this.element.querySelectorAll('.e-toolbar-item.e-active').length > 0) {
+            || this.element.querySelectorAll('.e-toolbar-item.e-active').length > 0 || this.formatter.getUndoRedoStack().length > 0) {
             this.notify(events.toolbarRefresh, { args: e });
         }
         if (!isNOU(this.placeholder)) {
@@ -888,11 +918,14 @@ var RichTextEditor = /** @class */ (function (_super) {
                 clientX: touch.clientX, clientY: touch.clientY }
         });
         if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
-            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0)) || (e.target && (e.target.nodeName === 'VIDEO'
-            || e.target.querySelectorAll('.' + classes.CLS_VIDEOWRAP).length > 0) || (e.target && e.target.nodeName !== 'BR' &&
-            (e.target.classList.contains(classes.CLS_AUDIOWRAP) ||
-                e.target.classList.contains(classes.CLS_CLICKELEM) ||
-                e.target.classList.contains(classes.CLS_VID_CLICK_ELEM))))) {
+            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0)) ||
+            (e.target && !isNOU(closest(e.target, 'table'))) ||
+            (e.target && (e.target.nodeName === 'VIDEO' ||
+                e.target.querySelectorAll('.' + classes.CLS_VIDEOWRAP).length > 0) ||
+                (e.target && e.target.nodeName !== 'BR' &&
+                    (e.target.classList.contains(classes.CLS_AUDIOWRAP) ||
+                        e.target.classList.contains(classes.CLS_CLICKELEM) ||
+                        e.target.classList.contains(classes.CLS_VID_CLICK_ELEM))))) {
             this.notify(events.toolbarRefresh, { args: e });
         }
         this.triggerEditArea(e);
@@ -907,19 +940,6 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
         this.notifyMouseUp(e);
-        if (e.detail === 3) {
-            var range = this.getRange();
-            var selection = this.formatter.editorManager.domNode.getSelection();
-            if (/\s+$/.test(selection.toString())) {
-                if (!isNOU(range.startContainer.parentElement) && (!isNOU(range.startContainer.parentElement.nextSibling) &&
-                    (range.startContainer.parentElement.nextSibling.nodeType !== 3 ||
-                        /\s+$/.test(range.startContainer.parentElement.nextSibling.textContent)) || range.startOffset === range.endOffset)
-                    || range.startContainer.parentElement.tagName.toLocaleLowerCase() === 'li') {
-                    range.setStart(range.startContainer, range.startOffset);
-                    range.setEnd(range.startContainer, range.startContainer.textContent.length);
-                }
-            }
-        }
     };
     /**
      * @param {Function} module - specifies the module function.
@@ -960,10 +980,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             requestType: 'Paste'
         };
         this.trigger(events.actionBegin, evenArgs, function (pasteArgs) {
-            var currentLength = _this.inputElement.textContent.length;
+            var currentLength = _this.getText().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
             var selectionLength = _this.getSelection().length;
             var pastedContentLength = (isNOU(e) || isNOU(e.clipboardData))
-                ? 0 : e.clipboardData.getData('text/plain').length;
+                ? 0 : e.clipboardData.getData('text/plain').replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
             var totalLength = (currentLength - selectionLength) + pastedContentLength;
             if (_this.editorMode === 'Markdown') {
                 var args_1 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };
@@ -981,6 +1001,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                     _this.notify(events.pasteClean, { args: e });
                 }
                 else {
+                    console.warn('[WARNING] :: Module "pasteCleanup" is not available in RichTextEditor component! You either misspelled the module name or forgot to load it.');
                     var args_2 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };
                     var value = null;
                     var htmlValue = false;
@@ -1275,7 +1296,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                     break;
                 case 'height':
                     this.setHeight(newProp[prop]);
-                    this.setContentHeight();
+                    this.setContentHeight('Init');
                     this.autoResize();
                     break;
                 case 'readonly':
@@ -1322,11 +1343,11 @@ var RichTextEditor = /** @class */ (function (_super) {
                     break;
                 case 'inlineMode':
                     this.notify(events.modelChanged, { module: 'quickToolbar', newProp: newProp, oldProp: oldProp });
-                    this.setContentHeight();
+                    this.setContentHeight('Init');
                     break;
                 case 'toolbarSettings':
                     this.notify(events.modelChanged, { module: 'toolbar', newProp: newProp, oldProp: oldProp });
-                    this.setContentHeight();
+                    this.setContentHeight('Init');
                     break;
                 case 'maxLength':
                     if (this.showCharCount) {
@@ -1395,7 +1416,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.updatePanelValue = function () {
         var value = this.value;
         value = (this.enableHtmlEncode && this.value) ? decode(value) : value;
-        var getTextArea = this.element.querySelector('.e-rte-srctextarea');
+        var getTextArea = this.element.querySelector('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA);
         if (value) {
             if (getTextArea && getTextArea.style.display === 'block') {
                 getTextArea.value = this.value;
@@ -1403,7 +1424,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             if (this.valueContainer) {
                 this.valueContainer.value = (this.enableHtmlEncode) ? this.value : value;
             }
-            if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.replace('&amp;', '&').trim() !== value.trim()) {
+            if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.trim() !== value.trim()) {
                 this.inputElement.innerHTML = value;
             }
             else if (this.editorMode === 'Markdown' && this.inputElement
@@ -1424,9 +1445,6 @@ var RichTextEditor = /** @class */ (function (_super) {
                 }
                 else {
                     this.inputElement.innerHTML = '<p><br/></p>';
-                    if (value === '' && this.formatter && this.inputElement) {
-                        this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), this.inputElement.firstElementChild, this.inputElement.firstElementChild.childElementCount);
-                    }
                 }
             }
             else {
@@ -1488,7 +1506,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.inputElement.setAttribute('placeholder', this.placeholder);
             }
         }
-        if (this.placeholder && this.iframeSettings.enable) {
+        if (this.placeholder && this.iframeSettings.enable && this.inputElement) {
             if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
                 ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&
                     this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
@@ -1675,10 +1693,10 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.iframeSettings.resources) {
             var styleSrc = this.iframeSettings.resources.styles;
             var scriptSrc = this.iframeSettings.resources.scripts;
-            if (this.iframeSettings.resources.scripts.length > 0) {
+            if (!isNOU(this.iframeSettings.resources.scripts) && this.iframeSettings.resources.scripts.length > 0) {
                 this.InjectSheet(true, scriptSrc);
             }
-            if (this.iframeSettings.resources.styles.length > 0) {
+            if (!isNOU(this.iframeSettings.resources.styles) && this.iframeSettings.resources.styles.length > 0) {
                 this.InjectSheet(false, styleSrc);
             }
         }
@@ -1792,6 +1810,13 @@ var RichTextEditor = /** @class */ (function (_super) {
         var imgPadding = 12;
         var imgResizeBorder = 2;
         var editEle = this.contentModule.getEditPanel();
+        if (this.editorMode === "HTML" && !isNOU(this.formatter.editorManager.nodeSelection) && !isNOU(this.formatter.editorManager.nodeSelection.range)) {
+            var currentRange = this.formatter.editorManager.nodeSelection.range;
+            if (currentRange.startContainer.nodeType !== 3 && currentRange.startContainer.closest &&
+                !isNOU(currentRange.startContainer.closest('TD'))) {
+                editEle = currentRange.startContainer;
+            }
+        }
         var eleStyle = window.getComputedStyle(editEle);
         var editEleMaxWidth = editEle.offsetWidth - (imgPadding + imgResizeBorder +
             parseFloat(eleStyle.paddingLeft.split('px')[0]) + parseFloat(eleStyle.paddingRight.split('px')[0]) +
@@ -1828,12 +1853,9 @@ var RichTextEditor = /** @class */ (function (_super) {
      */
     RichTextEditor.prototype.setContentHeight = function (target, isExpand) {
         var heightValue;
-        var topValue = 0;
         var rteHeightPercent;
         var heightPercent = typeof (this.height) === 'string' && this.height.indexOf('%') > -1;
-        var cntEle = (this.sourceCodeModule.getPanel() &&
-            this.sourceCodeModule.getPanel().parentElement.style.display === 'block') ? this.sourceCodeModule.getPanel().parentElement :
-            this.contentModule.getPanel();
+        var cntEle = this.contentModule.getPanel();
         var rteHeight = this.element.offsetHeight;
         if (rteHeight === 0 && this.height !== 'auto' && !this.getToolbar()) {
             rteHeight = parseInt(this.height, 10);
@@ -1845,39 +1867,36 @@ var RichTextEditor = /** @class */ (function (_super) {
         var rzHandle = this.element.querySelector('.' + classes.CLS_RTE_RES_HANDLE);
         var rzHeight = this.enableResize ? (!isNOU(rzHandle) ? (rzHandle.offsetHeight + 8) : 0) : 0;
         var expandPopHeight = this.getToolbar() ? this.toolbarModule.getExpandTBarPopHeight() : 0;
-        if (this.toolbarSettings.type === ToolbarType.Expand && isExpand) {
-            heightValue = (this.height === 'auto' && rzHeight === 0) ? 'auto' : rteHeight - (tbHeight + expandPopHeight + rzHeight) + 'px';
-            topValue = (!this.toolbarSettings.enableFloating) ? expandPopHeight : 0;
+        if (target && target !== 'Toolbar' && expandPopHeight && this.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0) {
+            tbHeight = tbHeight - expandPopHeight;
         }
-        else {
-            if (this.height === 'auto' && !(this.element.classList.contains('e-rte-full-screen')) && !this.isResizeInitialized) {
-                heightValue = 'auto';
+        if (this.toolbarSettings.type === ToolbarType.Expand) {
+            if (isExpand) {
+                heightValue = (this.height === 'auto' && this.element.style.height === 'auto') ? 'auto' : rteHeight - (tbHeight + expandPopHeight + rzHeight) + 'px';
             }
             else {
-                heightValue = heightPercent && rteHeightPercent ? rteHeightPercent : rteHeight - (tbHeight + rzHeight) + 'px';
+                heightValue = (this.height === 'auto' && this.element.style.height === 'auto') ? 'auto' : rteHeight - (tbHeight - expandPopHeight + rzHeight) + 'px';
             }
         }
-        if (target !== 'windowResize' || heightPercent) {
-            if (this.iframeSettings.enable) {
-                if (heightValue !== 'auto') {
-                    setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
+        else {
+            heightValue = (this.height === 'auto' && this.element.style.height === 'auto') ? 'auto' : rteHeight - tbHeight + 'px';
+        }
+        var finalHeight = heightPercent && rteHeightPercent ? rteHeightPercent : heightValue;
+        switch (target) {
+            case 'Init':
+            case 'Toolbar':
+            case 'WindowResize':
+            case 'Refresh':
+                if (this.element.querySelectorAll('.e-source-content').length > 0 && this.element.querySelector('.e-source-content').style.display === 'block') {
+                    setStyleAttribute(this.element.querySelector('.e-source-content'), { height: finalHeight });
                 }
-            }
-            else {
-                if (target === 'windowResize' && heightPercent) {
-                    //cntEle hide the borderBottom of RichTextEditor. so removed the 2px of cntEle height.
-                    heightValue = parseInt(heightValue, 10) - 2 + 'px';
+                else {
+                    setStyleAttribute(cntEle, { height: finalHeight });
                 }
-                setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
-            }
-        }
-        if (this.iframeSettings.enable && target === 'sourceCode') {
-            var codeElement = select('.' + classes.CLS_RTE_CONTENT, this.element);
-            setStyleAttribute(codeElement, { height: heightValue, marginTop: topValue + 'px' });
-        }
-        if (this.toolbarSettings.enableFloating && this.getToolbar() && !this.inlineMode.enable) {
-            var tbWrapHeight = (isExpand ? (tbHeight + expandPopHeight) : tbHeight) + 'px';
-            setStyleAttribute(this.getToolbar().parentElement, { height: tbWrapHeight });
+                break;
+            case 'Resize':
+                setStyleAttribute(cntEle, { height: finalHeight });
+                break;
         }
         if (rzHeight === 0) {
             this.autoResize();
@@ -2026,11 +2045,22 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.getID = function () {
         return (this.originalElement.tagName === 'TEXTAREA' ? this.valueContainer.id : this.element.id);
     };
+    /**
+   * @returns {void}
+   * getCssClass method
+   *
+   * @hidden
+   * @deprecated
+   */
+    RichTextEditor.prototype.getCssClass = function (isSpace) {
+        return (isNOU(this.cssClass) ? '' : isSpace ? ' ' + this.cssClass : this.cssClass);
+    };
     RichTextEditor.prototype.mouseDownHandler = function (e) {
         var touch = (e.touches ? e.changedTouches[0] : e);
         addClass([this.element], [classes.CLS_FOCUS]);
         this.preventDefaultResize(e);
         this.notify(events.mouseDown, { args: e });
+        this.formatter.editorManager.observer.notify(events.mouseDown, { args: e });
         this.clickPoints = { clientX: touch.clientX, clientY: touch.clientY };
     };
     RichTextEditor.prototype.preventImgResize = function (e) {
@@ -2069,18 +2099,14 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.resizeHandler = function () {
         var isExpand = false;
         if (!document.body.contains(this.element)) {
-            document.defaultView.removeEventListener('resize', this.onResizeHandler, true);
+            document.defaultView.removeEventListener('resize', debounce(this.onResizeHandler, 10), true);
             return;
         }
         if (this.toolbarSettings.enable && !this.inlineMode.enable) {
             this.toolbarModule.refreshToolbarOverflow();
             isExpand = this.toolbarModule.baseToolbar.toolbarObj.element.classList.contains(classes.CLS_EXPAND_OPEN);
         }
-        if (this.iframeSettings.enable !== true) {
-            // When resize the window,border bottom of cntEle and this.element border visible separatly.so none the cntEle borderBottom.
-            this.contentModule.getPanel().style.borderBottom = 'none';
-        }
-        this.setContentHeight('windowResize', isExpand);
+        this.setContentHeight('WindowResize', isExpand);
         this.notify(events.windowResize, null);
     };
     RichTextEditor.prototype.scrollHandler = function (e) {
@@ -2137,7 +2163,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     };
     RichTextEditor.prototype.getUpdatedValue = function () {
         var value;
-        var getTextArea = this.element.querySelector('.e-rte-srctextarea');
+        var getTextArea = this.element.querySelector('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA);
         if (this.editorMode === 'HTML') {
             value = (this.inputElement.innerHTML === '<p><br></p>' || this.inputElement.innerHTML === '<div><br></div>' ||
                 this.inputElement.innerHTML === '<br>') ? null : this.enableHtmlEncode ?
@@ -2168,6 +2194,21 @@ var RichTextEditor = /** @class */ (function (_super) {
         clearTimeout(this.idleInterval);
         this.idleInterval = setTimeout(this.updateValueOnIdle.bind(this), 0);
     };
+    RichTextEditor.prototype.cleanupResizeElements = function (args) {
+        var value = this.removeResizeElement(args.value);
+        args.callBack(value);
+    };
+    RichTextEditor.prototype.addAnchorAriaLabel = function (value) {
+        var valueElementWrapper = document.createElement("div");
+        valueElementWrapper.innerHTML = value;
+        var item = valueElementWrapper.querySelectorAll("a");
+        if (item.length > 0) {
+            for (var i = 0; i < item.length; i++) {
+                (item[i].hasAttribute("target") && item[i].getAttribute("target") === '_blank') ? item[i].setAttribute("aria-label", this.serviceLocator.getService('rteLocale').getConstant("linkAriaLabel")) : item[i];
+            }
+        }
+        return valueElementWrapper.innerHTML;
+    };
     RichTextEditor.prototype.removeResizeElement = function (value) {
         var valueElementWrapper = document.createElement("div");
         valueElementWrapper.innerHTML = value;
@@ -2177,6 +2218,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 detach(item[i]);
             }
         }
+        this.removeSelectionClassStates(valueElementWrapper);
         return valueElementWrapper.innerHTML;
     };
     RichTextEditor.prototype.updateStatus = function (e) {
@@ -2200,6 +2242,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.isRTE = false;
         }
         this.notify(events.docClick, { args: e });
+        var hideQuickToolbarChecker = this.quickToolbarModule && !this.inlineMode.enable && isNOU(this.quickToolbarModule.inlineQTBar);
+        if ((hideQuickToolbarChecker && !isNOU(closest(target, '.' + 'e-toolbar-wrapper'))) || (hideQuickToolbarChecker && (!isNOU(closest(target, '.e-rte-table-resize')) || !isNOU(closest(target, '.e-table-box'))))) {
+            this.quickToolbarModule.hideQuickToolbars();
+        }
         if (Browser.info.name !== 'msie' && e.detail > 3) {
             e.preventDefault();
         }
@@ -2208,6 +2254,12 @@ var RichTextEditor = /** @class */ (function (_super) {
         var trg = e.relatedTarget;
         if (trg) {
             var rteElement = closest(trg, '.' + classes.CLS_RTE);
+            if (!rteElement && this.iframeSettings.enable) {
+                var iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
+                if (iframeElement && iframeElement.contentWindow.document.body.contains(trg)) {
+                    rteElement = closest(iframeElement, '.' + classes.CLS_RTE);
+                }
+            }
             if (rteElement && rteElement === this.element) {
                 this.isBlur = false;
                 if (trg === this.getToolbarElement()) {
@@ -2224,6 +2276,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         if (this.isBlur && isNOU(trg)) {
             removeClass([this.element], [classes.CLS_FOCUS]);
+            this.removeSelectionClassStates(this.inputElement);
             this.notify(events.focusChange, {});
             var value = this.getUpdatedValue();
             this.setProperties({ value: value });
@@ -2342,9 +2395,10 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.triggerEditArea(e.originalEvent);
     };
     RichTextEditor.prototype.contextHandler = function (e) {
-        var closestElem = closest(e.target, 'a, table, img');
+        var closestElem = closest(e.target, 'a, table, img, video, audio');
         if (this.inlineMode.onSelection === false || (!isNOU(closestElem) && this.inputElement.contains(closestElem)
-            && (closestElem.tagName === 'IMG' || closestElem.tagName === 'TABLE' || closestElem.tagName === 'A'))) {
+            && (closestElem.tagName === 'IMG' || closestElem.tagName === 'TABLE' || closestElem.tagName === 'A' ||
+                closestElem.tagName.toLowerCase() === 'video' || closestElem.tagName.toLowerCase() === 'audio'))) {
             e.preventDefault();
         }
     };
@@ -2366,10 +2420,8 @@ var RichTextEditor = /** @class */ (function (_super) {
                 }, 0);
             }
             else if (this.iframeSettings.enable) {
-                var iframeElement_1 = this.element.querySelector('#' + this.getID() + '_rte-view');
-                setTimeout(function () {
-                    _this.setAutoHeight(iframeElement_1);
-                }, 100);
+                var iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
+                this.setAutoHeight(iframeElement);
                 this.inputElement.style.overflow = 'hidden';
             }
         }
@@ -2378,10 +2430,21 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
     };
     RichTextEditor.prototype.setAutoHeight = function (element) {
-        if (!isNOU(element)) {
+        if (!isNOU(element) && !this.iframeSettings.enable) {
             element.style.height = this.inputElement.scrollHeight + 'px';
             element.style.overflow = 'hidden';
         }
+        else if (!isNOU(element) && !isNOU(element.parentElement) && this.iframeSettings.enable) {
+            var newRange = this.getRange();
+            element.style.height = 'auto';
+            var newHeight = element.contentDocument.body.scrollHeight + 'px';
+            element.style.height = newHeight;
+            element.style.overflow = 'hidden';
+            // 16 px added for padding doesn't affect the editor height
+            if (newRange.startContainer.nodeName !== '#text' && newRange.startContainer.nodeName !== 'BODY' && window.innerHeight < newRange.startContainer.getBoundingClientRect().top + element.getBoundingClientRect().top + 16) {
+                newRange.startContainer.scrollIntoView(false);
+            }
+        }
     };
     RichTextEditor.prototype.wireEvents = function () {
         this.element.addEventListener('focusin', this.onFocusHandler, true);
@@ -2389,6 +2452,8 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.on(events.contentChanged, this.contentChanged, this);
         this.on(events.resizeInitialized, this.updateResizeFlag, this);
         this.on(events.updateTbItemsStatus, this.updateStatus, this);
+        this.on(events.cleanupResizeElements, this.cleanupResizeElements, this);
+        this.on(events.updateValueOnIdle, this.updateValueOnIdle, this);
         if (this.readonly && this.enabled) {
             return;
         }
@@ -2397,7 +2462,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.restrict = function (e) {
         if (this.maxLength >= 0) {
             var element = this.editorMode === 'Markdown' ? this.contentModule.getText() :
-                (e && e.currentTarget.textContent);
+                (this.getText().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, ''));
             if (!element) {
                 return;
             }
@@ -2429,11 +2494,12 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);
         EventHandler.add(this.inputElement, 'paste', this.onPaste, this);
+        EventHandler.add(this.inputElement, 'content-changed', this.contentChanged, this);
         EventHandler.add(this.inputElement, Browser.touchEndEvent, debounce(this.mouseUp, 30), this);
         EventHandler.add(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler, this);
         this.wireContextEvent();
         this.formatter.editorManager.observer.on(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown, this);
-        this.element.ownerDocument.defaultView.addEventListener('resize', this.onResizeHandler, true);
+        this.element.ownerDocument.defaultView.addEventListener('resize', debounce(this.onResizeHandler, 10), true);
         if (this.iframeSettings.enable) {
             EventHandler.add(this.inputElement, 'focusin', this.focusHandler, this);
             EventHandler.add(this.inputElement, 'focusout', this.blurHandler, this);
@@ -2475,6 +2541,8 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.off(events.contentChanged, this.contentChanged);
         this.off(events.resizeInitialized, this.updateResizeFlag);
         this.off(events.updateTbItemsStatus, this.updateStatus);
+        this.off(events.cleanupResizeElements, this.cleanupResizeElements);
+        this.off(events.updateValueOnIdle, this.updateValueOnIdle);
         if (this.readonly && this.enabled) {
             return;
         }
@@ -2490,13 +2558,14 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         EventHandler.remove(this.inputElement, 'keyup', this.keyUp);
         EventHandler.remove(this.inputElement, 'paste', this.onPaste);
+        EventHandler.remove(this.inputElement, 'content-changed', this.contentChanged);
         EventHandler.remove(this.inputElement, Browser.touchEndEvent, debounce(this.mouseUp, 30));
         EventHandler.remove(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler);
         this.unWireContextEvent();
         if (this.formatter) {
             this.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown);
         }
-        this.element.ownerDocument.defaultView.removeEventListener('resize', this.onResizeHandler, true);
+        this.element.ownerDocument.defaultView.removeEventListener('resize', debounce(this.onResizeHandler, 10), true);
         if (this.iframeSettings.enable) {
             EventHandler.remove(this.inputElement, 'focusin', this.focusHandler);
             EventHandler.remove(this.inputElement, 'focusout', this.blurHandler);
@@ -2543,6 +2612,33 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
     };
+    RichTextEditor.prototype.removeSelectionClassStates = function (element) {
+        var classNames = [classes.CLS_IMG_FOCUS, classes.CLS_TABLE_SEL, classes.CLS_VID_FOCUS, classes.CLS_AUD_FOCUS];
+        for (var i = 0; i < classNames.length; i++) {
+            var item = element.querySelectorAll('.' + classNames[i]);
+            removeClass(item, classNames[i]);
+            if (item.length === 0) {
+                continue;
+            }
+            for (var j = 0; j < item.length; j++) {
+                if (item[j].classList.length === 0) {
+                    item[j].removeAttribute('class');
+                }
+                if (item[j].nodeName === 'IMG' && item[j].style.outline !== '') {
+                    item[j].style.outline = '';
+                }
+            }
+        }
+    };
+    RichTextEditor.prototype.getRenderedQuickToolbarElem = function () {
+        var quickToolbars = this.quickToolbarModule.getQuickToolbarInstance();
+        for (var i = 0; i < quickToolbars.length; i++) {
+            if (quickToolbars[i] && quickToolbars[i].isRendered) {
+                return quickToolbars[i].element;
+            }
+        }
+        return null;
+    };
     __decorate([
         Complex({}, ToolbarSettings)
     ], RichTextEditor.prototype, "toolbarSettings", void 0);