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

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { agentBrandColorSchemes } from '@atlaskit/agent-color/agent-brand-color-schemes';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { getStandardDeletedTextDecorationStyle } from './getStandardDeletedTextDecorationStyle';
 
@@ -118,40 +119,48 @@ var textAccentMap = {
   gray: "var(--ds-text-accent-gray, #505258)",
   lime: "var(--ds-text-accent-lime, #4C6B1F)"
 };
+var getBrand = function getBrand(color) {
+  return Object.prototype.hasOwnProperty.call(agentBrandColorSchemes, color) ? agentBrandColorSchemes[color] : undefined;
+};
 function bgSubtlest(color) {
-  return bgSubtlestMap[color];
+  var _getBrand$background, _getBrand;
+  return (_getBrand$background = (_getBrand = getBrand(color)) === null || _getBrand === void 0 ? void 0 : _getBrand.background) !== null && _getBrand$background !== void 0 ? _getBrand$background : bgSubtlestMap[color];
 }
 function bgSubtlestPressed(color) {
-  return bgSubtlestPressedMap[color];
+  var _getBrand$background2, _getBrand2;
+  return (_getBrand$background2 = (_getBrand2 = getBrand(color)) === null || _getBrand2 === void 0 ? void 0 : _getBrand2.background) !== null && _getBrand$background2 !== void 0 ? _getBrand$background2 : bgSubtlestPressedMap[color];
 }
 function bgSubtler(color) {
-  return bgSubtlerMap[color];
+  var _getBrand$border, _getBrand3;
+  return (_getBrand$border = (_getBrand3 = getBrand(color)) === null || _getBrand3 === void 0 ? void 0 : _getBrand3.border) !== null && _getBrand$border !== void 0 ? _getBrand$border : bgSubtlerMap[color];
 }
 function bgBolder(color) {
-  return bgBolderMap[color];
+  var _getBrand$bold, _getBrand4;
+  return (_getBrand$bold = (_getBrand4 = getBrand(color)) === null || _getBrand4 === void 0 ? void 0 : _getBrand4.bold) !== null && _getBrand$bold !== void 0 ? _getBrand$bold : bgBolderMap[color];
 }
 function bgSubtlerPressed(color) {
-  return bgSubtlerPressedMap[color];
+  var _getBrand$background3, _getBrand5;
+  return (_getBrand$background3 = (_getBrand5 = getBrand(color)) === null || _getBrand5 === void 0 ? void 0 : _getBrand5.background) !== null && _getBrand$background3 !== void 0 ? _getBrand$background3 : bgSubtlerPressedMap[color];
 }
 function borderAccent(color) {
-  return borderAccentMap[color];
+  var _getBrand$border2, _getBrand6;
+  return (_getBrand$border2 = (_getBrand6 = getBrand(color)) === null || _getBrand6 === void 0 ? void 0 : _getBrand6.border) !== null && _getBrand$border2 !== void 0 ? _getBrand$border2 : borderAccentMap[color];
 }
 function textAccent(color) {
-  return textAccentMap[color];
+  var _getBrand$accentText, _getBrand7;
+  return (_getBrand$accentText = (_getBrand7 = getBrand(color)) === null || _getBrand7 === void 0 ? void 0 : _getBrand7.accentText) !== null && _getBrand$accentText !== void 0 ? _getBrand$accentText : textAccentMap[color];
+}
+function deletedBackground(color) {
+  var _getBrand$emphasisBac, _getBrand8;
+  return (_getBrand$emphasisBac = (_getBrand8 = getBrand(color)) === null || _getBrand8 === void 0 ? void 0 : _getBrand8.emphasisBackground) !== null && _getBrand$emphasisBac !== void 0 ? _getBrand$emphasisBac : bgSubtlest(color);
 }
 
