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

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

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 export var traditionalInsertStyle = convertToInlineCss({
   background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
@@ -13,21 +16,21 @@ export var traditionalInsertStyleActive = convertToInlineCss({
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
 });
-export var deletedTraditionalContentStyle = convertToInlineCss({
+var deletedTraditionalInlineStyleBase = {
   textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
   textDecoration: 'line-through',
   position: 'relative',
   opacity: 1
+};
+var deletedTraditionalInlineStyleActiveBase = _objectSpread(_objectSpread({}, deletedTraditionalInlineStyleBase), {}, {
+  textDecorationThickness: '2px',
+  backgroundColor: "var(--ds-background-accent-red-subtlest-pressed, #FFB8B2)"
 });
 
-/** Emphasised (pressed) strikethrough for traditional removed text when active */
-export var 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 var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -38,7 +41,7 @@ export var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   zIndex: 1
 });
 
-/** Emphasised (pressed) strikethrough line for traditional when active */
+/** Strikethrough line for traditional when active (background highlight on text wrapper) */
 export var deletedTraditionalContentStyleUnboundedActive = convertToInlineCss({
   position: 'absolute',
   top: '50%',
@@ -61,7 +64,7 @@ export var 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 ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export var deletedTraditionalBlockOutline = convertToInlineCss({
@@ -69,7 +72,7 @@ export var deletedTraditionalBlockOutline = convertToInlineCss({
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export var deletedTraditionalBlockOutlineActive = convertToInlineCss({
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export var deletedTraditionalBlockOutlineRounded = convertToInlineCss({
@@ -77,7 +80,17 @@ export var deletedTraditionalBlockOutlineRounded = convertToInlineCss({
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 export var deletedTraditionalBlockOutlineRoundedActive = convertToInlineCss({
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
+  borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
+});
+
+/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+export var deletedTraditionalBlockOutlineNew = convertToInlineCss({
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export var deletedTraditionalBlockOutlineRoundedNew = convertToInlineCss({
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 export var deletedTraditionalRowStyle = convertToInlineCss({
@@ -89,37 +102,77 @@ export var deletedTraditionalRowStyle = convertToInlineCss({
 export var traditionalStyleQuoteNode = convertToInlineCss({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
 });
+export var traditionalStyleQuoteNodeNew = convertToInlineCss({
+  borderLeft: "4px solid ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)")
+});
 export var traditionalStyleQuoteNodeActive = convertToInlineCss({
-  borderLeft: "2px solid ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)")
+  borderLeft: "4px solid ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)")
 });
 export var traditionalStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
+export var traditionalStyleRuleNodeNew = convertToInlineCss({
+  backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  border: 'none',
+  height: '4px',
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export var 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 var traditionalStyleNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+export var traditionalStyleNodeNew = convertToInlineCss({
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 export var traditionalStyleNodeActive = convertToInlineCss({
-  boxShadow: "0 0 0 2px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 export var traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+export var traditionalStyleCardBlockNodeNew = convertToInlineCss({
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
 export var traditionalStyleCardBlockNodeActive = convertToInlineCss({
-  boxShadow: "0 0 0 1px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
 export var 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 var traditionalDecorationMarkerVariableNew = convertToInlineCss({
+  '--diff-decoration-marker-color': "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  '--diff-decoration-marker-ring-width': '4px'
 });
 export var 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 var traditionalDeletedDecorationMarkerVariable = convertToInlineCss(_objectSpread(_objectSpread({}, deletedTraditionalInlineStyleBase), {}, {
+  '--diff-decoration-marker-color': "var(--ds-border-accent-red, #E2483D)",
+  '--diff-decoration-marker-ring-width': '1px'
+}));
+export var traditionalDeletedDecorationMarkerVariableNew = convertToInlineCss(_objectSpread(_objectSpread({}, deletedTraditionalInlineStyleBase), {}, {
+  '--diff-decoration-marker-color': "var(--ds-background-accent-red-subtlest, #FFECEB)",
+  '--diff-decoration-marker-ring-width': '4px'
+}));
+export var traditionalDeletedDecorationMarkerVariableActive = convertToInlineCss(_objectSpread(_objectSpread({}, deletedTraditionalInlineStyleActiveBase), {}, {
+  '--diff-decoration-marker-color': "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  '--diff-decoration-marker-ring-width': '4px'
+}));
 export var traditionalAddedCellOverlayStyle = convertToInlineCss({
   position: 'absolute',
   top: 0,
@@ -131,6 +184,17 @@ export var traditionalAddedCellOverlayStyle = convertToInlineCss({
   outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
   pointerEvents: 'none'
 });
+export var traditionalAddedCellOverlayStyleNew = convertToInlineCss({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: "rgba(from ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)", " r g b / 0.5)"),
+  zIndex: 1,
+  outline: "1px solid ".concat("var(--ds-background-accent-green-subtler-pressed, #7EE2B8)"),
+  pointerEvents: 'none'
+});
 export var deletedTraditionalCellOverlayStyle = convertToInlineCss({
   position: 'absolute',
   top: 0,

package/dist/esm/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';
 var getNodeClass = function getNodeClass(name) {
   switch (name) {
     case 'extension':
@@ -30,51 +30,51 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   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/esm/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
@@ -27,7 +27,7 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
       }
     } else {
       if (colorScheme === 'traditional') {
-        style = deletedTraditionalContentStyle;
+        style = getDeletedTraditionalInlineStyle(false);
       } else {
         style = isActive ? deletedContentStyleActive : deletedContentStyle;
       }

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

@@ -3,8 +3,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';
@@ -31,10 +31,10 @@ var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
 var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
   var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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/esm/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';
 var lozengeStyle = convertToInlineCss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -61,10 +62,10 @@ var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
     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;
 };
@@ -77,7 +78,10 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
       return undefined;
     }
     if (isTraditional) {
-      return traditionalStyleNode;
+      if (fg('platform_editor_show_diff_scroll_navigation')) {
+        return isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew;
+      }
+      return isActive ? traditionalStyleNodeActive : traditionalStyleNode;
     }
     return editingStyleNode;
   }
@@ -90,13 +94,13 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
     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:
@@ -128,6 +132,22 @@ var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeCla
   }
 };
 
+/** Scroll-nav “new” ring (4px red subtlest) for media/embed; styled in editor-core smartCardStyles. */
+var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_ref) {
+  var nodeView = _ref.nodeView,
+    targetNode = _ref.targetNode,
+    colorScheme = _ref.colorScheme,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive;
+  var 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
@@ -135,13 +155,13 @@ 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;
+var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
+  var element = _ref2.element,
+    colorScheme = _ref2.colorScheme,
+    isInserted = _ref2.isInserted;
   element.querySelectorAll('td, th').forEach(function (cell) {
     var overlay = document.createElement('span');
-    var overlayStyle = colorScheme === 'traditional' ? isInserted ? traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
+    var overlayStyle = colorScheme === 'traditional' ? isInserted ? fg('platform_editor_show_diff_scroll_navigation') ? traditionalAddedCellOverlayStyleNew : traditionalAddedCellOverlayStyle : deletedTraditionalCellOverlayStyle : isInserted ? addedCellOverlayStyle : deletedCellOverlayStyle;
     overlay.setAttribute('style', overlayStyle);
     cell.appendChild(overlay);
   });
@@ -191,12 +211,12 @@ var createBlockNodeWrapper = function createBlockNodeWrapper() {
 /**
  * Applies styles directly to an HTML element by merging with existing styles
  */
-var applyStylesToElement = function applyStylesToElement(_ref2) {
-  var element = _ref2.element,
-    targetNode = _ref2.targetNode,
-    colorScheme = _ref2.colorScheme,
-    isActive = _ref2.isActive,
-    isInserted = _ref2.isInserted;
+var applyStylesToElement = function applyStylesToElement(_ref3) {
+  var element = _ref3.element,
+    targetNode = _ref3.targetNode,
+    colorScheme = _ref3.colorScheme,
+    isActive = _ref3.isActive,
+    isInserted = _ref3.isInserted;
   var currentStyle = element.getAttribute('style') || '';
   var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted);
   var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive) || '';
@@ -206,12 +226,12 @@ var applyStylesToElement = function applyStylesToElement(_ref2) {
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref3) {
-  var nodeView = _ref3.nodeView,
-    targetNode = _ref3.targetNode,
-    colorScheme = _ref3.colorScheme,
-    isActive = _ref3.isActive,
-    isInserted = _ref3.isInserted;
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref4) {
+  var nodeView = _ref4.nodeView,
+    targetNode = _ref4.targetNode,
+    colorScheme = _ref4.colorScheme,
+    isActive = _ref4.isActive,
+    isInserted = _ref4.isInserted;
   var contentWrapper = document.createElement('div');
   var nodeStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive);
   contentWrapper.setAttribute('style', "".concat(getChangedContentStyle(colorScheme, isActive, isInserted)).concat(nodeStyle || ''));
@@ -225,14 +245,14 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref3
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
-  var dom = _ref4.dom,
-    nodeView = _ref4.nodeView,
-    targetNode = _ref4.targetNode,
-    lozenge = _ref4.lozenge,
-    colorScheme = _ref4.colorScheme,
-    _ref4$isActive = _ref4.isActive,
-    isActive = _ref4$isActive === void 0 ? false : _ref4$isActive;
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref5) {
+  var dom = _ref5.dom,
+    nodeView = _ref5.nodeView,
+    targetNode = _ref5.targetNode,
+    lozenge = _ref5.lozenge,
+    colorScheme = _ref5.colorScheme,
+    _ref5$isActive = _ref5.isActive,
+    isActive = _ref5$isActive === void 0 ? false : _ref5$isActive;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -258,6 +278,12 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
     if (isActive) {
       nodeView.classList.add('show-diff-deleted-active');
     }
+    maybeAddDeletedOutlineNewClass({
+      nodeView: nodeView,
+      targetNode: targetNode,
+      colorScheme: colorScheme,
+      isActive: isActive
+    });
   }
   dom.append(nodeView);
   return true;
@@ -267,14 +293,14 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref4) {
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5) {
-  var dom = _ref5.dom,
-    nodeView = _ref5.nodeView,
-    targetNode = _ref5.targetNode,
-    lozenge = _ref5.lozenge,
-    colorScheme = _ref5.colorScheme,
-    _ref5$isActive = _ref5.isActive,
-    isActive = _ref5$isActive === void 0 ? false : _ref5$isActive;
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref6) {
+  var dom = _ref6.dom,
+    nodeView = _ref6.nodeView,
+    targetNode = _ref6.targetNode,
+    lozenge = _ref6.lozenge,
+    colorScheme = _ref6.colorScheme,
+    _ref6$isActive = _ref6.isActive,
+    isActive = _ref6$isActive === void 0 ? false : _ref6$isActive;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -298,6 +324,12 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5)
     if (isActive) {
       nodeView.classList.add('show-diff-deleted-active');
     }
+    maybeAddDeletedOutlineNewClass({
+      nodeView: nodeView,
+      targetNode: targetNode,
+      colorScheme: colorScheme,
+      isActive: isActive
+    });
   }
   dom.append(nodeView);
   return true;
@@ -306,16 +338,16 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref5)
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var wrapBlockNode = function wrapBlockNode(_ref6) {
-  var dom = _ref6.dom,
-    nodeView = _ref6.nodeView,
-    targetNode = _ref6.targetNode,
-    colorScheme = _ref6.colorScheme,
-    intl = _ref6.intl,
-    _ref6$isActive = _ref6.isActive,
-    isActive = _ref6$isActive === void 0 ? false : _ref6$isActive,
-    _ref6$isInserted = _ref6.isInserted,
-    isInserted = _ref6$isInserted === void 0 ? false : _ref6$isInserted;
+var wrapBlockNode = function wrapBlockNode(_ref7) {
+  var dom = _ref7.dom,
+    nodeView = _ref7.nodeView,
+    targetNode = _ref7.targetNode,
+    colorScheme = _ref7.colorScheme,
+    intl = _ref7.intl,
+    _ref7$isActive = _ref7.isActive,
+    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive,
+    _ref7$isInserted = _ref7.isInserted,
+    isInserted = _ref7$isInserted === void 0 ? false : _ref7$isInserted;
   var blockWrapper = createBlockNodeWrapper();
   if (shouldShowRemovedLozenge(targetNode.type.name) && (!expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
     var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
@@ -355,6 +387,12 @@ var wrapBlockNode = function wrapBlockNode(_ref6) {
     if (isActive) {
       nodeView.classList.add('show-diff-deleted-active');
     }
+    maybeAddDeletedOutlineNewClass({
+      nodeView: nodeView,
+      targetNode: targetNode,
+      colorScheme: colorScheme,
+      isActive: isActive
+    });
   }
   dom.append(blockWrapper);
 };
@@ -364,16 +402,16 @@ var wrapBlockNode = function wrapBlockNode(_ref6) {
  * For heading nodes, applies styles directly to preserve natural margins.
  * For other block nodes, uses wrapper approach with optional lozenge.
  */
-export var wrapBlockNodeView = function wrapBlockNodeView(_ref7) {
-  var dom = _ref7.dom,
-    nodeView = _ref7.nodeView,
-    targetNode = _ref7.targetNode,
-    colorScheme = _ref7.colorScheme,
-    intl = _ref7.intl,
-    _ref7$isActive = _ref7.isActive,
-    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive,
-    _ref7$isInserted = _ref7.isInserted,
-    isInserted = _ref7$isInserted === void 0 ? false : _ref7$isInserted;
+export var wrapBlockNodeView = function wrapBlockNodeView(_ref8) {
+  var dom = _ref8.dom,
+    nodeView = _ref8.nodeView,
+    targetNode = _ref8.targetNode,
+    colorScheme = _ref8.colorScheme,
+    intl = _ref8.intl,
+    _ref8$isActive = _ref8.isActive,
+    isActive = _ref8$isActive === void 0 ? false : _ref8$isActive,
+    _ref8$isInserted = _ref8.isInserted,
+    isInserted = _ref8$isInserted === void 0 ? false : _ref8$isInserted;
   if (shouldApplyStylesDirectly(targetNode.type.name) && nodeView instanceof HTMLElement) {
     // Apply deleted styles directly to preserve natural block-level margins
     applyStylesToElement({

package/dist/types/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -3,7 +3,6 @@ export declare const editingStyleActive: string;
 export declare const deletedContentStyle: string;
 export declare const deletedContentStyleActive: string;
 export declare const deletedContentStyleNew: string;
-export declare const deletedContentStyleNewActive: string;
 export declare const deletedContentStyleUnbounded: string;
 export declare const deletedStyleQuoteNode: string;
 export declare const deletedStyleQuoteNodeWithLozenge: string;

package/dist/types/pm-plugins/decorations/colorSchemes/traditional.d.ts

@@ -1,10 +1,9 @@
 export declare const traditionalInsertStyle: string;
 export declare const traditionalInsertStyleActive: string;
-export declare const deletedTraditionalContentStyle: string;
-/** Emphasised (pressed) strikethrough for traditional removed text when active */
-export declare const deletedTraditionalContentStyleActive: string;
+/** Strikethrough for traditional removed inline / widget content (non-marker decorations). */
+export declare function getDeletedTraditionalInlineStyle(isActive: boolean): string;
 export declare const deletedTraditionalContentStyleUnbounded: string;
-/** Emphasised (pressed) strikethrough line for traditional when active */
+/** Strikethrough line for traditional when active (background highlight on text wrapper) */
 export declare const deletedTraditionalContentStyleUnboundedActive: string;
 export declare const deletedTraditionalStyleQuoteNode: string;
 export declare const deletedTraditionalStyleQuoteNodeActive: string;
@@ -12,16 +11,29 @@ export declare const deletedTraditionalBlockOutline: string;
 export declare const deletedTraditionalBlockOutlineActive: string;
 export declare const deletedTraditionalBlockOutlineRounded: string;
 export declare const deletedTraditionalBlockOutlineRoundedActive: string;
+/** Scroll-navigation “new” emphasis: 4px ring (see {@link traditionalStyleNodeNew}). */
+export declare const deletedTraditionalBlockOutlineNew: string;
+export declare const deletedTraditionalBlockOutlineRoundedNew: string;
 export declare const deletedTraditionalRowStyle: string;
 export declare const traditionalStyleQuoteNode: string;
+export declare const traditionalStyleQuoteNodeNew: string;
 export declare const traditionalStyleQuoteNodeActive: string;
 export declare const traditionalStyleRuleNode: string;
+export declare const traditionalStyleRuleNodeNew: string;
 export declare const traditionalStyleRuleNodeActive: string;
 export declare const traditionalStyleNode: string;
+export declare const traditionalStyleNodeNew: string;
 export declare const traditionalStyleNodeActive: string;
 export declare const traditionalStyleCardBlockNode: string;
+export declare const traditionalStyleCardBlockNodeNew: string;
 export declare const traditionalStyleCardBlockNodeActive: string;
 export declare const traditionalDecorationMarkerVariable: string;
+export declare const traditionalDecorationMarkerVariableNew: string;
 export declare const traditionalDecorationMarkerVariableActive: string;
+/** Inline deleted traditional styling plus diff marker CSS variables (extension / embedCard / listItem). */
+export declare const traditionalDeletedDecorationMarkerVariable: string;
+export declare const traditionalDeletedDecorationMarkerVariableNew: string;
+export declare const traditionalDeletedDecorationMarkerVariableActive: string;
 export declare const traditionalAddedCellOverlayStyle: string;
+export declare const traditionalAddedCellOverlayStyleNew: string;
 export declare const deletedTraditionalCellOverlayStyle: string;

package/dist/types-ts4.5/pm-plugins/decorations/colorSchemes/standard.d.ts

@@ -3,7 +3,6 @@ export declare const editingStyleActive: string;
 export declare const deletedContentStyle: string;
 export declare const deletedContentStyleActive: string;
 export declare const deletedContentStyleNew: string;
-export declare const deletedContentStyleNewActive: string;
 export declare const deletedContentStyleUnbounded: string;
 export declare const deletedStyleQuoteNode: string;
 export declare const deletedStyleQuoteNodeWithLozenge: string;