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

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

@@ -6,12 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createNodeChangedDecorationWidget = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _standard = require("./colorSchemes/standard");
-var _traditional = require("./colorSchemes/traditional");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
 var _decorationKeys = require("./decorationKeys");
@@ -19,105 +15,23 @@ var _findSafeInsertPos = require("./utils/findSafeInsertPos");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (colorScheme === 'traditional' && isActive) {
-    return _traditional.deletedTraditionalContentStyleUnboundedActive;
-  }
-  return colorScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
-};
-var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (colorScheme === 'traditional') {
-    if (isActive) {
-      return _traditional.traditionalInsertStyleActive;
-    }
-    return _traditional.traditionalInsertStyle;
-  }
-  if (isActive) {
-    return (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? _standard.editingStyleActiveExtended : _standard.editingStyleActive;
-  }
-  return (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? _standard.editingStyleExtended : _standard.editingStyle;
-};
-var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (colorScheme === 'traditional') {
-    return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
-  }
-  // Merge into existing styles when cleaning up
-  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    if (isActive) {
-      return _standard.deletedContentStyleActive + _standard.deletedInlineContentStyleExtended;
-    }
-    return _standard.deletedContentStyleNew + _standard.deletedInlineContentStyleExtended;
-  }
-  if (isActive) {
-    return _standard.deletedContentStyleActive;
-  }
-  return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
-};
-
-/**
- * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
- * the wrapper needs to be injected inside the node around the child content
- */
-var injectInnerWrapper = function injectInnerWrapper(_ref) {
-  var node = _ref.node,
-    colorScheme = _ref.colorScheme,
-    isActive = _ref.isActive,
-    isInserted = _ref.isInserted;
-  var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
-  (0, _toConsumableArray2.default)(node.childNodes).forEach(function (child) {
-    var removedChild = node.removeChild(child);
-    wrapper.append(removedChild);
-  });
-  node.appendChild(wrapper);
-  return node;
-};
-var createContentWrapper = function createContentWrapper(colorScheme) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var wrapper = document.createElement('span');
-  var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
-    position: 'relative',
-    width: 'fit-content'
-  });
-  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    if (isInserted) {
-      wrapper.setAttribute('style', "".concat(baseStyle).concat(getInsertedContentStyle(colorScheme, isActive)));
-    } else {
-      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
-      var strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
-      wrapper.append(strikethrough);
-    }
-  } else {
-    wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
-    var _strikethrough = document.createElement('span');
-    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
-    wrapper.append(_strikethrough);
-  }
-  return wrapper;
-};
-
 /**
  * This function is used to create a decoration widget to show content
  * that is not in the current document.
  */
