@atlaskit/editor-plugin-block-controls 8.7.2 → 8.8.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 8.8.0
+
+### Minor Changes
+
+- [`884dc5b015901`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/884dc5b015901) -
+  [ux] Update hover logic for edit mode in edit/live pages
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.7.2
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -11,6 +11,7 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _handleKeyDownWithPreservedSelection = require("./editor-commands/handle-key-down-with-preserved-selection");
@@ -30,8 +31,11 @@ var _globalStyles = require("./ui/global-styles");
 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 blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPlugin(_ref) {
-  var api = _ref.api;
+  var _config$rightSideCont;
+  var api = _ref.api,
+    config = _ref.config;
   var nodeDecorationRegistry = [];
+  var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   return {
     name: 'blockControls',
     actions: {
@@ -53,13 +57,15 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true));
         }
       }];
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
           name: 'blockControlsInteractionTrackingPlugin',
-          plugin: _pmPlugin.createInteractionTrackingPlugin
+          plugin: function plugin() {
+            return (0, _pmPlugin.createInteractionTrackingPlugin)(rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true));
+          }
         });
       }
       if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
@@ -332,6 +338,11 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
+        sharedState.rightSideControlsEnabled = rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true);
+        if (rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+          var _interactionTrackingP4;
+          sharedState.hoverSide = (_interactionTrackingP4 = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP4 === void 0 ? void 0 : _interactionTrackingP4.hoverSide;
+        }
       }
       if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
         var _selectionPreservatio;

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -85,6 +85,9 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     var element = document.createElement('span');
     // inline decoration causes focus issues when refocusing Editor into first line
     element.style.display = 'block';
+    if ((0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+      element.setAttribute('data-blocks-decorator-widget', 'true');
+    }
     element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
     element.setAttribute('data-blocks-drag-handle-container', 'true');
     element.setAttribute('data-blocks-drag-handle-key', key);

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -76,6 +76,9 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     }
     element.contentEditable = 'false';
     element.setAttribute('data-blocks-quick-insert-container', 'true');
+    if ((0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+      element.setAttribute('data-blocks-quick-insert-button', 'true');
+    }
     element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
     if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
       exposure: true

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

@@ -45,7 +45,7 @@ var getDefaultNodeSelector = (0, _memoizeOne.default)(function () {
   return getNodeSelector([].concat((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODES_NEXT), ['media']), [].concat((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT), ['table']));
 });
 var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
-  var _api$blockControls, _api$editorDisabled, _target$classList;
+  var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$blockControls$sh, _api$blockControls2, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
     isDragging = _ref.isDragging,
     activeNode = _ref.activeNode,
@@ -56,10 +56,14 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       editorDisabled: false
     },
     editorDisabled = _ref2.editorDisabled;
+  var editorViewMode = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
+  var isViewMode = editorViewMode === 'view';
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
 
-  // We shouldn't be firing mouse over transactions when the editor is disabled
-  if (editorDisabled) {
+  // We shouldn't be firing mouse over transactions when the editor is disabled,
+  // except in view mode when right-side controls are enabled (show controls on block hover)
+  var rightSideControlsEnabled = (_api$blockControls$sh = api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || (_api$blockControls2 = _api$blockControls2.sharedState.currentState()) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.rightSideControlsEnabled) !== null && _api$blockControls$sh !== void 0 ? _api$blockControls$sh : false;
+  if (editorDisabled && (!isViewMode || !(rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)))) {
     return false;
   }
 
@@ -82,6 +86,18 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
     return false;
   }
   var rootElement = target === null || target === void 0 ? void 0 : target.closest(isNativeAnchorSupported ? getDefaultNodeSelector() : "[data-drag-handler-anchor-name]");
