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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 7.0.29
+
+### Patch Changes
+
+- [`90abe9b926a6f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90abe9b926a6f) -
+  Icon entrypoint migration
+- Updated dependencies
+
+## 7.0.28
+
+### Patch Changes
+
+- [`1018562d37d5d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1018562d37d5d) -
+  Add dynamic dropdown filtering for insert block button based on visible toolbar buttons at
+  different breakpoints
+
 ## 7.0.27
 
 ### Patch Changes

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

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _addEditorAdd = _interopRequireDefault(require("@atlaskit/icon/core/migration/add--editor-add"));
+var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _styles = require("./styles");
 /**
@@ -24,7 +24,7 @@ var DropDownButtonIcon = /*#__PURE__*/_react.default.memo(function (props) {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("span", {
       css: _styles.triggerWrapper
-    }, (0, _react2.jsx)(_addEditorAdd.default, {
+    }, (0, _react2.jsx)(_add.default, {
       label: props.label,
       color: "currentColor",
       spacing: "spacious"

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

@@ -28,6 +28,7 @@ var _picker = require("@atlaskit/emoji/picker");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _filterDropdownItems = require("../toolbar-components/hooks/filterDropdownItems");
 var _blockInsertMenu = require("./block-insert-menu");
 var _createItems3 = require("./create-items");
 var _templateObject;
@@ -228,7 +229,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       }
     });
     (0, _defineProperty2.default)(_this, "toggleTableSelector", function () {
-      var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _analytics.INPUT_METHOD.TOOLBAR;
+      var _inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _analytics.INPUT_METHOD.TOOLBAR;
       _this.setState(function (prevState) {
         return {
           isTableSelectorOpen: !prevState.isTableSelectorOpen
@@ -451,7 +452,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         editorView.focus();
       }
       switch (item.value.name) {
-        case 'link':
+        case _filterDropdownItems.LINK_BUTTON_KEY:
           _this.toggleLinkPanel(inputMethod);
           break;
         case 'table':

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

@@ -12,21 +12,21 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _fieldText = _interopRequireDefault(require("@atlaskit/icon-lab/core/field-text"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/icon-lab/core/lozenge"));
-var _angleBracketsEditorCode = _interopRequireDefault(require("@atlaskit/icon/core/migration/angle-brackets--editor-code"));
-var _calendarEditorDate = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar--editor-date"));
+var _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));
+var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/calendar"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _decision = _interopRequireDefault(require("@atlaskit/icon/core/decision"));
+var _emoji = _interopRequireDefault(require("@atlaskit/icon/core/emoji"));
+var _grid = _interopRequireDefault(require("@atlaskit/icon/core/grid"));
+var _image = _interopRequireDefault(require("@atlaskit/icon/core/image"));
+var _layoutTwoColumns = _interopRequireDefault(require("@atlaskit/icon/core/layout-two-columns"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
+var _mention = _interopRequireDefault(require("@atlaskit/icon/core/mention"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
-var _chevronRightChevronRightCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-right--chevron-right-circle"));
-var _decisionEditorDecision = _interopRequireDefault(require("@atlaskit/icon/core/migration/decision--editor-decision"));
-var _emojiEditorEmoji = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji--editor-emoji"));
-var _gridEditorTable = _interopRequireDefault(require("@atlaskit/icon/core/migration/grid--editor-table"));
-var _imageEditorImage = _interopRequireDefault(require("@atlaskit/icon/core/migration/image--editor-image"));
-var _layoutTwoColumnsEditorLayoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal"));
-var _linkEditorLink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link--editor-link"));
-var _mentionEditorMention = _interopRequireDefault(require("@atlaskit/icon/core/migration/mention--editor-mention"));
-var _minusEditorHorizontalRule = _interopRequireDefault(require("@atlaskit/icon/core/migration/minus--editor-horizontal-rule"));
-var _quotationMarkQuote = _interopRequireDefault(require("@atlaskit/icon/core/migration/quotation-mark--quote"));
-var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
-var _statusInformationEditorInfo = _interopRequireDefault(require("@atlaskit/icon/core/migration/status-information--editor-info"));
+var _minus = _interopRequireDefault(require("@atlaskit/icon/core/minus"));
+var _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotation-mark"));
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
 var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
 var _task2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/task"));
 var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
@@ -91,7 +91,7 @@ var link = exports.link = mem(function (init) {
     disabled: init.disabled,
     name: 'link',
     shortcut: (0, _keymaps.tooltip)(_keymaps.addLink),
-    Icon: _linkEditorLink.default,
+    Icon: _link.default,
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(_keymaps.addLink)
   });
@@ -102,7 +102,7 @@ var media = exports.media = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'media',
-    Icon: _imageEditorImage.default
+    Icon: _image.default
   });
 });
 var imageUpload = exports.imageUpload = mem(function (init) {
@@ -111,7 +111,7 @@ var imageUpload = exports.imageUpload = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'image upload',
-    Icon: _imageEditorImage.default
+    Icon: _image.default
   });
 });
 var mention = exports.mention = mem(function (init) {
@@ -120,7 +120,7 @@ var mention = exports.mention = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'mention',
-    Icon: _mentionEditorMention.default,
+    Icon: _mention.default,
     shortcut: '@',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+2 Space'
@@ -132,7 +132,7 @@ var emoji = exports.emoji = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'emoji',
-    Icon: _emojiEditorEmoji.default,
+    Icon: _emoji.default,
     shortcut: ':',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+;'
@@ -144,7 +144,7 @@ var table = exports.table = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'table',
-    Icon: _gridEditorTable.default,
+    Icon: _grid.default,
     shortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleTable)
   });
@@ -170,7 +170,7 @@ var layout = exports.layout = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'layout',
-    Icon: _layoutTwoColumnsEditorLayoutTwoEqual.default
+    Icon: _layoutTwoColumns.default
   });
 });
 var codeblock = exports.codeblock = mem(function (init) {
@@ -179,7 +179,7 @@ var codeblock = exports.codeblock = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'codeblock',
-    Icon: _angleBracketsEditorCode.default,
+    Icon: _angleBrackets.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(init.shortcut)
   });
@@ -190,7 +190,7 @@ var panel = exports.panel = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'panel',
-    Icon: _statusInformationEditorInfo.default,
+    Icon: _statusInformation.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(init.shortcut)
   });
