@atlaskit/editor-plugin-show-diff 9.1.2 → 10.0.0

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

@@ -3,7 +3,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
 import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
-import { buildDiffDecorationKey, DiffDecorationKey } from './decorationKeys';
+import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -106,15 +106,16 @@ export const createBlockChangedDecoration = ({
   shouldHideDeleted = false
 }) => {
   const decorations = [];
+  const diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [Decoration.node(change.from, change.to, {
       style: displayNoneStyle
-    }, {
-      key: buildDiffDecorationKey({
-        type: DiffDecorationKey.block
-      }),
+    }, buildDiffDecorationSpec({
+      decorationType: 'block',
+      diffId,
+      isActive,
       nodeName: change.name
-    })];
+    }))];
   }
   let style;
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && ['tableCell', 'tableHeader'].includes(change.name)) {
@@ -123,11 +124,10 @@ export const createBlockChangedDecoration = ({
     cellOverlay.setAttribute('style', cellOverlayStyle);
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell
+    // this key doesn't use the spec / key builder since this is just for
+    // decorating the cells, this is part of a bigger table diff
     Decoration.widget(change.to - 1, cellOverlay, {
-      key: buildDiffDecorationKey({
-        type: DiffDecorationKey.widget,
-        isActive
-      })
+      key: 'cell-overlay-decoration'
     }));
   }
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
@@ -150,12 +150,12 @@ export const createBlockChangedDecoration = ({
       style: style,
       'data-testid': 'show-diff-changed-decoration-node',
       class: className
-    }, {
-      key: buildDiffDecorationKey({
-        type: DiffDecorationKey.block
-      }),
+    }, buildDiffDecorationSpec({
+      decorationType: 'block',
+      diffId,
+      isActive,
       nodeName: change.name
-    }));
+    })));
   }
   return decorations;
 };

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

