@syncfusion/ej2-richtexteditor 26.2.5 → 26.2.8

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/dist/ej2-richtexteditor.min.js +2 -2
  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 +70 -21
  5. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-richtexteditor.es5.js +70 -22
  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 +9 -9
  12. package/src/editor-manager/plugin/inserthtml.d.ts +1 -0
  13. package/src/editor-manager/plugin/inserthtml.js +25 -12
  14. package/src/editor-manager/plugin/lists.d.ts +1 -0
  15. package/src/editor-manager/plugin/lists.js +18 -4
  16. package/src/rich-text-editor/actions/base-quick-toolbar.js +0 -1
  17. package/src/rich-text-editor/actions/html-editor.js +7 -0
  18. package/src/rich-text-editor/base/rich-text-editor.js +4 -4
  19. package/src/rich-text-editor/renderer/audio-module.js +1 -0
  20. package/src/rich-text-editor/renderer/image-module.js +1 -0
  21. package/src/rich-text-editor/renderer/toolbar-renderer.d.ts +2 -0
  22. package/src/rich-text-editor/renderer/toolbar-renderer.js +14 -2
  23. package/src/rich-text-editor/renderer/video-module.js +1 -0
  24. package/styles/fluent2.css +5 -1033
  25. package/styles/material3-dark.css +1 -54
  26. package/styles/material3.css +3 -110
  27. package/styles/rich-text-editor/fluent2.css +5 -1033
  28. package/styles/rich-text-editor/material3-dark.css +1 -54
  29. package/styles/rich-text-editor/material3.css +3 -110
