@atlaskit/editor-plugin-show-diff 14.2.1 → 14.2.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 14.2.2
+
+### Patch Changes
+
+- [`2c226f2acb3be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2c226f2acb3be) -
+  Preserve complete block wrappers for multi-inline-node suggestion diffs while continuing to render
+  open slice boundaries as fragments behind platform_editor_ai_show_diff_patch_1.
+- Updated dependencies
+
 ## 14.2.1
 
 ### Patch Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createInlineChangedDecoration = void 0;
+exports.getAtomicInlineChangedAttrs = exports.createInlineChangedDecoration = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
@@ -97,6 +97,9 @@ var resolveAtomicInlineAttrs = function resolveAtomicInlineAttrs(inlineNodeName,
     styleSuffix: ''
   };
 };
+var getAtomicInlineChangedAttrs = exports.getAtomicInlineChangedAttrs = function getAtomicInlineChangedAttrs(inlineNodeName, colorScheme) {
+  return resolveAtomicInlineAttrs(inlineNodeName, colorScheme, getColorScheme(colorScheme));
+};
 
 /**
  * Inline decoration used for insertions as the content already exists in the document

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createNodeChangedDecorationWidget = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _isExtendedEnabled = require("../isExtendedEnabled");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
@@ -212,6 +213,11 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   }
   var diffId = crypto.randomUUID();
   var decorations = [];
+  var replacementNode = newDoc.nodeAt(change.fromB);
+  var firstReplacedNode = slice.content.firstChild;
+  var lastReplacedNode = slice.content.lastChild;
+  var showDiffPatch1 = (0, _fg.fg)('platform_editor_ai_show_diff_patch_1');
+  var isCompleteSameTypeReplacement = slice.content.childCount === 1 && firstReplacedNode !== null && replacementNode !== null && firstReplacedNode.type === replacementNode.type && replacementNode.nodeSize === change.toB - change.fromB;
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -219,9 +225,14 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
    * or sliced End depth is and match only the entire node.
    */
   slice.content.forEach(function (node) {
+    var isFirst = firstReplacedNode === node;
+    var isLast = lastReplacedNode === node;
+    var isOpenAtSliceBoundary = isFirst && slice.openStart > 0 || isLast && slice.openEnd > 0;
+    var shouldPreserveCompleteMultiInlineBlock = showDiffPatch1 && node.isBlock && node.type.inlineContent && node.content.childCount > 1 && !isOpenAtSliceBoundary && isCompleteSameTypeReplacement;
+
     // Helper function to handle multiple child nodes
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
-      if (node.content.childCount > 1 && node.type.inlineContent) {
+      if (!shouldPreserveCompleteMultiInlineBlock && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(function (childNode) {
           var childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
@@ -246,14 +257,16 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     };
 
     // Determine which node to use and how to serialize
-    var isFirst = slice.content.firstChild === node;
-    var isLast = slice.content.lastChild === node;
     var hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
     var fallbackSerialization;
     if (handleMultipleChildNodes(node)) {
       return;
     }
-    if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
+    if (shouldPreserveCompleteMultiInlineBlock) {
+      fallbackSerialization = function fallbackSerialization() {
+        return serializer.serializeNode(node);
+      };
+    } else if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeFragment(node.content);
       };
@@ -293,7 +306,8 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           isActive: isActive,
           isInserted: isInserted,
           diffType: diffType,
-          hideAddedDiffsUnderline: hideAddedDiffsUnderline
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+          highlightInlineLeafNodes: shouldPreserveCompleteMultiInlineBlock
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stepIsValidAttrChange = exports.getAttrChangeRanges = void 0;
+exports.stepIsValidAttrChange = exports.isInlineAttrChangeNodeName = exports.getAttrChangeRanges = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
@@ -37,7 +37,7 @@ var inlineNodeAttrMap = {
   mention: mentionAttrs,
   status: statusAttrs
 };
-var isInlineAttrChangeNodeName = function isInlineAttrChangeNodeName(nodeName) {
+var isInlineAttrChangeNodeName = exports.isInlineAttrChangeNodeName = function isInlineAttrChangeNodeName(nodeName) {
   return nodeName in inlineNodeAttrMap;
 };
 

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

@@ -12,7 +12,9 @@ var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../../isExtendedEnabled");
+var _createInlineChangedDecoration = require("../createInlineChangedDecoration");
 var _tableCellEdgeAttrs = require("./tableCellEdgeAttrs");
+var _getAttrChangeRanges = require("./getAttrChangeRanges");
 var _wrapBlockNodeViewStyles = require("./wrapBlockNodeViewStyles");
 var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
   switch (nodeName) {
@@ -233,15 +235,65 @@ var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref6
   }
   element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
 };
-var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref7) {
+var combineStyles = function combineStyles(currentStyle, appendedStyle) {
+  var separator = currentStyle && appendedStyle && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';
+  return "".concat(currentStyle).concat(separator).concat(appendedStyle);
+};
+var appendStyleToElement = function appendStyleToElement(element, style) {
+  var currentStyle = element.getAttribute('style') || '';
+  element.setAttribute('style', combineStyles(currentStyle, style));
+};
+var wrapAtomicInlineNode = function wrapAtomicInlineNode(_ref7) {
   var element = _ref7.element,
-    targetNode = _ref7.targetNode,
-    colorScheme = _ref7.colorScheme,
-    isActive = _ref7.isActive,
-    isInserted = _ref7.isInserted,
-    diffType = _ref7.diffType,
-    _ref7$hideAddedDiffsU = _ref7.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref7$hideAddedDiffsU === void 0 ? false : _ref7$hideAddedDiffsU;
+    className = _ref7.className,
+    style = _ref7.style;
+  var wrapper = document.createElement('span');
+  wrapper.className = className;
+  wrapper.setAttribute('style', style);
+  element.replaceWith(wrapper);
+  wrapper.append(element);
+};
+var applyInlineLeafNodeStyles = function applyInlineLeafNodeStyles(_ref8) {
+  var element = _ref8.element,
+    targetNode = _ref8.targetNode,
+    contentStyle = _ref8.contentStyle,
+    colorScheme = _ref8.colorScheme;
+  // NodeViewSerializer appends one DOM node per direct ProseMirror child, preserving order.
+  var childDomNodes = (0, _toConsumableArray2.default)(element.childNodes);
+  targetNode.content.forEach(function (childNode, _offset, index) {
+    if (childNode.isText || !childNode.isLeaf) {
+      return;
+    }
+    var childElement = childDomNodes[index];
+    if (!(childElement instanceof HTMLElement)) {
+      return;
+    }
+    if (!(0, _getAttrChangeRanges.isInlineAttrChangeNodeName)(childNode.type.name)) {
+      appendStyleToElement(childElement, contentStyle);
+      return;
+    }
+    var _getAtomicInlineChang = (0, _createInlineChangedDecoration.getAtomicInlineChangedAttrs)(childNode.type.name, colorScheme),
+      className = _getAtomicInlineChang.className,
+      styleSuffix = _getAtomicInlineChang.styleSuffix;
+    // Inline decorations use an outer span so node-specific descendant selectors match.
+    wrapAtomicInlineNode({
+      element: childElement,
+      className: className,
+      style: combineStyles(contentStyle, styleSuffix)
+    });
+  });
+};
+var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref9) {
+  var element = _ref9.element,
+    targetNode = _ref9.targetNode,
+    colorScheme = _ref9.colorScheme,
+    isActive = _ref9.isActive,
+    isInserted = _ref9.isInserted,
+    diffType = _ref9.diffType,
+    _ref9$hideAddedDiffsU = _ref9.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref9$hideAddedDiffsU === void 0 ? false : _ref9$hideAddedDiffsU,
+    _ref9$highlightInline = _ref9.highlightInlineLeafNodes,
+    highlightInlineLeafNodes = _ref9$highlightInline === void 0 ? false : _ref9$highlightInline;
   var currentStyle = element.getAttribute('style') || '';
   var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (nodeSpecificStyle) {
@@ -263,20 +315,28 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref7)
     textNode.replaceWith(contentWrapper);
     contentWrapper.append(textNode);
   });
+  if (highlightInlineLeafNodes && targetNode.type.inlineContent) {
+    applyInlineLeafNodeStyles({
+      element: element,
+      targetNode: targetNode,
+      contentStyle: contentStyle,
+      colorScheme: colorScheme
+    });
+  }
 };
 
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref8) {
-  var nodeView = _ref8.nodeView,
-    targetNode = _ref8.targetNode,
-    colorScheme = _ref8.colorScheme,
-    isActive = _ref8.isActive,
-    isInserted = _ref8.isInserted,
-    diffType = _ref8.diffType,
-    _ref8$hideAddedDiffsU = _ref8.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref8$hideAddedDiffsU === void 0 ? false : _ref8$hideAddedDiffsU;
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref0) {
+  var nodeView = _ref0.nodeView,
+    targetNode = _ref0.targetNode,
+    colorScheme = _ref0.colorScheme,
+    isActive = _ref0.isActive,
+    isInserted = _ref0.isInserted,
+    diffType = _ref0.diffType,
+    _ref0$hideAddedDiffsU = _ref0.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref0$hideAddedDiffsU === void 0 ? false : _ref0$hideAddedDiffsU;
   var contentWrapper = document.createElement('div');
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   var nodeStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline);
@@ -297,14 +357,14 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref8
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref9) {
-  var dom = _ref9.dom,
-    nodeView = _ref9.nodeView,
-    targetNode = _ref9.targetNode,
-    lozenge = _ref9.lozenge,
-    colorScheme = _ref9.colorScheme,
-    _ref9$isActive = _ref9.isActive,
-    isActive = _ref9$isActive === void 0 ? false : _ref9$isActive;
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref1) {
+  var dom = _ref1.dom,
+    nodeView = _ref1.nodeView,
+    targetNode = _ref1.targetNode,
+    lozenge = _ref1.lozenge,
+    colorScheme = _ref1.colorScheme,
+    _ref1$isActive = _ref1.isActive,
+    isActive = _ref1$isActive === void 0 ? false : _ref1$isActive;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -340,14 +400,14 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref9) {
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref0) {
-  var dom = _ref0.dom,
-    nodeView = _ref0.nodeView,
-    targetNode = _ref0.targetNode,
-    lozenge = _ref0.lozenge,
-    colorScheme = _ref0.colorScheme,
-    _ref0$isActive = _ref0.isActive,
-    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive;
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref10) {
+  var dom = _ref10.dom,
+    nodeView = _ref10.nodeView,
+    targetNode = _ref10.targetNode,
+    lozenge = _ref10.lozenge,
+    colorScheme = _ref10.colorScheme,
+    _ref10$isActive = _ref10.isActive,
+    isActive = _ref10$isActive === void 0 ? false : _ref10$isActive;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -380,19 +440,19 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref0)
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var wrapBlockNode = function wrapBlockNode(_ref1) {
-  var dom = _ref1.dom,
-    nodeView = _ref1.nodeView,
-    targetNode = _ref1.targetNode,
-    colorScheme = _ref1.colorScheme,
-    intl = _ref1.intl,
-    _ref1$isActive = _ref1.isActive,
-    isActive = _ref1$isActive === void 0 ? false : _ref1$isActive,
-    _ref1$isInserted = _ref1.isInserted,
-    isInserted = _ref1$isInserted === void 0 ? false : _ref1$isInserted,
-    diffType = _ref1.diffType,
-    _ref1$hideAddedDiffsU = _ref1.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref1$hideAddedDiffsU === void 0 ? false : _ref1$hideAddedDiffsU;
+var wrapBlockNode = function wrapBlockNode(_ref11) {
+  var dom = _ref11.dom,
+    nodeView = _ref11.nodeView,
+    targetNode = _ref11.targetNode,
+    colorScheme = _ref11.colorScheme,
+    intl = _ref11.intl,
+    _ref11$isActive = _ref11.isActive,
+    isActive = _ref11$isActive === void 0 ? false : _ref11$isActive,
+    _ref11$isInserted = _ref11.isInserted,
+    isInserted = _ref11$isInserted === void 0 ? false : _ref11$isInserted,
+    diffType = _ref11.diffType,
+    _ref11$hideAddedDiffs = _ref11.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref11$hideAddedDiffs === void 0 ? false : _ref11$hideAddedDiffs;
   var blockWrapper = createBlockNodeWrapper();
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   if (shouldShowRemovedLozenge(targetNodeName) && (!(0, _isExtendedEnabled.isExtendedEnabled)(diffType) || !isInserted)) {
@@ -445,19 +505,21 @@ var wrapBlockNode = function wrapBlockNode(_ref1) {
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_ref10) {
-  var dom = _ref10.dom,
-    nodeView = _ref10.nodeView,
-    targetNode = _ref10.targetNode,
-    colorScheme = _ref10.colorScheme,
-    intl = _ref10.intl,
-    _ref10$isActive = _ref10.isActive,
-    isActive = _ref10$isActive === void 0 ? false : _ref10$isActive,
-    _ref10$isInserted = _ref10.isInserted,
-    isInserted = _ref10$isInserted === void 0 ? false : _ref10$isInserted,
-    diffType = _ref10.diffType,
-    _ref10$hideAddedDiffs = _ref10.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref10$hideAddedDiffs === void 0 ? false : _ref10$hideAddedDiffs;
+var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_ref12) {
+  var dom = _ref12.dom,
+    nodeView = _ref12.nodeView,
+    targetNode = _ref12.targetNode,
+    colorScheme = _ref12.colorScheme,
+    intl = _ref12.intl,
+    _ref12$isActive = _ref12.isActive,
+    isActive = _ref12$isActive === void 0 ? false : _ref12$isActive,
+    _ref12$isInserted = _ref12.isInserted,
+    isInserted = _ref12$isInserted === void 0 ? false : _ref12$isInserted,
+    diffType = _ref12.diffType,
+    _ref12$hideAddedDiffs = _ref12.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref12$hideAddedDiffs === void 0 ? false : _ref12$hideAddedDiffs,
+    _ref12$highlightInlin = _ref12.highlightInlineLeafNodes,
+    highlightInlineLeafNodes = _ref12$highlightInlin === void 0 ? false : _ref12$highlightInlin;
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (nodeView instanceof HTMLElement) {
       if (isInserted && (0, _wrapBlockNodeViewStyles.isMultiContainerBlockNode)(targetNode.type.name)) {
@@ -481,7 +543,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
           isActive: isActive,
           isInserted: isInserted,
           diffType: diffType,
-          hideAddedDiffsUnderline: hideAddedDiffsUnderline
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+          highlightInlineLeafNodes: highlightInlineLeafNodes
         });
         dom.append(nodeView);
         return;
@@ -546,12 +609,12 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
  * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
  * the wrapper needs to be injected inside the node around the child content.
  */
-var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrapper(_ref11) {
-  var node = _ref11.node,
-    colorScheme = _ref11.colorScheme,
-    isActive = _ref11.isActive,
-    isInserted = _ref11.isInserted,
-    diffType = _ref11.diffType;
+var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrapper(_ref13) {
+  var node = _ref13.node,
+    colorScheme = _ref13.colorScheme,
+    isActive = _ref13.isActive,
+    isInserted = _ref13.isInserted,
+    diffType = _ref13.diffType;
   var wrapper = document.createElement('span');
   wrapper.setAttribute('style', isInserted ? (0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive) : (0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType));
   (0, _toConsumableArray2.default)(node.childNodes).forEach(function (child) {

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

@@ -82,6 +82,7 @@ const resolveAtomicInlineAttrs = (inlineNodeName, colorScheme, colors) => isExpe
   className: getAtomicInlineNodeClassNameLegacy(inlineNodeName, getLegacyColorScheme(colorScheme)),
   styleSuffix: ''
 };
+export const getAtomicInlineChangedAttrs = (inlineNodeName, colorScheme) => resolveAtomicInlineAttrs(inlineNodeName, colorScheme, getColorScheme(colorScheme));
 
 /**
  * Inline decoration used for insertions as the content already exists in the document

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

@@ -1,4 +1,5 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
@@ -197,6 +198,11 @@ export const createNodeChangedDecorationWidget = ({
   }
   const diffId = crypto.randomUUID();
   const decorations = [];
+  const replacementNode = newDoc.nodeAt(change.fromB);
+  const firstReplacedNode = slice.content.firstChild;
+  const lastReplacedNode = slice.content.lastChild;
+  const showDiffPatch1 = fg('platform_editor_ai_show_diff_patch_1');
+  const isCompleteSameTypeReplacement = slice.content.childCount === 1 && firstReplacedNode !== null && replacementNode !== null && firstReplacedNode.type === replacementNode.type && replacementNode.nodeSize === change.toB - change.fromB;
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -204,9 +210,14 @@ export const createNodeChangedDecorationWidget = ({
    * or sliced End depth is and match only the entire node.
    */
   slice.content.forEach(node => {
+    const isFirst = firstReplacedNode === node;
+    const isLast = lastReplacedNode === node;
+    const isOpenAtSliceBoundary = isFirst && slice.openStart > 0 || isLast && slice.openEnd > 0;
+    const shouldPreserveCompleteMultiInlineBlock = showDiffPatch1 && node.isBlock && node.type.inlineContent && node.content.childCount > 1 && !isOpenAtSliceBoundary && isCompleteSameTypeReplacement;
+
     // Helper function to handle multiple child nodes
     const handleMultipleChildNodes = node => {
-      if (node.content.childCount > 1 && node.type.inlineContent) {
+      if (!shouldPreserveCompleteMultiInlineBlock && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(childNode => {
           const childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
@@ -231,14 +242,14 @@ export const createNodeChangedDecorationWidget = ({
     };
 
     // Determine which node to use and how to serialize
-    const isFirst = slice.content.firstChild === node;
-    const isLast = slice.content.lastChild === node;
     const hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
     let fallbackSerialization;
     if (handleMultipleChildNodes(node)) {
       return;
     }
-    if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
+    if (shouldPreserveCompleteMultiInlineBlock) {
+      fallbackSerialization = () => serializer.serializeNode(node);
+    } else if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
       fallbackSerialization = () => serializer.serializeFragment(node.content);
     } else if (isLast && slice.content.childCount === 2) {
       fallbackSerialization = () => {
@@ -274,7 +285,8 @@ export const createNodeChangedDecorationWidget = ({
           isActive,
           isInserted,
           diffType,
-          hideAddedDiffsUnderline
+          hideAddedDiffsUnderline,
+          highlightInlineLeafNodes: shouldPreserveCompleteMultiInlineBlock
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {

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

@@ -25,7 +25,7 @@ const inlineNodeAttrMap = {
   mention: mentionAttrs,
   status: statusAttrs
 };
-const isInlineAttrChangeNodeName = nodeName => nodeName in inlineNodeAttrMap;
+export const isInlineAttrChangeNodeName = nodeName => nodeName in inlineNodeAttrMap;
 
 // Extension node type names. Their "any attr except localId" exclude rule lives
 // in the shared `diffableAttrs` map and is applied via `isDiffableAttr` below.

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

@@ -4,7 +4,9 @@ import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-uti
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
+import { getAtomicInlineChangedAttrs } from '../createInlineChangedDecoration';
 import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
+import { isInlineAttrChangeNodeName } from './getAttrChangeRanges';
 import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveDeletedNodeCSSVariables, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
 const shouldShowRemovedLozenge = nodeName => {
   switch (nodeName) {
@@ -222,6 +224,57 @@ const applyMultiContainerLikeStyles = ({
   }
   element.setAttribute('style', `${currentStyle};${nodeSpecificStyle}`);
 };
+const combineStyles = (currentStyle, appendedStyle) => {
+  const separator = currentStyle && appendedStyle && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';
+  return `${currentStyle}${separator}${appendedStyle}`;
+};
+const appendStyleToElement = (element, style) => {
+  const currentStyle = element.getAttribute('style') || '';
+  element.setAttribute('style', combineStyles(currentStyle, style));
+};
+const wrapAtomicInlineNode = ({
+  element,
+  className,
+  style
+}) => {
+  const wrapper = document.createElement('span');
+  wrapper.className = className;
+  wrapper.setAttribute('style', style);
+  element.replaceWith(wrapper);
+  wrapper.append(element);
+};
+const applyInlineLeafNodeStyles = ({
+  element,
+  targetNode,
+  contentStyle,
+  colorScheme
+}) => {
+  // NodeViewSerializer appends one DOM node per direct ProseMirror child, preserving order.
+  const childDomNodes = [...element.childNodes];
+  targetNode.content.forEach((childNode, _offset, index) => {
+    if (childNode.isText || !childNode.isLeaf) {
+      return;
+    }
+    const childElement = childDomNodes[index];
+    if (!(childElement instanceof HTMLElement)) {
+      return;
+    }
+    if (!isInlineAttrChangeNodeName(childNode.type.name)) {
+      appendStyleToElement(childElement, contentStyle);
+      return;
+    }
+    const {
+      className,
+      styleSuffix
+    } = getAtomicInlineChangedAttrs(childNode.type.name, colorScheme);
+    // Inline decorations use an outer span so node-specific descendant selectors match.
+    wrapAtomicInlineNode({
+      element: childElement,
+      className,
+      style: combineStyles(contentStyle, styleSuffix)
+    });
+  });
+};
 const applyTextLikeBlockNodeStyles = ({
   element,
   targetNode,
@@ -229,7 +282,8 @@ const applyTextLikeBlockNodeStyles = ({
   isActive,
   isInserted,
   diffType,
-  hideAddedDiffsUnderline = false
+  hideAddedDiffsUnderline = false,
+  highlightInlineLeafNodes = false
 }) => {
   const currentStyle = element.getAttribute('style') || '';
   const nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
@@ -252,6 +306,14 @@ const applyTextLikeBlockNodeStyles = ({
     textNode.replaceWith(contentWrapper);
     contentWrapper.append(textNode);
   });
+  if (highlightInlineLeafNodes && targetNode.type.inlineContent) {
+    applyInlineLeafNodeStyles({
+      element,
+      targetNode,
+      contentStyle,
+      colorScheme
+    });
+  }
 };
 
 /**
@@ -441,7 +503,8 @@ export const wrapBlockNodeView = ({
   isActive = false,
   isInserted = false,
   diffType,
-  hideAddedDiffsUnderline = false
+  hideAddedDiffsUnderline = false,
+  highlightInlineLeafNodes = false
 }) => {
   if (isExtendedEnabled(diffType)) {
     if (nodeView instanceof HTMLElement) {
@@ -466,7 +529,8 @@ export const wrapBlockNodeView = ({
           isActive,
           isInserted,
           diffType,
-          hideAddedDiffsUnderline
+          hideAddedDiffsUnderline,
+          highlightInlineLeafNodes
         });
         dom.append(nodeView);
         return;

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

@@ -90,6 +90,9 @@ var resolveAtomicInlineAttrs = function resolveAtomicInlineAttrs(inlineNodeName,
     styleSuffix: ''
   };
 };
+export var getAtomicInlineChangedAttrs = function getAtomicInlineChangedAttrs(inlineNodeName, colorScheme) {
+  return resolveAtomicInlineAttrs(inlineNodeName, colorScheme, getColorScheme(colorScheme));
+};
 
 /**
  * Inline decoration used for insertions as the content already exists in the document

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { createLeftAnchorWidget } from './createAnchorDecorationWidgets';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
@@ -205,6 +206,11 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   }
   var diffId = crypto.randomUUID();
   var decorations = [];
+  var replacementNode = newDoc.nodeAt(change.fromB);
+  var firstReplacedNode = slice.content.firstChild;
+  var lastReplacedNode = slice.content.lastChild;
+  var showDiffPatch1 = fg('platform_editor_ai_show_diff_patch_1');
+  var isCompleteSameTypeReplacement = slice.content.childCount === 1 && firstReplacedNode !== null && replacementNode !== null && firstReplacedNode.type === replacementNode.type && replacementNode.nodeSize === change.toB - change.fromB;
 
   /*
    * The thinking is we separate out the fragment we got from doc.slice
@@ -212,9 +218,14 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
    * or sliced End depth is and match only the entire node.
    */
   slice.content.forEach(function (node) {
+    var isFirst = firstReplacedNode === node;
+    var isLast = lastReplacedNode === node;
+    var isOpenAtSliceBoundary = isFirst && slice.openStart > 0 || isLast && slice.openEnd > 0;
+    var shouldPreserveCompleteMultiInlineBlock = showDiffPatch1 && node.isBlock && node.type.inlineContent && node.content.childCount > 1 && !isOpenAtSliceBoundary && isCompleteSameTypeReplacement;
+
     // Helper function to handle multiple child nodes
     var handleMultipleChildNodes = function handleMultipleChildNodes(node) {
-      if (node.content.childCount > 1 && node.type.inlineContent) {
+      if (!shouldPreserveCompleteMultiInlineBlock && node.content.childCount > 1 && node.type.inlineContent) {
         node.content.forEach(function (childNode) {
           var childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
@@ -239,14 +250,16 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     };
 
     // Determine which node to use and how to serialize
-    var isFirst = slice.content.firstChild === node;
-    var isLast = slice.content.lastChild === node;
     var hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
     var fallbackSerialization;
     if (handleMultipleChildNodes(node)) {
       return;
     }
-    if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
+    if (shouldPreserveCompleteMultiInlineBlock) {
+      fallbackSerialization = function fallbackSerialization() {
+        return serializer.serializeNode(node);
+      };
+    } else if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
       fallbackSerialization = function fallbackSerialization() {
         return serializer.serializeFragment(node.content);
       };
@@ -286,7 +299,8 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
           isActive: isActive,
           isInserted: isInserted,
           diffType: diffType,
-          hideAddedDiffsUnderline: hideAddedDiffsUnderline
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+          highlightInlineLeafNodes: shouldPreserveCompleteMultiInlineBlock
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {

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

@@ -30,7 +30,7 @@ var inlineNodeAttrMap = {
   mention: mentionAttrs,
   status: statusAttrs
 };
-var isInlineAttrChangeNodeName = function isInlineAttrChangeNodeName(nodeName) {
+export var isInlineAttrChangeNodeName = function isInlineAttrChangeNodeName(nodeName) {
   return nodeName in inlineNodeAttrMap;
 };
 

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

@@ -5,7 +5,9 @@ import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-uti
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
+import { getAtomicInlineChangedAttrs } from '../createInlineChangedDecoration';
 import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
+import { isInlineAttrChangeNodeName } from './getAttrChangeRanges';
 import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveDeletedNodeCSSVariables, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
 var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
   switch (nodeName) {
@@ -226,15 +228,65 @@ var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref6
   }
   element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
 };
-var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref7) {
+var combineStyles = function combineStyles(currentStyle, appendedStyle) {
+  var separator = currentStyle && appendedStyle && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';
+  return "".concat(currentStyle).concat(separator).concat(appendedStyle);
+};
+var appendStyleToElement = function appendStyleToElement(element, style) {
+  var currentStyle = element.getAttribute('style') || '';
+  element.setAttribute('style', combineStyles(currentStyle, style));
+};
+var wrapAtomicInlineNode = function wrapAtomicInlineNode(_ref7) {
   var element = _ref7.element,
-    targetNode = _ref7.targetNode,
-    colorScheme = _ref7.colorScheme,
-    isActive = _ref7.isActive,
-    isInserted = _ref7.isInserted,
-    diffType = _ref7.diffType,
-    _ref7$hideAddedDiffsU = _ref7.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref7$hideAddedDiffsU === void 0 ? false : _ref7$hideAddedDiffsU;
+    className = _ref7.className,
+    style = _ref7.style;
+  var wrapper = document.createElement('span');
+  wrapper.className = className;
+  wrapper.setAttribute('style', style);
+  element.replaceWith(wrapper);
+  wrapper.append(element);
+};
+var applyInlineLeafNodeStyles = function applyInlineLeafNodeStyles(_ref8) {
+  var element = _ref8.element,
+    targetNode = _ref8.targetNode,
+    contentStyle = _ref8.contentStyle,
+    colorScheme = _ref8.colorScheme;
+  // NodeViewSerializer appends one DOM node per direct ProseMirror child, preserving order.
+  var childDomNodes = _toConsumableArray(element.childNodes);
+  targetNode.content.forEach(function (childNode, _offset, index) {
+    if (childNode.isText || !childNode.isLeaf) {
+      return;
+    }
+    var childElement = childDomNodes[index];
+    if (!(childElement instanceof HTMLElement)) {
+      return;
+    }
+    if (!isInlineAttrChangeNodeName(childNode.type.name)) {
+      appendStyleToElement(childElement, contentStyle);
+      return;
+    }
+    var _getAtomicInlineChang = getAtomicInlineChangedAttrs(childNode.type.name, colorScheme),
+      className = _getAtomicInlineChang.className,
+      styleSuffix = _getAtomicInlineChang.styleSuffix;
+    // Inline decorations use an outer span so node-specific descendant selectors match.
+    wrapAtomicInlineNode({
+      element: childElement,
+      className: className,
+      style: combineStyles(contentStyle, styleSuffix)
+    });
+  });
+};
+var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref9) {
+  var element = _ref9.element,
+    targetNode = _ref9.targetNode,
+    colorScheme = _ref9.colorScheme,
+    isActive = _ref9.isActive,
+    isInserted = _ref9.isInserted,
+    diffType = _ref9.diffType,
+    _ref9$hideAddedDiffsU = _ref9.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref9$hideAddedDiffsU === void 0 ? false : _ref9$hideAddedDiffsU,
+    _ref9$highlightInline = _ref9.highlightInlineLeafNodes,
+    highlightInlineLeafNodes = _ref9$highlightInline === void 0 ? false : _ref9$highlightInline;
   var currentStyle = element.getAttribute('style') || '';
   var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (nodeSpecificStyle) {
@@ -256,20 +308,28 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref7)
     textNode.replaceWith(contentWrapper);
     contentWrapper.append(textNode);
   });
+  if (highlightInlineLeafNodes && targetNode.type.inlineContent) {
+    applyInlineLeafNodeStyles({
+      element: element,
+      targetNode: targetNode,
+      contentStyle: contentStyle,
+      colorScheme: colorScheme
+    });
+  }
 };
 
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref8) {
-  var nodeView = _ref8.nodeView,
-    targetNode = _ref8.targetNode,
-    colorScheme = _ref8.colorScheme,
-    isActive = _ref8.isActive,
-    isInserted = _ref8.isInserted,
-    diffType = _ref8.diffType,
-    _ref8$hideAddedDiffsU = _ref8.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref8$hideAddedDiffsU === void 0 ? false : _ref8$hideAddedDiffsU;
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref0) {
+  var nodeView = _ref0.nodeView,
+    targetNode = _ref0.targetNode,
+    colorScheme = _ref0.colorScheme,
+    isActive = _ref0.isActive,
+    isInserted = _ref0.isInserted,
+    diffType = _ref0.diffType,
+    _ref0$hideAddedDiffsU = _ref0.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref0$hideAddedDiffsU === void 0 ? false : _ref0$hideAddedDiffsU;
   var contentWrapper = document.createElement('div');
   var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
   var nodeStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline);
@@ -290,14 +350,14 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref8
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref9) {
-  var dom = _ref9.dom,
-    nodeView = _ref9.nodeView,
-    targetNode = _ref9.targetNode,
-    lozenge = _ref9.lozenge,
-    colorScheme = _ref9.colorScheme,
-    _ref9$isActive = _ref9.isActive,
-    isActive = _ref9$isActive === void 0 ? false : _ref9$isActive;
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref1) {
+  var dom = _ref1.dom,
+    nodeView = _ref1.nodeView,
+    targetNode = _ref1.targetNode,
+    lozenge = _ref1.lozenge,
+    colorScheme = _ref1.colorScheme,
+    _ref1$isActive = _ref1.isActive,
+    isActive = _ref1$isActive === void 0 ? false : _ref1$isActive;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -333,14 +393,14 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref9) {
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref0) {
-  var dom = _ref0.dom,
-    nodeView = _ref0.nodeView,
-    targetNode = _ref0.targetNode,
-    lozenge = _ref0.lozenge,
-    colorScheme = _ref0.colorScheme,
-    _ref0$isActive = _ref0.isActive,
-    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive;
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref10) {
+  var dom = _ref10.dom,
+    nodeView = _ref10.nodeView,
+    targetNode = _ref10.targetNode,
+    lozenge = _ref10.lozenge,
+    colorScheme = _ref10.colorScheme,
+    _ref10$isActive = _ref10.isActive,
+    isActive = _ref10$isActive === void 0 ? false : _ref10$isActive;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -373,19 +433,19 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref0)
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var wrapBlockNode = function wrapBlockNode(_ref1) {
-  var dom = _ref1.dom,
-    nodeView = _ref1.nodeView,
-    targetNode = _ref1.targetNode,
-    colorScheme = _ref1.colorScheme,
-    intl = _ref1.intl,
-    _ref1$isActive = _ref1.isActive,
-    isActive = _ref1$isActive === void 0 ? false : _ref1$isActive,
-    _ref1$isInserted = _ref1.isInserted,
-    isInserted = _ref1$isInserted === void 0 ? false : _ref1$isInserted,
-    diffType = _ref1.diffType,
-    _ref1$hideAddedDiffsU = _ref1.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref1$hideAddedDiffsU === void 0 ? false : _ref1$hideAddedDiffsU;
+var wrapBlockNode = function wrapBlockNode(_ref11) {
+  var dom = _ref11.dom,
+    nodeView = _ref11.nodeView,
+    targetNode = _ref11.targetNode,
+    colorScheme = _ref11.colorScheme,
+    intl = _ref11.intl,
+    _ref11$isActive = _ref11.isActive,
+    isActive = _ref11$isActive === void 0 ? false : _ref11$isActive,
+    _ref11$isInserted = _ref11.isInserted,
+    isInserted = _ref11$isInserted === void 0 ? false : _ref11$isInserted,
+    diffType = _ref11.diffType,
+    _ref11$hideAddedDiffs = _ref11.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref11$hideAddedDiffs === void 0 ? false : _ref11$hideAddedDiffs;
   var blockWrapper = createBlockNodeWrapper();
   var targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
   if (shouldShowRemovedLozenge(targetNodeName) && (!isExtendedEnabled(diffType) || !isInserted)) {
@@ -438,19 +498,21 @@ var wrapBlockNode = function wrapBlockNode(_ref1) {
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export var wrapBlockNodeView = function wrapBlockNodeView(_ref10) {
-  var dom = _ref10.dom,
-    nodeView = _ref10.nodeView,
-    targetNode = _ref10.targetNode,
-    colorScheme = _ref10.colorScheme,
-    intl = _ref10.intl,
-    _ref10$isActive = _ref10.isActive,
-    isActive = _ref10$isActive === void 0 ? false : _ref10$isActive,
-    _ref10$isInserted = _ref10.isInserted,
-    isInserted = _ref10$isInserted === void 0 ? false : _ref10$isInserted,
-    diffType = _ref10.diffType,
-    _ref10$hideAddedDiffs = _ref10.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref10$hideAddedDiffs === void 0 ? false : _ref10$hideAddedDiffs;
+export var wrapBlockNodeView = function wrapBlockNodeView(_ref12) {
+  var dom = _ref12.dom,
+    nodeView = _ref12.nodeView,
+    targetNode = _ref12.targetNode,
+    colorScheme = _ref12.colorScheme,
+    intl = _ref12.intl,
+    _ref12$isActive = _ref12.isActive,
+    isActive = _ref12$isActive === void 0 ? false : _ref12$isActive,
+    _ref12$isInserted = _ref12.isInserted,
+    isInserted = _ref12$isInserted === void 0 ? false : _ref12$isInserted,
+    diffType = _ref12.diffType,
+    _ref12$hideAddedDiffs = _ref12.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref12$hideAddedDiffs === void 0 ? false : _ref12$hideAddedDiffs,
+    _ref12$highlightInlin = _ref12.highlightInlineLeafNodes,
+    highlightInlineLeafNodes = _ref12$highlightInlin === void 0 ? false : _ref12$highlightInlin;
   if (isExtendedEnabled(diffType)) {
     if (nodeView instanceof HTMLElement) {
       if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
@@ -474,7 +536,8 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref10) {
           isActive: isActive,
           isInserted: isInserted,
           diffType: diffType,
-          hideAddedDiffsUnderline: hideAddedDiffsUnderline
+          hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+          highlightInlineLeafNodes: highlightInlineLeafNodes
         });
         dom.append(nodeView);
         return;
@@ -539,12 +602,12 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref10) {
  * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
  * the wrapper needs to be injected inside the node around the child content.
  */
-export var injectInnerWrapper = function injectInnerWrapper(_ref11) {
-  var node = _ref11.node,
-    colorScheme = _ref11.colorScheme,
-    isActive = _ref11.isActive,
-    isInserted = _ref11.isInserted,
-    diffType = _ref11.diffType;
+export var injectInnerWrapper = function injectInnerWrapper(_ref13) {
+  var node = _ref13.node,
+    colorScheme = _ref13.colorScheme,
+    isActive = _ref13.isActive,
+    isInserted = _ref13.isInserted,
+    diffType = _ref13.diffType;
   var wrapper = document.createElement('span');
   wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive, diffType));
   _toConsumableArray(node.childNodes).forEach(function (child) {

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

@@ -3,6 +3,10 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { DiffType } from '../../showDiffPluginType';
 import type { ColorScheme } from './colorSchemes/types';
 import type { InlineAttrChangeNodeName } from './utils/getAttrChangeRanges';
+export declare const getAtomicInlineChangedAttrs: (inlineNodeName: InlineAttrChangeNodeName, colorScheme: ColorScheme | undefined) => {
+    className: string;
+    styleSuffix: string;
+};
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *

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

@@ -26,6 +26,7 @@ type StepRange = {
     toA?: number;
     toB: number;
 };
+export declare const isInlineAttrChangeNodeName: (nodeName: string) => nodeName is InlineAttrChangeNodeName;
 export declare const getAttrChangeRanges: (doc: PMNode, attrStepContexts: AttrStepContext[], originalDoc: PMNode) => StepRange[];
 /**
  * Check if the step was a valid attr change and affected the doc

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

@@ -7,11 +7,12 @@ import type { ColorScheme } from '../colorSchemes/types';
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorScheme, intl, isActive, isInserted, diffType, hideAddedDiffsUnderline, }: {
+export declare const wrapBlockNodeView: ({ dom, nodeView, targetNode, colorScheme, intl, isActive, isInserted, diffType, hideAddedDiffsUnderline, highlightInlineLeafNodes, }: {
     colorScheme?: ColorScheme;
     diffType?: DiffType;
     dom: HTMLElement;
     hideAddedDiffsUnderline?: boolean;
+    highlightInlineLeafNodes?: boolean;
     intl: IntlShape;
     isActive?: boolean;
     isInserted: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "14.2.1",
+	"version": "14.2.2",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -59,7 +59,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.3.0",
+		"@atlaskit/editor-common": "^120.4.0",
 		"react": "^18.2.0 || ^19.2.0"
 	},
 	"techstack": {
@@ -99,6 +99,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_editor_ai_show_diff_patch_1": {
+			"type": "boolean"
+		},
 		"platform_editor_ai_smart_diff": {
 			"type": "boolean"
 		},