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

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

@@ -9,26 +9,93 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _isExtendedEnabled = require("../isExtendedEnabled");
-var _standard = require("./colorSchemes/standard");
-var _traditional = require("./colorSchemes/traditional");
+var _factory = require("./colorSchemes/factory");
+var _schemes = require("./colorSchemes/schemes");
 var _createAnchorDecorationWidgets = require("./createAnchorDecorationWidgets");
+var _createInlineChangedDecorationStyles = require("./createInlineChangedDecoration.styles.legacy");
 var _decorationKeys = require("./decorationKeys");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var displayNoneStyle = (0, _lazyNodeView.convertToInlineCss)({
   display: 'none'
 });
-var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName, colorScheme) {
+var DEFAULT_COLOR_SCHEME = 'standard';
+var getColorScheme = function getColorScheme(colorScheme) {
+  return _schemes.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.
+ */
+var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineNodeName) {
   var classNames = ['show-diff-atomic-inline-changed'];
   if (inlineNodeName) {
     classNames.push("show-diff-atomic-inline-changed-".concat(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. */
+var getExtendedInsertStyle = function getExtendedInsertStyle(colors, isActive, hideAddedDiffsUnderline) {
+  if (colors.insertedInlineTreatment === 'underline') {
+    // hideAddedDiffsUnderline only targets the 'borderBottom' rule, so it does not apply here.
+    return isActive ? (0, _factory.buildInsertStyleActive)(colors) : (0, _factory.buildInsertStyle)(colors);
+  }
+  if (isActive) {
+    return hideAddedDiffsUnderline ? (0, _factory.buildInsertStyleExtendedNoUnderlineActive)(colors) : (0, _factory.buildInsertStyleExtendedActive)(colors);
+  }
+  return hideAddedDiffsUnderline ? (0, _factory.buildInsertStyleExtendedNoUnderline)(colors) : (0, _factory.buildInsertStyleExtended)(colors);
+};
+
+/** Inline style for deleted content under the extended diff experience. */
+var getExtendedDeletedStyle = function getExtendedDeletedStyle(colors, isActive) {
+  if (colors.deletedInlineTreatment === 'strikethrough') {
+    // Identical in both states — the block decoration carries the active emphasis.
+    return (0, _factory.buildDeletedInlineStyle)(colors, false);
+  }
+  return (0, _factory.buildDeletedInlineStyleStandard)(colors, isActive ? 'active' : 'default') + (0, _factory.buildDeletedInlineContentStyleExtended)(colors);
+};
+
+/** Registry-driven inline `style` for a changed-content decoration. */
+var resolveInlineChangedStyleRefactored = function resolveInlineChangedStyleRefactored(_ref) {
+  var colors = _ref.colors,
+    diffType = _ref.diffType,
+    hideAddedDiffsUnderline = _ref.hideAddedDiffsUnderline,
+    isActive = _ref.isActive,
+    isInserted = _ref.isInserted;
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
+    return isInserted ? getExtendedInsertStyle(colors, isActive, hideAddedDiffsUnderline) : getExtendedDeletedStyle(colors, isActive);
+  }
+  return isActive ? (0, _factory.buildInsertStyleActive)(colors) : (0, _factory.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.
+ */
+var resolveInlineChangedStyle = function resolveInlineChangedStyle(args) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? resolveInlineChangedStyleRefactored(args) : (0, _createInlineChangedDecorationStyles.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.
+ */
+var resolveAtomicInlineAttrs = function resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? {
+    className: getAtomicInlineNodeClassName(inlineNodeName),
+    styleSuffix: (0, _factory.buildAtomicInlineChangedCSSVariables)(colors)
+  } : {
+    className: (0, _createInlineChangedDecorationStyles.getAtomicInlineNodeClassNameLegacy)(inlineNodeName, colorScheme),
+    styleSuffix: ''
+  };
+};
+
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -36,28 +103,28 @@ var getAtomicInlineNodeClassName = function getAtomicInlineNodeClassName(inlineN
  * @returns Prosemirror inline decoration
  */
 
-var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(_ref) {
-  var change = _ref.change,
-    colorScheme = _ref.colorScheme,
-    _ref$isActive = _ref.isActive,
-    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
-    _ref$isInserted = _ref.isInserted,
-    isInserted = _ref$isInserted === void 0 ? true : _ref$isInserted,
-    _ref$isAtomicInlineNo = _ref.isAtomicInlineNode,
-    isAtomicInlineNode = _ref$isAtomicInlineNo === void 0 ? false : _ref$isAtomicInlineNo,
-    _ref$shouldHideDelete = _ref.shouldHideDeleted,
-    shouldHideDeleted = _ref$shouldHideDelete === void 0 ? false : _ref$shouldHideDelete,
-    _ref$showIndicators = _ref.showIndicators,
-    showIndicators = _ref$showIndicators === void 0 ? false : _ref$showIndicators,
-    doc = _ref.doc,
-    diffType = _ref.diffType,
-    _ref$hideAddedDiffsUn = _ref.hideAddedDiffsUnderline,
-    hideAddedDiffsUnderline = _ref$hideAddedDiffsUn === void 0 ? false : _ref$hideAddedDiffsUn,
-    inlineNodeName = _ref.inlineNodeName,
-    _ref$hasDeletedWidget = _ref.hasDeletedWidget,
-    hasDeletedWidget = _ref$hasDeletedWidget === void 0 ? false : _ref$hasDeletedWidget,
-    _ref$isDeletedWidgetB = _ref.isDeletedWidgetBelow,
-    isDeletedWidgetBelow = _ref$isDeletedWidgetB === void 0 ? false : _ref$isDeletedWidgetB;
+var createInlineChangedDecoration = exports.createInlineChangedDecoration = function createInlineChangedDecoration(_ref2) {
+  var change = _ref2.change,
+    colorScheme = _ref2.colorScheme,
+    _ref2$isActive = _ref2.isActive,
+    isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
+    _ref2$isInserted = _ref2.isInserted,
+    isInserted = _ref2$isInserted === void 0 ? true : _ref2$isInserted,
+    _ref2$isAtomicInlineN = _ref2.isAtomicInlineNode,
+    isAtomicInlineNode = _ref2$isAtomicInlineN === void 0 ? false : _ref2$isAtomicInlineN,
+    _ref2$shouldHideDelet = _ref2.shouldHideDeleted,
+    shouldHideDeleted = _ref2$shouldHideDelet === void 0 ? false : _ref2$shouldHideDelet,
+    _ref2$showIndicators = _ref2.showIndicators,
+    showIndicators = _ref2$showIndicators === void 0 ? false : _ref2$showIndicators,
+    doc = _ref2.doc,
+    diffType = _ref2.diffType,
+    _ref2$hideAddedDiffsU = _ref2.hideAddedDiffsUnderline,
+    hideAddedDiffsUnderline = _ref2$hideAddedDiffsU === void 0 ? false : _ref2$hideAddedDiffsU,
+    inlineNodeName = _ref2.inlineNodeName,
+    _ref2$hasDeletedWidge = _ref2.hasDeletedWidget,
+    hasDeletedWidget = _ref2$hasDeletedWidge === void 0 ? false : _ref2$hasDeletedWidge,
+    _ref2$isDeletedWidget = _ref2.isDeletedWidgetBelow,
+    isDeletedWidgetBelow = _ref2$isDeletedWidget === void 0 ? false : _ref2$isDeletedWidget;
   var diffId = crypto.randomUUID();
   if (shouldHideDeleted) {
     return [_view.Decoration.inline(change.fromB, change.toB, {
@@ -68,38 +135,21 @@ var createInlineChangedDecoration = exports.createInlineChangedDecoration = func
       isActive: isActive
     }))];
   }
-  var style;
-  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
-    if (isInserted) {
-      if (colorScheme === 'traditional') {
-        style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
-      } else {
-        style = isActive ? hideAddedDiffsUnderline ? _standard.editingStyleActiveExtendedNoUnderline : _standard.editingStyleActiveExtended : hideAddedDiffsUnderline ? _standard.editingStyleExtendedNoUnderline : _standard.editingStyleExtended;
-      }
-    } else {
-      if (colorScheme === 'traditional') {
-        style = (0, _traditional.getDeletedTraditionalInlineStyle)(false);
-      } else {
-        style = isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyle;
-        /**
-         * Merge into existing styles when cleaning up
-         */
-        if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
-          style += _standard.deletedInlineContentStyleExtended;
-        }
-      }
-    }
-  } else {
-    if (colorScheme === 'traditional') {
-      style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
-    } else {
-      style = isActive ? _standard.editingStyleActive : _standard.editingStyle;
-    }
-  }
+  var colors = getColorScheme(colorScheme);
+  var style = resolveInlineChangedStyle({
+    colors: colors,
+    colorScheme: colorScheme,
+    diffType: diffType,
+    hideAddedDiffsUnderline: hideAddedDiffsUnderline,
+    isActive: isActive,
+    isInserted: isInserted
+  });
+  var isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
+  var atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
   var decorations = [_view.Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread({
-    style: style
-  }, isAtomicInlineNode && isInserted && {
-    class: getAtomicInlineNodeClassName(inlineNodeName, colorScheme)
+    style: atomicInlineAttrs ? "".concat(style).concat(atomicInlineAttrs.styleSuffix) : style
+  }, atomicInlineAttrs && {
+    class: atomicInlineAttrs.className
   }), {}, {
     'data-testid': 'show-diff-changed-decoration'
   }), (0, _decorationKeys.buildDiffDecorationSpec)({

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveInlineChangedStyleLegacy = exports.getAtomicInlineNodeClassNameLegacy = void 0;
+var _isExtendedEnabled = require("../isExtendedEnabled");
+var _standard = require("./colorSchemes/standard");
+var _traditional = require("./colorSchemes/traditional");
+/**
+ * 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).
+ */
+
+/**
+ * Pre-refactor inline `style` computation for `createInlineChangedDecoration`.
+ */
+var resolveInlineChangedStyleLegacy = exports.resolveInlineChangedStyleLegacy = function resolveInlineChangedStyleLegacy(_ref) {
+  var colorScheme = _ref.colorScheme,
+    diffType = _ref.diffType,
+    hideAddedDiffsUnderline = _ref.hideAddedDiffsUnderline,
+    isActive = _ref.isActive,
+    isInserted = _ref.isInserted;
+  var style;
+  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
+    if (isInserted) {
+      if (colorScheme === 'traditional') {
+        style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
+      } else {
+        style = isActive ? hideAddedDiffsUnderline ? _standard.editingStyleActiveExtendedNoUnderline : _standard.editingStyleActiveExtended : hideAddedDiffsUnderline ? _standard.editingStyleExtendedNoUnderline : _standard.editingStyleExtended;
+      }
+    } else {
+      if (colorScheme === 'traditional') {
+        style = (0, _traditional.getDeletedTraditionalInlineStyle)(false);
+      } else {
+        style = (isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyle) + _standard.deletedInlineContentStyleExtended;
+      }
+    }
+  } else {
+    if (colorScheme === 'traditional') {
+      style = isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
+    } else {
+      style = isActive ? _standard.editingStyleActive : _standard.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.
+ */
+var getAtomicInlineNodeClassNameLegacy = exports.getAtomicInlineNodeClassNameLegacy = function getAtomicInlineNodeClassNameLegacy(inlineNodeName, colorScheme) {
+  var classNames = ['show-diff-atomic-inline-changed'];
+  if (inlineNodeName) {
+    classNames.push("show-diff-atomic-inline-changed-".concat(inlineNodeName));
+  }
+  if (colorScheme === 'traditional') {
+    classNames.push('show-diff-atomic-inline-changed-traditional');
+  }
+  return classNames.join(' ');
+};

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

@@ -11,116 +11,8 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _isExtendedEnabled = require("../../isExtendedEnabled");
-var _standard = require("../colorSchemes/standard");
-var _traditional = require("../colorSchemes/traditional");
 var _tableCellEdgeAttrs = require("./tableCellEdgeAttrs");
-var lozengeStyle = (0, _lazyNodeView.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)"
-});
-var lozengeStyleActiveStandard = (0, _lazyNodeView.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)"
-});
-var lozengeStyleActiveTraditional = (0, _lazyNodeView.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)"
-});
-var getChangedContentStyle = function getChangedContentStyle(colorScheme) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var diffType = arguments.length > 3 ? arguments[3] : undefined;
-  var hideAddedDiffsUnderline = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
-    if (colorScheme === 'traditional') {
-      return isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
-    }
-    return isActive ? hideAddedDiffsUnderline ? _standard.editingStyleActiveExtendedNoUnderline : _standard.editingStyleActiveExtended : hideAddedDiffsUnderline ? _standard.editingStyleExtendedNoUnderline : _standard.editingStyleExtended;
-  }
-  if (colorScheme === 'traditional') {
-    return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
-  }
-  if (isActive) {
-    return _standard.deletedContentStyleActive;
-  }
-  return (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? _standard.deletedContentStyleNew : _standard.deletedContentStyle;
-};
-var getChangedNodeStyle = function getChangedNodeStyle(nodeName, colorScheme) {
-  var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var isActive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var diffType = arguments.length > 4 ? arguments[4] : undefined;
-  var hideAddedDiffsUnderline = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var isTraditional = colorScheme === 'traditional';
-  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted) {
-    if (isMultiContainerBlockNode(nodeName)) {
-      return hideAddedDiffsUnderline ? _standard.editingContentStyleInBlockExtendedNoUnderline : _standard.editingContentStyleInBlockExtended;
-    }
-    if (isTextLikeBlockNode(nodeName)) {
-      return undefined;
-    }
-    if (isTraditional) {
-      return isActive ? _traditional.traditionalStyleNodeActive : _traditional.traditionalStyleNodeNew;
-    }
-    return _standard.editingStyleNode;
-  }
-  switch (nodeName) {
-    case 'blockquote':
-      if (isTraditional) {
-        return isActive ? _traditional.deletedTraditionalStyleQuoteNodeActive : _traditional.deletedTraditionalStyleQuoteNode;
-      }
-      return isActive ? _standard.deletedStyleQuoteNodeWithLozengeActive : _standard.deletedStyleQuoteNodeWithLozenge;
-    case 'expand':
-    case 'decisionList':
-      if (isTraditional) {
-        return isActive ? _traditional.deletedTraditionalBlockOutlineActive : _traditional.deletedTraditionalBlockOutlineNew;
-      }
-      return isActive ? _standard.deletedBlockOutlineActive : _standard.deletedBlockOutline;
-    case 'panel':
-    case 'codeBlock':
-      if (isTraditional) {
-        return isActive ? _traditional.deletedTraditionalBlockOutlineRoundedActive : _traditional.deletedTraditionalBlockOutlineRoundedNew;
-      }
-      return isActive ? _standard.deletedBlockOutlineRoundedActive : _standard.deletedBlockOutlineRounded;
-    default:
-      return undefined;
-  }
-};
+var _wrapBlockNodeViewStyles = require("./wrapBlockNodeViewStyles");
 var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
   switch (nodeName) {
     case 'expand':
@@ -157,7 +49,8 @@ var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_re
   if (name !== 'mediaSingle' && name !== 'embedCard') {
     return;
   }
-  if (colorScheme === 'traditional' && !isActive) {
+  // Only schemes with a resting ring get the class.
+  if ((0, _wrapBlockNodeViewStyles.hasRestingDeletedRing)(colorScheme) && !isActive) {
     nodeView.classList.add('show-diff-deleted-outline-new');
   }
 };
@@ -169,23 +62,18 @@ var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_re
 var shouldApplyStylesDirectly = function shouldApplyStylesDirectly(nodeName) {
   return nodeName === 'heading';
 };
-var isMultiContainerBlockNode = function isMultiContainerBlockNode(nodeName) {
-  return ['decisionList', 'layoutSection'].includes(nodeName);
-};
-var isTextLikeBlockNode = function isTextLikeBlockNode(nodeName) {
-  return ['heading', 'bulletList', 'orderedList', 'listItem', 'taskList', 'blockquote'].includes(nodeName);
-};
 var applyCellOverlayStyles = function applyCellOverlayStyles(_ref2) {
   var element = _ref2.element,
     colorScheme = _ref2.colorScheme,
     isInserted = _ref2.isInserted;
   var isRoundedTable = (0, _expValEquals.expValEquals)('platform_editor_table_diff_rounded_corners', 'isEnabled', true);
+  var overlayStyle = (0, _wrapBlockNodeViewStyles.resolveCellOverlayStyle)({
+    colorScheme: colorScheme,
+    isInserted: isInserted,
+    isRoundedTable: isRoundedTable
+  });
   element.querySelectorAll('td, th').forEach(function (cell) {
     var overlay = document.createElement('span');
-    var isTraditional = colorScheme === 'traditional';
-    var deletedCellStyle = isTraditional ? isRoundedTable ? _traditional.deletedTraditionalCellOverlayRoundedStyle : _traditional.deletedTraditionalCellOverlayStyle : isRoundedTable ? _standard.deletedCellOverlayRoundedStyle : _standard.deletedCellOverlayStyle;
-    var addedCellStyle = isTraditional ? isRoundedTable ? _traditional.traditionalAddedCellOverlayRoundedStyle : _traditional.traditionalAddedCellOverlayStyleNew : isRoundedTable ? _standard.addedCellOverlayRoundedStyle : _standard.addedCellOverlayStyle;
-    var overlayStyle = isInserted ? addedCellStyle : deletedCellStyle;
     overlay.setAttribute('style', overlayStyle);
     cell.appendChild(overlay);
   });
@@ -211,7 +99,7 @@ var createRemovedLozenge = function createRemovedLozenge(intl) {
 
   // Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
   var lozengeElement = document.createElement('span');
-  var lozengeInnerStyle = isActive && colorScheme === 'traditional' ? lozengeStyleActiveTraditional : isActive ? lozengeStyleActiveStandard : lozengeStyle;
+  var lozengeInnerStyle = (0, _wrapBlockNodeViewStyles.resolveRemovedLozengeStyle)(colorScheme, isActive);
   lozengeElement.setAttribute('style', lozengeInnerStyle);
   lozengeElement.textContent = intl.formatMessage(_messages.trackChangesMessages.removed).toUpperCase();
   container.appendChild(lozengeElement);
@@ -245,9 +133,9 @@ var applyStylesToElement = function applyStylesToElement(_ref3) {
     _ref3$hideAddedDiffsU = _ref3.hideAddedDiffsUnderline,
     hideAddedDiffsUnderline = _ref3$hideAddedDiffsU === void 0 ? false : _ref3$hideAddedDiffsU;
   var currentStyle = element.getAttribute('style') || '';
-  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
+  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 = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
+  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) {
@@ -261,21 +149,24 @@ var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref4
     hideAddedDiffsUnderline = _ref4$hideAddedDiffsU === void 0 ? false : _ref4$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 = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
+  var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (targetNode.type.name === 'decisionList') {
+    var nestedInsertedNodeStyle = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)();
     element.querySelectorAll('li').forEach(function (listItem) {
       var currentListItemStyle = listItem.getAttribute('style') || '';
-      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(_standard.editingStyleNode));
+      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(nestedInsertedNodeStyle));
     });
   } else if (targetNode.type.name === 'layoutSection') {
+    var _nestedInsertedNodeStyle = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)();
     element.querySelectorAll('[data-layout-column="true"]').forEach(function (section) {
       var currentSectionStyle = section.getAttribute('style') || '';
-      section.setAttribute('style', "".concat(currentSectionStyle).concat(_standard.editingStyleNode));
+      section.setAttribute('style', "".concat(currentSectionStyle).concat(_nestedInsertedNodeStyle));
     });
   } else if (targetNode.type.name === 'taskList') {
+    var _nestedInsertedNodeStyle2 = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)();
     element.querySelectorAll('li').forEach(function (listItem) {
       var currentListItemStyle = listItem.getAttribute('style') || '';
-      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(_standard.editingStyleNode));
+      listItem.setAttribute('style', "".concat(currentListItemStyle).concat(_nestedInsertedNodeStyle2));
     });
   }
   element.setAttribute('style', "".concat(currentStyle, ";").concat(nodeSpecificStyle));
@@ -290,11 +181,11 @@ var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref5)
     _ref5$hideAddedDiffsU = _ref5.hideAddedDiffsUnderline,
     hideAddedDiffsUnderline = _ref5$hideAddedDiffsU === void 0 ? false : _ref5$hideAddedDiffsU;
   var currentStyle = element.getAttribute('style') || '';
-  var nodeSpecificStyle = getChangedNodeStyle(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
+  var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNode.type.name, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline) || '';
   if (nodeSpecificStyle) {
     element.setAttribute('style', "".concat(currentStyle).concat(nodeSpecificStyle));
   }
-  var contentStyle = getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
+  var contentStyle = (0, _wrapBlockNodeViewStyles.getChangedContentStyle)(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
   var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
   var textNodesToWrap = [];
   var currentNode = walker.nextNode();
@@ -326,13 +217,13 @@ var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref6
     hideAddedDiffsUnderline = _ref6$hideAddedDiffsU === void 0 ? false : _ref6$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 = getChangedNodeStyle(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline);
+  var nodeStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, diffType, hideAddedDiffsUnderline);
 
   // When the extended experiment is enabled and the content is inserted,
   // block widget nodes that already have dedicated node-level styling (e.g. boxShadow outline)
   // should not also get the inline content style (borderBottom underline) on their container.
   var shouldSkipContentStyle = (0, _isExtendedEnabled.isExtendedEnabled)(diffType) && isInserted && nodeStyle !== undefined;
