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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 5.0.0
+
+### Major Changes
+
+- [`b5af20d6e019c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b5af20d6e019c) -
+  EDITOR-5632: Change colourScheme param to colorScheme for standardisation.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.4
+
+### Patch Changes
+
+- [`4031146a0af6d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4031146a0af6d) -
+  Updating the PR to calculate the correct number of decorations for display.
+- Updated dependencies
+
 ## 4.1.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/calculateDiffDecorations.js

@@ -22,16 +22,19 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-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((0, _decorations.createBlockChangedDecoration)({
+      var decoration = (0, _decorations.createBlockChangedDecoration)({
         from: pos,
         to: pos + node.nodeSize,
         name: node.type.name
-      }, colourScheme));
+      }, colorScheme);
+      if (decoration) {
+        decorations.push(decoration);
+      }
     }
   });
   return decorations;
@@ -73,7 +76,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,
@@ -118,8 +121,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((0, _decorations.createInlineChangedDecoration)(change, colourScheme, isActive));
-      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme)));
+      decorations.push((0, _decorations.createInlineChangedDecoration)(change, colorScheme, isActive));
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
     }
     if (change.deleted.length > 0) {
       var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
@@ -127,7 +130,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
-        colourScheme: colourScheme,
+        colorScheme: colorScheme,
         newDoc: tr.doc,
         intl: intl,
         isActive: _isActive
@@ -139,10 +142,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   });
   (0, _markDecorations.getMarkChangeRanges)(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-    decorations.push((0, _decorations.createInlineChangedDecoration)(change, colourScheme, isActive));
+    decorations.push((0, _decorations.createInlineChangedDecoration)(change, colorScheme, isActive));
   });
   (0, _attributeDecorations.getAttrChangeRanges)(tr.doc, attrSteps).forEach(function (change) {
-    decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme)));
+    decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme)));
   });
   return _view.DecorationSet.empty.add(tr.doc, decorations);
 };
@@ -154,16 +157,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 = (0, _slicedToArray2.default)(_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 && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
+  return (_ref6 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
 });

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

@@ -19,10 +19,10 @@ var _findSafeInsertPos = require("./findSafeInsertPos");
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(change, colourScheme) {
+var createInlineChangedDecoration = exports.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 ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
   } else {
     style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
@@ -30,14 +30,16 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
   return _view.Decoration.inline(change.fromB, change.toB, {
     style: style,
     'data-testid': 'show-diff-changed-decoration'
-  }, {});
+  }, {
+    key: 'diff-inline'
+  });
 };
-var getDeletedContentStyleUnbounded = exports.getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
-  return colourScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
+var getDeletedContentStyleUnbounded = exports.getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
+  return colorScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
 };
