@atlaskit/editor-plugin-highlight 3.0.19 → 3.1.1

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 +23 -0
  2. package/dist/cjs/ui/FloatingToolbarHighlightColor.js +4 -15
  3. package/dist/cjs/ui/HighlightColorMenuItem.compiled.css +6 -3
  4. package/dist/cjs/ui/HighlightColorMenuItem.js +36 -7
  5. package/dist/cjs/ui/PrimaryToolbarHighlightColor.js +4 -15
  6. package/dist/es2019/ui/FloatingToolbarHighlightColor.js +2 -14
  7. package/dist/es2019/ui/HighlightColorMenuItem.compiled.css +6 -3
  8. package/dist/es2019/ui/HighlightColorMenuItem.js +41 -11
  9. package/dist/es2019/ui/PrimaryToolbarHighlightColor.js +2 -14
  10. package/dist/esm/ui/FloatingToolbarHighlightColor.js +5 -16
  11. package/dist/esm/ui/HighlightColorMenuItem.compiled.css +6 -3
  12. package/dist/esm/ui/HighlightColorMenuItem.js +37 -8
  13. package/dist/esm/ui/PrimaryToolbarHighlightColor.js +5 -16
  14. package/package.json +8 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 3.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`bf3ab0c552ba7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf3ab0c552ba7) -
8
+ [ux] ED-29000 Add keyboard navigation to colour palette and minor UI fixes
9
+ - [`a2cd8c46a3e94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2cd8c46a3e94) -
10
+ EDITOR-1442 Bump adf-schema
11
+ - [`ec65234ef4b55`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec65234ef4b55) -
12
+ Tidy up FG platform_editor_usesharedpluginstatewithselector for highlight and hyperlink
13
+ - Updated dependencies
14
+
15
+ ## 3.1.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [`1eba43a7b680d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1eba43a7b680d) -
20
+ [ux] ED-29000 - Address paper cut issues in ColorPalette
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies
25
+
3
26
  ## 3.0.19
4
27
 
5
28
  ### Patch Changes
package/dist/cjs/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -45,26 +45,15 @@ var selector = function selector(states) {
45
45
  disabled: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.disabled
46
46
  };
47
47
  };
48
- var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
49
- return (0, _hooks.useSharedPluginStateWithSelector)(api, ['highlight'], selector);
50
- }, function (api) {
51
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['highlight']),
52
- highlightState = _useSharedPluginState.highlightState;
53
- return {
54
- isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
55
- activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
56
- disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
57
- };
58
- });
59
48
  var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
60
49
  var pluginInjectionApi = _ref.pluginInjectionApi,
61
50
  formatMessage = _ref.intl.formatMessage,
62
51
  editorView = _ref.editorView;
63
52
  var toolbarItemRef = (0, _react.useRef)(null);
