@syncfusion/ej2-richtexteditor 23.1.36 → 23.1.39

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 (61) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/ej2-richtexteditor.min.js +3 -3
  3. package/dist/ej2-richtexteditor.umd.min.js +3 -3
  4. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-richtexteditor.es2015.js +93 -23
  6. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-richtexteditor.es5.js +93 -23
  8. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  9. package/dist/global/ej2-richtexteditor.min.js +3 -3
  10. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  11. package/dist/global/index.d.ts +2 -2
  12. package/package.json +11 -11
  13. package/src/editor-manager/plugin/inserthtml.js +1 -1
  14. package/src/editor-manager/plugin/ms-word-clean-up.js +11 -1
  15. package/src/editor-manager/plugin/selection-exec.js +1 -1
  16. package/src/rich-text-editor/actions/enter-key.js +3 -0
  17. package/src/rich-text-editor/actions/full-screen.js +3 -0
  18. package/src/rich-text-editor/actions/markdown-editor.js +3 -0
  19. package/src/rich-text-editor/actions/quick-toolbar.js +3 -0
  20. package/src/rich-text-editor/actions/toolbar.js +3 -0
  21. package/src/rich-text-editor/base/rich-text-editor.js +12 -2
  22. package/src/rich-text-editor/renderer/image-module.js +11 -0
  23. package/src/rich-text-editor/renderer/link-module.js +3 -0
  24. package/src/rich-text-editor/renderer/render.js +4 -0
  25. package/src/rich-text-editor/renderer/table-module.js +33 -18
  26. package/src/rich-text-editor/renderer/view-source.js +3 -0
  27. package/styles/bootstrap-dark.css +4 -4
  28. package/styles/bootstrap.css +4 -4
  29. package/styles/bootstrap4.css +4 -4
  30. package/styles/bootstrap5-dark.css +4 -4
  31. package/styles/bootstrap5.css +4 -4
  32. package/styles/fabric-dark.css +4 -4
  33. package/styles/fabric.css +4 -4
  34. package/styles/fluent-dark.css +4 -4
  35. package/styles/fluent.css +4 -4
  36. package/styles/highcontrast-light.css +4 -4
  37. package/styles/highcontrast.css +4 -4
  38. package/styles/material-dark.css +4 -4
  39. package/styles/material.css +4 -4
  40. package/styles/material3-dark.css +4 -4
  41. package/styles/material3.css +4 -4
  42. package/styles/rich-text-editor/_layout.scss +2 -2
  43. package/styles/rich-text-editor/bootstrap-dark.css +4 -4
  44. package/styles/rich-text-editor/bootstrap.css +4 -4
  45. package/styles/rich-text-editor/bootstrap4.css +4 -4
  46. package/styles/rich-text-editor/bootstrap5-dark.css +4 -4
  47. package/styles/rich-text-editor/bootstrap5.css +4 -4
  48. package/styles/rich-text-editor/fabric-dark.css +4 -4
  49. package/styles/rich-text-editor/fabric.css +4 -4
  50. package/styles/rich-text-editor/fluent-dark.css +4 -4
  51. package/styles/rich-text-editor/fluent.css +4 -4
  52. package/styles/rich-text-editor/highcontrast-light.css +4 -4
  53. package/styles/rich-text-editor/highcontrast.css +4 -4
  54. package/styles/rich-text-editor/material-dark.css +4 -4
  55. package/styles/rich-text-editor/material.css +4 -4
  56. package/styles/rich-text-editor/material3-dark.css +4 -4
  57. package/styles/rich-text-editor/material3.css +4 -4
  58. package/styles/rich-text-editor/tailwind-dark.css +4 -4
  59. package/styles/rich-text-editor/tailwind.css +4 -4
  60. package/styles/tailwind-dark.css +4 -4
  61. package/styles/tailwind.css +4 -4
