@atlaskit/editor-plugin-table 27.0.0 → 27.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/pm-plugins/decorations/utils/column-controls.js +0 -2
  3. package/dist/cjs/pm-plugins/handlers.js +8 -5
  4. package/dist/cjs/pm-plugins/table-resizing/plugin-factory.js +1 -2
  5. package/dist/cjs/pm-plugins/utils/collapse.js +0 -2
  6. package/dist/cjs/pm-plugins/utils/decoration.js +0 -2
  7. package/dist/cjs/ui/DragHandle/index.js +21 -0
  8. package/dist/cjs/ui/FloatingTableMenu/index.js +3 -1
  9. package/dist/cjs/ui/TableMenu/column/items/DeleteColumnItem.js +5 -2
  10. package/dist/cjs/ui/TableMenu/row/items/DeleteRowItem.js +5 -2
  11. package/dist/cjs/ui/TableMenu/shared/TableMenu.js +2 -1
  12. package/dist/cjs/ui/TableMenu/shared/items/ClearCellsItem.js +5 -2
  13. package/dist/es2019/pm-plugins/decorations/utils/column-controls.js +0 -2
  14. package/dist/es2019/pm-plugins/handlers.js +8 -7
  15. package/dist/es2019/pm-plugins/table-resizing/plugin-factory.js +0 -1
  16. package/dist/es2019/pm-plugins/utils/collapse.js +0 -2
  17. package/dist/es2019/pm-plugins/utils/decoration.js +0 -3
  18. package/dist/es2019/ui/DragHandle/index.js +22 -0
  19. package/dist/es2019/ui/FloatingTableMenu/index.js +3 -1
  20. package/dist/es2019/ui/TableMenu/column/items/DeleteColumnItem.js +5 -2
  21. package/dist/es2019/ui/TableMenu/row/items/DeleteRowItem.js +5 -2
  22. package/dist/es2019/ui/TableMenu/shared/TableMenu.js +2 -1
  23. package/dist/es2019/ui/TableMenu/shared/items/ClearCellsItem.js +5 -2
  24. package/dist/esm/pm-plugins/decorations/utils/column-controls.js +0 -2
  25. package/dist/esm/pm-plugins/handlers.js +8 -7
  26. package/dist/esm/pm-plugins/table-resizing/plugin-factory.js +0 -1
  27. package/dist/esm/pm-plugins/utils/collapse.js +0 -2
  28. package/dist/esm/pm-plugins/utils/decoration.js +0 -3
  29. package/dist/esm/ui/DragHandle/index.js +21 -0
  30. package/dist/esm/ui/FloatingTableMenu/index.js +3 -1
  31. package/dist/esm/ui/TableMenu/column/items/DeleteColumnItem.js +5 -2
  32. package/dist/esm/ui/TableMenu/row/items/DeleteRowItem.js +5 -2
  33. package/dist/esm/ui/TableMenu/shared/TableMenu.js +2 -1
  34. package/dist/esm/ui/TableMenu/shared/items/ClearCellsItem.js +5 -2
  35. package/dist/types/ui/TableMenu/shared/TableMenuContext.d.ts +2 -0
  36. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 27.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 27.0.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [`945f7cef17713`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/945f7cef17713) -
14
+ Fix table menu selection and shortcut behavior behind
15
+ `platform_editor_table_menu_updates_patch_4`.
16
+ - Updated dependencies
17
+
3
18
  ## 27.0.0
4
19
 
5
20
  ### Patch Changes
@@ -8,8 +8,6 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
8
8
  var _types = require("../../../types");
9
9
  var _decoration = require("../../utils/decoration");
10
10
  var _composeDecorations = require("./compose-decorations");
11
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
12
-
13
11
  var isColumnSelected = function isColumnSelected(tr) {
14
12
  return tr.selection instanceof _cellSelection.CellSelection && tr.selection.isColSelection();
15
13
  };
@@ -11,6 +11,7 @@ var _utils = require("@atlaskit/editor-common/utils");
11
11
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
12
12
  var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
13
13
  var _utils3 = require("@atlaskit/editor-tables/utils");
14
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
14
15
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
15
16
  var _defaultTableSelection = require("./default-table-selection");
16
17
  var _pluginKey = require("./table-resizing/plugin-key");
@@ -18,7 +19,6 @@ var _collapse = require("./utils/collapse");
18
19
  var _nodes = require("./utils/nodes");
