@atlaskit/editor-plugin-block-controls 3.9.1 → 3.10.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.10.0
+
+### Minor Changes
+
+- [#139189](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139189)
+  [`33e0a9b6291ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/33e0a9b6291ae) -
+  [ux] When table is selected via drag handle, we show Table floating controls toolbar. If the table
+  selected via other means, we show the Text Formatting toolbar.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.9.2
+
+### Patch Changes
+
+- [#139175](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139175)
+  [`6274734c42470`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6274734c42470) -
+  Allow drag handle to display for empty lines when platform_editor_controls is enabled
+
 ## 3.9.1
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -164,10 +164,19 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           }));
           return tr;
         };
+      },
+      setSelectedViaDragHandle: function setSelectedViaDragHandle(isSelectedViaDragHandle) {
+        return function (_ref7) {
+          var tr = _ref7.tr;
+          var currMeta = tr.getMeta(_main.key);
+          return tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
+            isSelectedViaDragHandle: isSelectedViaDragHandle
+          }));
+        };
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP, _key$getState$isSelec, _key$getState9;
       if (!editorState) {
         return undefined;
       }
@@ -180,14 +189,15 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
         isShiftDown: (_key$getState$isShift = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
         lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.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
+        isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
+        isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState9 = _main.key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
     },
-    contentComponent: function contentComponent(_ref7) {
-      var editorView = _ref7.editorView,
-        popupsMountPoint = _ref7.popupsMountPoint,
-        popupsBoundariesElement = _ref7.popupsBoundariesElement,
-        popupsScrollableElement = _ref7.popupsScrollableElement;
+    contentComponent: function contentComponent(_ref8) {
+      var editorView = _ref8.editorView,
+        popupsMountPoint = _ref8.popupsMountPoint,
+        popupsBoundariesElement = _ref8.popupsBoundariesElement,
+        popupsScrollableElement = _ref8.popupsScrollableElement;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? /*#__PURE__*/_react.default.createElement(_blockMenu.default, {
         editorView: editorView,
         mountPoint: popupsMountPoint,

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

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseDown = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
   return function (view, event) {
-    if (view.editable) {
+    if (!(event.target instanceof HTMLElement)) {
       return false;
     }
-    if (event.target instanceof HTMLElement) {
+    if (!view.editable) {
       var _rootNode$type$name, _rootNode$type$name2;
       var targetPos = view.posAtDOM(event.target, 0);
       // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
@@ -19,6 +20,9 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(api) {
         return false;
       }
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+    } else if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5')) {
+      var isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle]') !== null;
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
     }
     return false;
   };

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

@@ -166,7 +166,8 @@ var initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false,
   multiSelectDnD: undefined,
-  lastDragCancelled: false
+  lastDragCancelled: false,
+  isSelectedViaDragHandle: false
 };
 var getDecorations = exports.getDecorations = function getDecorations(state) {
   var _key$getState;
@@ -199,7 +200,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     menuTriggerBy = currentState.menuTriggerBy,
     isPMDragging = currentState.isPMDragging,
     isShiftDown = currentState.isShiftDown,
-    lastDragCancelled = currentState.lastDragCancelled;
+    lastDragCancelled = currentState.lastDragCancelled,
+    isSelectedViaDragHandle = currentState.isSelectedViaDragHandle;
   var isActiveNodeDeleted = false;
   var _getTrMetadata = (0, _transactions.getTrMetadata)(tr),
     from = _getTrMetadata.from,
@@ -409,6 +411,7 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
   } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
     isMenuOpenNew = !isMenuOpen;
   }
+  var isSelectedViaDragHandleNew = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5') ? meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle : isSelectedViaDragHandle;
   return {
     decorations: decorations,
     activeNode: newActiveNode,
@@ -423,7 +426,8 @@ var _apply = exports.apply = function apply(api, formatMessage, tr, currentState
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
     multiSelectDnD: multiSelectDnD,
     isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
-    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled
+    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled,
+    isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
 var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, nodeViewPortalProviderAPI) {
@@ -580,6 +584,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
                 return true;
               }
             }
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5')) {
+              var isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
+              api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5')) {
+              var _api$blockControls$sh;
+              if (api !== null && api !== void 0 && (_api$blockControls$sh = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh !== void 0 && _api$blockControls$sh.isSelectedViaDragHandle) {
+                api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
+              }
+            }
             if (!event.repeat && event.shiftKey && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_shift_click_select')) {
               view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
                 isShiftDown: true
@@ -607,8 +621,17 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
                 return true;
               }
             }
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5')) {
+              var _isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
+              api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(_isDragHandle));
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5')) {
+              var _api$blockControls$sh2;
+              if (api !== null && api !== void 0 && (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh2 !== void 0 && _api$blockControls$sh2.isSelectedViaDragHandle) {
+                api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
+              }
+            }
           }
-          return false;
         },
         keyup: function keyup(view, event) {
           if (!event.repeat && event.key === 'Shift') {

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setCursorPositionAtMovedNode = exports.selectNode = exports.rootTaskListDepth = exports.rootListDepth = exports.isHandleCorrelatedToSelection = exports.getSelection = exports.getInlineNodePos = void 0;
-var _selection = require("@atlaskit/editor-common/selection");
+var _selection2 = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var getInlineNodePos = exports.getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
   var $startPos = tr.doc.resolve(start);
   // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -51,7 +52,7 @@ var isNodeWithMediaOrExtension = function isNodeWithMediaOrExtension(tr, start,
   });
   return hasMediaOrExtension;
 };
-var getSelection = exports.getSelection = function getSelection(tr, start) {
+var oldGetSelection = function oldGetSelection(tr, start) {
   var node = tr.doc.nodeAt(start);
   var isNodeSelection = node && _state.NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
@@ -81,12 +82,53 @@ var getSelection = exports.getSelection = function getSelection(tr, start) {
     return new _state.TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
   }
 };
+var newGetSelection = function newGetSelection(tr, start) {
+  var node = tr.doc.nodeAt(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;
+
+  // 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) {
+    return false;
+  }
+  var isBlockQuoteWithMedia = nodeName === 'blockquote' && isNodeWithMedia(tr, start, nodeSize);
+  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 && (0, _platformFeatureFlags.fg)('platform_editor_non_macros_copy_and_paste_fix') || ((0, _platformFeatureFlags.fg)('platform_editor_non_macros_copy_and_paste_fix') ? isBlockQuoteWithMediaOrExtension : isBlockQuoteWithMedia) ||
+  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
+  ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
+    return new _state.NodeSelection(tr.doc.resolve(start));
+  }
+
+  // if mediaGroup only has a single child, we want to select the child
+  if (nodeName === 'mediaGroup') {
+    var $mediaStartPos = tr.doc.resolve(start + 1);
+    return new _state.NodeSelection($mediaStartPos);
+  }
+  if (nodeName === 'taskList' && (0, _platformFeatureFlags.fg)('platform_editor_elements_dnd_multi_select_patch_1')) {
+    return _state.TextSelection.create(tr.doc, start, start + nodeSize);
+  }
+  var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
+    inlineNodePos = _getInlineNodePos2.inlineNodePos,
+    inlineNodeEndPos = _getInlineNodePos2.inlineNodeEndPos;
+  return new _state.TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
+};
+var getSelection = exports.getSelection = function getSelection(tr, start) {
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility')) {
+    return newGetSelection(tr, start);
+  }
+  return oldGetSelection(tr, start);
+};
 var selectNode = exports.selectNode = function selectNode(tr, start, nodeType) {
   // For table, we need to do cell selection instead of node selection
   if (nodeType === 'table') {
     tr = (0, _utils2.selectTableClosestToPos)(tr, tr.doc.resolve(start + 1));
-  } else {
-    tr.setSelection(getSelection(tr, start));
+    return tr;
+  }
+  var selection = getSelection(tr, start);
+  if (selection) {
+    tr.setSelection(selection);
   }
   return tr;
 };
@@ -98,12 +140,20 @@ var setCursorPositionAtMovedNode = exports.setCursorPositionAtMovedNode = functi
   // decisionList node is not selectable, but we want to select the whole node not just text
   // blockQuote is selectable, but we want to set cursor at the inline end Pos instead of the gap cursor as this causes jittering post drop
   if (isNodeSelection && node.type.name !== 'blockquote' || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
-    selection = new _selection.GapCursorSelection(tr.doc.resolve(start + node.nodeSize), _selection.Side.RIGHT);
-  } else {
-    var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
-      inlineNodeEndPos = _getInlineNodePos2.inlineNodeEndPos;
-    selection = new _state.TextSelection(tr.doc.resolve(inlineNodeEndPos));
+    selection = new _selection2.GapCursorSelection(tr.doc.resolve(start + node.nodeSize), _selection2.Side.RIGHT);
+    tr.setSelection(selection);
+    return tr;
+  }
+
+  // this is a fix for empty paragraph selection - can safely use start position as the paragraph is empty
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility')) {
+    var _selection = new _state.TextSelection(tr.doc.resolve(start));
+    tr.setSelection(_selection);
+    return tr;
   }
+  var _getInlineNodePos3 = getInlineNodePos(tr, start, nodeSize),
+    inlineNodeEndPos = _getInlineNodePos3.inlineNodeEndPos;
+  selection = new _state.TextSelection(tr.doc.resolve(inlineNodeEndPos));
   tr.setSelection(selection);
   return tr;
 };

package/dist/cjs/ui/global-styles.js

@@ -8,6 +8,7 @@ exports.GlobalStylesWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 /**
@@ -188,6 +189,6 @@ var blockCardWithoutLayout = (0, _react.css)({
 });
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
   return (0, _react.jsx)(_react.Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, withAnchorNameZindexStyle,,]
   });
 };

package/dist/es2019/blockControlsPlugin.js

@@ -155,10 +155,19 @@ export const blockControlsPlugin = ({
         multiSelectDnD
       });
       return tr;
+    },
+    setSelectedViaDragHandle: isSelectedViaDragHandle => ({
+      tr
+    }) => {
+      const currMeta = tr.getMeta(key);
+      return tr.setMeta(key, {
+        ...currMeta,
+        isSelectedViaDragHandle
+      });
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP;
+    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP, _key$getState$isSelec, _key$getState9;
     if (!editorState) {
       return undefined;
     }
@@ -171,7 +180,8 @@ export const blockControlsPlugin = ({
       multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
       isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
       lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
-      isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing
+      isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
+      isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState9 = key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
     };
   },
   contentComponent({

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

@@ -1,8 +1,9 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 export const handleMouseDown = api => (view, event) => {
-  if (view.editable) {
+  if (!(event.target instanceof HTMLElement)) {
     return false;
   }
-  if (event.target instanceof HTMLElement) {
+  if (!view.editable) {
     var _rootNode$type$name, _rootNode$type$name2;
     const targetPos = view.posAtDOM(event.target, 0);
     // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
@@ -12,6 +13,9 @@ export const handleMouseDown = api => (view, event) => {
       return false;
     }
     api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+  } else if (fg('platform_editor_controls_patch_5')) {
+    const isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle]') !== null;
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
   }
   return false;
 };

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

@@ -163,7 +163,8 @@ const initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false,
   multiSelectDnD: undefined,
-  lastDragCancelled: false
+  lastDragCancelled: false,
+  isSelectedViaDragHandle: false
 };
 export const getDecorations = state => {
   var _key$getState;
@@ -197,7 +198,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     menuTriggerBy,
     isPMDragging,
     isShiftDown,
-    lastDragCancelled
+    lastDragCancelled,
+    isSelectedViaDragHandle
   } = currentState;
   let isActiveNodeDeleted = false;
   const {
@@ -407,6 +409,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
   } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
     isMenuOpenNew = !isMenuOpen;
   }
+  const isSelectedViaDragHandleNew = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5') ? meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle : isSelectedViaDragHandle;
   return {
     decorations,
     activeNode: newActiveNode,
@@ -421,7 +424,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
     multiSelectDnD,
     isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
-    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled
+    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled,
+    isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
 export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
@@ -585,6 +589,16 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
                 return true;
               }
             }
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+              const isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
+              api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+              var _api$blockControls$sh;
+              if (api !== null && api !== void 0 && (_api$blockControls$sh = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh !== void 0 && _api$blockControls$sh.isSelectedViaDragHandle) {
+                api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
+              }
+            }
             if (!event.repeat && event.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
               view.dispatch(view.state.tr.setMeta(key, {
                 ...view.state.tr.getMeta(key),
@@ -614,8 +628,17 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
                 return true;
               }
             }
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+              const isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
+              api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+              var _api$blockControls$sh2;
+              if (api !== null && api !== void 0 && (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh2 !== void 0 && _api$blockControls$sh2.isSelectedViaDragHandle) {
+                api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
+              }
+            }
           }
-          return false;
         },
         keyup(view, event) {
           if (!event.repeat && event.key === 'Shift') {

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

@@ -3,6 +3,7 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const getInlineNodePos = (tr, start, nodeSize) => {
   const $startPos = tr.doc.resolve(start);
   // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -45,7 +46,7 @@ const isNodeWithMediaOrExtension = (tr, start, nodeSize) => {
   });
   return hasMediaOrExtension;
 };
-export const getSelection = (tr, start) => {
+const oldGetSelection = (tr, start) => {
   const node = tr.doc.nodeAt(start);
   const isNodeSelection = node && NodeSelection.isSelectable(node);
   const nodeSize = node ? node.nodeSize : 1;
@@ -76,12 +77,54 @@ export const getSelection = (tr, start) => {
     return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
   }
 };
+const newGetSelection = (tr, start) => {
+  const node = tr.doc.nodeAt(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;
+
+  // 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) {
+    return false;
+  }
+  const isBlockQuoteWithMedia = nodeName === 'blockquote' && isNodeWithMedia(tr, start, nodeSize);
+  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 && fg('platform_editor_non_macros_copy_and_paste_fix') || (fg('platform_editor_non_macros_copy_and_paste_fix') ? isBlockQuoteWithMediaOrExtension : isBlockQuoteWithMedia) ||
+  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
+  ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
+    return new NodeSelection(tr.doc.resolve(start));
+  }
+
+  // if mediaGroup only has a single child, we want to select the child
+  if (nodeName === 'mediaGroup') {
+    const $mediaStartPos = tr.doc.resolve(start + 1);
+    return new NodeSelection($mediaStartPos);
+  }
+  if (nodeName === 'taskList' && fg('platform_editor_elements_dnd_multi_select_patch_1')) {
+    return TextSelection.create(tr.doc, start, start + nodeSize);
+  }
+  const {
+    inlineNodePos,
+    inlineNodeEndPos
+  } = getInlineNodePos(tr, start, nodeSize);
+  return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
+};
+export const getSelection = (tr, start) => {
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility')) {
+    return newGetSelection(tr, start);
+  }
+  return oldGetSelection(tr, start);
+};
 export const selectNode = (tr, start, nodeType) => {
   // For table, we need to do cell selection instead of node selection
   if (nodeType === 'table') {
     tr = selectTableClosestToPos(tr, tr.doc.resolve(start + 1));
-  } else {
-    tr.setSelection(getSelection(tr, start));
+    return tr;
+  }
+  const selection = getSelection(tr, start);
+  if (selection) {
+    tr.setSelection(selection);
   }
   return tr;
 };
@@ -94,12 +137,20 @@ export const setCursorPositionAtMovedNode = (tr, start) => {
   // blockQuote is selectable, but we want to set cursor at the inline end Pos instead of the gap cursor as this causes jittering post drop
   if (isNodeSelection && node.type.name !== 'blockquote' || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
     selection = new GapCursorSelection(tr.doc.resolve(start + node.nodeSize), Side.RIGHT);
-  } else {
-    const {
-      inlineNodeEndPos
-    } = getInlineNodePos(tr, start, nodeSize);
-    selection = new TextSelection(tr.doc.resolve(inlineNodeEndPos));
+    tr.setSelection(selection);
+    return tr;
+  }
+
+  // this is a fix for empty paragraph selection - can safely use start position as the paragraph is empty
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility')) {
+    const selection = new TextSelection(tr.doc.resolve(start));
+    tr.setSelection(selection);
+    return tr;
   }
+  const {
+    inlineNodeEndPos
+  } = getInlineNodePos(tr, start, nodeSize);
+  selection = new TextSelection(tr.doc.resolve(inlineNodeEndPos));
   tr.setSelection(selection);
   return tr;
 };

package/dist/es2019/ui/global-styles.js

@@ -5,6 +5,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 
@@ -218,6 +219,6 @@ const blockCardWithoutLayout = css({
 });
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, withAnchorNameZindexStyle,,]
   });
 };

package/dist/esm/blockControlsPlugin.js

@@ -157,10 +157,19 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           }));
           return tr;
         };
+      },
+      setSelectedViaDragHandle: function setSelectedViaDragHandle(isSelectedViaDragHandle) {
+        return function (_ref7) {
+          var tr = _ref7.tr;
+          var currMeta = tr.getMeta(key);
+          return tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
+            isSelectedViaDragHandle: isSelectedViaDragHandle
+          }));
+        };
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP, _key$getState$isSelec, _key$getState9;
       if (!editorState) {
         return undefined;
       }
@@ -173,14 +182,15 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
         isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
         lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
-        isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing
+        isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
+        isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState9 = key.getState(editorState)) === null || _key$getState9 === void 0 ? void 0 : _key$getState9.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
     },
-    contentComponent: function contentComponent(_ref7) {
-      var editorView = _ref7.editorView,
-        popupsMountPoint = _ref7.popupsMountPoint,
-        popupsBoundariesElement = _ref7.popupsBoundariesElement,
-        popupsScrollableElement = _ref7.popupsScrollableElement;
+    contentComponent: function contentComponent(_ref8) {
+      var editorView = _ref8.editorView,
+        popupsMountPoint = _ref8.popupsMountPoint,
+        popupsBoundariesElement = _ref8.popupsBoundariesElement,
+        popupsScrollableElement = _ref8.popupsScrollableElement;
       return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('platform_editor_controls', 'variant1') ? /*#__PURE__*/React.createElement(BlockMenu, {
         editorView: editorView,
         mountPoint: popupsMountPoint,

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

@@ -1,9 +1,10 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 export var handleMouseDown = function handleMouseDown(api) {
   return function (view, event) {
-    if (view.editable) {
+    if (!(event.target instanceof HTMLElement)) {
       return false;
     }
-    if (event.target instanceof HTMLElement) {
+    if (!view.editable) {
       var _rootNode$type$name, _rootNode$type$name2;
       var targetPos = view.posAtDOM(event.target, 0);
       // always fetch top level position for mouseDown to avoid drag handle positions being incorrect
@@ -13,6 +14,9 @@ export var handleMouseDown = function handleMouseDown(api) {
         return false;
       }
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.showDragHandleAt(rootPos, '', (_rootNode$type$name = rootNode.type.name) !== null && _rootNode$type$name !== void 0 ? _rootNode$type$name : '', undefined, rootPos, '', (_rootNode$type$name2 = rootNode.type.name) !== null && _rootNode$type$name2 !== void 0 ? _rootNode$type$name2 : ''));
+    } else if (fg('platform_editor_controls_patch_5')) {
+      var isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle]') !== null;
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
     }
     return false;
   };

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

@@ -159,7 +159,8 @@ var initialState = {
   isDocSizeLimitEnabled: null,
   isPMDragging: false,
   multiSelectDnD: undefined,
-  lastDragCancelled: false
+  lastDragCancelled: false,
+  isSelectedViaDragHandle: false
 };
 export var getDecorations = function getDecorations(state) {
   var _key$getState;
@@ -192,7 +193,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     menuTriggerBy = currentState.menuTriggerBy,
     isPMDragging = currentState.isPMDragging,
     isShiftDown = currentState.isShiftDown,
-    lastDragCancelled = currentState.lastDragCancelled;
+    lastDragCancelled = currentState.lastDragCancelled,
+    isSelectedViaDragHandle = currentState.isSelectedViaDragHandle;
   var isActiveNodeDeleted = false;
   var _getTrMetadata = getTrMetadata(tr),
     from = _getTrMetadata.from,
@@ -402,6 +404,7 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
   } else if (meta !== null && meta !== void 0 && meta.toggleMenu) {
     isMenuOpenNew = !isMenuOpen;
   }
+  var isSelectedViaDragHandleNew = (meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle) !== undefined && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5') ? meta === null || meta === void 0 ? void 0 : meta.isSelectedViaDragHandle : isSelectedViaDragHandle;
   return {
     decorations: decorations,
     activeNode: newActiveNode,
@@ -416,7 +419,8 @@ var _apply = function apply(api, formatMessage, tr, currentState, newState, flag
     isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging,
     multiSelectDnD: multiSelectDnD,
     isShiftDown: (_meta$isShiftDown = meta === null || meta === void 0 ? void 0 : meta.isShiftDown) !== null && _meta$isShiftDown !== void 0 ? _meta$isShiftDown : isShiftDown,
-    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled
+    lastDragCancelled: (_meta$lastDragCancell = meta === null || meta === void 0 ? void 0 : meta.lastDragCancelled) !== null && _meta$lastDragCancell !== void 0 ? _meta$lastDragCancell : lastDragCancelled,
+    isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
 export { _apply as apply };
@@ -574,6 +578,16 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
                 return true;
               }
             }
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+              var isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
+              api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(isDragHandle));
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+              var _api$blockControls$sh;
+              if (api !== null && api !== void 0 && (_api$blockControls$sh = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh !== void 0 && _api$blockControls$sh.isSelectedViaDragHandle) {
+                api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
+              }
+            }
             if (!event.repeat && event.shiftKey && fg('platform_editor_elements_dnd_shift_click_select')) {
               view.dispatch(view.state.tr.setMeta(key, _objectSpread(_objectSpread({}, view.state.tr.getMeta(key)), {}, {
                 isShiftDown: true
@@ -601,8 +615,17 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
                 return true;
               }
             }
+            if ((event.key === 'Enter' || event.key === ' ') && event.target instanceof HTMLElement && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+              var _isDragHandle = event.target.closest('[data-editor-block-ctrl-drag-handle="true"]') !== null;
+              api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(_isDragHandle));
+            }
+            if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'ArrowUp') && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_5')) {
+              var _api$blockControls$sh2;
+              if (api !== null && api !== void 0 && (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) !== null && _api$blockControls$sh2 !== void 0 && _api$blockControls$sh2.isSelectedViaDragHandle) {
+                api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.blockControls.commands.setSelectedViaDragHandle(false));
+              }
+            }
           }
-          return false;
         },
         keyup: function keyup(view, event) {
           if (!event.repeat && event.key === 'Shift') {

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

@@ -3,6 +3,7 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { selectTableClosestToPos } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var getInlineNodePos = function getInlineNodePos(tr, start, nodeSize) {
   var $startPos = tr.doc.resolve(start);
   // To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
@@ -45,7 +46,7 @@ var isNodeWithMediaOrExtension = function isNodeWithMediaOrExtension(tr, start,
   });
   return hasMediaOrExtension;
 };
-export var getSelection = function getSelection(tr, start) {
+var oldGetSelection = function oldGetSelection(tr, start) {
   var node = tr.doc.nodeAt(start);
   var isNodeSelection = node && NodeSelection.isSelectable(node);
   var nodeSize = node ? node.nodeSize : 1;
@@ -75,12 +76,53 @@ export var getSelection = function getSelection(tr, start) {
     return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
   }
 };
+var newGetSelection = function newGetSelection(tr, start) {
+  var node = tr.doc.nodeAt(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;
+
+  // 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) {
+    return false;
+  }
+  var isBlockQuoteWithMedia = nodeName === 'blockquote' && isNodeWithMedia(tr, start, nodeSize);
+  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 && fg('platform_editor_non_macros_copy_and_paste_fix') || (fg('platform_editor_non_macros_copy_and_paste_fix') ? isBlockQuoteWithMediaOrExtension : isBlockQuoteWithMedia) ||
+  // decisionList/layoutColumn node is not selectable, but we want to select the whole node not just text
+  ['decisionList', 'layoutColumn'].includes(nodeName || '') || nodeName === 'mediaGroup' && typeof (node === null || node === void 0 ? void 0 : node.childCount) === 'number' && (node === null || node === void 0 ? void 0 : node.childCount) > 1) {
+    return new NodeSelection(tr.doc.resolve(start));
+  }
+
+  // if mediaGroup only has a single child, we want to select the child
+  if (nodeName === 'mediaGroup') {
+    var $mediaStartPos = tr.doc.resolve(start + 1);
+    return new NodeSelection($mediaStartPos);
+  }
+  if (nodeName === 'taskList' && fg('platform_editor_elements_dnd_multi_select_patch_1')) {
+    return TextSelection.create(tr.doc, start, start + nodeSize);
+  }
+  var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
+    inlineNodePos = _getInlineNodePos2.inlineNodePos,
+    inlineNodeEndPos = _getInlineNodePos2.inlineNodeEndPos;
+  return new TextSelection(tr.doc.resolve(inlineNodePos), tr.doc.resolve(inlineNodeEndPos));
+};
+export var getSelection = function getSelection(tr, start) {
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility')) {
+    return newGetSelection(tr, start);
+  }
+  return oldGetSelection(tr, start);
+};
 export var selectNode = function selectNode(tr, start, nodeType) {
   // For table, we need to do cell selection instead of node selection
   if (nodeType === 'table') {
     tr = selectTableClosestToPos(tr, tr.doc.resolve(start + 1));
-  } else {
-    tr.setSelection(getSelection(tr, start));
+    return tr;
+  }
+  var selection = getSelection(tr, start);
+  if (selection) {
+    tr.setSelection(selection);
   }
   return tr;
 };
@@ -93,11 +135,19 @@ export var setCursorPositionAtMovedNode = function setCursorPositionAtMovedNode(
   // blockQuote is selectable, but we want to set cursor at the inline end Pos instead of the gap cursor as this causes jittering post drop
   if (isNodeSelection && node.type.name !== 'blockquote' || (node === null || node === void 0 ? void 0 : node.type.name) === 'decisionList') {
     selection = new GapCursorSelection(tr.doc.resolve(start + node.nodeSize), Side.RIGHT);
-  } else {
-    var _getInlineNodePos2 = getInlineNodePos(tr, start, nodeSize),
-      inlineNodeEndPos = _getInlineNodePos2.inlineNodeEndPos;
-    selection = new TextSelection(tr.doc.resolve(inlineNodeEndPos));
+    tr.setSelection(selection);
+    return tr;
+  }
+
+  // this is a fix for empty paragraph selection - can safely use start position as the paragraph is empty
+  if ((node === null || node === void 0 ? void 0 : node.type.name) === 'paragraph' && (node === null || node === void 0 ? void 0 : node.childCount) === 0 && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility')) {
+    var _selection = new TextSelection(tr.doc.resolve(start));
+    tr.setSelection(_selection);
+    return tr;
   }
+  var _getInlineNodePos3 = getInlineNodePos(tr, start, nodeSize),
+    inlineNodeEndPos = _getInlineNodePos3.inlineNodeEndPos;
+  selection = new TextSelection(tr.doc.resolve(inlineNodeEndPos));
   tr.setSelection(selection);
   return tr;
 };

package/dist/esm/ui/global-styles.js

@@ -6,6 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 
@@ -181,6 +182,6 @@ var blockCardWithoutLayout = css({
 });
 export var GlobalStylesWrapper = function GlobalStylesWrapper() {
   return jsx(Global, {
-    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), globalDnDStyle, extendedHoverZone(), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_widget_visibility') ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, withAnchorNameZindexStyle,,]
   });
 };

package/dist/types/blockControlsPluginType.d.ts

@@ -50,6 +50,7 @@ export interface PluginState {
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
     lastDragCancelled: boolean;
+    isSelectedViaDragHandle?: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
@@ -61,6 +62,7 @@ export type BlockControlsSharedState = {
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
     isEditing?: boolean;
+    isSelectedViaDragHandle?: boolean;
 } | undefined;
 export type HandleOptions = {
     isFocused: boolean;
@@ -101,6 +103,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         }) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
         setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;
+        setSelectedViaDragHandle: (isSelectedViaDragHandle?: boolean) => EditorCommand;
     };
 }>;
 export type BlockControlsMeta = {

package/dist/types/pm-plugins/main.d.ts

@@ -27,5 +27,6 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
     multiSelectDnD: import("../blockControlsPluginType").MultiSelectDnD | undefined;
     isShiftDown: any;
     lastDragCancelled: any;
+    isSelectedViaDragHandle: boolean;
 };
 export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<PluginState>;

package/dist/types/pm-plugins/utils/getSelection.d.ts

@@ -4,7 +4,7 @@ export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize
     inlineNodePos: number;
     inlineNodeEndPos: number;
 };
-export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;
+export declare const getSelection: (tr: Transaction, start: number) => false | NodeSelection | TextSelection;
 export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
 export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;
 /**

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

@@ -50,6 +50,7 @@ export interface PluginState {
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
     lastDragCancelled: boolean;
+    isSelectedViaDragHandle?: boolean;
 }
 export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type BlockControlsSharedState = {
@@ -61,6 +62,7 @@ export type BlockControlsSharedState = {
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
     isEditing?: boolean;
+    isSelectedViaDragHandle?: boolean;
 } | undefined;
 export type HandleOptions = {
     isFocused: boolean;
@@ -101,6 +103,7 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         }) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
         setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;
+        setSelectedViaDragHandle: (isSelectedViaDragHandle?: boolean) => EditorCommand;
     };
 }>;
 export type BlockControlsMeta = {

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -27,5 +27,6 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
     multiSelectDnD: import("../blockControlsPluginType").MultiSelectDnD | undefined;
     isShiftDown: any;
     lastDragCancelled: any;
+    isSelectedViaDragHandle: boolean;
 };
 export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<PluginState>;

package/dist/types-ts4.5/pm-plugins/utils/getSelection.d.ts

@@ -4,7 +4,7 @@ export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize
     inlineNodePos: number;
     inlineNodeEndPos: number;
 };
-export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;
+export declare const getSelection: (tr: Transaction, start: number) => false | NodeSelection | TextSelection;
 export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
 export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.9.1",
+	"version": "3.10.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.6.0",
+		"@atlaskit/editor-common": "^103.7.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -46,14 +46,14 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.6.0",
+		"@atlaskit/tmp-editor-statsig": "^4.8.0",
 		"@atlaskit/tokens": "^4.7.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -172,6 +172,9 @@
 		},
 		"platform_editor_controls_patch_4": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_5": {
+			"type": "boolean"
 		}
 	}
 }