@atlaskit/editor-plugin-show-diff 16.0.14 → 16.0.17

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 16.0.17
+
+### Patch Changes
+
+- [`bac902441a512`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bac902441a512) -
+  Keep layout column diff indicators aligned with their content instead of appearing beside the
+  comments footer, behind `platform_editor_ai_show_diff_patch_1`.
+- [`20d41af8d6f4c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/20d41af8d6f4c) -
+  EDITOR-9000 Fixes scroll to suggestion when it is in table with sticky header
+- Updated dependencies
+
+## 16.0.16
+
+### Patch Changes
+
+- [`b56b3a7dbfb5a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b56b3a7dbfb5a) -
+  [ux] Show contributor tags at the top-left of removed table rows and above table interaction
+  overlays and sticky header rows. Behind `confluence_ncs_step_diffing_version_history`.
+- Updated dependencies
+
+## 16.0.15
+
+### Patch Changes
+
+- [`442abbe2a88e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/442abbe2a88e0) -
+  Normalize documents before relaxed show-diff comparisons when Confluence version-history diffing
+  is enabled.
+- Updated dependencies
+
 ## 16.0.14
 
 ### Patch Changes

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

@@ -11,13 +11,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _prosemirrorChangeset = require("prosemirror-changeset");
+var _areDocsEqualByBlockStructureAndText = require("@atlaskit/editor-common/utils/areDocsEqualByBlockStructureAndText");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
-var _areDocsEqualByBlockStructureAndText = require("../areDocsEqualByBlockStructureAndText");
 var _createAnchorDecorationWidgets = require("../decorations/createAnchorDecorationWidgets");
 var _createBlockChangedDecoration = require("../decorations/createBlockChangedDecoration");
 var _createInlineChangedDecoration = require("../decorations/createInlineChangedDecoration");

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

@@ -220,6 +220,7 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
  *
  */
 var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnchorWidgets(_ref2) {
+  var _ref3, _parentTable$pos;
   var doc = _ref2.doc,
     from = _ref2.from,
     to = _ref2.to,
@@ -259,9 +260,14 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
   var parentCellOrRow = (0, _utils.findParentNodeClosestToPos)($from, function (ancestor) {
     return ['tableCell', 'tableHeader', 'tableRow'].includes(ancestor.type.name);
   });
-
-  // Render outside the table when inside one; otherwise keep the original pos.
-  var widgetPos = parentTable ? parentTable.pos : from;
+  var parentLayout = (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? (0, _utils.findParentNodeClosestToPos)($from, function (ancestor) {
+    return ancestor.type.name === 'layoutSection';
+  }) : undefined;
+  // Layouts flatten direct widget children with display: contents. Such a wrapper has no
+  // bounding box or positioning context, so measuring its top produces an offset from the
+  // viewport origin and displaces the indicator into content below the editor. Keep the
+  // wrapper outside the layout, just as we do for tables, but still measure the target node.
+  var widgetPos = (_ref3 = (_parentTable$pos = parentTable === null || parentTable === void 0 ? void 0 : parentTable.pos) !== null && _parentTable$pos !== void 0 ? _parentTable$pos : parentLayout === null || parentLayout === void 0 ? void 0 : parentLayout.pos) !== null && _ref3 !== void 0 ? _ref3 : from;
   // Measure the actual cell/row DOM when inside one; otherwise measure the
   // widget's own position.
   var measurePos = parentCellOrRow ? parentCellOrRow.pos : from;
@@ -360,11 +366,11 @@ var createAnchorNameSpan = exports.createAnchorNameSpan = function createAnchorN
   span.style.setProperty('anchor-name', "--".concat(anchorKey));
   return span;
 };
-var createAnchorSpanWidget = function createAnchorSpanWidget(_ref3) {
-  var pos = _ref3.pos,
-    diffId = _ref3.diffId,
-    anchorType = _ref3.anchorType,
-    side = _ref3.side;
+var createAnchorSpanWidget = function createAnchorSpanWidget(_ref4) {
+  var pos = _ref4.pos,
+    diffId = _ref4.diffId,
+    anchorType = _ref4.anchorType,
+    side = _ref4.side;
   return _view.Decoration.widget(pos, function () {
     return createAnchorNameSpan((0, _decorationKeys.buildAnchorDecorationKey)({
       diffId: diffId,
@@ -381,11 +387,11 @@ var createAnchorSpanWidget = function createAnchorSpanWidget(_ref3) {
  * Invisible `from`/`to` (and optional `left`) anchor widgets for one inline diff
  * range, so the `IndicatorBar` can align itself via CSS anchor positioning.
  */
-var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref4) {
-  var doc = _ref4.doc,
-    from = _ref4.from,
-    to = _ref4.to,
-    diffId = _ref4.diffId;
+var createInlineIndicatorAnchorWidgets = exports.createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref5) {
+  var doc = _ref5.doc,
+    from = _ref5.from,
+    to = _ref5.to,
+    diffId = _ref5.diffId;
   var leftAnchor = createLeftAnchorWidget({
     doc: doc,
     from: from,

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

@@ -11,6 +11,7 @@ var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _factory = require("./colorSchemes/factory");
 var _schemes = require("./colorSchemes/schemes");
@@ -250,7 +251,7 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
   });
   var style = tagAnchorName ? [nodeStyle, (0, _lazyNodeView.convertToInlineCss)({
     anchorName: "--".concat(tagAnchorName)
-  })].filter(Boolean).join(' ') : nodeStyle;
+  }), (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? _decorationKeys.scrollMarginTopStyle : undefined].filter(Boolean).join(' ') : nodeStyle;
   var className = getNodeClass(change.name);
   if (style || className) {
     decorations.push(_view.Decoration.node(change.from, change.to, _objectSpread({

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

@@ -19,6 +19,7 @@ var _factory = require("./colorSchemes/factory");
 var _schemes = require("./colorSchemes/schemes");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgetsStyles = require("./createChangedRowDecorationWidgets.styles.legacy");
+var _createContributorTagWidget = require("./createContributorTagWidget");
 var _decorationKeys = require("./decorationKeys");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
 var _tableCellEdgeAttrs = require("./utils/tableCellEdgeAttrs");
@@ -105,20 +106,40 @@ var extractChangedRows = function extractChangedRows(_ref) {
     }
   });
 
-  // Filter changes that never truly got deleted
+  // Filter changes that never truly got deleted. Compare the number of equivalent rows rather
+  // than only checking whether one still exists: deleting two of three identical empty rows should
+  // retain two changed rows even though the third remains in the new table.
+  var equivalentRowDeletionCounts = [];
   return changedRows.filter(function (changedRow) {
     // A replacement leaves every sibling row in place, so asking "does this row still exist
     // ANYWHERE in the new table?" can drop a genuinely rewritten row that happens to match a
-    // sibling. Compare it against the row at the same index instead. Deletions must keep the
-    // whole-table `some()`: their indices shift, so an index comparison would let every
-    // surviving row through and draw a widget for each one.
+    // sibling. Compare it against the row at the same index instead.
     if (handleRowReplacement) {
       var counterpart = tableNew.node.maybeChild(changedRow.rowIndex);
       return !counterpart || !(0, _document.areNodesEqualIgnoreAttrs)(counterpart, changedRow.rowNode);
     }
-    return !tableNew.node.children.some(function (newRow) {
-      return (0, _document.areNodesEqualIgnoreAttrs)(newRow, changedRow.rowNode);
+    var deletionCount = equivalentRowDeletionCounts.find(function (_ref2) {
+      var rowNode = _ref2.rowNode;
+      return (0, _document.areNodesEqualIgnoreAttrs)(rowNode, changedRow.rowNode);
     });
+    if (!deletionCount) {
+      var oldRowCount = tableOld.node.children.filter(function (oldRow) {
+        return (0, _document.areNodesEqualIgnoreAttrs)(oldRow, changedRow.rowNode);
+      }).length;
+      var newRowCount = tableNew.node.children.filter(function (newRow) {
+        return (0, _document.areNodesEqualIgnoreAttrs)(newRow, changedRow.rowNode);
+      }).length;
+      deletionCount = {
+        remaining: Math.max(0, oldRowCount - newRowCount),
+        rowNode: changedRow.rowNode
+      };
+      equivalentRowDeletionCounts.push(deletionCount);
+    }
+    if (deletionCount.remaining === 0) {
+      return false;
+    }
+    deletionCount.remaining--;
+    return true;
   });
 };
 
@@ -163,6 +184,9 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
   // is ADDED content, so it must not claim the "deleted" testid — page models match that as
   // removed content (same reasoning as `createTableCellContentWidgets`).
   tr.setAttribute('data-testid', (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted && (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? 'show-diff-changed-row' : 'show-diff-deleted-row');
+  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
+    tr.style.setProperty('scroll-margin-top', _decorationKeys.scrollMarginTopValue);
+  }
 
   // Serialize each cell in the row
   var cellIndex = 0;
@@ -201,11 +225,11 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, n
 /**
  * Expands a diff to include whole changed rows when table rows are affected
  */
-var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
-  var changes = _ref2.changes,
-    originalDoc = _ref2.originalDoc,
-    newDoc = _ref2.newDoc,
-    diffType = _ref2.diffType;
+var expandDiffForChangedRows = function expandDiffForChangedRows(_ref3) {
+  var changes = _ref3.changes,
+    originalDoc = _ref3.originalDoc,
+    newDoc = _ref3.newDoc,
+    diffType = _ref3.diffType;
   var rowInfo = [];
   var _iterator = _createForOfIteratorHelper(changes),
     _step;
@@ -234,17 +258,22 @@ var expandDiffForChangedRows = function expandDiffForChangedRows(_ref2) {
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-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,
-    diffType = _ref3.diffType,
-    _ref3$showIndicators = _ref3.showIndicators,
-    showIndicators = _ref3$showIndicators === void 0 ? false : _ref3$showIndicators;
+var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidgets = function createChangedRowDecorationWidgets(_ref4) {
+  var attributionKey = _ref4.attributionKey,
+    changes = _ref4.changes,
+    originalDoc = _ref4.originalDoc,
+    newDoc = _ref4.newDoc,
+    nodeViewSerializer = _ref4.nodeViewSerializer,
+    colorScheme = _ref4.colorScheme,
+    isActive = _ref4.isActive,
+    _ref4$isInserted = _ref4.isInserted,
+    isInserted = _ref4$isInserted === void 0 ? false : _ref4$isInserted,
+    diffType = _ref4.diffType,
+    _ref4$showIndicators = _ref4.showIndicators,
+    showIndicators = _ref4$showIndicators === void 0 ? false : _ref4$showIndicators,
+    _ref4$showContributor = _ref4.showContributorTags,
+    showContributorTags = _ref4$showContributor === void 0 ? false : _ref4$showContributor,
+    tagMountContext = _ref4.tagMountContext;
   // First, expand the changes to include complete deleted rows
   var changedRows = expandDiffForChangedRows({
     changes: changes.filter(function (change) {
@@ -261,8 +290,12 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
     var safeInsertPos = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, changedRow.fromB - 1,
     // -1 to find the first safe position from the table
     originalDoc.slice(changedRow.fromA, changedRow.toA));
-    var diffId = crypto.randomUUID();
+
+    // Stable while contributor tags are enabled so a decoration recalculation preserves the tag's
+    // identity and controller state.
+    var diffId = showContributorTags ? "widget-row-".concat(changedRow.fromA, "-").concat(changedRow.toA) : crypto.randomUUID();
     var decorations = [];
+    var rowAnchorNames = [];
 
     // `IndicatorBarContentComponent` renders a bar for every widget descriptor and anchors its
     // top and bottom to `anchor-<diffId>`. Without an element carrying that anchor name the bar
@@ -270,9 +303,9 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
     // bar covers only the row being changed. `createNodeChangedDecorationWidget` sets the same
     // property on its own widget DOM for non-table content; this path returns before reaching it.
     if (showIndicators && (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && (0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
-      rowDOM.style.setProperty('anchor-name', "--".concat((0, _decorationKeys.buildAnchorDecorationKey)({
+      rowAnchorNames.push((0, _decorationKeys.buildAnchorDecorationKey)({
         diffId: diffId
-      })));
+      }));
 
       // A table's content can extend past the doc margin, so the bar also needs a left anchor
       // measured against the table itself or it is clipped once the table is resized.
@@ -285,14 +318,47 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
         decorations.push(leftAnchor);
       }
     }
-    decorations.push(_view.Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
+    var tagAnchorName = showContributorTags && (0, _createContributorTagWidget.isContributorTagWidgetEnabled)() ? (0, _decorationKeys.buildAnchorDecorationKey)({
+      diffId: diffId,
+      anchorType: _decorationKeys.AnchorTypeKey.tag
+    }) : undefined;
+    var tagWidget = tagAnchorName ? (0, _createContributorTagWidget.createContributorTagWidget)({
+      anchorAtRangeStart: true,
+      anchorName: tagAnchorName,
+      diffId: diffId,
+      doc: newDoc,
+      from: safeInsertPos,
+      mountContext: tagMountContext,
+      to: safeInsertPos
+    }) : undefined;
+    if (tagAnchorName) {
+      // The tag host is a separate, table-safe widget. CSS anchor positioning aligns it to this
+      // synthetic row without placing non-cell DOM inside the `<tr>` or inheriting its deletion
+      // opacity and strikethrough.
+      rowAnchorNames.push(tagAnchorName);
+    }
+    if (rowAnchorNames.length > 0) {
+      rowDOM.style.setProperty('anchor-name', rowAnchorNames.map(function (anchorName) {
+        return "--".concat(anchorName);
+      }).join(', '));
+    }
+    if (tagWidget) {
+      // Lets the contributor tag reveal when any part of the deleted row is hovered.
+      rowDOM.setAttribute('data-diff-id', diffId);
+    }
+    var rowWidget = _view.Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
+      attributionKey: tagWidget ? attributionKey : undefined,
       colorScheme: colorScheme,
       decorationType: 'widget',
       diffId: diffId,
-      isActive: false,
+      isActive: isActive,
       isInserted: isInserted,
       diffType: diffType
-    }))));
+    })));
+    decorations.push(rowWidget);
+    if (tagWidget) {
+      decorations.push(tagWidget);
+    }
     return decorations;
   });
 };

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

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _buildContributorTagDom = require("../../ui/ContributorTag/buildContributorTagDom");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _isEmptyParagraphSlice = require("../utils/isEmptyParagraphSlice");
@@ -215,7 +216,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     diffId: diffId,
     mountContext: tagMountContext
   }) : undefined;
-  var inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined].filter(Boolean).join('');
+  var inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined, (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? _decorationKeys.scrollMarginTopStyle : undefined].filter(Boolean).join('');
   var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread({
     style: inlineStyle
   }, atomicInlineAttrs && {

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

@@ -80,6 +80,9 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
     // This helper only runs for added content, so use the "changed" testid — not
     // "deleted", which page models match as removed content.
     dom.setAttribute('data-testid', 'show-diff-changed-decoration');
+    if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
+      dom.style.setProperty('scroll-margin-top', _decorationKeys.scrollMarginTopValue);
+    }
 
     // Skip findSafeInsertPos: it walks forward to a schema-valid cell-insert point
     // and pushes the widget into the next cell. `targetPos` is the correct spot.
@@ -166,16 +169,20 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   }
   if (isTableRowContent) {
     return (0, _createChangedRowDecorationWidgets.createChangedRowDecorationWidgets)({
+      attributionKey: attributionKey,
       changes: [change],
       originalDoc: doc,
       newDoc: newDoc,
       nodeViewSerializer: nodeViewSerializer,
       colorScheme: colorScheme,
+      isActive: isActive,
       isInserted: isInserted,
       diffType: diffType,
       // Needed for the row's own indicator anchor; this path returns before the
       // `anchor-name` assignment further down.
-      showIndicators: showIndicators
+      showIndicators: showIndicators,
+      showContributorTags: showContributorTags,
+      tagMountContext: tagMountContext
     });
   }
   var serializer = nodeViewSerializer;
@@ -352,6 +359,9 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
+  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
+    dom.style.setProperty('scroll-margin-top', _decorationKeys.scrollMarginTopValue);
+  }
 
   // Needed even when the indicator bar is off, because a contributor tag also anchors against the
   // widget.
@@ -431,6 +441,9 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       defaultSpacer.dataset.testid = 'show-diff-default-margin-spacer';
       defaultSpacer.style.display = 'block';
       defaultSpacer.style.marginTop = "var(--ds-space-100, 8px)";
+      if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
+        defaultSpacer.style.setProperty('scroll-margin-top', _decorationKeys.scrollMarginTopValue);
+      }
       decorations.push(_view.Decoration.widget(safeInsertPos, defaultSpacer, _objectSpread({}, (0, _decorationKeys.buildDiffDecorationSpec)({
         colorScheme: colorScheme,
         decorationType: 'widget',

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

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildAnchorDecorationKey = exports.DiffDecorationKey = exports.DecorationFamily = exports.AnchorTypeKey = exports.AnchorDocMarginKey = void 0;
+exports.buildAnchorDecorationKey = exports.SCROLL_TARGET_MARGIN_CSS_PROPERTY = exports.DiffDecorationKey = exports.DecorationFamily = exports.AnchorTypeKey = exports.AnchorDocMarginKey = void 0;
 exports.buildAnchorDecorationSpec = buildAnchorDecorationSpec;
-exports.isDiffDecorationSpec = exports.isDiffDecoration = exports.isAnchorDecorationSpec = exports.extractDiffDescriptors = exports.buildDiffDecorationSpec = exports.buildDiffDecorationKey = exports.buildContributorTagDecorationSpec = void 0;
+exports.scrollMarginTopValue = exports.scrollMarginTopStyle = exports.isDiffDecorationSpec = exports.isDiffDecoration = exports.isAnchorDecorationSpec = exports.extractDiffDescriptors = exports.buildDiffDecorationSpec = exports.buildDiffDecorationKey = exports.buildContributorTagDecorationSpec = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isExtendedEnabled = require("../isExtendedEnabled");
@@ -21,6 +21,16 @@ var DecorationFamily = exports.DecorationFamily = {
   anchor: 'anchor',
   contributorTag: 'contributor-tag'
 };
+
+/**
+ * Navigation measures the target table header and writes this variable on the
+ * editor root immediately before scrolling. Diff decorations inherit it, so
+ * native scrolling leaves room for the header without DOM mutation on the
+ * ProseMirror-rendered suggestion.
+ */
+var SCROLL_TARGET_MARGIN_CSS_PROPERTY = exports.SCROLL_TARGET_MARGIN_CSS_PROPERTY = '--ak-editor-diff-additional-margin';
+var scrollMarginTopValue = exports.scrollMarginTopValue = "calc(".concat("var(--ds-space-400, 32px)", " + var(", SCROLL_TARGET_MARGIN_CSS_PROPERTY, ", 0px))");
+var scrollMarginTopStyle = exports.scrollMarginTopStyle = "scroll-margin-top: ".concat(scrollMarginTopValue, ";");
 var AnchorTypeKey = exports.AnchorTypeKey = {
   from: 'from',
   to: 'to',

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

@@ -258,7 +258,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
           if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && (0, _isExtendedEnabled.isExtendedEnabled)(pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType)) {
             var _cancelPendingScrollT;
             (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
-            cancelPendingScrollToDecoration = (0, _scrollToDiff.scrollToDecoration)(view, (0, _getScrollableDecorations.getScrollableDecorations)(pluginState.decorations, view.state.doc, pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType));
+            cancelPendingScrollToDecoration = (0, _scrollToDiff.scrollToDecoration)(view, (0, _getScrollableDecorations.getScrollableDecorations)(pluginState.decorations, view.state.doc, pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType), undefined, api);
 
             // Reset the flag so we don't scroll again on subsequent updates
             view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {
@@ -279,7 +279,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               // avoid a circular dependency; expand picks up the meta if loaded (no-op if not).
               api === null || api === void 0 || api.core.actions.execute((0, _expand.toggleExpandRange)(activeDecoration.from, activeDecoration.to, true));
             }
-            cancelPendingScrollToDecoration = (0, _scrollToDiff.scrollToDecoration)(view, scrollableDecorations, pluginState.activeIndex);
+            cancelPendingScrollToDecoration = (0, _scrollToDiff.scrollToDecoration)(view, scrollableDecorations, pluginState.activeIndex, api);
 
             // Stepping only scrolls — no focus moves and no content changes — so without this a
             // screen-reader user gets silence. Announced through the live region rather than by

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

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scrollToDecoration = void 0;
+var _styles = require("@atlaskit/editor-common/styles");
+var _getStickyHeaderHeight = require("@atlaskit/editor-common/table/get-sticky-header-height");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _decorationKeys = require("./decorations/decorationKeys");
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
@@ -15,6 +18,12 @@ var _decorationKeys = require("./decorations/decorationKeys");
  * outer scroll or mis-identifies the active scroll container.
  */
 var SCROLL_TOP_MARGIN_PX = 100;
+function updateScrollTargetMargin(view, targetPos, api) {
+  var _api$limitedMode;
+  var isLimitedModeEnabled = Boolean(api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.enabled);
+  var tableHeaderHeight = isLimitedModeEnabled ? undefined : (0, _getStickyHeaderHeight.getStickyHeaderHeight)(view, targetPos);
+  view.dom.style.setProperty(_decorationKeys.SCROLL_TARGET_MARGIN_CSS_PROPERTY, "".concat(tableHeaderHeight ? tableHeaderHeight + _styles.tableMarginTop : 0, "px"));
+}
 
 /**
  * Returns the resolved HTMLElement for a given DOM node, walking up to the
@@ -25,6 +34,13 @@ function scrollToSelection(node) {
   if (!(element instanceof HTMLElement)) {
     return;
   }
+  if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    });
+    return;
+  }
 
   // scroll-margin is included in scroll-into-view math; it does not change layout.
   var previousScrollMarginTop = element.style.scrollMarginTop;
@@ -47,6 +63,7 @@ function scrollToSelection(node) {
  */
 var scrollToDecoration = exports.scrollToDecoration = function scrollToDecoration(view, decorations) {
   var activeIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var api = arguments.length > 3 ? arguments[3] : undefined;
   var decoration = decorations[activeIndex];
   if (!decoration) {
     return function () {};
@@ -58,6 +75,9 @@ var scrollToDecoration = exports.scrollToDecoration = function scrollToDecoratio
   var target = (0, _decorationKeys.isDiffDecoration)(decoration) && decoration.spec.scrollTarget || decoration;
   var rafId = requestAnimationFrame(function () {
     rafId = null;
+    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

package/dist/cjs/ui/ContributorTag/buildContributorTagDom.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.buildContributorTagDom = exports.TAG_EXIT_FALLBACK_MS = exports.MAX_TAG_WIDTH = exports.CONTRIBUTOR_TAG_Z_INDEX = exports.CONTRIBUTOR_TAG_TOOLTIP_STYLES = exports.CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = exports.CONTRIBUTOR_TAG_NAME_TESTID = exports.CONTRIBUTOR_TAG_CLASS = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _constants = require("@atlaskit/editor-shared-styles/constants");
 var CONTRIBUTOR_TAG_TESTID = exports.CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
 var CONTRIBUTOR_TAG_NAME_TESTID = exports.CONTRIBUTOR_TAG_NAME_TESTID = 'diff-contributor-tag-name';
 
@@ -20,15 +21,15 @@ var MAX_TAG_WIDTH = exports.MAX_TAG_WIDTH = '200px';
 /**
  * The tag sits on the line above the change, so it has to paint over that line to be readable —
  * including any diff highlight already on it, which would otherwise slice straight through the tag.
- * Hence one level above `akEditorUnitZIndex`, where the highlights sit; exported because the
- * change's own highlight is stacked one level below it — see `stackBelowContributorTagStyle` in
- * `createInlineChangedDecoration`.
+ * It also has to paint above table interaction overlays and sticky-capable header rows, which use
+ * `akEditorSmallZIndex`. The change's own highlight is stacked one level below it — see
+ * `stackBelowContributorTagStyle` in `createInlineChangedDecoration`.
  *
  * Painting above its own highlight is only safe because the tag can never reach it: `bottom: 100%`
  * puts the root's bottom edge exactly on the highlight's top edge, and the root's `overflow: clip`
  * keeps every pixel the tag paints inside it.
  */
-var CONTRIBUTOR_TAG_Z_INDEX = exports.CONTRIBUTOR_TAG_Z_INDEX = 2;
+var CONTRIBUTOR_TAG_Z_INDEX = exports.CONTRIBUTOR_TAG_Z_INDEX = _constants.akEditorSmallZIndex + 1;
 
 /**
  * The plugin's whole side of the tag's motion: the fade and the hidden state are

package/dist/cjs/ui/IndicatorBar/IndicatorBar.js

@@ -1,4 +1,4 @@
-/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -1,4 +1,4 @@
-/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,13 +1,13 @@
 import isEqual from 'lodash/isEqual';
 import memoizeOne from 'memoize-one';
 import { ChangeSet, simplifyChanges } from 'prosemirror-changeset';
+import { areDocsEqualByBlockStructureAndText } from '@atlaskit/editor-common/utils/areDocsEqualByBlockStructureAndText';
 import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
 import { Mapping } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
 import { createDocMarginAnchorWidget } from '../decorations/createAnchorDecorationWidgets';
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
 import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';

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

@@ -220,6 +220,7 @@ export const createBlockIndicatorAnchorWidgets = ({
   to,
   diffId
 }) => {
+  var _ref, _parentTable$pos;
   const leftAnchor = createLeftAnchorWidget({
     doc,
     from,
@@ -251,9 +252,12 @@ export const createBlockIndicatorAnchorWidgets = ({
   const $from = doc.resolve(from);
   const parentTable = findParentNodeClosestToPos($from, ancestor => ancestor.type.name === 'table');
   const parentCellOrRow = findParentNodeClosestToPos($from, ancestor => ['tableCell', 'tableHeader', 'tableRow'].includes(ancestor.type.name));
-
-  // Render outside the table when inside one; otherwise keep the original pos.
-  const widgetPos = parentTable ? parentTable.pos : from;
+  const parentLayout = fg('platform_editor_ai_show_diff_patch_1') ? findParentNodeClosestToPos($from, ancestor => ancestor.type.name === 'layoutSection') : undefined;
+  // Layouts flatten direct widget children with display: contents. Such a wrapper has no
+  // bounding box or positioning context, so measuring its top produces an offset from the
+  // viewport origin and displaces the indicator into content below the editor. Keep the
+  // wrapper outside the layout, just as we do for tables, but still measure the target node.
+  const widgetPos = (_ref = (_parentTable$pos = parentTable === null || parentTable === void 0 ? void 0 : parentTable.pos) !== null && _parentTable$pos !== void 0 ? _parentTable$pos : parentLayout === null || parentLayout === void 0 ? void 0 : parentLayout.pos) !== null && _ref !== void 0 ? _ref : from;
   // Measure the actual cell/row DOM when inside one; otherwise measure the
   // widget's own position.
   const measurePos = parentCellOrRow ? parentCellOrRow.pos : from;

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

@@ -2,12 +2,13 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildDeletedBlockNodeStyle, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildInsertedBlockNodeStyle } from './colorSchemes/factory';
 import { colorSchemeRegistry, getLegacyColorScheme } from './colorSchemes/schemes';
 import { createBlockIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { createContributorTagWidget, isContributorTagWidgetEnabled } from './createContributorTagWidget';
-import { AnchorTypeKey, buildAnchorDecorationKey, buildDiffDecorationSpec } from './decorationKeys';
+import { AnchorTypeKey, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopStyle } from './decorationKeys';
 import { getBlockNodeStyleLegacy, resolveCellOverlayStyleLegacy } from './createBlockChangedDecoration.styles.legacy';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -230,11 +231,11 @@ export const createBlockChangedDecoration = ({
   });
   const style = tagAnchorName ? [nodeStyle, convertToInlineCss({
     anchorName: `--${tagAnchorName}`
-  })].filter(Boolean).join(' ') : nodeStyle;
+  }), fg('platform_editor_ai_show_diff_patch_1') ? scrollMarginTopStyle : undefined].filter(Boolean).join(' ') : nodeStyle;
   const className = getNodeClass(change.name);
   if (style || className) {
     decorations.push(Decoration.node(change.from, change.to, {
-      style: style,
+      style,
       'data-testid': 'show-diff-changed-decoration-node',
       class: className,
       // Lets the contributor tag find the block it captions on hover.