@syncfusion/ej2-richtexteditor 23.2.7 → 24.1.43

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 (107) hide show
  1. package/CHANGELOG.md +35 -1
  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 +574 -309
  6. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-richtexteditor.es5.js +573 -308
  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/common/config.js +1 -1
  14. package/src/editor-manager/plugin/audio.js +13 -3
  15. package/src/editor-manager/plugin/dom-node.js +1 -14
  16. package/src/editor-manager/plugin/image.js +30 -3
  17. package/src/editor-manager/plugin/inserthtml.js +5 -2
  18. package/src/editor-manager/plugin/ms-word-clean-up.js +4 -1
  19. package/src/editor-manager/plugin/nodecutter.js +1 -1
  20. package/src/editor-manager/plugin/selection-commands.js +39 -0
  21. package/src/rich-text-editor/actions/base-quick-toolbar.js +18 -4
  22. package/src/rich-text-editor/actions/color-picker.js +3 -3
  23. package/src/rich-text-editor/actions/dropdown-buttons.js +4 -2
  24. package/src/rich-text-editor/actions/emoji-picker.js +12 -3
  25. package/src/rich-text-editor/actions/enter-key.js +2 -1
  26. package/src/rich-text-editor/actions/file-manager.js +1 -1
  27. package/src/rich-text-editor/actions/format-painter.js +1 -1
  28. package/src/rich-text-editor/actions/full-screen.js +2 -2
  29. package/src/rich-text-editor/actions/html-editor.d.ts +2 -0
  30. package/src/rich-text-editor/actions/html-editor.js +36 -5
  31. package/src/rich-text-editor/actions/paste-clean-up.d.ts +2 -0
  32. package/src/rich-text-editor/actions/paste-clean-up.js +75 -19
  33. package/src/rich-text-editor/actions/quick-toolbar.js +24 -5
  34. package/src/rich-text-editor/actions/toolbar.d.ts +1 -0
  35. package/src/rich-text-editor/actions/toolbar.js +18 -10
  36. package/src/rich-text-editor/base/classes.d.ts +5 -0
  37. package/src/rich-text-editor/base/classes.js +5 -0
  38. package/src/rich-text-editor/base/constant.d.ts +6 -1
  39. package/src/rich-text-editor/base/constant.js +6 -1
  40. package/src/rich-text-editor/base/interface.d.ts +11 -0
  41. package/src/rich-text-editor/base/rich-text-editor-model.d.ts +1 -1
  42. package/src/rich-text-editor/base/rich-text-editor.d.ts +9 -0
  43. package/src/rich-text-editor/base/rich-text-editor.js +80 -17
  44. package/src/rich-text-editor/base/util.js +11 -2
  45. package/src/rich-text-editor/formatter/formatter.js +1 -1
  46. package/src/rich-text-editor/models/default-locale.js +2 -0
  47. package/src/rich-text-editor/models/items.js +1 -1
  48. package/src/rich-text-editor/renderer/dialog-renderer.js +10 -1
  49. package/src/rich-text-editor/renderer/image-module.js +68 -59
  50. package/src/rich-text-editor/renderer/link-module.js +43 -23
  51. package/src/rich-text-editor/renderer/table-module.d.ts +2 -0
  52. package/src/rich-text-editor/renderer/table-module.js +43 -30
  53. package/src/rich-text-editor/renderer/toolbar-renderer.d.ts +0 -6
  54. package/src/rich-text-editor/renderer/toolbar-renderer.js +13 -93
  55. package/src/rich-text-editor/renderer/view-source.js +3 -1
  56. package/styles/bootstrap-dark.css +194 -52
  57. package/styles/bootstrap.css +197 -53
  58. package/styles/bootstrap4.css +194 -52
  59. package/styles/bootstrap5-dark.css +195 -53
  60. package/styles/bootstrap5.css +195 -53
  61. package/styles/fabric-dark.css +194 -52
  62. package/styles/fabric.css +194 -52
  63. package/styles/fluent-dark.css +197 -53
  64. package/styles/fluent.css +197 -53
  65. package/styles/highcontrast-light.css +194 -52
  66. package/styles/highcontrast.css +194 -52
  67. package/styles/material-dark.css +196 -53
  68. package/styles/material.css +196 -53
  69. package/styles/material3-dark.css +194 -52
  70. package/styles/material3.css +194 -52
  71. package/styles/rich-text-editor/_bootstrap5-definition.scss +1 -1
  72. package/styles/rich-text-editor/_fluent-definition.scss +1 -1
  73. package/styles/rich-text-editor/_layout.scss +78 -3
  74. package/styles/rich-text-editor/_theme.scss +1 -1
  75. package/styles/rich-text-editor/bootstrap-dark.css +194 -52
  76. package/styles/rich-text-editor/bootstrap.css +197 -53
  77. package/styles/rich-text-editor/bootstrap4.css +194 -52
  78. package/styles/rich-text-editor/bootstrap5-dark.css +195 -53
  79. package/styles/rich-text-editor/bootstrap5.css +195 -53
  80. package/styles/rich-text-editor/fabric-dark.css +194 -52
  81. package/styles/rich-text-editor/fabric.css +194 -52
  82. package/styles/rich-text-editor/fluent-dark.css +197 -53
  83. package/styles/rich-text-editor/fluent.css +197 -53
  84. package/styles/rich-text-editor/highcontrast-light.css +194 -52
  85. package/styles/rich-text-editor/highcontrast.css +194 -52
  86. package/styles/rich-text-editor/icons/_bootstrap-dark.scss +3 -3
  87. package/styles/rich-text-editor/icons/_bootstrap.scss +3 -3
  88. package/styles/rich-text-editor/icons/_bootstrap4.scss +3 -3
  89. package/styles/rich-text-editor/icons/_bootstrap5.scss +3 -3
  90. package/styles/rich-text-editor/icons/_fabric-dark.scss +3 -3
  91. package/styles/rich-text-editor/icons/_fabric.scss +3 -3
  92. package/styles/rich-text-editor/icons/_fluent.scss +3 -3
  93. package/styles/rich-text-editor/icons/_fusionnew.scss +3 -3
  94. package/styles/rich-text-editor/icons/_highcontrast-light.scss +3 -3
  95. package/styles/rich-text-editor/icons/_highcontrast.scss +3 -3
  96. package/styles/rich-text-editor/icons/_material-dark.scss +3 -3
  97. package/styles/rich-text-editor/icons/_material.scss +3 -3
  98. package/styles/rich-text-editor/icons/_material3.scss +3 -3
  99. package/styles/rich-text-editor/icons/_tailwind.scss +3 -3
  100. package/styles/rich-text-editor/material-dark.css +196 -53
  101. package/styles/rich-text-editor/material.css +196 -53
  102. package/styles/rich-text-editor/material3-dark.css +194 -52
  103. package/styles/rich-text-editor/material3.css +194 -52
  104. package/styles/rich-text-editor/tailwind-dark.css +194 -52
  105. package/styles/rich-text-editor/tailwind.css +194 -52
  106. package/styles/tailwind-dark.css +194 -52
  107. package/styles/tailwind.css +194 -52
