@syncfusion/ej2-richtexteditor 19.3.46 → 19.3.55

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 (49) 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 +79 -10
  5. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-richtexteditor.es5.js +79 -10
  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 +12 -12
  12. package/src/editor-manager/plugin/selection-commands.js +18 -1
  13. package/src/rich-text-editor/actions/dropdown-buttons.js +10 -0
  14. package/src/rich-text-editor/actions/enter-key.js +1 -0
  15. package/src/rich-text-editor/actions/quick-toolbar.d.ts +1 -0
  16. package/src/rich-text-editor/actions/quick-toolbar.js +20 -2
  17. package/src/rich-text-editor/base/rich-text-editor.js +1 -2
  18. package/src/rich-text-editor/renderer/image-module.d.ts +2 -0
  19. package/src/rich-text-editor/renderer/image-module.js +23 -2
  20. package/src/rich-text-editor/renderer/link-module.js +3 -2
  21. package/src/rich-text-editor/renderer/table-module.js +3 -2
  22. package/src/rich-text-editor/renderer/toolbar-renderer.js +3 -2
  23. package/styles/bootstrap-dark.css +4 -0
  24. package/styles/bootstrap.css +4 -0
  25. package/styles/bootstrap4.css +4 -0
  26. package/styles/bootstrap5-dark.css +4 -0
  27. package/styles/bootstrap5.css +4 -0
  28. package/styles/fabric-dark.css +4 -0
  29. package/styles/fabric.css +4 -0
  30. package/styles/highcontrast-light.css +4 -0
  31. package/styles/highcontrast.css +4 -0
  32. package/styles/material-dark.css +4 -0
  33. package/styles/material.css +4 -0
  34. package/styles/rich-text-editor/_layout.scss +4 -0
  35. package/styles/rich-text-editor/bootstrap-dark.css +4 -0
  36. package/styles/rich-text-editor/bootstrap.css +4 -0
  37. package/styles/rich-text-editor/bootstrap4.css +4 -0
  38. package/styles/rich-text-editor/bootstrap5-dark.css +4 -0
  39. package/styles/rich-text-editor/bootstrap5.css +4 -0
  40. package/styles/rich-text-editor/fabric-dark.css +4 -0
  41. package/styles/rich-text-editor/fabric.css +4 -0
  42. package/styles/rich-text-editor/highcontrast-light.css +4 -0
  43. package/styles/rich-text-editor/highcontrast.css +4 -0
  44. package/styles/rich-text-editor/material-dark.css +4 -0
  45. package/styles/rich-text-editor/material.css +4 -0
  46. package/styles/rich-text-editor/tailwind-dark.css +4 -0
  47. package/styles/rich-text-editor/tailwind.css +4 -0
  48. package/styles/tailwind-dark.css +4 -0
  49. package/styles/tailwind.css +4 -0
