@atlaskit/editor-plugin-highlight 12.1.24 → 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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## 12.1.24
4
12
 
5
13
  ### Patch Changes
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.getActiveColor = exports.MULTIPLE_HIGHLIGHT_COLORS_SELECTED = 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");
@@ -109,4 +109,26 @@ var getActiveColor = exports.getActiveColor = function getActiveColor(tr) {
109
109
  color = getColorFromRange(selection.from, selection.to, tr);
110
110
  }
111
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;
112
134
  };
@@ -27,6 +27,17 @@ var getActiveColorInNonActiveTheme = function getActiveColorInNonActiveTheme(col
27
27
  defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
28
28
  });
29
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
+ };
40
+ };
30
41
  var createPlugin = exports.createPlugin = function createPlugin(_ref) {
31
42
  var api = _ref.api;
32
43
  return new _safePlugin.SafePlugin({
@@ -39,7 +50,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
39
50
  isPaletteOpen: false
40
51
  }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
41
52
  activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
42
- isMultiHighlightColor: false
53
+ isMultiHighlightColor: (0, _color.isMultiHighlightColorSelection)(editorState)
43
54
  });
44
55
  },
45
56
  apply: function apply(tr, pluginState, _oldState, newState) {
@@ -63,18 +74,13 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
63
74
  });
64
75
  default:
65
76
  var activeColor = (0, _color.getActiveColor)(tr);
66
- var isMultiHighlightColor = activeColor === _color.MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
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
- // When the selection spans multiple highlight colors, `activeColor` is the
72
- // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
73
- // Passing it through would resolve the literal sentinel as a color, so fall
74
- // back to the neutral default instead.
75
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
76
- isMultiHighlightColor: isMultiHighlightColor
77
- });
83
+ }, colorAccessibilityState);
78
84
  }
79
85
  }
80
86
  }
@@ -108,4 +108,29 @@ export const getActiveColor = tr => {
108
108
  color = getColorFromRange(selection.from, selection.to, tr);
109
109
  }
110
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;
111
136
  };
@@ -3,7 +3,7 @@ import { getHighlightColorInNonActiveTheme } from '@atlaskit/editor-common/ui-co
3
3
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
4
4
  import { fg } from '@atlaskit/platform-feature-flags';
5
5
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
6
- import { getActiveColor, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
6
+ import { getActiveColor, isMultiHighlightColorSelection, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
7
7
  import { getDisabledState } from '../editor-commands/disabled';
8
8
  export const highlightPluginKey = new PluginKey('highlight');
9
9
  export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
@@ -15,6 +15,17 @@ const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
15
15
  const getActiveColorInNonActiveTheme = color => getHighlightColorInNonActiveTheme(color, {
16
16
  defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
17
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
+ };
28
+ };
18
29
  export const createPlugin = ({
19
30
  api
20
31
  }) => {
@@ -28,7 +39,7 @@ export const createPlugin = ({
28
39
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
29
40
  ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
30
41
  activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
31
- isMultiHighlightColor: false
42
+ isMultiHighlightColor: isMultiHighlightColorSelection(editorState)
32
43
  })
33
44
  }),
34
45
  apply: (tr, pluginState, _oldState, newState) => {
@@ -58,20 +69,14 @@ export const createPlugin = ({
58
69
  };
59
70
  default:
60
71
  const activeColor = getActiveColor(tr);
61
- const isMultiHighlightColor = activeColor === MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
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) : {};
62
75
  return {
63
76
  ...pluginState,
64
77
  activeColor,
65
78
  disabled: getDisabledState(newState),
66
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning
67
- ...(activeColor !== pluginState.activeColor && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
68
- // When the selection spans multiple highlight colors, `activeColor` is the
69
- // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
70
- // Passing it through would resolve the literal sentinel as a color, so fall
71
- // back to the neutral default instead.
72
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
73
- isMultiHighlightColor
74
- })
79
+ ...colorAccessibilityState
75
80
  };
76
81
  }
77
82
  }
@@ -103,4 +103,26 @@ export var getActiveColor = function getActiveColor(tr) {
103
103
  color = getColorFromRange(selection.from, selection.to, tr);
104
104
  }
105
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;
106
128
  };
@@ -6,7 +6,7 @@ import { getHighlightColorInNonActiveTheme } from '@atlaskit/editor-common/ui-co
6
6
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
8
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
9
- import { getActiveColor, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
9
+ import { getActiveColor, isMultiHighlightColorSelection, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
10
10
  import { getDisabledState } from '../editor-commands/disabled';
11
11
  export var highlightPluginKey = new PluginKey('highlight');
12
12
  export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
@@ -20,6 +20,17 @@ var getActiveColorInNonActiveTheme = function getActiveColorInNonActiveTheme(col
20
20
  defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
21
21
  });
22
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
+ };
33
+ };
23
34
  export var createPlugin = function createPlugin(_ref) {
24
35
  var api = _ref.api;
25
36
  return new SafePlugin({
@@ -32,7 +43,7 @@ export var createPlugin = function createPlugin(_ref) {
32
43
  isPaletteOpen: false
33
44
  }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
34
45
  activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
35
- isMultiHighlightColor: false
46
+ isMultiHighlightColor: isMultiHighlightColorSelection(editorState)
36
47
  });
37
48
  },
38
49
  apply: function apply(tr, pluginState, _oldState, newState) {
@@ -56,18 +67,13 @@ export var createPlugin = function createPlugin(_ref) {
56
67
  });
57
68
  default:
58
69
  var activeColor = getActiveColor(tr);
59
- var isMultiHighlightColor = activeColor === MULTIPLE_HIGHLIGHT_COLORS_SELECTED;
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
- // When the selection spans multiple highlight colors, `activeColor` is the
65
- // `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
66
- // Passing it through would resolve the literal sentinel as a color, so fall
67
- // back to the neutral default instead.
68
- activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
69
- isMultiHighlightColor: isMultiHighlightColor
70
- });
76
+ }, colorAccessibilityState);
71
77
  }
72
78
  }
73
79
  }
@@ -1,4 +1,4 @@
1
- import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
1
+ import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
2
2
  /**
3
3
  * Value returned by `getActiveColor` when the selection spans more than one
4
4
  * distinct highlight (background) color. Callers can compare against this to
@@ -6,3 +6,8 @@ import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemir
6
6
  */
7
7
  export declare const MULTIPLE_HIGHLIGHT_COLORS_SELECTED = "multiple";
8
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "12.1.24",
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",
@@ -41,13 +41,13 @@
41
41
  "@atlaskit/icon": "^37.0.0",
42
42
  "@atlaskit/platform-feature-flags": "^2.0.0",
43
43
  "@atlaskit/primitives": "^20.6.0",
44
- "@atlaskit/tmp-editor-statsig": "^124.1.0",
45
- "@atlaskit/tokens": "^15.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.26.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
  },