@atlaskit/editor-plugin-show-diff 21.0.1 → 21.0.3

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 21.0.3
+
+### Patch Changes
+
+- [`bb99ff596a192`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb99ff596a192) -
+  Fix show-diff rendering a bordered box around fully-replaced paragraphs, a
+  platform_editor_ai_show_diff_patch_2 regression caused by paragraph falling through to the generic
+  block-container border treatment intended for real block containers (panels, blockquotes). Gated
+  behind platform_editor_ai_show_diff_patch_2, the same gate that caused the regression.
+
+  Also give an inserted atomic inline leaf (date/emoji/mention/status) the same box-shadow highlight
+  an in-place attribute change already gets, when it renders through `NodeViewSerializer`'s
+  blocklisted-container recursion under platform_editor_show_diff_deleted_nodeview_content — that
+  recursion gives the node its real node view instead of a lossy `toDOM()`, but previously carried
+  no diff styling of its own.
+
+- Updated dependencies
+
+## 21.0.2
+
+### Patch Changes
+
+- [`1647c1098fca5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1647c1098fca5) -
+  Highlight changed inline nodes and the edited portion of link display text
+
 ## 21.0.1
 
 ### Patch Changes

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

@@ -14,6 +14,8 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _createEditorProxy = require("./createEditorProxy");
+var _createInlineChangedDecoration = require("./decorations/createInlineChangedDecoration");
+var _getAttrChangeRanges = require("./decorations/utils/getAttrChangeRanges");
 var _markViews = require("./markViews");
 /**
  * Utilities for working with ProseMirror node views and DOM serialization within the
@@ -45,6 +47,14 @@ function isEditorViewWithNodeViews(view) {
 /** Expand-family nodes whose expanded state lives in a node-keyed WeakMap. */
 var EXPAND_TYPES = new Set(['expand', 'nestedExpand']);
 
+/** Merges an inline style string onto an element's existing `style` attribute. */
+var appendInlineStyle = function appendInlineStyle(element, style) {
+  var _element$getAttribute;
+  var currentStyle = (_element$getAttribute = element.getAttribute('style')) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : '';
+  var separator = currentStyle && style && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';
+  element.setAttribute('style', "".concat(currentStyle).concat(separator).concat(style));
+};
+
 /** Tables are the only node views that read and write positions, so only they need a preview. */
 var containsTable = function containsTable(node) {
   var table = node.type.schema.nodes.table;
@@ -99,13 +109,28 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
       var _this = this;
       var basePos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
       var editorProxy = arguments.length > 3 ? arguments[3] : undefined;
+      var isInserted = arguments.length > 4 ? arguments[4] : undefined;
+      var colorScheme = arguments.length > 5 ? arguments[5] : undefined;
       // A node's first child sits one position inside it, and each subsequent
       // child is offset by the previous child's `nodeSize`. Tracking this lets nested node
       // views resolve to their real depth instead of every one of them seeing depth 0.
       var childPos = basePos + 1;
       children.forEach(function (child) {
-        var childNode = _this.tryCreateNodeViewInner(child, childPos, editorProxy) || _this.serializeNode(child);
+        var childNode = _this.tryCreateNodeViewInner(child, childPos, editorProxy, isInserted, colorScheme) || _this.serializeNode(child);
         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) {
+            var _childNode$getAttribu;
+            var _getAtomicInlineChang = (0, _createInlineChangedDecoration.getAtomicInlineChangedAttrs)(child.type.name, colorScheme),
+              className = _getAtomicInlineChang.className,
+              styleSuffix = _getAtomicInlineChang.styleSuffix;
+            var existingClassName = (_childNode$getAttribu = childNode.getAttribute('class')) !== null && _childNode$getAttribu !== void 0 ? _childNode$getAttribu : '';
+            childNode.setAttribute('class', existingClassName ? "".concat(existingClassName, " ").concat(className) : className);
+            if (styleSuffix) {
+              appendInlineStyle(childNode, styleSuffix);
+            }
+          }
           contentDOM === null || contentDOM === void 0 || contentDOM.append(childNode);
         }
         childPos += child.nodeSize;
@@ -126,13 +151,15 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
       var _preview$rootPos;
       var basePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var $sourcePos = arguments.length > 2 ? arguments[2] : undefined;
+      var isInserted = arguments.length > 3 ? arguments[3] : undefined;
+      var colorScheme = arguments.length > 4 ? arguments[4] : undefined;
       if (!this.editorView) {
         return null;
       }
       // The preview becomes the document every nested node view resolves its position against,
       // so positions stay internally consistent.
       var preview = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && containsTable(targetNode) ? (0, _createEditorProxy.createEditorProxy)(this.editorView, targetNode, $sourcePos) : null;
-      return this.tryCreateNodeViewInner(targetNode, (_preview$rootPos = preview === null || preview === void 0 ? void 0 : preview.rootPos) !== null && _preview$rootPos !== void 0 ? _preview$rootPos : basePos, preview === null || preview === void 0 ? void 0 : preview.editorProxy);
+      return this.tryCreateNodeViewInner(targetNode, (_preview$rootPos = preview === null || preview === void 0 ? void 0 : preview.rootPos) !== null && _preview$rootPos !== void 0 ? _preview$rootPos : basePos, preview === null || preview === void 0 ? void 0 : preview.editorProxy, isInserted, colorScheme);
     }
   }, {
     key: "tryCreateNodeViewInner",
@@ -140,6 +167,8 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
       var _this$nodeViews;
       var basePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var editorProxy = arguments.length > 2 ? arguments[2] : undefined;
+      var isInserted = arguments.length > 3 ? arguments[3] : undefined;
+      var colorScheme = arguments.length > 4 ? arguments[4] : undefined;
       if (!this.editorView) {
         return null;
       }
@@ -185,7 +214,7 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
             if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_deleted_nodeview_content') && targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
               return this.serializeFragment(targetNode.content);
             }
-            this.appendChildNodes(targetNode.children, _contentDOM, basePos, editorProxy);
+            this.appendChildNodes(targetNode.children, _contentDOM, basePos, editorProxy, isInserted, colorScheme);
           }
           return this.withMarkViews(targetNode, _dom, editorProxy);
         }
@@ -209,7 +238,7 @@ var NodeViewSerializer = exports.NodeViewSerializer = /*#__PURE__*/function () {
           dom = _constructor.dom,
           contentDOM = _constructor.contentDOM;
         // Iteratively populate children
-        this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy);
+        this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy, isInserted, colorScheme);
         return this.withMarkViews(targetNode, dom, editorProxy);
       } catch (_unused) {
         return null;

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

@@ -464,11 +464,14 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       };
     }
   }
-  // The attribute-aware encoder is only needed by the smart classifier and is gated with it.
-  var _selectTokenEncoder = (0, _selectTokenEncoder2.selectTokenEncoder)(diffType === 'smart' && (0, _fg.fg)('platform_editor_ai_smart_diff')),
+  // The attribute-aware encoder is needed by the smart classifier and is gated with it.
+  // The NCS version-history path also uses it so the main diff calculation detects attribute-only
+  // node replacements, e.g. changing an emoji or mention without changing the node type.
+  var _selectTokenEncoder = (0, _selectTokenEncoder2.selectTokenEncoder)(diffType === 'smart' && (0, _fg.fg)('platform_editor_ai_smart_diff') || (0, _fg.fg)('confluence_ncs_step_diffing_version_history')),
     tokenEncoder = _selectTokenEncoder.tokenEncoder,
     shouldHideMarkOnlyDeletions = _selectTokenEncoder.shouldHideMarkOnlyDeletions;
   var changes;
+  var contentChanges;
   var attributedChanges = [];
   var attributionColors;
   if (attributedChangesetEnabled) {
@@ -482,6 +485,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         stepIndex: stepIndex
       });
     }));
+    contentChanges = changeset.changes;
     attributedChanges = diffType === 'step' ? (0, _diffBySteps.diffBySteps)(originalDoc, simplifiedSteps, simplifiedStepAttributions) : (0, _toConsumableArray2.default)(changeset.changes);
     // The attributed pipeline gives no guarantee that its output ranges are disjoint — see
     // `collapseOverlappingChanges`.
@@ -501,6 +505,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
     }
   } else {
     var _changeset = _prosemirrorChangeset.ChangeSet.create(originalDoc, undefined, tokenEncoder).addSteps(steppedDoc, stepMaps, tr.doc);
+    contentChanges = _changeset.changes;
     changes = getChanges({
       changeset: _changeset,
       originalDoc: originalDoc,
@@ -760,20 +765,52 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   changes.forEach(function (change) {
     createDecorationsForChange(change);
   });
-  // The attribute-aware token encoder already reports mark-only changes as regular changes in the
-  // smart path. Only add the legacy step-range decoration when no equivalent changeset range was
-  // produced; otherwise the same content receives two inline decorations (and two navigation
-  // changes), usually one attribution colour and one default purple decoration.
-  (0, _getMarkChangeRanges.getMarkChangeRanges)(simplifiedSteps, simplifiedStepAttributions, (0, _fg.fg)('confluence_ncs_step_diffing_version_history') ? stepMaps : undefined).filter(function (_ref10) {
+  // Compare the content outside replacement ranges at matching positions in both documents.
+  // This preserves real formatting edits without highlighting an unchanged link mark reapplied
+  // while editing its display text.
+  var hasUnhighlightedMarkChanges = function hasUnhighlightedMarkChanges(_ref10) {
     var fromB = _ref10.fromB,
       toB = _ref10.toB;
-    return !isHandledByTable(fromB, toB);
-  }).filter(function (_ref11) {
+    var from = fromB;
+    var offset = 0;
+    var differs = function differs(to) {
+      return from < to && !originalDoc.slice(from + offset, to + offset).content.eq(tr.doc.slice(from, to).content);
+    };
+    var _iterator5 = _createForOfIteratorHelper(contentChanges),
+      _step5;
+    try {
+      for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+        var change = _step5.value;
+        if (change.fromB >= toB) {
+          break;
+        }
+        if (change.toB > from) {
+          if (differs(change.fromB)) {
+            return true;
+          }
+          from = change.toB;
+        }
+        offset = change.toA - change.toB;
+      }
+    } catch (err) {
+      _iterator5.e(err);
+    } finally {
+      _iterator5.f();
+    }
+    return differs(toB);
+  };
+
+  // The attribute-aware token encoder already reports mark-only changes as regular changes in the
+  // smart path and the NCS version-history path. For NCS version history, only skip the step-range
+  // highlight if the main diff covers it or the remaining content has unchanged formatting.
+  (0, _getMarkChangeRanges.getMarkChangeRanges)(simplifiedSteps, simplifiedStepAttributions, (0, _fg.fg)('confluence_ncs_step_diffing_version_history') ? stepMaps : undefined).filter(function (_ref11) {
     var fromB = _ref11.fromB,
       toB = _ref11.toB;
+    return !isHandledByTable(fromB, toB);
+  }).filter(function (range) {
     return !(0, _fg.fg)('confluence_ncs_step_diffing_version_history') || !changes.some(function (change) {
-      return change.fromB === fromB && change.toB === toB;
-    });
+      return change.fromB <= range.fromB && change.toB >= range.toB;
+    }) && hasUnhighlightedMarkChanges(range);
   }).forEach(function (change) {
     var _attributionColors$ge, _attributionColors;
     var changeColorScheme = change.attributionKey ? (_attributionColors$ge = (_attributionColors = attributionColors) === null || _attributionColors === void 0 ? void 0 : _attributionColors.get(change.attributionKey)) !== null && _attributionColors$ge !== void 0 ? _attributionColors$ge : colorScheme : colorScheme;
@@ -797,8 +834,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
     return !isHandledByTable(fromB, toB);
   }).filter(function (_ref13) {
     var fromB = _ref13.fromB,
-      toB = _ref13.toB;
-    return !(0, _fg.fg)('confluence_ncs_step_diffing_version_history') || !changes.some(function (change) {
+      toB = _ref13.toB,
+      isInline = _ref13.isInline;
+    return !(0, _fg.fg)('confluence_ncs_step_diffing_version_history') || !isInline || !changes.some(function (change) {
       return change.fromB === fromB && change.toB === toB;
     });
   }).forEach(function (change) {

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

@@ -20,7 +20,8 @@ var typeID = function typeID(type) {
  *
  * Deliberately narrower than `attrAwareTokenEncoder`: node-start tokens keep the library default
  * and do not fold in diffable attributes, which `getAttrChangeRanges` already reports for every
- * diff type.
+ * diff type. The NCS version-history path also uses `attrAwareTokenEncoder` so main diff calculation
+ * detects attribute-only node replacements.
  */
 var markAwareTokenEncoder = exports.markAwareTokenEncoder = {
   encodeCharacter: function encodeCharacter(char, marks) {

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

@@ -11,7 +11,7 @@ var _markAwareTokenEncoder = require("./markAwareTokenEncoder");
  * `computeDiffChanges` so the two cannot drift.
  *
  * @param useAttrAwareEncoder Caller is running the smart classifier, which needs node attrs folded
- * into the token.
+ * into the token. Also used by the NCS version-history path to detect attribute-only node changes.
  */
 var selectTokenEncoder = exports.selectTokenEncoder = function selectTokenEncoder(useAttrAwareEncoder) {
   if (useAttrAwareEncoder) {

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

@@ -182,7 +182,7 @@ var createChangedRowDOM = function createChangedRowDOM(_ref3) {
   var cellIndex = 0;
   rowNode.content.forEach(function (cellNode) {
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
-      var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
+      var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode, 0, undefined, isInserted, colorScheme);
       if (nodeView) {
         if (nodeView instanceof HTMLElement) {
           (0, _tableCellEdgeAttrs.applyCellEdgeAttrs)(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);

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

@@ -82,7 +82,7 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
     // A cell contains block content (paragraphs); serialize the cell's content
     // so every block inside the cell is rendered.
     cellNode.content.forEach(function (blockNode) {
-      var nodeView = nodeViewSerializer.tryCreateNodeView(blockNode);
+      var nodeView = nodeViewSerializer.tryCreateNodeView(blockNode, 0, undefined, isInserted, colorScheme);
       var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, false, isInserted);
       if (nodeView) {
         wrapper.append(nodeView);
@@ -322,7 +322,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
       if (!shouldPreserveCompleteMultiInlineBlock && !shouldRenderAsBlockNode && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(function (childNode) {
-          var childNodeView = serializer.tryCreateNodeView(childNode);
+          var childNodeView = serializer.tryCreateNodeView(childNode, 0, undefined, isInserted, colorScheme);
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             dom.append(lineBreak);
@@ -378,7 +378,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
 
     // Try to create node view, fallback to serialization
     var $sourcePos = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? getSourcePos(doc, $changeFromA, slice.openStart, index) : null;
-    var nodeView = serializer.tryCreateNodeView(node, 0, $sourcePos !== null && $sourcePos !== void 0 ? $sourcePos : undefined);
+    var nodeView = serializer.tryCreateNodeView(node, 0, $sourcePos !== null && $sourcePos !== void 0 ? $sourcePos : undefined, isInserted, colorScheme);
     if (nodeView) {
       if (node.isInline) {
         var wrapper = (0, _wrapBlockNodeView.createContentWrapper)(colorScheme, isActive, isInserted, reveal);

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isDiffableAttr = exports.getRequiredIncludedDiffableAttrs = exports.getIncludedDiffableAttrs = exports.getDiffableAttrNames = exports.DIFFABLE_ATTRS_BY_NODE_TYPE = void 0;
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 /**
  * Single source of truth for which attributes of a node type represent a
  * meaningful change. Shared by `attrAwareTokenEncoder` (changeset detection)
@@ -94,10 +95,13 @@ var getRequiredIncludedDiffableAttrs = exports.getRequiredIncludedDiffableAttrs
  * order is not stable across the two diffed documents.
  */
 var getDiffableAttrNames = exports.getDiffableAttrNames = function getDiffableAttrNames(nodeTypeName, attrs) {
+  // Adding a column updates existing widths, ignore this attribute change. Move this into
+  // DIFFABLE_ATTRS_BY_NODE_TYPE when cleaning up confluence_ncs_step_diffing_version_history
+  var ignoreColumnWidth = nodeTypeName === 'layoutColumn' && (0, _fg.fg)('confluence_ncs_step_diffing_version_history');
   var rule = DIFFABLE_ATTRS_BY_NODE_TYPE[nodeTypeName];
   if (!rule) {
     return Object.keys(attrs).filter(function (name) {
-      return !DEFAULT_EXCLUDED_ATTRS.includes(name);
+      return !DEFAULT_EXCLUDED_ATTRS.includes(name) && !(ignoreColumnWidth && name === 'width');
     }).sort();
   }
   if ('include' in rule) {

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

@@ -90,6 +90,11 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
     var $pos = doc.resolve(finalPos);
     var nodeAtPos = doc.nodeAt(finalPos);
     var originalNodeAtPos = originalPos === undefined ? null : originalDoc.nodeAt(originalPos);
+    var hasChangedAttr = function hasChangedAttr(watchedAttrs) {
+      return attrsToCheck.some(function (attr) {
+        return watchedAttrs.includes(attr) && (!(0, _fg.fg)('confluence_ncs_step_diffing_version_history') || !originalNodeAtPos || originalNodeAtPos.type !== (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) || !(0, _isEqual.default)(originalNodeAtPos.attrs[attr], nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.attrs[attr]));
+      });
+    };
 
     // The changeset path (createDecorationsForChange) handles the deletion widget via
     // prosemirror-changeset; we only need to add the inline insertion highlight here.
@@ -97,9 +102,7 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
       var nodeName = nodeAtPos.type.name;
       if (isInlineAttrChangeNodeName(nodeName)) {
         var watchedAttrs = inlineNodeAttrMap[nodeName];
-        if (attrsToCheck.some(function (v) {
-          return watchedAttrs.includes(v);
-        })) {
+        if (hasChangedAttr(watchedAttrs)) {
           return _objectSpread(_objectSpread({}, attributionKey ? {
             attributionKey: attributionKey
           } : {}), {}, {
@@ -131,9 +134,7 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
     // (e.g. note -> warning) — highlight the new panel and, when the original node
     // is resolvable, expose its range (fromA/toA) so the caller can render the old
     // panel as a "deleted" widget for a before/after comparison.
-    if (attrsToCheck.some(function (v) {
-      return panelAttrs.includes(v);
-    }) && nodeAtPos && (0, _nodeTypeUtils.getBaseNodeTypeName)(nodeAtPos.type) === 'panel') {
+    if (hasChangedAttr(panelAttrs) && nodeAtPos && (0, _nodeTypeUtils.getBaseNodeTypeName)(nodeAtPos.type) === 'panel') {
       return _objectSpread(_objectSpread({}, attributionKey ? {
         attributionKey: attributionKey
       } : {}), {}, {
@@ -181,7 +182,9 @@ var getAttrChangeRanges = exports.getAttrChangeRanges = function getAttrChangeRa
   // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
   // should produce only one decoration, not one per step.
   .filter(function (range, i, arr) {
-    return arr.findIndex(function (r) {
+    return (0, _fg.fg)('confluence_ncs_step_diffing_version_history') ? !arr.some(function (r, nextIndex) {
+      return nextIndex > i && r.fromB === range.fromB;
+    }) : arr.findIndex(function (r) {
       return r.fromB === range.fromB;
     }) === i;
   });

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

@@ -41,6 +41,10 @@ var isMultiContainerBlockNode = exports.isMultiContainerBlockNode = function isM
   return ['decisionList', 'layoutSection'].includes(nodeName);
 };
 var isTextLikeBlockNode = exports.isTextLikeBlockNode = function isTextLikeBlockNode(nodeName) {
+  // When cleaning up platform_editor_ai_show_diff_patch_2 just put paragraph into the list
+  if (nodeName === 'paragraph') {
+    return (0, _fg.fg)('platform_editor_ai_show_diff_patch_2');
+  }
   return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
 };
 var getChangedContentStyleNext = function getChangedContentStyleNext(colorScheme) {

package/dist/cjs/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js

@@ -78,6 +78,12 @@ var isMultiContainerBlockNode = function isMultiContainerBlockNode(nodeName) {
   return ['decisionList', 'layoutSection'].includes(nodeName);
 };
 var isTextLikeBlockNode = function isTextLikeBlockNode(nodeName) {
+  // `paragraph` only reaches this classification via patch_2's `shouldRenderAsBlockNode` routing
+  // (createNodeChangedDecorationWidget.ts), which fully replaced paragraphs never hit otherwise —
+  // gating it here keeps that dependency explicit rather than implicit.
+  if (nodeName === 'paragraph') {
+    return (0, _fg.fg)('platform_editor_ai_show_diff_patch_2');
+  }
   return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
 };
 

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

@@ -4,6 +4,8 @@ import { contains } from '@atlaskit/editor-prosemirror/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createEditorProxy } from './createEditorProxy';
+import { getAtomicInlineChangedAttrs } from './decorations/createInlineChangedDecoration';
+import { isInlineAttrChangeNodeName } from './decorations/utils/getAttrChangeRanges';
 import { wrapInMarkViews } from './markViews';
 
 /**
@@ -36,6 +38,14 @@ export function isEditorViewWithNodeViews(view) {
 /** Expand-family nodes whose expanded state lives in a node-keyed WeakMap. */
 const EXPAND_TYPES = new Set(['expand', 'nestedExpand']);
 
+/** Merges an inline style string onto an element's existing `style` attribute. */
+const appendInlineStyle = (element, style) => {
+  var _element$getAttribute;
+  const currentStyle = (_element$getAttribute = element.getAttribute('style')) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : '';
+  const separator = currentStyle && style && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';
+  element.setAttribute('style', `${currentStyle}${separator}${style}`);
+};
+
 /** Tables are the only node views that read and write positions, so only they need a preview. */
 const containsTable = node => {
   const {
@@ -83,14 +93,28 @@ export class NodeViewSerializer {
   /**
    * Appends serialized child nodes to the given contentDOM element.
    */
-  appendChildNodes(children, contentDOM, basePos = 0, editorProxy) {
+  appendChildNodes(children, contentDOM, basePos = 0, editorProxy, isInserted, colorScheme) {
     // A node's first child sits one position inside it, and each subsequent
     // child is offset by the previous child's `nodeSize`. Tracking this lets nested node
     // views resolve to their real depth instead of every one of them seeing depth 0.
     let childPos = basePos + 1;
     children.forEach(child => {
-      const childNode = this.tryCreateNodeViewInner(child, childPos, editorProxy) || this.serializeNode(child);
+      const childNode = this.tryCreateNodeViewInner(child, childPos, editorProxy, isInserted, colorScheme) || this.serializeNode(child);
       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) {
+          var _childNode$getAttribu;
+          const {
+            className,
+            styleSuffix
+          } = getAtomicInlineChangedAttrs(child.type.name, colorScheme);
+          const existingClassName = (_childNode$getAttribu = childNode.getAttribute('class')) !== null && _childNode$getAttribu !== void 0 ? _childNode$getAttribu : '';
+          childNode.setAttribute('class', existingClassName ? `${existingClassName} ${className}` : className);
+          if (styleSuffix) {
+            appendInlineStyle(childNode, styleSuffix);
+          }
+        }
         contentDOM === null || contentDOM === void 0 ? void 0 : contentDOM.append(childNode);
       }
       childPos += child.nodeSize;
@@ -105,7 +129,7 @@ export class NodeViewSerializer {
    *
    * `$sourcePos` is where the node sits in the doc it came from, so nested tables keep their depth.
    */
-  tryCreateNodeView(targetNode, basePos = 0, $sourcePos) {
+  tryCreateNodeView(targetNode, basePos = 0, $sourcePos, isInserted, colorScheme) {
     var _preview$rootPos;
     if (!this.editorView) {
       return null;
@@ -113,9 +137,9 @@ export class NodeViewSerializer {
     // The preview becomes the document every nested node view resolves its position against,
     // so positions stay internally consistent.
     const preview = fg('platform_editor_ai_show_diff_patch_2') && containsTable(targetNode) ? createEditorProxy(this.editorView, targetNode, $sourcePos) : null;
-    return this.tryCreateNodeViewInner(targetNode, (_preview$rootPos = preview === null || preview === void 0 ? void 0 : preview.rootPos) !== null && _preview$rootPos !== void 0 ? _preview$rootPos : basePos, preview === null || preview === void 0 ? void 0 : preview.editorProxy);
+    return this.tryCreateNodeViewInner(targetNode, (_preview$rootPos = preview === null || preview === void 0 ? void 0 : preview.rootPos) !== null && _preview$rootPos !== void 0 ? _preview$rootPos : basePos, preview === null || preview === void 0 ? void 0 : preview.editorProxy, isInserted, colorScheme);
   }
-  tryCreateNodeViewInner(targetNode, basePos = 0, editorProxy) {
+  tryCreateNodeViewInner(targetNode, basePos = 0, editorProxy, isInserted, colorScheme) {
     var _this$nodeViews;
     if (!this.editorView) {
       return null;
@@ -163,7 +187,7 @@ export class NodeViewSerializer {
           if (!isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
             return this.serializeFragment(targetNode.content);
           }
-          this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy);
+          this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy, isInserted, colorScheme);
         }
         return this.withMarkViews(targetNode, dom, editorProxy);
       }
@@ -186,7 +210,7 @@ export class NodeViewSerializer {
         contentDOM
       } = constructor(targetNode, view, () => resolvedPos, [], {});
       // Iteratively populate children
-      this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy);
+      this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy, isInserted, colorScheme);
       return this.withMarkViews(targetNode, dom, editorProxy);
     } catch {
       return null;

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

@@ -418,12 +418,15 @@ const calculateDiffDecorationsInner = ({
       };
     }
   }
-  // The attribute-aware encoder is only needed by the smart classifier and is gated with it.
+  // The attribute-aware encoder is needed by the smart classifier and is gated with it.
+  // The NCS version-history path also uses it so the main diff calculation detects attribute-only
+  // node replacements, e.g. changing an emoji or mention without changing the node type.
   const {
     tokenEncoder,
     shouldHideMarkOnlyDeletions
-  } = selectTokenEncoder(diffType === 'smart' && fg('platform_editor_ai_smart_diff'));
+  } = selectTokenEncoder(diffType === 'smart' && fg('platform_editor_ai_smart_diff') || fg('confluence_ncs_step_diffing_version_history'));
   let changes;
+  let contentChanges;
   let attributedChanges = [];
   let attributionColors;
   if (attributedChangesetEnabled) {
@@ -434,6 +437,7 @@ const calculateDiffDecorationsInner = ({
       ...attribution,
       stepIndex
     })));
+    contentChanges = changeset.changes;
     attributedChanges = diffType === 'step' ? diffBySteps(originalDoc, simplifiedSteps, simplifiedStepAttributions) : [...changeset.changes];
     // The attributed pipeline gives no guarantee that its output ranges are disjoint — see
     // `collapseOverlappingChanges`.
@@ -453,6 +457,7 @@ const calculateDiffDecorationsInner = ({
     }
   } else {
     const changeset = ChangeSet.create(originalDoc, undefined, tokenEncoder).addSteps(steppedDoc, stepMaps, tr.doc);
+    contentChanges = changeset.changes;
     changes = getChanges({
       changeset,
       originalDoc,
@@ -686,17 +691,38 @@ const calculateDiffDecorationsInner = ({
   changes.forEach(change => {
     createDecorationsForChange(change);
   });
-  // The attribute-aware token encoder already reports mark-only changes as regular changes in the
-  // smart path. Only add the legacy step-range decoration when no equivalent changeset range was
-  // produced; otherwise the same content receives two inline decorations (and two navigation
-  // changes), usually one attribution colour and one default purple decoration.
-  getMarkChangeRanges(simplifiedSteps, simplifiedStepAttributions, fg('confluence_ncs_step_diffing_version_history') ? stepMaps : undefined).filter(({
+  // Compare the content outside replacement ranges at matching positions in both documents.
+  // This preserves real formatting edits without highlighting an unchanged link mark reapplied
+  // while editing its display text.
+  const hasUnhighlightedMarkChanges = ({
     fromB,
     toB
-  }) => !isHandledByTable(fromB, toB)).filter(({
+  }) => {
+    let from = fromB;
+    let offset = 0;
+    const differs = to => from < to && !originalDoc.slice(from + offset, to + offset).content.eq(tr.doc.slice(from, to).content);
+    for (const change of contentChanges) {
+      if (change.fromB >= toB) {
+        break;
+      }
+      if (change.toB > from) {
+        if (differs(change.fromB)) {
+          return true;
+        }
+        from = change.toB;
+      }
+      offset = change.toA - change.toB;
+    }
+    return differs(toB);
+  };
+
+  // The attribute-aware token encoder already reports mark-only changes as regular changes in the
+  // smart path and the NCS version-history path. For NCS version history, only skip the step-range
+  // highlight if the main diff covers it or the remaining content has unchanged formatting.
+  getMarkChangeRanges(simplifiedSteps, simplifiedStepAttributions, fg('confluence_ncs_step_diffing_version_history') ? stepMaps : undefined).filter(({
     fromB,
     toB
-  }) => !fg('confluence_ncs_step_diffing_version_history') || !changes.some(change => change.fromB === fromB && change.toB === toB)).forEach(change => {
+  }) => !isHandledByTable(fromB, toB)).filter(range => !fg('confluence_ncs_step_diffing_version_history') || !changes.some(change => change.fromB <= range.fromB && change.toB >= range.toB) && hasUnhighlightedMarkChanges(range)).forEach(change => {
     var _attributionColors$ge, _attributionColors;
     const changeColorScheme = change.attributionKey ? (_attributionColors$ge = (_attributionColors = attributionColors) === null || _attributionColors === void 0 ? void 0 : _attributionColors.get(change.attributionKey)) !== null && _attributionColors$ge !== void 0 ? _attributionColors$ge : colorScheme : colorScheme;
     const attributionKey = showContributorTags ? change.attributionKey : undefined;
@@ -718,8 +744,9 @@ const calculateDiffDecorationsInner = ({
     toB
   }) => !isHandledByTable(fromB, toB)).filter(({
     fromB,
-    toB
-  }) => !fg('confluence_ncs_step_diffing_version_history') || !changes.some(change => change.fromB === fromB && change.toB === toB)).forEach(change => {
+    toB,
+    isInline
+  }) => !fg('confluence_ncs_step_diffing_version_history') || !isInline || !changes.some(change => change.fromB === fromB && change.toB === toB)).forEach(change => {
     var _attributionColors$ge2, _attributionColors2;
     const changeColorScheme = change.attributionKey ? (_attributionColors$ge2 = (_attributionColors2 = attributionColors) === null || _attributionColors2 === void 0 ? void 0 : _attributionColors2.get(change.attributionKey)) !== null && _attributionColors$ge2 !== void 0 ? _attributionColors$ge2 : colorScheme : colorScheme;
     const attributionKey = showContributorTags ? change.attributionKey : undefined;

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

@@ -15,7 +15,8 @@ const typeID = type => {
  *
  * Deliberately narrower than `attrAwareTokenEncoder`: node-start tokens keep the library default
  * and do not fold in diffable attributes, which `getAttrChangeRanges` already reports for every
- * diff type.
+ * diff type. The NCS version-history path also uses `attrAwareTokenEncoder` so main diff calculation
+ * detects attribute-only node replacements.
  */
 export const markAwareTokenEncoder = {
   encodeCharacter: (char, marks) => encodeCharacterWithMarks(char, marks),

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

@@ -5,7 +5,7 @@ import { markAwareTokenEncoder } from './markAwareTokenEncoder';
  * `computeDiffChanges` so the two cannot drift.
  *
  * @param useAttrAwareEncoder Caller is running the smart classifier, which needs node attrs folded
- * into the token.
+ * into the token. Also used by the NCS version-history path to detect attribute-only node changes.
  */
 export const selectTokenEncoder = useAttrAwareEncoder => {
   if (useAttrAwareEncoder) {

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

@@ -157,7 +157,7 @@ const createChangedRowDOM = ({
   let cellIndex = 0;
   rowNode.content.forEach(cellNode => {
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
-      const nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
+      const nodeView = nodeViewSerializer.tryCreateNodeView(cellNode, 0, undefined, isInserted, colorScheme);
       if (nodeView) {
         if (nodeView instanceof HTMLElement) {
           applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);

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

@@ -72,7 +72,7 @@ const createTableCellContentWidgets = ({
     // A cell contains block content (paragraphs); serialize the cell's content
     // so every block inside the cell is rendered.
     cellNode.content.forEach(blockNode => {
-      const nodeView = nodeViewSerializer.tryCreateNodeView(blockNode);
+      const nodeView = nodeViewSerializer.tryCreateNodeView(blockNode, 0, undefined, isInserted, colorScheme);
       const wrapper = createContentWrapper(colorScheme, false, isInserted);
       if (nodeView) {
         wrapper.append(nodeView);
@@ -314,7 +314,7 @@ export const createNodeChangedDecorationWidget = ({
     const handleMultipleChildNodes = node => {
       if (!shouldPreserveCompleteMultiInlineBlock && !shouldRenderAsBlockNode && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(childNode => {
-          const childNodeView = serializer.tryCreateNodeView(childNode);
+          const childNodeView = serializer.tryCreateNodeView(childNode, 0, undefined, isInserted, colorScheme);
           if (childNodeView) {
             const lineBreak = document.createElement('br');
             dom.append(lineBreak);
@@ -364,7 +364,7 @@ export const createNodeChangedDecorationWidget = ({
 
     // Try to create node view, fallback to serialization
     const $sourcePos = fg('platform_editor_ai_show_diff_patch_2') ? getSourcePos(doc, $changeFromA, slice.openStart, index) : null;
-    const nodeView = serializer.tryCreateNodeView(node, 0, $sourcePos !== null && $sourcePos !== void 0 ? $sourcePos : undefined);
+    const nodeView = serializer.tryCreateNodeView(node, 0, $sourcePos !== null && $sourcePos !== void 0 ? $sourcePos : undefined, isInserted, colorScheme);
     if (nodeView) {
       if (node.isInline) {
         const wrapper = createContentWrapper(colorScheme, isActive, isInserted, reveal);

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

@@ -1,3 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+
 /**
  * Single source of truth for which attributes of a node type represent a
  * meaningful change. Shared by `attrAwareTokenEncoder` (changeset detection)
@@ -88,9 +90,12 @@ export const getRequiredIncludedDiffableAttrs = nodeTypeName => {
  * order is not stable across the two diffed documents.
  */
 export const getDiffableAttrNames = (nodeTypeName, attrs) => {
+  // Adding a column updates existing widths, ignore this attribute change. Move this into
+  // DIFFABLE_ATTRS_BY_NODE_TYPE when cleaning up confluence_ncs_step_diffing_version_history
+  const ignoreColumnWidth = nodeTypeName === 'layoutColumn' && fg('confluence_ncs_step_diffing_version_history');
   const rule = DIFFABLE_ATTRS_BY_NODE_TYPE[nodeTypeName];
   if (!rule) {
-    return Object.keys(attrs).filter(name => !DEFAULT_EXCLUDED_ATTRS.includes(name)).sort();
+    return Object.keys(attrs).filter(name => !DEFAULT_EXCLUDED_ATTRS.includes(name) && !(ignoreColumnWidth && name === 'width')).sort();
   }
   if ('include' in rule) {
     return rule.include;

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

@@ -74,6 +74,7 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
     const $pos = doc.resolve(finalPos);
     const nodeAtPos = doc.nodeAt(finalPos);
     const originalNodeAtPos = originalPos === undefined ? null : originalDoc.nodeAt(originalPos);
+    const hasChangedAttr = watchedAttrs => attrsToCheck.some(attr => watchedAttrs.includes(attr) && (!fg('confluence_ncs_step_diffing_version_history') || !originalNodeAtPos || originalNodeAtPos.type !== (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) || !isEqual(originalNodeAtPos.attrs[attr], nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.attrs[attr])));
 
     // The changeset path (createDecorationsForChange) handles the deletion widget via
     // prosemirror-changeset; we only need to add the inline insertion highlight here.
@@ -81,7 +82,7 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
       const nodeName = nodeAtPos.type.name;
       if (isInlineAttrChangeNodeName(nodeName)) {
         const watchedAttrs = inlineNodeAttrMap[nodeName];
-        if (attrsToCheck.some(v => watchedAttrs.includes(v))) {
+        if (hasChangedAttr(watchedAttrs)) {
           return {
             ...(attributionKey ? {
               attributionKey
@@ -114,7 +115,7 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
     // (e.g. note -> warning) — highlight the new panel and, when the original node
     // is resolvable, expose its range (fromA/toA) so the caller can render the old
     // panel as a "deleted" widget for a before/after comparison.
-    if (attrsToCheck.some(v => panelAttrs.includes(v)) && nodeAtPos && getBaseNodeTypeName(nodeAtPos.type) === 'panel') {
+    if (hasChangedAttr(panelAttrs) && nodeAtPos && getBaseNodeTypeName(nodeAtPos.type) === 'panel') {
       return {
         ...(attributionKey ? {
           attributionKey
@@ -161,7 +162,7 @@ export const getAttrChangeRanges = (doc, attrStepContexts, originalDoc) => {
   // 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.
-  .filter((range, i, arr) => arr.findIndex(r => r.fromB === range.fromB) === i);
+  .filter((range, i, arr) => fg('confluence_ncs_step_diffing_version_history') ? !arr.some((r, nextIndex) => nextIndex > i && r.fromB === range.fromB) : arr.findIndex(r => r.fromB === range.fromB) === i);
 };
 
 /**

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

@@ -30,6 +30,10 @@ export const isMultiContainerBlockNode = nodeName => {
   return ['decisionList', 'layoutSection'].includes(nodeName);
 };
 export const isTextLikeBlockNode = nodeName => {
+  // When cleaning up platform_editor_ai_show_diff_patch_2 just put paragraph into the list
+  if (nodeName === 'paragraph') {
+    return fg('platform_editor_ai_show_diff_patch_2');
+  }
   return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
 };
 const getChangedContentStyleNext = (colorScheme, isActive = false, isInserted = false, hideAddedDiffsUnderline = false) => {

package/dist/es2019/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js

@@ -71,6 +71,12 @@ const isMultiContainerBlockNode = nodeName => {
   return ['decisionList', 'layoutSection'].includes(nodeName);
 };
 const isTextLikeBlockNode = nodeName => {
+  // `paragraph` only reaches this classification via patch_2's `shouldRenderAsBlockNode` routing
+  // (createNodeChangedDecorationWidget.ts), which fully replaced paragraphs never hit otherwise —
+  // gating it here keeps that dependency explicit rather than implicit.
+  if (nodeName === 'paragraph') {
+    return fg('platform_editor_ai_show_diff_patch_2');
+  }
   return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
 };
 

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

@@ -6,6 +6,8 @@ import { contains } from '@atlaskit/editor-prosemirror/utils';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { createEditorProxy } from './createEditorProxy';
+import { getAtomicInlineChangedAttrs } from './decorations/createInlineChangedDecoration';
+import { isInlineAttrChangeNodeName } from './decorations/utils/getAttrChangeRanges';
 import { wrapInMarkViews } from './markViews';
 
 /**
@@ -38,6 +40,14 @@ export function isEditorViewWithNodeViews(view) {
 /** Expand-family nodes whose expanded state lives in a node-keyed WeakMap. */
 var EXPAND_TYPES = new Set(['expand', 'nestedExpand']);
 
+/** Merges an inline style string onto an element's existing `style` attribute. */
+var appendInlineStyle = function appendInlineStyle(element, style) {
+  var _element$getAttribute;
+  var currentStyle = (_element$getAttribute = element.getAttribute('style')) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : '';
+  var separator = currentStyle && style && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';
+  element.setAttribute('style', "".concat(currentStyle).concat(separator).concat(style));
+};
+
 /** Tables are the only node views that read and write positions, so only they need a preview. */
 var containsTable = function containsTable(node) {
   var table = node.type.schema.nodes.table;
@@ -92,13 +102,28 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
       var _this = this;
       var basePos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
       var editorProxy = arguments.length > 3 ? arguments[3] : undefined;
+      var isInserted = arguments.length > 4 ? arguments[4] : undefined;
+      var colorScheme = arguments.length > 5 ? arguments[5] : undefined;
       // A node's first child sits one position inside it, and each subsequent
       // child is offset by the previous child's `nodeSize`. Tracking this lets nested node
       // views resolve to their real depth instead of every one of them seeing depth 0.
       var childPos = basePos + 1;
       children.forEach(function (child) {
-        var childNode = _this.tryCreateNodeViewInner(child, childPos, editorProxy) || _this.serializeNode(child);
+        var childNode = _this.tryCreateNodeViewInner(child, childPos, editorProxy, isInserted, colorScheme) || _this.serializeNode(child);
         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) {
+            var _childNode$getAttribu;
+            var _getAtomicInlineChang = getAtomicInlineChangedAttrs(child.type.name, colorScheme),
+              className = _getAtomicInlineChang.className,
+              styleSuffix = _getAtomicInlineChang.styleSuffix;
+            var existingClassName = (_childNode$getAttribu = childNode.getAttribute('class')) !== null && _childNode$getAttribu !== void 0 ? _childNode$getAttribu : '';
+            childNode.setAttribute('class', existingClassName ? "".concat(existingClassName, " ").concat(className) : className);
+            if (styleSuffix) {
+              appendInlineStyle(childNode, styleSuffix);
+            }
+          }
           contentDOM === null || contentDOM === void 0 || contentDOM.append(childNode);
         }
         childPos += child.nodeSize;
@@ -119,13 +144,15 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
       var _preview$rootPos;
       var basePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var $sourcePos = arguments.length > 2 ? arguments[2] : undefined;
+      var isInserted = arguments.length > 3 ? arguments[3] : undefined;
+      var colorScheme = arguments.length > 4 ? arguments[4] : undefined;
       if (!this.editorView) {
         return null;
       }
       // The preview becomes the document every nested node view resolves its position against,
       // so positions stay internally consistent.
       var preview = fg('platform_editor_ai_show_diff_patch_2') && containsTable(targetNode) ? createEditorProxy(this.editorView, targetNode, $sourcePos) : null;
-      return this.tryCreateNodeViewInner(targetNode, (_preview$rootPos = preview === null || preview === void 0 ? void 0 : preview.rootPos) !== null && _preview$rootPos !== void 0 ? _preview$rootPos : basePos, preview === null || preview === void 0 ? void 0 : preview.editorProxy);
+      return this.tryCreateNodeViewInner(targetNode, (_preview$rootPos = preview === null || preview === void 0 ? void 0 : preview.rootPos) !== null && _preview$rootPos !== void 0 ? _preview$rootPos : basePos, preview === null || preview === void 0 ? void 0 : preview.editorProxy, isInserted, colorScheme);
     }
   }, {
     key: "tryCreateNodeViewInner",
@@ -133,6 +160,8 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
       var _this$nodeViews;
       var basePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var editorProxy = arguments.length > 2 ? arguments[2] : undefined;
+      var isInserted = arguments.length > 3 ? arguments[3] : undefined;
+      var colorScheme = arguments.length > 4 ? arguments[4] : undefined;
       if (!this.editorView) {
         return null;
       }
@@ -178,7 +207,7 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
             if (!isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
               return this.serializeFragment(targetNode.content);
             }
-            this.appendChildNodes(targetNode.children, _contentDOM, basePos, editorProxy);
+            this.appendChildNodes(targetNode.children, _contentDOM, basePos, editorProxy, isInserted, colorScheme);
           }
           return this.withMarkViews(targetNode, _dom, editorProxy);
         }
@@ -202,7 +231,7 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
           dom = _constructor.dom,
           contentDOM = _constructor.contentDOM;
         // Iteratively populate children
-        this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy);
+        this.appendChildNodes(targetNode.children, contentDOM, basePos, editorProxy, isInserted, colorScheme);
         return this.withMarkViews(targetNode, dom, editorProxy);
       } catch (_unused) {
         return null;

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

@@ -457,11 +457,14 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       };
     }
   }
-  // The attribute-aware encoder is only needed by the smart classifier and is gated with it.
-  var _selectTokenEncoder = selectTokenEncoder(diffType === 'smart' && fg('platform_editor_ai_smart_diff')),
+  // The attribute-aware encoder is needed by the smart classifier and is gated with it.
+  // The NCS version-history path also uses it so the main diff calculation detects attribute-only
+  // node replacements, e.g. changing an emoji or mention without changing the node type.
+  var _selectTokenEncoder = selectTokenEncoder(diffType === 'smart' && fg('platform_editor_ai_smart_diff') || fg('confluence_ncs_step_diffing_version_history')),
     tokenEncoder = _selectTokenEncoder.tokenEncoder,
     shouldHideMarkOnlyDeletions = _selectTokenEncoder.shouldHideMarkOnlyDeletions;
   var changes;
+  var contentChanges;
   var attributedChanges = [];
   var attributionColors;
   if (attributedChangesetEnabled) {
@@ -475,6 +478,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
         stepIndex: stepIndex
       });
     }));
+    contentChanges = changeset.changes;
     attributedChanges = diffType === 'step' ? diffBySteps(originalDoc, simplifiedSteps, simplifiedStepAttributions) : _toConsumableArray(changeset.changes);
     // The attributed pipeline gives no guarantee that its output ranges are disjoint — see
     // `collapseOverlappingChanges`.
@@ -494,6 +498,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
     }
   } else {
     var _changeset = ChangeSet.create(originalDoc, undefined, tokenEncoder).addSteps(steppedDoc, stepMaps, tr.doc);
+    contentChanges = _changeset.changes;
     changes = getChanges({
       changeset: _changeset,
       originalDoc: originalDoc,
@@ -753,20 +758,52 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
   changes.forEach(function (change) {
     createDecorationsForChange(change);
   });
-  // The attribute-aware token encoder already reports mark-only changes as regular changes in the
-  // smart path. Only add the legacy step-range decoration when no equivalent changeset range was
-  // produced; otherwise the same content receives two inline decorations (and two navigation
-  // changes), usually one attribution colour and one default purple decoration.
-  getMarkChangeRanges(simplifiedSteps, simplifiedStepAttributions, fg('confluence_ncs_step_diffing_version_history') ? stepMaps : undefined).filter(function (_ref10) {
+  // Compare the content outside replacement ranges at matching positions in both documents.
+  // This preserves real formatting edits without highlighting an unchanged link mark reapplied
+  // while editing its display text.
+  var hasUnhighlightedMarkChanges = function hasUnhighlightedMarkChanges(_ref10) {
     var fromB = _ref10.fromB,
       toB = _ref10.toB;
-    return !isHandledByTable(fromB, toB);
-  }).filter(function (_ref11) {
+    var from = fromB;
+    var offset = 0;
+    var differs = function differs(to) {
+      return from < to && !originalDoc.slice(from + offset, to + offset).content.eq(tr.doc.slice(from, to).content);
+    };
+    var _iterator5 = _createForOfIteratorHelper(contentChanges),
+      _step5;
+    try {
+      for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+        var change = _step5.value;
+        if (change.fromB >= toB) {
+          break;
+        }
+        if (change.toB > from) {
+          if (differs(change.fromB)) {
+            return true;
+          }
+          from = change.toB;
+        }
+        offset = change.toA - change.toB;
+      }
+    } catch (err) {
+      _iterator5.e(err);
+    } finally {
+      _iterator5.f();
+    }
+    return differs(toB);
+  };
+
+  // The attribute-aware token encoder already reports mark-only changes as regular changes in the
+  // smart path and the NCS version-history path. For NCS version history, only skip the step-range
+  // highlight if the main diff covers it or the remaining content has unchanged formatting.
+  getMarkChangeRanges(simplifiedSteps, simplifiedStepAttributions, fg('confluence_ncs_step_diffing_version_history') ? stepMaps : undefined).filter(function (_ref11) {
     var fromB = _ref11.fromB,
       toB = _ref11.toB;
+    return !isHandledByTable(fromB, toB);
+  }).filter(function (range) {
     return !fg('confluence_ncs_step_diffing_version_history') || !changes.some(function (change) {
-      return change.fromB === fromB && change.toB === toB;
-    });
+      return change.fromB <= range.fromB && change.toB >= range.toB;
+    }) && hasUnhighlightedMarkChanges(range);
   }).forEach(function (change) {
     var _attributionColors$ge, _attributionColors;
     var changeColorScheme = change.attributionKey ? (_attributionColors$ge = (_attributionColors = attributionColors) === null || _attributionColors === void 0 ? void 0 : _attributionColors.get(change.attributionKey)) !== null && _attributionColors$ge !== void 0 ? _attributionColors$ge : colorScheme : colorScheme;
@@ -790,8 +827,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
     return !isHandledByTable(fromB, toB);
   }).filter(function (_ref13) {
     var fromB = _ref13.fromB,
-      toB = _ref13.toB;
-    return !fg('confluence_ncs_step_diffing_version_history') || !changes.some(function (change) {
+      toB = _ref13.toB,
+      isInline = _ref13.isInline;
+    return !fg('confluence_ncs_step_diffing_version_history') || !isInline || !changes.some(function (change) {
       return change.fromB === fromB && change.toB === toB;
     });
   }).forEach(function (change) {

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

@@ -15,7 +15,8 @@ var typeID = function typeID(type) {
  *
  * Deliberately narrower than `attrAwareTokenEncoder`: node-start tokens keep the library default
  * and do not fold in diffable attributes, which `getAttrChangeRanges` already reports for every
- * diff type.
+ * diff type. The NCS version-history path also uses `attrAwareTokenEncoder` so main diff calculation
+ * detects attribute-only node replacements.
  */
 export var markAwareTokenEncoder = {
   encodeCharacter: function encodeCharacter(char, marks) {

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

@@ -5,7 +5,7 @@ import { markAwareTokenEncoder } from './markAwareTokenEncoder';
  * `computeDiffChanges` so the two cannot drift.
  *
  * @param useAttrAwareEncoder Caller is running the smart classifier, which needs node attrs folded
- * into the token.
+ * into the token. Also used by the NCS version-history path to detect attribute-only node changes.
  */
 export var selectTokenEncoder = function selectTokenEncoder(useAttrAwareEncoder) {
   if (useAttrAwareEncoder) {

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

@@ -175,7 +175,7 @@ var createChangedRowDOM = function createChangedRowDOM(_ref3) {
   var cellIndex = 0;
   rowNode.content.forEach(function (cellNode) {
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
-      var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
+      var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode, 0, undefined, isInserted, colorScheme);
       if (nodeView) {
         if (nodeView instanceof HTMLElement) {
           applyCellEdgeAttrs(nodeView, cellEdgeAttrs === null || cellEdgeAttrs === void 0 ? void 0 : cellEdgeAttrs[cellIndex]);

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

@@ -76,7 +76,7 @@ var createTableCellContentWidgets = function createTableCellContentWidgets(_ref)
     // A cell contains block content (paragraphs); serialize the cell's content
     // so every block inside the cell is rendered.
     cellNode.content.forEach(function (blockNode) {
-      var nodeView = nodeViewSerializer.tryCreateNodeView(blockNode);
+      var nodeView = nodeViewSerializer.tryCreateNodeView(blockNode, 0, undefined, isInserted, colorScheme);
       var wrapper = createContentWrapper(colorScheme, false, isInserted);
       if (nodeView) {
         wrapper.append(nodeView);
@@ -316,7 +316,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
       if (!shouldPreserveCompleteMultiInlineBlock && !shouldRenderAsBlockNode && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(function (childNode) {
-          var childNodeView = serializer.tryCreateNodeView(childNode);
+          var childNodeView = serializer.tryCreateNodeView(childNode, 0, undefined, isInserted, colorScheme);
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             dom.append(lineBreak);
@@ -372,7 +372,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
 
     // Try to create node view, fallback to serialization
     var $sourcePos = fg('platform_editor_ai_show_diff_patch_2') ? getSourcePos(doc, $changeFromA, slice.openStart, index) : null;
-    var nodeView = serializer.tryCreateNodeView(node, 0, $sourcePos !== null && $sourcePos !== void 0 ? $sourcePos : undefined);
+    var nodeView = serializer.tryCreateNodeView(node, 0, $sourcePos !== null && $sourcePos !== void 0 ? $sourcePos : undefined, isInserted, colorScheme);
     if (nodeView) {
       if (node.isInline) {
         var wrapper = createContentWrapper(colorScheme, isActive, isInserted, reveal);

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

@@ -1,3 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+
 /**
  * Single source of truth for which attributes of a node type represent a
  * meaningful change. Shared by `attrAwareTokenEncoder` (changeset detection)
@@ -88,10 +90,13 @@ export var getRequiredIncludedDiffableAttrs = function getRequiredIncludedDiffab
  * order is not stable across the two diffed documents.
  */
 export var getDiffableAttrNames = function getDiffableAttrNames(nodeTypeName, attrs) {
+  // Adding a column updates existing widths, ignore this attribute change. Move this into
+  // DIFFABLE_ATTRS_BY_NODE_TYPE when cleaning up confluence_ncs_step_diffing_version_history
+  var ignoreColumnWidth = nodeTypeName === 'layoutColumn' && fg('confluence_ncs_step_diffing_version_history');
   var rule = DIFFABLE_ATTRS_BY_NODE_TYPE[nodeTypeName];
   if (!rule) {
     return Object.keys(attrs).filter(function (name) {
-      return !DEFAULT_EXCLUDED_ATTRS.includes(name);
+      return !DEFAULT_EXCLUDED_ATTRS.includes(name) && !(ignoreColumnWidth && name === 'width');
     }).sort();
   }
   if ('include' in rule) {

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

@@ -83,6 +83,11 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, attrStepConte
     var $pos = doc.resolve(finalPos);
     var nodeAtPos = doc.nodeAt(finalPos);
     var originalNodeAtPos = originalPos === undefined ? null : originalDoc.nodeAt(originalPos);
+    var hasChangedAttr = function hasChangedAttr(watchedAttrs) {
+      return attrsToCheck.some(function (attr) {
+        return watchedAttrs.includes(attr) && (!fg('confluence_ncs_step_diffing_version_history') || !originalNodeAtPos || originalNodeAtPos.type !== (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type) || !isEqual(originalNodeAtPos.attrs[attr], nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.attrs[attr]));
+      });
+    };
 
     // The changeset path (createDecorationsForChange) handles the deletion widget via
     // prosemirror-changeset; we only need to add the inline insertion highlight here.
@@ -90,9 +95,7 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, attrStepConte
       var nodeName = nodeAtPos.type.name;
       if (isInlineAttrChangeNodeName(nodeName)) {
         var watchedAttrs = inlineNodeAttrMap[nodeName];
-        if (attrsToCheck.some(function (v) {
-          return watchedAttrs.includes(v);
-        })) {
+        if (hasChangedAttr(watchedAttrs)) {
           return _objectSpread(_objectSpread({}, attributionKey ? {
             attributionKey: attributionKey
           } : {}), {}, {
@@ -124,9 +127,7 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, attrStepConte
     // (e.g. note -> warning) — highlight the new panel and, when the original node
     // is resolvable, expose its range (fromA/toA) so the caller can render the old
     // panel as a "deleted" widget for a before/after comparison.
-    if (attrsToCheck.some(function (v) {
-      return panelAttrs.includes(v);
-    }) && nodeAtPos && getBaseNodeTypeName(nodeAtPos.type) === 'panel') {
+    if (hasChangedAttr(panelAttrs) && nodeAtPos && getBaseNodeTypeName(nodeAtPos.type) === 'panel') {
       return _objectSpread(_objectSpread({}, attributionKey ? {
         attributionKey: attributionKey
       } : {}), {}, {
@@ -174,7 +175,9 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, attrStepConte
   // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
   // should produce only one decoration, not one per step.
   .filter(function (range, i, arr) {
-    return arr.findIndex(function (r) {
+    return fg('confluence_ncs_step_diffing_version_history') ? !arr.some(function (r, nextIndex) {
+      return nextIndex > i && r.fromB === range.fromB;
+    }) : arr.findIndex(function (r) {
       return r.fromB === range.fromB;
     }) === i;
   });

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

@@ -35,6 +35,10 @@ export var isMultiContainerBlockNode = function isMultiContainerBlockNode(nodeNa
   return ['decisionList', 'layoutSection'].includes(nodeName);
 };
 export var isTextLikeBlockNode = function isTextLikeBlockNode(nodeName) {
+  // When cleaning up platform_editor_ai_show_diff_patch_2 just put paragraph into the list
+  if (nodeName === 'paragraph') {
+    return fg('platform_editor_ai_show_diff_patch_2');
+  }
   return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
 };
 var getChangedContentStyleNext = function getChangedContentStyleNext(colorScheme) {

package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.legacy.js

@@ -71,6 +71,12 @@ var isMultiContainerBlockNode = function isMultiContainerBlockNode(nodeName) {
   return ['decisionList', 'layoutSection'].includes(nodeName);
 };
 var isTextLikeBlockNode = function isTextLikeBlockNode(nodeName) {
+  // `paragraph` only reaches this classification via patch_2's `shouldRenderAsBlockNode` routing
+  // (createNodeChangedDecorationWidget.ts), which fully replaced paragraphs never hit otherwise —
+  // gating it here keeps that dependency explicit rather than implicit.
+  if (nodeName === 'paragraph') {
+    return fg('platform_editor_ai_show_diff_patch_2');
+  }
   return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
 };
 

package/dist/types/pm-plugins/NodeViewSerializer.d.ts

@@ -1,6 +1,7 @@
 import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
 import type { Node as PMNode, Fragment, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { ColorScheme } from './decorations/colorSchemes/types';
 /**
  * Utilities for working with ProseMirror node views and DOM serialization within the
  * Show Diff editor plugin.
@@ -61,7 +62,7 @@ export declare class NodeViewSerializer {
      *
      * `$sourcePos` is where the node sits in the doc it came from, so nested tables keep their depth.
      */
-    tryCreateNodeView(targetNode: PMNode, basePos?: number, $sourcePos?: ResolvedPos): Node | null;
+    tryCreateNodeView(targetNode: PMNode, basePos?: number, $sourcePos?: ResolvedPos, isInserted?: boolean, colorScheme?: ColorScheme): Node | null;
     private tryCreateNodeViewInner;
     /** Wraps rendered DOM in its marks, rendered against the editor proxy when there is one. */
     private withMarkViews;

package/dist/types/pm-plugins/calculateDiff/markAwareTokenEncoder.d.ts

@@ -4,6 +4,7 @@ import type { TokenEncoder } from 'prosemirror-changeset';
  *
  * Deliberately narrower than `attrAwareTokenEncoder`: node-start tokens keep the library default
  * and do not fold in diffable attributes, which `getAttrChangeRanges` already reports for every
- * diff type.
+ * diff type. The NCS version-history path also uses `attrAwareTokenEncoder` so main diff calculation
+ * detects attribute-only node replacements.
  */
 export declare const markAwareTokenEncoder: TokenEncoder<string | number>;

package/dist/types/pm-plugins/calculateDiff/selectTokenEncoder.d.ts

@@ -10,6 +10,6 @@ export type TokenEncoderSelection = {
  * `computeDiffChanges` so the two cannot drift.
  *
  * @param useAttrAwareEncoder Caller is running the smart classifier, which needs node attrs folded
- * into the token.
+ * into the token. Also used by the NCS version-history path to detect attribute-only node changes.
  */
 export declare const selectTokenEncoder: (useAttrAwareEncoder: boolean) => TokenEncoderSelection;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "21.0.1",
+	"version": "21.0.3",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^219.0.0",
+		"@atlaskit/tmp-editor-statsig": "^220.0.0",
 		"@atlaskit/tokens": "^20.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -71,7 +71,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^127.1.0",
+		"@atlaskit/editor-common": "^127.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"