@atlaskit/editor-plugin-show-diff 6.2.5 → 6.2.6

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

@@ -1,8 +1,8 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { deletedBlockOutline, deletedBlockOutlineRounded, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineRounded, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
+import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineRounded, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleActive, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 var lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -19,6 +19,38 @@ var lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
+var lozengeStyleActiveStandard = convertToInlineCss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  position: 'static',
+  blockSize: 'min-content',
+  borderRadius: "var(--ds-radius-small, 4px)",
+  overflow: 'hidden',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 653)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #292A2E)"
+});
+var lozengeStyleActiveTraditional = convertToInlineCss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  position: 'static',
+  blockSize: 'min-content',
+  borderRadius: "var(--ds-radius-small, 4px)",
+  overflow: 'hidden',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 653)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #292A2E)"
+});
 var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -29,7 +61,7 @@ var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
     return isActive ? editingStyleActive : editingStyle;
   }
   if (colorScheme === 'traditional') {
-    return deletedTraditionalContentStyle;
+    return isActive ? deletedTraditionalContentStyleActive : deletedTraditionalContentStyle;
   }
   if (isActive) {
     return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
@@ -38,6 +70,7 @@ var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
 };
 var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
   var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var isActive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var isTraditional = colorScheme === 'traditional';
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
     if (shouldApplyStylesDirectly(nodeName)) {
@@ -50,13 +83,22 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
   }
   switch (nodeName) {
     case 'blockquote':
-      return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge;
+      if (isTraditional) {
+        return isActive ? deletedTraditionalStyleQuoteNodeActive : deletedTraditionalStyleQuoteNode;
+      }
+      return isActive ? deletedStyleQuoteNodeWithLozengeActive : deletedStyleQuoteNodeWithLozenge;
     case 'expand':
     case 'decisionList':
-      return isTraditional ? deletedTraditionalBlockOutline : deletedBlockOutline;
+      if (isTraditional) {
+        return isActive ? deletedTraditionalBlockOutlineActive : deletedTraditionalBlockOutline;
+      }
+      return isActive ? deletedBlockOutlineActive : deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
-      return isTraditional ? deletedTraditionalBlockOutlineRounded : deletedBlockOutlineRounded;
+      if (isTraditional) {
+        return isActive ? deletedTraditionalBlockOutlineRoundedActive : deletedTraditionalBlockOutlineRounded;
+      }
+      return isActive ? deletedBlockOutlineRoundedActive : deletedBlockOutlineRounded;
     default:
       return undefined;
   }
@@ -109,6 +151,8 @@ var applyCellOverlayStyles = function applyCellOverlayStyles(_ref) {
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
  */
 var createRemovedLozenge = function createRemovedLozenge(intl) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var colorScheme = arguments.length > 2 ? arguments[2] : undefined;
   var container = document.createElement('span');
   var containerStyle = convertToInlineCss({
     position: 'absolute',
@@ -123,7 +167,8 @@ var createRemovedLozenge = function createRemovedLozenge(intl) {
 
   // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
   var lozengeElement = document.createElement('span');
-  lozengeElement.setAttribute('style', lozengeStyle);
+  var lozengeInnerStyle = isActive && colorScheme === 'traditional' ? lozengeStyleActiveTraditional : isActive ? lozengeStyleActiveStandard : lozengeStyle;
+  lozengeElement.setAttribute('style', lozengeInnerStyle);
   lozengeElement.textContent = intl.formatMessage(trackChangesMessages.removed).toUpperCase();
   container.appendChild(lozengeElement);
   return container;
@@ -150,10 +195,11 @@ var applyStylesToElement = function applyStylesToElement(_ref2) {
   var element = _ref2.element,
     targetNode = _ref2.targetNode,
     colorScheme = _ref2.colorScheme,
+    isActive = _ref2.isActive,
     isInserted = _ref2.isInserted;
   var currentStyle = element.getAttribute('style') || '';
-  var contentStyle = getChangedContentStyle(colorScheme, false, isInserted);
-  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted) || '';
+  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
 
@@ -164,10 +210,11 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref3
   var nodeView = _ref3.nodeView,
     targetNode = _ref3.targetNode,
     colorScheme = _ref3.colorScheme,
+    isActive = _ref3.isActive,
     isInserted = _ref3.isInserted;
   var contentWrapper = document.createElement('div');
-  var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted);
-  contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, false, isInserted)).concat(nodeStyle || ''));
+  var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive);
+  contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, isActive, isInserted)).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -183,7 +230,9 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
     nodeView = _ref4.nodeView,
     targetNode = _ref4.targetNode,
     lozenge = _ref4.lozenge,
