@atlaskit/editor-plugin-block-type 3.2.2 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-block-type
 
+## 3.4.0
+
+### Minor Changes
+
+-   [#101406](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101406)
+    [`6daffd65aec4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6daffd65aec4) -
+    [ED-23298] Extract primary toolbar components to editor plugin to allow for custom ordering
+
+### Patch Changes
+
+-   [#102478](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102478)
+    [`3378951608b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3378951608b0) -
+    [ED-23332] Update adf-schema package to 36.10.1
+-   Updated dependencies
+
+## 3.3.0
+
+### Minor Changes
+
+-   [#102243](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102243)
+    [`cfc95dac3d82`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cfc95dac3d82) -
+    Use new paragraph and heading NodeSpecs
+
 ## 3.2.2
 
 ### Patch Changes

package/dist/cjs/plugin/index.js

@@ -104,13 +104,33 @@ var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed,
 var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3) {
   var options = _ref3.config,
     api = _ref3.api;
+  var primaryToolbarComponent = function primaryToolbarComponent(_ref4) {
+    var popupsMountPoint = _ref4.popupsMountPoint,
+      popupsBoundariesElement = _ref4.popupsBoundariesElement,
+      popupsScrollableElement = _ref4.popupsScrollableElement,
+      toolbarSize = _ref4.toolbarSize,
+      disabled = _ref4.disabled,
+      isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing;
+    var isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < _types.ToolbarSize.XXL : toolbarSize < _types.ToolbarSize.XL;
+    return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
+      isSmall: isSmall,
+      disabled: disabled,
+      isToolbarReducedSpacing: isToolbarReducedSpacing,
+      api: api,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      shouldUseDefaultRole: false
+    });
+  };
   return {
     name: 'blockType',
     nodes: function nodes() {
       var blockquoteNode = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-list-in-blockquote') ? _adfSchema.blockquoteWithList : _adfSchema.blockquote;
+      var headingNode = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-localid-for-paragraph-in-stage-0_cby7g') ? _adfSchema.headingStage0 : _adfSchema.heading;
       var nodes = [{
         name: 'heading',
-        node: _adfSchema.heading
+        node: headingNode
       }, {
         name: 'blockquote',
         node: blockquoteNode
@@ -129,16 +149,16 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
     pmPlugins: function pmPlugins() {
       return [{
         name: 'blockType',
-        plugin: function plugin(_ref4) {
-          var dispatch = _ref4.dispatch;
+        plugin: function plugin(_ref5) {
+          var dispatch = _ref5.dispatch;
           return (0, _main.createPlugin)(api, dispatch, options && options.lastNodeMustBeParagraph);
         }
       }, {
         name: 'blockTypeInputRule',
-        plugin: function plugin(_ref5) {
+        plugin: function plugin(_ref6) {
           var _api$analytics;
-          var schema = _ref5.schema,
-            featureFlags = _ref5.featureFlags;
+          var schema = _ref6.schema,
+            featureFlags = _ref6.featureFlags;
           return (0, _inputRule.default)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, schema, featureFlags);
         }
       },
@@ -146,10 +166,10 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
       // plugin as it is currently swallowing right/down arrow events inside tables
       {
         name: 'blockTypeKeyMap',
-        plugin: function plugin(_ref6) {
+        plugin: function plugin(_ref7) {
           var _api$analytics2;
-          var schema = _ref6.schema,
-            featureFlags = _ref6.featureFlags;
+          var schema = _ref7.schema,
+            featureFlags = _ref7.featureFlags;
           return (0, _keymap.default)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, schema, featureFlags);
         }
       }];
@@ -172,25 +192,14 @@ var blockTypePlugin = exports.blockTypePlugin = function blockTypePlugin(_ref3)
       }
       return _main.pluginKey.getState(editorState);
     },
-    primaryToolbarComponent: function primaryToolbarComponent(_ref7) {
-      var popupsMountPoint = _ref7.popupsMountPoint,
-        popupsBoundariesElement = _ref7.popupsBoundariesElement,
-        popupsScrollableElement = _ref7.popupsScrollableElement,
-        toolbarSize = _ref7.toolbarSize,
-        disabled = _ref7.disabled,
-        isToolbarReducedSpacing = _ref7.isToolbarReducedSpacing;
-      var isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < _types.ToolbarSize.XXL : toolbarSize < _types.ToolbarSize.XL;
-      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
-        isSmall: isSmall,
-        disabled: disabled,
-        isToolbarReducedSpacing: isToolbarReducedSpacing,
-        api: api,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        shouldUseDefaultRole: false
-      });
+    usePluginHook: function usePluginHook() {
+      var _api$core, _api$primaryToolbar;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'blockType',
+        component: primaryToolbarComponent
+      }));
     },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
     pluginsOptions: {
       quickInsert: function quickInsert(intl) {
         var _api$analytics5, _api$analytics6;

package/dist/cjs/plugin/ui/PrimaryToolbarComponent.js

@@ -33,6 +33,7 @@ function PrimaryToolbarComponent(_ref) {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
-    shouldUseDefaultRole: shouldUseDefaultRole
+    shouldUseDefaultRole: shouldUseDefaultRole,
+    api: api
   });
 }

