@atlaskit/editor-plugin-block-type 6.2.14 → 6.2.16

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-type
 
+## 6.2.16
+
+### Patch Changes
+
+- [`51f3f2db61f6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/51f3f2db61f6e) -
+  Update toolbar config across plugins
+- [`13f464399d1cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13f464399d1cc) -
+  PR to cleanup platform_editor_usesharedpluginstatewithselector for block-type
+- Updated dependencies
+
+## 6.2.15
+
+### Patch Changes
+
+- [`1ab3eb4c56ebb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1ab3eb4c56ebb) -
+  [ux] ED-28581: Registered components for block type and list plugins
+- Updated dependencies
+
 ## 6.2.14
 
 ### Patch Changes

package/dist/cjs/blockTypePlugin.js

@@ -16,6 +16,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _types = require("@atlaskit/editor-common/types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockType = require("./pm-plugins/commands/block-type");
 var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
@@ -23,7 +24,8 @@ var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = require("./pm-plugins/main");
 var _FloatingToolbarComponent = require("./pm-plugins/ui/FloatingToolbarComponent");
 var _PrimaryToolbarComponent = require("./pm-plugins/ui/PrimaryToolbarComponent");
-var _ToolbarComponents = require("./pm-plugins/ui/ToolbarComponents");
+var _toolbarComponents = require("./pm-plugins/ui/toolbar-components");
+var _ui = require("./ui");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
@@ -128,7 +130,7 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
   };
   if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
     var _api$toolbar;
-    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _ToolbarComponents.getToolbarComponents)(api));
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
   } else {
     var _api$primaryToolbar;
     api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
@@ -136,6 +138,10 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
       component: primaryToolbarComponent
     });
   }
+  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents((0, _ui.getBlockTypeComponents)());
+  }
   return {
     name: 'blockType',
     nodes: function nodes() {

package/dist/cjs/pm-plugins/ui/FloatingToolbarComponent.js

@@ -18,7 +18,8 @@ var FloatingToolbarSettings = {
   isToolbarReducedSpacing: true,
   shouldUseDefaultRole: false
 };
-var useFloatingToolbarComponentPluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+function FloatingToolbarComponent(_ref) {
+  var api = _ref.api;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockType'], function (states) {
       var _states$blockTypeStat, _states$blockTypeStat2, _states$blockTypeStat3, _states$blockTypeStat4, _states$blockTypeStat5;
       return {
@@ -34,32 +35,6 @@ var useFloatingToolbarComponentPluginState = (0, _hooks.sharedPluginStateHookMig
     availableBlockTypes = _useSharedPluginState.availableBlockTypes,
     availableBlockTypesInDropdown = _useSharedPluginState.availableBlockTypesInDropdown,
     formattingIsPresent = _useSharedPluginState.formattingIsPresent;
-  return {
-    currentBlockType: currentBlockType,
-    blockTypesDisabled: blockTypesDisabled,
-    availableBlockTypes: availableBlockTypes,
-    availableBlockTypesInDropdown: availableBlockTypesInDropdown,
-    formattingIsPresent: formattingIsPresent
-  };
-}, function (api) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['blockType']),
-    blockTypeState = _useSharedPluginState2.blockTypeState;
-  return {
-    currentBlockType: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType,
-    blockTypesDisabled: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled,
-    availableBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes,
-    availableBlockTypesInDropdown: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown,
-    formattingIsPresent: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent
-  };
-});
-function FloatingToolbarComponent(_ref) {
-  var api = _ref.api;
-  var _useFloatingToolbarCo = useFloatingToolbarComponentPluginState(api),
-    currentBlockType = _useFloatingToolbarCo.currentBlockType,
-    blockTypesDisabled = _useFloatingToolbarCo.blockTypesDisabled,
-    availableBlockTypes = _useFloatingToolbarCo.availableBlockTypes,
-    availableBlockTypesInDropdown = _useFloatingToolbarCo.availableBlockTypesInDropdown,
-    formattingIsPresent = _useFloatingToolbarCo.formattingIsPresent;
   var boundSetBlockType = (0, _react.useCallback)(function (name, fromBlockQuote) {
     var _api$core, _api$blockType;
     return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, _analytics.INPUT_METHOD.FLOATING_TB, fromBlockQuote));

package/dist/cjs/pm-plugins/ui/PrimaryToolbarComponent.js

@@ -9,7 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ToolbarBlockType = _interopRequireDefault(require("./ToolbarBlockType"));
-var usePrimaryToolbarComponentPluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+function PrimaryToolbarComponent(_ref) {
+  var api = _ref.api,
+    isSmall = _ref.isSmall,
+    disabled = _ref.disabled,
+    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    shouldUseDefaultRole = _ref.shouldUseDefaultRole;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockType'], function (states) {
       var _states$blockTypeStat, _states$blockTypeStat2, _states$blockTypeStat3, _states$blockTypeStat4, _states$blockTypeStat5;
       return {
@@ -25,39 +33,6 @@ var usePrimaryToolbarComponentPluginState = (0, _hooks.sharedPluginStateHookMigr
     availableBlockTypes = _useSharedPluginState.availableBlockTypes,
     availableBlockTypesInDropdown = _useSharedPluginState.availableBlockTypesInDropdown,
     formattingIsPresent = _useSharedPluginState.formattingIsPresent;
-  return {
-    currentBlockType: currentBlockType,
-    blockTypesDisabled: blockTypesDisabled,
-    availableBlockTypes: availableBlockTypes,
-    availableBlockTypesInDropdown: availableBlockTypesInDropdown,
-    formattingIsPresent: formattingIsPresent
-  };
-}, function (api) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['blockType']),
-    blockTypeState = _useSharedPluginState2.blockTypeState;
-  return {
-    currentBlockType: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType,
-    blockTypesDisabled: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled,
-    availableBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes,
-    availableBlockTypesInDropdown: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown,
-    formattingIsPresent: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent
-  };
-});
-function PrimaryToolbarComponent(_ref) {
-  var api = _ref.api,
-    isSmall = _ref.isSmall,
-    disabled = _ref.disabled,
-    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
-    popupsMountPoint = _ref.popupsMountPoint,
-    popupsBoundariesElement = _ref.popupsBoundariesElement,
-    popupsScrollableElement = _ref.popupsScrollableElement,
-    shouldUseDefaultRole = _ref.shouldUseDefaultRole;
-  var _usePrimaryToolbarCom = usePrimaryToolbarComponentPluginState(api),
-    currentBlockType = _usePrimaryToolbarCom.currentBlockType,
-    blockTypesDisabled = _usePrimaryToolbarCom.blockTypesDisabled,
-    availableBlockTypes = _usePrimaryToolbarCom.availableBlockTypes,
-    availableBlockTypesInDropdown = _usePrimaryToolbarCom.availableBlockTypesInDropdown,
-    formattingIsPresent = _usePrimaryToolbarCom.formattingIsPresent;
   var boundSetBlockType = function boundSetBlockType(name, fromBlockQuote) {
     var _api$core, _api$blockType;
     return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, _analytics.INPUT_METHOD.TOOLBAR, fromBlockQuote));

package/dist/cjs/pm-plugins/ui/{ToolbarComponents.js → toolbar-components.js}

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _blockTypes = require("../block-types");
 var _HeadingButton = require("./ToolbarBlockType/HeadingButton");
 var _QuoteButton = require("./ToolbarBlockType/QuoteButton");
@@ -41,7 +43,11 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       type: _toolbar.TEXT_STYLES_MENU.type,
       key: _toolbar.TEXT_STYLES_MENU.key,
       rank: _toolbar.TEXT_STYLES_MENU_RANK[_toolbar.TEXT_STYLES_MENU_SECTION.key]
-    }]
+    }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+      type: _toolbar.TEXT_COLLAPSED_MENU.type,
+      key: _toolbar.TEXT_COLLAPSED_MENU.key,
+      rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.TEXT_STYLES_MENU_SECTION.key]
+    }] : []))
   }];
   Object.values((0, _blockTypes.toolbarBlockTypesWithRank)()).forEach(function (blockType) {
     if (blockType.toolbarKey) {

package/dist/cjs/ui/HeadingMenuItem.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadingMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _textHeadingFive = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-five"));
+var _textHeadingFour = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-four"));
+var _textHeadingOne = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-one"));
+var _textHeadingSix = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-six"));
+var _textHeadingThree = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-three"));
+var _textHeadingTwo = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-two"));
+var headingIcons = [_textHeadingOne.default, _textHeadingTwo.default, _textHeadingThree.default, _textHeadingFour.default, _textHeadingFive.default, _textHeadingSix.default];
+var headingMessages = [_messages.blockTypeMessages.heading1, _messages.blockTypeMessages.heading2, _messages.blockTypeMessages.heading3, _messages.blockTypeMessages.heading4, _messages.blockTypeMessages.heading5, _messages.blockTypeMessages.heading6];
+var HeadingMenuItem = exports.HeadingMenuItem = function HeadingMenuItem(_ref) {
+  var level = _ref.level;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var Icon = headingIcons[level - 1];
+  var message = headingMessages[level - 1];
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: formatMessage(message)
+    })
+  }, formatMessage(message));
+};

package/dist/cjs/ui/ParagraphMenuItem.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParagraphMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _textParagraph = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-paragraph"));
+var ParagraphMenuItem = exports.ParagraphMenuItem = function ParagraphMenuItem() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_textParagraph.default, {
+      label: formatMessage(_messages.blockMenuMessages.paragraph)
+    })
+  }, formatMessage(_messages.blockMenuMessages.paragraph));
+};

package/dist/cjs/ui/QuoteMenuItem.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuoteMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotation-mark"));
+var QuoteMenuItem = exports.QuoteMenuItem = function QuoteMenuItem() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_quotationMark.default, {
+      label: formatMessage(_messages.blockTypeMessages.blockquote)
+    })
+  }, formatMessage(_messages.blockTypeMessages.blockquote));
+};

package/dist/cjs/ui/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlockTypeComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _HeadingMenuItem = require("./HeadingMenuItem");
+var _ParagraphMenuItem = require("./ParagraphMenuItem");
+var _QuoteMenuItem = require("./QuoteMenuItem");
+var getBlockTypeComponents = exports.getBlockTypeComponents = function getBlockTypeComponents() {
+  return [{
+    type: 'block-menu-item',
+    key: _blockMenu.FORMAT_HEADING_1_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_HEADING_1_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HeadingMenuItem.HeadingMenuItem, {
+        level: 1
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: _blockMenu.FORMAT_HEADING_2_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_HEADING_2_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HeadingMenuItem.HeadingMenuItem, {
+        level: 2
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: _blockMenu.FORMAT_HEADING_3_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_HEADING_3_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HeadingMenuItem.HeadingMenuItem, {
+        level: 3
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: _blockMenu.FORMAT_HEADING_4_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_HEADING_4_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HeadingMenuItem.HeadingMenuItem, {
+        level: 4
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: _blockMenu.FORMAT_HEADING_5_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_HEADING_5_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HeadingMenuItem.HeadingMenuItem, {
+        level: 5
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: _blockMenu.FORMAT_HEADING_6_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_HEADING_6_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HeadingMenuItem.HeadingMenuItem, {
+        level: 6
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: _blockMenu.FORMAT_PARAGRAPH_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_PARAGRAPH_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_ParagraphMenuItem.ParagraphMenuItem, null);
+    }
+  }, {
+    type: 'block-menu-item',
+    key: _blockMenu.FORMAT_QUOTE_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: _blockMenu.FORMAT_NESTED_MENU_RANK[_blockMenu.FORMAT_QUOTE_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_QuoteMenuItem.QuoteMenuItem, null);
+    }
+  }];
+};

package/dist/es2019/blockTypePlugin.js

@@ -7,6 +7,7 @@ import { IconHeading, IconQuote } from '@atlaskit/editor-common/quick-insert';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearFormatting, insertBlockQuoteWithAnalytics, insertBlockQuoteWithAnalyticsCommand, setBlockTypeWithAnalytics } from './pm-plugins/commands/block-type';
 import inputRulePlugin from './pm-plugins/input-rule';
@@ -14,7 +15,8 @@ import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin, pluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './pm-plugins/ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './pm-plugins/ui/PrimaryToolbarComponent';
-import { getToolbarComponents } from './pm-plugins/ui/ToolbarComponents';
+import { getToolbarComponents } from './pm-plugins/ui/toolbar-components';
+import { getBlockTypeComponents } from './ui';
 const headingPluginOptions = ({
   formatMessage
 }, isAllowed, editorAnalyticsApi) => {
@@ -125,6 +127,10 @@ const blockTypePlugin = ({
       component: primaryToolbarComponent
     });
   }
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(getBlockTypeComponents());
+  }
   return {
     name: 'blockType',
     nodes() {

package/dist/es2019/pm-plugins/ui/FloatingToolbarComponent.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import ToolbarBlockType from './ToolbarBlockType';
 const FloatingToolbarSettings = {
@@ -9,7 +9,9 @@ const FloatingToolbarSettings = {
   isToolbarReducedSpacing: true,
   shouldUseDefaultRole: false
 };
-const useFloatingToolbarComponentPluginState = sharedPluginStateHookMigratorFactory(api => {
+export function FloatingToolbarComponent({
+  api
+}) {
   const {
     currentBlockType,
     blockTypesDisabled,
@@ -26,35 +28,6 @@ const useFloatingToolbarComponentPluginState = sharedPluginStateHookMigratorFact
       formattingIsPresent: (_states$blockTypeStat5 = states.blockTypeState) === null || _states$blockTypeStat5 === void 0 ? void 0 : _states$blockTypeStat5.formattingIsPresent
     };
   });
-  return {
-    currentBlockType,
-    blockTypesDisabled,
-    availableBlockTypes,
-    availableBlockTypesInDropdown,
-    formattingIsPresent
-  };
-}, api => {
-  const {
-    blockTypeState
-  } = useSharedPluginState(api, ['blockType']);
-  return {
-    currentBlockType: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType,
-    blockTypesDisabled: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled,
-    availableBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes,
-    availableBlockTypesInDropdown: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown,
-    formattingIsPresent: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent
-  };
-});
-export function FloatingToolbarComponent({
-  api
-}) {
-  const {
-    currentBlockType,
-    blockTypesDisabled,
-    availableBlockTypes,
-    availableBlockTypesInDropdown,
-    formattingIsPresent
-  } = useFloatingToolbarComponentPluginState(api);
   const boundSetBlockType = useCallback((name, fromBlockQuote) => {
     var _api$core, _api$blockType, _api$blockType$comman;
     return 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$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.setTextLevel(name, INPUT_METHOD.FLOATING_TB, fromBlockQuote));

package/dist/es2019/pm-plugins/ui/PrimaryToolbarComponent.js

@@ -1,43 +1,7 @@
 import React from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ToolbarBlockType from './ToolbarBlockType';
-const usePrimaryToolbarComponentPluginState = sharedPluginStateHookMigratorFactory(api => {
-  const {
-    currentBlockType,
-    blockTypesDisabled,
-    availableBlockTypes,
-    availableBlockTypesInDropdown,
-    formattingIsPresent
-  } = useSharedPluginStateWithSelector(api, ['blockType'], states => {
-    var _states$blockTypeStat, _states$blockTypeStat2, _states$blockTypeStat3, _states$blockTypeStat4, _states$blockTypeStat5;
-    return {
-      currentBlockType: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.currentBlockType,
-      blockTypesDisabled: (_states$blockTypeStat2 = states.blockTypeState) === null || _states$blockTypeStat2 === void 0 ? void 0 : _states$blockTypeStat2.blockTypesDisabled,
-      availableBlockTypes: (_states$blockTypeStat3 = states.blockTypeState) === null || _states$blockTypeStat3 === void 0 ? void 0 : _states$blockTypeStat3.availableBlockTypes,
-      availableBlockTypesInDropdown: (_states$blockTypeStat4 = states.blockTypeState) === null || _states$blockTypeStat4 === void 0 ? void 0 : _states$blockTypeStat4.availableBlockTypesInDropdown,
-      formattingIsPresent: (_states$blockTypeStat5 = states.blockTypeState) === null || _states$blockTypeStat5 === void 0 ? void 0 : _states$blockTypeStat5.formattingIsPresent
-    };
-  });
-  return {
-    currentBlockType,
-    blockTypesDisabled,
-    availableBlockTypes,
-    availableBlockTypesInDropdown,
-    formattingIsPresent
-  };
-}, api => {
-  const {
-    blockTypeState
-  } = useSharedPluginState(api, ['blockType']);
-  return {
-    currentBlockType: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType,
-    blockTypesDisabled: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled,
-    availableBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes,
-    availableBlockTypesInDropdown: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown,
-    formattingIsPresent: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent
-  };
-});
 export function PrimaryToolbarComponent({
   api,
   isSmall,
@@ -54,7 +18,16 @@ export function PrimaryToolbarComponent({
     availableBlockTypes,
     availableBlockTypesInDropdown,
     formattingIsPresent
-  } = usePrimaryToolbarComponentPluginState(api);
+  } = useSharedPluginStateWithSelector(api, ['blockType'], states => {
+    var _states$blockTypeStat, _states$blockTypeStat2, _states$blockTypeStat3, _states$blockTypeStat4, _states$blockTypeStat5;
+    return {
+      currentBlockType: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.currentBlockType,
+      blockTypesDisabled: (_states$blockTypeStat2 = states.blockTypeState) === null || _states$blockTypeStat2 === void 0 ? void 0 : _states$blockTypeStat2.blockTypesDisabled,
+      availableBlockTypes: (_states$blockTypeStat3 = states.blockTypeState) === null || _states$blockTypeStat3 === void 0 ? void 0 : _states$blockTypeStat3.availableBlockTypes,
+      availableBlockTypesInDropdown: (_states$blockTypeStat4 = states.blockTypeState) === null || _states$blockTypeStat4 === void 0 ? void 0 : _states$blockTypeStat4.availableBlockTypesInDropdown,
+      formattingIsPresent: (_states$blockTypeStat5 = states.blockTypeState) === null || _states$blockTypeStat5 === void 0 ? void 0 : _states$blockTypeStat5.formattingIsPresent
+    };
+  });
   const boundSetBlockType = (name, fromBlockQuote) => {
     var _api$core, _api$blockType, _api$blockType$comman;
     return 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$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.setTextLevel(name, INPUT_METHOD.TOOLBAR, fromBlockQuote));

package/dist/es2019/pm-plugins/ui/{ToolbarComponents.js → toolbar-components.js}

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TEXT_STYLES_GROUP, TEXT_SECTION_RANK, TEXT_SECTION, TEXT_STYLES_MENU, TEXT_STYLES_GROUP_RANK, TEXT_STYLES_MENU_SECTION, TEXT_STYLES_MENU_RANK } from '@atlaskit/editor-common/toolbar';
+import { TEXT_STYLES_GROUP, TEXT_SECTION_RANK, TEXT_SECTION, TEXT_STYLES_MENU, TEXT_STYLES_GROUP_RANK, TEXT_STYLES_MENU_SECTION, TEXT_STYLES_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toolbarBlockTypesWithRank } from '../block-types';
 import { HeadingButton } from './ToolbarBlockType/HeadingButton';
 import { QuoteButton } from './ToolbarBlockType/QuoteButton';
@@ -33,7 +34,11 @@ export const getToolbarComponents = api => {
       type: TEXT_STYLES_MENU.type,
       key: TEXT_STYLES_MENU.key,
       rank: TEXT_STYLES_MENU_RANK[TEXT_STYLES_MENU_SECTION.key]
-    }]
+    }, ...(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+      type: TEXT_COLLAPSED_MENU.type,
+      key: TEXT_COLLAPSED_MENU.key,
+      rank: TEXT_COLLAPSED_MENU_RANK[TEXT_STYLES_MENU_SECTION.key]
+    }] : [])]
   }];
   Object.values(toolbarBlockTypesWithRank()).forEach(blockType => {
     if (blockType.toolbarKey) {

package/dist/es2019/ui/HeadingMenuItem.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import TextHeadingFiveIcon from '@atlaskit/icon-lab/core/text-heading-five';
+import TextHeadingFourIcon from '@atlaskit/icon-lab/core/text-heading-four';
+import TextHeadingOneIcon from '@atlaskit/icon-lab/core/text-heading-one';
+import TextHeadingSixIcon from '@atlaskit/icon-lab/core/text-heading-six';
+import TextHeadingThreeIcon from '@atlaskit/icon-lab/core/text-heading-three';
+import TextHeadingTwoIcon from '@atlaskit/icon-lab/core/text-heading-two';
+const headingIcons = [TextHeadingOneIcon, TextHeadingTwoIcon, TextHeadingThreeIcon, TextHeadingFourIcon, TextHeadingFiveIcon, TextHeadingSixIcon];
+const headingMessages = [blockTypeMessages.heading1, blockTypeMessages.heading2, blockTypeMessages.heading3, blockTypeMessages.heading4, blockTypeMessages.heading5, blockTypeMessages.heading6];
+export const HeadingMenuItem = ({
+  level
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const Icon = headingIcons[level - 1];
+  const message = headingMessages[level - 1];
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: formatMessage(message)
+    })
+  }, formatMessage(message));
+};

package/dist/es2019/ui/ParagraphMenuItem.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import TextParagraphIcon from '@atlaskit/icon-lab/core/text-paragraph';
+export const ParagraphMenuItem = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TextParagraphIcon, {
+      label: formatMessage(blockMenuMessages.paragraph)
+    })
+  }, formatMessage(blockMenuMessages.paragraph));
+};

package/dist/es2019/ui/QuoteMenuItem.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
+export const QuoteMenuItem = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(QuotationMarkIcon, {
+      label: formatMessage(blockTypeMessages.blockquote)
+    })
+  }, formatMessage(blockTypeMessages.blockquote));
+};

package/dist/es2019/ui/index.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { FORMAT_HEADING_1_MENU_ITEM, FORMAT_HEADING_2_MENU_ITEM, FORMAT_HEADING_3_MENU_ITEM, FORMAT_HEADING_4_MENU_ITEM, FORMAT_HEADING_5_MENU_ITEM, FORMAT_HEADING_6_MENU_ITEM, FORMAT_NESTED_MENU_RANK, FORMAT_PARAGRAPH_MENU_ITEM, FORMAT_QUOTE_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { HeadingMenuItem } from './HeadingMenuItem';
+import { ParagraphMenuItem } from './ParagraphMenuItem';
+import { QuoteMenuItem } from './QuoteMenuItem';
+export const getBlockTypeComponents = () => {
+  return [{
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_1_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_1_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(HeadingMenuItem, {
+      level: 1
+    })
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_2_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_2_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(HeadingMenuItem, {
+      level: 2
+    })
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_3_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_3_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(HeadingMenuItem, {
+      level: 3
+    })
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_4_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_4_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(HeadingMenuItem, {
+      level: 4
+    })
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_5_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_5_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(HeadingMenuItem, {
+      level: 5
+    })
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_6_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_6_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(HeadingMenuItem, {
+      level: 6
+    })
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_PARAGRAPH_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_PARAGRAPH_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(ParagraphMenuItem, null)
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_QUOTE_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_QUOTE_MENU_ITEM.key]
+    },
+    component: () => /*#__PURE__*/React.createElement(QuoteMenuItem, null)
+  }];
+};

package/dist/esm/blockTypePlugin.js

@@ -11,6 +11,7 @@ import { IconHeading, IconQuote } from '@atlaskit/editor-common/quick-insert';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearFormatting as _clearFormatting, insertBlockQuoteWithAnalytics, insertBlockQuoteWithAnalyticsCommand, setBlockTypeWithAnalytics } from './pm-plugins/commands/block-type';
 import inputRulePlugin from './pm-plugins/input-rule';
@@ -18,7 +19,8 @@ import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin, pluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './pm-plugins/ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './pm-plugins/ui/PrimaryToolbarComponent';
-import { getToolbarComponents } from './pm-plugins/ui/ToolbarComponents';
+import { getToolbarComponents } from './pm-plugins/ui/toolbar-components';
+import { getBlockTypeComponents } from './ui';
 var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref.formatMessage;
   if (!isAllowed) {
@@ -129,6 +131,10 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
       component: primaryToolbarComponent
     });
   }
+  if (expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true)) {
+    var _api$blockMenu;
+    api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(getBlockTypeComponents());
+  }
   return {
     name: 'blockType',
     nodes: function nodes() {

package/dist/esm/pm-plugins/ui/FloatingToolbarComponent.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import ToolbarBlockType from './ToolbarBlockType';
 var FloatingToolbarSettings = {
@@ -9,7 +9,8 @@ var FloatingToolbarSettings = {
   isToolbarReducedSpacing: true,
   shouldUseDefaultRole: false
 };
-var useFloatingToolbarComponentPluginState = sharedPluginStateHookMigratorFactory(function (api) {
+export function FloatingToolbarComponent(_ref) {
+  var api = _ref.api;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockType'], function (states) {
       var _states$blockTypeStat, _states$blockTypeStat2, _states$blockTypeStat3, _states$blockTypeStat4, _states$blockTypeStat5;
       return {
@@ -25,32 +26,6 @@ var useFloatingToolbarComponentPluginState = sharedPluginStateHookMigratorFactor
     availableBlockTypes = _useSharedPluginState.availableBlockTypes,
     availableBlockTypesInDropdown = _useSharedPluginState.availableBlockTypesInDropdown,
     formattingIsPresent = _useSharedPluginState.formattingIsPresent;
-  return {
-    currentBlockType: currentBlockType,
-    blockTypesDisabled: blockTypesDisabled,
-    availableBlockTypes: availableBlockTypes,
-    availableBlockTypesInDropdown: availableBlockTypesInDropdown,
-    formattingIsPresent: formattingIsPresent
-  };
-}, function (api) {
-  var _useSharedPluginState2 = useSharedPluginState(api, ['blockType']),
-    blockTypeState = _useSharedPluginState2.blockTypeState;
-  return {
-    currentBlockType: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType,
-    blockTypesDisabled: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled,
-    availableBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes,
-    availableBlockTypesInDropdown: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown,
-    formattingIsPresent: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent
-  };
-});
-export function FloatingToolbarComponent(_ref) {
-  var api = _ref.api;
-  var _useFloatingToolbarCo = useFloatingToolbarComponentPluginState(api),
-    currentBlockType = _useFloatingToolbarCo.currentBlockType,
-    blockTypesDisabled = _useFloatingToolbarCo.blockTypesDisabled,
-    availableBlockTypes = _useFloatingToolbarCo.availableBlockTypes,
-    availableBlockTypesInDropdown = _useFloatingToolbarCo.availableBlockTypesInDropdown,
-    formattingIsPresent = _useFloatingToolbarCo.formattingIsPresent;
   var boundSetBlockType = useCallback(function (name, fromBlockQuote) {
     var _api$core, _api$blockType;
     return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, INPUT_METHOD.FLOATING_TB, fromBlockQuote));

package/dist/esm/pm-plugins/ui/PrimaryToolbarComponent.js

@@ -1,8 +1,16 @@
 import React from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ToolbarBlockType from './ToolbarBlockType';
-var usePrimaryToolbarComponentPluginState = sharedPluginStateHookMigratorFactory(function (api) {
+export function PrimaryToolbarComponent(_ref) {
+  var api = _ref.api,
+    isSmall = _ref.isSmall,
+    disabled = _ref.disabled,
+    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    shouldUseDefaultRole = _ref.shouldUseDefaultRole;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockType'], function (states) {
       var _states$blockTypeStat, _states$blockTypeStat2, _states$blockTypeStat3, _states$blockTypeStat4, _states$blockTypeStat5;
       return {
@@ -18,39 +26,6 @@ var usePrimaryToolbarComponentPluginState = sharedPluginStateHookMigratorFactory
     availableBlockTypes = _useSharedPluginState.availableBlockTypes,
     availableBlockTypesInDropdown = _useSharedPluginState.availableBlockTypesInDropdown,
     formattingIsPresent = _useSharedPluginState.formattingIsPresent;
-  return {
-    currentBlockType: currentBlockType,
-    blockTypesDisabled: blockTypesDisabled,
-    availableBlockTypes: availableBlockTypes,
-    availableBlockTypesInDropdown: availableBlockTypesInDropdown,
-    formattingIsPresent: formattingIsPresent
-  };
-}, function (api) {
-  var _useSharedPluginState2 = useSharedPluginState(api, ['blockType']),
-    blockTypeState = _useSharedPluginState2.blockTypeState;
-  return {
-    currentBlockType: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType,
-    blockTypesDisabled: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled,
-    availableBlockTypes: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes,
-    availableBlockTypesInDropdown: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown,
-    formattingIsPresent: blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent
-  };
-});
-export function PrimaryToolbarComponent(_ref) {
-  var api = _ref.api,
-    isSmall = _ref.isSmall,
-    disabled = _ref.disabled,
-    isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
-    popupsMountPoint = _ref.popupsMountPoint,
-    popupsBoundariesElement = _ref.popupsBoundariesElement,
-    popupsScrollableElement = _ref.popupsScrollableElement,
-    shouldUseDefaultRole = _ref.shouldUseDefaultRole;
-  var _usePrimaryToolbarCom = usePrimaryToolbarComponentPluginState(api),
-    currentBlockType = _usePrimaryToolbarCom.currentBlockType,
-    blockTypesDisabled = _usePrimaryToolbarCom.blockTypesDisabled,
-    availableBlockTypes = _usePrimaryToolbarCom.availableBlockTypes,
-    availableBlockTypesInDropdown = _usePrimaryToolbarCom.availableBlockTypesInDropdown,
-    formattingIsPresent = _usePrimaryToolbarCom.formattingIsPresent;
   var boundSetBlockType = function boundSetBlockType(name, fromBlockQuote) {
     var _api$core, _api$blockType;
     return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, INPUT_METHOD.TOOLBAR, fromBlockQuote));

package/dist/esm/pm-plugins/ui/{ToolbarComponents.js → toolbar-components.js}

@@ -1,5 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { TEXT_STYLES_GROUP, TEXT_SECTION_RANK, TEXT_SECTION, TEXT_STYLES_MENU, TEXT_STYLES_GROUP_RANK, TEXT_STYLES_MENU_SECTION, TEXT_STYLES_MENU_RANK } from '@atlaskit/editor-common/toolbar';
+import { TEXT_STYLES_GROUP, TEXT_SECTION_RANK, TEXT_SECTION, TEXT_STYLES_MENU, TEXT_STYLES_GROUP_RANK, TEXT_STYLES_MENU_SECTION, TEXT_STYLES_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toolbarBlockTypesWithRank } from '../block-types';
 import { HeadingButton } from './ToolbarBlockType/HeadingButton';
 import { QuoteButton } from './ToolbarBlockType/QuoteButton';
@@ -34,7 +36,11 @@ export var getToolbarComponents = function getToolbarComponents(api) {
       type: TEXT_STYLES_MENU.type,
       key: TEXT_STYLES_MENU.key,
       rank: TEXT_STYLES_MENU_RANK[TEXT_STYLES_MENU_SECTION.key]
-    }]
+    }].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+      type: TEXT_COLLAPSED_MENU.type,
+      key: TEXT_COLLAPSED_MENU.key,
+      rank: TEXT_COLLAPSED_MENU_RANK[TEXT_STYLES_MENU_SECTION.key]
+    }] : []))
   }];
   Object.values(toolbarBlockTypesWithRank()).forEach(function (blockType) {
     if (blockType.toolbarKey) {

package/dist/esm/ui/HeadingMenuItem.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import TextHeadingFiveIcon from '@atlaskit/icon-lab/core/text-heading-five';
+import TextHeadingFourIcon from '@atlaskit/icon-lab/core/text-heading-four';
+import TextHeadingOneIcon from '@atlaskit/icon-lab/core/text-heading-one';
+import TextHeadingSixIcon from '@atlaskit/icon-lab/core/text-heading-six';
+import TextHeadingThreeIcon from '@atlaskit/icon-lab/core/text-heading-three';
+import TextHeadingTwoIcon from '@atlaskit/icon-lab/core/text-heading-two';
+var headingIcons = [TextHeadingOneIcon, TextHeadingTwoIcon, TextHeadingThreeIcon, TextHeadingFourIcon, TextHeadingFiveIcon, TextHeadingSixIcon];
+var headingMessages = [blockTypeMessages.heading1, blockTypeMessages.heading2, blockTypeMessages.heading3, blockTypeMessages.heading4, blockTypeMessages.heading5, blockTypeMessages.heading6];
+export var HeadingMenuItem = function HeadingMenuItem(_ref) {
+  var level = _ref.level;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var Icon = headingIcons[level - 1];
+  var message = headingMessages[level - 1];
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: formatMessage(message)
+    })
+  }, formatMessage(message));
+};

package/dist/esm/ui/ParagraphMenuItem.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockMenuMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import TextParagraphIcon from '@atlaskit/icon-lab/core/text-paragraph';
+export var ParagraphMenuItem = function ParagraphMenuItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(TextParagraphIcon, {
+      label: formatMessage(blockMenuMessages.paragraph)
+    })
+  }, formatMessage(blockMenuMessages.paragraph));
+};

package/dist/esm/ui/QuoteMenuItem.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
+export var QuoteMenuItem = function QuoteMenuItem() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(QuotationMarkIcon, {
+      label: formatMessage(blockTypeMessages.blockquote)
+    })
+  }, formatMessage(blockTypeMessages.blockquote));
+};

package/dist/esm/ui/index.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { FORMAT_HEADING_1_MENU_ITEM, FORMAT_HEADING_2_MENU_ITEM, FORMAT_HEADING_3_MENU_ITEM, FORMAT_HEADING_4_MENU_ITEM, FORMAT_HEADING_5_MENU_ITEM, FORMAT_HEADING_6_MENU_ITEM, FORMAT_NESTED_MENU_RANK, FORMAT_PARAGRAPH_MENU_ITEM, FORMAT_QUOTE_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
+import { HeadingMenuItem } from './HeadingMenuItem';
+import { ParagraphMenuItem } from './ParagraphMenuItem';
+import { QuoteMenuItem } from './QuoteMenuItem';
+export var getBlockTypeComponents = function getBlockTypeComponents() {
+  return [{
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_1_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_1_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeadingMenuItem, {
+        level: 1
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_2_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_2_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeadingMenuItem, {
+        level: 2
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_3_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_3_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeadingMenuItem, {
+        level: 3
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_4_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_4_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeadingMenuItem, {
+        level: 4
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_5_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_5_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeadingMenuItem, {
+        level: 5
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_HEADING_6_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_HEADING_6_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HeadingMenuItem, {
+        level: 6
+      });
+    }
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_PARAGRAPH_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_PARAGRAPH_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(ParagraphMenuItem, null);
+    }
+  }, {
+    type: 'block-menu-item',
+    key: FORMAT_QUOTE_MENU_ITEM.key,
+    parent: {
+      type: 'block-menu-section',
+      key: 'nested-menu-format-section-primary',
+      rank: FORMAT_NESTED_MENU_RANK[FORMAT_QUOTE_MENU_ITEM.key]
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(QuoteMenuItem, null);
+    }
+  }];
+};

package/dist/types/blockTypePluginType.d.ts

@@ -1,5 +1,6 @@
 import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -22,7 +23,8 @@ export type BlockTypePlugin = NextEditorPlugin<'blockType', {
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<SelectionToolbarPlugin>,
         OptionalPlugin<UserPreferencesPlugin>,
-        OptionalPlugin<ToolbarPlugin>
+        OptionalPlugin<ToolbarPlugin>,
+        OptionalPlugin<BlockMenuPlugin>
     ];
     pluginConfiguration: BlockTypePluginOptions | undefined;
     sharedState: BlockTypeState | undefined;

package/dist/types/ui/HeadingMenuItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type HeadingMenuItemProps = {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+};
+export declare const HeadingMenuItem: ({ level }: HeadingMenuItemProps) => React.JSX.Element;
+export {};

package/dist/types/ui/ParagraphMenuItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ParagraphMenuItem: () => React.JSX.Element;

package/dist/types/ui/QuoteMenuItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const QuoteMenuItem: () => React.JSX.Element;

package/dist/types/ui/index.d.ts

@@ -0,0 +1,2 @@
+import type { RegisterBlockMenuComponent } from '@atlaskit/editor-plugin-block-menu';
+export declare const getBlockTypeComponents: () => RegisterBlockMenuComponent[];

package/dist/types-ts4.5/blockTypePluginType.d.ts

@@ -1,5 +1,6 @@
 import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -22,7 +23,8 @@ export type BlockTypePlugin = NextEditorPlugin<'blockType', {
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<SelectionToolbarPlugin>,
         OptionalPlugin<UserPreferencesPlugin>,
-        OptionalPlugin<ToolbarPlugin>
+        OptionalPlugin<ToolbarPlugin>,
+        OptionalPlugin<BlockMenuPlugin>
     ];
     pluginConfiguration: BlockTypePluginOptions | undefined;
     sharedState: BlockTypeState | undefined;

package/dist/types-ts4.5/ui/HeadingMenuItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type HeadingMenuItemProps = {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+};
+export declare const HeadingMenuItem: ({ level }: HeadingMenuItemProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/ParagraphMenuItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ParagraphMenuItem: () => React.JSX.Element;

package/dist/types-ts4.5/ui/QuoteMenuItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const QuoteMenuItem: () => React.JSX.Element;

package/dist/types-ts4.5/ui/index.d.ts

@@ -0,0 +1,2 @@
+import type { RegisterBlockMenuComponent } from '@atlaskit/editor-plugin-block-menu';
+export declare const getBlockTypeComponents: () => RegisterBlockMenuComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-type",
-	"version": "6.2.14",
+	"version": "6.2.16",
 	"description": "BlockType plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,27 +32,28 @@
 		"@atlaskit/adf-schema": "^50.2.3",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^0.0.17",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
 		"@atlaskit/editor-plugin-toolbar": "^0.4.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/editor-toolbar": "^0.5.0",
-		"@atlaskit/editor-toolbar-model": "^0.1.0",
+		"@atlaskit/editor-toolbar": "^0.6.0",
+		"@atlaskit/editor-toolbar-model": "^0.2.0",
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.12.0",
 		"@atlaskit/prosemirror-input-rules": "^3.4.0",
 		"@atlaskit/theme": "^20.0.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tmp-editor-statsig": "^11.11.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.33.0",
+		"@atlaskit/editor-common": "^107.34.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"