64
- var _useSharedState = useSharedState(pluginInjectionApi),
65
- activeColor = _useSharedState.activeColor,
66
- disabled = _useSharedState.disabled,
67
- isPaletteOpen = _useSharedState.isPaletteOpen;
53
+ var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['highlight'], selector),
54
+ activeColor = _useSharedPluginState.activeColor,
55
+ disabled = _useSharedPluginState.disabled,
56
+ isPaletteOpen = _useSharedPluginState.isPaletteOpen;
68
57
  var setDropdownOpen = function setDropdownOpen(isOpen) {
69
58
  var _pluginInjectionApi$a;
70
59
  if (!disabled && editorView && pluginInjectionApi) {
package/dist/cjs/ui/HighlightColorMenuItem.compiled.css CHANGED
@@ -1,6 +1,9 @@
1
1
 
2
- ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
- ._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._zulp12x7{gap:var(--ds-space-075,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._195gv77o{margin-inline:var(--ds-space-025,2px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
6
- ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
+ ._18u01n1a{margin-left:-1px}
8
+ ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
9
+ ._1e0c1o8l{display:inline-block}
package/dist/cjs/ui/HighlightColorMenuItem.js CHANGED
@@ -20,17 +20,40 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
20
20
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
21
21
  var _editorPalette = require("@atlaskit/editor-palette");
22
22
  var _editorToolbar = require("@atlaskit/editor-toolbar");
23
+ var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
24
+ var _textStyle = _interopRequireDefault(require("@atlaskit/icon/core/text-style"));
23
25
  var _compiled = require("@atlaskit/primitives/compiled");
26
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
24
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); }
25
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; }
26
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; }
27
30
  var styles = {
28
- container: "_zulpu2gc _19pkpxbi",
29
- removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
31
+ container: "_zulp12x7 _19pkpxbi",
32
+ removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej",
33
+ icon: "_1e0c1o8l _18u01n1a"
30
34
  };
31
- function HighlightColorMenuItem(_ref) {
32
- var api = _ref.api,
33
- parents = _ref.parents;
35
+ var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
36
+ var label = _ref.label,
37
+ isSelected = _ref.isSelected;
38
+ var iconColor = "var(--ds-icon, #000000)";
39
+ return isSelected ? /*#__PURE__*/React.createElement(_checkMarkEditorDone.default, {
40
+ color: iconColor,
41
+ LEGACY_primaryColor: iconColor,
42
+ label: label
43
+ }) : /*#__PURE__*/React.createElement(_compiled.Box, {
44
+ as: "span",
45
+ xcss: styles.icon
46
+ }, /*#__PURE__*/React.createElement(_textStyle.default, {
47
+ label: label,
48
+ color: iconColor,
49
+ shouldRecommendSmallIcon: true,
50
+ spacing: "spacious",
51
+ size: "small"
52
+ }));
53
+ };
54
+ function HighlightColorMenuItem(_ref2) {
55
+ var api = _ref2.api,
56
+ parents = _ref2.parents;
34
57
  var _useIntl = (0, _reactIntlNext.useIntl)(),
35
58
  formatMessage = _useIntl.formatMessage;
36
59
  var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
@@ -47,18 +70,24 @@ function HighlightColorMenuItem(_ref) {
47
70
  }
48
71
  }, [api, closeMenu, parents]);
49
72
  var colorPalette = (0, _react.useMemo)(function () {
73
+ var isSelected = function isSelected(color) {
74
+ return color.value === activeColor;
75
+ };
50
76
  return _uiColor.highlightColorPaletteNext.filter(function (color) {
51
77
  return color.value !== _uiColor.REMOVE_HIGHLIGHT_COLOR;
52
78
  }).map(function (color) {
53
79
  return _objectSpread(_objectSpread({}, color), {}, {
54
- decorator: /*#__PURE__*/React.createElement(_editorToolbar.TextColorIcon, {
80
+ decorator: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TextColorIconDecorator, {
81
+ label: color.label,
82
+ isSelected: isSelected(color)
83
+ }) : /*#__PURE__*/React.createElement(_editorToolbar.TextColorIcon, {
55
84
  label: color.label,
56
85
  size: "small",
57
86
  spacing: "spacious"
58
87
  })
59
88
  });
60
89
  });
61
- }, []);
90
+ }, [activeColor]);
62
91
  return /*#__PURE__*/React.createElement(_compiled.Stack, {
63
92
  xcss: styles.container,
64
93
  testId: "highlight-color-menu-item"
package/dist/cjs/ui/PrimaryToolbarHighlightColor.js CHANGED
@@ -39,17 +39,6 @@ var selector = function selector(states) {
39
39
  activeColor: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.activeColor
40
40
  };
41
41
  };
42
- var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
43
- return (0, _hooks.useSharedPluginStateWithSelector)(api, ['highlight'], selector);
44
- }, function (api) {
45
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['highlight']),
46
- highlightState = _useSharedPluginState.highlightState;
47
- return {
48
- isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
49
- highlightDisabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled,
50
- activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor
51
- };
52
- });
53
42
  var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
54
43
  var popupsMountPoint = _ref.popupsMountPoint,
55
44
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -60,10 +49,10 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
60
49
  formatMessage = _ref.intl.formatMessage,
61
50
  editorView = _ref.editorView;
62
51
  var toolbarItemRef = (0, _react.useRef)(null);
