@atlaskit/editor-plugin-highlight 12.1.23 → 12.1.24

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-highlight
 
+## 12.1.24
+
+### 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.1.23
 
 ### Patch Changes

package/dist/cjs/editor-commands/color.js

@@ -4,11 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getActiveColor = void 0;
+exports.getActiveColor = exports.MULTIPLE_HIGHLIGHT_COLORS_SELECTED = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _mark = require("@atlaskit/editor-common/mark");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+/**
+ * Value returned by `getActiveColor` when the selection spans more than one
+ * distinct highlight (background) color. Callers can compare against this to
+ * detect a multi-color selection.
+ */
+var MULTIPLE_HIGHLIGHT_COLORS_SELECTED = exports.MULTIPLE_HIGHLIGHT_COLORS_SELECTED = 'multiple';
 var getAllUniqueBackgroundColorMarksInRange = function getAllUniqueBackgroundColorMarksInRange(from, to, tr) {
   var doc = tr.doc;
   var backgroundColor = doc.type.schema.marks.backgroundColor;
@@ -48,7 +54,7 @@ var getAllUniqueBackgroundColorMarksInCellSelection = function getAllUniqueBackg
 var getColorFromCellSelection = function getColorFromCellSelection(selection, tr) {
   var marks = getAllUniqueBackgroundColorMarksInCellSelection(selection, tr);
   if (marks.length > 1) {
-    return 'multiple';
+    return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
   }
   var firstColorMark = marks.at(0);
   if (!firstColorMark) {
@@ -74,7 +80,7 @@ var getColorFromCellSelection = function getColorFromCellSelection(selection, tr
 var getColorFromRange = function getColorFromRange(from, to, tr) {
   var marks = getAllUniqueBackgroundColorMarksInRange(from, to, tr);
   if (marks.length > 1) {
-    return 'multiple';
+    return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
   }
   var firstColorMark = marks.at(0);
   if (firstColorMark && (0, _mark.entireSelectionContainsMark)(firstColorMark, tr.doc, from, to)) {

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

@@ -8,7 +8,6 @@ exports.highlightPluginKey = exports.createPlugin = exports.HighlightPluginActio
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
-var _textBackgroundColor = require("@atlaskit/editor-palette/text-background-color");
 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");
@@ -24,11 +23,9 @@ var HighlightPluginAction = exports.HighlightPluginAction = /*#__PURE__*/functio
 }({});
 var DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
 var getActiveColorInNonActiveTheme = function getActiveColorInNonActiveTheme(color) {
-  if (!color) {
-    return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)("var(--ds-surface, #FFFFFF)", DEFAULT_BACKGROUND_COLOR);
-  }
-  var colorValue = (0, _textBackgroundColor.hexToEditorTextBackgroundPaletteColor)(color) || color;
-  return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)(colorValue, color);
+  return (0, _uiColor.getHighlightColorInNonActiveTheme)(color, {
+    defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
+  });
 };
 var createPlugin = exports.createPlugin = function createPlugin(_ref) {
   var api = _ref.api;
@@ -41,7 +38,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
           disabled: (0, _disabled.getDisabledState)(editorState),
           isPaletteOpen: false
         }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-          activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null)
+          activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
+          isMultiHighlightColor: false
         });
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -54,7 +52,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeColor: color
             }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color)
+              activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color),
+              isMultiHighlightColor: false
             });
           case HighlightPluginAction.SET_PALETTE:
             var _tr$getMeta3 = tr.getMeta(highlightPluginKey),
@@ -64,11 +63,17 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
             });
           default:
             var activeColor = (0, _color.getActiveColor)(tr);
+            var isMultiHighlightColor = activeColor === _color.MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeColor: activeColor,
               disabled: (0, _disabled.getDisabledState)(newState)
             }, activeColor !== pluginState.activeColor && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(activeColor)
+              // When the selection spans multiple highlight colors, `activeColor` is the
+              // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
+              // Passing it through would resolve the literal sentinel as a color, so fall
+              // back to the neutral default instead.
+              activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
+              isMultiHighlightColor: isMultiHighlightColor
             });
         }
       }

package/dist/es2019/editor-commands/color.js

@@ -1,6 +1,13 @@
 import { entireSelectionContainsMark } from '@atlaskit/editor-common/mark';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+
