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

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @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
+
+- [`44acf8971ef0e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/44acf8971ef0e) -
+  Preserve contributor attribution for attribute-only diff decorations so they use the correct
+  colour and contributor tags.
+- [`683c1a024bcb3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/683c1a024bcb3) -
+  Improve the accessibility of contributor diff tags, behind the
+  `confluence_ncs_step_diffing_version_history` gate. A tag now announces its contributor once
+  rather than three times over, names itself through `aria-labelledby` so it is no longer a focus
+  stop without an accessible name, says in its label when the contributor is an AI agent, and draws
+  an inset focus ring that reads against every accent fill.
+
+  Stepping to the next or previous change now announces the reader's position in the diff and who
+  made the change, through the editor's shared live region. Behind the
+  `platform_editor_diff_plugin_extended` experiment.
+
+- Updated dependencies
+
 ## 16.0.1
 
 ### Patch Changes

package/afm-products/tsconfig.json

@@ -26,6 +26,9 @@
 		{
 			"path": "../../custom-steps/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-accessibility-utils/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-analytics/afm-products/tsconfig.json"
 		},

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");
@@ -344,15 +345,18 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   }
   var pendingAttrSteps = [];
   var stepMaps = [];
-  var _iterator = _createForOfIteratorHelper(simplifiedSteps),
+  var _iterator = _createForOfIteratorHelper(simplifiedSteps.entries()),
     _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var step = _step.value;
+      var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
+        stepIndex = _step$value[0],
+        step = _step$value[1];
       var result = step.apply(steppedDoc);
       if (result.failed === null && result.doc) {
         if ((0, _getAttrChangeRanges.stepIsValidAttrChange)(step, steppedDoc, result.doc)) {
           pendingAttrSteps.push({
+            attributionKey: (0, _attributions.getAttributionKey)(simplifiedStepAttributions[stepIndex]),
             afterNode: result.doc.nodeAt(step.pos),
             beforeNode: steppedDoc.nodeAt(step.pos),
             mapIndex: stepMaps.length,
@@ -372,6 +376,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   }
   var attrStepContexts = (0, _fg.fg)('platform_editor_reduce_diff_attr_sensitivity') ? pendingAttrSteps.flatMap(function (_ref1) {
     var afterNode = _ref1.afterNode,
+      attributionKey = _ref1.attributionKey,
       beforeNode = _ref1.beforeNode,
       mapIndex = _ref1.mapIndex,
       step = _ref1.step;
@@ -381,6 +386,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
     }
     var originalPosition = new _transform.Mapping(stepMaps.slice(0, mapIndex)).invert().mapResult(step.pos);
     return [_objectSpread(_objectSpread({
+      attributionKey: attributionKey,
       afterNode: afterNode,
       beforeNode: beforeNode,
       finalPos: finalPosition.pos
@@ -390,8 +396,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       step: step
     })];
   }) : pendingAttrSteps.map(function (_ref10) {
-    var step = _ref10.step;
+    var attributionKey = _ref10.attributionKey,
+      step = _ref10.step;
     return {
+      attributionKey: attributionKey,
       afterNode: tr.doc.nodeAt(step.pos),
       beforeNode: originalDoc.nodeAt(step.pos),
       finalPos: step.pos,
@@ -656,34 +664,54 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   // smart path. Only add the legacy step-range decoration when no equivalent changeset range was
   // produced; otherwise the same content receives two inline decorations (and two navigation
   // changes), usually one attribution colour and one default purple decoration.
-  (0, _getMarkChangeRanges.getMarkChangeRanges)(steps).filter(function (_ref11) {
+  (0, _getMarkChangeRanges.getMarkChangeRanges)(simplifiedSteps, simplifiedStepAttributions, (0, _fg.fg)('confluence_ncs_step_diffing_version_history') ? stepMaps : undefined).filter(function (_ref11) {
     var fromB = _ref11.fromB,
       toB = _ref11.toB;
     return !(0, _fg.fg)('confluence_ncs_step_diffing_version_history') || !changes.some(function (change) {
       return change.fromB === fromB && change.toB === toB;
     });
   }).forEach(function (change) {
+    var _attributionColors$ge, _attributionColors;
+    var changeColorScheme = change.attributionKey ? (_attributionColors$ge = (_attributionColors = attributionColors) === null || _attributionColors === void 0 ? void 0 : _attributionColors.get(change.attributionKey)) !== null && _attributionColors$ge !== void 0 ? _attributionColors$ge : colorScheme : colorScheme;
+    var attributionKey = showContributorTags ? change.attributionKey : undefined;
     var isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
     decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
+      attributionKey: attributionKey,
       change: change,
-      colorScheme: colorScheme,
+      colorScheme: changeColorScheme,
+      doc: tr.doc,
       diffType: diffType,
       isActive: isActive,
       isInserted: true,
-      reveal: reveal
+      reveal: reveal,
+      showContributorTags: showContributorTags,
+      tagMountContext: tagMountContext
     })));
   });
-  (0, _getAttrChangeRanges.getAttrChangeRanges)(tr.doc, attrStepContexts, originalDoc).forEach(function (change) {
+  (0, _getAttrChangeRanges.getAttrChangeRanges)(tr.doc, attrStepContexts, originalDoc).filter(function (_ref12) {
+    var fromB = _ref12.fromB,
+      toB = _ref12.toB;
+    return !(0, _fg.fg)('confluence_ncs_step_diffing_version_history') || !changes.some(function (change) {
+      return change.fromB === fromB && change.toB === toB;
+    });
+  }).forEach(function (change) {
+    var _attributionColors$ge2, _attributionColors2;
+    var changeColorScheme = change.attributionKey ? (_attributionColors$ge2 = (_attributionColors2 = attributionColors) === null || _attributionColors2 === void 0 ? void 0 : _attributionColors2.get(change.attributionKey)) !== null && _attributionColors$ge2 !== void 0 ? _attributionColors$ge2 : colorScheme : colorScheme;
+    var attributionKey = showContributorTags ? change.attributionKey : undefined;
     if (change.isInline) {
       // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       var isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
+        attributionKey: attributionKey,
         change: change,
-        colorScheme: colorScheme,
+        colorScheme: changeColorScheme,
+        doc: tr.doc,
         isActive: isActive,
         isInserted: true,
         isAtomicInlineNode: true,
         inlineNodeName: change.inlineNodeName,
+        showContributorTags: showContributorTags,
+        tagMountContext: tagMountContext,
         // Suppress the border-bottom underline for atomic inline nodeviews —
         // it doesn't render on custom nodeview DOM elements and is unnecessary noise.
         hideAddedDiffsUnderline: true,
@@ -701,12 +729,15 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
             deleted: []
           },
           doc: originalDoc,
+          attributionKey: attributionKey,
           nodeViewSerializer: nodeViewSerializer,
-          colorScheme: colorScheme,
+          colorScheme: changeColorScheme,
           newDoc: tr.doc,
           intl: intl,
           activeIndexPos: activeIndexPos,
-          isInserted: false
+          isInserted: false,
+          showContributorTags: showContributorTags,
+          tagMountContext: tagMountContext
         })));
       }
     } else {
@@ -714,11 +745,14 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         doc: tr.doc,
         from: change.fromB,
         to: change.toB,
-        colorScheme: colorScheme,
+        attributionKey: attributionKey,
+        colorScheme: changeColorScheme,
         isInserted: true,
         activeIndexPos: activeIndexPos,
         intl: intl,
-        showIndicators: showIndicators
+        showContributorTags: showContributorTags,
+        showIndicators: showIndicators,
+        tagMountContext: tagMountContext
       })));
       // If the original node position is known (e.g. a panel type change), also render
       // the old block node as a "deleted" widget so the reviewer sees the before/after.
@@ -735,7 +769,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
           },
           doc: originalDoc,
           nodeViewSerializer: nodeViewSerializer,
-          colorScheme: colorScheme,
+          attributionKey: attributionKey,
+          colorScheme: changeColorScheme,
           newDoc: tr.doc,
           intl: intl,
           activeIndexPos: activeIndexPos,
@@ -745,14 +780,19 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
           hideAddedDiffsUnderline: hideAddedDiffsUnderline,
           placeBelow: placeBelow
         }), {}, {
-          showIndicators: showIndicators
+          showIndicators: showIndicators,
+          showContributorTags: showContributorTags,
+          tagMountContext: tagMountContext
         }))));
       }
     }
   });
   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)
   };
@@ -760,49 +800,49 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
 var calculateDiffDecorations = exports.calculateDiffDecorations = (0, _memoizeOne.default)(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change. `tagMountContext` is deliberately absent: it is
 // built once per plugin instance, so it can never be the reason a diff needs recalculating.
-function (_ref12, _ref13) {
-  var _ref17;
-  var _ref14 = (0, _slicedToArray2.default)(_ref12, 1),
-    _ref14$ = _ref14[0],
-    pluginState = _ref14$.pluginState,
-    state = _ref14$.state,
-    colorScheme = _ref14$.colorScheme,
-    intl = _ref14$.intl,
-    activeIndexPos = _ref14$.activeIndexPos,
-    isInverted = _ref14$.isInverted,
-    diffType = _ref14$.diffType,
-    hideDeletedDiffs = _ref14$.hideDeletedDiffs,
-    hideAddedDiffsUnderline = _ref14$.hideAddedDiffsUnderline,
-    showIndicators = _ref14$.showIndicators,
-    smartThresholds = _ref14$.smartThresholds,
-    deletedDiffPlacement = _ref14$.deletedDiffPlacement,
-    inlineDeletedDiffPlacement = _ref14$.inlineDeletedDiffPlacement,
-    reveal = _ref14$.reveal;
+function (_ref13, _ref14) {
+  var _ref18;
   var _ref15 = (0, _slicedToArray2.default)(_ref13, 1),
     _ref15$ = _ref15[0],
-    lastPluginState = _ref15$.pluginState,
-    lastState = _ref15$.state,
-    lastColorScheme = _ref15$.colorScheme,
-    lastIntl = _ref15$.intl,
-    lastActiveIndexPos = _ref15$.activeIndexPos,
-    lastIsInverted = _ref15$.isInverted,
-    lastDiffType = _ref15$.diffType,
-    lastHideDeletedDiffs = _ref15$.hideDeletedDiffs,
-    lastHideAddedDiffsUnderline = _ref15$.hideAddedDiffsUnderline,
-    lastShowIndicators = _ref15$.showIndicators,
-    lastSmartThresholds = _ref15$.smartThresholds,
-    lastDeletedDiffPlacement = _ref15$.deletedDiffPlacement,
-    lastInlineDeletedDiffPlacement = _ref15$.inlineDeletedDiffPlacement,
-    lastReveal = _ref15$.reveal;
+    pluginState = _ref15$.pluginState,
+    state = _ref15$.state,
+    colorScheme = _ref15$.colorScheme,
+    intl = _ref15$.intl,
+    activeIndexPos = _ref15$.activeIndexPos,
+    isInverted = _ref15$.isInverted,
+    diffType = _ref15$.diffType,
+    hideDeletedDiffs = _ref15$.hideDeletedDiffs,
+    hideAddedDiffsUnderline = _ref15$.hideAddedDiffsUnderline,
+    showIndicators = _ref15$.showIndicators,
+    smartThresholds = _ref15$.smartThresholds,
+    deletedDiffPlacement = _ref15$.deletedDiffPlacement,
+    inlineDeletedDiffPlacement = _ref15$.inlineDeletedDiffPlacement,
+    reveal = _ref15$.reveal;
+  var _ref16 = (0, _slicedToArray2.default)(_ref14, 1),
+    _ref16$ = _ref16[0],
+    lastPluginState = _ref16$.pluginState,
+    lastState = _ref16$.state,
+    lastColorScheme = _ref16$.colorScheme,
+    lastIntl = _ref16$.intl,
+    lastActiveIndexPos = _ref16$.activeIndexPos,
+    lastIsInverted = _ref16$.isInverted,
+    lastDiffType = _ref16$.diffType,
+    lastHideDeletedDiffs = _ref16$.hideDeletedDiffs,
+    lastHideAddedDiffsUnderline = _ref16$.hideAddedDiffsUnderline,
+    lastShowIndicators = _ref16$.showIndicators,
+    lastSmartThresholds = _ref16$.smartThresholds,
+    lastDeletedDiffPlacement = _ref16$.deletedDiffPlacement,
+    lastInlineDeletedDiffPlacement = _ref16$.inlineDeletedDiffPlacement,
+    lastReveal = _ref16$.reveal;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
-    var _ref16;
-    return (_ref16 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && (0, _isEqual.default)(pluginState.stepAttributions, lastPluginState.stepAttributions) &&
+    var _ref17;
+    return (_ref17 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && (0, _isEqual.default)(pluginState.stepAttributions, lastPluginState.stepAttributions) &&
     // Contributors can arrive after the first calculation; without this, tags never appear.
     (0, _isEqual.default)(pluginState.contributors, lastPluginState.contributors) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && (0, _isEqual.default)(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement &&
     // Turning the reveal on or off changes the emitted styles, so a cached result from the
     // other setting would leave the diff painted in the wrong resting state.
-    (0, _isEqual.default)(reveal, lastReveal)) !== null && _ref16 !== void 0 ? _ref16 : false;
+    (0, _isEqual.default)(reveal, lastReveal)) !== null && _ref17 !== void 0 ? _ref17 : false;
   }
-  return (_ref17 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && (0, _isEqual.default)(pluginState.stepAttributions, lastPluginState.stepAttributions) && (0, _isEqual.default)(pluginState.contributors, lastPluginState.contributors) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref17 !== void 0 ? _ref17 : false;
+  return (_ref18 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && (0, _isEqual.default)(pluginState.stepAttributions, lastPluginState.stepAttributions) && (0, _isEqual.default)(pluginState.contributors, lastPluginState.contributors) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref18 !== void 0 ? _ref18 : false;
 });

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

@@ -66,6 +66,7 @@ var getStepAttrs = function getStepAttrs(step) {
 var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRanges(doc, attrStepContexts, originalDoc) {
   return attrStepContexts.map(function (attrStepContext) {
     var afterNode = attrStepContext.afterNode,
+      attributionKey = attrStepContext.attributionKey,
       beforeNode = attrStepContext.beforeNode,
       finalPos = attrStepContext.finalPos,
       originalPos = attrStepContext.originalPos,
@@ -93,7 +94,9 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
         if (attrsToCheck.some(function (v) {
           return watchedAttrs.includes(v);
         })) {
-          return _objectSpread({
+          return _objectSpread(_objectSpread({}, attributionKey ? {
+            attributionKey: attributionKey
+          } : {}), {}, {
             fromB: finalPos,
             toB: finalPos + nodeAtPos.nodeSize,
             isInline: true,
@@ -110,10 +113,12 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
     if (attrsToCheck.some(function (v) {
       return taskItemAttrs.includes(v);
     }) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'taskItem') {
-      return {
+      return _objectSpread(_objectSpread({}, attributionKey ? {
+        attributionKey: attributionKey
+      } : {}), {}, {
         fromB: finalPos,
         toB: finalPos + nodeAtPos.nodeSize
-      };
+      });
     }
 
     // panel node (incl. variants like panel_c1): type/colour/icon attribute change
@@ -123,7 +128,9 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
     if (attrsToCheck.some(function (v) {
       return panelAttrs.includes(v);
     }) && nodeAtPos && (0, _nodeTypeUtils.getBaseNodeTypeName)(nodeAtPos.type) === 'panel') {
-      return _objectSpread({
+      return _objectSpread(_objectSpread({}, attributionKey ? {
+        attributionKey: attributionKey
+      } : {}), {}, {
         fromB: finalPos,
         toB: finalPos + nodeAtPos.nodeSize
       }, originalPos !== undefined && originalNodeAtPos && {
@@ -141,11 +148,13 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
         return undefined;
       }
       var isInline = nodeAtPos.type.name === 'inlineExtension';
-      return {
+      return _objectSpread(_objectSpread({}, attributionKey ? {
+        attributionKey: attributionKey
+      } : {}), {}, {
         fromB: finalPos,
         toB: finalPos + nodeAtPos.nodeSize,
         isInline: isInline
-      };
+      });
     }
 
     // media node: id/collection/url attribute change — highlight the mediaSingle parent
@@ -153,10 +162,12 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
       return mediaAttrs.includes(v);
     }) && $pos.parent.type === doc.type.schema.nodes.mediaSingle) {
       var startPos = $pos.pos + $pos.parentOffset;
-      return {
+      return _objectSpread(_objectSpread({}, attributionKey ? {
+        attributionKey: attributionKey
+      } : {}), {}, {
         fromB: startPos,
         toB: startPos + $pos.parent.nodeSize - 1
-      };
+      });
     }
     return undefined;
   }).filter(filterUndefined)