@atlaskit/editor-plugin-show-diff 6.2.18 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 6.3.0
+
+### Minor Changes
+
+- [`5d32941f15d07`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5d32941f15d07) -
+  EDITOR-5949: Change diffing logic to support closest block diffs + preliminary support for row
+  diffs.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.2.19
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.2.18
 
 ### Patch Changes

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calculateDiffDecorations = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _prosemirrorChangeset = require("prosemirror-changeset");
@@ -21,6 +21,7 @@ var _createInlineChangedDecoration = require("../decorations/createInlineChanged
 var _createNodeChangedDecorationWidget = require("../decorations/createNodeChangedDecorationWidget");
 var _getAttrChangeRanges = require("../decorations/utils/getAttrChangeRanges");
 var _getMarkChangeRanges = require("../decorations/utils/getMarkChangeRanges");
+var _diffBySteps = require("./diffBySteps");
 var _groupChangesByBlock = require("./groupChangesByBlock");
 var _optimizeChanges = require("./optimizeChanges");
 var _simplifySteps = require("./simplifySteps");
@@ -34,9 +35,16 @@ var getChanges = function getChanges(_ref) {
     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);
+    tr = _ref.tr,
+    steps = _ref.steps;
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (diffType === 'step') {
+      return (0, _diffBySteps.diffBySteps)(originalDoc, steps);
+    }
+    if (diffType === 'block') {
+      return (0, _groupChangesByBlock.groupChangesByBlock)(changeset.changes, originalDoc, steppedDoc);
+    }
+    return (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
   }
   var changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
   return (0, _optimizeChanges.optimizeChanges)(changes);
@@ -55,7 +63,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     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)({
+      var blockChangedDecorations = (0, _createBlockChangedDecoration.createBlockChangedDecoration)({
         change: {
           from: pos,
           to: nodeEnd,
@@ -65,8 +73,8 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         isInserted: isInserted,
         isActive: isActive
       });
-      if (decoration) {
-        decorations.push(decoration);
+      if (blockChangedDecorations.length) {
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)(blockChangedDecorations));
       }
     }
   });
@@ -145,7 +153,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     originalDoc: originalDoc,
     steppedDoc: steppedDoc,
     diffType: diffType,