@@ -5280,6 +5280,9 @@ class Toolbar$2 {
5280
5280
  * @deprecated
5281
5281
  */
5282
5282
  destroy() {
5283
+ if (isNullOrUndefined(this.parent)) {
5284
+ return;
5285
+ }
5283
5286
  if (this.isToolbarDestroyed()) {
5284
5287
  this.destroyToolbar();
5285
5288
  if (this.keyBoardModule) {
@@ -6761,6 +6764,9 @@ class QuickToolbar {
6761
6764
  * @deprecated
6762
6765
  */
6763
6766
  destroy() {
6767
+ if (isNullOrUndefined(this.parent)) {
6768
+ return;
6769
+ }
6764
6770
  if (this.linkQTBar) {
6765
6771
  EventHandler.remove(this.linkQTBar.element, 'mousedown', this.onMouseDown);
6766
6772
  EventHandler.remove(this.linkQTBar.element, 'keyup', this.keyUpQT);
@@ -10096,6 +10102,9 @@ class MarkdownEditor {
10096
10102
  * @deprecated
10097
10103
  */
10098
10104
  destroy() {
10105
+ if (isNullOrUndefined(this.parent)) {
10106
+ return;
10107
+ }
10099
10108
  this.removeEventListener();
10100
10109
  }
10101
10110
  moduleDestroy() {
@@ -13114,7 +13123,7 @@ class InsertHtml {
13114
13123
  let range = nodeSelection.getRange(docElement);
13115
13124
  if (range.startContainer === editNode && range.startContainer === range.endContainer && range.startOffset === 0 &&
13116
13125
  range.startOffset === range.endOffset && editNode.textContent.length === 0 &&
13117
- (editNode.children[0].tagName === 'P' || (editNode.children[0].tagName === 'BR'))) {
13126
+ (editNode.children[0].tagName === 'P' || editNode.children[0].tagName === 'DIV' || (editNode.children[0].tagName === 'BR'))) {
13118
13127
  nodeSelection.setSelectionText(docElement, range.startContainer.children[0], range.startContainer.children[0], 0, 0);
13119
13128
  range = nodeSelection.getRange(docElement);
13120
13129
  }
@@ -16820,7 +16829,7 @@ class SelectionBasedExec {
16820
16829
  keyDownHandler(e) {
16821
16830
  const validFormats = ['bold', 'italic', 'underline', 'strikethrough', 'superscript',
16822
16831
  'subscript', 'uppercase', 'lowercase'];
16823
- if (e.event.ctrlKey && validFormats.indexOf(e.event.action) > -1) {
16832
+ if ((e.event.ctrlKey || e.event.metaKey) && validFormats.indexOf(e.event.action) > -1) {
16824
16833
  e.event.preventDefault();
16825
16834
  SelectionCommands.applyFormat(this.parent.currentDocument, e.event.action, this.parent.editableElement, e.enterAction);
16826
16835
  this.callBack(e, e.event.action);
@@ -18189,10 +18198,20 @@ class MsWordPaste {
18189
18198
  temp.style.listStyleType = collection[index].listStyleTypeName;
18190
18199
  }
18191
18200
  else if (collection[index].nestedLevel === pLevel) {
18192
- if (prevList.parentElement.tagName.toLowerCase() === collection[index].listType) {
18201
+ if (!isNullOrUndefined(prevList) && !isNullOrUndefined(prevList.parentElement)
18202
+ && prevList.parentElement.tagName.toLowerCase() === collection[index].listType) {
18193
18203
  prevList.parentElement.appendChild(prevList = createElement('li'));
18194
18204
  prevList.appendChild(pElement);
18195
18205
  }
18206
+ else if (isNullOrUndefined(prevList)) {
18207
+ temp = createElement(collection[index].listType);
18208
+ temp.style.listStyleType = collection[index].listStyleTypeName;
18209
+ prevList = createElement('li');
18210
+ prevList.appendChild(pElement);
18211
+ temp.appendChild(prevList);
18212
+ temp.setAttribute('level', collection[index].nestedLevel.toString());
18213
+ root.appendChild(temp);
18214
+ }
18196
18215
  else {
18197
18216
  temp = createElement(collection[index].listType);
18198
18217
  temp.style.listStyleType = collection[index].listStyleTypeName;
@@ -22492,6 +22511,9 @@ class FullScreen {
22492
22511
  * @deprecated
22493
22512
  */
22494
22513
  destroy() {
22514
+ if (isNullOrUndefined(this.parent)) {
22515
+ return;
22516
+ }
22495
22517
  if (this.parent.element.classList.contains(CLS_FULL_SCREEN)) {
22496
22518
  this.toggleParentOverflow(false);
22497
22519
  }
@@ -23557,6 +23579,9 @@ class Render {
23557
23579
  * @returns {void}
23558
23580
  */
23559
23581
  destroy() {
23582
+ if (isNullOrUndefined(this.parent)) {
23583
+ return;
23584
+ }
23560
23585
  this.removeEventListener();
23561
23586
  }
23562
23587
  moduleDestroy() {
@@ -24125,6 +24150,9 @@ class Link {
24125
24150
  * @deprecated
24126
24151
  */
24127
24152
  destroy() {
24153
+ if (isNullOrUndefined(this.parent)) {
24154
+ return;
24155
+ }
24128
24156
  this.removeEventListener();
24129
24157
  }
24130
24158
  moduleDestroy() {
@@ -25607,6 +25635,14 @@ class Image$1 {
25607
25635
  this.prevSelectedImgEle.style.outline = '';
25608
25636
  }
25609
25637
  }
25638
+ if (target.tagName !== 'IMG') {
25639
+ let items = this.contentModule.getEditPanel().querySelectorAll('img');
25640
+ for (let i = 0; i < items.length; i++) {
25641
+ removeClass([items[i]], 'e-img-focus');
25642
+ removeClass([items[i]], 'e-resize');
25643
+ items[i].style.maxWidth = '';
25644
+ }
25645
+ }
25610
25646
  }
25611
25647
  removeResizeEle() {
25612
25648
  EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
@@ -26385,6 +26421,9 @@ class Image$1 {
26385
26421
  /* eslint-enable */
26386
26422
  destroy() {
26387
26423
  this.prevSelectedImgEle = undefined;
26424
+ if (isNullOrUndefined(this.parent)) {
26425
+ return;
26426
+ }
26388
26427
  this.removeEventListener();
26389
26428
  }
26390
26429
  moduleDestroy() {
@@ -28897,6 +28936,9 @@ class ViewSource {
28897
28936
  * @deprecated
28898
28937
  */
28899
28938
  destroy() {
28939
+ if (isNullOrUndefined(this.parent)) {
28940
+ return;
28941
+ }
28900
28942
  this.removeEventListener();
28901
28943
  }
28902
28944
  moduleDestroy() {
@@ -28965,6 +29007,9 @@ class Table {
28965
29007
  this.parent.off(bindCssClass, this.setCssClass);
28966
29008
  this.parent.off(destroy, this.destroy);
28967
29009
  this.parent.off(moduleDestroy, this.moduleDestroy);
29010
+ if (!Browser.isDevice && this.parent.tableSettings.resize) {
29011
+ EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
29012
+ }
28968
29013
  }
28969
29014
  updateCss(currentObj, e) {
28970
29015
  if (currentObj && e.cssClass) {
@@ -29505,7 +29550,12 @@ class Table {
29505
29550
  const columns = table.rows[this.calMaxCol(table)].cells;
29506
29551
  const rows = [];
29507
29552
  for (let i = 0; i < table.rows.length; i++) {
29508
- rows.push(Array.prototype.slice.call(table.rows[i].cells, 0, 1)[0]);
29553
+ for (let j = 0; j < table.rows[i].cells.length; j++) {
29554
+ if (!table.rows[i].cells[j].hasAttribute('rowspan')) {
29555
+ rows.push(Array.prototype.slice.call(table.rows[i].cells, 0, table.rows[i].cells.length)[j]);
29556
+ break;
29557
+ }
29558
+ }
29509
29559
  }
29510
29560
  const height = parseInt(getComputedStyle(table).height, 10);
29511
29561
  const width = parseInt(getComputedStyle(table).width, 10);
@@ -29751,6 +29801,7 @@ class Table {
29751
29801
  const currentTdElement = this.curTable.closest('td');
29752
29802
  const args = { event: e, requestType: 'table' };
29753
29803
  let isRowCellsMerged = false;
29804
+ let isColCellsMerged = false;
29754
29805
  let mergedCellIndex;
29755
29806
  let mergedElement;
29756
29807
  this.parent.trigger(onResize, args, (resizingArgs) => {
@@ -29780,7 +29831,7 @@ class Table {
29780
29831
  const width = parseFloat(this.columnEle.offsetWidth.toString());
29781
29832
  const cellRow = this.curTable.rows[0].cells[0].nodeName === 'TH' ? 1 : 0;
29782
29833
  let currentTableWidth;
29783
- if (this.curTable.style.width !== '') {
29834
+ if (this.curTable.style.width !== '' && this.curTable.style.width.includes('%')) {
29784
29835
  currentTableWidth = parseFloat(this.curTable.style.width.split('%')[0]);
29785
29836
  }
29786
29837
  else {
@@ -29843,6 +29894,8 @@ class Table {
29843
29894
  let isMergedEleResize = false;
29844
29895
  let leftTableCell;
29845
29896
  let rightTableCell;
29897
+ isColCellsMerged = false;
29898
+ isRowCellsMerged = false;
29846
29899
  /* eslint-disable */
29847
29900
  for (let j = 0; j < currentRow.cells.length; j++) {
29848
29901
  if (currentRow.cells[j].hasAttribute('rowspan') && j <= this.colIndex) {
@@ -29850,6 +29903,11 @@ class Table {
29850
29903
  mergedCellIndex = i;
29851
29904
  mergedElement = currentRow.cells[j];
29852
29905
  }
29906
+ else if (currentRow.cells[j].hasAttribute('colspan') && j <= currentRow.cells.length) {
29907
+ isColCellsMerged = true;
29908
+ mergedCellIndex = i;
29909
+ mergedElement = currentRow.cells[j];
29910
+ }
29853
29911
  }
29854
29912
  if (!isNullOrUndefined(currentRow.cells[i]) && currentRow.cells[i].hasAttribute('colspan')) {
29855
29913
  index = parseInt(currentRow.cells[i].getAttribute('colspan'), 10) - 1;
@@ -29857,14 +29915,14 @@ class Table {
29857
29915
  else {
29858
29916
  index = this.colIndex;
29859
29917
  }
29860
- if (isRowCellsMerged) {
29918
+ if (isRowCellsMerged || isColCellsMerged) {
29861
29919
  let currentResizeRow;
29862
29920
  if (currentRow.cells.length < cellColl.length) {
29863
- index = currentRow.cells.length === this.colIndex ?
29864
- this.colIndex - 1 : this.colIndex - (this.colIndex - 1);
29921
+ index = currentRow.cells.length === this.colIndex || currentRow === this.curTable.rows[this.curTable.rows.length - 1] ?
29922
+ this.colIndex - 1 : this.colIndex;
29865
29923
  currentResizeRow = this.curTable.rows[!isNullOrUndefined(mergedCellIndex) ?
29866
29924
  mergedCellIndex : this.colIndex - 1];
29867
- if (currentResizeRow && (currentResizeRow.cells[this.colIndex - 1] === mergedElement ||
29925
+ if (currentResizeRow && currentResizeRow !== currentRow && (currentResizeRow.cells[this.colIndex - 1] === mergedElement ||
29868
29926
  currentResizeRow.cells[currentResizeRow.cells.length - 1] === mergedElement)) {
29869
29927
  isMergedEleResize = true;
29870
29928
  }
@@ -29879,10 +29937,10 @@ class Table {
29879
29937
  currentResizeRow.cells[currentResizeRow.cells.length - 1] !== mergedElement) ?
29880
29938
  currentResizeRow.cells[this.colIndex - 1] : currentRow.cells[currentRow.cells.length - 1];
29881
29939
  rightTableCell = !isMergedEleResize ? currentRow.cells[index] : rightTableCell && rightTableCell.hasAttribute('rowspan') ?
29882
- rightTableCell : currentResizeRow && currentResizeRow.cells[currentResizeRow.cells.length - 1] !== mergedElement ?
29940
+ currentResizeRow.cells[this.colIndex] : currentResizeRow && currentResizeRow.cells[currentResizeRow.cells.length - 1] !== mergedElement ?
29883
29941
  currentRow.cells[index - 1] : currentResizeRow.cells[currentResizeRow.cells.length - 1];
29884
29942
  }
29885
- if (!isNullOrUndefined(currentRow.cells[index - 1]) && !isRowCellsMerged) {
29943
+ if (!isNullOrUndefined(currentRow.cells[index - 1]) && !isRowCellsMerged && !isColCellsMerged) {
29886
29944
  currentRow.cells[index - 1].style.width =
29887
29945
  this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
29888
29946
  }
@@ -29892,7 +29950,7 @@ class Table {
29892
29950
  this.convertPixelToPercentage(leftColumnWidth, tableWidth) + '%';
29893
29951
  }
29894
29952
  }
29895
- if (!isNullOrUndefined(currentRow.cells[index]) && !isRowCellsMerged) {
29953
+ if (!isNullOrUndefined(currentRow.cells[index]) && !isRowCellsMerged && !isColCellsMerged) {
29896
29954
  currentRow.cells[index].style.width =
29897
29955
  this.convertPixelToPercentage(rightColWidth, tableWidth) + '%';
29898
29956
  }
@@ -29922,9 +29980,6 @@ class Table {
29922
29980
  this.updateHelper();
29923
29981
  }
29924
29982
  else if (this.resizeBtnStat.tableBox) {
29925
- if (!Browser.isDevice) {
29926
- EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
29927
- }
29928
29983
  if (currentTdElement) {
29929
29984
  const tableBoxPosition = this.curTable.getBoundingClientRect().left
29930
29985
  - currentTdElement.getBoundingClientRect().left;
@@ -29935,9 +29990,11 @@ class Table {
29935
29990
  this.curTable.style.width = widthType ? this.convertPixelToPercentage(tableWidth + mouseX, widthCompare) + '%'
29936
29991
  : tableWidth + mouseX + 'px';
29937
29992
  this.curTable.style.height = tableHeight + mouseY + 'px';
29938
- tableReBox.classList.add('e-rbox-select');
29939
- tableReBox.style.cssText = 'top: ' + (this.calcPos(this.curTable).top + tableHeight - 4) +
29940
- 'px; left:' + (this.calcPos(this.curTable).left + tableWidth - 4) + 'px;';
29993
+ if (!isNullOrUndefined(tableReBox)) {
29994
+ tableReBox.classList.add('e-rbox-select');
29995
+ tableReBox.style.cssText = 'top: ' + (this.calcPos(this.curTable).top + tableHeight - 4) +
29996
+ 'px; left:' + (this.calcPos(this.curTable).left + tableWidth - 4) + 'px;';
29997
+ }
29941
29998
  }
29942
29999
  }
29943
30000
  });
@@ -29972,9 +30029,6 @@ class Table {
29972
30029
  EventHandler.remove(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd);
29973
30030
  if (this.contentModule.getEditPanel().querySelector('.e-table-box') &&
29974
30031
  this.contentModule.getEditPanel().contains(this.contentModule.getEditPanel().querySelector('.e-table-box'))) {
29975
- if (!Browser.isDevice) {
29976
- EventHandler.add(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper, this);
29977
- }
29978
30032
  this.removeResizeElement();
29979
30033
  }
29980
30034
  if (this.helper && this.contentModule.getEditPanel().contains(this.helper)) {
@@ -30400,6 +30454,9 @@ class Table {
30400
30454
  * @deprecated
30401
30455
  */
30402
30456
  destroy() {
30457
+ if (isNullOrUndefined(this.parent)) {
30458
+ return;
30459
+ }
30403
30460
  this.removeEventListener();
30404
30461
  }
30405
30462
  moduleDestroy() {
@@ -31162,6 +31219,9 @@ class EnterKeyAction {
31162
31219
  this.parent.on(moduleDestroy, this.moduleDestroy, this);
31163
31220
  }
31164
31221
  destroy() {
31222
+ if (isNullOrUndefined(this.parent)) {
31223
+ return;
31224
+ }
31165
31225
  this.removeEventListener();
31166
31226
  }
31167
31227
  moduleDestroy() {
@@ -32324,7 +32384,7 @@ let RichTextEditor = class RichTextEditor extends Component {
32324
32384
  }
32325
32385
  if (e.action !== 'insert-link' &&
32326
32386
  e.action !== 'format-copy' && e.action !== 'format-paste' &&
32327
- (!e.target || !e.target.classList.contains('e-mention')) &&
32387
+ (!e.target || (e.target.classList.contains('e-mention') && e.code !== 'Tab')) &&
32328
32388
  (e.action && e.action !== 'paste' && e.action !== 'space'
32329
32389
  || e.which === 9 || (e.code === 'Backspace' && e.which === 8))) {
32330
32390
  let FormatPainterEscapeAction = false;
@@ -32629,6 +32689,8 @@ let RichTextEditor = class RichTextEditor extends Component {
32629
32689
  this.toolbarModule.destroy();
32630
32690
  }
32631
32691
  this.notify(moduleDestroy, {});
32692
+ super.destroy();
32693
+ this.isRendered = false;
32632
32694
  return;
32633
32695
  }
32634
32696
  this.notify(destroy, {});
@@ -33425,13 +33487,17 @@ let RichTextEditor = class RichTextEditor extends Component {
33425
33487
  heightValue = heightPercent && rteHeightPercent ? rteHeightPercent : rteHeight - (tbHeight + rzHeight) + 'px';
33426
33488
  }
33427
33489
  }
33428
- if (target !== 'windowResize') {
33490
+ if (target !== 'windowResize' || heightPercent) {
33429
33491
  if (this.iframeSettings.enable) {
33430
33492
  if (heightValue !== 'auto') {
33431
33493
  setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
33432
33494
  }
33433
33495
  }
33434
33496
  else {
33497
+ if (target === 'windowResize' && heightPercent) {
33498
+ // cntEle hide the borderBottom of RichTextEditor. so removed the 2px of cntEle height.
33499
+ heightValue = parseInt(heightValue) - 2 + 'px';
33500
+ }
33435
33501
  setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
33436
33502
  }
33437
33503
  }
@@ -33640,6 +33706,10 @@ let RichTextEditor = class RichTextEditor extends Component {
33640
33706
  this.toolbarModule.refreshToolbarOverflow();
33641
33707
  isExpand = this.toolbarModule.baseToolbar.toolbarObj.element.classList.contains(CLS_EXPAND_OPEN);
33642
33708
  }
33709
+ if (this.iframeSettings.enable !== true) {
33710
+ // When resize the window,border bottom of cntEle and this.element border visible separatly.so none the cntEle borderBottom.
33711
+ this.contentModule.getPanel().style.borderBottom = 'none';
33712
+ }
33643
33713
  this.setContentHeight('windowResize', isExpand);
33644
33714
  this.notify(windowResize, null);
33645
33715
  }