@syncfusion/ej2-react-documenteditor 23.1.44 → 23.2.5

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 (56) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/ej2-react-documenteditor.min.js +1 -1
  3. package/dist/ej2-react-documenteditor.umd.min.js +1 -1
  4. package/package.json +8 -8
  5. package/src/document-editor/documenteditor.component.d.ts +2 -2
  6. package/src/document-editor-container/documenteditorcontainer.component.d.ts +2 -2
  7. package/styles/bootstrap-dark.css +74 -0
  8. package/styles/bootstrap.css +74 -0
  9. package/styles/bootstrap4.css +74 -0
  10. package/styles/bootstrap5-dark.css +74 -0
  11. package/styles/bootstrap5.css +74 -0
  12. package/styles/document-editor/bootstrap-dark.css +8 -0
  13. package/styles/document-editor/bootstrap.css +8 -0
  14. package/styles/document-editor/bootstrap4.css +8 -0
  15. package/styles/document-editor/bootstrap5-dark.css +8 -0
  16. package/styles/document-editor/bootstrap5.css +8 -0
  17. package/styles/document-editor/fabric-dark.css +8 -0
  18. package/styles/document-editor/fabric.css +8 -0
  19. package/styles/document-editor/fluent-dark.css +8 -0
  20. package/styles/document-editor/fluent.css +8 -0
  21. package/styles/document-editor/highcontrast.css +8 -0
  22. package/styles/document-editor/material-dark.css +8 -0
  23. package/styles/document-editor/material.css +8 -0
  24. package/styles/document-editor/material3-dark.css +8 -0
  25. package/styles/document-editor/material3.css +8 -0
  26. package/styles/document-editor/tailwind-dark.css +8 -0
  27. package/styles/document-editor/tailwind.css +8 -0
  28. package/styles/document-editor-container/bootstrap-dark.css +66 -0
  29. package/styles/document-editor-container/bootstrap.css +66 -0
  30. package/styles/document-editor-container/bootstrap4.css +66 -0
  31. package/styles/document-editor-container/bootstrap5-dark.css +66 -0
  32. package/styles/document-editor-container/bootstrap5.css +66 -0
  33. package/styles/document-editor-container/fabric-dark.css +66 -0
  34. package/styles/document-editor-container/fabric.css +66 -0
  35. package/styles/document-editor-container/fluent-dark.css +66 -0
  36. package/styles/document-editor-container/fluent.css +66 -0
  37. package/styles/document-editor-container/highcontrast-light.css +66 -0
  38. package/styles/document-editor-container/highcontrast.css +66 -0
  39. package/styles/document-editor-container/material-dark.css +66 -0
  40. package/styles/document-editor-container/material.css +66 -0
  41. package/styles/document-editor-container/material3-dark.css +69 -0
  42. package/styles/document-editor-container/material3.css +69 -0
  43. package/styles/document-editor-container/tailwind-dark.css +66 -0
  44. package/styles/document-editor-container/tailwind.css +66 -0
  45. package/styles/fabric-dark.css +74 -0
  46. package/styles/fabric.css +74 -0
  47. package/styles/fluent-dark.css +74 -0
  48. package/styles/fluent.css +74 -0
  49. package/styles/highcontrast-light.css +66 -0
  50. package/styles/highcontrast.css +74 -0
  51. package/styles/material-dark.css +74 -0
  52. package/styles/material.css +74 -0
  53. package/styles/material3-dark.css +77 -0
  54. package/styles/material3.css +77 -0
  55. package/styles/tailwind-dark.css +74 -0
  56. package/styles/tailwind.css +74 -0
@@ -813,6 +813,14 @@
813
813
  padding-right: 20px;
814
814
  }
815
815
 
