@syncfusion/ej2-richtexteditor 20.1.57 → 20.1.60

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.57
+*  version : 20.1.60
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@20.1.56",
+  "_id": "@syncfusion/ej2-richtexteditor@20.1.59",
   "_inBundle": false,
-  "_integrity": "sha512-K9udvx7XUSGPoZazdkTsEx9MdmT7BmM+0AwY6uejJFroduUynyhd6DLubcv53iYrQa1cf4Auu6tkHY6fSyUtgA==",
+  "_integrity": "sha512-O3QS2MUDxyND2e4A9Dl8mIlNzLQXd5eC5w1F6tRfYmRCNfW3cWqa1LUDaNT5pQVpzuMky/5MuX18aY1Gx1Mp6g==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -26,8 +26,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-20.1.56.tgz",
-  "_shasum": "32c4413a7a28432c050fbab856829a4529d9ad74",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-20.1.59.tgz",
+  "_shasum": "7b77b788311525699b0cf6710a46229c87d43b4f",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -38,12 +38,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.56",
+    "@syncfusion/ej2-base": "~20.1.60",
     "@syncfusion/ej2-buttons": "~20.1.55",
-    "@syncfusion/ej2-filemanager": "~20.1.57",
-    "@syncfusion/ej2-inputs": "~20.1.55",
-    "@syncfusion/ej2-navigations": "~20.1.57",
-    "@syncfusion/ej2-popups": "~20.1.57",
+    "@syncfusion/ej2-filemanager": "~20.1.60",
+    "@syncfusion/ej2-inputs": "~20.1.59",
+    "@syncfusion/ej2-navigations": "~20.1.60",
+    "@syncfusion/ej2-popups": "~20.1.58",
     "@syncfusion/ej2-splitbuttons": "~20.1.57"
   },
   "deprecated": false,
@@ -70,6 +70,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.1.57",
+  "version": "20.1.60",
   "sideEffects": false
 }

package/src/editor-manager/plugin/lists.d.ts

