@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.41-569421

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 &&