816
+ .e-de-para-tab {
817
+ float: left;
818
+ }
819
+
820
+ .e-de-para-tab.e-rtl {
821
+ float: right;
822
+ }
823
+
816
824
  .e-de-column-label.e-de-rtl {
817
825
  font-size: 12px;
818
826
  font-weight: normal;
@@ -5324,6 +5332,67 @@ label[for*=_wholeWord_e-de-rtl] {
5324
5332
  width: 70px;
5325
5333
  }
5326
5334
 
5335
+ .e-de-hRuler {
5336
+ background-color: #f5f5f5;
5337
+ border-bottom: 0.5px solid #eee;
5338
+ }
5339
+
5340
+ .e-de-vRuler {
5341
+ background-color: #f5f5f5;
5342
+ border-right: 0.5px solid #eee;
5343
+ }
5344
+
5345
+ .e-de-ruler-margin {
5346
+ background-color: #fff;
5347
+ }
5348
+
5349
+ .e-de-ruler-tick {
5350
+ stroke: #bdbdbd;
5351
+ }
5352
+
5353
+ .e-de-ruler-tick-label {
5354
+ fill: rgba(0, 0, 0, 0.54);
5355
+ }
5356
+
5357
+ .e-de-ruler-markIndicator {
5358
+ background-color: #fff;
5359
+ }
5360
+
5361
+ .e-de-ruler-marker .e-de-ruler-tab-svg {
5362
+ fill: #bdbdbd;
5363
+ }
5364
+
5365
+ .e-de-ruler-marker .e-de-ruler-indent-svg {
5366
+ fill: #bdbdbd;
5367
+ }
5368
+
5369
+ .e-de-ruler-indent .e-de-ruler-indent-svg {
5370
+ fill: #fff;
5371
+ stroke: #757575;
5372
+ }
5373
+
5374
+ .e-de-ruler-indent .e-de-ruler-indent-svg:hover {
5375
+ fill: #eee;
5376
+ stroke: #757575;
5377
+ }
5378
+
5379
+ .e-de-ruler-indent .e-de-ruler-indent-svg:active {
5380
+ fill: #3f51b5;
5381
+ stroke: #757575;
5382
+ }
5383
+
5384
+ .e-de-ruler-table-svg {
5385
+ fill: #757575;
5386
+ }
5387
+
5388
+ .e-de-ruler-table-svg:hover {
5389
+ fill: #eee;
5390
+ }
5391
+
5392
+ .e-de-ruler-table-svg:active {
5393
+ fill: #3f51b5;
5394
+ }
5395
+
5327
5396
  .e-rtl .e-listview .e-list-icon {
5328
5397
  height: 24px;
5329
5398
  width: 16px;
@@ -5335,6 +5404,11 @@ label[for*=_wholeWord_e-de-rtl] {
5335
5404
  line-height: 22px;
5336
5405
  margin-left: 12px;
5337
5406
  }
5407
+ .e-rtl .e-de-vRuler {
5408
+ background-color: #f5f5f5;
5409
+ border-right: none;
5410
+ border-left: 0.5px solid #eee;
5411
+ }
5338
5412
 
5339
5413
  .e-bigger .de-split-button > div:first-child {
5340
5414
  margin-right: 0;
@@ -910,6 +910,14 @@
910
910
  padding-right: 20px;
911
911
  }
912
912
 
913
+ .e-de-para-tab {
914
+ float: left;
915
+ }
916
+
917
+ .e-de-para-tab.e-rtl {
918
+ float: right;
919
+ }
920
+
913
921
  .e-de-column-label.e-de-rtl {
914
922
  font-size: 13;
915
923
  font-weight: 500;
@@ -5731,6 +5739,70 @@ label[for*=_wholeWord_e-de-rtl] {
5731
5739
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5732
5740
  }
5733
5741
 
5742
+ .e-de-hRuler {
5743
+ background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5744
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5745
+ border-bottom: 0.5px solid rgba(var(--color-sf-outline-variant));
5746
+ }
5747
+
5748
+ .e-de-vRuler {
5749
+ background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5750
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5751
+ border-right: 0.5px solid rgba(var(--color-sf-outline-variant));
5752
+ }
5753
+
5754
+ .e-de-ruler-margin {
5755
+ background-color: rgba(var(--color-sf-surface));
5756
+ background: rgba(var(--color-sf-surface));
5757
+ }
5758
+
5759
+ .e-de-ruler-tick {
5760
+ stroke: rgba(var(--color-sf-on-surface-variant));
5761
+ }
5762
+
5763
+ .e-de-ruler-tick-label {
5764
+ fill: rgba(var(--color-sf-on-surface-variant));
5765
+ }
5766
+
5767
+ .e-de-ruler-markIndicator {
5768
+ background-color: rgba(var(--color-sf-surface));
5769
+ }
5770
+
5771
+ .e-de-ruler-marker .e-de-ruler-tab-svg {
5772
+ fill: rgba(var(--color-sf-on-surface-variant));
5773
+ }
5774
+
5775
+ .e-de-ruler-marker .e-de-ruler-indent-svg {
5776
+ fill: rgba(var(--color-sf-on-surface-variant));
5777
+ }
5778
+
5779
+ .e-de-ruler-indent .e-de-ruler-indent-svg {
5780
+ fill: rgba(var(--color-sf-surface));
5781
+ stroke: rgba(var(--color-sf-on-surface-variant));
5782
+ }
5783
+
5784
+ .e-de-ruler-indent .e-de-ruler-indent-svg:hover {
5785
+ fill: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
5786
+ stroke: rgba(var(--color-sf-on-surface-variant));
5787
+ }
5788
+
5789
+ .e-de-ruler-indent .e-de-ruler-indent-svg:active {
5790
+ fill: rgba(var(--color-sf-primary));
5791
+ stroke: rgba(var(--color-sf-on-surface-variant));
5792
+ }
5793
+
5794
+ .e-de-ruler-table-svg {
5795
+ fill: rgba(var(--color-sf-on-surface-variant));
5796
+ }
5797
+
5798
+ .e-de-ruler-table-svg:hover {
5799
+ fill: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
5800
+ }
5801
+
5802
+ .e-de-ruler-table-svg:active {
5803
+ fill: rgba(var(--color-sf-primary));
5804
+ }
5805
+
5734
5806
  .e-rtl .e-listview .e-list-icon {
5735
5807
  height: 24px;
5736
5808
  width: 16px;
@@ -5742,6 +5814,11 @@ label[for*=_wholeWord_e-de-rtl] {
5742
5814
  line-height: 22px;
5743
5815
  margin-left: 12px;
5744
5816
  }
5817
+ .e-rtl .e-de-vRuler {
5818
+ background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5819
+ border-right: none;
5820
+ border-left: 0.5px solid rgba(var(--color-sf-outline-variant));
5821
+ }
5745
5822
 
5746
5823
  .e-bigger .de-split-button > div:first-child {
5747
5824
  margin-right: 16px;
@@ -966,6 +966,14 @@
966
966
  padding-right: 20px;
967
967
  }
968
968
 
969
+ .e-de-para-tab {
970
+ float: left;
971
+ }
972
+
973
+ .e-de-para-tab.e-rtl {
974
+ float: right;
975
+ }
976
+
969
977
  .e-de-column-label.e-de-rtl {
970
978
  font-size: 13;
971
979
  font-weight: 500;
@@ -5843,6 +5851,70 @@ label[for*=_wholeWord_e-de-rtl] {
5843
5851
  background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5844
5852
  }
5845
5853
 
5854
+ .e-de-hRuler {
5855
+ background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5856
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5857
+ border-bottom: 0.5px solid rgba(var(--color-sf-outline-variant));
5858
+ }
5859
+
5860
+ .e-de-vRuler {
5861
+ background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5862
+ background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5863
+ border-right: 0.5px solid rgba(var(--color-sf-outline-variant));
5864
+ }
5865
+
5866
+ .e-de-ruler-margin {
5867
+ background-color: rgba(var(--color-sf-surface));
5868
+ background: rgba(var(--color-sf-surface));
5869
+ }
5870
+
5871
+ .e-de-ruler-tick {
5872
+ stroke: rgba(var(--color-sf-on-surface-variant));
5873
+ }
5874
+
5875
+ .e-de-ruler-tick-label {
5876
+ fill: rgba(var(--color-sf-on-surface-variant));
5877
+ }
5878
+
5879
+ .e-de-ruler-markIndicator {
5880
+ background-color: rgba(var(--color-sf-surface));
5881
+ }
5882
+
5883
+ .e-de-ruler-marker .e-de-ruler-tab-svg {
5884
+ fill: rgba(var(--color-sf-on-surface-variant));
5885
+ }
5886
+
5887
+ .e-de-ruler-marker .e-de-ruler-indent-svg {
5888
+ fill: rgba(var(--color-sf-on-surface-variant));
5889
+ }
5890
+
5891
+ .e-de-ruler-indent .e-de-ruler-indent-svg {
5892
+ fill: rgba(var(--color-sf-surface));
5893
+ stroke: rgba(var(--color-sf-on-surface-variant));
5894
+ }
5895
+
5896
+ .e-de-ruler-indent .e-de-ruler-indent-svg:hover {
5897
+ fill: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
5898
+ stroke: rgba(var(--color-sf-on-surface-variant));
5899
+ }
5900
+
5901
+ .e-de-ruler-indent .e-de-ruler-indent-svg:active {
5902
+ fill: rgba(var(--color-sf-primary));
5903
+ stroke: rgba(var(--color-sf-on-surface-variant));
5904
+ }
5905
+
5906
+ .e-de-ruler-table-svg {
5907
+ fill: rgba(var(--color-sf-on-surface-variant));
5908
+ }
5909
+
5910
+ .e-de-ruler-table-svg:hover {
5911
+ fill: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));
5912
+ }
5913
+
5914
+ .e-de-ruler-table-svg:active {
5915
+ fill: rgba(var(--color-sf-primary));
5916
+ }
5917
+
5846
5918
  .e-rtl .e-listview .e-list-icon {
5847
5919
  height: 24px;
5848
5920
  width: 16px;
@@ -5854,6 +5926,11 @@ label[for*=_wholeWord_e-de-rtl] {
5854
5926
  line-height: 22px;
5855
5927
  margin-left: 12px;
5856
5928
  }
5929
+ .e-rtl .e-de-vRuler {
5930
+ background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
5931
+ border-right: none;
5932
+ border-left: 0.5px solid rgba(var(--color-sf-outline-variant));
5933
+ }
5857
5934
 
5858
5935
  .e-bigger .de-split-button > div:first-child {
5859
5936
  margin-right: 16px;
@@ -855,6 +855,14 @@
855
855
  padding-right: 20px;
856
856
  }
857
857
 
858
+ .e-de-para-tab {
859
+ float: left;
860
+ }
861
+
862
+ .e-de-para-tab.e-rtl {
863
+ float: right;
864
+ }
865
+
858
866
  .e-de-column-label.e-de-rtl {
859
867
  font-size: 12px;
860
868
  font-weight: 500;
@@ -5736,6 +5744,67 @@ label[for*=_wholeWord_e-de-rtl] {
5736
5744
  padding: 0;
5737
5745
  }
5738
5746
 
5747
+ .e-de-hRuler {
5748
+ background-color: #374151;
5749
+ border-bottom: 0.5px solid #4b5563;
5750
+ }
5751
+
5752
+ .e-de-vRuler {
5753
+ background-color: #374151;
5754
+ border-right: 0.5px solid #4b5563;
5755
+ }
5756
+
5757
+ .e-de-ruler-margin {
5758
+ background-color: #1f2937;
5759
+ }
5760
+
5761
+ .e-de-ruler-tick {
5762
+ stroke: #d1d5db;
5763
+ }
5764
+
5765
+ .e-de-ruler-tick-label {
5766
+ fill: #d1d5db;
5767
+ }
5768
+
5769
+ .e-de-ruler-markIndicator {
5770
+ background-color: #1f2937;
5771
+ }
5772
+
5773
+ .e-de-ruler-marker .e-de-ruler-tab-svg {
5774
+ fill: #d1d5db;
5775
+ }
5776
+
5777
+ .e-de-ruler-marker .e-de-ruler-indent-svg {
5778
+ fill: #d1d5db;
5779
+ }
5780
+
5781
+ .e-de-ruler-indent .e-de-ruler-indent-svg {
5782
+ fill: #1f2937;
5783
+ stroke: #d1d5db;
5784
+ }
5785
+
5786
+ .e-de-ruler-indent .e-de-ruler-indent-svg:hover {
5787
+ fill: #4b5563;
5788
+ stroke: #d1d5db;
5789
+ }
5790
+
5791
+ .e-de-ruler-indent .e-de-ruler-indent-svg:active {
5792
+ fill: #22d3ee;
5793
+ stroke: #d1d5db;
5794
+ }
5795
+
5796
+ .e-de-ruler-table-svg {
5797
+ fill: #d1d5db;
5798
+ }
5799
+
5800
+ .e-de-ruler-table-svg:hover {
5801
+ fill: #4b5563;
5802
+ }
5803
+
5804
+ .e-de-ruler-table-svg:active {
5805
+ fill: #22d3ee;
5806
+ }
5807
+
5739
5808
  .e-rtl .e-listview .e-list-icon {
5740
5809
  height: 24px;
5741
5810
  width: 16px;
@@ -5747,6 +5816,11 @@ label[for*=_wholeWord_e-de-rtl] {
5747
5816
  line-height: 22px;
5748
5817
  margin-left: 10px;
5749
5818
  }
5819
+ .e-rtl .e-de-vRuler {
5820
+ background-color: #374151;
5821
+ border-right: none;
5822
+ border-left: 0.5px solid #4b5563;
5823
+ }
5750
5824
 
5751
5825
  .e-bigger .de-split-button > div:first-child {
5752
5826
  margin-right: 0;
@@ -858,6 +858,14 @@
858
858
  padding-right: 20px;
859
859
  }
860
860
 
861
+ .e-de-para-tab {
862
+ float: left;
863
+ }
864
+
865
+ .e-de-para-tab.e-rtl {
866
+ float: right;
867
+ }
868
+
861
869
  .e-de-column-label.e-de-rtl {
862
870
  font-size: 12px;
863
871
  font-weight: 500;
@@ -5739,6 +5747,67 @@ label[for*=_wholeWord_e-de-rtl] {
5739
5747
  padding: 0;
5740
5748
  }
5741
5749
 
5750
+ .e-de-hRuler {
5751
+ background-color: #f3f4f6;
5752
+ border-bottom: 0.5px solid #e5e7eb;
5753
+ }
5754
+
5755
+ .e-de-vRuler {
5756
+ background-color: #f3f4f6;
5757
+ border-right: 0.5px solid #e5e7eb;
5758
+ }
5759
+
5760
+ .e-de-ruler-margin {
5761
+ background-color: #fff;
5762
+ }
5763
+
5764
+ .e-de-ruler-tick {
5765
+ stroke: #6b7280;
5766
+ }
5767
+
5768
+ .e-de-ruler-tick-label {
5769
+ fill: #374151;
5770
+ }
5771
+
5772
+ .e-de-ruler-markIndicator {
5773
+ background-color: #fff;
5774
+ }
5775
+
5776
+ .e-de-ruler-marker .e-de-ruler-tab-svg {
5777
+ fill: #6b7280;
5778
+ }
5779
+
5780
+ .e-de-ruler-marker .e-de-ruler-indent-svg {
5781
+ fill: #6b7280;
5782
+ }
5783
+
5784
+ .e-de-ruler-indent .e-de-ruler-indent-svg {
5785
+ fill: #fff;
5786
+ stroke: #6b7280;
5787
+ }
5788
+
5789
+ .e-de-ruler-indent .e-de-ruler-indent-svg:hover {
5790
+ fill: #e5e7eb;
5791
+ stroke: #6b7280;
5792
+ }
5793
+
5794
+ .e-de-ruler-indent .e-de-ruler-indent-svg:active {
5795
+ fill: #4f46e5;
5796
+ stroke: #6b7280;
5797
+ }
5798
+
5799
+ .e-de-ruler-table-svg {
5800
+ fill: #6b7280;
5801
+ }
5802
+
5803
+ .e-de-ruler-table-svg:hover {
5804
+ fill: #e5e7eb;
5805
+ }
5806
+
5807
+ .e-de-ruler-table-svg:active {
5808
+ fill: #4f46e5;
5809
+ }
5810
+
5742
5811
  .e-rtl .e-listview .e-list-icon {
5743
5812
  height: 24px;
5744
5813
  width: 16px;
@@ -5750,6 +5819,11 @@ label[for*=_wholeWord_e-de-rtl] {
5750
5819
  line-height: 22px;
5751
5820
  margin-left: 10px;
5752
5821
  }
5822
+ .e-rtl .e-de-vRuler {
5823
+ background-color: #f3f4f6;
5824
+ border-right: none;
5825
+ border-left: 0.5px solid #e5e7eb;
5826
+ }
5753
5827
 
5754
5828
  .e-bigger .de-split-button > div:first-child {
5755
5829
  margin-right: 0;