@atlaskit/editor-plugin-show-diff 6.2.10 → 6.2.12

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

@@ -32,13 +32,6 @@ export const deletedContentStyleNew = convertToInlineCss({
   position: 'relative',
   opacity: 0.8
 });
-export const deletedContentStyleNewActive = convertToInlineCss({
-  color: "var(--ds-text, #292A2E)",
-  textDecoration: 'line-through',
-  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
-  position: 'relative',
-  opacity: 1
-});
 export const deletedContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -66,7 +59,7 @@ export const deletedStyleQuoteNodeWithLozengeActive = convertToInlineCss({
   paddingTop: "var(--ds-space-025, 2px)",
   paddingBottom: "var(--ds-space-025, 2px)",
   paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  boxShadow: `0 0 0 4px ${"var(--ds-border-accent-red, #E2483D)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export const deletedBlockOutline = convertToInlineCss({
@@ -74,7 +67,7 @@ export const deletedBlockOutline = convertToInlineCss({
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export const deletedBlockOutlineActive = convertToInlineCss({
-  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  boxShadow: `0 0 0 4px ${"var(--ds-border-accent-red, #E2483D)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export const deletedBlockOutlineRounded = convertToInlineCss({
@@ -82,7 +75,7 @@ export const deletedBlockOutlineRounded = convertToInlineCss({
   borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
 });
 export const deletedBlockOutlineRoundedActive = convertToInlineCss({
-  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  boxShadow: `0 0 0 4px ${"var(--ds-border-accent-red, #E2483D)"}`,
   borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
 });
 export const deletedRowStyle = convertToInlineCss({
@@ -106,7 +99,8 @@ export const editingStyleCardBlockNode = convertToInlineCss({
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
 export const standardDecorationMarkerVariable = convertToInlineCss({
-  '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
+  '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)",
+  '--diff-decoration-marker-ring-width': '1px'
 });
 export const addedCellOverlayStyle = convertToInlineCss({
   position: 'absolute',

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

@@ -13,21 +13,22 @@ export const traditionalInsertStyleActive = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
 });
-export const deletedTraditionalContentStyle = convertToInlineCss({
+const deletedTraditionalInlineStyleBase = {
   textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
   textDecoration: 'line-through',
   position: 'relative',
   opacity: 1
-});
+};
+const deletedTraditionalInlineStyleActiveBase = {
+  ...deletedTraditionalInlineStyleBase,
+  textDecorationThickness: '2px',
+  backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)"
+};
 
-/** Emphasised (pressed) strikethrough for traditional removed text when active */
-export const deletedTraditionalContentStyleActive = convertToInlineCss({
-  textDecorationColor: "var(--ds-text-accent-red, #AE2E24)",
-  textDecoration: 'line-through',
-  backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)",
-  position: 'relative',
-  opacity: 1
-});
+/** Strikethrough for traditional removed inline / widget content (non-marker decorations). */
+export function getDeletedTraditionalInlineStyle(isActive) {
+  return isActive ? convertToInlineCss(deletedTraditionalInlineStyleActiveBase) : convertToInlineCss(deletedTraditionalInlineStyleBase);
+}
 export const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -38,7 +39,7 @@ export const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   zIndex: 1
 });
 
-/** Emphasised (pressed) strikethrough line for traditional when active */
+/** Strikethrough line for traditional when active (background highlight on text wrapper) */
 export const deletedTraditionalContentStyleUnboundedActive = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -61,7 +62,7 @@ export const deletedTraditionalStyleQuoteNodeActive = convertToInlineCss({
   paddingTop: "var(--ds-space-025, 2px)",
   paddingBottom: "var(--ds-space-025, 2px)",
   paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export const deletedTraditionalBlockOutline = convertToInlineCss({
@@ -69,7 +70,7 @@ export const deletedTraditionalBlockOutline = convertToInlineCss({
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export const deletedTraditionalBlockOutlineActive = convertToInlineCss({
-  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export const deletedTraditionalBlockOutlineRounded = convertToInlineCss({
@@ -77,7 +78,17 @@ export const deletedTraditionalBlockOutlineRounded = convertToInlineCss({
   borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
 });
 export const deletedTraditionalBlockOutlineRoundedActive = convertToInlineCss({
-  boxShadow: `0 0 0 2px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
+  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+});
+
+/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+export const deletedTraditionalBlockOutlineNew = convertToInlineCss({
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedTraditionalBlockOutlineRoundedNew = convertToInlineCss({
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
   borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
 });
 export const deletedTraditionalRowStyle = convertToInlineCss({
@@ -89,36 +100,79 @@ export const deletedTraditionalRowStyle = convertToInlineCss({
 export const traditionalStyleQuoteNode = convertToInlineCss({
   borderLeft: `2px solid ${"var(--ds-border-accent-green, #22A06B)"}`
 });
+export const traditionalStyleQuoteNodeNew = convertToInlineCss({
+  borderLeft: `4px solid ${"var(--ds-background-accent-green-subtlest, #DCFFF1)"}`
+});
 export const traditionalStyleQuoteNodeActive = convertToInlineCss({
-  borderLeft: `2px solid ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`
+  borderLeft: `4px solid ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`
 });
 export const traditionalStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
+export const traditionalStyleRuleNodeNew = convertToInlineCss({
+  backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  border: 'none',
+  height: '4px',
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export const traditionalStyleRuleNodeActive = convertToInlineCss({
-  backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"
+  backgroundColor: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
+  border: 'none',
+  height: '4px',
+  borderRadius: "var(--ds-radius-small, 4px)"
 });
 export const traditionalStyleNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+export const traditionalStyleNodeNew = convertToInlineCss({
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-green-subtlest, #DCFFF1)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export const traditionalStyleNodeActive = convertToInlineCss({
-  boxShadow: `0 0 0 2px ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`,
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export const traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+export const traditionalStyleCardBlockNodeNew = convertToInlineCss({
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-green-subtlest, #DCFFF1)"}`,
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
 export const traditionalStyleCardBlockNodeActive = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`,
+  boxShadow: `0 0 0 4px ${"var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"}`,
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
 export const traditionalDecorationMarkerVariable = convertToInlineCss({
-  '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
+  '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)",
+  '--diff-decoration-marker-ring-width': '1px'
+});
+export const traditionalDecorationMarkerVariableNew = convertToInlineCss({
+  '--diff-decoration-marker-color': "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  '--diff-decoration-marker-ring-width': '4px'
 });
 export const traditionalDecorationMarkerVariableActive = convertToInlineCss({
-  '--diff-decoration-marker-color': "var(--ds-text-accent-green, #216E4E)"
+  '--diff-decoration-marker-color': "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
+  '--diff-decoration-marker-ring-width': '4px'
+});
+
+/** Inline deleted traditional styling plus diff marker CSS variables (extension / embedCard / listItem). */
+export const traditionalDeletedDecorationMarkerVariable = convertToInlineCss({
+  ...deletedTraditionalInlineStyleBase,
+  '--diff-decoration-marker-color': "var(--ds-border-accent-red, #E2483D)",
+  '--diff-decoration-marker-ring-width': '1px'
+});
+export const traditionalDeletedDecorationMarkerVariableNew = convertToInlineCss({
+  ...deletedTraditionalInlineStyleBase,
+  '--diff-decoration-marker-color': "var(--ds-background-accent-red-subtlest, #FFECEB)",
+  '--diff-decoration-marker-ring-width': '4px'
+});
+export const traditionalDeletedDecorationMarkerVariableActive = convertToInlineCss({
+  ...deletedTraditionalInlineStyleActiveBase,
+  '--diff-decoration-marker-color': "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  '--diff-decoration-marker-ring-width': '4px'
 });
 export const traditionalAddedCellOverlayStyle = convertToInlineCss({
   position: 'absolute',
@@ -131,6 +185,17 @@ export const traditionalAddedCellOverlayStyle = convertToInlineCss({
   outline: `1px solid ${"var(--ds-border-accent-green, #22A06B)"}`,
   pointerEvents: 'none'
 });
+export const traditionalAddedCellOverlayStyleNew = 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-background-accent-green-subtler-pressed, #7EE2B8)"}`,
+  pointerEvents: 'none'
+});
 export const deletedTraditionalCellOverlayStyle = convertToInlineCss({
   position: 'absolute',
   top: 0,

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

@@ -2,7 +2,7 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 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 } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleNode, traditionalStyleNodeActive, deletedTraditionalContentStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
+import { traditionalDecorationMarkerVariable, traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariable, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNode, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNode, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNode, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNode, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode } from './colorSchemes/traditional';
 const getNodeClass = name => {
   switch (name) {
     case 'extension':
@@ -29,51 +29,51 @@ const getBlockNodeStyle = ({
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+        return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? fg('platform_editor_show_diff_scroll_navigation') ? traditionalDecorationMarkerVariableNew : traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
       } else {
-        return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
+        return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? fg('platform_editor_show_diff_scroll_navigation') ? traditionalDeletedDecorationMarkerVariableNew : traditionalDeletedDecorationMarkerVariable : deletedContentStyleNew;
       }
     }
-    return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+    return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? fg('platform_editor_show_diff_scroll_navigation') ? traditionalDecorationMarkerVariableNew : traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNode : editingStyleQuoteNode;
+        return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleQuoteNodeNew : traditionalStyleQuoteNode : editingStyleQuoteNode;
       } else {
         return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNode;
       }
     }
-    return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNode : editingStyleQuoteNode;
+    return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleQuoteNodeNew : traditionalStyleQuoteNode : editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNode : editingStyleRuleNode;
+        return isTraditional ? isActive ? traditionalStyleRuleNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleRuleNodeNew : traditionalStyleRuleNode : editingStyleRuleNode;
       } else {
-        return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
+        return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
       }
     }
-    return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNode : editingStyleRuleNode;
+    return isTraditional ? isActive ? traditionalStyleRuleNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleRuleNodeNew : traditionalStyleRuleNode : editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
     if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+        return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleCardBlockNodeNew : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
       } else {
-        return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
+        return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
       }
     }
-    return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+    return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleCardBlockNodeNew : traditionalStyleCardBlockNode : editingStyleCardBlockNode;
   }
   if (expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     if (isInserted) {
-      return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNode : editingStyleNode;
+      return isTraditional ? isActive ? traditionalStyleNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleNodeNew : traditionalStyleNode : editingStyleNode;
     } else {
-      return isTraditional ? deletedTraditionalContentStyle : deletedContentStyleNew;
+      return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
     }
   }
-  return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNode : editingStyleNode;
+  return isTraditional ? isActive ? traditionalStyleNodeActive : fg('platform_editor_show_diff_scroll_navigation') ? traditionalStyleNodeNew : traditionalStyleNode : editingStyleNode;
 };
 
 /**

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

@@ -1,7 +1,7 @@
 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, deletedTraditionalContentStyle } from './colorSchemes/traditional';
+import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
 
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -26,7 +26,7 @@ export const createInlineChangedDecoration = ({
       }
     } else {
       if (colorScheme === 'traditional') {
-        style = deletedTraditionalContentStyle;
+        style = getDeletedTraditionalInlineStyle(false);
       } else {
         style = isActive ? deletedContentStyleActive : deletedContentStyle;
       }

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

@@ -2,8 +2,8 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
-import { traditionalInsertStyle, traditionalInsertStyleActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleActive, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
+import { editingStyle, editingStyleActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded } from './colorSchemes/standard';
+import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive } from './colorSchemes/traditional';
 import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
@@ -27,10 +27,10 @@ const getInsertedContentStyle = (colorScheme, isActive = false) => {
 };
 const getDeletedContentStyle = (colorScheme, isActive = false) => {
   if (colorScheme === 'traditional') {
-    return isActive ? deletedTraditionalContentStyleActive : deletedTraditionalContentStyle;
+    return getDeletedTraditionalInlineStyle(isActive);
   }
   if (isActive) {
-    return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
+    return deletedContentStyleActive;
   }
   return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };

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

@@ -1,8 +1,9 @@
 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, deletedContentStyleNewActive, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingStyle, editingStyleActive, editingStyleNode, addedCellOverlayStyle, deletedCellOverlayStyle } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutline, deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineRounded, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalContentStyle, deletedTraditionalContentStyleActive, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNode, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle } from '../colorSchemes/traditional';
+import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, 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',
   boxSizing: 'border-box',
@@ -59,10 +60,10 @@ const getChangedContentStyle = (colorScheme, isActive = false, isInserted = fals
     return isActive ? editingStyleActive : editingStyle;
   }
   if (colorScheme === 'traditional') {
-    return isActive ? deletedTraditionalContentStyleActive : deletedTraditionalContentStyle;
+    return getDeletedTraditionalInlineStyle(isActive);
   }
   if (isActive) {
-    return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNewActive : deletedContentStyleActive;
+    return deletedContentStyleActive;
   }
   return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };
@@ -73,7 +74,10 @@ const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false, isActive
       return undefined;
     }
     if (isTraditional) {
-      return traditionalStyleNode;
+      if (fg('platform_editor_show_diff_scroll_navigation')) {
+        return isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew;
+      }
+      return isActive ? traditionalStyleNodeActive : traditionalStyleNode;
     }
     return editingStyleNode;
   }
@@ -86,13 +90,13 @@ const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false, isActive
     case 'expand':
     case 'decisionList':
       if (isTraditional) {
-        return isActive ? deletedTraditionalBlockOutlineActive : deletedTraditionalBlockOutline;
+        return isActive ? deletedTraditionalBlockOutlineActive : fg('platform_editor_show_diff_scroll_navigation') ? deletedTraditionalBlockOutlineNew : deletedTraditionalBlockOutline;
       }
       return isActive ? deletedBlockOutlineActive : deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
       if (isTraditional) {
-        return isActive ? deletedTraditionalBlockOutlineRoundedActive : deletedTraditionalBlockOutlineRounded;
+        return isActive ? deletedTraditionalBlockOutlineRoundedActive : fg('platform_editor_show_diff_scroll_navigation') ? deletedTraditionalBlockOutlineRoundedNew : deletedTraditionalBlockOutlineRounded;
       }
       return isActive ? deletedBlockOutlineRoundedActive : deletedBlockOutlineRounded;
     default:
@@ -124,6 +128,22 @@ const shouldAddShowDiffDeletedNodeClass = nodeName => {
   }
 };
 
+/** Scroll-nav “new” ring (4px red subtlest) for media/embed; styled in editor-core smartCardStyles. */
+const maybeAddDeletedOutlineNewClass = ({
+  nodeView,
+  targetNode,
+  colorScheme,
+  isActive = false
+}) => {
+  const name = targetNode.type.name;
+  if (name !== 'mediaSingle' && name !== 'embedCard') {
+    return;
+  }
+  if (colorScheme === 'traditional' && !isActive && fg('platform_editor_show_diff_scroll_navigation')) {
+    nodeView.classList.add('show-diff-deleted-outline-new');
+  }
+};
+
 /**
  * Checks if a node should apply deleted styles directly without wrapper
  * to preserve natural block-level margins
@@ -138,7 +158,7 @@ const applyCellOverlayStyles = ({
 }) => {
   element.querySelectorAll('td, th').forEach(cell => {
     const overlay = document.createElement('span');
-    const overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
+    const overlayStyle = colorScheme === 'traditional' ? isInserted ? fg('platform_editor_show_diff_scroll_navigation') ? traditionalAddedCellOverlayStyleNew : traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
     overlay.setAttribute('style', overlayStyle);
     cell.appendChild(overlay);
   });
@@ -255,6 +275,12 @@ const handleEmbedCardWithLozenge = ({
     if (isActive) {
       nodeView.classList.add('show-diff-deleted-active');
     }
+    maybeAddDeletedOutlineNewClass({
+      nodeView,
+      targetNode,
+      colorScheme,
+      isActive
+    });
   }
   dom.append(nodeView);
   return true;
@@ -295,6 +321,12 @@ const handleMediaSingleWithLozenge = ({
     if (isActive) {
       nodeView.classList.add('show-diff-deleted-active');
     }
+    maybeAddDeletedOutlineNewClass({
+      nodeView,
+      targetNode,
+      colorScheme,
+      isActive
+    });
   }
   dom.append(nodeView);
   return true;
@@ -351,6 +383,12 @@ const wrapBlockNode = ({
     if (isActive) {
       nodeView.classList.add('show-diff-deleted-active');
     }
+    maybeAddDeletedOutlineNewClass({
+      nodeView,
+      targetNode,
+      colorScheme,
+      isActive
+    });
   }
   dom.append(blockWrapper);
 };

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

@@ -32,13 +32,6 @@ export var deletedContentStyleNew = convertToInlineCss({
   position: 'relative',
   opacity: 0.8
 });
-export var deletedContentStyleNewActive = convertToInlineCss({
-  color: "var(--ds-text, #292A2E)",
-  textDecoration: 'line-through',
-  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
-  position: 'relative',
-  opacity: 1
-});
 export var deletedContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -66,7 +59,7 @@ export var deletedStyleQuoteNodeWithLozengeActive = convertToInlineCss({
   paddingTop: "var(--ds-space-025, 2px)",
   paddingBottom: "var(--ds-space-025, 2px)",
   paddingLeft: "var(--ds-space-025, 2px)",
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export var deletedBlockOutline = convertToInlineCss({
@@ -74,7 +67,7 @@ export var deletedBlockOutline = convertToInlineCss({
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export var deletedBlockOutlineActive = convertToInlineCss({
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export var deletedBlockOutlineRounded = convertToInlineCss({
@@ -82,7 +75,7 @@ export var deletedBlockOutlineRounded = convertToInlineCss({
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 export var deletedBlockOutlineRoundedActive = convertToInlineCss({
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 export var deletedRowStyle = convertToInlineCss({
@@ -106,7 +99,8 @@ export var editingStyleCardBlockNode = convertToInlineCss({
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
 export var standardDecorationMarkerVariable = convertToInlineCss({
-  '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
+  '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)",
+  '--diff-decoration-marker-ring-width': '1px'
 });
 export var addedCellOverlayStyle = convertToInlineCss({
   position: 'absolute',