@syncfusion/ej2-richtexteditor 24.1.41 → 24.1.43-569781

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,12 +147,10 @@ export declare class Toolbar {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     private moduleDestroy;
-    private scrollHandler;
-    private getDOMVisibility;
     private mouseDownHandler;
     private focusChangeHandler;
     private dropDownBeforeOpenHandler;
@@ -170,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

@@ -56,6 +56,9 @@ var Toolbar = /** @class */ (function () {
                 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 () {
@@ -64,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,
@@ -147,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 () {
@@ -276,7 +221,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.addFixedTBarClass = function () {
         addClass([this.tbElement], [classes.CLS_TB_FIXED]);
@@ -286,7 +231,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.removeFixedTBarClass = function () {
         removeClass([this.tbElement], [classes.CLS_TB_FIXED]);
@@ -307,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()];
@@ -353,7 +298,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.getBaseToolbar = function () {
         return this.baseToolbar;
@@ -365,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);
@@ -379,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);
@@ -400,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)) {
@@ -418,7 +363,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.getExpandTBarPopHeight = function () {
         var popHeight = 0;
@@ -441,7 +386,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.getToolbarHeight = function () {
         return this.tbElement.offsetHeight;
@@ -451,7 +396,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.getToolbarElement = function () {
         return select('.' + classes.CLS_TOOLBAR, this.parent.element);
@@ -461,7 +406,7 @@ var Toolbar = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.refreshToolbarOverflow = function () {
         this.parent.element.classList.remove(classes.CLS_RTL);
@@ -499,7 +444,7 @@ var Toolbar = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     Toolbar.prototype.destroy = function () {
         if (isNOU(this.parent)) {
@@ -518,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();
@@ -567,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) {
@@ -580,12 +507,12 @@ 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;
         }
-        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]);
         }
     };
@@ -605,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);
@@ -630,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);
@@ -665,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.
@@ -673,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)) {
@@ -686,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/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 &&