@atlaskit/editor-plugin-show-diff 15.0.0 → 15.1.1

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

@@ -111,14 +111,34 @@ var resolveInlineContentStart = function resolveInlineContentStart(doc, from, to
 };
 
 /**
- * A widget hosting the contributor tag of one inline diff range, placed on the first character the
- * range highlights.
+ * The position just before the code block enclosing `pos`, or `undefined` when nothing does.
+ *
+ * `.code-block-content-wrapper` hides its block-axis overflow, so a host left inside the code has
+ * its tag clipped away. Hosting it before the block puts the tag on the block's top-left corner,
+ * where a whole-code-block change is tagged too (EDITOR-8766).
+ */
+var resolveCodeBlockStart = function resolveCodeBlockStart(doc, pos) {
+  var $pos = doc.resolve(pos);
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    if ($pos.node(depth).type.name === 'codeBlock') {
+      return $pos.before(depth);
+    }
+  }
+  return undefined;
+};
+
+/**
+ * A widget hosting the contributor tag of one diff range, placed on the first character the range
+ * highlights — or, with `anchorAtRangeStart`, at `from` itself. Either way a host that would land
+ * inside a code block is hoisted out in front of it; see `resolveCodeBlockStart`.
  *
  * The tag is mounted in `toDOM` and taken down in `destroy`, so it lives exactly as long as the host
  * element ProseMirror drew it into — see `mountContributorTag`.
  */
 var createContributorTagWidget = exports.createContributorTagWidget = function createContributorTagWidget(_ref2) {
-  var doc = _ref2.doc,
+  var _ref2$anchorAtRangeSt = _ref2.anchorAtRangeStart,
+    anchorAtRangeStart = _ref2$anchorAtRangeSt === void 0 ? false : _ref2$anchorAtRangeSt,
+    doc = _ref2.doc,
     from = _ref2.from,
     to = _ref2.to,
     diffId = _ref2.diffId,
@@ -130,9 +150,12 @@ var createContributorTagWidget = exports.createContributorTagWidget = function c
   // Reassigned when ProseMirror redraws this decoration, which it may do more than once for the
   // same `Decoration` instance.
   var mount;
+  var anchorPos = anchorAtRangeStart ? from : resolveInlineContentStart(doc, from, to);
+  // A change inside a code block is hoisted out of it; anything else keeps its own anchor.
+  var codeBlockPos = resolveCodeBlockStart(doc, anchorPos);
   return _view.Decoration.widget(
   // Keep the host out of the table row's grid (EDITOR-8442).
-  (0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(doc, resolveInlineContentStart(doc, from, to), 1), function () {
+  (0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(doc, codeBlockPos !== null && codeBlockPos !== void 0 ? codeBlockPos : anchorPos, 1), function () {
     var host = buildContributorTagHost(diffId);
     mount = mountContributorTag({
       diffId: diffId,

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

@@ -17,6 +17,7 @@ var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createContributorTagWidget = require("./createContributorTagWidget");
 var _createInlineChangedDecorationStyles = require("./createInlineChangedDecoration.styles.legacy");
 var _decorationKeys = require("./decorationKeys");
+var _revealStyles = require("./revealStyles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -109,6 +110,7 @@ var getAtomicInlineChangedAttrs = exports.getAtomicInlineChangedAttrs = function
  */
 
 var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(_ref2) {
+  var _revealed$style;
   var attributionKey = _ref2.attributionKey,
     change = _ref2.change,
     colorScheme = _ref2.colorScheme,
@@ -133,6 +135,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     hasDeletedWidget = _ref2$hasDeletedWidge === void 0 ? false : _ref2$hasDeletedWidge,
     _ref2$isDeletedWidget = _ref2.isDeletedWidgetBelow,
     isDeletedWidgetBelow = _ref2$isDeletedWidget === void 0 ? false : _ref2$isDeletedWidget,
+    reveal = _ref2.reveal,
     tagMountContext = _ref2.tagMountContext;
   // Derived from the range so it survives a recalculation: stepping to the next/previous change
   // rebuilds decorations without touching the doc, and a fresh id would change the React key and the
@@ -152,7 +155,18 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     }))];
   }
   var colors = getColorScheme(colorScheme);
-  var style = resolveInlineChangedStyle({
+
+  // The reveal withholds the static highlight so the wipe has something to reveal, so it supplies
+  // the whole style rather than adding to the usual one. Extended pipeline only — the AI review
+  // surface is the only consumer, and the non-extended styles have no background to wipe.
+  var revealed = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) ? (0, _revealStyles.resolveRevealStyle)({
+    colorScheme: colorScheme,
+    hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+    isActive: isActive,
+    isInserted: isInserted,
+    reveal: reveal
+  }) : undefined;
+  var style = (_revealed$style = revealed === null || revealed === void 0 ? void 0 : revealed.style) !== null && _revealed$style !== void 0 ? _revealed$style : resolveInlineChangedStyle({
     colors: colors,
     colorScheme: colorScheme,
     diffType: diffType,
@@ -162,11 +176,11 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
   });
   var isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
   var atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
-  var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread({
+  var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread({
     style: atomicInlineAttrs ? "".concat(style).concat(atomicInlineAttrs.styleSuffix) : style
   }, atomicInlineAttrs && {
     class: atomicInlineAttrs.className
-  }), {}, {
+  }), revealed && (0, _defineProperty2.default)({}, _revealStyles.REVEAL_ATTR, revealed.role)), {}, {
     'data-testid': 'show-diff-changed-decoration'
   }, showContributorTags && {
     'data-diff-id': diffId

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

@@ -118,6 +118,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     diffType = _ref2.diffType,
     _ref2$hideAddedDiffsU = _ref2.hideAddedDiffsUnderline,
     hideAddedDiffsUnderline = _ref2$hideAddedDiffsU === void 0 ? false : _ref2$hideAddedDiffsU,
+    reveal = _ref2.reveal,
     tagMountContext = _ref2.tagMountContext;
   var slice = doc.slice(change.fromA, change.toA);
   var shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 || (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 || (_slice$content2 = slice.content) === null || _slice$content2 === void 0 || (_slice$content2 = _slice$content2.firstChild) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.type.name) === 'paragraph' && (slice === null || slice === void 0 || (_slice$content3 = slice.content) === null || _slice$content3 === void 0 || (_slice$content3 = _slice$content3.firstChild) === null || _slice$content3 === void 0 ? void 0 : _slice$content3.content.size) === 0;
@@ -299,7 +300,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     var nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, diffType);
+        var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, diffType, reveal);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
@@ -329,11 +330,12 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
             colorScheme: colorScheme,
             isActive: isActive,
             isInserted: isInserted,
-            diffType: diffType
+            diffType: diffType,
+            reveal: reveal
           });
           dom.append(injectedNode);
         } else {
-          var _wrapper2 = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, diffType);
+          var _wrapper2 = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, diffType, reveal);
           _wrapper2.append(fallbackNode);
           dom.append(_wrapper2);
         }

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

