@atlaskit/editor-plugin-show-diff 6.0.1 → 6.1.0

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

@@ -23,18 +23,21 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
   var doc = _ref.doc,
     from = _ref.from,
     to = _ref.to,
-    colorScheme = _ref.colorScheme;
+    colorScheme = _ref.colorScheme,
+    _ref$isInserted = _ref.isInserted,
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
-    if (node.isBlock) {
+    if (node.isBlock && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
       var decoration = createBlockChangedDecoration({
         change: {
           from: pos,
           to: pos + node.nodeSize,
           name: node.type.name
         },
-        colorScheme: colorScheme
+        colorScheme: colorScheme,
+        isInserted: isInserted
       });
       if (decoration) {
         decorations.push(decoration);
@@ -83,7 +86,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     colorScheme = _ref2.colorScheme,
     intl = _ref2.intl,
     activeIndexPos = _ref2.activeIndexPos,
-    api = _ref2.api;
+    api = _ref2.api,
+    _ref2$isInverted = _ref2.isInverted,
+    isInverted = _ref2$isInverted === void 0 ? false : _ref2$isInverted;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -137,22 +142,28 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
   var decorations = [];
   optimizedChanges.forEach(function (change) {
     var isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    // Our default operations are insertions, so it should match the opposite of isInverted.
+    var isInserted = !isInverted;
     if (change.inserted.length > 0) {
-      decorations.push(createInlineChangedDecoration({
+      decorations.push(createInlineChangedDecoration(_objectSpread({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive
-      }));
-      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration({
+      }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+        isInserted: isInserted
+      })));
+      decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(_objectSpread({
         doc: tr.doc,
         from: change.fromB,
         to: change.toB,
         colorScheme: colorScheme
-      })));
+      }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+        isInserted: isInserted
+      }))));
     }
     if (change.deleted.length > 0) {
       var _isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
-      var decoration = createNodeChangedDecorationWidget({
+      var decoration = createNodeChangedDecorationWidget(_objectSpread({
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
@@ -160,7 +171,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
         newDoc: tr.doc,
         intl: intl,
         isActive: _isActive
-      });
+      }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+        isInserted: !isInserted
+      }));
       if (decoration) {
         decorations.push.apply(decorations, _toConsumableArray(decoration));
       }
@@ -171,7 +184,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     decorations.push(createInlineChangedDecoration({
       change: change,
       colorScheme: colorScheme,
-      isActive: isActive
+      isActive: isActive,
+      isInserted: true
     }));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(function (change) {
@@ -179,7 +193,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
       doc: tr.doc,
       from: change.fromB,
       to: change.toB,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isInserted: true
     })));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
@@ -187,21 +202,27 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
 export var calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
 function (_ref3, _ref4) {
-  var _ref7;
+  var _ref8;
   var _ref5 = _slicedToArray(_ref3, 1),
     _ref5$ = _ref5[0],
     pluginState = _ref5$.pluginState,
     state = _ref5$.state,
     colorScheme = _ref5$.colorScheme,
     intl = _ref5$.intl,
-    activeIndexPos = _ref5$.activeIndexPos;
+    activeIndexPos = _ref5$.activeIndexPos,
+    isInverted = _ref5$.isInverted;
   var _ref6 = _slicedToArray(_ref4, 1),
     _ref6$ = _ref6[0],
     lastPluginState = _ref6$.pluginState,
     lastState = _ref6$.state,
     lastColorScheme = _ref6$.colorScheme,
     lastIntl = _ref6$.intl,
-    lastActiveIndexPos = _ref6$.activeIndexPos;
+    lastActiveIndexPos = _ref6$.activeIndexPos,
+    lastIsInverted = _ref6$.isInverted;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref7 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref7 !== void 0 ? _ref7 : false;
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    var _ref7;
+    return (_ref7 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref7 !== void 0 ? _ref7 : false;
+  }
+  return (_ref8 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref8 !== void 0 ? _ref8 : false;
 });

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

@@ -89,4 +89,26 @@ export var editingStyleCardBlockNode = convertToInlineCss({
 });
 export var standardDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
+});
+export var addedCellOverlayStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-purple-subtlest, #F8EEFE)", " r g b / 0.5)"),
+  zIndex: 1,
+  outline: "1px solid ".concat("var(--ds-border-accent-purple, #AF59E1)"),
+  pointerEvents: 'none'
+});
+export var deletedCellOverlayStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-gray-subtlest, #F0F1F2)", " r g b / 0.5)"),
+  zIndex: 1,
+  outline: "1px solid ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  pointerEvents: 'none'
 });

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

