@atlaskit/editor-plugin-show-diff 8.1.13 → 8.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 8.3.0
+
+### Minor Changes
+
+- [`1b208e1f7d8f7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1b208e1f7d8f7) -
+  [ux] Adds the entry point for ai image generation to the media insert picker plugin as a new tab.
+  This feature is fully behind an experiment gate.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.2.0
+
+### Minor Changes
+
+- [`439f373a73aa2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/439f373a73aa2) -
+  EDITOR-6620: Add an option to scroll the diff into view.
+
 ## 8.1.13
 
 ### Patch Changes

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

@@ -17,7 +17,7 @@ var _calculateDiffDecorations = require("./calculateDiff/calculateDiffDecoration
 var _enforceCustomStepRegisters = require("./enforceCustomStepRegisters");
 var _getScrollableDecorations = require("./getScrollableDecorations");
 var _NodeViewSerializer = require("./NodeViewSerializer");
-var _scrollToActiveDecoration = require("./scrollToActiveDecoration");
+var _scrollToDiff = require("./scrollToDiff");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var showDiffPluginKey = exports.showDiffPluginKey = new _state2.PluginKey('showDiffPlugin');
@@ -154,27 +154,40 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               originalDoc: (0, _processRawValue.processRawValue)(view.state.schema, config.originalDoc)
             }));
           }
+          var pluginState = showDiffPluginKey.getState(view.state);
+
+          // Scroll to the first decoration when scrollIntoView was requested
+          if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+            var _cancelPendingScrollT, _pluginState$decorati;
+            (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
+            var allDecorations = ((_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
+            cancelPendingScrollToDecoration = (0, _scrollToDiff.scrollToFirstDecoration)(view, allDecorations);
+
+            // Reset the flag so we don't scroll again on subsequent updates
+            view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {
+              scrollIntoView: false
+            }));
+          }
 
           // Check for any potential scroll side-effects
           if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
