@syncfusion/ej2-richtexteditor 22.2.12 → 23.1.36

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

@@ -474,14 +474,17 @@ var Table = /** @class */ (function () {
                 var pageX = void 0;
                 var pageY = void 0;
                 if (Browser.isDevice && e.args.touches) {
-                    pageX = e.args.changedTouches[0].pageX;
-                    pageY = e.args.changedTouches[0].pageY;
+                    pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset + this.parent.element.getBoundingClientRect().left +
+                        e.args.changedTouches[0].clientX : e.args.changedTouches[0].pageX;
+                    pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + this.parent.element.getBoundingClientRect().top +
+                        (!this.parent.inlineMode.enable ? this.parent.toolbarModule.getToolbarHeight() : 0)
+                        + e.args.changedTouches[0].clientY : e.args.changedTouches[0].pageY;
                 }
                 else {
                     pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset
                         + this.parent.element.getBoundingClientRect().left + args.clientX : args.pageX;
-                    pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
-                        this.parent.element.getBoundingClientRect().top + args.clientY : args.pageY;
+                    pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + this.parent.element.getBoundingClientRect().top +
+                        this.parent.toolbarModule.getToolbarHeight() + args.clientY : args.pageY;
                 }
                 this.quickToolObj.tableQTBar.showPopup(pageX, pageY, target);
                 this.parent.formatter.editorManager.nodeSelection.restore();
@@ -882,7 +885,7 @@ var Table = /** @class */ (function () {
                     var width = parseFloat(_this.columnEle.offsetWidth.toString());
                     var cellRow = _this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
                     var currentTableWidth = void 0;
-                    if (_this.curTable.style.width != '') {
+                    if (_this.curTable.style.width !== '') {
                         currentTableWidth = parseFloat(_this.curTable.style.width.split('%')[0]);
                     }
                     else {
@@ -945,6 +948,7 @@ var Table = /** @class */ (function () {
                                 var isMergedEleResize = false;
                                 var leftTableCell = void 0;
                                 var rightTableCell = void 0;
+                                /* eslint-disable */
                                 for (var j = 0; j < currentRow.cells.length; j++) {
                                     if (currentRow.cells[j].hasAttribute('rowspan') && j <= _this.colIndex) {
                                         isRowCellsMerged = true;
@@ -1003,6 +1007,7 @@ var Table = /** @class */ (function () {
                                             _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
                                     }
                                 }
+                                /* eslint-enable */
                             }
                         }
                     }
@@ -1138,7 +1143,8 @@ var Table = /** @class */ (function () {
     };
     Table.prototype.renderDlgContent = function (args) {
         var _this = this;
-        if (Browser.isDevice || this.parent.inlineMode.enable) {
+        var argsTarget = args.args.originalEvent.target;
+        if (Browser.isDevice || this.parent.inlineMode.enable || !isNullOrUndefined(closest(argsTarget, '.e-rte-text-popup'))) {
             this.insertTableDialog(args);
             return;
         }
@@ -1394,6 +1400,10 @@ var Table = /** @class */ (function () {
         if (this.quickToolObj && this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {
             this.quickToolObj.inlineQTBar.hidePopup();
         }
+        if (this.quickToolObj && this.quickToolObj.textQTBar &&
+            this.parent.element.ownerDocument.body.contains(this.quickToolObj.textQTBar.element)) {
+            this.quickToolObj.textQTBar.hidePopup();
+        }
     };
     Table.prototype.customTable = function (args, e) {
         var proxy = (this.self) ? this.self : this;
@@ -1401,7 +1411,8 @@ var Table = /** @class */ (function () {
             var argument = ((Browser.isDevice || (!isNullOrUndefined(args.args)
                 && !isNullOrUndefined(args.args.originalEvent) &&
                 args.args.originalEvent.action === 'insert-table')
-                || proxy.parent.inlineMode.enable) ? args : this);
+                || proxy.parent.inlineMode.enable || !isNullOrUndefined(proxy.parent.quickToolbarSettings.text)) ? args :
+                this);
             proxy.tableInsert(proxy.rowTextBox.value, proxy.columnTextBox.value, e, argument);
         }
     };

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

@@ -1,6 +1,7 @@
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { IRenderer, IRichTextEditor, IToolbarOptions, IDropDownModel, IColorPickerModel } from '../base/interface';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
+import { ServiceLocator } from '../services/service-locator';
 /**
  * `Toolbar renderer` module is used to render toolbar in RichTextEditor.
  *
@@ -21,12 +22,14 @@ export declare class ToolbarRenderer implements IRenderer {
     private currentDropdown;
     private popupOverlay;
     private tooltip;
+    private l10n;
     /**
      * Constructor for toolbar renderer module
      *
      * @param {IRichTextEditor} parent - specifies the parent element.
+     * @param {ServiceLocator} serviceLocator - specifies the serviceLocator
      */
-    constructor(parent?: IRichTextEditor);
+    constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
     private wireEvent;
     private destroyTooltip;
     private unWireEvent;
@@ -35,6 +38,7 @@ export declare class ToolbarRenderer implements IRenderer {
     private toolbarClicked;
     private dropDownSelected;
     private beforeDropDownItemRender;
+    private tooltipBeforeRender;
     private dropDownOpen;
     private dropDownClose;
     private removePopupContainer;

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

@@ -19,9 +19,13 @@ var ToolbarRenderer = /** @class */ (function () {
      * Constructor for toolbar renderer module
      *
      * @param {IRichTextEditor} parent - specifies the parent element.
+     * @param {ServiceLocator} serviceLocator - specifies the serviceLocator
      */
-    function ToolbarRenderer(parent) {
+    function ToolbarRenderer(parent, serviceLocator) {
         this.parent = parent;
+        if (serviceLocator) {
+            this.l10n = serviceLocator.getService('rteLocale');
+        }
         this.wireEvent();
     }
     ToolbarRenderer.prototype.wireEvent = function () {
@@ -29,7 +33,11 @@ var ToolbarRenderer = /** @class */ (function () {
         this.parent.on(events.maximizeMinimizeClick, this.destroyTooltip, this);
     };
     ToolbarRenderer.prototype.destroyTooltip = function () {
-        this.tooltip.close();
+        if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(document.querySelector(' [data-tooltip-id]'))) {
+            var tooltipTargetEle = document.querySelector('#' + (this.parent.element).id + ' [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);
@@ -65,6 +73,22 @@ var ToolbarRenderer = /** @class */ (function () {
         }
         this.parent.notify(events.beforeDropDownItemRender, args);
     };
+    ToolbarRenderer.prototype.tooltipBeforeRender = function (args) {
+        if (!isNOU(args.target.getAttribute('title'))) {
+            var tooltipTarget = args.target.getAttribute('title');
+            var tooltipText = void 0;
+            switch (tooltipTarget) {
+                case 'Minimize':
+                    tooltipText = this.l10n.getConstant('minimize');
+                    args.target.setAttribute('title', tooltipText + ' (Esc)');
+                    break;
+                case 'Maximize':
+                    tooltipText = this.l10n.getConstant('maximize');
+                    args.target.setAttribute('title', tooltipText + ' (Ctrl+Shift+F)');
+                    break;
+            }
+        }
+    };
     ToolbarRenderer.prototype.dropDownOpen = function (args) {
         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')))) {
@@ -130,6 +154,8 @@ var ToolbarRenderer = /** @class */ (function () {
                 target: '#' + this.parent.getID() + '_toolbar_wrapper [title]',
                 showTipPointer: true,
                 openDelay: 400,
+                opensOn: 'Hover',
+                beforeRender: this.tooltipBeforeRender.bind(this),
                 cssClass: this.parent.cssClass,
                 windowCollision: true,
                 position: 'BottomCenter'

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

@@ -1116,6 +1116,9 @@ var Video = /** @class */ (function () {
             if (this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {
                 this.quickToolObj.inlineQTBar.hidePopup();
             }
+            if (this.quickToolObj.textQTBar && this.parent.element.ownerDocument.body.contains(this.quickToolObj.textQTBar.element)) {
+                this.quickToolObj.textQTBar.hidePopup();
+            }
         }
     };
     // eslint-disable-next-line
@@ -1227,10 +1230,8 @@ var Video = /** @class */ (function () {
         });
         uploadParentEle.appendChild(uploadEle);
         var fileName;
-        var rawFile;
         var selectArgs;
         var filesData;
-        var beforeUploadArgs;
         this.uploadObj = new Uploader({
             asyncSettings: { saveUrl: this.parent.insertVideoSettings.saveUrl, removeUrl: this.parent.insertVideoSettings.removeUrl },
             dropArea: span, multiple: false, enableRtl: this.parent.enableRtl,
@@ -1238,13 +1239,8 @@ var Video = /** @class */ (function () {
             selected: function (e) {
                 proxy.isVideoUploaded = true;
                 selectArgs = e;
+                // eslint-disable-next-line
                 filesData = e.filesData;
-                if (_this.parent.isServerRendered) {
-                    selectArgs = JSON.parse(JSON.stringify(e));
-                    e.cancel = true;
-                    rawFile = e.filesData;
-                    selectArgs.filesData = rawFile;
-                }
                 _this.parent.trigger(events.fileSelected, selectArgs, function (selectArgs) {
                     if (!selectArgs.cancel) {
                         _this.checkExtension(selectArgs.filesData[0]);
@@ -1268,35 +1264,11 @@ var Video = /** @class */ (function () {
                             });
                             reader_1.readAsDataURL(selectArgs.filesData[0].rawFile);
                         }
-                        if (_this.parent.isServerRendered) {
-                            /* eslint-disable */
-                            _this.uploadObj._internalRenderSelect(selectArgs, rawFile);
-                            /* eslint-enable */
-                        }
                     }
                 });
             },
             beforeUpload: function (args) {
-                if (_this.parent.isServerRendered) {
-                    beforeUploadArgs = JSON.parse(JSON.stringify(args));
-                    beforeUploadArgs.filesData = filesData;
-                    args.cancel = true;
-                    _this.parent.trigger(events.fileUploading, beforeUploadArgs, function (beforeUploadArgs) {
-                        if (beforeUploadArgs.cancel) {
-                            return;
-                        }
-                        /* eslint-disable */
-                        _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
-                            beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;
-                        _this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
-                            beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;
-                        _this.uploadObj.uploadFiles(rawFile, null);
-                        /* eslint-enable */
-                    });
-                }
-                else {
-                    _this.parent.trigger(events.beforeFileUpload, args);
-                }
+                _this.parent.trigger(events.beforeFileUpload, args);
             },
             uploading: function (e) {
                 if (!_this.parent.isServerRendered) {

package/src/rich-text-editor/renderer/view-source.js

@@ -107,6 +107,7 @@ var ViewSource = /** @class */ (function () {
 
      */
     ViewSource.prototype.sourceCode = function (args) {
+        this.parent.notify(events.hidePopup, {});
         this.parent.isBlur = false;
         this.parent.trigger(events.actionBegin, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });
         var tbItems = selectAll('.' + CLS_TB_ITEM, this.parent.element);

package/styles/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! component's theme wise override definitions and variables */
 /*! richtexteditor icons */
 .e-rte-toolbar .e-alignments::before,

package/styles/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! component's theme wise override definitions and variables */
 /*! richtexteditor icons */
 .e-rte-toolbar .e-alignments::before,

package/styles/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/material3-dark.scss

@@ -1,3 +1,3 @@
 
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 @import 'rich-text-editor/material3-dark.scss';

package/styles/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/material3.scss

@@ -1,3 +1,3 @@
 
-@import 'ej2-base/styles/material3-definition.scss';
+
 @import 'rich-text-editor/material3.scss';

package/styles/rich-text-editor/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'icons/bootstrap-dark.scss';
 @import 'all.scss';

package/styles/rich-text-editor/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'bootstrap-definition.scss';
 @import 'icons/bootstrap.scss';
 @import 'all.scss';

package/styles/rich-text-editor/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'bootstrap4-definition.scss';
 @import 'icons/bootstrap4.scss';
 @import 'all.scss';

package/styles/rich-text-editor/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import 'bootstrap5-dark-definition.scss';
 @import 'icons/bootstrap5-dark.scss';
 @import 'all.scss';

package/styles/rich-text-editor/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'bootstrap5-definition.scss';
 @import 'icons/bootstrap5.scss';
 @import 'all.scss';

package/styles/rich-text-editor/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import 'fabric-dark-definition.scss';
 @import 'icons/fabric-dark.scss';
 @import 'all.scss';

package/styles/rich-text-editor/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import 'fabric-definition.scss';
 @import 'icons/fabric.scss';
 @import 'all.scss';

package/styles/rich-text-editor/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import 'fluent-dark-definition.scss';
 @import 'icons/fluent-dark.scss';
 @import 'all.scss';

package/styles/rich-text-editor/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import 'fluent-definition.scss';
 @import 'icons/fluent.scss';
 @import 'all.scss';

package/styles/rich-text-editor/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import 'highcontrast-light-definition.scss';
 @import 'icons/highcontrast-light.scss';
 @import 'all.scss';

package/styles/rich-text-editor/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'highcontrast-definition.scss';
 @import 'icons/highcontrast.scss';
 @import 'all.scss';

package/styles/rich-text-editor/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! component's theme wise override definitions and variables */
 /*! richtexteditor icons */
 .e-rte-toolbar .e-alignments::before,

package/styles/rich-text-editor/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import 'material-dark-definition.scss';
 @import 'icons/material-dark.scss';
 @import 'all.scss';

package/styles/rich-text-editor/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! component's theme wise override definitions and variables */
 /*! richtexteditor icons */
 .e-rte-toolbar .e-alignments::before,

package/styles/rich-text-editor/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import 'material-definition.scss';
 @import 'icons/material.scss';
 @import 'all.scss';

package/styles/rich-text-editor/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/rich-text-editor/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import 'material3-dark-definition.scss';
 @import 'icons/material3-dark.scss';

package/styles/rich-text-editor/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/rich-text-editor/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import 'material3-definition.scss';
 @import 'icons/material3.scss';

package/styles/rich-text-editor/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override definitions and variables */
 /*! richtexteditor icons */
 .e-rte-toolbar .e-alignments::before,

package/styles/rich-text-editor/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'icons/tailwind-dark.scss';
 @import 'all.scss';

package/styles/rich-text-editor/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override definitions and variables */
 /*! richtexteditor icons */
 .e-rte-toolbar .e-alignments::before,

package/styles/rich-text-editor/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import 'tailwind-definition.scss';
 @import 'icons/tailwind.scss';
 @import 'all.scss';

package/styles/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override definitions and variables */
 /*! richtexteditor icons */
 .e-rte-toolbar .e-alignments::before,

package/styles/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! component's theme wise override definitions and variables */
 /*! richtexteditor icons */
 .e-rte-toolbar .e-alignments::before,