@atlaskit/editor-plugin-show-diff 6.1.9 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 6.2.0
+
+### Minor Changes
+
+- [`255e764f80182`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/255e764f80182) -
+  EDITOR-5830: Add support for showing inline vs. block diff types.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.1.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.9
 
 ### Patch Changes

package/dist/cjs/pm-plugins/{calculateDiffDecorations.js → calculateDiff/calculateDiffDecorations.js}

@@ -15,26 +15,40 @@ 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");
-var _getAttrChangeRanges = require("./decorations/utils/getAttrChangeRanges");
-var _getMarkChangeRanges = require("./decorations/utils/getMarkChangeRanges");
-var _simplifyChanges = require("./simplifyChanges");
+var _areDocsEqualByBlockStructureAndText = require("../areDocsEqualByBlockStructureAndText");
+var _createBlockChangedDecoration = require("../decorations/createBlockChangedDecoration");
+var _createInlineChangedDecoration = require("../decorations/createInlineChangedDecoration");
+var _createNodeChangedDecorationWidget = require("../decorations/createNodeChangedDecorationWidget");
+var _getAttrChangeRanges = require("../decorations/utils/getAttrChangeRanges");
+var _getMarkChangeRanges = require("../decorations/utils/getMarkChangeRanges");
+var _groupChangesByBlock = require("./groupChangesByBlock");
+var _optimizeChanges = require("./optimizeChanges");
+var _simplifySteps = require("./simplifySteps");
+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; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-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(_ref) {
-  var doc = _ref.doc,
-    from = _ref.from,
-    to = _ref.to,
-    colorScheme = _ref.colorScheme,
-    _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
-    activeIndexPos = _ref.activeIndexPos;
+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; } // eslint-disable-next-line @atlassian/tangerine/import/entry-points
+var getChanges = function getChanges(_ref) {
+  var changeset = _ref.changeset,
+    originalDoc = _ref.originalDoc,
+    steppedDoc = _ref.steppedDoc,
+    diffType = _ref.diffType,
+    tr = _ref.tr;
+  if (diffType === 'block' && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return (0, _groupChangesByBlock.groupChangesByBlock)(changeset.changes, originalDoc, steppedDoc);
+  }
+  var changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
+  return (0, _optimizeChanges.optimizeChanges)(changes);
+};
+var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(_ref2) {
+  var doc = _ref2.doc,
+    from = _ref2.from,
+    to = _ref2.to,
+    colorScheme = _ref2.colorScheme,
+    _ref2$isInserted = _ref2.isInserted,
+    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
+    activeIndexPos = _ref2.activeIndexPos;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
@@ -58,49 +72,18 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
   });
   return decorations;
 };
-
-/**
- * Groups adjacent changes to reduce visual fragmentation in diffs.
- * Merges consecutive insertions and deletions that are close together.
- */
-function optimizeChanges(changes) {
-  if (changes.length <= 1) {
-    return changes;
-  }
-  var optimized = [];
-  var current = _objectSpread({}, changes[0]);
-  for (var i = 1; i < changes.length; i++) {
-    var next = changes[i];
-
-    // Check if changes are adjacent or very close (within 2 positions)
-    var isAdjacent = next.fromB <= current.toB + 2;
-    if (isAdjacent) {
-      current = {
-        fromA: current.fromA,
-        toA: Math.max(current.toA, next.toA),
-        fromB: current.fromB,
-        toB: Math.max(current.toB, next.toB),
-        deleted: [].concat((0, _toConsumableArray2.default)(current.deleted), (0, _toConsumableArray2.default)(next.deleted)),
-        inserted: [].concat((0, _toConsumableArray2.default)(current.inserted), (0, _toConsumableArray2.default)(next.inserted))
-      };
-    } else {
-      optimized.push(current);
-      current = _objectSpread({}, next);
-    }
-  }
-  optimized.push(current);
-  return optimized;
-}
-var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2) {
-  var state = _ref2.state,
-    pluginState = _ref2.pluginState,
-    nodeViewSerializer = _ref2.nodeViewSerializer,
-    colorScheme = _ref2.colorScheme,
-    intl = _ref2.intl,
-    activeIndexPos = _ref2.activeIndexPos,
-    api = _ref2.api,
-    _ref2$isInverted = _ref2.isInverted,
-    isInverted = _ref2$isInverted === void 0 ? false : _ref2$isInverted;
+var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3) {
+  var state = _ref3.state,
+    pluginState = _ref3.pluginState,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    intl = _ref3.intl,
+    activeIndexPos = _ref3.activeIndexPos,
+    api = _ref3.api,
+    _ref3$isInverted = _ref3.isInverted,
+    isInverted = _ref3$isInverted === void 0 ? false : _ref3$isInverted,
+    _ref3$diffType = _ref3.diffType,
+    diffType = _ref3$diffType === void 0 ? 'inline' : _ref3$diffType;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -109,7 +92,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
   var tr = state.tr;
   var steppedDoc = originalDoc;
   var attrSteps = [];
-  var simplifiedSteps = (0, _simplifyChanges.simplifySteps)(steps, originalDoc);
+  var simplifiedSteps = (0, _simplifySteps.simplifySteps)(steps, originalDoc);
   var stepMaps = [];
   var _iterator = _createForOfIteratorHelper(simplifiedSteps),
     _step;
@@ -157,10 +140,15 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     }
   }
   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 changes = getChanges({
+    changeset: changeset,
+    originalDoc: originalDoc,
+    steppedDoc: steppedDoc,
+    diffType: diffType,
+    tr: tr
+  });
   var decorations = [];
