@atlaskit/editor-plugin-highlight 2.5.0 → 2.5.2

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 +15 -0
  2. package/dist/cjs/ui/FloatingToolbarHighlightColor.js +26 -9
  3. package/dist/cjs/ui/PrimaryToolbarHighlightColor.js +32 -11
  4. package/dist/es2019/ui/FloatingToolbarHighlightColor.js +28 -10
  5. package/dist/es2019/ui/PrimaryToolbarHighlightColor.js +34 -12
  6. package/dist/esm/ui/FloatingToolbarHighlightColor.js +27 -10
  7. package/dist/esm/ui/PrimaryToolbarHighlightColor.js +33 -12
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 2.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#148126](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148126)
8
+ [`2839a051cf613`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2839a051cf613) -
9
+ Migrate to useSharedPluginStateSelector for grid, guideline, help-dialog, highlight and hyperlink
10
+ plugins
11
+
12
+ ## 2.5.1
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 2.5.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -16,6 +16,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
16
16
  var _messages = require("@atlaskit/editor-common/messages");
17
17
  var _styles = require("@atlaskit/editor-common/styles");
18
18
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
19
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
19
20
  var _editorPalette = require("@atlaskit/editor-palette");
20
21
  var _highlight = _interopRequireDefault(require("@atlaskit/icon/core/highlight"));
21
22
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
@@ -37,6 +38,21 @@ var expandIconContainerHighlightStyle = (0, _react2.css)({
37
38
  var highlightIconContainerStyle = (0, _react2.css)({
38
39
  marginTop: "var(--ds-space-negative-050, -4px)"
39
40
  });
41
+ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
42
+ var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
43
+ var disabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.disabled');
44
+ return {
45
+ activeColor: activeColor,
46
+ disabled: disabled
47
+ };
48
+ }, function (api) {
49
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['highlight']),
50
+ highlightState = _useSharedPluginState.highlightState;
51
+ return {
52
+ activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
53
+ disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
54
+ };
55
+ });
40
56
  var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
41
57
  var pluginInjectionApi = _ref.pluginInjectionApi,
42
58
  formatMessage = _ref.intl.formatMessage;
@@ -45,8 +61,9 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
45
61
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
46
62
  isDropdownOpen = _useState2[0],
47
63
  setIsDropdownOpen = _useState2[1];
