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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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");
@@ -132,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({
@@ -140,11 +143,18 @@ 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);

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

@@ -119,7 +119,8 @@ 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;
@@ -130,6 +131,7 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     'data-testid': 'show-diff-changed-decoration-node',
     class: className
   }, {
-    key: 'diff-block'
+    key: 'diff-block',
+    nodeName: change.name
   });
 };

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

@@ -20,13 +20,26 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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$sort;
-  return (_set$find$sort = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
+  var _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;
-  })) !== null && _set$find$sort !== void 0 ? _set$find$sort : [];
+    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';
@@ -117,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({
@@ -125,11 +128,18 @@ 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);

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

@@ -111,7 +111,8 @@ export const createBlockChangedDecoration = ({
         'data-testid': 'show-diff-changed-decoration-node',
         class: className
       }, {
-        key: 'diff-block'
+        key: 'diff-block',
+        nodeName: change.name
       });
     } else {
       return undefined;
@@ -122,6 +123,7 @@ export const createBlockChangedDecoration = ({
     'data-testid': 'show-diff-changed-decoration-node',
     class: className
   }, {
-    key: 'diff-block'
+    key: 'diff-block',
+    nodeName: change.name
   });
 };

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

@@ -10,11 +10,24 @@ import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
 export const getScrollableDecorations = set => {
-  var _set$find$sort;
-  return (_set$find$sort = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, spec => {
+  var _set$find;
+  const seenBlockKeys = new Set();
+  return ((_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, spec => {
     var _spec$key;
     return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
-  }).sort((a, b) => a.from - b.from)) !== null && _set$find$sort !== void 0 ? _set$find$sort : [];
+  })) !== null && _set$find !== void 0 ? _set$find : []).filter(dec => {
+    var _dec$spec;
+    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
+      var _dec$spec2, _dec$spec$nodeName, _dec$spec3;
+      // Skip listItem blocks as they are not scrollable
+      if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
+      const key = `${dec.from}-${dec.to}-${(_dec$spec$nodeName = (_dec$spec3 = dec.spec) === null || _dec$spec3 === void 0 ? void 0 : _dec$spec3.nodeName) !== null && _dec$spec$nodeName !== void 0 ? _dec$spec$nodeName : ''}`;
+      // Skip blocks that have already been seen
+      if (seenBlockKeys.has(key)) return false;
+      seenBlockKeys.add(key);
+    }
+    return true;
+  }).sort((a, b) => a.from === b.from ? a.to - b.to : a.from - b.from);
 };
 export const createPlugin = (config, getIntl, api) => {
   const nodeViewSerializer = new NodeViewSerializer({});

package/dist/esm/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 (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.
+ */
+export function areDocsEqualByBlockStructureAndText(doc1, doc2) {
+  return doc1.textContent === doc2.textContent && doc1.nodeSize === doc2.nodeSize && isBlockStructureEqual(doc1, doc2);
+}

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

@@ -12,7 +12,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';
@@ -126,6 +128,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     _iterator.f();
   }
   if (!areNodesEqualIgnoreAttrs(steppedDoc, tr.doc)) {
+    var 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 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
@@ -134,11 +137,18 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
         actionSubject: 'showDiff',
         attributes: {
           docSizeEqual: steppedDoc.nodeSize === tr.doc.nodeSize,
-          colorScheme: colorScheme
+          colorScheme: colorScheme,
+          recoveredViaContentEquality: recoveredViaContentEquality
         }
       });
     }
-    return DecorationSet.empty;
+    if (fg('platform_editor_show_diff_equality_fallback')) {
+      if (!recoveredViaContentEquality) {
+        return DecorationSet.empty;
+      }
+    } else {
+      return DecorationSet.empty;
+    }
   }
   var changeset = ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
   var changes = simplifyChanges(changeset.changes, tr.doc);

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

@@ -113,7 +113,8 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
         'data-testid': 'show-diff-changed-decoration-node',
         class: className
       }, {
-        key: 'diff-block'
+        key: 'diff-block',
+        nodeName: change.name
       });
     } else {
       return undefined;
@@ -124,6 +125,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     'data-testid': 'show-diff-changed-decoration-node',
     class: className
   }, {
-    key: 'diff-block'
+    key: 'diff-block',
+    nodeName: change.name
   });
 };

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

@@ -13,13 +13,26 @@ import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
 export var getScrollableDecorations = function getScrollableDecorations(set) {
-  var _set$find$sort;
-  return (_set$find$sort = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
+  var _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;
-  })) !== null && _set$find$sort !== void 0 ? _set$find$sort : [];
+    return a.from === b.from ? a.to - b.to : a.from - b.from;
+  });
 };
 export var createPlugin = function createPlugin(config, getIntl, api) {
   var nodeViewSerializer = new NodeViewSerializer({});

package/dist/types/pm-plugins/areDocsEqualByBlockStructureAndText.d.ts

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * 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 declare function areDocsEqualByBlockStructureAndText(doc1: PMNode, doc2: PMNode): boolean;

package/dist/types-ts4.5/pm-plugins/areDocsEqualByBlockStructureAndText.d.ts

@@ -0,0 +1,7 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * 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 declare function areDocsEqualByBlockStructureAndText(doc1: PMNode, doc2: PMNode): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "6.1.3",
+	"version": "6.1.4",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^40.0.0",
+		"@atlaskit/tmp-editor-statsig": "^40.3.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
@@ -85,6 +85,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_show_diff_equality_fallback": {
+			"type": "boolean"
+		},
 		"platform_editor_show_diff_scroll_navigation": {
 			"type": "boolean"
 		}