19
20
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
21
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // #region Imports
21
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
22
22
  var nextTableSorting = function nextTableSorting(tr, table) {
23
23
  var tableSortStep = tr.steps.find(function (step) {
24
24
  return step instanceof _customSteps.TableSortStep;
@@ -43,6 +43,7 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
43
43
  return function (pluginState) {
44
44
  var tableNode = table && table.node;
45
45
  if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
46
+ var _pluginState$activeTa, _pluginState$activeTa2;
46
47
  var _targetCellPosition;
47
48
  if (tableNode) {
48
49
  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
@@ -53,14 +54,16 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
53
54
  }
54
55
  var hasTargetCellChanged = pluginState.targetCellPosition !== _targetCellPosition;
55
56
  var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
56
- var shouldCloseMenu = hasActiveTableMenu && tr.selectionSet && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof _cellSelection.CellSelection));
57
+ var isActiveDragMenu = ((_pluginState$activeTa = pluginState.activeTableMenu) === null || _pluginState$activeTa === void 0 ? void 0 : _pluginState$activeTa.type) === 'row' || ((_pluginState$activeTa2 = pluginState.activeTableMenu) === null || _pluginState$activeTa2 === void 0 ? void 0 : _pluginState$activeTa2.type) === 'column';
58
+ var shouldPreserveActiveDragMenu = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_menu_updates_patch_4') && isActiveDragMenu && tr.selection instanceof _cellSelection.CellSelection;
59
+ var shouldCloseMenu = hasActiveTableMenu && tr.selectionSet && (!tableNode || !(tr.selection instanceof _cellSelection.CellSelection) || hasTargetCellChanged && !shouldPreserveActiveDragMenu);
57
60
  if (!hasTargetCellChanged && !shouldCloseMenu) {
58
61
  return pluginState;
59
62
  }
60
63
 
61
- // The updated table menu is anchored to a table selection. When selection moves
62
- // to another cell, leaves the table, or changes from a CellSelection to a text cursor,
63
- // close the active menu so render state cannot point at a stale anchor.
64
+ // Cell menus are anchored to a specific cell and close when that target changes. Row and
65
+ // column menus are anchored to the selected-range drag handle, so keep them open while a
66
+ // CellSelection expands and let the handle re-render at the updated range.
64
67
  return _objectSpread(_objectSpread({}, pluginState), {}, {
65
68
  targetCellPosition: _targetCellPosition,
66
69
  activeTableMenu: shouldCloseMenu ? {
@@ -10,8 +10,7 @@ var _utils = require("@atlaskit/editor-common/utils");
10
10
  var _pluginKey = require("./plugin-key");
11
11
  var _reducer = _interopRequireDefault(require("./reducer"));
12
12
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
14
- // eslint-disable-next-line import/order
13
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line import/order
15
14
  // eslint-disable-next-line import/order
16
15
 
17
16
  // eslint-disable-next-line import/order
@@ -7,8 +7,6 @@ exports.isTableCollapsible = exports.collapseSelectedTable = void 0;
7
7
  var _model = require("@atlaskit/editor-prosemirror/model");
8
8
  var _transform = require("@atlaskit/editor-prosemirror/transform");
9
9
  var _utils = require("@atlaskit/editor-tables/utils");
10
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
11
-
12
10
  var bail = function bail() {
13
11
  return {
14
12
  tableIsCollapsible: false
@@ -17,8 +17,6 @@ var _types = require("../../types");
17
17
  var _ColumnResizeWidget = require("../../ui/ColumnResizeWidget");
18
18
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
19
19
 
20
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
21
-
22
20
  var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
23
21
  return decorationSet.find(undefined, undefined, function (spec) {
24
22
  return spec.key.indexOf(key) > -1;
@@ -16,6 +16,7 @@ var _browser = require("@atlaskit/editor-common/browser");
16
16
  var _messages = require("@atlaskit/editor-common/messages");
17
17
  var _state = require("@atlaskit/editor-prosemirror/state");
18
18
  var _editorTables = require("@atlaskit/editor-tables");
19
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
19
20
  var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
20
21
  var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
21
22
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -191,6 +192,22 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
191
192
  return tr;
192
193
  });
193
194
  }, [api]);
195
+ var keepActiveDragMenuOrHideToolbar = (0, _react.useCallback)(function () {
196
+ var _api$table2, _api$core2;
197
+ if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_menu_updates_patch_4') || !api) {
198
+ return;
199
+ }
200
+ var activeTableMenu = (_api$table2 = api.table) === null || _api$table2 === void 0 || (_api$table2 = _api$table2.sharedState.currentState()) === null || _api$table2 === void 0 ? void 0 : _api$table2.activeTableMenu;
201
+ var isActiveTableMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
202
+ (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref6) {
203
+ var _api$userIntent2;
204
+ var tr = _ref6.tr;
205
+ (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(isActiveTableMenuOpen ? 'tableDragMenuPopupOpen' : 'dragHandleSelected')({
206
+ tr: tr
207
+ });
208
+ return tr;
209
+ });
210
+ }, [api]);
194
211
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
195
212
  type: "button"
196
213
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -258,6 +275,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
258
275
  // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
259
276
  // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
260
277
  editorView.focus();
278
+ if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_menu_updates_patch_4') && e.shiftKey) {
279
+ keepActiveDragMenuOrHideToolbar();
280
+ return;
281
+ }
261
282
  if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
262
283
  toggleDragMenu && toggleDragMenu('mouse', e, indexes[0]);
263
284
  } else {
@@ -11,7 +11,9 @@ var _ui = require("@atlaskit/editor-common/ui");
11
11
  var _uiReact = require("@atlaskit/editor-common/ui-react");
12
12
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
13
13
  var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
14
+ var _utils = require("@atlaskit/editor-tables/utils");
14
15
  var _toolbarKeyboardNavigationProvider = require("@atlaskit/editor-toolbar/toolbar-keyboard-navigation-provider");
16
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
15
17
  var _commands = require("../../pm-plugins/commands");
16
18
  var _types = require("../../types");
17
19
  var _consts = require("../consts");
@@ -128,7 +130,7 @@ var FloatingTableMenu = function FloatingTableMenu(_ref) {
128
130
  }
129
131
  api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)(api));
130
132
  }, [api]);
131
- if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
133
+ if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_menu_updates_patch_4') && (0, _utils.isTableSelected)(editorView.state.selection)) {
132
134
  return null;
133
135
  }
134
136
  var inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW));
@@ -12,9 +12,11 @@ var _hooks = require("@atlaskit/editor-common/hooks");
12
12
  var _keymaps = require("@atlaskit/editor-common/keymaps");
13
13
  var _messages = require("@atlaskit/editor-common/messages");
14
14
  var _editorToolbar = require("@atlaskit/editor-toolbar");
15
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
15
16
  var _commands = require("../../../../pm-plugins/commands");
16
17
  var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
17
18
  var _selection = require("../../../../pm-plugins/utils/selection");
19
+ var _keys = require("../../cell/keys");
18
20
  var _selection2 = require("../../shared/selection");
19
21
  var _TableMenuContext = require("../../shared/TableMenuContext");
20
22
  var DeleteColumnItem = exports.DeleteColumnItem = function DeleteColumnItem(_ref) {
@@ -24,6 +26,7 @@ var DeleteColumnItem = exports.DeleteColumnItem = function DeleteColumnItem(_ref
24
26
  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
25
27
  editorView = _ref2.editorView;
26
28
  var selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
29
+ var shouldShowShortcut = !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== _keys.CELL_MENU.key;
27
30
  var _useIntl = (0, _reactIntl.useIntl)(),
28
31
  formatMessage = _useIntl.formatMessage;
29
32
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
@@ -78,9 +81,9 @@ var DeleteColumnItem = exports.DeleteColumnItem = function DeleteColumnItem(_ref
78
81
  label: "",
79
82
  size: "small"
80
83
  }),
81
- elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
84
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
82
85
  shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
83
- })
86
+ }) : undefined
84
87
  }, formatMessage(_messages.tableMessages.removeColumns, {
85
88
  0: selectedColumnCount
86
89
  }));
@@ -12,9 +12,11 @@ var _hooks = require("@atlaskit/editor-common/hooks");
12
12
  var _keymaps = require("@atlaskit/editor-common/keymaps");
13
13
  var _messages = require("@atlaskit/editor-common/messages");
14
14
  var _editorToolbar = require("@atlaskit/editor-toolbar");
15
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
15
16
  var _commands = require("../../../../pm-plugins/commands");
16
17
  var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
17
18
  var _selection = require("../../../../pm-plugins/utils/selection");
19
+ var _keys = require("../../cell/keys");
18
20
  var _selection2 = require("../../shared/selection");
19
21
  var _TableMenuContext = require("../../shared/TableMenuContext");
20
22
  var DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem(props) {
@@ -31,6 +33,7 @@ var DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem(props) {
31
33
  }),
32
34
  isHeaderRowRequired = _useSharedPluginState.isHeaderRowRequired;
33
35
  var selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
36
+ var shouldShowShortcut = !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== _keys.CELL_MENU.key;
34
37
  var _useIntl = (0, _reactIntl.useIntl)(),
35
38
  formatMessage = _useIntl.formatMessage;
36
39
  var handleMouseEnter = function handleMouseEnter() {
@@ -73,9 +76,9 @@ var DeleteRowItem = exports.DeleteRowItem = function DeleteRowItem(props) {
73
76
  label: "",
74
77
  size: "small"
75
78
  }),
76
- elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
79
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
77
80
  shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.deleteRow)) !== null && _tooltip !== void 0 ? _tooltip : ''
78
- })
81
+ }) : undefined
79
82
  }, formatMessage(_messages.tableMessages.removeRows, {
80
83
  0: selectedRowCount
81
84
  }));
@@ -47,6 +47,7 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
47
47
  var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
48
48
  var cellOps = {
49
49
  editorView: editorView,
50
+ surface: surface,
50
51
  canMergeCells: (0, _merge.canMergeCellSelection)(editorView.state.selection),
51
52
  canSplitCell: (0, _splitCell.canSplitCellSelection)(editorView.state.selection),
52
53
  hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -66,7 +67,7 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
66
67
  isLastColumn: selectionRect.right === tableMap.width,
67
68
  selectedColumnCount: selectionRect.right - selectionRect.left
68
69
  });
69
- }, [editorView, tableNode, selection]);
70
+ }, [editorView, tableNode, selection, surface]);
70
71
  if (components.length === 0) {
71
72
  return null;
72
73
  }
@@ -11,9 +11,11 @@ var _analytics = require("@atlaskit/editor-common/analytics");
11
11
  var _keymaps = require("@atlaskit/editor-common/keymaps");
12
12
  var _messages = require("@atlaskit/editor-common/messages");
13
13
  var _editorToolbar = require("@atlaskit/editor-toolbar");
14
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
14
15
  var _commands = require("../../../../pm-plugins/commands");
15
16
  var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
16
17
  var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
18
+ var _keys = require("../../cell/keys");
17
19
  var _TableMenuContext = require("../TableMenuContext");
18
20
  var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
19
21
  var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
@@ -24,6 +26,7 @@ var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
24
26
  var _useIntl = (0, _reactIntl.useIntl)(),
25
27
  formatMessage = _useIntl.formatMessage;
