@atlaskit/editor-plugin-block-type 6.1.2 → 6.2.0

package/dist/es2019/pm-plugins/ui/ToolbarBlockType/HeadingButton.js

@@ -0,0 +1,59 @@
+/* HeadingButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./HeadingButton.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { formatShortcut, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6 } from '@atlaskit/editor-common/keymaps';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { Box } from '@atlaskit/primitives/compiled';
+const headingSizeStylesMap = {
+  normal: "_11c82smr",
+  heading1: "_11c81c04",
+  heading2: "_11c8nf1z",
+  heading3: "_11c8lodh",
+  heading4: "_11c8nbxd",
+  heading5: "_11c8140y",
+  heading6: "_11c81vhk"
+};
+const shortcuts = {
+  'normal': setNormalText,
+  'heading1': toggleHeading1,
+  'heading2': toggleHeading2,
+  'heading3': toggleHeading3,
+  'heading4': toggleHeading4,
+  'heading5': toggleHeading5,
+  'heading6': toggleHeading6
+};
+export const HeadingButton = ({
+  blockType,
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
+  const availableBlockTypesInDropdown = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown');
+  if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(availableBlockType => availableBlockType.name === blockType.name))) {
+    return null;
+  }
+  const fromBlockQuote = (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === 'blockquote';
+  const onClick = () => {
+    var _api$core, _api$blockType, _api$blockType$comman;
+    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(blockType.name, INPUT_METHOD.TOOLBAR, fromBlockQuote));
+  };
+  const shortcut = formatShortcut(shortcuts[blockType.name]);
+  const isSelected = currentBlockType === blockType;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: blockType.icon,
+    elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    onClick: onClick,
+    isSelected: isSelected,
+    ariaKeyshortcuts: shortcut
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: headingSizeStylesMap[blockType.name]
+  }, formatMessage(blockType.title)));
+};

package/dist/es2019/pm-plugins/ui/ToolbarBlockType/QuoteButton.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { formatShortcut, toggleBlockQuote } from '@atlaskit/editor-common/keymaps';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export const QuoteButton = ({
+  blockType,
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const availableBlockTypesInDropdown = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown');
+  const currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
+  if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(availableBlockType => availableBlockType.name === blockType.name))) {
+    return null;
+  }
+  const onClick = () => {
+    var _api$core, _api$blockType, _api$blockType$comman;
+    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.insertBlockQuote(INPUT_METHOD.TOOLBAR));
+  };
+  const shortcut = formatShortcut(toggleBlockQuote);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: blockType.icon,
+    elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    onClick: onClick,
+    isSelected: currentBlockType === blockType,
+    ariaKeyshortcuts: shortcut
+  }, formatMessage(blockType.title));
+};

package/dist/es2019/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from "@atlaskit/editor-toolbar";
+import { toolbarBlockTypesWithRank } from '../../block-types';
+export const TextStylesMenuButton = ({
+  api,
+  children
+}) => {
+  var _Object$values$find, _Object$values$find$i;
+  const {
+    formatMessage
+  } = useIntl();
+  const blockTypesDisabled = useSharedPluginStateSelector(api, 'blockType.blockTypesDisabled');
+  const currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
+  const CurrentIcon = (_Object$values$find = Object.values(toolbarBlockTypesWithRank()).find(blockType => blockType.name === (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name))) === null || _Object$values$find === void 0 ? void 0 : (_Object$values$find$i = _Object$values$find.icon) === null || _Object$values$find$i === void 0 ? void 0 : _Object$values$find$i.type;
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(toolbarMessages.textStylesTooltip)
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    isDisabled: blockTypesDisabled,
+    iconBefore: CurrentIcon ? /*#__PURE__*/React.createElement(CurrentIcon, {
+      label: `${currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name} ${formatMessage(toolbarMessages.textStylesTooltip)}`
+    }) : /*#__PURE__*/React.createElement(TextIcon, {
+      label: formatMessage(toolbarMessages.textStylesTooltip)
+    })
+  }, children));
+};

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

