@atlaskit/editor-plugin-show-diff 16.0.7 → 16.0.9

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 16.0.9
+
+### Patch Changes
+
+- [`c00ea38023074`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c00ea38023074) -
+  [ux] Contributor tags on changed block nodes now sit on the block's own top-left corner, instead
+  of drifting by that node type's margin. Behind `confluence_ncs_step_diffing_version_history`.
+- Updated dependencies
+
+## 16.0.8
+
+### Patch Changes
+
+- [`7c955f7988148`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c955f7988148) -
+  Match show-diff indicator bars to contributor colors using theme-aware ADS border tokens.
+- Updated dependencies
+
 ## 16.0.7
 
 ### Patch Changes

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

@@ -66,6 +66,7 @@ exports.buildInsertStyleRuleNodeActive = buildInsertStyleRuleNodeActive;
 exports.buildInsertStyleRuleNodeNew = buildInsertStyleRuleNodeNew;
 exports.buildInsertedBlockNodeStyle = buildInsertedBlockNodeStyle;
 exports.buildInsertedInlineStyle = buildInsertedInlineStyle;
+exports.getAccentBorderColor = getAccentBorderColor;
 exports.getAccentTokens = getAccentTokens;
 exports.getDeletedHighlightHoverBorderColor = getDeletedHighlightHoverBorderColor;
 exports.getDeletedHighlightHoverColor = getDeletedHighlightHoverColor;
@@ -227,6 +228,11 @@ function getAccentTokens(color) {
   };
 }
 
+/** Border token for a contributor accent, used by the diff indicator. */
+function getAccentBorderColor(color) {
+  return borderAccent(color);
+}
+
 /** Ring colour for an active (scroll-target) deleted block outline. */
 function deletedBlockOutlineActiveRing(colors) {
   return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);

package/dist/cjs/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -198,13 +198,20 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     from: change.from,
     name: change.name
   });
+  // Named so this block's own tag can position against it; see `createContributorTagWidget`.
+  var tagAnchorName = shouldTagBlock && (0, _createContributorTagWidget.isContributorTagWidgetEnabled)() ? (0, _decorationKeys.buildAnchorDecorationKey)({
+    diffId: diffId,
+    anchorType: _decorationKeys.AnchorTypeKey.tag
+  }) : undefined;
   if (shouldHideDeleted) {
     return [_view.Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, (0, _decorationKeys.buildDiffDecorationSpec)({
+      colorScheme: colorScheme,
       decorationType: 'block',
       diffId: diffId,
       isActive: isActive,
+      isInserted: isInserted,
       nodeName: change.name,
       diffType: diffType
     }))];
@@ -234,13 +241,16 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     }));
   }
   // isInserted is only read under the extended experience, so pass it unconditionally.
