@atlaskit/editor-plugin-block-controls 3.9.2 → 3.10.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.10.1
+
+### Patch Changes
+
+- [#140783](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140783)
+  [`a2d4bdd4841c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2d4bdd4841c5) -
+  [ux] Extend drag handle background with gradient to obscure adjacent node controls for contrast
+- Updated dependencies
+
+## 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

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/drag-handle-positions.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldBeSticky = exports.getTopPosition = exports.getNodeHeight = exports.getLeftPosition = exports.getControlHeightCSSValue = exports.getControlBottomCSSValue = void 0;
+exports.shouldMaskNodeControls = exports.shouldBeSticky = exports.getTopPosition = exports.getNodeHeight = exports.getLeftPosition = exports.getControlHeightCSSValue = exports.getControlBottomCSSValue = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("../../ui/consts");
 var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -72,4 +73,10 @@ var getControlHeightCSSValue = exports.getControlHeightCSSValue = function getCo
   } : {
     height: "".concat(nodeHeight || fallbackPxHeight, "px")
   };
+};
+var shouldMaskNodeControls = exports.shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
+  return (
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    isTopLevelNode && ['table'].includes(nodeType) && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
+  );
 };

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -34,6 +34,7 @@ var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJ
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+var STICKY_CONTROLS_TOP_MARGIN = exports.STICKY_CONTROLS_TOP_MARGIN = 8;
 var QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_HEIGHT = 24;
 var QUICK_INSERT_WIDTH = exports.QUICK_INSERT_WIDTH = 24;
 var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {

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

@@ -47,6 +47,19 @@ var iconWrapperStyles = (0, _primitives.xcss)({
   justifyContent: 'center',
   alignItems: 'center'
 });
+var extendedIconWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: "var(--ds-surface, #FFFFFF)",
+  marginBottom: "var(--ds-space-negative-100, -8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  marginTop: "var(--ds-space-negative-100, -8px)",
+  paddingTop: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-negative-100, -8px)",
+  paddingRight: "var(--ds-space-100, 8px)",
+  borderRadius: '6px'
+});
 
 // update color to match quick insert button for new editor controls
 var dragHandleColor = (0, _react2.css)({
@@ -136,16 +149,25 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
   boxSizing: 'border-box'
 });
 var tooltipContainerStyles = (0, _react2.css)({
-  top: '8px',
-  bottom: '-8px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  top: "".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  bottom: "-".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
+  position: 'sticky',
+  zIndex: 100 // card = 100
+});
+var tooltipContainerStylesWithNodeControls = (0, _react2.css)({
+  top: '0',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  bottom: "-".concat(_consts.STICKY_CONTROLS_TOP_MARGIN, "px"),
   position: 'sticky',
-  zIndex: 'card'
+  zIndex: 100 // card = 100
 });
 var tooltipContainerStylesStickyHeader = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: _styles.tableControlsSpacing
+    top: _styles.tableControlsSpacing - _consts.STICKY_CONTROLS_TOP_MARGIN
   }
 });
 
@@ -154,7 +176,7 @@ var tooltipContainerStylesStickyHeaderWithMarksFix = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: _styles.tableControlsSpacing
+    top: _styles.tableControlsSpacing - _consts.STICKY_CONTROLS_TOP_MARGIN
   }
 });
 var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
@@ -564,13 +586,13 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = (0, _dragHandlePositions.shouldBeSticky)(nodeType);
     if (supportsAnchor) {
-      var bottom = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      var bottom = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(_consts.DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px - ").concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px)"),
         top: (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(_consts.DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(nodeType), "px)")
       }, bottom);
     }
-    var height = (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _dragHandlePositions.getControlHeightCSSValue)((0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(_consts.DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : (0, _dragHandlePositions.getLeftPosition)(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: (0, _dragHandlePositions.getTopPosition)(dom, nodeType)
@@ -712,14 +734,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       (0, _react2.jsx)("button", {
         type: "button",
-        css: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
+        css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
         _browser.browser.gecko && (0, _platformFeatureFlags.fg)('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: !(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') && positionStyles || {},
+        style: !((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls')) && positionStyles || {},
         onClick: handleOnClick,
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown
@@ -730,7 +752,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         "data-editor-block-ctrl-drag-handle": true,
         "data-testid": "block-ctrl-drag-handle"
       }, (0, _react2.jsx)(_primitives.Box, {
-        as: "span",
         xcss: iconWrapperStyles
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
@@ -752,7 +773,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, (0, _react2.jsx)("span", {
-      css: [tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
     }, (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_keymaps.TooltipContentWithMultipleShortcuts, {
         helpDescriptors: helpDescriptors
@@ -765,7 +786,11 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
           priority: 'important'
         });
       }
-    }, renderButton())));
+    }, (0, _react2.jsx)("span", {
+      css:
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+    }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
     return (0, _react2.jsx)(_primitives.Box
@@ -776,8 +801,12 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, (0, _react2.jsx)("span", {
-      css: [tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
-    }, renderButton()));
+      css: [(0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+    }, (0, _react2.jsx)("span", {
+      css:
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      (0, _dragHandlePositions.shouldMaskNodeControls)(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+    }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {
     return (0, _react2.jsx)(_tooltip.default, {
@@ -796,7 +825,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
   var isTooltip = !dragHandleDisabled && (0, _platformFeatureFlags.fg)('platform_editor_element_drag_and_drop_ed_23873');
   var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
   var render = isTooltip ? buttonWithTooltip() : renderButton();
-  return (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyRender : render;
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyRender : render;
 };
 var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
   var view = _ref8.view,

package/dist/cjs/ui/quick-insert-button.js

@@ -309,7 +309,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       testId: "editor-quick-insert-button",
       type: "button",
       "aria-label": formatMessage(_messages.blockControlsMessages.insert),
-      xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
+      xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? stickyButtonStyles : buttonStyles, isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
       onClick: handleQuickInsert,
       onMouseDown: handleMouseDown,
       isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && isTypeAheadOpen

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/drag-handle-positions.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
 const STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -64,4 +65,10 @@ export const getControlHeightCSSValue = (nodeHeight, isSticky, isTopLevelNode, f
   } : {
     height: `${nodeHeight || fallbackPxHeight}px`
   };
+};
+export const shouldMaskNodeControls = (nodeType, isTopLevelNode) => {
+  return (
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && editorExperiment('platform_editor_controls', 'variant1')
+  );
 };

package/dist/es2019/ui/consts.js

@@ -25,6 +25,7 @@ export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 export const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+export const STICKY_CONTROLS_TOP_MARGIN = 8;
 export const QUICK_INSERT_HEIGHT = 24;
 export const QUICK_INSERT_WIDTH = 24;
 export const QUICK_INSERT_DIMENSIONS = {

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

@@ -27,10 +27,10 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
-import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
+import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
-import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
+import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 import { refreshAnchorName } from './utils/anchor-name';
 import { VisibilityContainer } from './visibility-container';
@@ -39,6 +39,19 @@ const iconWrapperStyles = xcss({
   justifyContent: 'center',
   alignItems: 'center'
 });
+const extendedIconWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: "var(--ds-surface, #FFFFFF)",
+  marginBottom: "var(--ds-space-negative-100, -8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  marginTop: "var(--ds-space-negative-100, -8px)",
+  paddingTop: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-negative-100, -8px)",
+  paddingRight: "var(--ds-space-100, 8px)",
+  borderRadius: '6px'
+});
 
 // update color to match quick insert button for new editor controls
 const dragHandleColor = css({
@@ -128,16 +141,25 @@ const dragHandleContainerStyles = xcss({
   boxSizing: 'border-box'
 });
 const tooltipContainerStyles = css({
-  top: '8px',
-  bottom: '-8px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  top: `${STICKY_CONTROLS_TOP_MARGIN}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  bottom: `-${STICKY_CONTROLS_TOP_MARGIN}px`,
+  position: 'sticky',
+  zIndex: 100 // card = 100
+});
+const tooltipContainerStylesWithNodeControls = css({
+  top: '0',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  bottom: `-${STICKY_CONTROLS_TOP_MARGIN}px`,
   position: 'sticky',
-  zIndex: 'card'
+  zIndex: 100 // card = 100
 });
 const tooltipContainerStylesStickyHeader = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: tableControlsSpacing
