@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.41-569421

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

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { Property, ChildProperty, Complex, Event } from '@syncfusion/ej2-base';
 import { AjaxSettings, ContextMenuSettings } from '@syncfusion/ej2-filemanager';
 import { DetailsViewSettings, NavigationPaneSettings } from '@syncfusion/ej2-filemanager';
@@ -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/audio-module.d.ts

@@ -34,6 +34,7 @@ export declare class Audio {
     private onToolbarAction;
     private onKeyUp;
     private onKeyDown;
+    private handleSelectAll;
     private openDialog;
     private showDialog;
     private closeDialog;
@@ -63,7 +64,7 @@ export declare class Audio {
      * @method destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     /**

package/src/rich-text-editor/renderer/audio-module.js

@@ -39,6 +39,7 @@ var Audio = /** @class */ (function () {
         this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
         this.parent.on(events.insertCompleted, this.showAudioQuickToolbar, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
+        this.parent.on(events.iframeMouseDown, this.closeDialog, this);
     };
     Audio.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -57,6 +58,7 @@ var Audio = /** @class */ (function () {
         this.parent.off(events.editAreaClick, this.editAreaClickHandler);
         this.parent.off(events.insertCompleted, this.showAudioQuickToolbar);
         this.parent.off(events.destroy, this.removeEventListener);
+        this.parent.off(events.iframeMouseDown, this.closeDialog);
         if (!isNullOrUndefined(this.contentModule)) {
             EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.touchStart);
             EventHandler.remove(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.audioClick);
@@ -239,6 +241,13 @@ var Audio = /** @class */ (function () {
                 originalEvent.preventDefault();
                 break;
         }
+        if (originalEvent.ctrlKey && originalEvent.key === 'a') {
+            this.handleSelectAll();
+        }
+    };
+    Audio.prototype.handleSelectAll = function () {
+        var audioFocusNodes = this.parent.inputElement.querySelectorAll('.' + classes.CLS_AUD_FOCUS);
+        removeClass(audioFocusNodes, classes.CLS_AUD_FOCUS);
     };
     Audio.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
         var range;
@@ -298,7 +307,7 @@ var Audio = /** @class */ (function () {
             this.parent.formatter.saveData();
         }
         e.selection.restore();
-        this.parent.formatter.process(this.parent, e.args, e.args, {
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, {
             selectNode: e.selectNode,
             subCommand: e.args.item.subCommand
         });
@@ -379,6 +388,7 @@ var Audio = /** @class */ (function () {
             if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
             }
             else {
+                this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
                 this.dialogObj.hide({ returnValue: true });
                 this.parent.isBlur = true;
                 dispatchEvent(this.parent.element, 'focusout');
@@ -393,6 +403,9 @@ var Audio = /** @class */ (function () {
                 this.prevSelectedAudEle.style.outline = '';
             }
         }
+        if (this.parent.inlineMode.enable && target && this.dialogObj && !closest(target, '#' + this.dialogObj.element.id)) {
+            this.dialogObj.hide();
+        }
     };
     Audio.prototype.alignmentSelect = function (e) {
         var item = e.item;
@@ -425,7 +438,7 @@ var Audio = /** @class */ (function () {
         }
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Break';
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Audio.prototype.inline = function (e) {
         if (e.selectNode[0].nodeName !== 'AUDIO') {
@@ -433,7 +446,7 @@ var Audio = /** @class */ (function () {
         }
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Inline';
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, subCommand: subCommand });
+        this.parent.formatter.process(this.parent, e.args, e.args.originalEvent, { selectNode: e.selectNode, subCommand: subCommand });
     };
     Audio.prototype.editAreaClickHandler = function (e) {
         if (this.parent.readonly) {
@@ -573,7 +586,7 @@ var Audio = /** @class */ (function () {
                     _this.uploadObj.removing();
                 }
                 _this.parent.isBlur = false;
-                if (event && event.event.returnValue) {
+                if (event && !isNOU(event.event) && event.event.returnValue) {
                     if (_this.parent.editorMode === 'HTML') {
                         selection.restore();
                     }
@@ -640,6 +653,11 @@ var Audio = /** @class */ (function () {
                 }
             }
         });
+        if (e.selectNode && this.isAudioElem(e.selectNode[0])) {
+            var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
+            var sourceElement = e.selectNode[0].querySelector('source');
+            this.inputUrl.value = sourceElement.src.match(regex) ? sourceElement.src : '';
+        }
         audioUrl.appendChild(this.inputUrl);
         return audioUrl;
     };
@@ -833,7 +851,7 @@ var Audio = /** @class */ (function () {
      * @method destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     /* eslint-enable */
     Audio.prototype.destroy = function () {

package/src/rich-text-editor/renderer/content-renderer.d.ts

@@ -4,7 +4,7 @@ import { ServiceLocator } from '../services/service-locator';
  * Content module is used to render Rich Text Editor content
  *
  * @hidden
-
+ * @deprecated
  */
 export declare class ContentRender implements IRenderer {
     protected contentPanel: Element;
@@ -24,7 +24,7 @@ export declare class ContentRender implements IRenderer {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     renderPanel(): void;
     /**
@@ -32,7 +32,7 @@ export declare class ContentRender implements IRenderer {
      *
      * @returns {Element} - specifies the element.
      * @hidden
-
+     * @deprecated
      */
     getPanel(): Element;
     /**
@@ -40,7 +40,7 @@ export declare class ContentRender implements IRenderer {
      *
      * @returns {Element} - specifies the return element.
      * @hidden
-
+     * @deprecated
      */
     getEditPanel(): Element;
     /**
@@ -55,7 +55,7 @@ export declare class ContentRender implements IRenderer {
      * @param {Element} panel - specifies the panel element.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     setPanel(panel: Element): void;
     /**
@@ -63,7 +63,7 @@ export declare class ContentRender implements IRenderer {
      *
      * @returns {Document} - specifies the document.
      * @hidden
-
+     * @deprecated
      */
     getDocument(): Document;
 }

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

@@ -3,7 +3,7 @@ import { getEditValue } from '../base/util';
  * Content module is used to render Rich Text Editor content
  *
  * @hidden
-
+ * @deprecated
  */
 var ContentRender = /** @class */ (function () {
     /**
@@ -22,7 +22,7 @@ var ContentRender = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.renderPanel = function () {
         var rteObj = this.parent;
@@ -45,7 +45,7 @@ var ContentRender = /** @class */ (function () {
      *
      * @returns {Element} - specifies the element.
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.getPanel = function () {
         return this.contentPanel;
@@ -55,7 +55,7 @@ var ContentRender = /** @class */ (function () {
      *
      * @returns {Element} - specifies the return element.
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.getEditPanel = function () {
         return this.editableElement;
@@ -75,7 +75,7 @@ var ContentRender = /** @class */ (function () {
      * @param {Element} panel - specifies the panel element.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.setPanel = function (panel) {
         this.contentPanel = panel;
@@ -85,7 +85,7 @@ var ContentRender = /** @class */ (function () {
      *
      * @returns {Document} - specifies the document.
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.getDocument = function () {
         return this.getEditPanel().ownerDocument;

package/src/rich-text-editor/renderer/dialog-renderer.d.ts

@@ -7,6 +7,7 @@ export declare class DialogRenderer {
     dialogObj: Dialog;
     private dialogEle;
     private parent;
+    private outsideClickClosedBy;
     constructor(parent?: IRichTextEditor);
     protected addEventListener(): void;
     protected removeEventListener(): void;
@@ -16,13 +17,14 @@ export declare class DialogRenderer {
      * @param {DialogModel} e - specifies the dialog model.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     render(e: DialogModel): Dialog;
     private beforeOpen;
     private handleEnterKeyDown;
     private beforeOpenCallback;
     private open;
+    private documentClickClosedBy;
     private beforeClose;
     private getDialogPosition;
     /**
@@ -31,7 +33,7 @@ export declare class DialogRenderer {
      * @param {Object} args - specifies the arguments.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     close(args: Object): void;
     private moduleDestroy;

package/src/rich-text-editor/renderer/dialog-renderer.js

@@ -15,6 +15,7 @@ var DialogRenderer = /** @class */ (function () {
         }
         this.parent.on(events.moduleDestroy, this.moduleDestroy, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
+        this.parent.on(events.documentClickClosedBy, this.documentClickClosedBy, this);
     };
     DialogRenderer.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -22,6 +23,7 @@ var DialogRenderer = /** @class */ (function () {
         }
         this.parent.off(events.destroy, this.removeEventListener);
         this.parent.off(events.moduleDestroy, this.moduleDestroy);
+        this.parent.off(events.documentClickClosedBy, this.documentClickClosedBy);
     };
     /**
      * dialog render method
@@ -29,13 +31,17 @@ var DialogRenderer = /** @class */ (function () {
      * @param {DialogModel} e - specifies the dialog model.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DialogRenderer.prototype.render = function (e) {
         var dlgObj;
         e.beforeOpen = this.beforeOpen.bind(this);
         e.open = this.open.bind(this);
-        e.position = { X: 'center', Y: this.getDialogPosition() };
+        e.position = {
+            X: 'center',
+            Y: (e.target !== 'string' && e.target.nodeName === 'BODY' &&
+                !isNOU(e.position)) ? e.position.Y : this.getDialogPosition()
+        };
         if (isNOU(e.close)) {
             e.close = this.close.bind(this);
         }
@@ -68,10 +74,14 @@ var DialogRenderer = /** @class */ (function () {
     DialogRenderer.prototype.open = function (args) {
         this.parent.trigger(events.dialogOpen, args);
     };
+    DialogRenderer.prototype.documentClickClosedBy = function (args) {
+        this.outsideClickClosedBy = args.closedBy;
+    };
     DialogRenderer.prototype.beforeClose = function (args) {
         if (this.dialogEle) {
             this.dialogEle.removeEventListener('keydown', this.handleEnterKeyDown);
         }
+        args.closedBy = this.outsideClickClosedBy === 'outside click' ? this.outsideClickClosedBy : args.closedBy;
         this.parent.trigger(events.beforeDialogClose, args, function (closeArgs) {
             if (!closeArgs.cancel) {
                 if (closeArgs.container.classList.contains('e-popup-close')) {
@@ -79,11 +89,21 @@ var DialogRenderer = /** @class */ (function () {
                 }
             }
         });
+        this.outsideClickClosedBy = "";
     };
     DialogRenderer.prototype.getDialogPosition = function () {
         var distanceFromVisibleTop = this.parent.element.getBoundingClientRect().top;
         if (distanceFromVisibleTop < 0) {
-            distanceFromVisibleTop = Math.abs(distanceFromVisibleTop);
+            var topHeight = 0;
+            var parentElement = this.parent.element;
+            while (parentElement.nodeName !== 'BODY') {
+                var top_1 = parentElement.getBoundingClientRect().top;
+                if (top_1 > 0) {
+                    topHeight = top_1;
+                }
+                parentElement = parentElement.parentElement;
+            }
+            distanceFromVisibleTop = Math.abs(distanceFromVisibleTop) + topHeight;
             return distanceFromVisibleTop.toString();
         }
         else {
@@ -96,7 +116,7 @@ var DialogRenderer = /** @class */ (function () {
      * @param {Object} args - specifies the arguments.
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     DialogRenderer.prototype.close = function (args) {
         this.parent.trigger(events.dialogClose, args);

package/src/rich-text-editor/renderer/iframe-content-renderer.d.ts

@@ -3,14 +3,14 @@ import { ContentRender } from '../renderer/content-renderer';
  * Content module is used to render Rich Text Editor content
  *
  * @hidden
-
+ * @deprecated
  */
 export declare class IframeContentRender extends ContentRender {
     /**
      * The function is used to render Rich Text Editor iframe
      *
      * @hidden
-
+     * @deprecated
      */
     renderPanel(): void;
     private setThemeColor;
@@ -19,7 +19,7 @@ export declare class IframeContentRender extends ContentRender {
      *
      * @returns {Element} - specifies the element.
      * @hidden
-
+     * @deprecated
      */
     getEditPanel(): Element;
     /**
@@ -27,7 +27,7 @@ export declare class IframeContentRender extends ContentRender {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     getDocument(): Document;
 }

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

@@ -1,25 +1,25 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 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-audio, .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-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;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-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 {  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 { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { 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 { 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
  *
  * @hidden
-
+ * @deprecated
  */
 var IframeContentRender = /** @class */ (function (_super) {
     __extends(IframeContentRender, _super);
@@ -30,7 +30,7 @@ var IframeContentRender = /** @class */ (function (_super) {
      * The function is used to render Rich Text Editor iframe
      *
      * @hidden
-
+     * @deprecated
      */
     IframeContentRender.prototype.renderPanel = function () {
         var rteObj = this.parent;
@@ -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';
@@ -65,7 +66,7 @@ var IframeContentRender = /** @class */ (function (_super) {
      *
      * @returns {Element} - specifies the element.
      * @hidden
-
+     * @deprecated
      */
     IframeContentRender.prototype.getEditPanel = function () {
         var editNode;
@@ -82,7 +83,7 @@ var IframeContentRender = /** @class */ (function (_super) {
      *
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     IframeContentRender.prototype.getDocument = function () {
         return this.getEditPanel().ownerDocument;

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;
@@ -67,6 +74,7 @@ export declare class Image {
     private editImgLink;
     private removeImgLink;
     private onKeyDown;
+    private handleSelectAll;
     private openDialog;
     private showDialog;
     private closeDialog;
@@ -162,7 +170,7 @@ export declare class Image {
      * @method destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     private moduleDestroy;