@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.41

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

@@ -265,18 +265,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');
@@ -429,8 +429,8 @@ var Image = /** @class */ (function () {
                 img.removeAttribute('height');
             }
             else {
-                img.style.width = expectedX + 'px';
-                img.style.height = expectedX + 'px';
+                img.style.width = ((expectedX >= 15) ? expectedX : 15) + 'px';
+                img.style.height = ((expectedX >= 15) ? expectedX : 15) + 'px';
             }
         }
     };
@@ -459,7 +459,6 @@ var Image = /** @class */ (function () {
                 _this.setAspectRatio(_this.imgEle, parseInt(width, 10), parseInt(height, 10), args);
                 _this.resizeImgDupPos(_this.imgEle);
                 _this.imgResizePos(_this.imgEle, _this.imgResizeDiv);
-                _this.parent.setContentHeight('', false);
             }
         });
     };
@@ -474,7 +473,7 @@ var Image = /** @class */ (function () {
         else if (isNOU(this.parent.insertImageSettings.maxHeight)) {
             this.imgEle.style.maxHeight = '';
         }
-        this.imgEle.style.maxWidth = this.parent.getInsertImgMaxWidth() + 'px';
+        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);
@@ -699,13 +698,22 @@ 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;
@@ -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) {
@@ -970,19 +978,19 @@ var Image = /** @class */ (function () {
         }
         this.imagDialog(e);
         if (!isNullOrUndefined(this.dialogObj)) {
-            var linkWrap = this.parent.createElement('div', { className: 'e-img-linkwrap' + ' ' + this.parent.cssClass });
+            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,11 +1004,12 @@ 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',
@@ -1013,7 +1022,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'
@@ -1039,13 +1048,13 @@ 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 });
+            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);
@@ -1063,7 +1072,7 @@ var Image = /** @class */ (function () {
                             _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'
@@ -1115,14 +1124,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');
@@ -1233,11 +1242,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') {
@@ -1290,7 +1299,7 @@ var Image = /** @class */ (function () {
                             _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 +1345,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,20 +1354,20 @@ 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: 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' },
@@ -1381,12 +1390,12 @@ var Image = /** @class */ (function () {
                 _this.dialogObj = null;
             }
         };
-        var dialogContent = this.parent.createElement('div', { className: 'e-img-content' + ' ' + this.parent.cssClass });
+        var dialogContent = this.parent.createElement('div', { className: 'e-img-content' + this.parent.getCssClass(true) });
         if ((!isNullOrUndefined(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;
@@ -1503,10 +1512,10 @@ var Image = /** @class */ (function () {
     // 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 () {
@@ -1573,7 +1582,7 @@ 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 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) ?
             this.changedWidthValue : (parseInt(selectNode.getClientRects()[0].width.toString(), 10)).toString();
@@ -1582,10 +1591,10 @@ var Image = /** @class */ (function () {
             this.changedHeightValue : (parseInt(selectNode.getClientRects()[0].height.toString(), 10)).toString();
         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 +1602,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 +1612,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));
             }
@@ -1675,16 +1684,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 +1705,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 +1713,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;
@@ -1778,9 +1787,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 +2078,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 () {
@@ -2275,10 +2284,10 @@ var Image = /** @class */ (function () {
      */
     /* eslint-enable */
     Image.prototype.destroy = function () {
-        this.prevSelectedImgEle = undefined;
         if (isNOU(this.parent)) {
             return;
         }
+        this.prevSelectedImgEle = undefined;
         this.removeEventListener();
     };
     Image.prototype.moduleDestroy = function () {

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

@@ -129,7 +129,7 @@ var Link = /** @class */ (function () {
                 pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + parentTop + args.clientY : args.pageY;
             }
             if (this.quickToolObj.linkQTBar) {
-                this.quickToolObj.linkQTBar.showPopup(pageX, pageY, range.endContainer);
+                this.quickToolObj.linkQTBar.showPopup(pageX, pageY, range.endContainer, 'link');
             }
         }
     };
@@ -160,12 +160,32 @@ var Link = /** @class */ (function () {
                 if (isPopupOpen) {
                     return;
                 }
-                this.showLinkQuickToolbar({
-                    args: args,
-                    isNotify: false,
-                    type: 'Links',
-                    elements: [args.target]
-                });
+                if (e.args.ctrlKey === false) {
+                    this.showLinkQuickToolbar({
+                        args: args,
+                        isNotify: false,
+                        type: 'Links',
+                        elements: [args.target]
+                    });
+                }
+                else {
+                    var selection = this.parent.formatter.editorManager.nodeSelection;
+                    var range = selection.getRange(this.parent.contentModule.getDocument());
+                    var args_1 = {
+                        args: {
+                            item: {
+                                subCommand: 'OpenLink',
+                                command: 'Links',
+                                name: ''
+                            },
+                            originalEvent: e.args
+                        },
+                        selectNode: selection.getNodeCollection(range),
+                        selectParent: selection.getParentNodeCollection(range),
+                        selection: selection.save(range, this.parent.contentModule.getDocument())
+                    };
+                    this.parent.notify(events.openLink, args_1);
+                }
             }
             else {
                 this.hideLinkQuickToolbar();
@@ -222,7 +242,7 @@ var Link = /** @class */ (function () {
     };
     Link.prototype.showDialog = function () {
         this.openDialog(false);
-        this.setCssClass({ cssClass: this.parent.cssClass });
+        this.setCssClass({ cssClass: this.parent.getCssClass() });
     };
     Link.prototype.closeDialog = function () {
         if (this.dialogObj) {
@@ -255,22 +275,22 @@ var Link = /** @class */ (function () {
         var textPlace = this.i10n.getConstant('textPlaceholder');
         var title = this.i10n.getConstant('linkTitle');
         var linkDialogEle = this.parent.createElement('div', {
-            className: 'e-rte-link-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_rtelink'
+            className: 'e-rte-link-dialog' + this.parent.getCssClass(true), id: this.rteID + '_rtelink'
         });
         this.parent.element.appendChild(linkDialogEle);
         var linkContent = this.parent.createElement('div', {
-            className: 'e-rte-linkcontent' + ' ' + this.parent.cssClass, id: this.rteID + '_linkContent'
+            className: 'e-rte-linkcontent' + this.parent.getCssClass(true), id: this.rteID + '_linkContent'
         });
         var htmlTextbox = (this.parent.editorMode === 'HTML') ? '<label>' + linkTooltip +
-            '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '"aria-label="' + this.i10n.getConstant('linkTitle') + '" class="e-input e-rte-linkTitle' + ' ' + this.parent.cssClass + '"></div>' +
-            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
-            '<input type="checkbox" class="e-rte-linkTarget' + ' ' + this.parent.cssClass + '"  data-role ="none"></div>' : '';
-        var content = '<div class="e-rte-label' + ' ' + this.parent.cssClass + '"><label>' + linkWebAddress + '</label></div>' + '<div class="e-rte-field' + ' ' + this.parent.cssClass + '">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '"aria-label="' + this.i10n.getConstant('linkWebUrl') + '" class="e-input e-rte-linkurl' + ' ' + this.parent.cssClass + '"/></div>' +
-            '<div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + '<label>' + linkDisplayText + '</label></div><div class="e-rte-field' + ' ' + this.parent.cssClass + '"> ' +
-            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText' + ' ' + this.parent.cssClass + '"aria-label="' + this.i10n.getConstant('linkText') + '" placeholder="' + textPlace + '">' +
-            '</div><div class="e-rte-label' + ' ' + this.parent.cssClass + '">' + htmlTextbox;
+            '</label></div><div class="e-rte-field' + this.parent.getCssClass(true) + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '"aria-label="' + this.i10n.getConstant('linkTitle') + '" class="e-input e-rte-linkTitle' + this.parent.getCssClass(true) + '"></div>' +
+            '<div class="e-rte-label' + this.parent.getCssClass(true) + '"></div>' + '<div class="e-rte-field' + this.parent.getCssClass(true) + '">' +
+            '<input type="checkbox" class="e-rte-linkTarget' + this.parent.getCssClass(true) + '"  data-role ="none"></div>' : '';
+        var content = '<div class="e-rte-label' + this.parent.getCssClass(true) + '"><label>' + linkWebAddress + '</label></div>' + '<div class="e-rte-field' + this.parent.getCssClass(true) + '">' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder="' + urlPlace + '"aria-label="' + this.i10n.getConstant('linkWebUrl') + '" class="e-input e-rte-linkurl' + this.parent.getCssClass(true) + '"/></div>' +
+            '<div class="e-rte-label' + this.parent.getCssClass(true) + '">' + '<label>' + linkDisplayText + '</label></div><div class="e-rte-field' + this.parent.getCssClass(true) + '"> ' +
+            '<input type="text" data-role ="none" spellcheck="false" class="e-input e-rte-linkText' + this.parent.getCssClass(true) + '"aria-label="' + this.i10n.getConstant('linkText') + '" placeholder="' + textPlace + '">' +
+            '</div><div class="e-rte-label' + this.parent.getCssClass(true) + '">' + htmlTextbox;
         var contentElem = parseHtml(content);
         linkContent.appendChild(contentElem);
         var linkTarget = linkContent.querySelector('.e-rte-linkTarget');
@@ -279,7 +299,7 @@ var Link = /** @class */ (function () {
         var linkTitle = linkContent.querySelector('.e-rte-linkTitle');
         var linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');
         this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl,
-            cssClass: this.parent.cssClass });
+            cssClass: this.parent.getCssClass() });
         this.checkBoxObj.isStringTemplate = true;
         this.checkBoxObj.createElement = this.parent.createElement;
         this.checkBoxObj.appendTo(linkTarget);
@@ -292,16 +312,16 @@ var Link = /** @class */ (function () {
         var dialogModel = {
             header: this.i10n.getConstant('linkHeader'),
             content: linkContent,
-            cssClass: CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
+            cssClass: CLS_RTE_ELEMENTS + this.parent.getCssClass(true),
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
             showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px',
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertlink.bind(selectObj),
-                    buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink' + ' ' + this.parent.cssClass, isPrimary: true }
+                    buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink' + this.parent.getCssClass(true), isPrimary: true }
                 },
-                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat' + ' ' + this.parent.cssClass, content: linkCancel } }],
+                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat' + this.parent.getCssClass(true), content: linkCancel } }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
             animationSettings: { effect: 'None' },
             close: function (event) {

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

@@ -59,6 +59,7 @@ export declare class Table {
     private setBGColor;
     private hideTableQuickToolbar;
     private tableHeader;
+    private getAnchorNode;
     private editAreaClickHandler;
     private tableCellSelect;
     private tableMouseUp;
@@ -91,6 +92,7 @@ export declare class Table {
     private removeRowColumn;
     private removeTable;
     private renderDlgContent;
+    private onIframeMouseDown;
     private docClick;
     private drawTable;
     private editTable;