@@ -66,4 +66,26 @@ export var traditionalStyleCardBlockNode = convertToInlineCss({
 });
 export var traditionalDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
+});
+export var traditionalAddedCellOverlayStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)", " r g b / 0.5)"),
+  zIndex: 1,
+  outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
+  pointerEvents: 'none'
+});
+export var deletedTraditionalCellOverlayStyle = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-gray-subtlest, #F0F1F2)", " r g b / 0.5)"),
+  zIndex: 1,
+  outline: "1px solid ".concat("var(--ds-border-disabled, #0515240F)"),
+  pointerEvents: 'none'
 });

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

@@ -1,7 +1,8 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariable, traditionalStyleQuoteNode, traditionalStyleRuleNode, traditionalStyleCardBlockNode, traditionalStyleNode } from './colorSchemes/traditional';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode } from './colorSchemes/standard';
+import { traditionalDecorationMarkerVariable, traditionalStyleQuoteNode, traditionalStyleRuleNode, traditionalStyleCardBlockNode, traditionalStyleNode, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
 var getNodeClass = function getNodeClass(name) {
   switch (name) {
     case 'extension':
@@ -10,7 +11,11 @@ var getNodeClass = function getNodeClass(name) {
       return undefined;
   }
 };
-var getBlockNodeStyle = function getBlockNodeStyle(nodeName, colorScheme) {
+var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
+  var nodeName = _ref.nodeName,
+    colorScheme = _ref.colorScheme,
+    _ref$isInserted = _ref.isInserted,
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
   var isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
   // Handle table separately to avoid border issues
@@ -21,17 +26,52 @@ var getBlockNodeStyle = function getBlockNodeStyle(nodeName, colorScheme) {
     return undefined;
   }
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
+    if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      if (isInserted) {
+        return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+      } else {
+        return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
+      }
+    }
     return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
+    if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      if (isInserted) {
+        return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
+      } else {
+        return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNode;
+      }
+    }
     return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
+    if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      if (isInserted) {
+        return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
+      } else {
+        return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
+      }
+    }
     return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
+    if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      if (isInserted) {
+        return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+      } else {
+        return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
+      }
+    }
     return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
   }
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isInserted) {
+      return isTraditional ? traditionalStyleNode : editingStyleNode;
+    } else {
+      return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
+    }
+  }
   return isTraditional ? traditionalStyleNode : editingStyleNode;
 };
 
