@atlaskit/editor-plugin-block-controls 13.3.3 → 13.3.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 13.3.4
+
+### Patch Changes
+
+- [`069c5c0253ba5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/069c5c0253ba5) -
+  [ux] Improve Remix button hover reliability near the right edge of narrow editor layouts behind
+  the `cc_maui_remix_button_hover_corridor` experiment.
+
+  Consumers can check the new typed boolean experiment at the behavior callsite:
+
+  ```ts
+  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+
+  if (expValEquals('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+  	// Apply the treatment behavior.
+  }
+  ```
+
+- Updated dependencies
+
 ## 13.3.3
 
 ### Patch Changes

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

@@ -20,10 +20,14 @@ var mouseLeave = exports.mouseLeave = function mouseLeave(view) {
     type: 'mouseLeave'
   }));
 };
-var mouseEnter = exports.mouseEnter = function mouseEnter(view) {
-  view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, {
+var mouseEnter = exports.mouseEnter = function mouseEnter(view, side) {
+  var meta = side ? {
+    type: 'mouseEnter',
+    side: side
+  } : {
     type: 'mouseEnter'
-  }));
+  };
+  view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, meta));
 };
 var setHoverSide = exports.setHoverSide = function setHoverSide(view, side) {
   view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, {

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 _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _handleMouseOver = require("../handle-mouse-over");
 var _commands = require("./commands");
@@ -109,6 +110,10 @@ var processHoverSide = function processHoverSide(view, api) {
   // 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 && state.isMouseOut && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+      (0, _commands.mouseEnter)(view, 'right');
+      return;
+    }
     if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
       (0, _commands.setHoverSide)(view, 'right');
     }
@@ -138,6 +143,10 @@ var processHoverSide = function processHoverSide(view, api) {
       }, api);
       // mouseenter doesn't fire over the click overlay, so clear isMouseOut here to re-show.
       if (state !== null && state !== void 0 && state.isMouseOut) {
+        if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+          (0, _commands.mouseEnter)(view, 'right');
+          return;
+        }
         (0, _commands.mouseEnter)(view);
       }
       if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
@@ -147,7 +156,9 @@ var processHoverSide = function processHoverSide(view, api) {
     }
 
     // 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)) {
+    // The corridor experiment keeps controls visible when the pointer is still over a real block;
+    // only empty margin remains reserved for Rovo in that case.
+    if ((marginZone === null || marginZone === void 0 ? void 0 : marginZone.type) === 'gap' || event.clientX > getRightMarginBoundary(view) && (!blockElement || !(0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_maui_remix_button_hover_corridor', 'isEnabled', true))) {
       if (!(state !== null && state !== void 0 && state.isMouseOut)) {
         (0, _commands.clearHoverSide)(view);
         (0, _commands.mouseLeave)(view);
@@ -166,6 +177,10 @@ var processHoverSide = function processHoverSide(view, api) {
   var midpoint = (left + right) / 2;
   var nextHoverSide = event.clientX > midpoint ? 'right' : 'left';
   if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== nextHoverSide) {
+    if (state !== null && state !== void 0 && state.isMouseOut && target !== null && target !== void 0 && target.closest(BLOCK_SELECTORS) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+      (0, _commands.mouseEnter)(view, nextHoverSide);
+      return;
+    }
     (0, _commands.setHoverSide)(view, nextHoverSide);
   }
 };

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

@@ -79,6 +79,9 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
             break;
           case 'mouseEnter':
             newState.isMouseOut = false;
+            if (meta.side) {
+              newState.hoverSide = meta.side;
+            }
             break;
           case 'setHoverSide':
             newState.hoverSide = meta.side;

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

@@ -14,10 +14,14 @@ export const mouseLeave = view => {
     type: 'mouseLeave'
   }));
 };
-export const mouseEnter = view => {
-  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+export const mouseEnter = (view, side) => {
+  const meta = side ? {
+    type: 'mouseEnter',
+    side
+  } : {
     type: 'mouseEnter'
-  }));
+  };
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, meta));
 };
 export const setHoverSide = (view, side) => {
   view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {

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

@@ -1,3 +1,4 @@
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleMouseOver } from '../handle-mouse-over';
 import { clearHoverSide, mouseEnter, mouseLeave, setHoverSide, stopEditing } from './commands';
@@ -90,6 +91,10 @@ const processHoverSide = (view, api) => {
   // This is more reliable than bounds when controls are in portals outside the editor DOM.
   const rightEdgeElement = target === null || target === void 0 ? void 0 : target.closest(RIGHT_EDGE_SELECTOR);
   if (rightEdgeElement) {
+    if (state !== null && state !== void 0 && state.isMouseOut && expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+      mouseEnter(view, 'right');
+      return;
+    }
     if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
       setHoverSide(view, 'right');
     }
@@ -119,6 +124,10 @@ const processHoverSide = (view, api) => {
       }, api);
       // mouseenter doesn't fire over the click overlay, so clear isMouseOut here to re-show.
       if (state !== null && state !== void 0 && state.isMouseOut) {
+        if (expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+          mouseEnter(view, 'right');
+          return;
+        }
         mouseEnter(view);
       }
       if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
@@ -128,7 +137,9 @@ const processHoverSide = (view, api) => {
     }
 
     // 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)) {
+    // The corridor experiment keeps controls visible when the pointer is still over a real block;
+    // only empty margin remains reserved for Rovo in that case.
+    if ((marginZone === null || marginZone === void 0 ? void 0 : marginZone.type) === 'gap' || event.clientX > getRightMarginBoundary(view) && (!blockElement || !expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true))) {
       if (!(state !== null && state !== void 0 && state.isMouseOut)) {
         clearHoverSide(view);
         mouseLeave(view);
@@ -148,6 +159,10 @@ const processHoverSide = (view, api) => {
   const midpoint = (left + right) / 2;
   const nextHoverSide = event.clientX > midpoint ? 'right' : 'left';
   if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== nextHoverSide) {
+    if (state !== null && state !== void 0 && state.isMouseOut && target !== null && target !== void 0 && target.closest(BLOCK_SELECTORS) && expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+      mouseEnter(view, nextHoverSide);
+      return;
+    }
     setHoverSide(view, nextHoverSide);
   }
 };

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

@@ -66,6 +66,9 @@ export const createInteractionTrackingPlugin = (rightSideControlsEnabled = false
             break;
           case 'mouseEnter':
             newState.isMouseOut = false;
+            if (meta.side) {
+              newState.hoverSide = meta.side;
+            }
             break;
           case 'setHoverSide':
             newState.hoverSide = meta.side;

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

@@ -14,10 +14,14 @@ export var mouseLeave = function mouseLeave(view) {
     type: 'mouseLeave'
   }));
 };
-export var mouseEnter = function mouseEnter(view) {
-  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+export var mouseEnter = function mouseEnter(view, side) {
+  var meta = side ? {
+    type: 'mouseEnter',
+    side: side
+  } : {
     type: 'mouseEnter'
-  }));
+  };
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, meta));
 };
 export var setHoverSide = function setHoverSide(view, side) {
   view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {

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 { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleMouseOver } from '../handle-mouse-over';
 import { clearHoverSide, mouseEnter, mouseLeave, setHoverSide, stopEditing } from './commands';
@@ -104,6 +105,10 @@ var processHoverSide = function processHoverSide(view, api) {
   // 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 && state.isMouseOut && expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+      mouseEnter(view, 'right');
+      return;
+    }
     if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
       setHoverSide(view, 'right');
     }
@@ -133,6 +138,10 @@ var processHoverSide = function processHoverSide(view, api) {
       }, api);
       // mouseenter doesn't fire over the click overlay, so clear isMouseOut here to re-show.
       if (state !== null && state !== void 0 && state.isMouseOut) {
+        if (expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+          mouseEnter(view, 'right');
+          return;
+        }
         mouseEnter(view);
       }
       if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== 'right') {
@@ -142,7 +151,9 @@ var processHoverSide = function processHoverSide(view, api) {
     }
 
     // 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)) {
+    // The corridor experiment keeps controls visible when the pointer is still over a real block;
+    // only empty margin remains reserved for Rovo in that case.
+    if ((marginZone === null || marginZone === void 0 ? void 0 : marginZone.type) === 'gap' || event.clientX > getRightMarginBoundary(view) && (!blockElement || !expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true))) {
       if (!(state !== null && state !== void 0 && state.isMouseOut)) {
         clearHoverSide(view);
         mouseLeave(view);
@@ -161,6 +172,10 @@ var processHoverSide = function processHoverSide(view, api) {
   var midpoint = (left + right) / 2;
   var nextHoverSide = event.clientX > midpoint ? 'right' : 'left';
   if ((state === null || state === void 0 ? void 0 : state.hoverSide) !== nextHoverSide) {
+    if (state !== null && state !== void 0 && state.isMouseOut && target !== null && target !== void 0 && target.closest(BLOCK_SELECTORS) && expValEqualsNoExposure('cc_maui_remix_button_hover_corridor', 'isEnabled', true)) {
+      mouseEnter(view, nextHoverSide);
+      return;
+    }
     setHoverSide(view, nextHoverSide);
   }
 };

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

@@ -73,6 +73,9 @@ export var createInteractionTrackingPlugin = function createInteractionTrackingP
             break;
           case 'mouseEnter':
             newState.isMouseOut = false;
+            if (meta.side) {
+              newState.hoverSide = meta.side;
+            }
             break;
           case 'setHoverSide':
             newState.hoverSide = meta.side;

package/dist/types/pm-plugins/interaction-tracking/commands.d.ts

@@ -2,6 +2,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const stopEditing: (view: EditorView) => void;
 export declare const startEditing: (view: EditorView) => void;
 export declare const mouseLeave: (view: EditorView) => void;
-export declare const mouseEnter: (view: EditorView) => void;
+export declare const mouseEnter: (view: EditorView, side?: 'left' | 'right') => void;
 export declare const setHoverSide: (view: EditorView, side: 'left' | 'right') => void;
 export declare const clearHoverSide: (view: EditorView) => void;

package/dist/types/pm-plugins/utils/drag-handle-positions.d.ts

@@ -4,7 +4,7 @@ export declare const getLeftPosition: (dom: HTMLElement | null, type: string, in
 export declare const getNodeHeight: (dom: HTMLElement | null, anchor: string, anchorRectCache?: AnchorRectCache) => number | undefined;
 export declare const shouldBeSticky: (nodeType: string) => boolean;
 export declare const getControlBottomCSSValue: (anchor: string, isSticky: boolean, isTopLevelNode: boolean, isLayoutColumn?: boolean, fallbackAnchor?: string) => {
-    bottom: String;
+    bottom: string;
 };
 export declare const getControlHeightCSSValue: (nodeHeight: number, isSticky: boolean, isTopLevelNode: boolean, fallbackPxHeight: string, isLayoutColumn?: boolean) => {
     height: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "13.3.3",
+	"version": "13.3.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		"@atlaskit/editor-plugin-quick-insert": "^12.0.0",
 		"@atlaskit/editor-plugin-selection": "^12.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^9.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^13.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^13.1.0",
 		"@atlaskit/editor-plugin-user-intent": "^10.1.0",
 		"@atlaskit/editor-plugin-width": "^13.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^135.0.0",
+		"@atlaskit/tmp-editor-statsig": "^135.4.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^23.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -59,7 +59,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.41.0",
+		"@atlaskit/editor-common": "^116.44.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"