@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.43

package/src/rich-text-editor/renderer/table-module.js

@@ -35,6 +35,7 @@ var Table = /** @class */ (function () {
         this.parent.on(events.showTableDialog, this.showDialog, this);
         this.parent.on(events.closeTableDialog, this.closeDialog, this);
         this.parent.on(events.docClick, this.docClick, this);
+        this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
         this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
         this.parent.on(events.clearDialogObj, this.clearDialogObj, this);
         this.parent.on(events.tableToolbarAction, this.onToolbarAction, this);
@@ -55,6 +56,7 @@ var Table = /** @class */ (function () {
         this.parent.off(events.initialEnd, this.afterRender);
         this.parent.off(events.dynamicModule, this.afterRender);
         this.parent.off(events.docClick, this.docClick);
+        this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
         this.parent.off(events.showTableDialog, this.showDialog);
         this.parent.off(events.closeTableDialog, this.closeDialog);
         this.parent.off(events.editAreaClick, this.editAreaClickHandler);
@@ -63,8 +65,8 @@ var Table = /** @class */ (function () {
         this.parent.off(events.dropDownSelect, this.dropdownSelect);
         this.parent.off(events.mouseDown, this.cellSelect);
         this.parent.off(events.tableColorPickerChanged, this.setBGColor);
-        this.parent.off(events.keyUp, this.keyUp);
         this.parent.off(events.keyDown, this.keyDown);
+        this.parent.off(events.keyUp, this.keyUp);
         this.parent.off(events.mouseUp, this.selectionTable);
         this.parent.off(events.tableModulekeyUp, this.tableModulekeyUp);
         this.parent.off(events.bindCssClass, this.setCssClass);
@@ -260,11 +262,12 @@ var Table = /** @class */ (function () {
                 name: !isInternal ? 'showDialog' : null
             };
             this.insertTableDialog({ self: this, args: args, selection: selection });
+            this.parent.formatter.editorManager.nodeSelection.restore();
         }
     };
     Table.prototype.showDialog = function () {
         this.openDialog(false);
-        this.setCssClass({ cssClass: this.parent.cssClass });
+        this.setCssClass({ cssClass: this.parent.getCssClass() });
     };
     Table.prototype.closeDialog = function () {
         if (this.editdlgObj) {
@@ -454,6 +457,10 @@ var Table = /** @class */ (function () {
     Table.prototype.tableHeader = function (selection, e) {
         this.parent.formatter.process(this.parent, e, e.originalEvent, { selection: selection, subCommand: e.item.subCommand });
     };
+    Table.prototype.getAnchorNode = function (element) {
+        var selectParent = closest(element, 'a');
+        return (selectParent ? selectParent : element);
+    };
     Table.prototype.editAreaClickHandler = function (e) {
         if (this.parent.readonly || !isNOU(closest(e.args.target, '.e-img-caption'))) {
             return;
@@ -475,7 +482,8 @@ var Table = /** @class */ (function () {
             var closestTable = closest(target, 'table');
             var startNode = this.parent.getRange().startContainer.parentElement;
             var endNode = this.parent.getRange().endContainer.parentElement;
-            if (target && target.nodeName !== 'A' && target.nodeName !== 'IMG' && target.nodeName !== 'VIDEO' && !target.classList.contains(classes.CLS_CLICKELEM) &&
+            var isAnchorEle = this.getAnchorNode(target);
+            if (target && target.nodeName !== 'A' && isAnchorEle.nodeName !== 'A' && target.nodeName !== 'IMG' && target.nodeName !== 'VIDEO' && !target.classList.contains(classes.CLS_CLICKELEM) &&
                 target.nodeName !== 'AUDIO' && startNode === endNode && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
                 target.nodeName === 'TABLE' || (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable)))
                 && !(range.startContainer.nodeType === 3 && !range.collapsed)) {
@@ -661,7 +669,7 @@ var Table = /** @class */ (function () {
             this.contentModule.getEditPanel().appendChild(rowReEle);
         }
         var tableReBox = this.parent.createElement('span', {
-            className: classes.CLS_TB_BOX_RES + ' ' + this.parent.cssClass, attrs: {
+            className: classes.CLS_TB_BOX_RES + this.parent.getCssClass(true), attrs: {
                 'data-col': columns.length.toString(), 'unselectable': 'on', 'contenteditable': 'false'
             }
         });
@@ -814,7 +822,7 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.appendHelper = function () {
         this.helper = this.parent.createElement('div', {
-            className: 'e-table-rhelper' + ' ' + this.parent.cssClass
+            className: 'e-table-rhelper' + this.parent.getCssClass(true)
         });
         if (Browser.isDevice) {
             this.helper.classList.add('e-reicon');
@@ -1175,16 +1183,16 @@ var Table = /** @class */ (function () {
         this.hideTableQuickToolbar();
         var header = '1X1';
         var insertbtn = this.l10n.getConstant('inserttablebtn');
-        this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + ' ' + this.parent.cssClass, id: this.rteID + '_table' });
-        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + ' ' + this.parent.cssClass });
+        this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + this.parent.getCssClass(true), id: this.rteID + '_table' });
+        this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + this.parent.getCssClass(true) });
         this.tblHeader.innerHTML = header;
         this.dlgDiv.appendChild(this.tblHeader);
-        var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' + ' ' + this.parent.cssClass });
+        var tableDiv = this.parent.createElement('div', { className: 'e-rte-table-span' + this.parent.getCssClass(true) });
         this.drawTable(tableDiv, args);
         this.dlgDiv.appendChild(tableDiv);
-        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' + ' ' + this.parent.cssClass }));
+        this.dlgDiv.appendChild(this.parent.createElement('span', { className: 'e-span-border' + this.parent.getCssClass(true) }));
         var btnEle = this.parent.createElement('button', {
-            className: 'e-insert-table-btn' + ' ' + this.parent.cssClass, id: this.rteID + '_insertTable',
+            className: 'e-insert-table-btn' + this.parent.getCssClass(true), id: this.rteID + '_insertTable',
             attrs: { type: 'button', tabindex: '0' }
         });
         if (!isNOU(this.parent.getToolbarElement().querySelector('.e-expended-nav'))) {
@@ -1192,7 +1200,7 @@ var Table = /** @class */ (function () {
         }
         this.dlgDiv.appendChild(btnEle);
         this.createTableButton = new Button({
-            iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat' + ' ' + this.parent.cssClass,
+            iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat' + this.parent.getCssClass(true),
             enableRtl: this.parent.enableRtl, locale: this.parent.locale
         });
         this.createTableButton.isStringTemplate = true;
@@ -1220,10 +1228,15 @@ var Table = /** @class */ (function () {
         });
         addClass([this.popupObj.element], 'e-popup-open');
         if (!isNOU(this.parent.cssClass)) {
-            addClass([this.popupObj.element], this.parent.cssClass);
+            addClass([this.popupObj.element], this.parent.getCssClass());
         }
         this.popupObj.refreshPosition(target);
     };
+    Table.prototype.onIframeMouseDown = function () {
+        if (this.popupObj) {
+            this.popupObj.hide();
+        }
+    };
     Table.prototype.docClick = function (e) {
         var target = e.args.target;
         // eslint-disable-next-line
@@ -1260,10 +1273,10 @@ var Table = /** @class */ (function () {
         var rowDiv;
         var tableCell;
         for (var row = 0; row < 3; row++) {
-            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row' + ' ' + this.parent.cssClass, attrs: { 'data-column': '' + row } });
+            rowDiv = this.parent.createElement('div', { className: 'e-rte-table-row' + this.parent.getCssClass(true), attrs: { 'data-column': '' + row } });
             for (var col = 0; col < 10; col++) {
                 var display = (row > 2) ? 'none' : 'inline-block';
-                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default' + ' ' + this.parent.cssClass, attrs: { 'data-cell': '' + col } });
+                tableCell = this.parent.createElement('div', { className: 'e-rte-tablecell e-default' + this.parent.getCssClass(true), attrs: { 'data-cell': '' + col } });
                 rowDiv.appendChild(tableCell);
                 tableCell.style.display = display;
                 if (col === 0 && row === 0) {
@@ -1287,13 +1300,13 @@ var Table = /** @class */ (function () {
             height: 'initial', width: '290px', content: editContent, header: editHeader,
             buttons: [{
                     click: this.applyProperties.bind(this, args),
-                    buttonModel: { content: update, cssClass: 'e-flat e-size-update' + ' ' + this.parent.cssClass, isPrimary: true }
+                    buttonModel: { content: update, cssClass: 'e-flat e-size-update' + this.parent.getCssClass(true), isPrimary: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + this.parent.getCssClass(true), content: cancel }
                 }],
             cssClass: this.editdlgObj.cssClass + ' e-rte-edit-table-prop-dialog'
         });
@@ -1335,10 +1348,10 @@ var Table = /** @class */ (function () {
     Table.prototype.tableCellDlgContent = function () {
         var tableColumn = this.l10n.getConstant('columns');
         var tableRow = this.l10n.getConstant('rows');
-        var tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' + ' ' + this.parent.cssClass });
-        var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" '
-            + ' data-role ="none" id="tableColumn" class="e-table-column' + ' ' + this.parent.cssClass + '"/></div>'
-            + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="tableRow" class="e-table-row' + ' ' + this.parent.cssClass + '" /></div>';
+        var tableWrap = this.parent.createElement('div', { className: 'e-cell-wrap' + this.parent.getCssClass(true) });
+        var content = '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" '
+            + ' data-role ="none" id="tableColumn" class="e-table-column' + this.parent.getCssClass(true) + '"/></div>'
+            + '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="tableRow" class="e-table-row' + this.parent.getCssClass(true) + '" /></div>';
         var contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.columnTextBox = new NumericTextBox({
@@ -1349,7 +1362,7 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             max: 50,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale,
-            cssClass: this.parent.cssClass
+            cssClass: this.parent.getCssClass()
         });
         this.columnTextBox.isStringTemplate = true;
         this.columnTextBox.appendTo(tableWrap.querySelector('#tableColumn'));
@@ -1361,7 +1374,7 @@ var Table = /** @class */ (function () {
             floatLabelType: 'Auto',
             max: 1000,
             enableRtl: this.parent.enableRtl, locale: this.parent.locale,
-            cssClass: this.parent.cssClass
+            cssClass: this.parent.getCssClass()
         });
         this.rowTextBox.isStringTemplate = true;
         this.rowTextBox.appendTo(tableWrap.querySelector('#tableRow'));
@@ -1382,7 +1395,7 @@ var Table = /** @class */ (function () {
             return;
         }
         var tableDialog = this.parent.createElement('div', {
-            className: 'e-rte-edit-table' + ' ' + this.parent.cssClass, id: this.rteID + '_tabledialog'
+            className: 'e-rte-edit-table' + this.parent.getCssClass(true), id: this.rteID + '_tabledialog'
         });
         this.parent.element.appendChild(tableDialog);
         var insert = this.l10n.getConstant('dialogInsert');
@@ -1390,20 +1403,20 @@ var Table = /** @class */ (function () {
         var header = this.l10n.getConstant('tabledialogHeader');
         var dialogModel = {
             header: header,
-            cssClass: classes.CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
+            cssClass: classes.CLS_RTE_ELEMENTS + this.parent.getCssClass(true),
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'initial',
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
-                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + ' ' + this.parent.cssClass, isPrimary: true }
+                    buttonModel: { content: insert, cssClass: 'e-flat e-insert-table' + this.parent.getCssClass(true), isPrimary: true }
                 },
                 {
                     click: function (e) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: cancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + this.parent.getCssClass(true), content: cancel }
                 }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
@@ -1476,13 +1489,13 @@ var Table = /** @class */ (function () {
         var tableWidth = this.l10n.getConstant('tableWidth');
         var cellPadding = this.l10n.getConstant('cellpadding');
         var cellSpacing = this.l10n.getConstant('cellspacing');
-        var tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' + ' ' + this.parent.cssClass });
+        var tableWrap = this.parent.createElement('div', { className: 'e-table-sizewrap' + this.parent.getCssClass(true) });
         var widthVal = closest(selectNode, 'table').getClientRects()[0].width;
         var padVal = closest(selectNode, 'td').style.padding;
         var brdSpcVal = closest(selectNode, 'table').getAttribute('cellspacing');
-        var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="tableWidth" class="e-table-width' + ' ' + this.parent.cssClass + '" '
-            + ' /></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding' + ' ' + this.parent.cssClass + '" />'
-            + ' </div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing' + ' ' + this.parent.cssClass + '" /></div>';
+        var content = '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="tableWidth" class="e-table-width' + this.parent.getCssClass(true) + '" '
+            + ' /></div>' + '<div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="cellPadding" class="e-cell-padding' + this.parent.getCssClass(true) + '" />'
+            + ' </div><div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing' + this.parent.getCssClass(true) + '" /></div>';
         var contentElem = parseHtml(content);
         tableWrap.appendChild(contentElem);
         this.tableWidthNum = new NumericTextBox({

package/src/rich-text-editor/renderer/toolbar-renderer.d.ts

@@ -17,10 +17,8 @@ export declare class ToolbarRenderer implements IRenderer {
      * @private
      */
     parent: IRichTextEditor;
-    private popupContainer;
     private currentElement;
     private currentDropdown;
-    private popupOverlay;
     private tooltip;
     private l10n;
     /**
@@ -41,7 +39,6 @@ export declare class ToolbarRenderer implements IRenderer {
     private tooltipBeforeRender;
     private dropDownOpen;
     private dropDownClose;
-    private removePopupContainer;
     /**
      * renderToolbar method
      *
@@ -69,8 +66,6 @@ export declare class ToolbarRenderer implements IRenderer {
 
      */
     renderListDropDown(args: IDropDownModel): DropDownButton;
-    private onPopupOverlay;
-    private setIsModel;
     private paletteSelection;
     /**
      * renderColorPickerDropDown method
@@ -85,7 +80,6 @@ export declare class ToolbarRenderer implements IRenderer {
      */
     renderColorPickerDropDown(args: IColorPickerModel, item: string, colorPicker: ColorPicker, defaultColor: string): DropDownButton;
     private pickerRefresh;
-    private popupModal;
     private setColorPickerContentWidth;
     /**
      * renderColorPicker method

package/src/rich-text-editor/renderer/toolbar-renderer.js

@@ -1,5 +1,5 @@
-import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
-import { getInstance, closest, selectAll, detach } from '@syncfusion/ej2-base';
+import { addClass, Browser, removeClass, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
+import { getInstance, closest, selectAll } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { Popup, Tooltip } from '@syncfusion/ej2-popups';
@@ -30,21 +30,19 @@ var ToolbarRenderer = /** @class */ (function () {
     }
     ToolbarRenderer.prototype.wireEvent = function () {
         this.parent.on(events.destroy, this.unWireEvent, this);
-        this.parent.on(events.maximizeMinimizeClick, this.destroyTooltip, this);
+        this.parent.on(events.destroyTooltip, this.destroyTooltip, this);
     };
     ToolbarRenderer.prototype.destroyTooltip = function () {
-        if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(document.querySelector(' [data-tooltip-id]'))) {
-            var tooltipTargetEle = this.parent.element.querySelector('[data-tooltip-id]');
+        var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
+            this.parent.contentModule.getDocument();
+        if (!isNullOrUndefined(currentDocument.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(currentDocument.querySelector('[data-tooltip-id]'))) {
+            var tooltipTargetEle = currentDocument.querySelector('[data-tooltip-id]');
             var event_1 = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
             tooltipTargetEle.dispatchEvent(event_1);
         }
     };
     ToolbarRenderer.prototype.unWireEvent = function () {
         this.parent.off(events.destroy, this.unWireEvent);
-        if (this.popupOverlay) {
-            EventHandler.remove(this.popupOverlay, 'click touchmove', this.onPopupOverlay);
-        }
-        this.removePopupContainer();
     };
     ToolbarRenderer.prototype.toolbarBeforeCreate = function (e) {
         if (this.mode === 'Extended') {
@@ -65,7 +63,6 @@ var ToolbarRenderer = /** @class */ (function () {
     };
     ToolbarRenderer.prototype.dropDownSelected = function (args) {
         this.parent.notify(events.dropDownSelect, args);
-        this.onPopupOverlay();
     };
     ToolbarRenderer.prototype.beforeDropDownItemRender = function (args) {
         if (this.parent.readonly || !this.parent.enabled) {
@@ -102,27 +99,11 @@ var ToolbarRenderer = /** @class */ (function () {
                 addClass([listEle[1], listEle[2]], 'e-disabled');
             }
         }
-        if (Browser.isDevice && !args.element.parentElement.classList.contains(classes.CLS_QUICK_DROPDOWN)) {
-            this.popupModal(args.element.parentElement);
-        }
         this.parent.notify(events.selectionSave, args);
     };
     ToolbarRenderer.prototype.dropDownClose = function (args) {
-        this.removePopupContainer();
         this.parent.notify(events.selectionRestore, args);
     };
-    ToolbarRenderer.prototype.removePopupContainer = function () {
-        if (Browser.isDevice && !isNullOrUndefined(this.popupContainer)) {
-            var popupEle = this.popupContainer.querySelector('.e-dropdown-popup.e-tbar-btn.e-control');
-            if (popupEle) {
-                this.popupContainer.parentNode.insertBefore(popupEle, this.popupContainer.nextSibling);
-                popupEle.style.removeProperty('position');
-                removeClass([popupEle], 'e-popup-modal');
-            }
-            detach(this.popupContainer);
-            this.popupContainer = undefined;
-        }
-    };
     /**
      * renderToolbar method
      *
@@ -156,7 +137,7 @@ var ToolbarRenderer = /** @class */ (function () {
                 openDelay: 400,
                 opensOn: 'Hover',
                 beforeRender: this.tooltipBeforeRender.bind(this),
-                cssClass: this.parent.cssClass,
+                cssClass: this.parent.getCssClass(),
                 windowCollision: true,
                 position: 'BottomCenter'
             });
@@ -216,7 +197,7 @@ var ToolbarRenderer = /** @class */ (function () {
                     }
                     //Alignments preselect
                     var alignEle = proxy.parent.getRange().startContainer;
-                    while (alignEle !== proxy.parent.element.querySelector('.e-content') && !isNOU(alignEle.parentElement)) {
+                    while (alignEle !== proxy.parent.inputElement && !isNOU(alignEle.parentElement)) {
                         if (alignEle.nodeName === '#text') {
                             alignEle = alignEle.parentElement;
                         }
@@ -242,7 +223,8 @@ var ToolbarRenderer = /** @class */ (function () {
                         alignEle = alignEle.parentElement;
                     }
                     //image preselect
-                    var imageEle = startNode.closest('img') ? startNode.closest('img') : startNode.querySelector('img');
+                    var closestNode = startNode.closest('img');
+                    var imageEle = closestNode ? closestNode : startNode.querySelector('img');
                     if (args.items[0].command === 'Images') {
                         if (!isNOU(imageEle)) {
                             var index = void 0;
@@ -354,39 +336,6 @@ var ToolbarRenderer = /** @class */ (function () {
         };
         return dropDown;
     };
-    // eslint-disable-next-line
-    ToolbarRenderer.prototype.onPopupOverlay = function (args) {
-        if (!isNullOrUndefined(this.popupOverlay)) {
-            closest(this.popupOverlay, '.e-popup-container').style.display = 'none';
-            this.popupOverlay.style.display = 'none';
-            removeClass([this.popupOverlay], 'e-popup-overlay');
-        }
-    };
-    ToolbarRenderer.prototype.setIsModel = function (element) {
-        if (!closest(element, '.e-popup-container')) {
-            this.popupContainer = this.parent.createElement('div', {
-                className: 'e-rte-modal-popup e-popup-container e-center'
-            });
-            element.parentNode.insertBefore(this.popupContainer, element);
-            this.popupContainer.appendChild(element);
-            this.popupContainer.style.zIndex = element.style.zIndex;
-            this.popupContainer.style.display = 'flex';
-            element.style.position = 'relative';
-            addClass([element], 'e-popup-modal');
-            this.popupOverlay = this.parent.createElement('div', { className: 'e-popup-overlay' });
-            // eslint-disable-next-line
-            this.popupOverlay.style.zIndex = (parseInt(element.style.zIndex, null) - 1).toString();
-            this.popupOverlay.style.display = 'block';
-            this.popupContainer.appendChild(this.popupOverlay);
-            EventHandler.add(this.popupOverlay, 'click touchmove', this.onPopupOverlay, this);
-        }
-        else {
-            element.parentElement.style.display = 'flex';
-            this.popupOverlay = element.nextElementSibling;
-            this.popupOverlay.style.display = 'block';
-            addClass([this.popupOverlay], 'e-popup-overlay');
-        }
-    };
     ToolbarRenderer.prototype.paletteSelection = function (dropDownArgs, currentElement) {
         var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');
         var colorbox = [].slice.call(selectAll('.e-tile', ele.parentElement));
@@ -415,7 +364,7 @@ var ToolbarRenderer = /** @class */ (function () {
         var proxy = this;
         var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');
         css += (' ' + ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_DROPDOWN : CLS_FONT_COLOR_DROPDOWN));
-        css += ' ' + this.parent.cssClass;
+        css += this.parent.getCssClass(true);
         var content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });
         var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
         var range;
@@ -487,9 +436,6 @@ var ToolbarRenderer = /** @class */ (function () {
                 if (focusEle) {
                     focusEle.focus();
                 }
-                if (Browser.isDevice) {
-                    _this.popupModal(dropDownArgs.element.parentElement);
-                }
                 _this.pickerRefresh(dropDownArgs);
             },
             beforeClose: function (dropDownArgs) {
@@ -517,22 +463,6 @@ var ToolbarRenderer = /** @class */ (function () {
             },
             close: function (dropDownArgs) {
                 proxy.parent.notify(events.selectionRestore, {});
-                var dropElement = closest(dropDownArgs.element.parentElement, '.e-popup-container');
-                if (dropElement) {
-                    dropElement.style.display = 'none';
-                    dropElement.lastElementChild.style.display = 'none';
-                    removeClass([dropElement.lastElementChild], 'e-popup-overlay');
-                }
-                if (Browser.isDevice && !isNullOrUndefined(dropElement)) {
-                    var popupEle = dropElement.querySelector('.e-dropdown-popup.e-tbar-btn.e-control');
-                    if (popupEle) {
-                        dropElement.parentNode.insertBefore(popupEle, dropElement.nextSibling);
-                        popupEle.style.removeProperty('position');
-                        removeClass([popupEle], 'e-popup-modal');
-                    }
-                    detach(dropElement);
-                    proxy.popupContainer = undefined;
-                }
             }
         });
         dropDown.isStringTemplate = true;
@@ -560,16 +490,6 @@ var ToolbarRenderer = /** @class */ (function () {
             popupElem.style.width = (popupElem.offsetWidth - 5).toString() + 'px';
         }
     };
-    ToolbarRenderer.prototype.popupModal = function (element) {
-        var popupInst = getInstance(element, Popup);
-        popupInst.relateTo = document.body;
-        popupInst.position = { X: 0, Y: 0 };
-        popupInst.targetType = 'container';
-        popupInst.collision = { X: 'fit', Y: 'fit' };
-        popupInst.offsetY = 4;
-        popupInst.dataBind();
-        this.setIsModel(element);
-    };
     ToolbarRenderer.prototype.setColorPickerContentWidth = function (colorPicker) {
         var colorPickerContent = colorPicker.element.nextSibling;
         if (colorPickerContent.style.width === '0px') {
@@ -608,7 +528,7 @@ var ToolbarRenderer = /** @class */ (function () {
                 args.element.classList.add(CLS_COLOR_PALETTE);
                 args.element.classList.add(CLS_CUSTOM_TILE);
                 if (!isNullOrUndefined(_this.parent.cssClass)) {
-                    var allClassName = _this.parent.cssClass.split(' ');
+                    var allClassName = _this.parent.getCssClass().split(' ');
                     for (var i = 0; i < allClassName.length; i++) {
                         if (allClassName[i].trim() !== '') {
                             args.element.classList.add(allClassName[i]);

package/src/rich-text-editor/renderer/view-source.js

@@ -44,7 +44,7 @@ var ViewSource = /** @class */ (function () {
         this.parent.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.onKeyDown);
     };
     ViewSource.prototype.getSourceCode = function () {
-        return this.parent.createElement('textarea', { className: CLS_RTE_SOURCE_CODE_TXTAREA + ' ' + this.parent.cssClass });
+        return this.parent.createElement('textarea', { className: CLS_RTE_SOURCE_CODE_TXTAREA + this.parent.getCssClass(true) });
     };
     ViewSource.prototype.wireEvent = function (element) {
         this.keyboardModule = new KeyboardEvents(element, {
@@ -141,8 +141,10 @@ var ViewSource = /** @class */ (function () {
             this.getPanel().style.display = 'block';
         }
         else {
+            var height = this.parent.inputElement.offsetHeight;
             this.contentModule.getPanel().appendChild(this.previewElement);
             this.getPanel().value = this.getTextAreaValue();
+            this.previewElement.style.height = height + 'px';
             this.contentModule.getEditPanel().style.display = 'none';
             this.previewElement.style.display = 'block';
         }