-  var style = getBlockNodeStyle({
+  var nodeStyle = getBlockNodeStyle({
     nodeName: change.name,
     colorScheme: colorScheme,
     isInserted: isInserted,
     isActive: isActive,
     diffType: diffType
   });
+  var style = tagAnchorName ? [nodeStyle, (0, _lazyNodeView.convertToInlineCss)({
+    anchorName: "--".concat(tagAnchorName)
+  })].filter(Boolean).join(' ') : nodeStyle;
   var className = getNodeClass(change.name);
   if (style || className) {
     decorations.push(_view.Decoration.node(change.from, change.to, _objectSpread({
@@ -278,6 +288,7 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
   if (shouldTagBlock && doc) {
     var tagWidget = (0, _createContributorTagWidget.createContributorTagWidget)({
       anchorAtRangeStart: true,
+      anchorName: tagAnchorName,
       doc: doc,
       from: change.from,
       to: change.to,

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

@@ -241,9 +241,11 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
     originalDoc.slice(changedRow.fromA, changedRow.toA));
     var diffId = crypto.randomUUID();
     return _view.Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
+      colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: diffId,
       isActive: false,
+      isInserted: isInserted,
       diffType: diffType
     })));
   });

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

@@ -38,13 +38,15 @@ var isContributorTagWidgetEnabled = exports.isContributorTagWidgetEnabled = func
  * (EDITOR-8702).
  */
 var mountContributorTag = exports.mountContributorTag = function mountContributorTag(_ref) {
-  var diffId = _ref.diffId,
+  var anchorName = _ref.anchorName,
+    diffId = _ref.diffId,
     host = _ref.host,
     mountContext = _ref.mountContext;
   if (!mountContext) {
     return undefined;
   }
   var controller = new _contributorTagController.ContributorTagController(_objectSpread(_objectSpread({}, mountContext), {}, {
+    anchorName: anchorName,
     diffId: diffId
   }));
   controller.mount(host);
@@ -76,14 +78,25 @@ var unmountContributorTag = exports.unmountContributorTag = function unmountCont
 /**
  * A zero-size inline host for one contributor tag. `position: relative` makes it the containing
  * block of the absolutely positioned tag, so the tag sits on the change with no measurement.
+ *
+ * An anchored tag takes a static host instead: an anchor is only acceptable when it sits inside the
+ * tag's containing block, and the block node is not inside this host. Measured in Chrome 153 — a
+ * relative host makes the `anchor()` insets resolve to `auto`.
  */
-var buildContributorTagHost = function buildContributorTagHost(diffId) {
+var buildContributorTagHost = function buildContributorTagHost(diffId, anchorName) {
   var host = document.createElement('span');
   host.setAttribute(CONTRIBUTOR_TAG_HOST_ATTRIBUTE, diffId);
-  host.style.setProperty('position', 'relative');
+  if (!anchorName) {
+    host.style.setProperty('position', 'relative');
+  }
   return host;
 };
 
+/** Without anchor positioning the tag keeps its host-relative placement. */
+var supportsAnchorPositioning = function supportsAnchorPositioning() {
+  return typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('bottom', 'anchor(--a top)');
+};
+
 /**
  * The host for a tag on deleted content, which renders inside its own widget decoration rather than
  * needing one of its own. Unmount with `unmountContributorTag` from that widget's `destroy`.
@@ -183,6 +196,7 @@ var resolveCodeBlockStart = function resolveCodeBlockStart(doc, pos) {
 var createContributorTagWidget = exports.createContributorTagWidget = function createContributorTagWidget(_ref3) {
   var _ref3$anchorAtRangeSt = _ref3.anchorAtRangeStart,
     anchorAtRangeStart = _ref3$anchorAtRangeSt === void 0 ? false : _ref3$anchorAtRangeSt,
+    anchorName = _ref3.anchorName,
     doc = _ref3.doc,
     from = _ref3.from,
     to = _ref3.to,
@@ -191,6 +205,7 @@ var createContributorTagWidget = exports.createContributorTagWidget = function c
   if (!isContributorTagWidgetEnabled()) {
     return undefined;
   }
+  var tagAnchorName = anchorName && supportsAnchorPositioning() ? anchorName : undefined;
 
   // Reassigned when ProseMirror redraws this decoration, which it may do more than once for the
   // same `Decoration` instance.
@@ -201,8 +216,9 @@ var createContributorTagWidget = exports.createContributorTagWidget = function c
   return _view.Decoration.widget(
   // Keep the host out of the table row's grid (EDITOR-8442).
   (0, _createAnchorDecorationWidgets.clampAnchorPosIntoCell)(doc, codeBlockPos !== null && codeBlockPos !== void 0 ? codeBlockPos : anchorPos, 1), function () {
-    var host = buildContributorTagHost(diffId);
+    var host = buildContributorTagHost(diffId, tagAnchorName);
     mount = mountContributorTag({
+      anchorName: tagAnchorName,
       diffId: diffId,
       host: host,
       mountContext: mountContext

package/dist/cjs/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -84,8 +84,10 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
     // Skip findSafeInsertPos: it walks forward to a schema-valid cell-insert point
     // and pushes the widget into the next cell. `targetPos` is the correct spot.
     decorations.push(_view.Decoration.widget(targetPos, dom, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
+      colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: crypto.randomUUID(),
+      isInserted: isInserted,
       diffType: diffType
     }, (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && {
       side: -1
@@ -428,8 +430,10 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       defaultSpacer.style.display = 'block';
       defaultSpacer.style.marginTop = "var(--ds-space-100, 8px)";
       decorations.push(_view.Decoration.widget(safeInsertPos, defaultSpacer, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
+        colorScheme: colorScheme,
         decorationType: 'widget',
         diffId: crypto.randomUUID(),
+        isInserted: isInserted,
         diffType: diffType
       }))));
     }

package/dist/cjs/pm-plugins/decorations/decorationKeys.js

@@ -25,7 +25,9 @@ var AnchorTypeKey = exports.AnchorTypeKey = {
   from: 'from',
   to: 'to',
   left: 'left',
-  docMargin: 'doc-margin'
+  docMargin: 'doc-margin',
+  /** The decorated block itself, which its contributor tag positions against. */
+  tag: 'tag'
 };
 
 /**
@@ -89,9 +91,9 @@ var buildDiffDecorationSpec = exports.buildDiffDecorationSpec = function buildDi
     attributionKey: attributionKey
   } : {}), attributionKey && isActive !== undefined ? {
     isActive: isActive
-  } : {}), attributionKey && isInserted !== undefined ? {
+  } : {}), isInserted !== undefined ? {
     isInserted: isInserted
-  } : {}), attributionKey && colorScheme ? {
+  } : {}), colorScheme ? {
     colorScheme: colorScheme
   } : {}), nodeName ? {
     nodeName: nodeName
@@ -147,9 +149,14 @@ var isDiffDecoration = exports.isDiffDecoration = function isDiffDecoration(deco
 var extractDiffDescriptors = exports.extractDiffDescriptors = function extractDiffDescriptors(decorations) {
   return decorations.find(undefined, undefined, isDiffDecorationSpec).filter(isDiffDecoration).map(function (_ref5) {
     var spec = _ref5.spec;
-    return {
-      id: spec.diffId,
+    return _objectSpread(_objectSpread(_objectSpread({}, spec.colorScheme ? {
+      colorScheme: spec.colorScheme
+    } : {}), {}, {
+      id: spec.diffId
+    }, spec.isInserted !== undefined ? {
+      isInserted: spec.isInserted
+    } : {}), {}, {
       type: spec.decorationType
-    };
+    });
   });
 };

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

@@ -186,10 +186,19 @@ var createSpan = function createSpan(doc, style) {
  *
  * Built element by element rather than through `DOMSerializer.renderSpec`, which returns `Node` and
  * would need a cast per reference below.
+ *
+ * `anchorName` is the `anchor-name` its block carries — see `createContributorTagWidget`.
  */
-var buildContributorTagDom = exports.buildContributorTagDom = function buildContributorTagDom(doc) {
+var buildContributorTagDom = exports.buildContributorTagDom = function buildContributorTagDom(doc, anchorName) {
   var labelId = generateLabelId();
   var root = createSpan(doc, constraintStyle);
+  if (anchorName) {
+    // Anchored to the block's own box, so the tag clears whatever margin its node type has — the
+    // same `anchor()` insets the `IndicatorBar` uses. A browser without anchor positioning rejects
+    // these values and keeps the `bottom: 100%` fallback above.
+    root.style.setProperty('bottom', "anchor(--".concat(anchorName, " top)"));
+    root.style.setProperty('inset-inline-start', "anchor(--".concat(anchorName, " left)"));
+  }
   var tag = createSpan(doc, tagStyle, {
     class: CONTRIBUTOR_TAG_CLASS,
     'data-testid': CONTRIBUTOR_TAG_TESTID,

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

@@ -186,7 +186,7 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
         return;
       }
       if (!this.dom) {
-        this.dom = (0, _buildContributorTagDom.buildContributorTagDom)(host.ownerDocument);
+        this.dom = (0, _buildContributorTagDom.buildContributorTagDom)(host.ownerDocument, this.options.anchorName);
         this.bindTag(this.dom);
         host.appendChild(this.dom.root);
       }

package/dist/cjs/ui/IndicatorBar/IndicatorBar.compiled.css

@@ -2,7 +2,6 @@
 ._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
 ._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
 ._1bsb1l7b{width:3px}
-._bfhkvbh5{background-color:var(--ds-border-information,#357de8)}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}
 ._otyr196n{margin-bottom:var(--ds-space-negative-075,-6px)}

package/dist/cjs/ui/IndicatorBar/IndicatorBar.js

@@ -9,25 +9,36 @@ exports.IndicatorBar = IndicatorBar;
 require("./IndicatorBar.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _factory = require("../../pm-plugins/decorations/colorSchemes/factory");
+var _schemes = require("../../pm-plugins/decorations/colorSchemes/schemes");
 var _decorationKeys = require("../../pm-plugins/decorations/decorationKeys");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var barStyles = null;
+var getIndicatorColor = function getIndicatorColor(colorScheme, isInserted) {
+  if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
+    return "var(--ds-border-information, #357DE8)";
+  }
+  return (0, _factory.getAccentBorderColor)(_schemes.colorSchemeRegistry[colorScheme][isInserted ? 'insertColor' : 'deleteColor']);
+};
 function IndicatorBar(_ref) {
   var anchorTop = _ref.anchorTop,
     anchorBottom = _ref.anchorBottom,
     anchorLeft = _ref.anchorLeft,
-    anchorLeftFallback = _ref.anchorLeftFallback;
+    anchorLeftFallback = _ref.anchorLeftFallback,
+    colorScheme = _ref.colorScheme,
+    isInserted = _ref.isInserted;
   var leftAnchors = [anchorLeft, anchorLeftFallback, _decorationKeys.AnchorDocMarginKey].filter(Boolean).map(function (anchor) {
     return "anchor(--".concat(anchor, " left)");
   }).join(', ');
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "diff-indicator-bar",
     style: {
+      backgroundColor: getIndicatorColor(colorScheme, isInserted),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       left: "min(".concat(leftAnchors, ")"),
       top: "anchor(--".concat(anchorTop, " top)"),
       bottom: "anchor(--".concat(anchorBottom, " bottom)")
     },
-    className: (0, _runtime.ax)(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+    className: (0, _runtime.ax)(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
   });
 }

package/dist/cjs/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -17,6 +17,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
       {
         return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: (0, _decorationKeys.buildAnchorDecorationKey)({
             diffId: descriptor.id,
             anchorType: _decorationKeys.AnchorTypeKey.from
@@ -41,6 +43,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
         });
         return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: (0, _decorationKeys.buildAnchorDecorationKey)({
@@ -53,6 +57,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
       {
         return /*#__PURE__*/_react.default.createElement(_IndicatorBar.IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: (0, _decorationKeys.buildAnchorDecorationKey)({
             diffId: descriptor.id
           }),

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

@@ -152,6 +152,11 @@ export function getAccentTokens(color) {
   };
 }
 
+/** Border token for a contributor accent, used by the diff indicator. */
+export function getAccentBorderColor(color) {
+  return borderAccent(color);
+}
+
 /** Ring colour for an active (scroll-target) deleted block outline. */
 function deletedBlockOutlineActiveRing(colors) {
   return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);

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

@@ -6,8 +6,8 @@ import { isExtendedEnabled } from '../isExtendedEnabled';
 import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildDeletedBlockNodeStyle, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildInsertedBlockNodeStyle } from './colorSchemes/factory';
 import { colorSchemeRegistry, getLegacyColorScheme } from './colorSchemes/schemes';
 import { createBlockIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
-import { createContributorTagWidget } from './createContributorTagWidget';
-import { buildDiffDecorationSpec } from './decorationKeys';
+import { createContributorTagWidget, isContributorTagWidgetEnabled } from './createContributorTagWidget';
+import { AnchorTypeKey, buildAnchorDecorationKey, buildDiffDecorationSpec } from './decorationKeys';
 import { getBlockNodeStyleLegacy, resolveCellOverlayStyleLegacy } from './createBlockChangedDecoration.styles.legacy';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -178,13 +178,20 @@ export const createBlockChangedDecoration = ({
     from: change.from,
     name: change.name
   });
+  // Named so this block's own tag can position against it; see `createContributorTagWidget`.
+  const tagAnchorName = shouldTagBlock && isContributorTagWidgetEnabled() ? buildAnchorDecorationKey({
+    diffId,
+    anchorType: AnchorTypeKey.tag
+  }) : undefined;
   if (shouldHideDeleted) {
     return [Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, buildDiffDecorationSpec({
+      colorScheme,
       decorationType: 'block',
       diffId,
       isActive,
+      isInserted,
       nodeName: change.name,
       diffType
     }))];
@@ -214,13 +221,16 @@ export const createBlockChangedDecoration = ({
     }));
   }
   // isInserted is only read under the extended experience, so pass it unconditionally.
-  const style = getBlockNodeStyle({
+  const nodeStyle = getBlockNodeStyle({
     nodeName: change.name,
     colorScheme,
     isInserted,
     isActive,
     diffType
   });
+  const style = tagAnchorName ? [nodeStyle, convertToInlineCss({
+    anchorName: `--${tagAnchorName}`
+  })].filter(Boolean).join(' ') : nodeStyle;
   const className = getNodeClass(change.name);
   if (style || className) {
     decorations.push(Decoration.node(change.from, change.to, {
@@ -260,6 +270,7 @@ export const createBlockChangedDecoration = ({
   if (shouldTagBlock && doc) {
     const tagWidget = createContributorTagWidget({
       anchorAtRangeStart: true,
+      anchorName: tagAnchorName,
       doc,
       from: change.from,
       to: change.to,

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

@@ -211,9 +211,11 @@ export const createChangedRowDecorationWidgets = ({
     const diffId = crypto.randomUUID();
     return Decoration.widget(safeInsertPos, rowDOM, {
       ...buildDiffDecorationSpec({
+        colorScheme,
         decorationType: 'widget',
         diffId,
         isActive: false,
+        isInserted,
         diffType
       })
     });

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

@@ -27,6 +27,7 @@ export const isContributorTagWidgetEnabled = () => fg('confluence_ncs_step_diffi
  * (EDITOR-8702).
  */
 export const mountContributorTag = ({
+  anchorName,
   diffId,
   host,
   mountContext
@@ -36,6 +37,7 @@ export const mountContributorTag = ({
   }
   const controller = new ContributorTagController({
     ...mountContext,
+    anchorName,
     diffId
   });
   controller.mount(host);
@@ -65,14 +67,23 @@ export const unmountContributorTag = mount => {
 /**
  * A zero-size inline host for one contributor tag. `position: relative` makes it the containing
  * block of the absolutely positioned tag, so the tag sits on the change with no measurement.
+ *
+ * An anchored tag takes a static host instead: an anchor is only acceptable when it sits inside the
+ * tag's containing block, and the block node is not inside this host. Measured in Chrome 153 — a
+ * relative host makes the `anchor()` insets resolve to `auto`.
  */
-const buildContributorTagHost = diffId => {
+const buildContributorTagHost = (diffId, anchorName) => {
   const host = document.createElement('span');
   host.setAttribute(CONTRIBUTOR_TAG_HOST_ATTRIBUTE, diffId);
-  host.style.setProperty('position', 'relative');
+  if (!anchorName) {
+    host.style.setProperty('position', 'relative');
+  }
   return host;
 };
 
+/** Without anchor positioning the tag keeps its host-relative placement. */
+const supportsAnchorPositioning = () => typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('bottom', 'anchor(--a top)');
+
 /**
  * The host for a tag on deleted content, which renders inside its own widget decoration rather than
  * needing one of its own. Unmount with `unmountContributorTag` from that widget's `destroy`.
@@ -171,6 +182,7 @@ const resolveCodeBlockStart = (doc, pos) => {
  */
 export const createContributorTagWidget = ({
   anchorAtRangeStart = false,
+  anchorName,
   doc,
   from,
   to,
@@ -180,6 +192,7 @@ export const createContributorTagWidget = ({
   if (!isContributorTagWidgetEnabled()) {
     return undefined;
   }
+  const tagAnchorName = anchorName && supportsAnchorPositioning() ? anchorName : undefined;
 
   // Reassigned when ProseMirror redraws this decoration, which it may do more than once for the
   // same `Decoration` instance.
@@ -190,8 +203,9 @@ export const createContributorTagWidget = ({
   return Decoration.widget(
   // Keep the host out of the table row's grid (EDITOR-8442).
   clampAnchorPosIntoCell(doc, codeBlockPos !== null && codeBlockPos !== void 0 ? codeBlockPos : anchorPos, 1), () => {
-    const host = buildContributorTagHost(diffId);
+    const host = buildContributorTagHost(diffId, tagAnchorName);
     mount = mountContributorTag({
+      anchorName: tagAnchorName,
       diffId,
       host,
       mountContext

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

@@ -74,8 +74,10 @@ const createTableCellContentWidgets = ({
     // and pushes the widget into the next cell. `targetPos` is the correct spot.
     decorations.push(Decoration.widget(targetPos, dom, {
       ...buildDiffDecorationSpec({
+        colorScheme,
         decorationType: 'widget',
         diffId: crypto.randomUUID(),
+        isInserted,
         diffType,
         ...(isExtendedEnabled(diffType) && {
           side: -1
@@ -414,8 +416,10 @@ export const createNodeChangedDecorationWidget = ({
       defaultSpacer.style.marginTop = "var(--ds-space-100, 8px)";
       decorations.push(Decoration.widget(safeInsertPos, defaultSpacer, {
         ...buildDiffDecorationSpec({
+          colorScheme,
           decorationType: 'widget',
           diffId: crypto.randomUUID(),
+          isInserted,
           diffType
         })
       }));

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

@@ -12,7 +12,9 @@ export const AnchorTypeKey = {
   from: 'from',
   to: 'to',
   left: 'left',
-  docMargin: 'doc-margin'
+  docMargin: 'doc-margin',
+  /** The decorated block itself, which its contributor tag positions against. */
+  tag: 'tag'
 };
 
 /**
@@ -77,14 +79,14 @@ export const buildDiffDecorationSpec = ({
   ...(attributionKey ? {
     attributionKey
   } : {}),
-  // Only alongside an attribution key, so the spec shape is unchanged when the gate is off.
+  // Active state is only needed by contributor tags, so keep it alongside an attribution key.
   ...(attributionKey && isActive !== undefined ? {
     isActive
   } : {}),
-  ...(attributionKey && isInserted !== undefined ? {
+  ...(isInserted !== undefined ? {
     isInserted
   } : {}),
-  ...(attributionKey && colorScheme ? {
+  ...(colorScheme ? {
     colorScheme
   } : {}),
   ...(nodeName ? {
@@ -138,7 +140,13 @@ export const extractDiffDescriptors = decorations => decorations.find(undefined,
   spec
 }) => {
   return {
+    ...(spec.colorScheme ? {
+      colorScheme: spec.colorScheme
+    } : {}),
     id: spec.diffId,
+    ...(spec.isInserted !== undefined ? {
+      isInserted: spec.isInserted
+    } : {}),
     type: spec.decorationType
   };
 });

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

@@ -172,10 +172,19 @@ const createSpan = (doc, style, attributes = {}) => {
  *
  * Built element by element rather than through `DOMSerializer.renderSpec`, which returns `Node` and
  * would need a cast per reference below.
+ *
+ * `anchorName` is the `anchor-name` its block carries — see `createContributorTagWidget`.
  */
-export const buildContributorTagDom = doc => {
+export const buildContributorTagDom = (doc, anchorName) => {
   const labelId = generateLabelId();
   const root = createSpan(doc, constraintStyle);
+  if (anchorName) {
+    // Anchored to the block's own box, so the tag clears whatever margin its node type has — the
+    // same `anchor()` insets the `IndicatorBar` uses. A browser without anchor positioning rejects
+    // these values and keeps the `bottom: 100%` fallback above.
+    root.style.setProperty('bottom', `anchor(--${anchorName} top)`);
+    root.style.setProperty('inset-inline-start', `anchor(--${anchorName} left)`);
+  }
   const tag = createSpan(doc, tagStyle, {
     class: CONTRIBUTOR_TAG_CLASS,
     'data-testid': CONTRIBUTOR_TAG_TESTID,

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

@@ -160,7 +160,7 @@ export class ContributorTagController {
       return;
     }
     if (!this.dom) {
-      this.dom = buildContributorTagDom(host.ownerDocument);
+      this.dom = buildContributorTagDom(host.ownerDocument, this.options.anchorName);
       this.bindTag(this.dom);
       host.appendChild(this.dom.root);
     }

package/dist/es2019/ui/IndicatorBar/IndicatorBar.compiled.css

@@ -2,7 +2,6 @@
 ._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
 ._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
 ._1bsb1l7b{width:3px}
-._bfhkvbh5{background-color:var(--ds-border-information,#357de8)}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}
 ._otyr196n{margin-bottom:var(--ds-space-negative-075,-6px)}

package/dist/es2019/ui/IndicatorBar/IndicatorBar.js

@@ -2,23 +2,34 @@
 import "./IndicatorBar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { getAccentBorderColor } from '../../pm-plugins/decorations/colorSchemes/factory';
+import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
 import { AnchorDocMarginKey } from '../../pm-plugins/decorations/decorationKeys';
 const barStyles = null;
+const getIndicatorColor = (colorScheme, isInserted) => {
+  if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
+    return "var(--ds-border-information, #357DE8)";
+  }
+  return getAccentBorderColor(colorSchemeRegistry[colorScheme][isInserted ? 'insertColor' : 'deleteColor']);
+};
 export function IndicatorBar({
   anchorTop,
   anchorBottom,
   anchorLeft,
-  anchorLeftFallback
+  anchorLeftFallback,
+  colorScheme,
+  isInserted
 }) {
   const leftAnchors = [anchorLeft, anchorLeftFallback, AnchorDocMarginKey].filter(Boolean).map(anchor => `anchor(--${anchor} left)`).join(', ');
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "diff-indicator-bar",
     style: {
+      backgroundColor: getIndicatorColor(colorScheme, isInserted),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       left: `min(${leftAnchors})`,
       top: `anchor(--${anchorTop} top)`,
       bottom: `anchor(--${anchorBottom} bottom)`
     },
-    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
   });
 }

package/dist/es2019/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -10,6 +10,8 @@ const renderIndicatorBar = descriptor => {
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: buildAnchorDecorationKey({
             diffId: descriptor.id,
             anchorType: AnchorTypeKey.from
@@ -34,6 +36,8 @@ const renderIndicatorBar = descriptor => {
         });
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: buildAnchorDecorationKey({
@@ -46,6 +50,8 @@ const renderIndicatorBar = descriptor => {
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: buildAnchorDecorationKey({
             diffId: descriptor.id
           }),

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

@@ -155,6 +155,11 @@ export function getAccentTokens(color) {
   };
 }
 
+/** Border token for a contributor accent, used by the diff indicator. */
+export function getAccentBorderColor(color) {
+  return borderAccent(color);
+}
+
 /** Ring colour for an active (scroll-target) deleted block outline. */
 function deletedBlockOutlineActiveRing(colors) {
   return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);

package/dist/esm/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -10,8 +10,8 @@ import { isExtendedEnabled } from '../isExtendedEnabled';
 import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildDeletedBlockNodeStyle, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildInsertedBlockNodeStyle } from './colorSchemes/factory';
 import { colorSchemeRegistry, getLegacyColorScheme } from './colorSchemes/schemes';
 import { createBlockIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
-import { createContributorTagWidget } from './createContributorTagWidget';
-import { buildDiffDecorationSpec } from './decorationKeys';
+import { createContributorTagWidget, isContributorTagWidgetEnabled } from './createContributorTagWidget';
+import { AnchorTypeKey, buildAnchorDecorationKey, buildDiffDecorationSpec } from './decorationKeys';
 import { getBlockNodeStyleLegacy, resolveCellOverlayStyleLegacy } from './createBlockChangedDecoration.styles.legacy';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -191,13 +191,20 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     from: change.from,
     name: change.name
   });
+  // Named so this block's own tag can position against it; see `createContributorTagWidget`.
+  var tagAnchorName = shouldTagBlock && isContributorTagWidgetEnabled() ? buildAnchorDecorationKey({
+    diffId: diffId,
+    anchorType: AnchorTypeKey.tag
+  }) : undefined;
   if (shouldHideDeleted) {
     return [Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, buildDiffDecorationSpec({
+      colorScheme: colorScheme,
       decorationType: 'block',
       diffId: diffId,
       isActive: isActive,
+      isInserted: isInserted,
       nodeName: change.name,
       diffType: diffType
     }))];
@@ -227,13 +234,16 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     }));
   }
   // isInserted is only read under the extended experience, so pass it unconditionally.
-  var style = getBlockNodeStyle({
+  var nodeStyle = getBlockNodeStyle({
     nodeName: change.name,
     colorScheme: colorScheme,
     isInserted: isInserted,
     isActive: isActive,
     diffType: diffType
   });
+  var style = tagAnchorName ? [nodeStyle, convertToInlineCss({
+    anchorName: "--".concat(tagAnchorName)
+  })].filter(Boolean).join(' ') : nodeStyle;
   var className = getNodeClass(change.name);
   if (style || className) {
     decorations.push(Decoration.node(change.from, change.to, _objectSpread({
@@ -271,6 +281,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
   if (shouldTagBlock && doc) {
     var tagWidget = createContributorTagWidget({
       anchorAtRangeStart: true,
+      anchorName: tagAnchorName,
       doc: doc,
       from: change.from,
       to: change.to,

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

@@ -234,9 +234,11 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
     originalDoc.slice(changedRow.fromA, changedRow.toA));
     var diffId = crypto.randomUUID();
     return Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, buildDiffDecorationSpec({
+      colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: diffId,
       isActive: false,
+      isInserted: isInserted,
       diffType: diffType
     })));
   });

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

@@ -32,13 +32,15 @@ export var isContributorTagWidgetEnabled = function isContributorTagWidgetEnable
  * (EDITOR-8702).
  */
 export var mountContributorTag = function mountContributorTag(_ref) {
-  var diffId = _ref.diffId,
+  var anchorName = _ref.anchorName,
+    diffId = _ref.diffId,
     host = _ref.host,
     mountContext = _ref.mountContext;
   if (!mountContext) {
     return undefined;
   }
   var controller = new ContributorTagController(_objectSpread(_objectSpread({}, mountContext), {}, {
+    anchorName: anchorName,
     diffId: diffId
   }));
   controller.mount(host);
@@ -70,14 +72,25 @@ export var unmountContributorTag = function unmountContributorTag(mount) {
 /**
  * A zero-size inline host for one contributor tag. `position: relative` makes it the containing
  * block of the absolutely positioned tag, so the tag sits on the change with no measurement.
+ *
+ * An anchored tag takes a static host instead: an anchor is only acceptable when it sits inside the
+ * tag's containing block, and the block node is not inside this host. Measured in Chrome 153 — a
+ * relative host makes the `anchor()` insets resolve to `auto`.
  */
-var buildContributorTagHost = function buildContributorTagHost(diffId) {
+var buildContributorTagHost = function buildContributorTagHost(diffId, anchorName) {
   var host = document.createElement('span');
   host.setAttribute(CONTRIBUTOR_TAG_HOST_ATTRIBUTE, diffId);
-  host.style.setProperty('position', 'relative');
+  if (!anchorName) {
+    host.style.setProperty('position', 'relative');
+  }
   return host;
 };
 
+/** Without anchor positioning the tag keeps its host-relative placement. */
+var supportsAnchorPositioning = function supportsAnchorPositioning() {
+  return typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('bottom', 'anchor(--a top)');
+};
+
 /**
  * The host for a tag on deleted content, which renders inside its own widget decoration rather than
  * needing one of its own. Unmount with `unmountContributorTag` from that widget's `destroy`.
@@ -177,6 +190,7 @@ var resolveCodeBlockStart = function resolveCodeBlockStart(doc, pos) {
 export var createContributorTagWidget = function createContributorTagWidget(_ref3) {
   var _ref3$anchorAtRangeSt = _ref3.anchorAtRangeStart,
     anchorAtRangeStart = _ref3$anchorAtRangeSt === void 0 ? false : _ref3$anchorAtRangeSt,
+    anchorName = _ref3.anchorName,
     doc = _ref3.doc,
     from = _ref3.from,
     to = _ref3.to,
@@ -185,6 +199,7 @@ export var createContributorTagWidget = function createContributorTagWidget(_ref
   if (!isContributorTagWidgetEnabled()) {
     return undefined;
   }
+  var tagAnchorName = anchorName && supportsAnchorPositioning() ? anchorName : undefined;
 
   // Reassigned when ProseMirror redraws this decoration, which it may do more than once for the
   // same `Decoration` instance.
@@ -195,8 +210,9 @@ export var createContributorTagWidget = function createContributorTagWidget(_ref
   return Decoration.widget(
   // Keep the host out of the table row's grid (EDITOR-8442).
   clampAnchorPosIntoCell(doc, codeBlockPos !== null && codeBlockPos !== void 0 ? codeBlockPos : anchorPos, 1), function () {
-    var host = buildContributorTagHost(diffId);
+    var host = buildContributorTagHost(diffId, tagAnchorName);
     mount = mountContributorTag({
+      anchorName: tagAnchorName,
       diffId: diffId,
       host: host,
       mountContext: mountContext

package/dist/esm/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -77,8 +77,10 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
     // Skip findSafeInsertPos: it walks forward to a schema-valid cell-insert point
     // and pushes the widget into the next cell. `targetPos` is the correct spot.
     decorations.push(Decoration.widget(targetPos, dom, _objectSpread({}, buildDiffDecorationSpec(_objectSpread({
+      colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: crypto.randomUUID(),
+      isInserted: isInserted,
       diffType: diffType
     }, isExtendedEnabled(diffType) && {
       side: -1
@@ -421,8 +423,10 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
       defaultSpacer.style.display = 'block';
       defaultSpacer.style.marginTop = "var(--ds-space-100, 8px)";
       decorations.push(Decoration.widget(safeInsertPos, defaultSpacer, _objectSpread({}, buildDiffDecorationSpec({
+        colorScheme: colorScheme,
         decorationType: 'widget',
         diffId: crypto.randomUUID(),
+        isInserted: isInserted,
         diffType: diffType
       }))));
     }

package/dist/esm/pm-plugins/decorations/decorationKeys.js

@@ -16,7 +16,9 @@ export var AnchorTypeKey = {
   from: 'from',
   to: 'to',
   left: 'left',
-  docMargin: 'doc-margin'
+  docMargin: 'doc-margin',
+  /** The decorated block itself, which its contributor tag positions against. */
+  tag: 'tag'
 };
 
 /**
@@ -80,9 +82,9 @@ export var buildDiffDecorationSpec = function buildDiffDecorationSpec(_ref3) {
     attributionKey: attributionKey
   } : {}), attributionKey && isActive !== undefined ? {
     isActive: isActive
-  } : {}), attributionKey && isInserted !== undefined ? {
+  } : {}), isInserted !== undefined ? {
     isInserted: isInserted
-  } : {}), attributionKey && colorScheme ? {
+  } : {}), colorScheme ? {
     colorScheme: colorScheme
   } : {}), nodeName ? {
     nodeName: nodeName
@@ -138,9 +140,14 @@ export var isDiffDecoration = function isDiffDecoration(decoration) {
 export var extractDiffDescriptors = function extractDiffDescriptors(decorations) {
   return decorations.find(undefined, undefined, isDiffDecorationSpec).filter(isDiffDecoration).map(function (_ref5) {
     var spec = _ref5.spec;
-    return {
-      id: spec.diffId,
+    return _objectSpread(_objectSpread(_objectSpread({}, spec.colorScheme ? {
+      colorScheme: spec.colorScheme
+    } : {}), {}, {
+      id: spec.diffId
+    }, spec.isInserted !== undefined ? {
+      isInserted: spec.isInserted
+    } : {}), {}, {
       type: spec.decorationType
-    };
+    });
   });
 };

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

@@ -179,10 +179,19 @@ var createSpan = function createSpan(doc, style) {
  *
  * Built element by element rather than through `DOMSerializer.renderSpec`, which returns `Node` and
  * would need a cast per reference below.
+ *
+ * `anchorName` is the `anchor-name` its block carries — see `createContributorTagWidget`.
  */
-export var buildContributorTagDom = function buildContributorTagDom(doc) {
+export var buildContributorTagDom = function buildContributorTagDom(doc, anchorName) {
   var labelId = generateLabelId();
   var root = createSpan(doc, constraintStyle);
+  if (anchorName) {
+    // Anchored to the block's own box, so the tag clears whatever margin its node type has — the
+    // same `anchor()` insets the `IndicatorBar` uses. A browser without anchor positioning rejects
+    // these values and keeps the `bottom: 100%` fallback above.
+    root.style.setProperty('bottom', "anchor(--".concat(anchorName, " top)"));
+    root.style.setProperty('inset-inline-start', "anchor(--".concat(anchorName, " left)"));
+  }
   var tag = createSpan(doc, tagStyle, {
     class: CONTRIBUTOR_TAG_CLASS,
     'data-testid': CONTRIBUTOR_TAG_TESTID,

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

@@ -179,7 +179,7 @@ export var ContributorTagController = /*#__PURE__*/function () {
         return;
       }
       if (!this.dom) {
-        this.dom = buildContributorTagDom(host.ownerDocument);
+        this.dom = buildContributorTagDom(host.ownerDocument, this.options.anchorName);
         this.bindTag(this.dom);
         host.appendChild(this.dom.root);
       }

package/dist/esm/ui/IndicatorBar/IndicatorBar.compiled.css

@@ -2,7 +2,6 @@
 ._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
 ._19pk196n{margin-top:var(--ds-space-negative-075,-6px)}
 ._1bsb1l7b{width:3px}
-._bfhkvbh5{background-color:var(--ds-border-information,#357de8)}
 ._kqswstnw{position:absolute}
 ._lcxvglyw{pointer-events:none}
 ._otyr196n{margin-bottom:var(--ds-space-negative-075,-6px)}

package/dist/esm/ui/IndicatorBar/IndicatorBar.js

@@ -2,24 +2,35 @@
 import "./IndicatorBar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { getAccentBorderColor } from '../../pm-plugins/decorations/colorSchemes/factory';
+import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
 import { AnchorDocMarginKey } from '../../pm-plugins/decorations/decorationKeys';
 var barStyles = null;
+var getIndicatorColor = function getIndicatorColor(colorScheme, isInserted) {
+  if (colorScheme === undefined || colorScheme === 'standard' || colorScheme === 'traditional' || isInserted === undefined) {
+    return "var(--ds-border-information, #357DE8)";
+  }
+  return getAccentBorderColor(colorSchemeRegistry[colorScheme][isInserted ? 'insertColor' : 'deleteColor']);
+};
 export function IndicatorBar(_ref) {
   var anchorTop = _ref.anchorTop,
     anchorBottom = _ref.anchorBottom,
     anchorLeft = _ref.anchorLeft,
-    anchorLeftFallback = _ref.anchorLeftFallback;
+    anchorLeftFallback = _ref.anchorLeftFallback,
+    colorScheme = _ref.colorScheme,
+    isInserted = _ref.isInserted;
   var leftAnchors = [anchorLeft, anchorLeftFallback, AnchorDocMarginKey].filter(Boolean).map(function (anchor) {
     return "anchor(--".concat(anchor, " left)");
   }).join(', ');
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": "diff-indicator-bar",
     style: {
+      backgroundColor: getIndicatorColor(colorScheme, isInserted),
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       left: "min(".concat(leftAnchors, ")"),
       top: "anchor(--".concat(anchorTop, " top)"),
       bottom: "anchor(--".concat(anchorBottom, " bottom)")
     },
-    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _bfhkvbh5 _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
+    className: ax(["_2rko1rr0 _kqswstnw _1bsb1l7b _lcxvglyw _18u0mgjw _17c61i8t _19pk196n _otyr196n"])
   });
 }

package/dist/esm/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -10,6 +10,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: buildAnchorDecorationKey({
             diffId: descriptor.id,
             anchorType: AnchorTypeKey.from
@@ -34,6 +36,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
         });
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: blockAnchor,
           anchorBottom: blockAnchor,
           anchorLeft: buildAnchorDecorationKey({
@@ -46,6 +50,8 @@ var renderIndicatorBar = function renderIndicatorBar(descriptor) {
       {
         return /*#__PURE__*/React.createElement(IndicatorBar, {
           key: descriptor.id,
+          colorScheme: descriptor.colorScheme,
+          isInserted: descriptor.isInserted,
           anchorTop: buildAnchorDecorationKey({
             diffId: descriptor.id
           }),

package/dist/types/pm-plugins/decorations/colorSchemes/factory.d.ts

@@ -24,6 +24,8 @@ export declare function getAccentTokens(color: AdsAccentColor): {
     background: string;
     text: string;
 };
+/** Border token for a contributor accent, used by the diff indicator. */
+export declare function getAccentBorderColor(color: AdsAccentColor): string;
 /** Inline inserted content — default state. */
 export declare function buildInsertStyle(colors: DiffColorScheme): string;
 /** Inline insert style for content within a block node (no background, underline only). */

package/dist/types/pm-plugins/decorations/createContributorTagWidget.d.ts

@@ -28,7 +28,8 @@ export type ContributorTagMount = {
  * destroying the one it replaces, the outgoing `destroy` cannot take the incoming tag down with it
  * (EDITOR-8702).
  */
-export declare const mountContributorTag: ({ diffId, host, mountContext, }: {
+export declare const mountContributorTag: ({ anchorName, diffId, host, mountContext, }: {
+    anchorName?: string;
     diffId: string;
     host: HTMLElement;
     mountContext: ContributorTagMountContext | undefined;
@@ -50,12 +51,18 @@ export declare const createContributorTagHost: (diffId: string, mountContext?: C
  * The tag is mounted in `toDOM` and taken down in `destroy`, so it lives exactly as long as the host
  * element ProseMirror drew it into — see `mountContributorTag`.
  */
-export declare const createContributorTagWidget: ({ anchorAtRangeStart, doc, from, to, diffId, mountContext, }: {
+export declare const createContributorTagWidget: ({ anchorAtRangeStart, anchorName, doc, from, to, diffId, mountContext, }: {
     /**
      * Anchor the host at `from` instead of the range's first inline content, so a block range hosts
      * its tag outside the node rather than inside its content DOM.
      */
     anchorAtRangeStart?: boolean;
+    /**
+     * The `anchor-name` the block's own decoration carries, so the tag positions against that box
+     * rather than against its host — the block's margin and padding are then the browser's to
+     * resolve, and the tag sits on the same corner for every node type (EDITOR-8933).
+     */
+    anchorName?: string;
     diffId: string;
     doc: PMNode;
     from: number;

package/dist/types/pm-plugins/decorations/decorationKeys.d.ts

@@ -46,6 +46,8 @@ export declare const AnchorTypeKey: {
     readonly to: 'to';
     readonly left: 'left';
     readonly docMargin: 'doc-margin';
+    /** The decorated block itself, which its contributor tag positions against. */
+    readonly tag: 'tag';
 };
 export type InlineAnchorType = Exclude<(typeof AnchorTypeKey)[keyof typeof AnchorTypeKey], typeof AnchorTypeKey.docMargin>;
 export type AnchorDecorationSpec = (BaseDecorationSpec<typeof DecorationFamily.anchor> & {

package/dist/types/showDiffPluginType.d.ts

@@ -103,7 +103,9 @@ export type DeletedDiffWidget = {
 };
 export type SmartDiffThresholds = SmartDiffThresholdsInternal;
 export type DiffDescriptor = {
+    colorScheme?: ColorScheme;
     id: string;
+    isInserted?: boolean;
     type: 'inline' | 'block' | 'widget';
 };
 /**

package/dist/types/ui/ContributorTag/buildContributorTagDom.d.ts

@@ -60,5 +60,7 @@ export type ContributorTagDom = {
  *
  * Built element by element rather than through `DOMSerializer.renderSpec`, which returns `Node` and
  * would need a cast per reference below.
+ *
+ * `anchorName` is the `anchor-name` its block carries — see `createContributorTagWidget`.
  */
-export declare const buildContributorTagDom: (doc: Document) => ContributorTagDom;
+export declare const buildContributorTagDom: (doc: Document, anchorName?: string) => ContributorTagDom;

package/dist/types/ui/ContributorTag/contributorTagController.d.ts

@@ -2,6 +2,8 @@ import type { IntlShape } from 'react-intl';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { ShowDiffPlugin } from '../../showDiffPluginType';
 export type ContributorTagControllerOptions = {
+    /** The `anchor-name` of the block this tag captions, when it has one. */
+    anchorName?: string;
     api?: ExtractInjectionAPI<ShowDiffPlugin>;
     diffId: string;
     /**

package/dist/types/ui/IndicatorBar/IndicatorBar.d.ts

@@ -2,9 +2,12 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-export declare function IndicatorBar({ anchorTop, anchorBottom, anchorLeft, anchorLeftFallback, }: {
+import type { ColorScheme } from '../../pm-plugins/decorations/colorSchemes/types';
+export declare function IndicatorBar({ anchorTop, anchorBottom, anchorLeft, anchorLeftFallback, colorScheme, isInserted, }: {
     anchorBottom: string;
     anchorLeft: string;
     anchorLeftFallback?: string;
     anchorTop: string;
+    colorScheme?: ColorScheme;
+    isInserted?: boolean;
 }): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "16.0.7",
+	"version": "16.0.9",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -64,7 +64,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^122.3.0",
+		"@atlaskit/editor-common": "^122.5.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"