@atlaskit/editor-plugin-show-diff 4.1.3 → 5.0.0

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

@@ -13,9 +13,9 @@ import { findSafeInsertPos } from './findSafeInsertPos';
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export const createInlineChangedDecoration = (change, colourScheme, isActive = false) => {
+export const createInlineChangedDecoration = (change, colorScheme, isActive = false) => {
   let style;
-  if (colourScheme === 'traditional') {
+  if (colorScheme === 'traditional') {
     style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
   } else {
     style = isActive ? editingStyleActive : editingStyle;
@@ -23,11 +23,13 @@ export const createInlineChangedDecoration = (change, colourScheme, isActive = f
   return Decoration.inline(change.fromB, change.toB, {
     style,
     'data-testid': 'show-diff-changed-decoration'
-  }, {});
+  }, {
+    key: 'diff-inline'
+  });
 };
-export const getDeletedContentStyleUnbounded = colourScheme => colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
-export const getDeletedContentStyle = (colourScheme, isActive = false) => {
-  if (colourScheme === 'traditional') {
+export const getDeletedContentStyleUnbounded = colorScheme => colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+export const getDeletedContentStyle = (colorScheme, isActive = false) => {
+  if (colorScheme === 'traditional') {
     return deletedTraditionalContentStyle;
   }
   if (isActive) {
@@ -43,8 +45,8 @@ const getNodeClass = name => {
       return undefined;
   }
 };
-const getBlockNodeStyle = (name, colourScheme) => {
-  return colourScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
+const getBlockNodeStyle = (name, colorScheme) => {
+  return colorScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
 };
 
 /**
@@ -53,20 +55,39 @@ const getBlockNodeStyle = (name, colourScheme) => {
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export const createBlockChangedDecoration = (change, colourScheme) => Decoration.node(change.from, change.to, {
-  style: getBlockNodeStyle(change.name, colourScheme),
-  'data-testid': 'show-diff-changed-decoration-node',
-  class: getNodeClass(change.name)
-}, {});
-const createContentWrapper = (colourScheme, isActive = false) => {
+export const createBlockChangedDecoration = (change, colorScheme) => {
+  if (fg('platform_editor_show_diff_scroll_navigation')) {
+    const style = getBlockNodeStyle(change.name, colorScheme);
+    const className = getNodeClass(change.name);
+    if (style || className) {
+      return Decoration.node(change.from, change.to, {
+        style: style,
+        'data-testid': 'show-diff-changed-decoration-node',
+        class: className
+      }, {
+        key: 'diff-block'
+      });
+    }
+    return undefined;
+  } else {
+    return Decoration.node(change.from, change.to, {
+      style: getBlockNodeStyle(change.name, colorScheme),
+      'data-testid': 'show-diff-changed-decoration-node',
+      class: getNodeClass(change.name)
+    }, {
+      key: 'diff-block'
+    });
+  }
+};
+const createContentWrapper = (colorScheme, isActive = false) => {
   const wrapper = document.createElement('span');
   const baseStyle = convertToInlineCss({
     position: 'relative',
     width: 'fit-content'
   });
-  wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colourScheme, isActive)}`);
+  wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
   const strikethrough = document.createElement('span');
-  strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
+  strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
   wrapper.append(strikethrough);
   return wrapper;
 };
@@ -74,7 +95,7 @@ export const createDeletedContentDecoration = ({
   change,
   doc,
   nodeViewSerializer,
-  colourScheme,
+  colorScheme,
   newDoc,
   intl,
   isActive = false
@@ -94,7 +115,7 @@ export const createDeletedContentDecoration = ({
     }
     const {
       decorations
-    } = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colourScheme);
+    } = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colorScheme);
     return decorations;
   }
   const serializer = nodeViewSerializer;
@@ -116,14 +137,14 @@ export const createDeletedContentDecoration = ({
           if (childNodeView) {
             const lineBreak = document.createElement('br');
             dom.append(lineBreak);
-            const wrapper = createContentWrapper(colourScheme, isActive);
+            const wrapper = createContentWrapper(colorScheme, isActive);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             const serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              const wrapper = createContentWrapper(colourScheme, isActive);
+              const wrapper = createContentWrapper(colorScheme, isActive);
               wrapper.append(serializedChild);
               dom.append(wrapper);
             }
@@ -164,12 +185,12 @@ export const createDeletedContentDecoration = ({
     const nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        const wrapper = createContentWrapper(colourScheme, isActive);
+        const wrapper = createContentWrapper(colorScheme, isActive);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
         // Handle all block nodes with unified function
-        handleBlockNodeView(dom, nodeView, node, colourScheme, intl);
+        handleBlockNodeView(dom, nodeView, node, colorScheme, intl);
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
       // Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
@@ -177,7 +198,7 @@ export const createDeletedContentDecoration = ({
     } else {
       const fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        const wrapper = createDeletedStyleWrapperWithoutOpacity(colourScheme, isActive);
+        const wrapper = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
         wrapper.append(fallbackNode);
         dom.append(wrapper);
       }
@@ -188,5 +209,7 @@ export const createDeletedContentDecoration = ({
   // Widget decoration used for deletions as the content is not in the document
   // and we want to display the deleted content with a style.
   const safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
-  return [Decoration.widget(safeInsertPos, dom)];
+  return [Decoration.widget(safeInsertPos, dom, {
+    key: 'diff-widget'
+  })];
 };

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

@@ -53,8 +53,8 @@ const lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-export const getDeletedStyleNode = (nodeName, colourScheme) => {
-  const isTraditional = colourScheme === 'traditional';
+export const getDeletedStyleNode = (nodeName, colorScheme) => {
+  const isTraditional = colorScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
       return fg('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
@@ -154,29 +154,29 @@ export const createBlockNodeWrapper = () => {
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-export const createDeletedStyleWrapperWithoutOpacity = (colourScheme, isActive) => {
+export const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
   const wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme, isActive));
+  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
   return wrapper;
 };
 
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */
-export const applyDeletedStylesToElement = (element, targetNode, colourScheme) => {
+export const applyDeletedStylesToElement = (element, targetNode, colorScheme) => {
   const currentStyle = element.getAttribute('style') || '';
-  const deletedContentStyle = getDeletedContentStyle(colourScheme);
-  const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
+  const deletedContentStyle = getDeletedContentStyle(colorScheme);
+  const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
   element.setAttribute('style', `${currentStyle}${deletedContentStyle}${nodeSpecificStyle}`);
 };
 
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-export const createBlockNodeContentWrapper = (nodeView, targetNode, colourScheme) => {
+export const createBlockNodeContentWrapper = (nodeView, targetNode, colorScheme) => {
   const contentWrapper = document.createElement('div');
-  const nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
-  contentWrapper.setAttribute('style', `${getDeletedContentStyle(colourScheme)}${nodeStyle || ''}`);
+  const nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
+  contentWrapper.setAttribute('style', `${getDeletedContentStyle(colorScheme)}${nodeStyle || ''}`);
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -187,7 +187,7 @@ export const createBlockNodeContentWrapper = (nodeView, targetNode, colourScheme
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, colourScheme) => {
+export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, colorScheme) => {
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -208,7 +208,7 @@ export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, c
     });
   }
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    const showDiffDeletedNodeClass = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    const showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
@@ -219,7 +219,7 @@ export const handleEmbedCardWithLozenge = (dom, nodeView, targetNode, lozenge, c
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge, colourScheme) => {
+export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge, colorScheme) => {
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -238,7 +238,7 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge,
 
   // Add deleted node class if needed
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    const showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    const showDiffDeletedNodeClass = colorScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
@@ -248,22 +248,22 @@ export const handleMediaSingleWithLozenge = (dom, nodeView, targetNode, lozenge,
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colourScheme, intl) => {
+export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colorScheme, intl) => {
   const blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
     const lozenge = createRemovedLozenge(intl);
-    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
+    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
       return;
     }
-    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme)) {
+    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme)) {
       return;
     }
     blockWrapper.append(lozenge);
   }
-  const contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
+  const contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colorScheme);
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    const showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    const showDiffDeletedNodeClass = colorScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(blockWrapper);
@@ -274,13 +274,13 @@ export const appendBlockNodeWithWrapper = (dom, nodeView, targetNode, colourSche
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export const handleBlockNodeView = (dom, nodeView, targetNode, colourScheme, intl) => {
+export const handleBlockNodeView = (dom, nodeView, targetNode, colorScheme, intl) => {
   if (shouldApplyDeletedStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
     // Apply deleted styles directly to preserve natural block-level margins
-    applyDeletedStylesToElement(nodeView, targetNode, colourScheme);
+    applyDeletedStylesToElement(nodeView, targetNode, colorScheme);
     dom.append(nodeView);
   } else {
     // Use wrapper approach for other block nodes
-    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl);
+    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl);
   }
 };

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

@@ -50,7 +50,7 @@ const extractDeletedRows = (change, originalDoc, newDoc) => {
   const changeEndInTable = change.toA - tableOld.pos - 1;
   let currentOffset = 0;
   let rowIndex = 0;
-  tableOld.node.content.forEach((rowNode, index) => {
+  tableOld.node.content.forEach(rowNode => {
     const rowStart = currentOffset;
     const rowEnd = currentOffset + rowNode.nodeSize;
 
@@ -107,9 +107,9 @@ const isEmptyRow = rowNode => {
 /**
  * Creates a DOM representation of a deleted table row
  */
-const createDeletedRowDOM = (rowNode, nodeViewSerializer, colourScheme) => {
+const createDeletedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
   const tr = document.createElement('tr');
-  tr.setAttribute('style', colourScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
+  tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
 
   // Serialize each cell in the row
@@ -153,10 +153,10 @@ export const createDeletedRowsDecorations = ({
   originalDoc,
   newDoc,
   nodeViewSerializer,
-  colourScheme
+  colorScheme
 }) => {
   return deletedRows.map(deletedRow => {
-    const rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colourScheme);
+    const rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colorScheme);
 
     // Find safe insertion position for the deleted row
     const safeInsertPos = findSafeInsertPos(newDoc, deletedRow.fromB - 1,
@@ -169,7 +169,7 @@ export const createDeletedRowsDecorations = ({
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializer, colourScheme) => {
+export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializer, colorScheme) => {
   // First, expand the changes to include complete deleted rows
   const deletedRows = expandDiffForDeletedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
   const allDecorations = createDeletedRowsDecorations({
@@ -177,7 +177,7 @@ export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializ
     originalDoc,
     newDoc,
     nodeViewSerializer,
-    colourScheme
+    colorScheme
   });
   return {
     decorations: allDecorations

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

@@ -7,6 +7,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
+export const getScrollableDecorations = set => {
+  var _set$find;
+  return (_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, spec => spec.key === 'diff-inline' || spec.key === 'diff-widget' || spec.key === 'diff-block')) !== null && _set$find !== void 0 ? _set$find : [];
+};
 export const createPlugin = (config, getIntl) => {
   const nodeViewSerializer = new NodeViewSerializer({});
   const setNodeViewSerializer = editorView => {
@@ -33,7 +37,7 @@ export const createPlugin = (config, getIntl) => {
       if (!pluginState || pluginState.decorations.find().length === 0) {
         return;
       }
-      const decorations = pluginState.decorations.find();
+      const decorations = getScrollableDecorations(pluginState.decorations);
       const decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
       if (!decoration) {
         return;
@@ -79,7 +83,7 @@ export const createPlugin = (config, getIntl) => {
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer,
-              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+              colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
               intl: getIntl(),
               activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined
             });
@@ -95,7 +99,7 @@ export const createPlugin = (config, getIntl) => {
             };
           } 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 = currentPluginState.decorations.find();
+            const decorations = getScrollableDecorations(currentPluginState.decorations);
             if (decorations.length > 0) {
               var _currentPluginState$a;
               let nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : 0;
@@ -118,7 +122,7 @@ export const createPlugin = (config, getIntl) => {
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer,
-                colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+                colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos
               });

package/dist/es2019/showDiffPlugin.js

@@ -1,4 +1,5 @@
-import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { createPlugin, showDiffPluginKey, getScrollableDecorations } from './pm-plugins/main';
 export const showDiffPlugin = ({
   api: _api,
   config
@@ -53,7 +54,7 @@ export const showDiffPlugin = ({
       };
     }
     const pluginState = showDiffPluginKey.getState(editorState);
-    const decorationCount = (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) : (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/calculateDiffDecorations.js

@@ -16,16 +16,19 @@ import { getAttrChangeRanges, stepIsValidAttrChange } from './attributeDecoratio
 import { createInlineChangedDecoration, createDeletedContentDecoration, createBlockChangedDecoration } from './decorations';
 import { getMarkChangeRanges } from './markDecorations';
 import { simplifySteps } from './simplifyChanges';
-var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(doc, from, to, colourScheme) {
+var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(doc, from, to, colorScheme) {
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
     if (node.isBlock) {
-      decorations.push(createBlockChangedDecoration({
+      var decoration = createBlockChangedDecoration({
         from: pos,
         to: pos + node.nodeSize,
         name: node.type.name
-      }, colourScheme));
+      }, colorScheme);
+      if (decoration) {
+        decorations.push(decoration);
+      }
     }
   });
   return decorations;
@@ -67,7 +70,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   var state = _ref.state,
     pluginState = _ref.pluginState,
     nodeViewSerializer = _ref.nodeViewSerializer,
-    colourScheme = _ref.colourScheme,
+    colorScheme = _ref.colorScheme,
     intl = _ref.intl,
     activeIndexPos = _ref.activeIndexPos;
   var originalDoc = pluginState.originalDoc,
@@ -112,8 +115,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   optimizedChanges.forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change, colourScheme, isActive));
-      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme)));
+      decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
+      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
     }
     if (change.deleted.length > 0) {
       var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
@@ -121,7 +124,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
-        colourScheme: colourScheme,
+        colorScheme: colorScheme,
         newDoc: tr.doc,
         intl: intl,
         isActive: _isActive
@@ -133,10 +136,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   });
   getMarkChangeRanges(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-    decorations.push(createInlineChangedDecoration(change, colourScheme, isActive));
+    decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
-    decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme)));
+    decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
 };
@@ -148,16 +151,16 @@ function (_ref2, _ref3) {
     _ref4$ = _ref4[0],
     pluginState = _ref4$.pluginState,
     state = _ref4$.state,
-    colourScheme = _ref4$.colourScheme,
+    colorScheme = _ref4$.colorScheme,
     intl = _ref4$.intl,
     activeIndexPos = _ref4$.activeIndexPos;
   var _ref5 = _slicedToArray(_ref3, 1),
     _ref5$ = _ref5[0],
     lastPluginState = _ref5$.pluginState,
     lastState = _ref5$.state,
-    lastColourScheme = _ref5$.colourScheme,
+    lastColorScheme = _ref5$.colorScheme,
     lastIntl = _ref5$.intl,
     lastActiveIndexPos = _ref5$.activeIndexPos;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref6 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
+  return (_ref6 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
 });

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

@@ -13,10 +13,10 @@ import { findSafeInsertPos } from './findSafeInsertPos';
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export var createInlineChangedDecoration = function createInlineChangedDecoration(change, colourScheme) {
+export var createInlineChangedDecoration = function createInlineChangedDecoration(change, colorScheme) {
   var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var style;
-  if (colourScheme === 'traditional') {
+  if (colorScheme === 'traditional') {
     style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
   } else {
     style = isActive ? editingStyleActive : editingStyle;
@@ -24,14 +24,16 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
   return Decoration.inline(change.fromB, change.toB, {
     style: style,
     'data-testid': 'show-diff-changed-decoration'
-  }, {});
+  }, {
+    key: 'diff-inline'
+  });
 };
-export var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
-  return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+export var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
+  return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 };
-export var getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
+export var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (colourScheme === 'traditional') {
+  if (colorScheme === 'traditional') {
     return deletedTraditionalContentStyle;
   }
   if (isActive) {
@@ -47,8 +49,8 @@ var getNodeClass = function getNodeClass(name) {
       return undefined;
   }
 };
-var getBlockNodeStyle = function getBlockNodeStyle(name, colourScheme) {
-  return colourScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
+var getBlockNodeStyle = function getBlockNodeStyle(name, colorScheme) {
+  return colorScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
 };
 
 /**
@@ -57,23 +59,40 @@ var getBlockNodeStyle = function getBlockNodeStyle(name, colourScheme) {
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export var createBlockChangedDecoration = function createBlockChangedDecoration(change, colourScheme) {
-  return Decoration.node(change.from, change.to, {
-    style: getBlockNodeStyle(change.name, colourScheme),
-    'data-testid': 'show-diff-changed-decoration-node',
-    class: getNodeClass(change.name)
-  }, {});
+export var createBlockChangedDecoration = function createBlockChangedDecoration(change, colorScheme) {
+  if (fg('platform_editor_show_diff_scroll_navigation')) {
+    var style = getBlockNodeStyle(change.name, colorScheme);
+    var className = getNodeClass(change.name);
+    if (style || className) {
+      return Decoration.node(change.from, change.to, {
+        style: style,
+        'data-testid': 'show-diff-changed-decoration-node',
+        class: className
+      }, {
+        key: 'diff-block'
+      });
+    }
+    return undefined;
+  } else {
+    return Decoration.node(change.from, change.to, {
+      style: getBlockNodeStyle(change.name, colorScheme),
+      'data-testid': 'show-diff-changed-decoration-node',
+      class: getNodeClass(change.name)
+    }, {
+      key: 'diff-block'
+    });
+  }
 };
-var createContentWrapper = function createContentWrapper(colourScheme) {
+var createContentWrapper = function createContentWrapper(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var wrapper = document.createElement('span');
   var baseStyle = convertToInlineCss({
     position: 'relative',
     width: 'fit-content'
   });
-  wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme, isActive)));
+  wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
   var strikethrough = document.createElement('span');
-  strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
+  strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
   wrapper.append(strikethrough);
   return wrapper;
 };
@@ -81,7 +100,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
   var change = _ref.change,
     doc = _ref.doc,
     nodeViewSerializer = _ref.nodeViewSerializer,
-    colourScheme = _ref.colourScheme,
+    colorScheme = _ref.colorScheme,
     newDoc = _ref.newDoc,
     intl = _ref.intl,
     _ref$isActive = _ref.isActive,
@@ -107,7 +126,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
     if (!fg('platform_editor_ai_aifc_patch_ga')) {
       return;
     }
-    var _handleDeletedRows = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colourScheme),
+    var _handleDeletedRows = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colorScheme),
       decorations = _handleDeletedRows.decorations;
     return decorations;
   }
@@ -130,14 +149,14 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             dom.append(lineBreak);
-            var wrapper = createContentWrapper(colourScheme, isActive);
+            var wrapper = createContentWrapper(colorScheme, isActive);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             var serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              var _wrapper = createContentWrapper(colourScheme, isActive);
+              var _wrapper = createContentWrapper(colorScheme, isActive);
               _wrapper.append(serializedChild);
               dom.append(_wrapper);
             }
@@ -182,12 +201,12 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
     var nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        var wrapper = createContentWrapper(colourScheme, isActive);
+        var wrapper = createContentWrapper(colorScheme, isActive);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
         // Handle all block nodes with unified function
-        handleBlockNodeView(dom, nodeView, node, colourScheme, intl);
+        handleBlockNodeView(dom, nodeView, node, colorScheme, intl);
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
       // Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table
@@ -195,7 +214,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colourScheme, isActive);
+        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
         _wrapper2.append(fallbackNode);
         dom.append(_wrapper2);
       }
@@ -206,5 +225,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
   // 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);
-  return [Decoration.widget(safeInsertPos, dom)];
+  return [Decoration.widget(safeInsertPos, dom, {
+    key: 'diff-widget'
+  })];
 };