@syncfusion/ej2-richtexteditor 20.1.55 → 20.1.58

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 (75) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/ej2-richtexteditor.umd.min.js +2 -2
  3. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-richtexteditor.es2015.js +481 -93
  5. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-richtexteditor.es5.js +473 -93
  7. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  8. package/dist/global/ej2-richtexteditor.min.js +2 -2
  9. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +11 -11
  12. package/src/editor-manager/plugin/dom-node.js +7 -1
  13. package/src/editor-manager/plugin/lists.d.ts +1 -0
  14. package/src/editor-manager/plugin/lists.js +38 -1
  15. package/src/editor-manager/plugin/selection-commands.js +10 -2
  16. package/src/rich-text-editor/actions/base-quick-toolbar.js +8 -3
  17. package/src/rich-text-editor/actions/base-toolbar.d.ts +1 -0
  18. package/src/rich-text-editor/actions/base-toolbar.js +14 -1
  19. package/src/rich-text-editor/actions/color-picker.d.ts +2 -0
  20. package/src/rich-text-editor/actions/color-picker.js +22 -1
  21. package/src/rich-text-editor/actions/dropdown-buttons.d.ts +2 -0
  22. package/src/rich-text-editor/actions/dropdown-buttons.js +25 -0
  23. package/src/rich-text-editor/actions/file-manager.d.ts +1 -0
  24. package/src/rich-text-editor/actions/file-manager.js +14 -1
  25. package/src/rich-text-editor/actions/html-editor.js +11 -1
  26. package/src/rich-text-editor/actions/paste-clean-up.d.ts +6 -0
  27. package/src/rich-text-editor/actions/paste-clean-up.js +79 -47
  28. package/src/rich-text-editor/actions/quick-toolbar.d.ts +2 -0
  29. package/src/rich-text-editor/actions/quick-toolbar.js +23 -2
  30. package/src/rich-text-editor/actions/toolbar.d.ts +1 -0
  31. package/src/rich-text-editor/actions/toolbar.js +15 -1
  32. package/src/rich-text-editor/base/constant.d.ts +10 -0
  33. package/src/rich-text-editor/base/constant.js +10 -0
  34. package/src/rich-text-editor/base/interface.d.ts +14 -0
  35. package/src/rich-text-editor/base/rich-text-editor.js +43 -1
  36. package/src/rich-text-editor/base/util.js +5 -0
  37. package/src/rich-text-editor/formatter/formatter.js +15 -0
  38. package/src/rich-text-editor/renderer/content-renderer.js +2 -1
  39. package/src/rich-text-editor/renderer/image-module.d.ts +5 -0
  40. package/src/rich-text-editor/renderer/image-module.js +57 -13
  41. package/src/rich-text-editor/renderer/link-module.d.ts +2 -0
  42. package/src/rich-text-editor/renderer/link-module.js +19 -2
  43. package/src/rich-text-editor/renderer/table-module.d.ts +6 -0
  44. package/src/rich-text-editor/renderer/table-module.js +58 -17
  45. package/src/rich-text-editor/renderer/toolbar-renderer.js +2 -1
  46. package/styles/bootstrap-dark.css +135 -519
  47. package/styles/bootstrap.css +136 -525
  48. package/styles/bootstrap4.css +145 -572
  49. package/styles/bootstrap5-dark.css +135 -539
  50. package/styles/bootstrap5.css +135 -539
  51. package/styles/fabric-dark.css +134 -518
  52. package/styles/fabric.css +135 -519
  53. package/styles/fluent-dark.css +134 -521
  54. package/styles/fluent.css +134 -521
  55. package/styles/highcontrast-light.css +135 -519
  56. package/styles/highcontrast.css +135 -517
  57. package/styles/material-dark.css +134 -518
  58. package/styles/material.css +135 -519
  59. package/styles/rich-text-editor/bootstrap-dark.css +135 -519
  60. package/styles/rich-text-editor/bootstrap.css +136 -525
  61. package/styles/rich-text-editor/bootstrap4.css +145 -572
  62. package/styles/rich-text-editor/bootstrap5-dark.css +135 -539
  63. package/styles/rich-text-editor/bootstrap5.css +135 -539
  64. package/styles/rich-text-editor/fabric-dark.css +134 -518
  65. package/styles/rich-text-editor/fabric.css +135 -519
  66. package/styles/rich-text-editor/fluent-dark.css +134 -521
  67. package/styles/rich-text-editor/fluent.css +134 -521
  68. package/styles/rich-text-editor/highcontrast-light.css +135 -519
  69. package/styles/rich-text-editor/highcontrast.css +135 -517
  70. package/styles/rich-text-editor/material-dark.css +134 -518
  71. package/styles/rich-text-editor/material.css +135 -519
  72. package/styles/rich-text-editor/tailwind-dark.css +135 -524
  73. package/styles/rich-text-editor/tailwind.css +135 -524
  74. package/styles/tailwind-dark.css +135 -524
  75. package/styles/tailwind.css +135 -524
@@ -609,6 +609,24 @@ const showTableDialog = 'showTableDialog';
609
609
  * @deprecated
610
610
  */
611
611
  const closeTableDialog = 'closeTableDialog';
612
+ /**
613
+ * @hidden
614
+ * @deprecated
615
+ */
616
+ const bindCssClass = 'closeTableDialog';
617
+ /**
618
+ * @hidden
619
+ * @deprecated
620
+ */
621
+ const blockInlineEmptyNodes = `address:empty, article:empty, aside:empty, blockquote:empty,
622
+ details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,
623
+ h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, hr:empty, li:empty, main:empty, nav:empty,
624
+ noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty,
625
+ a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,
626
+ canvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,
627
+ ins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,
628
+ q:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,
629
+ template:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty`;
612
630
 