@@ -5,6 +5,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { addedCellOverlayStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
 import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
+import { buildDiffDecorationSpec } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 /**
  * Extracts information about deleted table rows from a change
@@ -182,6 +183,13 @@ export const createChangedRowDecorationWidgets = ({
     const safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,
     // -1 to find the first safe position from the table
     originalDoc.slice(changedRow.fromA, changedRow.toA));
-    return Decoration.widget(safeInsertPos, rowDOM, {});
+    const diffId = crypto.randomUUID();
+    return Decoration.widget(safeInsertPos, rowDOM, {
+      ...buildDiffDecorationSpec({
+        decorationType: 'widget',
+        diffId,
+        isActive: false
+      })
+    });
   });
 };

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

@@ -3,7 +3,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedInlineContentStyleExtended } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
-import { buildDiffDecorationKey, DiffDecorationKey } from './decorationKeys';
+import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -21,14 +21,15 @@ export const createInlineChangedDecoration = ({
   isInserted = true,
   shouldHideDeleted = false
 }) => {
+  const diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
-    return Decoration.inline(change.fromB, change.toB, {
+    return [Decoration.inline(change.fromB, change.toB, {
       style: displayNoneStyle
-    }, {
-      key: buildDiffDecorationKey({
-        type: DiffDecorationKey.inline
-      })
-    });
+    }, buildDiffDecorationSpec({
+      decorationType: 'inline',
+      diffId,
+      isActive
+    }))];
   }
   let style;
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
@@ -58,12 +59,12 @@ export const createInlineChangedDecoration = ({
       style = isActive ? editingStyleActive : editingStyle;
     }
   }
-  return Decoration.inline(change.fromB, change.toB, {
+  return [Decoration.inline(change.fromB, change.toB, {
     style,
     'data-testid': 'show-diff-changed-decoration'
-  }, {
-    key: buildDiffDecorationKey({
-      type: DiffDecorationKey.inline
-    })
-  });
+  }, buildDiffDecorationSpec({
+    decorationType: 'inline',
+    diffId,
+    isActive
+  }))];
 };

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

@@ -4,7 +4,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
-import { buildDiffDecorationKey, DiffDecorationKey } from './decorationKeys';
+import { buildDiffDecorationSpec } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
 const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) => {
@@ -108,12 +108,12 @@ export const createNodeChangedDecorationWidget = ({
   const safeInsertPos = findSafeInsertPos(newDoc, change.fromB, slice);
   const isActive = activeIndexPos && safeInsertPos === activeIndexPos.from && safeInsertPos === activeIndexPos.to;
   if (slice.content.content.length === 0 || shouldSkipDeletedEmptyParagraphDecoration) {
-    return;
+    return [];
   }
   const isTableCellContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableHeader', 'tableCell'].includes(siblingNode.type.name)));
   const isTableRowContent = slice.content.content.some(() => slice.content.content.some(siblingNode => ['tableRow'].includes(siblingNode.type.name)));
   if (isTableCellContent) {
-    return;
+    return [];
   }
   if (isTableRowContent) {
     return createChangedRowDecorationWidgets({
@@ -230,15 +230,15 @@ export const createNodeChangedDecorationWidget = ({
     }
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
+  const diffId = crypto.randomUUID();
   const decorations = [];
-  decorations.push(Decoration.widget(safeInsertPos, dom, {
-    key: buildDiffDecorationKey({
-      type: DiffDecorationKey.widget,
-      isActive
-    }),
+  decorations.push(Decoration.widget(safeInsertPos, dom, buildDiffDecorationSpec({
+    decorationType: 'widget',
+    diffId,
+    isActive,
     ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
       side: -1
     })
-  }));
+  })));
   return decorations;
 };

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

@@ -1,18 +1,19 @@
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 /**
  * Shared prefix for every decoration key produced by the show-diff plugin.
  * All keys derive from this, so the full set of plugin decorations can be
  * identified by this single prefix.
  */
-export const DIFF_KEY_PREFIX = 'diff';
+const DIFF_DECORATION_FAMILY = 'diff';
 /**
  * The kinds of decoration the show-diff plugin produces. Each value is the
  * leading segment of the generated key, so a decoration's kind can be matched
  * with `key?.startsWith(DiffDecorationKey.inline)` etc.
  */
 export const DiffDecorationKey = {
-  inline: `${DIFF_KEY_PREFIX}-inline`,
-  block: `${DIFF_KEY_PREFIX}-block`,
-  widget: `${DIFF_KEY_PREFIX}-widget`
+  inline: `${DIFF_DECORATION_FAMILY}-inline`,
+  block: `${DIFF_DECORATION_FAMILY}-block`,
+  widget: `${DIFF_DECORATION_FAMILY}-widget`
 };
 
 /**
@@ -20,6 +21,42 @@ export const DiffDecorationKey = {
  * (e.g. `diff-inline-active`).
  */
 export const buildDiffDecorationKey = ({
-  type,
-  isActive
-}) => isActive !== undefined ? `${type}-${isActive ? 'active' : 'inactive'}` : type;
+  decorationKeyPrefix,
+  isActive,
+  diffId
+}) => {
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    return `${decorationKeyPrefix}-${diffId}-${isActive ? 'active' : 'inactive'}`;
+  }
+  return isActive !== undefined ? `${decorationKeyPrefix}-${isActive ? 'active' : 'inactive'}` : decorationKeyPrefix;
+};
+export const buildDiffDecorationSpec = ({
+  decorationType,
+  diffId,
+  isActive,
+  nodeName,
+  side
+}) => ({
+  decorationFamily: DIFF_DECORATION_FAMILY,
+  decorationType,
+  diffId,
+  key: buildDiffDecorationKey({
+    decorationKeyPrefix: DiffDecorationKey[decorationType],
+    diffId,
+    isActive
+  }),
+  ...(nodeName ? {
+    nodeName
+  } : {}),
+  ...(side !== undefined ? {
+    side
+  } : {})
+});
+export const extractDiffDescriptors = decorations => decorations.find(undefined, undefined, spec => spec.decorationFamily === 'diff').map(({
+  spec
+}) => {
+  return {
+    id: spec.diffId,
+    type: spec.decorationType
+  };
+});

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

@@ -31,7 +31,8 @@ export const createPlugin = (config, getIntl, api) => {
           ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
             isInverted: false,
             diffType: 'inline',
-            hideDeletedDiffs: false
+            hideDeletedDiffs: false,
+            diffDescriptors: []
           } : {})
         };
       },
@@ -49,7 +50,10 @@ export const createPlugin = (config, getIntl, api) => {
               activeIndex: undefined
             };
             // Calculate and store decorations in state
-            const decorations = calculateDiffDecorations({
+            const {
+              decorations,
+              diffDescriptors
+            } = calculateDiffDecorations({
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer,
@@ -63,8 +67,11 @@ export const createPlugin = (config, getIntl, api) => {
                 hideDeletedDiffs: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.hideDeletedDiffs
               } : {})
             });
-            // Update the decorations
+            // Update the decorations and their ids
             newPluginState.decorations = decorations;
+            if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+              newPluginState.diffDescriptors = diffDescriptors;
+            }
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
             newPluginState = {
               ...currentPluginState,
@@ -79,7 +86,8 @@ export const createPlugin = (config, getIntl, api) => {
               ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
                 isInverted: false,
                 diffType: 'inline',
-                hideDeletedDiffs: false
+                hideDeletedDiffs: false,
+                diffDescriptors: []
               } : {})
             };
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') {
@@ -111,7 +119,10 @@ export const createPlugin = (config, getIntl, api) => {
                 } : undefined
               };
               // Recalculate decorations with the new active index
