@syncfusion/ej2-vue-documenteditor 20.4.54 → 21.1.36

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 (71) hide show
  1. package/CHANGELOG.md +208 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-vue-documenteditor.umd.min.js +2 -2
  4. package/dist/ej2-vue-documenteditor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-vue-documenteditor.es2015.js +240 -282
  6. package/dist/es6/ej2-vue-documenteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-vue-documenteditor.es5.js +261 -313
  8. package/dist/es6/ej2-vue-documenteditor.es5.js.map +1 -1
  9. package/dist/global/ej2-vue-documenteditor.min.js +2 -2
  10. package/package.json +11 -10
  11. package/src/document-editor/documenteditor.component.d.ts +3 -50
  12. package/src/document-editor/documenteditor.component.js +168 -197
  13. package/src/document-editor-container/documenteditorcontainer.component.d.ts +3 -26
  14. package/src/document-editor-container/documenteditorcontainer.component.js +96 -125
  15. package/styles/bootstrap-dark.css +167 -58
  16. package/styles/bootstrap.css +167 -54
  17. package/styles/bootstrap4.css +185 -65
  18. package/styles/bootstrap5-dark.css +187 -74
  19. package/styles/bootstrap5.css +187 -74
  20. package/styles/document-editor/bootstrap-dark.css +13 -2
  21. package/styles/document-editor/bootstrap.css +17 -2
  22. package/styles/document-editor/bootstrap4.css +23 -4
  23. package/styles/document-editor/bootstrap5-dark.css +32 -17
  24. package/styles/document-editor/bootstrap5.css +32 -17
  25. package/styles/document-editor/fabric-dark.css +13 -2
  26. package/styles/document-editor/fabric.css +17 -2
  27. package/styles/document-editor/fluent-dark.css +47 -27
  28. package/styles/document-editor/fluent.css +47 -27
  29. package/styles/document-editor/highcontrast-light.css +5 -0
  30. package/styles/document-editor/highcontrast.css +13 -2
  31. package/styles/document-editor/material-dark.css +13 -2
  32. package/styles/document-editor/material.css +13 -2
  33. package/styles/document-editor/material3-dark.css +3971 -0
  34. package/styles/document-editor/material3-dark.scss +2 -0
  35. package/styles/document-editor/material3.css +4027 -0
  36. package/styles/document-editor/material3.scss +2 -0
  37. package/styles/document-editor/tailwind-dark.css +29 -17
  38. package/styles/document-editor/tailwind.css +32 -17
  39. package/styles/document-editor-container/bootstrap-dark.css +154 -56
  40. package/styles/document-editor-container/bootstrap.css +150 -52
  41. package/styles/document-editor-container/bootstrap4.css +162 -61
  42. package/styles/document-editor-container/bootstrap5-dark.css +155 -57
  43. package/styles/document-editor-container/bootstrap5.css +155 -57
  44. package/styles/document-editor-container/fabric-dark.css +154 -56
  45. package/styles/document-editor-container/fabric.css +154 -56
  46. package/styles/document-editor-container/fluent-dark.css +159 -64
  47. package/styles/document-editor-container/fluent.css +159 -64
  48. package/styles/document-editor-container/highcontrast-light.css +154 -56
  49. package/styles/document-editor-container/highcontrast.css +154 -56
  50. package/styles/document-editor-container/material-dark.css +159 -61
  51. package/styles/document-editor-container/material.css +154 -55
  52. package/styles/document-editor-container/material3-dark.css +2178 -0
  53. package/styles/document-editor-container/material3-dark.scss +2 -0
  54. package/styles/document-editor-container/material3.css +2234 -0
  55. package/styles/document-editor-container/material3.scss +2 -0
  56. package/styles/document-editor-container/tailwind-dark.css +153 -55
  57. package/styles/document-editor-container/tailwind.css +153 -55
  58. package/styles/fabric-dark.css +167 -58
  59. package/styles/fabric.css +171 -58
  60. package/styles/fluent-dark.css +206 -91
  61. package/styles/fluent.css +206 -91
  62. package/styles/highcontrast-light.css +159 -56
  63. package/styles/highcontrast.css +167 -58
  64. package/styles/material-dark.css +172 -63
  65. package/styles/material.css +167 -57
  66. package/styles/material3-dark.css +6150 -0
  67. package/styles/material3-dark.scss +3 -0
  68. package/styles/material3.css +6261 -0
  69. package/styles/material3.scss +3 -0
  70. package/styles/tailwind-dark.css +182 -72
  71. package/styles/tailwind.css +185 -72
