@atlaskit/editor-plugin-show-diff 13.0.11 → 13.1.1

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

@@ -76,16 +76,16 @@ function textAccent(color) {
   return textAccentMap[color];
 }
 
-/** Outline colour for deleted table-cell overlays. */
-function deletedCellOutline(colors) {
-  return colors.deletedCellBorderProminence === 'subtle' ? "var(--ds-border-disabled, #0515240F)" : borderAccent(colors.deletedCellColor);
-}
-
 /** Ring colour for an active (scroll-target) deleted block outline. */
 function deletedBlockOutlineActiveRing(colors) {
   return colors.deletedBlockOutlineActiveEmphasis === 'border' ? borderAccent(colors.deleteActiveColor) : bgSubtlerPressed(colors.deleteActiveColor);
 }
 
+/** Outline colour for deleted table-cell overlays. */
+function deletedCellOutline(colors) {
+  return colors.deletedCellBorderProminence === 'subtle' ? "var(--ds-border-disabled, #0515240F)" : borderAccent(colors.deletedCellColor);
+}
+
 // --- Inserted content styles ---
 
 /** Inline inserted content — default state. */
@@ -171,6 +171,7 @@ export function buildInsertStyleActive(colors) {
 
 // --- Deleted inline content styles ---
 
+/** Base deleted-inline-style object, shared by several exports. */
 function deletedInlineStyleBase(colors) {
   return {
     textDecorationColor: borderAccent(colors.deleteColor),
@@ -179,6 +180,8 @@ function deletedInlineStyleBase(colors) {
     opacity: 1
   };
 }
+
+/** Active deleted-inline-style object, extending the base. */
 function deletedInlineStyleActiveBase(colors) {
   return _objectSpread(_objectSpread({}, deletedInlineStyleBase(colors)), {}, {
     textDecorationThickness: '2px',
@@ -255,8 +258,6 @@ export function buildDeletedStyleQuoteNodeWithLozengeActive(colors) {
     borderRadius: "var(--ds-radius-small, 4px)"
   });
 }
-
-/** Deleted quote node — a 2px left border, or a 1px ring with padding, per `deletedQuoteNodeShape`. */
 export function buildDeletedStyleQuoteNode(colors) {
   if (colors.deletedQuoteNodeShape === 'borderLeft') {
     return convertToInlineCss({
@@ -337,18 +338,20 @@ export function buildDeletedBlockOutlineRoundedNew(colors) {
 
 // --- Deleted table row style ---
 
-/** Table row style for deleted rows. See `deletedRowTreatment`. */
+/** Table row style for deleted rows. */
 export function buildDeletedRowStyle(colors) {
-  var base = {
+  // Each branch emits exactly the CSS the pre-factory shim did for its scheme.
+  return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss({
+    color: textAccent(colors.deleteColor),
     textDecoration: 'line-through',
     opacity: 0.6,
     display: 'table-row'
-  };
-  return colors.deletedRowTreatment === 'textTint' ? convertToInlineCss(_objectSpread(_objectSpread({}, base), {}, {
-    color: textAccent(colors.deleteColor)
-  })) : convertToInlineCss(_objectSpread(_objectSpread({}, base), {}, {
-    textDecorationColor: borderAccent(colors.deleteColor)
-  }));
+  }) : convertToInlineCss({
+    textDecorationColor: borderAccent(colors.deleteColor),
+    textDecoration: 'line-through',
+    opacity: 0.6,
+    display: 'table-row'
+  });
 }
 
 // --- Inserted block node styles — quote, rule, generic node, card ---
@@ -449,9 +452,11 @@ export function buildInsertStyleCardBlockNodeActive(colors) {
   });
 }
 
-// --- CSS custom properties ---
-// Applied inline on the decoration wrapper; cascade down to child/pseudo-element selectors in the
-// global stylesheet.
+// ---------------------------------------------------------------------------
+// CSS custom property variables (for nodes styled via global stylesheet)
+// These are applied as inline styles on the decoration wrapper element and
+// cascade down to child/pseudo-element selectors in the global stylesheet.
+// ---------------------------------------------------------------------------
 
 /** CSS variables for an inserted node decoration marker — default state. */
 export function buildDecorationMarkerVariable(colors) {
@@ -485,7 +490,7 @@ export function buildDeletedDecorationMarkerVariable(colors) {
   }));
 }
 
-/** Opacity only, no position or strikethrough. Used by the standard scheme. */
+/** Opacity only, no position or strikethrough. Used by 'static' schemes. */
 export function buildDeletedDecorationMarkerVariableSimple(colors) {
   return convertToInlineCss({
     opacity: 0.8,
@@ -494,6 +499,10 @@ export function buildDeletedDecorationMarkerVariableSimple(colors) {
   });
 }
 
+/**
+ * 'glyphTint' deleted inline style — tints the glyph itself via `color:`. Opacity ramps 0.6
+ * default, 0.83 "new", 1 active.
+ */
 /** Extended deleted inline style — background highlight + border-bottom underline (standard scheme). */
 export function buildDeletedInlineContentStyleExtended(colors) {
   return convertToInlineCss({
@@ -502,8 +511,6 @@ export function buildDeletedInlineContentStyleExtended(colors) {
     padding: "1px 0 2px"
   });
 }
-
-/** Standard deleted inline style — colours the glyph itself, not just the strikethrough. */
 export function buildDeletedInlineStyleStandard(colors, state) {
   if (state === 'active') {
     return convertToInlineCss({
@@ -540,7 +547,7 @@ export function buildDeletedDecorationMarkerVariableActive(colors) {
 
 // --- Table cell overlay styles ---
 
-/** Cell overlay for added table cells — default state. Stacking order varies by scheme. */
+/** Cell overlay for added table cells — default state (zIndex 1). */
 export function buildAddedCellOverlayStyle(colors) {
   return convertToInlineCss({
     position: 'absolute',
@@ -555,7 +562,7 @@ export function buildAddedCellOverlayStyle(colors) {
   });
 }
 
-/** Added cell overlay — rounded variant. See `roundedAddedCellOverlayInheritsBorder`. */
+/** Cell overlay for added table cells — rounded variant (zIndex 2, inherits border/radius). */
 export function buildAddedCellOverlayRoundedStyle(colors) {
   return convertToInlineCss(_objectSpread(_objectSpread({
     position: 'absolute',
@@ -619,4 +626,222 @@ export function buildDeletedCellOverlayRoundedStyle(colors) {
     border: 'inherit',
     borderRadius: 'inherit'
   });
+}
+
+// ---------------------------------------------------------------------------
+// CSS custom property variables for deleted node global stylesheet
+//
+// These are set as inline styles on the deleted node wrapper element and cascade
+// down to child/pseudo-element selectors in the global smartCardStyles stylesheet.
+// The stylesheet reads var(--diff-delete-color) etc. — one set of selectors for
+// all schemes, written once, never needs to change when new schemes are added.
+// ---------------------------------------------------------------------------
+
+// --- Inline content style dispatch ---
+
+/**
+ * Inserted inline content under the extended diff experience. `insertedInlineTreatment` picks
+ * `text-decoration` vs a `border-bottom` rule; only the latter honours `hideAddedDiffsUnderline`.
+ */
+export function buildInsertedInlineStyle(colors, isActive, hideAddedDiffsUnderline) {
+  if (colors.insertedInlineTreatment === 'underline') {
+    return isActive ? buildInsertStyleActive(colors) : buildInsertStyle(colors);
+  }
+  if (isActive) {
+    return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderlineActive(colors) : buildInsertStyleExtendedActive(colors);
+  }
+  return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderline(colors) : buildInsertStyleExtended(colors);
+}
+
+/** The three visual states deleted inline content can be in. */
+
+/**
+ * Deleted inline content in a given state. 'strikethrough' renders 'default' and 'new'
+ * identically; the 'new' step exists only for the 'glyphTint' opacity ramp.
+ */
+export function buildDeletedInlineContentStyle(colors, state) {
+  return colors.deletedInlineTreatment === 'strikethrough' ? buildDeletedInlineStyle(colors, state === 'active') : buildDeletedInlineStyleStandard(colors, state);
+}
+
+/**
+ * The positioned line across deleted content spanning an unbounded range. 'stateful' thickens
+ * 1px to 2px when active and tints with the border accent; 'static' uses the text accent always.
+ */
+export function buildDeletedStrikethroughLine(colors, isActive) {
+  if (colors.deletedNodeEmphasis !== 'stateful') {
+    return buildDeletedInlineStyleUnbounded(colors);
+  }
+  return isActive ? buildDeletedContentStyleUnboundedActive(colors) : buildDeletedContentStyleUnbounded(colors);
+}
+
+// --- Deleted-content "REMOVED" lozenge ---
+
+/** Structural CSS shared by both lozenge states — everything except the background tint. */
+var deletedLozengeBase = {
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  position: 'static',
+  blockSize: 'min-content',
+  borderRadius: "var(--ds-radius-small, 4px)",
+  overflow: 'hidden',
+  paddingInlineStart: "var(--ds-space-050, 4px)",
+  paddingInlineEnd: "var(--ds-space-050, 4px)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 653)",
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: "var(--ds-text-warning-inverse, #292A2E)"
+};
+
+/**
+ * The "REMOVED" lozenge on a deleted block node — resting state. Neutral gray in every scheme,
+ * so it takes no DiffColorScheme; only the active state is tinted.
+ */
+export function buildDeletedLozengeStyle() {
+  return convertToInlineCss(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
+    backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
+  }));
+}
+
+/** The "REMOVED" lozenge — active state, tinted with the scheme's deleteActiveColor. */
+export function buildDeletedLozengeActiveStyle(colors) {
+  return convertToInlineCss(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
+    backgroundColor: bgSubtlerPressed(colors.deleteActiveColor)
+  }));
+}
+
+// ---------------------------------------------------------------------------
+// Block node style dispatch
+//
+// A block node's decoration shape is a property of the *node type* — every scheme draws a
+// blockquote with a left border and a horizontal rule as a filled bar. What varies per scheme
+// is the emphasis and, for deleted content, which of the treatments below is used. Keeping that
+// table here rather than in the decoration consumers means adding a scheme stays a change to
+// `schemes.ts` alone.
+// ---------------------------------------------------------------------------
+
+/** The decoration shape an inserted block node takes. Determined by node type, not by scheme. */
+
+/**
+ * Outline for an inserted block node. `insertedNodeEmphasis`: 'stateful' draws a 4px ring
+ * (`subtlest` at rest, `subtler.pressed` when focused), 'static' one 1px accent ring.
+ */
+export function buildInsertedBlockNodeStyle(colors, shape, isActive) {
+  var isStateful = colors.insertedNodeEmphasis === 'stateful';
+  switch (shape) {
+    case 'quote':
+      if (!isStateful) {
+        return buildInsertStyleQuoteNode(colors);
+      }
+      return isActive ? buildInsertStyleQuoteNodeActive(colors) : buildInsertStyleQuoteNodeNew(colors);
+    case 'rule':
+      if (!isStateful) {
+        return buildInsertStyleRuleNode(colors);
+      }
+      return isActive ? buildInsertStyleRuleNodeActive(colors) : buildInsertStyleRuleNodeNew(colors);
+    case 'cardBlock':
+      if (!isStateful) {
+        return buildInsertStyleCardBlockNode(colors);
+      }
+      return isActive ? buildInsertStyleCardBlockNodeActive(colors) : buildInsertStyleCardBlockNodeNew(colors);
+    case 'marker':
+      if (!isStateful) {
+        return buildDecorationMarkerVariable(colors);
+      }
+      return isActive ? buildDecorationMarkerVariableActive(colors) : buildDecorationMarkerVariableNew(colors);
+    case 'node':
+    default:
+      if (!isStateful) {
+        return buildInsertStyleNode(colors);
+      }
+      return isActive ? buildInsertStyleNodeActive(colors) : buildInsertStyleNodeNew(colors);
+  }
+}
+
+/**
+ * The category a deleted block node falls into — by node type, not by scheme.
+ *
+ * 'container' — media, panel: content is a child element, so the node is only dimmed.
+ * 'listItem'  — listItem: reads the marker variables via editor-core's list styles.
+ * 'marker'    — extension, embedCard: same, via extension and smart-card styles.
+ * 'quote'     — blockquote.
+ * 'generic'   — rule, blockCard, everything else.
+ */
+
+/**
+ * Outline for a deleted block node, driven by `deletedInlineTreatment` (strike vs tint) and
+ * `deletedNodeEmphasis` (whether the outline tracks scroll state and emits marker variables).
+ */
+export function buildDeletedBlockNodeStyle(colors, category, isActive) {
+  var isStrikethrough = colors.deletedInlineTreatment === 'strikethrough';
+  var statefulMarker = function statefulMarker() {
+    return isActive ? buildDeletedDecorationMarkerVariableActive(colors) : buildDeletedDecorationMarkerVariableNew(colors);
+  };
+  switch (category) {
+    case 'quote':
+      // Both emphases share one builder here — `deletedQuoteNodeShape` already carries the
+      // only variance (a ring versus a left border).
+      return buildDeletedStyleQuoteNode(colors);
+    case 'container':
+      return isStrikethrough ? buildDeletedInlineStyle(colors, false) : buildDeletedDecorationMarkerVariableSimple(colors);
+    case 'listItem':
+      return colors.deletedNodeEmphasis === 'stateful' ? statefulMarker() : buildDeletedDecorationMarkerVariableSimple(colors);
+    case 'marker':
+      return colors.deletedNodeEmphasis === 'stateful' ? statefulMarker() : buildDeletedInlineStyleStandard(colors, 'new');
+    case 'generic':
+    default:
+      return isStrikethrough ? buildDeletedInlineStyle(colors, false) : buildDeletedInlineStyleStandard(colors, 'new');
+  }
+}
+
+/**
+ * Deleted blockquote inside a lozenge wrapper (the nodeview path). Always a ring, since the
+ * lozenge needs an enclosed shape, so `deletedQuoteNodeShape` does not apply — only
+ * `deletedQuoteNodeActiveTone`, which picks the active ring's tone.
+ */
+export function buildDeletedQuoteNodeWithLozengeStyle(colors, isActive) {
+  if (!isActive) {
+    return buildDeletedStyleQuoteNodeWithLozenge(colors);
+  }
+  return colors.deletedQuoteNodeActiveTone === 'backgroundPressed' ? buildDeletedStyleQuoteNodeActive(colors) : buildDeletedStyleQuoteNodeWithLozengeActive(colors);
+}
+
+/**
+ * Outline for a deleted block node via the nodeview wrapper (expand, decisionList, panel,
+ * codeBlock). Every scheme shares the active state; `deletedNodeEmphasis` changes only the
+ * resting one — 'stateful' a 4px subtlest ring, 'static' a 1px accent ring.
+ */
+export function buildDeletedWrappedBlockOutline(colors, _ref) {
+  var isActive = _ref.isActive,
+    isRounded = _ref.isRounded;
+  if (isActive) {
+    return isRounded ? buildDeletedBlockOutlineRoundedActive(colors) : buildDeletedBlockOutlineActive(colors);
+  }
+  if (colors.deletedNodeEmphasis === 'stateful') {
+    return isRounded ? buildDeletedBlockOutlineRoundedNew(colors) : buildDeletedBlockOutlineNew(colors);
+  }
+  return isRounded ? buildDeletedBlockOutlineRounded(colors) : buildDeletedBlockOutline(colors);
+}
+
+/**
+ * Accent colour for atomic inline changed nodes (date, emoji, mention, status). Set inline on the
+ * decoration span and read by the `.show-diff-atomic-inline-changed-*` selectors in
+ * EditorContentContainer, on the decorated element or a descendant, so it must inherit. Being
+ * inline it beats the stylesheet's fallback, making the plugin the only source of the colour.
+ */
+export function buildAtomicInlineChangedCSSVariables(colors) {
+  return convertToInlineCss({
+    '--show-diff-atomic-inline-changed-border-color': borderAccent(colors.insertColor)
+  });
+}
+
+/** Deleted node wrapper variables, all three states. Read by the smartCardStyles selectors. */
+export function buildDeletedNodeCSSVariables(colors) {
+  return convertToInlineCss({
+    '--diff-delete-color': borderAccent(colors.deleteColor),
+    '--diff-delete-color-default': borderAccent(colors.deleteActiveColor),
+    '--diff-delete-color-new': bgSubtlest(colors.deleteColor),
+    '--diff-delete-color-active': bgSubtlerPressed(colors.deleteActiveColor),
+    '--diff-delete-text-decoration-color': borderAccent(colors.deleteColor)
+  });
 }

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

@@ -6,13 +6,18 @@ export var traditionalScheme = {
   deleteColor: 'red',
   deleteActiveColor: 'red',
   deletedCellColor: 'gray',
+  deletedRowTreatment: 'strikeColor',
   insertedCellOpacity: 0.5,
   deletedQuoteNodeShape: 'ring',
   deletedCellBorderProminence: 'subtle',
-  deletedRowTreatment: 'strikeColor',
   deletedBlockOutlineActiveEmphasis: 'background',
   addedCellOverlayZIndex: 1,
-  roundedAddedCellOverlayInheritsBorder: true
+  roundedAddedCellOverlayInheritsBorder: true,
+  insertedInlineTreatment: 'underline',
+  deletedInlineTreatment: 'strikethrough',
+  insertedNodeEmphasis: 'stateful',
+  deletedNodeEmphasis: 'stateful',
+  deletedQuoteNodeActiveTone: 'backgroundPressed'
 };
 
 /** Purple insertions, gray deletions (red on active). */
@@ -23,11 +28,22 @@ export var standardScheme = {
   deleteColor: 'gray',
   deleteActiveColor: 'red',
   deletedCellColor: 'gray',
+  deletedRowTreatment: 'textTint',
   insertedCellOpacity: 0.2,
   deletedQuoteNodeShape: 'borderLeft',
   deletedCellBorderProminence: 'accent',
-  deletedRowTreatment: 'textTint',
   deletedBlockOutlineActiveEmphasis: 'border',
   addedCellOverlayZIndex: 2,
-  roundedAddedCellOverlayInheritsBorder: false
+  roundedAddedCellOverlayInheritsBorder: false,
+  insertedInlineTreatment: 'borderBottom',
+  deletedInlineTreatment: 'glyphTint',
+  insertedNodeEmphasis: 'static',
+  deletedNodeEmphasis: 'static',
+  deletedQuoteNodeActiveTone: 'borderAccent'
+};
+
+/** Maps the public ColorScheme string to its data object. Adding a scheme = one entry here. */
+export var colorSchemeRegistry = {
+  traditional: traditionalScheme,
+  standard: standardScheme
 };

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

@@ -1,15 +1,65 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../isExtendedEnabled';
-import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayRoundedStyle, addedCellOverlayStyle, deletedCellOverlayStyle, deletedCellOverlayRoundedStyle } from './colorSchemes/standard';
-import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayRoundedStyle, traditionalAddedCellOverlayStyle, deletedTraditionalCellOverlayStyle, deletedTraditionalCellOverlayRoundedStyle } from './colorSchemes/traditional';
+import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildDeletedBlockNodeStyle, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildInsertedBlockNodeStyle } from './colorSchemes/factory';
+import { colorSchemeRegistry } from './colorSchemes/schemes';
 import { createBlockIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
 import { buildDiffDecorationSpec } from './decorationKeys';
+import { getBlockNodeStyleLegacy, resolveCellOverlayStyleLegacy } from './createBlockChangedDecoration.styles.legacy';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+var DEFAULT_COLOR_SCHEME = 'standard';
+
+/** Nodes that carry no decoration styling of their own — layout, lists, text blocks, media groups. */
+var UNSTYLED_NODES = ['mediaSingle', 'mediaGroup', 'table',
+// Handle table separately to avoid border issues
+'tableRow', 'paragraph',
+// Paragraph and heading nodes do not need special styling
+'heading', 'hardBreak', 'decisionList', 'taskList', 'bulletList', 'orderedList', 'layoutSection'];
+var CELL_NODES = ['tableCell', 'tableHeader'];
+
+/** Positioning context for the cell overlay widget decorations. */
+var cellPositionStyle = convertToInlineCss({
+  position: 'relative'
+});
+var getInsertedBlockNodeShape = function getInsertedBlockNodeShape(nodeName) {
+  switch (nodeName) {
+    case 'blockquote':
+      return 'quote';
+    case 'rule':
+      return 'rule';
+    case 'blockCard':
+      return 'cardBlock';
+    case 'extension':
+    case 'embedCard':
+    case 'listItem':
+      return 'marker';
+    default:
+      return 'node';
+  }
+};
+var getDeletedBlockNodeCategory = function getDeletedBlockNodeCategory(nodeName) {
+  switch (nodeName) {
+    case 'blockquote':
+      return 'quote';
+    // Media nodes inside mediaSingle should not get position:relative
+    // as it shifts the image outside its parent container (e.g. panel)
+    case 'media':
+    case 'panel':
+      return 'container';
+    case 'listItem':
+      return 'listItem';
+    case 'extension':
+    case 'embedCard':
+      return 'marker';
+    default:
+      return 'generic';
+  }
+};
 var getNodeClass = function getNodeClass(name) {
   switch (name) {
     case 'extension':
@@ -18,7 +68,7 @@ var getNodeClass = function getNodeClass(name) {
       return undefined;
   }
 };
-var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
+var getBlockNodeStyleNext = function getBlockNodeStyleNext(_ref) {
   var nodeName = _ref.nodeName,
     colorScheme = _ref.colorScheme,
     _ref$isInserted = _ref.isInserted,
@@ -26,90 +76,29 @@ var getBlockNodeStyle = function getBlockNodeStyle(_ref) {
     _ref$isActive = _ref.isActive,
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     diffType = _ref.diffType;
-  var isTraditional = colorScheme === 'traditional';
-  if (['mediaSingle', 'mediaGroup', 'table',
-  // Handle table separately to avoid border issues
-  'tableRow', 'paragraph',
-  // Paragraph and heading nodes do not need special styling
-  'heading', 'hardBreak', 'decisionList', 'taskList', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
-    // Layout nodes do not need special styling
+  if (UNSTYLED_NODES.includes(nodeName)) {
     return undefined;
   }
-  // Media nodes inside mediaSingle should not get position:relative
-  // as it shifts the image outside its parent container (e.g. panel)
-  if (nodeName === 'media') {
-    if (!isInserted && isExtendedEnabled(diffType)) {
-      return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
-    }
-    return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
-  }
-  if (['tableCell', 'tableHeader'].includes(nodeName)) {
-    if (isExtendedEnabled(diffType)) {
-      // This is used for positioning the cell overlay widget decorations
-      return convertToInlineCss({
-        position: 'relative'
-      });
-    }
-    // When gate is off, it should return undefined as above
-    return undefined;
-  }
-  if (nodeName === 'panel') {
-    if (!isInserted && isExtendedEnabled(diffType)) {
-      return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedDecorationMarkerVariable;
-    }
-    return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
-  }
-  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
-    if (isExtendedEnabled(diffType)) {
-      if (isInserted) {
-        return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
-      } else {
-        if (nodeName === 'listItem') {
-          return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedDecorationMarkerVariable;
-        }
-        return isTraditional && isActive ? traditionalDeletedDecorationMarkerVariableActive : isTraditional ? traditionalDeletedDecorationMarkerVariableNew : deletedContentStyleNew;
-      }
-    }
-    return isTraditional && isActive ? traditionalDecorationMarkerVariableActive : isTraditional ? traditionalDecorationMarkerVariableNew : standardDecorationMarkerVariable;
-  }
-  if (nodeName === 'blockquote') {
-    if (isExtendedEnabled(diffType)) {
-      if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNodeNew : editingStyleQuoteNode;
-      } else {
-        return isTraditional ? deletedTraditionalStyleQuoteNode : deletedStyleQuoteNode;
-      }
-    }
-    return isTraditional ? isActive ? traditionalStyleQuoteNodeActive : traditionalStyleQuoteNodeNew : editingStyleQuoteNode;
-  }
-  if (nodeName === 'rule') {
-    if (isExtendedEnabled(diffType)) {
-      if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNodeNew : editingStyleRuleNode;
-      } else {
-        return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
-      }
-    }
-    return isTraditional ? isActive ? traditionalStyleRuleNodeActive : traditionalStyleRuleNodeNew : editingStyleRuleNode;
+  if (CELL_NODES.includes(nodeName)) {
+    // When the gate is off, cells get no styling — as with UNSTYLED_NODES above.
+    return isExtendedEnabled(diffType) ? cellPositionStyle : undefined;
   }
-  if (nodeName === 'blockCard') {
-    if (isExtendedEnabled(diffType)) {
-      if (isInserted) {
-        return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNodeNew : editingStyleCardBlockNode;
-      } else {
-        return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
-      }
-    }
-    return isTraditional ? isActive ? traditionalStyleCardBlockNodeActive : traditionalStyleCardBlockNodeNew : editingStyleCardBlockNode;
-  }
-  if (isExtendedEnabled(diffType)) {
-    if (isInserted) {
-      return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
-    } else {
-      return isTraditional ? getDeletedTraditionalInlineStyle(false) : deletedContentStyleNew;
-    }
+  var colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+
+  // Deleted nodes only differ under the extended experience; otherwise all are insertions.
+  if (!isInserted && isExtendedEnabled(diffType)) {
+    return buildDeletedBlockNodeStyle(colors, getDeletedBlockNodeCategory(nodeName), isActive);
   }
-  return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
+  return buildInsertedBlockNodeStyle(colors, getInsertedBlockNodeShape(nodeName), isActive);
+};
+
+/**
+ * Dispatches to the registry-driven implementation, or to the verbatim pre-refactor one for the
+ * OFF cohort of `platform_editor_show_diff_color_scheme_refactor`. Both are built to emit the
+ * same style strings for both shipped schemes; see EDITOR-8281.
+ */
+var getBlockNodeStyle = function getBlockNodeStyle(props) {
+  return isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? getBlockNodeStyleNext(props) : getBlockNodeStyleLegacy(props);
 };
 
 /**
@@ -172,20 +161,21 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       diffType: diffType
     }))];
   }
-  var style;
-  if (isExtendedEnabled(diffType) && ['tableCell', 'tableHeader'].includes(change.name)) {
+  if (isExtendedEnabled(diffType) && CELL_NODES.includes(change.name)) {
     var cellOverlay = document.createElement('div');
-    var isTraditional = colorScheme === 'traditional';
+    var colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
     var isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
-    var addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
-    var deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
 
     // On an inverted diff, an empty cell being filled is an addition, so give it the
     // added (purple) overlay instead of the deleted (grey) one (EDITOR-8442).
     var cellNode = doc === null || doc === void 0 ? void 0 : doc.nodeAt(change.from);
     var isEmptyCellBeingFilled = !isInserted && !!cellNode && isCellEmpty(cellNode);
     var useAddedStyle = isInserted || isEmptyCellBeingFilled;
-    var cellOverlayStyle = useAddedStyle ? addedCellStyle : deletedCellStyle;
+    var cellOverlayStyle = isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? useAddedStyle ? isRoundedTable ? buildAddedCellOverlayRoundedStyle(colors) : buildAddedCellOverlayStyle(colors) : isRoundedTable ? buildDeletedCellOverlayRoundedStyle(colors) : buildDeletedCellOverlayStyle(colors) : resolveCellOverlayStyleLegacy({
+      colorScheme: colorScheme,
+      isRoundedTable: isRoundedTable,
+      useAddedStyle: useAddedStyle
+    });
     cellOverlay.setAttribute('style', cellOverlayStyle);
     decorations.push(
     // change.to - 1 to position the overlay inside the end of the cell
@@ -195,22 +185,14 @@ export var createBlockChangedDecoration = function createBlockChangedDecoration(
       key: 'cell-overlay-decoration'
     }));
   }
-  if (isExtendedEnabled(diffType)) {
-    style = getBlockNodeStyle({
-      nodeName: change.name,
-      colorScheme: colorScheme,
-      isInserted: isInserted,
-      isActive: isActive,
-      diffType: diffType
-    });
-  } else {
-    style = getBlockNodeStyle({
-      nodeName: change.name,
-      colorScheme: colorScheme,
-      isActive: isActive,
-      diffType: diffType
-    });
-  }
+  // isInserted is only read under the extended experience, so pass it unconditionally.
+  var style = getBlockNodeStyle({
+    nodeName: change.name,
+    colorScheme: colorScheme,
+    isInserted: isInserted,
+    isActive: isActive,
+    diffType: diffType
+  });
   var className = getNodeClass(change.name);
   if (style || className) {
     decorations.push(Decoration.node(change.from, change.to, {