@atlaskit/editor-plugin-text-formatting 2.1.3 → 2.1.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 2.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.4
+
+### Patch Changes
+
+- [#126339](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126339)
+  [`d41ba7595dcd2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d41ba7595dcd2) -
+  [ux] Updates the look of Text Formatting Contextual toolbar dropdowns.
+
 ## 2.1.3
 
 ### Patch Changes

package/dist/cjs/textFormattingPlugin.js

@@ -134,16 +134,7 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
     pluginsOptions: {
       selectionToolbar: function selectionToolbar() {
         var _api$selectionToolbar;
-        if ((api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
-          exposure: true
-        })) {
-          return undefined;
-        }
-        if ((0, _experiments.editorExperiment)('contextual_formatting_toolbar', true, {
-          exposure: true
-        }) || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant1', {
-          exposure: true
-        }) || (0, _experiments.editorExperiment)('platform_editor_contextual_formatting_toolbar_v2', 'variant2', {
+        if ((api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'none' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
           exposure: true
         })) {
           var toolbarCustom = {

package/dist/cjs/ui/FloatingToolbarComponent.js

@@ -1,19 +1,25 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FloatingToolbarTextFormalWithIntl = void 0;
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _types = require("@atlaskit/editor-common/types");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _constants = require("./Toolbar/constants");
 var _dropdownMenu = require("./Toolbar/dropdown-menu");
 var _clearFormattingIcon = require("./Toolbar/hooks/clear-formatting-icon");
 var _formattingIcons = require("./Toolbar/hooks/formatting-icons");
+var _useIconList2 = require("./Toolbar/hooks/use-icon-list");
+var _singleToolbarButtons = require("./Toolbar/single-toolbar-buttons");
 var _types2 = require("./Toolbar/types");
+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); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -25,7 +31,7 @@ var FloatingToolbarSettings = {
   disabled: false,
   isReducedSpacing: true,
   shouldUseResponsiveToolbar: false,
-  toolbarSize: _types.ToolbarSize.XXXS,
+  toolbarSize: _types.ToolbarSize.S,
   hasMoreButton: false,
   moreButtonLabel: '',
   toolbarType: _types2.ToolbarType.FLOATING
@@ -45,6 +51,12 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     textFormattingState: textFormattingState,
     toolbarType: FloatingToolbarSettings.toolbarType
   });
+  var _useIconList = (0, _useIconList2.useIconList)({
+      icons: defaultIcons,
+      iconTypeList: _constants.DefaultFloatingToolbarButtonsNext
+    }),
+    dropdownItems = _useIconList.dropdownItems,
+    singleItems = _useIconList.singleItems;
   var clearIcon = (0, _clearFormattingIcon.useClearIcon)({
     textFormattingState: textFormattingState,
     intl: intl,
@@ -54,16 +66,20 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
   var items = (0, _react.useMemo)(function () {
     if (!clearIcon) {
       return [{
-        items: defaultIcons
+        items: dropdownItems
       }];
     }
     return [{
-      items: defaultIcons
+      items: dropdownItems
     }, {
       items: [clearIcon]
     }];
-  }, [clearIcon, defaultIcons]);
-  return (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
+  }, [clearIcon, dropdownItems]);
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_singleToolbarButtons.SingleToolbarButtons, {
+    items: singleItems,
+    editorView: editorView,
+    isReducedSpacing: false
+  }), (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
     editorView: editorView,
     items: items,
     isReducedSpacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isReducedSpacing,
@@ -72,6 +88,6 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
     toolbarType: FloatingToolbarSettings.toolbarType
-  });
+  }));
 };
 var FloatingToolbarTextFormalWithIntl = exports.FloatingToolbarTextFormalWithIntl = (0, _reactIntlNext.injectIntl)(FloatingToolbarTextFormat);

package/dist/cjs/ui/Toolbar/constants.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResponsiveCustomMenuNext = exports.ResponsiveCustomMenu = exports.ResponsiveCustomButtonToolbarNext = exports.ResponsiveCustomButtonToolbar = exports.DefaultButtonsToolbarNext = exports.DefaultButtonsToolbar = exports.DefaultButtonsMenuNext = exports.DefaultButtonsMenu = void 0;
+exports.ResponsiveCustomMenuNext = exports.ResponsiveCustomMenu = exports.ResponsiveCustomButtonToolbarNext = exports.ResponsiveCustomButtonToolbar = exports.DefaultFloatingToolbarButtonsNext = exports.DefaultButtonsToolbarNext = exports.DefaultButtonsToolbar = exports.DefaultButtonsMenuNext = exports.DefaultButtonsMenu = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _types = require("@atlaskit/editor-common/types");
 var _types2 = require("./types");
 var DefaultButtonsToolbar = exports.DefaultButtonsToolbar = [_types2.IconTypes.strong, _types2.IconTypes.em];
+var DefaultFloatingToolbarButtonsNext = exports.DefaultFloatingToolbarButtonsNext = [_types2.IconTypes.strong];
 var DefaultButtonsToolbarNext = exports.DefaultButtonsToolbarNext = [_types2.IconTypes.strong, _types2.IconTypes.em, _types2.IconTypes.underline];
 var DefaultButtonsMenu = exports.DefaultButtonsMenu = [_types2.IconTypes.underline, _types2.IconTypes.strike, _types2.IconTypes.code, _types2.IconTypes.subscript, _types2.IconTypes.superscript];
 var DefaultButtonsMenuNext = exports.DefaultButtonsMenuNext = [_types2.IconTypes.strike, _types2.IconTypes.code, _types2.IconTypes.subscript, _types2.IconTypes.superscript];

package/dist/cjs/ui/Toolbar/dropdown-menu.js

@@ -11,7 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _boldButton = require("./bold-button");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _dropdownToolbarButton = require("./dropdown-toolbar-button");
 var _menuState = require("./hooks/menu-state");
 var _moreButton = require("./more-button");
 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); }
@@ -48,6 +49,9 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
       }
     }
   }, [editorView.state, editorView.dispatch, closeMenu]);
+  var activeItem = items[0].items.find(function (item) {
+    return item.isActive;
+  });
   return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -58,7 +62,7 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
     items: items,
     zIndex: _editorSharedStyles.akEditorMenuZIndex,
     fitHeight: 188,
-    fitWidth: 136,
+    fitWidth: (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? 136 : 230,
     shouldUseDefaultRole: true,
     section: {
       hasSeparator: true
@@ -86,7 +90,7 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
       }
     },
     "aria-expanded": isMenuOpen
-  }) : /*#__PURE__*/_react.default.createElement(_boldButton.BoldToolbarButton, {
+  }) : /*#__PURE__*/_react.default.createElement(_dropdownToolbarButton.DropdownToolbarButton, {
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
     isSelected: isMenuOpen,
@@ -104,6 +108,7 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
         setIsOpenedByKeyboard(true);
       }
     },
-    toolbarType: toolbarType
+    toolbarType: toolbarType,
+    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : undefined
   }));
 });

package/dist/cjs/ui/Toolbar/{bold-button.js → dropdown-toolbar-button.js}

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BoldToolbarButton = void 0;
+exports.DropdownToolbarButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _textBoldEditorBold = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-bold--editor-bold"));
+var _textItalicEditorItalic = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-italic--editor-italic"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("./types");
@@ -20,7 +20,7 @@ var _types = require("./types");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var BoldToolbarButton = exports.BoldToolbarButton = function BoldToolbarButton(_ref) {
+var DropdownToolbarButton = exports.DropdownToolbarButton = function DropdownToolbarButton(_ref) {
   var label = _ref.label,
     isReducedSpacing = _ref.isReducedSpacing,
     isDisabled = _ref.isDisabled,
@@ -28,7 +28,8 @@ var BoldToolbarButton = exports.BoldToolbarButton = function BoldToolbarButton(_
     ariaExpanded = _ref['aria-expanded'],
     onClick = _ref.onClick,
     onKeyDown = _ref.onKeyDown,
-    toolbarType = _ref.toolbarType;
+    toolbarType = _ref.toolbarType,
+    iconBefore = _ref.iconBefore;
   var reducedSpacing = toolbarType === _types.ToolbarType.FLOATING ? 'compact' : 'none';
   return (0, _react2.jsx)(_uiMenu.ToolbarButton
   // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -52,7 +53,7 @@ var BoldToolbarButton = exports.BoldToolbarButton = function BoldToolbarButton(_
       _styles.triggerWrapperStylesWithPadding :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       _styles.triggerWrapperStyles
-    }, (0, _react2.jsx)(_textBoldEditorBold.default, {
+    }, iconBefore ? iconBefore : (0, _react2.jsx)(_textItalicEditorItalic.default, {
       color: "currentColor",
       spacing: "spacious",
       label: ""

package/dist/cjs/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,6 +10,8 @@ var _react2 = require("@emotion/react");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _tableCellClear = _interopRequireDefault(require("@atlaskit/icon/core/table-cell-clear"));
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _clearFormatting = require("../../../editor-commands/clear-formatting");
 var _inputMethodUtils = require("../input-method-utils");
 /**
@@ -37,6 +40,9 @@ var useClearIcon = exports.useClearIcon = function useClearIcon(_ref) {
       key: 'clearFormatting',
       command: clearFormattingToolbar,
       content: clearFormattingLabel,
+      elemBefore: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _react2.jsx)(_tableCellClear.default, {
+        label: ""
+      }) : 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", {

package/dist/cjs/ui/Toolbar/hooks/formatting-icons.js

@@ -1,27 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useHasFormattingActived = exports.useFormattingIcons = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _preset = require("@atlaskit/editor-common/preset");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _angleBracketsEditorCode = _interopRequireDefault(require("@atlaskit/icon/core/migration/angle-brackets--editor-code"));
 var _textBoldEditorBold = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-bold--editor-bold"));
 var _textItalicEditorItalic = _interopRequireDefault(require("@atlaskit/icon/core/migration/text-italic--editor-italic"));
 var _textUnderline = _interopRequireDefault(require("@atlaskit/icon/core/text-underline"));
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../../pm-plugins/commands");
+var _icons = require("../icons");
 var _inputMethodUtils = require("../input-method-utils");
 var _types = require("../types");
-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); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -95,6 +95,45 @@ var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
     }
   };
 };
+var IconBefore = {
+  strong: {
+    icon: (0, _react2.jsx)(_textBoldEditorBold.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  em: {
+    icon: (0, _react2.jsx)(_textItalicEditorItalic.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  underline: {
+    icon: (0, _react2.jsx)(_textUnderline.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  strike: {
+    icon: (0, _react2.jsx)(_icons.Strikethrough, null)
+  },
+  code: {
+    icon: (0, _react2.jsx)(_angleBracketsEditorCode.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  subscript: {
+    icon: (0, _react2.jsx)(_icons.Subscript, null)
+  },
+  superscript: {
+    icon: (0, _react2.jsx)(_icons.Superscript, null)
+  }
+};
 var getIcon = function getIcon(_ref) {
   var iconType = _ref.iconType,
     isDisabled = _ref.isDisabled,
@@ -103,6 +142,7 @@ var getIcon = function getIcon(_ref) {
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     toolbarType = _ref.toolbarType;
   var icon = IconButtons(editorAnalyticsAPI, toolbarType)[iconType];
+  var iconBefore = IconBefore[iconType].icon;
   var content = intl.formatMessage(icon.message);
   var tooltipKeymap = icon.tooltipKeymap;
   return {
@@ -116,6 +156,7 @@ var getIcon = function getIcon(_ref) {
       description: content,
       keymap: tooltipKeymap
     }) : undefined,
+    elemBefore: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? iconBefore : undefined,
     elemAfter: tooltipKeymap ?
     // 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", {

package/dist/cjs/ui/Toolbar/hooks/responsive-toolbar-buttons.js

@@ -1,14 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResponsiveToolbarButtons = exports.useResponsiveIconTypeMenu = exports.useResponsiveIconTypeButtons = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../constants");
+var _useIconList = require("./use-icon-list");
 var useResponsiveIconTypeButtons = exports.useResponsiveIconTypeButtons = function useResponsiveIconTypeButtons(_ref) {
   var toolbarSize = _ref.toolbarSize,
     responsivenessEnabled = _ref.responsivenessEnabled;
@@ -41,26 +40,9 @@ var useResponsiveToolbarButtons = exports.useResponsiveToolbarButtons = function
     toolbarSize: toolbarSize,
     responsivenessEnabled: responsivenessEnabled
   });
-  var iconsPosition = (0, _react.useMemo)(function () {
-    return icons.reduce(function (acc, icon) {
-      if (!icon || !icon.iconMark) {
-        return acc;
-      }
-      var isIconSingleButton = iconTypeList.includes(icon.iconMark);
-      if (isIconSingleButton) {
-        return {
-          dropdownItems: acc.dropdownItems,
-          singleItems: [].concat((0, _toConsumableArray2.default)(acc.singleItems), [icon])
-        };
-      }
-      return {
-        dropdownItems: [].concat((0, _toConsumableArray2.default)(acc.dropdownItems), [icon]),
-        singleItems: acc.singleItems
-      };
-    }, {
-      dropdownItems: [],
-      singleItems: []
-    });
-  }, [icons, iconTypeList]);
+  var iconsPosition = (0, _useIconList.useIconList)({
+    icons: icons,
+    iconTypeList: iconTypeList
+  });
   return iconsPosition;
 };

package/dist/cjs/ui/Toolbar/hooks/use-icon-list.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIconList = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var useIconList = exports.useIconList = function useIconList(_ref) {
+  var icons = _ref.icons,
+    iconTypeList = _ref.iconTypeList;
+  return (0, _react.useMemo)(function () {
+    return icons.reduce(function (acc, icon) {
+      if (!icon || !icon.iconMark) {
+        return acc;
+      }
+      var isIconSingleButton = iconTypeList.includes(icon.iconMark);
+      if (isIconSingleButton) {
+        return {
+          dropdownItems: acc.dropdownItems,
+          singleItems: [].concat((0, _toConsumableArray2.default)(acc.singleItems), [icon])
+        };
+      }
+      return {
+        dropdownItems: [].concat((0, _toConsumableArray2.default)(acc.dropdownItems), [icon]),
+        singleItems: acc.singleItems
+      };
+    }, {
+      dropdownItems: [],
+      singleItems: []
+    });
+  }, [icons, iconTypeList]);
+};

package/dist/cjs/ui/Toolbar/icons.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Superscript = exports.Subscript = exports.Strikethrough = void 0;
+var _react = _interopRequireDefault(require("react"));
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+
+var SVGContainer = function SVGContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)",
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, children);
+};
+var Strikethrough = exports.Strikethrough = function Strikethrough() {
+  return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M8.39644 7.25348H13.9004V7.25421H15V8.75421H1V7.25421H2.125V7.25H4.96062C4.45271 6.59457 4.15039 5.77182 4.15039 4.87845C4.15039 2.73833 5.8853 1.00342 8.02542 1.00342H11.9004V2.50342H8.02542C6.71373 2.50342 5.65039 3.56676 5.65039 4.87845C5.65039 6.14664 6.64437 7.18267 7.89576 7.25H8.23074C8.28625 7.25 8.3415 7.25117 8.39644 7.25348ZM12.1058 11.125C12.1058 10.6424 12.0175 10.1804 11.8563 9.75421H10.1705C10.4446 10.1415 10.6058 10.6144 10.6058 11.125C10.6058 12.4367 9.54243 13.5001 8.23074 13.5001H3.15064V15.0001H8.23074C10.3709 15.0001 12.1058 13.2652 12.1058 11.125Z",
+    fill: "#44546F"
+  })));
+};
+var Subscript = exports.Subscript = function Subscript() {
+  return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5.10609 6.54799L7.88895 2.09448L9.16102 2.88936L5.99047 7.9633L9.21219 13.1191L7.94012 13.914L5.10609 9.37861L2.27207 13.914L1 13.1191L4.2217 7.9633L1.05117 2.88939L2.32324 2.09451L5.10609 6.54799ZM10.858 15.0001V13.696H12.3499V10.3153L10.8418 11.4343V9.86413L12.3138 8.83114H13.8161V13.696H14.9999V15.0001H10.858Z",
+    fill: "#44546F"
+  })));
+};
+var Superscript = exports.Superscript = function Superscript() {
+  return /*#__PURE__*/_react.default.createElement(SVGContainer, null, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M10.858 7.16892V5.86487H12.3499V2.4842L10.8418 3.60312V2.03298L12.3138 1H13.8161V5.86487H14.9999V7.16892H10.858ZM5.10609 6.5479L7.88895 2.09439L9.16102 2.88927L5.99047 7.96321L9.21219 13.119L7.94012 13.9139L5.10609 9.37852L2.27207 13.9139L1 13.119L4.2217 7.96321L1.05117 2.8893L2.32324 2.09442L5.10609 6.5479Z",
+    fill: "#44546F"
+  })));
+};

package/dist/es2019/textFormattingPlugin.js

@@ -128,16 +128,7 @@ export const textFormattingPlugin = ({
     pluginsOptions: {
       selectionToolbar: () => {
         var _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
-        if ((api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking) === 'top' && editorExperiment('platform_editor_controls', 'variant1', {
-          exposure: true
-        })) {
-          return undefined;
-        }
-        if (editorExperiment('contextual_formatting_toolbar', true, {
-          exposure: true
-        }) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant1', {
-          exposure: true
-        }) || editorExperiment('platform_editor_contextual_formatting_toolbar_v2', 'variant2', {
+        if ((api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking) === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
           exposure: true
         })) {
           const toolbarCustom = {

package/dist/es2019/ui/FloatingToolbarComponent.js

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -10,15 +10,18 @@ import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { DefaultFloatingToolbarButtonsNext } from './Toolbar/constants';
 import { FormattingTextDropdownMenu } from './Toolbar/dropdown-menu';
 import { useClearIcon } from './Toolbar/hooks/clear-formatting-icon';
 import { useFormattingIcons } from './Toolbar/hooks/formatting-icons';
+import { useIconList } from './Toolbar/hooks/use-icon-list';
+import { SingleToolbarButtons } from './Toolbar/single-toolbar-buttons';
 import { ToolbarType } from './Toolbar/types';
 const FloatingToolbarSettings = {
   disabled: false,
   isReducedSpacing: true,
   shouldUseResponsiveToolbar: false,
-  toolbarSize: ToolbarSize.XXXS,
+  toolbarSize: ToolbarSize.S,
   hasMoreButton: false,
   moreButtonLabel: '',
   toolbarType: ToolbarType.FLOATING
@@ -40,6 +43,13 @@ const FloatingToolbarTextFormat = ({
     textFormattingState,
     toolbarType: FloatingToolbarSettings.toolbarType
   });
+  const {
+    dropdownItems,
+    singleItems
+  } = useIconList({
+    icons: defaultIcons,
+    iconTypeList: DefaultFloatingToolbarButtonsNext
+  });
   const clearIcon = useClearIcon({
     textFormattingState,
     intl,
@@ -49,16 +59,20 @@ const FloatingToolbarTextFormat = ({
   const items = useMemo(() => {
     if (!clearIcon) {
       return [{
-        items: defaultIcons
+        items: dropdownItems
       }];
     }
     return [{
-      items: defaultIcons
+      items: dropdownItems
     }, {
       items: [clearIcon]
     }];
-  }, [clearIcon, defaultIcons]);
-  return jsx(FormattingTextDropdownMenu, {
+  }, [clearIcon, dropdownItems]);
+  return jsx(React.Fragment, null, jsx(SingleToolbarButtons, {
+    items: singleItems,
+    editorView: editorView,
+    isReducedSpacing: false
+  }), jsx(FormattingTextDropdownMenu, {
     editorView: editorView,
     items: items,
     isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isReducedSpacing,
@@ -67,6 +81,6 @@ const FloatingToolbarTextFormat = ({
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
     toolbarType: FloatingToolbarSettings.toolbarType
-  });
+  }));
 };
 export const FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);

package/dist/es2019/ui/Toolbar/constants.js

@@ -1,6 +1,7 @@
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { IconTypes } from './types';
 export const DefaultButtonsToolbar = [IconTypes.strong, IconTypes.em];
+export const DefaultFloatingToolbarButtonsNext = [IconTypes.strong];
 export const DefaultButtonsToolbarNext = [IconTypes.strong, IconTypes.em, IconTypes.underline];
 export const DefaultButtonsMenu = [IconTypes.underline, IconTypes.strike, IconTypes.code, IconTypes.subscript, IconTypes.superscript];
 export const DefaultButtonsMenuNext = [IconTypes.strike, IconTypes.code, IconTypes.subscript, IconTypes.superscript];

package/dist/es2019/ui/Toolbar/dropdown-menu.js

@@ -2,7 +2,8 @@ import React, { useCallback, useState } from 'react';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
-import { BoldToolbarButton } from './bold-button';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { DropdownToolbarButton } from './dropdown-toolbar-button';
 import { useMenuState } from './hooks/menu-state';
 import { MoreButton } from './more-button';
 export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
@@ -31,6 +32,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
       }
     }
   }, [editorView.state, editorView.dispatch, closeMenu]);
+  const activeItem = items[0].items.find(item => item.isActive);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -41,7 +43,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
     items: items,
     zIndex: akEditorMenuZIndex,
     fitHeight: 188,
-    fitWidth: 136,
+    fitWidth: editorExperiment('platform_editor_controls', 'control') ? 136 : 230,
     shouldUseDefaultRole: true,
     section: {
       hasSeparator: true
@@ -69,7 +71,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
       }
     },
     "aria-expanded": isMenuOpen
-  }) : /*#__PURE__*/React.createElement(BoldToolbarButton, {
+  }) : /*#__PURE__*/React.createElement(DropdownToolbarButton, {
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
     isSelected: isMenuOpen,
@@ -87,6 +89,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
         setIsOpenedByKeyboard(true);
       }
     },
-    toolbarType: toolbarType
+    toolbarType: toolbarType,
+    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : undefined
   }));
 });