@atlaskit/editor-plugin-show-diff 9.0.17 → 9.1.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 9.1.1
+
+### Patch Changes
+
+- [`3cd3edf123888`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3cd3edf123888) -
+  Remove purple underline from block widget containers when diffs are inverted with extended
+  experiment enabled
+- Updated dependencies
+
+## 9.1.0
+
+### Minor Changes
+
+- [`a3a227e567efe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3a227e567efe) -
+  [ux] [EDITOR-7662] disabled block controls when viewing diffs
+
+### Patch Changes
+
+- [`281cf98f35fe5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/281cf98f35fe5) -
+  Minor refactor to use a decoration key builder so that it can be extended upon in upcoming work.
+- Updated dependencies
+
 ## 9.0.17
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -29,6 +29,9 @@
 		{
 			"path": "../../editor-plugin-expand/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-prosemirror/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -29,6 +29,9 @@
 		{
 			"path": "../../editor-plugin-expand/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-prosemirror/afm-products/tsconfig.json"
 		},

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

@@ -9,6 +9,7 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
+var _decorationKeys = require("./decorationKeys");
 var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'none'
 });
@@ -118,7 +119,9 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     return [_view.Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, {
-      key: 'diff-block',
+      key: (0, _decorationKeys.buildDiffDecorationKey)({
+        type: _decorationKeys.DiffDecorationKey.block
+      }),
       nodeName: change.name
     })];
   }
@@ -130,7 +133,10 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell
     _view.Decoration.widget(change.to - 1, cellOverlay, {
-      key: "diff-widget-cell-overlay-".concat(change.to)
+      key: (0, _decorationKeys.buildDiffDecorationKey)({
+        type: _decorationKeys.DiffDecorationKey.widget,
+        isActive: isActive
+      })
     }));
   }
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
@@ -154,7 +160,9 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
       'data-testid': 'show-diff-changed-decoration-node',
       class: className
     }, {
-      key: 'diff-block',
+      key: (0, _decorationKeys.buildDiffDecorationKey)({
+        type: _decorationKeys.DiffDecorationKey.block
+      }),
       nodeName: change.name
     }));
   }

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

@@ -9,6 +9,7 @@ var _view = require("@atlaskit/editor-prosemirror/view");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
+var _decorationKeys = require("./decorationKeys");
 var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'none'
 });
@@ -32,7 +33,9 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     return _view.Decoration.inline(change.fromB, change.toB, {
       style: displayNoneStyle
     }, {
-      key: 'diff-inline'
+      key: (0, _decorationKeys.buildDiffDecorationKey)({
+        type: _decorationKeys.DiffDecorationKey.inline
+      })
     });
   }
   var style;
@@ -67,6 +70,8 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     style: style,
     'data-testid': 'show-diff-changed-decoration'
   }, {
-    key: 'diff-inline'
+    key: (0, _decorationKeys.buildDiffDecorationKey)({
+      type: _decorationKeys.DiffDecorationKey.inline
+    })
   });
 };

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

@@ -13,6 +13,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
+var _decorationKeys = require("./decorationKeys");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
 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; }
