@syncfusion/ej2-richtexteditor 24.2.9 → 25.1.35

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

@@ -28,7 +28,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, EventHandler, Complex, Browser, addClass, select, detach } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Complex, Browser, addClass, detach } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, 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';
@@ -97,6 +97,14 @@ var RichTextEditor = /** @class */ (function (_super) {
                 member: 'image',
                 args: [this, this.serviceLocator]
             });
+            modules.push({
+                member: 'audio',
+                args: [this, this.serviceLocator]
+            });
+            modules.push({
+                member: 'video',
+                args: [this, this.serviceLocator]
+            });
             if (this.quickToolbarSettings.enable) {
                 modules.push({ member: 'quickToolbar', args: [this, this.serviceLocator] });
             }
@@ -110,14 +118,6 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.editorMode === 'HTML') {
             modules.push({ member: 'htmlEditor', args: [this, this.serviceLocator] });
             modules.push({ member: 'pasteCleanup', args: [this, this.serviceLocator] });
-            modules.push({
-                member: 'audio',
-                args: [this, this.serviceLocator]
-            });
-            modules.push({
-                member: 'video',
-                args: [this, this.serviceLocator]
-            });
             modules.push({
                 member: 'formatPainter',
                 args: [this]
@@ -149,7 +149,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         else {
             if (this.getToolbar()) {
                 removeClass(this.getToolbar().querySelectorAll('.' + classes.CLS_ACTIVE), classes.CLS_ACTIVE);
-                removeClass([this.getToolbar()], [classes.CLS_TB_FLOAT, classes.CLS_TB_ABS_FLOAT]);
+                removeClass([this.getToolbar().parentElement], [classes.CLS_TB_FLOAT]);
             }
             addClass([this.element], classes.CLS_DISABLED);
             this.element.tabIndex = -1;
@@ -570,7 +570,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             (this.toolbarSettings.items.indexOf('Undo') > -1 && this.toolbarSettings.items.indexOf('Redo') > -1)) {
             this.disableToolbarItem(['Undo', 'Redo']);
         }
-        this.setContentHeight();
+        this.setContentHeight('Init');
         if (this.value !== null) {
             this.valueContainer.defaultValue = this.value;
         }
@@ -776,8 +776,15 @@ var RichTextEditor = /** @class */ (function (_super) {
                 case 'toolbar-focus':
                     if (this.toolbarSettings.enable && this.getToolbarElement()) {
                         var firstActiveItem = this.getToolbarElement().querySelector('.e-toolbar-item:not(.e-overlay)[title]');
-                        firstActiveItem.firstElementChild.removeAttribute('tabindex');
-                        firstActiveItem.firstElementChild.focus();
+                        var quickToolbarElem = this.getRenderedQuickToolbarElem();
+                        if (quickToolbarElem) {
+                            firstActiveItem = quickToolbarElem.querySelector('.e-toolbar-item:not(.e-overlay)[title]');
+                        }
+                        if (firstActiveItem) {
+                            var firstChild = firstActiveItem.firstElementChild;
+                            firstChild.removeAttribute('tabindex');
+                            firstChild.focus();
+                        }
                     }
                     break;
                 case 'escape':
@@ -994,6 +1001,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                     _this.notify(events.pasteClean, { args: e });
                 }
                 else {
+                    console.warn('[WARNING] :: Module "pasteCleanup" is not available in RichTextEditor component! You either misspelled the module name or forgot to load it.');
                     var args_2 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };
                     var value = null;
                     var htmlValue = false;
@@ -1288,7 +1296,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                     break;
                 case 'height':
                     this.setHeight(newProp[prop]);
-                    this.setContentHeight();
+                    this.setContentHeight('Init');
                     this.autoResize();
                     break;
                 case 'readonly':
@@ -1335,11 +1343,11 @@ var RichTextEditor = /** @class */ (function (_super) {
                     break;
                 case 'inlineMode':
                     this.notify(events.modelChanged, { module: 'quickToolbar', newProp: newProp, oldProp: oldProp });
-                    this.setContentHeight();
+                    this.setContentHeight('Init');
                     break;
                 case 'toolbarSettings':
                     this.notify(events.modelChanged, { module: 'toolbar', newProp: newProp, oldProp: oldProp });
-                    this.setContentHeight();
+                    this.setContentHeight('Init');
                     break;
                 case 'maxLength':
                     if (this.showCharCount) {
@@ -1498,7 +1506,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.inputElement.setAttribute('placeholder', this.placeholder);
             }
         }
-        if (this.placeholder && this.iframeSettings.enable) {
+        if (this.placeholder && this.iframeSettings.enable && this.inputElement) {
             if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
                 ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&
                     this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
@@ -1845,12 +1853,9 @@ var RichTextEditor = /** @class */ (function (_super) {
      */
     RichTextEditor.prototype.setContentHeight = function (target, isExpand) {
         var heightValue;
-        var topValue = 0;
         var rteHeightPercent;
         var heightPercent = typeof (this.height) === 'string' && this.height.indexOf('%') > -1;
-        var cntEle = (this.sourceCodeModule.getPanel() &&
-            this.sourceCodeModule.getPanel().parentElement.style.display === 'block') ? this.sourceCodeModule.getPanel().parentElement :
-            this.contentModule.getPanel();
+        var cntEle = this.contentModule.getPanel();
         var rteHeight = this.element.offsetHeight;
         if (rteHeight === 0 && this.height !== 'auto' && !this.getToolbar()) {
             rteHeight = parseInt(this.height, 10);
@@ -1862,39 +1867,36 @@ var RichTextEditor = /** @class */ (function (_super) {
         var rzHandle = this.element.querySelector('.' + classes.CLS_RTE_RES_HANDLE);
         var rzHeight = this.enableResize ? (!isNOU(rzHandle) ? (rzHandle.offsetHeight + 8) : 0) : 0;
         var expandPopHeight = this.getToolbar() ? this.toolbarModule.getExpandTBarPopHeight() : 0;
-        if (this.toolbarSettings.type === ToolbarType.Expand && isExpand) {
-            heightValue = (this.height === 'auto' && rzHeight === 0) ? 'auto' : rteHeight - (tbHeight + expandPopHeight + rzHeight) + 'px';
-            topValue = (!this.toolbarSettings.enableFloating) ? expandPopHeight : 0;
+        if (target && target !== 'Toolbar' && expandPopHeight && this.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0) {
+            tbHeight = tbHeight - expandPopHeight;
         }
-        else {
-            if (this.height === 'auto' && !(this.element.classList.contains('e-rte-full-screen')) && !this.isResizeInitialized) {
-                heightValue = 'auto';
+        if (this.toolbarSettings.type === ToolbarType.Expand) {
+            if (isExpand) {
+                heightValue = (this.height === 'auto' && this.element.style.height === 'auto') ? 'auto' : rteHeight - (tbHeight + expandPopHeight + rzHeight) + 'px';
             }
             else {
-                heightValue = heightPercent && rteHeightPercent ? rteHeightPercent : rteHeight - (tbHeight + rzHeight) + 'px';
+                heightValue = (this.height === 'auto' && this.element.style.height === 'auto') ? 'auto' : rteHeight - (tbHeight - expandPopHeight + rzHeight) + 'px';
             }
         }
-        if (target !== 'windowResize' || heightPercent) {
-            if (this.iframeSettings.enable) {
-                if (heightValue !== 'auto') {
-                    setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
+        else {
+            heightValue = (this.height === 'auto' && this.element.style.height === 'auto') ? 'auto' : rteHeight - tbHeight + 'px';
+        }
+        var finalHeight = heightPercent && rteHeightPercent ? rteHeightPercent : heightValue;
+        switch (target) {
+            case 'Init':
+            case 'Toolbar':
+            case 'WindowResize':
+            case 'Refresh':
+                if (this.element.querySelectorAll('.e-source-content').length > 0 && this.element.querySelector('.e-source-content').style.display === 'block') {
+                    setStyleAttribute(this.element.querySelector('.e-source-content'), { height: finalHeight });
                 }
-            }
-            else {
-                if (target === 'windowResize' && heightPercent) {
-                    //cntEle hide the borderBottom of RichTextEditor. so removed the 2px of cntEle height.
-                    heightValue = parseInt(heightValue, 10) - 2 + 'px';
+                else {
+                    setStyleAttribute(cntEle, { height: finalHeight });
                 }
-                setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
-            }
-        }
-        if (this.iframeSettings.enable && target === 'sourceCode') {
-            var codeElement = select('.' + classes.CLS_RTE_CONTENT, this.element);
-            setStyleAttribute(codeElement, { height: heightValue, marginTop: topValue + 'px' });
-        }
-        if (this.toolbarSettings.enableFloating && this.getToolbar() && !this.inlineMode.enable) {
-            var tbWrapHeight = (isExpand ? (tbHeight + expandPopHeight) : tbHeight) + 'px';
-            setStyleAttribute(this.getToolbar().parentElement, { height: tbWrapHeight });
+                break;
+            case 'Resize':
+                setStyleAttribute(cntEle, { height: finalHeight });
+                break;
         }
         if (rzHeight === 0) {
             this.autoResize();
@@ -2097,18 +2099,14 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.resizeHandler = function () {
         var isExpand = false;
         if (!document.body.contains(this.element)) {
-            document.defaultView.removeEventListener('resize', this.onResizeHandler, true);
+            document.defaultView.removeEventListener('resize', debounce(this.onResizeHandler, 10), true);
             return;
         }
         if (this.toolbarSettings.enable && !this.inlineMode.enable) {
             this.toolbarModule.refreshToolbarOverflow();
             isExpand = this.toolbarModule.baseToolbar.toolbarObj.element.classList.contains(classes.CLS_EXPAND_OPEN);
         }
-        if (this.iframeSettings.enable !== true) {
-            // When resize the window,border bottom of cntEle and this.element border visible separatly.so none the cntEle borderBottom.
-            this.contentModule.getPanel().style.borderBottom = 'none';
-        }
-        this.setContentHeight('windowResize', isExpand);
+        this.setContentHeight('WindowResize', isExpand);
         this.notify(events.windowResize, null);
     };
     RichTextEditor.prototype.scrollHandler = function (e) {
@@ -2244,6 +2242,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.isRTE = false;
         }
         this.notify(events.docClick, { args: e });
+        var hideQuickToolbarChecker = this.quickToolbarModule && !this.inlineMode.enable && isNOU(this.quickToolbarModule.inlineQTBar);
+        if ((hideQuickToolbarChecker && !isNOU(closest(target, '.' + 'e-toolbar-wrapper'))) || (hideQuickToolbarChecker && (!isNOU(closest(target, '.e-rte-table-resize')) || !isNOU(closest(target, '.e-table-box'))))) {
+            this.quickToolbarModule.hideQuickToolbars();
+        }
         if (Browser.info.name !== 'msie' && e.detail > 3) {
             e.preventDefault();
         }
@@ -2393,9 +2395,10 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.triggerEditArea(e.originalEvent);
     };
     RichTextEditor.prototype.contextHandler = function (e) {
-        var closestElem = closest(e.target, 'a, table, img');
+        var closestElem = closest(e.target, 'a, table, img, video, audio');
         if (this.inlineMode.onSelection === false || (!isNOU(closestElem) && this.inputElement.contains(closestElem)
-            && (closestElem.tagName === 'IMG' || closestElem.tagName === 'TABLE' || closestElem.tagName === 'A'))) {
+            && (closestElem.tagName === 'IMG' || closestElem.tagName === 'TABLE' || closestElem.tagName === 'A' ||
+                closestElem.tagName.toLowerCase() === 'video' || closestElem.tagName.toLowerCase() === 'audio'))) {
             e.preventDefault();
         }
     };
@@ -2429,10 +2432,21 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
     };
     RichTextEditor.prototype.setAutoHeight = function (element) {
-        if (!isNOU(element)) {
+        if (!isNOU(element) && !this.iframeSettings.enable) {
             element.style.height = this.inputElement.scrollHeight + 'px';
             element.style.overflow = 'hidden';
         }
+        else if (!isNOU(element) && !isNOU(element.parentElement) && this.iframeSettings.enable) {
+            var newRange = this.getRange();
+            element.style.height = 'auto';
+            var newHeight = element.contentDocument.body.scrollHeight + 'px';
+            element.style.height = newHeight;
+            element.style.overflow = 'hidden';
+            // 16 px added for padding doesn't affect the editor height
+            if (newRange.startContainer.nodeName !== '#text' && newRange.startContainer.nodeName !== 'BODY' && window.innerHeight < newRange.startContainer.getBoundingClientRect().top + element.getBoundingClientRect().top + 16) {
+                newRange.startContainer.scrollIntoView(false);
+            }
+        }
     };
     RichTextEditor.prototype.wireEvents = function () {
         this.element.addEventListener('focusin', this.onFocusHandler, true);
@@ -2487,7 +2501,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         EventHandler.add(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler, this);
         this.wireContextEvent();
         this.formatter.editorManager.observer.on(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown, this);
-        this.element.ownerDocument.defaultView.addEventListener('resize', this.onResizeHandler, true);
+        this.element.ownerDocument.defaultView.addEventListener('resize', debounce(this.onResizeHandler, 10), true);
         if (this.iframeSettings.enable) {
             EventHandler.add(this.inputElement, 'focusin', this.focusHandler, this);
             EventHandler.add(this.inputElement, 'focusout', this.blurHandler, this);
@@ -2553,7 +2567,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.formatter) {
             this.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown);
         }
-        this.element.ownerDocument.defaultView.removeEventListener('resize', this.onResizeHandler, true);
+        this.element.ownerDocument.defaultView.removeEventListener('resize', debounce(this.onResizeHandler, 10), true);
         if (this.iframeSettings.enable) {
             EventHandler.remove(this.inputElement, 'focusin', this.focusHandler);
             EventHandler.remove(this.inputElement, 'focusout', this.blurHandler);
@@ -2618,6 +2632,15 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
     };
+    RichTextEditor.prototype.getRenderedQuickToolbarElem = function () {
+        var quickToolbars = this.quickToolbarModule.getQuickToolbarInstance();
+        for (var i = 0; i < quickToolbars.length; i++) {
+            if (quickToolbars[i] && quickToolbars[i].isRendered) {
+                return quickToolbars[i].element;
+            }
+        }
+        return null;
+    };
     __decorate([
         Complex({}, ToolbarSettings)
     ], RichTextEditor.prototype, "toolbarSettings", void 0);

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

@@ -264,7 +264,12 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                         }
                         case 'bulletFormatList':
                         case 'numberFormatList': {
-                            removeClass([e.tbElements[j]], [classes.CLS_ACTIVE]);
+                            if (value !== '') {
+                                addClass([e.tbElements[j]], [classes.CLS_ACTIVE]);
+                            }
+                            else {
+                                removeClass([e.tbElements[j]], [classes.CLS_ACTIVE]);
+                            }
                         }
                     }
                 }
@@ -506,7 +511,8 @@ export function updateTextNode(value, rteObj) {
                 imageElm[i].classList.add(classes.CLS_RTE_IMAGE);
             }
             if (!(imageElm[i].classList.contains(classes.CLS_IMGINLINE) ||
-                imageElm[i].classList.contains(classes.CLS_IMGBREAK))) {
+                imageElm[i].classList.contains(classes.CLS_IMGBREAK)) &&
+                !(imageElm[i].classList.contains('e-imgleft') || imageElm[i].classList.contains('e-imgright') || imageElm[i].classList.contains('e-imgcenter'))) {
                 imageElm[i].classList.add(classes.CLS_IMGINLINE);
             }
         }

package/src/rich-text-editor/models/default-locale.js

@@ -69,7 +69,7 @@ export var defaultLocale = {
     'linkTooltipLabel': 'Title',
     'linkWebUrl': 'Web address',
     'linkTitle': 'Enter a title',
-    'linkurl': 'http://example.com',
+    'linkurl': 'https://example.com',
     'linkOpenInNewWindow': 'Open link in new window',
     'linkHeader': 'Insert Link',
     'dialogInsert': 'Insert',
@@ -92,9 +92,9 @@ export var defaultLocale = {
     'imageAlternateText': 'Alternate Text',
     'alternateHeader': 'Alternative Text',
     'browse': 'Browse',
-    'imageUrl': 'http://example.com/image.png',
-    'audioUrl': 'http://example.com/audio.mp3',
-    'videoUrl': 'http://example.com/video.mp4',
+    'imageUrl': 'https://example.com/image.png',
+    'audioUrl': 'https://example.com/audio.mp3',
+    'videoUrl': 'https://example.com/video.mp4',
     'webUrl': 'Web URL',
     'embedUrl': 'Embed Code',
     'imageCaption': 'Caption',
@@ -105,7 +105,7 @@ export var defaultLocale = {
     'videoHeight': 'Height',
     'videoWidth': 'Width',
     'textPlaceholder': 'Enter text',
-    'inserttablebtn': 'Insert table',
+    'inserttablebtn': 'Insert Table',
     'tabledialogHeader': 'Insert Table',
     'tableWidth': 'Width',
     'cellpadding': 'Cell Padding',
@@ -119,7 +119,7 @@ export var defaultLocale = {
     'createTable': 'Create Table',
     'removeTable': 'Remove Table',
     'tableHeader': 'Header Row',
-    'tableRemove': 'Delete',
+    'tableRemove': 'Delete Table',
     'tableCellBackground': 'Table Cell Background',
     'tableEditProperties': 'Table Edit Properties',
     'styles': 'Styles',
@@ -181,11 +181,11 @@ export var defaultLocale = {
     'fontNameTimesNewRoman': 'Times New Roman',
     'fontNameVerdana': 'Verdana',
     'numberFormatListNumber': 'Number',
-    'numberFormatListLowerAlpha': 'LowerAlpha',
-    'numberFormatListUpperAlpha': 'UpperAlpha',
-    'numberFormatListLowerRoman': 'LowerRoman',
-    'numberFormatListUpperRoman': 'UpperRoman',
-    'numberFormatListLowerGreek': 'LowerGreek',
+    'numberFormatListLowerAlpha': 'Lower Alpha',
+    'numberFormatListUpperAlpha': 'Upper Alpha',
+    'numberFormatListLowerRoman': 'Lower Roman',
+    'numberFormatListUpperRoman': 'Upper Roman',
+    'numberFormatListLowerGreek': 'Lower Greek',
     'bulletFormatListDisc': 'Disc',
     'bulletFormatListCircle': 'Circle',
     'bulletFormatListSquare': 'Square',
@@ -199,7 +199,10 @@ export var defaultLocale = {
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',
     'linkAriaLabel': 'Open in new window',
-    'unsupportedImage': 'Unsupported file format'
+    'unsupportedImage': 'Unsupported file format',
+    'mergecells': 'Merge cells',
+    'verticalsplit': 'Vertical split',
+    'horizontalsplit': 'Horizontal split'
 };
 export var toolsLocale = {
     'alignments': 'alignments',

package/src/rich-text-editor/models/toolbar-settings-model.d.ts

@@ -827,7 +827,7 @@ export interface PasteCleanupSettingsModel {
     /**
      * Specifies the allowed style properties when pasting in RichTextEditor.
      *
-     * @default ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', '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', 'top', 'vertical-align', 'visibility', 'white-space', 'width']
+     * @default ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', '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-transform', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width']
      */
     allowedStyleProps?: string[];
 

package/src/rich-text-editor/models/toolbar-settings.d.ts

@@ -736,7 +736,7 @@ export declare class PasteCleanupSettings extends ChildProperty<PasteCleanupSett
     /**
      * Specifies the allowed style properties when pasting in RichTextEditor.
      *
-     * @default ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', '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', 'top', 'vertical-align', 'visibility', 'white-space', 'width']
+     * @default ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', '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-transform', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width']
      */
     allowedStyleProps: string[];
     /**

package/src/rich-text-editor/models/toolbar-settings.js

@@ -361,7 +361,7 @@ var PasteCleanupSettings = /** @class */ (function (_super) {
         Property(null)
     ], PasteCleanupSettings.prototype, "deniedAttrs", void 0);
     __decorate([
-        Property(['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', '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', 'top', 'vertical-align', 'visibility', 'white-space', 'width'])
+        Property(['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', '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-transform', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width'])
     ], PasteCleanupSettings.prototype, "allowedStyleProps", void 0);
     __decorate([
         Property(null)

package/src/rich-text-editor/renderer/iframe-content-renderer.js

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 import { ContentRender } from '../renderer/content-renderer';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import { getEditValue } from '../base/util';
-var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image, .e-rte-video {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-audio {border: 0;cursor: pointer;display:\n                        block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;\n                    margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}\n                .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}\n                .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}\n                .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark, span.e-rte-videoboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n                .e-rte-placeholder::before { content: attr(placeholder); opacity: 0.54; overflow: hidden; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n            </style>\n        </head>";
+var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image, .e-rte-video {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-audio {border: 0;cursor: pointer;display:\n                        block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;\n                    margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}\n                .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}\n                .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}\n                .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark, span.e-rte-videoboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-rte-img-caption.e-imgleft .e-img-inner { float: left; text-align: left; }\n                .e-rte-img-caption.e-imgright .e-img-inner { float: right; text-align: right; }\n                .e-rte-img-caption.e-imgleft .e-img-wrap, .e-rte-img-caption.e-imgright .e-img-wrap { display: contents; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-rte-img-caption .e-rte-image.e-imgright { margin-left: auto; margin-right: 0; }\n                .e-rte-img-caption .e-rte-image.e-imgleft { margin: 0; }\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n                .e-rte-placeholder::before { content: attr(placeholder); opacity: 0.54; overflow: hidden; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n                li ol, li ul { margin-block-start: 10px;}\n            </style>\n        </head>";
 /**
  * Content module is used to render Rich Text Editor content
  *
@@ -44,6 +44,7 @@ var IframeContentRender = /** @class */ (function (_super) {
             styles: 'display:block;',
             attrs: { 'srcdoc': iFrameContent }
         });
+        iframe.setAttribute("role", "none");
         this.setPanel(iframe);
         rteObj.element.appendChild(iframe);
         iframe.contentDocument.body.id = this.parent.getID() + '_rte-edit-view';

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

@@ -30,7 +30,6 @@ export declare class Image {
     private isAllowedTypes;
     private pageX;
     private pageY;
-    private mouseX;
     private dialogRenderObj;
     private deletedImg;
     private changedWidthValue;
@@ -38,6 +37,8 @@ export declare class Image {
     private inputWidthValue;
     private inputHeightValue;
     private removingImgName;
+    private currentResizeHandler;
+    private aspectRatio;
     private constructor();
     protected addEventListener(): void;
     protected removeEventListener(): void;
@@ -56,9 +57,15 @@ export declare class Image {
     private imgResizePos;
     private calcPos;
     private setAspectRatio;
+    private setImageWidth;
+    private setImageHeight;
+    private removeImageHeight;
+    private getImageDimension;
     private pixToPerc;
     private imgDupMouseMove;
     private resizing;
+    private getResizeFactor;
+    private findAspectRatio;
     private cancelResizeAction;
     private resizeImgDupPos;
     private resizeBtnInit;