@atlaskit/editor-plugin-show-diff 4.0.14 → 4.1.0

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

@@ -1,8 +1,9 @@
 import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey, NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 export const showDiffPluginKey = new PluginKey('showDiffPlugin');
@@ -15,6 +16,42 @@ export const createPlugin = (config, getIntl) => {
   };
   return new SafePlugin({
     key: showDiffPluginKey,
+    appendTransaction(transactions, oldState, newState) {
+      var _pluginState$activeIn;
+      if (!fg('platform_editor_show_diff_scroll_navigation')) {
+        return;
+      }
+      // Check if any transaction contains scroll actions
+      const scrollTransaction = transactions.find(tr => {
+        var _tr$getMeta, _tr$getMeta2;
+        return ((_tr$getMeta = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.action) === 'SCROLL_TO_NEXT' || ((_tr$getMeta2 = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.action) === 'SCROLL_TO_PREVIOUS';
+      });
+      if (!scrollTransaction) {
+        return;
+      }
+      const pluginState = showDiffPluginKey.getState(newState);
+      if (!pluginState || pluginState.decorations.find().length === 0) {
+        return;
+      }
+      const decorations = pluginState.decorations.find();
+      const decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
+      if (!decoration) {
+        return;
+      }
+      const {
+        from,
+        to
+      } = decoration;
+      const $pos = newState.doc.resolve(from);
+      const isNodeSelection = $pos.nodeAfter && $pos.nodeAfter.nodeSize === to - from && !$pos.nodeAfter.isInline;
+      const tr = newState.tr;
+      if (isNodeSelection) {
+        tr.setSelection(NodeSelection.create(newState.doc, from));
+      } else {
+        tr.setSelection(TextSelection.create(newState.doc, from));
+      }
+      return tr.scrollIntoView();
+    },
     state: {
       init(_, _state) {
         // We do initial setup after we setup the editor view
@@ -34,7 +71,8 @@ export const createPlugin = (config, getIntl) => {
             newPluginState = {
               ...currentPluginState,
               ...meta,
-              isDisplayingChanges: true
+              isDisplayingChanges: true,
+              activeIndex: 0
             };
             // Calculate and store decorations in state
             const decorations = calculateDiffDecorations({
@@ -42,7 +80,8 @@ export const createPlugin = (config, getIntl) => {
               pluginState: newPluginState,
               nodeViewSerializer,
               colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
-              intl: getIntl()
+              intl: getIntl(),
+              activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined
             });
             // Update the decorations
             newPluginState.decorations = decorations;
@@ -51,8 +90,40 @@ export const createPlugin = (config, getIntl) => {
               ...currentPluginState,
               ...meta,
               decorations: DecorationSet.empty,
-              isDisplayingChanges: false
+              isDisplayingChanges: false,
+              activeIndex: undefined
             };
+          } 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') && fg('platform_editor_show_diff_scroll_navigation')) {
+            // Update the active index in plugin state and recalculate decorations
+            const decorations = currentPluginState.decorations.find();
+            if (decorations.length > 0) {
+              var _currentPluginState$a;
+              let nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : 0;
+              if (meta.action === 'SCROLL_TO_NEXT') {
+                nextIndex = (nextIndex + 1) % decorations.length;
+              } else {
+                nextIndex = (nextIndex - 1 + decorations.length) % decorations.length;
+              }
+              const activeDecoration = decorations[nextIndex];
+              newPluginState = {
+                ...currentPluginState,
+                activeIndex: nextIndex,
+                activeIndexPos: activeDecoration ? {
+                  from: activeDecoration.from,
+                  to: activeDecoration.to
+                } : undefined
+              };
+              // Recalculate decorations with the new active index
+              const updatedDecorations = calculateDiffDecorations({
+                state: newState,
+                pluginState: newPluginState,
+                nodeViewSerializer,
+                colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+                intl: getIntl(),
+                activeIndexPos: newPluginState.activeIndexPos
+              });
+              newPluginState.decorations = updatedDecorations;
+            }
           } else {
             newPluginState = {
               ...currentPluginState,

package/dist/es2019/showDiffPlugin.js

@@ -20,6 +20,20 @@ export const showDiffPlugin = ({
         steps: [],
         action: 'HIDE_DIFF'
       });
+    },
+    scrollToNext: ({
+      tr
+    }) => {
+      return tr.setMeta(showDiffPluginKey, {
+        action: 'SCROLL_TO_NEXT'
+      });
+    },
+    scrollToPrevious: ({
+      tr
+    }) => {
+      return tr.setMeta(showDiffPluginKey, {
+        action: 'SCROLL_TO_PREVIOUS'
+      });
     }
   },
   pmPlugins() {
@@ -34,13 +48,16 @@ export const showDiffPlugin = ({
     var _pluginState$decorati;
     if (!editorState) {
       return {
-        isDisplayingChanges: false
+        isDisplayingChanges: false,
+        activeIndex: undefined
       };
     }
     const pluginState = showDiffPluginKey.getState(editorState);
     const decorationCount = (pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
     return {
-      isDisplayingChanges: decorationCount.length > 0
+      isDisplayingChanges: decorationCount.length > 0,
+      activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,
+      numberOfChanges: decorationCount.length
     };
   }
 });

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

@@ -68,7 +68,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
     pluginState = _ref.pluginState,
     nodeViewSerializer = _ref.nodeViewSerializer,
     colourScheme = _ref.colourScheme,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    activeIndexPos = _ref.activeIndexPos;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -109,18 +110,21 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
   var optimizedChanges = optimizeChanges(changes);
   var decorations = [];
   optimizedChanges.forEach(function (change) {
+    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration(change, colourScheme));
+      decorations.push(createInlineChangedDecoration(change, colourScheme, isActive));
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme)));
     }
     if (change.deleted.length > 0) {
+      var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
       var decoration = createDeletedContentDecoration({
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
         colourScheme: colourScheme,
         newDoc: tr.doc,
-        intl: intl
+        intl: intl,
+        isActive: _isActive
       });
       if (decoration) {
         decorations.push.apply(decorations, _toConsumableArray(decoration));
@@ -128,7 +132,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref)
     }
   });
   getMarkChangeRanges(steps).forEach(function (change) {
-    decorations.push(createInlineChangedDecoration(change, colourScheme));
+    var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    decorations.push(createInlineChangedDecoration(change, colourScheme, isActive));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
     decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(tr.doc, change.fromB, change.toB, colourScheme)));
@@ -144,13 +149,15 @@ function (_ref2, _ref3) {
     pluginState = _ref4$.pluginState,
     state = _ref4$.state,
     colourScheme = _ref4$.colourScheme,
-    intl = _ref4$.intl;
+    intl = _ref4$.intl,
+    activeIndexPos = _ref4$.activeIndexPos;
   var _ref5 = _slicedToArray(_ref3, 1),
     _ref5$ = _ref5[0],
     lastPluginState = _ref5$.pluginState,
     lastState = _ref5$.state,
     lastColourScheme = _ref5$.colourScheme,
-    lastIntl = _ref5$.intl;
+    lastIntl = _ref5$.intl,
+    lastActiveIndexPos = _ref5$.activeIndexPos;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref6 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale) !== null && _ref6 !== void 0 ? _ref6 : false;
+  return (_ref6 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colourScheme === lastColourScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref6 !== void 0 ? _ref6 : false;
 });

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

@@ -12,6 +12,13 @@ var editingStyle = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
+var editingStyleActive = convertToInlineCss({
+  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-purple, #803FA5)"
+});
 var traditionalInsertStyle = convertToInlineCss({
   background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
   textDecoration: 'underline',
@@ -19,6 +26,13 @@ var traditionalInsertStyle = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
 });
+var traditionalInsertStyleActive = convertToInlineCss({
+  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
+});
 
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -27,8 +41,15 @@ var traditionalInsertStyle = convertToInlineCss({
  * @returns Prosemirror inline decoration
  */
 export var createInlineChangedDecoration = function createInlineChangedDecoration(change, colourScheme) {
+  var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var style;
+  if (colourScheme === 'traditional') {
+    style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+  } else {
+    style = isActive ? editingStyleActive : editingStyle;
+  }
   return Decoration.inline(change.fromB, change.toB, {
-    style: colourScheme === 'traditional' ? traditionalInsertStyle : editingStyle,
+    style: style,
     'data-testid': 'show-diff-changed-decoration'
   }, {});
 };
@@ -106,12 +127,26 @@ var deletedContentStyle = convertToInlineCss({
   position: 'relative',
   opacity: 0.6
 });
+var deletedContentStyleActive = convertToInlineCss({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
 var deletedContentStyleNew = convertToInlineCss({
   color: "var(--ds-text-accent-gray, #505258)",
   textDecoration: 'line-through',
   position: 'relative',
   opacity: 0.8
 });
+var deletedContentStyleNewActive = convertToInlineCss({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
 var deletedContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -140,7 +175,14 @@ export var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbo
   return colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 };
 export var getDeletedContentStyle = function getDeletedContentStyle(colourScheme) {
-  return colourScheme === 'traditional' ? deletedTraditionalContentStyle : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colourScheme === 'traditional') {
+    return deletedTraditionalContentStyle;
+  }
+  if (isActive) {
+    return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
+  }
+  return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };
 var getNodeClass = function getNodeClass(name) {
   switch (name) {
@@ -170,7 +212,9 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
     nodeViewSerializer = _ref.nodeViewSerializer,
     colourScheme = _ref.colourScheme,
     newDoc = _ref.newDoc,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
@@ -206,7 +250,6 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
    * and if it's the first or last content, we go in however many the sliced Open
    * or sliced End depth is and match only the entire node.
    */
-
   slice.content.forEach(function (node) {
     // Create a wrapper for each node with strikethrough
     var createWrapperWithStrikethrough = function createWrapperWithStrikethrough() {
@@ -215,7 +258,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
         position: 'relative',
         width: 'fit-content'
       });
-      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme)));
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colourScheme, isActive)));
       var strikethrough = document.createElement('span');
       strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
       wrapper.append(strikethrough);
@@ -306,7 +349,7 @@ export var createDeletedContentDecoration = function createDeletedContentDecorat
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colourScheme);
+        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colourScheme, isActive);
         _wrapper2.append(fallbackNode);
         dom.append(_wrapper2);
       }

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