+
+  // When hovering over the right-edge button (rendered in a portal outside the block), resolve the
+  // block from the container's anchor so activeNode stays set and the button remains visible.
+  if (!rootElement && rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    var rightEdgeContainer = target === null || target === void 0 ? void 0 : target.closest('[data-blocks-right-edge-button-container]');
+    if (rightEdgeContainer) {
+      var anchor = rightEdgeContainer.getAttribute('data-blocks-right-edge-button-anchor');
+      if (anchor) {
+        rootElement = view.dom.querySelector("[".concat((0, _domAttrName.getAnchorAttrName)(), "=\"").concat(CSS.escape(anchor), "\"]"));
+      }
+    }
+  }
   if (rootElement) {
     var _rootElement$parentEl;
     // We want to exlude handles from showing for empty paragraph and heading nodes
@@ -190,22 +206,22 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
           // as when it is a multi-selection, the showDragHandleAt command interfere with selection
           // sometimes makes the multi-selection not continous after block menu is opened with keyboard
           if (!(isMultipleSelected && isMenuOpen && blockMenuOptions !== null && blockMenuOptions !== void 0 && blockMenuOptions.openedViaKeyboard)) {
-            var _api$core, _api$blockControls2;
-            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
+            var _api$core, _api$blockControls3;
+            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
           }
         } else {
-          var _api$core2, _api$blockControls3;
-          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
+          var _api$core2, _api$blockControls4;
+          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType, undefined, rootPos !== null && rootPos !== void 0 ? rootPos : targetPos, rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : anchorName, rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType));
         }
       } else {
-        var _api$core3, _api$blockControls4;
-        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls4 = api.blockControls) === null || _api$blockControls4 === void 0 ? void 0 : _api$blockControls4.commands.showDragHandleAt(targetPos, anchorName, nodeType));
+        var _api$core3, _api$blockControls5;
+        api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.showDragHandleAt(targetPos, anchorName, nodeType));
       }
       if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
         var _api$userIntent;
         if (isMenuOpen && originalAnchorName && (api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || (_api$userIntent = _api$userIntent.sharedState.currentState()) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.currentUserIntent) === 'blockMenuOpen') {
-          var _api$core4, _api$blockControls5;
-          api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$blockControls5 = api.blockControls) === null || _api$blockControls5 === void 0 ? void 0 : _api$blockControls5.commands.toggleBlockMenu());
+          var _api$core4, _api$blockControls6;
+          api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(api === null || api === void 0 || (_api$blockControls6 = api.blockControls) === null || _api$blockControls6 === void 0 ? void 0 : _api$blockControls6.commands.toggleBlockMenu());
         }
       }
     }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stopEditing = exports.startEditing = exports.mouseLeave = exports.mouseEnter = void 0;
+exports.stopEditing = exports.startEditing = exports.setHoverSide = exports.mouseLeave = exports.mouseEnter = exports.clearHoverSide = void 0;
 var _pmPlugin = require("./pm-plugin");
 var stopEditing = exports.stopEditing = function stopEditing(view) {
   view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, {
@@ -24,4 +24,15 @@ var mouseEnter = exports.mouseEnter = function mouseEnter(view) {
   view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, {
     type: 'mouseEnter'
   }));
+};
+var setHoverSide = exports.setHoverSide = function setHoverSide(view, side) {
+  view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, {
+    type: 'setHoverSide',
+    side: side
+  }));
+};
+var clearHoverSide = exports.clearHoverSide = function clearHoverSide(view) {
+  view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, {
+    type: 'clearHoverSide'
+  }));
 };

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

@@ -4,17 +4,112 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseMove = exports.handleMouseLeave = exports.handleMouseEnter = void 0;
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("./commands");
 var _pmPlugin = require("./pm-plugin");