@@ -41,6 +41,11 @@
41
41
  font-family: "e-icons";
42
42
  font-size: 13px;
43
43
  }
44
+ .e-documenteditor .e-de-multi-cmt-mark::before {
45
+ content: "\e8bc";
46
+ font-family: "e-icons";
47
+ font-size: 14px;
48
+ }
44
49
  .e-documenteditor .e-de-cmt-post::before {
45
50
  content: "\e71d";
46
51
  font-family: "e-icons";
@@ -140,21 +145,27 @@
140
145
  color: #a19f9d;
141
146
  content: "\e775";
142
147
  font-family: "e-icons";
143
- font-size: 51px;
148
+ font-size: 42px;
149
+ margin: 5px;
150
+ position: absolute;
144
151
  }
145
152
 
146
153
  .e-de-tablecell-center-alignment::before {
147
154
  color: #a19f9d;
148
155
  content: "\e7e5";
149
156
  font-family: "e-icons";
150
- font-size: 51px;
157
+ font-size: 42px;
158
+ margin: 5px;
159
+ position: absolute;
151
160
  }
152
161
 
153
162
  .e-de-tablecell-bottom-alignment::before {
154
163
  color: #a19f9d;
155
164
  content: "\e7d9";
156
165
  font-family: "e-icons";
157
- font-size: 51px;
166
+ font-size: 42px;
167
+ margin: 5px;
168
+ position: absolute;
158
169
  }
159
170
 
