@atlaskit/editor-plugin-block-controls 2.22.0 → 2.22.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.22.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.22.1
+
+### Patch Changes
+
+- [#110750](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110750)
+  [`d561f93940973`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d561f93940973) -
+  Add a11y support to rearrange layout column
+
 ## 2.22.0
 
 ### Minor Changes

package/dist/cjs/editor-commands/move-node.js

@@ -89,6 +89,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
   return function (state) {
     var isParentNodeOfTypeLayout;
     var shouldEnableNestedDndA11y = (0, _experiments.editorExperiment)('nested-dnd', true);
+    var selection = state.selection;
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
     }
@@ -98,43 +99,98 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       var $pos = state.doc.resolve(currentNodePos);
       var moveToPos = -1;
       var nodeIndex = $pos.index();
+      var isLayoutColumnSelected = selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn';
       if (direction === _consts.DIRECTION.LEFT && shouldEnableNestedDndA11y) {
-        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
-          return false;
-        }
+        if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _$pos$nodeBefore, _api$core;
+          moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+            var _api$blockControls;
+            var tr = _ref2.tr;
+            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, {
+              selectMovedNode: true
+            })({
+              tr: tr
+            });
+            return tr;
+          });
+          return true;
+        } else {
+          if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+            return false;
+          }
 
-        // get the previous layoutSection node
-        var index = $pos.index($pos.depth - 1);
-        var grandParent = $pos.node($pos.depth - 1);
-        var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
-        moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
+          // get the previous layoutSection node
+          var index = $pos.index($pos.depth - 1);
+          var grandParent = $pos.node($pos.depth - 1);
+          var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
+          moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
+        }
       } else if (direction === _consts.DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
-        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
-          return false;
+        if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core2;
+          var _index = $pos.index($pos.depth);
+          var parent = $pos.node($pos.depth);
+          // get the next layoutColumn node
+          var nextNode = parent ? parent.maybeChild(_index + 1) : null;
+
+          // if the current node is the last node, don't do anything
+          if (_index >= parent.childCount - 1) {
+            return false;
+          }
+          var moveToEnd = _index === parent.childCount - 2;
+          moveToPos = moveToEnd ? $pos.before() : selection.to + ((nextNode === null || nextNode === void 0 ? void 0 : nextNode.nodeSize) || 1);
+          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
+            var _api$blockControls2;
+            var tr = _ref3.tr;
+            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, {
+              moveToEnd: moveToEnd,
+              selectMovedNode: true
+            })({
+              tr: tr
+            });
+            return tr;
+          });
+          return true;
+        } else {
+          if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+            return false;
+          }
+          moveToPos = $pos.after($pos.depth) + 1;
         }
-        moveToPos = $pos.after($pos.depth) + 1;
       } else if (direction === _consts.DIRECTION.UP) {
-        var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
-        if (nodeBefore) {
-          moveToPos = currentNodePos - nodeBefore.nodeSize;
+        if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          moveToPos = $pos.start() - 1;
+        } else {
+          var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
+          if (nodeBefore) {
+            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          }
         }
       } else {
         var endOfDoc = $pos.end();
         var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
-        var nodeAfter = state.doc.nodeAt(nodeAfterPos);
-        if (nodeAfterPos < endOfDoc && nodeAfter) {
-          // if not the last node, move to the end of the next node
-          moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+        if (nodeAfterPos > endOfDoc) {
+          return false;
+        }
+        if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          moveToPos = state.selection.$from.end() + 1;
+        } else {
+          var nodeAfter = state.doc.nodeAt(nodeAfterPos);
+          if (nodeAfter) {
+            // if not the last node, move to the end of the next node
+            moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+          }
         }
       }
       var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
 
       // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
-      var shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      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');
       if (shouldMoveNode) {
-        var _api$core;
-        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
-          var tr = _ref2.tr;
+        var _api$core3;
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
           moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
           });
