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

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

@@ -83,7 +83,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
         let 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
@@ -110,29 +110,29 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               state: newState,
               pluginState: newPluginState,
               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,
               tagMountContext,
-              ...(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,
+              ...(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
               } : {})
             });
             // Update the decorations and their ids
             newPluginState.decorations = decorations;
             newPluginState.contributorTags = contributorTags;
-            if (isExtendedEnabled((_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType)) {
+            if (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') {
@@ -144,6 +144,8 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               activeIndex: undefined,
               contributorTags: [],
               reveal: undefined,
+              // Per-call override — do not let it leak into the next, unrelated `showDiff` call.
+              colorScheme: undefined,
               /**
                * Reset isInverted & diffType state when hiding diffs
                * Otherwise this should persist for the diff-showing session
@@ -157,11 +159,11 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               } : {})
             };
           } 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
-            const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType);
+            const decorations = 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.
               let nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : -1;
@@ -194,7 +196,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
                 state: newState,
                 pluginState: newPluginState,
                 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,

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;
+  }
+};