@@ -64,6 +64,8 @@ export declare class PasteCleanup {
64
64
  private removeTempClass;
65
65
  private sanitizeHelper;
66
66
  private plainFormatting;
67
+ private removingComments;
68
+ private reframeToBrContent;
67
69
  private getTextContent;
68
70
  private detachInlineElements;
69
71
  private findDetachEmptyElem;
@@ -66,6 +66,7 @@ var PasteCleanup = /** @class */ (function () {
66
66
  event: e
67
67
  };
68
68
  var value = null;
69
+ var isClipboardHTMLDataNull = false;
69
70
  var imageproperties;
70
71
  if (e.args && !isNOU(e.args.clipboardData)) {
71
72
  value = e.args.clipboardData.getData('text/html');
@@ -104,6 +105,7 @@ var PasteCleanup = /** @class */ (function () {
104
105
  var divElement = this.parent.createElement('div');
105
106
  divElement.innerHTML = this.splitBreakLine(value);
106
107
  value = divElement.innerHTML;
108
+ isClipboardHTMLDataNull = true;
107
109
  }
108
110
  }
109
111
  else if (value.length > 0) {
@@ -125,10 +127,16 @@ var PasteCleanup = /** @class */ (function () {
125
127
  tempDivElem.innerHTML = value;
126
128
  var isValueNotEmpty = tempDivElem.textContent !== '' || !isNOU(tempDivElem.querySelector('img')) ||
127
129
  !isNOU(tempDivElem.querySelector('table'));
130
+ this.parent.notify(events.cleanupResizeElements, {
131
+ value: value,
132
+ callBack: function (currentValue) {
133
+ value = currentValue;
134
+ }
135
+ });
128
136
  if (this.parent.pasteCleanupSettings.prompt) {
129
137
  if (isValueNotEmpty) {
130
138
  e.args.preventDefault();
131
- this.pasteDialog(value, args);
139
+ this.pasteDialog(value, args, isClipboardHTMLDataNull);
132
140
  }
133
141
  else if (Browser.userAgent.indexOf('Firefox') !== -1 && isNOU(file)) {
134
142
  this.fireFoxImageUpload();
@@ -140,7 +148,7 @@ var PasteCleanup = /** @class */ (function () {
140
148
  }
141
149
  else if (this.parent.pasteCleanupSettings.plainText) {
142
150
  e.args.preventDefault();
143
- this.plainFormatting(value, args);
151
+ this.plainFormatting(value, args, isClipboardHTMLDataNull);
144
152
  }
145
153
  else if (this.parent.pasteCleanupSettings.keepFormat) {
146
154
  e.args.preventDefault();
@@ -182,13 +190,17 @@ var PasteCleanup = /** @class */ (function () {
182
190
  PasteCleanup.prototype.splitBreakLine = function (value) {
183
191
  var enterSplitText = value.split('\n');
184
192
  var contentInnerElem = '';
193
+ var startNode = this.parent.enterKey === 'P' ? '<p>' : (this.parent.enterKey === 'DIV' ? '<div>' : '');
194
+ var endNode = this.parent.enterKey === 'P' ? '</p>' : (this.parent.enterKey === 'DIV' ? '</div>' : '<br>');
185
195
  for (var i = 0; i < enterSplitText.length; i++) {
186
196
  if (enterSplitText[i].trim() === '') {
187
197
  contentInnerElem += getDefaultValue(this.parent);
188
198
  }
189
199
  else {
190
200
  var contentWithSpace = this.makeSpace(enterSplitText[i]);
191
- contentInnerElem += '<p>' + contentWithSpace.trim() + '</p>';
201
+ contentInnerElem += (i === 0 && this.parent.enterKey !== 'BR' ? '<span>' : startNode) +
202
+ (contentWithSpace.trim() === '' ? '<br>' : contentWithSpace.trim()) +
203
+ (enterSplitText.length - 1 === i && this.parent.enterKey === 'BR' ? '' : (i === 0 && this.parent.enterKey !== 'BR' ? '</span>' : endNode));
192
204
  }
193
205
  }
194
206
  return contentInnerElem;
@@ -457,10 +469,10 @@ var PasteCleanup = /** @class */ (function () {
457
469
  var range = this.nodeSelectionObj.getRange(currentDocument);
458
470
  this.saveSelection = this.nodeSelectionObj.save(range, currentDocument);
459
471
  if (this.parent.pasteCleanupSettings.prompt) {
460
- this.pasteDialog(imageValue, pasteArgs);
472
+ this.pasteDialog(imageValue, pasteArgs, false);
461
473
  }
462
474
  else if (this.parent.pasteCleanupSettings.plainText) {
463
- this.plainFormatting(imageValue, pasteArgs);
475
+ this.plainFormatting(imageValue, pasteArgs, false);
464
476
  }
465
477
  else if (this.parent.pasteCleanupSettings.keepFormat) {
466
478
  this.formatting(imageValue, false, pasteArgs);
@@ -484,7 +496,7 @@ var PasteCleanup = /** @class */ (function () {
484
496
  var plainTextElement = this.parent.element.querySelector('#plainTextFormat');
485
497
  this.plainTextRadioButton.appendTo(plainTextElement);
486
498
  };
487
- PasteCleanup.prototype.selectFormatting = function (value, args, keepChecked, cleanChecked) {
499
+ PasteCleanup.prototype.selectFormatting = function (value, args, keepChecked, cleanChecked, isClipboardHTMLDataNull) {
488
500
  if (keepChecked) {
489
501
  this.formatting(value, false, args);
490
502
  }
@@ -492,10 +504,10 @@ var PasteCleanup = /** @class */ (function () {
492
504
  this.formatting(value, true, args);
493
505
  }
494
506
  else {
495
- this.plainFormatting(value, args);
507
+ this.plainFormatting(value, args, isClipboardHTMLDataNull);
496
508
  }
497
509
  };
498
- PasteCleanup.prototype.pasteDialog = function (value, args) {
510
+ PasteCleanup.prototype.pasteDialog = function (value, args, isClipboardHTMLDataNull) {
499
511
  var _this = this;
500
512
  var isHeight = false;
501
513
  var preRTEHeight = this.parent.height;
@@ -512,7 +524,7 @@ var PasteCleanup = /** @class */ (function () {
512
524
  var argument = _this.dialogObj;
513
525
  _this.dialogRenderObj.close(argument);
514
526
  _this.dialogObj.destroy();
515
- _this.selectFormatting(value, args, keepChecked, cleanChecked);
527
+ _this.selectFormatting(value, args, keepChecked, cleanChecked, isClipboardHTMLDataNull);
516
528
  }
517
529
  },
518
530
  buttonModel: {
@@ -573,7 +585,7 @@ var PasteCleanup = /** @class */ (function () {
573
585
  isHeight = true;
574
586
  }
575
587
  this.dialogObj.show();
576
- this.setCssClass({ cssClass: this.parent.cssClass });
588
+ this.setCssClass({ cssClass: this.parent.getCssClass() });
577
589
  };
578
590
  PasteCleanup.prototype.updateCss = function (currentObj, e) {
579
591
  if (currentObj && e.cssClass) {
@@ -786,7 +798,7 @@ var PasteCleanup = /** @class */ (function () {
786
798
  return value;
787
799
  };
788
800
  //Plain Formatting
789
- PasteCleanup.prototype.plainFormatting = function (value, args) {
801
+ PasteCleanup.prototype.plainFormatting = function (value, args, isClipboardHTMLDataNull) {
790
802
  var _this = this;
791
803
  var clipBoardElem = this.parent.createElement('div', { className: 'pasteContent', styles: 'display:inline;' });
792
804
  clipBoardElem.innerHTML = value;
@@ -824,6 +836,13 @@ var PasteCleanup = /** @class */ (function () {
824
836
  this.saveSelection.restore();
825
837
  clipBoardElem.innerHTML = this.sanitizeHelper(clipBoardElem.innerHTML);
826
838
  this.addTempClass(clipBoardElem);
839
+ this.removingComments(clipBoardElem);
840
+ if (this.parent.enterKey === 'BR' && !isClipboardHTMLDataNull) {
841
+ clipBoardElem = this.reframeToBrContent(clipBoardElem);
842
+ }
843
+ else if (this.parent.enterKey === 'DIV') {
844
+ clipBoardElem.innerHTML = clipBoardElem.innerHTML.replace(/<p class="pasteContent_RTE">/g, '<div>').replace(/<\/p>/g, '</div>');
845
+ }
827
846
  this.parent.trigger(events.afterPasteCleanup, { value: clipBoardElem.innerHTML, filesData: null }, function (updatedArgs) { value = updatedArgs.value; });
828
847
  clipBoardElem.innerHTML = value;
829
848
  this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, function (returnArgs) {
@@ -838,6 +857,41 @@ var PasteCleanup = /** @class */ (function () {
838
857
  this.parent.formatter.onSuccess(this.parent, args);
839
858
  }
840
859
  };
860
+ PasteCleanup.prototype.removingComments = function (elm) {
861
+ var innerElement = elm.innerHTML;
862
+ innerElement = innerElement.replace(/<!--[\s\S]*?-->/g, '');
863
+ elm.innerHTML = innerElement;
864
+ };
865
+ PasteCleanup.prototype.reframeToBrContent = function (clipBoardElem) {
866
+ var newClipBoardElem = this.parent.createElement('div', { className: 'pasteContent', styles: 'display:inline;' });
867
+ while (!isNOU(clipBoardElem.firstChild)) {
868
+ var brElem = this.parent.createElement('br');
869
+ var currentFirstChild = clipBoardElem.firstChild;
870
+ if (currentFirstChild.nodeName === '#text') {
871
+ var isNextSibPresent = !isNOU(currentFirstChild.nextSibling);
872
+ newClipBoardElem.appendChild(currentFirstChild);
873
+ if (isNextSibPresent) {
874
+ newClipBoardElem.appendChild(brElem);
875
+ }
876
+ }
877
+ else {
878
+ var isCurrentNodeBRElm = currentFirstChild.nodeName === 'BR';
879
+ if (isCurrentNodeBRElm) {
880
+ newClipBoardElem.appendChild(currentFirstChild);
881
+ }
882
+ else {
883
+ newClipBoardElem.appendChild(currentFirstChild.childNodes[0]);
884
+ }
885
+ if (!isNOU(currentFirstChild) && !isNOU(currentFirstChild.nextSibling)) {
886
+ newClipBoardElem.appendChild(brElem);
887
+ }
888
+ if (!isCurrentNodeBRElm && !isNOU(currentFirstChild)) {
889
+ detach(currentFirstChild);
890
+ }
891
+ }
892
+ }
893
+ return newClipBoardElem;
894
+ };
841
895
  PasteCleanup.prototype.getTextContent = function (clipBoardElem) {
842
896
  for (var i = 0; i < this.blockNode.length; i++) {
843
897
  var inElem = clipBoardElem.querySelectorAll(this.blockNode[i]);
@@ -885,14 +939,16 @@ var PasteCleanup = /** @class */ (function () {
885
939
  for (var i = 0; i < this.inlineNode.length; i++) {
886
940
  var inElem = clipBoardElem.querySelectorAll(this.inlineNode[i]);
887
941
  for (var j = 0; j < inElem.length; j++) {
888
- var parElem = void 0;
889
- for (var k = 0; k < inElem[j].childNodes.length; k++) {
890
- parElem = inElem[j].childNodes[k].parentElement;
891
- inElem[j].childNodes[k].parentElement.parentElement.insertBefore(inElem[j].childNodes[k], inElem[j].childNodes[k].parentElement);
892
- k--;
893
- }
894
- if (!isNOU(parElem)) {
895
- detach(parElem);
942
+ if (!(inElem[j] === clipBoardElem.firstChild && inElem[j].nodeName === 'SPAN')) {
943
+ var parElem = void 0;
944
+ for (var k = 0; k < inElem[j].childNodes.length; k++) {
945
+ parElem = inElem[j].childNodes[k].parentElement;
946
+ inElem[j].childNodes[k].parentElement.parentElement.insertBefore(inElem[j].childNodes[k], inElem[j].childNodes[k].parentElement);
947
+ k--;
948
+ }
949
+ if (!isNOU(parElem)) {
950
+ detach(parElem);
951
+ }
896
952
  }
897
953
  }
898
954
  }
@@ -47,7 +47,7 @@ var QuickToolbar = /** @class */ (function () {
47
47
  toolbarItems: items,
48
48
  mode: mode,
49
49
  renderType: type,
50
- cssClass: this.parent.cssClass
50
+ cssClass: this.parent.getCssClass()
51
51
  };
52
52
  };
53
53
  /**
@@ -261,6 +261,9 @@ var QuickToolbar = /** @class */ (function () {
261
261
  && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
262
262
  this.hideInlineQTBar();
263
263
  }
264
+ if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close')) {
265
+ this.textQTBar.hidePopup();
266
+ }
264
267
  };
265
268
  QuickToolbar.prototype.inlineQTBarMouseDownHandler = function () {
266
269
  if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
@@ -274,8 +277,8 @@ var QuickToolbar = /** @class */ (function () {
274
277
  }
275
278
  };
276
279
  QuickToolbar.prototype.keyUpHandler = function (e) {
280
+ var args = e.args;
277
281
  if (this.parent.inlineMode.enable && !Browser.isDevice) {
278
- var args = e.args;
279
282
  if (this.parent.inlineMode.onSelection) {
280
283
  if (this.parent.getSelection().length > 0) {
281
284
  if ((args.ctrlKey && args.keyCode === 65) || (args.shiftKey && (args.keyCode === 33 || args.keyCode === 34 ||
@@ -288,6 +291,13 @@ var QuickToolbar = /** @class */ (function () {
288
291
  }
289
292
  this.deBounce(this.offsetX, this.offsetY, args.target);
290
293
  }
294
+ if (this.parent.quickToolbarSettings.text && !Browser.isDevice) {
295
+ if ((args.ctrlKey && args.keyCode === 65) || (args.shiftKey && (args.keyCode === 33 || args.keyCode === 34 ||
296
+ args.keyCode === 35 || args.keyCode === 36 || args.keyCode === 37 || args.keyCode === 38 ||
297
+ args.keyCode === 39 || args.keyCode === 40))) {
298
+ this.textQTBar.showPopup(this.offsetX, this.offsetY, args.target, 'text');
299
+ }
300
+ }
291
301
  };
292
302
  QuickToolbar.prototype.selectionChangeHandler = function (e) {
293
303
  var _this = this;
@@ -447,6 +457,15 @@ var QuickToolbar = /** @class */ (function () {
447
457
  if (this.videoQTBar && !hasClass(this.videoQTBar.element, 'e-popup-close')) {
448
458
  this.videoQTBar.hidePopup();
449
459
  }
460
+ if (this.tableQTBar && !hasClass(this.tableQTBar.element, 'e-popup-close')) {
461
+ this.tableQTBar.hidePopup();
462
+ }
463
+ if (this.linkQTBar && !hasClass(this.linkQTBar.element, 'e-popup-close')) {
464
+ this.linkQTBar.hidePopup();
465
+ }
466
+ if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close')) {
467
+ this.textQTBar.hidePopup();
468
+ }
450
469
  }
451
470
  };
452
471
  QuickToolbar.prototype.onIframeMouseDown = function () {
@@ -499,6 +518,9 @@ var QuickToolbar = /** @class */ (function () {
499
518
 
500
519
  */
501
520
  QuickToolbar.prototype.removeEventListener = function () {
521
+ if (this.deBouncer) {
522
+ clearTimeout(this.deBouncer);
523
+ }
502
524
  if (this.parent.isDestroyed) {
503
525
  return;
504
526
  }
@@ -519,9 +541,6 @@ var QuickToolbar = /** @class */ (function () {
519
541
  this.parent.off(events.rtlMode, this.setRtl);
520
542
  this.parent.off(events.bindCssClass, this.setCssClass);
521
543
  this.parent.off(events.hidePopup, this.hideQuickToolbars);
522
- if (this.deBouncer) {
523
- clearTimeout(this.deBouncer);
524
- }
525
544
  };
526
545
  /**
527
546
  * Called internally if any of the property value changed.
@@ -157,6 +157,7 @@ export declare class Toolbar {
157
157
  private dropDownBeforeOpenHandler;
158
158
  private tbFocusHandler;
159
159
  private toolbarClickHandler;
160
+ private adjustContentHeight;
160
161
  protected wireEvents(): void;
161
162
  protected unWireEvents(): void;
162
163
  protected addEventListener(): void;
@@ -52,6 +52,10 @@ var Toolbar = /** @class */ (function () {
52
52
  case 'escape':
53
53
  this.parent.contentModule.getEditPanel().focus();
54
54
  break;
55
+ case 'enter':
56
+ if (e.target.classList.contains('e-hor-nav')) {
57
+ this.adjustContentHeight(e.target, true);
58
+ }
55
59
  }
56
60
  };
57
61
  Toolbar.prototype.createToolbarElement = function () {
@@ -107,7 +111,7 @@ var Toolbar = /** @class */ (function () {
107
111
  items: this.parent.toolbarSettings.items,
108
112
  mode: tBarMode,
109
113
  target: ele,
110
- cssClass: this.parent.cssClass
114
+ cssClass: this.parent.getCssClass()
111
115
  });
112
116
  if (this.parent.toolbarSettings.type === ToolbarType.Expand) {
113
117
  addClass([ele], ['e-rte-tb-mobile']);
@@ -226,7 +230,7 @@ var Toolbar = /** @class */ (function () {
226
230
  items: this.parent.toolbarSettings.items,
227
231
  mode: this.getToolbarMode(),
228
232
  target: this.tbElement,
229
- cssClass: this.parent.cssClass
233
+ cssClass: this.parent.getCssClass()
230
234
  });
231
235
  if (!this.parent.inlineMode.enable) {
232
236
  if (this.parent.toolbarSettings.enableFloating) {
@@ -256,7 +260,7 @@ var Toolbar = /** @class */ (function () {
256
260
  });
257
261
  this.refreshToolbarOverflow();
258
262
  }
259
- var divEle = this.parent.element.querySelector('.e-rte-srctextarea');
263
+ var divEle = this.parent.element.querySelector('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA);
260
264
  var iframeEle = this.parent.element.querySelector('.e-source-content');
261
265
  if ((!this.parent.iframeSettings.enable && (!isNOU(divEle) && divEle.style.display === 'block')) ||
262
266
  (this.parent.iframeSettings.enable && (!isNOU(iframeEle) && iframeEle.style.display === 'block'))) {
@@ -386,7 +390,7 @@ var Toolbar = /** @class */ (function () {
386
390
  baseToolbar.toolbarObj.enableItems(item, isEnable);
387
391
  }
388
392
  }
389
- if (!select('.e-rte-srctextarea', this.parent.element) && !muteToolbarUpdate) {
393
+ if (!select('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA, this.parent.element) && !muteToolbarUpdate) {
390
394
  updateUndoRedoStatus(baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
391
395
  }
392
396
  };
@@ -559,20 +563,24 @@ var Toolbar = /** @class */ (function () {
559
563
  };
560
564
  Toolbar.prototype.toolbarClickHandler = function (e) {
561
565
  var trg = closest(e.originalEvent.target, '.e-hor-nav');
566
+ this.adjustContentHeight(trg, false);
567
+ };
568
+ Toolbar.prototype.adjustContentHeight = function (trg, isKeyboard) {
562
569
  if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNOU(trg)) {
563
570
  var extendedTbar = this.tbElement.querySelector('.e-toolbar-extended');
564
571
  if (!isNOU(extendedTbar)) {
565
572
  setStyleAttribute(extendedTbar, { maxHeight: '', display: 'block' });
566
573
  setStyleAttribute(extendedTbar, { maxHeight: extendedTbar.offsetHeight + 'px', display: '' });
567
574
  }
568
- if (!trg.classList.contains('e-nav-active')) {
569
- removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
570
- this.parent.setContentHeight('toolbar', false);
575
+ var hasActiveClass = trg.classList.contains('e-nav-active');
576
+ var isExpand = isKeyboard ? (hasActiveClass ? false : true) : (hasActiveClass ? true : false);
577
+ if (isExpand) {
578
+ addClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
571
579
  }
572
580
  else {
573
- addClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
574
- this.parent.setContentHeight('toolbar', true);
581
+ removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
575
582
  }
583
+ this.parent.setContentHeight('toolbar', isExpand);
576
584
  }
577
585
  else if (Browser.isDevice || this.parent.inlineMode.enable) {
578
586
  this.isToolbar = true;
@@ -696,7 +704,7 @@ var Toolbar = /** @class */ (function () {
696
704
  this.addEventListener();
697
705
  this.renderToolbar();
698
706
  this.parent.wireScrollElementsEvents();
699
- if (!select('.e-rte-srctextarea', this.parent.element)) {
707
+ if (!select('.' + classes.CLS_RTE_SOURCE_CODE_TXTAREA, this.parent.element)) {
700
708
  updateUndoRedoStatus(this.baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
701
709
  }
702
710
  this.parent.notify(events.dynamicModule, {});
@@ -79,6 +79,11 @@ export declare const CLS_QUICK_TB: string;
79
79
  /**
80
80
  * @hidden
81
81
 
82
+ */
83
+ export declare const CLS_TEXT_QUICK_TB: string;
84
+ /**
85
+ * @hidden
86
+
82
87
  */
83
88
  export declare const CLS_POP: string;
84
89
  /**
@@ -79,6 +79,11 @@ export var CLS_QUICK_TB = 'e-rte-quick-toolbar';
79
79
  /**
80
80
  * @hidden
81
81
 
82
+ */
83
+ export var CLS_TEXT_QUICK_TB = 'e-rte-text-quicktoolbar';
84
+ /**
85
+ * @hidden
86
+
82
87
  */
83
88
  export var CLS_POP = 'e-rte-pop';
84
89
  /**
@@ -730,7 +730,7 @@ export declare const emojiPicker: string;
730
730
  * @hidden
731
731
 
732
732
  */
733
- export declare const maximizeMinimizeClick: string;
733
+ export declare const destroyTooltip: string;
734
734
  /**
735
735
  * @hidden
736
736
 
@@ -739,6 +739,11 @@ export declare const hidePopup: string;
739
739
  /**
740
740
  * @hidden
741
741
 
742
+ */
743
+ export declare const cleanupResizeElements: string;
744
+ /**
745
+ * @hidden
746
+
742
747
  */
743
748
  export declare const blockEmptyNodes: string;
744
749
  /**
@@ -730,7 +730,7 @@ export var emojiPicker = 'emojiPicker';
730
730
  * @hidden
731
731
 
732
732
  */
733
- export var maximizeMinimizeClick = 'maximizeMinimizeClick';
733
+ export var destroyTooltip = 'destroyTooltip';
734
734
  /**
735
735
  * @hidden
736
736
 
@@ -739,6 +739,11 @@ export var hidePopup = 'hidePopup';
739
739
  /**
740
740
  * @hidden
741
741
 
742
+ */
743
+ export var cleanupResizeElements = 'cleanupResizeElements';
744
+ /**
745
+ * @hidden
746
+
742
747
  */
743
748
  export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
744
749
  /**
@@ -159,6 +159,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
159
159
  getCollection?(items: string | string[]): string[];
160
160
  getRange(): Range;
161
161
  getID(): string;
162
+ getCssClass(isSpace?: boolean): string;
162
163
  getText(): string;
163
164
  updateValueData?(): void;
164
165
  getBaseToolbarObject(): BaseToolbar;
@@ -377,6 +378,7 @@ export interface IImageNotifyArgs {
377
378
  member?: string;
378
379
  name?: string;
379
380
  cssClass?: string;
381
+ ariaLabel?: string;
380
382
  }
381
383
  /**
382
384
  * Provides information about a Image added in the Rich Text Editor.
@@ -1368,3 +1370,12 @@ export interface ToolbarStatusEventArgs {
1368
1370
  /** Defines the markdown toolbar status arguments. */
1369
1371
  markdown?: object;
1370
1372
  }
1373
+ /**
1374
+ * @hidden
1375
+
1376
+ */
1377
+ export interface CleanupResizeElemArgs {
1378
+ name?: string;
1379
+ value: string;
1380
+ callBack(value: string): void;
1381
+ }
@@ -1,4 +1,4 @@
1
- import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs, ImageDropEventArgs, IFormatPainterArgs } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs, StatusArgs, ToolbarStatusEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, AfterMediaDeleteEventArgs, PasteCleanupArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, IAudioCommandsArgs, IVideoCommandsArgs, BeforeSanitizeHtmlArgs, ITableCommandsArgs, ExecuteCommandOption } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType, DialogType } from './enum';import { EditorMode, ShiftEnterKey, EnterKey } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList, FormatPainterSettings, EmojiSettings } from '../models/toolbar-settings';import { FileManagerSettings } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Audio } from '../renderer/audio-module';import { Video } from '../renderer/video-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import { EnterKeyAction } from '../actions/enter-key';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty, getDefaultValue } from '../base/util';import { DialogRenderer } from '../renderer/dialog-renderer';import { SelectedEventArgs, RemovingEventArgs, UploadingEventArgs, BeforeUploadEventArgs } from '@syncfusion/ej2-inputs';import { Resize } from '../actions/resize';import { FileManager } from '../actions/file-manager';import { FormatPainter } from '../actions/format-painter';import { EmojiPicker } from '../actions/emoji-picker';
1
+ import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs, ImageDropEventArgs, IFormatPainterArgs, CleanupResizeElemArgs } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs, StatusArgs, ToolbarStatusEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, AfterMediaDeleteEventArgs, PasteCleanupArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, IAudioCommandsArgs, IVideoCommandsArgs, BeforeSanitizeHtmlArgs, ITableCommandsArgs, ExecuteCommandOption } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType, DialogType } from './enum';import { EditorMode, ShiftEnterKey, EnterKey } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList, FormatPainterSettings, EmojiSettings } from '../models/toolbar-settings';import { FileManagerSettings } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Audio } from '../renderer/audio-module';import { Video } from '../renderer/video-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import { EnterKeyAction } from '../actions/enter-key';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty, getDefaultValue } from '../base/util';import { DialogRenderer } from '../renderer/dialog-renderer';import { SelectedEventArgs, RemovingEventArgs, UploadingEventArgs, BeforeUploadEventArgs } from '@syncfusion/ej2-inputs';import { Resize } from '../actions/resize';import { FileManager } from '../actions/file-manager';import { FormatPainter } from '../actions/format-painter';import { EmojiPicker } from '../actions/emoji-picker';
2
2
  import {ComponentModel} from '@syncfusion/ej2-base';
3
3
 
4
4
  /**
@@ -1515,6 +1515,14 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
1515
1515
 
1516
1516
  */
1517
1517
  getID(): string;
1518
+ /**
1519
+ * @returns {void}
1520
+ * getCssClass method
1521
+ *
1522
+ * @hidden
1523
+
1524
+ */
1525
+ getCssClass(isSpace?: boolean): string;
1518
1526
  private mouseDownHandler;
1519
1527
  private preventImgResize;
1520
1528
  /**
@@ -1534,6 +1542,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
1534
1542
  private getUpdatedValue;
1535
1543
  private updateValueOnIdle;
1536
1544
  private updateIntervalValue;
1545
+ private cleanupResizeElements;
1537
1546
  private removeResizeElement;
1538
1547
  private updateStatus;
1539
1548
  private onDocumentClick;