@syncfusion/ej2-richtexteditor 24.1.47 → 24.2.4

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

@@ -390,7 +390,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             if (tool.command === 'InsertText') {
                 currentInsertContentLength = value.length;
             }
-            var currentLength = this.getText().trim().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
+            var currentLength = this.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
             var selectionLength = this.getSelection().length;
             var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
             if (!(this.maxLength === -1 || totalLength <= this.maxLength)) {
@@ -765,7 +765,12 @@ var RichTextEditor = /** @class */ (function (_super) {
                 FormatPainterEscapeAction = this.formatPainterModule.previousAction === 'escape';
             }
             if (!FormatPainterEscapeAction) {
-                this.formatter.process(this, null, e);
+                if (this.editorMode === 'HTML' && (e.action === 'increase-fontsize' || e.action === 'decrease-fontsize')) {
+                    this.notify(events.onHandleFontsizeChange, { member: 'onHandleFontsizeChange', args: e });
+                }
+                else {
+                    this.formatter.process(this, null, e);
+                }
             }
             switch (e.action) {
                 case 'toolbar-focus':
@@ -791,6 +796,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.setPlaceHolder();
             }
         }
+        this.notify(events.afterKeyDown, { member: 'afterKeyDown', args: e });
         this.autoResize();
     };
     RichTextEditor.prototype.keyUp = function (e) {
@@ -817,7 +823,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         var formatPainterCopy = e.key === 'C' && e.altKey && e.shiftKey;
         var formatPainterPaste = e.key === 'V' && e.altKey && e.shiftKey;
         if ((!formatPainterCopy && !formatPainterPaste) && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys) || (this.editorMode === 'Markdown'
-            && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) && !this.inlineMode.enable) {
+            && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) || (this.autoSaveOnIdle && Browser.isDevice) && !this.inlineMode.enable) {
             this.formatter.onKeyHandler(this, e);
         }
         if (this.inputElement && this.inputElement.textContent.length !== 0
@@ -913,60 +919,6 @@ var RichTextEditor = /** @class */ (function (_super) {
                 return;
             }
         }
-        if (e.detail === 3) {
-            var range = this.getRange();
-            var selection = this.formatter.editorManager.domNode.getSelection();
-            // To handle the triple click node selection improper range due to browser behavior.
-            if (selection.rangeCount > 0 && !isNOU(range.startContainer.parentElement) && (!isNOU(range.startContainer.parentElement.nextSibling) &&
-                (range.startContainer.parentElement.nextSibling.nodeType !== 3 ||
-                    /\s+$/.test(range.startContainer.parentElement.nextSibling.textContent)) || range.startOffset === range.endOffset)
-                || range.startContainer.parentElement.tagName.toLocaleLowerCase() === 'li') {
-                var newRange = new Range();
-                var start = range.startContainer;
-                var end = range.endContainer;
-                var isInvalid = false;
-                var isInsideList = range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL'
-                    || range.commonAncestorContainer.nodeName === 'LI';
-                if (!isInsideList && end.nodeType === 1 && end.nodeName === 'LI') {
-                    end = closest(end, 'ol, ul').previousElementSibling.lastElementChild;
-                }
-                else if (isInsideList && end.nodeType === 1 && range.endOffset === 0) {
-                    if (end.previousElementSibling && end.previousElementSibling.lastElementChild) {
-                        end = end.previousElementSibling.lastElementChild;
-                    }
-                    else {
-                        end = closest(end.parentElement, 'li');
-                        if (end && end.nodeName === 'LI') {
-                            end = end.previousElementSibling;
-                        }
-                    }
-                }
-                else {
-                    if (!closest(end, 'li') && end.previousElementSibling && end.previousElementSibling.lastChild &&
-                        end.previousElementSibling.textContent.trim().length > 0) {
-                        end = end.previousElementSibling.lastChild;
-                    }
-                    else if (closest(end, 'li') && end.previousElementSibling && end.previousElementSibling.lastChild) {
-                        end = closest(end, 'li').parentElement.previousElementSibling.lastChild;
-                    }
-                }
-                if (!end || end === this.inputElement) {
-                    end = start;
-                    isInvalid = true;
-                }
-                while (end.nodeName !== '#text' && !isInvalid) {
-                    if (end.lastElementChild) {
-                        end = end.lastElementChild;
-                    }
-                    else {
-                        end = end.lastChild;
-                    }
-                }
-                newRange.setStart(start, 0);
-                newRange.setEnd(end, end.textContent.length);
-                this.formatter.editorManager.nodeSelection.setRange(this.contentModule.getDocument(), newRange);
-            }
-        }
         this.notifyMouseUp(e);
     };
     /**
@@ -1008,10 +960,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             requestType: 'Paste'
         };
         this.trigger(events.actionBegin, evenArgs, function (pasteArgs) {
-            var currentLength = _this.inputElement.textContent.length;
+            var currentLength = _this.getText().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
             var selectionLength = _this.getSelection().length;
             var pastedContentLength = (isNOU(e) || isNOU(e.clipboardData))
-                ? 0 : e.clipboardData.getData('text/plain').replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
+                ? 0 : e.clipboardData.getData('text/plain').replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
             var totalLength = (currentLength - selectionLength) + pastedContentLength;
             if (_this.editorMode === 'Markdown') {
                 var args_1 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };
@@ -1451,7 +1403,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             if (this.valueContainer) {
                 this.valueContainer.value = (this.enableHtmlEncode) ? this.value : value;
             }
-            if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.replace('&amp;', '&').trim() !== value.trim()) {
+            if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.trim() !== value.trim()) {
                 this.inputElement.innerHTML = value;
             }
             else if (this.editorMode === 'Markdown' && this.inputElement
@@ -1472,9 +1424,6 @@ var RichTextEditor = /** @class */ (function (_super) {
                 }
                 else {
                     this.inputElement.innerHTML = '<p><br/></p>';
-                    if (value === '' && this.formatter && this.inputElement) {
-                        this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), this.inputElement.firstElementChild, this.inputElement.firstElementChild.childElementCount);
-                    }
                 }
             }
             else {
@@ -2089,6 +2038,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         addClass([this.element], [classes.CLS_FOCUS]);
         this.preventDefaultResize(e);
         this.notify(events.mouseDown, { args: e });
+        this.formatter.editorManager.observer.notify(events.mouseDown, { args: e });
         this.clickPoints = { clientX: touch.clientX, clientY: touch.clientY };
     };
     RichTextEditor.prototype.preventImgResize = function (e) {
@@ -2250,6 +2200,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 detach(item[i]);
             }
         }
