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

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

@@ -0,0 +1,120 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
+import { buildDiffDecorationSpec, buildAnchorDecorationKey } from './decorationKeys';
+import { wrapBlockNodeView, injectInnerWrapper } from './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.
+ */
+export const createGranularBlockReferenceWidget = ({
+  change,
+  originalDoc,
+  newDoc,
+  isInverted,
+  nodeViewSerializer,
+  colorScheme,
+  intl,
+  activeIndexPos,
+  diffId,
+  showIndicators = false
+}) => {
+  // Determine which doc and positions to use for rendering the reference block.
+  const renderDoc = isInverted ? newDoc : originalDoc;
+  const 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.
+  const insertResolvedPos = newDoc.resolve(change.toB);
+  let blockEnd = change.toB;
+  for (let depth = insertResolvedPos.depth; depth >= 0; depth--) {
+    const 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.
+  const renderResolvedPos = renderDoc.resolve(renderTo);
+  let renderBlockNode = null;
+  for (let depth = renderResolvedPos.depth; depth >= 0; depth--) {
+    const node = renderResolvedPos.node(depth);
+    if (node.isTextblock) {
+      renderBlockNode = node;
+      break;
+    }
+  }
+  if (!renderBlockNode) {
+    return [];
+  }
+  const 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.
+   */
+  const dom = document.createElement('div');
+  dom.setAttribute('data-testid', 'show-diff-granular-block-reference');
+  dom.style.setProperty('margin-top', "var(--ds-space-200, 16px)");
+  const nodeView = nodeViewSerializer.tryCreateNodeView(renderBlockNode);
+  if (nodeView) {
+    wrapBlockNodeView({
+      dom,
+      nodeView,
+      targetNode: renderBlockNode,
+      colorScheme,
+      intl,
+      isActive: !!isActive,
+      isInserted: false
+    });
+  } else {
+    const serialized = nodeViewSerializer.serializeNode(renderBlockNode);
+    if (serialized && serialized instanceof HTMLElement) {
+      injectInnerWrapper({
+        node: serialized,
+        colorScheme,
+        isActive: !!isActive,
+        isInserted: false
+      });
+      dom.append(serialized);
+    } else if (serialized) {
+      dom.append(serialized);
+    }
+  }
+  if (dom.childNodes.length === 0) {
+    return [];
+  }
+  const decorations = [];
+  if (showIndicators) {
+    const leftAnchor = createLeftAnchorWidget({
+      doc: newDoc,
+      from: blockEnd,
+      diffId
+    });
+    dom.style.setProperty('anchor-name', `--${buildAnchorDecorationKey({
+      diffId
+    })}`);
+    if (leftAnchor) {
+      decorations.push(leftAnchor);
+    }
+  }
+  decorations.push(Decoration.widget(blockEnd, dom, buildDiffDecorationSpec({
+    decorationType: 'widget',
+    diffId,
+    // We want it to be as close to the granular diff as possible
+    side: -999
+  })));
+  return decorations;
+};

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

@@ -1,90 +1,10 @@
-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 { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended } from './colorSchemes/standard';
-import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
 import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { buildDiffDecorationSpec, buildAnchorDecorationKey } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
-import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
-const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) => {
-  if (colorScheme === 'traditional' && isActive) {
-    return deletedTraditionalContentStyleUnboundedActive;
-  }
-  return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
-};
-const getInsertedContentStyle = (colorScheme, isActive = false) => {
-  if (colorScheme === 'traditional') {
-    if (isActive) {
-      return traditionalInsertStyleActive;
-    }
-    return traditionalInsertStyle;
-  }
-  if (isActive) {
-    return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? editingStyleActiveExtended : editingStyleActive;
-  }
-  return expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? editingStyleExtended : editingStyle;
-};
-const getDeletedContentStyle = (colorScheme, isActive = false) => {
-  if (colorScheme === 'traditional') {
-    return getDeletedTraditionalInlineStyle(isActive);
-  }
-  // Merge into existing styles when cleaning up
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    if (isActive) {
-      return deletedContentStyleActive + deletedInlineContentStyleExtended;
-    }
-    return deletedContentStyleNew + deletedInlineContentStyleExtended;
-  }
-  if (isActive) {
-    return deletedContentStyleActive;
-  }
-  return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : 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
- */
-const injectInnerWrapper = ({
-  node,
-  colorScheme,
-  isActive,
-  isInserted
-}) => {
-  const wrapper = document.createElement('span');
-  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
-  [...node.childNodes].forEach(child => {
-    const removedChild = node.removeChild(child);
-    wrapper.append(removedChild);
-  });
-  node.appendChild(wrapper);
-  return node;
-};
-const createContentWrapper = (colorScheme, isActive = false, isInserted = false) => {
-  const wrapper = document.createElement('span');
-  const baseStyle = convertToInlineCss({
-    position: 'relative',
-    width: 'fit-content'
-  });
-  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    if (isInserted) {
-      wrapper.setAttribute('style', `${baseStyle}${getInsertedContentStyle(colorScheme, isActive)}`);
-    } else {
-      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
-      const strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
-      wrapper.append(strikethrough);
-    }
-  } else {
-    wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
-    const strikethrough = document.createElement('span');
-    strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
-    wrapper.append(strikethrough);
-  }
-  return wrapper;
-};
+import { wrapBlockNodeView, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
 
 /**
  * This function is used to create a decoration widget to show content
@@ -131,6 +51,32 @@ export const createNodeChangedDecorationWidget = ({
 
   // For non-table content, use the existing span wrapper approach
   const 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.
+  let constrainMediaObserver;
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    constrainMediaObserver = new MutationObserver(() => {
+      const richMediaItems = dom.querySelectorAll('.rich-media-item');
+      richMediaItems.forEach(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 ? void 0 : _constrainMediaObserv.disconnect();
+      }
+    });
+    constrainMediaObserver.observe(dom, {
+      childList: true,
+      subtree: true
+    });
+  }
   const diffId = crypto.randomUUID();
   const decorations = [];
 
@@ -247,14 +193,20 @@ export const createNodeChangedDecorationWidget = ({
       decorations.push(leftAnchor);
     }
   }
-  decorations.push(Decoration.widget(safeInsertPos, dom, buildDiffDecorationSpec({
-    decorationType: 'widget',
-    diffId,
-    isActive,
-    ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-      side: -1
-    })
-  })));
+  decorations.push(Decoration.widget(safeInsertPos, dom, {
+    ...buildDiffDecorationSpec({
+      decorationType: 'widget',
+      diffId,
+      isActive,
+      ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+        side: -1
+      })
+    }),
+    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/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -2,8 +2,8 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingStyleExtended, editingStyleActiveExtended, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingStyleExtended, editingStyleActiveExtended, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
+import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 const lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -542,4 +542,76 @@ export const wrapBlockNodeView = ({
       });
     }
   }
+};
+const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) => {
+  if (colorScheme === 'traditional' && isActive) {
+    return deletedTraditionalContentStyleUnboundedActive;
+  }
+  return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+};
+const getInsertedContentStyle = (colorScheme, isActive = false) => {
+  if (colorScheme === 'traditional') {
+    return isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+  }
+  if (isActive) {
+    return editingStyleActiveExtended;
+  }
+  return editingStyleExtended;
+};
+const getDeletedContentStyle = (colorScheme, isActive = false) => {
+  if (colorScheme === 'traditional') {
+    return getDeletedTraditionalInlineStyle(isActive);
+  }
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return (isActive ? deletedContentStyleActive : deletedContentStyleNew) + deletedInlineContentStyleExtended;
+  }
+  return isActive ? deletedContentStyleActive : 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.
+ */
+export const injectInnerWrapper = ({
+  node,
+  colorScheme,
+  isActive,
+  isInserted
+}) => {
+  const wrapper = document.createElement('span');
+  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
+  [...node.childNodes].forEach(child => {
+    const removedChild = node.removeChild(child);
+    wrapper.append(removedChild);
+  });
+  node.appendChild(wrapper);
+  return node;
+};
+
+/**
+ * Creates a styled span wrapper for inline content within a change decoration.
+ */
+export const createContentWrapper = (colorScheme, isActive = false, isInserted = false) => {
+  const wrapper = document.createElement('span');
+  const baseStyle = convertToInlineCss({
+    position: 'relative',
+    width: 'fit-content'
+  });
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isInserted) {
+      wrapper.setAttribute('style', `${baseStyle}${getInsertedContentStyle(colorScheme, isActive)}`);
+    } else {
+      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
+      const strikethrough = document.createElement('span');
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
+      wrapper.append(strikethrough);
+    }
+  } else {
+    wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
+    const strikethrough = document.createElement('span');
+    strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
+    wrapper.append(strikethrough);
+  }
+  return wrapper;
 };

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

