@atlaskit/editor-plugin-highlight 3.0.3 → 3.0.5

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 (11) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/pm-plugins/keymap.js +14 -9
  3. package/dist/cjs/ui/FloatingToolbarHighlightColor.js +9 -19
  4. package/dist/cjs/ui/shared/PaletteDropdown.js +20 -12
  5. package/dist/es2019/pm-plugins/keymap.js +14 -10
  6. package/dist/es2019/ui/FloatingToolbarHighlightColor.js +12 -18
  7. package/dist/es2019/ui/shared/PaletteDropdown.js +22 -14
  8. package/dist/esm/pm-plugins/keymap.js +15 -10
  9. package/dist/esm/ui/FloatingToolbarHighlightColor.js +10 -20
  10. package/dist/esm/ui/shared/PaletteDropdown.js +21 -13
  11. package/package.json +7 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 3.0.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#185655](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185655)
8
+ [`3d2b715fc1fac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d2b715fc1fac) -
9
+ [ED-28416] clean up feature gate platform_editor_controls_patch_14
10
+
11
+ ## 3.0.4
12
+
13
+ ### Patch Changes
14
+
15
+ - [#185643](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185643)
16
+ [`5954e6c1fbac5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5954e6c1fbac5) -
17
+ [ux] [ED-28432] Add orange highlight color and reorder color swatches
18
+ - Updated dependencies
19
+
3
20
  ## 3.0.3
4
21
 
5
22
  ### Patch Changes
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) {
@@ -24,19 +25,23 @@ function keymapPlugin(_ref) {
24
25
  inputMethod: _analytics.INPUT_METHOD.SHORTCUT
25
26
  }), list);
26
27
  var analyticsApi = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
27
- // NOTE: This will work with fallback until we clean up `editor_text_highlight_orange_to_yellow`
28
- var color = _uiColor.highlightColorPalette.find(function (_ref2) {
28
+ var color = (0, _expValEquals.expValEquals)('platform_editor_add_orange_highlight_color', 'cohort', 'test') ? _uiColor.highlightColorPaletteNext.find(function (_ref2) {
29
29
  var label = _ref2.label;
30
30
  return label === 'Yellow';
31
+ }) : _uiColor.highlightColorPalette.find(function (_ref3) {
32
+ var label = _ref3.label;
33
+ return label === 'Yellow';
31
34
  }) || {
32
35
  value: '#fedec8'
33
36
  };
34
- (0, _keymaps.bindKeymapWithCommand)(
35
- // Ignored via go/ees005
36
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
37
- _keymaps.applyYellowHighlight.common, (0, _preset.editorCommandToPMCommand)((0, _changeColor.changeColor)(analyticsApi)({
38
- color: color.value,
39
- inputMethod: _analytics.INPUT_METHOD.SHORTCUT
40
- })), list);
37
+ if (color) {
38
+ (0, _keymaps.bindKeymapWithCommand)(
39
+ // Ignored via go/ees005
40
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
41
+ _keymaps.applyYellowHighlight.common, (0, _preset.editorCommandToPMCommand)((0, _changeColor.changeColor)(analyticsApi)({
42
+ color: color.value,
43
+ inputMethod: _analytics.INPUT_METHOD.SHORTCUT
44
+ })), list);
45
+ }
41
46
  return (0, _keymaps.keymap)(list);
42
47
  }
package/dist/cjs/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.FloatingToolbarHighlightColorWithIntl = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
8
  var _react = require("react");
10
9
  var _react2 = require("@emotion/react");
11
10
  var _reactIntlNext = require("react-intl-next");
@@ -62,27 +61,19 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
62
61
  formatMessage = _ref.intl.formatMessage,
63
62
  editorView = _ref.editorView;
64
63
  var toolbarItemRef = (0, _react.useRef)(null);
65
- var _useState = (0, _react.useState)(false),
66
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
67
- isDropdownOpenLocal = _useState2[0],
68
- setIsDropdownOpenLocal = _useState2[1];
69
64
  var _useSharedState = useSharedState(pluginInjectionApi),
70
65
  activeColor = _useSharedState.activeColor,
71
66
  disabled = _useSharedState.disabled,
72
67
  isPaletteOpen = _useSharedState.isPaletteOpen;
73
68
  var setDropdownOpen = function setDropdownOpen(isOpen) {
74
69
  var _pluginInjectionApi$a;
75
- if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_14')) {
76
- if (!disabled && editorView && pluginInjectionApi) {
77
- var state = editorView.state,
78
- dispatch = editorView.dispatch;
79
- (0, _palette.setPalette)(pluginInjectionApi)({
80
- isPaletteOpen: isOpen,
81
- inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
82
- })(state, dispatch);
83
- }
84
- } else {
85
- setIsDropdownOpenLocal(isOpen);
70
+ if (!disabled && editorView && pluginInjectionApi) {
71
+ var state = editorView.state,
72
+ dispatch = editorView.dispatch;
73
+ (0, _palette.setPalette)(pluginInjectionApi)({
74
+ isPaletteOpen: isOpen,
75
+ inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
76
+ })(state, dispatch);
86
77
  }
87
78
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.fireAnalyticsEvent({
88
79
  action: isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED,
@@ -94,8 +85,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
94
85
  }
95
86
  });
96
87
  };
