@atlaskit/editor-plugin-table 1.0.2 → 1.1.0

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 (37) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/plugins/table/toolbar.js +24 -0
  3. package/dist/cjs/plugins/table/ui/FloatingContextualButton/index.js +3 -1
  4. package/dist/cjs/plugins/table/ui/FloatingInsertButton/index.js +3 -1
  5. package/dist/cjs/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +2 -1
  6. package/dist/cjs/plugins/table/utils/decoration.js +31 -1
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/es2019/plugins/table/toolbar.js +25 -1
  9. package/dist/es2019/plugins/table/ui/FloatingContextualButton/index.js +3 -1
  10. package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js +3 -1
  11. package/dist/es2019/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +2 -1
  12. package/dist/es2019/plugins/table/utils/decoration.js +32 -2
  13. package/dist/es2019/version.json +1 -1
  14. package/dist/esm/plugins/table/toolbar.js +25 -1
  15. package/dist/esm/plugins/table/ui/FloatingContextualButton/index.js +3 -1
  16. package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js +3 -1
  17. package/dist/esm/plugins/table/ui/TableFloatingControls/NumberColumn/index.js +2 -1
  18. package/dist/esm/plugins/table/utils/decoration.js +32 -2
  19. package/dist/esm/version.json +1 -1
  20. package/package.json +4 -4
  21. package/report.api.md +15 -0
  22. package/src/__tests__/integration/__fixtures__/basic-table-with-merged-cell.ts +112 -0
  23. package/src/__tests__/integration/__fixtures__/paragraph-and-table-adf.ts +132 -0
  24. package/src/__tests__/integration/__snapshots__/floating-toolbar.ts.snap +292 -0
  25. package/src/__tests__/integration/arrow-down-into-table.ts +24 -15
  26. package/src/__tests__/integration/deleting-empty-paragraph-under-table.ts +3 -3
  27. package/src/__tests__/integration/floating-toolbar.ts +164 -8
  28. package/src/__tests__/integration/meta-arrowup-cursor-in-first-row.ts +1 -1
  29. package/src/__tests__/unit/copy-paste.ts +1 -1
  30. package/src/__tests__/unit/toolbar.ts +86 -2
  31. package/src/__tests__/unit/ui/FloatingInsertButton.tsx +7 -1
  32. package/src/plugins/table/toolbar.tsx +23 -0
  33. package/src/plugins/table/ui/FloatingContextualButton/index.tsx +2 -0
  34. package/src/plugins/table/ui/FloatingInsertButton/index.tsx +2 -0
  35. package/src/plugins/table/ui/TableFloatingControls/NumberColumn/index.tsx +1 -0
  36. package/src/plugins/table/utils/decoration.ts +27 -2
  37. package/src/__tests__/integration/__fixtures__/paragraph-and-table-adf.json +0 -130
package/src/__tests__/integration/__fixtures__/paragraph-and-table-adf.ts ADDED
@@ -0,0 +1,132 @@
1
+ export const documentWithParagraphAndTable = (
2
+ isNumberColumnEnabled: boolean,
3
+ ) => ({
4
+ version: 1,
5
+ type: 'doc',
6
+ content: [
7
+ {
8
+ type: 'paragraph',
9
+ content: [
10
+ {
11
+ type: 'text',
12
+ text: 'text',
13
+ },
14
+ ],
15
+ },
16
+ {
17
+ type: 'table',
18
+ attrs: {
19
+ isNumberColumnEnabled,
20
+ layout: 'default',
21
+ localId: 'e1365400-6226-4bb9-b3f1-b80fd3ae640a',
22
+ },
23
+ content: [
24
+ {
25
+ type: 'tableRow',
26
+ content: [
27
+ {
28
+ type: 'tableHeader',
29
+ attrs: {},
30
+ content: [
31
+ {
32
+ type: 'paragraph',
33
+ content: [],
34
+ },
35
+ ],
36
+ },
37
+ {
38
+ type: 'tableHeader',
39
+ attrs: {},
40
+ content: [
41
+ {
42
+ type: 'paragraph',
43
+ content: [],
44
+ },
45
+ ],
46
+ },
47
+ {
48
+ type: 'tableHeader',
49
+ attrs: {},
50
+ content: [
51
+ {
52
+ type: 'paragraph',
53
+ content: [],
54
+ },
55
+ ],
56
+ },
57
+ ],
58
+ },
59
+ {
60
+ type: 'tableRow',
61
+ content: [
62
+ {
63
+ type: 'tableCell',
64
+ attrs: {},
65
+ content: [
66
+ {
67
+ type: 'paragraph',
68
+ content: [],
69
+ },
70
+ ],
71
+ },
72
+ {
73
+ type: 'tableCell',
74
+ attrs: {},
75
+ content: [
76
+ {
77
+ type: 'paragraph',
78
+ content: [],
79
+ },
80
+ ],
81
+ },
82
+ {
83
+ type: 'tableCell',
84
+ attrs: {},
85
+ content: [
86
+ {
87
+ type: 'paragraph',
88
+ content: [],
89
+ },
90
+ ],
91
+ },
92
+ ],
93
+ },
94
+ {
95
+ type: 'tableRow',
96
+ content: [
97
+ {
98
+ type: 'tableCell',
99
+ attrs: {},
100
+ content: [
101
+ {
102
+ type: 'paragraph',
103
+ content: [],
104
+ },
105
+ ],
106
+ },
107
+ {
108
+ type: 'tableCell',
109
+ attrs: {},
110
+ content: [
111
+ {
112
+ type: 'paragraph',
113
+ content: [],
114
+ },
115
+ ],
116
+ },
117
+ {
118
+ type: 'tableCell',
119
+ attrs: {},
120
+ content: [
121
+ {
122
+ type: 'paragraph',
123
+ content: [],
124
+ },
125
+ ],
126
+ },
127
+ ],
128
+ },
129
+ ],
130
+ },
131
+ ],
132
+ });
package/src/__tests__/integration/__snapshots__/floating-toolbar.ts.snap CHANGED
@@ -319,3 +319,295 @@ Object {
319
319
  "type": "doc",
320
320
  }
