@atlaskit/editor-plugin-text-color 12.3.30 → 12.3.32

package/dist/esm/ui/ColorAccessibilityMenuItem.js

@@ -6,12 +6,15 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { PanelType } from '@atlaskit/adf-schema/panel';
 import { IconButton } from '@atlaskit/button/new';
 import { cx } from '@atlaskit/css';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { colorAccessibilityMessages as messages } from '@atlaskit/editor-common/messages';
-import { getHighlightColorInNonActiveTheme, getTextColorInNonActiveTheme, getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
-import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getTextColorInNonActiveTheme, getTokenCSSVariableValue, getTokenCSSVariableValueForNonActiveTheme } from '@atlaskit/editor-common/ui-color';
+import { hexToEditorBackgroundPaletteColor, hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import AccessibilityIcon from '@atlaskit/icon/core/accessibility';
 import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
@@ -19,7 +22,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
 import { getTokenValue } from '@atlaskit/tokens/get-token-value';
 import { getContrastRatio as calcContrastRatio } from '../pm-plugins/utils/color-contrast';
-import { DEFAULT_COLOR, DEFAULT_BACKGROUND_COLOR, TRANSPARENT_HIGHLIGHT_COLOR, ACCESSIBLE_CONTRAST_RATIO, DIFFICULT_CONTRAST_RATIO } from '../pm-plugins/utils/constants';
+import { DEFAULT_COLOR, DEFAULT_BACKGROUND_COLOR, ACCESSIBLE_CONTRAST_RATIO, DIFFICULT_CONTRAST_RATIO } from '../pm-plugins/utils/constants';
 var resolveColorValue = function resolveColorValue(color, fallback) {
   return getTokenCSSVariableValue(color) || (color.startsWith('var(') ? fallback : color);
 };
@@ -30,30 +33,128 @@ var getForegroundColor = function getForegroundColor(textColor, defaultColor) {
   var colorValue = hexToEditorTextPaletteColor(textColor) || textColor;
   return resolveColorValue(colorValue, textColor);
 };
-var getBackgroundColor = function getBackgroundColor(highlightColor) {
-  if (!highlightColor || highlightColor === TRANSPARENT_HIGHLIGHT_COLOR) {
+var getBackgroundColor = function getBackgroundColor(backgroundColor) {
+  var palette = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+  if (!backgroundColor || backgroundColor === 'none') {
     return getTokenValue('elevation.surface', DEFAULT_BACKGROUND_COLOR);
   }
-  var colorValue = hexToEditorTextBackgroundPaletteColor(highlightColor) || highlightColor;
-  return resolveColorValue(colorValue, highlightColor);
+  var colorValue = palette === 'element' ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : hexToEditorTextBackgroundPaletteColor(backgroundColor) || backgroundColor;
+  return resolveColorValue(colorValue, backgroundColor);
+};
+var getBackgroundColorInNonActiveTheme = function getBackgroundColorInNonActiveTheme(backgroundColor) {
+  var palette = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+  if (!backgroundColor || backgroundColor === 'none') {
+    return getTokenCSSVariableValueForNonActiveTheme("var(--ds-surface, #FFFFFF)", DEFAULT_BACKGROUND_COLOR);
+  }
+  var colorValue = palette === 'element' ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : hexToEditorTextBackgroundPaletteColor(backgroundColor) || backgroundColor;
+  return getTokenCSSVariableValueForNonActiveTheme(colorValue, backgroundColor);
+};
+var STANDARD_PANEL_BACKGROUND_COLORS = new Map([[PanelType.INFO, getPanelTypeBackgroundNoTokens(PanelType.INFO)], [PanelType.NOTE, getPanelTypeBackgroundNoTokens(PanelType.NOTE)], [PanelType.SUCCESS, getPanelTypeBackgroundNoTokens(PanelType.SUCCESS)], [PanelType.WARNING, getPanelTypeBackgroundNoTokens(PanelType.WARNING)], [PanelType.ERROR, getPanelTypeBackgroundNoTokens(PanelType.ERROR)]]);
+var getResolvedBackgroundFromHighlight = function getResolvedBackgroundFromHighlight(highlightColor) {
+  if (!highlightColor) {
+    return {
+      color: null,
+      source: 'text'
+    };
+  }
+  return {
+    color: highlightColor,
+    source: 'text'
+  };
+};
+
+/**
+ * Resolves a background color from a container node that paints behind text.
+ * Callers walk ancestors so the nearest painted container wins.
+ */
+var getSupportedAncestorBackgroundColor = function getSupportedAncestorBackgroundColor(node) {
+  var backgroundColor;
+  if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+    backgroundColor = node.attrs.background;
+  } else if (node.type.name === 'panel' || node.type.name === 'panel_c1') {
+    if (node.attrs.panelType === PanelType.CUSTOM) {
+      backgroundColor = node.attrs.panelColor;
+    } else {
+      backgroundColor = STANDARD_PANEL_BACKGROUND_COLORS.get(node.attrs.panelType);
+    }
+  }
+  return backgroundColor ? {
+    color: backgroundColor,
+    source: 'element'
+  } : null;
+};
+
+/**
+ * Resolves the visible background behind a text node.
+ * Text highlight wins before falling back to the nearest element background.
+ */
+export var getResolvedBackgroundColorForTextNode = function getResolvedBackgroundColorForTextNode($pos, node) {
+  var _iterator = _createForOfIteratorHelper(node.marks),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var mark = _step.value;
+      if (mark.type.name === 'backgroundColor' && mark.attrs.color) {
+        return {
+          color: mark.attrs.color,
+          source: 'text'
+        };
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    var resolvedBackgroundColor = getSupportedAncestorBackgroundColor($pos.node(depth));
+    if (resolvedBackgroundColor) {
+      return resolvedBackgroundColor;
+    }
+  }
+  return {
+    color: null,
+    source: 'text'
+  };
+};
+var getResolvedBackgroundColorForPosition = function getResolvedBackgroundColorForPosition($pos, highlightColor) {
+  var highlightBackground = getResolvedBackgroundFromHighlight(highlightColor);
+  if (highlightColor) {
+    return highlightBackground;
+  }
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    var resolvedBackgroundColor = getSupportedAncestorBackgroundColor($pos.node(depth));
+    if (resolvedBackgroundColor) {
+      return resolvedBackgroundColor;
+    }
+  }
+  return highlightBackground;
+};
+var getResolvedBackgroundColorValue = function getResolvedBackgroundColorValue(backgroundColor) {
+  if (backgroundColor.source === 'element') {
+    return getBackgroundColor(backgroundColor.color, 'element');
+  }
+  return getBackgroundColor(backgroundColor.color);
+};
+var getResolvedBackgroundColorValueInNonActiveTheme = function getResolvedBackgroundColorValueInNonActiveTheme(backgroundColor) {
+  if (backgroundColor.source === 'element') {
+    return getBackgroundColorInNonActiveTheme(backgroundColor.color, 'element');
+  }
+  return getBackgroundColorInNonActiveTheme(backgroundColor.color);
 };
 var useColorAccessibilityState = function useColorAccessibilityState(api) {
   return useSharedPluginStateWithSelector(api, ['textColor', 'highlight'], function (states) {
-    var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$highlightStat3, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4;
+    var _states$textColorStat, _states$highlightStat, _states$textColorStat2;
     return {
       defaultColor: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.defaultColor,
       highlightColor: (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor,
-      highlightColorInNonActiveTheme: (_states$highlightStat2 = states.highlightState) === null || _states$highlightStat2 === void 0 ? void 0 : _states$highlightStat2.activeColorInNonActiveTheme,
-      isMultiHighlightColor: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.isMultiHighlightColor,
-      isMultiTextColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.isMultiTextColor,
-      textColor: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.color,
-      textColorInNonActiveTheme: (_states$textColorStat4 = states.textColorState) === null || _states$textColorStat4 === void 0 ? void 0 : _states$textColorStat4.colorInNonActiveTheme
+      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
     };
   });
 };
-var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, textColor) {
+var getContrastRatio = function getContrastRatio(defaultColor, backgroundColor, textColor) {
   try {
-    var contrastRatio = calcContrastRatio(getForegroundColor(textColor, defaultColor), getBackgroundColor(highlightColor));
+    var contrastRatio = calcContrastRatio(getForegroundColor(textColor, defaultColor), getResolvedBackgroundColorValue(backgroundColor));
     return contrastRatio;
   } catch (_unused) {
     // if we failed to calculate the contrast ratio, return null
@@ -61,16 +162,10 @@ var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, t
   }
 };
 
-// Computes the contrast ratio for a (textColor, highlightColor) pair as it would
-// appear in the non-active theme, using the shared resolvers so the walker
-// evaluates the same colors the single-pair plugin-state path does. Returns null
-// if it cannot be calculated.
-var getNonActiveThemeContrastRatio = function getNonActiveThemeContrastRatio(defaultColor, highlightColor, textColor) {
+// Computes the contrast ratio as it would appear in the non-active theme.
+var getNonActiveThemeContrastRatio = function getNonActiveThemeContrastRatio(defaultColor, backgroundColor, textColor) {
   try {
-    return calcContrastRatio(getTextColorInNonActiveTheme(textColor !== null && textColor !== void 0 ? textColor : null, defaultColor || DEFAULT_COLOR.color), getHighlightColorInNonActiveTheme(highlightColor !== null && highlightColor !== void 0 ? highlightColor : null, {
-      defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR,
-      transparentColor: TRANSPARENT_HIGHLIGHT_COLOR
-    }));
+    return calcContrastRatio(getTextColorInNonActiveTheme(textColor !== null && textColor !== void 0 ? textColor : null, defaultColor || DEFAULT_COLOR.color), getResolvedBackgroundColorValueInNonActiveTheme(backgroundColor));
   } catch (_unused2) {
     // if we failed to calculate the contrast ratio, return null
     return null;
@@ -87,96 +182,103 @@ var getAccessibilityStatus = function getAccessibilityStatus(contrastRatio) {
 };
 
 /**
- * Collects the worst accessibility status across all unique (textColor, highlightColor)
+ * Computes status from active foreground/background colors only.
+ * Used by the gate-off path so legacy behavior stays isolated.
+ */
+var getAccessibilityStatusFromColorPair = function getAccessibilityStatusFromColorPair(defaultColor, backgroundColor, textColor) {
+  var contrastRatio = getContrastRatio(defaultColor, backgroundColor, textColor);
+  return contrastRatio === null ? null : getAccessibilityStatus(contrastRatio);
+};
+
+/**
+ * Returns the lowest contrast ratio across active and non-active themes.
+ */
+var getMostCriticalContrastRatioAcrossThemes = function getMostCriticalContrastRatioAcrossThemes(defaultColor, backgroundColor, textColor) {
+  var contrastRatio = getContrastRatio(defaultColor, backgroundColor, textColor);
+  var nonActiveThemeContrastRatio = getNonActiveThemeContrastRatio(defaultColor, backgroundColor, textColor);
+  if (contrastRatio !== null && nonActiveThemeContrastRatio !== null) {
+    return Math.min(contrastRatio, nonActiveThemeContrastRatio);
+  }
+  return contrastRatio;
+};
+var getAccessibilityStatusFromColorPairAcrossThemes = function getAccessibilityStatusFromColorPairAcrossThemes(defaultColor, backgroundColor, textColor) {
+  var mostCriticalContrastRatio = getMostCriticalContrastRatioAcrossThemes(defaultColor, backgroundColor, textColor);
+  return mostCriticalContrastRatio === null ? null : getAccessibilityStatus(mostCriticalContrastRatio);
+};
+
+/**
+ * Collects the worst accessibility status across all unique foreground/background
  * combinations in the current selection.
  *
- * When the selection spans multiple text colors and/or highlight colors,
- * this walks the document between selection boundaries and checks every
- * text node's color marks, computing the contrast ratio for each unique pair
- * (across both the active and non-active theme) and returning the worst
- * status found.
+ * When the selection spans multiple text colors and/or resolved backgrounds,
+ * this checks each unique pair across both the active and non-active theme and
+ * returns the worst status found.
  */
-var getWorstAccessibilityStatusFromSelection = function getWorstAccessibilityStatusFromSelection(api, defaultColor) {
-  if (!(api !== null && api !== void 0 && api.core)) {
+var getWorstAccessibilityStatusFromEditorState = function getWorstAccessibilityStatusFromEditorState(state, defaultColor) {
+  var worstContrastRatio = null;
+
+  // Text/highlight colors only apply to a text range. If the selection is
+  // not a text selection (e.g. a node, cell or all selection) there is no
+  // meaningful range of colored text to evaluate.
+  if (!(state.selection instanceof TextSelection) || state.selection.empty) {
     return null;
   }
-
-  // Track the lowest (worst) contrast ratio across all pairs; a lower ratio
-  // means a worse accessibility status, so a single numeric comparison is
-  // enough to find the worst pair.
-  var worstContrastRatio = null;
-  api.core.actions.execute(function (_ref) {
-    var tr = _ref.tr;
-    // Text/highlight colors only apply to a text range. If the selection is
-    // not a text selection (e.g. a node, cell or all selection) there is no
-    // meaningful range of colored text to evaluate.
-    if (!(tr.selection instanceof TextSelection)) {
-      return null;
+  var _state$selection = state.selection,
+    from = _state$selection.from,
+    to = _state$selection.to;
+  var seen = new Set();
+  state.doc.nodesBetween(from, to, function (node, pos) {
+    var _backgroundColor$colo;
+    if (!node.isText) {
+      return !node.isLeaf;
     }
-    var _tr$selection = tr.selection,
-      from = _tr$selection.from,
-      to = _tr$selection.to;
-    var seen = new Set();
-    tr.doc.nodesBetween(from, to, function (node) {
-      // Text and highlight color marks only apply to text nodes, so skip
-      // any non-text leaves (e.g. emoji, mentions, inline cards). Continue
-      // descending into container nodes to reach their text children.
-      if (!node.isText) {
-        return !node.isLeaf;
-      }
-
-      // Extract both color marks in a single pass over the node's marks
-      // rather than two `Array.find` scans.
-      var textColor = null;
-      var highlightColor = null;
-      var _iterator = _createForOfIteratorHelper(node.marks),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var mark = _step.value;
-          if (mark.type.name === 'textColor') {
-            var _mark$attrs$color;
-            textColor = (_mark$attrs$color = mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : null;
-          } else if (mark.type.name === 'backgroundColor') {
-            var _mark$attrs$color2;
-            highlightColor = (_mark$attrs$color2 = mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : null;
-          }
+    var textColor = null;
+    var _iterator2 = _createForOfIteratorHelper(node.marks),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var mark = _step2.value;
+        if (mark.type.name === 'textColor') {
+          var _mark$attrs$color;
+          textColor = (_mark$attrs$color = mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : null;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      var pairKey = "".concat(textColor !== null && textColor !== void 0 ? textColor : 'default', "|").concat(highlightColor !== null && highlightColor !== void 0 ? highlightColor : 'default');
-      // Skip pairs we have already evaluated so the expensive contrast
-      // calculations run at most once per unique (text, highlight) pair.
-      if (seen.has(pairKey)) {
-        return;
-      }
-      seen.add(pairKey);
-      var contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
-      if (contrastRatio === null) {
-        return;
-      }
-
-      // Account for the non-active theme so the worst-case (least
-      // accessible) contrast across both themes is used for each pair,
-      // keeping multi-color selections consistent with the single-pair path.
-      var nonActiveThemeContrastRatio = getNonActiveThemeContrastRatio(defaultColor, highlightColor, textColor);
-      var mostCriticalContrastRatio = nonActiveThemeContrastRatio !== null ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
-      if (worstContrastRatio === null || mostCriticalContrastRatio < worstContrastRatio) {
-        worstContrastRatio = mostCriticalContrastRatio;
       }
-    });
-
-    // Read-only operation — do not dispatch
-    return null;
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    var backgroundColor = getResolvedBackgroundColorForTextNode(state.doc.resolve(pos), node);
+    var pairKey = "".concat(textColor !== null && textColor !== void 0 ? textColor : 'default', "|").concat(backgroundColor.source, "|").concat((_backgroundColor$colo = backgroundColor.color) !== null && _backgroundColor$colo !== void 0 ? _backgroundColor$colo : 'default');
+    // Skip foreground/background pairs already evaluated. The source is
+    // part of the key because text highlights and element backgrounds use
+    // different editor palettes.
+    if (seen.has(pairKey)) {
+      return;
+    }
+    seen.add(pairKey);
+    var mostCriticalContrastRatio = getMostCriticalContrastRatioAcrossThemes(defaultColor, backgroundColor, textColor);
+    if (mostCriticalContrastRatio === null) {
+      return;
+    }
+    if (worstContrastRatio === null || mostCriticalContrastRatio < worstContrastRatio) {
+      worstContrastRatio = mostCriticalContrastRatio;
+    }
   });
   return worstContrastRatio === null ? null : getAccessibilityStatus(worstContrastRatio);
 };
-var AccessibilityStatus = function AccessibilityStatus(_ref2) {
-  var accessibilityStatus = _ref2.accessibilityStatus,
-    formatMessage = _ref2.formatMessage;
+export var getAccessibilityStatusForCurrentSelection = function getAccessibilityStatusForCurrentSelection(state, defaultColor, highlightColor, textColor) {
+  if (state.selection instanceof TextSelection) {
+    if (!state.selection.empty) {
+      return getWorstAccessibilityStatusFromEditorState(state, defaultColor);
+    }
+    return getAccessibilityStatusFromColorPairAcrossThemes(defaultColor, getResolvedBackgroundColorForPosition(state.selection.$from, highlightColor), textColor);
+  }
+  return null;
+};
+var AccessibilityStatus = function AccessibilityStatus(_ref) {
+  var accessibilityStatus = _ref.accessibilityStatus,
+    formatMessage = _ref.formatMessage;
   if (accessibilityStatus === 'accessible') {
     return /*#__PURE__*/React.createElement(Text, {
       as: "span",
@@ -201,62 +303,20 @@ var styles = {
   container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4",
   containerPatch: "_19pkze3t _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t"
 };
-export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref3) {
-  var api = _ref3.api;
+export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref2) {
+  var api = _ref2.api;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useColorAccessibilit = useColorAccessibilityState(api),
     defaultColor = _useColorAccessibilit.defaultColor,
     highlightColor = _useColorAccessibilit.highlightColor,
-    highlightColorInNonActiveTheme = _useColorAccessibilit.highlightColorInNonActiveTheme,
-    isMultiHighlightColor = _useColorAccessibilit.isMultiHighlightColor,
-    isMultiTextColor = _useColorAccessibilit.isMultiTextColor,
-    textColor = _useColorAccessibilit.textColor,
-    textColorInNonActiveTheme = _useColorAccessibilit.textColorInNonActiveTheme;
-  // The multi-color selection handling (walking every unique text/highlight
-  // pair across the active and non-active theme) is only performed when the
-  // patch gate is on. When the gate is off we fall back to the legacy behavior
-  // of only evaluating the single active text/highlight color in the current
-  // active theme
-  var isMultiColorSelection = Boolean(isMultiTextColor || isMultiHighlightColor) && fg('platform_editor_lovability_text_bg_color_patch_1');
-
-  // The complement of `isMultiColorSelection`: the single active text/highlight
-  // pair is evaluated whenever we are not walking a multi-color selection. This
-  // covers both a genuinely single-color selection (gate on) and every
-  // selection when the gate is off (legacy behavior).
-  var isSingleColorSelection = !isMultiColorSelection;
-
-  // Memoize the selection walk so we don't re-traverse the entire ProseMirror
-  // document on every render. It only needs to recompute when the multi-color
-  // selection state or the inputs to the walk change (the selection flags,
-  // default color, or the plugin api).
-  var multiColorStatus = React.useMemo(function () {
-    return isMultiColorSelection ? getWorstAccessibilityStatusFromSelection(api, defaultColor) : null;
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isMultiColorSelection, isMultiTextColor, isMultiHighlightColor, defaultColor, api]);
-
-  // The single active text/highlight pair path. Everything below only applies
-  // when we are not walking a multi-color selection
-  var singleColorStatus = null;
-  if (isSingleColorSelection) {
-    var singleColorContrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
-
-    // Also account for the non-active theme (gate on only) so the worst-case
-    // (least accessible) status across both themes is shown.
-    var nonActiveThemeSingleColorRatio = null;
-    if (textColorInNonActiveTheme && highlightColorInNonActiveTheme && fg('platform_editor_lovability_text_bg_color_patch_1')) {
-      try {
-        nonActiveThemeSingleColorRatio = calcContrastRatio(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
-      } catch (_unused3) {
-        // if we failed to calculate the contrast ratio, leave as null
-        nonActiveThemeSingleColorRatio = null;
-      }
-    }
-    var mostCriticalContrastRatio = singleColorContrastRatio !== null && nonActiveThemeSingleColorRatio !== null ? Math.min(singleColorContrastRatio, nonActiveThemeSingleColorRatio) : singleColorContrastRatio;
-    singleColorStatus = mostCriticalContrastRatio !== null ? getAccessibilityStatus(mostCriticalContrastRatio) : null;
-  }
-  var accessibilityStatus = isSingleColorSelection ? singleColorStatus : multiColorStatus;
+    textColor = _useColorAccessibilit.textColor;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var editorState = editorView === null || editorView === void 0 ? void 0 : editorView.state;
+  var accessibilityStatus = React.useMemo(function () {
+    return editorState && fg('platform_editor_lovability_text_bg_color_patch_1') ? getAccessibilityStatusForCurrentSelection(editorState, defaultColor, highlightColor, textColor) : getAccessibilityStatusFromColorPair(defaultColor, getResolvedBackgroundFromHighlight(highlightColor), textColor);
+  }, [defaultColor, editorState, highlightColor, textColor]);
   if (accessibilityStatus === null) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }

package/dist/types/pm-plugins/main.d.ts

@@ -5,14 +5,8 @@ import type { PaletteColor } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export type TextColorPluginState = {
     color: string | null;
-    colorInNonActiveTheme?: string;
     defaultColor: string;
     disabled?: boolean;
-    /**
-     * True when the current selection spans more than one text color. Only
-     * populated behind the lovability text/bg color patch gate + experiment.
-     */
-    isMultiTextColor?: boolean;
     isPaletteOpen?: boolean;
     palette: Array<PaletteColor>;
 };

package/dist/types/pm-plugins/utils/color.d.ts

@@ -3,9 +3,4 @@ import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/stat
  * Use getDisabledStateNew instead and pass in `tr`
  */
 export declare const getActiveColor: (state: EditorState) => string | null;
-/**
- * Returns true when the selection contains two or more distinct text colors,
- * counting unmarked text as the default color.
- */
-export declare const isMultiTextColorSelection: (state: EditorState) => boolean;
 export declare const getActiveColorNew: (tr: Transaction) => string | null;

package/dist/types/ui/ColorAccessibilityMenuItem.d.ts

@@ -1,8 +1,23 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { TextColorPlugin } from '../textColorPluginType';
 type ColorAccessibilityMenuItemProps = {
     api: ExtractInjectionAPI<TextColorPlugin> | undefined;
 };
+type BackgroundColorSource = 'element' | 'text';
+export type ResolvedBackgroundColor = {
+    color: string | null;
+    source: BackgroundColorSource;
+};
+type ColorAccessibilityEditorState = Pick<EditorState, 'doc' | 'selection'>;
+/**
+ * Resolves the visible background behind a text node.
+ * Text highlight wins before falling back to the nearest element background.
+ */
+export declare const getResolvedBackgroundColorForTextNode: ($pos: ResolvedPos, node: Node) => ResolvedBackgroundColor;
+type AccessibilityStatusKey = 'accessible' | 'difficultToRead' | 'inaccessible';
+export declare const getAccessibilityStatusForCurrentSelection: (state: ColorAccessibilityEditorState, defaultColor: string | undefined, highlightColor: string | null | undefined, textColor: string | null | undefined) => AccessibilityStatusKey | null;
 export declare const ColorAccessibilityMenuItem: ({ api, }: ColorAccessibilityMenuItemProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "12.3.30",
+	"version": "12.3.32",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,16 +38,16 @@
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/icon": "^37.1.0",
 		"@atlaskit/icon-lab": "^7.4.0",
-		"@atlaskit/platform-feature-flags": "^2.0.0",
+		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
-		"@atlaskit/primitives": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^130.0.0",
-		"@atlaskit/tokens": "^16.1.0",
+		"@atlaskit/primitives": "^22.1.0",
+		"@atlaskit/tmp-editor-statsig": "^131.0.0",
+		"@atlaskit/tokens": "^16.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.33.0",
+		"@atlaskit/editor-common": "^116.35.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"