@atlaskit/editor-plugin-show-diff 13.0.10 → 13.1.0

package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.styles.legacy.js

@@ -0,0 +1,118 @@
+/**
+ * Pre-refactor code preserved for the OFF cohort of
+ * `platform_editor_show_diff_color_scheme_refactor`.
+ *
+ * This is a verbatim copy of the `getBlockNodeStyle` and the cell-overlay style selection that
+ * lived in `createBlockChangedDecoration.ts` before the `colorSchemeRegistry` + `factory.ts`
+ * migration. Do not modify it — it exists so the OFF cohort keeps the exact pre-refactor style
+ * strings. Delete this file at cleanup, together with `colorSchemes/standard.ts`,
+ * `colorSchemes/traditional.ts` (EDITOR-8281).
+ */
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { isExtendedEnabled } from '../isExtendedEnabled';
+import { standardDecorationMarkerVariable, deletedDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode, deletedContentStyleNew, deletedStyleQuoteNode, addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedCellOverlayStyle, deletedCellOverlayRoundedStyle } from './colorSchemes/standard';
+import { traditionalDecorationMarkerVariableActive, traditionalDecorationMarkerVariableNew, traditionalDeletedDecorationMarkerVariableActive, traditionalDeletedDecorationMarkerVariableNew, traditionalStyleQuoteNodeActive, traditionalStyleQuoteNodeNew, traditionalStyleRuleNodeActive, traditionalStyleRuleNodeNew, traditionalStyleCardBlockNodeActive, traditionalStyleCardBlockNodeNew, traditionalStyleNodeActive, traditionalStyleNodeNew, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle, deletedTraditionalCellOverlayStyle, deletedTraditionalCellOverlayRoundedStyle } from './colorSchemes/traditional';
+
+/** Verbatim copy of the pre-refactor cell-overlay style selection. */
+export const resolveCellOverlayStyleLegacy = ({
+  colorScheme,
+  isRoundedTable,
+  useAddedStyle
+}) => {
+  const isTraditional = colorScheme === 'traditional';
+  const addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
+  const deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
+  return useAddedStyle ? addedCellStyle : deletedCellStyle;
+};
+export const getBlockNodeStyleLegacy = ({
+  nodeName,
+  colorScheme,
+  isInserted = true,
+  isActive = false,
+  diffType
+}) => {
+  const 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
+    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 (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;
+    }
+  }
+  return isTraditional ? isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew : editingStyleNode;
+};

package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.js

