@atlaskit/editor-plugin-highlight 2.6.1 → 2.6.3

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 2.6.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 2.6.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [#172433](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172433)
14
+ [`3d8ebdcd90704`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d8ebdcd90704) -
15
+ [ux] ED-28172 [Selection Toolbar] Highlight color keyboard shortcut (cmd+opt+B) doesn't work
16
+ - Updated dependencies
17
+
3
18
  ## 2.6.1
4
19
 
5
20
  ### Patch Changes
@@ -83,10 +83,11 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
83
83
  })) {
84
84
  var toolbarCustom = {
85
85
  type: 'custom',
86
- render: function render(_view, _idx, dispatchAnalyticsEvent) {
86
+ render: function render(view, _idx, dispatchAnalyticsEvent) {
87
87
  return /*#__PURE__*/_react.default.createElement(_FloatingToolbarHighlightColor.FloatingToolbarHighlightColorWithIntl, {
88
88
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
89
- pluginInjectionApi: api
89
+ pluginInjectionApi: api,
90
+ editorView: view
90
91
  });
91
92
  },
92
93
  fallback: []
@@ -22,6 +22,7 @@ var _highlight = _interopRequireDefault(require("@atlaskit/icon/core/highlight")
22
22
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
23
23
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
24
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
25
+ var _palette = require("../editor-commands/palette");
25
26
  var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
26
27
  var _PaletteDropdown = require("./shared/PaletteDropdown");
27
28
  var _useDropdownEvents2 = require("./shared/useDropdownEvents");
@@ -39,34 +40,50 @@ var highlightIconContainerStyle = (0, _react2.css)({
39
40
  marginTop: "var(--ds-space-negative-050, -4px)"
40
41
  });
41
42
  var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
43
+ var isPaletteOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.isPaletteOpen');
42
44
  var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
43
45
  var disabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.disabled');
44
46
  return {
45
47
  activeColor: activeColor,
46
- disabled: disabled
48
+ disabled: disabled,
49
+ isPaletteOpen: isPaletteOpen
47
50
  };
48
51
  }, function (api) {
49
52
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['highlight']),
50
53
  highlightState = _useSharedPluginState.highlightState;
51
54
  return {
55
+ isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
52
56
  activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
53
57
  disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
54
58
  };
55
59
  });
56
60
  var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
57
61
  var pluginInjectionApi = _ref.pluginInjectionApi,
58
- formatMessage = _ref.intl.formatMessage;
62
+ formatMessage = _ref.intl.formatMessage,
63
+ editorView = _ref.editorView;
59
64
  var toolbarItemRef = (0, _react.useRef)(null);
60
65
  var _useState = (0, _react.useState)(false),
61
66
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
62
- isDropdownOpen = _useState2[0],
63
- setIsDropdownOpen = _useState2[1];
67
+ isDropdownOpenLocal = _useState2[0],
68
+ setIsDropdownOpenLocal = _useState2[1];
64
69
  var _useSharedState = useSharedState(pluginInjectionApi),
65
70
  activeColor = _useSharedState.activeColor,
66
- disabled = _useSharedState.disabled;
71
+ disabled = _useSharedState.disabled,
72
+ isPaletteOpen = _useSharedState.isPaletteOpen;
67
73
  var setDropdownOpen = function setDropdownOpen(isOpen) {
68
74
  var _pluginInjectionApi$a;
69
- setIsDropdownOpen(isOpen);
75
+ if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_14')) {
76
+ if (!disabled && editorView && pluginInjectionApi) {
77
+ var state = editorView.state,
78
+ dispatch = editorView.dispatch;
79
+ (0, _palette.setPalette)(pluginInjectionApi)({
80
+ isPaletteOpen: isOpen,
81
+ inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
82
+ })(state, dispatch);
83
+ }
84
+ } else {
85
+ setIsDropdownOpenLocal(isOpen);
86
+ }
70
87
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.fireAnalyticsEvent({
71
88
  action: isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED,
72
89
  actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
@@ -77,6 +94,8 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
77
94
  }
78
95
  });
79
96
  };
