@atlaskit/editor-plugin-block-type 6.1.3 → 6.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-type
 
+## 6.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.2.0
+
+### Minor Changes
+
+- [`428e4e6ff8ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/428e4e6ff8ac9) -
+  [ux] ED-28683 register text styles dropdown to new toolbar. add `@atlaskit/editor-plugin-toolbar`,
+  `@atlaskit-editor-toolbar`, `@atlaskit/editor-toolbar-model`, `@atlaskit/css` as dependencies
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.3
 
 ### Patch Changes

package/dist/cjs/blockTypePlugin.js

@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockType = require("./pm-plugins/commands/block-type");
 var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
@@ -22,6 +23,7 @@ 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");
 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) {
@@ -100,7 +102,6 @@ var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed,
   }];
 };
 var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3) {
-  var _api$primaryToolbar;
   var options = _ref3.config,
     api = _ref3.api;
   var primaryToolbarComponent = function primaryToolbarComponent(_ref4) {
@@ -125,10 +126,16 @@ var blockTypePlugin = exports.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 ((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));
+  } 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() {
@@ -206,7 +213,7 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
       return _main.pluginKey.getState(editorState);
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
-    pluginsOptions: _objectSpread({
+    pluginsOptions: _objectSpread(_objectSpread({}, !(0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) && {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = (0, _platformFeatureFlags.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;
@@ -234,7 +241,7 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
           return undefined;
         }
       }
-    }, (0, _experiments.editorExperiment)('platform_editor_insertion', 'control') && {
+    }), (0, _experiments.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/cjs/pm-plugins/block-types.js

@@ -4,9 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getBlockTypesInDropdown = exports.WRAPPER_BLOCK_TYPES = exports.TEXT_BLOCK_TYPES = exports.PANEL = exports.OTHER = exports.NORMAL_TEXT = exports.HEADING_6 = exports.HEADING_5 = exports.HEADING_4 = exports.HEADING_3 = exports.HEADING_2 = exports.HEADING_1 = exports.HEADINGS_BY_NAME = exports.HEADINGS_BY_LEVEL = exports.FORMATTING_NODE_TYPES = exports.FORMATTING_MARK_TYPES = exports.CODE_BLOCK = exports.BLOCK_QUOTE = exports.ALL_BLOCK_TYPES = void 0;
+exports.toolbarBlockTypesWithRank = exports.getBlockTypesInDropdown = exports.WRAPPER_BLOCK_TYPES = exports.TEXT_BLOCK_TYPES = exports.PANEL = exports.OTHER = exports.NORMAL_TEXT = exports.HEADING_6 = exports.HEADING_5 = exports.HEADING_4 = exports.HEADING_3 = exports.HEADING_2 = exports.HEADING_1 = exports.HEADINGS_BY_NAME = exports.HEADINGS_BY_LEVEL = exports.FORMATTING_NODE_TYPES = exports.FORMATTING_MARK_TYPES = exports.CODE_BLOCK = exports.BLOCK_QUOTE = exports.ALL_BLOCK_TYPES = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+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"));
@@ -16,6 +19,8 @@ var _textHeadingTwo = _interopRequireDefault(require("@atlaskit/icon-lab/core/te
 var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _icons = require("./ui/ToolbarBlockType/icons");
+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 NORMAL_TEXT = exports.NORMAL_TEXT = {
   name: 'normal',
   title: _messages.blockTypeMessages.normal,
@@ -114,6 +119,56 @@ var OTHER = exports.OTHER = {
   nodeName: ''
 };
 var TEXT_BLOCK_TYPES = exports.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 || {});
+var toolbarBlockTypesWithRank = exports.toolbarBlockTypesWithRank = function toolbarBlockTypesWithRank() {
+  return {
+    normal: _objectSpread(_objectSpread({}, NORMAL_TEXT), {}, {
+      toolbarRank: _toolbar.TEXT_STYLES_MENU_SECTION_RANK[_toolbar.NORMAL_TEXT_MENU_ITEM.key],
+      toolbarKey: _toolbar.NORMAL_TEXT_MENU_ITEM.key
+    }),
+    heading1: _objectSpread(_objectSpread({}, HEADING_1), {}, {
+      toolbarRank: _toolbar.TEXT_STYLES_MENU_SECTION_RANK[_toolbar.HEADING_1_MENU_ITEM.key],
+      toolbarKey: _toolbar.HEADING_1_MENU_ITEM.key
+    }),
+    heading2: _objectSpread(_objectSpread({}, HEADING_2), {}, {
+      toolbarRank: _toolbar.TEXT_STYLES_MENU_SECTION_RANK[_toolbar.HEADING_2_MENU_ITEM.key],
+      toolbarKey: _toolbar.HEADING_2_MENU_ITEM.key
+    }),
+    heading3: _objectSpread(_objectSpread({}, HEADING_3), {}, {
+      toolbarRank: _toolbar.TEXT_STYLES_MENU_SECTION_RANK[_toolbar.HEADING_3_MENU_ITEM.key],
+      toolbarKey: _toolbar.HEADING_3_MENU_ITEM.key
+    }),
+    heading4: _objectSpread(_objectSpread({}, HEADING_4), {}, {
+      toolbarRank: _toolbar.TEXT_STYLES_MENU_SECTION_RANK[_toolbar.HEADING_4_MENU_ITEM.key],
+      toolbarKey: _toolbar.HEADING_4_MENU_ITEM.key
+    }),
+    heading5: _objectSpread(_objectSpread({}, HEADING_5), {}, {
+      toolbarRank: _toolbar.TEXT_STYLES_MENU_SECTION_RANK[_toolbar.HEADING_5_MENU_ITEM.key],
+      toolbarKey: _toolbar.HEADING_5_MENU_ITEM.key
+    }),
+    heading6: _objectSpread(_objectSpread({}, HEADING_6), {}, {
+      toolbarRank: _toolbar.TEXT_STYLES_MENU_SECTION_RANK[_toolbar.HEADING_6_MENU_ITEM.key],
+      toolbarKey: _toolbar.HEADING_6_MENU_ITEM.key
+    }),
+    blockquote: _objectSpread(_objectSpread({}, BLOCK_QUOTE), {}, {
+      icon: /*#__PURE__*/_react.default.createElement(_editorToolbar.QuoteIcon, {
+        label: ""
+      }),
+      toolbarRank: _toolbar.TEXT_STYLES_MENU_SECTION_RANK[_toolbar.BLOCK_QUOTE_MENU_ITEM.key],
+      toolbarKey: _toolbar.BLOCK_QUOTE_MENU_ITEM.key
+    })
+  };
+};
 var FORMATTING_NODE_TYPES = exports.FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
 var FORMATTING_MARK_TYPES = exports.FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup', 'backgroundColor'];
 var WRAPPER_BLOCK_TYPES = exports.WRAPPER_BLOCK_TYPES = [BLOCK_QUOTE, CODE_BLOCK, PANEL];

package/dist/cjs/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/cjs/pm-plugins/ui/ToolbarBlockType/HeadingButton.js

@@ -0,0 +1,66 @@
+/* HeadingButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadingButton = void 0;
+require("./HeadingButton.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _compiled = require("@atlaskit/primitives/compiled");
+var headingSizeStylesMap = {
+  normal: "_11c82smr",
+  heading1: "_11c81c04",
+  heading2: "_11c8nf1z",
+  heading3: "_11c8lodh",
+  heading4: "_11c8nbxd",
+  heading5: "_11c8140y",
+  heading6: "_11c81vhk"
+};
+var shortcuts = {
+  normal: _keymaps.setNormalText,
+  heading1: _keymaps.toggleHeading1,
+  heading2: _keymaps.toggleHeading2,
+  heading3: _keymaps.toggleHeading3,
+  heading4: _keymaps.toggleHeading4,
+  heading5: _keymaps.toggleHeading5,
+  heading6: _keymaps.toggleHeading6
+};
+var HeadingButton = exports.HeadingButton = function HeadingButton(_ref) {
+  var blockType = _ref.blockType,
+    api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var currentBlockType = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.currentBlockType');
+  var availableBlockTypesInDropdown = (0, _useSharedPluginStateSelector.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, _analytics.INPUT_METHOD.TOOLBAR, fromBlockQuote));
+  };
+  var shortcut = (0, _keymaps.formatShortcut)(shortcuts[blockType.name]);
+  var isSelected = currentBlockType === blockType;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: blockType.icon,
+    elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    onClick: onClick,
+    isSelected: isSelected,
+    ariaKeyshortcuts: shortcut
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: headingSizeStylesMap[blockType.name]
+  }, formatMessage(blockType.title)));
+};

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuoteButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var QuoteButton = exports.QuoteButton = function QuoteButton(_ref) {
+  var blockType = _ref.blockType,
+    api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var availableBlockTypesInDropdown = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableBlockTypesInDropdown');
+  var currentBlockType = (0, _useSharedPluginStateSelector.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(_analytics.INPUT_METHOD.TOOLBAR));
+  };
+  var shortcut = (0, _keymaps.formatShortcut)(_keymaps.toggleBlockQuote);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: blockType.icon,
+    elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    onClick: onClick,
+    isSelected: currentBlockType === blockType,
+    ariaKeyshortcuts: shortcut
+  }, formatMessage(blockType.title));
+};

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextStylesMenuButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _blockTypes = require("../../block-types");
+var TextStylesMenuButton = exports.TextStylesMenuButton = function TextStylesMenuButton(_ref) {
+  var _Object$values$find;
+  var api = _ref.api,
+    children = _ref.children;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var blockTypesDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.blockTypesDisabled');
+  var currentBlockType = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.currentBlockType');
+  var CurrentIcon = (_Object$values$find = Object.values((0, _blockTypes.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.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.toolbarMessages.textStylesTooltip)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+    isDisabled: blockTypesDisabled,
+    iconBefore: CurrentIcon ? /*#__PURE__*/_react.default.createElement(CurrentIcon, {
+      label: "".concat(currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name, " ").concat(formatMessage(_messages.toolbarMessages.textStylesTooltip))
+    }) : /*#__PURE__*/_react.default.createElement(_editorToolbar.TextIcon, {
+      label: formatMessage(_messages.toolbarMessages.textStylesTooltip)
+    })
+  }, children));
+};

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _blockTypes = require("../block-types");
+var _HeadingButton = require("./ToolbarBlockType/HeadingButton");
+var _QuoteButton = require("./ToolbarBlockType/QuoteButton");
+var _TextStylesMenuButton = require("./ToolbarBlockType/TextStylesMenuButton");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+  var toolbarComponents = [{
+    type: _toolbar.TEXT_STYLES_GROUP.type,
+    key: _toolbar.TEXT_STYLES_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION.type,
+      key: _toolbar.TEXT_SECTION.key,
+      rank: _toolbar.TEXT_SECTION_RANK[_toolbar.TEXT_STYLES_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.TEXT_STYLES_MENU.type,
+    key: _toolbar.TEXT_STYLES_MENU.key,
+    parents: [{
+      type: _toolbar.TEXT_STYLES_GROUP.type,
+      key: _toolbar.TEXT_STYLES_GROUP.key,
+      rank: _toolbar.TEXT_STYLES_GROUP_RANK[_toolbar.TEXT_STYLES_MENU.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react.default.createElement(_TextStylesMenuButton.TextStylesMenuButton, {
+        api: api
+      }, children);
+    }
+  }, {
+    type: _toolbar.TEXT_STYLES_MENU_SECTION.type,
+    key: _toolbar.TEXT_STYLES_MENU_SECTION.key,
+    parents: [{
+      type: _toolbar.TEXT_STYLES_MENU.type,
+      key: _toolbar.TEXT_STYLES_MENU.key,
+      rank: _toolbar.TEXT_STYLES_MENU_RANK[_toolbar.TEXT_STYLES_MENU_SECTION.key]
+    }]
+  }];
+  Object.values((0, _blockTypes.toolbarBlockTypesWithRank)()).forEach(function (blockType) {
+    if (blockType.toolbarKey) {
+      var menuItem = {
+        type: 'menu-item',
+        key: blockType.toolbarKey,
+        parents: [{
+          type: _toolbar.TEXT_STYLES_MENU_SECTION.type,
+          key: _toolbar.TEXT_STYLES_MENU_SECTION.key,
+          rank: blockType.toolbarRank
+        }],
+        component: blockType.name === 'blockquote' ? function () {
+          return /*#__PURE__*/_react.default.createElement(_QuoteButton.QuoteButton, {
+            blockType: blockType,
+            api: api
+          });
+        } : function () {
+          return /*#__PURE__*/_react.default.createElement(_HeadingButton.HeadingButton, {
+            blockType: blockType,
+            api: api
+          });
+        }
+      };
+      toolbarComponents.push(menuItem);
+    }
+  });
+  return toolbarComponents;
+};

package/dist/es2019/blockTypePlugin.js

@@ -6,6 +6,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, insertBlockQuoteWithAnalytics, insertBlockQuoteWithAnalyticsCommand, setBlockTypeWithAnalytics } from './pm-plugins/commands/block-type';
 import inputRulePlugin from './pm-plugins/input-rule';
@@ -13,6 +14,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';
 const headingPluginOptions = ({
   formatMessage
 }, isAllowed, editorAnalyticsApi) => {
@@ -90,7 +92,6 @@ const blockTypePlugin = ({
   config: options,
   api
 }) => {
-  var _api$primaryToolbar;
   const primaryToolbarComponent = ({
     popupsMountPoint,
     popupsBoundariesElement,
@@ -114,10 +115,16 @@ const blockTypePlugin = ({
       shouldUseDefaultRole: false
     });
   };
-  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? 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 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+      name: 'blockType',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'blockType',
     nodes() {
@@ -194,33 +201,35 @@ const blockTypePlugin = ({
     },
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
     pluginsOptions: {
-      selectionToolbar: () => {
-        var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
-        const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
-        if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
-          exposure: true
-        })) {
-          const toolbarCustom = {
-            type: 'custom',
-            render: (view, _idx, _dispatchAnalyticsEvent) => {
-              if (!view) {
-                return;
-              }
-              return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
-                api: api
-              });
-            },
-            fallback: []
-          };
-          return {
-            isToolbarAbove: true,
-            items: [toolbarCustom],
-            rank: 8
-          };
-        } else {
-          return undefined;
+      ...(!expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) && {
+        selectionToolbar: () => {
+          var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+          const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
+          if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
+            exposure: true
+          })) {
+            const toolbarCustom = {
+              type: 'custom',
+              render: (view, _idx, _dispatchAnalyticsEvent) => {
+                if (!view) {
+                  return;
+                }
+                return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
+                  api: api
+                });
+              },
+              fallback: []
+            };
+            return {
+              isToolbarAbove: true,
+              items: [toolbarCustom],
+              rank: 8
+            };
+          } else {
+            return undefined;
+          }
         }
-      },
+      }),
       ...(editorExperiment('platform_editor_insertion', 'control') && {
         quickInsert: intl => {
           var _api$analytics7, _api$analytics8;

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

@@ -1,5 +1,7 @@
 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 +109,62 @@ export const OTHER = {
   nodeName: ''
 };
 export const 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 const toolbarBlockTypesWithRank = () => ({
+  normal: {
+    ...NORMAL_TEXT,
+    toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[NORMAL_TEXT_MENU_ITEM.key],
+    toolbarKey: NORMAL_TEXT_MENU_ITEM.key
+  },
+  heading1: {
+    ...HEADING_1,
+    toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_1_MENU_ITEM.key],
+    toolbarKey: HEADING_1_MENU_ITEM.key
+  },
+  heading2: {
+    ...HEADING_2,
+    toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_2_MENU_ITEM.key],
+    toolbarKey: HEADING_2_MENU_ITEM.key
+  },
+  heading3: {
+    ...HEADING_3,
+    toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_3_MENU_ITEM.key],
+    toolbarKey: HEADING_3_MENU_ITEM.key
+  },
+  heading4: {
+    ...HEADING_4,
+    toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_4_MENU_ITEM.key],
+    toolbarKey: HEADING_4_MENU_ITEM.key
+  },
+  heading5: {
+    ...HEADING_5,
+    toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_5_MENU_ITEM.key],
+    toolbarKey: HEADING_5_MENU_ITEM.key
+  },
+  heading6: {
+    ...HEADING_6,
+    toolbarRank: TEXT_STYLES_MENU_SECTION_RANK[HEADING_6_MENU_ITEM.key],
+    toolbarKey: HEADING_6_MENU_ITEM.key
+  },
+  blockquote: {
+    ...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 const FORMATTING_NODE_TYPES = ['heading', 'blockquote'];
 export const FORMATTING_MARK_TYPES = ['em', 'code', 'strike', 'strong', 'underline', 'textColor', 'subsup', 'backgroundColor'];
 export const WRAPPER_BLOCK_TYPES = [BLOCK_QUOTE, CODE_BLOCK, PANEL];

package/dist/es2019/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/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)));
+};