613
631
  /**
614
632
  * Rich Text Editor classes defined here.
@@ -2533,6 +2551,10 @@ function updateTextNode(value, rteObj) {
2533
2551
  let previousParent;
2534
2552
  let insertElem;
2535
2553
  while (tempNode.firstChild) {
2554
+ const emptyElem = tempNode.querySelectorAll(blockInlineEmptyNodes);
2555
+ for (let i = 0; i < emptyElem.length; i++) {
2556
+ emptyElem[i].innerHTML = '<br>';
2557
+ }
2536
2558
  if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&
2537
2559
  (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
2538
2560
  inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {
@@ -2797,7 +2819,8 @@ class ToolbarRenderer {
2797
2819
  created: this.toolbarCreated.bind(this),
2798
2820
  clicked: this.toolbarClicked.bind(this),
2799
2821
  enablePersistence: args.enablePersistence,
2800
- enableRtl: args.enableRtl
2822
+ enableRtl: args.enableRtl,
2823
+ cssClass: args.cssClass
2801
2824
  });
2802
2825
  args.rteToolbarObj.toolbarObj.isStringTemplate = true;
2803
2826
  args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;
@@ -3254,12 +3277,24 @@ class BaseToolbar {
3254
3277
  }
3255
3278
  addEventListener() {
3256
3279
  this.parent.on(rtlMode, this.setRtl, this);
3280
+ this.parent.on(bindCssClass, this.setCssClass, this);
3257
3281
  this.parent.on(destroy, this.removeEventListener, this);
3258
3282
  }
3259
3283
  removeEventListener() {
3260
3284
  this.parent.off(rtlMode, this.setRtl);
3285
+ this.parent.off(bindCssClass, this.setCssClass);
3261
3286
  this.parent.off(destroy, this.removeEventListener);
3262
3287
  }
3288
+ setCssClass(e) {
3289
+ if (!isNullOrUndefined(this.toolbarObj)) {
3290
+ if (isNullOrUndefined(e.oldCssClass)) {
3291
+ this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass + ' ' + e.cssClass).trim() });
3292
+ }
3293
+ else {
3294
+ this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
3295
+ }
3296
+ }
3297
+ }
3263
3298
  setRtl(args) {
3264
3299
  if (!isNullOrUndefined(this.toolbarObj)) {
3265
3300
  this.toolbarObj.setProperties({ enableRtl: args.enableRtl });
@@ -3383,7 +3418,8 @@ class BaseToolbar {
3383
3418
  items: this.getItems(args.items, args.container),
3384
3419
  overflowMode: args.mode,
3385
3420
  enablePersistence: this.parent.enablePersistence,
3386
- enableRtl: this.parent.enableRtl
3421
+ enableRtl: this.parent.enableRtl,
3422
+ cssClass: args.cssClass,
3387
3423
  };
3388
3424
  }
3389
3425
  /**
@@ -3580,6 +3616,9 @@ class DropDownButtons {
3580
3616
  }
3581
3617
  }
3582
3618
  });
3619
+ if (this.parent.inlineMode.enable) {
3620
+ this.setCssClass({ cssClass: this.parent.cssClass });
3621
+ }
3583
3622
  }
3584
3623
  getUpdateItems(items, value) {
3585
3624
  const dropDownItems = items.slice();
@@ -3863,6 +3902,26 @@ class DropDownButtons {
3863
3902
  this.bulletFormatListDropDown.setProperties({ enableRtl: args.enableRtl });
3864
3903
  }
3865
3904
  }
3905
+ updateCss(dropDownObj, e) {
3906
+ if (dropDownObj && e.cssClass) {
3907
+ if (isNullOrUndefined(e.oldCssClass)) {
3908
+ dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
3909
+ }
3910
+ else {
3911
+ dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
3912
+ }
3913
+ }
3914
+ }
3915
+ setCssClass(e) {
3916
+ const dropDownObj = [
3917
+ this.formatDropDown, this.fontNameDropDown, this.fontSizeDropDown, this.alignDropDown, this.imageAlignDropDown,
3918
+ this.displayDropDown, this.numberFormatListDropDown, this.bulletFormatListDropDown, this.tableRowsDropDown,
3919
+ this.tableColumnsDropDown, this.tableCellVerticalAlignDropDown
3920
+ ];
3921
+ for (let i = 0; i < dropDownObj.length; i++) {
3922
+ this.updateCss(dropDownObj[i], e);
3923
+ }
3924
+ }
3866
3925
  addEventListener() {
3867
3926
  if (this.parent.isDestroyed) {
3868
3927
  return;
@@ -3872,6 +3931,7 @@ class DropDownButtons {
3872
3931
  this.parent.on(rtlMode, this.setRtl, this);
3873
3932
  this.parent.on(destroy, this.removeEventListener, this);
3874
3933
  this.parent.on(modelChanged, this.onPropertyChanged, this);
3934
+ this.parent.on(bindCssClass, this.setCssClass, this);
3875
3935
  }
3876
3936
  onIframeMouseDown() {
3877
3937
  dispatchEvent(document, 'mousedown');
@@ -3885,6 +3945,7 @@ class DropDownButtons {
3885
3945
  this.parent.off(beforeDropDownItemRender, this.beforeRender);
3886
3946
  this.parent.off(destroy, this.removeEventListener);
3887
3947
  this.parent.off(modelChanged, this.onPropertyChanged);
3948
+ this.parent.off(bindCssClass, this.setCssClass);
3888
3949
  }
3889
3950
  }
3890
3951
 
@@ -4630,6 +4691,7 @@ class Toolbar$2 {
4630
4691
  this.parent.on(focusChange, this.focusChangeHandler, this);
4631
4692
  this.parent.on(mouseDown, this.mouseDownHandler, this);
4632
4693
  this.parent.on(sourceCodeMouseDown, this.mouseDownHandler, this);
4694
+ this.parent.on(bindCssClass, this.setCssClass, this);
4633
4695
  if (!this.parent.inlineMode.enable && !isIDevice()) {
4634
4696
  this.parent.on(toolbarClick, this.toolbarClickHandler, this);
4635
4697
  }
@@ -4653,12 +4715,25 @@ class Toolbar$2 {
4653
4715
  this.parent.off(focusChange, this.focusChangeHandler);
4654
4716
  this.parent.off(mouseDown, this.mouseDownHandler);
4655
4717
  this.parent.off(sourceCodeMouseDown, this.mouseDownHandler);
4718
+ this.parent.off(bindCssClass, this.setCssClass);
4656
4719
  if (!this.parent.inlineMode.enable && !isIDevice()) {
4657
4720
  this.parent.off(toolbarClick, this.toolbarClickHandler);
4658
4721
  }
4659
4722
  }
4723
+ setCssClass(e) {
4724
+ if (this.toolbarObj && e.cssClass) {
4725
+ if (isNullOrUndefined(e.oldCssClass)) {
4726
+ this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass + ' ' + e.cssClass).trim() });
4727
+ }
4728
+ else {
4729
+ this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
4730
+ }
4731
+ }
4732
+ }
4660
4733
  onRefresh() {
4661
- this.refreshToolbarOverflow();
4734
+ if (!this.parent.inlineMode.enable) {
4735
+ this.refreshToolbarOverflow();
4736
+ }
4662
4737
  this.parent.setContentHeight('', true);
4663
4738
  }
4664
4739
  /**
@@ -4999,6 +5074,9 @@ class ColorPickerInput {
4999
5074
  }
5000
5075
  }
5001
5076
  });
5077
+ if (this.parent.inlineMode.enable) {
5078
+ this.setCssClass({ cssClass: this.parent.cssClass });
5079
+ }
5002
5080
  }
5003
5081
  destroy() {
5004
5082
  this.removeEventListener();
@@ -5044,12 +5122,29 @@ class ColorPickerInput {
5044
5122
  this.backgroundColorDropDown.setProperties({ enableRtl: args.enableRtl });
5045
5123
  }
5046
5124
  }
5125
+ setCssClass(e) {
5126
+ this.updateCss(this.fontColorPicker, this.fontColorDropDown, e);
5127
+ this.updateCss(this.backgroundColorPicker, this.backgroundColorDropDown, e);
5128
+ }
5129
+ updateCss(colorPickerObj, dropDownObj, e) {
5130
+ if (colorPickerObj && e.cssClass) {
5131
+ if (isNullOrUndefined(e.oldCssClass)) {
5132
+ colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass + ' ' + e.cssClass).trim() });
5133
+ dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
5134
+ }
5135
+ else {
5136
+ colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
5137
+ dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
5138
+ }
5139
+ }
5140
+ }
5047
5141
  addEventListener() {
5048
5142
  this.parent.on(toolbarRenderComplete, this.renderColorPickerInput, this);
5049
5143
  this.parent.on(rtlMode, this.setRtl, this);
5050
5144
  this.parent.on(destroy, this.destroy, this);
5051
5145
  this.parent.on(destroyColorPicker, this.destroyColorPicker, this);
5052
5146
  this.parent.on(modelChanged, this.onPropertyChanged, this);
5147
+ this.parent.on(bindCssClass, this.setCssClass, this);
5053
5148
  }
5054
5149
  onPropertyChanged(model) {
5055
5150
  const newProp = model.newProp;
@@ -5119,6 +5214,7 @@ class ColorPickerInput {
5119
5214
  this.parent.off(rtlMode, this.setRtl);
5120
5215
  this.parent.off(destroyColorPicker, this.destroyColorPicker);
5121
5216
  this.parent.off(modelChanged, this.onPropertyChanged);
5217
+ this.parent.off(bindCssClass, this.setCssClass);
5122
5218
  }
5123
5219
  }
5124
5220
 
@@ -5164,17 +5260,18 @@ class BaseQuickToolbar {
5164
5260
  this.element = this.parent.createElement('div', { id: popupId, className: className + ' ' + CLS_RTE_ELEMENTS });
5165
5261
  this.element.setAttribute('aria-owns', this.parent.getID());
5166
5262
  this.appendPopupContent();
5167
- this.createToolbar(args.toolbarItems, args.mode);
5263
+ this.createToolbar(args.toolbarItems, args.mode, args.cssClass);
5168
5264
  this.popupRenderer.renderPopup(this);
5169
5265
  this.addEventListener();
5170
5266
  }
5171
- createToolbar(items, mode) {
5267
+ createToolbar(items, mode, cssClass) {
5172
5268
  this.quickTBarObj = new BaseToolbar(this.parent, this.locator);
5173
5269
  this.quickTBarObj.render({
5174
5270
  container: 'quick',
5175
5271
  target: this.toolbarElement,
5176
5272
  items: items,
5177
- mode: mode
5273
+ mode: mode,
5274
+ cssClass: cssClass
5178
5275
  });
5179
5276
  this.quickTBarObj.toolbarObj.refresh();
5180
5277
  }
@@ -5365,6 +5462,10 @@ class BaseQuickToolbar {
5365
5462
  this.popupObj.element.classList.remove('e-popup-open');
5366
5463
  removeClass([this.element], [CLS_HIDE]);
5367
5464
  this.popupObj.show({ name: 'ZoomIn', duration: (Browser.isIE ? 250 : 400) });
5465
+ if (this.popupObj && this.parent.cssClass) {
5466
+ removeClass([this.popupObj.element], this.parent.cssClass);
5467
+ addClass([this.popupObj.element], this.parent.cssClass);
5468
+ }
5368
5469
  setStyleAttribute(this.element, {
5369
5470
  maxWidth: window.outerWidth + 'px'
5370
5471
  });
@@ -5623,7 +5724,8 @@ class QuickToolbar {
5623
5724
  popupType: popType,
5624
5725
  toolbarItems: items,
5625
5726
  mode: mode,
5626
- renderType: type
5727
+ renderType: type,
5728
+ cssClass: this.parent.cssClass
5627
5729
  };
5628
5730
  }
5629
5731
  /**
@@ -5932,6 +6034,7 @@ class QuickToolbar {
5932
6034
  this.parent.on(destroy, this.destroy, this);
5933
6035
  this.parent.on(keyDown, this.onKeyDown, this);
5934
6036
  this.parent.on(rtlMode, this.setRtl, this);
6037
+ this.parent.on(bindCssClass, this.setCssClass, this);
5935
6038
  }
5936
6039
  onKeyDown(e) {
5937
6040
  const args = e.args;
@@ -5945,6 +6048,24 @@ class QuickToolbar {
5945
6048
  this.hideQuickToolbars();
5946
6049
  this.hideInlineQTBar();
5947
6050
  }
6051
+ updateCss(baseQTObj, e) {
6052
+ if (baseQTObj && e.cssClass) {
6053
+ if (isNullOrUndefined(e.oldCssClass && baseQTObj.quickTBarObj.toolbarObj.cssClass !== e.cssClass)) {
6054
+ baseQTObj.quickTBarObj.toolbarObj.setProperties({ cssClass: (baseQTObj.quickTBarObj.toolbarObj.cssClass + ' ' + e.cssClass).trim() });
6055
+ }
6056
+ else {
6057
+ baseQTObj.quickTBarObj.toolbarObj.setProperties({ cssClass: (baseQTObj.quickTBarObj.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
6058
+ }
6059
+ }
6060
+ }
6061
+ setCssClass(e) {
6062
+ const baseQuickToolbarObj = [
6063
+ this.inlineQTBar, this.imageQTBar, this.linkQTBar, this.textQTBar, this.tableQTBar
6064
+ ];
6065
+ for (let i = 0; i < baseQuickToolbarObj.length; i++) {
6066
+ this.updateCss(baseQuickToolbarObj[i], e);
6067
+ }
6068
+ }
5948
6069
  setRtl(args) {
5949
6070
  if (this.inlineQTBar) {
5950
6071
  this.inlineQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
@@ -5953,7 +6074,7 @@ class QuickToolbar {
5953
6074
  this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
5954
6075
  }
5955
6076
  if (this.linkQTBar) {
5956
- this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
6077
+ this.linkQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
5957
6078
  }
5958
6079
  }
5959
6080
  /**
@@ -5982,6 +6103,7 @@ class QuickToolbar {
5982
6103
  this.parent.off(iframeMouseDown, this.onIframeMouseDown);
5983
6104
  this.parent.off(keyDown, this.onKeyDown);
5984
6105
  this.parent.off(rtlMode, this.setRtl);
6106
+ this.parent.off(bindCssClass, this.setCssClass);
5985
6107
  }
5986
6108
  /**
5987
6109
  * Called internally if any of the property value changed.
@@ -6805,6 +6927,21 @@ class Formatter {
6805
6927
  || self.contentModule.getPanel() === range.commonAncestorContainer)) {
6806
6928
  return;
6807
6929
  }
6930
+ if (!isNullOrUndefined(args) && self.maxLength !== -1 && !isNullOrUndefined(args.item.command)) {
6931
+ let currentInsertContentLength = 0;
6932
+ if (args.item.command === 'Links') {
6933
+ currentInsertContentLength = value.text.length === 0 ? value.url.length : value.text.length;
6934
+ }
6935
+ if (args.item.command === 'Images' || args.item.command === 'Table' || args.item.command === 'Files') {
6936
+ currentInsertContentLength = 1;
6937
+ }
6938
+ const currentLength = self.getText().trim().length;
6939
+ const selectionLength = self.getSelection().length;
6940
+ const totalLength = (currentLength - selectionLength) + currentInsertContentLength;
6941
+ if (!(self.maxLength === -1 || totalLength <= self.maxLength)) {
6942
+ return;
6943
+ }
6944
+ }
6808
6945
  if (isNullOrUndefined(args)) {
6809
6946
  const action = event.action;
6810
6947
  if (action !== 'tab' && action !== 'enter' && action !== 'space' && action !== 'escape') {
@@ -10209,7 +10346,13 @@ class DOMNode {
10209
10346
  markerStart.appendChild(start);
10210
10347
  }
10211
10348
  else {
10212
- this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
10349
+ if (start.nodeType != 3 && start.nodeName != '#text') {
10350
+ const marker = this.marker(markerClassName.startSelection, '');
10351
+ append([this.parseHTMLFragment(marker)], start);
10352
+ }
10353
+ else {
10354
+ this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
10355
+ }
10213
10356
  }
10214
10357
  if (end.nodeType !== Node.TEXT_NODE && end.tagName === 'BR' &&
10215
10358
  IGNORE_BLOCK_TAGS.indexOf(end.parentNode.tagName.toLocaleLowerCase()) >= 0) {
@@ -10614,6 +10757,29 @@ class Lists {
10614
10757
  parentList.parentElement.insertBefore(startNode.children[1], parentList);
10615
10758
  }
10616
10759
  }
10760
+ this.removeList(range, e);
10761
+ }
10762
+ removeList(range, e) {
10763
+ let startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
10764
+ let endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
10765
+ startNode = startNode.nodeName === 'BR' ? startNode.parentElement : startNode;
10766
+ endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
10767
+ if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
10768
+ isNullOrUndefined(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
10769
+ isNullOrUndefined(startNode.previousElementSibling) && range.startOffset === 0) ||
10770
+ (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement &&
10771
+ range.startOffset === 0 && range.endOffset === 1)) {
10772
+ if (Browser.userAgent.indexOf('Firefox') != -1) {
10773
+ detach(range.commonAncestorContainer.childNodes[0]);
10774
+ }
10775
+ else if (range.commonAncestorContainer.nodeName === 'LI') {
10776
+ detach(range.commonAncestorContainer.parentElement);
10777
+ }
10778
+ else {
10779
+ detach(range.commonAncestorContainer);
10780
+ }
10781
+ e.event.preventDefault();
10782
+ }
10617
10783
  }
10618
10784
  keyDownHandler(e) {
10619
10785
  if (e.event.which === 13) {
@@ -10638,6 +10804,7 @@ class Lists {
10638
10804
  && (commonAncestor.lastElementChild === closest(endNode, 'li')) && !range.collapsed) {
10639
10805
  detach(commonAncestor);
10640
10806
  }
10807
+ this.removeList(range, e);
10641
10808
  }
10642
10809
  if (e.event.which === 9) {
10643
10810
  const range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
@@ -10853,6 +11020,19 @@ class Lists {
10853
11020
  }
10854
11021
  applyListsHandler(e) {
10855
11022
  let range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
11023
+ if (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement) {
11024
+ const startChildNodes = range.startContainer.childNodes;
11025
+ let startNode = ((startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) : range.startOffset]) || range.startContainer);
11026
+ let endNode = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset] || range.endContainer);
11027
+ let lastSelectionNode = endNode.lastChild.nodeName === 'BR' ? (isNullOrUndefined(endNode.lastChild.previousSibling) ? endNode
11028
+ : endNode.lastChild.previousSibling) : endNode.lastChild;
11029
+ while (!isNullOrUndefined(lastSelectionNode) && lastSelectionNode.nodeName !== '#text' && lastSelectionNode.nodeName !== 'IMG' &&
11030
+ lastSelectionNode.nodeName !== 'BR' && lastSelectionNode.nodeName !== 'HR') {
11031
+ lastSelectionNode = lastSelectionNode.lastChild;
11032
+ }
11033
+ this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startNode, lastSelectionNode, 0, lastSelectionNode.textContent.length);
11034
+ range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
11035
+ }
10856
11036
  if (range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement &&
10857
11037
  range.startOffset === range.endOffset && range.startOffset === 0 &&
10858
11038
  this.parent.editableElement.textContent.length === 0 && (this.parent.editableElement.childNodes[0].nodeName != 'TABLE' &&
@@ -14622,8 +14802,16 @@ class SelectionCommands {
14622
14802
  for (; nodeTraverse && nodeTraverse.parentElement && nodeTraverse.parentElement !== endNode;
14623
14803
  // eslint-disable-next-line
14624
14804
  nodeTraverse = nodeTraverse) {
14625
- if (nodeTraverse.parentElement && nodeTraverse.parentElement.tagName.toLocaleLowerCase()
14626
- === formatNode.tagName.toLocaleLowerCase() &&
14805
+ let nodeTraverseCondition;
14806
+ if (formatNode.nodeName === 'SPAN') {
14807
+ nodeTraverseCondition = nodeTraverse.parentElement.tagName.toLocaleLowerCase()
14808
+ === formatNode.tagName.toLocaleLowerCase() && nodeTraverse.parentElement.getAttribute('style') === formatNodeStyles;
14809
+ }
14810
+ else {
14811
+ nodeTraverseCondition = nodeTraverse.parentElement.tagName.toLocaleLowerCase()
14812
+ === formatNode.tagName.toLocaleLowerCase();
14813
+ }
14814
+ if (nodeTraverse.parentElement && nodeTraverseCondition &&
14627
14815
  (nodeTraverse.parentElement.childElementCount > 1 || range.startOffset > 1)) {
14628
14816
  if (textNode.parentElement && textNode.parentElement.tagName.toLocaleLowerCase()
14629
14817
  === formatNode.tagName.toLocaleLowerCase()) {
@@ -16834,7 +17022,8 @@ class ContentRender {
16834
17022
  * @returns {string} - specifies the string element.
16835
17023
  */
