@syncfusion/ej2-richtexteditor 24.2.9 → 25.1.35

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

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

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.
@@ -59,7 +58,6 @@ export declare class HtmlEditor {
     private getRangeLiNode;
     private onPaste;
     private spaceLink;
-    private mouseOutHandler;
     private onToolbarClick;
     private renderColorPicker;
     private instantiateRenderer;

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';
@@ -507,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);
@@ -699,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;
@@ -719,17 +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 });
-            if (!this.tooltipTargetEle.closest('.e-rte-quick-popup')) {
-                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' ||

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

@@ -74,7 +74,9 @@ var MarkdownEditor = /** @class */ (function () {
     MarkdownEditor.prototype.onToolbarClick = function (args) {
         var item = args.item;
         var textArea = this.parent.contentModule.getEditPanel();
-        textArea.focus();
+        if (item.command !== 'Formats') {
+            textArea.focus();
+        }
         var startOffset = textArea.selectionStart;
         var endOffset = textArea.selectionEnd;
         var text = textArea.value.substring(startOffset, endOffset);

package/src/rich-text-editor/actions/paste-clean-up.d.ts

@@ -77,6 +77,7 @@ export declare class PasteCleanup {
     private deniedAttributes;
     private allowedStyle;
     private findLastElement;
+    private processPictureElement;
     /**
      * For internal use only - Get the module name.
      *

package/src/rich-text-editor/actions/paste-clean-up.js

@@ -679,6 +679,9 @@ var PasteCleanup = /** @class */ (function () {
             this.setImageProperties(allImg[i]);
         }
         this.addTempClass(clipBoardElem);
+        if (clipBoardElem.querySelectorAll('picture').length > 0) {
+            this.processPictureElement(clipBoardElem);
+        }
         if (clipBoardElem.textContent !== '' || !isNOU(clipBoardElem.querySelector('img')) ||
             !isNOU(clipBoardElem.querySelector('table'))) {
             var tempWrapperElem = this.parent.createElement('div');
@@ -1138,6 +1141,26 @@ var PasteCleanup = /** @class */ (function () {
         }
         return null;
     };
+    PasteCleanup.prototype.processPictureElement = function (clipBoardElem) {
+        var pictureElems = clipBoardElem.querySelectorAll('picture');
+        for (var i = 0; i < pictureElems.length; i++) {
+            var imgElem = pictureElems[i].querySelector('img');
+            var sourceElems = pictureElems[i].querySelectorAll('source');
+            if (imgElem && imgElem.getAttribute('src')) {
+                var srcValue = imgElem.getAttribute('src');
+                var url = new URL(srcValue);
+                for (var j = 0; j < sourceElems.length; j++) {
+                    var srcset = sourceElems[j].getAttribute('srcset');
+                    if (srcset) {
+                        if (srcset.indexOf('http') === -1) {
+                            var fullPath = url.origin + srcset;
+                            sourceElems[j].setAttribute('srcset', fullPath);
+                        }
+                    }
+                }
+            }
+        }
+    };
     /**
      * For internal use only - Get the module name.
      *

package/src/rich-text-editor/actions/quick-toolbar.d.ts

@@ -137,4 +137,11 @@ export declare class QuickToolbar {
      * @hidden
      */
     private getModuleName;
+    /**
+     *
+     * @returns {BaseQuickToolbar[]} - specifies the quick toolbar instance.
+     * @hidden
+     * @private
+     */
+    getQuickToolbarInstance(): BaseQuickToolbar[];
 }

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

@@ -238,6 +238,9 @@ var QuickToolbar = /** @class */ (function () {
             }
         }
         if (!isNOU(this.textQTBar) && !isNOU(this.parent.quickToolbarSettings.text) && !this.parent.inlineMode.enable) {
+            if (!isNOU(e) && !isNOU(e.name) && e.name === 'sourceCodeMouseDown') {
+                return;
+            }
             var args = e.args.touches ?
                 e.args.changedTouches[0] : e.args;
             var target = e.args.target;
@@ -248,7 +251,7 @@ var QuickToolbar = /** @class */ (function () {
             this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);
             var range = this.parent.getRange();
             if ((range.endContainer.parentElement.tagName === range.startContainer.parentElement.tagName && (range.startContainer.parentElement.tagName === 'A' && range.endContainer.parentElement.tagName === 'A')) ||
-                (target.tagName === 'IMG') || (target.tagName === 'VIDEO') || (target.tagName === 'AUDIO') || (target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
+                (target.tagName === 'IMG') || (target.tagName === 'VIDEO') || (target.tagName === 'AUDIO') || (target.childNodes[0] && target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
                 (this.parent.getRange().startOffset === this.parent.getRange().endOffset)) {
                 return;
             }
@@ -256,13 +259,16 @@ var QuickToolbar = /** @class */ (function () {
             this.textQTBar.showPopup(this.offsetX, this.offsetY, target, 'text');
         }
     };
-    QuickToolbar.prototype.keyDownHandler = function () {
-        if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
-            && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
-            this.hideInlineQTBar();
-        }
-        if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close')) {
-            this.textQTBar.hidePopup();
+    QuickToolbar.prototype.keyDownHandler = function (e) {
+        var preventHide = e.args.altKey;
+        if (!preventHide) {
+            if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
+                && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
+                this.hideInlineQTBar();
+            }
+            if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close')) {
+                this.textQTBar.hidePopup();
+            }
         }
     };
     QuickToolbar.prototype.inlineQTBarMouseDownHandler = function () {
@@ -590,6 +596,15 @@ var QuickToolbar = /** @class */ (function () {
     QuickToolbar.prototype.getModuleName = function () {
         return 'quickToolbar';
     };
+    /**
+     *
+     * @returns {BaseQuickToolbar[]} - specifies the quick toolbar instance.
+     * @hidden
+     * @private
+     */
+    QuickToolbar.prototype.getQuickToolbarInstance = function () {
+        return [this.linkQTBar, this.imageQTBar, this.audioQTBar, this.videoQTBar, this.tableQTBar, this.textQTBar, this.inlineQTBar];
+    };
     return QuickToolbar;
 }());
 export { QuickToolbar };

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

@@ -71,7 +71,8 @@ var Resize = /** @class */ (function () {
             this.parent.element.style.width = (!this.parent.enableRtl) ? eventType.clientX - boundRect.left + 'px' : boundRect.right - eventType.clientX + 'px';
         }
         if (!this.parent.toolbarSettings.enable) {
-            this.parent.setContentHeight('', false);
+            var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+            this.parent.setContentHeight('Resize', isExpand);
         }
         this.parent.refreshUI();
     };

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

@@ -151,8 +151,6 @@ export declare class Toolbar {
      */
     destroy(): void;
     private moduleDestroy;
-    private scrollHandler;
-    private getDOMVisibility;
     private mouseDownHandler;
     private focusChangeHandler;
     private dropDownBeforeOpenHandler;

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

@@ -150,72 +150,14 @@ var Toolbar = /** @class */ (function () {
         }
     };
     Toolbar.prototype.toggleFloatClass = function (e) {
-        var topValue;
-        var isBody = false;
-        var isFloat = false;
-        var scrollParent;
         var floatOffset = this.parent.floatingToolbarOffset;
-        if (e && this.parent.iframeSettings.enable && this.parent.inputElement.ownerDocument === e.target) {
-            scrollParent = e.target.body;
-        }
-        else if (e && e.target !== document) {
-            scrollParent = e.target;
-        }
-        else {
-            isBody = true;
-            scrollParent = document.body;
-        }
-        var tbHeight = this.getToolbarHeight() + this.getExpandTBarPopHeight();
-        if (this.isTransformChild) {
-            topValue = 0;
-            var scrollParentRelativeTop = 0;
-            var trgHeight = this.parent.element.offsetHeight;
-            if (isBody) {
-                var bodyStyle = window.getComputedStyle(scrollParent);
-                scrollParentRelativeTop = parseFloat(bodyStyle.marginTop.split('px')[0]) + parseFloat(bodyStyle.paddingTop.split('px')[0]);
-            }
-            var targetTop = this.parent.element.getBoundingClientRect().top;
-            var scrollParentYOffset = (Browser.isMSPointer && isBody) ? window.pageYOffset : scrollParent.parentElement.scrollTop;
-            var scrollParentRect = scrollParent.getBoundingClientRect();
-            var scrollParentTop = (!isBody) ? scrollParentRect.top : (scrollParentRect.top + scrollParentYOffset);
-            var outOfRange = ((targetTop - ((!isBody) ? scrollParentTop : 0))
-                + trgHeight > tbHeight + floatOffset) ? false : true;
-            if (targetTop > (scrollParentTop + floatOffset) || targetTop < -trgHeight || ((targetTop < 0) ? outOfRange : false)) {
-                isFloat = false;
-                removeClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);
-            }
-            else if (targetTop < (scrollParentTop + floatOffset)) {
-                if (targetTop < 0) {
-                    topValue = (-targetTop) + scrollParentTop;
-                }
-                else {
-                    topValue = scrollParentTop - targetTop;
-                }
-                topValue = (isBody) ? topValue - scrollParentRelativeTop : topValue;
-                addClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);
-                isFloat = true;
-            }
-        }
-        else {
-            var parent_1 = this.parent.element.getBoundingClientRect();
-            if (window.innerHeight < parent_1.top) {
-                return;
-            }
-            topValue = (e && e.target !== document) ? scrollParent.getBoundingClientRect().top : 0;
-            if ((parent_1.bottom < (floatOffset + tbHeight + topValue)) || parent_1.bottom < 0 || parent_1.top > floatOffset + topValue) {
-                isFloat = false;
-            }
-            else if (parent_1.top < floatOffset || parent_1.top < floatOffset + topValue) {
-                isFloat = true;
-            }
-        }
-        if (!isFloat) {
-            removeClass([this.tbElement], [classes.CLS_TB_FLOAT]);
-            setStyleAttribute(this.tbElement, { top: 0 + 'px', width: '100%' });
+        if (this.parent.toolbarSettings.enableFloating) {
+            addClass([this.tbElement.parentElement], [classes.CLS_TB_FLOAT]);
+            setStyleAttribute(this.tbElement.parentElement, { top: (floatOffset) + 'px' });
         }
         else {
-            addClass([this.tbElement], [classes.CLS_TB_FLOAT]);
-            setStyleAttribute(this.tbElement, { width: this.parent.element.offsetWidth + 'px', top: (floatOffset + topValue) + 'px' });
+            removeClass([this.tbElement.parentElement], [classes.CLS_TB_FLOAT]);
+            setStyleAttribute(this.tbElement.parentElement, { top: '' });
         }
     };
     Toolbar.prototype.renderToolbar = function () {
@@ -521,19 +463,6 @@ var Toolbar = /** @class */ (function () {
         this.toolbarActionModule.parent = null;
         this.dropDownModule.parent = null;
     };
-    Toolbar.prototype.scrollHandler = function (e) {
-        if (!this.parent.inlineMode.enable) {
-            if (this.parent.toolbarSettings.enableFloating && this.getDOMVisibility(this.tbElement)) {
-                this.toggleFloatClass(e.args);
-            }
-        }
-    };
-    Toolbar.prototype.getDOMVisibility = function (el) {
-        if (!el.offsetParent && el.offsetWidth === 0 && el.offsetHeight === 0) {
-            return false;
-        }
-        return true;
-    };
     Toolbar.prototype.mouseDownHandler = function () {
         if (Browser.isDevice && this.parent.inlineMode.enable && !isIDevice()) {
             this.showFixedTBar();
@@ -570,11 +499,6 @@ var Toolbar = /** @class */ (function () {
     };
     Toolbar.prototype.adjustContentHeight = function (trg, isKeyboard) {
         if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNOU(trg)) {
-            var extendedTbar = this.tbElement.querySelector('.e-toolbar-extended');
-            if (!isNOU(extendedTbar)) {
-                setStyleAttribute(extendedTbar, { maxHeight: '', display: 'block' });
-                setStyleAttribute(extendedTbar, { maxHeight: extendedTbar.offsetHeight + 'px', display: '' });
-            }
             var hasActiveClass = trg.classList.contains('e-nav-active');
             var isExpand = isKeyboard ? (hasActiveClass ? false : true) : (hasActiveClass ? true : false);
             if (isExpand) {
@@ -583,7 +507,7 @@ var Toolbar = /** @class */ (function () {
             else {
                 removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
             }
-            this.parent.setContentHeight('toolbar', isExpand);
+            this.parent.setContentHeight('Toolbar', isExpand);
         }
         else if (Browser.isDevice || this.parent.inlineMode.enable) {
             this.isToolbar = true;
@@ -608,7 +532,6 @@ var Toolbar = /** @class */ (function () {
         this.dropDownModule = new DropDownButtons(this.parent, this.locator);
         this.toolbarActionModule = new ToolbarAction(this.parent);
         this.parent.on(events.initialEnd, this.renderToolbar, this);
-        this.parent.on(events.scroll, this.scrollHandler, this);
         this.parent.on(events.bindOnEnd, this.toolbarBindEvent, this);
         this.parent.on(events.toolbarUpdated, this.updateToolbarStatus, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
@@ -633,7 +556,6 @@ var Toolbar = /** @class */ (function () {
             return;
         }
         this.parent.off(events.initialEnd, this.renderToolbar);
-        this.parent.off(events.scroll, this.scrollHandler);
         this.parent.off(events.bindOnEnd, this.toolbarBindEvent);
         this.parent.off(events.toolbarUpdated, this.updateToolbarStatus);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
@@ -668,7 +590,8 @@ var Toolbar = /** @class */ (function () {
         if (!this.parent.inlineMode.enable) {
             this.refreshToolbarOverflow();
         }
-        this.parent.setContentHeight('', true);
+        var isExpand = this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;
+        this.parent.setContentHeight('Refresh', isExpand);
     };
     /**
      * Called internally if any of the property value changed.
@@ -689,6 +612,11 @@ var Toolbar = /** @class */ (function () {
                 }
             }
         }
+        if (!isNullOrUndefined(e.newProp.toolbarSettings)) {
+            if (!isNullOrUndefined(e.newProp.toolbarSettings.enableFloating)) {
+                this.toggleFloatClass();
+            }
+        }
         if (e.module !== this.getModuleName()) {
             return;
         }

package/src/rich-text-editor/base/classes.d.ts

@@ -49,11 +49,6 @@ export declare const CLS_TB_FLOAT: string;
 /**
  * @hidden
 
- */
-export declare const CLS_TB_ABS_FLOAT: string;
-/**
- * @hidden
-
  */
 export declare const CLS_INLINE: string;
 /**

package/src/rich-text-editor/base/classes.js

@@ -49,11 +49,6 @@ export var CLS_TB_FLOAT = 'e-rte-tb-float';
 /**
  * @hidden
 
- */
-export var CLS_TB_ABS_FLOAT = 'e-rte-tb-abs-float';
-/**
- * @hidden
-
  */
 export var CLS_INLINE = 'e-rte-inline';
 /**

package/src/rich-text-editor/base/constant.d.ts

@@ -764,6 +764,11 @@ export declare const showColorPicker: string;
 /**
  * @hidden
 
+ */
+export declare const closeTooltip: string;
+/**
+ * @hidden
+
  */
 export declare const blockEmptyNodes: string;
 /**

package/src/rich-text-editor/base/constant.js

@@ -764,6 +764,11 @@ export var showColorPicker = 'showColorPicker';
 /**
  * @hidden
 
+ */
+export var closeTooltip = 'closeTooltip';
+/**
+ * @hidden
+
  */
 export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
 /**

package/src/rich-text-editor/base/interface.d.ts

@@ -8,7 +8,7 @@ import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { BaseToolbar } from '../actions/base-toolbar';
 import { BaseQuickToolbar } from '../actions/base-quick-toolbar';
 import { NodeSelection } from '../../selection/selection';
-import { EditorMode, EnterKey, ShiftEnterKey } from './../../common/types';
+import { ContentHeightSource, EditorMode, EnterKey, ShiftEnterKey } from './../../common/types';
 import { MarkdownSelection } from './../../markdown-parser/plugin/markdown-selection';
 import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';
 import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel } from '../models/models';
@@ -163,7 +163,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     getText(): string;
     updateValueData?(): void;
     getBaseToolbarObject(): BaseToolbar;
-    setContentHeight(target?: string, isExpand?: boolean): void;
+    setContentHeight(target: ContentHeightSource, isExpand?: boolean): void;
     keyConfig?: {
         [key: string]: string;
     };
@@ -667,6 +667,10 @@ export interface IToolsItemConfigs {
     subCommand?: string;
     value?: string;
 }
+/**
+ * @hidden
+
+ */
 export interface IListDropDownModel extends DropDownItemModel {
     cssClass?: string;
     command?: string;
@@ -676,6 +680,10 @@ export interface IListDropDownModel extends DropDownItemModel {
     listStyle?: string;
     listImage?: string;
 }
+/**
+ * @hidden
+
+ */
 export interface IDropDownItemModel extends DropDownItemModel {
     cssClass?: string;
     command?: string;
@@ -1378,3 +1386,29 @@ export interface CleanupResizeElemArgs {
     value: string;
     callBack(value: string): void;
 }
+/**
+ * @hidden
+ * @private
+ */
+export interface IBaseQuickToolbar {
+    /**
+     * Instance of the Quick Toolabr Popup.
+     */
+    popupObj: Popup;
+    /**
+     * Parent Element of the Quick Toolbar.
+     */
+    element: HTMLElement;
+    /**
+     * Boolean to check whether the quick toolbar is rendered in the DOM.
+     */
+    isRendered: boolean;
+    /**
+     * Instance of the Toolbar rendered inside the Popup.
+     */
+    quickTBarObj: BaseToolbar;
+    /**
+     * Element of the Toolbar rendered inside the Popup.
+     */
+    toolbarElement: HTMLElement;
+}

package/src/rich-text-editor/base/rich-text-editor-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs, ImageDropEventArgs, IFormatPainterArgs, CleanupResizeElemArgs } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs, StatusArgs, ToolbarStatusEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, AfterMediaDeleteEventArgs, PasteCleanupArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, IAudioCommandsArgs, IVideoCommandsArgs, BeforeSanitizeHtmlArgs, ITableCommandsArgs, ExecuteCommandOption } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType, DialogType } from './enum';import { EditorMode, ShiftEnterKey, EnterKey } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList, FormatPainterSettings, EmojiSettings } from '../models/toolbar-settings';import { FileManagerSettings } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Audio } from '../renderer/audio-module';import { Video } from '../renderer/video-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import { EnterKeyAction } from '../actions/enter-key';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty, getDefaultValue } from '../base/util';import { DialogRenderer } from '../renderer/dialog-renderer';import { SelectedEventArgs, RemovingEventArgs, UploadingEventArgs, BeforeUploadEventArgs } from '@syncfusion/ej2-inputs';import { Resize } from '../actions/resize';import { FileManager } from '../actions/file-manager';import { FormatPainter } from '../actions/format-painter';import { EmojiPicker } from '../actions/emoji-picker';
+import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs, ImageDropEventArgs, IFormatPainterArgs, CleanupResizeElemArgs, IBaseQuickToolbar } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs, StatusArgs, ToolbarStatusEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, AfterMediaDeleteEventArgs, PasteCleanupArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, IAudioCommandsArgs, IVideoCommandsArgs, BeforeSanitizeHtmlArgs, ITableCommandsArgs, ExecuteCommandOption } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType, DialogType } from './enum';import { EditorMode, ShiftEnterKey, EnterKey, ContentHeightSource } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList, FormatPainterSettings, EmojiSettings } from '../models/toolbar-settings';import { FileManagerSettings } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Audio } from '../renderer/audio-module';import { Video } from '../renderer/video-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import { EnterKeyAction } from '../actions/enter-key';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty, getDefaultValue } from '../base/util';import { DialogRenderer } from '../renderer/dialog-renderer';import { SelectedEventArgs, RemovingEventArgs, UploadingEventArgs, BeforeUploadEventArgs } from '@syncfusion/ej2-inputs';import { Resize } from '../actions/resize';import { FileManager } from '../actions/file-manager';import { FormatPainter } from '../actions/format-painter';import { EmojiPicker } from '../actions/emoji-picker';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -83,7 +83,7 @@ export interface RichTextEditorModel extends ComponentModel{
      * 'height', 'left', 'line-height', 'list-style-type', 'margin', 'margin-top', 'margin-left',
      * 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width',
      * 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right',
-     * 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent',
+     * 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-transform', 'text-indent',
      * 'top', 'vertical-align', 'visibility', 'white-space', 'width'],
      * deniedTags: null,
      * keepFormat: true,

package/src/rich-text-editor/base/rich-text-editor.d.ts

@@ -10,7 +10,7 @@ import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs,
 import { ILinkCommandsArgs, IImageCommandsArgs, BeforeSanitizeHtmlArgs, ITableCommandsArgs, ExecuteCommandOption } from './interface';
 import { ServiceLocator } from '../services/service-locator';
 import { DialogType } from './enum';
-import { EditorMode, ShiftEnterKey, EnterKey } from './../../common/types';
+import { EditorMode, ShiftEnterKey, EnterKey, ContentHeightSource } from './../../common/types';
 import { Toolbar } from '../actions/toolbar';
 import { KeyboardEvents } from '../actions/keyboard';
 import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';
@@ -266,7 +266,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * 'height', 'left', 'line-height', 'list-style-type', 'margin', 'margin-top', 'margin-left',
      * 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width',
      * 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right',
-     * 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent',
+     * 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-transform', 'text-indent',
      * 'top', 'vertical-align', 'visibility', 'white-space', 'width'],
      * deniedTags: null,
      * keepFormat: true,
@@ -1444,7 +1444,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * @hidden
 
      */
-    setContentHeight(target?: string, isExpand?: boolean): void;
+    setContentHeight(target: ContentHeightSource, isExpand?: boolean): void;
     /**
      * Retrieves the HTML from RichTextEditor.
      *
@@ -1608,4 +1608,5 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      */
     private resetToolbarTabIndex;
     private removeSelectionClassStates;
+    private getRenderedQuickToolbarElem;
 }