@syncfusion/ej2-richtexteditor 29.2.4-795127 → 29.2.4-822566

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 (119) hide show
  1. package/dist/ej2-richtexteditor.umd.min.js +1 -1
  2. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-richtexteditor.es2015.js +79 -2
  4. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  5. package/dist/es6/ej2-richtexteditor.es5.js +80 -2
  6. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/editor-manager/base/constant.js +1 -1
  9. package/src/global.d.ts +1 -0
  10. package/src/rich-text-editor/actions/paste-clean-up.d.ts +4 -0
  11. package/src/rich-text-editor/actions/paste-clean-up.js +78 -2
  12. package/src/rich-text-editor/models/toolbar-settings-model.d.ts +7 -0
  13. package/src/rich-text-editor/models/toolbar-settings.d.ts +6 -0
  14. package/src/rich-text-editor/models/toolbar-settings.js +3 -0
  15. package/styles/bds-lite.css +397 -3
  16. package/styles/bds.css +397 -3
  17. package/styles/bootstrap-dark-lite.css +398 -0
  18. package/styles/bootstrap-dark.css +398 -0
  19. package/styles/bootstrap-lite.css +398 -0
  20. package/styles/bootstrap.css +398 -0
  21. package/styles/bootstrap4-lite.css +387 -0
  22. package/styles/bootstrap4.css +387 -0
  23. package/styles/bootstrap5-dark-lite.css +394 -0
  24. package/styles/bootstrap5-dark.css +394 -0
  25. package/styles/bootstrap5-lite.css +387 -0
  26. package/styles/bootstrap5.3-lite.css +388 -1
  27. package/styles/bootstrap5.3.css +388 -1
  28. package/styles/bootstrap5.css +387 -0
  29. package/styles/fabric-dark-lite.css +394 -0
  30. package/styles/fabric-dark.css +394 -0
  31. package/styles/fabric-lite.css +394 -0
  32. package/styles/fabric.css +394 -0
  33. package/styles/fluent-dark-lite.css +394 -0
  34. package/styles/fluent-dark.css +394 -0
  35. package/styles/fluent-lite.css +394 -0
  36. package/styles/fluent.css +394 -0
  37. package/styles/fluent2-lite.css +394 -0
  38. package/styles/fluent2.css +394 -0
  39. package/styles/highcontrast-light-lite.css +394 -0
  40. package/styles/highcontrast-light.css +394 -0
  41. package/styles/highcontrast-lite.css +394 -0
  42. package/styles/highcontrast.css +394 -0
  43. package/styles/material-dark-lite.css +394 -0
  44. package/styles/material-dark.css +394 -0
  45. package/styles/material-lite.css +394 -0
  46. package/styles/material.css +394 -0
  47. package/styles/material3-dark-lite.css +394 -19
  48. package/styles/material3-dark.css +394 -19
  49. package/styles/material3-lite.css +394 -19
  50. package/styles/material3.css +394 -19
  51. package/styles/rich-text-editor/_bds-definition.scss +13 -9
  52. package/styles/rich-text-editor/_bootstrap-dark-definition.scss +11 -7
  53. package/styles/rich-text-editor/_bootstrap-definition.scss +11 -7
  54. package/styles/rich-text-editor/_bootstrap4-definition.scss +11 -7
  55. package/styles/rich-text-editor/_bootstrap5-dark-definition.scss +11 -7
  56. package/styles/rich-text-editor/_bootstrap5-definition.scss +11 -7
  57. package/styles/rich-text-editor/_bootstrap5.3-definition.scss +12 -8
  58. package/styles/rich-text-editor/_fabric-dark-definition.scss +11 -7
  59. package/styles/rich-text-editor/_fabric-definition.scss +11 -7
  60. package/styles/rich-text-editor/_fluent-dark-definition.scss +11 -7
  61. package/styles/rich-text-editor/_fluent-definition.scss +11 -7
  62. package/styles/rich-text-editor/_fluent2-definition.scss +11 -7
  63. package/styles/rich-text-editor/_fusionnew-definition.scss +11 -7
  64. package/styles/rich-text-editor/_highcontrast-definition.scss +11 -7
  65. package/styles/rich-text-editor/_highcontrast-light-definition.scss +11 -7
  66. package/styles/rich-text-editor/_layout.scss +351 -7
  67. package/styles/rich-text-editor/_material-dark-definition.scss +11 -7
  68. package/styles/rich-text-editor/_material-definition.scss +11 -7
  69. package/styles/rich-text-editor/_material3-dark-definition.scss +11 -7
  70. package/styles/rich-text-editor/_material3-definition.scss +11 -7
  71. package/styles/rich-text-editor/_tailwind-dark-definition.scss +11 -7
  72. package/styles/rich-text-editor/_tailwind-definition.scss +11 -7
  73. package/styles/rich-text-editor/_tailwind3-definition.scss +11 -7
  74. package/styles/rich-text-editor/_theme.scss +4 -0
  75. package/styles/rich-text-editor/bds.css +397 -3
  76. package/styles/rich-text-editor/bootstrap-dark.css +398 -0
  77. package/styles/rich-text-editor/bootstrap.css +398 -0
  78. package/styles/rich-text-editor/bootstrap4.css +387 -0
  79. package/styles/rich-text-editor/bootstrap5-dark.css +394 -0
  80. package/styles/rich-text-editor/bootstrap5.3.css +388 -1
  81. package/styles/rich-text-editor/bootstrap5.css +387 -0
  82. package/styles/rich-text-editor/fabric-dark.css +394 -0
  83. package/styles/rich-text-editor/fabric.css +394 -0
  84. package/styles/rich-text-editor/fluent-dark.css +394 -0
  85. package/styles/rich-text-editor/fluent.css +394 -0
  86. package/styles/rich-text-editor/fluent2.css +394 -0
  87. package/styles/rich-text-editor/highcontrast-light.css +394 -0
  88. package/styles/rich-text-editor/highcontrast.css +394 -0
  89. package/styles/rich-text-editor/icons/_bds.scss +12 -0
  90. package/styles/rich-text-editor/icons/_bootstrap-dark.scss +12 -0
  91. package/styles/rich-text-editor/icons/_bootstrap.scss +12 -0
  92. package/styles/rich-text-editor/icons/_bootstrap4.scss +12 -0
  93. package/styles/rich-text-editor/icons/_bootstrap5.3.scss +12 -0
  94. package/styles/rich-text-editor/icons/_bootstrap5.scss +12 -0
  95. package/styles/rich-text-editor/icons/_fabric-dark.scss +12 -0
  96. package/styles/rich-text-editor/icons/_fabric.scss +12 -0
  97. package/styles/rich-text-editor/icons/_fluent.scss +12 -0
  98. package/styles/rich-text-editor/icons/_fluent2.scss +12 -0
  99. package/styles/rich-text-editor/icons/_fusionnew.scss +12 -0
  100. package/styles/rich-text-editor/icons/_highcontrast-light.scss +12 -0
  101. package/styles/rich-text-editor/icons/_highcontrast.scss +12 -0
  102. package/styles/rich-text-editor/icons/_material-dark.scss +12 -0
  103. package/styles/rich-text-editor/icons/_material.scss +12 -0
  104. package/styles/rich-text-editor/icons/_material3.scss +12 -0
  105. package/styles/rich-text-editor/icons/_tailwind.scss +12 -0
  106. package/styles/rich-text-editor/icons/_tailwind3.scss +12 -0
  107. package/styles/rich-text-editor/material-dark.css +394 -0
  108. package/styles/rich-text-editor/material.css +394 -0
  109. package/styles/rich-text-editor/material3-dark.css +394 -19
  110. package/styles/rich-text-editor/material3.css +394 -19
  111. package/styles/rich-text-editor/tailwind-dark.css +394 -0
  112. package/styles/rich-text-editor/tailwind.css +394 -0
  113. package/styles/rich-text-editor/tailwind3.css +394 -0
  114. package/styles/tailwind-dark-lite.css +394 -0
  115. package/styles/tailwind-dark.css +394 -0
  116. package/styles/tailwind-lite.css +394 -0
  117. package/styles/tailwind.css +394 -0
  118. package/styles/tailwind3-lite.css +394 -0
  119. package/styles/tailwind3.css +394 -0
