@atlaskit/editor-plugin-table 5.8.3 → 5.8.4
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.
- package/CHANGELOG.md +7 -0
- package/dist/cjs/ui/DragHandle/index.js +8 -3
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +2 -2
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +103 -12
- package/dist/cjs/ui/FloatingDragMenu/index.js +2 -2
- package/dist/es2019/ui/DragHandle/index.js +10 -3
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +2 -2
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +106 -11
- package/dist/es2019/ui/FloatingDragMenu/index.js +1 -1
- package/dist/esm/ui/DragHandle/index.js +8 -3
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +2 -2
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +102 -11
- package/dist/esm/ui/FloatingDragMenu/index.js +1 -1
- package/dist/types/ui/DragHandle/index.d.ts +5 -1
- package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts +7 -2
- package/dist/types/utils/drag-menu.d.ts +2 -1
- package/dist/types-ts4.5/ui/DragHandle/index.d.ts +5 -1
- package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts +7 -2
- package/dist/types-ts4.5/utils/drag-menu.d.ts +2 -1
- package/package.json +2 -2
- package/src/__tests__/unit/ui/FloatingDragMenu.tsx +129 -105
- package/src/ui/DragHandle/index.tsx +13 -2
- package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +2 -2
- package/src/ui/FloatingDragMenu/DragMenu.tsx +137 -12
- package/src/ui/FloatingDragMenu/index.tsx +1 -1
- package/src/utils/drag-menu.ts +17 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import { IntlProvider } from 'react-intl-next';
|
|
4
5
|
|
|
5
6
|
import { ReactEditorViewContext } from '@atlaskit/editor-common/ui-react';
|
|
6
7
|
// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
|
|
@@ -33,7 +34,7 @@ import {
|
|
|
33
34
|
import { ffTest } from '@atlassian/feature-flags-test-utils';
|
|
34
35
|
|
|
35
36
|
import tablePlugin from '../../../plugin';
|
|
36
|
-
import
|
|
37
|
+
import DragMenu from '../../../ui/FloatingDragMenu/DragMenu';
|
|
37
38
|
|
|
38
39
|
describe('FloatingDragMenu', () => {
|
|
39
40
|
const createEditor = createProsemirrorEditorFactory();
|
|
@@ -72,14 +73,17 @@ describe('FloatingDragMenu', () => {
|
|
|
72
73
|
editorRef,
|
|
73
74
|
}}
|
|
74
75
|
>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
{' '}
|
|
77
|
+
<IntlProvider locale="en">
|
|
78
|
+
<DragMenu
|
|
79
|
+
editorView={editorView}
|
|
80
|
+
isOpen={true}
|
|
81
|
+
getEditorContainerWidth={jest.fn()}
|
|
82
|
+
tableRef={tableRef as HTMLTableElement}
|
|
83
|
+
tableNode={tableNode?.node}
|
|
84
|
+
direction="row"
|
|
85
|
+
/>
|
|
86
|
+
</IntlProvider>
|
|
83
87
|
</ReactEditorViewContext.Provider>,
|
|
84
88
|
);
|
|
85
89
|
expect(screen.getAllByRole('menu')).toHaveLength(1);
|
|
@@ -97,14 +101,16 @@ describe('FloatingDragMenu', () => {
|
|
|
97
101
|
editorRef,
|
|
98
102
|
}}
|
|
99
103
|
>
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
104
|
+
<IntlProvider locale="en">
|
|
105
|
+
<DragMenu
|
|
106
|
+
editorView={editorView}
|
|
107
|
+
isOpen={true}
|
|
108
|
+
getEditorContainerWidth={jest.fn()}
|
|
109
|
+
tableRef={tableRef as HTMLTableElement}
|
|
110
|
+
tableNode={tableNode?.node}
|
|
111
|
+
direction="row"
|
|
112
|
+
/>
|
|
113
|
+
</IntlProvider>
|
|
108
114
|
</ReactEditorViewContext.Provider>,
|
|
109
115
|
);
|
|
110
116
|
expect(screen.getAllByRole('menu')).toHaveLength(2);
|
|
@@ -126,14 +132,16 @@ describe('FloatingDragMenu', () => {
|
|
|
126
132
|
}}
|
|
127
133
|
>
|
|
128
134
|
<div id="drag-handle-button-row">dragmenu anchor</div>
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
135
|
+
<IntlProvider locale="en">
|
|
136
|
+
<DragMenu
|
|
137
|
+
editorView={editorView}
|
|
138
|
+
isOpen={true}
|
|
139
|
+
getEditorContainerWidth={jest.fn()}
|
|
140
|
+
tableRef={tableRef as HTMLTableElement}
|
|
141
|
+
tableNode={tableNode?.node}
|
|
142
|
+
direction="row"
|
|
143
|
+
/>
|
|
144
|
+
</IntlProvider>
|
|
137
145
|
</ReactEditorViewContext.Provider>,
|
|
138
146
|
);
|
|
139
147
|
|
|
@@ -143,7 +151,7 @@ describe('FloatingDragMenu', () => {
|
|
|
143
151
|
Array [
|
|
144
152
|
"Add row aboveCtrl+Alt+↑",
|
|
145
153
|
"Add row belowCtrl+Alt+↓",
|
|
146
|
-
"Clear
|
|
154
|
+
"Clear cell⌫",
|
|
147
155
|
"Delete rowCtrl+⌫",
|
|
148
156
|
"Move row upCtrl+Alt+Shift+↑",
|
|
149
157
|
"Move row downCtrl+Alt+Shift+↓",
|
|
@@ -161,14 +169,16 @@ describe('FloatingDragMenu', () => {
|
|
|
161
169
|
editorRef,
|
|
162
170
|
}}
|
|
163
171
|
>
|
|
164
|
-
<
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
+
<IntlProvider locale="en">
|
|
173
|
+
<DragMenu
|
|
174
|
+
editorView={editorView}
|
|
175
|
+
isOpen={true}
|
|
176
|
+
getEditorContainerWidth={jest.fn()}
|
|
177
|
+
tableRef={tableRef as HTMLTableElement}
|
|
178
|
+
tableNode={tableNode?.node}
|
|
179
|
+
direction="column"
|
|
180
|
+
/>
|
|
181
|
+
</IntlProvider>
|
|
172
182
|
</ReactEditorViewContext.Provider>,
|
|
173
183
|
);
|
|
174
184
|
|
|
@@ -179,7 +189,7 @@ describe('FloatingDragMenu', () => {
|
|
|
179
189
|
"Add column leftCtrl+Alt+←",
|
|
180
190
|
"Add column rightCtrl+Alt+→",
|
|
181
191
|
"Distribute columns",
|
|
182
|
-
"Clear
|
|
192
|
+
"Clear cell⌫",
|
|
183
193
|
"Delete columnCtrl+⌫",
|
|
184
194
|
"Move column leftCtrl+Alt+Shift+←",
|
|
185
195
|
"Move column rightCtrl+Alt+Shift+→",
|
|
@@ -205,15 +215,17 @@ describe('FloatingDragMenu', () => {
|
|
|
205
215
|
}}
|
|
206
216
|
>
|
|
207
217
|
<div id="drag-handle-button-row">dragmenu anchor</div>
|
|
208
|
-
<
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
218
|
+
<IntlProvider locale="en">
|
|
219
|
+
<DragMenu
|
|
220
|
+
editorView={editorView}
|
|
221
|
+
isOpen={true}
|
|
222
|
+
getEditorContainerWidth={jest.fn()}
|
|
223
|
+
tableRef={tableRef as HTMLTableElement}
|
|
224
|
+
tableNode={tableNode?.node}
|
|
225
|
+
direction="row"
|
|
226
|
+
index={0}
|
|
227
|
+
/>
|
|
228
|
+
</IntlProvider>
|
|
217
229
|
</ReactEditorViewContext.Provider>,
|
|
218
230
|
);
|
|
219
231
|
|
|
@@ -223,7 +235,7 @@ describe('FloatingDragMenu', () => {
|
|
|
223
235
|
Array [
|
|
224
236
|
"Add row aboveCtrl+Alt+↑",
|
|
225
237
|
"Add row belowCtrl+Alt+↓",
|
|
226
|
-
"Clear
|
|
238
|
+
"Clear cell⌫",
|
|
227
239
|
"Delete rowCtrl+⌫",
|
|
228
240
|
"Move row upCtrl+Alt+Shift+↑",
|
|
229
241
|
"Move row downCtrl+Alt+Shift+↓",
|
|
@@ -245,15 +257,17 @@ describe('FloatingDragMenu', () => {
|
|
|
245
257
|
}}
|
|
246
258
|
>
|
|
247
259
|
<div id="drag-handle-button-row">dragmenu anchor</div>
|
|
248
|
-
<
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
260
|
+
<IntlProvider locale="en">
|
|
261
|
+
<DragMenu
|
|
262
|
+
editorView={editorView}
|
|
263
|
+
isOpen={true}
|
|
264
|
+
getEditorContainerWidth={jest.fn()}
|
|
265
|
+
tableRef={tableRef as HTMLTableElement}
|
|
266
|
+
tableNode={tableNode?.node}
|
|
267
|
+
direction="row"
|
|
268
|
+
index={0}
|
|
269
|
+
/>
|
|
270
|
+
</IntlProvider>
|
|
257
271
|
</ReactEditorViewContext.Provider>,
|
|
258
272
|
);
|
|
259
273
|
|
|
@@ -263,7 +277,7 @@ describe('FloatingDragMenu', () => {
|
|
|
263
277
|
Array [
|
|
264
278
|
"Add row aboveCtrl+Alt+↑",
|
|
265
279
|
"Add row belowCtrl+Alt+↓",
|
|
266
|
-
"Clear
|
|
280
|
+
"Clear cell⌫",
|
|
267
281
|
"Delete rowCtrl+⌫",
|
|
268
282
|
"Move row upCtrl+Alt+Shift+↑",
|
|
269
283
|
"Move row downCtrl+Alt+Shift+↓",
|
|
@@ -288,15 +302,17 @@ describe('FloatingDragMenu', () => {
|
|
|
288
302
|
}}
|
|
289
303
|
>
|
|
290
304
|
<div id="drag-handle-button-row">dragmenu anchor</div>
|
|
291
|
-
<
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
305
|
+
<IntlProvider locale="en">
|
|
306
|
+
<DragMenu
|
|
307
|
+
editorView={editorView}
|
|
308
|
+
isOpen={true}
|
|
309
|
+
getEditorContainerWidth={jest.fn()}
|
|
310
|
+
tableRef={tableRef as HTMLTableElement}
|
|
311
|
+
tableNode={tableNode?.node}
|
|
312
|
+
direction="row"
|
|
313
|
+
index={1}
|
|
314
|
+
/>
|
|
315
|
+
</IntlProvider>
|
|
300
316
|
</ReactEditorViewContext.Provider>,
|
|
301
317
|
);
|
|
302
318
|
|
|
@@ -306,7 +322,7 @@ describe('FloatingDragMenu', () => {
|
|
|
306
322
|
Array [
|
|
307
323
|
"Add row aboveCtrl+Alt+↑",
|
|
308
324
|
"Add row belowCtrl+Alt+↓",
|
|
309
|
-
"Clear
|
|
325
|
+
"Clear cell⌫",
|
|
310
326
|
"Delete rowCtrl+⌫",
|
|
311
327
|
"Move row upCtrl+Alt+Shift+↑",
|
|
312
328
|
"Move row downCtrl+Alt+Shift+↓",
|
|
@@ -327,15 +343,17 @@ describe('FloatingDragMenu', () => {
|
|
|
327
343
|
}}
|
|
328
344
|
>
|
|
329
345
|
<div id="drag-handle-button-row">dragmenu anchor</div>
|
|
330
|
-
<
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
346
|
+
<IntlProvider locale="en">
|
|
347
|
+
<DragMenu
|
|
348
|
+
editorView={editorView}
|
|
349
|
+
isOpen={true}
|
|
350
|
+
getEditorContainerWidth={jest.fn()}
|
|
351
|
+
tableRef={tableRef as HTMLTableElement}
|
|
352
|
+
tableNode={tableNode?.node}
|
|
353
|
+
direction="row"
|
|
354
|
+
index={1}
|
|
355
|
+
/>
|
|
356
|
+
</IntlProvider>
|
|
339
357
|
</ReactEditorViewContext.Provider>,
|
|
340
358
|
);
|
|
341
359
|
|
|
@@ -345,7 +363,7 @@ describe('FloatingDragMenu', () => {
|
|
|
345
363
|
Array [
|
|
346
364
|
"Add row aboveCtrl+Alt+↑",
|
|
347
365
|
"Add row belowCtrl+Alt+↓",
|
|
348
|
-
"Clear
|
|
366
|
+
"Clear cell⌫",
|
|
349
367
|
"Delete rowCtrl+⌫",
|
|
350
368
|
"Move row upCtrl+Alt+Shift+↑",
|
|
351
369
|
"Move row downCtrl+Alt+Shift+↓",
|
|
@@ -370,15 +388,17 @@ describe('FloatingDragMenu', () => {
|
|
|
370
388
|
}}
|
|
371
389
|
>
|
|
372
390
|
<div id="drag-handle-button-row">dragmenu anchor</div>
|
|
373
|
-
<
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
391
|
+
<IntlProvider locale="en">
|
|
392
|
+
<DragMenu
|
|
393
|
+
editorView={editorView}
|
|
394
|
+
isOpen={true}
|
|
395
|
+
getEditorContainerWidth={jest.fn()}
|
|
396
|
+
tableRef={tableRef as HTMLTableElement}
|
|
397
|
+
tableNode={tableNode?.node}
|
|
398
|
+
direction="column"
|
|
399
|
+
index={0}
|
|
400
|
+
/>
|
|
401
|
+
</IntlProvider>
|
|
382
402
|
</ReactEditorViewContext.Provider>,
|
|
383
403
|
);
|
|
384
404
|
|
|
@@ -389,7 +409,7 @@ describe('FloatingDragMenu', () => {
|
|
|
389
409
|
"Add column leftCtrl+Alt+←",
|
|
390
410
|
"Add column rightCtrl+Alt+→",
|
|
391
411
|
"Distribute columns",
|
|
392
|
-
"Clear
|
|
412
|
+
"Clear cell⌫",
|
|
393
413
|
"Delete columnCtrl+⌫",
|
|
394
414
|
"Move column leftCtrl+Alt+Shift+←",
|
|
395
415
|
"Move column rightCtrl+Alt+Shift+→",
|
|
@@ -412,15 +432,17 @@ describe('FloatingDragMenu', () => {
|
|
|
412
432
|
}}
|
|
413
433
|
>
|
|
414
434
|
<div id="drag-handle-button-row">dragmenu anchor</div>
|
|
415
|
-
<
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
435
|
+
<IntlProvider locale="en">
|
|
436
|
+
<DragMenu
|
|
437
|
+
editorView={editorView}
|
|
438
|
+
isOpen={true}
|
|
439
|
+
getEditorContainerWidth={jest.fn()}
|
|
440
|
+
tableRef={tableRef as HTMLTableElement}
|
|
441
|
+
tableNode={tableNode?.node}
|
|
442
|
+
direction="column"
|
|
443
|
+
index={0}
|
|
444
|
+
/>
|
|
445
|
+
</IntlProvider>
|
|
424
446
|
</ReactEditorViewContext.Provider>,
|
|
425
447
|
);
|
|
426
448
|
|
|
@@ -431,7 +453,7 @@ describe('FloatingDragMenu', () => {
|
|
|
431
453
|
"Add column leftCtrl+Alt+←",
|
|
432
454
|
"Add column rightCtrl+Alt+→",
|
|
433
455
|
"Distribute columns",
|
|
434
|
-
"Clear
|
|
456
|
+
"Clear cell⌫",
|
|
435
457
|
"Delete columnCtrl+⌫",
|
|
436
458
|
"Move column leftCtrl+Alt+Shift+←",
|
|
437
459
|
"Move column rightCtrl+Alt+Shift+→",
|
|
@@ -455,15 +477,17 @@ describe('FloatingDragMenu', () => {
|
|
|
455
477
|
}}
|
|
456
478
|
>
|
|
457
479
|
<div id="drag-handle-button-row">dragmenu anchor</div>
|
|
458
|
-
<
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
480
|
+
<IntlProvider locale="en">
|
|
481
|
+
<DragMenu
|
|
482
|
+
editorView={editorView}
|
|
483
|
+
isOpen={true}
|
|
484
|
+
getEditorContainerWidth={jest.fn()}
|
|
485
|
+
tableRef={tableRef as HTMLTableElement}
|
|
486
|
+
tableNode={tableNode?.node}
|
|
487
|
+
direction="column"
|
|
488
|
+
index={1}
|
|
489
|
+
/>
|
|
490
|
+
</IntlProvider>
|
|
467
491
|
</ReactEditorViewContext.Provider>,
|
|
468
492
|
);
|
|
469
493
|
|
|
@@ -474,7 +498,7 @@ describe('FloatingDragMenu', () => {
|
|
|
474
498
|
"Add column leftCtrl+Alt+←",
|
|
475
499
|
"Add column rightCtrl+Alt+→",
|
|
476
500
|
"Distribute columns",
|
|
477
|
-
"Clear
|
|
501
|
+
"Clear cell⌫",
|
|
478
502
|
"Delete columnCtrl+⌫",
|
|
479
503
|
"Move column leftCtrl+Alt+Shift+←",
|
|
480
504
|
"Move column rightCtrl+Alt+Shift+→",
|
|
@@ -3,7 +3,10 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
|
3
3
|
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import ReactDOM from 'react-dom';
|
|
6
|
+
import type { WrappedComponentProps } from 'react-intl-next';
|
|
7
|
+
import { injectIntl } from 'react-intl-next';
|
|
6
8
|
|
|
9
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
7
10
|
import { browser } from '@atlaskit/editor-common/utils';
|
|
8
11
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
9
12
|
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
|
|
@@ -36,7 +39,7 @@ type DragHandleProps = {
|
|
|
36
39
|
isDragMenuTarget: boolean; // this is identify which current handle component is
|
|
37
40
|
};
|
|
38
41
|
|
|
39
|
-
|
|
42
|
+
const DragHandleComponent = ({
|
|
40
43
|
isDragMenuTarget,
|
|
41
44
|
tableLocalId,
|
|
42
45
|
direction = 'row',
|
|
@@ -51,7 +54,8 @@ export const DragHandle = ({
|
|
|
51
54
|
onClick,
|
|
52
55
|
editorView,
|
|
53
56
|
canDrag = false,
|
|
54
|
-
|
|
57
|
+
intl: { formatMessage },
|
|
58
|
+
}: DragHandleProps & WrappedComponentProps) => {
|
|
55
59
|
const dragHandleDivRef = useRef<HTMLButtonElement>(null);
|
|
56
60
|
const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(
|
|
57
61
|
null,
|
|
@@ -154,6 +158,11 @@ export const DragHandle = ({
|
|
|
154
158
|
transform: direction === 'column' ? 'none' : 'rotate(90deg)',
|
|
155
159
|
}}
|
|
156
160
|
data-testid="table-drag-handle-button"
|
|
161
|
+
aria-label={formatMessage(
|
|
162
|
+
direction === 'row'
|
|
163
|
+
? messages.rowDragHandle
|
|
164
|
+
: messages.columnDragHandle,
|
|
165
|
+
)}
|
|
157
166
|
onMouseOver={onMouseOver}
|
|
158
167
|
onMouseOut={onMouseOut}
|
|
159
168
|
onMouseUp={(e) => {
|
|
@@ -187,3 +196,5 @@ export const DragHandle = ({
|
|
|
187
196
|
</>
|
|
188
197
|
);
|
|
189
198
|
};
|
|
199
|
+
|
|
200
|
+
export const DragHandle = injectIntl(DragHandleComponent);
|
|
@@ -303,7 +303,7 @@ export class ContextualMenu extends Component<
|
|
|
303
303
|
content: formatMessage(
|
|
304
304
|
isDragAndDropEnabled &&
|
|
305
305
|
getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
|
|
306
|
-
? messages.
|
|
306
|
+
? messages.addColumnRight
|
|
307
307
|
: messages.insertColumn,
|
|
308
308
|
),
|
|
309
309
|
value: { name: 'insert_column' },
|
|
@@ -327,7 +327,7 @@ export class ContextualMenu extends Component<
|
|
|
327
327
|
content: formatMessage(
|
|
328
328
|
isDragAndDropEnabled &&
|
|
329
329
|
getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
|
|
330
|
-
? messages.
|
|
330
|
+
? messages.addRowBelow
|
|
331
331
|
: messages.insertRow,
|
|
332
332
|
),
|
|
333
333
|
value: { name: 'insert_row' },
|