97
+ var isDropdownOpenShared = !!isPaletteOpen;
98
+ var isDropdownOpen = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_14') ? isDropdownOpenShared : isDropdownOpenLocal;
80
99
  var _useDropdownEvents = (0, _useDropdownEvents2.useDropdownEvents)({
81
100
  toolbarItemRef: toolbarItemRef,
82
101
  setIsDropdownOpen: setDropdownOpen,
@@ -112,6 +131,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
112
131
  disabled: disabled,
113
132
  selected: isDropdownOpen,
114
133
  "aria-label": title,
134
+ "aria-keyshortcuts": (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_14') ? (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleHighlightPalette) : undefined,
115
135
  "aria-expanded": isDropdownOpen,
116
136
  "aria-haspopup": true,
117
137
  title: title,
@@ -72,9 +72,10 @@ export const highlightPlugin = ({
72
72
  })) {
73
73
  const toolbarCustom = {
74
74
  type: 'custom',
75
- render: (_view, _idx, dispatchAnalyticsEvent) => /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
75
+ render: (view, _idx, dispatchAnalyticsEvent) => /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
76
76
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
77
- pluginInjectionApi: api
77
+ pluginInjectionApi: api,
78
+ editorView: view
78
79
  }),
79
80
  fallback: []
80
81
  };
@@ -10,7 +10,7 @@ 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
11
  import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
12
12
  import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
13
- import { toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
13
+ import { toggleHighlightPalette, tooltip, getAriaKeyshortcuts } 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';
@@ -20,6 +20,7 @@ import HighlightIcon from '@atlaskit/icon/core/highlight';
20
20
  import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
21
21
  import { fg } from '@atlaskit/platform-feature-flags';
22
22
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
23
+ 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';
@@ -30,17 +31,20 @@ const highlightIconContainerStyle = css({
30
31
  marginTop: "var(--ds-space-negative-050, -4px)"
31
32
  });
32
33
  const useSharedState = sharedPluginStateHookMigratorFactory(api => {
34
+ const isPaletteOpen = useSharedPluginStateSelector(api, 'highlight.isPaletteOpen');
33
35
  const activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
34
36
  const disabled = useSharedPluginStateSelector(api, 'highlight.disabled');
35
37
  return {
36
38
  activeColor,
37
- disabled
39
+ disabled,
40
+ isPaletteOpen
38
41
  };
39
42
  }, api => {
40
43
  const {
41
44
  highlightState
42
45
  } = useSharedPluginState(api, ['highlight']);
43
46
  return {
47
+ isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
44
48
  activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
45
49
  disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
46
50
  };
@@ -49,17 +53,32 @@ const FloatingToolbarHighlightColor = ({
49
53
  pluginInjectionApi,
50
54
  intl: {
51
55
  formatMessage
52
- }
56
+ },
57
+ editorView
53
58
  }) => {
54
59
  const toolbarItemRef = useRef(null);
55
- const [isDropdownOpen, setIsDropdownOpen] = useState(false);
60
+ const [isDropdownOpenLocal, setIsDropdownOpenLocal] = useState(false);
56
61
  const {
57
62
  activeColor,
58
- disabled
63
+ disabled,
64
+ isPaletteOpen
59
65
  } = useSharedState(pluginInjectionApi);
60
66
  const setDropdownOpen = isOpen => {
61
67
  var _pluginInjectionApi$a;
62
- setIsDropdownOpen(isOpen);
68
+ if (fg('platform_editor_controls_patch_14')) {
69
+ if (!disabled && editorView && pluginInjectionApi) {
70
+ const {
71
+ state,
72
+ dispatch
73
+ } = editorView;
74
+ setPalette(pluginInjectionApi)({
75
+ isPaletteOpen: isOpen,
76
+ inputMethod: INPUT_METHOD.FLOATING_TB
77
+ })(state, dispatch);
78
+ }
79
+ } else {
80
+ setIsDropdownOpenLocal(isOpen);
81
+ }
63
82
  pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent({
64
83
  action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
65
84
  actionSubject: ACTION_SUBJECT.TOOLBAR,
@@ -70,6 +89,8 @@ const FloatingToolbarHighlightColor = ({
70
89
  }
71
90
  });
72
91
  };
92
+ const isDropdownOpenShared = !!isPaletteOpen;
93
+ const isDropdownOpen = fg('platform_editor_controls_patch_14') ? isDropdownOpenShared : isDropdownOpenLocal;
73
94
  const {
74
95
  handleClick,
75
96
  handleKeyDown,
@@ -106,6 +127,7 @@ const FloatingToolbarHighlightColor = ({
106
127
  disabled: disabled,
107
128
  selected: isDropdownOpen,
108
129
  "aria-label": title,
130
+ "aria-keyshortcuts": fg('platform_editor_controls_patch_14') ? getAriaKeyshortcuts(toggleHighlightPalette) : undefined,
109
131
  "aria-expanded": isDropdownOpen,
110
132
  "aria-haspopup": true,
111
133
  title: title,
@@ -76,10 +76,11 @@ export var highlightPlugin = function highlightPlugin(_ref) {
76
76
  })) {
77
77
  var toolbarCustom = {
78
78
  type: 'custom',
79
- render: function render(_view, _idx, dispatchAnalyticsEvent) {
79
+ render: function render(view, _idx, dispatchAnalyticsEvent) {
80
80
  return /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
81
81
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
82
- pluginInjectionApi: api
82
+ pluginInjectionApi: api,
83
+ editorView: view
83
84
  });
84
85
  },
85
86
  fallback: []
@@ -11,7 +11,7 @@ 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
12
  import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
13
13
  import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
14
- import { toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
14
+ import { toggleHighlightPalette, tooltip, getAriaKeyshortcuts } 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';
@@ -21,6 +21,7 @@ import HighlightIcon from '@atlaskit/icon/core/highlight';
21
21
  import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
22
22
  import { fg } from '@atlaskit/platform-feature-flags';
23
23
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
24
+ import { setPalette } from '../editor-commands/palette';
24
25
  import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
25
26
  import { PaletteDropdown } from './shared/PaletteDropdown';
26
27
  import { useDropdownEvents } from './shared/useDropdownEvents';
@@ -31,34 +32,50 @@ var highlightIconContainerStyle = css({
31
32
  marginTop: "var(--ds-space-negative-050, -4px)"
32
33
  });
33
34
  var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
35
+ var isPaletteOpen = useSharedPluginStateSelector(api, 'highlight.isPaletteOpen');
34
36
  var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
35
37
  var disabled = useSharedPluginStateSelector(api, 'highlight.disabled');
36
38
  return {
37
39
  activeColor: activeColor,
38
- disabled: disabled
40
+ disabled: disabled,
41
+ isPaletteOpen: isPaletteOpen
39
42
  };
40
43
  }, function (api) {
41
44
  var _useSharedPluginState = useSharedPluginState(api, ['highlight']),
42
45
  highlightState = _useSharedPluginState.highlightState;
43
46
  return {
47
+ isPaletteOpen: highlightState === null || highlightState === void 0 ? void 0 : highlightState.isPaletteOpen,
44
48
  activeColor: highlightState === null || highlightState === void 0 ? void 0 : highlightState.activeColor,
45
49
  disabled: highlightState === null || highlightState === void 0 ? void 0 : highlightState.disabled
46
50
  };
47
51
  });
48
52
  var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
49
53
  var pluginInjectionApi = _ref.pluginInjectionApi,
50
- formatMessage = _ref.intl.formatMessage;
54
+ formatMessage = _ref.intl.formatMessage,
55
+ editorView = _ref.editorView;
51
56
  var toolbarItemRef = useRef(null);
52
57
  var _useState = useState(false),
53
58
  _useState2 = _slicedToArray(_useState, 2),
54
- isDropdownOpen = _useState2[0],
55
- setIsDropdownOpen = _useState2[1];
59
+ isDropdownOpenLocal = _useState2[0],
60
+ setIsDropdownOpenLocal = _useState2[1];
56
61
  var _useSharedState = useSharedState(pluginInjectionApi),
57
62
  activeColor = _useSharedState.activeColor,
58
- disabled = _useSharedState.disabled;
63
+ disabled = _useSharedState.disabled,
64
+ isPaletteOpen = _useSharedState.isPaletteOpen;
59
65
  var setDropdownOpen = function setDropdownOpen(isOpen) {
60
66
  var _pluginInjectionApi$a;
61
- setIsDropdownOpen(isOpen);
67
+ if (fg('platform_editor_controls_patch_14')) {
68
+ if (!disabled && editorView && pluginInjectionApi) {
69
+ var state = editorView.state,
70
+ dispatch = editorView.dispatch;
71
+ setPalette(pluginInjectionApi)({
72
+ isPaletteOpen: isOpen,
73
+ inputMethod: INPUT_METHOD.FLOATING_TB
74
+ })(state, dispatch);
75
+ }
76
+ } else {
77
+ setIsDropdownOpenLocal(isOpen);
78
+ }
62
79
  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.fireAnalyticsEvent({
63
80
  action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
64
81
  actionSubject: ACTION_SUBJECT.TOOLBAR,
@@ -69,6 +86,8 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
69
86
  }
70
87
  });
71
88
  };
89
+ var isDropdownOpenShared = !!isPaletteOpen;
90
+ var isDropdownOpen = fg('platform_editor_controls_patch_14') ? isDropdownOpenShared : isDropdownOpenLocal;
72
91
  var _useDropdownEvents = useDropdownEvents({
73
92
  toolbarItemRef: toolbarItemRef,
74
93
  setIsDropdownOpen: setDropdownOpen,
@@ -104,6 +123,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
104
123
  disabled: disabled,
105
124
  selected: isDropdownOpen,
106
125
  "aria-label": title,
126
+ "aria-keyshortcuts": fg('platform_editor_controls_patch_14') ? getAriaKeyshortcuts(toggleHighlightPalette) : undefined,
107
127
  "aria-expanded": isDropdownOpen,
108
128
  "aria-haspopup": true,
109
129
  title: title,
@@ -2,10 +2,12 @@
2
2
  import type { WrappedComponentProps } from 'react-intl-next';
3
3
  import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
4
4
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
5
+ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
5
6
  import type { HighlightPlugin } from '../highlightPluginType';
6
7
  type FloatingToolbarHighlightColorProps = {
7
8
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
8
9
  pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
10
+ editorView: EditorView | undefined;
9
11
  } & WrappedComponentProps;
10
12
  export declare const FloatingToolbarHighlightColorWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<FloatingToolbarHighlightColorProps>> & {
11
13
  WrappedComponent: import("react").ComponentType<FloatingToolbarHighlightColorProps>;
@@ -2,10 +2,12 @@
2
2
  import type { WrappedComponentProps } from 'react-intl-next';
3
3
  import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
4
4
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
5
+ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
5
6
  import type { HighlightPlugin } from '../highlightPluginType';
6
7
  type FloatingToolbarHighlightColorProps = {
7
8
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
8
9
  pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
10
+ editorView: EditorView | undefined;
9
11
  } & WrappedComponentProps;
10
12
  export declare const FloatingToolbarHighlightColorWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<FloatingToolbarHighlightColorProps>> & {
11
13
  WrappedComponent: import("react").ComponentType<FloatingToolbarHighlightColorProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "2.6.1",
3
+ "version": "2.6.3",
4
4
  "description": "Highlight plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,7 +37,7 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "@atlaskit/adf-schema": "^47.6.0",
40
- "@atlaskit/editor-common": "^106.9.0",
40
+ "@atlaskit/editor-common": "^107.0.0",
41
41
  "@atlaskit/editor-palette": "^2.1.0",
42
42
  "@atlaskit/editor-plugin-analytics": "^2.3.0",
43
43
  "@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
@@ -115,6 +115,9 @@
115
115
  },
116
116
  "platform-visual-refresh-icons": {
117
117
  "type": "boolean"
118
+ },
119
+ "platform_editor_controls_patch_14": {
120
+ "type": "boolean"
118
121
  }
119
122
  }
120
123
  }