@atlaskit/editor-plugin-show-diff 4.1.3 → 5.0.0

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

@@ -56,8 +56,8 @@ var lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-export var getDeletedStyleNode = function getDeletedStyleNode(nodeName, colourScheme) {
-  var isTraditional = colourScheme === 'traditional';
+export var getDeletedStyleNode = function getDeletedStyleNode(nodeName, colorScheme) {
+  var isTraditional = colorScheme === 'traditional';
   switch (nodeName) {
     case 'blockquote':
       return fg('platform_editor_ai_aifc_patch_ga_blockers') ? isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge : deletedStyleQuoteNode;
@@ -156,29 +156,29 @@ 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, isActive) {
+export var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive) {
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', getDeletedContentStyle(colourScheme, isActive));
+  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
   return wrapper;
 };
 
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */
-export var applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colourScheme) {
+export var applyDeletedStylesToElement = function applyDeletedStylesToElement(element, targetNode, colorScheme) {
   var currentStyle = element.getAttribute('style') || '';
-  var deletedContentStyle = getDeletedContentStyle(colourScheme);
-  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colourScheme) || '';
+  var deletedContentStyle = getDeletedContentStyle(colorScheme);
+  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
 };
 
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-export var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colourScheme) {
+export var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(nodeView, targetNode, colorScheme) {
   var contentWrapper = document.createElement('div');
-  var nodeStyle = getDeletedStyleNode(targetNode.type.name, colourScheme);
-  contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colourScheme)).concat(nodeStyle || ''));
+  var nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
+  contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colorScheme)).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -189,7 +189,7 @@ export var createBlockNodeContentWrapper = function createBlockNodeContentWrappe
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-export var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
+export var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) {
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -210,7 +210,7 @@ export var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom,
     });
   }
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var showDiffDeletedNodeClass = colourScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    var showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
@@ -221,7 +221,7 @@ export var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(dom,
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) {
+export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) {
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -240,7 +240,7 @@ export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(
 
   // Add deleted node class if needed
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    var showDiffDeletedNodeClass = colorScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(nodeView);
@@ -250,22 +250,22 @@ export var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-export var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl) {
+export var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl) {
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name)) {
     var lozenge = createRemovedLozenge(intl);
-    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
+    if (handleEmbedCardWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme) && fg('platform_editor_ai_aifc_patch_ga_blockers')) {
       return;
     }
-    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colourScheme)) {
+    if (handleMediaSingleWithLozenge(dom, nodeView, targetNode, lozenge, colorScheme)) {
       return;
     }
     blockWrapper.append(lozenge);
   }
-  var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colourScheme);
+  var contentWrapper = createBlockNodeContentWrapper(nodeView, targetNode, colorScheme);
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var showDiffDeletedNodeClass = colourScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
+    var showDiffDeletedNodeClass = colorScheme === 'traditional' && fg('platform_editor_ai_aifc_patch_ga_blockers') ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
     nodeView.classList.add(showDiffDeletedNodeClass);
   }
   dom.append(blockWrapper);
@@ -276,13 +276,13 @@ export var appendBlockNodeWithWrapper = function appendBlockNodeWithWrapper(dom,
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export var handleBlockNodeView = function handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl) {
+export var handleBlockNodeView = function handleBlockNodeView(dom, nodeView, targetNode, colorScheme, intl) {
   if (shouldApplyDeletedStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
     // Apply deleted styles directly to preserve natural block-level margins
-    applyDeletedStylesToElement(nodeView, targetNode, colourScheme);
+    applyDeletedStylesToElement(nodeView, targetNode, colorScheme);
     dom.append(nodeView);
   } else {
     // Use wrapper approach for other block nodes
-    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colourScheme, intl);
+    appendBlockNodeWithWrapper(dom, nodeView, targetNode, colorScheme, intl);
   }
 };

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