16836
17024
  getText() {
16837
- return this.getEditPanel().innerText;
17025
+ let textString = this.getEditPanel().innerText;
17026
+ return textString === '\n' ? '' : textString;
16838
17027
  }
16839
17028
  /**
16840
17029
  * Set the content div element of RichTextEditor
@@ -17339,7 +17528,17 @@ class HtmlEditor {
17339
17528
  e.args.keyCode === 13) {
17340
17529
  this.spaceLink(e.args);
17341
17530
  if (this.parent.editorMode === 'HTML' && !this.parent.readonly) {
17342
- this.parent.notify(enterHandler, { args: e.args });
17531
+ const currentLength = this.parent.getText().trim().length;
17532
+ const selectionLength = this.parent.getSelection().length;
17533
+ const totalLength = (currentLength - selectionLength) + 1;
17534
+ if (!(this.parent.maxLength === -1 || totalLength <= this.parent.maxLength) &&
17535
+ e.args.keyCode === 13) {
17536
+ e.args.preventDefault();
17537
+ return;
17538
+ }
17539
+ else {
17540
+ this.parent.notify(enterHandler, { args: e.args });
17541
+ }
17343
17542
  }
17344
17543
  }
17345
17544
  if (e.args.action === 'space') {
@@ -17928,6 +18127,7 @@ class PasteCleanup {
17928
18127
  return;
17929
18128
  }
17930
18129
  this.parent.on(pasteClean, this.pasteClean, this);
18130
+ this.parent.on(bindCssClass, this.setCssClass, this);
17931
18131
  this.parent.on(destroy, this.destroy, this);
17932
18132
  }
17933
18133
  destroy() {
@@ -17938,6 +18138,7 @@ class PasteCleanup {
17938
18138
  return;
17939
18139
  }
17940
18140
  this.parent.off(pasteClean, this.pasteClean);
18141
+ this.parent.off(bindCssClass, this.setCssClass);
17941
18142
  this.parent.off(destroy, this.destroy);
17942
18143
  }
17943
18144
  pasteClean(e) {
@@ -18115,7 +18316,7 @@ class PasteCleanup {
18115
18316
  id: this.parent.element.id + '_upload', attrs: { type: 'File', name: 'UploadFiles' }
18116
18317
  });
18117
18318
  const offsetY = this.parent.iframeSettings.enable ? -50 : -90;
18118
- const popupObj = new Popup(popupEle, {
18319
+ this.popupObj = new Popup(popupEle, {
18119
18320
  relateTo: imgElem,
18120
18321
  height: '85px',
18121
18322
  width: '300px',
@@ -18128,19 +18329,22 @@ class PasteCleanup {
18128
18329
  // eslint-disable-next-line
18129
18330
  close: (event) => {
18130
18331
  this.parent.isBlur = false;
18131
- popupObj.destroy();
18132
- detach(popupObj.element);
18332
+ this.popupObj.destroy();
18333
+ detach(this.popupObj.element);
18133
18334
  }
18134
18335
  });
18135
- popupObj.element.style.display = 'none';
18136
- addClass([popupObj.element], [CLS_POPUP_OPEN, CLS_RTE_UPLOAD_POPUP]);
18336
+ this.popupObj.element.style.display = 'none';
18337
+ addClass([this.popupObj.element], [CLS_POPUP_OPEN, CLS_RTE_UPLOAD_POPUP]);
18338
+ if (!isNullOrUndefined(this.parent.cssClass)) {
18339
+ addClass([this.popupObj.element], this.parent.cssClass);
18340
+ }
18137
18341
  const timeOut = fileList.size > 1000000 ? 300 : 100;
18138
18342
  setTimeout(() => {
18139
- this.refreshPopup(imgElem, popupObj);
18343
+ this.refreshPopup(imgElem, this.popupObj);
18140
18344
  }, timeOut);
18141
18345
  let rawFile;
18142
18346
  let beforeUploadArgs;
18143
- const uploadObj = new Uploader({
18347
+ this.uploadObj = new Uploader({
18144
18348
  asyncSettings: {
18145
18349
  saveUrl: this.parent.insertImageSettings.saveUrl,
18146
18350
  removeUrl: this.parent.insertImageSettings.removeUrl
@@ -18150,7 +18354,7 @@ class PasteCleanup {
18150
18354
  allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
18151
18355
  success: (e) => {
18152
18356
  setTimeout(() => {
18153
- this.popupClose(popupObj, uploadObj, imgElem, e);
18357
+ this.popupClose(this.popupObj, this.uploadObj, imgElem, e);
18154
18358
  }, 900);
18155
18359
  },
18156
18360
  uploading: (e) => {
@@ -18160,8 +18364,8 @@ class PasteCleanup {
18160
18364
  if (!isNullOrUndefined(imgElem)) {
18161
18365
  detach(imgElem);
18162
18366
  }
18163
- if (!isNullOrUndefined(popupObj.element)) {
18164
- detach(popupObj.element);
18367
+ if (!isNullOrUndefined(this.popupObj.element)) {
18368
+ detach(this.popupObj.element);
18165
18369
  }
18166
18370
  }
18167
18371
  else {
@@ -18181,11 +18385,11 @@ class PasteCleanup {
18181
18385
  }
18182
18386
  this.toolbarEnableDisable(true);
18183
18387
  /* eslint-disable */
18184
- uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
18185
- beforeUploadArgs.currentRequest : uploadObj.currentRequestHeader;
18186
- uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
18187
- beforeUploadArgs.customFormData : uploadObj.customFormDatas;
18188
- uploadObj.uploadFiles(rawFile, null);
18388
+ this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
18389
+ beforeUploadArgs.currentRequest : this.uploadObj.currentRequestHeader;
18390
+ this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
18391
+ beforeUploadArgs.customFormData : this.uploadObj.customFormDatas;
18392
+ this.uploadObj.uploadFiles(rawFile, null);
18189
18393
  /* eslint-enable */
18190
18394
  });
18191
18395
  }
