@atlaskit/editor-plugin-block-controls 2.26.0 → 2.26.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 2.26.1
+
+### Patch Changes
+
+- [#111887](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111887)
+  [`dc433156e592a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dc433156e592a) -
+  [ux] ED-26101 Create layout with nodes before/after using keyboard shortcuts
+
 ## 2.26.0
 
 ### Minor Changes

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

@@ -25,6 +25,7 @@ var _getNestedNodePosition = require("../pm-plugins/utils/getNestedNodePosition"
 var _getSelection = require("../pm-plugins/utils/getSelection");
 var _removeFromSource = require("../pm-plugins/utils/remove-from-source");
 var _selection2 = require("../pm-plugins/utils/selection");
+var _updateSelection = require("../pm-plugins/utils/update-selection");
 var _validation = require("../pm-plugins/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; }
@@ -58,7 +59,7 @@ var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from,
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
-var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayout) {
+var getCurrentNodePos = function getCurrentNodePos(state) {
   var _activeNode$handleOpt;
   var selection = state.selection;
   var _ref = _main.key.getState(state) || {},
@@ -94,27 +95,46 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!(0, _utils2.findParentNodeOfType)([state.schema.nodes.layoutSection])(state.selection);
     }
-    var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
+    var currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       var $pos = state.doc.resolve(currentNodePos);
+      var isTopLevelNode = $pos.depth === 0;
       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 (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);
+        if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core, _api$core2;
+          var nodeBefore = $pos.nodeBefore;
+          if (nodeBefore) {
+            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          }
+          if (moveToPos < 0) {
+            return false;
+          }
           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
+              moveToEnd: true,
+              moveNodeAtCursorPos: true
             })({
               tr: tr
             });
+            var insertColumnStep = (0, _updateSelection.getInsertLayoutStep)(tr);
+            var mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            (0, _updateSelection.updateSelection)(tr, mappedTo, true);
             return tr;
           });
+          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _$pos$nodeBefore, _api$core3, _api$blockControls2;
+          moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
+          api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(currentNodePos, moveToPos, {
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -128,8 +148,30 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
         }
       } else if (direction === _consts.DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
-        if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
-          var _api$core2;
+        if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core4, _api$core5;
+          var endOfDoc = $pos.end();
+          moveToPos = $pos.posAtIndex($pos.index() + 1);
+          if (moveToPos >= endOfDoc) {
+            return false;
+          }
+          api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref3) {
+            var _api$blockControls3;
+            var tr = _ref3.tr;
+            api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || (_api$blockControls3 = _api$blockControls3.commands) === null || _api$blockControls3 === void 0 || _api$blockControls3.moveToLayout(currentNodePos, moveToPos, {
+              moveNodeAtCursorPos: true
+            })({
+              tr: tr
+            });
+            var insertColumnStep = (0, _updateSelection.getInsertLayoutStep)(tr);
+            var mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            (0, _updateSelection.updateSelection)(tr, mappedTo);
+            return tr;
+          });
+          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core6, _api$blockControls4;
           var _index = $pos.index($pos.depth);
           var parent = $pos.node($pos.depth);
           // get the next layoutColumn node
@@ -142,17 +184,10 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           }
           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;
-          });
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.moveToLayout(currentNodePos, moveToPos, {
+            moveToEnd: moveToEnd,
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -164,15 +199,15 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         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;
+          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 _endOfDoc = $pos.end();
         var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
-        if (nodeAfterPos > endOfDoc) {
+        if (nodeAfterPos > _endOfDoc) {
           return false;
         }
         if (isLayoutColumnSelected && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility')) {
@@ -190,8 +225,8 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       // 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 || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility');
       if (shouldMoveNode) {
-        var _api$core3;
-        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+        var _api$core7;
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref4) {
           var tr = _ref4.tr;
           moveNode(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
@@ -201,9 +236,9 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         });
         return true;
       } else if (nodeType) {
-        var _api$core4;
+        var _api$core8;
         // If the node is first/last one, only select the node
-        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
+        api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref5) {
           var tr = _ref5.tr;
           (0, _getSelection.selectNode)(tr, currentNodePos, nodeType);
           tr.scrollIntoView();

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

@@ -162,7 +162,7 @@ var insertToDestination = function insertToDestination(tr, to, sourceContent, to
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
  * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
  */
-var canMoveToLayout = function canMoveToLayout(api, from, to, tr) {
+var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCursorPos) {
   if (from === to) {
     return;
   }
@@ -193,7 +193,7 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr) {
   var sourceContent = $from.nodeAfter;
   var sourceFrom = from;
   var sourceTo = from + sourceContent.nodeSize;
-  if (isMultiSelect) {
+  if (isMultiSelect && !moveNodeAtCursorPos) {
     var _getMultiSelectionIfP = (0, _selection.getMultiSelectionIfPosInside)(api, from),
       anchor = _getMultiSelectionIfP.anchor,
       head = _getMultiSelectionIfP.head;
@@ -290,7 +290,7 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
       if (!api) {
         return tr;
       }
-      var canMove = canMoveToLayout(api, from, to, tr);
+      var canMove = canMoveToLayout(api, from, to, tr, options === null || options === void 0 ? void 0 : options.moveNodeAtCursorPos);
       if (!canMove) {
         return tr;
       }

package/dist/cjs/pm-plugins/decorations-common.js

@@ -8,9 +8,7 @@ exports.unmountDecorations = exports.getNodeAnchor = exports.getNestedDepth = ex
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 var TYPE_HANDLE_DEC = exports.TYPE_HANDLE_DEC = 'drag-handle';
@@ -44,13 +42,9 @@ var unmountDecorations = exports.unmountDecorations = function unmountDecoration
   // as it was more responsive and causes less re-rendering
   var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
   decorationsToRemove.forEach(function (el) {
-    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-      var nodeKey = el.getAttribute(key);
-      if (nodeKey) {
-        nodeViewPortalProviderAPI.remove(nodeKey);
-      }
-    } else {
-      _reactDom.default.unmountComponentAtNode(el);
+    var nodeKey = el.getAttribute(key);
+    if (nodeKey) {
+      nodeViewPortalProviderAPI.remove(nodeKey);
     }
   });
 };

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -8,10 +8,8 @@ exports.findHandleDec = exports.emptyParagraphNodeDecorations = exports.dragHand
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
@@ -72,21 +70,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
     // due to margins applied to other nodes eg. Headings
     element.style.clear = 'unset';
-    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
-          view: view,
-          api: api,
-          formatMessage: formatMessage,
-          getPos: getPos,
-          anchorName: anchorName,
-          nodeType: nodeType,
-          handleOptions: handleOptions,
-          isTopLevelNode: isTopLevelNode
-        });
-      }, element, key);
-    } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
         view: view,
         api: api,
         formatMessage: formatMessage,
@@ -95,8 +80,8 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
         nodeType: nodeType,
         handleOptions: handleOptions,
         isTopLevelNode: isTopLevelNode
-      }), element);
-    }
+      });
+    }, element, key);
     return element;
   }, {
     side: -1,

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -7,11 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.findDropTargetDecs = exports.dropTargetDecorations = exports.createLayoutDropTargetDecoration = exports.createDropTargetDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../ui/consts");
 var _dropTarget = require("../ui/drop-target");
@@ -103,21 +101,13 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
     element.style.setProperty(_dropTarget.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
     element.style.setProperty(_dropTarget.EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
     element.style.setProperty('display', 'block');
-    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
-          getPos: getPos,
-          anchorRectCache: anchorRectCache,
-          isSameLayout: isSameLayout
-        }));
-      }, element, key);
-    } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/(0, _react.createElement)(_dropTarget.DropTarget, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache,
         isSameLayout: isSameLayout
-      })), element);
-    }
+      }));
+    }, element, key);
     return element;
   }, {
     type: _decorationsCommon.TYPE_DROP_TARGET_DEC,
@@ -138,19 +128,12 @@ var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
-          getPos: getPos,
-          anchorRectCache: anchorRectCache
-        }));
-      }, element, key);
-    } else {
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/(0, _react.createElement)(_dropTargetLayout.DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
-      })), element);
-    }
+      }));
+    }, element, key);
     return element;
   }, {
     type: _decorationsCommon.TYPE_DROP_TARGET_DEC

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

@@ -389,7 +389,21 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }
     setDragHandleSelected((0, _getSelection.isHandleInSelection)(view.state, selection, start));
   }, [start, selection, view.state]);
-  var helpDescriptors = [{
+  var helpDescriptors = isTopLevelNode && (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_accessibility') ? [{
+    description: formatMessage(_messages.blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveUp),
+    keymap: _keymaps.dragToMoveUp
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveDown),
+    keymap: _keymaps.dragToMoveDown
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveLeft),
+    keymap: _keymaps.dragToMoveLeft
+  }, {
+    description: formatMessage(_messages.blockControlsMessages.moveRight),
+    keymap: _keymaps.dragToMoveRight
+  }] : [{
     description: formatMessage(_messages.blockControlsMessages.dragToMove)
   }, {
     description: formatMessage(_messages.blockControlsMessages.moveUp),

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

@@ -17,6 +17,7 @@ import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition
 import { selectNode, setCursorPositionAtMovedNode } from '../pm-plugins/utils/getSelection';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
 import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
+import { getInsertLayoutStep, updateSelection } from '../pm-plugins/utils/update-selection';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
 
 /**
@@ -50,7 +51,7 @@ const isDragLayoutColumnToTopLevel = ($from, $to) => {
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
-const getCurrentNodePos = (state, isParentNodeOfTypeLayout) => {
+const getCurrentNodePos = state => {
   var _activeNode$handleOpt;
   const {
     selection
@@ -91,28 +92,47 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
-    const currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
+    const currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       const $pos = state.doc.resolve(currentNodePos);
+      const isTopLevelNode = $pos.depth === 0;
       let moveToPos = -1;
       const nodeIndex = $pos.index();
       const isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
       if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
-        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);
+        if (isTopLevelNode && editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core, _api$core2;
+          const nodeBefore = $pos.nodeBefore;
+          if (nodeBefore) {
+            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          }
+          if (moveToPos < 0) {
+            return false;
+          }
           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
+              moveToEnd: true,
+              moveNodeAtCursorPos: true
             })({
               tr
             });
+            const insertColumnStep = getInsertLayoutStep(tr);
+            const mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            updateSelection(tr, mappedTo, true);
             return tr;
           });
+          api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _$pos$nodeBefore, _api$core3, _api$blockControls2, _api$blockControls2$c;
+          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$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(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, {
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -126,8 +146,31 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
           moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
         }
       } else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
-        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
-          var _api$core2;
+        if (isTopLevelNode && editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core4, _api$core5;
+          const endOfDoc = $pos.end();
+          moveToPos = $pos.posAtIndex($pos.index() + 1);
+          if (moveToPos >= endOfDoc) {
+            return false;
+          }
+          api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+            tr
+          }) => {
+            var _api$blockControls3, _api$blockControls3$c;
+            api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : (_api$blockControls3$c = _api$blockControls3.commands) === null || _api$blockControls3$c === void 0 ? void 0 : _api$blockControls3$c.moveToLayout(currentNodePos, moveToPos, {
+              moveNodeAtCursorPos: true
+            })({
+              tr
+            });
+            const insertColumnStep = getInsertLayoutStep(tr);
+            const mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            updateSelection(tr, mappedTo);
+            return tr;
+          });
+          api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core6, _api$blockControls4, _api$blockControls4$c;
           const index = $pos.index($pos.depth);
           const parent = $pos.node($pos.depth);
           // get the next layoutColumn node
@@ -140,18 +183,10 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
           }
           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;
-          });
+          api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : (_api$blockControls4$c = _api$blockControls4.commands) === null || _api$blockControls4$c === void 0 ? void 0 : _api$blockControls4$c.moveToLayout(currentNodePos, moveToPos, {
+            moveToEnd,
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -189,8 +224,8 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
       // 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 || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && fg('platform_editor_advanced_layouts_accessibility');
       if (shouldMoveNode) {
-        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(({
+        var _api$core7;
+        api === null || api === void 0 ? void 0 : (_api$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions.execute(({
           tr
         }) => {
           moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
@@ -201,9 +236,9 @@ export const moveNodeViaShortcut = (api, direction, formatMessage) => {
         });
         return true;
       } else if (nodeType) {
-        var _api$core4;
+        var _api$core8;
         // If the node is first/last one, only select the node
-        api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions.execute(({
+        api === null || api === void 0 ? void 0 : (_api$core8 = api.core) === null || _api$core8 === void 0 ? void 0 : _api$core8.actions.execute(({
           tr
         }) => {
           selectNode(tr, currentNodePos, nodeType);

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

@@ -160,7 +160,7 @@ const insertToDestination = (tr, to, sourceContent, toLayout, toLayoutPos) => {
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
  * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
  */
-const canMoveToLayout = (api, from, to, tr) => {
+const canMoveToLayout = (api, from, to, tr, moveNodeAtCursorPos) => {
   if (from === to) {
     return;
   }
@@ -192,7 +192,7 @@ const canMoveToLayout = (api, from, to, tr) => {
   let sourceContent = $from.nodeAfter;
   let sourceFrom = from;
   let sourceTo = from + sourceContent.nodeSize;
-  if (isMultiSelect) {
+  if (isMultiSelect && !moveNodeAtCursorPos) {
     const {
       anchor,
       head
@@ -280,7 +280,7 @@ export const moveToLayout = api => (from, to, options) => ({
   if (!api) {
     return tr;
   }
-  const canMove = canMoveToLayout(api, from, to, tr);
+  const canMove = canMoveToLayout(api, from, to, tr, options === null || options === void 0 ? void 0 : options.moveNodeAtCursorPos);
   if (!canMove) {
     return tr;
   }

package/dist/es2019/pm-plugins/decorations-common.js

@@ -1,7 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import ReactDOM from 'react-dom';
 import uuid from 'uuid';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export const TYPE_HANDLE_DEC = 'drag-handle';
@@ -27,13 +25,9 @@ export const unmountDecorations = (nodeViewPortalProviderAPI, selector, key) =>
   // as it was more responsive and causes less re-rendering
   const decorationsToRemove = document.querySelectorAll(`[${selector}="true"]`);
   decorationsToRemove.forEach(el => {
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      const nodeKey = el.getAttribute(key);
-      if (nodeKey) {
-        nodeViewPortalProviderAPI.remove(nodeKey);
-      }
-    } else {
-      ReactDOM.unmountComponentAtNode(el);
+    const nodeKey = el.getAttribute(key);
+    if (nodeKey) {
+      nodeViewPortalProviderAPI.remove(nodeKey);
     }
   });
 };

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -1,9 +1,7 @@
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
-import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
@@ -63,29 +61,16 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
     // due to margins applied to other nodes eg. Headings
     element.style.clear = 'unset';
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DragHandle, {
-        view,
-        api,
-        formatMessage,
-        getPos,
-        anchorName,
-        nodeType,
-        handleOptions,
-        isTopLevelNode
-      }), element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
-        view,
-        api,
-        formatMessage,
-        getPos,
-        anchorName,
-        nodeType,
-        handleOptions,
-        isTopLevelNode
-      }), element);
-    }
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DragHandle, {
+      view,
+      api,
+      formatMessage,
+      getPos,
+      anchorName,
+      nodeType,
+      handleOptions,
+      isTopLevelNode
+    }), element, key);
     return element;
   }, {
     side: -1,

package/dist/es2019/pm-plugins/decorations-drop-target.js

@@ -1,9 +1,7 @@
 import { createElement } from 'react';
-import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
@@ -92,21 +90,12 @@ export const createDropTargetDecoration = (pos, props, nodeViewPortalProviderAPI
     element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, `${offset}px`);
     element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, `${gap}px`);
     element.style.setProperty('display', 'block');
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTarget, {
-        ...props,
-        getPos,
-        anchorRectCache,
-        isSameLayout
-      }), element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, {
-        ...props,
-        getPos,
-        anchorRectCache,
-        isSameLayout
-      }), element);
-    }
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTarget, {
+      ...props,
+      getPos,
+      anchorRectCache,
+      isSameLayout
+    }), element, key);
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC,
@@ -127,19 +116,11 @@ export const createLayoutDropTargetDecoration = (pos, props, nodeViewPortalProvi
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayout, {
-        ...props,
-        getPos,
-        anchorRectCache
-      }), element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTargetLayout, {
-        ...props,
-        getPos,
-        anchorRectCache
-      }), element);
-    }
+    nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(DropTargetLayout, {
+      ...props,
+      getPos,
+      anchorRectCache
+    }), element, key);
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC

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

@@ -369,7 +369,21 @@ export const DragHandle = ({
     }
     setDragHandleSelected(isHandleInSelection(view.state, selection, start));
   }, [start, selection, view.state]);
-  let helpDescriptors = [{
+  let helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
+    description: formatMessage(blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(blockControlsMessages.moveUp),
+    keymap: dragToMoveUp
+  }, {
+    description: formatMessage(blockControlsMessages.moveDown),
+    keymap: dragToMoveDown
+  }, {
+    description: formatMessage(blockControlsMessages.moveLeft),
+    keymap: dragToMoveLeft
+  }, {
+    description: formatMessage(blockControlsMessages.moveRight),
+    keymap: dragToMoveRight
+  }] : [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
     description: formatMessage(blockControlsMessages.moveUp),

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

@@ -20,6 +20,7 @@ import { getNestedNodePosition } from '../pm-plugins/utils/getNestedNodePosition
 import { selectNode, setCursorPositionAtMovedNode } from '../pm-plugins/utils/getSelection';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
 import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
+import { getInsertLayoutStep, updateSelection } from '../pm-plugins/utils/update-selection';
 import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
 
 /**
@@ -52,7 +53,7 @@ var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from,
  *
  * @returns the start position of a node if the node can be moved, otherwise -1
  */
-var getCurrentNodePos = function getCurrentNodePos(state, isParentNodeOfTypeLayout) {
+var getCurrentNodePos = function getCurrentNodePos(state) {
   var _activeNode$handleOpt;
   var selection = state.selection;
   var _ref = key.getState(state) || {},
@@ -88,27 +89,46 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
     if (shouldEnableNestedDndA11y) {
       isParentNodeOfTypeLayout = !!findParentNodeOfType([state.schema.nodes.layoutSection])(state.selection);
     }
-    var currentNodePos = getCurrentNodePos(state, isParentNodeOfTypeLayout);
+    var currentNodePos = getCurrentNodePos(state);
     if (currentNodePos > -1) {
       var _state$doc$nodeAt;
       var $pos = state.doc.resolve(currentNodePos);
+      var isTopLevelNode = $pos.depth === 0;
       var moveToPos = -1;
       var nodeIndex = $pos.index();
       var isLayoutColumnSelected = selection instanceof NodeSelection && selection.node.type.name === 'layoutColumn';
       if (direction === DIRECTION.LEFT && shouldEnableNestedDndA11y) {
-        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);
+        if (isTopLevelNode && editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core, _api$core2;
+          var nodeBefore = $pos.nodeBefore;
+          if (nodeBefore) {
+            moveToPos = currentNodePos - nodeBefore.nodeSize;
+          }
+          if (moveToPos < 0) {
+            return false;
+          }
           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
+              moveToEnd: true,
+              moveNodeAtCursorPos: true
             })({
               tr: tr
             });
+            var insertColumnStep = getInsertLayoutStep(tr);
+            var mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            updateSelection(tr, mappedTo, true);
             return tr;
           });
+          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _$pos$nodeBefore, _api$core3, _api$blockControls2;
+          moveToPos = selection.from - (((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.nodeSize) || 1);
+          api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.commands) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.moveToLayout(currentNodePos, moveToPos, {
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -122,8 +142,30 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
           moveToPos = $pos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
         }
       } else if (direction === DIRECTION.RIGHT && shouldEnableNestedDndA11y) {
-        if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
-          var _api$core2;
+        if (isTopLevelNode && editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core4, _api$core5;
+          var endOfDoc = $pos.end();
+          moveToPos = $pos.posAtIndex($pos.index() + 1);
+          if (moveToPos >= endOfDoc) {
+            return false;
+          }
+          api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref3) {
+            var _api$blockControls3;
+            var tr = _ref3.tr;
+            api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || (_api$blockControls3 = _api$blockControls3.commands) === null || _api$blockControls3 === void 0 || _api$blockControls3.moveToLayout(currentNodePos, moveToPos, {
+              moveNodeAtCursorPos: true
+            })({
+              tr: tr
+            });
+            var insertColumnStep = getInsertLayoutStep(tr);
+            var mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+            updateSelection(tr, mappedTo);
+            return tr;
+          });
+          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.focus();
+          return true;
+        } else if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
+          var _api$core6, _api$blockControls4;
           var _index = $pos.index($pos.depth);
           var parent = $pos.node($pos.depth);
           // get the next layoutColumn node
@@ -136,17 +178,10 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
           }
           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;
-          });
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 || (_api$blockControls4 = _api$blockControls4.commands) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.moveToLayout(currentNodePos, moveToPos, {
+            moveToEnd: moveToEnd,
+            selectMovedNode: true
+          }));
           return true;
         } else {
           if ($pos.depth < 2 || !isParentNodeOfTypeLayout) {
@@ -158,15 +193,15 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
         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;
+          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 _endOfDoc = $pos.end();
         var nodeAfterPos = $pos.posAtIndex($pos.index() + 1);
-        if (nodeAfterPos > endOfDoc) {
+        if (nodeAfterPos > _endOfDoc) {
           return false;
         }
         if (isLayoutColumnSelected && fg('platform_editor_advanced_layouts_accessibility')) {
@@ -184,8 +219,8 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
       // 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 || nodeType === 'layoutColumn' : moveToPos > -1) || nodeType === 'layoutColumn' && fg('platform_editor_advanced_layouts_accessibility');
       if (shouldMoveNode) {
-        var _api$core3;
-        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref4) {
+        var _api$core7;
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref4) {
           var tr = _ref4.tr;
           moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.SHORTCUT, formatMessage)({
             tr: tr
@@ -195,9 +230,9 @@ export var moveNodeViaShortcut = function moveNodeViaShortcut(api, direction, fo
         });
         return true;
       } else if (nodeType) {
-        var _api$core4;
+        var _api$core8;
         // If the node is first/last one, only select the node
-        api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref5) {
+        api === null || api === void 0 || (_api$core8 = api.core) === null || _api$core8 === void 0 || _api$core8.actions.execute(function (_ref5) {
           var tr = _ref5.tr;
           selectNode(tr, currentNodePos, nodeType);
           tr.scrollIntoView();

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

@@ -156,7 +156,7 @@ var insertToDestination = function insertToDestination(tr, to, sourceContent, to
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
  * Returns the source and destination nodes and positions if it's a valid move, otherwise, undefined
  */
-var canMoveToLayout = function canMoveToLayout(api, from, to, tr) {
+var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCursorPos) {
   if (from === to) {
     return;
   }
@@ -187,7 +187,7 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr) {
   var sourceContent = $from.nodeAfter;
   var sourceFrom = from;
   var sourceTo = from + sourceContent.nodeSize;
-  if (isMultiSelect) {
+  if (isMultiSelect && !moveNodeAtCursorPos) {
     var _getMultiSelectionIfP = getMultiSelectionIfPosInside(api, from),
       anchor = _getMultiSelectionIfP.anchor,
       head = _getMultiSelectionIfP.head;
@@ -284,7 +284,7 @@ export var moveToLayout = function moveToLayout(api) {
       if (!api) {
         return tr;
       }
-      var canMove = canMoveToLayout(api, from, to, tr);
+      var canMove = canMoveToLayout(api, from, to, tr, options === null || options === void 0 ? void 0 : options.moveNodeAtCursorPos);
       if (!canMove) {
         return tr;
       }

package/dist/esm/pm-plugins/decorations-common.js

@@ -1,9 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import ReactDOM from 'react-dom';
 import uuid from 'uuid';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export var TYPE_HANDLE_DEC = 'drag-handle';
@@ -37,13 +35,9 @@ export var unmountDecorations = function unmountDecorations(nodeViewPortalProvid
   // as it was more responsive and causes less re-rendering
   var decorationsToRemove = document.querySelectorAll("[".concat(selector, "=\"true\"]"));
   decorationsToRemove.forEach(function (el) {
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      var nodeKey = el.getAttribute(key);
-      if (nodeKey) {
-        nodeViewPortalProviderAPI.remove(nodeKey);
-      }
-    } else {
-      ReactDOM.unmountComponentAtNode(el);
+    var nodeKey = el.getAttribute(key);
+    if (nodeKey) {
+      nodeViewPortalProviderAPI.remove(nodeKey);
     }
   });
 };

package/dist/esm/pm-plugins/decorations-drag-handle.js

@@ -1,10 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 import { bind } from 'bind-event-listener';
-import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
@@ -65,21 +63,8 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
     // There are times when global clear: "both" styles are applied to this decoration causing jumpiness
     // due to margins applied to other nodes eg. Headings
     element.style.clear = 'unset';
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/createElement(DragHandle, {
-          view: view,
-          api: api,
-          formatMessage: formatMessage,
-          getPos: getPos,
-          anchorName: anchorName,
-          nodeType: nodeType,
-          handleOptions: handleOptions,
-          isTopLevelNode: isTopLevelNode
-        });
-      }, element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/createElement(DragHandle, {
         view: view,
         api: api,
         formatMessage: formatMessage,
@@ -88,8 +73,8 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
         nodeType: nodeType,
         handleOptions: handleOptions,
         isTopLevelNode: isTopLevelNode
-      }), element);
-    }
+      });
+    }, element, key);
     return element;
   }, {
     side: -1,

package/dist/esm/pm-plugins/decorations-drop-target.js

@@ -2,11 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createElement } from 'react';
-import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { nodeMargins } from '../ui/consts';
 import { DropTarget, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET } from '../ui/drop-target';
@@ -96,21 +94,13 @@ export var createDropTargetDecoration = function createDropTargetDecoration(pos,
     element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, "".concat(offset, "px"));
     element.style.setProperty(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_GAP, "".concat(gap, "px"));
     element.style.setProperty('display', 'block');
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
-          getPos: getPos,
-          anchorRectCache: anchorRectCache,
-          isSameLayout: isSameLayout
-        }));
-      }, element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/createElement(DropTarget, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache,
         isSameLayout: isSameLayout
-      })), element);
-    }
+      }));
+    }, element, key);
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC,
@@ -131,19 +121,12 @@ export var createLayoutDropTargetDecoration = function createLayoutDropTargetDec
     element.setAttribute('data-blocks-drop-target-container', 'true');
     element.setAttribute('data-blocks-drop-target-key', key);
     element.style.clear = 'unset';
-    if (fg('platform_editor_react18_plugin_portalprovider')) {
-      nodeViewPortalProviderAPI.render(function () {
-        return /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
-          getPos: getPos,
-          anchorRectCache: anchorRectCache
-        }));
-      }, element, key);
-    } else {
-      ReactDOM.render( /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
+    nodeViewPortalProviderAPI.render(function () {
+      return /*#__PURE__*/createElement(DropTargetLayout, _objectSpread(_objectSpread({}, props), {}, {
         getPos: getPos,
         anchorRectCache: anchorRectCache
-      })), element);
-    }
+      }));
+    }, element, key);
     return element;
   }, {
     type: TYPE_DROP_TARGET_DEC

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

@@ -380,7 +380,21 @@ export var DragHandle = function DragHandle(_ref) {
     }
     setDragHandleSelected(isHandleInSelection(view.state, selection, start));
   }, [start, selection, view.state]);
-  var helpDescriptors = [{
+  var helpDescriptors = isTopLevelNode && fg('platform_editor_advanced_layouts_accessibility') ? [{
+    description: formatMessage(blockControlsMessages.dragToMove)
+  }, {
+    description: formatMessage(blockControlsMessages.moveUp),
+    keymap: dragToMoveUp
+  }, {
+    description: formatMessage(blockControlsMessages.moveDown),
+    keymap: dragToMoveDown
+  }, {
+    description: formatMessage(blockControlsMessages.moveLeft),
+    keymap: dragToMoveLeft
+  }, {
+    description: formatMessage(blockControlsMessages.moveRight),
+    keymap: dragToMoveRight
+  }] : [{
     description: formatMessage(blockControlsMessages.dragToMove)
   }, {
     description: formatMessage(blockControlsMessages.moveUp),

package/dist/types/blockControlsPluginType.d.ts

@@ -82,6 +82,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         moveToLayout: (start: number, to: number, options?: {
             moveToEnd?: boolean;
             selectMovedNode?: boolean;
+            moveNodeAtCursorPos?: boolean;
         }) => EditorCommand;
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;

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

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

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

@@ -82,6 +82,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         moveToLayout: (start: number, to: number, options?: {
             moveToEnd?: boolean;
             selectMovedNode?: boolean;
+            moveNodeAtCursorPos?: 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.26.0",
+	"version": "2.26.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": "^46.1.0",
-		"@atlaskit/editor-common": "^99.12.0",
+		"@atlaskit/editor-common": "^99.13.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.12.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.5.0",
@@ -119,9 +119,6 @@
 		"platform_editor_advanced_layouts_redraw_on_drag": {
 			"type": "boolean"
 		},
-		"platform_editor_react18_plugin_portalprovider": {
-			"type": "boolean"
-		},
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean"
 		},