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

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

@@ -2,8 +2,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
@@ -96,9 +97,15 @@ const isEmptyRow = rowNode => {
 /**
  * Creates a DOM representation of a deleted table row
  */
-const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
+const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme, isInserted) => {
   const 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
@@ -106,6 +113,12 @@ const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
     if (cellNode.type.name === 'tableCell' || cellNode.type.name === 'tableHeader') {
       const nodeView = nodeViewSerializer.tryCreateNodeView(cellNode);
       if (nodeView) {
+        if (isInserted && nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          const overlay = document.createElement('span');
+          const overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
+          overlay.setAttribute('style', overlayStyle);
+          nodeView.appendChild(overlay);
+        }
         tr.appendChild(nodeView);
       } else {
         // Fallback to fragment serialization
@@ -142,12 +155,13 @@ export const createChangedRowDecorationWidgets = ({
   originalDoc,
   newDoc,
   nodeViewSerializer,
-  colorScheme
+  colorScheme,
+  isInserted = false
 }) => {
   // First, expand the changes to include complete deleted rows
   const changedRows = expandDiffForChangedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
   return changedRows.map(changedRow => {
-    const rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme);
+    const rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme, isInserted);
 
     // Find safe insertion position for the deleted row
     const safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,

package/dist/es2019/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,34 @@ import { traditionalInsertStyle, traditionalInsertStyleActive } from './colorSch
  * @param change Changeset "change" containing information about the change content + range
  * @returns Prosemirror inline decoration
  */
+
 export const createInlineChangedDecoration = ({
   change,
   colorScheme,
-  isActive = false
+  isActive = false,
+  isInserted = true
 }) => {
   let 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,

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

@@ -1,12 +1,24 @@
 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';
 const getDeletedContentStyleUnbounded = colorScheme => colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+const getInsertedContentStyle = (colorScheme, isActive = false) => {
+  if (colorScheme === 'traditional') {
+    if (isActive) {
+      return traditionalInsertStyleActive;
+    }
+    return traditionalInsertStyle;
+  }
+  if (isActive) {
+    return editingStyleActive;
+  }
+  return editingStyle;
+};
 const getDeletedContentStyle = (colorScheme, isActive = false) => {
   if (colorScheme === 'traditional') {
     return deletedTraditionalContentStyle;
@@ -25,18 +37,54 @@ const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
   wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
   return wrapper;
 };
-const createContentWrapper = (colorScheme, isActive = false) => {
+
+/**
+ * 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
+ */
+const injectInnerWrapper = ({
+  node,
+  colorScheme,
+  isActive,
+  isInserted
+}) => {
+  const wrapper = document.createElement('span');
+  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive));
+  [...node.childNodes].forEach(child => {
+    const removedChild = node.removeChild(child);
+    wrapper.append(removedChild);
+  });
+  node.appendChild(wrapper);
+  return node;
+};
+const createContentWrapper = (colorScheme, isActive = false, isInserted = false) => {
   const wrapper = document.createElement('span');
   const baseStyle = convertToInlineCss({
     position: 'relative',
     width: 'fit-content'
   });
-  wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
-  const 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', `${baseStyle}${getInsertedContentStyle(colorScheme, isActive)}`);
+    } else {
+      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
+      const strikethrough = document.createElement('span');
+      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+      wrapper.append(strikethrough);
+    }
+  } else {
+    wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colorScheme, isActive)}`);
+    const strikethrough = document.createElement('span');
+    strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme));
+    wrapper.append(strikethrough);
+  }
   return wrapper;
 };
+
+/**
+ * This function is used to create a decoration widget to show content
+ * that is not in the current document.
+ */
 export const createNodeChangedDecorationWidget = ({
   change,
   doc,
@@ -44,7 +92,9 @@ export const createNodeChangedDecorationWidget = ({
   colorScheme,
   newDoc,
   intl,
-  isActive = false
+  isActive = false,
+  // This is false by default as this is generally used to show deleted content
+  isInserted = false
 }) => {
   const slice = doc.slice(change.fromA, change.toA);
   if (slice.content.content.length === 0) {
@@ -61,7 +111,8 @@ export const createNodeChangedDecorationWidget = ({
       originalDoc: doc,
       newDoc,
       nodeViewSerializer,
-      colorScheme
+      colorScheme,
+      isInserted
     });
   }
   const serializer = nodeViewSerializer;
@@ -83,14 +134,14 @@ export const createNodeChangedDecorationWidget = ({
           if (childNodeView) {
             const lineBreak = document.createElement('br');
             dom.append(lineBreak);
-            const wrapper = createContentWrapper(colorScheme, isActive);
+            const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             const serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              const wrapper = createContentWrapper(colorScheme, isActive);
+              const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
               wrapper.append(serializedChild);
               dom.append(wrapper);
             }
@@ -131,7 +182,7 @@ export const createNodeChangedDecorationWidget = ({
     const nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
       if (node.isInline) {
-        const wrapper = createContentWrapper(colorScheme, isActive);
+        const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
@@ -141,7 +192,8 @@ export const createNodeChangedDecorationWidget = ({
           nodeView,
           targetNode: node,
           colorScheme,
-          intl
+          intl,
+          isInserted
         });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
@@ -150,9 +202,25 @@ export const createNodeChangedDecorationWidget = ({
     } else {
       const fallbackNode = fallbackSerialization();
       if (fallbackNode) {
-        const wrapper = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
-        wrapper.append(fallbackNode);
-        dom.append(wrapper);
+        if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+          if (fallbackNode instanceof HTMLElement) {
+            const injectedNode = injectInnerWrapper({
+              node: fallbackNode,
+              colorScheme,
+              isActive,
+              isInserted
+            });
+            dom.append(injectedNode);
+          } else {
+            const wrapper = createContentWrapper(colorScheme, isActive, isInserted);
+            wrapper.append(fallbackNode);
+            dom.append(wrapper);
+          }
+        } else {
+          const wrapper = createDeletedStyleWrapperWithoutOpacity(colorScheme, isActive);
+          wrapper.append(fallbackNode);
+          dom.append(wrapper);
+        }
       }
     }
   });

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

@@ -1,6 +1,4 @@
 import { AddMarkStep, RemoveMarkStep } from '@atlaskit/editor-prosemirror/transform';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-const filterUndefined = x => !!x;
 const extractMarkStep = step => {
   if (step instanceof AddMarkStep) {
     return {
@@ -21,17 +19,6 @@ const extractMarkStep = step => {
   return undefined;
 };
 export const getMarkChangeRanges = steps => {
-  if (!expValEquals('platform_editor_deduplicate_mark_diff', 'isEnabled', true)) {
-    return steps.map(step => {
-      if (step instanceof AddMarkStep || step instanceof RemoveMarkStep) {
-        return {
-          fromB: step.from,
-          toB: step.to
-        };
-      }
-      return undefined;
-    }).filter(filterUndefined);
-  }
   const resultRanges = [];
   let lastOp;
   for (const step of steps) {

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

@@ -1,8 +1,8 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { deletedBlockOutline, deletedBlockOutlineRounded, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineRounded, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode } from '../colorSchemes/traditional';
+import { deletedBlockOutline, deletedBlockOutlineRounded, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
+import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineRounded, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
 const lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -19,7 +19,13 @@ const lozengeStyle = convertToInlineCss({
   whiteSpace: 'nowrap',
   color: "var(--ds-text-warning-inverse, #292A2E)"
 });
-const getDeletedContentStyle = (colorScheme, isActive = false) => {
+const getChangedContentStyle = (colorScheme, isActive = false, isInserted = false) => {
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+    if (colorScheme === 'traditional') {
+      return isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+    }
+    return isActive ? editingStyleActive : editingStyle;
+  }
   if (colorScheme === 'traditional') {
     return deletedTraditionalContentStyle;
   }
@@ -28,8 +34,17 @@ const getDeletedContentStyle = (colorScheme, isActive = false) => {
   }
   return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };
-const getDeletedStyleNode = (nodeName, colorScheme) => {
+const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false) => {
   const isTraditional = colorScheme === 'traditional';
+  if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && isInserted) {
+    if (shouldApplyStylesDirectly(nodeName)) {
+      return undefined;
+    }
+    if (isTraditional) {
+      return traditionalStyleNode;
+    }
+    return editingStyleNode;
+  }
   switch (nodeName) {
     case 'blockquote':
       return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNodeWithLozenge;
@@ -50,7 +65,6 @@ const shouldShowRemovedLozenge = nodeName => {
     case 'mediaSingle':
     case 'panel':
     case 'decisionList':
-      return true;
     case 'embedCard':
     case 'blockquote':
       return true;
@@ -62,7 +76,6 @@ const shouldAddShowDiffDeletedNodeClass = nodeName => {
   switch (nodeName) {
     case 'mediaSingle':
     case 'embedCard':
-      return true;
     case 'blockquote':
       return true;
     default:
@@ -77,6 +90,18 @@ const shouldAddShowDiffDeletedNodeClass = nodeName => {
 const shouldApplyStylesDirectly = nodeName => {
   return nodeName === 'heading';
 };
+const applyCellOverlayStyles = ({
+  element,
+  colorScheme,
+  isInserted
+}) => {
+  element.querySelectorAll('td, th').forEach(cell => {
+    const overlay = document.createElement('span');
+    const overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
+    overlay.setAttribute('style', overlayStyle);
+    cell.appendChild(overlay);
+  });
+};
 
 /**
  * Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
@@ -122,12 +147,13 @@ const createBlockNodeWrapper = () => {
 const applyStylesToElement = ({
   element,
   targetNode,
-  colorScheme
+  colorScheme,
+  isInserted
 }) => {
   const currentStyle = element.getAttribute('style') || '';
-  const deletedContentStyle = getDeletedContentStyle(colorScheme);
-  const nodeSpecificStyle = getDeletedStyleNode(targetNode.type.name, colorScheme) || '';
-  element.setAttribute('style', `${currentStyle}${deletedContentStyle}${nodeSpecificStyle}`);
+  const contentStyle = getChangedContentStyle(colorScheme, false, isInserted);
+  const nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted) || '';
+  element.setAttribute('style', `${currentStyle}${contentStyle}${nodeSpecificStyle}`);
 };
 
 /**
@@ -136,11 +162,12 @@ const applyStylesToElement = ({
 const createBlockNodeContentWrapper = ({
   nodeView,
   targetNode,
-  colorScheme
+  colorScheme,
+  isInserted
 }) => {
   const contentWrapper = document.createElement('div');
-  const nodeStyle = getDeletedStyleNode(targetNode.type.name, colorScheme);
-  contentWrapper.setAttribute('style', `${getDeletedContentStyle(colorScheme)}${nodeStyle || ''}`);
+  const nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted);
+  contentWrapper.setAttribute('style', `${getChangedContentStyle(colorScheme, false, isInserted)}${nodeStyle || ''}`);
   contentWrapper.append(nodeView);
   return contentWrapper;
 };
@@ -229,10 +256,11 @@ const wrapBlockNode = ({
   nodeView,
   targetNode,
   colorScheme,
-  intl
+  intl,
+  isInserted = false
 }) => {
   const blockWrapper = createBlockNodeWrapper();
-  if (shouldShowRemovedLozenge(targetNode.type.name)) {
+  if (shouldShowRemovedLozenge(targetNode.type.name) && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
     const lozenge = createRemovedLozenge(intl);
     if (handleEmbedCardWithLozenge({
       dom,
@@ -257,7 +285,8 @@ const wrapBlockNode = ({
   const contentWrapper = createBlockNodeContentWrapper({
     nodeView,
     targetNode,
-    colorScheme
+    colorScheme,
+    isInserted
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
@@ -277,14 +306,23 @@ export const wrapBlockNodeView = ({
   nodeView,
   targetNode,
   colorScheme,
-  intl
+  intl,
+  isInserted = false
 }) => {
   if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
     // Apply deleted styles directly to preserve natural block-level margins
     applyStylesToElement({
       element: nodeView,
       targetNode,
-      colorScheme
+      colorScheme,
+      isInserted
+    });
+    dom.append(nodeView);
+  } else if (targetNode.type.name === 'table' && nodeView instanceof HTMLElement && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
+    applyCellOverlayStyles({
+      element: nodeView,
+      colorScheme,
+      isInserted
     });
     dom.append(nodeView);
   } else {
@@ -294,7 +332,8 @@ export const wrapBlockNodeView = ({
       nodeView,
       targetNode,
       colorScheme,
-      intl
+      intl,
+      isInserted
     });
   }
 };

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

@@ -4,6 +4,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { Step as ProseMirrorStep } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { calculateDiffDecorations } from './calculateDiffDecorations';
 import { NodeViewSerializer } from './NodeViewSerializer';
 import { scrollToActiveDecoration } from './scrollToActiveDecoration';
@@ -28,7 +29,10 @@ export const createPlugin = (config, getIntl, api) => {
           steps: [],
           originalDoc: undefined,
           decorations: DecorationSet.empty,
-          isDisplayingChanges: false
+          isDisplayingChanges: false,
+          ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+            isInverted: false
+          } : {})
         };
       },
       apply: (tr, currentPluginState, oldState, newState) => {
@@ -36,6 +40,7 @@ export const createPlugin = (config, getIntl, api) => {
         let 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 = {
               ...currentPluginState,
@@ -51,7 +56,10 @@ export const createPlugin = (config, getIntl, api) => {
               colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
               intl: getIntl(),
               activeIndexPos: fg('platform_editor_show_diff_scroll_navigation') ? newPluginState.activeIndexPos : undefined,
-              api
+              api,
+              ...(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;
@@ -61,7 +69,14 @@ export const createPlugin = (config, getIntl, api) => {
               ...meta,
               decorations: DecorationSet.empty,
               isDisplayingChanges: false,
-              activeIndex: undefined
+              activeIndex: undefined,
+              /**
+               * Reset isInverted state when hiding diffs
+               * Otherwise this should persist for the diff-showing session
+               */
+              ...(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') && fg('platform_editor_show_diff_scroll_navigation')) {
             // Update the active index in plugin state and recalculate decorations
@@ -99,7 +114,10 @@ export const createPlugin = (config, getIntl, api) => {
                 colorScheme: config === null || config === void 0 ? void 0 : config.colorScheme,
                 intl: getIntl(),
                 activeIndexPos: newPluginState.activeIndexPos,
-                api
+                api,
+                ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
+                  isInverted: newPluginState.isInverted
+                } : {})
               });
               newPluginState.decorations = updatedDecorations;
             }