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

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @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
+
+- [`8c4837792f18f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c4837792f18f) -
+  Add a per-call colorScheme override to the showDiff command, so callers can paint a diff in a
+  specific colour scheme without changing the plugin's configured default.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.0.17
 
 ### Patch Changes

package/afm-products/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../editor-plugin-analytics/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-limited-mode/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-products/tsconfig.json"
 		},

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/pm-plugins/main.js

@@ -94,7 +94,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
         var newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'REVEAL_COMPLETE') {
-            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0, _newPluginState1;
+            var _newPluginState$color, _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0, _newPluginState1, _newPluginState10;
             // REVEAL_COMPLETE repaints with the reveal dropped, so the decorations render their
             // ordinary resting style. Without it the reveal stays in state indefinitely and the
             // next unrelated repaint re-emits the hidden, zero-width highlight with no animation
@@ -114,23 +114,23 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer: nodeViewSerializer,
-                colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
+                colorScheme: (_newPluginState$color = (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.colorScheme) !== null && _newPluginState$color !== void 0 ? _newPluginState$color : config === null || config === void 0 ? void 0 : config.colorScheme,
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos,
                 api: api,
                 tagMountContext: tagMountContext
-              }, (0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.diffType) ? {
-                isInverted: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.isInverted,
-                diffType: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.diffType,
-                hideDeletedDiffs: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.hideDeletedDiffs,
-                hideAddedDiffsUnderline: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideAddedDiffsUnderline,
-                showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
-                smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
-                deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
-                inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement,
+              }, (0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType) ? {
+                isInverted: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.isInverted,
+                diffType: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.diffType,
+                hideDeletedDiffs: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideDeletedDiffs,
+                hideAddedDiffsUnderline: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.hideAddedDiffsUnderline,
+                showIndicators: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.showIndicators,
+                smartThresholds: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.smartThresholds,
+                deletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.deletedDiffPlacement,
+                inlineDeletedDiffPlacement: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.inlineDeletedDiffPlacement,
                 // SHOW_DIFF only. The scroll-to-next recalculation further down deliberately
                 // omits this so stepping through changes cannot replay the choreography.
-                reveal: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.reveal
+                reveal: (_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.reveal
               } : {})),
               contributorTags = _calculateDiffDecorat.contributorTags,
               decorations = _calculateDiffDecorat.decorations,
@@ -138,7 +138,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
             // Update the decorations and their ids
             newPluginState.decorations = decorations;
             newPluginState.contributorTags = contributorTags;
-            if ((0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType)) {
+            if ((0, _isExtendedEnabled.isExtendedEnabled)((_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType)) {
               newPluginState.diffDescriptors = diffDescriptors;
             }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -147,7 +147,9 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               isDisplayingChanges: false,
               activeIndex: undefined,
               contributorTags: [],
-              reveal: undefined
+              reveal: undefined,
+              // Per-call override — do not let it leak into the next, unrelated `showDiff` call.
+              colorScheme: undefined
             }, (0, _isExtendedEnabled.isExtendedEnabled)(currentPluginState.diffType) ? {
               isInverted: false,
               diffType: (0, _isExtendedEnabled.getDefaultDiffType)(),
@@ -156,11 +158,11 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               diffDescriptors: []
             } : {});
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
-            var _newPluginState10;
+            var _newPluginState11;
             // Update the active index in plugin state and recalculate decorations
-            var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc, (_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType);
+            var _decorations = (0, _getScrollableDecorations.getScrollableDecorations)(currentPluginState.decorations, newState.doc, (_newPluginState11 = newPluginState) === null || _newPluginState11 === void 0 ? void 0 : _newPluginState11.diffType);
             if (_decorations.length > 0) {
-              var _currentPluginState$a;
+              var _currentPluginState$a, _newPluginState$color2, _newPluginState12;
               // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
               // This allows the UI to start with no selection and only highlight on first user interaction.
               var nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : -1;
@@ -188,7 +190,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
                   state: newState,
                   pluginState: newPluginState,
                   nodeViewSerializer: nodeViewSerializer,
-                  colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
+                  colorScheme: (_newPluginState$color2 = (_newPluginState12 = newPluginState) === null || _newPluginState12 === void 0 ? void 0 : _newPluginState12.colorScheme) !== null && _newPluginState$color2 !== void 0 ? _newPluginState$color2 : config === null || config === void 0 ? void 0 : config.colorScheme,
                   intl: getIntl(),
                   activeIndexPos: newPluginState.activeIndexPos,
                   api: api,

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)) {