@@ -18197,7 +18401,7 @@ class PasteCleanup {
18197
18401
  // eslint-disable-next-line
18198
18402
  failure: (e) => {
18199
18403
  setTimeout(() => {
18200
- this.uploadFailure(imgElem, uploadObj, popupObj, e);
18404
+ this.uploadFailure(imgElem, this.uploadObj, this.popupObj, e);
18201
18405
  }, 900);
18202
18406
  },
18203
18407
  canceling: () => {
@@ -18206,7 +18410,7 @@ class PasteCleanup {
18206
18410
  detach(imgElem.nextSibling);
18207
18411
  }
18208
18412
  detach(imgElem);
18209
- popupObj.close();
18413
+ this.popupObj.close();
18210
18414
  },
18211
18415
  selected: (e) => {
18212
18416
  e.cancel = true;
@@ -18220,10 +18424,10 @@ class PasteCleanup {
18220
18424
  detach(imgElem.nextSibling);
18221
18425
  }
18222
18426
  detach(imgElem);
18223
- popupObj.close();
18427
+ this.popupObj.close();
18224
18428
  }
18225
18429
  });
18226
- uploadObj.appendTo(popupObj.element.childNodes[0]);
18430
+ this.uploadObj.appendTo(this.popupObj.element.childNodes[0]);
18227
18431
  /* eslint-disable */
18228
18432
  let fileData = [{
18229
18433
  name: fileList.name,
@@ -18233,13 +18437,13 @@ class PasteCleanup {
18233
18437
  validationMessages: { minSize: "", maxSize: "" },
18234
18438
  statusCode: '1'
18235
18439
  }];
18236
- uploadObj.createFileList(fileData);
18237
- uploadObj.filesData.push(fileData[0]);
18440
+ this.uploadObj.createFileList(fileData);
18441
+ this.uploadObj.filesData.push(fileData[0]);
18238
18442
  /* eslint-enable */
18239
18443
  rawFile = fileData;
18240
- uploadObj.upload(fileData);
18241
- popupObj.element.getElementsByClassName('e-file-select-wrap')[0].style.display = 'none';
18242
- detach(popupObj.element.querySelector('.e-rte-dialog-upload .e-file-select-wrap'));
18444
+ this.uploadObj.upload(fileData);
18445
+ this.popupObj.element.getElementsByClassName('e-file-select-wrap')[0].style.display = 'none';
18446
+ detach(this.popupObj.element.querySelector('.e-rte-dialog-upload .e-file-select-wrap'));
18243
18447
  }
18244
18448
  uploadFailure(imgElem, uploadObj, popupObj, e) {
18245
18449
  this.parent.inputElement.contentEditable = 'true';
@@ -18331,19 +18535,19 @@ class PasteCleanup {
18331
18535
  }
18332
18536
  }
