@atlaskit/editor-plugin-table 5.3.17 → 5.3.19
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 +12 -0
- package/dist/cjs/plugins/table/nodeviews/TableResizer.js +2 -8
- package/dist/cjs/plugins/table/toolbar.js +29 -56
- package/dist/cjs/plugins/table/ui/ColumnResizeWidget/index.js +2 -2
- package/dist/cjs/plugins/table/ui/FloatingContextualButton/index.js +2 -2
- package/dist/cjs/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +14 -56
- package/dist/cjs/plugins/table/ui/FloatingDeleteButton/index.js +2 -2
- package/dist/cjs/plugins/table/ui/FloatingInsertButton/InsertButton.js +2 -2
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +2 -2
- package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -2
- package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +2 -8
- package/dist/es2019/plugins/table/nodeviews/TableResizer.js +2 -8
- package/dist/es2019/plugins/table/toolbar.js +20 -50
- package/dist/es2019/plugins/table/ui/ColumnResizeWidget/index.js +1 -1
- package/dist/es2019/plugins/table/ui/FloatingContextualButton/index.js +1 -1
- package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +6 -48
- package/dist/es2019/plugins/table/ui/FloatingDeleteButton/index.js +2 -2
- package/dist/es2019/plugins/table/ui/FloatingInsertButton/InsertButton.js +2 -2
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +1 -1
- package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +1 -1
- package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +2 -8
- package/dist/esm/plugins/table/nodeviews/TableResizer.js +2 -8
- package/dist/esm/plugins/table/toolbar.js +20 -50
- package/dist/esm/plugins/table/ui/ColumnResizeWidget/index.js +1 -1
- package/dist/esm/plugins/table/ui/FloatingContextualButton/index.js +1 -1
- package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js +6 -48
- package/dist/esm/plugins/table/ui/FloatingDeleteButton/index.js +2 -2
- package/dist/esm/plugins/table/ui/FloatingInsertButton/InsertButton.js +2 -2
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +1 -1
- package/dist/esm/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js +1 -1
- package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.js +2 -8
- package/dist/types/plugins/table/toolbar.d.ts +0 -27
- package/dist/types/plugins/table/ui/FloatingContextualButton/index.d.ts +5 -5
- package/dist/types/plugins/table/ui/FloatingContextualMenu/ContextualMenu.d.ts +0 -42
- package/dist/types-ts4.5/plugins/table/toolbar.d.ts +0 -27
- package/dist/types-ts4.5/plugins/table/ui/FloatingContextualButton/index.d.ts +5 -5
- package/dist/types-ts4.5/plugins/table/ui/FloatingContextualMenu/ContextualMenu.d.ts +0 -42
- package/package.json +2 -2
- package/src/__tests__/integration/delete-columns.ts +1 -1
- package/src/__tests__/integration/delete-rows.ts +1 -1
- package/src/__tests__/unit/ui/DeleteButton.tsx +4 -3
- package/src/plugins/table/nodeviews/TableResizer.tsx +2 -9
- package/src/plugins/table/toolbar.tsx +22 -53
- package/src/plugins/table/ui/ColumnResizeWidget/index.tsx +1 -1
- package/src/plugins/table/ui/FloatingContextualButton/index.tsx +10 -11
- package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx +6 -50
- package/src/plugins/table/ui/FloatingDeleteButton/index.tsx +3 -3
- package/src/plugins/table/ui/FloatingInsertButton/InsertButton.tsx +2 -2
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +1 -1
- package/src/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +1 -1
- package/src/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.tsx +2 -10
- package/dist/cjs/plugins/table/ui/messages.js +0 -74
- package/dist/es2019/plugins/table/ui/messages.js +0 -68
- package/dist/esm/plugins/table/ui/messages.js +0 -68
- package/dist/types/plugins/table/ui/messages.d.ts +0 -68
- package/dist/types-ts4.5/plugins/table/ui/messages.d.ts +0 -68
- package/src/plugins/table/ui/messages.ts +0 -74
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { jsx } from '@emotion/react';
|
|
3
|
-
import { defineMessages } from 'react-intl-next';
|
|
4
3
|
|
|
5
4
|
import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
6
5
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
@@ -11,7 +10,9 @@ import {
|
|
|
11
10
|
backspace,
|
|
12
11
|
tooltip,
|
|
13
12
|
} from '@atlaskit/editor-common/keymaps';
|
|
14
|
-
import commonMessages
|
|
13
|
+
import commonMessages, {
|
|
14
|
+
tableMessages as messages,
|
|
15
|
+
} from '@atlaskit/editor-common/messages';
|
|
15
16
|
import type {
|
|
16
17
|
Command,
|
|
17
18
|
CommandDispatch,
|
|
@@ -87,42 +88,12 @@ import type {
|
|
|
87
88
|
ToolbarMenuState,
|
|
88
89
|
} from './types';
|
|
89
90
|
import { TableCssClassName } from './types';
|
|
90
|
-
import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
|
|
91
|
-
import tableMessages from './ui/messages';
|
|
92
91
|
import {
|
|
93
92
|
getMergedCellsPositions,
|
|
94
93
|
getSelectedColumnIndexes,
|
|
95
94
|
getSelectedRowIndexes,
|
|
96
95
|
} from './utils';
|
|
97
96
|
|
|
98
|
-
export const messages = defineMessages({
|
|
99
|
-
tableOptions: {
|
|
100
|
-
id: 'fabric.editor.tableOptions',
|
|
101
|
-
defaultMessage: 'Table options',
|
|
102
|
-
description: 'Opens a menu with additional table options',
|
|
103
|
-
},
|
|
104
|
-
headerRow: {
|
|
105
|
-
id: 'fabric.editor.headerRow',
|
|
106
|
-
defaultMessage: 'Header row',
|
|
107
|
-
description: 'Marks the first table row as a header row',
|
|
108
|
-
},
|
|
109
|
-
headerColumn: {
|
|
110
|
-
id: 'fabric.editor.headerColumn',
|
|
111
|
-
defaultMessage: 'Header column',
|
|
112
|
-
description: 'Marks the first table column as a header row',
|
|
113
|
-
},
|
|
114
|
-
numberedColumn: {
|
|
115
|
-
id: 'fabric.editor.numberedColumn',
|
|
116
|
-
defaultMessage: 'Numbered column',
|
|
117
|
-
description: 'Adds an auto-numbering column to your table',
|
|
118
|
-
},
|
|
119
|
-
collapseTable: {
|
|
120
|
-
id: 'fabric.editor.collapseTable',
|
|
121
|
-
defaultMessage: 'Collapse table',
|
|
122
|
-
description: 'Wraps table in an expand',
|
|
123
|
-
},
|
|
124
|
-
});
|
|
125
|
-
|
|
126
97
|
export const getToolbarMenuConfig = (
|
|
127
98
|
config: ToolbarMenuConfig,
|
|
128
99
|
state: ToolbarMenuState,
|
|
@@ -190,7 +161,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
190
161
|
const options: DropdownOptionT<Command>[] = [
|
|
191
162
|
{
|
|
192
163
|
id: 'editor.table.insertColumn',
|
|
193
|
-
title: formatMessage(
|
|
164
|
+
title: formatMessage(messages.insertColumn),
|
|
194
165
|
onClick: (
|
|
195
166
|
state: EditorState,
|
|
196
167
|
dispatch?: CommandDispatch,
|
|
@@ -212,7 +183,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
212
183
|
},
|
|
213
184
|
{
|
|
214
185
|
id: 'editor.table.insertRow',
|
|
215
|
-
title: formatMessage(
|
|
186
|
+
title: formatMessage(messages.insertRow),
|
|
216
187
|
onClick: (state: EditorState, dispatch?: CommandDispatch) => {
|
|
217
188
|
const selectionRect = getClosestSelectionRect(state);
|
|
218
189
|
const index = selectionRect?.bottom;
|
|
@@ -230,7 +201,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
230
201
|
},
|
|
231
202
|
{
|
|
232
203
|
id: 'editor.table.removeColumns',
|
|
233
|
-
title: formatMessage(
|
|
204
|
+
title: formatMessage(messages.removeColumns, {
|
|
234
205
|
0: numberOfColumns,
|
|
235
206
|
}),
|
|
236
207
|
onClick: (
|
|
@@ -256,7 +227,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
256
227
|
},
|
|
257
228
|
{
|
|
258
229
|
id: 'editor.table.removeRows',
|
|
259
|
-
title: formatMessage(
|
|
230
|
+
title: formatMessage(messages.removeRows, {
|
|
260
231
|
0: numberOfRows,
|
|
261
232
|
}),
|
|
262
233
|
onClick: (state: EditorState, dispatch?: CommandDispatch) => {
|
|
@@ -279,7 +250,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
279
250
|
},
|
|
280
251
|
{
|
|
281
252
|
id: 'editor.table.mergeCells',
|
|
282
|
-
title: formatMessage(
|
|
253
|
+
title: formatMessage(messages.mergeCells),
|
|
283
254
|
onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(
|
|
284
255
|
INPUT_METHOD.FLOATING_TB,
|
|
285
256
|
),
|
|
@@ -288,7 +259,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
288
259
|
},
|
|
289
260
|
{
|
|
290
261
|
id: 'editor.table.splitCell',
|
|
291
|
-
title: formatMessage(
|
|
262
|
+
title: formatMessage(messages.splitCell),
|
|
292
263
|
onClick: splitCellWithAnalytics(editorAnalyticsAPI)(
|
|
293
264
|
INPUT_METHOD.FLOATING_TB,
|
|
294
265
|
),
|
|
@@ -321,7 +292,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
321
292
|
|
|
322
293
|
options.push({
|
|
323
294
|
id: 'editor.table.distributeColumns',
|
|
324
|
-
title: formatMessage(
|
|
295
|
+
title: formatMessage(messages.distributeColumns),
|
|
325
296
|
onClick: distributeColumnWidths,
|
|
326
297
|
selected: false,
|
|
327
298
|
disabled: !wouldChange,
|
|
@@ -332,12 +303,12 @@ export const getToolbarCellOptionsConfig = (
|
|
|
332
303
|
const hasMergedCellsInTable =
|
|
333
304
|
getMergedCellsPositions(editorState.tr).length > 0;
|
|
334
305
|
const warning = hasMergedCellsInTable
|
|
335
|
-
? formatMessage(
|
|
306
|
+
? formatMessage(messages.canNotSortTable)
|
|
336
307
|
: undefined;
|
|
337
308
|
|
|
338
309
|
options.push({
|
|
339
310
|
id: 'editor.table.sortColumnAsc',
|
|
340
|
-
title: formatMessage(
|
|
311
|
+
title: formatMessage(messages.sortColumnASC),
|
|
341
312
|
onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
|
|
342
313
|
if (getMergedCellsPositions(state.tr).length !== 0) {
|
|
343
314
|
hoverMergedCells()(state, dispatch);
|
|
@@ -364,7 +335,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
364
335
|
|
|
365
336
|
options.push({
|
|
366
337
|
id: 'editor.table.sortColumnDesc',
|
|
367
|
-
title: formatMessage(
|
|
338
|
+
title: formatMessage(messages.sortColumnDESC),
|
|
368
339
|
onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
|
|
369
340
|
if (getMergedCellsPositions(state.tr).length !== 0) {
|
|
370
341
|
hoverMergedCells()(state, dispatch);
|
|
@@ -392,7 +363,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
392
363
|
|
|
393
364
|
options.push({
|
|
394
365
|
id: 'editor.table.clearCells',
|
|
395
|
-
title: formatMessage(
|
|
366
|
+
title: formatMessage(messages.clearCells, {
|
|
396
367
|
0: Math.max(numberOfColumns, numberOfRows),
|
|
397
368
|
}),
|
|
398
369
|
onClick: (state: EditorState, dispatch?: CommandDispatch) => {
|
|
@@ -412,7 +383,7 @@ export const getToolbarCellOptionsConfig = (
|
|
|
412
383
|
id: 'editor.table.cellOptions',
|
|
413
384
|
testId: 'cell_options',
|
|
414
385
|
type: 'dropdown',
|
|
415
|
-
title: formatMessage(
|
|
386
|
+
title: formatMessage(messages.cellOptions),
|
|
416
387
|
options,
|
|
417
388
|
// Increased dropdown item width to prevent labels from being truncated
|
|
418
389
|
dropdownWidth: 230,
|
|
@@ -469,27 +440,25 @@ export const getToolbarConfig =
|
|
|
469
440
|
let confirmDialog;
|
|
470
441
|
|
|
471
442
|
if (isReferencedSource(state, tableObject.node)) {
|
|
472
|
-
const localSourceName = intl.formatMessage(
|
|
443
|
+
const localSourceName = intl.formatMessage(messages.unnamedSource);
|
|
473
444
|
|
|
474
445
|
confirmDialog = (): ConfirmDialogOptions => ({
|
|
475
|
-
title: intl.formatMessage(
|
|
446
|
+
title: intl.formatMessage(messages.deleteElementTitle),
|
|
476
447
|
okButtonLabel: intl.formatMessage(
|
|
477
|
-
|
|
448
|
+
messages.confirmDeleteLinkedModalOKButton,
|
|
478
449
|
),
|
|
479
450
|
message: intl.formatMessage(
|
|
480
|
-
|
|
451
|
+
messages.confirmDeleteLinkedModalMessage,
|
|
481
452
|
{
|
|
482
453
|
nodeName: getNodeName(state, tableObject.node) || localSourceName,
|
|
483
454
|
},
|
|
484
455
|
),
|
|
485
456
|
messagePrefix: intl.formatMessage(
|
|
486
|
-
|
|
457
|
+
messages.confirmDeleteLinkedModalMessagePrefix,
|
|
487
458
|
),
|
|
488
459
|
isReferentialityDialog: true,
|
|
489
460
|
getChildrenInfo: () => getChildrenInfo(state, tableObject.node),
|
|
490
|
-
checkboxLabel: intl.formatMessage(
|
|
491
|
-
tableMessages.confirmModalCheckboxLabel,
|
|
492
|
-
),
|
|
461
|
+
checkboxLabel: intl.formatMessage(messages.confirmModalCheckboxLabel),
|
|
493
462
|
onConfirm: (isChecked = false) =>
|
|
494
463
|
clickWithCheckboxHandler(isChecked, tableObject.node),
|
|
495
464
|
});
|
|
@@ -628,7 +597,7 @@ const getColorPicker = (
|
|
|
628
597
|
return [
|
|
629
598
|
{
|
|
630
599
|
id: 'editor.table.colorPicker',
|
|
631
|
-
title: formatMessage(
|
|
600
|
+
title: formatMessage(messages.cellBackground),
|
|
632
601
|
type: 'select',
|
|
633
602
|
selectType: 'color',
|
|
634
603
|
defaultValue: defaultPalette,
|
|
@@ -4,10 +4,10 @@ import React from 'react';
|
|
|
4
4
|
import { jsx } from '@emotion/react';
|
|
5
5
|
import { useIntl } from 'react-intl-next';
|
|
6
6
|
|
|
7
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
7
8
|
import Tooltip from '@atlaskit/tooltip';
|
|
8
9
|
|
|
9
10
|
import { TableCssClassName } from '../../types';
|
|
10
|
-
import messages from '../messages';
|
|
11
11
|
|
|
12
12
|
type Props = {
|
|
13
13
|
startIndex: number;
|
|
@@ -2,27 +2,26 @@
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
4
|
import { jsx } from '@emotion/react';
|
|
5
|
-
import {
|
|
5
|
+
import type { WrappedComponentProps } from 'react-intl-next';
|
|
6
|
+
import { injectIntl } from 'react-intl-next';
|
|
6
7
|
|
|
7
|
-
import { TableLayout } from '@atlaskit/adf-schema';
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
DispatchAnalyticsEvent,
|
|
11
|
-
} from '@atlaskit/editor-common/analytics';
|
|
8
|
+
import type { TableLayout } from '@atlaskit/adf-schema';
|
|
9
|
+
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
10
|
+
import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
|
|
12
11
|
import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
|
|
12
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
13
13
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
14
14
|
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
15
|
-
import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
15
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
16
16
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
17
|
-
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
17
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
18
18
|
import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
|
|
19
19
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
20
|
-
import { ThemeProps } from '@atlaskit/theme/types';
|
|
20
|
+
import type { ThemeProps } from '@atlaskit/theme/types';
|
|
21
21
|
|
|
22
22
|
import { toggleContextualMenu } from '../../commands';
|
|
23
|
-
import { RowStickyState } from '../../pm-plugins/sticky-headers';
|
|
23
|
+
import type { RowStickyState } from '../../pm-plugins/sticky-headers';
|
|
24
24
|
import { TableCssClassName as ClassName } from '../../types';
|
|
25
|
-
import messages from '../../ui/messages';
|
|
26
25
|
|
|
27
26
|
import FixedButton from './FixedButton';
|
|
28
27
|
import {
|
|
@@ -3,7 +3,7 @@ import { Component } from 'react';
|
|
|
3
3
|
|
|
4
4
|
import { jsx } from '@emotion/react';
|
|
5
5
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
6
|
-
import {
|
|
6
|
+
import { injectIntl } from 'react-intl-next';
|
|
7
7
|
|
|
8
8
|
type DropdownItem = MenuItem & {
|
|
9
9
|
value: {
|
|
@@ -20,6 +20,7 @@ import {
|
|
|
20
20
|
backspace,
|
|
21
21
|
tooltip,
|
|
22
22
|
} from '@atlaskit/editor-common/keymaps';
|
|
23
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
23
24
|
import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
24
25
|
import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
25
26
|
import {
|
|
@@ -68,54 +69,9 @@ import {
|
|
|
68
69
|
getSelectedRowIndexes,
|
|
69
70
|
} from '../../utils';
|
|
70
71
|
import { contextualMenuDropdownWidth } from '../consts';
|
|
71
|
-
import tableMessages from '../messages';
|
|
72
72
|
|
|
73
73
|
import { cellColourPreviewStyles } from './styles';
|
|
74
74
|
|
|
75
|
-
export const messages = defineMessages({
|
|
76
|
-
cellBackground: {
|
|
77
|
-
id: 'fabric.editor.cellBackground',
|
|
78
|
-
defaultMessage: 'Cell background',
|
|
79
|
-
description: 'Change the background color of a table cell.',
|
|
80
|
-
},
|
|
81
|
-
mergeCells: {
|
|
82
|
-
id: 'fabric.editor.mergeCells',
|
|
83
|
-
defaultMessage: 'Merge cells',
|
|
84
|
-
description: 'Merge tables cells together.',
|
|
85
|
-
},
|
|
86
|
-
splitCell: {
|
|
87
|
-
id: 'fabric.editor.splitCell',
|
|
88
|
-
defaultMessage: 'Split cell',
|
|
89
|
-
description: 'Split a merged table cell.',
|
|
90
|
-
},
|
|
91
|
-
clearCells: {
|
|
92
|
-
id: 'fabric.editor.clearCells',
|
|
93
|
-
defaultMessage: 'Clear {0, plural, one {cell} other {cells}}',
|
|
94
|
-
description:
|
|
95
|
-
'Clears the contents of the selected cells (this does not delete the cells themselves).',
|
|
96
|
-
},
|
|
97
|
-
sortColumnASC: {
|
|
98
|
-
id: 'fabric.editor.sortColumnASC',
|
|
99
|
-
defaultMessage: 'Sort column A → Z',
|
|
100
|
-
description: 'Sort column in ascending order',
|
|
101
|
-
},
|
|
102
|
-
sortColumnDESC: {
|
|
103
|
-
id: 'fabric.editor.sortColumnDESC',
|
|
104
|
-
defaultMessage: 'Sort column Z → A',
|
|
105
|
-
description: 'Sort column in descending order',
|
|
106
|
-
},
|
|
107
|
-
canNotSortTable: {
|
|
108
|
-
id: 'fabric.editor.canNotSortTable',
|
|
109
|
-
defaultMessage: `⚠️ You can't sort a table with merged cells`,
|
|
110
|
-
description: `Split your cells to enable this feature`,
|
|
111
|
-
},
|
|
112
|
-
distributeColumns: {
|
|
113
|
-
id: 'fabric.editor.distributeColumns',
|
|
114
|
-
defaultMessage: `Distribute columns`,
|
|
115
|
-
description: `Distribute widths between selected columns`,
|
|
116
|
-
},
|
|
117
|
-
});
|
|
118
|
-
|
|
119
75
|
export interface Props {
|
|
120
76
|
editorView: EditorView;
|
|
121
77
|
isOpen: boolean;
|
|
@@ -257,13 +213,13 @@ export class ContextualMenu extends Component<
|
|
|
257
213
|
}
|
|
258
214
|
|
|
259
215
|
items.push({
|
|
260
|
-
content: formatMessage(
|
|
216
|
+
content: formatMessage(messages.insertColumn),
|
|
261
217
|
value: { name: 'insert_column' },
|
|
262
218
|
elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
|
|
263
219
|
});
|
|
264
220
|
|
|
265
221
|
items.push({
|
|
266
|
-
content: formatMessage(
|
|
222
|
+
content: formatMessage(messages.insertRow),
|
|
267
223
|
value: { name: 'insert_row' },
|
|
268
224
|
elemAfter: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
|
|
269
225
|
});
|
|
@@ -273,14 +229,14 @@ export class ContextualMenu extends Component<
|
|
|
273
229
|
const noOfRows = bottom - top;
|
|
274
230
|
|
|
275
231
|
items.push({
|
|
276
|
-
content: formatMessage(
|
|
232
|
+
content: formatMessage(messages.removeColumns, {
|
|
277
233
|
0: noOfColumns,
|
|
278
234
|
}),
|
|
279
235
|
value: { name: 'delete_column' },
|
|
280
236
|
});
|
|
281
237
|
|
|
282
238
|
items.push({
|
|
283
|
-
content: formatMessage(
|
|
239
|
+
content: formatMessage(messages.removeRows, {
|
|
284
240
|
0: noOfRows,
|
|
285
241
|
}),
|
|
286
242
|
value: { name: 'delete_row' },
|
|
@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
|
|
|
5
5
|
|
|
6
6
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
7
7
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
8
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
8
9
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
9
10
|
import { closestElement } from '@atlaskit/editor-common/utils';
|
|
10
11
|
import type { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -32,7 +33,6 @@ import {
|
|
|
32
33
|
getRowHeights,
|
|
33
34
|
} from '../../utils';
|
|
34
35
|
import { stickyRowZIndex } from '../consts';
|
|
35
|
-
import tableMessages from '../messages';
|
|
36
36
|
|
|
37
37
|
import DeleteButton from './DeleteButton';
|
|
38
38
|
import getPopupOptions from './getPopUpOptions';
|
|
@@ -314,8 +314,8 @@ class FloatingDeleteButton extends Component<Props, State> {
|
|
|
314
314
|
<DeleteButton
|
|
315
315
|
removeLabel={
|
|
316
316
|
selectionType === 'column'
|
|
317
|
-
?
|
|
318
|
-
:
|
|
317
|
+
? messages.removeColumns
|
|
318
|
+
: messages.removeRows
|
|
319
319
|
}
|
|
320
320
|
onClick={this.handleClick}
|
|
321
321
|
onMouseEnter={this.handleMouseEnter}
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
addRowAfter,
|
|
11
11
|
ToolTipContent,
|
|
12
12
|
} from '@atlaskit/editor-common/keymaps';
|
|
13
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
13
14
|
import { tableMarginTop } from '@atlaskit/editor-common/styles';
|
|
14
15
|
import { closestElement } from '@atlaskit/editor-common/utils';
|
|
15
16
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
@@ -18,7 +19,6 @@ import Tooltip from '@atlaskit/tooltip';
|
|
|
18
19
|
import type { TableDirection } from '../../types';
|
|
19
20
|
import { TableCssClassName as ClassName } from '../../types';
|
|
20
21
|
import { tableToolbarSize } from '../consts';
|
|
21
|
-
import tableMessages from '../messages';
|
|
22
22
|
|
|
23
23
|
export interface ButtonProps {
|
|
24
24
|
type: TableDirection;
|
|
@@ -75,7 +75,7 @@ const getInsertLineWidth = (
|
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
const tooltipMessageByType = (type: TableDirection) => {
|
|
78
|
-
return type === 'row' ?
|
|
78
|
+
return type === 'row' ? messages.insertRow : messages.insertColumn;
|
|
79
79
|
};
|
|
80
80
|
|
|
81
81
|
export const InsertButtonForDragAndDrop = ({
|
|
@@ -4,6 +4,7 @@ import classnames from 'classnames';
|
|
|
4
4
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
5
5
|
import { injectIntl } from 'react-intl-next';
|
|
6
6
|
|
|
7
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
7
8
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
8
9
|
import {
|
|
9
10
|
findTable,
|
|
@@ -13,7 +14,6 @@ import {
|
|
|
13
14
|
|
|
14
15
|
import { clearHoverSelection, hoverTable } from '../../../commands';
|
|
15
16
|
import { TableCssClassName as ClassName } from '../../../types';
|
|
16
|
-
import messages from '../../messages';
|
|
17
17
|
|
|
18
18
|
import type { CornerControlProps } from './types';
|
|
19
19
|
|
|
@@ -4,6 +4,7 @@ import classnames from 'classnames';
|
|
|
4
4
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
5
5
|
import { injectIntl } from 'react-intl-next';
|
|
6
6
|
|
|
7
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
7
8
|
import {
|
|
8
9
|
findTable,
|
|
9
10
|
isTableSelected,
|
|
@@ -12,7 +13,6 @@ import {
|
|
|
12
13
|
|
|
13
14
|
import { clearHoverSelection, hoverTable } from '../../../commands';
|
|
14
15
|
import { TableCssClassName as ClassName } from '../../../types';
|
|
15
|
-
import messages from '../../messages';
|
|
16
16
|
|
|
17
17
|
import type { CornerControlProps } from './types';
|
|
18
18
|
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
2
|
|
|
3
3
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
|
-
import {
|
|
4
|
+
import { injectIntl } from 'react-intl-next';
|
|
5
5
|
|
|
6
|
+
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
7
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
7
8
|
|
|
8
9
|
import { clearHoverSelection } from '../../../commands';
|
|
@@ -11,15 +12,6 @@ import type { RowParams } from '../../../utils';
|
|
|
11
12
|
import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
|
|
12
13
|
import { tableControlsSpacing, tableToolbarSize } from '../../consts';
|
|
13
14
|
|
|
14
|
-
const messages = defineMessages({
|
|
15
|
-
rowControl: {
|
|
16
|
-
id: 'fabric.editor.rowControl',
|
|
17
|
-
defaultMessage: 'Highlight row',
|
|
18
|
-
description:
|
|
19
|
-
'A button on the left of each row that shows up when the table is in focus. Clicking on it will select the entire row.',
|
|
20
|
-
},
|
|
21
|
-
});
|
|
22
|
-
|
|
23
15
|
export interface Props {
|
|
24
16
|
editorView: EditorView;
|
|
25
17
|
tableRef: HTMLTableElement;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _reactIntlNext = require("react-intl-next");
|
|
8
|
-
var _default = exports.default = (0, _reactIntlNext.defineMessages)({
|
|
9
|
-
insertColumn: {
|
|
10
|
-
id: 'fabric.editor.insertColumn',
|
|
11
|
-
defaultMessage: 'Insert column right',
|
|
12
|
-
description: 'Inserts a new column to the right of selected column.'
|
|
13
|
-
},
|
|
14
|
-
removeColumns: {
|
|
15
|
-
id: 'fabric.editor.removeColumns',
|
|
16
|
-
defaultMessage: 'Delete {0, plural, one {column} other {columns}}',
|
|
17
|
-
description: 'Deletes a table column.'
|
|
18
|
-
},
|
|
19
|
-
insertRow: {
|
|
20
|
-
id: 'fabric.editor.insertRow',
|
|
21
|
-
defaultMessage: 'Insert row below',
|
|
22
|
-
description: 'Inserts a new row below the selected row.'
|
|
23
|
-
},
|
|
24
|
-
removeRows: {
|
|
25
|
-
id: 'fabric.editor.removeRows',
|
|
26
|
-
defaultMessage: 'Delete {0, plural, one {row} other {rows}}',
|
|
27
|
-
description: 'Deletes a table row.'
|
|
28
|
-
},
|
|
29
|
-
cellOptions: {
|
|
30
|
-
id: 'fabric.editor.cellOptions',
|
|
31
|
-
defaultMessage: 'Cell options',
|
|
32
|
-
description: 'Opens a menu with options for the current table cell.'
|
|
33
|
-
},
|
|
34
|
-
confirmDeleteLinkedModalOKButton: {
|
|
35
|
-
id: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
|
|
36
|
-
defaultMessage: 'Delete',
|
|
37
|
-
description: 'Action button label for confirm modal when deleting a table linked to an extension.'
|
|
38
|
-
},
|
|
39
|
-
confirmDeleteLinkedModalMessage: {
|
|
40
|
-
id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
|
|
41
|
-
defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
|
|
42
|
-
description: 'Message for confirm modal when deleting a table linked to an extension.'
|
|
43
|
-
},
|
|
44
|
-
confirmDeleteLinkedModalMessagePrefix: {
|
|
45
|
-
id: 'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix',
|
|
46
|
-
defaultMessage: 'Deleting',
|
|
47
|
-
description: 'prefix for confirmation dialog text'
|
|
48
|
-
},
|
|
49
|
-
confirmModalCheckboxLabel: {
|
|
50
|
-
id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
|
|
51
|
-
defaultMessage: 'Also delete connected elements',
|
|
52
|
-
description: 'checkbox label text'
|
|
53
|
-
},
|
|
54
|
-
deleteElementTitle: {
|
|
55
|
-
id: 'fabric.editor.extension.deleteElementTitle',
|
|
56
|
-
defaultMessage: 'Delete element',
|
|
57
|
-
description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
|
|
58
|
-
},
|
|
59
|
-
unnamedSource: {
|
|
60
|
-
id: 'fabric.editor.extension.sourceNoTitledName',
|
|
61
|
-
defaultMessage: 'this element',
|
|
62
|
-
description: 'The current element without preset name been selected'
|
|
63
|
-
},
|
|
64
|
-
adjustColumns: {
|
|
65
|
-
id: 'fabric.editor.tables.adjustColumn',
|
|
66
|
-
defaultMessage: 'Adjust column',
|
|
67
|
-
description: 'Tooltip displayed on table column resize handle'
|
|
68
|
-
},
|
|
69
|
-
cornerControl: {
|
|
70
|
-
id: 'fabric.editor.cornerControl',
|
|
71
|
-
defaultMessage: 'Highlight table',
|
|
72
|
-
description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
|
|
73
|
-
}
|
|
74
|
-
});
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { defineMessages } from 'react-intl-next';
|
|
2
|
-
export default defineMessages({
|
|
3
|
-
insertColumn: {
|
|
4
|
-
id: 'fabric.editor.insertColumn',
|
|
5
|
-
defaultMessage: 'Insert column right',
|
|
6
|
-
description: 'Inserts a new column to the right of selected column.'
|
|
7
|
-
},
|
|
8
|
-
removeColumns: {
|
|
9
|
-
id: 'fabric.editor.removeColumns',
|
|
10
|
-
defaultMessage: 'Delete {0, plural, one {column} other {columns}}',
|
|
11
|
-
description: 'Deletes a table column.'
|
|
12
|
-
},
|
|
13
|
-
insertRow: {
|
|
14
|
-
id: 'fabric.editor.insertRow',
|
|
15
|
-
defaultMessage: 'Insert row below',
|
|
16
|
-
description: 'Inserts a new row below the selected row.'
|
|
17
|
-
},
|
|
18
|
-
removeRows: {
|
|
19
|
-
id: 'fabric.editor.removeRows',
|
|
20
|
-
defaultMessage: 'Delete {0, plural, one {row} other {rows}}',
|
|
21
|
-
description: 'Deletes a table row.'
|
|
22
|
-
},
|
|
23
|
-
cellOptions: {
|
|
24
|
-
id: 'fabric.editor.cellOptions',
|
|
25
|
-
defaultMessage: 'Cell options',
|
|
26
|
-
description: 'Opens a menu with options for the current table cell.'
|
|
27
|
-
},
|
|
28
|
-
confirmDeleteLinkedModalOKButton: {
|
|
29
|
-
id: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
|
|
30
|
-
defaultMessage: 'Delete',
|
|
31
|
-
description: 'Action button label for confirm modal when deleting a table linked to an extension.'
|
|
32
|
-
},
|
|
33
|
-
confirmDeleteLinkedModalMessage: {
|
|
34
|
-
id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
|
|
35
|
-
defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
|
|
36
|
-
description: 'Message for confirm modal when deleting a table linked to an extension.'
|
|
37
|
-
},
|
|
38
|
-
confirmDeleteLinkedModalMessagePrefix: {
|
|
39
|
-
id: 'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix',
|
|
40
|
-
defaultMessage: 'Deleting',
|
|
41
|
-
description: 'prefix for confirmation dialog text'
|
|
42
|
-
},
|
|
43
|
-
confirmModalCheckboxLabel: {
|
|
44
|
-
id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
|
|
45
|
-
defaultMessage: 'Also delete connected elements',
|
|
46
|
-
description: 'checkbox label text'
|
|
47
|
-
},
|
|
48
|
-
deleteElementTitle: {
|
|
49
|
-
id: 'fabric.editor.extension.deleteElementTitle',
|
|
50
|
-
defaultMessage: 'Delete element',
|
|
51
|
-
description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
|
|
52
|
-
},
|
|
53
|
-
unnamedSource: {
|
|
54
|
-
id: 'fabric.editor.extension.sourceNoTitledName',
|
|
55
|
-
defaultMessage: 'this element',
|
|
56
|
-
description: 'The current element without preset name been selected'
|
|
57
|
-
},
|
|
58
|
-
adjustColumns: {
|
|
59
|
-
id: 'fabric.editor.tables.adjustColumn',
|
|
60
|
-
defaultMessage: 'Adjust column',
|
|
61
|
-
description: 'Tooltip displayed on table column resize handle'
|
|
62
|
-
},
|
|
63
|
-
cornerControl: {
|
|
64
|
-
id: 'fabric.editor.cornerControl',
|
|
65
|
-
defaultMessage: 'Highlight table',
|
|
66
|
-
description: 'A button on the upper left corner of the table that shows up when the table is in focus. Clicking on it will select the entire table.'
|
|
67
|
-
}
|
|
68
|
-
});
|