@atlaskit/editor-plugin-show-diff 16.0.2 → 16.0.3

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 16.0.3
+
+### Patch Changes
+
+- [`0265ca1688db1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0265ca1688db1) -
+  [EDITOR-8971] `VanillaTooltip` takes an optional container to append its tooltip to, instead of
+  appending it inside the trigger. Opt-in per caller, and used by the diff contributor tag; every
+  other tooltip is unchanged.
+
+  Diff contributor tag fixes, all behind `confluence_ncs_step_diffing_version_history`:
+  - The tag's full label no longer renders off screen. Its tooltip is hoisted out of the tag, so
+    Popper and the browser measure a top-layer popover from the same origin — inside the trigger
+    they disagreed whenever an ancestor was transformed, such as a wide image.
+  - Stepping to a change reveals only that change's tag, not every tag the active range touches.
+  - A contributor no longer gets two tags inside one navigation stop. Two of their changes that
+    merely touched each kept a tag, and the trailing one could be hovered but never stepped to; it
+    now folds into the leading tag and stays a hover target. Tags for different contributors sharing
+    a stop are still kept apart.
+  - A tag on deleted content no longer disappears when the document changes. Any change remaps the
+    decoration, which rebuilds its widget and fired the teardown — but the deleted-content widget's
+    DOM is reused as-is and runs no mount callback, so the tag was faded out of a change that was
+    still the active one. The tag is now kept whenever its host is still in a live editor.
+
+- Updated dependencies
+
 ## 16.0.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/calculateDiff/calculateDiffDecorations.js

@@ -27,6 +27,7 @@ var _decorationKeys = require("../decorations/decorationKeys");
 var _extractContributorTags = require("../decorations/extractContributorTags");
 var _getAttrChangeRanges = require("../decorations/utils/getAttrChangeRanges");
 var _getMarkChangeRanges = require("../decorations/utils/getMarkChangeRanges");
+var _getScrollableDecorations = require("../getScrollableDecorations");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _diffBySteps = require("./diffBySteps");
 var _groupChangesByBlock = require("./groupChangesByBlock");
@@ -788,7 +789,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   });
   var decorationSet = _view.DecorationSet.empty.add(tr.doc, decorations);
   return {
-    contributorTags: showContributorTags ? (0, _extractContributorTags.extractContributorTags)(decorationSet, contributors) : [],
+    contributorTags: showContributorTags ? (0, _extractContributorTags.extractContributorTags)(decorationSet, contributors, activeIndexPos,
+    // The stops the step buttons walk, so a stop cannot hold a second tag for one
+    // contributor that navigation can never reach.
+    (0, _getScrollableDecorations.getScrollableDecorations)(decorationSet, tr.doc, diffType)) : [],
     decorations: decorationSet,
     diffDescriptors: (0, _decorationKeys.extractDiffDescriptors)(decorationSet)
   };

package/dist/cjs/pm-plugins/decorations/createContributorTagWidget.js

@@ -48,7 +48,26 @@ var mountContributorTag = exports.mountContributorTag = function mountContributo
     diffId: diffId
   }));
   controller.mount(host);
-  return controller;
+
+  /**
+   * Kept alive when ProseMirror only rebuilt the widget desc around this same host: a document
+   * change remaps the decoration and fires `destroy`, but an element `toDOM` is reused verbatim
+   * and runs no mount callback, so tearing down here left an active change with no tag
+   * (EDITOR-8971).
+   *
+   * Deferred, because the host is still attached while that update is in flight. A host outside a
+   * live editor root is a real removal — including the view being destroyed, which drops the root.
+   */
+  return {
+    destroy: function destroy() {
+      return queueMicrotask(function () {
+        var _mountContext$getEdit;
+        if (!host.isConnected || !((_mountContext$getEdit = mountContext.getEditorRoot()) !== null && _mountContext$getEdit !== void 0 && _mountContext$getEdit.contains(host))) {
+          controller.destroy();
+        }
+      });
+    }
+  };
 };
 var unmountContributorTag = exports.unmountContributorTag = function unmountContributorTag(mount) {
   mount === null || mount === void 0 || mount.destroy();

package/dist/cjs/pm-plugins/decorations/extractContributorTags.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractContributorTags = void 0;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -56,12 +57,48 @@ var isSameBlockChange = function isSameBlockChange(inner, block) {
   return inner.spec.attributionKey === block.spec.attributionKey && (block.from <= inner.from && inner.to <= block.to || inner.from <= block.from && block.to <= inner.to);
 };
 
+/**
+ * Which of two changes in the same range leads, and so is the one a tag captions. Position first,
+ * then `side`, since deleted content shares its `from` with the content that replaced it and paints
+ * above; then the narrower range, so a change nested in another captions itself.
+ */
+var byLeadingPosition = function byLeadingPosition(a, b) {
+  var _a$decoration$spec$si, _b$decoration$spec$si;
+  return a.decoration.from - b.decoration.from || ((_a$decoration$spec$si = a.decoration.spec.side) !== null && _a$decoration$spec$si !== void 0 ? _a$decoration$spec$si : 0) - ((_b$decoration$spec$si = b.decoration.spec.side) !== null && _b$decoration$spec$si !== void 0 ? _b$decoration$spec$si : 0) || a.decoration.to - a.decoration.from - (b.decoration.to - b.decoration.from);
+};
+
+/** The targets a navigation range wholly covers, leader first. */
+var containedBy = function containedBy(targets, _ref2) {
+  var from = _ref2.from,
+    to = _ref2.to;
+  return targets.filter(function (_ref3) {
+    var decoration = _ref3.decoration;
+    return from <= decoration.from && decoration.to <= to;
+  }).sort(byLeadingPosition);
+};
+
+/**
+ * The one tag a navigation step reveals. `spec.isActive` is no use here: it covers everything the
+ * group's union range touches, so several tags revealed over each other (EDITOR-8971). Hence
+ * containment, and the leading change of what it covers.
+ */
+var resolveActiveTarget = function resolveActiveTarget(surviving, activeIndexPos) {
+  return containedBy(surviving, activeIndexPos)[0];
+};
+
 /**
  * One model per diff decoration whose attribution resolves to a supplied contributor; anything
  * unattributed, untaggable or unresolved is skipped. A replacement's two decorations are collapsed
  * into a single tag, on whichever half renders first — see `isSameChange` and `leadsReplacement`.
+ *
+ * `activeIndexPos`, when given, reveals exactly one of the tags — see `resolveActiveTarget`.
+ * Absent, each tag keeps the active state its own decoration was drawn with.
+ *
+ * `stops`, when given, is the navigation stop list the step buttons walk
+ * (`getScrollableDecorations`). One contributor cannot hold two tags in one stop, since only the
+ * leading one would ever be reachable. Absent, every decoration keeps its own tag.
  */
-var extractContributorTags = exports.extractContributorTags = function extractContributorTags(decorations, contributors) {
+var extractContributorTags = exports.extractContributorTags = function extractContributorTags(decorations, contributors, activeIndexPos, stops) {
   if (!contributors) {
     return [];
   }
@@ -94,25 +131,30 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
   } finally {
     _iterator.f();
   }
-  var inlineTargets = targets.filter(function (_ref2) {
-    var decoration = _ref2.decoration;
+  var inlineTargets = targets.filter(function (_ref4) {
+    var decoration = _ref4.decoration;
     return decoration.spec.decorationType === 'inline';
   });
-  var blockTargets = targets.filter(function (_ref3) {
-    var decoration = _ref3.decoration;
+  var blockTargets = targets.filter(function (_ref5) {
+    var decoration = _ref5.decoration;
     return decoration.spec.decorationType === 'block';
   });
-  var widgetTargets = targets.filter(function (_ref4) {
-    var decoration = _ref4.decoration;
+  var widgetTargets = targets.filter(function (_ref6) {
+    var decoration = _ref6.decoration;
     return decoration.spec.decorationType === 'widget';
   });
   var linkedDiffIds = new Map();
   var folded = new Set();
   var fold = function fold(host, target) {
-    var _linkedDiffIds$get;
+    var _linkedDiffIds$get, _linkedDiffIds$get2;
     folded.add(target);
     var hostDiffId = host.decoration.spec.diffId;
-    linkedDiffIds.set(hostDiffId, [].concat((0, _toConsumableArray2.default)((_linkedDiffIds$get = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : []), [target.decoration.spec.diffId]));
+    var targetDiffId = target.decoration.spec.diffId;
+    // A target that already hosts folded tags hands them up, so no hover target is orphaned when
+    // one host folds into another.
+    var inherited = (_linkedDiffIds$get = linkedDiffIds.get(targetDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : [];
+    linkedDiffIds.delete(targetDiffId);
+    linkedDiffIds.set(hostDiffId, [].concat((0, _toConsumableArray2.default)((_linkedDiffIds$get2 = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get2 !== void 0 ? _linkedDiffIds$get2 : []), [targetDiffId], (0, _toConsumableArray2.default)(inherited)));
   };
   var _loop = function _loop() {
       var target = _targets[_i];
@@ -122,8 +164,8 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
       }
 
       // A block outranks both other kinds, so it is tried first.
-      var block = blockTargets.find(function (_ref5) {
-        var decoration = _ref5.decoration;
+      var block = blockTargets.find(function (_ref7) {
+        var decoration = _ref7.decoration;
         return isSameBlockChange(target.decoration, decoration);
       });
       if (block) {
@@ -132,8 +174,8 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
       }
       if (decorationType === 'inline') {
         // The deleted half renders in front of this one, so that half captions the change.
-        var leadingWidget = widgetTargets.find(function (_ref6) {
-          var decoration = _ref6.decoration;
+        var leadingWidget = widgetTargets.find(function (_ref8) {
+          var decoration = _ref8.decoration;
           return leadsReplacement(decoration) && isSameChange(decoration, target.decoration);
         });
         if (leadingWidget) {
@@ -146,8 +188,8 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
       if (leadsReplacement(target.decoration)) {
         return 0; // continue
       }
-      var host = inlineTargets.find(function (_ref7) {
-        var decoration = _ref7.decoration;
+      var host = inlineTargets.find(function (_ref9) {
+        var decoration = _ref9.decoration;
         return isSameChange(target.decoration, decoration);
       });
       if (host) {
@@ -159,14 +201,72 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
     _ret = _loop();
     if (_ret === 0) continue;
   }
-  return targets.filter(function (target) {
+
+  // One tag per contributor per navigation stop. The folds above only catch a replacement's two
+  // halves and a block's own highlights; two of one contributor's changes that merely touch are a
+  // single stop (`groupTouchingDecorations`) yet kept a tag each, so the stop's trailing tag was
+  // drawn but could never be stepped to (EDITOR-8971). It folds into the leading tag of its
+  // contributor, staying a hover target. Contributors are kept apart: a stop spanning two of them
+  // still captions each, rather than crediting one for the other's change.
+  var _iterator2 = _createForOfIteratorHelper(stops !== null && stops !== void 0 ? stops : []),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var stop = _step2.value;
+      var byContributor = new Map();
+      var _iterator3 = _createForOfIteratorHelper(containedBy(targets.filter(function (target) {
+          return !folded.has(target);
+        }), stop)),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _target$decoration$sp, _byContributor$get;
+          var target = _step3.value;
+          var key = (_target$decoration$sp = target.decoration.spec.attributionKey) !== null && _target$decoration$sp !== void 0 ? _target$decoration$sp : '';
+          byContributor.set(key, [].concat((0, _toConsumableArray2.default)((_byContributor$get = byContributor.get(key)) !== null && _byContributor$get !== void 0 ? _byContributor$get : []), [target]));
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      var _iterator4 = _createForOfIteratorHelper(byContributor.values()),
+        _step4;
+      try {
+        var _loop2 = function _loop2() {
+          var _step4$value = (0, _toArray2.default)(_step4.value),
+            leader = _step4$value[0],
+            trailing = _arrayLikeToArray(_step4$value).slice(1);
+          trailing.forEach(function (target) {
+            return fold(leader, target);
+          });
+        };
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          _loop2();
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var surviving = targets.filter(function (target) {
     return !folded.has(target);
-  }).map(function (_ref8) {
-    var contributor = _ref8.contributor,
-      spec = _ref8.decoration.spec;
+  });
+  var activeTarget = activeIndexPos === undefined ? undefined : resolveActiveTarget(surviving, activeIndexPos);
+  return surviving.map(function (target) {
+    var contributor = target.contributor,
+      spec = target.decoration.spec;
     var connected = contributor.connectedToKey ? contributors[contributor.connectedToKey] : undefined;
     var connectedContributor = connected ? toTagContributor(connected) : undefined;
     var linked = linkedDiffIds.get(spec.diffId);
+    // Only the navigated tag reveals; with no active range, the decoration's own state stands.
+    var isActive = activeIndexPos === undefined ? spec.isActive : target === activeTarget;
     return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
       contributor: toTagContributor(contributor),
       diffId: spec.diffId
@@ -174,8 +274,8 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
       connectedContributor: connectedContributor
     } : {}), spec.colorScheme ? {
       colorScheme: spec.colorScheme
-    } : {}), spec.isActive !== undefined ? {
-      isActive: spec.isActive
+    } : {}), isActive !== undefined ? {
+      isActive: isActive
     } : {}), spec.isInserted !== undefined ? {
       isInserted: spec.isInserted
     } : {}), linked ? {

package/dist/cjs/ui/ContributorTag/buildContributorTagDom.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildContributorTagDom = exports.TAG_EXIT_FALLBACK_MS = exports.MAX_TAG_WIDTH = exports.CONTRIBUTOR_TAG_Z_INDEX = exports.CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = exports.CONTRIBUTOR_TAG_NAME_TESTID = exports.CONTRIBUTOR_TAG_CLASS = void 0;
+exports.buildContributorTagDom = exports.TAG_EXIT_FALLBACK_MS = exports.MAX_TAG_WIDTH = exports.CONTRIBUTOR_TAG_Z_INDEX = exports.CONTRIBUTOR_TAG_TOOLTIP_STYLES = exports.CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = exports.CONTRIBUTOR_TAG_NAME_TESTID = exports.CONTRIBUTOR_TAG_CLASS = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
@@ -49,6 +49,30 @@ var CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = exports.CONTRIBUTOR_TAG_REVEALED_ATTRIB
  */
 var TAG_EXIT_FALLBACK_MS = exports.TAG_EXIT_FALLBACK_MS = 1200;
 
+/**
+ * The tooltip's look, inline rather than through `VANILLA_TOOLTIP_DEFAULT_CLASS`: this tooltip is
+ * hoisted out of the tag, and that class's rule is scoped under `.ProseMirror` — see
+ * `resolveTooltipContainer`. Otherwise `vanillaTooltipDefaultStyles` in editor-core, which is the
+ * look every other vanilla tooltip has; keep the two in step.
+ */
+var CONTRIBUTOR_TAG_TOOLTIP_STYLES = exports.CONTRIBUTOR_TAG_TOOLTIP_STYLES = {
+  boxSizing: 'border-box',
+  maxWidth: '240px',
+  backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+  // A `popover` is given one by the UA stylesheet.
+  border: 'none',
+  borderRadius: "var(--ds-radius-small, 3px)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  overflowWrap: 'break-word',
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-075, 6px)",
+  whiteSpace: 'normal',
+  // A tooltip is never a hit target — it hangs over the document's own content.
+  pointerEvents: 'none'
+};
+
 // Positioned against the host widget its decoration renders on the change's first character:
 // `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
 // character.

package/dist/cjs/ui/ContributorTag/contributorTagController.js

@@ -400,7 +400,7 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
   }, {
     key: "syncTooltip",
     value: function syncTooltip() {
-      var _this$tooltip2, _this$dom$tag$querySe;
+      var _this$tooltip2;
       var content = this.dom ? this.fullLabel : undefined;
       if (content === this.tooltipContent) {
         return;
@@ -411,17 +411,39 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       if (!content || !this.dom) {
         return;
       }
-      this.tooltip = new _vanillaTooltip.VanillaTooltip(this.dom.tag, content, undefined,
-      // `ak-editor-vanilla-tooltip-default` opts into the shared `VanillaTooltip` look, defined as
-      // `vanillaTooltipDefaultStyles` in both EditorContentContainer stylesheets — keep in sync when
-      // renaming. Those styles are scoped under `.ProseMirror`, and the tag renders inside it.
-      'ak-editor-vanilla-tooltip-default');
+      this.tooltip = new _vanillaTooltip.VanillaTooltip(this.dom.tag, content,
+      // Generated id.
+      undefined,
+      // No class: the look is inline, because a hoisted tooltip is outside the `.ProseMirror`
+      // scope `VANILLA_TOOLTIP_DEFAULT_CLASS` is keyed on — see `CONTRIBUTOR_TAG_TOOLTIP_STYLES`.
+      '',
+      // Default delay, no `onShow`, and the default `top` placement.
+      undefined, _buildContributorTagDom.CONTRIBUTOR_TAG_TOOLTIP_STYLES, undefined, undefined, this.resolveTooltipContainer());
       // `VanillaTooltip` sets `aria-describedby` on its trigger, which would announce the label a
       // second time — the hidden child already announces it, and names the tag with it.
       this.dom.tag.removeAttribute('aria-describedby');
-      // The popover is a child of the trigger, so its text would be a third copy of the same
-      // sentence. It stays visible for sighted users, who need the part of the name the tag clipped.
-      (_this$dom$tag$querySe = this.dom.tag.querySelector(':scope > [role="tooltip"]')) === null || _this$dom$tag$querySe === void 0 || _this$dom$tag$querySe.setAttribute('aria-hidden', 'true');
+      // Out of the tag but still in the document, so its text would otherwise be a third copy of the
+      // same sentence. It stays visible for sighted users, who need the part of the name the tag
+      // clipped.
+      this.tooltip.element.setAttribute('aria-hidden', 'true');
+    }
+
+    /**
+     * Where the tooltip is appended, rather than inside the tag.
+     *
+     * Popper and the browser only agree on a top-layer popover's origin when nothing above it is
+     * transformed, and the tag hangs under the editor's own transformed nodes — inside a wide image
+     * that is `.rich-media-item`, whose `translateX(-50%)` threw the tooltip off screen
+     * (EDITOR-8971). The content area is the nearest ancestor with none of that above it, and keeps
+     * the tooltip inside the editor it belongs to; the document body covers an appearance that has
+     * no content area.
+     */
+  }, {
+    key: "resolveTooltipContainer",
+    value: function resolveTooltipContainer() {
+      var _editorRoot$closest;
+      var editorRoot = this.options.getEditorRoot();
+      return (_editorRoot$closest = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.closest('.ak-editor-content-area')) !== null && _editorRoot$closest !== void 0 ? _editorRoot$closest : editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.ownerDocument.body;
     }
 
     /**

package/dist/es2019/pm-plugins/calculateDiff/calculateDiffDecorations.js

@@ -17,6 +17,7 @@ import { extractDiffDescriptors } from '../decorations/decorationKeys';
 import { extractContributorTags } from '../decorations/extractContributorTags';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
+import { getScrollableDecorations } from '../getScrollableDecorations';
 import { getDefaultDiffType, isExtendedEnabled } from '../isExtendedEnabled';
 import { diffBySteps } from './diffBySteps';
 import { groupChangesByBlock } from './groupChangesByBlock';
@@ -732,7 +733,10 @@ const calculateDiffDecorationsInner = ({
   });
   const decorationSet = DecorationSet.empty.add(tr.doc, decorations);
   return {
-    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors) : [],
+    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors, activeIndexPos,
+    // The stops the step buttons walk, so a stop cannot hold a second tag for one
+    // contributor that navigation can never reach.
+    getScrollableDecorations(decorationSet, tr.doc, diffType)) : [],
     decorations: decorationSet,
     diffDescriptors: extractDiffDescriptors(decorationSet)
   };

package/dist/es2019/pm-plugins/decorations/createContributorTagWidget.js

@@ -39,7 +39,24 @@ export const mountContributorTag = ({
     diffId
   });
   controller.mount(host);
-  return controller;
+
+  /**
+   * Kept alive when ProseMirror only rebuilt the widget desc around this same host: a document
+   * change remaps the decoration and fires `destroy`, but an element `toDOM` is reused verbatim
+   * and runs no mount callback, so tearing down here left an active change with no tag
+   * (EDITOR-8971).
+   *
+   * Deferred, because the host is still attached while that update is in flight. A host outside a
+   * live editor root is a real removal — including the view being destroyed, which drops the root.
+   */
+  return {
+    destroy: () => queueMicrotask(() => {
+      var _mountContext$getEdit;
+      if (!host.isConnected || !((_mountContext$getEdit = mountContext.getEditorRoot()) !== null && _mountContext$getEdit !== void 0 && _mountContext$getEdit.contains(host))) {
+        controller.destroy();
+      }
+    })
+  };
 };
 export const unmountContributorTag = mount => {
   mount === null || mount === void 0 ? void 0 : mount.destroy();

package/dist/es2019/pm-plugins/decorations/extractContributorTags.js

@@ -34,12 +34,44 @@ const leadsReplacement = widget => fg('confluence_ncs_step_diffing_version_histo
  */
 const isSameBlockChange = (inner, block) => inner.spec.attributionKey === block.spec.attributionKey && (block.from <= inner.from && inner.to <= block.to || inner.from <= block.from && block.to <= inner.to);
 
+/**
+ * Which of two changes in the same range leads, and so is the one a tag captions. Position first,
+ * then `side`, since deleted content shares its `from` with the content that replaced it and paints
+ * above; then the narrower range, so a change nested in another captions itself.
+ */
+const byLeadingPosition = (a, b) => {
+  var _a$decoration$spec$si, _b$decoration$spec$si;
+  return a.decoration.from - b.decoration.from || ((_a$decoration$spec$si = a.decoration.spec.side) !== null && _a$decoration$spec$si !== void 0 ? _a$decoration$spec$si : 0) - ((_b$decoration$spec$si = b.decoration.spec.side) !== null && _b$decoration$spec$si !== void 0 ? _b$decoration$spec$si : 0) || a.decoration.to - a.decoration.from - (b.decoration.to - b.decoration.from);
+};
+
+/** The targets a navigation range wholly covers, leader first. */
+const containedBy = (targets, {
+  from,
+  to
+}) => targets.filter(({
+  decoration
+}) => from <= decoration.from && decoration.to <= to).sort(byLeadingPosition);
+
+/**
+ * The one tag a navigation step reveals. `spec.isActive` is no use here: it covers everything the
+ * group's union range touches, so several tags revealed over each other (EDITOR-8971). Hence
+ * containment, and the leading change of what it covers.
+ */
+const resolveActiveTarget = (surviving, activeIndexPos) => containedBy(surviving, activeIndexPos)[0];
+
 /**
  * One model per diff decoration whose attribution resolves to a supplied contributor; anything
  * unattributed, untaggable or unresolved is skipped. A replacement's two decorations are collapsed
  * into a single tag, on whichever half renders first — see `isSameChange` and `leadsReplacement`.
+ *
+ * `activeIndexPos`, when given, reveals exactly one of the tags — see `resolveActiveTarget`.
+ * Absent, each tag keeps the active state its own decoration was drawn with.
+ *
+ * `stops`, when given, is the navigation stop list the step buttons walk
+ * (`getScrollableDecorations`). One contributor cannot hold two tags in one stop, since only the
+ * leading one would ever be reachable. Absent, every decoration keeps its own tag.
  */
-export const extractContributorTags = (decorations, contributors) => {
+export const extractContributorTags = (decorations, contributors, activeIndexPos, stops) => {
   if (!contributors) {
     return [];
   }
@@ -77,10 +109,15 @@ export const extractContributorTags = (decorations, contributors) => {
   const linkedDiffIds = new Map();
   const folded = new Set();
   const fold = (host, target) => {
-    var _linkedDiffIds$get;
+    var _linkedDiffIds$get, _linkedDiffIds$get2;
     folded.add(target);
     const hostDiffId = host.decoration.spec.diffId;
-    linkedDiffIds.set(hostDiffId, [...((_linkedDiffIds$get = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : []), target.decoration.spec.diffId]);
+    const targetDiffId = target.decoration.spec.diffId;
+    // A target that already hosts folded tags hands them up, so no hover target is orphaned when
+    // one host folds into another.
+    const inherited = (_linkedDiffIds$get = linkedDiffIds.get(targetDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : [];
+    linkedDiffIds.delete(targetDiffId);
+    linkedDiffIds.set(hostDiffId, [...((_linkedDiffIds$get2 = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get2 !== void 0 ? _linkedDiffIds$get2 : []), targetDiffId, ...inherited]);
   };
   for (const target of targets) {
     const {
@@ -120,15 +157,38 @@ export const extractContributorTags = (decorations, contributors) => {
       fold(host, target);
     }
   }
-  return targets.filter(target => !folded.has(target)).map(({
-    contributor,
-    decoration: {
-      spec
+
+  // One tag per contributor per navigation stop. The folds above only catch a replacement's two
+  // halves and a block's own highlights; two of one contributor's changes that merely touch are a
+  // single stop (`groupTouchingDecorations`) yet kept a tag each, so the stop's trailing tag was
+  // drawn but could never be stepped to (EDITOR-8971). It folds into the leading tag of its
+  // contributor, staying a hover target. Contributors are kept apart: a stop spanning two of them
+  // still captions each, rather than crediting one for the other's change.
+  for (const stop of stops !== null && stops !== void 0 ? stops : []) {
+    const byContributor = new Map();
+    for (const target of containedBy(targets.filter(target => !folded.has(target)), stop)) {
+      var _target$decoration$sp, _byContributor$get;
+      const key = (_target$decoration$sp = target.decoration.spec.attributionKey) !== null && _target$decoration$sp !== void 0 ? _target$decoration$sp : '';
+      byContributor.set(key, [...((_byContributor$get = byContributor.get(key)) !== null && _byContributor$get !== void 0 ? _byContributor$get : []), target]);
     }
-  }) => {
+    for (const [leader, ...trailing] of byContributor.values()) {
+      trailing.forEach(target => fold(leader, target));
+    }
+  }
+  const surviving = targets.filter(target => !folded.has(target));
+  const activeTarget = activeIndexPos === undefined ? undefined : resolveActiveTarget(surviving, activeIndexPos);
+  return surviving.map(target => {
+    const {
+      contributor,
+      decoration: {
+        spec
+      }
+    } = target;
     const connected = contributor.connectedToKey ? contributors[contributor.connectedToKey] : undefined;
     const connectedContributor = connected ? toTagContributor(connected) : undefined;
     const linked = linkedDiffIds.get(spec.diffId);
+    // Only the navigated tag reveals; with no active range, the decoration's own state stands.
+    const isActive = activeIndexPos === undefined ? spec.isActive : target === activeTarget;
     return {
       contributor: toTagContributor(contributor),
       diffId: spec.diffId,
@@ -138,8 +198,8 @@ export const extractContributorTags = (decorations, contributors) => {
       ...(spec.colorScheme ? {
         colorScheme: spec.colorScheme
       } : {}),
-      ...(spec.isActive !== undefined ? {
-        isActive: spec.isActive
+      ...(isActive !== undefined ? {
+        isActive
       } : {}),
       ...(spec.isInserted !== undefined ? {
         isInserted: spec.isInserted

package/dist/es2019/ui/ContributorTag/buildContributorTagDom.js

@@ -41,6 +41,30 @@ export const CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = 'data-revealed';
  */
 export const TAG_EXIT_FALLBACK_MS = 1200;
 
+/**
+ * The tooltip's look, inline rather than through `VANILLA_TOOLTIP_DEFAULT_CLASS`: this tooltip is
+ * hoisted out of the tag, and that class's rule is scoped under `.ProseMirror` — see
+ * `resolveTooltipContainer`. Otherwise `vanillaTooltipDefaultStyles` in editor-core, which is the
+ * look every other vanilla tooltip has; keep the two in step.
+ */
+export const CONTRIBUTOR_TAG_TOOLTIP_STYLES = {
+  boxSizing: 'border-box',
+  maxWidth: '240px',
+  backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+  // A `popover` is given one by the UA stylesheet.
+  border: 'none',
+  borderRadius: "var(--ds-radius-small, 3px)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  overflowWrap: 'break-word',
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-075, 6px)",
+  whiteSpace: 'normal',
+  // A tooltip is never a hit target — it hangs over the document's own content.
+  pointerEvents: 'none'
+};
+
 // Positioned against the host widget its decoration renders on the change's first character:
 // `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
 // character.

package/dist/es2019/ui/ContributorTag/contributorTagController.js

@@ -3,7 +3,7 @@ import { bind, bindAll } from 'bind-event-listener';
 import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
-import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
+import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, CONTRIBUTOR_TAG_TOOLTIP_STYLES, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
 import { formatContributorLabel } from './contributorLabel';
 /**
@@ -357,7 +357,7 @@ export class ContributorTagController {
    * shape of `syncVanillaDisabledTooltip` in `mentionNodeView`.
    */
   syncTooltip() {
-    var _this$tooltip2, _this$dom$tag$querySe;
+    var _this$tooltip2;
     const content = this.dom ? this.fullLabel : undefined;
     if (content === this.tooltipContent) {
       return;
@@ -368,17 +368,37 @@ export class ContributorTagController {
     if (!content || !this.dom) {
       return;
     }
-    this.tooltip = new VanillaTooltip(this.dom.tag, content, undefined,
-    // `ak-editor-vanilla-tooltip-default` opts into the shared `VanillaTooltip` look, defined as
-    // `vanillaTooltipDefaultStyles` in both EditorContentContainer stylesheets — keep in sync when
-    // renaming. Those styles are scoped under `.ProseMirror`, and the tag renders inside it.
-    'ak-editor-vanilla-tooltip-default');
+    this.tooltip = new VanillaTooltip(this.dom.tag, content,
+    // Generated id.
+    undefined,
+    // No class: the look is inline, because a hoisted tooltip is outside the `.ProseMirror`
+    // scope `VANILLA_TOOLTIP_DEFAULT_CLASS` is keyed on — see `CONTRIBUTOR_TAG_TOOLTIP_STYLES`.
+    '',
+    // Default delay, no `onShow`, and the default `top` placement.
+    undefined, CONTRIBUTOR_TAG_TOOLTIP_STYLES, undefined, undefined, this.resolveTooltipContainer());
     // `VanillaTooltip` sets `aria-describedby` on its trigger, which would announce the label a
     // second time — the hidden child already announces it, and names the tag with it.
     this.dom.tag.removeAttribute('aria-describedby');
-    // The popover is a child of the trigger, so its text would be a third copy of the same
-    // sentence. It stays visible for sighted users, who need the part of the name the tag clipped.
-    (_this$dom$tag$querySe = this.dom.tag.querySelector(':scope > [role="tooltip"]')) === null || _this$dom$tag$querySe === void 0 ? void 0 : _this$dom$tag$querySe.setAttribute('aria-hidden', 'true');
+    // Out of the tag but still in the document, so its text would otherwise be a third copy of the
+    // same sentence. It stays visible for sighted users, who need the part of the name the tag
+    // clipped.
+    this.tooltip.element.setAttribute('aria-hidden', 'true');
+  }
+
+  /**
+   * Where the tooltip is appended, rather than inside the tag.
+   *
+   * Popper and the browser only agree on a top-layer popover's origin when nothing above it is
+   * transformed, and the tag hangs under the editor's own transformed nodes — inside a wide image
+   * that is `.rich-media-item`, whose `translateX(-50%)` threw the tooltip off screen
+   * (EDITOR-8971). The content area is the nearest ancestor with none of that above it, and keeps
+   * the tooltip inside the editor it belongs to; the document body covers an appearance that has
+   * no content area.
+   */
+  resolveTooltipContainer() {
+    var _editorRoot$closest;
+    const editorRoot = this.options.getEditorRoot();
+    return (_editorRoot$closest = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.closest('.ak-editor-content-area')) !== null && _editorRoot$closest !== void 0 ? _editorRoot$closest : editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.ownerDocument.body;
   }
 
   /**

package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js

@@ -25,6 +25,7 @@ import { extractDiffDescriptors } from '../decorations/decorationKeys';
 import { extractContributorTags } from '../decorations/extractContributorTags';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
+import { getScrollableDecorations } from '../getScrollableDecorations';
 import { getDefaultDiffType, isExtendedEnabled } from '../isExtendedEnabled';
 import { diffBySteps } from './diffBySteps';
 import { groupChangesByBlock } from './groupChangesByBlock';
@@ -781,7 +782,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   });
   var decorationSet = DecorationSet.empty.add(tr.doc, decorations);
   return {
-    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors) : [],
+    contributorTags: showContributorTags ? extractContributorTags(decorationSet, contributors, activeIndexPos,
+    // The stops the step buttons walk, so a stop cannot hold a second tag for one
+    // contributor that navigation can never reach.
+    getScrollableDecorations(decorationSet, tr.doc, diffType)) : [],
     decorations: decorationSet,
     diffDescriptors: extractDiffDescriptors(decorationSet)
   };

package/dist/esm/pm-plugins/decorations/createContributorTagWidget.js

@@ -42,7 +42,26 @@ export var mountContributorTag = function mountContributorTag(_ref) {
     diffId: diffId
   }));
   controller.mount(host);
-  return controller;
+
+  /**
+   * Kept alive when ProseMirror only rebuilt the widget desc around this same host: a document
+   * change remaps the decoration and fires `destroy`, but an element `toDOM` is reused verbatim
+   * and runs no mount callback, so tearing down here left an active change with no tag
+   * (EDITOR-8971).
+   *
+   * Deferred, because the host is still attached while that update is in flight. A host outside a
+   * live editor root is a real removal — including the view being destroyed, which drops the root.
+   */
+  return {
+    destroy: function destroy() {
+      return queueMicrotask(function () {
+        var _mountContext$getEdit;
+        if (!host.isConnected || !((_mountContext$getEdit = mountContext.getEditorRoot()) !== null && _mountContext$getEdit !== void 0 && _mountContext$getEdit.contains(host))) {
+          controller.destroy();
+        }
+      });
+    }
+  };
 };
 export var unmountContributorTag = function unmountContributorTag(mount) {
   mount === null || mount === void 0 || mount.destroy();

package/dist/esm/pm-plugins/decorations/extractContributorTags.js

@@ -1,3 +1,4 @@
+import _toArray from "@babel/runtime/helpers/toArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
@@ -50,12 +51,48 @@ var isSameBlockChange = function isSameBlockChange(inner, block) {
   return inner.spec.attributionKey === block.spec.attributionKey && (block.from <= inner.from && inner.to <= block.to || inner.from <= block.from && block.to <= inner.to);
 };
 
+/**
+ * Which of two changes in the same range leads, and so is the one a tag captions. Position first,
+ * then `side`, since deleted content shares its `from` with the content that replaced it and paints
+ * above; then the narrower range, so a change nested in another captions itself.
+ */
+var byLeadingPosition = function byLeadingPosition(a, b) {
+  var _a$decoration$spec$si, _b$decoration$spec$si;
+  return a.decoration.from - b.decoration.from || ((_a$decoration$spec$si = a.decoration.spec.side) !== null && _a$decoration$spec$si !== void 0 ? _a$decoration$spec$si : 0) - ((_b$decoration$spec$si = b.decoration.spec.side) !== null && _b$decoration$spec$si !== void 0 ? _b$decoration$spec$si : 0) || a.decoration.to - a.decoration.from - (b.decoration.to - b.decoration.from);
+};
+
+/** The targets a navigation range wholly covers, leader first. */
+var containedBy = function containedBy(targets, _ref2) {
+  var from = _ref2.from,
+    to = _ref2.to;
+  return targets.filter(function (_ref3) {
+    var decoration = _ref3.decoration;
+    return from <= decoration.from && decoration.to <= to;
+  }).sort(byLeadingPosition);
+};
+
+/**
+ * The one tag a navigation step reveals. `spec.isActive` is no use here: it covers everything the
+ * group's union range touches, so several tags revealed over each other (EDITOR-8971). Hence
+ * containment, and the leading change of what it covers.
+ */
+var resolveActiveTarget = function resolveActiveTarget(surviving, activeIndexPos) {
+  return containedBy(surviving, activeIndexPos)[0];
+};
+
 /**
  * One model per diff decoration whose attribution resolves to a supplied contributor; anything
  * unattributed, untaggable or unresolved is skipped. A replacement's two decorations are collapsed
  * into a single tag, on whichever half renders first — see `isSameChange` and `leadsReplacement`.
+ *
+ * `activeIndexPos`, when given, reveals exactly one of the tags — see `resolveActiveTarget`.
+ * Absent, each tag keeps the active state its own decoration was drawn with.
+ *
+ * `stops`, when given, is the navigation stop list the step buttons walk
+ * (`getScrollableDecorations`). One contributor cannot hold two tags in one stop, since only the
+ * leading one would ever be reachable. Absent, every decoration keeps its own tag.
  */
-export var extractContributorTags = function extractContributorTags(decorations, contributors) {
+export var extractContributorTags = function extractContributorTags(decorations, contributors, activeIndexPos, stops) {
   if (!contributors) {
     return [];
   }
@@ -88,25 +125,30 @@ export var extractContributorTags = function extractContributorTags(decorations,
   } finally {
     _iterator.f();
   }
-  var inlineTargets = targets.filter(function (_ref2) {
-    var decoration = _ref2.decoration;
+  var inlineTargets = targets.filter(function (_ref4) {
+    var decoration = _ref4.decoration;
     return decoration.spec.decorationType === 'inline';
   });
-  var blockTargets = targets.filter(function (_ref3) {
-    var decoration = _ref3.decoration;
+  var blockTargets = targets.filter(function (_ref5) {
+    var decoration = _ref5.decoration;
     return decoration.spec.decorationType === 'block';
   });
-  var widgetTargets = targets.filter(function (_ref4) {
-    var decoration = _ref4.decoration;
+  var widgetTargets = targets.filter(function (_ref6) {
+    var decoration = _ref6.decoration;
     return decoration.spec.decorationType === 'widget';
   });
   var linkedDiffIds = new Map();
   var folded = new Set();
   var fold = function fold(host, target) {
-    var _linkedDiffIds$get;
+    var _linkedDiffIds$get, _linkedDiffIds$get2;
     folded.add(target);
     var hostDiffId = host.decoration.spec.diffId;
-    linkedDiffIds.set(hostDiffId, [].concat(_toConsumableArray((_linkedDiffIds$get = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : []), [target.decoration.spec.diffId]));
+    var targetDiffId = target.decoration.spec.diffId;
+    // A target that already hosts folded tags hands them up, so no hover target is orphaned when
+    // one host folds into another.
+    var inherited = (_linkedDiffIds$get = linkedDiffIds.get(targetDiffId)) !== null && _linkedDiffIds$get !== void 0 ? _linkedDiffIds$get : [];
+    linkedDiffIds.delete(targetDiffId);
+    linkedDiffIds.set(hostDiffId, [].concat(_toConsumableArray((_linkedDiffIds$get2 = linkedDiffIds.get(hostDiffId)) !== null && _linkedDiffIds$get2 !== void 0 ? _linkedDiffIds$get2 : []), [targetDiffId], _toConsumableArray(inherited)));
   };
   var _loop = function _loop() {
       var target = _targets[_i];
@@ -116,8 +158,8 @@ export var extractContributorTags = function extractContributorTags(decorations,
       }
 
       // A block outranks both other kinds, so it is tried first.
-      var block = blockTargets.find(function (_ref5) {
-        var decoration = _ref5.decoration;
+      var block = blockTargets.find(function (_ref7) {
+        var decoration = _ref7.decoration;
         return isSameBlockChange(target.decoration, decoration);
       });
       if (block) {
@@ -126,8 +168,8 @@ export var extractContributorTags = function extractContributorTags(decorations,
       }
       if (decorationType === 'inline') {
         // The deleted half renders in front of this one, so that half captions the change.
-        var leadingWidget = widgetTargets.find(function (_ref6) {
-          var decoration = _ref6.decoration;
+        var leadingWidget = widgetTargets.find(function (_ref8) {
+          var decoration = _ref8.decoration;
           return leadsReplacement(decoration) && isSameChange(decoration, target.decoration);
         });
         if (leadingWidget) {
@@ -140,8 +182,8 @@ export var extractContributorTags = function extractContributorTags(decorations,
       if (leadsReplacement(target.decoration)) {
         return 0; // continue
       }
-      var host = inlineTargets.find(function (_ref7) {
-        var decoration = _ref7.decoration;
+      var host = inlineTargets.find(function (_ref9) {
+        var decoration = _ref9.decoration;
         return isSameChange(target.decoration, decoration);
       });
       if (host) {
@@ -153,14 +195,72 @@ export var extractContributorTags = function extractContributorTags(decorations,
     _ret = _loop();
     if (_ret === 0) continue;
   }
-  return targets.filter(function (target) {
+
+  // One tag per contributor per navigation stop. The folds above only catch a replacement's two
+  // halves and a block's own highlights; two of one contributor's changes that merely touch are a
+  // single stop (`groupTouchingDecorations`) yet kept a tag each, so the stop's trailing tag was
+  // drawn but could never be stepped to (EDITOR-8971). It folds into the leading tag of its
+  // contributor, staying a hover target. Contributors are kept apart: a stop spanning two of them
+  // still captions each, rather than crediting one for the other's change.
+  var _iterator2 = _createForOfIteratorHelper(stops !== null && stops !== void 0 ? stops : []),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var stop = _step2.value;
+      var byContributor = new Map();
+      var _iterator3 = _createForOfIteratorHelper(containedBy(targets.filter(function (target) {
+          return !folded.has(target);
+        }), stop)),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _target$decoration$sp, _byContributor$get;
+          var target = _step3.value;
+          var key = (_target$decoration$sp = target.decoration.spec.attributionKey) !== null && _target$decoration$sp !== void 0 ? _target$decoration$sp : '';
+          byContributor.set(key, [].concat(_toConsumableArray((_byContributor$get = byContributor.get(key)) !== null && _byContributor$get !== void 0 ? _byContributor$get : []), [target]));
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      var _iterator4 = _createForOfIteratorHelper(byContributor.values()),
+        _step4;
+      try {
+        var _loop2 = function _loop2() {
+          var _step4$value = _toArray(_step4.value),
+            leader = _step4$value[0],
+            trailing = _arrayLikeToArray(_step4$value).slice(1);
+          trailing.forEach(function (target) {
+            return fold(leader, target);
+          });
+        };
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          _loop2();
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var surviving = targets.filter(function (target) {
     return !folded.has(target);
-  }).map(function (_ref8) {
-    var contributor = _ref8.contributor,
-      spec = _ref8.decoration.spec;
+  });
+  var activeTarget = activeIndexPos === undefined ? undefined : resolveActiveTarget(surviving, activeIndexPos);
+  return surviving.map(function (target) {
+    var contributor = target.contributor,
+      spec = target.decoration.spec;
     var connected = contributor.connectedToKey ? contributors[contributor.connectedToKey] : undefined;
     var connectedContributor = connected ? toTagContributor(connected) : undefined;
     var linked = linkedDiffIds.get(spec.diffId);
+    // Only the navigated tag reveals; with no active range, the decoration's own state stands.
+    var isActive = activeIndexPos === undefined ? spec.isActive : target === activeTarget;
     return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
       contributor: toTagContributor(contributor),
       diffId: spec.diffId
@@ -168,8 +268,8 @@ export var extractContributorTags = function extractContributorTags(decorations,
       connectedContributor: connectedContributor
     } : {}), spec.colorScheme ? {
       colorScheme: spec.colorScheme
-    } : {}), spec.isActive !== undefined ? {
-      isActive: spec.isActive
+    } : {}), isActive !== undefined ? {
+      isActive: isActive
     } : {}), spec.isInserted !== undefined ? {
       isInserted: spec.isInserted
     } : {}), linked ? {

package/dist/esm/ui/ContributorTag/buildContributorTagDom.js

@@ -42,6 +42,30 @@ export var CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = 'data-revealed';
  */
 export var TAG_EXIT_FALLBACK_MS = 1200;
 
+/**
+ * The tooltip's look, inline rather than through `VANILLA_TOOLTIP_DEFAULT_CLASS`: this tooltip is
+ * hoisted out of the tag, and that class's rule is scoped under `.ProseMirror` — see
+ * `resolveTooltipContainer`. Otherwise `vanillaTooltipDefaultStyles` in editor-core, which is the
+ * look every other vanilla tooltip has; keep the two in step.
+ */
+export var CONTRIBUTOR_TAG_TOOLTIP_STYLES = {
+  boxSizing: 'border-box',
+  maxWidth: '240px',
+  backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
+  // A `popover` is given one by the UA stylesheet.
+  border: 'none',
+  borderRadius: "var(--ds-radius-small, 3px)",
+  color: "var(--ds-text-inverse, #FFFFFF)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  overflowWrap: 'break-word',
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-075, 6px)",
+  whiteSpace: 'normal',
+  // A tooltip is never a hit target — it hangs over the document's own content.
+  pointerEvents: 'none'
+};
+
 // Positioned against the host widget its decoration renders on the change's first character:
 // `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
 // character.

package/dist/esm/ui/ContributorTag/contributorTagController.js

@@ -6,7 +6,7 @@ import { bind, bindAll } from 'bind-event-listener';
 import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
-import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
+import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, CONTRIBUTOR_TAG_TOOLTIP_STYLES, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
 import { formatContributorLabel } from './contributorLabel';
 /**
@@ -393,7 +393,7 @@ export var ContributorTagController = /*#__PURE__*/function () {
   }, {
     key: "syncTooltip",
     value: function syncTooltip() {
-      var _this$tooltip2, _this$dom$tag$querySe;
+      var _this$tooltip2;
       var content = this.dom ? this.fullLabel : undefined;
       if (content === this.tooltipContent) {
         return;
@@ -404,17 +404,39 @@ export var ContributorTagController = /*#__PURE__*/function () {
       if (!content || !this.dom) {
         return;
       }
-      this.tooltip = new VanillaTooltip(this.dom.tag, content, undefined,
-      // `ak-editor-vanilla-tooltip-default` opts into the shared `VanillaTooltip` look, defined as
-      // `vanillaTooltipDefaultStyles` in both EditorContentContainer stylesheets — keep in sync when
-      // renaming. Those styles are scoped under `.ProseMirror`, and the tag renders inside it.
-      'ak-editor-vanilla-tooltip-default');
+      this.tooltip = new VanillaTooltip(this.dom.tag, content,
+      // Generated id.
+      undefined,
+      // No class: the look is inline, because a hoisted tooltip is outside the `.ProseMirror`
+      // scope `VANILLA_TOOLTIP_DEFAULT_CLASS` is keyed on — see `CONTRIBUTOR_TAG_TOOLTIP_STYLES`.
+      '',
+      // Default delay, no `onShow`, and the default `top` placement.
+      undefined, CONTRIBUTOR_TAG_TOOLTIP_STYLES, undefined, undefined, this.resolveTooltipContainer());
       // `VanillaTooltip` sets `aria-describedby` on its trigger, which would announce the label a
       // second time — the hidden child already announces it, and names the tag with it.
       this.dom.tag.removeAttribute('aria-describedby');
-      // The popover is a child of the trigger, so its text would be a third copy of the same
-      // sentence. It stays visible for sighted users, who need the part of the name the tag clipped.
-      (_this$dom$tag$querySe = this.dom.tag.querySelector(':scope > [role="tooltip"]')) === null || _this$dom$tag$querySe === void 0 || _this$dom$tag$querySe.setAttribute('aria-hidden', 'true');
+      // Out of the tag but still in the document, so its text would otherwise be a third copy of the
+      // same sentence. It stays visible for sighted users, who need the part of the name the tag
+      // clipped.
+      this.tooltip.element.setAttribute('aria-hidden', 'true');
+    }
+
+    /**
+     * Where the tooltip is appended, rather than inside the tag.
+     *
+     * Popper and the browser only agree on a top-layer popover's origin when nothing above it is
+     * transformed, and the tag hangs under the editor's own transformed nodes — inside a wide image
+     * that is `.rich-media-item`, whose `translateX(-50%)` threw the tooltip off screen
+     * (EDITOR-8971). The content area is the nearest ancestor with none of that above it, and keeps
+     * the tooltip inside the editor it belongs to; the document body covers an appearance that has
+     * no content area.
+     */
+  }, {
+    key: "resolveTooltipContainer",
+    value: function resolveTooltipContainer() {
+      var _editorRoot$closest;
+      var editorRoot = this.options.getEditorRoot();
+      return (_editorRoot$closest = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.closest('.ak-editor-content-area')) !== null && _editorRoot$closest !== void 0 ? _editorRoot$closest : editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.ownerDocument.body;
     }
 
     /**

package/dist/types/pm-plugins/decorations/extractContributorTags.d.ts

@@ -5,5 +5,18 @@ import type { ResolvedDiffContributors } from './colorSchemes/attributions';
  * One model per diff decoration whose attribution resolves to a supplied contributor; anything
  * unattributed, untaggable or unresolved is skipped. A replacement's two decorations are collapsed
  * into a single tag, on whichever half renders first — see `isSameChange` and `leadsReplacement`.
+ *
+ * `activeIndexPos`, when given, reveals exactly one of the tags — see `resolveActiveTarget`.
+ * Absent, each tag keeps the active state its own decoration was drawn with.
+ *
+ * `stops`, when given, is the navigation stop list the step buttons walk
+ * (`getScrollableDecorations`). One contributor cannot hold two tags in one stop, since only the
+ * leading one would ever be reachable. Absent, every decoration keeps its own tag.
  */
-export declare const extractContributorTags: (decorations: DecorationSet, contributors: ResolvedDiffContributors | undefined) => ContributorTagModel[];
+export declare const extractContributorTags: (decorations: DecorationSet, contributors: ResolvedDiffContributors | undefined, activeIndexPos?: {
+    from: number;
+    to: number;
+}, stops?: ReadonlyArray<{
+    from: number;
+    to: number;
+}>) => ContributorTagModel[];

package/dist/types/ui/ContributorTag/buildContributorTagDom.d.ts

@@ -34,6 +34,13 @@ export declare const CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = "data-revealed";
  * number — hence the wide margin. Raise in step with that duration.
  */
 export declare const TAG_EXIT_FALLBACK_MS = 1200;
+/**
+ * The tooltip's look, inline rather than through `VANILLA_TOOLTIP_DEFAULT_CLASS`: this tooltip is
+ * hoisted out of the tag, and that class's rule is scoped under `.ProseMirror` — see
+ * `resolveTooltipContainer`. Otherwise `vanillaTooltipDefaultStyles` in editor-core, which is the
+ * look every other vanilla tooltip has; keep the two in step.
+ */
+export declare const CONTRIBUTOR_TAG_TOOLTIP_STYLES: Readonly<Record<string, string>>;
 export type ContributorTagDom = {
     avatars: HTMLSpanElement;
     name: HTMLSpanElement;

package/dist/types/ui/ContributorTag/contributorTagController.d.ts

@@ -91,6 +91,17 @@ export declare class ContributorTagController {
      * shape of `syncVanillaDisabledTooltip` in `mentionNodeView`.
      */
     private syncTooltip;
+    /**
+     * Where the tooltip is appended, rather than inside the tag.
+     *
+     * Popper and the browser only agree on a top-layer popover's origin when nothing above it is
+     * transformed, and the tag hangs under the editor's own transformed nodes — inside a wide image
+     * that is `.rich-media-item`, whose `translateX(-50%)` threw the tooltip off screen
+     * (EDITOR-8971). The content area is the nearest ancestor with none of that above it, and keeps
+     * the tooltip inside the editor it belongs to; the document body covers an appearance that has
+     * no content area.
+     */
+    private resolveTooltipContainer;
     /**
      * Observes the highlight this tag describes, for what CSS here cannot see: its hover state. The
      * highlight is a ProseMirror decoration in a different DOM subtree, so listeners are bound

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "16.0.2",
+	"version": "16.0.3",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^189.0.0",
+		"@atlaskit/tmp-editor-statsig": "^190.0.0",
 		"@atlaskit/tokens": "^16.12.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -46,7 +46,7 @@
 		"@atlaskit/button": "^25.3.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/dropdown-menu": "^18.3.0",
-		"@atlaskit/editor-core": "^228.0.0",
+		"@atlaskit/editor-core": "^228.1.0",
 		"@atlaskit/editor-json-transformer": "^9.8.0",
 		"@atlaskit/editor-plugins": "^16.1.0",
 		"@atlaskit/form": "^17.2.0",
@@ -64,7 +64,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^122.2.0",
+		"@atlaskit/editor-common": "^122.3.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"