@@ -58,7 +58,7 @@ var extractDeletedRows = function extractDeletedRows(change, originalDoc, newDoc
   var changeEndInTable = change.toA - tableOld.pos - 1;
   var currentOffset = 0;
   var rowIndex = 0;
-  tableOld.node.content.forEach(function (rowNode, index) {
+  tableOld.node.content.forEach(function (rowNode) {
     var rowStart = currentOffset;
     var rowEnd = currentOffset + rowNode.nodeSize;
 
@@ -119,9 +119,9 @@ var isEmptyRow = function isEmptyRow(rowNode) {
 /**
  * Creates a DOM representation of a deleted table row
  */
-var createDeletedRowDOM = function createDeletedRowDOM(rowNode, nodeViewSerializer, colourScheme) {
+var createDeletedRowDOM = function createDeletedRowDOM(rowNode, nodeViewSerializer, colorScheme) {
   var tr = document.createElement('tr');
-  tr.setAttribute('style', colourScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
+  tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
 
   // Serialize each cell in the row
@@ -174,9 +174,9 @@ export var createDeletedRowsDecorations = function createDeletedRowsDecorations(
     originalDoc = _ref.originalDoc,
     newDoc = _ref.newDoc,
     nodeViewSerializer = _ref.nodeViewSerializer,
-    colourScheme = _ref.colourScheme;
+    colorScheme = _ref.colorScheme;
   return deletedRows.map(function (deletedRow) {
-    var rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colourScheme);
+    var rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colorScheme);
 
     // Find safe insertion position for the deleted row
     var safeInsertPos = findSafeInsertPos(newDoc, deletedRow.fromB - 1,
@@ -189,7 +189,7 @@ export var createDeletedRowsDecorations = function createDeletedRowsDecorations(
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export var handleDeletedRows = function handleDeletedRows(changes, originalDoc, newDoc, nodeViewSerializer, colourScheme) {
+export var handleDeletedRows = function handleDeletedRows(changes, originalDoc, newDoc, nodeViewSerializer, colorScheme) {
   // First, expand the changes to include complete deleted rows
   var deletedRows = expandDiffForDeletedRows(changes.filter(function (change) {
     return change.deleted.length > 0;
@@ -199,7 +199,7 @@ export var handleDeletedRows = function handleDeletedRows(changes, originalDoc,
     originalDoc: originalDoc,
     newDoc: newDoc,
     nodeViewSerializer: nodeViewSerializer,
-    colourScheme: colourScheme
+    colorScheme: colorScheme
   });
   return {
     decorations: allDecorations

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

@@ -10,6 +10,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 export var showDiffPluginKey = new PluginKey('showDiffPlugin');
+export var getScrollableDecorations = function getScrollableDecorations(set) {
+  var _set$find;
+  return (_set$find = set === null || set === void 0 ? void 0 : set.find(undefined, undefined, function (spec) {
+    return spec.key === 'diff-inline' || spec.key === 'diff-widget' || spec.key === 'diff-block';
+  })) !== null && _set$find !== void 0 ? _set$find : [];
+};
 export var createPlugin = function createPlugin(config, getIntl) {
   var nodeViewSerializer = new NodeViewSerializer({});
   var setNodeViewSerializer = function setNodeViewSerializer(editorView) {
@@ -36,7 +42,7 @@ export var createPlugin = function createPlugin(config, getIntl) {
       if (!pluginState || pluginState.decorations.find().length === 0) {
         return;
       }
-      var decorations = pluginState.decorations.find();
+      var decorations = getScrollableDecorations(pluginState.decorations);
       var decoration = decorations[(_pluginState$activeIn = pluginState.activeIndex) !== null && _pluginState$activeIn !== void 0 ? _pluginState$activeIn : 0];
       if (!decoration) {
         return;
@@ -78,7 +84,7 @@ export var createPlugin = function createPlugin(config, getIntl) {
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer: nodeViewSerializer,
-              colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+              colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
               intl: getIntl(),
               activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined
             });
@@ -92,7 +98,7 @@ export var createPlugin = function createPlugin(config, getIntl) {
             });
           } 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();
+            var _decorations = getScrollableDecorations(currentPluginState.decorations);
             if (_decorations.length > 0) {
               var _currentPluginState$a;
               var nextIndex = (_currentPluginState$a = currentPluginState.activeIndex) !== null && _currentPluginState$a !== void 0 ? _currentPluginState$a : 0;
@@ -114,7 +120,7 @@ export var createPlugin = function createPlugin(config, getIntl) {
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer: nodeViewSerializer,
-                colourScheme: config === null || config === void 0 ? void 0 : config.colourScheme,
+                colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos
               });

package/dist/esm/showDiffPlugin.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { createPlugin, showDiffPluginKey, getScrollableDecorations } from './pm-plugins/main';
 export var showDiffPlugin = function showDiffPlugin(_ref) {
   var _api = _ref.api,
     config = _ref.config;
@@ -54,7 +55,7 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
         };
       }
       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()) || [];
+      var decorationCount = fg('platform_editor_show_diff_scroll_navigation') ? getScrollableDecorations(pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorations) : (pluginState === null || pluginState === void 0 || (_pluginState$decorati = pluginState.decorations) === null || _pluginState$decorati === void 0 ? void 0 : _pluginState$decorati.find()) || [];
       return {
         isDisplayingChanges: decorationCount.length > 0,
         activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,

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

@@ -3,12 +3,12 @@ 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, activeIndexPos, }: {
+export declare const calculateDiffDecorations: import("memoize-one").MemoizedFn<({ state, pluginState, nodeViewSerializer, colorScheme, intl, activeIndexPos, }: {
     activeIndexPos?: {
         from: number;
         to: number;
     };
-    colourScheme?: "standard" | "traditional";
+    colorScheme?: "standard" | "traditional";
     intl: IntlShape;
     nodeViewSerializer: NodeViewSerializer;
     pluginState: Omit<ShowDiffPluginState, "decorations">;

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", isActive?: boolean) => Decoration;
-export declare const getDeletedContentStyleUnbounded: (colourScheme?: "standard" | "traditional") => string;
-export declare const getDeletedContentStyle: (colourScheme?: "standard" | "traditional", isActive?: boolean) => string;
+}, colorScheme?: "standard" | "traditional", isActive?: boolean) => Decoration;
+export declare const getDeletedContentStyleUnbounded: (colorScheme?: "standard" | "traditional") => string;
+export declare const getDeletedContentStyle: (colorScheme?: "standard" | "traditional", isActive?: boolean) => string;
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -25,15 +25,15 @@ export declare const createBlockChangedDecoration: (change: {
     from: number;
     name: string;
     to: number;
-}, colourScheme?: "standard" | "traditional") => Decoration;
+}, colorScheme?: "standard" | "traditional") => Decoration | undefined;
 interface DeletedContentDecorationProps {
     change: Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
-    colourScheme?: 'standard' | 'traditional';
+    colorScheme?: 'standard' | 'traditional';
     doc: PMNode;
     intl: IntlShape;
     isActive?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, newDoc, intl, isActive, }: DeletedContentDecorationProps) => Decoration[] | undefined;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, }: DeletedContentDecorationProps) => Decoration[] | undefined;
 export {};

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

@@ -7,7 +7,7 @@ export declare const deletedBlockOutline: string;
 export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedBlockOutlineRounded: string;
 export declare const deletedTraditionalBlockOutlineRounded: string;
-export declare const getDeletedStyleNode: (nodeName: string, colourScheme?: "standard" | "traditional") => string | undefined;
+export declare const getDeletedStyleNode: (nodeName: string, colorScheme?: "standard" | "traditional") => string | undefined;
 export declare const shouldShowRemovedLozenge: (nodeName: string) => boolean;
 export declare const shouldAddShowDiffDeletedNodeClass: (nodeName: string) => boolean;
 /**
@@ -26,34 +26,34 @@ 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", isActive?: boolean) => HTMLSpanElement;
+export declare const createDeletedStyleWrapperWithoutOpacity: (colorScheme?: "standard" | "traditional", isActive?: boolean) => HTMLSpanElement;
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */
-export declare const applyDeletedStylesToElement: (element: HTMLElement, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined) => void;
+export declare const applyDeletedStylesToElement: (element: HTMLElement, targetNode: PMNode, colorScheme: "standard" | "traditional" | undefined) => void;
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-export declare const createBlockNodeContentWrapper: (nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined) => HTMLElement;
+export declare const createBlockNodeContentWrapper: (nodeView: Node, targetNode: PMNode, colorScheme: "standard" | "traditional" | undefined) => HTMLElement;
 /**
  * Handles embedCard node rendering with lozenge attached to the rich-media-item container.
  * Since embedCard content loads asynchronously, we use a MutationObserver
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-export declare const handleEmbedCardWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
+export declare const handleEmbedCardWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colorScheme: "standard" | "traditional" | undefined) => boolean;
 /**
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
+export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colorScheme: "standard" | "traditional" | undefined) => boolean;
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-export declare const appendBlockNodeWithWrapper: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
+export declare const appendBlockNodeWithWrapper: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colorScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
 /**
  * Handles all block node rendering with appropriate deleted styling.
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export declare const handleBlockNodeView: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
+export declare const handleBlockNodeView: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colorScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;

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

@@ -11,7 +11,7 @@ interface DeletedRowInfo {
 }
 type SimpleChange = Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
 interface DeletedRowsHandlerProps {
-    colourScheme?: 'standard' | 'traditional';
+    colorScheme?: 'standard' | 'traditional';
     deletedRows: DeletedRowInfo[];
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
@@ -20,11 +20,11 @@ interface DeletedRowsHandlerProps {
 /**
  * Creates decorations for deleted table rows
  */
-export declare const createDeletedRowsDecorations: ({ deletedRows, originalDoc, newDoc, nodeViewSerializer, colourScheme, }: DeletedRowsHandlerProps) => Decoration[];
+export declare const createDeletedRowsDecorations: ({ deletedRows, originalDoc, newDoc, nodeViewSerializer, colorScheme, }: DeletedRowsHandlerProps) => Decoration[];
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export declare const handleDeletedRows: (changes: SimpleChange[], originalDoc: PMNode, newDoc: PMNode, nodeViewSerializer: NodeViewSerializer, colourScheme?: "standard" | "traditional") => {
+export declare const handleDeletedRows: (changes: SimpleChange[], originalDoc: PMNode, newDoc: PMNode, nodeViewSerializer: NodeViewSerializer, colorScheme?: "standard" | "traditional") => {
     decorations: Decoration[];
 };
 export {};

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

@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
+import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { type DiffParams } from '../showDiffPluginType';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
@@ -17,4 +18,5 @@ export type ShowDiffPluginState = {
     originalDoc: PMNode | undefined;
     steps: ProseMirrorStep[];
 };
+export declare const getScrollableDecorations: (set: DecorationSet | undefined) => Decoration[];
 export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape) => SafePlugin<ShowDiffPluginState>;

package/dist/types/showDiffPluginType.d.ts

@@ -3,13 +3,14 @@ import type { NextEditorPlugin, EditorCommand } from '@atlaskit/editor-common/ty
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
+export type ColorScheme = 'standard' | 'traditional';
 export type DiffParams = {
     /**
      * Color scheme to use for displaying diffs.
      * 'standard' (default) uses purple for highlighting changes
      * 'traditional' uses green for additions and red for deletions
      */
-    colourScheme?: 'standard' | 'traditional';
+    colorScheme?: ColorScheme;
     originalDoc: JSONDocNode;
     /**
      * Prosemirror steps. This is used to calculate and show the diff in the editor

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

@@ -3,12 +3,12 @@ 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, activeIndexPos, }: {
+export declare const calculateDiffDecorations: import("memoize-one").MemoizedFn<({ state, pluginState, nodeViewSerializer, colorScheme, intl, activeIndexPos, }: {
     activeIndexPos?: {
         from: number;
         to: number;
     };
-    colourScheme?: "standard" | "traditional";
+    colorScheme?: "standard" | "traditional";
     intl: IntlShape;
     nodeViewSerializer: NodeViewSerializer;
     pluginState: Omit<ShowDiffPluginState, "decorations">;

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", isActive?: boolean) => Decoration;
-export declare const getDeletedContentStyleUnbounded: (colourScheme?: "standard" | "traditional") => string;
-export declare const getDeletedContentStyle: (colourScheme?: "standard" | "traditional", isActive?: boolean) => string;
+}, colorScheme?: "standard" | "traditional", isActive?: boolean) => Decoration;
+export declare const getDeletedContentStyleUnbounded: (colorScheme?: "standard" | "traditional") => string;
+export declare const getDeletedContentStyle: (colorScheme?: "standard" | "traditional", isActive?: boolean) => string;
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -25,15 +25,15 @@ export declare const createBlockChangedDecoration: (change: {
     from: number;
     name: string;
     to: number;
-}, colourScheme?: "standard" | "traditional") => Decoration;
+}, colorScheme?: "standard" | "traditional") => Decoration | undefined;
 interface DeletedContentDecorationProps {
     change: Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
-    colourScheme?: 'standard' | 'traditional';
+    colorScheme?: 'standard' | 'traditional';
     doc: PMNode;
     intl: IntlShape;
     isActive?: boolean;
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
 }
-export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colourScheme, newDoc, intl, isActive, }: DeletedContentDecorationProps) => Decoration[] | undefined;
+export declare const createDeletedContentDecoration: ({ change, doc, nodeViewSerializer, colorScheme, newDoc, intl, isActive, }: DeletedContentDecorationProps) => Decoration[] | undefined;
 export {};

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

@@ -7,7 +7,7 @@ export declare const deletedBlockOutline: string;
 export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedBlockOutlineRounded: string;
 export declare const deletedTraditionalBlockOutlineRounded: string;
-export declare const getDeletedStyleNode: (nodeName: string, colourScheme?: "standard" | "traditional") => string | undefined;
+export declare const getDeletedStyleNode: (nodeName: string, colorScheme?: "standard" | "traditional") => string | undefined;
 export declare const shouldShowRemovedLozenge: (nodeName: string) => boolean;
 export declare const shouldAddShowDiffDeletedNodeClass: (nodeName: string) => boolean;
 /**
@@ -26,34 +26,34 @@ 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", isActive?: boolean) => HTMLSpanElement;
+export declare const createDeletedStyleWrapperWithoutOpacity: (colorScheme?: "standard" | "traditional", isActive?: boolean) => HTMLSpanElement;
 /**
  * Applies deleted styles directly to an HTML element by merging with existing styles
  */
-export declare const applyDeletedStylesToElement: (element: HTMLElement, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined) => void;
+export declare const applyDeletedStylesToElement: (element: HTMLElement, targetNode: PMNode, colorScheme: "standard" | "traditional" | undefined) => void;
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-export declare const createBlockNodeContentWrapper: (nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined) => HTMLElement;
+export declare const createBlockNodeContentWrapper: (nodeView: Node, targetNode: PMNode, colorScheme: "standard" | "traditional" | undefined) => HTMLElement;
 /**
  * Handles embedCard node rendering with lozenge attached to the rich-media-item container.
  * Since embedCard content loads asynchronously, we use a MutationObserver
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-export declare const handleEmbedCardWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
+export declare const handleEmbedCardWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colorScheme: "standard" | "traditional" | undefined) => boolean;
 /**
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colourScheme: "standard" | "traditional" | undefined) => boolean;
+export declare const handleMediaSingleWithLozenge: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, lozenge: HTMLElement, colorScheme: "standard" | "traditional" | undefined) => boolean;
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-export declare const appendBlockNodeWithWrapper: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
+export declare const appendBlockNodeWithWrapper: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colorScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
 /**
  * Handles all block node rendering with appropriate deleted styling.
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export declare const handleBlockNodeView: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colourScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;
+export declare const handleBlockNodeView: (dom: HTMLElement, nodeView: Node, targetNode: PMNode, colorScheme: "standard" | "traditional" | undefined, intl: IntlShape) => void;

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

@@ -11,7 +11,7 @@ interface DeletedRowInfo {
 }
 type SimpleChange = Pick<Change, 'fromA' | 'toA' | 'fromB' | 'deleted'>;
 interface DeletedRowsHandlerProps {
-    colourScheme?: 'standard' | 'traditional';
+    colorScheme?: 'standard' | 'traditional';
     deletedRows: DeletedRowInfo[];
     newDoc: PMNode;
     nodeViewSerializer: NodeViewSerializer;
@@ -20,11 +20,11 @@ interface DeletedRowsHandlerProps {
 /**
  * Creates decorations for deleted table rows
  */
-export declare const createDeletedRowsDecorations: ({ deletedRows, originalDoc, newDoc, nodeViewSerializer, colourScheme, }: DeletedRowsHandlerProps) => Decoration[];
+export declare const createDeletedRowsDecorations: ({ deletedRows, originalDoc, newDoc, nodeViewSerializer, colorScheme, }: DeletedRowsHandlerProps) => Decoration[];
 /**
  * Main function to handle deleted rows - computes diff and creates decorations
  */
-export declare const handleDeletedRows: (changes: SimpleChange[], originalDoc: PMNode, newDoc: PMNode, nodeViewSerializer: NodeViewSerializer, colourScheme?: "standard" | "traditional") => {
+export declare const handleDeletedRows: (changes: SimpleChange[], originalDoc: PMNode, newDoc: PMNode, nodeViewSerializer: NodeViewSerializer, colorScheme?: "standard" | "traditional") => {
     decorations: Decoration[];
 };
 export {};

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

@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
+import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { type DiffParams } from '../showDiffPluginType';
 export declare const showDiffPluginKey: PluginKey<ShowDiffPluginState>;
@@ -17,4 +18,5 @@ export type ShowDiffPluginState = {
     originalDoc: PMNode | undefined;
     steps: ProseMirrorStep[];
 };
+export declare const getScrollableDecorations: (set: DecorationSet | undefined) => Decoration[];
 export declare const createPlugin: (config: DiffParams | undefined, getIntl: () => IntlShape) => SafePlugin<ShowDiffPluginState>;

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

@@ -3,13 +3,14 @@ import type { NextEditorPlugin, EditorCommand } from '@atlaskit/editor-common/ty
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
+export type ColorScheme = 'standard' | 'traditional';
 export type DiffParams = {
     /**
      * Color scheme to use for displaying diffs.
      * 'standard' (default) uses purple for highlighting changes
      * 'traditional' uses green for additions and red for deletions
      */
-    colourScheme?: 'standard' | 'traditional';
+    colorScheme?: ColorScheme;
     originalDoc: JSONDocNode;
     /**
      * 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": "4.1.3",
+	"version": "5.0.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^32.10.0",
+		"@atlaskit/tmp-editor-statsig": "^32.12.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
@@ -40,7 +40,7 @@
 		"prosemirror-changeset": "^2.3.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.24.0",
+		"@atlaskit/editor-common": "^111.25.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {