@atlaskit/editor-plugin-block-controls 2.21.12 → 2.22.1

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 (18) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/editor-commands/move-node.js +83 -27
  3. package/dist/cjs/editor-commands/move-to-layout.js +46 -31
  4. package/dist/cjs/pm-plugins/utils/remove-from-source.js +1 -1
  5. package/dist/cjs/ui/drag-handle.js +6 -0
  6. package/dist/es2019/editor-commands/move-node.js +84 -24
  7. package/dist/es2019/editor-commands/move-to-layout.js +46 -31
  8. package/dist/es2019/pm-plugins/utils/remove-from-source.js +1 -1
  9. package/dist/es2019/ui/drag-handle.js +6 -0
  10. package/dist/esm/editor-commands/move-node.js +84 -28
  11. package/dist/esm/editor-commands/move-to-layout.js +46 -31
  12. package/dist/esm/pm-plugins/utils/remove-from-source.js +1 -1
  13. package/dist/esm/ui/drag-handle.js +6 -0
  14. package/dist/types/blockControlsPluginType.d.ts +2 -0
  15. package/dist/types/editor-commands/move-to-layout.d.ts +1 -0
  16. package/dist/types-ts4.5/blockControlsPluginType.d.ts +2 -0
  17. package/dist/types-ts4.5/editor-commands/move-to-layout.d.ts +1 -0
  18. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.22.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#110750](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110750)
8
+ [`d561f93940973`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d561f93940973) -
9
+ Add a11y support to rearrange layout column
10
+
11
+ ## 2.22.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#109549](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109549)
16
+ [`d6907dac2c08d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d6907dac2c08d) -
17
+ ED-26300 Delete a layout section by delete the 2nd last column from the layout
18
+
19
+ ### Patch Changes
20
+
21
+ - [#111290](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111290)
22
+ [`8a0749139717e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a0749139717e) -
23
+ [ED-26392] Add exception handler for `.createChecked`
24
+ - Updated dependencies
25
+
3
26
  ## 2.21.12
4
27
 
5
28
  ### Patch Changes
package/dist/cjs/editor-commands/move-node.js CHANGED
@@ -89,6 +89,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
89
89
  return function (state) {
90
90
  var isParentNodeOfTypeLayout;
91
91
  var shouldEnableNestedDndA11y = (0, _experiments.editorExperiment)('nested-dnd', true);
92
+ var selection = state.selection;
92
93
  if (shouldEnableNestedDndA11y) {
93
94
  isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
94
95
  }
@@ -98,43 +99,98 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
98
99
  var $pos = state.doc.resolve(currentNodePos);
99
100
  var moveToPos = -1;
100
101
  var nodeIndex = $pos.index();
102
+ var isLayoutColumnSelected = selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn';
101
103
  if (direction === _consts.DIRECTION.LEFT && shouldEnableNestedDndA11y) {
102
- if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
103
- return false;
104
- }
104
+ if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
105
+ var _$pos$nodeBefore, _api$core;
106
+ moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
107
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
108
+ var _api$blockControls;
109
+ var tr = _ref2.tr;
110
+ api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveToLayout(currentNodePos, moveToPos, {
111
+ selectMovedNode: true
112
+ })({
113
+ tr: tr
114
+ });
115
+ return tr;
116
+ });
117
+ return true;
118
+ } else {
119
+ if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
120
+ return false;
121
+ }
105
122
 
106
- // get the previous layoutSection node
107
- var index = $pos.index($pos.depth - 1);
108
- var grandParent = $pos.node($pos.depth - 1);
109
- var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
110
- moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
123
+ // get the previous layoutSection node
124
+ var index = $pos.index($pos.depth - 1);
125
+ var grandParent = $pos.node($pos.depth - 1);
126
+ var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
127
+ moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
128
+ }
111
129
  } else if (direction === _consts.DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
112
- if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
113
- return false;
130
+ if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
131
+ var _api$core2;
132
+ var _index = $pos.index($pos.depth);
133
+ var parent = $pos.node($pos.depth);
134
+ // get the next layoutColumn node
135
+ var nextNode = parent ? parent.maybeChild(_index + 1) : null;
136
+
137
+ // if the current node is the last node, don't do anything
138
+ if (_index >= parent.childCount - 1) {
139
+ return false;
140
+ }
141
+ var moveToEnd = _index === parent.childCount - 2;
142
+ moveToPos = moveToEnd ? $pos.before() : selection.to + ((nextNode === null || nextNode === void 0 ? void 0 : nextNode.nodeSize) || 1);
143
+ api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
144
+ var _api$blockControls2;
145
+ var tr = _ref3.tr;
146
+ api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.moveToLayout(currentNodePos, moveToPos, {
147
+ moveToEnd: moveToEnd,
148
+ selectMovedNode: true
149
+ })({
150
+ tr: tr
151
+ });
152
+ return tr;
153
+ });
154
+ return true;
155
+ } else {
156
+ if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
157
+ return false;
158
+ }
159
+ moveToPos = $pos.after($pos.depth) + 1;
114
160
  }
