@atlaskit/editor-plugin-block-controls 2.1.11 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.2.1
+
+### Patch Changes
+
+- [#150591](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150591)
+  [`13337452246bc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/13337452246bc) -
+  support a11y to move various node types with shortcut
+
+## 2.2.0
+
+### Minor Changes
+
+- [#148229](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148229)
+  [`657f160f0cfc0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/657f160f0cfc0) -
+  Add a11y support on moving nested elements
+
+### Patch Changes
+
+- [#137506](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137506)
+  [`bc1742c9fd32e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc1742c9fd32e) -
+  ED-24902: Fix to only check when to hide drag handle on doc level (behind
+  confluence_frontend_page_title_enter_improvements)
+- Updated dependencies
+
 ## 2.1.11
 
 ### Patch Changes

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

@@ -11,12 +11,13 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
 var _utils = require("@atlaskit/editor-common/utils");
-var _utils2 = require("@atlaskit/editor-tables/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _utils3 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../consts");
 var _main = require("../pm-plugins/main");
-var _utils3 = require("../utils");
+var _utils4 = require("../utils");
 var _validation = require("../utils/validation");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -46,7 +47,7 @@ function transformSourceSlice(nodeCopy, destType) {
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
-var getCurrentNodePos = function getCurrentNodePos(state) {
+var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayout) {
   var _activeNode$handleOpt;
   var selection = state.selection;
   var _ref = _main.key.getState(state) || {},
@@ -57,32 +58,53 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
   if (activeNode && (_activeNode$handleOpt = activeNode.handleOptions) !== null && _activeNode$handleOpt !== void 0 && _activeNode$handleOpt.isFocused) {
     // 1. drag handle of the node is focused
     currentNodePos = activeNode.pos;
-  } else if ((0, _utils2.isInTable)(state)) {
-    if ((0, _utils2.isTableSelected)(selection)) {
+  } else if ((0, _utils3.isInTable)(state)) {
+    if ((0, _utils3.isTableSelected)(selection)) {
       var _findTable$pos, _findTable;
       // We only move table node if it's fully selected
       // to avoid shortcut collision with table drag and drop
-      currentNodePos = (_findTable$pos = (_findTable = (0, _utils2.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+      currentNodePos = (_findTable$pos = (_findTable = (0, _utils3.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
     }
   } else if (!(state.selection instanceof _selection.GapCursorSelection)) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node
     currentNodePos = selection.$from.before(1);
+    if (selection.$from.depth > 0 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+      currentNodePos = (0, _utils4.getNestedNodePosition)(state);
+    }
   }
   return currentNodePos;
 };
 var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
-    var currentNodePos = getCurrentNodePos(state);
+    var isParentNodeOfTypeLayout;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+      isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
+    }
+    var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       var $pos = state.doc.resolve(currentNodePos);
       var moveToPos = -1;
-      if (direction === _consts.DIRECTION.UP) {
-        var nodeBefore = $pos.nodeBefore;
-        if (nodeBefore) {
-          moveToPos = currentNodePos - nodeBefore.nodeSize;
+      var nodeIndex = $pos.index();
+      if (direction === _consts.DIRECTION.LEFT && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+        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);
+      } else if (direction === _consts.DIRECTION.RIGHT && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+          return false;
+        }
+        moveToPos = $pos.after($pos.depth) + 1;
+      } else if (direction === _consts.DIRECTION.UP) {
+        var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
+        moveToPos = $pos.depth > 1 && nodeIndex === 0 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') ? $pos.before($pos.depth) - 1 : nodeBefore ? currentNodePos - nodeBefore.nodeSize : moveToPos;
       } else {
         var endOfDoc = $pos.end();
         var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
@@ -93,7 +115,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         }
       }
       var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
-      if (moveToPos > -1) {
+
+      // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
+      var shouldMoveNode = (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      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;
@@ -109,7 +134,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         // 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;
-          (0, _utils3.selectNode)(tr, currentNodePos, nodeType);
+          (0, _utils4.selectNode)(tr, currentNodePos, nodeType);
           tr.scrollIntoView();
           return tr;
         });
@@ -164,7 +189,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
         mappedTo = tr.mapping.map(to);
         tr.insert(mappedTo, _nodeCopy); // insert the content at the new position
       }
-      tr = (0, _utils3.selectNode)(tr, mappedTo, node.type.name);
+      tr = (0, _utils4.selectNode)(tr, mappedTo, node.type.name);
       tr.setMeta(_main.key, {
         nodeMoved: true
       });

package/dist/cjs/commands/show-drag-handle.js

@@ -4,18 +4,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.showDragHandleAtSelection = void 0;
+var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api) {
+var _main = require("../pm-plugins/main");
+var _utils2 = require("../utils");
+var showDragHandleAtSelection = exports.showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
   return function (state, _, view) {
-    var rootPos = state.selection.$from.before(1);
+    var $from = state.selection.$from;
+    var shouldFocusParentNode;
+    if ($from.depth > 1 && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+      var _activeNode$handleOpt, _view$domAtPos;
+      var _ref = _main.key.getState(state) || {},
+        activeNode = _ref.activeNode;
+
+      // if the node is already focused, pressing the keymap second times should focus the parent node
+      shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
+      var parentPos = (0, _utils.isInTable)(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : (0, _utils2.getNestedNodePosition)(state) + 1;
+      var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      if (parentElement) {
+        var anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
+        var nodeType = parentElement.getAttribute('data-drag-handler-node-type');
+        if (!anchorName || !nodeType) {
+          // for nodes like panel and mediaSingle, the drag handle decoration is not applied to the dom node at the node position but to the parent node
+          var closestParentElement = parentElement.closest('[data-drag-handler-anchor-name]');
+          if (closestParentElement) {
+            anchorName = closestParentElement.getAttribute('data-drag-handler-anchor-name');
+            nodeType = closestParentElement.getAttribute('data-drag-handler-node-type');
+          }
+        }
+        if (api && anchorName && nodeType) {
+          api.core.actions.execute(api.blockControls.commands.showDragHandleAt(parentPos - 1, anchorName, nodeType, {
+            isFocused: true
+          }));
+          return true;
+        }
+      }
+    }
+    var rootPos = $from.before(1);
     var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
     var nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
     var rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
     if (rootNode) {
-      var anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
-      var nodeType = rootNode.getAttribute('data-drag-handler-node-type');
-      if (api && anchorName && nodeType) {
-        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, anchorName, nodeType, {
+      var _anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
+      var _nodeType = rootNode.getAttribute('data-drag-handler-node-type');
+      if (api && _anchorName && _nodeType) {
+        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, _anchorName, _nodeType, {
           isFocused: true
         }));
         return true;

package/dist/cjs/consts.js

@@ -7,5 +7,7 @@ exports.DIRECTION = void 0;
 var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
+  DIRECTION["LEFT"] = "left";
+  DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -16,7 +16,7 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
 var isDocFirstChildEmptyLine = function isDocFirstChildEmptyLine(elem) {
   var _elem$firstElementChi;
   var parentElement = elem.parentElement;
-  return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
+  return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.classList.contains('ProseMirror')) && (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
 };
 var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls;

package/dist/cjs/pm-plugins/keymap.js

@@ -20,6 +20,8 @@ function keymapList(api, formatMessage) {
     }, keymapList);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage), keymapList);
     (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage), keymapList);
+    (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') && (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.LEFT, formatMessage), keymapList);
+    (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y') && (0, _keymaps.bindKeymapWithCommand)(_keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.RIGHT, formatMessage), keymapList);
   }
   return keymapList;
 }

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragHandle = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -368,7 +369,26 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     keymap: _keymaps.dragToMoveDown
   }] : [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveUp),
+    keymap: _keymaps.dragToMoveUp
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveDown),
+    keymap: _keymaps.dragToMoveDown
   }];
+  var isParentNodeOfTypeLayout;
+  if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_a11y')) {
+    isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve((0, _utils.getNestedNodePosition)(view.state)).node().type.name === 'layoutColumn';
+    if (isParentNodeOfTypeLayout) {
+      helpDescriptors = [].concat((0, _toConsumableArray2.default)(helpDescriptors), [{
+        description: formatMessage(_messages.blockControlsMessages.moveLeft),
+        keymap: _keymaps.dragToMoveLeft
+      }, {
+        description: formatMessage(_messages.blockControlsMessages.moveRight),
+        keymap: _keymaps.dragToMoveRight
+      }]);
+    }
+  }
   var message = helpDescriptors.map(function (descriptor) {
     return descriptor.keymap ? [descriptor.description, (0, _keymaps.getAriaKeyshortcuts)(descriptor.keymap)] : [descriptor.description];
   }).join('. ');

package/dist/cjs/utils/getNestedNodePosition.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNestedNodePosition = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var getNestedNodePosition = exports.getNestedNodePosition = function getNestedNodePosition(state) {
+  var selection = state.selection;
+  var nestedNodePos = selection.$from.before(1);
+  if (selection instanceof _state.TextSelection) {
+    nestedNodePos = selection.$from.before();
+    var $pos = state.doc.resolve(nestedNodePos);
+    if ($pos.depth < 1) {
+      return nestedNodePos;
+    }
+    var parentNodeOfSpecificTypes = (0, _utils.findParentNodeOfType)([state.schema.nodes.bulletList, state.schema.nodes.orderedList, state.schema.nodes.blockquote, state.schema.nodes.taskList])(state.selection);
+    if (parentNodeOfSpecificTypes) {
+      var parentNodeType = parentNodeOfSpecificTypes.node.type.name;
+      nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;
+    }
+  } else {
+    nestedNodePos = selection.$from.pos;
+  }
+  return nestedNodePos;
+};

package/dist/cjs/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "getNestedNodePosition", {
+  enumerable: true,
+  get: function get() {
+    return _getNestedNodePosition.getNestedNodePosition;
+  }
+});
 Object.defineProperty(exports, "getSelection", {
   enumerable: true,
   get: function get() {
@@ -15,4 +21,5 @@ Object.defineProperty(exports, "selectNode", {
     return _getSelection.selectNode;
   }
 });
-var _getSelection = require("./getSelection");
+var _getSelection = require("./getSelection");
+var _getNestedNodePosition = require("./getNestedNodePosition");

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

@@ -3,12 +3,13 @@ import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
-import { selectNode } from '../utils';
+import { getNestedNodePosition, selectNode } from '../utils';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../utils/validation';
 
 /**
@@ -38,7 +39,7 @@ function transformSourceSlice(nodeCopy, destType) {
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
-const getCurrentNodePos = state => {
+const getCurrentNodePos = (state, isParentNodeOfTypeLayout) => {
   var _activeNode$handleOpt;
   const {
     selection
@@ -63,21 +64,42 @@ const getCurrentNodePos = state => {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node
     currentNodePos = selection.$from.before(1);
+    if (selection.$from.depth > 0 && fg('platform_editor_element_dnd_nested_a11y')) {
+      currentNodePos = getNestedNodePosition(state);
+    }
   }
   return currentNodePos;
 };
 export const moveNodeViaShortcut = (api, direction, formatMessage) => {
   return state => {
-    const currentNodePos = getCurrentNodePos(state);
+    let isParentNodeOfTypeLayout;
+    if (fg('platform_editor_element_dnd_nested_a11y')) {
+      isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
+    }
+    const currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       const $pos = state.doc.resolve(currentNodePos);
       let moveToPos = -1;
-      if (direction === DIRECTION.UP) {
-        const nodeBefore = $pos.nodeBefore;
-        if (nodeBefore) {
-          moveToPos = currentNodePos - nodeBefore.nodeSize;
+      const nodeIndex = $pos.index();
+      if (direction === DIRECTION.LEFT && fg('platform_editor_element_dnd_nested_a11y')) {
+        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);
+      } else if (direction === DIRECTION.RIGHT && fg('platform_editor_element_dnd_nested_a11y')) {
+        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+          return false;
+        }
+        moveToPos = $pos.after($pos.depth) + 1;
+      } else if (direction === DIRECTION.UP) {
+        const nodeBefore = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
+        moveToPos = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.before($pos.depth) - 1 : nodeBefore ? currentNodePos - nodeBefore.nodeSize : moveToPos;
       } else {
         const endOfDoc = $pos.end();
         const nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
@@ -88,7 +110,10 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         }
       }
       const nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
-      if (moveToPos > -1) {
+
+      // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
+      const shouldMoveNode = fg('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      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(({
           tr

package/dist/es2019/commands/show-drag-handle.js

@@ -1,6 +1,42 @@
+import { isInTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-export const showDragHandleAtSelection = api => (state, _, view) => {
-  const rootPos = state.selection.$from.before(1);
+import { key } from '../pm-plugins/main';
+import { getNestedNodePosition } from '../utils';
+export const showDragHandleAtSelection = (api, shouldFocusParentNode) => (state, _, view) => {
+  const {
+    $from
+  } = state.selection;
+  let shouldFocusParentNode;
+  if ($from.depth > 1 && fg('platform_editor_element_dnd_nested_a11y')) {
+    var _activeNode$handleOpt, _view$domAtPos;
+    const {
+      activeNode
+    } = key.getState(state) || {};
+
+    // if the node is already focused, pressing the keymap second times should focus the parent node
+    shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
+    const parentPos = isInTable(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : getNestedNodePosition(state) + 1;
+    const parentElement = view === null || view === void 0 ? void 0 : (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+    if (parentElement) {
+      let anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
+      let nodeType = parentElement.getAttribute('data-drag-handler-node-type');
+      if (!anchorName || !nodeType) {
+        // for nodes like panel and mediaSingle, the drag handle decoration is not applied to the dom node at the node position but to the parent node
+        const closestParentElement = parentElement.closest('[data-drag-handler-anchor-name]');
+        if (closestParentElement) {
+          anchorName = closestParentElement.getAttribute('data-drag-handler-anchor-name');
+          nodeType = closestParentElement.getAttribute('data-drag-handler-node-type');
+        }
+      }
+      if (api && anchorName && nodeType) {
+        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(parentPos - 1, anchorName, nodeType, {
+          isFocused: true
+        }));
+        return true;
+      }
+    }
+  }
+  const rootPos = $from.before(1);
   const dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
   const nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
   const rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && fg('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;

package/dist/es2019/consts.js

@@ -1,5 +1,7 @@
 export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
+  DIRECTION["LEFT"] = "left";
+  DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -10,7 +10,7 @@ const isEmptyNestedParagraphOrHeading = target => {
 const isDocFirstChildEmptyLine = elem => {
   var _elem$firstElementChi;
   const parentElement = elem.parentElement;
-  return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
+  return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.classList.contains('ProseMirror')) && (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
 };
 export const handleMouseOver = (view, event, api) => {
   var _api$blockControls;

package/dist/es2019/pm-plugins/keymap.js

@@ -1,4 +1,4 @@
-import { bindKeymapWithCommand, dragToMoveDown, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { moveNodeViaShortcut } from '../commands/move-node';
@@ -14,6 +14,8 @@ function keymapList(api, formatMessage) {
     }, keymapList);
     bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP, formatMessage), keymapList);
     bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
+    fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveLeft.common, moveNodeViaShortcut(api, DIRECTION.LEFT, formatMessage), keymapList);
+    fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveRight.common, moveNodeViaShortcut(api, DIRECTION.RIGHT, formatMessage), keymapList);
   }
   return keymapList;
 }

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

@@ -9,7 +9,7 @@ import { bind } from 'bind-event-listener';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { dragToMoveDown, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
+import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
@@ -19,7 +19,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
-import { selectNode } from '../utils';
+import { getNestedNodePosition, selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
@@ -342,7 +342,7 @@ const DragHandleInternal = ({
       };
     }
   }, [buttonRef, handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused, view]);
-  const helpDescriptors = isTopLevelNode ? [{
+  let helpDescriptors = isTopLevelNode ? [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
     description: formatMessage(blockControlsMessages.moveUp),
@@ -352,7 +352,26 @@ const DragHandleInternal = ({
     keymap: dragToMoveDown
   }] : [{
     description: formatMessage(blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(blockControlsMessages.moveUp),
+    keymap: dragToMoveUp
+  }, {
+    description: formatMessage(blockControlsMessages.moveDown),
+    keymap: dragToMoveDown
   }];
+  let isParentNodeOfTypeLayout;
+  if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && fg('platform_editor_element_dnd_nested_a11y')) {
+    isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve(getNestedNodePosition(view.state)).node().type.name === 'layoutColumn';
+    if (isParentNodeOfTypeLayout) {
+      helpDescriptors = [...helpDescriptors, {
+        description: formatMessage(blockControlsMessages.moveLeft),
+        keymap: dragToMoveLeft
+      }, {
+        description: formatMessage(blockControlsMessages.moveRight),
+        keymap: dragToMoveRight
+      }];
+    }
+  }
   const message = helpDescriptors.map(descriptor => {
     return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
   }).join('. ');

package/dist/es2019/utils/getNestedNodePosition.js

@@ -0,0 +1,23 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export const getNestedNodePosition = state => {
+  const {
+    selection
+  } = state;
+  let nestedNodePos = selection.$from.before(1);
+  if (selection instanceof TextSelection) {
+    nestedNodePos = selection.$from.before();
+    const $pos = state.doc.resolve(nestedNodePos);
+    if ($pos.depth < 1) {
+      return nestedNodePos;
+    }
+    const parentNodeOfSpecificTypes = findParentNodeOfType([state.schema.nodes.bulletList, state.schema.nodes.orderedList, state.schema.nodes.blockquote, state.schema.nodes.taskList])(state.selection);
+    if (parentNodeOfSpecificTypes) {
+      const parentNodeType = parentNodeOfSpecificTypes.node.type.name;
+      nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;
+    }
+  } else {
+    nestedNodePos = selection.$from.pos;
+  }
+  return nestedNodePos;
+};

package/dist/es2019/utils/index.js

@@ -1 +1,2 @@
-export { getSelection, selectNode } from './getSelection';
+export { getSelection, selectNode } from './getSelection';
+export { getNestedNodePosition } from './getNestedNodePosition';

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

@@ -6,12 +6,13 @@ import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DIRECTION } from '../consts';
 import { key } from '../pm-plugins/main';
-import { selectNode } from '../utils';
+import { getNestedNodePosition, selectNode } from '../utils';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../utils/validation';
 
 /**
@@ -40,7 +41,7 @@ function transformSourceSlice(nodeCopy, destType) {
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
-var getCurrentNodePos = function getCurrentNodePos(state) {
+var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayout) {
   var _activeNode$handleOpt;
   var selection = state.selection;
   var _ref = key.getState(state) || {},
@@ -62,21 +63,42 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
     // 2. caret cursor is inside the node
     // 3. the start of the selection is inside the node
     currentNodePos = selection.$from.before(1);
+    if (selection.$from.depth > 0 && fg('platform_editor_element_dnd_nested_a11y')) {
+      currentNodePos = getNestedNodePosition(state);
+    }
   }
   return currentNodePos;
 };
 export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, formatMessage) {
   return function (state) {
-    var currentNodePos = getCurrentNodePos(state);
+    var isParentNodeOfTypeLayout;
+    if (fg('platform_editor_element_dnd_nested_a11y')) {
+      isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
+    }
+    var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       var $pos = state.doc.resolve(currentNodePos);
       var moveToPos = -1;
-      if (direction === DIRECTION.UP) {
-        var nodeBefore = $pos.nodeBefore;
-        if (nodeBefore) {
-          moveToPos = currentNodePos - nodeBefore.nodeSize;
+      var nodeIndex = $pos.index();
+      if (direction === DIRECTION.LEFT && fg('platform_editor_element_dnd_nested_a11y')) {
+        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);
+      } else if (direction === DIRECTION.RIGHT && fg('platform_editor_element_dnd_nested_a11y')) {
+        if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
+          return false;
+        }
+        moveToPos = $pos.after($pos.depth) + 1;
+      } else if (direction === DIRECTION.UP) {
+        var nodeBefore = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.node($pos.depth) : $pos.nodeBefore;
+        moveToPos = $pos.depth > 1 && nodeIndex === 0 && fg('platform_editor_element_dnd_nested_a11y') ? $pos.before($pos.depth) - 1 : nodeBefore ? currentNodePos - nodeBefore.nodeSize : moveToPos;
       } else {
         var endOfDoc = $pos.end();
         var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
@@ -87,7 +109,10 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
         }
       }
       var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;
-      if (moveToPos > -1) {
+
+      // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
+      var shouldMoveNode = fg('platform_editor_element_dnd_nested_a11y') ? moveToPos > -1 && $pos.depth === state.doc.resolve(moveToPos).depth : moveToPos > -1;
+      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;

package/dist/esm/commands/show-drag-handle.js

@@ -1,15 +1,48 @@
+import { isInTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-export var showDragHandleAtSelection = function showDragHandleAtSelection(api) {
+import { key } from '../pm-plugins/main';
+import { getNestedNodePosition } from '../utils';
+export var showDragHandleAtSelection = function showDragHandleAtSelection(api, shouldFocusParentNode) {
   return function (state, _, view) {
-    var rootPos = state.selection.$from.before(1);
+    var $from = state.selection.$from;
+    var shouldFocusParentNode;
+    if ($from.depth > 1 && fg('platform_editor_element_dnd_nested_a11y')) {
+      var _activeNode$handleOpt, _view$domAtPos;
+      var _ref = key.getState(state) || {},
+        activeNode = _ref.activeNode;
+
+      // if the node is already focused, pressing the keymap second times should focus the parent node
+      shouldFocusParentNode = activeNode && ((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused);
+      var parentPos = isInTable(state) ? $from.before(1) : shouldFocusParentNode ? $from.before(1) : getNestedNodePosition(state) + 1;
+      var parentElement = view === null || view === void 0 || (_view$domAtPos = view.domAtPos(parentPos, 0)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      if (parentElement) {
+        var anchorName = parentElement.getAttribute('data-drag-handler-anchor-name');
+        var nodeType = parentElement.getAttribute('data-drag-handler-node-type');
+        if (!anchorName || !nodeType) {
+          // for nodes like panel and mediaSingle, the drag handle decoration is not applied to the dom node at the node position but to the parent node
+          var closestParentElement = parentElement.closest('[data-drag-handler-anchor-name]');
+          if (closestParentElement) {
+            anchorName = closestParentElement.getAttribute('data-drag-handler-anchor-name');
+            nodeType = closestParentElement.getAttribute('data-drag-handler-node-type');
+          }
+        }
+        if (api && anchorName && nodeType) {
+          api.core.actions.execute(api.blockControls.commands.showDragHandleAt(parentPos - 1, anchorName, nodeType, {
+            isFocused: true
+          }));
+          return true;
+        }
+      }
+    }
+    var rootPos = $from.before(1);
     var dom = view === null || view === void 0 ? void 0 : view.domAtPos(rootPos, 0);
     var nodeElement = dom === null || dom === void 0 ? void 0 : dom.node.childNodes[dom === null || dom === void 0 ? void 0 : dom.offset];
     var rootNode = nodeElement && !nodeElement.hasAttribute('data-drag-handler-anchor-name') && fg('platform_editor_element_drag_and_drop_ed_24321') ? nodeElement.querySelector('[data-drag-handler-anchor-name]') : nodeElement;
     if (rootNode) {
-      var anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
-      var nodeType = rootNode.getAttribute('data-drag-handler-node-type');
-      if (api && anchorName && nodeType) {
-        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, anchorName, nodeType, {
+      var _anchorName = rootNode.getAttribute('data-drag-handler-anchor-name');
+      var _nodeType = rootNode.getAttribute('data-drag-handler-node-type');
+      if (api && _anchorName && _nodeType) {
+        api.core.actions.execute(api.blockControls.commands.showDragHandleAt(rootPos, _anchorName, _nodeType, {
           isFocused: true
         }));
         return true;

package/dist/esm/consts.js

@@ -1,5 +1,7 @@
 export var DIRECTION = /*#__PURE__*/function (DIRECTION) {
   DIRECTION["UP"] = "up";
   DIRECTION["DOWN"] = "down";
+  DIRECTION["LEFT"] = "left";
+  DIRECTION["RIGHT"] = "right";
   return DIRECTION;
 }({});

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -10,7 +10,7 @@ var isEmptyNestedParagraphOrHeading = function isEmptyNestedParagraphOrHeading(t
 var isDocFirstChildEmptyLine = function isDocFirstChildEmptyLine(elem) {
   var _elem$firstElementChi;
   var parentElement = elem.parentElement;
-  return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
+  return (parentElement === null || parentElement === void 0 ? void 0 : parentElement.classList.contains('ProseMirror')) && (parentElement === null || parentElement === void 0 ? void 0 : parentElement.firstElementChild) === elem && ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'].includes(elem.nodeName) && elem.childNodes.length === 1 && ((_elem$firstElementChi = elem.firstElementChild) === null || _elem$firstElementChi === void 0 ? void 0 : _elem$firstElementChi.classList.contains('ProseMirror-trailingBreak'));
 };
 export var handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls;

package/dist/esm/pm-plugins/keymap.js

@@ -1,4 +1,4 @@
-import { bindKeymapWithCommand, dragToMoveDown, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithCommand, dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, showElementDragHandle } from '@atlaskit/editor-common/keymaps';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { moveNodeViaShortcut } from '../commands/move-node';
@@ -14,6 +14,8 @@ function keymapList(api, formatMessage) {
     }, keymapList);
     bindKeymapWithCommand(dragToMoveUp.common, moveNodeViaShortcut(api, DIRECTION.UP, formatMessage), keymapList);
     bindKeymapWithCommand(dragToMoveDown.common, moveNodeViaShortcut(api, DIRECTION.DOWN, formatMessage), keymapList);
+    fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveLeft.common, moveNodeViaShortcut(api, DIRECTION.LEFT, formatMessage), keymapList);
+    fg('platform_editor_element_dnd_nested_a11y') && bindKeymapWithCommand(dragToMoveRight.common, moveNodeViaShortcut(api, DIRECTION.RIGHT, formatMessage), keymapList);
   }
   return keymapList;
 }

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
@@ -10,7 +11,7 @@ import { bind } from 'bind-event-listener';
 import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { dragToMoveDown, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
+import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
@@ -20,7 +21,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
-import { selectNode } from '../utils';
+import { getNestedNodePosition, selectNode } from '../utils';
 import { getLeftPosition, getTopPosition } from '../utils/drag-handle-positions';
 import { DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
@@ -359,7 +360,26 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
     keymap: dragToMoveDown
   }] : [{
     description: formatMessage(blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(blockControlsMessages.moveUp),
+    keymap: dragToMoveUp
+  }, {
+    description: formatMessage(blockControlsMessages.moveDown),
+    keymap: dragToMoveDown
   }];
+  var isParentNodeOfTypeLayout;
+  if (!isTopLevelNode && handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused && fg('platform_editor_element_dnd_nested_a11y')) {
+    isParentNodeOfTypeLayout = nodeType === 'layoutSection' || view.state.doc.resolve(getNestedNodePosition(view.state)).node().type.name === 'layoutColumn';
+    if (isParentNodeOfTypeLayout) {
+      helpDescriptors = [].concat(_toConsumableArray(helpDescriptors), [{
+        description: formatMessage(blockControlsMessages.moveLeft),
+        keymap: dragToMoveLeft
+      }, {
+        description: formatMessage(blockControlsMessages.moveRight),
+        keymap: dragToMoveRight
+      }]);
+    }
+  }
   var message = helpDescriptors.map(function (descriptor) {
     return descriptor.keymap ? [descriptor.description, getAriaKeyshortcuts(descriptor.keymap)] : [descriptor.description];
   }).join('. ');

package/dist/esm/utils/getNestedNodePosition.js

@@ -0,0 +1,21 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export var getNestedNodePosition = function getNestedNodePosition(state) {
+  var selection = state.selection;
+  var nestedNodePos = selection.$from.before(1);
+  if (selection instanceof TextSelection) {
+    nestedNodePos = selection.$from.before();
+    var $pos = state.doc.resolve(nestedNodePos);
+    if ($pos.depth < 1) {
+      return nestedNodePos;
+    }
+    var parentNodeOfSpecificTypes = findParentNodeOfType([state.schema.nodes.bulletList, state.schema.nodes.orderedList, state.schema.nodes.blockquote, state.schema.nodes.taskList])(state.selection);
+    if (parentNodeOfSpecificTypes) {
+      var parentNodeType = parentNodeOfSpecificTypes.node.type.name;
+      nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;
+    }
+  } else {
+    nestedNodePos = selection.$from.pos;
+  }
+  return nestedNodePos;
+};

package/dist/esm/utils/index.js

@@ -1 +1,2 @@
-export { getSelection, selectNode } from './getSelection';
+export { getSelection, selectNode } from './getSelection';
+export { getNestedNodePosition } from './getNestedNodePosition';

package/dist/types/commands/show-drag-handle.d.ts

@@ -1,3 +1,3 @@
 import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '../types';
-export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => Command;
+export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin>, shouldFocusParentNode?: boolean) => Command;

package/dist/types/consts.d.ts

@@ -1,4 +1,6 @@
 export declare enum DIRECTION {
     UP = "up",
-    DOWN = "down"
+    DOWN = "down",
+    LEFT = "left",
+    RIGHT = "right"
 }

package/dist/types/utils/getNestedNodePosition.d.ts

@@ -0,0 +1,2 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const getNestedNodePosition: (state: EditorState) => number;

package/dist/types/utils/index.d.ts

@@ -1 +1,2 @@
 export { getSelection, selectNode } from './getSelection';
+export { getNestedNodePosition } from './getNestedNodePosition';

package/dist/types-ts4.5/commands/show-drag-handle.d.ts

@@ -1,3 +1,3 @@
 import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '../types';
-export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin>) => Command;
+export declare const showDragHandleAtSelection: (api?: ExtractInjectionAPI<BlockControlsPlugin>, shouldFocusParentNode?: boolean) => Command;

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

@@ -1,4 +1,6 @@
 export declare enum DIRECTION {
     UP = "up",
-    DOWN = "down"
+    DOWN = "down",
+    LEFT = "left",
+    RIGHT = "right"
 }

package/dist/types-ts4.5/utils/getNestedNodePosition.d.ts

@@ -0,0 +1,2 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const getNestedNodePosition: (state: EditorState) => number;

package/dist/types-ts4.5/utils/index.d.ts

@@ -1 +1,2 @@
 export { getSelection, selectNode } from './getSelection';
+export { getNestedNodePosition } from './getNestedNodePosition';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.1.11",
+	"version": "2.2.1",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
-		"@atlaskit/editor-common": "^93.0.0",
+		"@atlaskit/editor-common": "^93.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -41,14 +41,14 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.2.0",
+		"@atlaskit/tmp-editor-statsig": "^2.3.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
@@ -147,6 +147,9 @@
 		},
 		"confluence_frontend_page_title_enter_improvements": {
 			"type": "boolean"
+		},
+		"platform_editor_element_dnd_nested_a11y": {
+			"type": "boolean"
 		}
 	}
 }