@atlaskit/editor-plugin-show-diff 4.1.2 → 4.1.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 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
+
+- [`ea378cb5c7a31`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea378cb5c7a31) -
+  EDITOR-5632: no-op refactors to simplify code
+- Updated dependencies
+
 ## 4.1.2
 
 ### Patch Changes

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

@@ -27,11 +27,14 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
   // 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));
+      }, colourScheme);
+      if (decoration) {
+        decorations.push(decoration);
+      }
     }
   });
   return decorations;

package/dist/cjs/pm-plugins/colorSchemes/standard.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStandardNodeStyle = exports.editingStyleActive = exports.editingStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNewActive = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = void 0;
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
+});
+var editingStyleActive = exports.editingStyleActive = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-purple, #803FA5)"
+});
+var deletedContentStyle = exports.deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text-accent-gray, #505258)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 0.6
+});
+var deletedContentStyleActive = exports.deletedContentStyleActive = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
+var deletedContentStyleNew = exports.deletedContentStyleNew = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text-accent-gray, #505258)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 0.8
+});
+var deletedContentStyleNewActive = exports.deletedContentStyleNewActive = (0, _lazyNodeView.convertToInlineCss)({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
+var deletedContentStyleUnbounded = exports.deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-text-accent-gray, #505258)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
+var editingStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #AF59E1)")
+});
+var editingStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
+  backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
+});
+var editingStyleNode = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var editingStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
+var standardDecorationMarkerVariableName = (0, _lazyNodeView.convertToInlineCss)({
+  '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
+});
+var getStandardNodeStyle = exports.getStandardNodeStyle = function getStandardNodeStyle(nodeName) {
+  if (['mediaSingle', 'mediaGroup', 'table',
+  // Handle table separately to avoid border issues
+  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
+  // Paragraph and heading nodes do not need special styling
+  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
+    // Layout nodes do not need special styling
+    return undefined;
+  }
+  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
+    return standardDecorationMarkerVariableName;
+  }
+  if (nodeName === 'blockquote') {
+    return editingStyleQuoteNode;
+  }
+  if (nodeName === 'rule') {
+    return editingStyleRuleNode;
+  }
+  if (nodeName === 'blockCard') {
+    return editingStyleCardBlockNode;
+  }
+  return editingStyleNode;
+};

package/dist/cjs/pm-plugins/colorSchemes/traditional.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.getTraditionalNodeStyle = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyle = void 0;
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var traditionalInsertStyle = exports.traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
+});
+var traditionalInsertStyleActive = exports.traditionalInsertStyleActive = (0, _lazyNodeView.convertToInlineCss)({
+  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
+});
+var deletedTraditionalContentStyle = exports.deletedTraditionalContentStyle = (0, _lazyNodeView.convertToInlineCss)({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 1
+});
+var deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
+var traditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
+});
+var traditionalStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
+  backgroundColor: "var(--ds-border-accent-green, #22A06B)"
+});
+var traditionalStyleNode = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var traditionalStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
+var traditionalDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
+  '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
+});
+var getTraditionalNodeStyle = exports.getTraditionalNodeStyle = function getTraditionalNodeStyle(nodeName) {
+  if (['mediaSingle', 'mediaGroup', 'table',
+  // Handle table separately to avoid border issues
+  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
+  // Paragraph and heading nodes do not need special styling
+  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
+    // Layout nodes do not need special styling
+    return undefined;
+  }
+  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
+    return traditionalDecorationMarkerVariable;
+  }
+  if (nodeName === 'blockquote') {
+    return traditionalStyleQuoteNode;
+  }
+  if (nodeName === 'rule') {
+    return traditionalStyleRuleNode;
+  }
+  if (nodeName === 'blockCard') {
+    return traditionalStyleCardBlockNode;
+  }
+  return traditionalStyleNode;
+};

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

@@ -8,38 +8,11 @@ var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _standard = require("./colorSchemes/standard");
+var _traditional = require("./colorSchemes/traditional");
 var _deletedBlocksHandler = require("./deletedBlocksHandler");
 var _deletedRowsHandler = require("./deletedRowsHandler");
 var _findSafeInsertPos = require("./findSafeInsertPos");