97
- var isDropdownOpenShared = !!isPaletteOpen;
98
- var isDropdownOpen = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_14') ? isDropdownOpenShared : isDropdownOpenLocal;
88
+ var isDropdownOpen = !!isPaletteOpen;
99
89
  var _useDropdownEvents = (0, _useDropdownEvents2.useDropdownEvents)({
100
90
  toolbarItemRef: toolbarItemRef,
101
91
  setIsDropdownOpen: setDropdownOpen,
@@ -131,7 +121,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
131
121
  disabled: disabled,
132
122
  selected: isDropdownOpen,
133
123
  "aria-label": title,
134
- "aria-keyshortcuts": (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_14') ? (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleHighlightPalette) : undefined,
124
+ "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleHighlightPalette),
135
125
  "aria-expanded": isDropdownOpen,
136
126
  "aria-haspopup": true,
137
127
  title: title,
package/dist/cjs/ui/shared/PaletteDropdown.js CHANGED
@@ -11,8 +11,10 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
11
11
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
12
12
  var _editorPalette = require("@atlaskit/editor-palette");
13
13
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
14
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
14
15
  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; }
15
16
  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; }
17
+ var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
16
18
  var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props) {
17
19
  var popupsMountPoint = props.popupsMountPoint,
18
20
  popupsBoundariesElement = props.popupsBoundariesElement,
@@ -24,21 +26,26 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
24
26
  isOpenedByKeyboard = props.isOpenedByKeyboard,
25
27
  handleClickOutside = props.handleClickOutside,
26
28
  handleEscapeKeydown = props.handleEscapeKeydown;
29
+ var isOrangeHighlightEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_orange_highlight_color', 'cohort', 'test');
27
30
 
28
31
  // pixels, used to determine where to horizontally position the dropdown when space is limited
29
32
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
30
- var fitWidth = 242;
31
- var colorPalette = _uiColor.highlightColorPalette;
32
- colorPalette = _uiColor.highlightColorPalette.map(function (item) {
33
- if (item.label === 'Orange') {
34
- return _objectSpread(_objectSpread({}, item), {}, {
35
- label: 'Yellow',
36
- message: _uiColor.colorPaletteMessages.yellow
37
- });
38
- }
39
- return item;
40
- });
41
- var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(colorPalette, activeColor),
33
+ var fitWidth = isOrangeHighlightEnabled ? 274 : 242;
34
+ var colorPalette;
35
+ if (isOrangeHighlightEnabled) {
36
+ colorPalette = _uiColor.highlightColorPaletteNext;
37
+ } else {
38
+ colorPalette = _uiColor.highlightColorPalette.map(function (item) {
39
+ if (item.label === 'Orange') {
40
+ return _objectSpread(_objectSpread({}, item), {}, {
41
+ label: 'Yellow',
42
+ message: _uiColor.colorPaletteMessages.yellow
43
+ });
44
+ }
45
+ return item;
46
+ });
47
+ }
48
+ var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined),
42
49
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
43
50
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
44
51
  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
