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

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

@@ -31,7 +31,8 @@ const getChanges = ({
     if (diffType === 'block') {
       return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
     }
-    return simplifyChanges(changeset.changes, tr.doc);
+    const changes = simplifyChanges(changeset.changes, tr.doc);
+    return optimizeChanges(changes);
   }
   const changes = simplifyChanges(changeset.changes, tr.doc);
   return optimizeChanges(changes);
@@ -42,7 +43,8 @@ const calculateNodesForBlockDecoration = ({
   to,
   colorScheme,
   isInserted = true,
-  activeIndexPos
+  activeIndexPos,
+  shouldHideDeleted = false
 }) => {
   const decorations = [];
   // Iterate over the document nodes within the range
@@ -58,7 +60,8 @@ const calculateNodesForBlockDecoration = ({
         },
         colorScheme,
         isInserted,
-        isActive
+        isActive,
+        shouldHideDeleted
       });
       if (blockChangedDecorations.length) {
         decorations.push(...blockChangedDecorations);
@@ -76,7 +79,8 @@ const calculateDiffDecorationsInner = ({
   activeIndexPos,
   api,
   isInverted = false,
-  diffType = 'inline'
+  diffType = 'inline',
+  hideDeletedDiffs = false
 }) => {
   const {
     originalDoc,
@@ -143,12 +147,14 @@ const calculateDiffDecorationsInner = ({
     // Our default operations are insertions, so it should match the opposite of isInverted.
     const isInserted = !isInverted;
     if (change.inserted.length > 0) {
+      const shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && hideDeletedDiffs : false;
       decorations.push(createInlineChangedDecoration({
         change,
         colorScheme,
         isActive,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-          isInserted
+          isInserted,
+          shouldHideDeleted
         })
       }));
       decorations.push(...calculateNodesForBlockDecoration({
@@ -157,28 +163,32 @@ const calculateDiffDecorationsInner = ({
         to: change.toB,
         colorScheme,
         ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-          isInserted
+          isInserted,
+          shouldHideDeleted
         }),
         activeIndexPos,
         intl
       }));
     }
     if (change.deleted.length > 0) {
-      const decoration = createNodeChangedDecorationWidget({
-        change,
-        doc: originalDoc,
-        nodeViewSerializer,
-        colorScheme,
-        newDoc: tr.doc,
-        intl,
-        activeIndexPos,
-        ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-          isInserted: !isInserted,
-          diffType
-        })
-      });
-      if (decoration) {
-        decorations.push(...decoration);
+      const shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
+      if (!shouldHideDeleted) {
+        const decoration = createNodeChangedDecorationWidget({
+          change,
+          doc: originalDoc,
+          nodeViewSerializer,
+          colorScheme,
+          newDoc: tr.doc,
+          intl,
+          activeIndexPos,
+          ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+            isInserted: !isInserted,
+            diffType
+          })
+        });
+        if (decoration) {
+          decorations.push(...decoration);
+        }
       }
     }
   });
@@ -213,7 +223,8 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
   intl,
   activeIndexPos,
   isInverted,
-  diffType
+  diffType,
+  hideDeletedDiffs
 }], [{
   pluginState: lastPluginState,
   state: lastState,
@@ -221,13 +232,14 @@ export const calculateDiffDecorations = memoizeOne(calculateDiffDecorationsInner
   intl: lastIntl,
   activeIndexPos: lastActiveIndexPos,
   isInverted: lastIsInverted,
-  diffType: lastDiffType
+  diffType: lastDiffType,
+  hideDeletedDiffs: lastHideDeletedDiffs
 }]) => {
   var _ref2;
   const originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     var _ref;
-    return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref !== void 0 ? _ref : false;
+    return (_ref = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs) !== 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;
+  return (_ref2 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref2 !== void 0 ? _ref2 : false;
 });

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

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

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

@@ -4,6 +4,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, deletedCellOverlayStyle } from './colorSchemes/standard';
 import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariable, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from './colorSchemes/traditional';
