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

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

@@ -1,7 +1,4 @@
 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.
 
@@ -77,69 +74,23 @@ const 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. */
-const 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.
- */
-const participantColorTokenSets = Object.fromEntries(PARTICIPANT_COLOR_SCHEMES.map((scheme, index) => {
-  const participantColor = participantColors[index];
-  if (!participantColor) {
-    throw new Error(`Missing shared participant colour for show-diff slot ${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
-  }];
-}));
-const participantColorSchemeSet = new Set(PARTICIPANT_COLOR_SCHEMES);
-const isParticipantColorScheme = color => 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. */

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

@@ -1,3 +1,5 @@
+import { PARTICIPANT_COLOR_SCHEMES } from './types';
+
 /** Green insertions, red deletions. */
 export const traditionalScheme = {
   insertColor: 'green',
@@ -52,35 +54,21 @@ export const standardScheme = {
   deletedQuoteNodeActiveTone: 'borderAccent',
   strikesDeletedEmbedCard: false
 };
-const createAttributionScheme = color => ({
-  ...standardScheme,
-  insertColor: color,
-  insertActiveColor: color,
-  deleteColor: color,
-  deleteActiveColor: color,
-  deletedCellColor: color
-});
+const createAttributionScheme = color => {
+  return {
+    ...standardScheme,
+    insertColor: color,
+    insertActiveColor: color,
+    deleteColor: color,
+    deleteActiveColor: color,
+    deletedCellColor: color
+  };
+};
+const attributionColorSchemes = Object.fromEntries(PARTICIPANT_COLOR_SCHEMES.map(color => [color, createAttributionScheme(color)]));
 
 /** Maps public schemes and attribution-only participant slots to their data objects. */
 export const colorSchemeRegistry = {
-  'red-bolder': createAttributionScheme('red-bolder'),
-  'blue-bolder': createAttributionScheme('blue-bolder'),
-  'green-bolder': createAttributionScheme('green-bolder'),
-  'yellow-bolder': createAttributionScheme('yellow-bolder'),
-  'purple-bolder': createAttributionScheme('purple-bolder'),
-  'magenta-bolder': createAttributionScheme('magenta-bolder'),
-  'teal-bolder': createAttributionScheme('teal-bolder'),
-  'orange-bolder': createAttributionScheme('orange-bolder'),
-  'lime-bolder': createAttributionScheme('lime-bolder'),
-  'gray-bolder': createAttributionScheme('gray-bolder'),
-  'blue-subtle': createAttributionScheme('blue-subtle'),
-  'red-subtle': createAttributionScheme('red-subtle'),
-  'orange-subtle': createAttributionScheme('orange-subtle'),
-  'yellow-subtle': createAttributionScheme('yellow-subtle'),
-  'green-subtle': createAttributionScheme('green-subtle'),
-  'teal-subtle': createAttributionScheme('teal-subtle'),
-  'purple-subtle': createAttributionScheme('purple-subtle'),
-  'magenta-subtle': createAttributionScheme('magenta-subtle'),
+  ...attributionColorSchemes,
   traditional: traditionalScheme,
   standard: standardScheme
 };

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

@@ -1,16 +1,14 @@
 /** Schemes consumers may explicitly request through the show-diff API. */
 
 /** Attribution-only participant slots selected by the plugin, never by consumers. */
-export const PARTICIPANT_COLOR_SCHEMES = ['red-bolder', 'blue-bolder', 'green-bolder', 'yellow-bolder', 'purple-bolder', 'magenta-bolder', 'teal-bolder', 'orange-bolder', 'lime-bolder', 'gray-bolder', 'blue-subtle', 'red-subtle', 'orange-subtle', 'yellow-subtle', 'green-subtle', 'teal-subtle', 'purple-subtle', 'magenta-subtle'];
+export const PARTICIPANT_COLOR_SCHEMES = ['red', 'blue', 'green', 'yellow', 'purple', 'magenta', 'teal', 'orange', 'lime', 'gray'];
 
 /** ADS accent hues used by the public and participant colour schemes. */
 
 /** A public scheme or an attribution participant slot resolved internally for one change. */
 
-/** A colour value that the factory expands into a complete set of diff-safe ADS tokens. */
-
 /**
- * A show-diff colour scheme. Colour fields are ADS hues or shared participant slots that
- * `factory.ts` expands into token paths; the rest encode structural differences no colour can
- * express. Ring widths, padding, radius and pointer-events are fixed in the factory, not per scheme.
+ * A show-diff colour scheme. Colour fields are ADS hues that `factory.ts` expands into token paths;
+ * the rest encode structural differences no colour can express. Ring widths, padding, radius and
+ * pointer-events are fixed in the factory, not per scheme.
  */

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

@@ -11,7 +11,6 @@ import { resolveCellOverlayStyleLegacy, resolveDeletedRowStyleLegacy } from './c
 import { buildDiffDecorationSpec } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { applyCellEdgeAttrs, getRowCellEdgeAttrs, getTableTopAndBottomCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
-const DEFAULT_COLOR_SCHEME = 'standard';
 /**
  * Extracts information about deleted table rows from a change
  */
@@ -116,7 +115,7 @@ const isEmptyRow = rowNode => {
  */
 const createChangedRowDOM = (rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) => {
   const tr = document.createElement('tr');
-  const colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+  const colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 
   // Inserted rows keep their natural styling; the row strikethrough is deletions only.
   if (!isExtendedEnabled(diffType) || !isInserted) {

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

@@ -1,9 +1,8 @@
-import { createElement } from 'react';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { ContributorTagWidget } from '../../ui/ContributorTag/ContributorTagWidget';
+import { ContributorTagController } from '../../ui/ContributorTag/contributorTagController';
 import { clampAnchorPosIntoCell } from './createAnchorDecorationWidgets';
-import { buildContributorTagDecorationSpec, DecorationFamily } from './decorationKeys';
+import { buildContributorTagDecorationSpec } from './decorationKeys';
 
 /** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
 export const CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
@@ -12,23 +11,19 @@ export const CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
 const isContributorTagWidgetEnabled = () => fg('confluence_ncs_step_diffing_version_history');
 
 /**
- * Everything a tag needs to mount itself into the document, plumbed down from the plugin. Absent in
+ * Everything a tag needs to draw itself into the document, plumbed down from the plugin. Absent in
  * unit tests that build decorations directly: the hosts are still emitted, they just stay empty.
  */
 
 /** A mounted tag, so whoever emitted the host can take it down again. */
 
 /**
- * Unique per mount rather than per diff, because ProseMirror draws a replacement widget before it
- * destroys the widget being replaced: on a shared key the outgoing widget's `destroy` would
- * unregister the incoming widget's portal.
- */
-let nextContributorTagPortalId = 0;
-
-/**
- * Renders the tag into `host` through the editor's portal provider, the way the rest of the editor
- * mounts React into decorations. The tag resolves its own model from plugin state, so a redraw of
- * the host re-parents the tag instead of stranding it, and `isActive` changes arrive as a re-render.
+ * Draws the tag into `host`. The tag resolves its own model from plugin state, so a redraw of the
+ * host re-parents the tag instead of stranding it, and `isActive` changes arrive as an update.
+ *
+ * Each mount owns its own controller and DOM, so when ProseMirror draws a replacement widget before
+ * destroying the one it replaces, the outgoing `destroy` cannot take the incoming tag down with it
+ * (EDITOR-8702).
  */
 export const mountContributorTag = ({
   diffId,
@@ -38,24 +33,15 @@ export const mountContributorTag = ({
   if (!mountContext) {
     return undefined;
   }
-  const {
-    api,
-    getEditorRoot,
-    portalProviderAPI
-  } = mountContext;
-  const key = `${DecorationFamily.contributorTag}-${diffId}-${nextContributorTagPortalId++}`;
-  portalProviderAPI.render(() => /*#__PURE__*/createElement(ContributorTagWidget, {
-    api,
-    diffId,
-    getEditorRoot
-  }), host, key);
-  return {
-    key,
-    portalProviderAPI
-  };
+  const controller = new ContributorTagController({
+    ...mountContext,
+    diffId
+  });
+  controller.mount(host);
+  return controller;
 };
 export const unmountContributorTag = mount => {
-  mount === null || mount === void 0 ? void 0 : mount.portalProviderAPI.remove(mount.key);
+  mount === null || mount === void 0 ? void 0 : mount.destroy();
 };
 
 /**

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

@@ -11,8 +11,7 @@ import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
-const DEFAULT_COLOR_SCHEME = 'standard';
-const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 
 /**
  * Class names for an atomic inline node decoration (date, emoji, mention, status). Scheme-agnostic

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

@@ -1,11 +1,9 @@
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps/set-attrs';
-import { isExperimentEnabled } from '@atlaskit/editor-common/deprecated-platform-feature-experiments';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getRequiredIncludedDiffableAttrs, isDiffableAttr } from './diffableAttrs';
 const filterUndefined = x => !!x;
 
@@ -68,20 +66,9 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
     const nodeAtPos = doc.nodeAt(finalPos);
     const originalNodeAtPos = originalPos === undefined ? null : originalDoc.nodeAt(originalPos);
 
-    // date node: timestamp attribute change — highlight the date node itself (inline)
-    if (attrsToCheck.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !isExperimentEnabled('platform_editor_improve_inline_diffs', () => expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true))) {
-      return {
-        fromB: finalPos,
-        toB: finalPos + nodeAtPos.nodeSize,
-        isInline: true,
-        inlineNodeName: 'date'
-      };
-    }
-
-    // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
     // The changeset path (createDecorationsForChange) handles the deletion widget via
     // prosemirror-changeset; we only need to add the inline insertion highlight here.
-    if (isExperimentEnabled('platform_editor_improve_inline_diffs', () => expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) && nodeAtPos) {
+    if (nodeAtPos) {
       const nodeName = nodeAtPos.type.name;
       if (isInlineAttrChangeNodeName(nodeName)) {
         const watchedAttrs = inlineNodeAttrMap[nodeName];
@@ -150,9 +137,7 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
   // Deduplicate by node position: multiple AttrSteps on the same node
   // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
   // should produce only one decoration, not one per step.
-  // Gated behind the same experiment as the inline node attr changes that introduced
-  // the possibility of multiple ranges for the same node position.
-  .filter((range, i, arr) => !isExperimentEnabled('platform_editor_improve_inline_diffs', () => expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) || arr.findIndex(r => r.fromB === range.fromB) === i);
+  .filter((range, i, arr) => arr.findIndex(r => r.fromB === range.fromB) === i);
 };
 
 /**

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

@@ -16,8 +16,7 @@ import { isExtendedEnabled } from '../../isExtendedEnabled';
 import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildAddedCellOverlayStyleNew, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedInlineContentStyle, buildDeletedInlineContentStyleExtended, buildDeletedLozengeActiveStyle, buildDeletedLozengeStyle, buildDeletedNodeCSSVariables, buildDeletedQuoteNodeWithLozengeStyle, buildDeletedStrikethroughLine, buildDeletedWrappedBlockOutline, buildInsertedBlockNodeStyle, buildInsertedInlineStyle, buildInsertStyleInBlockExtended, buildInsertStyleInBlockExtendedNoUnderline, buildInsertStyleNode } from '../colorSchemes/factory';
 import { colorSchemeRegistry, getLegacyColorScheme, standardScheme } from '../colorSchemes/schemes';
 import { getChangedContentStyleLegacy, getChangedNodeStyleLegacy, getDeletedContentStyleLegacy, getDeletedContentStyleUnboundedLegacy, getInsertedContentStyleLegacy, hasRestingDeletedRingLegacy, resolveCellOverlayStyleLegacy, resolveNestedInsertedNodeStyleLegacy, resolveRemovedLozengeStyleLegacy } from './wrapBlockNodeViewStyles.legacy';
-const DEFAULT_COLOR_SCHEME = 'standard';
-const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 
 /**
  * Inserted content inside a multi-container or list node always uses the standard scheme, so a

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

@@ -29,7 +29,7 @@ const dropOrphanedContributorTags = (contributorTags, decorations) => {
   }) => liveDiffIds.has(diffId));
   return liveTags.length === contributorTags.length ? contributorTags : liveTags;
 };
-export const createPlugin = (config, getIntl, api, portalProviderAPI, onEditorView) => {
+export const createPlugin = (config, getIntl, api, onEditorView) => {
   enforceCustomStepRegisters();
   const nodeViewSerializer = new NodeViewSerializer({});
   const setNodeViewSerializer = editorView => {
@@ -46,14 +46,14 @@ export const createPlugin = (config, getIntl, api, portalProviderAPI, onEditorVi
    * lifecycle, which decorations are calculated independently of.
    */
   let currentEditorView;
-  const tagMountContext = portalProviderAPI ? {
+  const tagMountContext = {
     api,
     getEditorRoot: () => {
       var _currentEditorView$do, _currentEditorView;
       return (_currentEditorView$do = (_currentEditorView = currentEditorView) === null || _currentEditorView === void 0 ? void 0 : _currentEditorView.dom) !== null && _currentEditorView$do !== void 0 ? _currentEditorView$do : null;
     },
-    portalProviderAPI
-  } : undefined;
+    getIntl
+  };
   return new SafePlugin({
     key: showDiffPluginKey,
     state: {

package/dist/es2019/showDiffPlugin.js

@@ -97,12 +97,11 @@ export const showDiffPlugin = ({
     pmPlugins() {
       return [{
         name: 'showDiffPlugin',
-        // Contributor tags mount into their own decoration widgets through the portal
-        // provider, the way the rest of the editor renders React into decorations.
+        // Contributor tags draw themselves into their own decoration widgets — plain DOM, so
+        // no portal provider is needed here.
         plugin: ({
-          getIntl,
-          nodeViewPortalProviderAPI
-        }) => createPlugin(config, getIntl, api, nodeViewPortalProviderAPI, setEditorView)
+          getIntl
+        }) => createPlugin(config, getIntl, api, setEditorView)
       }];
     },
     contentComponent: () => {

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

@@ -0,0 +1,110 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+export const CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
+export 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.
+ */
+export const MIN_TAG_WIDTH = '28px';
+
+// Positioned against the host widget its decoration renders on the change's first character:
+// `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
+// character.
+const constraintStyle = convertToInlineCss({
+  display: 'block',
+  position: 'absolute',
+  bottom: '100%',
+  insetInlineStart: 0,
+  minWidth: 0,
+  // The tag may cover surrounding text, so it has to paint over it. Matches `akEditorUnitZIndex`.
+  zIndex: 1,
+  // It renders inside the document and it is not content: dragging a selection across the change
+  // must not select it.
+  userSelect: 'none'
+});
+
+// `backgroundColor`, `borderBottomColor` and the visibility come from the model, and are set by the
+// controller.
+const tagStyle = convertToInlineCss({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: "var(--ds-space-050, 4px)",
+  // Never wider than the highlight; overflow is ellipsised on the name below.
+  maxWidth: '100%',
+  minWidth: 0,
+  overflow: 'hidden',
+  paddingInline: "var(--ds-space-050, 4px)",
+  paddingBlock: "var(--ds-space-025, 2px)",
+  borderRadius: "var(--ds-radius-small, 4px)",
+  borderBottomStyle: 'solid',
+  borderBottomWidth: "var(--ds-border-width-selected, 2px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  whiteSpace: 'nowrap',
+  boxSizing: 'border-box'
+});
+const avatarsStyle = convertToInlineCss({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flexShrink: 0
+});
+const nameStyle = convertToInlineCss({
+  display: 'block',
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+/** `@atlaskit/visually-hidden`, inlined. */
+const srLabelStyle = convertToInlineCss({
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  position: 'absolute',
+  border: 0,
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  overflow: 'hidden',
+  userSelect: 'none',
+  whiteSpace: 'nowrap'
+});
+const createSpan = (doc, style, attributes = {}) => {
+  const span = doc.createElement('span');
+  span.setAttribute('style', style);
+  for (const [name, value] of Object.entries(attributes)) {
+    span.setAttribute(name, value);
+  }
+  return span;
+};
+/**
+ * The tag's markup, with no model applied — see `ContributorTagController`.
+ *
+ * Built element by element rather than through `DOMSerializer.renderSpec`, which returns `Node` and
+ * would need a cast per reference below.
+ */
+export const buildContributorTagDom = doc => {
+  const root = createSpan(doc, constraintStyle);
+  const tag = createSpan(doc, tagStyle, {
+    'data-testid': CONTRIBUTOR_TAG_TESTID,
+    // Deliberately no `aria-label`: it would be announced ahead of the element's contents, but
+    // design requires the contributor *after* the change — hence the visually hidden label.
+    role: 'note',
+    // Focusable so keyboard and screen-reader users can reach the tag and its tooltip.
+    tabindex: '0'
+  });
+  const avatars = createSpan(doc, avatarsStyle);
+  const name = createSpan(doc, nameStyle, {
+    'data-testid': CONTRIBUTOR_TAG_NAME_TESTID
+  });
+  const srLabel = createSpan(doc, srLabelStyle);
+  tag.append(avatars, name, srLabel);
+  root.appendChild(tag);
+  return {
+    avatars,
+    name,
+    root,
+    srLabel,
+    tag
+  };
+};

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

@@ -0,0 +1,136 @@
+import { bind } from 'bind-event-listener';
+import { AVATAR_SIZES } from '@atlaskit/avatar/avatar-sizes';
+import { BORDER_WIDTH } from '@atlaskit/avatar/constants/default';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { getContributorTagIcon } from './contributorTagIcons';
+
+/** The size `@atlaskit/avatar`'s `xxsmall` rendered at. */
+const AVATAR_SIZE = AVATAR_SIZES.xxsmall;
+/** `xxsmall` also carried a `space.025` margin — the same 2px — which is where the ring is painted. */
+const AVATAR_RING_WIDTH = BORDER_WIDTH;
+const AVATAR_BOX_SIZE = AVATAR_SIZE + AVATAR_RING_WIDTH * 2;
+
+/** Reused from `@atlaskit/avatar`'s `avatar-content`, so the two shapes cannot drift. */
+const HEXAGON_CLIP_PATH = 'polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)';
+const boxStyle = convertToInlineCss({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  boxSizing: 'border-box',
+  width: `${AVATAR_BOX_SIZE}px`,
+  height: `${AVATAR_BOX_SIZE}px`
+});
+const shapeStyle = convertToInlineCss({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxSizing: 'border-box',
+  width: `${AVATAR_SIZE}px`,
+  height: `${AVATAR_SIZE}px`,
+  overflow: 'hidden'
+});
+const imageStyle = convertToInlineCss({
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover'
+});
+
+/** The `@atlaskit/avatar` image fallback: a subtle glyph on a tinted box. */
+const personFallbackStyle = convertToInlineCss({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
+  color: "var(--ds-icon-subtle, #505258)"
+});
+/**
+ * One 16px avatar for a contributor: a circle for a person, a hexagon for an agent.
+ *
+ * Mirrors `mentionAvatarRenderer` — a bare `<img>` with a glyph fallback bound to `error`, and the
+ * hexagon cut with `clip-path`. The ring `@atlaskit/avatar` drew from `borderColor` is a
+ * `box-shadow` on the circle and a second clipped hexagon behind the agent, since `box-shadow` is
+ * cut away by `clip-path`.
+ */
+export const contributorAvatarRenderer = ({
+  contributor,
+  doc,
+  ringColor,
+  stackIndex
+}) => {
+  const isAgent = contributor.kind === 'agent';
+  const element = doc.createElement('span');
+  element.setAttribute('style', boxStyle);
+  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
+  // announcement comes from.
+  element.setAttribute('aria-hidden', 'true');
+  if (stackIndex !== undefined) {
+    element.style.setProperty('z-index', String(stackIndex));
+  }
+  const shape = doc.createElement('span');
+  shape.setAttribute('style', shapeStyle);
+  element.appendChild(shape);
+  if (isAgent) {
+    element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
+    shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
+  } else {
+    shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
+  }
+  let image;
+  let unbindImageError;
+  const showFallback = () => {
+    var _unbindImageError, _image;
+    (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 ? void 0 : _unbindImageError();
+    unbindImageError = undefined;
+    (_image = image) === null || _image === void 0 ? void 0 : _image.remove();
+    image = undefined;
+    if (!isAgent) {
+      const fallback = doc.createElement('span');
+      fallback.setAttribute('style', personFallbackStyle);
+      fallback.appendChild(getContributorTagIcon('person', doc));
+      shape.appendChild(fallback);
+      return;
+    }
+    shape.appendChild(getContributorTagIcon(contributor.agentKind === 'rovo' ? 'rovoHex' : 'aiBot', doc));
+  };
+  if (contributor.avatarUrl) {
+    image = doc.createElement('img');
+    image.alt = '';
+    image.decoding = 'async';
+    image.draggable = false;
+    image.loading = 'lazy';
+    image.setAttribute('style', imageStyle);
+    unbindImageError = bind(image, {
+      type: 'error',
+      listener: showFallback
+    });
+    shape.appendChild(image);
+    image.src = contributor.avatarUrl;
+  } else {
+    showFallback();
+  }
+  const setRingColor = nextRingColor => {
+    if (isAgent) {
+      element.style.setProperty('background', nextRingColor);
+      // Shows through wherever the artwork is transparent, as the avatar background did.
+      shape.style.setProperty('background', nextRingColor);
+      return;
+    }
+    shape.style.setProperty('box-shadow', `0 0 0 ${AVATAR_RING_WIDTH}px ${nextRingColor}`);
+    shape.style.setProperty('background', nextRingColor);
+  };
+  setRingColor(ringColor);
+  return {
+    destroy: () => {
+      var _unbindImageError2;
+      (_unbindImageError2 = unbindImageError) === null || _unbindImageError2 === void 0 ? void 0 : _unbindImageError2();
+      unbindImageError = undefined;
+      element.remove();
+    },
+    element,
+    setRingColor
+  };
+};