@atlaskit/editor-plugin-show-diff 26.0.0 → 26.0.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 26.0.2
+
+### Patch Changes
+
+- [`fa1e60dbfa6e5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa1e60dbfa6e5) -
+  Keep rendered diffs visible when navigating inside horizontally overflowing tables, behind
+  `platform_editor_ai_suggestion_table_scroll_fix`.
+- Updated dependencies
+
+## 26.0.1
+
+### Patch Changes
+
+- [`00d7be6e38362`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/00d7be6e38362) -
+  Render a whole-cell table replacement inside the live cell behind
+  `platform_editor_ai_show_diff_patch_2`, showing the new cell background when it changed, and hide
+  only the cell's content rather than the cell when deleted diffs are hidden, so the table keeps its
+  shape. Neither the diff nor the suggestion hover highlight overrides a cell's own background any
+  more, so removing them leaves it in place.
+
 ## 26.0.0
 
 ### Patch Changes

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

@@ -24,6 +24,7 @@ var _createAnchorDecorationWidgets = require("../decorations/createAnchorDecorat
 var _createBlockChangedDecoration = require("../decorations/createBlockChangedDecoration");
 var _createInlineChangedDecoration = require("../decorations/createInlineChangedDecoration");
 var _createNodeChangedDecorationWidget = require("../decorations/createNodeChangedDecorationWidget");
+var _createReplacedCellDecorations = require("../decorations/createReplacedCellDecorations");
 var _decorationKeys = require("../decorations/decorationKeys");
 var _extractContributorTags = require("../decorations/extractContributorTags");
 var _createDeletedLineBreakWidget = require("../decorations/utils/createDeletedLineBreakWidget");
@@ -603,7 +604,11 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
     // suppressed in the clean view. `hideDeletedDiffs` is load-bearing: when false the reviewer
     // asked to compare against the original, and the deleted side is the only place the
     // previous formatting is visible.
-    var isMarkOnly = shouldHideMarkOnlyDeletions && hideDeletedDiffs && change.deleted.length > 0 && (0, _isMarkOnlyChange.isMarkOnlyChange)({
+    //
+    // Not on an inverted diff: there the widget's side is the suggested content, which the clean
+    // view keeps. Suppressing it hides the suggestion along with the displayed side it replaces,
+    // e.g. a cell whose only change is its background, as the signature ignores attrs.
+    var isMarkOnly = shouldHideMarkOnlyDeletions && hideDeletedDiffs && !(isInverted && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) && change.deleted.length > 0 && (0, _isMarkOnlyChange.isMarkOnlyChange)({
       change: change,
       originalDoc: originalDoc,
       newDoc: tr.doc
@@ -689,7 +694,35 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         hideDeletedDiffs: hideDeletedDiffs,
         isInverted: isInverted
       });
-      if (isSmartNodeLevel) {
+
+      // A whole-cell replacement keeps its cells in place, so it takes its own decorations
+      // instead of the generic inline and block ones.
+      var replacedCells = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? (0, _createReplacedCellDecorations.getReplacedCells)({
+        slice: originalDoc.slice(change.fromA, change.toA),
+        doc: tr.doc,
+        fromB: change.fromB,
+        toB: change.toB
+      }) : [];
+      if (replacedCells.length > 0) {
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createReplacedCellDecorations.createReplacedCellDecorations)({
+          replacedCells: replacedCells,
+          change: change,
+          doc: tr.doc,
+          attributionKey: attributionKey,
+          colorScheme: changeColorScheme,
+          hasDeletedWidget: willRenderDeletedWidget,
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+          isActive: isActive,
+          isDeletedWidgetBelow: isDeletedWidgetBelow,
+          isInserted: isInserted,
+          leftAnchorId: leftAnchorId,
+          reveal: reveal,
+          shouldHideDeleted: shouldHideDeleted,
+          showContributorTags: showContributorTags,
+          showIndicators: showIndicators,
+          tagMountContext: tagMountContext
+        })));
+      } else if (isSmartNodeLevel) {
         // For a large inserted table, skip the O(cells) inline decorations inside the
         // table (the cell overlays added below provide the highlight without the
         // expensive content re-render); leaf blocks outside the table still get theirs.
@@ -749,7 +782,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
           tagMountContext: tagMountContext
         })));
       }
-      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration({
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(replacedCells.length > 0 ? [] : calculateNodesForBlockDecoration({
         // A deleted widget placed below anchors at the change's end, inside the very block
         // this would let the decoration claim.
         allowTrailingCloseTokens: !isDeletedWidgetBelow,

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

@@ -13,6 +13,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _attributions = require("../decorations/colorSchemes/attributions");
+var _cellAttrs = require("../decorations/utils/cellAttrs");
 var _charsByOffset = require("../utils/charsByOffset");
 var _attrAwareTokenEncoder = require("./attrAwareTokenEncoder");
 var _optimizeChanges = require("./optimizeChanges");
@@ -34,6 +35,16 @@ var WHITESPACE_REGEX = /[\t-\r \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u
 var isGranularIsolatingNode = function isGranularIsolatingNode(node) {
   return !!node.type.spec.isolating && node.type.spec.tableRole !== 'table';
 };
+var CELL_TYPE_NAMES = ['tableCell', 'tableHeader'];
+
+/**
+ * Whether a table cell's replacement changes one of its diffable attributes, such as its background.
+ * Such a cell is diffed whole: it renders as a cell style plus a copy of its row, which already shows
+ * the cell's new content, so inline marks inside it would only repeat that.
+ */
+var isCellAttrChange = function isCellAttrChange(replacedNode, replacingNode) {
+  return CELL_TYPE_NAMES.includes(replacedNode.type.name) && (0, _cellAttrs.isCellAttrChanged)(replacedNode, replacingNode);
+};
 var mapPosition = function mapPosition(mapping, pos) {
   return mapping.map(pos);
 };
@@ -237,7 +248,8 @@ var mergeOverlappingByNewDocRange = function mergeOverlappingByNewDocRange(chang
  * - The replaced slice has only one child
  * - The replacing slice has only one child
  * - Both children are the same textblock type, or (behind `platform_editor_ai_show_diff_patch_2`)
- *   the same isolating, non-table node type whose text content differs
+ *   the same isolating, non-table node type whose text content differs (for a table cell, only when
+ *   its diffable attributes are unchanged)
  * - The replaced slice and replacing slice have the same text content
  * - The replaced slice and replacing slice have the same child marks (if text content is equal)
  */
@@ -275,7 +287,7 @@ var shouldCheckGranularDiff = function shouldCheckGranularDiff(step, before, fro
   // `hasSameChildMarks` only compares an isolating node's direct (block) children, so it cannot
   // vouch for one with unchanged text. Keep the existing whole-node fallback for that case.
   if (isIsolatingNode) {
-    return !isTextContentEqual;
+    return !isTextContentEqual && !(replacingNode && isCellAttrChange(replacedNode, replacingNode));
   }
   return !isTextContentEqual || isTextContentEqual && hasSameChildMarks(replacedNode, replacingNode);
 };

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

@@ -18,6 +18,7 @@ var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
 var _createContributorTagWidget = require("./createContributorTagWidget");
 var _createInlineChangedDecoration = require("./createInlineChangedDecoration");
+var _createReplacedCellDecorations = require("./createReplacedCellDecorations");
 var _decorationKeys = require("./decorationKeys");
 var _absorbFirstChildMarginReset = require("./utils/absorbFirstChildMarginReset");
 var _createDeletedLineBreakWidget = require("./utils/createDeletedLineBreakWidget");
@@ -222,6 +223,19 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     isInserted: isInserted
   });
   if (tableDiffMode.kind === 'cells') {
+    if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
+      return (0, _createReplacedCellDecorations.createReplacedCellWidgets)({
+        slice: slice,
+        newDoc: newDoc,
+        change: change,
+        nodeViewSerializer: nodeViewSerializer,
+        colorScheme: colorScheme,
+        intl: intl,
+        isActive: isActive,
+        isInserted: isInserted,
+        leftAnchorId: leftAnchorId
+      });
+    }
     return createTableCellContentWidgets({
       slice: slice,
       newDoc: newDoc,

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

@@ -0,0 +1,350 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getReplacedCells = exports.createReplacedCellWidgets = exports.createReplacedCellDecorations = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _getDarkModeLchColor = require("@atlaskit/adf-schema/get-dark-mode-lch-color");
+var _isRgb = require("@atlaskit/adf-schema/is-rgb");
+var _rgbToHex = require("@atlaskit/adf-schema/rgb-to-hex");
+var _tableNodes = require("@atlaskit/adf-schema/tableNodes");
+var _cssHelper = require("@atlaskit/editor-common/css-helper");
+var _document = require("@atlaskit/editor-common/utils/document");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _createBlockChangedDecoration = require("./createBlockChangedDecoration");
+var _createInlineChangedDecoration = require("./createInlineChangedDecoration");
+var _decorationKeys = require("./decorationKeys");
+var _cellAttrs = require("./utils/cellAttrs");
+var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var CELL_TYPE_NAMES = ['tableCell', 'tableHeader'];
+/**
+ * Pairs each cell of a whole-cell replacement with the live cell it replaces, or `[]` when the slice
+ * is not a run of whole cells matching the live ones. Whole-cell replacement preserves cell count and
+ * order, so the nth live cell in the range matches the nth cell in the slice.
+ */
+var getReplacedCells = exports.getReplacedCells = function getReplacedCells(_ref) {
+  var slice = _ref.slice,
+    doc = _ref.doc,
+    fromB = _ref.fromB,
+    toB = _ref.toB;
+  var otherCells = slice.content.content;
+  if (slice.openStart !== 0 || slice.openEnd !== 0 || otherCells.length === 0 || !otherCells.every(function (node) {
+    return CELL_TYPE_NAMES.includes(node.type.name);
+  })) {
+    return [];
+  }
+  var liveCells = [];
+  doc.nodesBetween(fromB, toB, function (node, pos) {
+    if (CELL_TYPE_NAMES.includes(node.type.name)) {
+      liveCells.push({
+        node: node,
+        pos: pos
+      });
+      return false;
+    }
+    return true;
+  });
+  if (liveCells.length !== otherCells.length) {
+    return [];
+  }
+  return otherCells.map(function (otherCell, index) {
+    return {
+      otherCell: otherCell,
+      liveCell: liveCells[index].node,
+      liveCellPos: liveCells[index].pos
+    };
+  });
+};
+
+/**
+ * Whether two cells hold the same content, ignoring the cells' own attributes and `localId`s, which
+ * a suggestion can regenerate. Such a replacement only changed the cell (e.g. its background), so
+ * there is no content to diff.
+ */
+var isCellContentEqual = function isCellContentEqual(left, right) {
+  if (left.childCount !== right.childCount) {
+    return false;
+  }
+  for (var index = 0; index < left.childCount; index++) {
+    if (!(0, _document.areNodesEqualIgnoreAttrs)(left.child(index), right.child(index), ['localId'])) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Whether the cell itself changed — its type, or an attribute that represents a change such as its
+ * background or span — as opposed to only its content.
+ */
+var isCellChanged = function isCellChanged(left, right) {
+  return left.type !== right.type || (0, _cellAttrs.isCellAttrChanged)(left, right);
+};
+
+/**
+ * A custom (non-palette) cell colour as the schema renders it: inverted in dark mode so text stays
+ * readable, except for design tokens, which are already themed.
+ */
+var getCustomCellColor = function getCustomCellColor(background) {
+  var color = (0, _isRgb.isRgb)(background) && (0, _rgbToHex.rgbToHex)(background) || background;
+  if (color.startsWith('var(') || document.documentElement.getAttribute('data-color-mode') !== 'dark') {
+    return background;
+  }
+  return (0, _getDarkModeLchColor.getDarkModeLCHColor)(color);
+};
+
+/**
+ * The colour `cell` renders with. A palette colour is the editor's own themed variable for its colour
+ * name (e.g. for dark mode), the one `td[colorname]` cells use; a custom colour is the schema's own
+ * treatment of it; no colour is the editor's default.
+ */
+var getCellBackgroundColor = function getCellBackgroundColor(cell) {
+  var background = (0, _cellAttrs.normalizeCellBackground)(cell.attrs.background);
+  if (!background) {
+    return cell.type.name === 'tableHeader' ? "var(--ds-background-accent-gray-subtlest, #F0F1F2)" : "var(--ds-surface, #FFFFFF)";
+  }
+  var _getCellDomAttrs = (0, _tableNodes.getCellDomAttrs)(cell),
+    colorname = _getCellDomAttrs.colorname;
+  return colorname ? "var(--ak-editor-table-cell-background-".concat(colorname.toLowerCase().split(' ').join('-'), ")") : getCustomCellColor(background);
+};
+
+/**
+ * A layer painting `color` over the cell's own background and under its content, so the cell reads
+ * as having the new background without any of the cell's own attributes being overridden: removing
+ * a decoration removes the attributes it set rather than restoring the ones they replaced.
+ */
+var createCellBackgroundLayer = function createCellBackgroundLayer(color) {
+  var layer = document.createElement('div');
+  layer.setAttribute('aria-hidden', 'true');
+  layer.contentEditable = 'false';
+  layer.dataset.testid = 'show-diff-new-cell-background';
+  layer.setAttribute('style', (0, _cssHelper.convertToInlineCss)({
+    position: 'absolute',
+    inset: 0,
+    zIndex: -1,
+    borderRadius: 'inherit',
+    pointerEvents: 'none',
+    backgroundColor: color
+  }));
+  return layer;
+};
+
+/** The other side's cell content, as blocks, for the top of the live cell. */
+var createCellContentWidget = function createCellContentWidget(_ref2) {
+  var cell = _ref2.cell,
+    pos = _ref2.pos,
+    nodeViewSerializer = _ref2.nodeViewSerializer,
+    colorScheme = _ref2.colorScheme,
+    intl = _ref2.intl,
+    isActive = _ref2.isActive,
+    isInserted = _ref2.isInserted,
+    leftAnchorId = _ref2.leftAnchorId;
+  var dom = document.createElement('div');
+  cell.content.forEach(function (block) {
+    var nodeView = nodeViewSerializer.tryCreateNodeView(block, 0, undefined, isInserted, colorScheme);
+    if (nodeView) {
+      (0, _wrapBlockNodeView.wrapBlockNodeView)({
+        dom: dom,
+        nodeView: nodeView,
+        targetNode: block,
+        colorScheme: colorScheme,
+        intl: intl,
+        isActive: isActive,
+        isInserted: isInserted
+      });
+      return;
+    }
+    var serialized = nodeViewSerializer.serializeNode(block);
+    if (serialized instanceof HTMLElement) {
+      dom.append((0, _wrapBlockNodeView.injectInnerWrapper)({
+        node: serialized,
+        colorScheme: colorScheme,
+        isActive: isActive,
+        isInserted: isInserted
+      }));
+    }
+  });
+  if (dom.childNodes.length === 0) {
+    return undefined;
+  }
+  dom.setAttribute('data-testid', isInserted ? 'show-diff-changed-decoration' : 'show-diff-deleted-decoration');
+
+  // Before the cell's own blocks, as a block of its own, so it never lands inside a paragraph the
+  // displayed side may hide.
+  return _view.Decoration.widget(pos + 1, dom, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
+    colorScheme: colorScheme,
+    decorationType: 'widget',
+    diffId: crypto.randomUUID(),
+    leftAnchorId: leftAnchorId,
+    isActive: isActive,
+    isInserted: isInserted,
+    side: -1
+  })), {}, {
+    marks: []
+  }));
+};
+
+/**
+ * The other side of a whole-cell replacement, drawn inside the live cells so the table keeps its
+ * shape: each live cell takes the other cell's background when it differs, and its content when that
+ * differs. A cell whose content did not change has nothing to diff.
+ */
+var createReplacedCellWidgets = exports.createReplacedCellWidgets = function createReplacedCellWidgets(_ref3) {
+  var slice = _ref3.slice,
+    newDoc = _ref3.newDoc,
+    change = _ref3.change,
+    nodeViewSerializer = _ref3.nodeViewSerializer,
+    colorScheme = _ref3.colorScheme,
+    intl = _ref3.intl,
+    isActive = _ref3.isActive,
+    isInserted = _ref3.isInserted,
+    leftAnchorId = _ref3.leftAnchorId;
+  return getReplacedCells({
+    slice: slice,
+    doc: newDoc,
+    fromB: change.fromB,
+    toB: change.toB
+  }).flatMap(function (_ref4) {
+    var otherCell = _ref4.otherCell,
+      liveCell = _ref4.liveCell,
+      liveCellPos = _ref4.liveCellPos;
+    var decorations = [];
+    if (isInserted && (0, _cellAttrs.isCellBackgroundChanged)(otherCell, liveCell)) {
+      var cellEnd = liveCellPos + liveCell.nodeSize;
+      decorations.push(
+      // The cell becomes the layer's stacking context, so the layer sits above the cell's own
+      // background rather than behind it. Through `z-index` at the cell overlay's own level, not
+      // `isolation`: an isolated cell would trap its overlay below later cells, which then cover
+      // the overlay's outline where it overlaps their border. Properties the cell never sets, so
+      // removing them takes nothing of its own.
+      _view.Decoration.node(liveCellPos, cellEnd, {
+        style: (0, _cssHelper.convertToInlineCss)({
+          position: 'relative',
+          // The highest z-index a cell diff overlay takes (the rounded-corner variant).
+          zIndex: 2
+        })
+      }, {
+        key: "show-diff-new-cell-background-host-".concat(liveCellPos)
+      }),
+      // At the cell's end, beside its diff overlay, so the cell's first block stays its first child.
+      _view.Decoration.widget(cellEnd - 1, createCellBackgroundLayer(getCellBackgroundColor(otherCell)), {
+        key: "show-diff-new-cell-background-".concat(liveCellPos),
+        side: -1,
+        marks: [],
+        ignoreSelection: true
+      }));
+    }
+    if (!isCellContentEqual(otherCell, liveCell)) {
+      var contentWidget = createCellContentWidget({
+        cell: otherCell,
+        pos: liveCellPos,
+        nodeViewSerializer: nodeViewSerializer,
+        colorScheme: colorScheme,
+        intl: intl,
+        isActive: isActive,
+        isInserted: isInserted,
+        leftAnchorId: leftAnchorId
+      });
+      if (contentWidget) {
+        decorations.push(contentWidget);
+      }
+    }
+    return decorations;
+  });
+};
+
+/**
+ * The displayed side of a whole-cell replacement. A table cell is never removed on its own, only
+ * replaced in place, so a live cell is never hidden — hiding it would leave the row a cell short. It
+ * takes the changed-cell treatment only when the cell itself changed; its content is diffed, and
+ * hidden in the clean view, only when that changed. A cell whose content stayed the same keeps
+ * showing it.
+ */
+var createReplacedCellDecorations = exports.createReplacedCellDecorations = function createReplacedCellDecorations(_ref5) {
+  var replacedCells = _ref5.replacedCells,
+    change = _ref5.change,
+    doc = _ref5.doc,
+    attributionKey = _ref5.attributionKey,
+    colorScheme = _ref5.colorScheme,
+    hasDeletedWidget = _ref5.hasDeletedWidget,
+    hideAddedDiffsUnderline = _ref5.hideAddedDiffsUnderline,
+    isActive = _ref5.isActive,
+    isDeletedWidgetBelow = _ref5.isDeletedWidgetBelow,
+    isInserted = _ref5.isInserted,
+    leftAnchorId = _ref5.leftAnchorId,
+    reveal = _ref5.reveal,
+    shouldHideDeleted = _ref5.shouldHideDeleted,
+    showContributorTags = _ref5.showContributorTags,
+    showIndicators = _ref5.showIndicators,
+    tagMountContext = _ref5.tagMountContext;
+  return replacedCells.flatMap(function (_ref6) {
+    var otherCell = _ref6.otherCell,
+      liveCell = _ref6.liveCell,
+      liveCellPos = _ref6.liveCellPos;
+    var cellEnd = liveCellPos + liveCell.nodeSize;
+    var decorations = isCellChanged(otherCell, liveCell) ? (0, _createBlockChangedDecoration.createBlockChangedDecoration)({
+      attributionKey: attributionKey,
+      change: {
+        from: liveCellPos,
+        to: cellEnd,
+        name: liveCell.type.name
+      },
+      colorScheme: colorScheme,
+      doc: doc,
+      isActive: isActive,
+      // The cell stays either way, so it reads as changed, not removed.
+      isInserted: true,
+      leftAnchorId: leftAnchorId,
+      showContributorTags: showContributorTags,
+      showIndicators: showIndicators,
+      tagMountContext: tagMountContext
+    }) : [];
+    if (isCellContentEqual(otherCell, liveCell)) {
+      return decorations;
+    }
+    decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
+      attributionKey: attributionKey,
+      change: _objectSpread(_objectSpread({}, change), {}, {
+        fromB: liveCellPos,
+        toB: cellEnd
+      }),
+      colorScheme: colorScheme,
+      doc: doc,
+      hasDeletedWidget: hasDeletedWidget,
+      hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+      isActive: isActive,
+      isDeletedWidgetBelow: isDeletedWidgetBelow,
+      isInserted: isInserted,
+      leftAnchorId: leftAnchorId,
+      reveal: reveal,
+      shouldHideDeleted: shouldHideDeleted,
+      showContributorTags: showContributorTags,
+      showIndicators: showIndicators,
+      tagMountContext: tagMountContext
+    })));
+    if (shouldHideDeleted) {
+      liveCell.forEach(function (block, offset) {
+        var blockPos = liveCellPos + 1 + offset;
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createBlockChangedDecoration.createBlockChangedDecoration)({
+          change: {
+            from: blockPos,
+            to: blockPos + block.nodeSize,
+            name: block.type.name
+          },
+          colorScheme: colorScheme,
+          doc: doc,
+          isActive: isActive,
+          isInserted: isInserted,
+          leftAnchorId: leftAnchorId,
+          shouldHideDeleted: shouldHideDeleted
+        })));
+      });
+    }
+    return decorations;
+  });
+};

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeCellBackground = exports.isCellBackgroundChanged = exports.isCellAttrChanged = void 0;
+var _diffableAttrs = require("./diffableAttrs");
+/**
+ * A cell background as it renders: absent, empty and `"null"` — the string agent payloads send for
+ * no background — all mean the cell has none.
+ */
+var normalizeCellBackground = exports.normalizeCellBackground = function normalizeCellBackground(background) {
+  return typeof background === 'string' && background !== '' && background !== 'null' ? background : null;
+};
+
+/** Whether two cells render different backgrounds. */
+var isCellBackgroundChanged = exports.isCellBackgroundChanged = function isCellBackgroundChanged(left, right) {
+  return normalizeCellBackground(left.attrs.background) !== normalizeCellBackground(right.attrs.background);
+};
+
+/**
+ * Whether two cells differ by an attribute that represents a change, such as their background or
+ * span, as opposed to only their content.
+ */
+var isCellAttrChanged = exports.isCellAttrChanged = function isCellAttrChanged(left, right) {
+  var _getDiffableAttrNames;
+  return ((_getDiffableAttrNames = (0, _diffableAttrs.getDiffableAttrNames)(left.type.name, left.attrs)) !== null && _getDiffableAttrNames !== void 0 ? _getDiffableAttrNames : []).some(function (name) {
+    return name === 'background' ? isCellBackgroundChanged(left, right) : left.attrs[name] !== right.attrs[name];
+  });
+};

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

@@ -8,6 +8,7 @@ var _table = require("@atlaskit/editor-common/styles/table");
 var _getStickyHeaderHeight = require("@atlaskit/editor-common/table/get-sticky-header-height");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _decorationKeys = require("./decorations/decorationKeys");
+var _getWidgetElement = require("./decorations/utils/getWidgetElement");
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
  * viewport edge (helps with sticky table headers, toolbars, etc.).
@@ -24,21 +25,21 @@ function updateScrollTargetMargin(view, targetPos, api) {
   var tableHeaderHeight = isLimitedModeEnabled ? undefined : (0, _getStickyHeaderHeight.getStickyHeaderHeight)(view, targetPos);
   view.dom.style.setProperty(_decorationKeys.SCROLL_TARGET_MARGIN_CSS_PROPERTY, "".concat(tableHeaderHeight ? tableHeaderHeight + _table.tableMarginTop : 0, "px"));
 }
-
-/**
- * Returns the resolved HTMLElement for a given DOM node, walking up to the
- * parent element if the node itself is not an Element (e.g. a text node).
- */
 function scrollToSelection(node) {
-  var element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
+  // ProseMirror may return a text node; scroll its parent element instead.
+  var element = node instanceof Element ? node : node === null || node === void 0 ? void 0 : node.parentElement;
   if (!(element instanceof HTMLElement)) {
     return;
   }
+  var scrollOptions = {
+    behavior: 'smooth',
+    block: 'start'
+  };
+  if ((0, _fg.fg)('platform_editor_ai_suggestion_table_scroll_fix')) {
+    scrollOptions.inline = 'center';
+  }
   if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
-    element.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    });
+    element.scrollIntoView(scrollOptions);
     return;
   }
 
@@ -46,14 +47,25 @@ function scrollToSelection(node) {
   var previousScrollMarginTop = element.style.scrollMarginTop;
   element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
   try {
-    element.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    });
+    element.scrollIntoView(scrollOptions);
   } finally {
     element.style.scrollMarginTop = previousScrollMarginTop;
   }
 }
+function resolveScrollTarget(view, target) {
+  var _view$domAtPos;
+  if ((0, _decorationKeys.isDiffDecoration)(target) && target.spec.decorationType === 'widget') {
+    return (0, _getWidgetElement.getWidgetElement)(target);
+  }
+  if ((0, _decorationKeys.isDiffDecoration)(target) && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
+    var _Array$from$find;
+    return (_Array$from$find = Array.from(view.dom.querySelectorAll('[data-diff-id]')).find(function (element) {
+      return element.dataset.diffId === target.spec.diffId;
+    })) !== null && _Array$from$find !== void 0 ? _Array$from$find : view.nodeDOM(target.from);
+  }
+  var targetNode = view.nodeDOM(target.from);
+  return targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+}
 
 /**
  * Schedules scrolling to the decoration at the given index after the next frame. Defaults to the
@@ -73,30 +85,27 @@ var scrollToDecoration = exports.scrollToDecoration = function scrollToDecoratio
   // deleted-content widget rather than at the group's `from` position — see `scrollTarget` in
   // `getScrollableDecorations`. Only set under `platform_editor_ai_show_diff_patch_1`.
   var target = (0, _decorationKeys.isDiffDecoration)(decoration) && decoration.spec.scrollTarget || decoration;
-  var rafId = requestAnimationFrame(function () {
-    rafId = null;
+  var rafId = null;
+  var cancelled = false;
+  var scrollToTarget = function scrollToTarget() {
+    if (view.isDestroyed) {
+      return;
+    }
     if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
       updateScrollTargetMargin(view, target.from, api);
     }
-    if ((0, _decorationKeys.isDiffDecoration)(target) && target.spec.decorationType === 'widget') {
-      var _target$type;
-      // @ts-expect-error - decoration.type is not typed public API
-      var widgetDom = target === null || target === void 0 || (_target$type = target.type) === null || _target$type === void 0 ? void 0 : _target$type.toDOM;
-      scrollToSelection(widgetDom);
-    } else if ((0, _decorationKeys.isDiffDecoration)(target) && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
-      var _Array$from$find;
-      var targetNode = (_Array$from$find = Array.from(view.dom.querySelectorAll('[data-diff-id]')).find(function (element) {
-        return element.dataset.diffId === target.spec.diffId;
-      })) !== null && _Array$from$find !== void 0 ? _Array$from$find : view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
-      scrollToSelection(targetNode);
-    } else {
-      var _view$domAtPos;
-      var _targetNode = view.nodeDOM(target === null || target === void 0 ? void 0 : target.from);
-      var node = _targetNode instanceof Element ? _targetNode : (_view$domAtPos = view.domAtPos(target === null || target === void 0 ? void 0 : target.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
-      scrollToSelection(node);
+    scrollToSelection(resolveScrollTarget(view, target));
+  };
+
+  // Called from the plugin's post-DOM update hook; defer measurement until layout can settle.
+  rafId = requestAnimationFrame(function () {
+    rafId = null;
+    if (!cancelled) {
+      scrollToTarget();
     }
   });
   return function () {
+    cancelled = true;
     if (rafId !== null) {
       cancelAnimationFrame(rafId);
       rafId = null;