@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.41-569421

package/src/rich-text-editor/actions/emoji-picker.js

@@ -19,7 +19,7 @@ var EmojiPicker = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     EmojiPicker.prototype.destroy = function () {
         this.removeEventListener();
@@ -44,6 +44,9 @@ var EmojiPicker = /** @class */ (function () {
             spanElement = this.parent.element.ownerDocument.querySelector('.e-emoji');
         }
         this.divElement = spanElement.closest('div');
+        if (!(this.parent.inputElement.contains(this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument()).startContainer))) {
+            this.parent.contentModule.getEditPanel().focus();
+        }
         var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
         this.save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
         this.clickEvent = args.args;
@@ -58,10 +61,10 @@ var EmojiPicker = /** @class */ (function () {
         }
         this.popDiv = this.parent.createElement('div', { className: 'e-rte-emojipicker-popup', id: this.parent.getID() + '_emojiPicker' });
         if (!isNOU(this.parent.getToolbar()) && !this.parent.inlineMode.enable) {
-            this.parent.getToolbar().appendChild(this.popDiv);
+            this.parent.getToolbar().parentElement.appendChild(this.popDiv);
         }
         else if (this.parent.inlineMode.enable) {
-            this.parent.inputElement.appendChild(this.popDiv);
+            this.parent.element.appendChild(this.popDiv);
         }
         EventHandler.add(this.popDiv, 'keydown', this.onKeyDown, this);
         EventHandler.add(this.popDiv, 'keyup', this.searchFilter, this);
@@ -635,12 +638,12 @@ var EmojiPicker = /** @class */ (function () {
                     }
                 }
             }
-            if (noEMoji && !this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji') && (inputValue !== '' && value !== ':')) {
+            if (noEMoji && !this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji') && (inputValue !== '' && value !== ':' && value !== ': :')) {
                 noEmojiObj.innerHTML = '<span style="color: rgba(0, 0, 0, 0.75); font-weight: 500; font-size: 16px;">' + this.i10n.getConstant('emojiPickerNoResultFound') + ' 😥 </span>' + '<br>' + '<span style="color: rgba(0, 0, 0, 0.75);"> ' + this.i10n.getConstant('emojiPickerTrySomethingElse') + ' ? </span>';
                 noEmojiObj.style.margin = '55px';
                 emojipickerAll.appendChild(noEmojiObj);
             }
-            else if (!noEMoji && this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji') || (inputValue === '' && value === ':')) {
+            else if (!noEMoji && this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji') || (inputValue === '' && value === ':') || (inputValue === '' && this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji'))) {
                 emojipickerAll.removeChild(this.parent.element.querySelector('.e-rte-emojiSearch-noEmoji'));
             }
             emojipickerAll.appendChild(emojiBtnDiv);
@@ -683,7 +686,8 @@ var EmojiPicker = /** @class */ (function () {
     };
     EmojiPicker.prototype.onkeyPress = function (e) {
         var originalEvent = e.args;
-        var selection = this.parent.contentModule.getDocument().getSelection();
+        var selection = (this.parent.iframeSettings.enable) ? this.parent.contentModule.getPanel().contentWindow.getSelection() :
+            this.parent.contentModule.getDocument().getSelection();
         if (selection.rangeCount <= 0) {
             return;
         }
@@ -703,6 +707,10 @@ var EmojiPicker = /** @class */ (function () {
         }
         if (originalEvent.keyCode === 32 && isPrevColon && this.popupObj) {
             removeClass([this.divElement], 'e-active');
+            var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument : this.parent.contentModule.getDocument();
+            if (this.parent.showTooltip && !isNOU(currentDocument.querySelector('.e-tooltip-wrap'))) {
+                this.parent.notify(events.destroyTooltip, { args: event });
+            }
             this.popupObj.hide();
         }
         if (this.popupObj && (originalEvent.keyCode === 37 || originalEvent.keyCode === 38 || originalEvent.keyCode === 39
@@ -713,7 +721,8 @@ var EmojiPicker = /** @class */ (function () {
     };
     EmojiPicker.prototype.onkeyUp = function (e) {
         var originalEvent = e.args;
-        var selection = this.parent.contentModule.getDocument().getSelection();
+        var selection = (this.parent.iframeSettings.enable) ? this.parent.contentModule.getPanel().contentWindow.getSelection() :
+            this.parent.contentModule.getDocument().getSelection();
         if (selection.rangeCount <= 0) {
             return;
         }
@@ -739,7 +748,7 @@ var EmojiPicker = /** @class */ (function () {
     };
     EmojiPicker.prototype.getCoordinates = function () {
         var coordinates;
-        var selection = this.parent.contentModule.getDocument().getSelection();
+        var selection = (this.parent.iframeSettings.enable) ? this.parent.contentModule.getPanel().contentWindow.getSelection() : window.getSelection();
         var range = selection.getRangeAt(0);
         var firstChild;
         if (range.startContainer.nodeName === 'P' || range.startContainer.nodeName === 'DIV') {

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

@@ -47,10 +47,11 @@ var EnterKeyAction = /** @class */ (function () {
                 curElement = curElement.parentElement;
                 blockElement = curElement;
             }
-            isTableEnter = blockElement.tagName === 'TD' || blockElement.tagName === 'TBODY' ? false : true;
+            isTableEnter = blockElement.tagName === 'TH' || blockElement.tagName === 'TD' || blockElement.tagName === 'TBODY' ? false : true;
         }
         if (e.args.which === 13 && !e.args.ctrlKey && (!Browser.isDevice ? e.args.code === 'Enter' : e.args.key === 'Enter')) {
-            if (isNOU(this.startNode.closest('LI, UL, OL')) && isNOU(this.endNode.closest('LI, UL, OL')) && isTableEnter &&
+            if (isNOU(this.startNode.closest('LI, UL, OL')) && isNOU(this.endNode.closest('LI, UL, OL')) &&
+                isNOU(this.startNode.closest('.e-img-inner')) && isTableEnter &&
                 isNOU(this.startNode.closest('PRE')) && isNOU(this.endNode.closest('PRE'))) {
                 var shiftKey_1 = e.args.shiftKey;
                 var actionBeginArgs = {
@@ -61,6 +62,9 @@ var EnterKeyAction = /** @class */ (function () {
                 };
                 this.parent.trigger(events.actionBegin, actionBeginArgs, function (actionBeginArgs) {
                     if (!actionBeginArgs.cancel) {
+                        if (_this.parent.formatter.getUndoRedoStack().length === 0) {
+                            _this.parent.formatter.saveData();
+                        }
                         if (!(_this.range.startOffset === _this.range.endOffset && _this.range.startContainer === _this.range.endContainer)) {
                             if (!(_this.range.startContainer.nodeName === 'SPAN' && (_this.range.startContainer.classList.contains('e-video-wrap') ||
                                 _this.range.startContainer.classList.contains('e-audio-wrap')))) {
@@ -236,7 +240,8 @@ var EnterKeyAction = /** @class */ (function () {
                                     }
                                     _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
                                 }
-                                else if (nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG') && !(nearBlockNode.querySelectorAll('img').length > 0)) {
+                                else if (nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG' ||
+                                    (nearBlockNode.querySelectorAll('video').length > 0) || (nearBlockNode.querySelectorAll('audio').length > 0) || (nearBlockNode.querySelectorAll('img').length > 0))) {
                                     if (!isNOU(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
                                         var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);
                                         _this.parent.formatter.editorManager.domNode.insertAfter(newElem, nearBlockNode);
@@ -484,10 +489,10 @@ var EnterKeyAction = /** @class */ (function () {
         }
         var previousBlockNode = this.parent.formatter.editorManager.domNode.blockNodes()[0].previousSibling;
         var nextBlockNode = this.parent.formatter.editorManager.domNode.blockNodes()[0].nextSibling;
-        if (!isNOU(previousBlockNode) && previousBlockNode.hasAttribute('style')) {
+        if (!isNOU(previousBlockNode) && previousBlockNode.nodeName !== '#text' && previousBlockNode.hasAttribute('style') && previousBlockNode.nodeName !== 'TABLE') {
             insertElem.setAttribute('style', previousBlockNode.getAttribute('style'));
         }
-        if (isNOU(previousBlockNode) && !isNOU(nextBlockNode) && nextBlockNode.hasAttribute('style')) {
+        if (isNOU(previousBlockNode) && !isNOU(nextBlockNode) && nextBlockNode.nodeName !== '#text' && nextBlockNode.hasAttribute('style') && nextBlockNode.nodeName !== 'TABLE') {
             insertElem.setAttribute('style', nextBlockNode.getAttribute('style'));
         }
         return insertElem;

package/src/rich-text-editor/actions/file-manager.js

@@ -78,7 +78,7 @@ var FileManager = /** @class */ (function () {
         this.dialogObj.createElement = this.parent.createElement;
         this.dialogObj.appendTo(dlgTarget);
         this.dialogObj.show(Browser.isDevice ? true : false);
-        this.setCssClass({ cssClass: this.parent.cssClass });
+        this.setCssClass({ cssClass: this.parent.getCssClass() });
     };
     // eslint-disable-next-line @typescript-eslint/tslint/config
     FileManager.prototype.setCssClass = function (e) {

package/src/rich-text-editor/actions/format-painter.js

@@ -1,4 +1,4 @@
-import { addClass, isNullOrUndefined as isNOU, removeClass } from '@syncfusion/ej2-base';
+import { addClass, Browser, isNullOrUndefined as isNOU, removeClass } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 var FormatPainter = /** @class */ (function () {
     function FormatPainter(parent) {
@@ -38,11 +38,14 @@ var FormatPainter = /** @class */ (function () {
     };
     FormatPainter.prototype.onKeyDown = function (event) {
         var originalEvent = event.args;
-        if ((originalEvent.altKey && originalEvent.shiftKey && (originalEvent.action === 'format-copy' || originalEvent.action === 'format-paste'))
+        if (!isNOU(originalEvent) && !isNOU(originalEvent.action) && (originalEvent.action === 'format-copy' || originalEvent.action === 'format-paste')
             || (originalEvent.action === 'escape' && (this.previousAction === 'format-copy' || this.previousAction === 'format-paste'))) {
             if ((originalEvent.action === 'format-copy' || originalEvent.action === 'format-paste')) {
                 originalEvent.stopPropagation();
             }
+            if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                originalEvent.preventDefault();
+            }
             this.actionHandler(event, 'keyBoard');
         }
     };

package/src/rich-text-editor/actions/full-screen.d.ts

@@ -13,7 +13,7 @@ export declare class FullScreen {
      * @param {MouseEvent} event - specifies the mouse event
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     showFullScreen(event?: MouseEvent | KeyboardEventArgs): void;
     /**
@@ -22,7 +22,7 @@ export declare class FullScreen {
      * @param {MouseEvent} event - specifies the mouse event
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     hideFullScreen(event?: MouseEvent | KeyboardEventArgs): void;
     private toggleParentOverflow;
@@ -34,7 +34,7 @@ export declare class FullScreen {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     private moduleDestroy;

package/src/rich-text-editor/actions/full-screen.js

@@ -17,7 +17,7 @@ var FullScreen = /** @class */ (function () {
      * @param {MouseEvent} event - specifies the mouse event
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     FullScreen.prototype.showFullScreen = function (event) {
         var _this = this;
@@ -26,7 +26,7 @@ var FullScreen = /** @class */ (function () {
             this.parent.quickToolbarModule.hideQuickToolbars();
         }
         if (this.parent.showTooltip && !isNOU(document.querySelector('.e-tooltip-wrap'))) {
-            this.parent.notify(events.maximizeMinimizeClick, { args: event });
+            this.parent.notify(events.destroyTooltip, { args: event });
         }
         this.scrollableParent = getScrollableParent(this.parent.element);
         if (!this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {
@@ -46,7 +46,7 @@ var FullScreen = /** @class */ (function () {
                     _this.parent.element.classList.add(classes.CLS_FULL_SCREEN);
                     _this.toggleParentOverflow(true);
                     var isExpand = _this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
-                    _this.parent.setContentHeight(null, isExpand);
+                    _this.parent.setContentHeight('Maximize', isExpand);
                     if (_this.parent.toolbarModule) {
                         if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {
                             _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);
@@ -72,7 +72,7 @@ var FullScreen = /** @class */ (function () {
      * @param {MouseEvent} event - specifies the mouse event
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     FullScreen.prototype.hideFullScreen = function (event) {
         var _this = this;
@@ -81,7 +81,7 @@ var FullScreen = /** @class */ (function () {
             this.parent.quickToolbarModule.hideQuickToolbars();
         }
         if (this.parent.showTooltip && !isNOU(document.querySelector('.e-tooltip-wrap'))) {
-            this.parent.notify(events.maximizeMinimizeClick, { args: event });
+            this.parent.notify(events.destroyTooltip, { args: event });
         }
         if (this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {
             var evenArgs = {
@@ -98,7 +98,7 @@ var FullScreen = /** @class */ (function () {
                         removeClass([elem[i]], ['e-rte-overflow']);
                     }
                     var isExpand = _this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
-                    _this.parent.setContentHeight(null, isExpand);
+                    _this.parent.setContentHeight('Minimize', isExpand);
                     if (_this.parent.toolbarModule) {
                         if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {
                             _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);
@@ -112,6 +112,7 @@ var FullScreen = /** @class */ (function () {
                             _this.parent.toolbarModule.addFixedTBarClass();
                         }
                     }
+                    _this.parent.refreshUI();
                     _this.parent.trigger(events.actionComplete, { requestType: 'Minimize', targetItem: 'Minimize', args: event });
                 }
             });
@@ -161,7 +162,7 @@ var FullScreen = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     FullScreen.prototype.destroy = function () {
         if (isNOU(this.parent)) {

package/src/rich-text-editor/actions/html-editor.d.ts

@@ -29,14 +29,14 @@ export declare class HtmlEditor {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     /**
      * @param {string} value - specifies the string value
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     sanitizeHelper(value: string): string;
     private addEventListener;
@@ -44,6 +44,8 @@ export declare class HtmlEditor {
     private onSelectionSave;
     private onSelectionRestore;
     private isTableClassAdded;
+    private onHandleFontsizeChange;
+    private convertFontSize;
     private onKeyUp;
     private onKeyDown;
     private isOrderedList;
@@ -67,7 +69,7 @@ export declare class HtmlEditor {
      * @param {RichTextEditorModel} e - specifies the editor model
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     protected onPropertyChanged(e: {
         [key: string]: RichTextEditorModel;

package/src/rich-text-editor/actions/html-editor.js

@@ -14,6 +14,7 @@ import { getTextNodesUnder, sanitizeHelper, getDefaultValue } from '../base/util
 import { isIDevice } from '../../common/util';
 import { XhtmlValidation } from './xhtml-validation';
 import { ON_BEGIN } from './../../common/constant';
+import * as CONSTANT from '../base/constant';
 /**
  * `HtmlEditor` module is used to HTML editor
  */
@@ -33,7 +34,7 @@ var HtmlEditor = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     HtmlEditor.prototype.destroy = function () {
         this.removeEventListener();
@@ -42,7 +43,7 @@ var HtmlEditor = /** @class */ (function () {
      * @param {string} value - specifies the string value
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     HtmlEditor.prototype.sanitizeHelper = function (value) {
         value = sanitizeHelper(value, this.parent);
@@ -70,6 +71,7 @@ var HtmlEditor = /** @class */ (function () {
         this.parent.on(events.readOnlyMode, this.updateReadOnly, this);
         this.parent.on(events.paste, this.onPaste, this);
         this.parent.on(events.tableclass, this.isTableClassAdded, this);
+        this.parent.on(events.onHandleFontsizeChange, this.onHandleFontsizeChange, this);
     };
     HtmlEditor.prototype.updateReadOnly = function () {
         if (this.parent.readonly) {
@@ -88,7 +90,6 @@ var HtmlEditor = /** @class */ (function () {
     };
     HtmlEditor.prototype.onSelectionRestore = function (e) {
         this.parent.isBlur = false;
-        this.contentRenderer.getEditPanel().focus();
         if (isNullOrUndefined(e.items) || e.items) {
             this.saveSelection.restore();
         }
@@ -96,11 +97,91 @@ var HtmlEditor = /** @class */ (function () {
     HtmlEditor.prototype.isTableClassAdded = function () {
         var tableElement = this.parent.inputElement.querySelectorAll('table');
         for (var i = 0; i < tableElement.length; i++) {
-            if (!tableElement[i].classList.contains('e-rte-table')) {
+            if (!tableElement[i].classList.contains('e-rte-table') && !tableElement[i].classList.contains('e-rte-paste-table')) {
                 tableElement[i].classList.add('e-rte-table');
             }
         }
     };
+    HtmlEditor.prototype.onHandleFontsizeChange = function (e) {
+        var keyboardArgs = e.args;
+        var args = { name: 'dropDownSelect' };
+        args.item = {
+            command: 'Font',
+            subCommand: 'FontSize'
+        };
+        var items = this.parent.fontSize.items;
+        var activeElem;
+        if (this.parent.toolbarModule && this.parent.toolbarModule.dropDownModule &&
+            this.parent.toolbarModule.dropDownModule.fontSizeDropDown && !isNOU(this.parent.toolbarModule.dropDownModule.fontSizeDropDown.activeElem[0].textContent) && this.parent.toolbarModule.dropDownModule.fontSizeDropDown.activeElem[0].textContent !== '') {
+            activeElem = this.parent.toolbarModule.dropDownModule.fontSizeDropDown.activeElem[0].textContent;
+        }
+        else {
+            var fontSizeValue = void 0;
+            var selection = this.parent.contentModule.getDocument().getSelection();
+            if (selection && selection.focusNode && selection.focusNode.parentElement) {
+                fontSizeValue = document.defaultView.getComputedStyle(selection.focusNode.parentElement, null).getPropertyValue('font-size');
+            }
+            else {
+                fontSizeValue = this.parent.fontSize.width;
+            }
+            fontSizeValue = isNOU(fontSizeValue) ? this.parent.fontSize.width : fontSizeValue;
+            var actualTxtFontValues = fontSizeValue.match(/^([\d.]+)(\D+)$/);
+            var size_1 = parseInt(actualTxtFontValues[1], 10);
+            var unit = actualTxtFontValues[2];
+            var defaultFontValues = items[0].value.match(/^([\d.]+)(\D+)$/);
+            if (defaultFontValues[2] === unit) {
+                var index = items.findIndex(function (_a) {
+                    var value = _a.value;
+                    return parseInt(value, 10) >= size_1;
+                });
+                activeElem = items[index].text;
+            }
+            else {
+                var convertedSize_1 = this.convertFontSize(size_1, unit, defaultFontValues[2]);
+                var index = items.findIndex(function (_a) {
+                    var value = _a.value;
+                    return parseInt(value, 10) >= convertedSize_1;
+                });
+                activeElem = items[index].text;
+            }
+        }
+        var fontIndex = items.findIndex(function (size) { return size.text === activeElem; });
+        if (keyboardArgs.action === 'increase-fontsize' && fontIndex !== -1) {
+            if (fontIndex >= items.length - 1) {
+                var fontValues = items[fontIndex].value.match(/^([\d.]+)(\D+)$/);
+                if (fontValues) {
+                    var size = parseInt(fontValues[1], 10);
+                    var unit = fontValues[2];
+                    var roundedSize = size % 10 === 0 ? Math.ceil((size + 1) / 10) * 10 : Math.ceil(size / 10) * 10;
+                    args.item.value = roundedSize.toLocaleString() + unit;
+                    args.item.text = roundedSize.toLocaleString() + ' ' + unit;
+                }
+                this.parent.fontSize.items.push(args.item);
+            }
+            else {
+                args.item.value = items[fontIndex + 1].value;
+                args.item.text = items[fontIndex + 1].text;
+            }
+        }
+        else if (keyboardArgs.action === 'decrease-fontsize' && fontIndex !== -1 && fontIndex > 0) {
+            args.item.value = items[fontIndex - 1].value;
+            args.item.text = items[fontIndex - 1].text;
+        }
+        else {
+            if (fontIndex >= 0 && fontIndex < items.length && items[fontIndex]) {
+                args.item.value = items[fontIndex].value;
+                args.item.text = items[fontIndex].text;
+            }
+        }
+        this.parent.formatter.process(this.parent, args, keyboardArgs);
+    };
+    HtmlEditor.prototype.convertFontSize = function (value, originalUnit, targetUnit) {
+        if (CONSTANT.supportedUnits.indexOf(originalUnit) !== -1 || CONSTANT.supportedUnits.indexOf(targetUnit) !== -1) {
+            originalUnit = 'px';
+        }
+        var convertedValue = value * CONSTANT.conversionFactors[originalUnit][targetUnit];
+        return convertedValue;
+    };
     HtmlEditor.prototype.onKeyUp = function (e) {
         var args = e.args;
         var restrictKeys = [8, 9, 13, 16, 17, 18, 20, 27, 37, 38, 39, 40, 44, 45, 46, 91,
@@ -108,9 +189,12 @@ var HtmlEditor = /** @class */ (function () {
         var range = this.parent.getRange();
         // eslint-disable-next-line
         var regEx = new RegExp(String.fromCharCode(8203), 'g');
+        var isEmptyNode = range.startContainer === range.endContainer && range.startOffset === range.endOffset &&
+            range.startOffset === 1 && range.startContainer.textContent.length === 1 && range.startContainer.textContent.charCodeAt(0) == 8203 &&
+            range.startContainer.textContent.replace(regEx, '').length === 0;
         var pointer;
         var isRootParent = false;
-        if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey) {
+        if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey && !isEmptyNode) {
             pointer = range.startOffset;
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             range.startContainer.nodeName === '#text' ? range.startContainer.parentElement !== this.parent.inputElement ? range.startContainer.parentElement.classList.add('currentStartMark')
@@ -222,7 +306,7 @@ var HtmlEditor = /** @class */ (function () {
             e.args.keyCode === 13) {
             this.spaceLink(e.args);
             if (this.parent.editorMode === 'HTML' && !this.parent.readonly) {
-                var currentLength = this.parent.getText().trim().length;
+                var currentLength = this.parent.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
                 var selectionLength = this.parent.getSelection().length;
                 var totalLength = (currentLength - selectionLength) + 1;
                 if (!(this.parent.maxLength === -1 || totalLength <= this.parent.maxLength) &&
@@ -232,6 +316,15 @@ var HtmlEditor = /** @class */ (function () {
                 }
                 else {
                     this.parent.notify(events.enterHandler, { args: e.args });
+                    var 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' });
+                    }
                 }
             }
         }
@@ -312,11 +405,13 @@ var HtmlEditor = /** @class */ (function () {
             currentRange.startContainer.previousSibling.nodeName === 'SPAN') {
             isPreviousNotContentEditable = currentRange.startContainer.previousSibling.contentEditable === 'false' ? false : true;
         }
+        var checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
+        var isSelectedPositionNotStart = closest(currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer, 'li') ?
+            checkNode.nodeName !== 'li' && isNOU(checkNode.previousSibling) : true;
         if (e.args.code === 'Backspace' && e.args.keyCode === 8 && currentRange.startOffset === 0 &&
             currentRange.endOffset === 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.textContent.length > 0 &&
             currentRange.startContainer.parentElement.tagName !== 'TD' && currentRange.startContainer.parentElement.tagName !== 'TH' &&
-            isPreviousNotContentEditable) {
-            var checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
+            isPreviousNotContentEditable && isSelectedPositionNotStart) {
             if ((!this.parent.formatter.editorManager.domNode.isBlockNode(checkNode) &&
                 !isNOU(checkNode.previousSibling) && checkNode.previousSibling.nodeName === 'BR') ||
                 (!isNOU(currentRange.startContainer.previousSibling) && currentRange.startContainer.previousSibling.nodeName === 'BR')) {
@@ -327,8 +422,9 @@ var HtmlEditor = /** @class */ (function () {
                 var liElement = this.getRangeLiNode(currentRange.startContainer);
                 if (liElement.previousElementSibling && liElement.previousElementSibling.childElementCount > 0) {
                     this.oldRangeElement = liElement.previousElementSibling.lastElementChild.nodeName === 'BR' ?
-                        liElement.previousElementSibling : liElement.previousElementSibling.lastElementChild;
-                    if (!isNullOrUndefined(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR') {
+                        liElement.previousElementSibling : liElement.previousElementSibling.lastChild;
+                    if (!isNOU(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR' &&
+                        isNOU(liElement.lastElementChild.previousSibling) && liElement.lastChild.nodeName !== "#text") {
                         this.rangeElement = liElement.lastElementChild;
                         isLiElement = true;
                     }
@@ -338,13 +434,13 @@ var HtmlEditor = /** @class */ (function () {
                 }
             }
             else if (this.rangeElement === this.parent.inputElement || this.rangeElement.tagName === 'TABLE' ||
-                (!isNullOrUndefined(this.rangeElement.previousElementSibling) && this.rangeElement.previousElementSibling.tagName === 'TABLE')) {
+                (!isNOU(this.rangeElement.previousElementSibling) && this.rangeElement.previousElementSibling.tagName === 'TABLE')) {
                 return;
             }
             else {
                 this.oldRangeElement = this.rangeElement.previousElementSibling;
             }
-            if (isNullOrUndefined(this.oldRangeElement)) {
+            if (isNOU(this.oldRangeElement)) {
                 return;
             }
             else {
@@ -353,7 +449,7 @@ var HtmlEditor = /** @class */ (function () {
                         ? this.oldRangeElement.lastElementChild.lastElementChild :
                         this.oldRangeElement.lastElementChild;
                 }
-                var lastNode = this.oldRangeElement.lastChild;
+                var lastNode = this.oldRangeElement.lastChild ? this.oldRangeElement.lastChild : this.oldRangeElement;
                 while (lastNode.nodeType !== 3 && lastNode.nodeName !== '#text' &&
                     lastNode.nodeName !== 'BR') {
                     lastNode = lastNode.lastChild;
@@ -361,12 +457,17 @@ var HtmlEditor = /** @class */ (function () {
                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), 
                 // eslint-disable-next-line
                 lastNode, lastNode.textContent.length);
-                if (this.oldRangeElement.querySelectorAll('BR').length === 1) {
+                if (this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
                     detach(this.oldRangeElement.querySelector('BR'));
                 }
-                if (!isNullOrUndefined(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
+                if (!isNOU(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
                     while (this.rangeElement.firstChild) {
-                        this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
+                        if (this.oldRangeElement.nodeName === '#text') {
+                            this.oldRangeElement.parentElement.appendChild(this.rangeElement.childNodes[0]);
+                        }
+                        else {
+                            this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
+                        }
                     }
                     // eslint-disable-next-line
                     !isLiElement ? detach(this.rangeElement) : detach(this.rangeElement.parentElement);
@@ -380,7 +481,7 @@ var HtmlEditor = /** @class */ (function () {
         var liElement;
         var rootElement;
         if (e.args.code === 'Delete' && e.args.keyCode === 46 &&
-            this.parent.contentModule.getText().trim().length !== 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.parentElement.tagName !== 'TD' &&
+            this.parent.contentModule.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length !== 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.parentElement.tagName !== 'TD' &&
             currentRange.startContainer.parentElement.tagName !== 'TH') {
             this.deleteRangeElement = rootElement = this.getRootBlockNode(currentRange.startContainer);
             if (this.deleteRangeElement.tagName === 'OL' || this.deleteRangeElement.tagName === 'UL') {
@@ -403,7 +504,11 @@ var HtmlEditor = /** @class */ (function () {
                 (!isNullOrUndefined(this.deleteRangeElement.nextElementSibling) && this.deleteRangeElement.nextElementSibling.tagName === 'TABLE'))) {
                 return;
             }
-            if (this.getCaretIndex(currentRange, this.deleteRangeElement) === this.deleteRangeElement.textContent.length) {
+            var isImgWithEmptyBlockNode = false;
+            if (this.deleteRangeElement.querySelectorAll('img').length > 0 && this.deleteRangeElement.textContent.trim() === '') {
+                isImgWithEmptyBlockNode = true;
+            }
+            if (this.getCaretIndex(currentRange, this.deleteRangeElement) === this.deleteRangeElement.textContent.length && !isImgWithEmptyBlockNode) {
                 if (!isNullOrUndefined(liElement)) {
                     if (isLiElement || !isNullOrUndefined(liElement.nextElementSibling)) {
                         this.deleteOldRangeElement = this.getRangeElement(liElement.nextElementSibling);
@@ -428,8 +533,13 @@ var HtmlEditor = /** @class */ (function () {
                         this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.deleteRangeElement, this.deleteRangeElement.childNodes.length);
                         this.isImageDelete = false;
                     }
-                    if (this.deleteRangeElement.querySelector('BR')) {
-                        detach(this.deleteRangeElement.querySelector('BR'));
+                    var brNode = this.deleteRangeElement.querySelector('BR');
+                    if (brNode && brNode.classList.contains('e-rte-image-remove-focus')) {
+                        removeClass([brNode], ['e-rte-image-focus']);
+                        return;
+                    }
+                    else if (brNode) {
+                        detach(brNode);
                     }
                     if (!isNullOrUndefined(this.deleteRangeElement) && (this.deleteOldRangeElement.tagName !== 'OL' && this.deleteOldRangeElement.tagName !== 'UL')
                         && this.deleteOldRangeElement !== this.deleteRangeElement) {
@@ -545,7 +655,7 @@ var HtmlEditor = /** @class */ (function () {
                 for (var j = 0; j < splitTextContent.length; j++) {
                     if (splitTextContent[j].match(httpRegex) || splitTextContent[j].match(wwwRegex)) {
                         resultSplitContent += '<a class="e-rte-anchor" href="' + splitTextContent[j] +
-                            '" title="' + splitTextContent[j] + '"target="_blank">' + splitTextContent[j] + ' </a>';
+                            '" title="' + splitTextContent[j] + '" target="_blank"' + ' aria-label="' + this.parent.serviceLocator.getService('rteLocale').getConstant("linkAriaLabel") + '">' + splitTextContent[j] + ' </a>';
                     }
                     else {
                         resultSplitContent += splitTextContent[j] + ' ';
@@ -597,6 +707,8 @@ var HtmlEditor = /** @class */ (function () {
         var selectParentEle;
         var item = args.item;
         var closestElement = closest(args.originalEvent.target, '.e-rte-quick-popup');
+        var target = args.originalEvent.target;
+        this.parent.notify(events.closeTooltip, { target: target });
         if (item.command !== 'FormatPainter') {
             if (closestElement && !closestElement.classList.contains('e-rte-inline-popup') && !closestElement.classList.contains('e-rte-text-popup')) {
                 if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||
@@ -796,7 +908,7 @@ var HtmlEditor = /** @class */ (function () {
      * @param {RichTextEditorModel} e - specifies the editor model
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     HtmlEditor.prototype.onPropertyChanged = function (e) {
         // On property code change here