-/**
- * Presentation tokens for a contributor tag in one diff colour.
- *
- * A `bolder` fill rather than the `subtlest` tint the highlight uses: the tag is a label on the
- * change, and at tag size a tint reads as a second, weaker highlight sitting above the real one.
- * `inverse` is the only text tone that reads on a bolder fill, and it needs no per-colour map —
- * which is also why the tag carries no border: the fill alone bounds it.
- */
+/** Contributor tags use a bold fill with a contrasting foreground, including branded schemes. */
 export function getAccentTokens(color) {
+  var _getBrand$boldText, _getBrand9;
   return {
     background: bgBolder(color),
-    text: "var(--ds-text-inverse, #FFFFFF)"
+    text: (_getBrand$boldText = (_getBrand9 = getBrand(color)) === null || _getBrand9 === void 0 ? void 0 : _getBrand9.boldText) !== null && _getBrand$boldText !== void 0 ? _getBrand$boldText : "var(--ds-text-inverse, #FFFFFF)"
   };
 }
 
@@ -173,18 +182,23 @@ function deletedCellOutline(colors) {
 // --- Inserted content styles ---
 
 function insertedInlineBorderColor(colors) {
-  return colors.insertedInlineBorderTone === 'backgroundHovered' ? bgSubtlestHoveredMap[colors.insertColor] : borderAccent(colors.insertColor);
+  var _getBrand$border3, _getBrand0;
+  return colors.insertedInlineBorderTone === 'backgroundHovered' ? (_getBrand$border3 = (_getBrand0 = getBrand(colors.insertColor)) === null || _getBrand0 === void 0 ? void 0 : _getBrand0.border) !== null && _getBrand$border3 !== void 0 ? _getBrand$border3 : bgSubtlestHoveredMap[colors.insertColor] : borderAccent(colors.insertColor);
 }
 
 /** Inline inserted content — default state. */
 export function buildInsertStyle(colors) {
-  return convertToInlineCss({
-    background: bgSubtlest(colors.insertColor),
+  var brand = getBrand(colors.insertColor);
+  return convertToInlineCss(_objectSpread(_objectSpread({
+    background: bgSubtlest(colors.insertColor)
+  }, brand ? {
+    color: brand.text
+  } : {}), {}, {
     textDecoration: 'underline',
     textDecorationStyle: colors.insertUnderlineStyle,
     textDecorationThickness: "var(--ds-space-025, 2px)",
     textDecorationColor: borderAccent(colors.insertColor)
-  });
+  }));
 }
 
 /** Inline insert style for content within a block node (no background, underline only). */
@@ -199,11 +213,15 @@ export function buildInsertStyleInBlock(colors) {
 
 /** Extended insert style — background + border-bottom underline. */
 export function buildInsertStyleExtended(colors) {
-  return convertToInlineCss({
-    background: bgSubtlest(colors.insertColor),
+  var brand = getBrand(colors.insertColor);
+  return convertToInlineCss(_objectSpread(_objectSpread({
+    background: bgSubtlest(colors.insertColor)
+  }, brand ? {
+    color: brand.text
+  } : {}), {}, {
     borderBottom: "2px solid ".concat(insertedInlineBorderColor(colors)),
     padding: "1px 0 2px"
-  });
+  }));
 }
 
 /** Extended insert style for content within a block node (border-bottom only, no background). */
@@ -216,27 +234,39 @@ export function buildInsertStyleInBlockExtended(colors) {
 
 /** Active state of the extended insert style. */
 export function buildInsertStyleExtendedActive(colors) {
-  return convertToInlineCss({
-    background: bgSubtlerPressed(colors.insertActiveColor),
+  var brand = getBrand(colors.insertColor);
+  return convertToInlineCss(_objectSpread(_objectSpread({
+    background: bgSubtlerPressed(colors.insertActiveColor)
+  }, brand ? {
+    color: brand.text
+  } : {}), {}, {
     borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
     padding: "1px 0 2px"
-  });
+  }));
 }
 
 /** Extended insert style without underline — background + padding only. */
 export function buildInsertStyleExtendedNoUnderline(colors) {
-  return convertToInlineCss({
-    background: bgSubtlest(colors.insertColor),
+  var brand = getBrand(colors.insertColor);
+  return convertToInlineCss(_objectSpread(_objectSpread({
+    background: bgSubtlest(colors.insertColor)
+  }, brand ? {
+    color: brand.text
+  } : {}), {}, {
     padding: "1px 0 2px"
-  });
+  }));
 }
 
 /** Active state of the no-underline extended insert style. */
 export function buildInsertStyleExtendedNoUnderlineActive(colors) {
-  return convertToInlineCss({
-    background: bgSubtlerPressed(colors.insertActiveColor),
+  var brand = getBrand(colors.insertColor);
+  return convertToInlineCss(_objectSpread(_objectSpread({
+    background: bgSubtlerPressed(colors.insertActiveColor)
+  }, brand ? {
+    color: brand.text
+  } : {}), {}, {
     padding: "1px 0 2px"
-  });
+  }));
 }
 
 /** No-underline extended insert style for block content (padding only). */
@@ -248,13 +278,17 @@ export function buildInsertStyleInBlockExtendedNoUnderline(_colors) {
 
 /** Inline inserted content — active/focused state. */
 export function buildInsertStyleActive(colors) {
-  return convertToInlineCss({
-    background: bgSubtlerPressed(colors.insertActiveColor),
+  var brand = getBrand(colors.insertColor);
+  return convertToInlineCss(_objectSpread(_objectSpread({
+    background: bgSubtlerPressed(colors.insertActiveColor)
+  }, brand ? {
+    color: brand.text
+  } : {}), {}, {
     textDecoration: 'underline',
     textDecorationStyle: colors.insertUnderlineStyle,
     textDecorationThickness: "var(--ds-space-025, 2px)",
     textDecorationColor: textAccent(colors.insertActiveColor)
-  });
+  }));
 }
 
 // --- Deleted inline content styles ---
@@ -612,7 +646,7 @@ export function buildDeletedInlineContentStyleExtended(colors) {
   // Under 'underline' emphasis the highlight stays on its resting tint — the same one hover paints —
   // so only the border carries the emphasis.
   var isUnderlineEmphasis = isActive && usesUnderlineEmphasis(colors);
-  var backgroundColor = isActive && !isUnderlineEmphasis && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : bgSubtlest(colors.deleteColor);
+  var backgroundColor = isActive && !isUnderlineEmphasis && colors.deletedInlineBorderTone === 'background' ? bgSubtlerPressed(colors.deleteActiveColor) : deletedBackground(colors.deleteColor);
   var borderColor = isUnderlineEmphasis ? borderAccent(colors.deleteActiveColor) : colors.deletedInlineBorderTone === 'background' ? backgroundColor : borderAccent(colors.deleteColor);
   return convertToInlineCss({
     backgroundColor: backgroundColor,
@@ -822,7 +856,7 @@ export function getDeletedInlineRevealColors(colors) {
  * paints at rest, so hovering restores the appearance rather than introducing a third one.
  */
 export function getDeletedHighlightHoverColor(colors) {
-  return bgSubtlest(colors.deleteColor);
+  return deletedBackground(colors.deleteColor);
 }
 
 /**

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { agentBrandColorSchemes } from '@atlaskit/agent-color/agent-brand-color-schemes';
 import { PARTICIPANT_COLOR_SCHEMES } from './types';
 
 /** Green insertions, red deletions. */
@@ -78,9 +79,12 @@ var createAttributionScheme = function createAttributionScheme(color) {
 var attributionColorSchemes = Object.fromEntries(PARTICIPANT_COLOR_SCHEMES.map(function (color) {
   return [color, createAttributionScheme(color)];
 }));
+var brandSchemes = Object.fromEntries(Object.keys(agentBrandColorSchemes).map(function (scheme) {
+  return [scheme, createAttributionScheme(scheme)];
+}));
 
 /** Maps public schemes and attribution-only participant slots to their data objects. */
-export var colorSchemeRegistry = _objectSpread(_objectSpread({}, attributionColorSchemes), {}, {
+export var colorSchemeRegistry = _objectSpread(_objectSpread(_objectSpread({}, attributionColorSchemes), brandSchemes), {}, {
   traditional: traditionalScheme,
   standard: standardScheme
 });

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

@@ -5,8 +5,6 @@ export var PARTICIPANT_COLOR_SCHEMES = ['red', 'blue', 'green', 'yellow', 'purpl
 
 /** ADS accent hues used by the public and participant colour schemes. */
 
-/** A public scheme or an attribution participant slot resolved internally for one change. */
-
 /**
  * A show-diff colour scheme. Colour fields are ADS hues that `factory.ts` expands into token paths;
  * the rest encode structural differences no colour can express. Ring widths, padding, radius and

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

@@ -8,6 +8,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { isExtendedEnabled } from '../isExtendedEnabled';
+import { isTaggableBlockNode } from '../utils/taggableBlockNodes';
 import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildDeletedBlockNodeStyle, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildInsertedBlockNodeStyle } from './colorSchemes/factory';
 import { colorSchemeRegistry, getLegacyColorScheme } from './colorSchemes/schemes';
 import { createBlockIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
@@ -27,13 +28,6 @@ var UNSTYLED_NODES = ['mediaSingle', 'mediaGroup', 'table',
 'heading', 'hardBreak', 'decisionList', 'taskList', 'bulletList', 'orderedList', 'layoutSection'];
 var CELL_NODES = ['tableCell', 'tableHeader'];
 
-/**
- * Block nodes that host a contributor tag of their own — those whose whole box reads as one change.
- * Lists and tables are excluded: they decorate per item and per cell, with no one-tag-per-block
- * design yet. `blockCard` covers the datasource variant, which is the same node type.
- */
-var TAGGABLE_BLOCK_NODES = new Set(['blockCard', 'blockquote', 'bodiedExtension', 'codeBlock', 'embedCard', 'expand', 'extension', 'media', 'multiBodiedExtension', 'panel', 'rule']);
-
 /** Panels, rules and media can also sit in a table cell, which is out of scope for block tags. */
 var isInsideTable = function isInsideTable(doc, pos) {
   return findParentNodeClosestToPos(doc.resolve(pos), function (node) {
@@ -41,13 +35,23 @@ var isInsideTable = function isInsideTable(doc, pos) {
   }) !== undefined;
 };
 
-/** Whether this block can host a contributor tag of its own. */
+/**
+ * Whether this block can host a contributor tag of its own.
+ *
+ * The node type is resolved from the document rather than matched on `change.name`, so a schema
+ * variant is recognised as the type it varies — see `isTaggableBlockNode`. `from` is the node's own
+ * position, so `nodeAt` returns exactly the node being decorated.
+ */
 var canTagBlock = function canTagBlock(_ref) {
+  var _doc$nodeAt;
   var diffType = _ref.diffType,
     doc = _ref.doc,
-    from = _ref.from,
-    name = _ref.name;
-  return doc !== undefined && isExtendedEnabled(diffType) && TAGGABLE_BLOCK_NODES.has(name) && !isInsideTable(doc, from);
+    from = _ref.from;
+  if (doc === undefined || !isExtendedEnabled(diffType)) {
+    return false;
+  }
+  var nodeType = (_doc$nodeAt = doc.nodeAt(from)) === null || _doc$nodeAt === void 0 ? void 0 : _doc$nodeAt.type;
+  return nodeType !== undefined && isTaggableBlockNode(nodeType) && !isInsideTable(doc, from);
 };
 
 /** Positioning context for the cell overlay widget decorations. */
@@ -189,8 +193,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
   var shouldTagBlock = showContributorTags && canTagBlock({
     diffType: diffType,
     doc: doc,
-    from: change.from,
-    name: change.name
+    from: change.from
   });
   // Named so this block's own tag can position against it; see `createContributorTagWidget`.
   var tagAnchorName = shouldTagBlock && isContributorTagWidgetEnabled() ? buildAnchorDecorationKey({
@@ -234,7 +237,9 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       key: 'cell-overlay-decoration'
     }));
   }
-  // isInserted is only read under the extended experience, so pass it unconditionally.
+  // isInserted is only read under the extended experience, so pass it unconditionally. `change.name`
+  // verbatim: base-name resolution stays in `canTagBlock`, which needs tags on, so a schema
+  // variant's legacy style is untouched — see `resolveBaseNodeName`.
   var nodeStyle = getBlockNodeStyle({
     nodeName: change.name,
     colorScheme: colorScheme,
@@ -265,6 +270,8 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     })));
   }
   if (decorations.length === 0) {
+    // An unstyled node type (paragraph, heading, list, layout, …) emits no decoration at all, so
+    // there is nothing for a tag to hang off even when the node type would otherwise be taggable.
     return decorations;
   }
   if (showIndicators && doc && isExtendedEnabled(diffType)) {

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