@@ -156,9 +156,9 @@ export var createBlockNodeWrapper = function createBlockNodeWrapper() {
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-export var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colourScheme) {
+export var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colourScheme, isActive) {
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme));
+  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme, isActive));
   return wrapper;
 };
 

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

@@ -3,9 +3,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey, NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
@@ -18,6 +19,40 @@ export var createPlugin = function createPlugin(config, getIntl) {
   };
   return new SafePlugin({
     key: showDiffPluginKey,
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var _pluginState$activeIn;
+      if (!fg('platform_editor_show_diff_scroll_navigation')) {
+        return;
+      }
+      // Check if any transaction contains scroll actions
+      var scrollTransaction = transactions.find(function (tr) {
+        var _tr$getMeta, _tr$getMeta2;
+        return ((_tr$getMeta = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.action) === 'SCROLL_TO_NEXT' || ((_tr$getMeta2 = tr.getMeta(showDiffPluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.action) === 'SCROLL_TO_PREVIOUS';
+      });
+      if (!scrollTransaction) {
+        return;
+      }
+      var pluginState = showDiffPluginKey.getState(newState);
+      if (!pluginState || pluginState.decorations.find().length === 0) {
+        return;
+      }
+      var decorations = pluginState.decorations.find();
+      var decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
+      if (!decoration) {
+        return;
+      }
+      var from = decoration.from,
+        to = decoration.to;
+      var $pos = newState.doc.resolve(from);
+      var isNodeSelection = $pos.nodeAfter && $pos.nodeAfter.nodeSize === to - from && !$pos.nodeAfter.isInline;
+      var tr = newState.tr;
+      if (isNodeSelection) {
+        tr.setSelection(NodeSelection.create(newState.doc, from));
+      } else {
+        tr.setSelection(TextSelection.create(newState.doc, from));
+      }
+      return tr.scrollIntoView();
+    },
     state: {
       init: function init(_, _state) {
         // We do initial setup after we setup the editor view
@@ -35,7 +70,8 @@ export var createPlugin = function createPlugin(config, getIntl) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
             // Update the plugin state with the new metadata
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
-              isDisplayingChanges: true
+              isDisplayingChanges: true,
+              activeIndex: 0
             });
             // Calculate and store decorations in state
             var decorations = calculateDiffDecorations({
@@ -43,15 +79,47 @@ export var createPlugin = function createPlugin(config, getIntl) {
               pluginState: newPluginState,
               nodeViewSerializer: nodeViewSerializer,
               colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
-              intl: getIntl()
+              intl: getIntl(),
+              activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined
             });
             // Update the decorations
             newPluginState.decorations = decorations;
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               decorations: DecorationSet.empty,
-              isDisplayingChanges: false
+              isDisplayingChanges: false,
+              activeIndex: undefined
             });
+          } 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') && fg('platform_editor_show_diff_scroll_navigation')) {
+            // Update the active index in plugin state and recalculate decorations
+            var _decorations = currentPluginState.decorations.find();
+            if (_decorations.length > 0) {
+              var _currentPluginState$a;
+              var nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : 0;
+              if (meta.action === 'SCROLL_TO_NEXT') {
+                nextIndex = (nextIndex + 1) % _decorations.length;
+              } else {
+                nextIndex = (nextIndex - 1 + _decorations.length) % _decorations.length;
+              }
+              var activeDecoration = _decorations[nextIndex];
+              newPluginState = _objectSpread(_objectSpread({}, currentPluginState), {}, {
+                activeIndex: nextIndex,
+                activeIndexPos: activeDecoration ? {
+                  from: activeDecoration.from,
+                  to: activeDecoration.to
+                } : undefined
+              });
+              // Recalculate decorations with the new active index
+              var updatedDecorations = calculateDiffDecorations({
+                state: newState,
+                pluginState: newPluginState,
+                nodeViewSerializer: nodeViewSerializer,
+                colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+                intl: getIntl(),
+                activeIndexPos: newPluginState.activeIndexPos
+              });
+              newPluginState.decorations = updatedDecorations;
+            }
           } else {
             newPluginState = _objectSpread(_objectSpread({}, currentPluginState), meta);
           }

package/dist/esm/showDiffPlugin.js

@@ -22,13 +22,25 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
           steps: [],
           action: 'HIDE_DIFF'
         });
