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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 6.2.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.2.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.2.9
 
 ### Patch Changes

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNewActive = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
+exports.standardDecorationMarkerVariable = exports.editingStyleRuleNode = exports.editingStyleQuoteNode = exports.editingStyleNode = exports.editingStyleCardBlockNode = exports.editingStyleActive = exports.editingStyle = exports.deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLozenge = exports.deletedStyleQuoteNode = exports.deletedRowStyle = exports.deletedContentStyleUnbounded = exports.deletedContentStyleNew = exports.deletedContentStyleActive = exports.deletedContentStyle = exports.deletedCellOverlayStyle = exports.deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRounded = exports.deletedBlockOutlineActive = exports.deletedBlockOutline = exports.addedCellOverlayStyle = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var editingStyle = exports.editingStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
@@ -38,13 +38,6 @@ var deletedContentStyleNew = exports.deletedContentStyleNew = (0, _lazyNodeView.
   position: 'relative',
   opacity: 0.8
 });
-var deletedContentStyleNewActive = exports.deletedContentStyleNewActive = (0, _lazyNodeView.convertToInlineCss)({
-  color: "var(--ds-text, #292A2E)",
-  textDecoration: 'line-through',
-  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
-  position: 'relative',
-  opacity: 1
-});
 var deletedContentStyleUnbounded = exports.deletedContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: '50%',
@@ -72,7 +65,7 @@ var deletedStyleQuoteNodeWithLozengeActive = exports.deletedStyleQuoteNodeWithLo
   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)"
 });
 var deletedBlockOutline = exports.deletedBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
@@ -80,7 +73,7 @@ var deletedBlockOutline = exports.deletedBlockOutline = (0, _lazyNodeView.conver
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 var deletedBlockOutlineActive = exports.deletedBlockOutlineActive = (0, _lazyNodeView.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)"
 });
 var deletedBlockOutlineRounded = exports.deletedBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
@@ -88,7 +81,7 @@ var deletedBlockOutlineRounded = exports.deletedBlockOutlineRounded = (0, _lazyN
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 var deletedBlockOutlineRoundedActive = exports.deletedBlockOutlineRoundedActive = (0, _lazyNodeView.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)")
 });
 var deletedRowStyle = exports.deletedRowStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -112,7 +105,8 @@ var editingStyleCardBlockNode = exports.editingStyleCardBlockNode = (0, _lazyNod
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
 var standardDecorationMarkerVariable = exports.standardDecorationMarkerVariable = (0, _lazyNodeView.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'
 });
 var addedCellOverlayStyle = exports.addedCellOverlayStyle = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',

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

