@atlaskit/editor-plugin-show-diff 12.1.1 → 12.1.3

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

@@ -28,7 +28,7 @@ export const createNodeChangedDecorationWidget = ({
   diffType,
   hideAddedDiffsUnderline = false
 }) => {
-  var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first, _slice$content$firstC;
+  var _slice$content, _slice$content2, _slice$content2$first, _slice$content3, _slice$content3$first, _$safeInsertPos$nodeB, _slice$content$firstC;
   const slice = doc.slice(change.fromA, change.toA);
   const shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 ? void 0 : (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 ? void 0 : (_slice$content2 = slice.content) === null || _slice$content2 === void 0 ? void 0 : (_slice$content2$first = _slice$content2.firstChild) === null || _slice$content2$first === void 0 ? void 0 : _slice$content2$first.type.name) === 'paragraph' && (slice === null || slice === void 0 ? void 0 : (_slice$content3 = slice.content) === null || _slice$content3 === void 0 ? void 0 : (_slice$content3$first = _slice$content3.firstChild) === null || _slice$content3$first === void 0 ? void 0 : _slice$content3$first.content.size) === 0;
   // Widget decoration used for deletions as the content is not in the document
@@ -61,6 +61,14 @@ export const createNodeChangedDecorationWidget = ({
 
   // For non-table content, use the existing span wrapper approach
   const dom = document.createElement('span');
+  const $safeInsertPos = newDoc.resolve(safeInsertPos);
+  const isTopLevelInsert = $safeInsertPos.depth === 0;
+  const hasPreviousBlock = ((_$safeInsertPos$nodeB = $safeInsertPos.nodeBefore) === null || _$safeInsertPos$nodeB === void 0 ? void 0 : _$safeInsertPos$nodeB.isBlock) === true;
+  if (isExtendedEnabled(diffType) && isTopLevelInsert && hasPreviousBlock) {
+    // Editor CSS removes the top margin from a block when it is its parent's first child.
+    // Keep the serialized block as a subsequent child so each block type retains its own margin.
+    dom.append(dom.ownerDocument.createElement('div'));
+  }
   // When mediaSingle nodes are rendered inside a widget decoration (e.g. as part of
   // a replaced panel), the centering CSS (margin-left: 50%; transform: translateX(-50%))
   // incorrectly applies because isNestedNode resolves to false (getPos returns 0).

package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js

@@ -18,14 +18,13 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
 import { createDocMarginAnchorWidget } from '../decorations/createAnchorDecorationWidgets';
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
-import { createGranularBlockReferenceWidget } from '../decorations/createGranularBlockReferenceWidget';
 import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';
 import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
 import { extractDiffDescriptors } from '../decorations/decorationKeys';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
 import { isExtendedEnabled } from '../isExtendedEnabled';
-import { diffBySteps, getStepChanges } from './diffBySteps';
+import { diffBySteps } from './diffBySteps';
 import { groupChangesByBlock } from './groupChangesByBlock';
 import { optimizeChanges } from './optimizeChanges';
 import { simplifySteps } from './simplifySteps';
@@ -254,7 +253,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref4
 
   // Our default operations are insertions, so it should match the opposite of isInverted.
   var isInserted = !isInverted;
-  var createDecorationsForChange = function createDecorationsForChange(change, showGranularWithBlock) {
+  var createDecorationsForChange = function createDecorationsForChange(change) {
     var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
 
     // Hoisted because it decides BOTH where the deleted widget is anchored and — since the
@@ -266,10 +265,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref4
       inlineDeletedDiffPlacement: inlineDeletedDiffPlacement
     });
     if (change.inserted.length > 0) {
-      // shouldHideDeleted for block/node decorations: suppressed when isInverted + hideDeletedDiffs,
-      // or when showGranularWithBlock (block reference widget is shown instead).
-      // isInverted gates both — on an inverted diff the inserted side is visually the deleted side.
-      var shouldHideDeleted = isExtendedEnabled(diffType) ? isInverted && (hideDeletedDiffs || showGranularWithBlock && change.deleted.length > 0) : false;
+      // On an inverted diff the inserted side is visually the deleted side.
+      var shouldHideDeleted = isExtendedEnabled(diffType) ? isInverted && hideDeletedDiffs : false;
 
       // For `smart` NODE-level promotions the change range spans a whole container
       // (e.g. an entire list/table/layout, using outer node bounds). Applying a SINGLE
@@ -286,7 +283,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref4
       // change. Used to decide if indicator anchor positions should be adjusted
       // inward — when the widget is present the anchor must stay at the block
       // boundary to keep the indicator bar continuous with the deleted content.
-      var willRenderDeletedWidget = change.deleted.length > 0 && !(isExtendedEnabled(diffType) && !isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.inserted.length > 0);
+      var willRenderDeletedWidget = change.deleted.length > 0 && !(isExtendedEnabled(diffType) && !isInverted && hideDeletedDiffs && change.inserted.length > 0);
       if (isSmartNodeLevel) {
         var _iterator2 = _createForOfIteratorHelper(leafTextblockRanges(tr.doc, change.fromB, change.toB)),
           _step2;
@@ -350,7 +347,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref4
       }))));
     }
     if (change.deleted.length > 0) {
-      var _shouldHideDeleted = isExtendedEnabled(diffType) ? !isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.inserted.length > 0 : false;
+      var _shouldHideDeleted = isExtendedEnabled(diffType) ? !isInverted && hideDeletedDiffs && change.inserted.length > 0 : false;
       if (!_shouldHideDeleted) {
         decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget(_objectSpread(_objectSpread({
           change: change,
@@ -371,88 +368,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref4
       }
     }
   };
-  if (diffType === 'step' && expValEquals('platform_editor_diff_granular_extended', 'isEnabled', true)) {
-    // Uses getStepChanges instead of getChanges so that we have per-step granularity metadata.
-    // Specifically, we need to know how many granular changes each step produced in order to
-    // apply the shouldHideDeleted suppression threshold (> 3 granular changes per step).
-    // getChanges returns a flat Change[] with no per-step grouping, making this count impossible
-    // to derive after the fact without re-introducing per-change metadata.
-    var stepChanges = getStepChanges(originalDoc, steps);
-    stepChanges.forEach(function (_ref5) {
-      var isGranular = _ref5.isGranular,
-        stepChangeList = _ref5.changes;
-      var granularCount = isGranular ? stepChangeList.length : 0;
-
-      // Calculate the average ratio of changed content on both A (original) and B (new)
-      // sides of the diff. If 30% or more of the block has changed on average, we show
-      // the block reference widget even if the granular change count is below the threshold.
-      // Block length is derived from the enclosing text block boundaries rather than the
-      // first/last change positions, so unchanged words at the start/end are accounted for.
-      var avgChangedRatio = 0;
-      if (isGranular && stepChangeList.length > 0) {
-        var first = stepChangeList[0];
-        var last = stepChangeList[stepChangeList.length - 1];
-        var resolvedA = originalDoc.resolve(first.fromA);
-        var resolvedB = tr.doc.resolve(first.fromB);
-        var blockStartA = first.fromA;
-        var blockEndA = last.toA;
-        var blockStartB = first.fromB;
-        var blockEndB = last.toB;
-        for (var depth = resolvedA.depth; depth >= 0; depth--) {
-          var node = resolvedA.node(depth);
-          if (node.isTextblock) {
-            blockStartA = resolvedA.start(depth);
-            blockEndA = blockStartA + node.nodeSize - 2; // exclude open/close tokens
-            break;
-          }
-        }
-        for (var _depth = resolvedB.depth; _depth >= 0; _depth--) {
-          var _node = resolvedB.node(_depth);
-          if (_node.isTextblock) {
-            blockStartB = resolvedB.start(_depth);
-            blockEndB = blockStartB + _node.nodeSize - 2; // exclude open/close tokens
-            break;
-          }
-        }
-        var blockLengthA = blockEndA - blockStartA;
-        var blockLengthB = blockEndB - blockStartB;
-        var totalChangedA = stepChangeList.reduce(function (sum, c) {
-          return sum + (c.toA - c.fromA);
-        }, 0);
-        var totalChangedB = stepChangeList.reduce(function (sum, c) {
-          return sum + (c.toB - c.fromB);
-        }, 0);
-        var ratioA = blockLengthA > 0 ? totalChangedA / blockLengthA : 0;
-        var ratioB = blockLengthB > 0 ? totalChangedB / blockLengthB : 0;
-        avgChangedRatio = (ratioA + ratioB) / 2;
-      }
-      var showGranularWithBlock = isGranular && granularCount !== 1 && (granularCount > 3 || avgChangedRatio >= 0.3);
-      stepChangeList.forEach(function (change) {
-        createDecorationsForChange(change, showGranularWithBlock);
-      });
-      if (showGranularWithBlock && stepChangeList.length > 0 && !hideDeletedDiffs) {
-        var lastChange = stepChangeList[stepChangeList.length - 1];
-        var granularBlockDiffId = crypto.randomUUID();
-        var blockWidgets = createGranularBlockReferenceWidget({
-          change: lastChange,
-          originalDoc: originalDoc,
-          newDoc: tr.doc,
-          isInverted: isInverted,
-          nodeViewSerializer: nodeViewSerializer,
-          colorScheme: colorScheme,
-          intl: intl,
-          activeIndexPos: activeIndexPos,
-          diffId: granularBlockDiffId,
-          showIndicators: showIndicators
-        });
-        decorations.push.apply(decorations, _toConsumableArray(blockWidgets));
-      }
-    });
-  } else {
-    changes.forEach(function (change) {
-      createDecorationsForChange(change, /* showGranularWithBlock */false);
-    });
-  }
+  changes.forEach(function (change) {
+    createDecorationsForChange(change);
+  });
   getMarkChangeRanges(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
@@ -524,42 +442,42 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref4
 };
 export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref6, _ref7) {
-  var _ref1;
+function (_ref5, _ref6) {
+  var _ref0;
+  var _ref7 = _slicedToArray(_ref5, 1),
+    _ref7$ = _ref7[0],
+    pluginState = _ref7$.pluginState,
+    state = _ref7$.state,
+    colorScheme = _ref7$.colorScheme,
+    intl = _ref7$.intl,
+    activeIndexPos = _ref7$.activeIndexPos,
+    isInverted = _ref7$.isInverted,
+    diffType = _ref7$.diffType,
+    hideDeletedDiffs = _ref7$.hideDeletedDiffs,
+    hideAddedDiffsUnderline = _ref7$.hideAddedDiffsUnderline,
+    showIndicators = _ref7$.showIndicators,
+    smartThresholds = _ref7$.smartThresholds,
+    deletedDiffPlacement = _ref7$.deletedDiffPlacement,
+    inlineDeletedDiffPlacement = _ref7$.inlineDeletedDiffPlacement;
   var _ref8 = _slicedToArray(_ref6, 1),
     _ref8$ = _ref8[0],
-    pluginState = _ref8$.pluginState,
-    state = _ref8$.state,
-    colorScheme = _ref8$.colorScheme,
-    intl = _ref8$.intl,
-    activeIndexPos = _ref8$.activeIndexPos,
-    isInverted = _ref8$.isInverted,
-    diffType = _ref8$.diffType,
-    hideDeletedDiffs = _ref8$.hideDeletedDiffs,
-    hideAddedDiffsUnderline = _ref8$.hideAddedDiffsUnderline,
-    showIndicators = _ref8$.showIndicators,
-    smartThresholds = _ref8$.smartThresholds,
-    deletedDiffPlacement = _ref8$.deletedDiffPlacement,
-    inlineDeletedDiffPlacement = _ref8$.inlineDeletedDiffPlacement;
-  var _ref9 = _slicedToArray(_ref7, 1),
-    _ref9$ = _ref9[0],
-    lastPluginState = _ref9$.pluginState,
-    lastState = _ref9$.state,
-    lastColorScheme = _ref9$.colorScheme,
-    lastIntl = _ref9$.intl,
-    lastActiveIndexPos = _ref9$.activeIndexPos,
-    lastIsInverted = _ref9$.isInverted,
-    lastDiffType = _ref9$.diffType,
-    lastHideDeletedDiffs = _ref9$.hideDeletedDiffs,
-    lastHideAddedDiffsUnderline = _ref9$.hideAddedDiffsUnderline,
-    lastShowIndicators = _ref9$.showIndicators,
-    lastSmartThresholds = _ref9$.smartThresholds,
-    lastDeletedDiffPlacement = _ref9$.deletedDiffPlacement,
-    lastInlineDeletedDiffPlacement = _ref9$.inlineDeletedDiffPlacement;
+    lastPluginState = _ref8$.pluginState,
+    lastState = _ref8$.state,
+    lastColorScheme = _ref8$.colorScheme,
+    lastIntl = _ref8$.intl,
+    lastActiveIndexPos = _ref8$.activeIndexPos,
+    lastIsInverted = _ref8$.isInverted,
+    lastDiffType = _ref8$.diffType,
+    lastHideDeletedDiffs = _ref8$.hideDeletedDiffs,
+    lastHideAddedDiffsUnderline = _ref8$.hideAddedDiffsUnderline,
+    lastShowIndicators = _ref8$.showIndicators,
+    lastSmartThresholds = _ref8$.smartThresholds,
+    lastDeletedDiffPlacement = _ref8$.deletedDiffPlacement,
+    lastInlineDeletedDiffPlacement = _ref8$.inlineDeletedDiffPlacement;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if (isExtendedEnabled(diffType)) {
-    var _ref0;
-    return (_ref0 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref0 !== void 0 ? _ref0 : false;
+    var _ref9;
+    return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && hideAddedDiffsUnderline === lastHideAddedDiffsUnderline && showIndicators === lastShowIndicators && isEqual(smartThresholds, lastSmartThresholds) && deletedDiffPlacement === lastDeletedDiffPlacement && inlineDeletedDiffPlacement === lastInlineDeletedDiffPlacement) !== null && _ref9 !== void 0 ? _ref9 : false;
   }
-  return (_ref1 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref1 !== void 0 ? _ref1 : false;
+  return (_ref0 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref0 !== void 0 ? _ref0 : false;
 });

package/dist/esm/pm-plugins/calculateDiff/diffBySteps.js

@@ -401,127 +401,4 @@ export var diffBySteps = function diffBySteps(originalDoc, steps) {
     });
   }
   return mergeOverlappingByNewDocRange(changes);
-};
-
-/**
- * A fork of `diffBySteps` that returns changes grouped per step, rather than as a flat list.
- *
- * Why forked rather than refactoring `diffBySteps`:
- * - `diffBySteps` returns a flat `Change[]` and is consumed by the existing decoration path.
- *   Changing its return shape would require threading per-step metadata through all callers,
- *   adding complexity to a stable code path.
- * - The per-step grouping is only needed for the `platform_editor_diff_granular_extended` gate,
- *   where we need to know how many granular changes a single step produced in order to decide
- *   whether to suppress deleted decorations (threshold: > 3 granular changes per step).
- * - Keeping the two functions separate means each has a clear, focused contract and neither
- *   accumulates the other's concerns. Shared logic (mapping helpers, `mergeOverlappingByNewDocRange`,
- *   `shouldCheckGranularDiff`, etc.) is already extracted and reused by both.
- */
-export var getStepChanges = function getStepChanges(originalDoc, steps) {
-  var result = [];
-  var currentDoc = originalDoc;
-  var successfulStepMaps = [];
-  var rangedSteps = [];
-  var _iterator4 = _createForOfIteratorHelper(steps),
-    _step4;
-  try {
-    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-      var step = _step4.value;
-      var before = currentDoc;
-      var stepResult = step.apply(currentDoc);
-      if (stepResult.failed !== null || !stepResult.doc) {
-        continue;
-      }
-      var stepMap = step.getMap();
-      var rangeStep = step;
-      if (typeof rangeStep.from === 'number' && typeof rangeStep.to === 'number') {
-        rangedSteps.push({
-          before: before,
-          doc: stepResult.doc,
-          from: rangeStep.from,
-          to: rangeStep.to,
-          mapIndex: successfulStepMaps.length,
-          step: step,
-          stepMap: stepMap
-        });
-      }
-      successfulStepMaps.push(stepMap);
-      currentDoc = stepResult.doc;
-    }
-  } catch (err) {
-    _iterator4.e(err);
-  } finally {
-    _iterator4.f();
-  }
-  for (var _i2 = 0, _rangedSteps2 = rangedSteps; _i2 < _rangedSteps2.length; _i2++) {
-    var rangedStep = _rangedSteps2[_i2];
-    var originalToBeforeStep = createMapping(successfulStepMaps.slice(0, rangedStep.mapIndex));
-    var beforeStepToOriginal = originalToBeforeStep.invert();
-    var fromA = mapPosition(beforeStepToOriginal, rangedStep.from);
-    var toA = mapPosition(beforeStepToOriginal, rangedStep.to);
-    var fromAfterStep = rangedStep.stepMap.map(rangedStep.from, -1);
-    var toAfterStep = rangedStep.stepMap.map(rangedStep.to, 1);
-    var afterStepToFinal = createMapping(successfulStepMaps.slice(rangedStep.mapIndex + 1));
-    var fromB = mapPosition(afterStepToFinal, fromAfterStep);
-    var toB = mapPosition(afterStepToFinal, toAfterStep);
-    if (shouldCheckGranularDiff(rangedStep.step, rangedStep.before, rangedStep.from, rangedStep.to)) {
-      var granularStepChanges = ChangeSet.create(rangedStep.before).addSteps(rangedStep.doc, [rangedStep.stepMap], null);
-      var optimizedGranularStepChanges = optimizeChanges(simplifyChanges(granularStepChanges.changes, rangedStep.doc));
-      var stepChanges = [];
-      var _iterator5 = _createForOfIteratorHelper(optimizedGranularStepChanges),
-        _step5;
-      try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var granularChange = _step5.value;
-          var expandedA = expandToWordBoundaries(rangedStep.before, granularChange.fromA, granularChange.toA);
-          var expandedB = expandToWordBoundaries(rangedStep.doc, granularChange.fromB, granularChange.toB);
-          var aLeftDelta = granularChange.fromA - expandedA.from;
-          var aRightDelta = expandedA.to - granularChange.toA;
-          var bLeftDelta = granularChange.fromB - expandedB.from;
-          var bRightDelta = expandedB.to - granularChange.toB;
-          var finalA = expandedA;
-          var finalB = expandedB;
-          if (aLeftDelta > bLeftDelta || aRightDelta > bRightDelta) {
-            var extraLeft = Math.max(0, aLeftDelta - bLeftDelta);
-            var extraRight = Math.max(0, aRightDelta - bRightDelta);
-            finalB = expandToWordBoundaries(rangedStep.doc, Math.max(expandedB.from - extraLeft, 0), expandedB.to + extraRight);
-          }
-          if (bLeftDelta > aLeftDelta || bRightDelta > aRightDelta) {
-            var _extraLeft2 = Math.max(0, bLeftDelta - aLeftDelta);
-            var _extraRight2 = Math.max(0, bRightDelta - aRightDelta);
-            finalA = expandToWordBoundaries(rangedStep.before, Math.max(expandedA.from - _extraLeft2, 0), expandedA.to + _extraRight2);
-          }
-          stepChanges.push({
-            fromA: mapPosition(beforeStepToOriginal, finalA.from),
-            toA: mapPosition(beforeStepToOriginal, finalA.to),
-            fromB: mapPosition(afterStepToFinal, finalB.from),
-            toB: mapPosition(afterStepToFinal, finalB.to),
-            deleted: createSpans(Math.max(0, finalA.to - finalA.from)),
-            inserted: createSpans(Math.max(0, finalB.to - finalB.from))
-          });
-        }
-      } catch (err) {
-        _iterator5.e(err);
-      } finally {
-        _iterator5.f();
-      }
-      result.push({
-        isGranular: true,
-        changes: mergeOverlappingByNewDocRange(stepChanges)
-      });
-      continue;
-    }
-    result.push({
-      isGranular: false,
-      changes: [{
-        fromA: fromA,
-        toA: toA,
-        fromB: fromB,
-        toB: toB,
-        deleted: createSpans(Math.max(0, toA - fromA)),
-        inserted: createSpans(Math.max(0, toB - fromB))
-      }]
-    });
-  }
-  return result;
 };

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