-var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
+var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref) {
   var _slice$content, _slice$content2, _slice$content3, _slice$content$firstC;
-  var change = _ref2.change,
-    doc = _ref2.doc,
-    nodeViewSerializer = _ref2.nodeViewSerializer,
-    colorScheme = _ref2.colorScheme,
-    newDoc = _ref2.newDoc,
-    intl = _ref2.intl,
-    activeIndexPos = _ref2.activeIndexPos,
-    _ref2$isInserted = _ref2.isInserted,
-    isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted,
-    _ref2$showIndicators = _ref2.showIndicators,
-    showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators;
+  var change = _ref.change,
+    doc = _ref.doc,
+    nodeViewSerializer = _ref.nodeViewSerializer,
+    colorScheme = _ref.colorScheme,
+    newDoc = _ref.newDoc,
+    intl = _ref.intl,
+    activeIndexPos = _ref.activeIndexPos,
+    _ref$isInserted = _ref.isInserted,
+    isInserted = _ref$isInserted === void 0 ? false : _ref$isInserted,
+    _ref$showIndicators = _ref.showIndicators,
+    showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators;
   var slice = doc.slice(change.fromA, change.toA);
   var shouldSkipDeletedEmptyParagraphDecoration = !isInserted && (slice === null || slice === void 0 || (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.childCount) === 1 && (slice === null || slice === void 0 || (_slice$content2 = slice.content) === null || _slice$content2 === void 0 || (_slice$content2 = _slice$content2.firstChild) === null || _slice$content2 === void 0 ? void 0 : _slice$content2.type.name) === 'paragraph' && (slice === null || slice === void 0 || (_slice$content3 = slice.content) === null || _slice$content3 === void 0 || (_slice$content3 = _slice$content3.firstChild) === null || _slice$content3 === void 0 ? void 0 : _slice$content3.content.size) === 0;
   // Widget decoration used for deletions as the content is not in the document
@@ -154,6 +68,32 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
 
   // For non-table content, use the existing span wrapper approach
   var dom = document.createElement('span');
+  // 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).
+  // Observe DOM mutations and override the transform on .rich-media-item elements
+  // after React mounts to prevent the image from shifting outside its parent container.
+  var constrainMediaObserver;
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    constrainMediaObserver = new MutationObserver(function () {
+      var richMediaItems = dom.querySelectorAll('.rich-media-item');
+      richMediaItems.forEach(function (el) {
+        if (el instanceof HTMLElement) {
+          el.style.transform = 'none';
+          el.style.marginLeft = '0';
+          el.style.maxWidth = '100%';
+        }
+      });
+      if (richMediaItems.length > 0) {
+        var _constrainMediaObserv;
+        (_constrainMediaObserv = constrainMediaObserver) === null || _constrainMediaObserv === void 0 || _constrainMediaObserv.disconnect();
+      }
+    });
+    constrainMediaObserver.observe(dom, {
+      childList: true,
+      subtree: true
+    });
+  }
   var diffId = crypto.randomUUID();
   var decorations = [];
 
@@ -171,14 +111,14 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             dom.append(lineBreak);
-            var wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+            var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             var serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              var _wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+              var _wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted);
               _wrapper.append(serializedChild);
               dom.append(_wrapper);
             }
@@ -223,7 +163,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     var nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        var wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+        var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
@@ -245,7 +185,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
         if (fallbackNode instanceof HTMLElement) {
-          var injectedNode = injectInnerWrapper({
+          var injectedNode = (0, _wrapBlockNodeView.injectInnerWrapper)({
             node: fallbackNode,
             colorScheme: colorScheme,
             isActive: isActive,
@@ -253,7 +193,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           });
           dom.append(injectedNode);
         } else {
-          var _wrapper2 = createContentWrapper(colorScheme, isActive, isInserted);
+          var _wrapper2 = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted);
           _wrapper2.append(fallbackNode);
           dom.append(_wrapper2);
         }
@@ -274,13 +214,18 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       decorations.push(leftAnchor);
     }
   }
-  decorations.push(_view.Decoration.widget(safeInsertPos, dom, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
+  decorations.push(_view.Decoration.widget(safeInsertPos, dom, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)(_objectSpread({
     decorationType: 'widget',
     diffId: diffId,
     isActive: isActive
   }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
     side: -1
-  }))));
+  }))), {}, {
+    destroy: function destroy() {
+      var _constrainMediaObserv2;
+      return (_constrainMediaObserv2 = constrainMediaObserver) === null || _constrainMediaObserv2 === void 0 ? void 0 : _constrainMediaObserv2.disconnect();
+    }
+  })));
 
   // When a single block node is purely deleted at the very start of the doc (first child),
   // the deleted widget decoration overlaps with the existing first child's decoration.

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapBlockNodeView = void 0;
+exports.wrapBlockNodeView = exports.injectInnerWrapper = exports.createContentWrapper = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _messages = require("@atlaskit/editor-common/messages");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
@@ -551,4 +553,80 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
       });
     }
   }