+const displayNoneStyle = convertToInlineCss({
+  display: 'none'
+});
 const getNodeClass = name => {
   switch (name) {
     case 'extension':
@@ -99,9 +102,19 @@ export const createBlockChangedDecoration = ({
   change,
   colorScheme,
   isInserted = true,
-  isActive = false
+  isActive = false,
+  shouldHideDeleted = false
 }) => {
   const decorations = [];
+  if (shouldHideDeleted) {
+    return [Decoration.node(change.from, change.to, {
+      style: displayNoneStyle
+    }, {
+      key: 'diff-block',
+      nodeName: change.name
+    })];
+  }
+  let style;
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && ['tableCell', 'tableHeader'].includes(change.name)) {
     const cellOverlay = document.createElement('div');
     const cellOverlayStyle = isInserted ? colorScheme === 'traditional' ? traditionalAddedCellOverlayStyle : addedCellOverlayStyle : colorScheme === 'traditional' ? deletedTraditionalCellOverlayStyle : deletedCellOverlayStyle;
@@ -112,11 +125,6 @@ export const createBlockChangedDecoration = ({
       key: `diff-widget-cell-overlay-${change.to}`
     }));
   }
-  let style = getBlockNodeStyle({
-    nodeName: change.name,
-    colorScheme,
-    isActive
-  });
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     style = getBlockNodeStyle({
       nodeName: change.name,
@@ -124,6 +132,12 @@ export const createBlockChangedDecoration = ({
       isInserted,
       isActive
     });
+  } else {
+    style = getBlockNodeStyle({
+      nodeName: change.name,
+      colorScheme,
+      isActive
+    });
   }
   const className = getNodeClass(change.name);
   if (fg('platform_editor_show_diff_scroll_navigation')) {

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

@@ -1,8 +1,11 @@
+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 { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive } from './colorSchemes/standard';
 import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
-
+const displayNoneStyle = convertToInlineCss({
+  display: 'none'
+});
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -14,8 +17,16 @@ export const createInlineChangedDecoration = ({
   change,
   colorScheme,
   isActive = false,
-  isInserted = true
+  isInserted = true,
+  shouldHideDeleted = false
 }) => {
+  if (shouldHideDeleted) {
+    return Decoration.inline(change.fromB, change.toB, {
+      style: displayNoneStyle
+    }, {
+      key: 'diff-inline'
+    });
+  }
   let style;
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     if (isInserted) {

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

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

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

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

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

@@ -33,7 +33,8 @@ export const createPlugin = (config, getIntl, api) => {
           isDisplayingChanges: false,
           ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
             isInverted: false,
-            diffType: 'inline'
+            diffType: 'inline',
+            hideDeletedDiffs: false
           } : {})
         };
       },
@@ -42,7 +43,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, _newPluginState2;
+            var _newPluginState, _newPluginState2, _newPluginState3;
             // Update the plugin state with the new metadata
             newPluginState = {
               ...currentPluginState,
@@ -61,7 +62,8 @@ export const createPlugin = (config, getIntl, api) => {
               api,
               ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
                 isInverted: (_newPluginState = newPluginState) === null || _newPluginState === void 0 ? void 0 : _newPluginState.isInverted,
-                diffType: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType
+                diffType: (_newPluginState2 = newPluginState) === null || _newPluginState2 === void 0 ? void 0 : _newPluginState2.diffType,
+                hideDeletedDiffs: (_newPluginState3 = newPluginState) === null || _newPluginState3 === void 0 ? void 0 : _newPluginState3.hideDeletedDiffs
               } : {})
             });
             // Update the decorations
@@ -79,7 +81,8 @@ export const createPlugin = (config, getIntl, api) => {
                */
               ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
                 isInverted: false,
-                diffType: 'inline'
+                diffType: 'inline',
+                hideDeletedDiffs: 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')) {
@@ -120,7 +123,9 @@ export const createPlugin = (config, getIntl, api) => {
                 activeIndexPos: newPluginState.activeIndexPos,
                 api,
                 ...(expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? {
-                  isInverted: newPluginState.isInverted
+                  isInverted: newPluginState.isInverted,
+                  diffType: newPluginState.diffType,
+                  hideDeletedDiffs: newPluginState.hideDeletedDiffs
                 } : {})
               });
               newPluginState.decorations = updatedDecorations;

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

@@ -38,7 +38,8 @@ var getChanges = function getChanges(_ref) {
     if (diffType === 'block') {
       return groupChangesByBlock(changeset.changes, originalDoc, steppedDoc);
     }
-    return simplifyChanges(changeset.changes, tr.doc);
+    var _changes = simplifyChanges(changeset.changes, tr.doc);
+    return optimizeChanges(_changes);
   }
   var changes = simplifyChanges(changeset.changes, tr.doc);
   return optimizeChanges(changes);
@@ -50,7 +51,9 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
     colorScheme = _ref2.colorScheme,
     _ref2$isInserted = _ref2.isInserted,
     isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
