@atlaskit/editor-plugin-table 10.4.6 → 10.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/pm-plugins/utils/drag-menu.js +99 -33
- package/dist/cjs/ui/toolbar.js +13 -12
- package/dist/es2019/pm-plugins/utils/drag-menu.js +71 -33
- package/dist/es2019/ui/toolbar.js +8 -9
- package/dist/esm/pm-plugins/utils/drag-menu.js +99 -33
- package/dist/esm/ui/toolbar.js +10 -9
- package/dist/types/pm-plugins/utils/drag-menu.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/utils/drag-menu.d.ts +1 -1
- package/package.json +2 -2
- package/src/pm-plugins/utils/{drag-menu.ts → drag-menu.tsx} +18 -32
- package/src/ui/toolbar.tsx +4 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 10.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#128788](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128788)
|
|
8
|
+
[`83a4d1ba203b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/83a4d1ba203b0) -
|
|
9
|
+
[ux] update icons
|
|
10
|
+
|
|
11
|
+
## 10.4.7
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 10.4.6
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.getTargetIndex = exports.getDragMenuConfig = exports.canMove = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
10
|
var _customSteps = require("@atlaskit/custom-steps");
|
|
10
11
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
12
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
@@ -98,32 +99,57 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
98
99
|
var addOptions = direction === 'row' ? [{
|
|
99
100
|
label: 'above',
|
|
100
101
|
offset: 0,
|
|
101
|
-
icon:
|
|
102
|
-
|
|
102
|
+
icon: function icon() {
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement(_tableRowAddAbove.default, {
|
|
104
|
+
LEGACY_fallbackIcon: _AddRowAboveIcon.AddRowAboveIcon,
|
|
105
|
+
spacing: 'spacious',
|
|
106
|
+
label: ''
|
|
107
|
+
});
|
|
108
|
+
},
|
|
103
109
|
keymap: _keymaps.addRowBefore
|
|
104
110
|
}, {
|
|
105
111
|
label: 'below',
|
|
106
112
|
offset: 1,
|
|
107
|
-
icon:
|
|
108
|
-
|
|
113
|
+
icon: function icon() {
|
|
114
|
+
return /*#__PURE__*/_react.default.createElement(_tableRowAddBelow.default, {
|
|
115
|
+
LEGACY_fallbackIcon: _AddRowBelowIcon.AddRowBelowIcon,
|
|
116
|
+
spacing: 'spacious',
|
|
117
|
+
label: ''
|
|
118
|
+
});
|
|
119
|
+
},
|
|
109
120
|
keymap: _keymaps.addRowAfter
|
|
110
121
|
}] : [{
|
|
111
122
|
label: 'left',
|
|
112
123
|
offset: 0,
|
|
113
|
-
icon:
|
|
114
|
-
|
|
124
|
+
icon: function icon() {
|
|
125
|
+
return /*#__PURE__*/_react.default.createElement(_tableColumnAddLeft.default, {
|
|
126
|
+
LEGACY_fallbackIcon: _AddColLeftIcon.AddColLeftIcon,
|
|
127
|
+
spacing: 'spacious',
|
|
128
|
+
label: ''
|
|
129
|
+
});
|
|
130
|
+
},
|
|
115
131
|
keymap: _keymaps.addColumnBefore
|
|
116
132
|
}, {
|
|
117
133
|
label: 'right',
|
|
118
134
|
offset: 1,
|
|
119
|
-
icon:
|
|
120
|
-
|
|
135
|
+
icon: function icon() {
|
|
136
|
+
return /*#__PURE__*/_react.default.createElement(_tableColumnAddRight.default, {
|
|
137
|
+
LEGACY_fallbackIcon: _AddColRightIcon.AddColRightIcon,
|
|
138
|
+
spacing: 'spacious',
|
|
139
|
+
label: ''
|
|
140
|
+
});
|
|
141
|
+
},
|
|
121
142
|
keymap: _keymaps.addColumnAfter
|
|
122
143
|
}];
|
|
123
144
|
var moveOptions = direction === 'row' ? [{
|
|
124
145
|
label: 'up',
|
|
125
|
-
icon:
|
|
126
|
-
|
|
146
|
+
icon: function icon() {
|
|
147
|
+
return /*#__PURE__*/_react.default.createElement(_tableRowMoveUp.default, {
|
|
148
|
+
LEGACY_fallbackIcon: _arrowUp.default,
|
|
149
|
+
spacing: 'spacious',
|
|
150
|
+
label: ''
|
|
151
|
+
});
|
|
152
|
+
},
|
|
127
153
|
keymap: _keymaps.moveRowUp,
|
|
128
154
|
canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
|
|
129
155
|
getOriginIndexes: _selection.getSelectedRowIndexes,
|
|
@@ -132,8 +158,13 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
132
158
|
}
|
|
133
159
|
}, {
|
|
134
160
|
label: 'down',
|
|
135
|
-
icon:
|
|
136
|
-
|
|
161
|
+
icon: function icon() {
|
|
162
|
+
return /*#__PURE__*/_react.default.createElement(_tableRowMoveDown.default, {
|
|
163
|
+
LEGACY_fallbackIcon: _arrowDown.default,
|
|
164
|
+
spacing: 'spacious',
|
|
165
|
+
label: ''
|
|
166
|
+
});
|
|
167
|
+
},
|
|
137
168
|
keymap: _keymaps.moveRowDown,
|
|
138
169
|
canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
|
|
139
170
|
getOriginIndexes: _selection.getSelectedRowIndexes,
|
|
@@ -142,8 +173,13 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
142
173
|
}
|
|
143
174
|
}] : [{
|
|
144
175
|
label: 'left',
|
|
145
|
-
icon:
|
|
146
|
-
|
|
176
|
+
icon: function icon() {
|
|
177
|
+
return /*#__PURE__*/_react.default.createElement(_tableColumnMoveLeft.default, {
|
|
178
|
+
LEGACY_fallbackIcon: _arrowLeft.default,
|
|
179
|
+
spacing: 'spacious',
|
|
180
|
+
label: ''
|
|
181
|
+
});
|
|
182
|
+
},
|
|
147
183
|
keymap: _keymaps.moveColumnLeft,
|
|
148
184
|
canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
|
|
149
185
|
getOriginIndexes: _selection.getSelectedColumnIndexes,
|
|
@@ -152,8 +188,13 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
152
188
|
}
|
|
153
189
|
}, {
|
|
154
190
|
label: 'right',
|
|
155
|
-
icon:
|
|
156
|
-
|
|
191
|
+
icon: function icon() {
|
|
192
|
+
return /*#__PURE__*/_react.default.createElement(_tableColumnMoveRight.default, {
|
|
193
|
+
LEGACY_fallbackIcon: _arrowRight.default,
|
|
194
|
+
spacing: 'spacious',
|
|
195
|
+
label: ''
|
|
196
|
+
});
|
|
197
|
+
},
|
|
157
198
|
keymap: _keymaps.moveColumnRight,
|
|
158
199
|
canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
|
|
159
200
|
getOriginIndexes: _selection.getSelectedColumnIndexes,
|
|
@@ -164,25 +205,33 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
164
205
|
var sortOptions = direction === 'column' ? [{
|
|
165
206
|
label: 'increasing',
|
|
166
207
|
order: _customSteps.TableSortOrder.ASC,
|
|
167
|
-
icon:
|
|
168
|
-
|
|
208
|
+
icon: function icon() {
|
|
209
|
+
return /*#__PURE__*/_react.default.createElement(_sortAscending.default, {
|
|
210
|
+
LEGACY_fallbackIcon: _chevronDoubleUp.default,
|
|
211
|
+
spacing: 'spacious',
|
|
212
|
+
label: ''
|
|
213
|
+
});
|
|
214
|
+
}
|
|
169
215
|
}, {
|
|
170
216
|
label: 'decreasing',
|
|
171
217
|
order: _customSteps.TableSortOrder.DESC,
|
|
172
|
-
icon:
|
|
173
|
-
|
|
218
|
+
icon: function icon() {
|
|
219
|
+
return /*#__PURE__*/_react.default.createElement(_sortDescending.default, {
|
|
220
|
+
LEGACY_fallbackIcon: _chevronDoubleDown.default,
|
|
221
|
+
spacing: 'spacious',
|
|
222
|
+
label: ''
|
|
223
|
+
});
|
|
224
|
+
}
|
|
174
225
|
}] : [];
|
|
175
226
|
var sortConfigs = (0, _toConsumableArray2.default)(sortOptions.map(function (_ref) {
|
|
176
227
|
var label = _ref.label,
|
|
177
228
|
order = _ref.order,
|
|
178
|
-
icon = _ref.icon
|
|
179
|
-
iconFallback = _ref.iconFallback;
|
|
229
|
+
icon = _ref.icon;
|
|
180
230
|
return {
|
|
181
231
|
id: "sort_column_".concat(order),
|
|
182
232
|
title: "Sort ".concat(label),
|
|
183
233
|
disabled: hasMergedCellsInTable,
|
|
184
234
|
icon: icon,
|
|
185
|
-
iconFallback: iconFallback,
|
|
186
235
|
onClick: function onClick(state, dispatch) {
|
|
187
236
|
(0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
|
|
188
237
|
return true;
|
|
@@ -193,13 +242,11 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
193
242
|
var label = _ref2.label,
|
|
194
243
|
offset = _ref2.offset,
|
|
195
244
|
icon = _ref2.icon,
|
|
196
|
-
iconFallback = _ref2.iconFallback,
|
|
197
245
|
keymap = _ref2.keymap;
|
|
198
246
|
return {
|
|
199
247
|
id: "add_".concat(direction, "_").concat(label),
|
|
200
248
|
title: "Add ".concat(direction, " ").concat(label),
|
|
201
249
|
icon: icon,
|
|
202
|
-
iconFallback: iconFallback,
|
|
203
250
|
onClick: function onClick(state, dispatch) {
|
|
204
251
|
if (direction === 'row') {
|
|
205
252
|
(0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, {
|
|
@@ -229,8 +276,13 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
229
276
|
}
|
|
230
277
|
return false;
|
|
231
278
|
},
|
|
232
|
-
icon:
|
|
233
|
-
|
|
279
|
+
icon: function icon() {
|
|
280
|
+
return /*#__PURE__*/_react.default.createElement(_tableColumnsDistribute.default, {
|
|
281
|
+
LEGACY_fallbackIcon: _layoutThreeEqual.default,
|
|
282
|
+
spacing: 'spacious',
|
|
283
|
+
label: ''
|
|
284
|
+
});
|
|
285
|
+
}
|
|
234
286
|
} : undefined, {
|
|
235
287
|
id: 'clear_cells',
|
|
236
288
|
title: 'Clear cells',
|
|
@@ -238,8 +290,13 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
238
290
|
(0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
|
|
239
291
|
return true;
|
|
240
292
|
},
|
|
241
|
-
icon:
|
|
242
|
-
|
|
293
|
+
icon: function icon() {
|
|
294
|
+
return /*#__PURE__*/_react.default.createElement(_tableCellClear.default, {
|
|
295
|
+
LEGACY_fallbackIcon: _crossCircle.default,
|
|
296
|
+
spacing: 'spacious',
|
|
297
|
+
label: ''
|
|
298
|
+
});
|
|
299
|
+
},
|
|
243
300
|
keymap: (0, _keymaps.tooltip)(_keymaps.backspace)
|
|
244
301
|
}, {
|
|
245
302
|
id: "delete_".concat(direction),
|
|
@@ -252,14 +309,24 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
252
309
|
}
|
|
253
310
|
return true;
|
|
254
311
|
},
|
|
255
|
-
icon: direction === 'row' ?
|
|
256
|
-
|
|
312
|
+
icon: direction === 'row' ? function () {
|
|
313
|
+
return /*#__PURE__*/_react.default.createElement(_tableRowDelete.default, {
|
|
314
|
+
LEGACY_fallbackIcon: _remove.default,
|
|
315
|
+
spacing: 'spacious',
|
|
316
|
+
label: ''
|
|
317
|
+
});
|
|
318
|
+
} : function () {
|
|
319
|
+
return /*#__PURE__*/_react.default.createElement(_tableColumnDelete.default, {
|
|
320
|
+
LEGACY_fallbackIcon: _remove.default,
|
|
321
|
+
spacing: 'spacious',
|
|
322
|
+
label: ''
|
|
323
|
+
});
|
|
324
|
+
},
|
|
257
325
|
keymap: direction === 'row' ? (0, _keymaps.tooltip)(_keymaps.deleteRow) : (0, _keymaps.tooltip)(_keymaps.deleteColumn)
|
|
258
326
|
}], (0, _toConsumableArray2.default)(moveOptions.map(function (_ref3) {
|
|
259
327
|
var label = _ref3.label,
|
|
260
328
|
canMove = _ref3.canMove,
|
|
261
329
|
icon = _ref3.icon,
|
|
262
|
-
iconFallback = _ref3.iconFallback,
|
|
263
330
|
keymap = _ref3.keymap,
|
|
264
331
|
getOriginIndexes = _ref3.getOriginIndexes,
|
|
265
332
|
getTargetIndex = _ref3.getTargetIndex;
|
|
@@ -268,7 +335,6 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
268
335
|
title: "Move ".concat(direction, " ").concat(label),
|
|
269
336
|
disabled: !canMove,
|
|
270
337
|
icon: icon,
|
|
271
|
-
iconFallback: iconFallback,
|
|
272
338
|
onClick: function onClick(state, dispatch) {
|
|
273
339
|
if (canMove) {
|
|
274
340
|
requestAnimationFrame(function () {
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -27,14 +27,12 @@ var _utils3 = require("@atlaskit/editor-tables/utils");
|
|
|
27
27
|
var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-image-center"));
|
|
28
28
|
var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-image-left"));
|
|
29
29
|
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
|
|
30
|
-
var
|
|
31
|
-
var
|
|
30
|
+
var _customizePreferences = _interopRequireDefault(require("@atlaskit/icon/core/migration/customize--preferences"));
|
|
31
|
+
var _deleteEditorRemove = _interopRequireDefault(require("@atlaskit/icon/core/migration/delete--editor-remove"));
|
|
32
32
|
var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
|
|
33
33
|
var _alignImageCenter2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
|
|
34
34
|
var _alignImageLeft2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
|
|
35
35
|
var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
|
|
36
|
-
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
37
|
-
var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
|
|
38
36
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
39
37
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
40
38
|
var _commands = require("../pm-plugins/commands");
|
|
@@ -117,9 +115,8 @@ var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMen
|
|
|
117
115
|
type: 'dropdown',
|
|
118
116
|
testId: 'table_options',
|
|
119
117
|
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
120
|
-
icon: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? undefined :
|
|
121
|
-
|
|
122
|
-
iconBefore: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? _customize.default : undefined,
|
|
118
|
+
icon: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? undefined : _customizePreferences.default,
|
|
119
|
+
iconBefore: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? _customizePreferences.default : undefined,
|
|
123
120
|
title: formatMessage(_messages.tableMessages.tableOptions),
|
|
124
121
|
hidden: options.every(function (option) {
|
|
125
122
|
return option.hidden;
|
|
@@ -432,8 +429,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
|
|
|
432
429
|
id: 'editor.table.delete',
|
|
433
430
|
type: 'button',
|
|
434
431
|
appearance: 'danger',
|
|
435
|
-
icon:
|
|
436
|
-
iconFallback: _remove.default,
|
|
432
|
+
icon: _deleteEditorRemove.default,
|
|
437
433
|
onClick: (0, _commandsWithAnalytics.deleteTableWithAnalytics)(editorAnalyticsAPI),
|
|
438
434
|
disabled: !!resizeState && !!resizeState.dragging,
|
|
439
435
|
onMouseEnter: (0, _commands.hoverTable)(true),
|
|
@@ -516,7 +512,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
|
|
|
516
512
|
}, {
|
|
517
513
|
title: intl.formatMessage(_messages.default.delete),
|
|
518
514
|
onClick: (0, _commandsWithAnalytics.deleteTableWithAnalytics)(editorAnalyticsAPI),
|
|
519
|
-
icon: (0, _react.jsx)(
|
|
515
|
+
icon: (0, _react.jsx)(_deleteEditorRemove.default, {
|
|
520
516
|
label: intl.formatMessage(_messages.default.delete)
|
|
521
517
|
})
|
|
522
518
|
}]
|
|
@@ -590,8 +586,13 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
590
586
|
id: 'editor.table.distributeColumns',
|
|
591
587
|
type: 'button',
|
|
592
588
|
title: formatMessage(_messages.tableMessages.distributeColumns),
|
|
593
|
-
icon:
|
|
594
|
-
|
|
589
|
+
icon: function icon() {
|
|
590
|
+
return (0, _react.jsx)(_tableColumnsDistribute.default, {
|
|
591
|
+
LEGACY_fallbackIcon: _layoutThreeEqual.default,
|
|
592
|
+
spacing: 'spacious',
|
|
593
|
+
label: ''
|
|
594
|
+
});
|
|
595
|
+
},
|
|
595
596
|
onClick: function onClick(state, dispatch, view) {
|
|
596
597
|
return getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view);
|
|
597
598
|
},
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
2
3
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, deleteColumn, deleteRow, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
@@ -86,56 +87,80 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
|
|
|
86
87
|
const addOptions = direction === 'row' ? [{
|
|
87
88
|
label: 'above',
|
|
88
89
|
offset: 0,
|
|
89
|
-
icon: TableRowAddAboveIcon,
|
|
90
|
-
|
|
90
|
+
icon: () => /*#__PURE__*/React.createElement(TableRowAddAboveIcon, {
|
|
91
|
+
LEGACY_fallbackIcon: AddRowAboveIcon,
|
|
92
|
+
spacing: 'spacious',
|
|
93
|
+
label: ''
|
|
94
|
+
}),
|
|
91
95
|
keymap: addRowBefore
|
|
92
96
|
}, {
|
|
93
97
|
label: 'below',
|
|
94
98
|
offset: 1,
|
|
95
|
-
icon: TableRowAddBelowIcon,
|
|
96
|
-
|
|
99
|
+
icon: () => /*#__PURE__*/React.createElement(TableRowAddBelowIcon, {
|
|
100
|
+
LEGACY_fallbackIcon: AddRowBelowIcon,
|
|
101
|
+
spacing: 'spacious',
|
|
102
|
+
label: ''
|
|
103
|
+
}),
|
|
97
104
|
keymap: addRowAfter
|
|
98
105
|
}] : [{
|
|
99
106
|
label: 'left',
|
|
100
107
|
offset: 0,
|
|
101
|
-
icon: TableColumnAddLeftIcon,
|
|
102
|
-
|
|
108
|
+
icon: () => /*#__PURE__*/React.createElement(TableColumnAddLeftIcon, {
|
|
109
|
+
LEGACY_fallbackIcon: AddColLeftIcon,
|
|
110
|
+
spacing: 'spacious',
|
|
111
|
+
label: ''
|
|
112
|
+
}),
|
|
103
113
|
keymap: addColumnBefore
|
|
104
114
|
}, {
|
|
105
115
|
label: 'right',
|
|
106
116
|
offset: 1,
|
|
107
|
-
icon: TableColumnAddRightIcon,
|
|
108
|
-
|
|
117
|
+
icon: () => /*#__PURE__*/React.createElement(TableColumnAddRightIcon, {
|
|
118
|
+
LEGACY_fallbackIcon: AddColRightIcon,
|
|
119
|
+
spacing: 'spacious',
|
|
120
|
+
label: ''
|
|
121
|
+
}),
|
|
109
122
|
keymap: addColumnAfter
|
|
110
123
|
}];
|
|
111
124
|
const moveOptions = direction === 'row' ? [{
|
|
112
125
|
label: 'up',
|
|
113
|
-
icon: TableRowMoveUpIcon,
|
|
114
|
-
|
|
126
|
+
icon: () => /*#__PURE__*/React.createElement(TableRowMoveUpIcon, {
|
|
127
|
+
LEGACY_fallbackIcon: ArrowUpIcon,
|
|
128
|
+
spacing: 'spacious',
|
|
129
|
+
label: ''
|
|
130
|
+
}),
|
|
115
131
|
keymap: moveRowUp,
|
|
116
132
|
canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
|
|
117
133
|
getOriginIndexes: getSelectedRowIndexes,
|
|
118
134
|
getTargetIndex: selectionRect => selectionRect.top - 1
|
|
119
135
|
}, {
|
|
120
136
|
label: 'down',
|
|
121
|
-
icon: TableRowMoveDownIcon,
|
|
122
|
-
|
|
137
|
+
icon: () => /*#__PURE__*/React.createElement(TableRowMoveDownIcon, {
|
|
138
|
+
LEGACY_fallbackIcon: ArrowDownIcon,
|
|
139
|
+
spacing: 'spacious',
|
|
140
|
+
label: ''
|
|
141
|
+
}),
|
|
123
142
|
keymap: moveRowDown,
|
|
124
143
|
canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
|
|
125
144
|
getOriginIndexes: getSelectedRowIndexes,
|
|
126
145
|
getTargetIndex: selectionRect => selectionRect.bottom
|
|
127
146
|
}] : [{
|
|
128
147
|
label: 'left',
|
|
129
|
-
icon: TableColumnMoveLeftIcon,
|
|
130
|
-
|
|
148
|
+
icon: () => /*#__PURE__*/React.createElement(TableColumnMoveLeftIcon, {
|
|
149
|
+
LEGACY_fallbackIcon: ArrowLeftIcon,
|
|
150
|
+
spacing: 'spacious',
|
|
151
|
+
label: ''
|
|
152
|
+
}),
|
|
131
153
|
keymap: moveColumnLeft,
|
|
132
154
|
canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
|
|
133
155
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
134
156
|
getTargetIndex: selectionRect => selectionRect.left - 1
|
|
135
157
|
}, {
|
|
136
158
|
label: 'right',
|
|
137
|
-
icon: TableColumnMoveRightIcon,
|
|
138
|
-
|
|
159
|
+
icon: () => /*#__PURE__*/React.createElement(TableColumnMoveRightIcon, {
|
|
160
|
+
LEGACY_fallbackIcon: ArrowRightIcon,
|
|
161
|
+
spacing: 'spacious',
|
|
162
|
+
label: ''
|
|
163
|
+
}),
|
|
139
164
|
keymap: moveColumnRight,
|
|
140
165
|
canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
|
|
141
166
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
@@ -144,25 +169,29 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
|
|
|
144
169
|
const sortOptions = direction === 'column' ? [{
|
|
145
170
|
label: 'increasing',
|
|
146
171
|
order: SortOrder.ASC,
|
|
147
|
-
icon: SortAscendingIcon,
|
|
148
|
-
|
|
172
|
+
icon: () => /*#__PURE__*/React.createElement(SortAscendingIcon, {
|
|
173
|
+
LEGACY_fallbackIcon: HipchatChevronDoubleUpIcon,
|
|
174
|
+
spacing: 'spacious',
|
|
175
|
+
label: ''
|
|
176
|
+
})
|
|
149
177
|
}, {
|
|
150
178
|
label: 'decreasing',
|
|
151
179
|
order: SortOrder.DESC,
|
|
152
|
-
icon: SortDescendingIcon,
|
|
153
|
-
|
|
180
|
+
icon: () => /*#__PURE__*/React.createElement(SortDescendingIcon, {
|
|
181
|
+
LEGACY_fallbackIcon: HipchatChevronDoubleDownIcon,
|
|
182
|
+
spacing: 'spacious',
|
|
183
|
+
label: ''
|
|
184
|
+
})
|
|
154
185
|
}] : [];
|
|
155
186
|
const sortConfigs = [...sortOptions.map(({
|
|
156
187
|
label,
|
|
157
188
|
order,
|
|
158
|
-
icon
|
|
159
|
-
iconFallback
|
|
189
|
+
icon
|
|
160
190
|
}) => ({
|
|
161
191
|
id: `sort_column_${order}`,
|
|
162
192
|
title: `Sort ${label}`,
|
|
163
193
|
disabled: hasMergedCellsInTable,
|
|
164
194
|
icon: icon,
|
|
165
|
-
iconFallback: iconFallback,
|
|
166
195
|
onClick: (state, dispatch) => {
|
|
167
196
|
sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
|
|
168
197
|
return true;
|
|
@@ -172,13 +201,11 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
|
|
|
172
201
|
label,
|
|
173
202
|
offset,
|
|
174
203
|
icon,
|
|
175
|
-
iconFallback,
|
|
176
204
|
keymap
|
|
177
205
|
}) => ({
|
|
178
206
|
id: `add_${direction}_${label}`,
|
|
179
207
|
title: `Add ${direction} ${label}`,
|
|
180
208
|
icon: icon,
|
|
181
|
-
iconFallback: iconFallback,
|
|
182
209
|
onClick: (state, dispatch) => {
|
|
183
210
|
if (direction === 'row') {
|
|
184
211
|
insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
|
|
@@ -207,8 +234,11 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
|
|
|
207
234
|
}
|
|
208
235
|
return false;
|
|
209
236
|
},
|
|
210
|
-
icon: TableColumnsDistributeIcon,
|
|
211
|
-
|
|
237
|
+
icon: () => /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
|
|
238
|
+
LEGACY_fallbackIcon: EditorLayoutThreeEqualIcon,
|
|
239
|
+
spacing: 'spacious',
|
|
240
|
+
label: ''
|
|
241
|
+
})
|
|
212
242
|
} : undefined, {
|
|
213
243
|
id: 'clear_cells',
|
|
214
244
|
title: 'Clear cells',
|
|
@@ -216,8 +246,11 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
|
|
|
216
246
|
emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
|
|
217
247
|
return true;
|
|
218
248
|
},
|
|
219
|
-
icon: TableCellClearIcon,
|
|
220
|
-
|
|
249
|
+
icon: () => /*#__PURE__*/React.createElement(TableCellClearIcon, {
|
|
250
|
+
LEGACY_fallbackIcon: CrossCircleIcon,
|
|
251
|
+
spacing: 'spacious',
|
|
252
|
+
label: ''
|
|
253
|
+
}),
|
|
221
254
|
keymap: tooltip(backspace)
|
|
222
255
|
}, {
|
|
223
256
|
id: `delete_${direction}`,
|
|
@@ -230,14 +263,20 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
|
|
|
230
263
|
}
|
|
231
264
|
return true;
|
|
232
265
|
},
|
|
233
|
-
icon: direction === 'row' ?
|
|
234
|
-
|
|
266
|
+
icon: direction === 'row' ? () => /*#__PURE__*/React.createElement(TableRowDeleteIcon, {
|
|
267
|
+
LEGACY_fallbackIcon: RemoveIcon,
|
|
268
|
+
spacing: 'spacious',
|
|
269
|
+
label: ''
|
|
270
|
+
}) : () => /*#__PURE__*/React.createElement(TableColumnDeleteIcon, {
|
|
271
|
+
LEGACY_fallbackIcon: RemoveIcon,
|
|
272
|
+
spacing: 'spacious',
|
|
273
|
+
label: ''
|
|
274
|
+
}),
|
|
235
275
|
keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
|
|
236
276
|
}, ...moveOptions.map(({
|
|
237
277
|
label,
|
|
238
278
|
canMove,
|
|
239
279
|
icon,
|
|
240
|
-
iconFallback,
|
|
241
280
|
keymap,
|
|
242
281
|
getOriginIndexes,
|
|
243
282
|
getTargetIndex
|
|
@@ -246,7 +285,6 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
|
|
|
246
285
|
title: `Move ${direction} ${label}`,
|
|
247
286
|
disabled: !canMove,
|
|
248
287
|
icon: icon,
|
|
249
|
-
iconFallback: iconFallback,
|
|
250
288
|
onClick: (state, dispatch) => {
|
|
251
289
|
if (canMove) {
|
|
252
290
|
requestAnimationFrame(() => {
|
|
@@ -22,14 +22,12 @@ import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType,
|
|
|
22
22
|
import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
|
|
23
23
|
import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
|
|
24
24
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
25
|
-
import CustomizeIcon from '@atlaskit/icon/core/customize';
|
|
26
|
-
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
25
|
+
import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
|
|
26
|
+
import DeleteIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
|
|
27
27
|
import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
|
|
28
28
|
import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
|
|
29
29
|
import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
|
|
30
30
|
import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
|
|
31
|
-
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
32
|
-
import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
|
|
33
31
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
34
32
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
35
33
|
import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
|
|
@@ -104,8 +102,7 @@ export const getToolbarMenuConfig = (config, state, {
|
|
|
104
102
|
type: 'dropdown',
|
|
105
103
|
testId: 'table_options',
|
|
106
104
|
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
107
|
-
icon: fg('platform-visual-refresh-icons') ? undefined :
|
|
108
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
105
|
+
icon: fg('platform-visual-refresh-icons') ? undefined : CustomizeIcon,
|
|
109
106
|
iconBefore: fg('platform-visual-refresh-icons') ? CustomizeIcon : undefined,
|
|
110
107
|
title: formatMessage(messages.tableOptions),
|
|
111
108
|
hidden: options.every(option => option.hidden),
|
|
@@ -405,7 +402,6 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
|
|
|
405
402
|
type: 'button',
|
|
406
403
|
appearance: 'danger',
|
|
407
404
|
icon: DeleteIcon,
|
|
408
|
-
iconFallback: RemoveIcon,
|
|
409
405
|
onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
|
|
410
406
|
disabled: !!resizeState && !!resizeState.dragging,
|
|
411
407
|
onMouseEnter: hoverTable(true),
|
|
@@ -550,8 +546,11 @@ const getColumnSettingItems = (editorState, editorView, {
|
|
|
550
546
|
id: 'editor.table.distributeColumns',
|
|
551
547
|
type: 'button',
|
|
552
548
|
title: formatMessage(messages.distributeColumns),
|
|
553
|
-
icon: TableColumnsDistributeIcon,
|
|
554
|
-
|
|
549
|
+
icon: () => jsx(TableColumnsDistributeIcon, {
|
|
550
|
+
LEGACY_fallbackIcon: DistributeColumnIcon,
|
|
551
|
+
spacing: 'spacious',
|
|
552
|
+
label: ''
|
|
553
|
+
}),
|
|
555
554
|
onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view),
|
|
556
555
|
disabled: !wouldChange
|
|
557
556
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
3
4
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
5
|
import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, deleteColumn, deleteRow, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
@@ -91,32 +92,57 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
91
92
|
var addOptions = direction === 'row' ? [{
|
|
92
93
|
label: 'above',
|
|
93
94
|
offset: 0,
|
|
94
|
-
icon:
|
|
95
|
-
|
|
95
|
+
icon: function icon() {
|
|
96
|
+
return /*#__PURE__*/React.createElement(TableRowAddAboveIcon, {
|
|
97
|
+
LEGACY_fallbackIcon: AddRowAboveIcon,
|
|
98
|
+
spacing: 'spacious',
|
|
99
|
+
label: ''
|
|
100
|
+
});
|
|
101
|
+
},
|
|
96
102
|
keymap: addRowBefore
|
|
97
103
|
}, {
|
|
98
104
|
label: 'below',
|
|
99
105
|
offset: 1,
|
|
100
|
-
icon:
|
|
101
|
-
|
|
106
|
+
icon: function icon() {
|
|
107
|
+
return /*#__PURE__*/React.createElement(TableRowAddBelowIcon, {
|
|
108
|
+
LEGACY_fallbackIcon: AddRowBelowIcon,
|
|
109
|
+
spacing: 'spacious',
|
|
110
|
+
label: ''
|
|
111
|
+
});
|
|
112
|
+
},
|
|
102
113
|
keymap: addRowAfter
|
|
103
114
|
}] : [{
|
|
104
115
|
label: 'left',
|
|
105
116
|
offset: 0,
|
|
106
|
-
icon:
|
|
107
|
-
|
|
117
|
+
icon: function icon() {
|
|
118
|
+
return /*#__PURE__*/React.createElement(TableColumnAddLeftIcon, {
|
|
119
|
+
LEGACY_fallbackIcon: AddColLeftIcon,
|
|
120
|
+
spacing: 'spacious',
|
|
121
|
+
label: ''
|
|
122
|
+
});
|
|
123
|
+
},
|
|
108
124
|
keymap: addColumnBefore
|
|
109
125
|
}, {
|
|
110
126
|
label: 'right',
|
|
111
127
|
offset: 1,
|
|
112
|
-
icon:
|
|
113
|
-
|
|
128
|
+
icon: function icon() {
|
|
129
|
+
return /*#__PURE__*/React.createElement(TableColumnAddRightIcon, {
|
|
130
|
+
LEGACY_fallbackIcon: AddColRightIcon,
|
|
131
|
+
spacing: 'spacious',
|
|
132
|
+
label: ''
|
|
133
|
+
});
|
|
134
|
+
},
|
|
114
135
|
keymap: addColumnAfter
|
|
115
136
|
}];
|
|
116
137
|
var moveOptions = direction === 'row' ? [{
|
|
117
138
|
label: 'up',
|
|
118
|
-
icon:
|
|
119
|
-
|
|
139
|
+
icon: function icon() {
|
|
140
|
+
return /*#__PURE__*/React.createElement(TableRowMoveUpIcon, {
|
|
141
|
+
LEGACY_fallbackIcon: ArrowUpIcon,
|
|
142
|
+
spacing: 'spacious',
|
|
143
|
+
label: ''
|
|
144
|
+
});
|
|
145
|
+
},
|
|
120
146
|
keymap: moveRowUp,
|
|
121
147
|
canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
|
|
122
148
|
getOriginIndexes: getSelectedRowIndexes,
|
|
@@ -125,8 +151,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
125
151
|
}
|
|
126
152
|
}, {
|
|
127
153
|
label: 'down',
|
|
128
|
-
icon:
|
|
129
|
-
|
|
154
|
+
icon: function icon() {
|
|
155
|
+
return /*#__PURE__*/React.createElement(TableRowMoveDownIcon, {
|
|
156
|
+
LEGACY_fallbackIcon: ArrowDownIcon,
|
|
157
|
+
spacing: 'spacious',
|
|
158
|
+
label: ''
|
|
159
|
+
});
|
|
160
|
+
},
|
|
130
161
|
keymap: moveRowDown,
|
|
131
162
|
canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
|
|
132
163
|
getOriginIndexes: getSelectedRowIndexes,
|
|
@@ -135,8 +166,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
135
166
|
}
|
|
136
167
|
}] : [{
|
|
137
168
|
label: 'left',
|
|
138
|
-
icon:
|
|
139
|
-
|
|
169
|
+
icon: function icon() {
|
|
170
|
+
return /*#__PURE__*/React.createElement(TableColumnMoveLeftIcon, {
|
|
171
|
+
LEGACY_fallbackIcon: ArrowLeftIcon,
|
|
172
|
+
spacing: 'spacious',
|
|
173
|
+
label: ''
|
|
174
|
+
});
|
|
175
|
+
},
|
|
140
176
|
keymap: moveColumnLeft,
|
|
141
177
|
canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
|
|
142
178
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
@@ -145,8 +181,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
145
181
|
}
|
|
146
182
|
}, {
|
|
147
183
|
label: 'right',
|
|
148
|
-
icon:
|
|
149
|
-
|
|
184
|
+
icon: function icon() {
|
|
185
|
+
return /*#__PURE__*/React.createElement(TableColumnMoveRightIcon, {
|
|
186
|
+
LEGACY_fallbackIcon: ArrowRightIcon,
|
|
187
|
+
spacing: 'spacious',
|
|
188
|
+
label: ''
|
|
189
|
+
});
|
|
190
|
+
},
|
|
150
191
|
keymap: moveColumnRight,
|
|
151
192
|
canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
|
|
152
193
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
@@ -157,25 +198,33 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
157
198
|
var sortOptions = direction === 'column' ? [{
|
|
158
199
|
label: 'increasing',
|
|
159
200
|
order: SortOrder.ASC,
|
|
160
|
-
icon:
|
|
161
|
-
|
|
201
|
+
icon: function icon() {
|
|
202
|
+
return /*#__PURE__*/React.createElement(SortAscendingIcon, {
|
|
203
|
+
LEGACY_fallbackIcon: HipchatChevronDoubleUpIcon,
|
|
204
|
+
spacing: 'spacious',
|
|
205
|
+
label: ''
|
|
206
|
+
});
|
|
207
|
+
}
|
|
162
208
|
}, {
|
|
163
209
|
label: 'decreasing',
|
|
164
210
|
order: SortOrder.DESC,
|
|
165
|
-
icon:
|
|
166
|
-
|
|
211
|
+
icon: function icon() {
|
|
212
|
+
return /*#__PURE__*/React.createElement(SortDescendingIcon, {
|
|
213
|
+
LEGACY_fallbackIcon: HipchatChevronDoubleDownIcon,
|
|
214
|
+
spacing: 'spacious',
|
|
215
|
+
label: ''
|
|
216
|
+
});
|
|
217
|
+
}
|
|
167
218
|
}] : [];
|
|
168
219
|
var sortConfigs = _toConsumableArray(sortOptions.map(function (_ref) {
|
|
169
220
|
var label = _ref.label,
|
|
170
221
|
order = _ref.order,
|
|
171
|
-
icon = _ref.icon
|
|
172
|
-
iconFallback = _ref.iconFallback;
|
|
222
|
+
icon = _ref.icon;
|
|
173
223
|
return {
|
|
174
224
|
id: "sort_column_".concat(order),
|
|
175
225
|
title: "Sort ".concat(label),
|
|
176
226
|
disabled: hasMergedCellsInTable,
|
|
177
227
|
icon: icon,
|
|
178
|
-
iconFallback: iconFallback,
|
|
179
228
|
onClick: function onClick(state, dispatch) {
|
|
180
229
|
sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
|
|
181
230
|
return true;
|
|
@@ -186,13 +235,11 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
186
235
|
var label = _ref2.label,
|
|
187
236
|
offset = _ref2.offset,
|
|
188
237
|
icon = _ref2.icon,
|
|
189
|
-
iconFallback = _ref2.iconFallback,
|
|
190
238
|
keymap = _ref2.keymap;
|
|
191
239
|
return {
|
|
192
240
|
id: "add_".concat(direction, "_").concat(label),
|
|
193
241
|
title: "Add ".concat(direction, " ").concat(label),
|
|
194
242
|
icon: icon,
|
|
195
|
-
iconFallback: iconFallback,
|
|
196
243
|
onClick: function onClick(state, dispatch) {
|
|
197
244
|
if (direction === 'row') {
|
|
198
245
|
insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
|
|
@@ -222,8 +269,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
222
269
|
}
|
|
223
270
|
return false;
|
|
224
271
|
},
|
|
225
|
-
icon:
|
|
226
|
-
|
|
272
|
+
icon: function icon() {
|
|
273
|
+
return /*#__PURE__*/React.createElement(TableColumnsDistributeIcon, {
|
|
274
|
+
LEGACY_fallbackIcon: EditorLayoutThreeEqualIcon,
|
|
275
|
+
spacing: 'spacious',
|
|
276
|
+
label: ''
|
|
277
|
+
});
|
|
278
|
+
}
|
|
227
279
|
} : undefined, {
|
|
228
280
|
id: 'clear_cells',
|
|
229
281
|
title: 'Clear cells',
|
|
@@ -231,8 +283,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
231
283
|
emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
|
|
232
284
|
return true;
|
|
233
285
|
},
|
|
234
|
-
icon:
|
|
235
|
-
|
|
286
|
+
icon: function icon() {
|
|
287
|
+
return /*#__PURE__*/React.createElement(TableCellClearIcon, {
|
|
288
|
+
LEGACY_fallbackIcon: CrossCircleIcon,
|
|
289
|
+
spacing: 'spacious',
|
|
290
|
+
label: ''
|
|
291
|
+
});
|
|
292
|
+
},
|
|
236
293
|
keymap: tooltip(backspace)
|
|
237
294
|
}, {
|
|
238
295
|
id: "delete_".concat(direction),
|
|
@@ -245,14 +302,24 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
245
302
|
}
|
|
246
303
|
return true;
|
|
247
304
|
},
|
|
248
|
-
icon: direction === 'row' ?
|
|
249
|
-
|
|
305
|
+
icon: direction === 'row' ? function () {
|
|
306
|
+
return /*#__PURE__*/React.createElement(TableRowDeleteIcon, {
|
|
307
|
+
LEGACY_fallbackIcon: RemoveIcon,
|
|
308
|
+
spacing: 'spacious',
|
|
309
|
+
label: ''
|
|
310
|
+
});
|
|
311
|
+
} : function () {
|
|
312
|
+
return /*#__PURE__*/React.createElement(TableColumnDeleteIcon, {
|
|
313
|
+
LEGACY_fallbackIcon: RemoveIcon,
|
|
314
|
+
spacing: 'spacious',
|
|
315
|
+
label: ''
|
|
316
|
+
});
|
|
317
|
+
},
|
|
250
318
|
keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
|
|
251
319
|
}], _toConsumableArray(moveOptions.map(function (_ref3) {
|
|
252
320
|
var label = _ref3.label,
|
|
253
321
|
canMove = _ref3.canMove,
|
|
254
322
|
icon = _ref3.icon,
|
|
255
|
-
iconFallback = _ref3.iconFallback,
|
|
256
323
|
keymap = _ref3.keymap,
|
|
257
324
|
getOriginIndexes = _ref3.getOriginIndexes,
|
|
258
325
|
getTargetIndex = _ref3.getTargetIndex;
|
|
@@ -261,7 +328,6 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
261
328
|
title: "Move ".concat(direction, " ").concat(label),
|
|
262
329
|
disabled: !canMove,
|
|
263
330
|
icon: icon,
|
|
264
|
-
iconFallback: iconFallback,
|
|
265
331
|
onClick: function onClick(state, dispatch) {
|
|
266
332
|
if (canMove) {
|
|
267
333
|
requestAnimationFrame(function () {
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -26,14 +26,12 @@ import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType,
|
|
|
26
26
|
import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
|
|
27
27
|
import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
|
|
28
28
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
29
|
-
import CustomizeIcon from '@atlaskit/icon/core/customize';
|
|
30
|
-
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
29
|
+
import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
|
|
30
|
+
import DeleteIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
|
|
31
31
|
import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
|
|
32
32
|
import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
|
|
33
33
|
import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
|
|
34
34
|
import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
|
|
35
|
-
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
36
|
-
import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
|
|
37
35
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
38
36
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
39
37
|
import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
|
|
@@ -109,8 +107,7 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
|
|
|
109
107
|
type: 'dropdown',
|
|
110
108
|
testId: 'table_options',
|
|
111
109
|
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
112
|
-
icon: fg('platform-visual-refresh-icons') ? undefined :
|
|
113
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
110
|
+
icon: fg('platform-visual-refresh-icons') ? undefined : CustomizeIcon,
|
|
114
111
|
iconBefore: fg('platform-visual-refresh-icons') ? CustomizeIcon : undefined,
|
|
115
112
|
title: formatMessage(messages.tableOptions),
|
|
116
113
|
hidden: options.every(function (option) {
|
|
@@ -425,7 +422,6 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
|
|
|
425
422
|
type: 'button',
|
|
426
423
|
appearance: 'danger',
|
|
427
424
|
icon: DeleteIcon,
|
|
428
|
-
iconFallback: RemoveIcon,
|
|
429
425
|
onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
|
|
430
426
|
disabled: !!resizeState && !!resizeState.dragging,
|
|
431
427
|
onMouseEnter: hoverTable(true),
|
|
@@ -582,8 +578,13 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
582
578
|
id: 'editor.table.distributeColumns',
|
|
583
579
|
type: 'button',
|
|
584
580
|
title: formatMessage(messages.distributeColumns),
|
|
585
|
-
icon:
|
|
586
|
-
|
|
581
|
+
icon: function icon() {
|
|
582
|
+
return jsx(TableColumnsDistributeIcon, {
|
|
583
|
+
LEGACY_fallbackIcon: DistributeColumnIcon,
|
|
584
|
+
spacing: 'spacious',
|
|
585
|
+
label: ''
|
|
586
|
+
});
|
|
587
|
+
},
|
|
587
588
|
onClick: function onClick(state, dispatch, view) {
|
|
588
589
|
return getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view);
|
|
589
590
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import type { Command, DropdownOptionT, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
4
4
|
import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import type { Command, DropdownOptionT, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
4
4
|
import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.5.0",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
|
|
40
40
|
"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
|
|
41
41
|
"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
|
|
42
|
-
"@atlaskit/editor-plugin-extension": "5.0.
|
|
42
|
+
"@atlaskit/editor-plugin-extension": "5.0.8",
|
|
43
43
|
"@atlaskit/editor-plugin-guideline": "^2.0.0",
|
|
44
44
|
"@atlaskit/editor-plugin-selection": "^2.1.0",
|
|
45
45
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
1
3
|
import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
2
4
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
5
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
@@ -181,15 +183,13 @@ export const getDragMenuConfig = (
|
|
|
181
183
|
{
|
|
182
184
|
label: 'above',
|
|
183
185
|
offset: 0,
|
|
184
|
-
icon: TableRowAddAboveIcon
|
|
185
|
-
iconFallback: AddRowAboveIcon,
|
|
186
|
+
icon: () => <TableRowAddAboveIcon LEGACY_fallbackIcon={AddRowAboveIcon} spacing={'spacious'} label={''}/>,
|
|
186
187
|
keymap: addRowBefore,
|
|
187
188
|
},
|
|
188
189
|
{
|
|
189
190
|
label: 'below',
|
|
190
191
|
offset: 1,
|
|
191
|
-
icon: TableRowAddBelowIcon
|
|
192
|
-
iconFallback: AddRowBelowIcon,
|
|
192
|
+
icon: () => <TableRowAddBelowIcon LEGACY_fallbackIcon={AddRowBelowIcon} spacing={'spacious'} label={''}/>,
|
|
193
193
|
keymap: addRowAfter,
|
|
194
194
|
},
|
|
195
195
|
]
|
|
@@ -197,15 +197,13 @@ export const getDragMenuConfig = (
|
|
|
197
197
|
{
|
|
198
198
|
label: 'left',
|
|
199
199
|
offset: 0,
|
|
200
|
-
icon: TableColumnAddLeftIcon
|
|
201
|
-
iconFallback: AddColLeftIcon,
|
|
200
|
+
icon: () => <TableColumnAddLeftIcon LEGACY_fallbackIcon={AddColLeftIcon} spacing={'spacious'} label={''}/>,
|
|
202
201
|
keymap: addColumnBefore,
|
|
203
202
|
},
|
|
204
203
|
{
|
|
205
204
|
label: 'right',
|
|
206
205
|
offset: 1,
|
|
207
|
-
icon: TableColumnAddRightIcon
|
|
208
|
-
iconFallback: AddColRightIcon,
|
|
206
|
+
icon: () => <TableColumnAddRightIcon LEGACY_fallbackIcon={AddColRightIcon} spacing={'spacious'} label={''}/>,
|
|
209
207
|
keymap: addColumnAfter,
|
|
210
208
|
},
|
|
211
209
|
];
|
|
@@ -214,8 +212,7 @@ export const getDragMenuConfig = (
|
|
|
214
212
|
? [
|
|
215
213
|
{
|
|
216
214
|
label: 'up',
|
|
217
|
-
icon: TableRowMoveUpIcon
|
|
218
|
-
iconFallback: ArrowUpIcon,
|
|
215
|
+
icon: () => <TableRowMoveUpIcon LEGACY_fallbackIcon={ArrowUpIcon} spacing={'spacious'} label={''}/>,
|
|
219
216
|
keymap: moveRowUp,
|
|
220
217
|
canMove: canMove('table-row', -1, tableMap?.height ?? 0, selection, selectionRect),
|
|
221
218
|
getOriginIndexes: getSelectedRowIndexes,
|
|
@@ -223,8 +220,7 @@ export const getDragMenuConfig = (
|
|
|
223
220
|
},
|
|
224
221
|
{
|
|
225
222
|
label: 'down',
|
|
226
|
-
icon: TableRowMoveDownIcon
|
|
227
|
-
iconFallback: ArrowDownIcon,
|
|
223
|
+
icon: () => <TableRowMoveDownIcon LEGACY_fallbackIcon={ArrowDownIcon} spacing={'spacious'} label={''}/>,
|
|
228
224
|
keymap: moveRowDown,
|
|
229
225
|
canMove: canMove('table-row', 1, tableMap?.height ?? 0, selection, selectionRect),
|
|
230
226
|
getOriginIndexes: getSelectedRowIndexes,
|
|
@@ -234,8 +230,7 @@ export const getDragMenuConfig = (
|
|
|
234
230
|
: [
|
|
235
231
|
{
|
|
236
232
|
label: 'left',
|
|
237
|
-
icon: TableColumnMoveLeftIcon
|
|
238
|
-
iconFallback: ArrowLeftIcon,
|
|
233
|
+
icon: () => <TableColumnMoveLeftIcon LEGACY_fallbackIcon={ArrowLeftIcon} spacing={'spacious'} label={''}/>,
|
|
239
234
|
keymap: moveColumnLeft,
|
|
240
235
|
canMove: canMove('table-column', -1, tableMap?.width ?? 0, selection, selectionRect),
|
|
241
236
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
@@ -243,8 +238,7 @@ export const getDragMenuConfig = (
|
|
|
243
238
|
},
|
|
244
239
|
{
|
|
245
240
|
label: 'right',
|
|
246
|
-
icon: TableColumnMoveRightIcon
|
|
247
|
-
iconFallback: ArrowRightIcon,
|
|
241
|
+
icon: () => <TableColumnMoveRightIcon LEGACY_fallbackIcon={ArrowRightIcon} spacing={'spacious'} label={''}/>,
|
|
248
242
|
keymap: moveColumnRight,
|
|
249
243
|
canMove: canMove('table-column', 1, tableMap?.width ?? 0, selection, selectionRect),
|
|
250
244
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
@@ -257,24 +251,21 @@ export const getDragMenuConfig = (
|
|
|
257
251
|
{
|
|
258
252
|
label: 'increasing',
|
|
259
253
|
order: SortOrder.ASC,
|
|
260
|
-
icon: SortAscendingIcon
|
|
261
|
-
iconFallback: HipchatChevronDoubleUpIcon,
|
|
254
|
+
icon: () => <SortAscendingIcon LEGACY_fallbackIcon={HipchatChevronDoubleUpIcon} spacing={'spacious'} label={''}/>,
|
|
262
255
|
},
|
|
263
256
|
{
|
|
264
257
|
label: 'decreasing',
|
|
265
258
|
order: SortOrder.DESC,
|
|
266
|
-
icon: SortDescendingIcon
|
|
267
|
-
iconFallback: HipchatChevronDoubleDownIcon,
|
|
259
|
+
icon: () => <SortDescendingIcon LEGACY_fallbackIcon={HipchatChevronDoubleDownIcon} spacing={'spacious'} label={''}/>,
|
|
268
260
|
},
|
|
269
261
|
]
|
|
270
262
|
: [];
|
|
271
263
|
const sortConfigs = [
|
|
272
|
-
...sortOptions.map(({ label, order, icon
|
|
264
|
+
...sortOptions.map(({ label, order, icon }) => ({
|
|
273
265
|
id: `sort_column_${order}`,
|
|
274
266
|
title: `Sort ${label}`,
|
|
275
267
|
disabled: hasMergedCellsInTable,
|
|
276
268
|
icon: icon,
|
|
277
|
-
iconFallback: iconFallback,
|
|
278
269
|
onClick: (state: EditorState, dispatch?: CommandDispatch) => {
|
|
279
270
|
sortColumnWithAnalytics(editorAnalyticsAPI)(
|
|
280
271
|
INPUT_METHOD.TABLE_CONTEXT_MENU,
|
|
@@ -286,11 +277,10 @@ export const getDragMenuConfig = (
|
|
|
286
277
|
})),
|
|
287
278
|
];
|
|
288
279
|
const restConfigs = [
|
|
289
|
-
...addOptions.map(({ label, offset, icon,
|
|
280
|
+
...addOptions.map(({ label, offset, icon, keymap }) => ({
|
|
290
281
|
id: `add_${direction}_${label}`,
|
|
291
282
|
title: `Add ${direction} ${label}`,
|
|
292
283
|
icon: icon,
|
|
293
|
-
iconFallback: iconFallback,
|
|
294
284
|
onClick: (state: EditorState, dispatch?: CommandDispatch) => {
|
|
295
285
|
if (direction === 'row') {
|
|
296
286
|
insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
|
|
@@ -339,8 +329,7 @@ export const getDragMenuConfig = (
|
|
|
339
329
|
}
|
|
340
330
|
return false;
|
|
341
331
|
},
|
|
342
|
-
icon: TableColumnsDistributeIcon
|
|
343
|
-
iconFallback: EditorLayoutThreeEqualIcon,
|
|
332
|
+
icon: () => <TableColumnsDistributeIcon LEGACY_fallbackIcon={EditorLayoutThreeEqualIcon} spacing={'spacious'} label={''}/>,
|
|
344
333
|
}
|
|
345
334
|
: undefined,
|
|
346
335
|
{
|
|
@@ -353,8 +342,7 @@ export const getDragMenuConfig = (
|
|
|
353
342
|
)(state, dispatch);
|
|
354
343
|
return true;
|
|
355
344
|
},
|
|
356
|
-
icon: TableCellClearIcon
|
|
357
|
-
iconFallback: CrossCircleIcon,
|
|
345
|
+
icon: () => <TableCellClearIcon LEGACY_fallbackIcon={CrossCircleIcon} spacing={'spacious'} label={''}/>,
|
|
358
346
|
keymap: tooltip(backspace),
|
|
359
347
|
},
|
|
360
348
|
{
|
|
@@ -383,17 +371,15 @@ export const getDragMenuConfig = (
|
|
|
383
371
|
}
|
|
384
372
|
return true;
|
|
385
373
|
},
|
|
386
|
-
icon: direction === 'row' ? TableRowDeleteIcon : TableColumnDeleteIcon
|
|
387
|
-
iconFallback: RemoveIcon,
|
|
374
|
+
icon: direction === 'row' ? () => <TableRowDeleteIcon LEGACY_fallbackIcon={RemoveIcon} spacing={'spacious'} label={''}/> : () => <TableColumnDeleteIcon LEGACY_fallbackIcon={RemoveIcon} spacing={'spacious'} label={''}/>,
|
|
388
375
|
keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn),
|
|
389
376
|
},
|
|
390
377
|
...moveOptions.map(
|
|
391
|
-
({ label, canMove, icon,
|
|
378
|
+
({ label, canMove, icon, keymap, getOriginIndexes, getTargetIndex }) => ({
|
|
392
379
|
id: `move_${direction}_${label}`,
|
|
393
380
|
title: `Move ${direction} ${label}`,
|
|
394
381
|
disabled: !canMove,
|
|
395
382
|
icon: icon,
|
|
396
|
-
iconFallback: iconFallback,
|
|
397
383
|
onClick: (state: EditorState, dispatch?: CommandDispatch) => {
|
|
398
384
|
if (canMove) {
|
|
399
385
|
requestAnimationFrame(() => {
|
package/src/ui/toolbar.tsx
CHANGED
|
@@ -51,14 +51,12 @@ import {
|
|
|
51
51
|
import AlignImageCenterIcon from '@atlaskit/icon/core/align-image-center';
|
|
52
52
|
import AlignImageLeftIcon from '@atlaskit/icon/core/align-image-left';
|
|
53
53
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
54
|
-
import CustomizeIcon from '@atlaskit/icon/core/customize';
|
|
55
|
-
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
54
|
+
import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
|
|
55
|
+
import DeleteIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
|
|
56
56
|
import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
|
|
57
57
|
import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
|
|
58
58
|
import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
|
|
59
59
|
import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
|
|
60
|
-
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
61
|
-
import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
|
|
62
60
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
63
61
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
64
62
|
|
|
@@ -175,8 +173,7 @@ export const getToolbarMenuConfig = (
|
|
|
175
173
|
type: 'dropdown',
|
|
176
174
|
testId: 'table_options',
|
|
177
175
|
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
178
|
-
icon: fg('platform-visual-refresh-icons') ? undefined :
|
|
179
|
-
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
176
|
+
icon: fg('platform-visual-refresh-icons') ? undefined : CustomizeIcon,
|
|
180
177
|
iconBefore: fg('platform-visual-refresh-icons') ? CustomizeIcon : undefined,
|
|
181
178
|
title: formatMessage(messages.tableOptions),
|
|
182
179
|
hidden: options.every((option) => option.hidden),
|
|
@@ -607,7 +604,6 @@ export const getToolbarConfig =
|
|
|
607
604
|
type: 'button' as const,
|
|
608
605
|
appearance: 'danger',
|
|
609
606
|
icon: DeleteIcon,
|
|
610
|
-
iconFallback: RemoveIcon,
|
|
611
607
|
onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
|
|
612
608
|
disabled: !!resizeState && !!resizeState.dragging,
|
|
613
609
|
onMouseEnter: hoverTable(true),
|
|
@@ -844,8 +840,7 @@ const getColumnSettingItems = (
|
|
|
844
840
|
id: 'editor.table.distributeColumns',
|
|
845
841
|
type: 'button',
|
|
846
842
|
title: formatMessage(messages.distributeColumns),
|
|
847
|
-
icon: TableColumnsDistributeIcon
|
|
848
|
-
iconFallback: DistributeColumnIcon,
|
|
843
|
+
icon: () => <TableColumnsDistributeIcon LEGACY_fallbackIcon={DistributeColumnIcon} spacing={'spacious'} label={''}/>,
|
|
849
844
|
onClick: (state, dispatch, view) =>
|
|
850
845
|
getDistributeConfig(
|
|
851
846
|
getEditorContainerWidth,
|