@@ -257,7 +258,10 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
   var decorations = [];
   decorations.push(_view.Decoration.widget(safeInsertPos, dom, _objectSpread({
-    key: "diff-widget-".concat(isActive ? 'active' : 'inactive')
+    key: (0, _decorationKeys.buildDiffDecorationKey)({
+      type: _decorationKeys.DiffDecorationKey.widget,
+      isActive: isActive
+    })
   }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
     side: -1
   })));

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildDiffDecorationKey = exports.DiffDecorationKey = exports.DIFF_KEY_PREFIX = void 0;
+/**
+ * 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.
+ */
+var DIFF_KEY_PREFIX = exports.DIFF_KEY_PREFIX = '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.
+ */
+var DiffDecorationKey = exports.DiffDecorationKey = {
+  inline: "".concat(DIFF_KEY_PREFIX, "-inline"),
+  block: "".concat(DIFF_KEY_PREFIX, "-block"),
+  widget: "".concat(DIFF_KEY_PREFIX, "-widget")
+};
+
+/**
+ * Builds a decoration key in the form `{type}-{active|inactive}`
+ * (e.g. `diff-inline-active`).
+ */
+var buildDiffDecorationKey = exports.buildDiffDecorationKey = function buildDiffDecorationKey(_ref) {
+  var type = _ref.type,
+    isActive = _ref.isActive;
+  return isActive !== undefined ? "".concat(type, "-").concat(isActive ? 'active' : 'inactive') : type;
+};

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -299,7 +299,13 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6
   var contentWrapper = document.createElement('div');
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive);
-  contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, isActive, isInserted)).concat(nodeStyle || ''));
+
+  // When the extended experiment is enabled and the content is inserted,
+  // block widget nodes that already have dedicated node-level styling (e.g. boxShadow outline)
+  // should not also get the inline content style (borderBottom underline) on their container.
+  var shouldSkipContentStyle = (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted && nodeStyle !== undefined;
+  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted);
+  contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getScrollableDecorations = void 0;
 exports.isInlineDiffDecorationRenderableInDoc = isInlineDiffDecorationRenderableInDoc;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _decorationKeys = require("./decorations/decorationKeys");
 /**
  * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
  * Block-only subtrees (e.g. empty paragraphs, block cards with no inline children) return false.
@@ -69,14 +70,14 @@ var getScrollableDecorations = exports.getScrollableDecorations = function getSc
   }
   var seenBlockKeys = new Set();
   var allDecorations = set.find(undefined, undefined, function (spec) {
-    var _spec$key;
-    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
+    var _spec$key, _spec$key2, _spec$key3;
+    return ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith(_decorationKeys.DiffDecorationKey.inline)) || ((_spec$key2 = spec.key) === null || _spec$key2 === void 0 ? void 0 : _spec$key2.startsWith(_decorationKeys.DiffDecorationKey.widget)) || ((_spec$key3 = spec.key) === null || _spec$key3 === void 0 ? void 0 : _spec$key3.startsWith(_decorationKeys.DiffDecorationKey.block));
   });
 
   // First pass: filter out listItem blocks and deduplicates blocks
   var filtered = allDecorations.filter(function (dec) {
     var _dec$spec, _dec$spec$nodeName, _dec$spec3;
-    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
+    if ((_dec$spec = dec.spec) !== null && _dec$spec !== void 0 && (_dec$spec = _dec$spec.key) !== null && _dec$spec !== void 0 && _dec$spec.startsWith(_decorationKeys.DiffDecorationKey.block)) {
       var _dec$spec2;
       // Skip listItem blocks as they are not scrollable
       if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
@@ -91,18 +92,18 @@ var getScrollableDecorations = exports.getScrollableDecorations = function getSc
   // Separate decorations by type for easier processing
   var blocks = filtered.filter(function (d) {
     var _d$spec;
-    return ((_d$spec = d.spec) === null || _d$spec === void 0 ? void 0 : _d$spec.key) === 'diff-block';
+    return (_d$spec = d.spec) === null || _d$spec === void 0 || (_d$spec = _d$spec.key) === null || _d$spec === void 0 ? void 0 : _d$spec.startsWith(_decorationKeys.DiffDecorationKey.block);
   });
   var rawInlines = filtered.filter(function (d) {
     var _d$spec2;
-    return ((_d$spec2 = d.spec) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.key) === 'diff-inline';
+    return (_d$spec2 = d.spec) === null || _d$spec2 === void 0 || (_d$spec2 = _d$spec2.key) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.startsWith(_decorationKeys.DiffDecorationKey.inline);
   });
   var inlines = doc !== undefined ? rawInlines.filter(function (d) {
     return isInlineDiffDecorationRenderableInDoc(doc, d.from, d.to);
   }) : rawInlines;
   var widgets = filtered.filter(function (d) {
     var _d$spec3;
-    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 || (_d$spec3 = _d$spec3.key) === null || _d$spec3 === void 0 ? void 0 : _d$spec3.startsWith('diff-widget');
+    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 || (_d$spec3 = _d$spec3.key) === null || _d$spec3 === void 0 ? void 0 : _d$spec3.startsWith(_decorationKeys.DiffDecorationKey.widget);
   });
 
   // Second pass: exclude overlapping decorations

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scrollToFirstDecoration = exports.scrollToActiveDecoration = void 0;
+var _decorationKeys = require("./decorations/decorationKeys");
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
  * viewport edge (helps with sticky table headers, toolbars, etc.).
@@ -54,7 +55,7 @@ var scrollToFirstDecoration = exports.scrollToFirstDecoration = function scrollT
     var _decoration$spec, _decoration$type;
     rafId = null;
     // @ts-expect-error - decoration.type is not typed public API
-    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
+    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith(_decorationKeys.DiffDecorationKey.widget) && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
       // @ts-expect-error - decoration.type is not typed public API
       var widgetDom = decoration.type.toDOM;
       // Always scroll to the top of this decoration even if it's in view already
@@ -90,7 +91,7 @@ var scrollToActiveDecoration = exports.scrollToActiveDecoration = function scrol
   var rafId = requestAnimationFrame(function () {
     var _decoration$spec2;
     rafId = null;
-    if (((_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.key) === 'diff-widget-active') {
+    if ((_decoration$spec2 = decoration.spec) !== null && _decoration$spec2 !== void 0 && (_decoration$spec2 = _decoration$spec2.key) !== null && _decoration$spec2 !== void 0 && _decoration$spec2.startsWith(_decorationKeys.DiffDecorationKey.widget)) {
       var _decoration$type2;
       // @ts-expect-error - decoration.type is not typed public API
       var widgetDom = decoration === null || decoration === void 0 || (_decoration$type2 = decoration.type) === null || _decoration$type2 === void 0 ? void 0 : _decoration$type2.toDOM;

package/dist/cjs/showDiffPlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.showDiffPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _getScrollableDecorations = require("./pm-plugins/getScrollableDecorations");
 var _main = require("./pm-plugins/main");
 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; }
@@ -19,6 +20,12 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
       showDiff: function showDiff(params) {
         return function (_ref2) {
           var tr = _ref2.tr;
+          if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+            var _api$userIntent;
+            api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('viewingDiff')({
+              tr: tr
+            });
+          }
           return tr.setMeta(_main.showDiffPluginKey, _objectSpread(_objectSpread({}, params), {}, {
             action: 'SHOW_DIFF'
           }));
@@ -26,6 +33,12 @@ var showDiffPlugin = exports.showDiffPlugin = function showDiffPlugin(_ref) {
       },
       hideDiff: function hideDiff(_ref3) {
         var tr = _ref3.tr;
+        if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          var _api$userIntent2;
+          api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent('default')({
+            tr: tr
+          });
+        }
         return tr.setMeta(_main.showDiffPluginKey, {
           steps: [],
           action: 'HIDE_DIFF'

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

@@ -3,6 +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';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -109,7 +110,9 @@ export const createBlockChangedDecoration = ({
     return [Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, {
-      key: 'diff-block',
+      key: buildDiffDecorationKey({
+        type: DiffDecorationKey.block
+      }),
       nodeName: change.name
     })];
   }
@@ -121,7 +124,10 @@ export const createBlockChangedDecoration = ({
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell
     Decoration.widget(change.to - 1, cellOverlay, {
-      key: `diff-widget-cell-overlay-${change.to}`
+      key: buildDiffDecorationKey({
+        type: DiffDecorationKey.widget,
+        isActive
+      })
     }));
   }
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
@@ -145,7 +151,9 @@ export const createBlockChangedDecoration = ({
       'data-testid': 'show-diff-changed-decoration-node',
       class: className
     }, {
-      key: 'diff-block',
+      key: buildDiffDecorationKey({
+        type: DiffDecorationKey.block
+      }),
       nodeName: change.name
     }));
   }

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

@@ -3,6 +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';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -24,7 +25,9 @@ export const createInlineChangedDecoration = ({
     return Decoration.inline(change.fromB, change.toB, {
       style: displayNoneStyle
     }, {
-      key: 'diff-inline'
+      key: buildDiffDecorationKey({
+        type: DiffDecorationKey.inline
+      })
     });
   }
   let style;
@@ -59,6 +62,8 @@ export const createInlineChangedDecoration = ({
     style,
     'data-testid': 'show-diff-changed-decoration'
   }, {
-    key: 'diff-inline'
+    key: buildDiffDecorationKey({
+      type: DiffDecorationKey.inline
+    })
   });
 };

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

@@ -4,6 +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 { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
 const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) => {
@@ -231,7 +232,10 @@ export const createNodeChangedDecorationWidget = ({
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
   const decorations = [];
   decorations.push(Decoration.widget(safeInsertPos, dom, {
-    key: `diff-widget-${isActive ? 'active' : 'inactive'}`,
+    key: buildDiffDecorationKey({
+      type: DiffDecorationKey.widget,
+      isActive
+    }),
     ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
       side: -1
     })

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

@@ -0,0 +1,25 @@
+/**
+ * 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';
+/**
+ * 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`
+};
+
+/**
+ * Builds a decoration key in the form `{type}-{active|inactive}`
+ * (e.g. `diff-inline-active`).
+ */
+export const buildDiffDecorationKey = ({
+  type,
+  isActive
+}) => isActive !== undefined ? `${type}-${isActive ? 'active' : 'inactive'}` : type;

