@atlaskit/editor-plugin-selection-toolbar 3.0.1 → 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 (15) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/selectionToolbarPlugin.js +29 -2
  3. package/dist/cjs/ui/PrimaryToolbarComponent.js +7 -3
  4. package/dist/cjs/ui/overflow-toolbar-config.js +15 -12
  5. package/dist/es2019/selectionToolbarPlugin.js +29 -2
  6. package/dist/es2019/ui/PrimaryToolbarComponent.js +7 -3
  7. package/dist/es2019/ui/overflow-toolbar-config.js +15 -12
  8. package/dist/esm/selectionToolbarPlugin.js +29 -2
  9. package/dist/esm/ui/PrimaryToolbarComponent.js +7 -3
  10. package/dist/esm/ui/overflow-toolbar-config.js +15 -12
  11. package/dist/types/selectionToolbarPluginType.d.ts +6 -1
  12. package/dist/types/ui/overflow-toolbar-config.d.ts +9 -2
  13. package/dist/types-ts4.5/selectionToolbarPluginType.d.ts +3 -1
  14. package/dist/types-ts4.5/ui/overflow-toolbar-config.d.ts +9 -2
  15. package/package.json +8 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-selection-toolbar
2
2
 
3
+ ## 3.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 3.1.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#135115](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135115)
14
+ [`599ab2e1d386c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/599ab2e1d386c) -
15
+ ED-27314 add user preferece analytics for toolbar docking
16
+
17
+ ### Patch Changes
18
+
19
+ - [#135586](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135586)
20
+ [`3aeba66081612`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aeba66081612) -
21
+ ED-26593 Add missing i18n for editor control
22
+ - Updated dependencies
23
+
3
24
  ## 3.0.1
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/selectionToolbarPlugin.js CHANGED
@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
  var _bindEventListener = require("bind-event-listener");
12
+ var _analytics = require("@atlaskit/editor-common/analytics");
12
13
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
13
14
  var _utils = require("@atlaskit/editor-common/utils");
14
15
  var _state = require("@atlaskit/editor-prosemirror/state");
@@ -55,6 +56,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
55
56
  });
56
57
  }
57
58
  var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
59
+ var isPreferenceInitialized = false;
58
60
  return {
59
61
  name: 'selectionToolbar',
60
62
  actions: {
@@ -109,7 +111,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
109
111
 
110
112
  // if the toolbarDockingInitialPosition preference has changed
111
113
  // update the toolbarDocking state
112
- if (!previousToolbarDocking) {
114
+ if (!previousToolbarDocking && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2')) {
113
115
  // we currently only check for the initial value
114
116
  var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
115
117
  if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
@@ -156,6 +158,30 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
156
158
  }
157
159
  };
158
160
  },
161
+ appendTransaction: function appendTransaction(_transactions, _oldState, newState) {
162
+ if (!isPreferenceInitialized && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2')) {
163
+ var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
164
+ if (toolbarDockingPreference !== undefined) {
165
+ var _api$analytics;
166
+ isPreferenceInitialized = true;
167
+ var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
168
+ var tr = newState.tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
169
+ toolbarDocking: userToolbarDockingPref
170
+ });
171
+ api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
172
+ action: _analytics.ACTION.INITIALISED,
173
+ actionSubject: _analytics.ACTION_SUBJECT.USER_PREFERENCES,
174
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR_PREFERENCES,
175
+ attributes: {
176
+ toolbarDocking: userToolbarDockingPref
177
+ },
178
+ eventType: _analytics.EVENT_TYPE.OPERATIONAL
179
+ })(tr);
180
+ return tr;
181
+ }
182
+ }
183
+ return null;
184
+ },
159
185
  props: {
160
186
  handleDOMEvents: {
161
187
  mousedown: function mousedown(view) {
@@ -247,7 +273,8 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
247
273
  if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
248
274
  items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
249
275
  api: api,
250
- toolbarDocking: toolbarDocking
276
+ toolbarDocking: toolbarDocking,
277
+ intl: intl
251
278
  })));
252
279
  }
253
280
  var onPositionCalculated;
package/dist/cjs/ui/PrimaryToolbarComponent.js CHANGED
@@ -12,7 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+ var _reactIntlNext = require("react-intl-next");
15
16
  var _keymaps = require("@atlaskit/editor-common/keymaps");
17
+ var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
16
18
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
17
19
  var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
18
20
  var _overflowToolbarConfig = require("./overflow-toolbar-config");
@@ -25,16 +27,18 @@ function PrimaryToolbarComponent(_ref) {
25
27
  popupsBoundariesElement = _ref.popupsBoundariesElement,
26
28
  popupsMountPoint = _ref.popupsMountPoint,
27
29
  popupsScrollableElement = _ref.popupsScrollableElement;
30
+ var intl = (0, _reactIntlNext.useIntl)();
28
31
  var _useState = (0, _react.useState)(false),
29
32
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
30
33
  isOpen = _useState2[0],
31
34
  setIsOpen = _useState2[1];
32
35
  var items = (0, _react.useMemo)(function () {
33
36
  return (0, _overflowToolbarConfig.getOverflowPrimaryToolbarConfig)({
34
- api: api
37
+ api: api,
38
+ intl: intl
35
39
  });
36
- }, [api]);
37
- var content = 'Show more items';
40
+ }, [api, intl]);
41
+ var content = intl.formatMessage(_messages.default.viewMore);
38
42
  var onClick = (0, _react.useCallback)(function () {
39
43
  setIsOpen(!isOpen);
40
44
  }, [isOpen]);
package/dist/cjs/ui/overflow-toolbar-config.js CHANGED
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
9
9
  exports.getOverflowPrimaryToolbarConfig = exports.getOverflowFloatingToolbarConfig = void 0;
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _runtime = require("@compiled/react/runtime");
12
+ var _messages = require("@atlaskit/editor-common/messages");
12
13
  var _dockToolbarTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/dock-toolbar-top"));
13
14
  var _minus = _interopRequireDefault(require("@atlaskit/icon/core/minus"));
14
15
  var _checkMark = _interopRequireDefault(require("@atlaskit/icon/utility/check-mark"));
@@ -18,32 +19,33 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
18
19
  // New editor controls
19
20
  var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
20
21
  var api = _ref.api,
21
- toolbarDocking = _ref.toolbarDocking;
22
+ toolbarDocking = _ref.toolbarDocking,
23
+ intl = _ref.intl;
22
24
  var isDockedToTop = toolbarDocking === 'top';
23
25
  var dropdownOptions = [{
24
26
  type: 'overflow-dropdown-heading',
25
- title: 'Toolbar appears'
27
+ title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarAppears)
26
28
  }, {
27
- title: 'In-line with text',
29
+ title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionInline),
28
30
  onClick: function onClick() {
29
31
  var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
30
32
  return (_api$selectionToolbar = api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
31
33
  },
32
34
  icon: (0, _minus.default)({
33
- label: 'Contextual toolbar'
35
+ label: ''
34
36
  }),
35
37
  selected: !isDockedToTop,
36
38
  elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(_checkMark.default, {
37
39
  label: ""
38
40
  }) : undefined
39
41
  }, {
40
- title: 'Fixed at top',
42
+ title: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionFixedAtTop),
41
43
  onClick: function onClick() {
42
44
  var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
43
45
  return (_api$selectionToolbar4 = api === null || api === void 0 || (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 || (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
44
46
  },
45
47
  icon: (0, _dockToolbarTop.default)({
46
- label: 'Fixed toolbar'
48
+ label: ''
47
49
  }),
48
50
  selected: isDockedToTop,
49
51
  elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(_checkMark.default, {
@@ -60,16 +62,17 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
60
62
  }];
61
63
  };
62
64
  var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {
63
- var api = _ref2.api;
65
+ var api = _ref2.api,
66
+ intl = _ref2.intl;
64
67
  return [{
65
68
  items: [{
66
- content: /*#__PURE__*/React.createElement(_menu.HeadingItem, null, "Toolbar appears"),
69
+ content: /*#__PURE__*/React.createElement(_menu.HeadingItem, null, intl.formatMessage(_messages.selectionToolbarMessages.toolbarAppears)),
67
70
  value: {
68
71
  name: ''
69
72
  },
70
73
  isDisabled: true
71
74
  }, {
72
- content: 'In-line with text',
75
+ content: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionInline),
73
76
  value: {
74
77
  name: 'contextual'
75
78
  },
@@ -78,10 +81,10 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
78
81
  return (_api$selectionToolbar7 = api === null || api === void 0 || (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 || (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
79
82
  },
80
83
  elemBefore: (0, _minus.default)({
81
- label: 'Contextual toolbar'
84
+ label: ''
82
85
  })
83
86
  }, {
84
- content: 'Fixed at top',
87
+ content: intl.formatMessage(_messages.selectionToolbarMessages.toolbarPositionFixedAtTop),
85
88
  value: {
86
89
  name: 'fixed'
87
90
  },
@@ -91,7 +94,7 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
91
94
  },
92
95
  isActive: true,
93
96
  elemBefore: (0, _dockToolbarTop.default)({
94
- label: 'Fixed toolbar'
97
+ label: ''
95
98
  }),
96
99
  elemAfter: /*#__PURE__*/React.createElement(_checkMark.default, {
97
100
  label: ""
package/dist/es2019/selectionToolbarPlugin.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { bind } from 'bind-event-listener';
3
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
3
4
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
5
  import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
5
6
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -46,6 +47,7 @@ export const selectionToolbarPlugin = ({
46
47
  });
47
48
  }
48
49
  let previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
50
+ let isPreferenceInitialized = false;
49
51
  return {
50
52
  name: 'selectionToolbar',
51
53
  actions: {
@@ -103,7 +105,7 @@ export const selectionToolbarPlugin = ({
103
105
 
104
106
  // if the toolbarDockingInitialPosition preference has changed
105
107
  // update the toolbarDocking state
106
- if (!previousToolbarDocking) {
108
+ if (!previousToolbarDocking && !fg('platform_editor_controls_patch_2')) {
107
109
  // we currently only check for the initial value
108
110
  const toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
109
111
  if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
@@ -151,6 +153,30 @@ export const selectionToolbarPlugin = ({
151
153
  }
152
154
  };
153
155
  },
156
+ appendTransaction(_transactions, _oldState, newState) {
157
+ if (!isPreferenceInitialized && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2')) {
158
+ const toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
159
+ if (toolbarDockingPreference !== undefined) {
160
+ var _api$analytics;
161
+ isPreferenceInitialized = true;
162
+ const userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
163
+ const tr = newState.tr.setMeta(selectionToolbarPluginKey, {
164
+ toolbarDocking: userToolbarDockingPref
165
+ });
166
+ api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
167
+ action: ACTION.INITIALISED,
168
+ actionSubject: ACTION_SUBJECT.USER_PREFERENCES,
169
+ actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR_PREFERENCES,
170
+ attributes: {
171
+ toolbarDocking: userToolbarDockingPref
172
+ },
173
+ eventType: EVENT_TYPE.OPERATIONAL
174
+ })(tr);
175
+ return tr;
176
+ }
177
+ }
178
+ return null;
179
+ },
154
180
  props: {
155
181
  handleDOMEvents: {
156
182
  mousedown: view => {
@@ -239,7 +265,8 @@ export const selectionToolbarPlugin = ({
239
265
  if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
240
266
  items.push(...getOverflowFloatingToolbarConfig({
241
267
  api,
242
- toolbarDocking
268
+ toolbarDocking,
269
+ intl
243
270
  }));
244
271
  }
245
272
  let onPositionCalculated;
package/dist/es2019/ui/PrimaryToolbarComponent.js CHANGED
@@ -3,7 +3,9 @@ import "./PrimaryToolbarComponent.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useCallback, useMemo, useState } from 'react';
6
+ import { useIntl } from 'react-intl-next';
6
7
  import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
8
+ import messages from '@atlaskit/editor-common/messages';
7
9
  import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
8
10
  import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
9
11
  import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
@@ -15,11 +17,13 @@ export function PrimaryToolbarComponent({
15
17
  popupsMountPoint,
16
18
  popupsScrollableElement
17
19
  }) {
20
+ const intl = useIntl();
18
21
  const [isOpen, setIsOpen] = useState(false);
19
22
  const items = useMemo(() => getOverflowPrimaryToolbarConfig({
20
- api
21
- }), [api]);
22
- const content = 'Show more items';
23
+ api,
24
+ intl
25
+ }), [api, intl]);
26
+ const content = intl.formatMessage(messages.viewMore);
23
27
  const onClick = useCallback(() => {
24
28
  setIsOpen(!isOpen);
25
29
  }, [isOpen]);
package/dist/es2019/ui/overflow-toolbar-config.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /* overflow-toolbar-config.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
+ import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
4
5
  import DockToolbarTopIcon from '@atlaskit/icon-lab/core/dock-toolbar-top';
5
6
  import MinusIcon from '@atlaskit/icon/core/minus';
6
7
  import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
@@ -8,33 +9,34 @@ import { HeadingItem } from '@atlaskit/menu';
8
9
  // New editor controls
9
10
  export const getOverflowFloatingToolbarConfig = ({
10
11
  api,
11
- toolbarDocking
12
+ toolbarDocking,
13
+ intl
12
14
  }) => {
13
15
  const isDockedToTop = toolbarDocking === 'top';
14
16
  const dropdownOptions = [{
15
17
  type: 'overflow-dropdown-heading',
16
- title: 'Toolbar appears'
18
+ title: intl.formatMessage(selectionToolbarMessages.toolbarAppears)
17
19
  }, {
18
- title: 'In-line with text',
20
+ title: intl.formatMessage(selectionToolbarMessages.toolbarPositionInline),
19
21
  onClick: () => {
20
22
  var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
21
23
  return (_api$selectionToolbar = api === null || api === void 0 ? void 0 : (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
22
24
  },
23
25
  icon: MinusIcon({
24
- label: 'Contextual toolbar'
26
+ label: ''
25
27
  }),
26
28
  selected: !isDockedToTop,
27
29
  elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
28
30
  label: ""
29
31
  }) : undefined
30
32
  }, {
31
- title: 'Fixed at top',
33
+ title: intl.formatMessage(selectionToolbarMessages.toolbarPositionFixedAtTop),
32
34
  onClick: () => {
33
35
  var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
34
36
  return (_api$selectionToolbar4 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 ? void 0 : (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
35
37
  },
36
38
  icon: DockToolbarTopIcon({
37
- label: 'Fixed toolbar'
39
+ label: ''
38
40
  }),
39
41
  selected: isDockedToTop,
40
42
  elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
@@ -51,16 +53,17 @@ export const getOverflowFloatingToolbarConfig = ({
51
53
  }];
52
54
  };
53
55
  export const getOverflowPrimaryToolbarConfig = ({
54
- api
56
+ api,
57
+ intl
55
58
  }) => [{
56
59
  items: [{
57
- content: /*#__PURE__*/React.createElement(HeadingItem, null, "Toolbar appears"),
60
+ content: /*#__PURE__*/React.createElement(HeadingItem, null, intl.formatMessage(selectionToolbarMessages.toolbarAppears)),
58
61
  value: {
59
62
  name: ''
60
63
  },
61
64
  isDisabled: true
62
65
  }, {
63
- content: 'In-line with text',
66
+ content: intl.formatMessage(selectionToolbarMessages.toolbarPositionInline),
64
67
  value: {
65
68
  name: 'contextual'
66
69
  },
@@ -69,10 +72,10 @@ export const getOverflowPrimaryToolbarConfig = ({
69
72
  return (_api$selectionToolbar7 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 ? void 0 : (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
70
73
  },
71
74
  elemBefore: MinusIcon({
72
- label: 'Contextual toolbar'
75
+ label: ''
73
76
  })
74
77
  }, {
75
- content: 'Fixed at top',
78
+ content: intl.formatMessage(selectionToolbarMessages.toolbarPositionFixedAtTop),
76
79
  value: {
77
80
  name: 'fixed'
78
81
  },
@@ -82,7 +85,7 @@ export const getOverflowPrimaryToolbarConfig = ({
82
85
  },
83
86
  isActive: true,
84
87
  elemBefore: DockToolbarTopIcon({
85
- label: 'Fixed toolbar'
88
+ label: ''
86
89
  }),
87
90
  elemAfter: /*#__PURE__*/React.createElement(CheckMarkIcon, {
88
91
  label: ""
package/dist/esm/selectionToolbarPlugin.js CHANGED
@@ -4,6 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
4
4
  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; }
5
5
  import React from 'react';
6
6
  import { bind } from 'bind-event-listener';
7
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
7
8
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
8
9
  import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
9
10
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -48,6 +49,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
48
49
  });
49
50
  }
50
51
  var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
52
+ var isPreferenceInitialized = false;
51
53
  return {
52
54
  name: 'selectionToolbar',
53
55
  actions: {
@@ -102,7 +104,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
102
104
 
103
105
  // if the toolbarDockingInitialPosition preference has changed
104
106
  // update the toolbarDocking state
105
- if (!previousToolbarDocking) {
107
+ if (!previousToolbarDocking && !fg('platform_editor_controls_patch_2')) {
106
108
  // we currently only check for the initial value
107
109
  var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
108
110
  if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
@@ -149,6 +151,30 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
149
151
  }
150
152
  };
151
153
  },
154
+ appendTransaction: function appendTransaction(_transactions, _oldState, newState) {
155
+ if (!isPreferenceInitialized && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2')) {
156
+ var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
157
+ if (toolbarDockingPreference !== undefined) {
158
+ var _api$analytics;
159
+ isPreferenceInitialized = true;
160
+ var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
161
+ var tr = newState.tr.setMeta(selectionToolbarPluginKey, {
162
+ toolbarDocking: userToolbarDockingPref
163
+ });
164
+ api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
165
+ action: ACTION.INITIALISED,
166
+ actionSubject: ACTION_SUBJECT.USER_PREFERENCES,
167
+ actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR_PREFERENCES,
168
+ attributes: {
169
+ toolbarDocking: userToolbarDockingPref
170
+ },
171
+ eventType: EVENT_TYPE.OPERATIONAL
172
+ })(tr);
173
+ return tr;
174
+ }
175
+ }
176
+ return null;
177
+ },
152
178
  props: {
153
179
  handleDOMEvents: {
154
180
  mousedown: function mousedown(view) {
@@ -240,7 +266,8 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
240
266
  if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
241
267
  items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
242
268
  api: api,
243
- toolbarDocking: toolbarDocking
269
+ toolbarDocking: toolbarDocking,
270
+ intl: intl
244
271
  })));
245
272
  }
246
273
  var onPositionCalculated;
package/dist/esm/ui/PrimaryToolbarComponent.js CHANGED
@@ -4,7 +4,9 @@ import "./PrimaryToolbarComponent.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useCallback, useMemo, useState } from 'react';
7
+ import { useIntl } from 'react-intl-next';
7
8
  import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
9
+ import messages from '@atlaskit/editor-common/messages';
8
10
  import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
9
11
  import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
10
12
  import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
@@ -15,16 +17,18 @@ export function PrimaryToolbarComponent(_ref) {
15
17
  popupsBoundariesElement = _ref.popupsBoundariesElement,
16
18
  popupsMountPoint = _ref.popupsMountPoint,
17
19
  popupsScrollableElement = _ref.popupsScrollableElement;
20
+ var intl = useIntl();
18
21
  var _useState = useState(false),
19
22
  _useState2 = _slicedToArray(_useState, 2),
20
23
  isOpen = _useState2[0],
21
24
  setIsOpen = _useState2[1];
22
25
  var items = useMemo(function () {
23
26
  return getOverflowPrimaryToolbarConfig({
24
- api: api
27
+ api: api,
28
+ intl: intl
25
29
  });
26
- }, [api]);
27
- var content = 'Show more items';
30
+ }, [api, intl]);
31
+ var content = intl.formatMessage(messages.viewMore);
28
32
  var onClick = useCallback(function () {
29
33
  setIsOpen(!isOpen);
30
34
  }, [isOpen]);
package/dist/esm/ui/overflow-toolbar-config.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /* overflow-toolbar-config.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
+ import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
4
5
  import DockToolbarTopIcon from '@atlaskit/icon-lab/core/dock-toolbar-top';
5
6
  import MinusIcon from '@atlaskit/icon/core/minus';
6
7
  import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
@@ -8,32 +9,33 @@ import { HeadingItem } from '@atlaskit/menu';
8
9
  // New editor controls
9
10
  export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
10
11
  var api = _ref.api,
11
- toolbarDocking = _ref.toolbarDocking;
12
+ toolbarDocking = _ref.toolbarDocking,
13
+ intl = _ref.intl;
12
14
  var isDockedToTop = toolbarDocking === 'top';
13
15
  var dropdownOptions = [{
14
16
  type: 'overflow-dropdown-heading',
15
- title: 'Toolbar appears'
17
+ title: intl.formatMessage(selectionToolbarMessages.toolbarAppears)
16
18
  }, {
17
- title: 'In-line with text',
19
+ title: intl.formatMessage(selectionToolbarMessages.toolbarPositionInline),
18
20
  onClick: function onClick() {
19
21
  var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
20
22
  return (_api$selectionToolbar = api === null || api === void 0 || (_api$selectionToolbar2 = api.selectionToolbar.actions) === null || _api$selectionToolbar2 === void 0 || (_api$selectionToolbar3 = _api$selectionToolbar2.setToolbarDocking) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.call(_api$selectionToolbar2, 'none')) !== null && _api$selectionToolbar !== void 0 ? _api$selectionToolbar : false;
21
23
  },
22
24
  icon: MinusIcon({
23
- label: 'Contextual toolbar'
25
+ label: ''
24
26
  }),
25
27
  selected: !isDockedToTop,
26
28
  elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
27
29
  label: ""
28
30
  }) : undefined
29
31
  }, {
30
- title: 'Fixed at top',
32
+ title: intl.formatMessage(selectionToolbarMessages.toolbarPositionFixedAtTop),
31
33
  onClick: function onClick() {
32
34
  var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
33
35
  return (_api$selectionToolbar4 = api === null || api === void 0 || (_api$selectionToolbar5 = api.selectionToolbar.actions) === null || _api$selectionToolbar5 === void 0 || (_api$selectionToolbar6 = _api$selectionToolbar5.setToolbarDocking) === null || _api$selectionToolbar6 === void 0 ? void 0 : _api$selectionToolbar6.call(_api$selectionToolbar5, 'top')) !== null && _api$selectionToolbar4 !== void 0 ? _api$selectionToolbar4 : false;
34
36
  },
35
37
  icon: DockToolbarTopIcon({
36
- label: 'Fixed toolbar'
38
+ label: ''
37
39
  }),
38
40
  selected: isDockedToTop,
39
41
  elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
@@ -50,16 +52,17 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
50
52
  }];
51
53
  };
52
54
  export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {
53
- var api = _ref2.api;
55
+ var api = _ref2.api,
56
+ intl = _ref2.intl;
54
57
  return [{
55
58
  items: [{
56
- content: /*#__PURE__*/React.createElement(HeadingItem, null, "Toolbar appears"),
59
+ content: /*#__PURE__*/React.createElement(HeadingItem, null, intl.formatMessage(selectionToolbarMessages.toolbarAppears)),
57
60
  value: {
58
61
  name: ''
59
62
  },
60
63
  isDisabled: true
61
64
  }, {
62
- content: 'In-line with text',
65
+ content: intl.formatMessage(selectionToolbarMessages.toolbarPositionInline),
63
66
  value: {
64
67
  name: 'contextual'
65
68
  },
@@ -68,10 +71,10 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
68
71
  return (_api$selectionToolbar7 = api === null || api === void 0 || (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 || (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
69
72
  },
70
73
  elemBefore: MinusIcon({
71
- label: 'Contextual toolbar'
74
+ label: ''
72
75
  })
73
76
  }, {
74
- content: 'Fixed at top',
77
+ content: intl.formatMessage(selectionToolbarMessages.toolbarPositionFixedAtTop),
75
78
  value: {
76
79
  name: 'fixed'
77
80
  },
@@ -81,7 +84,7 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
81
84
  },
82
85
  isActive: true,
83
86
  elemBefore: DockToolbarTopIcon({
84
- label: 'Fixed toolbar'
87
+ label: ''
85
88
  }),
86
89
  elemAfter: /*#__PURE__*/React.createElement(CheckMarkIcon, {
87
90
  label: ""
package/dist/types/selectionToolbarPluginType.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { NextEditorPlugin, OptionalPlugin, UserPreferencesProvider } from '@atlaskit/editor-common/types';
2
+ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
2
3
  import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
3
4
  import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
4
5
  import type { ToolbarDocking } from './types';
@@ -14,7 +15,11 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
14
15
  userPreferencesProvider?: UserPreferencesProvider;
15
16
  contextualFormattingEnabled?: boolean;
16
17
  };
17
- dependencies: [OptionalPlugin<EditorViewModePlugin>, OptionalPlugin<PrimaryToolbarPlugin>];
18
+ dependencies: [
19
+ OptionalPlugin<EditorViewModePlugin>,
20
+ OptionalPlugin<PrimaryToolbarPlugin>,
21
+ OptionalPlugin<AnalyticsPlugin>
22
+ ];
18
23
  actions?: {
19
24
  suppressToolbar?: () => boolean;
20
25
  unsuppressToolbar?: () => boolean;
package/dist/types/ui/overflow-toolbar-config.d.ts CHANGED
@@ -1,3 +1,9 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ * @jsxFrag
5
+ */
6
+ import { IntlShape } from 'react-intl-next';
1
7
  import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
2
8
  import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
9
  import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
@@ -5,9 +11,10 @@ import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
5
11
  type OverflowToobarConfigOptions = {
6
12
  api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
7
13
  toolbarDocking?: 'top' | 'none';
14
+ intl: IntlShape;
8
15
  };
9
- export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
10
- export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
16
+ export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, intl, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
17
+ export declare const getOverflowPrimaryToolbarConfig: ({ api, intl, }: OverflowToobarConfigOptions) => {
11
18
  items: MenuItem[];
12
19
  }[];
13
20
  export {};
package/dist/types-ts4.5/selectionToolbarPluginType.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { NextEditorPlugin, OptionalPlugin, UserPreferencesProvider } from '@atlaskit/editor-common/types';
2
+ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
2
3
  import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
3
4
  import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
4
5
  import type { ToolbarDocking } from './types';
@@ -16,7 +17,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
16
17
  };
17
18
  dependencies: [
18
19
  OptionalPlugin<EditorViewModePlugin>,
19
- OptionalPlugin<PrimaryToolbarPlugin>
20
+ OptionalPlugin<PrimaryToolbarPlugin>,
21
+ OptionalPlugin<AnalyticsPlugin>
20
22
  ];
21
23
  actions?: {
22
24
  suppressToolbar?: () => boolean;
package/dist/types-ts4.5/ui/overflow-toolbar-config.d.ts CHANGED
@@ -1,3 +1,9 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ * @jsxFrag
5
+ */
6
+ import { IntlShape } from 'react-intl-next';
1
7
  import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
2
8
  import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
9
  import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
@@ -5,9 +11,10 @@ import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
5
11
  type OverflowToobarConfigOptions = {
6
12
  api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
7
13
  toolbarDocking?: 'top' | 'none';
14
+ intl: IntlShape;
8
15
  };
9
- export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
10
- export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
16
+ export declare const getOverflowFloatingToolbarConfig: ({ api, toolbarDocking, intl, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
17
+ export declare const getOverflowPrimaryToolbarConfig: ({ api, intl, }: OverflowToobarConfigOptions) => {
11
18
  items: MenuItem[];
12
19
  }[];
13
20
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-toolbar",
3
- "version": "3.0.1",
3
+ "version": "3.1.1",
4
4
  "description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,22 +34,24 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/css": "^0.10.0",
37
- "@atlaskit/editor-common": "^102.16.0",
37
+ "@atlaskit/editor-common": "^103.0.0",
38
+ "@atlaskit/editor-plugin-analytics": "^2.2.0",
38
39
  "@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
39
40
  "@atlaskit/editor-plugin-primary-toolbar": "^3.1.0",
40
41
  "@atlaskit/editor-prosemirror": "7.0.0",
41
- "@atlaskit/icon": "^25.4.0",
42
- "@atlaskit/icon-lab": "^4.5.0",
42
+ "@atlaskit/icon": "^25.5.0",
43
+ "@atlaskit/icon-lab": "^4.6.0",
43
44
  "@atlaskit/menu": "^3.2.0",
44
45
  "@atlaskit/platform-feature-flags": "^1.1.0",
45
46
  "@atlaskit/tmp-editor-statsig": "^4.6.0",
46
- "@atlaskit/tokens": "^4.5.0",
47
+ "@atlaskit/tokens": "^4.7.0",
47
48
  "@babel/runtime": "^7.0.0",
48
49
  "bind-event-listener": "^3.0.0"
49
50
  },
50
51
  "peerDependencies": {
51
52
  "react": "^18.2.0",
52
- "react-dom": "^18.2.0"
53
+ "react-dom": "^18.2.0",
54
+ "react-intl-next": "npm:react-intl@^5.18.1"
53
55
  },
54
56
  "devDependencies": {
55
57
  "@af/visual-regression": "^1.3.0",