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

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

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

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

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

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

@@ -5,6 +5,49 @@ const ROVO_AGENT_NAME = 'Rovo';
 
 /** `agentType` values that render as "Rovo" rather than as a generic external agent. */
 const ROVO_AGENT_TYPES = new Set(['convo-ai', 'rovo_chat']);
+/** Known external agent types emitted by Confluence's agent identification service. */
+const EXTERNAL_AGENT_PRESENTATIONS = {
+  claude: {
+    agentKind: 'claude',
+    name: 'Claude'
+  },
+  codex: {
+    agentKind: 'external',
+    name: 'Codex'
+  },
+  vscode: {
+    agentKind: 'external',
+    name: 'VS Code'
+  },
+  hermes: {
+    agentKind: 'external',
+    name: 'Hermes'
+  },
+  runlayer: {
+    agentKind: 'external',
+    name: 'Runlayer'
+  },
+  zed: {
+    agentKind: 'external',
+    name: 'Zed'
+  },
+  ampcode: {
+    agentKind: 'external',
+    name: 'Ampcode'
+  },
+  antigravity: {
+    agentKind: 'external',
+    name: 'Antigravity'
+  },
+  devin_cli: {
+    agentKind: 'external',
+    name: 'Devin CLI'
+  },
+  pi_agent: {
+    agentKind: 'external',
+    name: 'Pi Agent'
+  }
+};
 const hasAgentIdentity = attribution => {
   var _attribution$agentId, _attribution$agentTyp;
   return Boolean(((_attribution$agentId = attribution.agentId) === null || _attribution$agentId === void 0 ? void 0 : _attribution$agentId.trim()) || ((_attribution$agentTyp = attribution.agentType) === null || _attribution$agentTyp === void 0 ? void 0 : _attribution$agentTyp.trim()));
@@ -29,9 +72,17 @@ const resolveUser = (userId, profilesByAccountId) => {
   } : undefined;
 };
 
