quill-table-up 2.4.1 → 2.4.2

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 (29) hide show
  1. package/README.md +8 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +7 -2
  4. package/dist/index.js +30 -23
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.umd.js +34 -27
  7. package/dist/index.umd.js.map +1 -1
  8. package/package.json +5 -4
  9. package/src/__tests__/e2e/table-blots.test.ts +47 -0
  10. package/src/__tests__/e2e/table-hack.test.ts +5 -5
  11. package/src/__tests__/e2e/table-keyboard-handler.test.ts +157 -3
  12. package/src/__tests__/e2e/table-selection.test.ts +0 -109
  13. package/src/__tests__/unit/table-cell-merge.test.ts +79 -6
  14. package/src/__tests__/unit/table-clipboard.test.ts +138 -182
  15. package/src/__tests__/unit/table-hack.test.ts +73 -73
  16. package/src/__tests__/unit/table-insert.test.ts +35 -32
  17. package/src/__tests__/unit/table-redo-undo.test.ts +98 -20
  18. package/src/__tests__/unit/table-remove.test.ts +8 -8
  19. package/src/__tests__/unit/utils.test.ts +4 -4
  20. package/src/__tests__/unit/utils.ts +1 -1
  21. package/src/formats/table-cell-format.ts +33 -7
  22. package/src/formats/table-cell-inner-format.ts +23 -1
  23. package/src/modules/table-menu/constants.ts +12 -1
  24. package/src/modules/table-selection.ts +6 -4
  25. package/src/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +1 -1
  26. package/src/style/index.less +6 -3
  27. package/src/svg/convert-cell.svg +7 -0
  28. package/src/utils/is.ts +1 -0
  29. package/src/utils/types.ts +1 -0
