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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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
+
+- [#137780](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137780)
+  [`6940941e679c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6940941e679c5) -
+  Move style decoration to own plugin
+- Updated dependencies
+
 ## 3.8.5
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -13,6 +13,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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"));
@@ -25,7 +27,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   return {
     name: 'blockControls',
     pmPlugins: function pmPlugins() {
-      return [{
+      var pmPlugins = [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
@@ -33,6 +35,19 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        if ((0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility')) {
+          pmPlugins.push({
+            name: 'blockControlsInteractionTrackingPlugin',
+            plugin: _pmPlugin.createInteractionTrackingPlugin
+          });
+        }
+        pmPlugins.push({
+          name: 'firstNodeDec',
+          plugin: _firstNodeDecPlugin.firstNodeDecPlugin
+        });
+      }
+      return pmPlugins;
     },
     commands: {
       moveNode: (0, _moveNode.moveNode)(api),
@@ -152,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;
       }
@@ -164,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/decorations-anchor.js

@@ -97,9 +97,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
       return shouldDescend; //skip over, don't consider it a valid depth
     }
-    var anchorStyles = pos === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
-    // we're rendering quick insert button and drag handle. For now override margin-top to 0
-    "anchor-name: ".concat(anchorName, ";margin-top:0px;") : "anchor-name: ".concat(anchorName, ";");
+    var anchorStyles = "anchor-name: ".concat(anchorName, ";");
     decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
       style: anchorStyles
     }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {

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

@@ -54,9 +54,9 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
     }
     /*
-    	* We disable mouseover event to fix flickering issue on hover
-    	* However, the tooltip for nested drag handle is no long working.
-    	*/
+     * We disable mouseover event to fix flickering issue on hover
+     * However, the tooltip for nested drag handle is no long working.
+     */
     if (newPos === undefined || !isTopLevelNode) {
       // This will also hide the tooltip.
       unbind = (0, _bindEventListener.bind)(element, {

package/dist/cjs/pm-plugins/first-node-dec-plugin.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.firstNodeDecPluginKey = exports.firstNodeDecPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var firstNodeDecPluginKey = exports.firstNodeDecPluginKey = new _state.PluginKey('firstNodeDec');
+var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
+  ;
+  var firstNode = state.doc.firstChild;
+  if (!firstNode) {
+    return _view.DecorationSet.empty;
+  }
+  return _view.DecorationSet.create(state.doc, [_view.Decoration.node(0, firstNode.nodeSize, {
+    style: 'margin-top: 0'
+  })]);
+};
+var firstNodeDecPlugin = exports.firstNodeDecPlugin = function firstNodeDecPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: firstNodeDecPluginKey,
+    state: {
+      init: function init(_, state) {
+        return createFirstNodeDecSet(state);
+      },
+      apply: function apply(tr, currentState, _, newState) {
+        var isDocChanged = tr.docChanged && tr.steps.some(function (step) {
+          return step instanceof _transform.ReplaceStep || step instanceof _transform.ReplaceAroundStep;
+        });
+        // Reapply decorations if there are any steps that modify the document
+        if (isDocChanged) {
+          return createFirstNodeDecSet(newState);
+        }
+        return currentState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return firstNodeDecPluginKey.getState(state);
+      }
+    }
+  });
+};

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

@@ -5,6 +5,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 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';
@@ -15,13 +17,26 @@ export const blockControlsPlugin = ({
 }) => ({
   name: 'blockControls',
   pmPlugins() {
-    return [{
+    const pmPlugins = [{
       name: 'blockControlsPmPlugin',
       plugin: ({
         getIntl,
         nodeViewPortalProviderAPI
       }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI)
     }];
+    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),
@@ -143,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;
     }
@@ -155,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/decorations-anchor.js

@@ -87,10 +87,7 @@ export const nodeDecorations = (newState, from, to) => {
     if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
       return shouldDescend; //skip over, don't consider it a valid depth
     }
-    const anchorStyles = pos === 0 && editorExperiment('platform_editor_controls', 'variant1') ?
-    // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
-    // we're rendering quick insert button and drag handle. For now override margin-top to 0
-    `anchor-name: ${anchorName};margin-top:0px;` : `anchor-name: ${anchorName};`;
+    const anchorStyles = `anchor-name: ${anchorName};`;
     decs.push(Decoration.node(pos, pos + node.nodeSize, {
       style: anchorStyles,
       ['data-drag-handler-anchor-name']: anchorName,

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

@@ -45,9 +45,9 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
       isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
     }
     /*
-    	* We disable mouseover event to fix flickering issue on hover
-    	* However, the tooltip for nested drag handle is no long working.
-    	*/
+     * We disable mouseover event to fix flickering issue on hover
+     * However, the tooltip for nested drag handle is no long working.
+     */
     if (newPos === undefined || !isTopLevelNode) {
       // This will also hide the tooltip.
       unbind = bind(element, {

package/dist/es2019/pm-plugins/first-node-dec-plugin.js

@@ -0,0 +1,36 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
+export const firstNodeDecPluginKey = new PluginKey('firstNodeDec');
+const createFirstNodeDecSet = state => {
+  ;
+  const firstNode = state.doc.firstChild;
+  if (!firstNode) {
+    return DecorationSet.empty;
+  }
+  return DecorationSet.create(state.doc, [Decoration.node(0, firstNode.nodeSize, {
+    style: 'margin-top: 0'
+  })]);
+};
+export const firstNodeDecPlugin = () => new SafePlugin({
+  key: firstNodeDecPluginKey,
+  state: {
+    init(_, state) {
+      return createFirstNodeDecSet(state);
+    },
+    apply(tr, currentState, _, newState) {
+      const isDocChanged = tr.docChanged && tr.steps.some(step => step instanceof ReplaceStep || step instanceof ReplaceAroundStep);
+      // Reapply decorations if there are any steps that modify the document
+      if (isDocChanged) {
+        return createFirstNodeDecSet(newState);
+      }
+      return currentState;
+    }
+  },
+  props: {
+    decorations(state) {
+      return firstNodeDecPluginKey.getState(state);
+    }
+  }
+});

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

@@ -8,6 +8,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 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';
@@ -18,7 +20,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   return {
     name: 'blockControls',
     pmPlugins: function pmPlugins() {
-      return [{
+      var pmPlugins = [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
@@ -26,6 +28,19 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           return createPlugin(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
+      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),
@@ -145,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;
       }
@@ -157,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/decorations-anchor.js

@@ -90,9 +90,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
     if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
       return shouldDescend; //skip over, don't consider it a valid depth
     }
-    var anchorStyles = pos === 0 && editorExperiment('platform_editor_controls', 'variant1') ? // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
-    // we're rendering quick insert button and drag handle. For now override margin-top to 0
-    "anchor-name: ".concat(anchorName, ";margin-top:0px;") : "anchor-name: ".concat(anchorName, ";");
+    var anchorStyles = "anchor-name: ".concat(anchorName, ";");
     decs.push(Decoration.node(pos, pos + node.nodeSize, _defineProperty(_defineProperty(_defineProperty({
       style: anchorStyles
     }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {

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

@@ -47,9 +47,9 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
       isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
     }
     /*
-    	* We disable mouseover event to fix flickering issue on hover
-    	* However, the tooltip for nested drag handle is no long working.
-    	*/
+     * We disable mouseover event to fix flickering issue on hover
+     * However, the tooltip for nested drag handle is no long working.
+     */
     if (newPos === undefined || !isTopLevelNode) {
       // This will also hide the tooltip.
       unbind = bind(element, {

package/dist/esm/pm-plugins/first-node-dec-plugin.js

@@ -0,0 +1,40 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
+export var firstNodeDecPluginKey = new PluginKey('firstNodeDec');
+var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
+  ;
+  var firstNode = state.doc.firstChild;
+  if (!firstNode) {
+    return DecorationSet.empty;
+  }
+  return DecorationSet.create(state.doc, [Decoration.node(0, firstNode.nodeSize, {
+    style: 'margin-top: 0'
+  })]);
+};
+export var firstNodeDecPlugin = function firstNodeDecPlugin() {
+  return new SafePlugin({
+    key: firstNodeDecPluginKey,
+    state: {
+      init: function init(_, state) {
+        return createFirstNodeDecSet(state);
+      },
+      apply: function apply(tr, currentState, _, newState) {
+        var isDocChanged = tr.docChanged && tr.steps.some(function (step) {
+          return step instanceof ReplaceStep || step instanceof ReplaceAroundStep;
+        });
+        // Reapply decorations if there are any steps that modify the document
+        if (isDocChanged) {
+          return createFirstNodeDecSet(newState);
+        }
+        return currentState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return firstNodeDecPluginKey.getState(state);
+      }
+    }
+  });
+};

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/first-node-dec-plugin.d.ts

@@ -0,0 +1,5 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const firstNodeDecPluginKey: PluginKey<DecorationSet>;
+export declare const firstNodeDecPlugin: () => SafePlugin<DecorationSet>;

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/first-node-dec-plugin.d.ts

@@ -0,0 +1,5 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const firstNodeDecPluginKey: PluginKey<DecorationSet>;
+export declare const firstNodeDecPlugin: () => SafePlugin<DecorationSet>;

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.5",
+	"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",