package/dist/cjs/plugin/ui/ToolbarBlockType/index.js

@@ -127,7 +127,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         blockTypesDisabled = _this$props$pluginSta2.blockTypesDisabled,
         availableBlockTypes = _this$props$pluginSta2.availableBlockTypes,
         shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
-        formatMessage = _this$props.intl.formatMessage;
+        formatMessage = _this$props.intl.formatMessage,
+        api = _this$props.api;
       var isHeadingDisabled = !availableBlockTypes.some(function (blockType) {
         return blockType.nodeName === 'heading';
       });
@@ -177,7 +178,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
             formatMessage: formatMessage,
             "aria-expanded": active,
             blockTypeName: currentBlockType.name
-          })), (0, _react2.jsx)("span", {
+          })), !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _react2.jsx)("span", {
             // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
             css: _styles.separatorStyles
           }))

package/dist/es2019/plugin/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { blockquote, blockquoteWithList, hardBreak, heading } from '@atlaskit/adf-schema';
+import { blockquote, blockquoteWithList, hardBreak, heading, headingStage0 } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { keymap, toggleBlockQuote, tooltip } from '@atlaskit/editor-common/keymaps';
 import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
@@ -88,81 +88,15 @@ const blockquotePluginOptions = ({
 const blockTypePlugin = ({
   config: options,
   api
-}) => ({
-  name: 'blockType',
-  nodes() {
-    const blockquoteNode = getBooleanFF('platform.editor.allow-list-in-blockquote') ? blockquoteWithList : blockquote;
-    const nodes = [{
-      name: 'heading',
-      node: heading
-    }, {
-      name: 'blockquote',
-      node: blockquoteNode
-    }, {
-      name: 'hardBreak',
-      node: hardBreak
-    }];
-    if (options && options.allowBlockType) {
-      const exclude = options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-      return nodes.filter(node => exclude.indexOf(node.name) === -1);
-    }
-    return nodes;
-  },
-  pmPlugins() {
-    return [{
-      name: 'blockType',
-      plugin: ({
-        dispatch
-      }) => createPlugin(api, dispatch, options && options.lastNodeMustBeParagraph)
-    }, {
-      name: 'blockTypeInputRule',
-      plugin: ({
-        schema,
-        featureFlags
-      }) => {
-        var _api$analytics;
-        return inputRulePlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, schema, featureFlags);
-      }
-    },
-    // Needs to be lower priority than editor-tables.tableEditing
-    // plugin as it is currently swallowing right/down arrow events inside tables
-    {
-      name: 'blockTypeKeyMap',
-      plugin: ({
-        schema,
-        featureFlags
-      }) => {
-        var _api$analytics2;
-        return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, schema, featureFlags);
-      }
-    }];
-  },
-  actions: {
-    insertBlockQuote(inputMethod) {
-      var _api$analytics3;
-      return insertBlockQuoteWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
-    }
-  },
-  commands: {
-    setTextLevel(level, inputMethod) {
-      var _api$analytics4;
-      return setBlockTypeWithAnalytics(level, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
-    }
-  },
-  getSharedState(editorState) {
-    if (!editorState) {
-      return;
-    }
-    return pluginKey.getState(editorState);
-  },
-  primaryToolbarComponent({
+}) => {
+  const primaryToolbarComponent = ({
     popupsMountPoint,
     popupsBoundariesElement,
     popupsScrollableElement,
     toolbarSize,
     disabled,
     isToolbarReducedSpacing
-  }) {
+  }) => {
     const isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < ToolbarSize.XXL : toolbarSize < ToolbarSize.XL;
     return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
       isSmall: isSmall,
@@ -174,14 +108,91 @@ const blockTypePlugin = ({
       popupsScrollableElement: popupsScrollableElement,
       shouldUseDefaultRole: false
     });
-  },
-  pluginsOptions: {
-    quickInsert: intl => {
-      var _api$analytics5, _api$analytics6;
-      const exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
-      return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)];
+  };
+  return {
+    name: 'blockType',
+    nodes() {
+      const blockquoteNode = getBooleanFF('platform.editor.allow-list-in-blockquote') ? blockquoteWithList : blockquote;
+      const headingNode = getBooleanFF('platform.editor.enable-localid-for-paragraph-in-stage-0_cby7g') ? headingStage0 : heading;
+      const nodes = [{
+        name: 'heading',
+        node: headingNode
+      }, {
+        name: 'blockquote',
+        node: blockquoteNode
+      }, {
+        name: 'hardBreak',
+        node: hardBreak
+      }];
+      if (options && options.allowBlockType) {
+        const exclude = options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
+        return nodes.filter(node => exclude.indexOf(node.name) === -1);
+      }
+      return nodes;
+    },
+    pmPlugins() {
+      return [{
+        name: 'blockType',
+        plugin: ({
+          dispatch
+        }) => createPlugin(api, dispatch, options && options.lastNodeMustBeParagraph)
+      }, {
+        name: 'blockTypeInputRule',
+        plugin: ({
+          schema,
+          featureFlags
+        }) => {
+          var _api$analytics;
+          return inputRulePlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, schema, featureFlags);
+        }
+      },
+      // Needs to be lower priority than editor-tables.tableEditing
+      // plugin as it is currently swallowing right/down arrow events inside tables
+      {
+        name: 'blockTypeKeyMap',
+        plugin: ({
+          schema,
+          featureFlags
+        }) => {
+          var _api$analytics2;
+          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, schema, featureFlags);
+        }
+      }];
+    },
+    actions: {
+      insertBlockQuote(inputMethod) {
+        var _api$analytics3;
+        return insertBlockQuoteWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
+      }
+    },
+    commands: {
+      setTextLevel(level, inputMethod) {
+        var _api$analytics4;
+        return setBlockTypeWithAnalytics(level, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
+      }
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return;
+      }
+      return pluginKey.getState(editorState);
+    },
+    usePluginHook: () => {
+      var _api$core, _api$primaryToolbar;
+      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$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'blockType',
+        component: primaryToolbarComponent
+      }));
+    },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
+    pluginsOptions: {
+      quickInsert: intl => {
+        var _api$analytics5, _api$analytics6;
+        const exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
+        return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions)];
+      }
     }
