@atlaskit/editor-plugin-block-controls 4.1.12 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 4.2.0
+
+### Minor Changes
+
+- [`353075175e7ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/353075175e7ff) -
+  [ux] ED-28584 Register move up and down options in block menu
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.1.12
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -13,7 +13,9 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./editor-commands/move-node");
+var _moveNodeWithBlockMenu2 = require("./editor-commands/move-node-with-block-menu");
 var _moveToLayout = require("./editor-commands/move-to-layout");
+var _moveNodeUtils = require("./editor-commands/utils/move-node-utils");
 var _firstNodeDecPlugin = require("./pm-plugins/first-node-dec-plugin");
 var _pmPlugin = require("./pm-plugins/interaction-tracking/pm-plugin");
 var _main = require("./pm-plugins/main");
@@ -89,12 +91,22 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             }));
             return tr;
           }
+          var toggleMenuMeta = {
+            anchorName: options === null || options === void 0 ? void 0 : options.anchorName
+          };
+          var menuTriggerBy = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.menuTriggerBy;
+          if (options !== null && options !== void 0 && options.anchorName) {
+            var _canMoveNodeUpOrDown = (0, _moveNodeUtils.canMoveNodeUpOrDown)(tr),
+              moveUp = _canMoveNodeUpOrDown.moveUp,
+              moveDown = _canMoveNodeUpOrDown.moveDown;
+            toggleMenuMeta = _objectSpread(_objectSpread({}, toggleMenuMeta), {}, {
+              moveUp: moveUp,
+              moveDown: moveDown
+            });
+          }
           tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
-            toggleMenu: {
-              anchorName: options === null || options === void 0 ? void 0 : options.anchorName
-            }
+            toggleMenu: toggleMenuMeta
           }));
-          var menuTriggerBy = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.menuTriggerBy;
           if (menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) {
             var _api$userIntent;
             // Toggled from drag handle
@@ -197,25 +209,29 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
             isSelectedViaDragHandle: isSelectedViaDragHandle
           }));
         };
+      },
+      moveNodeWithBlockMenu: function moveNodeWithBlockMenu(direction) {
+        return (0, _moveNodeWithBlockMenu2.moveNodeWithBlockMenu)(api, direction);
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$activeD, _key$getState4, _key$getState$isDragg, _key$getState5, _key$getState$isPMDra, _key$getState6, _key$getState$multiSe, _key$getState7, _key$getState$isShift, _key$getState8, _key$getState$lastDra, _key$getState9, _interactionTrackingP, _key$getState$isSelec, _key$getState0;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$blockMe, _key$getState3, _key$getState$activeN, _key$getState4, _key$getState$activeD, _key$getState5, _key$getState$isDragg, _key$getState6, _key$getState$isPMDra, _key$getState7, _key$getState$multiSe, _key$getState8, _key$getState$isShift, _key$getState9, _key$getState$lastDra, _key$getState0, _interactionTrackingP, _key$getState$isSelec, _key$getState1;
       if (!editorState) {
         return undefined;
       }
       var sharedState = {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
-        activeNode: (_key$getState$activeN = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
-        activeDropTargetNode: (_key$getState$activeD = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeDropTargetNode) !== null && _key$getState$activeD !== void 0 ? _key$getState$activeD : undefined,
-        isDragging: (_key$getState$isDragg = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-        isPMDragging: (_key$getState$isPMDra = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
-        multiSelectDnD: (_key$getState$multiSe = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-        isShiftDown: (_key$getState$isShift = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
-        lastDragCancelled: (_key$getState$lastDra = (_key$getState9 = _main.key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
+        blockMenuOptions: (_key$getState$blockMe = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.blockMenuOptions) !== null && _key$getState$blockMe !== void 0 ? _key$getState$blockMe : undefined,
+        activeNode: (_key$getState$activeN = (_key$getState4 = _main.key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
+        activeDropTargetNode: (_key$getState$activeD = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.activeDropTargetNode) !== null && _key$getState$activeD !== void 0 ? _key$getState$activeD : undefined,
+        isDragging: (_key$getState$isDragg = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+        isPMDragging: (_key$getState$isPMDra = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
+        multiSelectDnD: (_key$getState$multiSe = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
+        isShiftDown: (_key$getState$isShift = (_key$getState9 = _main.key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
+        lastDragCancelled: (_key$getState$lastDra = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
-        isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
+        isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState1 = _main.key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3;

package/dist/cjs/editor-commands/move-node-with-block-menu.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveNodeWithBlockMenu = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _types = require("@atlaskit/editor-common/types");
+var _moveNode = require("./move-node");
+var _moveNodeUtils = require("./utils/move-node-utils");
+var moveNodeWithBlockMenu = exports.moveNodeWithBlockMenu = function moveNodeWithBlockMenu(api, direction) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    // Nodes like lists nest within themselves, we need to find the top most position
+    var currentNodePos = (0, _moveNodeUtils.getCurrentNodePosFromDragHandleSelection)({
+      selection: tr.selection,
+      schema: tr.doc.type.schema,
+      resolve: tr.doc.resolve.bind(tr.doc)
+    });
+    if (currentNodePos > -1) {
+      var $currentNodePos = tr.doc.resolve(currentNodePos);
+      var nodeAfterPos = $currentNodePos.posAtIndex($currentNodePos.index() + 1);
+      var moveToPos = direction === _types.DIRECTION.UP ? (0, _moveNodeUtils.getPosWhenMoveNodeUp)($currentNodePos, currentNodePos) : (0, _moveNodeUtils.getPosWhenMoveNodeDown)({
+        $currentNodePos: $currentNodePos,
+        nodeAfterPos: nodeAfterPos,
+        tr: tr
+      });
+
+      // 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, _moveNodeUtils.getShouldMoveNode)({
+        currentNodePos: currentNodePos,
+        moveToPos: moveToPos,
+        tr: tr
+      });
+      if (shouldMoveNode) {
+        (0, _moveNode.moveNode)(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.BLOCK_MENU)({
+          tr: tr
+        });
+        tr.scrollIntoView();
+      }
+    }
+    return tr;
+  };
+};

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

@@ -11,6 +11,7 @@ var _expand = require("@atlaskit/editor-common/expand");
 var _messages = require("@atlaskit/editor-common/messages");
 var _selection = require("@atlaskit/editor-common/selection");
 var _transforms = require("@atlaskit/editor-common/transforms");
+var _types = require("@atlaskit/editor-common/types");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -20,13 +21,13 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _main = require("../pm-plugins/main");
 var _analytics2 = require("../pm-plugins/utils/analytics");
-var _consts = require("../pm-plugins/utils/consts");
 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");
+var _moveNodeUtils = require("./utils/move-node-utils");
 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; }
 /**
@@ -118,7 +119,11 @@ var getCurrentNodePos = function getCurrentNodePos(state) {
     // 3. the start of the selection is inside the node
     currentNodePos = selection.$from.before(1);
     if (selection.$from.depth > 0) {
-      currentNodePos = (0, _getNestedNodePosition.getNestedNodePosition)(state);
+      currentNodePos = (0, _getNestedNodePosition.getNestedNodePosition)({
+        selection: selection,
+        schema: state.schema,
+        resolve: state.doc.resolve.bind(state.doc)
+      });
     }
   }
   return currentNodePos;
@@ -151,9 +156,8 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
       var nodeAfterPos = isMultiSelectEnabled && !getFocusedHandle(state) ? Math.max(expandedAnchor, expandedHead) : $currentNodePos.posAtIndex($currentNodePos.index() + 1);
       var isTopLevelNode = $currentNodePos.depth === 0;
       var moveToPos = -1;
-      var nodeIndex = $currentNodePos.index();
       var isLayoutColumnSelected = selection instanceof _state.NodeSelection && selection.node.type.name === 'layoutColumn';
-      if (direction === _consts.DIRECTION.LEFT) {
+      if (direction === _types.DIRECTION.LEFT) {
         if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
           var _api$core, _api$core2;
           var nodeBefore = $currentNodePos.nodeBefore;
@@ -197,7 +201,7 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           var previousNode = grandParent ? grandParent.maybeChild(index - 1) : null;
           moveToPos = $currentNodePos.start() - ((previousNode === null || previousNode === void 0 ? void 0 : previousNode.nodeSize) || 1);
         }
-      } else if (direction === _consts.DIRECTION.RIGHT) {
+      } else if (direction === _types.DIRECTION.RIGHT) {
         if (isTopLevelNode && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
           var _api$core4, _api$core5;
           var endOfDoc = $currentNodePos.end();
@@ -245,14 +249,11 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
           }
           moveToPos = $currentNodePos.after($currentNodePos.depth) + 1;
         }
-      } else if (direction === _consts.DIRECTION.UP) {
+      } else if (direction === _types.DIRECTION.UP) {
         if (isLayoutColumnSelected) {
           moveToPos = $currentNodePos.start() - 1;
         } else {
-          var _nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
-          if (_nodeBefore) {
-            moveToPos = currentNodePos - _nodeBefore.nodeSize;
-          }
+          moveToPos = (0, _moveNodeUtils.getPosWhenMoveNodeUp)($currentNodePos, currentNodePos);
         }
       } else {
         var _endOfDoc = $currentNodePos.end();
@@ -262,11 +263,11 @@ var moveNodeViaShortcut = exports.moveNodeViaShortcut = function moveNodeViaShor
         if (isLayoutColumnSelected) {
           moveToPos = state.selection.$from.end() + 1;
         } else {
-          var nodeAfter = state.doc.nodeAt(nodeAfterPos);
-          if (nodeAfter) {
-            // if not the last node, move to the end of the next node
-            moveToPos = nodeAfterPos + nodeAfter.nodeSize;
-          }
+          moveToPos = (0, _moveNodeUtils.getPosWhenMoveNodeDown)({
+            $currentNodePos: $currentNodePos,
+            nodeAfterPos: nodeAfterPos,
+            tr: state.tr
+          });
         }
       }
       var nodeType = (_state$doc$nodeAt = state.doc.nodeAt(currentNodePos)) === null || _state$doc$nodeAt === void 0 ? void 0 : _state$doc$nodeAt.type.name;

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

@@ -37,7 +37,11 @@ var findParentPosForHandle = function findParentPosForHandle(state) {
   }
 
   // else find closest parent node
-  return (0, _getNestedNodePosition.getNestedNodePosition)(state);
+  return (0, _getNestedNodePosition.getNestedNodePosition)({
+    selection: state.selection,
+    schema: state.schema,
+    resolve: state.doc.resolve.bind(state.doc)
+  });
 };
 var findNextAnchorDecoration = function findNextAnchorDecoration(state) {
   var decorations = (0, _main.getDecorations)(state);

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

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getShouldMoveNode = exports.getPosWhenMoveNodeUp = exports.getPosWhenMoveNodeDown = exports.getCurrentNodePosFromDragHandleSelection = exports.canMoveNodeUpOrDown = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _getNestedNodePosition = require("../../pm-plugins/utils/getNestedNodePosition");
+var getCurrentNodePosFromDragHandleSelection = exports.getCurrentNodePosFromDragHandleSelection = function getCurrentNodePosFromDragHandleSelection(_ref) {
+  var selection = _ref.selection,
+    schema = _ref.schema,
+    resolve = _ref.resolve;
+  var currentNodePos = -1;
+  if ((0, _utils.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, _utils.findTable)(selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) !== null && _findTable$pos !== void 0 ? _findTable$pos : currentNodePos;
+  } else if (!(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) {
+      currentNodePos = (0, _getNestedNodePosition.getNestedNodePosition)({
+        selection: selection,
+        schema: schema,
+        resolve: resolve
+      });
+    }
+  }
+  return currentNodePos;
+};
+var getPosWhenMoveNodeUp = exports.getPosWhenMoveNodeUp = function getPosWhenMoveNodeUp($currentNodePos, currentNodePos) {
+  var nodeIndex = $currentNodePos.index();
+  var nodeBefore = $currentNodePos.depth > 1 && nodeIndex === 0 ? $currentNodePos.node($currentNodePos.depth) : $currentNodePos.nodeBefore;
+  return nodeBefore ? currentNodePos - nodeBefore.nodeSize : -1;
+};
+var getPosWhenMoveNodeDown = exports.getPosWhenMoveNodeDown = function getPosWhenMoveNodeDown(_ref2) {
+  var $currentNodePos = _ref2.$currentNodePos,
+    nodeAfterPos = _ref2.nodeAfterPos,
+    tr = _ref2.tr;
+  var endOfDoc = $currentNodePos.end();
+  if (nodeAfterPos > endOfDoc) {
+    return -1;
+  }
+  var nodeAfter = tr.doc.nodeAt(nodeAfterPos);
+
+  // if not the last node, move to the end of the next node
+  return nodeAfter ? nodeAfterPos + nodeAfter.nodeSize : -1;
+};
+var getShouldMoveNode = exports.getShouldMoveNode = function getShouldMoveNode(_ref3) {
+  var currentNodePos = _ref3.currentNodePos,
+    moveToPos = _ref3.moveToPos,
+    tr = _ref3.tr;
+  // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
+  return moveToPos > -1 && tr.doc.resolve(currentNodePos).depth === tr.doc.resolve(moveToPos).depth;
+};
+var canMoveNodeUpOrDown = exports.canMoveNodeUpOrDown = function canMoveNodeUpOrDown(tr) {
+  var currentNodePos = getCurrentNodePosFromDragHandleSelection({
+    selection: tr.selection,
+    schema: tr.doc.type.schema,
+    resolve: tr.doc.resolve.bind(tr.doc)
+  });
+  if (currentNodePos <= -1) {
+    return {
+      moveUp: false,
+      moveDown: false
+    };
+  }
+  var $currentNodePos = tr.doc.resolve(currentNodePos);
+  var nodeAfterPos = $currentNodePos.posAtIndex($currentNodePos.index() + 1);
+  var moveUpPos = getPosWhenMoveNodeUp($currentNodePos, currentNodePos);
+  var moveDownPos = getPosWhenMoveNodeDown({
+    $currentNodePos: $currentNodePos,
+    nodeAfterPos: nodeAfterPos,
+    tr: tr
+  });
+  return {
+    moveUp: getShouldMoveNode({
+      currentNodePos: currentNodePos,
+      moveToPos: moveUpPos,
+      tr: tr
+    }),
+    moveDown: getShouldMoveNode({
+      currentNodePos: currentNodePos,
+      moveToPos: moveDownPos,
+      tr: tr
+    })
+  };
+};

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

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.boundKeydownHandler = void 0;
 var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _types = require("@atlaskit/editor-common/types");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _moveNode = require("../editor-commands/move-node");
 var _showDragHandle = require("../editor-commands/show-drag-handle");
-var _consts = require("./utils/consts");
 function keymapList(api, formatMessage) {
   var keymapList = {};
   if (api && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873')) {
@@ -24,19 +24,19 @@ function keymapList(api, formatMessage) {
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage), keymapList);
+    _keymaps.dragToMoveUp.common, (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.UP, formatMessage), keymapList);
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage), keymapList);
+    _keymaps.dragToMoveDown.common, (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.DOWN, formatMessage), keymapList);
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.LEFT, formatMessage), keymapList);
+    _keymaps.dragToMoveLeft.common, (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.LEFT, formatMessage), keymapList);
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.RIGHT, formatMessage), keymapList);
+    _keymaps.dragToMoveRight.common, (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.RIGHT, formatMessage), keymapList);
   }
   return keymapList;
 }

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

@@ -239,7 +239,7 @@ var getDecorationAtPos = function getDecorationAtPos(state, decorations, pos, to
   return nodeDecAtActivePos;
 };
 var _apply = exports.apply = function apply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache, resizeObserverWidth, pragmaticCleanup) {
-  var _api$limitedMode, _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
+  var _api$limitedMode, _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging2, _meta$isDragging3, _meta$toggleMenu, _meta$toggleMenu2, _meta$toggleMenu3, _meta$toggleMenu4, _meta$toggleMenu5, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
   var activeNode = currentState.activeNode,
     decorations = currentState.decorations,
     isResizerResizing = currentState.isResizerResizing,
@@ -250,6 +250,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     isDragging = currentState.isDragging,
     isMenuOpen = currentState.isMenuOpen,
     menuTriggerBy = currentState.menuTriggerBy,
+    blockMenuOptions = currentState.blockMenuOptions,
     isPMDragging = currentState.isPMDragging,
     isShiftDown = currentState.isShiftDown,
     lastDragCancelled = currentState.lastDragCancelled,
@@ -540,6 +541,10 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     isDragging: (_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging,
     isMenuOpen: isMenuOpenNew,
     menuTriggerBy: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? (meta === null || meta === void 0 || (_meta$toggleMenu = meta.toggleMenu) === null || _meta$toggleMenu === void 0 ? void 0 : _meta$toggleMenu.anchorName) || menuTriggerBy : undefined,
+    blockMenuOptions: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) ? {
+      canMoveUp: (meta === null || meta === void 0 || (_meta$toggleMenu2 = meta.toggleMenu) === null || _meta$toggleMenu2 === void 0 ? void 0 : _meta$toggleMenu2.moveUp) !== undefined ? meta === null || meta === void 0 || (_meta$toggleMenu3 = meta.toggleMenu) === null || _meta$toggleMenu3 === void 0 ? void 0 : _meta$toggleMenu3.moveUp : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveUp,
+      canMoveDown: (meta === null || meta === void 0 || (_meta$toggleMenu4 = meta.toggleMenu) === null || _meta$toggleMenu4 === void 0 ? void 0 : _meta$toggleMenu4.moveDown) !== undefined ? meta === null || meta === void 0 || (_meta$toggleMenu5 = meta.toggleMenu) === null || _meta$toggleMenu5 === void 0 ? void 0 : _meta$toggleMenu5.moveDown : blockMenuOptions === null || blockMenuOptions === void 0 ? void 0 : blockMenuOptions.canMoveDown
+    } : undefined,
     editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : editorHeight,
     editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : editorWidthLeft,
     editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,

package/dist/cjs/pm-plugins/utils/consts.js

@@ -3,15 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.maxLayoutColumnSupported = exports.MIN_LAYOUT_COLUMN = exports.DIRECTION = void 0;
+exports.maxLayoutColumnSupported = exports.MIN_LAYOUT_COLUMN = void 0;
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
-  DIRECTION["UP"] = "up";
-  DIRECTION["DOWN"] = "down";
-  DIRECTION["LEFT"] = "left";
-  DIRECTION["RIGHT"] = "right";
-  return DIRECTION;
-}({});
 var maxLayoutColumnSupported = exports.maxLayoutColumnSupported = function maxLayoutColumnSupported() {
   return (0, _experiments.editorExperiment)('advanced_layouts', true) ? 5 : 3;
 };

package/dist/cjs/pm-plugins/utils/getNestedNodePosition.js

@@ -6,16 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 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 getNestedNodePosition = exports.getNestedNodePosition = function getNestedNodePosition(_ref) {
+  var selection = _ref.selection,
+    schema = _ref.schema,
+    resolve = _ref.resolve;
   var nestedNodePos = selection.$from.before(1);
   if (selection instanceof _state.TextSelection) {
     nestedNodePos = selection.$from.before();
-    var $pos = state.doc.resolve(nestedNodePos);
+    var $pos = 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.schema.nodes.decisionList])(state.selection);
+    var parentNodeOfSpecificTypes = (0, _utils.findParentNodeOfType)([schema.nodes.bulletList, schema.nodes.orderedList, schema.nodes.blockquote, schema.nodes.taskList, schema.nodes.decisionList])(selection);
     if (parentNodeOfSpecificTypes) {
       var parentNodeType = parentNodeOfSpecificTypes.node.type.name;
       nestedNodePos = ['bulletList', 'orderedList'].includes(parentNodeType) ? $pos.before($pos.depth - 1) : ['blockquote', 'taskList', 'decisionList'].includes(parentNodeType) ? $pos.before() : nestedNodePos;

package/dist/cjs/ui/block-menu-items.js

@@ -8,13 +8,13 @@ exports.menuItemsCallback = exports.getBlockMenuItems = void 0;
 var _react = require("@emotion/react");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _types = require("@atlaskit/editor-common/types");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"));
 var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/core/arrow-right"));
 var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
 var _moveNode = require("../editor-commands/move-node");
-var _consts = require("../pm-plugins/utils/consts");
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /**
  * @jsxRuntime classic
@@ -82,9 +82,9 @@ var getBlockMenuItems = exports.getBlockMenuItems = function getBlockMenuItems(f
 };
 var menuItemsCallback = exports.menuItemsCallback = {
   moveUp: function moveUp(api, formatMessage) {
-    return (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.UP, formatMessage);
+    return (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.UP, formatMessage);
   },
   moveDown: function moveDown(api, formatMessage) {
-    return (0, _moveNode.moveNodeViaShortcut)(api, _consts.DIRECTION.DOWN, formatMessage);
+    return (0, _moveNode.moveNodeViaShortcut)(api, _types.DIRECTION.DOWN, formatMessage);
   }
 };

package/dist/es2019/blockControlsPlugin.js

@@ -5,7 +5,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './editor-commands/move-node';
+import { moveNodeWithBlockMenu } from './editor-commands/move-node-with-block-menu';
 import { moveToLayout } from './editor-commands/move-to-layout';
+import { canMoveNodeUpOrDown } from './editor-commands/utils/move-node-utils';
 import { firstNodeDecPlugin } from './pm-plugins/first-node-dec-plugin';
 import { createInteractionTrackingPlugin, interactionTrackingPluginKey } from './pm-plugins/interaction-tracking/pm-plugin';
 import { createPlugin, key } from './pm-plugins/main';
@@ -80,13 +82,25 @@ export const blockControlsPlugin = ({
         });
         return tr;
       }
+      let toggleMenuMeta = {
+        anchorName: options === null || options === void 0 ? void 0 : options.anchorName
+      };
+      const menuTriggerBy = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.menuTriggerBy;
+      if (options !== null && options !== void 0 && options.anchorName) {
+        const {
+          moveUp,
+          moveDown
+        } = canMoveNodeUpOrDown(tr);
+        toggleMenuMeta = {
+          ...toggleMenuMeta,
+          moveUp,
+          moveDown
+        };
+      }
       tr.setMeta(key, {
         ...currMeta,
-        toggleMenu: {
-          anchorName: options === null || options === void 0 ? void 0 : options.anchorName
-        }
+        toggleMenu: toggleMenuMeta
       });
-      const menuTriggerBy = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.menuTriggerBy;
       if (menuTriggerBy === undefined || !!menuTriggerBy && menuTriggerBy === (options === null || options === void 0 ? void 0 : options.anchorName)) {
         var _api$userIntent, _api$userIntent$share;
         // Toggled from drag handle
@@ -189,25 +203,29 @@ export const blockControlsPlugin = ({
         ...currMeta,
         isSelectedViaDragHandle
       });
+    },
+    moveNodeWithBlockMenu: direction => {
+      return moveNodeWithBlockMenu(api, direction);
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$activeD, _key$getState4, _key$getState$isDragg, _key$getState5, _key$getState$isPMDra, _key$getState6, _key$getState$multiSe, _key$getState7, _key$getState$isShift, _key$getState8, _key$getState$lastDra, _key$getState9, _interactionTrackingP, _key$getState$isSelec, _key$getState0;
+    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$blockMe, _key$getState3, _key$getState$activeN, _key$getState4, _key$getState$activeD, _key$getState5, _key$getState$isDragg, _key$getState6, _key$getState$isPMDra, _key$getState7, _key$getState$multiSe, _key$getState8, _key$getState$isShift, _key$getState9, _key$getState$lastDra, _key$getState0, _interactionTrackingP, _key$getState$isSelec, _key$getState1;
     if (!editorState) {
       return undefined;
     }
     const sharedState = {
       isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
       menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
-      activeNode: (_key$getState$activeN = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
-      activeDropTargetNode: (_key$getState$activeD = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeDropTargetNode) !== null && _key$getState$activeD !== void 0 ? _key$getState$activeD : undefined,
-      isDragging: (_key$getState$isDragg = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
-      isPMDragging: (_key$getState$isPMDra = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
-      multiSelectDnD: (_key$getState$multiSe = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
-      isShiftDown: (_key$getState$isShift = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
-      lastDragCancelled: (_key$getState$lastDra = (_key$getState9 = key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
+      blockMenuOptions: (_key$getState$blockMe = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.blockMenuOptions) !== null && _key$getState$blockMe !== void 0 ? _key$getState$blockMe : undefined,
+      activeNode: (_key$getState$activeN = (_key$getState4 = key.getState(editorState)) === null || _key$getState4 === void 0 ? void 0 : _key$getState4.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
+      activeDropTargetNode: (_key$getState$activeD = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.activeDropTargetNode) !== null && _key$getState$activeD !== void 0 ? _key$getState$activeD : undefined,
+      isDragging: (_key$getState$isDragg = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.isDragging) !== null && _key$getState$isDragg !== void 0 ? _key$getState$isDragg : false,
+      isPMDragging: (_key$getState$isPMDra = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
+      multiSelectDnD: (_key$getState$multiSe = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
+      isShiftDown: (_key$getState$isShift = (_key$getState9 = key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
+      lastDragCancelled: (_key$getState$lastDra = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
       isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
-      isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
+      isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState1 = key.getState(editorState)) === null || _key$getState1 === void 0 ? void 0 : _key$getState1.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
     };
     if (editorExperiment('platform_editor_controls', 'variant1')) {
       var _interactionTrackingP2, _interactionTrackingP3;

package/dist/es2019/editor-commands/move-node-with-block-menu.js

@@ -0,0 +1,39 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { DIRECTION } from '@atlaskit/editor-common/types';
+import { moveNode } from './move-node';
+import { getCurrentNodePosFromDragHandleSelection, getPosWhenMoveNodeDown, getPosWhenMoveNodeUp, getShouldMoveNode } from './utils/move-node-utils';
+export const moveNodeWithBlockMenu = (api, direction) => {
+  return ({
+    tr
+  }) => {
+    // Nodes like lists nest within themselves, we need to find the top most position
+    const currentNodePos = getCurrentNodePosFromDragHandleSelection({
+      selection: tr.selection,
+      schema: tr.doc.type.schema,
+      resolve: tr.doc.resolve.bind(tr.doc)
+    });
+    if (currentNodePos > -1) {
+      const $currentNodePos = tr.doc.resolve(currentNodePos);
+      const nodeAfterPos = $currentNodePos.posAtIndex($currentNodePos.index() + 1);
+      const moveToPos = direction === DIRECTION.UP ? getPosWhenMoveNodeUp($currentNodePos, currentNodePos) : getPosWhenMoveNodeDown({
+        $currentNodePos,
+        nodeAfterPos,
+        tr
+      });
+
+      // only move the node if the destination is at the same depth, not support moving a nested node to a parent node
+      const shouldMoveNode = getShouldMoveNode({
+        currentNodePos,
+        moveToPos,
+        tr
+      });
+      if (shouldMoveNode) {
+        moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.BLOCK_MENU)({
+          tr
+        });
+        tr.scrollIntoView();
+      }
+    }
+    return tr;
+  };
+};