@@ -0,0 +1,60 @@
+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 { toolbarBlockTypesWithRank } from '../block-types';
+import { HeadingButton } from './ToolbarBlockType/HeadingButton';
+import { QuoteButton } from './ToolbarBlockType/QuoteButton';
+import { TextStylesMenuButton } from './ToolbarBlockType/TextStylesMenuButton';
+export const getToolbarComponents = api => {
+  const toolbarComponents = [{
+    type: TEXT_STYLES_GROUP.type,
+    key: TEXT_STYLES_GROUP.key,
+    parents: [{
+      type: TEXT_SECTION.type,
+      key: TEXT_SECTION.key,
+      rank: TEXT_SECTION_RANK[TEXT_STYLES_GROUP.key]
+    }]
+  }, {
+    type: TEXT_STYLES_MENU.type,
+    key: TEXT_STYLES_MENU.key,
+    parents: [{
+      type: TEXT_STYLES_GROUP.type,
+      key: TEXT_STYLES_GROUP.key,
+      rank: TEXT_STYLES_GROUP_RANK[TEXT_STYLES_MENU.key]
+    }],
+    component: ({
+      children
+    }) => /*#__PURE__*/React.createElement(TextStylesMenuButton, {
+      api: api
+    }, children)
+  }, {
+    type: TEXT_STYLES_MENU_SECTION.type,
+    key: TEXT_STYLES_MENU_SECTION.key,
+    parents: [{
+      type: TEXT_STYLES_MENU.type,
+      key: TEXT_STYLES_MENU.key,
+      rank: TEXT_STYLES_MENU_RANK[TEXT_STYLES_MENU_SECTION.key]
+    }]
+  }];
+  Object.values(toolbarBlockTypesWithRank()).forEach(blockType => {
+    if (blockType.toolbarKey) {
+      const menuItem = {
+        type: 'menu-item',
+        key: blockType.toolbarKey,
+        parents: [{
+          type: TEXT_STYLES_MENU_SECTION.type,
+          key: TEXT_STYLES_MENU_SECTION.key,
+          rank: blockType.toolbarRank
+        }],
+        component: blockType.name === 'blockquote' ? () => /*#__PURE__*/React.createElement(QuoteButton, {
+          blockType: blockType,
+          api: api
+        }) : () => /*#__PURE__*/React.createElement(HeadingButton, {
+          blockType: blockType,
+          api: api
+        })
+      };
+      toolbarComponents.push(menuItem);
+    }
+  });
+  return toolbarComponents;
+};

package/dist/esm/blockTypePlugin.js

@@ -10,6 +10,7 @@ import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages'
 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 { 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';
@@ -17,6 +18,7 @@ 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';
 var headingPluginOptions = function headingPluginOptions(_ref, isAllowed, editorAnalyticsApi) {
   var formatMessage = _ref.formatMessage;
   if (!isAllowed) {
@@ -93,7 +95,6 @@ var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed,
   }];
 };
 var blockTypePlugin = function blockTypePlugin(_ref3) {
-  var _api$primaryToolbar;
   var options = _ref3.config,
     api = _ref3.api;
   var primaryToolbarComponent = function primaryToolbarComponent(_ref4) {
@@ -118,10 +119,16 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
       shouldUseDefaultRole: false
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'blockType',
-    component: primaryToolbarComponent
-  });
+  if (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(getToolbarComponents(api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'blockType',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'blockType',
     nodes: function nodes() {
@@ -199,7 +206,7 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
       return pluginKey.getState(editorState);
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
-    pluginsOptions: _objectSpread({
+    pluginsOptions: _objectSpread(_objectSpread({}, !expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) && {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
@@ -227,7 +234,7 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
           return undefined;
         }
       }
-    }, editorExperiment('platform_editor_insertion', 'control') && {
+    }), editorExperiment('platform_editor_insertion', 'control') && {
       quickInsert: function quickInsert(intl) {
         var _api$analytics7, _api$analytics8;
         var exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];

package/dist/esm/pm-plugins/block-types.js

@@ -1,5 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import React from 'react';
 import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
+import { BLOCK_QUOTE_MENU_ITEM, HEADING_1_MENU_ITEM, HEADING_2_MENU_ITEM, HEADING_3_MENU_ITEM, HEADING_4_MENU_ITEM, HEADING_5_MENU_ITEM, HEADING_6_MENU_ITEM, NORMAL_TEXT_MENU_ITEM, TEXT_STYLES_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { QuoteIcon } 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';
@@ -107,6 +112,56 @@ export var OTHER = {
   nodeName: ''
 };
 export var TEXT_BLOCK_TYPES = [NORMAL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6];
+var ToolbarBlockTypes = /*#__PURE__*/function (ToolbarBlockTypes) {
+  ToolbarBlockTypes["normal"] = "normal";
+  ToolbarBlockTypes["heading1"] = "heading1";
+  ToolbarBlockTypes["heading2"] = "heading2";
+  ToolbarBlockTypes["heading3"] = "heading3";
+  ToolbarBlockTypes["heading4"] = "heading4";
+  ToolbarBlockTypes["heading5"] = "heading5";
+  ToolbarBlockTypes["heading6"] = "heading6";
+  ToolbarBlockTypes["blockquote"] = "blockquote";
+  return ToolbarBlockTypes;
+}(ToolbarBlockTypes || {});
+export var toolbarBlockTypesWithRank = function toolbarBlockTypesWithRank() {
+  return {
+    normal: _objectSpread(_objectSpread({}, NORMAL_TEXT), {}, {
+      toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[NORMAL_TEXT_MENU_ITEM.key],
+      toolbarKey: NORMAL_TEXT_MENU_ITEM.key
+    }),
+    heading1: _objectSpread(_objectSpread({}, HEADING_1), {}, {
+      toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_1_MENU_ITEM.key],
+      toolbarKey: HEADING_1_MENU_ITEM.key
+    }),
+    heading2: _objectSpread(_objectSpread({}, HEADING_2), {}, {
+      toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_2_MENU_ITEM.key],
+      toolbarKey: HEADING_2_MENU_ITEM.key
+    }),
+    heading3: _objectSpread(_objectSpread({}, HEADING_3), {}, {
+      toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_3_MENU_ITEM.key],
+      toolbarKey: HEADING_3_MENU_ITEM.key
+    }),
+    heading4: _objectSpread(_objectSpread({}, HEADING_4), {}, {
+      toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_4_MENU_ITEM.key],
+      toolbarKey: HEADING_4_MENU_ITEM.key
+    }),
+    heading5: _objectSpread(_objectSpread({}, HEADING_5), {}, {
+      toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_5_MENU_ITEM.key],
+      toolbarKey: HEADING_5_MENU_ITEM.key
+    }),
+    heading6: _objectSpread(_objectSpread({}, HEADING_6), {}, {
+      toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_6_MENU_ITEM.key],
+      toolbarKey: HEADING_6_MENU_ITEM.key
+    }),
+    blockquote: _objectSpread(_objectSpread({}, BLOCK_QUOTE), {}, {
+      icon: /*#__PURE__*/React.createElement(QuoteIcon, {
+        label: ""
+      }),
+      toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[BLOCK_QUOTE_MENU_ITEM.key],
+      toolbarKey: BLOCK_QUOTE_MENU_ITEM.key
+    })
+  };
+};
 export var FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
 export var FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup', 'backgroundColor'];
 export var WRAPPER_BLOCK_TYPES = [BLOCK_QUOTE, CODE_BLOCK, PANEL];