-  optimizedChanges.forEach(function (change) {
+  changes.forEach(function (change) {
     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;
@@ -226,28 +214,30 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
 };
 var calculateDiffDecorations = exports.calculateDiffDecorations = (0, _memoizeOne.default)(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref3, _ref4) {
-  var _ref8;
-  var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
-    _ref5$ = _ref5[0],
-    pluginState = _ref5$.pluginState,
-    state = _ref5$.state,
-    colorScheme = _ref5$.colorScheme,
-    intl = _ref5$.intl,
-    activeIndexPos = _ref5$.activeIndexPos,
-    isInverted = _ref5$.isInverted;
+function (_ref4, _ref5) {
+  var _ref9;
   var _ref6 = (0, _slicedToArray2.default)(_ref4, 1),
     _ref6$ = _ref6[0],
-    lastPluginState = _ref6$.pluginState,
-    lastState = _ref6$.state,
-    lastColorScheme = _ref6$.colorScheme,
-    lastIntl = _ref6$.intl,
-    lastActiveIndexPos = _ref6$.activeIndexPos,
-    lastIsInverted = _ref6$.isInverted;
+    pluginState = _ref6$.pluginState,
+    state = _ref6$.state,
+    colorScheme = _ref6$.colorScheme,
+    intl = _ref6$.intl,
+    activeIndexPos = _ref6$.activeIndexPos,
+    isInverted = _ref6$.isInverted,
+    diffType = _ref6$.diffType;
+  var _ref7 = (0, _slicedToArray2.default)(_ref5, 1),
+    _ref7$ = _ref7[0],
+    lastPluginState = _ref7$.pluginState,
+    lastState = _ref7$.state,
+    lastColorScheme = _ref7$.colorScheme,
+    lastIntl = _ref7$.intl,
+    lastActiveIndexPos = _ref7$.activeIndexPos,
+    lastIsInverted = _ref7$.isInverted,
+    lastDiffType = _ref7$.diffType;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    var _ref7;
-    return (_ref7 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref7 !== void 0 ? _ref7 : false;
+    var _ref8;
+    return (_ref8 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref8 !== void 0 ? _ref8 : false;
   }
-  return (_ref8 = 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 && _ref8 !== void 0 ? _ref8 : false;
+  return (_ref9 = 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 && _ref9 !== void 0 ? _ref9 : false;
 });

package/dist/cjs/pm-plugins/calculateDiff/groupChangesByBlock.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.groupChangesByBlock = groupChangesByBlock;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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; }
+/**
+ * Finds the position range of the top-level block (direct child of doc) that contains `pos`.
+ * Returns null if `pos` is at the doc boundary or outside the doc content.
+ */
+function getTopLevelBlockAt(doc, from, to) {
+  return {
+    from: doc.resolve(from).before(1),
+    to: doc.resolve(to).after(1)
+  };
+}
+
+/**
+ * Groups all changes that fall within the same top-level block (direct child of doc)
+ * and merges them into a single change spanning the full block in both old and new doc.
+ */
+function groupChangesByBlock(changes, docA, docB) {
+  var groups = new Map();
+  var _iterator = _createForOfIteratorHelper(changes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var change = _step.value;
+      var blockA = getTopLevelBlockAt(docA, change.fromA, change.toA);
+      var blockB = getTopLevelBlockAt(docB, change.fromB, change.toB);
+      if (!groups.has(blockB.from)) {
+        groups.set(blockB.from, {
+          fromB: blockB.from,
+          toB: blockB.to,
+          fromA: blockA ? blockA.from : change.fromA,
+          toA: blockA ? blockA.to : change.toA,
+          changed: []
+        });
+      }
+      var group = groups.get(blockB.from);
+      if (group) {
+        group.changed = [].concat((0, _toConsumableArray2.default)(group.changed), (0, _toConsumableArray2.default)(change.inserted), (0, _toConsumableArray2.default)(change.deleted));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return Array.from(groups.values()).sort(function (a, b) {
+    return a.fromB - b.fromB;
+  }).map(function (_ref) {
+    var fromA = _ref.fromA,
+      toA = _ref.toA,
+      fromB = _ref.fromB,
+      toB = _ref.toB,
+      changed = _ref.changed;
+    return {
+      fromA: fromA,
+      toA: toA,
+      fromB: fromB,
+      toB: toB,
+      /**
+       * We add all changes (both deleted and inserted) as that will
+       * inform the calculateDiffDecorations function that changes should be rendered
+       * (even if the change is only one of the two).
+       */
+      deleted: changed,
+      inserted: changed
+    };
+  });
+}

package/dist/cjs/pm-plugins/calculateDiff/optimizeChanges.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.optimizeChanges = optimizeChanges;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+/**
+ * Groups adjacent changes to reduce visual fragmentation in diffs.
+ * Merges consecutive insertions and deletions that are close together.
+ */
+function optimizeChanges(changes) {
+  if (changes.length <= 1) {
+    return changes;
+  }
+  var optimized = [];
+  var current = _objectSpread({}, changes[0]);
+  for (var i = 1; i < changes.length; i++) {
+    var next = changes[i];
+
+    // Check if changes are adjacent or very close (within 2 positions)
+    var isAdjacent = next.fromB <= current.toB + 2;
+    if (isAdjacent) {
+      current = {
+        fromA: current.fromA,
+        toA: Math.max(current.toA, next.toA),
+        fromB: current.fromB,
+        toB: Math.max(current.toB, next.toB),
+        deleted: [].concat((0, _toConsumableArray2.default)(current.deleted), (0, _toConsumableArray2.default)(next.deleted)),
+        inserted: [].concat((0, _toConsumableArray2.default)(current.inserted), (0, _toConsumableArray2.default)(next.inserted))
+      };
+    } else {
+      optimized.push(current);
+      current = _objectSpread({}, next);
+    }
+  }
+  optimized.push(current);
+  return optimized;
+}

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

@@ -13,7 +13,7 @@ var _transform = require("@atlaskit/editor-prosemirror/transform");
 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 _calculateDiffDecorations = require("./calculateDiffDecorations");
+var _calculateDiffDecorations = require("./calculateDiff/calculateDiffDecorations");
 var _NodeViewSerializer = require("./NodeViewSerializer");
 var _scrollToActiveDecoration = require("./scrollToActiveDecoration");
 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; }
@@ -59,7 +59,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
           decorations: _view.DecorationSet.empty,
           isDisplayingChanges: false
         }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-          isInverted: false
+          isInverted: false,
+          diffType: 'inline'
         } : {});
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
@@ -67,7 +68,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
         var newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
-            var _newPluginState;
+            var _newPluginState, _newPluginState2;
             // Update the plugin state with the new metadata
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               isDisplayingChanges: true,
@@ -83,7 +84,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               activeIndexPos: (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined,
               api: api
             }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-              isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted
+              isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted,
+              diffType: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType
             } : {}));
             // Update the decorations
             newPluginState.decorations = decorations;
