@syncfusion/ej2-richtexteditor 19.3.45 → 19.3.53

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 (48) hide show
  1. package/CHANGELOG.md +32 -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 +64 -10
  5. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-richtexteditor.es5.js +64 -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.js +5 -2
  16. package/src/rich-text-editor/base/rich-text-editor.js +1 -2
  17. package/src/rich-text-editor/renderer/image-module.d.ts +2 -0
  18. package/src/rich-text-editor/renderer/image-module.js +23 -2
  19. package/src/rich-text-editor/renderer/link-module.js +3 -2
  20. package/src/rich-text-editor/renderer/table-module.js +3 -2
  21. package/src/rich-text-editor/renderer/toolbar-renderer.js +3 -2
  22. package/styles/bootstrap-dark.css +4 -0
  23. package/styles/bootstrap.css +4 -0
  24. package/styles/bootstrap4.css +4 -0
  25. package/styles/bootstrap5-dark.css +4 -0
  26. package/styles/bootstrap5.css +4 -0
  27. package/styles/fabric-dark.css +4 -0
  28. package/styles/fabric.css +4 -0
  29. package/styles/highcontrast-light.css +4 -0
  30. package/styles/highcontrast.css +4 -0
  31. package/styles/material-dark.css +4 -0
  32. package/styles/material.css +4 -0
  33. package/styles/rich-text-editor/_layout.scss +4 -0
  34. package/styles/rich-text-editor/bootstrap-dark.css +4 -0
  35. package/styles/rich-text-editor/bootstrap.css +4 -0
  36. package/styles/rich-text-editor/bootstrap4.css +4 -0
  37. package/styles/rich-text-editor/bootstrap5-dark.css +4 -0
  38. package/styles/rich-text-editor/bootstrap5.css +4 -0
  39. package/styles/rich-text-editor/fabric-dark.css +4 -0
  40. package/styles/rich-text-editor/fabric.css +4 -0
  41. package/styles/rich-text-editor/highcontrast-light.css +4 -0
  42. package/styles/rich-text-editor/highcontrast.css +4 -0
  43. package/styles/rich-text-editor/material-dark.css +4 -0
  44. package/styles/rich-text-editor/material.css +4 -0
  45. package/styles/rich-text-editor/tailwind-dark.css +4 -0
  46. package/styles/rich-text-editor/tailwind.css +4 -0
  47. package/styles/tailwind-dark.css +4 -0
  48. package/styles/tailwind.css +4 -0
@@ -2739,7 +2739,8 @@ class ToolbarRenderer {
2739
2739
  this.parent.notify(beforeDropDownItemRender, args);
2740
2740
  }
