@syncfusion/ej2-richtexteditor 24.1.47 → 24.2.3

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

@@ -47,6 +47,7 @@ var Table = /** @class */ (function () {
         this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
         this.parent.on(events.moduleDestroy, this.moduleDestroy, this);
+        this.parent.on(events.afterKeyDown, this.afterKeyDown, this);
     };
     Table.prototype.removeEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -72,6 +73,7 @@ var Table = /** @class */ (function () {
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
         this.parent.off(events.moduleDestroy, this.moduleDestroy);
+        this.parent.off(events.afterKeyDown, this.afterKeyDown);
         if (!Browser.isDevice && this.parent.tableSettings.resize) {
             EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
         }
@@ -229,6 +231,14 @@ var Table = /** @class */ (function () {
                 }
             }
         }
+        if (event.ctrlKey && event.key === 'a') {
+            this.handleSelectAll();
+        }
+    };
+    Table.prototype.handleSelectAll = function () {
+        this.cancelResizeAction();
+        var selectedCells = this.parent.inputElement.querySelectorAll('.' + classes.CLS_TABLE_SEL);
+        removeClass(selectedCells, classes.CLS_TABLE_SEL);
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     Table.prototype.tableModulekeyUp = function (e) {
@@ -262,7 +272,6 @@ var Table = /** @class */ (function () {
                 name: !isInternal ? 'showDialog' : null
             };
             this.insertTableDialog({ self: this, args: args, selection: selection });
-            this.parent.formatter.editorManager.nodeSelection.restore();
         }
     };
     Table.prototype.showDialog = function () {
@@ -607,7 +616,7 @@ var Table = /** @class */ (function () {
             return;
         }
         var target = e.target || e.targetTouches[0].target;
-        var closestTable = closest(target, 'table.e-rte-table');
+        var closestTable = closest(target, 'table.e-rte-table, table.e-rte-paste-table');
         if (!isNOU(this.curTable) && !isNOU(closestTable) && closestTable !== this.curTable &&
             this.parent.contentModule.getEditPanel().contains(closestTable)) {
             this.removeResizeElement();
@@ -1247,6 +1256,7 @@ var Table = /** @class */ (function () {
                 this.popupObj.hide();
             }
             if (this.editdlgObj) {
+                this.parent.notify(events.documentClickClosedBy, { closedBy: "outside click" });
                 this.editdlgObj.hide();
             }
             this.parent.isBlur = true;
@@ -1557,6 +1567,16 @@ var Table = /** @class */ (function () {
     Table.prototype.getModuleName = function () {
         return 'table';
     };
+    Table.prototype.afterKeyDown = function (e) {
+        var _this = this;
+        if (this.curTable) {
+            setTimeout(function () {
+                var mouseOverEvent = document.createEvent('MouseEvents');
+                mouseOverEvent.initEvent('mouseover', true, true);
+                _this.curTable.dispatchEvent(mouseOverEvent);
+            }, 1);
+        }
+    };
     return Table;
 }());
 export { Table };

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

@@ -21,6 +21,7 @@ export declare class ToolbarRenderer implements IRenderer {
     private currentDropdown;
     private tooltip;
     private l10n;
+    private dropdownTooltip;
     /**
      * Constructor for toolbar renderer module
      *

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

@@ -63,6 +63,7 @@ var ToolbarRenderer = /** @class */ (function () {
     };
     ToolbarRenderer.prototype.dropDownSelected = function (args) {
         this.parent.notify(events.dropDownSelect, args);
+        this.destroyTooltip();
     };
     ToolbarRenderer.prototype.beforeDropDownItemRender = function (args) {
         if (this.parent.readonly || !this.parent.enabled) {
@@ -90,12 +91,20 @@ 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');
             }
         }
@@ -143,6 +152,19 @@ var ToolbarRenderer = /** @class */ (function () {
             });
             this.tooltip.appendTo(args.target);
         }
+        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(document.body);
+        }
     };
     /**
      * renderDropDownButton method

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

@@ -59,6 +59,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

@@ -692,6 +692,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 +877,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 +1167,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 +1185,6 @@ var Video = /** @class */ (function () {
             },
             change: function () {
                 urlContent.innerHTML = '';
-                _this.inputUrl.value = '';
                 urlContent.appendChild(_this.embedInputUrl);
             }
         });
@@ -1177,7 +1194,6 @@ var Video = /** @class */ (function () {
             name: 'URL',
             change: function () {
                 urlContent.innerHTML = '';
-                _this.embedInputUrl.value = '';
                 urlContent.appendChild(_this.inputUrl);
             }
         });
@@ -1369,10 +1385,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()

package/styles/bootstrap-dark.css

@@ -995,6 +995,34 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn {
   font-size: 16px;
 }
+.e-richtexteditor .e-clickelem::after,
+.e-richtexteditor .e-video-clickelem::after {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before {
+  bottom: 70%;
+  top: 0;
+}
+.e-richtexteditor .e-clickelem::after {
+  bottom: 0;
+  top: 70%;
+}
+.e-richtexteditor .e-video-clickelem::before {
+  bottom: 85%;
+  top: 0;
+}
+.e-richtexteditor .e-video-clickelem::after {
+  bottom: 0;
+  top: 90%;
+}
 
 .e-rte-linkcontent .e-rte-label {
   padding-top: 20px;
@@ -1244,7 +1272,6 @@
   height: 20px;
   min-width: 20px;
   padding: 2px 5px;
-  vertical-align: middle;
 }
 
 .e-rte-table.e-dashed-border td,
@@ -1287,6 +1314,14 @@
   padding-top: 0;
 }
 
+.e-rte-video-dialog .e-rte-label {
+  padding-top: 20px;
+}
+
+.e-rte-video-dialog .e-rte-label:first-child {
+  padding-top: 0;
+}
+
 .e-rte-table-resize.e-row-resize,
 .e-rte-table-resize.e-column-resize {
   background-color: transparent;
@@ -2825,15 +2860,18 @@
 .e-richtexteditor .e-clickelem::after,
 .e-richtexteditor .e-video-clickelem::after {
   background: transparent;
-  bottom: 0;
   content: "";
   cursor: default;
   display: block;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  background: transparent;
+  content: "";
+  cursor: default;
+  display: block;
+  position: absolute;
 }
 .e-richtexteditor .e-videoheader,
 .e-richtexteditor .e-embed-videoheader,

package/styles/bootstrap.css

@@ -1136,6 +1136,34 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn {
   font-size: 16px;
 }
+.e-richtexteditor .e-clickelem::after,
+.e-richtexteditor .e-video-clickelem::after {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before {
+  bottom: 70%;
+  top: 0;
+}
+.e-richtexteditor .e-clickelem::after {
+  bottom: 0;
+  top: 70%;
+}
+.e-richtexteditor .e-video-clickelem::before {
+  bottom: 85%;
+  top: 0;
+}
+.e-richtexteditor .e-video-clickelem::after {
+  bottom: 0;
+  top: 90%;
+}
 
 .e-rte-linkcontent .e-rte-label {
   padding-top: 20px;
@@ -1385,7 +1413,6 @@
   height: 20px;
   min-width: 20px;
   padding: 2px 5px;
-  vertical-align: middle;
 }
 
 .e-rte-table.e-dashed-border td,
@@ -1428,6 +1455,14 @@
   padding-top: 0;
 }
 
+.e-rte-video-dialog .e-rte-label {
+  padding-top: 20px;
+}
+
+.e-rte-video-dialog .e-rte-label:first-child {
+  padding-top: 0;
+}
+
 .e-rte-table-resize.e-row-resize,
 .e-rte-table-resize.e-column-resize {
   background-color: transparent;
@@ -2971,15 +3006,18 @@
 .e-richtexteditor .e-clickelem::after,
 .e-richtexteditor .e-video-clickelem::after {
   background: transparent;
-  bottom: 0;
   content: "";
   cursor: default;
   display: block;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  background: transparent;
+  content: "";
+  cursor: default;
+  display: block;
+  position: absolute;
 }
 .e-richtexteditor .e-videoheader,
 .e-richtexteditor .e-embed-videoheader,

package/styles/bootstrap4.css

@@ -1231,6 +1231,34 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn {
   font-size: 16px;
 }
+.e-richtexteditor .e-clickelem::after,
+.e-richtexteditor .e-video-clickelem::after {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before {
+  bottom: 70%;
+  top: 0;
+}
+.e-richtexteditor .e-clickelem::after {
+  bottom: 0;
+  top: 70%;
+}
+.e-richtexteditor .e-video-clickelem::before {
+  bottom: 85%;
+  top: 0;
+}
+.e-richtexteditor .e-video-clickelem::after {
+  bottom: 0;
+  top: 90%;
+}
 
 .e-rte-linkcontent .e-rte-label {
   padding-top: 14px;
@@ -1480,7 +1508,6 @@
   height: 20px;
   min-width: 20px;
   padding: 2px 5px;
-  vertical-align: middle;
 }
 
 .e-rte-table.e-dashed-border td,
@@ -1523,6 +1550,14 @@
   padding-top: 0;
 }
 
+.e-rte-video-dialog .e-rte-label {
+  padding-top: 14px;
+}
+
+.e-rte-video-dialog .e-rte-label:first-child {
+  padding-top: 0;
+}
+
 .e-rte-table-resize.e-row-resize,
 .e-rte-table-resize.e-column-resize {
   background-color: transparent;
@@ -3053,15 +3088,18 @@
 .e-richtexteditor .e-clickelem::after,
 .e-richtexteditor .e-video-clickelem::after {
   background: transparent;
-  bottom: 0;
   content: "";
   cursor: default;
   display: block;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  background: transparent;
+  content: "";
+  cursor: default;
+  display: block;
+  position: absolute;
 }
 .e-richtexteditor .e-videoheader,
 .e-richtexteditor .e-embed-videoheader,

package/styles/bootstrap5-dark.css

@@ -1002,6 +1002,34 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn {
   font-size: 12px;
 }
+.e-richtexteditor .e-clickelem::after,
+.e-richtexteditor .e-video-clickelem::after {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before {
+  bottom: 70%;
+  top: 0;
+}
+.e-richtexteditor .e-clickelem::after {
+  bottom: 0;
+  top: 70%;
+}
+.e-richtexteditor .e-video-clickelem::before {
+  bottom: 85%;
+  top: 0;
+}
+.e-richtexteditor .e-video-clickelem::after {
+  bottom: 0;
+  top: 90%;
+}
 
 .e-rte-linkcontent .e-rte-label {
   padding-top: 12px;
@@ -1251,7 +1279,6 @@
   height: 20px;
   min-width: 20px;
   padding: 2px 5px;
-  vertical-align: middle;
 }
 
 .e-rte-table.e-dashed-border td,
@@ -1294,6 +1321,14 @@
   padding-top: 0;
 }
 
+.e-rte-video-dialog .e-rte-label {
+  padding-top: 12px;
+}
+
+.e-rte-video-dialog .e-rte-label:first-child {
+  padding-top: 0;
+}
+
 .e-rte-table-resize.e-row-resize,
 .e-rte-table-resize.e-column-resize {
   background-color: transparent;
@@ -2889,15 +2924,18 @@
 .e-richtexteditor .e-clickelem::after,
 .e-richtexteditor .e-video-clickelem::after {
   background: transparent;
-  bottom: 0;
   content: "";
   cursor: default;
   display: block;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  background: transparent;
+  content: "";
+  cursor: default;
+  display: block;
+  position: absolute;
 }
 .e-richtexteditor .e-videoheader,
 .e-richtexteditor .e-embed-videoheader,

package/styles/bootstrap5.css

@@ -1002,6 +1002,34 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn {
   font-size: 12px;
 }
+.e-richtexteditor .e-clickelem::after,
+.e-richtexteditor .e-video-clickelem::after {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before {
+  bottom: 70%;
+  top: 0;
+}
+.e-richtexteditor .e-clickelem::after {
+  bottom: 0;
+  top: 70%;
+}
+.e-richtexteditor .e-video-clickelem::before {
+  bottom: 85%;
+  top: 0;
+}
+.e-richtexteditor .e-video-clickelem::after {
+  bottom: 0;
+  top: 90%;
+}
 
 .e-rte-linkcontent .e-rte-label {
   padding-top: 12px;
@@ -1251,7 +1279,6 @@
   height: 20px;
   min-width: 20px;
   padding: 2px 5px;
-  vertical-align: middle;
 }
 
 .e-rte-table.e-dashed-border td,
@@ -1294,6 +1321,14 @@
   padding-top: 0;
 }
 
+.e-rte-video-dialog .e-rte-label {
+  padding-top: 12px;
+}
+
+.e-rte-video-dialog .e-rte-label:first-child {
+  padding-top: 0;
+}
+
 .e-rte-table-resize.e-row-resize,
 .e-rte-table-resize.e-column-resize {
   background-color: transparent;
@@ -2889,15 +2924,18 @@
 .e-richtexteditor .e-clickelem::after,
 .e-richtexteditor .e-video-clickelem::after {
   background: transparent;
-  bottom: 0;
   content: "";
   cursor: default;
   display: block;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  background: transparent;
+  content: "";
+  cursor: default;
+  display: block;
+  position: absolute;
 }
 .e-richtexteditor .e-videoheader,
 .e-richtexteditor .e-embed-videoheader,

package/styles/fabric-dark.css

@@ -984,6 +984,34 @@
 .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn {
   font-size: 16px;
 }
+.e-richtexteditor .e-clickelem::after,
+.e-richtexteditor .e-video-clickelem::after {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before {
+  bottom: 70%;
+  top: 0;
+}
+.e-richtexteditor .e-clickelem::after {
+  bottom: 0;
+  top: 70%;
+}
+.e-richtexteditor .e-video-clickelem::before {
+  bottom: 85%;
+  top: 0;
+}
+.e-richtexteditor .e-video-clickelem::after {
+  bottom: 0;
+  top: 90%;
+}
 
 .e-rte-linkcontent .e-rte-label {
   padding-top: 20px;
@@ -1233,7 +1261,6 @@
   height: 20px;
   min-width: 20px;
   padding: 2px 5px;
-  vertical-align: middle;
 }
 
 .e-rte-table.e-dashed-border td,
@@ -1276,6 +1303,14 @@
   padding-top: 0;
 }
 
+.e-rte-video-dialog .e-rte-label {
+  padding-top: 20px;
+}
+
+.e-rte-video-dialog .e-rte-label:first-child {
+  padding-top: 0;
+}
+
 .e-rte-table-resize.e-row-resize,
 .e-rte-table-resize.e-column-resize {
   background-color: transparent;
@@ -2806,15 +2841,18 @@
 .e-richtexteditor .e-clickelem::after,
 .e-richtexteditor .e-video-clickelem::after {
   background: transparent;
-  bottom: 0;
   content: "";
   cursor: default;
   display: block;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
+}
+.e-richtexteditor .e-clickelem::before,
+.e-richtexteditor .e-video-clickelem::before {
+  background: transparent;
+  content: "";
+  cursor: default;
+  display: block;
+  position: absolute;
 }
 .e-richtexteditor .e-videoheader,
 .e-richtexteditor .e-embed-videoheader,