@@ -143,10 +199,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         });
         return true;
       } else if (nodeType) {
-        var _api$core2;
+        var _api$core4;
         // If the node is first/last one, only select the node
-        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
-          var tr = _ref3.tr;
+        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
+          var tr = _ref5.tr;
           (0, _getSelection.selectNode)(tr, currentNodePos, nodeType);
           tr.scrollIntoView();
           return tr;
@@ -161,8 +217,8 @@ var moveNode = exports.moveNode = function moveNode(api) {
   return function (start, to) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.DRAG_AND_DROP;
     var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
-    return function (_ref4) {
-      var tr = _ref4.tr;
+    return function (_ref6) {
+      var tr = _ref6.tr;
       var isMultiSelect = (0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true, {
         exposure: true
       });

package/dist/cjs/editor-commands/move-to-layout.js

@@ -43,7 +43,7 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api) {
+var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) {
   var isSameLayout = (0, _validation.isInSameLayout)($originalFrom, $originalTo);
   var sourceContentEndPos = -1;
   if ((0, _experiments.editorExperiment)('platform_editor_element_drag_and_drop_multiselect', true)) {
@@ -64,7 +64,7 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
     tr.delete(from, sourceContentEndPos);
     var mappedTo = tr.mapping.map(to);
     tr.insert(mappedTo, sourceContent);
-    if (!(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
       tr.setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
     (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);
@@ -317,12 +317,12 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
       }
       if (toNode.type === layoutSection) {
         var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
-        return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
+        return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
       } else if (toNode.type === layoutColumn) {
         var toLayout = $to.parent;
         var toLayoutPos = to - $to.parentOffset - 1;
         var _toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize : to;
-        return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api);
+        return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
       } else {
         var toNodeWithoutBreakout = toNode;
 

package/dist/cjs/ui/drag-handle.js

@@ -417,6 +417,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   if ((0, _experiments.editorExperiment)('advanced_layouts', true) && nodeType === 'layoutColumn') {
     helpDescriptors = (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
       description: formatMessage(_messages.blockControlsMessages.dragToRearrange)
+    }, {
+      description: formatMessage(_messages.blockControlsMessages.moveUp),
+      keymap: _keymaps.dragToMoveUp
+    }, {
+      description: formatMessage(_messages.blockControlsMessages.moveDown),
+      keymap: _keymaps.dragToMoveDown
     }, {
       description: formatMessage(_messages.blockControlsMessages.moveLeft),
       keymap: _keymaps.dragToMoveLeft

package/dist/es2019/editor-commands/move-node.js

@@ -5,7 +5,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -84,6 +84,9 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
   return state => {
     let isParentNodeOfTypeLayout;
     const shouldEnableNestedDndA11y = editorExperiment('nested-dnd', true);
+    const {
+      selection
+    } = state;
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
@@ -93,42 +96,99 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
       const $pos = state.doc.resolve(currentNodePos);
       let moveToPos = -1;
       const nodeIndex = $pos.index();
+      const isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
       if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
-        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
-          return false;
-        }
+        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _$pos$nodeBefore, _api$core;
+          moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
+          api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+            tr
+          }) => {
+            var _api$blockControls, _api$blockControls$co;
+            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, {
+              selectMovedNode: true
+            })({
+              tr
+            });
+            return tr;
+          });
+          return true;
+        } else {
+          if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+            return false;
+          }
 
-        // get the previous layoutSection node
-        const index = $pos.index($pos.depth - 1);
-        const grandParent = $pos.node($pos.depth - 1);
-        const previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
-        moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
+          // get the previous layoutSection node
+          const index = $pos.index($pos.depth - 1);
+          const grandParent = $pos.node($pos.depth - 1);
+          const previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
+          moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
+        }
       } else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
-        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
-          return false;
+        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core2;
+          const index = $pos.index($pos.depth);
+          const parent = $pos.node($pos.depth);
+          // get the next layoutColumn node
+          const nextNode = parent ? parent.maybeChild(index + 1) : null;
+
+          // if the current node is the last node, don't do anything
+          if (index >= parent.childCount - 1) {
+            return false;
+          }
+          const moveToEnd = index === parent.childCount - 2;
+          moveToPos = moveToEnd ? $pos.before() : selection.to + ((nextNode === null || nextNode === void 0 ? void 0 : nextNode.nodeSize) || 1);
+          api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+            tr
+          }) => {
+            var _api$blockControls2, _api$blockControls2$c;
+            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, {
+              moveToEnd,
+              selectMovedNode: true
+            })({
+              tr
+            });
+            return tr;
+          });
+          return true;
+        } else {
+          if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+            return false;
+          }
+          moveToPos = $pos.after($pos.depth) + 1;
         }
