@atlaskit/editor-plugin-show-diff 16.1.0 → 16.1.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 16.1.1
+
+### Patch Changes
+
+- [`285905eda333a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/285905eda333a) -
+  Show agent avatars before user avatars in connected contributor tags.
+- [`2adef2b5610ff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2adef2b5610ff) -
+  [ux] Supply the top margin above a diff widget that lands at the start of its parent, so deleted
+  content no longer renders flush against the node below it. A node at the start of its parent has
+  its top margin reset; a spacer shaped like that node now carries the margin instead, in the
+  document and inside layout columns, expands, sync blocks and table cells. A complete deleted
+  textblock also keeps its own block wrapper so it retains its margin, including when that block
+  carries an alignment or indentation mark. Behind the platform_editor_ai_show_diff_patch_2 feature
+  gate.
+- Updated dependencies
+
 ## 16.1.0
 
 ### Minor Changes

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

@@ -14,7 +14,11 @@ var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
 var _createContributorTagWidget = require("./createContributorTagWidget");
 var _decorationKeys = require("./decorationKeys");
+var _absorbFirstChildMarginReset = require("./utils/absorbFirstChildMarginReset");
+var _createMarginAbsorber = require("./utils/createMarginAbsorber");
+var _createNodeShapedMarginSpacer = require("./utils/createNodeShapedMarginSpacer");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
+var _safeResolve = require("./utils/safeResolve");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
 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) { (0, _defineProperty2.default)(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; }
@@ -190,6 +194,14 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
   var $safeInsertPos = newDoc.resolve(safeInsertPos);
+
+  // Whether the widget renders above the very start of its parent's content — the document, a
+  // layout column, a table cell, a panel.
+  //
+  // `parentOffset === 0` is the whole test on the position side: prosemirror-view paints every
+  // widget at a position before the node starting there, so a leading widget at the parent's start
+  // always renders above its content.
+  var isVisuallyFirstInParent = !placeBelow && $safeInsertPos.parentOffset === 0;
   var isTopLevelInsert = $safeInsertPos.depth === 0;
   var hasPreviousBlock = ((_$safeInsertPos$nodeB = $safeInsertPos.nodeBefore) === null || _$safeInsertPos$nodeB === void 0 ? void 0 : _$safeInsertPos$nodeB.isBlock) === true;
   var isFirstDocHeadingReplacement = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && !placeBelow && change.fromB === 0 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'heading' && ((_newDoc$firstChild = newDoc.firstChild) === null || _newDoc$firstChild === void 0 ? void 0 : _newDoc$firstChild.type.name) === 'heading';
@@ -241,6 +253,20 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   var firstReplacedNode = slice.content.firstChild;
   var lastReplacedNode = slice.content.lastChild;
   var showDiffPatch1 = (0, _fg.fg)('platform_editor_ai_show_diff_patch_1');
+  // Whether the slice's outermost textblocks still hold all of their original content.
+  //
+  // `openStart`/`openEnd` say whether the cut landed inside a block, but not whether it took
+  // any text with it — a deletion stopping exactly at a block's content boundary is still
+  // reported as open. Resolving the change's own ends separates the two, so a block whose text
+  // survived intact can render as a block even though its boundary was open.
+  //
+  // Both resolves sit behind the gate that consumes them, so this adds no position arithmetic to
+  // the ungated path, and an unresolvable position degrades to the `openStart`/`openEnd` test on
+  // its own — the block is then treated as partial, which is what it rendered as before the gate.
+  var $changeFromA = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? (0, _safeResolve.safeResolve)(doc, change.fromA) : null;
+  var $changeToA = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? (0, _safeResolve.safeResolve)(doc, change.toA) : null;
+  var isFirstNodeContentComplete = slice.openStart === 0 || ($changeFromA === null || $changeFromA === void 0 ? void 0 : $changeFromA.parentOffset) === 0;
+  var isLastNodeContentComplete = slice.openEnd === 0 || $changeToA !== null && $changeToA.parentOffset === $changeToA.parent.content.size;
   var isCompleteSameTypeReplacement = slice.content.childCount === 1 && firstReplacedNode !== null && replacementNode !== null && firstReplacedNode.type === replacementNode.type && replacementNode.nodeSize === change.toB - change.fromB;
 
   /*
@@ -253,10 +279,16 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     var isLast = lastReplacedNode === node;
     var isOpenAtSliceBoundary = isFirst && slice.openStart > 0 || isLast && slice.openEnd > 0;
     var shouldPreserveCompleteMultiInlineBlock = showDiffPatch1 && node.isBlock && node.type.inlineContent && node.content.childCount > 1 && !isOpenAtSliceBoundary && isCompleteSameTypeReplacement;
+    // A textblock is otherwise serialized as its inline content only, with no `<p>`/`<h2>` wrapper.
+    // That is right when the diff cuts into an existing block — the deleted text belongs on the same
+    // line as the text that replaced it — but when the whole block went away it drops the very
+    // element that carries the block's margin, so the deleted block renders flush against its
+    // neighbours. Only the first and last children can be partial; middle ones are always complete.
+    var shouldRenderAsBlockNode = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && node.isTextblock && (!isFirst || isFirstNodeContentComplete) && (!isLast || isLastNodeContentComplete);
 
     // Helper function to handle multiple child nodes
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
-      if (!shouldPreserveCompleteMultiInlineBlock && node.content.childCount > 1 && node.type.inlineContent) {
+      if (!shouldPreserveCompleteMultiInlineBlock && !shouldRenderAsBlockNode && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(function (childNode) {
           var childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
@@ -286,7 +318,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     if (handleMultipleChildNodes(node)) {
       return;
     }
-    if (shouldPreserveCompleteMultiInlineBlock) {
+    if (shouldPreserveCompleteMultiInlineBlock || shouldRenderAsBlockNode) {
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeNode(node);
       };
@@ -363,6 +395,21 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     dom.style.setProperty('scroll-margin-top', _decorationKeys.scrollMarginTopValue);
   }
 
+  // A block node serialized into the widget is the widget's first child, and the editor's
+  // first-child reset is written against the parent element rather than the document position — so
+  // it zeroes the margin the block wrapper was kept for in the first place.
+  //
+  // Only away from the parent's start. There the reset is the correct outcome: the widget is the
+  // first thing in the document, column, cell or panel, and a leading gap above it would be wrong.
+  // The margin that matters at that position belongs to the node *below* the widget, which the
+  // shaped spacer pair supplies instead.
+  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && !isVisuallyFirstInParent) {
+    (0, _absorbFirstChildMarginReset.absorbFirstChildMarginReset)({
+      dom: dom,
+      testId: 'show-diff-widget-margin-absorber'
+    });
+  }
+
   // Needed even when the indicator bar is off, because a contributor tag also anchors against the
   // widget.
   if ((showIndicators || showContributorTags) && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
@@ -425,7 +472,40 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   var isPureDeletion = change.fromB === change.toB;
   var isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.isBlock);
   var isDiffWidgetAtStartOfDoc = $safeInsertPos.depth === 0 && $safeInsertPos.index(0) === 0;
-  if (isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
+
+  // A node at the start of its parent has its top margin reset, so a diff widget rendered above
+  // it sits flush against it. This applies wherever that parent is — the document, a layout
+  // column, a table cell — so it is decided from the anchor rather than from the document root
+  // (see `isVisuallyFirstInParent` above).
+  //
+  // Away from the parent's start the node below keeps its own margin, and it is the block *inside*
+  // the widget that loses one — handled by `absorbFirstChildMarginReset` above, not here.
+  var nodeAfterWidget = $safeInsertPos.nodeAfter;
+  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isVisuallyFirstInParent && nodeAfterWidget) {
+    var shapedSpacer = (0, _createNodeShapedMarginSpacer.createNodeShapedMarginSpacer)({
+      node: nodeAfterWidget,
+      serializer: serializer,
+      testId: 'show-diff-shaped-margin-spacer'
+    });
+    if (shapedSpacer) {
+      // Two elements, because the two families of reset have to be handled differently. The
+      // absorber takes the document-level adjacent-sibling reset for a leading widget, whose
+      // `!important` would otherwise zero the shaped spacer's margin; the shaped spacer, now one
+      // position further along, is out of that rule's reach and keeps the margin it supplies.
+      // Inside containers the counting selectors skip both, so only the shaped one has an effect.
+      //
+      // Sides order the widgets against each other only — both still paint before the real node.
+      decorations.push(_view.Decoration.widget(safeInsertPos, (0, _createMarginAbsorber.createMarginAbsorber)({
+        testId: 'show-diff-margin-absorber'
+      }), {
+        side: 0
+      }));
+      decorations.push(_view.Decoration.widget(safeInsertPos, shapedSpacer, {
+        side: 1
+      }));
+    }
+  }
+  if (!(0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && (0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     var followingNode = $safeInsertPos.nodeAfter;
     var headingLevel = (followingNode === null || followingNode === void 0 ? void 0 : followingNode.type.name) === 'heading' ? followingNode.attrs.level : undefined;
     if (isHeadingLevel(headingLevel)) {

package/dist/cjs/pm-plugins/decorations/utils/absorbFirstChildMarginReset.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.absorbFirstChildMarginReset = void 0;
+var _createMarginAbsorber = require("./createMarginAbsorber");
+/**
+ * Keeps a block node rendered inside a diff widget from losing its own top margin.
+ *
+ * The editor's leading-block margin reset is written against the parent element, not the document
+ * position, so it fires wherever a text block is a first child — including inside the widget's own
+ * `span`, which is what a whole-block deletion renders into. The widget then has no margin of its
+ * own, and the block sits flush against whatever is above it, regardless of where in the document
+ * the widget landed.
+ *
+ * The margin is not re-supplied; it is never taken away. Prepending an element the reset does not
+ * select moves the real block off the leading position, so the ordinary `.ProseMirror p`,
+ * `.ProseMirror h2` and similar rules go on applying to it untouched. That is why this needs no
+ * knowledge of which margin the block should have — unlike `createNodeShapedMarginSpacer`, which
+ * replicates a margin that has already been zeroed and cannot be read back.
+ *
+ * Unconditional, because the absorber generates no box: it costs nothing in a widget holding
+ * inline content, which the reset was never going to match anyway. Deciding here instead would mean
+ * restating the reset's selector list, and a copy of another package's CSS drifts silently.
+ */
+var absorbFirstChildMarginReset = exports.absorbFirstChildMarginReset = function absorbFirstChildMarginReset(_ref) {
+  var dom = _ref.dom,
+    testId = _ref.testId;
+  dom.prepend((0, _createMarginAbsorber.createBoxlessMarginAbsorber)({
+    testId: testId
+  }));
+};

package/dist/cjs/pm-plugins/decorations/utils/createMarginAbsorber.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMarginAbsorber = exports.createBoxlessMarginAbsorber = void 0;
+/**
+ * An empty, invisible element whose only job is to occupy a position in the DOM.
+ *
+ * At the top of the document `firstBlockNodeStyles` zeroes the top margin of whatever element
+ * follows a leading `.ProseMirror-widget`, and it does so with `!important` — which no inline style
+ * can outrank. This takes that hit so the shaped spacer after it, one position further along, keeps
+ * the margin it is there to supply.
+ *
+ * It contributes no height (no content, border or padding) and margins collapse through it, so it
+ * cannot affect layout beyond the selector it absorbs.
+ */
+var createMarginAbsorber = exports.createMarginAbsorber = function createMarginAbsorber(_ref) {
+  var testId = _ref.testId;
+  // Block-level: an empty inline element takes the match just as well, but collapses to a
+  // zero-height line box, and the following margin then lands in the wrong place.
+  var absorber = document.createElement('div');
+  absorber.dataset.testid = testId;
+  absorber.setAttribute('aria-hidden', 'true');
+  absorber.contentEditable = 'false';
+  return absorber;
+};
+
+/**
+ * An absorber that occupies a DOM position without generating a box.
+ *
+ * Not interchangeable with `createMarginAbsorber`: a rule that selects the *rendered* sibling of a
+ * leading widget needs an element that generates a box, and this one does not.
+ */
+var createBoxlessMarginAbsorber = exports.createBoxlessMarginAbsorber = function createBoxlessMarginAbsorber(_ref2) {
+  var testId = _ref2.testId;
+  var absorber = document.createElement('div');
+  absorber.dataset.testid = testId;
+  absorber.setAttribute('aria-hidden', 'true');
+  absorber.contentEditable = 'false';
+  absorber.style.display = 'contents';
+  return absorber;
+};

package/dist/cjs/pm-plugins/decorations/utils/createNodeShapedMarginSpacer.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createNodeShapedMarginSpacer = void 0;
+/**
+ * Node types that can safely be reduced to an empty shell.
+ *
+ * A shell only replicates a margin if it collapses to nothing itself, which needs zero height and
+ * no vertical border or padding. Textblocks and lists qualify; nodes with intrinsic sizing (tables
+ * are `display: table`, media has a measured height) or a painted box (a zero-height panel is a
+ * visible stripe of background) do not, and are left alone.
+ */
+var isShapeableNode = function isShapeableNode(node) {
+  return node.isTextblock || ['bulletList', 'orderedList'].includes(node.type.name);
+};
+
+/**
+ * An invisible element shaped like `node`, used to supply the top margin `node` no longer gets.
+ *
+ * A node at the start of its parent has its top margin reset, so a diff widget rendered above it
+ * sits flush against it. The reset cannot simply be taken off the node: the container variants skip
+ * widgets when counting — `nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget,
+ * span))` in layout columns, expands, sync blocks and table cells — so no amount of extra elements
+ * moves the match. That exclusion is what makes this work instead: the spacer is a
+ * `.ProseMirror-widget`, so it is never the counted first child and keeps its own margin, while the
+ * real node goes on taking the reset.
+ *
+ * The margin is not measured. Reading it off the real node is impossible — by then the reset has
+ * set it to `0`, and both `firstBlockNodeStyles` (`!important`) and block controls' `firstNodeDec`
+ * (an inline style) make it unrecoverable. Instead the spacer carries the node's own tag, classes
+ * and attributes, so the same rules that would have given the node its margin match the spacer
+ * (`.ProseMirror p`, `.ProseMirror h2`, the root-list rule, and so on).
+ *
+ * Returns `null` when the node is not safely shapeable or serialization fails.
+ */
+var createNodeShapedMarginSpacer = exports.createNodeShapedMarginSpacer = function createNodeShapedMarginSpacer(_ref) {
+  var _node$type$createAndF;
+  var node = _ref.node,
+    serializer = _ref.serializer,
+    testId = _ref.testId;
+  if (!isShapeableNode(node)) {
+    return null;
+  }
+
+  // An empty node of the same type serializes to the same shell without walking real content.
+  var shellNode = (_node$type$createAndF = node.type.createAndFill(node.attrs)) !== null && _node$type$createAndF !== void 0 ? _node$type$createAndF : node;
+  var serialized = serializer.serializeNode(shellNode);
+  if (!(serialized instanceof HTMLElement)) {
+    return null;
+  }
+
+  // Keep the tag, classes and attributes the margin rules select on; drop anything that could
+  // occupy a line box.
+  serialized.replaceChildren();
+  serialized.dataset.testid = testId;
+  serialized.setAttribute('aria-hidden', 'true');
+  serialized.contentEditable = 'false';
+
+  // Zero height with no vertical border or padding keeps the spacer self-collapsing: its margins
+  // stay adjoining, so they collapse with the neighbours into a single margin equal to the largest
+  // rather than adding to them. That is what makes this safe in containers that never reset the
+  // first child — the spacer cannot double the gap there. Deliberately no `overflow: hidden`, which
+  // would open a block formatting context and stop that collapsing.
+  serialized.style.height = '0';
+  serialized.style.minHeight = '0';
+  serialized.style.paddingTop = '0';
+  serialized.style.paddingBottom = '0';
+  serialized.style.borderTopWidth = '0';
+  serialized.style.borderBottomWidth = '0';
+  // Only the top margin is being replicated. Left as-is, a larger bottom margin would win the
+  // self-collapse and overshoot the gap.
+  serialized.style.marginBottom = '0';
+  return serialized;
+};

package/dist/cjs/pm-plugins/decorations/utils/safeResolve.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.safeResolve = void 0;
+/**
+ * Resolves a document position, or returns `null` if it cannot be resolved.
+ *
+ * `Node.resolve` throws a `RangeError` for a position outside the document. Diff decorations are
+ * built from change ranges computed against a document that may since have moved on, so a position
+ * arriving out of range is a normal outcome rather than a defect — but an exception escaping here
+ * takes down the whole decoration set, leaving the diff unrendered.
+ *
+ * Callers are expected to treat `null` as "cannot tell" and fall back to behaviour that does not
+ * need the resolved position.
+ */
+var safeResolve = exports.safeResolve = function safeResolve(doc, pos) {
+  try {
+    return doc.resolve(pos);
+  } catch (_unused) {
+    return null;
+  }
+};

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

@@ -332,11 +332,11 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
 
       // Hand-rolled avatar stack: `@atlaskit/avatar-group` cannot render below 24px and the tag uses
       // 16px avatars.
-      var stack = model.connectedContributor ? [].concat((0, _toConsumableArray2.default)(user ? [{
-        contributor: user,
-        stackIndex: 1
-      }] : []), (0, _toConsumableArray2.default)(agent ? [{
+      var stack = model.connectedContributor ? [].concat((0, _toConsumableArray2.default)(agent ? [{
         contributor: agent,
+        stackIndex: 1
+      }] : []), (0, _toConsumableArray2.default)(user ? [{
+        contributor: user,
         stackIndex: 0
       }] : [])) : [{
         contributor: model.contributor

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

@@ -6,7 +6,11 @@ import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, unmountContributorTag } from './createContributorTagWidget';
 import { buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
+import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
+import { createMarginAbsorber } from './utils/createMarginAbsorber';
+import { createNodeShapedMarginSpacer } from './utils/createNodeShapedMarginSpacer';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
+import { safeResolve } from './utils/safeResolve';
 import { wrapBlockNodeView, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
 const isHeadingLevel = level => typeof level === 'number' && level >= 1 && level <= 6;
 
@@ -174,6 +178,14 @@ export const createNodeChangedDecorationWidget = ({
   // For non-table content, use the existing span wrapper approach
   const dom = document.createElement('span');
   const $safeInsertPos = newDoc.resolve(safeInsertPos);
+
+  // Whether the widget renders above the very start of its parent's content — the document, a
+  // layout column, a table cell, a panel.
+  //
+  // `parentOffset === 0` is the whole test on the position side: prosemirror-view paints every
+  // widget at a position before the node starting there, so a leading widget at the parent's start
+  // always renders above its content.
+  const isVisuallyFirstInParent = !placeBelow && $safeInsertPos.parentOffset === 0;
   const isTopLevelInsert = $safeInsertPos.depth === 0;
   const hasPreviousBlock = ((_$safeInsertPos$nodeB = $safeInsertPos.nodeBefore) === null || _$safeInsertPos$nodeB === void 0 ? void 0 : _$safeInsertPos$nodeB.isBlock) === true;
   const isFirstDocHeadingReplacement = isExtendedEnabled(diffType) && !placeBelow && change.fromB === 0 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'heading' && ((_newDoc$firstChild = newDoc.firstChild) === null || _newDoc$firstChild === void 0 ? void 0 : _newDoc$firstChild.type.name) === 'heading';
@@ -225,6 +237,20 @@ export const createNodeChangedDecorationWidget = ({
   const firstReplacedNode = slice.content.firstChild;
   const lastReplacedNode = slice.content.lastChild;
   const showDiffPatch1 = fg('platform_editor_ai_show_diff_patch_1');
+  // Whether the slice's outermost textblocks still hold all of their original content.
+  //
+  // `openStart`/`openEnd` say whether the cut landed inside a block, but not whether it took
+  // any text with it — a deletion stopping exactly at a block's content boundary is still
+  // reported as open. Resolving the change's own ends separates the two, so a block whose text
+  // survived intact can render as a block even though its boundary was open.
+  //
+  // Both resolves sit behind the gate that consumes them, so this adds no position arithmetic to
+  // the ungated path, and an unresolvable position degrades to the `openStart`/`openEnd` test on
+  // its own — the block is then treated as partial, which is what it rendered as before the gate.
+  const $changeFromA = fg('platform_editor_ai_show_diff_patch_2') ? safeResolve(doc, change.fromA) : null;
+  const $changeToA = fg('platform_editor_ai_show_diff_patch_2') ? safeResolve(doc, change.toA) : null;
+  const isFirstNodeContentComplete = slice.openStart === 0 || ($changeFromA === null || $changeFromA === void 0 ? void 0 : $changeFromA.parentOffset) === 0;
+  const isLastNodeContentComplete = slice.openEnd === 0 || $changeToA !== null && $changeToA.parentOffset === $changeToA.parent.content.size;
   const isCompleteSameTypeReplacement = slice.content.childCount === 1 && firstReplacedNode !== null && replacementNode !== null && firstReplacedNode.type === replacementNode.type && replacementNode.nodeSize === change.toB - change.fromB;
 
   /*
@@ -237,10 +263,16 @@ export const createNodeChangedDecorationWidget = ({
     const isLast = lastReplacedNode === node;
     const isOpenAtSliceBoundary = isFirst && slice.openStart > 0 || isLast && slice.openEnd > 0;
     const shouldPreserveCompleteMultiInlineBlock = showDiffPatch1 && node.isBlock && node.type.inlineContent && node.content.childCount > 1 && !isOpenAtSliceBoundary && isCompleteSameTypeReplacement;
+    // A textblock is otherwise serialized as its inline content only, with no `<p>`/`<h2>` wrapper.
+    // That is right when the diff cuts into an existing block — the deleted text belongs on the same
+    // line as the text that replaced it — but when the whole block went away it drops the very
+    // element that carries the block's margin, so the deleted block renders flush against its
+    // neighbours. Only the first and last children can be partial; middle ones are always complete.
+    const shouldRenderAsBlockNode = fg('platform_editor_ai_show_diff_patch_2') && node.isTextblock && (!isFirst || isFirstNodeContentComplete) && (!isLast || isLastNodeContentComplete);
 
     // Helper function to handle multiple child nodes
     const handleMultipleChildNodes = node => {
-      if (!shouldPreserveCompleteMultiInlineBlock && node.content.childCount > 1 && node.type.inlineContent) {
+      if (!shouldPreserveCompleteMultiInlineBlock && !shouldRenderAsBlockNode && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(childNode => {
           const childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
@@ -270,7 +302,7 @@ export const createNodeChangedDecorationWidget = ({
     if (handleMultipleChildNodes(node)) {
       return;
     }
-    if (shouldPreserveCompleteMultiInlineBlock) {
+    if (shouldPreserveCompleteMultiInlineBlock || shouldRenderAsBlockNode) {
       fallbackSerialization = () => serializer.serializeNode(node);
     } else if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
       fallbackSerialization = () => serializer.serializeFragment(node.content);
@@ -341,6 +373,21 @@ export const createNodeChangedDecorationWidget = ({
     dom.style.setProperty('scroll-margin-top', scrollMarginTopValue);
   }
 
+  // A block node serialized into the widget is the widget's first child, and the editor's
+  // first-child reset is written against the parent element rather than the document position — so
+  // it zeroes the margin the block wrapper was kept for in the first place.
+  //
+  // Only away from the parent's start. There the reset is the correct outcome: the widget is the
+  // first thing in the document, column, cell or panel, and a leading gap above it would be wrong.
+  // The margin that matters at that position belongs to the node *below* the widget, which the
+  // shaped spacer pair supplies instead.
+  if (fg('platform_editor_ai_show_diff_patch_2') && !isVisuallyFirstInParent) {
+    absorbFirstChildMarginReset({
+      dom,
+      testId: 'show-diff-widget-margin-absorber'
+    });
+  }
+
   // Needed even when the indicator bar is off, because a contributor tag also anchors against the
   // widget.
   if ((showIndicators || showContributorTags) && isExtendedEnabled(diffType)) {
@@ -410,7 +457,40 @@ export const createNodeChangedDecorationWidget = ({
   const isPureDeletion = change.fromB === change.toB;
   const isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.isBlock);
   const isDiffWidgetAtStartOfDoc = $safeInsertPos.depth === 0 && $safeInsertPos.index(0) === 0;
-  if (isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && isExtendedEnabled(diffType)) {
+
+  // A node at the start of its parent has its top margin reset, so a diff widget rendered above
+  // it sits flush against it. This applies wherever that parent is — the document, a layout
+  // column, a table cell — so it is decided from the anchor rather than from the document root
+  // (see `isVisuallyFirstInParent` above).
+  //
+  // Away from the parent's start the node below keeps its own margin, and it is the block *inside*
+  // the widget that loses one — handled by `absorbFirstChildMarginReset` above, not here.
+  const nodeAfterWidget = $safeInsertPos.nodeAfter;
+  if (fg('platform_editor_ai_show_diff_patch_2') && isExtendedEnabled(diffType) && isVisuallyFirstInParent && nodeAfterWidget) {
+    const shapedSpacer = createNodeShapedMarginSpacer({
+      node: nodeAfterWidget,
+      serializer,
+      testId: 'show-diff-shaped-margin-spacer'
+    });
+    if (shapedSpacer) {
+      // Two elements, because the two families of reset have to be handled differently. The
+      // absorber takes the document-level adjacent-sibling reset for a leading widget, whose
+      // `!important` would otherwise zero the shaped spacer's margin; the shaped spacer, now one
+      // position further along, is out of that rule's reach and keeps the margin it supplies.
+      // Inside containers the counting selectors skip both, so only the shaped one has an effect.
+      //
+      // Sides order the widgets against each other only — both still paint before the real node.
+      decorations.push(Decoration.widget(safeInsertPos, createMarginAbsorber({
+        testId: 'show-diff-margin-absorber'
+      }), {
+        side: 0
+      }));
+      decorations.push(Decoration.widget(safeInsertPos, shapedSpacer, {
+        side: 1
+      }));
+    }
+  }
+  if (!fg('platform_editor_ai_show_diff_patch_2') && isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && isExtendedEnabled(diffType)) {
     const followingNode = $safeInsertPos.nodeAfter;
     const headingLevel = (followingNode === null || followingNode === void 0 ? void 0 : followingNode.type.name) === 'heading' ? followingNode.attrs.level : undefined;
     if (isHeadingLevel(headingLevel)) {

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

@@ -0,0 +1,29 @@
+import { createBoxlessMarginAbsorber } from './createMarginAbsorber';
+
+/**
+ * Keeps a block node rendered inside a diff widget from losing its own top margin.
+ *
+ * The editor's leading-block margin reset is written against the parent element, not the document
+ * position, so it fires wherever a text block is a first child — including inside the widget's own
+ * `span`, which is what a whole-block deletion renders into. The widget then has no margin of its
+ * own, and the block sits flush against whatever is above it, regardless of where in the document
+ * the widget landed.
+ *
+ * The margin is not re-supplied; it is never taken away. Prepending an element the reset does not
+ * select moves the real block off the leading position, so the ordinary `.ProseMirror p`,
+ * `.ProseMirror h2` and similar rules go on applying to it untouched. That is why this needs no
+ * knowledge of which margin the block should have — unlike `createNodeShapedMarginSpacer`, which
+ * replicates a margin that has already been zeroed and cannot be read back.
+ *
+ * Unconditional, because the absorber generates no box: it costs nothing in a widget holding
+ * inline content, which the reset was never going to match anyway. Deciding here instead would mean
+ * restating the reset's selector list, and a copy of another package's CSS drifts silently.
+ */
+export const absorbFirstChildMarginReset = ({
+  dom,
+  testId
+}) => {
+  dom.prepend(createBoxlessMarginAbsorber({
+    testId
+  }));
+};

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

@@ -0,0 +1,39 @@
+/**
+ * An empty, invisible element whose only job is to occupy a position in the DOM.
+ *
+ * At the top of the document `firstBlockNodeStyles` zeroes the top margin of whatever element
+ * follows a leading `.ProseMirror-widget`, and it does so with `!important` — which no inline style
+ * can outrank. This takes that hit so the shaped spacer after it, one position further along, keeps
+ * the margin it is there to supply.
+ *
+ * It contributes no height (no content, border or padding) and margins collapse through it, so it
+ * cannot affect layout beyond the selector it absorbs.
+ */
+export const createMarginAbsorber = ({
+  testId
+}) => {
+  // Block-level: an empty inline element takes the match just as well, but collapses to a
+  // zero-height line box, and the following margin then lands in the wrong place.
+  const absorber = document.createElement('div');
+  absorber.dataset.testid = testId;
+  absorber.setAttribute('aria-hidden', 'true');
+  absorber.contentEditable = 'false';
+  return absorber;
+};
+
+/**
+ * An absorber that occupies a DOM position without generating a box.
+ *
+ * Not interchangeable with `createMarginAbsorber`: a rule that selects the *rendered* sibling of a
+ * leading widget needs an element that generates a box, and this one does not.
+ */
+export const createBoxlessMarginAbsorber = ({
+  testId
+}) => {
+  const absorber = document.createElement('div');
+  absorber.dataset.testid = testId;
+  absorber.setAttribute('aria-hidden', 'true');
+  absorber.contentEditable = 'false';
+  absorber.style.display = 'contents';
+  return absorber;
+};

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

@@ -0,0 +1,69 @@
+/**
+ * Node types that can safely be reduced to an empty shell.
+ *
+ * A shell only replicates a margin if it collapses to nothing itself, which needs zero height and
+ * no vertical border or padding. Textblocks and lists qualify; nodes with intrinsic sizing (tables
+ * are `display: table`, media has a measured height) or a painted box (a zero-height panel is a
+ * visible stripe of background) do not, and are left alone.
+ */
+const isShapeableNode = node => node.isTextblock || ['bulletList', 'orderedList'].includes(node.type.name);
+
+/**
+ * An invisible element shaped like `node`, used to supply the top margin `node` no longer gets.
+ *
+ * A node at the start of its parent has its top margin reset, so a diff widget rendered above it
+ * sits flush against it. The reset cannot simply be taken off the node: the container variants skip
+ * widgets when counting — `nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget,
+ * span))` in layout columns, expands, sync blocks and table cells — so no amount of extra elements
+ * moves the match. That exclusion is what makes this work instead: the spacer is a
+ * `.ProseMirror-widget`, so it is never the counted first child and keeps its own margin, while the
+ * real node goes on taking the reset.
+ *
+ * The margin is not measured. Reading it off the real node is impossible — by then the reset has
+ * set it to `0`, and both `firstBlockNodeStyles` (`!important`) and block controls' `firstNodeDec`
+ * (an inline style) make it unrecoverable. Instead the spacer carries the node's own tag, classes
+ * and attributes, so the same rules that would have given the node its margin match the spacer
+ * (`.ProseMirror p`, `.ProseMirror h2`, the root-list rule, and so on).
+ *
+ * Returns `null` when the node is not safely shapeable or serialization fails.
+ */
+export const createNodeShapedMarginSpacer = ({
+  node,
+  serializer,
+  testId
+}) => {
+  var _node$type$createAndF;
+  if (!isShapeableNode(node)) {
+    return null;
+  }
+
+  // An empty node of the same type serializes to the same shell without walking real content.
+  const shellNode = (_node$type$createAndF = node.type.createAndFill(node.attrs)) !== null && _node$type$createAndF !== void 0 ? _node$type$createAndF : node;
+  const serialized = serializer.serializeNode(shellNode);
+  if (!(serialized instanceof HTMLElement)) {
+    return null;
+  }
+
+  // Keep the tag, classes and attributes the margin rules select on; drop anything that could
+  // occupy a line box.
+  serialized.replaceChildren();
+  serialized.dataset.testid = testId;
+  serialized.setAttribute('aria-hidden', 'true');
+  serialized.contentEditable = 'false';
+
+  // Zero height with no vertical border or padding keeps the spacer self-collapsing: its margins
+  // stay adjoining, so they collapse with the neighbours into a single margin equal to the largest
+  // rather than adding to them. That is what makes this safe in containers that never reset the
+  // first child — the spacer cannot double the gap there. Deliberately no `overflow: hidden`, which
+  // would open a block formatting context and stop that collapsing.
+  serialized.style.height = '0';
+  serialized.style.minHeight = '0';
+  serialized.style.paddingTop = '0';
+  serialized.style.paddingBottom = '0';
+  serialized.style.borderTopWidth = '0';
+  serialized.style.borderBottomWidth = '0';
+  // Only the top margin is being replicated. Left as-is, a larger bottom margin would win the
+  // self-collapse and overshoot the gap.
+  serialized.style.marginBottom = '0';
+  return serialized;
+};

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

@@ -0,0 +1,18 @@
+/**
+ * Resolves a document position, or returns `null` if it cannot be resolved.
+ *
+ * `Node.resolve` throws a `RangeError` for a position outside the document. Diff decorations are
+ * built from change ranges computed against a document that may since have moved on, so a position
+ * arriving out of range is a normal outcome rather than a defect — but an exception escaping here
+ * takes down the whole decoration set, leaving the diff unrendered.
+ *
+ * Callers are expected to treat `null` as "cannot tell" and fall back to behaviour that does not
+ * need the resolved position.
+ */
+export const safeResolve = (doc, pos) => {
+  try {
+    return doc.resolve(pos);
+  } catch {
+    return null;
+  }
+};

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

@@ -290,11 +290,11 @@ export class ContributorTagController {
 
     // Hand-rolled avatar stack: `@atlaskit/avatar-group` cannot render below 24px and the tag uses
     // 16px avatars.
-    const stack = model.connectedContributor ? [...(user ? [{
-      contributor: user,
-      stackIndex: 1
-    }] : []), ...(agent ? [{
+    const stack = model.connectedContributor ? [...(agent ? [{
       contributor: agent,
+      stackIndex: 1
+    }] : []), ...(user ? [{
+      contributor: user,
       stackIndex: 0
     }] : [])] : [{
       contributor: model.contributor

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

@@ -9,7 +9,11 @@ import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, unmountContributorTag } from './createContributorTagWidget';
 import { buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
+import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
+import { createMarginAbsorber } from './utils/createMarginAbsorber';
+import { createNodeShapedMarginSpacer } from './utils/createNodeShapedMarginSpacer';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
+import { safeResolve } from './utils/safeResolve';
 import { wrapBlockNodeView, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
 var isHeadingLevel = function isHeadingLevel(level) {
   return typeof level === 'number' && level >= 1 && level <= 6;
@@ -183,6 +187,14 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
   var $safeInsertPos = newDoc.resolve(safeInsertPos);
+
+  // Whether the widget renders above the very start of its parent's content — the document, a
+  // layout column, a table cell, a panel.
+  //
+  // `parentOffset === 0` is the whole test on the position side: prosemirror-view paints every
+  // widget at a position before the node starting there, so a leading widget at the parent's start
+  // always renders above its content.
+  var isVisuallyFirstInParent = !placeBelow && $safeInsertPos.parentOffset === 0;
   var isTopLevelInsert = $safeInsertPos.depth === 0;
   var hasPreviousBlock = ((_$safeInsertPos$nodeB = $safeInsertPos.nodeBefore) === null || _$safeInsertPos$nodeB === void 0 ? void 0 : _$safeInsertPos$nodeB.isBlock) === true;
   var isFirstDocHeadingReplacement = isExtendedEnabled(diffType) && !placeBelow && change.fromB === 0 && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type.name) === 'heading' && ((_newDoc$firstChild = newDoc.firstChild) === null || _newDoc$firstChild === void 0 ? void 0 : _newDoc$firstChild.type.name) === 'heading';
@@ -234,6 +246,20 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   var firstReplacedNode = slice.content.firstChild;
   var lastReplacedNode = slice.content.lastChild;
   var showDiffPatch1 = fg('platform_editor_ai_show_diff_patch_1');
+  // Whether the slice's outermost textblocks still hold all of their original content.
+  //
+  // `openStart`/`openEnd` say whether the cut landed inside a block, but not whether it took
+  // any text with it — a deletion stopping exactly at a block's content boundary is still
+  // reported as open. Resolving the change's own ends separates the two, so a block whose text
+  // survived intact can render as a block even though its boundary was open.
+  //
+  // Both resolves sit behind the gate that consumes them, so this adds no position arithmetic to
+  // the ungated path, and an unresolvable position degrades to the `openStart`/`openEnd` test on
+  // its own — the block is then treated as partial, which is what it rendered as before the gate.
+  var $changeFromA = fg('platform_editor_ai_show_diff_patch_2') ? safeResolve(doc, change.fromA) : null;
+  var $changeToA = fg('platform_editor_ai_show_diff_patch_2') ? safeResolve(doc, change.toA) : null;
+  var isFirstNodeContentComplete = slice.openStart === 0 || ($changeFromA === null || $changeFromA === void 0 ? void 0 : $changeFromA.parentOffset) === 0;
+  var isLastNodeContentComplete = slice.openEnd === 0 || $changeToA !== null && $changeToA.parentOffset === $changeToA.parent.content.size;
   var isCompleteSameTypeReplacement = slice.content.childCount === 1 && firstReplacedNode !== null && replacementNode !== null && firstReplacedNode.type === replacementNode.type && replacementNode.nodeSize === change.toB - change.fromB;
 
   /*
@@ -246,10 +272,16 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     var isLast = lastReplacedNode === node;
     var isOpenAtSliceBoundary = isFirst && slice.openStart > 0 || isLast && slice.openEnd > 0;
     var shouldPreserveCompleteMultiInlineBlock = showDiffPatch1 && node.isBlock && node.type.inlineContent && node.content.childCount > 1 && !isOpenAtSliceBoundary && isCompleteSameTypeReplacement;
+    // A textblock is otherwise serialized as its inline content only, with no `<p>`/`<h2>` wrapper.
+    // That is right when the diff cuts into an existing block — the deleted text belongs on the same
+    // line as the text that replaced it — but when the whole block went away it drops the very
+    // element that carries the block's margin, so the deleted block renders flush against its
+    // neighbours. Only the first and last children can be partial; middle ones are always complete.
+    var shouldRenderAsBlockNode = fg('platform_editor_ai_show_diff_patch_2') && node.isTextblock && (!isFirst || isFirstNodeContentComplete) && (!isLast || isLastNodeContentComplete);
 
     // Helper function to handle multiple child nodes
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
-      if (!shouldPreserveCompleteMultiInlineBlock && node.content.childCount > 1 && node.type.inlineContent) {
+      if (!shouldPreserveCompleteMultiInlineBlock && !shouldRenderAsBlockNode && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(function (childNode) {
           var childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
@@ -279,7 +311,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     if (handleMultipleChildNodes(node)) {
       return;
     }
-    if (shouldPreserveCompleteMultiInlineBlock) {
+    if (shouldPreserveCompleteMultiInlineBlock || shouldRenderAsBlockNode) {
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeNode(node);
       };
@@ -356,6 +388,21 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     dom.style.setProperty('scroll-margin-top', scrollMarginTopValue);
   }
 
+  // A block node serialized into the widget is the widget's first child, and the editor's
+  // first-child reset is written against the parent element rather than the document position — so
+  // it zeroes the margin the block wrapper was kept for in the first place.
+  //
+  // Only away from the parent's start. There the reset is the correct outcome: the widget is the
+  // first thing in the document, column, cell or panel, and a leading gap above it would be wrong.
+  // The margin that matters at that position belongs to the node *below* the widget, which the
+  // shaped spacer pair supplies instead.
+  if (fg('platform_editor_ai_show_diff_patch_2') && !isVisuallyFirstInParent) {
+    absorbFirstChildMarginReset({
+      dom: dom,
+      testId: 'show-diff-widget-margin-absorber'
+    });
+  }
+
   // Needed even when the indicator bar is off, because a contributor tag also anchors against the
   // widget.
   if ((showIndicators || showContributorTags) && isExtendedEnabled(diffType)) {
@@ -418,7 +465,40 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   var isPureDeletion = change.fromB === change.toB;
   var isSingleBlock = slice.content.childCount === 1 && ((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.isBlock);
   var isDiffWidgetAtStartOfDoc = $safeInsertPos.depth === 0 && $safeInsertPos.index(0) === 0;
-  if (isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && isExtendedEnabled(diffType)) {
+
+  // A node at the start of its parent has its top margin reset, so a diff widget rendered above
+  // it sits flush against it. This applies wherever that parent is — the document, a layout
+  // column, a table cell — so it is decided from the anchor rather than from the document root
+  // (see `isVisuallyFirstInParent` above).
+  //
+  // Away from the parent's start the node below keeps its own margin, and it is the block *inside*
+  // the widget that loses one — handled by `absorbFirstChildMarginReset` above, not here.
+  var nodeAfterWidget = $safeInsertPos.nodeAfter;
+  if (fg('platform_editor_ai_show_diff_patch_2') && isExtendedEnabled(diffType) && isVisuallyFirstInParent && nodeAfterWidget) {
+    var shapedSpacer = createNodeShapedMarginSpacer({
+      node: nodeAfterWidget,
+      serializer: serializer,
+      testId: 'show-diff-shaped-margin-spacer'
+    });
+    if (shapedSpacer) {
+      // Two elements, because the two families of reset have to be handled differently. The
+      // absorber takes the document-level adjacent-sibling reset for a leading widget, whose
+      // `!important` would otherwise zero the shaped spacer's margin; the shaped spacer, now one
+      // position further along, is out of that rule's reach and keeps the margin it supplies.
+      // Inside containers the counting selectors skip both, so only the shaped one has an effect.
+      //
+      // Sides order the widgets against each other only — both still paint before the real node.
+      decorations.push(Decoration.widget(safeInsertPos, createMarginAbsorber({
+        testId: 'show-diff-margin-absorber'
+      }), {
+        side: 0
+      }));
+      decorations.push(Decoration.widget(safeInsertPos, shapedSpacer, {
+        side: 1
+      }));
+    }
+  }
+  if (!fg('platform_editor_ai_show_diff_patch_2') && isDiffWidgetAtStartOfDoc && isSingleBlock && isPureDeletion && isExtendedEnabled(diffType)) {
     var followingNode = $safeInsertPos.nodeAfter;
     var headingLevel = (followingNode === null || followingNode === void 0 ? void 0 : followingNode.type.name) === 'heading' ? followingNode.attrs.level : undefined;
     if (isHeadingLevel(headingLevel)) {

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

@@ -0,0 +1,28 @@
+import { createBoxlessMarginAbsorber } from './createMarginAbsorber';
+
+/**
+ * Keeps a block node rendered inside a diff widget from losing its own top margin.
+ *
+ * The editor's leading-block margin reset is written against the parent element, not the document
+ * position, so it fires wherever a text block is a first child — including inside the widget's own
+ * `span`, which is what a whole-block deletion renders into. The widget then has no margin of its
+ * own, and the block sits flush against whatever is above it, regardless of where in the document
+ * the widget landed.
+ *
+ * The margin is not re-supplied; it is never taken away. Prepending an element the reset does not
+ * select moves the real block off the leading position, so the ordinary `.ProseMirror p`,
+ * `.ProseMirror h2` and similar rules go on applying to it untouched. That is why this needs no
+ * knowledge of which margin the block should have — unlike `createNodeShapedMarginSpacer`, which
+ * replicates a margin that has already been zeroed and cannot be read back.
+ *
+ * Unconditional, because the absorber generates no box: it costs nothing in a widget holding
+ * inline content, which the reset was never going to match anyway. Deciding here instead would mean
+ * restating the reset's selector list, and a copy of another package's CSS drifts silently.
+ */
+export var absorbFirstChildMarginReset = function absorbFirstChildMarginReset(_ref) {
+  var dom = _ref.dom,
+    testId = _ref.testId;
+  dom.prepend(createBoxlessMarginAbsorber({
+    testId: testId
+  }));
+};

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

@@ -0,0 +1,37 @@
+/**
+ * An empty, invisible element whose only job is to occupy a position in the DOM.
+ *
+ * At the top of the document `firstBlockNodeStyles` zeroes the top margin of whatever element
+ * follows a leading `.ProseMirror-widget`, and it does so with `!important` — which no inline style
+ * can outrank. This takes that hit so the shaped spacer after it, one position further along, keeps
+ * the margin it is there to supply.
+ *
+ * It contributes no height (no content, border or padding) and margins collapse through it, so it
+ * cannot affect layout beyond the selector it absorbs.
+ */
+export var createMarginAbsorber = function createMarginAbsorber(_ref) {
+  var testId = _ref.testId;
+  // Block-level: an empty inline element takes the match just as well, but collapses to a
+  // zero-height line box, and the following margin then lands in the wrong place.
+  var absorber = document.createElement('div');
+  absorber.dataset.testid = testId;
+  absorber.setAttribute('aria-hidden', 'true');
+  absorber.contentEditable = 'false';
+  return absorber;
+};
+
+/**
+ * An absorber that occupies a DOM position without generating a box.
+ *
+ * Not interchangeable with `createMarginAbsorber`: a rule that selects the *rendered* sibling of a
+ * leading widget needs an element that generates a box, and this one does not.
+ */
+export var createBoxlessMarginAbsorber = function createBoxlessMarginAbsorber(_ref2) {
+  var testId = _ref2.testId;
+  var absorber = document.createElement('div');
+  absorber.dataset.testid = testId;
+  absorber.setAttribute('aria-hidden', 'true');
+  absorber.contentEditable = 'false';
+  absorber.style.display = 'contents';
+  return absorber;
+};

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

@@ -0,0 +1,70 @@
+/**
+ * Node types that can safely be reduced to an empty shell.
+ *
+ * A shell only replicates a margin if it collapses to nothing itself, which needs zero height and
+ * no vertical border or padding. Textblocks and lists qualify; nodes with intrinsic sizing (tables
+ * are `display: table`, media has a measured height) or a painted box (a zero-height panel is a
+ * visible stripe of background) do not, and are left alone.
+ */
+var isShapeableNode = function isShapeableNode(node) {
+  return node.isTextblock || ['bulletList', 'orderedList'].includes(node.type.name);
+};
+
+/**
+ * An invisible element shaped like `node`, used to supply the top margin `node` no longer gets.
+ *
+ * A node at the start of its parent has its top margin reset, so a diff widget rendered above it
+ * sits flush against it. The reset cannot simply be taken off the node: the container variants skip
+ * widgets when counting — `nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget,
+ * span))` in layout columns, expands, sync blocks and table cells — so no amount of extra elements
+ * moves the match. That exclusion is what makes this work instead: the spacer is a
+ * `.ProseMirror-widget`, so it is never the counted first child and keeps its own margin, while the
+ * real node goes on taking the reset.
+ *
+ * The margin is not measured. Reading it off the real node is impossible — by then the reset has
+ * set it to `0`, and both `firstBlockNodeStyles` (`!important`) and block controls' `firstNodeDec`
+ * (an inline style) make it unrecoverable. Instead the spacer carries the node's own tag, classes
+ * and attributes, so the same rules that would have given the node its margin match the spacer
+ * (`.ProseMirror p`, `.ProseMirror h2`, the root-list rule, and so on).
+ *
+ * Returns `null` when the node is not safely shapeable or serialization fails.
+ */
+export var createNodeShapedMarginSpacer = function createNodeShapedMarginSpacer(_ref) {
+  var _node$type$createAndF;
+  var node = _ref.node,
+    serializer = _ref.serializer,
+    testId = _ref.testId;
+  if (!isShapeableNode(node)) {
+    return null;
+  }
+
+  // An empty node of the same type serializes to the same shell without walking real content.
+  var shellNode = (_node$type$createAndF = node.type.createAndFill(node.attrs)) !== null && _node$type$createAndF !== void 0 ? _node$type$createAndF : node;
+  var serialized = serializer.serializeNode(shellNode);
+  if (!(serialized instanceof HTMLElement)) {
+    return null;
+  }
+
+  // Keep the tag, classes and attributes the margin rules select on; drop anything that could
+  // occupy a line box.
+  serialized.replaceChildren();
+  serialized.dataset.testid = testId;
+  serialized.setAttribute('aria-hidden', 'true');
+  serialized.contentEditable = 'false';
+
+  // Zero height with no vertical border or padding keeps the spacer self-collapsing: its margins
+  // stay adjoining, so they collapse with the neighbours into a single margin equal to the largest
+  // rather than adding to them. That is what makes this safe in containers that never reset the
+  // first child — the spacer cannot double the gap there. Deliberately no `overflow: hidden`, which
+  // would open a block formatting context and stop that collapsing.
+  serialized.style.height = '0';
+  serialized.style.minHeight = '0';
+  serialized.style.paddingTop = '0';
+  serialized.style.paddingBottom = '0';
+  serialized.style.borderTopWidth = '0';
+  serialized.style.borderBottomWidth = '0';
+  // Only the top margin is being replicated. Left as-is, a larger bottom margin would win the
+  // self-collapse and overshoot the gap.
+  serialized.style.marginBottom = '0';
+  return serialized;
+};

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

@@ -0,0 +1,18 @@
+/**
+ * Resolves a document position, or returns `null` if it cannot be resolved.
+ *
+ * `Node.resolve` throws a `RangeError` for a position outside the document. Diff decorations are
+ * built from change ranges computed against a document that may since have moved on, so a position
+ * arriving out of range is a normal outcome rather than a defect — but an exception escaping here
+ * takes down the whole decoration set, leaving the diff unrendered.
+ *
+ * Callers are expected to treat `null` as "cannot tell" and fall back to behaviour that does not
+ * need the resolved position.
+ */
+export var safeResolve = function safeResolve(doc, pos) {
+  try {
+    return doc.resolve(pos);
+  } catch (_unused) {
+    return null;
+  }
+};

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

@@ -325,11 +325,11 @@ export var ContributorTagController = /*#__PURE__*/function () {
 
       // Hand-rolled avatar stack: `@atlaskit/avatar-group` cannot render below 24px and the tag uses
       // 16px avatars.
-      var stack = model.connectedContributor ? [].concat(_toConsumableArray(user ? [{
-        contributor: user,
-        stackIndex: 1
-      }] : []), _toConsumableArray(agent ? [{
+      var stack = model.connectedContributor ? [].concat(_toConsumableArray(agent ? [{
         contributor: agent,
+        stackIndex: 1
+      }] : []), _toConsumableArray(user ? [{
+        contributor: user,
         stackIndex: 0
       }] : [])) : [{
         contributor: model.contributor

package/dist/types/pm-plugins/decorations/utils/absorbFirstChildMarginReset.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Keeps a block node rendered inside a diff widget from losing its own top margin.
+ *
+ * The editor's leading-block margin reset is written against the parent element, not the document
+ * position, so it fires wherever a text block is a first child — including inside the widget's own
+ * `span`, which is what a whole-block deletion renders into. The widget then has no margin of its
+ * own, and the block sits flush against whatever is above it, regardless of where in the document
+ * the widget landed.
+ *
+ * The margin is not re-supplied; it is never taken away. Prepending an element the reset does not
+ * select moves the real block off the leading position, so the ordinary `.ProseMirror p`,
+ * `.ProseMirror h2` and similar rules go on applying to it untouched. That is why this needs no
+ * knowledge of which margin the block should have — unlike `createNodeShapedMarginSpacer`, which
+ * replicates a margin that has already been zeroed and cannot be read back.
+ *
+ * Unconditional, because the absorber generates no box: it costs nothing in a widget holding
+ * inline content, which the reset was never going to match anyway. Deciding here instead would mean
+ * restating the reset's selector list, and a copy of another package's CSS drifts silently.
+ */
+export declare const absorbFirstChildMarginReset: ({ dom, testId, }: {
+    dom: HTMLElement;
+    testId: string;
+}) => void;

package/dist/types/pm-plugins/decorations/utils/createMarginAbsorber.d.ts

@@ -0,0 +1,23 @@
+/**
+ * An empty, invisible element whose only job is to occupy a position in the DOM.
+ *
+ * At the top of the document `firstBlockNodeStyles` zeroes the top margin of whatever element
+ * follows a leading `.ProseMirror-widget`, and it does so with `!important` — which no inline style
+ * can outrank. This takes that hit so the shaped spacer after it, one position further along, keeps
+ * the margin it is there to supply.
+ *
+ * It contributes no height (no content, border or padding) and margins collapse through it, so it
+ * cannot affect layout beyond the selector it absorbs.
+ */
+export declare const createMarginAbsorber: ({ testId }: {
+    testId: string;
+}) => HTMLElement;
+/**
+ * An absorber that occupies a DOM position without generating a box.
+ *
+ * Not interchangeable with `createMarginAbsorber`: a rule that selects the *rendered* sibling of a
+ * leading widget needs an element that generates a box, and this one does not.
+ */
+export declare const createBoxlessMarginAbsorber: ({ testId }: {
+    testId: string;
+}) => HTMLElement;

package/dist/types/pm-plugins/decorations/utils/createNodeShapedMarginSpacer.d.ts

@@ -0,0 +1,26 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeViewSerializer } from '../../NodeViewSerializer';
+/**
+ * An invisible element shaped like `node`, used to supply the top margin `node` no longer gets.
+ *
+ * A node at the start of its parent has its top margin reset, so a diff widget rendered above it
+ * sits flush against it. The reset cannot simply be taken off the node: the container variants skip
+ * widgets when counting — `nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget,
+ * span))` in layout columns, expands, sync blocks and table cells — so no amount of extra elements
+ * moves the match. That exclusion is what makes this work instead: the spacer is a
+ * `.ProseMirror-widget`, so it is never the counted first child and keeps its own margin, while the
+ * real node goes on taking the reset.
+ *
+ * The margin is not measured. Reading it off the real node is impossible — by then the reset has
+ * set it to `0`, and both `firstBlockNodeStyles` (`!important`) and block controls' `firstNodeDec`
+ * (an inline style) make it unrecoverable. Instead the spacer carries the node's own tag, classes
+ * and attributes, so the same rules that would have given the node its margin match the spacer
+ * (`.ProseMirror p`, `.ProseMirror h2`, the root-list rule, and so on).
+ *
+ * Returns `null` when the node is not safely shapeable or serialization fails.
+ */
+export declare const createNodeShapedMarginSpacer: ({ node, serializer, testId, }: {
+    node: PMNode;
+    serializer: NodeViewSerializer;
+    testId: string;
+}) => HTMLElement | null;

package/dist/types/pm-plugins/decorations/utils/safeResolve.d.ts

@@ -0,0 +1,13 @@
+import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Resolves a document position, or returns `null` if it cannot be resolved.
+ *
+ * `Node.resolve` throws a `RangeError` for a position outside the document. Diff decorations are
+ * built from change ranges computed against a document that may since have moved on, so a position
+ * arriving out of range is a normal outcome rather than a defect — but an exception escaping here
+ * takes down the whole decoration set, leaving the diff unrendered.
+ *
+ * Callers are expected to treat `null` as "cannot tell" and fall back to behaviour that does not
+ * need the resolved position.
+ */
+export declare const safeResolve: (doc: PMNode, pos: number) => ResolvedPos | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "16.1.0",
+	"version": "16.1.1",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -8,6 +8,11 @@
 		"registry": "https://registry.npmjs.org/"
 	},
 	"atlassian": {
+		"website": {
+			"tags": [
+				"platform-labs"
+			]
+		},
 		"team": "Editor: Lego",
 		"releaseModel": "continuous",
 		"singleton": true
@@ -33,8 +38,8 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^198.0.0",
-		"@atlaskit/tokens": "^17.0.0",
+		"@atlaskit/tmp-editor-statsig": "^199.0.0",
+		"@atlaskit/tokens": "^18.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -65,7 +70,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^122.10.0",
+		"@atlaskit/editor-common": "^122.11.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"
@@ -80,6 +85,9 @@
 		"platform_editor_ai_show_diff_patch_1": {
 			"type": "boolean"
 		},
+		"platform_editor_ai_show_diff_patch_2": {
+			"type": "boolean"
+		},
 		"platform_editor_ai_smart_diff": {
 			"type": "boolean"
 		},