package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -292,7 +292,13 @@ const createBlockNodeContentWrapper = ({
   const contentWrapper = document.createElement('div');
   const targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
   const nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive);
-  contentWrapper.setAttribute('style', `${getChangedContentStyle(colorScheme, isActive, isInserted)}${nodeStyle || ''}`);
+
+  // When the extended experiment is enabled and the content is inserted,
+  // block widget nodes that already have dedicated node-level styling (e.g. boxShadow outline)
+  // should not also get the inline content style (borderBottom underline) on their container.
+  const shouldSkipContentStyle = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted && nodeStyle !== undefined;
+  const contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted);
+  contentWrapper.setAttribute('style', `${contentStyle}${nodeStyle || ''}`);
   contentWrapper.append(nodeView);
   return contentWrapper;
 };

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

@@ -1,3 +1,5 @@
+import { DiffDecorationKey } from './decorations/decorationKeys';
+
 /**
  * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
  * Block-only subtrees (e.g. empty paragraphs, block cards with no inline children) return false.
@@ -60,14 +62,14 @@ export const getScrollableDecorations = (set, doc) => {
   }
   const seenBlockKeys = new Set();
   const allDecorations = set.find(undefined, undefined, spec => {
-    var _spec$key;
-    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
+    var _spec$key, _spec$key2, _spec$key3;
+    return ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith(DiffDecorationKey.inline)) || ((_spec$key2 = spec.key) === null || _spec$key2 === void 0 ? void 0 : _spec$key2.startsWith(DiffDecorationKey.widget)) || ((_spec$key3 = spec.key) === null || _spec$key3 === void 0 ? void 0 : _spec$key3.startsWith(DiffDecorationKey.block));
   });
 
   // First pass: filter out listItem blocks and deduplicates blocks
   const filtered = allDecorations.filter(dec => {
-    var _dec$spec, _dec$spec$nodeName, _dec$spec3;
-    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
+    var _dec$spec, _dec$spec$key, _dec$spec$nodeName, _dec$spec3;
+    if ((_dec$spec = dec.spec) !== null && _dec$spec !== void 0 && (_dec$spec$key = _dec$spec.key) !== null && _dec$spec$key !== void 0 && _dec$spec$key.startsWith(DiffDecorationKey.block)) {
       var _dec$spec2;
       // Skip listItem blocks as they are not scrollable
       if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
@@ -81,17 +83,17 @@ export const getScrollableDecorations = (set, doc) => {
 
   // Separate decorations by type for easier processing
   const blocks = filtered.filter(d => {
-    var _d$spec;
-    return ((_d$spec = d.spec) === null || _d$spec === void 0 ? void 0 : _d$spec.key) === 'diff-block';
+    var _d$spec, _d$spec$key;
+    return (_d$spec = d.spec) === null || _d$spec === void 0 ? void 0 : (_d$spec$key = _d$spec.key) === null || _d$spec$key === void 0 ? void 0 : _d$spec$key.startsWith(DiffDecorationKey.block);
   });
   const rawInlines = filtered.filter(d => {
-    var _d$spec2;
-    return ((_d$spec2 = d.spec) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.key) === 'diff-inline';
+    var _d$spec2, _d$spec2$key;
+    return (_d$spec2 = d.spec) === null || _d$spec2 === void 0 ? void 0 : (_d$spec2$key = _d$spec2.key) === null || _d$spec2$key === void 0 ? void 0 : _d$spec2$key.startsWith(DiffDecorationKey.inline);
   });
   const inlines = doc !== undefined ? rawInlines.filter(d => isInlineDiffDecorationRenderableInDoc(doc, d.from, d.to)) : rawInlines;
   const widgets = filtered.filter(d => {
     var _d$spec3, _d$spec3$key;
-    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 ? void 0 : (_d$spec3$key = _d$spec3.key) === null || _d$spec3$key === void 0 ? void 0 : _d$spec3$key.startsWith('diff-widget');
+    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 ? void 0 : (_d$spec3$key = _d$spec3.key) === null || _d$spec3$key === void 0 ? void 0 : _d$spec3$key.startsWith(DiffDecorationKey.widget);
   });
 
   // Second pass: exclude overlapping decorations

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

@@ -1,3 +1,5 @@
+import { DiffDecorationKey } from './decorations/decorationKeys';
+
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
  * viewport edge (helps with sticky table headers, toolbars, etc.).
@@ -48,7 +50,7 @@ export const scrollToFirstDecoration = (view, decorations) => {
     var _decoration$spec, _decoration$spec$key, _decoration$type;
     rafId = null;
     // @ts-expect-error - decoration.type is not typed public API
-    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec$key = _decoration$spec.key) !== null && _decoration$spec$key !== void 0 && _decoration$spec$key.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
+    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec$key = _decoration$spec.key) !== null && _decoration$spec$key !== void 0 && _decoration$spec$key.startsWith(DiffDecorationKey.widget) && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
       // @ts-expect-error - decoration.type is not typed public API
       const widgetDom = decoration.type.toDOM;
       // Always scroll to the top of this decoration even if it's in view already
@@ -82,9 +84,9 @@ export const scrollToActiveDecoration = (view, decorations, activeIndex) => {
     return () => {};
   }
   let rafId = requestAnimationFrame(() => {
-    var _decoration$spec2;
+    var _decoration$spec2, _decoration$spec2$key;
     rafId = null;
-    if (((_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.key) === 'diff-widget-active') {
+    if ((_decoration$spec2 = decoration.spec) !== null && _decoration$spec2 !== void 0 && (_decoration$spec2$key = _decoration$spec2.key) !== null && _decoration$spec2$key !== void 0 && _decoration$spec2$key.startsWith(DiffDecorationKey.widget)) {
       var _decoration$type2;
       // @ts-expect-error - decoration.type is not typed public API
       const widgetDom = decoration === null || decoration === void 0 ? void 0 : (_decoration$type2 = decoration.type) === null || _decoration$type2 === void 0 ? void 0 : _decoration$type2.toDOM;

package/dist/es2019/showDiffPlugin.js

@@ -1,3 +1,4 @@
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getScrollableDecorations } from './pm-plugins/getScrollableDecorations';
 import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
 export const showDiffPlugin = ({
@@ -9,6 +10,12 @@ export const showDiffPlugin = ({
     showDiff: params => ({
       tr
     }) => {
+      if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        var _api$userIntent;
+        api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('viewingDiff')({
+          tr
+        });
+      }
       return tr.setMeta(showDiffPluginKey, {
         ...params,
         action: 'SHOW_DIFF'
@@ -17,6 +24,12 @@ export const showDiffPlugin = ({
     hideDiff: ({
       tr
     }) => {
+      if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+        var _api$userIntent2;
+        api === null || api === void 0 ? void 0 : (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default')({
+          tr
+        });
+      }
       return tr.setMeta(showDiffPluginKey, {
         steps: [],
         action: 'HIDE_DIFF'

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

@@ -3,6 +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';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -112,7 +113,9 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     return [Decoration.node(change.from, change.to, {
       style: displayNoneStyle
     }, {
-      key: 'diff-block',
+      key: buildDiffDecorationKey({
+        type: DiffDecorationKey.block
+      }),
       nodeName: change.name
     })];
   }
@@ -124,7 +127,10 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell
     Decoration.widget(change.to - 1, cellOverlay, {
-      key: "diff-widget-cell-overlay-".concat(change.to)
+      key: buildDiffDecorationKey({
+        type: DiffDecorationKey.widget,
+        isActive: isActive
+      })
     }));
   }
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
@@ -148,7 +154,9 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       'data-testid': 'show-diff-changed-decoration-node',
       class: className
     }, {
-      key: 'diff-block',
+      key: buildDiffDecorationKey({
+        type: DiffDecorationKey.block
+      }),
       nodeName: change.name
     }));
   }

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

@@ -3,6 +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';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
@@ -26,7 +27,9 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     return Decoration.inline(change.fromB, change.toB, {
       style: displayNoneStyle
     }, {
-      key: 'diff-inline'
+      key: buildDiffDecorationKey({
+        type: DiffDecorationKey.inline
+      })
     });
   }
   var style;
@@ -61,6 +64,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     style: style,
     'data-testid': 'show-diff-changed-decoration'
   }, {
-    key: 'diff-inline'
+    key: buildDiffDecorationKey({
+      type: DiffDecorationKey.inline
+    })
   });
 };

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

@@ -8,6 +8,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 { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
@@ -250,7 +251,10 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
   var decorations = [];
   decorations.push(Decoration.widget(safeInsertPos, dom, _objectSpread({
-    key: "diff-widget-".concat(isActive ? 'active' : 'inactive')
+    key: buildDiffDecorationKey({
+      type: DiffDecorationKey.widget,
+      isActive: isActive
+    })
   }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
     side: -1
   })));

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

@@ -0,0 +1,26 @@
+/**
+ * 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 var DIFF_KEY_PREFIX = '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 var DiffDecorationKey = {
+  inline: "".concat(DIFF_KEY_PREFIX, "-inline"),
+  block: "".concat(DIFF_KEY_PREFIX, "-block"),
+  widget: "".concat(DIFF_KEY_PREFIX, "-widget")
+};
+
+/**
+ * Builds a decoration key in the form `{type}-{active|inactive}`
+ * (e.g. `diff-inline-active`).
+ */
+export var buildDiffDecorationKey = function buildDiffDecorationKey(_ref) {
+  var type = _ref.type,
+    isActive = _ref.isActive;
+  return isActive !== undefined ? "".concat(type, "-").concat(isActive ? 'active' : 'inactive') : type;
+};

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