@@ -41,12 +81,24 @@ var getBlockNodeStyle = function getBlockNodeStyle(nodeName, colorScheme) {
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-export var createBlockChangedDecoration = function createBlockChangedDecoration(_ref) {
-  var change = _ref.change,
-    colorScheme = _ref.colorScheme;
+export var createBlockChangedDecoration = function createBlockChangedDecoration(_ref2) {
+  var change = _ref2.change,
+    colorScheme = _ref2.colorScheme,
+    _ref2$isInserted = _ref2.isInserted,
+    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted;
+  var style = getBlockNodeStyle({
+    nodeName: change.name,
+    colorScheme: colorScheme
+  });
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    style = getBlockNodeStyle({
+      nodeName: change.name,
+      colorScheme: colorScheme,
+      isInserted: isInserted
+    });
+  }
+  var className = getNodeClass(change.name);
   if (fg('platform_editor_show_diff_scroll_navigation')) {
-    var style = getBlockNodeStyle(change.name, colorScheme);
-    var className = getNodeClass(change.name);
     if (style || className) {
       return Decoration.node(change.from, change.to, {
         style: style,
@@ -59,9 +111,9 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
     return undefined;
   } else {
     return Decoration.node(change.from, change.to, {
-      style: getBlockNodeStyle(change.name, colorScheme),
+      style: style,
       'data-testid': 'show-diff-changed-decoration-node',
-      class: getNodeClass(change.name)
+      class: className
     }, {
       key: 'diff-block'
     });

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

@@ -6,8 +6,9 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { deletedRowStyle } from './colorSchemes/standard';
-import { deletedTraditionalRowStyle } from './colorSchemes/traditional';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { addedCellOverlayStyle, deletedRowStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
+import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 /**
  * Extracts information about deleted table rows from a change
@@ -108,9 +109,15 @@ var isEmptyRow = function isEmptyRow(rowNode) {
 /**
  * Creates a DOM representation of a deleted table row
  */
-var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializer, colorScheme) {
+var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializer, colorScheme, isInserted) {
   var tr = document.createElement('tr');
-  tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (!isInserted) {
+      tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
+    }
+  } else {
+    tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
+  }
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
 
   // Serialize each cell in the row
@@ -118,6 +125,12 @@ var createChangedRowDOM = function createChangedRowDOM(rowNode, nodeViewSerializ
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
       var nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
+        if (isInserted && nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          var overlay = document.createElement('span');
+          var overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
+          overlay.setAttribute('style', overlayStyle);
+          nodeView.appendChild(overlay);
+        }
         tr.appendChild(nodeView);
       } else {
         // Fallback to fragment serialization
@@ -163,13 +176,15 @@ export var createChangedRowDecorationWidgets = function createChangedRowDecorati
     originalDoc = _ref.originalDoc,
     newDoc = _ref.newDoc,
     nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme;
+    colorScheme = _ref.colorScheme,
+    _ref$isInserted = _ref.isInserted,
+    isInserted = _ref$isInserted === void 0 ? false : _ref$isInserted;
   // First, expand the changes to include complete deleted rows
   var changedRows = expandDiffForChangedRows(changes.filter(function (change) {
     return change.deleted.length > 0;
   }), originalDoc, newDoc);
   return changedRows.map(function (changedRow) {
-    var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme);
+    var rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted);
 
     // Find safe insertion position for the deleted row
     var safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,

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

@@ -1,6 +1,7 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { editingStyle, editingStyleActive } from './colorSchemes/standard';
-import { traditionalInsertStyle, traditionalInsertStyleActive } from './colorSchemes/traditional';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive } from './colorSchemes/standard';
+import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle } from './colorSchemes/traditional';
 
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -8,16 +9,35 @@ import { traditionalInsertStyle, traditionalInsertStyleActive } from './colorSch
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
+
 export var createInlineChangedDecoration = function createInlineChangedDecoration(_ref) {
   var change = _ref.change,
     colorScheme = _ref.colorScheme,
     _ref$isActive = _ref.isActive,
-    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    _ref$isInserted = _ref.isInserted,
+    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted;
   var style;
-  if (colorScheme === 'traditional') {
-    style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isInserted) {
+      if (colorScheme === 'traditional') {
+        style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+      } else {
+        style = isActive ? editingStyleActive : editingStyle;
+      }
+    } else {
+      if (colorScheme === 'traditional') {
+        style = deletedTraditionalContentStyle;
+      } else {
+        style = isActive ? deletedContentStyleActive : deletedContentStyle;
+      }
+    }
   } else {
-    style = isActive ? editingStyleActive : editingStyle;
+    if (colorScheme === 'traditional') {
+      style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+    } else {
+      style = isActive ? editingStyleActive : editingStyle;
+    }
   }
   return Decoration.inline(change.fromB, change.toB, {
     style: style,

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

@@ -1,14 +1,28 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
-import { deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded } from './colorSchemes/traditional';
+import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
+import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded } from './colorSchemes/traditional';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
   return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 };
+var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional') {
+    if (isActive) {
+      return traditionalInsertStyleActive;
+    }
+    return traditionalInsertStyle;
+  }
+  if (isActive) {
+    return editingStyleActive;
+  }
+  return editingStyle;
+};
 var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (colorScheme === 'traditional') {
@@ -28,28 +42,66 @@ var createDeletedStyleWrapperWithoutOpacity = function createDeletedStyleWrapper
   wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
   return wrapper;
 };
+
+/**
+ * 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 = function injectInnerWrapper(_ref) {
+  var node = _ref.node,
+    colorScheme = _ref.colorScheme,
+    isActive = _ref.isActive,
+    isInserted = _ref.isInserted;
+  var wrapper = document.createElement('span');
+  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
+  _toConsumableArray(node.childNodes).forEach(function (child) {
+    var removedChild = node.removeChild(child);
+    wrapper.append(removedChild);
+  });
+  node.appendChild(wrapper);
+  return node;
+};
 var createContentWrapper = function createContentWrapper(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var wrapper = document.createElement('span');
   var baseStyle = convertToInlineCss({
     position: 'relative',
     width: 'fit-content'
   });
-  wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
-  var strikethrough = document.createElement('span');
-  strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
-  wrapper.append(strikethrough);
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isInserted) {
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getInsertedContentStyle(colorScheme, isActive)));
+    } else {
+      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
+      var strikethrough = document.createElement('span');
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+      wrapper.append(strikethrough);
+    }
+  } else {
+    wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive)));
+    var _strikethrough = document.createElement('span');
+    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+    wrapper.append(_strikethrough);
+  }
   return wrapper;
 };
-export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref) {
-  var change = _ref.change,
-    doc = _ref.doc,
-    nodeViewSerializer = _ref.nodeViewSerializer,
-    colorScheme = _ref.colorScheme,
-    newDoc = _ref.newDoc,
-    intl = _ref.intl,
-    _ref$isActive = _ref.isActive,
-    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+
+/**
+ * This function is used to create a decoration widget to show content
+ * that is not in the current document.
+ */
+export var createNodeChangedDecorationWidget = function createNodeChangedDecorationWidget(_ref2) {
+  var change = _ref2.change,
+    doc = _ref2.doc,
+    nodeViewSerializer = _ref2.nodeViewSerializer,
+    colorScheme = _ref2.colorScheme,
+    newDoc = _ref2.newDoc,
+    intl = _ref2.intl,
+    _ref2$isActive = _ref2.isActive,
+    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
+    _ref2$isInserted = _ref2.isInserted,
+    isInserted = _ref2$isInserted === void 0 ? false : _ref2$isInserted;
   var slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
     return;
@@ -73,7 +125,8 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
       originalDoc: doc,
       newDoc: newDoc,
       nodeViewSerializer: nodeViewSerializer,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isInserted: isInserted
     });
   }
   var serializer = nodeViewSerializer;
@@ -95,14 +148,14 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
           if (childNodeView) {
             var lineBreak = document.createElement('br');
             dom.append(lineBreak);
-            var wrapper = createContentWrapper(colorScheme, isActive);
+            var wrapper = createContentWrapper(colorScheme, isActive, isInserted);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             var serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              var _wrapper = createContentWrapper(colorScheme, isActive);
+              var _wrapper = createContentWrapper(colorScheme, isActive, isInserted);
               _wrapper.append(serializedChild);
               dom.append(_wrapper);
             }
@@ -147,7 +200,7 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     var nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        var wrapper = createContentWrapper(colorScheme, isActive);
+        var wrapper = createContentWrapper(colorScheme, isActive, isInserted);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
@@ -157,7 +210,8 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
           nodeView: nodeView,
           targetNode: node,
           colorScheme: colorScheme,
-          intl: intl
+          intl: intl,
+          isInserted: isInserted
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
@@ -166,9 +220,25 @@ export var createNodeChangedDecorationWidget = function createNodeChangedDecorat
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
-        _wrapper2.append(fallbackNode);
-        dom.append(_wrapper2);
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          if (fallbackNode instanceof HTMLElement) {
+            var injectedNode = injectInnerWrapper({
+              node: fallbackNode,
+              colorScheme: colorScheme,
+              isActive: isActive,
+              isInserted: isInserted
+            });
+            dom.append(injectedNode);
+          } else {
+            var _wrapper2 = createContentWrapper(colorScheme, isActive, isInserted);
+            _wrapper2.append(fallbackNode);
+            dom.append(_wrapper2);
+          }
+        } else {
+          var _wrapper3 = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
+          _wrapper3.append(fallbackNode);
+          dom.append(_wrapper3);
+        }
       }
     }
   });

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

@@ -2,10 +2,6 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { AddMarkStep, RemoveMarkStep } from '@atlaskit/editor-prosemirror/transform';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-var filterUndefined = function filterUndefined(x) {
-  return !!x;
-};
 var extractMarkStep = function extractMarkStep(step) {
   if (step instanceof AddMarkStep) {
     return {
@@ -26,17 +22,6 @@ var extractMarkStep = function extractMarkStep(step) {
   return undefined;
 };
 export var getMarkChangeRanges = function getMarkChangeRanges(steps) {
-  if (!expValEquals('platform_editor_deduplicate_mark_diff', 'isEnabled', true)) {
-    return steps.map(function (step) {
-      if (step instanceof AddMarkStep || step instanceof RemoveMarkStep) {
-        return {
-          fromB: step.from,
-          toB: step.to
-        };
-      }
-      return undefined;
-    }).filter(filterUndefined);
-  }
   var resultRanges = [];
   var lastOp;
   var _iterator = _createForOfIteratorHelper(steps),