@atlaskit/editor-plugin-show-diff 10.1.10 → 10.1.12

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.1.12
+
+### Patch Changes
+
+- [`3d9bf2e6f248a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d9bf2e6f248a) -
+  Fix nested image in panel shifting left when showing suggestion diff
+- Updated dependencies
+
+## 10.1.11
+
+### Patch Changes
+
+- [`0096393101f67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0096393101f67) -
+  Render inverted granular step diffs as a hybrid (based on threshold): granular changed inline plus
+  a 'reference' block crossed out underneath
+- Updated dependencies
+
 ## 10.1.10
 
 ### Patch Changes

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

@@ -17,6 +17,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _areDocsEqualByBlockStructureAndText = require("../areDocsEqualByBlockStructureAndText");
 var _createAnchorDecorationWidgets = require("../decorations/createAnchorDecorationWidgets");
 var _createBlockChangedDecoration = require("../decorations/createBlockChangedDecoration");
+var _createGranularBlockReferenceWidget = require("../decorations/createGranularBlockReferenceWidget");
 var _createInlineChangedDecoration = require("../decorations/createInlineChangedDecoration");
 var _createNodeChangedDecorationWidget = require("../decorations/createNodeChangedDecorationWidget");
 var _decorationKeys = require("../decorations/decorationKeys");
@@ -171,12 +172,16 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
   if (showIndicators && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     decorations.push((0, _createAnchorDecorationWidgets.createDocMarginAnchorWidget)());
   }
-  changes.forEach(function (change) {
+
+  // Our default operations are insertions, so it should match the opposite of isInverted.
+  var isInserted = !isInverted;
+  var createDecorationsForChange = function createDecorationsForChange(change, showGranularWithBlock) {
     var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
-    // Our default operations are insertions, so it should match the opposite of isInverted.
-    var isInserted = !isInverted;
     if (change.inserted.length > 0) {
-      var shouldHideDeleted = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && hideDeletedDiffs : false;
+      // 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 = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.deleted.length > 0 : false;
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)(_objectSpread({
         change: change,
         doc: tr.doc,
@@ -201,7 +206,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       }))));
     }
     if (change.deleted.length > 0) {
-      var _shouldHideDeleted = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
+      var _shouldHideDeleted = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.inserted.length > 0 : false;
       if (!_shouldHideDeleted) {
         decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread(_objectSpread({
           change: change,
@@ -219,7 +224,89 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         }))));
       }
     }