@@ -2,13 +2,16 @@ import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+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 { addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedRowStyle, deletedCellOverlayStyle, deletedCellOverlayRoundedStyle } from './colorSchemes/standard';
-import { deletedTraditionalRowStyle, deletedTraditionalCellOverlayStyle, deletedTraditionalCellOverlayRoundedStyle, traditionalAddedCellOverlayStyle, traditionalAddedCellOverlayRoundedStyle } from './colorSchemes/traditional';
+import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedRowStyle } from './colorSchemes/factory';
+import { colorSchemeRegistry } from './colorSchemes/schemes';
+import { resolveCellOverlayStyleLegacy, resolveDeletedRowStyleLegacy } from './createChangedRowDecorationWidgets.styles.legacy';
 import { buildDiffDecorationSpec } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { applyCellEdgeAttrs, getRowCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
+const DEFAULT_COLOR_SCHEME = 'standard';
 /**
  * Extracts information about deleted table rows from a change
  */
@@ -112,12 +115,11 @@ const isEmptyRow = rowNode => {
  */
 const createChangedRowDOM = (rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) => {
   const tr = document.createElement('tr');
-  if (isExtendedEnabled(diffType)) {
-    if (!isInserted) {
-      tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
-    }
-  } else {
-    tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
+  const colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+
+  // Inserted rows keep their natural styling; the row strikethrough is deletions only.
+  if (!isExtendedEnabled(diffType) || !isInserted) {
+    tr.setAttribute('style', isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? buildDeletedRowStyle(colors) : resolveDeletedRowStyleLegacy(colorScheme));
   }
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
 
@@ -132,10 +134,11 @@ const createChangedRowDOM = (rowNode, cellEdgeAttrs, nodeViewSerializer, colorSc
           if (isExtendedEnabled(diffType)) {
             const overlay = document.createElement('span');
             const isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
-            const isTraditional = colorScheme === 'traditional';
-            const deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
-            const addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
-            const overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
+            const overlayStyle = isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? isInserted ? isRoundedTable ? buildAddedCellOverlayRoundedStyle(colors) : buildAddedCellOverlayStyle(colors) : isRoundedTable ? buildDeletedCellOverlayRoundedStyle(colors) : buildDeletedCellOverlayStyle(colors) : resolveCellOverlayStyleLegacy({
+              colorScheme,
+              isInserted,
+              isRoundedTable
+            });
             overlay.setAttribute('style', overlayStyle);
             nodeView.appendChild(overlay);
           }

package/dist/es2019/pm-plugins/decorations/createChangedRowDecorationWidgets.styles.legacy.js

@@ -0,0 +1,33 @@
+/**
+ * Pre-refactor code preserved for the OFF cohort of
+ * `platform_editor_show_diff_color_scheme_refactor`.
+ *
+ * These resolvers reproduce the per-scheme string-constant style decisions that
+ * `createChangedRowDOM` made before the `colorSchemeRegistry` + `factory.ts` migration, verbatim.
+ *
+ * Do not modify. Delete this file at experiment cleanup (EDITOR-8281).
+ */
+
+import { addedCellOverlayRoundedStyle, addedCellOverlayStyle, deletedCellOverlayRoundedStyle, deletedCellOverlayStyle, deletedRowStyle } from './colorSchemes/standard';
+import { deletedTraditionalCellOverlayRoundedStyle, deletedTraditionalCellOverlayStyle, deletedTraditionalRowStyle, traditionalAddedCellOverlayRoundedStyle, traditionalAddedCellOverlayStyle } from './colorSchemes/traditional';
+
+/**
+ * Pre-refactor deleted-row style for the `<tr>` element.
+ */
+export const resolveDeletedRowStyleLegacy = colorScheme => {
+  return colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle;
+};
+
+/**
+ * Pre-refactor cell overlay style.
+ */
+export const resolveCellOverlayStyleLegacy = ({
+  colorScheme,
+  isInserted,
+  isRoundedTable
+}) => {
+  const isTraditional = colorScheme === 'traditional';
+  const deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
+  const addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyle : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
+  return isInserted ? addedCellStyle : deletedCellStyle;
+};

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

@@ -1,23 +1,85 @@
 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 { isExtendedEnabled } from '../isExtendedEnabled';
-import { editingStyle, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActive, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, deletedContentStyle, deletedContentStyleActive, deletedInlineContentStyleExtended } from './colorSchemes/standard';
-import { traditionalInsertStyle, traditionalInsertStyleActive, getDeletedTraditionalInlineStyle } from './colorSchemes/traditional';
+import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
+import { colorSchemeRegistry } from './colorSchemes/schemes';
 import { createInlineIndicatorAnchorWidgets } from './createAnchorDecorationWidgets';
+import { getAtomicInlineNodeClassNameLegacy, resolveInlineChangedStyleLegacy } from './createInlineChangedDecoration.styles.legacy';
 import { buildDiffDecorationSpec } from './decorationKeys';
 const displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
-const getAtomicInlineNodeClassName = (inlineNodeName, colorScheme) => {
+const DEFAULT_COLOR_SCHEME = 'standard';
+const getColorScheme = colorScheme => colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+
+/**
+ * Class names for an atomic inline node decoration (date, emoji, mention, status). Scheme-agnostic
+ * — `buildAtomicInlineChangedCSSVariables()` supplies the colour inline on the same element.
+ */
+const getAtomicInlineNodeClassName = inlineNodeName => {
   const classNames = ['show-diff-atomic-inline-changed'];
   if (inlineNodeName) {
     classNames.push(`show-diff-atomic-inline-changed-${inlineNodeName}`);
   }
-  if (colorScheme === 'traditional') {
-    classNames.push('show-diff-atomic-inline-changed-traditional');
-  }
   return classNames.join(' ');
 };
+
+/** Inline style for inserted content under the extended diff experience. */
+const getExtendedInsertStyle = (colors, isActive, hideAddedDiffsUnderline) => {
+  if (colors.insertedInlineTreatment === 'underline') {
+    // hideAddedDiffsUnderline only targets the 'borderBottom' rule, so it does not apply here.
+    return isActive ? buildInsertStyleActive(colors) : buildInsertStyle(colors);
+  }
+  if (isActive) {
+    return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderlineActive(colors) : buildInsertStyleExtendedActive(colors);
+  }
+  return hideAddedDiffsUnderline ? buildInsertStyleExtendedNoUnderline(colors) : buildInsertStyleExtended(colors);
+};
+
+/** Inline style for deleted content under the extended diff experience. */
+const getExtendedDeletedStyle = (colors, isActive) => {
+  if (colors.deletedInlineTreatment === 'strikethrough') {
+    // Identical in both states — the block decoration carries the active emphasis.
+    return buildDeletedInlineStyle(colors, false);
+  }
+  return buildDeletedInlineStyleStandard(colors, isActive ? 'active' : 'default') + buildDeletedInlineContentStyleExtended(colors);
+};
+
+/** Registry-driven inline `style` for a changed-content decoration. */
+const resolveInlineChangedStyleRefactored = ({
+  colors,
+  diffType,
+  hideAddedDiffsUnderline,
+  isActive,
+  isInserted
+}) => {
+  if (isExtendedEnabled(diffType)) {
+    return isInserted ? getExtendedInsertStyle(colors, isActive, hideAddedDiffsUnderline) : getExtendedDeletedStyle(colors, isActive);
+  }
+  return isActive ? buildInsertStyleActive(colors) : buildInsertStyle(colors);
+};
+
+/**
+ * Single gate for the inline `style` string: registry + factory when the refactor is on, the
+ * verbatim pre-refactor per-scheme constants when it is off.
+ */
+const resolveInlineChangedStyle = args => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? resolveInlineChangedStyleRefactored(args) : resolveInlineChangedStyleLegacy(args);
+
+/**
+ * Single gate for the atomic-inline-node decoration attributes. The two cohorts differ in the DOM:
+ * on, the colour rides on an inline CSS variable and the class list is scheme-agnostic; off, the
+ * colour comes from a `-traditional` class and no variable is emitted. Returned together so the
+ * class list and style suffix can never be mixed across cohorts.
+ */
+const resolveAtomicInlineAttrs = (inlineNodeName, colorScheme, colors) => isExperimentEnabled('platform_editor_show_diff_color_scheme_refactor') ? {
+  className: getAtomicInlineNodeClassName(inlineNodeName),
+  styleSuffix: buildAtomicInlineChangedCSSVariables(colors)
+} : {
+  className: getAtomicInlineNodeClassNameLegacy(inlineNodeName, colorScheme),
+  styleSuffix: ''
+};
+
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -50,38 +112,21 @@ export const createInlineChangedDecoration = ({
       isActive
     }))];
   }
-  let style;
-  if (isExtendedEnabled(diffType)) {
-    if (isInserted) {
-      if (colorScheme === 'traditional') {
-        style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
-      } else {
-        style = isActive ? hideAddedDiffsUnderline ? editingStyleActiveExtendedNoUnderline : editingStyleActiveExtended : hideAddedDiffsUnderline ? editingStyleExtendedNoUnderline : editingStyleExtended;
-      }
-    } else {
-      if (colorScheme === 'traditional') {
-        style = getDeletedTraditionalInlineStyle(false);
-      } else {
-        style = isActive ? deletedContentStyleActive : deletedContentStyle;
-        /**
-         * Merge into existing styles when cleaning up
-         */
-        if (isExtendedEnabled(diffType)) {
-          style += deletedInlineContentStyleExtended;
-        }
-      }
-    }
-  } else {
-    if (colorScheme === 'traditional') {
-      style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
-    } else {
-      style = isActive ? editingStyleActive : editingStyle;
-    }
-  }
+  const colors = getColorScheme(colorScheme);
+  const style = resolveInlineChangedStyle({
+    colors,
+    colorScheme,
+    diffType,
+    hideAddedDiffsUnderline,
+    isActive,
+    isInserted
+  });
+  const isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
+  const atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
   const decorations = [Decoration.inline(change.fromB, change.toB, {
-    style,
-    ...(isAtomicInlineNode && isInserted && {
-      class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+    style: atomicInlineAttrs ? `${style}${atomicInlineAttrs.styleSuffix}` : style,
+    ...(atomicInlineAttrs && {
+      class: atomicInlineAttrs.className
     }),
     'data-testid': 'show-diff-changed-decoration'
   }, buildDiffDecorationSpec({

package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.styles.legacy.js

@@ -0,0 +1,62 @@
+/**
+ * Pre-refactor `createInlineChangedDecoration` styling code, preserved verbatim for the OFF cohort
+ * of `platform_editor_show_diff_color_scheme_refactor`.
+ *
+ * Do not modify — this module exists purely so the OFF cohort keeps running the exact code that
+ * shipped before the `colorSchemeRegistry` + `factory.ts` migration. Delete the whole file at
+ * experiment cleanup (EDITOR-8281).
+ */
+
+import { isExtendedEnabled } from '../isExtendedEnabled';
+import { deletedContentStyle, deletedContentStyleActive, deletedInlineContentStyleExtended, editingStyle, editingStyleActive, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline } from './colorSchemes/standard';
+import { getDeletedTraditionalInlineStyle, traditionalInsertStyle, traditionalInsertStyleActive } from './colorSchemes/traditional';
+/**
+ * Pre-refactor inline `style` computation for `createInlineChangedDecoration`.
+ */
+export const resolveInlineChangedStyleLegacy = ({
+  colorScheme,
+  diffType,
+  hideAddedDiffsUnderline,
+  isActive,
+  isInserted
+}) => {
+  let style;
+  if (isExtendedEnabled(diffType)) {
+    if (isInserted) {
+      if (colorScheme === 'traditional') {
+        style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+      } else {
+        style = isActive ? hideAddedDiffsUnderline ? editingStyleActiveExtendedNoUnderline : editingStyleActiveExtended : hideAddedDiffsUnderline ? editingStyleExtendedNoUnderline : editingStyleExtended;
+      }
+    } else {
+      if (colorScheme === 'traditional') {
+        style = getDeletedTraditionalInlineStyle(false);
+      } else {
+        style = (isActive ? deletedContentStyleActive : deletedContentStyle) + deletedInlineContentStyleExtended;
+      }
+    }
+  } else {
+    if (colorScheme === 'traditional') {
+      style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+    } else {
+      style = isActive ? editingStyleActive : editingStyle;
+    }
+  }
+  return style;
+};
+
+/**
+ * Pre-refactor class names for an atomic inline node decoration (date, emoji, mention, status).
+ * The colour was carried by the per-scheme `-traditional` class rather than by an inline CSS
+ * variable on the same element.
+ */
+export const getAtomicInlineNodeClassNameLegacy = (inlineNodeName, colorScheme) => {
+  const classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push(`show-diff-atomic-inline-changed-${inlineNodeName}`);
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};

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

@@ -3,108 +3,8 @@ import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { isExtendedEnabled } from '../../isExtendedEnabled';
-import { deletedBlockOutline, deletedBlockOutlineActive, deletedBlockOutlineRounded, deletedBlockOutlineRoundedActive, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleUnbounded, deletedInlineContentStyleExtended, deletedStyleQuoteNodeWithLozenge, deletedStyleQuoteNodeWithLozengeActive, editingContentStyleInBlockExtended, editingContentStyleInBlockExtendedNoUnderline, editingStyleExtended, editingStyleExtendedNoUnderline, editingStyleActiveExtended, editingStyleActiveExtendedNoUnderline, editingStyleNode, addedCellOverlayStyle, addedCellOverlayRoundedStyle, deletedCellOverlayStyle, deletedCellOverlayRoundedStyle } from '../colorSchemes/standard';
-import { deletedTraditionalBlockOutlineActive, deletedTraditionalBlockOutlineNew, deletedTraditionalBlockOutlineRoundedActive, deletedTraditionalBlockOutlineRoundedNew, deletedTraditionalContentStyleUnbounded, deletedTraditionalContentStyleUnboundedActive, getDeletedTraditionalInlineStyle, deletedTraditionalStyleQuoteNode, deletedTraditionalStyleQuoteNodeActive, traditionalInsertStyle, traditionalInsertStyleActive, traditionalStyleNodeActive, traditionalStyleNodeNew, traditionalAddedCellOverlayRoundedStyle, traditionalAddedCellOverlayStyleNew, deletedTraditionalCellOverlayStyle, deletedTraditionalCellOverlayRoundedStyle } from '../colorSchemes/traditional';
 import { applyTableCellEdgeAttrs } from './tableCellEdgeAttrs';
-const lozengeStyle = convertToInlineCss({
-  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)",
-  backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
-  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)"
-});
-const lozengeStyleActiveStandard = convertToInlineCss({
-  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)",
-  backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
-  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)"
-});
-const lozengeStyleActiveTraditional = convertToInlineCss({
-  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)",
-  backgroundColor: "var(--ds-background-accent-red-subtler-pressed, #FD9891)",
-  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)"
-});
-const getChangedContentStyle = (colorScheme, isActive = false, isInserted = false, diffType, hideAddedDiffsUnderline = false) => {
-  if (isExtendedEnabled(diffType) && isInserted) {
-    if (colorScheme === 'traditional') {
-      return isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
-    }
-    return isActive ? hideAddedDiffsUnderline ? editingStyleActiveExtendedNoUnderline : editingStyleActiveExtended : hideAddedDiffsUnderline ? editingStyleExtendedNoUnderline : editingStyleExtended;
-  }
-  if (colorScheme === 'traditional') {
-    return getDeletedTraditionalInlineStyle(isActive);
-  }
-  if (isActive) {
-    return deletedContentStyleActive;
-  }
-  return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
-};
-const getChangedNodeStyle = (nodeName, colorScheme, isInserted = false, isActive = false, diffType, hideAddedDiffsUnderline = false) => {
-  const isTraditional = colorScheme === 'traditional';
-  if (isExtendedEnabled(diffType) && isInserted) {
-    if (isMultiContainerBlockNode(nodeName)) {
-      return hideAddedDiffsUnderline ? editingContentStyleInBlockExtendedNoUnderline : editingContentStyleInBlockExtended;
-    }
-    if (isTextLikeBlockNode(nodeName)) {
-      return undefined;
-    }
-    if (isTraditional) {
-      return isActive ? traditionalStyleNodeActive : traditionalStyleNodeNew;
-    }
-    return editingStyleNode;
-  }
-  switch (nodeName) {
-    case 'blockquote':
-      if (isTraditional) {
-        return isActive ? deletedTraditionalStyleQuoteNodeActive : deletedTraditionalStyleQuoteNode;
-      }
-      return isActive ? deletedStyleQuoteNodeWithLozengeActive : deletedStyleQuoteNodeWithLozenge;
-    case 'expand':
-    case 'decisionList':
-      if (isTraditional) {
-        return isActive ? deletedTraditionalBlockOutlineActive : deletedTraditionalBlockOutlineNew;
-      }
-      return isActive ? deletedBlockOutlineActive : deletedBlockOutline;
-    case 'panel':
-    case 'codeBlock':
-      if (isTraditional) {
-        return isActive ? deletedTraditionalBlockOutlineRoundedActive : deletedTraditionalBlockOutlineRoundedNew;
-      }
-      return isActive ? deletedBlockOutlineRoundedActive : deletedBlockOutlineRounded;
-    default:
-      return undefined;
-  }
-};
+import { getChangedContentStyle, getChangedNodeStyle, getDeletedContentStyle, getDeletedContentStyleUnbounded, getInsertedContentStyle, hasRestingDeletedRing, isMultiContainerBlockNode, isTextLikeBlockNode, resolveCellOverlayStyle, resolveNestedInsertedNodeStyle, resolveRemovedLozengeStyle } from './wrapBlockNodeViewStyles';
 const shouldShowRemovedLozenge = nodeName => {
   switch (nodeName) {
     case 'expand':
@@ -141,7 +41,8 @@ const maybeAddDeletedOutlineNewClass = ({
   if (name !== 'mediaSingle' && name !== 'embedCard') {
     return;
   }
-  if (colorScheme === 'traditional' && !isActive) {
+  // Only schemes with a resting ring get the class.
+  if (hasRestingDeletedRing(colorScheme) && !isActive) {
     nodeView.classList.add('show-diff-deleted-outline-new');
   }
 };
@@ -153,24 +54,19 @@ const maybeAddDeletedOutlineNewClass = ({
 const shouldApplyStylesDirectly = nodeName => {
   return nodeName === 'heading';
 };
-const isMultiContainerBlockNode = nodeName => {
-  return ['decisionList', 'layoutSection'].includes(nodeName);
-};
-const isTextLikeBlockNode = nodeName => {
-  return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
-};
 const applyCellOverlayStyles = ({
   element,
   colorScheme,
   isInserted
 }) => {
   const isRoundedTable = expValEquals('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
+  const overlayStyle = resolveCellOverlayStyle({
+    colorScheme,
+    isInserted,
+    isRoundedTable
+  });
   element.querySelectorAll('td, th').forEach(cell => {
     const overlay = document.createElement('span');
-    const isTraditional = colorScheme === 'traditional';
-    const deletedCellStyle = isTraditional ? isRoundedTable ? deletedTraditionalCellOverlayRoundedStyle : deletedTraditionalCellOverlayStyle : isRoundedTable ? deletedCellOverlayRoundedStyle : deletedCellOverlayStyle;
-    const addedCellStyle = isTraditional ? isRoundedTable ? traditionalAddedCellOverlayRoundedStyle : traditionalAddedCellOverlayStyleNew : isRoundedTable ? addedCellOverlayRoundedStyle : addedCellOverlayStyle;
-    const overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     overlay.setAttribute('style', overlayStyle);
     cell.appendChild(overlay);
   });
@@ -194,7 +90,7 @@ const createRemovedLozenge = (intl, isActive = false, colorScheme) => {
 
   // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
   const lozengeElement = document.createElement('span');
-  const lozengeInnerStyle = isActive && colorScheme === 'traditional' ? lozengeStyleActiveTraditional : isActive ? lozengeStyleActiveStandard : lozengeStyle;
+  const lozengeInnerStyle = resolveRemovedLozengeStyle(colorScheme, isActive);
   lozengeElement.setAttribute('style', lozengeInnerStyle);
   lozengeElement.textContent = intl.formatMessage(trackChangesMessages.removed).toUpperCase();
   container.appendChild(lozengeElement);
@@ -246,19 +142,22 @@ const applyMultiContainerLikeStyles = ({
   const targetNodeName = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? getBaseNodeTypeName(targetNode.type) : targetNode.type.name;
   const nodeSpecificStyle = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (targetNode.type.name === 'decisionList') {
+    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle();
     element.querySelectorAll('li').forEach(listItem => {
       const currentListItemStyle = listItem.getAttribute('style') || '';
-      listItem.setAttribute('style', `${currentListItemStyle}${editingStyleNode}`);
+      listItem.setAttribute('style', `${currentListItemStyle}${nestedInsertedNodeStyle}`);
     });
   } else if (targetNode.type.name === 'layoutSection') {
+    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle();
     element.querySelectorAll('[data-layout-column="true"]').forEach(section => {
       const currentSectionStyle = section.getAttribute('style') || '';
-      section.setAttribute('style', `${currentSectionStyle}${editingStyleNode}`);
+      section.setAttribute('style', `${currentSectionStyle}${nestedInsertedNodeStyle}`);
     });
   } else if (targetNode.type.name === 'taskList') {
+    const nestedInsertedNodeStyle = resolveNestedInsertedNodeStyle();
     element.querySelectorAll('li').forEach(listItem => {
       const currentListItemStyle = listItem.getAttribute('style') || '';
-      listItem.setAttribute('style', `${currentListItemStyle}${editingStyleNode}`);
+      listItem.setAttribute('style', `${currentListItemStyle}${nestedInsertedNodeStyle}`);
     });
   }
   element.setAttribute('style', `${currentStyle};${nodeSpecificStyle}`);
@@ -581,30 +480,6 @@ export const wrapBlockNodeView = ({
     }
   }
 };
-const getDeletedContentStyleUnbounded = (colorScheme, isActive = false) => {
-  if (colorScheme === 'traditional' && isActive) {
-    return deletedTraditionalContentStyleUnboundedActive;
-  }
-  return colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
-};
-const getInsertedContentStyle = (colorScheme, isActive = false, hideAddedDiffsUnderline = false) => {
-  if (colorScheme === 'traditional') {
-    return isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
-  }
-  if (isActive) {
-    return hideAddedDiffsUnderline ? editingStyleActiveExtendedNoUnderline : editingStyleActiveExtended;
-  }
-  return hideAddedDiffsUnderline ? editingStyleExtendedNoUnderline : editingStyleExtended;
-};
-const getDeletedContentStyle = (colorScheme, isActive = false, diffType) => {
-  if (colorScheme === 'traditional') {
-    return getDeletedTraditionalInlineStyle(isActive);
-  }
-  if (isExtendedEnabled(diffType)) {
-    return (isActive ? deletedContentStyleActive : deletedContentStyleNew) + deletedInlineContentStyleExtended;
-  }
-  return isActive ? deletedContentStyleActive : deletedContentStyleNew;
-};
 
 /**
  * Injects a styled inner wrapper span around the children of a block node element.