+    top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
   }
 });
 
@@ -146,7 +168,7 @@ const tooltipContainerStylesStickyHeaderWithMarksFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: tableControlsSpacing
+    top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
   }
 });
 const dragHandleMultiLineSelectionFixFirefox = css({
@@ -553,14 +575,14 @@ export const DragHandle = ({
     const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     const isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      const bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      const bottom = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return {
         left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc((anchor(${safeAnchorName} right) + anchor(${safeAnchorName} left))/2 - ${DRAG_HANDLE_HEIGHT / 2}px)` : `calc(anchor(${safeAnchorName} start) - ${DRAG_HANDLE_WIDTH}px - ${dragHandleGap(nodeType, parentNodeType)}px)`,
         top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? `calc(anchor(${safeAnchorName} top) - ${DRAG_HANDLE_WIDTH}px)` : `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(nodeType)}px)`,
         ...bottom
       };
     }
-    const height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
+    const height = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, `${DRAG_HANDLE_HEIGHT}`, isLayoutColumn) : {};
     return {
       left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType)})` : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: getTopPosition(dom, nodeType),
@@ -699,14 +721,14 @@ export const DragHandle = ({
   // eslint-disable-next-line @atlaskit/design-system/no-html-button
   jsx("button", {
     type: "button",
-    css: [fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
+    css: [editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
     // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
     // See https://product-fabric.atlassian.net/browse/ED-26266
     browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: !fg('platform_editor_controls_sticky_controls') && positionStyles || {},
+    style: !(editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls')) && positionStyles || {},
     onClick: handleOnClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown
@@ -717,7 +739,6 @@ export const DragHandle = ({
     "data-editor-block-ctrl-drag-handle": true,
     "data-testid": "block-ctrl-drag-handle"
   }, jsx(Box, {
-    as: "span",
     xcss: iconWrapperStyles
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     ,
@@ -736,7 +757,7 @@ export const DragHandle = ({
     as: "span",
     testId: "block-ctrl-drag-handle-container"
   }, jsx("span", {
-    css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
   }, jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
@@ -749,7 +770,11 @@ export const DragHandle = ({
         priority: 'important'
       });
     }
-  }, renderButton())));
+  }, jsx("span", {
+    css:
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+  }, renderButton()))));
   const stickyWithoutTooltip = () => jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
@@ -758,8 +783,12 @@ export const DragHandle = ({
     as: "span",
     testId: "block-ctrl-drag-handle-container"
   }, jsx("span", {
-    css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
-  }, renderButton()));
+    css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+  }, jsx("span", {
+    css:
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+  }, renderButton())));
   const buttonWithTooltip = () => jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
@@ -775,7 +804,7 @@ export const DragHandle = ({
   const isTooltip = !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873');
   const stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
   const render = isTooltip ? buttonWithTooltip() : renderButton();
-  return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
+  return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
 };
 export const DragHandleWithVisibility = ({
   view,

package/dist/es2019/ui/quick-insert-button.js

@@ -299,7 +299,7 @@ export const TypeAheadControl = ({
     testId: "editor-quick-insert-button",
     type: "button",
     "aria-label": formatMessage(messages.insert),
-    xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
+    xcss: [fg('platform_editor_controls_sticky_controls') ? stickyButtonStyles : buttonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
     onClick: handleQuickInsert,
     onMouseDown: handleMouseDown,
     isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen

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/drag-handle-positions.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
 var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
@@ -66,4 +67,10 @@ export var getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeig
   } : {
     height: "".concat(nodeHeight || fallbackPxHeight, "px")
   };
+};
+export var shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
+  return (
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+    isTopLevelNode && ['table'].includes(nodeType) && fg('platform_editor_controls_sticky_controls') && editorExperiment('platform_editor_controls', 'variant1')
+  );
 };

package/dist/esm/ui/consts.js

@@ -27,6 +27,7 @@ export var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 export var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+export var STICKY_CONTROLS_TOP_MARGIN = 8;
 export var QUICK_INSERT_HEIGHT = 24;
 export var QUICK_INSERT_WIDTH = 24;
 export var QUICK_INSERT_DIMENSIONS = {

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

@@ -32,10 +32,10 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
 import { getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
-import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
+import { getControlBottomCSSValue, getControlHeightCSSValue, getLeftPosition, getNodeHeight, getTopPosition, shouldBeSticky, shouldMaskNodeControls } from '../pm-plugins/utils/drag-handle-positions';
 import { isHandleCorrelatedToSelection, selectNode } from '../pm-plugins/utils/getSelection';
 import { alignAnchorHeadInDirectionOfPos, expandSelectionHeadToNodeAtPos } from '../pm-plugins/utils/selection';
-import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, topPositionAdjustment } from './consts';
+import { BLOCK_MENU_ENABLED, DRAG_HANDLE_BORDER_RADIUS, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH, DRAG_HANDLE_WIDTH, DRAG_HANDLE_ZINDEX, dragHandleGap, nodeMargins, spacingBetweenNodesForPreview, STICKY_CONTROLS_TOP_MARGIN, topPositionAdjustment } from './consts';
 import { dragPreview } from './drag-preview';
 import { refreshAnchorName } from './utils/anchor-name';
 import { VisibilityContainer } from './visibility-container';
@@ -44,6 +44,19 @@ var iconWrapperStyles = xcss({
   justifyContent: 'center',
   alignItems: 'center'
 });
+var extendedIconWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: "var(--ds-surface, #FFFFFF)",
+  marginBottom: "var(--ds-space-negative-100, -8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  marginTop: "var(--ds-space-negative-100, -8px)",
+  paddingTop: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-negative-100, -8px)",
+  paddingRight: "var(--ds-space-100, 8px)",
+  borderRadius: '6px'
+});
 
 // update color to match quick insert button for new editor controls
 var dragHandleColor = css({
@@ -133,16 +146,25 @@ var dragHandleContainerStyles = xcss({
   boxSizing: 'border-box'
 });
 var tooltipContainerStyles = css({
-  top: '8px',
-  bottom: '-8px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  top: "".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  bottom: "-".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
+  position: 'sticky',
+  zIndex: 100 // card = 100
+});
+var tooltipContainerStylesWithNodeControls = css({
+  top: '0',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  bottom: "-".concat(STICKY_CONTROLS_TOP_MARGIN, "px"),
   position: 'sticky',
-  zIndex: 'card'
+  zIndex: 100 // card = 100
 });
 var tooltipContainerStylesStickyHeader = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-blocks-drag-handle-container]:has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: tableControlsSpacing
+    top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
   }
 });
 
@@ -151,7 +173,7 @@ var tooltipContainerStylesStickyHeaderWithMarksFix = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '[data-prosemirror-mark-name="breakout"]:has([data-blocks-drag-handle-container]):has(+ [data-prosemirror-node-name="table"] .pm-table-with-controls tr.sticky) &': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    top: tableControlsSpacing
+    top: tableControlsSpacing - STICKY_CONTROLS_TOP_MARGIN
   }
 });
 var dragHandleMultiLineSelectionFixFirefox = css({
@@ -561,13 +583,13 @@ export var DragHandle = function DragHandle(_ref) {
     var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
     var isSticky = shouldBeSticky(nodeType);
     if (supportsAnchor) {
-      var bottom = fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
+      var bottom = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? getControlBottomCSSValue(safeAnchorName, isSticky, isTopLevelNode, isLayoutColumn) : {};
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc((anchor(".concat(safeAnchorName, " right) + anchor(").concat(safeAnchorName, " left))/2 - ").concat(DRAG_HANDLE_HEIGHT / 2, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(DRAG_HANDLE_WIDTH, "px - ").concat(dragHandleGap(nodeType, parentNodeType), "px)"),
         top: editorExperiment('advanced_layouts', true) && isLayoutColumn ? "calc(anchor(".concat(safeAnchorName, " top) - ").concat(DRAG_HANDLE_WIDTH, "px)") : "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(nodeType), "px)")
       }, bottom);
     }
-    var height = fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
+    var height = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? getControlHeightCSSValue(getNodeHeight(dom, safeAnchorName, anchorRectCache) || 0, isSticky, isTopLevelNode, "".concat(DRAG_HANDLE_HEIGHT), isLayoutColumn) : {};
     return _objectSpread({
       left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType), ")") : getLeftPosition(dom, nodeType, innerContainer, isMacroInteractionUpdates, parentNodeType),
       top: getTopPosition(dom, nodeType)
@@ -709,14 +731,14 @@ export var DragHandle = function DragHandle(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/no-html-button
       jsx("button", {
         type: "button",
-        css: [fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
+        css: [editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
         browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        style: !fg('platform_editor_controls_sticky_controls') && positionStyles || {},
+        style: !(editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls')) && positionStyles || {},
         onClick: handleOnClick,
         onMouseDown: handleMouseDown,
         onKeyDown: handleKeyDown
@@ -727,7 +749,6 @@ export var DragHandle = function DragHandle(_ref) {
         "data-editor-block-ctrl-drag-handle": true,
         "data-testid": "block-ctrl-drag-handle"
       }, jsx(Box, {
-        as: "span",
         xcss: iconWrapperStyles
         // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
         ,
@@ -749,7 +770,7 @@ export var DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, jsx("span", {
-      css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
     }, jsx(Tooltip, {
       content: jsx(TooltipContentWithMultipleShortcuts, {
         helpDescriptors: helpDescriptors
@@ -762,7 +783,11 @@ export var DragHandle = function DragHandle(_ref) {
           priority: 'important'
         });
       }
-    }, renderButton())));
+    }, jsx("span", {
+      css:
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+    }, renderButton()))));
   };
   var stickyWithoutTooltip = function stickyWithoutTooltip() {
     return jsx(Box
@@ -773,8 +798,12 @@ export var DragHandle = function DragHandle(_ref) {
       as: "span",
       testId: "block-ctrl-drag-handle-container"
     }, jsx("span", {
-      css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
-    }, renderButton()));
+      css: [shouldMaskNodeControls(nodeType, isTopLevelNode) ? tooltipContainerStylesWithNodeControls : tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
+    }, jsx("span", {
+      css:
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      shouldMaskNodeControls(nodeType, isTopLevelNode) && extendedIconWrapperStyles
+    }, renderButton())));
   };
   var buttonWithTooltip = function buttonWithTooltip() {
     return jsx(Tooltip, {
@@ -793,7 +822,7 @@ export var DragHandle = function DragHandle(_ref) {
   var isTooltip = !dragHandleDisabled && fg('platform_editor_element_drag_and_drop_ed_23873');
   var stickyRender = isTooltip ? stickyWithTooltip() : stickyWithoutTooltip();
   var render = isTooltip ? buttonWithTooltip() : renderButton();
-  return fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
+  return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_sticky_controls') ? stickyRender : render;
 };
 export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref8) {
   var view = _ref8.view,

package/dist/esm/ui/quick-insert-button.js

@@ -303,7 +303,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       testId: "editor-quick-insert-button",
       type: "button",
       "aria-label": formatMessage(messages.insert),
-      xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
+      xcss: [fg('platform_editor_controls_sticky_controls') ? stickyButtonStyles : buttonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
       onClick: handleQuickInsert,
       onMouseDown: handleMouseDown,
       isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen

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/drag-handle-positions.d.ts

@@ -9,3 +9,4 @@ export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolea
 export declare const getControlHeightCSSValue: (nodeHeight: number, isSticky: boolean, isTopLevelNode: boolean, fallbackPxHeight: string, isLayoutColumn?: boolean) => {
     height: string;
 };
+export declare const shouldMaskNodeControls: (nodeType: string, isTopLevelNode: boolean) => boolean;

package/dist/types/ui/consts.d.ts

@@ -22,6 +22,7 @@ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+export declare const STICKY_CONTROLS_TOP_MARGIN = 8;
 export declare const QUICK_INSERT_HEIGHT = 24;
 export declare const QUICK_INSERT_WIDTH = 24;
 export declare const QUICK_INSERT_DIMENSIONS: {

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/drag-handle-positions.d.ts

@@ -9,3 +9,4 @@ export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolea
 export declare const getControlHeightCSSValue: (nodeHeight: number, isSticky: boolean, isTopLevelNode: boolean, fallbackPxHeight: string, isLayoutColumn?: boolean) => {
     height: string;
 };
+export declare const shouldMaskNodeControls: (nodeType: string, isTopLevelNode: boolean) => boolean;

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

@@ -22,6 +22,7 @@ export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
  *  so we allow for some leniency to capture them all. e.g. Table is depth 3.
  */
 export declare const DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
+export declare const STICKY_CONTROLS_TOP_MARGIN = 8;
 export declare const QUICK_INSERT_HEIGHT = 24;
 export declare const QUICK_INSERT_WIDTH = 24;
 export declare const QUICK_INSERT_DIMENSIONS: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.9.2",
+	"version": "3.10.1",
 	"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.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.9.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"
 		}
 	}
 }