package/package.json CHANGED
@@ -80,6 +80,6 @@
80
80
  "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
81
81
  },
82
82
  "typings": "index.d.ts",
83
- "version": "29.2.4-795127",
83
+ "version": "29.2.4-822566",
84
84
  "sideEffects": false
85
85
  }
@@ -95,7 +95,7 @@ export var SELF_CLOSING_TAGS = ['area', 'base', 'br', 'embed', 'hr', 'img', 'inp
95
95
  *
96
96
  * @hidden
97
97
  */
98
- export var PASTE_SOURCE = ['word', 'excel', 'onenote'];
98
+ export var PASTE_SOURCE = ['word', 'excel', 'onenote', 'powerpoint'];
99
99
  /**
100
100
  * @hidden
101
101
  */
@@ -0,0 +1 @@
1
+ export * from './index';
@@ -33,6 +33,10 @@ export declare class PasteCleanup {
33
33
  private destroy;
34
34
  private removeEventListener;
35
35
  private pasteClean;
36
+ private findSource;
37
+ private extractImageSrcDOM;
38
+ private fetchImageWithMetadata;
39
+ private getFilenameFromUrl;
36
40
  private splitBreakLine;
37
41
  private makeSpace;
38
42
  private imgUploading;
@@ -1,7 +1,7 @@
1
1
  import * as events from '../base/constant';
2
2
  import { Popup } from '@syncfusion/ej2-popups';
3
3
  import { RadioButton } from '@syncfusion/ej2-buttons';
4
- import { isNullOrUndefined as isNOU, isNullOrUndefined, detach, extend, addClass, removeClass } from '@syncfusion/ej2-base';
4
+ import { isNullOrUndefined as isNOU, isNullOrUndefined, detach, extend, addClass, removeClass, createElement } from '@syncfusion/ej2-base';
5
5
  import { getUniqueID, Browser, closest } from '@syncfusion/ej2-base';
6
6
  import { CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT } from '../base/classes';
7
7
  import { CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT } from '../base/classes';
@@ -13,6 +13,7 @@ import { Uploader } from '@syncfusion/ej2-inputs';
13
13
  import * as classes from '../base/classes';
14
14
  import { sanitizeHelper, convertToBlob } from '../base/util';
15
15
  import { scrollToCursor } from '../../common/util';
16
+ import { PASTE_SOURCE } from './../../editor-manager/base';
16
17
  /**
17
18
  * PasteCleanup module called when pasting content in RichTextEditor
18
19
  */
@@ -113,7 +114,11 @@ var PasteCleanup = /** @class */ (function () {
113
114
  if (e.args && value !== null && this.parent.editorMode === 'HTML') {
114
115
  var file = void 0;
115
116
  var files = e.args.clipboardData.files;
116
- if (value.length === 0 || (!isNOU(files) && files.length > 0)) {
117
+ var elm = createElement('p');
118
+ elm.innerHTML = value;
119
+ var source = this.findSource(elm);
120
+ var extractedSRC = this.parent.insertImageSettings.uploadRemoteURLs ? this.extractImageSrcDOM(value) : null;
121
+ if (value.length === 0 || (!isNOU(files) && files.length > 0 && source === 'html')) {
117
122
  var htmlRegex = new RegExp(/<\/[a-z][\s\S]*>/i);
118
123
  value = e.args.clipboardData.getData('text/plain');
119
124
  this.parent.trigger(events.beforePasteCleanup, { value: value });
@@ -156,6 +161,14 @@ var PasteCleanup = /** @class */ (function () {
156
161
  value = divElement.innerHTML;
157
162
  }
158
163
  }
164
+ else if (Array.isArray(extractedSRC) && extractedSRC.length &&
165
+ this.parent.insertImageSettings.saveUrl && this.parent.insertImageSettings.path) {
166
+ this.parent.trigger(events.beforePasteCleanup, { value: value });
167
+ for (var i = 0; i < extractedSRC.length; i++) {
168
+ var src = extractedSRC[i];
169
+ this.fetchImageWithMetadata(src);
170
+ }
171
+ }
159
172
  else if (value.length > 0) {
160
173
  this.parent.trigger(events.beforePasteCleanup, { value: value });
161
174
  this.parent.formatter.editorManager.observer.notify(EVENTS.MS_WORD_CLEANUP, {
@@ -212,6 +225,69 @@ var PasteCleanup = /** @class */ (function () {
212
225
  }
213
226
  }
214
227
  };
228
+ PasteCleanup.prototype.findSource = function (element) {
229
+ var metaNodes = element.querySelectorAll('meta');
230
+ for (var i = 0; i < metaNodes.length; i++) {
231
+ var metaNode = metaNodes[i];
232
+ var content = metaNode.getAttribute('content');
233
+ var name_1 = metaNode.getAttribute('name');
234
+ if (name_1 && name_1.toLowerCase().indexOf('generator') >= 0 && content && content.toLowerCase().indexOf('microsoft') >= 0) {
235
+ for (var j = 0; j < PASTE_SOURCE.length; j++) {
236
+ if (content.toLowerCase().indexOf(PASTE_SOURCE[j]) >= 0) {
237
+ return PASTE_SOURCE[j];
238
+ }
239
+ }
240
+ }
241
+ }
242
+ return 'html';
243
+ };
244
+ PasteCleanup.prototype.extractImageSrcDOM = function (value) {
245
+ if (!value || typeof value !== 'string') {
246
+ return null;
247
+ }
248
+ var parser = new DOMParser();
249
+ var doc = parser.parseFromString(value, 'text/html');
250
+ var images = doc.querySelectorAll('img');
251
+ if (images.length === 0) {
252
+ return null;
253
+ }
254
+ var srcs = Array.from(images)
255
+ .map(function (img) { return img.getAttribute('src') || img.src || ''; })
256
+ .map(function (src) { return src.trim(); })
257
+ .filter(function (src) { return !!src; })
258
+ // Exclude base64/data URLs, blob URLs, and anything containing "id="
259
+ .filter(function (src) {
260
+ var s = src.toLowerCase();
261
+ return !s.startsWith('data:') && !s.includes('base64') && !s.startsWith('blob:') && !s.includes('id=');
262
+ });
263
+ return srcs.length ? srcs : null;
264
+ };
265
+ PasteCleanup.prototype.fetchImageWithMetadata = function (url) {
266
+ var _this = this;
267
+ fetch(url)
268
+ .then(function (response) {
269
+ if (!response.ok) {
270
+ console.warn("Fetch status " + response.status + " for: " + url);
271
+ return null;
272
+ }
273
+ return response.blob();
274
+ })
275
+ .then(function (blob) {
276
+ if (blob) {
277
+ var filename = _this.getFilenameFromUrl(url) || 'downloaded-image.jpg';
278
+ var mimeType = blob.type || 'image/jpeg';
279
+ var file = new File([blob], filename, { type: mimeType });
280
+ var imageElement = _this.parent.inputElement.querySelector("img[src=\"" + url + "\"]");
281
+ _this.uploadMethod(file, imageElement);
282
+ }
283
+ });
284
+ };
285
+ // Helper method to extract filename from URL
286
+ PasteCleanup.prototype.getFilenameFromUrl = function (url) {
287
+ var pathname = new URL(url).pathname;
288
+ var filename = pathname.substring(pathname.lastIndexOf('/') + 1);
289
+ return filename || 'image.jpg';
290
+ };
215
291
  PasteCleanup.prototype.splitBreakLine = function (value) {
216
292
  var enterSplitText = value.split('\r\n\r\n');
217
293
  var finalText = '';
@@ -227,6 +227,13 @@ export interface ImageSettingsModel {
227
227
  */
228
228
  resizeByPercent?: boolean;
229
229
 
230
+ /**
231
+ * Specifies whether to allow uploading remote image URLs.
232
+ *
233
+ * @default false
234
+ */
235
+ uploadRemoteURLs?: boolean;
236
+
230
237
  }
231
238
 
232
239
  /**
@@ -201,6 +201,12 @@ export declare class ImageSettings extends ChildProperty<ImageSettings> {
201
201
  * @default false
202
202
  */
203
203
  resizeByPercent: boolean;
204
+ /**
205
+ * Specifies whether to allow uploading remote image URLs.
206
+ *
207
+ * @default false
208
+ */
209
+ uploadRemoteURLs: boolean;
204
210
  }
205
211
  /**
206
212
  * Configures the audio settings of the RichTextEditor.
@@ -155,6 +155,9 @@ var ImageSettings = /** @class */ (function (_super) {
155
155
  __decorate([
156
156
  Property(false)
157
157
  ], ImageSettings.prototype, "resizeByPercent", void 0);
158
+ __decorate([
159
+ Property(false)
160
+ ], ImageSettings.prototype, "uploadRemoteURLs", void 0);
158
161
  return ImageSettings;
159
162
  }(ChildProperty));
160
163
  export { ImageSettings };
@@ -63,6 +63,18 @@
63
63
  .e-rte-dropdown-popup .e-justify-center::before {
64
64
  content: "\e813";
65
65
  }
66
+ .e-toolbar-wrapper .e-left-wrap::before,
67
+ .e-toolbar-container .e-left-wrap::before,
68
+ .e-rte-toolbar .e-left-wrap::before,
69
+ .e-rte-dropdown-popup .e-left-wrap::before {
70
+ content: "\e95b";
71
+ }
72
+ .e-toolbar-wrapper .e-right-wrap::before,
73
+ .e-toolbar-container .e-right-wrap::before,
74
+ .e-rte-toolbar .e-right-wrap::before,
75
+ .e-rte-dropdown-popup .e-right-wrap::before {
76
+ content: "\e95c";
77
+ }
66
78
  .e-toolbar-wrapper .e-justify-right::before,
67
79
  .e-toolbar-container .e-justify-right::before,
68
80
  .e-rte-toolbar .e-justify-right::before,
@@ -423,6 +435,12 @@
423
435
  .e-rte-dropdown-popup .e-table-edit-properties::before {
424
436
  content: "\e954";
425
437
  }
438
+ .e-toolbar-wrapper .e-table-editCell-properties::before,
439
+ .e-toolbar-container .e-table-editCell-properties::before,
440
+ .e-rte-toolbar .e-table-editCell-properties::before,
441
+ .e-rte-dropdown-popup .e-table-editCell-properties::before {
442
+ content: "\e95e";
443
+ }
426
444
  .e-toolbar-wrapper .e-create-table::before,
427
445
  .e-toolbar-container .e-create-table::before,
428
446
  .e-rte-toolbar .e-create-table::before,
@@ -623,6 +641,69 @@
623
641
  display: block;
624
642
  font-size: 14px;
625
643
  }
644
+ .e-richtexteditor .e-rte-content .e-row-wrapper,
645
+ .e-richtexteditor .e-rte-content .e-col-wrapper,
646
+ .e-richtexteditor .e-rte-content .e-table-wrapper {
647
+ -webkit-user-select: none;
648
+ -moz-user-select: none;
649
+ -ms-user-select: none;
650
+ user-select: none;
651
+ position: absolute;
652
+ cursor: pointer;
653
+ }
654
+ .e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-drag-and-drop,
655
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-drag-and-drop,
656
+ .e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-drag-and-drop {
657
+ display: -webkit-box;
658
+ display: -ms-flexbox;
659
+ display: flex;
660
+ -webkit-box-align: center;
661
+ -ms-flex-align: center;
662
+ align-items: center;
663
+ -webkit-box-pack: center;
664
+ -ms-flex-pack: center;
665
+ justify-content: center;
666
+ border-radius: 4px 0 0 4px;
667
+ }
668
+ .e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-drag-and-drop.e-rtl,
669
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-drag-and-drop.e-rtl,
670
+ .e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-drag-and-drop.e-rtl {
671
+ border-radius: 0 4px 4px 0;
672
+ }
673
+ .e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-drag-and-drop:hover,
674
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-drag-and-drop:hover,
675
+ .e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-drag-and-drop:hover {
676
+ background: var(--color-sf-utility-primary-lighter);
677
+ }
678
+ .e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-drag-and-drop.e-active,
679
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-drag-and-drop.e-active,
680
+ .e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-drag-and-drop.e-active {
681
+ background-color: var(--color-sf-brand-primary);
682
+ color: var(--color-sf-utility-primary-lighter);
683
+ }
684
+ .e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-move,
685
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-move,
686
+ .e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-move {
687
+ border-radius: 50%;
688
+ }
689
+ .e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-move:hover,
690
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-move:hover,
691
+ .e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-move:hover {
692
+ background: var(--color-sf-utility-primary-lighter);
693
+ }
694
+ .e-richtexteditor .e-rte-content .e-row-wrapper .e-icons.e-move.e-active,
695
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-move.e-active,
696
+ .e-richtexteditor .e-rte-content .e-table-wrapper .e-icons.e-move.e-active {
697
+ background-color: var(--color-sf-brand-primary);
698
+ color: var(--color-sf-utility-primary-lighter);
699
+ }
700
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-drag-and-drop {
701
+ border-radius: 4px 4px 0 0;
702
+ }
703
+ .e-richtexteditor .e-rte-content .e-col-wrapper .e-icons.e-drag-and-drop::before {
704
+ -webkit-transform: rotate(90deg);
705
+ transform: rotate(90deg);
706
+ }
626
707
  .e-richtexteditor .e-source-content {
627
708
  display: none;
628
709
  }
@@ -1128,7 +1209,7 @@
1128
1209
  .e-richtexteditor .e-source-content .e-content table th.e-cell-select.e-multi-cells-select::after,
1129
1210
  .e-richtexteditor .e-rte-iframe-content .e-content table td.e-cell-select.e-multi-cells-select::after,
1130
1211
  .e-richtexteditor .e-rte-iframe-content .e-content table th.e-cell-select.e-multi-cells-select::after {
1131
- background-color: rgba(var(--color-sf-utility-primary-light), 0.18);
1212
+ background-color: color-mix(in srgb, var(--color-sf-utility-primary-light) 18%, transparent);
1132
1213
  content: "";
1133
1214
  position: absolute;
1134
1215
  top: 0;
@@ -1342,6 +1423,30 @@
1342
1423
  top: unset;
1343
1424
  }
1344
1425
 
1426
+ .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item .e-colorpicker-wrapper.e-rte-font-colorpicker .e-split-colorpicker.e-icons::before, .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item .e-colorpicker-wrapper.e-rte-background-colorpicker .e-split-colorpicker.e-icons::before,
1427
+ .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item .e-colorpicker-container.e-rte-font-colorpicker .e-split-colorpicker.e-icons::before,
1428
+ .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item .e-colorpicker-container.e-rte-background-colorpicker .e-split-colorpicker.e-icons::before {
1429
+ display: block;
1430
+ font-family: "e-icons";
1431
+ font-weight: 400;
1432
+ line-height: 1;
1433
+ text-transform: none;
1434
+ }
1435
+ .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker .e-selected-color,
1436
+ .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker .e-selected-color {
1437
+ background: none;
1438
+ display: block;
1439
+ margin-top: 3px;
1440
+ width: 100%;
1441
+ height: auto;
1442
+ }
1443
+ .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker .e-selected-color .e-split-preview,
1444
+ .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker .e-selected-color .e-split-preview {
1445
+ height: 3px;
1446
+ bottom: 0;
1447
+ top: unset;
1448
+ }
1449
+
1345
1450
  .e-colorpicker-popup.e-rte-dropdown .e-container.e-color-palette .e-clr-pal-rec-wpr .e-recent-clr-span {
1346
1451
  font-family: "Inter";
1347
1452
  }
@@ -1499,6 +1604,8 @@
1499
1604
  }
1500
1605
 
1501
1606
  .e-rte-image.e-imginline,
1607
+ .e-rte-image.e-img-inline,
1608
+ .e-img-caption-container.e-img-inline,
1502
1609
  .e-rte-audio.e-audio-inline,
1503
1610
  .e-rte-video.e-video-inline {
1504
1611
  margin-left: 5px;
@@ -1511,6 +1618,10 @@
1511
1618
  }
1512
1619
 
1513
1620
  .e-rte-image.e-imgcenter,
1621
+ .e-rte-image.e-img-center,
1622
+ .e-rte-image.e-img-break,
1623
+ .e-img-caption-container.e-img-center,
1624
+ .e-img-caption-container.e-img-break,
1514
1625
  .e-rte-video.e-video-center {
1515
1626
  cursor: pointer;
1516
1627
  display: block;
@@ -1675,6 +1786,12 @@
1675
1786
  color: var(--color-sf-brand-primary);
1676
1787
  }
1677
1788
 
1789
+ .e-rte-table-resize .e-circle::before,
1790
+ .e-rte-table-resize .e-circle-add::before {
1791
+ background-color: var(--color-sf-bg-primary);
1792
+ border-radius: 50%;
1793
+ }
1794
+
1678
1795
  .e-rte-table-resize.e-tb-col-insert {
1679
1796
  width: 26px;
1680
1797
  height: 22px;
@@ -1695,6 +1812,7 @@
1695
1812
  line-height: 16px;
1696
1813
  border: 1px;
1697
1814
  position: absolute;
1815
+ z-index: 2;
1698
1816
  }
1699
1817
 
1700
1818
  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle-add {
@@ -1717,6 +1835,7 @@
1717
1835
  line-height: 8px;
1718
1836
  border: 1px;
1719
1837
  position: absolute;
1838
+ z-index: 2;
1720
1839
  }
1721
1840
 
1722
1841
  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle {
@@ -1750,6 +1869,63 @@
1750
1869
  height: 1px;
1751
1870
  }
1752
1871
 
1872
+ .e-rte-image.e-img-left-wrap,
1873
+ .e-img-caption-container.e-img-left-wrap {
1874
+ float: left;
1875
+ margin: 5px 5px 5px 0;
1876
+ }
1877
+ .e-rte-image.e-img-right-wrap,
1878
+ .e-img-caption-container.e-img-right-wrap {
1879
+ float: right;
1880
+ margin: 5px 0 5px 5px;
1881
+ }
1882
+ .e-rte-image.e-img-left, .e-rte-image.e-img-right,
1883
+ .e-img-caption-container.e-img-left,
1884
+ .e-img-caption-container.e-img-right {
1885
+ margin-top: 5px;
1886
+ margin-bottom: 5px;
1887
+ }
1888
+ .e-rte-image.e-img-right,
1889
+ .e-img-caption-container.e-img-right {
1890
+ margin-right: 0;
1891
+ margin-left: auto;
1892
+ }
1893
+ .e-rte-image.e-img-left,
1894
+ .e-img-caption-container.e-img-left {
1895
+ margin-left: 0;
1896
+ margin-right: auto;
1897
+ }
1898
+
1899
+ .e-img-caption-container {
1900
+ max-width: 100%;
1901
+ position: relative;
1902
+ }
1903
+ .e-img-caption-container.e-img-left-wrap, .e-img-caption-container.e-img-right-wrap {
1904
+ display: inline-block;
1905
+ }
1906
+ .e-img-caption-container.e-img-left, .e-img-caption-container.e-img-right {
1907
+ display: block;
1908
+ }
1909
+ .e-img-caption-container .e-img-caption-text {
1910
+ -webkit-box-sizing: border-box;
1911
+ box-sizing: border-box;
1912
+ display: block;
1913
+ font-size: 20px;
1914
+ font-weight: 400;
1915
+ margin: auto;
1916
+ opacity: 0.9;
1917
+ position: relative;
1918
+ text-align: center;
1919
+ width: 100%;
1920
+ }
1921
+ .e-img-caption-container.e-img-left-wrap .e-img-wrap img, .e-img-caption-container.e-img-right-wrap .e-img-wrap img, .e-img-caption-container.e-img-left .e-img-wrap img, .e-img-caption-container.e-img-right .e-img-wrap img, .e-img-caption-container.e-img-center .e-img-wrap img, .e-img-caption-container.e-img-break .e-img-wrap img {
1922
+ margin-bottom: 0;
1923
+ }
1924
+ .e-img-caption-container.e-img-center, .e-img-caption-container.e-img-break {
1925
+ margin-left: auto;
1926
+ margin-right: auto;
1927
+ }
1928
+
1753
1929
  .e-richtexteditor .e-linkheader,
1754
1930
  .e-richtexteditor .e-audioheader,
1755
1931
  .e-richtexteditor .e-videoheader,
@@ -2032,6 +2208,114 @@
2032
2208
  .e-rte-elements .e-rte-edit-table-content .e-caret {
2033
2209
  opacity: 0.75;
2034
2210
  }
2211
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row,
2212
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row {
2213
+ display: -webkit-box;
2214
+ display: -ms-flexbox;
2215
+ display: flex;
2216
+ gap: 16px;
2217
+ }
2218
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row:first-child .e-rte-edit-table-tablewidth,
2219
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row:first-child .e-rte-edit-table-tableheight,
2220
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row:first-child .e-rte-edit-table-tablewidth,
2221
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row:first-child .e-rte-edit-table-tableheight {
2222
+ width: 50%;
2223
+ }
2224
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row:not(:first-child) .e-rte-edit-table-cellpadding,
2225
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row:not(:first-child) .e-rte-edit-table-bgcolor,
2226
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row:not(:first-child) .e-rte-edit-table-cellpadding,
2227
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-row:not(:first-child) .e-rte-edit-table-bgcolor {
2228
+ width: 50%;
2229
+ }
2230
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-field-flex,
2231
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-field-flex {
2232
+ display: -webkit-box;
2233
+ display: -ms-flexbox;
2234
+ display: flex;
2235
+ -webkit-box-pack: justify;
2236
+ -ms-flex-pack: justify;
2237
+ justify-content: space-between;
2238
+ }
2239
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-widthValue button,
2240
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-heightValue button,
2241
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-widthValue button,
2242
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-heightValue button {
2243
+ padding: 2px 8px;
2244
+ margin-top: 2px;
2245
+ }
2246
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-widthValue button .e-rte-dropdown-btn-content-text,
2247
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-heightValue button .e-rte-dropdown-btn-content-text,
2248
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-widthValue button .e-rte-dropdown-btn-content-text,
2249
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-heightValue button .e-rte-dropdown-btn-content-text {
2250
+ display: inline-block;
2251
+ width: 18px;
2252
+ white-space: nowrap;
2253
+ overflow: hidden;
2254
+ text-overflow: ellipsis;
2255
+ }
2256
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container,
2257
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container {
2258
+ display: -webkit-box;
2259
+ display: -ms-flexbox;
2260
+ display: flex;
2261
+ gap: 24px;
2262
+ }
2263
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container .e-rte-edit-tablecell-horizontal-align,
2264
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container .e-rte-edit-tablecell-vertical-align,
2265
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container .e-rte-edit-tablecell-horizontal-align,
2266
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container .e-rte-edit-tablecell-vertical-align {
2267
+ margin-top: 8px;
2268
+ width: 50%;
2269
+ }
2270
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container .e-rte-edit-tablecell-btn-group,
2271
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container .e-rte-edit-tablecell-btn-group {
2272
+ margin-top: 4px;
2273
+ }
2274
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container .e-rte-tablecell-align-btn,
2275
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-tablecell-align-container .e-rte-tablecell-align-btn {
2276
+ width: auto;
2277
+ height: auto;
2278
+ padding: 12px;
2279
+ font-size: 14px;
2280
+ }
2281
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-border .e-rte-edit-table-borderfields,
2282
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-border .e-rte-edit-table-borderfields {
2283
+ display: -webkit-box;
2284
+ display: -ms-flexbox;
2285
+ display: flex;
2286
+ -webkit-box-pack: justify;
2287
+ -ms-flex-pack: justify;
2288
+ justify-content: space-between;
2289
+ }
2290
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-border .e-rte-edit-table-borderfields .e-rte-edit-table-borderwidth,
2291
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-border .e-rte-edit-table-borderfields .e-rte-edit-table-borderwidth {
2292
+ width: 37%;
2293
+ }
2294
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-border .e-rte-edit-table-borderfields .e-rte-dropdown-btn-text-wrapper,
2295
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-border .e-rte-edit-table-borderfields .e-rte-dropdown-btn-text-wrapper {
2296
+ width: 47px;
2297
+ }
2298
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-element,
2299
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-element {
2300
+ margin-top: 12px;
2301
+ }
2302
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-field,
2303
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-field {
2304
+ margin-top: 4px;
2305
+ }
2306
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-dropdown-btn-text,
2307
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-dropdown-btn-text {
2308
+ font-weight: 400;
2309
+ }
2310
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-rte-edit-table-borderlabel,
2311
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-rte-edit-table-borderlabel {
2312
+ font-weight: 600;
2313
+ font-style: semi-bold;
2314
+ }
2315
+ .e-richtexteditor .e-rte-edit-tablecell-dialog .e-caret,
2316
+ .e-rte-elements .e-rte-edit-tablecell-dialog .e-caret {
2317
+ opacity: 0.75;
2318
+ }
2035
2319
  .e-richtexteditor .e-rte-emojipicker-popup.e-popup.e-popup-open,
2036
2320
  .e-rte-elements .e-rte-emojipicker-popup.e-popup.e-popup-open {
2037
2321
  border: 1px solid var(--color-sf-border-secondary);
@@ -2827,6 +3111,112 @@
2827
3111
  line-height: 2px;
2828
3112
  }
2829
3113
 
3114
+ .e-smartrichtexteditor .e-rte-ai-selected-text {
3115
+ color: rgb(255, 255, 255);
3116
+ background: rgb(51, 103, 209);
3117
+ }
3118
+ .e-smartrichtexteditor .e-rte-aiquery-dialog {
3119
+ border: 0;
3120
+ }
3121
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content {
3122
+ min-height: 100px;
3123
+ overflow: hidden;
3124
+ display: -webkit-box !important;
3125
+ display: -ms-flexbox !important;
3126
+ display: flex !important; /* stylelint-disable-line declaration-no-important */
3127
+ -webkit-box-orient: vertical;
3128
+ -webkit-box-direction: normal;
3129
+ -ms-flex-direction: column;
3130
+ flex-direction: column;
3131
+ padding: 0;
3132
+ border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
3133
+ }
3134
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content .e-rte-ai-assit-content-container {
3135
+ -webkit-box-flex: 1;
3136
+ -ms-flex: 1 1 auto;
3137
+ flex: 1 1 auto;
3138
+ display: -webkit-box;
3139
+ display: -ms-flexbox;
3140
+ display: flex;
3141
+ -webkit-box-orient: vertical;
3142
+ -webkit-box-direction: normal;
3143
+ -ms-flex-direction: column;
3144
+ flex-direction: column;
3145
+ min-height: 0;
3146
+ width: 100%;
3147
+ }
3148
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content .e-aiassistview {
3149
+ -webkit-box-flex: 1;
3150
+ -ms-flex: 1 1 auto;
3151
+ flex: 1 1 auto;
3152
+ display: -webkit-box;
3153
+ display: -ms-flexbox;
3154
+ display: flex;
3155
+ -webkit-box-orient: vertical;
3156
+ -webkit-box-direction: normal;
3157
+ -ms-flex-direction: column;
3158
+ flex-direction: column;
3159
+ min-height: 0;
3160
+ height: auto !important; /* stylelint-disable-line declaration-no-important */
3161
+ }
3162
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content .e-aiassistview .e-view-header {
3163
+ -webkit-box-flex: 0;
3164
+ -ms-flex: 0 0 auto;
3165
+ flex: 0 0 auto;
3166
+ }
3167
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content .e-aiassistview .e-view-content {
3168
+ -webkit-box-flex: 1;
3169
+ -ms-flex: 1 1 auto;
3170
+ flex: 1 1 auto;
3171
+ overflow-y: auto;
3172
+ overflow-x: hidden;
3173
+ min-height: 0;
3174
+ }
3175
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content .e-aiassistview .e-view-container {
3176
+ margin: auto;
3177
+ }
3178
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content .e-aiassistview .banner-content {
3179
+ display: -webkit-box;
3180
+ display: -ms-flexbox;
3181
+ display: flex;
3182
+ -webkit-box-orient: vertical;
3183
+ -webkit-box-direction: normal;
3184
+ -ms-flex-direction: column;
3185
+ flex-direction: column;
3186
+ -webkit-box-pack: center;
3187
+ -ms-flex-pack: center;
3188
+ justify-content: center;
3189
+ height: 230px;
3190
+ text-align: center;
3191
+ }
3192
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content .e-aiassistview .banner-content .e-assistview-icon::before {
3193
+ font-size: 35px;
3194
+ }
3195
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-content .e-aiassistview .e-footer {
3196
+ width: 85%;
3197
+ }
3198
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
3199
+ border: 1px solid transparent;
3200
+ background-color: transparent;
3201
+ background: transparent;
3202
+ -webkit-box-shadow: none;
3203
+ box-shadow: none;
3204
+ }
3205
+ .e-smartrichtexteditor .e-rte-aiquery-dialog .e-dlg-overlay {
3206
+ background-color: rgb(250, 250, 250);
3207
+ opacity: 0.6;
3208
+ }
3209
+
3210
+ .e-smartrichtexteditor.e-dlg-target.e-scroll-disabled {
3211
+ overflow: initial !important; /* stylelint-disable-line declaration-no-important */
3212
+ }
3213
+
3214
+ .e-rte-ai-assist-history.e-rte-dropdown-menu.e-popup-open {
3215
+ visibility: hidden;
3216
+ max-height: 200px;
3217
+ overflow-y: auto;
3218
+ }
3219
+
2830
3220
 
2831
3221
 
2832
3222
 
@@ -3067,7 +3457,7 @@ iframe.e-rte-content {
3067
3457
  .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active:not(.e-overlay) .e-tbar-btn,
3068
3458
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item.e-active:not(.e-overlay) .e-tbar-btn {
3069
3459
  border: 1px solid transparent;
3070
- background: var(--color-sf-bg-secondary);
3460
+ background: var(--color-sf-utility-secondary-bg-color-pressed);
3071
3461
  }
3072
3462
 
3073
3463
  .e-richtexteditor.e-disabled .e-rte-toolbar .e-toolbar-item .e-tbar-btn,
@@ -3184,7 +3574,7 @@ iframe.e-rte-content {
3184
3574
 
3185
3575
  .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-split-btn-wrapper {
3186
3576
  border: 1px solid transparent;
3187
- background: var(--color-sf-bg-secondary);
3577
+ background: var(--color-sf-utility-secondary-bg-color-pressed);
3188
3578
  }
3189
3579
  .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-split-btn-wrapper .e-split-btn,
3190
3580
  .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-split-btn-wrapper .e-dropdown-btn {
@@ -3383,6 +3773,10 @@ span.e-table-box.e-rbox-select {
3383
3773
  background: var(--color-sf-bg-primary);
3384
3774
  }
3385
3775
 
3776
+ .e-upload.e-lib.e-control-wrapper.e-rte-dialog-upload {
3777
+ background: var(--color-sf-bg-primary);
3778
+ }
3779
+
3386
3780
  .e-rte-emojipicker-popup.e-popup.e-popup-open {
3387
3781
  background: var(--color-sf-bg-primary-alt);
3388
3782
  -webkit-box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(24, 33, 47, 0.06);