-var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view) {
+/** Per-view pending hover state; avoids cross-editor singleton. */
+var pendingByView = new WeakMap();
+
+/** Per-view RAF handle so clearPendingHoverSide cancels only that view's callback. */
+var rafIdByView = new WeakMap();
+var cancelScheduledProcessForView = function cancelScheduledProcessForView(view) {
+  var id = rafIdByView.get(view);
+  if (id !== undefined) {
+    cancelAnimationFrame(id);
+    rafIdByView.delete(view);
+  }
+};
+var clearPendingHoverSide = function clearPendingHoverSide(view) {
+  pendingByView.delete(view);
+  cancelScheduledProcessForView(view);
+};
+var BLOCK_SELECTORS = '[data-node-anchor], [data-drag-handler-anchor-name]';
+var TABLE_SELECTOR = '[data-prosemirror-node-name="table"]';
+var RIGHT_EDGE_SELECTOR = '[data-blocks-right-edge-button-container]';
+var isInsideTable = function isInsideTable(element) {
+  var _element$getAttribute;
+  return element.closest(TABLE_SELECTOR) !== null || ((_element$getAttribute = element.getAttribute) === null || _element$getAttribute === void 0 ? void 0 : _element$getAttribute.call(element, 'data-prosemirror-node-name')) === 'table';
+};
+var processHoverSide = function processHoverSide(view) {
+  var event = pendingByView.get(view);
+  if (!event) {
+    return;
+  }
+  pendingByView.delete(view);
+  rafIdByView.delete(view);
+  var editorContentArea = view.dom.closest('.ak-editor-content-area');
+  if (!(editorContentArea instanceof HTMLElement)) {
+    return;
+  }
+  var state = (0, _pmPlugin.getInteractionTrackingState)(view.state);
+  var target = event.target instanceof HTMLElement ? event.target : null;
+
+  // When hovering over block controls directly, infer side from which control we're over.
+  // This is more reliable than bounds when controls are in portals outside the editor DOM.
+  var rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(RIGHT_EDGE_SELECTOR);
+  if (rightEdgeElement) {
+    if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
+      (0, _commands.setHoverSide)(view, 'right');
+    }
+    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"]');
+  if (leftControlElement) {
+    if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'left') {
+      (0, _commands.setHoverSide)(view, 'left');
+    }
+    return;
+  }
+
+  // Use the hovered block's midpoint when hovering over block content.
+  var blockElement = target === null || target === void 0 ? void 0 : target.closest(BLOCK_SELECTORS);
+  var boundsElement = blockElement instanceof HTMLElement ? blockElement : editorContentArea;
+
+  // Tables show block controls at table level; don't restrict by side so drag handle
+  // stays visible when hovering anywhere in the table (e.g. paragraph in second cell).
+  if (isInsideTable(boundsElement)) {
+    if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== undefined) {
+      (0, _commands.clearHoverSide)(view);
+    }
+    return;
+  }
+  var _boundsElement$getBou = boundsElement.getBoundingClientRect(),
+    left = _boundsElement$getBou.left,
+    right = _boundsElement$getBou.right;
+  var midpoint = (left + right) / 2;
+  var nextHoverSide = event.clientX > midpoint ? 'right' : 'left';
+  if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== nextHoverSide) {
+    (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 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) {
     (0, _commands.stopEditing)(view);
   }
+
+  // Only track hover side when right-side controls are enabled and experiment is on (performance)
+  if (!rightSideControlsEnabled || !(0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    return false;
+  }
+  if (!(event instanceof MouseEvent)) {
+    return false;
+  }
+  pendingByView.set(view, event);
+  cancelScheduledProcessForView(view);
+  var id = requestAnimationFrame(function () {
+    processHoverSide(view);
+  });
+  rafIdByView.set(view, id);
   return false;
 };
 var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view) {
+  var rightSideControlsEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true)) {
+    clearPendingHoverSide(view);
+  }
   (0, _commands.mouseLeave)(view);
   return false;
 };

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

@@ -9,13 +9,21 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 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; }
 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 MOUSE_LEAVE_DEBOUNCE_MS = 200;