@@ -1,10 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyle = exports.deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleActive = exports.deletedTraditionalContentStyle = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutline = void 0;
+exports.deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuoteNode = exports.deletedTraditionalRowStyle = exports.deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalCellOverlayStyle = exports.deletedTraditionalBlockOutlineRoundedNew = exports.deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineNew = exports.deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutline = void 0;
+exports.getDeletedTraditionalInlineStyle = getDeletedTraditionalInlineStyle;
+exports.traditionalStyleRuleNodeNew = exports.traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNode = exports.traditionalStyleQuoteNodeNew = exports.traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNode = exports.traditionalStyleNodeNew = exports.traditionalStyleNodeActive = exports.traditionalStyleNode = exports.traditionalStyleCardBlockNodeNew = exports.traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNode = exports.traditionalInsertStyleActive = exports.traditionalInsertStyle = exports.traditionalDeletedDecorationMarkerVariableNew = exports.traditionalDeletedDecorationMarkerVariableActive = exports.traditionalDeletedDecorationMarkerVariable = exports.traditionalDecorationMarkerVariableNew = exports.traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariable = exports.traditionalAddedCellOverlayStyleNew = exports.traditionalAddedCellOverlayStyle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+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) { (0, _defineProperty2.default)(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; }
 var traditionalInsertStyle = exports.traditionalInsertStyle = (0, _lazyNodeView.convertToInlineCss)({
   background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
   textDecoration: 'underline',
@@ -19,21 +25,21 @@ var traditionalInsertStyleActive = exports.traditionalInsertStyleActive = (0, _l
   textDecorationThickness: "var(--ds-space-025, 2px)",
   textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
 });
-var deletedTraditionalContentStyle = exports.deletedTraditionalContentStyle = (0, _lazyNodeView.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 */
-var deletedTraditionalContentStyleActive = exports.deletedTraditionalContentStyleActive = (0, _lazyNodeView.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). */
+function getDeletedTraditionalInlineStyle(isActive) {
+  return isActive ? (0, _lazyNodeView.convertToInlineCss)(deletedTraditionalInlineStyleActiveBase) : (0, _lazyNodeView.convertToInlineCss)(deletedTraditionalInlineStyleBase);
+}
 var deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentStyleUnbounded = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: '50%',
@@ -44,7 +50,7 @@ var deletedTraditionalContentStyleUnbounded = exports.deletedTraditionalContentS
   zIndex: 1
 });
 
-/** Emphasised (pressed) strikethrough line for traditional when active */
+/** Strikethrough line for traditional when active (background highlight on text wrapper) */
 var deletedTraditionalContentStyleUnboundedActive = exports.deletedTraditionalContentStyleUnboundedActive = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: '50%',
@@ -67,7 +73,7 @@ var deletedTraditionalStyleQuoteNodeActive = exports.deletedTraditionalStyleQuot
   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)"
 });
 var deletedTraditionalBlockOutline = exports.deletedTraditionalBlockOutline = (0, _lazyNodeView.convertToInlineCss)({
@@ -75,7 +81,7 @@ var deletedTraditionalBlockOutline = exports.deletedTraditionalBlockOutline = (0
   borderRadius: "var(--ds-radius-small, 4px)"
 });
 var deletedTraditionalBlockOutlineActive = exports.deletedTraditionalBlockOutlineActive = (0, _lazyNodeView.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)"
 });
 var deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutlineRounded = (0, _lazyNodeView.convertToInlineCss)({
@@ -83,7 +89,17 @@ var deletedTraditionalBlockOutlineRounded = exports.deletedTraditionalBlockOutli
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 var deletedTraditionalBlockOutlineRoundedActive = exports.deletedTraditionalBlockOutlineRoundedActive = (0, _lazyNodeView.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}). */
+var deletedTraditionalBlockOutlineNew = exports.deletedTraditionalBlockOutlineNew = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var deletedTraditionalBlockOutlineRoundedNew = exports.deletedTraditionalBlockOutlineRoundedNew = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
   borderRadius: "calc(".concat("var(--ds-radius-xsmall, 2px)", " + 1px)")
 });
 var deletedTraditionalRowStyle = exports.deletedTraditionalRowStyle = (0, _lazyNodeView.convertToInlineCss)({
@@ -95,37 +111,77 @@ var deletedTraditionalRowStyle = exports.deletedTraditionalRowStyle = (0, _lazyN
 var traditionalStyleQuoteNode = exports.traditionalStyleQuoteNode = (0, _lazyNodeView.convertToInlineCss)({
   borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
 });
+var traditionalStyleQuoteNodeNew = exports.traditionalStyleQuoteNodeNew = (0, _lazyNodeView.convertToInlineCss)({
+  borderLeft: "4px solid ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)")
+});
 var traditionalStyleQuoteNodeActive = exports.traditionalStyleQuoteNodeActive = (0, _lazyNodeView.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)")
 });
 var traditionalStyleRuleNode = exports.traditionalStyleRuleNode = (0, _lazyNodeView.convertToInlineCss)({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
+var traditionalStyleRuleNodeNew = exports.traditionalStyleRuleNodeNew = (0, _lazyNodeView.convertToInlineCss)({
+  backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  border: 'none',
+  height: '4px',
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 var traditionalStyleRuleNodeActive = exports.traditionalStyleRuleNodeActive = (0, _lazyNodeView.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)"
 });
 var traditionalStyleNode = exports.traditionalStyleNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-small, 4px)"
 });