@@ -293,7 +293,13 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6
   var contentWrapper = document.createElement('div');
   var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
   var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive);
-  contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, isActive, isInserted)).concat(nodeStyle || ''));
+
+  // When the extended experiment is enabled and the content is inserted,
+  // block widget nodes that already have dedicated node-level styling (e.g. boxShadow outline)
+  // should not also get the inline content style (borderBottom underline) on their container.
+  var shouldSkipContentStyle = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted && nodeStyle !== undefined;
+  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted);
+  contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };

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

@@ -1,4 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { DiffDecorationKey } from './decorations/decorationKeys';
+
 /**
  * True if `fragment` contains at least one inline node (text, hardBreak, emoji, mention, etc.).
  * Block-only subtrees (e.g. empty paragraphs, block cards with no inline children) return false.
@@ -61,14 +63,14 @@ export var getScrollableDecorations = function getScrollableDecorations(set, doc
   }
   var seenBlockKeys = new Set();
   var allDecorations = set.find(undefined, undefined, function (spec) {
-    var _spec$key;
-    return spec.key === 'diff-inline' || ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith('diff-widget')) || spec.key === 'diff-block';
+    var _spec$key, _spec$key2, _spec$key3;
+    return ((_spec$key = spec.key) === null || _spec$key === void 0 ? void 0 : _spec$key.startsWith(DiffDecorationKey.inline)) || ((_spec$key2 = spec.key) === null || _spec$key2 === void 0 ? void 0 : _spec$key2.startsWith(DiffDecorationKey.widget)) || ((_spec$key3 = spec.key) === null || _spec$key3 === void 0 ? void 0 : _spec$key3.startsWith(DiffDecorationKey.block));
   });
 
   // First pass: filter out listItem blocks and deduplicates blocks
   var filtered = allDecorations.filter(function (dec) {
     var _dec$spec, _dec$spec$nodeName, _dec$spec3;
-    if (((_dec$spec = dec.spec) === null || _dec$spec === void 0 ? void 0 : _dec$spec.key) === 'diff-block') {
+    if ((_dec$spec = dec.spec) !== null && _dec$spec !== void 0 && (_dec$spec = _dec$spec.key) !== null && _dec$spec !== void 0 && _dec$spec.startsWith(DiffDecorationKey.block)) {
       var _dec$spec2;
       // Skip listItem blocks as they are not scrollable
       if (((_dec$spec2 = dec.spec) === null || _dec$spec2 === void 0 ? void 0 : _dec$spec2.nodeName) === 'listItem') return false;
@@ -83,18 +85,18 @@ export var getScrollableDecorations = function getScrollableDecorations(set, doc
   // Separate decorations by type for easier processing
   var blocks = filtered.filter(function (d) {
     var _d$spec;
-    return ((_d$spec = d.spec) === null || _d$spec === void 0 ? void 0 : _d$spec.key) === 'diff-block';
+    return (_d$spec = d.spec) === null || _d$spec === void 0 || (_d$spec = _d$spec.key) === null || _d$spec === void 0 ? void 0 : _d$spec.startsWith(DiffDecorationKey.block);
   });
   var rawInlines = filtered.filter(function (d) {
     var _d$spec2;
-    return ((_d$spec2 = d.spec) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.key) === 'diff-inline';
+    return (_d$spec2 = d.spec) === null || _d$spec2 === void 0 || (_d$spec2 = _d$spec2.key) === null || _d$spec2 === void 0 ? void 0 : _d$spec2.startsWith(DiffDecorationKey.inline);
   });
   var inlines = doc !== undefined ? rawInlines.filter(function (d) {
     return isInlineDiffDecorationRenderableInDoc(doc, d.from, d.to);
   }) : rawInlines;
   var widgets = filtered.filter(function (d) {
     var _d$spec3;
-    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 || (_d$spec3 = _d$spec3.key) === null || _d$spec3 === void 0 ? void 0 : _d$spec3.startsWith('diff-widget');
+    return (_d$spec3 = d.spec) === null || _d$spec3 === void 0 || (_d$spec3 = _d$spec3.key) === null || _d$spec3 === void 0 ? void 0 : _d$spec3.startsWith(DiffDecorationKey.widget);
   });
 
   // Second pass: exclude overlapping decorations

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

@@ -1,3 +1,5 @@
+import { DiffDecorationKey } from './decorations/decorationKeys';
+
 /**
  * Extra space above the scrolled-to element so it does not sit flush under the
  * viewport edge (helps with sticky table headers, toolbars, etc.).
@@ -48,7 +50,7 @@ export var scrollToFirstDecoration = function scrollToFirstDecoration(view, deco
     var _decoration$spec, _decoration$type;
     rafId = null;
     // @ts-expect-error - decoration.type is not typed public API
-    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith('diff-widget') && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
+    if ((_decoration$spec = decoration.spec) !== null && _decoration$spec !== void 0 && (_decoration$spec = _decoration$spec.key) !== null && _decoration$spec !== void 0 && _decoration$spec.startsWith(DiffDecorationKey.widget) && decoration !== null && decoration !== void 0 && (_decoration$type = decoration.type) !== null && _decoration$type !== void 0 && _decoration$type.toDOM) {
       // @ts-expect-error - decoration.type is not typed public API
       var widgetDom = decoration.type.toDOM;
       // Always scroll to the top of this decoration even if it's in view already
@@ -84,7 +86,7 @@ export var scrollToActiveDecoration = function scrollToActiveDecoration(view, de
   var rafId = requestAnimationFrame(function () {
     var _decoration$spec2;
     rafId = null;
-    if (((_decoration$spec2 = decoration.spec) === null || _decoration$spec2 === void 0 ? void 0 : _decoration$spec2.key) === 'diff-widget-active') {
+    if ((_decoration$spec2 = decoration.spec) !== null && _decoration$spec2 !== void 0 && (_decoration$spec2 = _decoration$spec2.key) !== null && _decoration$spec2 !== void 0 && _decoration$spec2.startsWith(DiffDecorationKey.widget)) {
       var _decoration$type2;
       // @ts-expect-error - decoration.type is not typed public API
       var widgetDom = decoration === null || decoration === void 0 || (_decoration$type2 = decoration.type) === null || _decoration$type2 === void 0 ? void 0 : _decoration$type2.toDOM;

package/dist/esm/showDiffPlugin.js

@@ -1,6 +1,7 @@
 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getScrollableDecorations } from './pm-plugins/getScrollableDecorations';
 import { createPlugin, showDiffPluginKey } from './pm-plugins/main';
 export var showDiffPlugin = function showDiffPlugin(_ref) {
@@ -12,6 +13,12 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
       showDiff: function showDiff(params) {
         return function (_ref2) {
           var tr = _ref2.tr;
+          if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+            var _api$userIntent;
+            api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 || _api$userIntent.commands.setCurrentUserIntent('viewingDiff')({
+              tr: tr
+            });
+          }
           return tr.setMeta(showDiffPluginKey, _objectSpread(_objectSpread({}, params), {}, {
             action: 'SHOW_DIFF'
           }));
@@ -19,6 +26,12 @@ export var showDiffPlugin = function showDiffPlugin(_ref) {
       },
       hideDiff: function hideDiff(_ref3) {
         var tr = _ref3.tr;
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          var _api$userIntent2;
+          api === null || api === void 0 || (_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 || _api$userIntent2.commands.setCurrentUserIntent('default')({
+            tr: tr
+          });
+        }
         return tr.setMeta(showDiffPluginKey, {
           steps: [],
           action: 'HIDE_DIFF'

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

@@ -0,0 +1,23 @@
+/**
+ * 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 declare const DIFF_KEY_PREFIX = "diff";
+type DiffDecorationKind = 'inline' | 'block' | 'widget';
+type DiffDecorationKeyType = `${typeof DIFF_KEY_PREFIX}-${DiffDecorationKind}`;
+/**
+ * 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 declare const DiffDecorationKey: Readonly<Record<DiffDecorationKind, DiffDecorationKeyType>>;
+/**
+ * Builds a decoration key in the form `{type}-{active|inactive}`
+ * (e.g. `diff-inline-active`).
+ */
+export declare const buildDiffDecorationKey: ({ type, isActive, }: {
+    isActive?: boolean;
+    type: DiffDecorationKeyType;
+}) => string;
+export {};

