@atlaskit/editor-plugin-block-controls 6.3.4 → 6.3.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 6.3.5
+
+### Patch Changes
+
+- [`d5e5b25fe885a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5e5b25fe885a) -
+  [ux] ED-29226 Open block menu when drag handle is focussed and space or enter key is pressed
+- Updated dependencies
+
 ## 6.3.4
 
 ### Patch Changes

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.moveNodeWithBlockMenu = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _types = require("@atlaskit/editor-common/types");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _moveNode = require("./move-node");
 var _moveNodeUtils = require("./utils/move-node-utils");
 var moveNodeWithBlockMenu = exports.moveNodeWithBlockMenu = function moveNodeWithBlockMenu(api, direction) {
@@ -36,6 +38,13 @@ var moveNodeWithBlockMenu = exports.moveNodeWithBlockMenu = function moveNodeWit
         (0, _moveNode.moveNode)(api)(currentNodePos, moveToPos, _analytics.INPUT_METHOD.BLOCK_MENU)({
           tr: tr
         });
+        if (tr.selection.empty && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+          var nodeAtCurrentPos = tr.doc.nodeAt(currentNodePos);
+          var nodeAfter = tr.doc.nodeAt(moveToPos);
+          var isConsecutiveEmptyLineMove = (nodeAtCurrentPos === null || nodeAtCurrentPos === void 0 ? void 0 : nodeAtCurrentPos.content.size) === 0 && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0;
+          var cursorPos = direction === _types.DIRECTION.UP || direction === _types.DIRECTION.DOWN && isConsecutiveEmptyLineMove ? moveToPos : moveToPos - 1;
+          tr.setSelection(_state.TextSelection.create(tr.doc, cursorPos));
+        }
         tr.scrollIntoView();
       }
     }

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

@@ -6,12 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 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 _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 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 (selection.empty && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+    currentNodePos = selection.$from.pos;
+  }
   if ((0, _utils.isTableSelected)(selection)) {
     var _findTable$pos, _findTable;
     // We only move table node if it's fully selected
@@ -45,6 +49,13 @@ var getPosWhenMoveNodeDown = exports.getPosWhenMoveNodeDown = function getPosWhe
     return -1;
   }
   var nodeAfter = tr.doc.nodeAt(nodeAfterPos);
+  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+    var nodeAtCurrentPos = tr.doc.nodeAt($currentNodePos.pos);
+    // if move empty line down to another empty line, move to the position of the next empty line
+    if ((nodeAtCurrentPos === null || nodeAtCurrentPos === void 0 ? void 0 : nodeAtCurrentPos.content.size) === 0 && nodeAtCurrentPos.type.name !== 'extension' && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0 && nodeAfter.type.name !== 'extension') {
+      return nodeAfterPos;
+    }
+  }
 
   // if not the last node, move to the end of the next node
   return nodeAfter ? nodeAfterPos + nodeAfter.nodeSize : -1;

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

@@ -77,11 +77,28 @@ var newGetSelection = function newGetSelection(tr, start) {
   var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
   var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
+  var blockMenuEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true);
+  var blockMenuEmptyLineEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
 
   // this is a fix for empty paragraph selection - put first to avoid any extra work
-  if (nodeName === 'paragraph' && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
+  if (nodeName === 'paragraph' && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && !blockMenuEnabled) {
     return false;
   }
+  var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
+  var isBlockQuoteEmpty = nodeName === 'blockquote' && (node === null || node === void 0 ? void 0 : node.textContent) === '';
+  var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.textContent) === '';
+
+  // if block menu and empty line format menu are enabled,
+  // we want to set the selection to avoid the selection goes to the top of the document
+  if ((isParagraphHeadingEmpty || isBlockQuoteEmpty || isListEmpty) && blockMenuEnabled && blockMenuEmptyLineEnabled) {
+    return _state.TextSelection.create(tr.doc, start + 1, start + 1);
+  }
+
+  // if block menu and empty line format menu are enabled,
+  // we want to set the selection to avoid the selection goes to the top of the document
+  if (['paragraph', 'heading', 'orderedList', 'bulletList', 'taskList', 'blockquote'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && blockMenuEnabled && blockMenuEmptyLineEnabled) {
+    return _state.TextSelection.create(tr.doc, start + 1, start + 1);
+  }
   var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(tr, start, nodeSize);
   var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(tr, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(tr, start, nodeSize);
   if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||

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

@@ -275,7 +275,7 @@ var getNodeMargins = function getNodeMargins(node) {
   return _consts2.nodeMargins[nodeTypeName] || _consts2.nodeMargins['default'];
 };
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
-  var _api$core2, _api$blockControls4, _api$analytics2, _api$core4;
+  var _api$core2, _api$blockControls4, _api$analytics2, _api$core5, _api$userIntent2;
   var view = _ref.view,
     api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -437,6 +437,35 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
         return tr;
       });
+    } else if ((e.key === 'Enter' || e.key === ' ') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+      var _api$core4;
+      if (document.activeElement !== buttonRef.current) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      setDragHandleSelected(!dragHandleSelected);
+      api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref4) {
+        var _api$blockControls5, _api$userIntent;
+        var tr = _ref4.tr;
+        var startPos = getPos();
+        if (startPos === undefined) {
+          return tr;
+        }
+        tr = (0, _getSelection.selectNode)(tr, startPos, nodeType);
+        api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.toggleBlockMenu({
+          anchorName: anchorName
+        })({
+          tr: tr
+        });
+        api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen')({
+          tr: tr
+        });
+        api === null || api === void 0 || api.blockControls.commands.setSelectedViaDragHandle(true)({
+          tr: tr
+        });
+        return tr;
+      });
     } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
       return pressed;
     })) {
@@ -444,7 +473,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // return focus to editor to resume editing from caret position
       view.focus();
     }
-  }, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, isMultiSelect, view]);
+  }, [getPos, api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions, api === null || api === void 0 ? void 0 : api.blockControls.commands, api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands, isMultiSelect, view, anchorName, dragHandleSelected, nodeType]);
   (0, _react.useEffect)(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -458,13 +487,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref4.nativeSetDragImage;
+        var nativeSetDragImage = _ref5.nativeSetDragImage;
         if (isMultiSelect) {
-          var _api$core5;
-          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref5) {
-            var tr = _ref5.tr;
+          var _api$core6;
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref6) {
+            var tr = _ref6.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
@@ -472,8 +501,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             var oldHandlePosCheck = handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to;
             var newHandlePosCheck = (0, _getSelection.isHandleCorrelatedToSelection)(view.state, tr.selection, handlePos);
             if (!tr.selection.empty && ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_1') ? newHandlePosCheck : oldHandlePosCheck)) {
-              var _api$blockControls5;
-              api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
+              var _api$blockControls6;
+              api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
                 tr: tr
               });
             } else if ((0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_select_node_on_drag')) {
@@ -543,8 +572,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
               };
             }
           },
-          render: function render(_ref6) {
-            var container = _ref6.container;
+          render: function render(_ref7) {
+            var container = _ref7.container;
             var dom = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -576,13 +605,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core6;
+        var _api$core7;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
-          var _api$blockControls$sh3, _api$blockControls6, _api$analytics3;
-          var tr = _ref7.tr;
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref8) {
+          var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
+          var tr = _ref8.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -595,7 +624,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           tr.setMeta('scrollIntoView', false);
@@ -967,15 +996,15 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
-  var view = _ref8.view,
-    api = _ref8.api,
-    formatMessage = _ref8.formatMessage,
-    getPos = _ref8.getPos,
-    anchorName = _ref8.anchorName,
-    nodeType = _ref8.nodeType,
-    handleOptions = _ref8.handleOptions,
-    anchorRectCache = _ref8.anchorRectCache;
+var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref9) {
+  var view = _ref9.view,
+    api = _ref9.api,
+    formatMessage = _ref9.formatMessage,
+    getPos = _ref9.getPos,
+    anchorName = _ref9.anchorName,
+    nodeType = _ref9.nodeType,
+    handleOptions = _ref9.handleOptions,
+    anchorRectCache = _ref9.anchorRectCache;
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api
   }, (0, _react2.jsx)(DragHandle, {

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

@@ -1,5 +1,7 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { DIRECTION } from '@atlaskit/editor-common/types';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { moveNode } from './move-node';
 import { getCurrentNodePosFromDragHandleSelection, getPosWhenMoveNodeDown, getPosWhenMoveNodeUp, getShouldMoveNode } from './utils/move-node-utils';
 export const moveNodeWithBlockMenu = (api, direction) => {
@@ -31,6 +33,13 @@ export const moveNodeWithBlockMenu = (api, direction) => {
         moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.BLOCK_MENU)({
           tr
         });
+        if (tr.selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+          const nodeAtCurrentPos = tr.doc.nodeAt(currentNodePos);
+          const nodeAfter = tr.doc.nodeAt(moveToPos);
+          const isConsecutiveEmptyLineMove = (nodeAtCurrentPos === null || nodeAtCurrentPos === void 0 ? void 0 : nodeAtCurrentPos.content.size) === 0 && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0;
+          const cursorPos = direction === DIRECTION.UP || direction === DIRECTION.DOWN && isConsecutiveEmptyLineMove ? moveToPos : moveToPos - 1;
+          tr.setSelection(TextSelection.create(tr.doc, cursorPos));
+        }
         tr.scrollIntoView();
       }
     }

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

@@ -1,5 +1,6 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNestedNodePosition } from '../../pm-plugins/utils/getNestedNodePosition';
 export const getCurrentNodePosFromDragHandleSelection = ({
   selection,
@@ -7,6 +8,9 @@ export const getCurrentNodePosFromDragHandleSelection = ({
   resolve
 }) => {
   let currentNodePos = -1;
+  if (selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+    currentNodePos = selection.$from.pos;
+  }
   if (isTableSelected(selection)) {
     var _findTable$pos, _findTable;
     // We only move table node if it's fully selected
@@ -41,6 +45,13 @@ export const getPosWhenMoveNodeDown = ({
     return -1;
   }
   const nodeAfter = tr.doc.nodeAt(nodeAfterPos);
+  if (expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+    const nodeAtCurrentPos = tr.doc.nodeAt($currentNodePos.pos);
+    // if move empty line down to another empty line, move to the position of the next empty line
+    if ((nodeAtCurrentPos === null || nodeAtCurrentPos === void 0 ? void 0 : nodeAtCurrentPos.content.size) === 0 && nodeAtCurrentPos.type.name !== 'extension' && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0 && nodeAfter.type.name !== 'extension') {
+      return nodeAfterPos;
+    }
+  }
 
   // if not the last node, move to the end of the next node
   return nodeAfter ? nodeAfterPos + nodeAfter.nodeSize : -1;

package/dist/es2019/pm-plugins/utils/getSelection.js

@@ -72,11 +72,28 @@ const newGetSelection = (tr, start) => {
   const isNodeSelection = node && NodeSelection.isSelectable(node);
   const nodeSize = node ? node.nodeSize : 1;
   const nodeName = node === null || node === void 0 ? void 0 : node.type.name;
+  const blockMenuEnabled = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true);
+  const blockMenuEmptyLineEnabled = expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
 
   // this is a fix for empty paragraph selection - put first to avoid any extra work
-  if (nodeName === 'paragraph' && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
+  if (nodeName === 'paragraph' && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && !blockMenuEnabled) {
     return false;
   }
+  const isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
+  const isBlockQuoteEmpty = nodeName === 'blockquote' && (node === null || node === void 0 ? void 0 : node.textContent) === '';
+  const isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.textContent) === '';
+
+  // if block menu and empty line format menu are enabled,
+  // we want to set the selection to avoid the selection goes to the top of the document
+  if ((isParagraphHeadingEmpty || isBlockQuoteEmpty || isListEmpty) && blockMenuEnabled && blockMenuEmptyLineEnabled) {
+    return TextSelection.create(tr.doc, start + 1, start + 1);
+  }
+
+  // if block menu and empty line format menu are enabled,
+  // we want to set the selection to avoid the selection goes to the top of the document
+  if (['paragraph', 'heading', 'orderedList', 'bulletList', 'taskList', 'blockquote'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && blockMenuEnabled && blockMenuEmptyLineEnabled) {
+    return TextSelection.create(tr.doc, start + 1, start + 1);
+  }
   const isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(tr, start, nodeSize);
   const isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(tr, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(tr, start, nodeSize);
   if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||

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

@@ -280,7 +280,7 @@ export const DragHandle = ({
   isTopLevelNode = true,
   anchorRectCache
 }) => {
-  var _api$core2, _api$blockControls4, _api$analytics2, _api$core4;
+  var _api$core2, _api$blockControls4, _api$analytics2, _api$core5, _api$userIntent2;
   const buttonRef = useRef(null);
   const [dragHandleSelected, setDragHandleSelected] = useState(false);
   const [dragHandleDisabled, setDragHandleDisabled] = useState(false);
@@ -418,12 +418,42 @@ export const DragHandle = ({
         });
         return tr;
       });
+    } else if ((e.key === 'Enter' || e.key === ' ') && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+      var _api$core4;
+      if (document.activeElement !== buttonRef.current) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      setDragHandleSelected(!dragHandleSelected);
+      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$blockControls5, _api$userIntent;
+        const startPos = getPos();
+        if (startPos === undefined) {
+          return tr;
+        }
+        tr = selectNode(tr, startPos, nodeType);
+        api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu({
+          anchorName
+        })({
+          tr
+        });
+        api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen')({
+          tr
+        });
+        api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(true)({
+          tr
+        });
+        return tr;
+      });
     } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(pressed => pressed)) {
       // If not trying to press shortcut keys,
       // return focus to editor to resume editing from caret position
       view.focus();
     }
-  }, [getPos, api === null || api === void 0 ? void 0 : (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, isMultiSelect, view]);
+  }, [getPos, api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions, api === null || api === void 0 ? void 0 : api.blockControls.commands, api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands, isMultiSelect, view, anchorName, dragHandleSelected, nodeType]);
   useEffect(() => {
     const element = buttonRef.current;
     if (!element) {
@@ -440,8 +470,8 @@ export const DragHandle = ({
       }) => {
         var _api$blockControls$sh2;
         if (isMultiSelect) {
-          var _api$core5;
-          api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
+          var _api$core6;
+          api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions.execute(({
             tr
           }) => {
             const handlePos = getPos();
@@ -451,8 +481,8 @@ export const DragHandle = ({
             const oldHandlePosCheck = handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to;
             const newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
             if (!tr.selection.empty && (fg('platform_editor_elements_dnd_multi_select_patch_1') ? newHandlePosCheck : oldHandlePosCheck)) {
-              var _api$blockControls5;
-              api === null || api === void 0 ? void 0 : (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.setMultiSelectPositions()({
+              var _api$blockControls6;
+              api === null || api === void 0 ? void 0 : (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.setMultiSelectPositions()({
                 tr
               });
             } else if (fg('platform_editor_elements_dnd_select_node_on_drag')) {
@@ -560,14 +590,14 @@ export const DragHandle = ({
         });
       },
       onDragStart() {
-        var _api$core6;
+        var _api$core7;
         if (start === undefined) {
           return;
         }
-        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$core7 = api.core) === null || _api$core7 === void 0 ? void 0 : _api$core7.actions.execute(({
           tr
         }) => {
-          var _api$blockControls$sh3, _api$blockControls6, _api$analytics3;
+          var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
           let nodeTypes, hasSelectedMultipleNodes;
           const resolvedMovingNode = tr.doc.resolve(start);
           const maybeNode = resolvedMovingNode.nodeAfter;
@@ -580,7 +610,7 @@ export const DragHandle = ({
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 ? void 0 : (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 ? void 0 : (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 ? void 0 : _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr
           });
           tr.setMeta('scrollIntoView', false);

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

@@ -1,5 +1,7 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { DIRECTION } from '@atlaskit/editor-common/types';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { moveNode } from './move-node';
 import { getCurrentNodePosFromDragHandleSelection, getPosWhenMoveNodeDown, getPosWhenMoveNodeUp, getShouldMoveNode } from './utils/move-node-utils';
 export var moveNodeWithBlockMenu = function moveNodeWithBlockMenu(api, direction) {
@@ -30,6 +32,13 @@ export var moveNodeWithBlockMenu = function moveNodeWithBlockMenu(api, direction
         moveNode(api)(currentNodePos, moveToPos, INPUT_METHOD.BLOCK_MENU)({
           tr: tr
         });
+        if (tr.selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+          var nodeAtCurrentPos = tr.doc.nodeAt(currentNodePos);
+          var nodeAfter = tr.doc.nodeAt(moveToPos);
+          var isConsecutiveEmptyLineMove = (nodeAtCurrentPos === null || nodeAtCurrentPos === void 0 ? void 0 : nodeAtCurrentPos.content.size) === 0 && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0;
+          var cursorPos = direction === DIRECTION.UP || direction === DIRECTION.DOWN && isConsecutiveEmptyLineMove ? moveToPos : moveToPos - 1;
+          tr.setSelection(TextSelection.create(tr.doc, cursorPos));
+        }
         tr.scrollIntoView();
       }
     }

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

@@ -1,11 +1,15 @@
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNestedNodePosition } from '../../pm-plugins/utils/getNestedNodePosition';
 export var getCurrentNodePosFromDragHandleSelection = function getCurrentNodePosFromDragHandleSelection(_ref) {
   var selection = _ref.selection,
     schema = _ref.schema,
     resolve = _ref.resolve;
   var currentNodePos = -1;
+  if (selection.empty && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+    currentNodePos = selection.$from.pos;
+  }
   if (isTableSelected(selection)) {
     var _findTable$pos, _findTable;
     // We only move table node if it's fully selected
@@ -39,6 +43,13 @@ export var getPosWhenMoveNodeDown = function getPosWhenMoveNodeDown(_ref2) {
     return -1;
   }
   var nodeAfter = tr.doc.nodeAt(nodeAfterPos);
+  if (expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true)) {
+    var nodeAtCurrentPos = tr.doc.nodeAt($currentNodePos.pos);
+    // if move empty line down to another empty line, move to the position of the next empty line
+    if ((nodeAtCurrentPos === null || nodeAtCurrentPos === void 0 ? void 0 : nodeAtCurrentPos.content.size) === 0 && nodeAtCurrentPos.type.name !== 'extension' && (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.content.size) === 0 && nodeAfter.type.name !== 'extension') {
+      return nodeAfterPos;
+    }
+  }
 
   // if not the last node, move to the end of the next node
   return nodeAfter ? nodeAfterPos + nodeAfter.nodeSize : -1;

package/dist/esm/pm-plugins/utils/getSelection.js

@@ -71,11 +71,28 @@ var newGetSelection = function newGetSelection(tr, start) {
   var isNodeSelection = node && NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
   var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
+  var blockMenuEnabled = expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true);
+  var blockMenuEmptyLineEnabled = expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
 
   // this is a fix for empty paragraph selection - put first to avoid any extra work
-  if (nodeName === 'paragraph' && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0) {
+  if (nodeName === 'paragraph' && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && !blockMenuEnabled) {
     return false;
   }
+  var isParagraphHeadingEmpty = ['paragraph', 'heading'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0;
+  var isBlockQuoteEmpty = nodeName === 'blockquote' && (node === null || node === void 0 ? void 0 : node.textContent) === '';
+  var isListEmpty = ['orderedList', 'bulletList', 'taskList'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.textContent) === '';
+
+  // if block menu and empty line format menu are enabled,
+  // we want to set the selection to avoid the selection goes to the top of the document
+  if ((isParagraphHeadingEmpty || isBlockQuoteEmpty || isListEmpty) && blockMenuEnabled && blockMenuEmptyLineEnabled) {
+    return TextSelection.create(tr.doc, start + 1, start + 1);
+  }
+
+  // if block menu and empty line format menu are enabled,
+  // we want to set the selection to avoid the selection goes to the top of the document
+  if (['paragraph', 'heading', 'orderedList', 'bulletList', 'taskList', 'blockquote'].includes(nodeName || '') && tr.selection.empty && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && blockMenuEnabled && blockMenuEmptyLineEnabled) {
+    return TextSelection.create(tr.doc, start + 1, start + 1);
+  }
   var isBlockQuoteWithMediaOrExtension = nodeName === 'blockquote' && isNodeWithMediaOrExtension(tr, start, nodeSize);
   var isListWithMediaOrExtension = nodeName === 'bulletList' && isNodeWithMediaOrExtension(tr, start, nodeSize) || nodeName === 'orderedList' && isNodeWithMediaOrExtension(tr, start, nodeSize);
   if (isNodeSelection && nodeName !== 'blockquote' || isListWithMediaOrExtension || isBlockQuoteWithMediaOrExtension ||

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

@@ -272,7 +272,7 @@ var getNodeMargins = function getNodeMargins(node) {
   return nodeMargins[nodeTypeName] || nodeMargins['default'];
 };
 export var DragHandle = function DragHandle(_ref) {
-  var _api$core2, _api$blockControls4, _api$analytics2, _api$core4;
+  var _api$core2, _api$blockControls4, _api$analytics2, _api$core5, _api$userIntent2;
   var view = _ref.view,
     api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -434,6 +434,35 @@ export var DragHandle = function DragHandle(_ref) {
         });
         return tr;
       });
+    } else if ((e.key === 'Enter' || e.key === ' ') && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
+      var _api$core4;
+      if (document.activeElement !== buttonRef.current) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      setDragHandleSelected(!dragHandleSelected);
+      api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref4) {
+        var _api$blockControls5, _api$userIntent;
+        var tr = _ref4.tr;
+        var startPos = getPos();
+        if (startPos === undefined) {
+          return tr;
+        }
+        tr = selectNode(tr, startPos, nodeType);
+        api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.toggleBlockMenu({
+          anchorName: anchorName
+        })({
+          tr: tr
+        });
+        api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen')({
+          tr: tr
+        });
+        api === null || api === void 0 || api.blockControls.commands.setSelectedViaDragHandle(true)({
+          tr: tr
+        });
+        return tr;
+      });
     } else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
       return pressed;
     })) {
@@ -441,7 +470,7 @@ export var DragHandle = function DragHandle(_ref) {
       // return focus to editor to resume editing from caret position
       view.focus();
     }
-  }, [getPos, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, isMultiSelect, view]);
+  }, [getPos, api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions, api === null || api === void 0 ? void 0 : api.blockControls.commands, api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands, isMultiSelect, view, anchorName, dragHandleSelected, nodeType]);
   useEffect(function () {
     var element = buttonRef.current;
     if (!element) {
@@ -455,13 +484,13 @@ export var DragHandle = function DragHandle(_ref) {
           start: start
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+      onGenerateDragPreview: function onGenerateDragPreview(_ref5) {
         var _api$blockControls$sh2;
-        var nativeSetDragImage = _ref4.nativeSetDragImage;
+        var nativeSetDragImage = _ref5.nativeSetDragImage;
         if (isMultiSelect) {
-          var _api$core5;
-          api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref5) {
-            var tr = _ref5.tr;
+          var _api$core6;
+          api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref6) {
+            var tr = _ref6.tr;
             var handlePos = getPos();
             if (typeof handlePos !== 'number') {
               return tr;
@@ -469,8 +498,8 @@ export var DragHandle = function DragHandle(_ref) {
             var oldHandlePosCheck = handlePos >= tr.selection.$from.start() - 1 && handlePos <= tr.selection.to;
             var newHandlePosCheck = isHandleCorrelatedToSelection(view.state, tr.selection, handlePos);
             if (!tr.selection.empty && (fg('platform_editor_elements_dnd_multi_select_patch_1') ? newHandlePosCheck : oldHandlePosCheck)) {
-              var _api$blockControls5;
-              api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 || _api$blockControls5.commands.setMultiSelectPositions()({
+              var _api$blockControls6;
+              api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setMultiSelectPositions()({
                 tr: tr
               });
             } else if (fg('platform_editor_elements_dnd_select_node_on_drag')) {
@@ -540,8 +569,8 @@ export var DragHandle = function DragHandle(_ref) {
               };
             }
           },
-          render: function render(_ref6) {
-            var container = _ref6.container;
+          render: function render(_ref7) {
+            var container = _ref7.container;
             var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(anchorName, "\"]"));
             if (!dom) {
               return;
@@ -573,13 +602,13 @@ export var DragHandle = function DragHandle(_ref) {
         });
       },
       onDragStart: function onDragStart() {
-        var _api$core6;
+        var _api$core7;
         if (start === undefined) {
           return;
         }
-        api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 || _api$core6.actions.execute(function (_ref7) {
-          var _api$blockControls$sh3, _api$blockControls6, _api$analytics3;
-          var tr = _ref7.tr;
+        api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref8) {
+          var _api$blockControls$sh3, _api$blockControls7, _api$analytics3;
+          var tr = _ref8.tr;
           var nodeTypes, hasSelectedMultipleNodes;
           var resolvedMovingNode = tr.doc.resolve(start);
           var maybeNode = resolvedMovingNode.nodeAfter;
@@ -592,7 +621,7 @@ export var DragHandle = function DragHandle(_ref) {
             nodeTypes = maybeNode === null || maybeNode === void 0 ? void 0 : maybeNode.type.name;
             hasSelectedMultipleNodes = false;
           }
-          api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 || _api$blockControls6.commands.setNodeDragged(getPos, anchorName, nodeType)({
+          api === null || api === void 0 || (_api$blockControls7 = api.blockControls) === null || _api$blockControls7 === void 0 || _api$blockControls7.commands.setNodeDragged(getPos, anchorName, nodeType)({
             tr: tr
           });
           tr.setMeta('scrollIntoView', false);
@@ -964,15 +993,15 @@ export var DragHandle = function DragHandle(_ref) {
   var render = isTooltip ? buttonWithTooltip() : renderButton();
   return editorExperiment('platform_editor_controls', 'variant1') ? stickyRender : render;
 };
-export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
-  var view = _ref8.view,
-    api = _ref8.api,
-    formatMessage = _ref8.formatMessage,
-    getPos = _ref8.getPos,
-    anchorName = _ref8.anchorName,
-    nodeType = _ref8.nodeType,
-    handleOptions = _ref8.handleOptions,
-    anchorRectCache = _ref8.anchorRectCache;
+export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref9) {
+  var view = _ref9.view,
+    api = _ref9.api,
+    formatMessage = _ref9.formatMessage,
+    getPos = _ref9.getPos,
+    anchorName = _ref9.anchorName,
+    nodeType = _ref9.nodeType,
+    handleOptions = _ref9.handleOptions,
+    anchorRectCache = _ref9.anchorRectCache;
   return jsx(VisibilityContainer, {
     api: api
   }, jsx(DragHandle, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "6.3.4",
+	"version": "6.3.5",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -50,9 +50,9 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
-		"@atlaskit/primitives": "^14.14.0",
+		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.25.0",
+		"@atlaskit/tmp-editor-statsig": "^12.27.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.10.0",
+		"@atlaskit/editor-common": "^109.11.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"