@syncfusion/ej2-richtexteditor 20.1.61 → 20.2.39

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

@@ -105,7 +105,8 @@ var Toolbar = /** @class */ (function () {
             container: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),
             items: this.parent.toolbarSettings.items,
             mode: tBarMode,
-            target: ele
+            target: ele,
+            cssClass: this.parent.cssClass
         });
         if (this.parent.toolbarSettings.type === ToolbarType.Expand) {
             addClass([ele], ['e-rte-tb-mobile']);
@@ -222,7 +223,8 @@ var Toolbar = /** @class */ (function () {
                 container: 'toolbar',
                 items: this.parent.toolbarSettings.items,
                 mode: this.getToolbarMode(),
-                target: this.tbElement
+                target: this.tbElement,
+                cssClass: this.parent.cssClass
             });
             if (!this.parent.inlineMode.enable) {
                 if (this.parent.toolbarSettings.enableFloating) {

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

@@ -541,3 +541,8 @@ export declare const CLS_RTE_FIXED_TB_EXPAND: string;
 
  */
 export declare const CLS_RTE_TB_ENABLED: string;
+/**
+ * @hidden
+
+ */
+export declare const CLS_RTE_RES_WEST: string;

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

@@ -541,3 +541,8 @@ export var CLS_RTE_FIXED_TB_EXPAND = 'e-rte-fixed-tb-expand';
 
  */
 export var CLS_RTE_TB_ENABLED = 'e-rte-toolbar-enabled';
+/**
+ * @hidden
+
+ */
+export var CLS_RTE_RES_WEST = 'e-south-west';

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

@@ -519,11 +519,41 @@ export declare const imageRemoving: string;
 /**
  * @hidden
 
+ */
+export declare const mediaSelected: string;
+/**
+ * @hidden
+
+ */
+export declare const mediaUploading: string;
+/**
+ * @hidden
+
+ */
+export declare const mediaUploadSuccess: string;
+/**
+ * @hidden
+
+ */
+export declare const mediaUploadFailed: string;
+/**
+ * @hidden
+
+ */
+export declare const mediaRemoving: string;
+/**
+ * @hidden
+
  */
 export declare const afterImageDelete: string;
 /**
  * @hidden
 
+ */
+export declare const afterMediaDelete: string;
+/**
+ * @hidden
+
  */
 export declare const drop: string;
 /**
@@ -539,6 +569,11 @@ export declare const beforeImageUpload: string;
 /**
  * @hidden
 
+ */
+export declare const beforeMediaUpload: string;
+/**
+ * @hidden
+
  */
 export declare const resizeInitialized: string;
 /**
@@ -594,6 +629,11 @@ export declare const closeImageDialog: string;
 /**
  * @hidden
 
+ */
+export declare const closeAudioDialog: string;
+/**
+ * @hidden
+
  */
 export declare const showTableDialog: string;
 /**
@@ -610,4 +650,9 @@ export declare const bindCssClass: string;
  * @hidden
 
  */
-export declare const blockInlineEmptyNodes: string;
+export declare const blockEmptyNodes: string;
+/**
+ * @hidden
+
+ */
+export declare const inlineEmptyNodes: string;

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

@@ -519,11 +519,41 @@ export var imageRemoving = 'imageRemoving';
 /**
  * @hidden
 
+ */
+export var mediaSelected = 'mediaSelected';
+/**
+ * @hidden
+
+ */
+export var mediaUploading = 'mediaUploading';
+/**
+ * @hidden
+
+ */
+export var mediaUploadSuccess = 'mediaUploadSuccess';
+/**
+ * @hidden
+
+ */
+export var mediaUploadFailed = 'mediaUploadFailed';
+/**
+ * @hidden
+
+ */
+export var mediaRemoving = 'mediaRemoving';
+/**
+ * @hidden
+
  */
 export var afterImageDelete = 'afterImageDelete';
 /**
  * @hidden
 
+ */
+export var afterMediaDelete = 'afterMediaaDelete';
+/**
+ * @hidden
+
  */
 export var drop = 'drop';
 /**
@@ -539,6 +569,11 @@ export var beforeImageUpload = 'beforeImageUpload';
 /**
  * @hidden
 
+ */
+export var beforeMediaUpload = 'beforeMediaUpload';
+/**
+ * @hidden
+
  */
 export var resizeInitialized = 'resizeInitialized';
 /**
@@ -594,6 +629,11 @@ export var closeImageDialog = 'closeImageDialog';
 /**
  * @hidden
 
+ */
+export var closeAudioDialog = 'closeAudioDialog';
+/**
+ * @hidden
+
  */
 export var showTableDialog = 'showTableDialog';
 /**
@@ -610,4 +650,9 @@ 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";
+export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
+/**
+ * @hidden
+
+ */
+export var inlineEmptyNodes = "a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\n canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\n ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\n q: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,\n template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty";

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

@@ -148,6 +148,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     enableXhtml?: boolean;
     enableHtmlSanitizer?: boolean;
     getInsertImgMaxWidth?(): string | number;
+    getInsertVidMaxWidth?(): string | number;
     getSelection(): string;
     currentTarget: HTMLElement;
 }
@@ -256,6 +257,7 @@ export interface IColorPickerModel extends ColorPickerModel {
     subCommand?: string;
     target?: string;
     iconCss?: string;
+    cssClass?: string;
 }
 /**
  * @hidden

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

@@ -979,6 +979,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
 
      */
     setEnable(): void;
+    private initializeValue;
     /**
      * For internal use only - Initialize the event handler;
      *

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

@@ -70,26 +70,7 @@ import { DialogRenderer } from '../renderer/dialog-renderer';
 var RichTextEditor = /** @class */ (function (_super) {
     __extends(RichTextEditor, _super);
     function RichTextEditor(options, element) {
-        var _this = _super.call(this, options, element) || this;
-        _this.defaultResetValue = null;
-        _this.isResizeInitialized = false;
-        /**
-         * @hidden
-
-         */
-        _this.isFocusOut = false;
-        /**
-         * @hidden
-
-         */
-        _this.isRTE = false;
-        /**
-         * @hidden
-
-         */
-        _this.isBlur = true;
-        _this.needsID = true;
-        return _this;
+        return _super.call(this, options, element) || this;
     }
     /**
      * To provide the array of modules needed for component rendering
@@ -170,6 +151,14 @@ var RichTextEditor = /** @class */ (function (_super) {
         // eslint-disable-next-line
         (this.enabled) ? this.eventInitializer() : this.unWireEvents();
     };
+    RichTextEditor.prototype.initializeValue = function () {
+        this.isFocusOut = false;
+        this.isRTE = false;
+        this.isBlur = true;
+        this.needsID = true;
+        this.defaultResetValue = null;
+        this.isResizeInitialized = false;
+    };
     /**
      * For internal use only - Initialize the event handler;
      *
@@ -178,6 +167,7 @@ var RichTextEditor = /** @class */ (function (_super) {
      * @private
      */
     RichTextEditor.prototype.preRender = function () {
+        this.initializeValue();
         this.onBlurHandler = this.blurHandler.bind(this);
         this.onFocusHandler = this.focusHandler.bind(this);
         this.onResizeHandler = this.resizeHandler.bind(this);
@@ -234,11 +224,18 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         else {
             this.valueContainer = this.createElement('textarea', {
-                id: this.getID() + '-value'
+                id: this.getID() + '-value',
+                attrs: { 'aria-labelledby': this.getID() }
             });
         }
         this.valueContainer.name = this.getID();
         addClass([this.valueContainer], classes.CLS_RTE_HIDDEN);
+        if (!isNOU(this.cssClass)) {
+            var currentClassList = this.cssClass.split(' ');
+            for (var i = 0; i < currentClassList.length; i++) {
+                addClass([this.valueContainer], currentClassList[i]);
+            }
+        }
         this.element.appendChild(this.valueContainer);
     };
     /**
@@ -505,13 +502,17 @@ var RichTextEditor = /** @class */ (function (_super) {
         var closestLI = closest(endNode, 'LI');
         if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&
             !range.collapsed && isNOU(endNode.nextElementSibling)) {
-            closestLI.textContent = closestLI.textContent.trim();
-            currentEndOffset = closestLI.textContent.length - 1;
+            for (var i = 0; i < closestLI.childNodes.length; i++) {
+                if (closestLI.childNodes[i].nodeName === "#text" && closestLI.childNodes[i].textContent.trim().length === 0) {
+                    detach(closestLI.childNodes[i]);
+                    i--;
+                }
+            }
             var currentLastElem = closestLI;
-            while (currentLastElem.nodeName !== '#text') {
+            while (currentLastElem.lastChild !== null && currentLastElem.nodeName !== '#text') {
                 currentLastElem = currentLastElem.lastChild;
             }
-            this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentLastElem : currentStartContainer, currentLastElem, currentStartOffset, currentLastElem.textContent.length);
+            this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? (currentLastElem.nodeName === 'BR' && !isNOU(currentLastElem.previousSibling) ? currentLastElem.previousSibling : currentLastElem) : currentStartContainer, currentLastElem, currentStartOffset, (currentLastElem.nodeName === 'BR' ? 0 : currentLastElem.textContent.length));
         }
     };
     /**
@@ -877,6 +878,12 @@ var RichTextEditor = /** @class */ (function (_super) {
             for (var i = 0; i < this.originalElement.classList.length; i++) {
                 addClass([this.element], this.originalElement.classList[i]);
             }
+            if (!isNOU(this.cssClass)) {
+                var currentClassList = this.cssClass.split(' ');
+                for (var i = 0; i < currentClassList.length; i++) {
+                    addClass([this.element], currentClassList[i]);
+                }
+            }
             removeClass([this.element], classes.CLS_RTE_HIDDEN);
         }
         else {
@@ -1252,7 +1259,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.inputElement && this.placeholder && this.iframeSettings.enable !== true) {
             if (this.editorMode !== 'Markdown') {
                 if (!this.placeHolderWrapper) {
-                    this.placeHolderWrapper = this.createElement('span', { className: 'rte-placeholder e-rte-placeholder' });
+                    this.placeHolderWrapper = this.createElement('span', { className: 'rte-placeholder e-rte-placeholder' + ' ' + this.cssClass });
                     if (this.inputElement) {
                         this.inputElement.parentElement.insertBefore(this.placeHolderWrapper, this.inputElement);
                     }
@@ -1502,7 +1509,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.setProperties({ value: this.valueTemplate });
             }
             else {
-                var compiledTemplate = compile(this.valueTemplate)("", this, 'valueTemplate');
+                var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
                 for (var i = 0; i < compiledTemplate.length; i++) {
                     var item = compiledTemplate[i];
                     append([item], this.element);

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

@@ -177,7 +177,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(formatItems, value, 'subCommand', 'text');
                             dropDown.formatDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.format.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + (isNOU(result) ? formatContent : result) +
                                 '</span></span>');
                             dropDown.formatDropDown.dataBind();
@@ -207,7 +207,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             e.tbElements[j].title = name_1;
                             dropDown.fontNameDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontFamily.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + name_1 + '</span></span>');
                             dropDown.fontNameDropDown.dataBind();
                             break;
@@ -223,7 +223,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), 'value', 'text');
                             dropDown.fontSizeDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontSize.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text">'
+                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
                                 + getFormattedFontSize(result) + '</span></span>');
                             dropDown.fontSizeDropDown.dataBind();
                             break;
@@ -414,9 +414,13 @@ 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>';
+            var emptyBlockElem = tempNode.querySelectorAll(CONSTANT.blockEmptyNodes);
+            for (var i = 0; i < emptyBlockElem.length; i++) {
+                emptyBlockElem[i].innerHTML = '<br>';
+            }
+            var emptyInlineElem = tempNode.querySelectorAll(CONSTANT.inlineEmptyNodes);
+            for (var i = 0; i < emptyInlineElem.length; i++) {
+                emptyInlineElem[i].innerHTML = '&ZeroWidthSpace;';
             }
             if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&
                 (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||

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

@@ -170,7 +170,7 @@ var Formatter = /** @class */ (function () {
         }
         self.trigger(CONSTANT.actionComplete, events, function (callbackArgs) {
             self.setPlaceHolder();
-            if (callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links' && self.editorMode === 'HTML') {
+            if ((callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links') && self.editorMode === 'HTML') {
                 var args = callbackArgs;
                 if (callbackArgs.requestType === 'Links' && callbackArgs.event &&
                     callbackArgs.event.type === 'keydown' &&

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-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>";
+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; 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            </style>\n        </head>";
 /**
  * Content module is used to render Rich Text Editor content
  *

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

@@ -30,6 +30,7 @@ export declare class Image {
     private isAllowedTypes;
     private pageX;
     private pageY;
+    private mousex;
     private dialogRenderObj;
     private deletedImg;
     private changedWidthValue;