26
28
  var selectedCellCount = Math.max((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1, (_tableMenuContext$sel2 = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel2 !== void 0 ? _tableMenuContext$sel2 : 1);
29
+ var shouldShowShortcut = !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== _keys.CELL_MENU.key || selectedCellCount > 1;
27
30
  var handleClick = function handleClick() {
28
31
  var _api$analytics;
29
32
  if (!editorView) {
@@ -42,9 +45,9 @@ var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
42
45
  label: "",
43
46
  size: "small"
44
47
  }),
45
- elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
48
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
46
49
  shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
47
- })
50
+ }) : undefined
48
51
  }, formatMessage(_messages.tableMessages.clearCells, {
49
52
  0: selectedCellCount
50
53
  }));
@@ -1,5 +1,3 @@
1
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
2
-
3
1
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
4
2
  import { TableDecorations } from '../../../types';
5
3
  import { createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../utils/decoration';
@@ -1,12 +1,10 @@
1
1
  // #region Imports
2
2
  import { TableSortStep } from '@atlaskit/custom-steps';
3
3
  import { isTextInput } from '@atlaskit/editor-common/utils';
4
-
5
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
6
-
7
4
  import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
8
5
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
9
6
  import { findTable } from '@atlaskit/editor-tables/utils';
7
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
10
8
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
9
  import { defaultTableSelection } from './default-table-selection';
12
10
  import { pluginKey as tableResizingPluginKey } from './table-resizing/plugin-key';
@@ -33,6 +31,7 @@ const updateTargetCellPosition = ({
33
31
  }) => pluginState => {
34
32
  const tableNode = table && table.node;
35
33
  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
34
+ var _pluginState$activeTa, _pluginState$activeTa2;
36
35
  let targetCellPosition;
37
36
  if (tableNode) {
38
37
  const {
@@ -44,14 +43,16 @@ const updateTargetCellPosition = ({
44
43
  }
45
44
  const hasTargetCellChanged = pluginState.targetCellPosition !== targetCellPosition;
46
45
  const hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
47
- const shouldCloseMenu = hasActiveTableMenu && tr.selectionSet && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof CellSelection));
46
+ const isActiveDragMenu = ((_pluginState$activeTa = pluginState.activeTableMenu) === null || _pluginState$activeTa === void 0 ? void 0 : _pluginState$activeTa.type) === 'row' || ((_pluginState$activeTa2 = pluginState.activeTableMenu) === null || _pluginState$activeTa2 === void 0 ? void 0 : _pluginState$activeTa2.type) === 'column';
47
+ const shouldPreserveActiveDragMenu = isExperimentEnabled('platform_editor_table_menu_updates_patch_4') && isActiveDragMenu && tr.selection instanceof CellSelection;
48
+ const shouldCloseMenu = hasActiveTableMenu && tr.selectionSet && (!tableNode || !(tr.selection instanceof CellSelection) || hasTargetCellChanged && !shouldPreserveActiveDragMenu);
48
49
  if (!hasTargetCellChanged && !shouldCloseMenu) {
49
50
  return pluginState;
50
51
  }
51
52
 
52
- // The updated table menu is anchored to a table selection. When selection moves
53
- // to another cell, leaves the table, or changes from a CellSelection to a text cursor,
54
- // close the active menu so render state cannot point at a stale anchor.
53
+ // Cell menus are anchored to a specific cell and close when that target changes. Row and
54
+ // column menus are anchored to the selected-range drag handle, so keep them open while a
55
+ // CellSelection expands and let the handle re-render at the updated range.
55
56
  return {
56
57
  ...pluginState,
57
58
  targetCellPosition,
@@ -1,4 +1,3 @@
1
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
2
1
  import { pluginFactory } from '@atlaskit/editor-common/utils';
3
2
  import { pluginKey } from './plugin-key';
4
3
  // eslint-disable-next-line import/order
@@ -1,6 +1,4 @@
1
1
  import { NodeRange } from '@atlaskit/editor-prosemirror/model';
2
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
3
-
4
2
  import { findWrapping } from '@atlaskit/editor-prosemirror/transform';
5
3
  import { findTable } from '@atlaskit/editor-tables/utils';
6
4
  const bail = () => ({
@@ -3,9 +3,6 @@ import { RawIntlProvider } from 'react-intl';
3
3
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
4
4
  import uuid from 'uuid/v4';
5
5
  import { nonNullable } from '@atlaskit/editor-common/utils';
6
-
7
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
8
-
9
6
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
10
7
  import { TableMap } from '@atlaskit/editor-tables/table-map';
11
8
  import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -8,6 +8,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
8
8
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
9
9
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
10
10
  import { findTable, TableMap } from '@atlaskit/editor-tables';
11
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
11
12
  import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
12
13
  import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
13
14
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -180,6 +181,23 @@ const DragHandleComponent = ({
180
181
  return tr;
181
182
  });
182
183
  }, [api]);
184
+ const keepActiveDragMenuOrHideToolbar = useCallback(() => {
185
+ var _api$table2, _api$table2$sharedSta, _api$core2;
186
+ if (!isExperimentEnabled('platform_editor_table_menu_updates_patch_4') || !api) {
187
+ return;
188
+ }
189
+ const activeTableMenu = (_api$table2 = api.table) === null || _api$table2 === void 0 ? void 0 : (_api$table2$sharedSta = _api$table2.sharedState.currentState()) === null || _api$table2$sharedSta === void 0 ? void 0 : _api$table2$sharedSta.activeTableMenu;
190
+ const isActiveTableMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
191
+ (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
192
+ tr
193
+ }) => {
194
+ var _api$userIntent2;
195
+ (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent(isActiveTableMenuOpen ? 'tableDragMenuPopupOpen' : 'dragHandleSelected')({
196
+ tr
197
+ });
198
+ return tr;
199
+ });
200
+ }, [api]);
183
201
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
184
202
  type: "button"
185
203
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -251,6 +269,10 @@ const DragHandleComponent = ({
251
269
  // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
252
270
  // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
253
271
  editorView.focus();
272
+ if (isExperimentEnabled('platform_editor_table_menu_updates_patch_4') && e.shiftKey) {
273
+ keepActiveDragMenuOrHideToolbar();
274
+ return;
275
+ }
254
276
  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
255
277
  toggleDragMenu && toggleDragMenu('mouse', e, indexes[0]);
256
278
  } else {
@@ -4,7 +4,9 @@ import { Popup } from '@atlaskit/editor-common/ui';
4
4
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
5
5
  import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
6
6
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
7
+ import { isTableSelected } from '@atlaskit/editor-tables/utils';
7
8
  import { ToolbarKeyboardNavigationProvider } from '@atlaskit/editor-toolbar/toolbar-keyboard-navigation-provider';
9
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
8
10
  import { closeActiveTableMenu } from '../../pm-plugins/commands';
9
11
  import { TableCssClassName as ClassName } from '../../types';
10
12
  import { dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
@@ -118,7 +120,7 @@ const FloatingTableMenu = ({
118
120
  }
119
121
  api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
120
122
  }, [api]);
121
- if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
123
+ if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition || isExperimentEnabled('platform_editor_table_menu_updates_patch_4') && isTableSelected(editorView.state.selection)) {
122
124
  return null;
123
125
  }
124
126
  const inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW));
@@ -5,9 +5,11 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
5
5
  import { deleteColumn, tooltip } from '@atlaskit/editor-common/keymaps';
6
6
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
7
7
  import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
8
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
8
9
  import { clearHoverSelection, closeActiveTableMenu, hoverColumns } from '../../../../pm-plugins/commands';
9
10
  import { deleteColumnsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
10
11
  import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
12
+ import { CELL_MENU } from '../../cell/keys';
11
13
  import { getMenuSelectionRect } from '../../shared/selection';
12
14
  import { useTableMenuContext } from '../../shared/TableMenuContext';
13
15
  export const DeleteColumnItem = ({
@@ -19,6 +21,7 @@ export const DeleteColumnItem = ({
19
21
  editorView
20
22
  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
21
23
  const selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
24
+ const shouldShowShortcut = !isExperimentEnabled('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== CELL_MENU.key;
22
25
  const {
23
26
  formatMessage
24
27
  } = useIntl();
@@ -75,9 +78,9 @@ export const DeleteColumnItem = ({
75
78
  label: "",
76
79
  size: "small"
77
80
  }),
78
- elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
81
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
79
82
  shortcut: (_tooltip = tooltip(deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
80
- })
83
+ }) : undefined
81
84
  }, formatMessage(messages.removeColumns, {
82
85
  0: selectedColumnCount
83
86
  }));
@@ -5,9 +5,11 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
5
5
  import { deleteRow, tooltip } from '@atlaskit/editor-common/keymaps';
6
6
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
7
7
  import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
8
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
8
9
  import { clearHoverSelection, closeActiveTableMenu, hoverRows } from '../../../../pm-plugins/commands';
9
10
  import { deleteRowsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
10
11
  import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
12
+ import { CELL_MENU } from '../../cell/keys';
11
13
  import { getMenuSelectionRect } from '../../shared/selection';
12
14
  import { useTableMenuContext } from '../../shared/TableMenuContext';
13
15
  export const DeleteRowItem = props => {
@@ -28,6 +30,7 @@ export const DeleteRowItem = props => {
28
30
  };
29
31
  });
30
32
  const selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
33
+ const shouldShowShortcut = !isExperimentEnabled('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== CELL_MENU.key;
31
34
  const {
32
35
  formatMessage
33
36
  } = useIntl();
@@ -71,9 +74,9 @@ export const DeleteRowItem = props => {
71
74
  label: "",
72
75
  size: "small"
73
76
  }),
74
- elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
77
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
75
78
  shortcut: (_tooltip = tooltip(deleteRow)) !== null && _tooltip !== void 0 ? _tooltip : ''
76
- })
79
+ }) : undefined
77
80
  }, formatMessage(messages.removeRows, {
78
81
  0: selectedRowCount
79
82
  }));
