@atlaskit/editor-plugin-block-type 5.1.12 → 5.1.14

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import ToolbarBlockType from './ToolbarBlockType';
 export function PrimaryToolbarComponent({
   api,
@@ -14,7 +16,39 @@ export function PrimaryToolbarComponent({
 }) {
   const {
     blockTypeState
-  } = useSharedPluginState(api, ['blockType']);
+  } = useSharedPluginState(api, ['blockType'], {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+  });
+
+  // currentBlockType
+  const currentBlockTypeSelector = useSharedPluginStateSelector(api, 'blockType.currentBlockType', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const currentBlockType = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? currentBlockTypeSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType;
+
+  // blockTypesDisabled
+  const blockTypesDisabledSelector = useSharedPluginStateSelector(api, 'blockType.blockTypesDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const blockTypesDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? blockTypesDisabledSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled;
+
+  // availableBlockTypes
+  const availableBlockTypesSelector = useSharedPluginStateSelector(api, 'blockType.availableBlockTypes', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const availableBlockTypes = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes;
+
+  // availableBlockTypesInDropdown
+  const availableBlockTypesInDropdownSelector = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const availableBlockTypesInDropdown = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesInDropdownSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown;
+
+  // formattingIsPresent
+  const formattingIsPresentSelector = useSharedPluginStateSelector(api, 'blockType.formattingIsPresent', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  const formattingIsPresent = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? formattingIsPresentSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent;
   const boundSetBlockType = (name, fromBlockQuote) => {
     var _api$core, _api$blockType, _api$blockType$comman;
     return api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockType = api.blockType) === null || _api$blockType === void 0 ? void 0 : (_api$blockType$comman = _api$blockType.commands) === null || _api$blockType$comman === void 0 ? void 0 : _api$blockType$comman.setTextLevel(name, INPUT_METHOD.TOOLBAR, fromBlockQuote));
@@ -33,11 +67,12 @@ export function PrimaryToolbarComponent({
     isReducedSpacing: isToolbarReducedSpacing,
     setTextLevel: boundSetBlockType,
     wrapBlockQuote: wrapBlockQuote,
-    clearFormatting: clearFormatting
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    pluginState: blockTypeState,
+    clearFormatting: clearFormatting,
+    currentBlockType: currentBlockType,
+    blockTypesDisabled: blockTypesDisabled,
+    availableBlockTypes: availableBlockTypes,
+    availableBlockTypesInDropdown: availableBlockTypesInDropdown,
+    formattingIsPresent: formattingIsPresent,
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,

package/dist/es2019/pm-plugins/ui/ToolbarBlockType/blocktype-button.js

@@ -13,6 +13,7 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import TextIcon from '@atlaskit/icon/core/text';
 import { default as TextStyleIconLegacy } from '@atlaskit/icon/glyph/editor/text-style';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { NORMAL_TEXT } from '../../block-types';
@@ -38,6 +39,7 @@ export const BlockTypeButton = props => {
     color: "currentColor",
     LEGACY_fallbackIcon: TextStyleIconLegacy
   });
+  const chevronIconSpacing = props.isSmall && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') ? 'spacious' : 'none';
   return jsx(ToolbarButton, {
     spacing: props.isReducedSpacing ? 'none' : 'default',
     selected: props.selected
@@ -59,6 +61,7 @@ export const BlockTypeButton = props => {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       css: expandIconContainerStyle
     }, jsx(ChevronDownIcon, {
+      spacing: chevronIconSpacing,
       label: "",
       color: "currentColor",
       LEGACY_margin: "0 0 0 -8px"

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

@@ -13,6 +13,7 @@ import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import TextIcon from '@atlaskit/icon/core/text';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -61,18 +62,17 @@ class ToolbarBlockType extends React.PureComponent {
       const {
         intl: {
           formatMessage
-        }
-      } = this.props;
-      const {
+        },
         currentBlockType,
         availableBlockTypesInDropdown,
         formattingIsPresent
-      } = this.props.pluginState;
-      const items = availableBlockTypesInDropdown.map((blockType, index) => {
+      } = this.props;
+      const items = (availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 ? availableBlockTypesInDropdown : []).map((blockType, index) => {
         const isActive = currentBlockType === blockType;
         const tagName = blockType.tagName || 'p';
         const Tag = tagName;
         const keyMap = findKeymapByDescription(blockType.title.defaultMessage);
+        const icon = fg('platform_editor_controls_patch_4') ? blockType === null || blockType === void 0 ? void 0 : blockType.icon : blockType.LEGACY_icon;
         const item = {
           content:
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -82,7 +82,7 @@ class ToolbarBlockType extends React.PureComponent {
           value: blockType,
           'aria-label': tooltip(keyMap, formatMessage(blockType.title)),
           key: `${blockType.name}-${index}`,
-          elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? blockType === null || blockType === void 0 ? void 0 : blockType.icon : undefined,
+          elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? icon : undefined,
           elemAfter:
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           jsx("div", {
@@ -92,7 +92,7 @@ class ToolbarBlockType extends React.PureComponent {
         };
         return item;
       });
-      if (availableBlockTypesInDropdown.map(blockType => blockType.name).includes('blockquote') && editorExperiment('platform_editor_controls', 'control')) {
+      if ((availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 ? availableBlockTypesInDropdown : []).map(blockType => blockType.name).includes('blockquote') && editorExperiment('platform_editor_controls', 'control')) {
         const clearFormattingItem = {
           content: jsx("div", null, jsx("p", null, toolbarMessages.clearFormatting.defaultMessage)),
           value: {
@@ -129,7 +129,8 @@ class ToolbarBlockType extends React.PureComponent {
         if (blockType.name === 'clearFormatting') {
           this.props.clearFormatting();
         } else {
-          const fromBlockQuote = this.props.pluginState.currentBlockType.name === 'blockquote';
+          var _this$props$currentBl;
+          const fromBlockQuote = ((_this$props$currentBl = this.props.currentBlockType) === null || _this$props$currentBl === void 0 ? void 0 : _this$props$currentBl.name) === 'blockquote';
           this.props.setTextLevel(blockType.name, fromBlockQuote);
         }
       }
@@ -171,12 +172,10 @@ class ToolbarBlockType extends React.PureComponent {
       popupsScrollableElement,
       isSmall,
       isReducedSpacing,
-      pluginState: {
-        currentBlockType,
-        blockTypesDisabled,
-        availableBlockTypes,
-        availableBlockTypesInDropdown
-      },
+      currentBlockType,
+      blockTypesDisabled,
+      availableBlockTypes = [],
+      availableBlockTypesInDropdown = [],
       shouldUseDefaultRole,
       intl: {
         formatMessage
@@ -187,7 +186,11 @@ class ToolbarBlockType extends React.PureComponent {
     if (isHeadingDisabled) {
       return null;
     }
-    const blockTypeTitles = availableBlockTypesInDropdown.filter(blockType => blockType.name === currentBlockType.name).map(blockType => blockType.title);
+    const blockTypeTitles = availableBlockTypesInDropdown.filter(blockType => blockType.name === (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name)).map(blockType => blockType.title);
+    const defaultIcon = fg('platform_editor_controls_patch_4') ? jsx(TextIcon, {
+      label: ""
+    }) : jsx(Text, null);
+    const currentIcon = fg('platform_editor_controls_patch_4') ? currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.icon : currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.LEGACY_icon;
     if (!this.props.isDisabled && !blockTypesDisabled) {
       const items = this.createItems();
       const button = jsx(BlockTypeButton, {
@@ -200,8 +203,8 @@ class ToolbarBlockType extends React.PureComponent {
         onKeyDown: this.handleTriggerByKeyboard,
         formatMessage: formatMessage,
         "aria-expanded": active,
-        blockTypeName: currentBlockType.name,
-        blockTypeIcon: (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.icon) || jsx(Text, null)
+        blockTypeName: currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name,
+        blockTypeIcon: currentIcon || defaultIcon
       });
       return jsx("span", {
         css: editorExperiment('platform_editor_blockquote_in_text_formatting_menu', true) ?
@@ -259,7 +262,7 @@ class ToolbarBlockType extends React.PureComponent {
         onKeyDown: this.handleTriggerByKeyboard,
         formatMessage: formatMessage,
         "aria-expanded": active,
-        blockTypeName: currentBlockType.name
+        blockTypeName: currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name
       }), !(api !== null && api !== void 0 && api.primaryToolbar) && jsx("span", {
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: separatorStyles

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

@@ -1,5 +1,12 @@
 import React from 'react';
 import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
+import TextHeadingFiveIcon from '@atlaskit/icon-lab/core/text-heading-five';
+import TextHeadingFourIcon from '@atlaskit/icon-lab/core/text-heading-four';
+import TextHeadingOneIcon from '@atlaskit/icon-lab/core/text-heading-one';
+import TextHeadingSixIcon from '@atlaskit/icon-lab/core/text-heading-six';
+import TextHeadingThreeIcon from '@atlaskit/icon-lab/core/text-heading-three';
+import TextHeadingTwoIcon from '@atlaskit/icon-lab/core/text-heading-two';
+import TextIcon from '@atlaskit/icon/core/text';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { Text, H1, H2, H3, H4, H5, H6 } from './ui/ToolbarBlockType/icons';
 export var NORMAL_TEXT = {
@@ -7,7 +14,10 @@ export var NORMAL_TEXT = {
   title: messages.normal,
   nodeName: 'paragraph',
   tagName: 'p',
-  icon: /*#__PURE__*/React.createElement(Text, null)
+  icon: /*#__PURE__*/React.createElement(TextIcon, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/React.createElement(Text, null)
 };
 export var HEADING_1 = {
   name: 'heading1',
@@ -15,7 +25,10 @@ export var HEADING_1 = {
   nodeName: 'heading',
   tagName: 'h1',
   level: 1,
-  icon: /*#__PURE__*/React.createElement(H1, null)
+  icon: /*#__PURE__*/React.createElement(TextHeadingOneIcon, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/React.createElement(H1, null)
 };
 export var HEADING_2 = {
   name: 'heading2',
@@ -23,7 +36,10 @@ export var HEADING_2 = {
   nodeName: 'heading',
   tagName: 'h2',
   level: 2,
-  icon: /*#__PURE__*/React.createElement(H2, null)
+  icon: /*#__PURE__*/React.createElement(TextHeadingTwoIcon, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/React.createElement(H2, null)
 };
 export var HEADING_3 = {
   name: 'heading3',
@@ -31,7 +47,10 @@ export var HEADING_3 = {
   nodeName: 'heading',
   tagName: 'h3',
   level: 3,
-  icon: /*#__PURE__*/React.createElement(H3, null)
+  icon: /*#__PURE__*/React.createElement(TextHeadingThreeIcon, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/React.createElement(H3, null)
 };
 export var HEADING_4 = {
   name: 'heading4',
@@ -39,7 +58,10 @@ export var HEADING_4 = {
   nodeName: 'heading',
   tagName: 'h4',
   level: 4,
-  icon: /*#__PURE__*/React.createElement(H4, null)
+  icon: /*#__PURE__*/React.createElement(TextHeadingFourIcon, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/React.createElement(H4, null)
 };
 export var HEADING_5 = {
   name: 'heading5',
@@ -47,7 +69,10 @@ export var HEADING_5 = {
   nodeName: 'heading',
   tagName: 'h5',
   level: 5,
-  icon: /*#__PURE__*/React.createElement(H5, null)
+  icon: /*#__PURE__*/React.createElement(TextHeadingFiveIcon, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/React.createElement(H5, null)
 };
 export var HEADING_6 = {
   name: 'heading6',
@@ -55,7 +80,10 @@ export var HEADING_6 = {
   nodeName: 'heading',
   tagName: 'h6',
   level: 6,
-  icon: /*#__PURE__*/React.createElement(H6, null)
+  icon: /*#__PURE__*/React.createElement(TextHeadingSixIcon, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/React.createElement(H6, null)
 };
 export var BLOCK_QUOTE = {
   name: 'blockquote',

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

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import ToolbarBlockType from './ToolbarBlockType';
 var FloatingToolbarSettings = {
@@ -11,8 +12,40 @@ var FloatingToolbarSettings = {
 };
 export function FloatingToolbarComponent(_ref) {
   var api = _ref.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['blockType']),
+  var _useSharedPluginState = useSharedPluginState(api, ['blockType'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     blockTypeState = _useSharedPluginState.blockTypeState;
+
+  // currentBlockType
+  var currentBlockTypeSelector = useSharedPluginStateSelector(api, 'blockType.currentBlockType', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var currentBlockType = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? currentBlockTypeSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType;
+
+  // blockTypesDisabled
+  var blockTypesDisabledSelector = useSharedPluginStateSelector(api, 'blockType.blockTypesDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var blockTypesDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? blockTypesDisabledSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled;
+
+  // availableBlockTypes
+  var availableBlockTypesSelector = useSharedPluginStateSelector(api, 'blockType.availableBlockTypes', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var availableBlockTypes = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes;
+
+  // availableBlockTypesInDropdown
+  var availableBlockTypesInDropdownSelector = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var availableBlockTypesInDropdown = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesInDropdownSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown;
+
+  // formattingIsPresent
+  var formattingIsPresentSelector = useSharedPluginStateSelector(api, 'blockType.formattingIsPresent', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var formattingIsPresent = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? formattingIsPresentSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent;
   var boundSetBlockType = useCallback(function (name) {
     var _api$core, _api$blockType;
     return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, INPUT_METHOD.FLOATING_TB));
@@ -29,11 +62,12 @@ export function FloatingToolbarComponent(_ref) {
     isSmall: FloatingToolbarSettings.isSmall,
     isDisabled: FloatingToolbarSettings.disabled,
     isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
-    setTextLevel: boundSetBlockType
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    pluginState: blockTypeState,
+    setTextLevel: boundSetBlockType,
+    currentBlockType: currentBlockType,
+    blockTypesDisabled: blockTypesDisabled,
+    availableBlockTypes: availableBlockTypes,
+    availableBlockTypesInDropdown: availableBlockTypesInDropdown,
+    formattingIsPresent: formattingIsPresent,
     wrapBlockQuote: wrapBlockQuote,
     clearFormatting: clearFormatting,
     shouldUseDefaultRole: FloatingToolbarSettings.shouldUseDefaultRole,

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import ToolbarBlockType from './ToolbarBlockType';
 export function PrimaryToolbarComponent(_ref) {
   var api = _ref.api,
@@ -11,8 +13,40 @@ export function PrimaryToolbarComponent(_ref) {
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
     shouldUseDefaultRole = _ref.shouldUseDefaultRole;
-  var _useSharedPluginState = useSharedPluginState(api, ['blockType']),
+  var _useSharedPluginState = useSharedPluginState(api, ['blockType'], {
+      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
+    }),
     blockTypeState = _useSharedPluginState.blockTypeState;
+
+  // currentBlockType
+  var currentBlockTypeSelector = useSharedPluginStateSelector(api, 'blockType.currentBlockType', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var currentBlockType = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? currentBlockTypeSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType;
+
+  // blockTypesDisabled
+  var blockTypesDisabledSelector = useSharedPluginStateSelector(api, 'blockType.blockTypesDisabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var blockTypesDisabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? blockTypesDisabledSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled;
+
+  // availableBlockTypes
+  var availableBlockTypesSelector = useSharedPluginStateSelector(api, 'blockType.availableBlockTypes', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var availableBlockTypes = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes;
+
+  // availableBlockTypesInDropdown
+  var availableBlockTypesInDropdownSelector = useSharedPluginStateSelector(api, 'blockType.availableBlockTypesInDropdown', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var availableBlockTypesInDropdown = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesInDropdownSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown;
+
+  // formattingIsPresent
+  var formattingIsPresentSelector = useSharedPluginStateSelector(api, 'blockType.formattingIsPresent', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var formattingIsPresent = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? formattingIsPresentSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent;
   var boundSetBlockType = function boundSetBlockType(name, fromBlockQuote) {
     var _api$core, _api$blockType;
     return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(api === null || api === void 0 || (_api$blockType = api.blockType) === null || _api$blockType === void 0 || (_api$blockType = _api$blockType.commands) === null || _api$blockType === void 0 ? void 0 : _api$blockType.setTextLevel(name, INPUT_METHOD.TOOLBAR, fromBlockQuote));
@@ -31,11 +65,12 @@ export function PrimaryToolbarComponent(_ref) {
     isReducedSpacing: isToolbarReducedSpacing,
     setTextLevel: boundSetBlockType,
     wrapBlockQuote: wrapBlockQuote,
-    clearFormatting: clearFormatting
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    pluginState: blockTypeState,
+    clearFormatting: clearFormatting,
+    currentBlockType: currentBlockType,
+    blockTypesDisabled: blockTypesDisabled,
+    availableBlockTypes: availableBlockTypes,
+    availableBlockTypesInDropdown: availableBlockTypesInDropdown,
+    formattingIsPresent: formattingIsPresent,
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,

package/dist/esm/pm-plugins/ui/ToolbarBlockType/blocktype-button.js

@@ -13,6 +13,7 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import TextIcon from '@atlaskit/icon/core/text';
 import { default as TextStyleIconLegacy } from '@atlaskit/icon/glyph/editor/text-style';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { NORMAL_TEXT } from '../../block-types';
@@ -38,6 +39,7 @@ export var BlockTypeButton = function BlockTypeButton(props) {
     color: "currentColor",
     LEGACY_fallbackIcon: TextStyleIconLegacy
   });
+  var chevronIconSpacing = props.isSmall && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') ? 'spacious' : 'none';
   return jsx(ToolbarButton, {
     spacing: props.isReducedSpacing ? 'none' : 'default',
     selected: props.selected
@@ -59,6 +61,7 @@ export var BlockTypeButton = function BlockTypeButton(props) {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       css: expandIconContainerStyle
     }, jsx(ChevronDownIcon, {
+      spacing: chevronIconSpacing,
       label: "",
       color: "currentColor",
       LEGACY_margin: "0 0 0 -8px"

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

@@ -22,6 +22,7 @@ import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import TextIcon from '@atlaskit/icon/core/text';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -71,16 +72,17 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
     _defineProperty(_this, "createItems", function () {
-      var formatMessage = _this.props.intl.formatMessage;
-      var _this$props$pluginSta = _this.props.pluginState,
-        currentBlockType = _this$props$pluginSta.currentBlockType,
-        availableBlockTypesInDropdown = _this$props$pluginSta.availableBlockTypesInDropdown,
-        formattingIsPresent = _this$props$pluginSta.formattingIsPresent;
-      var items = availableBlockTypesInDropdown.map(function (blockType, index) {
+      var _this$props = _this.props,
+        formatMessage = _this$props.intl.formatMessage,
+        currentBlockType = _this$props.currentBlockType,
+        availableBlockTypesInDropdown = _this$props.availableBlockTypesInDropdown,
+        formattingIsPresent = _this$props.formattingIsPresent;
+      var items = (availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 ? availableBlockTypesInDropdown : []).map(function (blockType, index) {
         var isActive = currentBlockType === blockType;
         var tagName = blockType.tagName || 'p';
         var Tag = tagName;
         var keyMap = findKeymapByDescription(blockType.title.defaultMessage);
+        var icon = fg('platform_editor_controls_patch_4') ? blockType === null || blockType === void 0 ? void 0 : blockType.icon : blockType.LEGACY_icon;
         var item = {
           content:
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -90,7 +92,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           value: blockType,
           'aria-label': tooltip(keyMap, formatMessage(blockType.title)),
           key: "".concat(blockType.name, "-").concat(index),
-          elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? blockType === null || blockType === void 0 ? void 0 : blockType.icon : undefined,
+          elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? icon : undefined,
           elemAfter:
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           jsx("div", {
@@ -100,7 +102,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         };
         return item;
       });
-      if (availableBlockTypesInDropdown.map(function (blockType) {
+      if ((availableBlockTypesInDropdown !== null && availableBlockTypesInDropdown !== void 0 ? availableBlockTypesInDropdown : []).map(function (blockType) {
         return blockType.name;
       }).includes('blockquote') && editorExperiment('platform_editor_controls', 'control')) {
         var clearFormattingItem = {
@@ -139,7 +141,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         if (blockType.name === 'clearFormatting') {
           _this.props.clearFormatting();
         } else {
-          var fromBlockQuote = _this.props.pluginState.currentBlockType.name === 'blockquote';
+          var _this$props$currentBl;
+          var fromBlockQuote = ((_this$props$currentBl = _this.props.currentBlockType) === null || _this$props$currentBl === void 0 ? void 0 : _this$props$currentBl.name) === 'blockquote';
           _this.props.setTextLevel(blockType.name, fromBlockQuote);
         }
       }
@@ -182,20 +185,21 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
       var _this$state = this.state,
         active = _this$state.active,
         isOpenedByKeyboard = _this$state.isOpenedByKeyboard;
-      var _this$props = this.props,
-        popupsMountPoint = _this$props.popupsMountPoint,
-        popupsBoundariesElement = _this$props.popupsBoundariesElement,
-        popupsScrollableElement = _this$props.popupsScrollableElement,
-        isSmall = _this$props.isSmall,
-        isReducedSpacing = _this$props.isReducedSpacing,
-        _this$props$pluginSta2 = _this$props.pluginState,
-        currentBlockType = _this$props$pluginSta2.currentBlockType,
-        blockTypesDisabled = _this$props$pluginSta2.blockTypesDisabled,
-        availableBlockTypes = _this$props$pluginSta2.availableBlockTypes,
-        availableBlockTypesInDropdown = _this$props$pluginSta2.availableBlockTypesInDropdown,
-        shouldUseDefaultRole = _this$props.shouldUseDefaultRole,
-        formatMessage = _this$props.intl.formatMessage,
-        api = _this$props.api;
+      var _this$props2 = this.props,
+        popupsMountPoint = _this$props2.popupsMountPoint,
+        popupsBoundariesElement = _this$props2.popupsBoundariesElement,
+        popupsScrollableElement = _this$props2.popupsScrollableElement,
+        isSmall = _this$props2.isSmall,
+        isReducedSpacing = _this$props2.isReducedSpacing,
+        currentBlockType = _this$props2.currentBlockType,
+        blockTypesDisabled = _this$props2.blockTypesDisabled,
+        _this$props2$availabl = _this$props2.availableBlockTypes,
+        availableBlockTypes = _this$props2$availabl === void 0 ? [] : _this$props2$availabl,
+        _this$props2$availabl2 = _this$props2.availableBlockTypesInDropdown,
+        availableBlockTypesInDropdown = _this$props2$availabl2 === void 0 ? [] : _this$props2$availabl2,
+        shouldUseDefaultRole = _this$props2.shouldUseDefaultRole,
+        formatMessage = _this$props2.intl.formatMessage,
+        api = _this$props2.api;
       var isHeadingDisabled = !availableBlockTypes.some(function (blockType) {
         return blockType.nodeName === 'heading';
       });
@@ -203,10 +207,14 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         return null;
       }
       var blockTypeTitles = availableBlockTypesInDropdown.filter(function (blockType) {
-        return blockType.name === currentBlockType.name;
+        return blockType.name === (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name);
       }).map(function (blockType) {
         return blockType.title;
       });
+      var defaultIcon = fg('platform_editor_controls_patch_4') ? jsx(TextIcon, {
+        label: ""
+      }) : jsx(Text, null);
+      var currentIcon = fg('platform_editor_controls_patch_4') ? currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.icon : currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.LEGACY_icon;
       if (!this.props.isDisabled && !blockTypesDisabled) {
         var items = this.createItems();
         var button = jsx(BlockTypeButton, {
@@ -219,8 +227,8 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           onKeyDown: this.handleTriggerByKeyboard,
           formatMessage: formatMessage,
           "aria-expanded": active,
-          blockTypeName: currentBlockType.name,
-          blockTypeIcon: (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.icon) || jsx(Text, null)
+          blockTypeName: currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name,
+          blockTypeIcon: currentIcon || defaultIcon
         });
         return jsx("span", {
           css: editorExperiment('platform_editor_blockquote_in_text_formatting_menu', true) ?
@@ -277,7 +285,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           onKeyDown: this.handleTriggerByKeyboard,
           formatMessage: formatMessage,
           "aria-expanded": active,
-          blockTypeName: currentBlockType.name
+          blockTypeName: currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name
         }), !(api !== null && api !== void 0 && api.primaryToolbar) && jsx("span", {
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           css: separatorStyles

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

@@ -10,6 +10,7 @@ export interface BlockType {
     tagName?: string;
     level?: HeadingLevelsAndNormalText;
     icon?: ReactElement;
+    LEGACY_icon?: ReactElement;
 }
 export interface BlockTypeNode {
     name: AllowedBlockTypes;

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

@@ -10,7 +10,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { ThemeMutationObserver } from '@atlaskit/tokens';
 import type { BlockTypePlugin } from '../../../blockTypePluginType';
 import type { TextBlockTypes } from '../../block-types';
-import type { BlockTypeState } from '../../main';
 import type { BlockType } from '../../types';
 export type DropdownItem = MenuItem & {
     value: BlockType;
@@ -19,7 +18,11 @@ export interface Props {
     isDisabled?: boolean;
     isSmall?: boolean;
     isReducedSpacing?: boolean;
-    pluginState: BlockTypeState;
+    currentBlockType?: BlockType;
+    blockTypesDisabled?: boolean;
+    availableBlockTypes?: BlockType[];
+    availableBlockTypesInDropdown?: BlockType[];
+    formattingIsPresent?: boolean;
     popupsMountPoint?: HTMLElement;
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;

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

@@ -10,6 +10,7 @@ export interface BlockType {
     tagName?: string;
     level?: HeadingLevelsAndNormalText;
     icon?: ReactElement;
+    LEGACY_icon?: ReactElement;
 }
 export interface BlockTypeNode {
     name: AllowedBlockTypes;