+var traditionalStyleNodeNew = exports.traditionalStyleNodeNew = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
 var traditionalStyleNodeActive = exports.traditionalStyleNodeActive = (0, _lazyNodeView.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)"
 });
 var traditionalStyleCardBlockNode = exports.traditionalStyleCardBlockNode = (0, _lazyNodeView.convertToInlineCss)({
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
+var traditionalStyleCardBlockNodeNew = exports.traditionalStyleCardBlockNodeNew = (0, _lazyNodeView.convertToInlineCss)({
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-green-subtlest, #DCFFF1)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
 var traditionalStyleCardBlockNodeActive = exports.traditionalStyleCardBlockNodeActive = (0, _lazyNodeView.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)"
 });
 var traditionalDecorationMarkerVariable = exports.traditionalDecorationMarkerVariable = (0, _lazyNodeView.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'
+});
+var traditionalDecorationMarkerVariableNew = exports.traditionalDecorationMarkerVariableNew = (0, _lazyNodeView.convertToInlineCss)({
+  '--diff-decoration-marker-color': "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  '--diff-decoration-marker-ring-width': '4px'
 });
 var traditionalDecorationMarkerVariableActive = exports.traditionalDecorationMarkerVariableActive = (0, _lazyNodeView.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). */
+var traditionalDeletedDecorationMarkerVariable = exports.traditionalDeletedDecorationMarkerVariable = (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedTraditionalInlineStyleBase), {}, {
+  '--diff-decoration-marker-color': "var(--ds-border-accent-red, #E2483D)",
+  '--diff-decoration-marker-ring-width': '1px'
+}));
+var traditionalDeletedDecorationMarkerVariableNew = exports.traditionalDeletedDecorationMarkerVariableNew = (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedTraditionalInlineStyleBase), {}, {
+  '--diff-decoration-marker-color': "var(--ds-background-accent-red-subtlest, #FFECEB)",
+  '--diff-decoration-marker-ring-width': '4px'
+}));
+var traditionalDeletedDecorationMarkerVariableActive = exports.traditionalDeletedDecorationMarkerVariableActive = (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedTraditionalInlineStyleActiveBase), {}, {
+  '--diff-decoration-marker-color': "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
+  '--diff-decoration-marker-ring-width': '4px'
+}));
 var traditionalAddedCellOverlayStyle = exports.traditionalAddedCellOverlayStyle = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: 0,
@@ -137,6 +193,17 @@ var traditionalAddedCellOverlayStyle = exports.traditionalAddedCellOverlayStyle
   outline: "1px solid ".concat("var(--ds-border-accent-green, #22A06B)"),
   pointerEvents: 'none'
 });
+var traditionalAddedCellOverlayStyleNew = exports.traditionalAddedCellOverlayStyleNew = (0, _lazyNodeView.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'
+});
 var deletedTraditionalCellOverlayStyle = exports.deletedTraditionalCellOverlayStyle = (0, _lazyNodeView.convertToInlineCss)({
   position: 'absolute',
   top: 0,

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

@@ -36,51 +36,51 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
   if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
+        return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalDecorationMarkerVariableNew : _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
       } else {
-        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
+        return isTraditional && isActive ? _traditional.traditionalDeletedDecorationMarkerVariableActive : isTraditional ? (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalDeletedDecorationMarkerVariableNew : _traditional.traditionalDeletedDecorationMarkerVariable : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
+    return isTraditional && isActive ? _traditional.traditionalDecorationMarkerVariableActive : isTraditional ? (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalDecorationMarkerVariableNew : _traditional.traditionalDecorationMarkerVariable : _standard.standardDecorationMarkerVariable;
   }
   if (nodeName === 'blockquote') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleQuoteNodeNew : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
       } else {
         return isTraditional ? _traditional.deletedTraditionalStyleQuoteNode : _standard.deletedStyleQuoteNode;
       }
     }
-    return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleQuoteNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleQuoteNodeNew : _traditional.traditionalStyleQuoteNode : _standard.editingStyleQuoteNode;
   }
   if (nodeName === 'rule') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleRuleNodeNew : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
       } else {
-        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
+        return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleRuleNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleRuleNodeNew : _traditional.traditionalStyleRuleNode : _standard.editingStyleRuleNode;
   }
   if (nodeName === 'blockCard') {
     if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
       if (isInserted) {
-        return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
+        return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleCardBlockNodeNew : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
       } else {
-        return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
+        return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedContentStyleNew;
       }
     }
-    return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
+    return isTraditional ? isActive ? _traditional.traditionalStyleCardBlockNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleCardBlockNodeNew : _traditional.traditionalStyleCardBlockNode : _standard.editingStyleCardBlockNode;
   }
   if ((0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true)) {
     if (isInserted) {
-      return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode : _standard.editingStyleNode;
+      return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleNodeNew : _traditional.traditionalStyleNode : _standard.editingStyleNode;
     } else {
-      return isTraditional ? _traditional.deletedTraditionalContentStyle : _standard.deletedContentStyleNew;
+      return isTraditional ? (0, _traditional.getDeletedTraditionalInlineStyle)(false) : _standard.deletedContentStyleNew;
     }
   }