@@ -26,6 +26,7 @@ export declare class Lists {
     private spaceList;
     private enterList;
     private backspaceList;
+    private removeList;
     private keyDownHandler;
     private spaceKeyAction;
     private getAction;

package/src/editor-manager/plugin/lists.js

@@ -1,5 +1,5 @@
 import * as CONSTANT from './../base/constant';
-import { createElement, detach, prepend, append, attributes } from '@syncfusion/ej2-base';
+import { createElement, detach, prepend, append, attributes, Browser } from '@syncfusion/ej2-base';
 import { markerClassName } from './dom-node';
 import * as EVENTS from './../../common/constant';
 import { setStyleAttribute } from '@syncfusion/ej2-base';
@@ -178,6 +178,29 @@ var Lists = /** @class */ (function () {
                 parentList.parentElement.insertBefore(startNode.children[1], parentList);
             }
         }
+        this.removeList(range, e);
+    };
+    Lists.prototype.removeList = function (range, e) {
+        var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
+        var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
+        startNode = startNode.nodeName === 'BR' ? startNode.parentElement : startNode;
+        endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
+        if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
+            isNOU(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
+            isNOU(startNode.previousElementSibling) && range.startOffset === 0) ||
+            (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement &&
+                range.startOffset === 0 && range.endOffset === 1)) {
+            if (Browser.userAgent.indexOf('Firefox') != -1) {
+                detach(range.commonAncestorContainer.childNodes[0]);
+            }
+            else if (range.commonAncestorContainer.nodeName === 'LI') {
+                detach(range.commonAncestorContainer.parentElement);
+            }
+            else {
+                detach(range.commonAncestorContainer);
+            }
+            e.event.preventDefault();
+        }
     };
     Lists.prototype.keyDownHandler = function (e) {
         if (e.event.which === 13) {
@@ -202,6 +225,7 @@ var Lists = /** @class */ (function () {
                 && (commonAncestor.lastElementChild === closest(endNode, 'li')) && !range.collapsed) {
                 detach(commonAncestor);
             }
+            this.removeList(range, e);
         }
         if (e.event.which === 9) {
             var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
@@ -417,6 +441,19 @@ var Lists = /** @class */ (function () {
     };
     Lists.prototype.applyListsHandler = function (e) {
         var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
+        if (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement) {
+            var startChildNodes = range.startContainer.childNodes;
+            var startNode = ((startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) : range.startOffset]) || range.startContainer);
+            var endNode = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset] || range.endContainer);
+            var lastSelectionNode = endNode.lastChild.nodeName === 'BR' ? (isNOU(endNode.lastChild.previousSibling) ? endNode
+                : endNode.lastChild.previousSibling) : endNode.lastChild;
+            while (!isNOU(lastSelectionNode) && lastSelectionNode.nodeName !== '#text' && lastSelectionNode.nodeName !== 'IMG' &&
+                lastSelectionNode.nodeName !== 'BR' && lastSelectionNode.nodeName !== 'HR') {
+                lastSelectionNode = lastSelectionNode.lastChild;
+            }
+            this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startNode, lastSelectionNode, 0, lastSelectionNode.textContent.length);
+            range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
+        }
         if (range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement &&
             range.startOffset === range.endOffset && range.startOffset === 0 &&
             this.parent.editableElement.textContent.length === 0 && (this.parent.editableElement.childNodes[0].nodeName != 'TABLE' &&

package/src/editor-manager/plugin/selection-commands.js

@@ -270,8 +270,16 @@ var SelectionCommands = /** @class */ (function () {
             for (; nodeTraverse && nodeTraverse.parentElement && nodeTraverse.parentElement !== endNode; 
             // eslint-disable-next-line
             nodeTraverse = nodeTraverse) {
-                if (nodeTraverse.parentElement && nodeTraverse.parentElement.tagName.toLocaleLowerCase()
-                    === formatNode.tagName.toLocaleLowerCase() &&
+                var nodeTraverseCondition = void 0;
+                if (formatNode.nodeName === 'SPAN') {
+                    nodeTraverseCondition = nodeTraverse.parentElement.tagName.toLocaleLowerCase()
+                        === formatNode.tagName.toLocaleLowerCase() && nodeTraverse.parentElement.getAttribute('style') === formatNodeStyles;
+                }
+                else {
+                    nodeTraverseCondition = nodeTraverse.parentElement.tagName.toLocaleLowerCase()
+                        === formatNode.tagName.toLocaleLowerCase();
+                }
+                if (nodeTraverse.parentElement && nodeTraverseCondition &&
                     (nodeTraverse.parentElement.childElementCount > 1 || range.startOffset > 1)) {
                     if (textNode.parentElement && textNode.parentElement.tagName.toLocaleLowerCase()
                         === formatNode.tagName.toLocaleLowerCase()) {

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

@@ -153,7 +153,17 @@ var HtmlEditor = /** @class */ (function () {
             e.args.keyCode === 13) {
             this.spaceLink(e.args);
             if (this.parent.editorMode === 'HTML' && !this.parent.readonly) {
-                this.parent.notify(events.enterHandler, { args: e.args });
+                var currentLength = this.parent.getText().trim().length;
+                var selectionLength = this.parent.getSelection().length;
+                var totalLength = (currentLength - selectionLength) + 1;
+                if (!(this.parent.maxLength === -1 || totalLength <= this.parent.maxLength) &&
+                    e.args.keyCode === 13) {
+                    e.args.preventDefault();
+                    return;
+                }
+                else {
+                    this.parent.notify(events.enterHandler, { args: e.args });
+                }
             }
         }
         if (e.args.action === 'space') {

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

@@ -452,9 +452,7 @@ var Toolbar = /** @class */ (function () {
 
      */
     Toolbar.prototype.refreshToolbarOverflow = function () {
-        if (!this.parent.inlineMode.enable) {
-            this.baseToolbar.toolbarObj.refreshOverflow();
-        }
+        this.baseToolbar.toolbarObj.refreshOverflow();
     };
     Toolbar.prototype.isToolbarDestroyed = function () {
         return this.baseToolbar.toolbarObj && !this.baseToolbar.toolbarObj.isDestroyed;
@@ -635,7 +633,9 @@ var Toolbar = /** @class */ (function () {
         }
     };
     Toolbar.prototype.onRefresh = function () {
-        this.refreshToolbarOverflow();
+        if (!this.parent.inlineMode.enable) {
+            this.refreshToolbarOverflow();
+        }
         this.parent.setContentHeight('', true);
     };
     /**

package/src/rich-text-editor/base/constant.d.ts

@@ -606,3 +606,8 @@ export declare const closeTableDialog: string;
 
  */
 export declare const bindCssClass: string;
+/**
+ * @hidden
+
+ */
+export declare const blockInlineEmptyNodes: string;

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

@@ -606,3 +606,8 @@ export var closeTableDialog = 'closeTableDialog';
 
  */
 export var bindCssClass = 'closeTableDialog';
+/**
+ * @hidden
+
+ */
+export var blockInlineEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\ndetails:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\nh2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, hr:empty, li:empty, main:empty, nav:empty,\nnoscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty,\na:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\ncanvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\nins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\nq:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,\ntemplate:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";

package/src/rich-text-editor/base/interface.d.ts

@@ -118,6 +118,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     getCollection?(items: string | string[]): string[];
     getRange(): Range;
     getID(): string;
+    getText(): string;
     updateValueData?(): void;
     getBaseToolbarObject(): BaseToolbar;
     setContentHeight(target?: string, isExpand?: boolean): void;
@@ -148,6 +149,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     enableHtmlSanitizer?: boolean;
     getInsertImgMaxWidth?(): string | number;
     getSelection(): string;
+    currentTarget: HTMLElement;
 }
 /**
 
@@ -225,6 +227,8 @@ export interface IItemCollectionArgs {
     selectParent?: Node[];
     /** Defines the URL action details for link element */
     url?: string;
+    /** Defines the Display Text action details for link element */
+    text?: string;
     /** Defines the title of the link action details */
     title?: string;
     /** Defines the target as string for link element */

package/src/rich-text-editor/base/rich-text-editor.d.ts

@@ -55,6 +55,11 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     /**
      * @hidden
 
+     */
+    currentTarget: HTMLElement;
+    /**
+     * @hidden
+
      */
     isFocusOut: boolean;
     /**

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

@@ -339,6 +339,35 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.formatter.saveData();
             }
         }
+        if (this.maxLength !== -1 && !isNOU(tool.command)) {
+            var currentInsertContentLength = 0;
+            if (tool.command === 'Links') {
+                currentInsertContentLength = value.text.length === 0 ?
+                    value.url.length : value.text.length;
+            }
+            if (tool.command === 'Images' || tool.command === 'Table' || tool.command === 'Files') {
+                currentInsertContentLength = 1;
+            }
+            if (tool.command === 'InsertHTML') {
+                if (!isNOU(value)) {
+                    var tempElem = this.createElement('div');
+                    tempElem.innerHTML = value;
+                    currentInsertContentLength = tempElem.textContent.length;
+                }
+                else if (!isNOU(tool.value) && (tool.value === '<hr/>' || tool.value === '<br/>')) {
+                    currentInsertContentLength = 1;
+                }
+            }
+            if (tool.command === 'InsertText') {
+                currentInsertContentLength = value.length;
+            }
+            var currentLength = this.getText().trim().length;
+            var selectionLength = this.getSelection().length;
+            var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
+            if (!(this.maxLength === -1 || totalLength <= this.maxLength)) {
+                return;
+            }
+        }
         this.formatter.editorManager.execCommand(tool.command, tool.subCommand ? tool.subCommand : (value ? value : tool.value), null, null, (value ? value : tool.value), (value ? value : tool.value));
         if (option && option.undo) {
             this.formatter.saveData();
@@ -475,7 +504,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             range.endContainer;
         var closestLI = closest(endNode, 'LI');
         if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&
-            !range.collapsed) {
+            !range.collapsed && isNOU(endNode.nextElementSibling)) {
             closestLI.textContent = closestLI.textContent.trim();
             currentEndOffset = closestLI.textContent.length - 1;
             var currentLastElem = closestLI;
@@ -571,6 +600,17 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.autoResize();
     };
     RichTextEditor.prototype.keyUp = function (e) {
+        if (this.editorMode === "HTML") {
+            var range = this.getRange();
+            if (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer.nodeName === '#text' &&
+                range.startContainer.parentElement === this.inputElement && this.enterKey !== 'BR') {
+                var range_1 = this.getRange();
+                var tempElem = this.createElement(this.enterKey);
+                range_1.startContainer.parentElement.insertBefore(tempElem, range_1.startContainer);
+                tempElem.appendChild(range_1.startContainer);
+                this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), tempElem.childNodes[0], tempElem.childNodes[0], tempElem.childNodes[0].textContent.length, tempElem.childNodes[0].textContent.length);
+            }
+        }
         this.notify(events.keyUp, { member: 'keyup', args: e });
         if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||
             this.inputElement.innerHTML === '<br>')) {
@@ -723,7 +763,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             requestType: 'Paste'
         };
         this.trigger(events.actionBegin, evenArgs, function (pasteArgs) {
-            var currentLength = _this.getText().trim().length;
+            var currentLength = _this.inputElement.textContent.length;
             var selectionLength = _this.getSelection().length;
             var pastedContentLength = (isNOU(e) || isNOU(e.clipboardData))
                 ? 0 : e.clipboardData.getData('text/plain').length;
@@ -2088,6 +2128,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     };
     RichTextEditor.prototype.onIframeMouseDown = function (e) {
         this.isBlur = false;
+        this.currentTarget = e.target;
         this.notify(events.iframeMouseDown, e);
     };
     RichTextEditor.prototype.editorKeyDown = function (e) {

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

@@ -4,6 +4,7 @@
 import { isNullOrUndefined as isNOU, addClass, removeClass, selectAll, createElement } from '@syncfusion/ej2-base';
 import { Browser, detach, SanitizeHtmlHelper, extend } from '@syncfusion/ej2-base';
 import * as classes from '../base/classes';
+import * as CONSTANT from '../base/constant';
 import * as model from '../models/items';
 import { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale } from '../models/default-locale';
 var undoRedoItems = ['Undo', 'Redo'];
@@ -413,6 +414,10 @@ export function updateTextNode(value, rteObj) {
         var previousParent = void 0;
         var insertElem = void 0;
         while (tempNode.firstChild) {
+            var emptyElem = tempNode.querySelectorAll(CONSTANT.blockInlineEmptyNodes);
+            for (var i = 0; i < emptyElem.length; i++) {
+                emptyElem[i].innerHTML = '<br>';
+            }
             if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&
                 (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
                 inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {

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

@@ -43,6 +43,21 @@ var Formatter = /** @class */ (function () {
                 || self.contentModule.getPanel() === range.commonAncestorContainer)) {
             return;
         }
+        if (!isNullOrUndefined(args) && self.maxLength !== -1 && !isNullOrUndefined(args.item.command)) {
+            var currentInsertContentLength = 0;
+            if (args.item.command === 'Links') {
+                currentInsertContentLength = value.text.length === 0 ? value.url.length : value.text.length;
+            }
+            if (args.item.command === 'Images' || args.item.command === 'Table' || args.item.command === 'Files') {
+                currentInsertContentLength = 1;
+            }
+            var currentLength = self.getText().trim().length;
+            var selectionLength = self.getSelection().length;
+            var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
+            if (!(self.maxLength === -1 || totalLength <= self.maxLength)) {
+                return;
+            }
+        }
         if (isNullOrUndefined(args)) {
             var action_1 = event.action;
             if (action_1 !== 'tab' && action_1 !== 'enter' && action_1 !== 'space' && action_1 !== 'escape') {

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 {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\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 {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter {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 {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak {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) {border: solid 2px #4a90e2;}\n                img.e-img-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 { 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; 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            </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 {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 {display: inline-block;float: none;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft {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 {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter {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 {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak {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) {border: solid 2px #4a90e2;}\n                img.e-img-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 { 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; 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            </style>\n        </head>";
 /**
  * Content module is used to render Rich Text Editor content
  *

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

@@ -1394,6 +1394,9 @@ var Image = /** @class */ (function () {
         if (target.nodeName === 'IMG') {
             this.imgEle = target;
         }
+        if (target.nodeName !== '#document') {
+            this.parent.currentTarget = e.target;
+        }
         if (!isNullOrUndefined(this.dialogObj) && ((
         // eslint-disable-next-line
         !closest(target, '[id=' + "'" + this.dialogObj.element.id + "'" + ']') && this.parent.toolbarSettings.enable && this.parent.getToolbarElement() &&
@@ -1411,12 +1414,12 @@ var Image = /** @class */ (function () {
             }
             /* eslint-enable */
         }
-        if (e.target.tagName !== 'IMG' && this.imgResizeDiv && !(this.quickToolObj &&
+        if (!(this.parent.iframeSettings.enable && this.parent.currentTarget.nodeName === 'IMG') && e.target.tagName !== 'IMG' && this.imgResizeDiv && !(this.quickToolObj &&
             this.quickToolObj.imageQTBar && this.quickToolObj.imageQTBar.element.contains(e.target)) &&
             this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {
             this.cancelResizeAction();
         }
-        if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {
+        if (this.contentModule.getEditPanel().querySelector('.e-img-resize') && !(this.parent.iframeSettings.enable && this.parent.currentTarget.nodeName === 'IMG')) {
             if (target.tagName !== 'IMG') {
                 this.removeResizeEle();
             }