-            var pluginState = showDiffPluginKey.getState(view.state);
             var activeIndexChanged = (pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && pluginState.activeIndex !== previousActiveIndex;
             previousActiveIndex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex;
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && activeIndexChanged) {
-              var _cancelPendingScrollT, _api$expand;
-              (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
+              var _cancelPendingScrollT2, _api$expand;
+              (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 || _cancelPendingScrollT2();
               var scrollableDecorations = (0, _getScrollableDecorations.getScrollableDecorations)(pluginState.decorations, view.state.doc);
               var activeDecoration = scrollableDecorations[pluginState.activeIndex];
               if (activeDecoration && api !== null && api !== void 0 && (_api$expand = api.expand) !== null && _api$expand !== void 0 && (_api$expand = _api$expand.commands) !== null && _api$expand !== void 0 && _api$expand.toggleExpandRange && (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
                 api === null || api === void 0 || api.core.actions.execute(api.expand.commands.toggleExpandRange(activeDecoration.from, activeDecoration.to, true));
               }
-              cancelPendingScrollToDecoration = (0, _scrollToActiveDecoration.scrollToActiveDecoration)(view, scrollableDecorations, pluginState.activeIndex);
+              cancelPendingScrollToDecoration = (0, _scrollToDiff.scrollToActiveDecoration)(view, scrollableDecorations, pluginState.activeIndex);
             }
           }
         },
         destroy: function destroy() {
-          var _cancelPendingScrollT2;
-          (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 || _cancelPendingScrollT2();
+          var _cancelPendingScrollT3;
+          (_cancelPendingScrollT3 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT3 === void 0 || _cancelPendingScrollT3();
           cancelPendingScrollToDecoration = null;
         }
       };

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

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollToFirstDecoration = exports.scrollToActiveDecoration = void 0;
+/**
+ * Extra space above the scrolled-to element so it does not sit flush under the
+ * viewport edge (helps with sticky table headers, toolbars, etc.).
+ *
+ * Implemented with `scroll-margin-top` so we still use the browser’s native
+ * `scrollIntoView`, which scrolls every relevant scrollport (nested containers
+ * and the window). A single manual `scrollTop` on one ancestor often misses
+ * outer scroll or mis-identifies the active scroll container.
+ */
+var SCROLL_TOP_MARGIN_PX = 100;
+
+/**
+ * Checks if element is not visible in the viewport, accounting
+ * for the scroll margin offset used during scrolling.
+ */
+function shouldScrollIntoView(element) {
+  var rect = element.getBoundingClientRect();
+  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+  return !(rect.top >= SCROLL_TOP_MARGIN_PX && rect.bottom <= viewportHeight);
+}
+
+/**
+ * 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;
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+
+  // scroll-margin is included in scroll-into-view math; it does not change layout.
+  var previousScrollMarginTop = element.style.scrollMarginTop;
+  element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
+  try {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    });
+  } finally {
+    element.style.scrollMarginTop = previousScrollMarginTop;
+  }
+}
+
+/**
+ * Schedules scrolling to the first diff decoration after the next frame.
+ * Unlike `scrollToActiveDecoration`, this does not require an active index —
+ * it simply scrolls to bring the first decoration into view.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+var scrollToFirstDecoration = exports.scrollToFirstDecoration = function scrollToFirstDecoration(view, decorations) {
+  var decoration = decorations[0];
+  if (!decoration) {
+    return function () {};
+  }
+  var rafId = requestAnimationFrame(function () {
+    var _decoration$spec, _decoration$type;
+    rafId = null;
+    // @ts-expect-error - decoration.type is not typed public API
+    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
+      // @ts-expect-error - decoration.type is not typed public API
+      var widgetDom = decoration.type.toDOM;
+      if (shouldScrollIntoView(widgetDom)) {
+        scrollToSelection(widgetDom);
+      }
+    } else {
+      var _view$domAtPos;
+      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      if (node instanceof HTMLElement && shouldScrollIntoView(node)) {
+        scrollToSelection(node);
+      }
+    }
+  });
+  return function () {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+};
+
+/**
+ * Schedules scrolling to the decoration at the given index after the next frame.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+var scrollToActiveDecoration = exports.scrollToActiveDecoration = function scrollToActiveDecoration(view, decorations, activeIndex) {
+  var decoration = decorations[activeIndex];
+  if (!decoration) {
+    return function () {};
+  }
+  var rafId = requestAnimationFrame(function () {
+    var _decoration$spec2;
+    rafId = null;
+    if (((_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.key) === 'diff-widget-active') {
+      var _decoration$type2;
+      // @ts-expect-error - decoration.type is not typed public API
+      var widgetDom = decoration === null || decoration === void 0 || (_decoration$type2 = decoration.type) === null || _decoration$type2 === void 0 ? void 0 : _decoration$type2.toDOM;
+      scrollToSelection(widgetDom);
+    } else {
+      var _view$domAtPos2;
+      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos2 = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos2 === void 0 ? void 0 : _view$domAtPos2.node;
+      scrollToSelection(node);
+    }
+  });
+  return function () {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+};

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

@@ -9,7 +9,7 @@ import { calculateDiffDecorations } from './calculateDiff/calculateDiffDecoratio
 import { enforceCustomStepRegisters } from './enforceCustomStepRegisters';
 import { getScrollableDecorations } from './getScrollableDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
-import { scrollToActiveDecoration } from './scrollToActiveDecoration';
+import { scrollToActiveDecoration, scrollToFirstDecoration } from './scrollToDiff';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
 export const createPlugin = (config, getIntl, api) => {
   if (fg('platform_editor_show_diff_equality_fallback')) {
@@ -159,15 +159,28 @@ export const createPlugin = (config, getIntl, api) => {
               originalDoc: processRawValue(view.state.schema, config.originalDoc)
             }));
           }
+          const pluginState = showDiffPluginKey.getState(view.state);
+
+          // Scroll to the first decoration when scrollIntoView was requested
+          if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+            var _cancelPendingScrollT, _pluginState$decorati;
+            (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 ? void 0 : _cancelPendingScrollT();
+            const allDecorations = ((_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
+            cancelPendingScrollToDecoration = scrollToFirstDecoration(view, allDecorations);
+
+            // Reset the flag so we don't scroll again on subsequent updates
+            view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {
+              scrollIntoView: false
+            }));
+          }
 
           // Check for any potential scroll side-effects
           if (fg('platform_editor_show_diff_scroll_navigation')) {
-            const pluginState = showDiffPluginKey.getState(view.state);
             const activeIndexChanged = (pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && pluginState.activeIndex !== previousActiveIndex;
             previousActiveIndex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex;
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && activeIndexChanged) {
-              var _cancelPendingScrollT, _api$expand, _api$expand$commands;
-              (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 ? void 0 : _cancelPendingScrollT();
+              var _cancelPendingScrollT2, _api$expand, _api$expand$commands;
+              (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 ? void 0 : _cancelPendingScrollT2();
               const scrollableDecorations = getScrollableDecorations(pluginState.decorations, view.state.doc);
               const activeDecoration = scrollableDecorations[pluginState.activeIndex];
               if (activeDecoration && api !== null && api !== void 0 && (_api$expand = api.expand) !== null && _api$expand !== void 0 && (_api$expand$commands = _api$expand.commands) !== null && _api$expand$commands !== void 0 && _api$expand$commands.toggleExpandRange && fg('platform_editor_show_diff_scroll_navigation')) {
@@ -178,8 +191,8 @@ export const createPlugin = (config, getIntl, api) => {
           }
         },
         destroy() {
-          var _cancelPendingScrollT2;
-          (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 ? void 0 : _cancelPendingScrollT2();
+          var _cancelPendingScrollT3;
+          (_cancelPendingScrollT3 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT3 === void 0 ? void 0 : _cancelPendingScrollT3();
           cancelPendingScrollToDecoration = null;
         }
       };

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

@@ -0,0 +1,115 @@
+/**
+ * Extra space above the scrolled-to element so it does not sit flush under the
+ * viewport edge (helps with sticky table headers, toolbars, etc.).
+ *
+ * Implemented with `scroll-margin-top` so we still use the browser’s native
+ * `scrollIntoView`, which scrolls every relevant scrollport (nested containers
+ * and the window). A single manual `scrollTop` on one ancestor often misses
+ * outer scroll or mis-identifies the active scroll container.
+ */
+const SCROLL_TOP_MARGIN_PX = 100;
+
+/**
+ * Checks if element is not visible in the viewport, accounting
+ * for the scroll margin offset used during scrolling.
+ */
+function shouldScrollIntoView(element) {
+  const rect = element.getBoundingClientRect();
+  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+  return !(rect.top >= SCROLL_TOP_MARGIN_PX && rect.bottom <= viewportHeight);
+}
+
+/**
+ * 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) {
+  const element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+
+  // scroll-margin is included in scroll-into-view math; it does not change layout.
+  const previousScrollMarginTop = element.style.scrollMarginTop;
+  element.style.scrollMarginTop = `${SCROLL_TOP_MARGIN_PX}px`;
+  try {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    });
+  } finally {
+    element.style.scrollMarginTop = previousScrollMarginTop;
+  }
+}
+
+/**
+ * Schedules scrolling to the first diff decoration after the next frame.
+ * Unlike `scrollToActiveDecoration`, this does not require an active index —
+ * it simply scrolls to bring the first decoration into view.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+export const scrollToFirstDecoration = (view, decorations) => {
+  const decoration = decorations[0];
+  if (!decoration) {
+    return () => {};
+  }
+  let rafId = requestAnimationFrame(() => {
+    var _decoration$spec, _decoration$spec$key, _decoration$type;
+    rafId = null;
+    // @ts-expect-error - decoration.type is not typed public API
+    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec$key = _decoration$spec.key) !== null && _decoration$spec$key !== void 0 && _decoration$spec$key.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
+      // @ts-expect-error - decoration.type is not typed public API
+      const widgetDom = decoration.type.toDOM;
+      if (shouldScrollIntoView(widgetDom)) {
+        scrollToSelection(widgetDom);
+      }
+    } else {
+      var _view$domAtPos;
+      const targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      const node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      if (node instanceof HTMLElement && shouldScrollIntoView(node)) {
+        scrollToSelection(node);
+      }
+    }
+  });
+  return () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+};
+
+/**
+ * Schedules scrolling to the decoration at the given index after the next frame.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+export const scrollToActiveDecoration = (view, decorations, activeIndex) => {
+  const decoration = decorations[activeIndex];
+  if (!decoration) {
+    return () => {};
+  }
+  let rafId = requestAnimationFrame(() => {
+    var _decoration$spec2;
+    rafId = null;
+    if (((_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.key) === 'diff-widget-active') {
+      var _decoration$type2;
+      // @ts-expect-error - decoration.type is not typed public API
+      const widgetDom = decoration === null || decoration === void 0 ? void 0 : (_decoration$type2 = decoration.type) === null || _decoration$type2 === void 0 ? void 0 : _decoration$type2.toDOM;
+      scrollToSelection(widgetDom);
+    } else {
+      var _view$domAtPos2;
+      const targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      const node = targetNode instanceof Element ? targetNode : (_view$domAtPos2 = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos2 === void 0 ? void 0 : _view$domAtPos2.node;
+      scrollToSelection(node);
+    }
+  });
+  return () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+};

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

@@ -12,7 +12,7 @@ import { calculateDiffDecorations } from './calculateDiff/calculateDiffDecoratio
 import { enforceCustomStepRegisters } from './enforceCustomStepRegisters';
 import { getScrollableDecorations } from './getScrollableDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
-import { scrollToActiveDecoration } from './scrollToActiveDecoration';
+import { scrollToActiveDecoration, scrollToFirstDecoration } from './scrollToDiff';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
 export var createPlugin = function createPlugin(config, getIntl, api) {
   if (fg('platform_editor_show_diff_equality_fallback')) {
@@ -147,15 +147,28 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
               originalDoc: processRawValue(view.state.schema, config.originalDoc)
             }));
           }
+          var pluginState = showDiffPluginKey.getState(view.state);
+
+          // Scroll to the first decoration when scrollIntoView was requested
+          if (pluginState !== null && pluginState !== void 0 && pluginState.scrollIntoView && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+            var _cancelPendingScrollT, _pluginState$decorati;
+            (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
+            var allDecorations = ((_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
+            cancelPendingScrollToDecoration = scrollToFirstDecoration(view, allDecorations);
+
+            // Reset the flag so we don't scroll again on subsequent updates
+            view.dispatch(view.state.tr.setMeta(showDiffPluginKey, {
+              scrollIntoView: false
+            }));
+          }
 
           // Check for any potential scroll side-effects
           if (fg('platform_editor_show_diff_scroll_navigation')) {
-            var pluginState = showDiffPluginKey.getState(view.state);
             var activeIndexChanged = (pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && pluginState.activeIndex !== previousActiveIndex;
             previousActiveIndex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex;
             if ((pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex) !== undefined && activeIndexChanged) {
-              var _cancelPendingScrollT, _api$expand;
-              (_cancelPendingScrollT = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT === void 0 || _cancelPendingScrollT();
+              var _cancelPendingScrollT2, _api$expand;
+              (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 || _cancelPendingScrollT2();
               var scrollableDecorations = getScrollableDecorations(pluginState.decorations, view.state.doc);
               var activeDecoration = scrollableDecorations[pluginState.activeIndex];
               if (activeDecoration && api !== null && api !== void 0 && (_api$expand = api.expand) !== null && _api$expand !== void 0 && (_api$expand = _api$expand.commands) !== null && _api$expand !== void 0 && _api$expand.toggleExpandRange && fg('platform_editor_show_diff_scroll_navigation')) {
@@ -166,8 +179,8 @@ export var createPlugin = function createPlugin(config, getIntl, api) {
           }
         },
         destroy: function destroy() {
-          var _cancelPendingScrollT2;
-          (_cancelPendingScrollT2 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT2 === void 0 || _cancelPendingScrollT2();
+          var _cancelPendingScrollT3;
+          (_cancelPendingScrollT3 = cancelPendingScrollToDecoration) === null || _cancelPendingScrollT3 === void 0 || _cancelPendingScrollT3();
           cancelPendingScrollToDecoration = null;
         }
       };

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

@@ -0,0 +1,115 @@
+/**
+ * Extra space above the scrolled-to element so it does not sit flush under the
+ * viewport edge (helps with sticky table headers, toolbars, etc.).
+ *
+ * Implemented with `scroll-margin-top` so we still use the browser’s native
+ * `scrollIntoView`, which scrolls every relevant scrollport (nested containers
+ * and the window). A single manual `scrollTop` on one ancestor often misses
+ * outer scroll or mis-identifies the active scroll container.
+ */
+var SCROLL_TOP_MARGIN_PX = 100;
+
+/**
+ * Checks if element is not visible in the viewport, accounting
+ * for the scroll margin offset used during scrolling.
+ */
+function shouldScrollIntoView(element) {
+  var rect = element.getBoundingClientRect();
+  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+  return !(rect.top >= SCROLL_TOP_MARGIN_PX && rect.bottom <= viewportHeight);
+}
+
+/**
+ * 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;
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+
+  // scroll-margin is included in scroll-into-view math; it does not change layout.
+  var previousScrollMarginTop = element.style.scrollMarginTop;
+  element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
+  try {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start'
+    });
+  } finally {
+    element.style.scrollMarginTop = previousScrollMarginTop;
+  }
+}
+
+/**
+ * Schedules scrolling to the first diff decoration after the next frame.
+ * Unlike `scrollToActiveDecoration`, this does not require an active index —
+ * it simply scrolls to bring the first decoration into view.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+export var scrollToFirstDecoration = function scrollToFirstDecoration(view, decorations) {
+  var decoration = decorations[0];
+  if (!decoration) {
+    return function () {};
+  }
+  var rafId = requestAnimationFrame(function () {
+    var _decoration$spec, _decoration$type;
+    rafId = null;
+    // @ts-expect-error - decoration.type is not typed public API
+    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
+      // @ts-expect-error - decoration.type is not typed public API
+      var widgetDom = decoration.type.toDOM;
+      if (shouldScrollIntoView(widgetDom)) {
+        scrollToSelection(widgetDom);
+      }
+    } else {
+      var _view$domAtPos;
+      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
+      if (node instanceof HTMLElement && shouldScrollIntoView(node)) {
+        scrollToSelection(node);
+      }
+    }
+  });
+  return function () {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+};
+
+/**
+ * Schedules scrolling to the decoration at the given index after the next frame.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+export var scrollToActiveDecoration = function scrollToActiveDecoration(view, decorations, activeIndex) {
+  var decoration = decorations[activeIndex];
+  if (!decoration) {
+    return function () {};
+  }
+  var rafId = requestAnimationFrame(function () {
+    var _decoration$spec2;
+    rafId = null;
+    if (((_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.key) === 'diff-widget-active') {
+      var _decoration$type2;
+      // @ts-expect-error - decoration.type is not typed public API
+      var widgetDom = decoration === null || decoration === void 0 || (_decoration$type2 = decoration.type) === null || _decoration$type2 === void 0 ? void 0 : _decoration$type2.toDOM;
+      scrollToSelection(widgetDom);
+    } else {
+      var _view$domAtPos2;
+      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
+      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos2 = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos2 === void 0 ? void 0 : _view$domAtPos2.node;
+      scrollToSelection(node);
+    }
+  });
+  return function () {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+};

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

@@ -19,6 +19,11 @@ export type ShowDiffPluginState = {
     isDisplayingChanges: boolean;
     isInverted?: boolean;
     originalDoc: PMNode | undefined;
+    /**
+     * When true, the view update handler should scroll to the first decoration
+     * and then reset this flag.
+     */
+    scrollIntoView?: boolean;
     steps: ProseMirrorStep[];
 };
 export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape, api: ExtractInjectionAPI<ShowDiffPlugin> | undefined) => SafePlugin<ShowDiffPluginState>;

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

