@atlaskit/editor-plugin-text-color 12.3.18 → 12.3.19

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-text-color
 
+## 12.3.19
+
+### Patch Changes
+
+- [`4821d5874a821`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4821d5874a821) -
+  EDITOR-7869: Show worst accessibility status when selection spans multiple text or highlight
+  colors
+- Updated dependencies
+
 ## 12.3.18
 
 ### Patch Changes

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

@@ -11,7 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
-var _text = require("@atlaskit/editor-palette/text");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
@@ -20,13 +19,6 @@ var _constants = require("./utils/constants");
 var _disabled = require("./utils/disabled");
 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 getColorInNonActiveTheme = function getColorInNonActiveTheme(color, defaultColor) {
-  if (!color || color === defaultColor) {
-    return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)("var(--ds-text, #292A2E)", defaultColor);
-  }
-  var colorValue = (0, _text.hexToEditorTextPaletteColor)(color) || color;
-  return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)(colorValue, color);
-};
 function createInitialPluginState(editorState, pluginConfig) {
   var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || _constants.DEFAULT_COLOR;
   var paletteColors = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? _uiColor.textColorPaletteNew : _uiColor.textColorPalette;
@@ -43,7 +35,8 @@ function createInitialPluginState(editorState, pluginConfig) {
     defaultColor: defaultColor.color,
     isPaletteOpen: false
   }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-    colorInNonActiveTheme: getColorInNonActiveTheme(color, defaultColor.color)
+    colorInNonActiveTheme: (0, _uiColor.getTextColorInNonActiveTheme)(color, defaultColor.color),
+    isMultiTextColor: (0, _color.isMultiTextColorSelection)(editorState)
   });
   return state;
 }
@@ -70,7 +63,8 @@ function createPlugin(dispatch, pluginConfig) {
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: pluginState.defaultColor
             }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor)
+              colorInNonActiveTheme: (0, _uiColor.getTextColorInNonActiveTheme)(pluginState.defaultColor, pluginState.defaultColor),
+              isMultiTextColor: false
             });
             break;
           case ACTIONS.SET_COLOR:
@@ -79,7 +73,8 @@ function createPlugin(dispatch, pluginConfig) {
               disabled: false,
               isPaletteOpen: false
             }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getColorInNonActiveTheme(meta.color, pluginState.defaultColor)
+              colorInNonActiveTheme: (0, _uiColor.getTextColorInNonActiveTheme)(meta.color, pluginState.defaultColor),
+              isMultiTextColor: false
             });
             break;
           case ACTIONS.DISABLE:
@@ -98,10 +93,11 @@ function createPlugin(dispatch, pluginConfig) {
               color: color,
               disabled: (0, _disabled.getDisabledState)(newState)
             }, color !== pluginState.color && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getColorInNonActiveTheme(color, pluginState.defaultColor)
+              colorInNonActiveTheme: (0, _uiColor.getTextColorInNonActiveTheme)(color, pluginState.defaultColor),
+              isMultiTextColor: (0, _color.isMultiTextColorSelection)(newState)
             });
         }
-        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isMultiTextColor !== nextState.isMultiTextColor || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
           dispatch(pluginKey, nextState);
           return nextState;
         }

