@atlaskit/editor-plugin-show-diff 25.0.4 → 25.0.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 25.0.6
+
+### Patch Changes
+
+- [`8843fc489d5a6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8843fc489d5a6) -
+  EDITOR-9591 Behind platform_editor_ai_show_diff_patch_2, highlight inserted inline nodes as a
+  whole instead of the text inside them, and only outline an inserted atomic inline node (date,
+  emoji, mention, status) when its attributes are the only change
+  (platform_editor_show_diff_deleted_nodeview_content)
+- Updated dependencies
+
+## 25.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 25.0.4
 
 ### Patch Changes

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

@@ -112,7 +112,8 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
         if (childNode) {
           // Give inserted atomic children the same box-shadow
           // highlight an in-place attribute change already gets (`getAtomicInlineChangedAttrs`).
-          if (isInserted && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_deleted_nodeview_content') && (0, _getAttrChangeRanges.isInlineAttrChangeNodeName)(child.type.name) && childNode instanceof HTMLElement) {
+          // Disabled under patch_2: the outline also landed on atomic children inserted alongside text.
+          if (isInserted && !(0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_deleted_nodeview_content') && (0, _getAttrChangeRanges.isInlineAttrChangeNodeName)(child.type.name) && childNode instanceof HTMLElement) {
             var _getAtomicInlineChang = (0, _createInlineChangedDecoration.getAtomicInlineChangedAttrs)(child.type.name, colorScheme),
               className = _getAtomicInlineChang.className,
               styleSuffix = _getAtomicInlineChang.styleSuffix;

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

@@ -1164,11 +1164,16 @@ function buildDeletedWrappedBlockOutline(colors, _ref) {
  * decoration span and read by the `.show-diff-atomic-inline-changed-*` selectors in
  * EditorContentContainer, on the decorated element or a descendant, so it must inherit. Being
  * inline it beats the stylesheet's fallback, making the plugin the only source of the colour.
+ *
+ * Under patch_2 it also reserves the 2px ring either side, since the ring takes up no space and
+ * otherwise paints over an adjacent inline diff.
  */
 function buildAtomicInlineChangedCSSVariables(colors) {
-  return (0, _cssHelper.convertToInlineCss)({
+  return (0, _cssHelper.convertToInlineCss)(_objectSpread({
     '--show-diff-atomic-inline-changed-border-color': borderAccent(colors.insertColor)
-  });
+  }, (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && {
+    marginInline: "var(--ds-space-025, 2px)"
+  }));
 }
 
 /** Hands editor-core the same strike line the widget path uses, via a custom property. */

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

@@ -7,19 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.createNodeChangedDecorationWidget = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _baseNodeName = require("../utils/baseNodeName");
 var _emptyTextBlocks = require("../utils/emptyTextBlocks");
 var _isEmptyParagraphSlice = require("../utils/isEmptyParagraphSlice");
+var _factory = require("./colorSchemes/factory");
+var _schemes = require("./colorSchemes/schemes");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
 var _createContributorTagWidget = require("./createContributorTagWidget");
+var _createInlineChangedDecoration = require("./createInlineChangedDecoration");
 var _decorationKeys = require("./decorationKeys");
 var _absorbFirstChildMarginReset = require("./utils/absorbFirstChildMarginReset");
 var _createDeletedLineBreakWidget = require("./utils/createDeletedLineBreakWidget");
 var _createMarginAbsorber = require("./utils/createMarginAbsorber");
 var _createNodeShapedMarginSpacer = require("./utils/createNodeShapedMarginSpacer");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
+var _getAttrChangeRanges = require("./utils/getAttrChangeRanges");
 var _safeResolve = require("./utils/safeResolve");
 var _tableDiffMode = require("./utils/tableDiffMode");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
@@ -120,6 +125,32 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
   return decorations;
 };
 
+/**
+ * The node name when `change` only swapped one atomic inline node (date, emoji, mention, status)
+ * for another of the same type, i.e. an attribute change rather than content added or removed
+ * around it.
+ */
+var getAtomicInlineAttrOnlyNodeName = function getAtomicInlineAttrOnlyNodeName(change, doc, newDoc) {
+  var nodeA = doc.nodeAt(change.fromA);
+  var nodeB = newDoc.nodeAt(change.fromB);
+  if (!nodeA || !nodeB || nodeA.type !== nodeB.type || nodeA.nodeSize !== change.toA - change.fromA || nodeB.nodeSize !== change.toB - change.fromB) {
+    return undefined;
+  }
+  var nodeName = nodeA.type.name;
+  return (0, _getAttrChangeRanges.isInlineAttrChangeNodeName)(nodeName) ? nodeName : undefined;
+};
+
+/** Wraps an inserted atomic inline node view in the outline an in-place attribute change gets. */
+var createAtomicInlineOutline = function createAtomicInlineOutline(nodeName, nodeView, colorScheme) {
+  var outlineWrapper = document.createElement('span');
+  outlineWrapper.className = (0, _createInlineChangedDecoration.getAtomicInlineChangedAttrs)(nodeName, colorScheme).className;
+  // Set in both cohorts of `platform_editor_show_diff_color_scheme_refactor`: being inline it beats
+  // the stylesheet's purple/green table, so editor-core's rings follow the change's scheme too.
+  outlineWrapper.setAttribute('style', (0, _factory.buildAtomicInlineChangedCSSVariables)(_schemes.colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard']));
+  outlineWrapper.append(nodeView);
+  return outlineWrapper;
+};
+
 /**
  * This function is used to create a decoration widget to show content
  * that is not in the current document.
@@ -391,9 +422,17 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
         nodeView.style.setProperty('anchor-name', "--".concat(contributorTagAnchorName));
       }
       if (node.isInline) {
-        var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, reveal);
-        wrapper.append(nodeView);
-        dom.append(wrapper);
+        var attrOnlyNodeName = isInserted && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_deleted_nodeview_content') ? getAtomicInlineAttrOnlyNodeName(change, doc, newDoc) : undefined;
+        if (attrOnlyNodeName) {
+          // Only the node's attributes changed, so outline it as an in-place attribute change
+          // does, in place of the highlight. Its own wrapper keeps the outline clear of the node
+          // view's styles.
+          dom.append(createAtomicInlineOutline(attrOnlyNodeName, nodeView, colorScheme));
+        } else {
+          var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, reveal);
+          wrapper.append(nodeView);
+          dom.append(wrapper);
+        }
       } else {
         // Handle all block nodes with unified function
         (0, _wrapBlockNodeView.wrapBlockNodeView)({

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

@@ -294,7 +294,28 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref8)
     element.setAttribute('style', "".concat(currentStyle).concat(nodeSpecificStyle));
   }
   var contentStyle = (0, _wrapBlockNodeViewStyles.getChangedContentStyle)(colorScheme, isActive, isInserted, hideAddedDiffsUnderline);
-  var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+
+  // Under patch_2, an inserted inline node view (a date, a status lozenge) is highlighted as a whole
+  // rather than the text inside it, so the highlight sits behind the node. Rejecting it skips its
+  // subtree, so this stays a single walk.
+  var highlightInlineNodesWhole = isInserted && (0, _fg.fg)('platform_editor_ai_show_diff_patch_2');
+  // `applyInlineLeafNodeStyles` styles the block's direct inline children itself.
+  var handlesDirectInlineChildren = highlightInlineLeafNodes && targetNode.type.inlineContent;
+  var inlineNodesToWrap = [];
+  var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
+    acceptNode: function acceptNode(node) {
+      if (node instanceof Text) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+      if (highlightInlineNodesWhole && node instanceof HTMLElement && node.dataset.prosemirrorNodeInline === 'true') {
+        if (!(handlesDirectInlineChildren && node.parentElement === element)) {
+          inlineNodesToWrap.push(node);
+        }
+        return NodeFilter.FILTER_REJECT;
+      }
+      return NodeFilter.FILTER_SKIP;
+    }
+  });
   var textNodesToWrap = [];
   var currentNode = walker.nextNode();
   while (currentNode) {
@@ -303,13 +324,13 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref8)
     }
     currentNode = walker.nextNode();
   }
-  textNodesToWrap.forEach(function (textNode) {
+  [].concat(textNodesToWrap, inlineNodesToWrap).forEach(function (node) {
     var contentWrapper = document.createElement('span');
     contentWrapper.setAttribute('style', contentStyle);
-    textNode.replaceWith(contentWrapper);
-    contentWrapper.append(textNode);
+    node.replaceWith(contentWrapper);
+    contentWrapper.append(node);
   });
-  if (highlightInlineLeafNodes && targetNode.type.inlineContent) {
+  if (handlesDirectInlineChildren) {
     applyInlineLeafNodeStyles({
       element: element,
       targetNode: targetNode,

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

@@ -95,7 +95,8 @@ export class NodeViewSerializer {
       if (childNode) {
         // Give inserted atomic children the same box-shadow
         // highlight an in-place attribute change already gets (`getAtomicInlineChangedAttrs`).
-        if (isInserted && isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && isInlineAttrChangeNodeName(child.type.name) && childNode instanceof HTMLElement) {
+        // Disabled under patch_2: the outline also landed on atomic children inserted alongside text.
+        if (isInserted && !fg('platform_editor_ai_show_diff_patch_2') && isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && isInlineAttrChangeNodeName(child.type.name) && childNode instanceof HTMLElement) {
           const {
             className,
             styleSuffix

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

@@ -1085,10 +1085,16 @@ export function buildDeletedWrappedBlockOutline(colors, {
  * decoration span and read by the `.show-diff-atomic-inline-changed-*` selectors in
  * EditorContentContainer, on the decorated element or a descendant, so it must inherit. Being
  * inline it beats the stylesheet's fallback, making the plugin the only source of the colour.
+ *
+ * Under patch_2 it also reserves the 2px ring either side, since the ring takes up no space and
+ * otherwise paints over an adjacent inline diff.
  */
 export function buildAtomicInlineChangedCSSVariables(colors) {
   return convertToInlineCss({
-    '--show-diff-atomic-inline-changed-border-color': borderAccent(colors.insertColor)
+    '--show-diff-atomic-inline-changed-border-color': borderAccent(colors.insertColor),
+    ...(fg('platform_editor_ai_show_diff_patch_2') && {
+      marginInline: "var(--ds-space-025, 2px)"
+    })
   });
 }
 

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

@@ -1,17 +1,22 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { resolveBaseNodeName } from '../utils/baseNodeName';
 import { countEmptyTextBlockOnlySlice } from '../utils/emptyTextBlocks';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
+import { buildAtomicInlineChangedCSSVariables } from './colorSchemes/factory';
+import { colorSchemeRegistry } from './colorSchemes/schemes';
 import { clampAnchorPosIntoCell, createAnchorNameSpan, createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, resolveHoistedCodeBlockAnchor, unmountContributorTag } from './createContributorTagWidget';
+import { getAtomicInlineChangedAttrs } from './createInlineChangedDecoration';
 import { AnchorTypeKey, buildContributorTagDecorationSpec, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
 import { createDeletedLineBreakDecoration } from './utils/createDeletedLineBreakWidget';
 import { createMarginAbsorber } from './utils/createMarginAbsorber';
 import { createNodeShapedMarginSpacer } from './utils/createNodeShapedMarginSpacer';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
+import { isInlineAttrChangeNodeName } from './utils/getAttrChangeRanges';
 import { safeResolve } from './utils/safeResolve';
 import { getTableDiffMode } from './utils/tableDiffMode';
 import { wrapBlockNodeView, createRemovedLozenge, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
@@ -112,6 +117,32 @@ const createTableCellContentWidgets = ({
   return decorations;
 };
 
+/**
+ * The node name when `change` only swapped one atomic inline node (date, emoji, mention, status)
+ * for another of the same type, i.e. an attribute change rather than content added or removed
+ * around it.
+ */
+const getAtomicInlineAttrOnlyNodeName = (change, doc, newDoc) => {
+  const nodeA = doc.nodeAt(change.fromA);
+  const nodeB = newDoc.nodeAt(change.fromB);
+  if (!nodeA || !nodeB || nodeA.type !== nodeB.type || nodeA.nodeSize !== change.toA - change.fromA || nodeB.nodeSize !== change.toB - change.fromB) {
+    return undefined;
+  }
+  const nodeName = nodeA.type.name;
+  return isInlineAttrChangeNodeName(nodeName) ? nodeName : undefined;
+};
+
+/** Wraps an inserted atomic inline node view in the outline an in-place attribute change gets. */
+const createAtomicInlineOutline = (nodeName, nodeView, colorScheme) => {
+  const outlineWrapper = document.createElement('span');
+  outlineWrapper.className = getAtomicInlineChangedAttrs(nodeName, colorScheme).className;
+  // Set in both cohorts of `platform_editor_show_diff_color_scheme_refactor`: being inline it beats
+  // the stylesheet's purple/green table, so editor-core's rings follow the change's scheme too.
+  outlineWrapper.setAttribute('style', buildAtomicInlineChangedCSSVariables(colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard']));
+  outlineWrapper.append(nodeView);
+  return outlineWrapper;
+};
+
 /**
  * This function is used to create a decoration widget to show content
  * that is not in the current document.
@@ -377,9 +408,17 @@ export const createNodeChangedDecorationWidget = ({
         nodeView.style.setProperty('anchor-name', `--${contributorTagAnchorName}`);
       }
       if (node.isInline) {
-        const wrapper = createContentWrapper(colorScheme, isActive, isInserted, reveal);
-        wrapper.append(nodeView);
-        dom.append(wrapper);
+        const attrOnlyNodeName = isInserted && fg('platform_editor_ai_show_diff_patch_2') && isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') ? getAtomicInlineAttrOnlyNodeName(change, doc, newDoc) : undefined;
+        if (attrOnlyNodeName) {
+          // Only the node's attributes changed, so outline it as an in-place attribute change
+          // does, in place of the highlight. Its own wrapper keeps the outline clear of the node
+          // view's styles.
+          dom.append(createAtomicInlineOutline(attrOnlyNodeName, nodeView, colorScheme));
+        } else {
+          const wrapper = createContentWrapper(colorScheme, isActive, isInserted, reveal);
+          wrapper.append(nodeView);
+          dom.append(wrapper);
+        }
       } else {
         // Handle all block nodes with unified function
         wrapBlockNodeView({

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

@@ -284,7 +284,28 @@ const applyTextLikeBlockNodeStyles = ({
     element.setAttribute('style', `${currentStyle}${nodeSpecificStyle}`);
   }
   const contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, hideAddedDiffsUnderline);
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+
+  // Under patch_2, an inserted inline node view (a date, a status lozenge) is highlighted as a whole
+  // rather than the text inside it, so the highlight sits behind the node. Rejecting it skips its
+  // subtree, so this stays a single walk.
+  const highlightInlineNodesWhole = isInserted && fg('platform_editor_ai_show_diff_patch_2');
+  // `applyInlineLeafNodeStyles` styles the block's direct inline children itself.
+  const handlesDirectInlineChildren = highlightInlineLeafNodes && targetNode.type.inlineContent;
+  const inlineNodesToWrap = [];
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
+    acceptNode: node => {
+      if (node instanceof Text) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+      if (highlightInlineNodesWhole && node instanceof HTMLElement && node.dataset.prosemirrorNodeInline === 'true') {
+        if (!(handlesDirectInlineChildren && node.parentElement === element)) {
+          inlineNodesToWrap.push(node);
+        }
+        return NodeFilter.FILTER_REJECT;
+      }
+      return NodeFilter.FILTER_SKIP;
+    }
+  });
   const textNodesToWrap = [];
   let currentNode = walker.nextNode();
   while (currentNode) {
@@ -293,13 +314,13 @@ const applyTextLikeBlockNodeStyles = ({
     }
     currentNode = walker.nextNode();
   }
-  textNodesToWrap.forEach(textNode => {
+  [...textNodesToWrap, ...inlineNodesToWrap].forEach(node => {
     const contentWrapper = document.createElement('span');
     contentWrapper.setAttribute('style', contentStyle);
-    textNode.replaceWith(contentWrapper);
-    contentWrapper.append(textNode);
+    node.replaceWith(contentWrapper);
+    contentWrapper.append(node);
   });
-  if (highlightInlineLeafNodes && targetNode.type.inlineContent) {
+  if (handlesDirectInlineChildren) {
     applyInlineLeafNodeStyles({
       element,
       targetNode,

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

@@ -105,7 +105,8 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
         if (childNode) {
           // Give inserted atomic children the same box-shadow
           // highlight an in-place attribute change already gets (`getAtomicInlineChangedAttrs`).
-          if (isInserted && isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && isInlineAttrChangeNodeName(child.type.name) && childNode instanceof HTMLElement) {
+          // Disabled under patch_2: the outline also landed on atomic children inserted alongside text.
+          if (isInserted && !fg('platform_editor_ai_show_diff_patch_2') && isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && isInlineAttrChangeNodeName(child.type.name) && childNode instanceof HTMLElement) {
             var _getAtomicInlineChang = getAtomicInlineChangedAttrs(child.type.name, colorScheme),
               className = _getAtomicInlineChang.className,
               styleSuffix = _getAtomicInlineChang.styleSuffix;

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

@@ -1088,11 +1088,16 @@ export function buildDeletedWrappedBlockOutline(colors, _ref) {
  * decoration span and read by the `.show-diff-atomic-inline-changed-*` selectors in
  * EditorContentContainer, on the decorated element or a descendant, so it must inherit. Being
  * inline it beats the stylesheet's fallback, making the plugin the only source of the colour.
+ *
+ * Under patch_2 it also reserves the 2px ring either side, since the ring takes up no space and
+ * otherwise paints over an adjacent inline diff.
  */
 export function buildAtomicInlineChangedCSSVariables(colors) {
-  return convertToInlineCss({
+  return convertToInlineCss(_objectSpread({
     '--show-diff-atomic-inline-changed-border-color': borderAccent(colors.insertColor)
-  });
+  }, fg('platform_editor_ai_show_diff_patch_2') && {
+    marginInline: "var(--ds-space-025, 2px)"
+  }));
 }
 
 /** Hands editor-core the same strike line the widget path uses, via a custom property. */

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

@@ -2,19 +2,24 @@ 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 { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { resolveBaseNodeName } from '../utils/baseNodeName';
 import { countEmptyTextBlockOnlySlice } from '../utils/emptyTextBlocks';
 import { isEmptyParagraphSlice } from '../utils/isEmptyParagraphSlice';
+import { buildAtomicInlineChangedCSSVariables } from './colorSchemes/factory';
+import { colorSchemeRegistry } from './colorSchemes/schemes';
 import { clampAnchorPosIntoCell, createAnchorNameSpan, createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { createContributorTagHost, resolveHoistedCodeBlockAnchor, unmountContributorTag } from './createContributorTagWidget';
+import { getAtomicInlineChangedAttrs } from './createInlineChangedDecoration';
 import { AnchorTypeKey, buildContributorTagDecorationSpec, buildDiffDecorationSpec, buildAnchorDecorationKey, scrollMarginTopValue } from './decorationKeys';
 import { absorbFirstChildMarginReset } from './utils/absorbFirstChildMarginReset';
 import { createDeletedLineBreakDecoration } from './utils/createDeletedLineBreakWidget';
 import { createMarginAbsorber } from './utils/createMarginAbsorber';
 import { createNodeShapedMarginSpacer } from './utils/createNodeShapedMarginSpacer';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
+import { isInlineAttrChangeNodeName } from './utils/getAttrChangeRanges';
 import { safeResolve } from './utils/safeResolve';
 import { getTableDiffMode } from './utils/tableDiffMode';
 import { wrapBlockNodeView, createRemovedLozenge, injectInnerWrapper, createContentWrapper } from './utils/wrapBlockNodeView';
@@ -114,6 +119,32 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
   return decorations;
 };
 
+/**
+ * The node name when `change` only swapped one atomic inline node (date, emoji, mention, status)
+ * for another of the same type, i.e. an attribute change rather than content added or removed
+ * around it.
+ */
+var getAtomicInlineAttrOnlyNodeName = function getAtomicInlineAttrOnlyNodeName(change, doc, newDoc) {
+  var nodeA = doc.nodeAt(change.fromA);
+  var nodeB = newDoc.nodeAt(change.fromB);
+  if (!nodeA || !nodeB || nodeA.type !== nodeB.type || nodeA.nodeSize !== change.toA - change.fromA || nodeB.nodeSize !== change.toB - change.fromB) {
+    return undefined;
+  }
+  var nodeName = nodeA.type.name;
+  return isInlineAttrChangeNodeName(nodeName) ? nodeName : undefined;
+};
+
+/** Wraps an inserted atomic inline node view in the outline an in-place attribute change gets. */
+var createAtomicInlineOutline = function createAtomicInlineOutline(nodeName, nodeView, colorScheme) {
+  var outlineWrapper = document.createElement('span');
+  outlineWrapper.className = getAtomicInlineChangedAttrs(nodeName, colorScheme).className;
+  // Set in both cohorts of `platform_editor_show_diff_color_scheme_refactor`: being inline it beats
+  // the stylesheet's purple/green table, so editor-core's rings follow the change's scheme too.
+  outlineWrapper.setAttribute('style', buildAtomicInlineChangedCSSVariables(colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard']));
+  outlineWrapper.append(nodeView);
+  return outlineWrapper;
+};
+
 /**
  * This function is used to create a decoration widget to show content
  * that is not in the current document.
@@ -385,9 +416,17 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
         nodeView.style.setProperty('anchor-name', "--".concat(contributorTagAnchorName));
       }
       if (node.isInline) {
-        var wrapper = createContentWrapper(colorScheme, isActive, isInserted, reveal);
-        wrapper.append(nodeView);
-        dom.append(wrapper);
+        var attrOnlyNodeName = isInserted && fg('platform_editor_ai_show_diff_patch_2') && isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') ? getAtomicInlineAttrOnlyNodeName(change, doc, newDoc) : undefined;
+        if (attrOnlyNodeName) {
+          // Only the node's attributes changed, so outline it as an in-place attribute change
+          // does, in place of the highlight. Its own wrapper keeps the outline clear of the node
+          // view's styles.
+          dom.append(createAtomicInlineOutline(attrOnlyNodeName, nodeView, colorScheme));
+        } else {
+          var wrapper = createContentWrapper(colorScheme, isActive, isInserted, reveal);
+          wrapper.append(nodeView);
+          dom.append(wrapper);
+        }
       } else {
         // Handle all block nodes with unified function
         wrapBlockNodeView({

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

@@ -287,7 +287,28 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref8)
     element.setAttribute('style', "".concat(currentStyle).concat(nodeSpecificStyle));
   }
   var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, hideAddedDiffsUnderline);
-  var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+
+  // Under patch_2, an inserted inline node view (a date, a status lozenge) is highlighted as a whole
+  // rather than the text inside it, so the highlight sits behind the node. Rejecting it skips its
+  // subtree, so this stays a single walk.
+  var highlightInlineNodesWhole = isInserted && fg('platform_editor_ai_show_diff_patch_2');
+  // `applyInlineLeafNodeStyles` styles the block's direct inline children itself.
+  var handlesDirectInlineChildren = highlightInlineLeafNodes && targetNode.type.inlineContent;
+  var inlineNodesToWrap = [];
+  var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, {
+    acceptNode: function acceptNode(node) {
+      if (node instanceof Text) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+      if (highlightInlineNodesWhole && node instanceof HTMLElement && node.dataset.prosemirrorNodeInline === 'true') {
+        if (!(handlesDirectInlineChildren && node.parentElement === element)) {
+          inlineNodesToWrap.push(node);
+        }
+        return NodeFilter.FILTER_REJECT;
+      }
+      return NodeFilter.FILTER_SKIP;
+    }
+  });
   var textNodesToWrap = [];
   var currentNode = walker.nextNode();
   while (currentNode) {
@@ -296,13 +317,13 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref8)
     }
     currentNode = walker.nextNode();
   }
-  textNodesToWrap.forEach(function (textNode) {
+  [].concat(textNodesToWrap, inlineNodesToWrap).forEach(function (node) {
     var contentWrapper = document.createElement('span');
     contentWrapper.setAttribute('style', contentStyle);
-    textNode.replaceWith(contentWrapper);
-    contentWrapper.append(textNode);
+    node.replaceWith(contentWrapper);
+    contentWrapper.append(node);
   });
-  if (highlightInlineLeafNodes && targetNode.type.inlineContent) {
+  if (handlesDirectInlineChildren) {
     applyInlineLeafNodeStyles({
       element: element,
       targetNode: targetNode,

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

@@ -227,6 +227,9 @@ export declare function buildDeletedWrappedBlockOutline(colors: DiffColorScheme,
  * decoration span and read by the `.show-diff-atomic-inline-changed-*` selectors in
  * EditorContentContainer, on the decorated element or a descendant, so it must inherit. Being
  * inline it beats the stylesheet's fallback, making the plugin the only source of the colour.
+ *
+ * Under patch_2 it also reserves the 2px ring either side, since the ring takes up no space and
+ * otherwise paints over an adjacent inline diff.
  */
 export declare function buildAtomicInlineChangedCSSVariables(colors: DiffColorScheme): string;
 /** Hands editor-core the same strike line the widget path uses, via a custom property. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "25.0.4",
+	"version": "25.0.6",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,8 +39,8 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^239.0.0",
-		"@atlaskit/tokens": "^20.5.0",
+		"@atlaskit/tmp-editor-statsig": "^240.0.0",
+		"@atlaskit/tokens": "^20.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -64,7 +64,7 @@
 		"@atlassian/confluence-presets": "workspace:^",
 		"@atlassian/content-reconciliation": "^0.1.3506",
 		"@atlassian/editor-ai-injected-editors": "^41.0.0",
-		"@atlassian/editor-plugin-ai": "^81.0.0",
+		"@atlassian/editor-plugin-ai": "^81.2.0",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",