@@ -0,0 +1,15 @@
+import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Schedules scrolling to the first diff decoration after the next frame.
+ * Unlike `scrollToActiveDecoration`, this does not require an active index —
+ * it simply scrolls to bring the first decoration into view.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+export declare const scrollToFirstDecoration: (view: EditorView, decorations: Decoration[]) => (() => void);
+/**
+ * Schedules scrolling to the decoration at the given index after the next frame.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+export declare const scrollToActiveDecoration: (view: EditorView, decorations: Decoration[], activeIndex: number) => (() => void);

package/dist/types/showDiffPluginType.d.ts

@@ -25,6 +25,11 @@ export type PMDiffParams = {
     hideDeletedDiffs?: boolean;
     isInverted?: boolean;
     originalDoc: Node;
+    /**
+     * When true, the editor will scroll to bring the first diff decoration into view
+     * after the diff is shown.
+     */
+    scrollIntoView?: boolean;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor
      */

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

@@ -19,6 +19,11 @@ export type ShowDiffPluginState = {
     isDisplayingChanges: boolean;
     isInverted?: boolean;
     originalDoc: PMNode | undefined;
+    /**
+     * When true, the view update handler should scroll to the first decoration
+     * and then reset this flag.
+     */
+    scrollIntoView?: boolean;
     steps: ProseMirrorStep[];
 };
 export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape, api: ExtractInjectionAPI<ShowDiffPlugin> | undefined) => SafePlugin<ShowDiffPluginState>;

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

