@atlaskit/editor-plugin-show-diff 6.0.2 → 6.1.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 6.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.1.0
+
+### Minor Changes
+
+- [`40c53e0b66a8a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/40c53e0b66a8a) -
+  EDITOR-5829: Allow showing inverse of diffs
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.2
 
 ### Patch Changes

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

@@ -29,18 +29,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 && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
       var decoration = (0, _createBlockChangedDecoration.createBlockChangedDecoration)({
         change: {
           from: pos,
           to: pos + node.nodeSize,
           name: node.type.name
         },
-        colorScheme: colorScheme
+        colorScheme: colorScheme,
+        isInserted: isInserted
       });
       if (decoration) {
         decorations.push(decoration);
@@ -89,7 +92,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) {
@@ -143,22 +148,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((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
+      decorations.push((0, _createInlineChangedDecoration.createInlineChangedDecoration)(_objectSpread({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive
-      }));
-      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration({
+      }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+        isInserted: isInserted
+      })));
+      decorations.push.apply(decorations, (0, _toConsumableArray2.default)(calculateNodesForBlockDecoration(_objectSpread({
         doc: tr.doc,
         from: change.fromB,
         to: change.toB,
         colorScheme: colorScheme
-      })));
+      }, (0, _expValEquals.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 = (0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)({
+      var decoration = (0, _createNodeChangedDecorationWidget.createNodeChangedDecorationWidget)(_objectSpread({
         change: change,
         doc: originalDoc,
         nodeViewSerializer: nodeViewSerializer,
@@ -166,7 +177,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
         newDoc: tr.doc,
         intl: intl,
         isActive: _isActive
-      });
+      }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+        isInserted: !isInserted
+      }));
       if (decoration) {
         decorations.push.apply(decorations, (0, _toConsumableArray2.default)(decoration));
       }
@@ -177,7 +190,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
     decorations.push((0, _createInlineChangedDecoration.createInlineChangedDecoration)({
       change: change,
       colorScheme: colorScheme,
-      isActive: isActive
+      isActive: isActive,
+      isInserted: true
     }));
   });
   (0, _getAttrChangeRanges.getAttrChangeRanges)(tr.doc, attrSteps).forEach(function (change) {
@@ -185,7 +199,8 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
       doc: tr.doc,
       from: change.fromB,
       to: change.toB,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isInserted: true
     })));
   });
   return _view.DecorationSet.empty.add(tr.doc, decorations);
@@ -193,21 +208,27 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref2
 var calculateDiffDecorations = exports.calculateDiffDecorations = (0, _memoizeOne.default)(calculateDiffDecorationsInner,
 // Cache results unless relevant inputs change
 function (_ref3, _ref4) {
-  var _ref7;
+  var _ref8;
   var _ref5 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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 && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos)) !== null && _ref7 !== void 0 ? _ref7 : false;
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    var _ref7;
+    return (_ref7 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref7 !== void 0 ? _ref7 : false;
+  }
+  return (_ref8 = originalDocIsSame && (0, _isEqual.default)(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && (0, _isEqual.default)(activeIndexPos, lastActiveIndexPos)) !== null && _ref8 !== void 0 ? _ref8 : false;
 });

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.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNewActive = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedBlockOutlineRounded = exports.deletedBlockOutline = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNewActive = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRounded = 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)",
@@ -95,4 +95,26 @@ var editingStyleCardBlockNode = exports.editingStyleCardBlockNode = (0, _lazyNod
 });
 var standardDecorationMarkerVariable = exports.standardDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
   '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
+});
+var addedCellOverlayStyle = exports.addedCellOverlayStyle = (0, _lazyNodeView.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'
+});
+var deletedCellOverlayStyle = exports.deletedCellOverlayStyle = (0, _lazyNodeView.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/cjs/pm-plugins/decorations/colorSchemes/traditional.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNode = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariable = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyle = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutline = void 0;
+exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNode = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyle = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyle = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutline = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var traditionalInsertStyle = exports.traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
@@ -72,4 +72,26 @@ var traditionalStyleCardBlockNode = exports.traditionalStyleCardBlockNode = (0,
 });
 var traditionalDecorationMarkerVariable = exports.traditionalDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
+});
+var traditionalAddedCellOverlayStyle = exports.traditionalAddedCellOverlayStyle = (0, _lazyNodeView.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'
+});
+var deletedTraditionalCellOverlayStyle = exports.deletedTraditionalCellOverlayStyle = (0, _lazyNodeView.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/cjs/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createBlockChangedDecoration = void 0;
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
 var getNodeClass = function getNodeClass(name) {
@@ -16,7 +17,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
@@ -27,17 +32,52 @@ var getBlockNodeStyle = function getBlockNodeStyle(nodeName, colorScheme) {
     return undefined;
   }
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
+    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      if (isInserted) {
+        return isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
+      } else {
+        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
+      }
+    }
     return isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
+    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      if (isInserted) {
+        return isTraditional ? _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
+      } else {
+        return isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNode;
+      }
+    }
     return isTraditional ? _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
+    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      if (isInserted) {
+        return isTraditional ? _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
+      } else {
+        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
+      }
+    }
     return isTraditional ? _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
+    if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+      if (isInserted) {
+        return isTraditional ? _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
+      } else {
+        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
+      }
+    }
     return isTraditional ? _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
   }
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isInserted) {
+      return isTraditional ? _traditional.traditionalStyleNode : _standard.editingStyleNode;
+    } else {
+      return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
+    }
+  }
   return isTraditional ? _traditional.traditionalStyleNode : _standard.editingStyleNode;
 };
 
@@ -47,12 +87,24 @@ var getBlockNodeStyle = function getBlockNodeStyle(nodeName, colorScheme) {
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
-var createBlockChangedDecoration = exports.createBlockChangedDecoration = function createBlockChangedDecoration(_ref) {
-  var change = _ref.change,
-    colorScheme = _ref.colorScheme;
+var createBlockChangedDecoration = exports.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 ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    style = getBlockNodeStyle({
+      nodeName: change.name,
+      colorScheme: colorScheme,
+      isInserted: isInserted
+    });
+  }
+  var className = getNodeClass(change.name);
   if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
-    var style = getBlockNodeStyle(change.name, colorScheme);
-    var className = getNodeClass(change.name);
     if (style || className) {
       return _view.Decoration.node(change.from, change.to, {
         style: style,
@@ -65,9 +117,9 @@ var createBlockChangedDecoration = exports.createBlockChangedDecoration = functi
     return undefined;
   } else {
     return _view.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/cjs/pm-plugins/decorations/createChangedRowDecorationWidgets.js

@@ -10,6 +10,7 @@ var _document = require("@atlaskit/editor-common/utils/document");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
 var _findSafeInsertPos = require("./utils/findSafeInsertPos");
@@ -115,9 +116,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' ? _traditional.deletedTraditionalRowStyle : _standard.deletedRowStyle);
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (!isInserted) {
+      tr.setAttribute('style', colorScheme === 'traditional' ? _traditional.deletedTraditionalRowStyle : _standard.deletedRowStyle);
+    }
+  } else {
+    tr.setAttribute('style', colorScheme === 'traditional' ? _traditional.deletedTraditionalRowStyle : _standard.deletedRowStyle);
+  }
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
 
   // Serialize each cell in the row
@@ -125,6 +132,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 && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          var overlay = document.createElement('span');
+          var overlayStyle = colorScheme === 'traditional' ? isInserted ? _traditional.traditionalAddedCellOverlayStyle : _traditional.deletedTraditionalCellOverlayStyle : isInserted ? _standard.addedCellOverlayStyle : _standard.deletedCellOverlayStyle;
+          overlay.setAttribute('style', overlayStyle);
+          nodeView.appendChild(overlay);
+        }
         tr.appendChild(nodeView);
       } else {
         // Fallback to fragment serialization
@@ -170,13 +183,15 @@ var createChangedRowDecorationWidgets = exports.createChangedRowDecorationWidget
     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 = (0, _findSafeInsertPos.findSafeInsertPos)(newDoc, changedRow.fromB - 1,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createInlineChangedDecoration = void 0;
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("./colorSchemes/standard");
 var _traditional = require("./colorSchemes/traditional");
 /**
@@ -13,16 +14,35 @@ var _traditional = require("./colorSchemes/traditional");
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
+
 var createInlineChangedDecoration = exports.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 ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    if (isInserted) {
+      if (colorScheme === 'traditional') {
+        style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
+      } else {
+        style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
+      }
+    } else {
+      if (colorScheme === 'traditional') {
+        style = _traditional.deletedTraditionalContentStyle;
+      } else {
+        style = isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyle;
+      }
+    }
   } else {
-    style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
+    if (colorScheme === 'traditional') {
+      style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
+    } else {
+      style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
+    }
   }
   return _view.Decoration.inline(change.fromB, change.toB, {
     style: style,

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createNodeChangedDecorationWidget = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -15,6 +17,19 @@ var _wrapBlockNodeView = require("./utils/wrapBlockNodeView");
 var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
   return colorScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
 };
+var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
+  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (colorScheme === 'traditional') {
+    if (isActive) {
+      return _traditional.traditionalInsertStyleActive;
+    }
+    return _traditional.traditionalInsertStyle;
+  }
+  if (isActive) {
+    return _standard.editingStyleActive;
+  }
+  return _standard.editingStyle;
+};
 var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (colorScheme === 'traditional') {
@@ -34,28 +49,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));
+  (0, _toConsumableArray2.default)(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 = (0, _lazyNodeView.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 ((0, _expValEquals.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;
 };
-var createNodeChangedDecorationWidget = exports.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.
+ */
+var createNodeChangedDecorationWidget = exports.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;
@@ -79,7 +132,8 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
       originalDoc: doc,
       newDoc: newDoc,
       nodeViewSerializer: nodeViewSerializer,
-      colorScheme: colorScheme
+      colorScheme: colorScheme,
+      isInserted: isInserted
     });
   }
   var serializer = nodeViewSerializer;
@@ -101,14 +155,14 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           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);
             }
@@ -153,7 +207,7 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     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 {
@@ -163,7 +217,8 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
           nodeView: nodeView,
           targetNode: node,
           colorScheme: colorScheme,
-          intl: intl
+          intl: intl,
+          isInserted: isInserted
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
@@ -172,9 +227,25 @@ var createNodeChangedDecorationWidget = exports.createNodeChangedDecorationWidge
     } else {
       var fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        var _wrapper2 = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
-        _wrapper2.append(fallbackNode);
-        dom.append(_wrapper2);
+        if ((0, _expValEquals.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);
+        }
       }
     }
   });