@syncfusion/ej2-richtexteditor 22.2.10 → 23.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/dist/ej2-richtexteditor.min.js +2 -2
  3. package/dist/ej2-richtexteditor.umd.min.js +2 -2
  4. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-richtexteditor.es2015.js +381 -262
  6. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-richtexteditor.es5.js +381 -258
  8. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  9. package/dist/global/ej2-richtexteditor.min.js +2 -2
  10. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +13 -13
  13. package/src/editor-manager/plugin/dom-node.js +6 -5
  14. package/src/editor-manager/plugin/ms-word-clean-up.d.ts +2 -0
  15. package/src/editor-manager/plugin/ms-word-clean-up.js +68 -11
  16. package/src/editor-manager/plugin/table.js +1 -1
  17. package/src/rich-text-editor/actions/base-quick-toolbar.d.ts +2 -1
  18. package/src/rich-text-editor/actions/base-quick-toolbar.js +10 -6
  19. package/src/rich-text-editor/actions/emoji-picker.js +29 -14
  20. package/src/rich-text-editor/actions/enter-key.js +6 -2
  21. package/src/rich-text-editor/actions/format-painter.js +12 -6
  22. package/src/rich-text-editor/actions/html-editor.js +14 -1
  23. package/src/rich-text-editor/actions/paste-clean-up.d.ts +2 -0
  24. package/src/rich-text-editor/actions/paste-clean-up.js +63 -32
  25. package/src/rich-text-editor/actions/quick-toolbar.js +32 -2
  26. package/src/rich-text-editor/actions/toolbar.js +1 -1
  27. package/src/rich-text-editor/actions/xhtml-validation.js +1 -1
  28. package/src/rich-text-editor/base/classes.d.ts +5 -0
  29. package/src/rich-text-editor/base/classes.js +5 -0
  30. package/src/rich-text-editor/base/constant.d.ts +5 -0
  31. package/src/rich-text-editor/base/constant.js +5 -0
  32. package/src/rich-text-editor/base/enum.d.ts +4 -0
  33. package/src/rich-text-editor/base/interface.d.ts +10 -22
  34. package/src/rich-text-editor/base/rich-text-editor-model.d.ts +1 -39
  35. package/src/rich-text-editor/base/rich-text-editor.d.ts +1 -39
  36. package/src/rich-text-editor/base/rich-text-editor.js +2 -8
  37. package/src/rich-text-editor/base/util.js +5 -1
  38. package/src/rich-text-editor/models/items.js +34 -22
  39. package/src/rich-text-editor/models/toolbar-settings-model.d.ts +4 -5
  40. package/src/rich-text-editor/models/toolbar-settings.d.ts +4 -5
  41. package/src/rich-text-editor/models/toolbar-settings.js +1 -1
  42. package/src/rich-text-editor/renderer/audio-module.js +5 -33
  43. package/src/rich-text-editor/renderer/dialog-renderer.d.ts +2 -0
  44. package/src/rich-text-editor/renderer/dialog-renderer.js +16 -1
  45. package/src/rich-text-editor/renderer/image-module.js +9 -65
  46. package/src/rich-text-editor/renderer/link-module.js +3 -0
  47. package/src/rich-text-editor/renderer/table-module.js +18 -7
  48. package/src/rich-text-editor/renderer/toolbar-renderer.d.ts +5 -1
  49. package/src/rich-text-editor/renderer/toolbar-renderer.js +28 -2
  50. package/src/rich-text-editor/renderer/video-module.js +6 -33
  51. package/src/rich-text-editor/renderer/view-source.js +1 -0
  52. package/styles/material-dark.css +0 -1
  53. package/styles/material.css +0 -1
  54. package/styles/material3-dark.css +0 -1
  55. package/styles/material3-dark.scss +1 -1
  56. package/styles/material3.css +0 -1
  57. package/styles/material3.scss +1 -1
  58. package/styles/rich-text-editor/bootstrap-dark.scss +1 -1
  59. package/styles/rich-text-editor/bootstrap.scss +1 -1
  60. package/styles/rich-text-editor/bootstrap4.scss +1 -1
  61. package/styles/rich-text-editor/bootstrap5-dark.scss +1 -1
  62. package/styles/rich-text-editor/bootstrap5.scss +1 -1
  63. package/styles/rich-text-editor/fabric-dark.scss +1 -1
  64. package/styles/rich-text-editor/fabric.scss +1 -1
  65. package/styles/rich-text-editor/fluent-dark.scss +1 -1
  66. package/styles/rich-text-editor/fluent.scss +1 -1
  67. package/styles/rich-text-editor/highcontrast-light.scss +1 -1
  68. package/styles/rich-text-editor/highcontrast.scss +1 -1
  69. package/styles/rich-text-editor/material-dark.css +0 -1
  70. package/styles/rich-text-editor/material-dark.scss +1 -1
  71. package/styles/rich-text-editor/material.css +0 -1
  72. package/styles/rich-text-editor/material.scss +1 -1
  73. package/styles/rich-text-editor/material3-dark.css +0 -1
  74. package/styles/rich-text-editor/material3-dark.scss +1 -1
  75. package/styles/rich-text-editor/material3.css +0 -1
  76. package/styles/rich-text-editor/material3.scss +1 -1
  77. package/styles/rich-text-editor/tailwind-dark.css +0 -1
  78. package/styles/rich-text-editor/tailwind-dark.scss +1 -1
  79. package/styles/rich-text-editor/tailwind.css +0 -1
  80. package/styles/rich-text-editor/tailwind.scss +1 -1
  81. package/styles/tailwind-dark.css +0 -1
  82. package/styles/tailwind.css +0 -1
