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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 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
+
+- [#139810](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139810)
+  [`571a576ee18ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/571a576ee18ef) -
+  Adjust controls to line up with sticky headers
+- Updated dependencies
+
 ## 3.9.0
 
 ### Minor Changes

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

@@ -16,6 +16,7 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("@atlaskit/editor-common/styles");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -90,7 +91,10 @@ var dragHandleButtonStyles = (0, _react2.css)({
 });
 var dragHandleButtonStylesOld = (0, _react2.css)({
   position: 'absolute',
-  padding: "var(--ds-space-025, 2px)".concat(" 0"),
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: '0',
+  paddingRight: '0',
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
@@ -131,12 +135,28 @@ var dragHandleContainerStyles = (0, _primitives.xcss)({
   position: 'absolute',
   boxSizing: 'border-box'
 });
-var tooltipContainerStyles = (0, _primitives.xcss)({
+var tooltipContainerStyles = (0, _react2.css)({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
+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
+  }
+});
+
+// We need this to work around adjacent breakout marks wrapping the controls widget decorations
+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
+  }
+});
 var dragHandleMultiLineSelectionFixFirefox = (0, _react2.css)({
   '&::selection': {
     backgroundColor: 'transparent'
@@ -731,9 +751,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       xcss: [dragHandleContainerStyles],
       as: "span",
       testId: "block-ctrl-drag-handle-container"
-    }, (0, _react2.jsx)(_primitives.Box, {
-      xcss: [tooltipContainerStyles],
-      as: "span"
+    }, (0, _react2.jsx)("span", {
+      css: [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
@@ -756,9 +775,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       xcss: [dragHandleContainerStyles],
       as: "span",
       testId: "block-ctrl-drag-handle-container"
-    }, (0, _react2.jsx)(_primitives.Box, {
-      xcss: [tooltipContainerStyles],
-      as: "span"
+    }, (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()));
   };
   var buttonWithTooltip = function buttonWithTooltip() {

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/cjs/ui/quick-insert-button.js

@@ -9,9 +9,11 @@ exports.TypeAheadControl = exports.QuickInsertWithVisibility = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("@atlaskit/editor-common/styles");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -30,7 +32,10 @@ var _visibilityContainer = require("./visibility-container");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
 var buttonStyles = (0, _primitives.xcss)({
   boxSizing: 'border-box',
@@ -96,12 +101,28 @@ var containerStaticStyles = (0, _primitives.xcss)({
 var disabledContainerStyles = (0, _primitives.xcss)({
   cursor: 'not-allowed'
 });
-var tooltipContainerStyles = (0, _primitives.xcss)({
+var tooltipContainerStyles = (0, _react2.css)({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
+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-quick-insert-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
+  }
+});
+
+// We need this to work around adjacent breakout marks wrapping the controls widget decorations
+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-quick-insert-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
+  }
+});
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
@@ -279,12 +300,12 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     }
   }, [api, view.state]);
   var tooltipPressable = function tooltipPressable() {
-    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    return (0, _react2.jsx)(_tooltip.default, {
       position: "top",
-      content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      content: (0, _react2.jsx)(_keymaps.ToolTipContent, {
         description: formatMessage(_messages.blockControlsMessages.insert)
       })
-    }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    }, (0, _react2.jsx)(_primitives.Pressable, {
       testId: "editor-quick-insert-button",
       type: "button",
       "aria-label": formatMessage(_messages.blockControlsMessages.insert),
@@ -292,18 +313,18 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       onClick: handleQuickInsert,
       onMouseDown: handleMouseDown,
       isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && isTypeAheadOpen
-    }, /*#__PURE__*/_react.default.createElement(_add.default, {
+    }, (0, _react2.jsx)(_add.default, {
       label: "add",
       color: isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
     })));
   };
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box
+  return (0, _react2.jsx)(_primitives.Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
     xcss: [containerStaticStyles, isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && disabledContainerStyles]
-  }, (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [tooltipContainerStyles]
+  }, (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? (0, _react2.jsx)("span", {
+    css: [tooltipContainerStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
   }, tooltipPressable()) : tooltipPressable());
 };
 var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
@@ -316,9 +337,9 @@ var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function Qui
     rootAnchorName = _ref5.rootAnchorName,
     rootNodeType = _ref5.rootNodeType,
     anchorRectCache = _ref5.anchorRectCache;
-  return /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+  return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api
-  }, /*#__PURE__*/_react.default.createElement(TypeAheadControl, {
+  }, (0, _react2.jsx)(TypeAheadControl, {
     view: view,
     api: api,
     formatMessage: formatMessage,

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

@@ -13,6 +13,7 @@ import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -82,7 +83,10 @@ const dragHandleButtonStyles = css({
 });
 const dragHandleButtonStylesOld = css({
   position: 'absolute',
-  padding: `${"var(--ds-space-025, 2px)"} 0`,
+  paddingTop: `${"var(--ds-space-025, 2px)"}`,
+  paddingBottom: `${"var(--ds-space-025, 2px)"}`,
+  paddingLeft: '0',
+  paddingRight: '0',
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
@@ -123,12 +127,28 @@ const dragHandleContainerStyles = xcss({
   position: 'absolute',
   boxSizing: 'border-box'
 });
-const tooltipContainerStyles = xcss({
+const tooltipContainerStyles = css({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
+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
+  }
+});
+
+// We need this to work around adjacent breakout marks wrapping the controls widget decorations
+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
+  }
+});
 const dragHandleMultiLineSelectionFixFirefox = css({
   '&::selection': {
     backgroundColor: 'transparent'
@@ -715,9 +735,8 @@ export const DragHandle = ({
     xcss: [dragHandleContainerStyles],
     as: "span",
     testId: "block-ctrl-drag-handle-container"
-  }, jsx(Box, {
-    xcss: [tooltipContainerStyles],
-    as: "span"
+  }, jsx("span", {
+    css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
   }, jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {
       helpDescriptors: helpDescriptors
@@ -738,9 +757,8 @@ export const DragHandle = ({
     xcss: [dragHandleContainerStyles],
     as: "span",
     testId: "block-ctrl-drag-handle-container"
-  }, jsx(Box, {
-    xcss: [tooltipContainerStyles],
-    as: "span"
+  }, jsx("span", {
+    css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
   }, renderButton()));
   const buttonWithTooltip = () => jsx(Tooltip, {
     content: jsx(TooltipContentWithMultipleShortcuts, {

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/es2019/ui/quick-insert-button.js

@@ -1,7 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
 import React, { useCallback, useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
+import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
@@ -82,12 +91,28 @@ const containerStaticStyles = xcss({
 const disabledContainerStyles = xcss({
   cursor: 'not-allowed'
 });
-const tooltipContainerStyles = xcss({
+const tooltipContainerStyles = css({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
+const tooltipContainerStylesStickyHeader = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-blocks-quick-insert-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
+  }
+});
+
+// We need this to work around adjacent breakout marks wrapping the controls widget decorations
+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-quick-insert-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
+  }
+});
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
@@ -265,12 +290,12 @@ export const TypeAheadControl = ({
       });
     }
   }, [api, view.state]);
-  const tooltipPressable = () => /*#__PURE__*/React.createElement(Tooltip, {
+  const tooltipPressable = () => jsx(Tooltip, {
     position: "top",
-    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+    content: jsx(ToolTipContent, {
       description: formatMessage(messages.insert)
     })
-  }, /*#__PURE__*/React.createElement(Pressable, {
+  }, jsx(Pressable, {
     testId: "editor-quick-insert-button",
     type: "button",
     "aria-label": formatMessage(messages.insert),
@@ -278,17 +303,17 @@ export const TypeAheadControl = ({
     onClick: handleQuickInsert,
     onMouseDown: handleMouseDown,
     isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
-  }, /*#__PURE__*/React.createElement(AddIcon, {
+  }, jsx(AddIcon, {
     label: "add",
     color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
   })));
-  return /*#__PURE__*/React.createElement(Box
+  return jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
     xcss: [containerStaticStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && disabledContainerStyles]
-  }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
-    xcss: [tooltipContainerStyles]
+  }, fg('platform_editor_controls_sticky_controls') ? jsx("span", {
+    css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
   }, tooltipPressable()) : tooltipPressable());
 };
 export const QuickInsertWithVisibility = ({
@@ -302,9 +327,9 @@ export const QuickInsertWithVisibility = ({
   rootNodeType,
   anchorRectCache
 }) => {
-  return /*#__PURE__*/React.createElement(VisibilityContainer, {
+  return jsx(VisibilityContainer, {
     api: api
-  }, /*#__PURE__*/React.createElement(TypeAheadControl, {
+  }, jsx(TypeAheadControl, {
     view: view,
     api: api,
     formatMessage: formatMessage,

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

@@ -18,6 +18,7 @@ import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, getAriaKeyshortcuts, TooltipContentWithMultipleShortcuts } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages } from '@atlaskit/editor-common/messages';
+import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -87,7 +88,10 @@ var dragHandleButtonStyles = css({
 });
 var dragHandleButtonStylesOld = css({
   position: 'absolute',
-  padding: "var(--ds-space-025, 2px)".concat(" 0"),
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: '0',
+  paddingRight: '0',
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'column',
@@ -128,12 +132,28 @@ var dragHandleContainerStyles = xcss({
   position: 'absolute',
   boxSizing: 'border-box'
 });
-var tooltipContainerStyles = xcss({
+var tooltipContainerStyles = css({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
+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
+  }
+});
+
+// We need this to work around adjacent breakout marks wrapping the controls widget decorations
+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
+  }
+});
 var dragHandleMultiLineSelectionFixFirefox = css({
   '&::selection': {
     backgroundColor: 'transparent'
@@ -728,9 +748,8 @@ export var DragHandle = function DragHandle(_ref) {
       xcss: [dragHandleContainerStyles],
       as: "span",
       testId: "block-ctrl-drag-handle-container"
-    }, jsx(Box, {
-      xcss: [tooltipContainerStyles],
-      as: "span"
+    }, jsx("span", {
+      css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
     }, jsx(Tooltip, {
       content: jsx(TooltipContentWithMultipleShortcuts, {
         helpDescriptors: helpDescriptors
@@ -753,9 +772,8 @@ export var DragHandle = function DragHandle(_ref) {
       xcss: [dragHandleContainerStyles],
       as: "span",
       testId: "block-ctrl-drag-handle-container"
-    }, jsx(Box, {
-      xcss: [tooltipContainerStyles],
-      as: "span"
+    }, jsx("span", {
+      css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
     }, renderButton()));
   };
   var buttonWithTooltip = function buttonWithTooltip() {

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/esm/ui/quick-insert-button.js

@@ -2,10 +2,19 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
 import React, { useCallback, useEffect, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { blockControlsMessages as messages } from '@atlaskit/editor-common/messages';
+import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
@@ -86,12 +95,28 @@ var containerStaticStyles = xcss({
 var disabledContainerStyles = xcss({
   cursor: 'not-allowed'
 });
-var tooltipContainerStyles = xcss({
+var tooltipContainerStyles = css({
   top: '8px',
   bottom: '-8px',
   position: 'sticky',
   zIndex: 'card'
 });
+var tooltipContainerStylesStickyHeader = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-blocks-quick-insert-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
+  }
+});
+
+// We need this to work around adjacent breakout marks wrapping the controls widget decorations
+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-quick-insert-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
+  }
+});
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
@@ -269,12 +294,12 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     }
   }, [api, view.state]);
   var tooltipPressable = function tooltipPressable() {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       position: "top",
-      content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      content: jsx(ToolTipContent, {
         description: formatMessage(messages.insert)
       })
-    }, /*#__PURE__*/React.createElement(Pressable, {
+    }, jsx(Pressable, {
       testId: "editor-quick-insert-button",
       type: "button",
       "aria-label": formatMessage(messages.insert),
@@ -282,18 +307,18 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       onClick: handleQuickInsert,
       onMouseDown: handleMouseDown,
       isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
-    }, /*#__PURE__*/React.createElement(AddIcon, {
+    }, jsx(AddIcon, {
       label: "add",
       color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
     })));
   };
-  return /*#__PURE__*/React.createElement(Box
+  return jsx(Box
   // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
   , {
     style: positionStyles,
     xcss: [containerStaticStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && disabledContainerStyles]
-  }, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
-    xcss: [tooltipContainerStyles]
+  }, fg('platform_editor_controls_sticky_controls') ? jsx("span", {
+    css: [tooltipContainerStyles, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeader, fg('platform_editor_controls_patch_4') && tooltipContainerStylesStickyHeaderWithMarksFix]
   }, tooltipPressable()) : tooltipPressable());
 };
 export var QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
@@ -306,9 +331,9 @@ export var QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5)
     rootAnchorName = _ref5.rootAnchorName,
     rootNodeType = _ref5.rootNodeType,
     anchorRectCache = _ref5.anchorRectCache;
-  return /*#__PURE__*/React.createElement(VisibilityContainer, {
+  return jsx(VisibilityContainer, {
     api: api
-  }, /*#__PURE__*/React.createElement(TypeAheadControl, {
+  }, jsx(TypeAheadControl, {
     view: view,
     api: api,
     formatMessage: formatMessage,

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/ui/quick-insert-button.d.ts

@@ -1,4 +1,8 @@
-import React from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -15,6 +19,6 @@ type Props = {
     rootNodeType: string;
     anchorRectCache?: AnchorRectCache;
 };
-export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
-export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
+export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => jsx.JSX.Element;
+export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => jsx.JSX.Element;
 export {};

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/dist/types-ts4.5/ui/quick-insert-button.d.ts

@@ -1,4 +1,8 @@
-import React from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
 import { type IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -15,6 +19,6 @@ type Props = {
     rootNodeType: string;
     anchorRectCache?: AnchorRectCache;
 };
-export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
-export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => React.JSX.Element;
+export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => jsx.JSX.Element;
+export declare const QuickInsertWithVisibility: ({ view, api, formatMessage, getPos, nodeType, anchorName, rootAnchorName, rootNodeType, anchorRectCache, }: Props) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.9.0",
+	"version": "3.9.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,7 +53,7 @@
 		"@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.7.0",
 		"@atlaskit/tokens": "^4.7.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",