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

package/dist/es2019/ui/toolbar-components/InsertButton.js

@@ -11,6 +11,7 @@ import { ToolbarButton, ToolbarTooltip, AddIcon, useToolbarUI } from '@atlaskit/
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
+import { LINK_BUTTON_KEY } from './hooks/filterDropdownItems';
 import { useEmojiPickerPopup } from './hooks/useEmojiPickerPopup';
 import { useInsertButtonState } from './hooks/useInsertButtonState';
 import { useTableSelectorPopup } from './hooks/useTableSelectorPopup';
@@ -22,6 +23,7 @@ import { EmojiPickerPopup } from './popups/EmojiPickerPopup';
 const FIT_HEIGHT_BUFFER = 100;
 export const InsertButton = ({
   api,
+  breakpoint,
   showElementBrowserLink = false,
   isFullPageAppearance = false,
   tableSelectorSupported,
@@ -30,7 +32,8 @@ export const InsertButton = ({
   expandEnabled,
   insertMenuItems,
   numberOfButtons,
-  onInsertBlockType
+  onInsertBlockType,
+  toolbarConfig
 }) => {
   const {
     editorView
@@ -61,6 +64,7 @@ export const InsertButton = ({
     isTypeAheadAllowed
   } = useInsertButtonState({
     api,
+    breakpoint,
     editorView: editorView || undefined,
     horizontalRuleEnabled,
     insertMenuItems,
@@ -68,7 +72,8 @@ export const InsertButton = ({
     numberOfButtons,
     tableSelectorSupported,
     expandEnabled,
-    showElementBrowserLink
+    showElementBrowserLink,
+    toolbarConfig
   });
   if (!(api !== null && api !== void 0 && api.insertBlock)) {
     return null;
@@ -100,7 +105,7 @@ export const InsertButton = ({
       editorView.focus();
     }
     switch (item.value.name) {
-      case 'link':
+      case LINK_BUTTON_KEY:
         api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 ? void 0 : _api$hyperlink.commands.showLinkToolbar(inputMethod));
         break;
       case 'table':

package/dist/es2019/ui/toolbar-components/hooks/filterDropdownItems.js

@@ -0,0 +1,44 @@
+const ITEM_TO_BUTTON_MAP = {
+  action: 'taskList',
+  media: 'media',
+  'image upload': 'media',
+  mention: 'mention',
+  emoji: 'emoji',
+  table: 'table',
+  layout: 'layout',
+  codeblock: 'codeBlock'
+};
+export const LINK_BUTTON_KEY = 'link';
+const BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl'];
+
+/**
+ * Determines if a toolbar button is visible at the current breakpoint.
+ */
+function isButtonVisibleAtBreakpoint(buttonShowAt, currentBreakpoint) {
+  if (!currentBreakpoint) {
+    return false;
+  }
+  const showAtIndex = BREAKPOINT_ORDER.indexOf(buttonShowAt);
+  const currentIndex = BREAKPOINT_ORDER.indexOf(currentBreakpoint);
+  return currentIndex >= showAtIndex;
+}
+export function filterDropdownItemsByBreakpoint(items, currentBreakpoint, toolbarConfig) {
+  return items.filter(item => {
+    const itemName = item.value.name;
+    // filter out link button because it's always visible on the toolbar
+    if (itemName === LINK_BUTTON_KEY) {
+      return false;
+    }
+    const buttonKey = ITEM_TO_BUTTON_MAP[itemName];
+    if (!buttonKey) {
+      return true;
+    }
+    const buttonConfig = toolbarConfig[buttonKey];
+    if (!(buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.enabled)) {
+      return true;
+    }
+    const showAt = buttonConfig.showAt || 'lg';
+    const isVisible = isButtonVisibleAtBreakpoint(showAt, currentBreakpoint);
+    return !isVisible;
+  });
+}

package/dist/es2019/ui/toolbar-components/hooks/useInsertButtonState.js

@@ -1,8 +1,11 @@
+import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { createItems } from '../../ToolbarInsertBlock/create-items';
+import { filterDropdownItemsByBreakpoint } from './filterDropdownItems';
 export const useInsertButtonState = ({
   api,
+  breakpoint,
   editorView,
   horizontalRuleEnabled,
   insertMenuItems,
@@ -10,7 +13,8 @@ export const useInsertButtonState = ({
   numberOfButtons,
   tableSelectorSupported,
   expandEnabled,
-  showElementBrowserLink
+  showElementBrowserLink,
+  toolbarConfig
 }) => {
   const {
     formatMessage
@@ -40,7 +44,7 @@ export const useInsertButtonState = ({
   const actionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.taskItem);
   const decisionSupported = !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.decisionItem);
   const layoutSectionEnabled = !!(api !== null && api !== void 0 && api.layout);
-  const [, dropdownItems] = editorView !== null && editorView !== void 0 && editorView.state.schema ? createItems({
+  const [, allDropdownItems] = editorView !== null && editorView !== void 0 && editorView.state.schema ? createItems({
     isTypeAheadAllowed: isTypeAheadAllowed,
     tableSupported: !!(editorView !== null && editorView !== void 0 && editorView.state.schema.nodes.table),
     tableSelectorSupported,
@@ -73,6 +77,12 @@ export const useInsertButtonState = ({
     numberOfButtons: numberOfButtons || 0,
     formatMessage
   }) : [, []];
+  const dropdownItems = useMemo(() => {
+    if (!breakpoint || !toolbarConfig) {
+      return allDropdownItems;
+    }
+    return filterDropdownItemsByBreakpoint(allDropdownItems, breakpoint, toolbarConfig);
+  }, [allDropdownItems, breakpoint, toolbarConfig]);
   return {
     dropdownItems,
     emojiProvider,

package/dist/es2019/ui/toolbar-components.js

@@ -240,25 +240,11 @@ export const getToolbarComponents = ({
 
   // Insert Group
   if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
-    components.push({
-      type: INSERT_GROUP.type,
-      key: INSERT_GROUP.key,
-      parents: [{
-        type: INSERT_BLOCK_SECTION.type,
-        key: INSERT_BLOCK_SECTION.key,
-        rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
-      }]
-    });
-    components.push({
-      type: INSERT_BUTTON.type,
-      key: INSERT_BUTTON.key,
-      parents: [{
-        type: INSERT_GROUP.type,
-        key: INSERT_GROUP.key,
-        rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
-      }],
-      component: () => /*#__PURE__*/React.createElement(InsertButton, {
+    const createInsertButtonComponent = breakpoint => {
+      return () => /*#__PURE__*/React.createElement(InsertButton, {
         api: api,
+        breakpoint: breakpoint,
+        toolbarConfig: config,
         showElementBrowserLink: options.showElementBrowserLink,
         tableSelectorSupported: options.tableSelectorSupported,
         onInsertBlockType: onInsertBlockType,
@@ -266,9 +252,162 @@ export const getToolbarComponents = ({
         horizontalRuleEnabled: options.horizontalRuleEnabled,
         expandEnabled: options.allowExpand,
         insertMenuItems: options.insertMenuItems,
-        numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
-      })
-    });
+        numberOfButtons: 0
+      });
+    };
+    if (fg('platform_editor_toolbar_aifc_ga_blockers')) {
+      components.push({
+        type: INSERT_GROUP.type,
+        key: `${INSERT_GROUP.key}-none`,
+        parents: [{
+          type: INSERT_BLOCK_SECTION.type,
+          key: INSERT_BLOCK_SECTION.key,
+          rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+        }],
+        component: ({
+          children
+        }) => /*#__PURE__*/React.createElement(Show, {
+          below: "sm"
+        }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
+      });
+      components.push({
+        type: INSERT_BUTTON.type,
+        key: INSERT_BUTTON.key,
+        parents: [{
+          type: INSERT_GROUP.type,
+          key: `${INSERT_GROUP.key}-none`,
+          rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent(null)
+      });
+      components.push({
+        type: INSERT_GROUP.type,
+        key: `${INSERT_GROUP.key}-sm`,
+        parents: [{
+          type: INSERT_BLOCK_SECTION.type,
+          key: INSERT_BLOCK_SECTION.key,
+          rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+        }],
+        component: ({
+          children
+        }) => /*#__PURE__*/React.createElement(Show, {
+          only: "sm"
+        }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
+      });
+      components.push({
+        type: INSERT_BUTTON.type,
+        key: INSERT_BUTTON.key,
+        parents: [{
+          type: INSERT_GROUP.type,
+          key: `${INSERT_GROUP.key}-sm`,
+          rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent('sm')
+      });
+      components.push({
+        type: INSERT_GROUP.type,
+        key: `${INSERT_GROUP.key}-md`,
+        parents: [{
+          type: INSERT_BLOCK_SECTION.type,
+          key: INSERT_BLOCK_SECTION.key,
+          rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+        }],
+        component: ({
+          children
+        }) => /*#__PURE__*/React.createElement(Show, {
+          only: "md"
+        }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
+      });
+      components.push({
+        type: INSERT_BUTTON.type,
+        key: INSERT_BUTTON.key,
+        parents: [{
+          type: INSERT_GROUP.type,
+          key: `${INSERT_GROUP.key}-md`,
+          rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent('md')
+      });
+      components.push({
+        type: INSERT_GROUP.type,
+        key: `${INSERT_GROUP.key}-lg`,
+        parents: [{
+          type: INSERT_BLOCK_SECTION.type,
+          key: INSERT_BLOCK_SECTION.key,
+          rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+        }],
+        component: ({
+          children
+        }) => /*#__PURE__*/React.createElement(Show, {
+          only: "lg"
+        }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
+      });
+      components.push({
+        type: INSERT_BUTTON.type,
+        key: INSERT_BUTTON.key,
+        parents: [{
+          type: INSERT_GROUP.type,
+          key: `${INSERT_GROUP.key}-lg`,
+          rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent('lg')
+      });
+      components.push({
+        type: INSERT_GROUP.type,
+        key: `${INSERT_GROUP.key}-xl`,
+        parents: [{
+          type: INSERT_BLOCK_SECTION.type,
+          key: INSERT_BLOCK_SECTION.key,
+          rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+        }],
+        component: ({
+          children
+        }) => /*#__PURE__*/React.createElement(Show, {
+          only: "xl"
+        }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children))
+      });
+      components.push({
+        type: INSERT_BUTTON.type,
+        key: INSERT_BUTTON.key,
+        parents: [{
+          type: INSERT_GROUP.type,
+          key: `${INSERT_GROUP.key}-xl`,
+          rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent('xl')
+      });
+    } else {
+      components.push({
+        type: INSERT_GROUP.type,
+        key: INSERT_GROUP.key,
+        parents: [{
+          type: INSERT_BLOCK_SECTION.type,
+          key: INSERT_BLOCK_SECTION.key,
+          rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
+        }]
+      });
+      components.push({
+        type: INSERT_BUTTON.type,
+        key: INSERT_BUTTON.key,
+        parents: [{
+          type: INSERT_GROUP.type,
+          key: INSERT_GROUP.key,
+          rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
+        }],
+        component: () => /*#__PURE__*/React.createElement(InsertButton, {
+          api: api,
+          toolbarConfig: config,
+          showElementBrowserLink: options.showElementBrowserLink,
+          tableSelectorSupported: options.tableSelectorSupported,
+          onInsertBlockType: onInsertBlockType,
+          nativeStatusSupported: options.nativeStatusSupported,
+          horizontalRuleEnabled: options.horizontalRuleEnabled,
+          expandEnabled: options.allowExpand,
+          insertMenuItems: options.insertMenuItems,
+          numberOfButtons: 7 // TODO: ED-28759 - Default to 7 buttons - Remove this once we have a proper way to do toolbar responsiveness
+        })
+      });
+    }
   }
   return components;
 };

package/dist/esm/ui/ToolbarInsertBlock/dropdown-button.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import AddIcon from '@atlaskit/icon/core/migration/add--editor-add';
+import AddIcon from '@atlaskit/icon/core/add';
 import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { triggerWrapper } from './styles';
 var DropDownButtonIcon = /*#__PURE__*/React.memo(function (props) {

package/dist/esm/ui/ToolbarInsertBlock/index.js

@@ -38,6 +38,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N20A, N30A } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { LINK_BUTTON_KEY } from '../toolbar-components/hooks/filterDropdownItems';
 import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 // Ignored via go/ees005
@@ -222,7 +223,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
     _defineProperty(_this, "toggleTableSelector", function () {
-      var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.TOOLBAR;
+      var _inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.TOOLBAR;
       _this.setState(function (prevState) {
         return {
           isTableSelectorOpen: !prevState.isTableSelectorOpen
@@ -445,7 +446,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         editorView.focus();
       }
       switch (item.value.name) {
-        case 'link':
+        case LINK_BUTTON_KEY:
           _this.toggleLinkPanel(inputMethod);
           break;
         case 'table':

package/dist/esm/ui/ToolbarInsertBlock/item.js

@@ -11,21 +11,21 @@ import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/ed
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import FieldTextIcon from '@atlaskit/icon-lab/core/field-text';
 import LozengeIcon from '@atlaskit/icon-lab/core/lozenge';
-import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
-import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
+import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
+import CalendarIcon from '@atlaskit/icon/core/calendar';
+import ExpandNodeIcon from '@atlaskit/icon/core/chevron-right';
+import DecisionIcon from '@atlaskit/icon/core/decision';
+import EmojiIcon from '@atlaskit/icon/core/emoji';
+import GridIcon from '@atlaskit/icon/core/grid';
+import ImageIcon from '@atlaskit/icon/core/image';
+import LayoutTwoColumnsIcon from '@atlaskit/icon/core/layout-two-columns';
+import LinkIcon from '@atlaskit/icon/core/link';
+import MentionIcon from '@atlaskit/icon/core/mention';
 import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
-import ExpandNodeIcon from '@atlaskit/icon/core/migration/chevron-right--chevron-right-circle';
-import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
-import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
-import GridIcon from '@atlaskit/icon/core/migration/grid--editor-table';
-import ImageIcon from '@atlaskit/icon/core/migration/image--editor-image';
-import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
-import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
-import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
-import HorizontalRuleIcon from '@atlaskit/icon/core/migration/minus--editor-horizontal-rule';
-import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
-import InformationIcon from '@atlaskit/icon/core/migration/status-information--editor-info';
+import HorizontalRuleIcon from '@atlaskit/icon/core/minus';
+import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import InformationIcon from '@atlaskit/icon/core/status-information';
 import TaskIcon from '@atlaskit/icon/core/task';
 import CheckboxCheckedIconLegacy from '@atlaskit/icon/glyph/editor/task';
 import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';

package/dist/esm/ui/toolbar-components/InsertButton.js

@@ -12,6 +12,7 @@ import { ToolbarButton, ToolbarTooltip, AddIcon, useToolbarUI } from '@atlaskit/
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
+import { LINK_BUTTON_KEY } from './hooks/filterDropdownItems';
 import { useEmojiPickerPopup } from './hooks/useEmojiPickerPopup';
 import { useInsertButtonState } from './hooks/useInsertButtonState';
 import { useTableSelectorPopup } from './hooks/useTableSelectorPopup';
@@ -23,6 +24,7 @@ import { EmojiPickerPopup } from './popups/EmojiPickerPopup';
 var FIT_HEIGHT_BUFFER = 100;
 export var InsertButton = function InsertButton(_ref) {
   var api = _ref.api,
+    breakpoint = _ref.breakpoint,
     _ref$showElementBrows = _ref.showElementBrowserLink,
     showElementBrowserLink = _ref$showElementBrows === void 0 ? false : _ref$showElementBrows,
     _ref$isFullPageAppear = _ref.isFullPageAppearance,
@@ -33,7 +35,8 @@ export var InsertButton = function InsertButton(_ref) {
     expandEnabled = _ref.expandEnabled,
     insertMenuItems = _ref.insertMenuItems,
     numberOfButtons = _ref.numberOfButtons,
-    onInsertBlockType = _ref.onInsertBlockType;
+    onInsertBlockType = _ref.onInsertBlockType,
+    toolbarConfig = _ref.toolbarConfig;
   var _useEditorToolbar = useEditorToolbar(),
     editorView = _useEditorToolbar.editorView;
   var _useToolbarUI = useToolbarUI(),
@@ -59,6 +62,7 @@ export var InsertButton = function InsertButton(_ref) {
   var showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
   var _useInsertButtonState = useInsertButtonState({
       api: api,
+      breakpoint: breakpoint,
       editorView: editorView || undefined,
       horizontalRuleEnabled: horizontalRuleEnabled,
       insertMenuItems: insertMenuItems,
@@ -66,7 +70,8 @@ export var InsertButton = function InsertButton(_ref) {
       numberOfButtons: numberOfButtons,
       tableSelectorSupported: tableSelectorSupported,
       expandEnabled: expandEnabled,
-      showElementBrowserLink: showElementBrowserLink
+      showElementBrowserLink: showElementBrowserLink,
+      toolbarConfig: toolbarConfig
     }),
     dropdownItems = _useInsertButtonState.dropdownItems,
     emojiProvider = _useInsertButtonState.emojiProvider,
@@ -100,7 +105,7 @@ export var InsertButton = function InsertButton(_ref) {
       editorView.focus();
     }
     switch (item.value.name) {
-      case 'link':
+      case LINK_BUTTON_KEY:
         api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 ? void 0 : _api$hyperlink.commands.showLinkToolbar(inputMethod));
         break;
       case 'table':

package/dist/esm/ui/toolbar-components/hooks/filterDropdownItems.js

@@ -0,0 +1,44 @@
+var ITEM_TO_BUTTON_MAP = {
+  action: 'taskList',
+  media: 'media',
+  'image upload': 'media',
+  mention: 'mention',
+  emoji: 'emoji',
+  table: 'table',
+  layout: 'layout',
+  codeblock: 'codeBlock'
+};
+export var LINK_BUTTON_KEY = 'link';
+var BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl'];
+
+/**
+ * Determines if a toolbar button is visible at the current breakpoint.
+ */
+function isButtonVisibleAtBreakpoint(buttonShowAt, currentBreakpoint) {
+  if (!currentBreakpoint) {
+    return false;
+  }
+  var showAtIndex = BREAKPOINT_ORDER.indexOf(buttonShowAt);
+  var currentIndex = BREAKPOINT_ORDER.indexOf(currentBreakpoint);
+  return currentIndex >= showAtIndex;
+}
+export function filterDropdownItemsByBreakpoint(items, currentBreakpoint, toolbarConfig) {
+  return items.filter(function (item) {
+    var itemName = item.value.name;
+    // filter out link button because it's always visible on the toolbar
+    if (itemName === LINK_BUTTON_KEY) {
+      return false;
+    }
+    var buttonKey = ITEM_TO_BUTTON_MAP[itemName];
+    if (!buttonKey) {
+      return true;
+    }
+    var buttonConfig = toolbarConfig[buttonKey];
+    if (!(buttonConfig !== null && buttonConfig !== void 0 && buttonConfig.enabled)) {
+      return true;
+    }
+    var showAt = buttonConfig.showAt || 'lg';
+    var isVisible = isButtonVisibleAtBreakpoint(showAt, currentBreakpoint);
+    return !isVisible;
+  });
+}

package/dist/esm/ui/toolbar-components/hooks/useInsertButtonState.js

@@ -1,9 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { createItems } from '../../ToolbarInsertBlock/create-items';
+import { filterDropdownItemsByBreakpoint } from './filterDropdownItems';
 export var useInsertButtonState = function useInsertButtonState(_ref) {
   var api = _ref.api,
+    breakpoint = _ref.breakpoint,
     editorView = _ref.editorView,
     horizontalRuleEnabled = _ref.horizontalRuleEnabled,
     insertMenuItems = _ref.insertMenuItems,
@@ -11,7 +14,8 @@ export var useInsertButtonState = function useInsertButtonState(_ref) {
     numberOfButtons = _ref.numberOfButtons,
     tableSelectorSupported = _ref.tableSelectorSupported,
     expandEnabled = _ref.expandEnabled,
-    showElementBrowserLink = _ref.showElementBrowserLink;
+    showElementBrowserLink = _ref.showElementBrowserLink,
+    toolbarConfig = _ref.toolbarConfig;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var isTypeAheadAllowed = useSharedPluginStateSelector(api, 'typeAhead.isAllowed');
@@ -73,7 +77,13 @@ export var useInsertButtonState = function useInsertButtonState(_ref) {
       formatMessage: formatMessage
     }) : [, []],
     _ref3 = _slicedToArray(_ref2, 2),
-    dropdownItems = _ref3[1];
+    allDropdownItems = _ref3[1];
+  var dropdownItems = useMemo(function () {
+    if (!breakpoint || !toolbarConfig) {
+      return allDropdownItems;
+    }
+    return filterDropdownItemsByBreakpoint(allDropdownItems, breakpoint, toolbarConfig);
+  }, [allDropdownItems, breakpoint, toolbarConfig]);
   return {
     dropdownItems: dropdownItems,
     emojiProvider: emojiProvider,