-              const updatedDecorations = calculateDiffDecorations({
+              const {
+                decorations: updatedDecorations,
+                diffDescriptors: updatedDiffDescriptors
+              } = calculateDiffDecorations({
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer,
@@ -126,6 +137,9 @@ export const createPlugin = (config, getIntl, api) => {
                 } : {})
               });
               newPluginState.decorations = updatedDecorations;
+              if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+                newPluginState.diffDescriptors = updatedDiffDescriptors;
+              }
             }
           } else {
             newPluginState = {

package/dist/es2019/showDiffPlugin.js

@@ -62,7 +62,10 @@ export const showDiffPlugin = ({
     if (!editorState) {
       return {
         isDisplayingChanges: false,
-        activeIndex: undefined
+        activeIndex: undefined,
+        ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+          diffDescriptors: []
+        } : {})
       };
     }
     const pluginState = showDiffPluginKey.getState(editorState);
@@ -70,7 +73,10 @@ export const showDiffPlugin = ({
     return {
       isDisplayingChanges: decorationCount.length > 0,
       activeIndex: pluginState === null || pluginState === void 0 ? void 0 : pluginState.activeIndex,
-      numberOfChanges: decorationCount.length
+      numberOfChanges: decorationCount.length,
+      ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+        diffDescriptors: pluginState === null || pluginState === void 0 ? void 0 : pluginState.diffDescriptors
+      } : {})
     };
   }
 });

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

@@ -17,6 +17,7 @@ import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStruc
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
 import { createInlineChangedDecoration } from '../decorations/createInlineChangedDecoration';
 import { createNodeChangedDecorationWidget } from '../decorations/createNodeChangedDecorationWidget';
+import { extractDiffDescriptors } from '../decorations/decorationKeys';
 import { getAttrChangeRanges, stepIsValidAttrChange } from '../decorations/utils/getAttrChangeRanges';
 import { getMarkChangeRanges } from '../decorations/utils/getMarkChangeRanges';
 import { diffBySteps } from './diffBySteps';
@@ -59,7 +60,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     if (node.isBlock && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
       var nodeEnd = pos + node.nodeSize;
       var isActive = activeIndexPos && pos === activeIndexPos.from && nodeEnd === activeIndexPos.to;
-      var blockChangedDecorations = createBlockChangedDecoration({
+      decorations.push.apply(decorations, _toConsumableArray(createBlockChangedDecoration({
         change: {
           from: pos,
           to: nodeEnd,
@@ -69,10 +70,7 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         isInserted: isInserted,
         isActive: isActive,
         shouldHideDeleted: shouldHideDeleted
-      });
-      if (blockChangedDecorations.length) {
-        decorations.push.apply(decorations, _toConsumableArray(blockChangedDecorations));
-      }
+      })));
     }
   });
   return decorations;
@@ -94,7 +92,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
-    return DecorationSet.empty;
+    return {
+      decorations: DecorationSet.empty,
+      diffDescriptors: []
+    };
   }
   var tr = state.tr;
   var steppedDoc = originalDoc;
@@ -137,7 +138,10 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       }
     });
     if (!recoveredViaContentEquality) {
-      return DecorationSet.empty;
+      return {
+        decorations: DecorationSet.empty,
+        diffDescriptors: []
+      };
     }
   }
   var changeset = ChangeSet.create(originalDoc).addSteps(steppedDoc, stepMaps, tr.doc);
@@ -156,14 +160,14 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     var isInserted = !isInverted;
     if (change.inserted.length > 0) {
       var shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && hideDeletedDiffs : false;
-      decorations.push(createInlineChangedDecoration(_objectSpread({
+      decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration(_objectSpread({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
         isInserted: isInserted,
         shouldHideDeleted: shouldHideDeleted
-      })));
+      }))));
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
         doc: tr.doc,
         from: change.fromB,
@@ -180,7 +184,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     if (change.deleted.length > 0) {
       var _shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
       if (!_shouldHideDeleted) {
-        var decoration = createNodeChangedDecorationWidget(_objectSpread({
+        decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget(_objectSpread({
           change: change,
           doc: originalDoc,
           nodeViewSerializer: nodeViewSerializer,
@@ -191,32 +195,29 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
           isInserted: !isInserted,
           diffType: diffType
-        }));
-        if (decoration) {
-          decorations.push.apply(decorations, _toConsumableArray(decoration));
-        }
+        }))));
       }
     }
   });
   getMarkChangeRanges(steps).forEach(function (change) {
     var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
-    decorations.push(createInlineChangedDecoration({
+    decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
       change: change,
       colorScheme: colorScheme,
       isActive: isActive,
       isInserted: true
-    }));
+    })));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
     if (change.isInline) {
       // Inline nodes (e.g. date) need an inline decoration rather than a block decoration
       var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
-      decorations.push(createInlineChangedDecoration({
+      decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive,
         isInserted: true
-      }));
+      })));
     } else {
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
         doc: tr.doc,
@@ -229,7 +230,11 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       })));
     }
   });
-  return DecorationSet.empty.add(tr.doc, decorations);
+  var decorationSet = DecorationSet.empty.add(tr.doc, decorations);
+  return {
+    decorations: decorationSet,
+    diffDescriptors: extractDiffDescriptors(decorationSet)
+  };
 };
 export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change

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

@@ -3,7 +3,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
 import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
-import { buildDiffDecorationKey, DiffDecorationKey } from './decorationKeys';
+import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -109,15 +109,16 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
     shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet;
   var decorations = [];
+  var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [Decoration.node(change.from, change.to, {
       style: displayNoneStyle
-    }, {
-      key: buildDiffDecorationKey({
-        type: DiffDecorationKey.block
-      }),
+    }, buildDiffDecorationSpec({
+      decorationType: 'block',
+      diffId: diffId,
+      isActive: isActive,
       nodeName: change.name
-    })];
+    }))];
   }
   var style;
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && ['tableCell', 'tableHeader'].includes(change.name)) {
@@ -126,11 +127,10 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     cellOverlay.setAttribute('style', cellOverlayStyle);
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell
+    // this key doesn't use the spec / key builder since this is just for
+    // decorating the cells, this is part of a bigger table diff
     Decoration.widget(change.to - 1, cellOverlay, {
-      key: buildDiffDecorationKey({
-        type: DiffDecorationKey.widget,
-        isActive: isActive
-      })
+      key: 'cell-overlay-decoration'
     }));
   }
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
@@ -153,12 +153,12 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       style: style,
       'data-testid': 'show-diff-changed-decoration-node',
       class: className
-    }, {
-      key: buildDiffDecorationKey({
-        type: DiffDecorationKey.block
-      }),
+    }, buildDiffDecorationSpec({
+      decorationType: 'block',
+      diffId: diffId,
+      isActive: isActive,
       nodeName: change.name
-    }));
+    })));
   }
   return decorations;
 };

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

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -9,6 +12,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { addedCellOverlayStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
 import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
+import { buildDiffDecorationSpec } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 /**
  * Extracts information about deleted table rows from a change
@@ -203,6 +207,11 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
     var safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,
     // -1 to find the first safe position from the table
     originalDoc.slice(changedRow.fromA, changedRow.toA));
-    return Decoration.widget(safeInsertPos, rowDOM, {});
+    var diffId = crypto.randomUUID();
+    return Decoration.widget(safeInsertPos, rowDOM, _objectSpread({}, buildDiffDecorationSpec({
+      decorationType: 'widget',
+      diffId: diffId,
+      isActive: false
+    })));
   });
 };

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

@@ -3,7 +3,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editingStyle, editingStyleExtended, editingStyleActive, editingStyleActiveExtended, deletedContentStyle, deletedContentStyleActive, deletedInlineContentStyleExtended } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
-import { buildDiffDecorationKey, DiffDecorationKey } from './decorationKeys';
+import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -23,14 +23,15 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
     _ref$shouldHideDelete = _ref.shouldHideDeleted,
     shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete;
+  var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
-    return Decoration.inline(change.fromB, change.toB, {
+    return [Decoration.inline(change.fromB, change.toB, {
       style: displayNoneStyle
-    }, {
-      key: buildDiffDecorationKey({
-        type: DiffDecorationKey.inline
-      })
-    });
+    }, buildDiffDecorationSpec({
+      decorationType: 'inline',
+      diffId: diffId,
+      isActive: isActive
+    }))];
   }
   var style;
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
@@ -60,12 +61,12 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
       style = isActive ? editingStyleActive : editingStyle;
     }
   }
-  return Decoration.inline(change.fromB, change.toB, {
+  return [Decoration.inline(change.fromB, change.toB, {
     style: style,
     'data-testid': 'show-diff-changed-decoration'
-  }, {
-    key: buildDiffDecorationKey({
-      type: DiffDecorationKey.inline
-    })
-  });
+  }, buildDiffDecorationSpec({
+    decorationType: 'inline',
+    diffId: diffId,
+    isActive: isActive
+  }))];
 };