@@ -0,0 +1,15 @@
+import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
+/**
+ * Schedules scrolling to the first diff decoration after the next frame.
+ * Unlike `scrollToActiveDecoration`, this does not require an active index —
+ * it simply scrolls to bring the first decoration into view.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+export declare const scrollToFirstDecoration: (view: EditorView, decorations: Decoration[]) => (() => void);
+/**
+ * Schedules scrolling to the decoration at the given index after the next frame.
+ *
+ * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
+ */
+export declare const scrollToActiveDecoration: (view: EditorView, decorations: Decoration[], activeIndex: number) => (() => void);

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

@@ -25,6 +25,11 @@ export type PMDiffParams = {
     hideDeletedDiffs?: boolean;
     isInverted?: boolean;
     originalDoc: Node;
+    /**
+     * When true, the editor will scroll to bring the first diff decoration into view
+     * after the diff is shown.
+     */
+    scrollIntoView?: boolean;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "8.1.13",
+	"version": "8.3.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.6.0",
+		"@atlaskit/adf-schema": "^52.7.0",
 		"@atlaskit/custom-steps": "^0.16.0",
 		"@atlaskit/editor-plugin-analytics": "^10.0.0",
 		"@atlaskit/editor-plugin-expand": "^11.0.0",
@@ -43,7 +43,7 @@
 		"prosemirror-changeset": "^2.3.1"
 	},
 	"devDependencies": {
-		"@atlaskit/adf-utils": "^19.27.0",
+		"@atlaskit/adf-utils": "^19.28.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-core": "^219.1.0",
@@ -58,7 +58,7 @@
 		"react-intl": "^6.6.2"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.13.0",
+		"@atlaskit/editor-common": "^114.14.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {

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

@@ -1,72 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.scrollToActiveDecoration = void 0;
-/**
- * Extra space above the scrolled-to element so it does not sit flush under the
- * viewport edge (helps with sticky table headers, toolbars, etc.).
- *
- * Implemented with `scroll-margin-top` so we still use the browser’s native
- * `scrollIntoView`, which scrolls every relevant scrollport (nested containers
- * and the window). A single manual `scrollTop` on one ancestor often misses
- * outer scroll or mis-identifies the active scroll container.
- */
-var SCROLL_TOP_MARGIN_PX = 100;
-
-/**
- * Scrolls to the current position/selection of the document. It does the same as scrollIntoView()
- * but without requiring the focus on the editor, thus it can be called at any time.
- */
-function scrollToSelection(node) {
-  var element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
-  if (!(element instanceof HTMLElement)) {
-    return;
-  }
-
-  // scroll-margin is included in scroll-into-view math; it does not change layout.
-  var previousScrollMarginTop = element.style.scrollMarginTop;
-  element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
-  try {
-    element.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    });
-  } finally {
-    element.style.scrollMarginTop = previousScrollMarginTop;
-  }
-}
-
-/**
- * Schedules scrolling to the decoration at the given index after the next frame.
- *
- * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
- */
-var scrollToActiveDecoration = exports.scrollToActiveDecoration = function scrollToActiveDecoration(view, decorations, activeIndex) {
-  var decoration = decorations[activeIndex];
-  if (!decoration) {
-    return function () {};
-  }
-  var rafId = requestAnimationFrame(function () {
-    var _decoration$spec;
-    rafId = null;
-    if (((_decoration$spec = decoration.spec) === null || _decoration$spec === void 0 ? void 0 : _decoration$spec.key) === 'diff-widget-active') {
-      var _decoration$type;
-      // @ts-expect-error - decoration.type is not typed public API
-      var widgetDom = decoration === null || decoration === void 0 || (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
-      scrollToSelection(widgetDom);
-    } else {
-      var _view$domAtPos;
-      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
-      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
-      scrollToSelection(node);
-    }
-  });
-  return function () {
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId);
-      rafId = null;
-    }
-  };
-};

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