package/dist/types/showDiffPluginType.d.ts

@@ -3,6 +3,7 @@ import type { NextEditorPlugin, EditorCommand, OptionalPlugin } from '@atlaskit/
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
+import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
 export type ColorScheme = 'standard' | 'traditional';
@@ -43,7 +44,11 @@ export type ShowDiffPlugin = NextEditorPlugin<'showDiff', {
         scrollToPrevious: EditorCommand;
         showDiff: (config: PMDiffParams) => EditorCommand;
     };
-    dependencies: [OptionalPlugin<AnalyticsPlugin>, OptionalPlugin<ExpandPlugin>];
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<ExpandPlugin>,
+        OptionalPlugin<UserIntentPlugin>
+    ];
     pluginConfiguration: DiffParams | undefined;
     sharedState: {
         /**

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

@@ -0,0 +1,23 @@
+/**
+ * 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 declare const DIFF_KEY_PREFIX = "diff";
+type DiffDecorationKind = 'inline' | 'block' | 'widget';
+type DiffDecorationKeyType = `${typeof DIFF_KEY_PREFIX}-${DiffDecorationKind}`;
+/**
+ * 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 declare const DiffDecorationKey: Readonly<Record<DiffDecorationKind, DiffDecorationKeyType>>;
+/**
+ * Builds a decoration key in the form `{type}-{active|inactive}`
+ * (e.g. `diff-inline-active`).
+ */
+export declare const buildDiffDecorationKey: ({ type, isActive, }: {
+    isActive?: boolean;
+    type: DiffDecorationKeyType;
+}) => string;
+export {};

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

@@ -3,6 +3,7 @@ import type { NextEditorPlugin, EditorCommand, OptionalPlugin } from '@atlaskit/
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ExpandPlugin } from '@atlaskit/editor-plugin-expand';
+import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
 export type ColorScheme = 'standard' | 'traditional';
@@ -45,7 +46,8 @@ export type ShowDiffPlugin = NextEditorPlugin<'showDiff', {
     };
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<ExpandPlugin>
+        OptionalPlugin<ExpandPlugin>,
+        OptionalPlugin<UserIntentPlugin>
     ];
     pluginConfiguration: DiffParams | undefined;
     sharedState: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "9.0.17",
+	"version": "9.1.1",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,10 +32,11 @@
 		"@atlaskit/custom-steps": "^0.17.0",
 		"@atlaskit/editor-plugin-analytics": "^11.0.0",
 		"@atlaskit/editor-plugin-expand": "^12.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^9.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^100.0.0",
+		"@atlaskit/tmp-editor-statsig": "^102.0.0",
 		"@atlaskit/tokens": "^13.4.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",