-  }
-});
+  };
+};
 export { blockTypePlugin };
 export { pluginKey } from './pm-plugins/main';

package/dist/es2019/plugin/ui/PrimaryToolbarComponent.js

@@ -28,6 +28,7 @@ export function PrimaryToolbarComponent({
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
-    shouldUseDefaultRole: shouldUseDefaultRole
+    shouldUseDefaultRole: shouldUseDefaultRole,
+    api: api
   });
 }

package/dist/es2019/plugin/ui/ToolbarBlockType/index.js

@@ -111,7 +111,8 @@ class ToolbarBlockType extends React.PureComponent {
       shouldUseDefaultRole,
       intl: {
         formatMessage
-      }
+      },
+      api
     } = this.props;
     const isHeadingDisabled = !availableBlockTypes.some(blockType => blockType.nodeName === 'heading');
     if (isHeadingDisabled) {
@@ -157,7 +158,7 @@ class ToolbarBlockType extends React.PureComponent {
           formatMessage: formatMessage,
           "aria-expanded": active,
           blockTypeName: currentBlockType.name
-        })), jsx("span", {
+        })), !(api !== null && api !== void 0 && api.primaryToolbar) && jsx("span", {
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
           css: separatorStyles
         }))

package/dist/esm/plugin/index.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
-import { blockquote, blockquoteWithList, hardBreak, heading } from '@atlaskit/adf-schema';
+import { blockquote, blockquoteWithList, hardBreak, heading, headingStage0 } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { keymap, toggleBlockQuote, tooltip } from '@atlaskit/editor-common/keymaps';
 import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