48
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
49
- highlightState = _useSharedPluginState.highlightState;
64
+ var _useSharedState = useSharedState(pluginInjectionApi),
65
+ activeColor = _useSharedState.activeColor,
66
+ disabled = _useSharedState.disabled;
50
67
  var setDropdownOpen = function setDropdownOpen(isOpen) {
51
68
  var _pluginInjectionApi$a;
52
69
  setIsDropdownOpen(isOpen);
@@ -74,25 +91,25 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
74
91
  isOpenedByKeyboard = _useDropdownEvents.isOpenedByKeyboard;
75
92
 
76
93
  // Don't render the toolbar option while the plugin is initialising
77
- if (!highlightState) {
94
+ if (activeColor === undefined || disabled === undefined) {
78
95
  return null;
79
96
  }
80
97
  var toolbarButtonLabel = formatMessage(_messages.highlightMessages.highlight);
81
98
 
82
99
  // Get the design token for the active color (if it exists) to modify the toolbar
83
100
  // icon, but show the nice rainbow if none is selected
84
- var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
101
+ var activeColorToken = activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(activeColor);
85
102
  var title = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
86
103
  return (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
87
- isOpen: isDropdownOpen && !highlightState.disabled,
88
- activeColor: highlightState.activeColor,
104
+ isOpen: isDropdownOpen && !disabled,
105
+ activeColor: activeColor,
89
106
  trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton
90
107
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
91
108
  , {
92
109
  css: _styles.disableBlueBorderStyles,
93
110
  buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
94
111
  spacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? 'default' : 'compact',
95
- disabled: highlightState.disabled,
112
+ disabled: disabled,
96
113
  selected: isDropdownOpen,
97
114
  "aria-label": title,
98
115
  "aria-expanded": isDropdownOpen,
@@ -109,7 +126,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
109
126
  css: _styles.triggerWrapperStylesWithPadding
110
127
  }, (0, _react2.jsx)(_icons.DynamicStrokeIconDecoration, {
111
128
  selectedColor: activeColorToken,
112
- disabled: highlightState.disabled,
129
+ disabled: disabled,
113
130
  icon: (0, _react2.jsx)(_highlight.default, {
114
131
  label: "",
115
132
  color: "currentColor",
@@ -126,7 +143,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
126
143
  css: highlightIconContainerStyle
127
144
  }, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
128
145
  selectedColor: activeColorToken,
129
- disabled: highlightState.disabled
146
+ disabled: disabled
130
147
  })),
131
148
  iconAfter:
132
149
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
package/dist/cjs/ui/PrimaryToolbarHighlightColor.js CHANGED
@@ -15,6 +15,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
15
15
  var _messages = require("@atlaskit/editor-common/messages");
16
16
  var _styles = require("@atlaskit/editor-common/styles");
17
17
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
18
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
18
19
  var _editorPalette = require("@atlaskit/editor-palette");
19
20
  var _highlight = _interopRequireDefault(require("@atlaskit/icon/core/highlight"));
20
21
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
@@ -31,6 +32,24 @@ var _useDropdownEvents2 = require("./shared/useDropdownEvents");
31
32
 
32
33
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
33
34
 
35
+ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
36
+ var isPaletteOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.isPaletteOpen');
37
+ var highlightDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.disabled');
38
+ var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
39
+ return {
40
+ isPaletteOpen: isPaletteOpen,
41
+ highlightDisabled: highlightDisabled,
42
+ activeColor: activeColor
43
+ };
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
+ });
34
53
  var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
35
54
  var popupsMountPoint = _ref.popupsMountPoint,
36
55
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -41,10 +60,12 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
41
60
  formatMessage = _ref.intl.formatMessage,
42
61
  editorView = _ref.editorView;
43
62
  var toolbarItemRef = (0, _react.useRef)(null);
44
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
45
- highlightState = _useSharedPluginState.highlightState;
63
+ var _useSharedState = useSharedState(pluginInjectionApi),
64
+ isPaletteOpen = _useSharedState.isPaletteOpen,
65
+ highlightDisabled = _useSharedState.highlightDisabled,
66
+ activeColor = _useSharedState.activeColor;
46
67
  var setIsDropdownOpen = function setIsDropdownOpen(isOpen) {
47
- if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
68
+ if (!highlightDisabled) {
48
69
  var state = editorView.state,
49
70
  dispatch = editorView.dispatch;
50
71
  // Ignored via go/ees005
@@ -55,7 +76,7 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
55
76
  })(state, dispatch);
56
77
  }
57
78
  };
