@atlaskit/editor-plugin-block-controls 7.11.3 → 7.12.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.12.0
+
+### Minor Changes
+
+- [`ed2e45b56a325`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ed2e45b56a325) -
+  ED-29696 fix CSS anchor selector
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.11.4
+
+### Patch Changes
+
+- [`26f8da78a699c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26f8da78a699c) -
+  EDITOR-3756 Fix initial collapse of preserved selection
+- Updated dependencies
+
 ## 7.11.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/selection-preservation/pm-plugin.js

@@ -8,11 +8,7 @@ exports.createSelectionPreservationPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _selection = require("@atlaskit/editor-common/selection");
-var _state = require("@atlaskit/editor-prosemirror/state");
-var _transform = require("@atlaskit/editor-prosemirror/transform");
-var _main = require("../main");
-var _getSelection = require("../utils/getSelection");
+var _selection = require("../utils/selection");
 var _editorCommands = require("./editor-commands");
 var _pluginKey = require("./plugin-key");
 var _utils = require("./utils");
@@ -64,7 +60,7 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
           newState.preservedSelection = undefined;
         }
         if (newState.preservedSelection && tr.docChanged) {
-          newState.preservedSelection = mapSelection(newState.preservedSelection, tr);
+          newState.preservedSelection = (0, _selection.mapPreservedSelection)(newState.preservedSelection, tr);
         }
         return newState;
       }
@@ -97,44 +93,4 @@ var createSelectionPreservationPlugin = exports.createSelectionPreservationPlugi
       return null;
     }
   });
-};
-var mapSelection = function mapSelection(selection, tr) {
-  var _ref = (0, _main.getBlockControlsMeta)(tr) || {},
-    nodeMoved = _ref.nodeMoved,
-    nodeMovedOffset = _ref.nodeMovedOffset;
-  var mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new _transform.Mapping([new _transform.StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
-  if (selection instanceof _state.TextSelection) {
-    var from = mapping.map(selection.from);
-    var to = mapping.map(selection.to);
-    var isSelectionEmpty = from === to;
-    var wasSelectionEmpty = selection.from === selection.to;
-    if (isSelectionEmpty) {
-      if (!wasSelectionEmpty) {
-        // If selection has become empty i.e. content has been deleted, stop preserving
-        return undefined;
-      }
-      // When preserving a cursor selection, just map the position without expanding
-      return new _state.TextSelection(tr.doc.resolve(from));
-    }
-
-    // expand the text selection range to block boundaries, so as document changes occur the
-    // selection always includes whole nodes
-    var expanded = (0, _selection.expandToBlockRange)(tr.doc.resolve(from), tr.doc.resolve(to));
-
-    // collapse the expanded range to a valid selection range
-    var _collapseToSelectionR = (0, _getSelection.collapseToSelectionRange)(expanded.$from, expanded.$to),
-      $from = _collapseToSelectionR.$from,
-      $to = _collapseToSelectionR.$to;
-
-    // stop preserving if preserved selection becomes invalid
-    if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
-      return undefined;
-    }
-    return new _state.TextSelection($from, $to);
-  }
-  try {
-    return selection.map(tr.doc, mapping);
-  } catch (_unused) {
-    return undefined;
-  }
 };

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

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = exports.expandSelectionHeadToNodeAtPos = exports.alignAnchorHeadInDirectionOfPos = void 0;
+exports.mapPreservedSelection = exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = exports.expandSelectionHeadToNodeAtPos = exports.alignAnchorHeadInDirectionOfPos = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _main = require("../main");
+var _getSelection = require("./getSelection");
 var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
   var pluginState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
@@ -26,7 +29,12 @@ var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = functi
 };
 
 /**
+ * Given a handle position, returns the from and to positions of the selected content.
+ * If the handle position is not in a multi-selection, it returns the node's from and to positions.
  *
+ * @param handlePos The position of the handle
+ * @param tr The transaction to use for position calculations
+ * @param api The BlockControlsPlugin API for accessing shared state
  * @returns from and to positions of the selected content (after expansion)
  */
 var getSelectedSlicePosition = exports.getSelectedSlicePosition = function getSelectedSlicePosition(handlePos, tr, api) {
@@ -72,4 +80,52 @@ var expandSelectionHeadToNodeAtPos = exports.expandSelectionHeadToNodeAtPos = fu
  */
 var alignAnchorHeadInDirectionOfPos = exports.alignAnchorHeadInDirectionOfPos = function alignAnchorHeadInDirectionOfPos(selection, pos) {
   return selection instanceof _state.NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new _state.TextSelection(selection.$head, selection.$anchor) : selection;
+};
+
+/**
+ * This maps a preserved selection through a transaction, expanding text selections to block boundaries.
+ *
+ * @param selection The existing preserved selection to map
+ * @param tr The transaction to map through
+ * @returns The mapped selection or undefined if mapping is not possible
+ */
+var mapPreservedSelection = exports.mapPreservedSelection = function mapPreservedSelection(selection, tr) {
+  var _ref = (0, _main.getBlockControlsMeta)(tr) || {},
+    nodeMoved = _ref.nodeMoved,
+    nodeMovedOffset = _ref.nodeMovedOffset;
+  var mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new _transform.Mapping([new _transform.StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
+  if (selection instanceof _state.TextSelection) {
+    var from = mapping.map(selection.from);
+    var to = mapping.map(selection.to);
+    var isSelectionEmpty = from === to;
+    var wasSelectionEmpty = selection.from === selection.to;
+    if (isSelectionEmpty) {
+      if (!wasSelectionEmpty) {
+        // If selection has become empty i.e. content has been deleted, stop preserving
+        return undefined;
+      }
+      // When preserving a cursor selection, just map the position without expanding
+      return new _state.TextSelection(tr.doc.resolve(from));
+    }
+
+    // expand the text selection range to block boundaries, so as document changes occur the
+    // selection always includes whole nodes
+    var expanded = (0, _selection.expandToBlockRange)(tr.doc.resolve(from), tr.doc.resolve(to));
+
+    // collapse the expanded range to a valid selection range
+    var _collapseToSelectionR = (0, _getSelection.collapseToSelectionRange)(expanded.$from, expanded.$to),
+      $from = _collapseToSelectionR.$from,
+      $to = _collapseToSelectionR.$to;
+
+    // stop preserving if preserved selection becomes invalid
+    if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
+      return undefined;
+    }
+    return new _state.TextSelection($from, $to);
+  }
+  try {
+    return selection.map(tr.doc, mapping);
+  } catch (_unused) {
+    return undefined;
+  }
 };

package/dist/cjs/ui/drag-handle.js

@@ -410,13 +410,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
   var handleOnClickNew = (0, _react.useCallback)(function (e) {
     var _api$core;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
-      var _api$analytics, _resolvedStartPos$nod, _selectionPreservatio, _api$blockControls, _api$blockControls2;
+      var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
       var tr = _ref3.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
       var resolvedStartPos = tr.doc.resolve(startPos);
+      var selection = ((_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: _analytics.EVENT_TYPE.UI,
         action: _analytics.ACTION.CLICKED,
@@ -427,7 +428,6 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref2) {
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      var selection = ((_selectionPreservatio = _pluginKey.selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
       var range = getExpandedSelectionRange({
         doc: tr.doc,
         selection: selection,

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

@@ -405,29 +405,27 @@ var blockCardWithoutLayout = (0, _react.css)({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+var nextAnchorSelector = ['&[data-node-anchor]',
+// adjacent sibling with anchor
+'&:not([data-node-anchor]) [data-node-anchor]',
+// nested anchor inside adjacent sibling
+'&.ProseMirror-widget + [data-node-anchor]',
+// adjacent sibling with anchor (when next to a widget like gap cursor)
+'&.ProseMirror-widget + :not([data-node-anchor]) [data-node-anchor]' // nested anchor inside adjacent sibling (when next to a widget like gap cursor)
+].join(', ');
 var dragHandlerAnchorStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
+    '[data-testid="block-ctrl-decorator-widget"] + *': (0, _defineProperty2.default)({}, "".concat(nextAnchorSelector), {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
+    }),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
+    '[data-testid="block-ctrl-quick-insert-button"] + *': (0, _defineProperty2.default)({}, "".concat(nextAnchorSelector), {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    }
+    })
   }
 });
 

package/dist/es2019/pm-plugins/selection-preservation/pm-plugin.js

@@ -1,10 +1,6 @@
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { expandToBlockRange } from '@atlaskit/editor-common/selection';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
-import { getBlockControlsMeta } from '../main';
-import { collapseToSelectionRange } from '../utils/getSelection';
+import { mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
 import { selectionPreservationPluginKey } from './plugin-key';
 import { getSelectionPreservationMeta, hasUserSelectionChange } from './utils';
@@ -57,7 +53,7 @@ export const createSelectionPreservationPlugin = () => {
           newState.preservedSelection = undefined;
         }
         if (newState.preservedSelection && tr.docChanged) {
-          newState.preservedSelection = mapSelection(newState.preservedSelection, tr);
+          newState.preservedSelection = mapPreservedSelection(newState.preservedSelection, tr);
         }
         return newState;
       }
@@ -90,46 +86,4 @@ export const createSelectionPreservationPlugin = () => {
       return null;
     }
   });
-};
-const mapSelection = (selection, tr) => {
-  const {
-    nodeMoved,
-    nodeMovedOffset
-  } = getBlockControlsMeta(tr) || {};
-  const mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new Mapping([new StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
-  if (selection instanceof TextSelection) {
-    const from = mapping.map(selection.from);
-    const to = mapping.map(selection.to);
-    const isSelectionEmpty = from === to;
-    const wasSelectionEmpty = selection.from === selection.to;
-    if (isSelectionEmpty) {
-      if (!wasSelectionEmpty) {
-        // If selection has become empty i.e. content has been deleted, stop preserving
-        return undefined;
-      }
-      // When preserving a cursor selection, just map the position without expanding
-      return new TextSelection(tr.doc.resolve(from));
-    }
-
-    // expand the text selection range to block boundaries, so as document changes occur the
-    // selection always includes whole nodes
-    const expanded = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to));
-
-    // collapse the expanded range to a valid selection range
-    const {
-      $from,
-      $to
-    } = collapseToSelectionRange(expanded.$from, expanded.$to);
-
-    // stop preserving if preserved selection becomes invalid
-    if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
-      return undefined;
-    }
-    return new TextSelection($from, $to);
-  }
-  try {
-    return selection.map(tr.doc, mapping);
-  } catch {
-    return undefined;
-  }
 };

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

@@ -1,5 +1,8 @@
-import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { key } from '../main';
+import { expandToBlockRange } from '@atlaskit/editor-common/selection';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
+import { getBlockControlsMeta, key } from '../main';
+import { collapseToSelectionRange } from './getSelection';
 export const getMultiSelectionIfPosInside = (api, pos, tr) => {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
   const pluginState = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
@@ -20,7 +23,12 @@ export const getMultiSelectionIfPosInside = (api, pos, tr) => {
 };
 
 /**
+ * Given a handle position, returns the from and to positions of the selected content.
+ * If the handle position is not in a multi-selection, it returns the node's from and to positions.
  *
+ * @param handlePos The position of the handle
+ * @param tr The transaction to use for position calculations
+ * @param api The BlockControlsPlugin API for accessing shared state
  * @returns from and to positions of the selected content (after expansion)
  */
 export const getSelectedSlicePosition = (handlePos, tr, api) => {
@@ -67,4 +75,54 @@ export const expandSelectionHeadToNodeAtPos = (selection, nodePos) => {
  */
 export const alignAnchorHeadInDirectionOfPos = (selection, pos) => {
   return selection instanceof NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new TextSelection(selection.$head, selection.$anchor) : selection;
+};
+
+/**
+ * This maps a preserved selection through a transaction, expanding text selections to block boundaries.
+ *
+ * @param selection The existing preserved selection to map
+ * @param tr The transaction to map through
+ * @returns The mapped selection or undefined if mapping is not possible
+ */
+export const mapPreservedSelection = (selection, tr) => {
+  const {
+    nodeMoved,
+    nodeMovedOffset
+  } = getBlockControlsMeta(tr) || {};
+  const mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new Mapping([new StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
+  if (selection instanceof TextSelection) {
+    const from = mapping.map(selection.from);
+    const to = mapping.map(selection.to);
+    const isSelectionEmpty = from === to;
+    const wasSelectionEmpty = selection.from === selection.to;
+    if (isSelectionEmpty) {
+      if (!wasSelectionEmpty) {
+        // If selection has become empty i.e. content has been deleted, stop preserving
+        return undefined;
+      }
+      // When preserving a cursor selection, just map the position without expanding
+      return new TextSelection(tr.doc.resolve(from));
+    }
+
+    // expand the text selection range to block boundaries, so as document changes occur the
+    // selection always includes whole nodes
+    const expanded = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to));
+
+    // collapse the expanded range to a valid selection range
+    const {
+      $from,
+      $to
+    } = collapseToSelectionRange(expanded.$from, expanded.$to);
+
+    // stop preserving if preserved selection becomes invalid
+    if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
+      return undefined;
+    }
+    return new TextSelection($from, $to);
+  }
+  try {
+    return selection.map(tr.doc, mapping);
+  } catch {
+    return undefined;
+  }
 };

package/dist/es2019/ui/drag-handle.js

@@ -389,12 +389,13 @@ export const DragHandle = ({
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
       tr
     }) => {
-      var _api$analytics, _resolvedStartPos$nod, _selectionPreservatio, _api$blockControls, _api$blockControls2;
+      var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
       const startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
       const resolvedStartPos = tr.doc.resolve(startPos);
+      const selection = ((_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
       api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
         eventType: EVENT_TYPE.UI,
         action: ACTION.CLICKED,
@@ -405,7 +406,6 @@ export const DragHandle = ({
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      const selection = ((_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
       const range = getExpandedSelectionRange({
         doc: tr.doc,
         selection,

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

@@ -483,28 +483,32 @@ const blockCardWithoutLayout = css({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+const nextAnchorSelector = ['&[data-node-anchor]',
+// adjacent sibling with anchor
+'&:not([data-node-anchor]) [data-node-anchor]',
+// nested anchor inside adjacent sibling
+'&.ProseMirror-widget + [data-node-anchor]',
+// adjacent sibling with anchor (when next to a widget like gap cursor)
+'&.ProseMirror-widget + :not([data-node-anchor]) [data-node-anchor]' // nested anchor inside adjacent sibling (when next to a widget like gap cursor)
+].join(', ');
 const dragHandlerAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    '[data-testid="block-ctrl-decorator-widget"] + *': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      [`${nextAnchorSelector}`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+      }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    '[data-testid="block-ctrl-quick-insert-button"] + *': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      [`${nextAnchorSelector}`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+      }
     }
   }
 });

package/dist/esm/pm-plugins/selection-preservation/pm-plugin.js

@@ -3,11 +3,7 @@ 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 { logException } from '@atlaskit/editor-common/monitoring';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { expandToBlockRange } from '@atlaskit/editor-common/selection';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
-import { getBlockControlsMeta } from '../main';
-import { collapseToSelectionRange } from '../utils/getSelection';
+import { mapPreservedSelection } from '../utils/selection';
 import { stopPreservingSelection } from './editor-commands';
 import { selectionPreservationPluginKey } from './plugin-key';
 import { getSelectionPreservationMeta, hasUserSelectionChange } from './utils';
@@ -58,7 +54,7 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
           newState.preservedSelection = undefined;
         }
         if (newState.preservedSelection && tr.docChanged) {
-          newState.preservedSelection = mapSelection(newState.preservedSelection, tr);
+          newState.preservedSelection = mapPreservedSelection(newState.preservedSelection, tr);
         }
         return newState;
       }
@@ -91,44 +87,4 @@ export var createSelectionPreservationPlugin = function createSelectionPreservat
       return null;
     }
   });
-};
-var mapSelection = function mapSelection(selection, tr) {
-  var _ref = getBlockControlsMeta(tr) || {},
-    nodeMoved = _ref.nodeMoved,
-    nodeMovedOffset = _ref.nodeMovedOffset;
-  var mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new Mapping([new StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
-  if (selection instanceof TextSelection) {
-    var from = mapping.map(selection.from);
-    var to = mapping.map(selection.to);
-    var isSelectionEmpty = from === to;
-    var wasSelectionEmpty = selection.from === selection.to;
-    if (isSelectionEmpty) {
-      if (!wasSelectionEmpty) {
-        // If selection has become empty i.e. content has been deleted, stop preserving
-        return undefined;
-      }
-      // When preserving a cursor selection, just map the position without expanding
-      return new TextSelection(tr.doc.resolve(from));
-    }
-
-    // expand the text selection range to block boundaries, so as document changes occur the
-    // selection always includes whole nodes
-    var expanded = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to));
-
-    // collapse the expanded range to a valid selection range
-    var _collapseToSelectionR = collapseToSelectionRange(expanded.$from, expanded.$to),
-      $from = _collapseToSelectionR.$from,
-      $to = _collapseToSelectionR.$to;
-
-    // stop preserving if preserved selection becomes invalid
-    if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
-      return undefined;
-    }
-    return new TextSelection($from, $to);
-  }
-  try {
-    return selection.map(tr.doc, mapping);
-  } catch (_unused) {
-    return undefined;
-  }
 };

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

@@ -1,5 +1,8 @@
-import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { key } from '../main';
+import { expandToBlockRange } from '@atlaskit/editor-common/selection';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
+import { getBlockControlsMeta, key } from '../main';
+import { collapseToSelectionRange } from './getSelection';
 export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
   var _api$blockControls, _pluginState$multiSel, _tr$getMeta;
   var pluginState = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState();
@@ -20,7 +23,12 @@ export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(
 };
 
 /**
+ * Given a handle position, returns the from and to positions of the selected content.
+ * If the handle position is not in a multi-selection, it returns the node's from and to positions.
  *
+ * @param handlePos The position of the handle
+ * @param tr The transaction to use for position calculations
+ * @param api The BlockControlsPlugin API for accessing shared state
  * @returns from and to positions of the selected content (after expansion)
  */
 export var getSelectedSlicePosition = function getSelectedSlicePosition(handlePos, tr, api) {
@@ -66,4 +74,52 @@ export var expandSelectionHeadToNodeAtPos = function expandSelectionHeadToNodeAt
  */
 export var alignAnchorHeadInDirectionOfPos = function alignAnchorHeadInDirectionOfPos(selection, pos) {
   return selection instanceof NodeSelection && Math.max(pos, selection.anchor) === selection.anchor ? new TextSelection(selection.$head, selection.$anchor) : selection;
+};
+
+/**
+ * This maps a preserved selection through a transaction, expanding text selections to block boundaries.
+ *
+ * @param selection The existing preserved selection to map
+ * @param tr The transaction to map through
+ * @returns The mapped selection or undefined if mapping is not possible
+ */
+export var mapPreservedSelection = function mapPreservedSelection(selection, tr) {
+  var _ref = getBlockControlsMeta(tr) || {},
+    nodeMoved = _ref.nodeMoved,
+    nodeMovedOffset = _ref.nodeMovedOffset;
+  var mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new Mapping([new StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
+  if (selection instanceof TextSelection) {
+    var from = mapping.map(selection.from);
+    var to = mapping.map(selection.to);
+    var isSelectionEmpty = from === to;
+    var wasSelectionEmpty = selection.from === selection.to;
+    if (isSelectionEmpty) {
+      if (!wasSelectionEmpty) {
+        // If selection has become empty i.e. content has been deleted, stop preserving
+        return undefined;
+      }
+      // When preserving a cursor selection, just map the position without expanding
+      return new TextSelection(tr.doc.resolve(from));
+    }
+
+    // expand the text selection range to block boundaries, so as document changes occur the
+    // selection always includes whole nodes
+    var expanded = expandToBlockRange(tr.doc.resolve(from), tr.doc.resolve(to));
+
+    // collapse the expanded range to a valid selection range
+    var _collapseToSelectionR = collapseToSelectionRange(expanded.$from, expanded.$to),
+      $from = _collapseToSelectionR.$from,
+      $to = _collapseToSelectionR.$to;
+
+    // stop preserving if preserved selection becomes invalid
+    if ($from.pos < 0 || $to.pos > tr.doc.content.size || $from.pos >= $to.pos) {
+      return undefined;
+    }
+    return new TextSelection($from, $to);
+  }
+  try {
+    return selection.map(tr.doc, mapping);
+  } catch (_unused) {
+    return undefined;
+  }
 };

package/dist/esm/ui/drag-handle.js

@@ -407,13 +407,14 @@ export var DragHandle = function DragHandle(_ref2) {
   var handleOnClickNew = useCallback(function (e) {
     var _api$core;
     api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
-      var _api$analytics, _resolvedStartPos$nod, _selectionPreservatio, _api$blockControls, _api$blockControls2;
+      var _selectionPreservatio, _api$analytics, _resolvedStartPos$nod, _api$blockControls, _api$blockControls2;
       var tr = _ref3.tr;
       var startPos = getPos();
       if (startPos === undefined) {
         return tr;
       }
       var resolvedStartPos = tr.doc.resolve(startPos);
+      var selection = ((_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
         eventType: EVENT_TYPE.UI,
         action: ACTION.CLICKED,
@@ -424,7 +425,6 @@ export var DragHandle = function DragHandle(_ref2) {
           nodeType: ((_resolvedStartPos$nod = resolvedStartPos.nodeAfter) === null || _resolvedStartPos$nod === void 0 ? void 0 : _resolvedStartPos$nod.type.name) || ''
         }
       })(tr);
-      var selection = ((_selectionPreservatio = selectionPreservationPluginKey.getState(view.state)) === null || _selectionPreservatio === void 0 ? void 0 : _selectionPreservatio.preservedSelection) || tr.selection;
       var range = getExpandedSelectionRange({
         doc: tr.doc,
         selection: selection,

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

@@ -398,29 +398,27 @@ var blockCardWithoutLayout = css({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+var nextAnchorSelector = ['&[data-node-anchor]',
+// adjacent sibling with anchor
+'&:not([data-node-anchor]) [data-node-anchor]',
+// nested anchor inside adjacent sibling
+'&.ProseMirror-widget + [data-node-anchor]',
+// adjacent sibling with anchor (when next to a widget like gap cursor)
+'&.ProseMirror-widget + :not([data-node-anchor]) [data-node-anchor]' // nested anchor inside adjacent sibling (when next to a widget like gap cursor)
+].join(', ');
 var dragHandlerAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
+    '[data-testid="block-ctrl-decorator-widget"] + *': _defineProperty({}, "".concat(nextAnchorSelector), {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
+    }),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
+    '[data-testid="block-ctrl-quick-insert-button"] + *': _defineProperty({}, "".concat(nextAnchorSelector), {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    }
+    })
   }
 });
 

package/dist/types/pm-plugins/main.d.ts

@@ -2,7 +2,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, PluginState } from '../blockControlsPluginType';
@@ -61,4 +61,4 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
     lastDragCancelled: any;
     isSelectedViaDragHandle: any;
 }>;
-export declare const getBlockControlsMeta: (tr: ReadonlyTransaction) => BlockControlsMeta | undefined;
+export declare const getBlockControlsMeta: (tr: Transaction | ReadonlyTransaction) => BlockControlsMeta | undefined;

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

@@ -1,12 +1,17 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type Transaction, type Selection } from '@atlaskit/editor-prosemirror/state';
+import { type ReadonlyTransaction, type Selection, type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { BlockControlsPlugin } from '../../blockControlsPluginType';
 export declare const getMultiSelectionIfPosInside: (api: ExtractInjectionAPI<BlockControlsPlugin>, pos: number, tr?: Transaction) => {
     anchor?: number;
     head?: number;
 };
 /**
+ * Given a handle position, returns the from and to positions of the selected content.
+ * If the handle position is not in a multi-selection, it returns the node's from and to positions.
  *
+ * @param handlePos The position of the handle
+ * @param tr The transaction to use for position calculations
+ * @param api The BlockControlsPlugin API for accessing shared state
  * @returns from and to positions of the selected content (after expansion)
  */
 export declare const getSelectedSlicePosition: (handlePos: number, tr: Transaction, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
@@ -25,3 +30,11 @@ export declare const expandSelectionHeadToNodeAtPos: (selection: Selection, node
  * which may not align with the existing selection.
  */
 export declare const alignAnchorHeadInDirectionOfPos: (selection: Selection, pos: number) => Selection;
+/**
+ * This maps a preserved selection through a transaction, expanding text selections to block boundaries.
+ *
+ * @param selection The existing preserved selection to map
+ * @param tr The transaction to map through
+ * @returns The mapped selection or undefined if mapping is not possible
+ */
+export declare const mapPreservedSelection: (selection: Selection, tr: ReadonlyTransaction | Transaction) => Selection | undefined;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -2,7 +2,7 @@ import { type IntlShape } from 'react-intl-next';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveDropTargetNode, BlockControlsMeta, BlockControlsPlugin, PluginState } from '../blockControlsPluginType';
@@ -61,4 +61,4 @@ export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin
     lastDragCancelled: any;
     isSelectedViaDragHandle: any;
 }>;
-export declare const getBlockControlsMeta: (tr: ReadonlyTransaction) => BlockControlsMeta | undefined;
+export declare const getBlockControlsMeta: (tr: Transaction | ReadonlyTransaction) => BlockControlsMeta | undefined;

package/dist/types-ts4.5/pm-plugins/utils/selection.d.ts

@@ -1,12 +1,17 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type Transaction, type Selection } from '@atlaskit/editor-prosemirror/state';
+import { type ReadonlyTransaction, type Selection, type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { BlockControlsPlugin } from '../../blockControlsPluginType';
 export declare const getMultiSelectionIfPosInside: (api: ExtractInjectionAPI<BlockControlsPlugin>, pos: number, tr?: Transaction) => {
     anchor?: number;
     head?: number;
 };
 /**
+ * Given a handle position, returns the from and to positions of the selected content.
+ * If the handle position is not in a multi-selection, it returns the node's from and to positions.
  *
+ * @param handlePos The position of the handle
+ * @param tr The transaction to use for position calculations
+ * @param api The BlockControlsPlugin API for accessing shared state
  * @returns from and to positions of the selected content (after expansion)
  */
 export declare const getSelectedSlicePosition: (handlePos: number, tr: Transaction, api: ExtractInjectionAPI<BlockControlsPlugin>) => {
@@ -25,3 +30,11 @@ export declare const expandSelectionHeadToNodeAtPos: (selection: Selection, node
  * which may not align with the existing selection.
  */
 export declare const alignAnchorHeadInDirectionOfPos: (selection: Selection, pos: number) => Selection;
+/**
+ * This maps a preserved selection through a transaction, expanding text selections to block boundaries.
+ *
+ * @param selection The existing preserved selection to map
+ * @param tr The transaction to map through
+ * @returns The mapped selection or undefined if mapping is not possible
+ */
+export declare const mapPreservedSelection: (selection: Selection, tr: ReadonlyTransaction | Transaction) => Selection | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.11.3",
+	"version": "7.12.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/editor-plugin-interaction": "^10.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^3.1.0",
 		"@atlaskit/editor-plugin-metrics": "^7.1.0",
-		"@atlaskit/editor-plugin-quick-insert": "^6.0.0",
+		"@atlaskit/editor-plugin-quick-insert": "^6.1.0",
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
 		"@atlaskit/editor-plugin-toolbar": "^3.4.0",
 		"@atlaskit/editor-plugin-type-ahead": "^6.5.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^14.5.0",
+		"@atlaskit/tmp-editor-statsig": "^14.6.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",