@atlaskit/editor-plugin-highlight 12.0.2 → 12.1.0

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 (14) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/editor-commands/change-color.js +5 -2
  3. package/dist/cjs/pm-plugins/keymap.js +3 -1
  4. package/dist/cjs/ui/HighlightColorMenuItem.js +18 -13
  5. package/dist/cjs/ui/shared/PaletteDropdown.js +15 -5
  6. package/dist/es2019/editor-commands/change-color.js +6 -3
  7. package/dist/es2019/pm-plugins/keymap.js +5 -3
  8. package/dist/es2019/ui/HighlightColorMenuItem.js +18 -13
  9. package/dist/es2019/ui/shared/PaletteDropdown.js +16 -6
  10. package/dist/esm/editor-commands/change-color.js +6 -3
  11. package/dist/esm/pm-plugins/keymap.js +5 -3
  12. package/dist/esm/ui/HighlightColorMenuItem.js +19 -14
  13. package/dist/esm/ui/shared/PaletteDropdown.js +16 -6
  14. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 12.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`1498129c7eef2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1498129c7eef2) -
8
+ [EDITOR-7591] adds updated text color and highlight color palettes behind the
9
+ `platform_editor_lovability_text_bg_color` experiment
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 12.0.2
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/editor-commands/change-color.js CHANGED
@@ -7,6 +7,7 @@ exports.changeColor = void 0;
7
7
  var _analytics = require("@atlaskit/editor-common/analytics");
8
8
  var _mark = require("@atlaskit/editor-common/mark");
9
9
  var _uiColor = require("@atlaskit/editor-common/ui-color");
10
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
10
11
  var _main = require("../pm-plugins/main");
11
12
  var _color = require("./color");
12
13
  var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI) {
@@ -43,12 +44,14 @@ var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI)
43
44
  var createAnalyticsEvent = function createAnalyticsEvent(color, inputMethod, tr) {
44
45
  var _getActiveColor;
45
46
  var previousColor = (_getActiveColor = (0, _color.getActiveColor)(tr)) !== null && _getActiveColor !== void 0 ? _getActiveColor : _uiColor.REMOVE_HIGHLIGHT_COLOR;
47
+ var highlightPalette = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? _uiColor.highlightColorPaletteNew : _uiColor.highlightColorPalette;
48
+
46
49
  // get color names from palette
47
- var newColorFromPalette = _uiColor.highlightColorPalette.find(function (_ref3) {
50
+ var newColorFromPalette = highlightPalette.find(function (_ref3) {
48
51
  var value = _ref3.value;
49
52
  return value === color;
50
53
  });
51
- var previousColorFromPalette = _uiColor.highlightColorPalette.find(function (_ref4) {
54
+ var previousColorFromPalette = highlightPalette.find(function (_ref4) {
52
55
  var value = _ref4.value;
53
56
  return value === previousColor;
54
57
  });
package/dist/cjs/pm-plugins/keymap.js CHANGED
@@ -8,6 +8,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
8
8
  var _keymaps = require("@atlaskit/editor-common/keymaps");
9
9
  var _preset = require("@atlaskit/editor-common/preset");
10
10
  var _uiColor = require("@atlaskit/editor-common/ui-color");
11
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
11
12
  var _changeColor = require("../editor-commands/change-color");
12
13
  var _palette = require("../editor-commands/palette");
13
14
  function keymapPlugin(_ref) {
@@ -27,7 +28,8 @@ function keymapPlugin(_ref) {
27
28
  }), list);
28
29
  }
29
30
  var analyticsApi = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
30
- var color = _uiColor.highlightColorPalette.find(function (_ref2) {
31
+ var highlightPalette = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? _uiColor.highlightColorPaletteNew : _uiColor.highlightColorPalette;
32
+ var color = highlightPalette.find(function (_ref2) {
31
33
  var label = _ref2.label;
32
34
  return label === 'Yellow';
33
35
  });
package/dist/cjs/ui/HighlightColorMenuItem.js CHANGED
@@ -27,13 +27,14 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
27
27
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
28
28
  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; }
29
29
  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; }
30
+ var HIGHLIGHT_COLOR_PICKER_COLUMNS = 10;
30
31
  var styles = {
31
32
  container: "_zulp12x7 _19pkpxbi",
32
33
  removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x",
33
34
  icon: "_1e0c1o8l _18u01n1a"
34
35
  };
35
- var getTextColorIconColor = function getTextColorIconColor(defaultColor, textColor) {
36
- if (!(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
36
+ var getTextColorIconColor = function getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled) {
37
+ if (!isNewColorPaletteEnabled) {
37
38
  return "var(--ds-icon, #292A2E)";
38
39
  }
39
40
  if (!textColor || defaultColor && textColor === defaultColor) {
@@ -70,6 +71,8 @@ function HighlightColorMenuItem(_ref2) {
70
71
  textColor = _useSelectedTextColor.textColor,
71
72
  defaultColor = _useSelectedTextColor.defaultColor;
72
73
  var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
74
+ var isNewColorPaletteEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true);
75
+ var selectedColor = activeColor || (isNewColorPaletteEnabled ? _uiColor.REMOVE_HIGHLIGHT_COLOR : null);
73
76
  var handleHighlightColorChange = (0, _react.useCallback)(function (color, event) {
74
77
  var _api$highlight;
75
78
  if (api !== null && api !== void 0 && (_api$highlight = api.highlight) !== null && _api$highlight !== void 0 && (_api$highlight = _api$highlight.commands) !== null && _api$highlight !== void 0 && _api$highlight.changeColor) {
@@ -77,18 +80,19 @@ function HighlightColorMenuItem(_ref2) {
77
80
  color: color,
78
81
  inputMethod: (0, _toolbar.getInputMethodFromParentKeys)(parents)
79
82
  }));
80
- if (!(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
83
+ if (!isNewColorPaletteEnabled) {
81
84
  closeMenu === null || closeMenu === void 0 || closeMenu(event);
82
85
  }
83
86
  }
84
- }, [api, closeMenu, parents]);
87
+ }, [api, closeMenu, isNewColorPaletteEnabled, parents]);
85
88
  var colorPalette = (0, _react.useMemo)(function () {
86
89
  var isSelected = function isSelected(color) {
87
- return color.value === activeColor;
90
+ return color.value === selectedColor;
88
91
  };
89
- var iconColor = getTextColorIconColor(defaultColor, textColor);
90
- return _uiColor.highlightColorPalette.filter(function (color) {
91
- return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
92
+ var iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
93
+ var highlightPalette = isNewColorPaletteEnabled ? _uiColor.highlightColorPaletteNew : _uiColor.highlightColorPalette;
94
+ return highlightPalette.filter(function (color) {
95
+ return isNewColorPaletteEnabled || color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
92
96
  }).map(function (color) {
93
97
  return _objectSpread(_objectSpread({}, color), {}, {
94
98
  decorator: /*#__PURE__*/React.createElement(TextColorIconDecorator, {
@@ -98,19 +102,20 @@ function HighlightColorMenuItem(_ref2) {
98
102
  })
99
103
  });
100
104
  });
101
- }, [activeColor, defaultColor, textColor]);
105
+ }, [defaultColor, textColor, isNewColorPaletteEnabled, selectedColor]);
102
106
  return /*#__PURE__*/React.createElement(_compiled.Stack, {
103
107
  xcss: styles.container,
104
108
  testId: "highlight-color-menu-item"
105
109
  }, /*#__PURE__*/React.createElement(_heading.default, {
106
110
  size: "xxsmall"
107
- }, formatMessage(_messages.highlightMessages.highlight)), /*#__PURE__*/React.createElement(_editorToolbar.ColorPalette
108
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
109
- , {
111
+ }, formatMessage(_messages.highlightMessages.highlight)), /*#__PURE__*/React.createElement(_editorToolbar.ColorPalette, {
112
+ cols: isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined
113
+ // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
114
+ ,
110
115
  onClick: function onClick(color, _, event) {
111
116
  handleHighlightColorChange(color, event);
112
117
  },
113
- selectedColor: activeColor || null
118
+ selectedColor: selectedColor
114
119
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
115
120
  ,
116
121
  paletteOptions: {
package/dist/cjs/ui/shared/PaletteDropdown.js CHANGED
@@ -10,7 +10,9 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
10
10
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
11
11
  var _editorPalette = require("@atlaskit/editor-palette");
12
12
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
13
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
13
14
  var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
15
+ var HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW = 10;
14
16
  var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props) {
15
17
  var popupsMountPoint = props.popupsMountPoint,
16
18
  popupsBoundariesElement = props.popupsBoundariesElement,
@@ -22,11 +24,19 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
22
24
  isOpenedByKeyboard = props.isOpenedByKeyboard,
23
25
  handleClickOutside = props.handleClickOutside,
24
26
  handleEscapeKeydown = props.handleEscapeKeydown;
27
+ var isNewColorPaletteEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true);
28
+ var highlightPalette = isNewColorPaletteEnabled ? _uiColor.highlightColorPaletteNew : _uiColor.highlightColorPalette;
29
+ var colorPickerColumns = isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW : HIGHLIGHT_COLOR_PICKER_COLUMNS;
25
30
 
26
31
  // pixels, used to determine where to horizontally position the dropdown when space is limited
27
32
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
28
- var fitWidth = 274;
29
- var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.highlightColorPalette, activeColor, HIGHLIGHT_COLOR_PICKER_COLUMNS),
33
+ var fitWidth = isNewColorPaletteEnabled ? 338 : 274;
34
+ // 8 cols: 272 = (32 * 8) + (8 + 8)
35
+ // 10 cols: 336 = (32 * 10) + (8 + 8)
36
+ // Not sure where the extra 2px comes from
37
+
38
+ var selectedColor = activeColor || (isNewColorPaletteEnabled ? _uiColor.REMOVE_HIGHLIGHT_COLOR : null);
39
+ var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(highlightPalette, selectedColor, colorPickerColumns),
30
40
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
31
41
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
32
42
  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
@@ -52,13 +62,13 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
52
62
  }, /*#__PURE__*/_react.default.createElement("div", {
53
63
  "data-testid": "highlight-color-palette"
54
64
  }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
55
- cols: HIGHLIGHT_COLOR_PICKER_COLUMNS,
65
+ cols: colorPickerColumns,
56
66
  onClick: onColorChange,
57
- selectedColor: activeColor
67
+ selectedColor: selectedColor
58
68
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
59
69
  ,
60
70
  paletteOptions: {
61
- palette: _uiColor.highlightColorPalette,
71
+ palette: highlightPalette,
62
72
  hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
63
73
  }
64
74
  })));
package/dist/es2019/editor-commands/change-color.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
2
  import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
3
- import { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
3
+ import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, highlightColorPaletteNew } from '@atlaskit/editor-common/ui-color';
4
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
5
6
  import { getActiveColor } from './color';
6
7
  export const changeColor = editorAnalyticsAPI => ({
@@ -37,11 +38,13 @@ export const changeColor = editorAnalyticsAPI => ({
37
38
  const createAnalyticsEvent = (color, inputMethod, tr) => {
38
39
  var _getActiveColor;
39
40
  const previousColor = (_getActiveColor = getActiveColor(tr)) !== null && _getActiveColor !== void 0 ? _getActiveColor : REMOVE_HIGHLIGHT_COLOR;
41
+ const highlightPalette = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? highlightColorPaletteNew : highlightColorPalette;
42
+
40
43
  // get color names from palette
41
- const newColorFromPalette = highlightColorPalette.find(({
44
+ const newColorFromPalette = highlightPalette.find(({
42
45
  value
43
46
  }) => value === color);
44
- const previousColorFromPalette = highlightColorPalette.find(({
47
+ const previousColorFromPalette = highlightPalette.find(({
45
48
  value
46
49
  }) => value === previousColor);
47
50
  const newColorLabel = newColorFromPalette ? newColorFromPalette.label : color;
package/dist/es2019/pm-plugins/keymap.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
- import { bindKeymapWithCommand, keymap, toggleHighlightPalette, applyYellowHighlight } from '@atlaskit/editor-common/keymaps';
2
+ import { applyYellowHighlight, bindKeymapWithCommand, keymap, toggleHighlightPalette } from '@atlaskit/editor-common/keymaps';
3
3
  import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
4
- import { highlightColorPalette } from '@atlaskit/editor-common/ui-color';
4
+ import { highlightColorPalette, highlightColorPaletteNew } from '@atlaskit/editor-common/ui-color';
5
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
6
  import { changeColor } from '../editor-commands/change-color';
6
7
  import { togglePalette } from '../editor-commands/palette';
7
8
  export function keymapPlugin({
@@ -22,7 +23,8 @@ export function keymapPlugin({
22
23
  }), list);
23
24
  }
24
25
  const analyticsApi = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
25
- const color = highlightColorPalette.find(({
26
+ const highlightPalette = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? highlightColorPaletteNew : highlightColorPalette;
27
+ const color = highlightPalette.find(({
26
28
  label
27
29
  }) => label === 'Yellow');
28
30
  if (color) {
package/dist/es2019/ui/HighlightColorMenuItem.js CHANGED
@@ -6,7 +6,7 @@ import { useCallback, useMemo } from 'react';
6
6
  import { useIntl } from 'react-intl';
7
7
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
8
8
  import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
9
- import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, useSelectedTextColor } from '@atlaskit/editor-common/ui-color';
9
+ import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, highlightColorPaletteNew, useSelectedTextColor } from '@atlaskit/editor-common/ui-color';
10
10
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
11
11
  import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
12
12
  import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
@@ -15,13 +15,14 @@ import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
15
15
  import Icon from '@atlaskit/icon/core/text-style';
16
16
  import { Stack, Box } from '@atlaskit/primitives/compiled';
17
17
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
18
+ const HIGHLIGHT_COLOR_PICKER_COLUMNS = 10;
18
19
  const styles = {
19
20
  container: "_zulp12x7 _19pkpxbi",
20
21
  removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x",
21
22
  icon: "_1e0c1o8l _18u01n1a"
22
23
  };
23
- const getTextColorIconColor = (defaultColor, textColor) => {
24
- if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
24
+ const getTextColorIconColor = (defaultColor, textColor, isNewColorPaletteEnabled) => {
25
+ if (!isNewColorPaletteEnabled) {
25
26
  return "var(--ds-icon, #292A2E)";
26
27
  }
27
28
  if (!textColor || defaultColor && textColor === defaultColor) {
@@ -62,6 +63,8 @@ export function HighlightColorMenuItem({
62
63
  defaultColor
63
64
  } = useSelectedTextColor();
64
65
  const closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
66
+ const isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
67
+ const selectedColor = activeColor || (isNewColorPaletteEnabled ? REMOVE_HIGHLIGHT_COLOR : null);
65
68
  const handleHighlightColorChange = useCallback((color, event) => {
66
69
  var _api$highlight, _api$highlight$comman;
67
70
  if (api !== null && api !== void 0 && (_api$highlight = api.highlight) !== null && _api$highlight !== void 0 && (_api$highlight$comman = _api$highlight.commands) !== null && _api$highlight$comman !== void 0 && _api$highlight$comman.changeColor) {
@@ -69,15 +72,16 @@ export function HighlightColorMenuItem({
69
72
  color,
70
73
  inputMethod: getInputMethodFromParentKeys(parents)
71
74
  }));
72
- if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
75
+ if (!isNewColorPaletteEnabled) {
73
76
  closeMenu === null || closeMenu === void 0 ? void 0 : closeMenu(event);
74
77
  }
75
78
  }
76
- }, [api, closeMenu, parents]);
79
+ }, [api, closeMenu, isNewColorPaletteEnabled, parents]);
77
80
  const colorPalette = useMemo(() => {
78
- const isSelected = color => color.value === activeColor;
79
- const iconColor = getTextColorIconColor(defaultColor, textColor);
80
- return highlightColorPalette.filter(color => color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
81
+ const isSelected = color => color.value === selectedColor;
82
+ const iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
83
+ const highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
84
+ return highlightPalette.filter(color => isNewColorPaletteEnabled || color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
81
85
  ...color,
82
86
  decorator: /*#__PURE__*/React.createElement(TextColorIconDecorator, {
83
87
  label: color.label,
@@ -85,19 +89,20 @@ export function HighlightColorMenuItem({
85
89
  iconColor: iconColor
86
90
  })
87
91
  }));
88
- }, [activeColor, defaultColor, textColor]);
92
+ }, [defaultColor, textColor, isNewColorPaletteEnabled, selectedColor]);
89
93
  return /*#__PURE__*/React.createElement(Stack, {
90
94
  xcss: styles.container,
91
95
  testId: "highlight-color-menu-item"
92
96
  }, /*#__PURE__*/React.createElement(Heading, {
93
97
  size: "xxsmall"
94
- }, formatMessage(messages.highlight)), /*#__PURE__*/React.createElement(ColorPalette
95
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
96
- , {
98
+ }, formatMessage(messages.highlight)), /*#__PURE__*/React.createElement(ColorPalette, {
99
+ cols: isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined
100
+ // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
101
+ ,
97
102
  onClick: (color, _, event) => {
98
103
  handleHighlightColorChange(color, event);
99
104
  },
100
- selectedColor: activeColor || null
105
+ selectedColor: selectedColor
101
106
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
102
107
  ,
103
108
  paletteOptions: {
package/dist/es2019/ui/shared/PaletteDropdown.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
- import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
2
+ import { ColorPalette, REMOVE_HIGHLIGHT_COLOR, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteNew } from '@atlaskit/editor-common/ui-color';
3
3
  import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
4
4
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
5
5
  import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
6
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
7
  const HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
8
+ const HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW = 10;
7
9
  export const PaletteDropdown = props => {
8
10
  const {
9
11
  popupsMountPoint,
@@ -17,14 +19,22 @@ export const PaletteDropdown = props => {
17
19
  handleClickOutside,
18
20
  handleEscapeKeydown
19
21
  } = props;
22
+ const isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
23
+ const highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
24
+ const colorPickerColumns = isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW : HIGHLIGHT_COLOR_PICKER_COLUMNS;
20
25
 
21
26
  // pixels, used to determine where to horizontally position the dropdown when space is limited
22
27
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
23
- const fitWidth = 274;
28
+ const fitWidth = isNewColorPaletteEnabled ? 338 : 274;
29
+ // 8 cols: 272 = (32 * 8) + (8 + 8)
30
+ // 10 cols: 336 = (32 * 10) + (8 + 8)
31
+ // Not sure where the extra 2px comes from
32
+
33
+ const selectedColor = activeColor || (isNewColorPaletteEnabled ? REMOVE_HIGHLIGHT_COLOR : null);
24
34
  const {
25
35
  selectedRowIndex,
26
36
  selectedColumnIndex
27
- } = getSelectedRowAndColumnFromPalette(highlightColorPalette, activeColor, HIGHLIGHT_COLOR_PICKER_COLUMNS);
37
+ } = getSelectedRowAndColumnFromPalette(highlightPalette, selectedColor, colorPickerColumns);
28
38
  return /*#__PURE__*/React.createElement(Dropdown, {
29
39
  mountTo: popupsMountPoint,
30
40
  boundariesElement: popupsBoundariesElement,
@@ -48,13 +58,13 @@ export const PaletteDropdown = props => {
48
58
  }, /*#__PURE__*/React.createElement("div", {
49
59
  "data-testid": "highlight-color-palette"
50
60
  }, /*#__PURE__*/React.createElement(ColorPalette, {
51
- cols: HIGHLIGHT_COLOR_PICKER_COLUMNS,
61
+ cols: colorPickerColumns,
52
62
  onClick: onColorChange,
53
- selectedColor: activeColor
63
+ selectedColor: selectedColor
54
64
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
55
65
  ,
56
66
  paletteOptions: {
57
- palette: highlightColorPalette,
67
+ palette: highlightPalette,
58
68
  hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
59
69
  }
60
70
  })));
package/dist/esm/editor-commands/change-color.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
2
2
  import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
3
- import { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
3
+ import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, highlightColorPaletteNew } from '@atlaskit/editor-common/ui-color';
4
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
5
6
  import { getActiveColor } from './color';
6
7
  export var changeColor = function changeColor(editorAnalyticsAPI) {
@@ -37,12 +38,14 @@ export var changeColor = function changeColor(editorAnalyticsAPI) {
37
38
  var createAnalyticsEvent = function createAnalyticsEvent(color, inputMethod, tr) {
38
39
  var _getActiveColor;
39
40
  var previousColor = (_getActiveColor = getActiveColor(tr)) !== null && _getActiveColor !== void 0 ? _getActiveColor : REMOVE_HIGHLIGHT_COLOR;
41
+ var highlightPalette = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? highlightColorPaletteNew : highlightColorPalette;
42
+
40
43
  // get color names from palette
41
- var newColorFromPalette = highlightColorPalette.find(function (_ref3) {
44
+ var newColorFromPalette = highlightPalette.find(function (_ref3) {
42
45
  var value = _ref3.value;
43
46
  return value === color;
44
47
  });
45
- var previousColorFromPalette = highlightColorPalette.find(function (_ref4) {
48
+ var previousColorFromPalette = highlightPalette.find(function (_ref4) {
46
49
  var value = _ref4.value;
47
50
  return value === previousColor;
48
51
  });
package/dist/esm/pm-plugins/keymap.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
- import { bindKeymapWithCommand, keymap, toggleHighlightPalette, applyYellowHighlight } from '@atlaskit/editor-common/keymaps';
2
+ import { applyYellowHighlight, bindKeymapWithCommand, keymap, toggleHighlightPalette } from '@atlaskit/editor-common/keymaps';
3
3
  import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
4
- import { highlightColorPalette } from '@atlaskit/editor-common/ui-color';
4
+ import { highlightColorPalette, highlightColorPaletteNew } from '@atlaskit/editor-common/ui-color';
5
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
6
  import { changeColor } from '../editor-commands/change-color';
6
7
  import { togglePalette } from '../editor-commands/palette';
7
8
  export function keymapPlugin(_ref) {
@@ -21,7 +22,8 @@ export function keymapPlugin(_ref) {
21
22
  }), list);
22
23
  }
23
24
  var analyticsApi = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
24
- var color = highlightColorPalette.find(function (_ref2) {
25
+ var highlightPalette = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? highlightColorPaletteNew : highlightColorPalette;
26
+ var color = highlightPalette.find(function (_ref2) {
25
27
  var label = _ref2.label;
26
28
  return label === 'Yellow';
27
29
  });
package/dist/esm/ui/HighlightColorMenuItem.js CHANGED
@@ -9,7 +9,7 @@ import { useCallback, useMemo } from 'react';
9
9
  import { useIntl } from 'react-intl';
10
10
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
11
11
  import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
12
- import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, useSelectedTextColor } from '@atlaskit/editor-common/ui-color';
12
+ import { REMOVE_HIGHLIGHT_COLOR, highlightColorPalette, highlightColorPaletteNew, useSelectedTextColor } from '@atlaskit/editor-common/ui-color';
13
13
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
14
14
  import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
15
15
  import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
@@ -18,13 +18,14 @@ import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
18
18
  import Icon from '@atlaskit/icon/core/text-style';
19
19
  import { Stack, Box } from '@atlaskit/primitives/compiled';
20
20
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
21
+ var HIGHLIGHT_COLOR_PICKER_COLUMNS = 10;
21
22
  var styles = {
22
23
  container: "_zulp12x7 _19pkpxbi",
23
24
  removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x",
24
25
  icon: "_1e0c1o8l _18u01n1a"
25
26
  };
26
- var getTextColorIconColor = function getTextColorIconColor(defaultColor, textColor) {
27
- if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
27
+ var getTextColorIconColor = function getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled) {
28
+ if (!isNewColorPaletteEnabled) {
28
29
  return "var(--ds-icon, #292A2E)";
29
30
  }
30
31
  if (!textColor || defaultColor && textColor === defaultColor) {
@@ -61,6 +62,8 @@ export function HighlightColorMenuItem(_ref2) {
61
62
  textColor = _useSelectedTextColor.textColor,
62
63
  defaultColor = _useSelectedTextColor.defaultColor;
63
64
  var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
65
+ var isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
66
+ var selectedColor = activeColor || (isNewColorPaletteEnabled ? REMOVE_HIGHLIGHT_COLOR : null);
64
67
  var handleHighlightColorChange = useCallback(function (color, event) {
65
68
  var _api$highlight;
66
69
  if (api !== null && api !== void 0 && (_api$highlight = api.highlight) !== null && _api$highlight !== void 0 && (_api$highlight = _api$highlight.commands) !== null && _api$highlight !== void 0 && _api$highlight.changeColor) {
@@ -68,18 +71,19 @@ export function HighlightColorMenuItem(_ref2) {
68
71
  color: color,
69
72
  inputMethod: getInputMethodFromParentKeys(parents)
70
73
  }));
71
- if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
74
+ if (!isNewColorPaletteEnabled) {
72
75
  closeMenu === null || closeMenu === void 0 || closeMenu(event);
73
76
  }
74
77
  }
75
- }, [api, closeMenu, parents]);
78
+ }, [api, closeMenu, isNewColorPaletteEnabled, parents]);
76
79
  var colorPalette = useMemo(function () {
77
80
  var isSelected = function isSelected(color) {
78
- return color.value === activeColor;
81
+ return color.value === selectedColor;
79
82
  };
80
- var iconColor = getTextColorIconColor(defaultColor, textColor);
81
- return highlightColorPalette.filter(function (color) {
82
- return color.value !== REMOVE_HIGHLIGHT_COLOR;
83
+ var iconColor = getTextColorIconColor(defaultColor, textColor, isNewColorPaletteEnabled);
84
+ var highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
85
+ return highlightPalette.filter(function (color) {
86
+ return isNewColorPaletteEnabled || color.value !== REMOVE_HIGHLIGHT_COLOR;
83
87
  }).map(function (color) {
84
88
  return _objectSpread(_objectSpread({}, color), {}, {
85
89
  decorator: /*#__PURE__*/React.createElement(TextColorIconDecorator, {
@@ -89,19 +93,20 @@ export function HighlightColorMenuItem(_ref2) {
89
93
  })
90
94
  });
91
95
  });
92
- }, [activeColor, defaultColor, textColor]);
96
+ }, [defaultColor, textColor, isNewColorPaletteEnabled, selectedColor]);
93
97
  return /*#__PURE__*/React.createElement(Stack, {
94
98
  xcss: styles.container,
95
99
  testId: "highlight-color-menu-item"
96
100
  }, /*#__PURE__*/React.createElement(Heading, {
97
101
  size: "xxsmall"
98
- }, formatMessage(messages.highlight)), /*#__PURE__*/React.createElement(ColorPalette
99
- // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
100
- , {
102
+ }, formatMessage(messages.highlight)), /*#__PURE__*/React.createElement(ColorPalette, {
103
+ cols: isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined
104
+ // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
105
+ ,
101
106
  onClick: function onClick(color, _, event) {
102
107
  handleHighlightColorChange(color, event);
103
108
  },
104
- selectedColor: activeColor || null
109
+ selectedColor: selectedColor
105
110
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
106
111
  ,
107
112
  paletteOptions: {
package/dist/esm/ui/shared/PaletteDropdown.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
- import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
2
+ import { ColorPalette, REMOVE_HIGHLIGHT_COLOR, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteNew } from '@atlaskit/editor-common/ui-color';
3
3
  import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
4
4
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
5
5
  import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
6
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
7
  var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
8
+ var HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW = 10;
7
9
  export var PaletteDropdown = function PaletteDropdown(props) {
8
10
  var popupsMountPoint = props.popupsMountPoint,
9
11
  popupsBoundariesElement = props.popupsBoundariesElement,
@@ -15,11 +17,19 @@ export var PaletteDropdown = function PaletteDropdown(props) {
15
17
  isOpenedByKeyboard = props.isOpenedByKeyboard,
16
18
  handleClickOutside = props.handleClickOutside,
17
19
  handleEscapeKeydown = props.handleEscapeKeydown;
20
+ var isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
21
+ var highlightPalette = isNewColorPaletteEnabled ? highlightColorPaletteNew : highlightColorPalette;
22
+ var colorPickerColumns = isNewColorPaletteEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS_NEW : HIGHLIGHT_COLOR_PICKER_COLUMNS;
18
23
 
19
24
  // pixels, used to determine where to horizontally position the dropdown when space is limited
20
25
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
21
- var fitWidth = 274;
22
- var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(highlightColorPalette, activeColor, HIGHLIGHT_COLOR_PICKER_COLUMNS),
26
+ var fitWidth = isNewColorPaletteEnabled ? 338 : 274;
27
+ // 8 cols: 272 = (32 * 8) + (8 + 8)
28
+ // 10 cols: 336 = (32 * 10) + (8 + 8)
29
+ // Not sure where the extra 2px comes from
30
+
31
+ var selectedColor = activeColor || (isNewColorPaletteEnabled ? REMOVE_HIGHLIGHT_COLOR : null);
32
+ var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(highlightPalette, selectedColor, colorPickerColumns),
23
33
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
24
34
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
25
35
  return /*#__PURE__*/React.createElement(Dropdown, {
@@ -45,13 +55,13 @@ export var PaletteDropdown = function PaletteDropdown(props) {
45
55
  }, /*#__PURE__*/React.createElement("div", {
46
56
  "data-testid": "highlight-color-palette"
47
57
  }, /*#__PURE__*/React.createElement(ColorPalette, {
48
- cols: HIGHLIGHT_COLOR_PICKER_COLUMNS,
58
+ cols: colorPickerColumns,
49
59
  onClick: onColorChange,
50
- selectedColor: activeColor
60
+ selectedColor: selectedColor
51
61
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
52
62
  ,
53
63
  paletteOptions: {
54
- palette: highlightColorPalette,
64
+ palette: highlightPalette,
55
65
  hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
56
66
  }
57
67
  })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "12.0.2",
3
+ "version": "12.1.0",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,9 +24,9 @@
24
24
  ],
25
25
  "atlaskit:src": "src/index.ts",
26
26
  "dependencies": {
27
- "@atlaskit/adf-schema": "^55.0.0",
27
+ "@atlaskit/adf-schema": "^55.2.0",
28
28
  "@atlaskit/css": "^1.0.0",
29
- "@atlaskit/editor-palette": "^3.0.0",
29
+ "@atlaskit/editor-palette": "^3.1.0",
30
30
  "@atlaskit/editor-plugin-analytics": "^12.0.0",
31
31
  "@atlaskit/editor-plugin-primary-toolbar": "^13.0.0",
32
32
  "@atlaskit/editor-plugin-selection-toolbar": "^13.0.0",
@@ -41,13 +41,13 @@
41
41
  "@atlaskit/icon": "^36.0.0",
42
42
  "@atlaskit/platform-feature-flags": "^2.0.0",
43
43
  "@atlaskit/primitives": "^20.0.0",
44
- "@atlaskit/tmp-editor-statsig": "^106.0.0",
44
+ "@atlaskit/tmp-editor-statsig": "^107.1.0",
45
45
  "@atlaskit/tokens": "^14.0.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.2.0",
50
+ "@atlaskit/editor-common": "^116.3.0",
51
51
  "react": "^18.2.0",
52
52
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
53
53
  },