58
- var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
79
+ var isDropdownOpen = !!isPaletteOpen;
59
80
  var _useDropdownEvents = (0, _useDropdownEvents2.useDropdownEvents)({
60
81
  toolbarItemRef: toolbarItemRef,
61
82
  setIsDropdownOpen: setIsDropdownOpen,
@@ -70,29 +91,29 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
70
91
  isOpenedByKeyboard = _useDropdownEvents.isOpenedByKeyboard;
71
92
 
72
93
  // Don't render the toolbar option while the plugin is initialising
73
- if (!highlightState) {
94
+ if (activeColor === undefined || highlightDisabled === undefined) {
74
95
  return null;
75
96
  }
76
97
  var toolbarButtonLabel = formatMessage(_messages.highlightMessages.highlight);
77
98
 
78
99
  // Get the design token for the active color (if it exists) to modify the toolbar
79
100
  // icon, but show the nice rainbow if none is selected
80
- var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
101
+ var activeColorToken = activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(activeColor);
81
102
  return (0, _react2.jsx)(_compiled.Flex, {
82
103
  alignItems: "center"
83
104
  }, (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
84
105
  popupsMountPoint: popupsMountPoint,
85
106
  popupsBoundariesElement: popupsBoundariesElement,
86
107
  popupsScrollableElement: popupsScrollableElement,
87
- isOpen: isDropdownOpen && !highlightState.disabled,
88
- activeColor: highlightState.activeColor,
108
+ isOpen: isDropdownOpen && !highlightDisabled,
109
+ activeColor: activeColor,
89
110
  trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton
90
111
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
91
112
  , {
92
113
  css: _styles.disableBlueBorderStyles,
93
114
  buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
94
115
  spacing: isToolbarReducedSpacing ? 'none' : 'default',
95
- disabled: disabled || highlightState.disabled,
116
+ disabled: disabled || highlightDisabled,
96
117
  selected: isDropdownOpen,
97
118
  "aria-label": (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel),
98
119
  "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleHighlightPalette),
@@ -110,7 +131,7 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
110
131
  css: _styles.triggerWrapperStylesWithPadding
111
132
  }, (0, _react2.jsx)(_icons.DynamicStrokeIconDecoration, {
112
133
  selectedColor: activeColorToken,
113
- disabled: highlightState.disabled,
134
+ disabled: highlightDisabled,
114
135
  icon: (0, _react2.jsx)(_highlight.default, {
115
136
  label: "",
116
137
  color: "currentColor",
@@ -125,7 +146,7 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
125
146
  color: "currentColor"
126
147
  }))) : (0, _react2.jsx)(_compiled.Flex, null, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
127
148
  selectedColor: activeColorToken,
128
- disabled: highlightState.disabled
149
+ disabled: highlightDisabled
129
150
  }), (0, _react2.jsx)("span", {
130
151
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
131
152
  css: _styles.expandIconWrapperStyle
package/dist/es2019/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -8,12 +8,13 @@ import { useRef, useState } 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 } from '@atlaskit/editor-common/hooks';
11
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
12
12
  import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
13
13
  import { toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
14
14
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
15
15
  import { disableBlueBorderStyles, expandIconContainerStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
16
16
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
17
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
17
18
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
18
19
  import HighlightIcon from '@atlaskit/icon/core/highlight';
19
20
  import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
@@ -28,6 +29,22 @@ const expandIconContainerHighlightStyle = css({
28
29
  const highlightIconContainerStyle = css({
29
30
  marginTop: "var(--ds-space-negative-050, -4px)"
30
31
  });
32
+ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
33
+ const activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
34
+ const disabled = useSharedPluginStateSelector(api, 'highlight.disabled');
35
+ return {
36
+ activeColor,
37
+ disabled
38
+ };
39
+ }, api => {
40
+ const {
41
+ highlightState
42
+ } = useSharedPluginState(api, ['highlight']);
43
+ return {
44
+ activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
45
+ disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
46
+ };
47
+ });
31
48
  const FloatingToolbarHighlightColor = ({
32
49
  pluginInjectionApi,
33
50
  intl: {
@@ -37,8 +54,9 @@ const FloatingToolbarHighlightColor = ({
37
54
  const toolbarItemRef = useRef(null);
38
55
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
39
56
  const {
40
- highlightState
41
- } = useSharedPluginState(pluginInjectionApi, ['highlight']);
57
+ activeColor,
58
+ disabled
59
+ } = useSharedState(pluginInjectionApi);
42
60
  const setDropdownOpen = isOpen => {
43
61
  var _pluginInjectionApi$a;
44
62
  setIsDropdownOpen(isOpen);
@@ -67,25 +85,25 @@ const FloatingToolbarHighlightColor = ({
67
85
  });
68
86
 
69
87
  // Don't render the toolbar option while the plugin is initialising
70
- if (!highlightState) {
88
+ if (activeColor === undefined || disabled === undefined) {
71
89
  return null;
72
90
  }
73
91
  const toolbarButtonLabel = formatMessage(messages.highlight);
74
92
 
75
93
  // Get the design token for the active color (if it exists) to modify the toolbar
76
94
  // icon, but show the nice rainbow if none is selected
77
- const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
95
+ const activeColorToken = activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(activeColor);
78
96
  const title = editorExperiment('platform_editor_controls', 'variant1') ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
79
97
  return jsx(PaletteDropdown, {
80
- isOpen: isDropdownOpen && !highlightState.disabled,
81
- activeColor: highlightState.activeColor,
98
+ isOpen: isDropdownOpen && !disabled,
99
+ activeColor: activeColor,
82
100
  trigger: jsx(ToolbarButton
83
101
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
84
102
  , {
85
103
  css: disableBlueBorderStyles,
86
104
  buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
87
105
  spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
88
- disabled: highlightState.disabled,
106
+ disabled: disabled,
89
107
  selected: isDropdownOpen,
90
108
  "aria-label": title,
91
109
  "aria-expanded": isDropdownOpen,
@@ -102,7 +120,7 @@ const FloatingToolbarHighlightColor = ({
102
120
  css: triggerWrapperStylesWithPadding
103
121
  }, jsx(DynamicStrokeIconDecoration, {
104
122
  selectedColor: activeColorToken,
105
- disabled: highlightState.disabled,
123
+ disabled: disabled,
106
124
  icon: jsx(HighlightIcon, {
107
125
  label: "",
108
126
  color: "currentColor",
@@ -119,7 +137,7 @@ const FloatingToolbarHighlightColor = ({
119
137
  css: highlightIconContainerStyle
120
138
  }, jsx(EditorHighlightIcon, {
121
139
  selectedColor: activeColorToken,
122
- disabled: highlightState.disabled
140
+ disabled: disabled
123
141
  })),
124
142
  iconAfter:
125
143
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
package/dist/es2019/ui/PrimaryToolbarHighlightColor.js CHANGED
@@ -8,12 +8,13 @@ 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 } from '@atlaskit/editor-common/hooks';
11
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } 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';
15
15
  import { disableBlueBorderStyles, expandIconContainerStyle, expandIconWrapperStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
16
16
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
17
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
17
18
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
18
19
  import HighlightIcon from '@atlaskit/icon/core/highlight';
19
20
  import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
@@ -23,6 +24,25 @@ import { setPalette } from '../editor-commands/palette';
23
24
  import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
24
25
  import { PaletteDropdown } from './shared/PaletteDropdown';
25
26
  import { useDropdownEvents } from './shared/useDropdownEvents';
27
+ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
28
+ const isPaletteOpen = useSharedPluginStateSelector(api, 'highlight.isPaletteOpen');
29
+ const highlightDisabled = useSharedPluginStateSelector(api, 'highlight.disabled');
30
+ const activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
31
+ return {
32
+ isPaletteOpen,
33
+ highlightDisabled,
34
+ activeColor
35
+ };
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
+ });
26
46
  const PrimaryToolbarHighlightColor = ({
27
47
  popupsMountPoint,
28
48
  popupsBoundariesElement,
@@ -37,10 +57,12 @@ const PrimaryToolbarHighlightColor = ({
37
57
  }) => {
38
58
  const toolbarItemRef = useRef(null);
39
59
  const {
40
- highlightState
41
- } = useSharedPluginState(pluginInjectionApi, ['highlight']);
60
+ isPaletteOpen,
61
+ highlightDisabled,
62
+ activeColor
63
+ } = useSharedState(pluginInjectionApi);
42
64
  const setIsDropdownOpen = isOpen => {
43
- if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
65
+ if (!highlightDisabled) {
44
66
  const {
45
67
  state,
46
68
  dispatch
@@ -53,7 +75,7 @@ const PrimaryToolbarHighlightColor = ({
53
75
  })(state, dispatch);
54
76
  }
55
77
  };
56
- const isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
78
+ const isDropdownOpen = !!isPaletteOpen;
57
79
  const {
58
80
  handleClick,
59
81
  handleKeyDown,
@@ -69,29 +91,29 @@ const PrimaryToolbarHighlightColor = ({
69
91
  });
70
92
 
71
93
  // Don't render the toolbar option while the plugin is initialising
72
- if (!highlightState) {
94
+ if (activeColor === undefined || highlightDisabled === undefined) {
73
95
  return null;
74
96
  }
75
97
  const toolbarButtonLabel = formatMessage(messages.highlight);
76
98
 
77
99
  // Get the design token for the active color (if it exists) to modify the toolbar
78
100
  // icon, but show the nice rainbow if none is selected
79
- const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
101
+ const activeColorToken = activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(activeColor);
80
102
  return jsx(Flex, {
81
103
  alignItems: "center"
82
104
  }, jsx(PaletteDropdown, {
83
105
  popupsMountPoint: popupsMountPoint,
84
106
  popupsBoundariesElement: popupsBoundariesElement,
85
107
  popupsScrollableElement: popupsScrollableElement,
86
- isOpen: isDropdownOpen && !highlightState.disabled,
87
- activeColor: highlightState.activeColor,
108
+ isOpen: isDropdownOpen && !highlightDisabled,
109
+ activeColor: activeColor,
88
110
  trigger: jsx(ToolbarButton
89
111
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
90
112
  , {
91
113
  css: disableBlueBorderStyles,
92
114
  buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
93
115
  spacing: isToolbarReducedSpacing ? 'none' : 'default',
94
- disabled: disabled || highlightState.disabled,
116
+ disabled: disabled || highlightDisabled,
95
117
  selected: isDropdownOpen,
96
118
  "aria-label": tooltip(toggleHighlightPalette, toolbarButtonLabel),
97
119
  "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
@@ -109,7 +131,7 @@ const PrimaryToolbarHighlightColor = ({
109
131
  css: triggerWrapperStylesWithPadding
110
132
  }, jsx(DynamicStrokeIconDecoration, {
111
133
  selectedColor: activeColorToken,
112
- disabled: highlightState.disabled,
134
+ disabled: highlightDisabled,
113
135
  icon: jsx(HighlightIcon, {
114
136
  label: "",
115
137
  color: "currentColor",
@@ -124,7 +146,7 @@ const PrimaryToolbarHighlightColor = ({
124
146
  color: "currentColor"
125
147
  }))) : jsx(Flex, null, jsx(EditorHighlightIcon, {
126
148
  selectedColor: activeColorToken,
127
- disabled: highlightState.disabled
149
+ disabled: highlightDisabled
128
150
  }), jsx("span", {
129
151
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
130
152
  css: expandIconWrapperStyle
package/dist/esm/ui/FloatingToolbarHighlightColor.js CHANGED
@@ -9,12 +9,13 @@ import { useRef, useState } from 'react';
9
9
  import { css, jsx } from '@emotion/react';
10
10
  import { injectIntl } from 'react-intl-next';
11
11
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
12
- import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
12
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
13
13
  import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
14
14
  import { toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
15
15
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
16
16
  import { disableBlueBorderStyles, expandIconContainerStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
17
17
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
18
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
18
19
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
19
20
  import HighlightIcon from '@atlaskit/icon/core/highlight';
20
21
  import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
@@ -29,6 +30,21 @@ var expandIconContainerHighlightStyle = css({
29
30
  var highlightIconContainerStyle = css({
30
31
  marginTop: "var(--ds-space-negative-050, -4px)"
31
32
  });
33
+ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
34
+ var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
35
+ var disabled = useSharedPluginStateSelector(api, 'highlight.disabled');
36
+ return {
37
+ activeColor: activeColor,
38
+ disabled: disabled
39
+ };
40
+ }, function (api) {
41
+ var _useSharedPluginState = useSharedPluginState(api, ['highlight']),
42
+ highlightState = _useSharedPluginState.highlightState;
43
+ return {
44
+ activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
45
+ disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
46
+ };
47
+ });
32
48
  var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
33
49
  var pluginInjectionApi = _ref.pluginInjectionApi,
34
50
  formatMessage = _ref.intl.formatMessage;
@@ -37,8 +53,9 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
37
53
  _useState2 = _slicedToArray(_useState, 2),
38
54
  isDropdownOpen = _useState2[0],
39
55
  setIsDropdownOpen = _useState2[1];
40
- var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['highlight']),
41
- highlightState = _useSharedPluginState.highlightState;
56
+ var _useSharedState = useSharedState(pluginInjectionApi),
57
+ activeColor = _useSharedState.activeColor,
58
+ disabled = _useSharedState.disabled;
42
59
  var setDropdownOpen = function setDropdownOpen(isOpen) {
43
60
  var _pluginInjectionApi$a;
44
61
  setIsDropdownOpen(isOpen);
@@ -66,25 +83,25 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
66
83
  isOpenedByKeyboard = _useDropdownEvents.isOpenedByKeyboard;
67
84
 
68
85
  // Don't render the toolbar option while the plugin is initialising
69
- if (!highlightState) {
86
+ if (activeColor === undefined || disabled === undefined) {
70
87
  return null;
71
88
  }
72
89
  var toolbarButtonLabel = formatMessage(messages.highlight);
73
90
 
74
91
  // Get the design token for the active color (if it exists) to modify the toolbar
75
92
  // icon, but show the nice rainbow if none is selected
76
- var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
93
+ var activeColorToken = activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(activeColor);
77
94
  var title = editorExperiment('platform_editor_controls', 'variant1') ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
78
95
  return jsx(PaletteDropdown, {
79
- isOpen: isDropdownOpen && !highlightState.disabled,
80
- activeColor: highlightState.activeColor,
96
+ isOpen: isDropdownOpen && !disabled,
97
+ activeColor: activeColor,
81
98
  trigger: jsx(ToolbarButton
82
99
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
83
100
  , {
84
101
  css: disableBlueBorderStyles,
85
102
  buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
86
103
  spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
87
- disabled: highlightState.disabled,
104
+ disabled: disabled,
88
105
  selected: isDropdownOpen,
89
106
  "aria-label": title,
90
107
  "aria-expanded": isDropdownOpen,
@@ -101,7 +118,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
101
118
  css: triggerWrapperStylesWithPadding
102
119
  }, jsx(DynamicStrokeIconDecoration, {
103
120
  selectedColor: activeColorToken,
104
- disabled: highlightState.disabled,
121
+ disabled: disabled,
105
122
  icon: jsx(HighlightIcon, {
106
123
  label: "",
107
124
  color: "currentColor",
@@ -118,7 +135,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
118
135
  css: highlightIconContainerStyle
119
136
  }, jsx(EditorHighlightIcon, {
120
137
  selectedColor: activeColorToken,
121
- disabled: highlightState.disabled
138
+ disabled: disabled
122
139
  })),
123
140
  iconAfter:
124
141
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
package/dist/esm/ui/PrimaryToolbarHighlightColor.js CHANGED
@@ -8,12 +8,13 @@ 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 } from '@atlaskit/editor-common/hooks';
11
+ import { useSharedPluginState, sharedPluginStateHookMigratorFactory } 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';
15
15
  import { disableBlueBorderStyles, expandIconContainerStyle, expandIconWrapperStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
16
16
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
17
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
17
18
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
18
19
  import HighlightIcon from '@atlaskit/icon/core/highlight';
19
20
  import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
@@ -23,6 +24,24 @@ import { setPalette } from '../editor-commands/palette';
23
24
  import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
24
25
  import { PaletteDropdown } from './shared/PaletteDropdown';
25
26
  import { useDropdownEvents } from './shared/useDropdownEvents';
27
+ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
28
+ var isPaletteOpen = useSharedPluginStateSelector(api, 'highlight.isPaletteOpen');
29
+ var highlightDisabled = useSharedPluginStateSelector(api, 'highlight.disabled');
30
+ var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
31
+ return {
32
+ isPaletteOpen: isPaletteOpen,
33
+ highlightDisabled: highlightDisabled,
34
+ activeColor: activeColor
35
+ };
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
+ });
26
45
  var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
27
46
  var popupsMountPoint = _ref.popupsMountPoint,
28
47
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -33,10 +52,12 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
33
52
  formatMessage = _ref.intl.formatMessage,
34
53
  editorView = _ref.editorView;
35
54
  var toolbarItemRef = useRef(null);
36
- var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['highlight']),
37
- highlightState = _useSharedPluginState.highlightState;
55
+ var _useSharedState = useSharedState(pluginInjectionApi),
56
+ isPaletteOpen = _useSharedState.isPaletteOpen,
57
+ highlightDisabled = _useSharedState.highlightDisabled,
58
+ activeColor = _useSharedState.activeColor;
38
59
  var setIsDropdownOpen = function setIsDropdownOpen(isOpen) {
39
- if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
60
+ if (!highlightDisabled) {
40
61
  var state = editorView.state,
41
62
  dispatch = editorView.dispatch;
42
63
  // Ignored via go/ees005
@@ -47,7 +68,7 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
47
68
  })(state, dispatch);
48
69
  }
49
70
  };
50
- var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
71
+ var isDropdownOpen = !!isPaletteOpen;
51
72
  var _useDropdownEvents = useDropdownEvents({
52
73
  toolbarItemRef: toolbarItemRef,
53
74
  setIsDropdownOpen: setIsDropdownOpen,
@@ -62,29 +83,29 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
62
83
  isOpenedByKeyboard = _useDropdownEvents.isOpenedByKeyboard;
63
84
 
64
85
  // Don't render the toolbar option while the plugin is initialising
65
- if (!highlightState) {
86
+ if (activeColor === undefined || highlightDisabled === undefined) {
66
87
  return null;
67
88
  }
68
89
  var toolbarButtonLabel = formatMessage(messages.highlight);
69
90
 
70
91
  // Get the design token for the active color (if it exists) to modify the toolbar
71
92
  // icon, but show the nice rainbow if none is selected
72
- var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
93
+ var activeColorToken = activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(activeColor);
73
94
  return jsx(Flex, {
74
95
  alignItems: "center"
75
96
  }, jsx(PaletteDropdown, {
76
97
  popupsMountPoint: popupsMountPoint,
77
98
  popupsBoundariesElement: popupsBoundariesElement,
78
99
  popupsScrollableElement: popupsScrollableElement,
79
- isOpen: isDropdownOpen && !highlightState.disabled,
80
- activeColor: highlightState.activeColor,
100
+ isOpen: isDropdownOpen && !highlightDisabled,
101
+ activeColor: activeColor,
81
102
  trigger: jsx(ToolbarButton
82
103
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
83
104
  , {
84
105
  css: disableBlueBorderStyles,
85
106
  buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
86
107
  spacing: isToolbarReducedSpacing ? 'none' : 'default',
87
- disabled: disabled || highlightState.disabled,
108
+ disabled: disabled || highlightDisabled,
88
109
  selected: isDropdownOpen,
89
110
  "aria-label": tooltip(toggleHighlightPalette, toolbarButtonLabel),
90
111
  "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
@@ -102,7 +123,7 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
102
123
  css: triggerWrapperStylesWithPadding
103
124
  }, jsx(DynamicStrokeIconDecoration, {
104
125
  selectedColor: activeColorToken,
105
- disabled: highlightState.disabled,
126
+ disabled: highlightDisabled,
106
127
  icon: jsx(HighlightIcon, {
107
128
  label: "",
108
129
  color: "currentColor",
@@ -117,7 +138,7 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
117
138
  color: "currentColor"
118
139
  }))) : jsx(Flex, null, jsx(EditorHighlightIcon, {
119
140
  selectedColor: activeColorToken,
120
- disabled: highlightState.disabled
141
+ disabled: highlightDisabled
121
142
  }), jsx("span", {
122
143
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
123
144
  css: expandIconWrapperStyle
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "2.5.0",
3
+ "version": "2.5.2",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,19 +37,19 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "@atlaskit/adf-schema": "^47.6.0",
40
- "@atlaskit/editor-common": "^103.23.0",
40
+ "@atlaskit/editor-common": "^104.1.0",
41
41
  "@atlaskit/editor-palette": "^2.1.0",
42
42
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
43
43
  "@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
44
- "@atlaskit/editor-plugin-selection-toolbar": "^3.5.0",
44
+ "@atlaskit/editor-plugin-selection-toolbar": "^3.6.0",
45
45
  "@atlaskit/editor-plugin-text-formatting": "^2.2.0",
46
46
  "@atlaskit/editor-prosemirror": "7.0.0",
47
47
  "@atlaskit/editor-shared-styles": "^3.4.0",
48
48
  "@atlaskit/editor-tables": "^2.9.0",
49
- "@atlaskit/icon": "^25.6.0",
49
+ "@atlaskit/icon": "^25.8.0",
50
50
  "@atlaskit/platform-feature-flags": "^1.1.0",
51
51
  "@atlaskit/primitives": "^14.7.0",
52
- "@atlaskit/tmp-editor-statsig": "^4.15.0",
52
+ "@atlaskit/tmp-editor-statsig": "^4.19.0",
53
53
  "@atlaskit/tokens": "^4.8.0",
54
54
  "@babel/runtime": "^7.0.0",
55
55
  "@emotion/react": "^11.7.1"