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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-type
 
+## 5.1.14
+
+### Patch Changes
+
+- [#144898](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144898)
+  [`b9a10d6716ef4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b9a10d6716ef4) -
+  Enable useSharedPluginStateSelector in block-controls, block-type and breakout plugins
+- Updated dependencies
+
+## 5.1.13
+
+### Patch Changes
+
+- [#140066](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140066)
+  [`6f2d7504278cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f2d7504278cc) -
+  [ux] Update Test styles icons.
+- Updated dependencies
+
 ## 5.1.12
 
 ### Patch Changes

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

@@ -7,6 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.getBlockTypesInDropdown = exports.WRAPPER_BLOCK_TYPES = exports.TEXT_BLOCK_TYPES = exports.PANEL = exports.OTHER = exports.NORMAL_TEXT = exports.HEADING_6 = exports.HEADING_5 = exports.HEADING_4 = exports.HEADING_3 = exports.HEADING_2 = exports.HEADING_1 = exports.HEADINGS_BY_NAME = exports.HEADINGS_BY_LEVEL = exports.FORMATTING_NODE_TYPES = exports.FORMATTING_MARK_TYPES = exports.CODE_BLOCK = exports.BLOCK_QUOTE = exports.ALL_BLOCK_TYPES = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _messages = require("@atlaskit/editor-common/messages");
+var _textHeadingFive = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-five"));
+var _textHeadingFour = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-four"));
+var _textHeadingOne = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-one"));
+var _textHeadingSix = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-six"));
+var _textHeadingThree = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-three"));
+var _textHeadingTwo = _interopRequireDefault(require("@atlaskit/icon-lab/core/text-heading-two"));
+var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _icons = require("./ui/ToolbarBlockType/icons");
 var NORMAL_TEXT = exports.NORMAL_TEXT = {
@@ -14,7 +21,10 @@ var NORMAL_TEXT = exports.NORMAL_TEXT = {
   title: _messages.blockTypeMessages.normal,
   nodeName: 'paragraph',
   tagName: 'p',
-  icon: /*#__PURE__*/_react.default.createElement(_icons.Text, null)
+  icon: /*#__PURE__*/_react.default.createElement(_text.default, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/_react.default.createElement(_icons.Text, null)
 };
 var HEADING_1 = exports.HEADING_1 = {
   name: 'heading1',
@@ -22,7 +32,10 @@ var HEADING_1 = exports.HEADING_1 = {
   nodeName: 'heading',
   tagName: 'h1',
   level: 1,
-  icon: /*#__PURE__*/_react.default.createElement(_icons.H1, null)
+  icon: /*#__PURE__*/_react.default.createElement(_textHeadingOne.default, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/_react.default.createElement(_icons.H1, null)
 };
 var HEADING_2 = exports.HEADING_2 = {
   name: 'heading2',
@@ -30,7 +43,10 @@ var HEADING_2 = exports.HEADING_2 = {
   nodeName: 'heading',
   tagName: 'h2',
   level: 2,
-  icon: /*#__PURE__*/_react.default.createElement(_icons.H2, null)
+  icon: /*#__PURE__*/_react.default.createElement(_textHeadingTwo.default, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/_react.default.createElement(_icons.H2, null)
 };
 var HEADING_3 = exports.HEADING_3 = {
   name: 'heading3',
@@ -38,7 +54,10 @@ var HEADING_3 = exports.HEADING_3 = {
   nodeName: 'heading',
   tagName: 'h3',
   level: 3,
-  icon: /*#__PURE__*/_react.default.createElement(_icons.H3, null)
+  icon: /*#__PURE__*/_react.default.createElement(_textHeadingThree.default, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/_react.default.createElement(_icons.H3, null)
 };
 var HEADING_4 = exports.HEADING_4 = {
   name: 'heading4',
@@ -46,7 +65,10 @@ var HEADING_4 = exports.HEADING_4 = {
   nodeName: 'heading',
   tagName: 'h4',
   level: 4,
-  icon: /*#__PURE__*/_react.default.createElement(_icons.H4, null)
+  icon: /*#__PURE__*/_react.default.createElement(_textHeadingFour.default, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/_react.default.createElement(_icons.H4, null)
 };
 var HEADING_5 = exports.HEADING_5 = {
   name: 'heading5',
@@ -54,7 +76,10 @@ var HEADING_5 = exports.HEADING_5 = {
   nodeName: 'heading',
   tagName: 'h5',
   level: 5,
-  icon: /*#__PURE__*/_react.default.createElement(_icons.H5, null)
+  icon: /*#__PURE__*/_react.default.createElement(_textHeadingFive.default, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/_react.default.createElement(_icons.H5, null)
 };
 var HEADING_6 = exports.HEADING_6 = {
   name: 'heading6',
@@ -62,7 +87,10 @@ var HEADING_6 = exports.HEADING_6 = {
   nodeName: 'heading',
   tagName: 'h6',
   level: 6,
-  icon: /*#__PURE__*/_react.default.createElement(_icons.H6, null)
+  icon: /*#__PURE__*/_react.default.createElement(_textHeadingSix.default, {
+    label: ""
+  }),
+  LEGACY_icon: /*#__PURE__*/_react.default.createElement(_icons.H6, null)
 };
 var BLOCK_QUOTE = exports.BLOCK_QUOTE = {
   name: 'blockquote',

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

@@ -9,6 +9,7 @@ exports.FloatingToolbarComponent = FloatingToolbarComponent;
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarBlockType = _interopRequireDefault(require("./ToolbarBlockType"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -21,8 +22,40 @@ var FloatingToolbarSettings = {
 };
 function FloatingToolbarComponent(_ref) {
   var api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockType']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockType'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     blockTypeState = _useSharedPluginState.blockTypeState;
+
+  // currentBlockType
+  var currentBlockTypeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.currentBlockType', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var currentBlockType = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? currentBlockTypeSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType;
+
+  // blockTypesDisabled
+  var blockTypesDisabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.blockTypesDisabled', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var blockTypesDisabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? blockTypesDisabledSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled;
+
+  // availableBlockTypes
+  var availableBlockTypesSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableBlockTypes', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var availableBlockTypes = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes;
+
+  // availableBlockTypesInDropdown
+  var availableBlockTypesInDropdownSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableBlockTypesInDropdown', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var availableBlockTypesInDropdown = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesInDropdownSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown;
+
+  // formattingIsPresent
+  var formattingIsPresentSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.formattingIsPresent', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var formattingIsPresent = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? formattingIsPresentSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.formattingIsPresent;
   var boundSetBlockType = (0, _react.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, _analytics.INPUT_METHOD.FLOATING_TB));
@@ -39,11 +72,12 @@ function FloatingToolbarComponent(_ref) {
     isSmall: FloatingToolbarSettings.isSmall,
     isDisabled: FloatingToolbarSettings.disabled,
     isReducedSpacing: (0, _experiments.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/cjs/pm-plugins/ui/PrimaryToolbarComponent.js

@@ -8,6 +8,8 @@ exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarBlockType = _interopRequireDefault(require("./ToolbarBlockType"));
 function PrimaryToolbarComponent(_ref) {
   var api = _ref.api,
@@ -18,8 +20,40 @@ function PrimaryToolbarComponent(_ref) {
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
     shouldUseDefaultRole = _ref.shouldUseDefaultRole;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockType']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['blockType'], {
+      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
+    }),
     blockTypeState = _useSharedPluginState.blockTypeState;
+
+  // currentBlockType
+  var currentBlockTypeSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.currentBlockType', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var currentBlockType = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? currentBlockTypeSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.currentBlockType;
+
+  // blockTypesDisabled
+  var blockTypesDisabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.blockTypesDisabled', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var blockTypesDisabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? blockTypesDisabledSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.blockTypesDisabled;
+
+  // availableBlockTypes
+  var availableBlockTypesSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableBlockTypes', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var availableBlockTypes = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypes;
+
+  // availableBlockTypesInDropdown
+  var availableBlockTypesInDropdownSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.availableBlockTypesInDropdown', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var availableBlockTypesInDropdown = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? availableBlockTypesInDropdownSelector : blockTypeState === null || blockTypeState === void 0 ? void 0 : blockTypeState.availableBlockTypesInDropdown;
+
+  // formattingIsPresent
+  var formattingIsPresentSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.formattingIsPresent', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  });
+  var formattingIsPresent = (0, _experiments.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, _analytics.INPUT_METHOD.TOOLBAR, fromBlockQuote));
@@ -38,11 +72,12 @@ 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/cjs/pm-plugins/ui/ToolbarBlockType/blocktype-button.js

@@ -14,6 +14,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
 var _textStyle = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/text-style"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockTypes = require("../../block-types");
@@ -46,6 +47,7 @@ var BlockTypeButton = exports.BlockTypeButton = function BlockTypeButton(props)
     color: "currentColor",
     LEGACY_fallbackIcon: _textStyle.default
   });
+  var chevronIconSpacing = props.isSmall && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? 'spacious' : 'none';
   return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
     spacing: props.isReducedSpacing ? 'none' : 'default',
     selected: props.selected
@@ -67,6 +69,7 @@ var BlockTypeButton = exports.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: _styles.expandIconContainerStyle
     }, (0, _react2.jsx)(_chevronDown.default, {
+      spacing: chevronIconSpacing,
       label: "",
       color: "currentColor",
       LEGACY_margin: "0 0 0 -8px"

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

@@ -19,6 +19,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -75,16 +76,17 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
     (0, _defineProperty2.default)(_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 = (0, _keymaps.findKeymapByDescription)(blockType.title.defaultMessage);
+        var icon = (0, _platformFeatureFlags.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
@@ -94,7 +96,7 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
           value: blockType,
           'aria-label': (0, _keymaps.tooltip)(keyMap, formatMessage(blockType.title)),
           key: "".concat(blockType.name, "-").concat(index),
-          elemBefore: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? blockType === null || blockType === void 0 ? void 0 : blockType.icon : undefined,
+          elemBefore: (0, _experiments.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
           (0, _react2.jsx)("div", {
@@ -104,7 +106,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') && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
         var clearFormattingItem = {
@@ -143,7 +145,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);
         }
       }
@@ -186,20 +189,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';
       });
@@ -207,10 +211,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 = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? (0, _react2.jsx)(_text.default, {
+        label: ""
+      }) : (0, _react2.jsx)(_icons.Text, null);
+      var currentIcon = (0, _platformFeatureFlags.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 = (0, _react2.jsx)(_blocktypeButton.BlockTypeButton, {
@@ -223,8 +231,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) || (0, _react2.jsx)(_icons.Text, null)
+          blockTypeName: currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name,
+          blockTypeIcon: currentIcon || defaultIcon
         });
         return (0, _react2.jsx)("span", {
           css: (0, _experiments.editorExperiment)('platform_editor_blockquote_in_text_formatting_menu', true) ?
@@ -281,7 +289,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) && (0, _react2.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: _styles.separatorStyles

package/dist/es2019/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 const NORMAL_TEXT = {
@@ -7,7 +14,10 @@ export const 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 const HEADING_1 = {
   name: 'heading1',
@@ -15,7 +25,10 @@ export const 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 const HEADING_2 = {
   name: 'heading2',
@@ -23,7 +36,10 @@ export const 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 const HEADING_3 = {
   name: 'heading3',
@@ -31,7 +47,10 @@ export const 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 const HEADING_4 = {
   name: 'heading4',
@@ -39,7 +58,10 @@ export const 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 const HEADING_5 = {
   name: 'heading5',
@@ -47,7 +69,10 @@ export const 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 const HEADING_6 = {
   name: 'heading6',
@@ -55,7 +80,10 @@ export const 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 const BLOCK_QUOTE = {
   name: 'blockquote',

package/dist/es2019/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';
 const FloatingToolbarSettings = {
@@ -14,7 +15,39 @@ export function FloatingToolbarComponent({
 }) {
   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 = useCallback(name => {
     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.FLOATING_TB));
@@ -31,11 +64,12 @@ export function FloatingToolbarComponent({
     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,