-    colorScheme = _ref4.colorScheme;
+    colorScheme = _ref4.colorScheme,
+    _ref4$isActive = _ref4.isActive,
+    isActive = _ref4$isActive === void 0 ? false : _ref4$isActive;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -206,6 +255,9 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(nodeView);
   return true;
@@ -220,7 +272,9 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5)
     nodeView = _ref5.nodeView,
     targetNode = _ref5.targetNode,
     lozenge = _ref5.lozenge,
-    colorScheme = _ref5.colorScheme;
+    colorScheme = _ref5.colorScheme,
+    _ref5$isActive = _ref5.isActive,
+    isActive = _ref5$isActive === void 0 ? false : _ref5$isActive;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -241,6 +295,9 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5)
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(nodeView);
   return true;
@@ -255,17 +312,20 @@ var wrapBlockNode = function wrapBlockNode(_ref6) {
     targetNode = _ref6.targetNode,
     colorScheme = _ref6.colorScheme,
     intl = _ref6.intl,
+    _ref6$isActive = _ref6.isActive,
+    isActive = _ref6$isActive === void 0 ? false : _ref6$isActive,
     _ref6$isInserted = _ref6.isInserted,
     isInserted = _ref6$isInserted === void 0 ? false : _ref6$isInserted;
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name) && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
-    var lozenge = createRemovedLozenge(intl);
+    var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
     if (handleEmbedCardWithLozenge({
       dom: dom,
       nodeView: nodeView,
       targetNode: targetNode,
       lozenge: lozenge,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isActive: isActive
     })) {
       return;
     }
@@ -274,7 +334,8 @@ var wrapBlockNode = function wrapBlockNode(_ref6) {
       nodeView: nodeView,
       targetNode: targetNode,
       lozenge: lozenge,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isActive: isActive
     })) {
       return;
     }
@@ -284,12 +345,16 @@ var wrapBlockNode = function wrapBlockNode(_ref6) {
     nodeView: nodeView,
     targetNode: targetNode,
     colorScheme: colorScheme,
+    isActive: isActive,
     isInserted: isInserted
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
     var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
+    if (isActive) {
+      nodeView.classList.add('show-diff-deleted-active');
+    }
   }
   dom.append(blockWrapper);
 };
@@ -305,6 +370,8 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref7) {
     targetNode = _ref7.targetNode,
     colorScheme = _ref7.colorScheme,
     intl = _ref7.intl,
+    _ref7$isActive = _ref7.isActive,
+    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive,
     _ref7$isInserted = _ref7.isInserted,
     isInserted = _ref7$isInserted === void 0 ? false : _ref7$isInserted;
   if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
@@ -313,6 +380,7 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref7) {
       element: nodeView,
       targetNode: targetNode,
       colorScheme: colorScheme,
+      isActive: isActive,
       isInserted: isInserted
     });
     dom.append(nodeView);
@@ -331,6 +399,7 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref7) {
       targetNode: targetNode,
       colorScheme: colorScheme,
       intl: intl,
+      isActive: isActive,
       isInserted: isInserted
     });
   }

package/dist/esm/pm-plugins/getScrollableDecorations.js