@@ -37,6 +37,7 @@ export const TableMenu = /*#__PURE__*/memo(({
37
37
  const selectionRect = getSelectionRect(editorView.state.selection);
38
38
  const cellOps = {
39
39
  editorView,
40
+ surface,
40
41
  canMergeCells: canMergeCellSelection(editorView.state.selection),
41
42
  canSplitCell: canSplitCellSelection(editorView.state.selection),
42
43
  hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -57,7 +58,7 @@ export const TableMenu = /*#__PURE__*/memo(({
57
58
  isLastColumn: selectionRect.right === tableMap.width,
58
59
  selectedColumnCount: selectionRect.right - selectionRect.left
59
60
  };
60
- }, [editorView, tableNode, selection]);
61
+ }, [editorView, tableNode, selection, surface]);
61
62
  if (components.length === 0) {
62
63
  return null;
63
64
  }
@@ -4,9 +4,11 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
4
  import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
5
5
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
6
6
  import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
7
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
7
8
  import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
8
9
  import { emptyMultipleCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
9
10
  import { getPluginState } from '../../../../pm-plugins/plugin-factory';
11
+ import { CELL_MENU } from '../../cell/keys';
10
12
  import { useTableMenuContext } from '../TableMenuContext';
11
13
  export const ClearCellsItem = ({
12
14
  api
@@ -20,6 +22,7 @@ export const ClearCellsItem = ({
20
22
  formatMessage
21
23
  } = useIntl();
22
24
  const selectedCellCount = Math.max((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1, (_tableMenuContext$sel2 = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel2 !== void 0 ? _tableMenuContext$sel2 : 1);
25
+ const shouldShowShortcut = !isExperimentEnabled('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== CELL_MENU.key || selectedCellCount > 1;
23
26
  const handleClick = () => {
24
27
  var _api$analytics;
25
28
  if (!editorView) {
@@ -39,9 +42,9 @@ export const ClearCellsItem = ({
39
42
  label: "",
40
43
  size: "small"
41
44
  }),
42
- elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
45
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
43
46
  shortcut: (_tooltip = tooltip(backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
44
- })
47
+ }) : undefined
45
48
  }, formatMessage(messages.clearCells, {
46
49
  0: selectedCellCount
47
50
  }));
@@ -1,5 +1,3 @@
1
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
2
-
3
1
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
4
2
  import { TableDecorations } from '../../../types';
5
3
  import { createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../utils/decoration';
@@ -4,12 +4,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  // #region Imports
5
5
  import { TableSortStep } from '@atlaskit/custom-steps';
6
6
  import { isTextInput } from '@atlaskit/editor-common/utils';
7
-
8
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
9
-
10
7
  import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
11
8
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
12
9
  import { findTable } from '@atlaskit/editor-tables/utils';
10
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
13
11
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
12
  import { defaultTableSelection } from './default-table-selection';
15
13
  import { pluginKey as tableResizingPluginKey } from './table-resizing/plugin-key';
@@ -39,6 +37,7 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
39
37
  return function (pluginState) {
40
38
  var tableNode = table && table.node;
41
39
  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
40
+ var _pluginState$activeTa, _pluginState$activeTa2;
42
41
  var _targetCellPosition;
43
42
  if (tableNode) {
44
43
  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
@@ -49,14 +48,16 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
49
48
  }
50
49
  var hasTargetCellChanged = pluginState.targetCellPosition !== _targetCellPosition;
51
50
  var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
52
- var shouldCloseMenu = hasActiveTableMenu && tr.selectionSet && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof CellSelection));
51
+ var isActiveDragMenu = ((_pluginState$activeTa = pluginState.activeTableMenu) === null || _pluginState$activeTa === void 0 ? void 0 : _pluginState$activeTa.type) === 'row' || ((_pluginState$activeTa2 = pluginState.activeTableMenu) === null || _pluginState$activeTa2 === void 0 ? void 0 : _pluginState$activeTa2.type) === 'column';
52
+ var shouldPreserveActiveDragMenu = isExperimentEnabled('platform_editor_table_menu_updates_patch_4') && isActiveDragMenu && tr.selection instanceof CellSelection;
53
+ var shouldCloseMenu = hasActiveTableMenu && tr.selectionSet && (!tableNode || !(tr.selection instanceof CellSelection) || hasTargetCellChanged && !shouldPreserveActiveDragMenu);
53
54
  if (!hasTargetCellChanged && !shouldCloseMenu) {
54
55
  return pluginState;
55
56
  }
56
57
 
57
- // The updated table menu is anchored to a table selection. When selection moves
58
- // to another cell, leaves the table, or changes from a CellSelection to a text cursor,
59
- // close the active menu so render state cannot point at a stale anchor.
58
+ // Cell menus are anchored to a specific cell and close when that target changes. Row and
59
+ // column menus are anchored to the selected-range drag handle, so keep them open while a
60
+ // CellSelection expands and let the handle re-render at the updated range.
60
61
  return _objectSpread(_objectSpread({}, pluginState), {}, {
61
62
  targetCellPosition: _targetCellPosition,
62
63
  activeTableMenu: shouldCloseMenu ? {
@@ -1,7 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
5
4
  import { pluginFactory } from '@atlaskit/editor-common/utils';
6
5
  import { pluginKey } from './plugin-key';
7
6
  // eslint-disable-next-line import/order
@@ -1,6 +1,4 @@
1
1
  import { NodeRange } from '@atlaskit/editor-prosemirror/model';
2
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
3
-
4
2
  import { findWrapping } from '@atlaskit/editor-prosemirror/transform';
5
3
  import { findTable } from '@atlaskit/editor-tables/utils';
6
4
  var bail = function bail() {
@@ -4,9 +4,6 @@ import { RawIntlProvider } from 'react-intl';
4
4
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
5
5
  import uuid from 'uuid/v4';
6
6
  import { nonNullable } from '@atlaskit/editor-common/utils';
7
-
8
- // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
9
-
10
7
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
11
8
  import { TableMap } from '@atlaskit/editor-tables/table-map';
12
9
  import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -10,6 +10,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
10
10
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
11
11
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
12
12
  import { findTable, TableMap } from '@atlaskit/editor-tables';
13
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
13
14
  import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
14
15
  import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
15
16
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -182,6 +183,22 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
182
183
  return tr;
183
184
  });
184
185
  }, [api]);
186
+ var keepActiveDragMenuOrHideToolbar = useCallback(function () {
187
+ var _api$table2, _api$core2;
188
+ if (!isExperimentEnabled('platform_editor_table_menu_updates_patch_4') || !api) {
189
+ return;
190
+ }
191
+ var activeTableMenu = (_api$table2 = api.table) === null || _api$table2 === void 0 || (_api$table2 = _api$table2.sharedState.currentState()) === null || _api$table2 === void 0 ? void 0 : _api$table2.activeTableMenu;
192
+ var isActiveTableMenuOpen = (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'row' || (activeTableMenu === null || activeTableMenu === void 0 ? void 0 : activeTableMenu.type) === 'column';
193
+ (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref6) {
194
+ var _api$userIntent2;
195
+ var tr = _ref6.tr;
196
+ (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent(isActiveTableMenuOpen ? 'tableDragMenuPopupOpen' : 'dragHandleSelected')({
197
+ tr: tr
198
+ });
199
+ return tr;
200
+ });
201
+ }, [api]);
185
202
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
186
203
  type: "button"
187
204
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -249,6 +266,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
249
266
  // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
250
267
  // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
251
268
  editorView.focus();
269
+ if (isExperimentEnabled('platform_editor_table_menu_updates_patch_4') && e.shiftKey) {
270
+ keepActiveDragMenuOrHideToolbar();
271
+ return;
272
+ }
252
273
  if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
253
274
  toggleDragMenu && toggleDragMenu('mouse', e, indexes[0]);
254
275
  } else {
@@ -4,7 +4,9 @@ import { Popup } from '@atlaskit/editor-common/ui';
4
4
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
5
5
  import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
6
6
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
7
+ import { isTableSelected } from '@atlaskit/editor-tables/utils';
7
8
  import { ToolbarKeyboardNavigationProvider } from '@atlaskit/editor-toolbar/toolbar-keyboard-navigation-provider';
9
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
8
10
  import { closeActiveTableMenu } from '../../pm-plugins/commands';
9
11
  import { TableCssClassName as ClassName } from '../../types';
10
12
  import { dragTableInsertColumnButtonSize, tablePopupMenuFitHeight } from '../consts';
@@ -120,7 +122,7 @@ var FloatingTableMenu = function FloatingTableMenu(_ref) {
120
122
  }
121
123
  api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
122
124
  }, [api]);
123
- if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
125
+ if (!isDragMenuOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition || isExperimentEnabled('platform_editor_table_menu_updates_patch_4') && isTableSelected(editorView.state.selection)) {
124
126
  return null;
125
127
  }
126
128
  var inStickyMode = (stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky) || (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW));
@@ -5,9 +5,11 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
5
5
  import { deleteColumn, tooltip } from '@atlaskit/editor-common/keymaps';
6
6
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
7
7
  import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
8
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
8
9
  import { clearHoverSelection, closeActiveTableMenu, hoverColumns } from '../../../../pm-plugins/commands';
9
10
  import { deleteColumnsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
10
11
  import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
12
+ import { CELL_MENU } from '../../cell/keys';
11
13
  import { getMenuSelectionRect } from '../../shared/selection';
12
14
  import { useTableMenuContext } from '../../shared/TableMenuContext';
13
15
  export var DeleteColumnItem = function DeleteColumnItem(_ref) {
@@ -17,6 +19,7 @@ export var DeleteColumnItem = function DeleteColumnItem(_ref) {
17
19
  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
18
20
  editorView = _ref2.editorView;
19
21
  var selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
22
+ var shouldShowShortcut = !isExperimentEnabled('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== CELL_MENU.key;
20
23
  var _useIntl = useIntl(),
21
24
  formatMessage = _useIntl.formatMessage;
22
25
  var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
@@ -71,9 +74,9 @@ export var DeleteColumnItem = function DeleteColumnItem(_ref) {
71
74
  label: "",
72
75
  size: "small"
73
76
  }),
74
- elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
77
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
75
78
  shortcut: (_tooltip = tooltip(deleteColumn)) !== null && _tooltip !== void 0 ? _tooltip : ''
76
- })
79
+ }) : undefined
77
80
  }, formatMessage(messages.removeColumns, {
78
81
  0: selectedColumnCount
79
82
  }));
@@ -5,9 +5,11 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
5
5
  import { deleteRow, tooltip } from '@atlaskit/editor-common/keymaps';
6
6
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
7
7
  import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
8
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
8
9
  import { clearHoverSelection, closeActiveTableMenu, hoverRows } from '../../../../pm-plugins/commands';
9
10
  import { deleteRowsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
10
11
  import { getSelectedRowIndexes } from '../../../../pm-plugins/utils/selection';
12
+ import { CELL_MENU } from '../../cell/keys';
11
13
  import { getMenuSelectionRect } from '../../shared/selection';
12
14
  import { useTableMenuContext } from '../../shared/TableMenuContext';
13
15
  export var DeleteRowItem = function DeleteRowItem(props) {
@@ -24,6 +26,7 @@ export var DeleteRowItem = function DeleteRowItem(props) {
24
26
  }),
25
27
  isHeaderRowRequired = _useSharedPluginState.isHeaderRowRequired;
26
28
  var selectedRowCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
29
+ var shouldShowShortcut = !isExperimentEnabled('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== CELL_MENU.key;
27
30
  var _useIntl = useIntl(),
28
31
  formatMessage = _useIntl.formatMessage;
29
32
  var handleMouseEnter = function handleMouseEnter() {
@@ -66,9 +69,9 @@ export var DeleteRowItem = function DeleteRowItem(props) {
66
69
  label: "",
67
70
  size: "small"
68
71
  }),
69
- elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
72
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
70
73
  shortcut: (_tooltip = tooltip(deleteRow)) !== null && _tooltip !== void 0 ? _tooltip : ''
71
- })
74
+ }) : undefined
72
75
  }, formatMessage(messages.removeRows, {
73
76
  0: selectedRowCount
74
77
  }));
