@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.43-569781

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

@@ -1,4 +1,4 @@
-import { addClass, detach, EventHandler, isNullOrUndefined, select, Ajax, formatUnit } from '@syncfusion/ej2-base';
+import { addClass, detach, EventHandler, select, Ajax, formatUnit } from '@syncfusion/ej2-base';
 import { Browser, closest, removeClass, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import * as classes from '../base/classes';
@@ -8,6 +8,7 @@ import { Button, CheckBox } from '@syncfusion/ej2-buttons';
 import { RenderType } from '../base/enum';
 import { dispatchEvent, parseHtml, hasClass, convertToBlob } from '../base/util';
 import { isIDevice } from '../../common/util';
+import { imageResizeFactor } from '../../common/config';
 /**
  * `Image` module is used to handle image actions.
  */
@@ -17,7 +18,6 @@ var Image = /** @class */ (function () {
         this.isAllowedTypes = true;
         this.pageX = null;
         this.pageY = null;
-        this.mouseX = null;
         this.deletedImg = [];
         this.parent = parent;
         this.rteID = parent.element.id;
@@ -87,7 +87,7 @@ var Image = /** @class */ (function () {
         dropElement.removeEventListener('dragstart', this.dragStart.bind(this), true);
         dropElement.removeEventListener('dragenter', this.dragEnter.bind(this), true);
         dropElement.removeEventListener('dragover', this.dragOver.bind(this), true);
-        if (!isNullOrUndefined(this.contentModule)) {
+        if (!isNOU(this.contentModule)) {
             EventHandler.remove(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.imageClick);
             this.parent.formatter.editorManager.observer.off(events.checkUndo, this.undoStack);
             if (this.parent.insertImageSettings.resize) {
@@ -100,7 +100,7 @@ var Image = /** @class */ (function () {
     };
     Image.prototype.updateCss = function (currentObj, e) {
         if (currentObj && e.cssClass) {
-            if (isNullOrUndefined(e.oldCssClass)) {
+            if (isNOU(e.oldCssClass)) {
                 currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
             }
             else {
@@ -111,7 +111,7 @@ var Image = /** @class */ (function () {
     // eslint-disable-next-line @typescript-eslint/tslint/config
     Image.prototype.setCssClass = function (e) {
         if (this.popupObj && e.cssClass) {
-            if (isNullOrUndefined(e.oldCssClass)) {
+            if (isNOU(e.oldCssClass)) {
                 addClass([this.popupObj.element], e.cssClass);
             }
             else {
@@ -175,11 +175,6 @@ var Image = /** @class */ (function () {
         }
         var args = { event: e, requestType: 'images' };
         this.parent.trigger(events.resizeStop, args);
-        /* eslint-disable */
-        var pageX = this.getPointX(e);
-        var pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
-            this.parent.element.getBoundingClientRect().top + e.clientY : e.pageY;
-        /* eslint-enable */
         this.parent.formatter.editorManager.observer.on(events.checkUndo, this.undoStack, this);
         this.parent.formatter.saveData();
     };
@@ -210,17 +205,15 @@ var Image = /** @class */ (function () {
             if (this.quickToolObj) {
                 this.quickToolObj.imageQTBar.hidePopup();
             }
-            if (target.classList.contains('e-rte-topLeft')) {
-                this.resizeBtnStat.topLeft = true;
-            }
-            if (target.classList.contains('e-rte-topRight')) {
-                this.resizeBtnStat.topRight = true;
-            }
-            if (target.classList.contains('e-rte-botLeft')) {
-                this.resizeBtnStat.botLeft = true;
-            }
-            if (target.classList.contains('e-rte-botRight')) {
-                this.resizeBtnStat.botRight = true;
+            var handlers = ['topLeft', 'topRight', 'botLeft', 'botRight'];
+            for (var i = 0; i < handlers.length; i++) {
+                var handler = handlers[i];
+                if (target.classList.contains('e-rte-' + handler)) {
+                    this.resizeBtnStat[handler] = true;
+                    this.currentResizeHandler = handler;
+                    this.aspectRatio = this.findAspectRatio(this.imgEle);
+                    break; // Exit the loop once a match is found
+                }
             }
             if (Browser.isDevice && this.contentModule.getEditPanel().contains(this.imgResizeDiv) &&
                 !this.imgResizeDiv.classList.contains('e-mob-span')) {
@@ -234,6 +227,7 @@ var Image = /** @class */ (function () {
                     }
                 });
             }
+            EventHandler.add(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing, this);
             EventHandler.add(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd, this);
         }
     };
@@ -265,18 +259,18 @@ var Image = /** @class */ (function () {
         this.resizeBtnInit();
         this.imgEle = e;
         addClass([this.imgEle], 'e-resize');
-        this.imgResizeDiv = this.parent.createElement('span', { className: 'e-img-resize' + ' ' + this.parent.cssClass, id: this.rteID + '_imgResize' });
+        this.imgResizeDiv = this.parent.createElement('span', { className: 'e-img-resize' + this.parent.getCssClass(true), id: this.rteID + '_imgResize' });
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-topLeft' + ' ' + this.parent.cssClass, styles: 'cursor: nwse-resize'
+            className: 'e-rte-imageboxmark e-rte-topLeft' + this.parent.getCssClass(true), styles: 'cursor: nwse-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-topRight' + ' ' + this.parent.cssClass, styles: 'cursor: nesw-resize'
+            className: 'e-rte-imageboxmark e-rte-topRight' + this.parent.getCssClass(true), styles: 'cursor: nesw-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-botLeft' + ' ' + this.parent.cssClass, styles: 'cursor: nesw-resize'
+            className: 'e-rte-imageboxmark e-rte-botLeft' + this.parent.getCssClass(true), styles: 'cursor: nesw-resize'
         }));
         this.imgResizeDiv.appendChild(this.parent.createElement('span', {
-            className: 'e-rte-imageboxmark e-rte-botRight' + ' ' + this.parent.cssClass, styles: 'cursor: nwse-resize'
+            className: 'e-rte-imageboxmark e-rte-botRight' + this.parent.getCssClass(true), styles: 'cursor: nwse-resize'
         }));
         if (Browser.isDevice) {
             addClass([this.imgResizeDiv], 'e-mob-rte');
@@ -285,7 +279,6 @@ var Image = /** @class */ (function () {
         this.imgResizePos(e, this.imgResizeDiv);
         this.resizeImgDupPos(e);
         this.contentModule.getEditPanel().appendChild(this.imgResizeDiv);
-        EventHandler.add(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing, this);
     };
     Image.prototype.getPointX = function (e) {
         if (e.touches && e.touches.length) {
@@ -351,89 +344,80 @@ var Image = /** @class */ (function () {
             };
         }
     };
-    Image.prototype.setAspectRatio = function (img, expectedX, expectedY, e) {
-        if (isNullOrUndefined(img.width)) {
+    Image.prototype.setAspectRatio = function (img, expectedX, expectedY) {
+        if (isNOU(img.width)) {
             return;
         }
-        // eslint-disable-next-line security/detect-unsafe-regex
-        var width = img.style.width !== '' ? img.style.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(img.style.width) :
-            parseInt(img.style.width, 10) : img.width;
-        var height = img.style.height !== '' ? parseInt(img.style.height, 10) : img.height;
-        if (width > height) {
-            img.style.minWidth = this.parent.insertImageSettings.minWidth === 0 ? '20px' : formatUnit(this.parent.insertImageSettings.minWidth);
-            if (this.parent.insertImageSettings.resizeByPercent) {
-                if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    var original = img.offsetWidth + this.mouseX;
-                    var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() === 'NaN' ? (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(img.style.width));
-                    img.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
+        var width = img.width;
+        var height = img.height;
+        var sameHeightWidth = (width === height);
+        var factor = this.parent.insertImageSettings.resizeByPercent ? '%' : 'px';
+        var emptyStyleDimension = (img.style.width === '' && img.style.height === '');
+        if (!sameHeightWidth && !emptyStyleDimension) {
+            if (img.style.width !== '' && img.style.height !== '') {
+                if (this.parent.insertImageSettings.resizeByPercent) {
+                    this.setImageWidth(img, expectedX, factor);
+                    this.removeImageHeight(img);
                 }
                 else {
-                    img.style.width = this.pixToPerc((width / height * expectedY), (img.previousElementSibling || img.parentElement)) + '%';
+                    this.setImageWidth(img, expectedX, factor);
+                    this.setImageHeight(img, expectedY, factor);
                 }
-                img.style.height = null;
-                img.removeAttribute('height');
-            }
-            else if (img.style.width === '' && img.style.height !== '') {
-                img.style.height = expectedY + 'px';
-            }
-            else if (img.style.width !== '' && img.style.height === '') {
-                var currentWidth = ((width / height * expectedY) + width / height) <
-                    (this.parent.inputElement.getBoundingClientRect().right - 32) ?
-                    ((width / height * expectedY) + width / height) : (this.parent.inputElement.getBoundingClientRect().right - 32);
-                img.style.width = currentWidth.toString() + 'px';
-                img.style.height = expectedY + 'px';
             }
             else if (img.style.width !== '') {
-                var currentWidth = (width / height * expectedY) < (this.parent.inputElement.getBoundingClientRect().right - 32) ?
-                    (width / height * expectedY) : (this.parent.inputElement.getBoundingClientRect().right - 32);
-                img.style.width = currentWidth + 'px';
-                img.style.height = expectedY + 'px';
-            }
-            else {
-                if (this.parent.iframeSettings.enable) {
-                    img.setAttribute('width', (img.width + this.mouseX).toString());
+                if (this.parent.insertImageSettings.resizeByPercent) {
+                    this.setImageWidth(img, expectedX, factor);
+                    this.removeImageHeight(img);
                 }
                 else {
-                    var currentWidth = img.offsetWidth === 0 ? img.width + this.mouseX + parseInt(img.style.outlineWidth.split('p')[0], 10) : img.offsetWidth + this.mouseX;
-                    img.setAttribute('width', (currentWidth).toString());
+                    this.setImageWidth(img, expectedX, factor);
                 }
             }
-        }
-        else if (height > width) {
-            if (this.parent.insertImageSettings.resizeByPercent) {
-                if (parseInt('' + img.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    var original = img.offsetWidth + this.mouseX;
-                    var finalWidthByPerc = (original / img.offsetWidth) * (parseFloat(img.style.width).toString() === 'NaN' ?
-                        (img.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) :
-                        parseFloat(img.style.width));
-                    img.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
+            else if (img.style.height !== '') {
+                if (this.parent.insertImageSettings.resizeByPercent) {
+                    this.setImageWidth(img, expectedX, factor);
+                    this.removeImageHeight(img);
                 }
                 else {
-                    img.style.width = this.pixToPerc((expectedX / height * expectedY), (img.previousElementSibling || img.parentElement)) + '%';
+                    this.setImageHeight(img, expectedY, factor);
                 }
-                img.style.height = null;
-                img.removeAttribute('height');
-            }
-            else if (img.style.width !== '') {
-                img.style.width = expectedX + 'px';
-                img.style.height = (height / width * expectedX) + 'px';
-            }
-            else {
-                img.setAttribute('width', this.resizeBtnStat.botRight ? (this.getPointX(e.event) - img.getBoundingClientRect().left).toString() : expectedX.toString());
             }
         }
         else {
+            this.setImageWidth(img, expectedX, factor);
             if (this.parent.insertImageSettings.resizeByPercent) {
-                img.style.width = this.pixToPerc(expectedX, (img.previousElementSibling || img.parentElement)) + '%';
-                img.style.height = null;
-                img.removeAttribute('height');
+                this.removeImageHeight(img);
             }
             else {
-                img.style.width = expectedX + 'px';
-                img.style.height = expectedX + 'px';
+                this.setImageHeight(img, expectedY, factor);
             }
         }
     };
+    Image.prototype.setImageWidth = function (img, value, suffix) {
+        img.style.width = this.getImageDimension(value, img) + suffix;
+        if (!this.parent.insertImageSettings.resizeByPercent) {
+            img.setAttribute('width', value.toString());
+        }
+    };
+    Image.prototype.setImageHeight = function (img, value, suffix) {
+        img.style.height = this.getImageDimension(value, img) + suffix;
+        if (!this.parent.insertImageSettings.resizeByPercent) {
+            img.setAttribute('height', value.toString());
+        }
+    };
+    Image.prototype.removeImageHeight = function (img) {
+        img.style.height = '';
+        img.removeAttribute('height');
+    };
+    Image.prototype.getImageDimension = function (value, img) {
+        if (this.parent.insertImageSettings.resizeByPercent) {
+            var rootElem = img.parentElement || img.previousElementSibling;
+            return this.pixToPerc(value, rootElem);
+        }
+        else {
+            return value;
+        }
+    };
     Image.prototype.pixToPerc = function (expected, parentEle) {
         return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
     };
@@ -456,10 +440,9 @@ var Image = /** @class */ (function () {
                     return;
                 }
                 _this.imgEle.parentElement.style.cursor = 'pointer';
-                _this.setAspectRatio(_this.imgEle, parseInt(width, 10), parseInt(height, 10), args);
+                _this.setAspectRatio(_this.imgEle, parseInt(width, 10), parseInt(height, 10));
                 _this.resizeImgDupPos(_this.imgEle);
                 _this.imgResizePos(_this.imgEle, _this.imgResizeDiv);
-                _this.parent.setContentHeight('', false);
             }
         });
     };
@@ -468,35 +451,37 @@ var Image = /** @class */ (function () {
             this.cancelResizeAction();
             return;
         }
-        if (this.imgEle.offsetWidth >= this.parent.getInsertImgMaxWidth()) {
-            this.imgEle.style.maxHeight = this.imgEle.offsetHeight + 'px';
-        }
-        else if (isNOU(this.parent.insertImageSettings.maxHeight)) {
-            this.imgEle.style.maxHeight = '';
-        }
-        this.imgEle.style.maxWidth = this.parent.getInsertImgMaxWidth() + 'px';
-        var pageX = this.getPointX(e);
-        var pageY = this.getPointY(e);
-        var mouseX = (this.resizeBtnStat.botLeft || this.resizeBtnStat.topLeft) ? -(pageX - this.pageX) : (pageX - this.pageX);
-        var mouseY = (this.resizeBtnStat.botLeft || this.resizeBtnStat.topLeft) ? -(pageY - this.pageY) : (pageY - this.pageY);
-        var width = parseInt(this.imgDupPos.width, 10) + mouseX;
-        var height = parseInt(this.imgDupPos.height, 10) + mouseY;
-        this.mouseX = mouseX;
-        this.pageX = pageX;
-        this.pageY = pageY;
-        if (this.resizeBtnStat.botRight) {
-            this.imgDupMouseMove(width + 'px', height + 'px', e);
-        }
-        else if (this.resizeBtnStat.botLeft) {
-            this.imgDupMouseMove(width + 'px', height + 'px', e);
-        }
-        else if (this.resizeBtnStat.topRight) {
-            this.imgDupMouseMove(width + 'px', height + 'px', e);
-        }
-        else if (this.resizeBtnStat.topLeft) {
+        if (this.resizeBtnStat.botRight || this.resizeBtnStat.botLeft || this.resizeBtnStat.topRight || this.resizeBtnStat.topLeft) {
+            var pageX = this.getPointX(e);
+            var pageY = this.getPointY(e);
+            var resizeFactor = this.getResizeFactor(this.currentResizeHandler);
+            var diffX = (pageX - this.pageX);
+            var diffY = (pageY - this.pageY);
+            var currentWidth = this.imgEle.clientWidth;
+            var currentHeight = this.imgEle.clientHeight;
+            var width = diffX * resizeFactor[0] + currentWidth;
+            var height = diffY * resizeFactor[1] + currentHeight;
+            width = (width < 16) ? 16 : width;
+            height = (height < 16) ? 16 : height;
+            if (Math.abs(diffX) > Math.abs(diffY)) {
+                height = Math.round(width / this.aspectRatio);
+                width = Math.round(height * this.aspectRatio);
+            }
+            else {
+                width = Math.round(height * this.aspectRatio);
+                height = Math.round(width / this.aspectRatio);
+            }
+            this.pageX = pageX;
+            this.pageY = pageY;
             this.imgDupMouseMove(width + 'px', height + 'px', e);
         }
     };
+    Image.prototype.getResizeFactor = function (value) {
+        return imageResizeFactor[value];
+    };
+    Image.prototype.findAspectRatio = function (image) {
+        return image.clientWidth / image.clientHeight;
+    };
     Image.prototype.cancelResizeAction = function () {
         EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
         EventHandler.remove(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd);
@@ -506,6 +491,8 @@ var Image = /** @class */ (function () {
             this.imgResizeDiv = null;
             this.pageX = null;
             this.pageY = null;
+            this.currentResizeHandler = null;
+            this.aspectRatio = null;
         }
     };
     Image.prototype.resizeImgDupPos = function (e) {
@@ -516,6 +503,8 @@ var Image = /** @class */ (function () {
         };
     };
     Image.prototype.resizeBtnInit = function () {
+        this.aspectRatio = null;
+        this.currentResizeHandler = null;
         return this.resizeBtnStat = { botLeft: false, botRight: false, topRight: false, topLeft: false };
     };
     Image.prototype.onToolbarAction = function (args) {
@@ -588,7 +577,7 @@ var Image = /** @class */ (function () {
         });
         if (this.quickToolObj && document.body.contains(this.quickToolObj.imageQTBar.element)) {
             this.quickToolObj.imageQTBar.hidePopup();
-            if (!isNullOrUndefined(e.selectParent)) {
+            if (!isNOU(e.selectParent)) {
                 removeClass([e.selectParent[0]], 'e-img-focus');
             }
         }
@@ -628,7 +617,7 @@ var Image = /** @class */ (function () {
                 this.checkImageDel(range);
             }
         }
-        if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) &&
+        if (!isNOU(this.parent.formatter.editorManager.nodeSelection) &&
             originalEvent.code !== 'KeyK') {
             range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
             selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
@@ -645,11 +634,13 @@ var Image = /** @class */ (function () {
             }
         }
         if (originalEvent.ctrlKey && (originalEvent.keyCode === 89 || originalEvent.keyCode === 90)) {
-            this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });
+            if (this.parent.editorMode !== 'Markdown') {
+                this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });
+            }
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
+                if (!isNOU(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 }
                 originalEvent.preventDefault();
@@ -671,7 +662,7 @@ var Image = /** @class */ (function () {
         }
         switch (originalEvent.action) {
             case 'escape':
-                if (!isNullOrUndefined(this.dialogObj)) {
+                if (!isNOU(this.dialogObj)) {
                     this.dialogObj.close();
                 }
                 break;
@@ -699,24 +690,41 @@ var Image = /** @class */ (function () {
                             }
                         }
                     }
-                    else if ((range.startContainer.nodeType === 1 &&
-                        range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE))) {
-                        detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE));
-                    }
-                    else if (range.startContainer.nodeType === 1 &&
-                        range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK)) {
-                        detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK));
+                    else if (range.startContainer.nodeType === 1) {
+                        if (range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE)) {
+                            detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE));
+                        }
+                        else if (range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK)) {
+                            detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK));
+                        }
+                        else if (range.startContainer.classList.contains('e-img-wrap') && closest(range.startContainer, '.' + classes.CLS_CAPTION)) {
+                            var parentElem = range.startContainer.parentElement.parentElement;
+                            detach(closest(range.startContainer, '.' + classes.CLS_CAPTION));
+                            if (parentElem && parentElem.textContent.trim() === '') {
+                                var brElem = this.parent.createElement('br');
+                                brElem.classList.add('e-rte-image-remove-focus');
+                                parentElem.appendChild(brElem);
+                            }
+                        }
                     }
                 }
                 break;
             case 'insert-image':
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
+                if (!isNOU(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 }
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 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;
@@ -762,7 +770,7 @@ var Image = /** @class */ (function () {
     };
     Image.prototype.showDialog = function () {
         this.openDialog(false);
-        this.setCssClass({ cssClass: this.parent.cssClass });
+        this.setCssClass({ cssClass: this.parent.getCssClass() });
     };
     Image.prototype.closeDialog = function () {
         if (this.dialogObj) {
@@ -860,8 +868,8 @@ var Image = /** @class */ (function () {
     };
     Image.prototype.showImageQuickToolbar = function (e) {
         var _this = this;
-        if (e.type !== 'Images' || isNullOrUndefined(this.parent.quickToolbarModule)
-            || isNullOrUndefined(this.parent.quickToolbarModule.imageQTBar) || isNullOrUndefined(e.args)) {
+        if (e.type !== 'Images' || isNOU(this.parent.quickToolbarModule)
+            || isNOU(this.parent.quickToolbarModule.imageQTBar) || isNOU(e.args)) {
             return;
         }
         this.quickToolObj = this.parent.quickToolbarModule;
@@ -886,15 +894,17 @@ 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');
             }
         }
     };
     Image.prototype.hideImageQuickToolbar = function () {
-        if (!isNullOrUndefined(this.contentModule.getEditPanel().querySelector('.e-img-focus'))) {
+        if (!isNOU(this.contentModule.getEditPanel().querySelector('.e-img-focus'))) {
             removeClass([this.contentModule.getEditPanel().querySelector('.e-img-focus')], 'e-img-focus');
             if (this.quickToolObj && this.quickToolObj.imageQTBar && document.body.contains(this.quickToolObj.imageQTBar.element)) {
                 this.quickToolObj.imageQTBar.hidePopup();
@@ -909,7 +919,7 @@ var Image = /** @class */ (function () {
         var args = e.args;
         var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;
         if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {
-            if ((showOnRightClick && args.which === 1) && !isNullOrUndefined(args.target) &&
+            if ((showOnRightClick && args.which === 1) && !isNOU(args.target) &&
                 args.target.tagName === 'IMG') {
                 this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
                 this.parent.formatter.editorManager.nodeSelection.setSelectionContents(this.contentModule.getDocument(), args.target);
@@ -969,20 +979,20 @@ var Image = /** @class */ (function () {
             return;
         }
         this.imagDialog(e);
-        if (!isNullOrUndefined(this.dialogObj)) {
-            var linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' + ' ' + this.parent.cssClass });
+        if (!isNOU(this.dialogObj)) {
+            var linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' + this.parent.getCssClass(true) });
             var linkUrl = this.i10n.getConstant('linkurl');
-            var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
-                '<input type="text" data-role ="none" class="e-input e-img-link' + ' ' + this.parent.cssClass + '" spellcheck="false" placeholder="' + linkUrl + '"/></div>' +
+            var content = '<div class="e-rte-field' + this.parent.getCssClass(true) + '">' +
+                '<input type="text" data-role ="none" class="e-input e-img-link' + this.parent.getCssClass(true) + '" spellcheck="false" placeholder="' + linkUrl + '"/></div>' +
                 '<div class="e-rte-label"></div>' + '<div class="e-rte-field">' +
-                '<input type="checkbox" class="e-rte-linkTarget' + ' ' + this.parent.cssClass + '"  data-role ="none"></div>';
+                '<input type="checkbox" class="e-rte-linkTarget' + this.parent.getCssClass(true) + '"  data-role ="none"></div>';
             var contentElem = parseHtml(content);
             linkWrap.appendChild(contentElem);
             var linkTarget = linkWrap.querySelector('.e-rte-linkTarget');
             var inputLink = linkWrap.querySelector('.e-img-link');
             var linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');
             this.checkBoxObj = new CheckBox({
-                label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass,
+                label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, cssClass: this.parent.getCssClass(),
                 change: function (e) {
                     if (e.checked) {
                         target_1 = '_blank';
@@ -996,14 +1006,14 @@ var Image = /** @class */ (function () {
             this.checkBoxObj.createElement = this.parent.createElement;
             this.checkBoxObj.appendTo(linkTarget);
             var target_1 = this.checkBoxObj.checked ? '_blank' : null;
+            var imageLabel = this.checkBoxObj.checked ? this.i10n.getConstant('imageLinkAriaLabel') : null;
             var linkUpdate = this.i10n.getConstant('dialogUpdate');
             var linkargs_1 = {
                 args: e.args,
                 selfImage: this, selection: e.selection,
-                selectNode: e.selectNode, selectParent: e.selectParent, link: inputLink, target: target_1
+                selectNode: e.selectNode, selectParent: e.selectParent, link: inputLink, target: target_1, ariaLabel: imageLabel
             };
             this.dialogObj.setProperties({
-                height: 'inherit',
                 width: '290px',
                 header: this.parent.localeObj.getConstant('imageInsertLinkHeader'),
                 content: linkWrap,
@@ -1013,7 +1023,7 @@ var Image = /** @class */ (function () {
                             _this.insertlink(linkargs_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-link' + ' ' + this.parent.cssClass, isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-link' + this.parent.getCssClass(true), isPrimary: true
                         }
                     }],
                 cssClass: this.dialogObj.cssClass + ' e-rte-img-link-dialog'
@@ -1021,7 +1031,7 @@ var Image = /** @class */ (function () {
             if (!isNOU(this.parent.cssClass)) {
                 this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
             }
-            if (!isNullOrUndefined(inputDetails)) {
+            if (!isNOU(inputDetails)) {
                 inputLink.value = inputDetails.url;
                 // eslint-disable-next-line
                 (inputDetails.target) ? this.checkBoxObj.checked = true : this.checkBoxObj.checked = false;
@@ -1038,14 +1048,14 @@ var Image = /** @class */ (function () {
         }
         this.imagDialog(e);
         var altText = this.i10n.getConstant('altText');
-        if (!isNullOrUndefined(this.dialogObj)) {
-            var altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' + ' ' + this.parent.cssClass });
+        if (!isNOU(this.dialogObj)) {
+            var altWrap = this.parent.createElement('div', { className: 'e-img-altwrap' + this.parent.getCssClass(true) });
             var altHeader = this.i10n.getConstant('alternateHeader');
             var linkUpdate = this.i10n.getConstant('dialogUpdate');
             var getAlt = (e.selectNode[0].getAttribute('alt') === null) ? '' :
                 e.selectNode[0].getAttribute('alt');
-            var content = '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
-                '<input type="text" spellcheck="false"  class="e-input e-img-alt' + ' ' + this.parent.cssClass + '" placeholder="' + altText + '"/>' +
+            var content = '<div class="e-rte-field' + this.parent.getCssClass(true) + '">' +
+                '<input type="text" spellcheck="false"  class="e-input e-img-alt' + this.parent.getCssClass(true) + '" placeholder="' + altText + '"/>' +
                 '</div>';
             var contentElem = parseHtml(content);
             contentElem.querySelector('input').setAttribute('value', getAlt);
@@ -1056,14 +1066,14 @@ var Image = /** @class */ (function () {
                 alt: inputAlt
             };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: altHeader, content: altWrap,
+                width: '290px', header: altHeader, content: altWrap,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
                             _this.insertAlt(altArgs_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-alt' + ' ' + this.parent.cssClass, isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-alt' + this.parent.getCssClass(true), isPrimary: true
                         }
                     }],
                 cssClass: this.dialogObj.cssClass + ' e-rte-img-alt-dialog'
@@ -1076,7 +1086,7 @@ var Image = /** @class */ (function () {
         }
     };
     Image.prototype.insertAlt = function (e) {
-        if (!isNullOrUndefined(e.alt)) {
+        if (!isNOU(e.alt)) {
             e.selection.restore();
             if (this.parent.formatter.getUndoRedoStack().length === 0) {
                 this.parent.formatter.saveData();
@@ -1115,14 +1125,14 @@ var Image = /** @class */ (function () {
         }
         if (e.selectNode[0].parentElement.nodeName === 'A') {
             proxy.parent.formatter.process(proxy.parent, e.args, e.args, {
-                url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, selectNode: e.selectNode,
+                url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, ariaLabel: proxy.checkBoxObj.checked ? this.i10n.getConstant('imageLinkAriaLabel') : null, selectNode: e.selectNode,
                 subCommand: e.args.item.subCommand
             });
             proxy.dialogObj.hide({ returnValue: true });
             return;
         }
         proxy.parent.formatter.process(proxy.parent, e.args, e.args, {
-            url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, selectNode: e.selectNode,
+            url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, ariaLabel: proxy.checkBoxObj.checked ? this.i10n.getConstant('imageLinkAriaLabel') : null, selectNode: e.selectNode,
             subCommand: e.args.item.subCommand, selection: e.selection
         });
         var captionEle = closest(e.selectNode[0], '.e-img-caption');
@@ -1150,7 +1160,29 @@ var Image = /** @class */ (function () {
         if (this.parent.formatter.getUndoRedoStack().length === 0) {
             this.parent.formatter.saveData();
         }
-        e.selection.restore();
+        var restoreStartElement = e.selection.range.startContainer;
+        if (e.selection.range.startContainer.nodeName === 'SPAN' &&
+            restoreStartElement.classList.contains('e-img-wrap') &&
+            restoreStartElement.parentElement.classList.contains('e-img-caption')) {
+            restoreStartElement = restoreStartElement.parentElement;
+            if (!isNOU(restoreStartElement.previousSibling)) {
+                var lastNode = restoreStartElement.previousSibling;
+                while (lastNode.nodeName !== '#text' && lastNode.nodeName !== 'BR') {
+                    lastNode = lastNode.lastChild;
+                }
+                this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), lastNode, lastNode.nodeName !== 'BR' ? lastNode.textContent.length : 0);
+            }
+            else if (!isNOU(restoreStartElement.nextSibling)) {
+                var firstNode = restoreStartElement.nextSibling;
+                while (firstNode.nodeName !== '#text' && firstNode.nodeName !== 'BR') {
+                    firstNode = firstNode.firstChild;
+                }
+                this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), firstNode, 0);
+            }
+        }
+        else {
+            e.selection.restore();
+        }
         if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {
             this.removeResizeEle();
         }
@@ -1164,7 +1196,7 @@ var Image = /** @class */ (function () {
             this.quickToolObj.imageQTBar.hidePopup();
         }
         this.cancelResizeAction();
-        if (isNullOrUndefined(keyCode)) {
+        if (isNOU(keyCode)) {
             this.parent.trigger(events.afterImageDelete, args);
         }
     };
@@ -1218,7 +1250,7 @@ var Image = /** @class */ (function () {
         addClass([selectNode], 'e-rte-image');
         var subCommand = (e.args.item) ?
             e.args.item.subCommand : 'Caption';
-        if (!isNullOrUndefined(closest(selectNode, '.' + classes.CLS_CAPTION))) {
+        if (!isNOU(closest(selectNode, '.' + classes.CLS_CAPTION))) {
             detach(closest(selectNode, '.' + classes.CLS_CAPTION));
             if (Browser.isIE) {
                 this.contentModule.getEditPanel().focus();
@@ -1233,11 +1265,11 @@ var Image = /** @class */ (function () {
         }
         else {
             this.captionEle = this.parent.createElement('span', {
-                className: classes.CLS_CAPTION + ' ' + classes.CLS_RTE_CAPTION + ' ' + this.parent.cssClass,
+                className: classes.CLS_CAPTION + ' ' + classes.CLS_RTE_CAPTION + this.parent.getCssClass(true),
                 attrs: { contenteditable: 'false', draggable: 'false', style: 'width:' + this.parent.insertImageSettings.width }
             });
-            var imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' + ' ' + this.parent.cssClass });
-            var imgInner = this.parent.createElement('span', { className: 'e-img-inner' + ' ' + this.parent.cssClass,
+            var imgWrap = this.parent.createElement('span', { className: 'e-img-wrap' + this.parent.getCssClass(true) });
+            var imgInner = this.parent.createElement('span', { className: 'e-img-inner' + this.parent.getCssClass(true),
                 attrs: { contenteditable: 'true' } });
             var parent_1 = e.selectNode[0].parentElement;
             if (parent_1.tagName === 'A') {
@@ -1277,20 +1309,20 @@ var Image = /** @class */ (function () {
             return;
         }
         this.imagDialog(e);
-        if (!isNullOrUndefined(this.dialogObj)) {
+        if (!isNOU(this.dialogObj)) {
             var imgSizeHeader = this.i10n.getConstant('imageSizeHeader');
             var linkUpdate = this.i10n.getConstant('dialogUpdate');
             var dialogContent = this.imgsizeInput(e);
             var selectObj_1 = { args: e.args, selfImage: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: (Browser.isDevice) ? '300px' : 'inherit', width: '290px', header: imgSizeHeader, content: dialogContent,
+                width: '290px', header: imgSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
                             _this.insertSize(selectObj_1);
                         },
                         buttonModel: {
-                            content: linkUpdate, cssClass: 'e-flat e-update-size' + ' ' + this.parent.cssClass, isPrimary: true
+                            content: linkUpdate, cssClass: 'e-flat e-update-size' + this.parent.getCssClass(true), isPrimary: true
                         }
                     }],
                 cssClass: this.dialogObj.cssClass + ' e-rte-img-size-dialog'
@@ -1336,7 +1368,7 @@ var Image = /** @class */ (function () {
             this.dialogObj.hide({ returnValue: true });
             return;
         }
-        var imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_image' });
+        var imgDialog = this.parent.createElement('div', { className: 'e-rte-img-dialog' + this.parent.getCssClass(true), id: this.rteID + '_image' });
         this.parent.element.appendChild(imgDialog);
         var imgInsert = this.i10n.getConstant('dialogInsert');
         var imglinkCancel = this.i10n.getConstant('dialogCancel');
@@ -1345,26 +1377,26 @@ var Image = /** @class */ (function () {
         var selectObj = { selfImage: this, selection: e.selection, args: e.args, selectParent: e.selectParent };
         var dialogModel = {
             header: imgHeader,
-            cssClass: classes.CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
+            cssClass: classes.CLS_RTE_ELEMENTS + this.parent.getCssClass(true),
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertImageUrl.bind(selectObj),
-                    buttonModel: { content: imgInsert, cssClass: 'e-flat e-insertImage' + ' ' + this.parent.cssClass, 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) {
                         _this.cancelDialog(e);
                     },
-                    buttonModel: { cssClass: 'e-flat e-cancel' + ' ' + this.parent.cssClass, content: imglinkCancel }
+                    buttonModel: { cssClass: 'e-flat e-cancel' + this.parent.getCssClass(true), content: imglinkCancel }
                 }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
             close: function (event) {
                 if (_this.isImgUploaded) {
-                    _this.uploadObj.removing();
+                    _this.uploadObj.remove();
                 }
                 _this.parent.isBlur = false;
                 if (event && event.event.returnValue) {
@@ -1381,12 +1413,12 @@ var Image = /** @class */ (function () {
                 _this.dialogObj = null;
             }
         };
-        var dialogContent = this.parent.createElement('div', { className: 'e-img-content' + ' ' + this.parent.cssClass });
-        if ((!isNullOrUndefined(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')
+        var dialogContent = this.parent.createElement('div', { className: 'e-img-content' + this.parent.getCssClass(true) });
+        if ((!isNOU(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')
             || this.parent.editorMode === 'HTML') {
             dialogContent.appendChild(this.imgUpload(e));
         }
-        var linkHeader = this.parent.createElement('div', { className: 'e-linkheader' + ' ' + this.parent.cssClass });
+        var linkHeader = this.parent.createElement('div', { className: 'e-linkheader' + this.parent.getCssClass(true) });
         var linkHeaderText = this.i10n.getConstant('imageLinkHeader');
         if (this.parent.editorMode === 'HTML') {
             linkHeader.innerHTML = linkHeaderText;
@@ -1406,7 +1438,7 @@ var Image = /** @class */ (function () {
         this.dialogObj = this.dialogRenderObj.render(dialogModel);
         this.dialogObj.createElement = this.parent.createElement;
         this.dialogObj.appendTo(imgDialog);
-        if (isNullOrUndefined(this.dialogObj)) {
+        if (isNOU(this.dialogObj)) {
             return;
         }
         if (e.selectNode && e.selectNode[0].nodeName === 'IMG' && (e.name === 'insertImage')) {
@@ -1416,7 +1448,7 @@ var Image = /** @class */ (function () {
         if (this.quickToolObj) {
             if (this.quickToolObj.imageQTBar && document.body.contains(this.quickToolObj.imageQTBar.element)) {
                 this.quickToolObj.imageQTBar.hidePopup();
-                if (!isNullOrUndefined(e.selectParent)) {
+                if (!isNOU(e.selectParent)) {
                     removeClass([e.selectParent[0]], 'e-img-focus');
                 }
             }
@@ -1432,9 +1464,6 @@ var Image = /** @class */ (function () {
     Image.prototype.cancelDialog = function (e) {
         this.parent.isBlur = false;
         this.dialogObj.hide({ returnValue: true });
-        if (this.isImgUploaded) {
-            this.uploadObj.removing();
-        }
     };
     Image.prototype.onDocumentClick = function (e) {
         var target = e.target;
@@ -1447,7 +1476,7 @@ var Image = /** @class */ (function () {
         if (target.nodeName !== '#document') {
             this.parent.currentTarget = e.target;
         }
-        if (!isNullOrUndefined(this.dialogObj) && ((
+        if (!isNOU(this.dialogObj) && ((
         // eslint-disable-next-line
         !closest(target, '[id=' + "'" + this.dialogObj.element.id + "'" + ']') && this.parent.toolbarSettings.enable && this.parent.getToolbarElement() &&
             !this.parent.getToolbarElement().contains(e.target)) ||
@@ -1458,6 +1487,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');
@@ -1486,7 +1516,6 @@ var Image = /** @class */ (function () {
             for (var i = 0; i < items.length; i++) {
                 removeClass([items[i]], 'e-img-focus');
                 removeClass([items[i]], 'e-resize');
-                items[i].style.maxWidth = '';
             }
         }
     };
@@ -1500,13 +1529,12 @@ var Image = /** @class */ (function () {
             this.cancelResizeAction();
         }
     };
-    // eslint-disable-next-line
     Image.prototype.imageUrlPopup = function (e) {
         var _this = this;
-        var imgUrl = this.parent.createElement('div', { className: 'imgUrl' + ' ' + this.parent.cssClass });
+        var imgUrl = this.parent.createElement('div', { className: 'imgUrl' + this.parent.getCssClass(true) });
         var placeUrl = this.i10n.getConstant('imageUrl');
         this.inputUrl = this.parent.createElement('input', {
-            className: 'e-input e-img-url' + ' ' + this.parent.cssClass,
+            className: 'e-input e-img-url' + this.parent.getCssClass(true),
             attrs: { placeholder: placeUrl, spellcheck: 'false', 'aria-label': this.i10n.getConstant('imageLinkHeader') }
         });
         this.inputUrl.addEventListener('input', function () {
@@ -1519,6 +1547,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;
     };
@@ -1527,10 +1559,13 @@ 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();
         }
-        if (!isNullOrUndefined(proxy.uploadUrl) && proxy.uploadUrl.url !== '') {
+        if (!isNOU(proxy.uploadUrl) && proxy.uploadUrl.url !== '') {
             proxy.uploadUrl.cssClass = (proxy.parent.insertImageSettings.display === 'inline' ?
                 classes.CLS_IMGINLINE : classes.CLS_IMGBREAK);
             proxy.dialogObj.hide({ returnValue: false });
@@ -1542,7 +1577,7 @@ var Image = /** @class */ (function () {
             }
         }
         else if (url !== '') {
-            if (proxy.parent.editorMode === 'HTML' && isNullOrUndefined(closest(
+            if (proxy.parent.editorMode === 'HTML' && isNOU(closest(
             // eslint-disable-next-line
             this.selection.range.startContainer.parentNode, '[id=' + "'" + proxy.contentModule.getPanel().id + "'" + ']'))) {
                 proxy.contentModule.getEditPanel().focus();
@@ -1551,7 +1586,7 @@ var Image = /** @class */ (function () {
                 this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
             }
             var regex = /[\w-]+.(jpg|png|jpeg|gif)/g;
-            var matchUrl = (!isNullOrUndefined(url.match(regex)) && proxy.parent.editorMode === 'HTML') ? url.match(regex)[0] : '';
+            var matchUrl = (!isNOU(url.match(regex)) && proxy.parent.editorMode === 'HTML') ? url.match(regex)[0] : '';
             var value = {
                 cssClass: (proxy.parent.insertImageSettings.display === 'inline' ? classes.CLS_IMGINLINE : classes.CLS_IMGBREAK),
                 url: url, selection: this.selection, altText: matchUrl,
@@ -1573,19 +1608,25 @@ var Image = /** @class */ (function () {
         var selectNode = e.selectNode[0];
         var imgHeight = this.i10n.getConstant('imageHeight');
         var imgWidth = this.i10n.getConstant('imageWidth');
-        var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' + ' ' + this.parent.cssClass });
-        var widthVal = isNullOrUndefined(this.changedWidthValue) && (selectNode.style.width.toString() === 'auto' ||
-            selectNode.style.width !== '') ? selectNode.style.width : !isNullOrUndefined(this.changedWidthValue) ?
+        var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' + this.parent.getCssClass(true) });
+        var widthVal = isNOU(this.changedWidthValue) && (selectNode.style.width.toString() === 'auto' ||
+            selectNode.style.width !== '') ? selectNode.style.width : !isNOU(this.changedWidthValue) ?
             this.changedWidthValue : (parseInt(selectNode.getClientRects()[0].width.toString(), 10)).toString();
-        var heightVal = isNullOrUndefined(this.changedHeightValue) && (selectNode.style.height.toString() === 'auto' ||
-            selectNode.style.height !== '') ? selectNode.style.height : !isNullOrUndefined(this.changedHeightValue) ?
+        var heightVal = isNOU(this.changedHeightValue) && (selectNode.style.height.toString() === 'auto' ||
+            selectNode.style.height !== '') ? selectNode.style.height : !isNOU(this.changedHeightValue) ?
             this.changedHeightValue : (parseInt(selectNode.getClientRects()[0].height.toString(), 10)).toString();
+        if (selectNode.style.width === '') {
+            widthVal = 'auto';
+        }
+        if (selectNode.style.height === '') {
+            heightVal = 'auto';
+        }
         this.changedWidthValue = null;
         this.changedHeightValue = null;
-        var content = '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"><label>' + imgWidth +
-            '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"><input type="text" id="imgwidth" class="e-img-width' + ' ' + this.parent.cssClass + '/></div>' +
-            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + '<label>' + imgHeight + '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"> ' +
-            '<input type="text" id="imgheight" class="e-img-height' + ' ' + this.parent.cssClass + '"/></div>';
+        var content = '<div class="e-rte-label' + this.parent.getCssClass(true) + '"><label>' + imgWidth +
+            '</label></div><div class="e-rte-field' + this.parent.getCssClass(true) + '"><input type="text" id="imgwidth" class="e-img-width' + this.parent.getCssClass(true) + '"/></div>' +
+            '<div class="e-rte-label' + this.parent.getCssClass(true) + '">' + '<label>' + imgHeight + '</label></div><div class="e-rte-field' + this.parent.getCssClass(true) + '"> ' +
+            '<input type="text" id="imgheight" class="e-img-height' + this.parent.getCssClass(true) + '"/></div>';
         var contentElem = parseHtml(content);
         contentElem.getElementById('imgwidth').setAttribute('value', widthVal);
         contentElem.getElementById('imgheight').setAttribute('value', heightVal);
@@ -1593,7 +1634,7 @@ var Image = /** @class */ (function () {
         this.widthNum = new TextBox({
             value: formatUnit(widthVal),
             enableRtl: this.parent.enableRtl,
-            cssClass: this.parent.cssClass,
+            cssClass: this.parent.getCssClass(),
             input: function (e) {
                 _this.inputWidthValue = formatUnit(_this.inputValue(e.value));
             }
@@ -1603,7 +1644,7 @@ var Image = /** @class */ (function () {
         this.heightNum = new TextBox({
             value: formatUnit(heightVal),
             enableRtl: this.parent.enableRtl,
-            cssClass: this.parent.cssClass,
+            cssClass: this.parent.getCssClass(),
             input: function (e) {
                 _this.inputHeightValue = formatUnit(_this.inputValue(e.value));
             }
@@ -1643,10 +1684,10 @@ var Image = /** @class */ (function () {
     };
     Image.prototype.insertImage = function (e) {
         this.imagDialog(e);
-        if (!isNullOrUndefined(this.dialogObj)) {
+        if (!isNOU(this.dialogObj)) {
             this.dialogObj.element.style.maxHeight = 'inherit';
             var dialogContent = this.dialogObj.element.querySelector('.e-img-content');
-            if (((!isNullOrUndefined(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')
+            if (((!isNOU(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')
                 || this.parent.editorMode === 'HTML')) {
                 document.getElementById(this.rteID + '_insertImage').focus();
             }
@@ -1662,7 +1703,7 @@ var Image = /** @class */ (function () {
         // eslint-disable-next-line
         var proxy = this;
         var iframe = proxy.parent.iframeSettings.enable;
-        if (proxy.parent.editorMode === 'HTML' && (!iframe && isNullOrUndefined(closest(e.selection.range.startContainer.parentNode, '[id='
+        if (proxy.parent.editorMode === 'HTML' && (!iframe && isNOU(closest(e.selection.range.startContainer.parentNode, '[id='
             // eslint-disable-next-line
             + "'" + this.parent.contentModule.getPanel().id + "'" + ']'))
             || (iframe && !hasClass(e.selection.range.startContainer.parentNode.ownerDocument.querySelector('body'), 'e-lib')))) {
@@ -1675,16 +1716,16 @@ var Image = /** @class */ (function () {
             save = e.selection;
             selectParent = e.selectParent;
         }
-        var uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' + ' ' + this.parent.cssClass });
+        var uploadParentEle = this.parent.createElement('div', { className: 'e-img-uploadwrap e-droparea' + this.parent.getCssClass(true) });
         var deviceImgUpMsg = this.i10n.getConstant('imageDeviceUploadMessage');
         var imgUpMsg = this.i10n.getConstant('imageUploadMessage');
-        var span = this.parent.createElement('span', { className: 'e-droptext' + ' ' + this.parent.cssClass });
+        var span = this.parent.createElement('span', { className: 'e-droptext' + this.parent.getCssClass(true) });
         var spanMsg = this.parent.createElement('span', {
-            className: 'e-rte-upload-text' + ' ' + this.parent.cssClass, innerHTML: ((Browser.isDevice) ? deviceImgUpMsg : imgUpMsg)
+            className: 'e-rte-upload-text' + this.parent.getCssClass(true), innerHTML: ((Browser.isDevice) ? deviceImgUpMsg : imgUpMsg)
         });
         span.appendChild(spanMsg);
         var btnEle = this.parent.createElement('button', {
-            className: 'e-browsebtn' + ' ' + this.parent.cssClass, id: this.rteID + '_insertImage', attrs: { autofocus: 'true', type: 'button' }
+            className: 'e-browsebtn' + this.parent.getCssClass(true), id: this.rteID + '_insertImage', attrs: { autofocus: 'true', type: 'button' }
         });
         span.appendChild(btnEle);
         uploadParentEle.appendChild(span);
@@ -1696,7 +1737,7 @@ var Image = /** @class */ (function () {
         var btnClick = (Browser.isDevice) ? span : btnEle;
         EventHandler.add(btnClick, 'click', this.fileSelect, this);
         var uploadEle = this.parent.createElement('input', {
-            id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }, className: this.parent.cssClass
+            id: this.rteID + '_upload', attrs: { type: 'File', name: 'UploadFiles' }, className: this.parent.getCssClass()
         });
         uploadParentEle.appendChild(uploadEle);
         var altText;
@@ -1704,7 +1745,7 @@ var Image = /** @class */ (function () {
         var filesData;
         this.uploadObj = new Uploader({
             asyncSettings: { saveUrl: this.parent.insertImageSettings.saveUrl, removeUrl: this.parent.insertImageSettings.removeUrl },
-            dropArea: span, multiple: false, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass,
+            dropArea: span, multiple: false, enableRtl: this.parent.enableRtl, cssClass: this.parent.getCssClass(),
             allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
             selected: function (e) {
                 proxy.isImgUploaded = true;
@@ -1714,8 +1755,8 @@ var Image = /** @class */ (function () {
                 _this.parent.trigger(events.imageSelected, selectArgs, function (selectArgs) {
                     if (!selectArgs.cancel) {
                         _this.checkExtension(selectArgs.filesData[0]);
-                        altText = selectArgs.filesData[0].name;
-                        if (_this.parent.editorMode === 'HTML' && isNullOrUndefined(_this.parent.insertImageSettings.path)) {
+                        altText = selectArgs.filesData[0].name.replace(/\.[a-zA-Z0-9]+$/, '');
+                        if (_this.parent.editorMode === 'HTML' && isNOU(_this.parent.insertImageSettings.path)) {
                             var reader_1 = new FileReader();
                             // eslint-disable-next-line
                             reader_1.addEventListener('load', function (e) {
@@ -1734,8 +1775,8 @@ var Image = /** @class */ (function () {
                                     }
                                 };
                                 proxy.inputUrl.setAttribute('disabled', 'true');
-                                if (isNullOrUndefined(proxy.parent.insertImageSettings.saveUrl) && _this.isAllowedTypes
-                                    && !isNullOrUndefined(_this.dialogObj)) {
+                                if (isNOU(proxy.parent.insertImageSettings.saveUrl) && _this.isAllowedTypes
+                                    && !isNOU(_this.dialogObj)) {
                                     _this.dialogObj.getButtons(0).element.removeAttribute('disabled');
                                 }
                             });
@@ -1754,7 +1795,7 @@ var Image = /** @class */ (function () {
             },
             success: function (e) {
                 _this.parent.trigger(events.imageUploadSuccess, e, function (e) {
-                    if (!isNullOrUndefined(_this.parent.insertImageSettings.path)) {
+                    if (!isNOU(_this.parent.insertImageSettings.path)) {
                         var url = _this.parent.insertImageSettings.path + e.file.name;
                         // eslint-disable-next-line
                         var value = { url: url, selection: save };
@@ -1770,7 +1811,7 @@ var Image = /** @class */ (function () {
                         };
                         proxy.inputUrl.setAttribute('disabled', 'true');
                     }
-                    if (e.operation === 'upload' && !isNullOrUndefined(_this.dialogObj)) {
+                    if (e.operation === 'upload' && !isNOU(_this.dialogObj)) {
                         _this.dialogObj.getButtons(0).element.removeAttribute('disabled');
                     }
                 });
@@ -1778,9 +1819,9 @@ var Image = /** @class */ (function () {
             failure: function (e) {
                 _this.parent.trigger(events.imageUploadFailed, e);
             },
-            removing: function () {
+            removing: function (removeEventArgs) {
                 // eslint-disable-next-line
-                _this.parent.trigger(events.imageRemoving, e, function (e) {
+                _this.parent.trigger(events.imageRemoving, removeEventArgs, function (e) {
                     proxy.isImgUploaded = false;
                     _this.dialogObj.getButtons(0).element.disabled = true;
                     proxy.inputUrl.removeAttribute('disabled');
@@ -2069,7 +2110,7 @@ var Image = /** @class */ (function () {
                 saveUrl: this.parent.insertImageSettings.saveUrl,
                 removeUrl: this.parent.insertImageSettings.removeUrl
             },
-            cssClass: classes.CLS_RTE_DIALOG_UPLOAD + ' ' + this.parent.cssClass,
+            cssClass: classes.CLS_RTE_DIALOG_UPLOAD + this.parent.getCssClass(true),
             dropArea: this.parent.element,
             allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
             removing: function () {
@@ -2099,10 +2140,10 @@ var Image = /** @class */ (function () {
                     isUploading = true;
                     _this.parent.trigger(events.imageUploading, e, function (imageUploadingArgs) {
                         if (imageUploadingArgs.cancel) {
-                            if (!isNullOrUndefined(imageElement)) {
+                            if (!isNOU(imageElement)) {
                                 detach(imageElement);
                             }
-                            if (!isNullOrUndefined(_this.popupObj.element)) {
+                            if (!isNOU(_this.popupObj.element)) {
                                 detach(_this.popupObj.element);
                             }
                         }
@@ -2199,7 +2240,7 @@ var Image = /** @class */ (function () {
         imageElement.classList.add(classes.CLS_IMG_FOCUS);
         e.element = imageElement;
         this.parent.trigger(events.imageUploadSuccess, e, function (e) {
-            if (!isNullOrUndefined(_this.parent.insertImageSettings.path)) {
+            if (!isNOU(_this.parent.insertImageSettings.path)) {
                 var url = _this.parent.insertImageSettings.path + e.file.name;
                 imageElement.src = url;
                 imageElement.setAttribute('alt', e.file.name);
@@ -2214,7 +2255,7 @@ var Image = /** @class */ (function () {
     };
     Image.prototype.imagePaste = function (args) {
         var _this = this;
-        if (args.text.length === 0 && !isNullOrUndefined(args.file)) {
+        if (args.text.length === 0 && !isNOU(args.file)) {
             // eslint-disable-next-line
             var proxy_1 = this;
             var reader_2 = new FileReader();
@@ -2223,7 +2264,7 @@ var Image = /** @class */ (function () {
             reader_2.addEventListener('load', function (e) {
                 var url = {
                     cssClass: (proxy_1.parent.insertImageSettings.display === 'inline' ? classes.CLS_IMGINLINE : classes.CLS_IMGBREAK),
-                    url: _this.parent.insertImageSettings.saveFormat === 'Base64' || !isNullOrUndefined(args.callBack) ?
+                    url: _this.parent.insertImageSettings.saveFormat === 'Base64' || !isNOU(args.callBack) ?
                         reader_2.result : URL.createObjectURL(convertToBlob(reader_2.result)),
                     width: {
                         width: proxy_1.parent.insertImageSettings.width, minWidth: proxy_1.parent.insertImageSettings.minWidth,
@@ -2234,7 +2275,7 @@ var Image = /** @class */ (function () {
                         maxHeight: proxy_1.parent.insertImageSettings.maxHeight
                     }
                 };
-                if (!isNullOrUndefined(args.callBack)) {
+                if (!isNOU(args.callBack)) {
                     args.callBack(url);
                     return;
                 }
@@ -2271,14 +2312,14 @@ var Image = /** @class */ (function () {
      * @method destroy
      * @returns {void}
      * @hidden
-
+     * @deprecated
      */
     /* eslint-enable */
     Image.prototype.destroy = function () {
-        this.prevSelectedImgEle = undefined;
         if (isNOU(this.parent)) {
             return;
         }
+        this.prevSelectedImgEle = undefined;
         this.removeEventListener();
     };
     Image.prototype.moduleDestroy = function () {