2741
2741
  dropDownOpen(args) {
2742
- if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1) {
2742
+ if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNullOrUndefined(args.element.parentElement.querySelector('.e-cell-merge')) &&
2743
+ (!isNullOrUndefined(args.element.parentElement.querySelector('.e-cell-horizontal-split')) || !isNullOrUndefined(args.element.parentElement.querySelector('.e-cell-vertical-split')))) {
2743
2744
  const listEle = args.element.querySelectorAll('li');
2744
2745
  if (this.parent.inputElement.querySelectorAll('.e-cell-select').length === 1) {
2745
2746
  addClass([listEle[0]], 'e-disabled');
@@ -3591,6 +3592,11 @@ class DropDownButtons {
3591
3592
  for (const prop of Object.keys(newProp)) {
3592
3593
  switch (prop) {
3593
3594
  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
+ }
3594
3600
  if (this.fontNameDropDown) {
3595
3601
  for (const fontFamily$$1 of Object.keys(newProp.fontFamily)) {
3596
3602
  switch (fontFamily$$1) {
@@ -3621,6 +3627,11 @@ class DropDownButtons {
3621
3627
  }
3622
3628
  break;
3623
3629
  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
+ }
3624
3635
  if (this.fontSizeDropDown) {
3625
3636
  for (const fontSize$$1 of Object.keys(newProp.fontSize)) {
3626
3637
  switch (fontSize$$1) {
@@ -5761,7 +5772,10 @@ class QuickToolbar {
5761
5772
  else {
5762
5773
  const closestAnchor = closest(target, 'a');
5763
5774
  target = closestAnchor ? closestAnchor : target;
5764
- if (target.tagName !== 'IMG' && target.tagName !== 'A' && (!closest(target, 'td,th') || !range.collapsed)) {
5775
+ const startNode = this.parent.getRange().startContainer.parentElement;
5776
+ const endNode = this.parent.getRange().endContainer.parentElement;
5777
+ if ((isNullOrUndefined(closest(startNode, 'A')) || isNullOrUndefined(closest(endNode, 'A'))) && (!closest(target, 'td,th') || !range.collapsed) &&
5778
+ (target.tagName !== 'IMG' || this.parent.getRange().startOffset !== this.parent.getRange().endOffset)) {
5765
5779
  if (this.parent.inlineMode.onSelection && range.collapsed) {
5766
5780
  return;
5767
5781
  }
@@ -14415,7 +14429,24 @@ class SelectionCommands {
14415
14429
  }
14416
14430
  }
14417
14431
  }
14418
- InsertMethods.unwrap(cursorFormat);
14432
+ if ((['fontcolor', 'fontname', 'fontsize', 'backgroundcolor'].indexOf(format) > -1)) {
14433
+ if (format === 'fontcolor') {
14434
+ cursorFormat.style.color = value;
14435
+ }
14436
+ else if (format === 'fontname') {
14437
+ cursorFormat.style.fontFamily = value;
14438
+ }
14439
+ else if (format === 'fontsize') {
14440
+ cursorFormat.style.fontSize = value;
14441
+ }
14442
+ else {
14443
+ cursorFormat.style.backgroundColor = value;
14444
+ }
14445
+ cursorNode = cursorFormat;
14446
+ }
14447
+ else {
14448
+ InsertMethods.unwrap(cursorFormat);
14449
+ }
14419
14450
  }
14420
14451
  else {
14421
14452
  if (cursorNodes.length > 1 && range.startOffset > 0 && (cursorNodes[0].firstElementChild &&
@@ -19376,7 +19407,8 @@ class Link {
19376
19407
  this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
19377
19408
  const isPopupOpen = this.quickToolObj.linkQTBar.element.classList.contains('e-rte-pop');
19378
19409
  if (target.nodeName === 'A' && (target.childNodes.length > 0 && target.childNodes[0].nodeName !== 'IMG') &&
19379
- e.args.target.nodeName !== 'IMG') {
19410
+ e.args.target.nodeName !== 'IMG' &&
19411
+ !isNullOrUndefined(closest(this.parent.getRange().startContainer.parentElement, 'A')) && !isNullOrUndefined(closest(this.parent.getRange().endContainer.parentElement, 'A'))) {
19380
19412
  if (isPopupOpen) {
19381
19413
  return;
19382
19414
  }
@@ -20551,7 +20583,7 @@ class Image {
20551
20583
  const target = args.target;
20552
20584
  this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
20553
20585
  const isPopupOpen = this.quickToolObj.imageQTBar.element.classList.contains('e-rte-pop');
20554
- if (target.nodeName === 'IMG' && this.parent.quickToolbarModule) {
20586
+ if (target.nodeName === 'IMG' && this.parent.quickToolbarModule && this.parent.getRange().startOffset === this.parent.getRange().endOffset) {
20555
20587
  if (isPopupOpen) {
20556
20588
  return;
20557
20589
  }
@@ -20788,13 +20820,34 @@ class Image {
20788
20820
  }
20789
20821
  }
20790
20822
  imageRemovePost(src) {
20823
+ const proxy = this;
20824
+ let absoluteUrl = '';
20825
+ if (src.indexOf('http://') > -1 || src.indexOf('https://') > -1) {
20826
+ absoluteUrl = src;
20827
+ }
20828
+ else {
20829
+ absoluteUrl = new URL(src, document.baseURI).href;
20830
+ }
20831
+ this.removingImgName = absoluteUrl.replace(/^.*[\\\/]/, '');
20832
+ const xhr = new XMLHttpRequest();
20833
+ xhr.addEventListener("readystatechange", function () {
20834
+ if (this.readyState == 4 && this.status == 200) {
20835
+ proxy.triggerPost(this.response);
20836
+ }
20837
+ });
20838
+ xhr.open('GET', absoluteUrl);
20839
+ xhr.responseType = 'blob';
20840
+ xhr.send();
20841
+ }
20842
+ triggerPost(response) {
20791
20843
  const removeUrl = this.parent.insertImageSettings.removeUrl;
20792
20844
  if (isNullOrUndefined(removeUrl) || removeUrl === '') {
20793
20845
  return;
20794
20846
  }
20847
+ const file = new File([response], this.removingImgName);
20795
20848
  const ajax = new Ajax(removeUrl, 'POST', true, null);
20796
20849
  const formData = new FormData();
20797
- formData.append(name, src);
20850
+ formData.append('UploadFiles', file);
20798
20851
  ajax.send(formData);
20799
20852
  }
20800
20853
  caption(e) {
@@ -22538,7 +22591,9 @@ class Table {
22538
22591
  }
22539
22592
  const range = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
22540
22593
  const closestTable = closest(target, 'table');
22541
- if (target && target.nodeName !== 'A' && target.nodeName !== 'IMG' && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
22594
+ const startNode = this.parent.getRange().startContainer.parentElement;
22595
+ const endNode = this.parent.getRange().endContainer.parentElement;
22596
+ if (target && target.nodeName !== 'A' && target.nodeName !== 'IMG' && startNode === endNode && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
22542
22597
  target.nodeName === 'TABLE' || (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable)))
22543
22598
  && !(range.startContainer.nodeType === 3 && !range.collapsed)) {
22544
22599
  const range = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
@@ -22625,7 +22680,6 @@ class Table {
22625
22680
  tdNode : target;
22626
22681
  removeClass(this.contentModule.getEditPanel().querySelectorAll('table td, table th'), CLS_TABLE_SEL);
22627
22682
  if (target && (target.tagName === 'TD' || target.tagName === 'TH')) {
22628
- target.removeAttribute('class');
22629
22683
  addClass([target], CLS_TABLE_SEL);
22630
22684
  this.activeCell = target;
22631
22685
  this.curTable = (this.curTable) ? this.curTable : closest(target, 'table');
@@ -24073,6 +24127,7 @@ class EnterKeyAction {
24073
24127
  detach(nearBlockNode);
24074
24128
  }
24075
24129
  }
24130
+ this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
24076
24131
  }
24077
24132
  else if (nearBlockNode.textContent.length === 0 && !(!isNullOrUndefined(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
24078
24133
  if (!isNullOrUndefined(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
@@ -25594,8 +25649,7 @@ let RichTextEditor = class RichTextEditor extends Component {
25594
25649
  this.setProperties({ value: this.valueTemplate });
25595
25650
  }
25596
25651
  else {
25597
- const compiledString = compile(this.valueTemplate);
25598
- const compiledTemplate = compiledString({});
25652
+ const compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
25599
25653
  for (let i = 0; i < compiledTemplate.length; i++) {
25600
25654
  const item = compiledTemplate[i];
25601
25655
  append([item], this.element);