@atlaskit/editor-plugin-block-controls 3.17.0 → 3.18.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.18.0
+
+### Minor Changes
+
+- [#169535](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169535)
+  [`275f3d6725a4e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/275f3d6725a4e) -
+  [ux] Hide plus and block control buttons when hovering over gutter space on the left and right
+
+## 3.17.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.17.0
 
 ### Minor Changes

package/dist/cjs/blockControlsPlugin.js

@@ -186,7 +186,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       if (!editorState) {
         return undefined;
       }
-      return {
+      var sharedState = {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = _main.key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
         activeNode: (_key$getState$activeN = (_key$getState3 = _main.key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
@@ -199,6 +199,11 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
+        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;
+      }
+      return sharedState;
     },
     contentComponent: function contentComponent(_ref8) {
       var editorView = _ref8.editorView,

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleMouseMove = void 0;
+exports.handleMouseMove = exports.handleMouseLeave = exports.handleMouseEnter = void 0;
 var _commands = require("./commands");
 var _pmPlugin = require("./pm-plugin");
 var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view) {
@@ -13,4 +13,12 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view) {
     (0, _commands.stopEditing)(view);
   }
   return false;
+};
+var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view) {
+  (0, _commands.mouseLeave)(view);
+  return false;
+};
+var handleMouseEnter = exports.handleMouseEnter = function handleMouseEnter(view) {
+  (0, _commands.mouseEnter)(view);
+  return false;
 };

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

@@ -1,36 +1,65 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.interactionTrackingPluginKey = exports.getInteractionTrackingState = exports.createInteractionTrackingPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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; }
 var interactionTrackingPluginKey = exports.interactionTrackingPluginKey = new _state.PluginKey('interactionTrackingPlugin');
 var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin = function createInteractionTrackingPlugin() {
   return new _safePlugin.SafePlugin({
     key: interactionTrackingPluginKey,
     state: {
       init: function init() {
-        return {
+        var state = {
           isEditing: false
         };
+        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
+          state.isMouseOut = false;
+        }
+        return state;
       },
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(interactionTrackingPluginKey);
+        if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
+          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+            case 'startEditing':
+              return {
+                isEditing: true
+              };
+            case 'stopEditing':
+              return {
+                isEditing: false
+              };
+          }
+          return pluginState;
+        }
+        var newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
-            return {
-              isEditing: true
-            };
+            newState.isEditing = true;
+            break;
           case 'stopEditing':
-            return {
-              isEditing: false
-            };
+            newState.isEditing = false;
+            break;
+          case 'mouseLeave':
+            newState.isMouseOut = true;
+            break;
+          case 'mouseEnter':
+            newState.isMouseOut = false;
+            break;
         }
-        return pluginState;
+        return _objectSpread(_objectSpread({}, pluginState), newState);
       }
     },
     props: {
@@ -38,7 +67,33 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
       handleDOMEvents: {
         mousemove: _handleMouseMove.handleMouseMove
       }
-    }
+    },
+    view: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? function (view) {
+      var editorContentArea = view.dom.closest('.ak-editor-content-area');
+      var unbindMouseEnter;
+      var unbindMouseLeave;
+      if (editorContentArea) {
+        unbindMouseEnter = (0, _bindEventListener.bind)(editorContentArea, {
+          type: 'mouseenter',
+          listener: function listener() {
+            (0, _handleMouseMove.handleMouseEnter)(view);
+          }
+        });
+        unbindMouseLeave = (0, _bindEventListener.bind)(editorContentArea, {
+          type: 'mouseleave',
+          listener: function listener() {
+            (0, _handleMouseMove.handleMouseLeave)(view);
+          }
+        });
+      }
+      return {
+        destroy: function destroy() {
+          var _unbindMouseEnter, _unbindMouseLeave;
+          (_unbindMouseEnter = unbindMouseEnter) === null || _unbindMouseEnter === void 0 || _unbindMouseEnter();
+          (_unbindMouseLeave = unbindMouseLeave) === null || _unbindMouseLeave === void 0 || _unbindMouseLeave();
+        }
+      };
+    } : undefined
   });
 };
 var getInteractionTrackingState = exports.getInteractionTrackingState = function getInteractionTrackingState(state) {

package/dist/cjs/ui/global-styles.js

@@ -25,6 +25,12 @@ var _consts = require("./consts");
  * including those within table rows and media.
  */
 var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
+var gutterPaddingWidth = function gutterPaddingWidth() {
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
+};
+var gutterPaddingLeft = function gutterPaddingLeft() {
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? "-".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '-100px';
+};
 var extendedHoverZone = function extendedHoverZone() {
   return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -44,8 +50,10 @@ var extendedHoverZone = function extendedHoverZone() {
     content: '""',
     position: 'absolute',
     top: 0,
-    left: '-100%',
-    width: '100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    left: gutterPaddingLeft(),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    width: gutterPaddingWidth(),
     height: '100%',
     cursor: 'default',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values

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

@@ -24,7 +24,8 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     children = _ref.children;
   var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
   var isEditing = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isEditing');
-  var shouldHide = isTypeAheadOpen || isEditing;
+  var isMouseOut = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMouseOut');
+  var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);

package/dist/es2019/blockControlsPlugin.js

@@ -177,7 +177,7 @@ export const blockControlsPlugin = ({
     if (!editorState) {
       return undefined;
     }
-    return {
+    const sharedState = {
       isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
       menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
       activeNode: (_key$getState$activeN = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
@@ -190,6 +190,11 @@ export const blockControlsPlugin = ({
       isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
       isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
     };
+    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+      var _interactionTrackingP2, _interactionTrackingP3;
+      sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
+    }
+    return sharedState;
   },
   contentComponent({
     editorView,

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

@@ -8,4 +8,14 @@ export const startEditing = view => {
   view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
     type: 'startEditing'
   }));
+};
+export const mouseLeave = view => {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'mouseLeave'
+  }));
+};
+export const mouseEnter = view => {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'mouseEnter'
+  }));
 };

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

@@ -1,4 +1,4 @@
-import { stopEditing } from './commands';
+import { mouseEnter, mouseLeave, stopEditing } from './commands';
 import { getInteractionTrackingState } from './pm-plugin';
 export const handleMouseMove = view => {
   const state = getInteractionTrackingState(view.state);
@@ -7,4 +7,12 @@ export const handleMouseMove = view => {
     stopEditing(view);
   }
   return false;
+};
+export const handleMouseLeave = view => {
+  mouseLeave(view);
+  return false;
+};
+export const handleMouseEnter = view => {
+  mouseEnter(view);
+  return false;
 };

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

@@ -1,30 +1,58 @@
+import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleKeyDown } from './handle-key-down';
-import { handleMouseMove } from './handle-mouse-move';
+import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
 export const interactionTrackingPluginKey = new PluginKey('interactionTrackingPlugin');
 export const createInteractionTrackingPlugin = () => {
   return new SafePlugin({
     key: interactionTrackingPluginKey,
     state: {
       init() {
-        return {
+        const state = {
           isEditing: false
         };
+        if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+          state.isMouseOut = false;
+        }
+        return state;
       },
       apply(tr, pluginState) {
         const meta = tr.getMeta(interactionTrackingPluginKey);
+        if (!fg('platform_editor_controls_patch_13')) {
+          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+            case 'startEditing':
+              return {
+                isEditing: true
+              };
+            case 'stopEditing':
+              return {
+                isEditing: false
+              };
+          }
+          return pluginState;
+        }
+        const newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
-            return {
-              isEditing: true
-            };
+            newState.isEditing = true;
+            break;
           case 'stopEditing':
-            return {
-              isEditing: false
-            };
+            newState.isEditing = false;
+            break;
+          case 'mouseLeave':
+            newState.isMouseOut = true;
+            break;
+          case 'mouseEnter':
+            newState.isMouseOut = false;
+            break;
         }
-        return pluginState;
+        return {
+          ...pluginState,
+          ...newState
+        };
       }
     },
     props: {
@@ -32,7 +60,33 @@ export const createInteractionTrackingPlugin = () => {
       handleDOMEvents: {
         mousemove: handleMouseMove
       }
-    }
+    },
+    view: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? view => {
+      const editorContentArea = view.dom.closest('.ak-editor-content-area');
+      let unbindMouseEnter;
+      let unbindMouseLeave;
+      if (editorContentArea) {
+        unbindMouseEnter = bind(editorContentArea, {
+          type: 'mouseenter',
+          listener: () => {
+            handleMouseEnter(view);
+          }
+        });
+        unbindMouseLeave = bind(editorContentArea, {
+          type: 'mouseleave',
+          listener: () => {
+            handleMouseLeave(view);
+          }
+        });
+      }
+      return {
+        destroy: () => {
+          var _unbindMouseEnter, _unbindMouseLeave;
+          (_unbindMouseEnter = unbindMouseEnter) === null || _unbindMouseEnter === void 0 ? void 0 : _unbindMouseEnter();
+          (_unbindMouseLeave = unbindMouseLeave) === null || _unbindMouseLeave === void 0 ? void 0 : _unbindMouseLeave();
+        }
+      };
+    } : undefined
   });
 };
 export const getInteractionTrackingState = state => {

package/dist/es2019/ui/global-styles.js

@@ -6,7 +6,7 @@
 import { css, Global, jsx } from '@emotion/react';
 import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
-import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -17,6 +17,8 @@ import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
  * including those within table rows and media.
  */
 const dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
+const gutterPaddingWidth = () => editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? `${akEditorGutterPaddingDynamic()}px` : '100%';
+const gutterPaddingLeft = () => editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? `-${akEditorGutterPaddingDynamic()}px` : '-100px';
 const extendedHoverZone = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`.block-ctrl-drag-preview ${dragHandlerAnchorSelector}::after`]: {
@@ -43,8 +45,10 @@ const extendedHoverZone = () => css({
       content: '""',
       position: 'absolute',
       top: 0,
-      left: '-100%',
-      width: '100%',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      left: gutterPaddingLeft(),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      width: gutterPaddingWidth(),
       height: '100%',
       cursor: 'default',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values

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

@@ -18,7 +18,8 @@ export const VisibilityContainer = ({
 }) => {
   const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
   const isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
-  const shouldHide = isTypeAheadOpen || isEditing;
+  const isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
+  const shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);

package/dist/esm/blockControlsPlugin.js

@@ -179,7 +179,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       if (!editorState) {
         return undefined;
       }
-      return {
+      var sharedState = {
         isMenuOpen: (_key$getState$isMenuO = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.isMenuOpen) !== null && _key$getState$isMenuO !== void 0 ? _key$getState$isMenuO : false,
         menuTriggerBy: (_key$getState$menuTri = (_key$getState2 = key.getState(editorState)) === null || _key$getState2 === void 0 ? void 0 : _key$getState2.menuTriggerBy) !== null && _key$getState$menuTri !== void 0 ? _key$getState$menuTri : undefined,
         activeNode: (_key$getState$activeN = (_key$getState3 = key.getState(editorState)) === null || _key$getState3 === void 0 ? void 0 : _key$getState3.activeNode) !== null && _key$getState$activeN !== void 0 ? _key$getState$activeN : undefined,
@@ -192,6 +192,11 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
+      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+        var _interactionTrackingP2, _interactionTrackingP3;
+        sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
+      }
+      return sharedState;
     },
     contentComponent: function contentComponent(_ref8) {
       var editorView = _ref8.editorView,

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

@@ -8,4 +8,14 @@ export var startEditing = function startEditing(view) {
   view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
     type: 'startEditing'
   }));
+};
+export var mouseLeave = function mouseLeave(view) {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'mouseLeave'
+  }));
+};
+export var mouseEnter = function mouseEnter(view) {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'mouseEnter'
+  }));
 };

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

@@ -1,4 +1,4 @@
-import { stopEditing } from './commands';
+import { mouseEnter, mouseLeave, stopEditing } from './commands';
 import { getInteractionTrackingState } from './pm-plugin';
 export var handleMouseMove = function handleMouseMove(view) {
   var state = getInteractionTrackingState(view.state);
@@ -7,4 +7,12 @@ export var handleMouseMove = function handleMouseMove(view) {
     stopEditing(view);
   }
   return false;
+};
+export var handleMouseLeave = function handleMouseLeave(view) {
+  mouseLeave(view);
+  return false;
+};
+export var handleMouseEnter = function handleMouseEnter(view) {
+  mouseEnter(view);
+  return false;
 };

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

@@ -1,30 +1,58 @@
+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; }
+import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleKeyDown } from './handle-key-down';
-import { handleMouseMove } from './handle-mouse-move';
+import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
 export var interactionTrackingPluginKey = new PluginKey('interactionTrackingPlugin');
 export var createInteractionTrackingPlugin = function createInteractionTrackingPlugin() {
   return new SafePlugin({
     key: interactionTrackingPluginKey,
     state: {
       init: function init() {
-        return {
+        var state = {
           isEditing: false
         };
+        if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+          state.isMouseOut = false;
+        }
+        return state;
       },
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(interactionTrackingPluginKey);
+        if (!fg('platform_editor_controls_patch_13')) {
+          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+            case 'startEditing':
+              return {
+                isEditing: true
+              };
+            case 'stopEditing':
+              return {
+                isEditing: false
+              };
+          }
+          return pluginState;
+        }
+        var newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
-            return {
-              isEditing: true
-            };
+            newState.isEditing = true;
+            break;
           case 'stopEditing':
-            return {
-              isEditing: false
-            };
+            newState.isEditing = false;
+            break;
+          case 'mouseLeave':
+            newState.isMouseOut = true;
+            break;
+          case 'mouseEnter':
+            newState.isMouseOut = false;
+            break;
         }
-        return pluginState;
+        return _objectSpread(_objectSpread({}, pluginState), newState);
       }
     },
     props: {
@@ -32,7 +60,33 @@ export var createInteractionTrackingPlugin = function createInteractionTrackingP
       handleDOMEvents: {
         mousemove: handleMouseMove
       }
-    }
+    },
+    view: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? function (view) {
+      var editorContentArea = view.dom.closest('.ak-editor-content-area');
+      var unbindMouseEnter;
+      var unbindMouseLeave;
+      if (editorContentArea) {
+        unbindMouseEnter = bind(editorContentArea, {
+          type: 'mouseenter',
+          listener: function listener() {
+            handleMouseEnter(view);
+          }
+        });
+        unbindMouseLeave = bind(editorContentArea, {
+          type: 'mouseleave',
+          listener: function listener() {
+            handleMouseLeave(view);
+          }
+        });
+      }
+      return {
+        destroy: function destroy() {
+          var _unbindMouseEnter, _unbindMouseLeave;
+          (_unbindMouseEnter = unbindMouseEnter) === null || _unbindMouseEnter === void 0 || _unbindMouseEnter();
+          (_unbindMouseLeave = unbindMouseLeave) === null || _unbindMouseLeave === void 0 || _unbindMouseLeave();
+        }
+      };
+    } : undefined
   });
 };
 export var getInteractionTrackingState = function getInteractionTrackingState(state) {

package/dist/esm/ui/global-styles.js

@@ -7,7 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css, Global, jsx } from '@emotion/react';
 import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
-import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -18,6 +18,12 @@ import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
  * including those within table rows and media.
  */
 var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
+var gutterPaddingWidth = function gutterPaddingWidth() {
+  return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? "".concat(akEditorGutterPaddingDynamic(), "px") : '100%';
+};
+var gutterPaddingLeft = function gutterPaddingLeft() {
+  return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? "-".concat(akEditorGutterPaddingDynamic(), "px") : '-100px';
+};
 var extendedHoverZone = function extendedHoverZone() {
   return css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
@@ -37,8 +43,10 @@ var extendedHoverZone = function extendedHoverZone() {
     content: '""',
     position: 'absolute',
     top: 0,
-    left: '-100%',
-    width: '100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    left: gutterPaddingLeft(),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    width: gutterPaddingWidth(),
     height: '100%',
     cursor: 'default',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values

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

@@ -17,7 +17,8 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
     children = _ref.children;
   var isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
   var isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
-  var shouldHide = isTypeAheadOpen || isEditing;
+  var isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
+  var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);

package/dist/types/blockControlsPluginType.d.ts

@@ -69,7 +69,9 @@ export type BlockControlsSharedState = {
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
+    lastDragCancelled: boolean;
     isEditing?: boolean;
+    isMouseOut?: boolean;
     isSelectedViaDragHandle?: boolean;
 } | undefined;
 export type HandleOptions = {

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

@@ -1,3 +1,5 @@
 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;

package/dist/types/pm-plugins/interaction-tracking/handle-mouse-move.d.ts

@@ -1,2 +1,4 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const handleMouseMove: (view: EditorView) => boolean;
+export declare const handleMouseLeave: (view: EditorView) => boolean;
+export declare const handleMouseEnter: (view: EditorView) => boolean;

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

@@ -6,6 +6,10 @@ export type InteractionTrackingPluginState = {
      * Tracks if a users intention is to edit the document (e.g. typing, deleting, etc.)
      */
     isEditing: boolean;
+    /**
+     * Tracks if the mouse is outside of the editor
+     */
+    isMouseOut?: boolean;
 };
 export declare const interactionTrackingPluginKey: PluginKey<InteractionTrackingPluginState>;
 export declare const createInteractionTrackingPlugin: () => SafePlugin<InteractionTrackingPluginState>;

package/dist/types-ts4.5/blockControlsPluginType.d.ts

@@ -69,7 +69,9 @@ export type BlockControlsSharedState = {
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
+    lastDragCancelled: boolean;
     isEditing?: boolean;
+    isMouseOut?: boolean;
     isSelectedViaDragHandle?: boolean;
 } | undefined;
 export type HandleOptions = {

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

@@ -1,3 +1,5 @@
 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;

package/dist/types-ts4.5/pm-plugins/interaction-tracking/handle-mouse-move.d.ts

@@ -1,2 +1,4 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const handleMouseMove: (view: EditorView) => boolean;
+export declare const handleMouseLeave: (view: EditorView) => boolean;
+export declare const handleMouseEnter: (view: EditorView) => boolean;

package/dist/types-ts4.5/pm-plugins/interaction-tracking/pm-plugin.d.ts

@@ -6,6 +6,10 @@ export type InteractionTrackingPluginState = {
      * Tracks if a users intention is to edit the document (e.g. typing, deleting, etc.)
      */
     isEditing: boolean;
+    /**
+     * Tracks if the mouse is outside of the editor
+     */
+    isMouseOut?: boolean;
 };
 export declare const interactionTrackingPluginKey: PluginKey<InteractionTrackingPluginState>;
 export declare const createInteractionTrackingPlugin: () => SafePlugin<InteractionTrackingPluginState>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.17.0",
+	"version": "3.18.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^6.2.0",
+		"@atlaskit/tmp-editor-statsig": "^7.0.0",
 		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -201,6 +201,9 @@
 		"platform_editor_controls_patch_11": {
 			"type": "boolean"
 		},
+		"platform_editor_controls_patch_13": {
+			"type": "boolean"
+		},
 		"platform_editor_breakout_resizing_hello_release": {
 			"type": "boolean"
 		}