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

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

@@ -0,0 +1,500 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContributorTagController = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bindEventListener = require("bind-event-listener");
+var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
+var _factory = require("../../pm-plugins/decorations/colorSchemes/factory");
+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();
+  if (name) {
+    return name;
+  }
+
+  // `agentKind` defaults to `'external'` per the plugin type contract; an unidentified external
+  // agent falls back to a generic label rather than rendering a nameless tag.
+  if (contributor.kind === 'agent' && ((_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external') === 'external') {
+    return formatMessage(_messages.contributorTagMessages.externalAgentName);
+  }
+  return '';
+};
+
+/**
+ * Resolves the tag's accent from the same scheme value and token maps the highlight used, so the
+ * two can never drift.
+ */
+var getTagAccent = function getTagAccent(_ref) {
+  var colorScheme = _ref.colorScheme,
+    isActive = _ref.isActive,
+    isInserted = _ref.isInserted;
+  var colors = _schemes.colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
+  var accent = isInserted ? isActive ? colors.insertActiveColor : colors.insertColor : isActive ? colors.deleteActiveColor : colors.deleteColor;
+  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();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return start;
+};
+
+/** The contributors a tag draws, keyed so a republished model can be recognised as the same pair. */
+var identityOf = function identityOf(model) {
+  return [model === null || model === void 0 ? void 0 : model.contributor, model === null || model === void 0 ? void 0 : model.connectedContributor].map(function (contributor) {
+    var _contributor$agentKin2, _contributor$avatarUr;
+    return contributor ? "".concat(contributor.kind, ":").concat((_contributor$agentKin2 = contributor.agentKind) !== null && _contributor$agentKin2 !== void 0 ? _contributor$agentKin2 : '', ":").concat(contributor.name, ":").concat((_contributor$avatarUr = contributor.avatarUrl) !== null && _contributor$avatarUr !== void 0 ? _contributor$avatarUr : '') : '';
+  }).join('|');
+};
+
+/**
+ * A small tag naming who made one diff, drawn into the host element its decoration places on the
+ * change's first character and positioned above it.
+ *
+ * The model is resolved from plugin state here rather than passed in, because ProseMirror skips
+ * `toDOM` for a widget it reuses: stepping to the next change republishes the tags without redrawing
+ * their hosts, so anything the tag reacts to — `isActive` above all — has to arrive through a
+ * subscription of its own (EDITOR-8702). Draws nothing when this diff has no tag, which is the case
+ * for the deleted half of a replacement: that half is folded into the inline tag.
+ */
+var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/function () {
+  function ContributorTagController(options) {
+    (0, _classCallCheck2.default)(this, ContributorTagController);
+    (0, _defineProperty2.default)(this, "avatars", []);
+    /** Guards a deferred bind that a later model change has already superseded. */
+    (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);
+    (0, _defineProperty2.default)(this, "unbindHighlights", []);
+    this.options = options;
+  }
+  return (0, _createClass2.default)(ContributorTagController, [{
+    key: "mount",
+    value: function mount(host) {
+      var _this$options$api$sho,
+        _this$options$api,
+        _this = this,
+        _sharedState$currentS;
+      this.host = host;
+      var _ref2 = (_this$options$api$sho = (_this$options$api = this.options.api) === null || _this$options$api === void 0 ? void 0 : _this$options$api.showDiff) !== null && _this$options$api$sho !== void 0 ? _this$options$api$sho : {},
+        sharedState = _ref2.sharedState;
+      this.unsubscribe = sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(function (_ref3) {
+        var nextSharedState = _ref3.nextSharedState;
+        _this.applyModel(_this.findModel(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.contributorTags));
+      });
+      this.applyModel(this.findModel(sharedState === null || sharedState === void 0 || (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.contributorTags));
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribe;
+      this.isDestroyed = true;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+      this.unsubscribe = undefined;
+      this.teardownTag();
+      this.host = undefined;
+    }
+  }, {
+    key: "findModel",
+    value: function findModel(tags) {
+      var _this2 = this;
+      return tags === null || tags === void 0 ? void 0 : tags.find(function (tag) {
+        return tag.diffId === _this2.options.diffId;
+      });
+    }
+  }, {
+    key: "applyModel",
+    value: function applyModel(next) {
+      if (this.isDestroyed || next === this.model) {
+        return;
+      }
+      var previous = this.model;
+      this.model = next;
+      var host = this.host;
+      if (!next || !host) {
+        this.teardownTag();
+        return;
+      }
+      if (!this.dom) {
+        this.dom = (0, _buildContributorTagDom.buildContributorTagDom)(host.ownerDocument);
+        this.bindTag(this.dom);
+        host.appendChild(this.dom.root);
+      }
+      if (!previous || identityOf(previous) !== identityOf(next)) {
+        this.renderAvatars(next);
+      }
+      this.renderLabels(next);
+      this.applyAccent(next);
+      this.syncHighlightBindings(next);
+      this.applyStyles();
+      this.syncTooltip();
+    }
+
+    /** Takes the tag's DOM down, keeping the subscription so a republished model redraws it. */
+  }, {
+    key: "teardownTag",
+    value: function teardownTag() {
+      var _this$unbindTag, _this$tooltip, _this$dom;
+      this.unbindHighlightState();
+      this.boundSelector = undefined;
+      (_this$unbindTag = this.unbindTag) === null || _this$unbindTag === void 0 || _this$unbindTag.call(this);
+      this.unbindTag = undefined;
+      (_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();
+      });
+      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;
+    }
+  }, {
+    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();
+        };
+      };
+      this.unbindTag = (0, _bindEventListener.bindAll)(tag, [{
+        type: 'mouseover',
+        listener: setHoveredOrFocused(true)
+      }, {
+        type: 'mouseout',
+        listener: setHoveredOrFocused(false)
+      }, {
+        type: 'focus',
+        listener: setHoveredOrFocused(true)
+      }, {
+        type: 'blur',
+        listener: setHoveredOrFocused(false)
+      }]);
+    }
+  }, {
+    key: "renderAvatars",
+    value: function renderAvatars(model) {
+      var _this$dom2,
+        _this4 = this;
+      var _ref5 = (_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 ? _this$dom2 : {},
+        container = _ref5.avatars;
+      if (!container) {
+        return;
+      }
+      this.avatars.forEach(function (avatar) {
+        return avatar.destroy();
+      });
+      this.avatars = [];
+      var doc = container.ownerDocument;
+      var _this$accentOf = this.accentOf(model),
+        background = _this$accentOf.background;
+      var isPrimaryAgent = model.contributor.kind === 'agent';
+      // Resolved by `kind` so a reverse `connectedTo` (an attributed user pointing at its agent)
+      // renders identically.
+      var user = isPrimaryAgent ? model.connectedContributor : model.contributor;
+      var agent = isPrimaryAgent ? model.contributor : model.connectedContributor;
+
+      // Hand-rolled avatar stack: `@atlaskit/avatar-group` cannot render below 24px and the tag uses
+      // 16px avatars.
+      var stack = model.connectedContributor ? [].concat((0, _toConsumableArray2.default)(user ? [{
+        contributor: user,
+        stackIndex: 1
+      }] : []), (0, _toConsumableArray2.default)(agent ? [{
+        contributor: agent,
+        stackIndex: 0
+      }] : [])) : [{
+        contributor: model.contributor
+      }];
+      stack.forEach(function (_ref6, index) {
+        var contributor = _ref6.contributor,
+          stackIndex = _ref6.stackIndex;
+        var avatar = (0, _contributorAvatarRenderer.contributorAvatarRenderer)({
+          contributor: contributor,
+          doc: doc,
+          ringColor: background,
+          stackIndex: stackIndex
+        });
+        if (index < stack.length - 1) {
+          // Overlaps the leading avatar of a connected pair onto the one it sits in front of.
+          avatar.element.style.setProperty('margin-inline-end', "var(--ds-space-negative-050, -4px)");
+        }
+        container.appendChild(avatar.element);
+        _this4.avatars.push(avatar);
+      });
+    }
+  }, {
+    key: "renderLabels",
+    value: function renderLabels(model) {
+      if (!this.dom) {
+        return;
+      }
+      var _this$options$getIntl = this.options.getIntl(),
+        formatMessage = _this$options$getIntl.formatMessage;
+      var isPrimaryAgent = model.contributor.kind === 'agent';
+      var primaryName = getContributorName(model.contributor, formatMessage);
+      var secondaryName = model.connectedContributor ? getContributorName(model.connectedContributor, formatMessage) : '';
+      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.
+      this.dom.name.textContent = model.connectedContributor ? agentName || primaryName : primaryName;
+      this.fullLabel = model.connectedContributor ? formatMessage(_messages.contributorTagMessages.changedByConnected, {
+        agentName: agentName,
+        userName: userName
+      }) : formatMessage(_messages.contributorTagMessages.changedBy, {
+        name: primaryName
+      });
+      this.dom.srLabel.textContent = this.fullLabel;
+    }
+  }, {
+    key: "accentOf",
+    value: function accentOf(model) {
+      var _model$isInserted;
+      return getTagAccent({
+        colorScheme: model.colorScheme,
+        isActive: Boolean(model.isActive),
+        isInserted: (_model$isInserted = model.isInserted) !== null && _model$isInserted !== void 0 ? _model$isInserted : true
+      });
+    }
+  }, {
+    key: "applyAccent",
+    value: function applyAccent(model) {
+      if (!this.dom) {
+        return;
+      }
+      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. */
+  }, {
+    key: "applyStyles",
+    value: function applyStyles() {
+      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');
+    }
+
+    /**
+     * 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.
+     *
+     * `VanillaTooltip` has no "set new content" call, so it is rebuilt when the label changes — the
+     * shape of `syncVanillaDisabledTooltip` in `mentionNodeView`.
+     */
+  }, {
+    key: "syncTooltip",
+    value: function syncTooltip() {
+      var _this$tooltip2;
+      var content = this.dom ? this.fullLabel : undefined;
+      if (content === this.tooltipContent) {
+        return;
+      }
+      (_this$tooltip2 = this.tooltip) === null || _this$tooltip2 === void 0 || _this$tooltip2.destroy();
+      this.tooltip = undefined;
+      this.tooltipContent = content;
+      if (!content || !this.dom) {
+        return;
+      }
+      this.tooltip = new _vanillaTooltip.VanillaTooltip(this.dom.tag, content, undefined,
+      // `ak-editor-vanilla-tooltip-default` opts into the shared `VanillaTooltip` look, defined as
+      // `vanillaTooltipDefaultStyles` in both EditorContentContainer stylesheets — keep in sync when
+      // renaming. Those styles are scoped under `.ProseMirror`, and the tag renders inside it.
+      'ak-editor-vanilla-tooltip-default');
+      // `VanillaTooltip` sets `aria-describedby` on its trigger, which would announce the label a
+      // second time — the visually hidden child already announces it, after the change as design
+      // requires.
+      this.dom.tag.removeAttribute('aria-describedby');
+    }
+
+    /**
+     * 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.
+     *
+     * Deliberately not routed through plugin state: a transaction per pointer move would re-run the
+     * memoised decoration calculation.
+     */
+  }, {
+    key: "syncHighlightBindings",
+    value: function syncHighlightBindings(model) {
+      var _model$linkedDiffIds,
+        _this5 = this;
+      var diffId = this.options.diffId;
+      var selector = [diffId].concat((0, _toConsumableArray2.default)((_model$linkedDiffIds = model.linkedDiffIds) !== null && _model$linkedDiffIds !== void 0 ? _model$linkedDiffIds : [])).map(function (id) {
+        return "[data-diff-id=\"".concat(id, "\"]");
+      }).join(', ');
+      if (selector === this.boundSelector) {
+        return;
+      }
+      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.
+      var pendingBind = ++this.bindToken;
+      queueMicrotask(function () {
+        if (!_this5.isDestroyed && pendingBind === _this5.bindToken) {
+          _this5.bindHighlightState(selector);
+        }
+      });
+    }
+  }, {
+    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)) {
+        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();
+      }
+      this.unbindHighlights = Array.from(highlights).map(function (highlight) {
+        return (0, _bindEventListener.bindAll)(highlight, [{
+          type: 'mouseenter',
+          listener: function listener() {
+            _this6.isHighlightHovered = true;
+            _this6.applyStyles();
+          }
+        }, {
+          type: 'mouseleave',
+          listener: function listener() {
+            _this6.isHighlightHovered = false;
+            _this6.applyStyles();
+          }
+        }]);
+      });
+    }
+  }, {
+    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();
+      });
+      this.unbindHighlights = [];
+    }
+  }]);
+}();

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContributorTagIcon = void 0;
+/**
+ * The icons a contributor tag can draw, as inline SVG.
+ *
+ * Neither `@atlaskit/icon`, `@atlaskit/icon-lab` nor `@atlaskit/logo` exposes a raw-SVG entry
+ * point, so the markup is copied here rather than kept as a React island for three glyphs. Keep in
+ * sync with the sources named on each constant.
+ *
+ * The Rovo hex is the `brand` appearance, whose `--rovo-*-color` variables resolve to `initial` in
+ * both themes — the fallbacks below are the rendered colours, so no theme observer is needed.
+ */
+
+/** `@atlaskit/icon/core/person`, at the 16px the avatar renders it. */
+var PERSON_ICON_SVG = "<svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 16 16\" role=\"presentation\" style=\"display:block\"><path fill=\"currentcolor\" fill-rule=\"evenodd\" d=\"M8 1.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0m-2 9a3.75 3.75 0 0 1 3.75-3.75h4.5A3.75 3.75 0 0 1 14 13v2h-1.5v-2a2.25 2.25 0 0 0-2.25-2.25h-4.5A2.25 2.25 0 0 0 3.5 13v2H2z\" clip-rule=\"evenodd\"/></svg>";
+
+/** `@atlaskit/icon-lab/core/ai-bot`, at 12px so it fits inside the 16px hexagon. */
+var AI_BOT_ICON_SVG = "<svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 16 16\" role=\"presentation\" style=\"display:block\"><path fill=\"currentcolor\" d=\"M13 5.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V13a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5zm-6.5 2v3H5v-3zm4.5 0v3H9.5v-3zm3.5 1H16V10h-1.5v3a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-3H0V8.5h1.5v-3a2 2 0 0 1 2-2h3.75v-2H4V0h4a.75.75 0 0 1 .75.75V3.5h3.75a2 2 0 0 1 2 2z\"/></svg>";
+
+/** `RovoHexIcon` from `@atlaskit/logo/rovo-hex/icon`, at the 16px `xxsmall` renders. */
+var ROVO_HEX_ICON_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" role=\"presentation\" style=\"display:block\"><path fill=\"#1868db\" fill-rule=\"evenodd\" d=\"m13.227 16.789-7.154 4.169-3.403-1.96a2.72 2.72 0 0 1-1.362-2.355V7.366c0-.973.518-1.87 1.361-2.354l6.044-3.487-.038.114a3.6 3.6 0 0 0-.172 1.088v9.278c0 1.274.68 2.45 1.786 3.085z\" clip-rule=\"evenodd\"/><path fill=\"#6a9a23\" fill-rule=\"evenodd\" d=\"m11.296 15.671-7.193 4.153 6.607 3.812a2.73 2.73 0 0 0 2.676.026l.048-.033a2.73 2.73 0 0 0 1.232-1.525 2.7 2.7 0 0 0 .127-.822v-3.594z\" clip-rule=\"evenodd\"/><path fill=\"#af59e1\" fill-rule=\"evenodd\" d=\"m21.477 5.003-4.404-2.539-5.904 4.89 2.69 1.556a3.56 3.56 0 0 1 1.785 3.086v9.277a3.6 3.6 0 0 1-.21 1.202l6.044-3.486a2.71 2.71 0 0 0 1.362-2.355V7.357c0-.97-.521-1.87-1.363-2.354\" clip-rule=\"evenodd\"/><path fill=\"#fca700\" fill-rule=\"evenodd\" d=\"M12.74 8.266 9.353 6.312V2.718c0-.283.044-.56.127-.821A2.73 2.73 0 0 1 10.71.372V.37a.4.4 0 0 0 .048-.033 2.73 2.73 0 0 1 2.676.026l6.499 3.75z\" clip-rule=\"evenodd\"/></svg>";
+var markup = {
+  aiBot: AI_BOT_ICON_SVG,
+  person: PERSON_ICON_SVG,
+  rovoHex: ROVO_HEX_ICON_SVG
+};
+
+/**
+ * Parsing the markup is the same work for every tag, so each icon is parsed once into a template
+ * and cloned per use — appending a `DocumentFragment` moves its children out of it, so a shared
+ * fragment would leave every icon after the first empty.
+ */
+var templates = {};
+var getContributorTagIcon = exports.getContributorTagIcon = function getContributorTagIcon(icon, doc) {
+  var template = templates[icon];
+  if (!template) {
+    template = doc.createElement('template');
+    template.innerHTML = markup[icon];
+    templates[icon] = template;
+  }
+  return template.content.cloneNode(true);
+};

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

