@syncfusion/ej2-richtexteditor 25.2.3 → 25.2.5

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 (29) hide show
  1. package/CHANGELOG.md +30 -2
  2. package/dist/ej2-richtexteditor.min.js +2 -2
  3. package/dist/ej2-richtexteditor.umd.min.js +2 -2
  4. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-richtexteditor.es2015.js +236 -114
  6. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-richtexteditor.es5.js +238 -113
  8. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  9. package/dist/global/ej2-richtexteditor.min.js +2 -2
  10. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +11 -11
  13. package/src/common/util.js +4 -1
  14. package/src/editor-manager/base/editor-manager.js +5 -3
  15. package/src/editor-manager/plugin/alignments.js +3 -0
  16. package/src/editor-manager/plugin/dom-node.d.ts +20 -0
  17. package/src/editor-manager/plugin/dom-node.js +105 -2
  18. package/src/editor-manager/plugin/formats.js +1 -1
  19. package/src/editor-manager/plugin/indents.js +3 -0
  20. package/src/editor-manager/plugin/lists.d.ts +0 -1
  21. package/src/editor-manager/plugin/lists.js +2 -76
  22. package/src/rich-text-editor/actions/full-screen.js +0 -6
  23. package/src/rich-text-editor/actions/html-editor.d.ts +1 -0
  24. package/src/rich-text-editor/actions/html-editor.js +62 -9
  25. package/src/rich-text-editor/actions/paste-clean-up.d.ts +1 -0
  26. package/src/rich-text-editor/actions/paste-clean-up.js +41 -5
  27. package/src/rich-text-editor/base/rich-text-editor.d.ts +1 -0
  28. package/src/rich-text-editor/base/rich-text-editor.js +6 -2
  29. package/src/rich-text-editor/renderer/toolbar-renderer.js +7 -9
@@ -4573,11 +4573,14 @@ function nestedListCleanUp(range) {
4573
4573
  item.remove();
4574
4574
  });
4575
4575
  }
4576
+ else {
4577
+ break;
4578
+ }
4576
4579
  }
4577
4580
  var liElem = (range.startContainer.nodeName === "#text" ? range.startContainer.parentElement : range.startContainer).querySelectorAll("li");
