@atlaskit/editor-plugin-show-diff 16.0.16 → 16.1.0

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

@@ -83,7 +83,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
         let newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'REVEAL_COMPLETE') {
-            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0, _newPluginState1;
+            var _newPluginState$color, _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0, _newPluginState1, _newPluginState10;
             // REVEAL_COMPLETE repaints with the reveal dropped, so the decorations render their
             // ordinary resting style. Without it the reveal stays in state indefinitely and the
             // next unrelated repaint re-emits the hidden, zero-width highlight with no animation
@@ -110,29 +110,29 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer,
-              colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
+              colorScheme: (_newPluginState$color = (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.colorScheme) !== null && _newPluginState$color !== void 0 ? _newPluginState$color : config === null || config === void 0 ? void 0 : config.colorScheme,
               intl: getIntl(),
               activeIndexPos: newPluginState.activeIndexPos,
               api,
               tagMountContext,
-              ...(isExtendedEnabled((_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.diffType) ? {
-                isInverted: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.isInverted,
-                diffType: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.diffType,
-                hideDeletedDiffs: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.hideDeletedDiffs,
-                hideAddedDiffsUnderline: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideAddedDiffsUnderline,
-                showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
-                smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
-                deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
-                inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement,
+              ...(isExtendedEnabled((_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType) ? {
+                isInverted: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.isInverted,
+                diffType: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.diffType,
+                hideDeletedDiffs: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideDeletedDiffs,
+                hideAddedDiffsUnderline: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.hideAddedDiffsUnderline,
+                showIndicators: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.showIndicators,
+                smartThresholds: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.smartThresholds,
+                deletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.deletedDiffPlacement,
+                inlineDeletedDiffPlacement: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.inlineDeletedDiffPlacement,
                 // SHOW_DIFF only. The scroll-to-next recalculation further down deliberately
                 // omits this so stepping through changes cannot replay the choreography.
-                reveal: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.reveal
+                reveal: (_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.reveal
               } : {})
             });
             // Update the decorations and their ids
             newPluginState.decorations = decorations;
             newPluginState.contributorTags = contributorTags;
-            if (isExtendedEnabled((_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType)) {
+            if (isExtendedEnabled((_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType)) {
               newPluginState.diffDescriptors = diffDescriptors;
             }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -144,6 +144,8 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               activeIndex: undefined,
               contributorTags: [],
               reveal: undefined,
+              // Per-call override — do not let it leak into the next, unrelated `showDiff` call.
+              colorScheme: undefined,
               /**
                * Reset isInverted & diffType state when hiding diffs
                * Otherwise this should persist for the diff-showing session
@@ -157,11 +159,11 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               } : {})
             };
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
-            var _newPluginState10;
+            var _newPluginState11;
             // Update the active index in plugin state and recalculate decorations
-            const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType);
+            const decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState11 = newPluginState) === null || _newPluginState11 === void 0 ? void 0 : _newPluginState11.diffType);
             if (decorations.length > 0) {
-              var _currentPluginState$a;
+              var _currentPluginState$a, _newPluginState$color2, _newPluginState12;
               // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
               // This allows the UI to start with no selection and only highlight on first user interaction.
               let nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : -1;
@@ -194,7 +196,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer,
-                colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
+                colorScheme: (_newPluginState$color2 = (_newPluginState12 = newPluginState) === null || _newPluginState12 === void 0 ? void 0 : _newPluginState12.colorScheme) !== null && _newPluginState$color2 !== void 0 ? _newPluginState$color2 : config === null || config === void 0 ? void 0 : config.colorScheme,
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos,
                 api,
@@ -264,7 +266,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
           if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && isExtendedEnabled(pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType)) {
             var _cancelPendingScrollT;
             (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 ? void 0 : _cancelPendingScrollT();
-            cancelPendingScrollToDecoration = scrollToDecoration(view, getScrollableDecorations(pluginState.decorations, view.state.doc, pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType));
+            cancelPendingScrollToDecoration = scrollToDecoration(view, 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, {
@@ -285,7 +287,7 @@ export const createPlugin = (config, getIntl, api, onEditorView) => {
               // avoid a circular dependency; expand picks up the meta if loaded (no-op if not).
               api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleExpandRange(activeDecoration.from, activeDecoration.to, true));
             }
-            cancelPendingScrollToDecoration = scrollToDecoration(view, scrollableDecorations, pluginState.activeIndex);
+            cancelPendingScrollToDecoration = 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/es2019/pm-plugins/scrollToDiff.js

@@ -1,5 +1,7 @@
-import { isDiffDecoration } from './decorations/decorationKeys';
-
+import { tableMarginTop } from '@atlaskit/editor-common/styles';
+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';
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
  * viewport edge (helps with sticky table headers, toolbars, etc.).
@@ -10,6 +12,12 @@ import { isDiffDecoration } from './decorations/decorationKeys';
  * outer scroll or mis-identifies the active scroll container.
  */
 const SCROLL_TOP_MARGIN_PX = 100;
+function updateScrollTargetMargin(view, targetPos, api) {
+  var _api$limitedMode, _api$limitedMode$shar;
+  const isLimitedModeEnabled = Boolean(api === null || api === void 0 ? void 0 : (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : (_api$limitedMode$shar = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode$shar === void 0 ? void 0 : _api$limitedMode$shar.enabled);
+  const tableHeaderHeight = isLimitedModeEnabled ? undefined : getStickyHeaderHeight(view, targetPos);
+  view.dom.style.setProperty(SCROLL_TARGET_MARGIN_CSS_PROPERTY, `${tableHeaderHeight ? tableHeaderHeight + tableMarginTop : 0}px`);
+}
 
 /**
  * Returns the resolved HTMLElement for a given DOM node, walking up to the
@@ -20,6 +28,13 @@ function scrollToSelection(node) {
   if (!(element instanceof HTMLElement)) {
     return;
   }
+  if (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.
   const previousScrollMarginTop = element.style.scrollMarginTop;
@@ -40,7 +55,7 @@ function scrollToSelection(node) {
  *
  * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
  */
-export const scrollToDecoration = (view, decorations, activeIndex = 0) => {
+export const scrollToDecoration = (view, decorations, activeIndex = 0, api) => {
   const decoration = decorations[activeIndex];
   if (!decoration) {
     return () => {};
@@ -52,6 +67,9 @@ export const scrollToDecoration = (view, decorations, activeIndex = 0) => {
   const target = isDiffDecoration(decoration) && decoration.spec.scrollTarget || decoration;
   let rafId = requestAnimationFrame(() => {
     rafId = null;
+    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

package/dist/es2019/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 */
 import "./IndicatorBar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/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 */
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';

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

@@ -214,6 +214,7 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
  *
  */
 export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnchorWidgets(_ref2) {
+  var _ref3, _parentTable$pos;
   var doc = _ref2.doc,
     from = _ref2.from,
     to = _ref2.to,
@@ -253,9 +254,14 @@ export var createBlockIndicatorAnchorWidgets = function createBlockIndicatorAnch
   var parentCellOrRow = 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 = fg('platform_editor_ai_show_diff_patch_1') ? 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;
@@ -354,11 +360,11 @@ export var createAnchorNameSpan = function createAnchorNameSpan(anchorKey) {
   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 Decoration.widget(pos, function () {
     return createAnchorNameSpan(buildAnchorDecorationKey({
       diffId: diffId,
@@ -375,11 +381,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.
  */
-export var createInlineIndicatorAnchorWidgets = function createInlineIndicatorAnchorWidgets(_ref4) {
-  var doc = _ref4.doc,
-    from = _ref4.from,
-    to = _ref4.to,
-    diffId = _ref4.diffId;
+export var 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/esm/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -6,12 +6,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';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -243,7 +244,7 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
   });
   var style = tagAnchorName ? [nodeStyle, convertToInlineCss({
     anchorName: "--".concat(tagAnchorName)
-  })].filter(Boolean).join(' ') : nodeStyle;
+  }), fg('platform_editor_ai_show_diff_patch_1') ? scrollMarginTopStyle : undefined].filter(Boolean).join(' ') : nodeStyle;
   var className = getNodeClass(change.name);
   if (style || className) {
     decorations.push(Decoration.node(change.from, change.to, _objectSpread({

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

@@ -18,7 +18,7 @@ import { colorSchemeRegistry, getLegacyColorScheme } from './colorSchemes/scheme
 import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { resolveCellOverlayStyleLegacy, resolveDeletedRowStyleLegacy } from './createChangedRowDecorationWidgets.styles.legacy';
 import { createContributorTagWidget, isContributorTagWidgetEnabled } from './createContributorTagWidget';
-import { AnchorTypeKey, buildAnchorDecorationKey, buildDiffDecorationSpec } from './decorationKeys';
+import { AnchorTypeKey, buildAnchorDecorationKey, buildDiffDecorationSpec, scrollMarginTopValue } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { applyCellEdgeAttrs, getRowCellEdgeAttrs, getTableTopAndBottomCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
 /**
@@ -177,6 +177,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', isExtendedEnabled(diffType) && isInserted && fg('platform_editor_ai_show_diff_patch_1') ? 'show-diff-changed-row' : 'show-diff-deleted-row');
+  if (fg('platform_editor_ai_show_diff_patch_1')) {
+    tr.style.setProperty('scroll-margin-top', scrollMarginTopValue);
+  }
 
   // Serialize each cell in the row
   var cellIndex = 0;

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

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 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 { CONTRIBUTOR_TAG_Z_INDEX } from '../../ui/ContributorTag/buildContributorTagDom';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
@@ -13,7 +14,7 @@ import { colorSchemeRegistry, getLegacyColorScheme } from './colorSchemes/scheme
 import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { createContributorTagWidget, isContributorTagWidgetEnabled } from './createContributorTagWidget';
 import { getAtomicInlineNodeClassNameLegacy, resolveInlineChangedStyleLegacy } from './createInlineChangedDecoration.styles.legacy';
-import { buildDiffDecorationSpec } from './decorationKeys';
+import { buildDiffDecorationSpec, scrollMarginTopStyle } from './decorationKeys';
 import { REVEAL_ATTR, resolveRevealStyle } from './revealStyles';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
@@ -208,7 +209,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     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, fg('platform_editor_ai_show_diff_patch_1') ? scrollMarginTopStyle : undefined].filter(Boolean).join('');
   var decorations = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread({
     style: inlineStyle
   }, atomicInlineAttrs && {

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

@@ -8,7 +8,7 @@ import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
 import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, unmountContributorTag } from './createContributorTagWidget';
-import { buildDiffDecorationSpec, buildAnchorDecorationKey } from './decorationKeys';
+import { buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
 var isHeadingLevel = function isHeadingLevel(level) {
@@ -73,6 +73,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 (fg('platform_editor_ai_show_diff_patch_1')) {
+      dom.style.setProperty('scroll-margin-top', 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.
@@ -349,6 +352,9 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
+  if (fg('platform_editor_ai_show_diff_patch_1')) {
+    dom.style.setProperty('scroll-margin-top', scrollMarginTopValue);
+  }
 
   // Needed even when the indicator bar is off, because a contributor tag also anchors against the
   // widget.
@@ -428,6 +434,9 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
       defaultSpacer.dataset.testid = 'show-diff-default-margin-spacer';
       defaultSpacer.style.display = 'block';
       defaultSpacer.style.marginTop = "var(--ds-space-100, 8px)";
+      if (fg('platform_editor_ai_show_diff_patch_1')) {
+        defaultSpacer.style.setProperty('scroll-margin-top', scrollMarginTopValue);
+      }
       decorations.push(Decoration.widget(safeInsertPos, defaultSpacer, _objectSpread({}, buildDiffDecorationSpec({
         colorScheme: colorScheme,
         decorationType: 'widget',

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

@@ -12,6 +12,16 @@ export var 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.
+ */
+export var SCROLL_TARGET_MARGIN_CSS_PROPERTY = '--ak-editor-diff-additional-margin';
+export var scrollMarginTopValue = "calc(".concat("var(--ds-space-400, 32px)", " + var(", SCROLL_TARGET_MARGIN_CSS_PROPERTY, ", 0px))");
+export var scrollMarginTopStyle = "scroll-margin-top: ".concat(scrollMarginTopValue, ";");
 export var AnchorTypeKey = {
   from: 'from',
   to: 'to',

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

@@ -87,7 +87,7 @@ export var createPlugin = function createPlugin(config, getIntl, api, onEditorVi
         var newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'REVEAL_COMPLETE') {
-            var _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0, _newPluginState1;
+            var _newPluginState$color, _newPluginState, _newPluginState2, _newPluginState3, _newPluginState4, _newPluginState5, _newPluginState6, _newPluginState7, _newPluginState8, _newPluginState9, _newPluginState0, _newPluginState1, _newPluginState10;
             // REVEAL_COMPLETE repaints with the reveal dropped, so the decorations render their
             // ordinary resting style. Without it the reveal stays in state indefinitely and the
             // next unrelated repaint re-emits the hidden, zero-width highlight with no animation
@@ -107,23 +107,23 @@ export var createPlugin = function createPlugin(config, getIntl, api, onEditorVi
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer: nodeViewSerializer,
-                colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
+                colorScheme: (_newPluginState$color = (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.colorScheme) !== null && _newPluginState$color !== void 0 ? _newPluginState$color : config === null || config === void 0 ? void 0 : config.colorScheme,
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos,
                 api: api,
                 tagMountContext: tagMountContext
-              }, isExtendedEnabled((_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.diffType) ? {
-                isInverted: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.isInverted,
-                diffType: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.diffType,
-                hideDeletedDiffs: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.hideDeletedDiffs,
-                hideAddedDiffsUnderline: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideAddedDiffsUnderline,
-                showIndicators: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.showIndicators,
-                smartThresholds: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.smartThresholds,
-                deletedDiffPlacement: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.deletedDiffPlacement,
-                inlineDeletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.inlineDeletedDiffPlacement,
+              }, isExtendedEnabled((_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType) ? {
+                isInverted: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.isInverted,
+                diffType: (_newPluginState4 = newPluginState) === null || _newPluginState4 === void 0 ? void 0 : _newPluginState4.diffType,
+                hideDeletedDiffs: (_newPluginState5 = newPluginState) === null || _newPluginState5 === void 0 ? void 0 : _newPluginState5.hideDeletedDiffs,
+                hideAddedDiffsUnderline: (_newPluginState6 = newPluginState) === null || _newPluginState6 === void 0 ? void 0 : _newPluginState6.hideAddedDiffsUnderline,
+                showIndicators: (_newPluginState7 = newPluginState) === null || _newPluginState7 === void 0 ? void 0 : _newPluginState7.showIndicators,
+                smartThresholds: (_newPluginState8 = newPluginState) === null || _newPluginState8 === void 0 ? void 0 : _newPluginState8.smartThresholds,
+                deletedDiffPlacement: (_newPluginState9 = newPluginState) === null || _newPluginState9 === void 0 ? void 0 : _newPluginState9.deletedDiffPlacement,
+                inlineDeletedDiffPlacement: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.inlineDeletedDiffPlacement,
                 // SHOW_DIFF only. The scroll-to-next recalculation further down deliberately
                 // omits this so stepping through changes cannot replay the choreography.
-                reveal: (_newPluginState0 = newPluginState) === null || _newPluginState0 === void 0 ? void 0 : _newPluginState0.reveal
+                reveal: (_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.reveal
               } : {})),
               contributorTags = _calculateDiffDecorat.contributorTags,
               decorations = _calculateDiffDecorat.decorations,
@@ -131,7 +131,7 @@ export var createPlugin = function createPlugin(config, getIntl, api, onEditorVi
             // Update the decorations and their ids
             newPluginState.decorations = decorations;
             newPluginState.contributorTags = contributorTags;
-            if (isExtendedEnabled((_newPluginState1 = newPluginState) === null || _newPluginState1 === void 0 ? void 0 : _newPluginState1.diffType)) {
+            if (isExtendedEnabled((_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType)) {
               newPluginState.diffDescriptors = diffDescriptors;
             }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -140,7 +140,9 @@ export var createPlugin = function createPlugin(config, getIntl, api, onEditorVi
               isDisplayingChanges: false,
               activeIndex: undefined,
               contributorTags: [],
-              reveal: undefined
+              reveal: undefined,
+              // Per-call override — do not let it leak into the next, unrelated `showDiff` call.
+              colorScheme: undefined
             }, isExtendedEnabled(currentPluginState.diffType) ? {
               isInverted: false,
               diffType: getDefaultDiffType(),
@@ -149,11 +151,11 @@ export var createPlugin = function createPlugin(config, getIntl, api, onEditorVi
               diffDescriptors: []
             } : {});
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
-            var _newPluginState10;
+            var _newPluginState11;
             // Update the active index in plugin state and recalculate decorations
-            var _decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState10 = newPluginState) === null || _newPluginState10 === void 0 ? void 0 : _newPluginState10.diffType);
+            var _decorations = getScrollableDecorations(currentPluginState.decorations, newState.doc, (_newPluginState11 = newPluginState) === null || _newPluginState11 === void 0 ? void 0 : _newPluginState11.diffType);
             if (_decorations.length > 0) {
-              var _currentPluginState$a;
+              var _currentPluginState$a, _newPluginState$color2, _newPluginState12;
               // Initialize to -1 if undefined so that the first "next" scroll takes us to index 0 (first change).
               // This allows the UI to start with no selection and only highlight on first user interaction.
               var nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : -1;
@@ -181,7 +183,7 @@ export var createPlugin = function createPlugin(config, getIntl, api, onEditorVi
                   state: newState,
                   pluginState: newPluginState,
                   nodeViewSerializer: nodeViewSerializer,
-                  colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
+                  colorScheme: (_newPluginState$color2 = (_newPluginState12 = newPluginState) === null || _newPluginState12 === void 0 ? void 0 : _newPluginState12.colorScheme) !== null && _newPluginState$color2 !== void 0 ? _newPluginState$color2 : config === null || config === void 0 ? void 0 : config.colorScheme,
                   intl: getIntl(),
                   activeIndexPos: newPluginState.activeIndexPos,
                   api: api,
@@ -251,7 +253,7 @@ export var createPlugin = function createPlugin(config, getIntl, api, onEditorVi
           if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && isExtendedEnabled(pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType)) {
             var _cancelPendingScrollT;
             (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
-            cancelPendingScrollToDecoration = scrollToDecoration(view, getScrollableDecorations(pluginState.decorations, view.state.doc, pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffType));
+            cancelPendingScrollToDecoration = scrollToDecoration(view, 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, {
@@ -272,7 +274,7 @@ export var createPlugin = function createPlugin(config, getIntl, api, onEditorVi
               // avoid a circular dependency; expand picks up the meta if loaded (no-op if not).
               api === null || api === void 0 || api.core.actions.execute(toggleExpandRange(activeDecoration.from, activeDecoration.to, true));
             }
-            cancelPendingScrollToDecoration = scrollToDecoration(view, scrollableDecorations, pluginState.activeIndex);
+            cancelPendingScrollToDecoration = 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/esm/pm-plugins/scrollToDiff.js

@@ -1,5 +1,7 @@
-import { isDiffDecoration } from './decorations/decorationKeys';
-
+import { tableMarginTop } from '@atlaskit/editor-common/styles';
+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';
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
  * viewport edge (helps with sticky table headers, toolbars, etc.).
@@ -10,6 +12,12 @@ import { isDiffDecoration } from './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 : 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
@@ -20,6 +28,13 @@ function scrollToSelection(node) {
   if (!(element instanceof HTMLElement)) {
     return;
   }
+  if (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;
@@ -42,6 +57,7 @@ function scrollToSelection(node) {
  */
 export var 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 () {};
@@ -53,6 +69,9 @@ export var scrollToDecoration = function scrollToDecoration(view, decorations) {
   var target = isDiffDecoration(decoration) && decoration.spec.scrollTarget || decoration;
   var rafId = requestAnimationFrame(function () {
     rafId = null;
+    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

package/dist/esm/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 */
 import "./IndicatorBar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/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 */
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';

package/dist/types/entry-points/show-diff-plugin-type.d.ts

@@ -1 +1 @@
-export type { DeletedDiffPlacement, DeletedDiffWidget, DiffContributorProfile, DiffParams, DiffStepAttribution, DiffType, PMDiffParams, RevealMode, RevealOptions, ShowDiffParams, ShowDiffPlugin, SmartDiffThresholds, StepWithAttribution, } from '../showDiffPluginType';
+export type { ColorScheme, DeletedDiffPlacement, DeletedDiffWidget, DiffContributorProfile, DiffParams, DiffStepAttribution, DiffType, PMDiffParams, RevealMode, RevealOptions, ShowDiffParams, ShowDiffPlugin, SmartDiffThresholds, StepWithAttribution, } from '../showDiffPluginType';

package/dist/types/pm-plugins/decorations/colorSchemes/attributions.d.ts

@@ -1,6 +1,6 @@
 import type { Change } from 'prosemirror-changeset';
 import type { DiffContributors, DiffStepAttribution, TagContributor } from '../../../showDiffPluginType';
-import { type AdsAccentColor, type ColorScheme, type PublicColorScheme } from './types';
+import { type AdsAccentColor, type ColorScheme } from './types';
 export type DiffAttributionSpanData = DiffStepAttribution & {
     stepIndex: number;
 };
@@ -31,4 +31,4 @@ export declare const createAttributionColorMap: (stepAttributions: Array<DiffSte
  * back to the latest overlapping attributed step.
  */
 export declare const getAttributionKeyForChange: (change: Change, attributedChanges: Change[]) => string | undefined;
-export declare const getColorSchemeForChange: (change: Change, attributedChanges: Change[], attributionColors: Map<string, AdsAccentColor>, fallback: PublicColorScheme | undefined) => ColorScheme | undefined;
+export declare const getColorSchemeForChange: (change: Change, attributedChanges: Change[], attributionColors: Map<string, AdsAccentColor>, fallback: ColorScheme | undefined) => ColorScheme | undefined;

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

@@ -10,6 +10,15 @@ export declare const DecorationFamily: {
     readonly anchor: 'anchor';
     readonly 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.
+ */
+export declare const SCROLL_TARGET_MARGIN_CSS_PROPERTY = "--ak-editor-diff-additional-margin";
+export declare const scrollMarginTopValue: string;
+export declare const scrollMarginTopStyle: string;
 type DecorationFamilyValue = (typeof DecorationFamily)[keyof typeof DecorationFamily];
 type BaseDecorationSpec<TFamily extends DecorationFamilyValue> = {
     decorationFamily: TFamily;

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

@@ -6,7 +6,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform-override';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import type { ContributorTagModel, DeletedDiffPlacement, DiffDescriptor, DiffParams, DiffStepAttribution, DiffType, InlineDeletedDiffPlacement, RevealOptions, ShowDiffPlugin, SmartDiffThresholds } from '../showDiffPluginType';
+import type { ColorScheme, ContributorTagModel, DeletedDiffPlacement, DiffDescriptor, DiffParams, DiffStepAttribution, DiffType, InlineDeletedDiffPlacement, RevealOptions, ShowDiffPlugin, SmartDiffThresholds } from '../showDiffPluginType';
 import type { ResolvedDiffContributors } from './decorations/colorSchemes/attributions';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
 export type ShowDiffPluginState = {
@@ -15,6 +15,12 @@ export type ShowDiffPluginState = {
         from: number;
         to: number;
     };
+    /**
+     * Per-call override, set via SHOW_DIFF meta. Falls back to the plugin's configured
+     * `DiffParams.colorScheme` (see `createPlugin`'s `config` argument) when unset, and persists
+     * across `SCROLL_TO_NEXT`/`SCROLL_TO_PREVIOUS` repaints of the same diff. Reset on HIDE_DIFF.
+     */
+    colorScheme?: ColorScheme;
     /** Set via SHOW_DIFF meta, after `normalizeShowDiffParams` has keyed the public list. */
     contributors?: ResolvedDiffContributors;
     /** Resolved per calculation, never set via meta. */

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

@@ -1,8 +1,12 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
+import type { ShowDiffPlugin } from '../showDiffPluginType';
+type PluginInjectionAPI = ExtractInjectionAPI<ShowDiffPlugin>;
 /**
  * Schedules scrolling to the decoration at the given index after the next frame. Defaults to the
  * first decoration when no index is provided.
  *
  * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
  */
-export declare const scrollToDecoration: (view: EditorView, decorations: Decoration[], activeIndex?: number) => (() => void);
+export declare const scrollToDecoration: (view: EditorView, decorations: Decoration[], activeIndex?: number, api?: PluginInjectionAPI) => (() => void);
+export {};