@atlaskit/editor-plugin-highlight 12.1.18 → 12.1.19

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.19
4
+
5
+ ### Patch Changes
6
+
7
+ - [`74b3e15fed77e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/74b3e15fed77e) -
8
+ Check editor text and highlight color accessibility against both light and dark theme variants.
9
+ - Updated dependencies
10
+
3
11
  ## 12.1.18
4
12
 
5
13
  ### Patch Changes
@@ -7,7 +7,11 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.highlightPluginKey = exports.createPlugin = exports.HighlightPluginAction = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
10
+ var _uiColor = require("@atlaskit/editor-common/ui-color");
11
+ var _textBackgroundColor = require("@atlaskit/editor-palette/text-background-color");
10
12
  var _state = require("@atlaskit/editor-prosemirror/state");
13
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
11
15
  var _color = require("../editor-commands/color");
12
16
  var _disabled = require("../editor-commands/disabled");
13
17
  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; }
@@ -18,17 +22,27 @@ var HighlightPluginAction = exports.HighlightPluginAction = /*#__PURE__*/functio
18
22
  HighlightPluginAction[HighlightPluginAction["SET_PALETTE"] = 1] = "SET_PALETTE";
19
23
  return HighlightPluginAction;
20
24
  }({});
25
+ var DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
26
+ 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);
32
+ };
21
33
  var createPlugin = exports.createPlugin = function createPlugin(_ref) {
22
34
  var api = _ref.api;
23
35
  return new _safePlugin.SafePlugin({
24
36
  key: highlightPluginKey,
25
37
  state: {
26
38
  init: function init(_, editorState) {
27
- return {
39
+ return _objectSpread({
28
40
  activeColor: null,
29
41
  disabled: (0, _disabled.getDisabledState)(editorState),
30
42
  isPaletteOpen: false
31
- };
43
+ }, (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)
45
+ });
32
46
  },
33
47
  apply: function apply(tr, pluginState, _oldState, newState) {
34
48
  var _tr$getMeta;
@@ -39,6 +53,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
39
53
  color = _tr$getMeta2.color;
40
54
  return _objectSpread(_objectSpread({}, pluginState), {}, {
41
55
  activeColor: color
56
+ }, (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)
42
58
  });
43
59
  case HighlightPluginAction.SET_PALETTE:
44
60
  var _tr$getMeta3 = tr.getMeta(highlightPluginKey),
@@ -47,9 +63,12 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
47
63
  isPaletteOpen: isPaletteOpen
48
64
  });
49
65
  default:
66
+ var activeColor = (0, _color.getActiveColor)(tr);
50
67
  return _objectSpread(_objectSpread({}, pluginState), {}, {
51
- activeColor: (0, _color.getActiveColor)(tr),
68
+ activeColor: activeColor,
52
69
  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)
53
72
  });
54
73
  }
55
74
  }
@@ -1,5 +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
4
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
6
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
3
7
  import { getActiveColor } from '../editor-commands/color';
4
8
  import { getDisabledState } from '../editor-commands/disabled';
5
9
  export const highlightPluginKey = new PluginKey('highlight');
@@ -8,6 +12,14 @@ export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction)
8
12
  HighlightPluginAction[HighlightPluginAction["SET_PALETTE"] = 1] = "SET_PALETTE";
9
13
  return HighlightPluginAction;
10
14
  }({});
15
+ 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);
22
+ };
11
23
  export const createPlugin = ({
12
24
  api
13
25
  }) => {
@@ -17,7 +29,11 @@ export const createPlugin = ({
17
29
  init: (_, editorState) => ({
18
30
  activeColor: null,
19
31
  disabled: getDisabledState(editorState),
20
- isPaletteOpen: false
32
+ isPaletteOpen: false,
33
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
34
+ ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
35
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null)
36
+ })
21
37
  }),
22
38
  apply: (tr, pluginState, _oldState, newState) => {
23
39
  var _tr$getMeta;
@@ -29,7 +45,11 @@ export const createPlugin = ({
29
45
  } = tr.getMeta(highlightPluginKey);
30
46
  return {
31
47
  ...pluginState,
32
- activeColor: color
48
+ activeColor: color,
49
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
50
+ ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
51
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color)
52
+ })
33
53
  };
34
54
  case HighlightPluginAction.SET_PALETTE:
35
55
  const {
@@ -40,10 +60,15 @@ export const createPlugin = ({
40
60
  isPaletteOpen
41
61
  };
42
62
  default:
63
+ const activeColor = getActiveColor(tr);
43
64
  return {
44
65
  ...pluginState,
45
- activeColor: getActiveColor(tr),
46
- disabled: getDisabledState(newState)
66
+ activeColor,
67
+ 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
+ })
47
72
  };
48
73
  }
49
74
  }
@@ -2,7 +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
7
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
9
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
6
10
  import { getActiveColor } from '../editor-commands/color';
7
11
  import { getDisabledState } from '../editor-commands/disabled';
8
12
  export var highlightPluginKey = new PluginKey('highlight');
@@ -11,17 +15,27 @@ export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction)
11
15
  HighlightPluginAction[HighlightPluginAction["SET_PALETTE"] = 1] = "SET_PALETTE";
12
16
  return HighlightPluginAction;
13
17
  }({});
18
+ var DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
19
+ 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);
25
+ };
14
26
  export var createPlugin = function createPlugin(_ref) {
15
27
  var api = _ref.api;
16
28
  return new SafePlugin({
17
29
  key: highlightPluginKey,
18
30
  state: {
19
31
  init: function init(_, editorState) {
20
- return {
32
+ return _objectSpread({
21
33
  activeColor: null,
22
34
  disabled: getDisabledState(editorState),
23
35
  isPaletteOpen: false
24
- };
36
+ }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
37
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null)
38
+ });
25
39
  },
26
40
  apply: function apply(tr, pluginState, _oldState, newState) {
27
41
  var _tr$getMeta;
@@ -32,6 +46,8 @@ export var createPlugin = function createPlugin(_ref) {
32
46
  color = _tr$getMeta2.color;
33
47
  return _objectSpread(_objectSpread({}, pluginState), {}, {
34
48
  activeColor: color
49
+ }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
50
+ activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(color)
35
51
  });
36
52
  case HighlightPluginAction.SET_PALETTE:
37
53
  var _tr$getMeta3 = tr.getMeta(highlightPluginKey),
@@ -40,9 +56,12 @@ export var createPlugin = function createPlugin(_ref) {
40
56
  isPaletteOpen: isPaletteOpen
41
57
  });
42
58
  default:
59
+ var activeColor = getActiveColor(tr);
43
60
  return _objectSpread(_objectSpread({}, pluginState), {}, {
44
- activeColor: getActiveColor(tr),
61
+ activeColor: activeColor,
45
62
  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)
46
65
  });
47
66
  }
48
67
  }
@@ -5,6 +5,7 @@ import type { HighlightPlugin } from '../highlightPluginType';
5
5
  export declare const highlightPluginKey: PluginKey<HighlightPluginState>;
6
6
  export type HighlightPluginState = {
7
7
  activeColor: string | null;
8
+ activeColorInNonActiveTheme?: string;
8
9
  disabled: boolean;
9
10
  isPaletteOpen: boolean;
10
11
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "12.1.18",
3
+ "version": "12.1.19",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,7 +24,7 @@
24
24
  ],
25
25
  "atlaskit:src": "src/index.ts",
26
26
  "dependencies": {
27
- "@atlaskit/adf-schema": "^56.0.0",
27
+ "@atlaskit/adf-schema": "^56.1.0",
28
28
  "@atlaskit/css": "^1.0.0",
29
29
  "@atlaskit/editor-palette": "^3.1.0",
30
30
  "@atlaskit/editor-plugin-analytics": "^12.0.0",
@@ -40,14 +40,14 @@
40
40
  "@atlaskit/heading": "^6.1.0",
41
41
  "@atlaskit/icon": "^36.2.0",
42
42
  "@atlaskit/platform-feature-flags": "^2.0.0",
43
- "@atlaskit/primitives": "^20.3.0",
44
- "@atlaskit/tmp-editor-statsig": "^121.0.0",
43
+ "@atlaskit/primitives": "^20.4.0",
44
+ "@atlaskit/tmp-editor-statsig": "^121.2.0",
45
45
  "@atlaskit/tokens": "^15.4.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.22.0",
50
+ "@atlaskit/editor-common": "^116.23.0",
51
51
  "react": "^18.2.0",
52
52
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
53
53
  },
@@ -102,6 +102,9 @@
102
102
  },
103
103
  "platform_editor_use_preferences_plugin": {
104
104
  "type": "boolean"
105
+ },
106
+ "platform_editor_lovability_text_bg_color_patch_1": {
107
+ "type": "boolean"
105
108
  }
106
109
  },
107
110
  "devDependencies": {