@@ -91,13 +91,33 @@ var blockquotePluginOptions = function blockquotePluginOptions(_ref2, isAllowed,
 var blockTypePlugin = function blockTypePlugin(_ref3) {
   var options = _ref3.config,
     api = _ref3.api;
+  var primaryToolbarComponent = function primaryToolbarComponent(_ref4) {
+    var popupsMountPoint = _ref4.popupsMountPoint,
+      popupsBoundariesElement = _ref4.popupsBoundariesElement,
+      popupsScrollableElement = _ref4.popupsScrollableElement,
+      toolbarSize = _ref4.toolbarSize,
+      disabled = _ref4.disabled,
+      isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing;
+    var isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < ToolbarSize.XXL : toolbarSize < ToolbarSize.XL;
+    return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+      isSmall: isSmall,
+      disabled: disabled,
+      isToolbarReducedSpacing: isToolbarReducedSpacing,
+      api: api,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      shouldUseDefaultRole: false
+    });
+  };
   return {
     name: 'blockType',
     nodes: function nodes() {
       var blockquoteNode = getBooleanFF('platform.editor.allow-list-in-blockquote') ? blockquoteWithList : blockquote;
+      var headingNode = getBooleanFF('platform.editor.enable-localid-for-paragraph-in-stage-0_cby7g') ? headingStage0 : heading;
       var nodes = [{
         name: 'heading',
-        node: heading
+        node: headingNode
       }, {
         name: 'blockquote',
         node: blockquoteNode
@@ -116,16 +136,16 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'blockType',
-        plugin: function plugin(_ref4) {
-          var dispatch = _ref4.dispatch;
+        plugin: function plugin(_ref5) {
+          var dispatch = _ref5.dispatch;
           return createPlugin(api, dispatch, options && options.lastNodeMustBeParagraph);
         }
       }, {
         name: 'blockTypeInputRule',
-        plugin: function plugin(_ref5) {
+        plugin: function plugin(_ref6) {
           var _api$analytics;
-          var schema = _ref5.schema,
-            featureFlags = _ref5.featureFlags;
+          var schema = _ref6.schema,
+            featureFlags = _ref6.featureFlags;
           return inputRulePlugin(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, schema, featureFlags);
         }
       },
@@ -133,10 +153,10 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
       // plugin as it is currently swallowing right/down arrow events inside tables
       {
         name: 'blockTypeKeyMap',
-        plugin: function plugin(_ref6) {
+        plugin: function plugin(_ref7) {
           var _api$analytics2;
-          var schema = _ref6.schema,
-            featureFlags = _ref6.featureFlags;
+          var schema = _ref7.schema,
+            featureFlags = _ref7.featureFlags;
           return keymapPlugin(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, schema, featureFlags);
         }
       }];
@@ -159,25 +179,14 @@ var blockTypePlugin = function blockTypePlugin(_ref3) {
       }
       return pluginKey.getState(editorState);
     },
-    primaryToolbarComponent: function primaryToolbarComponent(_ref7) {
-      var popupsMountPoint = _ref7.popupsMountPoint,
-        popupsBoundariesElement = _ref7.popupsBoundariesElement,
-        popupsScrollableElement = _ref7.popupsScrollableElement,
-        toolbarSize = _ref7.toolbarSize,
-        disabled = _ref7.disabled,
-        isToolbarReducedSpacing = _ref7.isToolbarReducedSpacing;
-      var isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < ToolbarSize.XXL : toolbarSize < ToolbarSize.XL;
-      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
-        isSmall: isSmall,
-        disabled: disabled,
-        isToolbarReducedSpacing: isToolbarReducedSpacing,
-        api: api,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        shouldUseDefaultRole: false
-      });
+    usePluginHook: function usePluginHook() {
+      var _api$core, _api$primaryToolbar;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.commands.registerComponent({
+        name: 'blockType',
+        component: primaryToolbarComponent
+      }));
     },
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
     pluginsOptions: {
       quickInsert: function quickInsert(intl) {
         var _api$analytics5, _api$analytics6;

package/dist/esm/plugin/ui/PrimaryToolbarComponent.js

@@ -26,6 +26,7 @@ export function PrimaryToolbarComponent(_ref) {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
-    shouldUseDefaultRole: shouldUseDefaultRole
+    shouldUseDefaultRole: shouldUseDefaultRole,
+    api: api
   });
 }

package/dist/esm/plugin/ui/ToolbarBlockType/index.js

@@ -121,7 +121,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         blockTypesDisabled = _this$props$pluginSta2.blockTypesDisabled,
         availableBlockTypes = _this$props$pluginSta2.availableBlockTypes,
         shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
-        formatMessage = _this$props.intl.formatMessage;
+        formatMessage = _this$props.intl.formatMessage,
+        api = _this$props.api;
       var isHeadingDisabled = !availableBlockTypes.some(function (blockType) {
         return blockType.nodeName === 'heading';
       });
@@ -171,7 +172,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
             formatMessage: formatMessage,
             "aria-expanded": active,
             blockTypeName: currentBlockType.name
-          })), jsx("span", {
+          })), !(api !== null && api !== void 0 && api.primaryToolbar) && jsx("span", {
             // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
             css: separatorStyles
           }))

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

