@atlaskit/editor-plugin-show-diff 10.5.1 → 10.5.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 10.5.2
+
+### Patch Changes
+
+- [`75c7e6a9aa4ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75c7e6a9aa4ec) -
+  [ux] Improve showing diff for attribute changes for inline nodes.
+- Updated dependencies
+
 ## 10.5.1
 
 ### Patch Changes

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

@@ -427,16 +427,43 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       isInserted: true
     })));
   });
-  (0, _getAttrChangeRanges.getAttrChangeRanges)(tr.doc, attrSteps).forEach(function (change) {
+  (0, _getAttrChangeRanges.getAttrChangeRanges)(tr.doc, attrSteps, originalDoc).forEach(function (change) {
     if (change.isInline) {
-      // Inline nodes (e.g. date) need an inline decoration rather than a block decoration
+      // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
+      var isAtomicInlineNodeFlag = (0, _expValEquals.expValEquals)('platform_editor_improve_inline_diffs', 'isEnabled', true);
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive,
-        isInserted: true
+        isInserted: true,
+        isAtomicInlineNode: isAtomicInlineNodeFlag,
+        inlineNodeName: change.inlineNodeName,
+        // Suppress the border-bottom underline for atomic inline nodeviews —
+        // it doesn't render on custom nodeview DOM elements and is unnecessary noise.
+        hideAddedDiffsUnderline: isAtomicInlineNodeFlag,
+        diffType: diffType
       })));
+      // If we have the original node position, also render the old node as a "deleted" widget
+      // so the user can see what it looked like before the change.
+      if (change.fromA !== undefined && change.toA !== undefined && (0, _expValEquals.expValEquals)('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
+        decorations.push.apply(decorations, (0, _toConsumableArray2.default)((0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)({
+          change: {
+            fromA: change.fromA,
+            toA: change.toA,
+            fromB: change.fromB,
+            toB: change.toB,
+            deleted: []
+          },
+          doc: originalDoc,
+          nodeViewSerializer: nodeViewSerializer,
+          colorScheme: colorScheme,
+          newDoc: tr.doc,
+          intl: intl,
+          activeIndexPos: activeIndexPos,
+          isInserted: false
+        })));
+      }
     } else {
       decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration({
         doc: tr.doc,

package/dist/cjs/pm-plugins/decorations/colorSchemes/traditional.js

@@ -93,7 +93,7 @@ var deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBloc
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 
-/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+/** Scroll-navigation “new” emphasis: 4px ring. */
 var deletedTraditionalBlockOutlineNew = exports.deletedTraditionalBlockOutlineNew = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
   borderRadius: "var(--ds-radius-small, 4px)"

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createInlineChangedDecoration = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _isExtendedEnabled = require("../isExtendedEnabled");
@@ -13,9 +14,21 @@ var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _decorationKeys = require("./decorationKeys");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'none'
 });
+var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName, colorScheme) {
+  var classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push("show-diff-atomic-inline-changed-".concat(inlineNodeName));
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -30,6 +43,8 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     _ref$isInserted = _ref.isInserted,
     isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    _ref$isAtomicInlineNo = _ref.isAtomicInlineNode,
+    isAtomicInlineNode = _ref$isAtomicInlineNo === void 0 ? false : _ref$isAtomicInlineNo,
     _ref$shouldHideDelete = _ref.shouldHideDeleted,
     shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete,
     _ref$showIndicators = _ref.showIndicators,
@@ -37,7 +52,8 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
     doc = _ref.doc,
     diffType = _ref.diffType,
     _ref$hideAddedDiffsUn = _ref.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn;
+    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn,
+    inlineNodeName = _ref.inlineNodeName;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [_view.Decoration.inline(change.fromB, change.toB, {
@@ -76,10 +92,13 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
     }
   }
-  var decorations = [_view.Decoration.inline(change.fromB, change.toB, {
-    style: style,
+  var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread({
+    style: style
+  }, isAtomicInlineNode && isInserted && {
+    class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+  }), {}, {
     'data-testid': 'show-diff-changed-decoration'
-  }, (0, _decorationKeys.buildDiffDecorationSpec)({
+  }), (0, _decorationKeys.buildDiffDecorationSpec)({
     decorationType: 'inline',
     diffId: diffId,
     isActive: isActive

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

@@ -1,11 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stepIsValidAttrChange = exports.getAttrChangeRanges = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _steps = require("@atlaskit/adf-schema/steps");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var filterUndefined = function filterUndefined(x) {
   return !!x;
 };
@@ -19,6 +24,26 @@ var dateAttrs = ['timestamp'];
 // Attribute that indicates a task item state change
 var taskItemAttrs = ['state'];
 
+// Attributes that indicate an emoji change
+var emojiAttrs = ['shortName', 'id', 'text'];
+
+// Attributes that indicate a mention change (who is mentioned)
+var mentionAttrs = ['id', 'text'];
+
+// Attributes that indicate a status change (label or colour)
+var statusAttrs = ['text', 'color'];
+
+// Map of node type name → the attrs that represent a meaningful content change for that node
+var inlineNodeAttrMap = {
+  date: dateAttrs,
+  emoji: emojiAttrs,
+  mention: mentionAttrs,
+  status: statusAttrs
+};
+var isInlineAttrChangeNodeName = function isInlineAttrChangeNodeName(nodeName) {
+  return nodeName in inlineNodeAttrMap;
+};
+
 // Attributes excluded from extension change detection (not meaningful content changes)
 var extensionExcludedAttrs = ['localId'];
 
@@ -33,7 +58,7 @@ var getStepAttrs = function getStepAttrs(step) {
   }
   return [];
 };
-var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRanges(doc, steps) {
+var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRanges(doc, steps, originalDoc) {
   return steps.map(function (step) {
     if (!(step instanceof _transform.AttrStep) && !(step instanceof _steps.SetAttrsStep)) {
       return undefined;
@@ -45,14 +70,39 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
     // date node: timestamp attribute change — highlight the date node itself (inline)
     if (stepAttrs.some(function (v) {
       return dateAttrs.includes(v);
-    }) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date') {
+    }) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !(0, _expValEquals.expValEquals)('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
       return {
         fromB: step.pos,
         toB: step.pos + nodeAtPos.nodeSize,
-        isInline: true
+        isInline: true,
+        inlineNodeName: 'date'
       };
     }
 
+    // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
+    // The changeset path (createDecorationsForChange) handles the deletion widget via
+    // prosemirror-changeset; we only need to add the inline insertion highlight here.
+    if ((0, _expValEquals.expValEquals)('platform_editor_improve_inline_diffs', 'isEnabled', true) && nodeAtPos) {
+      var nodeName = nodeAtPos.type.name;
+      if (isInlineAttrChangeNodeName(nodeName)) {
+        var watchedAttrs = inlineNodeAttrMap[nodeName];
+        if (stepAttrs.some(function (v) {
+          return watchedAttrs.includes(v);
+        })) {
+          var originalNodeAtPos = originalDoc === null || originalDoc === void 0 ? void 0 : originalDoc.nodeAt(step.pos);
+          return _objectSpread({
+            fromB: step.pos,
+            toB: step.pos + nodeAtPos.nodeSize,
+            isInline: true,
+            inlineNodeName: nodeName
+          }, originalNodeAtPos && {
+            fromA: step.pos,
+            toA: step.pos + originalNodeAtPos.nodeSize
+          });
+        }
+      }
+    }
+
     // taskItem node: state attribute change — highlight the taskItem node
     if (stepAttrs.some(function (v) {
       return taskItemAttrs.includes(v);
@@ -86,7 +136,17 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
       };
     }
     return undefined;
-  }).filter(filterUndefined);
+  }).filter(filterUndefined)
+  // Deduplicate by node position: multiple AttrSteps on the same node
+  // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
+  // should produce only one decoration, not one per step.
+  // Gated behind the same experiment as the inline node attr changes that introduced
+  // the possibility of multiple ranges for the same node position.
+  .filter(function (range, i, arr) {
+    return !(0, _expValEquals.expValEquals)('platform_editor_improve_inline_diffs', 'isEnabled', true) || arr.findIndex(function (r) {
+      return r.fromB === range.fromB;
+    }) === i;
+  });
 };
 
 /**

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

@@ -390,16 +390,43 @@ const calculateDiffDecorationsInner = ({
       isInserted: true
     }));
   });
-  getAttrChangeRanges(tr.doc, attrSteps).forEach(change => {
+  getAttrChangeRanges(tr.doc, attrSteps, originalDoc).forEach(change => {
     if (change.isInline) {
-      // Inline nodes (e.g. date) need an inline decoration rather than a block decoration
+      // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       const isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
+      const isAtomicInlineNodeFlag = expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
       decorations.push(...createInlineChangedDecoration({
         change,
         colorScheme,
         isActive,
-        isInserted: true
+        isInserted: true,
+        isAtomicInlineNode: isAtomicInlineNodeFlag,
+        inlineNodeName: change.inlineNodeName,
+        // Suppress the border-bottom underline for atomic inline nodeviews —
+        // it doesn't render on custom nodeview DOM elements and is unnecessary noise.
+        hideAddedDiffsUnderline: isAtomicInlineNodeFlag,
+        diffType
       }));
+      // If we have the original node position, also render the old node as a "deleted" widget
+      // so the user can see what it looked like before the change.
+      if (change.fromA !== undefined && change.toA !== undefined && expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
+        decorations.push(...createNodeChangedDecorationWidget({
+          change: {
+            fromA: change.fromA,
+            toA: change.toA,
+            fromB: change.fromB,
+            toB: change.toB,
+            deleted: []
+          },
+          doc: originalDoc,
+          nodeViewSerializer,
+          colorScheme,
+          newDoc: tr.doc,
+          intl,
+          activeIndexPos,
+          isInserted: false
+        }));
+      }
     } else {
       decorations.push(...calculateNodesForBlockDecoration({
         doc: tr.doc,

package/dist/es2019/pm-plugins/decorations/colorSchemes/traditional.js

@@ -82,7 +82,7 @@ export const deletedTraditionalBlockOutlineRoundedActive = convertToInlineCss({
   borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
 });
 
-/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+/** Scroll-navigation “new” emphasis: 4px ring. */
 export const deletedTraditionalBlockOutlineNew = convertToInlineCss({
   boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"

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

@@ -8,6 +8,16 @@ import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+const getAtomicInlineNodeClassName = (inlineNodeName, colorScheme) => {
+  const classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push(`show-diff-atomic-inline-changed-${inlineNodeName}`);
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -20,11 +30,13 @@ export const createInlineChangedDecoration = ({
   colorScheme,
   isActive = false,
   isInserted = true,
+  isAtomicInlineNode = false,
   shouldHideDeleted = false,
   showIndicators = false,
   doc,
   diffType,
-  hideAddedDiffsUnderline = false
+  hideAddedDiffsUnderline = false,
+  inlineNodeName
 }) => {
   const diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
@@ -66,6 +78,9 @@ export const createInlineChangedDecoration = ({
   }
   const decorations = [Decoration.inline(change.fromB, change.toB, {
     style,
+    ...(isAtomicInlineNode && isInserted && {
+      class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+    }),
     'data-testid': 'show-diff-changed-decoration'
   }, buildDiffDecorationSpec({
     decorationType: 'inline',

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

@@ -1,5 +1,6 @@
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const filterUndefined = x => !!x;
 
 // Attributes that indicate a change in media image
@@ -11,6 +12,24 @@ const dateAttrs = ['timestamp'];
 // Attribute that indicates a task item state change
 const taskItemAttrs = ['state'];
 
+// Attributes that indicate an emoji change
+const emojiAttrs = ['shortName', 'id', 'text'];
+
+// Attributes that indicate a mention change (who is mentioned)
+const mentionAttrs = ['id', 'text'];
+
+// Attributes that indicate a status change (label or colour)
+const statusAttrs = ['text', 'color'];
+
+// Map of node type name → the attrs that represent a meaningful content change for that node
+const inlineNodeAttrMap = {
+  date: dateAttrs,
+  emoji: emojiAttrs,
+  mention: mentionAttrs,
+  status: statusAttrs
+};
+const isInlineAttrChangeNodeName = nodeName => nodeName in inlineNodeAttrMap;
+
 // Attributes excluded from extension change detection (not meaningful content changes)
 const extensionExcludedAttrs = ['localId'];
 
@@ -25,7 +44,7 @@ const getStepAttrs = step => {
   }
   return [];
 };
-export const getAttrChangeRanges = (doc, steps) => {
+export const getAttrChangeRanges = (doc, steps, originalDoc) => {
   return steps.map(step => {
     if (!(step instanceof AttrStep) && !(step instanceof SetAttrsStep)) {
       return undefined;
@@ -35,14 +54,38 @@ export const getAttrChangeRanges = (doc, steps) => {
     const nodeAtPos = doc.nodeAt(step.pos);
 
     // date node: timestamp attribute change — highlight the date node itself (inline)
-    if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date') {
+    if (stepAttrs.some(v => dateAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
       return {
         fromB: step.pos,
         toB: step.pos + nodeAtPos.nodeSize,
-        isInline: true
+        isInline: true,
+        inlineNodeName: 'date'
       };
     }
 
+    // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
+    // The changeset path (createDecorationsForChange) handles the deletion widget via
+    // prosemirror-changeset; we only need to add the inline insertion highlight here.
+    if (expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) && nodeAtPos) {
+      const nodeName = nodeAtPos.type.name;
+      if (isInlineAttrChangeNodeName(nodeName)) {
+        const watchedAttrs = inlineNodeAttrMap[nodeName];
+        if (stepAttrs.some(v => watchedAttrs.includes(v))) {
+          const originalNodeAtPos = originalDoc === null || originalDoc === void 0 ? void 0 : originalDoc.nodeAt(step.pos);
+          return {
+            fromB: step.pos,
+            toB: step.pos + nodeAtPos.nodeSize,
+            isInline: true,
+            inlineNodeName: nodeName,
+            ...(originalNodeAtPos && {
+              fromA: step.pos,
+              toA: step.pos + originalNodeAtPos.nodeSize
+            })
+          };
+        }
+      }
+    }
+
     // taskItem node: state attribute change — highlight the taskItem node
     if (stepAttrs.some(v => taskItemAttrs.includes(v)) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'taskItem') {
       return {
@@ -70,7 +113,13 @@ export const getAttrChangeRanges = (doc, steps) => {
       };
     }
     return undefined;
-  }).filter(filterUndefined);
+  }).filter(filterUndefined)
+  // Deduplicate by node position: multiple AttrSteps on the same node
+  // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
+  // should produce only one decoration, not one per step.
+  // Gated behind the same experiment as the inline node attr changes that introduced
+  // the possibility of multiple ranges for the same node position.
+  .filter((range, i, arr) => !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) || arr.findIndex(r => r.fromB === range.fromB) === i);
 };
 
 /**

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

@@ -421,16 +421,43 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
       isInserted: true
     })));
   });
-  getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
+  getAttrChangeRanges(tr.doc, attrSteps, originalDoc).forEach(function (change) {
     if (change.isInline) {
-      // Inline nodes (e.g. date) need an inline decoration rather than a block decoration
+      // Inline nodes (e.g. date, emoji, mention, status) need an inline decoration rather than a block decoration
       var isActive = activeIndexPos && change.fromB === activeIndexPos.from && change.toB === activeIndexPos.to;
+      var isAtomicInlineNodeFlag = expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
       decorations.push.apply(decorations, _toConsumableArray(createInlineChangedDecoration({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive,
-        isInserted: true
+        isInserted: true,
+        isAtomicInlineNode: isAtomicInlineNodeFlag,
+        inlineNodeName: change.inlineNodeName,
+        // Suppress the border-bottom underline for atomic inline nodeviews —
+        // it doesn't render on custom nodeview DOM elements and is unnecessary noise.
+        hideAddedDiffsUnderline: isAtomicInlineNodeFlag,
+        diffType: diffType
       })));
+      // If we have the original node position, also render the old node as a "deleted" widget
+      // so the user can see what it looked like before the change.
+      if (change.fromA !== undefined && change.toA !== undefined && expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
+        decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget({
+          change: {
+            fromA: change.fromA,
+            toA: change.toA,
+            fromB: change.fromB,
+            toB: change.toB,
+            deleted: []
+          },
+          doc: originalDoc,
+          nodeViewSerializer: nodeViewSerializer,
+          colorScheme: colorScheme,
+          newDoc: tr.doc,
+          intl: intl,
+          activeIndexPos: activeIndexPos,
+          isInserted: false
+        })));
+      }
     } else {
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
         doc: tr.doc,

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

@@ -84,7 +84,7 @@ export var deletedTraditionalBlockOutlineRoundedActive = convertToInlineCss({
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 
-/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+/** Scroll-navigation “new” emphasis: 4px ring. */
 export var deletedTraditionalBlockOutlineNew = convertToInlineCss({
   boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
   borderRadius: "var(--ds-radius-small, 4px)"

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

@@ -1,4 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { isExtendedEnabled } from '../isExtendedEnabled';
@@ -9,6 +12,16 @@ import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName, colorScheme) {
+  var classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push("show-diff-atomic-inline-changed-".concat(inlineNodeName));
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -23,6 +36,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     _ref$isInserted = _ref.isInserted,
     isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
+    _ref$isAtomicInlineNo = _ref.isAtomicInlineNode,
+    isAtomicInlineNode = _ref$isAtomicInlineNo === void 0 ? false : _ref$isAtomicInlineNo,
     _ref$shouldHideDelete = _ref.shouldHideDeleted,
     shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete,
     _ref$showIndicators = _ref.showIndicators,
@@ -30,7 +45,8 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     doc = _ref.doc,
     diffType = _ref.diffType,
     _ref$hideAddedDiffsUn = _ref.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn;
+    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn,
+    inlineNodeName = _ref.inlineNodeName;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [Decoration.inline(change.fromB, change.toB, {
@@ -69,10 +85,13 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
       style = isActive ? editingStyleActive : editingStyle;
     }
   }
-  var decorations = [Decoration.inline(change.fromB, change.toB, {
-    style: style,
+  var decorations = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread({
+    style: style
+  }, isAtomicInlineNode && isInserted && {
+    class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+  }), {}, {
     'data-testid': 'show-diff-changed-decoration'
-  }, buildDiffDecorationSpec({
+  }), buildDiffDecorationSpec({
     decorationType: 'inline',
     diffId: diffId,
     isActive: isActive

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

@@ -1,5 +1,9 @@
+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 { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var filterUndefined = function filterUndefined(x) {
   return !!x;
 };
@@ -13,6 +17,26 @@ var dateAttrs = ['timestamp'];
 // Attribute that indicates a task item state change
 var taskItemAttrs = ['state'];
 
+// Attributes that indicate an emoji change
+var emojiAttrs = ['shortName', 'id', 'text'];
+
+// Attributes that indicate a mention change (who is mentioned)
+var mentionAttrs = ['id', 'text'];
+
+// Attributes that indicate a status change (label or colour)
+var statusAttrs = ['text', 'color'];
+
+// Map of node type name → the attrs that represent a meaningful content change for that node
+var inlineNodeAttrMap = {
+  date: dateAttrs,
+  emoji: emojiAttrs,
+  mention: mentionAttrs,
+  status: statusAttrs
+};
+var isInlineAttrChangeNodeName = function isInlineAttrChangeNodeName(nodeName) {
+  return nodeName in inlineNodeAttrMap;
+};
+
 // Attributes excluded from extension change detection (not meaningful content changes)
 var extensionExcludedAttrs = ['localId'];
 
@@ -27,7 +51,7 @@ var getStepAttrs = function getStepAttrs(step) {
   }
   return [];
 };
-export var getAttrChangeRanges = function getAttrChangeRanges(doc, steps) {
+export var getAttrChangeRanges = function getAttrChangeRanges(doc, steps, originalDoc) {
   return steps.map(function (step) {
     if (!(step instanceof AttrStep) && !(step instanceof SetAttrsStep)) {
       return undefined;
@@ -39,14 +63,39 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, steps) {
     // date node: timestamp attribute change — highlight the date node itself (inline)
     if (stepAttrs.some(function (v) {
       return dateAttrs.includes(v);
-    }) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date') {
+    }) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true)) {
       return {
         fromB: step.pos,
         toB: step.pos + nodeAtPos.nodeSize,
-        isInline: true
+        isInline: true,
+        inlineNodeName: 'date'
       };
     }
 
+    // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
+    // The changeset path (createDecorationsForChange) handles the deletion widget via
+    // prosemirror-changeset; we only need to add the inline insertion highlight here.
+    if (expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) && nodeAtPos) {
+      var nodeName = nodeAtPos.type.name;
+      if (isInlineAttrChangeNodeName(nodeName)) {
+        var watchedAttrs = inlineNodeAttrMap[nodeName];
+        if (stepAttrs.some(function (v) {
+          return watchedAttrs.includes(v);
+        })) {
+          var originalNodeAtPos = originalDoc === null || originalDoc === void 0 ? void 0 : originalDoc.nodeAt(step.pos);
+          return _objectSpread({
+            fromB: step.pos,
+            toB: step.pos + nodeAtPos.nodeSize,
+            isInline: true,
+            inlineNodeName: nodeName
+          }, originalNodeAtPos && {
+            fromA: step.pos,
+            toA: step.pos + originalNodeAtPos.nodeSize
+          });
+        }
+      }
+    }
+
     // taskItem node: state attribute change — highlight the taskItem node
     if (stepAttrs.some(function (v) {
       return taskItemAttrs.includes(v);
@@ -80,7 +129,17 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, steps) {
       };
     }
     return undefined;
-  }).filter(filterUndefined);
+  }).filter(filterUndefined)
+  // Deduplicate by node position: multiple AttrSteps on the same node
+  // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
+  // should produce only one decoration, not one per step.
+  // Gated behind the same experiment as the inline node attr changes that introduced
+  // the possibility of multiple ranges for the same node position.
+  .filter(function (range, i, arr) {
+    return !expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true) || arr.findIndex(function (r) {
+      return r.fromB === range.fromB;
+    }) === i;
+  });
 };
 
 /**

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

@@ -11,7 +11,7 @@ export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedTraditionalBlockOutlineActive: string;
 export declare const deletedTraditionalBlockOutlineRounded: string;
 export declare const deletedTraditionalBlockOutlineRoundedActive: string;
-/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+/** Scroll-navigation “new” emphasis: 4px ring. */
 export declare const deletedTraditionalBlockOutlineNew: string;
 export declare const deletedTraditionalBlockOutlineRoundedNew: string;
 export declare const deletedTraditionalRowStyle: string;

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

@@ -1,13 +1,14 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { ColorScheme, DiffType } from '../../showDiffPluginType';
+import type { InlineAttrChangeNodeName } from './utils/getAttrChangeRanges';
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, isInserted, shouldHideDeleted, showIndicators, doc, diffType, hideAddedDiffsUnderline, }: {
+export declare const createInlineChangedDecoration: ({ change, colorScheme, isActive, isInserted, isAtomicInlineNode, shouldHideDeleted, showIndicators, doc, diffType, hideAddedDiffsUnderline, inlineNodeName, }: {
     change: {
         fromB: number;
         toB: number;
@@ -16,7 +17,9 @@ export declare const createInlineChangedDecoration: ({ change, colorScheme, isAc
     diffType?: DiffType;
     doc?: PMNode;
     hideAddedDiffsUnderline?: boolean;
+    inlineNodeName?: InlineAttrChangeNodeName;
     isActive?: boolean;
+    isAtomicInlineNode?: boolean;
     isInserted?: boolean;
     shouldHideDeleted?: boolean;
     showIndicators?: boolean;

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

@@ -1,12 +1,22 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
+export type InlineAttrChangeNodeName = 'date' | 'emoji' | 'mention' | 'status';
 type StepRange = {
+    /**
+     * Position of the original (before) node in the original doc.
+     * Populated for inline attr changes (e.g. emoji, date) so the caller can
+     * render the old node as a "deleted" widget alongside the new highlighted node.
+     */
+    fromA?: number;
     fromB: number;
+    /** Inline node type, used by callers that need node-view-specific styling. */
+    inlineNodeName?: InlineAttrChangeNodeName;
     /** Whether the changed node is inline (true) or block (false/undefined) */
     isInline?: boolean;
+    toA?: number;
     toB: number;
 };
-export declare const getAttrChangeRanges: (doc: PMNode, steps: ProseMirrorStep[]) => StepRange[];
+export declare const getAttrChangeRanges: (doc: PMNode, steps: ProseMirrorStep[], originalDoc: PMNode) => StepRange[];
 /**
  * Check if the step was a valid attr change and affected the doc
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "10.5.1",
+	"version": "10.5.2",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-tables": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/tmp-editor-statsig": "^131.0.0",
+		"@atlaskit/tmp-editor-statsig": "^132.0.0",
 		"@atlaskit/tokens": "^16.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/dropdown-menu": "^17.1.0",
-		"@atlaskit/editor-core": "^221.11.0",
+		"@atlaskit/editor-core": "^221.12.0",
 		"@atlaskit/editor-json-transformer": "^9.0.0",
 		"@atlaskit/form": "^16.1.0",
 		"@atlaskit/primitives": "^22.1.0",