@atlaskit/editor-plugin-insert-block 7.0.27 → 7.0.28

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 (22) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/toolbar-components/InsertButton.js +6 -2
  3. package/dist/cjs/ui/toolbar-components/hooks/filterDropdownItems.js +45 -0
  4. package/dist/cjs/ui/toolbar-components/hooks/useInsertButtonState.js +12 -2
  5. package/dist/cjs/ui/toolbar-components.js +167 -21
  6. package/dist/es2019/ui/toolbar-components/InsertButton.js +6 -2
  7. package/dist/es2019/ui/toolbar-components/hooks/filterDropdownItems.js +39 -0
  8. package/dist/es2019/ui/toolbar-components/hooks/useInsertButtonState.js +12 -2
  9. package/dist/es2019/ui/toolbar-components.js +160 -21
  10. package/dist/esm/ui/toolbar-components/InsertButton.js +6 -2
  11. package/dist/esm/ui/toolbar-components/hooks/filterDropdownItems.js +39 -0
  12. package/dist/esm/ui/toolbar-components/hooks/useInsertButtonState.js +12 -2
  13. package/dist/esm/ui/toolbar-components.js +167 -21
  14. package/dist/types/ui/toolbar-components/InsertButton.d.ts +5 -1
  15. package/dist/types/ui/toolbar-components/TableSizePicker.d.ts +1 -1
  16. package/dist/types/ui/toolbar-components/hooks/filterDropdownItems.d.ts +4 -0
  17. package/dist/types/ui/toolbar-components/hooks/useInsertButtonState.d.ts +6 -2
  18. package/dist/types-ts4.5/ui/toolbar-components/InsertButton.d.ts +5 -1
  19. package/dist/types-ts4.5/ui/toolbar-components/TableSizePicker.d.ts +1 -1
  20. package/dist/types-ts4.5/ui/toolbar-components/hooks/filterDropdownItems.d.ts +4 -0
  21. package/dist/types-ts4.5/ui/toolbar-components/hooks/useInsertButtonState.d.ts +6 -2
  22. package/package.json +12 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-insert-block
2
2
 
