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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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

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/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/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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "21.0.2",
+	"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"