@syncfusion/ej2-richtexteditor 19.3.53 → 19.4.40

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 (38) hide show
  1. package/.github/PULL_REQUEST_TEMPLATE/Bug.md +41 -0
  2. package/.github/PULL_REQUEST_TEMPLATE/Feature.md +27 -0
  3. package/CHANGELOG.md +26 -0
  4. package/README.md +1 -1
  5. package/dist/ej2-richtexteditor.umd.min.js +2 -2
  6. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  7. package/dist/es6/ej2-richtexteditor.es2015.js +200 -74
  8. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  9. package/dist/es6/ej2-richtexteditor.es5.js +199 -73
  10. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  11. package/dist/global/ej2-richtexteditor.min.js +2 -2
  12. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  13. package/dist/global/index.d.ts +1 -1
  14. package/package.json +12 -12
  15. package/src/editor-manager/plugin/inserthtml.js +9 -1
  16. package/src/editor-manager/plugin/lists.js +2 -1
  17. package/src/editor-manager/plugin/ms-word-clean-up.js +1 -1
  18. package/src/editor-manager/plugin/selection-commands.js +10 -5
  19. package/src/editor-manager/plugin/undo.js +10 -1
  20. package/src/rich-text-editor/actions/color-picker.d.ts +1 -0
  21. package/src/rich-text-editor/actions/color-picker.js +2 -1
  22. package/src/rich-text-editor/actions/dropdown-buttons.js +0 -10
  23. package/src/rich-text-editor/actions/enter-key.d.ts +1 -0
  24. package/src/rich-text-editor/actions/enter-key.js +85 -34
  25. package/src/rich-text-editor/actions/html-editor.js +2 -2
  26. package/src/rich-text-editor/actions/quick-toolbar.d.ts +1 -0
  27. package/src/rich-text-editor/actions/quick-toolbar.js +16 -1
  28. package/src/rich-text-editor/actions/xhtml-validation.js +1 -1
  29. package/src/rich-text-editor/base/interface.d.ts +3 -1
  30. package/src/rich-text-editor/base/rich-text-editor.js +1 -1
  31. package/src/rich-text-editor/formatter/formatter.js +3 -3
  32. package/src/rich-text-editor/renderer/image-module.js +52 -7
  33. package/src/rich-text-editor/renderer/toolbar-renderer.d.ts +1 -1
  34. package/src/rich-text-editor/renderer/toolbar-renderer.js +3 -2
  35. package/src/selection/selection.js +2 -1
  36. package/styles/rich-text-editor/_fluent-definition.scss +168 -0
  37. package/styles/rich-text-editor/_layout.scss +1 -1
  38. package/styles/rich-text-editor/icons/_fluent.scss +303 -0
