@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.41-569781

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-action.js

@@ -39,7 +39,7 @@ var ToolbarAction = /** @class */ (function () {
         if (args.item.command === 'Lists') {
             if (args.originalEvent.target.classList.contains('e-caret') &&
                 (args.originalEvent.target.parentElement.classList.contains('e-rte-bulletformatlist-dropdown') || args.originalEvent.target.parentElement.classList.contains('e-rte-numberformatlist-dropdown'))) {
-                args.item.command = args.item.subCommand = null;
+                return;
             }
         }
         this.parent.notify(events.htmlToolbarClick, args);

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

@@ -4,6 +4,7 @@ import { IUpdateItemsModel } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
 import { RendererFactory } from '../services/renderer-factory';
 import { BaseToolbar } from './base-toolbar';
+import { DropDownButtons } from './dropdown-buttons';
 import { RichTextEditorModel } from '../base/rich-text-editor-model';
 /**
  * `Toolbar` module is used to handle Toolbar actions.
@@ -22,7 +23,7 @@ export declare class Toolbar {
     private isTransformChild;
     private contentRenderer;
     protected toolbarRenderer: IRenderer;
-    private dropDownModule;
+    dropDownModule: DropDownButtons;
     private toolbarActionModule;
     protected renderFactory: RendererFactory;
     private keyBoardModule;
@@ -42,7 +43,7 @@ export declare class Toolbar {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     addFixedTBarClass(): void;
     /**
@@ -50,7 +51,7 @@ export declare class Toolbar {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     removeFixedTBarClass(): void;
     private showFixedTBar;
@@ -61,7 +62,7 @@ export declare class Toolbar {
      * @param {IUpdateItemsModel} args - specifies the arguments.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     updateItem(args: IUpdateItemsModel): void;
     private updateToolbarStatus;
@@ -72,7 +73,7 @@ export declare class Toolbar {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getBaseToolbar(): BaseToolbar;
     /**
@@ -82,7 +83,7 @@ export declare class Toolbar {
      * @param {number} index - specifies the index value.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     addTBarItem(args: IUpdateItemsModel, index: number): void;
     /**
@@ -94,7 +95,7 @@ export declare class Toolbar {
      * @param {boolean} muteToolbarUpdate - specifies the toolbar.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     enableTBarItems(baseToolbar: BaseToolbar, items: string | string[], isEnable: boolean, muteToolbarUpdate?: boolean): void;
     /**
@@ -103,7 +104,7 @@ export declare class Toolbar {
      * @param {string} items - specifies the string value.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     removeTBarItems(items: string | string[]): void;
     /**
@@ -111,7 +112,7 @@ export declare class Toolbar {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getExpandTBarPopHeight(): number;
     /**
@@ -119,7 +120,7 @@ export declare class Toolbar {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getToolbarHeight(): number;
     /**
@@ -127,7 +128,7 @@ export declare class Toolbar {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getToolbarElement(): Element;
     /**
@@ -135,7 +136,7 @@ export declare class Toolbar {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     refreshToolbarOverflow(): void;
     private isToolbarDestroyed;
@@ -146,17 +147,16 @@ export declare class Toolbar {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     private moduleDestroy;
-    private scrollHandler;
-    private getDOMVisibility;
     private mouseDownHandler;
     private focusChangeHandler;
     private dropDownBeforeOpenHandler;
     private tbFocusHandler;
     private toolbarClickHandler;
+    private adjustContentHeight;
     protected wireEvents(): void;
     protected unWireEvents(): void;
     protected addEventListener(): void;
@@ -169,7 +169,7 @@ export declare class Toolbar {
      * @param {RichTextEditorModel} e - specifies the string value
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     protected onPropertyChanged(e: {
         [key: string]: RichTextEditorModel;

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

@@ -52,6 +52,13 @@ var Toolbar = /** @class */ (function () {
             case 'escape':
                 this.parent.contentModule.getEditPanel().focus();
                 break;
+            case 'enter':
+                if (e.target.classList.contains('e-hor-nav')) {
+                    this.adjustContentHeight(e.target, true);
+                }
+                if (!isNullOrUndefined(e.target) && (e.target.classList.contains("e-rte-fontcolor-dropdown") || e.target.classList.contains("e-rte-backgroundcolor-dropdown"))) {
+                    this.parent.notify(events.showColorPicker, { toolbarClick: e.target.classList.contains("e-rte-fontcolor-dropdown") ? "fontcolor" : "backgroundcolor" });
+                }
         }
     };
     Toolbar.prototype.createToolbarElement = function () {
@@ -60,7 +67,7 @@ var Toolbar = /** @class */ (function () {
             return;
         }
         else {
-            if (this.parent.toolbarSettings.enableFloating && !this.parent.inlineMode.enable) {
+            if (!this.parent.inlineMode.enable) {
                 this.tbWrapper = this.parent.createElement('div', {
                     id: this.parent.getID() + '_toolbar_wrapper',
                     innerHTML: this.tbElement.outerHTML,
@@ -107,7 +114,7 @@ var Toolbar = /** @class */ (function () {
             items: this.parent.toolbarSettings.items,
             mode: tBarMode,
             target: ele,
-            cssClass: this.parent.cssClass
+            cssClass: this.parent.getCssClass()
         });
         if (this.parent.toolbarSettings.type === ToolbarType.Expand) {
             addClass([ele], ['e-rte-tb-mobile']);
@@ -143,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 () {
@@ -226,7 +175,7 @@ var Toolbar = /** @class */ (function () {
                 items: this.parent.toolbarSettings.items,
                 mode: this.getToolbarMode(),
                 target: this.tbElement,
-                cssClass: this.parent.cssClass
+                cssClass: this.parent.getCssClass()
             });
             if (!this.parent.inlineMode.enable) {
                 if (this.parent.toolbarSettings.enableFloating) {
@@ -256,7 +205,7 @@ var Toolbar = /** @class */ (function () {
             });
             this.refreshToolbarOverflow();
         }
-        var divEle = this.parent.element.querySelector('.e-rte-srctextarea');
+        var divEle = this.parent.element.querySelector('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA);
         var iframeEle = this.parent.element.querySelector('.e-source-content');
         if ((!this.parent.iframeSettings.enable && (!isNOU(divEle) && divEle.style.display === 'block')) ||
             (this.parent.iframeSettings.enable && (!isNOU(iframeEle) && iframeEle.style.display === 'block'))) {
@@ -272,7 +221,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.addFixedTBarClass = function () {
         addClass([this.tbElement], [classes.CLS_TB_FIXED]);
@@ -282,7 +231,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.removeFixedTBarClass = function () {
         removeClass([this.tbElement], [classes.CLS_TB_FIXED]);
@@ -303,7 +252,7 @@ var Toolbar = /** @class */ (function () {
      * @param {IUpdateItemsModel} args - specifies the arguments.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.updateItem = function (args) {
         var item = this.tools[args.updateItem.toLocaleLowerCase()];
@@ -349,7 +298,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.getBaseToolbar = function () {
         return this.baseToolbar;
@@ -361,7 +310,7 @@ var Toolbar = /** @class */ (function () {
      * @param {number} index - specifies the index value.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.addTBarItem = function (args, index) {
         args.baseToolbar.toolbarObj.addItems([args.baseToolbar.getObject(args.updateItem, 'toolbar')], index);
@@ -375,7 +324,7 @@ var Toolbar = /** @class */ (function () {
      * @param {boolean} muteToolbarUpdate - specifies the toolbar.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.enableTBarItems = function (baseToolbar, items, isEnable, muteToolbarUpdate) {
         var trgItems = getTBarItemsIndex(getCollection(items), baseToolbar.toolbarObj.items);
@@ -386,7 +335,7 @@ var Toolbar = /** @class */ (function () {
                 baseToolbar.toolbarObj.enableItems(item, isEnable);
             }
         }
-        if (!select('.e-rte-srctextarea', this.parent.element) && !muteToolbarUpdate) {
+        if (!select('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA, this.parent.element) && !muteToolbarUpdate) {
             updateUndoRedoStatus(baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
         }
     };
@@ -396,7 +345,7 @@ var Toolbar = /** @class */ (function () {
      * @param {string} items - specifies the string value.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.removeTBarItems = function (items) {
         if (isNullOrUndefined(this.baseToolbar.toolbarObj)) {
@@ -414,7 +363,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.getExpandTBarPopHeight = function () {
         var popHeight = 0;
@@ -437,7 +386,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.getToolbarHeight = function () {
         return this.tbElement.offsetHeight;
@@ -447,7 +396,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.getToolbarElement = function () {
         return select('.' + classes.CLS_TOOLBAR, this.parent.element);
@@ -457,7 +406,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.refreshToolbarOverflow = function () {
         this.parent.element.classList.remove(classes.CLS_RTL);
@@ -495,7 +444,7 @@ var Toolbar = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.destroy = function () {
         if (isNOU(this.parent)) {
@@ -514,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();
@@ -559,25 +495,24 @@ var Toolbar = /** @class */ (function () {
     };
     Toolbar.prototype.toolbarClickHandler = function (e) {
         var trg = closest(e.originalEvent.target, '.e-hor-nav');
+        this.adjustContentHeight(trg, false);
+    };
+    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: '' });
-            }
-            if (!trg.classList.contains('e-nav-active')) {
-                removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
-                this.parent.setContentHeight('toolbar', false);
+            var hasActiveClass = trg.classList.contains('e-nav-active');
+            var isExpand = isKeyboard ? (hasActiveClass ? false : true) : (hasActiveClass ? true : false);
+            if (isExpand) {
+                addClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
             }
             else {
-                addClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
-                this.parent.setContentHeight('toolbar', true);
+                removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
             }
+            this.parent.setContentHeight('Toolbar', isExpand);
         }
         else if (Browser.isDevice || this.parent.inlineMode.enable) {
             this.isToolbar = true;
         }
-        if (isNOU(trg) && this.parent.toolbarSettings.type === ToolbarType.Expand) {
+        if (isNOU(trg) && this.parent.toolbarSettings.type === ToolbarType.Expand && this.parent.toolbarModule.getExpandTBarPopHeight() === 0) {
             removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
         }
     };
@@ -597,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);
@@ -622,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);
@@ -657,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.
@@ -665,7 +599,7 @@ var Toolbar = /** @class */ (function () {
      * @param {RichTextEditorModel} e - specifies the string value
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.onPropertyChanged = function (e) {
         if (!isNullOrUndefined(e.newProp.inlineMode)) {
@@ -678,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;
         }
@@ -696,7 +635,7 @@ var Toolbar = /** @class */ (function () {
             this.addEventListener();
             this.renderToolbar();
             this.parent.wireScrollElementsEvents();
-            if (!select('.e-rte-srctextarea', this.parent.element)) {
+            if (!select('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA, this.parent.element)) {
                 updateUndoRedoStatus(this.baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
             }
             this.parent.notify(events.dynamicModule, {});

package/src/rich-text-editor/actions/xhtml-validation.d.ts

@@ -13,7 +13,7 @@ export declare class XhtmlValidation {
      * @param {string} currentValue - specifies the string value.
      * @param {number} valueLength - specifies the length of the current value.
      * @returns {void}
-
+     * @deprecated
      */
     selfEncloseValidation(currentValue: string, valueLength?: number): string;
     private clean;

package/src/rich-text-editor/actions/xhtml-validation.js

@@ -37,7 +37,7 @@ var XhtmlValidation = /** @class */ (function () {
      * @param {string} currentValue - specifies the string value.
      * @param {number} valueLength - specifies the length of the current value.
      * @returns {void}
-
+     * @deprecated
      */
     XhtmlValidation.prototype.selfEncloseValidation = function (currentValue, valueLength) {
         if (valueLength === 0 && currentValue.indexOf('table') < 0 && currentValue.indexOf('img') < 0 &&