@atlaskit/editor-plugin-highlight 12.1.23 → 12.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/editor-commands/color.js +31 -3
  3. package/dist/cjs/pm-plugins/main.js +22 -11
  4. package/dist/es2019/editor-commands/color.js +34 -2
  5. package/dist/es2019/pm-plugins/main.js +23 -15
  6. package/dist/esm/editor-commands/color.js +31 -2
  7. package/dist/esm/pm-plugins/main.js +24 -13
  8. package/dist/types/editor-commands/color.d.ts +12 -1
  9. package/dist/types/pm-plugins/main.d.ts +5 -0
  10. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 12.1.25
4
+
5
+ ### Patch Changes
6
+
7
+ - [`1a6b32ef3760e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a6b32ef3760e) -
8
+ Treat default text and highlight colors as mixed selection colors
9
+ - Updated dependencies
10
+
11
+ ## 12.1.24
12
+
13
+ ### Patch Changes
14
+
15
+ - [`4821d5874a821`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4821d5874a821) -
16
+ EDITOR-7869: Show worst accessibility status when selection spans multiple text or highlight
17
+ colors
18
+ - Updated dependencies
19
+
3
20
  ## 12.1.23
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/editor-commands/color.js CHANGED
@@ -4,11 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.getActiveColor = void 0;
7
+ exports.isMultiHighlightColorSelection = exports.getActiveColor = exports.MULTIPLE_HIGHLIGHT_COLORS_SELECTED = void 0;
8
8
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
9
  var _mark = require("@atlaskit/editor-common/mark");
10
10
  var _state = require("@atlaskit/editor-prosemirror/state");
11
11
  var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
12
+ /**
13
+ * Value returned by `getActiveColor` when the selection spans more than one
14
+ * distinct highlight (background) color. Callers can compare against this to
15
+ * detect a multi-color selection.
16
+ */
17
+ var MULTIPLE_HIGHLIGHT_COLORS_SELECTED = exports.MULTIPLE_HIGHLIGHT_COLORS_SELECTED = 'multiple';
12
18
  var getAllUniqueBackgroundColorMarksInRange = function getAllUniqueBackgroundColorMarksInRange(from, to, tr) {
13
19
  var doc = tr.doc;
14
20
  var backgroundColor = doc.type.schema.marks.backgroundColor;
@@ -48,7 +54,7 @@ var getAllUniqueBackgroundColorMarksInCellSelection = function getAllUniqueBackg
48
54
  var getColorFromCellSelection = function getColorFromCellSelection(selection, tr) {
49
55
  var marks = getAllUniqueBackgroundColorMarksInCellSelection(selection, tr);
50
56
  if (marks.length > 1) {
51
- return 'multiple';
57
+ return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
52
58
  }
53
59
  var firstColorMark = marks.at(0);
54
60
  if (!firstColorMark) {
@@ -74,7 +80,7 @@ var getColorFromCellSelection = function getColorFromCellSelection(selection, tr
74
80
  var getColorFromRange = function getColorFromRange(from, to, tr) {
75
81
  var marks = getAllUniqueBackgroundColorMarksInRange(from, to, tr);
76
82
  if (marks.length > 1) {
77
- return 'multiple';
83
+ return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
78
84
  }
79
85
  var firstColorMark = marks.at(0);
80
86
  if (firstColorMark && (0, _mark.entireSelectionContainsMark)(firstColorMark, tr.doc, from, to)) {
@@ -103,4 +109,26 @@ var getActiveColor = exports.getActiveColor = function getActiveColor(tr) {
103
109
  color = getColorFromRange(selection.from, selection.to, tr);
104
110
  }
105
111
  return color;
112
+ };
113
+
114
+ /**
115
+ * Returns true when the selection contains two or more distinct highlight colors,
116
+ * counting unmarked text as the default transparent highlight.
117
+ */
118
+ var isMultiHighlightColorSelection = exports.isMultiHighlightColorSelection = function isMultiHighlightColorSelection(_ref) {
119
+ var selection = _ref.selection,
120
+ doc = _ref.doc;
121
+ if (!(selection instanceof _state.TextSelection)) {
122
+ return false;
123
+ }
124
+ var backgroundColor = doc.type.schema.marks.backgroundColor;
125
+ var colors = new Set();
126
+ doc.nodesBetween(selection.from, selection.to, function (node) {
127
+ if (node.isText) {
128
+ var _mark$attrs$color2;
129
+ var mark = backgroundColor.isInSet(node.marks);
130
+ colors.add((_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : 'default');
131
+ }
132
+ });
133
+ return colors.size > 1;
106
134
  };
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -8,7 +8,6 @@ exports.highlightPluginKey = exports.createPlugin = exports.HighlightPluginActio
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
10
10
  var _uiColor = require("@atlaskit/editor-common/ui-color");
11
- var _textBackgroundColor = require("@atlaskit/editor-palette/text-background-color");
12
11
  var _state = require("@atlaskit/editor-prosemirror/state");
13
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
13
  var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
@@ -24,11 +23,20 @@ var HighlightPluginAction = exports.HighlightPluginAction = /*#__PURE__*/functio
24
23
  }({});
25
24
  var DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
26
25
  var getActiveColorInNonActiveTheme = function getActiveColorInNonActiveTheme(color) {
27
- if (!color) {
28
- return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)("var(--ds-surface, #FFFFFF)", DEFAULT_BACKGROUND_COLOR);
29
- }
30
- var colorValue = (0, _textBackgroundColor.hexToEditorTextBackgroundPaletteColor)(color) || color;
31
- return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)(colorValue, color);
26
+ return (0, _uiColor.getHighlightColorInNonActiveTheme)(color, {
27
+ defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
28
+ });
29
+ };
30
+ var getColorAccessibilityState = function getColorAccessibilityState(activeColor, tr) {
31
+ var isMultiHighlightColor = activeColor === _color.MULTIPLE_HIGHLIGHT_COLORS_SELECTED || (0, _color.isMultiHighlightColorSelection)(tr);
32
+ return {
33
+ // When the selection spans multiple highlight colors, `activeColor` is the
34
+ // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
35
+ // Passing it through would resolve the literal sentinel as a color, so fall
36
+ // back to the neutral default instead.
37
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
38
+ isMultiHighlightColor: isMultiHighlightColor
39
+ };
32
40
  };
33
41
  var createPlugin = exports.createPlugin = function createPlugin(_ref) {
34
42
  var api = _ref.api;
@@ -41,7 +49,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
41
49
  disabled: (0, _disabled.getDisabledState)(editorState),
42
50
  isPaletteOpen: false
43
51
  }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
44
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null)
52
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
53
+ isMultiHighlightColor: (0, _color.isMultiHighlightColorSelection)(editorState)
45
54
  });
46
55
  },
47
56
  apply: function apply(tr, pluginState, _oldState, newState) {
@@ -54,7 +63,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
54
63
  return _objectSpread(_objectSpread({}, pluginState), {}, {
55
64
  activeColor: color
56
65
  }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
57
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color)
66
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color),
67
+ isMultiHighlightColor: false
58
68
  });
59
69
  case HighlightPluginAction.SET_PALETTE:
60
70
  var _tr$getMeta3 = tr.getMeta(highlightPluginKey),
@@ -64,12 +74,13 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
64
74
  });
65
75
  default:
66
76
  var activeColor = (0, _color.getActiveColor)(tr);
77
+ var colorAccessibilityState =
78
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
79
+ (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (activeColor !== pluginState.activeColor || tr.selectionSet || !tr.selection.empty && tr.docChanged) ? getColorAccessibilityState(activeColor, tr) : {};
67
80
  return _objectSpread(_objectSpread({}, pluginState), {}, {
68
81
  activeColor: activeColor,
69
82
  disabled: (0, _disabled.getDisabledState)(newState)
70
- }, 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) && {
71
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(activeColor)
72
- });
83
+ }, colorAccessibilityState);
73
84
  }
74
85
  }
75
86
  }
package/dist/es2019/editor-commands/color.js CHANGED
@@ -1,6 +1,13 @@
1
1
  import { entireSelectionContainsMark } from '@atlaskit/editor-common/mark';
2
2
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
3
3
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
4
+
5
+ /**
6
+ * Value returned by `getActiveColor` when the selection spans more than one
7
+ * distinct highlight (background) color. Callers can compare against this to
8
+ * detect a multi-color selection.
9
+ */
10
+ export const MULTIPLE_HIGHLIGHT_COLORS_SELECTED = 'multiple';
4
11
  const getAllUniqueBackgroundColorMarksInRange = (from, to, tr) => {
5
12
  const {
6
13
  doc
@@ -44,7 +51,7 @@ const getAllUniqueBackgroundColorMarksInCellSelection = (selection, tr) => {
44
51
  const getColorFromCellSelection = (selection, tr) => {
45
52
  const marks = getAllUniqueBackgroundColorMarksInCellSelection(selection, tr);
46
53
  if (marks.length > 1) {
47
- return 'multiple';
54
+ return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
48
55
  }
49
56
  const firstColorMark = marks.at(0);
50
57
  if (!firstColorMark) {
@@ -70,7 +77,7 @@ const getColorFromCellSelection = (selection, tr) => {
70
77
  const getColorFromRange = (from, to, tr) => {
71
78
  const marks = getAllUniqueBackgroundColorMarksInRange(from, to, tr);
72
79
  if (marks.length > 1) {
73
- return 'multiple';
80
+ return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
74
81
  }
75
82
  const firstColorMark = marks.at(0);
76
83
  if (firstColorMark && entireSelectionContainsMark(firstColorMark, tr.doc, from, to)) {
@@ -101,4 +108,29 @@ export const getActiveColor = tr => {
101
108
  color = getColorFromRange(selection.from, selection.to, tr);
102
109
  }
103
110
  return color;
111
+ };
112
+
113
+ /**
114
+ * Returns true when the selection contains two or more distinct highlight colors,
115
+ * counting unmarked text as the default transparent highlight.
116
+ */
117
+ export const isMultiHighlightColorSelection = ({
118
+ selection,
119
+ doc
120
+ }) => {
121
+ if (!(selection instanceof TextSelection)) {
122
+ return false;
123
+ }
124
+ const {
125
+ backgroundColor
126
+ } = doc.type.schema.marks;
127
+ const colors = new Set();
128
+ doc.nodesBetween(selection.from, selection.to, node => {
129
+ if (node.isText) {
130
+ var _mark$attrs$color2;
131
+ const mark = backgroundColor.isInSet(node.marks);
132
+ colors.add((_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : 'default');
133
+ }
134
+ });
135
+ return colors.size > 1;
104
136
  };
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import { getTokenCSSVariableValueForNonActiveTheme } from '@atlaskit/editor-common/ui-color';
3
- import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette/text-background-color';
2
+ import { getHighlightColorInNonActiveTheme } from '@atlaskit/editor-common/ui-color';
4
3
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
5
4
  import { fg } from '@atlaskit/platform-feature-flags';
6
5
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
7
- import { getActiveColor } from '../editor-commands/color';
6
+ import { getActiveColor, isMultiHighlightColorSelection, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
8
7
  import { getDisabledState } from '../editor-commands/disabled';
9
8
  export const highlightPluginKey = new PluginKey('highlight');
10
9
  export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
@@ -13,12 +12,19 @@ export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction)
13
12
  return HighlightPluginAction;
14
13
  }({});
15
14
  const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
16
- const getActiveColorInNonActiveTheme = color => {
17
- if (!color) {
18
- return getTokenCSSVariableValueForNonActiveTheme("var(--ds-surface, #FFFFFF)", DEFAULT_BACKGROUND_COLOR);
19
- }
20
- const colorValue = hexToEditorTextBackgroundPaletteColor(color) || color;
21
- return getTokenCSSVariableValueForNonActiveTheme(colorValue, color);
15
+ const getActiveColorInNonActiveTheme = color => getHighlightColorInNonActiveTheme(color, {
16
+ defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
17
+ });
18
+ const getColorAccessibilityState = (activeColor, tr) => {
19
+ const isMultiHighlightColor = activeColor === MULTIPLE_HIGHLIGHT_COLORS_SELECTED || isMultiHighlightColorSelection(tr);
20
+ return {
21
+ // When the selection spans multiple highlight colors, `activeColor` is the
22
+ // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
23
+ // Passing it through would resolve the literal sentinel as a color, so fall
24
+ // back to the neutral default instead.
25
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
26
+ isMultiHighlightColor
27
+ };
22
28
  };
23
29
  export const createPlugin = ({
24
30
  api
@@ -32,7 +38,8 @@ export const createPlugin = ({
32
38
  isPaletteOpen: false,
33
39
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
34
40
  ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
35
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null)
41
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
42
+ isMultiHighlightColor: isMultiHighlightColorSelection(editorState)
36
43
  })
37
44
  }),
38
45
  apply: (tr, pluginState, _oldState, newState) => {
@@ -48,7 +55,8 @@ export const createPlugin = ({
48
55
  activeColor: color,
49
56
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
50
57
  ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
51
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color)
58
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color),
59
+ isMultiHighlightColor: false
52
60
  })
53
61
  };
54
62
  case HighlightPluginAction.SET_PALETTE:
@@ -61,14 +69,14 @@ export const createPlugin = ({
61
69
  };
62
70
  default:
63
71
  const activeColor = getActiveColor(tr);
72
+ const colorAccessibilityState =
73
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
74
+ fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (activeColor !== pluginState.activeColor || tr.selectionSet || !tr.selection.empty && tr.docChanged) ? getColorAccessibilityState(activeColor, tr) : {};
64
75
  return {
65
76
  ...pluginState,
66
77
  activeColor,
67
78
  disabled: getDisabledState(newState),
68
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning
69
- ...(activeColor !== pluginState.activeColor && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
70
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(activeColor)
71
- })
79
+ ...colorAccessibilityState
72
80
  };
73
81
  }
74
82
  }
package/dist/esm/editor-commands/color.js CHANGED
@@ -2,6 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import { entireSelectionContainsMark } from '@atlaskit/editor-common/mark';
3
3
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
4
4
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
5
+
6
+ /**
7
+ * Value returned by `getActiveColor` when the selection spans more than one
8
+ * distinct highlight (background) color. Callers can compare against this to
9
+ * detect a multi-color selection.
10
+ */
11
+ export var MULTIPLE_HIGHLIGHT_COLORS_SELECTED = 'multiple';
5
12
  var getAllUniqueBackgroundColorMarksInRange = function getAllUniqueBackgroundColorMarksInRange(from, to, tr) {
6
13
  var doc = tr.doc;
7
14
  var backgroundColor = doc.type.schema.marks.backgroundColor;
@@ -41,7 +48,7 @@ var getAllUniqueBackgroundColorMarksInCellSelection = function getAllUniqueBackg
41
48
  var getColorFromCellSelection = function getColorFromCellSelection(selection, tr) {
42
49
  var marks = getAllUniqueBackgroundColorMarksInCellSelection(selection, tr);
43
50
  if (marks.length > 1) {
44
- return 'multiple';
51
+ return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
45
52
  }
46
53
  var firstColorMark = marks.at(0);
47
54
  if (!firstColorMark) {
@@ -67,7 +74,7 @@ var getColorFromCellSelection = function getColorFromCellSelection(selection, tr
67
74
  var getColorFromRange = function getColorFromRange(from, to, tr) {
68
75
  var marks = getAllUniqueBackgroundColorMarksInRange(from, to, tr);
69
76
  if (marks.length > 1) {
70
- return 'multiple';
77
+ return MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
71
78
  }
72
79
  var firstColorMark = marks.at(0);
73
80
  if (firstColorMark && entireSelectionContainsMark(firstColorMark, tr.doc, from, to)) {
@@ -96,4 +103,26 @@ export var getActiveColor = function getActiveColor(tr) {
96
103
  color = getColorFromRange(selection.from, selection.to, tr);
97
104
  }
98
105
  return color;
106
+ };
107
+
108
+ /**
109
+ * Returns true when the selection contains two or more distinct highlight colors,
110
+ * counting unmarked text as the default transparent highlight.
111
+ */
112
+ export var isMultiHighlightColorSelection = function isMultiHighlightColorSelection(_ref) {
113
+ var selection = _ref.selection,
114
+ doc = _ref.doc;
115
+ if (!(selection instanceof TextSelection)) {
116
+ return false;
117
+ }
118
+ var backgroundColor = doc.type.schema.marks.backgroundColor;
119
+ var colors = new Set();
120
+ doc.nodesBetween(selection.from, selection.to, function (node) {
121
+ if (node.isText) {
122
+ var _mark$attrs$color2;
123
+ var mark = backgroundColor.isInSet(node.marks);
124
+ colors.add((_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : 'default');
125
+ }
126
+ });
127
+ return colors.size > 1;
99
128
  };
package/dist/esm/pm-plugins/main.js CHANGED
@@ -2,12 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  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; }
3
3
  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; }
4
4
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
5
- import { getTokenCSSVariableValueForNonActiveTheme } from '@atlaskit/editor-common/ui-color';
6
- import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette/text-background-color';
5
+ import { getHighlightColorInNonActiveTheme } from '@atlaskit/editor-common/ui-color';
7
6
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
8
7
  import { fg } from '@atlaskit/platform-feature-flags';
9
8
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
10
- import { getActiveColor } from '../editor-commands/color';
9
+ import { getActiveColor, isMultiHighlightColorSelection, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
11
10
  import { getDisabledState } from '../editor-commands/disabled';
12
11
  export var highlightPluginKey = new PluginKey('highlight');
13
12
  export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
@@ -17,11 +16,20 @@ export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction)
17
16
  }({});
18
17
  var DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
19
18
  var getActiveColorInNonActiveTheme = function getActiveColorInNonActiveTheme(color) {
20
- if (!color) {
21
- return getTokenCSSVariableValueForNonActiveTheme("var(--ds-surface, #FFFFFF)", DEFAULT_BACKGROUND_COLOR);
22
- }
23
- var colorValue = hexToEditorTextBackgroundPaletteColor(color) || color;
24
- return getTokenCSSVariableValueForNonActiveTheme(colorValue, color);
19
+ return getHighlightColorInNonActiveTheme(color, {
20
+ defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
21
+ });
22
+ };
23
+ var getColorAccessibilityState = function getColorAccessibilityState(activeColor, tr) {
24
+ var isMultiHighlightColor = activeColor === MULTIPLE_HIGHLIGHT_COLORS_SELECTED || isMultiHighlightColorSelection(tr);
25
+ return {
26
+ // When the selection spans multiple highlight colors, `activeColor` is the
27
+ // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
28
+ // Passing it through would resolve the literal sentinel as a color, so fall
29
+ // back to the neutral default instead.
30
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
31
+ isMultiHighlightColor: isMultiHighlightColor
32
+ };
25
33
  };
26
34
  export var createPlugin = function createPlugin(_ref) {
27
35
  var api = _ref.api;
@@ -34,7 +42,8 @@ export var createPlugin = function createPlugin(_ref) {
34
42
  disabled: getDisabledState(editorState),
35
43
  isPaletteOpen: false
36
44
  }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
37
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null)
45
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
46
+ isMultiHighlightColor: isMultiHighlightColorSelection(editorState)
38
47
  });
39
48
  },
40
49
  apply: function apply(tr, pluginState, _oldState, newState) {
@@ -47,7 +56,8 @@ export var createPlugin = function createPlugin(_ref) {
47
56
  return _objectSpread(_objectSpread({}, pluginState), {}, {
48
57
  activeColor: color
49
58
  }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
50
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color)
59
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color),
60
+ isMultiHighlightColor: false
51
61
  });
52
62
  case HighlightPluginAction.SET_PALETTE:
53
63
  var _tr$getMeta3 = tr.getMeta(highlightPluginKey),
@@ -57,12 +67,13 @@ export var createPlugin = function createPlugin(_ref) {
57
67
  });
58
68
  default:
59
69
  var activeColor = getActiveColor(tr);
70
+ var colorAccessibilityState =
71
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
72
+ fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (activeColor !== pluginState.activeColor || tr.selectionSet || !tr.selection.empty && tr.docChanged) ? getColorAccessibilityState(activeColor, tr) : {};
60
73
  return _objectSpread(_objectSpread({}, pluginState), {}, {
61
74
  activeColor: activeColor,
62
75
  disabled: getDisabledState(newState)
63
- }, activeColor !== pluginState.activeColor && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
64
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(activeColor)
65
- });
76
+ }, colorAccessibilityState);
66
77
  }
67
78
  }
68
79
  }
package/dist/types/editor-commands/color.d.ts CHANGED
@@ -1,2 +1,13 @@
1
- import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
1
+ import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
2
+ /**
3
+ * Value returned by `getActiveColor` when the selection spans more than one
4
+ * distinct highlight (background) color. Callers can compare against this to
5
+ * detect a multi-color selection.
6
+ */
7
+ export declare const MULTIPLE_HIGHLIGHT_COLORS_SELECTED = "multiple";
2
8
  export declare const getActiveColor: (tr: Transaction | ReadonlyTransaction) => string | null;
9
+ /**
10
+ * Returns true when the selection contains two or more distinct highlight colors,
11
+ * counting unmarked text as the default transparent highlight.
12
+ */
13
+ export declare const isMultiHighlightColorSelection: ({ selection, doc, }: EditorState | Transaction | ReadonlyTransaction) => boolean;
package/dist/types/pm-plugins/main.d.ts CHANGED
@@ -7,6 +7,11 @@ export type HighlightPluginState = {
7
7
  activeColor: string | null;
8
8
  activeColorInNonActiveTheme?: string;
9
9
  disabled: boolean;
10
+ /**
11
+ * True when the current selection spans more than one highlight color. Only
12
+ * populated behind the lovability text/bg color patch gate + experiment.
13
+ */
14
+ isMultiHighlightColor?: boolean;
10
15
  isPaletteOpen: boolean;
11
16
  };
12
17
  export declare enum HighlightPluginAction {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "12.1.23",
3
+ "version": "12.1.25",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,19 +35,19 @@
35
35
  "@atlaskit/editor-prosemirror": "^8.0.0",
36
36
  "@atlaskit/editor-shared-styles": "^4.0.0",
37
37
  "@atlaskit/editor-tables": "^3.0.0",
38
- "@atlaskit/editor-toolbar": "^2.1.0",
38
+ "@atlaskit/editor-toolbar": "^2.2.0",
39
39
  "@atlaskit/editor-toolbar-model": "^1.1.0",
40
40
  "@atlaskit/heading": "^6.2.0",
41
41
  "@atlaskit/icon": "^37.0.0",
42
42
  "@atlaskit/platform-feature-flags": "^2.0.0",
43
- "@atlaskit/primitives": "^20.5.0",
44
- "@atlaskit/tmp-editor-statsig": "^124.1.0",
45
- "@atlaskit/tokens": "^15.5.0",
43
+ "@atlaskit/primitives": "^20.6.0",
44
+ "@atlaskit/tmp-editor-statsig": "^124.9.0",
45
+ "@atlaskit/tokens": "^15.8.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1"
48
48
  },
49
49
  "peerDependencies": {
50
- "@atlaskit/editor-common": "^116.25.0",
50
+ "@atlaskit/editor-common": "^116.30.0",
51
51
  "react": "^18.2.0",
52
52
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
53
53
  },