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

package/src/rich-text-editor/actions/base-quick-toolbar.js

@@ -15,7 +15,7 @@ var BaseQuickToolbar = /** @class */ (function () {
     function BaseQuickToolbar(parent, locator) {
         this.parent = parent;
         this.locator = locator;
-        this.isDOMElement = false;
+        this.isRendered = false;
         this.renderFactory = this.locator.getService('rendererFactory');
         this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);
         this.popupRenderer = this.renderFactory.getRenderer(RenderType.Popup);
@@ -24,6 +24,9 @@ var BaseQuickToolbar = /** @class */ (function () {
     }
     BaseQuickToolbar.prototype.appendPopupContent = function () {
         this.toolbarElement = this.parent.createElement('div', { className: classes.CLS_QUICK_TB });
+        if (this.element.classList.contains(classes.CLS_TEXT_POP)) {
+            this.toolbarElement.classList.add(classes.CLS_TEXT_QUICK_TB);
+        }
         this.element.appendChild(this.toolbarElement);
     };
     /**
@@ -76,7 +79,18 @@ var BaseQuickToolbar = /** @class */ (function () {
             e.target.classList.contains('e-imgbreak')) ? false : true;
         var target = !isNOU(imgWrapper) ? imgWrapper : e.target;
         addClass([this.toolbarElement], [classes.CLS_RM_WHITE_SPACE]);
-        var targetOffsetTop = target.offsetTop;
+        var targetOffsetTop;
+        if (!isNOU(closest(target, 'table'))) {
+            targetOffsetTop = target.offsetTop;
+            var parentTable = closest(target, 'table');
+            while (!isNOU(parentTable)) {
+                targetOffsetTop += parentTable.offsetTop;
+                parentTable = closest(parentTable.parentElement, 'table');
+            }
+        }
+        else {
+            targetOffsetTop = (target.classList.contains("e-rte-audio")) ? target.parentElement.offsetTop : target.offsetTop;
+        }
         var parentOffsetTop = window.pageYOffset + e.parentData.top;
         if ((targetOffsetTop - e.editTop) > e.popHeight) {
             y = parentOffsetTop + e.tBarElementHeight + (targetOffsetTop - e.editTop) - e.popHeight - 5;
@@ -88,11 +102,30 @@ var BaseQuickToolbar = /** @class */ (function () {
             y = e.y;
         }
         target = isAligned ? e.target : target;
-        if (target.offsetWidth > e.popWidth) {
-            x = (target.offsetWidth / 2) - (e.popWidth / 2) + e.parentData.left + target.offsetLeft;
+        var targetOffsetLeft;
+        var currentOffsetWidth;
+        if (!isNOU(closest(target, 'table'))) {
+            targetOffsetLeft = target.offsetLeft;
+            var parentTable = closest(target, 'table');
+            var checkOffSetParentWidth = false;
+            if (!isNOU(closest(parentTable, 'TD'))) {
+                checkOffSetParentWidth = true;
+            }
+            while (!isNOU(parentTable)) {
+                targetOffsetLeft += parentTable.offsetLeft;
+                currentOffsetWidth = checkOffSetParentWidth ? parentTable.offsetWidth : target.offsetWidth;
+                parentTable = closest(parentTable.parentElement, 'table');
+            }
         }
         else {
-            x = e.parentData.left + target.offsetLeft;
+            currentOffsetWidth = target.offsetWidth;
+            targetOffsetLeft = (target.classList.contains("e-rte-audio")) ? target.parentElement.offsetLeft : target.offsetLeft;
+        }
+        if (currentOffsetWidth > e.popWidth) {
+            x = (currentOffsetWidth / 2) - (e.popWidth / 2) + e.parentData.left + targetOffsetLeft;
+        }
+        else {
+            x = e.parentData.left + targetOffsetLeft;
         }
         this.popupObj.position.X = ((x + e.popWidth) > e.parentData.right) ? e.parentData.right - e.popWidth : x;
         this.popupObj.position.Y = (y >= 0) ? y : e.y + 5;
@@ -216,10 +249,13 @@ var BaseQuickToolbar = /** @class */ (function () {
                     editPanelTop = (cntEle) ? cntEle.scrollTop : 0;
                     editPanelHeight = (cntEle) ? cntEle.offsetHeight : 0;
                 }
-                if (!_this.parent.inlineMode.enable && !closest(target, 'table') && type !== 'text') {
+                if ((!_this.parent.inlineMode.enable && !closest(target, 'table') && type !== 'text' && type !== 'link') || target.tagName === 'IMG') {
                     _this.parent.disableToolbarItem(_this.parent.toolbarSettings.items);
                     _this.parent.enableToolbarItem(['Undo', 'Redo']);
                 }
+                else {
+                    _this.parent.enableToolbarItem(_this.parent.toolbarSettings.items);
+                }
                 append([_this.element], document.body);
                 if (_this.parent.showTooltip) {
                     _this.tooltip = new Tooltip({
@@ -227,7 +263,8 @@ var BaseQuickToolbar = /** @class */ (function () {
                         openDelay: 400,
                         showTipPointer: true,
                         windowCollision: true,
-                        position: 'BottomCenter'
+                        position: 'BottomCenter',
+                        cssClass: _this.parent.getCssClass()
                     });
                     _this.tooltip.appendTo(_this.element);
                 }
@@ -261,9 +298,9 @@ var BaseQuickToolbar = /** @class */ (function () {
                     parentData: parent_1.getBoundingClientRect(),
                     tBarElementHeight: tBarHeight
                 };
-                if (target.tagName === 'IMG' || target.tagName === 'AUDIO' || target.tagName === 'VIDEO' || target.tagName === 'IFRAME' || (target.classList &&
+                if ((closest(target, 'TABLE') || target.tagName === 'IMG' || target.tagName === 'AUDIO' || target.tagName === 'VIDEO' || target.tagName === 'IFRAME' || (target.classList &&
                     (target.classList.contains(classes.CLS_AUDIOWRAP) || target.classList.contains(classes.CLS_CLICKELEM) ||
-                        target.classList.contains(classes.CLS_VID_CLICK_ELEM)))) {
+                        target.classList.contains(classes.CLS_VID_CLICK_ELEM)))) && (x == beforeQuickToolbarArgs.positionX || y == beforeQuickToolbarArgs.positionY)) {
                     _this.setPosition(showPopupData);
                 }
                 if (!_this.parent.inlineMode.enable) {
@@ -281,7 +318,7 @@ var BaseQuickToolbar = /** @class */ (function () {
                     maxWidth: window.outerWidth + 'px'
                 });
                 addClass([_this.element], [classes.CLS_POP]);
-                _this.isDOMElement = true;
+                _this.isRendered = true;
             }
         });
     };
@@ -317,8 +354,11 @@ var BaseQuickToolbar = /** @class */ (function () {
                 this.parent.enableToolbarItem(this.parent.toolbarSettings.items);
             }
         }
+        if (this.parent.showTooltip && !isNOU(document.querySelector('.e-tooltip-wrap'))) {
+            this.parent.notify(events.destroyTooltip, { args: event });
+        }
         this.removeEleFromDOM();
-        this.isDOMElement = false;
+        this.isRendered = false;
     };
     /**
      * @param {string} item - specifies the string value
@@ -341,7 +381,7 @@ var BaseQuickToolbar = /** @class */ (function () {
     };
     BaseQuickToolbar.prototype.removeEleFromDOM = function () {
         var element = this.popupObj.element;
-        if (this.isDOMElement) {
+        if (this.isRendered) {
             this.dropDownButtons.destroyDropDowns();
             this.colorPickerObj.destroyColorPicker();
             removeClass([this.element], [classes.CLS_POP]);
@@ -359,7 +399,18 @@ var BaseQuickToolbar = /** @class */ (function () {
             tbItems: this.quickTBarObj.toolbarObj.items
         };
         setToolbarStatus(options, true, this.parent);
-        if (!select('.e-rte-srctextarea', this.parent.element)) {
+        if (this.parent.quickToolbarSettings.text && this.parent.quickToolbarModule.textQTBar) {
+            var options_1 = {
+                args: args,
+                dropDownModule: this.parent.quickToolbarModule.textQTBar.dropDownButtons,
+                parent: this.parent,
+                tbElements: selectAll('.' + classes.CLS_TB_ITEM, this.parent.quickToolbarModule.textQTBar.element),
+                tbItems: this.parent.quickToolbarModule.textQTBar.quickTBarObj.toolbarObj.items
+            };
+            setToolbarStatus(options_1, true, this.parent);
+            updateUndoRedoStatus(this.parent.quickToolbarModule.textQTBar.quickTBarObj, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
+        }
+        if (!select('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA, this.parent.element)) {
             updateUndoRedoStatus(this.parent.getBaseToolbarObject(), this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
         }
     };
@@ -391,7 +442,7 @@ var BaseQuickToolbar = /** @class */ (function () {
         }
         this.parent.on(events.destroy, this.destroy, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
-        if (this.parent.inlineMode.enable) {
+        if (this.parent.inlineMode.enable || this.parent.quickToolbarSettings.text) {
             this.parent.on(events.toolbarUpdated, this.updateStatus, this);
         }
     };
@@ -433,7 +484,7 @@ var BaseQuickToolbar = /** @class */ (function () {
         }
         this.parent.off(events.destroy, this.destroy);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
-        if (this.parent.inlineMode.enable) {
+        if (this.parent.inlineMode.enable || this.parent.quickToolbarSettings.text) {
             this.parent.off(events.toolbarUpdated, this.updateStatus);
         }
     };

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

@@ -1,9 +1,9 @@
 import { RenderType } from '../base/enum';
 import { CLS_HR_SEPARATOR } from '../base/classes';
 import * as events from '../base/constant';
-import { getTooltipText, isIDevice, toObjectLowerCase } from '../base/util';
+import { getTooltipText, toObjectLowerCase } from '../base/util';
 import { tools, templateItems, windowKeys } from '../models/items';
-import { isNullOrUndefined, extend, Browser } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
 /**
  * `Toolbar` module is used to handle Toolbar actions.
  */
@@ -107,23 +107,13 @@ var BaseToolbar = /** @class */ (function () {
                 case '-':
                     return { type: 'Separator', cssClass: CLS_HR_SEPARATOR };
                 default:
-                    if (this.parent.showTooltip) {
-                        return {
-                            id: this.parent.getID() + '_' + container + '_' + this.tools[itemStr.toLocaleLowerCase()].id,
-                            prefixIcon: this.tools[itemStr.toLocaleLowerCase()].icon,
-                            tooltipText: getTooltipText(itemStr, this.locator),
-                            command: this.tools[itemStr.toLocaleLowerCase()].command,
-                            subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand
-                        };
-                    }
-                    else {
-                        return {
-                            id: this.parent.getID() + '_' + container + '_' + this.tools[itemStr.toLocaleLowerCase()].id,
-                            prefixIcon: this.tools[itemStr.toLocaleLowerCase()].icon,
-                            command: this.tools[itemStr.toLocaleLowerCase()].command,
-                            subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand
-                        };
-                    }
+                    return {
+                        id: this.parent.getID() + '_' + container + '_' + this.tools[itemStr.toLocaleLowerCase()].id,
+                        prefixIcon: this.tools[itemStr.toLocaleLowerCase()].icon,
+                        tooltipText: getTooltipText(itemStr, this.locator),
+                        command: this.tools[itemStr.toLocaleLowerCase()].command,
+                        subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand
+                    };
             }
         }
     };
@@ -154,10 +144,14 @@ var BaseToolbar = /** @class */ (function () {
                                 _this.parent.formatter.saveData();
                             }
                             callback_1.call(_this);
-                            var currentContentElem = _this.parent.createElement('div');
-                            currentContentElem.appendChild(_this.parent.formatter.getUndoRedoStack()[_this.parent.formatter.getUndoRedoStack().length - 1].text);
-                            if (currentContentElem.innerHTML.trim() === _this.parent.inputElement.innerHTML.trim()) {
-                                return;
+                            if (_this.parent.formatter.getUndoRedoStack().length > 0) {
+                                var currentContentElem = _this.parent.createElement('div');
+                                var stackItem = _this.parent.formatter.getUndoRedoStack()[_this.parent.formatter.getUndoRedoStack().length - 1];
+                                var clonedItem = (stackItem.text).cloneNode(true);
+                                currentContentElem.appendChild(clonedItem);
+                                if (currentContentElem.innerHTML.trim() === _this.parent.inputElement.innerHTML.trim()) {
+                                    return;
+                                }
                             }
                             if (proxy_1.undo) {
                                 _this.parent.formatter.saveData();
@@ -172,17 +166,21 @@ var BaseToolbar = /** @class */ (function () {
             var item = tbItems_1[_i];
             _loop_1(item);
         }
-        for (var num = 0; num < items.length; num++) {
-            var tooltipText = items[num].tooltipText;
-            var shortCutKey = void 0;
-            if (windowKeys["" + tooltipText]) {
-                shortCutKey = Browser.isDevice && isIDevice() ? windowKeys["" + tooltipText].replace('Ctrl', 'Cmd') : windowKeys["" + tooltipText];
-            }
-            else {
-                shortCutKey = tooltipText;
-            }
-            if (shortCutKey) {
-                items[num].tooltipText = (tooltipText !== shortCutKey) ? tooltipText + ' (' + shortCutKey + ')' : tooltipText;
+        if (this.parent.showTooltip) {
+            for (var num = 0; num < items.length; num++) {
+                var tooltipText = items[num].tooltipText;
+                var shortCutKey = void 0;
+                if (windowKeys["" + tooltipText]) {
+                    shortCutKey = window.navigator.platform.toLocaleLowerCase().includes('mac') ? windowKeys["" + tooltipText].replace('Ctrl', 'Cmd') : windowKeys["" + tooltipText];
+                }
+                else {
+                    shortCutKey = tooltipText;
+                }
+                if (shortCutKey) {
+                    if (!(items[num].command === "Images" && items[num].subCommand === "InsertLink")) {
+                        items[num].tooltipText = (tooltipText !== shortCutKey) ? tooltipText + ' (' + shortCutKey + ')' : tooltipText;
+                    }
+                }
             }
         }
         return items;

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

@@ -39,6 +39,7 @@ export declare class ColorPickerInput {
     private setCssClass;
     private updateCss;
     protected addEventListener(): void;
+    private showColorPicker;
     private onPropertyChanged;
     protected removeEventListener(): void;
 }

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

@@ -58,7 +58,7 @@ var ColorPickerInput = /** @class */ (function () {
                         document.body.appendChild(fontNode);
                         options = {
                             cssClass: _this.tools[item.toLocaleLowerCase()].icon
-                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + ' ' + _this.parent.cssClass,
+                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + _this.parent.getCssClass(true),
                             value: _this.tools[item.toLocaleLowerCase()].value,
                             command: _this.tools[item.toLocaleLowerCase()].command,
                             subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
@@ -85,7 +85,7 @@ var ColorPickerInput = /** @class */ (function () {
                         document.body.appendChild(backNode);
                         options = {
                             cssClass: _this.tools[item.toLocaleLowerCase()].icon
-                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + ' ' + _this.parent.cssClass,
+                                + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS + _this.parent.getCssClass(true),
                             value: _this.tools[item.toLocaleLowerCase()].value,
                             command: _this.tools[item.toLocaleLowerCase()].command,
                             subCommand: _this.tools[item.toLocaleLowerCase()].subCommand,
@@ -100,7 +100,7 @@ var ColorPickerInput = /** @class */ (function () {
             }
         });
         if (this.parent.inlineMode.enable) {
-            this.setCssClass({ cssClass: this.parent.cssClass });
+            this.setCssClass({ cssClass: this.parent.getCssClass() });
         }
     };
     ColorPickerInput.prototype.destroy = function () {
@@ -170,6 +170,15 @@ var ColorPickerInput = /** @class */ (function () {
         this.parent.on(events.destroyColorPicker, this.destroyColorPicker, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
+        this.parent.on(events.showColorPicker, this.showColorPicker, this);
+    };
+    ColorPickerInput.prototype.showColorPicker = function (e) {
+        if (!isNullOrUndefined(this.fontColorPicker) && (e.toolbarClick === "fontcolor")) {
+            this.fontColorDropDown.toggle();
+        }
+        else if (!isNullOrUndefined(this.backgroundColorPicker) && (e.toolbarClick === "backgroundcolor")) {
+            this.backgroundColorDropDown.toggle();
+        }
     };
     ColorPickerInput.prototype.onPropertyChanged = function (model) {
         var newProp = model.newProp;
@@ -243,6 +252,7 @@ var ColorPickerInput = /** @class */ (function () {
         this.parent.off(events.destroyColorPicker, this.destroyColorPicker);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
         this.parent.off(events.bindCssClass, this.setCssClass);
+        this.parent.off(events.showColorPicker, this.showColorPicker);
     };
     return ColorPickerInput;
 }());

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

@@ -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;
         }

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) + '" >' +
@@ -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 }
@@ -191,7 +210,7 @@ var DropDownButtons = /** @class */ (function () {
             }
         });
         if (this.parent.inlineMode.enable) {
-            this.setCssClass({ cssClass: this.parent.cssClass });
+            this.setCssClass({ cssClass: this.parent.getCssClass() });
         }
     };
     DropDownButtons.prototype.getUpdateItems = function (items, value) {
@@ -512,7 +531,9 @@ var DropDownButtons = /** @class */ (function () {
         this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     DropDownButtons.prototype.onIframeMouseDown = function () {
-        dispatchEvent(document, 'mousedown');
+        if (this.parent.getToolbarElement().querySelectorAll('.e-rte-dropdown-btn[aria-expanded="true"]').length > 0) {
+            dispatchEvent(document, 'mousedown');
+        }
     };
     DropDownButtons.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {

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

@@ -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);
@@ -640,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);
@@ -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

@@ -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 = {
@@ -236,7 +237,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 +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/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

@@ -38,7 +38,7 @@ 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();

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

@@ -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);
@@ -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 });
                 }
             });

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

@@ -44,6 +44,8 @@ export declare class HtmlEditor {
     private onSelectionSave;
     private onSelectionRestore;
     private isTableClassAdded;
+    private onHandleFontsizeChange;
+    private convertFontSize;
     private onKeyUp;
     private onKeyDown;
     private isOrderedList;