@@ -5435,11 +5435,11 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
5435
5435
  if (this.parent.showTooltip && args.type === 'toolbar') {
5436
5436
  this.tooltip = new Tooltip({
5437
5437
  target: '#' + this.parent.getID() + '_toolbar_wrapper [title]',
5438
- container: this.toolbarPanel,
5439
5438
  showTipPointer: true,
5440
5439
  openDelay: 400,
5441
5440
  opensOn: 'Hover',
5442
5441
  beforeRender: this.tooltipBeforeRender.bind(this),
5442
+ beforeOpen: this.tooltipBeforeOpen.bind(this),
5443
5443
  cssClass: this.parent.getCssClass(),
5444
5444
  windowCollision: true,
5445
5445
  position: 'BottomCenter'
@@ -5447,6 +5447,11 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
5447
5447
  this.tooltip.appendTo(args.target.parentElement);
5448
5448
  }
5449
5449
  };
5450
+ ToolbarRenderer.prototype.tooltipBeforeOpen = function (args) {
5451
+ if (args.element) {
5452
+ args.element.setAttribute('data-rte-id', this.parent.getID());
5453
+ }
5454
+ };
5450
5455
  /**
5451
5456
  * renderDropDownButton method
5452
5457
  *
@@ -5992,6 +5997,13 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
5992
5997
  }
5993
5998
  if (this.tooltip && !this.tooltip.isDestroyed) {
5994
5999
  this.tooltip.destroy();
6000
+ var tooltipElements = document.querySelectorAll('[data-rte-id="' + this.parent.getID() + '"]');
6001
+ for (var i = 0; i < tooltipElements.length; i++) {
6002
+ var tooltipEle = tooltipElements[i];
6003
+ if (this.parent.getID() === tooltipEle.getAttribute('data-rte-id')) {
6004
+ detach(tooltipEle);
6005
+ }
6006
+ }
5995
6007
  }
5996
6008
  this.unWireEvent();
5997
6009
  this.mode = null;
@@ -6811,6 +6823,7 @@ var Image$1 = /** @__PURE__ @class */ (function () {
6811
6823
  if (this.parent.insertImageSettings.resize) {
6812
6824
  EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart);
6813
6825
  this.parent.element.ownerDocument.removeEventListener('mousedown', this.docClick, true);
6826
+ this.docClick = null;
6814
6827
  EventHandler.remove(this.contentModule.getEditPanel(), 'cut', this.onCutHandler);
6815
6828
  EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
6816
6829
  }
@@ -9177,6 +9190,7 @@ var Audio = /** @__PURE__ @class */ (function () {
9177
9190
  EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.touchStart);
9178
9191
  EventHandler.remove(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.audioClick);
9179
9192
  this.parent.element.ownerDocument.removeEventListener('mousedown', this.docClick, true);
9193
+ this.docClick = null;
9180
9194
  }
9181
9195
  };
9182
9196
  Audio.prototype.afterRender = function () {
@@ -10079,6 +10093,7 @@ var Video = /** @__PURE__ @class */ (function () {
10079
10093
  if (this.parent.insertVideoSettings.resize) {
10080
10094
  EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart);
10081
10095
  this.parent.element.ownerDocument.removeEventListener('mousedown', this.docClick, true);
10096
+ this.docClick = null;
10082
10097
  EventHandler.remove(this.contentModule.getEditPanel(), 'cut', this.onCutHandler);
10083
10098
  EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
10084
10099
  }
@@ -16649,7 +16664,6 @@ var BaseQuickToolbar = /** @__PURE__ @class */ (function () {
16649
16664
  _this.tooltip = new Tooltip({
16650
16665
  target: '#' + _this.element.id + ' [title]',
16651
16666
  openDelay: 400,
16652
- container: _this.parent.rootContainer,
16653
16667
  showTipPointer: true,
16654
16668
  beforeRender: _this.tooltipBeforeRender.bind(_this),
16655
16669
  windowCollision: true,
@@ -21978,13 +21992,15 @@ var Lists = /** @__PURE__ @class */ (function () {
21978
21992
  var commonAncestor = range.commonAncestorContainer;
21979
21993
  var startEle = range.startContainer;
21980
21994
  var endEle = range.endContainer;
21981
- var startNode = startEle.nodeType === 3 ? startEle.parentElement : startEle;
21982
- var endNode = endEle.nodeType === 3 ? endEle.parentElement : endEle;
21995
+ var startNode = startEle.nodeType === 3 ? this.domNode.blockParentNode(startEle) : startEle;
21996
+ var endNode = endEle.nodeType === 3 ? this.domNode.blockParentNode(endEle) : endEle;
21983
21997
  if ((commonAncestor.nodeName === 'UL' || commonAncestor.nodeName === 'OL') && startNode !== endNode
21984
21998
  && (!isNullOrUndefined(closest(startNode, 'ul')) || !isNullOrUndefined(closest(startNode, 'ol')))
21985
21999
  && (!isNullOrUndefined(closest(endNode, 'ul')) || !isNullOrUndefined(closest(endNode, 'ol')))
21986
- && (commonAncestor.lastElementChild === closest(endNode, 'li')) && !range.collapsed) {
21987
- detach(commonAncestor);
22000
+ && ((commonAncestor.lastElementChild === closest(endNode, 'li') && commonAncestor.lastChild !== endNode)) && !range.collapsed) {
22001
+ if (this.areAllListItemsSelected(commonAncestor, range)) {
22002
+ detach(commonAncestor);
22003
+ }
21988
22004
  }
21989
22005
  this.removeList(range, e);
21990
22006
  }
@@ -22655,6 +22671,18 @@ var Lists = /** @__PURE__ @class */ (function () {
22655
22671
  this.domNode = null;
22656
22672
  }
22657
22673
  };
22674
+ Lists.prototype.areAllListItemsSelected = function (list, range) {
22675
+ var listItems = list.querySelectorAll('li');
22676
+ for (var i = 0; i < listItems.length; i++) {
22677
+ var listItem = listItems[i];
22678
+ var listItemRange = this.parent.currentDocument.createRange();
22679
+ listItemRange.selectNodeContents(listItem);
22680
+ if (!range.intersectsNode(listItem)) {
22681
+ return false;
22682
+ }
22683
+ }
22684
+ return true;
22685
+ };
22658
22686
  return Lists;
22659
22687
  }());
22660
22688
 
@@ -23657,7 +23685,6 @@ var InsertHtml = /** @__PURE__ @class */ (function () {
23657
23685
  return null;
23658
23686
  };
23659
23687
  InsertHtml.pasteInsertHTML = function (nodes, node, range, nodeSelection, nodeCutter, docElement, isCollapsed, closestParentNode, editNode, enterAction) {
23660
- var _this = this;
23661
23688
  var isCursor = range.startOffset === range.endOffset &&
23662
23689
  range.startContainer === range.endContainer;
23663
23690
  if (isCursor && range.startContainer === editNode && editNode.textContent === '') {
@@ -23736,6 +23763,9 @@ var InsertHtml = /** @__PURE__ @class */ (function () {
23736
23763
  var rangeElement = closest(nearestAnchor, 'span');
23737
23764
  rangeElement.appendChild(tempSpan);
23738
23765
  }
23766
+ else if (nodes[0].nodeName === '#text' && nodes[0].nodeValue.includes('\u200B') && !isNullOrUndefined(nodes[0].parentElement) && !isNullOrUndefined(nodes[0].parentElement.previousElementSibling) && nodes[0].parentElement.previousElementSibling.classList.contains('e-mention-chip')) {
23767
+ range.startContainer.parentElement.insertAdjacentElement('afterend', tempSpan);
23768
+ }
23739
23769
  else {
23740
23770
  range.insertNode(tempSpan);
23741
23771
  }
@@ -23824,17 +23854,7 @@ var InsertHtml = /** @__PURE__ @class */ (function () {
23824
23854
  else {
23825
23855
  this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction);
23826
23856
  }
23827
- var spanAligns = editNode.querySelectorAll('span[style*="text-align"]');
23828
- if (spanAligns.length > 0) {
23829
- spanAligns.forEach(function (spanAlign) {
23830
- if (!isNullOrUndefined(spanAlign)) {
23831
- var blockAlign = _this.getImmediateBlockNode(spanAlign, null);
23832
- if (blockAlign && blockAlign.textContent.trim() === spanAlign.textContent.trim()) {
23833
- blockAlign.style.textAlign = spanAlign.style.textAlign;
23834
- }
23835
- }
23836
- });
23837
- }
23857
+ this.alignCheck(editNode);
23838
23858
  };
23839
23859
  InsertHtml.placeCursorEnd = function (lastSelectionNode, node, nodeSelection, docElement, editNode) {
23840
23860
  lastSelectionNode = lastSelectionNode.nodeName === 'BR' ? (isNullOrUndefined(lastSelectionNode.previousSibling) ? lastSelectionNode.parentNode
@@ -24074,6 +24094,27 @@ var InsertHtml = /** @__PURE__ @class */ (function () {
24074
24094
  }
24075
24095
  insertNode.classList.add('ignore-table');
24076
24096
  };
24097
+ InsertHtml.alignCheck = function (editNode) {
24098
+ var spanAligns = editNode.querySelectorAll('span[style*="text-align"]');
24099
+ for (var i = 0; i < spanAligns.length; i++) {
24100
+ var spanAlign = spanAligns[i];
24101
+ if (spanAlign) {
24102
+ var blockAlign = this.getImmediateBlockNode(spanAlign, null);
24103
+ if (blockAlign) {
24104
+ var totalSpanText = '';
24105
+ for (var j = 0; j < spanAligns.length; j++) {
24106
+ var span = spanAligns[j];
24107
+ if (blockAlign.contains(span)) {
24108
+ totalSpanText += span.textContent;
24109
+ }
24110
+ }
24111
+ if (blockAlign.textContent.trim() === totalSpanText.trim()) {
24112
+ blockAlign.style.textAlign = spanAlign.style.textAlign;
24113
+ }
24114
+ }
24115
+ }
24116
+ }
24117
+ };
24077
24118
  /**
24078
24119
  * Insert method
24079
24120
  *
@@ -30906,6 +30947,13 @@ var HtmlEditor = /** @__PURE__ @class */ (function () {
30906
30947
  var isRootParent = false;
30907
30948
  if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey && !isEmptyNode) {
30908
30949
  pointer = range.startOffset;
30950
+ var container = range.startContainer;
30951
+ // Check if the container is a text node and contains a zero-width space
30952
+ if (container.nodeType === Node.TEXT_NODE && container.nodeValue.includes("\u200B")) {
30953
+ var beforeZeroWidthSpace = container.splitText(container.nodeValue.indexOf("\u200B"));
30954
+ beforeZeroWidthSpace.splitText(1); // The zero-width space is at the beginning of this node
30955
+ beforeZeroWidthSpace.parentNode.removeChild(beforeZeroWidthSpace);
30956
+ }
30909
30957
  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
30910
30958
  range.startContainer.nodeName === '#text' ? range.startContainer.parentElement !== this.parent.inputElement ? range.startContainer.parentElement.classList.add('currentStartMark')
30911
30959
  : isRootParent = true : range.startContainer.classList.add('currentStartMark');
@@ -36274,8 +36322,6 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
36274
36322
  */
36275
36323
  RichTextEditor.prototype.preRender = function () {
36276
36324
  this.initializeValue();
36277
- this.onBlurHandler = this.blurHandler.bind(this);
36278
- this.onFocusHandler = this.focusHandler.bind(this);
36279
36325
  this.clickPoints = { clientX: 0, clientY: 0 };
36280
36326
  this.initialValue = this.value;
36281
36327
  this.serviceLocator = new ServiceLocator;
@@ -36915,7 +36961,7 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
36915
36961
  this.inputElement.innerHTML = this.enterKey !== 'BR' ? '<' + this.enterKey + '><br></' + this.enterKey + '>' : '<br>';
36916
36962
  this.isSelectAll = false;
36917
36963
  }
36918
- if (selection.rangeCount > 0) {
36964
+ if (selection.rangeCount > 0 && this.contentModule.getDocument().activeElement.tagName !== 'INPUT' && this.inputElement.contains(this.contentModule.getDocument().activeElement)) {
36919
36965
  selection.removeAllRanges();
36920
36966
  selection.addRange(currentRange);
36921
36967
  }
@@ -38525,6 +38571,9 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
38525
38571
  }
38526
38572
  };
38527
38573
  RichTextEditor.prototype.wireEvents = function () {
38574
+ this.onResizeHandler = this.resizeHandler.bind(this);
38575
+ this.onBlurHandler = this.blurHandler.bind(this);
38576
+ this.onFocusHandler = this.focusHandler.bind(this);
38528
38577
  this.element.addEventListener('focusin', this.onFocusHandler, true);
38529
38578
  this.element.addEventListener('focusout', this.onBlurHandler, true);
38530
38579
  this.on(contentChanged, this.contentChanged, this);
@@ -38580,7 +38629,6 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
38580
38629
  EventHandler.add(this.inputElement, 'input', this.inputHandler, this);
38581
38630
  this.wireContextEvent();
38582
38631
  this.formatter.editorManager.observer.on(KEY_DOWN_HANDLER, this.editorKeyDown, this);
38583
- this.onResizeHandler = this.resizeHandler.bind(this);
38584
38632
  this.element.ownerDocument.defaultView.addEventListener('resize', this.onResizeHandler, true);
38585
38633
  if (this.iframeSettings.enable) {
38586
38634
  EventHandler.add(this.inputElement, 'focusin', this.focusHandler, this);