@@ -38,6 +38,7 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
38
38
  var selectionRect = getSelectionRect(editorView.state.selection);
39
39
  var cellOps = {
40
40
  editorView: editorView,
41
+ surface: surface,
41
42
  canMergeCells: canMergeCellSelection(editorView.state.selection),
42
43
  canSplitCell: canSplitCellSelection(editorView.state.selection),
43
44
  hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -57,7 +58,7 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
57
58
  isLastColumn: selectionRect.right === tableMap.width,
58
59
  selectedColumnCount: selectionRect.right - selectionRect.left
59
60
  });
60
- }, [editorView, tableNode, selection]);
61
+ }, [editorView, tableNode, selection, surface]);
61
62
  if (components.length === 0) {
62
63
  return null;
63
64
  }
@@ -4,9 +4,11 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
4
  import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
5
5
  import { tableMessages as messages } from '@atlaskit/editor-common/messages';
6
6
  import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
7
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
7
8
  import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
8
9
  import { emptyMultipleCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
9
10
  import { getPluginState } from '../../../../pm-plugins/plugin-factory';
11
+ import { CELL_MENU } from '../../cell/keys';
10
12
  import { useTableMenuContext } from '../TableMenuContext';
11
13
  export var ClearCellsItem = function ClearCellsItem(_ref) {
12
14
  var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
@@ -17,6 +19,7 @@ export var ClearCellsItem = function ClearCellsItem(_ref) {
17
19
  var _useIntl = useIntl(),
18
20
  formatMessage = _useIntl.formatMessage;
19
21
  var selectedCellCount = Math.max((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1, (_tableMenuContext$sel2 = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel2 !== void 0 ? _tableMenuContext$sel2 : 1);
22
+ var shouldShowShortcut = !isExperimentEnabled('platform_editor_table_menu_updates_patch_4') || (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.surface.key) !== CELL_MENU.key || selectedCellCount > 1;
20
23
  var handleClick = function handleClick() {
21
24
  var _api$analytics;
22
25
  if (!editorView) {
@@ -35,9 +38,9 @@ export var ClearCellsItem = function ClearCellsItem(_ref) {
35
38
  label: "",
36
39
  size: "small"
37
40
  }),
38
- elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
41
+ elemAfter: shouldShowShortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
39
42
  shortcut: (_tooltip = tooltip(backspace)) !== null && _tooltip !== void 0 ? _tooltip : ''
40
- })
43
+ }) : undefined
41
44
  }, formatMessage(messages.clearCells, {
42
45
  0: selectedCellCount
43
46
  }));
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
3
+ import type { MenuType } from '@atlaskit/editor-ui-control-model';
3
4
  export type TableMenuContextValue = {
4
5
  canMergeCells?: boolean;
5
6
  canMoveColumnLeft?: boolean;
@@ -15,6 +16,7 @@ export type TableMenuContextValue = {
15
16
  isLastRow?: boolean;
16
17
  selectedColumnCount?: number;
17
18
  selectedRowCount?: number;
19
+ surface: MenuType;
18
20
  };
19
21
  export declare const TableMenuProvider: React.Provider<TableMenuContextValue | undefined>;
20
22
  export declare const useTableMenuContext: () => TableMenuContextValue | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "27.0.0",
3
+ "version": "27.0.2",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,7 @@
20
20
  "singleton": true
21
21
  },