@@ -201,7 +201,7 @@ var blockquote = exports.blockquote = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'blockquote',
-    Icon: _quotationMarkQuote.default,
+    Icon: _quotationMark.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': 'Shift+. Space'
   });
@@ -212,7 +212,7 @@ var decision = exports.decision = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'decision',
-    Icon: _decisionEditorDecision.default,
+    Icon: _decision.default,
     shortcut: '<>',
     'aria-keyshortcuts': 'Shift+, Shift+. Space'
   });
@@ -223,7 +223,7 @@ var horizontalrule = exports.horizontalrule = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'horizontalrule',
-    Icon: _minusEditorHorizontalRule.default,
+    Icon: _minus.default,
     shortcut: '---',
     'aria-keyshortcuts': '- - -'
   });
@@ -235,7 +235,7 @@ var expand = exports.expand = mem(function (init) {
     disabled: init.disabled,
     name: 'expand',
     Icon: function Icon(iconProps) {
-      return (0, _react2.jsx)(_chevronRightChevronRightCircle.default, {
+      return (0, _react2.jsx)(_chevronRight.default, {
         label: iconProps.label,
         size: "small"
       });
@@ -248,7 +248,7 @@ var date = exports.date = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'date',
-    Icon: _calendarEditorDate.default,
+    Icon: _calendar.default,
     shortcut: '//',
     'aria-keyshortcuts': '/ / Enter'
   });
@@ -300,7 +300,7 @@ var more = exports.more = mem(function (init) {
     disabled: init.disabled,
     name: 'macro',
     Icon: function Icon() {
-      return (0, _react2.jsx)(_showMoreHorizontalEditorMore.default, {
+      return (0, _react2.jsx)(_showMoreHorizontal.default, {
         label: "",
         color: "currentColor"
       });

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

@@ -20,6 +20,7 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _InsertMenu = _interopRequireWildcard(require("../ElementBrowser/InsertMenu"));
+var _filterDropdownItems = require("./hooks/filterDropdownItems");
 var _useEmojiPickerPopup = require("./hooks/useEmojiPickerPopup");
 var _useInsertButtonState2 = require("./hooks/useInsertButtonState");
 var _useTableSelectorPopup = require("./hooks/useTableSelectorPopup");
@@ -31,6 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var FIT_HEIGHT_BUFFER = 100;
 var InsertButton = exports.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,
@@ -41,7 +43,8 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
     expandEnabled = _ref.expandEnabled,
     insertMenuItems = _ref.insertMenuItems,
     numberOfButtons = _ref.numberOfButtons,
-    onInsertBlockType = _ref.onInsertBlockType;
+    onInsertBlockType = _ref.onInsertBlockType,
+    toolbarConfig = _ref.toolbarConfig;
   var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
     editorView = _useEditorToolbar.editorView;
   var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
@@ -67,6 +70,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
   var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
   var _useInsertButtonState = (0, _useInsertButtonState2.useInsertButtonState)({
       api: api,
+      breakpoint: breakpoint,
       editorView: editorView || undefined,
       horizontalRuleEnabled: horizontalRuleEnabled,
       insertMenuItems: insertMenuItems,
@@ -74,7 +78,8 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
       numberOfButtons: numberOfButtons,
       tableSelectorSupported: tableSelectorSupported,
       expandEnabled: expandEnabled,
-      showElementBrowserLink: showElementBrowserLink
+      showElementBrowserLink: showElementBrowserLink,
+      toolbarConfig: toolbarConfig
     }),
     dropdownItems = _useInsertButtonState.dropdownItems,
     emojiProvider = _useInsertButtonState.emojiProvider,
@@ -108,7 +113,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
       editorView.focus();
     }
     switch (item.value.name) {
-      case 'link':
+      case _filterDropdownItems.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/cjs/ui/toolbar-components/hooks/filterDropdownItems.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LINK_BUTTON_KEY = void 0;
+exports.filterDropdownItemsByBreakpoint = filterDropdownItemsByBreakpoint;
+var ITEM_TO_BUTTON_MAP = {
+  action: 'taskList',
+  media: 'media',
+  'image upload': 'media',
+  mention: 'mention',
+  emoji: 'emoji',
+  table: 'table',
+  layout: 'layout',
+  codeblock: 'codeBlock'
+};
+var LINK_BUTTON_KEY = exports.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;
+}
+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/cjs/ui/toolbar-components/hooks/useInsertButtonState.js

@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useInsertButtonState = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 var _reactIntlNext = require("react-intl-next");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _createItems = require("../../ToolbarInsertBlock/create-items");
+var _filterDropdownItems = require("./filterDropdownItems");
 var useInsertButtonState = exports.useInsertButtonState = function useInsertButtonState(_ref) {
   var api = _ref.api,
+    breakpoint = _ref.breakpoint,
     editorView = _ref.editorView,
     horizontalRuleEnabled = _ref.horizontalRuleEnabled,
     insertMenuItems = _ref.insertMenuItems,
@@ -18,7 +21,8 @@ var useInsertButtonState = exports.useInsertButtonState = function useInsertButt
     numberOfButtons = _ref.numberOfButtons,
     tableSelectorSupported = _ref.tableSelectorSupported,
     expandEnabled = _ref.expandEnabled,
-    showElementBrowserLink = _ref.showElementBrowserLink;
+    showElementBrowserLink = _ref.showElementBrowserLink,
+    toolbarConfig = _ref.toolbarConfig;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isTypeAheadAllowed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isAllowed');
@@ -80,7 +84,13 @@ var useInsertButtonState = exports.useInsertButtonState = function useInsertButt
       formatMessage: formatMessage
     }) : [, []],
     _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-    dropdownItems = _ref3[1];
+    allDropdownItems = _ref3[1];
+  var dropdownItems = (0, _react.useMemo)(function () {
+    if (!breakpoint || !toolbarConfig) {
+      return allDropdownItems;
+    }
+    return (0, _filterDropdownItems.filterDropdownItemsByBreakpoint)(allDropdownItems, breakpoint, toolbarConfig);
+  }, [allDropdownItems, breakpoint, toolbarConfig]);
   return {
     dropdownItems: dropdownItems,
     emojiProvider: emojiProvider,

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

@@ -263,26 +263,12 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
 
   // Insert Group
   if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
-    components.push({
-      type: _toolbar.INSERT_GROUP.type,
-      key: _toolbar.INSERT_GROUP.key,
-      parents: [{
-        type: _toolbar.INSERT_BLOCK_SECTION.type,
-        key: _toolbar.INSERT_BLOCK_SECTION.key,
-        rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
-      }]
-    });
-    components.push({
-      type: _toolbar.INSERT_BUTTON.type,
-      key: _toolbar.INSERT_BUTTON.key,
-      parents: [{
-        type: _toolbar.INSERT_GROUP.type,
-        key: _toolbar.INSERT_GROUP.key,
-        rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
-      }],
-      component: function component() {
+    var createInsertButtonComponent = function createInsertButtonComponent(breakpoint) {
+      return function () {
         return /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
           api: api,
+          breakpoint: breakpoint,
+          toolbarConfig: config,
           showElementBrowserLink: options.showElementBrowserLink,
           tableSelectorSupported: options.tableSelectorSupported,
           onInsertBlockType: onInsertBlockType,
@@ -290,10 +276,170 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
           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 ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_ga_blockers')) {
+      components.push({
+        type: _toolbar.INSERT_GROUP.type,
+        key: "".concat(_toolbar.INSERT_GROUP.key, "-none"),
+        parents: [{
+          type: _toolbar.INSERT_BLOCK_SECTION.type,
+          key: _toolbar.INSERT_BLOCK_SECTION.key,
+          rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+        }],
+        component: function component(_ref3) {
+          var children = _ref3.children;
+          return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+            below: "sm"
+          }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+        }
+      });
+      components.push({
+        type: _toolbar.INSERT_BUTTON.type,
+        key: _toolbar.INSERT_BUTTON.key,
+        parents: [{
+          type: _toolbar.INSERT_GROUP.type,
+          key: "".concat(_toolbar.INSERT_GROUP.key, "-none"),
+          rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent(null)
+      });
+      components.push({
+        type: _toolbar.INSERT_GROUP.type,
+        key: "".concat(_toolbar.INSERT_GROUP.key, "-sm"),
+        parents: [{
+          type: _toolbar.INSERT_BLOCK_SECTION.type,
+          key: _toolbar.INSERT_BLOCK_SECTION.key,
+          rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+        }],
+        component: function component(_ref4) {
+          var children = _ref4.children;
+          return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+            only: "sm"
+          }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+        }
+      });
+      components.push({
+        type: _toolbar.INSERT_BUTTON.type,
+        key: _toolbar.INSERT_BUTTON.key,
+        parents: [{
+          type: _toolbar.INSERT_GROUP.type,
+          key: "".concat(_toolbar.INSERT_GROUP.key, "-sm"),
+          rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent('sm')
+      });
+      components.push({
+        type: _toolbar.INSERT_GROUP.type,
+        key: "".concat(_toolbar.INSERT_GROUP.key, "-md"),
+        parents: [{
+          type: _toolbar.INSERT_BLOCK_SECTION.type,
+          key: _toolbar.INSERT_BLOCK_SECTION.key,
+          rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+        }],
+        component: function component(_ref5) {
+          var children = _ref5.children;
+          return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+            only: "md"
+          }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+        }
+      });
+      components.push({
+        type: _toolbar.INSERT_BUTTON.type,
+        key: _toolbar.INSERT_BUTTON.key,
+        parents: [{
+          type: _toolbar.INSERT_GROUP.type,
+          key: "".concat(_toolbar.INSERT_GROUP.key, "-md"),
+          rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent('md')
+      });
+      components.push({
+        type: _toolbar.INSERT_GROUP.type,
+        key: "".concat(_toolbar.INSERT_GROUP.key, "-lg"),
+        parents: [{
+          type: _toolbar.INSERT_BLOCK_SECTION.type,
+          key: _toolbar.INSERT_BLOCK_SECTION.key,
+          rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+        }],
+        component: function component(_ref6) {
+          var children = _ref6.children;
+          return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+            only: "lg"
+          }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+        }
+      });
+      components.push({
+        type: _toolbar.INSERT_BUTTON.type,
+        key: _toolbar.INSERT_BUTTON.key,
+        parents: [{
+          type: _toolbar.INSERT_GROUP.type,
+          key: "".concat(_toolbar.INSERT_GROUP.key, "-lg"),
+          rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent('lg')
+      });
+      components.push({
+        type: _toolbar.INSERT_GROUP.type,
+        key: "".concat(_toolbar.INSERT_GROUP.key, "-xl"),
+        parents: [{
+          type: _toolbar.INSERT_BLOCK_SECTION.type,
+          key: _toolbar.INSERT_BLOCK_SECTION.key,
+          rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+        }],
+        component: function component(_ref7) {
+          var children = _ref7.children;
+          return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+            only: "xl"
+          }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+        }
+      });
+      components.push({
+        type: _toolbar.INSERT_BUTTON.type,
+        key: _toolbar.INSERT_BUTTON.key,
+        parents: [{
+          type: _toolbar.INSERT_GROUP.type,
+          key: "".concat(_toolbar.INSERT_GROUP.key, "-xl"),
+          rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+        }],
+        component: createInsertButtonComponent('xl')
+      });
+    } else {
+      components.push({
+        type: _toolbar.INSERT_GROUP.type,
+        key: _toolbar.INSERT_GROUP.key,
+        parents: [{
+          type: _toolbar.INSERT_BLOCK_SECTION.type,
+          key: _toolbar.INSERT_BLOCK_SECTION.key,
+          rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
+        }]
+      });
+      components.push({
+        type: _toolbar.INSERT_BUTTON.type,
+        key: _toolbar.INSERT_BUTTON.key,
+        parents: [{
+          type: _toolbar.INSERT_GROUP.type,
+          key: _toolbar.INSERT_GROUP.key,
+          rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
+        }],
+        component: function component() {
+          return /*#__PURE__*/_react.default.createElement(_InsertButton.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/es2019/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';
 const DropDownButtonIcon = /*#__PURE__*/React.memo(props =>

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

@@ -23,6 +23,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
@@ -235,7 +236,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         this.dropdownButtonRef = new WeakRef(ref);
       }
     });
-    _defineProperty(this, "toggleTableSelector", (inputMethod = INPUT_METHOD.TOOLBAR) => {
+    _defineProperty(this, "toggleTableSelector", (_inputMethod = INPUT_METHOD.TOOLBAR) => {
       this.setState(prevState => ({
         isTableSelectorOpen: !prevState.isTableSelectorOpen
       }));
@@ -481,7 +482,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         editorView.focus();
       }
       switch (item.value.name) {
-        case 'link':
+        case LINK_BUTTON_KEY:
           this.toggleLinkPanel(inputMethod);
           break;
         case 'table':

package/dist/es2019/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';