@atlaskit/editor-plugin-block-type 3.3.0 → 3.5.0

package/LICENSE.md

@@ -1,13 +1,11 @@
 Copyright 2023 Atlassian Pty Ltd
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/dist/cjs/plugin/index.js

@@ -104,14 +104,32 @@ 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: headingNode
+        node: _adfSchema.heading
       }, {
         name: 'blockquote',
         node: blockquoteNode
@@ -130,16 +148,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);
         }
       },
@@ -147,10 +165,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);
         }
       }];
@@ -173,25 +191,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/styles.js

@@ -11,5 +11,5 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _templateObject;
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Imports are not safe in an object syntax
 var blocktypeStyles = exports.blocktypeStyles = function blocktypeStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)());
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", ";\n\t\t", ";\n\t}\n"])), _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)());
 };

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/blocktype-button.js

@@ -25,7 +25,9 @@ var BlockTypeButton = exports.BlockTypeButton = function BlockTypeButton(props)
   var toolipTextStyles = props.formatMessage(_messages.toolbarMessages.textStylesTooltip);
   return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
     spacing: props.isReducedSpacing ? 'none' : 'default',
-    selected: props.selected,
+    selected: props.selected
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "block-type-btn",
     disabled: props.disabled,
     onClick: props.onClick,

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
           }))
@@ -198,7 +199,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/cjs/plugin/ui/ToolbarBlockType/styled.js

@@ -24,7 +24,8 @@ var blockTypeMenuItemStyle = exports.blockTypeMenuItemStyle = function blockType
   };
 };
 var keyboardShortcut = exports.keyboardShortcut = (0, _react.css)(_shortcut.shortcutStyle, {
-  marginLeft: "var(--ds-space-200, 16px)"
+  marginLeft: "var(--ds-space-200, 16px)",
+  color: "var(--ds-icon, ".concat(_colors.N400, ")")
 });
 var keyboardShortcutSelect = exports.keyboardShortcutSelect = (0, _react.css)({
   color: "var(--ds-icon, ".concat(_colors.N400, ")")

package/dist/es2019/plugin/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { blockquote, blockquoteWithList, hardBreak, heading, headingStage0 } from '@atlaskit/adf-schema';
+import { blockquote, blockquoteWithList, hardBreak, heading } 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,82 +88,15 @@ const blockquotePluginOptions = ({
 const blockTypePlugin = ({
   config: options,
   api
-}) => ({
-  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);
-  },
-  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,
@@ -175,14 +108,90 @@ 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 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);
+    },
+    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/styles.js

@@ -3,8 +3,8 @@ import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-c
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Imports are not safe in an object syntax
 export const blocktypeStyles = () => css`
-  .ProseMirror {
-    ${blockquoteSharedStyles};
-    ${headingsSharedStyles()};
-  }
+	.ProseMirror {
+		${blockquoteSharedStyles};
+		${headingsSharedStyles()};
+	}
 `;

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/blocktype-button.js

@@ -17,7 +17,9 @@ export const BlockTypeButton = props => {
   const toolipTextStyles = props.formatMessage(toolbarMessages.textStylesTooltip);
   return jsx(ToolbarButton, {
     spacing: props.isReducedSpacing ? 'none' : 'default',
-    selected: props.selected,
+    selected: props.selected
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "block-type-btn",
     disabled: props.disabled,
     onClick: props.onClick,

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
         }))
@@ -178,7 +179,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/es2019/plugin/ui/ToolbarBlockType/styled.js

@@ -15,7 +15,8 @@ export const blockTypeMenuItemStyle = (tagName, selected) => {
   }, selectedStyle);
 };
 export const keyboardShortcut = css(shortcutStyle, {
-  marginLeft: "var(--ds-space-200, 16px)"
+  marginLeft: "var(--ds-space-200, 16px)",
+  color: `var(--ds-icon, ${N400})`
 });
 export const keyboardShortcutSelect = css({
   color: `var(--ds-icon, ${N400})`

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, headingStage0 } from '@atlaskit/adf-schema';
+import { blockquote, blockquoteWithList, hardBreak, heading } 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,14 +91,32 @@ 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: headingNode
+        node: heading
       }, {
         name: 'blockquote',
         node: blockquoteNode
@@ -117,16 +135,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);
         }
       },
@@ -134,10 +152,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);
         }
       }];
@@ -160,25 +178,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/styles.js

@@ -5,5 +5,5 @@ import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-c
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Imports are not safe in an object syntax
 export var blocktypeStyles = function blocktypeStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n    ", ";\n  }\n"])), blockquoteSharedStyles, headingsSharedStyles());
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", ";\n\t\t", ";\n\t}\n"])), blockquoteSharedStyles, headingsSharedStyles());
 };

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/blocktype-button.js

@@ -17,7 +17,9 @@ export var BlockTypeButton = function BlockTypeButton(props) {
   var toolipTextStyles = props.formatMessage(toolbarMessages.textStylesTooltip);
   return jsx(ToolbarButton, {
     spacing: props.isReducedSpacing ? 'none' : 'default',
-    selected: props.selected,
+    selected: props.selected
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "block-type-btn",
     disabled: props.disabled,
     onClick: props.onClick,

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
           }))
@@ -192,7 +193,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/esm/plugin/ui/ToolbarBlockType/styled.js

@@ -17,7 +17,8 @@ export var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, sel
   };
 };
 export var keyboardShortcut = css(shortcutStyle, {
-  marginLeft: "var(--ds-space-200, 16px)"
+  marginLeft: "var(--ds-space-200, 16px)",
+  color: "var(--ds-icon, ".concat(N400, ")")
 });
 export var keyboardShortcutSelect = css({
   color: "var(--ds-icon, ".concat(N400, ")")