@syncfusion/ej2-richtexteditor 24.1.41 → 24.1.43-569781

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

@@ -22,7 +22,7 @@ var Count = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Count.prototype.renderCount = function () {
         this.initializeInstance();
@@ -35,7 +35,7 @@ var Count = /** @class */ (function () {
     };
     Count.prototype.appendCount = function () {
         var htmlText = this.parent.editorMode === 'Markdown' ? this.editPanel.value :
-            this.editPanel.textContent;
+            (this.parent.getText().replace(/(\r\n|\n|\r|\t)/gm, ''));
         if (this.parent.editorMode !== 'Markdown' && htmlText.indexOf('\u200B') !== -1) {
             this.htmlLength = htmlText.replace(/\u200B/g, '').length;
         }
@@ -63,7 +63,7 @@ var Count = /** @class */ (function () {
     /**
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Count.prototype.refresh = function () {
         if (!isNullOrUndefined(this.editPanel)) {
@@ -79,7 +79,7 @@ var Count = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Count.prototype.destroy = function () {
         if (this.element && !isNullOrUndefined(this.parent.element.querySelector('.' + CLS_COUNT))) {

package/src/rich-text-editor/actions/dropdown-buttons.d.ts

@@ -36,7 +36,7 @@ export declare class DropDownButtons {
      * @param {IDropDownRenderArgs} args - specifies the arguments
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     renderDropDowns(args: IDropDownRenderArgs): void;
     private getUpdateItems;
@@ -55,7 +55,7 @@ export declare class DropDownButtons {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroyDropDowns(): void;
     private setRtl;

package/src/rich-text-editor/actions/dropdown-buttons.js

@@ -3,7 +3,8 @@ import { RenderType } from '../base/enum';
 import { getIndex } from '../base/util';
 import * as events from '../base/constant';
 import * as classes from '../base/classes';
-import { getDropDownValue, getFormattedFontSize, getTooltipText } from '../base/util';
+import { getDropDownValue, getFormattedFontSize, getTooltipText, getTooltipTextDropdownItems, getQuickToolbarTooltipText } from '../base/util';
+import { fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale } from '../models/default-locale';
 import * as model from '../models/items';
 import { dispatchEvent } from '../base/util';
 /**
@@ -24,10 +25,28 @@ var DropDownButtons = /** @class */ (function () {
         if (item.cssClass) {
             addClass([args.element], item.cssClass);
         }
+        if (item.command === 'Images' || item.command === 'Videos' || item.command === 'Audios' || item.command === 'Table') {
+            args.element.setAttribute('title', getQuickToolbarTooltipText(item.text) !== '' ? getQuickToolbarTooltipText(item.text) : item.text);
+        }
         if (item.command === 'Alignments' || item.subCommand === 'JustifyLeft'
             || item.subCommand === 'JustifyRight' || item.subCommand === 'JustifyCenter') {
             args.element.setAttribute('title', getTooltipText(item.subCommand.toLocaleLowerCase(), this.locator));
         }
+        if (item.command === 'Formats') {
+            args.element.setAttribute('title', getTooltipTextDropdownItems(item.subCommand.toLocaleLowerCase(), this.locator, formatsLocale));
+        }
+        if (item.command === 'Font') {
+            args.element.setAttribute('title', getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, fontNameLocale) !== '' ? getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, fontNameLocale) : item.text);
+        }
+        if (item.subCommand === 'BulletFormatList') {
+            args.element.setAttribute('title', getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, bulletFormatListLocale) !== '' ? getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, bulletFormatListLocale) : item.text);
+        }
+        if (item.subCommand === 'NumberFormatList') {
+            args.element.setAttribute('title', (getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, numberFormatListLocale)) !== '' ? getTooltipTextDropdownItems(item.text.toLocaleLowerCase(), this.locator, numberFormatListLocale) : item.text);
+        }
+        if (item.subCommand === 'FontSize') {
+            args.element.setAttribute('title', getTooltipTextDropdownItems(item.value.toLocaleLowerCase(), null, null, this.parent));
+        }
     };
     DropDownButtons.prototype.dropdownContent = function (width, type, content) {
         return ('<span style="display: inline-flex;' + 'width:' + ((type === 'quick') ? 'auto' : width) + '" >' +
@@ -39,7 +58,7 @@ var DropDownButtons = /** @class */ (function () {
      * @param {IDropDownRenderArgs} args - specifies the arguments
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DropDownButtons.prototype.renderDropDowns = function (args) {
         var _this = this;
@@ -134,7 +153,7 @@ var DropDownButtons = /** @class */ (function () {
                         if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
                             return;
                         }
-                        var fontsize = _this.parent.fontSize.items.slice();
+                        var fontsize = !isNullOrUndefined(_this.fontSizeDropDown) && !isNullOrUndefined(_this.fontSizeDropDown.items) && _this.fontSizeDropDown.items.length > 0 ? _this.fontSizeDropDown.items : JSON.parse(JSON.stringify(_this.parent.fontSize.items.slice()));
                         fontsize.forEach(function (item) {
                             Object.defineProperties(item, {
                                 command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontSize', enumerable: true }
@@ -406,7 +425,7 @@ var DropDownButtons = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DropDownButtons.prototype.destroyDropDowns = function () {
         if (this.formatDropDown) {

package/src/rich-text-editor/actions/emoji-picker.d.ts

@@ -21,7 +21,7 @@ export declare class EmojiPicker {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     protected addEventListener(): void;

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();
@@ -61,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);
@@ -643,7 +643,7 @@ var EmojiPicker = /** @class */ (function () {
                 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);

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

@@ -50,7 +50,8 @@ var EnterKeyAction = /** @class */ (function () {
             isTableEnter = 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 = {
@@ -485,10 +486,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/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;
@@ -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;
@@ -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

@@ -22,7 +22,6 @@ export declare class HtmlEditor {
     private saveSelection;
     xhtmlValidation: XhtmlValidation;
     private clickTimeout;
-    private tooltipTargetEle;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
     /**
      * Destroys the Markdown.
@@ -30,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;
@@ -45,6 +44,8 @@ export declare class HtmlEditor {
     private onSelectionSave;
     private onSelectionRestore;
     private isTableClassAdded;
+    private onHandleFontsizeChange;
+    private convertFontSize;
     private onKeyUp;
     private onKeyDown;
     private isOrderedList;
@@ -57,7 +58,6 @@ export declare class HtmlEditor {
     private getRangeLiNode;
     private onPaste;
     private spaceLink;
-    private mouseOutHandler;
     private onToolbarClick;
     private renderColorPicker;
     private instantiateRenderer;
@@ -69,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

@@ -1,5 +1,5 @@
 import * as events from '../base/constant';
-import { isNullOrUndefined, closest, attributes, removeClass, addClass, Browser, detach, EventHandler } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, closest, attributes, removeClass, addClass, Browser, detach } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { HTMLFormatter } from '../formatter/html-formatter';
 import { RenderType } from '../base/enum';
@@ -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,9 @@ var HtmlEditor = /** @class */ (function () {
     };
     HtmlEditor.prototype.onSelectionRestore = function (e) {
         this.parent.isBlur = false;
-        this.contentRenderer.getEditPanel().focus();
+        if (isNOU(this.saveSelection) || isNOU(closest(this.saveSelection.range.startContainer.parentElement, ".e-img-caption")) ? true : !(closest(this.saveSelection.range.startContainer.parentElement, ".e-img-caption").getAttribute("contenteditable") == "false")) {
+            this.contentRenderer.getEditPanel().focus();
+        }
         if (isNullOrUndefined(e.items) || e.items) {
             this.saveSelection.restore();
         }
@@ -96,11 +100,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 +192,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 +309,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().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').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) &&
@@ -233,8 +320,13 @@ var HtmlEditor = /** @class */ (function () {
                 else {
                     this.parent.notify(events.enterHandler, { args: e.args });
                     var newRange = this.parent.getRange();
-                    if (!isNOU(newRange.startContainer) && newRange.startContainer === this.parent.inputElement.lastChild && newRange.startContainer.nodeName !== '#text') {
-                        newRange.startContainer.scrollIntoView({ block: "end", inline: "nearest" });
+                    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' });
                     }
                 }
             }
@@ -316,11 +408,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')) {
@@ -331,8 +425,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;
                     }
@@ -342,13 +437,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 {
@@ -357,7 +452,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;
@@ -365,12 +460,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);
@@ -384,7 +484,7 @@ var HtmlEditor = /** @class */ (function () {
         var liElement;
         var rootElement;
         if (e.args.code === 'Delete' && e.args.keyCode === 46 &&
-            this.parent.contentModule.getText().trim().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').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') {
@@ -407,7 +507,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);
@@ -554,7 +658,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] + ' ';
@@ -599,19 +703,6 @@ var HtmlEditor = /** @class */ (function () {
             }, e, value);
         }
     };
-    HtmlEditor.prototype.mouseOutHandler = function () {
-        if (!isNOU(this.tooltipTargetEle)) {
-            this.tooltipTargetEle.setAttribute('title', this.tooltipTargetEle.getAttribute('data-title'));
-        }
-        else {
-            var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
-                this.parent.contentModule.getDocument();
-            this.tooltipTargetEle = currentDocument.querySelector('[data-title]');
-            this.tooltipTargetEle.setAttribute('title', this.tooltipTargetEle.getAttribute('data-title'));
-        }
-        this.tooltipTargetEle.removeAttribute('data-title');
-        EventHandler.remove(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler);
-    };
     HtmlEditor.prototype.onToolbarClick = function (args) {
         var _this = this;
         var save;
@@ -619,15 +710,8 @@ var HtmlEditor = /** @class */ (function () {
         var selectParentEle;
         var item = args.item;
         var closestElement = closest(args.originalEvent.target, '.e-rte-quick-popup');
-        var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
-            this.parent.contentModule.getDocument();
-        this.tooltipTargetEle = closest(args.originalEvent.target, '[data-tooltip-id]');
-        if (!isNOU(this.tooltipTargetEle) && this.parent.showTooltip && !isNOU(currentDocument.querySelector('.e-tooltip-wrap'))) {
-            this.parent.notify(events.destroyTooltip, { args: event });
-            this.tooltipTargetEle.setAttribute('data-title', this.tooltipTargetEle.getAttribute('title'));
-            this.tooltipTargetEle.removeAttribute('title');
-            EventHandler.add(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler, this);
-        }
+        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' ||
@@ -827,7 +911,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