@atlaskit/editor-plugin-show-diff 15.1.6 → 15.1.7

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

@@ -16,9 +16,6 @@ var _schemes = require("../../pm-plugins/decorations/colorSchemes/schemes");
 var _buildContributorTagDom = require("./buildContributorTagDom");
 var _contributorAvatarRenderer = require("./contributorAvatarRenderer");
 var _messages = require("./messages");
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-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; }
 var getContributorName = function getContributorName(contributor, formatMessage) {
   var _contributor$name, _contributor$agentKin;
   var name = (_contributor$name = contributor.name) === null || _contributor$name === void 0 ? void 0 : _contributor$name.trim();
@@ -35,8 +32,8 @@ var getContributorName = function getContributorName(contributor, formatMessage)
 };
 
 /**
- * Resolves the tag's accent from the same scheme value and token maps the highlight used, so the
- * two can never drift.
+ * Resolves the tag's accent from the same scheme value the highlight was drawn from, so the colour
+ * the two carry can never drift — only the tone does, which is `getAccentTokens`'s to pick.
  */
 var getTagAccent = function getTagAccent(_ref) {
   var colorScheme = _ref.colorScheme,
@@ -47,35 +44,70 @@ var getTagAccent = function getTagAccent(_ref) {
   return (0, _factory.getAccentTokens)(accent);
 };
 
-/** The line the change starts on: topmost of its fragments, leftmost among those. */
-var findChangeStartLine = function findChangeStartLine(highlights) {
-  var start;
-  var _iterator = _createForOfIteratorHelper(highlights),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var highlight = _step.value;
-      var _iterator2 = _createForOfIteratorHelper(highlight.getClientRects()),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var rect = _step2.value;
-          if (!start || rect.top < start.top - 1 || Math.abs(rect.top - start.top) <= 1 && rect.left < start.left) {
-            start = rect;
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
+/**
+ * Keyboard focus, as a member of `revealSources` alongside the elements the pointer can be over. It
+ * has no element of its own to key on — the tag is already in the set under its own hover.
+ */
+var FOCUS_SOURCE = Symbol('contributor-tag-focus');
+
+/** Moves the tag between the two ends of the fade `contributorTagStyles` declares. */
+var setRevealed = function setRevealed(tag, isVisible) {
+  tag.toggleAttribute(_buildContributorTagDom.CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, isVisible);
+};
+
+/**
+ * Whether flipping the tag's state will actually run a transition on it.
+ *
+ * Asked of the element rather than of `matchMedia`, because reduced motion and a missing stylesheet
+ * both compute to a zero duration — and a transition that never starts fires no `transitionend`, so
+ * a tag waiting for one would sit on screen until the backstop timeout.
+ *
+ * Read only when a tag is being taken down: it resolves style.
+ */
+var willTransition = function willTransition(tag) {
+  return window.getComputedStyle(tag).transitionDuration.split(',').some(function (duration) {
+    return parseFloat(duration) > 0;
+  });
+};
+
+/**
+ * Fades a tag that is still on screen out, and releases it once the fade has finished.
+ *
+ * No controller owns the element by the time this runs — it is released up front so a republished
+ * model's tag can fade in over the top — so everything the removal needs is captured here.
+ */
+var fadeTagOut = function fadeTagOut(tag, release) {
+  setRevealed(tag, false);
+
+  // Nothing to wait for: reduced motion, or no stylesheet to fade it with.
+  if (!willTransition(tag)) {
+    release();
+    return;
+  }
+  var unbind;
+  var isFinished = false;
+  var finish = function finish() {
+    var _unbind;
+    // Whichever of the two signals arrives first wins; the other must not release twice.
+    if (isFinished) {
+      return;
+    }
+    isFinished = true;
+    (_unbind = unbind) === null || _unbind === void 0 || _unbind();
+    unbind = undefined;
+    clearTimeout(fallbackId);
+    release();
+  };
+  unbind = (0, _bindEventListener.bind)(tag, {
+    type: 'transitionend',
+    // `transitionend` bubbles, and opacity is not the only property that could ever carry one.
+    listener: function listener(event) {
+      if (event.target === tag && event.propertyName === 'opacity') {
+        finish();
       }
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return start;
+  });
+  var fallbackId = setTimeout(finish, _buildContributorTagDom.TAG_EXIT_FALLBACK_MS);
 };
 
 /** The contributors a tag draws, keyed so a republished model can be recognised as the same pair. */
@@ -104,8 +136,18 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
     (0, _defineProperty2.default)(this, "bindToken", 0);
     (0, _defineProperty2.default)(this, "fullLabel", '');
     (0, _defineProperty2.default)(this, "isDestroyed", false);
-    (0, _defineProperty2.default)(this, "isHighlightHovered", false);
-    (0, _defineProperty2.default)(this, "isHoveredOrFocused", false);
+    /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
+    (0, _defineProperty2.default)(this, "isVisible", false);
+    /**
+     * Everything currently asking for the tag to be up, other than the model: each hovered highlight,
+     * the tag itself while the pointer is on it, and `FOCUS_SOURCE` while it holds focus.
+     *
+     * One set rather than independent booleans, which is what let the exit's trailing delay go: a
+     * pointer crossing from the highlight onto the tag removes one member and adds another in the same
+     * dispatch, so no style is resolved in between and the browser never starts the exit. Booleans
+     * could not see each other, so the crossing wrote the tag out and straight back in.
+     */
+    (0, _defineProperty2.default)(this, "revealSources", new Set());
     (0, _defineProperty2.default)(this, "unbindHighlights", []);
     this.options = options;
   }
@@ -167,65 +209,101 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       this.renderLabels(next);
       this.applyAccent(next);
       this.syncHighlightBindings(next);
-      this.applyStyles();
+      this.applyVisibility();
       this.syncTooltip();
     }
 
-    /** Takes the tag's DOM down, keeping the subscription so a republished model redraws it. */
+    /**
+     * Takes the tag's DOM down, keeping the subscription so a republished model redraws it.
+     *
+     * A tag that is still on screen is released here and fades out on its own, so a republished
+     * model's tag fades in over the top of the outgoing one — see `fadeTagOut`.
+     */
   }, {
     key: "teardownTag",
     value: function teardownTag() {
-      var _this$unbindTag, _this$tooltip, _this$dom;
+      var _this$unbindTag, _this$tooltip;
+      // Unbound synchronously, ahead of any fade: a tag on its way out must not be revealed again by
+      // the pointer, and these listeners are what hold this controller.
       this.unbindHighlightState();
       this.boundSelector = undefined;
       (_this$unbindTag = this.unbindTag) === null || _this$unbindTag === void 0 || _this$unbindTag.call(this);
       this.unbindTag = undefined;
+      // Destroyed rather than carried through the fade: it is a popover in the top layer.
       (_this$tooltip = this.tooltip) === null || _this$tooltip === void 0 || _this$tooltip.destroy();
       this.tooltip = undefined;
       this.tooltipContent = undefined;
-      this.avatars.forEach(function (avatar) {
-        return avatar.destroy();
-      });
+      var dom = this.dom,
+        isVisible = this.isVisible;
+      // Destroying an avatar removes its element, so the avatars go with whoever removes the tag —
+      // destroyed here and it would fade out empty.
+      var avatars = this.avatars;
       this.avatars = [];
-      (_this$dom = this.dom) === null || _this$dom === void 0 || _this$dom.root.remove();
       this.dom = undefined;
-      this.maxWidthPx = undefined;
-      this.isHoveredOrFocused = false;
-      // Both hover flags belong to the listeners just unbound: a republished model rebinds them, and
-      // stale `true` would draw the tag as visible with the pointer nowhere near it.
-      this.isHighlightHovered = false;
+      this.isVisible = false;
+      // The set belongs to the listeners just unbound: a stale member would draw the tag as visible
+      // with the pointer nowhere near it.
+      this.revealSources.clear();
+      if (!dom) {
+        return;
+      }
+      var release = function release() {
+        avatars.forEach(function (avatar) {
+          return avatar.destroy();
+        });
+        dom.root.remove();
+      };
+
+      // Nothing on screen to fade. `isConnected` covers ProseMirror destroying the widget: a fade on
+      // a detached element never starts.
+      if (!isVisible || !dom.tag.isConnected) {
+        release();
+        return;
+      }
+      fadeTagOut(dom.tag, release);
     }
   }, {
     key: "bindTag",
     value: function bindTag(_ref4) {
-      var _this3 = this;
       var tag = _ref4.tag;
-      var setHoveredOrFocused = function setHoveredOrFocused(isHoveredOrFocused) {
-        return function () {
-          _this3.isHoveredOrFocused = isHoveredOrFocused;
-          _this3.applyStyles();
-        };
-      };
+      // `mouseover`/`mouseout` rather than the enter/leave pair, because they are what fire as the
+      // pointer moves between the tag's own children. Both are keyed on the tag, so those moves add
+      // and remove the same member and the set never empties.
       this.unbindTag = (0, _bindEventListener.bindAll)(tag, [{
         type: 'mouseover',
-        listener: setHoveredOrFocused(true)
+        listener: this.trackRevealSource(tag, true)
       }, {
         type: 'mouseout',
-        listener: setHoveredOrFocused(false)
+        listener: this.trackRevealSource(tag, false)
       }, {
         type: 'focus',
-        listener: setHoveredOrFocused(true)
+        listener: this.trackRevealSource(FOCUS_SOURCE, true)
       }, {
         type: 'blur',
-        listener: setHoveredOrFocused(false)
+        listener: this.trackRevealSource(FOCUS_SOURCE, false)
       }]);
     }
+
+    /** One listener shape for every reveal source, so all of them land in the same set. */
+  }, {
+    key: "trackRevealSource",
+    value: function trackRevealSource(source, isRevealing) {
+      var _this3 = this;
+      return function () {
+        if (isRevealing) {
+          _this3.revealSources.add(source);
+        } else {
+          _this3.revealSources.delete(source);
+        }
+        _this3.applyVisibility();
+      };
+    }
   }, {
     key: "renderAvatars",
     value: function renderAvatars(model) {
-      var _this$dom2,
+      var _this$dom,
         _this4 = this;
-      var _ref5 = (_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 ? _this$dom2 : {},
+      var _ref5 = (_this$dom = this.dom) !== null && _this$dom !== void 0 ? _this$dom : {},
         container = _ref5.avatars;
       if (!container) {
         return;
@@ -285,8 +363,8 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       var agentName = isPrimaryAgent ? primaryName : secondaryName;
       var userName = isPrimaryAgent ? secondaryName : primaryName;
 
-      // A connected pair only ever shows the agent; the pair is spelled out in the label, because
-      // the tag is never wider than the highlight.
+      // A connected pair only ever shows the agent; the pair is spelled out in the label, because the
+      // tag is capped at `MAX_TAG_WIDTH` and two names rarely fit inside it.
       this.dom.name.textContent = model.connectedContributor ? agentName || primaryName : primaryName;
       this.fullLabel = model.connectedContributor ? formatMessage(_messages.contributorTagMessages.changedByConnected, {
         agentName: agentName,
@@ -314,34 +392,34 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       }
       var accent = this.accentOf(model);
       this.dom.tag.style.setProperty('background-color', accent.background);
-      this.dom.tag.style.setProperty('border-bottom-color', accent.border);
       this.dom.name.style.setProperty('color', accent.text);
       this.avatars.forEach(function (avatar) {
         return avatar.setRingColor(accent.background);
       });
     }
 
-    /** Width clamp and visibility — the two things that are not carried by the model alone. */
+    /**
+     * Visibility — the one thing the model does not carry on its own, because hover is not in it.
+     *
+     * One idempotent attribute write, with nothing to guard: whether the flip is a real one, whether
+     * the tag is attached yet, and whether motion is wanted at all are all the stylesheet's to answer.
+     */
   }, {
-    key: "applyStyles",
-    value: function applyStyles() {
+    key: "applyVisibility",
+    value: function applyVisibility() {
       var _this$model;
       if (!this.dom) {
         return;
       }
-      this.dom.root.style.setProperty('max-width',
-      // Clamped to the highlight's own width, floored at `MIN_TAG_WIDTH` so a one-character
-      // change still shows an avatar.
-      this.maxWidthPx === undefined ? '' : "max(".concat(Math.round(this.maxWidthPx), "px, ").concat(_buildContributorTagDom.MIN_TAG_WIDTH, ")"));
-      var isVisible = Boolean((_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.isActive) || this.isHighlightHovered || this.isHoveredOrFocused;
-      this.dom.tag.style.setProperty('opacity', isVisible ? '1' : '0');
-      this.dom.tag.style.setProperty('pointer-events', isVisible ? 'auto' : 'none');
+      var isVisible = Boolean((_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.isActive) || this.revealSources.size > 0;
+      this.isVisible = isVisible;
+      setRevealed(this.dom.tag, isVisible);
     }
 
     /**
-     * The full label is always the tooltip, whether or not the name it draws is clipped: the tag is
-     * never wider than the highlight, so a name that fits at one width is ellipsised at the next, and
-     * a connected pair spells out a contributor the tag does not show at any width.
+     * The full label is always the tooltip, whether or not the name it draws is clipped: a name longer
+     * than `MAX_TAG_WIDTH` is ellipsised, and a connected pair spells out a contributor the tag does
+     * not show at any width.
      *
      * `VanillaTooltip` has no "set new content" call, so it is rebuilt when the label changes — the
      * shape of `syncVanillaDisabledTooltip` in `mentionNodeView`.
@@ -372,9 +450,9 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
     }
 
     /**
-     * Observes the highlight this tag describes, for what CSS here cannot see: its hover state (the
+     * 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
-     * imperatively via `data-diff-id`) and the width the tag is clamped to.
+     * imperatively via `data-diff-id`.
      *
      * Deliberately not routed through plugin state: a transaction per pointer move would re-run the
      * memoised decoration calculation.
@@ -394,8 +472,8 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       this.boundSelector = selector;
       this.unbindHighlightState();
 
-      // ProseMirror draws the tag's host in the same pass as the highlights the tag measures, so
-      // those may not be in the document yet. A microtask lands once that pass has finished.
+      // ProseMirror draws the tag's host in the same pass as the highlights it binds to, so those may
+      // not be in the document yet. A microtask lands once that pass has finished.
       var pendingBind = ++this.bindToken;
       queueMicrotask(function () {
         if (!_this5.isDestroyed && pendingBind === _this5.bindToken) {
@@ -406,91 +484,32 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
   }, {
     key: "bindHighlightState",
     value: function bindHighlightState(selector) {
-      var _this6 = this;
-      // Both queries are scoped to this editor's content root, so a tag can only ever bind to the
-      // decorations its own plugin instance rendered — another editor on the page, or one nested
-      // inside this one, cannot supply the geometry.
-      var editorRoot = this.options.getEditorRoot();
-      var highlights = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.querySelectorAll(selector);
-      if (!editorRoot || !(highlights !== null && highlights !== void 0 && highlights.length)) {
+      var _this$options$getEdit,
+        _this6 = this;
+      // Scoped to this editor's content root, so a tag can only ever bind to the decorations its own
+      // plugin instance rendered — another editor on the page, or one nested inside this one, cannot
+      // reveal this tag.
+      var highlights = (_this$options$getEdit = this.options.getEditorRoot()) === null || _this$options$getEdit === void 0 ? void 0 : _this$options$getEdit.querySelectorAll(selector);
+      if (!(highlights !== null && highlights !== void 0 && highlights.length)) {
         return;
       }
 
-      // The width comes from this tag's OWN decoration; sibling halves of the change are here for
-      // hover only.
-      var ownElements = Array.from(editorRoot.querySelectorAll("[data-diff-id=\"".concat(this.options.diffId, "\"]")));
-      var measure = function measure() {
-        var _findChangeStartLine;
-        // Counted by distinct line box, not by client rect: an inline node inside the change (a
-        // mention, emoji, date) splits the highlight into several rects on the same line, and
-        // treating that as a wrap would drop the width clamp on changes that never wrapped.
-        var lineTops = new Set();
-        for (var _i = 0, _ownElements = ownElements; _i < _ownElements.length; _i++) {
-          var highlight = _ownElements[_i];
-          var _iterator3 = _createForOfIteratorHelper(highlight.getClientRects()),
-            _step3;
-          try {
-            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-              var rect = _step3.value;
-              lineTops.add(Math.round(rect.top));
-            }
-          } catch (err) {
-            _iterator3.e(err);
-          } finally {
-            _iterator3.f();
-          }
-        }
-
-        // A wrapped change's first line says nothing useful about how wide the tag may be.
-        _this6.maxWidthPx = lineTops.size > 1 ? undefined : (_findChangeStartLine = findChangeStartLine(ownElements)) === null || _findChangeStartLine === void 0 ? void 0 : _findChangeStartLine.width;
-        _this6.applyStyles();
-      };
-      measure();
-
-      // An inline element cannot be observed itself (ResizeObserver skips boxes with no principal
-      // box), so the block it sits in is observed instead.
-      this.resizeObserver = new ResizeObserver(measure);
-      var _iterator4 = _createForOfIteratorHelper(new Set(ownElements.map(function (_ref7) {
-          var parentElement = _ref7.parentElement;
-          return parentElement;
-        }))),
-        _step4;
-      try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var parent = _step4.value;
-          if (parent) {
-            this.resizeObserver.observe(parent);
-          }
-        }
-
-        // `bindAll` takes a single target, and a change can render more than one highlight.
-      } catch (err) {
-        _iterator4.e(err);
-      } finally {
-        _iterator4.f();
-      }
+      // `bindAll` takes a single target, and a change can render more than one highlight. Each is its
+      // own member of `revealSources`, so the pointer can cross between them without the set
+      // emptying.
       this.unbindHighlights = Array.from(highlights).map(function (highlight) {
         return (0, _bindEventListener.bindAll)(highlight, [{
           type: 'mouseenter',
-          listener: function listener() {
-            _this6.isHighlightHovered = true;
-            _this6.applyStyles();
-          }
+          listener: _this6.trackRevealSource(highlight, true)
         }, {
           type: 'mouseleave',
-          listener: function listener() {
-            _this6.isHighlightHovered = false;
-            _this6.applyStyles();
-          }
+          listener: _this6.trackRevealSource(highlight, false)
         }]);
       });
     }
   }, {
     key: "unbindHighlightState",
     value: function unbindHighlightState() {
-      var _this$resizeObserver;
-      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
-      this.resizeObserver = undefined;
       this.unbindHighlights.forEach(function (unbind) {
         return unbind();
       });

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

@@ -6,7 +6,7 @@ import { Mapping } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
 import { createDocMarginAnchorWidget } from '../decorations/createAnchorDecorationWidgets';
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
@@ -482,8 +482,9 @@ const calculateDiffDecorationsInner = ({
       // gets highlighted, and structural gaps never do.
       const isSmartNodeLevel = diffType === 'smart' && fg('platform_editor_ai_smart_diff') && smartChangeLevel(change) === 'node';
       // For a large inserted table, skip the per-cell inline decorations that
-      // freeze the browser on re-render. Only active in the AIFC experience.
-      const useCoarseTableDecoration = isSmartNodeLevel && expValEquals('platform_editor_ai_new_aifc_editor_experience', 'isBackendReviewMomentEnabled', true) && isLargeInsertedTableRange(tr.doc, change.fromB, change.toB);
+      // freeze the browser on re-render. Only active when Review moment is
+      // eligible (xstate + M1).
+      const useCoarseTableDecoration = isSmartNodeLevel && expValEqualsNoExposure('platform_editor_ai_xstate_migration', 'isEnabled', true) && UNSAFE_expValNoExposure('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true && isLargeInsertedTableRange(tr.doc, change.fromB, change.toB);
       // Whether the deleted-content widget will actually be rendered for this
       // change. Used to decide if indicator anchor positions should be adjusted
       // inward — when the widget is present the anchor must stay at the block
@@ -670,7 +671,7 @@ const calculateDiffDecorationsInner = ({
       }));
       // 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.
-      const isSmartNodeLevelAttrChange = diffType === 'smart' && fg('platform_editor_ai_smart_diff') && expValEquals('platform_editor_ai_new_aifc_editor_experience', 'isEnabled', true);
+      const isSmartNodeLevelAttrChange = diffType === 'smart' && fg('platform_editor_ai_smart_diff') && expValEqualsNoExposure('platform_editor_ai_xstate_migration', 'isEnabled', true) && UNSAFE_expValNoExposure('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true;
       if (isSmartNodeLevelAttrChange && change.fromA !== undefined && change.toA !== undefined) {
         const placeBelow = deletedDiffPlacement === 'bottom';
         decorations.push(...createNodeChangedDecorationWidget({

package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js

@@ -62,6 +62,18 @@ const bgSubtlerPressedMap = {
   gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)",
   lime: "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)"
 };
+const bgBolderMap = {
+  green: "var(--ds-background-accent-green-bolder, #1F845A)",
+  teal: "var(--ds-background-accent-teal-bolder, #227D9B)",
+  blue: "var(--ds-background-accent-blue-bolder, #1868DB)",
+  purple: "var(--ds-background-accent-purple-bolder, #964AC0)",
+  red: "var(--ds-background-accent-red-bolder, #C9372C)",
+  orange: "var(--ds-background-accent-orange-bolder, #BD5B00)",
+  yellow: "var(--ds-background-accent-yellow-bolder, #946F00)",
+  magenta: "var(--ds-background-accent-magenta-bolder, #AE4787)",
+  gray: "var(--ds-background-accent-gray-bolder, #6B6E76)",
+  lime: "var(--ds-background-accent-lime-bolder, #5B7F24)"
+};
 const borderAccentMap = {
   green: "var(--ds-border-accent-green, #22A06B)",
   teal: "var(--ds-border-accent-teal, #2898BD)",
@@ -95,6 +107,9 @@ function bgSubtlestPressed(color) {
 function bgSubtler(color) {
   return bgSubtlerMap[color];
 }
+function bgBolder(color) {
+  return bgBolderMap[color];
+}
 function bgSubtlerPressed(color) {
   return bgSubtlerPressedMap[color];
 }
@@ -105,12 +120,18 @@ function textAccent(color) {
   return textAccentMap[color];
 }
 
-/** Presentation tokens for one diff colour, shared by highlights and contributor tags. */
+/**
+ * Presentation tokens for a contributor tag in one diff colour.
+ *
+ * A `bolder` fill rather than the `subtlest` tint the highlight uses: the tag is a label on the
+ * change, and at tag size a tint reads as a second, weaker highlight sitting above the real one.
+ * `inverse` is the only text tone that reads on a bolder fill, and it needs no per-colour map —
+ * which is also why the tag carries no border: the fill alone bounds it.
+ */
 export function getAccentTokens(color) {
   return {
-    background: bgSubtlest(color),
-    border: borderAccent(color),
-    text: textAccent(color)
+    background: bgBolder(color),
+    text: "var(--ds-text-inverse, #FFFFFF)"
   };
 }
 

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

@@ -1,6 +1,7 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { CONTRIBUTOR_TAG_Z_INDEX } from '../../ui/ContributorTag/buildContributorTagDom';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { hasVisibleContent } from '../utils/hasVisibleContent';
 import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
@@ -13,6 +14,25 @@ import { REVEAL_ATTR, resolveRevealStyle } from './revealStyles';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+
+/**
+ * Stacks the change's highlight below its contributor tag, so no highlight can slice through a tag:
+ * a tag overlays the line *above* its own change, and a highlight already on that line — the tail of
+ * this change, or another change entirely — would otherwise paint straight over it.
+ *
+ * The tag still reads as attached to the change rather than laid on top of it, because it cannot
+ * paint over this highlight at all: its bottom edge is pinned to the highlight's top edge and
+ * clipped there. See `CONTRIBUTOR_TAG_Z_INDEX`.
+ *
+ * prosemirror-view places the tag's host widget as a *sibling* of this decoration's span, so
+ * painting order is decided by stacking level — and the host is absolutely positioned at
+ * `CONTRIBUTOR_TAG_Z_INDEX`. `position: relative` is what makes `z-index` apply to an otherwise
+ * static inline box; it adds no offset.
+ */
+const stackBelowContributorTagStyle = convertToInlineCss({
+  position: 'relative',
+  zIndex: CONTRIBUTOR_TAG_Z_INDEX - 1
+});
 const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 
 /**
@@ -158,8 +178,23 @@ export const createInlineChangedDecoration = ({
   });
   const isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
   const atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
+
+  // Built from the raw change range, not the indicator anchors resolved below: a tag lines up with
+  // the changed text, while the bar's anchors are held on a block boundary when a deleted widget
+  // renders beside them.
+  //
+  // Built up here, ahead of where it is pushed, so the highlight's stacking below keys off whether a
+  // tag exists rather than re-deriving the condition and risking disagreement.
+  const tagWidget = canTagChange && doc ? createContributorTagWidget({
+    doc,
+    from: change.fromB,
+    to: change.toB,
+    diffId,
+    mountContext: tagMountContext
+  }) : undefined;
+  const inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined].filter(Boolean).join('');
   const decorations = [Decoration.inline(change.fromB, change.toB, {
-    style: atomicInlineAttrs ? `${style}${atomicInlineAttrs.styleSuffix}` : style,
+    style: inlineStyle,
     ...(atomicInlineAttrs && {
       class: atomicInlineAttrs.className
     }),
@@ -215,19 +250,10 @@ export const createInlineChangedDecoration = ({
     }));
   }
 
-  // Built from the raw change range, not the anchors above: a tag lines up with the changed text,
-  // while the bar's anchors are held on a block boundary when a deleted widget renders beside them.
-  if (canTagChange && doc) {
-    const tagWidget = createContributorTagWidget({
-      doc,
-      from: change.fromB,
-      to: change.toB,
-      diffId,
-      mountContext: tagMountContext
-    });
-    if (tagWidget) {
-      decorations.push(tagWidget);
-    }
+  // Pushed after the indicator anchors so the decoration order is unchanged — see `tagWidget` above
+  // for why it is built before them.
+  if (tagWidget) {
+    decorations.push(tagWidget);
   }
   return decorations;
 };

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

@@ -2,6 +2,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
 import { applyRevealToElement } from '../revealStyles';
@@ -276,6 +277,16 @@ const applyInlineLeafNodeStyles = ({
     });
   });
 };
+
+/**
+ * Editor CSS makes `blockquote` `inline-block` for its block formatting context. Inside a widget
+ * that collapses the indicator bar: the container is an inline `span`, so its anchor rect comes from
+ * font metrics, not from an inline-level child. `flow-root` keeps the formatting context but is
+ * block-level — unlike `block`, which lets the child paragraph's top margin collapse out.
+ */
+const quoteBlockLevelStyle = convertToInlineCss({
+  display: 'flow-root'
+});
 const applyTextLikeBlockNodeStyles = ({
   element,
   targetNode,
@@ -533,6 +544,9 @@ export const wrapBlockNodeView = ({
           hideAddedDiffsUnderline,
           highlightInlineLeafNodes
         });
+        if (targetNode.type.name === 'blockquote' && fg('platform_editor_ai_show_diff_patch_1')) {
+          appendStyleToElement(nodeView, quoteBlockLevelStyle);
+        }
         dom.append(nodeView);
         return;
       }