@atlaskit/editor-plugin-show-diff 14.0.0 → 14.0.2

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 14.0.2
+
+### Patch Changes
+
+- [`86e4ff02ed98c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/86e4ff02ed98c) -
+  [ux] Collapse the per-scheme show-diff selectors onto one class per visual role, behind
+  `platform_editor_show_diff_color_scheme_refactor`. No rendered change in either cohort.
+
+  With the experiment on, `wrapBlockNodeView` marks deleted media, embed and blockquote nodeviews
+  with `show-diff-deleted-node-next` and emits the scheme's colours as `--diff-delete-*` custom
+  properties, so editor-core carries one set of selectors instead of one per scheme. The
+  atomic-inline highlight (date, emoji, mention, status) works the same way. Two new scheme fields —
+  `deletedMediaRingColor` and `strikesDeletedEmbedCard` — replace the last literal colours on that
+  path, both set to today's values.
+
+  With it off, the pre-refactor classes and per-scheme selectors run unchanged. Both selector sets
+  ship together for the life of the experiment, keyed on disjoint base classes.
+
+- [`e5bea22208fbe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e5bea22208fbe) -
+  Fix deleted diffs dropping atomic inline nodes: when a deleted paragraph or table cell contains an
+  atomic inline node (e.g. date, status), it now serializes via its node view instead of lossy
+  schema `toDOM`, so dates no longer disappear and status lozenges keep their styling. Plain and
+  marked text is unaffected. Gated behind the `platform_editor_show_diff_deleted_nodeview_content`
+  experiment.
+
+## 14.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.0.0
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ exports.NodeViewSerializer = void 0;
 exports.isEditorViewWithNodeViews = isEditorViewWithNodeViews;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _model = require("@atlaskit/editor-prosemirror/model");
 /**
  * Utilities for working with ProseMirror node views and DOM serialization within the
@@ -103,11 +104,29 @@ var NodeViewSerializer = exports.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 = (0, _isExperimentEnabled.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 || (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_deleted_nodeview_content') && isBlocklisted) {
           var _targetNode$type$spec, _targetNode$type$spec2;
           if (targetNode.isInline) {
             return null;
@@ -120,11 +139,12 @@ var NodeViewSerializer = exports.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 (!(0, _isExperimentEnabled.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/cjs/pm-plugins/decorations/colorSchemes/factory.js

@@ -94,6 +94,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)",
@@ -133,6 +144,9 @@ function bgSubtlest(color) {
 function bgSubtlestPressed(color) {
   return bgSubtlestPressedMap[color];
 }
+function bgSubtler(color) {
+  return bgSubtlerMap[color];
+}
 function bgSubtlerPressed(color) {
   return bgSubtlerPressedMap[color];
 }
@@ -671,7 +685,7 @@ 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'
@@ -686,7 +700,7 @@ 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',
@@ -743,7 +757,7 @@ 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',
@@ -756,23 +770,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.
  */
-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. */
+function buildDeletedLozengeStyle(colors) {
   return (0, _lazyNodeView.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. */
 function buildDeletedLozengeActiveStyle(colors) {
   return (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, deletedLozengeBase), {}, {
+    color: deletedLozengeTextColor(colors),
     backgroundColor: bgSubtlerPressed(colors.deleteActiveColor)
   }));
 }
@@ -903,18 +924,38 @@ 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.
  */
 function buildDeletedNodeCSSVariables(colors) {
-  return (0, _lazyNodeView.convertToInlineCss)({
+  return (0, _lazyNodeView.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)
-  });
+  } : {}));
 }

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

@@ -12,6 +12,10 @@ var traditionalScheme = exports.traditionalScheme = {
   deleteColor: 'red',
   deleteActiveColor: 'red',
   deletedCellColor: 'gray',
+  deletedCellOpacity: 0.5,
+  deletedLozengeColor: 'gray',
+  deletedLozengeTextTone: 'inverse',
+  deletedMediaRingColor: 'red',
   deletedRowTreatment: 'strikeColor',
   insertedCellOpacity: 0.5,
   deletedQuoteNodeShape: 'ring',
@@ -23,7 +27,8 @@ var traditionalScheme = exports.traditionalScheme = {
   deletedInlineTreatment: 'strikethrough',
   insertedNodeEmphasis: 'stateful',
   deletedNodeEmphasis: 'stateful',
-  deletedQuoteNodeActiveTone: 'backgroundPressed'
+  deletedQuoteNodeActiveTone: 'backgroundPressed',
+  strikesDeletedEmbedCard: true
 };
 
 /** Purple insertions, gray deletions (red on active). */
@@ -34,6 +39,11 @@ var standardScheme = exports.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',
@@ -45,7 +55,8 @@ var standardScheme = exports.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/cjs/pm-plugins/decorations/utils/wrapBlockNodeView.js

@@ -9,6 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _messages = require("@atlaskit/editor-common/messages");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../../isExtendedEnabled");
 var _tableCellEdgeAttrs = require("./tableCellEdgeAttrs");
@@ -54,6 +55,67 @@ var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_re
     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).