@@ -1,66 +0,0 @@
-/**
- * Extra space above the scrolled-to element so it does not sit flush under the
- * viewport edge (helps with sticky table headers, toolbars, etc.).
- *
- * Implemented with `scroll-margin-top` so we still use the browser’s native
- * `scrollIntoView`, which scrolls every relevant scrollport (nested containers
- * and the window). A single manual `scrollTop` on one ancestor often misses
- * outer scroll or mis-identifies the active scroll container.
- */
-const SCROLL_TOP_MARGIN_PX = 100;
-
-/**
- * Scrolls to the current position/selection of the document. It does the same as scrollIntoView()
- * but without requiring the focus on the editor, thus it can be called at any time.
- */
-function scrollToSelection(node) {
-  const element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
-  if (!(element instanceof HTMLElement)) {
-    return;
-  }
-
-  // scroll-margin is included in scroll-into-view math; it does not change layout.
-  const previousScrollMarginTop = element.style.scrollMarginTop;
-  element.style.scrollMarginTop = `${SCROLL_TOP_MARGIN_PX}px`;
-  try {
-    element.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    });
-  } finally {
-    element.style.scrollMarginTop = previousScrollMarginTop;
-  }
-}
-
-/**
- * Schedules scrolling to the decoration at the given index after the next frame.
- *
- * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
- */
-export const scrollToActiveDecoration = (view, decorations, activeIndex) => {
-  const decoration = decorations[activeIndex];
-  if (!decoration) {
-    return () => {};
-  }
-  let rafId = requestAnimationFrame(() => {
-    var _decoration$spec;
-    rafId = null;
-    if (((_decoration$spec = decoration.spec) === null || _decoration$spec === void 0 ? void 0 : _decoration$spec.key) === 'diff-widget-active') {
-      var _decoration$type;
-      // @ts-expect-error - decoration.type is not typed public API
-      const widgetDom = decoration === null || decoration === void 0 ? void 0 : (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
-      scrollToSelection(widgetDom);
-    } else {
-      var _view$domAtPos;
-      const targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
-      const node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
-      scrollToSelection(node);
-    }
-  });
-  return () => {
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId);
-      rafId = null;
-    }
-  };
-};

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