@@ -1,12 +1,16 @@
 import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
-import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { TextBlockTypes } from './block-types';
 import type { InputMethod } from './commands/block-type';
 import type { BlockTypeState } from './pm-plugins/main';
 import type { BlockTypePluginOptions } from './types';
 export type BlockTypePlugin = NextEditorPlugin<'blockType', {
     pluginConfiguration: BlockTypePluginOptions | undefined;
-    dependencies: [OptionalPlugin<typeof analyticsPlugin>];
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<PrimaryToolbarPlugin>
+    ];
     sharedState: BlockTypeState | undefined;
     actions: {
         insertBlockQuote: (inputMethod: InputMethod) => Command;

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

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TextBlockTypes } from '../../block-types';
+import type { BlockTypePlugin } from '../../index';
 import type { BlockTypeState } from '../../pm-plugins/main';
 import type { BlockType } from '../../types';
 export type DropdownItem = MenuItem & {
@@ -20,6 +22,7 @@ export interface Props {
     editorView?: EditorView;
     setTextLevel: (type: TextBlockTypes) => void;
     shouldUseDefaultRole?: boolean;
+    api: ExtractInjectionAPI<BlockTypePlugin> | undefined;
 }
 export interface State {
     active: boolean;

package/dist/types-ts4.5/plugin/index.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 { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { TextBlockTypes } from './block-types';
 import type { InputMethod } from './commands/block-type';
 import type { BlockTypeState } from './pm-plugins/main';
@@ -7,7 +8,8 @@ import type { BlockTypePluginOptions } from './types';
 export type BlockTypePlugin = NextEditorPlugin<'blockType', {
     pluginConfiguration: BlockTypePluginOptions | undefined;
     dependencies: [
-        OptionalPlugin<typeof analyticsPlugin>
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<PrimaryToolbarPlugin>
     ];
     sharedState: BlockTypeState | undefined;
     actions: {

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

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TextBlockTypes } from '../../block-types';
+import type { BlockTypePlugin } from '../../index';
 import type { BlockTypeState } from '../../pm-plugins/main';
 import type { BlockType } from '../../types';
 export type DropdownItem = MenuItem & {
@@ -20,6 +22,7 @@ export interface Props {
     editorView?: EditorView;
     setTextLevel: (type: TextBlockTypes) => void;
     shouldUseDefaultRole?: boolean;
+    api: ExtractInjectionAPI<BlockTypePlugin> | undefined;
 }
 export interface State {
     active: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-block-type",
-  "version": "3.2.2",
+  "version": "3.4.0",
   "description": "BlockType plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,17 +35,18 @@
     "./styles": "./src/styles.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.8.0",
-    "@atlaskit/editor-common": "^80.4.0",
+    "@atlaskit/adf-schema": "^36.10.7",
+    "@atlaskit/editor-common": "^81.0.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
+    "@atlaskit/editor-plugin-primary-toolbar": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/editor-shared-styles": "^2.11.0",
     "@atlaskit/editor-tables": "^2.7.0",
-    "@atlaskit/icon": "^22.2.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/prosemirror-input-rules": "^3.1.0",
     "@atlaskit/theme": "^12.8.0",
-    "@atlaskit/tokens": "^1.48.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -105,6 +106,9 @@
   "platform-feature-flags": {
     "platform.editor.allow-list-in-blockquote": {
       "type": "boolean"
+    },
+    "platform.editor.enable-localid-for-paragraph-in-stage-0_cby7g": {
+      "type": "boolean"
     }
   }
 }