@atlaskit/editor-plugin-highlight 2.1.3 → 2.2.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 (11) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/highlightPlugin.js +19 -25
  3. package/dist/cjs/ui/FloatingToolbarHighlightColor.js +2 -2
  4. package/dist/cjs/ui/shared/PaletteDropdown.js +20 -2
  5. package/dist/es2019/highlightPlugin.js +17 -23
  6. package/dist/es2019/ui/FloatingToolbarHighlightColor.js +2 -2
  7. package/dist/es2019/ui/shared/PaletteDropdown.js +19 -3
  8. package/dist/esm/highlightPlugin.js +19 -25
  9. package/dist/esm/ui/FloatingToolbarHighlightColor.js +2 -2
  10. package/dist/esm/ui/shared/PaletteDropdown.js +21 -3
  11. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 2.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#126627](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126627)
8
+ [`5842a0b7641b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5842a0b7641b7) -
9
+ [ux] EDF-2580: Swap Orange to Yellow in editor text background color palette toolbar behind
10
+ experiment editor_text_highlight_orange_to_yellow, minor bump adf-schema in resolutions to pick up
11
+ toDOM mark render update
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
17
+ ## 2.1.4
18
+
19
+ ### Patch Changes
20
+
21
+ - [#126126](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126126)
22
+ [`468f52001a847`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/468f52001a847) -
23
+ Tidy up contextual formatting toolbar experiment and switch to `platform_editor_controls` flag
24
+ - Updated dependencies
25
+
3
26
  ## 2.1.3
4
27
 
5
28
  ### Patch Changes
package/dist/cjs/highlightPlugin.js CHANGED
@@ -76,35 +76,29 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
76
76
  pluginsOptions: {
77
77
  selectionToolbar: function selectionToolbar() {
78
78
  var _api$selectionToolbar;
79
- if ((api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
79
+ if (options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment || (api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'none' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
80
80
  exposure: true
81
81
  })) {
82
+ var toolbarCustom = {
83
+ type: 'custom',
84
+ render: function render(_view, _idx, dispatchAnalyticsEvent) {
85
+ return /*#__PURE__*/_react.default.createElement(_FloatingToolbarHighlightColor.FloatingToolbarHighlightColorWithIntl, {
86
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
87
+ pluginInjectionApi: api
88
+ });
89
+ },
90
+ fallback: []
91
+ };
92
+ var rank = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 5 : -9;
93
+ return {
94
+ rank: rank,
95
+ isToolbarAbove: true,
96
+ items: [toolbarCustom],
97
+ pluginName: 'highlight'
98
+ };
99
+ } else {
82
100
  return undefined;
83
101
  }
84
- if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) && (0, _experiments.editorExperiment)('contextual_formatting_toolbar', false, {
85
- exposure: true
86
- }) && (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'control', {
87
- exposure: true
88
- })) {
89
- return;
90
- }
91
- var toolbarCustom = {
92
- type: 'custom',
93
- render: function render(_view, _idx, dispatchAnalyticsEvent) {
94
- return /*#__PURE__*/_react.default.createElement(_FloatingToolbarHighlightColor.FloatingToolbarHighlightColorWithIntl, {
95
- dispatchAnalyticsEvent: dispatchAnalyticsEvent,
96
- pluginInjectionApi: api
97
- });
98
- },
99
- fallback: []
100
- };
101
- var rank = (0, _experiments.editorExperiment)('contextual_formatting_toolbar', true) || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant1') || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant2') ? 5 : -9;
102
- return {
103
- rank: rank,
104
- isToolbarAbove: true,
105
- items: [toolbarCustom],
106
- pluginName: 'highlight'
107
- };
108
102
  }
109
103
  },
110
104
  primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
package/dist/cjs/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -83,7 +83,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
83
83
  // Get the design token for the active color (if it exists) to modify the toolbar
84
84
  // icon, but show the nice rainbow if none is selected
85
85
  var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
86
- var title = (0, _experiments.editorExperiment)('contextual_formatting_toolbar', true) || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant1') || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant2') ? (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
86
+ var title = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
87
87
  return (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
88
88
  isOpen: isDropdownOpen && !highlightState.disabled,
89
89
  activeColor: highlightState.activeColor,
@@ -136,7 +136,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
136
136
  }, (0, _react2.jsx)(_chevronDown.default, {
137
137
  label: ""
138
138
  }))
139
- }, (0, _experiments.editorExperiment)('contextual_formatting_toolbar', false) && (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'control') && formatMessage(_messages.highlightMessages.highlightFloatingToolbar)),
139
+ }, (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && formatMessage(_messages.highlightMessages.highlightFloatingToolbar)),
140
140
  onColorChange: function onColorChange(color) {
141
141
  return handleColorChange({
142
142
  color: color,
package/dist/cjs/ui/shared/PaletteDropdown.js CHANGED
@@ -5,11 +5,15 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.PaletteDropdown = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _react = _interopRequireDefault(require("react"));
9
10
  var _uiColor = require("@atlaskit/editor-common/ui-color");
10
11
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
11
12
  var _editorPalette = require("@atlaskit/editor-palette");
12
13
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
14
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
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; }
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; }
13
17
  var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props) {
14
18
  var popupsMountPoint = props.popupsMountPoint,
15
19
  popupsBoundariesElement = props.popupsBoundariesElement,
@@ -25,7 +29,21 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
25
29
  // pixels, used to determine where to horizontally position the dropdown when space is limited
26
30
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
27
31
  var fitWidth = 242;
28
- var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.highlightColorPalette, activeColor),
32
+ var colorPalette = _uiColor.highlightColorPalette;
33
+ if ((0, _experiments.editorExperiment)('editor_text_highlight_orange_to_yellow', 'test', {
34
+ exposure: true
35
+ })) {
36
+ colorPalette = _uiColor.highlightColorPalette.map(function (item) {
37
+ if (item.label === 'Orange') {
38
+ return _objectSpread(_objectSpread({}, item), {}, {
39
+ label: 'Yellow',
40
+ message: _uiColor.colorPaletteMessages.yellow
41
+ });
42
+ }
43
+ return item;
44
+ });
45
+ }
46
+ var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(colorPalette, activeColor),
29
47
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
30
48
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
31
49
  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
@@ -52,7 +70,7 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
52
70
  onClick: onColorChange,
53
71
  selectedColor: activeColor,
54
72
  paletteOptions: {
55
- palette: _uiColor.highlightColorPalette,
73
+ palette: colorPalette,
56
74
  hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
57
75
  }
58
76
  })));
package/dist/es2019/highlightPlugin.js CHANGED
@@ -65,33 +65,27 @@ export const highlightPlugin = ({
65
65
  pluginsOptions: {
66
66
  selectionToolbar() {
67
67
  var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
68
- if ((api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking) === 'top' && editorExperiment('platform_editor_controls', 'variant1', {
68
+ if (options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment || (api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking) === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
69
69
  exposure: true
70
70
  })) {
71
+ const toolbarCustom = {
72
+ type: 'custom',
73
+ render: (_view, _idx, dispatchAnalyticsEvent) => /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
74
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
75
+ pluginInjectionApi: api
76
+ }),
77
+ fallback: []
78
+ };
79
+ const rank = editorExperiment('platform_editor_controls', 'variant1') ? 5 : -9;
80
+ return {
81
+ rank,
82
+ isToolbarAbove: true,
83
+ items: [toolbarCustom],
84
+ pluginName: 'highlight'
85
+ };
86
+ } else {
71
87
  return undefined;
72
88
  }
73
- if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) && editorExperiment('contextual_formatting_toolbar', false, {
74
- exposure: true
75
- }) && editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'control', {
76
- exposure: true
77
- })) {
78
- return;
79
- }
80
- const toolbarCustom = {
81
- type: 'custom',
82
- render: (_view, _idx, dispatchAnalyticsEvent) => /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
83
- dispatchAnalyticsEvent: dispatchAnalyticsEvent,
84
- pluginInjectionApi: api
85
- }),
86
- fallback: []
87
- };
88
- const rank = editorExperiment('contextual_formatting_toolbar', true) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant1') || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant2') ? 5 : -9;
89
- return {
90
- rank,
91
- isToolbarAbove: true,
92
- items: [toolbarCustom],
93
- pluginName: 'highlight'
94
- };
95
89
  }
96
90
  },
97
91
  primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
package/dist/es2019/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -76,7 +76,7 @@ const FloatingToolbarHighlightColor = ({
76
76
  // Get the design token for the active color (if it exists) to modify the toolbar
77
77
  // icon, but show the nice rainbow if none is selected
78
78
  const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
79
- const title = editorExperiment('contextual_formatting_toolbar', true) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant1') || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant2') ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
79
+ const title = editorExperiment('platform_editor_controls', 'variant1') ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
80
80
  return jsx(PaletteDropdown, {
81
81
  isOpen: isDropdownOpen && !highlightState.disabled,
82
82
  activeColor: highlightState.activeColor,
@@ -129,7 +129,7 @@ const FloatingToolbarHighlightColor = ({
129
129
  }, jsx(ExpandIcon, {
130
130
  label: ""
131
131
  }))
132
- }, editorExperiment('contextual_formatting_toolbar', false) && editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'control') && formatMessage(messages.highlightFloatingToolbar)),
132
+ }, editorExperiment('platform_editor_controls', 'control') && formatMessage(messages.highlightFloatingToolbar)),
133
133
  onColorChange: color => handleColorChange({
134
134
  color,
135
135
  inputMethod: INPUT_METHOD.FLOATING_TB
package/dist/es2019/ui/shared/PaletteDropdown.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
- import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
2
+ import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette } 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
7
  export const PaletteDropdown = props => {
7
8
  const {
8
9
  popupsMountPoint,
@@ -20,10 +21,25 @@ export const PaletteDropdown = props => {
20
21
  // pixels, used to determine where to horizontally position the dropdown when space is limited
21
22
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
22
23
  const fitWidth = 242;
24
+ let colorPalette = highlightColorPalette;
25
+ if (editorExperiment('editor_text_highlight_orange_to_yellow', 'test', {
26
+ exposure: true
27
+ })) {
28
+ colorPalette = highlightColorPalette.map(item => {
29
+ if (item.label === 'Orange') {
30
+ return {
31
+ ...item,
32
+ label: 'Yellow',
33
+ message: colorPaletteMessages.yellow
34
+ };
35
+ }
36
+ return item;
37
+ });
38
+ }
23
39
  const {
24
40
  selectedRowIndex,
25
41
  selectedColumnIndex
26
- } = getSelectedRowAndColumnFromPalette(highlightColorPalette, activeColor);
42
+ } = getSelectedRowAndColumnFromPalette(colorPalette, activeColor);
27
43
  return /*#__PURE__*/React.createElement(Dropdown, {
28
44
  mountTo: popupsMountPoint,
29
45
  boundariesElement: popupsBoundariesElement,
@@ -48,7 +64,7 @@ export const PaletteDropdown = props => {
48
64
  onClick: onColorChange,
49
65
  selectedColor: activeColor,
50
66
  paletteOptions: {
51
- palette: highlightColorPalette,
67
+ palette: colorPalette,
52
68
  hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
53
69
  }
54
70
  })));
package/dist/esm/highlightPlugin.js CHANGED
@@ -69,35 +69,29 @@ export var highlightPlugin = function highlightPlugin(_ref) {
69
69
  pluginsOptions: {
70
70
  selectionToolbar: function selectionToolbar() {
71
71
  var _api$selectionToolbar;
72
- if ((api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top' && editorExperiment('platform_editor_controls', 'variant1', {
72
+ if (options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment || (api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
73
73
  exposure: true
74
74
  })) {
75
+ var toolbarCustom = {
76
+ type: 'custom',
77
+ render: function render(_view, _idx, dispatchAnalyticsEvent) {
78
+ return /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
79
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
80
+ pluginInjectionApi: api
81
+ });
82
+ },
83
+ fallback: []
84
+ };
85
+ var rank = editorExperiment('platform_editor_controls', 'variant1') ? 5 : -9;
86
+ return {
87
+ rank: rank,
88
+ isToolbarAbove: true,
89
+ items: [toolbarCustom],
90
+ pluginName: 'highlight'
91
+ };
92
+ } else {
75
93
  return undefined;
76
94
  }
77
- if (!(options !== null && options !== void 0 && options.textHighlightingFloatingToolbarExperiment) && editorExperiment('contextual_formatting_toolbar', false, {
78
- exposure: true
79
- }) && editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'control', {
80
- exposure: true
81
- })) {
82
- return;
83
- }
84
- var toolbarCustom = {
85
- type: 'custom',
86
- render: function render(_view, _idx, dispatchAnalyticsEvent) {
87
- return /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
88
- dispatchAnalyticsEvent: dispatchAnalyticsEvent,
89
- pluginInjectionApi: api
90
- });
91
- },
92
- fallback: []
93
- };
94
- var rank = editorExperiment('contextual_formatting_toolbar', true) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant1') || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant2') ? 5 : -9;
95
- return {
96
- rank: rank,
97
- isToolbarAbove: true,
98
- items: [toolbarCustom],
99
- pluginName: 'highlight'
100
- };
101
95
  }
102
96
  },
103
97
  primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
package/dist/esm/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -75,7 +75,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
75
75
  // Get the design token for the active color (if it exists) to modify the toolbar
76
76
  // icon, but show the nice rainbow if none is selected
77
77
  var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
78
- var title = editorExperiment('contextual_formatting_toolbar', true) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant1') || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant2') ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
78
+ var title = editorExperiment('platform_editor_controls', 'variant1') ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
79
79
  return jsx(PaletteDropdown, {
80
80
  isOpen: isDropdownOpen && !highlightState.disabled,
81
81
  activeColor: highlightState.activeColor,
@@ -128,7 +128,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
128
128
  }, jsx(ExpandIcon, {
129
129
  label: ""
130
130
  }))
131
- }, editorExperiment('contextual_formatting_toolbar', false) && editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'control') && formatMessage(messages.highlightFloatingToolbar)),
131
+ }, editorExperiment('platform_editor_controls', 'control') && formatMessage(messages.highlightFloatingToolbar)),
132
132
  onColorChange: function onColorChange(color) {
133
133
  return handleColorChange({
134
134
  color: color,
package/dist/esm/ui/shared/PaletteDropdown.js CHANGED
@@ -1,8 +1,12 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
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
+ 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; }
1
4
  import React from 'react';
2
- import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
5
+ import { ColorPalette, colorPaletteMessages, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
3
6
  import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
4
7
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
5
8
  import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
9
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
10
  export var PaletteDropdown = function PaletteDropdown(props) {
7
11
  var popupsMountPoint = props.popupsMountPoint,
8
12
  popupsBoundariesElement = props.popupsBoundariesElement,
@@ -18,7 +22,21 @@ export var PaletteDropdown = function PaletteDropdown(props) {
18
22
  // pixels, used to determine where to horizontally position the dropdown when space is limited
19
23
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
20
24
  var fitWidth = 242;
21
- var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(highlightColorPalette, activeColor),
25
+ var colorPalette = highlightColorPalette;
26
+ if (editorExperiment('editor_text_highlight_orange_to_yellow', 'test', {
27
+ exposure: true
28
+ })) {
29
+ colorPalette = highlightColorPalette.map(function (item) {
30
+ if (item.label === 'Orange') {
31
+ return _objectSpread(_objectSpread({}, item), {}, {
32
+ label: 'Yellow',
33
+ message: colorPaletteMessages.yellow
34
+ });
35
+ }
36
+ return item;
37
+ });
38
+ }
39
+ var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(colorPalette, activeColor),
22
40
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
23
41
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
24
42
  return /*#__PURE__*/React.createElement(Dropdown, {
@@ -45,7 +63,7 @@ export var PaletteDropdown = function PaletteDropdown(props) {
45
63
  onClick: onColorChange,
46
64
  selectedColor: activeColor,
47
65
  paletteOptions: {
48
- palette: highlightColorPalette,
66
+ palette: colorPalette,
49
67
  hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
50
68
  }
51
69
  })));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "2.1.3",
3
+ "version": "2.2.0",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,8 +37,8 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "@atlaskit/adf-schema": "^47.6.0",
40
- "@atlaskit/editor-common": "^102.4.0",
41
- "@atlaskit/editor-palette": "^2.0.0",
40
+ "@atlaskit/editor-common": "^102.5.0",
41
+ "@atlaskit/editor-palette": "^2.1.0",
42
42
  "@atlaskit/editor-plugin-analytics": "^2.1.0",
43
43
  "@atlaskit/editor-plugin-primary-toolbar": "^3.0.0",
44
44
  "@atlaskit/editor-plugin-selection-toolbar": "^2.0.0",
@@ -50,7 +50,7 @@
50
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
51
51
  "@atlaskit/primitives": "^14.1.0",
52
52
  "@atlaskit/tmp-editor-statsig": "^3.6.0",
53
- "@atlaskit/tokens": "^4.4.0",
53
+ "@atlaskit/tokens": "^4.5.0",
54
54
  "@babel/runtime": "^7.0.0",
55
55
  "@emotion/react": "^11.7.1"
56
56
  },