@@ -94,6 +94,7 @@ var Image = /** @class */ (function () {
94
94
  EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart);
95
95
  EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);
96
96
  EventHandler.remove(this.contentModule.getEditPanel(), 'cut', this.onCutHandler);
97
+ EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
97
98
  }
98
99
  }
99
100
  };
@@ -1423,6 +1424,9 @@ var Image = /** @class */ (function () {
1423
1424
  if (this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {
1424
1425
  this.quickToolObj.inlineQTBar.hidePopup();
1425
1426
  }
1427
+ if (this.quickToolObj.textQTBar && this.parent.element.ownerDocument.body.contains(this.quickToolObj.textQTBar.element)) {
1428
+ this.quickToolObj.textQTBar.hidePopup();
1429
+ }
1426
1430
  }
1427
1431
  };
1428
1432
  // eslint-disable-next-line
@@ -1691,10 +1695,8 @@ var Image = /** @class */ (function () {
1691
1695
  });
1692
1696
  uploadParentEle.appendChild(uploadEle);
1693
1697
  var altText;
1694
- var rawFile;
1695
1698
  var selectArgs;
1696
1699
  var filesData;
1697
- var beforeUploadArgs;
1698
1700
  this.uploadObj = new Uploader({
1699
1701
  asyncSettings: { saveUrl: this.parent.insertImageSettings.saveUrl, removeUrl: this.parent.insertImageSettings.removeUrl },
1700
1702
  dropArea: span, multiple: false, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass,
@@ -1702,13 +1704,8 @@ var Image = /** @class */ (function () {
1702
1704
  selected: function (e) {
1703
1705
  proxy.isImgUploaded = true;
1704
1706
  selectArgs = e;
1707
+ // eslint-disable-next-line
1705
1708
  filesData = e.filesData;
1706
- if (_this.parent.isServerRendered) {
1707
- selectArgs = JSON.parse(JSON.stringify(e));
1708
- e.cancel = true;
1709
- rawFile = e.filesData;
1710
- selectArgs.filesData = rawFile;
1711
- }
1712
1709
  _this.parent.trigger(events.imageSelected, selectArgs, function (selectArgs) {
1713
1710
  if (!selectArgs.cancel) {
1714
1711
  _this.checkExtension(selectArgs.filesData[0]);
@@ -1739,35 +1736,11 @@ var Image = /** @class */ (function () {
1739
1736
  });
1740
1737
  reader_1.readAsDataURL(selectArgs.filesData[0].rawFile);
1741
1738
  }
1742
- if (_this.parent.isServerRendered) {
1743
- /* eslint-disable */
1744
- _this.uploadObj._internalRenderSelect(selectArgs, rawFile);
1745
- /* eslint-enable */
1746
- }
1747
1739
  }
1748
1740
  });
1749
1741
  },
1750
1742
  beforeUpload: function (args) {
1751
- if (_this.parent.isServerRendered) {
1752
- beforeUploadArgs = JSON.parse(JSON.stringify(args));
1753
- beforeUploadArgs.filesData = filesData;
1754
- args.cancel = true;
1755
- _this.parent.trigger(events.imageUploading, beforeUploadArgs, function (beforeUploadArgs) {
1756
- if (beforeUploadArgs.cancel) {
1757
- return;
1758
- }
1759
- /* eslint-disable */
1760
- _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
1761
- beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;
1762
- _this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
1763
- beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;
1764
- _this.uploadObj.uploadFiles(rawFile, null);
1765
- /* eslint-enable */
1766
- });
1767
- }
1768
- else {
1769
- _this.parent.trigger(events.beforeImageUpload, args);
1770
- }
1743
+ _this.parent.trigger(events.beforeImageUpload, args);
1771
1744
  },
1772
1745
  uploading: function (e) {
1773
1746
  if (!_this.parent.isServerRendered) {
@@ -2086,8 +2059,6 @@ var Image = /** @class */ (function () {
2086
2059
  setTimeout(function () {
2087
2060
  proxy.refreshPopup(imageElement);
2088
2061
  }, timeOut);
2089
- var rawFile;
2090
- var beforeUploadArgs;
2091
2062
  this.uploadObj = new Uploader({
2092
2063
  asyncSettings: {
2093
2064
  saveUrl: this.parent.insertImageSettings.saveUrl,
@@ -2113,33 +2084,9 @@ var Image = /** @class */ (function () {
2113
2084
  }, 900);
2114
2085
  },
2115
2086
  beforeUpload: function (args) {
2116
- if (_this.parent.isServerRendered) {
2117
- beforeUploadArgs = JSON.parse(JSON.stringify(args));
2118
- beforeUploadArgs.filesData = rawFile;
2119
- isUploading = true;
2120
- args.cancel = true;
2121
- _this.parent.trigger(events.imageUploading, beforeUploadArgs, function (beforeUploadArgs) {
2122
- if (beforeUploadArgs.cancel) {
2123
- return;
2124
- }
2125
- if (!_this.parent.inlineMode.enable) {
2126
- _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);
2127
- }
2128
- /* eslint-disable */
2129
- _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
2130
- beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;
2131
- _this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
2132
- beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;
2133
- _this.uploadObj.uploadFiles(rawFile, null);
2134
- _this.parent.inputElement.contentEditable = 'false';
2135
- /* eslint-enable */
2136
- });
2137
- }
2138
- else {
2139
- _this.parent.trigger(events.beforeImageUpload, args);
2140
- if (!_this.parent.inlineMode.enable) {
2141
- _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);
2142
- }
2087
+ _this.parent.trigger(events.beforeImageUpload, args);
2088
+ if (!_this.parent.inlineMode.enable) {
2089
+ _this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);
2143
2090
  }
2144
2091
  },
2145
2092
  uploading: function (e) {
@@ -2164,9 +2111,6 @@ var Image = /** @class */ (function () {
2164
2111
  if (isUploading) {
2165
2112
  e.cancel = true;
2166
2113
  }
2167
- if (_this.parent.isServerRendered) {
2168
- rawFile = e.filesData;
2169
- }
2170
2114
  },
2171
2115
  failure: function (e) {
2172
2116
  isUploading = false;
@@ -350,6 +350,9 @@ var Link = /** @class */ (function () {
350
350
  if (this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {
351
351
  this.quickToolObj.inlineQTBar.hidePopup();
352
352
  }
353
+ if (this.quickToolObj.textQTBar && this.parent.element.ownerDocument.body.contains(this.quickToolObj.textQTBar.element)) {
354
+ this.quickToolObj.textQTBar.hidePopup();
355
+ }
353
356
  }
354
357
  };
355
358
  // eslint-disable-next-line
@@ -474,14 +474,17 @@ var Table = /** @class */ (function () {
474
474
  var pageX = void 0;
475
475
  var pageY = void 0;
476
476
  if (Browser.isDevice && e.args.touches) {
477
- pageX = e.args.changedTouches[0].pageX;
478
- pageY = e.args.changedTouches[0].pageY;
477
+ pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset + this.parent.element.getBoundingClientRect().left +
478
+ e.args.changedTouches[0].clientX : e.args.changedTouches[0].pageX;
479
+ pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + this.parent.element.getBoundingClientRect().top +
480
+ (!this.parent.inlineMode.enable ? this.parent.toolbarModule.getToolbarHeight() : 0)
481
+ + e.args.changedTouches[0].clientY : e.args.changedTouches[0].pageY;
479
482
  }
480
483
  else {
481
484
  pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset
482
485
  + this.parent.element.getBoundingClientRect().left + args.clientX : args.pageX;
483
- pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset +
484
- this.parent.element.getBoundingClientRect().top + args.clientY : args.pageY;
486
+ pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + this.parent.element.getBoundingClientRect().top +
487
+ this.parent.toolbarModule.getToolbarHeight() + args.clientY : args.pageY;
485
488
  }
486
489
  this.quickToolObj.tableQTBar.showPopup(pageX, pageY, target);
487
490
  this.parent.formatter.editorManager.nodeSelection.restore();
@@ -882,7 +885,7 @@ var Table = /** @class */ (function () {
882
885
  var width = parseFloat(_this.columnEle.offsetWidth.toString());
883
886
  var cellRow = _this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
884
887
  var currentTableWidth = void 0;
885
- if (_this.curTable.style.width != '') {
888
+ if (_this.curTable.style.width !== '') {
886
889
  currentTableWidth = parseFloat(_this.curTable.style.width.split('%')[0]);
887
890
  }
888
891
  else {
@@ -945,6 +948,7 @@ var Table = /** @class */ (function () {
945
948
  var isMergedEleResize = false;
946
949
  var leftTableCell = void 0;
947
950
  var rightTableCell = void 0;
951
+ /* eslint-disable */
948
952
  for (var j = 0; j < currentRow.cells.length; j++) {
949
953
  if (currentRow.cells[j].hasAttribute('rowspan') && j <= _this.colIndex) {
950
954
  isRowCellsMerged = true;
@@ -1003,6 +1007,7 @@ var Table = /** @class */ (function () {
1003
1007
  _this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
1004
1008
  }
1005
1009
  }
1010
+ /* eslint-enable */
1006
1011
  }
1007
1012
  }
1008
1013
  }
@@ -1138,7 +1143,8 @@ var Table = /** @class */ (function () {
1138
1143
  };
1139
1144
  Table.prototype.renderDlgContent = function (args) {
1140
1145
  var _this = this;
1141
- if (Browser.isDevice || this.parent.inlineMode.enable) {
1146
+ var argsTarget = args.args.originalEvent.target;
1147
+ if (Browser.isDevice || this.parent.inlineMode.enable || !isNullOrUndefined(closest(argsTarget, '.e-rte-text-popup'))) {
1142
1148
  this.insertTableDialog(args);
1143
1149
  return;
1144
1150
  }
@@ -1394,6 +1400,10 @@ var Table = /** @class */ (function () {
1394
1400
  if (this.quickToolObj && this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {
1395
1401
  this.quickToolObj.inlineQTBar.hidePopup();
1396
1402
  }
1403
+ if (this.quickToolObj && this.quickToolObj.textQTBar &&
1404
+ this.parent.element.ownerDocument.body.contains(this.quickToolObj.textQTBar.element)) {
1405
+ this.quickToolObj.textQTBar.hidePopup();
1406
+ }
1397
1407
  };
1398
1408
  Table.prototype.customTable = function (args, e) {
1399
1409
  var proxy = (this.self) ? this.self : this;
@@ -1401,7 +1411,8 @@ var Table = /** @class */ (function () {
1401
1411
  var argument = ((Browser.isDevice || (!isNullOrUndefined(args.args)
1402
1412
  && !isNullOrUndefined(args.args.originalEvent) &&
1403
1413
  args.args.originalEvent.action === 'insert-table')
1404
- || proxy.parent.inlineMode.enable) ? args : this);
1414
+ || proxy.parent.inlineMode.enable || !isNullOrUndefined(proxy.parent.quickToolbarSettings.text)) ? args :
1415
+ this);
1405
1416
  proxy.tableInsert(proxy.rowTextBox.value, proxy.columnTextBox.value, e, argument);
1406
1417
  }
1407
1418
  };
@@ -1,6 +1,7 @@
1
1
  import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
2
2
  import { IRenderer, IRichTextEditor, IToolbarOptions, IDropDownModel, IColorPickerModel } from '../base/interface';
3
3
  import { ColorPicker } from '@syncfusion/ej2-inputs';
4
+ import { ServiceLocator } from '../services/service-locator';
4
5
  /**
5
6
  * `Toolbar renderer` module is used to render toolbar in RichTextEditor.
6
7
  *
@@ -21,12 +22,14 @@ export declare class ToolbarRenderer implements IRenderer {
21
22
  private currentDropdown;
22
23
  private popupOverlay;
23
24
  private tooltip;
25
+ private l10n;
24
26
  /**
25
27
  * Constructor for toolbar renderer module
26
28
  *
27
29
  * @param {IRichTextEditor} parent - specifies the parent element.
30
+ * @param {ServiceLocator} serviceLocator - specifies the serviceLocator
28
31
  */
29
- constructor(parent?: IRichTextEditor);
32
+ constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
30
33
  private wireEvent;
31
34
  private destroyTooltip;
32
35
  private unWireEvent;
@@ -35,6 +38,7 @@ export declare class ToolbarRenderer implements IRenderer {
35
38
  private toolbarClicked;
36
39
  private dropDownSelected;
37
40
  private beforeDropDownItemRender;
41
+ private tooltipBeforeRender;
38
42
  private dropDownOpen;
39
43
  private dropDownClose;
40
44
  private removePopupContainer;
@@ -19,9 +19,13 @@ var ToolbarRenderer = /** @class */ (function () {
19
19
  * Constructor for toolbar renderer module
20
20
  *
21
21
  * @param {IRichTextEditor} parent - specifies the parent element.
22
+ * @param {ServiceLocator} serviceLocator - specifies the serviceLocator
22
23
  */
23
- function ToolbarRenderer(parent) {
24
+ function ToolbarRenderer(parent, serviceLocator) {
24
25
  this.parent = parent;
26
+ if (serviceLocator) {
27
+ this.l10n = serviceLocator.getService('rteLocale');
28
+ }
25
29
  this.wireEvent();
26
30
  }
27
31
  ToolbarRenderer.prototype.wireEvent = function () {
@@ -29,7 +33,11 @@ var ToolbarRenderer = /** @class */ (function () {
29
33
  this.parent.on(events.maximizeMinimizeClick, this.destroyTooltip, this);
30
34
  };
31
35
  ToolbarRenderer.prototype.destroyTooltip = function () {
32
- this.tooltip.close();
36
+ if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap')) && !isNullOrUndefined(document.querySelector(' [data-tooltip-id]'))) {
37
+ var tooltipTargetEle = document.querySelector('#' + (this.parent.element).id + ' [data-tooltip-id]');
38
+ var event_1 = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
39
+ tooltipTargetEle.dispatchEvent(event_1);
40
+ }
33
41
  };
34
42
  ToolbarRenderer.prototype.unWireEvent = function () {
35
43
  this.parent.off(events.destroy, this.unWireEvent);
@@ -65,6 +73,22 @@ var ToolbarRenderer = /** @class */ (function () {
65
73
  }
66
74
  this.parent.notify(events.beforeDropDownItemRender, args);
67
75
  };
76
+ ToolbarRenderer.prototype.tooltipBeforeRender = function (args) {
77
+ if (!isNOU(args.target.getAttribute('title'))) {
78
+ var tooltipTarget = args.target.getAttribute('title');
79
+ var tooltipText = void 0;
80
+ switch (tooltipTarget) {
81
+ case 'Minimize':
82
+ tooltipText = this.l10n.getConstant('minimize');
83
+ args.target.setAttribute('title', tooltipText + ' (Esc)');
84
+ break;
85
+ case 'Maximize':
86
+ tooltipText = this.l10n.getConstant('maximize');
87
+ args.target.setAttribute('title', tooltipText + ' (Ctrl+Shift+F)');
88
+ break;
89
+ }
90
+ }
91
+ };
68
92
  ToolbarRenderer.prototype.dropDownOpen = function (args) {
69
93
  if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNOU(args.element.parentElement.querySelector('.e-cell-merge')) &&
70
94
  (!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 () {
130
154
  target: '#' + this.parent.getID() + '_toolbar_wrapper [title]',
131
155
  showTipPointer: true,
132
156
  openDelay: 400,
157
+ opensOn: 'Hover',
158
+ beforeRender: this.tooltipBeforeRender.bind(this),
133
159
  cssClass: this.parent.cssClass,
134
160
  windowCollision: true,
135
161
  position: 'BottomCenter'
@@ -71,6 +71,7 @@ var Video = /** @class */ (function () {
71
71
  EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart);
72
72
  EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);
73
73
  EventHandler.remove(this.contentModule.getEditPanel(), 'cut', this.onCutHandler);
74
+ EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
74
75
  }
75
76
  }
76
77
  };
@@ -1115,6 +1116,9 @@ var Video = /** @class */ (function () {
1115
1116
  if (this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {
1116
1117
  this.quickToolObj.inlineQTBar.hidePopup();
1117
1118
  }
1119
+ if (this.quickToolObj.textQTBar && this.parent.element.ownerDocument.body.contains(this.quickToolObj.textQTBar.element)) {
1120
+ this.quickToolObj.textQTBar.hidePopup();
1121
+ }
1118
1122
  }
1119
1123
  };
1120
1124
  // eslint-disable-next-line
@@ -1226,10 +1230,8 @@ var Video = /** @class */ (function () {
1226
1230
  });
1227
1231
  uploadParentEle.appendChild(uploadEle);
1228
1232
  var fileName;
1229
- var rawFile;
1230
1233
  var selectArgs;
1231
1234
  var filesData;
1232
- var beforeUploadArgs;
1233
1235
  this.uploadObj = new Uploader({
1234
1236
  asyncSettings: { saveUrl: this.parent.insertVideoSettings.saveUrl, removeUrl: this.parent.insertVideoSettings.removeUrl },
1235
1237
  dropArea: span, multiple: false, enableRtl: this.parent.enableRtl,
@@ -1237,13 +1239,8 @@ var Video = /** @class */ (function () {
1237
1239
  selected: function (e) {
1238
1240
  proxy.isVideoUploaded = true;
1239
1241
  selectArgs = e;
1242
+ // eslint-disable-next-line
1240
1243
  filesData = e.filesData;
1241
- if (_this.parent.isServerRendered) {
1242
- selectArgs = JSON.parse(JSON.stringify(e));
1243
- e.cancel = true;
1244
- rawFile = e.filesData;
1245
- selectArgs.filesData = rawFile;
1246
- }
1247
1244
  _this.parent.trigger(events.fileSelected, selectArgs, function (selectArgs) {
1248
1245
  if (!selectArgs.cancel) {
1249
1246
  _this.checkExtension(selectArgs.filesData[0]);
@@ -1267,35 +1264,11 @@ var Video = /** @class */ (function () {
1267
1264
  });
1268
1265
  reader_1.readAsDataURL(selectArgs.filesData[0].rawFile);
1269
1266
  }
1270
- if (_this.parent.isServerRendered) {
1271
- /* eslint-disable */
1272
- _this.uploadObj._internalRenderSelect(selectArgs, rawFile);
1273
- /* eslint-enable */
1274
- }
1275
1267
  }
1276
1268
  });
1277
1269
  },
1278
1270
  beforeUpload: function (args) {
1279
- if (_this.parent.isServerRendered) {
1280
- beforeUploadArgs = JSON.parse(JSON.stringify(args));
1281
- beforeUploadArgs.filesData = filesData;
1282
- args.cancel = true;
1283
- _this.parent.trigger(events.fileUploading, beforeUploadArgs, function (beforeUploadArgs) {
1284
- if (beforeUploadArgs.cancel) {
1285
- return;
1286
- }
1287
- /* eslint-disable */
1288
- _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
1289
- beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;
1290
- _this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
1291
- beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;
1292
- _this.uploadObj.uploadFiles(rawFile, null);
1293
- /* eslint-enable */
1294
- });
1295
- }
1296
- else {
1297
- _this.parent.trigger(events.beforeFileUpload, args);
1298
- }
1271
+ _this.parent.trigger(events.beforeFileUpload, args);
1299
1272
  },
1300
1273
  uploading: function (e) {
1301
1274
  if (!_this.parent.isServerRendered) {
@@ -107,6 +107,7 @@ var ViewSource = /** @class */ (function () {
107
107
 
108
108
  */
109
109
  ViewSource.prototype.sourceCode = function (args) {
110
+ this.parent.notify(events.hidePopup, {});
110
111
  this.parent.isBlur = false;
111
112
  this.parent.trigger(events.actionBegin, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });
112
113
  var tbItems = selectAll('.' + CLS_TB_ITEM, this.parent.element);
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! richtexteditor icons */
4
3
  .e-rte-toolbar .e-alignments::before,
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! richtexteditor icons */
4
3
  .e-rte-toolbar .e-alignments::before,
@@ -1,4 +1,3 @@
1
- @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");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1,3 +1,3 @@
1
1
 
2
- @import 'ej2-base/styles/material3-dark-definition.scss';
2
+
3
3
  @import 'rich-text-editor/material3-dark.scss';
@@ -1,4 +1,3 @@
1
- @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");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1,3 +1,3 @@
1
1
 
2
- @import 'ej2-base/styles/material3-definition.scss';
2
+
3
3
  @import 'rich-text-editor/material3.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap-dark.scss';
2
2
  @import 'bootstrap-dark-definition.scss';
3
3
  @import 'icons/bootstrap-dark.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap.scss';
2
2
  @import 'bootstrap-definition.scss';
3
3
  @import 'icons/bootstrap.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap4-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap4.scss';
2
2
  @import 'bootstrap4-definition.scss';
3
3
  @import 'icons/bootstrap4.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5-dark.scss';
2
2
  @import 'bootstrap5-dark-definition.scss';
3
3
  @import 'icons/bootstrap5-dark.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5.scss';
2
2
  @import 'bootstrap5-definition.scss';
3
3
  @import 'icons/bootstrap5.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric-dark.scss';
2
2
  @import 'fabric-dark-definition.scss';
3
3
  @import 'icons/fabric-dark.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric.scss';
2
2
  @import 'fabric-definition.scss';
3
3
  @import 'icons/fabric.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent-dark.scss';
2
2
  @import 'fluent-dark-definition.scss';
3
3
  @import 'icons/fluent-dark.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent.scss';
2
2
  @import 'fluent-definition.scss';
3
3
  @import 'icons/fluent.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-light-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast-light.scss';
2
2
  @import 'highcontrast-light-definition.scss';
3
3
  @import 'icons/highcontrast-light.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast.scss';
2
2
  @import 'highcontrast-definition.scss';
3
3
  @import 'icons/highcontrast.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! richtexteditor icons */
4
3
  .e-rte-toolbar .e-alignments::before,
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/material-dark.scss';
2
2
  @import 'material-dark-definition.scss';
3
3
  @import 'icons/material-dark.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! richtexteditor icons */
4
3
  .e-rte-toolbar .e-alignments::before,
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material-definition.scss';
1
+ @import 'ej2-base/styles/definition/material.scss';
2
2
  @import 'material-definition.scss';
3
3
  @import 'icons/material.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @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");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material3-dark-definition.scss';
1
+
2
2
 
3
3
  @import 'material3-dark-definition.scss';
4
4
  @import 'icons/material3-dark.scss';
@@ -1,4 +1,3 @@
1
- @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");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material3-definition.scss';
1
+
2
2
 
3
3
  @import 'material3-definition.scss';
4
4
  @import 'icons/material3.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! richtexteditor icons */
4
3
  .e-rte-toolbar .e-alignments::before,
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/tailwind-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/tailwind-dark.scss';
2
2
  @import 'tailwind-dark-definition.scss';
3
3
  @import 'icons/tailwind-dark.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! richtexteditor icons */
4
3
  .e-rte-toolbar .e-alignments::before,
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/tailwind-definition.scss';
1
+ @import 'ej2-base/styles/definition/tailwind.scss';
2
2
  @import 'tailwind-definition.scss';
3
3
  @import 'icons/tailwind.scss';
4
4
  @import 'all.scss';
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! richtexteditor icons */
4
3
  .e-rte-toolbar .e-alignments::before,
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  /*! richtexteditor icons */
4
3
  .e-rte-toolbar .e-alignments::before,