-  });
+  };
+  if (diffType === 'step' && (0, _expValEquals.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 = (0, _diffBySteps.getStepChanges)(originalDoc, steps);
+    stepChanges.forEach(function (_ref4) {
+      var isGranular = _ref4.isGranular,
+        stepChangeList = _ref4.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) {
+        var lastChange = stepChangeList[stepChangeList.length - 1];
+        var granularBlockDiffId = crypto.randomUUID();
+        var blockWidgets = (0, _createGranularBlockReferenceWidget.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, (0, _toConsumableArray2.default)(blockWidgets));
+      }
+    });
+  } else {
+    changes.forEach(function (change) {
+      createDecorationsForChange(change, /* showGranularWithBlock */false);
+    });
+  }
   (0, _getMarkChangeRanges.getMarkChangeRanges)(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
@@ -259,34 +346,34 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
 };
 var calculateDiffDecorations = exports.calculateDiffDecorations = (0, _memoizeOne.default)(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref4, _ref5) {
-  var _ref9;
-  var _ref6 = (0, _slicedToArray2.default)(_ref4, 1),
-    _ref6$ = _ref6[0],
-    pluginState = _ref6$.pluginState,
-    state = _ref6$.state,
-    colorScheme = _ref6$.colorScheme,
-    intl = _ref6$.intl,
-    activeIndexPos = _ref6$.activeIndexPos,
-    isInverted = _ref6$.isInverted,
-    diffType = _ref6$.diffType,
-    hideDeletedDiffs = _ref6$.hideDeletedDiffs,
-    showIndicators = _ref6$.showIndicators;
+function (_ref5, _ref6) {
+  var _ref0;
   var _ref7 = (0, _slicedToArray2.default)(_ref5, 1),
     _ref7$ = _ref7[0],
-    lastPluginState = _ref7$.pluginState,
-    lastState = _ref7$.state,
-    lastColorScheme = _ref7$.colorScheme,
-    lastIntl = _ref7$.intl,
-    lastActiveIndexPos = _ref7$.activeIndexPos,
-    lastIsInverted = _ref7$.isInverted,
-    lastDiffType = _ref7$.diffType,
-    lastHideDeletedDiffs = _ref7$.hideDeletedDiffs,
-    lastShowIndicators = _ref7$.showIndicators;
+    pluginState = _ref7$.pluginState,
+    state = _ref7$.state,
+    colorScheme = _ref7$.colorScheme,
+    intl = _ref7$.intl,
+    activeIndexPos = _ref7$.activeIndexPos,
+    isInverted = _ref7$.isInverted,
+    diffType = _ref7$.diffType,
+    hideDeletedDiffs = _ref7$.hideDeletedDiffs,
+    showIndicators = _ref7$.showIndicators;
+  var _ref8 = (0, _slicedToArray2.default)(_ref6, 1),
+    _ref8$ = _ref8[0],
+    lastPluginState = _ref8$.pluginState,
+    lastState = _ref8$.state,
+    lastColorScheme = _ref8$.colorScheme,
+    lastIntl = _ref8$.intl,
+    lastActiveIndexPos = _ref8$.activeIndexPos,
+    lastIsInverted = _ref8$.isInverted,
+    lastDiffType = _ref8$.diffType,
+    lastHideDeletedDiffs = _ref8$.hideDeletedDiffs,
+    lastShowIndicators = _ref8$.showIndicators;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    var _ref8;
-    return (_ref8 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && showIndicators === lastShowIndicators) !== null && _ref8 !== void 0 ? _ref8 : false;
+    var _ref9;
+    return (_ref9 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs && showIndicators === lastShowIndicators) !== null && _ref9 !== void 0 ? _ref9 : false;
   }
-  return (_ref9 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref9 !== void 0 ? _ref9 : false;
+  return (_ref0 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref0 !== void 0 ? _ref0 : false;
 });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.diffBySteps = void 0;
+exports.getStepChanges = exports.diffBySteps = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _prosemirrorChangeset = require("prosemirror-changeset");
@@ -407,4 +407,127 @@ var diffBySteps = exports.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.
+ */
+var getStepChanges = exports.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 = _prosemirrorChangeset.ChangeSet.create(rangedStep.before).addSteps(rangedStep.doc, [rangedStep.stepMap], null);
+      var optimizedGranularStepChanges = (0, _optimizeChanges.optimizeChanges)((0, _prosemirrorChangeset.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/cjs/pm-plugins/decorations/colorSchemes/standard.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedDecorationMarkerVariable = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 // delete on platform_editor_diff_plugin_extended cleanup
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -142,6 +142,11 @@ var standardDecorationMarkerVariable = exports.standardDecorationMarkerVariable
   '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)",
   '--diff-decoration-marker-ring-width': '1px'
 });
+var deletedDecorationMarkerVariable = exports.deletedDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
+  '--diff-decoration-marker-color': "var(--ds-border-accent-gray, #7D818A)",
+  '--diff-decoration-marker-ring-width': '1px',
+  opacity: 0.8
+});
 var addedCellOverlayStyle = exports.addedCellOverlayStyle = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: 0,

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

@@ -37,6 +37,14 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
     // Layout nodes do not need special styling
     return undefined;
   }
+  // Media nodes inside mediaSingle should not get position:relative
+  // as it shifts the image outside its parent container (e.g. panel)
+  if (nodeName === 'media') {
+    if (!isInserted && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedDecorationMarkerVariable;
+    }
+    return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNodeNew : _standard.editingStyleNode;
+  }
   if (['tableCell', 'tableHeader'].includes(nodeName)) {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       // This is used for positioning the cell overlay widget decorations
@@ -47,11 +55,20 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
     // When gate is off, it should return undefined as above
     return undefined;
   }
+  if (nodeName === 'panel') {
+    if (!isInserted && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedDecorationMarkerVariable;
+    }
+    return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNodeNew : _standard.editingStyleNode;
+  }
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
         return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariableNew : _standard.standardDecorationMarkerVariable;
       } else {
+        if (nodeName === 'listItem') {
+          return isTraditional && isActive ? _traditional.traditionalDeletedDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDeletedDecorationMarkerVariableNew : _standard.deletedDecorationMarkerVariable;
+        }
         return isTraditional && isActive ? _traditional.traditionalDeletedDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDeletedDecorationMarkerVariableNew : _standard.deletedContentStyleNew;
       }
     }

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

@@ -0,0 +1,125 @@
+"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;
+};