+};
+var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional' && isActive) {
+    return _traditional.deletedTraditionalContentStyleUnboundedActive;
+  }
+  return colorScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
+};
+var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional') {
+    return isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
+  }
+  if (isActive) {
+    return _standard.editingStyleActiveExtended;
+  }
+  return _standard.editingStyleExtended;
+};
+var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional') {
+    return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
+  }
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return (isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyleNew) + _standard.deletedInlineContentStyleExtended;
+  }
+  return isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyleNew;
+};
+
+/**
+ * Injects a styled inner wrapper span around the children of a block node element.
+ * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
+ * the wrapper needs to be injected inside the node around the child content.
+ */
+var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrapper(_ref1) {
+  var node = _ref1.node,
+    colorScheme = _ref1.colorScheme,
+    isActive = _ref1.isActive,
+    isInserted = _ref1.isInserted;
+  var wrapper = document.createElement('span');
+  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
+  (0, _toConsumableArray2.default)(node.childNodes).forEach(function (child) {
+    var removedChild = node.removeChild(child);
+    wrapper.append(removedChild);
+  });
+  node.appendChild(wrapper);
+  return node;
+};
+
+/**
+ * Creates a styled span wrapper for inline content within a change decoration.
+ */
+var createContentWrapper = exports.createContentWrapper = function createContentWrapper(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var wrapper = document.createElement('span');
+  var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
+    position: 'relative',
+    width: 'fit-content'
+  });
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isInserted) {
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getInsertedContentStyle(colorScheme, isActive)));
+    } else {
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
+      var strikethrough = document.createElement('span');
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
+      wrapper.append(strikethrough);
+    }
+  } else {
+    wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
+    var _strikethrough = document.createElement('span');
+    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
+    wrapper.append(_strikethrough);
+  }
+  return wrapper;
 };

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

@@ -8,12 +8,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 { diffBySteps } from './diffBySteps';
+import { diffBySteps, getStepChanges } from './diffBySteps';
 import { groupChangesByBlock } from './groupChangesByBlock';
 import { optimizeChanges } from './optimizeChanges';
 import { simplifySteps } from './simplifySteps';