22
22
  "dependencies": {
23
- "@atlaskit/adf-schema": "^56.7.0",
23
+ "@atlaskit/adf-schema": "^57.0.0",
24
24
  "@atlaskit/button": "^25.0.0",
25
25
  "@atlaskit/custom-steps": "^1.0.0",
26
26
  "@atlaskit/editor-palette": "^3.4.0",
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/editor-plugin-batch-attribute-updates": "^15.0.0",
30
30
  "@atlaskit/editor-plugin-content-insertion": "^15.0.0",
31
31
  "@atlaskit/editor-plugin-editor-viewmode": "^17.0.0",
32
- "@atlaskit/editor-plugin-extension": "18.0.0",
32
+ "@atlaskit/editor-plugin-extension": "18.0.1",
33
33
  "@atlaskit/editor-plugin-guideline": "^15.0.0",
34
34
  "@atlaskit/editor-plugin-interaction": "^26.0.0",
35
35
  "@atlaskit/editor-plugin-limited-mode": "^12.0.0",
@@ -68,7 +68,7 @@
68
68
  "uuid": "^3.1.0"
69
69
  },
70
70
  "peerDependencies": {
71
- "@atlaskit/editor-common": "^119.0.0",
71
+ "@atlaskit/editor-common": "^119.4.0",
72
72
  "react": "^18.2.0 || ^19.2.0",
73
73
  "react-dom": "^18.2.0 || ^19.2.0",
74
74
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"