@atlaskit/editor-plugin-highlight 3.0.2 → 3.0.4

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 (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/pm-plugins/keymap.js +14 -9
  3. package/dist/cjs/ui/shared/PaletteDropdown.js +10 -7
  4. package/dist/es2019/pm-plugins/keymap.js +14 -10
  5. package/dist/es2019/ui/shared/PaletteDropdown.js +11 -8
  6. package/dist/esm/pm-plugins/keymap.js +15 -10
  7. package/dist/esm/ui/shared/PaletteDropdown.js +11 -8
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 3.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#185643](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185643)
8
+ [`5954e6c1fbac5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5954e6c1fbac5) -
9
+ [ux] [ED-28432] Add orange highlight color and reorder color swatches
10
+ - Updated dependencies
11
+
12
+ ## 3.0.3
13
+
14
+ ### Patch Changes
15
+
16
+ - [#184251](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/184251)
17
+ [`be8b910f66de1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be8b910f66de1) -
18
+ [ED-91152] Clean up experiment editor_text_highlight_orange_to_yellow
19
+ - Updated dependencies
20
+
3
21
  ## 3.0.2
4
22
 
5
23
  ### 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/shared/PaletteDropdown.js CHANGED
@@ -11,9 +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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
14
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
15
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
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;
17
18
  var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props) {
18
19
  var popupsMountPoint = props.popupsMountPoint,
19
20
  popupsBoundariesElement = props.popupsBoundariesElement,
@@ -25,14 +26,15 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
25
26
  isOpenedByKeyboard = props.isOpenedByKeyboard,
26
27
  handleClickOutside = props.handleClickOutside,
27
28
  handleEscapeKeydown = props.handleEscapeKeydown;
29
+ var isOrangeHighlightEnabled = (0, _expValEquals.expValEquals)('platform_editor_add_orange_highlight_color', 'cohort', 'test');
28
30
 
29
31
  // pixels, used to determine where to horizontally position the dropdown when space is limited
30
32
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
31
- var fitWidth = 242;
32
- var colorPalette = _uiColor.highlightColorPalette;
33
- if ((0, _experiments.editorExperiment)('editor_text_highlight_orange_to_yellow', 'test', {
34
- exposure: true
35
- })) {
33
+ var fitWidth = isOrangeHighlightEnabled ? 274 : 242;
34
+ var colorPalette;
35
+ if (isOrangeHighlightEnabled) {
36
+ colorPalette = _uiColor.highlightColorPaletteNext;
37
+ } else {
36
38
  colorPalette = _uiColor.highlightColorPalette.map(function (item) {
37
39
  if (item.label === 'Orange') {
38
40
  return _objectSpread(_objectSpread({}, item), {}, {
@@ -43,7 +45,7 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
43
45
  return item;
44
46
  });
45
47
  }
46
- var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(colorPalette, activeColor),
48
+ var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined),
47
49
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
48
50
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
49
51
  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
@@ -67,6 +69,7 @@ var PaletteDropdown = exports.PaletteDropdown = function PaletteDropdown(props)
67
69
  }, /*#__PURE__*/_react.default.createElement("div", {
68
70
  "data-testid": "highlight-color-palette"
69
71
  }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
72
+ cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
70
73
  onClick: onColorChange,
71
74
  selectedColor: activeColor,
72
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/shared/PaletteDropdown.js CHANGED
@@ -1,9 +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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
7
+ const HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
7
8
  export const PaletteDropdown = props => {
8
9
  const {
9
10
  popupsMountPoint,
@@ -17,14 +18,15 @@ export const PaletteDropdown = props => {
17
18
  handleClickOutside,
18
19
  handleEscapeKeydown
19
20
  } = props;
21
+ const isOrangeHighlightEnabled = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test');
20
22
 
21
23
  // pixels, used to determine where to horizontally position the dropdown when space is limited
22
24
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
23
- const fitWidth = 242;
24
- let colorPalette = highlightColorPalette;
25
- if (editorExperiment('editor_text_highlight_orange_to_yellow', 'test', {
26
- exposure: true
27
- })) {
25
+ const fitWidth = isOrangeHighlightEnabled ? 274 : 242;
26
+ let colorPalette;
27
+ if (isOrangeHighlightEnabled) {
28
+ colorPalette = highlightColorPaletteNext;
29
+ } else {
28
30
  colorPalette = highlightColorPalette.map(item => {
29
31
  if (item.label === 'Orange') {
30
32
  return {
@@ -39,7 +41,7 @@ export const PaletteDropdown = props => {
39
41
  const {
40
42
  selectedRowIndex,
41
43
  selectedColumnIndex
42
- } = getSelectedRowAndColumnFromPalette(colorPalette, activeColor);
44
+ } = getSelectedRowAndColumnFromPalette(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined);
43
45
  return /*#__PURE__*/React.createElement(Dropdown, {
44
46
  mountTo: popupsMountPoint,
45
47
  boundariesElement: popupsBoundariesElement,
@@ -61,6 +63,7 @@ export const PaletteDropdown = props => {
61
63
  }, /*#__PURE__*/React.createElement("div", {
62
64
  "data-testid": "highlight-color-palette"
63
65
  }, /*#__PURE__*/React.createElement(ColorPalette, {
66
+ cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
64
67
  onClick: onColorChange,
65
68
  selectedColor: activeColor,
66
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/shared/PaletteDropdown.js CHANGED
@@ -2,11 +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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
+ var HIGHLIGHT_COLOR_PICKER_COLUMNS = 8;
10
11
  export var PaletteDropdown = function PaletteDropdown(props) {
11
12
  var popupsMountPoint = props.popupsMountPoint,
12
13
  popupsBoundariesElement = props.popupsBoundariesElement,
@@ -18,14 +19,15 @@ export var PaletteDropdown = function PaletteDropdown(props) {
18
19
  isOpenedByKeyboard = props.isOpenedByKeyboard,
19
20
  handleClickOutside = props.handleClickOutside,
20
21
  handleEscapeKeydown = props.handleEscapeKeydown;
22
+ var isOrangeHighlightEnabled = expValEquals('platform_editor_add_orange_highlight_color', 'cohort', 'test');
21
23
 
22
24
  // pixels, used to determine where to horizontally position the dropdown when space is limited
23
25
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
24
- var fitWidth = 242;
25
- var colorPalette = highlightColorPalette;
26
- if (editorExperiment('editor_text_highlight_orange_to_yellow', 'test', {
27
- exposure: true
28
- })) {
26
+ var fitWidth = isOrangeHighlightEnabled ? 274 : 242;
27
+ var colorPalette;
28
+ if (isOrangeHighlightEnabled) {
29
+ colorPalette = highlightColorPaletteNext;
30
+ } else {
29
31
  colorPalette = highlightColorPalette.map(function (item) {
30
32
  if (item.label === 'Orange') {
31
33
  return _objectSpread(_objectSpread({}, item), {}, {
@@ -36,7 +38,7 @@ export var PaletteDropdown = function PaletteDropdown(props) {
36
38
  return item;
37
39
  });
38
40
  }
39
- var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(colorPalette, activeColor),
41
+ var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(colorPalette, activeColor, isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined),
40
42
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
41
43
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
42
44
  return /*#__PURE__*/React.createElement(Dropdown, {
@@ -60,6 +62,7 @@ export var PaletteDropdown = function PaletteDropdown(props) {
60
62
  }, /*#__PURE__*/React.createElement("div", {
61
63
  "data-testid": "highlight-color-palette"
62
64
  }, /*#__PURE__*/React.createElement(ColorPalette, {
65
+ cols: isOrangeHighlightEnabled ? HIGHLIGHT_COLOR_PICKER_COLUMNS : undefined,
63
66
  onClick: onColorChange,
64
67
  selectedColor: activeColor,
65
68
  paletteOptions: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  ".": "./src/index.ts"
36
36
  },
37
37
  "dependencies": {
38
- "@atlaskit/adf-schema": "^47.6.0",
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
41
  "@atlaskit/editor-plugin-primary-toolbar": "^4.0.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.0.0",
51
- "@atlaskit/tokens": "^5.4.0",
50
+ "@atlaskit/tmp-editor-statsig": "^9.6.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
  },