@@ -17,9 +17,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 /**
  * Diff kinds that expose an anchor a tag can be pinned to: `inline` is added/changed content,
- * `widget` is deleted content. Block diffs carry no attribution.
+ * `widget` is deleted content, `block` a whole changed block node.
  */
-var TAGGABLE_DECORATION_TYPES = new Set(['inline', 'widget']);
+var TAGGABLE_DECORATION_TYPES = new Set(['block', 'inline', 'widget']);
 
 /** The connection is an internal key, so it is dropped on the way to the tag. */
 var toTagContributor = function toTagContributor(_ref) {
@@ -36,6 +36,15 @@ var isSameChange = function isSameChange(widget, inline) {
   return widget.spec.attributionKey === inline.spec.attributionKey && widget.from >= inline.from && widget.from <= inline.to;
 };
 
+/**
+ * Whether `inner` captions the same change as the block decoration `block`, in which case only the
+ * block keeps the tag — one tag per block. Containment counts in either direction: a leaf block's
+ * highlight spans the wrapper the block sits in. Merely adjacent ranges keep a tag each.
+ */
+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);
+};
+
 /**
  * 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
@@ -78,24 +87,44 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
     var decoration = _ref2.decoration;
     return decoration.spec.decorationType === 'inline';
   });
+  var blockTargets = targets.filter(function (_ref3) {
+    var decoration = _ref3.decoration;
+    return decoration.spec.decorationType === 'block';
+  });
   var linkedDiffIds = new Map();
   var folded = new Set();
+  var fold = function fold(host, target) {
+    var _linkedDiffIds$get;
+    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 _loop = function _loop() {
-      var _linkedDiffIds$get;
       var target = _targets[_i];
-      if (target.decoration.spec.decorationType !== 'widget') {
+      var decorationType = target.decoration.spec.decorationType;
+      if (decorationType === 'block') {
         return 0; // continue
       }
-      var host = inlineTargets.find(function (_ref3) {
-        var decoration = _ref3.decoration;
-        return isSameChange(target.decoration, decoration);
+
+      // A block outranks both other kinds, so it is tried first.
+      var block = blockTargets.find(function (_ref4) {
+        var decoration = _ref4.decoration;
+        return isSameBlockChange(target.decoration, decoration);
       });
-      if (!host) {
+      if (block) {
+        fold(block, target);
+        return 0; // continue
+      }
+      if (decorationType !== 'widget') {
         return 0; // continue
       }
-      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 host = inlineTargets.find(function (_ref5) {
+        var decoration = _ref5.decoration;
+        return isSameChange(target.decoration, decoration);
+      });
+      if (host) {
+        fold(host, target);
+      }
     },
     _ret;
   for (var _i = 0, _targets = targets; _i < _targets.length; _i++) {
@@ -104,9 +133,9 @@ var extractContributorTags = exports.extractContributorTags = function extractCo
   }
   return targets.filter(function (target) {
     return !folded.has(target);
-  }).map(function (_ref4) {
-    var contributor = _ref4.contributor,
-      spec = _ref4.decoration.spec;
+  }).map(function (_ref6) {
+    var contributor = _ref6.contributor,
+      spec = _ref6.decoration.spec;
     var connected = contributor.connectedToKey ? contributors[contributor.connectedToKey] : undefined;
     var connectedContributor = connected ? toTagContributor(connected) : undefined;
     var linked = linkedDiffIds.get(spec.diffId);

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

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveRevealStyle = exports.buildWipeableBackground = exports.applyRevealToElement = exports.REVEAL_BORDER_VAR = exports.REVEAL_BG_VAR = exports.REVEAL_ATTR = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _factory = require("./colorSchemes/factory");
+var _schemes = require("./colorSchemes/schemes");
+var _standard = require("./colorSchemes/standard");
+/**
+ * Painting strategy for reveal highlights. Highlights are `linear-gradient`s with animated
+ * `background-size` for the wipe effect. Colours live on elements as custom properties so the
+ * attribution palette works per-contributor.
+ */
+
+/** Marks an element as taking part in the reveal, and says which side it represents. */
+var REVEAL_ATTR = exports.REVEAL_ATTR = 'data-show-diff-reveal';
+/** Wipe colour, read by the animation as the gradient's colour stop. */
+var REVEAL_BG_VAR = exports.REVEAL_BG_VAR = '--show-diff-reveal-bg';
+
+/** Underline colour, brought in on the same schedule as the highlight. */
+var REVEAL_BORDER_VAR = exports.REVEAL_BORDER_VAR = '--show-diff-reveal-border';
+
+/** Only schemes with background highlights can be revealed; 'traditional' uses underline only. */
+var schemeSupportsReveal = function schemeSupportsReveal(colorScheme) {
+  return colorScheme !== 'traditional';
+};
+
+/** Convert a flat background colour into a wipeable gradient (zero width initially). */
+var buildWipeableBackground = exports.buildWipeableBackground = function buildWipeableBackground(color) {
+  return (0, _lazyNodeView.convertToInlineCss)({
+    backgroundColor: 'transparent',
+    backgroundImage: "linear-gradient(".concat(color, ", ").concat(color, ")"),
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '0% 100%',
+    backgroundPosition: '0 0',
+    // Each line fragment of a wrapped highlight gets its own background box, so they wipe
+    // together rather than the gradient stretching across the whole wrapped run.
+    WebkitBoxDecorationBreak: 'clone',
+    boxDecorationBreak: 'clone'
+  });
+};
+
+/** Base padding and transparent underline placeholder (no layout shift on reveal). */
+var revealBaseStyle = (0, _lazyNodeView.convertToInlineCss)({
+  padding: "1px 0 2px",
+  borderBottom: "2px solid transparent"
+});
+var buildRevealVariables = function buildRevealVariables(_ref) {
+  var background = _ref.background,
+    border = _ref.border;
+  return (0, _lazyNodeView.convertToInlineCss)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, REVEAL_BG_VAR, background), REVEAL_BORDER_VAR, border));
+};
+
+/** Configuration that affects both resting state and reveal endpoint. */
+
+/** Reveal colours from the refactored scheme registry (attribution palette ready). */
+var revealColorsRefactored = function revealColorsRefactored(colors, _ref2) {
+  var hideAddedDiffsUnderline = _ref2.hideAddedDiffsUnderline,
+    isActive = _ref2.isActive,
+    isInserted = _ref2.isInserted;
+  return isInserted ? (0, _factory.getInsertedInlineRevealColors)(colors, isActive, hideAddedDiffsUnderline) : (0, _factory.getDeletedInlineRevealColors)(colors);
+};
+
+/**
+ * Legacy cohort reveal colours. Values MUST match `revealColorsRefactored()` output for
+ * `standard` scheme (test: `revealStyles.ts` in test package).
+ */
+var revealColorsLegacy = function revealColorsLegacy(_ref3) {
+  var hideAddedDiffsUnderline = _ref3.hideAddedDiffsUnderline,
+    isActive = _ref3.isActive,
+    isInserted = _ref3.isInserted;
+  return isInserted ? {
+    // Mirrors `editingStyleExtended` / `editingStyleActiveExtended` and their
+    // `*NoUnderline` variants in `colorSchemes/standard.ts`.
+    background: isActive ? "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)" : "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
+    border: hideAddedDiffsUnderline ? 'transparent' : "var(--ds-border-accent-purple, #AF59E1)"
+  } : {
+    // Mirrors `deletedInlineContentStyleExtended` in `colorSchemes/standard.ts`.
+    background: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
+    border: "var(--ds-border-accent-gray, #7D818A)"
+  };
+};
+var resolveRevealColors = function resolveRevealColors(colors, variant) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? revealColorsRefactored(colors, variant) : revealColorsLegacy(variant);
+};
+var getColorScheme = function getColorScheme(colorScheme) {
+  return _schemes.colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
+};
+
+/** Deleted text appearance (grey and strikethrough) without the highlight. */
+var deletedTextOnlyStyle = function deletedTextOnlyStyle(colors, isActive) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? (0, _factory.buildDeletedInlineStyleStandard)(colors, isActive ? 'active' : 'default') : isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyle;
+};
+
+/**
+ * Resolve reveal attribute and style for a decoration. Returned style REPLACES the decoration's
+ * highlight (not an addition) so the animation has something to wipe. Gate resolved in showDiff
+ * command for single shared answer between decorations and animation.
+ */
+var resolveRevealStyle = exports.resolveRevealStyle = function resolveRevealStyle(_ref4) {
+  var colorScheme = _ref4.colorScheme,
+    _ref4$hideAddedDiffsU = _ref4.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref4$hideAddedDiffsU === void 0 ? false : _ref4$hideAddedDiffsU,
+    _ref4$includeDeletedT = _ref4.includeDeletedTextStyle,
+    includeDeletedTextStyle = _ref4$includeDeletedT === void 0 ? true : _ref4$includeDeletedT,
+    isActive = _ref4.isActive,
+    isInserted = _ref4.isInserted,
+    reveal = _ref4.reveal;
+  if ((reveal === null || reveal === void 0 ? void 0 : reveal.mode) !== 'phased' || !schemeSupportsReveal(colorScheme)) {
+    return undefined;
+  }
+  var colors = getColorScheme(colorScheme);
+  var _resolveRevealColors = resolveRevealColors(colors, {
+      hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+      isActive: isActive,
+      isInserted: isInserted
+    }),
+    background = _resolveRevealColors.background,
+    border = _resolveRevealColors.border;
+  return {
+    role: isInserted ? 'added' : 'deleted',
+    style: (isInserted || !includeDeletedTextStyle ? '' : deletedTextOnlyStyle(colors, isActive)) + revealBaseStyle + buildWipeableBackground(background) + buildRevealVariables({
+      background: background,
+      border: border
+    })
+  };
+};
+
+/** Reveal style for imperatively-built elements (deleted-content widget wrappers). */
+var applyRevealToElement = exports.applyRevealToElement = function applyRevealToElement(_ref5) {
+  var colorScheme = _ref5.colorScheme,
+    element = _ref5.element,
+    hideAddedDiffsUnderline = _ref5.hideAddedDiffsUnderline,
+    isActive = _ref5.isActive,
+    isInserted = _ref5.isInserted,
+    reveal = _ref5.reveal;
+  var resolved = resolveRevealStyle({
+    colorScheme: colorScheme,
+    hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+    isActive: isActive,
+    isInserted: isInserted,
+    reveal: reveal,
+    // The widget supplies the deleted text's own grey/strikethrough styling already.
+    includeDeletedTextStyle: false
+  });
+  if (!resolved) {
+    return '';
+  }
+  element.setAttribute(REVEAL_ATTR, resolved.role);
+  return resolved.style;
+};

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -12,6 +12,7 @@ var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../../isExtendedEnabled");
+var _revealStyles = require("../revealStyles");
 var _createInlineChangedDecoration = require("../createInlineChangedDecoration");
 var _tableCellEdgeAttrs = require("./tableCellEdgeAttrs");
 var _getAttrChangeRanges = require("./getAttrChangeRanges");
@@ -614,9 +615,17 @@ var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrappe
     colorScheme = _ref13.colorScheme,
     isActive = _ref13.isActive,
     isInserted = _ref13.isInserted,
-    diffType = _ref13.diffType;
+    diffType = _ref13.diffType,
+    reveal = _ref13.reveal;
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', isInserted ? (0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive) : (0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType));
+  var revealStyle = (0, _revealStyles.applyRevealToElement)({
+    colorScheme: colorScheme,
+    element: wrapper,
+    isActive: isActive !== null && isActive !== void 0 ? isActive : false,
+    isInserted: isInserted !== null && isInserted !== void 0 ? isInserted : false,
+    reveal: reveal
+  });
+  wrapper.setAttribute('style', (isInserted ? (0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive) : (0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType, Boolean(revealStyle))) + revealStyle);
   (0, _toConsumableArray2.default)(node.childNodes).forEach(function (child) {
     var removedChild = node.removeChild(child);
     wrapper.append(removedChild);
@@ -632,22 +641,33 @@ var createContentWrapper = exports.createContentWrapper = function createContent
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var diffType = arguments.length > 3 ? arguments[3] : undefined;
+  var reveal = arguments.length > 4 ? arguments[4] : undefined;
   var wrapper = document.createElement('span');
   var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
     position: 'relative',
     width: 'fit-content'
   });
+  // Empty unless the reveal is running, in which case the static highlight below is withheld so
+  // the animation can wipe it in instead.
+  var revealStyle = (0, _revealStyles.applyRevealToElement)({
+    colorScheme: colorScheme,
+    element: wrapper,
+    isActive: isActive,
+    isInserted: isInserted,
+    reveal: reveal
+  });
+  var deletedStyle = (0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType, Boolean(revealStyle));
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (isInserted) {
-      wrapper.setAttribute('style', "".concat(baseStyle).concat((0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive)));
+      wrapper.setAttribute('style', "".concat(baseStyle).concat((0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive)).concat(revealStyle));
     } else {
-      wrapper.setAttribute('style', "".concat(baseStyle).concat((0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType)));
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(deletedStyle).concat(revealStyle));
       var strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', (0, _wrapBlockNodeViewStyles.getDeletedContentStyleUnbounded)(colorScheme, isActive));
       wrapper.append(strikethrough);
     }
   } else {
-    wrapper.setAttribute('style', "".concat(baseStyle).concat((0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType)));
+    wrapper.setAttribute('style', "".concat(baseStyle).concat(deletedStyle).concat(revealStyle));
     var _strikethrough = document.createElement('span');
     _strikethrough.setAttribute('style', (0, _wrapBlockNodeViewStyles.getDeletedContentStyleUnbounded)(colorScheme, isActive));
     wrapper.append(_strikethrough);

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js

@@ -106,11 +106,12 @@ var getInsertedContentStyleNext = function getInsertedContentStyleNext(colorSche
 var getDeletedContentStyleNext = function getDeletedContentStyleNext(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var diffType = arguments.length > 2 ? arguments[2] : undefined;
+  var omitHighlight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var colors = getColorScheme(colorScheme);
   var base = (0, _factory.buildDeletedInlineContentStyle)(colors, isActive ? 'active' : 'new');
 
   // glyphTint adds a background highlight and border-bottom over the tint; strikethrough does not.
-  var needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && (0, _isExtendedEnabled.isExtendedEnabled)(diffType);
+  var needsExtendedHighlight = colors.deletedInlineTreatment === 'glyphTint' && (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && !omitHighlight;
   return needsExtendedHighlight ? base + (0, _factory.buildDeletedInlineContentStyleExtended)(colors) : base;
 };
 var resolveCellOverlayStyleNext = function resolveCellOverlayStyleNext(_ref) {
@@ -172,7 +173,8 @@ var getInsertedContentStyle = exports.getInsertedContentStyle = function getInse
 var getDeletedContentStyle = exports.getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var diffType = arguments.length > 2 ? arguments[2] : undefined;
-  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? getDeletedContentStyleNext(colorScheme, isActive, diffType) : (0, _wrapBlockNodeViewStyles.getDeletedContentStyleLegacy)((0, _schemes.getLegacyColorScheme)(colorScheme), isActive, diffType);
+  var omitHighlight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? getDeletedContentStyleNext(colorScheme, isActive, diffType, omitHighlight) : (0, _wrapBlockNodeViewStyles.getDeletedContentStyleLegacy)((0, _schemes.getLegacyColorScheme)(colorScheme), isActive, diffType, omitHighlight);
 };
 
 /**

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js

@@ -172,10 +172,11 @@ var getInsertedContentStyleLegacy = exports.getInsertedContentStyleLegacy = func
 var getDeletedContentStyleLegacy = exports.getDeletedContentStyleLegacy = function getDeletedContentStyleLegacy(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var diffType = arguments.length > 2 ? arguments[2] : undefined;
+  var omitHighlight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   if (colorScheme === 'traditional') {
     return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
   }
-  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && !omitHighlight) {
     return (isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyleNew) + _standard.deletedInlineContentStyleExtended;
   }
   return isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyleNew;

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

@@ -18,6 +18,7 @@ var _enforceCustomStepRegisters = require("./enforceCustomStepRegisters");
 var _getScrollableDecorations = require("./getScrollableDecorations");
 var _isExtendedEnabled = require("./isExtendedEnabled");
 var _NodeViewSerializer = require("./NodeViewSerializer");
+var _revealAnimation = require("./revealAnimation");
 var _scrollToDiff = require("./scrollToDiff");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -91,12 +92,21 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
         if (meta) {
-          if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
-            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0;
-            // Update the plugin state with the new metadata
-            newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
+          if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'REVEAL_COMPLETE') {
+            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0, _newPluginState1;
+            // REVEAL_COMPLETE repaints with the reveal dropped, so the decorations render their
+            // ordinary resting style. Without it the reveal stays in state indefinitely and the
+            // next unrelated repaint re-emits the hidden, zero-width highlight with no animation
+            // left to bring it in — the highlight simply vanishes.
+            newPluginState = meta.action === 'REVEAL_COMPLETE' ? _objectSpread(_objectSpread({}, currentPluginState), {}, {
+              reveal: undefined
+            }) : _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               isDisplayingChanges: true,
-              activeIndex: undefined
+              activeIndex: undefined,
+              // Explicit rather than left to the spread: an absent key in `meta` would let
+              // the previous paint's choreography leak into this one, so closing the diff
+              // would animate too.
+              reveal: meta.reveal
             });
             // Calculate and store decorations in state
             var _calculateDiffDecorat = (0, _calculateDiffDecorations.calculateDiffDecorations)(_objectSpread({
@@ -116,7 +126,10 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
                 showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
                 smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
                 deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
-                inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement
+                inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement,
+                // SHOW_DIFF only. The scroll-to-next recalculation further down deliberately
+                // omits this so stepping through changes cannot replay the choreography.
+                reveal: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.reveal
               } : {})),
               contributorTags = _calculateDiffDecorat.contributorTags,
               decorations = _calculateDiffDecorat.decorations,
@@ -124,7 +137,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
             // Update the decorations and their ids
             newPluginState.decorations = decorations;
             newPluginState.contributorTags = contributorTags;
-            if ((0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.diffType)) {
+            if ((0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType)) {
               newPluginState.diffDescriptors = diffDescriptors;
             }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -132,7 +145,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               decorations: _view.DecorationSet.empty,
               isDisplayingChanges: false,
               activeIndex: undefined,
-              contributorTags: []
+              contributorTags: [],
+              reveal: undefined
             }, (0, _isExtendedEnabled.isExtendedEnabled)(currentPluginState.diffType) ? {
               isInverted: false,
               diffType: (0, _isExtendedEnabled.getDefaultDiffType)(),
@@ -141,9 +155,9 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               diffDescriptors: []
             } : {});
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
-            var _newPluginState1;
+            var _newPluginState10;
             // Update the active index in plugin state and recalculate decorations
-            var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc, (_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType);
+            var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc, (_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType);
             if (_decorations.length > 0) {
               var _currentPluginState$a;
               // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
@@ -233,6 +247,10 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
           }
           var pluginState = showDiffPluginKey.getState(view.state);
 
+          // A repaint rebuilds inline decorations, destroying any animation bound to them, so
+          // an in-flight reveal has to be re-attached to the new nodes. No-op when idle.
+          (0, _revealAnimation.rebindReveal)(view, view.dom);
+
           // Scroll to the first decoration when scrollIntoView was requested.
           // Use the same filtered/position-sorted list as the active-index path
           // so "first" reliably means the topmost scrollable diff in the document.

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

@@ -74,6 +74,10 @@ var resolveAgent = function resolveAgent(attribution, profilesByAccountId) {
  * reads as "nobody touched this", so the whole list is dropped and the plain diff renders instead.
  */
 var resolveDiffContributors = exports.resolveDiffContributors = function resolveDiffContributors(stepsWithAttribution, profiles) {
+  // Profiles opt callers into contributor tags; attribution alone still supplies diff colours.
+  if (profiles === undefined) {
+    return undefined;
+  }
   var profilesByAccountId = toProfilesByAccountId(profiles);
   var contributors = [];
   /** Keyed as the plugin keys changes, so no two entries can collapse onto one another. */