@@ -93,7 +95,8 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               isDisplayingChanges: false,
               activeIndex: undefined
             }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-              isInverted: false
+              isInverted: false,
+              diffType: 'inline'
             } : {});
           } 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

package/dist/es2019/pm-plugins/{calculateDiffDecorations.js → calculateDiff/calculateDiffDecorations.js}

@@ -6,13 +6,28 @@ 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';
-import { getAttrChangeRanges, stepIsValidAttrChange } from './decorations/utils/getAttrChangeRanges';
-import { getMarkChangeRanges } from './decorations/utils/getMarkChangeRanges';
-import { simplifySteps } from './simplifyChanges';
+import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
+import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
+import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';
+import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
+import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
+import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
+import { groupChangesByBlock } from './groupChangesByBlock';
+import { optimizeChanges } from './optimizeChanges';
+import { simplifySteps } from './simplifySteps';
+const getChanges = ({
+  changeset,
+  originalDoc,
+  steppedDoc,
+  diffType,
+  tr
+}) => {
+  if (diffType === 'block' && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
+  }
+  const changes = simplifyChanges(changeset.changes, tr.doc);
+  return optimizeChanges(changes);
+};
 const calculateNodesForBlockDecoration = ({
   doc,
   from,
@@ -44,43 +59,6 @@ const calculateNodesForBlockDecoration = ({
   });
   return decorations;
 };
-
-/**
- * Groups adjacent changes to reduce visual fragmentation in diffs.
- * Merges consecutive insertions and deletions that are close together.
- */
-function optimizeChanges(changes) {
-  if (changes.length <= 1) {
-    return changes;
-  }
-  const optimized = [];
-  let current = {
-    ...changes[0]
-  };
-  for (let i = 1; i < changes.length; i++) {
-    const next = changes[i];
-
-    // Check if changes are adjacent or very close (within 2 positions)
-    const isAdjacent = next.fromB <= current.toB + 2;
-    if (isAdjacent) {
-      current = {
-        fromA: current.fromA,
-        toA: Math.max(current.toA, next.toA),
-        fromB: current.fromB,
-        toB: Math.max(current.toB, next.toB),
-        deleted: [...current.deleted, ...next.deleted],
-        inserted: [...current.inserted, ...next.inserted]
-      };
-    } else {
-      optimized.push(current);
-      current = {
-        ...next
-      };
-    }
-  }
-  optimized.push(current);
-  return optimized;
-}
 const calculateDiffDecorationsInner = ({
   state,
   pluginState,
@@ -89,7 +67,8 @@ const calculateDiffDecorationsInner = ({
   intl,
   activeIndexPos,
   api,
-  isInverted = false
+  isInverted = false,
+  diffType = 'inline'
 }) => {
   const {
     originalDoc,
@@ -142,10 +121,15 @@ const calculateDiffDecorationsInner = ({
     }
   }
   const changeset = ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
-  const changes = simplifyChanges(changeset.changes, tr.doc);
-  const optimizedChanges = optimizeChanges(changes);
+  const changes = getChanges({
+    changeset,
+    originalDoc,
+    steppedDoc,
+    diffType,
+    tr
+  });
   const decorations = [];
-  optimizedChanges.forEach(change => {
+  changes.forEach(change => {
     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;
@@ -219,20 +203,22 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
   colorScheme,
   intl,
   activeIndexPos,
-  isInverted
+  isInverted,
+  diffType
 }], [{
   pluginState: lastPluginState,
   state: lastState,
   colorScheme: lastColorScheme,
   intl: lastIntl,
   activeIndexPos: lastActiveIndexPos,
-  isInverted: lastIsInverted
+  isInverted: lastIsInverted,
+  diffType: lastDiffType
 }]) => {
   var _ref2;
   const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     var _ref;
-    return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref !== void 0 ? _ref : false;
+    return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref !== void 0 ? _ref : false;
   }
   return (_ref2 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref2 !== void 0 ? _ref2 : false;
 });

package/dist/es2019/pm-plugins/calculateDiff/groupChangesByBlock.js

@@ -0,0 +1,54 @@
+/**
+ * Finds the position range of the top-level block (direct child of doc) that contains `pos`.
+ * Returns null if `pos` is at the doc boundary or outside the doc content.
+ */
+function getTopLevelBlockAt(doc, from, to) {
+  return {
+    from: doc.resolve(from).before(1),
+    to: doc.resolve(to).after(1)
+  };
+}
+
+/**
+ * Groups all changes that fall within the same top-level block (direct child of doc)
+ * and merges them into a single change spanning the full block in both old and new doc.
+ */
+export function groupChangesByBlock(changes, docA, docB) {
+  const groups = new Map();
+  for (const change of changes) {
+    const blockA = getTopLevelBlockAt(docA, change.fromA, change.toA);
+    const blockB = getTopLevelBlockAt(docB, change.fromB, change.toB);
+    if (!groups.has(blockB.from)) {
+      groups.set(blockB.from, {
+        fromB: blockB.from,
+        toB: blockB.to,
+        fromA: blockA ? blockA.from : change.fromA,
+        toA: blockA ? blockA.to : change.toA,
+        changed: []
+      });
+    }
+    const group = groups.get(blockB.from);
+    if (group) {
+      group.changed = [...group.changed, ...change.inserted, ...change.deleted];
+    }
+  }
+  return Array.from(groups.values()).sort((a, b) => a.fromB - b.fromB).map(({
+    fromA,
+    toA,
+    fromB,
+    toB,
+    changed
+  }) => ({
+    fromA,
+    toA,
+    fromB,
+    toB,
+    /**
+     * We add all changes (both deleted and inserted) as that will
+     * inform the calculateDiffDecorations function that changes should be rendered
+     * (even if the change is only one of the two).
+     */
+    deleted: changed,
+    inserted: changed
+  }));
+}

package/dist/es2019/pm-plugins/calculateDiff/optimizeChanges.js

@@ -0,0 +1,36 @@
+/**
+ * Groups adjacent changes to reduce visual fragmentation in diffs.
+ * Merges consecutive insertions and deletions that are close together.
+ */
+export function optimizeChanges(changes) {
+  if (changes.length <= 1) {
+    return changes;
+  }
+  const optimized = [];
+  let current = {
+    ...changes[0]
+  };
+  for (let i = 1; i < changes.length; i++) {
+    const next = changes[i];
+
+    // Check if changes are adjacent or very close (within 2 positions)
+    const isAdjacent = next.fromB <= current.toB + 2;
+    if (isAdjacent) {
+      current = {
+        fromA: current.fromA,
+        toA: Math.max(current.toA, next.toA),
+        fromB: current.fromB,
+        toB: Math.max(current.toB, next.toB),
+        deleted: [...current.deleted, ...next.deleted],
+        inserted: [...current.inserted, ...next.inserted]
+      };
+    } else {
+      optimized.push(current);
+      current = {
+        ...next
+      };
+    }
+  }
+  optimized.push(current);
+  return optimized;
+}

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

@@ -5,7 +5,7 @@ import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform'
 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 { calculateDiffDecorations } from './calculateDiffDecorations';
+import { calculateDiffDecorations } from './calculateDiff/calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
@@ -47,7 +47,8 @@ export const createPlugin = (config, getIntl, api) => {
           decorations: DecorationSet.empty,
           isDisplayingChanges: false,
           ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-            isInverted: false
+            isInverted: false,
+            diffType: 'inline'
           } : {})
         };
       },
@@ -56,7 +57,7 @@ export const createPlugin = (config, getIntl, api) => {
         let newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
-            var _newPluginState;
+            var _newPluginState, _newPluginState2;
             // Update the plugin state with the new metadata
             newPluginState = {
               ...currentPluginState,
@@ -74,7 +75,8 @@ export const createPlugin = (config, getIntl, api) => {
               activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined,
               api,
               ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-                isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted
+                isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted,
+                diffType: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType
               } : {})
             });
             // Update the decorations
@@ -87,11 +89,12 @@ export const createPlugin = (config, getIntl, api) => {
               isDisplayingChanges: false,
               activeIndex: undefined,
               /**
-               * Reset isInverted state when hiding diffs
+               * Reset isInverted & diffType state when hiding diffs
                * Otherwise this should persist for the diff-showing session
                */
               ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-                isInverted: false
+                isInverted: false,
+                diffType: 'inline'
               } : {})
             };
           } else if (((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') && fg('platform_editor_show_diff_scroll_navigation')) {

package/dist/esm/pm-plugins/{calculateDiffDecorations.js → calculateDiff/calculateDiffDecorations.js}

@@ -1,11 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 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) { _defineProperty(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
 import isEqual from 'lodash/isEqual';
 import memoizeOne from 'memoize-one';
@@ -14,21 +14,35 @@ 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';
-import { getAttrChangeRanges, stepIsValidAttrChange } from './decorations/utils/getAttrChangeRanges';
-import { getMarkChangeRanges } from './decorations/utils/getMarkChangeRanges';
-import { simplifySteps } from './simplifyChanges';
-var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(_ref) {
-  var doc = _ref.doc,
-    from = _ref.from,
-    to = _ref.to,
-    colorScheme = _ref.colorScheme,
-    _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
-    activeIndexPos = _ref.activeIndexPos;
+import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
+import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
+import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';
+import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
+import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
+import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
+import { groupChangesByBlock } from './groupChangesByBlock';
+import { optimizeChanges } from './optimizeChanges';
+import { simplifySteps } from './simplifySteps';
+var getChanges = function getChanges(_ref) {
+  var changeset = _ref.changeset,
+    originalDoc = _ref.originalDoc,
+    steppedDoc = _ref.steppedDoc,
+    diffType = _ref.diffType,
+    tr = _ref.tr;
+  if (diffType === 'block' && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
+  }
+  var changes = simplifyChanges(changeset.changes, tr.doc);
+  return optimizeChanges(changes);
+};
+var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration(_ref2) {
+  var doc = _ref2.doc,
+    from = _ref2.from,
+    to = _ref2.to,
+    colorScheme = _ref2.colorScheme,
+    _ref2$isInserted = _ref2.isInserted,
+    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
+    activeIndexPos = _ref2.activeIndexPos;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
@@ -52,49 +66,18 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
   });
   return decorations;
 };
-
-/**
- * Groups adjacent changes to reduce visual fragmentation in diffs.
- * Merges consecutive insertions and deletions that are close together.
- */
-function optimizeChanges(changes) {
-  if (changes.length <= 1) {
-    return changes;
-  }
-  var optimized = [];
-  var current = _objectSpread({}, changes[0]);
-  for (var i = 1; i < changes.length; i++) {
-    var next = changes[i];
-
-    // Check if changes are adjacent or very close (within 2 positions)
-    var isAdjacent = next.fromB <= current.toB + 2;
-    if (isAdjacent) {
-      current = {
-        fromA: current.fromA,
-        toA: Math.max(current.toA, next.toA),
-        fromB: current.fromB,
-        toB: Math.max(current.toB, next.toB),
-        deleted: [].concat(_toConsumableArray(current.deleted), _toConsumableArray(next.deleted)),
-        inserted: [].concat(_toConsumableArray(current.inserted), _toConsumableArray(next.inserted))
-      };
-    } else {
-      optimized.push(current);
-      current = _objectSpread({}, next);
-    }
-  }
-  optimized.push(current);
-  return optimized;
-}
-var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2) {
-  var state = _ref2.state,
-    pluginState = _ref2.pluginState,
-    nodeViewSerializer = _ref2.nodeViewSerializer,
-    colorScheme = _ref2.colorScheme,
-    intl = _ref2.intl,
-    activeIndexPos = _ref2.activeIndexPos,
-    api = _ref2.api,
-    _ref2$isInverted = _ref2.isInverted,
-    isInverted = _ref2$isInverted === void 0 ? false : _ref2$isInverted;
+var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3) {
+  var state = _ref3.state,
+    pluginState = _ref3.pluginState,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    intl = _ref3.intl,
+    activeIndexPos = _ref3.activeIndexPos,
+    api = _ref3.api,
+    _ref3$isInverted = _ref3.isInverted,
+    isInverted = _ref3$isInverted === void 0 ? false : _ref3$isInverted,
+    _ref3$diffType = _ref3.diffType,
+    diffType = _ref3$diffType === void 0 ? 'inline' : _ref3$diffType;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -151,10 +134,15 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     }
   }
   var changeset = ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
-  var changes = simplifyChanges(changeset.changes, tr.doc);
-  var optimizedChanges = optimizeChanges(changes);
+  var changes = getChanges({
+    changeset: changeset,
+    originalDoc: originalDoc,
+    steppedDoc: steppedDoc,
+    diffType: diffType,
+    tr: tr
+  });
   var decorations = [];
-  optimizedChanges.forEach(function (change) {
+  changes.forEach(function (change) {
     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;
@@ -220,28 +208,30 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
 };
 export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
-function (_ref3, _ref4) {
-  var _ref8;
-  var _ref5 = _slicedToArray(_ref3, 1),
-    _ref5$ = _ref5[0],
-    pluginState = _ref5$.pluginState,
-    state = _ref5$.state,
-    colorScheme = _ref5$.colorScheme,
-    intl = _ref5$.intl,
-    activeIndexPos = _ref5$.activeIndexPos,
-    isInverted = _ref5$.isInverted;
+function (_ref4, _ref5) {
+  var _ref9;
   var _ref6 = _slicedToArray(_ref4, 1),
     _ref6$ = _ref6[0],
-    lastPluginState = _ref6$.pluginState,
-    lastState = _ref6$.state,
-    lastColorScheme = _ref6$.colorScheme,
-    lastIntl = _ref6$.intl,
-    lastActiveIndexPos = _ref6$.activeIndexPos,
-    lastIsInverted = _ref6$.isInverted;
+    pluginState = _ref6$.pluginState,
+    state = _ref6$.state,
+    colorScheme = _ref6$.colorScheme,
+    intl = _ref6$.intl,
+    activeIndexPos = _ref6$.activeIndexPos,
+    isInverted = _ref6$.isInverted,
+    diffType = _ref6$.diffType;
+  var _ref7 = _slicedToArray(_ref5, 1),
+    _ref7$ = _ref7[0],
+    lastPluginState = _ref7$.pluginState,
+    lastState = _ref7$.state,
+    lastColorScheme = _ref7$.colorScheme,
+    lastIntl = _ref7$.intl,
+    lastActiveIndexPos = _ref7$.activeIndexPos,
+    lastIsInverted = _ref7$.isInverted,
+    lastDiffType = _ref7$.diffType;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    var _ref7;
-    return (_ref7 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref7 !== void 0 ? _ref7 : false;
+    var _ref8;
+    return (_ref8 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref8 !== void 0 ? _ref8 : false;
   }
-  return (_ref8 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref8 !== void 0 ? _ref8 : false;
+  return (_ref9 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref9 !== void 0 ? _ref9 : false;
 });

package/dist/esm/pm-plugins/calculateDiff/groupChangesByBlock.js

@@ -0,0 +1,70 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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; }
+/**
+ * Finds the position range of the top-level block (direct child of doc) that contains `pos`.
+ * Returns null if `pos` is at the doc boundary or outside the doc content.
+ */
+function getTopLevelBlockAt(doc, from, to) {
+  return {
+    from: doc.resolve(from).before(1),
+    to: doc.resolve(to).after(1)
+  };
+}
+
+/**
+ * Groups all changes that fall within the same top-level block (direct child of doc)
+ * and merges them into a single change spanning the full block in both old and new doc.
+ */
+export function groupChangesByBlock(changes, docA, docB) {
+  var groups = new Map();
+  var _iterator = _createForOfIteratorHelper(changes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var change = _step.value;
+      var blockA = getTopLevelBlockAt(docA, change.fromA, change.toA);
+      var blockB = getTopLevelBlockAt(docB, change.fromB, change.toB);
+      if (!groups.has(blockB.from)) {
+        groups.set(blockB.from, {
+          fromB: blockB.from,
+          toB: blockB.to,
+          fromA: blockA ? blockA.from : change.fromA,
+          toA: blockA ? blockA.to : change.toA,
+          changed: []
+        });
+      }
+      var group = groups.get(blockB.from);
+      if (group) {
+        group.changed = [].concat(_toConsumableArray(group.changed), _toConsumableArray(change.inserted), _toConsumableArray(change.deleted));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return Array.from(groups.values()).sort(function (a, b) {
+    return a.fromB - b.fromB;
+  }).map(function (_ref) {
+    var fromA = _ref.fromA,
+      toA = _ref.toA,
+      fromB = _ref.fromB,
+      toB = _ref.toB,
+      changed = _ref.changed;
+    return {
+      fromA: fromA,
+      toA: toA,
+      fromB: fromB,
+      toB: toB,
+      /**
+       * We add all changes (both deleted and inserted) as that will
+       * inform the calculateDiffDecorations function that changes should be rendered
+       * (even if the change is only one of the two).
+       */
+      deleted: changed,
+      inserted: changed
+    };
+  });
+}

package/dist/esm/pm-plugins/calculateDiff/optimizeChanges.js

@@ -0,0 +1,36 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+/**
+ * Groups adjacent changes to reduce visual fragmentation in diffs.
+ * Merges consecutive insertions and deletions that are close together.
+ */
+export function optimizeChanges(changes) {
+  if (changes.length <= 1) {
+    return changes;
+  }
+  var optimized = [];
+  var current = _objectSpread({}, changes[0]);
+  for (var i = 1; i < changes.length; i++) {
+    var next = changes[i];
+
+    // Check if changes are adjacent or very close (within 2 positions)
+    var isAdjacent = next.fromB <= current.toB + 2;
+    if (isAdjacent) {
+      current = {
+        fromA: current.fromA,
+        toA: Math.max(current.toA, next.toA),
+        fromB: current.fromB,
+        toB: Math.max(current.toB, next.toB),
+        deleted: [].concat(_toConsumableArray(current.deleted), _toConsumableArray(next.deleted)),
+        inserted: [].concat(_toConsumableArray(current.inserted), _toConsumableArray(next.inserted))
+      };
+    } else {
+      optimized.push(current);
+      current = _objectSpread({}, next);
+    }
+  }
+  optimized.push(current);
+  return optimized;
+}

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

@@ -8,7 +8,7 @@ import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform'
 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 { calculateDiffDecorations } from './calculateDiffDecorations';
+import { calculateDiffDecorations } from './calculateDiff/calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
@@ -52,7 +52,8 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
           decorations: DecorationSet.empty,
           isDisplayingChanges: false
         }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-          isInverted: false
+          isInverted: false,
+          diffType: 'inline'
         } : {});
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
@@ -60,7 +61,7 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
         var newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
-            var _newPluginState;
+            var _newPluginState, _newPluginState2;
             // Update the plugin state with the new metadata
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               isDisplayingChanges: true,
@@ -76,7 +77,8 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
               activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined,
               api: api
             }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-              isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted
+              isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted,
+              diffType: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType
             } : {}));
             // Update the decorations
             newPluginState.decorations = decorations;
@@ -86,7 +88,8 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
               isDisplayingChanges: false,
               activeIndex: undefined
             }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-              isInverted: false