@@ -2965,7 +2965,7 @@ class ToolbarRenderer {
2965
2965
  * @hidden
2966
2966
  * @deprecated
2967
2967
  */
2968
- renderColorPickerDropDown(args, item, colorPicker) {
2968
+ renderColorPickerDropDown(args, item, colorPicker, defaultColor) {
2969
2969
  // eslint-disable-next-line
2970
2970
  const proxy = this;
2971
2971
  let css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');
@@ -2973,8 +2973,9 @@ class ToolbarRenderer {
2973
2973
  const content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });
2974
2974
  const inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
2975
2975
  let range;
2976
+ let initialBackgroundColor = (isNullOrUndefined(defaultColor)) ? proxy.parent.backgroundColor.default : defaultColor;
2976
2977
  inlineEle.style.borderBottomColor = (item === 'backgroundcolor') ?
2977
- proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
2978
+ initialBackgroundColor : proxy.parent.fontColor.default;
2978
2979
  content.appendChild(inlineEle);
2979
2980
  const dropDown = new DropDownButton({
2980
2981
  target: colorPicker.element.parentElement, cssClass: css,
@@ -3592,11 +3593,6 @@ class DropDownButtons {
3592
3593
  for (const prop of Object.keys(newProp)) {
3593
3594
  switch (prop) {
3594
3595
  case 'fontFamily':
3595
- if (this.parent.inlineMode.enable) {
3596
- if (!isNullOrUndefined(this.parent.fontFamily.default)) {
3597
- this.getEditNode().style.fontFamily = this.parent.fontFamily.default;
3598
- }
3599
- }
3600
3596
  if (this.fontNameDropDown) {
3601
3597
  for (const fontFamily$$1 of Object.keys(newProp.fontFamily)) {
3602
3598
  switch (fontFamily$$1) {
@@ -3627,11 +3623,6 @@ class DropDownButtons {
3627
3623
  }
3628
3624
  break;
3629
3625
  case 'fontSize':
3630
- if (this.parent.inlineMode) {
3631
- if (!isNullOrUndefined(this.parent.fontSize.default)) {
3632
- this.getEditNode().style.fontSize = this.parent.fontSize.default;
3633
- }
3634
- }
3635
3626
  if (this.fontSizeDropDown) {
3636
3627
  for (const fontSize$$1 of Object.keys(newProp.fontSize)) {
3637
3628
  switch (fontSize$$1) {
@@ -4997,7 +4988,7 @@ class ColorPickerInput {
4997
4988
  target: (targetID)
4998
4989
  };
4999
4990
  this.backgroundColorPicker = this.toolbarRenderer.renderColorPicker(options, 'backgroundcolor');
5000
- this.backgroundColorDropDown = this.toolbarRenderer.renderColorPickerDropDown(options, 'backgroundcolor', this.backgroundColorPicker);
4991
+ this.backgroundColorDropDown = this.toolbarRenderer.renderColorPickerDropDown(options, 'backgroundcolor', this.backgroundColorPicker, this.defaultColorPicker);
5001
4992
  break;
5002
4993
  }
5003
4994
  }
@@ -5032,6 +5023,7 @@ class ColorPickerInput {
5032
5023
  if (this.backgroundColorDropDown && !this.backgroundColorDropDown.isDestroyed) {
5033
5024
  const innerEle = this.backgroundColorDropDown.element.querySelector('.e-rte-color-content');
5034
5025
  if (innerEle) {
5026
+ this.defaultColorPicker = innerEle.children[0].style.borderBottomColor;
5035
5027
  detach(innerEle);
5036
5028
  }
5037
5029
  this.backgroundColorDropDown.destroy();
@@ -5660,6 +5652,11 @@ class QuickToolbar {
5660
5652
  this.parent.isBlur = false;
5661
5653
  this.parent.isRTE = true;
5662
5654
  }
5655
+ keyUpQT(e) {
5656
+ if (e.which == 27) {
5657
+ this.hideQuickToolbars();
5658
+ }
5659
+ }
5663
5660
  renderQuickToolbars() {
5664
5661
  if (this.linkQTBar || this.imageQTBar || this.textQTBar || this.tableQTBar) {
5665
5662
  return;
@@ -5674,15 +5671,19 @@ class QuickToolbar {
5674
5671
  this.renderFactory.addRenderer(RenderType.TableToolbar, this.tableQTBar);
5675
5672
  if (this.linkQTBar) {
5676
5673
  EventHandler.add(this.linkQTBar.element, 'mousedown', this.onMouseDown, this);
5674
+ EventHandler.add(this.linkQTBar.element, 'keyup', this.keyUpQT, this);
5677
5675
  }
5678
5676
  if (this.imageQTBar) {
5679
5677
  EventHandler.add(this.imageQTBar.element, 'mousedown', this.onMouseDown, this);
5678
+ EventHandler.add(this.imageQTBar.element, 'keyup', this.keyUpQT, this);
5680
5679
  }
5681
5680
  if (this.textQTBar) {
5682
5681
  EventHandler.add(this.textQTBar.element, 'mousedown', this.onMouseDown, this);
5682
+ EventHandler.add(this.textQTBar.element, 'keyup', this.keyUpQT, this);
5683
5683
  }
5684
5684
  if (this.tableQTBar) {
5685
5685
  EventHandler.add(this.tableQTBar.element, 'mousedown', this.onMouseDown, this);
5686
+ EventHandler.add(this.tableQTBar.element, 'keyup', this.keyUpQT, this);
5686
5687
  }
5687
5688
  }
5688
5689
  renderInlineQuickToolbar() {
@@ -5691,6 +5692,7 @@ class QuickToolbar {
5691
5692
  this.inlineQTBar = this.createQTBar('Inline', 'MultiRow', this.parent.toolbarSettings.items, RenderType.InlineToolbar);
5692
5693
  this.renderFactory.addRenderer(RenderType.InlineToolbar, this.inlineQTBar);
5693
5694
  EventHandler.add(this.inlineQTBar.element, 'mousedown', this.onMouseDown, this);
5695
+ EventHandler.add(this.inlineQTBar.element, 'keyup', this.keyUpQT, this);
5694
5696
  }
5695
5697
  }
5696
5698
  /**
@@ -5704,7 +5706,7 @@ class QuickToolbar {
5704
5706
  * @deprecated
5705
5707
  */
5706
5708
  showInlineQTBar(x, y, target) {
5707
- if (this.parent.readonly) {
5709
+ if (this.parent.readonly || target.tagName.toLowerCase() === "img") {
5708
5710
  return;
5709
5711
  }
5710
5712
  this.inlineQTBar.showPopup(x, y, target);
@@ -5843,22 +5845,27 @@ class QuickToolbar {
5843
5845
  destroy() {
5844
5846
  if (this.linkQTBar) {
5845
5847
  EventHandler.remove(this.linkQTBar.element, 'mousedown', this.onMouseDown);
5848
+ EventHandler.remove(this.linkQTBar.element, 'keyup', this.keyUpQT);
5846
5849
  this.linkQTBar.destroy();
5847
5850
  }
5848
5851
  if (this.textQTBar) {
5849
5852
  EventHandler.remove(this.textQTBar.element, 'mousedown', this.onMouseDown);
5853
+ EventHandler.remove(this.textQTBar.element, 'keyup', this.keyUpQT);
5850
5854
  this.textQTBar.destroy();
5851
5855
  }
5852
5856
  if (this.imageQTBar) {
5853
5857
  EventHandler.remove(this.imageQTBar.element, 'mousedown', this.onMouseDown);
5858
+ EventHandler.remove(this.imageQTBar.element, 'keyup', this.keyUpQT);
5854
5859
  this.imageQTBar.destroy();
5855
5860
  }
5856
5861
  if (this.tableQTBar) {
5857
5862
  EventHandler.remove(this.tableQTBar.element, 'mousedown', this.onMouseDown);
5863
+ EventHandler.remove(this.tableQTBar.element, 'keyup', this.keyUpQT);
5858
5864
  this.tableQTBar.destroy();
5859
5865
  }
5860
5866
  if (this.inlineQTBar) {
5861
5867
  EventHandler.remove(this.inlineQTBar.element, 'mousedown', this.onMouseDown);
5868
+ EventHandler.remove(this.inlineQTBar.element, 'keyup', this.keyUpQT);
5862
5869
  if (isIDevice()) {
5863
5870
  EventHandler.remove(document, 'selectionchange', this.selectionChangeHandler);
5864
5871
  }
@@ -6838,7 +6845,7 @@ class Formatter {
6838
6845
  || ((args.item.subCommand === 'FontName' || args.item.subCommand === 'FontSize') && args.name === 'dropDownSelect')
6839
6846
  || ((args.item.subCommand === 'BackgroundColor' || args.item.subCommand === 'FontColor')
6840
6847
  && args.name === 'colorPickerChanged'))) {
6841
- extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value }, true);
6848
+ extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value, selectType: args.name }, true);
6842
6849
  self.trigger(actionBegin, args, (actionBeginArgs) => {
6843
6850
  if (!actionBeginArgs.cancel) {
6844
6851
  if (this.getUndoRedoStack().length === 0 && actionBeginArgs.item.command !== 'Links'
@@ -6856,8 +6863,8 @@ class Formatter {
6856
6863
  }
6857
6864
  else {
6858
6865
  this.editorManager.observer.notify(checkUndo, { subCommand: actionBeginArgs.item.subCommand });
6859
- this.editorManager.execCommand(actionBeginArgs.item.command, actionBeginArgs.item.subCommand, event, this.onSuccess.bind(this, self), actionBeginArgs.item.value, actionBeginArgs.item.subCommand === 'Pre' && args.name === 'dropDownSelect' ?
6860
- { name: args.name } : value, ('#' + self.getID() + ' iframe'), self.enterKey);
6866
+ this.editorManager.execCommand(actionBeginArgs.item.command, actionBeginArgs.item.subCommand, event, this.onSuccess.bind(this, self), actionBeginArgs.item.value, actionBeginArgs.item.subCommand === 'Pre' && actionBeginArgs.selectType === 'dropDownSelect' ?
6867
+ { name: actionBeginArgs.selectType } : value, ('#' + self.getID() + ' iframe'), self.enterKey);
6861
6868
  }
6862
6869
  }
6863
6870
  });
@@ -9328,7 +9335,8 @@ class NodeSelection {
9328
9335
  || range.startContainer;
9329
9336
  const endNode = range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset]
9330
9337
  || range.endContainer;
9331
- if (startNode === endNode && startNode.childNodes.length === 0) {
9338
+ if ((startNode === endNode || (startNode.nodeName === 'BR' && startNode === range.endContainer.childNodes[range.endOffset])) &&
9339
+ startNode.childNodes.length === 0) {
9332
9340
  return [startNode];
9333
9341
  }
9334
9342
  if (range.startOffset === range.endOffset && range.startOffset !== 0 && range.startContainer.nodeName === 'PRE') {
@@ -10460,8 +10468,9 @@ class Lists {
10460
10468
  testCurrentList(range) {
10461
10469
  const olListStartRegex = [/^[1]+[.]+$/, /^[i]+[.]+$/, /^[a]+[.]+$/];
10462
10470
  if (!isNullOrUndefined(range.startContainer.textContent.slice(0, range.startOffset))) {
10471
+ const currentContent = range.startContainer.textContent.replace(/\u200B/g, '').slice(0, range.startOffset).trim();
10463
10472
  for (let i = 0; i < olListStartRegex.length; i++) {
10464
- if (olListStartRegex[i].test(range.startContainer.textContent.replace(/\u200B/g, '').slice(0, range.startOffset).trim())) {
10473
+ if (olListStartRegex[i].test(currentContent) && currentContent.length === 2) {
10465
10474
  return true;
10466
10475
  }
10467
10476
  }
@@ -12182,7 +12191,15 @@ class InsertHtml {
12182
12191
  tempSpan.parentNode.replaceChild(node, tempSpan);
12183
12192
  }
12184
12193
  else {
12185
- const splitedElm = nodeCutter.GetSpliceNode(range, blockNode);
12194
+ let currentNode = nodes[nodes.length - 1];
12195
+ let splitedElm;
12196
+ if ((currentNode.nodeName === 'BR' || currentNode.nodeName === 'HR') && !isNullOrUndefined(currentNode.parentElement) &&
12197
+ currentNode.parentElement.textContent.trim().length === 0 && !node.classList.contains('pasteContent')) {
12198
+ splitedElm = currentNode;
12199
+ }
12200
+ else {
12201
+ splitedElm = nodeCutter.GetSpliceNode(range, blockNode);
12202
+ }
12186
12203
  splitedElm.parentNode.replaceChild(node, splitedElm);
12187
12204
  }
12188
12205
  }
@@ -14471,6 +14488,9 @@ class SelectionCommands {
14471
14488
  }
14472
14489
  static removeFormat(nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domSelection, endNode, domNode) {
14473
14490
  let splitNode = null;
14491
+ let startText = range.startContainer.nodeName === '#text' ?
14492
+ range.startContainer.textContent.substring(range.startOffset, range.startContainer.textContent.length) :
14493
+ range.startContainer.textContent;
14474
14494
  if (!(range.startContainer === range.endContainer && range.startOffset === 0
14475
14495
  && range.endOffset === range.startContainer.length)) {
14476
14496
  const nodeIndex = [];
@@ -14570,11 +14590,13 @@ class SelectionCommands {
14570
14590
  for (let num = 0; num < child.length; num++) {
14571
14591
  if (child[num].nodeType !== 3 || (child[num].textContent && child[num].textContent.trim().length > 0)) {
14572
14592
  child[num] = InsertMethods.Wrap(child[num], this.GetFormatNode(format, value, formatNodeTagName, formatNodeStyles));
14573
- if (num === 0) {
14574
- range.setStartBefore(child[num]);
14575
- }
14576
- else if (num === child.length - 1) {
14577
- range.setEndAfter(child[num]);
14593
+ if (child[num].textContent === startText) {
14594
+ if (num === 0) {
14595
+ range.setStartBefore(child[num]);
14596
+ }
14597
+ else if (num === child.length - 1) {
14598
+ range.setEndAfter(child[num]);
14599
+ }
14578
14600
  }
14579
14601
  }
14580
14602
  }
@@ -15246,7 +15268,16 @@ class UndoRedoManager {
15246
15268
  * @deprecated
15247
15269
  */
15248
15270
  saveData(e) {
15249
- const range = new NodeSelection().getRange(this.parent.currentDocument);
15271
+ let range = new NodeSelection().getRange(this.parent.currentDocument);
15272
+ let currentContainer = range.startContainer;
15273
+ for (let i = currentContainer.childNodes.length - 1; i >= 0; i--) {
15274
+ if (!isNullOrUndefined(currentContainer.childNodes[i]) && currentContainer.childNodes[i].nodeName === '#text' &&
15275
+ currentContainer.childNodes[i].textContent.length === 0 && currentContainer.childNodes[i].nodeName !== 'IMG' &&
15276
+ currentContainer.childNodes[i].nodeName !== 'BR' && currentContainer.childNodes[i].nodeName && 'HR') {
15277
+ detach(currentContainer.childNodes[i]);
15278
+ }
15279
+ }
15280
+ range = new NodeSelection().getRange(this.parent.currentDocument);
15250
15281
  const save = new NodeSelection().save(range, this.parent.currentDocument);
15251
15282
  const htmlText = this.parent.editableElement.innerHTML;
15252
15283
  const changEle = { text: htmlText, range: save };
@@ -15396,7 +15427,7 @@ class MsWordPaste {
15396
15427
  this.parent.observer.on(MS_WORD_CLEANUP_PLUGIN, this.wordCleanup, this);
15397
15428
  }
15398
15429
  wordCleanup(e) {
15399
- const wordPasteStyleConfig = e.allowedStylePropertiesArray;
15430
+ const wordPasteStyleConfig = !isNullOrUndefined(e.allowedStylePropertiesArray) ? e.allowedStylePropertiesArray : [];
15400
15431
  let listNodes = [];
15401
15432
  let tempHTMLContent = e.args.clipboardData.getData('text/HTML');
15402
15433
  const rtfData = e.args.clipboardData.getData('text/rtf');
@@ -16915,7 +16946,7 @@ class XhtmlValidation {
16915
16946
  this.ImageTags();
16916
16947
  this.removeTags();
16917
16948
  this.RemoveUnsupported();
16918
- this.currentElement.innerHTML = this.selfEncloseValidation(this.currentElement.innerHTML, this.currentElement.innerText === '\n' ?
16949
+ this.currentElement.innerHTML = this.selfEncloseValidation(this.currentElement.innerHTML, this.currentElement.innerText === "\n" ?
16919
16950
  this.currentElement.innerText.length : this.currentElement.innerText.trim().length);
16920
16951
  this.parent.setProperties({ value: this.currentElement.innerHTML }, true);
16921
16952
  }
@@ -17199,7 +17230,7 @@ class HtmlEditor {
17199
17230
  e.args.action === 'enter' ||
17200
17231
  e.args.keyCode === 13) {
17201
17232
  this.spaceLink(e.args);
17202
- if (this.parent.editorMode === 'HTML' && !((this.parent.shiftEnterKey === 'BR' && e.args.shiftKey))) {
17233
+ if (this.parent.editorMode === 'HTML' && !this.parent.readonly) {
17203
17234
  this.parent.notify(enterHandler, { args: e.args });
17204
17235
  }
17205
17236
  }
@@ -17476,7 +17507,7 @@ class HtmlEditor {
17476
17507
  const divElement = this.parent.createElement('div');
17477
17508
  divElement.setAttribute('class', 'pasteContent');
17478
17509
  divElement.style.display = 'inline';
17479
- divElement.innerHTML = contentInnerElem;
17510
+ divElement.innerHTML = contentInnerElem.replace('&para', '&amp;para');
17480
17511
  const paraElem = divElement.querySelectorAll('span, p');
17481
17512
  for (let i = 0; i < paraElem.length; i++) {
17482
17513
  const splitTextContent = paraElem[i].innerHTML.split(' ');
@@ -20076,7 +20107,7 @@ class Image {
20076
20107
  left: elem.offsetLeft
20077
20108
  };
20078
20109
  }
20079
- setAspectRatio(img, expectedX, expectedY) {
20110
+ setAspectRatio(img, expectedX, expectedY, e) {
20080
20111
  if (isNullOrUndefined(img.width)) {
20081
20112
  return;
20082
20113
  }
@@ -20100,10 +20131,14 @@ class Image {
20100
20131
  img.style.height = expectedY + 'px';
20101
20132
  }
20102
20133
  else if (img.style.width !== '' && img.style.height === '') {
20103
- img.style.width = ((width / height * expectedY) + width / height).toString() + 'px';
20134
+ let currentWidth = ((width / height * expectedY) + width / height) < (this.parent.inputElement.getBoundingClientRect().right - 32) ?
20135
+ ((width / height * expectedY) + width / height) : (this.parent.inputElement.getBoundingClientRect().right - 32);
20136
+ img.style.width = currentWidth.toString() + 'px';
20104
20137
  }
20105
20138
  else if (img.style.width !== '') {
20106
- img.style.width = (width / height * expectedY) + 'px';
20139
+ let currentWidth = (width / height * expectedY) < (this.parent.inputElement.getBoundingClientRect().right - 32) ?
20140
+ (width / height * expectedY) : (this.parent.inputElement.getBoundingClientRect().right - 32);
20141
+ img.style.width = currentWidth + 'px';
20107
20142
  img.style.height = expectedY + 'px';
20108
20143
  }
20109
20144
  else {
@@ -20126,7 +20161,7 @@ class Image {
20126
20161
  img.style.height = (height / width * expectedX) + 'px';
20127
20162
  }
20128
20163
  else {
20129
- img.setAttribute('width', expectedX.toString());
20164
+ img.setAttribute('width', this.resizeBtnStat.botRight ? (this.getPointX(e.event) - img.getBoundingClientRect().left).toString() : expectedX.toString());
20130
20165
  }
20131
20166
  }
20132
20167
  else {
@@ -20166,7 +20201,7 @@ class Image {
20166
20201
  return;
20167
20202
  }
20168
20203
  this.imgEle.parentElement.style.cursor = 'pointer';
20169
- this.setAspectRatio(this.imgEle, parseInt(width, 10), parseInt(height, 10));
20204
+ this.setAspectRatio(this.imgEle, parseInt(width, 10), parseInt(height, 10), args);
20170
20205
  this.resizeImgDupPos(this.imgEle);
20171
20206
  this.imgResizePos(this.imgEle, this.imgResizeDiv);
20172
20207
  this.parent.setContentHeight('', false);
@@ -20211,7 +20246,7 @@ class Image {
20211
20246
  }
20212
20247
  resizeImgDupPos(e) {
20213
20248
  this.imgDupPos = {
20214
- width: (e.style.height !== '') ? this.imgEle.style.width : e.width + 'px',
20249
+ width: (e.style.width !== '') ? this.imgEle.style.width : e.width + 'px',
20215
20250
  height: (e.style.height !== '') ? this.imgEle.style.height : e.height + 'px'
20216
20251
  };
20217
20252
  }
@@ -20379,6 +20414,27 @@ class Image {
20379
20414
  const src = this.deletedImg[i].src;
20380
20415
  this.imageRemovePost(src);
20381
20416
  }
20417
+ if (range.startContainer.nodeType === 3) {
20418
+ if (originalEvent.code === 'Backspace') {
20419
+ if (range.startContainer.previousElementSibling && range.startOffset === 0 &&
20420
+ range.startContainer.previousElementSibling.classList.contains(CLS_CAPTION) &&
20421
+ range.startContainer.previousElementSibling.classList.contains(CLS_CAPINLINE)) {
20422
+ detach(range.startContainer.previousElementSibling);
20423
+ }
20424
+ }
20425
+ else {
20426
+ if (range.startContainer.nextElementSibling &&
20427
+ range.endContainer.textContent.length === range.endOffset &&
20428
+ range.startContainer.nextElementSibling.classList.contains(CLS_CAPTION) &&
20429
+ range.startContainer.nextElementSibling.classList.contains(CLS_CAPINLINE)) {
20430
+ detach(range.startContainer.nextElementSibling);
20431
+ }
20432
+ }
20433
+ }
20434
+ else if ((range.startContainer.nodeType === 1 &&
20435
+ range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_CAPINLINE))) {
20436
+ detach(range.startContainer.querySelector('.' + CLS_CAPTION + '.' + CLS_CAPINLINE));
20437
+ }
20382
20438
  break;
20383
20439
  case 'insert-image':
20384
20440
  this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
@@ -20583,7 +20639,7 @@ class Image {
20583
20639
  const target = args.target;
20584
20640
  this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
20585
20641
  const isPopupOpen = this.quickToolObj.imageQTBar.element.classList.contains('e-rte-pop');
20586
- if (target.nodeName === 'IMG' && this.parent.quickToolbarModule && this.parent.getRange().startOffset === this.parent.getRange().endOffset) {
20642
+ if (target.nodeName === 'IMG' && this.parent.quickToolbarModule) {
20587
20643
  if (isPopupOpen) {
20588
20644
  return;
20589
20645
  }
@@ -20822,6 +20878,9 @@ class Image {
20822
20878
  imageRemovePost(src) {
20823
20879
  const proxy = this;
20824
20880
  let absoluteUrl = '';
20881
+ if (isNullOrUndefined(this.parent.insertImageSettings.removeUrl) || this.parent.insertImageSettings.removeUrl === '') {
20882
+ return;
20883
+ }
20825
20884
  if (src.indexOf('http://') > -1 || src.indexOf('https://') > -1) {
20826
20885
  absoluteUrl = src;
20827
20886
  }
@@ -21658,6 +21717,7 @@ class Image {
21658
21717
  imageTag.addEventListener('load', () => {
21659
21718
  this.parent.trigger(actionComplete, e);
21660
21719
  });
21720
+ detach(parentElement);
21661
21721
  }
21662
21722
  /**
21663
21723
  * Rendering uploader and popup for drag and drop
@@ -21692,6 +21752,9 @@ class Image {
21692
21752
  this.popupObj.destroy();
21693
21753
  detach(this.popupObj.element);
21694
21754
  this.popupObj = null;
21755
+ if (!this.parent.inlineMode.enable) {
21756
+ this.parent.toolbarModule.baseToolbar.toolbarObj.disable(false);
21757
+ }
21695
21758
  }
21696
21759
  });
21697
21760
  this.popupObj.element.style.display = 'none';
@@ -21723,6 +21786,10 @@ class Image {
21723
21786
  isUploading = false;
21724
21787
  detach(imageElement);
21725
21788
  this.popupObj.close();
21789
+ this.quickToolObj.imageQTBar.hidePopup();
21790
+ setTimeout(() => {
21791
+ this.uploadObj.destroy();
21792
+ }, 900);
21726
21793
  },
21727
21794
  beforeUpload: (args) => {
21728
21795
  if (this.parent.isServerRendered) {
@@ -21734,6 +21801,9 @@ class Image {
21734
21801
  if (beforeUploadArgs.cancel) {
21735
21802
  return;
21736
21803
  }
21804
+ if (!this.parent.inlineMode.enable) {
21805
+ this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);
21806
+ }
21737
21807
  /* eslint-disable */
21738
21808
  this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
21739
21809
  beforeUploadArgs.currentRequest : this.uploadObj.currentRequestHeader;
@@ -21746,6 +21816,9 @@ class Image {
21746
21816
  }
21747
21817
  else {
21748
21818
  this.parent.trigger(beforeImageUpload, args);
21819
+ if (!this.parent.inlineMode.enable) {
21820
+ this.parent.toolbarModule.baseToolbar.toolbarObj.disable(true);
21821
+ }
21749
21822
  }
21750
21823
  },
21751
21824
  uploading: (e) => {
@@ -21788,6 +21861,9 @@ class Image {
21788
21861
  }, 900);
21789
21862
  },
21790
21863
  success: (e) => {
21864
+ if (e.operation === "cancel") {
21865
+ return;
21866
+ }
21791
21867
  isUploading = false;
21792
21868
  this.parent.inputElement.contentEditable = 'true';
21793
21869
  const args = {
@@ -24027,9 +24103,20 @@ class EnterKeyAction {
24027
24103
  }
24028
24104
  enterHandler(e) {
24029
24105
  this.getRangeNode();
24106
+ let isTableEnter = true;
24107
+ if (!isNullOrUndefined(this.startNode.closest('TABLE')) && !isNullOrUndefined(this.endNode.closest('TABLE'))) {
24108
+ isTableEnter = false;
24109
+ let curElement = this.startNode;
24110
+ let blockElement = curElement;
24111
+ while (!this.parent.formatter.editorManager.domNode.isBlockNode(curElement)) {
24112
+ blockElement = curElement;
24113
+ curElement = curElement.parentElement;
24114
+ }
24115
+ isTableEnter = blockElement.tagName === 'TD' ? false : true;
24116
+ }
24030
24117
  if (e.args.which === 13 && e.args.code === 'Enter') {
24031
- if (isNullOrUndefined(this.startNode.closest('LI')) && isNullOrUndefined(this.endNode.closest('LI')) && isNullOrUndefined(this.startNode.closest('TABLE')) &&
24032
- isNullOrUndefined(this.endNode.closest('TABLE')) && isNullOrUndefined(this.startNode.closest('PRE')) && isNullOrUndefined(this.endNode.closest('PRE'))) {
24118
+ if (isNullOrUndefined(this.startNode.closest('LI')) && isNullOrUndefined(this.endNode.closest('LI')) && isTableEnter &&
24119
+ isNullOrUndefined(this.startNode.closest('PRE')) && isNullOrUndefined(this.endNode.closest('PRE'))) {
24033
24120
  const shiftKey = e.args.shiftKey;
24034
24121
  const actionBeginArgs = {
24035
24122
  cancel: false,
@@ -24087,12 +24174,32 @@ class EnterKeyAction {
24087
24174
  this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.range.startContainer.childNodes[this.range.startOffset], 0);
24088
24175
  this.getRangeNode();
24089
24176
  }
24090
- if (this.parent.enterKey === 'P' || this.parent.enterKey === 'DIV' ||
24177
+ if ((this.parent.enterKey === 'P' && !shiftKey) || (this.parent.enterKey === 'DIV' && !shiftKey) ||
24091
24178
  (this.parent.shiftEnterKey === 'P' && shiftKey) ||
24092
24179
  (this.parent.shiftEnterKey === 'DIV' && shiftKey)) {
24093
- const nearBlockNode = this.parent.formatter.editorManager.domNode.blockParentNode(this.startNode);
24180
+ let nearBlockNode;
24181
+ if (isTableEnter && this.parent.formatter.editorManager.domNode.isBlockNode(this.startNode)) {
24182
+ nearBlockNode = this.startNode;
24183
+ }
24184
+ else {
24185
+ nearBlockNode = this.parent.formatter.editorManager.domNode.blockParentNode(this.startNode);
24186
+ }
24094
24187
  let isImageNode = false;
24095
- if (this.range.startOffset === 0 && this.range.endOffset === 0 && !(!isNullOrUndefined(this.range.startContainer.previousSibling) && this.range.startContainer.previousSibling.nodeName === 'IMG')) {
24188
+ let isFocusedFirst = false;
24189
+ if (this.range.startOffset != 0 && this.range.endOffset != 0 && this.range.startContainer === this.range.endContainer &&
24190
+ !(!isNullOrUndefined(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
24191
+ let startNodeText = this.range.startContainer.textContent;
24192
+ let splitFirstText = startNodeText.substring(0, this.range.startOffset);
24193
+ if (splitFirstText.charCodeAt(this.range.startOffset - 1) != 160 && splitFirstText.trim().length === 0) {
24194
+ isFocusedFirst = true;
24195
+ }
24196
+ }
24197
+ else if (this.range.startOffset === 0 && this.range.endOffset === 0) {
24198
+ isFocusedFirst = true;
24199
+ }
24200
+ if (((this.range.startOffset === 0 && this.range.endOffset === 0) || isFocusedFirst) &&
24201
+ !(!isNullOrUndefined(this.range.startContainer.previousSibling) &&
24202
+ (this.range.startContainer.previousSibling.nodeName === 'IMG' || this.range.startContainer.previousSibling.nodeName === 'BR'))) {
24096
24203
  let isNearBlockLengthZero;
24097
24204
  let newElem;
24098
24205
  if (this.range.startContainer.nodeName === 'IMG') {
@@ -24101,7 +24208,7 @@ class EnterKeyAction {
24101
24208
  isNearBlockLengthZero = false;
24102
24209
  }
24103
24210
  else {
24104
- if (nearBlockNode.textContent.length !== 0) {
24211
+ if (nearBlockNode.textContent.trim().length !== 0) {
24105
24212
  newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, false).cloneNode(true);
24106
24213
  isNearBlockLengthZero = false;
24107
24214
  }
@@ -24150,7 +24257,18 @@ class EnterKeyAction {
24150
24257
  }
24151
24258
  if (newElem.textContent.trim().length === 0) {
24152
24259
  const brElm = this.parent.createElement('br');
24153
- this.startNode.appendChild(brElm);
24260
+ if (this.startNode.nodeName === 'A') {
24261
+ let startParentElem = this.startNode.parentElement;
24262
+ this.startNode.parentElement.insertBefore(brElm, this.startNode);
24263
+ detach(this.startNode);
24264
+ this.startNode = startParentElem;
24265
+ }
24266
+ else {
24267
+ this.startNode.appendChild(brElm);
24268
+ }
24269
+ if (newElem.childNodes[0].textContent === '\n') {
24270
+ detach(newElem.childNodes[0]);
24271
+ }
24154
24272
  this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.startNode, 0);
24155
24273
  }
24156
24274
  if (((this.parent.enterKey === 'P' || this.parent.enterKey === 'DIV') && !shiftKey) || ((this.parent.shiftEnterKey === 'DIV' ||
@@ -24161,12 +24279,13 @@ class EnterKeyAction {
24161
24279
  }
24162
24280
  this.parent.formatter.editorManager.domNode.insertAfter(insertElm, newElem);
24163
24281
  detach(newElem);
24164
- this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.parent.formatter.editorManager.domNode.isBlockNode(this.startNode) ? insertElm : this.startNode, 0);
24282
+ this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.parent.formatter.editorManager.domNode.isBlockNode(this.startNode) ?
24283
+ insertElm : this.startNode, 0);
24165
24284
  }
24166
24285
  }
24167
24286
  e.args.preventDefault();
24168
24287
  }
24169
- if (this.parent.enterKey === 'BR' && !shiftKey) {
24288
+ if ((this.parent.enterKey === 'BR' && !shiftKey) || (this.parent.shiftEnterKey === 'BR' && shiftKey)) {
24170
24289
  let currentParent;
24171
24290
  if (!this.parent.formatter.editorManager.domNode.isBlockNode(this.startNode)) {
24172
24291
  let currentNode = this.startNode;
@@ -24181,11 +24300,16 @@ class EnterKeyAction {
24181
24300
  else {
24182
24301
  currentParent = this.startNode;
24183
24302
  }
24184
- let isEmptyBrInserted = false;
24303
+ let currentParentLastChild = currentParent.lastChild;
24304
+ while (!isNullOrUndefined(currentParentLastChild) && !(currentParentLastChild.nodeName === '#text')) {
24305
+ currentParentLastChild = currentParentLastChild.lastChild;
24306
+ }
24307
+ const isLastNodeLength = this.range.startContainer === currentParentLastChild ?
24308
+ this.range.startContainer.textContent.length : currentParent.textContent.length;
24185
24309
  if (currentParent !== this.parent.inputElement &&
24186
24310
  this.parent.formatter.editorManager.domNode.isBlockNode(currentParent) &&
24187
24311
  this.range.startOffset === this.range.endOffset &&
24188
- this.range.startOffset === currentParent.textContent.length) {
24312
+ this.range.startOffset === isLastNodeLength) {
24189
24313
  const outerBRElem = this.parent.createElement('br');
24190
24314
  this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);
24191
24315
  this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), outerBRElem, 0);
@@ -24212,37 +24336,15 @@ class EnterKeyAction {
24212
24336
  currentFocusElem = currentFocusElem.lastChild;
24213
24337
  }
24214
24338
  this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), currentFocusElem, 0);
24215
- isEmptyBrInserted = true;
24339
+
24216
24340
  }
24217
24341
  else {
24218
- newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, currentParent, true);
24219
- newElem.parentElement.insertBefore(outerBRElem, newElem);
24220
- this.insertFocusContent();
24342
+ this.insertBRElement();
24221
24343
  }
24222
24344
  }
24223
24345
  }
24224
24346
  else {
24225
- const brElm = this.parent.createElement('br');
24226
- if (this.startNode.nodeName === 'BR' && this.endNode.nodeName === 'BR' && this.range.startOffset === 0 && this.range.startOffset === this.range.endOffset) {
24227
- this.parent.formatter.editorManager.domNode.insertAfter(brElm, this.startNode);
24228
- isEmptyBrInserted = true;
24229
- }
24230
- else {
24231
- if (this.startNode === this.parent.inputElement && !isNullOrUndefined(this.range.startContainer.previousSibling) &&
24232
- this.range.startContainer.previousSibling.nodeName === 'BR' && this.range.startContainer.textContent.length === 0) {
24233
- isEmptyBrInserted = true;
24234
- }
24235
- this.range.insertNode(brElm);
24236
- }
24237
- if (isEmptyBrInserted || (!isNullOrUndefined(brElm.nextElementSibling) && brElm.nextElementSibling.tagName === 'BR') || (!isNullOrUndefined(brElm.nextSibling) && brElm.nextSibling.textContent.length > 0)) {
24238
- this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), !isNullOrUndefined(brElm.nextSibling) ? brElm.nextSibling : brElm, 0);
24239
- isEmptyBrInserted = false;
24240
- }
24241
- else {
24242
- const brElm2 = this.parent.createElement('br');
24243
- this.range.insertNode(brElm2);
24244
- this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), brElm, 0);
24245
- }
24347
+ this.insertBRElement();
24246
24348
  }
24247
24349
  e.args.preventDefault();
24248
24350
  }
@@ -24252,6 +24354,30 @@ class EnterKeyAction {
24252
24354
  }
24253
24355
  }
24254
24356
  }
24357
+ insertBRElement() {
24358
+ let isEmptyBrInserted = false;
24359
+ const brElm = this.parent.createElement('br');
24360
+ if (this.startNode.nodeName === 'BR' && this.endNode.nodeName === 'BR' && this.range.startOffset === 0 && this.range.startOffset === this.range.endOffset) {
24361
+ this.parent.formatter.editorManager.domNode.insertAfter(brElm, this.startNode);
24362
+ isEmptyBrInserted = true;
24363
+ }
24364
+ else {
24365
+ if (this.startNode === this.parent.inputElement && !isNullOrUndefined(this.range.startContainer.previousSibling) &&
24366
+ this.range.startContainer.previousSibling.nodeName === 'BR' && this.range.startContainer.textContent.length === 0) {
24367
+ isEmptyBrInserted = true;
24368
+ }
24369
+ this.range.insertNode(brElm);
24370
+ }
24371
+ if (isEmptyBrInserted || (!isNullOrUndefined(brElm.nextElementSibling) && brElm.nextElementSibling.tagName === 'BR') || (!isNullOrUndefined(brElm.nextSibling) && brElm.nextSibling.textContent.length > 0)) {
24372
+ this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), !isNullOrUndefined(brElm.nextSibling) ? brElm.nextSibling : brElm, 0);
24373
+ isEmptyBrInserted = false;
24374
+ }
24375
+ else {
24376
+ const brElm2 = this.parent.createElement('br');
24377
+ this.range.insertNode(brElm2);
24378
+ this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), brElm, 0);
24379
+ }
24380
+ }
24255
24381
  insertFocusContent() {
24256
24382
  if (this.range.startContainer.textContent.length === 0) {
24257
24383
  if (this.range.startContainer.nodeName === '#text') {
@@ -25649,7 +25775,7 @@ let RichTextEditor = class RichTextEditor extends Component {
25649
25775
  this.setProperties({ value: this.valueTemplate });
25650
25776
  }
25651
25777
  else {
25652
- const compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
25778
+ const compiledTemplate = compile(this.valueTemplate)("", this, 'valueTemplate');
25653
25779
  for (let i = 0; i < compiledTemplate.length; i++) {
25654
25780
  const item = compiledTemplate[i];
25655
25781
  append([item], this.element);