package/dist/esm/pm-plugins/ui/ToolbarBlockType/HeadingButton.compiled.css

@@ -0,0 +1,7 @@
+._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}

package/dist/esm/pm-plugins/ui/ToolbarBlockType/HeadingButton.js

@@ -0,0 +1,59 @@
+/* HeadingButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./HeadingButton.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { formatShortcut, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6 } from '@atlaskit/editor-common/keymaps';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { Box } from '@atlaskit/primitives/compiled';
+var headingSizeStylesMap = {
+  normal: "_11c82smr",
+  heading1: "_11c81c04",
+  heading2: "_11c8nf1z",
+  heading3: "_11c8lodh",
+  heading4: "_11c8nbxd",
+  heading5: "_11c8140y",
+  heading6: "_11c81vhk"
+};
+var shortcuts = {
+  'normal': setNormalText,
+  'heading1': toggleHeading1,
+  'heading2': toggleHeading2,
+  'heading3': toggleHeading3,
+  'heading4': toggleHeading4,
+  'heading5': toggleHeading5,
+  'heading6': toggleHeading6
+};
+export var HeadingButton = function HeadingButton(_ref) {
+  var blockType = _ref.blockType,
+    api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
+  var availableBlockTypesInDropdown = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown');
+  if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(function (availableBlockType) {
+    return availableBlockType.name === blockType.name;
+  }))) {
+    return null;
+  }
+  var fromBlockQuote = (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name) === 'blockquote';
+  var onClick = function onClick() {
+    var _api$core, _api$blockType;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === 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(blockType.name, INPUT_METHOD.TOOLBAR, fromBlockQuote));
+  };
+  var shortcut = formatShortcut(shortcuts[blockType.name]);
+  var isSelected = currentBlockType === blockType;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: blockType.icon,
+    elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    onClick: onClick,
+    isSelected: isSelected,
+    ariaKeyshortcuts: shortcut
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: headingSizeStylesMap[blockType.name]
+  }, formatMessage(blockType.title)));
+};

package/dist/esm/pm-plugins/ui/ToolbarBlockType/QuoteButton.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { formatShortcut, toggleBlockQuote } from '@atlaskit/editor-common/keymaps';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+export var QuoteButton = function QuoteButton(_ref) {
+  var blockType = _ref.blockType,
+    api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var availableBlockTypesInDropdown = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown');
+  var currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
+  if (!(availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 && availableBlockTypesInDropdown.some(function (availableBlockType) {
+    return availableBlockType.name === blockType.name;
+  }))) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var _api$core, _api$blockType;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === 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.insertBlockQuote(INPUT_METHOD.TOOLBAR));
+  };
+  var shortcut = formatShortcut(toggleBlockQuote);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: blockType.icon,
+    elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    onClick: onClick,
+    isSelected: currentBlockType === blockType,
+    ariaKeyshortcuts: shortcut
+  }, formatMessage(blockType.title));
+};

package/dist/esm/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from "@atlaskit/editor-toolbar";
+import { toolbarBlockTypesWithRank } from '../../block-types';
+export var TextStylesMenuButton = function TextStylesMenuButton(_ref) {
+  var _Object$values$find;
+  var api = _ref.api,
+    children = _ref.children;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var blockTypesDisabled = useSharedPluginStateSelector(api, 'blockType.blockTypesDisabled');
+  var currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
+  var CurrentIcon = (_Object$values$find = Object.values(toolbarBlockTypesWithRank()).find(function (blockType) {
+    return blockType.name === (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name);
+  })) === null || _Object$values$find === void 0 || (_Object$values$find = _Object$values$find.icon) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.type;
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(toolbarMessages.textStylesTooltip)
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    isDisabled: blockTypesDisabled,
+    iconBefore: CurrentIcon ? /*#__PURE__*/React.createElement(CurrentIcon, {
+      label: "".concat(currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name, " ").concat(formatMessage(toolbarMessages.textStylesTooltip))
+    }) : /*#__PURE__*/React.createElement(TextIcon, {
+      label: formatMessage(toolbarMessages.textStylesTooltip)
+    })
+  }, children));
+};

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