-        moveToPos = $pos.after($pos.depth) + 1;
       } else if (direction === DIRECTION.UP) {
-        const nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
-        if (nodeBefore) {
-          moveToPos = currentNodePos - nodeBefore.nodeSize;
+        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          moveToPos = $pos.start() - 1;
+        } else {
+          const nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
+          if (nodeBefore) {
+            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          }
         }
       } else {
         const endOfDoc = $pos.end();
         const nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
-        const nodeAfter = state.doc.nodeAt(nodeAfterPos);
-        if (nodeAfterPos < endOfDoc && nodeAfter) {
-          // if not the last node, move to the end of the next node
-          moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+        if (nodeAfterPos > endOfDoc) {
+          return false;
+        }
+        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          moveToPos = state.selection.$from.end() + 1;
+        } else {
+          const nodeAfter = state.doc.nodeAt(nodeAfterPos);
+          if (nodeAfter) {
+            // if not the last node, move to the end of the next node
+            moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+          }
         }
       }
       const nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
 
       // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
-      const shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      const shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && fg('platform_editor_advanced_layouts_accessibility');
       if (shouldMoveNode) {
-        var _api$core;
-        api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+        var _api$core3;
+        api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(({
           tr
         }) => {
           moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
@@ -139,9 +199,9 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         });
         return true;
       } else if (nodeType) {
-        var _api$core2;
+        var _api$core4;
         // If the node is first/last one, only select the node
-        api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
           tr
         }) => {
           selectNode(tr, currentNodePos, nodeType);

package/dist/es2019/editor-commands/move-to-layout.js

@@ -38,7 +38,7 @@ const createNewLayout = (schema, layoutContents) => {
   }
   return null;
 };
-const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api) => {
+const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) => {
   const isSameLayout = isInSameLayout($originalFrom, $originalTo);
   let sourceContentEndPos = -1;
   if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
@@ -59,7 +59,7 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr
     tr.delete(from, sourceContentEndPos);
     const mappedTo = tr.mapping.map(to);
     tr.insert(mappedTo, sourceContent);
-    if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+    if (!fg('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
       tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
     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);
@@ -310,12 +310,12 @@ export const moveToLayout = api => (from, to, options) => ({
   }
   if (toNode.type === layoutSection) {
     const toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
-    return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
+    return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
   } else if (toNode.type === layoutColumn) {
     const toLayout = $to.parent;
     const toLayoutPos = to - $to.parentOffset - 1;
     const toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize : to;
-    return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
+    return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
   } else {
     let toNodeWithoutBreakout = toNode;
 

package/dist/es2019/ui/drag-handle.js

@@ -397,6 +397,12 @@ export const DragHandle = ({
   if (editorExperiment('advanced_layouts', true) && nodeType === 'layoutColumn') {
     helpDescriptors = fg('platform_editor_advanced_layouts_accessibility') ? [{
       description: formatMessage(blockControlsMessages.dragToRearrange)
+    }, {
+      description: formatMessage(blockControlsMessages.moveUp),
+      keymap: dragToMoveUp
+    }, {
+      description: formatMessage(blockControlsMessages.moveDown),
+      keymap: dragToMoveDown
     }, {
       description: formatMessage(blockControlsMessages.moveLeft),
       keymap: dragToMoveLeft

package/dist/esm/editor-commands/move-node.js

@@ -8,7 +8,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -83,6 +83,7 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
   return function (state) {
     var isParentNodeOfTypeLayout;
     var shouldEnableNestedDndA11y = editorExperiment('nested-dnd', true);
+    var selection = state.selection;
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
@@ -92,43 +93,98 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
       var $pos = state.doc.resolve(currentNodePos);
       var moveToPos = -1;
       var nodeIndex = $pos.index();
+      var isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
       if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
-        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
-          return false;
-        }
+        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _$pos$nodeBefore, _api$core;
+          moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
+          api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+            var _api$blockControls;
+            var tr = _ref2.tr;
+            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, {
+              selectMovedNode: true
+            })({
+              tr: tr
+            });
+            return tr;
+          });
+          return true;
+        } else {
+          if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+            return false;
+          }
 
-        // get the previous layoutSection node
-        var index = $pos.index($pos.depth - 1);
-        var grandParent = $pos.node($pos.depth - 1);
-        var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
-        moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
+          // get the previous layoutSection node
+          var index = $pos.index($pos.depth - 1);
+          var grandParent = $pos.node($pos.depth - 1);
+          var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
+          moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
+        }
       } else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
-        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
-          return false;
+        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core2;
+          var _index = $pos.index($pos.depth);
+          var parent = $pos.node($pos.depth);
+          // get the next layoutColumn node
+          var nextNode = parent ? parent.maybeChild(_index + 1) : null;
+
+          // if the current node is the last node, don't do anything
+          if (_index >= parent.childCount - 1) {
+            return false;
+          }
+          var moveToEnd = _index === parent.childCount - 2;
+          moveToPos = moveToEnd ? $pos.before() : selection.to + ((nextNode === null || nextNode === void 0 ? void 0 : nextNode.nodeSize) || 1);
+          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
+            var _api$blockControls2;
+            var tr = _ref3.tr;
+            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, {
+              moveToEnd: moveToEnd,
+              selectMovedNode: true
+            })({
+              tr: tr
+            });
+            return tr;
+          });
+          return true;
+        } else {
+          if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+            return false;
+          }
+          moveToPos = $pos.after($pos.depth) + 1;
         }
-        moveToPos = $pos.after($pos.depth) + 1;
       } else if (direction === DIRECTION.UP) {
-        var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
-        if (nodeBefore) {
-          moveToPos = currentNodePos - nodeBefore.nodeSize;
+        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          moveToPos = $pos.start() - 1;
+        } else {
+          var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && shouldEnableNestedDndA11y ? $pos.node($pos.depth) : $pos.nodeBefore;
+          if (nodeBefore) {
+            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          }
         }
       } else {
         var endOfDoc = $pos.end();
         var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
-        var nodeAfter = state.doc.nodeAt(nodeAfterPos);
-        if (nodeAfterPos < endOfDoc && nodeAfter) {
-          // if not the last node, move to the end of the next node
-          moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+        if (nodeAfterPos > endOfDoc) {
+          return false;
+        }
+        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          moveToPos = state.selection.$from.end() + 1;
+        } else {
+          var nodeAfter = state.doc.nodeAt(nodeAfterPos);
+          if (nodeAfter) {
+            // if not the last node, move to the end of the next node
+            moveToPos = nodeAfterPos + nodeAfter.nodeSize;
+          }
         }
       }
       var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
 
       // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
-      var shouldMoveNode = shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      var shouldMoveNode = (shouldEnableNestedDndA11y ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && fg('platform_editor_advanced_layouts_accessibility');
       if (shouldMoveNode) {
-        var _api$core;
-        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
-          var tr = _ref2.tr;
+        var _api$core3;
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
           moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
           });
@@ -137,10 +193,10 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
         });
         return true;
       } else if (nodeType) {
-        var _api$core2;
+        var _api$core4;
         // If the node is first/last one, only select the node
-        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref3) {
-          var tr = _ref3.tr;
+        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
+          var tr = _ref5.tr;
           selectNode(tr, currentNodePos, nodeType);
           tr.scrollIntoView();
           return tr;
@@ -155,8 +211,8 @@ export var moveNode = function moveNode(api) {
   return function (start, to) {
     var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.DRAG_AND_DROP;
     var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
-    return function (_ref4) {
-      var tr = _ref4.tr;
+    return function (_ref6) {
+      var tr = _ref6.tr;
       var isMultiSelect = editorExperiment('platform_editor_element_drag_and_drop_multiselect', true, {
         exposure: true
       });

package/dist/esm/editor-commands/move-to-layout.js

@@ -37,7 +37,7 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
   }
   return null;
 };
-var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api) {
+var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceContent, from, to, tr, $originalFrom, $originalTo, api, selectMovedNode) {
   var isSameLayout = isInSameLayout($originalFrom, $originalTo);
   var sourceContentEndPos = -1;
   if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
@@ -58,7 +58,7 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
     tr.delete(from, sourceContentEndPos);
     var mappedTo = tr.mapping.map(to);
     tr.insert(mappedTo, sourceContent);
-    if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+    if (!fg('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
       tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
     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);
@@ -311,12 +311,12 @@ export var moveToLayout = function moveToLayout(api) {
       }
       if (toNode.type === layoutSection) {
         var toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize - 1 : to + 1;
-        return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api);
+        return moveToExistingLayout(toNode, to, fromContentWithoutBreakout, $sourceFrom.pos, toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
       } else if (toNode.type === layoutColumn) {
         var toLayout = $to.parent;
         var toLayoutPos = to - $to.parentOffset - 1;
         var _toPos = options !== null && options !== void 0 && options.moveToEnd ? to + toNode.nodeSize : to;
-        return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api);
+        return moveToExistingLayout(toLayout, toLayoutPos, fromContentWithoutBreakout, $sourceFrom.pos, _toPos, tr, $sourceFrom, $to, api, options === null || options === void 0 ? void 0 : options.selectMovedNode);
       } else {
         var toNodeWithoutBreakout = toNode;
 

package/dist/esm/ui/drag-handle.js

@@ -408,6 +408,12 @@ export var DragHandle = function DragHandle(_ref) {
   if (editorExperiment('advanced_layouts', true) && nodeType === 'layoutColumn') {
     helpDescriptors = fg('platform_editor_advanced_layouts_accessibility') ? [{
       description: formatMessage(blockControlsMessages.dragToRearrange)
+    }, {
+      description: formatMessage(blockControlsMessages.moveUp),
+      keymap: dragToMoveUp
+    }, {
+      description: formatMessage(blockControlsMessages.moveDown),
+      keymap: dragToMoveDown
     }, {
       description: formatMessage(blockControlsMessages.moveLeft),
       keymap: dragToMoveLeft

package/dist/types/blockControlsPluginType.d.ts

@@ -65,9 +65,11 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
          * @param from position of the node to be moved
          * @param to position of the layout/layout column/node to move the node to
          * @param options moveToEnd: move the node to after the layout/layout column/another node
+         * @param options selectMovedNode: select the moved node after moving it
          */
         moveToLayout: (start: number, to: number, options?: {
             moveToEnd?: boolean;
+            selectMovedNode?: boolean;
         }) => EditorCommand;
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;

package/dist/types/editor-commands/move-to-layout.d.ts

@@ -2,4 +2,5 @@ import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, options?: {
     moveToEnd?: boolean;
+    selectMovedNode?: boolean;
 }) => EditorCommand;

package/dist/types-ts4.5/blockControlsPluginType.d.ts

@@ -65,9 +65,11 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
          * @param from position of the node to be moved
          * @param to position of the layout/layout column/node to move the node to
          * @param options moveToEnd: move the node to after the layout/layout column/another node
+         * @param options selectMovedNode: select the moved node after moving it
          */
         moveToLayout: (start: number, to: number, options?: {
             moveToEnd?: boolean;
+            selectMovedNode?: boolean;
         }) => EditorCommand;
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;

package/dist/types-ts4.5/editor-commands/move-to-layout.d.ts

@@ -2,4 +2,5 @@ import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 export declare const moveToLayout: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => (from: number, to: number, options?: {
     moveToEnd?: boolean;
+    selectMovedNode?: boolean;
 }) => EditorCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.22.0",
+	"version": "2.22.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.2.0",
 		"@atlaskit/primitives": "^13.4.0",
-		"@atlaskit/theme": "^14.1.0",
+		"@atlaskit/theme": "^15.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.43.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@atlaskit/tooltip": "^19.1.0",