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

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

@@ -0,0 +1,403 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { 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 { contributorAvatarRenderer } from './contributorAvatarRenderer';
+import { contributorTagMessages } from './messages';
+const getContributorName = (contributor, formatMessage) => {
+  var _contributor$name, _contributor$agentKin;
+  const 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(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.
+ */
+const getTagAccent = ({
+  colorScheme,
+  isActive,
+  isInserted
+}) => {
+  const colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
+  const accent = isInserted ? isActive ? colors.insertActiveColor : colors.insertColor : isActive ? colors.deleteActiveColor : colors.deleteColor;
+  return getAccentTokens(accent);
+};
+
+/** The line the change starts on: topmost of its fragments, leftmost among those. */
+const findChangeStartLine = highlights => {
+  let start;
+  for (const highlight of highlights) {
+    for (const rect of highlight.getClientRects()) {
+      if (!start || rect.top < start.top - 1 || Math.abs(rect.top - start.top) <= 1 && rect.left < start.left) {
+        start = rect;
+      }
+    }
+  }
+  return start;
+};
+
+/** The contributors a tag draws, keyed so a republished model can be recognised as the same pair. */
+const identityOf = model => [model === null || model === void 0 ? void 0 : model.contributor, model === null || model === void 0 ? void 0 : model.connectedContributor].map(contributor => {
+  var _contributor$agentKin2, _contributor$avatarUr;
+  return contributor ? `${contributor.kind}:${(_contributor$agentKin2 = contributor.agentKind) !== null && _contributor$agentKin2 !== void 0 ? _contributor$agentKin2 : ''}:${contributor.name}:${(_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.
+ */
+export class ContributorTagController {
+  constructor(options) {
+    _defineProperty(this, "avatars", []);
+    /** Guards a deferred bind that a later model change has already superseded. */
+    _defineProperty(this, "bindToken", 0);
+    _defineProperty(this, "fullLabel", '');
+    _defineProperty(this, "isDestroyed", false);
+    _defineProperty(this, "isHighlightHovered", false);
+    _defineProperty(this, "isHoveredOrFocused", false);
+    _defineProperty(this, "unbindHighlights", []);
+    this.options = options;
+  }
+  mount(host) {
+    var _this$options$api$sho, _this$options$api, _sharedState$currentS;
+    this.host = host;
+    const {
+      sharedState
+    } = (_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 : {};
+    this.unsubscribe = sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(({
+      nextSharedState
+    }) => {
+      this.applyModel(this.findModel(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.contributorTags));
+    });
+    this.applyModel(this.findModel(sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.contributorTags));
+  }
+  destroy() {
+    var _this$unsubscribe;
+    this.isDestroyed = true;
+    (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
+    this.unsubscribe = undefined;
+    this.teardownTag();
+    this.host = undefined;
+  }
+  findModel(tags) {
+    return tags === null || tags === void 0 ? void 0 : tags.find(tag => tag.diffId === this.options.diffId);
+  }
+  applyModel(next) {
+    if (this.isDestroyed || next === this.model) {
+      return;
+    }
+    const previous = this.model;
+    this.model = next;
+    const {
+      host
+    } = this;
+    if (!next || !host) {
+      this.teardownTag();
+      return;
+    }
+    if (!this.dom) {
+      this.dom = 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. */
+  teardownTag() {
+    var _this$unbindTag, _this$tooltip, _this$dom;
+    this.unbindHighlightState();
+    this.boundSelector = undefined;
+    (_this$unbindTag = this.unbindTag) === null || _this$unbindTag === void 0 ? void 0 : _this$unbindTag.call(this);
+    this.unbindTag = undefined;
+    (_this$tooltip = this.tooltip) === null || _this$tooltip === void 0 ? void 0 : _this$tooltip.destroy();
+    this.tooltip = undefined;
+    this.tooltipContent = undefined;
+    this.avatars.forEach(avatar => avatar.destroy());
+    this.avatars = [];
+    (_this$dom = this.dom) === null || _this$dom === void 0 ? 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;
+  }
+  bindTag({
+    tag
+  }) {
+    const setHoveredOrFocused = isHoveredOrFocused => () => {
+      this.isHoveredOrFocused = isHoveredOrFocused;
+      this.applyStyles();
+    };
+    this.unbindTag = bindAll(tag, [{
+      type: 'mouseover',
+      listener: setHoveredOrFocused(true)
+    }, {
+      type: 'mouseout',
+      listener: setHoveredOrFocused(false)
+    }, {
+      type: 'focus',
+      listener: setHoveredOrFocused(true)
+    }, {
+      type: 'blur',
+      listener: setHoveredOrFocused(false)
+    }]);
+  }
+  renderAvatars(model) {
+    var _this$dom2;
+    const {
+      avatars: container
+    } = (_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 ? _this$dom2 : {};
+    if (!container) {
+      return;
+    }
+    this.avatars.forEach(avatar => avatar.destroy());
+    this.avatars = [];
+    const doc = container.ownerDocument;
+    const {
+      background
+    } = this.accentOf(model);
+    const isPrimaryAgent = model.contributor.kind === 'agent';
+    // Resolved by `kind` so a reverse `connectedTo` (an attributed user pointing at its agent)
+    // renders identically.
+    const user = isPrimaryAgent ? model.connectedContributor : model.contributor;
+    const agent = isPrimaryAgent ? model.contributor : model.connectedContributor;
+
+    // Hand-rolled avatar stack: `@atlaskit/avatar-group` cannot render below 24px and the tag uses
+    // 16px avatars.
+    const stack = model.connectedContributor ? [...(user ? [{
+      contributor: user,
+      stackIndex: 1
+    }] : []), ...(agent ? [{
+      contributor: agent,
+      stackIndex: 0
+    }] : [])] : [{
+      contributor: model.contributor
+    }];
+    stack.forEach(({
+      contributor,
+      stackIndex
+    }, index) => {
+      const avatar = contributorAvatarRenderer({
+        contributor,
+        doc,
+        ringColor: background,
+        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);
+      this.avatars.push(avatar);
+    });
+  }
+  renderLabels(model) {
+    if (!this.dom) {
+      return;
+    }
+    const {
+      formatMessage
+    } = this.options.getIntl();
+    const isPrimaryAgent = model.contributor.kind === 'agent';
+    const primaryName = getContributorName(model.contributor, formatMessage);
+    const secondaryName = model.connectedContributor ? getContributorName(model.connectedContributor, formatMessage) : '';
+    const agentName = isPrimaryAgent ? primaryName : secondaryName;
+    const 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(contributorTagMessages.changedByConnected, {
+      agentName,
+      userName
+    }) : formatMessage(contributorTagMessages.changedBy, {
+      name: primaryName
+    });
+    this.dom.srLabel.textContent = this.fullLabel;
+  }
+  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
+    });
+  }
+  applyAccent(model) {
+    if (!this.dom) {
+      return;
+    }
+    const 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(avatar => avatar.setRingColor(accent.background));
+  }
+
+  /** Width clamp and visibility — the two things that are not carried by the model alone. */
+  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(${Math.round(this.maxWidthPx)}px, ${MIN_TAG_WIDTH})`);
+    const 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`.
+   */
+  syncTooltip() {
+    var _this$tooltip2;
+    const content = this.dom ? this.fullLabel : undefined;
+    if (content === this.tooltipContent) {
+      return;
+    }
+    (_this$tooltip2 = this.tooltip) === null || _this$tooltip2 === void 0 ? void 0 : _this$tooltip2.destroy();
+    this.tooltip = undefined;
+    this.tooltipContent = content;
+    if (!content || !this.dom) {
+      return;
+    }
+    this.tooltip = new 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.
+   */
+  syncHighlightBindings(model) {
+    var _model$linkedDiffIds;
+    const {
+      diffId
+    } = this.options;
+    const selector = [diffId, ...((_model$linkedDiffIds = model.linkedDiffIds) !== null && _model$linkedDiffIds !== void 0 ? _model$linkedDiffIds : [])].map(id => `[data-diff-id="${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.
+    const pendingBind = ++this.bindToken;
+    queueMicrotask(() => {
+      if (!this.isDestroyed && pendingBind === this.bindToken) {
+        this.bindHighlightState(selector);
+      }
+    });
+  }
+  bindHighlightState(selector) {
+    // 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.
+    const editorRoot = this.options.getEditorRoot();
+    const 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.
+    const ownElements = Array.from(editorRoot.querySelectorAll(`[data-diff-id="${this.options.diffId}"]`));
+    const 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.
+      const lineTops = new Set();
+      for (const highlight of ownElements) {
+        for (const rect of highlight.getClientRects()) {
+          lineTops.add(Math.round(rect.top));
+        }
+      }
+
+      // A wrapped change's first line says nothing useful about how wide the tag may be.
+      this.maxWidthPx = lineTops.size > 1 ? undefined : (_findChangeStartLine = findChangeStartLine(ownElements)) === null || _findChangeStartLine === void 0 ? void 0 : _findChangeStartLine.width;
+      this.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);
+    for (const parent of new Set(ownElements.map(({
+      parentElement
+    }) => parentElement))) {
+      if (parent) {
+        this.resizeObserver.observe(parent);
+      }
+    }
+
+    // `bindAll` takes a single target, and a change can render more than one highlight.
+    this.unbindHighlights = Array.from(highlights).map(highlight => bindAll(highlight, [{
+      type: 'mouseenter',
+      listener: () => {
+        this.isHighlightHovered = true;
+        this.applyStyles();
+      }
+    }, {
+      type: 'mouseleave',
+      listener: () => {
+        this.isHighlightHovered = false;
+        this.applyStyles();
+      }
+    }]));
+  }
+  unbindHighlightState() {
+    var _this$resizeObserver;
+    (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
+    this.resizeObserver = undefined;
+    this.unbindHighlights.forEach(unbind => unbind());
+    this.unbindHighlights = [];
+  }
+}

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

@@ -0,0 +1,40 @@
+/**
+ * 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. */
+const 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. */
+const 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. */
+const 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>`;
+const 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.
+ */
+const templates = {};
+export const getContributorTagIcon = (icon, doc) => {
+  let template = templates[icon];
+  if (!template) {
+    template = doc.createElement('template');
+    template.innerHTML = markup[icon];
+    templates[icon] = template;
+  }
+  return template.content.cloneNode(true);
+};

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

@@ -9,7 +9,6 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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';
@@ -618,26 +617,21 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref7
     if (change.isInline) {
       // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       var isActive = isRangeActive(activeIndexPos, change.fromB, change.toB);
-      var isAtomicInlineNodeFlag = isExperimentEnabled('platform_editor_improve_inline_diffs', function () {
-        return expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
-      });
       decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
         change: change,
         colorScheme: colorScheme,
         isActive: 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: 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', function () {
-        return expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
-      })) {
+      if (change.fromA !== undefined && change.toA !== undefined) {
         decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget({
           change: {
             fromA: change.fromA,

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

@@ -212,7 +212,6 @@ var TEXT_BLOCK_TYPES = new Set(['paragraph', 'heading']);
  *   layoutColumn → layoutSection, tableCell/tableHeader → tableRow → table.
  */
 var RIGID_CHILD_TYPES = new Set(['layoutColumn', 'tableCell', 'tableHeader']);
-var TABLE_TYPE = 'table';
 
 /**
  * Emit a single whole-block (node-level) change covering both sides of a group. Used for
@@ -539,7 +538,7 @@ var classifyContainer = function classifyContainer(blockA, blockB, changes, orig
   var 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/esm/pm-plugins/decorations/colorSchemes/attributions.js

@@ -1,7 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var _excluded = ["attribution", "connectedTo"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -17,6 +17,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. */
+var HASHED_PARTICIPANT_COLOR_SCHEMES = [].concat(_toConsumableArray(PARTICIPANT_COLOR_SCHEMES), ['blue', 'red', 'orange', 'yellow', 'green', 'teal', 'purple', 'magenta']);
+var getAvailableColor = function getAvailableColor(hashedColor, allocatedColors) {
+  var startIndex = PARTICIPANT_COLOR_SCHEMES.indexOf(hashedColor);
+  for (var offset = 0; offset < PARTICIPANT_COLOR_SCHEMES.length; offset++) {
+    var 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
@@ -112,6 +125,7 @@ export var isContributorTagsEnabled = function isContributorTagsEnabled(stepAttr
 };
 export var createAttributionColorMap = function createAttributionColorMap(stepAttributions) {
   var colors = new Map();
+  var allocatedColors = new Set();
   var _iterator2 = _createForOfIteratorHelper(stepAttributions),
     _step2;
   try {
@@ -123,10 +137,13 @@ export var createAttributionColorMap = function createAttributionColorMap(stepAt
       }
       var _getParticipantColor = getParticipantColor(identity.colorSeed),
         index = _getParticipantColor.index;
-      var participantColorScheme = PARTICIPANT_COLOR_SCHEMES[index];
-      if (participantColorScheme) {
-        colors.set(identity.key, participantColorScheme);
+      var hashedColor = HASHED_PARTICIPANT_COLOR_SCHEMES[index];
+      if (!hashedColor) {
+        continue;
       }
+      var participantColorScheme = getAvailableColor(hashedColor, allocatedColors);
+      colors.set(identity.key, participantColorScheme);
+      allocatedColors.add(participantColorScheme);
     }
   } catch (err) {
     _iterator2.e(err);

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

@@ -2,9 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { participantColors } from '@atlaskit/editor-shared-styles/constants';
-import { PARTICIPANT_COLOR_SCHEMES } from './types';
-
 // token() is a build-time transform needing static literals, so pre-compute every colour's
 // tokens here and index by name at runtime.
 
@@ -80,71 +77,23 @@ var textAccentMap = {
   gray: "var(--ds-text-accent-gray, #505258)",
   lime: "var(--ds-text-accent-lime, #4C6B1F)"
 };
-
-/** Pressed counterpart of each participant's diff-safe SVG background tint. */
-var participantPressedBackgroundMap = {
-  'red-bolder': bgSubtlerPressedMap.red,
-  'blue-bolder': bgSubtlerPressedMap.blue,
-  'green-bolder': bgSubtlerPressedMap.green,
-  'yellow-bolder': bgSubtlerPressedMap.yellow,
-  'purple-bolder': bgSubtlerPressedMap.purple,
-  'magenta-bolder': bgSubtlerPressedMap.magenta,
-  'teal-bolder': bgSubtlerPressedMap.teal,
-  'orange-bolder': bgSubtlerPressedMap.orange,
-  'lime-bolder': bgSubtlerPressedMap.lime,
-  'gray-bolder': bgSubtlerPressedMap.gray,
-  'blue-subtle': bgSubtlestPressedMap.blue,
-  'red-subtle': bgSubtlestPressedMap.red,
-  'orange-subtle': bgSubtlestPressedMap.orange,
-  'yellow-subtle': bgSubtlestPressedMap.yellow,
-  'green-subtle': bgSubtlestPressedMap.green,
-  'teal-subtle': bgSubtlestPressedMap.teal,
-  'purple-subtle': bgSubtlestPressedMap.purple,
-  'magenta-subtle': bgSubtlestPressedMap.magenta
-};
-/**
- * Telepointers can put inverse text directly on their bolder colour. Diff colours sit behind
- * arbitrary document content, so use the participant SVG tint and its matching pressed token for
- * diff backgrounds. Borders and rings use the exact participant colour, preserving all 18
- * bolder/subtle slots while keeping every value in the shared ADS participant palette.
- */
-var participantColorTokenSets = Object.fromEntries(PARTICIPANT_COLOR_SCHEMES.map(function (scheme, index) {
-  var participantColor = participantColors[index];
-  if (!participantColor) {
-    throw new Error("Missing shared participant colour for show-diff slot ".concat(index));
-  }
-  return [scheme, {
-    backgroundSubtlest: participantColor.svgBackgroundColor,
-    backgroundSubtlestPressed: participantPressedBackgroundMap[scheme],
-    backgroundSubtler: participantColor.svgBackgroundColor,
-    backgroundSubtlerPressed: participantPressedBackgroundMap[scheme],
-    borderAccent: participantColor.backgroundColor,
-    // The first ten bolder colours are safe as accents on the editor surface. The
-    // remaining subtle colours use their paired dark participant text colour.
-    textAccent: index < 10 ? participantColor.backgroundColor : participantColor.textColor
-  }];
-}));
-var participantColorSchemeSet = new Set(PARTICIPANT_COLOR_SCHEMES);
-var isParticipantColorScheme = function isParticipantColorScheme(color) {
-  return participantColorSchemeSet.has(color);
-};
 function bgSubtlest(color) {
-  return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlest : bgSubtlestMap[color];
+  return bgSubtlestMap[color];
 }
 function bgSubtlestPressed(color) {
-  return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlestPressed : bgSubtlestPressedMap[color];
+  return bgSubtlestPressedMap[color];
 }
 function bgSubtler(color) {
-  return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtler : bgSubtlerMap[color];
+  return bgSubtlerMap[color];
 }
 function bgSubtlerPressed(color) {
-  return isParticipantColorScheme(color) ? participantColorTokenSets[color].backgroundSubtlerPressed : bgSubtlerPressedMap[color];
+  return bgSubtlerPressedMap[color];
 }
 function borderAccent(color) {
-  return isParticipantColorScheme(color) ? participantColorTokenSets[color].borderAccent : borderAccentMap[color];
+  return borderAccentMap[color];
 }
 function textAccent(color) {
-  return isParticipantColorScheme(color) ? participantColorTokenSets[color].textAccent : textAccentMap[color];
+  return textAccentMap[color];
 }
 
 /** Presentation tokens for one diff colour, shared by highlights and contributor tags. */