-  var contentStyle = shouldSkipContentStyle ? '' : getChangedContentStyle(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
+  var contentStyle = shouldSkipContentStyle ? '' : (0, _wrapBlockNodeViewStyles.getChangedContentStyle)(colorScheme, isActive, isInserted, diffType, hideAddedDiffsUnderline);
   contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
   contentWrapper.append(nodeView);
   return contentWrapper;
@@ -522,7 +413,7 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
     hideAddedDiffsUnderline = _ref0$hideAddedDiffsU === void 0 ? false : _ref0$hideAddedDiffsU;
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (nodeView instanceof HTMLElement) {
-      if (isInserted && isMultiContainerBlockNode(targetNode.type.name)) {
+      if (isInserted && (0, _wrapBlockNodeViewStyles.isMultiContainerBlockNode)(targetNode.type.name)) {
         applyMultiContainerLikeStyles({
           element: nodeView,
           targetNode: targetNode,
@@ -535,7 +426,7 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
         dom.append(nodeView);
         return;
       }
-      if (isTextLikeBlockNode(targetNode.type.name)) {
+      if ((0, _wrapBlockNodeViewStyles.isTextLikeBlockNode)(targetNode.type.name)) {
         applyTextLikeBlockNodeStyles({
           element: nodeView,
           targetNode: targetNode,
@@ -602,35 +493,6 @@ var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_
     }
   }
 };
-var getDeletedContentStyleUnbounded = function getDeletedContentStyleUnbounded(colorScheme) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  if (colorScheme === 'traditional' && isActive) {
-    return _traditional.deletedTraditionalContentStyleUnboundedActive;
-  }
-  return colorScheme === 'traditional' ? _traditional.deletedTraditionalContentStyleUnbounded : _standard.deletedContentStyleUnbounded;
-};
-var getInsertedContentStyle = function getInsertedContentStyle(colorScheme) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var hideAddedDiffsUnderline = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  if (colorScheme === 'traditional') {
-    return isActive ? _traditional.traditionalInsertStyleActive : _traditional.traditionalInsertStyle;
-  }
-  if (isActive) {
-    return hideAddedDiffsUnderline ? _standard.editingStyleActiveExtendedNoUnderline : _standard.editingStyleActiveExtended;
-  }
-  return hideAddedDiffsUnderline ? _standard.editingStyleExtendedNoUnderline : _standard.editingStyleExtended;
-};
-var getDeletedContentStyle = function getDeletedContentStyle(colorScheme) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var diffType = arguments.length > 2 ? arguments[2] : undefined;
-  if (colorScheme === 'traditional') {
-    return (0, _traditional.getDeletedTraditionalInlineStyle)(isActive);
-  }
-  if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
-    return (isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyleNew) + _standard.deletedInlineContentStyleExtended;
-  }
-  return isActive ? _standard.deletedContentStyleActive : _standard.deletedContentStyleNew;
-};
 
 /**
  * Injects a styled inner wrapper span around the children of a block node element.
@@ -644,7 +506,7 @@ var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrappe
     isInserted = _ref1.isInserted,
     diffType = _ref1.diffType;
   var wrapper = document.createElement('span');
-  wrapper.setAttribute('style', isInserted ? getInsertedContentStyle(colorScheme, isActive) : getDeletedContentStyle(colorScheme, isActive, diffType));
+  wrapper.setAttribute('style', isInserted ? (0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive) : (0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType));
   (0, _toConsumableArray2.default)(node.childNodes).forEach(function (child) {
     var removedChild = node.removeChild(child);
     wrapper.append(removedChild);
@@ -667,17 +529,17 @@ var createContentWrapper = exports.createContentWrapper = function createContent
   });
   if ((0, _isExtendedEnabled.isExtendedEnabled)(diffType)) {
     if (isInserted) {
-      wrapper.setAttribute('style', "".concat(baseStyle).concat(getInsertedContentStyle(colorScheme, isActive)));
+      wrapper.setAttribute('style', "".concat(baseStyle).concat((0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive)));
     } else {
-      wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive, diffType)));
+      wrapper.setAttribute('style', "".concat(baseStyle).concat((0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType)));
       var strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
+      strikethrough.setAttribute('style', (0, _wrapBlockNodeViewStyles.getDeletedContentStyleUnbounded)(colorScheme, isActive));
       wrapper.append(strikethrough);
     }
   } else {
-    wrapper.setAttribute('style', "".concat(baseStyle).concat(getDeletedContentStyle(colorScheme, isActive, diffType)));
+    wrapper.setAttribute('style', "".concat(baseStyle).concat((0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, diffType)));
     var _strikethrough = document.createElement('span');
-    _strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colorScheme, isActive));
+    _strikethrough.setAttribute('style', (0, _wrapBlockNodeViewStyles.getDeletedContentStyleUnbounded)(colorScheme, isActive));
     wrapper.append(_strikethrough);
   }
   return wrapper;