@@ -2741,7 +2741,8 @@ var ToolbarRenderer = /** @__PURE__ @class */ (function () {
2741
2741
  this.parent.notify(beforeDropDownItemRender, args);
2742
2742
  };
2743
2743
  ToolbarRenderer.prototype.dropDownOpen = function (args) {
2744
- if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1) {
2744
+ if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNullOrUndefined(args.element.parentElement.querySelector('.e-cell-merge')) &&
2745
+ (!isNullOrUndefined(args.element.parentElement.querySelector('.e-cell-horizontal-split')) || !isNullOrUndefined(args.element.parentElement.querySelector('.e-cell-vertical-split')))) {
2745
2746
  var listEle = args.element.querySelectorAll('li');
2746
2747
  if (this.parent.inputElement.querySelectorAll('.e-cell-select').length === 1) {
2747
2748
  addClass([listEle[0]], 'e-disabled');
@@ -3605,6 +3606,11 @@ var DropDownButtons = /** @__PURE__ @class */ (function () {
3605
3606
  var prop = _a[_i];
3606
3607
  switch (prop) {
3607
3608
  case 'fontFamily':
3609
+ if (this.parent.inlineMode.enable) {
3610
+ if (!isNullOrUndefined(this.parent.fontFamily.default)) {
3611
+ this.getEditNode().style.fontFamily = this.parent.fontFamily.default;
3612
+ }
3613
+ }
3608
3614
  if (this.fontNameDropDown) {
3609
3615
  for (var _b = 0, _c = Object.keys(newProp.fontFamily); _b < _c.length; _b++) {
3610
3616
  var fontFamily$$1 = _c[_b];
@@ -3636,6 +3642,11 @@ var DropDownButtons = /** @__PURE__ @class */ (function () {
3636
3642
  }
3637
3643
  break;
3638
3644
  case 'fontSize':
3645
+ if (this.parent.inlineMode) {
3646
+ if (!isNullOrUndefined(this.parent.fontSize.default)) {
3647
+ this.getEditNode().style.fontSize = this.parent.fontSize.default;
3648
+ }
3649
+ }
3639
3650
  if (this.fontSizeDropDown) {
3640
3651
  for (var _d = 0, _e = Object.keys(newProp.fontSize); _d < _e.length; _d++) {
3641
3652
  var fontSize$$1 = _e[_d];
@@ -5700,6 +5711,11 @@ var QuickToolbar = /** @__PURE__ @class */ (function () {
5700
5711
  this.parent.isBlur = false;
5701
5712
  this.parent.isRTE = true;
5702
5713
  };
5714
+ QuickToolbar.prototype.keyUpQT = function (e) {
5715
+ if (e.which == 27) {
5716
+ this.hideQuickToolbars();
5717
+ }
5718
+ };
5703
5719
  QuickToolbar.prototype.renderQuickToolbars = function () {
5704
5720
  if (this.linkQTBar || this.imageQTBar || this.textQTBar || this.tableQTBar) {
5705
5721
  return;
@@ -5714,15 +5730,19 @@ var QuickToolbar = /** @__PURE__ @class */ (function () {
5714
5730
  this.renderFactory.addRenderer(RenderType.TableToolbar, this.tableQTBar);
5715
5731
  if (this.linkQTBar) {
5716
5732
  EventHandler.add(this.linkQTBar.element, 'mousedown', this.onMouseDown, this);
5733
+ EventHandler.add(this.linkQTBar.element, 'keyup', this.keyUpQT, this);
5717
5734
  }
5718
5735
  if (this.imageQTBar) {
5719
5736
  EventHandler.add(this.imageQTBar.element, 'mousedown', this.onMouseDown, this);
5737
+ EventHandler.add(this.imageQTBar.element, 'keyup', this.keyUpQT, this);
5720
5738
  }
5721
5739
  if (this.textQTBar) {
5722
5740
  EventHandler.add(this.textQTBar.element, 'mousedown', this.onMouseDown, this);
5741
+ EventHandler.add(this.textQTBar.element, 'keyup', this.keyUpQT, this);
5723
5742
  }
5724
5743
  if (this.tableQTBar) {
5725
5744
  EventHandler.add(this.tableQTBar.element, 'mousedown', this.onMouseDown, this);
5745
+ EventHandler.add(this.tableQTBar.element, 'keyup', this.keyUpQT, this);
5726
5746
  }
5727
5747
  };
5728
5748
  QuickToolbar.prototype.renderInlineQuickToolbar = function () {
@@ -5731,6 +5751,7 @@ var QuickToolbar = /** @__PURE__ @class */ (function () {
5731
5751
  this.inlineQTBar = this.createQTBar('Inline', 'MultiRow', this.parent.toolbarSettings.items, RenderType.InlineToolbar);
5732
5752
  this.renderFactory.addRenderer(RenderType.InlineToolbar, this.inlineQTBar);
5733
5753
  EventHandler.add(this.inlineQTBar.element, 'mousedown', this.onMouseDown, this);
5754
+ EventHandler.add(this.inlineQTBar.element, 'keyup', this.keyUpQT, this);
5734
5755
  }
5735
5756
  };
5736
5757
  /**
@@ -5813,7 +5834,10 @@ var QuickToolbar = /** @__PURE__ @class */ (function () {
5813
5834
  else {
5814
5835
  var closestAnchor = closest(target, 'a');
5815
5836
  target = closestAnchor ? closestAnchor : target;
5816
- if (target.tagName !== 'IMG' && target.tagName !== 'A' && (!closest(target, 'td,th') || !range.collapsed)) {
5837
+ var startNode = this.parent.getRange().startContainer.parentElement;
5838
+ var endNode = this.parent.getRange().endContainer.parentElement;
5839
+ if ((isNullOrUndefined(closest(startNode, 'A')) || isNullOrUndefined(closest(endNode, 'A'))) && (!closest(target, 'td,th') || !range.collapsed) &&
5840
+ (target.tagName !== 'IMG' || this.parent.getRange().startOffset !== this.parent.getRange().endOffset)) {
5817
5841
  if (this.parent.inlineMode.onSelection && range.collapsed) {
5818
5842
  return;
5819
5843
  }
@@ -5882,22 +5906,27 @@ var QuickToolbar = /** @__PURE__ @class */ (function () {
5882
5906
  QuickToolbar.prototype.destroy = function () {
5883
5907
  if (this.linkQTBar) {
5884
5908
  EventHandler.remove(this.linkQTBar.element, 'mousedown', this.onMouseDown);
5909
+ EventHandler.remove(this.linkQTBar.element, 'keyup', this.keyUpQT);
5885
5910
  this.linkQTBar.destroy();
5886
5911
  }
5887
5912
  if (this.textQTBar) {
5888
5913
  EventHandler.remove(this.textQTBar.element, 'mousedown', this.onMouseDown);
5914
+ EventHandler.remove(this.textQTBar.element, 'keyup', this.keyUpQT);
5889
5915
  this.textQTBar.destroy();
5890
5916
  }
5891
5917
  if (this.imageQTBar) {
5892
5918
  EventHandler.remove(this.imageQTBar.element, 'mousedown', this.onMouseDown);
5919
+ EventHandler.remove(this.imageQTBar.element, 'keyup', this.keyUpQT);
5893
5920
  this.imageQTBar.destroy();
5894
5921
  }
5895
5922
  if (this.tableQTBar) {
5896
5923
  EventHandler.remove(this.tableQTBar.element, 'mousedown', this.onMouseDown);
5924
+ EventHandler.remove(this.tableQTBar.element, 'keyup', this.keyUpQT);
5897
5925
  this.tableQTBar.destroy();
5898
5926
  }
5899
5927
  if (this.inlineQTBar) {
5900
5928
  EventHandler.remove(this.inlineQTBar.element, 'mousedown', this.onMouseDown);
5929
+ EventHandler.remove(this.inlineQTBar.element, 'keyup', this.keyUpQT);
5901
5930
  if (isIDevice()) {
5902
5931
  EventHandler.remove(document, 'selectionchange', this.selectionChangeHandler);
5903
5932
  }
@@ -14533,7 +14562,24 @@ var SelectionCommands = /** @__PURE__ @class */ (function () {
14533
14562
  }
14534
14563
  }
14535
14564
  }
14536
- InsertMethods.unwrap(cursorFormat);
14565
+ if ((['fontcolor', 'fontname', 'fontsize', 'backgroundcolor'].indexOf(format) > -1)) {
14566
+ if (format === 'fontcolor') {
14567
+ cursorFormat.style.color = value;
14568
+ }
14569
+ else if (format === 'fontname') {
14570
+ cursorFormat.style.fontFamily = value;
14571
+ }
14572
+ else if (format === 'fontsize') {
14573
+ cursorFormat.style.fontSize = value;
14574
+ }
14575
+ else {
14576
+ cursorFormat.style.backgroundColor = value;
14577
+ }
14578
+ cursorNode = cursorFormat;
14579
+ }
14580
+ else {
14581
+ InsertMethods.unwrap(cursorFormat);
14582
+ }
14537
14583
  }
14538
14584
  else {
14539
14585
  if (cursorNodes.length > 1 && range.startOffset > 0 && (cursorNodes[0].firstElementChild &&
@@ -19472,7 +19518,8 @@ var Link = /** @__PURE__ @class */ (function () {
19472
19518
  this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
19473
19519
  var isPopupOpen = this.quickToolObj.linkQTBar.element.classList.contains('e-rte-pop');
19474
19520
  if (target.nodeName === 'A' && (target.childNodes.length > 0 && target.childNodes[0].nodeName !== 'IMG') &&
19475
- e.args.target.nodeName !== 'IMG') {
19521
+ e.args.target.nodeName !== 'IMG' &&
19522
+ !isNullOrUndefined(closest(this.parent.getRange().startContainer.parentElement, 'A')) && !isNullOrUndefined(closest(this.parent.getRange().endContainer.parentElement, 'A'))) {
19476
19523
  if (isPopupOpen) {
19477
19524
  return;
19478
19525
  }
@@ -20652,7 +20699,7 @@ var Image = /** @__PURE__ @class */ (function () {
20652
20699
  var target = args.target;
20653
20700
  this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
20654
20701
  var isPopupOpen = this.quickToolObj.imageQTBar.element.classList.contains('e-rte-pop');
20655
- if (target.nodeName === 'IMG' && this.parent.quickToolbarModule) {
20702
+ if (target.nodeName === 'IMG' && this.parent.quickToolbarModule && this.parent.getRange().startOffset === this.parent.getRange().endOffset) {
20656
20703
  if (isPopupOpen) {
20657
20704
  return;
20658
20705
  }
@@ -20891,13 +20938,34 @@ var Image = /** @__PURE__ @class */ (function () {
20891
20938
  }
20892
20939
  };
20893
20940
  Image.prototype.imageRemovePost = function (src) {
20941
+ var proxy = this;
20942
+ var absoluteUrl = '';
20943
+ if (src.indexOf('http://') > -1 || src.indexOf('https://') > -1) {
20944
+ absoluteUrl = src;
20945
+ }
20946
+ else {
20947
+ absoluteUrl = new URL(src, document.baseURI).href;
20948
+ }
20949
+ this.removingImgName = absoluteUrl.replace(/^.*[\\\/]/, '');
20950
+ var xhr = new XMLHttpRequest();
20951
+ xhr.addEventListener("readystatechange", function () {
20952
+ if (this.readyState == 4 && this.status == 200) {
20953
+ proxy.triggerPost(this.response);
20954
+ }
20955
+ });
20956
+ xhr.open('GET', absoluteUrl);
20957
+ xhr.responseType = 'blob';
20958
+ xhr.send();
20959
+ };
20960
+ Image.prototype.triggerPost = function (response) {
20894
20961
  var removeUrl = this.parent.insertImageSettings.removeUrl;
20895
20962
  if (isNullOrUndefined(removeUrl) || removeUrl === '') {
20896
20963
  return;
20897
20964
  }
20965
+ var file = new File([response], this.removingImgName);
20898
20966
  var ajax = new Ajax(removeUrl, 'POST', true, null);
20899
20967
  var formData = new FormData();
20900
- formData.append(name, src);
20968
+ formData.append('UploadFiles', file);
20901
20969
  ajax.send(formData);
20902
20970
  };
20903
20971
  Image.prototype.caption = function (e) {
@@ -22655,7 +22723,9 @@ var Table = /** @__PURE__ @class */ (function () {
22655
22723
  }
22656
22724
  var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
22657
22725
  var closestTable = closest(target, 'table');
22658
- if (target && target.nodeName !== 'A' && target.nodeName !== 'IMG' && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
22726
+ var startNode = this.parent.getRange().startContainer.parentElement;
22727
+ var endNode = this.parent.getRange().endContainer.parentElement;
22728
+ if (target && target.nodeName !== 'A' && target.nodeName !== 'IMG' && startNode === endNode && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
22659
22729
  target.nodeName === 'TABLE' || (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable)))
22660
22730
  && !(range.startContainer.nodeType === 3 && !range.collapsed)) {
22661
22731
  var range_1 = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
@@ -22742,7 +22812,6 @@ var Table = /** @__PURE__ @class */ (function () {
22742
22812
  tdNode : target;
22743
22813
  removeClass(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), CLS_TABLE_SEL);
22744
22814
  if (target && (target.tagName === 'TD' || target.tagName === 'TH')) {
22745
- target.removeAttribute('class');
22746
22815
  addClass([target], CLS_TABLE_SEL);
22747
22816
  this.activeCell = target;
22748
22817
  this.curTable = (this.curTable) ? this.curTable : closest(target, 'table');
@@ -24317,6 +24386,7 @@ var EnterKeyAction = /** @__PURE__ @class */ (function () {
24317
24386
  detach(nearBlockNode);
24318
24387
  }
24319
24388
  }
24389
+ _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
24320
24390
  }
24321
24391
  else if (nearBlockNode.textContent.length === 0 && !(!isNullOrUndefined(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
24322
24392
  if (!isNullOrUndefined(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
@@ -25868,8 +25938,7 @@ var RichTextEditor = /** @__PURE__ @class */ (function (_super) {
25868
25938
  this.setProperties({ value: this.valueTemplate });
25869
25939
  }
25870
25940
  else {
25871
- var compiledString = compile(this.valueTemplate);
25872
- var compiledTemplate = compiledString({});
25941
+ var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
25873
25942
  for (var i = 0; i < compiledTemplate.length; i++) {
25874
25943
  var item = compiledTemplate[i];
25875
25944
  append([item], this.element);