+ */
+var applyDeletedNodeMarkupLegacy = function applyDeletedNodeMarkupLegacy(_ref2) {
+  var nodeView = _ref2.nodeView,
+    targetNode = _ref2.targetNode,
+    colorScheme = _ref2.colorScheme,
+    _ref2$isActive = _ref2.isActive,
+    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
+  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: nodeView,
+    targetNode: targetNode,
+    colorScheme: colorScheme,
+    isActive: 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.
+ */
+var applyDeletedNodeMarkupNext = function applyDeletedNodeMarkupNext(_ref3) {
+  var nodeView = _ref3.nodeView,
+    targetNode = _ref3.targetNode,
+    colorScheme = _ref3.colorScheme,
+    _ref3$isActive = _ref3.isActive,
+    isActive = _ref3$isActive === void 0 ? false : _ref3$isActive;
+  nodeView.classList.add('show-diff-deleted-node-vars');
+  if (isActive) {
+    nodeView.classList.add('show-diff-deleted-active');
+  }
+  maybeAddDeletedOutlineNewClass({
+    nodeView: nodeView,
+    targetNode: targetNode,
+    colorScheme: colorScheme,
+    isActive: isActive
+  });
+  var currentStyle = nodeView.getAttribute('style') || '';
+  var separator = currentStyle && !currentStyle.trimEnd().endsWith(';') ? ';' : '';
+  nodeView.setAttribute('style', "".concat(currentStyle).concat(separator).concat((0, _wrapBlockNodeViewStyles.resolveDeletedNodeCSSVariables)(colorScheme)));
+};
+
+/** Single gate for the deleted-node classes and custom properties. */
+var applyDeletedNodeMarkup = function applyDeletedNodeMarkup(args) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? applyDeletedNodeMarkupNext(args) : applyDeletedNodeMarkupLegacy(args);
+};
 
 /**
  * Checks if a node should apply deleted styles directly without wrapper
@@ -62,10 +124,10 @@ var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_re
 var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
   return nodeName === 'heading';
 };
-var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
-  var element = _ref2.element,
-    colorScheme = _ref2.colorScheme,
-    isInserted = _ref2.isInserted;
+var applyCellOverlayStyles = function applyCellOverlayStyles(_ref4) {
+  var element = _ref4.element,
+    colorScheme = _ref4.colorScheme,
+    isInserted = _ref4.isInserted;
   var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
   var overlayStyle = (0, _wrapBlockNodeViewStyles.resolveCellOverlayStyle)({
     colorScheme: colorScheme,
@@ -123,30 +185,30 @@ var createBlockNodeWrapper = function createBlockNodeWrapper() {
 /**
  * Applies styles directly to an HTML element by merging with existing styles
  */
-var applyStylesToElement = function applyStylesToElement(_ref3) {
-  var element = _ref3.element,
-    targetNode = _ref3.targetNode,
-    colorScheme = _ref3.colorScheme,
-    isActive = _ref3.isActive,
-    isInserted = _ref3.isInserted,
-    diffType = _ref3.diffType,
-    _ref3$hideAddedDiffsU = _ref3.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref3$hideAddedDiffsU === void 0 ? false : _ref3$hideAddedDiffsU;
+var applyStylesToElement = function applyStylesToElement(_ref5) {
+  var element = _ref5.element,
+    targetNode = _ref5.targetNode,
+    colorScheme = _ref5.colorScheme,
+    isActive = _ref5.isActive,
+    isInserted = _ref5.isInserted,
+    diffType = _ref5.diffType,
+    _ref5$hideAddedDiffsU = _ref5.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref5$hideAddedDiffsU === void 0 ? false : _ref5$hideAddedDiffsU;
   var currentStyle = element.getAttribute('style') || '';
   var contentStyle = (0, _wrapBlockNodeViewStyles.getChangedContentStyle)(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   element.setAttribute('style', "".concat(currentStyle).concat(contentStyle).concat(nodeSpecificStyle));
 };
-var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4) {
-  var element = _ref4.element,
-    targetNode = _ref4.targetNode,
-    colorScheme = _ref4.colorScheme,
-    isActive = _ref4.isActive,
-    isInserted = _ref4.isInserted,
-    diffType = _ref4.diffType,
-    _ref4$hideAddedDiffsU = _ref4.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref4$hideAddedDiffsU === void 0 ? false : _ref4$hideAddedDiffsU;
+var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref6) {
+  var element = _ref6.element,
+    targetNode = _ref6.targetNode,
+    colorScheme = _ref6.colorScheme,
+    isActive = _ref6.isActive,
+    isInserted = _ref6.isInserted,
+    diffType = _ref6.diffType,
+    _ref6$hideAddedDiffsU = _ref6.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref6$hideAddedDiffsU === void 0 ? false : _ref6$hideAddedDiffsU;
   var currentStyle = element.getAttribute('style') || '';
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
@@ -171,15 +233,15 @@ var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4
   }
   element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
 };
