@syncfusion/ej2-richtexteditor 20.3.61 → 20.4.38

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;

package/src/rich-text-editor/services/service-locator.js

@@ -21,8 +21,8 @@ var ServiceLocator = /** @class */ (function () {
      */
     /* eslint-enable */
     ServiceLocator.prototype.register = function (name, type) {
-        if (isNullOrUndefined(this.services[name])) {
-            this.services[name] = type;
+        if (isNullOrUndefined(this.services["" + name])) {
+            this.services["" + name] = type;
         }
     };
     /**
@@ -34,11 +34,11 @@ var ServiceLocator = /** @class */ (function () {
 
      */
     ServiceLocator.prototype.getService = function (name) {
-        if (isNullOrUndefined(this.services[name])) {
+        if (isNullOrUndefined(this.services["" + name])) {
             // eslint-disable-next-line
             throw "The service " + name + " is not registered";
         }
-        return this.services[name];
+        return this.services["" + name];
     };
     return ServiceLocator;
 }());

package/src/selection/selection.js

@@ -200,6 +200,7 @@ var NodeSelection = /** @class */ (function () {
      */
     NodeSelection.prototype.getSelectionNodes = function (nodeCollection) {
         nodeCollection = nodeCollection.reverse();
+        // eslint-disable-next-line
         var regEx = new RegExp(String.fromCharCode(8203), 'g');
         for (var index = 0; index < nodeCollection.length; index++) {
             if (nodeCollection[index].nodeType !== 3 || (nodeCollection[index].textContent.trim() === '' ||
@@ -220,6 +221,7 @@ var NodeSelection = /** @class */ (function () {
      */
     NodeSelection.prototype.getSelectionNodesBr = function (nodeCollection) {
         nodeCollection = nodeCollection.reverse();
+        // eslint-disable-next-line
         var regEx = new RegExp(String.fromCharCode(8203), 'g');
         for (var index = 0; index < nodeCollection.length; index++) {
             if (nodeCollection[index].nodeName !== 'BR' &&

package/styles/bootstrap-dark.css

@@ -2618,15 +2618,17 @@
   width: 300px;
 }
 
-.e-dialog .e-vid-uploadwrap .e-droptext {
-  height: 108px;
-}
-
-.e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext {
+.e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
+.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
+.e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
   margin: 0 auto;
   width: 250px;
 }
 
+.e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
+  padding: 8px 4px;
+}
+
 .e-linkheader {
   color: #fff;
 }
@@ -2705,6 +2707,11 @@ span.e-rte-videoboxmark {
   color: #f0f0f0;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-hor-nav:hover {
+  border: solid rgba(0, 0, 0, 0.12);
+  border-width: 0 0 0 1px;
+}
+
 .e-rte-table-popup .e-span-border {
   border: 1px solid #505050;
   display: block;

package/styles/bootstrap.css

@@ -2759,15 +2759,17 @@
   width: 300px;
 }
 
-.e-dialog .e-vid-uploadwrap .e-droptext {
-  height: 108px;
-}
-
-.e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext {
+.e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
+.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
+.e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
   margin: 0 auto;
   width: 250px;
 }
 
+.e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
+  padding: 8px 4px;
+}
+
 .e-linkheader {
   color: #333;
 }
@@ -2846,6 +2848,11 @@ span.e-rte-videoboxmark {
   color: #000;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-hor-nav:hover {
+  border: solid rgba(0, 0, 0, 0.12);
+  border-width: 0 0 0 1px;
+}
+
 .e-rte-table-popup .e-span-border {
   border: 1px solid #ddd;
   display: block;

package/styles/bootstrap4.css

@@ -2846,15 +2846,17 @@
   width: 300px;
 }
 
-.e-dialog .e-vid-uploadwrap .e-droptext {
-  height: 108px;
-}
-
-.e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext {
+.e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
+.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
+.e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext {
   margin: 0 auto;
   width: 250px;
 }
 
+.e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
+  padding: 8px 4px;
+}
+
 .e-linkheader {
   color: #212529;
 }
@@ -2933,6 +2935,11 @@ span.e-rte-videoboxmark {
   color: #212529;
 }
 
+.e-richtexteditor .e-rte-toolbar .e-hor-nav:hover {
+  border: solid rgba(0, 0, 0, 0.12);
+  border-width: 0 0 0 1px;
+}
+
 .e-rte-table-popup .e-span-border {
   border: 1px solid #dee2e6;
   display: block;