+              isInverted: false,
+              diffType: 'inline'
             } : {});
           } else if (((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') && fg('platform_editor_show_diff_scroll_navigation')) {
             // Update the active index in plugin state and recalculate decorations

package/dist/types/pm-plugins/{calculateDiffDecorations.d.ts → calculateDiff/calculateDiffDecorations.d.ts}

@@ -1,11 +1,11 @@
 import { type MemoizedFn } from 'memoize-one';
 import type { IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { ColorScheme, ShowDiffPlugin } from '../showDiffPluginType';
-import type { ShowDiffPluginState } from './main';
-import type { NodeViewSerializer } from './NodeViewSerializer';
+import type { ColorScheme, ShowDiffPlugin } from '../../showDiffPluginType';
+import type { ShowDiffPluginState } from '../main';
+import type { NodeViewSerializer } from '../NodeViewSerializer';
 export declare const calculateDiffDecorations: MemoizedFn<({ state, pluginState, nodeViewSerializer, colorScheme, intl, activeIndexPos, api, }: {
     activeIndexPos?: {
         from: number;

package/dist/types/pm-plugins/calculateDiff/groupChangesByBlock.d.ts

@@ -0,0 +1,7 @@
+import { type Change } from 'prosemirror-changeset';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Groups all changes that fall within the same top-level block (direct child of doc)
+ * and merges them into a single change spanning the full block in both old and new doc.
+ */
+export declare function groupChangesByBlock(changes: readonly Change[], docA: PMNode, docB: PMNode): Change[];

package/dist/types/pm-plugins/calculateDiff/optimizeChanges.d.ts

@@ -0,0 +1,6 @@
+import type { Change } from 'prosemirror-changeset';
+/**
+ * Groups adjacent changes to reduce visual fragmentation in diffs.
+ * Merges consecutive insertions and deletions that are close together.
+ */
+export declare function optimizeChanges(changes: Change[]): Change[];

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

@@ -6,7 +6,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { type DiffParams, type ShowDiffPlugin } from '../showDiffPluginType';
+import { type DiffParams, type DiffType, type ShowDiffPlugin } from '../showDiffPluginType';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
 export type ShowDiffPluginState = {
     activeIndex?: number;
@@ -15,6 +15,7 @@ export type ShowDiffPluginState = {
         to: number;
     };
     decorations: DecorationSet;
+    diffType?: DiffType;
     isDisplayingChanges: boolean;
     isInverted?: boolean;
     originalDoc: PMNode | undefined;

package/dist/types/showDiffPluginType.d.ts

@@ -5,6 +5,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
 export type ColorScheme = 'standard' | 'traditional';
+export type DiffType = 'inline' | 'block';
 export type DiffParams = {
     /**
      * Color scheme to use for displaying diffs.
@@ -19,6 +20,7 @@ export type DiffParams = {
     steps: StepJson[];
 };
 export type PMDiffParams = {
+    diffType?: DiffType;
     isInverted?: boolean;
     originalDoc: Node;
     /**

package/dist/types-ts4.5/pm-plugins/{calculateDiffDecorations.d.ts → calculateDiff/calculateDiffDecorations.d.ts}

@@ -1,11 +1,11 @@
 import { type MemoizedFn } from 'memoize-one';
 import type { IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { ColorScheme, ShowDiffPlugin } from '../showDiffPluginType';
-import type { ShowDiffPluginState } from './main';
-import type { NodeViewSerializer } from './NodeViewSerializer';
+import type { ColorScheme, ShowDiffPlugin } from '../../showDiffPluginType';
+import type { ShowDiffPluginState } from '../main';
+import type { NodeViewSerializer } from '../NodeViewSerializer';
 export declare const calculateDiffDecorations: MemoizedFn<({ state, pluginState, nodeViewSerializer, colorScheme, intl, activeIndexPos, api, }: {
     activeIndexPos?: {
         from: number;

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

@@ -0,0 +1,7 @@
+import { type Change } from 'prosemirror-changeset';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * Groups all changes that fall within the same top-level block (direct child of doc)
+ * and merges them into a single change spanning the full block in both old and new doc.
+ */
+export declare function groupChangesByBlock(changes: readonly Change[], docA: PMNode, docB: PMNode): Change[];

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

@@ -0,0 +1,6 @@
+import type { Change } from 'prosemirror-changeset';
+/**
+ * Groups adjacent changes to reduce visual fragmentation in diffs.
+ * Merges consecutive insertions and deletions that are close together.
+ */
+export declare function optimizeChanges(changes: Change[]): Change[];

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

@@ -6,7 +6,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { type DiffParams, type ShowDiffPlugin } from '../showDiffPluginType';
+import { type DiffParams, type DiffType, type ShowDiffPlugin } from '../showDiffPluginType';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
 export type ShowDiffPluginState = {
     activeIndex?: number;
@@ -15,6 +15,7 @@ export type ShowDiffPluginState = {
         to: number;
     };
     decorations: DecorationSet;
+    diffType?: DiffType;
     isDisplayingChanges: boolean;
     isInverted?: boolean;
     originalDoc: PMNode | undefined;

package/dist/types-ts4.5/showDiffPluginType.d.ts

@@ -5,6 +5,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
 export type ColorScheme = 'standard' | 'traditional';
+export type DiffType = 'inline' | 'block';
 export type DiffParams = {
     /**
      * Color scheme to use for displaying diffs.
@@ -19,6 +20,7 @@ export type DiffParams = {
     steps: StepJson[];
 };
 export type PMDiffParams = {
+    diffType?: DiffType;
     isInverted?: boolean;
     originalDoc: Node;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "6.1.9",
+	"version": "6.2.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,8 +33,8 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^44.0.0",
-		"@atlaskit/tokens": "^11.1.0",
+		"@atlaskit/tmp-editor-statsig": "^45.1.0",
+		"@atlaskit/tokens": "^11.2.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
@@ -45,7 +45,7 @@
 		"@atlassian/content-reconciliation": "^0.1.3506"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.7.0",
+		"@atlaskit/editor-common": "^112.9.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {