@atlaskit/editor-plugin-toolbar 3.4.6 → 3.4.8

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 (21) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/afm-jira/tsconfig.json +1 -1
  3. package/dist/cjs/pm-plugins/experiences/selection-toolbar-open-experience.js +5 -15
  4. package/dist/cjs/toolbarPlugin.js +3 -2
  5. package/dist/cjs/ui/PrimaryToolbar.js +13 -2
  6. package/dist/cjs/ui/toolbar-components.js +32 -27
  7. package/dist/es2019/pm-plugins/experiences/selection-toolbar-open-experience.js +5 -15
  8. package/dist/es2019/toolbarPlugin.js +3 -2
  9. package/dist/es2019/ui/PrimaryToolbar.js +13 -2
  10. package/dist/es2019/ui/toolbar-components.js +10 -6
  11. package/dist/esm/pm-plugins/experiences/selection-toolbar-open-experience.js +5 -15
  12. package/dist/esm/toolbarPlugin.js +3 -2
  13. package/dist/esm/ui/PrimaryToolbar.js +13 -2
  14. package/dist/esm/ui/toolbar-components.js +32 -27
  15. package/dist/types/types/index.d.ts +5 -0
  16. package/dist/types/ui/PrimaryToolbar.d.ts +3 -1
  17. package/dist/types/ui/toolbar-components.d.ts +2 -1
  18. package/dist/types-ts4.5/types/index.d.ts +5 -0
  19. package/dist/types-ts4.5/ui/PrimaryToolbar.d.ts +3 -1
  20. package/dist/types-ts4.5/ui/toolbar-components.d.ts +2 -1
  21. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-toolbar
2
2
 