115
- moveToPos = $pos.after($pos.depth) + 1;
116
161
  } else if (direction === _consts.DIRECTION.UP) {
117
- var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
118
- if (nodeBefore) {
119
- moveToPos = currentNodePos - nodeBefore.nodeSize;
162
+ if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
163
+ moveToPos = $pos.start() - 1;
164
+ } else {
165
+ var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
166
+ if (nodeBefore) {
167
+ moveToPos = currentNodePos - nodeBefore.nodeSize;
168
+ }
120
169
  }
121
170
  } else {
122
171
  var endOfDoc = $pos.end();
123
172
  var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
124
- var nodeAfter = state.doc.nodeAt(nodeAfterPos);
125
- if (nodeAfterPos < endOfDoc && nodeAfter) {
126
- // if not the last node, move to the end of the next node
127
- moveToPos = nodeAfterPos + nodeAfter.nodeSize;
173
+ if (nodeAfterPos > endOfDoc) {
174
+ return false;
175
+ }
176
+ if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
177
+ moveToPos = state.selection.$from.end() + 1;
178
+ } else {
179
+ var nodeAfter = state.doc.nodeAt(nodeAfterPos);
180
+ if (nodeAfter) {
181
+ // if not the last node, move to the end of the next node
182
+ moveToPos = nodeAfterPos + nodeAfter.nodeSize;
183
+ }
128
184
  }
129
185
  }
130
186
  var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
131
187
 
132
188
  // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
133
- var shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
189
+ var shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility');
134
190
  if (shouldMoveNode) {
135
- var _api$core;
136
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
137
- var tr = _ref2.tr;
191
+ var _api$core3;
192
+ api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
193
+ var tr = _ref4.tr;
138
194
  moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT, formatMessage)({
139
195
  tr: tr
140
196
  });
@@ -143,10 +199,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
143
199
  });
144
200
  return true;
