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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.8.8
+
+### Patch Changes
+
+- [#138622](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138622)
+  [`09f425c925d38`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/09f425c925d38) -
+  Add support for quick insert in cell selection
+
+## 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/editor-commands/move-node.js

@@ -84,17 +84,13 @@ function transformSourceSlice(nodeCopy, destType) {
   }
   return nodeCopy;
 }
-var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from, $to) {
+var nodesSupportDragLayoutColumnInto = ['tableCell', 'tableHeader', 'panel', 'expand', 'nestedExpand'];
+var isDragLayoutColumnIntoSupportedNodes = function isDragLayoutColumnIntoSupportedNodes($from, $to) {
   var _$from$nodeAfter;
-  return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
-};
-var isDragLayoutColumnIntoTable = function isDragLayoutColumnIntoTable($from, $to) {
-  var _$from$nodeAfter2;
-  return ((_$from$nodeAfter2 = $from.nodeAfter) === null || _$from$nodeAfter2 === void 0 ? void 0 : _$from$nodeAfter2.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && ($to.parent.type.name === 'tableCell' || $to.parent.type.name === 'tableHeader');
-};
-var isDragLayoutColumnIntoPanel = function isDragLayoutColumnIntoPanel($from, $to) {
-  var _$from$nodeAfter3;
-  return ((_$from$nodeAfter3 = $from.nodeAfter) === null || _$from$nodeAfter3 === void 0 ? void 0 : _$from$nodeAfter3.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.parent.type.name === 'panel';
+  var isTopLevel = $to.depth === 0;
+  var isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes($to.parent.type.name);
+  var supportedCondition = (0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes') ? isDragIntoNodes || isTopLevel : isTopLevel;
+  return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;
 };
 
 /**
@@ -383,19 +379,15 @@ var moveNode = exports.moveNode = function moveNode(api) {
       var destType = $to.node().type;
       var destParent = $to.node($to.depth);
       var sourceNode = $handlePos.nodeAfter;
-      var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
-      var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
-      var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
 
       //TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
-      // Move a layout column to top level
-      // Move a layout column into a table cell, only moves the content into the cell
-      // Move a layout column into a panel, only moves the content into the panel
-      if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
+      // Move a layout column to top level, or table cell, or panel, or expand, only moves the content into them
+      if (sourceNode && isDragLayoutColumnIntoSupportedNodes($handlePos, $to)) {
         // need update after we support single column layout.
         var layoutColumnContent = sourceNode.content;
         var fragment;
-        if (dragLayoutColumnIntoTable) {
+        // if drop into table, and layout column contains expand, transform it to nestedExpand
+        if (['tableCell', 'tableHeader'].includes($to.parent.type.name)) {
           var contentContainsExpand = (0, _utils2.findChildrenByType)(sourceNode, expand).length > 0;
           fragment = contentContainsExpand ? (0, _validation.transformFragmentExpandToNestedExpand)(_model.Fragment.from(layoutColumnContent)) : _model.Fragment.from(layoutColumnContent);
           if (!fragment) {

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

@@ -10,7 +10,6 @@ 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;

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/pm-plugins/utils/validation.js

@@ -90,8 +90,8 @@ var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNes
 });
 var canCreateNodeWithContentInsideAnotherNode = exports.canCreateNodeWithContentInsideAnotherNode = function canCreateNodeWithContentInsideAnotherNode(nodeTypesToCreate, nodeWithTargetFragment) {
   try {
-    return !!nodeTypesToCreate.every(function (nodeType) {
-      return nodeType.createChecked({}, nodeWithTargetFragment);
+    return !!nodeTypesToCreate.every(function (nodeTypeToCreate) {
+      return nodeTypeToCreate.createChecked({}, nodeWithTargetFragment);
     });
   } catch (e) {
     return false;
@@ -100,24 +100,29 @@ var canCreateNodeWithContentInsideAnotherNode = exports.canCreateNodeWithContent
 function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
   var srcNodeType = srcNode.type;
   var schema = srcNodeType.schema;
-  var destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
-  var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
+  var _schema$nodes = schema.nodes,
+    table = _schema$nodes.table,
+    tableCell = _schema$nodes.tableCell,
+    tableHeader = _schema$nodes.tableHeader,
+    expand = _schema$nodes.expand,
+    nestedExpand = _schema$nodes.nestedExpand,
+    doc = _schema$nodes.doc,
+    panel = _schema$nodes.panel,
+    layoutColumn = _schema$nodes.layoutColumn,
+    layoutSection = _schema$nodes.layoutSection;
+  var destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type;
+  var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type;
   var layoutColumnContent = srcNode.content;
   var isNestingTablesSupported = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _experiments.editorExperiment)('nested-tables-in-tables', true, {
     exposure: true
   });
-  var tableNodeType = schema.nodes.table;
-  if (activeNodeType === 'layoutColumn' && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+  if (activeNodeType === layoutColumn && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
     // Allow drag layout column and drop into layout section
-    if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || destParentNodeType === 'doc') {
+    if ((destNode === null || destNode === void 0 ? void 0 : destNode.type) === layoutSection || destParentNodeType === doc) {
       return true;
     }
     if ((0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes')) {
-      if (destParentNodeType === 'tableCell' || destParentNodeType === 'tableHeader') {
-        var _schema$nodes = schema.nodes,
-          tableCell = _schema$nodes.tableCell,
-          tableHeader = _schema$nodes.tableHeader,
-          expand = _schema$nodes.expand;
+      if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
         var contentContainsExpand = (0, _utils.findChildrenByType)(srcNode, expand).length > 0;
         //convert expand to nestedExpand if there are expands inside the layout column
         // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
@@ -127,36 +132,41 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
         }
         return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
       }
-      if (destParentNodeType === 'panel') {
-        var panel = schema.nodes.panel;
+      if (destParentNodeType === panel) {
         return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
       }
+      if (destParentNodeType === expand) {
+        return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
+      }
+      if (destParentNodeType === nestedExpand) {
+        return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
+      }
     }
   }
 
   // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
   if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
-    if (destParentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
+    if (destParentNodeType === expand && (activeNodeType === expand || activeNodeType === nestedExpand)) {
       return false;
     }
   }
 
   // NOTE: this will block drop targets from showing for dragging a table into another table
   // unless nested tables are supported and the nesting depth does not exceed 1
-  if ((destParentNodeType === 'tableCell' || destParentNodeType === 'tableHeader') && activeNodeType === 'table') {
-    var nestingDepth = (0, _nesting.getParentOfTypeCount)(tableNodeType)($destNodePos);
+  if ((destParentNodeType === tableCell || destParentNodeType === tableHeader) && activeNodeType === table) {
+    var nestingDepth = (0, _nesting.getParentOfTypeCount)(table)($destNodePos);
     if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
       return false;
     }
   }
   if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
     if (memoizedTransformExpandToNestedExpand(srcNode)) {
-      srcNodeType = schema.nodes.nestedExpand;
+      srcNodeType = nestedExpand;
     } else {
       return false;
     }
   } else if ((isDoc(destParent.type) || isLayoutColumn(destParent.type)) && isNestedExpand(srcNodeType)) {
-    srcNodeType = schema.nodes.expand;
+    srcNodeType = expand;
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }

package/dist/cjs/ui/quick-insert-button.js

@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _add = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
@@ -206,10 +207,11 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     if (start !== undefined) {
       // if the selection is not within the node this decoration is rendered at
       // or the node is non-editable, then insert a newline and trigger quick insert
-      if (!(0, _documentChecks.isSelectionInNode)(start, view) || (0, _documentChecks.isNonEditableBlock)(start, view)) {
+      var isSelectionInsideNode = (0, _documentChecks.isSelectionInNode)(start, view);
+      if (!isSelectionInsideNode || (0, _documentChecks.isNonEditableBlock)(start, view)) {
         api.core.actions.execute((0, _editorCommands.createNewLine)(start));
       }
-      if ((0, _documentChecks.isSelectionInNode)(start, view)) {
+      if (isSelectionInsideNode) {
         // text or element with be deselected and the / added immediately after the paragraph
         // unless the selection is empty
         var currentSelection = view.state.selection;
@@ -246,6 +248,24 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
             });
           }
         }
+        if (currentSelection instanceof _cellSelection.CellSelection && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
+          // find the last inline position in the selection
+          var lastInlinePosition = _state.TextSelection.near(view.state.selection.$to, -1);
+          lastInlinePosition && api.core.actions.execute(function (_ref4) {
+            var tr = _ref4.tr;
+            if (!(lastInlinePosition instanceof _state.TextSelection)) {
+              // this will create a new line after the node
+              (0, _editorCommands.createNewLine)(lastInlinePosition.from)({
+                tr: tr
+              });
+              // this will find the next valid text position after the node
+              tr.setSelection(_state.TextSelection.create(tr.doc, lastInlinePosition.to));
+            } else {
+              tr.setSelection(lastInlinePosition);
+            }
+            return tr;
+          });
+        }
       }
     }
     (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl', true);
@@ -293,16 +313,16 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     xcss: [tooltipContainerStyles]
   }, tooltipPressable()) : tooltipPressable());
 };
-var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref4) {
-  var view = _ref4.view,
-    api = _ref4.api,
-    formatMessage = _ref4.formatMessage,
-    getPos = _ref4.getPos,
-    nodeType = _ref4.nodeType,
-    anchorName = _ref4.anchorName,
-    rootAnchorName = _ref4.rootAnchorName,
-    rootNodeType = _ref4.rootNodeType,
-    anchorRectCache = _ref4.anchorRectCache;
+var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
+  var view = _ref5.view,
+    api = _ref5.api,
+    formatMessage = _ref5.formatMessage,
+    getPos = _ref5.getPos,
+    nodeType = _ref5.nodeType,
+    anchorName = _ref5.anchorName,
+    rootAnchorName = _ref5.rootAnchorName,
+    rootNodeType = _ref5.rootNodeType,
+    anchorRectCache = _ref5.anchorRectCache;
   return /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
     api: api
   }, /*#__PURE__*/_react.default.createElement(TypeAheadControl, {

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/editor-commands/move-node.js

@@ -77,17 +77,13 @@ function transformSourceSlice(nodeCopy, destType) {
   }
   return nodeCopy;
 }
-const isDragLayoutColumnToTopLevel = ($from, $to) => {
+const nodesSupportDragLayoutColumnInto = ['tableCell', 'tableHeader', 'panel', 'expand', 'nestedExpand'];
+const isDragLayoutColumnIntoSupportedNodes = ($from, $to) => {
   var _$from$nodeAfter;
-  return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
-};
-const isDragLayoutColumnIntoTable = ($from, $to) => {
-  var _$from$nodeAfter2;
-  return ((_$from$nodeAfter2 = $from.nodeAfter) === null || _$from$nodeAfter2 === void 0 ? void 0 : _$from$nodeAfter2.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && ($to.parent.type.name === 'tableCell' || $to.parent.type.name === 'tableHeader');
-};
-const isDragLayoutColumnIntoPanel = ($from, $to) => {
-  var _$from$nodeAfter3;
-  return ((_$from$nodeAfter3 = $from.nodeAfter) === null || _$from$nodeAfter3 === void 0 ? void 0 : _$from$nodeAfter3.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.parent.type.name === 'panel';
+  const isTopLevel = $to.depth === 0;
+  const isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes($to.parent.type.name);
+  const supportedCondition = fg('platform_editor_drag_layout_column_into_nodes') ? isDragIntoNodes || isTopLevel : isTopLevel;
+  return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;
 };
 
 /**
@@ -386,19 +382,15 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   const destType = $to.node().type;
   const destParent = $to.node($to.depth);
   const sourceNode = $handlePos.nodeAfter;
-  const dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
-  const dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
-  const dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
 
   //TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
-  // Move a layout column to top level
-  // Move a layout column into a table cell, only moves the content into the cell
-  // Move a layout column into a panel, only moves the content into the panel
-  if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
+  // Move a layout column to top level, or table cell, or panel, or expand, only moves the content into them
+  if (sourceNode && isDragLayoutColumnIntoSupportedNodes($handlePos, $to)) {
     // need update after we support single column layout.
     const layoutColumnContent = sourceNode.content;
     let fragment;
-    if (dragLayoutColumnIntoTable) {
+    // if drop into table, and layout column contains expand, transform it to nestedExpand
+    if (['tableCell', 'tableHeader'].includes($to.parent.type.name)) {
       const contentContainsExpand = findChildrenByType(sourceNode, expand).length > 0;
       fragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(Fragment.from(layoutColumnContent)) : Fragment.from(layoutColumnContent);
       if (!fragment) {

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

@@ -4,7 +4,6 @@ import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/tra
 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;

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;
+};