@@ -149,12 +150,16 @@ const calculateDiffDecorationsInner = ({
   if (showIndicators && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     decorations.push(createDocMarginAnchorWidget());
   }
-  changes.forEach(change => {
+
+  // Our default operations are insertions, so it should match the opposite of isInverted.
+  const isInserted = !isInverted;
+  const createDecorationsForChange = (change, showGranularWithBlock) => {
     const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
-    // Our default operations are insertions, so it should match the opposite of isInverted.
-    const isInserted = !isInverted;
     if (change.inserted.length > 0) {
-      const shouldHideDeleted = 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.
+      const shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.deleted.length > 0 : false;
       decorations.push(...createInlineChangedDecoration({
         change,
         doc: tr.doc,
@@ -180,7 +185,7 @@ const calculateDiffDecorationsInner = ({
       }));
     }
     if (change.deleted.length > 0) {
-      const shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
+      const shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.inserted.length > 0 : false;
       if (!shouldHideDeleted) {
         decorations.push(...createNodeChangedDecorationWidget({
           change,
@@ -198,7 +203,86 @@ const calculateDiffDecorationsInner = ({
         }));
       }
     }
-  });
+  };
+  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.
+    const stepChanges = getStepChanges(originalDoc, steps);
+    stepChanges.forEach(({
+      isGranular,
+      changes: stepChangeList
+    }) => {
+      const 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.
+      let avgChangedRatio = 0;
+      if (isGranular && stepChangeList.length > 0) {
+        const first = stepChangeList[0];
+        const last = stepChangeList[stepChangeList.length - 1];
+        const resolvedA = originalDoc.resolve(first.fromA);
+        const resolvedB = tr.doc.resolve(first.fromB);
+        let blockStartA = first.fromA;
+        let blockEndA = last.toA;
+        let blockStartB = first.fromB;
+        let blockEndB = last.toB;
+        for (let depth = resolvedA.depth; depth >= 0; depth--) {
+          const node = resolvedA.node(depth);
+          if (node.isTextblock) {
+            blockStartA = resolvedA.start(depth);
+            blockEndA = blockStartA + node.nodeSize - 2; // exclude open/close tokens
+            break;
+          }
+        }
+        for (let depth = resolvedB.depth; depth >= 0; depth--) {
+          const node = resolvedB.node(depth);
+          if (node.isTextblock) {
+            blockStartB = resolvedB.start(depth);
+            blockEndB = blockStartB + node.nodeSize - 2; // exclude open/close tokens
+            break;
+          }
+        }
+        const blockLengthA = blockEndA - blockStartA;
+        const blockLengthB = blockEndB - blockStartB;
+        const totalChangedA = stepChangeList.reduce((sum, c) => sum + (c.toA - c.fromA), 0);
+        const totalChangedB = stepChangeList.reduce((sum, c) => sum + (c.toB - c.fromB), 0);
+        const ratioA = blockLengthA > 0 ? totalChangedA / blockLengthA : 0;
+        const ratioB = blockLengthB > 0 ? totalChangedB / blockLengthB : 0;
+        avgChangedRatio = (ratioA + ratioB) / 2;
+      }
+      const showGranularWithBlock = isGranular && granularCount !== 1 && (granularCount > 3 || avgChangedRatio >= 0.3);
+      stepChangeList.forEach(change => {
+        createDecorationsForChange(change, showGranularWithBlock);
+      });
+      if (showGranularWithBlock && stepChangeList.length > 0) {
+        const lastChange = stepChangeList[stepChangeList.length - 1];
+        const granularBlockDiffId = crypto.randomUUID();
+        const blockWidgets = createGranularBlockReferenceWidget({
+          change: lastChange,
+          originalDoc,
+          newDoc: tr.doc,
+          isInverted,
+          nodeViewSerializer,
+          colorScheme,
+          intl,
+          activeIndexPos,
+          diffId: granularBlockDiffId,
+          showIndicators
+        });
+        decorations.push(...blockWidgets);
+      }
+    });
+  } else {
+    changes.forEach(change => {
+      createDecorationsForChange(change, /* showGranularWithBlock */false);
+    });
+  }
   getMarkChangeRanges(steps).forEach(change => {
     const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push(...createInlineChangedDecoration({

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

@@ -362,4 +362,108 @@ export const 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 const getStepChanges = (originalDoc, steps) => {
+  const result = [];
+  let currentDoc = originalDoc;
+  const successfulStepMaps = [];
+  const rangedSteps = [];
+  for (const step of steps) {
+    const before = currentDoc;
+    const stepResult = step.apply(currentDoc);
+    if (stepResult.failed !== null || !stepResult.doc) {
+      continue;
+    }
+    const stepMap = step.getMap();
+    const rangeStep = step;
+    if (typeof rangeStep.from === 'number' && typeof rangeStep.to === 'number') {
+      rangedSteps.push({
+        before,
+        doc: stepResult.doc,
+        from: rangeStep.from,
+        to: rangeStep.to,
+        mapIndex: successfulStepMaps.length,
+        step,
+        stepMap
+      });
+    }
+    successfulStepMaps.push(stepMap);
+    currentDoc = stepResult.doc;
+  }
+  for (const rangedStep of rangedSteps) {
+    const originalToBeforeStep = createMapping(successfulStepMaps.slice(0, rangedStep.mapIndex));
+    const beforeStepToOriginal = originalToBeforeStep.invert();
+    const fromA = mapPosition(beforeStepToOriginal, rangedStep.from);
+    const toA = mapPosition(beforeStepToOriginal, rangedStep.to);
+    const fromAfterStep = rangedStep.stepMap.map(rangedStep.from, -1);
+    const toAfterStep = rangedStep.stepMap.map(rangedStep.to, 1);
+    const afterStepToFinal = createMapping(successfulStepMaps.slice(rangedStep.mapIndex + 1));
+    const fromB = mapPosition(afterStepToFinal, fromAfterStep);
+    const toB = mapPosition(afterStepToFinal, toAfterStep);
+    if (shouldCheckGranularDiff(rangedStep.step, rangedStep.before, rangedStep.from, rangedStep.to)) {
+      const granularStepChanges = ChangeSet.create(rangedStep.before).addSteps(rangedStep.doc, [rangedStep.stepMap], null);
+      const optimizedGranularStepChanges = optimizeChanges(simplifyChanges(granularStepChanges.changes, rangedStep.doc));
+      const stepChanges = [];
+      for (const granularChange of optimizedGranularStepChanges) {
+        const expandedA = expandToWordBoundaries(rangedStep.before, granularChange.fromA, granularChange.toA);
+        const expandedB = expandToWordBoundaries(rangedStep.doc, granularChange.fromB, granularChange.toB);
+        const aLeftDelta = granularChange.fromA - expandedA.from;
+        const aRightDelta = expandedA.to - granularChange.toA;
+        const bLeftDelta = granularChange.fromB - expandedB.from;
+        const bRightDelta = expandedB.to - granularChange.toB;
+        let finalA = expandedA;
+        let finalB = expandedB;
+        if (aLeftDelta > bLeftDelta || aRightDelta > bRightDelta) {
+          const extraLeft = Math.max(0, aLeftDelta - bLeftDelta);
+          const extraRight = Math.max(0, aRightDelta - bRightDelta);
+          finalB = expandToWordBoundaries(rangedStep.doc, Math.max(expandedB.from - extraLeft, 0), expandedB.to + extraRight);
+        }
+        if (bLeftDelta > aLeftDelta || bRightDelta > aRightDelta) {
+          const extraLeft = Math.max(0, bLeftDelta - aLeftDelta);
+          const extraRight = Math.max(0, bRightDelta - aRightDelta);
+          finalA = expandToWordBoundaries(rangedStep.before, Math.max(expandedA.from - extraLeft, 0), expandedA.to + extraRight);
+        }
+        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))
+        });
+      }
+      result.push({
+        isGranular: true,
+        changes: mergeOverlappingByNewDocRange(stepChanges)
+      });
+      continue;
+    }
+    result.push({
+      isGranular: false,
+      changes: [{
+        fromA,
+        toA,
+        fromB,
+        toB,
+        deleted: createSpans(Math.max(0, toA - fromA)),
+        inserted: createSpans(Math.max(0, toB - fromB))
+      }]
+    });
+  }
+  return result;
 };

package/dist/es2019/pm-plugins/decorations/colorSchemes/standard.js

@@ -136,6 +136,11 @@ export const standardDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)",
   '--diff-decoration-marker-ring-width': '1px'
 });
+export const deletedDecorationMarkerVariable = convertToInlineCss({
+  '--diff-decoration-marker-color': "var(--ds-border-accent-gray, #7D818A)",
+  '--diff-decoration-marker-ring-width': '1px',
+  opacity: 0.8
+});
 export const addedCellOverlayStyle = convertToInlineCss({
   position: 'absolute',
   top: 0,

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

@@ -1,7 +1,7 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
+import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
 import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
 import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
@@ -30,6 +30,14 @@ const getBlockNodeStyle = ({
     // 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 && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
+    }
+    return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
+  }
   if (['tableCell', 'tableHeader'].includes(nodeName)) {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       // This is used for positioning the cell overlay widget decorations
@@ -40,11 +48,20 @@ const getBlockNodeStyle = ({
     // When gate is off, it should return undefined as above
     return undefined;
   }
+  if (nodeName === 'panel') {
+    if (!isInserted && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
+    }
+    return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
+  }
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
         return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
       } else {
+        if (nodeName === 'listItem') {
+          return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedDecorationMarkerVariable;
+        }
         return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedContentStyleNew;
       }
     }