-var getDeletedContentStyle = exports.getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
+var getDeletedContentStyle = exports.getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (colourScheme === 'traditional') {
+  if (colorScheme === 'traditional') {
     return _traditional.deletedTraditionalContentStyle;
   }
   if (isActive) {
@@ -53,8 +55,8 @@ var getNodeClass = function getNodeClass(name) {
       return undefined;
   }
 };
-var getBlockNodeStyle = function getBlockNodeStyle(name, colourScheme) {
-  return colourScheme === 'traditional' ? (0, _traditional.getTraditionalNodeStyle)(name) : (0, _standard.getStandardNodeStyle)(name);
+var getBlockNodeStyle = function getBlockNodeStyle(name, colorScheme) {
+  return colorScheme === 'traditional' ? (0, _traditional.getTraditionalNodeStyle)(name) : (0, _standard.getStandardNodeStyle)(name);
 };
 
 /**
@@ -63,23 +65,40 @@ var getBlockNodeStyle = function getBlockNodeStyle(name, colourScheme) {
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(change, colourScheme) {
-  return _view.Decoration.node(change.from, change.to, {
-    style: getBlockNodeStyle(change.name, colourScheme),
-    'data-testid': 'show-diff-changed-decoration-node',
-    class: getNodeClass(change.name)
-  }, {});
+var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(change, colorScheme) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
+    var style = getBlockNodeStyle(change.name, colorScheme);
+    var className = getNodeClass(change.name);
+    if (style || className) {
+      return _view.Decoration.node(change.from, change.to, {
+        style: style,
+        'data-testid': 'show-diff-changed-decoration-node',
+        class: className
+      }, {
+        key: 'diff-block'
+      });
+    }
+    return undefined;
+  } else {
+    return _view.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 = (0, _lazyNodeView.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;
 };
@@ -87,7 +106,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
   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,
@@ -113,7 +132,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     if (!(0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga')) {
       return;
     }
-    var _handleDeletedRows = (0, _deletedRowsHandler.handleDeletedRows)([change], doc, newDoc, nodeViewSerializer, colourScheme),
+    var _handleDeletedRows = (0, _deletedRowsHandler.handleDeletedRows)([change], doc, newDoc, nodeViewSerializer, colorScheme),
       decorations = _handleDeletedRows.decorations;
     return decorations;
   }
@@ -136,14 +155,14 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
           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);
             }
@@ -188,12 +207,12 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     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
-        (0, _deletedBlocksHandler.handleBlockNodeView)(dom, nodeView, node, colourScheme, intl);
+        (0, _deletedBlocksHandler.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
@@ -201,7 +220,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        var _wrapper2 = (0, _deletedBlocksHandler.createDeletedStyleWrapperWithoutOpacity)(colourScheme, isActive);
+        var _wrapper2 = (0, _deletedBlocksHandler.createDeletedStyleWrapperWithoutOpacity)(colorScheme, isActive);
         _wrapper2.append(fallbackNode);
         dom.append(_wrapper2);
       }
@@ -212,5 +231,7 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
   // 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 = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, change.fromB, slice);
-  return [_view.Decoration.widget(safeInsertPos, dom)];
+  return [_view.Decoration.widget(safeInsertPos, dom, {
+    key: 'diff-widget'
+  })];
 };

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

@@ -63,8 +63,8 @@ var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-var getDeletedStyleNode = exports.getDeletedStyleNode = function getDeletedStyleNode(nodeName, colourScheme) {
-  var isTraditional = colourScheme === 'traditional';
+var getDeletedStyleNode = exports.getDeletedStyleNode = function getDeletedStyleNode(nodeName, colorScheme) {
+  var isTraditional = colorScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
       return (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
@@ -163,29 +163,29 @@ var createBlockNodeWrapper = exports.createBlockNodeWrapper = function createBlo
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-var createDeletedStyleWrapperWithoutOpacity = exports.createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colourScheme, isActive) {
+var createDeletedStyleWrapperWithoutOpacity = exports.createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive) {
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', (0, _decorations.getDeletedContentStyle)(colourScheme, isActive));
+  wrapper.setAttribute('style', (0, _decorations.getDeletedContentStyle)(colorScheme, isActive));
   return wrapper;
 };
 
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */
-var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
+var applyDeletedStylesToElement = exports.applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colorScheme) {
   var currentStyle = element.getAttribute('style') || '';
-  var deletedContentStyle = (0, _decorations.getDeletedContentStyle)(colourScheme);
-  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
+  var deletedContentStyle = (0, _decorations.getDeletedContentStyle)(colorScheme);
+  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
 };
 
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colourScheme) {
+var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colorScheme) {
   var contentWrapper = document.createElement('div');
-  var nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
-  contentWrapper.setAttribute('style', "".concat((0, _decorations.getDeletedContentStyle)(colourScheme)).concat(nodeStyle || ''));
+  var nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
+  contentWrapper.setAttribute('style', "".concat((0, _decorations.getDeletedContentStyle)(colorScheme)).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -196,7 +196,7 @@ var createBlockNodeContentWrapper = exports.createBlockNodeContentWrapper = func
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = exports.handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
+var handleEmbedCardWithLozenge = exports.handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) {
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -217,7 +217,7 @@ var handleEmbedCardWithLozenge = exports.handleEmbedCardWithLozenge = function h
     });
   }
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var showDiffDeletedNodeClass = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
@@ -228,7 +228,7 @@ var handleEmbedCardWithLozenge = exports.handleEmbedCardWithLozenge = function h
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
+var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) {
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -247,7 +247,7 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
 
   // Add deleted node class if needed
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var showDiffDeletedNodeClass = colourScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    var showDiffDeletedNodeClass = colorScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
@@ -257,22 +257,22 @@ var handleMediaSingleWithLozenge = exports.handleMediaSingleWithLozenge = functi
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl) {
+var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl) {
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
     var lozenge = createRemovedLozenge(intl);
-    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers')) {
+    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) && (0, _platformFeatureFlags.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);
   }