-var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5) {
-  var element = _ref5.element,
-    targetNode = _ref5.targetNode,
-    colorScheme = _ref5.colorScheme,
-    isActive = _ref5.isActive,
-    isInserted = _ref5.isInserted,
-    diffType = _ref5.diffType,
-    _ref5$hideAddedDiffsU = _ref5.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref5$hideAddedDiffsU === void 0 ? false : _ref5$hideAddedDiffsU;
+var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref7) {
+  var element = _ref7.element,
+    targetNode = _ref7.targetNode,
+    colorScheme = _ref7.colorScheme,
+    isActive = _ref7.isActive,
+    isInserted = _ref7.isInserted,
+    diffType = _ref7.diffType,
+    _ref7$hideAddedDiffsU = _ref7.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref7$hideAddedDiffsU === void 0 ? false : _ref7$hideAddedDiffsU;
   var currentStyle = element.getAttribute('style') || '';
   var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (nodeSpecificStyle) {
@@ -206,15 +268,15 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5)
 /**
  * Creates a content wrapper with deleted styles for a block node
  */
-var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6) {
-  var nodeView = _ref6.nodeView,
-    targetNode = _ref6.targetNode,
-    colorScheme = _ref6.colorScheme,
-    isActive = _ref6.isActive,
-    isInserted = _ref6.isInserted,
-    diffType = _ref6.diffType,
-    _ref6$hideAddedDiffsU = _ref6.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref6$hideAddedDiffsU === void 0 ? false : _ref6$hideAddedDiffsU;
+var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref8) {
+  var nodeView = _ref8.nodeView,
+    targetNode = _ref8.targetNode,
+    colorScheme = _ref8.colorScheme,
+    isActive = _ref8.isActive,
+    isInserted = _ref8.isInserted,
+    diffType = _ref8.diffType,
+    _ref8$hideAddedDiffsU = _ref8.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref8$hideAddedDiffsU === void 0 ? false : _ref8$hideAddedDiffsU;
   var contentWrapper = document.createElement('div');
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   var nodeStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline);
@@ -235,14 +297,14 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6
  * to wait for the rich-media-item to appear before attaching the lozenge.
  * @returns true if embedCard was handled
  */
-var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref7) {
-  var dom = _ref7.dom,
-    nodeView = _ref7.nodeView,
-    targetNode = _ref7.targetNode,
-    lozenge = _ref7.lozenge,
-    colorScheme = _ref7.colorScheme,
-    _ref7$isActive = _ref7.isActive,
-    isActive = _ref7$isActive === void 0 ? false : _ref7$isActive;
+var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref9) {
+  var dom = _ref9.dom,
+    nodeView = _ref9.nodeView,
+    targetNode = _ref9.targetNode,
+    lozenge = _ref9.lozenge,
+    colorScheme = _ref9.colorScheme,
+    _ref9$isActive = _ref9.isActive,
+    isActive = _ref9$isActive === void 0 ? false : _ref9$isActive;
   if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -263,12 +325,7 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref7) {
     });
   }
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var 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: nodeView,
       targetNode: targetNode,
       colorScheme: colorScheme,
@@ -283,14 +340,14 @@ var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref7) {
  * Handles special mediaSingle node rendering with lozenge on child media element
  * @returns true if mediaSingle was handled, false otherwise
  */
-var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref8) {
-  var dom = _ref8.dom,
-    nodeView = _ref8.nodeView,
-    targetNode = _ref8.targetNode,
-    lozenge = _ref8.lozenge,
-    colorScheme = _ref8.colorScheme,
-    _ref8$isActive = _ref8.isActive,
-    isActive = _ref8$isActive === void 0 ? false : _ref8$isActive;
+var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref0) {
+  var dom = _ref0.dom,
+    nodeView = _ref0.nodeView,
+    targetNode = _ref0.targetNode,
+    lozenge = _ref0.lozenge,
+    colorScheme = _ref0.colorScheme,
+    _ref0$isActive = _ref0.isActive,
+    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive;
   if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
     return false;
   }
@@ -309,12 +366,7 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref8)
 
   // Add deleted node class if needed
   if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var 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: nodeView,
       targetNode: targetNode,
       colorScheme: colorScheme,
