@syncfusion/ej2-richtexteditor 23.2.7-52849 → 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);
@@ -771,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) {
@@ -979,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';
@@ -1005,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',
@@ -1022,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'
@@ -1048,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);
@@ -1072,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'
@@ -1124,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');
@@ -1242,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') {
@@ -1299,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'
@@ -1345,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');
@@ -1354,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' },
@@ -1390,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;
@@ -1512,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 () {
@@ -1582,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();
@@ -1591,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);
@@ -1602,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));
             }
@@ -1612,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));
             }
@@ -1684,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);
@@ -1705,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;
@@ -1713,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;
@@ -1787,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');
@@ -2078,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 () {
@@ -2280,14 +2280,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 () {

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

@@ -45,7 +45,7 @@ export declare class Link {
      * @function destroy
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     destroy(): void;
     private moduleDestroy;

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) {
@@ -524,7 +544,7 @@ var Link = /** @class */ (function () {
      * @function destroy
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     Link.prototype.destroy = function () {
         if (isNOU(this.parent)) {

package/src/rich-text-editor/renderer/markdown-renderer.d.ts

@@ -3,7 +3,7 @@ import { IRenderer, IRichTextEditor } from '../base/interface';
  * Markdown module is used to render Rich Text Editor as Markdown editor content
  *
  * @hidden
- * @deprecated
+
  */
 export declare class MarkdownRender implements IRenderer {
     private contentPanel;
@@ -20,7 +20,7 @@ export declare class MarkdownRender implements IRenderer {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     renderPanel(): void;
     /**
@@ -28,7 +28,7 @@ export declare class MarkdownRender implements IRenderer {
      *
      * @returns {Element} - specifies the element
      * @hidden
-     * @deprecated
+
      */
     getPanel(): Element;
     /**
@@ -36,7 +36,7 @@ export declare class MarkdownRender implements IRenderer {
      *
      * @returns {Element} - specifies the element
      * @hidden
-     * @deprecated
+
      */
     getEditPanel(): Element;
     /**
@@ -51,7 +51,7 @@ export declare class MarkdownRender implements IRenderer {
      * @param  {Element} panel - specifies the element.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     setPanel(panel: Element): void;
     /**
@@ -59,7 +59,7 @@ export declare class MarkdownRender implements IRenderer {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     getDocument(): Document;
 }

package/src/rich-text-editor/renderer/markdown-renderer.js

@@ -2,7 +2,7 @@
  * Markdown module is used to render Rich Text Editor as Markdown editor content
  *
  * @hidden
- * @deprecated
+
  */
 var MarkdownRender = /** @class */ (function () {
     /**
@@ -18,7 +18,7 @@ var MarkdownRender = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     MarkdownRender.prototype.renderPanel = function () {
         var rteObj = this.parent;
@@ -37,7 +37,7 @@ var MarkdownRender = /** @class */ (function () {
      *
      * @returns {Element} - specifies the element
      * @hidden
-     * @deprecated
+
      */
     MarkdownRender.prototype.getPanel = function () {
         return this.contentPanel;
@@ -47,7 +47,7 @@ var MarkdownRender = /** @class */ (function () {
      *
      * @returns {Element} - specifies the element
      * @hidden
-     * @deprecated
+
      */
     MarkdownRender.prototype.getEditPanel = function () {
         return this.editableElement;
@@ -66,7 +66,7 @@ var MarkdownRender = /** @class */ (function () {
      * @param  {Element} panel - specifies the element.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     MarkdownRender.prototype.setPanel = function (panel) {
         this.contentPanel = panel;
@@ -76,7 +76,7 @@ var MarkdownRender = /** @class */ (function () {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     MarkdownRender.prototype.getDocument = function () {
         return this.getEditPanel().ownerDocument;

package/src/rich-text-editor/renderer/popup-renderer.d.ts

@@ -4,7 +4,7 @@ import { BaseQuickToolbar } from '../actions/base-quick-toolbar';
  * `Popup renderer` module is used to render popup in RichTextEditor.
  *
  * @hidden
- * @deprecated
+
  */
 export declare class PopupRenderer implements IRenderer {
     private popupObj;
@@ -23,7 +23,7 @@ export declare class PopupRenderer implements IRenderer {
      * @param {BaseQuickToolbar} args - specifies  the arguments.
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     renderPopup(args: BaseQuickToolbar): void;
     /**
@@ -31,7 +31,7 @@ export declare class PopupRenderer implements IRenderer {
      *
      * @returns {void}
      * @hidden
-     * @deprecated
+
      */
     renderPanel(): void;
     /**
@@ -39,7 +39,7 @@ export declare class PopupRenderer implements IRenderer {
      *
      * @returns {Element} - specifies the element
      * @hidden
-     * @deprecated
+
      */
     getPanel(): Element;
     /**
@@ -48,7 +48,7 @@ export declare class PopupRenderer implements IRenderer {
      * @returns {void}
      * @param  {Element} panel - specifies the element
      * @hidden
-     * @deprecated
+
      */
     setPanel(panel: Element): void;
 }