+      },
+      scrollToNext: function scrollToNext(_ref4) {
+        var tr = _ref4.tr;
+        return tr.setMeta(showDiffPluginKey, {
+          action: 'SCROLL_TO_NEXT'
+        });
+      },
+      scrollToPrevious: function scrollToPrevious(_ref5) {
+        var tr = _ref5.tr;
+        return tr.setMeta(showDiffPluginKey, {
+          action: 'SCROLL_TO_PREVIOUS'
+        });
       }
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'showDiffPlugin',
-        plugin: function plugin(_ref4) {
-          var getIntl = _ref4.getIntl;
+        plugin: function plugin(_ref6) {
+          var getIntl = _ref6.getIntl;
           return createPlugin(config, getIntl);
         }
       }];
@@ -37,13 +49,16 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
       var _pluginState$decorati;
       if (!editorState) {
         return {
-          isDisplayingChanges: false
+          isDisplayingChanges: false,
+          activeIndex: undefined
         };
       }
       var pluginState = showDiffPluginKey.getState(editorState);
       var decorationCount = (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
       return {
-        isDisplayingChanges: decorationCount.length > 0
+        isDisplayingChanges: decorationCount.length > 0,
+        activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,
+        numberOfChanges: decorationCount.length
       };
     }
   };

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

