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

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

@@ -11,6 +11,7 @@ import { Mark } from '@atlaskit/editor-prosemirror/model';
 import { Mapping, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getAttributionKey } from '../decorations/colorSchemes/attributions';
+import { isCellAttrChanged } from '../decorations/utils/cellAttrs';
 import { buildCharsByOffset } from '../utils/charsByOffset';
 import { attrAwareTokenEncoder } from './attrAwareTokenEncoder';
 import { optimizeChanges } from './optimizeChanges';
@@ -27,6 +28,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) && isCellAttrChanged(replacedNode, replacingNode);
+};
 var mapPosition = function mapPosition(mapping, pos) {
   return mapping.map(pos);
 };
@@ -230,7 +241,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)
  */
@@ -268,7 +280,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/esm/pm-plugins/decorations/createNodeChangedDecorationWidget.js

@@ -13,6 +13,7 @@ import { clampAnchorPosIntoCell, createAnchorNameSpan, createLeftAnchorWidget }
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, resolveHoistedCodeBlockAnchor, unmountContributorTag } from './createContributorTagWidget';
 import { getAtomicInlineChangedAttrs } from './createInlineChangedDecoration';
+import { createReplacedCellWidgets } from './createReplacedCellDecorations';
 import { AnchorTypeKey, buildContributorTagDecorationSpec, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
 import { createDeletedLineBreakDecoration } from './utils/createDeletedLineBreakWidget';
@@ -216,6 +217,19 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     isInserted: isInserted
   });
   if (tableDiffMode.kind === 'cells') {
+    if (fg('platform_editor_ai_show_diff_patch_2')) {
+      return 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/esm/pm-plugins/decorations/createReplacedCellDecorations.js

@@ -0,0 +1,343 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { getDarkModeLCHColor } from '@atlaskit/adf-schema/get-dark-mode-lch-color';
+import { isRgb } from '@atlaskit/adf-schema/is-rgb';
+import { rgbToHex } from '@atlaskit/adf-schema/rgb-to-hex';
+import { getCellDomAttrs } from '@atlaskit/adf-schema/tableNodes';
+import { convertToInlineCss } from '@atlaskit/editor-common/css-helper';
+import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { createBlockChangedDecoration } from './createBlockChangedDecoration';
+import { createInlineChangedDecoration } from './createInlineChangedDecoration';
+import { buildDiffDecorationSpec } from './decorationKeys';
+import { isCellAttrChanged, isCellBackgroundChanged, normalizeCellBackground } from './utils/cellAttrs';
+import { injectInnerWrapper, wrapBlockNodeView } from './utils/wrapBlockNodeView';
+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.
+ */
+export var 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 (!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 || 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 = isRgb(background) && rgbToHex(background) || background;
+  if (color.startsWith('var(') || document.documentElement.getAttribute('data-color-mode') !== 'dark') {
+    return background;
+  }
+  return 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 = normalizeCellBackground(cell.attrs.background);
+  if (!background) {
+    return cell.type.name === 'tableHeader' ? "var(--ds-background-accent-gray-subtlest, #F0F1F2)" : "var(--ds-surface, #FFFFFF)";
+  }
+  var _getCellDomAttrs = 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', 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) {
+      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(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 Decoration.widget(pos + 1, dom, _objectSpread(_objectSpread({}, 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.
+ */
+export var 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 && 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.
+      Decoration.node(liveCellPos, cellEnd, {
+        style: 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.
+      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.
+ */
+export var 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) ? 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, _toConsumableArray(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, _toConsumableArray(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/esm/pm-plugins/decorations/utils/cellAttrs.js

@@ -0,0 +1,25 @@
+import { getDiffableAttrNames } from './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.
+ */
+export var normalizeCellBackground = function normalizeCellBackground(background) {
+  return typeof background === 'string' && background !== '' && background !== 'null' ? background : null;
+};
+
+/** Whether two cells render different backgrounds. */
+export var 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.
+ */
+export var isCellAttrChanged = function isCellAttrChanged(left, right) {
+  var _getDiffableAttrNames;
+  return ((_getDiffableAttrNames = 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/esm/pm-plugins/scrollToDiff.js

@@ -2,6 +2,7 @@ import { tableMarginTop } from '@atlaskit/editor-common/styles/table';
 import { getStickyHeaderHeight } from '@atlaskit/editor-common/table/get-sticky-header-height';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { isDiffDecoration, SCROLL_TARGET_MARGIN_CSS_PROPERTY } from './decorations/decorationKeys';
+import { getWidgetElement } from './decorations/utils/getWidgetElement';
 
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
@@ -19,21 +20,21 @@ function updateScrollTargetMargin(view, targetPos, api) {
   var tableHeaderHeight = isLimitedModeEnabled ? undefined : getStickyHeaderHeight(view, targetPos);
   view.dom.style.setProperty(SCROLL_TARGET_MARGIN_CSS_PROPERTY, "".concat(tableHeaderHeight ? tableHeaderHeight + 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 (fg('platform_editor_ai_suggestion_table_scroll_fix')) {
+    scrollOptions.inline = 'center';
+  }
   if (fg('platform_editor_ai_show_diff_patch_1')) {
-    element.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    });
+    element.scrollIntoView(scrollOptions);
     return;
   }
 
@@ -41,14 +42,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 (isDiffDecoration(target) && target.spec.decorationType === 'widget') {
+    return getWidgetElement(target);
+  }
+  if (isDiffDecoration(target) && 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
@@ -68,30 +80,27 @@ export var scrollToDecoration = function scrollToDecoration(view, decorations) {
   // 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 = 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 (fg('platform_editor_ai_show_diff_patch_1')) {
       updateScrollTargetMargin(view, target.from, api);
     }
-    if (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 (isDiffDecoration(target) && 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;

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

@@ -0,0 +1,67 @@
+import type { Change } from 'prosemirror-changeset';
+import type { IntlShape } from 'react-intl';
+import type { Node as PMNode, Slice } from '@atlaskit/editor-prosemirror/model';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import type { RevealOptions } from '../../showDiffPluginType';
+import type { NodeViewSerializer } from '../NodeViewSerializer';
+import type { ColorScheme } from './colorSchemes/types';
+import type { ContributorTagMountContext } from './createContributorTagWidget';
+export type ReplacedCell = {
+    /** The live cell in the displayed document. */
+    liveCell: PMNode;
+    liveCellPos: number;
+    /** The other side's cell, from the replaced slice. */
+    otherCell: PMNode;
+};
+/**
+ * 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.
+ */
+export declare const getReplacedCells: ({ slice, doc, fromB, toB, }: {
+    doc: PMNode;
+    fromB: number;
+    slice: Slice;
+    toB: number;
+}) => ReplacedCell[];
+/**
+ * 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.
+ */
+export declare const createReplacedCellWidgets: ({ slice, newDoc, change, nodeViewSerializer, colorScheme, intl, isActive, isInserted, leftAnchorId, }: {
+    change: Pick<Change, 'fromB' | 'toB'>;
+    colorScheme?: ColorScheme;
+    intl: IntlShape;
+    isActive?: boolean;
+    isInserted: boolean;
+    leftAnchorId?: string;
+    newDoc: PMNode;
+    nodeViewSerializer: NodeViewSerializer;
+    slice: Slice;
+}) => Decoration[];
+/**
+ * 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.
+ */
+export declare const createReplacedCellDecorations: ({ replacedCells, change, doc, attributionKey, colorScheme, hasDeletedWidget, hideAddedDiffsUnderline, isActive, isDeletedWidgetBelow, isInserted, leftAnchorId, reveal, shouldHideDeleted, showContributorTags, showIndicators, tagMountContext, }: {
+    attributionKey?: string;
+    change: Pick<Change, 'fromA' | 'toA' | 'fromB' | 'toB'>;
+    colorScheme?: ColorScheme;
+    doc: PMNode;
+    hasDeletedWidget?: boolean;
+    hideAddedDiffsUnderline?: boolean;
+    isActive?: boolean;
+    isDeletedWidgetBelow?: boolean;
+    isInserted: boolean;
+    leftAnchorId?: string;
+    replacedCells: ReplacedCell[];
+    reveal?: RevealOptions;
+    shouldHideDeleted?: boolean;
+    showContributorTags?: boolean;
+    showIndicators?: boolean;
+    tagMountContext?: ContributorTagMountContext;
+}) => Decoration[];

package/dist/types/pm-plugins/decorations/utils/cellAttrs.d.ts

@@ -0,0 +1,13 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * A cell background as it renders: absent, empty and `"null"` — the string agent payloads send for
+ * no background — all mean the cell has none.
+ */
+export declare const normalizeCellBackground: (background: unknown) => string | null;
+/** Whether two cells render different backgrounds. */
+export declare const isCellBackgroundChanged: (left: PMNode, right: PMNode) => boolean;
+/**
+ * Whether two cells differ by an attribute that represents a change, such as their background or
+ * span, as opposed to only their content.
+ */
+export declare const isCellAttrChanged: (left: PMNode, right: PMNode) => boolean;

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

@@ -1,4 +1,4 @@
-import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
+import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 /** Where to look up a mark's renderer, and the view to render it against. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "26.0.0",
+	"version": "26.0.2",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -77,6 +77,10 @@
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"platform-feature-flags": {
+		"platform_editor_ai_suggestion_table_scroll_fix": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
 		"platform_editor_diff_reveal_animation": {
 			"type": "boolean"
 		},