@atlaskit/editor-plugin-layout 13.2.2 → 13.2.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-layout
 
+## 13.2.3
+
+### Patch Changes
+
+- [`6827a39105ea0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6827a39105ea0) -
+  EDITOR-7736: Fix left gap cursor before first image/expand in vertically-aligned layout column
+- Updated dependencies
+
 ## 13.2.2
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -16,7 +16,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
@@ -82,7 +81,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       }
     }]);
   }
-  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
     var _api$uiControlRegistr;
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _components.getLayoutColumnMenuComponents)({
       api: api
@@ -107,7 +106,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           return (0, _main.default)(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
       }];
-      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
         plugins.push({
           name: 'layoutKeymap',
           plugin: function plugin() {
@@ -372,7 +371,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
         popupsMountPoint = _ref5.popupsMountPoint,
         popupsBoundariesElement = _ref5.popupsBoundariesElement,
         popupsScrollableElement = _ref5.popupsScrollableElement;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _experiments.editorExperiment)('advanced_layouts', true) ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/_react.default.createElement(_LayoutColumnMenu.LayoutColumnMenu, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _experiments.editorExperiment)('advanced_layouts', true) ? /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null) : null, (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/_react.default.createElement(_LayoutColumnMenu.LayoutColumnMenu, {
         api: api,
         editorView: editorView,
         mountTo: popupsMountPoint,

package/dist/cjs/pm-plugins/actions.js

@@ -17,7 +17,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
@@ -596,7 +596,7 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
   var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU;
   return function (_ref5) {
     var tr = _ref5.tr;
-    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    if (!(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
     var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getLayoutColumnsFromContentSelection)(tr.selection);
@@ -692,7 +692,7 @@ var setLayoutColumnValign = exports.setLayoutColumnValign = function setLayoutCo
     inputMethod = _ref8$inputMethod === void 0 ? _analytics.INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref8$inputMethod;
   return function (_ref9) {
     var tr = _ref9.tr;
-    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    if (!(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
     var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
@@ -749,7 +749,7 @@ var distributeLayoutColumns = exports.distributeLayoutColumns = function distrib
       target = _ref10$target === void 0 ? 'selectedColumns' : _ref10$target;
     return function (_ref11) {
       var tr = _ref11.tr;
-      if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      if (!(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
         return null;
       }
       var selectedLayoutColumnsResult = target === 'allColumns' ? (0, _layoutColumnSelection.getAllLayoutColumnsFromSelection)(tr.selection) : (0, _layoutColumnSelection.getSelectedLayoutColumnsFromSelection)(tr.selection);
@@ -860,7 +860,7 @@ var deleteLayoutColumn = exports.deleteLayoutColumn = function deleteLayoutColum
   return function (_ref18) {
     var _api$blockControls4;
     var tr = _ref18.tr;
-    if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    if (!(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
     var selectedLayoutColumnsResult = (0, _layoutColumnSelection.getLayoutColumnsFromContentSelection)(tr.selection);

package/dist/cjs/pm-plugins/main.js

@@ -16,6 +16,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./actions");
 var _columnResizeDivider = require("./column-resize-divider");
@@ -27,6 +28,33 @@ var _layoutColumnSelection = require("./utils/layout-column-selection");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_LAYOUT = exports.DEFAULT_LAYOUT = 'two_equal';
+
+/**
+ * Shared blank-space gap cursor placement, used by both `handleClick` and `handleClickOn`
+ * (the latter catches clicks on atomic node views that stop propagation before `handleClick`).
+ * Returns `true` when it placed a selection and consumed the click, else `false`.
+ */
+var applyBlankSpaceGapCursor = function applyBlankSpaceGapCursor(view, event) {
+  if (!(0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) || !(0, _experiments.editorExperiment)('advanced_layouts', true)) {
+    return false;
+  }
+  var gapTarget = (0, _utils3.getGapCursorTargetForBlankSpaceClick)(view, event);
+  if (gapTarget === undefined) {
+    return false;
+  }
+  var $pos = view.state.doc.resolve(gapTarget.pos);
+  // A paragraph child takes a TextSelection (caret at the edge) rather than a gap cursor.
+  var isParagraphTarget = (0, _utils3.isParagraphBlankSpaceTarget)(view, gapTarget);
+  var nextSelection = isParagraphTarget ? _state.TextSelection.near($pos, gapTarget.side === 'left' ? 1 : -1) : new _selection.GapCursorSelection($pos, gapTarget.side === 'left' ? _selection.Side.LEFT : _selection.Side.RIGHT);
+  // Idempotency guard: `mousedown` already placed this selection, but the browser still
+  // fires `mouseup`, so `handleClick`/`handleClickOn` re-run for the same click. Consume it
+  // without re-dispatching (which would add a redundant undo entry).
+  if (view.state.selection.eq(nextSelection)) {
+    return true;
+  }
+  view.dispatch(view.state.tr.setSelection(nextSelection).scrollIntoView());
+  return true;
+};
 var isWholeSelectionInsideLayoutColumn = function isWholeSelectionInsideLayoutColumn(state) {
   // Since findParentNodeOfType doesn't check if selection.to shares the parent, we do this check ourselves
   var fromParent = (0, _utils2.findParentNodeOfType)(state.schema.nodes.layoutColumn)(state.selection);
@@ -272,14 +300,52 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
         Backspace: handleDeleteLayoutColumn,
         Delete: handleDeleteLayoutColumn
       }),
-      handleClickOn: (0, _selection.createSelectionClickHandler)(['layoutColumn'], function (target) {
-        return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');
-      }, {
-        useLongPressSelection: options.useLongPressSelection || false,
-        getNodeSelectionPos: function getNodeSelectionPos(state, nodePos) {
-          return state.doc.resolve(nodePos).before();
+      handleDOMEvents: {
+        // Place the gap cursor on `mousedown` (not `mouseup`) so the caret never flashes
+        // inside a nested editable child first.
+        mousedown: function mousedown(view, event) {
+          var target = event.target;
+          if (target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) {
+            return false;
+          }
+          if (applyBlankSpaceGapCursor(view, event)) {
+            event.preventDefault();
+            // `preventDefault()` blocks the editor focus that makes the gap cursor blink,
+            // so restore it here. The `handleClick`/`handleClickOn` paths don't need this.
+            if (!view.hasFocus()) {
+              view.focus();
+            }
+            return true;
+          }
+          return false;
+        }
+      },
+      handleClickOn: function () {
+        var selectionClickHandler = (0, _selection.createSelectionClickHandler)(['layoutColumn'], function (target) {
+          return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');
+        }, {
+          useLongPressSelection: options.useLongPressSelection || false,
+          getNodeSelectionPos: function getNodeSelectionPos(state, nodePos) {
+            return state.doc.resolve(nodePos).before();
+          }
+        });
+        return function (view, pos, node, nodePos, event, direct) {
+          // Fallback for clicks on an atomic node view that the mousedown hook missed.
+          var target = event.target;
+          if (!(target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) && applyBlankSpaceGapCursor(view, event)) {
+            return true;
+          }
+          return selectionClickHandler(view, pos, node, nodePos, event, direct);
+        };
+      }(),
+      handleClick: function handleClick(view, _pos, event) {
+        // Fallback for clicks the mousedown interceptor missed.
+        var target = event.target;
+        if (target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) {
+          return false;
         }
-      })
+        return applyBlankSpaceGapCursor(view, event);
+      }
     },
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       var changes = [];

package/dist/cjs/pm-plugins/utils/index.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectIntoLayout = exports.getMaybeLayoutSection = void 0;
+exports.selectIntoLayout = exports.isParagraphBlankSpaceTarget = exports.getMaybeLayoutSection = exports.getGapCursorTargetForBlankSpaceClick = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 
@@ -56,4 +57,195 @@ var selectIntoLayout = exports.selectIntoLayout = function selectIntoLayout(view
     }
     return tr;
   }
+};
+/**
+ * For a blank-space click inside a layout column — above the first child (middle/bottom-aligned
+ * columns) or below the last child (any alignment) — return the ProseMirror position and side
+ * for a gap cursor. Returns `undefined` when the kill switch is ON, the click is outside a
+ * layoutColumn, or the Y coordinate is not in blank space.
+ *
+ * The `advanced_layouts` / `platform_editor_layout_column_menu` gates live in the caller
+ * (`applyBlankSpaceGapCursor`); only the kill switch is checked here.
+ */
+var getGapCursorTargetForBlankSpaceClick = exports.getGapCursorTargetForBlankSpaceClick = function getGapCursorTargetForBlankSpaceClick(view, event) {
+  var _columnNode$attrs;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_layout_column_menu_kill_switch_1')) {
+    return undefined;
+  }
+
+  // Resolve the column from the DOM target so it works even when posAtCoords returns null
+  // (nothing rendered at the clicked Y).
+  var target = event.target;
+  var columnEl = target === null || target === void 0 ? void 0 : target.closest('[data-layout-column]');
+  if (!columnEl) {
+    return undefined;
+  }
+  var columnStartPos;
+  try {
+    columnStartPos = view.posAtDOM(columnEl, 0);
+  } catch (_unused) {
+    return undefined;
+  }
+
+  // posAtDOM resolves at varying depths, so walk up to find the layoutColumn.
+  var $columnStart = view.state.doc.resolve(columnStartPos);
+  var depth = -1;
+  for (var d = $columnStart.depth; d >= 0; d--) {
+    if ($columnStart.node(d).type.name === 'layoutColumn') {
+      depth = d;
+      break;
+    }
+  }
+  if (depth < 0) {
+    return undefined;
+  }
+  var columnNode = $columnStart.node(depth);
+  if (columnNode.childCount === 0) {
+    return undefined;
+  }
+  var columnContentStart = $columnStart.start(depth);
+  var columnEndPos = $columnStart.end(depth);
+  var getChildDom = function getChildDom(nodePos) {
+    try {
+      var dom = view.nodeDOM(nodePos);
+      return dom instanceof Element ? dom : null;
+    } catch (_unused2) {
+      return null;
+    }
+  };
+  var valign = (_columnNode$attrs = columnNode.attrs) === null || _columnNode$attrs === void 0 ? void 0 : _columnNode$attrs.valign;
+  var isNonTopAligned = valign && valign !== 'top';
+
+  // Use the column rect (not child rects) for above/below detection: it stays stable as
+  // gap-cursor widgets shift child DOM positions between repeated clicks.
+  var columnRect = columnEl.getBoundingClientRect();
+
+  // Click ABOVE the first child (only for middle/bottom-aligned columns).
+  var firstChildPos = columnContentStart;
+  var firstChildDom = getChildDom(firstChildPos);
+  if (isNonTopAligned && firstChildDom) {
+    var rect = firstChildDom.getBoundingClientRect();
+    if (event.clientY < rect.top && event.clientY >= columnRect.top) {
+      return {
+        pos: firstChildPos,
+        side: 'left'
+      };
+    }
+  }
+
+  // Click BELOW the last child (for any column alignment).
+  var lastChild = columnNode.lastChild;
+  var lastChildEndPos = columnEndPos;
+  var lastChildStartPos = lastChild ? lastChildEndPos - lastChild.nodeSize : columnContentStart;
+  var lastChildDom = lastChild ? getChildDom(lastChildStartPos) : null;
+  if (lastChild && lastChildDom) {
+    var _rect = lastChildDom.getBoundingClientRect();
+    if (event.clientY > _rect.bottom && event.clientY <= columnRect.bottom) {
+      return {
+        pos: lastChildEndPos,
+        side: 'right'
+      };
+    }
+  }
+
+  // Fallback: click lands ON a single atomic child that fills the column (mediaSingle/expand),
+  // so the above/below checks never fired.
+  if (columnNode.childCount === 1) {
+    var onlyChild = columnNode.firstChild;
+    // Exclude `panel`: its wrapper makes `view.nodeDOM` non-null and intercepts clicks, so the
+    // guard below would wrongly fire for in-panel blank-space clicks (which have their own
+    // native gap cursor).
+    if (onlyChild && onlyChild.type.name !== 'paragraph' && onlyChild.type.name !== 'panel') {
+      // Bail when the click is on the child's own content. For media the wrapper is full-width
+      // so test against the <img> rect; resolve it only for a direct mediaSingle child (else
+      // getContentRect could grab an image nested in an expand and break its toggle).
+      var contentRect = onlyChild.type.name === 'mediaSingle' ? getContentRect(firstChildDom) : null;
+      if (contentRect) {
+        var insideImage = event.clientX >= contentRect.left && event.clientX <= contentRect.right && event.clientY >= contentRect.top && event.clientY <= contentRect.bottom;
+        if (insideImage) {
+          return undefined;
+        }
+      } else {
+        // Other atomics: bail when posAtCoords resolves strictly inside the node range.
+        var coordPos = null;
+        try {
+          coordPos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          });
+        } catch (_unused3) {
+          coordPos = null;
+        }
+        if (coordPos && coordPos.pos > firstChildPos && coordPos.pos < lastChildEndPos) {
+          return undefined;
+        }
+      }
+
+      // Fire when the child DOM is resolvable, or when it's null (media not yet loaded) but
+      // the click target is the column itself (no node view intercepted it).
+      var targetEl = event.target;
+      var targetIsColumn = targetEl === columnEl;
+      var shouldUseFallback = firstChildDom !== null || targetIsColumn;
+      if (shouldUseFallback) {
+        var side = getGapCursorSideForBlankSpaceClick(firstChildDom, columnRect, event.clientX, event.clientY);
+        return side === 'left' ? {
+          pos: firstChildPos,
+          side: 'left'
+        } : {
+          pos: lastChildEndPos,
+          side: 'right'
+        };
+      }
+    }
+  }
+  return undefined;
+};
+
+/**
+ * The tight `<img>` content rect (or `null`). The outer wrapper often fills the whole column
+ * width, so the `<img>` rect is needed to tell "beside the image" from "on the image".
+ */
+var getContentRect = function getContentRect(firstChildDom) {
+  var img = firstChildDom === null || firstChildDom === void 0 ? void 0 : firstChildDom.querySelector('img');
+  return img ? img.getBoundingClientRect() : null;
+};
+
+/**
+ * Which side of an atomic child a blank-space click belongs to. Prefers the tight content (image)
+ * rect when available — using its midpoint so it's direction-agnostic (handles RTL right-aligned
+ * images) — otherwise falls back to the column's vertical midpoint.
+ */
+var getGapCursorSideForBlankSpaceClick = function getGapCursorSideForBlankSpaceClick(firstChildDom, columnRect, clientX, clientY) {
+  var contentRect = getContentRect(firstChildDom);
+  if (contentRect) {
+    if (clientY < contentRect.top) {
+      return 'left';
+    }
+    if (clientY > contentRect.bottom) {
+      return 'right';
+    }
+    if (clientX < (contentRect.left + contentRect.right) / 2) {
+      return 'left';
+    }
+    return 'right';
+  }
+  var columnMidY = columnRect.top + columnRect.height / 2;
+  return clientY < columnMidY ? 'left' : 'right';
+};
+
+/**
+ * True when the blank-space click target child is a paragraph, so the caller uses a TextSelection
+ * instead of a gap cursor. LEFT inspects the first child, RIGHT the last child.
+ */
+var isParagraphBlankSpaceTarget = exports.isParagraphBlankSpaceTarget = function isParagraphBlankSpaceTarget(view, gapTarget) {
+  var pos = gapTarget.pos,
+    side = gapTarget.side;
+  var doc = view.state.doc;
+  try {
+    var $pos = doc.resolve(pos);
+    var childNode = side === 'left' ? $pos.nodeAfter : $pos.nodeBefore;
+    return (childNode === null || childNode === void 0 ? void 0 : childNode.type.name) === 'paragraph';
+  } catch (_unused4) {
+    return false;
+  }
 };

package/dist/es2019/layoutPlugin.js

@@ -9,7 +9,6 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn, distributeLayoutColumns, insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import { default as createLayoutKeymapPlugin } from './pm-plugins/keymap';
@@ -74,7 +73,7 @@ export const layoutPlugin = ({
       }
     }]);
   }
-  if (expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
     var _api$uiControlRegistr;
     api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getLayoutColumnMenuComponents({
       api
@@ -99,7 +98,7 @@ export const layoutPlugin = ({
           return createLayoutPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
       }];
-      if (expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
         plugins.push({
           name: 'layoutKeymap',
           plugin: () => createLayoutKeymapPlugin({
@@ -344,7 +343,7 @@ export const layoutPlugin = ({
       popupsBoundariesElement,
       popupsScrollableElement
     }) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
         api: api,
         editorView: editorView,
         mountTo: popupsMountPoint,

package/dist/es2019/pm-plugins/actions.js

@@ -6,7 +6,7 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DEFAULT_LAYOUT_COLUMN_VALIGN, EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 import { pluginKey } from './plugin-key';
@@ -568,7 +568,7 @@ export function getEffectiveMaxLayoutColumns() {
 const insertLayoutColumnAt = (side, editorAnalyticsAPI, inputMethod = INPUT_METHOD.LAYOUT_COLUMN_MENU) => ({
   tr
 }) => {
-  if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+  if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
   const selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
@@ -664,7 +664,7 @@ export const setLayoutColumnValign = ({
 }, editorAnalyticsAPI, api) => ({
   tr
 }) => {
-  if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+  if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
   const selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
@@ -720,7 +720,7 @@ export const distributeLayoutColumns = (editorAnalyticsAPI, api) => ({
 } = {}) => ({
   tr
 }) => {
-  if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+  if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
   const selectedLayoutColumnsResult = target === 'allColumns' ? getAllLayoutColumnsFromSelection(tr.selection) : getSelectedLayoutColumnsFromSelection(tr.selection);
@@ -826,7 +826,7 @@ export const deleteLayoutColumn = ({
   tr
 }) => {
   var _api$blockControls4;
-  if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+  if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
     return null;
   }
   const selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);

package/dist/es2019/pm-plugins/main.js

@@ -1,21 +1,49 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { createSelectionClickHandler, GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter } from '@atlaskit/editor-common/utils';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeClosestToPos, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout, LAYOUT_COLUMN_INSERT_META } from './actions';
 import { getColumnDividerDecorations } from './column-resize-divider';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './plugin-key';
 import { pluginKey as layoutResizingPluginKey } from './resizing';
-import { getMaybeLayoutSection } from './utils';
+import { getGapCursorTargetForBlankSpaceClick, getMaybeLayoutSection, isParagraphBlankSpaceTarget } from './utils';
 import { getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
 export const DEFAULT_LAYOUT = 'two_equal';
+
+/**
+ * Shared blank-space gap cursor placement, used by both `handleClick` and `handleClickOn`
+ * (the latter catches clicks on atomic node views that stop propagation before `handleClick`).
+ * Returns `true` when it placed a selection and consumed the click, else `false`.
+ */
+const applyBlankSpaceGapCursor = (view, event) => {
+  if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) || !editorExperiment('advanced_layouts', true)) {
+    return false;
+  }
+  const gapTarget = getGapCursorTargetForBlankSpaceClick(view, event);
+  if (gapTarget === undefined) {
+    return false;
+  }
+  const $pos = view.state.doc.resolve(gapTarget.pos);
+  // A paragraph child takes a TextSelection (caret at the edge) rather than a gap cursor.
+  const isParagraphTarget = isParagraphBlankSpaceTarget(view, gapTarget);
+  const nextSelection = isParagraphTarget ? TextSelection.near($pos, gapTarget.side === 'left' ? 1 : -1) : new GapCursorSelection($pos, gapTarget.side === 'left' ? Side.LEFT : Side.RIGHT);
+  // Idempotency guard: `mousedown` already placed this selection, but the browser still
+  // fires `mouseup`, so `handleClick`/`handleClickOn` re-run for the same click. Consume it
+  // without re-dispatching (which would add a redundant undo entry).
+  if (view.state.selection.eq(nextSelection)) {
+    return true;
+  }
+  view.dispatch(view.state.tr.setSelection(nextSelection).scrollIntoView());
+  return true;
+};
 const isWholeSelectionInsideLayoutColumn = state => {
   // Since findParentNodeOfType doesn't check if selection.to shares the parent, we do this check ourselves
   const fromParent = findParentNodeOfType(state.schema.nodes.layoutColumn)(state.selection);
@@ -272,10 +300,48 @@ export default ((options, editorAnalyticsAPI) => {
         Backspace: handleDeleteLayoutColumn,
         Delete: handleDeleteLayoutColumn
       }),
-      handleClickOn: createSelectionClickHandler(['layoutColumn'], target => target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column'), {
-        useLongPressSelection: options.useLongPressSelection || false,
-        getNodeSelectionPos: (state, nodePos) => state.doc.resolve(nodePos).before()
-      })
+      handleDOMEvents: {
+        // Place the gap cursor on `mousedown` (not `mouseup`) so the caret never flashes
+        // inside a nested editable child first.
+        mousedown(view, event) {
+          const target = event.target;
+          if (target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) {
+            return false;
+          }
+          if (applyBlankSpaceGapCursor(view, event)) {
+            event.preventDefault();
+            // `preventDefault()` blocks the editor focus that makes the gap cursor blink,
+            // so restore it here. The `handleClick`/`handleClickOn` paths don't need this.
+            if (!view.hasFocus()) {
+              view.focus();
+            }
+            return true;
+          }
+          return false;
+        }
+      },
+      handleClickOn: (() => {
+        const selectionClickHandler = createSelectionClickHandler(['layoutColumn'], target => target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column'), {
+          useLongPressSelection: options.useLongPressSelection || false,
+          getNodeSelectionPos: (state, nodePos) => state.doc.resolve(nodePos).before()
+        });
+        return (view, pos, node, nodePos, event, direct) => {
+          // Fallback for clicks on an atomic node view that the mousedown hook missed.
+          const target = event.target;
+          if (!(target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) && applyBlankSpaceGapCursor(view, event)) {
+            return true;
+          }
+          return selectionClickHandler(view, pos, node, nodePos, event, direct);
+        };
+      })(),
+      handleClick(view, _pos, event) {
+        // Fallback for clicks the mousedown interceptor missed.
+        const target = event.target;
+        if (target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) {
+          return false;
+        }
+        return applyBlankSpaceGapCursor(view, event);
+      }
     },
     appendTransaction: (transactions, _oldState, newState) => {
       const changes = [];

package/dist/es2019/pm-plugins/utils/index.js

@@ -2,6 +2,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const getMaybeLayoutSection = state => {
   const {
@@ -53,4 +54,199 @@ export const selectIntoLayout = (view, posOfLayout, childIndex = 0) => {
     }
     return tr;
   }
+};
+/**
+ * For a blank-space click inside a layout column — above the first child (middle/bottom-aligned
+ * columns) or below the last child (any alignment) — return the ProseMirror position and side
+ * for a gap cursor. Returns `undefined` when the kill switch is ON, the click is outside a
+ * layoutColumn, or the Y coordinate is not in blank space.
+ *
+ * The `advanced_layouts` / `platform_editor_layout_column_menu` gates live in the caller
+ * (`applyBlankSpaceGapCursor`); only the kill switch is checked here.
+ */
+export const getGapCursorTargetForBlankSpaceClick = (view, event) => {
+  var _columnNode$attrs;
+  if (fg('platform_editor_layout_column_menu_kill_switch_1')) {
+    return undefined;
+  }
+
+  // Resolve the column from the DOM target so it works even when posAtCoords returns null
+  // (nothing rendered at the clicked Y).
+  const target = event.target;
+  const columnEl = target === null || target === void 0 ? void 0 : target.closest('[data-layout-column]');
+  if (!columnEl) {
+    return undefined;
+  }
+  let columnStartPos;
+  try {
+    columnStartPos = view.posAtDOM(columnEl, 0);
+  } catch {
+    return undefined;
+  }
+
+  // posAtDOM resolves at varying depths, so walk up to find the layoutColumn.
+  const $columnStart = view.state.doc.resolve(columnStartPos);
+  let depth = -1;
+  for (let d = $columnStart.depth; d >= 0; d--) {
+    if ($columnStart.node(d).type.name === 'layoutColumn') {
+      depth = d;
+      break;
+    }
+  }
+  if (depth < 0) {
+    return undefined;
+  }
+  const columnNode = $columnStart.node(depth);
+  if (columnNode.childCount === 0) {
+    return undefined;
+  }
+  const columnContentStart = $columnStart.start(depth);
+  const columnEndPos = $columnStart.end(depth);
+  const getChildDom = nodePos => {
+    try {
+      const dom = view.nodeDOM(nodePos);
+      return dom instanceof Element ? dom : null;
+    } catch {
+      return null;
+    }
+  };
+  const valign = (_columnNode$attrs = columnNode.attrs) === null || _columnNode$attrs === void 0 ? void 0 : _columnNode$attrs.valign;
+  const isNonTopAligned = valign && valign !== 'top';
+
+  // Use the column rect (not child rects) for above/below detection: it stays stable as
+  // gap-cursor widgets shift child DOM positions between repeated clicks.
+  const columnRect = columnEl.getBoundingClientRect();
+
+  // Click ABOVE the first child (only for middle/bottom-aligned columns).
+  const firstChildPos = columnContentStart;
+  const firstChildDom = getChildDom(firstChildPos);
+  if (isNonTopAligned && firstChildDom) {
+    const rect = firstChildDom.getBoundingClientRect();
+    if (event.clientY < rect.top && event.clientY >= columnRect.top) {
+      return {
+        pos: firstChildPos,
+        side: 'left'
+      };
+    }
+  }
+
+  // Click BELOW the last child (for any column alignment).
+  const lastChild = columnNode.lastChild;
+  const lastChildEndPos = columnEndPos;
+  const lastChildStartPos = lastChild ? lastChildEndPos - lastChild.nodeSize : columnContentStart;
+  const lastChildDom = lastChild ? getChildDom(lastChildStartPos) : null;
+  if (lastChild && lastChildDom) {
+    const rect = lastChildDom.getBoundingClientRect();
+    if (event.clientY > rect.bottom && event.clientY <= columnRect.bottom) {
+      return {
+        pos: lastChildEndPos,
+        side: 'right'
+      };
+    }
+  }
+
+  // Fallback: click lands ON a single atomic child that fills the column (mediaSingle/expand),
+  // so the above/below checks never fired.
+  if (columnNode.childCount === 1) {
+    const onlyChild = columnNode.firstChild;
+    // Exclude `panel`: its wrapper makes `view.nodeDOM` non-null and intercepts clicks, so the
+    // guard below would wrongly fire for in-panel blank-space clicks (which have their own
+    // native gap cursor).
+    if (onlyChild && onlyChild.type.name !== 'paragraph' && onlyChild.type.name !== 'panel') {
+      // Bail when the click is on the child's own content. For media the wrapper is full-width
+      // so test against the <img> rect; resolve it only for a direct mediaSingle child (else
+      // getContentRect could grab an image nested in an expand and break its toggle).
+      const contentRect = onlyChild.type.name === 'mediaSingle' ? getContentRect(firstChildDom) : null;
+      if (contentRect) {
+        const insideImage = event.clientX >= contentRect.left && event.clientX <= contentRect.right && event.clientY >= contentRect.top && event.clientY <= contentRect.bottom;
+        if (insideImage) {
+          return undefined;
+        }
+      } else {
+        // Other atomics: bail when posAtCoords resolves strictly inside the node range.
+        let coordPos = null;
+        try {
+          coordPos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          });
+        } catch {
+          coordPos = null;
+        }
+        if (coordPos && coordPos.pos > firstChildPos && coordPos.pos < lastChildEndPos) {
+          return undefined;
+        }
+      }
+
+      // Fire when the child DOM is resolvable, or when it's null (media not yet loaded) but
+      // the click target is the column itself (no node view intercepted it).
+      const targetEl = event.target;
+      const targetIsColumn = targetEl === columnEl;
+      const shouldUseFallback = firstChildDom !== null || targetIsColumn;
+      if (shouldUseFallback) {
+        const side = getGapCursorSideForBlankSpaceClick(firstChildDom, columnRect, event.clientX, event.clientY);
+        return side === 'left' ? {
+          pos: firstChildPos,
+          side: 'left'
+        } : {
+          pos: lastChildEndPos,
+          side: 'right'
+        };
+      }
+    }
+  }
+  return undefined;
+};
+
+/**
+ * The tight `<img>` content rect (or `null`). The outer wrapper often fills the whole column
+ * width, so the `<img>` rect is needed to tell "beside the image" from "on the image".
+ */
+const getContentRect = firstChildDom => {
+  const img = firstChildDom === null || firstChildDom === void 0 ? void 0 : firstChildDom.querySelector('img');
+  return img ? img.getBoundingClientRect() : null;
+};
+
+/**
+ * Which side of an atomic child a blank-space click belongs to. Prefers the tight content (image)
+ * rect when available — using its midpoint so it's direction-agnostic (handles RTL right-aligned
+ * images) — otherwise falls back to the column's vertical midpoint.
+ */
+const getGapCursorSideForBlankSpaceClick = (firstChildDom, columnRect, clientX, clientY) => {
+  const contentRect = getContentRect(firstChildDom);
+  if (contentRect) {
+    if (clientY < contentRect.top) {
+      return 'left';
+    }
+    if (clientY > contentRect.bottom) {
+      return 'right';
+    }
+    if (clientX < (contentRect.left + contentRect.right) / 2) {
+      return 'left';
+    }
+    return 'right';
+  }
+  const columnMidY = columnRect.top + columnRect.height / 2;
+  return clientY < columnMidY ? 'left' : 'right';
+};
+
+/**
+ * True when the blank-space click target child is a paragraph, so the caller uses a TextSelection
+ * instead of a gap cursor. LEFT inspects the first child, RIGHT the last child.
+ */
+export const isParagraphBlankSpaceTarget = (view, gapTarget) => {
+  const {
+    pos,
+    side
+  } = gapTarget;
+  const {
+    doc
+  } = view.state;
+  try {
+    const $pos = doc.resolve(pos);
+    const childNode = side === 'left' ? $pos.nodeAfter : $pos.nodeBefore;
+    return (childNode === null || childNode === void 0 ? void 0 : childNode.type.name) === 'paragraph';
+  } catch {
+    return false;
+  }
 };

package/dist/esm/layoutPlugin.js

@@ -9,7 +9,6 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, deleteLayoutColumn as _deleteLayoutColumn, distributeLayoutColumns as _distributeLayoutColumns, insertLayoutColumn as _insertLayoutColumn, insertLayoutColumnsWithAnalytics, setLayoutColumnDangerPreview, setLayoutColumnValign as _setLayoutColumnValign, toggleLayoutColumnMenu } from './pm-plugins/actions';
 import { default as createLayoutKeymapPlugin } from './pm-plugins/keymap';
@@ -75,7 +74,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       }
     }]);
   }
-  if (expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+  if (expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
     var _api$uiControlRegistr;
     api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getLayoutColumnMenuComponents({
       api: api
@@ -100,7 +99,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           return createLayoutPlugin(options, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
       }];
-      if (expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
         plugins.push({
           name: 'layoutKeymap',
           plugin: function plugin() {
@@ -365,7 +364,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
         popupsMountPoint = _ref5.popupsMountPoint,
         popupsBoundariesElement = _ref5.popupsBoundariesElement,
         popupsScrollableElement = _ref5.popupsScrollableElement;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, editorExperiment('advanced_layouts', true) ? /*#__PURE__*/React.createElement(GlobalStylesWrapper, null) : null, expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && editorView ? /*#__PURE__*/React.createElement(LayoutColumnMenu, {
         api: api,
         editorView: editorView,
         mountTo: popupsMountPoint,

package/dist/esm/pm-plugins/actions.js

@@ -9,7 +9,7 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DEFAULT_LAYOUT_COLUMN_VALIGN, EVEN_DISTRIBUTED_COL_WIDTHS, MAX_LAYOUT_COLUMNS, MAX_STANDARD_LAYOUT_COLUMNS, MIN_LAYOUT_COLUMN_WIDTH_PERCENT } from './consts';
 import { pluginKey } from './plugin-key';
@@ -586,7 +586,7 @@ var insertLayoutColumnAt = function insertLayoutColumnAt(side, editorAnalyticsAP
   var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.LAYOUT_COLUMN_MENU;
   return function (_ref5) {
     var tr = _ref5.tr;
-    if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
     var selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);
@@ -682,7 +682,7 @@ export var setLayoutColumnValign = function setLayoutColumnValign(_ref8, editorA
     inputMethod = _ref8$inputMethod === void 0 ? INPUT_METHOD.LAYOUT_COLUMN_MENU : _ref8$inputMethod;
   return function (_ref9) {
     var tr = _ref9.tr;
-    if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
     var selectedLayoutColumnsResult = getSelectedLayoutColumnsFromSelection(tr.selection);
@@ -739,7 +739,7 @@ export var distributeLayoutColumns = function distributeLayoutColumns(editorAnal
       target = _ref10$target === void 0 ? 'selectedColumns' : _ref10$target;
     return function (_ref11) {
       var tr = _ref11.tr;
-      if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+      if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
         return null;
       }
       var selectedLayoutColumnsResult = target === 'allColumns' ? getAllLayoutColumnsFromSelection(tr.selection) : getSelectedLayoutColumnsFromSelection(tr.selection);
@@ -850,7 +850,7 @@ export var deleteLayoutColumn = function deleteLayoutColumn() {
   return function (_ref18) {
     var _api$blockControls4;
     var tr = _ref18.tr;
-    if (!expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true)) {
+    if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true)) {
       return null;
     }
     var selectedLayoutColumnsResult = getLayoutColumnsFromContentSelection(tr.selection);

package/dist/esm/pm-plugins/main.js

@@ -4,22 +4,50 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { createSelectionClickHandler, GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter } from '@atlaskit/editor-common/utils';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeClosestToPos, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout, LAYOUT_COLUMN_INSERT_META } from './actions';
 import { getColumnDividerDecorations } from './column-resize-divider';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './plugin-key';
 import { pluginKey as layoutResizingPluginKey } from './resizing';
-import { getMaybeLayoutSection } from './utils';
+import { getGapCursorTargetForBlankSpaceClick, getMaybeLayoutSection, isParagraphBlankSpaceTarget } from './utils';
 import { getSelectedLayoutColumnsFromSelection } from './utils/layout-column-selection';
 export var DEFAULT_LAYOUT = 'two_equal';
+
+/**
+ * Shared blank-space gap cursor placement, used by both `handleClick` and `handleClickOn`
+ * (the latter catches clicks on atomic node views that stop propagation before `handleClick`).
+ * Returns `true` when it placed a selection and consumed the click, else `false`.
+ */
+var applyBlankSpaceGapCursor = function applyBlankSpaceGapCursor(view, event) {
+  if (!expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) || !editorExperiment('advanced_layouts', true)) {
+    return false;
+  }
+  var gapTarget = getGapCursorTargetForBlankSpaceClick(view, event);
+  if (gapTarget === undefined) {
+    return false;
+  }
+  var $pos = view.state.doc.resolve(gapTarget.pos);
+  // A paragraph child takes a TextSelection (caret at the edge) rather than a gap cursor.
+  var isParagraphTarget = isParagraphBlankSpaceTarget(view, gapTarget);
+  var nextSelection = isParagraphTarget ? TextSelection.near($pos, gapTarget.side === 'left' ? 1 : -1) : new GapCursorSelection($pos, gapTarget.side === 'left' ? Side.LEFT : Side.RIGHT);
+  // Idempotency guard: `mousedown` already placed this selection, but the browser still
+  // fires `mouseup`, so `handleClick`/`handleClickOn` re-run for the same click. Consume it
+  // without re-dispatching (which would add a redundant undo entry).
+  if (view.state.selection.eq(nextSelection)) {
+    return true;
+  }
+  view.dispatch(view.state.tr.setSelection(nextSelection).scrollIntoView());
+  return true;
+};
 var isWholeSelectionInsideLayoutColumn = function isWholeSelectionInsideLayoutColumn(state) {
   // Since findParentNodeOfType doesn't check if selection.to shares the parent, we do this check ourselves
   var fromParent = findParentNodeOfType(state.schema.nodes.layoutColumn)(state.selection);
@@ -265,14 +293,52 @@ export default (function (options, editorAnalyticsAPI) {
         Backspace: handleDeleteLayoutColumn,
         Delete: handleDeleteLayoutColumn
       }),
-      handleClickOn: createSelectionClickHandler(['layoutColumn'], function (target) {
-        return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');
-      }, {
-        useLongPressSelection: options.useLongPressSelection || false,
-        getNodeSelectionPos: function getNodeSelectionPos(state, nodePos) {
-          return state.doc.resolve(nodePos).before();
+      handleDOMEvents: {
+        // Place the gap cursor on `mousedown` (not `mouseup`) so the caret never flashes
+        // inside a nested editable child first.
+        mousedown: function mousedown(view, event) {
+          var target = event.target;
+          if (target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) {
+            return false;
+          }
+          if (applyBlankSpaceGapCursor(view, event)) {
+            event.preventDefault();
+            // `preventDefault()` blocks the editor focus that makes the gap cursor blink,
+            // so restore it here. The `handleClick`/`handleClickOn` paths don't need this.
+            if (!view.hasFocus()) {
+              view.focus();
+            }
+            return true;
+          }
+          return false;
+        }
+      },
+      handleClickOn: function () {
+        var selectionClickHandler = createSelectionClickHandler(['layoutColumn'], function (target) {
+          return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');
+        }, {
+          useLongPressSelection: options.useLongPressSelection || false,
+          getNodeSelectionPos: function getNodeSelectionPos(state, nodePos) {
+            return state.doc.resolve(nodePos).before();
+          }
+        });
+        return function (view, pos, node, nodePos, event, direct) {
+          // Fallback for clicks on an atomic node view that the mousedown hook missed.
+          var target = event.target;
+          if (!(target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) && applyBlankSpaceGapCursor(view, event)) {
+            return true;
+          }
+          return selectionClickHandler(view, pos, node, nodePos, event, direct);
+        };
+      }(),
+      handleClick: function handleClick(view, _pos, event) {
+        // Fallback for clicks the mousedown interceptor missed.
+        var target = event.target;
+        if (target !== null && target !== void 0 && target.hasAttribute('data-layout-section')) {
+          return false;
         }
-      })
+        return applyBlankSpaceGapCursor(view, event);
+      }
     },
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       var changes = [];

package/dist/esm/pm-plugins/utils/index.js

@@ -2,6 +2,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
   var _state$schema$nodes = state.schema.nodes,
@@ -49,4 +50,195 @@ export var selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
     }
     return tr;
   }
+};
+/**
+ * For a blank-space click inside a layout column — above the first child (middle/bottom-aligned
+ * columns) or below the last child (any alignment) — return the ProseMirror position and side
+ * for a gap cursor. Returns `undefined` when the kill switch is ON, the click is outside a
+ * layoutColumn, or the Y coordinate is not in blank space.
+ *
+ * The `advanced_layouts` / `platform_editor_layout_column_menu` gates live in the caller
+ * (`applyBlankSpaceGapCursor`); only the kill switch is checked here.
+ */
+export var getGapCursorTargetForBlankSpaceClick = function getGapCursorTargetForBlankSpaceClick(view, event) {
+  var _columnNode$attrs;
+  if (fg('platform_editor_layout_column_menu_kill_switch_1')) {
+    return undefined;
+  }
+
+  // Resolve the column from the DOM target so it works even when posAtCoords returns null
+  // (nothing rendered at the clicked Y).
+  var target = event.target;
+  var columnEl = target === null || target === void 0 ? void 0 : target.closest('[data-layout-column]');
+  if (!columnEl) {
+    return undefined;
+  }
+  var columnStartPos;
+  try {
+    columnStartPos = view.posAtDOM(columnEl, 0);
+  } catch (_unused) {
+    return undefined;
+  }
+
+  // posAtDOM resolves at varying depths, so walk up to find the layoutColumn.
+  var $columnStart = view.state.doc.resolve(columnStartPos);
+  var depth = -1;
+  for (var d = $columnStart.depth; d >= 0; d--) {
+    if ($columnStart.node(d).type.name === 'layoutColumn') {
+      depth = d;
+      break;
+    }
+  }
+  if (depth < 0) {
+    return undefined;
+  }
+  var columnNode = $columnStart.node(depth);
+  if (columnNode.childCount === 0) {
+    return undefined;
+  }
+  var columnContentStart = $columnStart.start(depth);
+  var columnEndPos = $columnStart.end(depth);
+  var getChildDom = function getChildDom(nodePos) {
+    try {
+      var dom = view.nodeDOM(nodePos);
+      return dom instanceof Element ? dom : null;
+    } catch (_unused2) {
+      return null;
+    }
+  };
+  var valign = (_columnNode$attrs = columnNode.attrs) === null || _columnNode$attrs === void 0 ? void 0 : _columnNode$attrs.valign;
+  var isNonTopAligned = valign && valign !== 'top';
+
+  // Use the column rect (not child rects) for above/below detection: it stays stable as
+  // gap-cursor widgets shift child DOM positions between repeated clicks.
+  var columnRect = columnEl.getBoundingClientRect();
+
+  // Click ABOVE the first child (only for middle/bottom-aligned columns).
+  var firstChildPos = columnContentStart;
+  var firstChildDom = getChildDom(firstChildPos);
+  if (isNonTopAligned && firstChildDom) {
+    var rect = firstChildDom.getBoundingClientRect();
+    if (event.clientY < rect.top && event.clientY >= columnRect.top) {
+      return {
+        pos: firstChildPos,
+        side: 'left'
+      };
+    }
+  }
+
+  // Click BELOW the last child (for any column alignment).
+  var lastChild = columnNode.lastChild;
+  var lastChildEndPos = columnEndPos;
+  var lastChildStartPos = lastChild ? lastChildEndPos - lastChild.nodeSize : columnContentStart;
+  var lastChildDom = lastChild ? getChildDom(lastChildStartPos) : null;
+  if (lastChild && lastChildDom) {
+    var _rect = lastChildDom.getBoundingClientRect();
+    if (event.clientY > _rect.bottom && event.clientY <= columnRect.bottom) {
+      return {
+        pos: lastChildEndPos,
+        side: 'right'
+      };
+    }
+  }
+
+  // Fallback: click lands ON a single atomic child that fills the column (mediaSingle/expand),
+  // so the above/below checks never fired.
+  if (columnNode.childCount === 1) {
+    var onlyChild = columnNode.firstChild;
+    // Exclude `panel`: its wrapper makes `view.nodeDOM` non-null and intercepts clicks, so the
+    // guard below would wrongly fire for in-panel blank-space clicks (which have their own
+    // native gap cursor).
+    if (onlyChild && onlyChild.type.name !== 'paragraph' && onlyChild.type.name !== 'panel') {
+      // Bail when the click is on the child's own content. For media the wrapper is full-width
+      // so test against the <img> rect; resolve it only for a direct mediaSingle child (else
+      // getContentRect could grab an image nested in an expand and break its toggle).
+      var contentRect = onlyChild.type.name === 'mediaSingle' ? getContentRect(firstChildDom) : null;
+      if (contentRect) {
+        var insideImage = event.clientX >= contentRect.left && event.clientX <= contentRect.right && event.clientY >= contentRect.top && event.clientY <= contentRect.bottom;
+        if (insideImage) {
+          return undefined;
+        }
+      } else {
+        // Other atomics: bail when posAtCoords resolves strictly inside the node range.
+        var coordPos = null;
+        try {
+          coordPos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY
+          });
+        } catch (_unused3) {
+          coordPos = null;
+        }
+        if (coordPos && coordPos.pos > firstChildPos && coordPos.pos < lastChildEndPos) {
+          return undefined;
+        }
+      }
+
+      // Fire when the child DOM is resolvable, or when it's null (media not yet loaded) but
+      // the click target is the column itself (no node view intercepted it).
+      var targetEl = event.target;
+      var targetIsColumn = targetEl === columnEl;
+      var shouldUseFallback = firstChildDom !== null || targetIsColumn;
+      if (shouldUseFallback) {
+        var side = getGapCursorSideForBlankSpaceClick(firstChildDom, columnRect, event.clientX, event.clientY);
+        return side === 'left' ? {
+          pos: firstChildPos,
+          side: 'left'
+        } : {
+          pos: lastChildEndPos,
+          side: 'right'
+        };
+      }
+    }
+  }
+  return undefined;
+};
+
+/**
+ * The tight `<img>` content rect (or `null`). The outer wrapper often fills the whole column
+ * width, so the `<img>` rect is needed to tell "beside the image" from "on the image".
+ */
+var getContentRect = function getContentRect(firstChildDom) {
+  var img = firstChildDom === null || firstChildDom === void 0 ? void 0 : firstChildDom.querySelector('img');
+  return img ? img.getBoundingClientRect() : null;
+};
+
+/**
+ * Which side of an atomic child a blank-space click belongs to. Prefers the tight content (image)
+ * rect when available — using its midpoint so it's direction-agnostic (handles RTL right-aligned
+ * images) — otherwise falls back to the column's vertical midpoint.
+ */
+var getGapCursorSideForBlankSpaceClick = function getGapCursorSideForBlankSpaceClick(firstChildDom, columnRect, clientX, clientY) {
+  var contentRect = getContentRect(firstChildDom);
+  if (contentRect) {
+    if (clientY < contentRect.top) {
+      return 'left';
+    }
+    if (clientY > contentRect.bottom) {
+      return 'right';
+    }
+    if (clientX < (contentRect.left + contentRect.right) / 2) {
+      return 'left';
+    }
+    return 'right';
+  }
+  var columnMidY = columnRect.top + columnRect.height / 2;
+  return clientY < columnMidY ? 'left' : 'right';
+};
+
+/**
+ * True when the blank-space click target child is a paragraph, so the caller uses a TextSelection
+ * instead of a gap cursor. LEFT inspects the first child, RIGHT the last child.
+ */
+export var isParagraphBlankSpaceTarget = function isParagraphBlankSpaceTarget(view, gapTarget) {
+  var pos = gapTarget.pos,
+    side = gapTarget.side;
+  var doc = view.state.doc;
+  try {
+    var $pos = doc.resolve(pos);
+    var childNode = side === 'left' ? $pos.nodeAfter : $pos.nodeBefore;
+    return (childNode === null || childNode === void 0 ? void 0 : childNode.type.name) === 'paragraph';
+  } catch (_unused4) {
+    return false;
+  }
 };

package/dist/types/pm-plugins/utils/index.d.ts

@@ -11,3 +11,22 @@ export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeW
  * @returns Transaction or undefined
  */
 export declare const selectIntoLayout: (view: EditorView, posOfLayout: number, childIndex?: number) => Transaction | undefined;
+export type GapCursorTarget = {
+    pos: number;
+    side: 'left' | 'right';
+};
+/**
+ * For a blank-space click inside a layout column — above the first child (middle/bottom-aligned
+ * columns) or below the last child (any alignment) — return the ProseMirror position and side
+ * for a gap cursor. Returns `undefined` when the kill switch is ON, the click is outside a
+ * layoutColumn, or the Y coordinate is not in blank space.
+ *
+ * The `advanced_layouts` / `platform_editor_layout_column_menu` gates live in the caller
+ * (`applyBlankSpaceGapCursor`); only the kill switch is checked here.
+ */
+export declare const getGapCursorTargetForBlankSpaceClick: (view: EditorView, event: MouseEvent) => GapCursorTarget | undefined;
+/**
+ * True when the blank-space click target child is a paragraph, so the caller uses a TextSelection
+ * instead of a gap cursor. LEFT inspects the first child, RIGHT the last child.
+ */
+export declare const isParagraphBlankSpaceTarget: (view: EditorView, gapTarget: GapCursorTarget) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "13.2.2",
+	"version": "13.2.3",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -49,7 +49,7 @@
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.12.0",
+		"@atlaskit/editor-common": "^116.13.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},