quill-table-up 3.1.2 → 3.2.1

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 (111) hide show
  1. package/README.md +15 -8
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +168 -146
  4. package/dist/index.js +47 -47
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.umd.js +52 -52
  7. package/dist/index.umd.js.map +1 -1
  8. package/package.json +22 -24
  9. package/src/__tests__/e2e/custom-creator.test.ts +44 -44
  10. package/src/__tests__/e2e/editor-page.ts +77 -77
  11. package/src/__tests__/e2e/table-align.test.ts +104 -104
  12. package/src/__tests__/e2e/table-blots.test.ts +169 -169
  13. package/src/__tests__/e2e/table-caption.test.ts +134 -134
  14. package/src/__tests__/e2e/table-clipboard.test.ts +20 -20
  15. package/src/__tests__/e2e/table-hack.test.ts +151 -151
  16. package/src/__tests__/e2e/table-keyboard-handler.test.ts +20 -4
  17. package/src/__tests__/e2e/table-menu.test.ts +172 -172
  18. package/src/__tests__/e2e/table-resize.test.ts +654 -9
  19. package/src/__tests__/e2e/table-scrollbar.test.ts +144 -144
  20. package/src/__tests__/e2e/table-selection.test.ts +563 -563
  21. package/src/__tests__/e2e/types.d.ts +8 -7
  22. package/src/__tests__/e2e/utils.ts +52 -52
  23. package/src/__tests__/unit/table-blots.test.ts +720 -720
  24. package/src/__tests__/unit/table-caption.test.ts +234 -234
  25. package/src/__tests__/unit/table-cell-merge.test.ts +713 -724
  26. package/src/__tests__/unit/table-clipboard.test.ts +2176 -2176
  27. package/src/__tests__/unit/table-hack.test.ts +1014 -1014
  28. package/src/__tests__/unit/table-insert.test.ts +915 -926
  29. package/src/__tests__/unit/table-redo-undo.test.ts +2429 -2429
  30. package/src/__tests__/unit/table-remove.test.ts +313 -343
  31. package/src/__tests__/unit/utils.test-d.ts +49 -49
  32. package/src/__tests__/unit/utils.test.ts +711 -711
  33. package/src/__tests__/unit/utils.ts +307 -307
  34. package/src/__tests__/unit/vitest.d.ts +14 -14
  35. package/src/formats/container-format.ts +107 -107
  36. package/src/formats/overrides/block-embed.ts +72 -72
  37. package/src/formats/overrides/block.ts +95 -95
  38. package/src/formats/overrides/index.ts +3 -3
  39. package/src/formats/overrides/scroll.ts +70 -70
  40. package/src/formats/table-body-format.ts +52 -52
  41. package/src/formats/table-caption-format.ts +116 -116
  42. package/src/formats/table-cell-format.ts +304 -304
  43. package/src/formats/table-cell-inner-format.ts +403 -398
  44. package/src/formats/table-colgroup-format.ts +136 -136
  45. package/src/formats/table-foot-format.ts +7 -7
  46. package/src/formats/table-head-format.ts +7 -7
  47. package/src/formats/table-main-format.ts +1 -1
  48. package/src/formats/table-row-format.ts +218 -210
  49. package/src/formats/utils.ts +6 -6
  50. package/src/index.ts +19 -19
  51. package/src/modules/index.ts +7 -7
  52. package/src/modules/table-align.ts +131 -131
  53. package/src/modules/table-clipboard/table-clipboard.ts +6 -8
  54. package/src/modules/table-dom-selector.ts +33 -33
  55. package/src/modules/table-menu/constants.ts +223 -223
  56. package/src/modules/table-menu/index.ts +4 -4
  57. package/src/modules/table-menu/table-menu-common.ts +330 -329
  58. package/src/modules/table-menu/table-menu-contextmenu.ts +111 -118
  59. package/src/modules/table-menu/table-menu-select.ts +96 -94
  60. package/src/modules/table-resize/index.ts +5 -5
  61. package/src/modules/table-resize/table-resize-box.ts +714 -363
  62. package/src/modules/table-resize/table-resize-common.ts +246 -382
  63. package/src/modules/table-resize/table-resize-drag.ts +241 -0
  64. package/src/modules/table-resize/table-resize-line.ts +244 -182
  65. package/src/modules/table-resize/table-resize-scale.ts +174 -173
  66. package/src/modules/table-resize/utils.ts +84 -3
  67. package/src/modules/table-scrollbar.ts +292 -292
  68. package/src/modules/table-selection.ts +613 -669
  69. package/src/style/button.less +45 -45
  70. package/src/style/color-picker.less +136 -136
  71. package/src/style/dialog.less +53 -53
  72. package/src/style/functions.less +9 -9
  73. package/src/style/index.less +120 -120
  74. package/src/style/input.less +64 -64
  75. package/src/style/select-box.less +52 -52
  76. package/src/style/table-creator.less +56 -56
  77. package/src/style/table-menu.less +125 -125
  78. package/src/style/table-resize-scale.less +31 -31
  79. package/src/style/table-resize.less +249 -202
  80. package/src/style/table-scrollbar.less +49 -49
  81. package/src/style/table-selection.less +23 -23
  82. package/src/style/tooltip.less +19 -19
  83. package/src/style/variables.less +1 -1
  84. package/src/svg/arrow-up-down.svg +11 -11
  85. package/src/svg/convert-cell.svg +7 -7
  86. package/src/table-up.ts +1363 -1360
  87. package/src/types.d.ts +4 -4
  88. package/src/utils/bem.ts +23 -23
  89. package/src/utils/blot-helper.ts +101 -105
  90. package/src/utils/color.ts +109 -109
  91. package/src/utils/components/button.ts +22 -22
  92. package/src/utils/components/color-picker.ts +236 -236
  93. package/src/utils/components/dialog.ts +83 -41
  94. package/src/utils/components/index.ts +6 -6
  95. package/src/utils/components/input.ts +74 -74
  96. package/src/utils/components/table/creator.ts +89 -89
  97. package/src/utils/components/table/index.ts +2 -2
  98. package/src/utils/components/table/select-box.ts +78 -78
  99. package/src/utils/components/tooltip.ts +179 -189
  100. package/src/utils/constants.ts +125 -124
  101. package/src/utils/drag-helper.ts +112 -0
  102. package/src/utils/index.ts +15 -14
  103. package/src/utils/is.ts +9 -9
  104. package/src/utils/position.ts +60 -60
  105. package/src/utils/resize-observer-helper.ts +47 -47
  106. package/src/utils/scroll.ts +145 -47
  107. package/src/utils/style-helper.ts +47 -47
  108. package/src/utils/transformer.ts +10 -10
  109. package/src/utils/transition-event-helper.ts +8 -8
  110. package/src/utils/types.ts +156 -157
  111. package/src/utils/utils.ts +12 -12