@@ -62,6 +69,7 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
62
69
  }, /*#__PURE__*/_react.default.createElement("div", {
63
70
  "data-testid": "highlight-color-palette"
64
71
  }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
72
+ cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
65
73
  onClick: onColorChange,
66
74
  selectedColor: activeColor,
67
75
  paletteOptions: {
package/dist/es2019/pm-plugins/keymap.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
2
  import { bindKeymapWithCommand, keymap, toggleHighlightPalette, applyYellowHighlight } 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, highlightColorPaletteNext } 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({
@@ -19,18 +20,21 @@ export function keymapPlugin({
19
20
  inputMethod: INPUT_METHOD.SHORTCUT
20
21
  }), list);
21
22
  const analyticsApi = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
22
- // NOTE: This will work with fallback until we clean up `editor_text_highlight_orange_to_yellow`
23
- const color = highlightColorPalette.find(({
23
+ const color = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test') ? highlightColorPaletteNext.find(({
24
+ label
25
+ }) => label === 'Yellow') : highlightColorPalette.find(({
24
26
  label
25
27
  }) => label === 'Yellow') || {
26
28
  value: '#fedec8'
27
29
  };
28
- bindKeymapWithCommand(
29
- // Ignored via go/ees005
30
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
31
- applyYellowHighlight.common, editorCommandToPMCommand(changeColor(analyticsApi)({
32
- color: color.value,
33
- inputMethod: INPUT_METHOD.SHORTCUT
34
- })), list);
30
+ if (color) {
31
+ bindKeymapWithCommand(
32
+ // Ignored via go/ees005
33
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
34
+ applyYellowHighlight.common, editorCommandToPMCommand(changeColor(analyticsApi)({
35
+ color: color.value,
36
+ inputMethod: INPUT_METHOD.SHORTCUT
37
+ })), list);
38
+ }
35
39
  return keymap(list);
36
40
  }
package/dist/es2019/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import { useRef, useState } from 'react';
5
+ import { useRef } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
@@ -57,7 +57,6 @@ const FloatingToolbarHighlightColor = ({
57
57
  editorView
58
58
  }) => {
59
59
  const toolbarItemRef = useRef(null);
60
- const [isDropdownOpenLocal, setIsDropdownOpenLocal] = useState(false);
61
60
  const {
62
61
  activeColor,
63
62
  disabled,
@@ -65,19 +64,15 @@ const FloatingToolbarHighlightColor = ({
65
64
  } = useSharedState(pluginInjectionApi);
66
65
  const setDropdownOpen = isOpen => {
67
66
  var _pluginInjectionApi$a;
68
- if (fg('platform_editor_controls_patch_14')) {
69
- if (!disabled && editorView && pluginInjectionApi) {
70
- const {
71
- state,
72
- dispatch
73
- } = editorView;
74
- setPalette(pluginInjectionApi)({
75
- isPaletteOpen: isOpen,
76
- inputMethod: INPUT_METHOD.FLOATING_TB
77
- })(state, dispatch);
78
- }
79
- } else {
80
- setIsDropdownOpenLocal(isOpen);
67
+ if (!disabled && editorView && pluginInjectionApi) {
68
+ const {
69
+ state,
70
+ dispatch
71
+ } = editorView;
72
+ setPalette(pluginInjectionApi)({
73
+ isPaletteOpen: isOpen,
74
+ inputMethod: INPUT_METHOD.FLOATING_TB
75
+ })(state, dispatch);
81
76
  }
82
77
  pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent({
83
78
  action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
@@ -89,8 +84,7 @@ const FloatingToolbarHighlightColor = ({
89
84
  }
90
85
  });
91
86
  };
92
- const isDropdownOpenShared = !!isPaletteOpen;
93
- const isDropdownOpen = fg('platform_editor_controls_patch_14') ? isDropdownOpenShared : isDropdownOpenLocal;
87
+ const isDropdownOpen = !!isPaletteOpen;
94
88
  const {
95
89
  handleClick,
96
90
  handleKeyDown,
@@ -127,7 +121,7 @@ const FloatingToolbarHighlightColor = ({
127
121
  disabled: disabled,
128
122
  selected: isDropdownOpen,
129
123
  "aria-label": title,
130
- "aria-keyshortcuts": fg('platform_editor_controls_patch_14') ? getAriaKeyshortcuts(toggleHighlightPalette) : undefined,
124
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
131
125
  "aria-expanded": isDropdownOpen,
132
126
  "aria-haspopup": true,
133
127
  title: title,
package/dist/es2019/ui/shared/PaletteDropdown.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import React from 'react';
2
- import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
2
+ import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteNext } 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';
7
+ const HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
6
8
  export const PaletteDropdown = props => {
7
9
  const {
8
10
  popupsMountPoint,
@@ -16,25 +18,30 @@ export const PaletteDropdown = props => {
16
18
  handleClickOutside,
17
19
  handleEscapeKeydown
18
20
  } = props;
21
+ const isOrangeHighlightEnabled = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test');
19
22
 
20
23
  // pixels, used to determine where to horizontally position the dropdown when space is limited
21
24
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
22
- const fitWidth = 242;
23
- let colorPalette = highlightColorPalette;
24
- colorPalette = highlightColorPalette.map(item => {
25
- if (item.label === 'Orange') {
26
- return {
27
- ...item,
28
- label: 'Yellow',
29
- message: colorPaletteMessages.yellow
30
- };
31
- }
32
- return item;
33
- });
25
+ const fitWidth = isOrangeHighlightEnabled ? 274 : 242;
26
+ let colorPalette;
27
+ if (isOrangeHighlightEnabled) {
28
+ colorPalette = highlightColorPaletteNext;
29
+ } else {
30
+ colorPalette = highlightColorPalette.map(item => {
31
+ if (item.label === 'Orange') {
32
+ return {
33
+ ...item,
34
+ label: 'Yellow',
35
+ message: colorPaletteMessages.yellow
36
+ };
37
+ }
38
+ return item;
39
+ });
40
+ }
34
41
  const {
35
42
  selectedRowIndex,
36
43
  selectedColumnIndex
37
- } = getSelectedRowAndColumnFromPalette(colorPalette, activeColor);
44
+ } = getSelectedRowAndColumnFromPalette(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined);
38
45
  return /*#__PURE__*/React.createElement(Dropdown, {
39
46
  mountTo: popupsMountPoint,
40
47
  boundariesElement: popupsBoundariesElement,
@@ -56,6 +63,7 @@ export const PaletteDropdown = props => {
56
63
  }, /*#__PURE__*/React.createElement("div", {
57
64
  "data-testid": "highlight-color-palette"
58
65
  }, /*#__PURE__*/React.createElement(ColorPalette, {
66
+ cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
59
67
  onClick: onColorChange,
60
68
  selectedColor: activeColor,
61
69
  paletteOptions: {
package/dist/esm/pm-plugins/keymap.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
2
  import { bindKeymapWithCommand, keymap, toggleHighlightPalette, applyYellowHighlight } 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, highlightColorPaletteNext } 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) {
@@ -18,19 +19,23 @@ export function keymapPlugin(_ref) {
18
19
  inputMethod: INPUT_METHOD.SHORTCUT
19
20
  }), list);
20
21
  var analyticsApi = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
21
- // NOTE: This will work with fallback until we clean up `editor_text_highlight_orange_to_yellow`
22
- var color = highlightColorPalette.find(function (_ref2) {
22
+ var color = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test') ? highlightColorPaletteNext.find(function (_ref2) {
23
23
  var label = _ref2.label;
24
24
  return label === 'Yellow';
25
+ }) : highlightColorPalette.find(function (_ref3) {
26
+ var label = _ref3.label;
27
+ return label === 'Yellow';
25
28
  }) || {
26
29
  value: '#fedec8'
27
30
  };
28
- bindKeymapWithCommand(
29
- // Ignored via go/ees005
30
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
31
- applyYellowHighlight.common, editorCommandToPMCommand(changeColor(analyticsApi)({
32
- color: color.value,
33
- inputMethod: INPUT_METHOD.SHORTCUT
34
- })), list);
31
+ if (color) {
32
+ bindKeymapWithCommand(
33
+ // Ignored via go/ees005
34
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
35
+ applyYellowHighlight.common, editorCommandToPMCommand(changeColor(analyticsApi)({
36
+ color: color.value,
37
+ inputMethod: INPUT_METHOD.SHORTCUT
38
+ })), list);
39
+ }
35
40
  return keymap(list);
36
41
  }
package/dist/esm/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -1,9 +1,8 @@
1
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
1
  /**
3
2
  * @jsxRuntime classic
4
3
  * @jsx jsx
5
4
  */
6
- import { useRef, useState } from 'react';
5
+ import { useRef } from 'react';
7
6
 
8
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
8
  import { css, jsx } from '@emotion/react';
@@ -54,27 +53,19 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
54
53
  formatMessage = _ref.intl.formatMessage,
55
54
  editorView = _ref.editorView;
56
55
  var toolbarItemRef = useRef(null);
57
- var _useState = useState(false),
58
- _useState2 = _slicedToArray(_useState, 2),
59
- isDropdownOpenLocal = _useState2[0],
60
- setIsDropdownOpenLocal = _useState2[1];
61
56
  var _useSharedState = useSharedState(pluginInjectionApi),
62
57
  activeColor = _useSharedState.activeColor,
63
58
  disabled = _useSharedState.disabled,
64
59
  isPaletteOpen = _useSharedState.isPaletteOpen;
65
60
  var setDropdownOpen = function setDropdownOpen(isOpen) {
66
61
  var _pluginInjectionApi$a;
67
- if (fg('platform_editor_controls_patch_14')) {
68
- if (!disabled && editorView && pluginInjectionApi) {
69
- var state = editorView.state,
70
- dispatch = editorView.dispatch;
71
- setPalette(pluginInjectionApi)({
72
- isPaletteOpen: isOpen,
73
- inputMethod: INPUT_METHOD.FLOATING_TB
74
- })(state, dispatch);
75
- }
76
- } else {
77
- setIsDropdownOpenLocal(isOpen);
62
+ if (!disabled && editorView && pluginInjectionApi) {
63
+ var state = editorView.state,
64
+ dispatch = editorView.dispatch;
65
+ setPalette(pluginInjectionApi)({
66
+ isPaletteOpen: isOpen,
67
+ inputMethod: INPUT_METHOD.FLOATING_TB
68
+ })(state, dispatch);
78
69
  }
79
70
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.fireAnalyticsEvent({
80
71
  action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
@@ -86,8 +77,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
86
77
  }
87
78
  });
88
79
  };
89
- var isDropdownOpenShared = !!isPaletteOpen;
90
- var isDropdownOpen = fg('platform_editor_controls_patch_14') ? isDropdownOpenShared : isDropdownOpenLocal;
80
+ var isDropdownOpen = !!isPaletteOpen;
91
81
  var _useDropdownEvents = useDropdownEvents({
92
82
  toolbarItemRef: toolbarItemRef,
93
83
  setIsDropdownOpen: setDropdownOpen,
@@ -123,7 +113,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
123
113
  disabled: disabled,
124
114
  selected: isDropdownOpen,
125
115
  "aria-label": title,
126
- "aria-keyshortcuts": fg('platform_editor_controls_patch_14') ? getAriaKeyshortcuts(toggleHighlightPalette) : undefined,
116
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
127
117
  "aria-expanded": isDropdownOpen,
128
118
  "aria-haspopup": true,
129
119
  title: title,
package/dist/esm/ui/shared/PaletteDropdown.js CHANGED
@@ -2,10 +2,12 @@ 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 React from 'react';
5
- import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
5
+ import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
6
6
  import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
7
7
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
8
8
  import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
9
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
+ var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
9
11
  export var PaletteDropdown = function PaletteDropdown(props) {
10
12
  var popupsMountPoint = props.popupsMountPoint,
11
13
  popupsBoundariesElement = props.popupsBoundariesElement,
@@ -17,21 +19,26 @@ export var PaletteDropdown = function PaletteDropdown(props) {
17
19
  isOpenedByKeyboard = props.isOpenedByKeyboard,
18
20
  handleClickOutside = props.handleClickOutside,
19
21
  handleEscapeKeydown = props.handleEscapeKeydown;
22
+ var isOrangeHighlightEnabled = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test');
20
23
 
21
24
  // pixels, used to determine where to horizontally position the dropdown when space is limited
22
25
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
23
- var fitWidth = 242;
24
- var colorPalette = highlightColorPalette;
25
- colorPalette = highlightColorPalette.map(function (item) {
26
- if (item.label === 'Orange') {
27
- return _objectSpread(_objectSpread({}, item), {}, {
28
- label: 'Yellow',
29
- message: colorPaletteMessages.yellow
30
- });
31
- }
32
- return item;
33
- });
34
- var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(colorPalette, activeColor),
26
+ var fitWidth = isOrangeHighlightEnabled ? 274 : 242;
27
+ var colorPalette;
28
+ if (isOrangeHighlightEnabled) {
29
+ colorPalette = highlightColorPaletteNext;
30
+ } else {
31
+ colorPalette = highlightColorPalette.map(function (item) {
32
+ if (item.label === 'Orange') {
33
+ return _objectSpread(_objectSpread({}, item), {}, {
34
+ label: 'Yellow',
35
+ message: colorPaletteMessages.yellow
36
+ });
37
+ }
38
+ return item;
39
+ });
40
+ }
41
+ var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined),
35
42
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
36
43
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
37
44
  return /*#__PURE__*/React.createElement(Dropdown, {
@@ -55,6 +62,7 @@ export var PaletteDropdown = function PaletteDropdown(props) {
55
62
  }, /*#__PURE__*/React.createElement("div", {
56
63
  "data-testid": "highlight-color-palette"
57
64
  }, /*#__PURE__*/React.createElement(ColorPalette, {
65
+ cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
58
66
  onClick: onColorChange,
59
67
  selectedColor: activeColor,
60
68
  paletteOptions: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "3.0.3",
3
+ "version": "3.0.5",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,11 +35,11 @@
35
35
  ".": "./src/index.ts"
36
36
  },
37
37
  "dependencies": {
38
- "@atlaskit/adf-schema": "^49.0.5",
38
+ "@atlaskit/adf-schema": "^49.0.6",
39
39
  "@atlaskit/editor-palette": "^2.1.0",
40
40
  "@atlaskit/editor-plugin-analytics": "^3.0.0",
41
- "@atlaskit/editor-plugin-primary-toolbar": "^4.0.0",
42
- "@atlaskit/editor-plugin-selection-toolbar": "^4.0.0",
41
+ "@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
42
+ "@atlaskit/editor-plugin-selection-toolbar": "^4.1.0",
43
43
  "@atlaskit/editor-plugin-text-formatting": "^3.0.0",
44
44
  "@atlaskit/editor-prosemirror": "7.0.0",
45
45
  "@atlaskit/editor-shared-styles": "^3.4.0",
@@ -47,13 +47,13 @@
47
47
  "@atlaskit/icon": "^27.3.0",
48
48
  "@atlaskit/platform-feature-flags": "^1.1.0",
49
49
  "@atlaskit/primitives": "^14.10.0",
50
- "@atlaskit/tmp-editor-statsig": "^9.3.0",
51
- "@atlaskit/tokens": "^5.4.0",
50
+ "@atlaskit/tmp-editor-statsig": "^9.7.0",
51
+ "@atlaskit/tokens": "^5.5.0",
52
52
  "@babel/runtime": "^7.0.0",
53
53
  "@emotion/react": "^11.7.1"
54
54
  },
55
55
  "peerDependencies": {
56
- "@atlaskit/editor-common": "^107.7.0",
56
+ "@atlaskit/editor-common": "^107.8.0",
57
57
  "react": "^18.2.0",
58
58
  "react-intl-next": "npm:react-intl@^5.18.1"
59
59
  },
@@ -114,9 +114,6 @@
114
114
  },
115
115
  "platform-visual-refresh-icons": {
116
116
  "type": "boolean"
117
- },
118
- "platform_editor_controls_patch_14": {
119
- "type": "boolean"
120
117
  }
121
118
  }
122
119
  }