@@ -1,7 +1,6 @@
 import isEqual from 'lodash/isEqual';
 import memoizeOne from 'memoize-one';
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
-import { isExperimentEnabled } from '@atlaskit/editor-common/deprecated-platform-feature-experiments';
 import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
 import { Mapping } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -576,22 +575,21 @@ const calculateDiffDecorationsInner = ({
     if (change.isInline) {
       // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       const isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
-      const isAtomicInlineNodeFlag = isExperimentEnabled('platform_editor_improve_inline_diffs', () => expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true));
       decorations.push(...createInlineChangedDecoration({
         change,
         colorScheme,
         isActive,
         isInserted: true,
-        isAtomicInlineNode: isAtomicInlineNodeFlag,
+        isAtomicInlineNode: true,
         inlineNodeName: change.inlineNodeName,
         // Suppress the border-bottom underline for atomic inline nodeviews —
         // it doesn't render on custom nodeview DOM elements and is unnecessary noise.
-        hideAddedDiffsUnderline: isAtomicInlineNodeFlag,
+        hideAddedDiffsUnderline: true,
         diffType
       }));
       // If we have the original node position, also render the old node as a "deleted" widget
       // so the user can see what it looked like before the change.
-      if (change.fromA !== undefined && change.toA !== undefined && isExperimentEnabled('platform_editor_improve_inline_diffs', () => expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true))) {
+      if (change.fromA !== undefined && change.toA !== undefined) {
         decorations.push(...createNodeChangedDecorationWidget({
           change: {
             fromA: change.fromA,

package/dist/es2019/pm-plugins/calculateDiff/smart/classifySmartChanges.js

@@ -193,7 +193,6 @@ const TEXT_BLOCK_TYPES = new Set(['paragraph', 'heading']);
  *   layoutColumn → layoutSection, tableCell/tableHeader → tableRow → table.
  */
 const RIGID_CHILD_TYPES = new Set(['layoutColumn', 'tableCell', 'tableHeader']);
-const TABLE_TYPE = 'table';
 
 /**
  * Emit a single whole-block (node-level) change covering both sides of a group. Used for
@@ -466,7 +465,7 @@ const classifyContainer = (blockA, blockB, changes, originalDoc, newDoc, locale,
   const typeName = blockB.node.type.name;
 
   // Tables need cell-level counting across rows; handle them specially.
-  if (typeName === TABLE_TYPE) {
+  if (typeName === 'table') {
     return classifyTable(blockA, blockB, changes, originalDoc, newDoc, locale, thresholds);
   }
 

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

@@ -7,6 +7,19 @@ import { PARTICIPANT_COLOR_SCHEMES } from './types';
 
 /** Contributors addressed by attribution key. The key format is internal. */
 
+/** Maps the shared 18-slot telepointer palette onto the ten bolder diff colours. */
+const HASHED_PARTICIPANT_COLOR_SCHEMES = [...PARTICIPANT_COLOR_SCHEMES, 'blue', 'red', 'orange', 'yellow', 'green', 'teal', 'purple', 'magenta'];
+const getAvailableColor = (hashedColor, allocatedColors) => {
+  const startIndex = PARTICIPANT_COLOR_SCHEMES.indexOf(hashedColor);
+  for (let offset = 0; offset < PARTICIPANT_COLOR_SCHEMES.length; offset++) {
+    const color = PARTICIPANT_COLOR_SCHEMES[(startIndex + offset) % PARTICIPANT_COLOR_SCHEMES.length];
+    if (color && !allocatedColors.has(color)) {
+      return color;
+    }
+  }
+  return hashedColor;
+};
+
 /**
  * Normalise the attribution identity once so a valid lookup key always has a valid participant
  * colour seed. `userId` is primary; `agentId`, or `agentType` as its fallback, separates shared
@@ -89,6 +102,7 @@ export const isAttributionColoringEnabled = stepAttributions => {
 export const isContributorTagsEnabled = (stepAttributions, contributors) => areAttributionColorGatesEnabled() && Boolean(stepAttributions === null || stepAttributions === void 0 ? void 0 : stepAttributions.some(attribution => getAttributionKey(attribution) !== undefined)) && contributors !== undefined && Object.keys(contributors).length > 0;
 export const createAttributionColorMap = stepAttributions => {
   const colors = new Map();
+  const allocatedColors = new Set();
   for (const attribution of stepAttributions) {
     const identity = getAttributionIdentity(attribution);
     if (!identity || colors.has(identity.key)) {
@@ -97,10 +111,13 @@ export const createAttributionColorMap = stepAttributions => {
     const {
       index
     } = getParticipantColor(identity.colorSeed);
-    const participantColorScheme = PARTICIPANT_COLOR_SCHEMES[index];
-    if (participantColorScheme) {
-      colors.set(identity.key, participantColorScheme);
+    const hashedColor = HASHED_PARTICIPANT_COLOR_SCHEMES[index];
+    if (!hashedColor) {
+      continue;
     }
+    const participantColorScheme = getAvailableColor(hashedColor, allocatedColors);
+    colors.set(identity.key, participantColorScheme);
+    allocatedColors.add(participantColorScheme);
   }
   return colors;
 };