3
+ ## 7.0.28
4
+
5
+ ### Patch Changes
6
+
7
+ - [`1018562d37d5d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1018562d37d5d) -
8
+ Add dynamic dropdown filtering for insert block button based on visible toolbar buttons at
9
+ different breakpoints
10
+
3
11
  ## 7.0.27
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/toolbar-components/InsertButton.js CHANGED
@@ -31,6 +31,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
31
31
  var FIT_HEIGHT_BUFFER = 100;
32
32
  var InsertButton = exports.InsertButton = function InsertButton(_ref) {
33
33
  var api = _ref.api,
34
+ breakpoint = _ref.breakpoint,
34
35
  _ref$showElementBrows = _ref.showElementBrowserLink,
35
36
  showElementBrowserLink = _ref$showElementBrows === void 0 ? false : _ref$showElementBrows,
36
37
  _ref$isFullPageAppear = _ref.isFullPageAppearance,
@@ -41,7 +42,8 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
41
42
  expandEnabled = _ref.expandEnabled,
42
43
  insertMenuItems = _ref.insertMenuItems,
43
44
  numberOfButtons = _ref.numberOfButtons,
44
- onInsertBlockType = _ref.onInsertBlockType;
45
+ onInsertBlockType = _ref.onInsertBlockType,
46
+ toolbarConfig = _ref.toolbarConfig;
45
47
  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
46
48
  editorView = _useEditorToolbar.editorView;
47
49
  var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
@@ -67,6 +69,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
67
69
  var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
68
70
  var _useInsertButtonState = (0, _useInsertButtonState2.useInsertButtonState)({
69
71
  api: api,
72
+ breakpoint: breakpoint,
70
73
  editorView: editorView || undefined,
71
74
  horizontalRuleEnabled: horizontalRuleEnabled,
72
75
  insertMenuItems: insertMenuItems,
@@ -74,7 +77,8 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
74
77
  numberOfButtons: numberOfButtons,
75
78
  tableSelectorSupported: tableSelectorSupported,
76
79
  expandEnabled: expandEnabled,
77
- showElementBrowserLink: showElementBrowserLink
80
+ showElementBrowserLink: showElementBrowserLink,
81
+ toolbarConfig: toolbarConfig
78
82
  }),
79
83
  dropdownItems = _useInsertButtonState.dropdownItems,
80
84
  emojiProvider = _useInsertButtonState.emojiProvider,
package/dist/cjs/ui/toolbar-components/hooks/filterDropdownItems.js ADDED
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.filterDropdownItemsByBreakpoint = filterDropdownItemsByBreakpoint;
7
+ var ITEM_TO_BUTTON_MAP = {
8
+ action: 'taskList',
9
+ media: 'media',
10
+ 'image upload': 'media',
11
+ mention: 'mention',
12
+ emoji: 'emoji',
13
+ table: 'table',
14
+ layout: 'layout',
15
+ codeblock: 'codeBlock'
16
+ };
17
+ var BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl'];
18
+
19
+ /**
20
+ * Determines if a toolbar button is visible at the current breakpoint.
21
+ */
22
+ function isButtonVisibleAtBreakpoint(buttonShowAt, currentBreakpoint) {
23
+ if (!currentBreakpoint) {
24
+ return false;
25
+ }
26
+ var showAtIndex = BREAKPOINT_ORDER.indexOf(buttonShowAt);
27
+ var currentIndex = BREAKPOINT_ORDER.indexOf(currentBreakpoint);
28
+ return currentIndex >= showAtIndex;
29
+ }
30
+ function filterDropdownItemsByBreakpoint(items, currentBreakpoint, toolbarConfig) {
31
+ return items.filter(function (item) {
32
+ var itemName = item.value.name;
33
+ var buttonKey = ITEM_TO_BUTTON_MAP[itemName];
34
+ if (!buttonKey) {
35
+ return true;
36
+ }
37
+ var buttonConfig = toolbarConfig[buttonKey];
38
+ if (!(buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.enabled)) {
39
+ return true;
40
+ }
41
+ var showAt = buttonConfig.showAt || 'lg';
42
+ var isVisible = isButtonVisibleAtBreakpoint(showAt, currentBreakpoint);
43
+ return !isVisible;
44
+ });
45
+ }
package/dist/cjs/ui/toolbar-components/hooks/useInsertButtonState.js CHANGED
@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.useInsertButtonState = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
+ var _react = require("react");
9
10
  var _reactIntlNext = require("react-intl-next");
10
11
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
11
12
  var _createItems = require("../../ToolbarInsertBlock/create-items");
13
+ var _filterDropdownItems = require("./filterDropdownItems");
12
14
  var useInsertButtonState = exports.useInsertButtonState = function useInsertButtonState(_ref) {
13
15
  var api = _ref.api,
16
+ breakpoint = _ref.breakpoint,
14
17
  editorView = _ref.editorView,
15
18
  horizontalRuleEnabled = _ref.horizontalRuleEnabled,
16
19
  insertMenuItems = _ref.insertMenuItems,
@@ -18,7 +21,8 @@ var useInsertButtonState = exports.useInsertButtonState = function useInsertButt
18
21
  numberOfButtons = _ref.numberOfButtons,
19
22
  tableSelectorSupported = _ref.tableSelectorSupported,
20
23
  expandEnabled = _ref.expandEnabled,
21
- showElementBrowserLink = _ref.showElementBrowserLink;
24
+ showElementBrowserLink = _ref.showElementBrowserLink,
25
+ toolbarConfig = _ref.toolbarConfig;
22
26
  var _useIntl = (0, _reactIntlNext.useIntl)(),
23
27
  formatMessage = _useIntl.formatMessage;
24
28
  var isTypeAheadAllowed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isAllowed');
@@ -80,7 +84,13 @@ var useInsertButtonState = exports.useInsertButtonState = function useInsertButt
80
84
  formatMessage: formatMessage
81
85
  }) : [, []],
82
86
  _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
83
- dropdownItems = _ref3[1];
87
+ allDropdownItems = _ref3[1];
88
+ var dropdownItems = (0, _react.useMemo)(function () {
89
+ if (!breakpoint || !toolbarConfig) {
90
+ return allDropdownItems;
91
+ }
92
+ return (0, _filterDropdownItems.filterDropdownItemsByBreakpoint)(allDropdownItems, breakpoint, toolbarConfig);
93
+ }, [allDropdownItems, breakpoint, toolbarConfig]);
84
94
  return {
85
95
  dropdownItems: dropdownItems,
86
96
  emojiProvider: emojiProvider,
package/dist/cjs/ui/toolbar-components.js CHANGED
@@ -263,26 +263,12 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
263
263
 
264
264
  // Insert Group
265
265
  if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
266
- components.push({
267
- type: _toolbar.INSERT_GROUP.type,
268
- key: _toolbar.INSERT_GROUP.key,
269
- parents: [{
270
- type: _toolbar.INSERT_BLOCK_SECTION.type,
271
- key: _toolbar.INSERT_BLOCK_SECTION.key,
272
- rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
273
- }]
274
- });
275
- components.push({
276
- type: _toolbar.INSERT_BUTTON.type,
277
- key: _toolbar.INSERT_BUTTON.key,
278
- parents: [{
279
- type: _toolbar.INSERT_GROUP.type,
280
- key: _toolbar.INSERT_GROUP.key,
281
- rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
282
- }],
283
- component: function component() {
266
+ var createInsertButtonComponent = function createInsertButtonComponent(breakpoint) {
267
+ return function () {
284
268
  return /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
285
269
  api: api,
270
+ breakpoint: breakpoint,
271
+ toolbarConfig: config,
286
272
  showElementBrowserLink: options.showElementBrowserLink,
287
273
  tableSelectorSupported: options.tableSelectorSupported,
288
274
  onInsertBlockType: onInsertBlockType,
@@ -290,10 +276,170 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
290
276
  horizontalRuleEnabled: options.horizontalRuleEnabled,
291
277
  expandEnabled: options.allowExpand,
292
278
  insertMenuItems: options.insertMenuItems,
293
- numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
279
+ numberOfButtons: 0
294
280
  });
295
- }
296
- });
281
+ };
282
+ };
283
+ if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_ga_blockers')) {
284
+ components.push({
285
+ type: _toolbar.INSERT_GROUP.type,
286
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-none"),
287
+ parents: [{
288
+ type: _toolbar.INSERT_BLOCK_SECTION.type,
289
+ key: _toolbar.INSERT_BLOCK_SECTION.key,
290
+ rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
291
+ }],
292
+ component: function component(_ref3) {
293
+ var children = _ref3.children;
294
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
295
+ below: "sm"
296
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
297
+ }
298
+ });
299
+ components.push({
300
+ type: _toolbar.INSERT_BUTTON.type,
301
+ key: _toolbar.INSERT_BUTTON.key,
302
+ parents: [{
303
+ type: _toolbar.INSERT_GROUP.type,
304
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-none"),
305
+ rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
306
+ }],
307
+ component: createInsertButtonComponent(null)
308
+ });
309
+ components.push({
310
+ type: _toolbar.INSERT_GROUP.type,
311
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-sm"),
312
+ parents: [{
313
+ type: _toolbar.INSERT_BLOCK_SECTION.type,
314
+ key: _toolbar.INSERT_BLOCK_SECTION.key,
315
+ rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
316
+ }],
317
+ component: function component(_ref4) {
318
+ var children = _ref4.children;
319
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
320
+ only: "sm"
321
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
322
+ }
323
+ });
324
+ components.push({
325
+ type: _toolbar.INSERT_BUTTON.type,
326
+ key: _toolbar.INSERT_BUTTON.key,
327
+ parents: [{
328
+ type: _toolbar.INSERT_GROUP.type,
329
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-sm"),
330
+ rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
331
+ }],
332
+ component: createInsertButtonComponent('sm')
333
+ });
334
+ components.push({
335
+ type: _toolbar.INSERT_GROUP.type,
336
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-md"),
337
+ parents: [{
338
+ type: _toolbar.INSERT_BLOCK_SECTION.type,
339
+ key: _toolbar.INSERT_BLOCK_SECTION.key,
340
+ rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
341
+ }],
342
+ component: function component(_ref5) {
343
+ var children = _ref5.children;
344
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
345
+ only: "md"
346
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
347
+ }
348
+ });
349
+ components.push({
350
+ type: _toolbar.INSERT_BUTTON.type,
351
+ key: _toolbar.INSERT_BUTTON.key,
352
+ parents: [{
353
+ type: _toolbar.INSERT_GROUP.type,
354
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-md"),
355
+ rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
356
+ }],
357
+ component: createInsertButtonComponent('md')
358
+ });
359
+ components.push({
360
+ type: _toolbar.INSERT_GROUP.type,
361
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-lg"),
362
+ parents: [{
363
+ type: _toolbar.INSERT_BLOCK_SECTION.type,
364
+ key: _toolbar.INSERT_BLOCK_SECTION.key,
365
+ rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
366
+ }],
367
+ component: function component(_ref6) {
368
+ var children = _ref6.children;
369
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
370
+ only: "lg"
371
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
372
+ }
373
+ });
374
+ components.push({
375
+ type: _toolbar.INSERT_BUTTON.type,
376
+ key: _toolbar.INSERT_BUTTON.key,
377
+ parents: [{
378
+ type: _toolbar.INSERT_GROUP.type,
379
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-lg"),
380
+ rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
381
+ }],
382
+ component: createInsertButtonComponent('lg')
383
+ });
384
+ components.push({
385
+ type: _toolbar.INSERT_GROUP.type,
386
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-xl"),
387
+ parents: [{
388
+ type: _toolbar.INSERT_BLOCK_SECTION.type,
389
+ key: _toolbar.INSERT_BLOCK_SECTION.key,
390
+ rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
391
+ }],
392
+ component: function component(_ref7) {
393
+ var children = _ref7.children;
394
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
395
+ only: "xl"
396
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
397
+ }
398
+ });
399
+ components.push({
400
+ type: _toolbar.INSERT_BUTTON.type,
401
+ key: _toolbar.INSERT_BUTTON.key,
402
+ parents: [{
403
+ type: _toolbar.INSERT_GROUP.type,
404
+ key: "".concat(_toolbar.INSERT_GROUP.key, "-xl"),
405
+ rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
406
+ }],
407
+ component: createInsertButtonComponent('xl')
408
+ });
409
+ } else {
410
+ components.push({
411
+ type: _toolbar.INSERT_GROUP.type,
412
+ key: _toolbar.INSERT_GROUP.key,
413
+ parents: [{
414
+ type: _toolbar.INSERT_BLOCK_SECTION.type,
415
+ key: _toolbar.INSERT_BLOCK_SECTION.key,
416
+ rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
417
+ }]
418
+ });
419
+ components.push({
420
+ type: _toolbar.INSERT_BUTTON.type,
421
+ key: _toolbar.INSERT_BUTTON.key,
422
+ parents: [{
423
+ type: _toolbar.INSERT_GROUP.type,
424
+ key: _toolbar.INSERT_GROUP.key,
425
+ rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
426
+ }],
427
+ component: function component() {
428
+ return /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
429
+ api: api,
430
+ toolbarConfig: config,
431
+ showElementBrowserLink: options.showElementBrowserLink,
432
+ tableSelectorSupported: options.tableSelectorSupported,
433
+ onInsertBlockType: onInsertBlockType,
434
+ nativeStatusSupported: options.nativeStatusSupported,
435
+ horizontalRuleEnabled: options.horizontalRuleEnabled,
436
+ expandEnabled: options.allowExpand,
437
+ insertMenuItems: options.insertMenuItems,
438
+ numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
439
+ });
440
+ }
441
+ });
442
+ }
297
443
  }
298
444
  return components;
299
445
  };
package/dist/es2019/ui/toolbar-components/InsertButton.js CHANGED
@@ -22,6 +22,7 @@ import { EmojiPickerPopup } from './popups/EmojiPickerPopup';
22
22
  const FIT_HEIGHT_BUFFER = 100;
23
23
  export const InsertButton = ({
24
24
  api,
25
+ breakpoint,
25
26
  showElementBrowserLink = false,
26
27
  isFullPageAppearance = false,
27
28
  tableSelectorSupported,
@@ -30,7 +31,8 @@ export const InsertButton = ({
30
31
  expandEnabled,
31
32
  insertMenuItems,
32
33
  numberOfButtons,
33
- onInsertBlockType
34
+ onInsertBlockType,
35
+ toolbarConfig
34
36
  }) => {
35
37
  const {
36
38
  editorView
@@ -61,6 +63,7 @@ export const InsertButton = ({
61
63
  isTypeAheadAllowed
62
64
  } = useInsertButtonState({
63
65
  api,
66
+ breakpoint,
64
67
  editorView: editorView || undefined,
65
68
  horizontalRuleEnabled,
66
69
  insertMenuItems,
@@ -68,7 +71,8 @@ export const InsertButton = ({
68
71
  numberOfButtons,
69
72
  tableSelectorSupported,
70
73
  expandEnabled,
71
- showElementBrowserLink
74
+ showElementBrowserLink,
75
+ toolbarConfig
72
76
  });
73
77
  if (!(api !== null && api !== void 0 && api.insertBlock)) {
74
78
  return null;
package/dist/es2019/ui/toolbar-components/hooks/filterDropdownItems.js ADDED
@@ -0,0 +1,39 @@
1
+ const ITEM_TO_BUTTON_MAP = {
2
+ action: 'taskList',
3
+ media: 'media',
4
+ 'image upload': 'media',
5
+ mention: 'mention',
6
+ emoji: 'emoji',
7
+ table: 'table',
8
+ layout: 'layout',
9
+ codeblock: 'codeBlock'
10
+ };
11
+ const BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl'];
12
+
13
+ /**
14
+ * Determines if a toolbar button is visible at the current breakpoint.
15
+ */
16
+ function isButtonVisibleAtBreakpoint(buttonShowAt, currentBreakpoint) {
17
+ if (!currentBreakpoint) {
18
+ return false;
19
+ }
20
+ const showAtIndex = BREAKPOINT_ORDER.indexOf(buttonShowAt);
21
+ const currentIndex = BREAKPOINT_ORDER.indexOf(currentBreakpoint);
22
+ return currentIndex >= showAtIndex;
23
+ }
24
+ export function filterDropdownItemsByBreakpoint(items, currentBreakpoint, toolbarConfig) {
25
+ return items.filter(item => {
26
+ const itemName = item.value.name;
27
+ const buttonKey = ITEM_TO_BUTTON_MAP[itemName];
28
+ if (!buttonKey) {
29
+ return true;
30
+ }
31
+ const buttonConfig = toolbarConfig[buttonKey];
32
+ if (!(buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.enabled)) {
33
+ return true;
34
+ }
35
+ const showAt = buttonConfig.showAt || 'lg';
36
+ const isVisible = isButtonVisibleAtBreakpoint(showAt, currentBreakpoint);
37
+ return !isVisible;
38
+ });
39
+ }
package/dist/es2019/ui/toolbar-components/hooks/useInsertButtonState.js CHANGED
@@ -1,8 +1,11 @@
1
+ import { useMemo } from 'react';
1
2
  import { useIntl } from 'react-intl-next';
2
3
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
3
4
  import { createItems } from '../../ToolbarInsertBlock/create-items';
5
+ import { filterDropdownItemsByBreakpoint } from './filterDropdownItems';
4
6
  export const useInsertButtonState = ({
5
7
  api,
8
+ breakpoint,
6
9
  editorView,
7
10
  horizontalRuleEnabled,
8
11
  insertMenuItems,
@@ -10,7 +13,8 @@ export const useInsertButtonState = ({
10
13
  numberOfButtons,
11
14
  tableSelectorSupported,
12
15
  expandEnabled,
13
- showElementBrowserLink
16
+ showElementBrowserLink,
17
+ toolbarConfig
14
18
  }) => {
15
19
  const {
16
20
  formatMessage
@@ -40,7 +44,7 @@ export const useInsertButtonState = ({
40
44
  const actionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.taskItem);
41
45
  const decisionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.decisionItem);
42
46
  const layoutSectionEnabled = !!(api !== null && api !== void 0 && api.layout);
43
- const [, dropdownItems] = editorView !== null && editorView !== void 0 && editorView.state.schema ? createItems({
47
+ const [, allDropdownItems] = editorView !== null && editorView !== void 0 && editorView.state.schema ? createItems({
44
48
  isTypeAheadAllowed: isTypeAheadAllowed,
45
49
  tableSupported: !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table),
46
50
  tableSelectorSupported,
@@ -73,6 +77,12 @@ export const useInsertButtonState = ({
73
77
  numberOfButtons: numberOfButtons || 0,
74
78
  formatMessage
75
79
  }) : [, []];
80
+ const dropdownItems = useMemo(() => {
81
+ if (!breakpoint || !toolbarConfig) {
82
+ return allDropdownItems;
83
+ }
84
+ return filterDropdownItemsByBreakpoint(allDropdownItems, breakpoint, toolbarConfig);
85
+ }, [allDropdownItems, breakpoint, toolbarConfig]);
76
86
  return {
77
87
  dropdownItems,
78
88
  emojiProvider,
package/dist/es2019/ui/toolbar-components.js CHANGED
@@ -240,25 +240,11 @@ export const getToolbarComponents = ({
240
240
 
241
241
  // Insert Group
242
242
  if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
243
- components.push({
244
- type: INSERT_GROUP.type,
245
- key: INSERT_GROUP.key,
246
- parents: [{
247
- type: INSERT_BLOCK_SECTION.type,
248
- key: INSERT_BLOCK_SECTION.key,
249
- rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
250
- }]
251
- });
252
- components.push({
253
- type: INSERT_BUTTON.type,
254
- key: INSERT_BUTTON.key,
255
- parents: [{
256
- type: INSERT_GROUP.type,
257
- key: INSERT_GROUP.key,
258
- rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
259
- }],
260
- component: () => /*#__PURE__*/React.createElement(InsertButton, {
243
+ const createInsertButtonComponent = breakpoint => {
244
+ return () => /*#__PURE__*/React.createElement(InsertButton, {
261
245
  api: api,
246
+ breakpoint: breakpoint,
247
+ toolbarConfig: config,
262
248
  showElementBrowserLink: options.showElementBrowserLink,
263
249
  tableSelectorSupported: options.tableSelectorSupported,
264
250
  onInsertBlockType: onInsertBlockType,
@@ -266,9 +252,162 @@ export const getToolbarComponents = ({
266
252
  horizontalRuleEnabled: options.horizontalRuleEnabled,
267
253
  expandEnabled: options.allowExpand,
268
254
  insertMenuItems: options.insertMenuItems,
269
- numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
270
- })
271
- });
255
+ numberOfButtons: 0
256
+ });
257
+ };
258
+ if (fg('platform_editor_toolbar_aifc_ga_blockers')) {
259
+ components.push({
260
+ type: INSERT_GROUP.type,
261
+ key: `${INSERT_GROUP.key}-none`,
262
+ parents: [{
263
+ type: INSERT_BLOCK_SECTION.type,
264
+ key: INSERT_BLOCK_SECTION.key,
265
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
266
+ }],
267
+ component: ({
268
+ children
269
+ }) => /*#__PURE__*/React.createElement(Show, {
270
+ below: "sm"
271
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
272
+ });
273
+ components.push({
274
+ type: INSERT_BUTTON.type,
275
+ key: INSERT_BUTTON.key,
276
+ parents: [{
277
+ type: INSERT_GROUP.type,
278
+ key: `${INSERT_GROUP.key}-none`,
279
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
280
+ }],
281
+ component: createInsertButtonComponent(null)
282
+ });
283
+ components.push({
284
+ type: INSERT_GROUP.type,
285
+ key: `${INSERT_GROUP.key}-sm`,
286
+ parents: [{
287
+ type: INSERT_BLOCK_SECTION.type,
288
+ key: INSERT_BLOCK_SECTION.key,
289
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
290
+ }],
291
+ component: ({
292
+ children
293
+ }) => /*#__PURE__*/React.createElement(Show, {
294
+ only: "sm"
295
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
296
+ });
297
+ components.push({
298
+ type: INSERT_BUTTON.type,
299
+ key: INSERT_BUTTON.key,
300
+ parents: [{
301
+ type: INSERT_GROUP.type,
302
+ key: `${INSERT_GROUP.key}-sm`,
303
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
304
+ }],
305
+ component: createInsertButtonComponent('sm')
306
+ });
307
+ components.push({
308
+ type: INSERT_GROUP.type,
309
+ key: `${INSERT_GROUP.key}-md`,
310
+ parents: [{
311
+ type: INSERT_BLOCK_SECTION.type,
312
+ key: INSERT_BLOCK_SECTION.key,
313
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
314
+ }],
315
+ component: ({
316
+ children
317
+ }) => /*#__PURE__*/React.createElement(Show, {
318
+ only: "md"
319
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
320
+ });
321
+ components.push({
322
+ type: INSERT_BUTTON.type,
323
+ key: INSERT_BUTTON.key,
324
+ parents: [{
325
+ type: INSERT_GROUP.type,
326
+ key: `${INSERT_GROUP.key}-md`,
327
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
328
+ }],
329
+ component: createInsertButtonComponent('md')
330
+ });
331
+ components.push({
332
+ type: INSERT_GROUP.type,
333
+ key: `${INSERT_GROUP.key}-lg`,
334
+ parents: [{
335
+ type: INSERT_BLOCK_SECTION.type,
336
+ key: INSERT_BLOCK_SECTION.key,
337
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
338
+ }],
339
+ component: ({
340
+ children
341
+ }) => /*#__PURE__*/React.createElement(Show, {
342
+ only: "lg"
343
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
344
+ });
345
+ components.push({
346
+ type: INSERT_BUTTON.type,
347
+ key: INSERT_BUTTON.key,
348
+ parents: [{
349
+ type: INSERT_GROUP.type,
350
+ key: `${INSERT_GROUP.key}-lg`,
351
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
352
+ }],
353
+ component: createInsertButtonComponent('lg')
354
+ });
355
+ components.push({
356
+ type: INSERT_GROUP.type,
357
+ key: `${INSERT_GROUP.key}-xl`,
358
+ parents: [{
359
+ type: INSERT_BLOCK_SECTION.type,
360
+ key: INSERT_BLOCK_SECTION.key,
361
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
362
+ }],
363
+ component: ({
364
+ children
365
+ }) => /*#__PURE__*/React.createElement(Show, {
366
+ only: "xl"
367
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
368
+ });
369
+ components.push({
370
+ type: INSERT_BUTTON.type,
371
+ key: INSERT_BUTTON.key,
372
+ parents: [{
373
+ type: INSERT_GROUP.type,
374
+ key: `${INSERT_GROUP.key}-xl`,
375
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
376
+ }],
377
+ component: createInsertButtonComponent('xl')
378
+ });
379
+ } else {
380
+ components.push({
381
+ type: INSERT_GROUP.type,
382
+ key: INSERT_GROUP.key,
383
+ parents: [{
384
+ type: INSERT_BLOCK_SECTION.type,
385
+ key: INSERT_BLOCK_SECTION.key,
386
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
387
+ }]
388
+ });
389
+ components.push({
390
+ type: INSERT_BUTTON.type,
391
+ key: INSERT_BUTTON.key,
392
+ parents: [{
393
+ type: INSERT_GROUP.type,
394
+ key: INSERT_GROUP.key,
395
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
396
+ }],
397
+ component: () => /*#__PURE__*/React.createElement(InsertButton, {
398
+ api: api,
399
+ toolbarConfig: config,
400
+ showElementBrowserLink: options.showElementBrowserLink,
401
+ tableSelectorSupported: options.tableSelectorSupported,
402
+ onInsertBlockType: onInsertBlockType,
403
+ nativeStatusSupported: options.nativeStatusSupported,
404
+ horizontalRuleEnabled: options.horizontalRuleEnabled,
405
+ expandEnabled: options.allowExpand,
406
+ insertMenuItems: options.insertMenuItems,
407
+ numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
408
+ })
409
+ });
410
+ }
272
411
  }
273
412
  return components;
274
413
  };
package/dist/esm/ui/toolbar-components/InsertButton.js CHANGED
@@ -23,6 +23,7 @@ import { EmojiPickerPopup } from './popups/EmojiPickerPopup';
23
23
  var FIT_HEIGHT_BUFFER = 100;
24
24
  export var InsertButton = function InsertButton(_ref) {
25
25
  var api = _ref.api,
26
+ breakpoint = _ref.breakpoint,
26
27
  _ref$showElementBrows = _ref.showElementBrowserLink,
27
28
  showElementBrowserLink = _ref$showElementBrows === void 0 ? false : _ref$showElementBrows,
28
29
  _ref$isFullPageAppear = _ref.isFullPageAppearance,
@@ -33,7 +34,8 @@ export var InsertButton = function InsertButton(_ref) {
33
34
  expandEnabled = _ref.expandEnabled,
34
35
  insertMenuItems = _ref.insertMenuItems,
35
36
  numberOfButtons = _ref.numberOfButtons,
36
- onInsertBlockType = _ref.onInsertBlockType;
37
+ onInsertBlockType = _ref.onInsertBlockType,
38
+ toolbarConfig = _ref.toolbarConfig;
37
39
  var _useEditorToolbar = useEditorToolbar(),
38
40
  editorView = _useEditorToolbar.editorView;
39
41
  var _useToolbarUI = useToolbarUI(),
@@ -59,6 +61,7 @@ export var InsertButton = function InsertButton(_ref) {
59
61
  var showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
60
62
  var _useInsertButtonState = useInsertButtonState({
61
63
  api: api,
64
+ breakpoint: breakpoint,
62
65
  editorView: editorView || undefined,
63
66
  horizontalRuleEnabled: horizontalRuleEnabled,
64
67
  insertMenuItems: insertMenuItems,
@@ -66,7 +69,8 @@ export var InsertButton = function InsertButton(_ref) {
66
69
  numberOfButtons: numberOfButtons,
67
70
  tableSelectorSupported: tableSelectorSupported,
68
71
  expandEnabled: expandEnabled,
69
- showElementBrowserLink: showElementBrowserLink
72
+ showElementBrowserLink: showElementBrowserLink,
73
+ toolbarConfig: toolbarConfig
70
74
  }),
71
75
  dropdownItems = _useInsertButtonState.dropdownItems,
72
76
  emojiProvider = _useInsertButtonState.emojiProvider,
package/dist/esm/ui/toolbar-components/hooks/filterDropdownItems.js ADDED
@@ -0,0 +1,39 @@
1
+ var ITEM_TO_BUTTON_MAP = {
2
+ action: 'taskList',
3
+ media: 'media',
4
+ 'image upload': 'media',
5
+ mention: 'mention',
6
+ emoji: 'emoji',
7
+ table: 'table',
8
+ layout: 'layout',
9
+ codeblock: 'codeBlock'
10
+ };
11
+ var BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl'];
12
+
13
+ /**
14
+ * Determines if a toolbar button is visible at the current breakpoint.
15
+ */
16
+ function isButtonVisibleAtBreakpoint(buttonShowAt, currentBreakpoint) {
17
+ if (!currentBreakpoint) {
18
+ return false;
19
+ }
20
+ var showAtIndex = BREAKPOINT_ORDER.indexOf(buttonShowAt);
21
+ var currentIndex = BREAKPOINT_ORDER.indexOf(currentBreakpoint);
22
+ return currentIndex >= showAtIndex;
23
+ }
24
+ export function filterDropdownItemsByBreakpoint(items, currentBreakpoint, toolbarConfig) {
25
+ return items.filter(function (item) {
26
+ var itemName = item.value.name;
27
+ var buttonKey = ITEM_TO_BUTTON_MAP[itemName];
28
+ if (!buttonKey) {
29
+ return true;
30
+ }
31
+ var buttonConfig = toolbarConfig[buttonKey];
32
+ if (!(buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.enabled)) {
33
+ return true;
34
+ }
35
+ var showAt = buttonConfig.showAt || 'lg';
36
+ var isVisible = isButtonVisibleAtBreakpoint(showAt, currentBreakpoint);
37
+ return !isVisible;
38
+ });
39
+ }
package/dist/esm/ui/toolbar-components/hooks/useInsertButtonState.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import { useMemo } from 'react';
2
3
  import { useIntl } from 'react-intl-next';
3
4
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
4
5
  import { createItems } from '../../ToolbarInsertBlock/create-items';
6
+ import { filterDropdownItemsByBreakpoint } from './filterDropdownItems';
5
7
  export var useInsertButtonState = function useInsertButtonState(_ref) {
6
8
  var api = _ref.api,
9
+ breakpoint = _ref.breakpoint,
7
10
  editorView = _ref.editorView,
8
11
  horizontalRuleEnabled = _ref.horizontalRuleEnabled,
9
12
  insertMenuItems = _ref.insertMenuItems,
@@ -11,7 +14,8 @@ export var useInsertButtonState = function useInsertButtonState(_ref) {
11
14
  numberOfButtons = _ref.numberOfButtons,
12
15
  tableSelectorSupported = _ref.tableSelectorSupported,
13
16
  expandEnabled = _ref.expandEnabled,
14
- showElementBrowserLink = _ref.showElementBrowserLink;
17
+ showElementBrowserLink = _ref.showElementBrowserLink,
18
+ toolbarConfig = _ref.toolbarConfig;
15
19
  var _useIntl = useIntl(),
16
20
  formatMessage = _useIntl.formatMessage;
17
21
  var isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
@@ -73,7 +77,13 @@ export var useInsertButtonState = function useInsertButtonState(_ref) {
73
77
  formatMessage: formatMessage
74
78
  }) : [, []],
75
79
  _ref3 = _slicedToArray(_ref2, 2),
76
- dropdownItems = _ref3[1];
80
+ allDropdownItems = _ref3[1];
81
+ var dropdownItems = useMemo(function () {
82
+ if (!breakpoint || !toolbarConfig) {
83
+ return allDropdownItems;
84
+ }
85
+ return filterDropdownItemsByBreakpoint(allDropdownItems, breakpoint, toolbarConfig);
86
+ }, [allDropdownItems, breakpoint, toolbarConfig]);
77
87
  return {
78
88
  dropdownItems: dropdownItems,
79
89
  emojiProvider: emojiProvider,
package/dist/esm/ui/toolbar-components.js CHANGED
@@ -256,26 +256,12 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
256
256
 
257
257
  // Insert Group
258
258
  if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
259
- components.push({
260
- type: INSERT_GROUP.type,
261
- key: INSERT_GROUP.key,
262
- parents: [{
263
- type: INSERT_BLOCK_SECTION.type,
264
- key: INSERT_BLOCK_SECTION.key,
265
- rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
266
- }]
267
- });
268
- components.push({
269
- type: INSERT_BUTTON.type,
270
- key: INSERT_BUTTON.key,
271
- parents: [{
272
- type: INSERT_GROUP.type,
273
- key: INSERT_GROUP.key,
274
- rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
275
- }],
276
- component: function component() {
259
+ var createInsertButtonComponent = function createInsertButtonComponent(breakpoint) {
260
+ return function () {
277
261
  return /*#__PURE__*/React.createElement(InsertButton, {
278
262
  api: api,
263
+ breakpoint: breakpoint,
264
+ toolbarConfig: config,
279
265
  showElementBrowserLink: options.showElementBrowserLink,
280
266
  tableSelectorSupported: options.tableSelectorSupported,
281
267
  onInsertBlockType: onInsertBlockType,
@@ -283,10 +269,170 @@ export var getToolbarComponents = function getToolbarComponents(_ref) {
283
269
  horizontalRuleEnabled: options.horizontalRuleEnabled,
284
270
  expandEnabled: options.allowExpand,
285
271
  insertMenuItems: options.insertMenuItems,
286
- numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
272
+ numberOfButtons: 0
287
273
  });
288
- }
289
- });
274
+ };
275
+ };
276
+ if (fg('platform_editor_toolbar_aifc_ga_blockers')) {
277
+ components.push({
278
+ type: INSERT_GROUP.type,
279
+ key: "".concat(INSERT_GROUP.key, "-none"),
280
+ parents: [{
281
+ type: INSERT_BLOCK_SECTION.type,
282
+ key: INSERT_BLOCK_SECTION.key,
283
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
284
+ }],
285
+ component: function component(_ref3) {
286
+ var children = _ref3.children;
287
+ return /*#__PURE__*/React.createElement(Show, {
288
+ below: "sm"
289
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
290
+ }
291
+ });
292
+ components.push({
293
+ type: INSERT_BUTTON.type,
294
+ key: INSERT_BUTTON.key,
295
+ parents: [{
296
+ type: INSERT_GROUP.type,
297
+ key: "".concat(INSERT_GROUP.key, "-none"),
298
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
299
+ }],
300
+ component: createInsertButtonComponent(null)
301
+ });
302
+ components.push({
303
+ type: INSERT_GROUP.type,
304
+ key: "".concat(INSERT_GROUP.key, "-sm"),
305
+ parents: [{
306
+ type: INSERT_BLOCK_SECTION.type,
307
+ key: INSERT_BLOCK_SECTION.key,
308
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
309
+ }],
310
+ component: function component(_ref4) {
311
+ var children = _ref4.children;
312
+ return /*#__PURE__*/React.createElement(Show, {
313
+ only: "sm"
314
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
315
+ }
316
+ });
317
+ components.push({
318
+ type: INSERT_BUTTON.type,
319
+ key: INSERT_BUTTON.key,
320
+ parents: [{
321
+ type: INSERT_GROUP.type,
322
+ key: "".concat(INSERT_GROUP.key, "-sm"),
323
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
324
+ }],
325
+ component: createInsertButtonComponent('sm')
326
+ });
327
+ components.push({
328
+ type: INSERT_GROUP.type,
329
+ key: "".concat(INSERT_GROUP.key, "-md"),
330
+ parents: [{
331
+ type: INSERT_BLOCK_SECTION.type,
332
+ key: INSERT_BLOCK_SECTION.key,
333
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
334
+ }],
335
+ component: function component(_ref5) {
336
+ var children = _ref5.children;
337
+ return /*#__PURE__*/React.createElement(Show, {
338
+ only: "md"
339
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
340
+ }
341
+ });
342
+ components.push({
343
+ type: INSERT_BUTTON.type,
344
+ key: INSERT_BUTTON.key,
345
+ parents: [{
346
+ type: INSERT_GROUP.type,
347
+ key: "".concat(INSERT_GROUP.key, "-md"),
348
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
349
+ }],
350
+ component: createInsertButtonComponent('md')
351
+ });
352
+ components.push({
353
+ type: INSERT_GROUP.type,
354
+ key: "".concat(INSERT_GROUP.key, "-lg"),
355
+ parents: [{
356
+ type: INSERT_BLOCK_SECTION.type,
357
+ key: INSERT_BLOCK_SECTION.key,
358
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
359
+ }],
360
+ component: function component(_ref6) {
361
+ var children = _ref6.children;
362
+ return /*#__PURE__*/React.createElement(Show, {
363
+ only: "lg"
364
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
365
+ }
366
+ });
367
+ components.push({
368
+ type: INSERT_BUTTON.type,
369
+ key: INSERT_BUTTON.key,
370
+ parents: [{
371
+ type: INSERT_GROUP.type,
372
+ key: "".concat(INSERT_GROUP.key, "-lg"),
373
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
374
+ }],
375
+ component: createInsertButtonComponent('lg')
376
+ });
377
+ components.push({
378
+ type: INSERT_GROUP.type,
379
+ key: "".concat(INSERT_GROUP.key, "-xl"),
380
+ parents: [{
381
+ type: INSERT_BLOCK_SECTION.type,
382
+ key: INSERT_BLOCK_SECTION.key,
383
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
384
+ }],
385
+ component: function component(_ref7) {
386
+ var children = _ref7.children;
387
+ return /*#__PURE__*/React.createElement(Show, {
388
+ only: "xl"
389
+ }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
390
+ }
391
+ });
392
+ components.push({
393
+ type: INSERT_BUTTON.type,
394
+ key: INSERT_BUTTON.key,
395
+ parents: [{
396
+ type: INSERT_GROUP.type,
397
+ key: "".concat(INSERT_GROUP.key, "-xl"),
398
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
399
+ }],
400
+ component: createInsertButtonComponent('xl')
401
+ });
402
+ } else {
403
+ components.push({
404
+ type: INSERT_GROUP.type,
405
+ key: INSERT_GROUP.key,
406
+ parents: [{
407
+ type: INSERT_BLOCK_SECTION.type,
408
+ key: INSERT_BLOCK_SECTION.key,
409
+ rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
410
+ }]
411
+ });
412
+ components.push({
413
+ type: INSERT_BUTTON.type,
414
+ key: INSERT_BUTTON.key,
415
+ parents: [{
416
+ type: INSERT_GROUP.type,
417
+ key: INSERT_GROUP.key,
418
+ rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
419
+ }],
420
+ component: function component() {
421
+ return /*#__PURE__*/React.createElement(InsertButton, {
422
+ api: api,
423
+ toolbarConfig: config,
424
+ showElementBrowserLink: options.showElementBrowserLink,
425
+ tableSelectorSupported: options.tableSelectorSupported,
426
+ onInsertBlockType: onInsertBlockType,
427
+ nativeStatusSupported: options.nativeStatusSupported,
428
+ horizontalRuleEnabled: options.horizontalRuleEnabled,
429
+ expandEnabled: options.allowExpand,
430
+ insertMenuItems: options.insertMenuItems,
431
+ numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
432
+ });
433
+ }
434
+ });
435
+ }
290
436
  }
291
437
  return components;
292
438
  };
package/dist/types/ui/toolbar-components/InsertButton.d.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import React from 'react';
2
2
  import type { ExtractInjectionAPI, Command } from '@atlaskit/editor-common/types';
3
3
  import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
4
+ import type { Breakpoint } from '@atlaskit/editor-toolbar';
4
5
  import type { InsertBlockPlugin } from '../../insertBlockPluginType';
6
+ import type { ToolbarInsertBlockButtonsConfig } from '../../types';
5
7
  type InsertButtonProps = {
6
8
  api?: ExtractInjectionAPI<InsertBlockPlugin>;
9
+ breakpoint?: Breakpoint | null;
7
10
  expandEnabled?: boolean;
8
11
  horizontalRuleEnabled?: boolean;
9
12
  insertMenuItems?: MenuItem[];
@@ -13,6 +16,7 @@ type InsertButtonProps = {
13
16
  onInsertBlockType?: (name: string) => Command;
14
17
  showElementBrowserLink?: boolean;
15
18
  tableSelectorSupported?: boolean;
19
+ toolbarConfig?: ToolbarInsertBlockButtonsConfig;
16
20
  };
17
- export declare const InsertButton: ({ api, showElementBrowserLink, isFullPageAppearance, tableSelectorSupported, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, numberOfButtons, onInsertBlockType, }: InsertButtonProps) => React.JSX.Element | null;
21
+ export declare const InsertButton: ({ api, breakpoint, showElementBrowserLink, isFullPageAppearance, tableSelectorSupported, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, numberOfButtons, onInsertBlockType, toolbarConfig, }: InsertButtonProps) => React.JSX.Element | null;
18
22
  export {};
package/dist/types/ui/toolbar-components/TableSizePicker.d.ts CHANGED
@@ -3,5 +3,5 @@ import type { BaseToolbarButtonProps } from './shared/types';
3
3
  interface TableSizePickerProps extends BaseToolbarButtonProps {
4
4
  tableSelectorSupported?: boolean;
5
5
  }
6
- export declare const TableSizePicker: ({ api, tableSelectorSupported }: TableSizePickerProps) => React.JSX.Element | null;
6
+ export declare const TableSizePicker: ({ api, tableSelectorSupported, }: TableSizePickerProps) => React.JSX.Element | null;
7
7
  export {};
package/dist/types/ui/toolbar-components/hooks/filterDropdownItems.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { Breakpoint } from '@atlaskit/editor-toolbar';
2
+ import type { ToolbarInsertBlockButtonsConfig } from '../../../types';
3
+ import type { BlockMenuItem } from '../../ToolbarInsertBlock/create-items';
4
+ export declare function filterDropdownItemsByBreakpoint(items: BlockMenuItem[], currentBreakpoint: Breakpoint | null, toolbarConfig: ToolbarInsertBlockButtonsConfig): BlockMenuItem[];
package/dist/types/ui/toolbar-components/hooks/useInsertButtonState.d.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
2
  import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
3
- import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
3
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
4
+ import type { Breakpoint } from '@atlaskit/editor-toolbar';
4
5
  import type { EmojiProvider } from '@atlaskit/emoji';
5
6
  import type { InsertBlockPlugin } from '../../../insertBlockPluginType';
7
+ import type { ToolbarInsertBlockButtonsConfig } from '../../../types';
6
8
  import type { BlockMenuItem } from '../../ToolbarInsertBlock/create-items';
7
9
  interface UseInsertButtonStateProps {
8
10
  api?: ExtractInjectionAPI<InsertBlockPlugin>;
11
+ breakpoint?: Breakpoint | null;
9
12
  editorView?: EditorView;
10
13
  expandEnabled?: boolean;
11
14
  horizontalRuleEnabled?: boolean;
@@ -14,11 +17,12 @@ interface UseInsertButtonStateProps {
14
17
  numberOfButtons?: number;
15
18
  showElementBrowserLink?: boolean;
16
19
  tableSelectorSupported?: boolean;
20
+ toolbarConfig?: ToolbarInsertBlockButtonsConfig;
17
21
  }
18
22
  export interface InsertButtonState {
19
23
  dropdownItems: BlockMenuItem[];
20
24
  emojiProvider?: EmojiProvider;
21
25
  isTypeAheadAllowed?: boolean;
22
26
  }
23
- export declare const useInsertButtonState: ({ api, editorView, horizontalRuleEnabled, insertMenuItems, nativeStatusSupported, numberOfButtons, tableSelectorSupported, expandEnabled, showElementBrowserLink, }: UseInsertButtonStateProps) => InsertButtonState;
27
+ export declare const useInsertButtonState: ({ api, breakpoint, editorView, horizontalRuleEnabled, insertMenuItems, nativeStatusSupported, numberOfButtons, tableSelectorSupported, expandEnabled, showElementBrowserLink, toolbarConfig, }: UseInsertButtonStateProps) => InsertButtonState;
24
28
  export {};
package/dist/types-ts4.5/ui/toolbar-components/InsertButton.d.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import React from 'react';
2
2
  import type { ExtractInjectionAPI, Command } from '@atlaskit/editor-common/types';
3
3
  import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
4
+ import type { Breakpoint } from '@atlaskit/editor-toolbar';
4
5
  import type { InsertBlockPlugin } from '../../insertBlockPluginType';
6
+ import type { ToolbarInsertBlockButtonsConfig } from '../../types';
5
7
  type InsertButtonProps = {
6
8
  api?: ExtractInjectionAPI<InsertBlockPlugin>;
9
+ breakpoint?: Breakpoint | null;
7
10
  expandEnabled?: boolean;
8
11
  horizontalRuleEnabled?: boolean;
9
12
  insertMenuItems?: MenuItem[];
@@ -13,6 +16,7 @@ type InsertButtonProps = {
13
16
  onInsertBlockType?: (name: string) => Command;
14
17
  showElementBrowserLink?: boolean;
15
18
  tableSelectorSupported?: boolean;
19
+ toolbarConfig?: ToolbarInsertBlockButtonsConfig;
16
20
  };
17
- export declare const InsertButton: ({ api, showElementBrowserLink, isFullPageAppearance, tableSelectorSupported, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, numberOfButtons, onInsertBlockType, }: InsertButtonProps) => React.JSX.Element | null;
21
+ export declare const InsertButton: ({ api, breakpoint, showElementBrowserLink, isFullPageAppearance, tableSelectorSupported, nativeStatusSupported, horizontalRuleEnabled, expandEnabled, insertMenuItems, numberOfButtons, onInsertBlockType, toolbarConfig, }: InsertButtonProps) => React.JSX.Element | null;
18
22
  export {};
package/dist/types-ts4.5/ui/toolbar-components/TableSizePicker.d.ts CHANGED
@@ -3,5 +3,5 @@ import type { BaseToolbarButtonProps } from './shared/types';
3
3
  interface TableSizePickerProps extends BaseToolbarButtonProps {
4
4
  tableSelectorSupported?: boolean;
5
5
  }
6
- export declare const TableSizePicker: ({ api, tableSelectorSupported }: TableSizePickerProps) => React.JSX.Element | null;
6
+ export declare const TableSizePicker: ({ api, tableSelectorSupported, }: TableSizePickerProps) => React.JSX.Element | null;
7
7
  export {};
package/dist/types-ts4.5/ui/toolbar-components/hooks/filterDropdownItems.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import type { Breakpoint } from '@atlaskit/editor-toolbar';
2
+ import type { ToolbarInsertBlockButtonsConfig } from '../../../types';
3
+ import type { BlockMenuItem } from '../../ToolbarInsertBlock/create-items';
4
+ export declare function filterDropdownItemsByBreakpoint(items: BlockMenuItem[], currentBreakpoint: Breakpoint | null, toolbarConfig: ToolbarInsertBlockButtonsConfig): BlockMenuItem[];
package/dist/types-ts4.5/ui/toolbar-components/hooks/useInsertButtonState.d.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
2
  import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
3
- import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
3
+ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
4
+ import type { Breakpoint } from '@atlaskit/editor-toolbar';
4
5
  import type { EmojiProvider } from '@atlaskit/emoji';
5
6
  import type { InsertBlockPlugin } from '../../../insertBlockPluginType';
7
+ import type { ToolbarInsertBlockButtonsConfig } from '../../../types';
6
8
  import type { BlockMenuItem } from '../../ToolbarInsertBlock/create-items';
7
9
  interface UseInsertButtonStateProps {
8
10
  api?: ExtractInjectionAPI<InsertBlockPlugin>;
11
+ breakpoint?: Breakpoint | null;
9
12
  editorView?: EditorView;
10
13
  expandEnabled?: boolean;
11
14
  horizontalRuleEnabled?: boolean;
@@ -14,11 +17,12 @@ interface UseInsertButtonStateProps {
14
17
  numberOfButtons?: number;
15
18
  showElementBrowserLink?: boolean;
16
19
  tableSelectorSupported?: boolean;
20
+ toolbarConfig?: ToolbarInsertBlockButtonsConfig;
17
21
  }
18
22
  export interface InsertButtonState {
19
23
  dropdownItems: BlockMenuItem[];
20
24
  emojiProvider?: EmojiProvider;
21
25
  isTypeAheadAllowed?: boolean;
22
26
  }
23
- export declare const useInsertButtonState: ({ api, editorView, horizontalRuleEnabled, insertMenuItems, nativeStatusSupported, numberOfButtons, tableSelectorSupported, expandEnabled, showElementBrowserLink, }: UseInsertButtonStateProps) => InsertButtonState;
27
+ export declare const useInsertButtonState: ({ api, breakpoint, editorView, horizontalRuleEnabled, insertMenuItems, nativeStatusSupported, numberOfButtons, tableSelectorSupported, expandEnabled, showElementBrowserLink, toolbarConfig, }: UseInsertButtonStateProps) => InsertButtonState;
24
28
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "7.0.27",
3
+ "version": "7.0.28",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -41,7 +41,7 @@
41
41
  "@atlaskit/editor-plugin-hyperlink": "^8.1.0",
42
42
  "@atlaskit/editor-plugin-image-upload": "^6.0.0",
43
43
  "@atlaskit/editor-plugin-layout": "^6.2.0",
44
- "@atlaskit/editor-plugin-media": "^8.4.0",
44
+ "@atlaskit/editor-plugin-media": "^8.5.0",
45
45
  "@atlaskit/editor-plugin-media-insert": "^14.0.0",
46
46
  "@atlaskit/editor-plugin-mentions": "^8.2.0",
47
47
  "@atlaskit/editor-plugin-metrics": "^7.1.0",
@@ -51,21 +51,21 @@
51
51
  "@atlaskit/editor-plugin-quick-insert": "^6.1.0",
52
52
  "@atlaskit/editor-plugin-rule": "^6.1.0",
53
53
  "@atlaskit/editor-plugin-status": "^7.1.0",
54
- "@atlaskit/editor-plugin-table": "^15.4.0",
54
+ "@atlaskit/editor-plugin-table": "^15.5.0",
55
55
  "@atlaskit/editor-plugin-tasks-and-decisions": "^9.1.0",
56
56
  "@atlaskit/editor-plugin-toolbar": "^3.4.0",
57
57
  "@atlaskit/editor-plugin-type-ahead": "^6.5.0",
58
- "@atlaskit/editor-prosemirror": "7.0.0",
58
+ "@atlaskit/editor-prosemirror": "^7.2.0",
59
59
  "@atlaskit/editor-shared-styles": "^3.10.0",
60
60
  "@atlaskit/editor-toolbar": "^0.18.0",
61
61
  "@atlaskit/editor-toolbar-model": "^0.2.0",
62
62
  "@atlaskit/emoji": "^69.9.0",
63
- "@atlaskit/icon": "^29.0.0",
63
+ "@atlaskit/icon": "^29.1.0",
64
64
  "@atlaskit/icon-lab": "^5.12.0",
65
65
  "@atlaskit/platform-feature-flags": "^1.1.0",
66
66
  "@atlaskit/theme": "^21.0.0",
67
- "@atlaskit/tmp-editor-statsig": "^15.0.0",
68
- "@atlaskit/tokens": "^8.4.0",
67
+ "@atlaskit/tmp-editor-statsig": "^15.11.0",
68
+ "@atlaskit/tokens": "^8.5.0",
69
69
  "@babel/runtime": "^7.0.0",
70
70
  "@emotion/react": "^11.7.1",
71
71
  "bind-event-listener": "^3.0.0",
@@ -74,13 +74,13 @@
74
74
  "react-virtualized": "^9.22.6"
75
75
  },
76
76
  "peerDependencies": {
77
- "@atlaskit/editor-common": "^110.40.0",
77
+ "@atlaskit/editor-common": "^110.44.0",
78
78
  "react": "^18.2.0",
79
79
  "react-dom": "^18.2.0",
80
80
  "react-intl-next": "npm:react-intl@^5.18.1"
81
81
  },
82
82
  "devDependencies": {
83
- "@testing-library/react": "^13.4.0",
83
+ "@testing-library/react": "^16.3.0",
84
84
  "@types/react-virtualized": "^9.18.12"
85
85
  },
86
86
  "techstack": {
@@ -120,6 +120,9 @@
120
120
  }
121
121
  },
122
122
  "platform-feature-flags": {
123
+ "platform_editor_toolbar_aifc_ga_blockers": {
124
+ "type": "boolean"
125
+ },
123
126
  "platform_editor_toolbar_responsive_fixes": {
124
127
  "type": "boolean"
125
128
  },