-  return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode : _standard.editingStyleNode;
+  return isTraditional ? isActive ? _traditional.traditionalStyleNodeActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalStyleNodeNew : _traditional.traditionalStyleNode : _standard.editingStyleNode;
 };
 
 /**

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

@@ -32,7 +32,7 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       }
     } else {
       if (colorScheme === 'traditional') {
-        style = _traditional.deletedTraditionalContentStyle;
+        style = (0, _traditional.getDeletedTraditionalInlineStyle)(false);
       } else {
         style = isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyle;
       }

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

@@ -38,10 +38,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 ? _traditional.deletedTraditionalContentStyleActive : _traditional.deletedTraditionalContentStyle;
+    return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
   }
   if (isActive) {
-    return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNewActive : _standard.deletedContentStyleActive;
+    return _standard.deletedContentStyleActive;
   }
   return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapBlockNodeView = void 0;
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _messages = require("@atlaskit/editor-common/messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _standard = require("../colorSchemes/standard");
 var _traditional = require("../colorSchemes/traditional");
@@ -67,10 +68,10 @@ var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
     return isActive ? _standard.editingStyleActive : _standard.editingStyle;
   }
   if (colorScheme === 'traditional') {
-    return isActive ? _traditional.deletedTraditionalContentStyleActive : _traditional.deletedTraditionalContentStyle;
+    return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
   }
   if (isActive) {
-    return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNewActive : _standard.deletedContentStyleActive;
+    return _standard.deletedContentStyleActive;
   }
   return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
 };
@@ -83,7 +84,10 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
       return undefined;
     }
     if (isTraditional) {
-      return _traditional.traditionalStyleNode;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation')) {
+        return isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNodeNew;
+      }
+      return isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNode;
     }
     return _standard.editingStyleNode;
   }
@@ -96,13 +100,13 @@ var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
     case 'expand':
     case 'decisionList':
       if (isTraditional) {
-        return isActive ? _traditional.deletedTraditionalBlockOutlineActive : _traditional.deletedTraditionalBlockOutline;
+        return isActive ? _traditional.deletedTraditionalBlockOutlineActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.deletedTraditionalBlockOutlineNew : _traditional.deletedTraditionalBlockOutline;
       }
       return isActive ? _standard.deletedBlockOutlineActive : _standard.deletedBlockOutline;
     case 'panel':
     case 'codeBlock':
       if (isTraditional) {
-        return isActive ? _traditional.deletedTraditionalBlockOutlineRoundedActive : _traditional.deletedTraditionalBlockOutlineRounded;
+        return isActive ? _traditional.deletedTraditionalBlockOutlineRoundedActive : (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.deletedTraditionalBlockOutlineRoundedNew : _traditional.deletedTraditionalBlockOutlineRounded;
       }
       return isActive ? _standard.deletedBlockOutlineRoundedActive : _standard.deletedBlockOutlineRounded;
     default:
@@ -134,6 +138,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 && (0, _platformFeatureFlags.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
@@ -141,13 +161,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 ? _traditional.traditionalAddedCellOverlayStyle : _traditional.deletedTraditionalCellOverlayStyle : isInserted ? _standard.addedCellOverlayStyle : _standard.deletedCellOverlayStyle;
+    var overlayStyle = colorScheme === 'traditional' ? isInserted ? (0, _platformFeatureFlags.fg)('platform_editor_show_diff_scroll_navigation') ? _traditional.traditionalAddedCellOverlayStyleNew : _traditional.traditionalAddedCellOverlayStyle : _traditional.deletedTraditionalCellOverlayStyle : isInserted ? _standard.addedCellOverlayStyle : _standard.deletedCellOverlayStyle;
     overlay.setAttribute('style', overlayStyle);
     cell.appendChild(overlay);
   });
@@ -197,12 +217,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) || '';
@@ -212,12 +232,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 || ''));
@@ -231,14 +251,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;
   }
@@ -264,6 +284,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;
@@ -273,14 +299,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;
   }
@@ -304,6 +330,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;
@@ -312,16 +344,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) && (!(0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || !isInserted)) {
     var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
@@ -361,6 +393,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);
 };
@@ -370,16 +408,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.
  */
-var wrapBlockNodeView = exports.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;
+var wrapBlockNodeView = exports.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({