-/** An agent always resolves: its profile, else "Rovo" for a first-party type, else external. */
+/** Resolve branding or a profile first, then a known type name or the external-agent fallback. */
 const resolveAgent = (attribution, profilesByAccountId) => {
-  var _attribution$agentId2, _attribution$agentTyp2;
+  var _attribution$agentTyp2, _attribution$agentId2;
+  const agentType = (_attribution$agentTyp2 = attribution.agentType) === null || _attribution$agentTyp2 === void 0 ? void 0 : _attribution$agentTyp2.trim().toLowerCase();
+  const agentPresentation = agentType ? EXTERNAL_AGENT_PRESENTATIONS[agentType] : undefined;
+  if (agentPresentation && agentPresentation.agentKind !== 'external') {
+    return {
+      ...agentPresentation,
+      kind: 'agent'
+    };
+  }
   const agentId = (_attribution$agentId2 = attribution.agentId) === null || _attribution$agentId2 === void 0 ? void 0 : _attribution$agentId2.trim();
   const agentProfile = agentId ? profilesByAccountId.get(agentId) : undefined;
   if (agentProfile) {
@@ -42,13 +93,15 @@ const resolveAgent = (attribution, profilesByAccountId) => {
       name: agentProfile.name
     };
   }
-  const agentType = (_attribution$agentTyp2 = attribution.agentType) === null || _attribution$agentTyp2 === void 0 ? void 0 : _attribution$agentTyp2.trim().toLowerCase();
 
-  // An empty name lets the tag fall back to its own localised "External agent" label.
+  // Unknown types keep an empty name for the tag's localised "External agent" label.
   return agentType && ROVO_AGENT_TYPES.has(agentType) ? {
     agentKind: 'rovo',
     kind: 'agent',
     name: ROVO_AGENT_NAME
+  } : agentPresentation ? {
+    ...agentPresentation,
+    kind: 'agent'
   } : {
     agentKind: 'external',
     kind: 'agent',

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

@@ -3,43 +3,98 @@ 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.
+ * Ceiling for the tag width. A constant rather than the width of the change: a change is routinely a
+ * word or two, and clamping to it ellipsised the contributor's name — the one thing the tag exists to
+ * show. Longer names are ellipsised into the tooltip.
  */
-export const MIN_TAG_WIDTH = '28px';
+export const MAX_TAG_WIDTH = '200px';
+
+/**
+ * The tag sits on the line above the change, so it has to paint over that line to be readable —
+ * including any diff highlight already on it, which would otherwise slice straight through the tag.
+ * Hence one level above `akEditorUnitZIndex`, where the highlights sit; exported because the
+ * change's own highlight is stacked one level below it — see `stackBelowContributorTagStyle` in
+ * `createInlineChangedDecoration`.
+ *
+ * Painting above its own highlight is only safe because the tag can never reach it: `bottom: 100%`
+ * puts the root's bottom edge exactly on the highlight's top edge, and the root's `overflow: clip`
+ * keeps every pixel the tag paints inside it.
+ */
+export const CONTRIBUTOR_TAG_Z_INDEX = 2;
+
+/**
+ * The plugin's whole side of the tag's motion: the fade and the hidden state are
+ * `contributorTagStyles` in both EditorContentContainer stylesheets, keyed on this literal and the
+ * one below — rename in step. This package cannot import `@atlaskit/editor-core` at runtime, so the
+ * plugin emits the hook and editor-core owns the rule, as `VanillaTooltip` does with
+ * `VANILLA_TOOLTIP_DEFAULT_CLASS`.
+ */
+export const CONTRIBUTOR_TAG_CLASS = 'ak-editor-diff-contributor-tag';
+
+/** Toggled by the controller to move the tag between the fade's two ends. */
+export const CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = 'data-revealed';
+
+/**
+ * Backstop for removing a fading-out tag: a cancelled transition fires no `transitionend`. Must stay
+ * above the fade's 600ms, which lives in another package's stylesheet and cannot be read back as a
+ * number — hence the wide margin. Raise in step with that duration.
+ */
+export const TAG_EXIT_FALLBACK_MS = 1200;
 
 // 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',
+  // `flex`, not `block`: a block box lays the tag on a line box whose strut is the *paragraph's*
+  // line-height (~24px) against the tag's ~20px, so `bottom: 100%` pins that leftover strut to the
+  // change and the tag floats above it. A flex container has no line box.
+  display: 'flex',
   position: 'absolute',
   bottom: '100%',
   insetInlineStart: 0,
+  // On the root, since that is the absolutely positioned box; the tag below fills it.
+  maxWidth: MAX_TAG_WIDTH,
   minWidth: 0,
-  // The tag may cover surrounding text, so it has to paint over it. Matches `akEditorUnitZIndex`.
-  zIndex: 1,
+  // This box's bottom edge is the join with the highlight, and the tag paints *above* that
+  // highlight — so anything spilling past this edge would read as the tag laid on top of the change
+  // rather than attached to it. The reveal's `translateY` is exactly that spill: it starts the tag
+  // 4px low, and clipping the part that hangs over the highlight turns the rise into an unfurl out
+  // of the join. `clip`, not `hidden`: `hidden` would make this a scroll container, and focusing the
+  // tag mid-reveal would scroll it 4px out of alignment for good.
+  //
+  // The tooltip is unaffected — it is a `popover`, so it paints in the top layer, which no
+  // ancestor's clip reaches.
+  overflow: 'clip',
+  zIndex: CONTRIBUTOR_TAG_Z_INDEX,
   // 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.
+// `backgroundColor` comes from the model, and is set by the controller. `opacity`, `pointer-events`
+// and the transition between their two states are in `contributorTagStyles` — see
+// `CONTRIBUTOR_TAG_CLASS`.
 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.
+  // Never wider than `MAX_TAG_WIDTH` on the root; 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)",
+  // Top corners only: the bottom edge butts onto the change, and a rounded corner there would let
+  // the page background through at the join.
+  borderTopLeftRadius: "var(--ds-radius-small, 4px)",
+  borderTopRightRadius: "var(--ds-radius-small, 4px)",
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  // Deliberately no bottom border: the change already carries the accent as its own underline, and
+  // a second rule directly above it reads as two objects rather than one label on one change.
+  //
+  // Deliberately no `elevation.shadow.overlay`: its `0 8px 12px` offset casts downwards onto the
+  // change, which reads as a gap between the tag and the content it captions.
   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'
@@ -86,6 +141,7 @@ const createSpan = (doc, style, attributes = {}) => {
 export const buildContributorTagDom = doc => {
   const root = createSpan(doc, constraintStyle);
   const tag = createSpan(doc, tagStyle, {
+    class: CONTRIBUTOR_TAG_CLASS,
     '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.

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

@@ -4,6 +4,12 @@ import { BORDER_WIDTH } from '@atlaskit/avatar/constants/default';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { getContributorTagIcon } from './contributorTagIcons';
 
+/** Agent kinds with a custom contributor-tag icon. */
+const AGENT_KIND_ICONS = {
+  claude: 'claude',
+  rovo: 'rovoHex'
+};
+
 /** 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. */
@@ -82,7 +88,7 @@ export const contributorAvatarRenderer = ({
   let image;
   let unbindImageError;
   const showFallback = () => {
-    var _unbindImageError, _image;
+    var _unbindImageError, _image, _AGENT_KIND_ICONS, _contributor$agentKin;
     (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 ? void 0 : _unbindImageError();
     unbindImageError = undefined;
     (_image = image) === null || _image === void 0 ? void 0 : _image.remove();
@@ -94,7 +100,7 @@ export const contributorAvatarRenderer = ({
       shape.appendChild(fallback);
       return;
     }
-    shape.appendChild(getContributorTagIcon(contributor.agentKind === 'rovo' ? 'rovoHex' : 'aiBot', doc));
+    shape.appendChild(getContributorTagIcon((_AGENT_KIND_ICONS = AGENT_KIND_ICONS[(_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external']) !== null && _AGENT_KIND_ICONS !== void 0 ? _AGENT_KIND_ICONS : 'aiBot', doc));
   };
   if (contributor.avatarUrl) {
     image = doc.createElement('img');