145
201
  } else if (nodeType) {
146
- var _api$core2;
202
+ var _api$core4;
147
203
  // If the node is first/last one, only select the node
148
- api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
149
- var tr = _ref3.tr;
204
+ api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
205
+ var tr = _ref5.tr;
150
206
  (0, _getSelection.selectNode)(tr, currentNodePos, nodeType);
151
207
  tr.scrollIntoView();
152
208
  return tr;
@@ -161,8 +217,8 @@ var moveNode = exports.moveNode = function moveNode(api) {
161
217
  return function (start, to) {
162
218
  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.DRAG_AND_DROP;
163
219
  var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
164
- return function (_ref4) {
165
- var tr = _ref4.tr;
220
+ return function (_ref6) {
221
+ var tr = _ref6.tr;
166
222
  var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
167
223
  exposure: true
168
224
  });
package/dist/cjs/editor-commands/move-to-layout.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.moveToLayout = void 0;
7
7
  var _analytics = require("@atlaskit/editor-common/analytics");
8
+ var _monitoring = require("@atlaskit/editor-common/monitoring");
8
9
  var _model = require("@atlaskit/editor-prosemirror/model");
9
10
  var _state = require("@atlaskit/editor-prosemirror/state");
10
11
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -36,11 +37,13 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
36
37
  var layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
37
38
  return layoutSectionNode;
38
39
  } catch (error) {
39
- // TODO analytics
40
+ (0, _monitoring.logException)(error, {
41
+ location: 'editor-plugin-block-controls/move-to-layout'
42
+ });
40
43
  }
41
44
  return null;
42
45
  };
43
- var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api) {
46
+ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) {
44
47
  var isSameLayout = (0, _validation.isInSameLayout)($originalFrom, $originalTo);
45
48
  var sourceContentEndPos = -1;
46
49
  if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
@@ -61,7 +64,7 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
61
64
  tr.delete(from, sourceContentEndPos);
62
65
  var mappedTo = tr.mapping.map(to);
63
66
  tr.insert(mappedTo, sourceContent);
64
- if (!(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
67
+ if (!(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
65
68
  tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
66
69
  }
67
70
  (0, _fireAnalytics.attachMoveNodeAnalytics)(tr, _analytics.INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api);
@@ -92,21 +95,27 @@ var insertToDestinationNoWidthUpdate = function insertToDestinationNoWidthUpdate
92
95
  var _ref2 = tr.doc.type.schema.nodes || {},
93
96
  layoutColumn = _ref2.layoutColumn;
94
97
  var content = null;
95
- if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
96
- if (sourceContent instanceof _model.Fragment) {
97
- var _sourceFragment$first;
98
- var sourceFragment = sourceContent;
99
- content = layoutColumn.createChecked({
100
- width: 0
101
- }, (0, _checkFragment.isFragmentOfType)(sourceFragment, 'layoutColumn') ? (_sourceFragment$first = sourceFragment.firstChild) === null || _sourceFragment$first === void 0 ? void 0 : _sourceFragment$first.content : sourceFragment);
102
- }
103
- } else {
104
- if (sourceContent instanceof _model.Node) {
105
- var sourceNode = sourceContent;
106
- content = layoutColumn.createChecked({
107
- width: 0
108
- }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
98
+ try {
99
+ if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
100
+ if (sourceContent instanceof _model.Fragment) {
101
+ var _sourceFragment$first;
102
+ var sourceFragment = sourceContent;
103
+ content = layoutColumn.createChecked({
104
+ width: 0
105
+ }, (0, _checkFragment.isFragmentOfType)(sourceFragment, 'layoutColumn') ? (_sourceFragment$first = sourceFragment.firstChild) === null || _sourceFragment$first === void 0 ? void 0 : _sourceFragment$first.content : sourceFragment);
106
+ }
107
+ } else {
108
+ if (sourceContent instanceof _model.Node) {
109
+ var sourceNode = sourceContent;
110
+ content = layoutColumn.createChecked({
111
+ width: 0
112
+ }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
113
+ }
109
114
  }
115
+ } catch (error) {
116
+ (0, _monitoring.logException)(error, {
117
+ location: 'editor-plugin-block-controls/move-to-layout'
118
+ });
110
119
  }
111
120
  if (content) {
112
121
  tr.insert(to, content);
@@ -119,19 +128,25 @@ var insertToDestination = function insertToDestination(tr, to, sourceContent, to
119
128
  var _ref4 = tr.doc.type.schema.nodes || {},
120
129
  layoutColumn = _ref4.layoutColumn;
121
130
  var content = null;
122
- if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
123
- if (sourceContent instanceof _model.Fragment) {
124
- var _sourceContent$firstC;
125
- content = layoutColumn.createChecked({
126
- width: newColumnWidth
127
- }, (0, _checkFragment.isFragmentOfType)(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
128
- }
129
- } else {
130
- if (sourceContent instanceof _model.Node) {
131
- content = layoutColumn.createChecked({
132
- width: newColumnWidth
133
- }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
131
+ try {
132
+ if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
133
+ if (sourceContent instanceof _model.Fragment) {
134
+ var _sourceContent$firstC;
135
+ content = layoutColumn.createChecked({
136
+ width: newColumnWidth
137
+ }, (0, _checkFragment.isFragmentOfType)(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
138
+ }
139
+ } else {
140
+ if (sourceContent instanceof _model.Node) {
141
+ content = layoutColumn.createChecked({
142
+ width: newColumnWidth
143
+ }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
144
+ }
134
145
  }
146
+ } catch (error) {
147
+ (0, _monitoring.logException)(error, {
148
+ location: 'editor-plugin-block-controls/move-to-layout'
149
+ });
135
150
  }
136
151
  if (content) {
137
152
  tr.insert(to, content);
@@ -302,12 +317,12 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
302
317
  }
303
318
  if (toNode.type === layoutSection) {
304
319
  var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
305
- return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
320
+ return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
306
321
  } else if (toNode.type === layoutColumn) {
307
322
  var toLayout = $to.parent;
308
323
  var toLayoutPos = to - $to.parentOffset - 1;
309
324
  var _toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize : to;
310
- return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api);
325
+ return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
311
326
  } else {
312
327
  var toNodeWithoutBreakout = toNode;
313
328
 
package/dist/cjs/pm-plugins/utils/remove-from-source.js CHANGED
@@ -31,7 +31,7 @@ var removeFromSource = exports.removeFromSource = function removeFromSource(tr,
31
31
 
32
32
  // Currently, we assume that the MIN_LAYOUT_COLUMN is set to 2.
33
33
  // This value may require an update when we introduce support for a single-column layout.
34
- if (sourceParent.childCount === 2 && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_DnD_remove_layout')) {
34
+ if (sourceParent.childCount === 2 && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_dnd_remove_layout')) {
35
35
  var _$from$parent$lastChi, _$from$parent$firstCh;
36
36
  var layoutContentFragment = $from.parentOffset === 0 ? _model.Fragment.from((_$from$parent$lastChi = $from.parent.lastChild) === null || _$from$parent$lastChi === void 0 ? void 0 : _$from$parent$lastChi.content) : _model.Fragment.from((_$from$parent$firstCh = $from.parent.firstChild) === null || _$from$parent$firstCh === void 0 ? void 0 : _$from$parent$firstCh.content);
37
37
  var parent = (0, _utils.findParentNodeClosestToPos)($from, function (node) {
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -417,6 +417,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
417
417
  if ((0, _experiments.editorExperiment)('advanced_layouts', true) && nodeType === 'layoutColumn') {
418
418
  helpDescriptors = (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
419
419
  description: formatMessage(_messages.blockControlsMessages.dragToRearrange)
420
+ }, {
421
+ description: formatMessage(_messages.blockControlsMessages.moveUp),
422
+ keymap: _keymaps.dragToMoveUp
423
+ }, {
424
+ description: formatMessage(_messages.blockControlsMessages.moveDown),
425
+ keymap: _keymaps.dragToMoveDown
420
426
  }, {
421
427
  description: formatMessage(_messages.blockControlsMessages.moveLeft),
422
428
  keymap: _keymaps.dragToMoveLeft
package/dist/es2019/editor-commands/move-node.js CHANGED
@@ -5,7 +5,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
5
5
  import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
6
6
  import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
7
7
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
8
- import { Selection } from '@atlaskit/editor-prosemirror/state';
8
+ import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
9
9
  import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
10
10
  import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
11
11
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -84,6 +84,9 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
84
84
  return state => {
85
85
  let isParentNodeOfTypeLayout;
86
86
  const shouldEnableNestedDndA11y = editorExperiment('nested-dnd', true);
87
+ const {
88
+ selection
89
+ } = state;
87
90
  if (shouldEnableNestedDndA11y) {
88
91
  isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
89
92
  }
@@ -93,42 +96,99 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
93
96
  const $pos = state.doc.resolve(currentNodePos);
94
97
  let moveToPos = -1;
95
98
  const nodeIndex = $pos.index();
99
+ const isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
96
100
  if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
97
- if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
98
- return false;
99
- }
101
+ if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
102
+ var _$pos$nodeBefore, _api$core;
103
+ moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
104
+ api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
105
+ tr
106
+ }) => {
107
+ var _api$blockControls, _api$blockControls$co;
108
+ api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.moveToLayout(currentNodePos, moveToPos, {
109
+ selectMovedNode: true
110
+ })({
111
+ tr
112
+ });
113
+ return tr;
114
+ });
115
+ return true;
116
+ } else {
117
+ if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
118
+ return false;
119
+ }
100
120
 
101
- // get the previous layoutSection node
102
- const index = $pos.index($pos.depth - 1);
103
- const grandParent = $pos.node($pos.depth - 1);
104
- const previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
105
- moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
121
+ // get the previous layoutSection node
122
+ const index = $pos.index($pos.depth - 1);
123
+ const grandParent = $pos.node($pos.depth - 1);
124
+ const previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
125
+ moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
126
+ }
106
127
  } else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
107
- if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
108
- return false;
128
+ if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
129
+ var _api$core2;
130
+ const index = $pos.index($pos.depth);
131
+ const parent = $pos.node($pos.depth);
132
+ // get the next layoutColumn node
133
+ const nextNode = parent ? parent.maybeChild(index + 1) : null;
134
+
135
+ // if the current node is the last node, don't do anything
136
+ if (index >= parent.childCount - 1) {
137
+ return false;
138
+ }
139
+ const moveToEnd = index === parent.childCount - 2;
140
+ moveToPos = moveToEnd ? $pos.before() : selection.to + ((nextNode === null || nextNode === void 0 ? void 0 : nextNode.nodeSize) || 1);
141
+ api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
142
+ tr
143
+ }) => {
144
+ var _api$blockControls2, _api$blockControls2$c;
145
+ api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(currentNodePos, moveToPos, {
146
+ moveToEnd,
147
+ selectMovedNode: true
148
+ })({
149
+ tr
150
+ });
151
+ return tr;
152
+ });
153
+ return true;
154
+ } else {
155
+ if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
156
+ return false;
157
+ }
158
+ moveToPos = $pos.after($pos.depth) + 1;
109
159
  }
110
- moveToPos = $pos.after($pos.depth) + 1;
111
160
  } else if (direction === DIRECTION.UP) {
112
- const nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
113
- if (nodeBefore) {
114
- moveToPos = currentNodePos - nodeBefore.nodeSize;
161
+ if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
162
+ moveToPos = $pos.start() - 1;
163
+ } else {
164
+ const nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
165
+ if (nodeBefore) {
166
+ moveToPos = currentNodePos - nodeBefore.nodeSize;
167
+ }
115
168
  }
116
169
  } else {
117
170
  const endOfDoc = $pos.end();
118
171
  const nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
119
- const nodeAfter = state.doc.nodeAt(nodeAfterPos);
120
- if (nodeAfterPos < endOfDoc && nodeAfter) {
121
- // if not the last node, move to the end of the next node
122
- moveToPos = nodeAfterPos + nodeAfter.nodeSize;
172
+ if (nodeAfterPos > endOfDoc) {
173
+ return false;
174
+ }
175
+ if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
176
+ moveToPos = state.selection.$from.end() + 1;
177
+ } else {
178
+ const nodeAfter = state.doc.nodeAt(nodeAfterPos);
179
+ if (nodeAfter) {
180
+ // if not the last node, move to the end of the next node
181
+ moveToPos = nodeAfterPos + nodeAfter.nodeSize;
182
+ }
123
183
  }
124
184
  }
125
185
  const nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
126
186
 
127
187
  // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
128
- const shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
188
+ const shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && fg('platform_editor_advanced_layouts_accessibility');
129
189
  if (shouldMoveNode) {
130
- var _api$core;
131
- api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
190
+ var _api$core3;
191
+ api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
132
192
  tr
133
193
  }) => {
134
194
  moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
@@ -139,9 +199,9 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
139
199
  });
140
200
  return true;
141
201
  } else if (nodeType) {
142
- var _api$core2;
202
+ var _api$core4;
143
203
  // If the node is first/last one, only select the node
144
- api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
204
+ api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
145
205
  tr
146
206
  }) => {
147
207
  selectNode(tr, currentNodePos, nodeType);
package/dist/es2019/editor-commands/move-to-layout.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
+ import { logException } from '@atlaskit/editor-common/monitoring';
2
3
  import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
3
4
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
4
5
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -31,11 +32,13 @@ const createNewLayout = (schema, layoutContents) => {
31
32
  const layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
32
33
  return layoutSectionNode;
33
34
  } catch (error) {
34
- // TODO analytics
35
+ logException(error, {
36
+ location: 'editor-plugin-block-controls/move-to-layout'
37
+ });
35
38
  }
36
39
  return null;
37
40
  };
38
- const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api) => {
41
+ const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) => {
39
42
  const isSameLayout = isInSameLayout($originalFrom, $originalTo);
40
43
  let sourceContentEndPos = -1;
41
44
  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
@@ -56,7 +59,7 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr
56
59
  tr.delete(from, sourceContentEndPos);
57
60
  const mappedTo = tr.mapping.map(to);
58
61
  tr.insert(mappedTo, sourceContent);
59
- if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
62
+ if (!fg('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
60
63
  tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
61
64
  }
62
65
  attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api);
@@ -88,21 +91,27 @@ const insertToDestinationNoWidthUpdate = (tr, to, sourceContent) => {
88
91
  layoutColumn
89
92
  } = tr.doc.type.schema.nodes || {};
90
93
  let content = null;
91
- if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
92
- if (sourceContent instanceof Fragment) {
93
- var _sourceFragment$first;
94
- const sourceFragment = sourceContent;
95
- content = layoutColumn.createChecked({
96
- width: 0
97
- }, isFragmentOfType(sourceFragment, 'layoutColumn') ? (_sourceFragment$first = sourceFragment.firstChild) === null || _sourceFragment$first === void 0 ? void 0 : _sourceFragment$first.content : sourceFragment);
98
- }
99
- } else {
100
- if (sourceContent instanceof PMNode) {
101
- const sourceNode = sourceContent;
102
- content = layoutColumn.createChecked({
103
- width: 0
104
- }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
94
+ try {
95
+ if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
96
+ if (sourceContent instanceof Fragment) {
97
+ var _sourceFragment$first;
98
+ const sourceFragment = sourceContent;
99
+ content = layoutColumn.createChecked({
100
+ width: 0
101
+ }, isFragmentOfType(sourceFragment, 'layoutColumn') ? (_sourceFragment$first = sourceFragment.firstChild) === null || _sourceFragment$first === void 0 ? void 0 : _sourceFragment$first.content : sourceFragment);
102
+ }
103
+ } else {
104
+ if (sourceContent instanceof PMNode) {
105
+ const sourceNode = sourceContent;
106
+ content = layoutColumn.createChecked({
107
+ width: 0
108
+ }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
109
+ }
105
110
  }
111
+ } catch (error) {
112
+ logException(error, {
113
+ location: 'editor-plugin-block-controls/move-to-layout'
114
+ });
106
115
  }
107
116
  if (content) {
108
117
  tr.insert(to, content);
@@ -117,19 +126,25 @@ const insertToDestination = (tr, to, sourceContent, toLayout, toLayoutPos) => {
117
126
  layoutColumn
118
127
  } = tr.doc.type.schema.nodes || {};
119
128
  let content = null;
120
- if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
121
- if (sourceContent instanceof Fragment) {
122
- var _sourceContent$firstC;
123
- content = layoutColumn.createChecked({
124
- width: newColumnWidth
125
- }, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
126
- }
127
- } else {
128
- if (sourceContent instanceof PMNode) {
129
- content = layoutColumn.createChecked({
130
- width: newColumnWidth
131
- }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
129
+ try {
130
+ if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
131
+ if (sourceContent instanceof Fragment) {
132
+ var _sourceContent$firstC;
133
+ content = layoutColumn.createChecked({
134
+ width: newColumnWidth
135
+ }, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
136
+ }
137
+ } else {
138
+ if (sourceContent instanceof PMNode) {
139
+ content = layoutColumn.createChecked({
140
+ width: newColumnWidth
141
+ }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
142
+ }
132
143
  }
144
+ } catch (error) {
145
+ logException(error, {
146
+ location: 'editor-plugin-block-controls/move-to-layout'
147
+ });
133
148
  }
134
149
  if (content) {
135
150
  tr.insert(to, content);
@@ -295,12 +310,12 @@ export const moveToLayout = api => (from, to, options) => ({
295
310
  }
296
311
  if (toNode.type === layoutSection) {
297
312
  const toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
298
- return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
313
+ return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
299
314
  } else if (toNode.type === layoutColumn) {
300
315
  const toLayout = $to.parent;
301
316
  const toLayoutPos = to - $to.parentOffset - 1;
302
317
  const toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize : to;
303
- return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
318
+ return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
304
319
  } else {
305
320
  let toNodeWithoutBreakout = toNode;
306
321
 
package/dist/es2019/pm-plugins/utils/remove-from-source.js CHANGED
@@ -25,7 +25,7 @@ export const removeFromSource = (tr, $from, to) => {
25
25
 
26
26
  // Currently, we assume that the MIN_LAYOUT_COLUMN is set to 2.
27
27
  // This value may require an update when we introduce support for a single-column layout.
28
- if (sourceParent.childCount === 2 && fg('platform_editor_advanced_layouts_DnD_remove_layout')) {
28
+ if (sourceParent.childCount === 2 && fg('platform_editor_advanced_layouts_dnd_remove_layout')) {
29
29
  var _$from$parent$lastChi, _$from$parent$firstCh;
30
30
  const layoutContentFragment = $from.parentOffset === 0 ? Fragment.from((_$from$parent$lastChi = $from.parent.lastChild) === null || _$from$parent$lastChi === void 0 ? void 0 : _$from$parent$lastChi.content) : Fragment.from((_$from$parent$firstCh = $from.parent.firstChild) === null || _$from$parent$firstCh === void 0 ? void 0 : _$from$parent$firstCh.content);
31
31
  const parent = findParentNodeClosestToPos($from, node => {
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -397,6 +397,12 @@ export const DragHandle = ({
397
397
  if (editorExperiment('advanced_layouts', true) && nodeType === 'layoutColumn') {
398
398
  helpDescriptors = fg('platform_editor_advanced_layouts_accessibility') ? [{
399
399
  description: formatMessage(blockControlsMessages.dragToRearrange)
400
+ }, {
401
+ description: formatMessage(blockControlsMessages.moveUp),
402
+ keymap: dragToMoveUp
403
+ }, {
404
+ description: formatMessage(blockControlsMessages.moveDown),
405
+ keymap: dragToMoveDown
400
406
  }, {
401
407
  description: formatMessage(blockControlsMessages.moveLeft),
402
408
  keymap: dragToMoveLeft
package/dist/esm/editor-commands/move-node.js CHANGED
@@ -8,7 +8,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
8
8
  import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
9
9
  import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
10
10
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
11
- import { Selection } from '@atlaskit/editor-prosemirror/state';
11
+ import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
12
12
  import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
13
13
  import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
14
14
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -83,6 +83,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
83
83
  return function (state) {
84
84
  var isParentNodeOfTypeLayout;
85
85
  var shouldEnableNestedDndA11y = editorExperiment('nested-dnd', true);
86
+ var selection = state.selection;
86
87
  if (shouldEnableNestedDndA11y) {
87
88
  isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
88
89
  }
@@ -92,43 +93,98 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
92
93
  var $pos = state.doc.resolve(currentNodePos);
93
94
  var moveToPos = -1;
94
95
  var nodeIndex = $pos.index();
96
+ var isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
95
97
  if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
96
- if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
97
- return false;
98
- }
98
+ if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
99
+ var _$pos$nodeBefore, _api$core;
100
+ moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
101
+ api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
102
+ var _api$blockControls;
103
+ var tr = _ref2.tr;
104
+ api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.moveToLayout(currentNodePos, moveToPos, {
105
+ selectMovedNode: true
106
+ })({
107
+ tr: tr
108
+ });
109
+ return tr;
110
+ });
111
+ return true;
112
+ } else {
113
+ if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
114
+ return false;
115
+ }
99
116
 
100
- // get the previous layoutSection node
101
- var index = $pos.index($pos.depth - 1);
102
- var grandParent = $pos.node($pos.depth - 1);
103
- var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
104
- moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
117
+ // get the previous layoutSection node
118
+ var index = $pos.index($pos.depth - 1);
119
+ var grandParent = $pos.node($pos.depth - 1);
120
+ var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
121
+ moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
122
+ }
105
123
  } else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
106
- if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
107
- return false;
124
+ if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
125
+ var _api$core2;
126
+ var _index = $pos.index($pos.depth);
127
+ var parent = $pos.node($pos.depth);
128
+ // get the next layoutColumn node
129
+ var nextNode = parent ? parent.maybeChild(_index + 1) : null;
130
+
131
+ // if the current node is the last node, don't do anything
132
+ if (_index >= parent.childCount - 1) {
133
+ return false;
134
+ }
135
+ var moveToEnd = _index === parent.childCount - 2;
136
+ moveToPos = moveToEnd ? $pos.before() : selection.to + ((nextNode === null || nextNode === void 0 ? void 0 : nextNode.nodeSize) || 1);
137
+ api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
138
+ var _api$blockControls2;
139
+ var tr = _ref3.tr;
140
+ api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 || _api$blockControls2.moveToLayout(currentNodePos, moveToPos, {
141
+ moveToEnd: moveToEnd,
142
+ selectMovedNode: true
143
+ })({
144
+ tr: tr
145
+ });
146
+ return tr;
147
+ });
148
+ return true;
149
+ } else {
150
+ if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
151
+ return false;
152
+ }
153
+ moveToPos = $pos.after($pos.depth) + 1;
108
154
  }
109
- moveToPos = $pos.after($pos.depth) + 1;
110
155
  } else if (direction === DIRECTION.UP) {
111
- var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
112
- if (nodeBefore) {
113
- moveToPos = currentNodePos - nodeBefore.nodeSize;
156
+ if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
157
+ moveToPos = $pos.start() - 1;
158
+ } else {
159
+ var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
160
+ if (nodeBefore) {
161
+ moveToPos = currentNodePos - nodeBefore.nodeSize;
162
+ }
114
163
  }
115
164
  } else {
116
165
  var endOfDoc = $pos.end();
117
166
  var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
118
- var nodeAfter = state.doc.nodeAt(nodeAfterPos);
119
- if (nodeAfterPos < endOfDoc && nodeAfter) {
120
- // if not the last node, move to the end of the next node
121
- moveToPos = nodeAfterPos + nodeAfter.nodeSize;
167
+ if (nodeAfterPos > endOfDoc) {
168
+ return false;
169
+ }
170
+ if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
171
+ moveToPos = state.selection.$from.end() + 1;
172
+ } else {
173
+ var nodeAfter = state.doc.nodeAt(nodeAfterPos);
174
+ if (nodeAfter) {
175
+ // if not the last node, move to the end of the next node
176
+ moveToPos = nodeAfterPos + nodeAfter.nodeSize;
177
+ }
122
178
  }
123
179
  }
124
180
  var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
125
181
 
126
182
  // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
127
- var shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
183
+ var shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && fg('platform_editor_advanced_layouts_accessibility');
128
184
  if (shouldMoveNode) {
129
- var _api$core;
130
- api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
131
- var tr = _ref2.tr;
185
+ var _api$core3;
186
+ api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
187
+ var tr = _ref4.tr;
132
188
  moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
133
189
  tr: tr
134
190
  });
@@ -137,10 +193,10 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
137
193
  });
138
194
  return true;
139
195
  } else if (nodeType) {
140
- var _api$core2;
196
+ var _api$core4;
141
197
  // If the node is first/last one, only select the node
142
- api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
143
- var tr = _ref3.tr;
198
+ api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
199
+ var tr = _ref5.tr;
144
200
  selectNode(tr, currentNodePos, nodeType);
145
201
  tr.scrollIntoView();
146
202
  return tr;
@@ -155,8 +211,8 @@ export var moveNode = function moveNode(api) {
155
211
  return function (start, to) {
156
212
  var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.DRAG_AND_DROP;
157
213
  var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
158
- return function (_ref4) {
159
- var tr = _ref4.tr;
214
+ return function (_ref6) {
215
+ var tr = _ref6.tr;
160
216
  var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
161
217
  exposure: true
162
218
  });
package/dist/esm/editor-commands/move-to-layout.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
+ import { logException } from '@atlaskit/editor-common/monitoring';
2
3
  import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
3
4
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
4
5
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -30,11 +31,13 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
30
31
  var layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
31
32
  return layoutSectionNode;
32
33
  } catch (error) {
33
- // TODO analytics
34
+ logException(error, {
35
+ location: 'editor-plugin-block-controls/move-to-layout'
36
+ });
34
37
  }
35
38
  return null;
36
39
  };
37
- var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api) {
40
+ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) {
38
41
  var isSameLayout = isInSameLayout($originalFrom, $originalTo);
39
42
  var sourceContentEndPos = -1;
40
43
  if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
@@ -55,7 +58,7 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
55
58
  tr.delete(from, sourceContentEndPos);
56
59
  var mappedTo = tr.mapping.map(to);
57
60
  tr.insert(mappedTo, sourceContent);
58
- if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
61
+ if (!fg('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
59
62
  tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
60
63
  }
61
64
  attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api);
@@ -86,21 +89,27 @@ var insertToDestinationNoWidthUpdate = function insertToDestinationNoWidthUpdate
86
89
  var _ref2 = tr.doc.type.schema.nodes || {},
87
90
  layoutColumn = _ref2.layoutColumn;
88
91
  var content = null;
89
- if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
90
- if (sourceContent instanceof Fragment) {
91
- var _sourceFragment$first;
92
- var sourceFragment = sourceContent;
93
- content = layoutColumn.createChecked({
94
- width: 0
95
- }, isFragmentOfType(sourceFragment, 'layoutColumn') ? (_sourceFragment$first = sourceFragment.firstChild) === null || _sourceFragment$first === void 0 ? void 0 : _sourceFragment$first.content : sourceFragment);
96
- }
97
- } else {
98
- if (sourceContent instanceof PMNode) {
99
- var sourceNode = sourceContent;
100
- content = layoutColumn.createChecked({
101
- width: 0
102
- }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
92
+ try {
93
+ if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
94
+ if (sourceContent instanceof Fragment) {
95
+ var _sourceFragment$first;
96
+ var sourceFragment = sourceContent;
97
+ content = layoutColumn.createChecked({
98
+ width: 0
99
+ }, isFragmentOfType(sourceFragment, 'layoutColumn') ? (_sourceFragment$first = sourceFragment.firstChild) === null || _sourceFragment$first === void 0 ? void 0 : _sourceFragment$first.content : sourceFragment);
100
+ }
101
+ } else {
102
+ if (sourceContent instanceof PMNode) {
103
+ var sourceNode = sourceContent;
104
+ content = layoutColumn.createChecked({
105
+ width: 0
106
+ }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
107
+ }
103
108
  }
109
+ } catch (error) {
110
+ logException(error, {
111
+ location: 'editor-plugin-block-controls/move-to-layout'
112
+ });
104
113
  }
105
114
  if (content) {
106
115
  tr.insert(to, content);
@@ -113,19 +122,25 @@ var insertToDestination = function insertToDestination(tr, to, sourceContent, to
113
122
  var _ref4 = tr.doc.type.schema.nodes || {},
114
123
  layoutColumn = _ref4.layoutColumn;
115
124
  var content = null;
116
- if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
117
- if (sourceContent instanceof Fragment) {
118
- var _sourceContent$firstC;
119
- content = layoutColumn.createChecked({
120
- width: newColumnWidth
121
- }, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
122
- }
123
- } else {
124
- if (sourceContent instanceof PMNode) {
125
- content = layoutColumn.createChecked({
126
- width: newColumnWidth
127
- }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
125
+ try {
126
+ if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
127
+ if (sourceContent instanceof Fragment) {
128
+ var _sourceContent$firstC;
129
+ content = layoutColumn.createChecked({
130
+ width: newColumnWidth
131
+ }, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
132
+ }
133
+ } else {
134
+ if (sourceContent instanceof PMNode) {
135
+ content = layoutColumn.createChecked({
136
+ width: newColumnWidth
137
+ }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
138
+ }
128
139
  }
140
+ } catch (error) {
141
+ logException(error, {
142
+ location: 'editor-plugin-block-controls/move-to-layout'
143
+ });
129
144
  }
130
145
  if (content) {
131
146
  tr.insert(to, content);
@@ -296,12 +311,12 @@ export var moveToLayout = function moveToLayout(api) {
296
311
  }
297
312
  if (toNode.type === layoutSection) {
298
313
  var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
299
- return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
314
+ return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
300
315
  } else if (toNode.type === layoutColumn) {
301
316
  var toLayout = $to.parent;
302
317
  var toLayoutPos = to - $to.parentOffset - 1;
303
318
  var _toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize : to;
304
- return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api);
319
+ return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
305
320
  } else {
306
321
  var toNodeWithoutBreakout = toNode;
307
322
 
package/dist/esm/pm-plugins/utils/remove-from-source.js CHANGED
@@ -25,7 +25,7 @@ export var removeFromSource = function removeFromSource(tr, $from, to) {
25
25
 
26
26
  // Currently, we assume that the MIN_LAYOUT_COLUMN is set to 2.
27
27
  // This value may require an update when we introduce support for a single-column layout.
28
- if (sourceParent.childCount === 2 && fg('platform_editor_advanced_layouts_DnD_remove_layout')) {
28
+ if (sourceParent.childCount === 2 && fg('platform_editor_advanced_layouts_dnd_remove_layout')) {
29
29
  var _$from$parent$lastChi, _$from$parent$firstCh;
30
30
  var layoutContentFragment = $from.parentOffset === 0 ? Fragment.from((_$from$parent$lastChi = $from.parent.lastChild) === null || _$from$parent$lastChi === void 0 ? void 0 : _$from$parent$lastChi.content) : Fragment.from((_$from$parent$firstCh = $from.parent.firstChild) === null || _$from$parent$firstCh === void 0 ? void 0 : _$from$parent$firstCh.content);
31
31
  var parent = findParentNodeClosestToPos($from, function (node) {
package/dist/esm/ui/drag-handle.js CHANGED
@@ -408,6 +408,12 @@ export var DragHandle = function DragHandle(_ref) {
408
408
  if (editorExperiment('advanced_layouts', true) && nodeType === 'layoutColumn') {
409
409
  helpDescriptors = fg('platform_editor_advanced_layouts_accessibility') ? [{
410
410
  description: formatMessage(blockControlsMessages.dragToRearrange)
411
+ }, {
412
+ description: formatMessage(blockControlsMessages.moveUp),
413
+ keymap: dragToMoveUp
414
+ }, {
415
+ description: formatMessage(blockControlsMessages.moveDown),
416
+ keymap: dragToMoveDown
411
417
  }, {
412
418
  description: formatMessage(blockControlsMessages.moveLeft),
413
419
  keymap: dragToMoveLeft
package/dist/types/blockControlsPluginType.d.ts CHANGED
@@ -65,9 +65,11 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
65
65
  * @param from position of the node to be moved
66
66
  * @param to position of the layout/layout column/node to move the node to
67
67
  * @param options moveToEnd: move the node to after the layout/layout column/another node
68
+ * @param options selectMovedNode: select the moved node after moving it
68
69
  */
69
70
  moveToLayout: (start: number, to: number, options?: {
70
71
  moveToEnd?: boolean;
72
+ selectMovedNode?: boolean;
71
73
  }) => EditorCommand;
72
74
  moveNode: MoveNode;
73
75
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
package/dist/types/editor-commands/move-to-layout.d.ts CHANGED
@@ -2,4 +2,5 @@ import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common
2
2
  import type { BlockControlsPlugin } from '../blockControlsPluginType';
3
3
  export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, options?: {
4
4
  moveToEnd?: boolean;
5
+ selectMovedNode?: boolean;
5
6
  }) => EditorCommand;
package/dist/types-ts4.5/blockControlsPluginType.d.ts CHANGED
@@ -65,9 +65,11 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
65
65
  * @param from position of the node to be moved
66
66
  * @param to position of the layout/layout column/node to move the node to
67
67
  * @param options moveToEnd: move the node to after the layout/layout column/another node
68
+ * @param options selectMovedNode: select the moved node after moving it
68
69
  */
69
70
  moveToLayout: (start: number, to: number, options?: {
70
71
  moveToEnd?: boolean;
72
+ selectMovedNode?: boolean;
71
73
  }) => EditorCommand;
72
74
  moveNode: MoveNode;
73
75
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
package/dist/types-ts4.5/editor-commands/move-to-layout.d.ts CHANGED
@@ -2,4 +2,5 @@ import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common
2
2
  import type { BlockControlsPlugin } from '../blockControlsPluginType';
3
3
  export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, options?: {
4
4
  moveToEnd?: boolean;
5
+ selectMovedNode?: boolean;
5
6
  }) => EditorCommand;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "2.21.12",
3
+ "version": "2.22.1",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  },
32
32
  "dependencies": {
33
33
  "@atlaskit/adf-schema": "^46.1.0",
34
- "@atlaskit/editor-common": "^99.8.0",
34
+ "@atlaskit/editor-common": "^99.9.0",
35
35
  "@atlaskit/editor-plugin-accessibility-utils": "^1.3.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.11.0",
37
37
  "@atlaskit/editor-plugin-editor-disabled": "^1.4.0",
@@ -41,14 +41,14 @@
41
41
  "@atlaskit/editor-prosemirror": "6.2.1",
42
42
  "@atlaskit/editor-shared-styles": "^3.2.0",
43
43
  "@atlaskit/editor-tables": "^2.8.0",
44
- "@atlaskit/icon": "^23.6.0",
44
+ "@atlaskit/icon": "^23.7.0",
45
45
  "@atlaskit/platform-feature-flags": "^1.0.0",
46
46
  "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
48
48
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.2.0",
49
49
  "@atlaskit/primitives": "^13.4.0",
50
50
  "@atlaskit/theme": "^14.1.0",
51
- "@atlaskit/tmp-editor-statsig": "^2.42.0",
51
+ "@atlaskit/tmp-editor-statsig": "^2.43.0",
52
52
  "@atlaskit/tokens": "^3.3.0",
53
53
  "@atlaskit/tooltip": "^19.1.0",
54
54
  "@babel/runtime": "^7.0.0",
@@ -133,7 +133,7 @@
133
133
  "platform_editor_advanced_layouts_post_fix_patch_3": {
134
134
  "type": "boolean"
135
135
  },
136
- "platform_editor_advanced_layouts_DnD_remove_layout": {
136
+ "platform_editor_advanced_layouts_dnd_remove_layout": {
137
137
  "type": "boolean"
138
138
  },
139
139
  "platform_editor_dnd_update_drag_start_target": {