package/src/__tests__/unit/table-clipboard.test.ts CHANGED
@@ -29,7 +29,7 @@ describe('clipboard cell structure', () => {
29
29
  ${createTableHTML(3, 3, { width: 100, full: false }, undefined, { isEmpty: false })}
30
30
  <p><br></p>
31
31
  `,
32
- { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
32
+ { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
33
33
  );
34
34
  });
35
35
 
@@ -87,7 +87,7 @@ describe('clipboard cell structure', () => {
87
87
  </div>
88
88
  <p><br></p>
89
89
  `,
90
- { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
90
+ { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
91
91
  );
92
92
  });
93
93
 
@@ -177,7 +177,7 @@ describe('clipboard cell structure', () => {
177
177
  </div>
178
178
  <p><br></p>
179
179
  `,
180
- { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
180
+ { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
181
181
  );
182
182
  });
183
183
 
@@ -240,7 +240,7 @@ describe('clipboard cell structure', () => {
240
240
  </div>
241
241
  <p><br></p>
242
242
  `,
243
- { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
243
+ { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
244
244
  );
245
245
  });
246
246
 
@@ -294,7 +294,7 @@ describe('clipboard cell structure', () => {
294
294
  </div>
295
295
  <p><br></p>
296
296
  `,
297
- { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
297
+ { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
298
298
  );
299
299
  });
300
300
 
@@ -312,7 +312,7 @@ describe('clipboard cell structure', () => {
312
312
  ${createTableHTML(3, 3, { width: 100, full: false }, undefined, { isEmpty: false })}
313
313
  <p>123</p>
314
314
  `,
315
- { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
315
+ { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
316
316
  );
317
317
  });
318
318
 
@@ -373,7 +373,7 @@ describe('clipboard cell structure', () => {
373
373
  </div>
374
374
  <p><br></p>
375
375
  `,
376
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
376
+ { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
377
377
  );
378
378
  });
379
379
 
@@ -448,7 +448,7 @@ describe('clipboard cell structure', () => {
448
448
  </div>
449
449
  <p><br></p>
450
450
  `,
451
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
451
+ { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
452
452
  );
453
453
  });
454
454
 
@@ -524,7 +524,7 @@ describe('clipboard cell structure', () => {
524
524
  </div>
525
525
  <p><br></p>
526
526
  `,
527
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
527
+ { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
528
528
  );
529
529
  });
530
530
 
@@ -573,7 +573,7 @@ describe('clipboard cell structure', () => {
573
573
  </div>
574
574
  <p><br></p>
575
575
  `,
576
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
576
+ { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
577
577
  );
578
578
  });
579
579
 
@@ -587,58 +587,59 @@ describe('clipboard cell structure', () => {
587
587
  await vi.runAllTimersAsync();
588
588
 
589
589
  expect(quill.root).toEqualHTML(
590
- `<p><br></p>
591
- <div>
590
+ `
591
+ <p><br></p>
592
+ <div>
592
593
  <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 300px;">
593
594
  ${createTaleColHTML(3, { full: false, width: 100 })}
594
595
  <tbody>
595
596
  <tr>
596
- <td rowspan="1" colspan="1">
597
- <div>
597
+ <th rowspan="1" colspan="1">
598
+ <div data-tag="th">
598
599
  <p>q</p>
599
600
  </div>
600
- </td>
601
- <td rowspan="1" colspan="1">
602
- <div>
601
+ </th>
602
+ <th rowspan="1" colspan="1">
603
+ <div data-tag="th">
603
604
  <p>w</p>
604
605
  </div>
605
- </td>
606
- <td rowspan="1" colspan="1">
607
- <div>
606
+ </th>
607
+ <th rowspan="1" colspan="1">
608
+ <div data-tag="th">
608
609
  <p>e</p>
609
610
  </div>
610
- </td>
611
+ </th>
611
612
  </tr>
612
613
  <tr>
613
- <td rowspan="1" colspan="1">
614
- <div>
614
+ <th rowspan="1" colspan="1">
615
+ <div data-tag="th">
615
616
  <p><br></p>
616
617
  </div>
617
- </td>
618
+ </th>
618
619
  <td rowspan="1" colspan="1">
619
- <div>
620
+ <div data-tag="td">
620
621
  <p>2</p>
621
622
  </div>
622
623
  </td>
623
624
  <td rowspan="1" colspan="1">
624
- <div>
625
+ <div data-tag="td">
625
626
  <p>3</p>
626
627
  </div>
627
628
  </td>
628
629
  </tr>
629
630
  <tr>
630
- <td rowspan="1" colspan="1">
631
- <div>
631
+ <th rowspan="1" colspan="1">
632
+ <div data-tag="th">
632
633
  <p><br></p>
633
634
  </div>
634
- </td>
635
+ </th>
635
636
  <td rowspan="1" colspan="1">
636
- <div>
637
+ <div data-tag="td">
637
638
  <p>4</p>
638
639
  </div>
639
640
  </td>
640
641
  <td rowspan="1" colspan="1">
641
- <div>
642
+ <div data-tag="td">
642
643
  <p>5</p>
643
644
  </div>
644
645
  </td>
@@ -646,149 +647,8 @@ describe('clipboard cell structure', () => {
646
647
  </tbody>
647
648
  </table>
648
649
  </div>
649
- <p><br></p>`,
650
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
651
- );
652
- });
653
-
654
- it('clipboard convert th as td', async () => {
655
- const quill = createQuillWithTableModule(`<p><br></p>`);
656
- quill.setContents(
657
- quill.clipboard.convert({
658
- html: `<table class="ws-table-all" id="customers"><tbody><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr><tr><td>Laughing Bacchus Winecellars</td><td>Yoshi Tannamuri</td><td>Canada</td></tr><tr><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr></tbody></table>`,
659
- }),
660
- );
661
- await vi.runAllTimersAsync();
662
-
663
- expect(quill.root).toEqualHTML(
664
- `<p><br></p>
665
- <div>
666
- <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 300px;">
667
- ${createTaleColHTML(3, { full: false, width: 100 })}
668
- <tbody>
669
- <tr>
670
- <td colspan="1" rowspan="1">
671
- <div>
672
- <p>Company</p>
673
- </div>
674
- </td>
675
- <td colspan="1" rowspan="1">
676
- <div>
677
- <p>Contact</p>
678
- </div>
679
- </td>
680
- <td colspan="1" rowspan="1">
681
- <div>
682
- <p>Country</p>
683
- </div>
684
- </td>
685
- </tr>
686
- <tr>
687
- <td colspan="1" rowspan="1">
688
- <div>
689
- <p>Alfreds Futterkiste</p>
690
- </div>
691
- </td>
692
- <td colspan="1" rowspan="1">
693
- <div>
694
- <p>Maria Anders</p>
695
- </div>
696
- </td>
697
- <td colspan="1" rowspan="1">
698
- <div>
699
- <p>Germany</p>
700
- </div>
701
- </td>
702
- </tr>
703
- <tr>
704
- <td colspan="1" rowspan="1">
705
- <div>
706
- <p>Centro comercial Moctezuma</p>
707
- </div>
708
- </td>
709
- <td colspan="1" rowspan="1">
710
- <div>
711
- <p>Francisco Chang</p>
712
- </div>
713
- </td>
714
- <td colspan="1" rowspan="1">
715
- <div>
716
- <p>Mexico</p>
717
- </div>
718
- </td>
719
- </tr>
720
- <tr>
721
- <td colspan="1" rowspan="1">
722
- <div>
723
- <p>Ernst Handel</p>
724
- </div>
725
- </td>
726
- <td colspan="1" rowspan="1">
727
- <div>
728
- <p>Roland Mendel</p>
729
- </div>
730
- </td>
731
- <td colspan="1" rowspan="1">
732
- <div>
733
- <p>Austria</p>
734
- </div>
735
- </td>
736
- </tr>
737
- <tr>
738
- <td colspan="1" rowspan="1">
739
- <div>
740
- <p>Island Trading</p>
741
- </div>
742
- </td>
743
- <td colspan="1" rowspan="1">
744
- <div>
745
- <p>Helen Bennett</p>
746
- </div>
747
- </td>
748
- <td colspan="1" rowspan="1">
749
- <div>
750
- <p>UK</p>
751
- </div>
752
- </td>
753
- </tr>
754
- <tr>
755
- <td colspan="1" rowspan="1">
756
- <div>
757
- <p>Laughing Bacchus Winecellars</p>
758
- </div>
759
- </td>
760
- <td colspan="1" rowspan="1">
761
- <div>
762
- <p>Yoshi Tannamuri</p>
763
- </div>
764
- </td>
765
- <td colspan="1" rowspan="1">
766
- <div>
767
- <p>Canada</p>
768
- </div>
769
- </td>
770
- </tr>
771
- <tr>
772
- <td colspan="1" rowspan="1">
773
- <div>
774
- <p>Magazzini Alimentari Riuniti</p>
775
- </div>
776
- </td>
777
- <td colspan="1" rowspan="1">
778
- <div>
779
- <p>Giovanni Rovelli</p>
780
- </div>
781
- </td>
782
- <td colspan="1" rowspan="1">
783
- <div>
784
- <p>Italy</p>
785
- </div>
786
- </td>
787
- </tr>
788
- </tbody>
789
- </table>
790
- </div>
791
- <p><br></p>`,
650
+ <p><br></p>
651
+ `,
792
652
  { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
793
653
  );
794
654
  });
@@ -827,7 +687,7 @@ describe('clipboard cell structure', () => {
827
687
  </div>
828
688
  <p><br></p>
829
689
  `,
830
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
690
+ { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
831
691
  );
832
692
  expectDelta(
833
693
  new Delta([
@@ -878,7 +738,7 @@ describe('clipboard cell structure', () => {
878
738
  </div>
879
739
  <p><br></p>
880
740
  `,
881
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
741
+ { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
882
742
  );
883
743
  });
884
744
 
@@ -903,7 +763,7 @@ describe('clipboard cell structure', () => {
903
763
  </div>
904
764
  <p><br></p>
905
765
  `,
906
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
766
+ { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
907
767
  );
908
768
  expectDelta(
909
769
  new Delta([
@@ -994,7 +854,7 @@ describe('clipboard cell structure', () => {
994
854
  </div>
995
855
  <p><br></p>
996
856
  `,
997
- { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'data-style', 'style', 'contenteditable'] },
857
+ { ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'data-style', 'style', 'contenteditable'] },
998
858
  );
999
859
  expectDelta(
1000
860
  new Delta([
@@ -1086,7 +946,7 @@ describe('clipboard cell structure', () => {
1086
946
  <p><br></p>
1087
947
  `,
1088
948
  {
1089
- ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'data-style', 'style', 'contenteditable'],
949
+ ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'data-style', 'style', 'contenteditable'],
1090
950
  replaceAttrs: {
1091
951
  'data-empty-row': function (value: string) {
1092
952
  try {
@@ -1120,6 +980,102 @@ describe('clipboard cell structure', () => {
1120
980
  quill.getContents(),
1121
981
  );
1122
982
  });
983
+
984
+ it('clipboard convert th correctly', async () => {
985
+ const quill = createQuillWithTableModule(`<p><br></p>`);
986
+ quill.setContents(
987
+ quill.clipboard.convert({
988
+ html: `
989
+ <table class="ws-table-all" id="customers">
990
+ <tbody>
991
+ <tr>
992
+ <th>Company</th>
993
+ <th>Contact</th>
994
+ <th>Country</th>
995
+ </tr>
996
+ <tr>
997
+ <td>Alfreds Futterkiste</td>
998
+ <td>Maria Anders</td>
999
+ <td>Germany</td>
1000
+ </tr>
1001
+ <tr>
1002
+ <td>Centro comercial Moctezuma</td>
1003
+ <td>Francisco Chang</td>
1004
+ <td>Mexico</td>
1005
+ </tr>
1006
+ </tbody>
1007
+ </table>
1008
+ `,
1009
+ }),
1010
+ );
1011
+ await vi.runAllTimersAsync();
1012
+
1013
+ expect(quill.root).toEqualHTML(
1014
+ `
1015
+ <p><br></p>
1016
+ <div>
1017
+ <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 300px;">
1018
+ ${createTaleColHTML(3, { full: false, width: 100 })}
1019
+ <tbody>
1020
+ <tr>
1021
+ <th colspan="1" rowspan="1">
1022
+ <div data-tag="th">
1023
+ <p>Company</p>
1024
+ </div>
1025
+ </th>
1026
+ <th colspan="1" rowspan="1">
1027
+ <div data-tag="th">
1028
+ <p>Contact</p>
1029
+ </div>
1030
+ </th>
1031
+ <th colspan="1" rowspan="1">
1032
+ <div data-tag="th">
1033
+ <p>Country</p>
1034
+ </div>
1035
+ </th>
1036
+ </tr>
1037
+ <tr>
1038
+ <td colspan="1" rowspan="1">
1039
+ <div data-tag="td">
1040
+ <p>Alfreds Futterkiste</p>
1041
+ </div>
1042
+ </td>
1043
+ <td colspan="1" rowspan="1">
1044
+ <div data-tag="td">
1045
+ <p>Maria Anders</p>
1046
+ </div>
1047
+ </td>
1048
+ <td colspan="1" rowspan="1">
1049
+ <div data-tag="td">
1050
+ <p>Germany</p>
1051
+ </div>
1052
+ </td>
1053
+ </tr>
1054
+ <tr>
1055
+ <td colspan="1" rowspan="1">
1056
+ <div data-tag="td">
1057
+ <p>Centro comercial Moctezuma</p>
1058
+ </div>
1059
+ </td>
1060
+ <td colspan="1" rowspan="1">
1061
+ <div data-tag="td">
1062
+ <p>Francisco Chang</p>
1063
+ </div>
1064
+ </td>
1065
+ <td colspan="1" rowspan="1">
1066
+ <div data-tag="td">
1067
+ <p>Mexico</p>
1068
+ </div>
1069
+ </td>
1070
+ </tr>
1071
+ </tbody>
1072
+ </table>
1073
+ </div>
1074
+ <p><br></p>
1075
+ `,
1076
+ { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
1077
+ );
1078
+ });
1123
1079
  });
1124
1080
 
1125
1081
  describe('clipboard content format', () => {
@@ -1373,7 +1329,7 @@ describe('clipboard content format', () => {
1373
1329
  </div>
1374
1330
  <p><br></p>
1375
1331
  `,
1376
- { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
1332
+ { ignoreAttrs: ['data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
1377
1333
  );
1378
1334
  });
1379
1335
 
@@ -1452,7 +1408,7 @@ describe('clipboard content format', () => {
1452
1408
  <p><br></p>
1453
1409
  `,
1454
1410
  {
1455
- ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'],
1411
+ ignoreAttrs: ['data-tag', 'class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'],
1456
1412
  },
1457
1413
  );
1458
1414
  });
@@ -1549,7 +1505,7 @@ describe('clipboard content format', () => {
1549
1505
  </div>
1550
1506
  <p><br></p>
1551
1507
  `,
1552
- { ignoreAttrs: ['class', 'colspan', 'rowspan', 'data-colspan', 'data-rowspan', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
1508
+ { ignoreAttrs: ['data-tag', 'class', 'colspan', 'rowspan', 'data-colspan', 'data-rowspan', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
1553
1509
  );
1554
1510
  expectDelta(
1555
1511
  new Delta([