18333
18537
  radioRender() {
18334
- const keepRadioButton = new RadioButton({ label: this.i10n.getConstant('keepFormat'),
18538
+ this.keepRadioButton = new RadioButton({ label: this.i10n.getConstant('keepFormat'),
18335
18539
  name: 'pasteOption', checked: true });
18336
- keepRadioButton.isStringTemplate = true;
18540
+ this.keepRadioButton.isStringTemplate = true;
18337
18541
  const keepFormatElement = this.parent.element.querySelector('#keepFormating');
18338
- keepRadioButton.appendTo(keepFormatElement);
18339
- const cleanRadioButton = new RadioButton({ label: this.i10n.getConstant('cleanFormat'), name: 'pasteOption' });
18340
- cleanRadioButton.isStringTemplate = true;
18542
+ this.keepRadioButton.appendTo(keepFormatElement);
18543
+ this.cleanRadioButton = new RadioButton({ label: this.i10n.getConstant('cleanFormat'), name: 'pasteOption' });
18544
+ this.cleanRadioButton.isStringTemplate = true;
18341
18545
  const cleanFormatElement = this.parent.element.querySelector('#cleanFormat');
18342
- cleanRadioButton.appendTo(cleanFormatElement);
18343
- const plainTextRadioButton = new RadioButton({ label: this.i10n.getConstant('plainText'), name: 'pasteOption' });
18344
- plainTextRadioButton.isStringTemplate = true;
18546
+ this.cleanRadioButton.appendTo(cleanFormatElement);
18547
+ this.plainTextRadioButton = new RadioButton({ label: this.i10n.getConstant('plainText'), name: 'pasteOption' });
18548
+ this.plainTextRadioButton.isStringTemplate = true;
18345
18549
  const plainTextElement = this.parent.element.querySelector('#plainTextFormat');
18346
- plainTextRadioButton.appendTo(plainTextElement);
18550
+ this.plainTextRadioButton.appendTo(plainTextElement);
18347
18551
  }
18348
18552
  selectFormatting(value, args, keepChecked, cleanChecked) {
18349
18553
  if (keepChecked) {
@@ -18363,15 +18567,15 @@ class PasteCleanup {
18363
18567
  buttons: [
18364
18568
  {
18365
18569
  click: () => {
18366
- if (!dialog.isDestroyed) {
18570
+ if (!this.dialogObj.isDestroyed) {
18367
18571
  const keepChecked = this.parent.element.querySelector('#keepFormating').checked;
18368
18572
  const cleanChecked = this.parent.element.querySelector('#cleanFormat').checked;
18369
- dialog.hide();
18573
+ this.dialogObj.hide();
18370
18574
  this.parent.height = isHeight ? preRTEHeight : this.parent.height;
18371
18575
  isHeight = false;
18372
- const argument = dialog;
18576
+ const argument = this.dialogObj;
18373
18577
  this.dialogRenderObj.close(argument);
18374
- dialog.destroy();
18578
+ this.dialogObj.destroy();
18375
18579
  this.selectFormatting(value, args, keepChecked, cleanChecked);
18376
18580
  }
18377
18581
  },
@@ -18383,13 +18587,13 @@ class PasteCleanup {
18383
18587
  },
18384
18588
  {
18385
18589
  click: () => {
18386
- if (!dialog.isDestroyed) {
18387
- dialog.hide();
18590
+ if (!this.dialogObj.isDestroyed) {
18591
+ this.dialogObj.hide();
18388
18592
  this.parent.height = isHeight ? preRTEHeight : this.parent.height;
18389
18593
  isHeight = false;
18390
- const args = dialog;
18594
+ const args = this.dialogObj;
18391
18595
  this.dialogRenderObj.close(args);
18392
- dialog.destroy();
18596
+ this.dialogObj.destroy();
18393
18597
  }
18394
18598
  },
18395
18599
  buttonModel: {
@@ -18412,7 +18616,7 @@ class PasteCleanup {
18412
18616
  isModal: true,
18413
18617
  visible: false
18414
18618
  };
18415
- const dialog = this.dialogRenderObj.render(dialogModel);
18619
+ this.dialogObj = this.dialogRenderObj.render(dialogModel);
18416
18620
  let rteDialogWrapper = this.parent.element.querySelector('#' + this.parent.getID()
18417
18621
  + '_pasteCleanupDialog');
18418
18622
  if (rteDialogWrapper !== null && rteDialogWrapper.innerHTML !== '') {
@@ -18424,15 +18628,42 @@ class PasteCleanup {
18424
18628
  });
18425
18629
  this.parent.element.appendChild(rteDialogWrapper);
18426
18630
  }
18427
- dialog.appendTo(rteDialogWrapper);
18631
+ this.dialogObj.appendTo(rteDialogWrapper);
18428
18632
  this.radioRender();
18429
18633
  /* eslint-disable */
18430
- if (this.parent.element.offsetHeight < parseInt(dialog.height.split('px')[0], null)) {
18431
- this.parent.height = parseInt(dialog.height.split('px')[0], null) + 40;
18634
+ if (this.parent.element.offsetHeight < parseInt(this.dialogObj.height.split('px')[0], null)) {
18635
+ this.parent.height = parseInt(this.dialogObj.height.split('px')[0], null) + 40;
18432
18636
  /* eslint-enable */
18433
18637
  isHeight = true;
18434
18638
  }
18435
- dialog.show();
18639
+ this.dialogObj.show();
18640
+ this.setCssClass({ cssClass: this.parent.cssClass });
18641
+ }
18642
+ updateCss(currentObj, e) {
18643
+ if (currentObj && e.cssClass) {
18644
+ if (isNullOrUndefined(e.oldCssClass)) {
18645
+ currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
18646
+ }
18647
+ else {
18648
+ currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
18649
+ }
18650
+ }
18651
+ }
18652
+ setCssClass(e) {
18653
+ if (this.popupObj && e.cssClass) {
18654
+ if (isNullOrUndefined(e.oldCssClass)) {
18655
+ addClass([this.popupObj.element], e.cssClass);
18656
+ }
18657
+ else {
18658
+ removeClass([this.popupObj.element], e.oldCssClass);
18659
+ addClass([this.popupObj.element], e.cssClass);
18660
+ }
18661
+ }
18662
+ this.updateCss(this.dialogObj, e);
18663
+ this.updateCss(this.uploadObj, e);
18664
+ this.updateCss(this.plainTextRadioButton, e);
18665
+ this.updateCss(this.cleanRadioButton, e);
18666
+ this.updateCss(this.keepRadioButton, e);
18436
18667
  }
18437
18668
  destroyDialog(rteDialogWrapper) {
18438
18669
  const rteDialogContainer = this.parent.element.querySelector('.e-dlg-container');
@@ -18974,6 +19205,17 @@ class FileManager$1 {
18974
19205
  this.dialogObj.createElement = this.parent.createElement;
18975
19206
  this.dialogObj.appendTo(dlgTarget);
18976
19207
  this.dialogObj.show(Browser.isDevice ? true : false);
19208
+ this.setCssClass({ cssClass: this.parent.cssClass });
19209
+ }
19210
+ setCssClass(e) {
19211
+ if (this.dialogObj && e.cssClass) {
19212
+ if (isNullOrUndefined(e.oldCssClass)) {
19213
+ this.dialogObj.setProperties({ cssClass: (this.dialogObj.cssClass + ' ' + e.cssClass).trim() });
19214
+ }
19215
+ else {
19216
+ this.dialogObj.setProperties({ cssClass: (this.dialogObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
19217
+ }
19218
+ }
18977
19219
  }
18978
19220
  renderFileManager() {
18979
19221
  // eslint-disable-next-line
@@ -19097,12 +19339,14 @@ class FileManager$1 {
19097
19339
  addEventListener() {
19098
19340
  this.parent.on(initialEnd, this.initialize, this);
19099
19341
  this.parent.on(renderFileManager, this.render, this);
19342
+ this.parent.on(bindCssClass, this.setCssClass, this);
19100
19343
  this.parent.on(destroy, this.destroy, this);
19101
19344
  }
19102
19345
  removeEventListener() {
19103
19346
  EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);
19104
19347
  this.parent.off(initialEnd, this.initialize);
19105
19348
  this.parent.off(renderFileManager, this.render);
19349
+ this.parent.off(bindCssClass, this.setCssClass);
19106
19350
  this.parent.off(destroy, this.destroy);
19107
19351
  }
19108
19352
  destroyComponents() {
@@ -19475,6 +19719,7 @@ class Link {
19475
19719
  this.parent.on(editLink, this.editLink, this);
19476
19720
  this.parent.on(openLink, this.openLink, this);
19477
19721
  this.parent.on(editAreaClick, this.editAreaClickHandler, this);
19722
+ this.parent.on(bindCssClass, this.setCssClass, this);
19478
19723
  this.parent.on(destroy, this.destroy, this);
19479
19724
  }
19480
19725
  onToolbarAction(args) {
@@ -19507,6 +19752,7 @@ class Link {
19507
19752
  this.parent.off(editLink, this.editLink);
19508
19753
  this.parent.off(openLink, this.openLink);
19509
19754
  this.parent.off(editAreaClick, this.editAreaClickHandler);
19755
+ this.parent.off(bindCssClass, this.setCssClass);
19510
19756
  this.parent.off(destroy, this.destroy);
19511
19757
  }
19512
19758
  onIframeMouseDown() {
@@ -19514,6 +19760,20 @@ class Link {
19514
19760
  this.dialogObj.hide({ returnValue: true });
19515
19761
  }
19516
19762
  }
19763
+ updateCss(currentObj, e) {
19764
+ if (currentObj && e.cssClass) {
19765
+ if (isNullOrUndefined(e.oldCssClass)) {
19766
+ currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
19767
+ }
19768
+ else {
19769
+ currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
19770
+ }
19771
+ }
19772
+ }
19773
+ setCssClass(e) {
19774
+ this.updateCss(this.checkBoxObj, e);
19775
+ this.updateCss(this.dialogObj, e);
19776
+ }
19517
19777
  showLinkQuickToolbar(e) {
19518
19778
  if (!isNullOrUndefined(e.args) && e.args.action !== 'enter' &&
19519
19779
  e.args.action !== 'space') {
@@ -19642,6 +19902,7 @@ class Link {
19642
19902
  }
19643
19903
  showDialog() {
19644
19904
  this.openDialog(false);
19905
+ this.setCssClass({ cssClass: this.parent.cssClass });
19645
19906
  }
19646
19907
  closeDialog() {
19647
19908
  if (this.dialogObj) {
@@ -19696,7 +19957,7 @@ class Link {
19696
19957
  const linkText = linkContent.querySelector('.e-rte-linkText');
19697
19958
  const linkTitle = linkContent.querySelector('.e-rte-linkTitle');
19698
19959
  const linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');
19699
- this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl });
19960
+ this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass });
19700
19961
  this.checkBoxObj.isStringTemplate = true;
19701
19962
  this.checkBoxObj.createElement = this.parent.createElement;
19702
19963
  this.checkBoxObj.appendTo(linkTarget);
@@ -19709,7 +19970,7 @@ class Link {
19709
19970
  const dialogModel = {
19710
19971
  header: this.i10n.getConstant('linkHeader'),
19711
19972
  content: linkContent,
19712
- cssClass: CLS_RTE_ELEMENTS,
19973
+ cssClass: CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
19713
19974
  enableRtl: this.parent.enableRtl,
19714
19975
  locale: this.parent.locale,
19715
19976
  showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px', height: 'inherit',
@@ -19991,6 +20252,7 @@ class Image {
19991
20252
  this.parent.on(initialEnd, this.afterRender, this);
19992
20253
  this.parent.on(dynamicModule, this.afterRender, this);
19993
20254
  this.parent.on(paste, this.imagePaste, this);
20255
+ this.parent.on(bindCssClass, this.setCssClass, this);
19994
20256
  this.parent.on(destroy, this.removeEventListener, this);
19995
20257
  }
19996
20258
  removeEventListener() {
@@ -20017,6 +20279,7 @@ class Image {
20017
20279
  this.parent.off(initialEnd, this.afterRender);
20018
20280
  this.parent.off(dynamicModule, this.afterRender);
20019
20281
  this.parent.off(paste, this.imagePaste);
20282
+ this.parent.off(bindCssClass, this.setCssClass);
20020
20283
  this.parent.off(destroy, this.removeEventListener);
20021
20284
  const dropElement = this.parent.iframeSettings.enable ? this.parent.inputElement.ownerDocument
20022
20285
  : this.parent.inputElement;
@@ -20034,6 +20297,32 @@ class Image {
20034
20297
  }
20035
20298
  }
20036
20299
  }
20300
+ updateCss(currentObj, e) {
20301
+ if (currentObj && e.cssClass) {
20302
+ if (isNullOrUndefined(e.oldCssClass)) {
20303
+ currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
20304
+ }
20305
+ else {
20306
+ currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
20307
+ }
20308
+ }
20309
+ }
20310
+ setCssClass(e) {
20311
+ if (this.popupObj && e.cssClass) {
20312
+ if (isNullOrUndefined(e.oldCssClass)) {
20313
+ addClass([this.popupObj.element], e.cssClass);
20314
+ }
20315
+ else {
20316
+ removeClass([this.popupObj.element], e.oldCssClass);
20317
+ addClass([this.popupObj.element], e.cssClass);
20318
+ }
20319
+ }
20320
+ this.updateCss(this.checkBoxObj, e);
20321
+ this.updateCss(this.widthNum, e);
20322
+ this.updateCss(this.heightNum, e);
20323
+ this.updateCss(this.uploadObj, e);
20324
+ this.updateCss(this.dialogObj, e);
20325
+ }
20037
20326
  onIframeMouseDown() {
20038
20327
  if (this.dialogObj) {
20039
20328
  this.dialogObj.hide({ returnValue: true });
@@ -20635,6 +20924,7 @@ class Image {
20635
20924
  }
20636
20925
  showDialog() {
20637
20926
  this.openDialog(false);
20927
+ this.setCssClass({ cssClass: this.parent.cssClass });
20638
20928
  }
20639
20929
  closeDialog() {
20640
20930
  if (this.dialogObj) {
@@ -20852,7 +21142,8 @@ class Image {
20852
21142
  const inputLink = linkWrap.querySelector('.e-img-link');
20853
21143
  const linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');
20854
21144
  this.checkBoxObj = new CheckBox({
20855
- label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, change: (e) => {
21145
+ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass,
21146
+ change: (e) => {
20856
21147
  if (e.checked) {
20857
21148
  target = '_blank';
20858
21149
  }
@@ -20887,6 +21178,9 @@ class Image {
20887
21178
  }
20888
21179
  }]
20889
21180
  });
21181
+ if (!isNullOrUndefined(this.parent.cssClass)) {
21182
+ this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
21183
+ }
20890
21184
  if (!isNullOrUndefined(inputDetails)) {
20891
21185
  inputLink.value = inputDetails.url;
20892
21186
  // eslint-disable-next-line
@@ -20931,6 +21225,9 @@ class Image {
20931
21225
  }
20932
21226
  }]
20933
21227
  });
21228
+ if (!isNullOrUndefined(this.parent.cssClass)) {
21229
+ this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
21230
+ }
20934
21231
  this.dialogObj.element.style.maxHeight = 'inherit';
20935
21232
  this.dialogObj.content.querySelector('input').focus();
20936
21233
  }
@@ -21150,6 +21447,9 @@ class Image {
21150
21447
  }
21151
21448
  }]
21152
21449
  });
21450
+ if (!isNullOrUndefined(this.parent.cssClass)) {
21451
+ this.dialogObj.setProperties({ cssClass: this.parent.cssClass });
21452
+ }
21153
21453
  this.dialogObj.element.style.maxHeight = 'inherit';
21154
21454
  this.dialogObj.content.querySelector('input').focus();
21155
21455
  }
@@ -21424,24 +21724,26 @@ class Image {
21424
21724
  + ' /></div>';
21425
21725
  const contentElem = parseHtml(content);
21426
21726
  imgSizeWrap.appendChild(contentElem);
21427
- const widthNum = new TextBox({
21727
+ this.widthNum = new TextBox({
21428
21728
  value: formatUnit(widthVal),
21429
21729
  enableRtl: this.parent.enableRtl,
21730
+ cssClass: this.parent.cssClass,
21430
21731
  input: (e) => {
21431
21732
  this.inputWidthValue = formatUnit(this.inputValue(e.value));
21432
21733
  }
21433
21734
  });
21434
- widthNum.createElement = this.parent.createElement;
21435
- widthNum.appendTo(imgSizeWrap.querySelector('#imgwidth'));
21436
- const heightNum = new TextBox({
21735
+ this.widthNum.createElement = this.parent.createElement;
21736
+ this.widthNum.appendTo(imgSizeWrap.querySelector('#imgwidth'));
21737
+ this.heightNum = new TextBox({
21437
21738
  value: formatUnit(heightVal),
21438
21739
  enableRtl: this.parent.enableRtl,
21740
+ cssClass: this.parent.cssClass,
21439
21741
  input: (e) => {
21440
21742
  this.inputHeightValue = formatUnit(this.inputValue(e.value));
21441
21743
  }
21442
21744
  });
21443
- heightNum.createElement = this.parent.createElement;
21444
- heightNum.appendTo(imgSizeWrap.querySelector('#imgheight'));
21745
+ this.heightNum.createElement = this.parent.createElement;
21746
+ this.heightNum.appendTo(imgSizeWrap.querySelector('#imgheight'));
21445
21747
  return imgSizeWrap;
21446
21748
  }
21447
21749
  inputValue(value) {
@@ -21520,10 +21822,10 @@ class Image {
21520
21822
  span.appendChild(btnEle);
21521
21823
  uploadParentEle.appendChild(span);
21522
21824
  const browserMsg = this.i10n.getConstant('browse');
21523
- const button = new Button({ content: browserMsg, enableRtl: this.parent.enableRtl });
21524
- button.isStringTemplate = true;
21525
- button.createElement = this.parent.createElement;
21526
- button.appendTo(btnEle);
21825
+ this.browseButton = new Button({ content: browserMsg, enableRtl: this.parent.enableRtl });
21826
+ this.browseButton.isStringTemplate = true;
21827
+ this.browseButton.createElement = this.parent.createElement;
21828
+ this.browseButton.appendTo(btnEle);
21527
21829
  const btnClick = (Browser.isDevice) ? span : btnEle;
21528
21830
  EventHandler.add(btnClick, 'click', this.fileSelect, this);
21529
21831
  const uploadEle = this.parent.createElement('input', {
@@ -21537,7 +21839,7 @@ class Image {
21537
21839
  let beforeUploadArgs;
21538
21840
  this.uploadObj = new Uploader({
21539
21841
  asyncSettings: { saveUrl: this.parent.insertImageSettings.saveUrl, removeUrl: this.parent.insertImageSettings.removeUrl },
21540
- dropArea: span, multiple: false, enableRtl: this.parent.enableRtl,
21842
+ dropArea: span, multiple: false, enableRtl: this.parent.enableRtl, cssClass: this.parent.cssClass,
21541
21843
  allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
21542
21844
  selected: (e) => {
21543
21845
  proxy.isImgUploaded = true;
@@ -21913,6 +22215,9 @@ class Image {
21913
22215
  this.popupObj.element.style.display = 'none';
21914
22216
  addClass([this.popupObj.element], CLS_POPUP_OPEN);
21915
22217
  addClass([this.popupObj.element], CLS_RTE_UPLOAD_POPUP);
22218
+ if (!isNullOrUndefined(this.parent.cssClass)) {
22219
+ addClass([this.popupObj.element], this.parent.cssClass);
22220
+ }
21916
22221
  const range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
21917
22222
  const timeOut = dragEvent.dataTransfer.files[0].size > 1000000 ? 300 : 100;
21918
22223
  setTimeout(() => {
@@ -21925,7 +22230,7 @@ class Image {
21925
22230
  saveUrl: this.parent.insertImageSettings.saveUrl,
21926
22231
  removeUrl: this.parent.insertImageSettings.removeUrl
21927
22232
  },
21928
- cssClass: CLS_RTE_DIALOG_UPLOAD,
22233
+ cssClass: CLS_RTE_DIALOG_UPLOAD + ' ' + this.parent.cssClass,
21929
22234
  dropArea: this.parent.element,
21930
22235
  allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
21931
22236
  removing: () => {
@@ -22460,6 +22765,7 @@ class Table {
22460
22765
  this.parent.on(dropDownSelect, this.dropdownSelect, this);
22461
22766
  this.parent.on(keyDown, this.keyDown, this);
22462
22767
  this.parent.on(mouseUp, this.selectionTable, this);
22768
+ this.parent.on(bindCssClass, this.setCssClass, this);
22463
22769
  this.parent.on(destroy, this.destroy, this);
22464
22770
  }
22465
22771
  removeEventListener() {
@@ -22480,8 +22786,38 @@ class Table {
22480
22786
  this.parent.off(tableColorPickerChanged, this.setBGColor);
22481
22787
  this.parent.off(keyDown, this.keyDown);
22482
22788
  this.parent.off(mouseUp, this.selectionTable);
22789
+ this.parent.off(bindCssClass, this.setCssClass);
22483
22790
  this.parent.off(destroy, this.destroy);
22484
22791
  }
22792
+ updateCss(currentObj, e) {
22793
+ if (currentObj && e.cssClass) {
22794
+ if (isNullOrUndefined(e.oldCssClass)) {
22795
+ currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
22796
+ }
22797
+ else {
22798
+ currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
22799
+ }
22800
+ }
22801
+ }
22802
+ setCssClass(e) {
22803
+ if (this.popupObj && e.cssClass) {
22804
+ if (isNullOrUndefined(e.oldCssClass)) {
22805
+ addClass([this.popupObj.element], e.cssClass);
22806
+ }
22807
+ else {
22808
+ removeClass([this.popupObj.element], e.oldCssClass);
22809
+ addClass([this.popupObj.element], e.cssClass);
22810
+ }
22811
+ }
22812
+ this.updateCss(this.createTableButton, e);
22813
+ this.updateCss(this.editdlgObj, e);
22814
+ const numericTextBoxObj = [
22815
+ this.columnTextBox, this.rowTextBox, this.tableWidthNum, this.tableCellPadding, this.tableCellSpacing
22816
+ ];
22817
+ for (let i = 0; i < numericTextBoxObj.length; i++) {
22818
+ this.updateCss(numericTextBoxObj[i], e);
22819
+ }
22820
+ }
22485
22821
  selectionTable(e) {
22486
22822
  const target = e.args.target;
22487
22823
  if (Browser.info.name === 'mozilla' && !isNullOrUndefined(closest(target, 'table')) && closest(target, 'table').tagName === 'TABLE') {
@@ -22614,6 +22950,7 @@ class Table {
22614
22950
  }
22615
22951
  showDialog() {
22616
22952
  this.openDialog(false);
22953
+ this.setCssClass({ cssClass: this.parent.cssClass });
22617
22954
  }
22618
22955
  closeDialog() {
22619
22956
  if (this.editdlgObj) {
@@ -23332,12 +23669,12 @@ class Table {
23332
23669
  this.parent.getToolbarElement().querySelector('.e-expended-nav').setAttribute('tabindex', '1');
23333
23670
  }
23334
23671
  this.dlgDiv.appendChild(btnEle);
23335
- const button = new Button({
23336
- iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat',
23672
+ this.createTableButton = new Button({
23673
+ iconCss: 'e-icons e-create-table', content: insertbtn, cssClass: 'e-flat' + ' ' + this.parent.cssClass,
23337
23674
  enableRtl: this.parent.enableRtl, locale: this.parent.locale
23338
23675
  });
23339
- button.isStringTemplate = true;
23340
- button.appendTo(btnEle);
23676
+ this.createTableButton.isStringTemplate = true;
23677
+ this.createTableButton.appendTo(btnEle);
23341
23678
  EventHandler.add(btnEle, 'click', this.insertTableDialog, { self: this, args: args.args, selection: args.selection });
23342
23679
  this.parent.getToolbar().appendChild(this.dlgDiv);
23343
23680
  let target = args.args.originalEvent.target;
@@ -23360,6 +23697,9 @@ class Table {
23360
23697
  }
23361
23698
  });
23362
23699
  addClass([this.popupObj.element], 'e-popup-open');
23700
+ if (!isNullOrUndefined(this.parent.cssClass)) {
23701
+ addClass([this.popupObj.element], this.parent.cssClass);
23702
+ }
23363
23703
  this.popupObj.refreshPosition(target);
23364
23704
  }
23365
23705
  docClick(e) {
@@ -23431,7 +23771,8 @@ class Table {
23431
23771
  this.cancelDialog(e);
23432
23772
  },
23433
23773
  buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
23434
- }]
23774
+ }],
23775
+ cssClass: this.parent.cssClass
23435
23776
  });
23436
23777
  this.editdlgObj.element.style.maxHeight = 'none';
23437
23778
  this.editdlgObj.content.querySelector('input').focus();
@@ -23462,6 +23803,9 @@ class Table {
23462
23803
  buttonModel: { cssClass: 'e-flat e-cancel', content: cancel }
23463
23804
  }]
23464
23805
  });
23806
+ if (!isNullOrUndefined(proxy.parent.cssClass)) {
23807
+ proxy.editdlgObj.setProperties({ cssClass: proxy.parent.cssClass });
23808
+ }
23465
23809
  proxy.editdlgObj.element.style.maxHeight = 'none';
23466
23810
  proxy.editdlgObj.content.querySelector('input').focus();
23467
23811
  }
@@ -23481,7 +23825,8 @@ class Table {
23481
23825
  placeholder: tableColumn,
23482
23826
  floatLabelType: 'Auto',
23483
23827
  max: 50,
23484
- enableRtl: this.parent.enableRtl, locale: this.parent.locale
23828
+ enableRtl: this.parent.enableRtl, locale: this.parent.locale,
23829
+ cssClass: this.parent.cssClass
23485
23830
  });
23486
23831
  this.columnTextBox.isStringTemplate = true;
23487
23832
  this.columnTextBox.appendTo(tableWrap.querySelector('#tableColumn'));
@@ -23492,7 +23837,8 @@ class Table {
23492
23837
  placeholder: tableRow,
23493
23838
  floatLabelType: 'Auto',
23494
23839
  max: 50,
23495
- enableRtl: this.parent.enableRtl, locale: this.parent.locale
23840
+ enableRtl: this.parent.enableRtl, locale: this.parent.locale,
23841
+ cssClass: this.parent.cssClass
23496
23842
  });
23497
23843
  this.rowTextBox.isStringTemplate = true;
23498
23844
  this.rowTextBox.appendTo(tableWrap.querySelector('#tableRow'));
@@ -23520,7 +23866,7 @@ class Table {
23520
23866
  const header = this.l10n.getConstant('tabledialogHeader');
23521
23867
  const dialogModel = {
23522
23868
  header: header,
23523
- cssClass: CLS_RTE_ELEMENTS,
23869
+ cssClass: CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,
23524
23870
  enableRtl: this.parent.enableRtl,
23525
23871
  locale: this.parent.locale,
23526
23872
  showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '340px', height: 'initial',
@@ -23610,7 +23956,7 @@ class Table {
23610
23956
  + ' </div><div class="e-rte-field"><input type="text" data-role ="none" id="cellSpacing" class="e-cell-spacing" /></div>';
23611
23957
  const contentElem = parseHtml(content);
23612
23958
  tableWrap.appendChild(contentElem);
23613
- const widthNum = new NumericTextBox({
23959
+ this.tableWidthNum = new NumericTextBox({
23614
23960
  format: 'n0',
23615
23961
  min: 0,
23616
23962
  value: widthVal,
@@ -23618,9 +23964,9 @@ class Table {
23618
23964
  floatLabelType: 'Auto',
23619
23965
  enableRtl: this.parent.enableRtl, locale: this.parent.locale
23620
23966
  });
23621
- widthNum.isStringTemplate = true;
23622
- widthNum.appendTo(tableWrap.querySelector('#tableWidth'));
23623
- const padding = new NumericTextBox({
23967
+ this.tableWidthNum.isStringTemplate = true;
23968
+ this.tableWidthNum.appendTo(tableWrap.querySelector('#tableWidth'));
23969
+ this.tableCellPadding = new NumericTextBox({
23624
23970
  format: 'n0',
23625
23971
  min: 0,
23626
23972
  // eslint-disable-next-line
@@ -23629,9 +23975,9 @@ class Table {
23629
23975
  floatLabelType: 'Auto',
23630
23976
  enableRtl: this.parent.enableRtl, locale: this.parent.locale
23631
23977
  });
23632
- padding.isStringTemplate = true;
23633
- padding.appendTo(tableWrap.querySelector('#cellPadding'));
23634
- const spacing = new NumericTextBox({
23978
+ this.tableCellPadding.isStringTemplate = true;
23979
+ this.tableCellPadding.appendTo(tableWrap.querySelector('#cellPadding'));
23980
+ this.tableCellSpacing = new NumericTextBox({
23635
23981
  format: 'n0',
23636
23982
  min: 0,
23637
23983
  // eslint-disable-next-line
@@ -23640,8 +23986,8 @@ class Table {
23640
23986
  floatLabelType: 'Auto',
23641
23987
  enableRtl: this.parent.enableRtl, locale: this.parent.locale
23642
23988
  });
23643
- spacing.isStringTemplate = true;
23644
- spacing.appendTo(tableWrap.querySelector('#cellSpacing'));
23989
+ this.tableCellSpacing.isStringTemplate = true;
23990
+ this.tableCellSpacing.appendTo(tableWrap.querySelector('#cellSpacing'));
23645
23991
  return tableWrap;
23646
23992
  }
23647
23993
  /**
@@ -24872,6 +25218,35 @@ let RichTextEditor = class RichTextEditor extends Component {
24872
25218
  this.formatter.saveData();
24873
25219
  }
24874
25220
  }
25221
+ if (this.maxLength !== -1 && !isNullOrUndefined(tool.command)) {
25222
+ let currentInsertContentLength = 0;
25223
+ if (tool.command === 'Links') {
25224
+ currentInsertContentLength = value.text.length === 0 ?
25225
+ value.url.length : value.text.length;
25226
+ }
25227
+ if (tool.command === 'Images' || tool.command === 'Table' || tool.command === 'Files') {
25228
+ currentInsertContentLength = 1;
25229
+ }
25230
+ if (tool.command === 'InsertHTML') {
25231
+ if (!isNullOrUndefined(value)) {
25232
+ let tempElem = this.createElement('div');
25233
+ tempElem.innerHTML = value;
25234
+ currentInsertContentLength = tempElem.textContent.length;
25235
+ }
25236
+ else if (!isNullOrUndefined(tool.value) && (tool.value === '<hr/>' || tool.value === '<br/>')) {
25237
+ currentInsertContentLength = 1;
25238
+ }
25239
+ }
25240
+ if (tool.command === 'InsertText') {
25241
+ currentInsertContentLength = value.length;
25242
+ }
25243
+ const currentLength = this.getText().trim().length;
25244
+ const selectionLength = this.getSelection().length;
25245
+ const totalLength = (currentLength - selectionLength) + currentInsertContentLength;
25246
+ if (!(this.maxLength === -1 || totalLength <= this.maxLength)) {
25247
+ return;
25248
+ }
25249
+ }
24875
25250
  this.formatter.editorManager.execCommand(tool.command, tool.subCommand ? tool.subCommand : (value ? value : tool.value), null, null, (value ? value : tool.value), (value ? value : tool.value));
24876
25251
  if (option && option.undo) {
24877
25252
  this.formatter.saveData();
@@ -24983,6 +25358,7 @@ let RichTextEditor = class RichTextEditor extends Component {
24983
25358
  }
24984
25359
  // eslint-disable-next-line
24985
25360
  (!this.enabled) ? this.unWireEvents() : this.eventInitializer();
25361
+ this.notify(bindCssClass, { cssClass: this.cssClass });
24986
25362
  this.renderComplete();
24987
25363
  }
24988
25364
  /**
@@ -25103,6 +25479,17 @@ let RichTextEditor = class RichTextEditor extends Component {
25103
25479
  this.autoResize();
25104
25480
  }
25105
25481
  keyUp(e) {
25482
+ if (this.editorMode === "HTML") {
25483
+ const range = this.getRange();
25484
+ if (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer.nodeName === '#text' &&
25485
+ range.startContainer.parentElement === this.inputElement && this.enterKey !== 'BR') {
25486
+ const range = this.getRange();
25487
+ const tempElem = this.createElement(this.enterKey);
25488
+ range.startContainer.parentElement.insertBefore(tempElem, range.startContainer);
25489
+ tempElem.appendChild(range.startContainer);
25490
+ this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), tempElem.childNodes[0], tempElem.childNodes[0], tempElem.childNodes[0].textContent.length, tempElem.childNodes[0].textContent.length);
25491
+ }
25492
+ }
25106
25493
  this.notify(keyUp, { member: 'keyup', args: e });
25107
25494
  if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||
25108
25495
  this.inputElement.innerHTML === '<br>')) {
@@ -25254,7 +25641,7 @@ let RichTextEditor = class RichTextEditor extends Component {
25254
25641
  requestType: 'Paste'
25255
25642
  };
25256
25643
  this.trigger(actionBegin, evenArgs, (pasteArgs) => {
25257
- const currentLength = this.getText().trim().length;
25644
+ const currentLength = this.inputElement.textContent.length;
25258
25645
  const selectionLength = this.getSelection().length;
25259
25646
  const pastedContentLength = (isNullOrUndefined(e) || isNullOrUndefined(e.clipboardData))
25260
25647
  ? 0 : e.clipboardData.getData('text/plain').length;
@@ -25563,6 +25950,7 @@ let RichTextEditor = class RichTextEditor extends Component {
25563
25950
  case 'cssClass':
25564
25951
  this.element.classList.remove(oldProp[prop]);
25565
25952
  this.setCssClass(newProp[prop]);
25953
+ this.notify(bindCssClass, { cssClass: newProp[prop], oldCssClass: oldProp[prop] });
25566
25954
  break;
25567
25955
  case 'enabled':
25568
25956
  this.setEnable();
@@ -26939,5 +27327,5 @@ RichTextEditor = __decorate$1([
26939
27327
  * Rich Text Editor component exported items
26940
27328
  */
26941
27329
 
26942
- export { Toolbar$2 as Toolbar, KeyboardEvents$1 as KeyboardEvents, BaseToolbar, BaseQuickToolbar, QuickToolbar, Count, ColorPickerInput, MarkdownToolbarStatus, ExecCommandCallBack, ToolbarAction, MarkdownEditor, HtmlEditor, PasteCleanup, Resize, DropDownButtons, FileManager$1 as FileManager, FullScreen, setAttributes, HtmlToolbarStatus, XhtmlValidation, HTMLFormatter, Formatter, MarkdownFormatter, ContentRender, Render, ToolbarRenderer, Link, Image, ViewSource, Table, DialogRenderer, IframeContentRender, MarkdownRender, PopupRenderer, RichTextEditor, RenderType, ToolbarType, DialogType, executeGroup, created, destroyed, load, initialLoad, contentChanged, initialEnd, iframeMouseDown, destroy, toolbarClick, toolbarRefresh, refreshBegin, toolbarUpdated, bindOnEnd, renderColorPicker, htmlToolbarClick, markdownToolbarClick, destroyColorPicker, modelChanged, keyUp, keyDown, mouseUp, toolbarCreated, toolbarRenderComplete, enableFullScreen, disableFullScreen, dropDownSelect, beforeDropDownItemRender, execCommandCallBack, imageToolbarAction, linkToolbarAction, windowResize, resizeStart, onResize, resizeStop, undo, redo, insertLink, unLink, editLink, openLink, actionBegin, actionComplete, updatedToolbarStatus, actionSuccess, updateToolbarItem, insertImage, insertCompleted, imageLeft, imageRight, imageCenter, imageBreak, imageInline, imageLink, imageAlt, imageDelete, imageCaption, imageSize, sourceCode, updateSource, toolbarOpen, beforeDropDownOpen, selectionSave, selectionRestore, expandPopupClick, count, contentFocus, contentBlur, mouseDown, sourceCodeMouseDown, editAreaClick, scroll, contentscroll, colorPickerChanged, tableColorPickerChanged, focusChange, selectAll$1 as selectAll, selectRange, getSelectedHtml, renderInlineToolbar, paste, imgModule, rtlMode, createTable, docClick, tableToolbarAction, checkUndo, readOnlyMode, pasteClean, enterHandler, beforeDialogOpen, clearDialogObj, dialogOpen, beforeDialogClose, dialogClose, beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose, popupHide, imageSelected, imageUploading, imageUploadSuccess, imageUploadFailed, imageRemoving, afterImageDelete, drop, xhtmlValidation, beforeImageUpload, resizeInitialized, renderFileManager, beforeImageDrop, dynamicModule, beforePasteCleanup, afterPasteCleanup, updateTbItemsStatus, showLinkDialog, closeLinkDialog, showImageDialog, closeImageDialog, showTableDialog, closeTableDialog, CLS_RTE, CLS_RTL, CLS_CONTENT, CLS_DISABLED, CLS_SCRIPT_SHEET, CLS_STYLE_SHEET, CLS_TOOLBAR, CLS_TB_FIXED, CLS_TB_FLOAT, CLS_TB_ABS_FLOAT, CLS_INLINE, CLS_TB_INLINE, CLS_RTE_EXPAND_TB, CLS_FULL_SCREEN, CLS_QUICK_TB, CLS_POP, CLS_TB_STATIC, CLS_QUICK_POP, CLS_QUICK_DROPDOWN, CLS_IMAGE_POP, CLS_INLINE_POP, CLS_INLINE_DROPDOWN, CLS_DROPDOWN_POPUP, CLS_DROPDOWN_ICONS, CLS_DROPDOWN_ITEMS, CLS_DROPDOWN_BTN, CLS_RTE_CONTENT, CLS_TB_ITEM, CLS_TB_EXTENDED, CLS_TB_WRAP, CLS_POPUP, CLS_SEPARATOR, CLS_MINIMIZE, CLS_MAXIMIZE, CLS_BACK, CLS_SHOW, CLS_HIDE, CLS_VISIBLE, CLS_FOCUS, CLS_RM_WHITE_SPACE, CLS_IMGRIGHT, CLS_IMGLEFT, CLS_IMGCENTER, CLS_IMGBREAK, CLS_CAPTION, CLS_RTE_CAPTION, CLS_CAPINLINE, CLS_IMGINLINE, CLS_COUNT, CLS_WARNING, CLS_ERROR, CLS_ICONS, CLS_ACTIVE, CLS_EXPAND_OPEN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_HR_SEPARATOR, CLS_TB_IOS_FIX, CLS_LIST_PRIMARY_CONTENT, CLS_NUMBERFORMATLIST_TB_BTN, CLS_BULLETFORMATLIST_TB_BTN, CLS_FORMATS_TB_BTN, CLS_FONT_NAME_TB_BTN, CLS_FONT_SIZE_TB_BTN, CLS_ALIGN_TB_BTN, CLS_FONT_COLOR_TARGET, CLS_BACKGROUND_COLOR_TARGET, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_RTE_READONLY, CLS_TABLE_SEL, CLS_TB_DASH_BOR, CLS_TB_ALT_BOR, CLS_TB_COL_RES, CLS_TB_ROW_RES, CLS_TB_BOX_RES, CLS_RTE_HIDDEN, CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT, CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT, CLS_RTE_RES_HANDLE, CLS_RTE_RES_EAST, CLS_RTE_IMAGE, CLS_RESIZE, CLS_IMG_FOCUS, CLS_RTE_DRAG_IMAGE, CLS_RTE_UPLOAD_POPUP, CLS_POPUP_OPEN, CLS_IMG_RESIZE, CLS_DROPAREA, CLS_IMG_INNER, CLS_UPLOAD_FILES, CLS_RTE_DIALOG_UPLOAD, CLS_RTE_RES_CNT, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_TABLE, CLS_TABLE_BORDER, CLS_RTE_TABLE_RESIZE, CLS_RTE_FIXED_TB_EXPAND, CLS_RTE_TB_ENABLED, getIndex, hasClass, getDropDownValue, isIDevice, getFormattedFontSize, pageYOffset, getTooltipText, setToolbarStatus, getCollection, getTBarItemsIndex, updateUndoRedoStatus, dispatchEvent, parseHtml, getTextNodesUnder, toObjectLowerCase, getEditValue, updateTextNode, getDefaultValue, isEditableValueEmpty, decode, sanitizeHelper, convertToBlob, getLocaleFontFormat, updateDropDownFontFormatLocale, ServiceLocator, RendererFactory, EditorManager, IMAGE, TABLE, LINK, INSERT_ROW, INSERT_COLUMN, DELETEROW, DELETECOLUMN, REMOVETABLE, TABLEHEADER, TABLE_VERTICAL_ALIGN, TABLE_MERGE, TABLE_VERTICAL_SPLIT, TABLE_HORIZONTAL_SPLIT, TABLE_MOVE, ALIGNMENT_TYPE, INDENT_TYPE, DEFAULT_TAG, BLOCK_TAGS, IGNORE_BLOCK_TAGS, TABLE_BLOCK_TAGS, SELECTION_TYPE, INSERTHTML_TYPE, INSERT_TEXT_TYPE, CLEAR_TYPE, SELF_CLOSING_TAGS, CLASS_IMAGE_RIGHT, CLASS_IMAGE_LEFT, CLASS_IMAGE_CENTER, CLASS_IMAGE_BREAK, CLASS_CAPTION, CLASS_RTE_CAPTION, CLASS_CAPTION_INLINE, CLASS_IMAGE_INLINE, Lists, markerClassName, DOMNode, Alignments, Indents, Formats, LinkCommand, InsertMethods, InsertTextExec, InsertHtmlExec, InsertHtml, IsFormatted, MsWordPaste, NodeCutter, ImageCommand, SelectionCommands, SelectionBasedExec, ClearFormatExec, UndoRedoManager, TableCommand, statusCollection, ToolbarStatus, NodeSelection, MarkdownParser, LISTS_COMMAND, selectionCommand, LINK_COMMAND, CLEAR_COMMAND, MD_TABLE, ClearFormat, MDLists, MDFormats, MarkdownSelection, UndoRedoCommands, MDSelectionFormats, MDLink, MDTable, markdownFormatTags, markdownSelectionTags, markdownListsTags, htmlKeyConfig, markdownKeyConfig, pasteCleanupGroupingTags, listConversionFilters, selfClosingTags, KEY_DOWN, ACTION, FORMAT_TYPE, KEY_DOWN_HANDLER, LIST_TYPE, KEY_UP_HANDLER, KEY_UP, MODEL_CHANGED_PLUGIN, MODEL_CHANGED, MS_WORD_CLEANUP_PLUGIN, MS_WORD_CLEANUP, ON_BEGIN, SPACE_ACTION };
27330
+ export { Toolbar$2 as Toolbar, KeyboardEvents$1 as KeyboardEvents, BaseToolbar, BaseQuickToolbar, QuickToolbar, Count, ColorPickerInput, MarkdownToolbarStatus, ExecCommandCallBack, ToolbarAction, MarkdownEditor, HtmlEditor, PasteCleanup, Resize, DropDownButtons, FileManager$1 as FileManager, FullScreen, setAttributes, HtmlToolbarStatus, XhtmlValidation, HTMLFormatter, Formatter, MarkdownFormatter, ContentRender, Render, ToolbarRenderer, Link, Image, ViewSource, Table, DialogRenderer, IframeContentRender, MarkdownRender, PopupRenderer, RichTextEditor, RenderType, ToolbarType, DialogType, executeGroup, created, destroyed, load, initialLoad, contentChanged, initialEnd, iframeMouseDown, destroy, toolbarClick, toolbarRefresh, refreshBegin, toolbarUpdated, bindOnEnd, renderColorPicker, htmlToolbarClick, markdownToolbarClick, destroyColorPicker, modelChanged, keyUp, keyDown, mouseUp, toolbarCreated, toolbarRenderComplete, enableFullScreen, disableFullScreen, dropDownSelect, beforeDropDownItemRender, execCommandCallBack, imageToolbarAction, linkToolbarAction, windowResize, resizeStart, onResize, resizeStop, undo, redo, insertLink, unLink, editLink, openLink, actionBegin, actionComplete, updatedToolbarStatus, actionSuccess, updateToolbarItem, insertImage, insertCompleted, imageLeft, imageRight, imageCenter, imageBreak, imageInline, imageLink, imageAlt, imageDelete, imageCaption, imageSize, sourceCode, updateSource, toolbarOpen, beforeDropDownOpen, selectionSave, selectionRestore, expandPopupClick, count, contentFocus, contentBlur, mouseDown, sourceCodeMouseDown, editAreaClick, scroll, contentscroll, colorPickerChanged, tableColorPickerChanged, focusChange, selectAll$1 as selectAll, selectRange, getSelectedHtml, renderInlineToolbar, paste, imgModule, rtlMode, createTable, docClick, tableToolbarAction, checkUndo, readOnlyMode, pasteClean, enterHandler, beforeDialogOpen, clearDialogObj, dialogOpen, beforeDialogClose, dialogClose, beforeQuickToolbarOpen, quickToolbarOpen, quickToolbarClose, popupHide, imageSelected, imageUploading, imageUploadSuccess, imageUploadFailed, imageRemoving, afterImageDelete, drop, xhtmlValidation, beforeImageUpload, resizeInitialized, renderFileManager, beforeImageDrop, dynamicModule, beforePasteCleanup, afterPasteCleanup, updateTbItemsStatus, showLinkDialog, closeLinkDialog, showImageDialog, closeImageDialog, showTableDialog, closeTableDialog, bindCssClass, blockInlineEmptyNodes, CLS_RTE, CLS_RTL, CLS_CONTENT, CLS_DISABLED, CLS_SCRIPT_SHEET, CLS_STYLE_SHEET, CLS_TOOLBAR, CLS_TB_FIXED, CLS_TB_FLOAT, CLS_TB_ABS_FLOAT, CLS_INLINE, CLS_TB_INLINE, CLS_RTE_EXPAND_TB, CLS_FULL_SCREEN, CLS_QUICK_TB, CLS_POP, CLS_TB_STATIC, CLS_QUICK_POP, CLS_QUICK_DROPDOWN, CLS_IMAGE_POP, CLS_INLINE_POP, CLS_INLINE_DROPDOWN, CLS_DROPDOWN_POPUP, CLS_DROPDOWN_ICONS, CLS_DROPDOWN_ITEMS, CLS_DROPDOWN_BTN, CLS_RTE_CONTENT, CLS_TB_ITEM, CLS_TB_EXTENDED, CLS_TB_WRAP, CLS_POPUP, CLS_SEPARATOR, CLS_MINIMIZE, CLS_MAXIMIZE, CLS_BACK, CLS_SHOW, CLS_HIDE, CLS_VISIBLE, CLS_FOCUS, CLS_RM_WHITE_SPACE, CLS_IMGRIGHT, CLS_IMGLEFT, CLS_IMGCENTER, CLS_IMGBREAK, CLS_CAPTION, CLS_RTE_CAPTION, CLS_CAPINLINE, CLS_IMGINLINE, CLS_COUNT, CLS_WARNING, CLS_ERROR, CLS_ICONS, CLS_ACTIVE, CLS_EXPAND_OPEN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_HR_SEPARATOR, CLS_TB_IOS_FIX, CLS_LIST_PRIMARY_CONTENT, CLS_NUMBERFORMATLIST_TB_BTN, CLS_BULLETFORMATLIST_TB_BTN, CLS_FORMATS_TB_BTN, CLS_FONT_NAME_TB_BTN, CLS_FONT_SIZE_TB_BTN, CLS_ALIGN_TB_BTN, CLS_FONT_COLOR_TARGET, CLS_BACKGROUND_COLOR_TARGET, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_RTE_READONLY, CLS_TABLE_SEL, CLS_TB_DASH_BOR, CLS_TB_ALT_BOR, CLS_TB_COL_RES, CLS_TB_ROW_RES, CLS_TB_BOX_RES, CLS_RTE_HIDDEN, CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT, CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT, CLS_RTE_RES_HANDLE, CLS_RTE_RES_EAST, CLS_RTE_IMAGE, CLS_RESIZE, CLS_IMG_FOCUS, CLS_RTE_DRAG_IMAGE, CLS_RTE_UPLOAD_POPUP, CLS_POPUP_OPEN, CLS_IMG_RESIZE, CLS_DROPAREA, CLS_IMG_INNER, CLS_UPLOAD_FILES, CLS_RTE_DIALOG_UPLOAD, CLS_RTE_RES_CNT, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_TABLE, CLS_TABLE_BORDER, CLS_RTE_TABLE_RESIZE, CLS_RTE_FIXED_TB_EXPAND, CLS_RTE_TB_ENABLED, getIndex, hasClass, getDropDownValue, isIDevice, getFormattedFontSize, pageYOffset, getTooltipText, setToolbarStatus, getCollection, getTBarItemsIndex, updateUndoRedoStatus, dispatchEvent, parseHtml, getTextNodesUnder, toObjectLowerCase, getEditValue, updateTextNode, getDefaultValue, isEditableValueEmpty, decode, sanitizeHelper, convertToBlob, getLocaleFontFormat, updateDropDownFontFormatLocale, ServiceLocator, RendererFactory, EditorManager, IMAGE, TABLE, LINK, INSERT_ROW, INSERT_COLUMN, DELETEROW, DELETECOLUMN, REMOVETABLE, TABLEHEADER, TABLE_VERTICAL_ALIGN, TABLE_MERGE, TABLE_VERTICAL_SPLIT, TABLE_HORIZONTAL_SPLIT, TABLE_MOVE, ALIGNMENT_TYPE, INDENT_TYPE, DEFAULT_TAG, BLOCK_TAGS, IGNORE_BLOCK_TAGS, TABLE_BLOCK_TAGS, SELECTION_TYPE, INSERTHTML_TYPE, INSERT_TEXT_TYPE, CLEAR_TYPE, SELF_CLOSING_TAGS, CLASS_IMAGE_RIGHT, CLASS_IMAGE_LEFT, CLASS_IMAGE_CENTER, CLASS_IMAGE_BREAK, CLASS_CAPTION, CLASS_RTE_CAPTION, CLASS_CAPTION_INLINE, CLASS_IMAGE_INLINE, Lists, markerClassName, DOMNode, Alignments, Indents, Formats, LinkCommand, InsertMethods, InsertTextExec, InsertHtmlExec, InsertHtml, IsFormatted, MsWordPaste, NodeCutter, ImageCommand, SelectionCommands, SelectionBasedExec, ClearFormatExec, UndoRedoManager, TableCommand, statusCollection, ToolbarStatus, NodeSelection, MarkdownParser, LISTS_COMMAND, selectionCommand, LINK_COMMAND, CLEAR_COMMAND, MD_TABLE, ClearFormat, MDLists, MDFormats, MarkdownSelection, UndoRedoCommands, MDSelectionFormats, MDLink, MDTable, markdownFormatTags, markdownSelectionTags, markdownListsTags, htmlKeyConfig, markdownKeyConfig, pasteCleanupGroupingTags, listConversionFilters, selfClosingTags, KEY_DOWN, ACTION, FORMAT_TYPE, KEY_DOWN_HANDLER, LIST_TYPE, KEY_UP_HANDLER, KEY_UP, MODEL_CHANGED_PLUGIN, MODEL_CHANGED, MS_WORD_CLEANUP_PLUGIN, MS_WORD_CLEANUP, ON_BEGIN, SPACE_ACTION };
26943
27331
  //# sourceMappingURL=ej2-richtexteditor.es2015.js.map