+var isMovingToBlockControlsArea = function isMovingToBlockControlsArea(target) {
+  return target instanceof Element && !!target.closest(BLOCK_CONTROLS_HOVER_AREA_SELECTOR);
+};
 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;
   return new _safePlugin.SafePlugin({
     key: interactionTrackingPluginKey,
     state: {
@@ -40,10 +48,17 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
             break;
           case 'mouseLeave':
             newState.isMouseOut = true;
+            newState.hoverSide = undefined;
             break;
           case 'mouseEnter':
             newState.isMouseOut = false;
             break;
+          case 'setHoverSide':
+            newState.hoverSide = meta.side;
+            break;
+          case 'clearHoverSide':
+            newState.hoverSide = undefined;
+            break;
         }
         return _objectSpread(_objectSpread({}, pluginState), newState);
       }
@@ -51,30 +66,104 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
     props: {
       handleKeyDown: _handleKeyDown.handleKeyDown,
       handleDOMEvents: {
-        mousemove: _handleMouseMove.handleMouseMove
+        mousemove: function mousemove(view, event) {
+          return (0, _handleMouseMove.handleMouseMove)(view, event, rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true));
+        }
       }
     },
     view: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? function (view) {
       var editorContentArea = view.dom.closest('.ak-editor-content-area');
+      var remixRightSideEnabled = rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true);
       var unbindMouseEnter;
       var unbindMouseLeave;
+      var unbindDocumentMouseMove;
+      var mouseLeaveTimeoutId = null;
+      var lastMousePosition = {
+        x: 0,
+        y: 0
+      };
+      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 && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true) && isMovingToBlockControlsArea(event.relatedTarget)) {
+          return;
+        }
+        mouseLeaveTimeoutId = setTimeout(function () {
+          mouseLeaveTimeoutId = null;
+          // Before dispatching, check if mouse has moved to block controls (e.g. through empty space)
+          if (rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true) && typeof document !== 'undefined') {
+            var el = document.elementFromPoint(lastMousePosition.x, lastMousePosition.y);
+            if (el && isMovingToBlockControlsArea(el)) {
+              return;
+            }
+          }
+          (0, _handleMouseMove.handleMouseLeave)(view, rightSideControlsEnabled && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true));
+        }, MOUSE_LEAVE_DEBOUNCE_MS);
+      };
+      var cancelScheduledMouseLeave = function cancelScheduledMouseLeave() {
+        if (mouseLeaveTimeoutId) {
+          clearTimeout(mouseLeaveTimeoutId);
+          mouseLeaveTimeoutId = null;
+        }
+      };
       if (editorContentArea) {
+        if (remixRightSideEnabled && typeof document !== 'undefined') {
+          unbindDocumentMouseMove = (0, _bindEventListener.bind)(document, {
+            type: 'mousemove',
+            listener: function listener(event) {
+              lastMousePosition = {
+                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 && (0, _expValEquals.expValEquals)('confluence_remix_icon_right_side', 'isEnabled', true));
+              }
+            },
+            options: {
+              passive: true
+            }
+          });
+        }
         unbindMouseEnter = (0, _bindEventListener.bind)(editorContentArea, {
           type: 'mouseenter',
           listener: function listener() {
+            if (remixRightSideEnabled) {
+              cancelScheduledMouseLeave();
+            }
             (0, _handleMouseMove.handleMouseEnter)(view);
           }
         });
         unbindMouseLeave = (0, _bindEventListener.bind)(editorContentArea, {
           type: 'mouseleave',
-          listener: function listener() {
-            (0, _handleMouseMove.handleMouseLeave)(view);
+          listener: function listener(event) {
+            var e = event;
+            lastMousePosition = {
+              x: e.clientX,
+              y: e.clientY
+            };
+            if (remixRightSideEnabled) {
+              scheduleMouseLeave(e);
+            } else {
+              (0, _handleMouseMove.handleMouseLeave)(view, false);
+            }
           }
         });
       }
       return {
         destroy: function destroy() {
           var _unbindMouseEnter, _unbindMouseLeave;
+          if (remixRightSideEnabled) {
+            var _unbindDocumentMouseM;
+            cancelScheduledMouseLeave();
+            (_unbindDocumentMouseM = unbindDocumentMouseMove) === null || _unbindDocumentMouseM === void 0 || _unbindDocumentMouseM();
+          }
           (_unbindMouseEnter = unbindMouseEnter) === null || _unbindMouseEnter === void 0 || _unbindMouseEnter();
           (_unbindMouseLeave = unbindMouseLeave) === null || _unbindMouseLeave === void 0 || _unbindMouseLeave();
         }