@syncfusion/ej2-richtexteditor 23.2.7-52849 → 24.1.41-569781

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

@@ -17,12 +17,12 @@ export declare class ToolbarRenderer implements IRenderer {
      * @private
      */
     parent: IRichTextEditor;
-    private popupContainer;
     private currentElement;
     private currentDropdown;
-    private popupOverlay;
     private tooltip;
     private l10n;
+    private dropdownTooltip;
+    private tooltipTargetEle;
     /**
      * Constructor for toolbar renderer module
      *
@@ -41,7 +41,6 @@ export declare class ToolbarRenderer implements IRenderer {
     private tooltipBeforeRender;
     private dropDownOpen;
     private dropDownClose;
-    private removePopupContainer;
     /**
      * renderToolbar method
      *
@@ -60,6 +59,8 @@ export declare class ToolbarRenderer implements IRenderer {
      * @deprecated
      */
     renderDropDownButton(args: IDropDownModel): DropDownButton;
+    private mouseOutHandler;
+    private closeTooltip;
     /**
      * renderListDropDown method
      *
@@ -69,8 +70,6 @@ export declare class ToolbarRenderer implements IRenderer {
      * @deprecated
      */
     renderListDropDown(args: IDropDownModel): DropDownButton;
-    private onPopupOverlay;
-    private setIsModel;
     private paletteSelection;
     /**
      * renderColorPickerDropDown method
@@ -85,7 +84,6 @@ export declare class ToolbarRenderer implements IRenderer {
      */
     renderColorPickerDropDown(args: IColorPickerModel, item: string, colorPicker: ColorPicker, defaultColor: string): DropDownButton;
     private pickerRefresh;
-    private popupModal;
     private setColorPickerContentWidth;
     /**
      * renderColorPicker method

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

@@ -1,5 +1,5 @@
-import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
-import { getInstance, closest, selectAll, detach } from '@syncfusion/ej2-base';
+import { addClass, Browser, removeClass, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU, EventHandler } from '@syncfusion/ej2-base';
+import { getInstance, closest, selectAll } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { Popup, Tooltip } from '@syncfusion/ej2-popups';
@@ -30,21 +30,22 @@ var ToolbarRenderer = /** @class */ (function () {
     }
     ToolbarRenderer.prototype.wireEvent = function () {
         this.parent.on(events.destroy, this.unWireEvent, this);
-        this.parent.on(events.maximizeMinimizeClick, this.destroyTooltip, this);
+        this.parent.on(events.destroyTooltip, this.destroyTooltip, this);
+        this.parent.on(events.closeTooltip, this.closeTooltip, this);
     };
     ToolbarRenderer.prototype.destroyTooltip = function () {
-        if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(document.querySelector(' [data-tooltip-id]'))) {
-            var tooltipTargetEle = this.parent.element.querySelector('[data-tooltip-id]');
+        var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
+            this.parent.contentModule.getDocument();
+        if (!isNullOrUndefined(currentDocument.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(currentDocument.querySelector('[data-tooltip-id]'))) {
+            var tooltipTargetEle = currentDocument.querySelector('[data-tooltip-id]');
             var event_1 = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
             tooltipTargetEle.dispatchEvent(event_1);
         }
     };
     ToolbarRenderer.prototype.unWireEvent = function () {
         this.parent.off(events.destroy, this.unWireEvent);
-        if (this.popupOverlay) {
-            EventHandler.remove(this.popupOverlay, 'click touchmove', this.onPopupOverlay);
-        }
-        this.removePopupContainer();
+        this.parent.off(events.destroyTooltip, this.destroyTooltip);
+        this.parent.off(events.closeTooltip, this.closeTooltip);
     };
     ToolbarRenderer.prototype.toolbarBeforeCreate = function (e) {
         if (this.mode === 'Extended') {
@@ -65,7 +66,7 @@ var ToolbarRenderer = /** @class */ (function () {
     };
     ToolbarRenderer.prototype.dropDownSelected = function (args) {
         this.parent.notify(events.dropDownSelect, args);
-        this.onPopupOverlay();
+        this.destroyTooltip();
     };
     ToolbarRenderer.prototype.beforeDropDownItemRender = function (args) {
         if (this.parent.readonly || !this.parent.enabled) {
@@ -93,36 +94,41 @@ var ToolbarRenderer = /** @class */ (function () {
         if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNOU(args.element.parentElement.querySelector('.e-cell-merge')) &&
             (!isNOU(args.element.parentElement.querySelector('.e-cell-horizontal-split')) || !isNOU(args.element.parentElement.querySelector('.e-cell-vertical-split')))) {
             var listEle = args.element.querySelectorAll('li');
-            if (this.parent.inputElement.querySelectorAll('.e-cell-select').length === 1) {
+            var selectedEles_1 = this.parent.inputElement.querySelectorAll('.e-cell-select');
+            if (selectedEles_1.length === 1) {
                 addClass([listEle[0]], 'e-disabled');
                 removeClass([listEle[1], listEle[2]], 'e-disabled');
             }
-            else if (this.parent.inputElement.querySelectorAll('.e-cell-select').length > 1) {
-                removeClass([listEle[0]], 'e-disabled');
+            else if (selectedEles_1.length > 1) {
+                if (!Array.from(selectedEles_1).every(function (element) {
+                    return element.tagName.toLowerCase() === selectedEles_1[0].tagName.toLowerCase();
+                })) {
+                    addClass([listEle[0]], 'e-disabled');
+                }
+                else {
+                    removeClass([listEle[0]], 'e-disabled');
+                }
                 addClass([listEle[1], listEle[2]], 'e-disabled');
             }
         }
-        if (Browser.isDevice && !args.element.parentElement.classList.contains(classes.CLS_QUICK_DROPDOWN)) {
-            this.popupModal(args.element.parentElement);
+        if (this.parent.showTooltip) {
+            this.dropdownTooltip = new Tooltip({
+                target: '[aria-owns="' + this.parent.getID() + '"].e-rte-elements [title]',
+                showTipPointer: true,
+                openDelay: 400,
+                opensOn: 'Hover',
+                beforeRender: this.tooltipBeforeRender.bind(this),
+                cssClass: this.parent.getCssClass(),
+                windowCollision: true,
+                position: 'BottomCenter'
+            });
+            this.dropdownTooltip.appendTo(args.element);
         }
         this.parent.notify(events.selectionSave, args);
     };
     ToolbarRenderer.prototype.dropDownClose = function (args) {
-        this.removePopupContainer();
         this.parent.notify(events.selectionRestore, args);
     };
-    ToolbarRenderer.prototype.removePopupContainer = function () {
-        if (Browser.isDevice && !isNullOrUndefined(this.popupContainer)) {
-            var popupEle = this.popupContainer.querySelector('.e-dropdown-popup.e-tbar-btn.e-control');
-            if (popupEle) {
-                this.popupContainer.parentNode.insertBefore(popupEle, this.popupContainer.nextSibling);
-                popupEle.style.removeProperty('position');
-                removeClass([popupEle], 'e-popup-modal');
-            }
-            detach(this.popupContainer);
-            this.popupContainer = undefined;
-        }
-    };
     /**
      * renderToolbar method
      *
@@ -156,11 +162,11 @@ var ToolbarRenderer = /** @class */ (function () {
                 openDelay: 400,
                 opensOn: 'Hover',
                 beforeRender: this.tooltipBeforeRender.bind(this),
-                cssClass: this.parent.cssClass,
+                cssClass: this.parent.getCssClass(),
                 windowCollision: true,
                 position: 'BottomCenter'
             });
-            this.tooltip.appendTo(args.target);
+            this.tooltip.appendTo(args.target.parentElement);
         }
     };
     /**
@@ -216,7 +222,7 @@ var ToolbarRenderer = /** @class */ (function () {
                     }
                     //Alignments preselect
                     var alignEle = proxy.parent.getRange().startContainer;
-                    while (alignEle !== proxy.parent.element.querySelector('.e-content') && !isNOU(alignEle.parentElement)) {
+                    while (alignEle !== proxy.parent.inputElement && !isNOU(alignEle.parentElement)) {
                         if (alignEle.nodeName === '#text') {
                             alignEle = alignEle.parentElement;
                         }
@@ -242,7 +248,8 @@ var ToolbarRenderer = /** @class */ (function () {
                         alignEle = alignEle.parentElement;
                     }
                     //image preselect
-                    var imageEle = startNode.closest('img') ? startNode.closest('img') : startNode.querySelector('img');
+                    var closestNode = startNode.closest('img');
+                    var imageEle = closestNode ? closestNode : startNode.querySelector('img');
                     if (args.items[0].command === 'Images') {
                         if (!isNOU(imageEle)) {
                             var index = void 0;
@@ -261,7 +268,7 @@ var ToolbarRenderer = /** @class */ (function () {
                         }
                     }
                     //Formats preselect
-                    if (args.items[0].command === 'Formats') {
+                    if (args.items[0].command === 'Formats' || args.items[0].command === 'Font') {
                         for (var index = 0; index < args.element.childNodes.length; index++) {
                             var divNode = _this.parent.createElement('div');
                             divNode.innerHTML = dropDown.content.trim();
@@ -291,6 +298,32 @@ var ToolbarRenderer = /** @class */ (function () {
         popupElement.setAttribute('aria-owns', this.parent.getID());
         return dropDown;
     };
+    ToolbarRenderer.prototype.mouseOutHandler = function () {
+        if (!isNOU(this.tooltipTargetEle)) {
+            this.tooltipTargetEle.setAttribute('title', this.tooltipTargetEle.getAttribute('data-title'));
+        }
+        else {
+            var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
+                this.parent.contentModule.getDocument();
+            this.tooltipTargetEle = currentDocument.querySelector('[data-title]');
+            this.tooltipTargetEle.setAttribute('title', this.tooltipTargetEle.getAttribute('data-title'));
+        }
+        this.tooltipTargetEle.removeAttribute('data-title');
+        EventHandler.remove(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler);
+    };
+    ToolbarRenderer.prototype.closeTooltip = function (args) {
+        var currentDocument = this.parent.iframeSettings.enable ? this.parent.contentModule.getPanel().ownerDocument :
+            this.parent.contentModule.getDocument();
+        this.tooltipTargetEle = closest(args.target, '[data-tooltip-id]');
+        if (!isNOU(this.tooltipTargetEle) && this.parent.showTooltip && !isNOU(currentDocument.querySelector('.e-tooltip-wrap'))) {
+            this.destroyTooltip();
+            if (!this.tooltipTargetEle.closest('.e-rte-quick-popup')) {
+                this.tooltipTargetEle.setAttribute('data-title', this.tooltipTargetEle.getAttribute('title'));
+                this.tooltipTargetEle.removeAttribute('title');
+                EventHandler.add(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler, this);
+            }
+        }
+    };
     /**
      * renderListDropDown method
      *
@@ -300,6 +333,7 @@ var ToolbarRenderer = /** @class */ (function () {
      * @deprecated
      */
     ToolbarRenderer.prototype.renderListDropDown = function (args) {
+        var _this = this;
         // eslint-disable-next-line
         var proxy = this;
         var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');
@@ -315,6 +349,35 @@ var ToolbarRenderer = /** @class */ (function () {
             enableRtl: this.parent.enableRtl,
             select: this.dropDownSelected.bind(this),
             beforeOpen: function (args) {
+                if (proxy.parent.editorMode !== 'Markdown') {
+                    var startNode = proxy.parent.getRange().startContainer.parentElement;
+                    var listElem = startNode.closest('LI');
+                    var currentLiElem = !isNOU(listElem) ? listElem.parentElement : null;
+                    if (!isNOU(currentLiElem) && (currentLiElem.nodeName === 'OL' || currentLiElem.nodeName === 'UL')) {
+                        if (currentLiElem.nodeName === 'UL' && args.items[0].subCommand === 'NumberFormatList') {
+                            addClass([args.element.childNodes[0]], 'e-active');
+                        }
+                        else if (currentLiElem.nodeName === 'OL' && args.items[0].subCommand === 'BulletFormatList') {
+                            addClass([args.element.childNodes[0]], 'e-active');
+                        }
+                        else {
+                            var currentListStyle = currentLiElem.style.listStyleType.split('-').join('').toLocaleLowerCase();
+                            currentListStyle = currentListStyle === 'decimal' ? 'number' : currentListStyle;
+                            for (var index = 0; index < args.element.childNodes.length; index++) {
+                                if (currentListStyle === args.element.childNodes[index].innerHTML.split(' ').join('').toLocaleLowerCase()) {
+                                    addClass([args.element.childNodes[index]], 'e-active');
+                                }
+                                else if (currentListStyle === '') {
+                                    addClass([args.element.childNodes[index]], 'e-active');
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        addClass([args.element.childNodes[0]], 'e-active');
+                    }
+                }
+                _this.closeTooltip({ target: args.event.target });
                 if (proxy.parent.readonly || !proxy.parent.enabled) {
                     args.cancel = true;
                     return;
@@ -354,39 +417,6 @@ var ToolbarRenderer = /** @class */ (function () {
         };
         return dropDown;
     };
-    // eslint-disable-next-line
-    ToolbarRenderer.prototype.onPopupOverlay = function (args) {
-        if (!isNullOrUndefined(this.popupOverlay)) {
-            closest(this.popupOverlay, '.e-popup-container').style.display = 'none';
-            this.popupOverlay.style.display = 'none';
-            removeClass([this.popupOverlay], 'e-popup-overlay');
-        }
-    };
-    ToolbarRenderer.prototype.setIsModel = function (element) {
-        if (!closest(element, '.e-popup-container')) {
-            this.popupContainer = this.parent.createElement('div', {
-                className: 'e-rte-modal-popup e-popup-container e-center'
-            });
-            element.parentNode.insertBefore(this.popupContainer, element);
-            this.popupContainer.appendChild(element);
-            this.popupContainer.style.zIndex = element.style.zIndex;
-            this.popupContainer.style.display = 'flex';
-            element.style.position = 'relative';
-            addClass([element], 'e-popup-modal');
-            this.popupOverlay = this.parent.createElement('div', { className: 'e-popup-overlay' });
-            // eslint-disable-next-line
-            this.popupOverlay.style.zIndex = (parseInt(element.style.zIndex, null) - 1).toString();
-            this.popupOverlay.style.display = 'block';
-            this.popupContainer.appendChild(this.popupOverlay);
-            EventHandler.add(this.popupOverlay, 'click touchmove', this.onPopupOverlay, this);
-        }
-        else {
-            element.parentElement.style.display = 'flex';
-            this.popupOverlay = element.nextElementSibling;
-            this.popupOverlay.style.display = 'block';
-            addClass([this.popupOverlay], 'e-popup-overlay');
-        }
-    };
     ToolbarRenderer.prototype.paletteSelection = function (dropDownArgs, currentElement) {
         var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');
         var colorbox = [].slice.call(selectAll('.e-tile', ele.parentElement));
@@ -415,7 +445,7 @@ var ToolbarRenderer = /** @class */ (function () {
         var proxy = this;
         var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');
         css += (' ' + ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_DROPDOWN : CLS_FONT_COLOR_DROPDOWN));
-        css += ' ' + this.parent.cssClass;
+        css += this.parent.getCssClass(true);
         var content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });
         var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
         var range;
@@ -427,8 +457,6 @@ var ToolbarRenderer = /** @class */ (function () {
             target: colorPicker.element.parentElement, cssClass: css,
             enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,
             beforeOpen: function (dropDownArgs) {
-                colorPicker.inline = true;
-                colorPicker.dataBind();
                 if (proxy.parent.readonly || !proxy.parent.enabled) {
                     dropDownArgs.cancel = true;
                     return;
@@ -487,9 +515,6 @@ var ToolbarRenderer = /** @class */ (function () {
                 if (focusEle) {
                     focusEle.focus();
                 }
-                if (Browser.isDevice) {
-                    _this.popupModal(dropDownArgs.element.parentElement);
-                }
                 _this.pickerRefresh(dropDownArgs);
             },
             beforeClose: function (dropDownArgs) {
@@ -517,22 +542,6 @@ var ToolbarRenderer = /** @class */ (function () {
             },
             close: function (dropDownArgs) {
                 proxy.parent.notify(events.selectionRestore, {});
-                var dropElement = closest(dropDownArgs.element.parentElement, '.e-popup-container');
-                if (dropElement) {
-                    dropElement.style.display = 'none';
-                    dropElement.lastElementChild.style.display = 'none';
-                    removeClass([dropElement.lastElementChild], 'e-popup-overlay');
-                }
-                if (Browser.isDevice && !isNullOrUndefined(dropElement)) {
-                    var popupEle = dropElement.querySelector('.e-dropdown-popup.e-tbar-btn.e-control');
-                    if (popupEle) {
-                        dropElement.parentNode.insertBefore(popupEle, dropElement.nextSibling);
-                        popupEle.style.removeProperty('position');
-                        removeClass([popupEle], 'e-popup-modal');
-                    }
-                    detach(dropElement);
-                    proxy.popupContainer = undefined;
-                }
             }
         });
         dropDown.isStringTemplate = true;
@@ -560,16 +569,6 @@ var ToolbarRenderer = /** @class */ (function () {
             popupElem.style.width = (popupElem.offsetWidth - 5).toString() + 'px';
         }
     };
-    ToolbarRenderer.prototype.popupModal = function (element) {
-        var popupInst = getInstance(element, Popup);
-        popupInst.relateTo = document.body;
-        popupInst.position = { X: 0, Y: 0 };
-        popupInst.targetType = 'container';
-        popupInst.collision = { X: 'fit', Y: 'fit' };
-        popupInst.offsetY = 4;
-        popupInst.dataBind();
-        this.setIsModel(element);
-    };
     ToolbarRenderer.prototype.setColorPickerContentWidth = function (colorPicker) {
         var colorPickerContent = colorPicker.element.nextSibling;
         if (colorPickerContent.style.width === '0px') {
@@ -596,19 +595,23 @@ var ToolbarRenderer = /** @class */ (function () {
         var colorPicker = new ColorPicker({
             enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
-            inline: false,
-            value: '#fff',
+            inline: true,
+            value: null,
+            cssClass: ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass + ' ' + 'e-rte-picker-init',
             created: function () {
                 var value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
-                colorPicker.setProperties({ value: value });
+                colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
+                colorPicker.value = value;
             },
             mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),
             modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),
+            presetColors: (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode : this.parent.fontColor.colorCode,
+            columns: (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns,
             beforeTileRender: function (args) {
                 args.element.classList.add(CLS_COLOR_PALETTE);
                 args.element.classList.add(CLS_CUSTOM_TILE);
                 if (!isNullOrUndefined(_this.parent.cssClass)) {
-                    var allClassName = _this.parent.cssClass.split(' ');
+                    var allClassName = _this.parent.getCssClass().split(' ');
                     for (var i = 0; i < allClassName.length; i++) {
                         if (allClassName[i].trim() !== '') {
                             args.element.classList.add(allClassName[i]);
@@ -648,10 +651,6 @@ var ToolbarRenderer = /** @class */ (function () {
             }
         });
         colorPicker.isStringTemplate = true;
-        colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
-        colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
-            this.parent.fontColor.colorCode;
-        colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
         colorPicker.createElement = this.parent.createElement;
         colorPicker.appendTo(document.getElementById(args.target));
         return colorPicker;

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

@@ -23,6 +23,7 @@ export declare class Video {
     private isAllowedTypes;
     private pageX;
     private pageY;
+    private mouseX;
     private dialogRenderObj;
     private deletedVid;
     private changedWidthValue;
@@ -51,6 +52,7 @@ export declare class Video {
     private vidResizePos;
     private calcPos;
     private setAspectRatio;
+    private updateVidEleWidth;
     private pixToPerc;
     private vidDupMouseMove;
     private resizing;
@@ -59,6 +61,7 @@ export declare class Video {
     private resizeBtnInit;
     private onToolbarAction;
     private onKeyDown;
+    private handleSelectAll;
     private openDialog;
     private showDialog;
     private closeDialog;

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

@@ -13,6 +13,7 @@ var Video = /** @class */ (function () {
         this.isAllowedTypes = true;
         this.pageX = null;
         this.pageY = null;
+        this.mouseX = null;
         this.deletedVid = [];
         this.parent = parent;
         this.rteID = parent.element.id;
@@ -143,7 +144,7 @@ var Video = /** @class */ (function () {
             var dialogContent = this.vidsizeInput(e);
             var selectObj_1 = { args: e.args, selfVideo: this, selection: e.selection, selectNode: e.selectNode };
             this.dialogObj.setProperties({
-                height: 'inherit', width: '290px', header: vidSizeHeader, content: dialogContent,
+                width: '290px', header: vidSizeHeader, content: dialogContent,
                 buttons: [{
                         // eslint-disable-next-line
                         click: function (e) {
@@ -412,62 +413,50 @@ var Video = /** @class */ (function () {
         if (isNullOrUndefined(vidEleStyle)) {
             return;
         }
-        // eslint-disable-next-line
+        /* eslint-disable */
         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;
+        width = width.toString().match(/\b\d+(\.\d*)?(%|$)\b/g) ? parseFloat(width.toString()) : parseInt(width.toString(), 10);
+        height = height.toString().match(/\b\d+(\.\d*)?(%|$)\b/g) ? parseFloat(height.toString()) : parseInt(height.toString(), 10);
+        /* eslint-enable */
         if (width > height) {
             vid.style.minWidth = this.parent.insertVideoSettings.minWidth === 0 ? '200px' : formatUnit(this.parent.insertVideoSettings.minWidth);
             vid.style.minHeight = this.parent.insertVideoSettings.minHeight === 0 ? '90px' : formatUnit(this.parent.insertVideoSettings.minHeight);
             if (this.parent.insertVideoSettings.resizeByPercent) {
-                if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    var percentageValue = this.pixToPerc((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY), (vid.previousElementSibling || vid.parentElement));
-                    vid.style.width = Math.min(Math.round((percentageValue / vid.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';
-                }
-                else {
-                    vid.style.width = this.pixToPerc(parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY, (vid.previousElementSibling || vid.parentElement)) + '%';
-                }
-                vid.style.height = null;
-                vid.removeAttribute('height');
+                this.updateVidEleWidth(vid, width, height, expectedX, expectedY);
             }
             else if ((vid.style.width === '' && vid.style.height !== '') || (vidEleStyle.width === '' && vidEleStyle.height !== '')) {
                 vid.style.height = expectedY + 'px';
             }
             else if ((vid.style.width !== '' && vid.style.height === '') || (vidEleStyle.width !== '' && vidEleStyle.height === '')) {
-                var currentWidth = ((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) +
-                    parseInt(width.toString(), 10) / parseInt(height.toString(), 10)) <
+                var currentWidth = ((width / height * expectedY) +
+                    width / height) <
                     (this.parent.inputElement.getBoundingClientRect().right - 32) ?
-                    ((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) +
-                        parseInt(width.toString(), 10) / parseInt(height.toString(), 10)) :
+                    ((width / height * expectedY) +
+                        width / height) :
                     (this.parent.inputElement.getBoundingClientRect().right - 32);
                 vid.style.width = currentWidth.toString() + 'px';
             }
             else if (vid.style.width !== '' || vidEleStyle.width !== '') {
-                var currentWidth = (parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) <
+                var currentWidth = (width / height * expectedY) <
                     (this.parent.inputElement.getBoundingClientRect().right - 32) ?
-                    (parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) :
+                    (width / height * expectedY) :
                     (this.parent.inputElement.getBoundingClientRect().right - 32);
                 vid.style.width = currentWidth + 'px';
                 vid.style.height = expectedY + 'px';
             }
             else {
-                vid.setAttribute('width', (parseInt(((parseInt(width.toString(), 10) / parseInt(height.toString(), 10) * expectedY) + parseInt(width.toString(), 10) / parseInt(height.toString(), 10)).toString(), 10)).toString());
+                vid.setAttribute('width', (parseInt(((width / height * expectedY) + width / height).toString(), 10)).toString());
             }
         }
         else if (height > width) {
             if (this.parent.insertVideoSettings.resizeByPercent) {
-                if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
-                    vid.style.width = Math.min(Math.round((parseInt(width.toString(), 10) / vid.getBoundingClientRect().width) * expectedX * 100) / 100, 100) + '%';
-                }
-                else {
-                    vid.style.width = this.pixToPerc((expectedX / parseInt(height.toString(), 10) * expectedY), (vid.previousElementSibling || vid.parentElement)) + '%';
-                }
-                vid.style.height = null;
-                vid.removeAttribute('height');
+                this.updateVidEleWidth(vid, width, height, expectedX, expectedY);
             }
             else if (vid.style.width !== '' || vidEleStyle.width !== '') {
                 vid.style.width = expectedX + 'px';
-                vid.style.height = (parseInt(height.toString(), 10) / parseInt(width.toString(), 10) * expectedX) + 'px';
+                vid.style.height = (height / width * expectedX) + 'px';
             }
             else {
                 vid.setAttribute('width', this.resizeBtnStat.botRight ? (this.getPointX(e.event) - vid.getBoundingClientRect().left).toString() : expectedX.toString());
@@ -485,6 +474,23 @@ var Video = /** @class */ (function () {
             }
         }
     };
+    Video.prototype.updateVidEleWidth = function (vid, width, height, expectedX, expectedY) {
+        if (parseInt('' + vid.getBoundingClientRect().width + '', 10) !== 0 && parseInt('' + width + '', 10) !== 0) {
+            var original = vid.offsetWidth + this.mouseX;
+            var finalWidthByPerc = (original / vid.offsetWidth) * (parseFloat(vid.style.width).toString() === 'NaN' ? (vid.offsetWidth / (parseFloat(getComputedStyle(this.parent.element).width)) * 100) : parseFloat(vid.style.width));
+            vid.style.width = ((finalWidthByPerc > 3) ? finalWidthByPerc : 3) + '%';
+        }
+        else {
+            if (width > height) {
+                vid.style.width = this.pixToPerc(width / height * expectedY, (vid.previousElementSibling || vid.parentElement)) + '%';
+            }
+            else {
+                vid.style.width = this.pixToPerc((expectedX / height * expectedY), (vid.previousElementSibling || vid.parentElement)) + '%';
+            }
+        }
+        vid.style.height = null;
+        vid.removeAttribute('height');
+    };
     Video.prototype.pixToPerc = function (expected, parentEle) {
         return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
     };
@@ -510,7 +516,6 @@ var Video = /** @class */ (function () {
                 _this.setAspectRatio(_this.videoEle, parseInt(width, 10), parseInt(height, 10), args);
                 _this.resizeVidDupPos(_this.videoEle);
                 _this.vidResizePos(_this.videoEle, _this.vidResizeDiv);
-                _this.parent.setContentHeight('', false);
             }
         });
     };
@@ -526,6 +531,7 @@ var Video = /** @class */ (function () {
         var height = parseInt(this.vidDupPos.height, 10) + mouseY;
         this.pageX = pageX;
         this.pageY = pageY;
+        this.mouseX = mouseX;
         if (this.resizeBtnStat.botRight) {
             this.vidDupMouseMove(width + 'px', height + 'px', e);
         }
@@ -692,6 +698,14 @@ var Video = /** @class */ (function () {
                 originalEvent.preventDefault();
                 break;
         }
+        if (originalEvent.ctrlKey && originalEvent.key === 'a') {
+            this.handleSelectAll();
+        }
+    };
+    Video.prototype.handleSelectAll = function () {
+        this.cancelResizeAction();
+        var videoFocusNodes = this.parent.inputElement.querySelectorAll('.' + classes.CLS_VID_FOCUS);
+        removeClass(videoFocusNodes, classes.CLS_VID_FOCUS);
     };
     Video.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
         var range;
@@ -869,6 +883,7 @@ var Video = /** @class */ (function () {
             if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
             }
             else {
+                this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
                 this.dialogObj.hide({ returnValue: true });
                 this.parent.isBlur = true;
                 dispatchEvent(this.parent.element, 'focusout');
@@ -1158,6 +1173,15 @@ var Video = /** @class */ (function () {
                 }
             }
         });
+        if (e.selectNode && ((e.selectNode[0] && e.selectNode[0].nodeType !== 3 &&
+            e.selectNode[0].nodeName !== 'BR' &&
+            (e.selectNode[0].classList &&
+                e.selectNode[0].classList.contains(classes.CLS_VID_CLICK_ELEM))) ||
+            e.selectNode[0].nodeName === 'IFRAME' || e.selectNode[0].nodeName === 'VIDEO')) {
+            var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
+            var sourceElement = e.selectNode[0].querySelector('source');
+            this.inputUrl.value = sourceElement.src.match(regex) ? sourceElement.src : '';
+        }
         var embedUrlBtn = new RadioButton({
             label: this.i10n.getConstant('embeddedCode'),
             checked: true,
@@ -1167,7 +1191,6 @@ var Video = /** @class */ (function () {
             },
             change: function () {
                 urlContent.innerHTML = '';
-                _this.inputUrl.value = '';
                 urlContent.appendChild(_this.embedInputUrl);
             }
         });
@@ -1177,7 +1200,6 @@ var Video = /** @class */ (function () {
             name: 'URL',
             change: function () {
                 urlContent.innerHTML = '';
-                _this.embedInputUrl.value = '';
                 urlContent.appendChild(_this.inputUrl);
             }
         });
@@ -1307,8 +1329,12 @@ var Video = /** @class */ (function () {
                 _this.parent.trigger(events.fileRemoving, e, function (e) {
                     proxy.isVideoUploaded = false;
                     _this.dialogObj.getButtons(0).element.disabled = true;
-                    //proxy.inputUrl.removeAttribute('disabled');
-                    proxy.embedInputUrl.removeAttribute('disabled');
+                    if (proxy.inputUrl.getAttribute('disabled')) {
+                        proxy.inputUrl.removeAttribute('disabled');
+                    }
+                    if (proxy.embedInputUrl.getAttribute('disabled')) {
+                        proxy.embedInputUrl.removeAttribute('disabled');
+                    }
                     if (proxy.uploadUrl) {
                         proxy.uploadUrl.url = '';
                     }
@@ -1369,10 +1395,11 @@ var Video = /** @class */ (function () {
                 this.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.contentModule.getDocument());
                 this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
             }
-            var name_1 = url !== '' ? url.split('/')[url.split('/').length - 1] : embedUrl;
+            var webUrlBtn = document.getElementById('webURL');
+            var name_1 = webUrlBtn.checked ? url.split('/')[url.split('/').length - 1] : embedUrl;
             var value = {
                 cssClass: (proxy.parent.insertVideoSettings.layoutOption === 'Inline' ? classes.CLS_VIDEOINLINE : classes.CLS_VIDEOBREAK),
-                url: url, selection: this.selection, fileName: name_1, isEmbedUrl: embedUrl !== '' ? true : false,
+                url: url, selection: this.selection, fileName: name_1, isEmbedUrl: !webUrlBtn.checked,
                 selectParent: this.selectParent, width: {
                     width: proxy.parent.insertVideoSettings.width, minWidth: proxy.parent.insertVideoSettings.minWidth,
                     maxWidth: proxy.parent.getInsertImgMaxWidth()