@atlaskit/editor-plugin-selection-toolbar 2.1.3 → 2.3.0

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,25 @@
1
1
  # @atlaskit/editor-plugin-selection-toolbar
2
2
 
3
+ ## 2.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#128813](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128813)
8
+ [`6ced71640a4ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6ced71640a4ba) -
9
+ ED-26877 selection toolbar plugin refreshes with user preferences
10
+
11
+ ## 2.2.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#130044](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130044)
16
+ [`cad348d512cdf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cad348d512cdf) -
17
+ [ux] ED-26802 contextual formatting configuration
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies
22
+
3
23
  ## 2.1.3
4
24
 
5
25
  ### Patch Changes
@@ -19,12 +19,20 @@ var _overflowToolbarConfig = require("./ui/overflow-toolbar-config");
19
19
  var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
20
20
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
21
21
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
22
+ var getInitialToolbarDocking = function getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
23
+ if (contextualFormattingEnabled && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
24
+ var _userPreferencesProvi;
25
+ return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
26
+ }
27
+ return 'top';
28
+ };
22
29
  var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
23
30
  var api = _ref.api,
24
31
  config = _ref.config;
25
32
  var __selectionToolbarHandlers = [];
26
33
  var primaryToolbarComponent;
27
- var userPreferencesProvider = config.userPreferencesProvider;
34
+ var userPreferencesProvider = config.userPreferencesProvider,
35
+ contextualFormattingEnabled = config.contextualFormattingEnabled;
28
36
  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
29
37
  exposure: true
30
38
  })) {
@@ -45,6 +53,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
45
53
  component: primaryToolbarComponent
46
54
  });
47
55
  }
56
+ var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
48
57
  return {
49
58
  name: 'selectionToolbar',
50
59
  actions: {
@@ -85,14 +94,10 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
85
94
  key: _pluginKey.selectionToolbarPluginKey,
86
95
  state: {
87
96
  init: function init() {
88
- var toolbarDocking = 'top';
89
- if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
90
- toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
91
- }
92
97
  return {
93
98
  selectionStable: false,
94
99
  hide: false,
95
- toolbarDocking: toolbarDocking
100
+ toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
96
101
  };
97
102
  },
98
103
  apply: function apply(tr, pluginState) {
@@ -100,6 +105,22 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
100
105
  if (meta) {
101
106
  return _objectSpread(_objectSpread({}, pluginState), meta);
102
107
  }
108
+
109
+ // if the toolbarDockingInitialPosition preference has changed
110
+ // update the toolbarDocking state
111
+ if (!previousToolbarDocking) {
112
+ // we currently only check for the initial value
113
+ var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
114
+ if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
115
+ previousToolbarDocking = toolbarDockingPreference;
116
+ var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
117
+ if (pluginState.toolbarDocking !== userToolbarDockingPref) {
118
+ return _objectSpread(_objectSpread({}, pluginState), {}, {
119
+ toolbarDocking: userToolbarDockingPref
120
+ });
121
+ }
122
+ }
123
+ }
103
124
  return pluginState;
104
125
  }
105
126
  },
@@ -221,7 +242,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
221
242
  }
222
243
  }
223
244
  }
