@syncfusion/ej2-richtexteditor 23.2.7-52849 → 24.1.41

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';
@@ -12,7 +12,7 @@ import { hasClass } from '../base/util';
  * `Toolbar renderer` module is used to render toolbar in RichTextEditor.
  *
  * @hidden
- * @deprecated
+
  */
 var ToolbarRenderer = /** @class */ (function () {
     /**
@@ -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,34 +99,18 @@ 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
      *
      * @param {IToolbarOptions} args - specifies the arguments.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ToolbarRenderer.prototype.renderToolbar = function (args) {
         this.setPanel(args.target);
@@ -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'
             });
@@ -169,7 +150,7 @@ var ToolbarRenderer = /** @class */ (function () {
      * @param {IDropDownModel} args - specifies the the arguments.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ToolbarRenderer.prototype.renderDropDownButton = function (args) {
         var _this = this;
@@ -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;
@@ -297,7 +279,7 @@ var ToolbarRenderer = /** @class */ (function () {
      * @param {IDropDownModel} args - specifies the the arguments.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ToolbarRenderer.prototype.renderListDropDown = function (args) {
         // eslint-disable-next-line
@@ -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));
@@ -407,7 +356,7 @@ var ToolbarRenderer = /** @class */ (function () {
      * @param {string} defaultColor -specifies the defaultColor.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ToolbarRenderer.prototype.renderColorPickerDropDown = function (args, item, colorPicker, defaultColor) {
         var _this = this;
@@ -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') {
@@ -586,7 +506,7 @@ var ToolbarRenderer = /** @class */ (function () {
      * @param {string} item - specifies the string values
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ToolbarRenderer.prototype.renderColorPicker = function (args, item) {
         var _this = this;
@@ -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]);
@@ -661,7 +581,7 @@ var ToolbarRenderer = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ToolbarRenderer.prototype.renderPanel = function () {
         this.getPanel().classList.add(CLS_TOOLBAR);
@@ -671,7 +591,7 @@ var ToolbarRenderer = /** @class */ (function () {
      *
      * @returns {Element} - specifies the element.
      * @hidden
-     * @deprecated
+
      */
     ToolbarRenderer.prototype.getPanel = function () {
         return this.toolbarPanel;
@@ -682,7 +602,7 @@ var ToolbarRenderer = /** @class */ (function () {
      * @returns {void}
      * @param  {Element} panel - specifies the element.
      * @hidden
-     * @deprecated
+
      */
     ToolbarRenderer.prototype.setPanel = function (panel) {
         this.toolbarPanel = panel;

package/src/rich-text-editor/renderer/video-module.d.ts

@@ -92,7 +92,7 @@ export declare class Video {
      * @method destroy
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     destroy(): void;
     /**

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

@@ -1393,7 +1393,7 @@ var Video = /** @class */ (function () {
      * @method destroy
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     /* eslint-enable */
     Video.prototype.destroy = function () {

package/src/rich-text-editor/renderer/view-source.d.ts

@@ -7,7 +7,7 @@ import { ClickEventArgs } from '@syncfusion/ej2-navigations';
  * Content module is used to render Rich Text Editor content
  *
  * @hidden
- * @deprecated
+
  */
 export declare class ViewSource {
     private parent;
@@ -40,7 +40,7 @@ export declare class ViewSource {
      * @param {ClickEventArgs} args - specifies the click event.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     sourceCode(args?: ClickEventArgs | IHtmlKeyboardEvent): void;
     /**
@@ -49,7 +49,7 @@ export declare class ViewSource {
      * @param {ClickEventArgs} args - specifies the click event.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     updateSourceCode(args?: ClickEventArgs | KeyboardEventArgs): void;
     private getTextAreaValue;
@@ -58,7 +58,7 @@ export declare class ViewSource {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     getPanel(): HTMLTextAreaElement | Element;
     /**
@@ -66,7 +66,7 @@ export declare class ViewSource {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     getViewPanel(): HTMLTextAreaElement | Element;
     /**
@@ -74,7 +74,7 @@ export declare class ViewSource {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     destroy(): void;
     private moduleDestroy;

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

@@ -8,7 +8,7 @@ import { KeyboardEvents } from '../actions/keyboard';
  * Content module is used to render Rich Text Editor content
  *
  * @hidden
- * @deprecated
+
  */
 var ViewSource = /** @class */ (function () {
     /**
@@ -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, {
@@ -105,7 +105,7 @@ var ViewSource = /** @class */ (function () {
      * @param {ClickEventArgs} args - specifies the click event.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ViewSource.prototype.sourceCode = function (args) {
         this.parent.notify(events.hidePopup, {});
@@ -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';
         }
@@ -171,7 +173,7 @@ var ViewSource = /** @class */ (function () {
      * @param {ClickEventArgs} args - specifies the click event.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ViewSource.prototype.updateSourceCode = function (args) {
         this.parent.isBlur = false;
@@ -243,7 +245,7 @@ var ViewSource = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ViewSource.prototype.getPanel = function () {
         return this.parent.element && this.parent.element.querySelector('.e-rte-srctextarea');
@@ -253,7 +255,7 @@ var ViewSource = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ViewSource.prototype.getViewPanel = function () {
         return (this.parent.iframeSettings.enable && this.getPanel()) ? this.getPanel().parentElement : this.getPanel();
@@ -263,7 +265,7 @@ var ViewSource = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ViewSource.prototype.destroy = function () {
         if (isNullOrUndefined(this.parent)) {

package/src/rich-text-editor/services/renderer-factory.d.ts

@@ -4,7 +4,7 @@ import { RenderType } from '../base/enum';
  * RendererFactory
  *
  * @hidden
- * @deprecated
+
  */
 export declare class RendererFactory {
     rendererMap: {
@@ -17,7 +17,7 @@ export declare class RendererFactory {
      * @param {IRenderer} type - specifies the renderer.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     addRenderer(name: RenderType, type: IRenderer): void;
     /**
@@ -26,7 +26,7 @@ export declare class RendererFactory {
      * @param {RenderType} name - specifies the render type
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     getRenderer(name: RenderType): IRenderer;
 }

package/src/rich-text-editor/services/renderer-factory.js

@@ -4,7 +4,7 @@ import { RenderType } from '../base/enum';
  * RendererFactory
  *
  * @hidden
- * @deprecated
+
  */
 var RendererFactory = /** @class */ (function () {
     function RendererFactory() {
@@ -17,7 +17,7 @@ var RendererFactory = /** @class */ (function () {
      * @param {IRenderer} type - specifies the renderer.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     RendererFactory.prototype.addRenderer = function (name, type) {
         var rName = getEnumValue(RenderType, name);
@@ -31,7 +31,7 @@ var RendererFactory = /** @class */ (function () {
      * @param {RenderType} name - specifies the render type
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     RendererFactory.prototype.getRenderer = function (name) {
         var rName = getEnumValue(RenderType, name);

package/src/rich-text-editor/services/service-locator.d.ts

@@ -2,7 +2,7 @@
  * ServiceLocator
  *
  * @hidden
- * @deprecated
+
  */
 export declare class ServiceLocator {
     private services;
@@ -13,7 +13,7 @@ export declare class ServiceLocator {
      * @param {T} type - specifies the type.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     register<T>(name: string, type: T): void;
     /**
@@ -22,7 +22,7 @@ export declare class ServiceLocator {
      * @param {string} name - specifies the name.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     getService<T>(name: string): T;
 }

package/src/rich-text-editor/services/service-locator.js

@@ -3,7 +3,7 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
  * ServiceLocator
  *
  * @hidden
- * @deprecated
+
  */
 var ServiceLocator = /** @class */ (function () {
     function ServiceLocator() {
@@ -17,7 +17,7 @@ var ServiceLocator = /** @class */ (function () {
      * @param {T} type - specifies the type.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     /* eslint-enable */
     ServiceLocator.prototype.register = function (name, type) {
@@ -31,7 +31,7 @@ var ServiceLocator = /** @class */ (function () {
      * @param {string} name - specifies the name.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     ServiceLocator.prototype.getService = function (name) {
         if (isNullOrUndefined(this.services["" + name])) {