@atlaskit/editor-plugin-table 7.19.6 → 7.19.8
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 +19 -0
- package/dist/cjs/plugin.js +1 -2
- package/dist/cjs/ui/FloatingContextualMenu/styles.js +1 -1
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +3 -14
- package/dist/cjs/ui/FloatingDragMenu/styles.js +2 -2
- package/dist/cjs/ui/common-styles.js +2 -2
- package/dist/cjs/ui/ui-styles.js +1 -1
- package/dist/cjs/utils/drag-menu.js +14 -22
- package/dist/es2019/plugin.js +31 -34
- package/dist/es2019/ui/FloatingContextualMenu/styles.js +1 -1
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +4 -15
- package/dist/es2019/ui/FloatingDragMenu/styles.js +2 -2
- package/dist/es2019/ui/common-styles.js +2 -2
- package/dist/es2019/ui/ui-styles.js +1 -1
- package/dist/es2019/utils/drag-menu.js +10 -18
- package/dist/esm/plugin.js +1 -2
- package/dist/esm/ui/FloatingContextualMenu/styles.js +1 -1
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +4 -15
- package/dist/esm/ui/FloatingDragMenu/styles.js +2 -2
- package/dist/esm/ui/common-styles.js +2 -2
- package/dist/esm/ui/ui-styles.js +1 -1
- package/dist/esm/utils/drag-menu.js +15 -23
- package/dist/types/utils/drag-menu.d.ts +1 -1
- package/dist/types-ts4.5/utils/drag-menu.d.ts +1 -1
- package/package.json +8 -11
- package/src/plugin.tsx +1 -3
- package/src/ui/FloatingContextualMenu/styles.ts +1 -1
- package/src/ui/FloatingDragMenu/DragMenu.tsx +1 -18
- package/src/ui/FloatingDragMenu/styles.ts +2 -2
- package/src/ui/common-styles.ts +2 -2
- package/src/ui/ui-styles.ts +1 -1
- package/src/utils/drag-menu.ts +7 -27
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.19.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`7c716627bd4f4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7c716627bd4f4) -
|
|
8
|
+
Table Drag move column/row logic FF cleanup
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 7.19.7
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`d9b562bd66f8e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d9b562bd66f8e) -
|
|
16
|
+
[ux] [ED-23947] restoring the original order of the typeahead menu so that actions, media,
|
|
17
|
+
mentions and emojis are above the fold (in the top 5 results). this change is a major because it
|
|
18
|
+
removes the `getEditorFeatureFlags prop` for plugins. if any consumers who have adopted these
|
|
19
|
+
changes to the public API, they should remove them on their side too.
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 7.19.6
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -442,14 +442,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
|
|
|
442
442
|
},
|
|
443
443
|
pluginsOptions: {
|
|
444
444
|
quickInsert: function quickInsert(_ref19) {
|
|
445
|
-
var _options$getEditorFea3;
|
|
446
445
|
var formatMessage = _ref19.formatMessage;
|
|
447
446
|
return [{
|
|
448
447
|
id: 'table',
|
|
449
448
|
title: formatMessage(_messages.toolbarInsertBlockMessages.table),
|
|
450
449
|
description: formatMessage(_messages.toolbarInsertBlockMessages.tableDescription),
|
|
451
450
|
keywords: ['cell', 'table'],
|
|
452
|
-
priority:
|
|
451
|
+
priority: 600,
|
|
453
452
|
keyshortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
|
|
454
453
|
icon: function icon() {
|
|
455
454
|
return /*#__PURE__*/_react.default.createElement(_icons.IconTable, null);
|
|
@@ -21,7 +21,7 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
|
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
25
25
|
var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)({
|
|
26
26
|
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
27
27
|
display: 'flex'
|
|
@@ -23,7 +23,6 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
|
|
|
23
23
|
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
24
24
|
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
25
25
|
var _backgroundColor = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/background-color"));
|
|
26
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
27
26
|
var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
|
|
28
27
|
var _commands = require("../../commands");
|
|
29
28
|
var _commandsWithAnalytics = require("../../commands-with-analytics");
|
|
@@ -186,7 +185,7 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
|
|
|
186
185
|
};
|
|
187
186
|
var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_uiColor.ColorPalette);
|
|
188
187
|
var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
189
|
-
var _pluginConfig$allowBa;
|
|
188
|
+
var _tableMap$hasMergedCe, _pluginConfig$allowBa;
|
|
190
189
|
var _ref$direction = _ref.direction,
|
|
191
190
|
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
|
|
192
191
|
index = _ref.index,
|
|
@@ -220,19 +219,9 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
|
|
|
220
219
|
var _getPluginState = (0, _pluginFactory.getPluginState)(state),
|
|
221
220
|
isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
|
|
222
221
|
var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
|
|
223
|
-
var
|
|
224
|
-
var hasMergedCellsInTable;
|
|
225
|
-
if ((0, _platformFeatureFlags.fg)('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
|
|
226
|
-
var _tableMap$hasMergedCe;
|
|
227
|
-
shouldMoveDisabled = false;
|
|
228
|
-
hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
229
|
-
} else {
|
|
230
|
-
var hasMergedCells = direction === 'row' ? _utils3.hasMergedCellsInRow : _utils3.hasMergedCellsInColumn;
|
|
231
|
-
shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
232
|
-
hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
|
|
233
|
-
}
|
|
222
|
+
var hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
234
223
|
var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
|
|
235
|
-
var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth,
|
|
224
|
+
var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
|
|
236
225
|
var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect),
|
|
237
226
|
menuItems = _convertToDropdownIte.menuItems,
|
|
238
227
|
menuCallback = _convertToDropdownIte.menuCallback;
|
|
@@ -21,7 +21,7 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
|
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
25
25
|
var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)({
|
|
26
26
|
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
27
27
|
display: 'flex'
|
|
@@ -33,7 +33,7 @@ var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = func
|
|
|
33
33
|
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), tableSortColumnReorder ? _consts.TABLE_DRAG_MENU_PADDING_TOP + _consts.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + _consts.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
|
|
34
34
|
};
|
|
35
35
|
|
|
36
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
37
37
|
var toggleStyles = exports.toggleStyles = (0, _react.css)({
|
|
38
38
|
display: 'flex',
|
|
39
39
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
@@ -83,8 +83,8 @@ var tableStyles = exports.tableStyles = function tableStyles(props) {
|
|
|
83
83
|
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
|
|
84
84
|
};
|
|
85
85
|
|
|
86
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles
|
|
86
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
87
87
|
var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
|
|
88
88
|
|
|
89
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
90
90
|
var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);
|
package/dist/cjs/ui/ui-styles.js
CHANGED
|
@@ -141,7 +141,7 @@ var hoveredCell = exports.hoveredCell = function hoveredCell() {
|
|
|
141
141
|
return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableBorderColor);
|
|
142
142
|
};
|
|
143
143
|
|
|
144
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
144
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
145
145
|
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; // We need to override the background-color added to the cell\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
|
|
146
146
|
|
|
147
147
|
// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
|
|
@@ -18,7 +18,6 @@ var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/edi
|
|
|
18
18
|
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
19
19
|
var _chevronDoubleDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-down"));
|
|
20
20
|
var _chevronDoubleUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-up"));
|
|
21
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
21
|
var _commandsWithAnalytics = require("../commands-with-analytics");
|
|
23
22
|
var _commandsWithAnalytics2 = require("../pm-plugins/drag-and-drop/commands-with-analytics");
|
|
24
23
|
var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
|
|
@@ -47,17 +46,10 @@ var canMove = exports.canMove = function canMove(sourceType, direction, totalIte
|
|
|
47
46
|
if (hasMergedCellsInTarget) {
|
|
48
47
|
return false;
|
|
49
48
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
} else {
|
|
56
|
-
// Currently we can't move in any direction if there are merged cells in the source
|
|
57
|
-
var hasMergedCellsInSource = isRow ? (0, _mergedCells.hasMergedCellsInRow)(selectedIndexes)(selection) : (0, _mergedCells.hasMergedCellsInColumn)(selectedIndexes)(selection);
|
|
58
|
-
if (hasMergedCellsInSource) {
|
|
59
|
-
return false;
|
|
60
|
-
}
|
|
49
|
+
|
|
50
|
+
// We can't move if selection in the source is not a rectangle
|
|
51
|
+
if ((0, _mergedCells.hasMergedCellsInSelection)(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
|
|
52
|
+
return false;
|
|
61
53
|
}
|
|
62
54
|
return true;
|
|
63
55
|
};
|
|
@@ -75,13 +67,13 @@ var defaultSelectionRect = {
|
|
|
75
67
|
right: 0,
|
|
76
68
|
bottom: 0
|
|
77
69
|
};
|
|
78
|
-
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth,
|
|
70
|
+
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
|
|
79
71
|
var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
|
|
80
|
-
var isTableScalingEnabled = arguments.length >
|
|
81
|
-
var tableDuplicateCellColouring = arguments.length >
|
|
82
|
-
var isTableFixedColumnWidthsOptionEnabled = arguments.length >
|
|
83
|
-
var shouldUseIncreasedScalingPercent = arguments.length >
|
|
84
|
-
var tableSortColumnReorder = arguments.length >
|
|
72
|
+
var isTableScalingEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
|
|
73
|
+
var tableDuplicateCellColouring = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
|
|
74
|
+
var isTableFixedColumnWidthsOptionEnabled = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
|
|
75
|
+
var shouldUseIncreasedScalingPercent = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
|
|
76
|
+
var tableSortColumnReorder = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : false;
|
|
85
77
|
var selection = editorView.state.selection;
|
|
86
78
|
var addOptions = direction === 'row' ? [{
|
|
87
79
|
label: 'above',
|
|
@@ -108,7 +100,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
108
100
|
label: 'up',
|
|
109
101
|
icon: _arrowUp.default,
|
|
110
102
|
keymap: _keymaps.moveRowUp,
|
|
111
|
-
canMove:
|
|
103
|
+
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),
|
|
112
104
|
getOriginIndexes: _selection.getSelectedRowIndexes,
|
|
113
105
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
114
106
|
return selectionRect.top - 1;
|
|
@@ -117,7 +109,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
117
109
|
label: 'down',
|
|
118
110
|
icon: _arrowDown.default,
|
|
119
111
|
keymap: _keymaps.moveRowDown,
|
|
120
|
-
canMove:
|
|
112
|
+
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),
|
|
121
113
|
getOriginIndexes: _selection.getSelectedRowIndexes,
|
|
122
114
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
123
115
|
return selectionRect.bottom;
|
|
@@ -126,7 +118,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
126
118
|
label: 'left',
|
|
127
119
|
icon: _arrowLeft.default,
|
|
128
120
|
keymap: _keymaps.moveColumnLeft,
|
|
129
|
-
canMove:
|
|
121
|
+
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),
|
|
130
122
|
getOriginIndexes: _selection.getSelectedColumnIndexes,
|
|
131
123
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
132
124
|
return selectionRect.left - 1;
|
|
@@ -135,7 +127,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
135
127
|
label: 'right',
|
|
136
128
|
icon: _arrowRight.default,
|
|
137
129
|
keymap: _keymaps.moveColumnRight,
|
|
138
|
-
canMove:
|
|
130
|
+
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),
|
|
139
131
|
getOriginIndexes: _selection.getSelectedColumnIndexes,
|
|
140
132
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
141
133
|
return selectionRect.right;
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -437,40 +437,37 @@ const tablesPlugin = ({
|
|
|
437
437
|
pluginsOptions: {
|
|
438
438
|
quickInsert: ({
|
|
439
439
|
formatMessage
|
|
440
|
-
}) => {
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
}
|
|
472
|
-
}];
|
|
473
|
-
},
|
|
440
|
+
}) => [{
|
|
441
|
+
id: 'table',
|
|
442
|
+
title: formatMessage(messages.table),
|
|
443
|
+
description: formatMessage(messages.tableDescription),
|
|
444
|
+
keywords: ['cell', 'table'],
|
|
445
|
+
priority: 600,
|
|
446
|
+
keyshortcut: tooltip(toggleTable),
|
|
447
|
+
icon: () => /*#__PURE__*/React.createElement(IconTable, null),
|
|
448
|
+
action(insert, state) {
|
|
449
|
+
var _api$table;
|
|
450
|
+
// see comment on tablesPlugin.getSharedState on usage
|
|
451
|
+
const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
|
|
452
|
+
const tableNode = createTableWithWidth({
|
|
453
|
+
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
454
|
+
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
|
|
455
|
+
isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled
|
|
456
|
+
})(state.schema);
|
|
457
|
+
const tr = insert(tableNode);
|
|
458
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
459
|
+
action: ACTION.INSERTED,
|
|
460
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
461
|
+
actionSubjectId: ACTION_SUBJECT_ID.TABLE,
|
|
462
|
+
attributes: {
|
|
463
|
+
inputMethod: INPUT_METHOD.QUICK_INSERT,
|
|
464
|
+
localId: tableNode.attrs.localId
|
|
465
|
+
},
|
|
466
|
+
eventType: EVENT_TYPE.TRACK
|
|
467
|
+
})(tr);
|
|
468
|
+
return tr;
|
|
469
|
+
}
|
|
470
|
+
}],
|
|
474
471
|
floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
|
|
475
472
|
}
|
|
476
473
|
};
|
|
@@ -11,7 +11,7 @@ export const cellColourPreviewStyles = selectedColor => css({
|
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
13
|
|
|
14
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
15
15
|
export const elementBeforeIconStyles = css({
|
|
16
16
|
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
17
17
|
display: 'flex'
|
|
@@ -18,7 +18,6 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
|
18
18
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
19
19
|
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
|
|
20
20
|
import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
|
|
21
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
22
21
|
import Toggle from '@atlaskit/toggle';
|
|
23
22
|
import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
|
|
24
23
|
import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../commands-with-analytics';
|
|
@@ -26,7 +25,7 @@ import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
|
|
|
26
25
|
import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
|
|
27
26
|
import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
|
|
28
27
|
import { TableCssClassName as ClassName } from '../../types';
|
|
29
|
-
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled,
|
|
28
|
+
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
|
|
30
29
|
import { getDragMenuConfig } from '../../utils/drag-menu';
|
|
31
30
|
import { colorPalletteColumns } from '../consts';
|
|
32
31
|
import { DropdownMenu } from './DropdownMenu';
|
|
@@ -193,7 +192,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
|
|
|
193
192
|
isTableFixedColumnWidthsOptionEnabled,
|
|
194
193
|
tableSortColumnReorder
|
|
195
194
|
}) => {
|
|
196
|
-
var _pluginConfig$allowBa;
|
|
195
|
+
var _tableMap$hasMergedCe, _pluginConfig$allowBa;
|
|
197
196
|
const {
|
|
198
197
|
state,
|
|
199
198
|
dispatch
|
|
@@ -207,19 +206,9 @@ export const DragMenu = /*#__PURE__*/React.memo(({
|
|
|
207
206
|
isKeyboardModeActive
|
|
208
207
|
} = getPluginState(state);
|
|
209
208
|
const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
|
|
210
|
-
|
|
211
|
-
let hasMergedCellsInTable;
|
|
212
|
-
if (fg('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
|
|
213
|
-
var _tableMap$hasMergedCe;
|
|
214
|
-
shouldMoveDisabled = false;
|
|
215
|
-
hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
216
|
-
} else {
|
|
217
|
-
const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
|
|
218
|
-
shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
219
|
-
hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
|
|
220
|
-
}
|
|
209
|
+
const hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
221
210
|
const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
|
|
222
|
-
const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth,
|
|
211
|
+
const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
|
|
223
212
|
const {
|
|
224
213
|
menuItems,
|
|
225
214
|
menuCallback
|
|
@@ -11,7 +11,7 @@ export const cellColourPreviewStyles = selectedColor => css({
|
|
|
11
11
|
}
|
|
12
12
|
});
|
|
13
13
|
|
|
14
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
15
15
|
export const elementBeforeIconStyles = css({
|
|
16
16
|
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
17
17
|
display: 'flex'
|
|
@@ -55,7 +55,7 @@ export const dragMenuBackgroundColorStyles = (tableSortColumnReorder = false) =>
|
|
|
55
55
|
}
|
|
56
56
|
`;
|
|
57
57
|
|
|
58
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
59
59
|
export const toggleStyles = css({
|
|
60
60
|
display: 'flex',
|
|
61
61
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
@@ -1002,7 +1002,7 @@ export const tableStyles = props => css`
|
|
|
1002
1002
|
${shadowSentinelStyles}
|
|
1003
1003
|
`;
|
|
1004
1004
|
|
|
1005
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles
|
|
1005
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
1006
1006
|
export const tableFullPageEditorStyles = css`
|
|
1007
1007
|
.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
|
|
1008
1008
|
margin-left: 0;
|
|
@@ -1012,7 +1012,7 @@ export const tableFullPageEditorStyles = css`
|
|
|
1012
1012
|
}
|
|
1013
1013
|
`;
|
|
1014
1014
|
|
|
1015
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
1015
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
1016
1016
|
export const tableCommentEditorStyles = css`
|
|
1017
1017
|
.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
|
|
1018
1018
|
margin-left: 0;
|
|
@@ -565,7 +565,7 @@ export const hoveredCell = () => css`
|
|
|
565
565
|
}
|
|
566
566
|
`;
|
|
567
567
|
|
|
568
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
568
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
569
569
|
export const hoveredWarningCell = css`
|
|
570
570
|
:not(.${ClassName.IS_RESIZING})
|
|
571
571
|
.${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
|
|
@@ -10,13 +10,12 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
|
|
|
10
10
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
11
11
|
import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
|
|
12
12
|
import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
|
|
13
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
14
13
|
import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, sortColumnWithAnalytics } from '../commands-with-analytics';
|
|
15
14
|
import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
|
|
16
15
|
import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
17
16
|
import { getClosestSelectionRect } from '../toolbar';
|
|
18
17
|
import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
|
|
19
|
-
import {
|
|
18
|
+
import { hasMergedCellsInSelection, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
|
|
20
19
|
import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
|
|
21
20
|
export const getTargetIndex = (selectedIndexes, direction) => Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
|
|
22
21
|
export const canMove = (sourceType, direction, totalItemsOfSourceTypeCount, selection, selectionRect) => {
|
|
@@ -37,17 +36,10 @@ export const canMove = (sourceType, direction, totalItemsOfSourceTypeCount, sele
|
|
|
37
36
|
if (hasMergedCellsInTarget) {
|
|
38
37
|
return false;
|
|
39
38
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
} else {
|
|
46
|
-
// Currently we can't move in any direction if there are merged cells in the source
|
|
47
|
-
const hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
|
|
48
|
-
if (hasMergedCellsInSource) {
|
|
49
|
-
return false;
|
|
50
|
-
}
|
|
39
|
+
|
|
40
|
+
// We can't move if selection in the source is not a rectangle
|
|
41
|
+
if (hasMergedCellsInSelection(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
|
|
42
|
+
return false;
|
|
51
43
|
}
|
|
52
44
|
return true;
|
|
53
45
|
};
|
|
@@ -65,7 +57,7 @@ const defaultSelectionRect = {
|
|
|
65
57
|
right: 0,
|
|
66
58
|
bottom: 0
|
|
67
59
|
};
|
|
68
|
-
export const getDragMenuConfig = (direction, getEditorContainerWidth,
|
|
60
|
+
export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, tableSortColumnReorder = false) => {
|
|
69
61
|
var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
|
|
70
62
|
const {
|
|
71
63
|
selection
|
|
@@ -95,28 +87,28 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
|
|
|
95
87
|
label: 'up',
|
|
96
88
|
icon: ArrowUpIcon,
|
|
97
89
|
keymap: moveRowUp,
|
|
98
|
-
canMove:
|
|
90
|
+
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),
|
|
99
91
|
getOriginIndexes: getSelectedRowIndexes,
|
|
100
92
|
getTargetIndex: selectionRect => selectionRect.top - 1
|
|
101
93
|
}, {
|
|
102
94
|
label: 'down',
|
|
103
95
|
icon: ArrowDownIcon,
|
|
104
96
|
keymap: moveRowDown,
|
|
105
|
-
canMove:
|
|
97
|
+
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),
|
|
106
98
|
getOriginIndexes: getSelectedRowIndexes,
|
|
107
99
|
getTargetIndex: selectionRect => selectionRect.bottom
|
|
108
100
|
}] : [{
|
|
109
101
|
label: 'left',
|
|
110
102
|
icon: ArrowLeftIcon,
|
|
111
103
|
keymap: moveColumnLeft,
|
|
112
|
-
canMove:
|
|
104
|
+
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),
|
|
113
105
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
114
106
|
getTargetIndex: selectionRect => selectionRect.left - 1
|
|
115
107
|
}, {
|
|
116
108
|
label: 'right',
|
|
117
109
|
icon: ArrowRightIcon,
|
|
118
110
|
keymap: moveColumnRight,
|
|
119
|
-
canMove:
|
|
111
|
+
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),
|
|
120
112
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
121
113
|
getTargetIndex: selectionRect => selectionRect.right
|
|
122
114
|
}];
|
package/dist/esm/plugin.js
CHANGED
|
@@ -435,14 +435,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
|
|
|
435
435
|
},
|
|
436
436
|
pluginsOptions: {
|
|
437
437
|
quickInsert: function quickInsert(_ref19) {
|
|
438
|
-
var _options$getEditorFea3;
|
|
439
438
|
var formatMessage = _ref19.formatMessage;
|
|
440
439
|
return [{
|
|
441
440
|
id: 'table',
|
|
442
441
|
title: formatMessage(messages.table),
|
|
443
442
|
description: formatMessage(messages.tableDescription),
|
|
444
443
|
keywords: ['cell', 'table'],
|
|
445
|
-
priority:
|
|
444
|
+
priority: 600,
|
|
446
445
|
keyshortcut: tooltip(toggleTable),
|
|
447
446
|
icon: function icon() {
|
|
448
447
|
return /*#__PURE__*/React.createElement(IconTable, null);
|
|
@@ -15,7 +15,7 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
|
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
19
19
|
export var elementBeforeIconStyles = css({
|
|
20
20
|
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
21
21
|
display: 'flex'
|
|
@@ -20,7 +20,6 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
|
20
20
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
21
21
|
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
|
|
22
22
|
import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
|
|
23
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
24
23
|
import Toggle from '@atlaskit/toggle';
|
|
25
24
|
import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
|
|
26
25
|
import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../commands-with-analytics';
|
|
@@ -28,7 +27,7 @@ import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
|
|
|
28
27
|
import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
|
|
29
28
|
import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
|
|
30
29
|
import { TableCssClassName as ClassName } from '../../types';
|
|
31
|
-
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled,
|
|
30
|
+
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
|
|
32
31
|
import { getDragMenuConfig } from '../../utils/drag-menu';
|
|
33
32
|
import { colorPalletteColumns } from '../consts';
|
|
34
33
|
import { DropdownMenu } from './DropdownMenu';
|
|
@@ -175,7 +174,7 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
|
|
|
175
174
|
};
|
|
176
175
|
var ColorPaletteWithListeners = withOuterListeners(ColorPalette);
|
|
177
176
|
export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
178
|
-
var _pluginConfig$allowBa;
|
|
177
|
+
var _tableMap$hasMergedCe, _pluginConfig$allowBa;
|
|
179
178
|
var _ref$direction = _ref.direction,
|
|
180
179
|
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
|
|
181
180
|
index = _ref.index,
|
|
@@ -209,19 +208,9 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
209
208
|
var _getPluginState = getPluginState(state),
|
|
210
209
|
isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
|
|
211
210
|
var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
|
|
212
|
-
var
|
|
213
|
-
var hasMergedCellsInTable;
|
|
214
|
-
if (fg('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
|
|
215
|
-
var _tableMap$hasMergedCe;
|
|
216
|
-
shouldMoveDisabled = false;
|
|
217
|
-
hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
218
|
-
} else {
|
|
219
|
-
var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
|
|
220
|
-
shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
221
|
-
hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
|
|
222
|
-
}
|
|
211
|
+
var hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
223
212
|
var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
|
|
224
|
-
var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth,
|
|
213
|
+
var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
|
|
225
214
|
var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect),
|
|
226
215
|
menuItems = _convertToDropdownIte.menuItems,
|
|
227
216
|
menuCallback = _convertToDropdownIte.menuCallback;
|
|
@@ -15,7 +15,7 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
|
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
19
19
|
export var elementBeforeIconStyles = css({
|
|
20
20
|
marginRight: "var(--ds-space-negative-075, -6px)",
|
|
21
21
|
display: 'flex'
|
|
@@ -27,7 +27,7 @@ export var dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyle
|
|
|
27
27
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), tableSortColumnReorder ? TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
31
31
|
export var toggleStyles = css({
|
|
32
32
|
display: 'flex',
|
|
33
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
@@ -77,8 +77,8 @@ export var tableStyles = function tableStyles(props) {
|
|
|
77
77
|
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
|
|
78
78
|
};
|
|
79
79
|
|
|
80
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles
|
|
80
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
81
81
|
export var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
|
|
82
82
|
|
|
83
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
84
84
|
export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);
|
package/dist/esm/ui/ui-styles.js
CHANGED
|
@@ -134,7 +134,7 @@ export var hoveredCell = function hoveredCell() {
|
|
|
134
134
|
return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, tableBorderColor);
|
|
135
135
|
};
|
|
136
136
|
|
|
137
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
137
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
138
138
|
export var hoveredWarningCell = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; // We need to override the background-color added to the cell\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
|
|
139
139
|
|
|
140
140
|
// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
|
|
@@ -11,13 +11,12 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
|
|
|
11
11
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
12
12
|
import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
|
|
13
13
|
import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
|
|
14
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
15
14
|
import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, sortColumnWithAnalytics } from '../commands-with-analytics';
|
|
16
15
|
import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
|
|
17
16
|
import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
18
17
|
import { getClosestSelectionRect } from '../toolbar';
|
|
19
18
|
import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
|
|
20
|
-
import {
|
|
19
|
+
import { hasMergedCellsInSelection, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
|
|
21
20
|
import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
|
|
22
21
|
export var getTargetIndex = function getTargetIndex(selectedIndexes, direction) {
|
|
23
22
|
return Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
|
|
@@ -40,17 +39,10 @@ export var canMove = function canMove(sourceType, direction, totalItemsOfSourceT
|
|
|
40
39
|
if (hasMergedCellsInTarget) {
|
|
41
40
|
return false;
|
|
42
41
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
} else {
|
|
49
|
-
// Currently we can't move in any direction if there are merged cells in the source
|
|
50
|
-
var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
|
|
51
|
-
if (hasMergedCellsInSource) {
|
|
52
|
-
return false;
|
|
53
|
-
}
|
|
42
|
+
|
|
43
|
+
// We can't move if selection in the source is not a rectangle
|
|
44
|
+
if (hasMergedCellsInSelection(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
|
|
45
|
+
return false;
|
|
54
46
|
}
|
|
55
47
|
return true;
|
|
56
48
|
};
|
|
@@ -68,13 +60,13 @@ var defaultSelectionRect = {
|
|
|
68
60
|
right: 0,
|
|
69
61
|
bottom: 0
|
|
70
62
|
};
|
|
71
|
-
export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth,
|
|
63
|
+
export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
|
|
72
64
|
var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
|
|
73
|
-
var isTableScalingEnabled = arguments.length >
|
|
74
|
-
var tableDuplicateCellColouring = arguments.length >
|
|
75
|
-
var isTableFixedColumnWidthsOptionEnabled = arguments.length >
|
|
76
|
-
var shouldUseIncreasedScalingPercent = arguments.length >
|
|
77
|
-
var tableSortColumnReorder = arguments.length >
|
|
65
|
+
var isTableScalingEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
|
|
66
|
+
var tableDuplicateCellColouring = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
|
|
67
|
+
var isTableFixedColumnWidthsOptionEnabled = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
|
|
68
|
+
var shouldUseIncreasedScalingPercent = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
|
|
69
|
+
var tableSortColumnReorder = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : false;
|
|
78
70
|
var selection = editorView.state.selection;
|
|
79
71
|
var addOptions = direction === 'row' ? [{
|
|
80
72
|
label: 'above',
|
|
@@ -101,7 +93,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
101
93
|
label: 'up',
|
|
102
94
|
icon: ArrowUpIcon,
|
|
103
95
|
keymap: moveRowUp,
|
|
104
|
-
canMove:
|
|
96
|
+
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),
|
|
105
97
|
getOriginIndexes: getSelectedRowIndexes,
|
|
106
98
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
107
99
|
return selectionRect.top - 1;
|
|
@@ -110,7 +102,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
110
102
|
label: 'down',
|
|
111
103
|
icon: ArrowDownIcon,
|
|
112
104
|
keymap: moveRowDown,
|
|
113
|
-
canMove:
|
|
105
|
+
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),
|
|
114
106
|
getOriginIndexes: getSelectedRowIndexes,
|
|
115
107
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
116
108
|
return selectionRect.bottom;
|
|
@@ -119,7 +111,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
119
111
|
label: 'left',
|
|
120
112
|
icon: ArrowLeftIcon,
|
|
121
113
|
keymap: moveColumnLeft,
|
|
122
|
-
canMove:
|
|
114
|
+
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),
|
|
123
115
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
124
116
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
125
117
|
return selectionRect.left - 1;
|
|
@@ -128,7 +120,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
128
120
|
label: 'right',
|
|
129
121
|
icon: ArrowRightIcon,
|
|
130
122
|
keymap: moveColumnRight,
|
|
131
|
-
canMove:
|
|
123
|
+
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),
|
|
132
124
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
133
125
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
134
126
|
return selectionRect.right;
|
|
@@ -13,4 +13,4 @@ export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
|
|
|
13
13
|
icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
|
|
14
14
|
keymap?: string;
|
|
15
15
|
}
|
|
16
|
-
export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth,
|
|
16
|
+
export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean) => DragMenuConfig[];
|
|
@@ -13,4 +13,4 @@ export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
|
|
|
13
13
|
icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
|
|
14
14
|
keymap?: string;
|
|
15
15
|
}
|
|
16
|
-
export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth,
|
|
16
|
+
export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean) => DragMenuConfig[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.19.
|
|
3
|
+
"version": "7.19.8",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/adf-schema": "^39.0.3",
|
|
32
|
-
"@atlaskit/button": "^18.
|
|
32
|
+
"@atlaskit/button": "^18.2.0",
|
|
33
33
|
"@atlaskit/custom-steps": "^0.4.0",
|
|
34
|
-
"@atlaskit/editor-common": "^
|
|
34
|
+
"@atlaskit/editor-common": "^84.1.0",
|
|
35
35
|
"@atlaskit/editor-palette": "1.6.0",
|
|
36
36
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^1.4.0",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"@atlaskit/editor-prosemirror": "4.0.1",
|
|
44
44
|
"@atlaskit/editor-shared-styles": "^2.12.0",
|
|
45
45
|
"@atlaskit/editor-tables": "^2.7.0",
|
|
46
|
-
"@atlaskit/icon": "^22.
|
|
47
|
-
"@atlaskit/menu": "^2.
|
|
46
|
+
"@atlaskit/icon": "^22.6.0",
|
|
47
|
+
"@atlaskit/menu": "^2.7.0",
|
|
48
48
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
49
|
-
"@atlaskit/pragmatic-drag-and-drop": "^1.
|
|
50
|
-
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.
|
|
49
|
+
"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
|
|
50
|
+
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
|
|
51
51
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
|
|
52
|
-
"@atlaskit/primitives": "^10.
|
|
52
|
+
"@atlaskit/primitives": "^10.1.0",
|
|
53
53
|
"@atlaskit/theme": "^12.11.0",
|
|
54
54
|
"@atlaskit/toggle": "^13.2.0",
|
|
55
55
|
"@atlaskit/tokens": "^1.53.0",
|
|
@@ -102,9 +102,6 @@
|
|
|
102
102
|
}
|
|
103
103
|
},
|
|
104
104
|
"platform-feature-flags": {
|
|
105
|
-
"platform.editor.table.drag-move-options-logic-update_fp7xw": {
|
|
106
|
-
"type": "boolean"
|
|
107
|
-
},
|
|
108
105
|
"platform.editor.a11y-table-resizing_uapcv": {
|
|
109
106
|
"type": "boolean"
|
|
110
107
|
},
|
package/src/plugin.tsx
CHANGED
|
@@ -654,9 +654,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
|
|
|
654
654
|
title: formatMessage(messages.table),
|
|
655
655
|
description: formatMessage(messages.tableDescription),
|
|
656
656
|
keywords: ['cell', 'table'],
|
|
657
|
-
priority:
|
|
658
|
-
? 800
|
|
659
|
-
: 600,
|
|
657
|
+
priority: 600,
|
|
660
658
|
keyshortcut: tooltip(toggleTable),
|
|
661
659
|
icon: () => <IconTable />,
|
|
662
660
|
action(insert, state) {
|
|
@@ -16,7 +16,7 @@ export const cellColourPreviewStyles = (selectedColor: string) =>
|
|
|
16
16
|
},
|
|
17
17
|
});
|
|
18
18
|
|
|
19
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
20
20
|
export const elementBeforeIconStyles = css({
|
|
21
21
|
marginRight: token('space.negative.075', '-6px'),
|
|
22
22
|
display: 'flex',
|
|
@@ -39,7 +39,6 @@ import {
|
|
|
39
39
|
isSelectionType,
|
|
40
40
|
} from '@atlaskit/editor-tables/utils';
|
|
41
41
|
import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
|
|
42
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
43
42
|
import Toggle from '@atlaskit/toggle';
|
|
44
43
|
|
|
45
44
|
import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
|
|
@@ -58,11 +57,8 @@ import {
|
|
|
58
57
|
checkIfHeaderColumnEnabled,
|
|
59
58
|
checkIfHeaderRowEnabled,
|
|
60
59
|
checkIfNumberColumnEnabled,
|
|
61
|
-
getMergedCellsPositions,
|
|
62
60
|
getSelectedColumnIndexes,
|
|
63
61
|
getSelectedRowIndexes,
|
|
64
|
-
hasMergedCellsInColumn,
|
|
65
|
-
hasMergedCellsInRow,
|
|
66
62
|
} from '../../utils';
|
|
67
63
|
import type { DragMenuConfig, DragMenuOptionIdType } from '../../utils/drag-menu';
|
|
68
64
|
import { getDragMenuConfig } from '../../utils/drag-menu';
|
|
@@ -290,25 +286,12 @@ export const DragMenu = React.memo(
|
|
|
290
286
|
? getSelectionRect(selection)!
|
|
291
287
|
: findCellRectClosestToPos(selection.$from);
|
|
292
288
|
|
|
293
|
-
|
|
294
|
-
let hasMergedCellsInTable;
|
|
295
|
-
if (fg('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
|
|
296
|
-
shouldMoveDisabled = false;
|
|
297
|
-
hasMergedCellsInTable = tableMap?.hasMergedCells() ?? false;
|
|
298
|
-
} else {
|
|
299
|
-
const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
|
|
300
|
-
|
|
301
|
-
shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
302
|
-
|
|
303
|
-
hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
|
|
304
|
-
}
|
|
305
|
-
|
|
289
|
+
const hasMergedCellsInTable = tableMap?.hasMergedCells() ?? false;
|
|
306
290
|
const allowBackgroundColor = pluginConfig?.allowBackgroundColor ?? false;
|
|
307
291
|
|
|
308
292
|
const dragMenuConfig = getDragMenuConfig(
|
|
309
293
|
direction,
|
|
310
294
|
getEditorContainerWidth,
|
|
311
|
-
!shouldMoveDisabled,
|
|
312
295
|
hasMergedCellsInTable,
|
|
313
296
|
editorView,
|
|
314
297
|
tableMap,
|
|
@@ -21,7 +21,7 @@ export const cellColourPreviewStyles = (selectedColor: string) =>
|
|
|
21
21
|
},
|
|
22
22
|
});
|
|
23
23
|
|
|
24
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
25
25
|
export const elementBeforeIconStyles = css({
|
|
26
26
|
marginRight: token('space.negative.075', '-6px'),
|
|
27
27
|
display: 'flex',
|
|
@@ -69,7 +69,7 @@ export const dragMenuBackgroundColorStyles = (tableSortColumnReorder: boolean =
|
|
|
69
69
|
}
|
|
70
70
|
`;
|
|
71
71
|
|
|
72
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
73
73
|
export const toggleStyles = css({
|
|
74
74
|
display: 'flex',
|
|
75
75
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
package/src/ui/common-styles.ts
CHANGED
|
@@ -1082,7 +1082,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
|
|
|
1082
1082
|
${shadowSentinelStyles}
|
|
1083
1083
|
`;
|
|
1084
1084
|
|
|
1085
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles
|
|
1085
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
1086
1086
|
export const tableFullPageEditorStyles = css`
|
|
1087
1087
|
.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
|
|
1088
1088
|
margin-left: 0;
|
|
@@ -1092,7 +1092,7 @@ export const tableFullPageEditorStyles = css`
|
|
|
1092
1092
|
}
|
|
1093
1093
|
`;
|
|
1094
1094
|
|
|
1095
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
1095
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
1096
1096
|
export const tableCommentEditorStyles = css`
|
|
1097
1097
|
.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
|
|
1098
1098
|
margin-left: 0;
|
package/src/ui/ui-styles.ts
CHANGED
|
@@ -640,7 +640,7 @@ export const hoveredCell = () => css`
|
|
|
640
640
|
}
|
|
641
641
|
`;
|
|
642
642
|
|
|
643
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
643
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
644
644
|
export const hoveredWarningCell = css`
|
|
645
645
|
:not(.${ClassName.IS_RESIZING})
|
|
646
646
|
.${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
|
package/src/utils/drag-menu.ts
CHANGED
|
@@ -34,7 +34,6 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
|
|
|
34
34
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
35
35
|
import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
|
|
36
36
|
import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
|
|
37
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
38
37
|
|
|
39
38
|
import {
|
|
40
39
|
deleteColumnsWithAnalytics,
|
|
@@ -52,8 +51,6 @@ import type { DraggableData, DraggableType, TableDirection } from '../types';
|
|
|
52
51
|
import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
|
|
53
52
|
|
|
54
53
|
import {
|
|
55
|
-
hasMergedCellsInColumn,
|
|
56
|
-
hasMergedCellsInRow,
|
|
57
54
|
hasMergedCellsInSelection,
|
|
58
55
|
hasMergedCellsWithColumnNextToColumnIndex,
|
|
59
56
|
hasMergedCellsWithRowNextToRowIndex,
|
|
@@ -94,20 +91,9 @@ export const canMove = (
|
|
|
94
91
|
return false;
|
|
95
92
|
}
|
|
96
93
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return false;
|
|
101
|
-
}
|
|
102
|
-
} else {
|
|
103
|
-
// Currently we can't move in any direction if there are merged cells in the source
|
|
104
|
-
const hasMergedCellsInSource = isRow
|
|
105
|
-
? hasMergedCellsInRow(selectedIndexes)(selection)
|
|
106
|
-
: hasMergedCellsInColumn(selectedIndexes)(selection);
|
|
107
|
-
|
|
108
|
-
if (hasMergedCellsInSource) {
|
|
109
|
-
return false;
|
|
110
|
-
}
|
|
94
|
+
// We can't move if selection in the source is not a rectangle
|
|
95
|
+
if (hasMergedCellsInSelection(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
|
|
96
|
+
return false;
|
|
111
97
|
}
|
|
112
98
|
|
|
113
99
|
return true;
|
|
@@ -149,7 +135,6 @@ const defaultSelectionRect = { left: 0, top: 0, right: 0, bottom: 0 };
|
|
|
149
135
|
export const getDragMenuConfig = (
|
|
150
136
|
direction: TableDirection,
|
|
151
137
|
getEditorContainerWidth: GetEditorContainerWidth,
|
|
152
|
-
canDrag: boolean,
|
|
153
138
|
hasMergedCellsInTable: boolean,
|
|
154
139
|
editorView: EditorView,
|
|
155
140
|
tableMap?: TableMap,
|
|
@@ -202,8 +187,7 @@ export const getDragMenuConfig = (
|
|
|
202
187
|
label: 'up',
|
|
203
188
|
icon: ArrowUpIcon,
|
|
204
189
|
keymap: moveRowUp,
|
|
205
|
-
canMove:
|
|
206
|
-
canDrag && canMove('table-row', -1, tableMap?.height ?? 0, selection, selectionRect),
|
|
190
|
+
canMove: canMove('table-row', -1, tableMap?.height ?? 0, selection, selectionRect),
|
|
207
191
|
getOriginIndexes: getSelectedRowIndexes,
|
|
208
192
|
getTargetIndex: (selectionRect: Rect) => selectionRect.top - 1,
|
|
209
193
|
},
|
|
@@ -211,8 +195,7 @@ export const getDragMenuConfig = (
|
|
|
211
195
|
label: 'down',
|
|
212
196
|
icon: ArrowDownIcon,
|
|
213
197
|
keymap: moveRowDown,
|
|
214
|
-
canMove:
|
|
215
|
-
canDrag && canMove('table-row', 1, tableMap?.height ?? 0, selection, selectionRect),
|
|
198
|
+
canMove: canMove('table-row', 1, tableMap?.height ?? 0, selection, selectionRect),
|
|
216
199
|
getOriginIndexes: getSelectedRowIndexes,
|
|
217
200
|
getTargetIndex: (selectionRect: Rect) => selectionRect.bottom,
|
|
218
201
|
},
|
|
@@ -222,9 +205,7 @@ export const getDragMenuConfig = (
|
|
|
222
205
|
label: 'left',
|
|
223
206
|
icon: ArrowLeftIcon,
|
|
224
207
|
keymap: moveColumnLeft,
|
|
225
|
-
canMove:
|
|
226
|
-
canDrag &&
|
|
227
|
-
canMove('table-column', -1, tableMap?.width ?? 0, selection, selectionRect),
|
|
208
|
+
canMove: canMove('table-column', -1, tableMap?.width ?? 0, selection, selectionRect),
|
|
228
209
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
229
210
|
getTargetIndex: (selectionRect: Rect) => selectionRect.left - 1,
|
|
230
211
|
},
|
|
@@ -232,8 +213,7 @@ export const getDragMenuConfig = (
|
|
|
232
213
|
label: 'right',
|
|
233
214
|
icon: ArrowRightIcon,
|
|
234
215
|
keymap: moveColumnRight,
|
|
235
|
-
canMove:
|
|
236
|
-
canDrag && canMove('table-column', 1, tableMap?.width ?? 0, selection, selectionRect),
|
|
216
|
+
canMove: canMove('table-column', 1, tableMap?.width ?? 0, selection, selectionRect),
|
|
237
217
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
238
218
|
getTargetIndex: (selectionRect: Rect) => selectionRect.right,
|
|
239
219
|
},
|