-    tr: tr
+    tr: tr,
+    steps: steps
   });
   var decorations = [];
   changes.forEach(function (change) {
@@ -182,7 +191,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         intl: intl,
         activeIndexPos: activeIndexPos
       }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-        isInserted: !isInserted
+        isInserted: !isInserted,
+        diffType: diffType
       }));
       if (decoration) {
         decorations.push.apply(decorations, (0, _toConsumableArray2.default)(decoration));

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

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.diffBySteps = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+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; }
+var mapPosition = function mapPosition(mapping, pos) {
+  return mapping.map(pos);
+};
+var createMapping = function createMapping(maps) {
+  var mapping = new _transform.Mapping();
+  var _iterator = _createForOfIteratorHelper(maps),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var map = _step.value;
+      mapping.appendMap(map);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return mapping;
+};
+var createSpans = function createSpans(length) {
+  return length > 0 ? [{
+    length: length,
+    data: null
+  }] : [];
+};
+var mergeOverlappingByNewDocRange = function mergeOverlappingByNewDocRange(changes) {
+  if (changes.length <= 1) {
+    return changes;
+  }
+  var sortedChanges = (0, _toConsumableArray2.default)(changes).sort(function (left, right) {
+    return left.fromB - right.fromB;
+  });
+  var merged = [];
+  var current = _objectSpread({}, sortedChanges[0]);
+  for (var i = 1; i < sortedChanges.length; i++) {
+    var next = sortedChanges[i];
+    var isOverlapping = next.fromB <= current.toB;
+    if (isOverlapping) {
+      current = {
+        fromA: Math.min(current.fromA, next.fromA),
+        toA: Math.max(current.toA, next.toA),
+        fromB: Math.min(current.fromB, next.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 {
+      merged.push(current);
+      current = _objectSpread({}, next);
+    }
+  }
+  merged.push(current);
+  return merged;
+};
+var diffBySteps = exports.diffBySteps = function diffBySteps(originalDoc, steps) {
+  var changes = [];
+  var currentDoc = originalDoc;
+  var successfulStepMaps = [];
+  var rangedSteps = [];
+  var _iterator2 = _createForOfIteratorHelper(steps),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var step = _step2.value;
+      var result = step.apply(currentDoc);
+      if (result.failed !== null || !result.doc) {
+        continue;
+      }
+      var stepMap = step.getMap();
+      var rangeStep = step;
+      if (typeof rangeStep.from === 'number' && typeof rangeStep.to === 'number') {
+        rangedSteps.push({
+          from: rangeStep.from,
+          to: rangeStep.to,
+          mapIndex: successfulStepMaps.length,
+          stepMap: stepMap
+        });
+      }
+      successfulStepMaps.push(stepMap);
+      currentDoc = result.doc;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  for (var _i = 0, _rangedSteps = rangedSteps; _i < _rangedSteps.length; _i++) {
+    var rangedStep = _rangedSteps[_i];
+    // Mapping from original -> doc before this step.
+    var originalToBeforeStep = createMapping(successfulStepMaps.slice(0, rangedStep.mapIndex));
+    var beforeStepToOriginal = originalToBeforeStep.invert();
+    var fromA = mapPosition(beforeStepToOriginal, rangedStep.from);
+    var toA = mapPosition(beforeStepToOriginal, rangedStep.to);
+
+    // Map the step range into final steppedDoc coordinates.
+    var fromAfterStep = rangedStep.stepMap.map(rangedStep.from, -1);
+    var toAfterStep = rangedStep.stepMap.map(rangedStep.to, 1);
+    var afterStepToFinal = createMapping(successfulStepMaps.slice(rangedStep.mapIndex + 1));
+    var fromB = mapPosition(afterStepToFinal, fromAfterStep);
+    var toB = mapPosition(afterStepToFinal, toAfterStep);
+    changes.push({
+      fromA: fromA,
+      toA: toA,
+      fromB: fromB,
+      toB: toB,
+      deleted: createSpans(Math.max(0, toA - fromA)),
+      inserted: createSpans(Math.max(0, toB - fromB))
+    });
+  }
+  return mergeOverlappingByNewDocRange(changes);
+};

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createBlockChangedDecoration = void 0;
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -27,12 +28,22 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   var isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
   // Handle table separately to avoid border issues
-  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
+  'tableRow', 'paragraph',
   // Paragraph and heading nodes do not need special styling
   'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
     // Layout nodes do not need special styling
     return undefined;
   }
+  if (['tableCell', 'tableHeader'].includes(nodeName)) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      // This is used for positioning the cell overlay widget decorations
+      return (0, _lazyNodeView.convertToInlineCss)({
+        position: 'relative'
+      });
+    }
+    // When gate is off, it should return undefined as above
+    return undefined;
+  }
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
@@ -98,6 +109,17 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
     _ref2$isActive = _ref2.isActive,
     isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
+  var decorations = [];
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && ['tableCell', 'tableHeader'].includes(change.name)) {
+    var cellOverlay = document.createElement('div');
+    var cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? _traditional.traditionalAddedCellOverlayStyle : _standard.addedCellOverlayStyle : colorScheme === 'traditional' ? _traditional.deletedTraditionalCellOverlayStyle : _standard.deletedCellOverlayStyle;
+    cellOverlay.setAttribute('style', cellOverlayStyle);
+    decorations.push(
+    // change.to - 1 to position the overlay inside the end of the cell
+    _view.Decoration.widget(change.to - 1, cellOverlay, {
+      key: "diff-widget-cell-overlay-".concat(change.to)
+    }));
+  }
   var style = getBlockNodeStyle({
     nodeName: change.name,
     colorScheme: colorScheme,
@@ -114,24 +136,24 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
   var className = getNodeClass(change.name);
   if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
     if (style || className) {
-      return _view.Decoration.node(change.from, change.to, {
+      decorations.push(_view.Decoration.node(change.from, change.to, {
         style: style,
         'data-testid': 'show-diff-changed-decoration-node',
         class: className
       }, {
         key: 'diff-block',
         nodeName: change.name
-      });
-    } else {
-      return undefined;
+      }));
     }
+  } else {
+    decorations.push(_view.Decoration.node(change.from, change.to, {
+      style: style,
+      'data-testid': 'show-diff-changed-decoration-node',
+      class: className
+    }, {
+      key: 'diff-block',
+      nodeName: change.name
+    }));
   }
-  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
-  });
+  return decorations;
 };

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

@@ -20,7 +20,10 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 /**
  * Extracts information about deleted table rows from a change
  */
-var extractChangedRows = function extractChangedRows(change, originalDoc, newDoc) {
+var extractChangedRows = function extractChangedRows(_ref) {
+  var change = _ref.change,
+    originalDoc = _ref.originalDoc,
+    newDoc = _ref.newDoc;
   var changedRows = [];
 
   // Find the table in the original document
@@ -42,7 +45,6 @@ var extractChangedRows = function extractChangedRows(change, originalDoc, newDoc
     return changedRows;
   }
   var newTableMap = _tableMap.TableMap.get(tableNew.node);
-
   // If no rows were changed, return empty
   if (oldTableMap.height <= newTableMap.height ||
   // For now ignore if there are column deletions as well
@@ -61,7 +63,7 @@ var extractChangedRows = function extractChangedRows(change, originalDoc, newDoc
 
     // Check if this row overlaps with the deletion range
     var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
-    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && !isEmptyRow(rowNode)) {
+    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isEmptyRow(rowNode))) {
       var startOfRow = newTableMap.mapByRow.slice().reverse().find(function (row) {
         return row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos;
       });
@@ -132,7 +134,7 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
       var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
-        if (isInserted && nodeView instanceof HTMLElement && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (nodeView instanceof HTMLElement && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
           var overlay = document.createElement('span');
           var overlayStyle = colorScheme === 'traditional' ? isInserted ? _traditional.traditionalAddedCellOverlayStyle : _traditional.deletedTraditionalCellOverlayStyle : isInserted ? _standard.addedCellOverlayStyle : _standard.deletedCellOverlayStyle;
           overlay.setAttribute('style', overlayStyle);
@@ -154,7 +156,10 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
 /**
  * Expands a diff to include whole changed rows when table rows are affected
  */
-var expandDiffForChangedRows = function expandDiffForChangedRows(changes, originalDoc, newDoc) {
+var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
+  var changes = _ref2.changes,
+    originalDoc = _ref2.originalDoc,
+    newDoc = _ref2.newDoc;
   var rowInfo = [];
   var _iterator = _createForOfIteratorHelper(changes),
     _step;
@@ -162,7 +167,11 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(changes, origin
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var change = _step.value;
       // Check if this change affects table content
-      var changedRows = extractChangedRows(change, originalDoc, newDoc);
+      var changedRows = extractChangedRows({
+        change: change,
+        originalDoc: originalDoc,
+        newDoc: newDoc
+      });
       if (changedRows.length > 0) {
         rowInfo.push.apply(rowInfo, (0, _toConsumableArray2.default)(changedRows));
       }
@@ -178,18 +187,22 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(changes, origin
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref) {
-  var changes = _ref.changes,
-    originalDoc = _ref.originalDoc,
-    newDoc = _ref.newDoc,
-    nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme,
-    _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? false : _ref$isInserted;
+var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref3) {
+  var changes = _ref3.changes,
+    originalDoc = _ref3.originalDoc,
+    newDoc = _ref3.newDoc,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    _ref3$isInserted = _ref3.isInserted,
+    isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted;
   // First, expand the changes to include complete deleted rows
-  var changedRows = expandDiffForChangedRows(changes.filter(function (change) {
-    return change.deleted.length > 0;
-  }), originalDoc, newDoc);
+  var changedRows = expandDiffForChangedRows({
+    changes: changes.filter(function (change) {
+      return change.deleted.length > 0;
+    }),
+    originalDoc: originalDoc,
+    newDoc: newDoc
+  });
   return changedRows.map(function (changedRow) {
     var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted);
 

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

@@ -12,6 +12,7 @@ import { createInlineChangedDecoration } from '../decorations/createInlineChange
 import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
+import { diffBySteps } from './diffBySteps';
 import { groupChangesByBlock } from './groupChangesByBlock';
 import { optimizeChanges } from './optimizeChanges';
 import { simplifySteps } from './simplifySteps';
@@ -20,10 +21,17 @@ const getChanges = ({
   originalDoc,
   steppedDoc,
   diffType,
-  tr
+  tr,
+  steps
 }) => {
-  if (diffType === 'block' && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (diffType === 'step') {
+      return diffBySteps(originalDoc, steps);
+    }
+    if (diffType === 'block') {
+      return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
+    }
+    return simplifyChanges(changeset.changes, tr.doc);
   }
   const changes = simplifyChanges(changeset.changes, tr.doc);
   return optimizeChanges(changes);
@@ -42,7 +50,7 @@ const calculateNodesForBlockDecoration = ({
     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({
+      const blockChangedDecorations = createBlockChangedDecoration({
         change: {
           from: pos,
           to: nodeEnd,
@@ -52,8 +60,8 @@ const calculateNodesForBlockDecoration = ({
         isInserted,
         isActive
       });
-      if (decoration) {
-        decorations.push(decoration);
+      if (blockChangedDecorations.length) {
+        decorations.push(...blockChangedDecorations);
       }
     }
   });
@@ -126,7 +134,8 @@ const calculateDiffDecorationsInner = ({
     originalDoc,
     steppedDoc,
     diffType,
-    tr
+    tr,
+    steps
   });
   const decorations = [];
   changes.forEach(change => {
@@ -164,7 +173,8 @@ const calculateDiffDecorationsInner = ({
         intl,
         activeIndexPos,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-          isInserted: !isInserted
+          isInserted: !isInserted,
+          diffType
         })
       });
       if (decoration) {

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

@@ -0,0 +1,91 @@
+import { Mapping } from '@atlaskit/editor-prosemirror/transform';
+const mapPosition = (mapping, pos) => mapping.map(pos);
+const createMapping = maps => {
+  const mapping = new Mapping();
+  for (const map of maps) {
+    mapping.appendMap(map);
+  }
+  return mapping;
+};
+const createSpans = length => length > 0 ? [{
+  length,
+  data: null
+}] : [];
+const mergeOverlappingByNewDocRange = changes => {
+  if (changes.length <= 1) {
+    return changes;
+  }
+  const sortedChanges = [...changes].sort((left, right) => left.fromB - right.fromB);
+  const merged = [];
+  let current = {
+    ...sortedChanges[0]
+  };
+  for (let i = 1; i < sortedChanges.length; i++) {
+    const next = sortedChanges[i];
+    const isOverlapping = next.fromB <= current.toB;
+    if (isOverlapping) {
+      current = {
+        fromA: Math.min(current.fromA, next.fromA),
+        toA: Math.max(current.toA, next.toA),
+        fromB: Math.min(current.fromB, next.fromB),
+        toB: Math.max(current.toB, next.toB),
+        deleted: [...current.deleted, ...next.deleted],
+        inserted: [...current.inserted, ...next.inserted]
+      };
+    } else {
+      merged.push(current);
+      current = {
+        ...next
+      };
+    }
+  }
+  merged.push(current);
+  return merged;
+};
+export const diffBySteps = (originalDoc, steps) => {
+  const changes = [];
+  let currentDoc = originalDoc;
+  const successfulStepMaps = [];
+  const rangedSteps = [];
+  for (const step of steps) {
+    const result = step.apply(currentDoc);
+    if (result.failed !== null || !result.doc) {
+      continue;
+    }
+    const stepMap = step.getMap();
+    const rangeStep = step;
+    if (typeof rangeStep.from === 'number' && typeof rangeStep.to === 'number') {
+      rangedSteps.push({
+        from: rangeStep.from,
+        to: rangeStep.to,
+        mapIndex: successfulStepMaps.length,
+        stepMap
+      });
+    }
+    successfulStepMaps.push(stepMap);
+    currentDoc = result.doc;
+  }
+  for (const rangedStep of rangedSteps) {
+    // Mapping from original -> doc before this step.
+    const originalToBeforeStep = createMapping(successfulStepMaps.slice(0, rangedStep.mapIndex));
+    const beforeStepToOriginal = originalToBeforeStep.invert();
+    const fromA = mapPosition(beforeStepToOriginal, rangedStep.from);
+    const toA = mapPosition(beforeStepToOriginal, rangedStep.to);
+
+    // Map the step range into final steppedDoc coordinates.
+    const fromAfterStep = rangedStep.stepMap.map(rangedStep.from, -1);
+    const toAfterStep = rangedStep.stepMap.map(rangedStep.to, 1);
+    const afterStepToFinal = createMapping(successfulStepMaps.slice(rangedStep.mapIndex + 1));
+    const fromB = mapPosition(afterStepToFinal, fromAfterStep);
+    const toB = mapPosition(afterStepToFinal, toAfterStep);
+    changes.push({
+      fromA,
+      toA,
+      fromB,
+      toB,
+      deleted: createSpans(Math.max(0, toA - fromA)),
+      inserted: createSpans(Math.max(0, toB - fromB))
+    });
+  }
+  return mergeOverlappingByNewDocRange(changes);
+};

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

@@ -1,8 +1,9 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariable, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
+import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
+import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariable, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
 const getNodeClass = name => {
   switch (name) {
     case 'extension':
@@ -20,12 +21,22 @@ const getBlockNodeStyle = ({
   const isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
   // Handle table separately to avoid border issues
-  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
+  'tableRow', 'paragraph',
   // Paragraph and heading nodes do not need special styling
   'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
     // Layout nodes do not need special styling
     return undefined;
   }
+  if (['tableCell', 'tableHeader'].includes(nodeName)) {
+    if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      // This is used for positioning the cell overlay widget decorations
+      return convertToInlineCss({
+        position: 'relative'
+      });
+    }
+    // When gate is off, it should return undefined as above
+    return undefined;
+  }
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
@@ -90,6 +101,17 @@ export const createBlockChangedDecoration = ({
   isInserted = true,
   isActive = false
 }) => {
+  const decorations = [];
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && ['tableCell', 'tableHeader'].includes(change.name)) {
+    const cellOverlay = document.createElement('div');
+    const cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? traditionalAddedCellOverlayStyle : addedCellOverlayStyle : colorScheme === 'traditional' ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
+    cellOverlay.setAttribute('style', cellOverlayStyle);
+    decorations.push(
+    // change.to - 1 to position the overlay inside the end of the cell
+    Decoration.widget(change.to - 1, cellOverlay, {
+      key: `diff-widget-cell-overlay-${change.to}`
+    }));
+  }
   let style = getBlockNodeStyle({
     nodeName: change.name,
     colorScheme,
@@ -106,24 +128,24 @@ export const createBlockChangedDecoration = ({
   const className = getNodeClass(change.name);
   if (fg('platform_editor_show_diff_scroll_navigation')) {
     if (style || className) {
-      return Decoration.node(change.from, change.to, {
+      decorations.push(Decoration.node(change.from, change.to, {
         style: style,
         'data-testid': 'show-diff-changed-decoration-node',
         class: className
       }, {
         key: 'diff-block',
         nodeName: change.name
-      });
-    } else {
-      return undefined;
+      }));
     }
+  } else {
+    decorations.push(Decoration.node(change.from, change.to, {
+      style,
+      'data-testid': 'show-diff-changed-decoration-node',
+      class: className
+    }, {
+      key: 'diff-block',
+      nodeName: change.name
+    }));
   }
-  return Decoration.node(change.from, change.to, {
-    style,
-    'data-testid': 'show-diff-changed-decoration-node',
-    class: className
-  }, {
-    key: 'diff-block',
-    nodeName: change.name
-  });
+  return decorations;
 };

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

@@ -9,7 +9,11 @@ import { findSafeInsertPos } from './utils/findSafeInsertPos';
 /**
  * Extracts information about deleted table rows from a change
  */
-const extractChangedRows = (change, originalDoc, newDoc) => {
+const extractChangedRows = ({
+  change,
+  originalDoc,
+  newDoc
+}) => {
   const changedRows = [];
 
   // Find the table in the original document
@@ -27,7 +31,6 @@ const extractChangedRows = (change, originalDoc, newDoc) => {
     return changedRows;
   }
   const newTableMap = TableMap.get(tableNew.node);
-
   // If no rows were changed, return empty
   if (oldTableMap.height <= newTableMap.height ||
   // For now ignore if there are column deletions as well
@@ -46,7 +49,7 @@ const extractChangedRows = (change, originalDoc, newDoc) => {
 
     // Check if this row overlaps with the deletion range
     const rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
-    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && !isEmptyRow(rowNode)) {
+    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isEmptyRow(rowNode))) {
       const startOfRow = newTableMap.mapByRow.slice().reverse().find(row => row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos);
       changedRows.push({
         rowIndex,
@@ -113,7 +116,7 @@ const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserte
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
       const nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
-        if (isInserted && nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
           const overlay = document.createElement('span');
           const overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
           overlay.setAttribute('style', overlayStyle);
@@ -135,11 +138,19 @@ const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserte
 /**
  * Expands a diff to include whole changed rows when table rows are affected
  */
-const expandDiffForChangedRows = (changes, originalDoc, newDoc) => {
+const expandDiffForChangedRows = ({
+  changes,
+  originalDoc,
+  newDoc
+}) => {
   const rowInfo = [];
   for (const change of changes) {
     // Check if this change affects table content
-    const changedRows = extractChangedRows(change, originalDoc, newDoc);
+    const changedRows = extractChangedRows({
+      change,
+      originalDoc,
+      newDoc
+    });
     if (changedRows.length > 0) {
       rowInfo.push(...changedRows);
     }
@@ -159,7 +170,11 @@ export const createChangedRowDecorationWidgets = ({
   isInserted = false
 }) => {
   // First, expand the changes to include complete deleted rows
-  const changedRows = expandDiffForChangedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
+  const changedRows = expandDiffForChangedRows({
+    changes: changes.filter(change => change.deleted.length > 0),
+    originalDoc,
+    newDoc
+  });
   return changedRows.map(changedRow => {
     const rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted);
 

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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; } } }; }
@@ -20,6 +20,7 @@ import { createInlineChangedDecoration } from '../decorations/createInlineChange
 import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
+import { diffBySteps } from './diffBySteps';
 import { groupChangesByBlock } from './groupChangesByBlock';
 import { optimizeChanges } from './optimizeChanges';
 import { simplifySteps } from './simplifySteps';
@@ -28,9 +29,16 @@ var getChanges = function getChanges(_ref) {
     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);
+    tr = _ref.tr,
+    steps = _ref.steps;
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (diffType === 'step') {
+      return diffBySteps(originalDoc, steps);
+    }
+    if (diffType === 'block') {
+      return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
+    }
+    return simplifyChanges(changeset.changes, tr.doc);
   }
   var changes = simplifyChanges(changeset.changes, tr.doc);
   return optimizeChanges(changes);
@@ -49,7 +57,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     if (node.isBlock && (!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 = createBlockChangedDecoration({
+      var blockChangedDecorations = createBlockChangedDecoration({
         change: {
           from: pos,
           to: nodeEnd,
@@ -59,8 +67,8 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         isInserted: isInserted,
         isActive: isActive
       });
-      if (decoration) {
-        decorations.push(decoration);
+      if (blockChangedDecorations.length) {
+        decorations.push.apply(decorations, _toConsumableArray(blockChangedDecorations));
       }
     }
   });
@@ -139,7 +147,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     originalDoc: originalDoc,
     steppedDoc: steppedDoc,
     diffType: diffType,
-    tr: tr
+    tr: tr,
+    steps: steps
   });
   var decorations = [];
   changes.forEach(function (change) {
@@ -176,7 +185,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         intl: intl,
         activeIndexPos: activeIndexPos
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-        isInserted: !isInserted
+        isInserted: !isInserted,
+        diffType: diffType
       }));
       if (decoration) {
         decorations.push.apply(decorations, _toConsumableArray(decoration));

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

@@ -0,0 +1,119 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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; }
+import { Mapping } from '@atlaskit/editor-prosemirror/transform';
+var mapPosition = function mapPosition(mapping, pos) {
+  return mapping.map(pos);
+};
+var createMapping = function createMapping(maps) {
+  var mapping = new Mapping();
+  var _iterator = _createForOfIteratorHelper(maps),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var map = _step.value;
+      mapping.appendMap(map);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return mapping;
+};
+var createSpans = function createSpans(length) {
+  return length > 0 ? [{
+    length: length,
+    data: null
+  }] : [];
+};
+var mergeOverlappingByNewDocRange = function mergeOverlappingByNewDocRange(changes) {
+  if (changes.length <= 1) {
+    return changes;
+  }
+  var sortedChanges = _toConsumableArray(changes).sort(function (left, right) {
+    return left.fromB - right.fromB;
+  });
+  var merged = [];
+  var current = _objectSpread({}, sortedChanges[0]);
+  for (var i = 1; i < sortedChanges.length; i++) {
+    var next = sortedChanges[i];
+    var isOverlapping = next.fromB <= current.toB;
+    if (isOverlapping) {
+      current = {
+        fromA: Math.min(current.fromA, next.fromA),
+        toA: Math.max(current.toA, next.toA),
+        fromB: Math.min(current.fromB, next.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 {
+      merged.push(current);
+      current = _objectSpread({}, next);
+    }
+  }
+  merged.push(current);
+  return merged;
+};
+export var diffBySteps = function diffBySteps(originalDoc, steps) {
+  var changes = [];
+  var currentDoc = originalDoc;
+  var successfulStepMaps = [];
+  var rangedSteps = [];
+  var _iterator2 = _createForOfIteratorHelper(steps),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var step = _step2.value;
+      var result = step.apply(currentDoc);
+      if (result.failed !== null || !result.doc) {
+        continue;
+      }
+      var stepMap = step.getMap();
+      var rangeStep = step;
+      if (typeof rangeStep.from === 'number' && typeof rangeStep.to === 'number') {
+        rangedSteps.push({
+          from: rangeStep.from,
+          to: rangeStep.to,
+          mapIndex: successfulStepMaps.length,
+          stepMap: stepMap
+        });
+      }
+      successfulStepMaps.push(stepMap);
+      currentDoc = result.doc;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  for (var _i = 0, _rangedSteps = rangedSteps; _i < _rangedSteps.length; _i++) {
+    var rangedStep = _rangedSteps[_i];
+    // Mapping from original -> doc before this step.
+    var originalToBeforeStep = createMapping(successfulStepMaps.slice(0, rangedStep.mapIndex));
+    var beforeStepToOriginal = originalToBeforeStep.invert();
+    var fromA = mapPosition(beforeStepToOriginal, rangedStep.from);
+    var toA = mapPosition(beforeStepToOriginal, rangedStep.to);
+
+    // Map the step range into final steppedDoc coordinates.
+    var fromAfterStep = rangedStep.stepMap.map(rangedStep.from, -1);
+    var toAfterStep = rangedStep.stepMap.map(rangedStep.to, 1);
+    var afterStepToFinal = createMapping(successfulStepMaps.slice(rangedStep.mapIndex + 1));
+    var fromB = mapPosition(afterStepToFinal, fromAfterStep);
+    var toB = mapPosition(afterStepToFinal, toAfterStep);
+    changes.push({
+      fromA: fromA,
+      toA: toA,
+      fromB: fromB,
+      toB: toB,
+      deleted: createSpans(Math.max(0, toA - fromA)),
+      inserted: createSpans(Math.max(0, toB - fromB))
+    });
+  }
+  return mergeOverlappingByNewDocRange(changes);
+};

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

@@ -1,8 +1,9 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariable, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
+import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
+import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariable, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
 var getNodeClass = function getNodeClass(name) {
   switch (name) {
     case 'extension':
@@ -21,12 +22,22 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   var isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
   // Handle table separately to avoid border issues
-  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
+  'tableRow', 'paragraph',
   // Paragraph and heading nodes do not need special styling
   'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
     // Layout nodes do not need special styling
     return undefined;
   }
+  if (['tableCell', 'tableHeader'].includes(nodeName)) {
+    if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      // This is used for positioning the cell overlay widget decorations
+      return convertToInlineCss({
+        position: 'relative'
+      });
+    }
+    // When gate is off, it should return undefined as above
+    return undefined;
+  }
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
@@ -92,6 +103,17 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
     _ref2$isActive = _ref2.isActive,
     isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
+  var decorations = [];
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && ['tableCell', 'tableHeader'].includes(change.name)) {
+    var cellOverlay = document.createElement('div');
+    var cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? traditionalAddedCellOverlayStyle : addedCellOverlayStyle : colorScheme === 'traditional' ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
+    cellOverlay.setAttribute('style', cellOverlayStyle);
+    decorations.push(
+    // change.to - 1 to position the overlay inside the end of the cell
+    Decoration.widget(change.to - 1, cellOverlay, {
+      key: "diff-widget-cell-overlay-".concat(change.to)
+    }));
+  }
   var style = getBlockNodeStyle({
     nodeName: change.name,
     colorScheme: colorScheme,
@@ -108,24 +130,24 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
   var className = getNodeClass(change.name);
   if (fg('platform_editor_show_diff_scroll_navigation')) {
     if (style || className) {
-      return Decoration.node(change.from, change.to, {
+      decorations.push(Decoration.node(change.from, change.to, {
         style: style,
         'data-testid': 'show-diff-changed-decoration-node',
         class: className
       }, {
         key: 'diff-block',
         nodeName: change.name
-      });
-    } else {
-      return undefined;
+      }));
     }
+  } else {
+    decorations.push(Decoration.node(change.from, change.to, {
+      style: style,
+      'data-testid': 'show-diff-changed-decoration-node',
+      class: className
+    }, {
+      key: 'diff-block',
+      nodeName: change.name
+    }));
   }
-  return Decoration.node(change.from, change.to, {
-    style: style,
-    'data-testid': 'show-diff-changed-decoration-node',
-    class: className
-  }, {
-    key: 'diff-block',
-    nodeName: change.name
-  });
+  return decorations;
 };

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

@@ -13,7 +13,10 @@ import { findSafeInsertPos } from './utils/findSafeInsertPos';
 /**
  * Extracts information about deleted table rows from a change
  */
-var extractChangedRows = function extractChangedRows(change, originalDoc, newDoc) {
+var extractChangedRows = function extractChangedRows(_ref) {
+  var change = _ref.change,
+    originalDoc = _ref.originalDoc,
+    newDoc = _ref.newDoc;
   var changedRows = [];
 
   // Find the table in the original document
@@ -35,7 +38,6 @@ var extractChangedRows = function extractChangedRows(change, originalDoc, newDoc
     return changedRows;
   }
   var newTableMap = TableMap.get(tableNew.node);
-
   // If no rows were changed, return empty
   if (oldTableMap.height <= newTableMap.height ||
   // For now ignore if there are column deletions as well
@@ -54,7 +56,7 @@ var extractChangedRows = function extractChangedRows(change, originalDoc, newDoc
 
     // Check if this row overlaps with the deletion range
     var rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
-    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && !isEmptyRow(rowNode)) {
+    if (rowOverlapsChange && rowNode.type.name === 'tableRow' && (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isEmptyRow(rowNode))) {
       var startOfRow = newTableMap.mapByRow.slice().reverse().find(function (row) {
         return row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos;
       });
@@ -125,7 +127,7 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
       var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
-        if (isInserted && nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        if (nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
           var overlay = document.createElement('span');
           var overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
           overlay.setAttribute('style', overlayStyle);
@@ -147,7 +149,10 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
 /**
  * Expands a diff to include whole changed rows when table rows are affected
  */
-var expandDiffForChangedRows = function expandDiffForChangedRows(changes, originalDoc, newDoc) {
+var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
+  var changes = _ref2.changes,
+    originalDoc = _ref2.originalDoc,
+    newDoc = _ref2.newDoc;
   var rowInfo = [];
   var _iterator = _createForOfIteratorHelper(changes),
     _step;
@@ -155,7 +160,11 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(changes, origin
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var change = _step.value;
       // Check if this change affects table content
-      var changedRows = extractChangedRows(change, originalDoc, newDoc);
+      var changedRows = extractChangedRows({
+        change: change,
+        originalDoc: originalDoc,
+        newDoc: newDoc
+      });
       if (changedRows.length > 0) {
         rowInfo.push.apply(rowInfo, _toConsumableArray(changedRows));
       }
@@ -171,18 +180,22 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(changes, origin
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export var createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref) {
-  var changes = _ref.changes,
-    originalDoc = _ref.originalDoc,
-    newDoc = _ref.newDoc,
-    nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme,
-    _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? false : _ref$isInserted;
+export var createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref3) {
+  var changes = _ref3.changes,
+    originalDoc = _ref3.originalDoc,
+    newDoc = _ref3.newDoc,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    _ref3$isInserted = _ref3.isInserted,
+    isInserted = _ref3$isInserted === void 0 ? false : _ref3$isInserted;
   // First, expand the changes to include complete deleted rows
-  var changedRows = expandDiffForChangedRows(changes.filter(function (change) {
-    return change.deleted.length > 0;
-  }), originalDoc, newDoc);
+  var changedRows = expandDiffForChangedRows({
+    changes: changes.filter(function (change) {
+      return change.deleted.length > 0;
+    }),
+    originalDoc: originalDoc,
+    newDoc: newDoc
+  });
   return changedRows.map(function (changedRow) {
     var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted);
 

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

@@ -0,0 +1,4 @@
+import type { Change } from 'prosemirror-changeset';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Step } from '@atlaskit/editor-prosemirror/transform';
+export declare const diffBySteps: (originalDoc: PMNode, steps: Step[]) => Change[];

package/dist/types/pm-plugins/decorations/createBlockChangedDecoration.d.ts

@@ -17,4 +17,4 @@ export declare const createBlockChangedDecoration: ({ change, colorScheme, isIns
     colorScheme?: ColorScheme;
     isActive?: boolean;
     isInserted?: boolean;
-}) => Decoration | undefined;
+}) => Decoration[];

package/dist/types/showDiffPluginType.d.ts

@@ -5,7 +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 DiffType = 'inline' | 'block' | 'step';
 export type DiffParams = {
     /**
      * Color scheme to use for displaying diffs.

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

@@ -0,0 +1,4 @@
+import type { Change } from 'prosemirror-changeset';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Step } from '@atlaskit/editor-prosemirror/transform';
+export declare const diffBySteps: (originalDoc: PMNode, steps: Step[]) => Change[];

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

@@ -17,4 +17,4 @@ export declare const createBlockChangedDecoration: ({ change, colorScheme, isIns
     colorScheme?: ColorScheme;
     isActive?: boolean;
     isInserted?: boolean;
-}) => Decoration | undefined;
+}) => Decoration[];

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

@@ -5,7 +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 DiffType = 'inline' | 'block' | 'step';
 export type DiffParams = {
     /**
      * Color scheme to use for displaying diffs.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "6.2.18",
+	"version": "6.3.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,8 +34,8 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^58.0.0",
-		"@atlaskit/tokens": "^12.0.0",
+		"@atlaskit/tmp-editor-statsig": "^60.2.0",
+		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/editor-core": "^217.12.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/textarea": "^8.2.0",
 		"@atlassian/confluence-presets": "workspace:^",
@@ -56,7 +56,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.19.0",
+		"@atlaskit/editor-common": "^112.20.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {