@syncfusion/ej2-richtexteditor 27.1.50 → 27.1.52

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 (34) hide show
  1. package/dist/ej2-richtexteditor.umd.min.js +2 -2
  2. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  3. package/dist/es6/ej2-richtexteditor.es2015.js +780 -210
  4. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  5. package/dist/es6/ej2-richtexteditor.es5.js +171 -92
  6. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  7. package/dist/global/ej2-richtexteditor.min.js +2 -2
  8. package/dist/global/ej2-richtexteditor.min.js.map +1 -1
  9. package/dist/global/index.d.ts +1 -1
  10. package/package.json +10 -10
  11. package/src/common/editor-styles.d.ts +1 -0
  12. package/src/common/editor-styles.js +1 -0
  13. package/src/common/interface.d.ts +10 -0
  14. package/src/editor-manager/plugin/alignments.js +1 -1
  15. package/src/editor-manager/plugin/indents.js +1 -1
  16. package/src/editor-manager/plugin/inserthtml.js +37 -9
  17. package/src/editor-manager/plugin/lists.js +4 -3
  18. package/src/editor-manager/plugin/ms-word-clean-up.js +14 -2
  19. package/src/editor-manager/plugin/table.js +3 -0
  20. package/src/rich-text-editor/actions/base-toolbar.js +1 -1
  21. package/src/rich-text-editor/actions/dropdown-buttons.js +0 -6
  22. package/src/rich-text-editor/actions/enter-key.js +8 -2
  23. package/src/rich-text-editor/actions/html-editor.js +3 -2
  24. package/src/rich-text-editor/actions/paste-clean-up.js +2 -1
  25. package/src/rich-text-editor/base/rich-text-editor-model.d.ts +8 -8
  26. package/src/rich-text-editor/base/rich-text-editor.d.ts +8 -8
  27. package/src/rich-text-editor/base/rich-text-editor.js +8 -4
  28. package/src/rich-text-editor/renderer/content-renderer.d.ts +1 -1
  29. package/src/rich-text-editor/renderer/content-renderer.js +9 -2
  30. package/src/rich-text-editor/renderer/iframe-content-renderer.js +21 -8
  31. package/src/rich-text-editor/renderer/image-module.d.ts +2 -0
  32. package/src/rich-text-editor/renderer/image-module.js +21 -12
  33. package/src/rich-text-editor/renderer/link-module.js +1 -1
  34. package/dist/ej2-richtexteditor.min.js +0 -10
@@ -1,4 +1,4 @@
1
- import { isNullOrUndefined, Browser, addClass, removeClass, selectAll as selectAll$1, createElement, detach, SanitizeHtmlHelper, extend, EventHandler, closest, getInstance, formatUnit, select, Ajax, Base, Property, Event, NotifyPropertyChanges, ChildProperty, KeyboardEvents as KeyboardEvents$1, setStyleAttribute, getUniqueID, append, debounce, Observer, prepend, attributes, getComponent, getEnumValue, Complex, Component, print, L10n, compile, Touch } from '@syncfusion/ej2-base';
1
+ import { isNullOrUndefined, Browser, addClass, removeClass, selectAll as selectAll$1, createElement, detach, SanitizeHtmlHelper, extend, EventHandler, closest, getInstance, formatUnit, select, Ajax, Base, Property, Event as Event$1, NotifyPropertyChanges, ChildProperty, KeyboardEvents as KeyboardEvents$1, setStyleAttribute, getUniqueID, append, debounce, Observer, prepend, attributes, getComponent, getEnumValue, Complex, Component, print, L10n, compile, Touch } from '@syncfusion/ej2-base';
2
2
  import { Toolbar as Toolbar$1 } from '@syncfusion/ej2-navigations';
3
3
  import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
4
4
  import { Tooltip, Popup, Dialog, isCollide, getScrollableParent } from '@syncfusion/ej2-popups';
@@ -3720,9 +3720,15 @@ class ContentRender {
3720
3720
  id: this.parent.getID() + '_rte-edit-view',
3721
3721
  attrs: {
3722
3722
  'contenteditable': 'true'
3723
- },
3724
- innerHTML: rteContent
3723
+ }
3725
3724
  });
3725
+ if (!isNullOrUndefined(this.parent.fontFamily.default)) {
3726
+ this.editableElement.style.fontFamily = this.parent.fontFamily.default;
3727
+ }
3728
+ if (!isNullOrUndefined(this.parent.fontSize.default)) {
3729
+ this.editableElement.style.fontSize = this.parent.fontSize.default;
3730
+ }
3731
+ this.editableElement.innerHTML = rteContent;
3726
3732
  div.appendChild(this.editableElement);
3727
3733
  this.setPanel(div);
3728
3734
  rteObj.rootContainer.appendChild(div);
@@ -6514,7 +6520,7 @@ class Link {
6514
6520
  // eslint-disable-next-line
6515
6521
  insertlink(e) {
6516
6522
  const linkEle = this.selfLink.dialogObj.element;
6517
- let linkUrl = linkEle.querySelector('.e-rte-linkurl').value;
6523
+ let linkUrl = linkEle.querySelector('.e-rte-linkurl').value.trim();
6518
6524
  let linkText = linkEle.querySelector('.e-rte-linkText').value;
6519
6525
  let linkTitle;
6520
6526
  if (this.selfLink.parent.editorMode === 'HTML') {
@@ -7291,6 +7297,17 @@ class Image$1 {
7291
7297
  return value;
7292
7298
  }
7293
7299
  }
7300
+ adjustDimensionsByAspectRatio(width, height, aspectRatio, isWidthPrimary) {
7301
+ if (isWidthPrimary) {
7302
+ height = Math.round(width / aspectRatio);
7303
+ width = Math.round(height * aspectRatio);
7304
+ }
7305
+ else {
7306
+ width = Math.round(height * aspectRatio);
7307
+ height = Math.round(width / aspectRatio);
7308
+ }
7309
+ return { width, height };
7310
+ }
7294
7311
  pixToPerc(expected, parentEle) {
7295
7312
  return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
7296
7313
  }
@@ -7331,23 +7348,21 @@ class Image$1 {
7331
7348
  const diffY = (pageY - this.pageY);
7332
7349
  const currentWidth = this.imgEle.clientWidth;
7333
7350
  const currentHeight = this.imgEle.clientHeight;
7334
- let width = diffX * resizeFactor[0] + currentWidth;
7335
- let height = diffY * resizeFactor[1] + currentHeight;
7336
- width = (width < 16) ? 16 : width;
7337
- height = (height < 16) ? 16 : height;
7338
- if (Math.abs(diffX) > Math.abs(diffY)) {
7339
- height = Math.round(width / this.aspectRatio);
7340
- width = Math.round(height * this.aspectRatio);
7341
- }
7342
- else {
7343
- width = Math.round(height * this.aspectRatio);
7344
- height = Math.round(width / this.aspectRatio);
7345
- }
7351
+ const width = diffX * resizeFactor[0] + currentWidth;
7352
+ const height = diffY * resizeFactor[1] + currentHeight;
7353
+ const dimensions = this.adjustDimensions(width, height, diffX, diffY, this.aspectRatio);
7346
7354
  this.pageX = pageX;
7347
7355
  this.pageY = pageY;
7348
- this.imgDupMouseMove(width + 'px', height + 'px', e);
7356
+ this.imgDupMouseMove(dimensions.width + 'px', dimensions.height + 'px', e);
7349
7357
  }
7350
7358
  }
7359
+ adjustDimensions(width, height, diffX, diffY, aspectRatio) {
7360
+ width = (width < 16) ? 16 : width;
7361
+ height = (height < 16) ? 16 : height;
7362
+ const isWidthPrimary = Math.abs(diffX) > Math.abs(diffY);
7363
+ const dimensions = this.adjustDimensionsByAspectRatio(width, height, aspectRatio, isWidthPrimary);
7364
+ return dimensions;
7365
+ }
7351
7366
  getResizeFactor(value) {
7352
7367
  return imageResizeFactor[value];
7353
7368
  }
@@ -8637,7 +8652,7 @@ class Image$1 {
8637
8652
  };
8638
8653
  proxy.inputUrl.setAttribute('disabled', 'true');
8639
8654
  if (isNullOrUndefined(proxy.parent.insertImageSettings.saveUrl) && this.isAllowedTypes
8640
- && !isNullOrUndefined(this.dialogObj)) {
8655
+ && !isNullOrUndefined(this.dialogObj) && selectArgs.filesData[0].size <= this.uploadObj.maxFileSize) {
8641
8656
  this.dialogObj.getButtons(0).element.removeAttribute('disabled');
8642
8657
  }
8643
8658
  });