@@ -14,7 +14,7 @@ import { wrapBlockNodeView, injectInnerWrapper, createContentWrapper } from './u
  * that is not in the current document.
  */
 export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref) {
-  var _slice$content, _slice$content2, _slice$content3, _slice$content$firstC;
+  var _slice$content, _slice$content2, _slice$content3, _$safeInsertPos$nodeB, _slice$content$firstC;
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer,
@@ -71,6 +71,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);
+  var isTopLevelInsert = $safeInsertPos.depth === 0;
+  var hasPreviousBlock = ((_$safeInsertPos$nodeB = $safeInsertPos.nodeBefore) === null || _$safeInsertPos$nodeB === void 0 ? void 0 : _$safeInsertPos$nodeB.isBlock) === true;
+  if (isExtendedEnabled(diffType) && isTopLevelInsert && hasPreviousBlock) {
+    // Editor CSS removes the top margin from a block when it is its parent's first child.
+    // Keep the serialized block as a subsequent child so each block type retains its own margin.
+    dom.append(dom.ownerDocument.createElement('div'));
+  }
   // When mediaSingle nodes are rendered inside a widget decoration (e.g. as part of
   // a replaced panel), the centering CSS (margin-left: 50%; transform: translateX(-50%))
   // incorrectly applies because isNestedNode resolves to false (getPos returns 0).