@@ -16,12 +16,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';
@@ -165,12 +166,16 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
   if (showIndicators && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     decorations.push(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 = 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 = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.deleted.length > 0 : false;
       decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration(_objectSpread({
         change: change,
         doc: tr.doc,
@@ -195,7 +200,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       }))));
     }
     if (change.deleted.length > 0) {
-      var _shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
+      var _shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && (hideDeletedDiffs || showGranularWithBlock) && change.inserted.length > 0 : false;
       if (!_shouldHideDeleted) {
         decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget(_objectSpread(_objectSpread({
           change: change,
@@ -213,7 +218,89 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         }))));
       }
     }
-  });
+  };
+  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 (_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 = 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);
+    });
+  }
   getMarkChangeRanges(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
@@ -253,34 +340,34 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
 };
 export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref4, _ref5) {
-  var _ref9;
-  var _ref6 = _slicedToArray(_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 = _slicedToArray(_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 = _slicedToArray(_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 (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    var _ref8;
-    return (_ref8 = 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 && showIndicators === lastShowIndicators) !== null && _ref8 !== void 0 ? _ref8 : 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 && showIndicators === lastShowIndicators) !== null && _ref9 !== void 0 ? _ref9 : false;
   }
-  return (_ref9 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref9 !== void 0 ? _ref9 : 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;
 });