+/**
+ * Value returned by `getActiveColor` when the selection spans more than one
+ * distinct highlight (background) color. Callers can compare against this to
+ * detect a multi-color selection.
+ */
+export const MULTIPLE_HIGHLIGHT_COLORS_SELECTED = 'multiple';
 const getAllUniqueBackgroundColorMarksInRange = (from, to, tr) => {
   const {
     doc
@@ -44,7 +51,7 @@ const getAllUniqueBackgroundColorMarksInCellSelection = (selection, tr) => {
 const getColorFromCellSelection = (selection, tr) => {
   const marks = getAllUniqueBackgroundColorMarksInCellSelection(selection, tr);
   if (marks.length > 1) {
-    return 'multiple';
+    return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
   }
   const firstColorMark = marks.at(0);
   if (!firstColorMark) {
@@ -70,7 +77,7 @@ const getColorFromCellSelection = (selection, tr) => {
 const getColorFromRange = (from, to, tr) => {
   const marks = getAllUniqueBackgroundColorMarksInRange(from, to, tr);
   if (marks.length > 1) {
-    return 'multiple';
+    return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
   }
   const firstColorMark = marks.at(0);
   if (firstColorMark && entireSelectionContainsMark(firstColorMark, tr.doc, from, to)) {

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

@@ -1,10 +1,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getTokenCSSVariableValueForNonActiveTheme } from '@atlaskit/editor-common/ui-color';
-import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette/text-background-color';
+import { getHighlightColorInNonActiveTheme } 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 '../editor-commands/color';
+import { getActiveColor, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
 import { getDisabledState } from '../editor-commands/disabled';
 export const highlightPluginKey = new PluginKey('highlight');
 export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
@@ -13,13 +12,9 @@ export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction)
   return HighlightPluginAction;
 }({});
 const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
-const getActiveColorInNonActiveTheme = color => {
-  if (!color) {
-    return getTokenCSSVariableValueForNonActiveTheme("var(--ds-surface, #FFFFFF)", DEFAULT_BACKGROUND_COLOR);
-  }
-  const colorValue = hexToEditorTextBackgroundPaletteColor(color) || color;
-  return getTokenCSSVariableValueForNonActiveTheme(colorValue, color);
-};
+const getActiveColorInNonActiveTheme = color => getHighlightColorInNonActiveTheme(color, {
+  defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
+});
 export const createPlugin = ({
   api
 }) => {
@@ -32,7 +27,8 @@ export const createPlugin = ({
         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) && {
-          activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null)
+          activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
+          isMultiHighlightColor: false
         })
       }),
       apply: (tr, pluginState, _oldState, newState) => {
@@ -48,7 +44,8 @@ export const createPlugin = ({
               activeColor: color,
               // 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) && {
-                activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color)
+                activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color),
+                isMultiHighlightColor: false
               })
             };
           case HighlightPluginAction.SET_PALETTE:
@@ -61,13 +58,19 @@ export const createPlugin = ({
             };
           default:
             const activeColor = getActiveColor(tr);
+            const isMultiHighlightColor = activeColor === MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
             return {
               ...pluginState,
               activeColor,
               disabled: getDisabledState(newState),
               // eslint-disable-next-line @atlaskit/platform/no-preconditioning
               ...(activeColor !== pluginState.activeColor && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-                activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(activeColor)
+                // When the selection spans multiple highlight colors, `activeColor` is the
+                // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
+                // Passing it through would resolve the literal sentinel as a color, so fall
+                // back to the neutral default instead.
+                activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
+                isMultiHighlightColor
               })
             };
         }

package/dist/esm/editor-commands/color.js

@@ -2,6 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { entireSelectionContainsMark } from '@atlaskit/editor-common/mark';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+
+/**
+ * Value returned by `getActiveColor` when the selection spans more than one
+ * distinct highlight (background) color. Callers can compare against this to
+ * detect a multi-color selection.
+ */
+export var MULTIPLE_HIGHLIGHT_COLORS_SELECTED = 'multiple';
 var getAllUniqueBackgroundColorMarksInRange = function getAllUniqueBackgroundColorMarksInRange(from, to, tr) {
   var doc = tr.doc;
   var backgroundColor = doc.type.schema.marks.backgroundColor;
@@ -41,7 +48,7 @@ var getAllUniqueBackgroundColorMarksInCellSelection = function getAllUniqueBackg
 var getColorFromCellSelection = function getColorFromCellSelection(selection, tr) {
   var marks = getAllUniqueBackgroundColorMarksInCellSelection(selection, tr);
   if (marks.length > 1) {
-    return 'multiple';
+    return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
   }
   var firstColorMark = marks.at(0);
   if (!firstColorMark) {
@@ -67,7 +74,7 @@ var getColorFromCellSelection = function getColorFromCellSelection(selection, tr
 var getColorFromRange = function getColorFromRange(from, to, tr) {
   var marks = getAllUniqueBackgroundColorMarksInRange(from, to, tr);
   if (marks.length > 1) {
-    return 'multiple';
+    return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
   }
   var firstColorMark = marks.at(0);
   if (firstColorMark && entireSelectionContainsMark(firstColorMark, tr.doc, from, to)) {

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

@@ -2,12 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 } from '@atlaskit/editor-common/ui-color';
-import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette/text-background-color';
+import { getHighlightColorInNonActiveTheme } 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 '../editor-commands/color';
+import { getActiveColor, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
 import { getDisabledState } from '../editor-commands/disabled';
 export var highlightPluginKey = new PluginKey('highlight');
 export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
@@ -17,11 +16,9 @@ export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction)
 }({});
 var DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
 var getActiveColorInNonActiveTheme = function getActiveColorInNonActiveTheme(color) {
-  if (!color) {
-    return getTokenCSSVariableValueForNonActiveTheme("var(--ds-surface, #FFFFFF)", DEFAULT_BACKGROUND_COLOR);
-  }
-  var colorValue = hexToEditorTextBackgroundPaletteColor(color) || color;
-  return getTokenCSSVariableValueForNonActiveTheme(colorValue, color);
+  return getHighlightColorInNonActiveTheme(color, {
+    defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
+  });
 };
 export var createPlugin = function createPlugin(_ref) {
   var api = _ref.api;
@@ -34,7 +31,8 @@ export var createPlugin = function createPlugin(_ref) {
           disabled: getDisabledState(editorState),
           isPaletteOpen: false
         }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-          activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null)
+          activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
+          isMultiHighlightColor: false
         });
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -47,7 +45,8 @@ export var createPlugin = function createPlugin(_ref) {
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeColor: color
             }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color)
+              activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color),
+              isMultiHighlightColor: false
             });
           case HighlightPluginAction.SET_PALETTE:
             var _tr$getMeta3 = tr.getMeta(highlightPluginKey),
@@ -57,11 +56,17 @@ export var createPlugin = function createPlugin(_ref) {
             });
           default:
             var activeColor = getActiveColor(tr);
+            var isMultiHighlightColor = activeColor === MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeColor: activeColor,
               disabled: getDisabledState(newState)
             }, activeColor !== pluginState.activeColor && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(activeColor)
+              // When the selection spans multiple highlight colors, `activeColor` is the
+              // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
+              // Passing it through would resolve the literal sentinel as a color, so fall
+              // back to the neutral default instead.
+              activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
+              isMultiHighlightColor: isMultiHighlightColor
             });
         }
       }

package/dist/types/editor-commands/color.d.ts

@@ -1,2 +1,8 @@
 import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
+/**
+ * Value returned by `getActiveColor` when the selection spans more than one
+ * distinct highlight (background) color. Callers can compare against this to
+ * detect a multi-color selection.
+ */
+export declare const MULTIPLE_HIGHLIGHT_COLORS_SELECTED = "multiple";
 export declare const getActiveColor: (tr: Transaction | ReadonlyTransaction) => string | null;

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

@@ -7,6 +7,11 @@ export type HighlightPluginState = {
     activeColor: string | null;
     activeColorInNonActiveTheme?: string;
     disabled: boolean;
+    /**
+     * True when the current selection spans more than one highlight color. Only
+     * populated behind the lovability text/bg color patch gate + experiment.
+     */
+    isMultiHighlightColor?: boolean;
     isPaletteOpen: boolean;
 };
 export declare enum HighlightPluginAction {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-highlight",
-	"version": "12.1.23",
+	"version": "12.1.24",
 	"description": "Highlight plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,19 +35,19 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
 		"@atlaskit/editor-tables": "^3.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/platform-feature-flags": "^2.0.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-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},