4578
4581
  if (liElem.length > 0) {
4579
4582
  liElem.forEach(function (item) {
4580
- if (item.firstChild.nodeName === "OL" || item.firstChild.nodeName === "UL") {
4583
+ if (!isNullOrUndefined(item.firstChild) && (item.firstChild.nodeName === "OL" || item.firstChild.nodeName === "UL")) {
4581
4584
  item.style.listStyleType = "none";
4582
4585
  }
4583
4586
  });
@@ -5456,8 +5459,6 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
5456
5459
  target: colorPicker.element.parentElement, cssClass: css,
5457
5460
  enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,
5458
5461
  beforeOpen: function (dropDownArgs) {
5459
- colorPicker.inline = true;
5460
- colorPicker.dataBind();
5461
5462
  if (proxy.parent.readonly || !proxy.parent.enabled) {
5462
5463
  dropDownArgs.cancel = true;
5463
5464
  return;
@@ -5596,14 +5597,18 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
5596
5597
  var colorPicker = new ColorPicker({
5597
5598
  enablePersistence: this.parent.enablePersistence,
5598
5599
  enableRtl: this.parent.enableRtl,
5599
- inline: false,
5600
- value: '#fff',
5600
+ inline: true,
5601
+ value: null,
5602
+ cssClass: ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass + ' ' + 'e-rte-picker-init',
5601
5603
  created: function () {
5602
5604
  var value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
5603
- colorPicker.setProperties({ value: value });
5605
+ colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
5606
+ colorPicker.value = value;
5604
5607
  },
5605
5608
  mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),
5606
5609
  modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),
5610
+ presetColors: (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode : this.parent.fontColor.colorCode,
5611
+ columns: (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns,
5607
5612
  beforeTileRender: function (args) {
5608
5613
  args.element.classList.add(CLS_COLOR_PALETTE);
5609
5614
  args.element.classList.add(CLS_CUSTOM_TILE);
@@ -5648,10 +5653,6 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
5648
5653
  }
5649
5654
  });
5650
5655
  colorPicker.isStringTemplate = true;
5651
- colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
5652
- colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
5653
- this.parent.fontColor.colorCode;
5654
- colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
5655
5656
  colorPicker.createElement = this.parent.createElement;
5656
5657
  colorPicker.appendTo(document.getElementById(args.target));
5657
5658
  return colorPicker;
@@ -12348,7 +12349,7 @@ var DOMNode = /** @__PURE__ @class */ (function () {
12348
12349
  DOMNode.prototype.unWrap = function (element) {
12349
12350
  var parent = element.parentNode;
12350
12351
  var unWrapNode = [];
12351
- while (element.firstChild) {
12352
+ while (element.firstChild && (element.previousSibling !== this.parent.querySelector('.e-mention-chip') || element.textContent !== ' ')) {
12352
12353
  unWrapNode.push(element.firstChild);
12353
12354
  parent.insertBefore(element.firstChild, element);
12354
12355
  }
@@ -12698,6 +12699,109 @@ var DOMNode = /** @__PURE__ @class */ (function () {
12698
12699
  }
12699
12700
  return null;
12700
12701
  };
12702
+ /**
12703
+ * Method to wrap the inline and text node with block node.
12704
+ *
12705
+ * @param {HTMLElement} node - specifies the element sent to wrap the node around it with block nodes.
12706
+ * @param {string} wrapperElement - specifies which block nodes to wrap around.
12707
+ * @returns {HTMLElement} - returns the wrapped element.
12708
+ * @hidden
12709
+ * @deprecated
12710
+ */
12711
+ DOMNode.prototype.gatherElementsAround = function (node, wrapperElement) {
12712
+ var newWrapElem = createElement(wrapperElement);
12713
+ // Insert the new div element before the current node.
12714
+ var currentNode = node.previousSibling;
12715
+ var currentNodeParent = node.parentElement;
12716
+ if (currentNodeParent.className === 'e-editor-select-start') {
12717
+ currentNodeParent.parentNode.insertBefore(newWrapElem, currentNodeParent);
12718
+ }
12719
+ else if (currentNodeParent) {
12720
+ currentNodeParent.insertBefore(newWrapElem, node);
12721
+ }
12722
+ var i = 0;
12723
+ while (currentNode !== null && currentNode.nodeName !== 'BR' &&
12724
+ !this.isBlockNode(currentNode)) {
12725
+ var prevSibling = currentNode.previousSibling;
12726
+ if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
12727
+ if (i === 0) {
12728
+ newWrapElem.appendChild(currentNode);
12729
+ }
12730
+ else {
12731
+ newWrapElem.insertBefore(currentNode, newWrapElem.firstChild);
12732
+ }
12733
+ }
12734
+ currentNode = prevSibling;
12735
+ i++;
12736
+ }
12737
+ // Add the current node to the new div
12738
+ newWrapElem.appendChild(node);
12739
+ // Gather text and inline elements after the currentNode
12740
+ currentNode = newWrapElem.nextSibling ? newWrapElem.nextSibling :
12741
+ newWrapElem.parentElement.nextSibling;
12742
+ while (currentNode !== null && currentNode.nodeName !== 'BR' &&
12743
+ !this.isBlockNode(currentNode)) {
12744
+ var nextSibling = currentNode.nextSibling ?
12745
+ currentNode.nextSibling : currentNode.parentElement.nextSibling;
12746
+ if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
12747
+ newWrapElem.appendChild(currentNode);
12748
+ }
12749
+ currentNode = nextSibling;
12750
+ }
12751
+ return newWrapElem;
12752
+ };
12753
+ /**
12754
+ * Method to convert all the inline nodes between the selection to block nodes.
12755
+ *
12756
+ * @param {Node[]} selectedNodes - specifies the nodes of the start and end selection.
12757
+ * @param {boolean} fromList - specifies if the method is called from list module.
12758
+ * @returns {Node[]} - returns the selected list of elements as block nodes.
12759
+ * @hidden
12760
+ * @deprecated
12761
+ */
12762
+ DOMNode.prototype.convertToBlockNodes = function (selectedNodes, fromList) {
12763
+ if (selectedNodes.length > 1) {
12764
+ var i = 0;
12765
+ var currentSelectedNode = selectedNodes[0];
12766
+ while (!isNullOrUndefined(currentSelectedNode)) {
12767
+ if (currentSelectedNode.nodeName === 'BR') {
12768
+ var nextNode = currentSelectedNode.nextSibling;
12769
+ detach(currentSelectedNode);
12770
+ currentSelectedNode = nextNode;
12771
+ }
12772
+ if (!isNullOrUndefined(currentSelectedNode)) {
12773
+ if (fromList) {
12774
+ selectedNodes[i] = currentSelectedNode.nodeName === 'LI' || this.isBlockNode(currentSelectedNode) ?
12775
+ currentSelectedNode :
12776
+ this.gatherElementsAround(currentSelectedNode, (fromList ? 'p' : 'div'));
12777
+ }
12778
+ else {
12779
+ selectedNodes[i] = !this.isBlockNode(selectedNodes[i]) ?
12780
+ this.gatherElementsAround(currentSelectedNode, (fromList ? 'p' : 'div')) :
12781
+ selectedNodes[i];
12782
+ }
12783
+ var currentProcessNode = selectedNodes[i].nodeName === 'LI' ? selectedNodes[i].parentElement : selectedNodes[i];
12784
+ var currentElementCheckNode = currentProcessNode.nodeName === '#text' ? currentProcessNode.parentElement : currentProcessNode;
12785
+ currentSelectedNode = !isNullOrUndefined(currentElementCheckNode.querySelector('.e-editor-select-end')) ||
12786
+ !isNullOrUndefined(closest(currentSelectedNode, '.e-editor-select-end')) ?
12787
+ null : currentProcessNode.nextSibling;
12788
+ if (currentSelectedNode === null && !isNullOrUndefined(currentProcessNode.nextSibling) && currentProcessNode.nextSibling.nodeName === 'BR') {
12789
+ detach(currentProcessNode.nextSibling);
12790
+ }
12791
+ }
12792
+ i++;
12793
+ }
12794
+ }
12795
+ else {
12796
+ if (!this.isBlockNode(selectedNodes[0])) {
12797
+ selectedNodes[0] = this.gatherElementsAround(selectedNodes[0], (fromList ? 'p' : 'div'));
12798
+ if (!isNullOrUndefined(selectedNodes[0].nextSibling) && (selectedNodes[0].nextSibling.nodeName === 'BR')) {
12799
+ detach(selectedNodes[0].nextSibling);
12800
+ }
12801
+ }
12802
+ }
12803
+ return selectedNodes;
12804
+ };
12701
12805
  /**
12702
12806
  * blockNodes method
12703
12807
  *
@@ -13504,39 +13608,7 @@ var Lists = /** @__PURE__ @class */ (function () {
13504
13608
  var listsNodes = this.domNode.blockNodes(true);
13505
13609
  if (e.enterAction === 'BR') {
13506
13610
  this.setSelectionBRConfig();
13507
- var selectedNodes = this.parent.domNode.blockNodes();
13508
- if (selectedNodes.length > 1) {
13509
- var i = 0;
13510
- var currentAlignmentNode = selectedNodes[0];
13511
- while (!isNullOrUndefined(currentAlignmentNode)) {
13512
- if (currentAlignmentNode.nodeName === 'BR') {
13513
- var nextNode = currentAlignmentNode.nextSibling;
13514
- detach(currentAlignmentNode);
13515
- currentAlignmentNode = nextNode;
13516
- }
13517
- if (!isNullOrUndefined(currentAlignmentNode)) {
13518
- selectedNodes[i] = currentAlignmentNode.nodeName === 'LI' || this.parent.domNode.isBlockNode(currentAlignmentNode) ?
13519
- currentAlignmentNode : this.gatherElementsAround(currentAlignmentNode);
13520
- var currentSelectNode = selectedNodes[i].nodeName === 'LI' ? selectedNodes[i].parentElement : selectedNodes[i];
13521
- var currentElementCheckNode = currentAlignmentNode.nodeName === '#text' ? currentAlignmentNode.parentElement : currentAlignmentNode;
13522
- currentAlignmentNode = !isNullOrUndefined(currentElementCheckNode.querySelector('.e-editor-select-end')) ||
13523
- !isNullOrUndefined(closest(currentAlignmentNode, '.e-editor-select-end')) ?
13524
- null : currentSelectNode.nextSibling;
13525
- if (currentAlignmentNode === null && !isNullOrUndefined(currentSelectNode.nextSibling) && currentSelectNode.nextSibling.nodeName === 'BR') {
13526
- detach(currentSelectNode.nextSibling);
13527
- }
13528
- }
13529
- i++;
13530
- }
13531
- }
13532
- else {
13533
- if (!this.parent.domNode.isBlockNode(selectedNodes[0])) {
13534
- selectedNodes[0] = this.gatherElementsAround(selectedNodes[0]);
13535
- if (!isNullOrUndefined(selectedNodes[0].nextSibling) && (selectedNodes[0].nextSibling.nodeName === 'BR')) {
13536
- detach(selectedNodes[0].nextSibling);
13537
- }
13538
- }
13539
- }
13611
+ this.parent.domNode.convertToBlockNodes(this.parent.domNode.blockNodes(), true);
13540
13612
  this.setSelectionBRConfig();
13541
13613
  listsNodes = this.parent.domNode.blockNodes();
13542
13614
  }
@@ -13838,7 +13910,7 @@ var Lists = /** @__PURE__ @class */ (function () {
13838
13910
  parentNode.removeAttribute("style");
13839
13911
  }
13840
13912
  }
13841
- var wrapper = '<' + DEFAULT_TAG + wrapperclass + this.domNode.attributes(element) + '></' + DEFAULT_TAG + '>';
13913
+ var wrapper = '<' + e.enterAction + wrapperclass + this.domNode.attributes(element) + '></' + e.enterAction + '>';
13842
13914
  if (e.enterAction !== 'BR') {
13843
13915
  this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
13844
13916
  }
@@ -13912,48 +13984,6 @@ var Lists = /** @__PURE__ @class */ (function () {
13912
13984
  Lists.prototype.closeTag = function (type) {
13913
13985
  return this.domNode.parseHTMLFragment('<span class="e-rte-list-close-' + type.toLowerCase() + '"></span>');
13914
13986
  };
13915
- Lists.prototype.gatherElementsAround = function (node) {
13916
- var pWrap = document.createElement('p');
13917
- // Insert the new div before the current node
13918
- var currentNode = node.previousSibling;
13919
- var classNode = node.parentNode;
13920
- if (classNode.className === 'e-editor-select-start') {
13921
- node.parentNode.parentNode.insertBefore(pWrap, node.parentNode);
13922
- }
13923
- else if (node.parentNode) {
13924
- node.parentNode.insertBefore(pWrap, node);
13925
- }
13926
- // Gather text and inline elements before the currentNode
13927
- var i = 0;
13928
- while (currentNode !== null && currentNode.nodeName !== 'BR' &&
13929
- !this.parent.domNode.isBlockNode(currentNode)) {
13930
- var prevSibling = currentNode.previousSibling;
13931
- if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
13932
- if (i === 0) {
13933
- pWrap.appendChild(currentNode);
13934
- }
13935
- else {
13936
- pWrap.insertBefore(currentNode, pWrap.firstChild);
13937
- }
13938
- }
13939
- currentNode = prevSibling;
13940
- i++;
13941
- }
13942
- // Add the current node to the new p
13943
- pWrap.appendChild(node);
13944
- // Gather text and inline elements after the currentNode
13945
- currentNode = pWrap.nextSibling ? pWrap.nextSibling : pWrap.parentElement.nextSibling;
13946
- while (currentNode !== null && currentNode.nodeName !== 'BR' &&
13947
- !this.parent.domNode.isBlockNode(currentNode)) {
13948
- var nextSibling = currentNode.nextSibling ?
13949
- currentNode.nextSibling : currentNode.parentElement.nextSibling;
13950
- if (currentNode.nodeType === 3 || currentNode.nodeType === 1) {
13951
- pWrap.appendChild(currentNode);
13952
- }
13953
- currentNode = nextSibling;
13954
- }
13955
- return pWrap;
13956
- };
13957
13987
  return Lists;
13958
13988
  }());
13959
13989
 
@@ -14293,7 +14323,7 @@ var Formats = /** @__PURE__ @class */ (function () {
14293
14323
  }
14294
14324
  }
14295
14325
  }
14296
- if (e.enterAction !== 'BR' && !isNullOrUndefined(range.startContainer) && !isNullOrUndefined(range.startContainer.parentElement) && range.startContainer === range.endContainer && range.startContainer.nodeName === '#text' && range.startContainer.parentElement.classList.contains("e-content") && range.startContainer.parentElement.isContentEditable) {
14326
+ if (e.enterAction !== 'BR' && !isNullOrUndefined(range.startContainer) && !isNullOrUndefined(range.startContainer.parentElement) && range.startContainer === range.endContainer && range.startContainer.nodeName === '#text' && range.startContainer.parentElement.classList.contains('e-content') && range.startContainer.parentElement.isContentEditable) {
14297
14327
  var pTag = createElement(e.enterAction);
14298
14328
  range.startContainer.parentElement.insertBefore(pTag, range.startContainer);
14299
14329
  pTag.appendChild(range.startContainer);
@@ -15640,6 +15670,9 @@ var Alignments = /** @__PURE__ @class */ (function () {
15640
15670
  if (!isTableAlign) {
15641
15671
  this.parent.domNode.setMarker(save);
15642
15672
  var alignmentNodes = this.parent.domNode.blockNodes();
15673
+ if (e.enterAction === 'BR') {
15674
+ alignmentNodes = this.parent.domNode.convertToBlockNodes(alignmentNodes, false);
15675
+ }
15643
15676
  for (var i = 0; i < alignmentNodes.length; i++) {
15644
15677
  var parentNode = alignmentNodes[i];
15645
15678
  setStyleAttribute(parentNode, { 'text-align': this.alignments[e.subCommand] });
@@ -15723,6 +15756,9 @@ var Indents = /** @__PURE__ @class */ (function () {
15723
15756
  var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);
15724
15757
  this.parent.domNode.setMarker(save);
15725
15758
  var indentsNodes = this.parent.domNode.blockNodes();
15759
+ if (e.enterAction === 'BR') {
15760
+ indentsNodes = this.parent.domNode.convertToBlockNodes(indentsNodes, false);
15761
+ }
15726
15762
  var parentNodes = indentsNodes.slice();
15727
15763
  var listsNodes = [];
15728
15764
  for (var i = 0; i < parentNodes.length; i++) {
@@ -21105,12 +21141,14 @@ var EditorManager = /** @__PURE__ @class */ (function () {
21105
21141
  case 'alignments':
21106
21142
  this.observer.notify(ALIGNMENT_TYPE, {
21107
21143
  subCommand: value, event: event, callBack: callBack,
21108
- selector: selector,
21109
- value: exeValue
21144
+ selector: selector, value: exeValue, enterAction: enterAction
21110
21145
  });
21111
21146
  break;
21112
21147
  case 'indents':
21113
- this.observer.notify(INDENT_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector });
21148
+ this.observer.notify(INDENT_TYPE, {
21149
+ subCommand: value, event: event, callBack: callBack,
21150
+ selector: selector, enterAction: enterAction
21151
+ });
21114
21152
  break;
21115
21153
  case 'links':
21116
21154
  this.observer.notify(LINK, { command: command, value: value, item: exeValue, event: event, callBack: callBack });
@@ -21991,25 +22029,54 @@ var HtmlEditor = /** @__PURE__ @class */ (function () {
21991
22029
  this.deleteCleanup(e, currentRange);
21992
22030
  }
21993
22031
  if (args.keyCode === 9 && this.parent.enableTabKey) {
22032
+ this.parent.formatter.saveData(e);
21994
22033
  if (!isNullOrUndefined(args.target) && isNullOrUndefined(closest(args.target, '.e-rte-toolbar'))) {
21995
22034
  var range = this.nodeSelectionObj.getRange(this.contentRenderer.getDocument());
21996
22035
  var parentNode = this.nodeSelectionObj.getParentNodeCollection(range);
21997
22036
  if (!((parentNode[0].nodeName === 'LI' || closest(parentNode[0], 'li') ||
21998
22037
  closest(parentNode[0], 'table')) && range.startOffset === 0)) {
21999
22038
  args.preventDefault();
22000
- if (!args.shiftKey) {
22001
- InsertHtml.Insert(this.contentRenderer.getDocument(), '&nbsp;&nbsp;&nbsp;&nbsp;');
22002
- this.rangeCollection.push(this.nodeSelectionObj.getRange(this.contentRenderer.getDocument()));
22039
+ var selection = this.contentRenderer.getDocument().getSelection().getRangeAt(0);
22040
+ var alignmentNodes = this.parent.formatter.editorManager.domNode.blockNodes();
22041
+ if (this.parent.enterKey === 'BR') {
22042
+ if (selection.startOffset !== selection.endOffset && selection.startOffset === 0) {
22043
+ var save = this.nodeSelectionObj.save(range, this.contentRenderer.getDocument());
22044
+ this.parent.formatter.editorManager.domNode.setMarker(save);
22045
+ alignmentNodes = this.parent.formatter.editorManager.domNode.blockNodes();
22046
+ this.parent.formatter.editorManager.domNode.convertToBlockNodes(alignmentNodes, false);
22047
+ this.marginTabAdd(args.shiftKey, alignmentNodes);
22048
+ save = this.parent.formatter.editorManager.domNode.saveMarker(save);
22049
+ save.restore();
22050
+ }
22051
+ else {
22052
+ InsertHtml.Insert(this.contentRenderer.getDocument(), '&nbsp;&nbsp;&nbsp;&nbsp;');
22053
+ this.rangeCollection.push(this.nodeSelectionObj.getRange(this.contentRenderer.getDocument()));
22054
+ }
22003
22055
  }
22004
- else if (this.rangeCollection.length > 0 &&
22005
- this.rangeCollection[this.rangeCollection.length - 1].startContainer.textContent.length === 4) {
22006
- var textCont = this.rangeCollection[this.rangeCollection.length - 1].startContainer;
22007
- this.nodeSelectionObj.setSelectionText(this.contentRenderer.getDocument(), textCont, textCont, 0, textCont.textContent.length);
22008
- InsertHtml.Insert(this.contentRenderer.getDocument(), document.createTextNode(''));
22009
- this.rangeCollection.pop();
22056
+ else {
22057
+ if (!args.shiftKey) {
22058
+ if (selection.startOffset !== selection.endOffset && selection.startOffset === 0) {
22059
+ this.marginTabAdd(args.shiftKey, alignmentNodes);
22060
+ }
22061
+ else {
22062
+ InsertHtml.Insert(this.contentRenderer.getDocument(), '&nbsp;&nbsp;&nbsp;&nbsp;');
22063
+ this.rangeCollection.push(this.nodeSelectionObj.getRange(this.contentRenderer.getDocument()));
22064
+ }
22065
+ }
22066
+ else if (this.rangeCollection.length > 0 &&
22067
+ this.rangeCollection[this.rangeCollection.length - 1].startContainer.textContent.length === 4) {
22068
+ var textCont = this.rangeCollection[this.rangeCollection.length - 1].startContainer;
22069
+ this.nodeSelectionObj.setSelectionText(this.contentRenderer.getDocument(), textCont, textCont, 0, textCont.textContent.length);
22070
+ InsertHtml.Insert(this.contentRenderer.getDocument(), document.createTextNode(''));
22071
+ this.rangeCollection.pop();
22072
+ }
22073
+ else {
22074
+ this.marginTabAdd(args.shiftKey, alignmentNodes);
22075
+ }
22010
22076
  }
22011
22077
  }
22012
22078
  }
22079
+ this.parent.formatter.saveData(e);
22013
22080
  }
22014
22081
  if (e.args.action === 'space' ||
22015
22082
  e.args.action === 'enter' ||
@@ -22672,6 +22739,30 @@ var HtmlEditor = /** @__PURE__ @class */ (function () {
22672
22739
  HtmlEditor.prototype.getSelectedHtml = function (e) {
22673
22740
  e.callBack(this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument()).toString());
22674
22741
  };
22742
+ HtmlEditor.prototype.marginTabAdd = function (val, alignmentNodes) {
22743
+ for (var index = 0; index < alignmentNodes.length; index++) {
22744
+ var element = alignmentNodes[index];
22745
+ if (element.closest('li')) {
22746
+ continue;
22747
+ }
22748
+ if (element.style.marginLeft) {
22749
+ var count$$1 = parseInt(element.style.marginLeft, 10);
22750
+ if (val) {
22751
+ count$$1 -= 20;
22752
+ }
22753
+ else {
22754
+ count$$1 += 20;
22755
+ }
22756
+ element.style.marginLeft = count$$1.toString() + 'px';
22757
+ if (element.style.marginLeft === '0px') {
22758
+ element.removeAttribute('style');
22759
+ }
22760
+ }
22761
+ else if (!val) {
22762
+ element.style.marginLeft = '20px';
22763
+ }
22764
+ }
22765
+ };
22675
22766
  return HtmlEditor;
22676
22767
  }());
22677
22768
 
@@ -23387,11 +23478,36 @@ var PasteCleanup = /** @__PURE__ @class */ (function () {
23387
23478
  this.cropImageHandler(this.parent.inputElement);
23388
23479
  }
23389
23480
  };
23481
+ PasteCleanup.prototype.convertBlobToBase64 = function (element) {
23482
+ var imgElem = element.querySelectorAll('img');
23483
+ var _loop_1 = function (i) {
23484
+ if (imgElem[i].getAttribute('src') &&
23485
+ imgElem[i].getAttribute('src').startsWith("blob")) {
23486
+ var blobImageUrl = imgElem[i].getAttribute('src');
23487
+ var img_1 = new Image();
23488
+ var onImageLoadEvent_1 = function () {
23489
+ var canvas = document.createElement('canvas');
23490
+ var ctx = canvas.getContext('2d');
23491
+ canvas.width = img_1.width;
23492
+ canvas.height = img_1.height;
23493
+ ctx.drawImage(img_1, 0, 0);
23494
+ var base64String = canvas.toDataURL('image/png');
23495
+ imgElem[i].src = base64String;
23496
+ img_1.removeEventListener('load', onImageLoadEvent_1);
23497
+ };
23498
+ img_1.src = blobImageUrl;
23499
+ img_1.addEventListener('load', onImageLoadEvent_1);
23500
+ }
23501
+ };
23502
+ for (var i = 0; i < imgElem.length; i++) {
23503
+ _loop_1(i);
23504
+ }
23505
+ };
23390
23506
  PasteCleanup.prototype.cropImageHandler = function (element) {
23391
23507
  var _this = this;
23392
23508
  var allImgElm = element.querySelectorAll('.e-img-cropped');
23393
23509
  if (allImgElm.length > 0) {
23394
- var _loop_1 = function (i) {
23510
+ var _loop_2 = function (i) {
23395
23511
  if (allImgElm[i].getAttribute('src').split(',')[0].indexOf('base64') >= 0) {
23396
23512
  var image_1 = new Image();
23397
23513
  image_1.src = allImgElm[i].getAttribute('src');
@@ -23425,13 +23541,24 @@ var PasteCleanup = /** @__PURE__ @class */ (function () {
23425
23541
  }
23426
23542
  };
23427
23543
  for (var i = 0; i < allImgElm.length; i++) {
23428
- _loop_1(i);
23544
+ _loop_2(i);
23429
23545
  }
23430
23546
  }
23431
23547
  else {
23432
- this.imgUploading(this.parent.inputElement);
23433
- if (this.parent.iframeSettings.enable) {
23434
- this.parent.updateValue();
23548
+ if (!isNullOrUndefined(this.parent.insertImageSettings.saveUrl) && !isNullOrUndefined(this.parent.insertImageSettings.path) && !isNullOrUndefined(this.parent.inputElement.querySelectorAll("img")) && this.parent.inputElement.querySelectorAll("img")[0].src.startsWith("blob")) {
23549
+ this.convertBlobToBase64(this.parent.inputElement);
23550
+ setTimeout(function () {
23551
+ _this.imgUploading(_this.parent.inputElement);
23552
+ if (_this.parent.iframeSettings.enable) {
23553
+ _this.parent.updateValue();
23554
+ }
23555
+ }, 20);
23556
+ }
23557
+ else {
23558
+ this.imgUploading(this.parent.inputElement);
23559
+ if (this.parent.iframeSettings.enable) {
23560
+ this.parent.updateValue();
23561
+ }
23435
23562
  }
23436
23563
  }
23437
23564
  };
@@ -24217,9 +24344,6 @@ var FullScreen = /** @__PURE__ @class */ (function () {
24217
24344
  && !isNullOrUndefined(this.parent.quickToolbarModule)) {
24218
24345
  this.parent.quickToolbarModule.hideQuickToolbars();
24219
24346
  }
24220
- if (this.parent.showTooltip && !isNullOrUndefined(document.querySelector('.e-tooltip-wrap'))) {
24221
- this.parent.notify(destroyTooltip, { args: event });
24222
- }
24223
24347
  this.scrollableParent = getScrollableParent(this.parent.element);
24224
24348
  if (!this.parent.element.classList.contains(CLS_FULL_SCREEN)) {
24225
24349
  var evenArgs = {
@@ -24272,9 +24396,6 @@ var FullScreen = /** @__PURE__ @class */ (function () {
24272
24396
  && !isNullOrUndefined(this.parent.quickToolbarModule)) {
24273
24397
  this.parent.quickToolbarModule.hideQuickToolbars();
24274
24398
  }
24275
- if (this.parent.showTooltip && !isNullOrUndefined(document.querySelector('.e-tooltip-wrap'))) {
24276
- this.parent.notify(destroyTooltip, { args: event });
24277
- }
24278
24399
  if (this.parent.element.classList.contains(CLS_FULL_SCREEN)) {
24279
24400
  var evenArgs = {
24280
24401
  cancel: false,
@@ -34338,6 +34459,7 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
34338
34459
  this.persistData();
34339
34460
  setStyleAttribute(this.element, { 'width': formatUnit(this.width) });
34340
34461
  attributes(this.element, { role: 'application', 'aria-label': 'Rich Text Editor' });
34462
+ this.beforeRenderClassValue = this.element.getAttribute('class');
34341
34463
  };
34342
34464
  RichTextEditor.prototype.persistData = function () {
34343
34465
  if (this.enablePersistence && this.originalElement.tagName === 'TEXTAREA') {
@@ -35210,6 +35332,10 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
35210
35332
  if (this.isDestroyed || !this.isRendered) {
35211
35333
  return;
35212
35334
  }
35335
+ this.element.className = this.beforeRenderClassValue;
35336
+ this.removeHtmlAttributes();
35337
+ this.removeAttributes();
35338
+ this.beforeRenderClassValue = null;
35213
35339
  if (!isNullOrUndefined(this.timeInterval)) {
35214
35340
  clearInterval(this.timeInterval);
35215
35341
  this.timeInterval = null;
@@ -35277,8 +35403,6 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
35277
35403
  }
35278
35404
  }
35279
35405
  }
35280
- this.removeHtmlAttributes();
35281
- this.removeAttributes();
35282
35406
  _super.prototype.destroy.call(this);
35283
35407
  this.isRendered = false;
35284
35408
  };
@@ -35309,6 +35433,7 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
35309
35433
  this.element.removeAttribute('aria-disabled');
35310
35434
  this.element.removeAttribute('role');
35311
35435
  this.element.removeAttribute('tabindex');
35436
+ this.element.removeAttribute('aria-label');
35312
35437
  };
35313
35438
  RichTextEditor.prototype.destroyDependentModules = function () {
35314
35439
  /* destroy dependent modules */