@@ -11977,7 +11992,7 @@ __decorate([
11977
11992
  Property('keyup')
11978
11993
  ], KeyboardEvents.prototype, "eventName", void 0);
11979
11994
  __decorate([
11980
- Event()
11995
+ Event$1()
11981
11996
  ], KeyboardEvents.prototype, "keyAction", void 0);
11982
11997
  KeyboardEvents = KeyboardEvents_1 = __decorate([
11983
11998
  NotifyPropertyChanges
@@ -14524,128 +14539,624 @@ class DialogRenderer {
14524
14539
  }
14525
14540
  }
14526
14541
 
14542
+ const IFRAME_EDITOR_STYLES = `
14543
+ @charset "UTF-8";
14544
+
14545
+ html {
14546
+ height: auto;
14547
+ }
14548
+
14549
+ html, body {
14550
+ margin: 0;
14551
+ }
14552
+
14553
+ body {
14554
+ color: #333;
14555
+ word-wrap: break-word;
14556
+ }
14557
+
14558
+ .e-content {
14559
+ background: unset;
14560
+ box-sizing: border-box;
14561
+ min-height: 100px;
14562
+ outline: 0 solid transparent;
14563
+ padding: 16px;
14564
+ position: relative;
14565
+ overflow-x: auto;
14566
+ font-weight: normal;
14567
+ line-height: 1.5;
14568
+ font-size: 14px;
14569
+ text-align: inherit;
14570
+ font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
14571
+ }
14572
+
14573
+ .e-content p {
14574
+ margin: 0 0 10px;
14575
+ margin-bottom: 10px;
14576
+ }
14577
+
14578
+ .e-content h1 {
14579
+ font-size: 2.857em;
14580
+ font-weight: 600;
14581
+ line-height: 1.2;
14582
+ margin: 10px 0;
14583
+ }
14584
+
14585
+ .e-content h2 {
14586
+ font-size: 2.285em;
14587
+ font-weight: 600;
14588
+ line-height: 1.2;
14589
+ margin: 10px 0;
14590
+ }
14591
+
14592
+ .e-content h3 {
14593
+ font-size: 2em;
14594
+ font-weight: 600;
14595
+ line-height: 1.2;
14596
+ margin: 10px 0;
14597
+ }
14598
+
14599
+ .e-content h4 {
14600
+ font-size: 1.714em;
14601
+ font-weight: 600;
14602
+ line-height: 1.2;
14603
+ margin: 10px 0;
14604
+ }
14605
+
14606
+ .e-content h5 {
14607
+ font-size: 1.428em;
14608
+ font-weight: 600;
14609
+ line-height: 1.2;
14610
+ margin: 10px 0;
14611
+ }
14612
+
14613
+ .e-content h6 {
14614
+ font-size: 1.142em;
14615
+ font-weight: 600;
14616
+ line-height: 1.5;
14617
+ margin: 10px 0;
14618
+ }
14619
+
14620
+ .e-content blockquote {
14621
+ margin: 10px 0;
14622
+ padding-left: 12px;
14623
+ border-left: 2px solid #5c5c5c;
14624
+ }
14625
+
14626
+ .e-rtl.e-content blockquote {
14627
+ padding-left: 0;
14628
+ padding-right: 12px;
14629
+ }
14630
+
14631
+ .e-content pre {
14632
+ border: 0;
14633
+ border-radius: 0;
14634
+ color: #333;
14635
+ font-size: inherit;
14636
+ line-height: inherit;
14637
+ margin: 0 0 10px;
14638
+ overflow: visible;
14639
+ padding: 0;
14640
+ white-space: pre-wrap;
14641
+ word-break: inherit;
14642
+ word-wrap: break-word;
14643
+ }
14644
+
14645
+ .e-content code {
14646
+ background: #9d9d9d26;
14647
+ color: #ed484c;
14648
+ }
14649
+
14650
+ .e-content strong,
14651
+ .e-content b {
14652
+ font-weight: bold;
14653
+ }
14654
+
14655
+ .e-content a {
14656
+ text-decoration: none;
14657
+ user-select: auto;
14658
+ }
14659
+
14660
+ .e-content a:hover {
14661
+ text-decoration: underline;
14662
+ }
14663
+
14664
+ .e-content li {
14665
+ margin-bottom: 10px;
14666
+ }
14667
+
14668
+ .e-content li ol,
14669
+ .e-content li ul {
14670
+ margin-block-start: 10px;
14671
+ }
14672
+
14673
+ .e-content ul {
14674
+ list-style-type: disc;
14675
+ }
14676
+
14677
+ .e-content ul ul,
14678
+ .e-content ol ul {
14679
+ list-style-type: circle;
14680
+ }
14681
+
14682
+ .e-content ul ul ul,
14683
+ .e-content ol ul ul,
14684
+ .e-content ul ol ul,
14685
+ .e-content ol ol ul {
14686
+ list-style-type: square;
14687
+ }
14688
+
14689
+ .e-rte-image,
14690
+ .e-rte-video {
14691
+ border: 0;
14692
+ cursor: pointer;
14693
+ display: block;
14694
+ float: none;
14695
+ height: auto;
14696
+ margin: 5px auto;
14697
+ max-width: 100%;
14698
+ position: relative;
14699
+ }
14700
+
14701
+ .e-content p:last-child,
14702
+ .e-content pre:last-child,
14703
+ .e-content blockquote:last-child {
14704
+ margin-bottom: 0;
14705
+ }
14706
+
14707
+ .e-content h3 + h4,
14708
+ .e-content h4 + h5,
14709
+ .e-content h5 + h6 {
14710
+ margin-top: 0.6em;
14711
+ }
14712
+
14713
+ .e-content ul:last-child {
14714
+ margin-bottom: 0;
14715
+ }
14716
+
14717
+ .e-content table {
14718
+ margin-bottom: 10px;
14719
+ border-collapse: collapse;
14720
+ empty-cells: show;
14721
+ }
14722
+
14723
+ .e-content table.e-cell-select {
14724
+ position: relative;
14725
+ }
14726
+
14727
+ .e-content table.e-cell-select::after {
14728
+ content: '';
14729
+ position: absolute;
14730
+ top: 0;
14731
+ left: 0;
14732
+ right: 0;
14733
+ bottom: 0;
14734
+ border: 2px solid #4a90e2;
14735
+ pointer-events: none;
14736
+ }
14737
+
14738
+ table .e-cell-select {
14739
+ border: 1px double #4a90e2 !important;
14740
+ }
14741
+
14742
+ .e-content table.e-rte-table th {
14743
+ background-color: #E0E0E0;
14744
+ }
14745
+
14746
+ .e-rte-table td,
14747
+ .e-rte-table th {
14748
+ border: 1px solid #BDBDBD;
14749
+ height: 20px;
14750
+ min-width: 20px;
14751
+ padding: 2px 5px;
14752
+ box-sizing: border-box;
14753
+ }
14754
+
14755
+ .e-rte-table td.e-cell-select.e-multi-cells-select,
14756
+ .e-rte-table th.e-cell-select.e-multi-cells-select {
14757
+ position: relative;
14758
+ }
14759
+
14760
+ .e-rte-table td.e-cell-select.e-multi-cells-select::after,
14761
+ .e-rte-table th.e-cell-select.e-multi-cells-select::after {
14762
+ background-color: rgba(13, 110, 253, 0.08);
14763
+ content: "";
14764
+ position: absolute;
14765
+ top: 0;
14766
+ left: 0;
14767
+ width: 100%;
14768
+ height: 100%;
14769
+ bottom: 0;
14770
+ pointer-events: none;
14771
+ right: 0;
14772
+ }
14773
+
14774
+ table td.e-multi-cells-select ::selection,
14775
+ table th.e-multi-cells-select ::selection {
14776
+ background-color: transparent;
14777
+ }
14778
+
14779
+ td.e-multi-cells-select,
14780
+ th.e-multi-cells-select {
14781
+ user-select: none !important;
14782
+ }
14783
+
14784
+ .e-rte-table.e-dashed-border td,
14785
+ .e-rte-table.e-dashed-border th {
14786
+ border-style: dashed;
14787
+ }
14788
+
14789
+ .e-rte-table .e-alternate-border tbody tr:nth-child(2n) {
14790
+ background-color: #F5F5F5;
14791
+ }
14792
+
14793
+ .e-rte-audio {
14794
+ border: 0;
14795
+ cursor: pointer;
14796
+ display: block;
14797
+ float: none;
14798
+ margin: 5px auto;
14799
+ max-width: 100%;
14800
+ position: relative;
14801
+ }
14802
+
14803
+ .e-rte-image.e-imginline,
14804
+ .e-rte-audio.e-audio-inline,
14805
+ .e-rte-video.e-video-inline {
14806
+ display: inline-block;
14807
+ float: none;
14808
+ margin-left: 5px;
14809
+ margin-right: 5px;
14810
+ max-width: calc(100% - (2 * 5px));
14811
+ padding: 1px;
14812
+ vertical-align: bottom;
14813
+ }
14814
+
14815
+ .e-rte-image.e-imgcenter,
14816
+ .e-rte-video.e-video-center {
14817
+ cursor: pointer;
14818
+ display: block;
14819
+ float: none;
14820
+ margin: 5px auto;
14821
+ max-width: 100%;
14822
+ position: relative;
14823
+ }
14824
+
14825
+ .e-rte-image.e-imgright,
14826
+ .e-rte-video.e-video-right {
14827
+ float: right;
14828
+ margin: 0 auto;
14829
+ margin-left: 5px;
14830
+ text-align: right;
14831
+ }
14832
+
14833
+ .e-rte-image.e-imgleft,
14834
+ .e-rte-video.e-video-left {
14835
+ float: left;
14836
+ margin: 0 auto;
14837
+ margin-right: 5px;
14838
+ text-align: left;
14839
+ }
14840
+
14841
+ .e-img-caption {
14842
+ display: inline-block;
14843
+ float: none;
14844
+ margin: 5px auto;
14845
+ max-width: 100%;
14846
+ position: relative;
14847
+ }
14848
+
14849
+ .e-img-caption.e-caption-inline {
14850
+ display: inline-block;
14851
+ float: none;
14852
+ margin: 5px auto;
14853
+ margin-left: 5px;
14854
+ margin-right: 5px;
14855
+ max-width: calc(100% - (2 * 5px));
14856
+ position: relative;
14857
+ text-align: center;
14858
+ vertical-align: bottom;
14859
+ }
14860
+
14861
+ .e-rte-img-caption.e-imgcenter {
14862
+ display: contents;
14863
+ margin-left: auto;
14864
+ margin-right: auto;
14865
+ }
14866
+
14867
+ .e-rte-img-caption.e-imgright {
14868
+ display: contents;
14869
+ margin-left: auto;
14870
+ margin-right: 0;
14871
+ }
14872
+
14873
+ .e-rte-img-caption.e-imgleft {
14874
+ display: contents;
14875
+ margin-left: 0;
14876
+ margin-right: auto;
14877
+ }
14878
+
14879
+ .e-img-caption.e-rte-img-caption.e-imgbreak {
14880
+ display: contents;
14881
+ }
14882
+
14883
+ .e-img-inner {
14884
+ box-sizing: border-box;
14885
+ display: block;
14886
+ font-size: 16px;
14887
+ font-weight: initial;
14888
+ margin: auto;
14889
+ opacity: .9;
14890
+ text-align: center;
14891
+ width: 100%;
14892
+ }
14893
+
14894
+ .e-img-wrap {
14895
+ display: inline-block;
14896
+ margin: auto;
14897
+ padding: 0;
14898
+ text-align: center;
14899
+ width: 100%;
14900
+ }
14901
+
14902
+ .e-imgleft,
14903
+ .e-video-left {
14904
+ float: left;
14905
+ margin: 0 5px 0 0;
14906
+ text-align: left;
14907
+ }
14908
+
14909
+ .e-imgright,
14910
+ .e-video-right {
14911
+ float: right;
14912
+ margin: 0 0 0 5px;
14913
+ text-align: right;
14914
+ }
14915
+
14916
+ .e-imgcenter,
14917
+ .e-video-center {
14918
+ cursor: pointer;
14919
+ display: block;
14920
+ float: none;
14921
+ height: auto;
14922
+ margin: 5px auto;
14923
+ max-width: 100%;
14924
+ position: relative;
14925
+ }
14926
+
14927
+ .e-control img:not(.e-resize) {
14928
+ border: 2px solid transparent;
14929
+ z-index: 1000
14930
+ }
14931
+
14932
+ .e-imginline,
14933
+ .e-audio-inline,
14934
+ .e-video-inline {
14935
+ display: inline-block;
14936
+ float: none;
14937
+ margin-left: 5px;
14938
+ margin-right: 5px;
14939
+ max-width: calc(100% - (2 * 5px));
14940
+ vertical-align: bottom;
14941
+ }
14942
+
14943
+ .e-imgbreak,
14944
+ .e-audio-break,
14945
+ .e-video-break {
14946
+ border: 0;
14947
+ cursor: pointer;
14948
+ display: block;
14949
+ float: none;
14950
+ height: auto;
14951
+ margin: 5px auto;
14952
+ max-width: 100%;
14953
+ position: relative;
14954
+ }
14955
+
14956
+ .e-rte-image.e-img-focus:not(.e-resize),
14957
+ .e-audio-focus:not(.e-resize),
14958
+ .e-video-focus:not(.e-resize) {
14959
+ border: solid 2px #4a90e2;
14960
+ }
14961
+
14962
+ img.e-img-focus::selection,
14963
+ audio.e-audio-focus::selection,
14964
+ .e-video-focus::selection {
14965
+ background: transparent;
14966
+ color: transparent;
14967
+ }
14968
+
14969
+ span.e-rte-imageboxmark,
14970
+ span.e-rte-videoboxmark {
14971
+ width: 10px;
14972
+ height: 10px;
14973
+ position: absolute;
14974
+ display: block;
14975
+ background: #4a90e2;
14976
+ border: 1px solid #fff;
14977
+ z-index: 1000;
14978
+ }
14979
+
14980
+ .e-mob-rte.e-mob-span span.e-rte-imageboxmark,
14981
+ .e-mob-rte.e-mob-span span.e-rte-videoboxmark {
14982
+ background: #4a90e2;
14983
+ border: 1px solid #fff;
14984
+ }
14985
+
14986
+ .e-mob-rte span.e-rte-imageboxmark,
14987
+ .e-mob-rte span.e-rte-videoboxmark {
14988
+ background: #fff;
14989
+ border: 1px solid #4a90e2;
14990
+ border-radius: 15px;
14991
+ height: 20px;
14992
+ width: 20px;
14993
+ }
14994
+
14995
+ .e-mob-rte.e-mob-span span.e-rte-imageboxmark,
14996
+ .e-mob-rte.e-mob-span span.e-rte-videoboxmark {
14997
+ background: #4a90e2;
14998
+ border: 1px solid #fff;
14999
+ }
15000
+
15001
+ .e-content img.e-resize,
15002
+ .e-content video.e-resize {
15003
+ z-index: 1000;
15004
+ }
15005
+
15006
+ .e-img-caption .e-img-inner {
15007
+ outline: 0;
15008
+ }
15009
+
15010
+ .e-rte-img-caption.e-imgleft .e-img-inner {
15011
+ float: left;
15012
+ text-align: left;
15013
+ }
15014
+
15015
+ .e-rte-img-caption.e-imgright .e-img-inner {
15016
+ float: right;
15017
+ text-align: right;
15018
+ }
15019
+
15020
+ .e-rte-img-caption.e-imgleft .e-img-wrap,
15021
+ .e-rte-img-caption.e-imgright .e-img-wrap {
15022
+ display: contents;
15023
+ }
15024
+
15025
+ .e-img-caption a:focus-visible {
15026
+ outline: none;
15027
+ }
15028
+
15029
+ .e-rte-img-caption .e-rte-image.e-imgright {
15030
+ margin-left: auto;
15031
+ margin-right: 0;
15032
+ }
15033
+
15034
+ .e-rte-img-caption .e-rte-image.e-imgleft {
15035
+ margin: 0;
15036
+ }
15037
+
15038
+ span.e-table-box {
15039
+ cursor: nwse-resize;
15040
+ display: block;
15041
+ height: 10px;
15042
+ position: absolute;
15043
+ width: 10px;
15044
+ background-color: #ffffff;
15045
+ border: 1px solid #BDBDBD;
15046
+ }
15047
+
15048
+ span.e-table-box.e-rmob {
15049
+ height: 14px;
15050
+ width: 14px;
15051
+ background-color: #BDBDBD;
15052
+ border: 1px solid #BDBDBD;
15053
+ }
15054
+
15055
+ .e-row-resize,
15056
+ .e-column-resize {
15057
+ background-color: transparent;
15058
+ background-repeat: repeat;
15059
+ bottom: 0;
15060
+ cursor: col-resize;
15061
+ height: 1px;
15062
+ overflow: visible;
15063
+ position: absolute;
15064
+ width: 1px;
15065
+ }
15066
+
15067
+ .e-row-resize {
15068
+ cursor: row-resize;
15069
+ height: 1px;
15070
+ }
15071
+
15072
+ .e-table-rhelper {
15073
+ cursor: col-resize;
15074
+ opacity: .87;
15075
+ position: absolute;
15076
+ }
15077
+
15078
+ .e-table-rhelper.e-column-helper {
15079
+ width: 1px;
15080
+ }
15081
+
15082
+ .e-table-rhelper.e-row-helper {
15083
+ height: 1px;
15084
+ }
15085
+
15086
+ .e-reicon::before {
15087
+ border-bottom: 6px solid transparent;
15088
+ border-right: 6px solid;
15089
+ border-top: 6px solid transparent;
15090
+ content: '';
15091
+ display: block;
15092
+ height: 0;
15093
+ position: absolute;
15094
+ right: 4px;
15095
+ top: 4px;
15096
+ width: 20px;
15097
+ }
15098
+
15099
+ .e-reicon::after {
15100
+ border-bottom: 6px solid transparent;
15101
+ border-left: 6px solid;
15102
+ border-top: 6px solid transparent;
15103
+ content: '';
15104
+ display: block;
15105
+ height: 0;
15106
+ left: 4px;
15107
+ position: absolute;
15108
+ top: 4px;
15109
+ width: 20px;
15110
+ z-index: 3;
15111
+ }
15112
+
15113
+ .e-row-helper.e-reicon::after {
15114
+ top: 10px;
15115
+ transform: rotate(90deg);
15116
+ }
15117
+
15118
+ .e-row-helper.e-reicon::before {
15119
+ left: 4px;
15120
+ top: -20px;
15121
+ transform: rotate(90deg);
15122
+ }
15123
+
15124
+
15125
+ .e-table-rhelper {
15126
+ background-color: #4a90e2;
15127
+ }
15128
+
15129
+ .e-rtl {
15130
+ direction: rtl;
15131
+ }
15132
+
15133
+ .e-rte-placeholder::before {
15134
+ content: attr(placeholder);
15135
+ opacity: 0.54;
15136
+ overflow: hidden;
15137
+ padding-top: 16px;
15138
+ position: absolute;
15139
+ text-align: start;
15140
+ top: 0;
15141
+ z-index: 1;
15142
+ }
15143
+
15144
+ .e-resize-enabled,
15145
+ .e-count-enabled {
15146
+ padding-bottom: 0px;
15147
+ }
15148
+ `;
15149
+
14527
15150
  const IFRAMEHEADER = `
14528
- <!DOCTYPE html>
15151
+ <!DOCTYPE html>
14529
15152
  <html>
14530
15153
  <head>
14531
15154
  <meta charset='utf-8' />
14532
- <style>
14533
- @charset "UTF-8";
14534
- body {
14535
- font-family: "Roboto", sans-serif;
14536
- font-size: 14px;
14537
- }
14538
- html, body{height: 100%;margin: 0;}
14539
- body.e-cursor{cursor:default}
14540
- span.e-selected-node {background-color: #939393;color: white;}
14541
- span.e-selected-node.e-highlight {background-color: #1d9dd8;}
14542
- body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}
14543
- .e-rte-image, .e-rte-video {border: 0;cursor: pointer;display:
14544
- block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}
14545
- .e-rte-audio {border: 0;cursor: pointer;display:
14546
- block;float: none;margin: 5px auto;max-width: 100%;position: relative;}
14547
- .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;
14548
- margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}
14549
- .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}
14550
- .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}
14551
- .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}
14552
- .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}
14553
- .e-img-caption.e-caption-inline {display: inline-block;float: none;
14554
- margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));
14555
- position: relativetext-align: center;vertical-align: bottom;}
14556
- .e-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}
14557
- .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}
14558
- .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}
14559
- .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}
14560
- .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;
14561
- margin: auto;opacity: .9;text-align: center;width: 100%;}
14562
- .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}
14563
- .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}
14564
- .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}
14565
- .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}
14566
- .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}
14567
- .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;
14568
- max-width: calc(100% - (2 * 5px));vertical-align: bottom;}
14569
- .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;
14570
- display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}
14571
- .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}
14572
- img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}
14573
- span.e-rte-imageboxmark, span.e-rte-videoboxmark { width: 10px; height: 10px; position: absolute; display: block;
14574
- background: #4a90e2; border: 1px solid #fff; z-index: 1000;}
14575
- .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }
14576
- .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;
14577
- border-radius: 15px; height: 20px; width: 20px; }
14578
- .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }
14579
- .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }
14580
- .e-rte-content { font-size: 14px; }
14581
- .e-content { font-weight: normal; line-height: 1.5; font-size: 1em; }
14582
- .e-img-caption .e-img-inner { outline: 0; }
14583
- .e-rte-img-caption.e-imgleft .e-img-inner { float: left; text-align: left; }
14584
- .e-rte-img-caption.e-imgright .e-img-inner { float: right; text-align: right; }
14585
- .e-rte-img-caption.e-imgleft .e-img-wrap, .e-rte-img-caption.e-imgright .e-img-wrap { display: contents; }
14586
- .e-img-caption a:focus-visible { outline: none; }
14587
- .e-rte-img-caption .e-rte-image.e-imgright { margin-left: auto; margin-right: 0; }
14588
- .e-rte-img-caption .e-rte-image.e-imgleft { margin: 0; }
14589
- body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;
14590
- overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}
14591
- p{margin: 0 0 10px;margin-bottom: 10px;}
14592
- code{ background: #9d9d9d26; color: #ed484c;}
14593
- li{margin-bottom: 10px;}
14594
- table{margin-bottom: 10px;}
14595
- h1{ font-size: 2.857em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
14596
- h2{ font-size: 2.285em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
14597
- h3{ font-size: 2em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
14598
- h4{ font-size: 1.714em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
14599
- h5{ font-size: 1.428em; font-weight: 600; line-height: 1.2; margin: 10px 0; }
14600
- h6{ font-size: 1.142em; line-height: 600; line-height: 1.5; margin: 10px 0; }
14601
- blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}
14602
- pre{background-color: inherit;border: 0;border-radius: 0;color: #333;
14603
- font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;
14604
- white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}
14605
- strong, b{font-weight: 700;}
14606
- a{text-decoration: none;user-select: auto;}
14607
- a:hover{text-decoration: underline;};
14608
- p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}
14609
- h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}
14610
- ul:last-child{margin-bottom: 0;}
14611
- table { border-collapse: collapse; empty-cells: show;}
14612
- table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}
14613
- table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}
14614
- table th {background-color: #E0E0E0;}
14615
- table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD}
14616
- table .e-cell-select {border: 1px double #4a90e2;}
14617
- table.e-cell-select {position: relative;}
14618
- table.e-cell-select::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #4a90e2; pointer-events: none;}
14619
- table td.e-cell-select.e-multi-cells-select, table th.e-cell-select.e-multi-cells-select {border: 1px solid #dee2e6; position: relative; }
14620
- table td.e-cell-select.e-multi-cells-select::after, table th.e-cell-select.e-multi-cells-select::after {background-color: rgba(13, 110, 253, 0.08); content: "";
14621
- position: absolute; top: 0; left: 0; width: 100%; height: 100%; bottom: 0; pointer-events: none; right: 0;}
14622
- span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }
14623
- span.e-table-box.e-rmob {height: 14px;width: 14px;}
14624
- .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;
14625
- bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }
14626
- .e-row-resize { cursor: row-resize; height: 1px;}
14627
- .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}
14628
- .e-table-rhelper.e-column-helper { width: 1px; }
14629
- .e-table-rhelper.e-row-helper {height: 1px;}
14630
- .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;
14631
- border-top: 6px solid transparent; content: ''; display: block; height: 0;
14632
- position: absolute; right: 4px; top: 4px; width: 20px; }
14633
- .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;
14634
- border-top: 6px solid transparent; content: ''; display: block;
14635
- height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }
14636
- .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }
14637
- .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }
14638
- span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }
14639
- span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }
14640
- .e-table-rhelper { background-color: #4a90e2;}
14641
- .e-rtl { direction: rtl; }
14642
- .e-rte-placeholder::before { content: attr(placeholder); opacity: 0.54; overflow: hidden; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }
14643
- li ol, li ul { margin-block-start: 10px;}
14644
- .e-resize-enabled, .e-count-enabled { padding-bottom: 0px; }
14645
- td.e-multi-cells-select ::selection, th.e-multi-cells-select ::selection { background-color: transparent; }
14646
- td.e-multi-cells-select, th.e-multi-cells-select { user-select: none !important; }
15155
+ <style>` +
15156
+ IFRAME_EDITOR_STYLES.replace(/[\n\t]/g, '') + `
14647
15157
  </style>
14648
- </head>`;
15158
+ </head>
15159
+ `;
14649
15160
  /**
14650
15161
  * Content module is used to render Rich Text Editor content
14651
15162
  *
@@ -14662,7 +15173,7 @@ class IframeContentRender extends ContentRender {
14662
15173
  renderPanel() {
14663
15174
  const rteObj = this.parent;
14664
15175
  const rteContent = getEditValue(rteObj.value, rteObj);
14665
- const iFrameBodyContent = '<body spellcheck="false" autocorrect="off" contenteditable="true">' +
15176
+ const iFrameBodyContent = '<body contenteditable="true">' +
14666
15177
  rteContent + '</body></html>';
14667
15178
  let iFrameContent = IFRAMEHEADER + iFrameBodyContent;
14668
15179
  const iframe = this.parent.createElement('iframe', {
@@ -14682,12 +15193,23 @@ class IframeContentRender extends ContentRender {
14682
15193
  iframe.setAttribute('sandbox', sandboxValues.trim());
14683
15194
  }
14684
15195
  rteObj.rootContainer.appendChild(iframe);
14685
- iframe.contentDocument.body.id = this.parent.getID() + '_rte-edit-view';
14686
15196
  iframe.contentDocument.body.setAttribute('aria-owns', this.parent.getID());
14687
15197
  iframe.contentDocument.open();
14688
15198
  iFrameContent = this.setThemeColor(iFrameContent, { color: '#333' });
14689
15199
  iframe.contentDocument.write(iFrameContent);
14690
15200
  iframe.contentDocument.close();
15201
+ const body = iframe.contentDocument.body;
15202
+ body.className = 'e-content';
15203
+ if (this.parent.height === 'auto') {
15204
+ body.style.overflowY = 'hidden';
15205
+ }
15206
+ if (!isNullOrUndefined(this.parent.fontFamily.default)) {
15207
+ body.style.fontFamily = this.parent.fontFamily.default;
15208
+ }
15209
+ if (!isNullOrUndefined(this.parent.fontSize.default)) {
15210
+ body.style.fontSize = this.parent.fontSize.default;
15211
+ }
15212
+ body.id = this.parent.getID() + '_rte-edit-view';
14691
15213
  if (rteObj.enableRtl) {
14692
15214
  this.contentPanel.contentDocument.body.setAttribute('class', 'e-rtl');
14693
15215
  }
@@ -15373,7 +15895,7 @@ class BaseToolbar {
15373
15895
  const tooltipText = items[num].tooltipText;
15374
15896
  let shortCutKey;
15375
15897
  const isMacDev = window.navigator.platform.toLocaleLowerCase().includes('mac');
15376
- if (windowKeys[`${tooltipText}`]) {
15898
+ if (windowKeys[`${tooltipText}`] && (!isNullOrUndefined(items[num].id) || !isNullOrUndefined(items[num].cssClass))) {
15377
15899
  shortCutKey = isMacDev ? windowKeys[`${tooltipText}`].replace('Ctrl+', '⌘').replace('Shift+', '⇧').replace('Alt+', '⌥') : windowKeys[`${tooltipText}`];
15378
15900
  }
15379
15901
  else {
@@ -15545,9 +16067,6 @@ class DropDownButtons {
15545
16067
  cssClass: CLS_DROPDOWN_POPUP + ' ' + CLS_DROPDOWN_ITEMS + ' ' + CLS_FONT_NAME_TB_BTN,
15546
16068
  itemName: 'FontName', items: fontItem, element: targetElement
15547
16069
  });
15548
- if (!isNullOrUndefined(this.parent.fontFamily.default)) {
15549
- this.getEditNode().style.fontFamily = this.parent.fontFamily.default;
15550
- }
15551
16070
  break;
15552
16071
  }
15553
16072
  case 'fontsize': {
@@ -15571,9 +16090,6 @@ class DropDownButtons {
15571
16090
  cssClass: CLS_DROPDOWN_POPUP + ' ' + CLS_DROPDOWN_ITEMS + ' ' + CLS_FONT_SIZE_TB_BTN,
15572
16091
  itemName: 'FontSize', items: fontsize, element: targetElement
15573
16092
  });
15574
- if (!isNullOrUndefined(this.parent.fontSize.default)) {
15575
- this.getEditNode().style.fontSize = this.parent.fontSize.default;
15576
- }
15577
16093
  break;
15578
16094
  }
15579
16095
  case 'alignments':
@@ -22488,7 +23004,7 @@ class Lists {
22488
23004
  }
22489
23005
  if (isNested) {
22490
23006
  this.cleanNode();
22491
- this.parent.editableElement.focus();
23007
+ this.parent.editableElement.focus({ preventScroll: true });
22492
23008
  }
22493
23009
  if (!(e.event.action && e.event.action === 'indent')) {
22494
23010
  this.saveSelection = this.domNode.saveMarker(this.saveSelection);
@@ -22797,7 +23313,7 @@ class Lists {
22797
23313
  span.parentNode.replaceChild(fragment, span);
22798
23314
  });
22799
23315
  }
22800
- this.parent.editableElement.focus();
23316
+ this.parent.editableElement.focus({ preventScroll: true });
22801
23317
  if (isIDevice$1()) {
22802
23318
  setEditFrameFocus(this.parent.editableElement, selector);
22803
23319
  }
@@ -23031,7 +23547,8 @@ class Lists {
23031
23547
  parentNode.removeAttribute('style');
23032
23548
  }
23033
23549
  }
23034
- const wrapper = '<' + e.enterAction + wrapperclass + this.domNode.attributes(element) + '></' + e.enterAction + '>';
23550
+ const wrapperTag = isNullOrUndefined(e.enterAction) ? DEFAULT_TAG : e.enterAction;
23551
+ const wrapper = '<' + wrapperTag + wrapperclass + this.domNode.attributes(element) + '></' + wrapperTag + '>';
23035
23552
  if (e.enterAction !== 'BR') {
23036
23553
  this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
23037
23554
  }
@@ -24167,7 +24684,9 @@ class InsertHtml {
24167
24684
  fragment.appendChild(node.firstChild);
24168
24685
  }
24169
24686
  if (isSingleNode) {
24170
- preNode.parentNode.replaceChild(fragment, preNode);
24687
+ range.deleteContents();
24688
+ this.removeEmptyElements(editNode, true);
24689
+ range.insertNode(fragment);
24171
24690
  }
24172
24691
  else {
24173
24692
  const startContainerParent = editNode === range.startContainer ?
@@ -24179,6 +24698,7 @@ class InsertHtml {
24179
24698
  range.setEnd(startContainerParent, startIndex);
24180
24699
  if (!isNullOrUndefined(lasNode) && lasNode !== editNode) {
24181
24700
  detach(lasNode);
24701
+ this.removeEmptyElements(editNode, true);
24182
24702
  }
24183
24703
  // eslint-disable-next-line
24184
24704
  !isNullOrUndefined(sibNode) ? (sibNode.parentNode === editNode ? sibNode.appendChild(fragment) : sibNode.parentNode.appendChild(fragment)) : range.insertNode(fragment);
@@ -24195,6 +24715,9 @@ class InsertHtml {
24195
24715
  const rangeElement = closest(nearestAnchor, 'span');
24196
24716
  rangeElement.appendChild(tempSpan);
24197
24717
  }
24718
+ 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')) {
24719
+ range.startContainer.parentElement.insertAdjacentElement('afterend', tempSpan);
24720
+ }
24198
24721
  else {
24199
24722
  range.insertNode(tempSpan);
24200
24723
  }
@@ -24280,6 +24803,24 @@ class InsertHtml {
24280
24803
  if (lastSelectionNode.nodeName === '#text') {
24281
24804
  this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);
24282
24805
  }
24806
+ else if (lastSelectionNode.nodeName === 'HR') {
24807
+ const nextSiblingNode = lastSelectionNode.nextSibling ? lastSelectionNode.nextSibling : null;
24808
+ const siblingTag = enterAction === 'DIV' ? createElement('div') : createElement('p');
24809
+ siblingTag.appendChild(createElement('br'));
24810
+ if (!isNullOrUndefined(nextSiblingNode) && nextSiblingNode.nodeName === 'HR') {
24811
+ lastSelectionNode.parentNode.insertBefore(siblingTag, nextSiblingNode);
24812
+ lastSelectionNode = siblingTag;
24813
+ }
24814
+ else if (!isNullOrUndefined(nextSiblingNode)) {
24815
+ lastSelectionNode = nextSiblingNode;
24816
+ }
24817
+ else {
24818
+ lastSelectionNode.parentNode.appendChild(siblingTag);
24819
+ lastSelectionNode.parentNode.insertBefore(lastSelectionNode, siblingTag);
24820
+ lastSelectionNode = siblingTag;
24821
+ }
24822
+ nodeSelection.setSelectionText(docElement, lastSelectionNode, lastSelectionNode, 0, 0);
24823
+ }
24283
24824
  else {
24284
24825
  this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction);
24285
24826
  }
@@ -24348,10 +24889,10 @@ class InsertHtml {
24348
24889
  blockNode = range.endContainer;
24349
24890
  range.setEnd(blockNode, range.endContainer.textContent.length);
24350
24891
  }
24351
- if (blockNode.nodeName === 'BODY' && range.startContainer === range.endContainer && range.startContainer.nodeType === 1) {
24892
+ if (blockNode && blockNode.nodeName === 'BODY' && range.startContainer === range.endContainer && range.startContainer.nodeType === 1) {
24352
24893
  blockNode = range.startContainer;
24353
24894
  }
24354
- if (blockNode.closest('LI') && editNode.contains(blockNode.closest('LI')) && blockNode.nodeName !== 'TD' && blockNode.nodeName !== 'TH' && blockNode.nodeName !== 'TR' && node && node.firstElementChild &&
24895
+ if (blockNode && blockNode.closest('LI') && editNode.contains(blockNode.closest('LI')) && blockNode.nodeName !== 'TD' && blockNode.nodeName !== 'TH' && blockNode.nodeName !== 'TR' && node && node.firstElementChild &&
24355
24896
  ((node).firstElementChild.tagName === 'OL' || node.firstElementChild.tagName === 'UL')) {
24356
24897
  let liNode;
24357
24898
  while (node.firstElementChild.lastElementChild && node.firstElementChild.lastElementChild.tagName === 'LI') {
@@ -24362,7 +24903,7 @@ class InsertHtml {
24362
24903
  node.firstElementChild.insertAdjacentElement('afterend', liNode);
24363
24904
  }
24364
24905
  }
24365
- if (blockNode.nodeName === 'TD' || blockNode.nodeName === 'TH' || blockNode.nodeName === 'TR') {
24906
+ if (blockNode && blockNode.nodeName === 'TD' || blockNode.nodeName === 'TH' || blockNode.nodeName === 'TR') {
24366
24907
  const tempSpan = createElement('span', { className: 'tempSpan' });
24367
24908
  range.insertNode(tempSpan);
24368
24909
  tempSpan.parentNode.replaceChild(node, tempSpan);
@@ -24445,17 +24986,19 @@ class InsertHtml {
24445
24986
  innerElement = innerElement.replace(/<!--[\s\S]*?-->/g, '');
24446
24987
  elm.innerHTML = innerElement;
24447
24988
  }
24448
- static findDetachEmptyElem(element) {
24989
+ static findDetachEmptyElem(element, ignoreBlockNodes = false) {
24449
24990
  let removableElement;
24450
24991
  if (!isNullOrUndefined(element.parentElement)) {
24451
24992
  const hasNbsp = element.parentElement.textContent.length > 0 && element.parentElement.textContent.match(/\u00a0/g)
24452
24993
  && element.parentElement.textContent.match(/\u00a0/g).length > 0;
24453
24994
  if (!hasNbsp && element.parentElement.textContent.trim() === '' && element.parentElement.contentEditable !== 'true' &&
24454
24995
  isNullOrUndefined(element.parentElement.querySelector('img')) && element.parentElement.nodeName !== 'TD' && element.parentElement.nodeName !== 'TH') {
24455
- removableElement = this.findDetachEmptyElem(element.parentElement);
24996
+ removableElement = ignoreBlockNodes && BLOCK_TAGS.indexOf(element.parentElement.tagName.toLowerCase()) !== -1 ?
24997
+ element : this.findDetachEmptyElem(element.parentElement, ignoreBlockNodes);
24456
24998
  }
24457
24999
  else {
24458
- removableElement = element;
25000
+ removableElement = ignoreBlockNodes && BLOCK_TAGS.indexOf(element.tagName.toLowerCase()) !== -1 ? null :
25001
+ element;
24459
25002
  }
24460
25003
  }
24461
25004
  else {
@@ -24463,7 +25006,7 @@ class InsertHtml {
24463
25006
  }
24464
25007
  return removableElement;
24465
25008
  }
24466
- static removeEmptyElements(element) {
25009
+ static removeEmptyElements(element, ignoreBlockNodes = false) {
24467
25010
  const emptyElements = element.querySelectorAll(':empty');
24468
25011
  const nonSvgEmptyElements = Array.from(emptyElements).filter((element) => {
24469
25012
  // Check if the element is an SVG element or an ancestor of an SVG element
@@ -24476,7 +25019,7 @@ class InsertHtml {
24476
25019
  nonSvgEmptyElements[i].style.borderBottom === '' ? true : false;
24477
25020
  }
24478
25021
  if (SELF_CLOSING_TAGS.indexOf(nonSvgEmptyElements[i].tagName.toLowerCase()) < 0 && lineWithDiv) {
24479
- const detachableElement = this.findDetachEmptyElem(nonSvgEmptyElements[i]);
25022
+ const detachableElement = this.findDetachEmptyElem(nonSvgEmptyElements[i], ignoreBlockNodes);
24480
25023
  if (!isNullOrUndefined(detachableElement)) {
24481
25024
  detach(detachableElement);
24482
25025
  }
@@ -24982,7 +25525,7 @@ class Alignments {
24982
25525
  selector: e.selector
24983
25526
  });
24984
25527
  }
24985
- this.parent.editableElement.focus();
25528
+ this.parent.editableElement.focus({ preventScroll: true });
24986
25529
  save = this.parent.domNode.saveMarker(save);
24987
25530
  if (isIDevice$1()) {
24988
25531
  setEditFrameFocus(this.parent.editableElement, e.selector);
@@ -25100,7 +25643,7 @@ class Indents {
25100
25643
  /* eslint-enable */
25101
25644
  }
25102
25645
  }
25103
- editEle.focus();
25646
+ editEle.focus({ preventScroll: true });
25104
25647
  if (isIDevice$1()) {
25105
25648
  setEditFrameFocus(editEle, e.selector);
25106
25649
  }
@@ -26224,6 +26767,9 @@ class TableCommand {
26224
26767
  for (let i = 0; i < thTdElm.length; i++) {
26225
26768
  thTdElm[i].dataset.oldWidth = (thTdElm[i].offsetWidth / currentTabElm.offsetWidth * 100) + '%';
26226
26769
  }
26770
+ if (isNullOrUndefined(currentTabElm.style.width) || currentTabElm.style.width === '') {
26771
+ currentTabElm.style.width = currentTabElm.offsetWidth + 'px';
26772
+ }
26227
26773
  for (let i = 0; i < allRows.length; i++) {
26228
26774
  curCell = allRows[i].querySelectorAll(':scope > td, :scope > th')[colIndex];
26229
26775
  const colTemplate = curCell.cloneNode(true);
@@ -29274,15 +29820,22 @@ class MsWordPaste {
29274
29820
  const styleProperty = resultElem[j].getAttribute('style');
29275
29821
  if (!isNullOrUndefined(styleProperty) && styleProperty.trim() !== '') {
29276
29822
  const valueSplit = values[i].split(';');
29823
+ for (let q = 0; q < valueSplit.length; q++) {
29824
+ if (valueSplit[q].split(':')[0] === 'border' && valueSplit[q].split(':')[1] === 'none') {
29825
+ valueSplit.splice(q, 1);
29826
+ q--;
29827
+ }
29828
+ }
29277
29829
  if (!fromClass) {
29278
29830
  for (let k = 0; k < valueSplit.length; k++) {
29279
- if (styleProperty.indexOf(valueSplit[k].split(':')[0]) >= 0) {
29831
+ const propertyName = valueSplit[k].split(':')[0];
29832
+ if (styleProperty.includes(propertyName + ':')) {
29280
29833
  valueSplit.splice(k, 1);
29281
29834
  k--;
29282
29835
  }
29283
29836
  }
29284
29837
  }
29285
- const changedValue = styleProperty + valueSplit.join(';') + ';';
29838
+ const changedValue = valueSplit.join(';') + ';' + styleProperty;
29286
29839
  resultElem[j].setAttribute('style', changedValue);
29287
29840
  }
29288
29841
  else {
@@ -29461,6 +30014,11 @@ class MsWordPaste {
29461
30014
  startAttr = parseInt(startString, 10);
29462
30015
  }
29463
30016
  }
30017
+ else if (listStyleType === 'decimal-leading-zero') {
30018
+ if (!isNaN(parseInt(startString, 10))) {
30019
+ startAttr = parseInt(startString, 10);
30020
+ }
30021
+ }
29464
30022
  else if (listStyleType === 'upper-alpha') {
29465
30023
  startAttr = (startString.split('.')[0].charCodeAt(0) - 64);
29466
30024
  }
@@ -31832,12 +32390,13 @@ class HtmlEditor {
31832
32390
  this.isImageDelete = false;
31833
32391
  }
31834
32392
  const brNode = this.deleteRangeElement.querySelector('BR');
32393
+ const brLastChildNode = this.deleteRangeElement.lastChild;
31835
32394
  if (brNode && brNode.classList.contains('e-rte-image-remove-focus')) {
31836
32395
  removeClass([brNode], ['e-rte-image-focus']);
31837
32396
  return;
31838
32397
  }
31839
- else if (brNode) {
31840
- detach(brNode);
32398
+ else if (brNode && brLastChildNode && brLastChildNode.nodeName === 'BR') {
32399
+ detach(brLastChildNode);
31841
32400
  e.args.preventDefault();
31842
32401
  }
31843
32402
  if (!isNullOrUndefined(this.deleteRangeElement) && (this.deleteOldRangeElement.tagName !== 'OL' && this.deleteOldRangeElement.tagName !== 'UL')
@@ -32417,12 +32976,12 @@ class PasteCleanup {
32417
32976
  if (e.args && !isNullOrUndefined(e.args.clipboardData)) {
32418
32977
  value = e.args.clipboardData.getData('text/html');
32419
32978
  }
32420
- this.parent.trigger(beforePasteCleanup, { value: value });
32421
32979
  if (e.args && value !== null && this.parent.editorMode === 'HTML') {
32422
32980
  let file;
32423
32981
  if (value.length === 0) {
32424
32982
  const htmlRegex = new RegExp(/<\/[a-z][\s\S]*>/i);
32425
32983
  value = e.args.clipboardData.getData('text/plain');
32984
+ this.parent.trigger(beforePasteCleanup, { value: value });
32426
32985
  this.isNotFromHtml = value !== '' ? true : false;
32427
32986
  value = value.replace(/</g, '&lt;');
32428
32987
  value = value.replace(/>/g, '&gt;');
@@ -32455,6 +33014,7 @@ class PasteCleanup {
32455
33014
  }
32456
33015
  }
32457
33016
  else if (value.length > 0) {
33017
+ this.parent.trigger(beforePasteCleanup, { value: value });
32458
33018
  this.parent.formatter.editorManager.observer.notify(MS_WORD_CLEANUP, {
32459
33019
  args: e.args,
32460
33020
  text: e.text,
@@ -35685,7 +36245,7 @@ __decorate$2([
35685
36245
  class FileManagerSettings extends ChildProperty {
35686
36246
  }
35687
36247
  __decorate$2([
35688
- Event()
36248
+ Event$1()
35689
36249
  ], FileManagerSettings.prototype, "beforeSend", void 0);
35690
36250
  __decorate$2([
35691
36251
  Complex({ getImageUrl: null, url: null, uploadUrl: null }, AjaxSettings)
@@ -36146,7 +36706,12 @@ class EnterKeyAction {
36146
36706
  else {
36147
36707
  let nearBlockNode;
36148
36708
  if (isTableEnter && this.parent.formatter.editorManager.domNode.isBlockNode(this.startNode)) {
36149
- nearBlockNode = this.startNode;
36709
+ if (this.range.startContainer.nodeName === '#text' && !isNullOrUndefined(this.range.startContainer.previousSibling) && this.range.startContainer.previousSibling.nodeName === 'HR') {
36710
+ nearBlockNode = this.range.startContainer.nextSibling;
36711
+ }
36712
+ else {
36713
+ nearBlockNode = this.startNode;
36714
+ }
36150
36715
  }
36151
36716
  else {
36152
36717
  nearBlockNode = this.parent.formatter.editorManager.domNode.blockParentNode(this.startNode);
@@ -36194,7 +36759,7 @@ class EnterKeyAction {
36194
36759
  }
36195
36760
  else {
36196
36761
  if ((nearBlockNode.textContent.trim().length !== 0 ||
36197
- nearBlockNode.childNodes[0].nodeName === 'IMG' ||
36762
+ (!isNullOrUndefined(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG') ||
36198
36763
  (nearBlockNode.textContent.trim() === '' && nearBlockNode.querySelectorAll('img, audio, video').length > 0))) {
36199
36764
  if ((this.range.startOffset === this.range.endOffset && this.range.startOffset !== 0)) {
36200
36765
  newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, false).cloneNode(true);
@@ -36446,6 +37011,7 @@ class EnterKeyAction {
36446
37011
  e.args.preventDefault();
36447
37012
  }
36448
37013
  this.triggerActionComplete(e, shiftKey);
37014
+ this.parent.inputElement.dispatchEvent(new Event('input'));
36449
37015
  }
36450
37016
  });
36451
37017
  }
@@ -39017,7 +39583,6 @@ let RichTextEditor = class RichTextEditor extends Component {
39017
39583
  const iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
39018
39584
  if (iframeElement) {
39019
39585
  this.setAutoHeight(iframeElement);
39020
- this.inputElement.style.overflow = 'hidden';
39021
39586
  }
39022
39587
  }
39023
39588
  }
@@ -39042,9 +39607,14 @@ let RichTextEditor = class RichTextEditor extends Component {
39042
39607
  }
39043
39608
  setAutoHeight(element) {
39044
39609
  if (!isNullOrUndefined(element)) {
39045
- element.style.height = 'auto';
39046
- element.style.height = (this.inputElement.scrollHeight + 16) + 'px';
39047
- element.style.overflow = 'hidden';
39610
+ if (element.nodeName === 'TEXTAREA') {
39611
+ element.style.height = 'auto';
39612
+ element.style.height = (this.inputElement.scrollHeight + 16) + 'px';
39613
+ element.style.overflow = 'hidden';
39614
+ }
39615
+ else if (element.nodeName === 'IFRAME') {
39616
+ element.style.height = this.inputElement.parentElement.offsetHeight + 'px';
39617
+ }
39048
39618
  }
39049
39619
  }
39050
39620
  wireEvents() {
@@ -39430,124 +40000,124 @@ __decorate$5([
39430
40000
  Property(10000)
39431
40001
  ], RichTextEditor.prototype, "saveInterval", void 0);
39432
40002
  __decorate$5([
39433
- Event()
40003
+ Event$1()
39434
40004
  ], RichTextEditor.prototype, "actionBegin", void 0);
39435
40005
  __decorate$5([
39436
- Event()
40006
+ Event$1()
39437
40007
  ], RichTextEditor.prototype, "actionComplete", void 0);
39438
40008
  __decorate$5([
39439
- Event()
40009
+ Event$1()
39440
40010
  ], RichTextEditor.prototype, "beforeDialogOpen", void 0);
39441
40011
  __decorate$5([
39442
- Event()
40012
+ Event$1()
39443
40013
  ], RichTextEditor.prototype, "dialogOpen", void 0);
39444
40014
  __decorate$5([
39445
- Event()
40015
+ Event$1()
39446
40016
  ], RichTextEditor.prototype, "beforeDialogClose", void 0);
39447
40017
  __decorate$5([
39448
- Event()
40018
+ Event$1()
39449
40019
  ], RichTextEditor.prototype, "dialogClose", void 0);
39450
40020
  __decorate$5([
39451
- Event()
40021
+ Event$1()
39452
40022
  ], RichTextEditor.prototype, "beforeQuickToolbarOpen", void 0);
39453
40023
  __decorate$5([
39454
- Event()
40024
+ Event$1()
39455
40025
  ], RichTextEditor.prototype, "quickToolbarOpen", void 0);
39456
40026
  __decorate$5([
39457
- Event()
40027
+ Event$1()
39458
40028
  ], RichTextEditor.prototype, "quickToolbarClose", void 0);
39459
40029
  __decorate$5([
39460
- Event()
40030
+ Event$1()
39461
40031
  ], RichTextEditor.prototype, "toolbarStatusUpdate", void 0);
39462
40032
  __decorate$5([
39463
- Event()
40033
+ Event$1()
39464
40034
  ], RichTextEditor.prototype, "updatedToolbarStatus", void 0);
39465
40035
  __decorate$5([
39466
- Event()
40036
+ Event$1()
39467
40037
  ], RichTextEditor.prototype, "imageSelected", void 0);
39468
40038
  __decorate$5([
39469
- Event()
40039
+ Event$1()
39470
40040
  ], RichTextEditor.prototype, "beforeImageUpload", void 0);
39471
40041
  __decorate$5([
39472
- Event()
40042
+ Event$1()
39473
40043
  ], RichTextEditor.prototype, "imageUploading", void 0);
39474
40044
  __decorate$5([
39475
- Event()
40045
+ Event$1()
39476
40046
  ], RichTextEditor.prototype, "imageUploadSuccess", void 0);
39477
40047
  __decorate$5([
39478
- Event()
40048
+ Event$1()
39479
40049
  ], RichTextEditor.prototype, "imageUploadFailed", void 0);
39480
40050
  __decorate$5([
39481
- Event()
40051
+ Event$1()
39482
40052
  ], RichTextEditor.prototype, "imageRemoving", void 0);
39483
40053
  __decorate$5([
39484
- Event()
40054
+ Event$1()
39485
40055
  ], RichTextEditor.prototype, "afterImageDelete", void 0);
39486
40056
  __decorate$5([
39487
- Event()
40057
+ Event$1()
39488
40058
  ], RichTextEditor.prototype, "fileSelected", void 0);
39489
40059
  __decorate$5([
39490
- Event()
40060
+ Event$1()
39491
40061
  ], RichTextEditor.prototype, "beforeFileUpload", void 0);
39492
40062
  __decorate$5([
39493
- Event()
40063
+ Event$1()
39494
40064
  ], RichTextEditor.prototype, "fileUploading", void 0);
39495
40065
  __decorate$5([
39496
- Event()
40066
+ Event$1()
39497
40067
  ], RichTextEditor.prototype, "fileUploadSuccess", void 0);
39498
40068
  __decorate$5([
39499
- Event()
40069
+ Event$1()
39500
40070
  ], RichTextEditor.prototype, "fileUploadFailed", void 0);
39501
40071
  __decorate$5([
39502
- Event()
40072
+ Event$1()
39503
40073
  ], RichTextEditor.prototype, "fileRemoving", void 0);
39504
40074
  __decorate$5([
39505
- Event()
40075
+ Event$1()
39506
40076
  ], RichTextEditor.prototype, "afterMediaDelete", void 0);
39507
40077
  __decorate$5([
39508
- Event()
40078
+ Event$1()
39509
40079
  ], RichTextEditor.prototype, "created", void 0);
39510
40080
  __decorate$5([
39511
- Event()
40081
+ Event$1()
39512
40082
  ], RichTextEditor.prototype, "destroyed", void 0);
39513
40083
  __decorate$5([
39514
- Event()
40084
+ Event$1()
39515
40085
  ], RichTextEditor.prototype, "beforeSanitizeHtml", void 0);
39516
40086
  __decorate$5([
39517
- Event()
40087
+ Event$1()
39518
40088
  ], RichTextEditor.prototype, "blur", void 0);
39519
40089
  __decorate$5([
39520
- Event()
40090
+ Event$1()
39521
40091
  ], RichTextEditor.prototype, "toolbarClick", void 0);
39522
40092
  __decorate$5([
39523
- Event()
40093
+ Event$1()
39524
40094
  ], RichTextEditor.prototype, "focus", void 0);
39525
40095
  __decorate$5([
39526
- Event()
40096
+ Event$1()
39527
40097
  ], RichTextEditor.prototype, "change", void 0);
39528
40098
  __decorate$5([
39529
- Event()
40099
+ Event$1()
39530
40100
  ], RichTextEditor.prototype, "resizing", void 0);
39531
40101
  __decorate$5([
39532
- Event()
40102
+ Event$1()
39533
40103
  ], RichTextEditor.prototype, "resizeStart", void 0);
39534
40104
  __decorate$5([
39535
- Event()
40105
+ Event$1()
39536
40106
  ], RichTextEditor.prototype, "resizeStop", void 0);
39537
40107
  __decorate$5([
39538
- Event()
40108
+ Event$1()
39539
40109
  ], RichTextEditor.prototype, "beforePasteCleanup", void 0);
39540
40110
  __decorate$5([
39541
- Event()
40111
+ Event$1()
39542
40112
  ], RichTextEditor.prototype, "afterPasteCleanup", void 0);
39543
40113
  __decorate$5([
39544
- Event()
40114
+ Event$1()
39545
40115
  ], RichTextEditor.prototype, "beforeImageDrop", void 0);
39546
40116
  __decorate$5([
39547
40117
  Property(null)
39548
40118
  ], RichTextEditor.prototype, "formatter", void 0);
39549
40119
  __decorate$5([
39550
- Event()
40120
+ Event$1()
39551
40121
  ], RichTextEditor.prototype, "slashMenuItemSelect", void 0);
39552
40122
  RichTextEditor = __decorate$5([
39553
40123
  NotifyPropertyChanges