@syncfusion/ej2-richtexteditor 24.2.9 → 25.1.37

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')) {
@@ -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 >= 15) ? expectedX : 15) + 'px';
-                img.style.height = ((expectedX >= 15) ? expectedX : 15) + '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,7 +440,7 @@ 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);
             }
@@ -467,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 = (closest(this.imgEle, 'ol,ul') != null ? this.parent.getInsertImgMaxWidth() - parseInt((getComputedStyle(closest(this.imgEle, 'ol,ul')).paddingLeft), 0) : 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);
@@ -505,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) {
@@ -515,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) {
@@ -587,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');
             }
         }
@@ -627,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);
@@ -650,7 +640,7 @@ var Image = /** @class */ (function () {
         }
         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();
@@ -672,7 +662,7 @@ var Image = /** @class */ (function () {
         }
         switch (originalEvent.action) {
             case 'escape':
-                if (!isNullOrUndefined(this.dialogObj)) {
+                if (!isNOU(this.dialogObj)) {
                     this.dialogObj.close();
                 }
                 break;
@@ -720,7 +710,7 @@ var Image = /** @class */ (function () {
                 }
                 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);
@@ -878,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;
@@ -914,7 +904,7 @@ var Image = /** @class */ (function () {
         }
     };
     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();
@@ -929,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);
@@ -989,7 +979,7 @@ var Image = /** @class */ (function () {
             return;
         }
         this.imagDialog(e);
-        if (!isNullOrUndefined(this.dialogObj)) {
+        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.getCssClass(true) + '">' +
@@ -1024,7 +1014,6 @@ var Image = /** @class */ (function () {
                 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,
@@ -1042,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;
@@ -1059,7 +1048,7 @@ var Image = /** @class */ (function () {
         }
         this.imagDialog(e);
         var altText = this.i10n.getConstant('altText');
-        if (!isNullOrUndefined(this.dialogObj)) {
+        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');
@@ -1077,7 +1066,7 @@ 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) {
@@ -1097,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();
@@ -1207,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);
         }
     };
@@ -1261,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();
@@ -1320,13 +1309,13 @@ 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) {
@@ -1425,7 +1414,7 @@ var Image = /** @class */ (function () {
             }
         };
         var dialogContent = this.parent.createElement('div', { className: 'e-img-content' + this.parent.getCssClass(true) });
-        if ((!isNullOrUndefined(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')
+        if ((!isNOU(this.parent.insertImageSettings.path) && this.parent.editorMode === 'Markdown')
             || this.parent.editorMode === 'HTML') {
             dialogContent.appendChild(this.imgUpload(e));
         }
@@ -1449,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')) {
@@ -1459,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');
                 }
             }
@@ -1487,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)) ||
@@ -1527,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 = '';
             }
         }
     };
@@ -1541,7 +1529,6 @@ 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.getCssClass(true) });
@@ -1578,7 +1565,7 @@ var Image = /** @class */ (function () {
         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 });
@@ -1590,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();
@@ -1599,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,
@@ -1622,12 +1609,18 @@ var Image = /** @class */ (function () {
         var imgHeight = this.i10n.getConstant('imageHeight');
         var imgWidth = this.i10n.getConstant('imageWidth');
         var imgSizeWrap = this.parent.createElement('div', { className: 'e-img-sizewrap' + this.parent.getCssClass(true) });
-        var widthVal = isNullOrUndefined(this.changedWidthValue) && (selectNode.style.width.toString() === 'auto' ||
-            selectNode.style.width !== '') ? selectNode.style.width : !isNullOrUndefined(this.changedWidthValue) ?
+        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.getCssClass(true) + '"><label>' + imgWidth +
@@ -1691,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();
             }
@@ -1710,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')))) {
@@ -1762,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) {
@@ -1782,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');
                                 }
                             });
@@ -1802,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 };
@@ -1818,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');
                     }
                 });
@@ -2147,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);
                             }
                         }
@@ -2247,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);
@@ -2262,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();
@@ -2271,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,
@@ -2282,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;
                 }