@@ -0,0 +1,65 @@
+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 { toolbarBlockTypesWithRank } from '../block-types';
+import { HeadingButton } from './ToolbarBlockType/HeadingButton';
+import { QuoteButton } from './ToolbarBlockType/QuoteButton';
+import { TextStylesMenuButton } from './ToolbarBlockType/TextStylesMenuButton';
+export var getToolbarComponents = function getToolbarComponents(api) {
+  var toolbarComponents = [{
+    type: TEXT_STYLES_GROUP.type,
+    key: TEXT_STYLES_GROUP.key,
+    parents: [{
+      type: TEXT_SECTION.type,
+      key: TEXT_SECTION.key,
+      rank: TEXT_SECTION_RANK[TEXT_STYLES_GROUP.key]
+    }]
+  }, {
+    type: TEXT_STYLES_MENU.type,
+    key: TEXT_STYLES_MENU.key,
+    parents: [{
+      type: TEXT_STYLES_GROUP.type,
+      key: TEXT_STYLES_GROUP.key,
+      rank: TEXT_STYLES_GROUP_RANK[TEXT_STYLES_MENU.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(TextStylesMenuButton, {
+        api: api
+      }, children);
+    }
+  }, {
+    type: TEXT_STYLES_MENU_SECTION.type,
+    key: TEXT_STYLES_MENU_SECTION.key,
+    parents: [{
+      type: TEXT_STYLES_MENU.type,
+      key: TEXT_STYLES_MENU.key,
+      rank: TEXT_STYLES_MENU_RANK[TEXT_STYLES_MENU_SECTION.key]
+    }]
+  }];
+  Object.values(toolbarBlockTypesWithRank()).forEach(function (blockType) {
+    if (blockType.toolbarKey) {
+      var menuItem = {
+        type: 'menu-item',
+        key: blockType.toolbarKey,
+        parents: [{
+          type: TEXT_STYLES_MENU_SECTION.type,
+          key: TEXT_STYLES_MENU_SECTION.key,
+          rank: blockType.toolbarRank
+        }],
+        component: blockType.name === 'blockquote' ? function () {
+          return /*#__PURE__*/React.createElement(QuoteButton, {
+            blockType: blockType,
+            api: api
+          });
+        } : function () {
+          return /*#__PURE__*/React.createElement(HeadingButton, {
+            blockType: blockType,
+            api: api
+          });
+        }
+      };
+      toolbarComponents.push(menuItem);
+    }
+  });
+  return toolbarComponents;
+};

package/dist/types/blockTypePluginType.d.ts

@@ -2,6 +2,7 @@ import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 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';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { TextBlockTypes } from './pm-plugins/block-types';
 import type { ClearFormattingInputMethod, InputMethod } from './pm-plugins/commands/block-type';
@@ -13,7 +14,8 @@ export type BlockTypePlugin = NextEditorPlugin<'blockType', {
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<SelectionToolbarPlugin>,
-        OptionalPlugin<UserPreferencesPlugin>
+        OptionalPlugin<UserPreferencesPlugin>,
+        OptionalPlugin<ToolbarPlugin>
     ];
     sharedState: BlockTypeState | undefined;
     actions: {

package/dist/types/pm-plugins/block-types.d.ts

@@ -1,4 +1,4 @@
-import type { BlockType } from './types';
+import type { BlockType, BlockTypeWithRank } from './types';
 export declare const NORMAL_TEXT: BlockType;
 export declare const HEADING_1: BlockType;
 export declare const HEADING_2: BlockType;
@@ -11,6 +11,17 @@ export declare const CODE_BLOCK: BlockType;
 export declare const PANEL: BlockType;
 export declare const OTHER: BlockType;
 export declare const TEXT_BLOCK_TYPES: BlockType[];
+declare enum ToolbarBlockTypes {
+    normal = "normal",
+    heading1 = "heading1",
+    heading2 = "heading2",
+    heading3 = "heading3",
+    heading4 = "heading4",
+    heading5 = "heading5",
+    heading6 = "heading6",
+    blockquote = "blockquote"
+}
+export declare const toolbarBlockTypesWithRank: () => Record<ToolbarBlockTypes, BlockTypeWithRank>;
 export type TextBlockTypes = 'normal' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
 export declare const FORMATTING_NODE_TYPES: string[];
 export declare const FORMATTING_MARK_TYPES: string[];
@@ -21,3 +32,4 @@ export declare const HEADINGS_BY_LEVEL: Record<number, BlockType>;
 export declare const HEADINGS_BY_NAME: {
     [blockType: string]: BlockType;
 };
+export {};

package/dist/types/pm-plugins/types.d.ts

@@ -12,6 +12,10 @@ export interface BlockType {
     icon?: ReactElement;
     LEGACY_icon?: ReactElement;
 }
+export interface BlockTypeWithRank extends BlockType {
+    toolbarRank: number;
+    toolbarKey: string;
+}
 export interface BlockTypeNode {
     name: AllowedBlockTypes;
     node: NodeSpec;

package/dist/types/pm-plugins/ui/ToolbarBlockType/HeadingButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockTypePlugin } from '../../../blockTypePluginType';
+import type { BlockTypeWithRank } from '../../types';
+type HeadingButtonProps = {
+    blockType: BlockTypeWithRank;
+    api?: ExtractInjectionAPI<BlockTypePlugin>;
+};
+export declare const HeadingButton: ({ blockType, api }: HeadingButtonProps) => React.JSX.Element | null;
+export {};

package/dist/types/pm-plugins/ui/ToolbarBlockType/QuoteButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockTypePlugin } from '../../../blockTypePluginType';
+import type { BlockTypeWithRank } from '../../types';
+type QuoteButtonProps = {
+    blockType: BlockTypeWithRank;
+    api?: ExtractInjectionAPI<BlockTypePlugin>;
+};
+export declare const QuoteButton: ({ blockType, api }: QuoteButtonProps) => React.JSX.Element | null;
+export {};

package/dist/types/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockTypePlugin } from '../../../blockTypePluginType';
+type TextStylesMenuButtonProps = {
+    api?: ExtractInjectionAPI<BlockTypePlugin>;
+    children: React.ReactNode;
+};
+export declare const TextStylesMenuButton: ({ api, children }: TextStylesMenuButtonProps) => React.JSX.Element;
+export {};

package/dist/types/pm-plugins/ui/ToolbarComponents.d.ts

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { BlockTypePlugin } from '../../blockTypePluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<BlockTypePlugin>) => RegisterComponent[];

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

@@ -2,6 +2,7 @@ import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 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';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { TextBlockTypes } from './pm-plugins/block-types';
 import type { ClearFormattingInputMethod, InputMethod } from './pm-plugins/commands/block-type';
@@ -13,7 +14,8 @@ export type BlockTypePlugin = NextEditorPlugin<'blockType', {
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<SelectionToolbarPlugin>,
-        OptionalPlugin<UserPreferencesPlugin>
+        OptionalPlugin<UserPreferencesPlugin>,
+        OptionalPlugin<ToolbarPlugin>
     ];
     sharedState: BlockTypeState | undefined;
     actions: {