-    activeIndexPos = _ref2.activeIndexPos;
+    activeIndexPos = _ref2.activeIndexPos,
+    _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
+    shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet;
   var decorations = [];
   // Iterate over the document nodes within the range
   doc.nodesBetween(from, to, function (node, pos) {
@@ -65,7 +68,8 @@ var calculateNodesForBlockDecoration = function calculateNodesForBlockDecoration
         },
         colorScheme: colorScheme,
         isInserted: isInserted,
-        isActive: isActive
+        isActive: isActive,
+        shouldHideDeleted: shouldHideDeleted
       });
       if (blockChangedDecorations.length) {
         decorations.push.apply(decorations, _toConsumableArray(blockChangedDecorations));
@@ -85,7 +89,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     _ref3$isInverted = _ref3.isInverted,
     isInverted = _ref3$isInverted === void 0 ? false : _ref3$isInverted,
     _ref3$diffType = _ref3.diffType,
-    diffType = _ref3$diffType === void 0 ? 'inline' : _ref3$diffType;
+    diffType = _ref3$diffType === void 0 ? 'inline' : _ref3$diffType,
+    _ref3$hideDeletedDiff = _ref3.hideDeletedDiffs,
+    hideDeletedDiffs = _ref3$hideDeletedDiff === void 0 ? false : _ref3$hideDeletedDiff;
   var originalDoc = pluginState.originalDoc,
     steps = pluginState.steps;
   if (!originalDoc || !pluginState.isDisplayingChanges) {
@@ -156,12 +162,14 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
     // Our default operations are insertions, so it should match the opposite of isInverted.
     var isInserted = !isInverted;
     if (change.inserted.length > 0) {
+      var shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? isInverted && hideDeletedDiffs : false;
       decorations.push(createInlineChangedDecoration(_objectSpread({
         change: change,
         colorScheme: colorScheme,
         isActive: isActive
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-        isInserted: isInserted
+        isInserted: isInserted,
+        shouldHideDeleted: shouldHideDeleted
       })));
       decorations.push.apply(decorations, _toConsumableArray(calculateNodesForBlockDecoration(_objectSpread(_objectSpread({
         doc: tr.doc,
@@ -169,27 +177,31 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref3
         to: change.toB,
         colorScheme: colorScheme
       }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-        isInserted: isInserted
+        isInserted: isInserted,
+        shouldHideDeleted: shouldHideDeleted
       }), {}, {
         activeIndexPos: activeIndexPos,
         intl: intl
       }))));
     }
     if (change.deleted.length > 0) {
-      var decoration = createNodeChangedDecorationWidget(_objectSpread({
-        change: change,
-        doc: originalDoc,
-        nodeViewSerializer: nodeViewSerializer,
-        colorScheme: colorScheme,
-        newDoc: tr.doc,
-        intl: intl,
-        activeIndexPos: activeIndexPos
-      }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
-        isInserted: !isInserted,
-        diffType: diffType
-      }));
-      if (decoration) {
-        decorations.push.apply(decorations, _toConsumableArray(decoration));
+      var _shouldHideDeleted = expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) ? !isInverted && hideDeletedDiffs : false;
+      if (!_shouldHideDeleted) {
+        var decoration = createNodeChangedDecorationWidget(_objectSpread({
+          change: change,
+          doc: originalDoc,
+          nodeViewSerializer: nodeViewSerializer,
+          colorScheme: colorScheme,
+          newDoc: tr.doc,
+          intl: intl,
+          activeIndexPos: activeIndexPos
+        }, expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) && {
+          isInserted: !isInserted,
+          diffType: diffType
+        }));
+        if (decoration) {
+          decorations.push.apply(decorations, _toConsumableArray(decoration));
+        }
       }
     }
   });
@@ -227,7 +239,8 @@ function (_ref4, _ref5) {
     intl = _ref6$.intl,
     activeIndexPos = _ref6$.activeIndexPos,
     isInverted = _ref6$.isInverted,
-    diffType = _ref6$.diffType;
+    diffType = _ref6$.diffType,
+    hideDeletedDiffs = _ref6$.hideDeletedDiffs;
   var _ref7 = _slicedToArray(_ref5, 1),
     _ref7$ = _ref7[0],
     lastPluginState = _ref7$.pluginState,
@@ -236,11 +249,12 @@ function (_ref4, _ref5) {
     lastIntl = _ref7$.intl,
     lastActiveIndexPos = _ref7$.activeIndexPos,
     lastIsInverted = _ref7$.isInverted,
-    lastDiffType = _ref7$.diffType;
+    lastDiffType = _ref7$.diffType,
+    lastHideDeletedDiffs = _ref7$.hideDeletedDiffs;
   var originalDocIsSame = lastPluginState.originalDoc && pluginState.originalDoc && pluginState.originalDoc.eq(lastPluginState.originalDoc);
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     var _ref8;
-    return (_ref8 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc)) !== null && _ref8 !== void 0 ? _ref8 : false;
+    return (_ref8 = colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isInverted === lastIsInverted && diffType === lastDiffType && isEqual(activeIndexPos, lastActiveIndexPos) && originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref8 !== void 0 ? _ref8 : false;
   }
-  return (_ref9 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos)) !== null && _ref9 !== void 0 ? _ref9 : false;
+  return (_ref9 = originalDocIsSame && isEqual(pluginState.steps, lastPluginState.steps) && state.doc.eq(lastState.doc) && colorScheme === lastColorScheme && intl.locale === lastIntl.locale && isEqual(activeIndexPos, lastActiveIndexPos) && hideDeletedDiffs === lastHideDeletedDiffs) !== null && _ref9 !== void 0 ? _ref9 : false;
 });

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

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