package/src/__tests__/unit/table-hack.test.ts CHANGED
@@ -1,1014 +1,1014 @@
1
- import Quill from 'quill';
2
- import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
3
- import { TableCellInnerFormat } from '../../formats';
4
- import { TableSelection } from '../../modules';
5
- import { TableUp } from '../../table-up';
6
- import { createQuillWithTableModule, createTable, createTableCaptionHTML, createTableDeltaOps, createTaleColHTML, expectDelta } from './utils';
7
-
8
- const Delta = Quill.import('delta');
9
- if (!Range.prototype.getBoundingClientRect) {
10
- Range.prototype.getBoundingClientRect = function () {
11
- return {
12
- x: 0,
13
- y: 0,
14
- width: 0,
15
- height: 0,
16
- top: 0,
17
- right: 0,
18
- bottom: 0,
19
- left: 0,
20
- toJSON: () => {},
21
- };
22
- };
23
- }
24
-
25
- beforeEach(() => {
26
- vi.useFakeTimers();
27
- });
28
- afterEach(() => {
29
- vi.useRealTimers();
30
- });
31
-
32
- describe('hack html convert', () => {
33
- it('getSemanticHTML should not get contenteditable table cell or caption', async () => {
34
- const quill = createQuillWithTableModule(`<p><br></p>`);
35
- quill.setContents([
36
- { insert: '\nTable Caption' },
37
- { attributes: { 'table-up-caption': { tableId: '1', side: 'bottom' } }, insert: '\n' },
38
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100, align: 'right' } } },
39
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100, align: 'right' } } },
40
- { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100, align: 'right' } } },
41
- { insert: '1' },
42
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
43
- { insert: '2' },
44
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
45
- { insert: '3' },
46
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
47
- { insert: '4' },
48
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
49
- { insert: '5' },
50
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
51
- { insert: '6' },
52
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
53
- { insert: '7' },
54
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
55
- { insert: '8' },
56
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
57
- { insert: '9' },
58
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
59
- { insert: '\n' },
60
- ]);
61
- await vi.runAllTimersAsync();
62
- const html1 = quill.getSemanticHTML();
63
- const parser1 = new DOMParser();
64
- const doc1 = parser1.parseFromString(html1, 'text/html');
65
- expect(doc1.body).toEqualHTML(
66
- `
67
- <p></p>
68
- <div contenteditable="false">
69
- <table cellpadding="0" cellspacing="0" style="width: 300px; margin-left: auto;" data-align="right">
70
- ${createTableCaptionHTML({ text: 'Table&nbsp;Caption', side: 'bottom' }, { editable: null })}
71
- ${createTaleColHTML(3, { full: false, width: 100, align: 'right' })}
72
- <tbody>
73
- <tr data-row-id="1">
74
- <th colspan="1" data-col-id="1" data-row-id="1" rowspan="1">
75
- <div data-col-id="1" data-colspan="1" data-row-id="1" data-rowspan="1">
76
- <p>1</p>
77
- </div>
78
- </th>
79
- <th colspan="1" data-col-id="2" data-row-id="1" rowspan="1">
80
- <div data-col-id="2" data-colspan="1" data-row-id="1" data-rowspan="1">
81
- <p>2</p>
82
- </div>
83
- </th>
84
- <th colspan="1" data-col-id="3" data-row-id="1" rowspan="1">
85
- <div data-col-id="3" data-colspan="1" data-row-id="1" data-rowspan="1">
86
- <p>3</p>
87
- </div>
88
- </th>
89
- </tr>
90
- <tr data-row-id="2">
91
- <td colspan="1" data-col-id="1" data-row-id="2" rowspan="1">
92
- <div data-col-id="1" data-colspan="1" data-row-id="2" data-rowspan="1">
93
- <p>4</p>
94
- </div>
95
- </td>
96
- <td colspan="1" data-col-id="2" data-row-id="2" rowspan="1">
97
- <div data-col-id="2" data-colspan="1" data-row-id="2" data-rowspan="1">
98
- <p>5</p>
99
- </div>
100
- </td>
101
- <td colspan="1" data-col-id="3" data-row-id="2" rowspan="1">
102
- <div data-col-id="3" data-colspan="1" data-row-id="2" data-rowspan="1">
103
- <p>6</p>
104
- </div>
105
- </td>
106
- </tr>
107
- <tr data-row-id="3">
108
- <td colspan="1" data-col-id="1" data-row-id="3" rowspan="1">
109
- <div data-col-id="1" data-colspan="1" data-row-id="3" data-rowspan="1">
110
- <p>7</p>
111
- </div>
112
- </td>
113
- <td colspan="1" data-col-id="2" data-row-id="3" rowspan="1">
114
- <div data-col-id="2" data-colspan="1" data-row-id="3" data-rowspan="1">
115
- <p>8</p>
116
- </div>
117
- </td>
118
- <td colspan="1" data-col-id="3" data-row-id="3" rowspan="1">
119
- <div data-col-id="3" data-colspan="1" data-row-id="3" data-rowspan="1">
120
- <p>9</p>
121
- </div>
122
- </td>
123
- </tr>
124
- </tbody>
125
- </table>
126
- </div>
127
- <p></p>
128
- `,
129
- { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'data-table-id'] },
130
- );
131
- });
132
-
133
- it('getHTMLByCell should not get contenteditable table cell or caption', async () => {
134
- const quill = createQuillWithTableModule(`<p><br></p>`);
135
- quill.setContents([
136
- { insert: '\nTable Caption' },
137
- { attributes: { 'table-up-caption': { tableId: '1', side: 'bottom' } }, insert: '\n' },
138
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100, align: 'right' } } },
139
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100, align: 'right' } } },
140
- { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100, align: 'right' } } },
141
- { insert: '1' },
142
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
143
- { insert: '2' },
144
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
145
- { insert: '3' },
146
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
147
- { insert: '4' },
148
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
149
- { insert: '5' },
150
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
151
- { insert: '6' },
152
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
153
- { insert: '7' },
154
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
155
- { insert: '8' },
156
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
157
- { insert: '9' },
158
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
159
- { insert: '\n' },
160
- ]);
161
- const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
162
- const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
163
- const html = tableModule.getHTMLByCell([tds[0], tds[1], tds[3], tds[4]]);
164
- const parser = new DOMParser();
165
- const doc = parser.parseFromString(html, 'text/html');
166
- expect(doc.body).toEqualHTML(
167
- `
168
- <div contenteditable="false">
169
- <table cellpadding="0" cellspacing="0" style="width: 200px; margin-left: auto;" data-align="right">
170
- <caption style="caption-side: bottom;">Table&nbsp;Caption</caption>
171
- <colgroup contenteditable="false" data-align="right">
172
- <col width="100px" data-col-id="1" data-align="right" />
173
- <col width="100px" data-col-id="2" data-align="right" />
174
- </colgroup>
175
- <tbody>
176
- <tr data-row-id="1">
177
- <th colspan="1" data-col-id="1" data-row-id="1" rowspan="1">
178
- <div data-col-id="1" data-colspan="1" data-row-id="1" data-rowspan="1">
179
- <p>1</p>
180
- </div>
181
- </th>
182
- <th colspan="1" data-col-id="2" data-row-id="1" rowspan="1">
183
- <div data-col-id="2" data-colspan="1" data-row-id="1" data-rowspan="1">
184
- <p>2</p>
185
- </div>
186
- </th>
187
- </tr>
188
- <tr data-row-id="2">
189
- <td colspan="1" data-col-id="1" data-row-id="2" rowspan="1">
190
- <div data-col-id="1" data-colspan="1" data-row-id="2" data-rowspan="1">
191
- <p>4</p>
192
- </div>
193
- </td>
194
- <td colspan="1" data-col-id="2" data-row-id="2" rowspan="1">
195
- <div data-col-id="2" data-colspan="1" data-row-id="2" data-rowspan="1">
196
- <p>5</p>
197
- </div>
198
- </td>
199
- </tr>
200
- </tbody>
201
- </table>
202
- </div>
203
- `,
204
- { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'data-table-id'] },
205
- );
206
- });
207
- });
208
-
209
- describe('hack format cell', () => {
210
- it('origin format cell should effect', async () => {
211
- const quill = createQuillWithTableModule('<p>0123456789</p>');
212
- quill.setSelection(3, 2, Quill.sources.SILENT);
213
- quill.format('bold', true);
214
- expect(quill.root.innerHTML).toBe(
215
- '<p>012<strong>34</strong>56789</p>',
216
- );
217
- expect(quill.getSelection()).toEqual({ index: 3, length: 2 });
218
-
219
- quill.setSelection(4, 2, Quill.sources.SILENT);
220
- quill.format('underline', true);
221
- expect(quill.root.innerHTML).toBe(
222
- '<p>012<strong>3<u>4</u></strong><u>5</u>6789</p>',
223
- );
224
- expect(quill.getSelection()).toEqual({ index: 4, length: 2 });
225
- expectDelta(
226
- quill.getContents(),
227
- new Delta([
228
- { insert: '012' },
229
- { attributes: { bold: true }, insert: '3' },
230
- { attributes: { underline: true, bold: true }, insert: '4' },
231
- { attributes: { underline: true }, insert: '5' },
232
- { insert: '6789\n' },
233
- ]),
234
- );
235
- });
236
-
237
- it('select part of text in cell should text like origin', async () => {
238
- const quill = await createTable(2, 2, { full: false });
239
- quill.updateContents(
240
- new Delta()
241
- .retain(4)
242
- .insert('23456789')
243
- .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
244
- .insert('12345')
245
- .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
246
- .insert('123456789'),
247
- );
248
- expectDelta(
249
- quill.getContents(),
250
- new Delta([
251
- { insert: '\n' },
252
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
253
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
254
- { insert: '123456789' },
255
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
256
- { insert: '12345' },
257
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
258
- { insert: '123456789' },
259
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
260
- { insert: '2' },
261
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
262
- { insert: '3' },
263
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
264
- { insert: '4' },
265
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
266
- { insert: '\n' },
267
- ]),
268
- );
269
-
270
- quill.setSelection(7, 17, Quill.sources.SILENT);
271
- quill.format('bold', true);
272
- quill.format('underline', true);
273
- expect(quill.getSelection()).toEqual({ index: 7, length: 17 });
274
- expectDelta(
275
- quill.getContents(),
276
- new Delta([
277
- { insert: '\n' },
278
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
279
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
280
- { insert: '1234' },
281
- { attributes: { underline: true, bold: true }, insert: '56789' },
282
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
283
- { attributes: { underline: true, bold: true }, insert: '12345' },
284
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
285
- { attributes: { underline: true, bold: true }, insert: '12345' },
286
- { insert: '6789' },
287
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
288
- { insert: '2' },
289
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
290
- { insert: '3' },
291
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
292
- { insert: '4' },
293
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
294
- { insert: '\n' },
295
- ]),
296
- );
297
-
298
- quill.updateContents(
299
- new Delta()
300
- .retain(30)
301
- .insert('345')
302
- .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } })
303
- .insert('2345')
304
- .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } })
305
- .insert('2345'),
306
- );
307
- quill.setSelection(35, 2, Quill.sources.SILENT);
308
- quill.format('list', 'ordered');
309
- expectDelta(
310
- quill.getContents(),
311
- new Delta([
312
- { insert: '\n' },
313
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
314
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
315
- { insert: '1234' },
316
- { attributes: { underline: true, bold: true }, insert: '56789' },
317
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
318
- { attributes: { underline: true, bold: true }, insert: '12345' },
319
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
320
- { attributes: { underline: true, bold: true }, insert: '12345' },
321
- { insert: '6789' },
322
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
323
- { insert: '2345' },
324
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
325
- { insert: '2345' },
326
- { attributes: { 'list': 'ordered', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
327
- { insert: '2345' },
328
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
329
- { insert: '3' },
330
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
331
- { insert: '4' },
332
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
333
- { insert: '\n' },
334
- ]),
335
- );
336
- });
337
-
338
- it('select length is 0 and not have selecteds should format like origin', async () => {
339
- const quill = await createTable(2, 2, { full: false });
340
- quill.updateContents(
341
- new Delta()
342
- .retain(4)
343
- .insert('23456789')
344
- .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
345
- .insert('12345')
346
- .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
347
- .insert('123456789'),
348
- );
349
- quill.setSelection(18, 0, Quill.sources.SILENT);
350
- quill.format('list', 'bullet');
351
- expectDelta(
352
- quill.getContents(),
353
- new Delta([
354
- { insert: '\n' },
355
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
356
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
357
- { insert: '123456789' },
358
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
359
- { insert: '12345' },
360
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
361
- { insert: '123456789' },
362
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
363
- { insert: '2' },
364
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
365
- { insert: '3' },
366
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
367
- { insert: '4' },
368
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
369
- { insert: '\n' },
370
- ]),
371
- );
372
- expect(quill.getSelection()).toEqual({ index: 18, length: 0 });
373
- });
374
-
375
- it('selection not in cell and selectedTds not empty should format all text in cell', async () => {
376
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
377
- quill.setContents(createTableDeltaOps(2, 2, { full: false }));
378
- quill.updateContents(
379
- new Delta()
380
- .retain(4)
381
- .insert('23456789')
382
- .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
383
- .insert('12345')
384
- .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
385
- .insert('123456789'),
386
- );
387
-
388
- quill.setSelection({ index: 3, length: 0 });
389
- quill.blur();
390
- quill.focus();
391
- const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
392
- const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
393
- const tableSelection = tableUp.getModule<TableSelection>('table-selection');
394
- tableSelection!.setSelectedTds([tds[0], tds[2]]);
395
- quill.format('bold', true);
396
- // simulate `getBoundingClientRect` will effect selectedTd computed position. need manual set
397
- tableSelection!.setSelectedTds([tds[0], tds[2]]);
398
- quill.format('list', 'bullet');
399
- expectDelta(
400
- quill.getContents(),
401
- new Delta([
402
- { insert: '\n' },
403
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
404
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
405
- { insert: '123456789', attributes: { bold: true } },
406
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
407
- { insert: '12345', attributes: { bold: true } },
408
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
409
- { insert: '123456789', attributes: { bold: true } },
410
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
411
- { insert: '2' },
412
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
413
- { insert: '3', attributes: { bold: true } },
414
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
415
- { insert: '4' },
416
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
417
- { insert: '\n' },
418
- ]),
419
- );
420
- });
421
-
422
- it('selection can get format tableCellInner. should format like origin', async () => {
423
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
424
- quill.setContents([
425
- { insert: '12345\n' },
426
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
427
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
428
- { insert: '1' },
429
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
430
- { insert: '2' },
431
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
432
- { insert: '3' },
433
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
434
- { insert: '4' },
435
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
436
- { insert: '\n' },
437
- ]);
438
-
439
- quill.setSelection(9, 0, Quill.sources.SILENT);
440
- quill.format('list', 'bullet');
441
- // simulate `getBoundingClientRect` will effect selectedTd computed position. need manual set
442
- quill.setSelection(14, 1, Quill.sources.SILENT);
443
- quill.format('bold', true);
444
- expectDelta(
445
- quill.getContents(),
446
- new Delta([
447
- { insert: '12345\n' },
448
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
449
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
450
- { insert: '1' },
451
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
452
- { insert: '2' },
453
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
454
- { insert: '3' },
455
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
456
- { attributes: { bold: true }, insert: '4' },
457
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
458
- { insert: '\n' },
459
- ]),
460
- );
461
- expect(quill.getSelection()).toEqual({ index: 14, length: 1 });
462
- });
463
- });
464
-
465
- describe('hack toolbar clean handler', () => {
466
- it('clean handler should not effect when selection not have cell', async () => {
467
- const quill = createQuillWithTableModule('<p></p>');
468
- quill.setContents([
469
- { attributes: { underline: true, strike: true, italic: true, bold: true }, insert: '12345' },
470
- { attributes: { header: 1 }, insert: '\n' },
471
- ]);
472
-
473
- quill.setSelection(0, 5);
474
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
475
-
476
- expectDelta(
477
- quill.getContents(),
478
- new Delta([{ insert: '12345\n' }]),
479
- );
480
- expect(quill.getSelection()).toEqual({ index: 0, length: 5 });
481
- });
482
-
483
- it('clean handler should clean format exclude cell', async () => {
484
- const quill = createQuillWithTableModule('<p></p>');
485
- quill.setContents([
486
- { insert: '\n' },
487
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
488
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
489
- { insert: '12345', attributes: { bold: true } },
490
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
491
- { insert: '22345', attributes: { bold: true } },
492
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
493
- { insert: '3' },
494
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
495
- { insert: '4' },
496
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
497
- { insert: '\n' },
498
- ]);
499
-
500
- quill.setSelection(4, 3, Quill.sources.SILENT);
501
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
502
-
503
- expectDelta(
504
- quill.getContents(),
505
- new Delta([
506
- { insert: '\n' },
507
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
508
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
509
- { insert: '1', attributes: { bold: true } },
510
- { insert: '234' },
511
- { insert: '5', attributes: { bold: true } },
512
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
513
- { insert: '22345', attributes: { bold: true } },
514
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
515
- { insert: '3' },
516
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
517
- { insert: '4' },
518
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
519
- { insert: '\n' },
520
- ]),
521
- );
522
- expect(quill.getSelection()).toEqual({ index: 4, length: 3 });
523
- });
524
-
525
- it('clean handler should not clean if selection length 0', async () => {
526
- const quill = createQuillWithTableModule('<p></p>');
527
- quill.setContents([
528
- { insert: '\n' },
529
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
530
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
531
- { insert: '12345', attributes: { bold: true } },
532
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
533
- { insert: '12345', attributes: { bold: true } },
534
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
535
- { insert: '22345', attributes: { bold: true } },
536
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
537
- { insert: '3' },
538
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
539
- { insert: '4' },
540
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
541
- { insert: '\n' },
542
- ]);
543
- quill.setSelection(8, 0);
544
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
545
-
546
- expectDelta(
547
- quill.getContents(),
548
- new Delta([
549
- { insert: '\n' },
550
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
551
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
552
- { insert: '12345', attributes: { bold: true } },
553
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
554
- { insert: '12345', attributes: { bold: true } },
555
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
556
- { insert: '22345', attributes: { bold: true } },
557
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
558
- { insert: '3' },
559
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
560
- { insert: '4' },
561
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
562
- { insert: '\n' },
563
- ]),
564
- );
565
- expect(quill.getSelection()).toEqual({ index: 8, length: 0 });
566
- });
567
-
568
- it('clean handler should clean all format in selectedTds', async () => {
569
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
570
- quill.setContents([
571
- { insert: '\n' },
572
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
573
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
574
- { insert: '12345', attributes: { bold: true } },
575
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
576
- { insert: '12345', attributes: { bold: true } },
577
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
578
- { insert: '22345', attributes: { bold: true } },
579
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
580
- { insert: '3', attributes: { bold: true } },
581
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
582
- { insert: '4', attributes: { bold: true } },
583
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
584
- { insert: '\n' },
585
- ]);
586
- const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
587
- const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
588
- const tableSelection = tableUp.getModule<TableSelection>('table-selection');
589
- tableSelection!.table = quill.root.querySelector('table')!;
590
- tableSelection!.setSelectedTds(tds);
591
-
592
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
593
- expectDelta(
594
- quill.getContents(),
595
- new Delta([
596
- { insert: '\n' },
597
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
598
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
599
- { insert: '12345' },
600
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
601
- { insert: '12345' },
602
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
603
- { insert: '22345' },
604
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
605
- { insert: '3' },
606
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
607
- { insert: '4' },
608
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
609
- { insert: '\n' },
610
- ]),
611
- );
612
- expect(quill.getSelection()).toBeNull();
613
- });
614
-
615
- it('selection not in cell but have selectedTds. should clean all text in selected cell', async () => {
616
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
617
- quill.setContents([
618
- { insert: '12345', attributes: { bold: true } },
619
- { insert: '\n' },
620
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
621
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
622
- { insert: '1', attributes: { bold: true } },
623
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
624
- { insert: '2' },
625
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
626
- { insert: '3', attributes: { bold: true } },
627
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
628
- { insert: '4' },
629
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
630
- { insert: '\n' },
631
- ]);
632
- const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
633
- const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
634
- const tableSelection = tableUp.getModule<TableSelection>('table-selection');
635
- tableSelection!.table = quill.root.querySelector('table')!;
636
- tableSelection!.setSelectedTds(tds);
637
- quill.setSelection(1, 3, Quill.sources.SILENT);
638
-
639
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
640
- expectDelta(
641
- quill.getContents(),
642
- new Delta([
643
- { insert: '12345', attributes: { bold: true } },
644
- { insert: '\n' },
645
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
646
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
647
- { insert: '1' },
648
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
649
- { insert: '2' },
650
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
651
- { insert: '3' },
652
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
653
- { insert: '4' },
654
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
655
- { insert: '\n' },
656
- ]),
657
- );
658
- expect(quill.getSelection()).toBeNull();
659
- });
660
-
661
- it('clean handler should clean block format text in cell', async () => {
662
- const quill = createQuillWithTableModule('<p></p>');
663
- quill.setContents([
664
- { insert: '\n' },
665
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
666
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
667
- { insert: '123', attributes: { bold: true } },
668
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
669
- { insert: '123', attributes: { bold: true } },
670
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
671
- { insert: '2' },
672
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
673
- { insert: '3', attributes: { bold: true } },
674
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
675
- { insert: '4' },
676
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
677
- { insert: '\n' },
678
- ]);
679
-
680
- quill.setSelection(4, 5, Quill.sources.SILENT);
681
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
682
- expectDelta(
683
- quill.getContents(),
684
- new Delta([
685
- { insert: '\n' },
686
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
687
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
688
- { insert: '1', attributes: { bold: true } },
689
- { insert: '23' },
690
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
691
- { insert: '12' },
692
- { insert: '3', attributes: { bold: true } },
693
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
694
- { insert: '2' },
695
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
696
- { insert: '3', attributes: { bold: true } },
697
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
698
- { insert: '4' },
699
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
700
- { insert: '\n' },
701
- ]),
702
- );
703
- expect(quill.getSelection()).toEqual({ index: 4, length: 5 });
704
- });
705
-
706
- it('clean handler should clean embed correct', async () => {
707
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
708
- quill.setContents([
709
- { insert: '\n' },
710
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
711
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
712
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
713
- { insert: { image: 'https://71f32f3f-ce5e-4222-95b1-a8f7b05ea469.mdnplay.dev/shared-assets/images/examples/grapefruit-slice.jpg' } },
714
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
715
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
716
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
717
- { insert: '\n' },
718
- ]);
719
-
720
- quill.setSelection(4, 1, Quill.sources.SILENT);
721
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
722
-
723
- expectDelta(
724
- quill.getContents(),
725
- new Delta([
726
- { insert: '\n' },
727
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
728
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
729
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
730
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
731
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
732
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
733
- { insert: '\n' },
734
- ]),
735
- );
736
- expect(quill.getSelection()).toEqual({ index: 4, length: 0 });
737
-
738
- quill.history.undo();
739
- await vi.runAllTimersAsync();
740
- const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
741
- const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
742
- const tableSelection = tableUp.getModule<TableSelection>('table-selection');
743
- tableSelection!.table = quill.root.querySelector('table')!;
744
- tableSelection!.setSelectedTds([tds[1]]);
745
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
746
- expectDelta(
747
- quill.getContents(),
748
- new Delta([
749
- { insert: '\n' },
750
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
751
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
752
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
753
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
754
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
755
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
756
- { insert: '\n' },
757
- ]),
758
- );
759
- });
760
-
761
- it('clean handler trigger source should be USER', async () => {
762
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
763
- quill.setContents([
764
- { insert: '\n' },
765
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
766
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
767
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
768
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
769
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
770
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
771
- { insert: '\n' },
772
- ]);
773
-
774
- const textChangeSpy = vi.fn();
775
- quill.on(Quill.events.TEXT_CHANGE, textChangeSpy);
776
-
777
- quill.setSelection(3, 1, Quill.sources.SILENT);
778
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
779
- expect(textChangeSpy).toHaveBeenCalledWith(expect.anything(), expect.anything(), Quill.sources.USER);
780
- });
781
-
782
- it('clean handler should not clean cell style when selection in cell', async () => {
783
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
784
- quill.setContents([
785
- { insert: '\n' },
786
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
787
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
788
- { attributes: { background: '#e60000' }, insert: '1' },
789
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(41, 114, 244);' } }, insert: '\n' },
790
- { insert: '2' },
791
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
792
- { insert: '3' },
793
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
794
- { attributes: { italic: true, bold: true }, insert: '5555' },
795
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
796
- { attributes: { italic: true, bold: true }, insert: '6666' },
797
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
798
- { insert: '\n' },
799
- ]);
800
-
801
- quill.setSelection(11, 5, Quill.sources.SILENT);
802
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
803
-
804
- expectDelta(
805
- quill.getContents(),
806
- new Delta([
807
- { insert: '\n' },
808
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
809
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
810
- { attributes: { background: '#e60000' }, insert: '1' },
811
- { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '1', rowId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody', style: 'background-color: rgb(41, 114, 244);' } }, insert: '\n' },
812
- { insert: '2' },
813
- { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '2', rowId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
814
- { insert: '3' },
815
- { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '1', rowId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
816
- { attributes: { italic: true, bold: true }, insert: '55' },
817
- { insert: '55' },
818
- { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '2', rowId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody', style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
819
- { insert: '66' },
820
- { attributes: { italic: true, bold: true }, insert: '66' },
821
- { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '2', rowId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody', style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
822
- { insert: '\n' },
823
- ]),
824
- );
825
- expect(quill.root).toEqualHTML(
826
- `
827
- <p><br></p>
828
- <div>
829
- <table cellpadding="0" cellspacing="0">
830
- <colgroup>
831
- <col width="121px" />
832
- <col width="121px" />
833
- </colgroup>
834
- <tbody>
835
- <tr>
836
- <td rowspan="1" colspan="1" style="background-color: rgb(41, 114, 244);">
837
- <div data-style="background-color: rgb(41, 114, 244);">
838
- <p><span style="background-color: rgb(230, 0, 0);">1</span></p>
839
- </div>
840
- </td>
841
- <td rowspan="1" colspan="1">
842
- <div>
843
- <p>2</p>
844
- </div>
845
- </td>
846
- </tr>
847
- <tr>
848
- <td rowspan="1" colspan="1"><div><p>3</p></div></td>
849
- <td rowspan="1" colspan="1" style="background-color: rgb(49, 155, 98);">
850
- <div data-style="background-color: rgb(49, 155, 98);">
851
- <p><strong><em>55</em></strong>55</p>
852
- <p>66<strong><em>66</em></strong></p>
853
- </div>
854
- </td>
855
- </tr>
856
- </tbody>
857
- </table>
858
- </div>
859
- <p><br></p>
860
- `,
861
- { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
862
- );
863
- });
864
-
865
- it('clean handler should clean cell style when have selectedTds cleaning', async () => {
866
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
867
- quill.setContents([
868
- { insert: '\n' },
869
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
870
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
871
- { attributes: { background: '#e60000' }, insert: '1' },
872
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(41, 114, 244);' } }, insert: '\n' },
873
- { insert: '2' },
874
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
875
- { insert: '3' },
876
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
877
- { attributes: { italic: true, bold: true }, insert: '5555' },
878
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
879
- { attributes: { italic: true, bold: true }, insert: '6666' },
880
- { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
881
- { insert: '\n' },
882
- ]);
883
-
884
- const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
885
- const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
886
- const tableSelection = tableUp.getModule<TableSelection>('table-selection');
887
- tableSelection!.table = quill.root.querySelector('table')!;
888
- tableSelection!.setSelectedTds(tds);
889
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
890
-
891
- expectDelta(
892
- quill.getContents(),
893
- new Delta([
894
- { insert: '\n' },
895
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
896
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
897
- { insert: '1' },
898
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
899
- { insert: '2' },
900
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
901
- { insert: '3' },
902
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
903
- { insert: '5555' },
904
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
905
- { insert: '6666' },
906
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
907
- { insert: '\n' },
908
- ]),
909
- );
910
- expect(quill.root).toEqualHTML(
911
- `
912
- <p><br></p>
913
- <div>
914
- <table cellpadding="0" cellspacing="0">
915
- <colgroup>
916
- <col width="121px" />
917
- <col width="121px" />
918
- </colgroup>
919
- <tbody>
920
- <tr>
921
- <td rowspan="1" colspan="1">
922
- <div>
923
- <p>1</p>
924
- </div>
925
- </td>
926
- <td rowspan="1" colspan="1">
927
- <div>
928
- <p>2</p>
929
- </div>
930
- </td>
931
- </tr>
932
- <tr>
933
- <td rowspan="1" colspan="1"><div><p>3</p></div></td>
934
- <td rowspan="1" colspan="1">
935
- <div>
936
- <p>5555</p>
937
- <p>6666</p>
938
- </div>
939
- </td>
940
- </tr>
941
- </tbody>
942
- </table>
943
- </div>
944
- <p><br></p>
945
- `,
946
- { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
947
- );
948
- });
949
-
950
- it('clean handler should clean cell selectedTds style', async () => {
951
- const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
952
- quill.setContents([
953
- { insert: '\n' },
954
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
955
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
956
- { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
957
- { insert: '1' },
958
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
959
- { insert: '2' },
960
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, style: 'border-bottom-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
961
- { insert: '3' },
962
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
963
- { insert: '4' },
964
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, style: 'border-right-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
965
- { insert: '5' },
966
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'border-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
967
- { insert: '6' },
968
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
969
- { insert: '7' },
970
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
971
- { insert: '8' },
972
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
973
- { insert: '9' },
974
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
975
- { insert: '\n' },
976
- ]);
977
-
978
- const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
979
- const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
980
- const tableSelection = tableUp.getModule<TableSelection>('table-selection');
981
- tableSelection!.table = quill.root.querySelector('table')!;
982
- tableSelection!.setSelectedTds([tds[4]]);
983
- quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
984
-
985
- expectDelta(
986
- quill.getContents(),
987
- new Delta([
988
- { insert: '\n' },
989
- { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
990
- { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
991
- { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
992
- { insert: '1' },
993
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
994
- { insert: '2' },
995
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
996
- { insert: '3' },
997
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
998
- { insert: '4' },
999
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1000
- { insert: '5' },
1001
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1002
- { insert: '6' },
1003
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1004
- { insert: '7' },
1005
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1006
- { insert: '8' },
1007
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1008
- { insert: '9' },
1009
- { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1010
- { insert: '\n' },
1011
- ]),
1012
- );
1013
- });
1014
- });
1
+ import Quill from 'quill';
2
+ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
3
+ import { TableCellInnerFormat } from '../../formats';
4
+ import { TableSelection } from '../../modules';
5
+ import { TableUp } from '../../table-up';
6
+ import { createQuillWithTableModule, createTable, createTableCaptionHTML, createTableDeltaOps, createTaleColHTML, expectDelta } from './utils';
7
+
8
+ const Delta = Quill.import('delta');
9
+ if (!Range.prototype.getBoundingClientRect) {
10
+ Range.prototype.getBoundingClientRect = function () {
11
+ return {
12
+ x: 0,
13
+ y: 0,
14
+ width: 0,
15
+ height: 0,
16
+ top: 0,
17
+ right: 0,
18
+ bottom: 0,
19
+ left: 0,
20
+ toJSON: () => {},
21
+ };
22
+ };
23
+ }
24
+
25
+ beforeEach(() => {
26
+ vi.useFakeTimers();
27
+ });
28
+ afterEach(() => {
29
+ vi.useRealTimers();
30
+ });
31
+
32
+ describe('hack html convert', () => {
33
+ it('getSemanticHTML should not get contenteditable table cell or caption', async () => {
34
+ const quill = createQuillWithTableModule(`<p><br></p>`);
35
+ quill.setContents([
36
+ { insert: '\nTable Caption' },
37
+ { attributes: { 'table-up-caption': { tableId: '1', side: 'bottom' } }, insert: '\n' },
38
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100, align: 'right' } } },
39
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100, align: 'right' } } },
40
+ { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100, align: 'right' } } },
41
+ { insert: '1' },
42
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
43
+ { insert: '2' },
44
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
45
+ { insert: '3' },
46
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
47
+ { insert: '4' },
48
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
49
+ { insert: '5' },
50
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
51
+ { insert: '6' },
52
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
53
+ { insert: '7' },
54
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
55
+ { insert: '8' },
56
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
57
+ { insert: '9' },
58
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
59
+ { insert: '\n' },
60
+ ]);
61
+ await vi.runAllTimersAsync();
62
+ const html1 = quill.getSemanticHTML();
63
+ const parser1 = new DOMParser();
64
+ const doc1 = parser1.parseFromString(html1, 'text/html');
65
+ expect(doc1.body).toEqualHTML(
66
+ `
67
+ <p></p>
68
+ <div contenteditable="false">
69
+ <table cellpadding="0" cellspacing="0" style="width: 300px; margin-left: auto;" data-align="right">
70
+ ${createTableCaptionHTML({ text: 'Table&nbsp;Caption', side: 'bottom' }, { editable: null })}
71
+ ${createTaleColHTML(3, { full: false, width: 100, align: 'right' })}
72
+ <tbody>
73
+ <tr data-row-id="1">
74
+ <th colspan="1" data-col-id="1" data-row-id="1" rowspan="1">
75
+ <div data-col-id="1" data-colspan="1" data-row-id="1" data-rowspan="1">
76
+ <p>1</p>
77
+ </div>
78
+ </th>
79
+ <th colspan="1" data-col-id="2" data-row-id="1" rowspan="1">
80
+ <div data-col-id="2" data-colspan="1" data-row-id="1" data-rowspan="1">
81
+ <p>2</p>
82
+ </div>
83
+ </th>
84
+ <th colspan="1" data-col-id="3" data-row-id="1" rowspan="1">
85
+ <div data-col-id="3" data-colspan="1" data-row-id="1" data-rowspan="1">
86
+ <p>3</p>
87
+ </div>
88
+ </th>
89
+ </tr>
90
+ <tr data-row-id="2">
91
+ <td colspan="1" data-col-id="1" data-row-id="2" rowspan="1">
92
+ <div data-col-id="1" data-colspan="1" data-row-id="2" data-rowspan="1">
93
+ <p>4</p>
94
+ </div>
95
+ </td>
96
+ <td colspan="1" data-col-id="2" data-row-id="2" rowspan="1">
97
+ <div data-col-id="2" data-colspan="1" data-row-id="2" data-rowspan="1">
98
+ <p>5</p>
99
+ </div>
100
+ </td>
101
+ <td colspan="1" data-col-id="3" data-row-id="2" rowspan="1">
102
+ <div data-col-id="3" data-colspan="1" data-row-id="2" data-rowspan="1">
103
+ <p>6</p>
104
+ </div>
105
+ </td>
106
+ </tr>
107
+ <tr data-row-id="3">
108
+ <td colspan="1" data-col-id="1" data-row-id="3" rowspan="1">
109
+ <div data-col-id="1" data-colspan="1" data-row-id="3" data-rowspan="1">
110
+ <p>7</p>
111
+ </div>
112
+ </td>
113
+ <td colspan="1" data-col-id="2" data-row-id="3" rowspan="1">
114
+ <div data-col-id="2" data-colspan="1" data-row-id="3" data-rowspan="1">
115
+ <p>8</p>
116
+ </div>
117
+ </td>
118
+ <td colspan="1" data-col-id="3" data-row-id="3" rowspan="1">
119
+ <div data-col-id="3" data-colspan="1" data-row-id="3" data-rowspan="1">
120
+ <p>9</p>
121
+ </div>
122
+ </td>
123
+ </tr>
124
+ </tbody>
125
+ </table>
126
+ </div>
127
+ <p></p>
128
+ `,
129
+ { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'data-table-id'] },
130
+ );
131
+ });
132
+
133
+ it('getHTMLByCell should not get contenteditable table cell or caption', () => {
134
+ const quill = createQuillWithTableModule(`<p><br></p>`);
135
+ quill.setContents([
136
+ { insert: '\nTable Caption' },
137
+ { attributes: { 'table-up-caption': { tableId: '1', side: 'bottom' } }, insert: '\n' },
138
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100, align: 'right' } } },
139
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100, align: 'right' } } },
140
+ { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100, align: 'right' } } },
141
+ { insert: '1' },
142
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
143
+ { insert: '2' },
144
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
145
+ { insert: '3' },
146
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, tag: 'th' } }, insert: '\n' },
147
+ { insert: '4' },
148
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
149
+ { insert: '5' },
150
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
151
+ { insert: '6' },
152
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
153
+ { insert: '7' },
154
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
155
+ { insert: '8' },
156
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
157
+ { insert: '9' },
158
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
159
+ { insert: '\n' },
160
+ ]);
161
+ const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
162
+ const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
163
+ const html = tableModule.getHTMLByCell([tds[0], tds[1], tds[3], tds[4]]);
164
+ const parser = new DOMParser();
165
+ const doc = parser.parseFromString(html, 'text/html');
166
+ expect(doc.body).toEqualHTML(
167
+ `
168
+ <div contenteditable="false">
169
+ <table cellpadding="0" cellspacing="0" style="width: 200px; margin-left: auto;" data-align="right">
170
+ <caption style="caption-side: bottom;">Table&nbsp;Caption</caption>
171
+ <colgroup contenteditable="false" data-align="right">
172
+ <col width="100px" data-col-id="1" data-align="right" />
173
+ <col width="100px" data-col-id="2" data-align="right" />
174
+ </colgroup>
175
+ <tbody>
176
+ <tr data-row-id="1">
177
+ <th colspan="1" data-col-id="1" data-row-id="1" rowspan="1">
178
+ <div data-col-id="1" data-colspan="1" data-row-id="1" data-rowspan="1">
179
+ <p>1</p>
180
+ </div>
181
+ </th>
182
+ <th colspan="1" data-col-id="2" data-row-id="1" rowspan="1">
183
+ <div data-col-id="2" data-colspan="1" data-row-id="1" data-rowspan="1">
184
+ <p>2</p>
185
+ </div>
186
+ </th>
187
+ </tr>
188
+ <tr data-row-id="2">
189
+ <td colspan="1" data-col-id="1" data-row-id="2" rowspan="1">
190
+ <div data-col-id="1" data-colspan="1" data-row-id="2" data-rowspan="1">
191
+ <p>4</p>
192
+ </div>
193
+ </td>
194
+ <td colspan="1" data-col-id="2" data-row-id="2" rowspan="1">
195
+ <div data-col-id="2" data-colspan="1" data-row-id="2" data-rowspan="1">
196
+ <p>5</p>
197
+ </div>
198
+ </td>
199
+ </tr>
200
+ </tbody>
201
+ </table>
202
+ </div>
203
+ `,
204
+ { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'data-table-id'] },
205
+ );
206
+ });
207
+ });
208
+
209
+ describe('hack format cell', () => {
210
+ it('origin format cell should effect', () => {
211
+ const quill = createQuillWithTableModule('<p>0123456789</p>');
212
+ quill.setSelection(3, 2, Quill.sources.SILENT);
213
+ quill.format('bold', true);
214
+ expect(quill.root.innerHTML).toBe(
215
+ '<p>012<strong>34</strong>56789</p>',
216
+ );
217
+ expect(quill.getSelection()).toEqual({ index: 3, length: 2 });
218
+
219
+ quill.setSelection(4, 2, Quill.sources.SILENT);
220
+ quill.format('underline', true);
221
+ expect(quill.root.innerHTML).toBe(
222
+ '<p>012<strong>3<u>4</u></strong><u>5</u>6789</p>',
223
+ );
224
+ expect(quill.getSelection()).toEqual({ index: 4, length: 2 });
225
+ expectDelta(
226
+ quill.getContents(),
227
+ new Delta([
228
+ { insert: '012' },
229
+ { attributes: { bold: true }, insert: '3' },
230
+ { attributes: { underline: true, bold: true }, insert: '4' },
231
+ { attributes: { underline: true }, insert: '5' },
232
+ { insert: '6789\n' },
233
+ ]),
234
+ );
235
+ });
236
+
237
+ it('select part of text in cell should text like origin', async () => {
238
+ const quill = await createTable(2, 2, { full: false });
239
+ quill.updateContents(
240
+ new Delta()
241
+ .retain(4)
242
+ .insert('23456789')
243
+ .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
244
+ .insert('12345')
245
+ .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
246
+ .insert('123456789'),
247
+ );
248
+ expectDelta(
249
+ quill.getContents(),
250
+ new Delta([
251
+ { insert: '\n' },
252
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
253
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
254
+ { insert: '123456789' },
255
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
256
+ { insert: '12345' },
257
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
258
+ { insert: '123456789' },
259
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
260
+ { insert: '2' },
261
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
262
+ { insert: '3' },
263
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
264
+ { insert: '4' },
265
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
266
+ { insert: '\n' },
267
+ ]),
268
+ );
269
+
270
+ quill.setSelection(7, 17, Quill.sources.SILENT);
271
+ quill.format('bold', true);
272
+ quill.format('underline', true);
273
+ expect(quill.getSelection()).toEqual({ index: 7, length: 17 });
274
+ expectDelta(
275
+ quill.getContents(),
276
+ new Delta([
277
+ { insert: '\n' },
278
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
279
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
280
+ { insert: '1234' },
281
+ { attributes: { underline: true, bold: true }, insert: '56789' },
282
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
283
+ { attributes: { underline: true, bold: true }, insert: '12345' },
284
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
285
+ { attributes: { underline: true, bold: true }, insert: '12345' },
286
+ { insert: '6789' },
287
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
288
+ { insert: '2' },
289
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
290
+ { insert: '3' },
291
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
292
+ { insert: '4' },
293
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
294
+ { insert: '\n' },
295
+ ]),
296
+ );
297
+
298
+ quill.updateContents(
299
+ new Delta()
300
+ .retain(30)
301
+ .insert('345')
302
+ .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } })
303
+ .insert('2345')
304
+ .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } })
305
+ .insert('2345'),
306
+ );
307
+ quill.setSelection(35, 2, Quill.sources.SILENT);
308
+ quill.format('list', 'ordered');
309
+ expectDelta(
310
+ quill.getContents(),
311
+ new Delta([
312
+ { insert: '\n' },
313
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
314
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
315
+ { insert: '1234' },
316
+ { attributes: { underline: true, bold: true }, insert: '56789' },
317
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
318
+ { attributes: { underline: true, bold: true }, insert: '12345' },
319
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
320
+ { attributes: { underline: true, bold: true }, insert: '12345' },
321
+ { insert: '6789' },
322
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
323
+ { insert: '2345' },
324
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
325
+ { insert: '2345' },
326
+ { attributes: { 'list': 'ordered', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
327
+ { insert: '2345' },
328
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
329
+ { insert: '3' },
330
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
331
+ { insert: '4' },
332
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
333
+ { insert: '\n' },
334
+ ]),
335
+ );
336
+ });
337
+
338
+ it('select length is 0 and not have selecteds should format like origin', async () => {
339
+ const quill = await createTable(2, 2, { full: false });
340
+ quill.updateContents(
341
+ new Delta()
342
+ .retain(4)
343
+ .insert('23456789')
344
+ .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
345
+ .insert('12345')
346
+ .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
347
+ .insert('123456789'),
348
+ );
349
+ quill.setSelection(18, 0, Quill.sources.SILENT);
350
+ quill.format('list', 'bullet');
351
+ expectDelta(
352
+ quill.getContents(),
353
+ new Delta([
354
+ { insert: '\n' },
355
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
356
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
357
+ { insert: '123456789' },
358
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
359
+ { insert: '12345' },
360
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
361
+ { insert: '123456789' },
362
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
363
+ { insert: '2' },
364
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
365
+ { insert: '3' },
366
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
367
+ { insert: '4' },
368
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
369
+ { insert: '\n' },
370
+ ]),
371
+ );
372
+ expect(quill.getSelection()).toEqual({ index: 18, length: 0 });
373
+ });
374
+
375
+ it('selection not in cell and selectedTds not empty should format all text in cell', () => {
376
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
377
+ quill.setContents(createTableDeltaOps(2, 2, { full: false }));
378
+ quill.updateContents(
379
+ new Delta()
380
+ .retain(4)
381
+ .insert('23456789')
382
+ .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
383
+ .insert('12345')
384
+ .insert('\n', { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } })
385
+ .insert('123456789'),
386
+ );
387
+
388
+ quill.setSelection({ index: 3, length: 0 });
389
+ quill.blur();
390
+ quill.focus();
391
+ const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
392
+ const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
393
+ const tableSelection = tableUp.getModule<TableSelection>('table-selection');
394
+ tableSelection!.setSelectedTds([tds[0], tds[2]]);
395
+ quill.format('bold', true);
396
+ // simulate `getBoundingClientRect` will effect selectedTd computed position. need manual set
397
+ tableSelection!.setSelectedTds([tds[0], tds[2]]);
398
+ quill.format('list', 'bullet');
399
+ expectDelta(
400
+ quill.getContents(),
401
+ new Delta([
402
+ { insert: '\n' },
403
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
404
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
405
+ { insert: '123456789', attributes: { bold: true } },
406
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
407
+ { insert: '12345', attributes: { bold: true } },
408
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
409
+ { insert: '123456789', attributes: { bold: true } },
410
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
411
+ { insert: '2' },
412
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
413
+ { insert: '3', attributes: { bold: true } },
414
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
415
+ { insert: '4' },
416
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
417
+ { insert: '\n' },
418
+ ]),
419
+ );
420
+ });
421
+
422
+ it('selection can get format tableCellInner. should format like origin', () => {
423
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
424
+ quill.setContents([
425
+ { insert: '12345\n' },
426
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
427
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
428
+ { insert: '1' },
429
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
430
+ { insert: '2' },
431
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
432
+ { insert: '3' },
433
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
434
+ { insert: '4' },
435
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
436
+ { insert: '\n' },
437
+ ]);
438
+
439
+ quill.setSelection(9, 0, Quill.sources.SILENT);
440
+ quill.format('list', 'bullet');
441
+ // simulate `getBoundingClientRect` will effect selectedTd computed position. need manual set
442
+ quill.setSelection(14, 1, Quill.sources.SILENT);
443
+ quill.format('bold', true);
444
+ expectDelta(
445
+ quill.getContents(),
446
+ new Delta([
447
+ { insert: '12345\n' },
448
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
449
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
450
+ { insert: '1' },
451
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
452
+ { insert: '2' },
453
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
454
+ { insert: '3' },
455
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
456
+ { attributes: { bold: true }, insert: '4' },
457
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
458
+ { insert: '\n' },
459
+ ]),
460
+ );
461
+ expect(quill.getSelection()).toEqual({ index: 14, length: 1 });
462
+ });
463
+ });
464
+
465
+ describe('hack toolbar clean handler', () => {
466
+ it('clean handler should not effect when selection not have cell', () => {
467
+ const quill = createQuillWithTableModule('<p></p>');
468
+ quill.setContents([
469
+ { attributes: { underline: true, strike: true, italic: true, bold: true }, insert: '12345' },
470
+ { attributes: { header: 1 }, insert: '\n' },
471
+ ]);
472
+
473
+ quill.setSelection(0, 5);
474
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
475
+
476
+ expectDelta(
477
+ quill.getContents(),
478
+ new Delta([{ insert: '12345\n' }]),
479
+ );
480
+ expect(quill.getSelection()).toEqual({ index: 0, length: 5 });
481
+ });
482
+
483
+ it('clean handler should clean format exclude cell', () => {
484
+ const quill = createQuillWithTableModule('<p></p>');
485
+ quill.setContents([
486
+ { insert: '\n' },
487
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
488
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
489
+ { insert: '12345', attributes: { bold: true } },
490
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
491
+ { insert: '22345', attributes: { bold: true } },
492
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
493
+ { insert: '3' },
494
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
495
+ { insert: '4' },
496
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
497
+ { insert: '\n' },
498
+ ]);
499
+
500
+ quill.setSelection(4, 3, Quill.sources.SILENT);
501
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
502
+
503
+ expectDelta(
504
+ quill.getContents(),
505
+ new Delta([
506
+ { insert: '\n' },
507
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
508
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
509
+ { insert: '1', attributes: { bold: true } },
510
+ { insert: '234' },
511
+ { insert: '5', attributes: { bold: true } },
512
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
513
+ { insert: '22345', attributes: { bold: true } },
514
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
515
+ { insert: '3' },
516
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
517
+ { insert: '4' },
518
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
519
+ { insert: '\n' },
520
+ ]),
521
+ );
522
+ expect(quill.getSelection()).toEqual({ index: 4, length: 3 });
523
+ });
524
+
525
+ it('clean handler should not clean if selection length 0', () => {
526
+ const quill = createQuillWithTableModule('<p></p>');
527
+ quill.setContents([
528
+ { insert: '\n' },
529
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
530
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
531
+ { insert: '12345', attributes: { bold: true } },
532
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
533
+ { insert: '12345', attributes: { bold: true } },
534
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
535
+ { insert: '22345', attributes: { bold: true } },
536
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
537
+ { insert: '3' },
538
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
539
+ { insert: '4' },
540
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
541
+ { insert: '\n' },
542
+ ]);
543
+ quill.setSelection(8, 0);
544
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
545
+
546
+ expectDelta(
547
+ quill.getContents(),
548
+ new Delta([
549
+ { insert: '\n' },
550
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
551
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
552
+ { insert: '12345', attributes: { bold: true } },
553
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
554
+ { insert: '12345', attributes: { bold: true } },
555
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
556
+ { insert: '22345', attributes: { bold: true } },
557
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
558
+ { insert: '3' },
559
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
560
+ { insert: '4' },
561
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
562
+ { insert: '\n' },
563
+ ]),
564
+ );
565
+ expect(quill.getSelection()).toEqual({ index: 8, length: 0 });
566
+ });
567
+
568
+ it('clean handler should clean all format in selectedTds', () => {
569
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
570
+ quill.setContents([
571
+ { insert: '\n' },
572
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
573
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
574
+ { insert: '12345', attributes: { bold: true } },
575
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
576
+ { insert: '12345', attributes: { bold: true } },
577
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
578
+ { insert: '22345', attributes: { bold: true } },
579
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
580
+ { insert: '3', attributes: { bold: true } },
581
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
582
+ { insert: '4', attributes: { bold: true } },
583
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
584
+ { insert: '\n' },
585
+ ]);
586
+ const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
587
+ const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
588
+ const tableSelection = tableUp.getModule<TableSelection>('table-selection');
589
+ tableSelection!.table = quill.root.querySelector('table')!;
590
+ tableSelection!.setSelectedTds(tds);
591
+
592
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
593
+ expectDelta(
594
+ quill.getContents(),
595
+ new Delta([
596
+ { insert: '\n' },
597
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
598
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
599
+ { insert: '12345' },
600
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
601
+ { insert: '12345' },
602
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
603
+ { insert: '22345' },
604
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
605
+ { insert: '3' },
606
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
607
+ { insert: '4' },
608
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
609
+ { insert: '\n' },
610
+ ]),
611
+ );
612
+ expect(quill.getSelection()).toBeNull();
613
+ });
614
+
615
+ it('selection not in cell but have selectedTds. should clean all text in selected cell', () => {
616
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
617
+ quill.setContents([
618
+ { insert: '12345', attributes: { bold: true } },
619
+ { insert: '\n' },
620
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
621
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
622
+ { insert: '1', attributes: { bold: true } },
623
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
624
+ { insert: '2' },
625
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
626
+ { insert: '3', attributes: { bold: true } },
627
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
628
+ { insert: '4' },
629
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
630
+ { insert: '\n' },
631
+ ]);
632
+ const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
633
+ const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
634
+ const tableSelection = tableUp.getModule<TableSelection>('table-selection');
635
+ tableSelection!.table = quill.root.querySelector('table')!;
636
+ tableSelection!.setSelectedTds(tds);
637
+ quill.setSelection(1, 3, Quill.sources.SILENT);
638
+
639
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
640
+ expectDelta(
641
+ quill.getContents(),
642
+ new Delta([
643
+ { insert: '12345', attributes: { bold: true } },
644
+ { insert: '\n' },
645
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
646
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
647
+ { insert: '1' },
648
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
649
+ { insert: '2' },
650
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
651
+ { insert: '3' },
652
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
653
+ { insert: '4' },
654
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
655
+ { insert: '\n' },
656
+ ]),
657
+ );
658
+ expect(quill.getSelection()).toBeNull();
659
+ });
660
+
661
+ it('clean handler should clean block format text in cell', () => {
662
+ const quill = createQuillWithTableModule('<p></p>');
663
+ quill.setContents([
664
+ { insert: '\n' },
665
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
666
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
667
+ { insert: '123', attributes: { bold: true } },
668
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
669
+ { insert: '123', attributes: { bold: true } },
670
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
671
+ { insert: '2' },
672
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
673
+ { insert: '3', attributes: { bold: true } },
674
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
675
+ { insert: '4' },
676
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
677
+ { insert: '\n' },
678
+ ]);
679
+
680
+ quill.setSelection(4, 5, Quill.sources.SILENT);
681
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
682
+ expectDelta(
683
+ quill.getContents(),
684
+ new Delta([
685
+ { insert: '\n' },
686
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
687
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
688
+ { insert: '1', attributes: { bold: true } },
689
+ { insert: '23' },
690
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
691
+ { insert: '12' },
692
+ { insert: '3', attributes: { bold: true } },
693
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
694
+ { insert: '2' },
695
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
696
+ { insert: '3', attributes: { bold: true } },
697
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
698
+ { insert: '4' },
699
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
700
+ { insert: '\n' },
701
+ ]),
702
+ );
703
+ expect(quill.getSelection()).toEqual({ index: 4, length: 5 });
704
+ });
705
+
706
+ it('clean handler should clean embed correct', async () => {
707
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
708
+ quill.setContents([
709
+ { insert: '\n' },
710
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
711
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
712
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
713
+ { insert: { image: 'https://71f32f3f-ce5e-4222-95b1-a8f7b05ea469.mdnplay.dev/shared-assets/images/examples/grapefruit-slice.jpg' } },
714
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
715
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
716
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
717
+ { insert: '\n' },
718
+ ]);
719
+
720
+ quill.setSelection(4, 1, Quill.sources.SILENT);
721
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
722
+
723
+ expectDelta(
724
+ quill.getContents(),
725
+ new Delta([
726
+ { insert: '\n' },
727
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
728
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
729
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
730
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
731
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
732
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
733
+ { insert: '\n' },
734
+ ]),
735
+ );
736
+ expect(quill.getSelection()).toEqual({ index: 4, length: 0 });
737
+
738
+ quill.history.undo();
739
+ await vi.runAllTimersAsync();
740
+ const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
741
+ const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
742
+ const tableSelection = tableUp.getModule<TableSelection>('table-selection');
743
+ tableSelection!.table = quill.root.querySelector('table')!;
744
+ tableSelection!.setSelectedTds([tds[1]]);
745
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
746
+ expectDelta(
747
+ quill.getContents(),
748
+ new Delta([
749
+ { insert: '\n' },
750
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
751
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
752
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
753
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
754
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
755
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
756
+ { insert: '\n' },
757
+ ]),
758
+ );
759
+ });
760
+
761
+ it('clean handler trigger source should be USER', () => {
762
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
763
+ quill.setContents([
764
+ { insert: '\n' },
765
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
766
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
767
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
768
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
769
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
770
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
771
+ { insert: '\n' },
772
+ ]);
773
+
774
+ const textChangeSpy = vi.fn();
775
+ quill.on(Quill.events.TEXT_CHANGE, textChangeSpy);
776
+
777
+ quill.setSelection(3, 1, Quill.sources.SILENT);
778
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
779
+ expect(textChangeSpy).toHaveBeenCalledWith(expect.anything(), expect.anything(), Quill.sources.USER);
780
+ });
781
+
782
+ it('clean handler should not clean cell style when selection in cell', () => {
783
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
784
+ quill.setContents([
785
+ { insert: '\n' },
786
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
787
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
788
+ { attributes: { background: '#e60000' }, insert: '1' },
789
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(41, 114, 244);' } }, insert: '\n' },
790
+ { insert: '2' },
791
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
792
+ { insert: '3' },
793
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
794
+ { attributes: { italic: true, bold: true }, insert: '5555' },
795
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
796
+ { attributes: { italic: true, bold: true }, insert: '6666' },
797
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
798
+ { insert: '\n' },
799
+ ]);
800
+
801
+ quill.setSelection(11, 5, Quill.sources.SILENT);
802
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
803
+
804
+ expectDelta(
805
+ quill.getContents(),
806
+ new Delta([
807
+ { insert: '\n' },
808
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
809
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
810
+ { attributes: { background: '#e60000' }, insert: '1' },
811
+ { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '1', rowId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody', style: 'background-color: rgb(41, 114, 244);' } }, insert: '\n' },
812
+ { insert: '2' },
813
+ { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '2', rowId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
814
+ { insert: '3' },
815
+ { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '1', rowId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
816
+ { attributes: { italic: true, bold: true }, insert: '55' },
817
+ { insert: '55' },
818
+ { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '2', rowId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody', style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
819
+ { insert: '66' },
820
+ { attributes: { italic: true, bold: true }, insert: '66' },
821
+ { attributes: { 'table-up-cell-inner': { tableId: '1', colId: '2', rowId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody', style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
822
+ { insert: '\n' },
823
+ ]),
824
+ );
825
+ expect(quill.root).toEqualHTML(
826
+ `
827
+ <p><br></p>
828
+ <div>
829
+ <table cellpadding="0" cellspacing="0">
830
+ <colgroup>
831
+ <col width="121px" />
832
+ <col width="121px" />
833
+ </colgroup>
834
+ <tbody>
835
+ <tr>
836
+ <td rowspan="1" colspan="1" style="background-color: rgb(41, 114, 244);">
837
+ <div data-style="background-color: rgb(41, 114, 244);">
838
+ <p><span style="background-color: rgb(230, 0, 0);">1</span></p>
839
+ </div>
840
+ </td>
841
+ <td rowspan="1" colspan="1">
842
+ <div>
843
+ <p>2</p>
844
+ </div>
845
+ </td>
846
+ </tr>
847
+ <tr>
848
+ <td rowspan="1" colspan="1"><div><p>3</p></div></td>
849
+ <td rowspan="1" colspan="1" style="background-color: rgb(49, 155, 98);">
850
+ <div data-style="background-color: rgb(49, 155, 98);">
851
+ <p><strong><em>55</em></strong>55</p>
852
+ <p>66<strong><em>66</em></strong></p>
853
+ </div>
854
+ </td>
855
+ </tr>
856
+ </tbody>
857
+ </table>
858
+ </div>
859
+ <p><br></p>
860
+ `,
861
+ { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
862
+ );
863
+ });
864
+
865
+ it('clean handler should clean cell style when have selectedTds cleaning', () => {
866
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
867
+ quill.setContents([
868
+ { insert: '\n' },
869
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
870
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
871
+ { attributes: { background: '#e60000' }, insert: '1' },
872
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(41, 114, 244);' } }, insert: '\n' },
873
+ { insert: '2' },
874
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
875
+ { insert: '3' },
876
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
877
+ { attributes: { italic: true, bold: true }, insert: '5555' },
878
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
879
+ { attributes: { italic: true, bold: true }, insert: '6666' },
880
+ { attributes: { 'list': 'bullet', 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(49, 155, 98);' } }, insert: '\n' },
881
+ { insert: '\n' },
882
+ ]);
883
+
884
+ const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
885
+ const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
886
+ const tableSelection = tableUp.getModule<TableSelection>('table-selection');
887
+ tableSelection!.table = quill.root.querySelector('table')!;
888
+ tableSelection!.setSelectedTds(tds);
889
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
890
+
891
+ expectDelta(
892
+ quill.getContents(),
893
+ new Delta([
894
+ { insert: '\n' },
895
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
896
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
897
+ { insert: '1' },
898
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
899
+ { insert: '2' },
900
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
901
+ { insert: '3' },
902
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
903
+ { insert: '5555' },
904
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
905
+ { insert: '6666' },
906
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
907
+ { insert: '\n' },
908
+ ]),
909
+ );
910
+ expect(quill.root).toEqualHTML(
911
+ `
912
+ <p><br></p>
913
+ <div>
914
+ <table cellpadding="0" cellspacing="0">
915
+ <colgroup>
916
+ <col width="121px" />
917
+ <col width="121px" />
918
+ </colgroup>
919
+ <tbody>
920
+ <tr>
921
+ <td rowspan="1" colspan="1">
922
+ <div>
923
+ <p>1</p>
924
+ </div>
925
+ </td>
926
+ <td rowspan="1" colspan="1">
927
+ <div>
928
+ <p>2</p>
929
+ </div>
930
+ </td>
931
+ </tr>
932
+ <tr>
933
+ <td rowspan="1" colspan="1"><div><p>3</p></div></td>
934
+ <td rowspan="1" colspan="1">
935
+ <div>
936
+ <p>5555</p>
937
+ <p>6666</p>
938
+ </div>
939
+ </td>
940
+ </tr>
941
+ </tbody>
942
+ </table>
943
+ </div>
944
+ <p><br></p>
945
+ `,
946
+ { ignoreAttrs: ['data-wrap-tag', 'data-tag', 'class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
947
+ );
948
+ });
949
+
950
+ it('clean handler should clean cell selectedTds style', () => {
951
+ const quill = createQuillWithTableModule('<p></p>', { modules: [{ module: TableSelection }] });
952
+ quill.setContents([
953
+ { insert: '\n' },
954
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
955
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
956
+ { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
957
+ { insert: '1' },
958
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
959
+ { insert: '2' },
960
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, style: 'border-bottom-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
961
+ { insert: '3' },
962
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
963
+ { insert: '4' },
964
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, style: 'border-right-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
965
+ { insert: '5' },
966
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, style: 'border-color: rgb(0, 247, 255); background-color: rgb(201, 16, 16);' } }, insert: '\n' },
967
+ { insert: '6' },
968
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
969
+ { insert: '7' },
970
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
971
+ { insert: '8' },
972
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
973
+ { insert: '9' },
974
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);' } }, insert: '\n' },
975
+ { insert: '\n' },
976
+ ]);
977
+
978
+ const tableUp = quill.getModule(TableUp.moduleName) as TableUp;
979
+ const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
980
+ const tableSelection = tableUp.getModule<TableSelection>('table-selection');
981
+ tableSelection!.table = quill.root.querySelector('table')!;
982
+ tableSelection!.setSelectedTds([tds[4]]);
983
+ quill.theme.modules.toolbar!.handlers!.clean.call(quill.theme.modules.toolbar as any, true);
984
+
985
+ expectDelta(
986
+ quill.getContents(),
987
+ new Delta([
988
+ { insert: '\n' },
989
+ { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
990
+ { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
991
+ { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
992
+ { insert: '1' },
993
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
994
+ { insert: '2' },
995
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
996
+ { insert: '3' },
997
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
998
+ { insert: '4' },
999
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1000
+ { insert: '5' },
1001
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1, tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1002
+ { insert: '6' },
1003
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1004
+ { insert: '7' },
1005
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1006
+ { insert: '8' },
1007
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1008
+ { insert: '9' },
1009
+ { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, style: 'background-color: rgb(201, 16, 16);', tag: 'td', wrapTag: 'tbody' } }, insert: '\n' },
1010
+ { insert: '\n' },
1011
+ ]),
1012
+ );
1013
+ });
1014
+ });