224
- if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
245
+ if (items.length > 0 && contextualFormattingEnabled && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
225
246
  items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
226
247
  api: api,
227
248
  toolbarDocking: toolbarDocking
@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.getOverflowPrimaryToolbarConfig = exports.getOverflowFloatingToolbarConfig = void 0;
8
8
  var _react = require("@emotion/react");
9
+ var _dockToolbarTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/dock-toolbar-top"));
10
+ var _minus = _interopRequireDefault(require("@atlaskit/icon/core/minus"));
9
11
  var _checkMark = _interopRequireDefault(require("@atlaskit/icon/utility/check-mark"));
10
12
  var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right"));
11
13
  var _menu = require("@atlaskit/menu");
12
- var _ContextualToolbarIcon = require("./icons/ContextualToolbarIcon");
13
- var _FixedToolbarIcon = require("./icons/FixedToolbarIcon");
14
14
  /**
15
15
  * @jsxRuntime classic
16
16
  * @jsx jsx
@@ -56,8 +56,8 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
56
56
  var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
57
57
  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;
58
58
  },
59
- icon: (0, _react.jsx)(_ContextualToolbarIcon.ContextualToolbarIcon, {
60
- label: "Contextual toolbar"
59
+ icon: (0, _minus.default)({
60
+ label: 'Contextual toolbar'
61
61
  }),
62
62
  selected: !isDockedToTop,
63
63
  elemAfter: !isDockedToTop ? (0, _react.jsx)(_checkMark.default, {
@@ -69,8 +69,8 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
69
69
  var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
70
70
  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;
71
71
  },
72
- icon: (0, _react.jsx)(_FixedToolbarIcon.FixedToolbarIcon, {
73
- label: "Fixed toolbar"
72
+ icon: (0, _dockToolbarTop.default)({
73
+ label: 'Fixed toolbar'
74
74
  }),
75
75
  selected: isDockedToTop,
76
76
  elemAfter: isDockedToTop ? (0, _react.jsx)(_checkMark.default, {
@@ -104,8 +104,8 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
104
104
  var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
105
105
  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;
106
106
  },
107
- elemBefore: (0, _react.jsx)(_ContextualToolbarIcon.ContextualToolbarIcon, {
108
- label: "Contextual toolbar"
107
+ elemBefore: (0, _minus.default)({
108
+ label: 'Contextual toolbar'
109
109
  })
110
110
  }, {
111
111
  content: 'Fixed at top',
@@ -117,8 +117,8 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
117
117
  return (_api$selectionToolbar10 = api === null || api === void 0 || (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 || (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
118
118
  },
119
119
  isActive: true,
120
- elemBefore: (0, _react.jsx)(_FixedToolbarIcon.FixedToolbarIcon, {
121
- label: "Fixed toolbar"
120
+ elemBefore: (0, _dockToolbarTop.default)({
121
+ label: 'Fixed toolbar'
122
122
  }),
123
123
  elemAfter: (0, _react.jsx)(_checkMark.default, {
124
124
  label: ""
@@ -8,6 +8,13 @@ import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
8
8
  import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
9
9
  import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
10
10
  import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
11
+ const getInitialToolbarDocking = (contextualFormattingEnabled, userPreferencesProvider) => {
12
+ if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
13
+ var _userPreferencesProvi;
14
+ return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
15
+ }
16
+ return 'top';
17
+ };
11
18
  export const selectionToolbarPlugin = ({
12
19
  api,
13
20
  config
@@ -15,7 +22,8 @@ export const selectionToolbarPlugin = ({
15
22
  const __selectionToolbarHandlers = [];
16
23
  let primaryToolbarComponent;
17
24
  const {
18
- userPreferencesProvider
25
+ userPreferencesProvider,
26
+ contextualFormattingEnabled
19
27
  } = config;
20
28
  if (editorExperiment('platform_editor_controls', 'variant1', {
21
29
  exposure: true
@@ -36,6 +44,7 @@ export const selectionToolbarPlugin = ({
36
44
  component: primaryToolbarComponent
37
45
  });
38
46
  }
47
+ let previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
39
48
  return {
40
49
  name: 'selectionToolbar',
41
50
  actions: {
@@ -76,14 +85,10 @@ export const selectionToolbarPlugin = ({
76
85
  key: selectionToolbarPluginKey,
77
86
  state: {
78
87
  init() {
79
- let toolbarDocking = 'top';
80
- if (editorExperiment('platform_editor_controls', 'variant1')) {
81
- toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
82
- }
83
88
  return {
84
89
  selectionStable: false,
85
90
  hide: false,
86
- toolbarDocking
91
+ toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
87
92
  };
88
93
  },
89
94
  apply(tr, pluginState) {
@@ -94,6 +99,23 @@ export const selectionToolbarPlugin = ({
94
99
  ...meta
95
100
  };
96
101
  }
102
+
103
+ // if the toolbarDockingInitialPosition preference has changed
104
+ // update the toolbarDocking state
105
+ if (!previousToolbarDocking) {
106
+ // we currently only check for the initial value
107
+ const toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
108
+ if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
109
+ previousToolbarDocking = toolbarDockingPreference;
110
+ const userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
111
+ if (pluginState.toolbarDocking !== userToolbarDockingPref) {
112
+ return {
113
+ ...pluginState,
114
+ toolbarDocking: userToolbarDockingPref
115
+ };
116
+ }
117
+ }
118
+ }
97
119
  return pluginState;
98
120
  }
99
121
  },
@@ -212,7 +234,7 @@ export const selectionToolbarPlugin = ({
212
234
  }
213
235
  }
214
236
  }
215
- if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
237
+ if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
216
238
  items.push(...getOverflowFloatingToolbarConfig({
217
239
  api,
218
240
  toolbarDocking
@@ -5,11 +5,11 @@
5
5
  */
6
6
  import { jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
7
7
 
8
+ import DockToolbarTopIcon from '@atlaskit/icon-lab/core/dock-toolbar-top';
9
+ import MinusIcon from '@atlaskit/icon/core/minus';
8
10
  import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
9
11
  import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right';
10
12
  import { HeadingItem } from '@atlaskit/menu';
11
- import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
12
- import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
13
13
  // New editor controls
14
14
  export const getOverflowFloatingToolbarConfig = ({
15
15
  api,
@@ -49,8 +49,8 @@ export const getOverflowFloatingToolbarConfig = ({
49
49
  var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
50
50
  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;
51
51
  },
52
- icon: jsx(ContextualToolbarIcon, {
53
- label: "Contextual toolbar"
52
+ icon: MinusIcon({
53
+ label: 'Contextual toolbar'
54
54
  }),
55
55
  selected: !isDockedToTop,
56
56
  elemAfter: !isDockedToTop ? jsx(CheckMarkIcon, {
@@ -62,8 +62,8 @@ export const getOverflowFloatingToolbarConfig = ({
62
62
  var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
63
63
  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;
64
64
  },
65
- icon: jsx(FixedToolbarIcon, {
66
- label: "Fixed toolbar"
65
+ icon: DockToolbarTopIcon({
66
+ label: 'Fixed toolbar'
67
67
  }),
68
68
  selected: isDockedToTop,
69
69
  elemAfter: isDockedToTop ? jsx(CheckMarkIcon, {
@@ -97,8 +97,8 @@ export const getOverflowPrimaryToolbarConfig = ({
97
97
  var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
98
98
  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;
99
99
  },
100
- elemBefore: jsx(ContextualToolbarIcon, {
101
- label: "Contextual toolbar"
100
+ elemBefore: MinusIcon({
101
+ label: 'Contextual toolbar'
102
102
  })
103
103
  }, {
104
104
  content: 'Fixed at top',
@@ -110,8 +110,8 @@ export const getOverflowPrimaryToolbarConfig = ({
110
110
  return (_api$selectionToolbar10 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 ? void 0 : (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
111
111
  },
112
112
  isActive: true,
113
- elemBefore: jsx(FixedToolbarIcon, {
114
- label: "Fixed toolbar"
113
+ elemBefore: DockToolbarTopIcon({
114
+ label: 'Fixed toolbar'
115
115
  }),
116
116
  elemAfter: jsx(CheckMarkIcon, {
117
117
  label: ""
@@ -12,12 +12,20 @@ import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plu
12
12
  import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
13
13
  import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
14
14
  import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
15
+ var getInitialToolbarDocking = function getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider) {
16
+ if (contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
17
+ var _userPreferencesProvi;
18
+ return (_userPreferencesProvi = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) !== null && _userPreferencesProvi !== void 0 ? _userPreferencesProvi : 'none';
19
+ }
20
+ return 'top';
21
+ };
15
22
  export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
16
23
  var api = _ref.api,
17
24
  config = _ref.config;
18
25
  var __selectionToolbarHandlers = [];
19
26
  var primaryToolbarComponent;
20
- var userPreferencesProvider = config.userPreferencesProvider;
27
+ var userPreferencesProvider = config.userPreferencesProvider,
28
+ contextualFormattingEnabled = config.contextualFormattingEnabled;
21
29
  if (editorExperiment('platform_editor_controls', 'variant1', {
22
30
  exposure: true
23
31
  })) {
@@ -38,6 +46,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
38
46
  component: primaryToolbarComponent
39
47
  });
40
48
  }
49
+ var previousToolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || null;
41
50
  return {
42
51
  name: 'selectionToolbar',
43
52
  actions: {
@@ -78,14 +87,10 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
78
87
  key: selectionToolbarPluginKey,
79
88
  state: {
80
89
  init: function init() {
81
- var toolbarDocking = 'top';
82
- if (editorExperiment('platform_editor_controls', 'variant1')) {
83
- toolbarDocking = (userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition')) || 'none';
84
- }
85
90
  return {
86
91
  selectionStable: false,
87
92
  hide: false,
88
- toolbarDocking: toolbarDocking
93
+ toolbarDocking: getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider)
89
94
  };
90
95
  },
91
96
  apply: function apply(tr, pluginState) {
@@ -93,6 +98,22 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
93
98
  if (meta) {
94
99
  return _objectSpread(_objectSpread({}, pluginState), meta);
95
100
  }
101
+
102
+ // if the toolbarDockingInitialPosition preference has changed
103
+ // update the toolbarDocking state
104
+ if (!previousToolbarDocking) {
105
+ // we currently only check for the initial value
106
+ var toolbarDockingPreference = userPreferencesProvider === null || userPreferencesProvider === void 0 ? void 0 : userPreferencesProvider.getPreference('toolbarDockingInitialPosition');
107
+ if (toolbarDockingPreference && toolbarDockingPreference !== previousToolbarDocking) {
108
+ previousToolbarDocking = toolbarDockingPreference;
109
+ var userToolbarDockingPref = getInitialToolbarDocking(contextualFormattingEnabled, userPreferencesProvider);
110
+ if (pluginState.toolbarDocking !== userToolbarDockingPref) {
111
+ return _objectSpread(_objectSpread({}, pluginState), {}, {
112
+ toolbarDocking: userToolbarDockingPref
113
+ });
114
+ }
115
+ }
116
+ }
96
117
  return pluginState;
97
118
  }
98
119
  },
@@ -214,7 +235,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
214
235
  }
215
236
  }
216
237
  }
217
- if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
238
+ if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
218
239
  items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
219
240
  api: api,
220
241
  toolbarDocking: toolbarDocking
@@ -5,11 +5,11 @@
5
5
  */
6
6
  import { jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
7
7
 
8
+ import DockToolbarTopIcon from '@atlaskit/icon-lab/core/dock-toolbar-top';
9
+ import MinusIcon from '@atlaskit/icon/core/minus';
8
10
  import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
9
11
  import ChevronRightIcon from '@atlaskit/icon/utility/migration/chevron-right';
10
12
  import { HeadingItem } from '@atlaskit/menu';
11
- import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
12
- import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
13
13
  // New editor controls
14
14
  export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
15
15
  var api = _ref.api,
@@ -48,8 +48,8 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
48
48
  var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
49
49
  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;
50
50
  },
51
- icon: jsx(ContextualToolbarIcon, {
52
- label: "Contextual toolbar"
51
+ icon: MinusIcon({
52
+ label: 'Contextual toolbar'
53
53
  }),
54
54
  selected: !isDockedToTop,
55
55
  elemAfter: !isDockedToTop ? jsx(CheckMarkIcon, {
@@ -61,8 +61,8 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
61
61
  var _api$selectionToolbar4, _api$selectionToolbar5, _api$selectionToolbar6;
62
62
  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;
63
63
  },
64
- icon: jsx(FixedToolbarIcon, {
65
- label: "Fixed toolbar"
64
+ icon: DockToolbarTopIcon({
65
+ label: 'Fixed toolbar'
66
66
  }),
67
67
  selected: isDockedToTop,
68
68
  elemAfter: isDockedToTop ? jsx(CheckMarkIcon, {
@@ -96,8 +96,8 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
96
96
  var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
97
97
  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;
98
98
  },
99
- elemBefore: jsx(ContextualToolbarIcon, {
100
- label: "Contextual toolbar"
99
+ elemBefore: MinusIcon({
100
+ label: 'Contextual toolbar'
101
101
  })
102
102
  }, {
103
103
  content: 'Fixed at top',
@@ -109,8 +109,8 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
109
109
  return (_api$selectionToolbar10 = api === null || api === void 0 || (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 || (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
110
110
  },
111
111
  isActive: true,
112
- elemBefore: jsx(FixedToolbarIcon, {
113
- label: "Fixed toolbar"
112
+ elemBefore: DockToolbarTopIcon({
113
+ label: 'Fixed toolbar'
114
114
  }),
115
115
  elemAfter: jsx(CheckMarkIcon, {
116
116
  label: ""
@@ -12,6 +12,7 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
12
12
  */
13
13
  preferenceToolbarAboveSelection?: boolean;
14
14
  userPreferencesProvider?: UserPreferencesProvider;
15
+ contextualFormattingEnabled?: boolean;
15
16
  };
16
17
  dependencies: [OptionalPlugin<EditorViewModePlugin>, OptionalPlugin<PrimaryToolbarPlugin>];
17
18
  actions?: {
@@ -12,6 +12,7 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
12
12
  */
13
13
  preferenceToolbarAboveSelection?: boolean;
14
14
  userPreferencesProvider?: UserPreferencesProvider;
15
+ contextualFormattingEnabled?: boolean;
15
16
  };
16
17
  dependencies: [
17
18
  OptionalPlugin<EditorViewModePlugin>,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-toolbar",
3
- "version": "2.1.3",
3
+ "version": "2.3.0",
4
4
  "description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,14 +33,15 @@
33
33
  ".": "./src/index.ts"
34
34
  },
35
35
  "dependencies": {
36
- "@atlaskit/editor-common": "^102.11.0",
36
+ "@atlaskit/editor-common": "^102.13.0",
37
37
  "@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
38
- "@atlaskit/editor-plugin-primary-toolbar": "^3.0.0",
38
+ "@atlaskit/editor-plugin-primary-toolbar": "^3.1.0",
39
39
  "@atlaskit/editor-prosemirror": "7.0.0",
40
40
  "@atlaskit/icon": "^25.0.0",
41
+ "@atlaskit/icon-lab": "^4.3.0",
41
42
  "@atlaskit/menu": "^3.1.0",
42
43
  "@atlaskit/platform-feature-flags": "^1.1.0",
43
- "@atlaskit/tmp-editor-statsig": "^4.1.0",
44
+ "@atlaskit/tmp-editor-statsig": "^4.3.0",
44
45
  "@atlaskit/tokens": "^4.5.0",
45
46
  "@babel/runtime": "^7.0.0",
46
47
  "@emotion/react": "^11.7.1",
@@ -1,29 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.ContextualToolbarIcon = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var ContextualToolbarIcon = exports.ContextualToolbarIcon = function ContextualToolbarIcon(props) {
10
- var primaryColor = props.primaryColor,
11
- label = props.label;
12
- return /*#__PURE__*/_react.default.createElement("svg", {
13
- width: "16",
14
- height: "16",
15
- viewBox: "0 0 16 16",
16
- style: {
17
- color: primaryColor,
18
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
19
- fill: "var(--ds-background-neutral-subtle, #00000000)"
20
- },
21
- "aria-label": label || undefined,
22
- role: label ? 'img' : 'presentation'
23
- }, /*#__PURE__*/_react.default.createElement("path", {
24
- "fill-rule": "evenodd",
25
- "clip-rule": "evenodd",
26
- d: "M14 8.75H2V7.25H14V8.75Z",
27
- fill: "currentColor"
28
- }));
29
- };
@@ -1,38 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.FixedToolbarIcon = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var FixedToolbarIcon = exports.FixedToolbarIcon = function FixedToolbarIcon(props) {
10
- var primaryColor = props.primaryColor,
11
- label = props.label;
12
- return /*#__PURE__*/_react.default.createElement("svg", {
13
- width: "16",
14
- height: "16",
15
- viewBox: "0 0 16 16",
16
- style: {
17
- color: primaryColor,
18
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
19
- fill: "var(--ds-background-neutral-subtle, #00000000)"
20
- },
21
- "aria-label": label || undefined,
22
- role: label ? 'img' : 'presentation'
23
- }, /*#__PURE__*/_react.default.createElement("rect", {
24
- x: "0.75",
25
- y: "1.00586",
26
- width: "14.5",
27
- height: "13.9879",
28
- rx: "2.25",
29
- stroke: "currentColor",
30
- "stroke-width": "1.5"
31
- }), /*#__PURE__*/_react.default.createElement("rect", {
32
- x: "4",
33
- y: "3.75586",
34
- width: "8",
35
- height: "1.5",
36
- fill: "currentColor"
37
- }));
38
- };
@@ -1,24 +0,0 @@
1
- import React from 'react';
2
- export const ContextualToolbarIcon = props => {
3
- const {
4
- primaryColor,
5
- label
6
- } = props;
7
- return /*#__PURE__*/React.createElement("svg", {
8
- width: "16",
9
- height: "16",
10
- viewBox: "0 0 16 16",
11
- style: {
12
- color: primaryColor,
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
14
- fill: "var(--ds-background-neutral-subtle, #00000000)"
15
- },
16
- "aria-label": label || undefined,
17
- role: label ? 'img' : 'presentation'
18
- }, /*#__PURE__*/React.createElement("path", {
19
- "fill-rule": "evenodd",
20
- "clip-rule": "evenodd",
21
- d: "M14 8.75H2V7.25H14V8.75Z",
22
- fill: "currentColor"
23
- }));
24
- };
@@ -1,33 +0,0 @@
1
- import React from 'react';
2
- export const FixedToolbarIcon = props => {
3
- const {
4
- primaryColor,
5
- label
6
- } = props;
7
- return /*#__PURE__*/React.createElement("svg", {
8
- width: "16",
9
- height: "16",
10
- viewBox: "0 0 16 16",
11
- style: {
12
- color: primaryColor,
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
14
- fill: "var(--ds-background-neutral-subtle, #00000000)"
15
- },
16
- "aria-label": label || undefined,
17
- role: label ? 'img' : 'presentation'
18
- }, /*#__PURE__*/React.createElement("rect", {
19
- x: "0.75",
20
- y: "1.00586",
21
- width: "14.5",
22
- height: "13.9879",
23
- rx: "2.25",
24
- stroke: "currentColor",
25
- "stroke-width": "1.5"
26
- }), /*#__PURE__*/React.createElement("rect", {
27
- x: "4",
28
- y: "3.75586",
29
- width: "8",
30
- height: "1.5",
31
- fill: "currentColor"
32
- }));
33
- };
@@ -1,22 +0,0 @@
1
- import React from 'react';
2
- export var ContextualToolbarIcon = function ContextualToolbarIcon(props) {
3
- var primaryColor = props.primaryColor,
4
- label = props.label;
5
- return /*#__PURE__*/React.createElement("svg", {
6
- width: "16",
7
- height: "16",
8
- viewBox: "0 0 16 16",
9
- style: {
10
- color: primaryColor,
11
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
12
- fill: "var(--ds-background-neutral-subtle, #00000000)"
13
- },
14
- "aria-label": label || undefined,
15
- role: label ? 'img' : 'presentation'
16
- }, /*#__PURE__*/React.createElement("path", {
17
- "fill-rule": "evenodd",
18
- "clip-rule": "evenodd",
19
- d: "M14 8.75H2V7.25H14V8.75Z",
20
- fill: "currentColor"
21
- }));
22
- };
@@ -1,31 +0,0 @@
1
- import React from 'react';
2
- export var FixedToolbarIcon = function FixedToolbarIcon(props) {
3
- var primaryColor = props.primaryColor,
4
- label = props.label;
5
- return /*#__PURE__*/React.createElement("svg", {
6
- width: "16",
7
- height: "16",
8
- viewBox: "0 0 16 16",
9
- style: {
10
- color: primaryColor,
11
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
12
- fill: "var(--ds-background-neutral-subtle, #00000000)"
13
- },
14
- "aria-label": label || undefined,
15
- role: label ? 'img' : 'presentation'
16
- }, /*#__PURE__*/React.createElement("rect", {
17
- x: "0.75",
18
- y: "1.00586",
19
- width: "14.5",
20
- height: "13.9879",
21
- rx: "2.25",
22
- stroke: "currentColor",
23
- "stroke-width": "1.5"
24
- }), /*#__PURE__*/React.createElement("rect", {
25
- x: "4",
26
- y: "3.75586",
27
- width: "8",
28
- height: "1.5",
29
- fill: "currentColor"
30
- }));
31
- };
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import type { SVGProps } from '@atlaskit/icon/types';
3
- export declare const ContextualToolbarIcon: (props: SVGProps) => React.JSX.Element;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import type { SVGProps } from '@atlaskit/icon/types';
3
- export declare const FixedToolbarIcon: (props: SVGProps) => React.JSX.Element;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import type { SVGProps } from '@atlaskit/icon/types';
3
- export declare const ContextualToolbarIcon: (props: SVGProps) => React.JSX.Element;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- import type { SVGProps } from '@atlaskit/icon/types';
3
- export declare const FixedToolbarIcon: (props: SVGProps) => React.JSX.Element;