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

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @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
+
+- [`ded72f3ee293f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ded72f3ee293f) -
+  Fix table diff cell overlays to use rounded corners for delete row diffs when
+  platform_editor_table_diff_rounded_corners is enabled
+- [`11b7096b9b80c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11b7096b9b80c) -
+  CCI-17981: Fix diff indicator misalignment on page resize by observing measured DOM elements for
+  size changes
+- Updated dependencies
+
 ## 10.5.0
 
 ### Minor 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/standard.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtendedNoUnderline = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtendedNoUnderline = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtendedNoUnderline = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedDecorationMarkerVariable = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleExtendedNoUnderline = exports.editingStyleExtended = exports.editingStyleCardBlockNode = exports.editingStyleActiveExtendedNoUnderline = exports.editingStyleActiveExtended = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlockExtendedNoUnderline = exports.editingContentStyleInBlockExtended = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedInlineContentStyleExtended = exports.deletedDecorationMarkerVariable = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedCellOverlayRoundedStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 // delete on platform_editor_diff_plugin_extended cleanup
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -186,4 +186,17 @@ var deletedCellOverlayStyle = exports.deletedCellOverlayStyle = (0, _lazyNodeVie
   zIndex: 1,
   outline: "1px solid ".concat("var(--ds-border-accent-gray, #7D818A)"),
   pointerEvents: 'none'
+});
+var deletedCellOverlayRoundedStyle = exports.deletedCellOverlayRoundedStyle = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-gray-subtlest, #F0F1F2)", " r g b / 0.5)"),
+  zIndex: 2,
+  outline: "1px solid ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRoundedNew = exports.deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineNew = exports.deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutline = void 0;
+exports.deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalCellOverlayRoundedStyle = exports.deletedTraditionalBlockOutlineRoundedNew = exports.deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineNew = exports.deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutline = void 0;
 exports.getDeletedTraditionalInlineStyle = getDeletedTraditionalInlineStyle;
 exports.traditionalStyleRuleNodeNew = exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeNew = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeNew = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeNew = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDeletedDecorationMarkerVariableNew = exports.traditionalDeletedDecorationMarkerVariableActive = exports.traditionalDeletedDecorationMarkerVariable = exports.traditionalDecorationMarkerVariableNew = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyleNew = exports.traditionalAddedCellOverlayStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -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)"
@@ -214,4 +214,17 @@ var deletedTraditionalCellOverlayStyle = exports.deletedTraditionalCellOverlaySt
   zIndex: 1,
   outline: "1px solid ".concat("var(--ds-border-disabled, #0515240F)"),
   pointerEvents: 'none'
+});
+var deletedTraditionalCellOverlayRoundedStyle = exports.deletedTraditionalCellOverlayRoundedStyle = (0, _lazyNodeView.convertToInlineCss)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-gray-subtlest, #F0F1F2)", " r g b / 0.5)"),
+  zIndex: 2,
+  outline: "1px solid ".concat("var(--ds-border-disabled, #0515240F)"),
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

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

@@ -1,12 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createLeftAnchorWidget = exports.createInlineIndicatorAnchorWidgets = exports.createDocMarginAnchorWidget = exports.createBlockIndicatorAnchorWidgets = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 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; }
 /**
  * Resolves the doc-level block node (table/expand/layout) for `from`, along with
  * the position right before it (`beforePos`). Falls back to `$from.nodeAfter`
@@ -138,6 +142,7 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
     diffId: diffId,
     anchorType: _decorationKeys.AnchorTypeKey.left
   });
+  var leftResizeObserver;
   return _view.Decoration.widget(beforePos, function (view, getPos) {
     // Outer span stays in the flow but takes up no space.
     var wrapper = document.createElement('div');
@@ -152,13 +157,7 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
     anchor.style.setProperty('left', "calc(50% - ".concat((edgeCase === null || edgeCase === void 0 ? void 0 : edgeCase.leftOffset) || 0, "px)"));
     anchor.style.setProperty('transform', 'translateX(-50%)');
     wrapper.appendChild(anchor);
-
-    // The block DOM may not be settled synchronously (e.g. after a
-    // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(function () {
-      // The widget may have been unmounted; bail if its position is gone.
-      // We still measure the stable block node position, not the widget's
-      // own position.
+    var measureWidth = function measureWidth() {
       if (getPos() === undefined || edgeCase.measurePos === undefined) {
         return;
       }
@@ -167,13 +166,33 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
         // The left anchor only needs the container width so the
         // IndicatorBar can align against the block's horizontal extent.
         anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+
+        // Observe the measured element for size changes (e.g. page
+        // resize) so the indicator stays aligned. CCI-17981
+        if (!leftResizeObserver) {
+          leftResizeObserver = new ResizeObserver(function () {
+            if (getPos() !== undefined) {
+              anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+            }
+          });
+          leftResizeObserver.observe(dom);
+        }
       }
-    });
+    };
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(measureWidth);
     return wrapper;
-  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+  }, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildAnchorDecorationSpec)({
     diffId: diffId,
     anchorType: _decorationKeys.AnchorTypeKey.left,
     side: -999
+  })), {}, {
+    destroy: function destroy() {
+      var _leftResizeObserver;
+      return (_leftResizeObserver = leftResizeObserver) === null || _leftResizeObserver === void 0 ? void 0 : _leftResizeObserver.disconnect();
+    }
   }));
 };
 
@@ -234,6 +253,7 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
   // Measure the actual cell/row DOM when inside one; otherwise measure the
   // widget's own position.
   var measurePos = parentCellOrRow ? parentCellOrRow.pos : from;
+  var blockResizeObserver;
   var blockWidget = _view.Decoration.widget(widgetPos, function (view, getPos) {
     // Outer span stays in the flow but takes up no space.
     var wrapper = document.createElement('span');
@@ -245,13 +265,7 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
     anchor.style.setProperty('position', 'absolute');
     anchor.style.setProperty('anchor-name', "--".concat(blockAnchorKey));
     wrapper.appendChild(anchor);
-
-    // The block DOM may not be settled synchronously (e.g. after a
-    // transaction), so defer the measurement like the gap cursor does.
-    requestAnimationFrame(function () {
-      // The widget may have been unmounted; bail if its position is gone.
-      // We still measure the stable cell/row node position, not the
-      // widget's own position.
+    var _measureBlock = function measureBlock() {
       if (getPos() === undefined) {
         return;
       }
@@ -270,15 +284,35 @@ var createBlockIndicatorAnchorWidgets = exports.createBlockIndicatorAnchorWidget
         // The offset already accounts for the cell/row's position, so the
         // margin-top must not be double-applied.
         anchor.style.setProperty('margin-top', '0px');
+
+        // Observe the measured element for size changes (e.g. page
+        // resize) so the indicator stays aligned. CCI-17981
+        if (!blockResizeObserver) {
+          blockResizeObserver = new ResizeObserver(function () {
+            if (getPos() !== undefined) {
+              _measureBlock();
+            }
+          });
+          blockResizeObserver.observe(dom);
+        }
       }
-    });
+    };
+
+    // The block DOM may not be settled synchronously (e.g. after a
+    // transaction), so defer the measurement like the gap cursor does.
+    requestAnimationFrame(_measureBlock);
     return wrapper;
-  }, (0, _decorationKeys.buildAnchorDecorationSpec)({
+  }, _objectSpread(_objectSpread({}, (0, _decorationKeys.buildAnchorDecorationSpec)({
     diffId: diffId,
     // Reuse the `from` anchor type slot; the generated key intentionally
     // omits the anchor type so the single element backs top/bottom/left.
     anchorType: _decorationKeys.AnchorTypeKey.from,
     side: -1
+  })), {}, {
+    destroy: function destroy() {
+      var _blockResizeObserver;
+      return (_blockResizeObserver = blockResizeObserver) === null || _blockResizeObserver === void 0 ? void 0 : _blockResizeObserver.disconnect();
+    }
   }));
   return [blockWidget].concat(maybeLeftAnchor);
 };

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

@@ -8,6 +8,7 @@ exports.createBlockChangedDecoration = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
@@ -155,7 +156,11 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
   var style;
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && ['tableCell', 'tableHeader'].includes(change.name)) {
     var cellOverlay = document.createElement('div');
-    var cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? _traditional.traditionalAddedCellOverlayStyle : _standard.addedCellOverlayStyle : colorScheme === 'traditional' ? _traditional.deletedTraditionalCellOverlayStyle : _standard.deletedCellOverlayStyle;
+    var isTraditional = colorScheme === 'traditional';
+    var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
+    var addedCellStyle = isTraditional ? _traditional.traditionalAddedCellOverlayStyle : _standard.addedCellOverlayStyle;
+    var deletedCellStyle = isTraditional ? isRoundedTable ? _traditional.deletedTraditionalCellOverlayRoundedStyle : _traditional.deletedTraditionalCellOverlayStyle : isRoundedTable ? _standard.deletedCellOverlayRoundedStyle : _standard.deletedCellOverlayStyle;
+    var cellOverlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     cellOverlay.setAttribute('style', cellOverlayStyle);
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell

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/standard.js

@@ -180,4 +180,17 @@ export const deletedCellOverlayStyle = convertToInlineCss({
   zIndex: 1,
   outline: `1px solid ${"var(--ds-border-accent-gray, #7D818A)"}`,
   pointerEvents: 'none'
+});
+export const deletedCellOverlayRoundedStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: `rgba(from ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"} r g b / 0.5)`,
+  zIndex: 2,
+  outline: `1px solid ${"var(--ds-border-accent-gray, #7D818A)"}`,
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });

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)"
@@ -206,4 +206,17 @@ export const deletedTraditionalCellOverlayStyle = convertToInlineCss({
   zIndex: 1,
   outline: `1px solid ${"var(--ds-border-disabled, #0515240F)"}`,
   pointerEvents: 'none'
+});
+export const deletedTraditionalCellOverlayRoundedStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: `rgba(from ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"} r g b / 0.5)`,
+  zIndex: 2,
+  outline: `1px solid ${"var(--ds-border-disabled, #0515240F)"}`,
+  pointerEvents: 'none',
+  border: 'inherit',
+  borderRadius: 'inherit'
 });