@@ -328,19 +380,19 @@ var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref8)
 /**
  * Appends a block node with wrapper, lozenge, and appropriate styling
  */
-var wrapBlockNode = function wrapBlockNode(_ref9) {
-  var dom = _ref9.dom,
-    nodeView = _ref9.nodeView,
-    targetNode = _ref9.targetNode,
-    colorScheme = _ref9.colorScheme,
-    intl = _ref9.intl,
-    _ref9$isActive = _ref9.isActive,
-    isActive = _ref9$isActive === void 0 ? false : _ref9$isActive,
-    _ref9$isInserted = _ref9.isInserted,
-    isInserted = _ref9$isInserted === void 0 ? false : _ref9$isInserted,
-    diffType = _ref9.diffType,
-    _ref9$hideAddedDiffsU = _ref9.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref9$hideAddedDiffsU === void 0 ? false : _ref9$hideAddedDiffsU;
+var wrapBlockNode = function wrapBlockNode(_ref1) {
+  var dom = _ref1.dom,
+    nodeView = _ref1.nodeView,
+    targetNode = _ref1.targetNode,
+    colorScheme = _ref1.colorScheme,
+    intl = _ref1.intl,
+    _ref1$isActive = _ref1.isActive,
+    isActive = _ref1$isActive === void 0 ? false : _ref1$isActive,
+    _ref1$isInserted = _ref1.isInserted,
+    isInserted = _ref1$isInserted === void 0 ? false : _ref1$isInserted,
+    diffType = _ref1.diffType,
+    _ref1$hideAddedDiffsU = _ref1.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref1$hideAddedDiffsU === void 0 ? false : _ref1$hideAddedDiffsU;
   var blockWrapper = createBlockNodeWrapper();
   var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
   if (shouldShowRemovedLozenge(targetNodeName) && (!(0, _isExtendedEnabled.isExtendedEnabled)(diffType) || !isInserted)) {
@@ -378,12 +430,7 @@ var wrapBlockNode = function wrapBlockNode(_ref9) {
   });
   blockWrapper.append(contentWrapper);
   if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
-    var 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: nodeView,
       targetNode: targetNode,
       colorScheme: colorScheme,
@@ -398,19 +445,19 @@ var wrapBlockNode = function wrapBlockNode(_ref9) {
  * 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(_ref0) {
-  var dom = _ref0.dom,
-    nodeView = _ref0.nodeView,
-    targetNode = _ref0.targetNode,
-    colorScheme = _ref0.colorScheme,
-    intl = _ref0.intl,
-    _ref0$isActive = _ref0.isActive,
-    isActive = _ref0$isActive === void 0 ? false : _ref0$isActive,
-    _ref0$isInserted = _ref0.isInserted,
-    isInserted = _ref0$isInserted === void 0 ? false : _ref0$isInserted,
-    diffType = _ref0.diffType,
-    _ref0$hideAddedDiffsU = _ref0.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref0$hideAddedDiffsU === void 0 ? false : _ref0$hideAddedDiffsU;
+var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_ref10) {
+  var dom = _ref10.dom,
+    nodeView = _ref10.nodeView,
+    targetNode = _ref10.targetNode,
+    colorScheme = _ref10.colorScheme,
+    intl = _ref10.intl,
+    _ref10$isActive = _ref10.isActive,
+    isActive = _ref10$isActive === void 0 ? false : _ref10$isActive,
+    _ref10$isInserted = _ref10.isInserted,
+    isInserted = _ref10$isInserted === void 0 ? false : _ref10$isInserted,
+    diffType = _ref10.diffType,
+    _ref10$hideAddedDiffs = _ref10.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref10$hideAddedDiffs === void 0 ? false : _ref10$hideAddedDiffs;
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (nodeView instanceof HTMLElement) {
       if (isInserted && (0, _wrapBlockNodeViewStyles.isMultiContainerBlockNode)(targetNode.type.name)) {
@@ -499,12 +546,12 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
  * CSS backgrounds don't work when applied to a wrapper around a paragraph, so
  * the wrapper needs to be injected inside the node around the child content.
  */
-var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrapper(_ref1) {
-  var node = _ref1.node,
-    colorScheme = _ref1.colorScheme,
-    isActive = _ref1.isActive,
-    isInserted = _ref1.isInserted,
-    diffType = _ref1.diffType;
+var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrapper(_ref11) {
+  var node = _ref11.node,
+    colorScheme = _ref11.colorScheme,
+    isActive = _ref11.isActive,
+    isInserted = _ref11.isInserted,
+    diffType = _ref11.diffType;
   var wrapper = document.createElement('span');
   wrapper.setAttribute('style', isInserted ? (0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive) : (0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType));
   (0, _toConsumableArray2.default)(node.childNodes).forEach(function (child) {