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

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

@@ -0,0 +1,117 @@
+/**
+ * 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 (let i = 0; i < fragment.childCount; i++) {
+    const 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 {
+    const slice = doc.slice(from, to);
+    return fragmentContainsInlineContent(slice.content);
+  } catch {
+    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 const getScrollableDecorations = (set, doc) => {
+  if (!set) {
+    return [];
+  }
+  const seenBlockKeys = new Set();
+  const allDecorations = set.find(undefined, undefined, 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
+  const filtered = allDecorations.filter(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;
+    }
+    const key = `${dec.from}-${dec.to}-${(_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
+  const blocks = filtered.filter(d => {
+    var _d$spec;
+    return ((_d$spec = d.spec) === null || _d$spec === void 0 ? void 0 : _d$spec.key) === 'diff-block';
+  });
+  const rawInlines = filtered.filter(d => {
+    var _d$spec2;
+    return ((_d$spec2 = d.spec) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.key) === 'diff-inline';
+  });
+  const inlines = doc !== undefined ? rawInlines.filter(d => isInlineDiffDecorationRenderableInDoc(doc, d.from, d.to)) : rawInlines;
+  const widgets = filtered.filter(d => {
+    var _d$spec3, _d$spec3$key;
+    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 ? void 0 : (_d$spec3$key = _d$spec3.key) === null || _d$spec3$key === void 0 ? void 0 : _d$spec3$key.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)
+  const nonOverlappingBlocks = blocks.filter(block => {
+    // Exclude block if:
+    // 1. It's fully contained within any inline, OR
+    // 2. It fully contains any inline
+    return !inlines.some(inline => 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
+  const result = [...nonOverlappingBlocks, ...inlines, ...widgets];
+
+  // Sort by from position, then by to position
+  result.sort((a, b) => a.from === b.from ? a.to - b.to : a.from - b.from);
+  return result;
+};

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

@@ -7,29 +7,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 const showDiffPluginKey = new PluginKey('showDiffPlugin');
-export const getScrollableDecorations = set => {
-  var _set$find;
-  const seenBlockKeys = new Set();
-  return ((_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, 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(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;
-      const key = `${dec.from}-${dec.to}-${(_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((a, b) => a.from === b.from ? a.to - b.to : a.from - b.from);
-};
 export const createPlugin = (config, getIntl, api) => {
   if (fg('platform_editor_show_diff_equality_fallback')) {
     enforceCustomStepRegisters();
@@ -103,7 +84,7 @@ export const 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
-            const decorations = getScrollableDecorations(currentPluginState.decorations);
+            const 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).
@@ -161,6 +142,7 @@ export const createPlugin = (config, getIntl, api) => {
       setNodeViewSerializer(editorView);
       let isFirst = true;
       let previousActiveIndex;
+      let cancelPendingScrollToDecoration = null;
       return {
         update(view) {
           // If we're using configuration to show diffs we initialise here once we setup the editor view
@@ -179,9 +161,16 @@ export const createPlugin = (config, getIntl, api) => {
             const 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 ? void 0 : _cancelPendingScrollT();
+              cancelPendingScrollToDecoration = scrollToActiveDecoration(view, getScrollableDecorations(pluginState.decorations, view.state.doc), pluginState.activeIndex);
             }
           }
+        },
+        destroy() {
+          var _cancelPendingScrollT2;
+          (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 ? void 0 : _cancelPendingScrollT2();
+          cancelPendingScrollToDecoration = null;
         }
       };
     },

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

@@ -1,26 +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.
+ */
+const 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) {
-  const {
-    node
-  } = view.domAtPos(position);
-  if (node instanceof Element) {
-    node.scrollIntoView({
+function scrollToSelection(node) {
+  const 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.
+  const previousScrollMarginTop = element.style.scrollMarginTop;
+  element.style.scrollMarginTop = `${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 const scrollToActiveDecoration = (view, decorations, activeIndex) => {
   const decoration = decorations[activeIndex];
   if (!decoration) {
-    return;
+    return () => {};
   }
-  scrollToSelection(view, decoration === null || decoration === void 0 ? void 0 : decoration.from);
+  let rafId = requestAnimationFrame(() => {
+    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
+      const widgetDom = decoration === null || decoration === void 0 ? void 0 : (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
+      scrollToSelection(widgetDom);
+    } else {
+      var _view$domAtPos;
+      const targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      const 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 () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
 };

package/dist/es2019/showDiffPlugin.js

@@ -1,5 +1,6 @@
 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 const showDiffPlugin = ({
   api,
   config
@@ -54,7 +55,7 @@ export const showDiffPlugin = ({
       };
     }
     const pluginState = showDiffPluginKey.getState(editorState);
-    const decorationCount = fg('platform_editor_show_diff_scroll_navigation') ? getScrollableDecorations(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations) : (pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
+    const 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 ? 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/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js

@@ -167,7 +167,6 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       }))));
     }
     if (change.deleted.length > 0) {
-      var _isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.fromB === activeIndexPos.to;
       var decoration = createNodeChangedDecorationWidget(_objectSpread({
         change: change,
         doc: originalDoc,
@@ -175,7 +174,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         colorScheme: colorScheme,
         newDoc: tr.doc,
         intl: intl,
-        isActive: _isActive
+        activeIndexPos: activeIndexPos
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: !isInserted
       }));

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

@@ -59,14 +59,32 @@ export var deletedStyleQuoteNodeWithLozenge = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+
+/** Stronger outline when this deleted block decoration is the active scroll target */
+export var deletedStyleQuoteNodeWithLozengeActive = convertToInlineCss({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export var deletedBlockOutline = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+export var deletedBlockOutlineActive = convertToInlineCss({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export var deletedBlockOutlineRounded = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
+export var deletedBlockOutlineRoundedActive = convertToInlineCss({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
 export var deletedRowStyle = convertToInlineCss({
   color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',

package/dist/esm/pm-plugins/decorations/colorSchemes/traditional.js

@@ -44,7 +44,7 @@ export var deletedTraditionalContentStyleUnboundedActive = convertToInlineCss({
   top: '50%',
   width: '100%',
   display: 'inline-block',
-  borderTop: "1px solid ".concat("var(--ds-text-accent-red-bolder, #5D1F1A)"),
+  borderTop: "2px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
   pointerEvents: 'none',
   zIndex: 1
 });
@@ -56,14 +56,30 @@ export var deletedTraditionalStyleQuoteNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+export var deletedTraditionalStyleQuoteNodeActive = convertToInlineCss({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export var deletedTraditionalBlockOutline = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+export var deletedTraditionalBlockOutlineActive = convertToInlineCss({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export var deletedTraditionalBlockOutlineRounded = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
+export var deletedTraditionalBlockOutlineRoundedActive = convertToInlineCss({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
 export var deletedTraditionalRowStyle = convertToInlineCss({
   textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
   textDecoration: 'line-through',

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

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleActive, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
@@ -79,13 +80,13 @@ var createContentWrapper = function createContentWrapper(colorScheme) {
     } else {
       wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
       var strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+      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));
+    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
     wrapper.append(_strikethrough);
   }
   return wrapper;
@@ -96,18 +97,23 @@ var createContentWrapper = function createContentWrapper(colorScheme) {
  * that is not in the current document.
  */
 export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
+  var _slice$content, _slice$content2, _slice$content3;
   var change = _ref2.change,
     doc = _ref2.doc,
     nodeViewSerializer = _ref2.nodeViewSerializer,
     colorScheme = _ref2.colorScheme,
     newDoc = _ref2.newDoc,
     intl = _ref2.intl,
-    _ref2$isActive = _ref2.isActive,
-    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
+    activeIndexPos = _ref2.activeIndexPos,
     _ref2$isInserted = _ref2.isInserted,
     isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted;
   var slice = doc.slice(change.fromA, change.toA);
-  if (slice.content.content.length === 0) {
+  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 && fg('platform_editor_show_diff_scroll_navigation');
+  // Widget decoration used for deletions as the content is not in the document
+  // and we want to display the deleted content with a style.
+  var safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
+  var isActive = activeIndexPos && safeInsertPos === activeIndexPos.from && safeInsertPos === activeIndexPos.to;
+  if (slice.content.content.length === 0 || shouldSkipDeletedEmptyParagraphDecoration) {
     return;
   }
   var isTableCellContent = slice.content.content.some(function () {
@@ -215,6 +221,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
           targetNode: node,
           colorScheme: colorScheme,
           intl: intl,
+          isActive: isActive,
           isInserted: isInserted
         });
       }
@@ -224,7 +231,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || fg('platform_editor_show_diff_scroll_navigation')) {
           if (fallbackNode instanceof HTMLElement) {
             var injectedNode = injectInnerWrapper({
               node: fallbackNode,
@@ -247,10 +254,6 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
-
-  // Widget decoration used for deletions as the content is not in the document
-  // and we want to display the deleted content with a style.
-  var safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
   var decorations = [];
   decorations.push(Decoration.widget(safeInsertPos, dom, {
     key: "diff-widget-".concat(isActive ? 'active' : 'inactive')