package/dist/cjs/pm-plugins/utils/color.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActiveColorNew = exports.getActiveColor = void 0;
+exports.isMultiTextColorSelection = exports.getActiveColorNew = exports.getActiveColor = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _constants = require("./constants");
 /**
  * Use getDisabledStateNew instead and pass in `tr`
@@ -49,6 +50,36 @@ var getActiveColor = exports.getActiveColor = function getActiveColor(state) {
   }
   return marksWithColor.length ? marksWithColor[0].attrs.color : _constants.DEFAULT_COLOR.color;
 };
+
+/**
+ * Returns true only when the selection contains two or more *distinct* text
+ * colors.
+ *
+ * This is deliberately narrower than `getActiveColor() === null`: `getActiveColor`
+ * also returns `null` for a mixed selection where a single colored region sits
+ * alongside uncolored text (`marksWithColor.length === 1 && marks.length > 1`).
+ * That mixed case is not a multi-color selection and must not trigger the
+ * expensive worst-status selection walk, so we key the `isMultiTextColor` flag
+ * off this predicate instead.
+ */
+var isMultiTextColorSelection = exports.isMultiTextColorSelection = function isMultiTextColorSelection(state) {
+  var selection = state.selection,
+    doc = state.doc;
+  if (!(selection instanceof _state.TextSelection)) {
+    return false;
+  }
+  var textColor = doc.type.schema.marks.textColor;
+  var colors = new Set();
+  doc.nodesBetween(selection.from, selection.to, function (node) {
+    if (node.isLeaf) {
+      var mark = textColor.isInSet(node.marks);
+      if (mark) {
+        colors.add(mark.attrs.color);
+      }
+    }
+  });
+  return colors.size > 1;
+};
 var getActiveColorNew = exports.getActiveColorNew = function getActiveColorNew(tr) {
   var _ref3 = tr.selection,
     $from = _ref3.$from,

package/dist/cjs/ui/ColorAccessibilityMenuItem.js

@@ -15,6 +15,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorPalette = require("@atlaskit/editor-palette");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _accessibility = _interopRequireDefault(require("@atlaskit/icon/core/accessibility"));
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/question-circle"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -22,6 +23,9 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _tokens = require("@atlaskit/tokens");
 var _colorContrast = require("../pm-plugins/utils/color-contrast");
 var _constants = require("../pm-plugins/utils/constants");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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; }
 var resolveColorValue = function resolveColorValue(color, fallback) {
   return (0, _uiColor.getTokenCSSVariableValue)(color) || (color.startsWith('var(') ? fallback : color);
 };
@@ -41,13 +45,15 @@ var getBackgroundColor = function getBackgroundColor(highlightColor) {
 };
 var useColorAccessibilityState = function useColorAccessibilityState(api) {
   return (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor', 'highlight'], function (states) {
-    var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$textColorStat2, _states$textColorStat3;
+    var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$highlightStat3, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4;
     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,
-      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
-      textColorInNonActiveTheme: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.colorInNonActiveTheme
+      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
     };
   });
 };
@@ -60,6 +66,22 @@ var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, t
     return null;
   }
 };
+
+// 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) {
+  try {
+    return (0, _colorContrast.getContrastRatio)((0, _uiColor.getTextColorInNonActiveTheme)(textColor !== null && textColor !== void 0 ? textColor : null, defaultColor || _constants.DEFAULT_COLOR.color), (0, _uiColor.getHighlightColorInNonActiveTheme)(highlightColor !== null && highlightColor !== void 0 ? highlightColor : null, {
+      defaultBackgroundColor: _constants.DEFAULT_BACKGROUND_COLOR,
+      transparentColor: _constants.TRANSPARENT_HIGHLIGHT_COLOR
+    }));
+  } catch (_unused2) {
+    // if we failed to calculate the contrast ratio, return null
+    return null;
+  }
+};
 var getAccessibilityStatus = function getAccessibilityStatus(contrastRatio) {
   if (contrastRatio >= _constants.ACCESSIBLE_CONTRAST_RATIO) {
     return 'accessible';
@@ -69,9 +91,98 @@ var getAccessibilityStatus = function getAccessibilityStatus(contrastRatio) {
     return 'inaccessible';
   }
 };
-var AccessibilityStatus = function AccessibilityStatus(_ref) {
-  var accessibilityStatus = _ref.accessibilityStatus,
-    formatMessage = _ref.formatMessage;
+
+/**
+ * Collects the worst accessibility status across all unique (textColor, highlightColor)
+ * 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.
+ */
+var getWorstAccessibilityStatusFromSelection = function getWorstAccessibilityStatusFromSelection(api, defaultColor) {
+  if (!(api !== null && api !== void 0 && api.core)) {
+    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 _state.TextSelection)) {
+      return null;
+    }
+    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;
+          }
+        }
+      } 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;
+  });
+  return worstContrastRatio === null ? null : getAccessibilityStatus(worstContrastRatio);
+};
+var AccessibilityStatus = function AccessibilityStatus(_ref2) {
+  var accessibilityStatus = _ref2.accessibilityStatus,
+    formatMessage = _ref2.formatMessage;
   if (accessibilityStatus === 'accessible') {
     return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
       as: "span",
@@ -95,30 +206,65 @@ var AccessibilityStatus = function AccessibilityStatus(_ref) {
 var styles = {
   container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
 };
-var ColorAccessibilityMenuItem = exports.ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref2) {
-  var api = _ref2.api;
+var ColorAccessibilityMenuItem = exports.ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref3) {
+  var api = _ref3.api;
   var _useIntl = (0, _reactIntl.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;
-  var contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
-  var nonActiveThemeContrastRatio = null;
-  try {
+  // 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) && (0, _platformFeatureFlags.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.default.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 && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1')) {
-      nonActiveThemeContrastRatio = (0, _colorContrast.getContrastRatio)(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
+      try {
+        nonActiveThemeSingleColorRatio = (0, _colorContrast.getContrastRatio)(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
+      } catch (_unused3) {
+        // if we failed to calculate the contrast ratio, leave as null
+        nonActiveThemeSingleColorRatio = null;
+      }
     }
-  } catch (_unused2) {
-    // if we failed to calculate the contrast ratio, leave null
+    var mostCriticalContrastRatio = singleColorContrastRatio !== null && nonActiveThemeSingleColorRatio !== null ? Math.min(singleColorContrastRatio, nonActiveThemeSingleColorRatio) : singleColorContrastRatio;
+    singleColorStatus = mostCriticalContrastRatio !== null ? getAccessibilityStatus(mostCriticalContrastRatio) : null;
   }
-  var mostCriticalContrastRatio = contrastRatio !== null && nonActiveThemeContrastRatio !== null && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
-  if (mostCriticalContrastRatio === null) {
+  var accessibilityStatus = isSingleColorSelection ? singleColorStatus : multiColorStatus;
+  if (accessibilityStatus === null) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
-  var accessibilityStatus = getAccessibilityStatus(mostCriticalContrastRatio);
   var tooltipContent = function tooltipContent(accessibilityStatus) {
     if (accessibilityStatus === 'accessible') {
       return formatMessage(_messages.colorAccessibilityMessages.accessibleTooltip);

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

@@ -1,19 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getTokenCSSVariableValueForNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
-import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette/text';
+import { getTextColorInNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { getActiveColor } from './utils/color';
+import { getActiveColor, isMultiTextColorSelection } from './utils/color';
 import { DEFAULT_COLOR } from './utils/constants';
 import { getDisabledState } from './utils/disabled';
-const getColorInNonActiveTheme = (color, defaultColor) => {
-  if (!color || color === defaultColor) {
-    return getTokenCSSVariableValueForNonActiveTheme("var(--ds-text, #292A2E)", defaultColor);
-  }
-  const colorValue = hexToEditorTextPaletteColor(color) || color;
-  return getTokenCSSVariableValueForNonActiveTheme(colorValue, color);
-};
 function createInitialPluginState(editorState, pluginConfig) {
   const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
   const paletteColors = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? textColorPaletteNew : textColorPalette;
@@ -31,7 +23,8 @@ function createInitialPluginState(editorState, pluginConfig) {
     isPaletteOpen: false,
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
     ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-      colorInNonActiveTheme: getColorInNonActiveTheme(color, defaultColor.color)
+      colorInNonActiveTheme: getTextColorInNonActiveTheme(color, defaultColor.color),
+      isMultiTextColor: isMultiTextColorSelection(editorState)
     })
   };
   return state;
@@ -61,7 +54,8 @@ export function createPlugin(dispatch, pluginConfig) {
               color: pluginState.defaultColor,
               // eslint-disable-next-line @atlaskit/platform/no-preconditioning
               ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-                colorInNonActiveTheme: getColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor)
+                colorInNonActiveTheme: getTextColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor),
+                isMultiTextColor: false
               })
             };
             break;
@@ -73,7 +67,8 @@ export function createPlugin(dispatch, pluginConfig) {
               isPaletteOpen: false,
               // eslint-disable-next-line @atlaskit/platform/no-preconditioning
               ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-                colorInNonActiveTheme: getColorInNonActiveTheme(meta.color, pluginState.defaultColor)
+                colorInNonActiveTheme: getTextColorInNonActiveTheme(meta.color, pluginState.defaultColor),
+                isMultiTextColor: false
               })
             };
             break;
@@ -97,11 +92,12 @@ export function createPlugin(dispatch, pluginConfig) {
               disabled: getDisabledState(newState),
               // eslint-disable-next-line @atlaskit/platform/no-preconditioning
               ...(color !== pluginState.color && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-                colorInNonActiveTheme: getColorInNonActiveTheme(color, pluginState.defaultColor)
+                colorInNonActiveTheme: getTextColorInNonActiveTheme(color, pluginState.defaultColor),
+                isMultiTextColor: isMultiTextColorSelection(newState)
               })
             };
         }
-        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isMultiTextColor !== nextState.isMultiTextColor || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
           dispatch(pluginKey, nextState);
           return nextState;
         }

package/dist/es2019/pm-plugins/utils/color.js

@@ -1,3 +1,4 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DEFAULT_COLOR } from './constants';
 
 /**
@@ -44,6 +45,40 @@ export const getActiveColor = state => {
   }
   return marksWithColor.length ? marksWithColor[0].attrs.color : DEFAULT_COLOR.color;
 };
+
+/**
+ * Returns true only when the selection contains two or more *distinct* text
+ * colors.
+ *
+ * This is deliberately narrower than `getActiveColor() === null`: `getActiveColor`
+ * also returns `null` for a mixed selection where a single colored region sits
+ * alongside uncolored text (`marksWithColor.length === 1 && marks.length > 1`).
+ * That mixed case is not a multi-color selection and must not trigger the
+ * expensive worst-status selection walk, so we key the `isMultiTextColor` flag
+ * off this predicate instead.
+ */
+export const isMultiTextColorSelection = state => {
+  const {
+    selection,
+    doc
+  } = state;
+  if (!(selection instanceof TextSelection)) {
+    return false;
+  }
+  const {
+    textColor
+  } = doc.type.schema.marks;
+  const colors = new Set();
+  doc.nodesBetween(selection.from, selection.to, node => {
+    if (node.isLeaf) {
+      const mark = textColor.isInSet(node.marks);
+      if (mark) {
+        colors.add(mark.attrs.color);
+      }
+    }
+  });
+  return colors.size > 1;
+};
 export const getActiveColorNew = tr => {
   const {
     $from,

package/dist/es2019/ui/ColorAccessibilityMenuItem.js

@@ -6,8 +6,9 @@ import { useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { colorAccessibilityMessages as messages } from '@atlaskit/editor-common/messages';
-import { getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
+import { getHighlightColorInNonActiveTheme, getTextColorInNonActiveTheme, getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
 import { 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';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -34,13 +35,15 @@ const getBackgroundColor = highlightColor => {
 };
 const useColorAccessibilityState = api => {
   return useSharedPluginStateWithSelector(api, ['textColor', 'highlight'], states => {
-    var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$textColorStat2, _states$textColorStat3;
+    var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$highlightStat3, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4;
     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,
-      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
-      textColorInNonActiveTheme: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.colorInNonActiveTheme
+      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
     };
   });
 };
@@ -53,6 +56,22 @@ const getContrastRatio = (defaultColor, highlightColor, textColor) => {
     return null;
   }
 };
+
+// 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.
+const getNonActiveThemeContrastRatio = (defaultColor, highlightColor, 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
+    }));
+  } catch {
+    // if we failed to calculate the contrast ratio, return null
+    return null;
+  }
+};
 const getAccessibilityStatus = contrastRatio => {
   if (contrastRatio >= ACCESSIBLE_CONTRAST_RATIO) {
     return 'accessible';
@@ -62,6 +81,89 @@ const getAccessibilityStatus = contrastRatio => {
     return 'inaccessible';
   }
 };
+
+/**
+ * Collects the worst accessibility status across all unique (textColor, highlightColor)
+ * 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.
+ */
+const getWorstAccessibilityStatusFromSelection = (api, defaultColor) => {
+  if (!(api !== null && api !== void 0 && api.core)) {
+    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.
+  let worstContrastRatio = null;
+  api.core.actions.execute(({
+    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;
+    }
+    const {
+      from,
+      to
+    } = tr.selection;
+    const seen = new Set();
+    tr.doc.nodesBetween(from, to, node => {
+      var _textColor, _highlightColor;
+      // 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.
+      let textColor = null;
+      let highlightColor = null;
+      for (const mark of node.marks) {
+        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;
+        }
+      }
+      const pairKey = `${(_textColor = textColor) !== null && _textColor !== void 0 ? _textColor : 'default'}|${(_highlightColor = 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);
+      const 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.
+      const nonActiveThemeContrastRatio = getNonActiveThemeContrastRatio(defaultColor, highlightColor, textColor);
+      const mostCriticalContrastRatio = nonActiveThemeContrastRatio !== null ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
+      if (worstContrastRatio === null || mostCriticalContrastRatio < worstContrastRatio) {
+        worstContrastRatio = mostCriticalContrastRatio;
+      }
+    });
+
+    // Read-only operation — do not dispatch
+    return null;
+  });
+  return worstContrastRatio === null ? null : getAccessibilityStatus(worstContrastRatio);
+};
 const AccessibilityStatus = ({
   accessibilityStatus,
   formatMessage
@@ -99,23 +201,56 @@ export const ColorAccessibilityMenuItem = ({
     defaultColor,
     highlightColor,
     highlightColorInNonActiveTheme,
+    isMultiHighlightColor,
+    isMultiTextColor,
     textColor,
     textColorInNonActiveTheme
   } = useColorAccessibilityState(api);
-  const contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
-  let nonActiveThemeContrastRatio = null;
-  try {
+  // 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
+  const 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).
+  const 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).
+  const multiColorStatus = React.useMemo(() => 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
+  let singleColorStatus = null;
+  if (isSingleColorSelection) {
+    const 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.
+    let nonActiveThemeSingleColorRatio = null;
     if (textColorInNonActiveTheme && highlightColorInNonActiveTheme && fg('platform_editor_lovability_text_bg_color_patch_1')) {
-      nonActiveThemeContrastRatio = calcContrastRatio(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
+      try {
+        nonActiveThemeSingleColorRatio = calcContrastRatio(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
+      } catch {
+        // if we failed to calculate the contrast ratio, leave as null
+        nonActiveThemeSingleColorRatio = null;
+      }
     }
-  } catch {
-    // if we failed to calculate the contrast ratio, leave null
+    const mostCriticalContrastRatio = singleColorContrastRatio !== null && nonActiveThemeSingleColorRatio !== null ? Math.min(singleColorContrastRatio, nonActiveThemeSingleColorRatio) : singleColorContrastRatio;
+    singleColorStatus = mostCriticalContrastRatio !== null ? getAccessibilityStatus(mostCriticalContrastRatio) : null;
   }
-  const mostCriticalContrastRatio = contrastRatio !== null && nonActiveThemeContrastRatio !== null && fg('platform_editor_lovability_text_bg_color_patch_1') ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
-  if (mostCriticalContrastRatio === null) {
+  const accessibilityStatus = isSingleColorSelection ? singleColorStatus : multiColorStatus;
+  if (accessibilityStatus === null) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
-  const accessibilityStatus = getAccessibilityStatus(mostCriticalContrastRatio);
   const tooltipContent = accessibilityStatus => {
     if (accessibilityStatus === 'accessible') {
       return formatMessage(messages.accessibleTooltip);

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

@@ -3,21 +3,13 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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) { _defineProperty(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; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getTokenCSSVariableValueForNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
-import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette/text';
+import { getTextColorInNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { getActiveColor } from './utils/color';
+import { getActiveColor, isMultiTextColorSelection } from './utils/color';
 import { DEFAULT_COLOR } from './utils/constants';
 import { getDisabledState } from './utils/disabled';
-var getColorInNonActiveTheme = function getColorInNonActiveTheme(color, defaultColor) {
-  if (!color || color === defaultColor) {
-    return getTokenCSSVariableValueForNonActiveTheme("var(--ds-text, #292A2E)", defaultColor);
-  }
-  var colorValue = hexToEditorTextPaletteColor(color) || color;
-  return getTokenCSSVariableValueForNonActiveTheme(colorValue, color);
-};
 function createInitialPluginState(editorState, pluginConfig) {
   var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
   var paletteColors = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? textColorPaletteNew : textColorPalette;
@@ -34,7 +26,8 @@ function createInitialPluginState(editorState, pluginConfig) {
     defaultColor: defaultColor.color,
     isPaletteOpen: false
   }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-    colorInNonActiveTheme: getColorInNonActiveTheme(color, defaultColor.color)
+    colorInNonActiveTheme: getTextColorInNonActiveTheme(color, defaultColor.color),
+    isMultiTextColor: isMultiTextColorSelection(editorState)
   });
   return state;
 }
@@ -61,7 +54,8 @@ export function createPlugin(dispatch, pluginConfig) {
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: pluginState.defaultColor
             }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor)
+              colorInNonActiveTheme: getTextColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor),
+              isMultiTextColor: false
             });
             break;
           case ACTIONS.SET_COLOR:
@@ -70,7 +64,8 @@ export function createPlugin(dispatch, pluginConfig) {
               disabled: false,
               isPaletteOpen: false
             }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getColorInNonActiveTheme(meta.color, pluginState.defaultColor)
+              colorInNonActiveTheme: getTextColorInNonActiveTheme(meta.color, pluginState.defaultColor),
+              isMultiTextColor: false
             });
             break;
           case ACTIONS.DISABLE:
@@ -89,10 +84,11 @@ export function createPlugin(dispatch, pluginConfig) {
               color: color,
               disabled: getDisabledState(newState)
             }, color !== pluginState.color && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getColorInNonActiveTheme(color, pluginState.defaultColor)
+              colorInNonActiveTheme: getTextColorInNonActiveTheme(color, pluginState.defaultColor),
+              isMultiTextColor: isMultiTextColorSelection(newState)
             });
         }
-        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isMultiTextColor !== nextState.isMultiTextColor || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
           dispatch(pluginKey, nextState);
           return nextState;
         }

package/dist/esm/pm-plugins/utils/color.js

@@ -1,3 +1,4 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DEFAULT_COLOR } from './constants';
 
 /**
@@ -44,6 +45,36 @@ export var getActiveColor = function getActiveColor(state) {
   }
   return marksWithColor.length ? marksWithColor[0].attrs.color : DEFAULT_COLOR.color;
 };
+
+/**
+ * Returns true only when the selection contains two or more *distinct* text
+ * colors.
+ *
+ * This is deliberately narrower than `getActiveColor() === null`: `getActiveColor`
+ * also returns `null` for a mixed selection where a single colored region sits
+ * alongside uncolored text (`marksWithColor.length === 1 && marks.length > 1`).
+ * That mixed case is not a multi-color selection and must not trigger the
+ * expensive worst-status selection walk, so we key the `isMultiTextColor` flag
+ * off this predicate instead.
+ */
+export var isMultiTextColorSelection = function isMultiTextColorSelection(state) {
+  var selection = state.selection,
+    doc = state.doc;
+  if (!(selection instanceof TextSelection)) {
+    return false;
+  }
+  var textColor = doc.type.schema.marks.textColor;
+  var colors = new Set();
+  doc.nodesBetween(selection.from, selection.to, function (node) {
+    if (node.isLeaf) {
+      var mark = textColor.isInSet(node.marks);
+      if (mark) {
+        colors.add(mark.attrs.color);
+      }
+    }
+  });
+  return colors.size > 1;
+};
 export var getActiveColorNew = function getActiveColorNew(tr) {
   var _ref3 = tr.selection,
     $from = _ref3.$from,

package/dist/esm/ui/ColorAccessibilityMenuItem.js

@@ -1,13 +1,17 @@
 /* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ColorAccessibilityMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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 { IconButton } from '@atlaskit/button/new';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { colorAccessibilityMessages as messages } from '@atlaskit/editor-common/messages';
-import { getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
+import { getHighlightColorInNonActiveTheme, getTextColorInNonActiveTheme, getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
 import { 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';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -34,13 +38,15 @@ var getBackgroundColor = function getBackgroundColor(highlightColor) {
 };
 var useColorAccessibilityState = function useColorAccessibilityState(api) {
   return useSharedPluginStateWithSelector(api, ['textColor', 'highlight'], function (states) {
-    var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$textColorStat2, _states$textColorStat3;
+    var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$highlightStat3, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4;
     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,
-      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
-      textColorInNonActiveTheme: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.colorInNonActiveTheme
+      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
     };
   });
 };
@@ -53,6 +59,22 @@ var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, t
     return null;
   }
 };
+
+// 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) {
+  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
+    }));
+  } catch (_unused2) {
+    // if we failed to calculate the contrast ratio, return null
+    return null;
+  }
+};
 var getAccessibilityStatus = function getAccessibilityStatus(contrastRatio) {
   if (contrastRatio >= ACCESSIBLE_CONTRAST_RATIO) {
     return 'accessible';
@@ -62,9 +84,98 @@ var getAccessibilityStatus = function getAccessibilityStatus(contrastRatio) {
     return 'inaccessible';
   }
 };
-var AccessibilityStatus = function AccessibilityStatus(_ref) {
-  var accessibilityStatus = _ref.accessibilityStatus,
-    formatMessage = _ref.formatMessage;
+
+/**
+ * Collects the worst accessibility status across all unique (textColor, highlightColor)
+ * 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.
+ */
+var getWorstAccessibilityStatusFromSelection = function getWorstAccessibilityStatusFromSelection(api, defaultColor) {
+  if (!(api !== null && api !== void 0 && api.core)) {
+    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 _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;
+          }
+        }
+      } 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;
+  });
+  return worstContrastRatio === null ? null : getAccessibilityStatus(worstContrastRatio);
+};
+var AccessibilityStatus = function AccessibilityStatus(_ref2) {
+  var accessibilityStatus = _ref2.accessibilityStatus,
+    formatMessage = _ref2.formatMessage;
   if (accessibilityStatus === 'accessible') {
     return /*#__PURE__*/React.createElement(Text, {
       as: "span",
@@ -88,30 +199,65 @@ var AccessibilityStatus = function AccessibilityStatus(_ref) {
 var styles = {
   container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
 };
-export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref2) {
-  var api = _ref2.api;
+export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref3) {
+  var api = _ref3.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;
-  var contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
-  var nonActiveThemeContrastRatio = null;
-  try {
+  // 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')) {
-      nonActiveThemeContrastRatio = calcContrastRatio(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
+      try {
+        nonActiveThemeSingleColorRatio = calcContrastRatio(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
+      } catch (_unused3) {
+        // if we failed to calculate the contrast ratio, leave as null
+        nonActiveThemeSingleColorRatio = null;
+      }
     }
-  } catch (_unused2) {
-    // if we failed to calculate the contrast ratio, leave null
+    var mostCriticalContrastRatio = singleColorContrastRatio !== null && nonActiveThemeSingleColorRatio !== null ? Math.min(singleColorContrastRatio, nonActiveThemeSingleColorRatio) : singleColorContrastRatio;
+    singleColorStatus = mostCriticalContrastRatio !== null ? getAccessibilityStatus(mostCriticalContrastRatio) : null;
   }
-  var mostCriticalContrastRatio = contrastRatio !== null && nonActiveThemeContrastRatio !== null && fg('platform_editor_lovability_text_bg_color_patch_1') ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
-  if (mostCriticalContrastRatio === null) {
+  var accessibilityStatus = isSingleColorSelection ? singleColorStatus : multiColorStatus;
+  if (accessibilityStatus === null) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
-  var accessibilityStatus = getAccessibilityStatus(mostCriticalContrastRatio);
   var tooltipContent = function tooltipContent(accessibilityStatus) {
     if (accessibilityStatus === 'accessible') {
       return formatMessage(messages.accessibleTooltip);

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

@@ -8,6 +8,11 @@ export type TextColorPluginState = {
     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,4 +3,16 @@ 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 only when the selection contains two or more *distinct* text
+ * colors.
+ *
+ * This is deliberately narrower than `getActiveColor() === null`: `getActiveColor`
+ * also returns `null` for a mixed selection where a single colored region sits
+ * alongside uncolored text (`marksWithColor.length === 1 && marks.length > 1`).
+ * That mixed case is not a multi-color selection and must not trigger the
+ * expensive worst-status selection walk, so we key the `isMultiTextColor` flag
+ * off this predicate instead.
+ */
+export declare const isMultiTextColorSelection: (state: EditorState) => boolean;
 export declare const getActiveColorNew: (tr: Transaction) => string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "12.3.18",
+	"version": "12.3.19",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,21 +33,21 @@
 		"@atlaskit/editor-plugin-toolbar": "^9.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
-		"@atlaskit/editor-toolbar": "^2.1.0",
+		"@atlaskit/editor-toolbar": "^2.2.0",
 		"@atlaskit/editor-toolbar-model": "^1.1.0",
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/icon": "^37.0.0",
 		"@atlaskit/icon-lab": "^7.3.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
-		"@atlaskit/primitives": "^20.5.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/tmp-editor-statsig": "^124.1.0",
-		"@atlaskit/tokens": "^15.5.0",
+		"@atlaskit/tokens": "^15.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.25.0",
+		"@atlaskit/editor-common": "^116.26.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"