package/dist/types/pm-plugins/calculateDiff/diffBySteps.d.ts

@@ -1,24 +1,4 @@
 import { type Change } from 'prosemirror-changeset';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
-type StepChanges = {
-    changes: Change[];
-    isGranular: boolean;
-};
 export declare const diffBySteps: (originalDoc: PMNode, steps: Step[]) => Change[];
-/**
- * A fork of `diffBySteps` that returns changes grouped per step, rather than as a flat list.
- *
- * Why forked rather than refactoring `diffBySteps`:
- * - `diffBySteps` returns a flat `Change[]` and is consumed by the existing decoration path.
- *   Changing its return shape would require threading per-step metadata through all callers,
- *   adding complexity to a stable code path.
- * - The per-step grouping is only needed for the `platform_editor_diff_granular_extended` gate,
- *   where we need to know how many granular changes a single step produced in order to decide
- *   whether to suppress deleted decorations (threshold: > 3 granular changes per step).
- * - Keeping the two functions separate means each has a clear, focused contract and neither
- *   accumulates the other's concerns. Shared logic (mapping helpers, `mergeOverlappingByNewDocRange`,
- *   `shouldCheckGranularDiff`, etc.) is already extracted and reused by both.
- */
-export declare const getStepChanges: (originalDoc: PMNode, steps: Step[]) => StepChanges[];
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "12.1.1",
+	"version": "12.1.3",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -27,10 +27,10 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/tmp-editor-statsig": "^146.0.0",
-		"@atlaskit/tokens": "^16.6.0",
+		"@atlaskit/tmp-editor-statsig": "^147.0.0",
+		"@atlaskit/tokens": "^16.7.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^1.0.0",
+		"@compiled/react": "^1.0.2",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
 		"prosemirror-changeset": "^2.3.1"
