@syncfusion/ej2-richtexteditor 20.3.61 → 20.4.40

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

@@ -339,7 +339,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 this.focusIn();
             }
         }
-        var tool = executeGroup[commandName];
+        var tool = executeGroup["" + commandName];
         if (option && option.undo) {
             if (option.undo && this.formatter.getUndoRedoStack().length === 0) {
                 this.formatter.saveData();
@@ -564,8 +564,10 @@ var RichTextEditor = /** @class */ (function (_super) {
                 audioElm[i].classList.add('e-rte-audio');
                 audioElm[i].classList.add(classes.CLS_AUDIOINLINE);
             }
+            // eslint-disable-next-line max-len
             if (!audioElm[i].parentElement.classList.contains(classes.CLS_CLICKELEM) && !audioElm[i].parentElement.classList.contains(classes.CLS_AUDIOWRAP)) {
                 var audioWrapElem = this.createElement('span', { className: classes.CLS_AUDIOWRAP });
+                audioWrapElem.setAttribute('style', 'width:300px; margin:0 auto;');
                 audioWrapElem.contentEditable = 'false';
                 var audioInnerWrapElem = this.createElement('span', { className: classes.CLS_CLICKELEM });
                 audioWrapElem.appendChild(audioInnerWrapElem);
@@ -583,6 +585,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 videoElm[i].classList.add('e-rte-video');
                 videoElm[i].classList.add(classes.CLS_VIDEOINLINE);
             }
+            // eslint-disable-next-line max-len
             if (!videoElm[i].parentElement.classList.contains(classes.CLS_CLICKELEM) && !videoElm[i].parentElement.classList.contains(classes.CLS_VIDEOWRAP)) {
                 var videoWrapElem = this.createElement('span', { className: classes.CLS_VIDEOWRAP });
                 videoWrapElem.contentEditable = 'false';
@@ -594,10 +597,12 @@ var RichTextEditor = /** @class */ (function (_super) {
                 }
             }
             if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                // eslint-disable-next-line
                 videoElm[i].addEventListener('play', function (args) {
                     _this.notify(events.mouseDown, { args: args });
                     _this.notify('editAreaClick', { args: args });
                 });
+                // eslint-disable-next-line
                 videoElm[i].addEventListener('pause', function (args) {
                     _this.notify(events.mouseDown, { args: args });
                     _this.notify('editAreaClick', { args: args });
@@ -616,6 +621,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.eventInitializer = function () {
         this.wireEvents();
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     RichTextEditor.prototype.cleanList = function (e) {
         var range = this.getRange();
         var currentStartContainer = range.startContainer;
@@ -663,6 +669,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             if (closest(startNode, 'pre') &&
                 (e.which === 8 && range.startContainer.textContent.charCodeAt(range.startOffset - 1) === 8203) ||
                 (e.which === 46 && range.startContainer.textContent.charCodeAt(range.startOffset) === 8203)) {
+                // eslint-disable-next-line
                 var regEx = new RegExp(String.fromCharCode(8203), 'g');
                 var pointer = e.which === 8 ? range.startOffset - 1 : range.startOffset;
                 range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');
@@ -681,6 +688,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                 var bool = true;
                 var removeNodeArray = [];
                 for (i = index; i >= 0; i--) {
+                    // eslint-disable-next-line max-len
                     if (parentEle.childNodes[i].nodeType === 3 && parentEle.childNodes[i].textContent.charCodeAt(0) === 8203 && bool) {
                         removeNodeArray.push(i);
                     }
@@ -739,7 +747,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
         this.notify(events.keyUp, { member: 'keyup', args: e });
-        if (e.keyCode == 39 || e.keyCode == 37) {
+        if (e.keyCode === 39 || e.keyCode === 37) {
             this.notify(events.tableModulekeyUp, { member: 'tableModulekeyUp', args: e });
         }
         if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||
@@ -1158,6 +1166,7 @@ var RichTextEditor = /** @class */ (function (_super) {
      * @hidden
 
      */
+    /* eslint-disable */
     RichTextEditor.prototype.onPropertyChanged = function (newProp, oldProp) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
@@ -1197,7 +1206,7 @@ var RichTextEditor = /** @class */ (function (_super) {
                     break;
                 }
                 case 'valueTemplate':
-                    this.setValue();
+                    this.setValue(true);
                     if (this.showCharCount) {
                         this.countModule.refresh();
                     }
@@ -1293,7 +1302,6 @@ var RichTextEditor = /** @class */ (function (_super) {
                     this.notify(events.xhtmlValidation, { module: 'XhtmlValidation', newProp: newProp, oldProp: oldProp });
                     break;
                 case 'quickToolbarSettings':
-                    // eslint-disable-next-line
                     newProp.quickToolbarSettings.showOnRightClick ? this.wireContextEvent() : this.unWireContextEvent();
                     this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });
                     break;
@@ -1303,6 +1311,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
     };
+    /* eslint-enable */
     /**
      * @hidden
      * @returns {void}
@@ -1644,7 +1653,8 @@ var RichTextEditor = /** @class */ (function (_super) {
         styleEle.rel = 'stylesheet';
         return styleEle;
     };
-    RichTextEditor.prototype.setValue = function () {
+    RichTextEditor.prototype.setValue = function (isPropertyChange) {
+        var _this = this;
         if (this.valueTemplate) {
             var regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
             if (regEx.test(this.valueTemplate)) {
@@ -1652,11 +1662,30 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
             else {
                 var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
-                for (var i = 0; i < compiledTemplate.length; i++) {
-                    var item = compiledTemplate[i];
-                    append([item], this.element);
+                if (typeof this.valueTemplate !== 'string' && this.isReact) {
+                    this.displayTempElem = this.createElement('div');
+                    for (var i = 0; i < compiledTemplate.length; i++) {
+                        var item = compiledTemplate[i];
+                        append([item], this.displayTempElem);
+                    }
+                    this.renderTemplates(function () {
+                        _this.inputElement.innerHTML = _this.displayTempElem.childNodes[0].innerHTML;
+                        _this.setProperties({ value: _this.inputElement.innerHTML.trim() });
+                    });
+                }
+                else {
+                    var appendElem = this.element;
+                    if (isPropertyChange) {
+                        this.inputElement.innerHTML = '';
+                        appendElem = this.inputElement;
+                    }
+                    for (var i = 0; i < compiledTemplate.length; i++) {
+                        var item = compiledTemplate[i];
+                        append([item], appendElem);
+                    }
+                    this.setProperties({ value: appendElem.innerHTML.trim() });
+                    this.renderReactTemplates();
                 }
-                this.setProperties({ value: this.element.innerHTML.trim() });
             }
         }
         else {
@@ -1672,6 +1701,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    RichTextEditor.prototype.renderTemplates = function (callBack) {
+        this.renderReactTemplates(callBack);
+    };
     RichTextEditor.prototype.updateResizeFlag = function () {
         this.isResizeInitialized = true;
     };
@@ -1741,7 +1774,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         var rzHandle = this.element.querySelector('.' + classes.CLS_RTE_RES_HANDLE);
         var rzHeight = this.enableResize ? (!isNOU(rzHandle) ? (rzHandle.offsetHeight + 8) : 0) : 0;
         var expandPopHeight = this.getToolbar() ? this.toolbarModule.getExpandTBarPopHeight() : 0;
-        if (this.toolbarSettings.type === ToolbarType.Expand && isExpand && target !== 'preview') {
+        if (this.toolbarSettings.type === ToolbarType.Expand && isExpand) {
             heightValue = (this.height === 'auto' && rzHeight === 0) ? 'auto' : rteHeight - (tbHeight + expandPopHeight + rzHeight) + 'px';
             topValue = (!this.toolbarSettings.enableFloating) ? expandPopHeight : 0;
         }

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

@@ -130,7 +130,7 @@ export function pageYOffset(e, parentElement, isIFrame) {
  */
 export function getTooltipText(item, serviceLocator) {
     var i10n = serviceLocator.getService('rteLocale');
-    var itemLocale = toolsLocale[item];
+    var itemLocale = toolsLocale["" + item];
     var tooltipText = i10n.getConstant(itemLocale);
     return tooltipText;
 }
@@ -153,17 +153,17 @@ export function setToolbarStatus(e, isPopToolbar, self) {
             var itemStr = item && item.toLocaleLowerCase();
             if (item && (itemStr === key) || (item === 'UL' && key === 'unorderedlist') || (item === 'OL' && key === 'orderedlist') ||
                 (itemStr === 'pre' && key === 'insertcode')) {
-                if (typeof data[key] === 'boolean') {
-                    if (data[key] === true) {
+                if (typeof data["" + key] === 'boolean') {
+                    if (data["" + key] === true) {
                         addClass([e.tbElements[j]], [classes.CLS_ACTIVE]);
                     }
                     else {
                         removeClass([e.tbElements[j]], [classes.CLS_ACTIVE]);
                     }
                 }
-                else if ((typeof data[key] === 'string' || data[key] === null) &&
+                else if ((typeof data["" + key] === 'string' || data["" + key] === null) &&
                     getIndex(key, e.parent.toolbarSettings.items) > -1) {
-                    var value = ((data[key]) ? data[key] : '');
+                    var value = ((data["" + key]) ? data["" + key] : '');
                     var result = '';
                     switch (key) {
                         case 'formats': {
@@ -177,7 +177,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(formatItems, value, 'subCommand', 'text');
                             dropDown.formatDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.format.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
+                                '<span class="e-rte-dropdown-btn-text' + (isNOU(e.parent.cssClass) ? '' : ' ' + e.parent.cssClass) + '">'
                                 + (isNOU(result) ? formatContent : result) +
                                 '</span></span>');
                             dropDown.formatDropDown.dataBind();
@@ -207,7 +207,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             e.tbElements[j].title = name_1;
                             dropDown.fontNameDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontFamily.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
+                                '<span class="e-rte-dropdown-btn-text' + (isNOU(e.parent.cssClass) ? '' : ' ' + e.parent.cssClass) + '">'
                                 + name_1 + '</span></span>');
                             dropDown.fontNameDropDown.dataBind();
                             break;
@@ -223,7 +223,7 @@ export function setToolbarStatus(e, isPopToolbar, self) {
                             result = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), 'value', 'text');
                             dropDown.fontSizeDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.fontSize.width + '" >' +
-                                '<span class="e-rte-dropdown-btn-text' + ' ' + e.parent.cssClass + '">'
+                                '<span class="e-rte-dropdown-btn-text' + (isNOU(e.parent.cssClass) ? '' : ' ' + e.parent.cssClass) + '">'
                                 + getFormattedFontSize(result) + '</span></span>');
                             dropDown.fontSizeDropDown.dataBind();
                             break;
@@ -305,7 +305,7 @@ export function updateUndoRedoStatus(baseToolbar, undoRedoStatus) {
         var key = keys_2[_i];
         var target = tbItems[trgItems[i]];
         if (target) {
-            baseToolbar.toolbarObj.enableItems(target, undoRedoStatus[key]);
+            baseToolbar.toolbarObj.enableItems(target, undoRedoStatus["" + key]);
         }
         i++;
     }

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

@@ -48,7 +48,7 @@ export declare class Audio {
     private editAreaClickHandler;
     private isAudioElem;
     private showAudioQuickToolbar;
-    private hideAudioQuickToolbar;
+    hideAudioQuickToolbar(): void;
     private insertingAudio;
     insertAudio(e: IImageNotifyArgs): void;
     private audioUrlPopup;

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

@@ -98,6 +98,7 @@ var Audio = /** @class */ (function () {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Audio.prototype.touchStart = function (e, ele) {
         if (this.parent.readonly) {
             return;
@@ -304,6 +305,7 @@ var Audio = /** @class */ (function () {
         }
     };
     Audio.prototype.audioRemovePost = function (src) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
         var absoluteUrl = '';
         if (isNOU(this.parent.insertAudioSettings.removeUrl) || this.parent.insertAudioSettings.removeUrl === '') {
@@ -315,8 +317,9 @@ var Audio = /** @class */ (function () {
         else {
             absoluteUrl = new URL(src, document.baseURI).href;
         }
-        this.removingAudioName = absoluteUrl.replace(/^.*[\\\/]/, '');
+        this.removingAudioName = absoluteUrl.replace(/^.*[\\/]/, '');
         var xhr = new XMLHttpRequest();
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         xhr.addEventListener('readystatechange', function () {
             if (this.readyState === 4 && this.status === 200) {
                 proxy.triggerPost(this.response);
@@ -350,6 +353,7 @@ var Audio = /** @class */ (function () {
             }
         }
         if (this.isAudioElem(e.target)) {
+            this.audEle = e.target.querySelector('audio');
             e.preventDefault();
         }
     };
@@ -489,8 +493,6 @@ var Audio = /** @class */ (function () {
             addClass([target.querySelector('audio')], [classes.CLS_AUD_FOCUS]);
             target.querySelector('audio').style.outline = '2px solid #4a90e2';
         }
-        var pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
-            this.parent.element.getBoundingClientRect().top + args.clientY : args.pageY;
         if (this.parent.quickToolbarModule.audioQTBar) {
             if (e.isNotify) {
                 setTimeout(function () {
@@ -546,7 +548,7 @@ var Audio = /** @class */ (function () {
             cssClass: classes.CLS_RTE_ELEMENTS,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'inherit',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
@@ -618,7 +620,7 @@ var Audio = /** @class */ (function () {
         var placeUrl = this.i10n.getConstant('audioUrl');
         this.inputUrl = this.parent.createElement('input', {
             className: 'e-input e-audio-url',
-            attrs: { placeholder: placeUrl, spellcheck: 'false' }
+            attrs: { placeholder: placeUrl, spellcheck: 'false', 'aria-label': this.i10n.getConstant('audioLinkHeader') }
         });
         this.inputUrl.addEventListener('input', function () {
             if (!isNOU(_this.inputUrl)) {

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

@@ -107,6 +107,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)) {
@@ -300,8 +301,8 @@ var Image = /** @class */ (function () {
         var pos = this.calcPos(e);
         var top = pos.top;
         var left = pos.left;
-        var imgWid = e.width;
-        var imgHgt = e.height;
+        var imgWid = e.getBoundingClientRect().width;
+        var imgHgt = e.getBoundingClientRect().height;
         var borWid = (Browser.isDevice) ? (4 * parseInt((e.style.outline.slice(-3)), 10)) + 2 :
             (2 * parseInt((e.style.outline.slice(-3)), 10)) + 2; //span border width + image outline width
         var devWid = ((Browser.isDevice) ? 0 : 2); // span border width
@@ -328,7 +329,6 @@ var Image = /** @class */ (function () {
             offsetParent = offsetParent.parentNode;
         }
         if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
-            // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
         if (elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption'))) {
@@ -349,6 +349,7 @@ var Image = /** @class */ (function () {
         if (isNullOrUndefined(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;
@@ -1149,6 +1150,7 @@ var Image = /** @class */ (function () {
         }
     };
     Image.prototype.imageRemovePost = function (src) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
         var absoluteUrl = '';
         if (isNOU(this.parent.insertImageSettings.removeUrl) || this.parent.insertImageSettings.removeUrl === '') {
@@ -1160,8 +1162,9 @@ var Image = /** @class */ (function () {
         else {
             absoluteUrl = new URL(src, document.baseURI).href;
         }
-        this.removingImgName = absoluteUrl.replace(/^.*[\\\/]/, '');
+        this.removingImgName = absoluteUrl.replace(/^.*[\\/]/, '');
         var xhr = new XMLHttpRequest();
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         xhr.addEventListener('readystatechange', function () {
             if (this.readyState === 4 && this.status === 200) {
                 proxy.triggerPost(this.response);
@@ -1176,6 +1179,7 @@ var Image = /** @class */ (function () {
         if (isNOU(removeUrl) || removeUrl === '') {
             return;
         }
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         var file = new File([response], this.removingImgName);
         var ajax = new Ajax(removeUrl, 'POST', true, null);
         var formData = new FormData();
@@ -1325,7 +1329,7 @@ var Image = /** @class */ (function () {
             cssClass: classes.CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'inherit',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
@@ -1474,7 +1478,7 @@ var Image = /** @class */ (function () {
         var placeUrl = this.i10n.getConstant('imageUrl');
         this.inputUrl = this.parent.createElement('input', {
             className: 'e-input e-img-url' + ' ' + this.parent.cssClass,
-            attrs: { placeholder: placeUrl, spellcheck: 'false' }
+            attrs: { placeholder: placeUrl, spellcheck: 'false', 'aria-label': this.i10n.getConstant('imageLinkHeader') }
         });
         this.inputUrl.addEventListener('input', function () {
             if (!isNOU(_this.inputUrl)) {

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

@@ -88,6 +88,7 @@ var Link = /** @class */ (function () {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     Link.prototype.setCssClass = function (e) {
         this.updateCss(this.checkBoxObj, e);
         this.updateCss(this.dialogObj, e);
@@ -261,13 +262,13 @@ var Link = /** @class */ (function () {
         });
         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 + '" class="e-input e-rte-linkTitle' + ' ' + this.parent.cssClass + '"></div>' +
+            '<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 + '" class="e-input e-rte-linkurl' + ' ' + this.parent.cssClass + '"/></div>' +
+            '<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 + '" placeholder="' + textPlace + '">' +
+            '<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;
         var contentElem = parseHtml(content);
         linkContent.appendChild(contentElem);
@@ -293,7 +294,7 @@ var Link = /** @class */ (function () {
             cssClass: CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px', height: 'inherit',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px',
             isModal: Browser.isDevice,
             buttons: [{
                     click: this.insertlink.bind(selectObj),

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

@@ -79,6 +79,7 @@ var Table = /** @class */ (function () {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/tslint/config
     Table.prototype.setCssClass = function (e) {
         if (this.popupObj && e.cssClass) {
             if (isNullOrUndefined(e.oldCssClass)) {
@@ -211,18 +212,17 @@ var Table = /** @class */ (function () {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Table.prototype.tableModulekeyUp = function (e) {
-        var event = e.args;
         if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
             var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-            var selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
             var ele = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)[0];
             ele = (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') ? ele.parentElement : ele;
             if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
                 var closestTd = closest(ele, 'td');
                 ele = !isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
             }
-            if (this.previousTableElement != ele && !isNullOrUndefined(this.previousTableElement)) {
+            if (this.previousTableElement !== ele && !isNullOrUndefined(this.previousTableElement)) {
                 this.previousTableElement.classList.remove(classes.CLS_TABLE_SEL);
             }
         }
@@ -651,7 +651,6 @@ var Table = /** @class */ (function () {
             top: 0,
             left: 0
         };
-        // eslint-disable-next-line
         var offset = elem.getBoundingClientRect();
         var doc = elem.ownerDocument;
         var offsetParent = elem.offsetParent || doc.documentElement;
@@ -666,7 +665,6 @@ var Table = /** @class */ (function () {
             isNestedTable = true;
         }
         if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
-            // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
         if (isNestedTable) {
@@ -835,6 +833,8 @@ var Table = /** @class */ (function () {
         var mouseY = (this.parent.enableRtl) ? -(pageY - this.pageY) : (pageY - this.pageY);
         this.pageX = pageX;
         this.pageY = pageY;
+        var maxiumWidth;
+        var currentTdElement = this.curTable.closest('td');
         var args = { event: e, requestType: 'table' };
         this.parent.trigger(events.onResize, args, function (resizingArgs) {
             if (resizingArgs.cancel) {
@@ -867,6 +867,10 @@ var Table = /** @class */ (function () {
                     if (_this.currentColumnResize === 'first') {
                         mouseX = mouseX - 0.75; //This was done for to make the gripper and the table first/last column will be close.
                         _this.removeResizeElement();
+                        if (currentTdElement) {
+                            maxiumWidth = _this.curTable.getBoundingClientRect().right - _this.calcPos(currentTdElement).left;
+                            _this.curTable.style.maxWidth = maxiumWidth + 'px';
+                        }
                         // Below the value '100' is the 100% width of the parent element.
                         if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX < 0) && currentTableWidth <= 100 &&
                             _this.convertPixelToPercentage(tableWidth - mouseX, widthCompare) <= 100) {
@@ -884,6 +888,10 @@ var Table = /** @class */ (function () {
                     else if (_this.currentColumnResize === 'last') {
                         mouseX = mouseX + 0.75; //This was done for to make the gripper and the table first/last column will be close.
                         _this.removeResizeElement();
+                        if (currentTdElement) {
+                            maxiumWidth = currentTdElement.getBoundingClientRect().right - _this.curTable.getBoundingClientRect().left;
+                            _this.curTable.style.maxWidth = maxiumWidth + 'px';
+                        }
                         // Below the value '100' is the 100% width of the parent element.
                         if (((mouseX !== 0 && 5 < currentColumnCellWidth) || mouseX > 0) &&
                             currentTableWidth <= 100 && _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) <= 100) {
@@ -934,6 +942,12 @@ var Table = /** @class */ (function () {
                     if (!Browser.isDevice) {
                         EventHandler.remove(_this.contentModule.getEditPanel(), 'mouseover', _this.resizeHelper);
                     }
+                    if (currentTdElement) {
+                        // eslint-disable-next-line max-len
+                        var tableBoxPosition = _this.curTable.getBoundingClientRect().left - currentTdElement.getBoundingClientRect().left;
+                        maxiumWidth = Math.abs(tableBoxPosition - currentTdElement.getBoundingClientRect().width) - 5;
+                        _this.curTable.style.maxWidth = maxiumWidth + 'px';
+                    }
                     var widthType = _this.curTable.style.width.indexOf('%') > -1;
                     _this.curTable.style.width = widthType ? _this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
                         : tableWidth + mouseX + 'px';

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

@@ -72,6 +72,7 @@ export declare class ToolbarRenderer implements IRenderer {
      * @param {IColorPickerModel} args - specifies the arguments.
      * @param {string} item - specifies the item.
      * @param {ColorPicker} colorPicker - specifies the colorpicker.
+     * @param {string} defaultColor -specifies the defaultColor.
      * @returns {void}
      * @hidden
 

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

@@ -286,6 +286,7 @@ var ToolbarRenderer = /** @class */ (function () {
      * @param {IColorPickerModel} args - specifies the arguments.
      * @param {string} item - specifies the item.
      * @param {ColorPicker} colorPicker - specifies the colorpicker.
+     * @param {string} defaultColor -specifies the defaultColor.
      * @returns {void}
      * @hidden
 

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

@@ -76,7 +76,7 @@ export declare class Video {
     private alignVideo;
     private editAreaClickHandler;
     private showVideoQuickToolbar;
-    private hideVideoQuickToolbar;
+    hideVideoQuickToolbar(): void;
     private isEmbedVidElem;
     private insertingVideo;
     insertVideo(e: IImageNotifyArgs): void;

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

@@ -385,7 +385,6 @@ var Video = /** @class */ (function () {
             offsetParent = offsetParent.parentNode;
         }
         if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
-            // eslint-disable-next-line
             parentOffset = offsetParent.getBoundingClientRect();
         }
         if (elem && elem.nodeType === 1 && elem.tagName === 'IFRAME') {
@@ -407,6 +406,7 @@ var Video = /** @class */ (function () {
         if (isNullOrUndefined(vidEleStyle)) {
             return;
         }
+        // eslint-disable-next-line
         var width = vidEleStyle.width !== '' ? vidEleStyle.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(vidEleStyle.width) :
             parseInt(vidEleStyle.width, 10) : vid.style.width !== '' ? vid.style.width : vid.width;
         var height = vidEleStyle.height !== '' ? parseInt(vidEleStyle.height, 10) : vid.style.height !== '' ? vid.style.height : vid.height;
@@ -805,6 +805,7 @@ var Video = /** @class */ (function () {
         }
     };
     Video.prototype.videoRemovePost = function (src) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
         var absoluteUrl = '';
         if (isNOU(this.parent.insertVideoSettings.removeUrl) || this.parent.insertVideoSettings.removeUrl === '') {
@@ -816,8 +817,10 @@ var Video = /** @class */ (function () {
         else {
             absoluteUrl = new URL(src, document.baseURI).href;
         }
+        // eslint-disable-next-line no-useless-escape
         this.removingVideoName = absoluteUrl.replace(/^.*[\\\/]/, '');
         var xhr = new XMLHttpRequest();
+        // eslint-disable-next-line @typescript-eslint/tslint/config
         xhr.addEventListener('readystatechange', function () {
             if (this.readyState === 4 && this.status === 200) {
                 proxy.triggerPost(this.response);
@@ -948,7 +951,7 @@ var Video = /** @class */ (function () {
     };
     Video.prototype.showVideoQuickToolbar = function (e) {
         var _this = this;
-        if (e.type !== 'Videos' || isNullOrUndefined(this.parent.quickToolbarModule)
+        if (e.type !== 'Videos' || e.args.detail === 2 || isNullOrUndefined(this.parent.quickToolbarModule)
             || isNullOrUndefined(this.parent.quickToolbarModule.videoQTBar) || isNullOrUndefined(e.args)) {
             return;
         }
@@ -981,6 +984,12 @@ var Video = /** @class */ (function () {
     Video.prototype.hideVideoQuickToolbar = function () {
         if (!isNullOrUndefined(this.contentModule.getEditPanel().querySelector('.' + classes.CLS_VID_FOCUS))) {
             removeClass([this.contentModule.getEditPanel().querySelector('.' + classes.CLS_VID_FOCUS)], classes.CLS_VID_FOCUS);
+            if (!isNOU(this.videoEle)) {
+                this.videoEle.style.outline = '';
+            }
+            if (!isNOU(this.contentModule.getEditPanel().querySelector('.e-vid-resize'))) {
+                detach(this.contentModule.getEditPanel().querySelector('.e-vid-resize'));
+            }
             if (this.quickToolObj && this.quickToolObj.videoQTBar && document.body.contains(this.quickToolObj.videoQTBar.element)) {
                 this.quickToolObj.videoQTBar.hidePopup();
             }
@@ -1026,7 +1035,7 @@ var Video = /** @class */ (function () {
             cssClass: classes.CLS_RTE_ELEMENTS,
             enableRtl: this.parent.enableRtl,
             locale: this.parent.locale,
-            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'inherit',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px',
             position: { X: 'center', Y: (Browser.isDevice) ? 'center' : 'top' },
             isModal: Browser.isDevice,
             buttons: [{
@@ -1109,7 +1118,7 @@ var Video = /** @class */ (function () {
         videoUrl.appendChild(urlContent);
         this.embedInputUrl = this.parent.createElement('textarea', {
             className: 'e-input e-embed-video-url',
-            attrs: { placeholder: 'Paste Embed URL here', type: 'text', tabindex: '-1' }
+            attrs: { placeholder: 'Paste Embed URL here', type: 'text', tabindex: '-1', 'aria-label': this.i10n.getConstant('embedVideoLinkHeader') }
         });
         this.embedInputUrl.addEventListener('keyup', function () {
             if (!isNOU(_this.embedInputUrl)) {

package/src/rich-text-editor/services/renderer-factory.js

@@ -21,8 +21,8 @@ var RendererFactory = /** @class */ (function () {
      */
     RendererFactory.prototype.addRenderer = function (name, type) {
         var rName = getEnumValue(RenderType, name);
-        if (isNullOrUndefined(this.rendererMap[rName])) {
-            this.rendererMap[rName] = type;
+        if (isNullOrUndefined(this.rendererMap["" + rName])) {
+            this.rendererMap["" + rName] = type;
         }
     };
     /**
@@ -35,12 +35,12 @@ var RendererFactory = /** @class */ (function () {
      */
     RendererFactory.prototype.getRenderer = function (name) {
         var rName = getEnumValue(RenderType, name);
-        if (isNullOrUndefined(this.rendererMap[rName])) {
+        if (isNullOrUndefined(this.rendererMap["" + rName])) {
             // eslint-disable-next-line
             throw "The renderer " + rName + " is not found";
         }
         else {
-            return this.rendererMap[rName];
+            return this.rendererMap["" + rName];
         }
     };
     return RendererFactory;