-var editingStyle = (0, _lazyNodeView.convertToInlineCss)({
-  background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
-  textDecoration: 'underline',
-  textDecorationStyle: 'dotted',
-  textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
-});
-var editingStyleActive = (0, _lazyNodeView.convertToInlineCss)({
-  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
-  textDecoration: 'underline',
-  textDecorationStyle: 'dotted',
-  textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-text-accent-purple, #803FA5)"
-});
-var traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
-  background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
-  textDecoration: 'underline',
-  textDecorationStyle: 'solid',
-  textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
-});
-var traditionalInsertStyleActive = (0, _lazyNodeView.convertToInlineCss)({
-  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
-  textDecoration: 'underline',
-  textDecorationStyle: 'solid',
-  textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
-});
-
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -50,145 +23,29 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
   var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var style;
   if (colourScheme === 'traditional') {
-    style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+    style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
   } else {
-    style = isActive ? editingStyleActive : editingStyle;
+    style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
   }
   return _view.Decoration.inline(change.fromB, change.toB, {
     style: style,
     'data-testid': 'show-diff-changed-decoration'
-  }, {});
-};
-var getEditorStyleNode = function getEditorStyleNode(nodeName, colourScheme) {
-  switch (nodeName) {
-    case 'blockquote':
-      return colourScheme === 'traditional' ? traditionalStyleQuoteNode : editingStyleQuoteNode;
-    case 'mediaSingle':
-    case 'mediaGroup':
-    case 'table':
-    case 'tableRow':
-    case 'tableCell':
-    case 'tableHeader':
-      return undefined;
-    // Handle table separately to avoid border issues
-    case 'paragraph':
-    case 'heading':
-    case 'hardBreak':
-      return undefined;
-    // Paragraph and heading nodes do not need special styling
-    case 'decisionList':
-    case 'taskList':
-    case 'taskItem':
-    case 'bulletList':
-    case 'orderedList':
-      return undefined;
-    case 'extension':
-    case 'embedCard':
-    case 'listItem':
-      return (0, _lazyNodeView.convertToInlineCss)({
-        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #AF59E1)"
-      });
-    case 'layoutSection':
-      return undefined;
-    // Layout nodes do not need special styling
-    case 'rule':
-      return colourScheme === 'traditional' ? traditionalStyleRuleNode : editingStyleRuleNode;
-    case 'blockCard':
-      return colourScheme === 'traditional' ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
-    default:
-      return colourScheme === 'traditional' ? traditionalStyleNode : editingStyleNode;
-  }
+  }, {
+    key: 'diff-inline'
+  });
 };
-var editingStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
-  borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #AF59E1)")
-});
-var traditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
-  borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
-});
-var editingStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
-  backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
-});
-var traditionalStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
-  backgroundColor: "var(--ds-border-accent-green, #22A06B)"
-});
-var editingStyleNode = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var traditionalStyleNode = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-var editingStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
-  borderRadius: "var(--ds-radius-medium, 6px)"
-});
-var traditionalStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
-  borderRadius: "var(--ds-radius-medium, 6px)"
-});
-var deletedContentStyle = (0, _lazyNodeView.convertToInlineCss)({
-  color: "var(--ds-text-accent-gray, #505258)",
-  textDecoration: 'line-through',
-  position: 'relative',
-  opacity: 0.6
-});
-var deletedContentStyleActive = (0, _lazyNodeView.convertToInlineCss)({
-  color: "var(--ds-text, #292A2E)",
-  textDecoration: 'line-through',
-  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
-  position: 'relative',
-  opacity: 1
-});
-var deletedContentStyleNew = (0, _lazyNodeView.convertToInlineCss)({
-  color: "var(--ds-text-accent-gray, #505258)",
-  textDecoration: 'line-through',
-  position: 'relative',
-  opacity: 0.8
-});
-var deletedContentStyleNewActive = (0, _lazyNodeView.convertToInlineCss)({
-  color: "var(--ds-text, #292A2E)",
-  textDecoration: 'line-through',
-  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
-  position: 'relative',
-  opacity: 1
-});
-var deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
-  position: 'absolute',
-  top: '50%',
-  width: '100%',
-  display: 'inline-block',
-  borderTop: "1px solid ".concat("var(--ds-text-accent-gray, #505258)"),
-  pointerEvents: 'none',
-  zIndex: 1
-});
-var deletedTraditionalContentStyle = (0, _lazyNodeView.convertToInlineCss)({
-  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
-  textDecoration: 'line-through',
-  position: 'relative',
-  opacity: 1
-});
-var deletedTraditionalContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
-  position: 'absolute',
-  top: '50%',
-  width: '100%',
-  display: 'inline-block',
-  borderTop: "1px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
-  pointerEvents: 'none',
-  zIndex: 1
-});
 var getDeletedContentStyleUnbounded = exports.getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colourScheme) {
-  return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+  return colourScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
 };
 var getDeletedContentStyle = exports.getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (colourScheme === 'traditional') {
-    return deletedTraditionalContentStyle;
+    return _traditional.deletedTraditionalContentStyle;
   }
   if (isActive) {
-    return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
+    return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNewActive : _standard.deletedContentStyleActive;
   }