-  var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
+  var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colorScheme);
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var showDiffDeletedNodeClass = colourScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    var showDiffDeletedNodeClass = colorScheme === 'traditional' && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(blockWrapper);
@@ -283,13 +283,13 @@ var appendBlockNodeWithWrapper = exports.appendBlockNodeWithWrapper = function a
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-var handleBlockNodeView = exports.handleBlockNodeView = function handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl) {
+var handleBlockNodeView = exports.handleBlockNodeView = function 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/cjs/pm-plugins/deletedRowsHandler.js

@@ -65,7 +65,7 @@ var extractDeletedRows = function extractDeletedRows(change, originalDoc, newDoc
   var changeEndInTable = change.toA - tableOld.pos - 1;
   var currentOffset = 0;
   var rowIndex = 0;
-  tableOld.node.content.forEach(function (rowNode, index) {
+  tableOld.node.content.forEach(function (rowNode) {
     var rowStart = currentOffset;
     var rowEnd = currentOffset + rowNode.nodeSize;
 
@@ -126,9 +126,9 @@ var isEmptyRow = function isEmptyRow(rowNode) {
 /**
  * Creates a DOM representation of a deleted table row
  */
-var createDeletedRowDOM = function createDeletedRowDOM(rowNode, nodeViewSerializer, colourScheme) {
+var createDeletedRowDOM = function createDeletedRowDOM(rowNode, nodeViewSerializer, colorScheme) {
   var 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
@@ -181,9 +181,9 @@ var createDeletedRowsDecorations = exports.createDeletedRowsDecorations = functi
     originalDoc = _ref.originalDoc,
     newDoc = _ref.newDoc,
     nodeViewSerializer = _ref.nodeViewSerializer,
-    colourScheme = _ref.colourScheme;
+    colorScheme = _ref.colorScheme;
   return deletedRows.map(function (deletedRow) {
-    var rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colourScheme);
+    var rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colorScheme);
 
     // Find safe insertion position for the deleted row
     var safeInsertPos = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, deletedRow.fromB - 1,
@@ -196,7 +196,7 @@ var createDeletedRowsDecorations = exports.createDeletedRowsDecorations = functi
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-var handleDeletedRows = exports.handleDeletedRows = function handleDeletedRows(changes, originalDoc, newDoc, nodeViewSerializer, colourScheme) {
+var handleDeletedRows = exports.handleDeletedRows = function handleDeletedRows(changes, originalDoc, newDoc, nodeViewSerializer, colorScheme) {
   // First, expand the changes to include complete deleted rows
   var deletedRows = expandDiffForDeletedRows(changes.filter(function (change) {
     return change.deleted.length > 0;
@@ -206,7 +206,7 @@ var handleDeletedRows = exports.handleDeletedRows = function handleDeletedRows(c
     originalDoc: originalDoc,
     newDoc: newDoc,
     nodeViewSerializer: nodeViewSerializer,
-    colourScheme: colourScheme
+    colorScheme: colorScheme
   });
   return {
     decorations: allDecorations

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.showDiffPluginKey = exports.createPlugin = void 0;
+exports.showDiffPluginKey = exports.getScrollableDecorations = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -17,6 +17,12 @@ var _NodeViewSerializer = require("./NodeViewSerializer");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var showDiffPluginKey = exports.showDiffPluginKey = new _state2.PluginKey('showDiffPlugin');
+var getScrollableDecorations = exports.getScrollableDecorations = function getScrollableDecorations(set) {
+  var _set$find;
+  return (_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
+    return spec.key === 'diff-inline' || spec.key === 'diff-widget' || spec.key === 'diff-block';
+  })) !== null && _set$find !== void 0 ? _set$find : [];
+};
 var createPlugin = exports.createPlugin = function createPlugin(config, getIntl) {
   var nodeViewSerializer = new _NodeViewSerializer.NodeViewSerializer({});
   var setNodeViewSerializer = function setNodeViewSerializer(editorView) {
@@ -43,7 +49,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
       if (!pluginState || pluginState.decorations.find().length === 0) {
         return;
       }
-      var decorations = pluginState.decorations.find();
+      var decorations = getScrollableDecorations(pluginState.decorations);
       var decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
       if (!decoration) {
         return;
@@ -85,7 +91,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer: nodeViewSerializer,
-              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+              colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
               intl: getIntl(),
               activeIndexPos: (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined
             });
@@ -99,7 +105,7 @@ var createPlugin = exports.createPlugin = function 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') && (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
             // Update the active index in plugin state and recalculate decorations
-            var _decorations = currentPluginState.decorations.find();
+            var _decorations = getScrollableDecorations(currentPluginState.decorations);
             if (_decorations.length > 0) {
               var _currentPluginState$a;
               var nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : 0;
@@ -121,7 +127,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl)
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer: 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/cjs/showDiffPlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.showDiffPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _main = require("./pm-plugins/main");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -61,7 +62,7 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
         };
       }
       var pluginState = _main.showDiffPluginKey.getState(editorState);
-      var decorationCount = (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
+      var decorationCount = (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? (0, _main.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()) || [];
       return {
         isDisplayingChanges: decorationCount.length > 0,
         activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,

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

@@ -8,16 +8,19 @@ import { getAttrChangeRanges, stepIsValidAttrChange } from './attributeDecoratio
 import { createInlineChangedDecoration, createDeletedContentDecoration, createBlockChangedDecoration } from './decorations';
 import { getMarkChangeRanges } from './markDecorations';
 import { simplifySteps } from './simplifyChanges';
-const calculateNodesForBlockDecoration = (doc, from, to, colourScheme) => {
+const calculateNodesForBlockDecoration = (doc, from, to, colorScheme) => {
   const decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, (node, pos) => {
     if (node.isBlock) {
-      decorations.push(createBlockChangedDecoration({
+      const decoration = createBlockChangedDecoration({
         from: pos,
         to: pos + node.nodeSize,
         name: node.type.name
-      }, colourScheme));
+      }, colorScheme);
+      if (decoration) {
+        decorations.push(decoration);
+      }
     }
   });
   return decorations;
@@ -63,7 +66,7 @@ const calculateDiffDecorationsInner = ({
   state,
   pluginState,
   nodeViewSerializer,
-  colourScheme,
+  colorScheme,
   intl,
   activeIndexPos
 }) => {
@@ -104,8 +107,8 @@ const calculateDiffDecorationsInner = ({
   optimizedChanges.forEach(change => {
     const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change, colourScheme, isActive));
-      decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme));
+      decorations.push(createInlineChangedDecoration(change, colorScheme, isActive));
+      decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme));
     }
     if (change.deleted.length > 0) {
       const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
@@ -113,7 +116,7 @@ const calculateDiffDecorationsInner = ({
         change,
         doc: originalDoc,
         nodeViewSerializer,
-        colourScheme,
+        colorScheme,
         newDoc: tr.doc,
         intl,
         isActive
@@ -125,10 +128,10 @@ const calculateDiffDecorationsInner = ({
   });
   getMarkChangeRanges(steps).forEach(change => {
     const 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(change => {
-    decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme));
+    decorations.push(...calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colorScheme));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
 };
@@ -137,17 +140,17 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
 ([{
   pluginState,
   state,
-  colourScheme,
+  colorScheme,
   intl,
   activeIndexPos
 }], [{
   pluginState: lastPluginState,
   state: lastState,
-  colourScheme: lastColourScheme,
+  colorScheme: lastColorScheme,
   intl: lastIntl,
   activeIndexPos: lastActiveIndexPos
 }]) => {
   var _ref;
   const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref !== void 0 ? _ref : false;
+  return (_ref = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref !== void 0 ? _ref : false;
 });