63
- var _useSharedState = useSharedState(pluginInjectionApi),
64
- isPaletteOpen = _useSharedState.isPaletteOpen,
65
- highlightDisabled = _useSharedState.highlightDisabled,
66
- activeColor = _useSharedState.activeColor;
52
+ var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['highlight'], selector),
53
+ isPaletteOpen = _useSharedPluginState.isPaletteOpen,
54
+ highlightDisabled = _useSharedPluginState.highlightDisabled,
55
+ activeColor = _useSharedPluginState.activeColor;
67
56
  var setIsDropdownOpen = function setIsDropdownOpen(isOpen) {
68
57
  if (!highlightDisabled) {
69
58
  var state = editorView.state,
package/dist/es2019/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -8,7 +8,7 @@ import { useRef } from 'react';
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { injectIntl } from 'react-intl-next';
10
10
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
11
- import { useSharedPluginState, sharedPluginStateHookMigratorFactory, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
11
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
12
12
  import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
13
13
  import { toggleHighlightPalette, tooltip, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
14
14
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
@@ -37,18 +37,6 @@ const selector = states => {
37
37
  disabled: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.disabled
38
38
  };
39
39
  };
40
- const useSharedState = sharedPluginStateHookMigratorFactory(api => {
41
- return useSharedPluginStateWithSelector(api, ['highlight'], selector);
42
- }, api => {
43
- const {
44
- highlightState
45
- } = useSharedPluginState(api, ['highlight']);
46
- return {
47
- isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
48
- activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
49
- disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
50
- };
51
- });
52
40
  const FloatingToolbarHighlightColor = ({
53
41
  pluginInjectionApi,
54
42
  intl: {
@@ -61,7 +49,7 @@ const FloatingToolbarHighlightColor = ({
61
49
  activeColor,
62
50
  disabled,
63
51
  isPaletteOpen
64
- } = useSharedState(pluginInjectionApi);
52
+ } = useSharedPluginStateWithSelector(pluginInjectionApi, ['highlight'], selector);
65
53
  const setDropdownOpen = isOpen => {
66
54
  var _pluginInjectionApi$a;
67
55
  if (!disabled && editorView && pluginInjectionApi) {
package/dist/es2019/ui/HighlightColorMenuItem.compiled.css CHANGED
@@ -1,6 +1,9 @@
1
1
 
2
- ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
- ._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._zulp12x7{gap:var(--ds-space-075,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._195gv77o{margin-inline:var(--ds-space-025,2px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
6
- ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
+ ._18u01n1a{margin-left:-1px}
8
+ ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
9
+ ._1e0c1o8l{display:inline-block}
package/dist/es2019/ui/HighlightColorMenuItem.js CHANGED
@@ -11,10 +11,34 @@ import { REMOVE_HIGHLIGHT_COLOR, highlightColorPaletteNext } from '@atlaskit/edi
11
11
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
12
12
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
13
13
  import { ColorPalette, TextColorIcon, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
14
- import { Stack, Text } from '@atlaskit/primitives/compiled';
14
+ import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
15
+ import Icon from '@atlaskit/icon/core/text-style';
16
+ import { Stack, Text, Box } from '@atlaskit/primitives/compiled';
17
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
15
18
  const styles = {
16
- container: "_zulpu2gc _19pkpxbi",
17
- removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
19
+ container: "_zulp12x7 _19pkpxbi",
20
+ removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej",
21
+ icon: "_1e0c1o8l _18u01n1a"
22
+ };
23
+ const TextColorIconDecorator = ({
24
+ label,
25
+ isSelected
26
+ }) => {
27
+ const iconColor = "var(--ds-icon, #000000)";
28
+ return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
29
+ color: iconColor,
30
+ LEGACY_primaryColor: iconColor,
31
+ label: label
32
+ }) : /*#__PURE__*/React.createElement(Box, {
33
+ as: "span",
34
+ xcss: styles.icon
35
+ }, /*#__PURE__*/React.createElement(Icon, {
36
+ label: label,
37
+ color: iconColor,
38
+ shouldRecommendSmallIcon: true,
39
+ spacing: "spacious",
40
+ size: "small"
41
+ }));
18
42
  };
19
43
  export function HighlightColorMenuItem({
20
44
  api,
@@ -37,14 +61,20 @@ export function HighlightColorMenuItem({
37
61
  closeMenu();
38
62
  }
39
63
  }, [api, closeMenu, parents]);
40
- const colorPalette = useMemo(() => highlightColorPaletteNext.filter(color => color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
41
- ...color,
42
- decorator: /*#__PURE__*/React.createElement(TextColorIcon, {
43
- label: color.label,
44
- size: "small",
45
- spacing: "spacious"
46
- })
47
- })), []);
64
+ const colorPalette = useMemo(() => {
65
+ const isSelected = color => color.value === activeColor;
66
+ return highlightColorPaletteNext.filter(color => color.value !== REMOVE_HIGHLIGHT_COLOR).map(color => ({
67
+ ...color,
68
+ decorator: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TextColorIconDecorator, {
69
+ label: color.label,
70
+ isSelected: isSelected(color)
71
+ }) : /*#__PURE__*/React.createElement(TextColorIcon, {
72
+ label: color.label,
73
+ size: "small",
74
+ spacing: "spacious"
75
+ })
76
+ }));
77
+ }, [activeColor]);
48
78
  return /*#__PURE__*/React.createElement(Stack, {
49
79
  xcss: styles.container,
50
80
  testId: "highlight-color-menu-item"
package/dist/es2019/ui/PrimaryToolbarHighlightColor.js CHANGED
@@ -8,7 +8,7 @@ import { useRef } from 'react';
8
8
  import { jsx } from '@emotion/react';
9
9
  import { injectIntl } from 'react-intl-next';
10
10
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
11
- import { useSharedPluginState, sharedPluginStateHookMigratorFactory, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
11
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
12
12
  import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
13
13
  import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
14
14
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
@@ -31,18 +31,6 @@ const selector = states => {
31
31
  activeColor: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.activeColor
32
32
  };
33
33
  };
34
- const useSharedState = sharedPluginStateHookMigratorFactory(api => {
35
- return useSharedPluginStateWithSelector(api, ['highlight'], selector);
36
- }, api => {
37
- const {
38
- highlightState
39
- } = useSharedPluginState(api, ['highlight']);
40
- return {
41
- isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
42
- highlightDisabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled,
43
- activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor
44
- };
45
- });
46
34
  const PrimaryToolbarHighlightColor = ({
47
35
  popupsMountPoint,
48
36
  popupsBoundariesElement,
@@ -60,7 +48,7 @@ const PrimaryToolbarHighlightColor = ({
60
48
  isPaletteOpen,
61
49
  highlightDisabled,
62
50
  activeColor
63
- } = useSharedState(pluginInjectionApi);
51
+ } = useSharedPluginStateWithSelector(pluginInjectionApi, ['highlight'], selector);
64
52
  const setIsDropdownOpen = isOpen => {
65
53
  if (!highlightDisabled) {
66
54
  const {
package/dist/esm/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -8,7 +8,7 @@ import { useRef } from 'react';
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { injectIntl } from 'react-intl-next';
10
10
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
11
- import { useSharedPluginState, sharedPluginStateHookMigratorFactory, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
11
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
12
12
  import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
13
13
  import { toggleHighlightPalette, tooltip, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
14
14
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
@@ -37,26 +37,15 @@ var selector = function selector(states) {
37
37
  disabled: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.disabled
38
38
  };
39
39
  };
40
- var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
41
- return useSharedPluginStateWithSelector(api, ['highlight'], selector);
42
- }, function (api) {
43
- var _useSharedPluginState = useSharedPluginState(api, ['highlight']),
44
- highlightState = _useSharedPluginState.highlightState;
45
- return {
46
- isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
47
- activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
48
- disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
49
- };
50
- });
51
40
  var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
52
41
  var pluginInjectionApi = _ref.pluginInjectionApi,
53
42
  formatMessage = _ref.intl.formatMessage,
54
43
  editorView = _ref.editorView;
55
44
  var toolbarItemRef = useRef(null);
56
- var _useSharedState = useSharedState(pluginInjectionApi),
57
- activeColor = _useSharedState.activeColor,
58
- disabled = _useSharedState.disabled,
59
- isPaletteOpen = _useSharedState.isPaletteOpen;
45
+ var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['highlight'], selector),
46
+ activeColor = _useSharedPluginState.activeColor,
47
+ disabled = _useSharedPluginState.disabled,
48
+ isPaletteOpen = _useSharedPluginState.isPaletteOpen;
60
49
  var setDropdownOpen = function setDropdownOpen(isOpen) {
61
50
  var _pluginInjectionApi$a;
62
51
  if (!disabled && editorView && pluginInjectionApi) {
package/dist/esm/ui/HighlightColorMenuItem.compiled.css CHANGED
@@ -1,6 +1,9 @@
1
1
 
2
- ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
3
- ._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._zulp12x7{gap:var(--ds-space-075,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
4
+ ._195gv77o{margin-inline:var(--ds-space-025,2px)}
4
5
  ._1dqonqa1{border-style:solid}
5
6
  ._1h6dmuej{border-color:var(--ds-border,#091e4224)}
6
- ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
+ ._18u01n1a{margin-left:-1px}
8
+ ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
9
+ ._1e0c1o8l{display:inline-block}
package/dist/esm/ui/HighlightColorMenuItem.js CHANGED
@@ -14,14 +14,37 @@ import { REMOVE_HIGHLIGHT_COLOR, highlightColorPaletteNext } from '@atlaskit/edi
14
14
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
15
15
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
16
16
  import { ColorPalette, TextColorIcon, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
17
- import { Stack, Text } from '@atlaskit/primitives/compiled';
17
+ import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
18
+ import Icon from '@atlaskit/icon/core/text-style';
19
+ import { Stack, Text, Box } from '@atlaskit/primitives/compiled';
20
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
18
21
  var styles = {
19
- container: "_zulpu2gc _19pkpxbi",
20
- removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
22
+ container: "_zulp12x7 _19pkpxbi",
23
+ removeHighlightButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6dmuej",
24
+ icon: "_1e0c1o8l _18u01n1a"
21
25
  };
22
- export function HighlightColorMenuItem(_ref) {
23
- var api = _ref.api,
24
- parents = _ref.parents;
26
+ var TextColorIconDecorator = function TextColorIconDecorator(_ref) {
27
+ var label = _ref.label,
28
+ isSelected = _ref.isSelected;
29
+ var iconColor = "var(--ds-icon, #000000)";
30
+ return isSelected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
31
+ color: iconColor,
32
+ LEGACY_primaryColor: iconColor,
33
+ label: label
34
+ }) : /*#__PURE__*/React.createElement(Box, {
35
+ as: "span",
36
+ xcss: styles.icon
37
+ }, /*#__PURE__*/React.createElement(Icon, {
38
+ label: label,
39
+ color: iconColor,
40
+ shouldRecommendSmallIcon: true,
41
+ spacing: "spacious",
42
+ size: "small"
43
+ }));
44
+ };
45
+ export function HighlightColorMenuItem(_ref2) {
46
+ var api = _ref2.api,
47
+ parents = _ref2.parents;
25
48
  var _useIntl = useIntl(),
26
49
  formatMessage = _useIntl.formatMessage;
27
50
  var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
@@ -38,18 +61,24 @@ export function HighlightColorMenuItem(_ref) {
38
61
  }
39
62
  }, [api, closeMenu, parents]);
40
63
  var colorPalette = useMemo(function () {
64
+ var isSelected = function isSelected(color) {
65
+ return color.value === activeColor;
66
+ };
41
67
  return highlightColorPaletteNext.filter(function (color) {
42
68
  return color.value !== REMOVE_HIGHLIGHT_COLOR;
43
69
  }).map(function (color) {
44
70
  return _objectSpread(_objectSpread({}, color), {}, {
45
- decorator: /*#__PURE__*/React.createElement(TextColorIcon, {
71
+ decorator: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(TextColorIconDecorator, {
72
+ label: color.label,
73
+ isSelected: isSelected(color)
74
+ }) : /*#__PURE__*/React.createElement(TextColorIcon, {
46
75
  label: color.label,
47
76
  size: "small",
48
77
  spacing: "spacious"
49
78
  })
50
79
  });
51
80
  });
52
- }, []);
81
+ }, [activeColor]);
53
82
  return /*#__PURE__*/React.createElement(Stack, {
54
83
  xcss: styles.container,
55
84
  testId: "highlight-color-menu-item"
package/dist/esm/ui/PrimaryToolbarHighlightColor.js CHANGED
@@ -8,7 +8,7 @@ import { useRef } from 'react';
8
8
  import { jsx } from '@emotion/react';
9
9
  import { injectIntl } from 'react-intl-next';
10
10
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
11
- import { useSharedPluginState, sharedPluginStateHookMigratorFactory, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
11
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
12
12
  import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
13
13
  import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
14
14
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
@@ -31,17 +31,6 @@ var selector = function selector(states) {
31
31
  activeColor: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.activeColor
32
32
  };
33
33
  };
34
- var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
35
- return useSharedPluginStateWithSelector(api, ['highlight'], selector);
36
- }, function (api) {
37
- var _useSharedPluginState = useSharedPluginState(api, ['highlight']),
38
- highlightState = _useSharedPluginState.highlightState;
39
- return {
40
- isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
41
- highlightDisabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled,
42
- activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor
43
- };
44
- });
45
34
  var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
46
35
  var popupsMountPoint = _ref.popupsMountPoint,
47
36
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -52,10 +41,10 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
52
41
  formatMessage = _ref.intl.formatMessage,
53
42
  editorView = _ref.editorView;
54
43
  var toolbarItemRef = useRef(null);
55
- var _useSharedState = useSharedState(pluginInjectionApi),
56
- isPaletteOpen = _useSharedState.isPaletteOpen,
57
- highlightDisabled = _useSharedState.highlightDisabled,
58
- activeColor = _useSharedState.activeColor;
44
+ var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['highlight'], selector),
45
+ isPaletteOpen = _useSharedPluginState.isPaletteOpen,
46
+ highlightDisabled = _useSharedPluginState.highlightDisabled,
47
+ activeColor = _useSharedPluginState.activeColor;
59
48
  var setIsDropdownOpen = function setIsDropdownOpen(isOpen) {
60
49
  if (!highlightDisabled) {
61
50
  var state = editorView.state,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "3.0.19",
3
+ "version": "3.1.1",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,11 +31,8 @@
31
31
  "*.compiled.css"
32
32
  ],
33
33
  "atlaskit:src": "src/index.ts",
34
- "af:exports": {
35
- ".": "./src/index.ts"
36
- },
37
34
  "dependencies": {
38
- "@atlaskit/adf-schema": "^50.2.1",
35
+ "@atlaskit/adf-schema": "^50.2.3",
39
36
  "@atlaskit/button": "^23.4.0",
40
37
  "@atlaskit/css": "^0.12.0",
41
38
  "@atlaskit/editor-palette": "^2.1.0",
@@ -47,18 +44,18 @@
47
44
  "@atlaskit/editor-prosemirror": "7.0.0",
48
45
  "@atlaskit/editor-shared-styles": "^3.6.0",
49
46
  "@atlaskit/editor-tables": "^2.9.0",
50
- "@atlaskit/editor-toolbar": "^0.3.0",
47
+ "@atlaskit/editor-toolbar": "^0.5.0",
51
48
  "@atlaskit/editor-toolbar-model": "^0.1.0",
52
- "@atlaskit/icon": "^28.0.0",
49
+ "@atlaskit/icon": "^28.1.0",
53
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
54
- "@atlaskit/primitives": "^14.11.0",
55
- "@atlaskit/tmp-editor-statsig": "^11.5.0",
56
- "@atlaskit/tokens": "^6.0.0",
51
+ "@atlaskit/primitives": "^14.12.0",
52
+ "@atlaskit/tmp-editor-statsig": "^11.9.0",
53
+ "@atlaskit/tokens": "^6.1.0",
57
54
  "@babel/runtime": "^7.0.0",
58
55
  "@emotion/react": "^11.7.1"
59
56
  },
60
57
  "peerDependencies": {
61
- "@atlaskit/editor-common": "^107.28.0",
58
+ "@atlaskit/editor-common": "^107.33.0",
62
59
  "react": "^18.2.0",
63
60
  "react-intl-next": "npm:react-intl@^5.18.1"
64
61
  },