-  return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
+  return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
 };
 var getNodeClass = function getNodeClass(name) {
   switch (name) {
@@ -198,6 +55,9 @@ var getNodeClass = function getNodeClass(name) {
       return undefined;
   }
 };
+var getBlockNodeStyle = function getBlockNodeStyle(name, colourScheme) {
+  return colourScheme === 'traditional' ? (0, _traditional.getTraditionalNodeStyle)(name) : (0, _standard.getStandardNodeStyle)(name);
+};
 
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -206,11 +66,41 @@ var getNodeClass = function getNodeClass(name) {
  * @returns Prosemirror inline decoration
  */
 var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(change, colourScheme) {
-  return _view.Decoration.node(change.from, change.to, {
-    style: getEditorStyleNode(change.name, colourScheme),
-    'data-testid': 'show-diff-changed-decoration-node',
-    class: getNodeClass(change.name)
-  }, {});
+  if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
+    var style = getBlockNodeStyle(change.name, colourScheme);
+    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, colourScheme),
+      'data-testid': 'show-diff-changed-decoration-node',
+      class: getNodeClass(change.name)
+    }, {
+      key: 'diff-block'
+    });
+  }
+};
+var createContentWrapper = function createContentWrapper(colourScheme) {
+  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)));
+  var strikethrough = document.createElement('span');
+  strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
+  wrapper.append(strikethrough);
+  return wrapper;
 };
 var createDeletedContentDecoration = exports.createDeletedContentDecoration = function createDeletedContentDecoration(_ref) {
   var change = _ref.change,
@@ -257,20 +147,6 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
    * or sliced End depth is and match only the entire node.
    */
   slice.content.forEach(function (node) {
-    // Create a wrapper for each node with strikethrough
-    var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
-      var wrapper = document.createElement('span');
-      var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
-        position: 'relative',
-        width: 'fit-content'
-      });
-      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme, isActive)));
-      var strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
-      wrapper.append(strikethrough);
-      return wrapper;
-    };
-
     // Helper function to handle multiple child nodes
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
       if (node.content.childCount > 1 && node.type.inlineContent) {
@@ -278,16 +154,15 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
           var childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
             var lineBreak = document.createElement('br');
-            targetNode = node;
             dom.append(lineBreak);
-            var wrapper = createWrapperWithStrikethrough();
+            var wrapper = createContentWrapper(colourScheme, isActive);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             var serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              var _wrapper = createWrapperWithStrikethrough();
+              var _wrapper = createContentWrapper(colourScheme, isActive);
               _wrapper.append(serializedChild);
               dom.append(_wrapper);
             }
@@ -302,21 +177,15 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
     var isFirst = slice.content.firstChild === node;
     var isLast = slice.content.lastChild === node;
     var hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
-    var targetNode;
     var fallbackSerialization;
+    if (handleMultipleChildNodes(node)) {
+      return;
+    }
     if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
-      if (handleMultipleChildNodes(node)) {
-        return;
-      }
-      targetNode = node;
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeFragment(node.content);
       };
     } else if (isLast && slice.content.childCount === 2) {
-      if (handleMultipleChildNodes(node)) {
-        return;
-      }
-      targetNode = node;
       fallbackSerialization = function fallbackSerialization() {
         if (node.type.name === 'text') {
           return document.createTextNode(node.text || '');
@@ -329,27 +198,23 @@ var createDeletedContentDecoration = exports.createDeletedContentDecoration = fu
         return serializer.serializeFragment(node.content);
       };
     } else {
-      if (handleMultipleChildNodes(node)) {
-        return;
-      }
-      targetNode = node;
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeNode(node);
       };
     }
 
     // Try to create node view, fallback to serialization
-    var nodeView = serializer.tryCreateNodeView(targetNode);
+    var nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
-      if (targetNode.isInline) {
-        var wrapper = createWrapperWithStrikethrough();
+      if (node.isInline) {
+        var wrapper = createContentWrapper(colourScheme, isActive);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
         // Handle all block nodes with unified function
-        (0, _deletedBlocksHandler.handleBlockNodeView)(dom, nodeView, targetNode, colourScheme, intl);
+        (0, _deletedBlocksHandler.handleBlockNodeView)(dom, nodeView, node, colourScheme, intl);
       }
-    } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.type.name)) {
+    } 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
       return;
     } else {
@@ -366,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/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;
@@ -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;

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

@@ -13,11 +13,14 @@ const calculateNodesForBlockDecoration = (doc, from, to, colourScheme) => {
   // 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));
+      }, colourScheme);
+      if (decoration) {
+        decorations.push(decoration);
+      }
     }
   });
   return decorations;