3
+ ## 3.4.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [`76e788fce7750`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/76e788fce7750) -
8
+ ED-29665 experience tracking updates
9
+ - Updated dependencies
10
+
11
+ ## 3.4.7
12
+
13
+ ### Patch Changes
14
+
15
+ - [`8263f21e34dff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8263f21e34dff) -
16
+ [ux] ED-29646 Implement ResponsiveContainer breakpoint preset system
17
+ - Updated dependencies
18
+
3
19
  ## 3.4.6
4
20
 
5
21
  ### Patch Changes
package/afm-jira/tsconfig.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "extends": "../../../../tsconfig.entry-points.jira.json",
3
3
  "compilerOptions": {
4
4
  "target": "es5",
5
- "outDir": "../../../../../tsDist/@atlaskit__editor-plugin-toolbar/app",
5
+ "outDir": "../../../../../jira/tsDist/@atlaskit__editor-plugin-toolbar/app",
6
6
  "rootDir": "../",
7
7
  "composite": true
8
8
  },
package/dist/cjs/pm-plugins/experiences/selection-toolbar-open-experience.js CHANGED
@@ -46,9 +46,7 @@ var getSelectionToolbarOpenExperiencePlugin = exports.getSelectionToolbarOpenExp
46
46
  if (isBlockMenuWithinNode(getTarget())) {
47
47
  return {
48
48
  status: 'abort',
49
- metadata: {
50
- reason: ABORT_REASON.BLOCK_MENU_OPENED
51
- }
49
+ reason: ABORT_REASON.BLOCK_MENU_OPENED
52
50
  };
53
51
  }
54
52
  }
@@ -80,9 +78,7 @@ var getSelectionToolbarOpenExperiencePlugin = exports.getSelectionToolbarOpenExp
80
78
  apply: function apply(_tr, pluginState, oldState, newState) {
81
79
  if (!oldState.selection.empty && newState.selection.empty) {
82
80
  experience.abort({
83
- metadata: {
84
- reason: ABORT_REASON.SELECTION_CLEARED
85
- }
81
+ reason: ABORT_REASON.SELECTION_CLEARED
86
82
  });
87
83
  }
88
84
  return pluginState;
@@ -93,9 +89,7 @@ var getSelectionToolbarOpenExperiencePlugin = exports.getSelectionToolbarOpenExp
93
89
  mouseup: function mouseup(view) {
94
90
  if (!view.state.selection.empty && !isSelectionToolbarWithinNode(getTarget())) {
95
91
  experience.start({
96
- metadata: {
97
- method: START_METHOD.MOUSE_UP
98
- }
92
+ method: START_METHOD.MOUSE_UP
99
93
  });
100
94
  }
101
95
  },
@@ -104,9 +98,7 @@ var getSelectionToolbarOpenExperiencePlugin = exports.getSelectionToolbarOpenExp
104
98
  key = _ref3.key;
105
99
  if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
106
100
  experience.start({
107
- metadata: {
108
- method: START_METHOD.KEY_DOWN
109
- }
101
+ method: START_METHOD.KEY_DOWN
110
102
  });
111
103
  }
112
104
  }
@@ -117,9 +109,7 @@ var getSelectionToolbarOpenExperiencePlugin = exports.getSelectionToolbarOpenExp
117
109
  return {
118
110
  destroy: function destroy() {
119
111
  experience.abort({
120
- metadata: {
121
- reason: ABORT_REASON.EDITOR_DESTROYED
122
- }
112
+ reason: ABORT_REASON.EDITOR_DESTROYED
123
113
  });
124
114
  }
125
115
  };
package/dist/cjs/toolbarPlugin.js CHANGED
@@ -79,9 +79,10 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
79
79
  var disableSelectionToolbar = config.disableSelectionToolbar,
80
80
  disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned,
81
81
  _config$contextualFor = config.contextualFormattingEnabled,
82
- contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor;
82
+ contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor,
83
+ breakpointPreset = config.breakpointPreset;
83
84
  var registry = (0, _editorToolbarModel.createComponentRegistry)();
84
- registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api, disableSelectionToolbar));
85
+ registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
85
86
  return {
86
87
  name: 'toolbar',
87
88
  actions: {
package/dist/cjs/ui/PrimaryToolbar.js CHANGED
@@ -8,12 +8,23 @@ exports.PrimaryToolbar = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _toolbar = require("@atlaskit/editor-common/toolbar");
10
10
  var _editorToolbar = require("@atlaskit/editor-toolbar");
11
+ var isFullPage = function isFullPage(editorAppearance) {
12
+ return editorAppearance === 'full-page' || editorAppearance === 'full-width';
13
+ };
14
+ var getBreakpointPreset = function getBreakpointPreset(breakpointPreset, editorAppearance) {
15
+ if (breakpointPreset) {
16
+ return breakpointPreset;
17
+ }
18
+ return editorAppearance && isFullPage(editorAppearance) ? 'fullpage' : 'reduced';
19
+ };
11
20
  var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref) {
12
- var children = _ref.children;
21
+ var children = _ref.children,
22
+ breakpointPreset = _ref.breakpointPreset;
13
23
  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
14
24
  editorAppearance = _useEditorToolbar.editorAppearance;
15
25
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
16
26
  label: "Primary Toolbar",
17
- reducedBreakpoints: editorAppearance !== 'full-page'
27
+ reducedBreakpoints: editorAppearance !== 'full-page',
28
+ breakpointPreset: getBreakpointPreset(breakpointPreset, editorAppearance)
18
29
  }, children);
19
30
  };
package/dist/cjs/ui/toolbar-components.js CHANGED
@@ -32,12 +32,17 @@ var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
32
32
  }
33
33
  }];
34
34
  };
35
- var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
35
+ var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(breakpointPreset) {
36
36
  return [{
37
37
  type: 'toolbar',
38
38
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
39
- component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _PrimaryToolbar.PrimaryToolbar : function (_ref2) {
39
+ component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? function (_ref2) {
40
40
  var children = _ref2.children;
41
+ return /*#__PURE__*/_react.default.createElement(_PrimaryToolbar.PrimaryToolbar, {
42
+ breakpointPreset: breakpointPreset
43
+ }, children);
44
+ } : function (_ref3) {
45
+ var children = _ref3.children;
41
46
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
42
47
  label: "Primary Toolbar",
43
48
  testId: "primary-toolbar"
@@ -45,7 +50,7 @@ var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
45
50
  }
46
51
  }];
47
52
  };
48
- var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar) {
53
+ var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset) {
49
54
  var components = [{
50
55
  type: _toolbar.TEXT_SECTION.type,
51
56
  key: _toolbar.TEXT_SECTION.key,
@@ -54,9 +59,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
54
59
  key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
55
60
  rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
56
61
  }],
57
- component: function component(_ref3) {
58
- var children = _ref3.children,
59
- parents = _ref3.parents;
62
+ component: function component(_ref4) {
63
+ var children = _ref4.children,
64
+ parents = _ref4.parents;
60
65
  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
61
66
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
62
67
  above: "md"
@@ -82,9 +87,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
82
87
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
83
88
  rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
84
89
  }],
85
- component: function component(_ref4) {
86
- var children = _ref4.children,
87
- parents = _ref4.parents;
90
+ component: function component(_ref5) {
91
+ var children = _ref5.children,
92
+ parents = _ref5.parents;
88
93
  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
89
94
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
90
95
  above: "md"
@@ -114,9 +119,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
114
119
  key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
115
120
  rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION_COLLAPSED.key]
116
121
  }],
117
- component: function component(_ref5) {
118
- var children = _ref5.children,
119
- parents = _ref5.parents;
122
+ component: function component(_ref6) {
123
+ var children = _ref6.children,
124
+ parents = _ref6.parents;
120
125
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
121
126
  below: "md"
122
127
  }, /*#__PURE__*/_react.default.createElement(_Section.Section, {
@@ -151,9 +156,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
151
156
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
152
157
  rank: _toolbar.TOOLBAR_RANK[_toolbar.INSERT_BLOCK_SECTION.key]
153
158
  }],
154
- component: function component(_ref6) {
155
- var children = _ref6.children,
156
- parents = _ref6.parents;
159
+ component: function component(_ref7) {
160
+ var children = _ref7.children,
161
+ parents = _ref7.parents;
157
162
  return /*#__PURE__*/_react.default.createElement(_Section.Section, {
158
163
  testId: "insert-block-section",
159
164
  parents: parents,
@@ -174,9 +179,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
174
179
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
175
180
  rank: _toolbar.TOOLBAR_RANK[_toolbar.LINKING_SECTION.key]
176
181
  }],
177
- component: function component(_ref7) {
178
- var children = _ref7.children,
179
- parents = _ref7.parents;
182
+ component: function component(_ref8) {
183
+ var children = _ref8.children,
184
+ parents = _ref8.parents;
180
185
  return /*#__PURE__*/_react.default.createElement(_Section.Section, {
181
186
  testId: "link-section",
182
187
  parents: parents,
@@ -208,8 +213,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
208
213
  key: _toolbar.OVERFLOW_GROUP.key,
209
214
  rank: _toolbar.OVERFLOW_GROUP_RANK[_toolbar.OVERFLOW_MENU.key]
210
215
  }],
211
- component: function component(_ref8) {
212
- var children = _ref8.children;
216
+ component: function component(_ref9) {
217
+ var children = _ref9.children;
213
218
  return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
214
219
  }
215
220
  }, {
@@ -230,8 +235,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
230
235
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
231
236
  rank: _toolbar.TOOLBAR_RANK[_toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
232
237
  }],
233
- component: function component(_ref9) {
234
- var children = _ref9.children;
238
+ component: function component(_ref0) {
239
+ var children = _ref0.children;
235
240
  return /*#__PURE__*/_react.default.createElement(_OverflowSection.OverflowSection, null, children);
236
241
  }
237
242
  }, {
@@ -250,8 +255,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
250
255
  key: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
251
256
  rank: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
252
257
  }],
253
- component: function component(_ref0) {
254
- var children = _ref0.children;
258
+ component: function component(_ref1) {
259
+ var children = _ref1.children;
255
260
  return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
256
261
  }
257
262
  });
@@ -262,16 +267,16 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
262
267
  components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
263
268
  break;
264
269
  case 'always-pinned':
265
- components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
270
+ components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
266
271
  break;
267
272
  case 'controlled':
268
273
  components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
269
- components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
274
+ components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
270
275
  break;
271
276
  }
272
277
  } else {
273
278
  components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
274
- components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
279
+ components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents(breakpointPreset)));
275
280
  }
276
281
  return components;
277
282
  };
package/dist/es2019/pm-plugins/experiences/selection-toolbar-open-experience.js CHANGED
@@ -39,9 +39,7 @@ export const getSelectionToolbarOpenExperiencePlugin = ({
39
39
  if (isBlockMenuWithinNode(getTarget())) {
40
40
  return {
41
41
  status: 'abort',
42
- metadata: {
43
- reason: ABORT_REASON.BLOCK_MENU_OPENED
44
- }
42
+ reason: ABORT_REASON.BLOCK_MENU_OPENED
45
43
  };
46
44
  }
47
45
  }
@@ -70,9 +68,7 @@ export const getSelectionToolbarOpenExperiencePlugin = ({
70
68
  apply: (_tr, pluginState, oldState, newState) => {
71
69
  if (!oldState.selection.empty && newState.selection.empty) {
72
70
  experience.abort({
73
- metadata: {
74
- reason: ABORT_REASON.SELECTION_CLEARED
75
- }
71
+ reason: ABORT_REASON.SELECTION_CLEARED
76
72
  });
77
73
  }
78
74
  return pluginState;
@@ -83,9 +79,7 @@ export const getSelectionToolbarOpenExperiencePlugin = ({
83
79
  mouseup: view => {
84
80
  if (!view.state.selection.empty && !isSelectionToolbarWithinNode(getTarget())) {
85
81
  experience.start({
86
- metadata: {
87
- method: START_METHOD.MOUSE_UP
88
- }
82
+ method: START_METHOD.MOUSE_UP
89
83
  });
90
84
  }
91
85
  },
@@ -95,9 +89,7 @@ export const getSelectionToolbarOpenExperiencePlugin = ({
95
89
  }) => {
96
90
  if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
97
91
  experience.start({
98
- metadata: {
99
- method: START_METHOD.KEY_DOWN
100
- }
92
+ method: START_METHOD.KEY_DOWN
101
93
  });
102
94
  }
103
95
  }
@@ -108,9 +100,7 @@ export const getSelectionToolbarOpenExperiencePlugin = ({
108
100
  return {
109
101
  destroy: () => {
110
102
  experience.abort({
111
- metadata: {
112
- reason: ABORT_REASON.EDITOR_DESTROYED
113
- }
103
+ reason: ABORT_REASON.EDITOR_DESTROYED
114
104
  });
115
105
  }
116
106
  };
package/dist/es2019/toolbarPlugin.js CHANGED
@@ -64,10 +64,11 @@ export const toolbarPlugin = ({
64
64
  const {
65
65
  disableSelectionToolbar,
66
66
  disableSelectionToolbarWhenPinned,
67
- contextualFormattingEnabled = 'always-pinned'
67
+ contextualFormattingEnabled = 'always-pinned',
68
+ breakpointPreset
68
69
  } = config;
69
70
  const registry = createComponentRegistry();
70
- registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar));
71
+ registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
71
72
  return {
72
73
  name: 'toolbar',
73
74
  actions: {
package/dist/es2019/ui/PrimaryToolbar.js CHANGED
@@ -1,14 +1,25 @@
1
1
  import React from 'react';
2
2
  import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
3
3
  import { PrimaryToolbar as PrimaryToolbarBase } from '@atlaskit/editor-toolbar';
4
+ const isFullPage = editorAppearance => {
5
+ return editorAppearance === 'full-page' || editorAppearance === 'full-width';
6
+ };
7
+ const getBreakpointPreset = (breakpointPreset, editorAppearance) => {
8
+ if (breakpointPreset) {
9
+ return breakpointPreset;
10
+ }
11
+ return editorAppearance && isFullPage(editorAppearance) ? 'fullpage' : 'reduced';
12
+ };
4
13
  export const PrimaryToolbar = ({
5
- children
14
+ children,
15
+ breakpointPreset
6
16
  }) => {
7
17
  const {
8
18
  editorAppearance
9
19
  } = useEditorToolbar();
10
20
  return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
11
21
  label: "Primary Toolbar",
12
- reducedBreakpoints: editorAppearance !== 'full-page'
22
+ reducedBreakpoints: editorAppearance !== 'full-page',
23
+ breakpointPreset: getBreakpointPreset(breakpointPreset, editorAppearance)
13
24
  }, children);
14
25
  };
package/dist/es2019/ui/toolbar-components.js CHANGED
@@ -25,11 +25,15 @@ const getInlineTextToolbarComponents = () => {
25
25
  }
26
26
  }];
27
27
  };
28
- const getPrimaryToolbarComponents = () => {
28
+ const getPrimaryToolbarComponents = breakpointPreset => {
29
29
  return [{
30
30
  type: 'toolbar',
31
31
  key: TOOLBARS.PRIMARY_TOOLBAR,
32
- component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : ({
32
+ component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? ({
33
+ children
34
+ }) => /*#__PURE__*/React.createElement(PrimaryToolbar, {
35
+ breakpointPreset: breakpointPreset
36
+ }, children) : ({
33
37
  children
34
38
  }) => /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
35
39
  label: "Primary Toolbar",
@@ -37,7 +41,7 @@ const getPrimaryToolbarComponents = () => {
37
41
  }, children)
38
42
  }];
39
43
  };
40
- export const getToolbarComponents = (contextualFormattingEnabled, api, disableSelectionToolbar) => {
44
+ export const getToolbarComponents = (contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset) => {
41
45
  const components = [{
42
46
  type: TEXT_SECTION.type,
43
47
  key: TEXT_SECTION.key,
@@ -258,16 +262,16 @@ export const getToolbarComponents = (contextualFormattingEnabled, api, disableSe
258
262
  components.unshift(...getInlineTextToolbarComponents());
259
263
  break;
260
264
  case 'always-pinned':
261
- components.unshift(...getPrimaryToolbarComponents());
265
+ components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
262
266
  break;
263
267
  case 'controlled':
264
268
  components.unshift(...getInlineTextToolbarComponents());
265
- components.unshift(...getPrimaryToolbarComponents());
269
+ components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
266
270
  break;
267
271
  }
268
272
  } else {
269
273
  components.unshift(...getInlineTextToolbarComponents());
270
- components.unshift(...getPrimaryToolbarComponents());
274
+ components.unshift(...getPrimaryToolbarComponents(breakpointPreset));
271
275
  }
272
276
  return components;
273
277
  };
package/dist/esm/pm-plugins/experiences/selection-toolbar-open-experience.js CHANGED
@@ -39,9 +39,7 @@ export var getSelectionToolbarOpenExperiencePlugin = function getSelectionToolba
39
39
  if (isBlockMenuWithinNode(getTarget())) {
40
40
  return {
41
41
  status: 'abort',
42
- metadata: {
43
- reason: ABORT_REASON.BLOCK_MENU_OPENED
44
- }
42
+ reason: ABORT_REASON.BLOCK_MENU_OPENED
45
43
  };
46
44
  }
47
45
  }
@@ -73,9 +71,7 @@ export var getSelectionToolbarOpenExperiencePlugin = function getSelectionToolba
73
71
  apply: function apply(_tr, pluginState, oldState, newState) {
74
72
  if (!oldState.selection.empty && newState.selection.empty) {
75
73
  experience.abort({
76
- metadata: {
77
- reason: ABORT_REASON.SELECTION_CLEARED
78
- }
74
+ reason: ABORT_REASON.SELECTION_CLEARED
79
75
  });
80
76
  }
81
77
  return pluginState;
@@ -86,9 +82,7 @@ export var getSelectionToolbarOpenExperiencePlugin = function getSelectionToolba
86
82
  mouseup: function mouseup(view) {
87
83
  if (!view.state.selection.empty && !isSelectionToolbarWithinNode(getTarget())) {
88
84
  experience.start({
89
- metadata: {
90
- method: START_METHOD.MOUSE_UP
91
- }
85
+ method: START_METHOD.MOUSE_UP
92
86
  });
93
87
  }
94
88
  },
@@ -97,9 +91,7 @@ export var getSelectionToolbarOpenExperiencePlugin = function getSelectionToolba
97
91
  key = _ref3.key;
98
92
  if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
99
93
  experience.start({
100
- metadata: {
101
- method: START_METHOD.KEY_DOWN
102
- }
94
+ method: START_METHOD.KEY_DOWN
103
95
  });
104
96
  }
105
97
  }
@@ -110,9 +102,7 @@ export var getSelectionToolbarOpenExperiencePlugin = function getSelectionToolba
110
102
  return {
111
103
  destroy: function destroy() {
112
104
  experience.abort({
113
- metadata: {
114
- reason: ABORT_REASON.EDITOR_DESTROYED
115
- }
105
+ reason: ABORT_REASON.EDITOR_DESTROYED
116
106
  });
117
107
  }
118
108
  };
package/dist/esm/toolbarPlugin.js CHANGED
@@ -72,9 +72,10 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
72
72
  var disableSelectionToolbar = config.disableSelectionToolbar,
73
73
  disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned,
74
74
  _config$contextualFor = config.contextualFormattingEnabled,
75
- contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor;
75
+ contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor,
76
+ breakpointPreset = config.breakpointPreset;
76
77
  var registry = createComponentRegistry();
77
- registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar));
78
+ registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset));
78
79
  return {
79
80
  name: 'toolbar',
80
81
  actions: {
package/dist/esm/ui/PrimaryToolbar.js CHANGED
@@ -1,12 +1,23 @@
1
1
  import React from 'react';
2
2
  import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
3
3
  import { PrimaryToolbar as PrimaryToolbarBase } from '@atlaskit/editor-toolbar';
4
+ var isFullPage = function isFullPage(editorAppearance) {
5
+ return editorAppearance === 'full-page' || editorAppearance === 'full-width';
6
+ };
7
+ var getBreakpointPreset = function getBreakpointPreset(breakpointPreset, editorAppearance) {
8
+ if (breakpointPreset) {
9
+ return breakpointPreset;
10
+ }
11
+ return editorAppearance && isFullPage(editorAppearance) ? 'fullpage' : 'reduced';
12
+ };
4
13
  export var PrimaryToolbar = function PrimaryToolbar(_ref) {
5
- var children = _ref.children;
14
+ var children = _ref.children,
15
+ breakpointPreset = _ref.breakpointPreset;
6
16
  var _useEditorToolbar = useEditorToolbar(),
7
17
  editorAppearance = _useEditorToolbar.editorAppearance;
8
18
  return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
9
19
  label: "Primary Toolbar",
10
- reducedBreakpoints: editorAppearance !== 'full-page'
20
+ reducedBreakpoints: editorAppearance !== 'full-page',
21
+ breakpointPreset: getBreakpointPreset(breakpointPreset, editorAppearance)
11
22
  }, children);
12
23
  };
package/dist/esm/ui/toolbar-components.js CHANGED
@@ -25,12 +25,17 @@ var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
25
25
  }
26
26
  }];
27
27
  };
28
- var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
28
+ var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(breakpointPreset) {
29
29
  return [{
30
30
  type: 'toolbar',
31
31
  key: TOOLBARS.PRIMARY_TOOLBAR,
32
- component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : function (_ref2) {
32
+ component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? function (_ref2) {
33
33
  var children = _ref2.children;
34
+ return /*#__PURE__*/React.createElement(PrimaryToolbar, {
35
+ breakpointPreset: breakpointPreset
36
+ }, children);
37
+ } : function (_ref3) {
38
+ var children = _ref3.children;
34
39
  return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
35
40
  label: "Primary Toolbar",
36
41
  testId: "primary-toolbar"
@@ -38,7 +43,7 @@ var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
38
43
  }
39
44
  }];
40
45
  };
41
- export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar) {
46
+ export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar, breakpointPreset) {
42
47
  var components = [{
43
48
  type: TEXT_SECTION.type,
44
49
  key: TEXT_SECTION.key,
@@ -47,9 +52,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
47
52
  key: TOOLBARS.INLINE_TEXT_TOOLBAR,
48
53
  rank: TOOLBAR_RANK[TEXT_SECTION.key]
49
54
  }],
50
- component: function component(_ref3) {
51
- var children = _ref3.children,
52
- parents = _ref3.parents;
55
+ component: function component(_ref4) {
56
+ var children = _ref4.children,
57
+ parents = _ref4.parents;
53
58
  if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
54
59
  return /*#__PURE__*/React.createElement(Show, {
55
60
  above: "md"
@@ -75,9 +80,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
75
80
  key: TOOLBARS.PRIMARY_TOOLBAR,
76
81
  rank: TOOLBAR_RANK[TEXT_SECTION.key]
77
82
  }],
78
- component: function component(_ref4) {
79
- var children = _ref4.children,
80
- parents = _ref4.parents;
83
+ component: function component(_ref5) {
84
+ var children = _ref5.children,
85
+ parents = _ref5.parents;
81
86
  if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
82
87
  return /*#__PURE__*/React.createElement(Show, {
83
88
  above: "md"
@@ -107,9 +112,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
107
112
  key: TOOLBARS.INLINE_TEXT_TOOLBAR,
108
113
  rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
109
114
  }],
110
- component: function component(_ref5) {
111
- var children = _ref5.children,
112
- parents = _ref5.parents;
115
+ component: function component(_ref6) {
116
+ var children = _ref6.children,
117
+ parents = _ref6.parents;
113
118
  return /*#__PURE__*/React.createElement(Show, {
114
119
  below: "md"
115
120
  }, /*#__PURE__*/React.createElement(Section, {
@@ -144,9 +149,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
144
149
  key: TOOLBARS.PRIMARY_TOOLBAR,
145
150
  rank: TOOLBAR_RANK[INSERT_BLOCK_SECTION.key]
146
151
  }],
147
- component: function component(_ref6) {
148
- var children = _ref6.children,
149
- parents = _ref6.parents;
152
+ component: function component(_ref7) {
153
+ var children = _ref7.children,
154
+ parents = _ref7.parents;
150
155
  return /*#__PURE__*/React.createElement(Section, {
151
156
  testId: "insert-block-section",
152
157
  parents: parents,
@@ -167,9 +172,9 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
167
172
  key: TOOLBARS.PRIMARY_TOOLBAR,
168
173
  rank: TOOLBAR_RANK[LINKING_SECTION.key]
169
174
  }],
170
- component: function component(_ref7) {
171
- var children = _ref7.children,
172
- parents = _ref7.parents;
175
+ component: function component(_ref8) {
176
+ var children = _ref8.children,
177
+ parents = _ref8.parents;
173
178
  return /*#__PURE__*/React.createElement(Section, {
174
179
  testId: "link-section",
175
180
  parents: parents,
@@ -201,8 +206,8 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
201
206
  key: OVERFLOW_GROUP.key,
202
207
  rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
203
208
  }],
204
- component: function component(_ref8) {
205
- var children = _ref8.children;
209
+ component: function component(_ref9) {
210
+ var children = _ref9.children;
206
211
  return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
207
212
  }
208
213
  }, {
@@ -223,8 +228,8 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
223
228
  key: TOOLBARS.PRIMARY_TOOLBAR,
224
229
  rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
225
230
  }],
226
- component: function component(_ref9) {
227
- var children = _ref9.children;
231
+ component: function component(_ref0) {
232
+ var children = _ref0.children;
228
233
  return /*#__PURE__*/React.createElement(OverflowSection, null, children);
229
234
  }
230
235
  }, {
@@ -243,8 +248,8 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
243
248
  key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
244
249
  rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
245
250
  }],
246
- component: function component(_ref0) {
247
- var children = _ref0.children;
251
+ component: function component(_ref1) {
252
+ var children = _ref1.children;
248
253
  return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
249
254
  }
250
255
  });
@@ -255,16 +260,16 @@ export var getToolbarComponents = function getToolbarComponents(contextualFormat
255
260
  components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
256
261
  break;
257
262
  case 'always-pinned':
258
- components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
263
+ components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
259
264
  break;
260
265
  case 'controlled':
261
266
  components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
262
- components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
267
+ components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
263
268
  break;
264
269
  }
265
270
  } else {
266
271
  components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
267
- components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
272
+ components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
268
273
  }
269
274
  return components;
270
275
  };
package/dist/types/types/index.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
2
+ import type { BreakpointPreset } from '@atlaskit/editor-toolbar';
2
3
  import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
3
4
  export type ToolbarPluginOptions = {
5
+ /**
6
+ * Option to set the breakpoint preset for the toolbar.
7
+ */
8
+ breakpointPreset?: BreakpointPreset;
4
9
  /**
5
10
  * Controls which toolbars are available for in the editor.
6
11
  *
package/dist/types/ui/PrimaryToolbar.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
+ import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
2
3
  type PrimaryToolbarProps = {
4
+ breakpointPreset?: BreakpointPreset;
3
5
  children: React.ReactNode;
4
6
  };
5
- export declare const PrimaryToolbar: ({ children }: PrimaryToolbarProps) => React.JSX.Element;
7
+ export declare const PrimaryToolbar: ({ children, breakpointPreset }: PrimaryToolbarProps) => React.JSX.Element;
6
8
  export {};
package/dist/types/ui/toolbar-components.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
2
2
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
3
4
  import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
4
5
  import type { ToolbarPlugin } from '../toolbarPluginType';
5
- export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
6
+ export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean, breakpointPreset?: BreakpointPreset) => RegisterComponent[];
package/dist/types-ts4.5/types/index.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
2
+ import type { BreakpointPreset } from '@atlaskit/editor-toolbar';
2
3
  import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
3
4
  export type ToolbarPluginOptions = {
5
+ /**
6
+ * Option to set the breakpoint preset for the toolbar.
7
+ */
8
+ breakpointPreset?: BreakpointPreset;
4
9
  /**
5
10
  * Controls which toolbars are available for in the editor.
6
11
  *
package/dist/types-ts4.5/ui/PrimaryToolbar.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
+ import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
2
3
  type PrimaryToolbarProps = {
4
+ breakpointPreset?: BreakpointPreset;
3
5
  children: React.ReactNode;
4
6
  };
5
- export declare const PrimaryToolbar: ({ children }: PrimaryToolbarProps) => React.JSX.Element;
7
+ export declare const PrimaryToolbar: ({ children, breakpointPreset }: PrimaryToolbarProps) => React.JSX.Element;
6
8
  export {};
package/dist/types-ts4.5/ui/toolbar-components.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
2
2
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import { type BreakpointPreset } from '@atlaskit/editor-toolbar';
3
4
  import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
4
5
  import type { ToolbarPlugin } from '../toolbarPluginType';
5
- export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
6
+ export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean, breakpointPreset?: BreakpointPreset) => RegisterComponent[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-toolbar",
3
- "version": "3.4.6",
3
+ "version": "3.4.8",
4
4
  "description": "Toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -40,13 +40,13 @@
40
40
  "@atlaskit/editor-toolbar-model": "^0.2.0",
41
41
  "@atlaskit/platform-feature-flags": "^1.1.0",
42
42
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
43
- "@atlaskit/tmp-editor-statsig": "^13.33.0",
43
+ "@atlaskit/tmp-editor-statsig": "^13.38.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "bind-event-listener": "^3.0.0",
46
46
  "react-intl-next": "npm:react-intl@^5.18.1"
47
47
  },
48
48
  "peerDependencies": {
49
- "@atlaskit/editor-common": "^110.25.0",
49
+ "@atlaskit/editor-common": "^110.29.0",
50
50
  "react": "^18.2.0"
51
51
  },
52
52
  "platform-feature-flags": {