+        this.removeSelectionClassStates(valueElementWrapper);
         return valueElementWrapper.innerHTML;
     };
     RichTextEditor.prototype.updateStatus = function (e) {
@@ -2297,6 +2248,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         if (this.isBlur && isNOU(trg)) {
             removeClass([this.element], [classes.CLS_FOCUS]);
+            this.removeSelectionClassStates(this.inputElement);
             this.notify(events.focusChange, {});
             var value = this.getUpdatedValue();
             this.setProperties({ value: value });
@@ -2472,7 +2424,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.restrict = function (e) {
         if (this.maxLength >= 0) {
             var element = this.editorMode === 'Markdown' ? this.contentModule.getText() :
-                (e && e.currentTarget.textContent);
+                (this.getText().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, ''));
             if (!element) {
                 return;
             }
@@ -2622,6 +2574,24 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
     };
+    RichTextEditor.prototype.removeSelectionClassStates = function (element) {
+        var classNames = [classes.CLS_IMG_FOCUS, classes.CLS_TABLE_SEL, classes.CLS_VID_FOCUS, classes.CLS_AUD_FOCUS];
+        for (var i = 0; i < classNames.length; i++) {
+            var item = element.querySelectorAll('.' + classNames[i]);
+            removeClass(item, classNames[i]);
+            if (item.length === 0) {
+                continue;
+            }
+            for (var j = 0; j < item.length; j++) {
+                if (item[j].classList.length === 0) {
+                    item[j].removeAttribute('class');
+                }
+                if (item[j].nodeName === 'IMG' && item[j].style.outline !== '') {
+                    item[j].style.outline = '';
+                }
+            }
+        }
+    };
     __decorate([
         Complex({}, ToolbarSettings)
     ], RichTextEditor.prototype, "toolbarSettings", void 0);

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

@@ -51,6 +51,10 @@ export declare function pageYOffset(e: MouseEvent | Touch, parentElement: HTMLEl
  * @hidden
  */
 export declare function getTooltipText(item: string, serviceLocator: ServiceLocator): string;
+export declare function getTooltipTextDropdownItems(item: string, serviceLocator: ServiceLocator, localeItems: {
+    [ket: string]: string;
+}[], rteObj?: IRichTextEditor): string;
+export declare function getQuickToolbarTooltipText(item: string): string;
 /**
  * @param {ISetToolbarStatusArgs} e - specifies the e element
  * @param {boolean} isPopToolbar - specifies the boolean value

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

@@ -6,7 +6,7 @@ import { Browser, detach, SanitizeHtmlHelper, extend } from '@syncfusion/ej2-bas
 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';
+import { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale, defaultLocale } from '../models/default-locale';
 var undoRedoItems = ['Undo', 'Redo'];
 var inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',
     'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',
@@ -134,6 +134,40 @@ export function getTooltipText(item, serviceLocator) {
     var tooltipText = i10n.getConstant(itemLocale);
     return tooltipText;
 }
+export function getTooltipTextDropdownItems(item, serviceLocator, localeItems, rteObj) {
+    if (localeItems) {
+        var i10n = serviceLocator.getService('rteLocale');
+        for (var i = 0; i < localeItems.length; i++) {
+            var itemLocale = localeItems[i].value.toLocaleLowerCase();
+            var numberValue = localeItems[i].locale;
+            var numberLocale = defaultLocale["" + numberValue].toLocaleLowerCase();
+            if (item === itemLocale || item === numberLocale) {
+                var tooltipText = localeItems[i].locale;
+                return i10n.getConstant(tooltipText);
+            }
+        }
+    }
+    else {
+        var fontsize = rteObj.fontSize.items;
+        for (var i = 0; i < fontsize.length; i++) {
+            if (item === rteObj.fontSize.items[i].value) {
+                var fontSize = rteObj.fontSize.items[i].text;
+                return fontSize;
+            }
+        }
+    }
+    return '';
+}
+export function getQuickToolbarTooltipText(item) {
+    var keys = Object.keys(defaultLocale);
+    for (var i = 0; i < keys.length; i++) {
+        var tooltipText = defaultLocale["" + keys[i]];
+        if (item === tooltipText) {
+            return tooltipText;
+        }
+    }
+    return '';
+}
 /**
  * @param {ISetToolbarStatusArgs} e - specifies the e element
  * @param {boolean} isPopToolbar - specifies the boolean value

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

@@ -1,4 +1,4 @@
-import { extend, isNullOrUndefined as isNOU, Browser } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined as isNOU, Browser, closest } from '@syncfusion/ej2-base';
 import * as CONSTANT from '../base/constant';
 import { updateUndoRedoStatus, isIDevice } from '../base/util';
 import { KEY_DOWN, KEY_UP } from './../../common/constant';
@@ -27,12 +27,21 @@ var Formatter = /** @class */ (function () {
         var selection = self.contentModule.getDocument().getSelection();
         var range = (selection.rangeCount > 0) ? selection.getRangeAt(selection.rangeCount - 1) : null;
         var saveSelection;
+        var newRange;
+        if (!isNOU(value) && !isNOU(value.selection)) {
+            newRange = value.selection.range;
+        }
         var isKeyboardVideoInsert = (!isNOU(value) && !isNOU(value.cssClass) &&
             value.cssClass !== 'e-video-inline');
         if (self.editorMode === 'HTML') {
             if (!isNOU(args) && !isKeyboardVideoInsert) {
                 if (isNOU(args.name) || (!isNOU(args.name) && args.name !== 'showDialog')) {
-                    saveSelection = this.editorManager.nodeSelection.save(range, self.contentModule.getDocument());
+                    if (newRange) {
+                        saveSelection = this.editorManager.nodeSelection.save(newRange, self.contentModule.getDocument());
+                    }
+                    else {
+                        saveSelection = this.editorManager.nodeSelection.save(range, self.contentModule.getDocument());
+                    }
                 }
             }
         }
@@ -60,7 +69,7 @@ var Formatter = /** @class */ (function () {
             if (args.item.command === 'Images' || args.item.command === 'Videos' || args.item.command === 'Table' || args.item.command === 'Files') {
                 currentInsertContentLength = 1;
             }
-            var currentLength = self.getText().trim().replace(/(\r\n|\n|\r)/gm, '').replace(/\u200B/g, '').length;
+            var currentLength = self.getText().trim().replace(/(\r\n|\n|\r|\t)/gm, '').replace(/\u200B/g, '').length;
             var selectionLength = self.getSelection().length;
             var totalLength = (currentLength - selectionLength) + currentInsertContentLength;
             if (!(self.maxLength === -1 || totalLength <= self.maxLength)) {
@@ -124,7 +133,9 @@ var Formatter = /** @class */ (function () {
                         _this.saveData();
                     }
                     self.isBlur = false;
-                    self.contentModule.getEditPanel().focus();
+                    if (isNOU(saveSelection) || isNOU(closest(saveSelection.range.startContainer.parentElement, ".e-img-caption")) ? true : !(closest(saveSelection.range.startContainer.parentElement, ".e-img-caption").getAttribute("contenteditable") == "false")) {
+                        self.contentModule.getEditPanel().focus();
+                    }
                     if (self.editorMode === 'HTML' && !isKeyboardVideoInsert) {
                         if (isNOU(args.selectType) || (!isNOU(args.selectType) && args.selectType !== 'showDialog')) {
                             saveSelection.restore();

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

@@ -48,11 +48,11 @@ export var defaultLocale = {
     'audioLayoutOption': 'Layout option',
     'videoLayoutOption': 'Layout option',
     'align': 'Align',
-    'caption': 'Image Caption',
+    'caption': 'Caption',
     'remove': 'Remove',
     'insertLink': 'Insert Link',
     'display': 'Display',
-    'altText': 'Alternative Text',
+    'altText': 'Alternative text',
     'dimension': 'Change Size',
     'fullscreen': 'Maximize',
     'maximize': 'Maximize',
@@ -65,12 +65,12 @@ export var defaultLocale = {
     'preview': 'Preview',
     'viewside': 'ViewSide',
     'insertCode': 'Insert Code',
-    'linkText': 'Display Text',
+    'linkText': 'Display text',
     'linkTooltipLabel': 'Title',
-    'linkWebUrl': 'Web Address',
+    'linkWebUrl': 'Web address',
     'linkTitle': 'Enter a title',
     'linkurl': 'http://example.com',
-    'linkOpenInNewWindow': 'Open Link in New Window',
+    'linkOpenInNewWindow': 'Open link in new window',
     'linkHeader': 'Insert Link',
     'dialogInsert': 'Insert',
     'dialogCancel': 'Cancel',
@@ -104,22 +104,22 @@ export var defaultLocale = {
     'imageWidth': 'Width',
     'videoHeight': 'Height',
     'videoWidth': 'Width',
-    'textPlaceholder': 'Enter Text',
-    'inserttablebtn': 'Insert Table',
+    'textPlaceholder': 'Enter text',
+    'inserttablebtn': 'Insert table',
     'tabledialogHeader': 'Insert Table',
     'tableWidth': 'Width',
     'cellpadding': 'Cell Padding',
     'cellspacing': 'Cell Spacing',
     'columns': 'Number of columns',
     'rows': 'Number of rows',
-    'tableRows': 'Table Rows',
-    'tableColumns': 'Table Columns',
+    'tableRows': 'Row',
+    'tableColumns': 'Column',
     'tableCellHorizontalAlign': 'Table Cell Horizontal Align',
-    'tableCellVerticalAlign': 'Table Cell Vertical Align',
+    'tableCellVerticalAlign': 'Vertical Align',
     'createTable': 'Create Table',
     'removeTable': 'Remove Table',
-    'tableHeader': 'Table Header',
-    'tableRemove': 'Table Remove',
+    'tableHeader': 'Header Row',
+    'tableRemove': 'Delete',
     'tableCellBackground': 'Table Cell Background',
     'tableEditProperties': 'Table Edit Properties',
     'styles': 'Styles',
@@ -193,8 +193,8 @@ export var defaultLocale = {
     'bulletFormatListNone': 'None',
     'formatPainter': 'Format Painter',
     'emojiPicker': 'Emoji Picker',
-    'embeddedCode': 'Embedded Code',
-    'pasteEmbeddedCodeHere': 'Paste Embedded Code here',
+    'embeddedCode': 'Embedded code',
+    'pasteEmbeddedCodeHere': 'Paste embedded code here',
     'emojiPickerTypeToFind': 'Type to find',
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',
@@ -254,7 +254,7 @@ export var toolsLocale = {
     'remove': 'remove',
     'insertlink': 'insertLink',
     'display': 'display',
-    'alttext': 'altText',
+    'alttext': 'alternateHeader',
     'dimension': 'dimension',
     'fullscreen': 'fullscreen',
     'maximize': 'maximize',
@@ -289,8 +289,8 @@ export var toolsLocale = {
     'deleterow': 'deleteRow',
     'formatpainter': 'formatPainter',
     'emojipicker': 'emojiPicker',
-    'embeddedCode': 'Embedded Code',
-    'pasteEmbeddedCodeHere': 'Paste Embedded Code here',
+    'embeddedCode': 'Embedded code',
+    'pasteEmbeddedCodeHere': 'Paste embedded code here',
     'emojiPickerTypeToFind': 'Type to find',
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',

package/src/rich-text-editor/models/items.js

@@ -457,14 +457,14 @@ export var tools = {
     'sourcecode': {
         'id': 'SourceCode',
         'icon': 'e-source-code',
-        'tooltip': 'Source Code',
+        'tooltip': 'Code View (Ctrl+Shift+H)',
         'command': 'SourceCode',
         'subCommand': 'SourceCode'
     },
     'preview': {
         'id': 'Preview',
         'icon': 'e-preview',
-        'tooltip': 'Preview',
+        'tooltip': 'Preview (Ctrl+Shift+H)',
         'command': 'Preview',
         'subCommand': 'Preview'
     },

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;

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

@@ -239,6 +239,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;
@@ -379,6 +386,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');
@@ -640,6 +648,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;
     };

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;
@@ -23,6 +24,7 @@ export declare class DialogRenderer {
     private handleEnterKeyDown;
     private beforeOpenCallback;
     private open;
+    private documentClickClosedBy;
     private beforeClose;
     private getDialogPosition;
     /**

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
@@ -68,10 +70,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,6 +85,7 @@ var DialogRenderer = /** @class */ (function () {
                 }
             }
         });
+        this.outsideClickClosedBy = "";
     };
     DialogRenderer.prototype.getDialogPosition = function () {
         var distanceFromVisibleTop = this.parent.element.getBoundingClientRect().top;

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

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

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

@@ -67,6 +67,7 @@ export declare class Image {
     private editImgLink;
     private removeImgLink;
     private onKeyDown;
+    private handleSelectAll;
     private openDialog;
     private showDialog;
     private closeDialog;

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

@@ -725,6 +725,14 @@ var Image = /** @class */ (function () {
                 originalEvent.preventDefault();
                 break;
         }
+        if (originalEvent.ctrlKey && originalEvent.key === 'a') {
+            this.handleSelectAll();
+        }
+    };
+    Image.prototype.handleSelectAll = function () {
+        this.cancelResizeAction();
+        var imgFocusNodes = this.parent.inputElement.querySelectorAll('.' + classes.CLS_IMG_FOCUS);
+        removeClass(imgFocusNodes, classes.CLS_IMG_FOCUS);
     };
     Image.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
         var range;
@@ -894,10 +902,12 @@ var Image = /** @class */ (function () {
                     _this.parent.formatter.editorManager.nodeSelection.Clear(_this.contentModule.getDocument());
                     _this.parent.formatter.editorManager.nodeSelection.setSelectionContents(_this.contentModule.getDocument(), target);
                     _this.quickToolObj.imageQTBar.showPopup(args.pageX, pageY, target);
+                    _this.resizeStart(e.args, target);
                 }, 400);
             }
             else {
-                this.quickToolObj.imageQTBar.showPopup(args.pageX, pageY, target);
+                var coordinates = target.getBoundingClientRect();
+                this.quickToolObj.imageQTBar.showPopup(coordinates.left, coordinates.top, target, 'Image');
             }
         }
     };
@@ -1361,7 +1371,7 @@ var Image = /** @class */ (function () {
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertImageUrl.bind(selectObj),
-                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage' + this.parent.getCssClass(true), isPrimary: true, disabled: true }
+                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage' + this.parent.getCssClass(true), isPrimary: true, disabled: this.parent.editorMode === 'Markdown' ? false : true }
                 },
                 {
                     click: function (e) {
@@ -1467,6 +1477,7 @@ var Image = /** @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');
@@ -1528,6 +1539,10 @@ var Image = /** @class */ (function () {
                 }
             }
         });
+        if (e.selectNode && e.selectNode[0].nodeName === 'IMG') {
+            var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
+            this.inputUrl.value = e.selectNode[0].src.match(regex) ? e.selectNode[0].src : '';
+        }
         imgUrl.appendChild(this.inputUrl);
         return imgUrl;
     };
@@ -1536,6 +1551,9 @@ var Image = /** @class */ (function () {
         var proxy = this.selfImage;
         proxy.isImgUploaded = false;
         var url = proxy.inputUrl.value;
+        if (proxy.parent.editorMode === 'Markdown' && url === '') {
+            url = 'http://';
+        }
         if (proxy.parent.formatter.getUndoRedoStack().length === 0) {
             proxy.parent.formatter.saveData();
         }