@atlaskit/editor-plugin-block-controls 12.4.1 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 13.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Minor Changes
+
+- [`2f16223a8aa3a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f16223a8aa3a) -
+  Extend the right-side Remix button hover zone into the empty right margin beside a block, with a
+  reserved gap for the Rovo button on the far right.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.4.1
 
 ### Patch Changes

package/block-decoration-utils/anchor-name/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/block-decoration-utils-anchor-name.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/block-decoration-utils-anchor-name.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/block-decoration-utils-anchor-name.d.ts"
 }

package/block-decoration-utils/consts/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/block-decoration-utils-consts.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/block-decoration-utils-consts.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/block-decoration-utils-consts.d.ts"
 }

package/block-decoration-utils/dom-attr-name/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/block-decoration-utils-dom-attr-name.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/block-decoration-utils-dom-attr-name.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/block-decoration-utils-dom-attr-name.d.ts"
 }

package/block-decoration-utils/drag-handle-positions/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/block-decoration-utils-drag-handle-positions.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/block-decoration-utils-drag-handle-positions.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/block-decoration-utils-drag-handle-positions.d.ts"
 }

package/block-decoration-utils/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/ui/block-decoration-utils.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/ui/block-decoration-utils.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/ui/block-decoration-utils.d.ts"
 }

package/block-decoration-utils/visibility-container/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/block-decoration-utils-visibility-container.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/block-decoration-utils-visibility-container.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/block-decoration-utils-visibility-container.d.ts"
 }

package/block-decoration-utils/widget-positions/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/block-decoration-utils-widget-positions.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/block-decoration-utils-widget-positions.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/block-decoration-utils-widget-positions.d.ts"
 }

package/blockControlsPlugin/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/blockControlsPlugin.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/blockControlsPlugin.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/blockControlsPlugin.d.ts"
 }

package/blockControlsPluginType/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/blockControlsPluginType.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/blockControlsPluginType.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/blockControlsPluginType.d.ts"
 }

package/dist/cjs/blockControlsPlugin.js

@@ -90,7 +90,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         pmPlugins.push({
           name: 'blockControlsInteractionTrackingPlugin',
           plugin: function plugin() {
-            return (0, _pmPlugin.createInteractionTrackingPlugin)(rightSideControlsEnabled);
+            return (0, _pmPlugin.createInteractionTrackingPlugin)(rightSideControlsEnabled, api);
           }
         });
       }

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RIGHT_MARGIN_ROVO_GAP_PX = void 0;
+/** Far-right margin width reserved for the Rovo button, where the Remix button must not show. */
+var RIGHT_MARGIN_ROVO_GAP_PX = exports.RIGHT_MARGIN_ROVO_GAP_PX = 80;

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

@@ -4,8 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseMove = exports.handleMouseLeave = exports.handleMouseEnter = void 0;
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _handleMouseOver = require("../handle-mouse-over");
 var _commands = require("./commands");
+var _constants = require("./constants");
 var _pmPlugin = require("./pm-plugin");
+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; }
 /** Per-view pending hover state; avoids cross-editor singleton. */
 var pendingByView = new WeakMap();
 
@@ -25,11 +31,67 @@ 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]';
 
+// Top-level blocks (no block ancestor), matched by anchor attribute so it works under both the
+// legacy and native-anchor schemes.
+var getRootBlocks = function getRootBlocks(view) {
+  return Array.from(view.dom.querySelectorAll(BLOCK_SELECTORS)).filter(function (el) {
+    var _el$parentElement;
+    return !((_el$parentElement = el.parentElement) !== null && _el$parentElement !== void 0 && _el$parentElement.closest(BLOCK_SELECTORS));
+  });
+};
+
+// Find the root block whose vertical bounds contain clientY. Returns the measured rect so callers
+// can reuse it without re-measuring.
+var findBlockAtY = function findBlockAtY(view, clientY) {
+  var _iterator = _createForOfIteratorHelper(getRootBlocks(view)),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var el = _step.value;
+      var rect = el.getBoundingClientRect();
+      if (clientY >= rect.top && clientY <= rect.bottom) {
+        return {
+          block: el,
+          rect: rect
+        };
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+};
+var getRightMarginBoundary = function getRightMarginBoundary(view) {
+  var _view$dom$ownerDocume, _view$dom$ownerDocume2;
+  return ((_view$dom$ownerDocume = (_view$dom$ownerDocume2 = view.dom.ownerDocument.defaultView) === null || _view$dom$ownerDocume2 === void 0 ? void 0 : _view$dom$ownerDocume2.innerWidth) !== null && _view$dom$ownerDocume !== void 0 ? _view$dom$ownerDocume : Number.POSITIVE_INFINITY) - _constants.RIGHT_MARGIN_ROVO_GAP_PX;
+};
+// not in the right margin
+
+// Classify where the cursor sits in the right margin beside the block at its height, running the
+// block lookup once so the caller doesn't traverse the DOM twice per mousemove.
+var classifyRightMarginPosition = function classifyRightMarginPosition(view, event) {
+  var found = findBlockAtY(view, event.clientY);
+  if (!found) {
+    return null;
+  }
+  if (event.clientX <= found.rect.right) {
+    return null;
+  }
+  return event.clientX > getRightMarginBoundary(view) ? {
+    type: 'gap'
+  } : {
+    type: 'active',
+    block: found.block
+  };
+};
+
 /**
  * Process hover position and set left/right side. Only invoked when right-side controls are
  * enabled (confluence_remix_button_right_side_block_fg); handleMouseMove returns early otherwise.
  */
-var processHoverSide = function processHoverSide(view) {
+var processHoverSide = function processHoverSide(view, api) {
   var event = pendingByView.get(view);
   if (!event) {
     return;
@@ -60,20 +122,45 @@ var processHoverSide = function processHoverSide(view) {
     return;
   }
 
-  // Primary path: depth-1 block (doc direct child). Decorations-anchor sets [data-drag-handler-anchor-depth="1"]
-  // on every root block (table, layoutSection, expand, etc.), so we get the whole block without per-type logic.
-  var blockElement = target === null || target === void 0 ? void 0 : target.closest(BLOCK_SELECTORS);
-  var depth1Block = blockElement instanceof HTMLElement ? blockElement.closest('[data-drag-handler-anchor-depth="1"]') : null;
-  var boundsElement = depth1Block instanceof HTMLElement ? depth1Block : editorContentArea;
-  if (!boundsElement) {
-    if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== undefined) {
-      (0, _commands.clearHoverSide)(view);
+  // Added right-margin hover, gated so it can be rolled back. When off, fall through to midpoint.
+  if ((0, _experiments.editorExperiment)('remix_button_right_margin_hover', true)) {
+    var closestBlock = target === null || target === void 0 ? void 0 : target.closest(BLOCK_SELECTORS);
+    var blockElement = closestBlock instanceof HTMLElement ? closestBlock : null;
+
+    // Not over a block: the cursor may be in the right margin beside content.
+    var marginZone = blockElement ? null : classifyRightMarginPosition(view, event);
+    if ((marginZone === null || marginZone === void 0 ? void 0 : marginZone.type) === 'active' && api) {
+      // handleMouseOver only reads event.target, so a target-only stand-in is enough here.
+      (0, _handleMouseOver.handleMouseOver)(view, {
+        target: marginZone.block
+      }, api);
+      // mouseenter doesn't fire over the click overlay, so clear isMouseOut here to re-show.
+      if (state !== null && state !== void 0 && state.isMouseOut) {
+        (0, _commands.mouseEnter)(view);
+      }
+      if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
+        (0, _commands.setHoverSide)(view, 'right');
+      }
+      return;
     }
-    return;
+
+    // In the Rovo gap, dismiss the controls so the button doesn't linger over the Rovo button.
+    if ((marginZone === null || marginZone === void 0 ? void 0 : marginZone.type) === 'gap' || event.clientX > getRightMarginBoundary(view)) {
+      if (!(state !== null && state !== void 0 && state.isMouseOut)) {
+        (0, _commands.clearHoverSide)(view);
+        (0, _commands.mouseLeave)(view);
+      }
+      return;
+    }
+
+    // Over a block: fall through to the midpoint split so the left half keeps the drag handle and
+    // the right half shows the Remix button, matching the experiment-off behaviour.
   }
-  var _boundsElement$getBou = boundsElement.getBoundingClientRect(),
-    left = _boundsElement$getBou.left,
-    right = _boundsElement$getBou.right;
+
+  // Pick the side from the content midpoint, keeping the original left/right halves.
+  var _editorContentArea$ge = editorContentArea.getBoundingClientRect(),
+    left = _editorContentArea$ge.left,
+    right = _editorContentArea$ge.right;
   var midpoint = (left + right) / 2;
   var nextHoverSide = event.clientX > midpoint ? 'right' : 'left';
   if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== nextHoverSide) {
@@ -82,6 +169,7 @@ var processHoverSide = function processHoverSide(view) {
 };
 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 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) {
@@ -98,7 +186,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
   pendingByView.set(view, event);
   cancelScheduledProcessForView(view);
   var id = requestAnimationFrame(function () {
-    processHoverSide(view);
+    processHoverSide(view, api);
   });
   rafIdByView.set(view, id);
   return false;

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

@@ -10,6 +10,7 @@ var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _constants = require("./constants");
 var _handleKeyDown = require("./handle-key-down");
 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; }
@@ -17,12 +18,39 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** 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 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);
 };
+
+/**
+ * The right margin is covered by the ClickAreaBlock overlay, which sits outside .ak-editor-content-area.
+ * Hovering there should still surface the right-side Remix button, so keep controls alive — but only on
+ * the right (past the content's right edge), and not in the far-right Rovo gap. The left gutter must
+ * dismiss like the experiment-off path, so it is treated as inactive.
+ */
+var isOverActiveClickArea = function isOverActiveClickArea(target, clientX) {
+  var _clickArea$querySelec, _target$ownerDocument, _target$ownerDocument2;
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  var clickArea = target.closest(CLICK_AREA_SELECTOR);
+  if (!clickArea) {
+    return false;
+  }
+  var contentRight = (_clickArea$querySelec = clickArea.querySelector('.ak-editor-content-area')) === null || _clickArea$querySelec === void 0 ? void 0 : _clickArea$querySelec.getBoundingClientRect().right;
+  if (contentRight !== undefined && clientX <= contentRight) {
+    return false;
+  }
+  var innerWidth = (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument.defaultView) === null || _target$ownerDocument2 === void 0 ? void 0 : _target$ownerDocument2.innerWidth) !== null && _target$ownerDocument !== void 0 ? _target$ownerDocument : Number.POSITIVE_INFINITY;
+  return clientX <= innerWidth - _constants.RIGHT_MARGIN_ROVO_GAP_PX;
+};
 var interactionTrackingPluginKey = exports.interactionTrackingPluginKey = new _state.PluginKey('interactionTrackingPlugin');
 var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin = function createInteractionTrackingPlugin() {
   var rightSideControlsEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var api = arguments.length > 1 ? arguments[1] : undefined;
   return new _safePlugin.SafePlugin({
     key: interactionTrackingPluginKey,
     state: {
@@ -66,7 +94,7 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
       handleKeyDown: _handleKeyDown.handleKeyDown,
       handleDOMEvents: {
         mousemove: function mousemove(view, event) {
-          return (0, _handleMouseMove.handleMouseMove)(view, event, rightSideControlsEnabled);
+          return (0, _handleMouseMove.handleMouseMove)(view, event, rightSideControlsEnabled, api);
         }
       }
     },
@@ -82,22 +110,28 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
         x: 0,
         y: 0
       };
+
+      // The active right margin only counts as "still hovering" when our experiment is on;
+      // otherwise leaving the content area (e.g. exiting left) must dismiss as on master.
+      var marginHoverEnabled = (0, _experiments.editorExperiment)('remix_button_right_margin_hover', true);
       var scheduleMouseLeave = function scheduleMouseLeave(event) {
         if (mouseLeaveTimeoutId) {
           clearTimeout(mouseLeaveTimeoutId);
           mouseLeaveTimeoutId = null;
         }
 
-        // Don't set isMouseOut when moving to block controls (right-edge button, drag handle, etc.)
-        if (rightSideControlsEnabled && isMovingToBlockControlsArea(event.relatedTarget)) {
+        // Keep controls visible when moving to block controls (or, with the experiment on,
+        // the active right margin — the Rovo gap is excluded so controls still clear there).
+        if (rightSideControlsEnabled && (isMovingToBlockControlsArea(event.relatedTarget) || marginHoverEnabled && isOverActiveClickArea(event.relatedTarget, event.clientX))) {
           return;
         }
         mouseLeaveTimeoutId = setTimeout(function () {
           mouseLeaveTimeoutId = null;
-          // Before dispatching, check if mouse has moved to block controls (e.g. through empty space)
+          // Re-check after the debounce: keep controls if the cursor landed on block controls
+          // (or, with the experiment on, the active right margin).
           if (rightSideControlsEnabled && typeof document !== 'undefined') {
             var el = document.elementFromPoint(lastMousePosition.x, lastMousePosition.y);
-            if (el && isMovingToBlockControlsArea(el)) {
+            if (el && (isMovingToBlockControlsArea(el) || marginHoverEnabled && isOverActiveClickArea(el, lastMousePosition.x))) {
               return;
             }
           }
@@ -119,11 +153,11 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
                 x: event.clientX,
                 y: event.clientY
               };
-              // Use document-level mousemove so we get events when hovering over block
-              // controls (which may be in portals outside the editor DOM). Without this,
-              // handleDOMEvents.mousemove only fires when over the editor content.
-              if (editorContentArea.contains(event.target) || isMovingToBlockControlsArea(event.target)) {
-                (0, _handleMouseMove.handleMouseMove)(view, event, rightSideControlsEnabled);
+              // Catches block controls in portals that handleDOMEvents.mousemove misses.
+              // The right-margin overlay is only relevant with the experiment on.
+              var overClickArea = marginHoverEnabled && event.target instanceof Element && !!event.target.closest(CLICK_AREA_SELECTOR);
+              if (editorContentArea.contains(event.target) || isMovingToBlockControlsArea(event.target) || overClickArea) {
+                (0, _handleMouseMove.handleMouseMove)(view, event, rightSideControlsEnabled, api);
               }
             },
             options: {

package/dist/cjs/ui/visibility-container.js

@@ -77,6 +77,8 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     rightSideControlsEnabled = _useSharedPluginState.rightSideControlsEnabled;
   var isViewMode = editorViewMode === 'view';
   // rightSideControlsEnabled is the single source of truth (confluence_remix_button_right_side_block_fg from preset)
+  // Both controls are restricted by side: the drag handle shows on the left half, the Remix button on
+  // the right half (and the right margin), matching the midpoint split in handle-mouse-move.
   var shouldRestrictBySide = rightSideControlsEnabled && controlSide !== undefined && !isViewMode;
   // Only restrict by side when hoverSide is known (after mousemove). When undefined, show both
   // controls so drag handle is visible on load and for keyboard-only users.

package/dist/es2019/blockControlsPlugin.js

@@ -79,7 +79,7 @@ export const blockControlsPlugin = ({
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
           name: 'blockControlsInteractionTrackingPlugin',
-          plugin: () => createInteractionTrackingPlugin(rightSideControlsEnabled)
+          plugin: () => createInteractionTrackingPlugin(rightSideControlsEnabled, api)
         });
       }
       if (editorExperiment('platform_editor_block_menu', true)) {

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

@@ -0,0 +1,2 @@
+/** Far-right margin width reserved for the Rovo button, where the Remix button must not show. */
+export const RIGHT_MARGIN_ROVO_GAP_PX = 80;

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

@@ -1,4 +1,7 @@
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { handleMouseOver } from '../handle-mouse-over';
 import { clearHoverSide, mouseEnter, mouseLeave, setHoverSide, stopEditing } from './commands';
+import { RIGHT_MARGIN_ROVO_GAP_PX } from './constants';
 import { getInteractionTrackingState } from './pm-plugin';
 
 /** Per-view pending hover state; avoids cross-editor singleton. */
@@ -20,11 +23,56 @@ const clearPendingHoverSide = view => {
 const BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
 const RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
 
+// Top-level blocks (no block ancestor), matched by anchor attribute so it works under both the
+// legacy and native-anchor schemes.
+const getRootBlocks = view => Array.from(view.dom.querySelectorAll(BLOCK_SELECTORS)).filter(el => {
+  var _el$parentElement;
+  return !((_el$parentElement = el.parentElement) !== null && _el$parentElement !== void 0 && _el$parentElement.closest(BLOCK_SELECTORS));
+});
+
+// Find the root block whose vertical bounds contain clientY. Returns the measured rect so callers
+// can reuse it without re-measuring.
+const findBlockAtY = (view, clientY) => {
+  for (const el of getRootBlocks(view)) {
+    const rect = el.getBoundingClientRect();
+    if (clientY >= rect.top && clientY <= rect.bottom) {
+      return {
+        block: el,
+        rect
+      };
+    }
+  }
+  return null;
+};
+const getRightMarginBoundary = view => {
+  var _view$dom$ownerDocume, _view$dom$ownerDocume2;
+  return ((_view$dom$ownerDocume = (_view$dom$ownerDocume2 = view.dom.ownerDocument.defaultView) === null || _view$dom$ownerDocume2 === void 0 ? void 0 : _view$dom$ownerDocume2.innerWidth) !== null && _view$dom$ownerDocume !== void 0 ? _view$dom$ownerDocume : Number.POSITIVE_INFINITY) - RIGHT_MARGIN_ROVO_GAP_PX;
+};
+// not in the right margin
+
+// Classify where the cursor sits in the right margin beside the block at its height, running the
+// block lookup once so the caller doesn't traverse the DOM twice per mousemove.
+const classifyRightMarginPosition = (view, event) => {
+  const found = findBlockAtY(view, event.clientY);
+  if (!found) {
+    return null;
+  }
+  if (event.clientX <= found.rect.right) {
+    return null;
+  }
+  return event.clientX > getRightMarginBoundary(view) ? {
+    type: 'gap'
+  } : {
+    type: 'active',
+    block: found.block
+  };
+};
+
 /**
  * Process hover position and set left/right side. Only invoked when right-side controls are
  * enabled (confluence_remix_button_right_side_block_fg); handleMouseMove returns early otherwise.
  */
-const processHoverSide = view => {
+const processHoverSide = (view, api) => {
   const event = pendingByView.get(view);
   if (!event) {
     return;
@@ -55,28 +103,53 @@ const processHoverSide = view => {
     return;
   }
 
-  // Primary path: depth-1 block (doc direct child). Decorations-anchor sets [data-drag-handler-anchor-depth="1"]
-  // on every root block (table, layoutSection, expand, etc.), so we get the whole block without per-type logic.
-  const blockElement = target === null || target === void 0 ? void 0 : target.closest(BLOCK_SELECTORS);
-  const depth1Block = blockElement instanceof HTMLElement ? blockElement.closest('[data-drag-handler-anchor-depth="1"]') : null;
-  const boundsElement = depth1Block instanceof HTMLElement ? depth1Block : editorContentArea;
-  if (!boundsElement) {
-    if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== undefined) {
-      clearHoverSide(view);
+  // Added right-margin hover, gated so it can be rolled back. When off, fall through to midpoint.
+  if (editorExperiment('remix_button_right_margin_hover', true)) {
+    const closestBlock = target === null || target === void 0 ? void 0 : target.closest(BLOCK_SELECTORS);
+    const blockElement = closestBlock instanceof HTMLElement ? closestBlock : null;
+
+    // Not over a block: the cursor may be in the right margin beside content.
+    const marginZone = blockElement ? null : classifyRightMarginPosition(view, event);
+    if ((marginZone === null || marginZone === void 0 ? void 0 : marginZone.type) === 'active' && api) {
+      // handleMouseOver only reads event.target, so a target-only stand-in is enough here.
+      handleMouseOver(view, {
+        target: marginZone.block
+      }, api);
+      // mouseenter doesn't fire over the click overlay, so clear isMouseOut here to re-show.
+      if (state !== null && state !== void 0 && state.isMouseOut) {
+        mouseEnter(view);
+      }
+      if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
+        setHoverSide(view, 'right');
+      }
+      return;
     }
-    return;
+
+    // In the Rovo gap, dismiss the controls so the button doesn't linger over the Rovo button.
+    if ((marginZone === null || marginZone === void 0 ? void 0 : marginZone.type) === 'gap' || event.clientX > getRightMarginBoundary(view)) {
+      if (!(state !== null && state !== void 0 && state.isMouseOut)) {
+        clearHoverSide(view);
+        mouseLeave(view);
+      }
+      return;
+    }
+
+    // Over a block: fall through to the midpoint split so the left half keeps the drag handle and
+    // the right half shows the Remix button, matching the experiment-off behaviour.
   }
+
+  // Pick the side from the content midpoint, keeping the original left/right halves.
   const {
     left,
     right
-  } = boundsElement.getBoundingClientRect();
+  } = editorContentArea.getBoundingClientRect();
   const midpoint = (left + right) / 2;
   const nextHoverSide = event.clientX > midpoint ? 'right' : 'left';
   if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== nextHoverSide) {
     setHoverSide(view, nextHoverSide);
   }
 };
-export const handleMouseMove = (view, event, rightSideControlsEnabled = false) => {
+export const handleMouseMove = (view, event, rightSideControlsEnabled = false, 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) {
@@ -93,7 +166,7 @@ export const handleMouseMove = (view, event, rightSideControlsEnabled = false) =
   pendingByView.set(view, event);
   cancelScheduledProcessForView(view);
   const id = requestAnimationFrame(() => {
-    processHoverSide(view);
+    processHoverSide(view, api);
   });
   rafIdByView.set(view, id);
   return false;