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

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

@@ -3,6 +3,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';
@@ -277,6 +278,16 @@ var applyInlineLeafNodeStyles = function applyInlineLeafNodeStyles(_ref8) {
     });
   });
 };
+
+/**
+ * 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.
+ */
+var quoteBlockLevelStyle = convertToInlineCss({
+  display: 'flow-root'
+});
 var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref9) {
   var element = _ref9.element,
     targetNode = _ref9.targetNode,
@@ -540,6 +551,9 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref12) {
           hideAddedDiffsUnderline: hideAddedDiffsUnderline,
           highlightInlineLeafNodes: highlightInlineLeafNodes
         });
+        if (targetNode.type.name === 'blockquote' && fg('platform_editor_ai_show_diff_patch_1')) {
+          appendStyleToElement(nodeView, quoteBlockLevelStyle);
+        }
         dom.append(nodeView);
         return;
       }

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

@@ -1,9 +1,9 @@
 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; }
 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; }
+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 { getAttributionKey } from './decorations/colorSchemes/attributions';
 
 /** A brand name, so a literal rather than a translated message. */
@@ -11,6 +11,49 @@ var ROVO_AGENT_NAME = 'Rovo';
 
 /** `agentType` values that render as "Rovo" rather than as a generic external agent. */
 var ROVO_AGENT_TYPES = new Set(['convo-ai', 'rovo_chat']);
+/** Known external agent types emitted by Confluence's agent identification service. */
+var 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'
+  }
+};
 var hasAgentIdentity = function 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()));
@@ -35,9 +78,16 @@ var resolveUser = function 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. */
 var resolveAgent = function resolveAgent(attribution, profilesByAccountId) {
-  var _attribution$agentId2, _attribution$agentTyp2;
+  var _attribution$agentTyp2, _attribution$agentId2;
+  var agentType = (_attribution$agentTyp2 = attribution.agentType) === null || _attribution$agentTyp2 === void 0 ? void 0 : _attribution$agentTyp2.trim().toLowerCase();
+  var agentPresentation = agentType ? EXTERNAL_AGENT_PRESENTATIONS[agentType] : undefined;
+  if (agentPresentation && agentPresentation.agentKind !== 'external') {
+    return _objectSpread(_objectSpread({}, agentPresentation), {}, {
+      kind: 'agent'
+    });
+  }
   var agentId = (_attribution$agentId2 = attribution.agentId) === null || _attribution$agentId2 === void 0 ? void 0 : _attribution$agentId2.trim();
   var agentProfile = agentId ? profilesByAccountId.get(agentId) : undefined;
   if (agentProfile) {
@@ -48,14 +98,15 @@ var resolveAgent = function resolveAgent(attribution, profilesByAccountId) {
       name: agentProfile.name
     };
   }
-  var 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 ? _objectSpread(_objectSpread({}, agentPresentation), {}, {
+    kind: 'agent'
+  }) : {
     agentKind: 'external',
     kind: 'agent',
     name: ''

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

@@ -4,43 +4,98 @@ export var CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
 export var 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 var MIN_TAG_WIDTH = '28px';
+export var 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 var 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 var CONTRIBUTOR_TAG_CLASS = 'ak-editor-diff-contributor-tag';
+
+/** Toggled by the controller to move the tag between the fade's two ends. */
+export var 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 var 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.
 var 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`.
 var 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'
@@ -91,6 +146,7 @@ var createSpan = function createSpan(doc, style) {
 export var buildContributorTagDom = function buildContributorTagDom(doc) {
   var root = createSpan(doc, constraintStyle);
   var 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/esm/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. */
+var AGENT_KIND_ICONS = {
+  claude: 'claude',
+  rovo: 'rovoHex'
+};
+
 /** The size `@atlaskit/avatar`'s `xxsmall` rendered at. */
 var AVATAR_SIZE = AVATAR_SIZES.xxsmall;
 /** `xxsmall` also carried a `space.025` margin — the same 2px — which is where the ring is painted. */
@@ -81,7 +87,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
   var image;
   var unbindImageError;
   var showFallback = function showFallback() {
-    var _unbindImageError, _image;
+    var _unbindImageError, _image, _AGENT_KIND_ICONS, _contributor$agentKin;
     (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 || _unbindImageError();
     unbindImageError = undefined;
     (_image = image) === null || _image === void 0 || _image.remove();
@@ -93,7 +99,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
       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');