@atlaskit/editor-plugin-text-formatting 2.1.2 → 2.1.4

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
   }));
 });

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

@@ -8,11 +8,11 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { expandIconContainerStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, disableBlueBorderStyles } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
+import ItalicIcon from '@atlaskit/icon/core/migration/text-italic--editor-italic';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ToolbarType } from './types';
-export const BoldToolbarButton = ({
+export const DropdownToolbarButton = ({
   label,
   isReducedSpacing,
   isDisabled,
@@ -20,7 +20,8 @@ export const BoldToolbarButton = ({
   'aria-expanded': ariaExpanded,
   onClick,
   onKeyDown,
-  toolbarType
+  toolbarType,
+  iconBefore
 }) => {
   const reducedSpacing = toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
   return jsx(ToolbarButton
@@ -45,7 +46,7 @@ export const BoldToolbarButton = ({
       triggerWrapperStylesWithPadding :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       triggerWrapperStyles
-    }, jsx(BoldIcon, {
+    }, iconBefore ? iconBefore : jsx(ItalicIcon, {
       color: "currentColor",
       spacing: "spacious",
       label: ""

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

@@ -9,6 +9,8 @@ import { jsx } from '@emotion/react';
 import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import TableCellClearIcon from '@atlaskit/icon/core/table-cell-clear';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearFormattingWithAnalytics } from '../../../editor-commands/clear-formatting';
 import { getInputMethod } from '../input-method-utils';
 export const useClearIcon = ({
@@ -29,6 +31,9 @@ export const useClearIcon = ({
       key: 'clearFormatting',
       command: clearFormattingToolbar,
       content: clearFormattingLabel,
+      elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? jsx(TableCellClearIcon, {
+        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
       jsx("div", {

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -11,10 +11,13 @@ import { getAriaKeyshortcuts, toggleBold, toggleCode, toggleItalic, toggleStrike
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
 import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
 import ItalicIcon from '@atlaskit/icon/core/migration/text-italic--editor-italic';
 import UnderlineIcon from '@atlaskit/icon/core/text-underline';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../pm-plugins/commands';
+import { Strikethrough, Subscript, Superscript } from '../icons';
 import { getInputMethod } from '../input-method-utils';
 import { IconTypes } from '../types';
 const withInputMethod = (toolbarType, func) => editorCommandToPMCommand(func(getInputMethod(toolbarType)));
@@ -73,6 +76,45 @@ const IconButtons = (editorAnalyticsAPI, toolbarType) => ({
     tooltipKeymap: toggleSuperscript
   }
 });
+const IconBefore = {
+  strong: {
+    icon: jsx(BoldIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  em: {
+    icon: jsx(ItalicIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  underline: {
+    icon: jsx(UnderlineIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  strike: {
+    icon: jsx(Strikethrough, null)
+  },
+  code: {
+    icon: jsx(AngleBracketsIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  subscript: {
+    icon: jsx(Subscript, null)
+  },
+  superscript: {
+    icon: jsx(Superscript, null)
+  }
+};
 const getIcon = ({
   iconType,
   isDisabled,
@@ -82,6 +124,7 @@ const getIcon = ({
   toolbarType
 }) => {
   const icon = IconButtons(editorAnalyticsAPI, toolbarType)[iconType];
+  const iconBefore = IconBefore[iconType].icon;
   const content = intl.formatMessage(icon.message);
   const {
     tooltipKeymap
@@ -97,6 +140,7 @@ const getIcon = ({
       description: content,
       keymap: tooltipKeymap
     }) : undefined,
+    elemBefore: 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
     jsx("div", {

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

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DefaultButtonsMenu, DefaultButtonsMenuNext, DefaultButtonsToolbar, DefaultButtonsToolbarNext, ResponsiveCustomButtonToolbar as ResponsiveCustomButtonToolbarLegacy, ResponsiveCustomButtonToolbarNext, ResponsiveCustomMenu as ResponsiveCustomMenuLegacy, ResponsiveCustomMenuNext } from '../constants';
+import { useIconList } from './use-icon-list';
 export const useResponsiveIconTypeButtons = ({
   toolbarSize,
   responsivenessEnabled
@@ -32,26 +33,9 @@ export const useResponsiveToolbarButtons = ({
     toolbarSize,
     responsivenessEnabled
   });
-  const iconsPosition = useMemo(() => {
-    return icons.reduce((acc, icon) => {
-      if (!icon || !icon.iconMark) {
-        return acc;
-      }
-      const isIconSingleButton = iconTypeList.includes(icon.iconMark);
-      if (isIconSingleButton) {
-        return {
-          dropdownItems: acc.dropdownItems,
-          singleItems: [...acc.singleItems, icon]
-        };
-      }
-      return {
-        dropdownItems: [...acc.dropdownItems, icon],
-        singleItems: acc.singleItems
-      };
-    }, {
-      dropdownItems: [],
-      singleItems: []
-    });
-  }, [icons, iconTypeList]);
+  const iconsPosition = useIconList({
+    icons,
+    iconTypeList
+  });
   return iconsPosition;
 };

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

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+export const useIconList = ({
+  icons,
+  iconTypeList
+}) => {
+  return useMemo(() => {
+    return icons.reduce((acc, icon) => {
+      if (!icon || !icon.iconMark) {
+        return acc;
+      }
+      const isIconSingleButton = iconTypeList.includes(icon.iconMark);
+      if (isIconSingleButton) {
+        return {
+          dropdownItems: acc.dropdownItems,
+          singleItems: [...acc.singleItems, icon]
+        };
+      }
+      return {
+        dropdownItems: [...acc.dropdownItems, icon],
+        singleItems: acc.singleItems
+      };
+    }, {
+      dropdownItems: [],
+      singleItems: []
+    });
+  }, [icons, iconTypeList]);
+};

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

@@ -0,0 +1,49 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+const SVGContainer = ({
+  children
+}) => /*#__PURE__*/React.createElement("span", {
+  style: {
+    width: "var(--ds-space-300, 24px)",
+    height: "var(--ds-space-300, 24px)",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+}, children);
+export const Strikethrough = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.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"
+})));
+export const Subscript = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.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"
+})));
+export const Superscript = () => /*#__PURE__*/React.createElement(SVGContainer, null, /*#__PURE__*/React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.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/esm/pm-plugins/cursor.js

@@ -22,7 +22,7 @@ export default new SafePlugin({
       var clickWasNearACodeMark = code && ($click.nodeBefore && code.isInSet($click.nodeBefore.marks) || $click.nodeAfter && code.isInSet($click.nodeAfter.marks));
 
       // Find the starting position of the clicked dom-element
-      // TODO: Remove calls to private API
+      // TODO: ED-26962 - Remove calls to private API
       var clickedDOMElementPosition = event.target && event.target instanceof Node && view.posAtDOM(event.target);
       var clickNode = view.state.doc.nodeAt(clickPos);
       var clickWasAtTextNode = !!(clickNode && clickNode.isText);

package/dist/esm/pm-plugins/main.js

@@ -1,4 +1,4 @@
-// TODO: Ideally this should use the custom toggleMark function from @atlaskit/editor-common so we also disable the options when selecting inline nodes but it disables the marks when the selection is empty at this point in time which is undesirable
+// TODO: ED-26962 - Ideally this should use the custom toggleMark function from @atlaskit/editor-common so we also disable the options when selecting inline nodes but it disables the marks when the selection is empty at this point in time which is undesirable
 // import { toggleMark } from '@atlaskit/editor-common/mark';
 
 import { moveLeft as keymapMoveLeft, moveRight as keymapMoveRight } from '@atlaskit/editor-common/keymaps';

package/dist/esm/textFormattingPlugin.js

@@ -128,16 +128,7 @@ export var textFormattingPlugin = function textFormattingPlugin(_ref) {
     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' && 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 || (_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' && editorExperiment('platform_editor_controls', 'variant1', {
           exposure: true
         })) {
           var toolbarCustom = {

package/dist/esm/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';
 var FloatingToolbarSettings = {
   disabled: false,
   isReducedSpacing: true,
   shouldUseResponsiveToolbar: false,
-  toolbarSize: ToolbarSize.XXXS,
+  toolbarSize: ToolbarSize.S,
   hasMoreButton: false,
   moreButtonLabel: '',
   toolbarType: ToolbarType.FLOATING
@@ -38,6 +41,12 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     textFormattingState: textFormattingState,
     toolbarType: FloatingToolbarSettings.toolbarType
   });
+  var _useIconList = useIconList({
+      icons: defaultIcons,
+      iconTypeList: DefaultFloatingToolbarButtonsNext
+    }),
+    dropdownItems = _useIconList.dropdownItems,
+    singleItems = _useIconList.singleItems;
   var clearIcon = useClearIcon({
     textFormattingState: textFormattingState,
     intl: intl,
@@ -47,16 +56,20 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
   var items = useMemo(function () {
     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,
@@ -65,6 +78,6 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
     toolbarType: FloatingToolbarSettings.toolbarType
-  });
+  }));
 };
 export var FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ToolbarSize } from '@atlaskit/editor-common/types';
 import { IconTypes } from './types';
 export var DefaultButtonsToolbar = [IconTypes.strong, IconTypes.em];
+export var DefaultFloatingToolbarButtonsNext = [IconTypes.strong];
 export var DefaultButtonsToolbarNext = [IconTypes.strong, IconTypes.em, IconTypes.underline];
 export var DefaultButtonsMenu = [IconTypes.underline, IconTypes.strike, IconTypes.code, IconTypes.subscript, IconTypes.superscript];
 export var DefaultButtonsMenuNext = [IconTypes.strike, IconTypes.code, IconTypes.subscript, IconTypes.superscript];

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

@@ -3,7 +3,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 var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref) {
@@ -38,6 +39,9 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
       }
     }
   }, [editorView.state, editorView.dispatch, closeMenu]);
+  var activeItem = items[0].items.find(function (item) {
+    return item.isActive;
+  });
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -48,7 +52,7 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
     items: items,
     zIndex: akEditorMenuZIndex,
     fitHeight: 188,
-    fitWidth: 136,
+    fitWidth: editorExperiment('platform_editor_controls', 'control') ? 136 : 230,
     shouldUseDefaultRole: true,
     section: {
       hasSeparator: true
@@ -76,7 +80,7 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
       }
     },
     "aria-expanded": isMenuOpen
-  }) : /*#__PURE__*/React.createElement(BoldToolbarButton, {
+  }) : /*#__PURE__*/React.createElement(DropdownToolbarButton, {
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
     isSelected: isMenuOpen,
@@ -94,6 +98,7 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
         setIsOpenedByKeyboard(true);
       }
     },
-    toolbarType: toolbarType
+    toolbarType: toolbarType,
+    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : undefined
   }));
 });

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

@@ -8,11 +8,11 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { expandIconContainerStyle, triggerWrapperStyles, triggerWrapperStylesWithPadding, disableBlueBorderStyles } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
+import ItalicIcon from '@atlaskit/icon/core/migration/text-italic--editor-italic';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ToolbarType } from './types';
-export var BoldToolbarButton = function BoldToolbarButton(_ref) {
+export var DropdownToolbarButton = function DropdownToolbarButton(_ref) {
   var label = _ref.label,
     isReducedSpacing = _ref.isReducedSpacing,
     isDisabled = _ref.isDisabled,
@@ -20,7 +20,8 @@ export var BoldToolbarButton = function BoldToolbarButton(_ref) {
     ariaExpanded = _ref['aria-expanded'],
     onClick = _ref.onClick,
     onKeyDown = _ref.onKeyDown,
-    toolbarType = _ref.toolbarType;
+    toolbarType = _ref.toolbarType,
+    iconBefore = _ref.iconBefore;
   var reducedSpacing = toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
   return jsx(ToolbarButton
   // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
@@ -44,7 +45,7 @@ export var BoldToolbarButton = function BoldToolbarButton(_ref) {
       triggerWrapperStylesWithPadding :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       triggerWrapperStyles
-    }, jsx(BoldIcon, {
+    }, iconBefore ? iconBefore : jsx(ItalicIcon, {
       color: "currentColor",
       spacing: "spacious",
       label: ""

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

@@ -9,6 +9,8 @@ import { jsx } from '@emotion/react';
 import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import TableCellClearIcon from '@atlaskit/icon/core/table-cell-clear';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearFormattingWithAnalytics } from '../../../editor-commands/clear-formatting';
 import { getInputMethod } from '../input-method-utils';
 export var useClearIcon = function useClearIcon(_ref) {
@@ -30,6 +32,9 @@ export var useClearIcon = function useClearIcon(_ref) {
       key: 'clearFormatting',
       command: clearFormattingToolbar,
       content: clearFormattingLabel,
+      elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? jsx(TableCellClearIcon, {
+        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
       jsx("div", {

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -12,10 +12,13 @@ import { getAriaKeyshortcuts, toggleBold, toggleCode, toggleItalic, toggleStrike
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
 import BoldIcon from '@atlaskit/icon/core/migration/text-bold--editor-bold';
 import ItalicIcon from '@atlaskit/icon/core/migration/text-italic--editor-italic';
 import UnderlineIcon from '@atlaskit/icon/core/text-underline';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../pm-plugins/commands';
+import { Strikethrough, Subscript, Superscript } from '../icons';
 import { getInputMethod } from '../input-method-utils';
 import { IconTypes } from '../types';
 var withInputMethod = function withInputMethod(toolbarType, func) {
@@ -84,6 +87,45 @@ var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
     }
   };
 };
+var IconBefore = {
+  strong: {
+    icon: jsx(BoldIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  em: {
+    icon: jsx(ItalicIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  underline: {
+    icon: jsx(UnderlineIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  strike: {
+    icon: jsx(Strikethrough, null)
+  },
+  code: {
+    icon: jsx(AngleBracketsIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })
+  },
+  subscript: {
+    icon: jsx(Subscript, null)
+  },
+  superscript: {
+    icon: jsx(Superscript, null)
+  }
+};
 var getIcon = function getIcon(_ref) {
   var iconType = _ref.iconType,
     isDisabled = _ref.isDisabled,
@@ -92,6 +134,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 {
@@ -105,6 +148,7 @@ var getIcon = function getIcon(_ref) {
       description: content,
       keymap: tooltipKeymap
     }) : undefined,
+    elemBefore: 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
     jsx("div", {

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

@@ -1,7 +1,7 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { useMemo } from 'react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DefaultButtonsMenu, DefaultButtonsMenuNext, DefaultButtonsToolbar, DefaultButtonsToolbarNext, ResponsiveCustomButtonToolbar as ResponsiveCustomButtonToolbarLegacy, ResponsiveCustomButtonToolbarNext, ResponsiveCustomMenu as ResponsiveCustomMenuLegacy, ResponsiveCustomMenuNext } from '../constants';
+import { useIconList } from './use-icon-list';
 export var useResponsiveIconTypeButtons = function useResponsiveIconTypeButtons(_ref) {
   var toolbarSize = _ref.toolbarSize,
     responsivenessEnabled = _ref.responsivenessEnabled;
@@ -34,26 +34,9 @@ export var useResponsiveToolbarButtons = function useResponsiveToolbarButtons(_r
     toolbarSize: toolbarSize,
     responsivenessEnabled: responsivenessEnabled
   });
-  var iconsPosition = 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(_toConsumableArray(acc.singleItems), [icon])
-        };
-      }
-      return {
-        dropdownItems: [].concat(_toConsumableArray(acc.dropdownItems), [icon]),
-        singleItems: acc.singleItems
-      };
-    }, {
-      dropdownItems: [],
-      singleItems: []
-    });
-  }, [icons, iconTypeList]);
+  var iconsPosition = useIconList({
+    icons: icons,
+    iconTypeList: iconTypeList
+  });
   return iconsPosition;
 };