@atlaskit/editor-plugin-show-diff 14.0.1 → 14.0.3

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveRemovedLozengeStyle = exports.resolveNestedInsertedNodeStyle = exports.resolveCellOverlayStyle = exports.isTextLikeBlockNode = exports.isMultiContainerBlockNode = exports.hasRestingDeletedRing = exports.getInsertedContentStyle = exports.getDeletedContentStyleUnbounded = exports.getDeletedContentStyle = exports.getChangedNodeStyle = exports.getChangedContentStyle = void 0;
+exports.resolveRemovedLozengeStyle = exports.resolveNestedInsertedNodeStyle = exports.resolveDeletedNodeCSSVariables = exports.resolveCellOverlayStyle = exports.isTextLikeBlockNode = exports.isMultiContainerBlockNode = exports.hasRestingDeletedRing = exports.getInsertedContentStyle = exports.getDeletedContentStyleUnbounded = exports.getDeletedContentStyle = exports.getChangedNodeStyle = exports.getChangedContentStyle = void 0;
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../../isExtendedEnabled");
@@ -34,7 +34,6 @@ var getColorScheme = function getColorScheme(colorScheme) {
  * Preserved as-is; see EDITOR-8281.
  */
 var nestedContentScheme = _schemes.standardScheme;
-var lozengeStyle = (0, _factory.buildDeletedLozengeStyle)();
 
 /**
  * Node-name classification shared by the style resolvers below and by the routing in
@@ -125,7 +124,8 @@ var resolveCellOverlayStyleNext = function resolveCellOverlayStyleNext(_ref) {
   return isInserted ? addedCellStyle : deletedCellStyle;
 };
 var resolveRemovedLozengeStyleNext = function resolveRemovedLozengeStyleNext(colorScheme, isActive) {
-  return isActive ? (0, _factory.buildDeletedLozengeActiveStyle)(getColorScheme(colorScheme)) : lozengeStyle;
+  var colors = getColorScheme(colorScheme);
+  return isActive ? (0, _factory.buildDeletedLozengeActiveStyle)(colors) : (0, _factory.buildDeletedLozengeStyle)(colors);
 };
 var resolveNestedInsertedNodeStyleNext = function resolveNestedInsertedNodeStyleNext() {
   return (0, _factory.buildInsertStyleNode)(nestedContentScheme);
@@ -202,4 +202,14 @@ var resolveNestedInsertedNodeStyle = exports.resolveNestedInsertedNodeStyle = fu
  */
 var hasRestingDeletedRing = exports.hasRestingDeletedRing = function hasRestingDeletedRing(colorScheme) {
   return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? hasRestingDeletedRingNext(colorScheme) : (0, _wrapBlockNodeViewStyles.hasRestingDeletedRingLegacy)(colorScheme);
+};
+
+/**
+ * Custom properties consumed by the `show-diff-deleted-node-vars` selectors in editor-core.
+ *
+ * No `*Legacy` counterpart: the OFF cohort emits no properties at all and takes its colours from the
+ * per-scheme selectors instead, so the gate lives at the single caller in `wrapBlockNodeView`.
+ */
+var resolveDeletedNodeCSSVariables = exports.resolveDeletedNodeCSSVariables = function resolveDeletedNodeCSSVariables(colorScheme) {
+  return (0, _factory.buildDeletedNodeCSSVariables)(getColorScheme(colorScheme));
 };

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

@@ -1,3 +1,4 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 
 /**
@@ -86,11 +87,29 @@ export class NodeViewSerializer {
       return null;
     }
     const constructor = (_this$nodeViews = this.nodeViews) === null || _this$nodeViews === void 0 ? void 0 : _this$nodeViews[targetNode.type.name];
-    if (this.nodeViewBlocklist.has(targetNode.type.name)) {
+    const isBlocklisted = this.nodeViewBlocklist.has(targetNode.type.name);
+
+    // Do not bail out a blocklisted container when it holds an atomic inline node
+    // (e.g. date, status) whose schema toDOM is lossy. Text keeps bailing so the caller
+    // renders it inline
+    const hasAtomicInlineChild = node => {
+      let found = false;
+      node.forEach(child => {
+        if (child.isLeaf && !child.isText) {
+          found = true;
+        }
+      });
+      return found;
+    };
+    const serializeAtomicContainer = isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && !targetNode.isInline && hasAtomicInlineChild(targetNode);
+    if (isBlocklisted && !serializeAtomicContainer) {
       return null;
     }
     try {
-      if (!constructor) {
+      // No constructor, or (gated) the node's own view is blocklisted: render the toDOM
+      // shell and recurse via appendChildNodes so nested atomic inline nodes render via
+      // their node views instead of their lossy schema toDOM.
+      if (!constructor || isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && isBlocklisted) {
         var _targetNode$type$spec, _targetNode$type$spec2;
         if (targetNode.isInline) {
           return null;
@@ -104,11 +123,12 @@ export class NodeViewSerializer {
           contentDOM
         } = DOMSerializer.renderSpec(document, toDOMResult);
         if (dom instanceof HTMLElement) {
-          if (targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
+          // Legacy shortcut: a single-child paragraph serializes its inline content
+          // directly (no <p> wrapper). Applies only to a non-blocklisted paragraph with
+          // no node view
+          if (!isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
             return this.serializeFragment(targetNode.content);
           }
-
-          // Iteratively populate children
           this.appendChildNodes(targetNode.children, contentDOM);
         }
         return dom;

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

@@ -24,6 +24,17 @@ const bgSubtlestPressedMap = {
   magenta: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)",
   gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
 };
+const bgSubtlerMap = {
+  green: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  teal: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+  blue: "var(--ds-background-accent-blue-subtler, #CFE1FD)",
+  purple: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  red: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+  orange: "var(--ds-background-accent-orange-subtler, #FCE4A6)",
+  yellow: "var(--ds-background-accent-yellow-subtler, #F5E989)",
+  magenta: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+  gray: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
+};
 const bgSubtlerPressedMap = {
   green: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
   teal: "var(--ds-background-accent-teal-subtler-pressed, #9DD9EE)",
@@ -63,6 +74,9 @@ function bgSubtlest(color) {
 function bgSubtlestPressed(color) {
   return bgSubtlestPressedMap[color];
 }
+function bgSubtler(color) {
+  return bgSubtlerMap[color];
+}
 function bgSubtlerPressed(color) {
   return bgSubtlerPressedMap[color];
 }
@@ -605,7 +619,7 @@ export function buildDeletedCellOverlayStyle(colors) {
     left: 0,
     width: '100%',
     height: '100%',
-    backgroundColor: `rgba(from ${bgSubtlest(colors.deletedCellColor)} r g b / 0.5)`,
+    backgroundColor: `rgba(from ${bgSubtlest(colors.deletedCellColor)} r g b / ${colors.deletedCellOpacity})`,
     zIndex: 1,
     outline: `1px solid ${deletedCellOutline(colors)}`,
     pointerEvents: 'none'
@@ -620,7 +634,7 @@ export function buildDeletedCellOverlayRoundedStyle(colors) {
     left: 0,
     width: '100%',
     height: '100%',
-    backgroundColor: `rgba(from ${bgSubtlest(colors.deletedCellColor)} r g b / 0.5)`,
+    backgroundColor: `rgba(from ${bgSubtlest(colors.deletedCellColor)} r g b / ${colors.deletedCellOpacity})`,
     zIndex: 2,
     outline: `1px solid ${deletedCellOutline(colors)}`,
     pointerEvents: 'none',
@@ -677,7 +691,7 @@ export function buildDeletedStrikethroughLine(colors, isActive) {
 
 // --- Deleted-content "REMOVED" lozenge ---
 
-/** Structural CSS shared by both lozenge states — everything except the background tint. */
+/** Structural CSS shared by both lozenge states — everything except the tint and the label colour. */
 const deletedLozengeBase = {
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -690,18 +704,24 @@ const deletedLozengeBase = {
   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)"
+  whiteSpace: 'nowrap'
 };
 
 /**
- * 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.
+ * Label colour for both lozenge states. `inverse` is a fixed tone that reads on any tint, which is
+ * why the resting lozenge could get away with a hardcoded gray background; a scheme that tints the
+ * lozenge itself needs `accent` instead.
  */
-export function buildDeletedLozengeStyle() {
+function deletedLozengeTextColor(colors) {
+  return colors.deletedLozengeTextTone === 'accent' ? textAccent(colors.deletedLozengeColor) : "var(--ds-text-warning-inverse, #292A2E)";
+}
+
+/** The "REMOVED" lozenge on a deleted block node — resting state, tinted with deletedLozengeColor. */
+export function buildDeletedLozengeStyle(colors) {
   return convertToInlineCss({
     ...deletedLozengeBase,
-    backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
+    color: deletedLozengeTextColor(colors),
+    backgroundColor: bgSubtler(colors.deletedLozengeColor)
   });
 }
 
@@ -709,6 +729,7 @@ export function buildDeletedLozengeStyle() {
 export function buildDeletedLozengeActiveStyle(colors) {
   return convertToInlineCss({
     ...deletedLozengeBase,
+    color: deletedLozengeTextColor(colors),
     backgroundColor: bgSubtlerPressed(colors.deleteActiveColor)
   });
 }
@@ -838,18 +859,39 @@ export function buildAtomicInlineChangedCSSVariables(colors) {
 }
 
 /**
- * Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`:
- * resting ring, `-outline-new` ring, `-active` ring, and the blockquote/embedCard strike colour.
+ * Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`.
+ * Emitted by `wrapBlockNodeView` alongside `show-diff-deleted-node-vars` — the class is named for
+ * these properties — so one set of selectors in editor-core covers both schemes.
+ *
+ * The three `stateful`-only variables are omitted for `static` (standard) so editor-core's fallback
+ * wins, which is what standard rendered before:
+ * - `--diff-delete-opacity` — the fallback is 0.6 or 0.8 depending on
+ *   `platform_editor_enghealth_a11y_jan_fixes`, a split the scheme must not flatten.
+ * - `--diff-delete-ring-width` — traditional's deleted media ring tracks the inherited marker ring
+ *   width instead of a fixed 1px.
+ * - `--diff-delete-text-decoration-color` — standard's blockquote strike must stay `currentColor`.
+ *
+ * `--diff-delete-media-ring-color` is emitted for every scheme: the a11y-fixes treatment rings
+ * deleted media red even where `deleteColor` is gray, so it needs its own role.
+ *
+ * `--diff-delete-embed-strike-line` carries the *presence* of the deleted-embedCard strike, not its
+ * colour — standard draws none. Encoding it as `line-through`/`none` is what lets the ON cohort drop
+ * the `-traditional` class entirely.
  *
- * Not yet called — those selectors carry `var(…, <today's token>)` fallbacks until
- * `wrapBlockNodeView` emits these under the refactor gate. No opacity variable: that opacity is
- * driven by `platform_editor_enghealth_a11y_jan_fixes`, not by the scheme.
+ * Only reached when `platform_editor_show_diff_color_scheme_refactor` is on; the OFF cohort takes
+ * its values from the per-scheme selectors in editor-core instead.
  */
 export function buildDeletedNodeCSSVariables(colors) {
   return convertToInlineCss({
     '--diff-delete-color': borderAccent(colors.deleteColor),
     '--diff-delete-color-new': bgSubtlest(colors.deleteColor),
     '--diff-delete-color-active': bgSubtlerPressed(colors.deleteActiveColor),
-    '--diff-delete-text-decoration-color': borderAccent(colors.deleteColor)
+    '--diff-delete-media-ring-color': borderAccent(colors.deletedMediaRingColor),
+    '--diff-delete-embed-strike-line': colors.strikesDeletedEmbedCard ? 'line-through' : 'none',
+    ...(colors.deletedNodeEmphasis === 'stateful' ? {
+      '--diff-delete-opacity': '1',
+      '--diff-delete-ring-width': 'var(--diff-decoration-marker-ring-width, 1px)',
+      '--diff-delete-text-decoration-color': borderAccent(colors.deleteColor)
+    } : {})
   });
 }

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

@@ -6,6 +6,10 @@ export const traditionalScheme = {
   deleteColor: 'red',
   deleteActiveColor: 'red',
   deletedCellColor: 'gray',
+  deletedCellOpacity: 0.5,
+  deletedLozengeColor: 'gray',
+  deletedLozengeTextTone: 'inverse',
+  deletedMediaRingColor: 'red',
   deletedRowTreatment: 'strikeColor',
   insertedCellOpacity: 0.5,
   deletedQuoteNodeShape: 'ring',
@@ -17,7 +21,8 @@ export const traditionalScheme = {
   deletedInlineTreatment: 'strikethrough',
   insertedNodeEmphasis: 'stateful',
   deletedNodeEmphasis: 'stateful',
-  deletedQuoteNodeActiveTone: 'backgroundPressed'
+  deletedQuoteNodeActiveTone: 'backgroundPressed',
+  strikesDeletedEmbedCard: true
 };
 
 /** Purple insertions, gray deletions (red on active). */
@@ -28,6 +33,11 @@ export const standardScheme = {
   deleteColor: 'gray',
   deleteActiveColor: 'red',
   deletedCellColor: 'gray',
+  deletedCellOpacity: 0.5,
+  deletedLozengeColor: 'gray',
+  deletedLozengeTextTone: 'inverse',
+  // Red, not `deleteColor`'s gray: a11y-fixes rings deleted media red in both schemes.
+  deletedMediaRingColor: 'red',
   deletedRowTreatment: 'textTint',
   insertedCellOpacity: 0.2,
   deletedQuoteNodeShape: 'borderLeft',
@@ -39,7 +49,8 @@ export const standardScheme = {
   deletedInlineTreatment: 'glyphTint',
   insertedNodeEmphasis: 'static',
   deletedNodeEmphasis: 'static',
-  deletedQuoteNodeActiveTone: 'borderAccent'
+  deletedQuoteNodeActiveTone: 'borderAccent',
+  strikesDeletedEmbedCard: false
 };
 
 /** Maps the public ColorScheme string to its data object. Adding a scheme = one entry here. */

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

@@ -1,10 +1,11 @@
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
+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 { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
-import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
+import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveDeletedNodeCSSVariables, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
 const shouldShowRemovedLozenge = nodeName => {
   switch (nodeName) {
     case 'expand':
@@ -46,6 +47,65 @@ const maybeAddDeletedOutlineNewClass = ({
     nodeView.classList.add('show-diff-deleted-outline-new');
   }
 };
+/**
+ * Pre-refactor markup for a deleted media/embed/blockquote nodeview: one class per scheme, and no
+ * custom properties — the colours come from the matching per-scheme selectors in editor-core.
+ *
+ * Delete this together with those selectors at experiment cleanup (EDITOR-8281).
+ */
+const applyDeletedNodeMarkupLegacy = ({
+  nodeView,
+  targetNode,
+  colorScheme,
+  isActive = false
+}) => {
+  nodeView.classList.add(colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node');
+  if (isActive) {
+    nodeView.classList.add('show-diff-deleted-active');
+  }
+  maybeAddDeletedOutlineNewClass({
+    nodeView,
+    targetNode,
+    colorScheme,
+    isActive
+  });
+};
+
+/**
+ * Registry-driven markup: one scheme-agnostic class, plus the scheme's colours as custom properties,
+ * so editor-core needs one selector per visual role instead of one per scheme.
+ *
+ * `show-diff-deleted-node-vars` *replaces* the legacy classes rather than joining them. Both sets of
+ * selectors live in editor-core for the life of the experiment, and they have equal specificity, so
+ * a shared base class would leave the winner up to source order.
+ *
+ * The `-vars` suffix names what the class means — this node carries its scheme colours as
+ * `--diff-delete-*` custom properties — rather than when it arrived, so it still reads correctly
+ * once the legacy classes are gone.
+ */
+const applyDeletedNodeMarkupNext = ({
+  nodeView,
+  targetNode,
+  colorScheme,
+  isActive = false
+}) => {
+  nodeView.classList.add('show-diff-deleted-node-vars');
+  if (isActive) {
+    nodeView.classList.add('show-diff-deleted-active');
+  }
+  maybeAddDeletedOutlineNewClass({
+    nodeView,
+    targetNode,
+    colorScheme,
+    isActive
+  });
+  const currentStyle = nodeView.getAttribute('style') || '';
+  const separator = currentStyle && !currentStyle.trimEnd().endsWith(';') ? ';' : '';
+  nodeView.setAttribute('style', `${currentStyle}${separator}${resolveDeletedNodeCSSVariables(colorScheme)}`);
+};
+
+/** Single gate for the deleted-node classes and custom properties. */
+const applyDeletedNodeMarkup = args => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? applyDeletedNodeMarkupNext(args) : applyDeletedNodeMarkupLegacy(args);
 
 /**
  * Checks if a node should apply deleted styles directly without wrapper
@@ -254,12 +314,7 @@ const handleEmbedCardWithLozenge = ({
     });
   }
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    const showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
-    nodeView.classList.add(showDiffDeletedNodeClass);
-    if (isActive) {
-      nodeView.classList.add('show-diff-deleted-active');
-    }
-    maybeAddDeletedOutlineNewClass({
+    applyDeletedNodeMarkup({
       nodeView,
       targetNode,
       colorScheme,
@@ -300,12 +355,7 @@ const handleMediaSingleWithLozenge = ({
 
   // Add deleted node class if needed
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    const showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
-    nodeView.classList.add(showDiffDeletedNodeClass);
-    if (isActive) {
-      nodeView.classList.add('show-diff-deleted-active');
-    }
-    maybeAddDeletedOutlineNewClass({
+    applyDeletedNodeMarkup({
       nodeView,
       targetNode,
       colorScheme,
@@ -367,12 +417,7 @@ const wrapBlockNode = ({
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    const showDiffDeletedNodeClass = colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node';
-    nodeView.classList.add(showDiffDeletedNodeClass);
-    if (isActive) {
-      nodeView.classList.add('show-diff-deleted-active');
-    }
-    maybeAddDeletedOutlineNewClass({
+    applyDeletedNodeMarkup({
       nodeView,
       targetNode,
       colorScheme,

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

@@ -13,7 +13,7 @@
 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 { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildAddedCellOverlayStyleNew, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedInlineContentStyle, buildDeletedInlineContentStyleExtended, buildDeletedLozengeActiveStyle, buildDeletedLozengeStyle, buildDeletedQuoteNodeWithLozengeStyle, buildDeletedStrikethroughLine, buildDeletedWrappedBlockOutline, buildInsertedBlockNodeStyle, buildInsertedInlineStyle, buildInsertStyleInBlockExtended, buildInsertStyleInBlockExtendedNoUnderline, buildInsertStyleNode } from '../colorSchemes/factory';
+import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildAddedCellOverlayStyleNew, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedInlineContentStyle, buildDeletedInlineContentStyleExtended, buildDeletedLozengeActiveStyle, buildDeletedLozengeStyle, buildDeletedNodeCSSVariables, buildDeletedQuoteNodeWithLozengeStyle, buildDeletedStrikethroughLine, buildDeletedWrappedBlockOutline, buildInsertedBlockNodeStyle, buildInsertedInlineStyle, buildInsertStyleInBlockExtended, buildInsertStyleInBlockExtendedNoUnderline, buildInsertStyleNode } from '../colorSchemes/factory';
 import { colorSchemeRegistry, standardScheme } from '../colorSchemes/schemes';
 import { getChangedContentStyleLegacy, getChangedNodeStyleLegacy, getDeletedContentStyleLegacy, getDeletedContentStyleUnboundedLegacy, getInsertedContentStyleLegacy, hasRestingDeletedRingLegacy, resolveCellOverlayStyleLegacy, resolveNestedInsertedNodeStyleLegacy, resolveRemovedLozengeStyleLegacy } from './wrapBlockNodeViewStyles.legacy';
 const DEFAULT_COLOR_SCHEME = 'standard';
@@ -25,7 +25,6 @@ const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null &
  * Preserved as-is; see EDITOR-8281.
  */
 const nestedContentScheme = standardScheme;
-const lozengeStyle = buildDeletedLozengeStyle();
 
 /**
  * Node-name classification shared by the style resolvers below and by the routing in
@@ -99,7 +98,10 @@ const resolveCellOverlayStyleNext = ({
   const deletedCellStyle = isRoundedTable ? buildDeletedCellOverlayRoundedStyle(colors) : buildDeletedCellOverlayStyle(colors);
   return isInserted ? addedCellStyle : deletedCellStyle;
 };
-const resolveRemovedLozengeStyleNext = (colorScheme, isActive) => isActive ? buildDeletedLozengeActiveStyle(getColorScheme(colorScheme)) : lozengeStyle;
+const resolveRemovedLozengeStyleNext = (colorScheme, isActive) => {
+  const colors = getColorScheme(colorScheme);
+  return isActive ? buildDeletedLozengeActiveStyle(colors) : buildDeletedLozengeStyle(colors);
+};
 const resolveNestedInsertedNodeStyleNext = () => buildInsertStyleNode(nestedContentScheme);
 
 // Only 'stateful' schemes have a resting ring.
@@ -140,4 +142,12 @@ export const resolveNestedInsertedNodeStyle = () => isExperimentEnabled('platfor
  * Whether the colour scheme draws a resting (non-active) ring on a deleted media/embed node, which
  * is what the `show-diff-deleted-outline-new` class styles in editor-core's smartCardStyles.
  */
-export const hasRestingDeletedRing = colorScheme => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? hasRestingDeletedRingNext(colorScheme) : hasRestingDeletedRingLegacy(colorScheme);
+export const hasRestingDeletedRing = colorScheme => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? hasRestingDeletedRingNext(colorScheme) : hasRestingDeletedRingLegacy(colorScheme);
+
+/**
+ * Custom properties consumed by the `show-diff-deleted-node-vars` selectors in editor-core.
+ *
+ * No `*Legacy` counterpart: the OFF cohort emits no properties at all and takes its colours from the
+ * per-scheme selectors instead, so the gate lives at the single caller in `wrapBlockNodeView`.
+ */
+export const resolveDeletedNodeCSSVariables = colorScheme => buildDeletedNodeCSSVariables(getColorScheme(colorScheme));

package/dist/esm/pm-plugins/NodeViewSerializer.js

@@ -1,5 +1,6 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 
 /**
@@ -96,11 +97,29 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
         return null;
       }
       var constructor = (_this$nodeViews = this.nodeViews) === null || _this$nodeViews === void 0 ? void 0 : _this$nodeViews[targetNode.type.name];
-      if (this.nodeViewBlocklist.has(targetNode.type.name)) {
+      var isBlocklisted = this.nodeViewBlocklist.has(targetNode.type.name);
+
+      // Do not bail out a blocklisted container when it holds an atomic inline node
+      // (e.g. date, status) whose schema toDOM is lossy. Text keeps bailing so the caller
+      // renders it inline
+      var hasAtomicInlineChild = function hasAtomicInlineChild(node) {
+        var found = false;
+        node.forEach(function (child) {
+          if (child.isLeaf && !child.isText) {
+            found = true;
+          }
+        });
+        return found;
+      };
+      var serializeAtomicContainer = isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && !targetNode.isInline && hasAtomicInlineChild(targetNode);
+      if (isBlocklisted && !serializeAtomicContainer) {
         return null;
       }
       try {
-        if (!constructor) {
+        // No constructor, or (gated) the node's own view is blocklisted: render the toDOM
+        // shell and recurse via appendChildNodes so nested atomic inline nodes render via
+        // their node views instead of their lossy schema toDOM.
+        if (!constructor || isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && isBlocklisted) {
           var _targetNode$type$spec, _targetNode$type$spec2;
           if (targetNode.isInline) {
             return null;
@@ -113,11 +132,12 @@ export var NodeViewSerializer = /*#__PURE__*/function () {
             _dom = _DOMSerializer$render.dom,
             _contentDOM = _DOMSerializer$render.contentDOM;
           if (_dom instanceof HTMLElement) {
-            if (targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
+            // Legacy shortcut: a single-child paragraph serializes its inline content
+            // directly (no <p> wrapper). Applies only to a non-blocklisted paragraph with
+            // no node view
+            if (!isExperimentEnabled('platform_editor_show_diff_deleted_nodeview_content') && targetNode.type.name === 'paragraph' && targetNode.children.length === 1) {
               return this.serializeFragment(targetNode.content);
             }
-
-            // Iteratively populate children
             this.appendChildNodes(targetNode.children, _contentDOM);
           }
           return _dom;

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

@@ -27,6 +27,17 @@ var bgSubtlestPressedMap = {
   magenta: "var(--ds-background-accent-magenta-subtlest-pressed, #FCB6E1)",
   gray: "var(--ds-background-accent-gray-subtlest-pressed, #B7B9BE)"
 };
+var bgSubtlerMap = {
+  green: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  teal: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+  blue: "var(--ds-background-accent-blue-subtler, #CFE1FD)",
+  purple: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  red: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+  orange: "var(--ds-background-accent-orange-subtler, #FCE4A6)",
+  yellow: "var(--ds-background-accent-yellow-subtler, #F5E989)",
+  magenta: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+  gray: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
+};
 var bgSubtlerPressedMap = {
   green: "var(--ds-background-accent-green-subtler-pressed, #7EE2B8)",
   teal: "var(--ds-background-accent-teal-subtler-pressed, #9DD9EE)",
@@ -66,6 +77,9 @@ function bgSubtlest(color) {
 function bgSubtlestPressed(color) {
   return bgSubtlestPressedMap[color];
 }
+function bgSubtler(color) {
+  return bgSubtlerMap[color];
+}
 function bgSubtlerPressed(color) {
   return bgSubtlerPressedMap[color];
 }
@@ -604,7 +618,7 @@ export function buildDeletedCellOverlayStyle(colors) {
     left: 0,
     width: '100%',
     height: '100%',
-    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.deletedCellColor), " r g b / 0.5)"),
+    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.deletedCellColor), " r g b / ").concat(colors.deletedCellOpacity, ")"),
     zIndex: 1,
     outline: "1px solid ".concat(deletedCellOutline(colors)),
     pointerEvents: 'none'
@@ -619,7 +633,7 @@ export function buildDeletedCellOverlayRoundedStyle(colors) {
     left: 0,
     width: '100%',
     height: '100%',
-    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.deletedCellColor), " r g b / 0.5)"),
+    backgroundColor: "rgba(from ".concat(bgSubtlest(colors.deletedCellColor), " r g b / ").concat(colors.deletedCellOpacity, ")"),
     zIndex: 2,
     outline: "1px solid ".concat(deletedCellOutline(colors)),
     pointerEvents: 'none',
@@ -676,7 +690,7 @@ export function buildDeletedStrikethroughLine(colors, isActive) {
 
 // --- Deleted-content "REMOVED" lozenge ---
 
-/** Structural CSS shared by both lozenge states — everything except the background tint. */
+/** Structural CSS shared by both lozenge states — everything except the tint and the label colour. */
 var deletedLozengeBase = {
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -689,23 +703,30 @@ var deletedLozengeBase = {
   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)"
+  whiteSpace: 'nowrap'
 };
 
 /**
- * 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.
+ * Label colour for both lozenge states. `inverse` is a fixed tone that reads on any tint, which is
+ * why the resting lozenge could get away with a hardcoded gray background; a scheme that tints the
+ * lozenge itself needs `accent` instead.
  */
-export function buildDeletedLozengeStyle() {
+function deletedLozengeTextColor(colors) {
+  return colors.deletedLozengeTextTone === 'accent' ? textAccent(colors.deletedLozengeColor) : "var(--ds-text-warning-inverse, #292A2E)";
+}
+
+/** The "REMOVED" lozenge on a deleted block node — resting state, tinted with deletedLozengeColor. */
+export function buildDeletedLozengeStyle(colors) {
   return convertToInlineCss(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
-    backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
+    color: deletedLozengeTextColor(colors),
+    backgroundColor: bgSubtler(colors.deletedLozengeColor)
   }));
 }
 
 /** The "REMOVED" lozenge — active state, tinted with the scheme's deleteActiveColor. */
 export function buildDeletedLozengeActiveStyle(colors) {
   return convertToInlineCss(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
+    color: deletedLozengeTextColor(colors),
     backgroundColor: bgSubtlerPressed(colors.deleteActiveColor)
   }));
 }
@@ -836,18 +857,38 @@ export function buildAtomicInlineChangedCSSVariables(colors) {
 }
 
 /**
- * Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`:
- * resting ring, `-outline-new` ring, `-active` ring, and the blockquote/embedCard strike colour.
+ * Deleted-node wrapper variables, one per visual role in editor-core's `showDiffDeletedNodeStyles`.
+ * Emitted by `wrapBlockNodeView` alongside `show-diff-deleted-node-vars` — the class is named for
+ * these properties — so one set of selectors in editor-core covers both schemes.
+ *
+ * The three `stateful`-only variables are omitted for `static` (standard) so editor-core's fallback
+ * wins, which is what standard rendered before:
+ * - `--diff-delete-opacity` — the fallback is 0.6 or 0.8 depending on
+ *   `platform_editor_enghealth_a11y_jan_fixes`, a split the scheme must not flatten.
+ * - `--diff-delete-ring-width` — traditional's deleted media ring tracks the inherited marker ring
+ *   width instead of a fixed 1px.
+ * - `--diff-delete-text-decoration-color` — standard's blockquote strike must stay `currentColor`.
  *
- * Not yet called — those selectors carry `var(…, <today's token>)` fallbacks until
- * `wrapBlockNodeView` emits these under the refactor gate. No opacity variable: that opacity is
- * driven by `platform_editor_enghealth_a11y_jan_fixes`, not by the scheme.
+ * `--diff-delete-media-ring-color` is emitted for every scheme: the a11y-fixes treatment rings
+ * deleted media red even where `deleteColor` is gray, so it needs its own role.
+ *
+ * `--diff-delete-embed-strike-line` carries the *presence* of the deleted-embedCard strike, not its
+ * colour — standard draws none. Encoding it as `line-through`/`none` is what lets the ON cohort drop
+ * the `-traditional` class entirely.
+ *
+ * Only reached when `platform_editor_show_diff_color_scheme_refactor` is on; the OFF cohort takes
+ * its values from the per-scheme selectors in editor-core instead.
  */
 export function buildDeletedNodeCSSVariables(colors) {
-  return convertToInlineCss({
+  return convertToInlineCss(_objectSpread({
     '--diff-delete-color': borderAccent(colors.deleteColor),
     '--diff-delete-color-new': bgSubtlest(colors.deleteColor),
     '--diff-delete-color-active': bgSubtlerPressed(colors.deleteActiveColor),
+    '--diff-delete-media-ring-color': borderAccent(colors.deletedMediaRingColor),
+    '--diff-delete-embed-strike-line': colors.strikesDeletedEmbedCard ? 'line-through' : 'none'
+  }, colors.deletedNodeEmphasis === 'stateful' ? {
+    '--diff-delete-opacity': '1',
+    '--diff-delete-ring-width': 'var(--diff-decoration-marker-ring-width, 1px)',
     '--diff-delete-text-decoration-color': borderAccent(colors.deleteColor)
-  });
+  } : {}));
 }