@@ -1,66 +0,0 @@
-/**
- * Extra space above the scrolled-to element so it does not sit flush under the
- * viewport edge (helps with sticky table headers, toolbars, etc.).
- *
- * Implemented with `scroll-margin-top` so we still use the browser’s native
- * `scrollIntoView`, which scrolls every relevant scrollport (nested containers
- * and the window). A single manual `scrollTop` on one ancestor often misses
- * outer scroll or mis-identifies the active scroll container.
- */
-var SCROLL_TOP_MARGIN_PX = 100;
-
-/**
- * Scrolls to the current position/selection of the document. It does the same as scrollIntoView()
- * but without requiring the focus on the editor, thus it can be called at any time.
- */
-function scrollToSelection(node) {
-  var element = node instanceof Element ? node : (node === null || node === void 0 ? void 0 : node.parentElement) instanceof Element ? node.parentElement : null;
-  if (!(element instanceof HTMLElement)) {
-    return;
-  }
-
-  // scroll-margin is included in scroll-into-view math; it does not change layout.
-  var previousScrollMarginTop = element.style.scrollMarginTop;
-  element.style.scrollMarginTop = "".concat(SCROLL_TOP_MARGIN_PX, "px");
-  try {
-    element.scrollIntoView({
-      behavior: 'smooth',
-      block: 'start'
-    });
-  } finally {
-    element.style.scrollMarginTop = previousScrollMarginTop;
-  }
-}
-
-/**
- * Schedules scrolling to the decoration at the given index after the next frame.
- *
- * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
- */
-export var scrollToActiveDecoration = function scrollToActiveDecoration(view, decorations, activeIndex) {
-  var decoration = decorations[activeIndex];
-  if (!decoration) {
-    return function () {};
-  }
-  var rafId = requestAnimationFrame(function () {
-    var _decoration$spec;
-    rafId = null;
-    if (((_decoration$spec = decoration.spec) === null || _decoration$spec === void 0 ? void 0 : _decoration$spec.key) === 'diff-widget-active') {
-      var _decoration$type;
-      // @ts-expect-error - decoration.type is not typed public API
-      var widgetDom = decoration === null || decoration === void 0 || (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM;
-      scrollToSelection(widgetDom);
-    } else {
-      var _view$domAtPos;
-      var targetNode = view.nodeDOM(decoration === null || decoration === void 0 ? void 0 : decoration.from);
-      var node = targetNode instanceof Element ? targetNode : (_view$domAtPos = view.domAtPos(decoration === null || decoration === void 0 ? void 0 : decoration.from)) === null || _view$domAtPos === void 0 ? void 0 : _view$domAtPos.node;
-      scrollToSelection(node);
-    }
-  });
-  return function () {
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId);
-      rafId = null;
-    }
-  };
-};

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

@@ -1,7 +0,0 @@
-import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
-/**
- * Schedules scrolling to the decoration at the given index after the next frame.
- *
- * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
- */
-export declare const scrollToActiveDecoration: (view: EditorView, decorations: Decoration[], activeIndex: number) => (() => void);

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

@@ -1,7 +0,0 @@
-import type { EditorView, Decoration } from '@atlaskit/editor-prosemirror/view';
-/**
- * Schedules scrolling to the decoration at the given index after the next frame.
- *
- * @returns A function that cancels the scheduled `requestAnimationFrame` if it has not run yet.
- */
-export declare const scrollToActiveDecoration: (view: EditorView, decorations: Decoration[], activeIndex: number) => (() => void);