@@ -40,7 +40,7 @@
 		"@atlaskit/button": "^25.0.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/dropdown-menu": "^18.0.0",
-		"@atlaskit/editor-core": "^223.0.0",
+		"@atlaskit/editor-core": "^223.1.0",
 		"@atlaskit/editor-json-transformer": "^9.2.0",
 		"@atlaskit/form": "^17.0.0",
 		"@atlaskit/primitives": "^22.2.0",
@@ -53,7 +53,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.5.0",
+		"@atlaskit/editor-common": "^118.10.0",
 		"react": "^18.2.0 || ^19.2.0"
 	},
 	"techstack": {

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

@@ -1,125 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createGranularBlockReferenceWidget = void 0;
-var _view = require("@atlaskit/editor-prosemirror/view");
-var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
-var _decorationKeys = require("./decorationKeys");
-var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
-/**
- * Creates a single block widget that renders a reference text block content
- * beneath a granular diff set, for reference when deleted content is hidden.
- *
- * Since granular diffing only applies to singular isTextBlock=true nodes, this
- * widget always renders exactly one block node and does not need the slice/fragment
- * complexity of createNodeChangedDecorationWidget.
- *
- * Resolves which doc and positions to render based on isInverted:
- * - !isInverted: renders originalDoc at A-side positions (what was there before)
- * - isInverted: renders newDoc at B-side positions (the current/new content)
- *
- * The widget is always inserted at the B-side block boundary in newDoc since
- * ProseMirror decorations are always anchored against the live (new) document.
- */
-var createGranularBlockReferenceWidget = exports.createGranularBlockReferenceWidget = function createGranularBlockReferenceWidget(_ref) {
-  var change = _ref.change,
-    originalDoc = _ref.originalDoc,
-    newDoc = _ref.newDoc,
-    isInverted = _ref.isInverted,
-    nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme,
-    intl = _ref.intl,
-    activeIndexPos = _ref.activeIndexPos,
-    diffId = _ref.diffId,
-    _ref$showIndicators = _ref.showIndicators,
-    showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators;
-  // Determine which doc and positions to use for rendering the reference block.
-  var renderDoc = isInverted ? newDoc : originalDoc;
-  var renderTo = isInverted ? change.toB : change.toA;
-
-  // The insertion point is always in newDoc — ProseMirror decorates against the live document.
-  // Walk up from toB to find the enclosing text block boundary for widget placement.
-  var insertResolvedPos = newDoc.resolve(change.toB);
-  var blockEnd = change.toB;
-  for (var depth = insertResolvedPos.depth; depth >= 0; depth--) {
-    var node = insertResolvedPos.node(depth);
-    if (node.isTextblock) {
-      blockEnd = insertResolvedPos.start(depth) + node.nodeSize - 1;
-      break;
-    }
-  }
-
-  // Find the block node to render from the render doc at the render positions.
-  var renderResolvedPos = renderDoc.resolve(renderTo);
-  var renderBlockNode = null;
-  for (var _depth = renderResolvedPos.depth; _depth >= 0; _depth--) {
-    var _node = renderResolvedPos.node(_depth);
-    if (_node.isTextblock) {
-      renderBlockNode = _node;
-      break;
-    }
-  }
-  if (!renderBlockNode) {
-    return [];
-  }
-  var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
-
-  /**
-   * This will always be a block node as it's a textBlock-like node.
-   * We use div instead of span so we can add margins.
-   */
-  var dom = document.createElement('div');
-  dom.setAttribute('data-testid', 'show-diff-granular-block-reference');
-  dom.style.setProperty('margin-top', "var(--ds-space-200, 16px)");
-  var nodeView = nodeViewSerializer.tryCreateNodeView(renderBlockNode);
-  if (nodeView) {
-    (0, _wrapBlockNodeView.wrapBlockNodeView)({
-      dom: dom,
-      nodeView: nodeView,
-      targetNode: renderBlockNode,
-      colorScheme: colorScheme,
-      intl: intl,
-      isActive: !!isActive,
-      isInserted: false
-    });
-  } else {
-    var serialized = nodeViewSerializer.serializeNode(renderBlockNode);
-    if (serialized && serialized instanceof HTMLElement) {
-      (0, _wrapBlockNodeView.injectInnerWrapper)({
-        node: serialized,
-        colorScheme: colorScheme,
-        isActive: !!isActive,
-        isInserted: false
-      });
-      dom.append(serialized);
-    } else if (serialized) {
-      dom.append(serialized);
-    }
-  }
-  if (dom.childNodes.length === 0) {
-    return [];
-  }
-  var decorations = [];
-  if (showIndicators) {
-    var leftAnchor = (0, _createAnchorDecorationWidgets.createLeftAnchorWidget)({
-      doc: newDoc,
-      from: blockEnd,
-      diffId: diffId
-    });
-    dom.style.setProperty('anchor-name', "--".concat((0, _decorationKeys.buildAnchorDecorationKey)({
-      diffId: diffId
-    })));
-    if (leftAnchor) {
-      decorations.push(leftAnchor);
-    }
-  }
-  decorations.push(_view.Decoration.widget(blockEnd, dom, (0, _decorationKeys.buildDiffDecorationSpec)({
-    decorationType: 'widget',
-    diffId: diffId,
-    // We want it to be as close to the granular diff as possible
-    side: -999
-  })));
-  return decorations;
-};