@atlaskit/editor-plugin-block-controls 3.8.6 → 3.8.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.8.7
+
+### Patch Changes
+
+- [#138396](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138396)
+  [`6a11423e1442f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a11423e1442f) -
+  Add new plugin which tracks user typing, add typing check to visibility container of widgets
+
 ## 3.8.6
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockControlsPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -15,6 +14,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./editor-commands/move-node");
 var _moveToLayout = require("./editor-commands/move-to-layout");
 var _firstNodeDecPlugin = require("./pm-plugins/first-node-dec-plugin");
+var _pmPlugin = require("./pm-plugins/interaction-tracking/pm-plugin");
 var _main = require("./pm-plugins/main");
 var _getSelection = require("./pm-plugins/utils/getSelection");
 var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
@@ -27,7 +27,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   return {
     name: 'blockControls',
     pmPlugins: function pmPlugins() {
-      var plugins = [{
+      var pmPlugins = [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
@@ -35,13 +35,19 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
-      var controlsPlugins = [{
-        name: 'firstNodeDec',
-        plugin: function plugin() {
-          return (0, _firstNodeDecPlugin.firstNodeDecPlugin)();
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        if ((0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility')) {
+          pmPlugins.push({
+            name: 'blockControlsInteractionTrackingPlugin',
+            plugin: _pmPlugin.createInteractionTrackingPlugin
+          });
         }
-      }];
-      return [].concat(plugins, (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? controlsPlugins : []));
+        pmPlugins.push({
+          name: 'firstNodeDec',
+          plugin: _firstNodeDecPlugin.firstNodeDecPlugin
+        });
+      }
+      return pmPlugins;
     },
     commands: {
       moveNode: (0, _moveNode.moveNode)(api),
@@ -161,7 +167,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP;
       if (!editorState) {
         return undefined;
       }
@@ -173,7 +179,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isPMDragging: (_key$getState$isPMDra = (_key$getState5 = _main.key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
         multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = _main.key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
         isShiftDown: (_key$getState$isShift = (_key$getState7 = _main.key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
-        lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false
+        lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = _main.key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
+        isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing
       };
     },
     contentComponent: function contentComponent(_ref7) {

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stopEditing = exports.startEditing = void 0;
+var _pmPlugin = require("./pm-plugin");
+var stopEditing = exports.stopEditing = function stopEditing(view) {
+  view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, {
+    type: 'stopEditing'
+  }));
+};
+var startEditing = exports.startEditing = function startEditing(view) {
+  view.dispatch(view.state.tr.setMeta(_pmPlugin.interactionTrackingPluginKey, {
+    type: 'startEditing'
+  }));
+};

package/dist/cjs/pm-plugins/interaction-tracking/handle-key-down.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleKeyDown = void 0;
+var _commands = require("./commands");
+var _pmPlugin = require("./pm-plugin");
+var handleKeyDown = exports.handleKeyDown = function handleKeyDown(view, event) {
+  // Check if this is a keyboard shortcut (Ctrl/Cmd + key)
+  var isShortcut = event.ctrlKey || event.metaKey || event.altKey;
+  if (isShortcut) {
+    return false;
+  }
+
+  // Only consider actual typing keys (not shortcuts)
+  // We need to check if it's a single character key or a deletion key
+  // and ensure it's not part of a shortcut
+  var isTypingKey =
+  // Single character keys (letters, numbers, symbols)
+  event.key.length === 1 || event.key === 'Backspace' || event.key === 'Delete' || event.key === ' ' || event.key === 'Enter';
+  if (!isTypingKey) {
+    return false;
+  }
+  var state = (0, _pmPlugin.getInteractionTrackingState)(view.state);
+
+  // if user hasnt started typing yet, start timer
+  if (!(state !== null && state !== void 0 && state.isEditing)) {
+    (0, _commands.startEditing)(view);
+  }
+  return false;
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMouseMove = void 0;
+var _commands = require("./commands");
+var _pmPlugin = require("./pm-plugin");
+var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view) {
+  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);
+  }
+  return false;
+};

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.interactionTrackingPluginKey = exports.getInteractionTrackingState = exports.createInteractionTrackingPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _handleKeyDown = require("./handle-key-down");
+var _handleMouseMove = require("./handle-mouse-move");
+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 {
+          isEditing: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(interactionTrackingPluginKey);
+        switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+          case 'startEditing':
+            return {
+              isEditing: true
+            };
+          case 'stopEditing':
+            return {
+              isEditing: false
+            };
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      handleKeyDown: _handleKeyDown.handleKeyDown,
+      handleDOMEvents: {
+        mousemove: _handleMouseMove.handleMouseMove
+      }
+    }
+  });
+};
+var getInteractionTrackingState = exports.getInteractionTrackingState = function getInteractionTrackingState(state) {
+  return interactionTrackingPluginKey.getState(state);
+};

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

@@ -17,14 +17,15 @@ var visibleStyles = (0, _primitives.xcss)({
 });
 var hiddenStyles = (0, _primitives.xcss)({
   opacity: 0,
-  // CONFIRM this change doesnt cause this issue to regress https://product-fabric.atlassian.net/browse/ED-24136
   visibility: 'hidden'
 });
 var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children;
-  var isOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
+  var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
+  var isEditing = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isEditing');
+  var shouldHide = isTypeAheadOpen || isEditing;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [baseStyles, isOpen ? hiddenStyles : visibleStyles]
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);
 };

package/dist/es2019/blockControlsPlugin.js

@@ -6,6 +6,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './editor-commands/move-node';
 import { moveToLayout } from './editor-commands/move-to-layout';
 import { firstNodeDecPlugin } from './pm-plugins/first-node-dec-plugin';
+import { createInteractionTrackingPlugin, interactionTrackingPluginKey } from './pm-plugins/interaction-tracking/pm-plugin';
 import { createPlugin, key } from './pm-plugins/main';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import BlockMenu from './ui/block-menu';
@@ -16,18 +17,26 @@ export const blockControlsPlugin = ({
 }) => ({
   name: 'blockControls',
   pmPlugins() {
-    const plugins = [{
+    const pmPlugins = [{
       name: 'blockControlsPmPlugin',
       plugin: ({
         getIntl,
         nodeViewPortalProviderAPI
       }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI)
     }];
-    const controlsPlugins = [{
-      name: 'firstNodeDec',
-      plugin: () => firstNodeDecPlugin()
-    }];
-    return [...plugins, ...(editorExperiment('platform_editor_controls', 'variant1') ? controlsPlugins : [])];
+    if (editorExperiment('platform_editor_controls', 'variant1')) {
+      if (fg('platform_editor_controls_widget_visibility')) {
+        pmPlugins.push({
+          name: 'blockControlsInteractionTrackingPlugin',
+          plugin: createInteractionTrackingPlugin
+        });
+      }
+      pmPlugins.push({
+        name: 'firstNodeDec',
+        plugin: firstNodeDecPlugin
+      });
+    }
+    return pmPlugins;
   },
   commands: {
     moveNode: moveNode(api),
@@ -149,7 +158,7 @@ export const blockControlsPlugin = ({
     }
   },
   getSharedState(editorState) {
-    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8;
+    var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP;
     if (!editorState) {
       return undefined;
     }
@@ -161,7 +170,8 @@ export const blockControlsPlugin = ({
       isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
       multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
       isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
-      lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false
+      lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
+      isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing
     };
   },
   contentComponent({

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

@@ -0,0 +1,11 @@
+import { interactionTrackingPluginKey } from './pm-plugin';
+export const stopEditing = view => {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'stopEditing'
+  }));
+};
+export const startEditing = view => {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'startEditing'
+  }));
+};

package/dist/es2019/pm-plugins/interaction-tracking/handle-key-down.js

@@ -0,0 +1,26 @@
+import { startEditing } from './commands';
+import { getInteractionTrackingState } from './pm-plugin';
+export const handleKeyDown = (view, event) => {
+  // Check if this is a keyboard shortcut (Ctrl/Cmd + key)
+  const isShortcut = event.ctrlKey || event.metaKey || event.altKey;
+  if (isShortcut) {
+    return false;
+  }
+
+  // Only consider actual typing keys (not shortcuts)
+  // We need to check if it's a single character key or a deletion key
+  // and ensure it's not part of a shortcut
+  const isTypingKey =
+  // Single character keys (letters, numbers, symbols)
+  event.key.length === 1 || event.key === 'Backspace' || event.key === 'Delete' || event.key === ' ' || event.key === 'Enter';
+  if (!isTypingKey) {
+    return false;
+  }
+  const state = getInteractionTrackingState(view.state);
+
+  // if user hasnt started typing yet, start timer
+  if (!(state !== null && state !== void 0 && state.isEditing)) {
+    startEditing(view);
+  }
+  return false;
+};

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

@@ -0,0 +1,10 @@
+import { stopEditing } from './commands';
+import { getInteractionTrackingState } from './pm-plugin';
+export const handleMouseMove = view => {
+  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) {
+    stopEditing(view);
+  }
+  return false;
+};

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

@@ -0,0 +1,40 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { handleKeyDown } from './handle-key-down';
+import { handleMouseMove } from './handle-mouse-move';
+export const interactionTrackingPluginKey = new PluginKey('interactionTrackingPlugin');
+export const createInteractionTrackingPlugin = () => {
+  return new SafePlugin({
+    key: interactionTrackingPluginKey,
+    state: {
+      init() {
+        return {
+          isEditing: false
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(interactionTrackingPluginKey);
+        switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+          case 'startEditing':
+            return {
+              isEditing: true
+            };
+          case 'stopEditing':
+            return {
+              isEditing: false
+            };
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      handleKeyDown,
+      handleDOMEvents: {
+        mousemove: handleMouseMove
+      }
+    }
+  });
+};
+export const getInteractionTrackingState = state => {
+  return interactionTrackingPluginKey.getState(state);
+};

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

@@ -10,15 +10,16 @@ const visibleStyles = xcss({
 });
 const hiddenStyles = xcss({
   opacity: 0,
-  // CONFIRM this change doesnt cause this issue to regress https://product-fabric.atlassian.net/browse/ED-24136
   visibility: 'hidden'
 });
 export const VisibilityContainer = ({
   api,
   children
 }) => {
-  const isOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
+  const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
+  const isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
+  const shouldHide = isTypeAheadOpen || isEditing;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: [baseStyles, isOpen ? hiddenStyles : visibleStyles]
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);
 };

package/dist/esm/blockControlsPlugin.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 React from 'react';
@@ -10,6 +9,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './editor-commands/move-node';
 import { moveToLayout } from './editor-commands/move-to-layout';
 import { firstNodeDecPlugin } from './pm-plugins/first-node-dec-plugin';
+import { createInteractionTrackingPlugin, interactionTrackingPluginKey } from './pm-plugins/interaction-tracking/pm-plugin';
 import { createPlugin, key } from './pm-plugins/main';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import BlockMenu from './ui/block-menu';
@@ -20,7 +20,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   return {
     name: 'blockControls',
     pmPlugins: function pmPlugins() {
-      var plugins = [{
+      var pmPlugins = [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
@@ -28,13 +28,19 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           return createPlugin(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
-      var controlsPlugins = [{
-        name: 'firstNodeDec',
-        plugin: function plugin() {
-          return firstNodeDecPlugin();
+      if (editorExperiment('platform_editor_controls', 'variant1')) {
+        if (fg('platform_editor_controls_widget_visibility')) {
+          pmPlugins.push({
+            name: 'blockControlsInteractionTrackingPlugin',
+            plugin: createInteractionTrackingPlugin
+          });
         }
-      }];
-      return [].concat(plugins, _toConsumableArray(editorExperiment('platform_editor_controls', 'variant1') ? controlsPlugins : []));
+        pmPlugins.push({
+          name: 'firstNodeDec',
+          plugin: firstNodeDecPlugin
+        });
+      }
+      return pmPlugins;
     },
     commands: {
       moveNode: moveNode(api),
@@ -154,7 +160,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
       }
     },
     getSharedState: function getSharedState(editorState) {
-      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8;
+      var _key$getState$isMenuO, _key$getState, _key$getState$menuTri, _key$getState2, _key$getState$activeN, _key$getState3, _key$getState$isDragg, _key$getState4, _key$getState$isPMDra, _key$getState5, _key$getState$multiSe, _key$getState6, _key$getState$isShift, _key$getState7, _key$getState$lastDra, _key$getState8, _interactionTrackingP;
       if (!editorState) {
         return undefined;
       }
@@ -166,7 +172,8 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isPMDragging: (_key$getState$isPMDra = (_key$getState5 = key.getState(editorState)) === null || _key$getState5 === void 0 ? void 0 : _key$getState5.isPMDragging) !== null && _key$getState$isPMDra !== void 0 ? _key$getState$isPMDra : false,
         multiSelectDnD: (_key$getState$multiSe = (_key$getState6 = key.getState(editorState)) === null || _key$getState6 === void 0 ? void 0 : _key$getState6.multiSelectDnD) !== null && _key$getState$multiSe !== void 0 ? _key$getState$multiSe : undefined,
         isShiftDown: (_key$getState$isShift = (_key$getState7 = key.getState(editorState)) === null || _key$getState7 === void 0 ? void 0 : _key$getState7.isShiftDown) !== null && _key$getState$isShift !== void 0 ? _key$getState$isShift : undefined,
-        lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false
+        lastDragCancelled: (_key$getState$lastDra = (_key$getState8 = key.getState(editorState)) === null || _key$getState8 === void 0 ? void 0 : _key$getState8.lastDragCancelled) !== null && _key$getState$lastDra !== void 0 ? _key$getState$lastDra : false,
+        isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing
       };
     },
     contentComponent: function contentComponent(_ref7) {

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

@@ -0,0 +1,11 @@
+import { interactionTrackingPluginKey } from './pm-plugin';
+export var stopEditing = function stopEditing(view) {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'stopEditing'
+  }));
+};
+export var startEditing = function startEditing(view) {
+  view.dispatch(view.state.tr.setMeta(interactionTrackingPluginKey, {
+    type: 'startEditing'
+  }));
+};

package/dist/esm/pm-plugins/interaction-tracking/handle-key-down.js

@@ -0,0 +1,26 @@
+import { startEditing } from './commands';
+import { getInteractionTrackingState } from './pm-plugin';
+export var handleKeyDown = function handleKeyDown(view, event) {
+  // Check if this is a keyboard shortcut (Ctrl/Cmd + key)
+  var isShortcut = event.ctrlKey || event.metaKey || event.altKey;
+  if (isShortcut) {
+    return false;
+  }
+
+  // Only consider actual typing keys (not shortcuts)
+  // We need to check if it's a single character key or a deletion key
+  // and ensure it's not part of a shortcut
+  var isTypingKey =
+  // Single character keys (letters, numbers, symbols)
+  event.key.length === 1 || event.key === 'Backspace' || event.key === 'Delete' || event.key === ' ' || event.key === 'Enter';
+  if (!isTypingKey) {
+    return false;
+  }
+  var state = getInteractionTrackingState(view.state);
+
+  // if user hasnt started typing yet, start timer
+  if (!(state !== null && state !== void 0 && state.isEditing)) {
+    startEditing(view);
+  }
+  return false;
+};

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

@@ -0,0 +1,10 @@
+import { stopEditing } from './commands';
+import { getInteractionTrackingState } from './pm-plugin';
+export var handleMouseMove = function handleMouseMove(view) {
+  var state = getInteractionTrackingState(view.state);
+  // if user has stopped editing and moved their mouse, show block controls again
+  if (state !== null && state !== void 0 && state.isEditing) {
+    stopEditing(view);
+  }
+  return false;
+};

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

@@ -0,0 +1,40 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { handleKeyDown } from './handle-key-down';
+import { 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 {
+          isEditing: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(interactionTrackingPluginKey);
+        switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+          case 'startEditing':
+            return {
+              isEditing: true
+            };
+          case 'stopEditing':
+            return {
+              isEditing: false
+            };
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      handleKeyDown: handleKeyDown,
+      handleDOMEvents: {
+        mousemove: handleMouseMove
+      }
+    }
+  });
+};
+export var getInteractionTrackingState = function getInteractionTrackingState(state) {
+  return interactionTrackingPluginKey.getState(state);
+};

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

@@ -10,14 +10,15 @@ var visibleStyles = xcss({
 });
 var hiddenStyles = xcss({
   opacity: 0,
-  // CONFIRM this change doesnt cause this issue to regress https://product-fabric.atlassian.net/browse/ED-24136
   visibility: 'hidden'
 });
 export var VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children;
-  var isOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
+  var isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
+  var isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
+  var shouldHide = isTypeAheadOpen || isEditing;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: [baseStyles, isOpen ? hiddenStyles : visibleStyles]
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);
 };

package/dist/types/blockControlsPluginType.d.ts

@@ -60,6 +60,7 @@ export type BlockControlsSharedState = {
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
+    isEditing?: boolean;
 } | undefined;
 export type HandleOptions = {
     isFocused: boolean;

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

@@ -0,0 +1,3 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const stopEditing: (view: EditorView) => void;
+export declare const startEditing: (view: EditorView) => void;

package/dist/types/pm-plugins/interaction-tracking/handle-key-down.d.ts

@@ -0,0 +1,2 @@
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const handleKeyDown: (view: EditorView, event: KeyboardEvent) => boolean;

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

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

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

@@ -0,0 +1,12 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export type InteractionTrackingPluginState = {
+    /**
+     * Tracks if a users intention is to edit the document (e.g. typing, deleting, etc.)
+     */
+    isEditing: boolean;
+};
+export declare const interactionTrackingPluginKey: PluginKey<InteractionTrackingPluginState>;
+export declare const createInteractionTrackingPlugin: () => SafePlugin<InteractionTrackingPluginState>;
+export declare const getInteractionTrackingState: (state: EditorState) => InteractionTrackingPluginState | undefined;

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

@@ -60,6 +60,7 @@ export type BlockControlsSharedState = {
     isPMDragging: boolean;
     multiSelectDnD?: MultiSelectDnD;
     isShiftDown?: boolean;
+    isEditing?: boolean;
 } | undefined;
 export type HandleOptions = {
     isFocused: boolean;

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

@@ -0,0 +1,3 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const stopEditing: (view: EditorView) => void;
+export declare const startEditing: (view: EditorView) => void;

package/dist/types-ts4.5/pm-plugins/interaction-tracking/handle-key-down.d.ts

@@ -0,0 +1,2 @@
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const handleKeyDown: (view: EditorView, event: KeyboardEvent) => boolean;

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

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

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

@@ -0,0 +1,12 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export type InteractionTrackingPluginState = {
+    /**
+     * Tracks if a users intention is to edit the document (e.g. typing, deleting, etc.)
+     */
+    isEditing: boolean;
+};
+export declare const interactionTrackingPluginKey: PluginKey<InteractionTrackingPluginState>;
+export declare const createInteractionTrackingPlugin: () => SafePlugin<InteractionTrackingPluginState>;
+export declare const getInteractionTrackingState: (state: EditorState) => InteractionTrackingPluginState | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.8.6",
+	"version": "3.8.7",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
-		"@atlaskit/primitives": "^14.3.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.6.0",
 		"@atlaskit/tokens": "^4.7.0",