@@ -0,0 +1,124 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
+ * Block-only subtrees (e.g. empty paragraphs, block cards with no inline children) return false.
+ */
+function fragmentContainsInlineContent(fragment) {
+  for (var i = 0; i < fragment.childCount; i++) {
+    var node = fragment.child(i);
+    if (node.isInline) {
+      return true;
+    }
+    if (node.content.size > 0 && fragmentContainsInlineContent(node.content)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Returns true when an inline decoration's [from, to) range can actually show in the document:
+ * positions are valid, and the slice contains at least one inline node ProseMirror would paint
+ * (not only empty block wrappers or block-only structure).
+ */
+export function isInlineDiffDecorationRenderableInDoc(doc, from, to) {
+  try {
+    var slice = doc.slice(from, to);
+    return fragmentContainsInlineContent(slice.content);
+  } catch (_unused) {
+    return false;
+  }
+}
+
+/**
+ * Checks if range1 is fully contained within range2
+ */
+function isRangeFullyInside(range1Start, range1End, range2Start, range2End) {
+  return range2Start <= range1Start && range1End <= range2End;
+}
+
+/**
+ * Gets scrollable decorations from a DecorationSet, filtering out overlapping decorations
+ * and applying various rules for diff visualization.
+ *
+ * Rules:
+ * 1. Only includes diff-inline, diff-widget-* and diff-block decorations
+ * 2. Excludes listItem diff-block decorations (never scrollable)
+ * 3. Deduplicates diff-block decorations with same from, to and nodeName
+ * 4. When `doc` is passed: excludes diff-inline decorations whose range has no inline content
+ *    (invalid positions, or block-only slices with no text/atoms — e.g. empty blocks)
+ * 5. Excludes diff-inline decorations that are fully contained within a diff-block
+ * 6. Excludes diff-block decorations that are fully contained within a diff-inline
+ * 7. Results are sorted by from position, then by to position
+ *
+ * @param set - The DecorationSet to extract scrollable decorations from
+ * @param doc - Current document; when set, diff-inline ranges are validated against this doc
+ * @returns Array of scrollable decorations, sorted and deduplicated
+ */
+export var getScrollableDecorations = function getScrollableDecorations(set, doc) {
+  if (!set) {
+    return [];
+  }
+  var seenBlockKeys = new Set();
+  var allDecorations = set.find(undefined, undefined, function (spec) {
+    var _spec$key;
+    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
+  });
+
+  // First pass: filter out listItem blocks and deduplicates blocks
+  var filtered = allDecorations.filter(function (dec) {
+    var _dec$spec, _dec$spec$nodeName, _dec$spec3;
+    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
+      var _dec$spec2;
+      // Skip listItem blocks as they are not scrollable
+      if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
+    }
+    var key = "".concat(dec.from, "-").concat(dec.to, "-").concat((_dec$spec$nodeName = (_dec$spec3 = dec.spec) === null || _dec$spec3 === void 0 ? void 0 : _dec$spec3.nodeName) !== null && _dec$spec$nodeName !== void 0 ? _dec$spec$nodeName : '');
+    // Skip blocks that have already been seen
+    if (seenBlockKeys.has(key)) return false;
+    seenBlockKeys.add(key);
+    return true;
+  });
+
+  // Separate decorations by type for easier processing
+  var blocks = filtered.filter(function (d) {
+    var _d$spec;
+    return ((_d$spec = d.spec) === null || _d$spec === void 0 ? void 0 : _d$spec.key) === 'diff-block';
+  });
+  var rawInlines = filtered.filter(function (d) {
+    var _d$spec2;
+    return ((_d$spec2 = d.spec) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.key) === 'diff-inline';
+  });
+  var inlines = doc !== undefined ? rawInlines.filter(function (d) {
+    return isInlineDiffDecorationRenderableInDoc(doc, d.from, d.to);
+  }) : rawInlines;
+  var widgets = filtered.filter(function (d) {
+    var _d$spec3;
+    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 || (_d$spec3 = _d$spec3.key) === null || _d$spec3 === void 0 ? void 0 : _d$spec3.startsWith('diff-widget');
+  });
+
+  // Second pass: exclude overlapping decorations
+  // Rules:
+  // - If an inline is fully inside a block, exclude the block (inline takes priority)
+  // - If a block is fully inside an inline, exclude the block (inline takes priority)
+  var nonOverlappingBlocks = blocks.filter(function (block) {
+    // Exclude block if:
+    // 1. It's fully contained within any inline, OR
+    // 2. It fully contains any inline
+    return !inlines.some(function (inline) {
+      return isRangeFullyInside(block.from, block.to, inline.from, inline.to) ||
+      // block inside inline
+      isRangeFullyInside(inline.from, inline.to, block.from, block.to);
+    } // inline inside block
+    );
+  });
+
+  // Combine all non-overlapping decorations
+  var result = [].concat(_toConsumableArray(nonOverlappingBlocks), _toConsumableArray(inlines), _toConsumableArray(widgets));
+
+  // Sort by from position, then by to position
+  result.sort(function (a, b) {
+    return a.from === b.from ? a.to - b.to : a.from - b.from;
+  });
+  return result;
+};

package/dist/esm/pm-plugins/main.js

@@ -10,31 +10,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calculateDiffDecorations } from './calculateDiff/calculateDiffDecorations';
 import { enforceCustomStepRegisters } from './enforceCustomStepRegisters';
+import { getScrollableDecorations } from './getScrollableDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
-export var getScrollableDecorations = function getScrollableDecorations(set) {
-  var _set$find;
-  var seenBlockKeys = new Set();
-  return ((_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
-    var _spec$key;
-    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
-  })) !== null && _set$find !== void 0 ? _set$find : []).filter(function (dec) {
-    var _dec$spec;
-    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
-      var _dec$spec2, _dec$spec$nodeName, _dec$spec3;
-      // Skip listItem blocks as they are not scrollable
-      if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
-      var key = "".concat(dec.from, "-").concat(dec.to, "-").concat((_dec$spec$nodeName = (_dec$spec3 = dec.spec) === null || _dec$spec3 === void 0 ? void 0 : _dec$spec3.nodeName) !== null && _dec$spec$nodeName !== void 0 ? _dec$spec$nodeName : '');
-      // Skip blocks that have already been seen
-      if (seenBlockKeys.has(key)) return false;
-      seenBlockKeys.add(key);
-    }
-    return true;
-  }).sort(function (a, b) {
-    return a.from === b.from ? a.to - b.to : a.from - b.from;
-  });
-};
 export var createPlugin = function createPlugin(config, getIntl, api) {
   if (fg('platform_editor_show_diff_equality_fallback')) {
     enforceCustomStepRegisters();
@@ -97,7 +76,7 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
             } : {});
           } else if (((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') && fg('platform_editor_show_diff_scroll_navigation')) {
             // Update the active index in plugin state and recalculate decorations
-            var _decorations = getScrollableDecorations(currentPluginState.decorations);
+            var _decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc);
             if (_decorations.length > 0) {
               var _currentPluginState$a;
               // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
@@ -149,6 +128,7 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
       setNodeViewSerializer(editorView);
       var isFirst = true;
       var previousActiveIndex;
+      var cancelPendingScrollToDecoration = null;
       return {
         update: function update(view) {
           // If we're using configuration to show diffs we initialise here once we setup the editor view
@@ -169,9 +149,16 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
             var activeIndexChanged = (pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && pluginState.activeIndex !== previousActiveIndex;
             previousActiveIndex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex;
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && activeIndexChanged) {
-              scrollToActiveDecoration(view, getScrollableDecorations(pluginState.decorations), pluginState.activeIndex);
+              var _cancelPendingScrollT;
+              (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
+              cancelPendingScrollToDecoration = scrollToActiveDecoration(view, getScrollableDecorations(pluginState.decorations, view.state.doc), pluginState.activeIndex);
             }
           }
+        },
+        destroy: function destroy() {
+          var _cancelPendingScrollT2;
+          (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 || _cancelPendingScrollT2();
+          cancelPendingScrollToDecoration = null;
         }
       };
     },

package/dist/esm/pm-plugins/scrollToActiveDecoration.js

@@ -1,25 +1,66 @@
+/**
+ * Extra space above the scrolled-to element so it does not sit flush under the
+ * viewport edge (helps with sticky table headers, toolbars, etc.).
+ *
+ * Implemented with `scroll-margin-top` so we still use the browser’s native
+ * `scrollIntoView`, which scrolls every relevant scrollport (nested containers
+ * and the window). A single manual `scrollTop` on one ancestor often misses
+ * outer scroll or mis-identifies the active scroll container.
+ */
+var SCROLL_TOP_MARGIN_PX = 100;
+
 /**
  * Scrolls to the current position/selection of the document. It does the same as scrollIntoView()
  * but without requiring the focus on the editor, thus it can be called at any time.
  */
-function scrollToSelection(view, position) {
-  var _view$domAtPos = view.domAtPos(position),
-    node = _view$domAtPos.node;
-  if (node instanceof Element) {
-    node.scrollIntoView({
+function scrollToSelection(node) {
+  var element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+
+  // scroll-margin is included in scroll-into-view math; it does not change layout.
+  var previousScrollMarginTop = element.style.scrollMarginTop;
+  element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
+  try {
+    element.scrollIntoView({
       behavior: 'smooth',
-      block: 'center'
+      block: 'start'
     });
+  } finally {
+    element.style.scrollMarginTop = previousScrollMarginTop;
   }
 }
 
 /**
- * Scrolls the editor view to the decoration at the given index.
+ * Schedules scrolling to the decoration at the given index after the next frame.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
  */
 export var scrollToActiveDecoration = function scrollToActiveDecoration(view, decorations, activeIndex) {
   var decoration = decorations[activeIndex];
   if (!decoration) {
-    return;
+    return function () {};
   }
-  scrollToSelection(view, decoration === null || decoration === void 0 ? void 0 : decoration.from);
+  var rafId = requestAnimationFrame(function () {
+    var _decoration$spec;
+    rafId = null;
+    if (((_decoration$spec = decoration.spec) === null || _decoration$spec === void 0 ? void 0 : _decoration$spec.key) === 'diff-widget-active') {
+      var _decoration$type;
+      // @ts-expect-error - decoration.type is not typed public API
+      var widgetDom = decoration === null || decoration === void 0 || (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
+      scrollToSelection(widgetDom);
+    } else {
+      var _view$domAtPos;
+      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      scrollToSelection(node);
+    }
+  });
+  return function () {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
 };

package/dist/esm/showDiffPlugin.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { fg } from '@atlaskit/platform-feature-flags';
-import { createPlugin, showDiffPluginKey, getScrollableDecorations } from './pm-plugins/main';
+import { getScrollableDecorations } from './pm-plugins/getScrollableDecorations';
+import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
 export var showDiffPlugin = function showDiffPlugin(_ref) {
   var api = _ref.api,
     config = _ref.config;
@@ -55,7 +56,7 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
         };
       }
       var pluginState = showDiffPluginKey.getState(editorState);
-      var decorationCount = fg('platform_editor_show_diff_scroll_navigation') ? getScrollableDecorations(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations) : (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
+      var decorationCount = fg('platform_editor_show_diff_scroll_navigation') ? getScrollableDecorations(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations, editorState.doc) : (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
       return {
         isDisplayingChanges: decorationCount.length > 0,
         activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,

package/dist/types/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -7,8 +7,12 @@ export declare const deletedContentStyleNewActive: string;
 export declare const deletedContentStyleUnbounded: string;
 export declare const deletedStyleQuoteNode: string;
 export declare const deletedStyleQuoteNodeWithLozenge: string;
+/** Stronger outline when this deleted block decoration is the active scroll target */
+export declare const deletedStyleQuoteNodeWithLozengeActive: string;
 export declare const deletedBlockOutline: string;
+export declare const deletedBlockOutlineActive: string;
 export declare const deletedBlockOutlineRounded: string;
+export declare const deletedBlockOutlineRoundedActive: string;
 export declare const deletedRowStyle: string;
 export declare const editingStyleQuoteNode: string;
 export declare const editingStyleRuleNode: string;

package/dist/types/pm-plugins/decorations/colorSchemes/traditional.d.ts

@@ -7,8 +7,11 @@ export declare const deletedTraditionalContentStyleUnbounded: string;
 /** Emphasised (pressed) strikethrough line for traditional when active */
 export declare const deletedTraditionalContentStyleUnboundedActive: string;
 export declare const deletedTraditionalStyleQuoteNode: string;
+export declare const deletedTraditionalStyleQuoteNodeActive: string;
 export declare const deletedTraditionalBlockOutline: string;
+export declare const deletedTraditionalBlockOutlineActive: string;
 export declare const deletedTraditionalBlockOutlineRounded: string;
+export declare const deletedTraditionalBlockOutlineRoundedActive: string;
 export declare const deletedTraditionalRowStyle: string;
 export declare const traditionalStyleQuoteNode: string;
 export declare const traditionalStyleQuoteNodeActive: string;

package/dist/types/pm-plugins/decorations/createNodeChangedDecorationWidget.d.ts

@@ -8,12 +8,15 @@ import type { NodeViewSerializer } from '../NodeViewSerializer';
  * This function is used to create a decoration widget to show content
  * that is not in the current document.
  */
-export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, isInserted, }: {
+export declare const createNodeChangedDecorationWidget: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, activeIndexPos, isInserted, }: {
+    activeIndexPos?: {
+        from: number;
+        to: number;
+    };
     change: Pick<Change, "fromA" | "toA" | "fromB" | "deleted" | "toB">;
     colorScheme?: ColorScheme;
     doc: PMNode;
     intl: IntlShape;
-    isActive?: boolean;
     isInserted?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;

package/dist/types/pm-plugins/decorations/utils/wrapBlockNodeView.d.ts

@@ -6,10 +6,11 @@ import type { ColorScheme } from '../../../showDiffPluginType';
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorScheme, intl, isInserted, }: {
+export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorScheme, intl, isActive, isInserted, }: {
     colorScheme?: ColorScheme;
     dom: HTMLElement;
     intl: IntlShape;
+    isActive?: boolean;
     isInserted: boolean;
     nodeView: Node;
     targetNode: PMNode;

package/dist/types/pm-plugins/getScrollableDecorations.d.ts

@@ -0,0 +1,27 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Returns true when an inline decoration's [from, to) range can actually show in the document:
+ * positions are valid, and the slice contains at least one inline node ProseMirror would paint
+ * (not only empty block wrappers or block-only structure).
+ */
+export declare function isInlineDiffDecorationRenderableInDoc(doc: PMNode, from: number, to: number): boolean;
+/**
+ * Gets scrollable decorations from a DecorationSet, filtering out overlapping decorations
+ * and applying various rules for diff visualization.
+ *
+ * Rules:
+ * 1. Only includes diff-inline, diff-widget-* and diff-block decorations
+ * 2. Excludes listItem diff-block decorations (never scrollable)
+ * 3. Deduplicates diff-block decorations with same from, to and nodeName
+ * 4. When `doc` is passed: excludes diff-inline decorations whose range has no inline content
+ *    (invalid positions, or block-only slices with no text/atoms — e.g. empty blocks)
+ * 5. Excludes diff-inline decorations that are fully contained within a diff-block
+ * 6. Excludes diff-block decorations that are fully contained within a diff-inline
+ * 7. Results are sorted by from position, then by to position
+ *
+ * @param set - The DecorationSet to extract scrollable decorations from
+ * @param doc - Current document; when set, diff-inline ranges are validated against this doc
+ * @returns Array of scrollable decorations, sorted and deduplicated
+ */
+export declare const getScrollableDecorations: (set: DecorationSet | undefined, doc?: PMNode) => Decoration[];

package/dist/types/pm-plugins/main.d.ts

@@ -4,7 +4,6 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
-import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { type DiffParams, type DiffType, type ShowDiffPlugin } from '../showDiffPluginType';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
@@ -21,5 +20,4 @@ export type ShowDiffPluginState = {
     originalDoc: PMNode | undefined;
     steps: ProseMirrorStep[];
 };
-export declare const getScrollableDecorations: (set: DecorationSet | undefined) => Decoration[];
 export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape, api: ExtractInjectionAPI<ShowDiffPlugin> | undefined) => SafePlugin<ShowDiffPluginState>;

package/dist/types/pm-plugins/scrollToActiveDecoration.d.ts

@@ -1,5 +1,7 @@
 import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
 /**
- * Scrolls the editor view to the decoration at the given index.
+ * Schedules scrolling to the decoration at the given index after the next frame.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
  */
-export declare const scrollToActiveDecoration: (view: EditorView, decorations: Decoration[], activeIndex: number) => void;
+export declare const scrollToActiveDecoration: (view: EditorView, decorations: Decoration[], activeIndex: number) => (() => void);