@@ -3,7 +3,11 @@ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ShowDiffPluginState } from './main';
 import type { NodeViewSerializer } from './NodeViewSerializer';
-export declare const calculateDiffDecorations: import("memoize-one").MemoizedFn<({ state, pluginState, nodeViewSerializer, colourScheme, intl, }: {
+export declare const calculateDiffDecorations: import("memoize-one").MemoizedFn<({ state, pluginState, nodeViewSerializer, colourScheme, intl, activeIndexPos, }: {
+    activeIndexPos?: {
+        from: number;
+        to: number;
+    };
     colourScheme?: "standard" | "traditional";
     intl: IntlShape;
     nodeViewSerializer: NodeViewSerializer;

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

@@ -12,9 +12,9 @@ import type { NodeViewSerializer } from './NodeViewSerializer';
 export declare const createInlineChangedDecoration: (change: {
     fromB: number;
     toB: number;
-}, colourScheme?: "standard" | "traditional") => Decoration;
+}, colourScheme?: "standard" | "traditional", isActive?: boolean) => Decoration;
 export declare const getDeletedContentStyleUnbounded: (colourScheme?: "standard" | "traditional") => string;
-export declare const getDeletedContentStyle: (colourScheme?: "standard" | "traditional") => string;
+export declare const getDeletedContentStyle: (colourScheme?: "standard" | "traditional", isActive?: boolean) => string;
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -31,8 +31,9 @@ interface DeletedContentDecorationProps {
     colourScheme?: 'standard' | 'traditional';
     doc: PMNode;
     intl: IntlShape;
+    isActive?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, newDoc, intl, }: DeletedContentDecorationProps) => Decoration[] | undefined;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, newDoc, intl, isActive, }: DeletedContentDecorationProps) => Decoration[] | undefined;
 export {};

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

