@atlaskit/editor-plugin-block-controls 17.3.8 → 17.3.9

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 17.3.9
+
+### Patch Changes
+
+- [`09b54fe3854bd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/09b54fe3854bd) -
+  Keep Quick Insert stationary when the drag handle moves to a nested block under
+  `platform_editor_block_control_migration`, and keep layout-column drag handles visible across the
+  full editor width.
+- Updated dependencies
+
 ## 17.3.8
 
 ### Patch Changes

package/dist/cjs/pm-plugins/interaction-tracking/handle-mouse-move.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseMove = exports.handleMouseLeave = exports.handleMouseEnter = void 0;
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _handleMouseOver = require("../handle-mouse-over");
 var _commands = require("./commands");
@@ -30,6 +31,10 @@ var clearPendingHoverSide = function clearPendingHoverSide(view) {
 };
 var BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
 var RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var LEGACY_LEFT_CONTROL_SELECTOR = '[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var getLeftControlSelector = function getLeftControlSelector() {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? "[data-editor-block-ctrl-drag-handle], ".concat(LEGACY_LEFT_CONTROL_SELECTOR) : LEGACY_LEFT_CONTROL_SELECTOR;
+};
 
 // Top-level blocks (no block ancestor), matched by anchor attribute so it works under both the
 // legacy and native-anchor schemes.
@@ -128,7 +133,7 @@ var processHoverSide = function processHoverSide(view, api) {
     }
     return;
   }
-  var leftControlElement = target === null || target === void 0 ? void 0 : target.closest('[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]');
+  var leftControlElement = target === null || target === void 0 ? void 0 : target.closest(getLeftControlSelector());
   if (leftControlElement) {
     if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'left') {
       (0, _commands.setHoverSide)(view, 'left');
@@ -186,9 +191,7 @@ var processHoverSide = function processHoverSide(view, api) {
     (0, _commands.setHoverSide)(view, nextHoverSide);
   }
 };
-var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event) {
-  var rightSideControlsEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var api = arguments.length > 3 ? arguments[3] : undefined;
+var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event, rightSideControlsEnabled, api) {
   var state = (0, _pmPlugin.getInteractionTrackingState)(view.state);
   // if user has stopped editing and moved their mouse, show block controls again
   if (state !== null && state !== void 0 && state.isEditing) {
@@ -210,8 +213,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   rafIdByView.set(view, id);
   return false;
 };
-var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view) {
-  var rightSideControlsEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view, rightSideControlsEnabled) {
   if (rightSideControlsEnabled) {
     clearPendingHoverSide(view);
   }

package/dist/cjs/pm-plugins/interaction-tracking/pm-plugin.js

@@ -19,13 +19,16 @@ var _handleMouseMove = require("./handle-mouse-move");
 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; }
 /** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
-var BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var getBlockControlsHoverAreaSelector = function getBlockControlsHoverAreaSelector() {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? "[data-editor-block-ctrl-drag-handle], ".concat(LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR) : LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR;
+};
 var MOUSE_LEAVE_DEBOUNCE_MS = 200;
 
 /** ClickAreaBlock overlay that wraps the editor content and covers the right margin. */
 var CLICK_AREA_SELECTOR = '[data-editor-click-wrapper]';
 var isMovingToBlockControlsArea = function isMovingToBlockControlsArea(target) {
-  return target instanceof Element && !!target.closest(BLOCK_CONTROLS_HOVER_AREA_SELECTOR);
+  return target instanceof Element && !!target.closest(getBlockControlsHoverAreaSelector());
 };
 
 /**

package/dist/cjs/ui/block-controls-left-surface.js

@@ -9,8 +9,11 @@ exports.BlockControlsLeftSurface = void 0;
 require("./block-controls-left-surface.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _blockControlsSurfaceContext = require("./block-controls-surface-context");
 var _visibilityContainer = require("./visibility-container");
 var leftSurfaceOuterStyles = null;
 var leftSurfaceRowStyles = null;
@@ -48,7 +51,7 @@ var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function Block
     className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
   }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
     api: api,
-    controlSide: "left",
+    controlSide: (0, _blockControlsSurfaceContext.getBlockControlsSurfaceControlSide)(surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_controls_reliable_anchor')),
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
   }, surface)));

package/dist/cjs/ui/block-controls-surface-context.js

@@ -4,10 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createBlockControlsSurfaceContextForPosition = exports.createBlockControlsSurfaceContext = void 0;
+exports.getBlockControlsSurfaceControlSide = exports.createBlockControlsSurfaceContextForPosition = exports.createBlockControlsSurfaceContext = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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; }
+var getBlockControlsSurfaceControlSide = exports.getBlockControlsSurfaceControlSide = function getBlockControlsSurfaceControlSide(context, reliableAnchorEnabled) {
+  return (context === null || context === void 0 ? void 0 : context.targetNode.type.name) === 'layoutColumn' || Boolean(context) && reliableAnchorEnabled && (context === null || context === void 0 ? void 0 : context.targetNode.parentType) !== 'doc' ? undefined : 'left';
+};
 var getNodeContext = function getNodeContext(state, pos) {
   var node = state.doc.nodeAt(pos);
   if (!node) {

package/dist/es2019/pm-plugins/interaction-tracking/handle-mouse-move.js

@@ -1,3 +1,4 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { handleMouseOver } from '../handle-mouse-over';
 import { clearHoverSide, mouseEnter, mouseLeave, setHoverSide, stopEditing } from './commands';
@@ -22,6 +23,8 @@ const clearPendingHoverSide = view => {
 };
 const BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
 const RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+const LEGACY_LEFT_CONTROL_SELECTOR = '[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+const getLeftControlSelector = () => isExperimentEnabled('platform_editor_block_control_migration') ? `[data-editor-block-ctrl-drag-handle], ${LEGACY_LEFT_CONTROL_SELECTOR}` : LEGACY_LEFT_CONTROL_SELECTOR;
 
 // Top-level blocks (no block ancestor), matched by anchor attribute so it works under both the
 // legacy and native-anchor schemes.
@@ -109,7 +112,7 @@ const processHoverSide = (view, api) => {
     }
     return;
   }
-  const leftControlElement = target === null || target === void 0 ? void 0 : target.closest('[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]');
+  const leftControlElement = target === null || target === void 0 ? void 0 : target.closest(getLeftControlSelector());
   if (leftControlElement) {
     if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'left') {
       setHoverSide(view, 'left');
@@ -168,7 +171,7 @@ const processHoverSide = (view, api) => {
     setHoverSide(view, nextHoverSide);
   }
 };
-export const handleMouseMove = (view, event, rightSideControlsEnabled = false, api) => {
+export const handleMouseMove = (view, event, rightSideControlsEnabled, api) => {
   const state = getInteractionTrackingState(view.state);
   // if user has stopped editing and moved their mouse, show block controls again
   if (state !== null && state !== void 0 && state.isEditing) {
@@ -190,7 +193,7 @@ export const handleMouseMove = (view, event, rightSideControlsEnabled = false, a
   rafIdByView.set(view, id);
   return false;
 };
-export const handleMouseLeave = (view, rightSideControlsEnabled = false) => {
+export const handleMouseLeave = (view, rightSideControlsEnabled) => {
   if (rightSideControlsEnabled) {
     clearPendingHoverSide(view);
   }

package/dist/es2019/pm-plugins/interaction-tracking/pm-plugin.js

@@ -10,12 +10,13 @@ import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
 
 /** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
-const BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+const LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+const getBlockControlsHoverAreaSelector = () => isExperimentEnabled('platform_editor_block_control_migration') ? `[data-editor-block-ctrl-drag-handle], ${LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR}` : LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR;
 const MOUSE_LEAVE_DEBOUNCE_MS = 200;
 
 /** ClickAreaBlock overlay that wraps the editor content and covers the right margin. */
 const CLICK_AREA_SELECTOR = '[data-editor-click-wrapper]';
-const isMovingToBlockControlsArea = target => target instanceof Element && !!target.closest(BLOCK_CONTROLS_HOVER_AREA_SELECTOR);
+const isMovingToBlockControlsArea = target => target instanceof Element && !!target.closest(getBlockControlsHoverAreaSelector());
 
 /**
  * The right margin is covered by the ClickAreaBlock overlay, which sits outside .ak-editor-content-area.

package/dist/es2019/ui/block-controls-left-surface.js

@@ -2,8 +2,11 @@
 import "./block-controls-left-surface.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
 import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { getBlockControlsSurfaceControlSide } from './block-controls-surface-context';
 import { VisibilityContainer } from './visibility-container';
 const leftSurfaceOuterStyles = null;
 const leftSurfaceRowStyles = null;
@@ -42,7 +45,7 @@ export const BlockControlsLeftSurface = ({
     className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
   }, /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
-    controlSide: "left",
+    controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
   }, surface)));

package/dist/es2019/ui/block-controls-surface-context.js

@@ -1,3 +1,4 @@
+export const getBlockControlsSurfaceControlSide = (context, reliableAnchorEnabled) => (context === null || context === void 0 ? void 0 : context.targetNode.type.name) === 'layoutColumn' || Boolean(context) && reliableAnchorEnabled && (context === null || context === void 0 ? void 0 : context.targetNode.parentType) !== 'doc' ? undefined : 'left';
 const getNodeContext = (state, pos) => {
   const node = state.doc.nodeAt(pos);
   if (!node) {

package/dist/esm/pm-plugins/interaction-tracking/handle-mouse-move.js

@@ -1,6 +1,7 @@
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { handleMouseOver } from '../handle-mouse-over';
 import { clearHoverSide, mouseEnter, mouseLeave, setHoverSide, stopEditing } from './commands';
@@ -25,6 +26,10 @@ var clearPendingHoverSide = function clearPendingHoverSide(view) {
 };
 var BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
 var RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var LEGACY_LEFT_CONTROL_SELECTOR = '[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var getLeftControlSelector = function getLeftControlSelector() {
+  return isExperimentEnabled('platform_editor_block_control_migration') ? "[data-editor-block-ctrl-drag-handle], ".concat(LEGACY_LEFT_CONTROL_SELECTOR) : LEGACY_LEFT_CONTROL_SELECTOR;
+};
 
 // Top-level blocks (no block ancestor), matched by anchor attribute so it works under both the
 // legacy and native-anchor schemes.
@@ -123,7 +128,7 @@ var processHoverSide = function processHoverSide(view, api) {
     }
     return;
   }
-  var leftControlElement = target === null || target === void 0 ? void 0 : target.closest('[data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]');
+  var leftControlElement = target === null || target === void 0 ? void 0 : target.closest(getLeftControlSelector());
   if (leftControlElement) {
     if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'left') {
       setHoverSide(view, 'left');
@@ -181,9 +186,7 @@ var processHoverSide = function processHoverSide(view, api) {
     setHoverSide(view, nextHoverSide);
   }
 };
-export var handleMouseMove = function handleMouseMove(view, event) {
-  var rightSideControlsEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var api = arguments.length > 3 ? arguments[3] : undefined;
+export var handleMouseMove = function handleMouseMove(view, event, rightSideControlsEnabled, api) {
   var state = getInteractionTrackingState(view.state);
   // if user has stopped editing and moved their mouse, show block controls again
   if (state !== null && state !== void 0 && state.isEditing) {
@@ -205,8 +208,7 @@ export var handleMouseMove = function handleMouseMove(view, event) {
   rafIdByView.set(view, id);
   return false;
 };
-export var handleMouseLeave = function handleMouseLeave(view) {
-  var rightSideControlsEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+export var handleMouseLeave = function handleMouseLeave(view, rightSideControlsEnabled) {
   if (rightSideControlsEnabled) {
     clearPendingHoverSide(view);
   }

package/dist/esm/pm-plugins/interaction-tracking/pm-plugin.js

@@ -13,13 +13,16 @@ import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
 
 /** Elements that extend the editor hover area (block controls, right-edge button, etc.) */
-var BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR = '[data-blocks-right-edge-button-container], [data-blocks-drag-handle-container], [data-testid="block-ctrl-drag-handle"], [data-testid="block-ctrl-drag-handle-container"], [data-testid="block-ctrl-decorator-widget"], [data-testid="block-ctrl-quick-insert-button"]';
+var getBlockControlsHoverAreaSelector = function getBlockControlsHoverAreaSelector() {
+  return isExperimentEnabled('platform_editor_block_control_migration') ? "[data-editor-block-ctrl-drag-handle], ".concat(LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR) : LEGACY_BLOCK_CONTROLS_HOVER_AREA_SELECTOR;
+};
 var MOUSE_LEAVE_DEBOUNCE_MS = 200;
 
 /** ClickAreaBlock overlay that wraps the editor content and covers the right margin. */
 var CLICK_AREA_SELECTOR = '[data-editor-click-wrapper]';
 var isMovingToBlockControlsArea = function isMovingToBlockControlsArea(target) {
-  return target instanceof Element && !!target.closest(BLOCK_CONTROLS_HOVER_AREA_SELECTOR);
+  return target instanceof Element && !!target.closest(getBlockControlsHoverAreaSelector());
 };
 
 /**

package/dist/esm/ui/block-controls-left-surface.js

@@ -2,8 +2,11 @@
 import "./block-controls-left-surface.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
 import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { getBlockControlsSurfaceControlSide } from './block-controls-surface-context';
 import { VisibilityContainer } from './visibility-container';
 var leftSurfaceOuterStyles = null;
 var leftSurfaceRowStyles = null;
@@ -41,7 +44,7 @@ export var BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref) {
     className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
   }, /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
-    controlSide: "left",
+    controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
   }, surface)));

package/dist/esm/ui/block-controls-surface-context.js

@@ -1,6 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
+export var getBlockControlsSurfaceControlSide = function getBlockControlsSurfaceControlSide(context, reliableAnchorEnabled) {
+  return (context === null || context === void 0 ? void 0 : context.targetNode.type.name) === 'layoutColumn' || Boolean(context) && reliableAnchorEnabled && (context === null || context === void 0 ? void 0 : context.targetNode.parentType) !== 'doc' ? undefined : 'left';
+};
 var getNodeContext = function getNodeContext(state, pos) {
   var node = state.doc.nodeAt(pos);
   if (!node) {

package/dist/types/ui/block-controls-surface-context.d.ts

@@ -2,5 +2,6 @@ import type { BlockControlUIContext } from '@atlaskit/editor-common/block-contro
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode } from '../blockControlsPluginType';
+export declare const getBlockControlsSurfaceControlSide: (context: BlockControlUIContext | undefined, reliableAnchorEnabled: boolean) => 'left' | undefined;
 export declare const createBlockControlsSurfaceContextForPosition: (state: EditorState, targetPos: number, activeNode?: ActiveNode) => BlockControlUIContext | undefined;
 export declare const createBlockControlsSurfaceContext: (view: EditorView, activeNode: ActiveNode | undefined, target?: 'active' | 'root') => BlockControlUIContext | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "17.3.8",
+	"version": "17.3.9",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^173.0.0",
+		"@atlaskit/tmp-editor-statsig": "^174.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.11.0",
+		"@atlaskit/editor-common": "^120.12.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"