@atlaskit/editor-plugin-show-diff 6.1.2 → 6.1.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 6.1.4
+
+### Patch Changes
+
+- [`9df4b10b5f0f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9df4b10b5f0f8) -
+  Improve edge cases when showing diff by using a looser equality structure for steps.
+- Updated dependencies
+
+## 6.1.3
+
+### Patch Changes
+
+- [`8c860e8e9e774`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c860e8e9e774) -
+  Make active decorations more distinct
+
 ## 6.1.2
 
 ### Patch Changes

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.areDocsEqualByBlockStructureAndText = areDocsEqualByBlockStructureAndText;
+/**
+ * Returns true if both nodes have the same tree structure (type and child count at every level).
+ */
+function isBlockStructureEqual(node1, node2) {
+  if (node1.type !== node2.type || node1.childCount !== node2.childCount) {
+    return false;
+  }
+  for (var i = 0; i < node1.childCount; i++) {
+    if (!isBlockStructureEqual(node1.child(i), node2.child(i))) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Looser equality for "safe diff" cases: same full text content and same block structure
+ * (e.g. text moved across text-node boundaries). Used when strict areNodesEqualIgnoreAttrs fails.
+ * This is safe because we ensure decorations get applied to valid positions.
+ */
+function areDocsEqualByBlockStructureAndText(doc1, doc2) {
+  return doc1.textContent === doc2.textContent && doc1.nodeSize === doc2.nodeSize && isBlockStructureEqual(doc1, doc2);
+}

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

@@ -13,7 +13,9 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _prosemirrorChangeset = require("prosemirror-changeset");
 var _document = require("@atlaskit/editor-common/utils/document");
 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 _areDocsEqualByBlockStructureAndText = require("./areDocsEqualByBlockStructureAndText");
 var _createBlockChangedDecoration = require("./decorations/createBlockChangedDecoration");
 var _createInlineChangedDecoration = require("./decorations/createInlineChangedDecoration");
 var _createNodeChangedDecorationWidget = require("./decorations/createNodeChangedDecorationWidget");
@@ -31,19 +33,23 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     to = _ref.to,
     colorScheme = _ref.colorScheme,
     _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    activeIndexPos = _ref.activeIndexPos;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
     if (node.isBlock && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
+      var nodeEnd = pos + node.nodeSize;
+      var isActive = activeIndexPos && pos === activeIndexPos.from && nodeEnd === activeIndexPos.to;
       var decoration = (0, _createBlockChangedDecoration.createBlockChangedDecoration)({
         change: {
           from: pos,
-          to: pos + node.nodeSize,
+          to: nodeEnd,
           name: node.type.name
         },
         colorScheme: colorScheme,
-        isInserted: isInserted
+        isInserted: isInserted,
+        isActive: isActive
       });
       if (decoration) {
         decorations.push(decoration);
@@ -128,6 +134,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     _iterator.f();
   }
   if (!(0, _document.areNodesEqualIgnoreAttrs)(steppedDoc, tr.doc)) {
+    var recoveredViaContentEquality = (0, _platformFeatureFlags.fg)('platform_editor_show_diff_equality_fallback') ? (0, _areDocsEqualByBlockStructureAndText.areDocsEqualByBlockStructureAndText)(steppedDoc, tr.doc) : undefined;
     if ((0, _expValEquals.expValEquals)('platform_editor_are_nodes_equal_ignore_mark_order', 'isEnabled', true)) {
       var _api$analytics;
       api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
@@ -136,18 +143,25 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
         actionSubject: 'showDiff',
         attributes: {
           docSizeEqual: steppedDoc.nodeSize === tr.doc.nodeSize,
-          colorScheme: colorScheme
+          colorScheme: colorScheme,
+          recoveredViaContentEquality: recoveredViaContentEquality
         }
       });
     }
-    return _view.DecorationSet.empty;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_equality_fallback')) {
+      if (!recoveredViaContentEquality) {
+        return _view.DecorationSet.empty;
+      }
+    } else {
+      return _view.DecorationSet.empty;
+    }
   }
   var changeset = _prosemirrorChangeset.ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
   var changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
   var optimizedChanges = optimizeChanges(changes);
   var decorations = [];
   optimizedChanges.forEach(function (change) {
-    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     // Our default operations are insertions, so it should match the opposite of isInverted.
     var isInserted = !isInverted;
     if (change.inserted.length > 0) {
@@ -158,17 +172,20 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
       }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted
       })));
-      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(_objectSpread({
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
         doc: tr.doc,
         from: change.fromB,
         to: change.toB,
         colorScheme: colorScheme
       }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted
+      }), {}, {
+        activeIndexPos: activeIndexPos,
+        intl: intl
       }))));
     }
     if (change.deleted.length > 0) {
-      var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+      var _isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.fromB === activeIndexPos.to;
       var decoration = (0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread({
         change: change,
         doc: originalDoc,
@@ -186,7 +203,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     }
   });
   (0, _getMarkChangeRanges.getMarkChangeRanges)(steps).forEach(function (change) {
-    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
       change: change,
       colorScheme: colorScheme,
@@ -200,7 +217,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
       from: change.fromB,
       to: change.toB,
       colorScheme: colorScheme,
-      isInserted: true
+      isInserted: true,
+      activeIndexPos: activeIndexPos,
+      intl: intl
     })));
   });
   return _view.DecorationSet.empty.add(tr.doc, decorations);

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

@@ -13,7 +13,7 @@ var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)(
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
 var editingStyleActive = exports.editingStyleActive = (0, _lazyNodeView.convertToInlineCss)({
-  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNode = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyle = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyle = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutline = void 0;
+exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyle = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleActive = exports.deletedTraditionalContentStyle = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutline = 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)",
@@ -13,7 +13,7 @@ var traditionalInsertStyle = exports.traditionalInsertStyle = (0, _lazyNodeView.
   textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
 });
 var traditionalInsertStyleActive = exports.traditionalInsertStyleActive = (0, _lazyNodeView.convertToInlineCss)({
-  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  background: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
   textDecoration: 'underline',
   textDecorationStyle: 'solid',
   textDecorationThickness: "var(--ds-space-025, 2px)",
@@ -25,6 +25,15 @@ var deletedTraditionalContentStyle = exports.deletedTraditionalContentStyle = (0
   position: 'relative',
   opacity: 1
 });
+
+/** Emphasised (pressed) strikethrough for traditional removed text when active */
+var deletedTraditionalContentStyleActive = exports.deletedTraditionalContentStyleActive = (0, _lazyNodeView.convertToInlineCss)({
+  textDecorationColor: "var(--ds-text-accent-red, #AE2E24)",
+  textDecoration: 'line-through',
+  backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)",
+  position: 'relative',
+  opacity: 1
+});
 var deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: '50%',
@@ -34,6 +43,17 @@ var deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentS
   pointerEvents: 'none',
   zIndex: 1
 });
+
+/** Emphasised (pressed) strikethrough line for traditional when active */
+var deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnboundedActive = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-text-accent-red-bolder, #5D1F1A)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
 var deletedTraditionalStyleQuoteNode = exports.deletedTraditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
   marginTop: "var(--ds-space-150, 12px)",
   paddingTop: "var(--ds-space-025, 2px)",
@@ -59,20 +79,37 @@ var deletedTraditionalRowStyle = exports.deletedTraditionalRowStyle = (0, _lazyN
 var traditionalStyleQuoteNode = exports.traditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
 });
+var traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  borderLeft: "2px solid ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)")
+});
 var traditionalStyleRuleNode = exports.traditionalStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
+var traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"
+});
 var traditionalStyleNode = exports.traditionalStyleNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+var traditionalStyleNodeActive = exports.traditionalStyleNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 2px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 var traditionalStyleCardBlockNode = exports.traditionalStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+var traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNodeActive = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
 var traditionalDecorationMarkerVariable = exports.traditionalDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
 });
+var traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariableActive = (0, _lazyNodeView.convertToInlineCss)({
+  '--diff-decoration-marker-color': "var(--ds-text-accent-green, #216E4E)"
+});
 var traditionalAddedCellOverlayStyle = exports.traditionalAddedCellOverlayStyle = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: 0,

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

@@ -21,7 +21,9 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   var nodeName = _ref.nodeName,
     colorScheme = _ref.colorScheme,
     _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
   var isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
   // Handle table separately to avoid border issues
@@ -34,73 +36,79 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
+        return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
       } else {
         return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
+    return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
       } else {
         return isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNode;
       }
     }
-    return isTraditional ? _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
       } else {
         return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional ? _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
       } else {
         return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional ? _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
   }
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     if (isInserted) {
-      return isTraditional ? _traditional.traditionalStyleNode : _standard.editingStyleNode;
+      return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode : _standard.editingStyleNode;
     } else {
       return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
     }
   }
-  return isTraditional ? _traditional.traditionalStyleNode : _standard.editingStyleNode;
+  return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode : _standard.editingStyleNode;
 };
 
 /**
- * Inline decoration used for insertions as the content already exists in the document
+ * Node decoration used for block-level insertions. When isActive, uses emphasised (pressed) styling.
  *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
+ * @param change Node range and name
+ * @param colorScheme Optional color scheme
+ * @param isActive Whether this node is part of the currently active/focused change
+ * @returns Prosemirror node decoration or undefined
  */
 var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(_ref2) {
   var change = _ref2.change,
     colorScheme = _ref2.colorScheme,
     _ref2$isInserted = _ref2.isInserted,
-    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted;
+    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
+    _ref2$isActive = _ref2.isActive,
+    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
   var style = getBlockNodeStyle({
     nodeName: change.name,
-    colorScheme: colorScheme
+    colorScheme: colorScheme,
+    isActive: isActive
   });
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     style = getBlockNodeStyle({
       nodeName: change.name,
       colorScheme: colorScheme,
-      isInserted: isInserted
+      isInserted: isInserted,
+      isActive: isActive
     });
   }
   var className = getNodeClass(change.name);
@@ -111,17 +119,19 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
         'data-testid': 'show-diff-changed-decoration-node',
         class: className
       }, {
-        key: 'diff-block'
+        key: 'diff-block',
+        nodeName: change.name
       });
+    } else {
+      return undefined;
     }
-    return undefined;
-  } else {
-    return _view.Decoration.node(change.from, change.to, {
-      style: style,
-      'data-testid': 'show-diff-changed-decoration-node',
-      class: className
-    }, {
-      key: 'diff-block'
-    });
   }
+  return _view.Decoration.node(change.from, change.to, {
+    style: style,
+    'data-testid': 'show-diff-changed-decoration-node',
+    class: className
+  }, {
+    key: 'diff-block',
+    nodeName: change.name
+  });
 };

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

@@ -15,6 +15,10 @@ var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWi
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional' && isActive) {
+    return _traditional.deletedTraditionalContentStyleUnboundedActive;
+  }
   return colorScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
 };
 var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
@@ -33,7 +37,7 @@ var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
 var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (colorScheme === 'traditional') {
-    return _traditional.deletedTraditionalContentStyle;
+    return isActive ? _traditional.deletedTraditionalContentStyleActive : _traditional.deletedTraditionalContentStyle;
   }
   if (isActive) {
     return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNewActive : _standard.deletedContentStyleActive;
@@ -254,7 +258,9 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   // 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, {
-    key: 'diff-widget'
-  })];
+  var decorations = [];
+  decorations.push(_view.Decoration.widget(safeInsertPos, dom, {
+    key: "diff-widget-".concat(isActive ? 'active' : 'inactive')
+  }));
+  return decorations;
 };

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

@@ -21,9 +21,25 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 seenBlockKeys = new Set();
+  return ((_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
+    var _spec$key;
+    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
+  })) !== null && _set$find !== void 0 ? _set$find : []).filter(function (dec) {
+    var _dec$spec;
+    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
+      var _dec$spec2, _dec$spec$nodeName, _dec$spec3;
+      // Skip listItem blocks as they are not scrollable
+      if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
+      var key = "".concat(dec.from, "-").concat(dec.to, "-").concat((_dec$spec$nodeName = (_dec$spec3 = dec.spec) === null || _dec$spec3 === void 0 ? void 0 : _dec$spec3.nodeName) !== null && _dec$spec$nodeName !== void 0 ? _dec$spec$nodeName : '');
+      // Skip blocks that have already been seen
+      if (seenBlockKeys.has(key)) return false;
+      seenBlockKeys.add(key);
+    }
+    return true;
+  }).sort(function (a, b) {
+    return a.from === b.from ? a.to - b.to : a.from - b.from;
+  });
 };
 var createPlugin = exports.createPlugin = function createPlugin(config, getIntl, api) {
   var nodeViewSerializer = new _NodeViewSerializer.NodeViewSerializer({});

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

@@ -0,0 +1,23 @@
+/**
+ * Returns true if both nodes have the same tree structure (type and child count at every level).
+ */
+function isBlockStructureEqual(node1, node2) {
+  if (node1.type !== node2.type || node1.childCount !== node2.childCount) {
+    return false;
+  }
+  for (let i = 0; i < node1.childCount; i++) {
+    if (!isBlockStructureEqual(node1.child(i), node2.child(i))) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Looser equality for "safe diff" cases: same full text content and same block structure
+ * (e.g. text moved across text-node boundaries). Used when strict areNodesEqualIgnoreAttrs fails.
+ * This is safe because we ensure decorations get applied to valid positions.
+ */
+export function areDocsEqualByBlockStructureAndText(doc1, doc2) {
+  return doc1.textContent === doc2.textContent && doc1.nodeSize === doc2.nodeSize && isBlockStructureEqual(doc1, doc2);
+}

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

@@ -4,7 +4,9 @@ import memoizeOne from 'memoize-one';
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
 import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { areDocsEqualByBlockStructureAndText } from './areDocsEqualByBlockStructureAndText';
 import { createBlockChangedDecoration } from './decorations/createBlockChangedDecoration';
 import { createInlineChangedDecoration } from './decorations/createInlineChangedDecoration';
 import { createNodeChangedDecorationWidget } from './decorations/createNodeChangedDecorationWidget';
@@ -16,20 +18,24 @@ const calculateNodesForBlockDecoration = ({
   from,
   to,
   colorScheme,
-  isInserted = true
+  isInserted = true,
+  activeIndexPos
 }) => {
   const decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, (node, pos) => {
     if (node.isBlock && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
+      const nodeEnd = pos + node.nodeSize;
+      const isActive = activeIndexPos && pos === activeIndexPos.from && nodeEnd === activeIndexPos.to;
       const decoration = createBlockChangedDecoration({
         change: {
           from: pos,
-          to: pos + node.nodeSize,
+          to: nodeEnd,
           name: node.type.name
         },
         colorScheme,
-        isInserted
+        isInserted,
+        isActive
       });
       if (decoration) {
         decorations.push(decoration);
@@ -113,6 +119,7 @@ const calculateDiffDecorationsInner = ({
   // Rather than using .eq() we use a custom function that only checks for structural
   // changes and ignores differences in attributes which don't affect decoration positions
   if (!areNodesEqualIgnoreAttrs(steppedDoc, tr.doc)) {
+    const recoveredViaContentEquality = fg('platform_editor_show_diff_equality_fallback') ? areDocsEqualByBlockStructureAndText(steppedDoc, tr.doc) : undefined;
     if (expValEquals('platform_editor_are_nodes_equal_ignore_mark_order', 'isEnabled', true)) {
       var _api$analytics;
       api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
@@ -121,18 +128,25 @@ const calculateDiffDecorationsInner = ({
         actionSubject: 'showDiff',
         attributes: {
           docSizeEqual: steppedDoc.nodeSize === tr.doc.nodeSize,
-          colorScheme
+          colorScheme,
+          recoveredViaContentEquality
         }
       });
     }
-    return DecorationSet.empty;
+    if (fg('platform_editor_show_diff_equality_fallback')) {
+      if (!recoveredViaContentEquality) {
+        return DecorationSet.empty;
+      }
+    } else {
+      return DecorationSet.empty;
+    }
   }
   const changeset = ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
   const changes = simplifyChanges(changeset.changes, tr.doc);
   const optimizedChanges = optimizeChanges(changes);
   const decorations = [];
   optimizedChanges.forEach(change => {
-    const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     // Our default operations are insertions, so it should match the opposite of isInverted.
     const isInserted = !isInverted;
     if (change.inserted.length > 0) {
@@ -151,11 +165,13 @@ const calculateDiffDecorationsInner = ({
         colorScheme,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
           isInserted
-        })
+        }),
+        activeIndexPos,
+        intl
       }));
     }
     if (change.deleted.length > 0) {
-      const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+      const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.fromB === activeIndexPos.to;
       const decoration = createNodeChangedDecorationWidget({
         change,
         doc: originalDoc,
@@ -174,7 +190,7 @@ const calculateDiffDecorationsInner = ({
     }
   });
   getMarkChangeRanges(steps).forEach(change => {
-    const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
     decorations.push(createInlineChangedDecoration({
       change,
       colorScheme,
@@ -188,7 +204,9 @@ const calculateDiffDecorationsInner = ({
       from: change.fromB,
       to: change.toB,
       colorScheme,
-      isInserted: true
+      isInserted: true,
+      activeIndexPos,
+      intl
     }));
   });
   return DecorationSet.empty.add(tr.doc, decorations);

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

@@ -7,7 +7,7 @@ export const editingStyle = convertToInlineCss({
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
 export const editingStyleActive = convertToInlineCss({
-  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
   textDecoration: 'underline',
   textDecorationStyle: 'dotted',
   textDecorationThickness: "var(--ds-space-025, 2px)",