@@ -26,7 +26,7 @@ export declare const createBlockNodeWrapper: () => HTMLDivElement;
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-export declare const createDeletedStyleWrapperWithoutOpacity: (colourScheme?: "standard" | "traditional") => HTMLSpanElement;
+export declare const createDeletedStyleWrapperWithoutOpacity: (colourScheme?: "standard" | "traditional", isActive?: boolean) => HTMLSpanElement;
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */

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

@@ -7,6 +7,11 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { type DiffParams } from '../showDiffPluginType';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
 export type ShowDiffPluginState = {
+    activeIndex?: number;
+    activeIndexPos?: {
+        from: number;
+        to: number;
+    };
     decorations: DecorationSet;
     isDisplayingChanges: boolean;
     originalDoc: PMNode | undefined;

package/dist/types/showDiffPluginType.d.ts

@@ -23,18 +23,28 @@ export type PMDiffParams = {
      */
     steps: Step[];
 };
-export type ACTION = 'SHOW_DIFF' | 'HIDE_DIFF';
+export type ACTION = 'SHOW_DIFF' | 'HIDE_DIFF' | 'SCROLL_TO_NEXT' | 'SCROLL_TO_PREVIOUS';
 export type ShowDiffPlugin = NextEditorPlugin<'showDiff', {
     commands: {
         hideDiff: EditorCommand;
+        scrollToNext: EditorCommand;
+        scrollToPrevious: EditorCommand;
         showDiff: (config: PMDiffParams) => EditorCommand;
     };
     pluginConfiguration: DiffParams | undefined;
     sharedState: {
+        /**
+         * The index of the current diff being viewed.
+         */
+        activeIndex?: number;
         /**
          * Whether the show diff feature is currently displaying changes.
          * Defaults to false.
          */
         isDisplayingChanges: boolean;
+        /**
+         * The number of changes being displayed
+         */
+        numberOfChanges?: number;
     };
 }>;

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

@@ -3,7 +3,11 @@ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ShowDiffPluginState } from './main';
 import type { NodeViewSerializer } from './NodeViewSerializer';
-export declare const calculateDiffDecorations: import("memoize-one").MemoizedFn<({ state, pluginState, nodeViewSerializer, colourScheme, intl, }: {
+export declare const calculateDiffDecorations: import("memoize-one").MemoizedFn<({ state, pluginState, nodeViewSerializer, colourScheme, intl, activeIndexPos, }: {
+    activeIndexPos?: {
+        from: number;
+        to: number;
+    };
     colourScheme?: "standard" | "traditional";
     intl: IntlShape;
     nodeViewSerializer: NodeViewSerializer;

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

@@ -12,9 +12,9 @@ import type { NodeViewSerializer } from './NodeViewSerializer';
 export declare const createInlineChangedDecoration: (change: {
     fromB: number;
     toB: number;
-}, colourScheme?: "standard" | "traditional") => Decoration;
+}, colourScheme?: "standard" | "traditional", isActive?: boolean) => Decoration;
 export declare const getDeletedContentStyleUnbounded: (colourScheme?: "standard" | "traditional") => string;
-export declare const getDeletedContentStyle: (colourScheme?: "standard" | "traditional") => string;
+export declare const getDeletedContentStyle: (colourScheme?: "standard" | "traditional", isActive?: boolean) => string;
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -31,8 +31,9 @@ interface DeletedContentDecorationProps {
     colourScheme?: 'standard' | 'traditional';
     doc: PMNode;
     intl: IntlShape;
+    isActive?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, newDoc, intl, }: DeletedContentDecorationProps) => Decoration[] | undefined;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, newDoc, intl, isActive, }: DeletedContentDecorationProps) => Decoration[] | undefined;
 export {};

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

@@ -26,7 +26,7 @@ export declare const createBlockNodeWrapper: () => HTMLDivElement;
 /**
  * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-export declare const createDeletedStyleWrapperWithoutOpacity: (colourScheme?: "standard" | "traditional") => HTMLSpanElement;
+export declare const createDeletedStyleWrapperWithoutOpacity: (colourScheme?: "standard" | "traditional", isActive?: boolean) => HTMLSpanElement;
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */