@atlaskit/editor-plugin-show-diff 6.4.0 → 6.4.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 6.4.1
+
+### Patch Changes
+
+- [`d1d3089a12aff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d1d3089a12aff) -
+  EDITOR-6431: Improve diff styles to support text-like diffs better when inverted.
+- Updated dependencies
+
 ## 6.4.0
 
 ### Minor Changes

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

@@ -44,7 +44,8 @@ var getChanges = function getChanges(_ref) {
     if (diffType === 'block') {
       return (0, _groupChangesByBlock.groupChangesByBlock)(changeset.changes, originalDoc, steppedDoc);
     }
-    return (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
+    var _changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
+    return (0, _optimizeChanges.optimizeChanges)(_changes);
   }
   var changes = (0, _prosemirrorChangeset.simplifyChanges)(changeset.changes, tr.doc);
   return (0, _optimizeChanges.optimizeChanges)(changes);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.editingContentStyleInBlock = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
@@ -12,6 +12,12 @@ var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)(
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
+var editingContentStyleInBlock = exports.editingContentStyleInBlock = (0, _lazyNodeView.convertToInlineCss)({
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
+});
 var editingStyleActive = exports.editingStyleActive = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
   textDecoration: 'underline',

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createNodeChangedDecorationWidget = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
@@ -15,6 +16,8 @@ var _traditional = require("./colorSchemes/traditional");
 var _createChangedRowDecorationWidgets = require("./createChangedRowDecorationWidgets");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
 var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (colorScheme === 'traditional' && isActive) {
@@ -262,8 +265,10 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
   var decorations = [];
-  decorations.push(_view.Decoration.widget(safeInsertPos, dom, {
+  decorations.push(_view.Decoration.widget(safeInsertPos, dom, _objectSpread({
     key: "diff-widget-".concat(isActive ? 'active' : 'inactive')
-  }));
+  }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+    side: -1
+  })));
   return decorations;
 };

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

@@ -80,7 +80,10 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
   var isActive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var isTraditional = colorScheme === 'traditional';
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
-    if (shouldApplyStylesDirectly(nodeName)) {
+    if (isMultiContainerBlockNode(nodeName)) {
+      return _standard.editingContentStyleInBlock;
+    }
+    if (isTextLikeBlockNode(nodeName)) {
       return undefined;
     }
     if (isTraditional) {
@@ -161,6 +164,12 @@ var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_re
 var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
   return nodeName === 'heading';
 };
+var isMultiContainerBlockNode = function isMultiContainerBlockNode(nodeName) {
+  return ['decisionList', 'layoutSection'].includes(nodeName);
+};
+var isTextLikeBlockNode = function isTextLikeBlockNode(nodeName) {
+  return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
+};
 var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
   var element = _ref2.element,
     colorScheme = _ref2.colorScheme,
@@ -228,16 +237,66 @@ var applyStylesToElement = function applyStylesToElement(_ref3) {
   var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
-
-/**
- * Creates a content wrapper with deleted styles for a block node
- */
-var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref4) {
-  var nodeView = _ref4.nodeView,
+var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4) {
+  var element = _ref4.element,
     targetNode = _ref4.targetNode,
     colorScheme = _ref4.colorScheme,
     isActive = _ref4.isActive,
     isInserted = _ref4.isInserted;
+  var currentStyle = element.getAttribute('style') || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
+  if (targetNode.type.name === 'decisionList') {
+    element.querySelectorAll('li').forEach(function (listItem) {
+      var currentListItemStyle = listItem.getAttribute('style') || '';
+      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(_standard.editingStyleNode));
+    });
+  } else if (targetNode.type.name === 'layoutSection') {
+    element.querySelectorAll('[data-layout-column="true"]').forEach(function (section) {
+      var currentSectionStyle = section.getAttribute('style') || '';
+      section.setAttribute('style', "".concat(currentSectionStyle).concat(_standard.editingStyleNode));
+    });
+  } else if (targetNode.type.name === 'taskList') {
+    element.querySelectorAll('li').forEach(function (listItem) {
+      var currentListItemStyle = listItem.getAttribute('style') || '';
+      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(_standard.editingStyleNode));
+    });
+  }
+  element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
+};
+var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5) {
+  var element = _ref5.element,
+    targetNode = _ref5.targetNode,
+    colorScheme = _ref5.colorScheme,
+    isActive = _ref5.isActive,
+    isInserted = _ref5.isInserted;
+  getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
+  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+  var textNodesToWrap = [];
+  var currentNode = walker.nextNode();
+  while (currentNode) {
+    if (currentNode instanceof Text && currentNode.textContent !== '' && currentNode.parentElement) {
+      textNodesToWrap.push(currentNode);
+    }
+    currentNode = walker.nextNode();
+  }
+  textNodesToWrap.forEach(function (textNode) {
+    var contentWrapper = document.createElement('span');
+    contentWrapper.setAttribute('style', contentStyle);
+    textNode.replaceWith(contentWrapper);
+    contentWrapper.append(textNode);
+  });
+};
+
+/**
+ * Creates a content wrapper with deleted styles for a block node
+ */
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6) {
+  var nodeView = _ref6.nodeView,
+    targetNode = _ref6.targetNode,
+    colorScheme = _ref6.colorScheme,
+    isActive = _ref6.isActive,
+    isInserted = _ref6.isInserted;
   var contentWrapper = document.createElement('div');
   var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive);
   contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, isActive, isInserted)).concat(nodeStyle || ''));
@@ -251,14 +310,14 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref4
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref5) {
-  var dom = _ref5.dom,
-    nodeView = _ref5.nodeView,
-    targetNode = _ref5.targetNode,
-    lozenge = _ref5.lozenge,
-    colorScheme = _ref5.colorScheme,
-    _ref5$isActive = _ref5.isActive,
-    isActive = _ref5$isActive === void 0 ? false : _ref5$isActive;
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref7) {
+  var dom = _ref7.dom,
+    nodeView = _ref7.nodeView,
+    targetNode = _ref7.targetNode,
+    lozenge = _ref7.lozenge,
+    colorScheme = _ref7.colorScheme,
+    _ref7$isActive = _ref7.isActive,
+    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -299,14 +358,14 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref5) {
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref6) {
-  var dom = _ref6.dom,
-    nodeView = _ref6.nodeView,
-    targetNode = _ref6.targetNode,
-    lozenge = _ref6.lozenge,
-    colorScheme = _ref6.colorScheme,
-    _ref6$isActive = _ref6.isActive,
-    isActive = _ref6$isActive === void 0 ? false : _ref6$isActive;
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref8) {
+  var dom = _ref8.dom,
+    nodeView = _ref8.nodeView,
+    targetNode = _ref8.targetNode,
+    lozenge = _ref8.lozenge,
+    colorScheme = _ref8.colorScheme,
+    _ref8$isActive = _ref8.isActive,
+    isActive = _ref8$isActive === void 0 ? false : _ref8$isActive;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -344,16 +403,16 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref6)
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var wrapBlockNode = function wrapBlockNode(_ref7) {
-  var dom = _ref7.dom,
-    nodeView = _ref7.nodeView,
-    targetNode = _ref7.targetNode,
-    colorScheme = _ref7.colorScheme,
-    intl = _ref7.intl,
-    _ref7$isActive = _ref7.isActive,
-    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive,
-    _ref7$isInserted = _ref7.isInserted,
-    isInserted = _ref7$isInserted === void 0 ? false : _ref7$isInserted;
+var wrapBlockNode = function wrapBlockNode(_ref9) {
+  var dom = _ref9.dom,
+    nodeView = _ref9.nodeView,
+    targetNode = _ref9.targetNode,
+    colorScheme = _ref9.colorScheme,
+    intl = _ref9.intl,
+    _ref9$isActive = _ref9.isActive,
+    isActive = _ref9$isActive === void 0 ? false : _ref9$isActive,
+    _ref9$isInserted = _ref9.isInserted,
+    isInserted = _ref9$isInserted === void 0 ? false : _ref9$isInserted;
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name) && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
     var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
@@ -408,35 +467,50 @@ var wrapBlockNode = function wrapBlockNode(_ref7) {
  * 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(_ref8) {
-  var dom = _ref8.dom,
-    nodeView = _ref8.nodeView,
-    targetNode = _ref8.targetNode,
-    colorScheme = _ref8.colorScheme,
-    intl = _ref8.intl,
-    _ref8$isActive = _ref8.isActive,
-    isActive = _ref8$isActive === void 0 ? false : _ref8$isActive,
-    _ref8$isInserted = _ref8.isInserted,
-    isInserted = _ref8$isInserted === void 0 ? false : _ref8$isInserted;
-  if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
-    // Apply deleted styles directly to preserve natural block-level margins
-    applyStylesToElement({
-      element: nodeView,
-      targetNode: targetNode,
-      colorScheme: colorScheme,
-      isActive: isActive,
-      isInserted: isInserted
-    });
-    dom.append(nodeView);
-  } else if (targetNode.type.name === 'table' && nodeView instanceof HTMLElement && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    applyCellOverlayStyles({
-      element: nodeView,
-      colorScheme: colorScheme,
-      isInserted: isInserted
-    });
-    dom.append(nodeView);
-  } else {
-    // Use wrapper approach for other block nodes
+var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
+  var dom = _ref0.dom,
+    nodeView = _ref0.nodeView,
+    targetNode = _ref0.targetNode,
+    colorScheme = _ref0.colorScheme,
+    intl = _ref0.intl,
+    _ref0$isActive = _ref0.isActive,
+    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive,
+    _ref0$isInserted = _ref0.isInserted,
+    isInserted = _ref0$isInserted === void 0 ? false : _ref0$isInserted;
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (nodeView instanceof HTMLElement) {
+      if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
+        applyMultiContainerLikeStyles({
+          element: nodeView,
+          targetNode: targetNode,
+          colorScheme: colorScheme,
+          isActive: isActive,
+          isInserted: isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+      if (isTextLikeBlockNode(targetNode.type.name)) {
+        applyTextLikeBlockNodeStyles({
+          element: nodeView,
+          targetNode: targetNode,
+          colorScheme: colorScheme,
+          isActive: isActive,
+          isInserted: isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+      if (targetNode.type.name === 'table') {
+        applyCellOverlayStyles({
+          element: nodeView,
+          colorScheme: colorScheme,
+          isInserted: isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+    }
     wrapBlockNode({
       dom: dom,
       nodeView: nodeView,
@@ -446,5 +520,28 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
       isActive: isActive,
       isInserted: isInserted
     });
+    return;
+  } else {
+    if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
+      // Apply deleted styles directly to preserve natural block-level margins
+      applyStylesToElement({
+        element: nodeView,
+        targetNode: targetNode,
+        colorScheme: colorScheme,
+        isActive: isActive,
+        isInserted: isInserted
+      });
+      dom.append(nodeView);
+    } else {
+      wrapBlockNode({
+        dom: dom,
+        nodeView: nodeView,
+        targetNode: targetNode,
+        colorScheme: colorScheme,
+        intl: intl,
+        isActive: isActive,
+        isInserted: isInserted
+      });
+    }
   }
 };

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

@@ -31,7 +31,8 @@ const getChanges = ({
     if (diffType === 'block') {
       return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
     }
-    return simplifyChanges(changeset.changes, tr.doc);
+    const changes = simplifyChanges(changeset.changes, tr.doc);
+    return optimizeChanges(changes);
   }
   const changes = simplifyChanges(changeset.changes, tr.doc);
   return optimizeChanges(changes);

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

@@ -6,6 +6,12 @@ export const editingStyle = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
+export const editingContentStyleInBlock = convertToInlineCss({
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
+});
 export const editingStyleActive = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
   textDecoration: 'underline',

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

@@ -240,7 +240,10 @@ export const createNodeChangedDecorationWidget = ({
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
   const decorations = [];
   decorations.push(Decoration.widget(safeInsertPos, dom, {
-    key: `diff-widget-${isActive ? 'active' : 'inactive'}`
+    key: `diff-widget-${isActive ? 'active' : 'inactive'}`,
+    ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+      side: -1
+    })
   }));
   return decorations;
 };

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

@@ -2,7 +2,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
+import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlock, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
 import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRounded, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 const lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
@@ -70,7 +70,10 @@ const getChangedContentStyle = (colorScheme, isActive = false, isInserted = fals
 const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false, isActive = false) => {
   const isTraditional = colorScheme === 'traditional';
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
-    if (shouldApplyStylesDirectly(nodeName)) {
+    if (isMultiContainerBlockNode(nodeName)) {
+      return editingContentStyleInBlock;
+    }
+    if (isTextLikeBlockNode(nodeName)) {
       return undefined;
     }
     if (isTraditional) {
@@ -151,6 +154,12 @@ const maybeAddDeletedOutlineNewClass = ({
 const shouldApplyStylesDirectly = nodeName => {
   return nodeName === 'heading';
 };
+const isMultiContainerBlockNode = nodeName => {
+  return ['decisionList', 'layoutSection'].includes(nodeName);
+};
+const isTextLikeBlockNode = nodeName => {
+  return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
+};
 const applyCellOverlayStyles = ({
   element,
   colorScheme,
@@ -218,6 +227,58 @@ const applyStylesToElement = ({
   const nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
   element.setAttribute('style', `${currentStyle}${contentStyle}${nodeSpecificStyle}`);
 };
+const applyMultiContainerLikeStyles = ({
+  element,
+  targetNode,
+  colorScheme,
+  isActive,
+  isInserted
+}) => {
+  const currentStyle = element.getAttribute('style') || '';
+  const nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
+  if (targetNode.type.name === 'decisionList') {
+    element.querySelectorAll('li').forEach(listItem => {
+      const currentListItemStyle = listItem.getAttribute('style') || '';
+      listItem.setAttribute('style', `${currentListItemStyle}${editingStyleNode}`);
+    });
+  } else if (targetNode.type.name === 'layoutSection') {
+    element.querySelectorAll('[data-layout-column="true"]').forEach(section => {
+      const currentSectionStyle = section.getAttribute('style') || '';
+      section.setAttribute('style', `${currentSectionStyle}${editingStyleNode}`);
+    });
+  } else if (targetNode.type.name === 'taskList') {
+    element.querySelectorAll('li').forEach(listItem => {
+      const currentListItemStyle = listItem.getAttribute('style') || '';
+      listItem.setAttribute('style', `${currentListItemStyle}${editingStyleNode}`);
+    });
+  }
+  element.setAttribute('style', `${currentStyle};${nodeSpecificStyle}`);
+};
+const applyTextLikeBlockNodeStyles = ({
+  element,
+  targetNode,
+  colorScheme,
+  isActive,
+  isInserted
+}) => {
+  getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
+  const contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+  const textNodesToWrap = [];
+  let currentNode = walker.nextNode();
+  while (currentNode) {
+    if (currentNode instanceof Text && currentNode.textContent !== '' && currentNode.parentElement) {
+      textNodesToWrap.push(currentNode);
+    }
+    currentNode = walker.nextNode();
+  }
+  textNodesToWrap.forEach(textNode => {
+    const contentWrapper = document.createElement('span');
+    contentWrapper.setAttribute('style', contentStyle);
+    textNode.replaceWith(contentWrapper);
+    contentWrapper.append(textNode);
+  });
+};
 
 /**
  * Creates a content wrapper with deleted styles for a block node
@@ -407,25 +468,40 @@ export const wrapBlockNodeView = ({
   isActive = false,
   isInserted = false
 }) => {
-  if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
-    // Apply deleted styles directly to preserve natural block-level margins
-    applyStylesToElement({
-      element: nodeView,
-      targetNode,
-      colorScheme,
-      isActive,
-      isInserted
-    });
-    dom.append(nodeView);
-  } else if (targetNode.type.name === 'table' && nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    applyCellOverlayStyles({
-      element: nodeView,
-      colorScheme,
-      isInserted
-    });
-    dom.append(nodeView);
-  } else {
-    // Use wrapper approach for other block nodes
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (nodeView instanceof HTMLElement) {
+      if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
+        applyMultiContainerLikeStyles({
+          element: nodeView,
+          targetNode,
+          colorScheme,
+          isActive,
+          isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+      if (isTextLikeBlockNode(targetNode.type.name)) {
+        applyTextLikeBlockNodeStyles({
+          element: nodeView,
+          targetNode,
+          colorScheme,
+          isActive,
+          isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+      if (targetNode.type.name === 'table') {
+        applyCellOverlayStyles({
+          element: nodeView,
+          colorScheme,
+          isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+    }
     wrapBlockNode({
       dom,
       nodeView,
@@ -435,5 +511,28 @@ export const wrapBlockNodeView = ({
       isActive,
       isInserted
     });
+    return;
+  } else {
+    if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
+      // Apply deleted styles directly to preserve natural block-level margins
+      applyStylesToElement({
+        element: nodeView,
+        targetNode,
+        colorScheme,
+        isActive,
+        isInserted
+      });
+      dom.append(nodeView);
+    } else {
+      wrapBlockNode({
+        dom,
+        nodeView,
+        targetNode,
+        colorScheme,
+        intl,
+        isActive,
+        isInserted
+      });
+    }
   }
 };

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

@@ -38,7 +38,8 @@ var getChanges = function getChanges(_ref) {
     if (diffType === 'block') {
       return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
     }
-    return simplifyChanges(changeset.changes, tr.doc);
+    var _changes = simplifyChanges(changeset.changes, tr.doc);
+    return optimizeChanges(_changes);
   }
   var changes = simplifyChanges(changeset.changes, tr.doc);
   return optimizeChanges(changes);

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

@@ -6,6 +6,12 @@ export var editingStyle = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
 });
+export var editingContentStyleInBlock = convertToInlineCss({
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
+});
 export var editingStyleActive = convertToInlineCss({
   background: "var(--ds-background-accent-purple-subtler-pressed, #D8A0F7)",
   textDecoration: 'underline',

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

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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 { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -255,8 +258,10 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
   });
   dom.setAttribute('data-testid', 'show-diff-deleted-decoration');
   var decorations = [];
-  decorations.push(Decoration.widget(safeInsertPos, dom, {
+  decorations.push(Decoration.widget(safeInsertPos, dom, _objectSpread({
     key: "diff-widget-".concat(isActive ? 'active' : 'inactive')
-  }));
+  }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+    side: -1
+  })));
   return decorations;
 };

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

@@ -2,7 +2,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
+import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlock, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
 import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRounded, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 var lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
@@ -74,7 +74,10 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
   var isActive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var isTraditional = colorScheme === 'traditional';
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
-    if (shouldApplyStylesDirectly(nodeName)) {
+    if (isMultiContainerBlockNode(nodeName)) {
+      return editingContentStyleInBlock;
+    }
+    if (isTextLikeBlockNode(nodeName)) {
       return undefined;
     }
     if (isTraditional) {
@@ -155,6 +158,12 @@ var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_re
 var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
   return nodeName === 'heading';
 };
+var isMultiContainerBlockNode = function isMultiContainerBlockNode(nodeName) {
+  return ['decisionList', 'layoutSection'].includes(nodeName);
+};
+var isTextLikeBlockNode = function isTextLikeBlockNode(nodeName) {
+  return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
+};
 var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
   var element = _ref2.element,
     colorScheme = _ref2.colorScheme,
@@ -222,16 +231,66 @@ var applyStylesToElement = function applyStylesToElement(_ref3) {
   var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
-
-/**
- * Creates a content wrapper with deleted styles for a block node
- */
-var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref4) {
-  var nodeView = _ref4.nodeView,
+var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4) {
+  var element = _ref4.element,
     targetNode = _ref4.targetNode,
     colorScheme = _ref4.colorScheme,
     isActive = _ref4.isActive,
     isInserted = _ref4.isInserted;
+  var currentStyle = element.getAttribute('style') || '';
+  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
+  if (targetNode.type.name === 'decisionList') {
+    element.querySelectorAll('li').forEach(function (listItem) {
+      var currentListItemStyle = listItem.getAttribute('style') || '';
+      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(editingStyleNode));
+    });
+  } else if (targetNode.type.name === 'layoutSection') {
+    element.querySelectorAll('[data-layout-column="true"]').forEach(function (section) {
+      var currentSectionStyle = section.getAttribute('style') || '';
+      section.setAttribute('style', "".concat(currentSectionStyle).concat(editingStyleNode));
+    });
+  } else if (targetNode.type.name === 'taskList') {
+    element.querySelectorAll('li').forEach(function (listItem) {
+      var currentListItemStyle = listItem.getAttribute('style') || '';
+      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(editingStyleNode));
+    });
+  }
+  element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
+};
+var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5) {
+  var element = _ref5.element,
+    targetNode = _ref5.targetNode,
+    colorScheme = _ref5.colorScheme,
+    isActive = _ref5.isActive,
+    isInserted = _ref5.isInserted;
+  getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
+  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
+  var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+  var textNodesToWrap = [];
+  var currentNode = walker.nextNode();
+  while (currentNode) {
+    if (currentNode instanceof Text && currentNode.textContent !== '' && currentNode.parentElement) {
+      textNodesToWrap.push(currentNode);
+    }
+    currentNode = walker.nextNode();
+  }
+  textNodesToWrap.forEach(function (textNode) {
+    var contentWrapper = document.createElement('span');
+    contentWrapper.setAttribute('style', contentStyle);
+    textNode.replaceWith(contentWrapper);
+    contentWrapper.append(textNode);
+  });
+};
+
+/**
+ * Creates a content wrapper with deleted styles for a block node
+ */
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6) {
+  var nodeView = _ref6.nodeView,
+    targetNode = _ref6.targetNode,
+    colorScheme = _ref6.colorScheme,
+    isActive = _ref6.isActive,
+    isInserted = _ref6.isInserted;
   var contentWrapper = document.createElement('div');
   var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive);
   contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, isActive, isInserted)).concat(nodeStyle || ''));
@@ -245,14 +304,14 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref4
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref5) {
-  var dom = _ref5.dom,
-    nodeView = _ref5.nodeView,
-    targetNode = _ref5.targetNode,
-    lozenge = _ref5.lozenge,
-    colorScheme = _ref5.colorScheme,
-    _ref5$isActive = _ref5.isActive,
-    isActive = _ref5$isActive === void 0 ? false : _ref5$isActive;
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref7) {
+  var dom = _ref7.dom,
+    nodeView = _ref7.nodeView,
+    targetNode = _ref7.targetNode,
+    lozenge = _ref7.lozenge,
+    colorScheme = _ref7.colorScheme,
+    _ref7$isActive = _ref7.isActive,
+    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -293,14 +352,14 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref5) {
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref6) {
-  var dom = _ref6.dom,
-    nodeView = _ref6.nodeView,
-    targetNode = _ref6.targetNode,
-    lozenge = _ref6.lozenge,
-    colorScheme = _ref6.colorScheme,
-    _ref6$isActive = _ref6.isActive,
-    isActive = _ref6$isActive === void 0 ? false : _ref6$isActive;
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref8) {
+  var dom = _ref8.dom,
+    nodeView = _ref8.nodeView,
+    targetNode = _ref8.targetNode,
+    lozenge = _ref8.lozenge,
+    colorScheme = _ref8.colorScheme,
+    _ref8$isActive = _ref8.isActive,
+    isActive = _ref8$isActive === void 0 ? false : _ref8$isActive;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -338,16 +397,16 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref6)
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var wrapBlockNode = function wrapBlockNode(_ref7) {
-  var dom = _ref7.dom,
-    nodeView = _ref7.nodeView,
-    targetNode = _ref7.targetNode,
-    colorScheme = _ref7.colorScheme,
-    intl = _ref7.intl,
-    _ref7$isActive = _ref7.isActive,
-    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive,
-    _ref7$isInserted = _ref7.isInserted,
-    isInserted = _ref7$isInserted === void 0 ? false : _ref7$isInserted;
+var wrapBlockNode = function wrapBlockNode(_ref9) {
+  var dom = _ref9.dom,
+    nodeView = _ref9.nodeView,
+    targetNode = _ref9.targetNode,
+    colorScheme = _ref9.colorScheme,
+    intl = _ref9.intl,
+    _ref9$isActive = _ref9.isActive,
+    isActive = _ref9$isActive === void 0 ? false : _ref9$isActive,
+    _ref9$isInserted = _ref9.isInserted,
+    isInserted = _ref9$isInserted === void 0 ? false : _ref9$isInserted;
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name) && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
     var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
@@ -402,35 +461,50 @@ var wrapBlockNode = function wrapBlockNode(_ref7) {
  * 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(_ref8) {
-  var dom = _ref8.dom,
-    nodeView = _ref8.nodeView,
-    targetNode = _ref8.targetNode,
-    colorScheme = _ref8.colorScheme,
-    intl = _ref8.intl,
-    _ref8$isActive = _ref8.isActive,
-    isActive = _ref8$isActive === void 0 ? false : _ref8$isActive,
-    _ref8$isInserted = _ref8.isInserted,
-    isInserted = _ref8$isInserted === void 0 ? false : _ref8$isInserted;
-  if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
-    // Apply deleted styles directly to preserve natural block-level margins
-    applyStylesToElement({
-      element: nodeView,
-      targetNode: targetNode,
-      colorScheme: colorScheme,
-      isActive: isActive,
-      isInserted: isInserted
-    });
-    dom.append(nodeView);
-  } else if (targetNode.type.name === 'table' && nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
-    applyCellOverlayStyles({
-      element: nodeView,
-      colorScheme: colorScheme,
-      isInserted: isInserted
-    });
-    dom.append(nodeView);
-  } else {
-    // Use wrapper approach for other block nodes
+export var wrapBlockNodeView = function wrapBlockNodeView(_ref0) {
+  var dom = _ref0.dom,
+    nodeView = _ref0.nodeView,
+    targetNode = _ref0.targetNode,
+    colorScheme = _ref0.colorScheme,
+    intl = _ref0.intl,
+    _ref0$isActive = _ref0.isActive,
+    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive,
+    _ref0$isInserted = _ref0.isInserted,
+    isInserted = _ref0$isInserted === void 0 ? false : _ref0$isInserted;
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (nodeView instanceof HTMLElement) {
+      if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
+        applyMultiContainerLikeStyles({
+          element: nodeView,
+          targetNode: targetNode,
+          colorScheme: colorScheme,
+          isActive: isActive,
+          isInserted: isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+      if (isTextLikeBlockNode(targetNode.type.name)) {
+        applyTextLikeBlockNodeStyles({
+          element: nodeView,
+          targetNode: targetNode,
+          colorScheme: colorScheme,
+          isActive: isActive,
+          isInserted: isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+      if (targetNode.type.name === 'table') {
+        applyCellOverlayStyles({
+          element: nodeView,
+          colorScheme: colorScheme,
+          isInserted: isInserted
+        });
+        dom.append(nodeView);
+        return;
+      }
+    }
     wrapBlockNode({
       dom: dom,
       nodeView: nodeView,
@@ -440,5 +514,28 @@ export var wrapBlockNodeView = function wrapBlockNodeView(_ref8) {
       isActive: isActive,
       isInserted: isInserted
     });
+    return;
+  } else {
+    if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
+      // Apply deleted styles directly to preserve natural block-level margins
+      applyStylesToElement({
+        element: nodeView,
+        targetNode: targetNode,
+        colorScheme: colorScheme,
+        isActive: isActive,
+        isInserted: isInserted
+      });
+      dom.append(nodeView);
+    } else {
+      wrapBlockNode({
+        dom: dom,
+        nodeView: nodeView,
+        targetNode: targetNode,
+        colorScheme: colorScheme,
+        intl: intl,
+        isActive: isActive,
+        isInserted: isInserted
+      });
+    }
   }
 };

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

@@ -1,4 +1,5 @@
 export declare const editingStyle: string;
+export declare const editingContentStyleInBlock: string;
 export declare const editingStyleActive: string;
 export declare const deletedContentStyle: string;
 export declare const deletedContentStyleActive: string;

package/dist/types-ts4.5/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -1,4 +1,5 @@
 export declare const editingStyle: string;
+export declare const editingContentStyleInBlock: string;
 export declare const editingStyleActive: string;
 export declare const deletedContentStyle: string;
 export declare const deletedContentStyleActive: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "6.4.0",
+	"version": "6.4.1",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,13 +28,13 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.4.0",
+		"@atlaskit/adf-schema": "^52.5.0",
 		"@atlaskit/custom-steps": "^0.16.0",
 		"@atlaskit/editor-plugin-analytics": "^8.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^62.3.0",
+		"@atlaskit/tmp-editor-statsig": "^62.4.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",