160
171
  .e-de-table-border-setting {
@@ -202,70 +213,73 @@
202
213
  .e-de-table-border-none-setting::before {
203
214
  color: #a19f9d;
204
215
  content: "\e7eb";
205
- font-size: 38px;
216
+ font-size: 32px;
206
217
  position: absolute;
218
+ margin: 3px;
207
219
  }
208
220
 
209
221
  .e-de-table-border-box-setting::before {
210
222
  color: #a19f9d;
211
223
  content: "\e834";
212
- font-size: 34px;
213
- left: 2px;
224
+ font-size: 32px;
225
+ left: 3px;
214
226
  position: absolute;
215
- top: 2px;
227
+ top: 4px;
216
228
  }
217
229
 
218
230
  .e-de-table-border-all-setting::before {
219
231
  color: #a19f9d;
220
232
  content: "\e7e8";
221
233
  font-family: "e-icons";
222
- font-size: 34px;
223
- left: 2px;
234
+ font-size: 32px;
235
+ left: 3px;
224
236
  position: absolute;
225
- top: 2px;
237
+ top: 4px;
226
238
  }
227
239
 
228
240
  .e-de-table-border-custom-setting::before {
229
241
  color: #a19f9d;
230
242
  content: "\e7d5";
231
- font-size: 34px;
232
- left: 2px;
243
+ font-size: 32px;
244
+ left: 3px;
233
245
  position: absolute;
234
- top: 2px;
246
+ top: 4px;
235
247
  }
236
248
 
237
249
  .e-de-para-border-none-setting::before {
238
250
  color: #a19f9d;
239
251
  content: "\e890";
240
- font-size: 38px;
252
+ font-size: 32px;
241
253
  position: absolute;
254
+ margin: 3px;
255
+ top: 1px;
242
256
  }
243
257
 
244
258
  .e-de-para-border-box-setting::before {
245
259
  color: #a19f9d;
246
260
  content: "\e891";
247
- font-size: 34px;
248
- left: 2px;
261
+ font-size: 32px;
262
+ left: 3.5px;
249
263
  position: absolute;
250
- top: 2px;
264
+ top: 3.5px;
251
265
  }
252
266
 
253
267
  .e-de-para-border-shadow-setting::before {
254
268
  color: #a19f9d;
255
269
  content: "\e892";
256
- font-size: 34px;
257
- left: 2px;
270
+ font-size: 32px;
271
+ left: 3.5px;
258
272
  position: absolute;
259
- top: 2px;
273
+ top: 3.5px;
260
274
  }
261
275
 
262
276
  .e-de-para-border-custom-setting::before {
263
277
  color: #a19f9d;
264
278
  content: "\e88f";
265
- font-size: 34px;
266
- left: 2px;
279
+ font-size: 32px;
280
+ left: 3.5px;
267
281
  position: absolute;
268
- top: 2px;
282
+ top: 3.5px;
269
283
  }
270
284
 
271
285
  .e-de-table-border-toptop-alignment::before {
@@ -342,8 +356,8 @@
342
356
  }
343
357
 
344
358
  .e-de-columns-presets-genral {
345
- height: 62px;
346
- width: 62px;
359
+ height: 70px;
360
+ width: 70px;
347
361
  margin-right: 33px;
348
362
  margin-bottom: 12px;
349
363
  }
@@ -1787,7 +1801,7 @@ label[for*=_wholeWord_e-de-rtl] {
1787
1801
 
1788
1802
  .e-de-restrict-pane,
1789
1803
  .e-de-op {
1790
- background-color: #201f1e;
1804
+ background: #201f1e;
1791
1805
  }
1792
1806
 
1793
1807
  .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2428,6 +2442,11 @@ label[for*=_wholeWord_e-de-rtl] {
2428
2442
  margin-left: 12px;
2429
2443
  }
2430
2444
 
2445
+ .e-bigger .e-dlg-container .e-de-dlg-target .e-de-style-dialog .e-de-style-font-color-picker button {
2446
+ height: 40px !important;
2447
+ width: auto !important;
2448
+ }
2449
+
2431
2450
  .e-de-style-bold-button-size {
2432
2451
  margin-left: 12px;
2433
2452
  }
@@ -2457,7 +2476,7 @@ label[for*=_wholeWord_e-de-rtl] {
2457
2476
  margin-right: 20px;
2458
2477
  }
2459
2478
 
2460
- .e-de-style-left-div .e-de-style-dlg-name-input {
2479
+ .e-de-style-dlg-name-input {
2461
2480
  height: 31px;
2462
2481
  }
2463
2482
 
@@ -3338,6 +3357,7 @@ label[for*=_wholeWord_e-de-rtl] {
3338
3357
 
3339
3358
  .e-de-cp-option.e-btn.e-icon-btn span {
3340
3359
  margin-top: 0px;
3360
+ background: #201f1e;
3341
3361
  }
3342
3362
 
3343
3363
  .e-de-cmt-view:hover .e-de-cp-option {
@@ -41,6 +41,11 @@
41
41
  font-family: "e-icons";
42
42
  font-size: 13px;
43
43
  }
44
+ .e-documenteditor .e-de-multi-cmt-mark::before {
45
+ content: "\e8bc";
46
+ font-family: "e-icons";
47
+ font-size: 14px;
48
+ }
44
49
  .e-documenteditor .e-de-cmt-post::before {
45
50
  content: "\e71d";
46
51
  font-family: "e-icons";
@@ -140,21 +145,27 @@
140
145
  color: #605e5c;
141
146
  content: "\e775";
142
147
  font-family: "e-icons";
143
- font-size: 51px;
148
+ font-size: 42px;
149
+ margin: 5px;
150
+ position: absolute;
144
151
  }
145
152
 
146
153
  .e-de-tablecell-center-alignment::before {
147
154
  color: #605e5c;
148
155
  content: "\e7e5";
149
156
  font-family: "e-icons";
150
- font-size: 51px;
157
+ font-size: 42px;
158
+ margin: 5px;
159
+ position: absolute;
151
160
  }
152
161
 
153
162
  .e-de-tablecell-bottom-alignment::before {
154
163
  color: #605e5c;
155
164
  content: "\e7d9";
156
165
  font-family: "e-icons";
157
- font-size: 51px;
166
+ font-size: 42px;
167
+ margin: 5px;
168
+ position: absolute;
158
169
  }
159
170
 
160
171
  .e-de-table-border-setting {
@@ -202,70 +213,73 @@
202
213
  .e-de-table-border-none-setting::before {
203
214
  color: #605e5c;
204
215
  content: "\e7eb";
205
- font-size: 38px;
216
+ font-size: 32px;
206
217
  position: absolute;
218
+ margin: 3px;
207
219
  }
208
220
 
209
221
  .e-de-table-border-box-setting::before {
210
222
  color: #605e5c;
211
223
  content: "\e834";
212
- font-size: 34px;
213
- left: 2px;
224
+ font-size: 32px;
225
+ left: 3px;
214
226
  position: absolute;
215
- top: 2px;
227
+ top: 4px;
216
228
  }
217
229
 
218
230
  .e-de-table-border-all-setting::before {
219
231
  color: #605e5c;
220
232
  content: "\e7e8";
221
233
  font-family: "e-icons";
222
- font-size: 34px;
223
- left: 2px;
234
+ font-size: 32px;
235
+ left: 3px;
224
236
  position: absolute;
225
- top: 2px;
237
+ top: 4px;
226
238
  }
227
239
 
228
240
  .e-de-table-border-custom-setting::before {
229
241
  color: #605e5c;
230
242
  content: "\e7d5";
231
- font-size: 34px;
232
- left: 2px;
243
+ font-size: 32px;
244
+ left: 3px;
233
245
  position: absolute;
234
- top: 2px;
246
+ top: 4px;
235
247
  }
236
248
 
237
249
  .e-de-para-border-none-setting::before {
238
250
  color: #605e5c;
239
251
  content: "\e890";
240
- font-size: 38px;
252
+ font-size: 32px;
241
253
  position: absolute;
254
+ margin: 3px;
255
+ top: 1px;
242
256
  }
243
257
 
244
258
  .e-de-para-border-box-setting::before {
245
259
  color: #605e5c;
246
260
  content: "\e891";
247
- font-size: 34px;
248
- left: 2px;
261
+ font-size: 32px;
262
+ left: 3.5px;
249
263
  position: absolute;
250
- top: 2px;
264
+ top: 3.5px;
251
265
  }
252
266
 
253
267
  .e-de-para-border-shadow-setting::before {
254
268
  color: #605e5c;
255
269
  content: "\e892";
256
- font-size: 34px;
257
- left: 2px;
270
+ font-size: 32px;
271
+ left: 3.5px;
258
272
  position: absolute;
259
- top: 2px;
273
+ top: 3.5px;
260
274
  }
261
275
 
262
276
  .e-de-para-border-custom-setting::before {
263
277
  color: #605e5c;
264
278
  content: "\e88f";
265
- font-size: 34px;
266
- left: 2px;
279
+ font-size: 32px;
280
+ left: 3.5px;
267
281
  position: absolute;
268
- top: 2px;
282
+ top: 3.5px;
269
283
  }
270
284
 
271
285
  .e-de-table-border-toptop-alignment::before {
@@ -342,8 +356,8 @@
342
356
  }
343
357
 
344
358
  .e-de-columns-presets-genral {
345
- height: 62px;
346
- width: 62px;
359
+ height: 70px;
360
+ width: 70px;
347
361
  margin-right: 33px;
348
362
  margin-bottom: 12px;
349
363
  }
@@ -1787,7 +1801,7 @@ label[for*=_wholeWord_e-de-rtl] {
1787
1801
 
1788
1802
  .e-de-restrict-pane,
1789
1803
  .e-de-op {
1790
- background-color: #faf9f8;
1804
+ background: #faf9f8;
1791
1805
  }
1792
1806
 
1793
1807
  .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2428,6 +2442,11 @@ label[for*=_wholeWord_e-de-rtl] {
2428
2442
  margin-left: 12px;
2429
2443
  }
2430
2444
 
2445
+ .e-bigger .e-dlg-container .e-de-dlg-target .e-de-style-dialog .e-de-style-font-color-picker button {
2446
+ height: 40px !important;
2447
+ width: auto !important;
2448
+ }
2449
+
2431
2450
  .e-de-style-bold-button-size {
2432
2451
  margin-left: 12px;
2433
2452
  }
@@ -2457,7 +2476,7 @@ label[for*=_wholeWord_e-de-rtl] {
2457
2476
  margin-right: 20px;
2458
2477
  }
2459
2478
 
2460
- .e-de-style-left-div .e-de-style-dlg-name-input {
2479
+ .e-de-style-dlg-name-input {
2461
2480
  height: 31px;
2462
2481
  }
2463
2482
 
@@ -3338,6 +3357,7 @@ label[for*=_wholeWord_e-de-rtl] {
3338
3357
 
3339
3358
  .e-de-cp-option.e-btn.e-icon-btn span {
3340
3359
  margin-top: 0px;
3360
+ background: #faf9f8;
3341
3361
  }
3342
3362
 
3343
3363
  .e-de-cmt-view:hover .e-de-cp-option {
@@ -2089,6 +2089,11 @@ label[for=container_wholeWord] {
2089
2089
  font-family: "e-icons";
2090
2090
  font-size: 13px;
2091
2091
  }
2092
+ .e-documenteditor .e-de-multi-cmt-mark::before {
2093
+ content: "\e97a";
2094
+ font-family: "e-icons";
2095
+ font-size: 14px;
2096
+ }
2092
2097
  .e-documenteditor .e-de-cmt-post::before {
2093
2098
  content: "\e816";
2094
2099
  font-family: "e-icons";
@@ -43,6 +43,11 @@
43
43
  font-family: "e-icons";
44
44
  font-size: 13px;
45
45
  }
46
+ .e-documenteditor .e-de-multi-cmt-mark::before {
47
+ content: "\e97a";
48
+ font-family: "e-icons";
49
+ font-size: 14px;
50
+ }
46
51
  .e-documenteditor .e-de-cmt-post::before {
47
52
  content: "\e816";
48
53
  font-family: "e-icons";
@@ -1690,7 +1695,7 @@ label[for*=_wholeWord_e-de-rtl] {
1690
1695
 
1691
1696
  .e-de-restrict-pane,
1692
1697
  .e-de-op {
1693
- background-color: #000;
1698
+ background: #000;
1694
1699
  }
1695
1700
 
1696
1701
  .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2346,6 +2351,11 @@ label[for*=_wholeWord_e-de-rtl] {
2346
2351
  height: 35px;
2347
2352
  }
2348
2353
 
2354
+ .e-bigger .e-dlg-container .e-de-dlg-target .e-de-style-dialog .e-de-style-font-color-picker button {
2355
+ height: 40px !important;
2356
+ width: auto !important;
2357
+ }
2358
+
2349
2359
  .e-de-style-bold-button-size {
2350
2360
  margin-left: 8px;
2351
2361
  margin-right: 8px;
@@ -2383,7 +2393,7 @@ label[for*=_wholeWord_e-de-rtl] {
2383
2393
  margin-right: 20px;
2384
2394
  }
2385
2395
 
2386
- .e-de-style-left-div .e-de-style-dlg-name-input {
2396
+ .e-de-style-dlg-name-input {
2387
2397
  height: 32px;
2388
2398
  }
2389
2399
 
@@ -3306,6 +3316,7 @@ label[for*=_wholeWord_e-de-rtl] {
3306
3316
 
3307
3317
  .e-de-cp-option.e-btn.e-icon-btn span {
3308
3318
  margin-top: 0px;
3319
+ background: #000;
3309
3320
  }
3310
3321
 
3311
3322
  .e-de-cmt-view:hover .e-de-cp-option {
@@ -49,6 +49,11 @@
49
49
  font-family: "e-icons";
50
50
  font-size: 13px;
51
51
  }
52
+ .e-documenteditor .e-de-multi-cmt-mark::before {
53
+ content: "\e97a";
54
+ font-family: "e-icons";
55
+ font-size: 14px;
56
+ }
52
57
  .e-documenteditor .e-de-cmt-post::before {
53
58
  content: "\e816";
54
59
  font-family: "e-icons";
@@ -1685,7 +1690,7 @@ label[for*=_wholeWord_e-de-rtl] {
1685
1690
 
1686
1691
  .e-de-restrict-pane,
1687
1692
  .e-de-op {
1688
- background-color: #212121;
1693
+ background: #212121;
1689
1694
  }
1690
1695
 
1691
1696
  .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2341,6 +2346,11 @@ label[for*=_wholeWord_e-de-rtl] {
2341
2346
  height: 35px;
2342
2347
  }
2343
2348
 
2349
+ .e-bigger .e-dlg-container .e-de-dlg-target .e-de-style-dialog .e-de-style-font-color-picker button {
2350
+ height: 40px !important;
2351
+ width: auto !important;
2352
+ }
2353
+
2344
2354
  .e-de-style-bold-button-size {
2345
2355
  margin-left: 8px;
2346
2356
  margin-right: 8px;
@@ -2378,7 +2388,7 @@ label[for*=_wholeWord_e-de-rtl] {
2378
2388
  margin-right: 15px;
2379
2389
  }
2380
2390
 
2381
- .e-de-style-left-div .e-de-style-dlg-name-input {
2391
+ .e-de-style-dlg-name-input {
2382
2392
  height: 18px;
2383
2393
  }
2384
2394
 
@@ -3301,6 +3311,7 @@ label[for*=_wholeWord_e-de-rtl] {
3301
3311
 
3302
3312
  .e-de-cp-option.e-btn.e-icon-btn span {
3303
3313
  margin-top: 0px;
3314
+ background: #212121;
3304
3315
  }
3305
3316
 
3306
3317
  .e-de-cmt-view:hover .e-de-cp-option {
@@ -49,6 +49,11 @@
49
49
  font-family: "e-icons";
50
50
  font-size: 13px;
51
51
  }
52
+ .e-documenteditor .e-de-multi-cmt-mark::before {
53
+ content: "\e97a";
54
+ font-family: "e-icons";
55
+ font-size: 14px;
56
+ }
52
57
  .e-documenteditor .e-de-cmt-post::before {
53
58
  content: "\e816";
54
59
  font-family: "e-icons";
@@ -1685,7 +1690,7 @@ label[for*=_wholeWord_e-de-rtl] {
1685
1690
 
1686
1691
  .e-de-restrict-pane,
1687
1692
  .e-de-op {
1688
- background-color: #fff;
1693
+ background: #fff;
1689
1694
  }
1690
1695
 
1691
1696
  .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2341,6 +2346,11 @@ label[for*=_wholeWord_e-de-rtl] {
2341
2346
  height: 35px;
2342
2347
  }
2343
2348
 
2349
+ .e-bigger .e-dlg-container .e-de-dlg-target .e-de-style-dialog .e-de-style-font-color-picker button {
2350
+ height: 40px !important;
2351
+ width: auto !important;
2352
+ }
2353
+
2344
2354
  .e-de-style-bold-button-size {
2345
2355
  margin-left: 8px;
2346
2356
  margin-right: 8px;
@@ -2378,7 +2388,7 @@ label[for*=_wholeWord_e-de-rtl] {
2378
2388
  margin-right: 15px;
2379
2389
  }
2380
2390
 
2381
- .e-de-style-left-div .e-de-style-dlg-name-input {
2391
+ .e-de-style-dlg-name-input {
2382
2392
  height: 18px;
2383
2393
  }
2384
2394
 
@@ -3301,6 +3311,7 @@ label[for*=_wholeWord_e-de-rtl] {
3301
3311
 
3302
3312
  .e-de-cp-option.e-btn.e-icon-btn span {
3303
3313
  margin-top: 0px;
3314
+ background: #fff;
3304
3315
  }
3305
3316
 
3306
3317
  .e-de-cmt-view:hover .e-de-cp-option {