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

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

@@ -2,14 +2,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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; }
-import { bindAll } from 'bind-event-listener';
+import { bind, bindAll } from 'bind-event-listener';
 import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
-import { buildContributorTagDom, MIN_TAG_WIDTH } from './buildContributorTagDom';
+import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
 import { contributorTagMessages } from './messages';
 var getContributorName = function getContributorName(contributor, formatMessage) {
@@ -28,8 +25,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,
@@ -40,35 +37,70 @@ var getTagAccent = function getTagAccent(_ref) {
   return 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(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 = 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, TAG_EXIT_FALLBACK_MS);
 };
 
 /** The contributors a tag draws, keyed so a republished model can be recognised as the same pair. */
@@ -97,8 +129,18 @@ export var ContributorTagController = /*#__PURE__*/function () {
     _defineProperty(this, "bindToken", 0);
     _defineProperty(this, "fullLabel", '');
     _defineProperty(this, "isDestroyed", false);
-    _defineProperty(this, "isHighlightHovered", false);
-    _defineProperty(this, "isHoveredOrFocused", false);
+    /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
+    _defineProperty(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.
+     */
+    _defineProperty(this, "revealSources", new Set());
     _defineProperty(this, "unbindHighlights", []);
     this.options = options;
   }
@@ -160,65 +202,101 @@ export var ContributorTagController = /*#__PURE__*/function () {
       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 = 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;
@@ -278,8 +356,8 @@ export var ContributorTagController = /*#__PURE__*/function () {
       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(contributorTagMessages.changedByConnected, {
         agentName: agentName,
@@ -307,34 +385,34 @@ export var ContributorTagController = /*#__PURE__*/function () {
       }
       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(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`.
@@ -365,9 +443,9 @@ export var ContributorTagController = /*#__PURE__*/function () {
     }
 
     /**
-     * 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.
@@ -387,8 +465,8 @@ export var ContributorTagController = /*#__PURE__*/function () {
       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) {
@@ -399,91 +477,32 @@ export var ContributorTagController = /*#__PURE__*/function () {
   }, {
     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 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/types/pm-plugins/decorations/colorSchemes/factory.d.ts

@@ -1,8 +1,14 @@
 import type { AdsAccentColor, DiffColorScheme } from './types';
-/** 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 declare function getAccentTokens(color: AdsAccentColor): {
     background: string;
-    border: string;
     text: string;
 };
 /** Inline inserted content — default state. */

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

@@ -1,10 +1,39 @@
 export declare const CONTRIBUTOR_TAG_TESTID = "diff-contributor-tag";
 export declare const CONTRIBUTOR_TAG_NAME_TESTID = "diff-contributor-tag-name";
 /**
- * Floor for the tag width (~one 16px avatar plus padding), so the highlight-width clamp cannot
- * collapse the box on a very short highlight.
+ * Ceiling for the tag width. A constant rather than the width of the change: a change is routinely a
+ * word or two, and clamping to it ellipsised the contributor's name — the one thing the tag exists to
+ * show. Longer names are ellipsised into the tooltip.
  */
-export declare const MIN_TAG_WIDTH = "28px";
+export declare const MAX_TAG_WIDTH = "200px";
+/**
+ * The tag sits on the line above the change, so it has to paint over that line to be readable —
+ * including any diff highlight already on it, which would otherwise slice straight through the tag.
+ * Hence one level above `akEditorUnitZIndex`, where the highlights sit; exported because the
+ * change's own highlight is stacked one level below it — see `stackBelowContributorTagStyle` in
+ * `createInlineChangedDecoration`.
+ *
+ * Painting above its own highlight is only safe because the tag can never reach it: `bottom: 100%`
+ * puts the root's bottom edge exactly on the highlight's top edge, and the root's `overflow: clip`
+ * keeps every pixel the tag paints inside it.
+ */
+export declare const CONTRIBUTOR_TAG_Z_INDEX = 2;
+/**
+ * The plugin's whole side of the tag's motion: the fade and the hidden state are
+ * `contributorTagStyles` in both EditorContentContainer stylesheets, keyed on this literal and the
+ * one below — rename in step. This package cannot import `@atlaskit/editor-core` at runtime, so the
+ * plugin emits the hook and editor-core owns the rule, as `VanillaTooltip` does with
+ * `VANILLA_TOOLTIP_DEFAULT_CLASS`.
+ */
+export declare const CONTRIBUTOR_TAG_CLASS = "ak-editor-diff-contributor-tag";
+/** Toggled by the controller to move the tag between the fade's two ends. */
+export declare const CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = "data-revealed";
+/**
+ * Backstop for removing a fading-out tag: a cancelled transition fires no `transitionend`. Must stay
+ * above the fade's 600ms, which lives in another package's stylesheet and cannot be read back as a
+ * number — hence the wide margin. Raise in step with that duration.
+ */
+export declare const TAG_EXIT_FALLBACK_MS = 1200;
 export type ContributorTagDom = {
     avatars: HTMLSpanElement;
     name: HTMLSpanElement;

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

@@ -38,11 +38,19 @@ export declare class ContributorTagController {
     private fullLabel;
     private host;
     private isDestroyed;
-    private isHighlightHovered;
-    private isHoveredOrFocused;
-    private maxWidthPx;
+    /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
+    private isVisible;
     private model;
-    private resizeObserver;
+    /**
+     * 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.
+     */
+    private revealSources;
     private tooltip;
     private tooltipContent;
     private unbindHighlights;
@@ -53,28 +61,40 @@ export declare class ContributorTagController {
     destroy(): void;
     private findModel;
     private applyModel;
-    /** 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`.
+     */
     private teardownTag;
     private bindTag;
+    /** One listener shape for every reveal source, so all of them land in the same set. */
+    private trackRevealSource;
     private renderAvatars;
     private renderLabels;
     private accentOf;
     private applyAccent;
-    /** Width clamp and visibility — the two things that are not carried by the model alone. */
-    private applyStyles;
     /**
-     * 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.
+     * 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.
+     */
+    private applyVisibility;
+    /**
+     * 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`.
      */
     private syncTooltip;
     /**
-     * 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.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "15.1.6",
+	"version": "15.1.7",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -63,7 +63,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^121.3.0",
+		"@atlaskit/editor-common": "^121.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"