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

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

@@ -5,13 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getMarkChangeRanges = void 0;
 var _transform = require("@atlaskit/editor-prosemirror/transform");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 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; }
-var filterUndefined = function filterUndefined(x) {
-  return !!x;
-};
 var extractMarkStep = function extractMarkStep(step) {
   if (step instanceof _transform.AddMarkStep) {
     return {
@@ -32,17 +28,6 @@ var extractMarkStep = function extractMarkStep(step) {
   return undefined;
 };
 var getMarkChangeRanges = exports.getMarkChangeRanges = function getMarkChangeRanges(steps) {
-  if (!(0, _expValEquals.expValEquals)('platform_editor_deduplicate_mark_diff', 'isEnabled', true)) {
-    return steps.map(function (step) {
-      if (step instanceof _transform.AddMarkStep || step instanceof _transform.RemoveMarkStep) {
-        return {
-          fromB: step.from,
-          toB: step.to
-        };
-      }
-      return undefined;
-    }).filter(filterUndefined);
-  }
   var resultRanges = [];
   var lastOp;
   var _iterator = _createForOfIteratorHelper(steps),

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

@@ -25,8 +25,15 @@ var lozengeStyle = (0, _lazyNodeView.convertToInlineCss)({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
+var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+    if (colorScheme === 'traditional') {
+      return isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
+    }
+    return isActive ? _standard.editingStyleActive : _standard.editingStyle;
+  }
   if (colorScheme === 'traditional') {
     return _traditional.deletedTraditionalContentStyle;
   }
@@ -35,8 +42,18 @@ var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   }
   return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
 };
-var getDeletedStyleNode = function getDeletedStyleNode(nodeName, colorScheme) {
+var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
+  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var isTraditional = colorScheme === 'traditional';
+  if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+    if (shouldApplyStylesDirectly(nodeName)) {
+      return undefined;
+    }
+    if (isTraditional) {
+      return _traditional.traditionalStyleNode;
+    }
+    return _standard.editingStyleNode;
+  }
   switch (nodeName) {
     case 'blockquote':
       return isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNodeWithLozenge;
@@ -57,7 +74,6 @@ var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
     case 'mediaSingle':
     case 'panel':
     case 'decisionList':
-      return true;
     case 'embedCard':
     case 'blockquote':
       return true;
@@ -69,7 +85,6 @@ var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeCla
   switch (nodeName) {
     case 'mediaSingle':
     case 'embedCard':
-      return true;
     case 'blockquote':
       return true;
     default:
@@ -84,6 +99,17 @@ var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeCla
 var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
   return nodeName === 'heading';
 };
+var applyCellOverlayStyles = function applyCellOverlayStyles(_ref) {
+  var element = _ref.element,
+    colorScheme = _ref.colorScheme,
+    isInserted = _ref.isInserted;
+  element.querySelectorAll('td, th').forEach(function (cell) {
+    var overlay = document.createElement('span');
+    var overlayStyle = colorScheme === 'traditional' ? isInserted ? _traditional.traditionalAddedCellOverlayStyle : _traditional.deletedTraditionalCellOverlayStyle : isInserted ? _standard.addedCellOverlayStyle : _standard.deletedCellOverlayStyle;
+    overlay.setAttribute('style', overlayStyle);
+    cell.appendChild(overlay);
+  });
+};
 
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
@@ -126,26 +152,28 @@ var createBlockNodeWrapper = function createBlockNodeWrapper() {
 /**
  * Applies styles directly to an HTML element by merging with existing styles
  */
-var applyStylesToElement = function applyStylesToElement(_ref) {
-  var element = _ref.element,
-    targetNode = _ref.targetNode,
-    colorScheme = _ref.colorScheme;
+var applyStylesToElement = function applyStylesToElement(_ref2) {
+  var element = _ref2.element,
+    targetNode = _ref2.targetNode,
+    colorScheme = _ref2.colorScheme,
+    isInserted = _ref2.isInserted;
   var currentStyle = element.getAttribute('style') || '';
-  var deletedContentStyle = getDeletedContentStyle(colorScheme);
-  var nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
-  element.setAttribute('style', "".concat(currentStyle).concat(deletedContentStyle).concat(nodeSpecificStyle));
+  var contentStyle = getChangedContentStyle(colorScheme, false, isInserted);
+  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted) || '';
+  element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
 
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref2) {
-  var nodeView = _ref2.nodeView,
-    targetNode = _ref2.targetNode,
-    colorScheme = _ref2.colorScheme;
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref3) {
+  var nodeView = _ref3.nodeView,
+    targetNode = _ref3.targetNode,
+    colorScheme = _ref3.colorScheme,
+    isInserted = _ref3.isInserted;
   var contentWrapper = document.createElement('div');
-  var nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
-  contentWrapper.setAttribute('style', "".concat(getDeletedContentStyle(colorScheme)).concat(nodeStyle || ''));
+  var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted);
+  contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, false, isInserted)).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -156,12 +184,12 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref2
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref3) {
-  var dom = _ref3.dom,
-    nodeView = _ref3.nodeView,
-    targetNode = _ref3.targetNode,
-    lozenge = _ref3.lozenge,
-    colorScheme = _ref3.colorScheme;
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
+  var dom = _ref4.dom,
+    nodeView = _ref4.nodeView,
+    targetNode = _ref4.targetNode,
+    lozenge = _ref4.lozenge,
+    colorScheme = _ref4.colorScheme;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -193,12 +221,12 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref3) {
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref4) {
-  var dom = _ref4.dom,
-    nodeView = _ref4.nodeView,
-    targetNode = _ref4.targetNode,
-    lozenge = _ref4.lozenge,
-    colorScheme = _ref4.colorScheme;
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5) {
+  var dom = _ref5.dom,
+    nodeView = _ref5.nodeView,
+    targetNode = _ref5.targetNode,
+    lozenge = _ref5.lozenge,
+    colorScheme = _ref5.colorScheme;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -227,14 +255,16 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref4)
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var wrapBlockNode = function wrapBlockNode(_ref5) {
-  var dom = _ref5.dom,
-    nodeView = _ref5.nodeView,
-    targetNode = _ref5.targetNode,
-    colorScheme = _ref5.colorScheme,
-    intl = _ref5.intl;
+var wrapBlockNode = function wrapBlockNode(_ref6) {
+  var dom = _ref6.dom,
+    nodeView = _ref6.nodeView,
+    targetNode = _ref6.targetNode,
+    colorScheme = _ref6.colorScheme,
+    intl = _ref6.intl,
+    _ref6$isInserted = _ref6.isInserted,
+    isInserted = _ref6$isInserted === void 0 ? false : _ref6$isInserted;
   var blockWrapper = createBlockNodeWrapper();
-  if (shouldShowRemovedLozenge(targetNode.type.name)) {
+  if (shouldShowRemovedLozenge(targetNode.type.name) && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
     var lozenge = createRemovedLozenge(intl);
     if (handleEmbedCardWithLozenge({
       dom: dom,
@@ -259,7 +289,8 @@ var wrapBlockNode = function wrapBlockNode(_ref5) {
   var contentWrapper = createBlockNodeContentWrapper({
     nodeView: nodeView,
     targetNode: targetNode,
-    colorScheme: colorScheme
+    colorScheme: colorScheme,
+    isInserted: isInserted
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
@@ -274,18 +305,28 @@ var wrapBlockNode = function wrapBlockNode(_ref5) {
  * 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(_ref6) {
-  var dom = _ref6.dom,
-    nodeView = _ref6.nodeView,
-    targetNode = _ref6.targetNode,
-    colorScheme = _ref6.colorScheme,
-    intl = _ref6.intl;
+var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_ref7) {
+  var dom = _ref7.dom,
+    nodeView = _ref7.nodeView,
+    targetNode = _ref7.targetNode,
+    colorScheme = _ref7.colorScheme,
+    intl = _ref7.intl,
+    _ref7$isInserted = _ref7.isInserted,
+    isInserted = _ref7$isInserted === void 0 ? false : _ref7$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
+      colorScheme: colorScheme,
+      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 {
@@ -295,7 +336,8 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
       nodeView: nodeView,
       targetNode: targetNode,
       colorScheme: colorScheme,
-      intl: intl
+      intl: intl,
+      isInserted: isInserted
     });
   }
 };

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

@@ -12,6 +12,7 @@ var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 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 _calculateDiffDecorations = require("./calculateDiffDecorations");
 var _NodeViewSerializer = require("./NodeViewSerializer");
 var _scrollToActiveDecoration = require("./scrollToActiveDecoration");
@@ -36,25 +37,28 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
     state: {
       init: function init(_, _state) {
         // We do initial setup after we setup the editor view
-        return {
+        return _objectSpread({
           steps: [],
           originalDoc: undefined,
           decorations: _view.DecorationSet.empty,
           isDisplayingChanges: false
-        };
+        }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+          isInverted: false
+        } : {});
       },
       apply: function apply(tr, currentPluginState, oldState, newState) {
         var meta = tr.getMeta(showDiffPluginKey);
         var newPluginState = currentPluginState;
         if (meta) {
           if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'SHOW_DIFF') {
+            var _newPluginState;
             // Update the plugin state with the new metadata
             newPluginState = _objectSpread(_objectSpread(_objectSpread({}, currentPluginState), meta), {}, {
               isDisplayingChanges: true,
               activeIndex: undefined
             });
             // Calculate and store decorations in state
-            var decorations = (0, _calculateDiffDecorations.calculateDiffDecorations)({
+            var decorations = (0, _calculateDiffDecorations.calculateDiffDecorations)(_objectSpread({
               state: newState,
               pluginState: newPluginState,
               nodeViewSerializer: nodeViewSerializer,
@@ -62,7 +66,9 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               intl: getIntl(),
               activeIndexPos: (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined,
               api: api
-            });
+            }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+              isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted
+            } : {}));
             // Update the decorations
             newPluginState.decorations = decorations;
           } else if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'HIDE_DIFF') {
@@ -70,7 +76,9 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
               decorations: _view.DecorationSet.empty,
               isDisplayingChanges: false,
               activeIndex: undefined
-            });
+            }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+              isInverted: false
+            } : {});
           } else if (((meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_NEXT' || (meta === null || meta === void 0 ? void 0 : meta.action) === 'SCROLL_TO_PREVIOUS') && (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
             // Update the active index in plugin state and recalculate decorations
             var _decorations = getScrollableDecorations(currentPluginState.decorations);
@@ -99,7 +107,7 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
                 } : undefined
               });
               // Recalculate decorations with the new active index
-              var updatedDecorations = (0, _calculateDiffDecorations.calculateDiffDecorations)({
+              var updatedDecorations = (0, _calculateDiffDecorations.calculateDiffDecorations)(_objectSpread({
                 state: newState,
                 pluginState: newPluginState,
                 nodeViewSerializer: nodeViewSerializer,
@@ -107,7 +115,9 @@ var createPlugin = exports.createPlugin = function createPlugin(config, getIntl,
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos,
                 api: api
-              });
+              }, (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+                isInverted: newPluginState.isInverted
+              } : {}));
               newPluginState.decorations = updatedDecorations;
             }
           } else {

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

@@ -15,19 +15,21 @@ const calculateNodesForBlockDecoration = ({
   doc,
   from,
   to,
-  colorScheme
+  colorScheme,
+  isInserted = true
 }) => {
   const decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, (node, pos) => {
-    if (node.isBlock) {
+    if (node.isBlock && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || pos + node.nodeSize <= to)) {
       const decoration = createBlockChangedDecoration({
         change: {
           from: pos,
           to: pos + node.nodeSize,
           name: node.type.name
         },
-        colorScheme
+        colorScheme,
+        isInserted
       });
       if (decoration) {
         decorations.push(decoration);
@@ -80,7 +82,8 @@ const calculateDiffDecorationsInner = ({
   colorScheme,
   intl,
   activeIndexPos,
-  api
+  api,
+  isInverted = false
 }) => {
   const {
     originalDoc,
@@ -130,17 +133,25 @@ const calculateDiffDecorationsInner = ({
   const decorations = [];
   optimizedChanges.forEach(change => {
     const isActive = activeIndexPos && change.fromB >= activeIndexPos.from && change.toB <= activeIndexPos.to;
+    // Our default operations are insertions, so it should match the opposite of isInverted.
+    const isInserted = !isInverted;
     if (change.inserted.length > 0) {
       decorations.push(createInlineChangedDecoration({
         change,
         colorScheme,
-        isActive
+        isActive,
+        ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+          isInserted
+        })
       }));
       decorations.push(...calculateNodesForBlockDecoration({
         doc: tr.doc,
         from: change.fromB,
         to: change.toB,
-        colorScheme
+        colorScheme,
+        ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+          isInserted
+        })
       }));
     }
     if (change.deleted.length > 0) {
@@ -152,7 +163,10 @@ const calculateDiffDecorationsInner = ({
         colorScheme,
         newDoc: tr.doc,
         intl,
-        isActive
+        isActive,
+        ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+          isInserted: !isInserted
+        })
       });
       if (decoration) {
         decorations.push(...decoration);
@@ -164,7 +178,8 @@ const calculateDiffDecorationsInner = ({
     decorations.push(createInlineChangedDecoration({
       change,
       colorScheme,
-      isActive
+      isActive,
+      isInserted: true
     }));
   });
   getAttrChangeRanges(tr.doc, attrSteps).forEach(change => {
@@ -172,7 +187,8 @@ const calculateDiffDecorationsInner = ({
       doc: tr.doc,
       from: change.fromB,
       to: change.toB,
-      colorScheme
+      colorScheme,
+      isInserted: true
     }));
   });
   return DecorationSet.empty.add(tr.doc, decorations);
@@ -184,15 +200,21 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
   state,
   colorScheme,
   intl,
-  activeIndexPos
+  activeIndexPos,
+  isInverted
 }], [{
   pluginState: lastPluginState,
   state: lastState,
   colorScheme: lastColorScheme,
   intl: lastIntl,
-  activeIndexPos: lastActiveIndexPos
+  activeIndexPos: lastActiveIndexPos,
+  isInverted: lastIsInverted
 }]) => {
-  var _ref;
+  var _ref2;
   const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
-  return (_ref = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref !== void 0 ? _ref : false;
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    var _ref;
+    return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref !== void 0 ? _ref : false;
+  }
+  return (_ref2 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref2 !== void 0 ? _ref2 : false;
 });

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

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

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

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

package/dist/es2019/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';
 const getNodeClass = name => {
   switch (name) {
     case 'extension':
@@ -10,7 +11,11 @@ const getNodeClass = name => {
       return undefined;
   }
 };
-const getBlockNodeStyle = (nodeName, colorScheme) => {
+const getBlockNodeStyle = ({
+  nodeName,
+  colorScheme,
+  isInserted = true
+}) => {
   const isTraditional = colorScheme === 'traditional';
   if (['mediaSingle', 'mediaGroup', 'table',
   // Handle table separately to avoid border issues
@@ -21,17 +26,52 @@ const 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;
 };
 
@@ -43,11 +83,22 @@ const getBlockNodeStyle = (nodeName, colorScheme) => {
  */
 export const createBlockChangedDecoration = ({
   change,
-  colorScheme
+  colorScheme,
+  isInserted = true
 }) => {
+  let style = getBlockNodeStyle({
+    nodeName: change.name,
+    colorScheme
+  });
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    style = getBlockNodeStyle({
+      nodeName: change.name,
+      colorScheme,
+      isInserted
+    });
+  }
+  const className = getNodeClass(change.name);
   if (fg('platform_editor_show_diff_scroll_navigation')) {
-    const style = getBlockNodeStyle(change.name, colorScheme);
-    const className = getNodeClass(change.name);
     if (style || className) {
       return Decoration.node(change.from, change.to, {
         style: style,
@@ -60,9 +111,9 @@ export const createBlockChangedDecoration = ({
     return undefined;
   } else {
     return Decoration.node(change.from, change.to, {
-      style: getBlockNodeStyle(change.name, colorScheme),
+      style,
       'data-testid': 'show-diff-changed-decoration-node',
-      class: getNodeClass(change.name)
+      class: className
     }, {
       key: 'diff-block'
     });