321
321
  `;
322
+
323
+ exports[`should show yellow highlight on the megred rows when hover disabled sort column ASC menu option 1`] = `
324
+ Object {
325
+ "content": Array [
326
+ Object {
327
+ "attrs": Object {
328
+ "__autoSize": false,
329
+ "isNumberColumnEnabled": false,
330
+ "layout": "default",
331
+ "localId": "abc-123",
332
+ },
333
+ "content": Array [
334
+ Object {
335
+ "content": Array [
336
+ Object {
337
+ "attrs": Object {
338
+ "background": null,
339
+ "colspan": 1,
340
+ "colwidth": null,
341
+ "rowspan": 1,
342
+ },
343
+ "content": Array [
344
+ Object {
345
+ "type": "paragraph",
346
+ },
347
+ ],
348
+ "type": "tableHeader",
349
+ },
350
+ Object {
351
+ "attrs": Object {
352
+ "background": null,
353
+ "colspan": 1,
354
+ "colwidth": null,
355
+ "rowspan": 1,
356
+ },
357
+ "content": Array [
358
+ Object {
359
+ "type": "paragraph",
360
+ },
361
+ ],
362
+ "type": "tableHeader",
363
+ },
364
+ Object {
365
+ "attrs": Object {
366
+ "background": null,
367
+ "colspan": 1,
368
+ "colwidth": null,
369
+ "rowspan": 1,
370
+ },
371
+ "content": Array [
372
+ Object {
373
+ "type": "paragraph",
374
+ },
375
+ ],
376
+ "type": "tableHeader",
377
+ },
378
+ ],
379
+ "type": "tableRow",
380
+ },
381
+ Object {
382
+ "content": Array [
383
+ Object {
384
+ "attrs": Object {
385
+ "background": null,
386
+ "colspan": 1,
387
+ "colwidth": null,
388
+ "rowspan": 1,
389
+ },
390
+ "content": Array [
391
+ Object {
392
+ "type": "paragraph",
393
+ },
394
+ ],
395
+ "type": "tableCell",
396
+ },
397
+ Object {
398
+ "attrs": Object {
399
+ "background": null,
400
+ "colspan": 1,
401
+ "colwidth": null,
402
+ "rowspan": 1,
403
+ },
404
+ "content": Array [
405
+ Object {
406
+ "type": "paragraph",
407
+ },
408
+ ],
409
+ "type": "tableCell",
410
+ },
411
+ Object {
412
+ "attrs": Object {
413
+ "background": null,
414
+ "colspan": 1,
415
+ "colwidth": null,
416
+ "rowspan": 1,
417
+ },
418
+ "content": Array [
419
+ Object {
420
+ "type": "paragraph",
421
+ },
422
+ ],
423
+ "type": "tableCell",
424
+ },
425
+ ],
426
+ "type": "tableRow",
427
+ },
428
+ Object {
429
+ "content": Array [
430
+ Object {
431
+ "attrs": Object {
432
+ "background": null,
433
+ "colspan": 1,
434
+ "colwidth": null,
435
+ "rowspan": 1,
436
+ },
437
+ "content": Array [
438
+ Object {
439
+ "type": "paragraph",
440
+ },
441
+ ],
442
+ "type": "tableCell",
443
+ },
444
+ Object {
445
+ "attrs": Object {
446
+ "background": null,
447
+ "colspan": 2,
448
+ "colwidth": null,
449
+ "rowspan": 1,
450
+ },
451
+ "content": Array [
452
+ Object {
453
+ "type": "paragraph",
454
+ },
455
+ ],
456
+ "type": "tableCell",
457
+ },
458
+ ],
459
+ "type": "tableRow",
460
+ },
461
+ ],
462
+ "type": "table",
463
+ },
464
+ ],
465
+ "type": "doc",
466
+ }
467
+ `;
468
+
469
+ exports[`should show yellow highlight on the megred rows when hover disabled sort column DESC menu option 1`] = `
470
+ Object {
471
+ "content": Array [
472
+ Object {
473
+ "attrs": Object {
474
+ "__autoSize": false,
475
+ "isNumberColumnEnabled": false,
476
+ "layout": "default",
477
+ "localId": "abc-123",
478
+ },
479
+ "content": Array [
480
+ Object {
481
+ "content": Array [
482
+ Object {
483
+ "attrs": Object {
484
+ "background": null,
485
+ "colspan": 1,
486
+ "colwidth": null,
487
+ "rowspan": 1,
488
+ },
489
+ "content": Array [
490
+ Object {
491
+ "type": "paragraph",
492
+ },
493
+ ],
494
+ "type": "tableHeader",
495
+ },
496
+ Object {
497
+ "attrs": Object {
498
+ "background": null,
499
+ "colspan": 1,
500
+ "colwidth": null,
501
+ "rowspan": 1,
502
+ },
503
+ "content": Array [
504
+ Object {
505
+ "type": "paragraph",
506
+ },
507
+ ],
508
+ "type": "tableHeader",
509
+ },
510
+ Object {
511
+ "attrs": Object {
512
+ "background": null,
513
+ "colspan": 1,
514
+ "colwidth": null,
515
+ "rowspan": 1,
516
+ },
517
+ "content": Array [
518
+ Object {
519
+ "type": "paragraph",
520
+ },
521
+ ],
522
+ "type": "tableHeader",
523
+ },
524
+ ],
525
+ "type": "tableRow",
526
+ },
527
+ Object {
528
+ "content": Array [
529
+ Object {
530
+ "attrs": Object {
531
+ "background": null,
532
+ "colspan": 1,
533
+ "colwidth": null,
534
+ "rowspan": 1,
535
+ },
536
+ "content": Array [
537
+ Object {
538
+ "type": "paragraph",
539
+ },
540
+ ],
541
+ "type": "tableCell",
542
+ },
543
+ Object {
544
+ "attrs": Object {
545
+ "background": null,
546
+ "colspan": 1,
547
+ "colwidth": null,
548
+ "rowspan": 1,
549
+ },
550
+ "content": Array [
551
+ Object {
552
+ "type": "paragraph",
553
+ },
554
+ ],
555
+ "type": "tableCell",
556
+ },
557
+ Object {
558
+ "attrs": Object {
559
+ "background": null,
560
+ "colspan": 1,
561
+ "colwidth": null,
562
+ "rowspan": 1,
563
+ },
564
+ "content": Array [
565
+ Object {
566
+ "type": "paragraph",
567
+ },
568
+ ],
569
+ "type": "tableCell",
570
+ },
571
+ ],
572
+ "type": "tableRow",
573
+ },
574
+ Object {
575
+ "content": Array [
576
+ Object {
577
+ "attrs": Object {
578
+ "background": null,
579
+ "colspan": 1,
580
+ "colwidth": null,
581
+ "rowspan": 1,
582
+ },
583
+ "content": Array [
584
+ Object {
585
+ "type": "paragraph",
586
+ },
587
+ ],
588
+ "type": "tableCell",
589
+ },
590
+ Object {
591
+ "attrs": Object {
592
+ "background": null,
593
+ "colspan": 2,
594
+ "colwidth": null,
595
+ "rowspan": 1,
596
+ },
597
+ "content": Array [
598
+ Object {
599
+ "type": "paragraph",
600
+ },
601
+ ],
602
+ "type": "tableCell",
603
+ },
604
+ ],
605
+ "type": "tableRow",
606
+ },
607
+ ],
608
+ "type": "table",
609
+ },
610
+ ],
611
+ "type": "doc",
612
+ }
613
+ `;
package/src/__tests__/integration/arrow-down-into-table.ts CHANGED
@@ -8,19 +8,10 @@ import {
8
8
  goToEditorTestingWDExample,
9
9
  mountEditor,
10
10
  } from '@atlaskit/editor-test-helpers/testing-example-page';
11
- import tableAdf from './__fixtures__/paragraph-and-table-adf.json';
11
+ import { documentWithParagraphAndTable } from './__fixtures__/paragraph-and-table-adf';
12
12
 
13
- // This keyboard navigation is actually browser functionality
14
- // But there was a div on our end that caused a bug where the
15
- // cursor would go behind the table when pressing arrow down
16
- // https://product-fabric.atlassian.net/browse/ED-14046
17
- //
18
- // Skipping in firefox as there is a known bug
19
- // Needs to be fixed in https://product-fabric.atlassian.net/servicedesk/customer/portal/99/DTR-155?created=true
20
- BrowserTestCase(
21
- 'arrow-down-into-table.ts: pressing arrow down above table should move cursor into first row',
22
- { skip: ['firefox'] },
23
- async (client: any) => {
13
+ const testArrowDown =
14
+ (isNumberedColumnEnabled: boolean) => async (client: any) => {
24
15
  const page = await goToEditorTestingWDExample(
25
16
  client,
26
17
  'editor-plugin-table',
@@ -28,11 +19,29 @@ BrowserTestCase(
28
19
  await mountEditor(page, {
29
20
  appearance: fullpage.appearance,
30
21
  allowTables: {},
31
- defaultValue: tableAdf,
22
+ defaultValue: documentWithParagraphAndTable(isNumberedColumnEnabled),
32
23
  });
33
24
 
34
25
  await setProseMirrorTextSelection(page, { anchor: 5 });
35
26
  await page.keys('ArrowDown');
36
- await expectToMatchSelection(page, { type: 'text', to: 10, from: 10 });
37
- },
27
+ await expectToMatchSelection(page, { type: 'text', anchor: 10, head: 10 });
28
+ };
29
+
30
+ // This keyboard navigation is actually browser functionality
31
+ // But there was a div on our end that caused a bug where the
32
+ // cursor would go behind the table when pressing arrow down
33
+ // https://product-fabric.atlassian.net/browse/ED-14046
34
+ //
35
+ // Skipping in firefox as there is a known bug
36
+ // Needs to be fixed in https://product-fabric.atlassian.net/servicedesk/customer/portal/99/DTR-155?created=true
37
+ BrowserTestCase(
38
+ 'arrow-down-into-table.ts: pressing arrow down above table should move cursor into first row',
39
+ { skip: ['firefox'] },
40
+ testArrowDown(false),
41
+ );
42
+
43
+ BrowserTestCase(
44
+ 'arrow-down-into-table.ts: pressing arrow down above table should move cursor into first row for a numbered table',
45
+ { skip: ['firefox'] },
46
+ testArrowDown(true),
38
47
  );
package/src/__tests__/integration/deleting-empty-paragraph-under-table.ts CHANGED
@@ -33,7 +33,7 @@ BrowserTestCase(
33
33
 
34
34
  await setProseMirrorTextSelection(page, { anchor: 45 });
35
35
  await page.keys('Backspace');
36
- await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
36
+ await expectToMatchSelection(page, { type: 'text', anchor: 40, head: 40 });
37
37
  const doc = await page.$eval(editable, getDocFromElement);
38
38
  expect(doc).toMatchCustomDocSnapshot(testName);
39
39
  },
@@ -56,7 +56,7 @@ BrowserTestCase(
56
56
 
57
57
  await setProseMirrorTextSelection(page, { anchor: 45 });
58
58
  await page.keys('Backspace');
59
- await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
59
+ await expectToMatchSelection(page, { type: 'text', anchor: 40, head: 40 });
60
60
  const doc = await page.$eval(editable, getDocFromElement);
61
61
  expect(doc).toMatchCustomDocSnapshot(testName);
62
62
  },
@@ -79,7 +79,7 @@ BrowserTestCase(
79
79
 
80
80
  await setProseMirrorTextSelection(page, { anchor: 45 });
81
81
  await page.keys('Backspace');
82
- await expectToMatchSelection(page, { type: 'text', to: 40, from: 40 });
82
+ await expectToMatchSelection(page, { type: 'text', anchor: 40, head: 40 });
83
83
  const doc = await page.$eval(editable, getDocFromElement);
84
84
  expect(doc).toMatchCustomDocSnapshot(testName);
85
85
  },