@atlaskit/editor-plugin-text-formatting 2.2.6 → 2.2.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 2.2.8
+
+### Patch Changes
+
+- [#159038](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159038)
+  [`939f37dbeeb94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/939f37dbeeb94) -
+  [ux] Highlight the common formatting mark button when selection has mixed style but share a common
+  one
+
+## 2.2.7
+
+### Patch Changes
+
+- [#155215](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155215)
+  [`7e8680d1d66be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e8680d1d66be) -
+  Disallow default cmd+u shortcut behaviour when text formating is not allowed in editor
+
 ## 2.2.6
 
 ### Patch Changes

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

@@ -11,6 +11,8 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _textFormatting = _interopRequireWildcard(require("../editor-commands/text-formatting"));
 var commands = _textFormatting;
 var _pluginKey = require("./plugin-key");
@@ -103,12 +105,16 @@ var plugin = exports.plugin = function plugin(dispatch, editorAnalyticsAPI) {
     key: _pluginKey.pluginKey,
     props: {
       handleKeyDown: function handleKeyDown(view, event) {
+        var _pluginKey$getState;
         var state = view.state,
           dispatch = view.dispatch;
         if (event.key === _keymaps.moveRight.common && !event.metaKey) {
           return commands.moveRight()(state, dispatch);
         } else if (event.key === _keymaps.moveLeft.common && !event.metaKey) {
           return commands.moveLeft()(state, dispatch);
+        } else if (event.key === 'u' && event.metaKey && (_pluginKey$getState = _pluginKey.pluginKey.getState(state)) !== null && _pluginKey$getState !== void 0 && _pluginKey$getState.underlineDisabled && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9')) {
+          // This is a workaround for browser behaviour with cmd+u (in Chrome only) where the underline mark being applied around the selection
+          event.preventDefault();
         }
         return false;
       },

package/dist/cjs/ui/FloatingToolbarComponent.js

@@ -127,15 +127,8 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
   var textFormattingState = useSharedState(api);
   var formattingIsPresent = textFormattingState.formattingIsPresent,
     formattingIconState = (0, _objectWithoutProperties2.default)(textFormattingState, _excluded);
-  var defaultIcons = (0, _formattingIcons.useFormattingIcons)({
-    schema: editorView.state.schema,
-    intl: intl,
-    isToolbarDisabled: FloatingToolbarSettings.disabled,
-    editorAnalyticsAPI: editorAnalyticsAPI,
-    textFormattingState: formattingIconState,
-    toolbarType: FloatingToolbarSettings.toolbarType
-  });
   var hasMultiplePartsWithFormattingSelected;
+  var commonActiveMarks = [];
   if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7')) {
     var selection = editorView.state.selection;
     var from = selection.from,
@@ -144,7 +137,22 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     hasMultiplePartsWithFormattingSelected = (0, _formattingInSelectionUtils.hasMultiplePartsWithFormattingInSelection)({
       selectedContent: selectedContent
     });
+    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10')) {
+      commonActiveMarks = (0, _formattingInSelectionUtils.getCommonActiveMarks)({
+        selectedContent: selectedContent
+      });
+    }
   }
+  var defaultIcons = (0, _formattingIcons.useFormattingIcons)({
+    schema: editorView.state.schema,
+    intl: intl,
+    isToolbarDisabled: FloatingToolbarSettings.disabled,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    textFormattingState: formattingIconState,
+    toolbarType: FloatingToolbarSettings.toolbarType,
+    hasMultiplePartsWithFormattingSelected: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10') ? hasMultiplePartsWithFormattingSelected : undefined,
+    commonActiveMarks: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10') ? commonActiveMarks : undefined
+  });
   var _useIconList = (0, _useIconList2.useIconList)({
       icons: defaultIcons,
       iconTypeList: _constants.DefaultFloatingToolbarButtonsNext,
@@ -175,7 +183,7 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: false,
-    shouldUnselect: hasMultiplePartsWithFormattingSelected
+    hasMultiplePartsWithFormattingSelected: hasMultiplePartsWithFormattingSelected
   }), (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
     editorView: editorView,
     items: items,
@@ -185,7 +193,7 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
     toolbarType: FloatingToolbarSettings.toolbarType,
-    shouldUnselect: hasMultiplePartsWithFormattingSelected
+    hasMultiplePartsWithFormattingSelected: hasMultiplePartsWithFormattingSelected
   }));
 };
 var FloatingToolbarTextFormalWithIntl = exports.FloatingToolbarTextFormalWithIntl = (0, _reactIntlNext.injectIntl)(FloatingToolbarTextFormat);

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

@@ -31,7 +31,7 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
     hasMoreButton = _ref.hasMoreButton,
     intl = _ref.intl,
     toolbarType = _ref.toolbarType,
-    shouldUnselect = _ref.shouldUnselect;
+    hasMultiplePartsWithFormattingSelected = _ref.hasMultiplePartsWithFormattingSelected;
   var _useMenuState = (0, _menuState.useMenuState)(),
     _useMenuState2 = (0, _slicedToArray2.default)(_useMenuState, 3),
     isMenuOpen = _useMenuState2[0],
@@ -59,7 +59,7 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
   var defaultIconName = (_items$0$items$2 = items[0].items[0]) === null || _items$0$items$2 === void 0 ? void 0 : _items$0$items$2.value.name;
   var iconBefore;
   var activeIconName = defaultIconName;
-  if (shouldUnselect && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7')) {
+  if (hasMultiplePartsWithFormattingSelected && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7')) {
     iconBefore = defaultIcon;
   } else {
     iconBefore = activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon;

package/dist/cjs/ui/Toolbar/formatting-in-selection-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hasMultiplePartsWithFormattingInSelection = void 0;
+exports.hasMultiplePartsWithFormattingInSelection = exports.getCommonActiveMarks = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("./types");
 var isMarkInIconTypes = function isMarkInIconTypes(node) {
@@ -29,4 +29,30 @@ var hasMultiplePartsWithFormattingInSelection = exports.hasMultiplePartsWithForm
     return isMarkInIconTypes(child) ? child.marks : undefined;
   }).filter(Boolean);
   return marks.length > 1;
+};
+var getCommonActiveMarks = exports.getCommonActiveMarks = function getCommonActiveMarks(_ref2) {
+  var selectedContent = _ref2.selectedContent;
+  if (!selectedContent) {
+    return [];
+  }
+  // filter out fragment node contains only spaces
+  var filteredSelectedContent = selectedContent.filter(function (child) {
+    var _child$text;
+    return ((_child$text = child.text) === null || _child$text === void 0 ? void 0 : _child$text.trim()) !== '';
+  });
+
+  // find the active mark type in first part
+  var firstPartMarks = selectedContent[0].marks.map(function (mark) {
+    return mark.type.name;
+  });
+
+  // check if all other parts have the same mark type as the first part and return the common mark types
+  var commonMarkTypes = firstPartMarks.filter(function (mark) {
+    return filteredSelectedContent.every(function (child) {
+      return child.marks.some(function (m) {
+        return m.type.name === mark;
+      });
+    });
+  });
+  return commonMarkTypes;
 };

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

@@ -17,6 +17,7 @@ var _angleBracketsEditorCode = _interopRequireDefault(require("@atlaskit/icon/co
 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../../pm-plugins/commands");
 var _icons = require("../icons");
@@ -172,7 +173,7 @@ var getIcon = function getIcon(_ref) {
   };
 };
 var IconsMarkSchema = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.IconTypes.strong, 'strong'), _types.IconTypes.em, 'em'), _types.IconTypes.strike, 'strike'), _types.IconTypes.code, 'code'), _types.IconTypes.underline, 'underline'), _types.IconTypes.superscript, 'subsup'), _types.IconTypes.subscript, 'subsup');
-var buildMenuIconState = function buildMenuIconState(iconMark) {
+var buildMenuIconState = function buildMenuIconState(iconMark, hasMultiplePartsWithFormattingSelected, commonActiveMarks) {
   return function (_ref2) {
     var schema = _ref2.schema,
       textFormattingState = _ref2.textFormattingState;
@@ -187,7 +188,7 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
         hasSchemaMark: hasSchemaMark
       };
     }
-    var isActive = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
+    var isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10') ? false : textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
     var isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Disabled")];
     var isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Hidden")];
     return {
@@ -198,8 +199,8 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
     };
   };
 };
-var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI, toolbarType) {
-  var getState = buildMenuIconState(iconMark);
+var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks) {
+  var getState = buildMenuIconState(iconMark, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
   return function (_ref3) {
     var schema = _ref3.schema,
       textFormattingState = _ref3.textFormattingState,
@@ -235,21 +236,25 @@ var useFormattingIcons = exports.useFormattingIcons = function useFormattingIcon
     schema = _ref4.schema,
     intl = _ref4.intl,
     editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
-    toolbarType = _ref4.toolbarType;
+    toolbarType = _ref4.toolbarType,
+    hasMultiplePartsWithFormattingSelected = _ref4.hasMultiplePartsWithFormattingSelected,
+    commonActiveMarks = _ref4.commonActiveMarks;
   var props = {
     schema: schema,
     textFormattingState: textFormattingState,
     intl: intl,
     isToolbarDisabled: Boolean(isToolbarDisabled),
-    toolbarType: toolbarType
+    toolbarType: toolbarType,
+    hasMultiplePartsWithFormattingSelected: hasMultiplePartsWithFormattingSelected,
+    commonActiveMarks: commonActiveMarks
   };
-  var buildStrongIcon = buildIcon(_types.IconTypes.strong, editorAnalyticsAPI, toolbarType);
-  var buildEmIcon = buildIcon(_types.IconTypes.em, editorAnalyticsAPI, toolbarType);
-  var buildUnderlineIcon = buildIcon(_types.IconTypes.underline, editorAnalyticsAPI, toolbarType);
-  var buildStrikeIcon = buildIcon(_types.IconTypes.strike, editorAnalyticsAPI, toolbarType);
-  var buildCodeIcon = buildIcon(_types.IconTypes.code, editorAnalyticsAPI, toolbarType);
-  var buildSubscriptIcon = buildIcon(_types.IconTypes.subscript, editorAnalyticsAPI, toolbarType);
-  var buildSuperscriptIcon = buildIcon(_types.IconTypes.superscript, editorAnalyticsAPI, toolbarType);
+  var buildStrongIcon = buildIcon(_types.IconTypes.strong, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildEmIcon = buildIcon(_types.IconTypes.em, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildUnderlineIcon = buildIcon(_types.IconTypes.underline, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildStrikeIcon = buildIcon(_types.IconTypes.strike, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildCodeIcon = buildIcon(_types.IconTypes.code, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildSubscriptIcon = buildIcon(_types.IconTypes.subscript, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildSuperscriptIcon = buildIcon(_types.IconTypes.superscript, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
   var strongIcon = buildStrongIcon(props);
   var emIcon = buildEmIcon(props);
   var underlineIcon = buildUnderlineIcon(props);

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

@@ -18,7 +18,9 @@ var useIconList = exports.useIconList = function useIconList(_ref) {
       if (!icon || !icon.iconMark) {
         return acc;
       }
-      if (shouldUnselect && icon.isActive && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7')) {
+      if (
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      shouldUnselect && icon.isActive && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10')) {
         icon.isActive = false;
       }
       var isIconSingleButton = iconTypeList.includes(icon.iconMark);

package/dist/cjs/ui/Toolbar/single-toolbar-buttons.js

@@ -24,7 +24,7 @@ var SingleToolbarButtons = exports.SingleToolbarButtons = /*#__PURE__*/_react.de
   var items = _ref.items,
     isReducedSpacing = _ref.isReducedSpacing,
     editorView = _ref.editorView,
-    shouldUnselect = _ref.shouldUnselect;
+    hasMultiplePartsWithFormattingSelected = _ref.hasMultiplePartsWithFormattingSelected;
   var onClick = (0, _react.useCallback)(function (command) {
     return function () {
       command(editorView.state, editorView.dispatch);
@@ -49,11 +49,15 @@ var SingleToolbarButtons = exports.SingleToolbarButtons = /*#__PURE__*/_react.de
         buttonId: item.buttonId,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: onClick(item.command),
-        selected: shouldUnselect && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? false : item.isActive,
+        selected:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        hasMultiplePartsWithFormattingSelected && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10') ? false : item.isActive,
         disabled: item.isDisabled,
         title: item.tooltipElement,
         iconBefore: item.iconElement,
-        "aria-pressed": shouldUnselect && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? false : item.isActive,
+        "aria-pressed":
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        hasMultiplePartsWithFormattingSelected && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_10') ? false : item.isActive,
         "aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
         "aria-keyshortcuts": item['aria-keyshortcuts']
       });

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

@@ -7,6 +7,8 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { shallowEqual } from '@atlaskit/editor-common/utils';
 import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInlineCodeFromTextInputWithAnalytics } from '../editor-commands/text-formatting';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
@@ -93,6 +95,7 @@ export const plugin = (dispatch, editorAnalyticsAPI) => new SafePlugin({
   key: pluginKey,
   props: {
     handleKeyDown(view, event) {
+      var _pluginKey$getState;
       const {
         state,
         dispatch
@@ -101,6 +104,9 @@ export const plugin = (dispatch, editorAnalyticsAPI) => new SafePlugin({
         return commands.moveRight()(state, dispatch);
       } else if (event.key === keymapMoveLeft.common && !event.metaKey) {
         return commands.moveLeft()(state, dispatch);
+      } else if (event.key === 'u' && event.metaKey && (_pluginKey$getState = pluginKey.getState(state)) !== null && _pluginKey$getState !== void 0 && _pluginKey$getState.underlineDisabled && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_9')) {
+        // This is a workaround for browser behaviour with cmd+u (in Chrome only) where the underline mark being applied around the selection
+        event.preventDefault();
       }
       return false;
     },

package/dist/es2019/ui/FloatingToolbarComponent.js

@@ -15,7 +15,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DefaultFloatingToolbarButtonsNext } from './Toolbar/constants';
 import { FormattingTextDropdownMenu } from './Toolbar/dropdown-menu';
-import { hasMultiplePartsWithFormattingInSelection } from './Toolbar/formatting-in-selection-utils';
+import { getCommonActiveMarks, hasMultiplePartsWithFormattingInSelection } from './Toolbar/formatting-in-selection-utils';
 import { useClearIcon } from './Toolbar/hooks/clear-formatting-icon';
 import { useFormattingIcons } from './Toolbar/hooks/formatting-icons';
 import { useIconList } from './Toolbar/hooks/use-icon-list';
@@ -120,15 +120,8 @@ const FloatingToolbarTextFormat = ({
     formattingIsPresent,
     ...formattingIconState
   } = textFormattingState;
-  const defaultIcons = useFormattingIcons({
-    schema: editorView.state.schema,
-    intl,
-    isToolbarDisabled: FloatingToolbarSettings.disabled,
-    editorAnalyticsAPI,
-    textFormattingState: formattingIconState,
-    toolbarType: FloatingToolbarSettings.toolbarType
-  });
   let hasMultiplePartsWithFormattingSelected;
+  let commonActiveMarks = [];
   if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
     const {
       selection
@@ -141,7 +134,22 @@ const FloatingToolbarTextFormat = ({
     hasMultiplePartsWithFormattingSelected = hasMultiplePartsWithFormattingInSelection({
       selectedContent
     });
+    if (fg('platform_editor_controls_patch_10')) {
+      commonActiveMarks = getCommonActiveMarks({
+        selectedContent
+      });
+    }
   }
+  const defaultIcons = useFormattingIcons({
+    schema: editorView.state.schema,
+    intl,
+    isToolbarDisabled: FloatingToolbarSettings.disabled,
+    editorAnalyticsAPI,
+    textFormattingState: formattingIconState,
+    toolbarType: FloatingToolbarSettings.toolbarType,
+    hasMultiplePartsWithFormattingSelected: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_10') ? hasMultiplePartsWithFormattingSelected : undefined,
+    commonActiveMarks: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_10') ? commonActiveMarks : undefined
+  });
   const {
     dropdownItems,
     singleItems
@@ -173,7 +181,7 @@ const FloatingToolbarTextFormat = ({
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: false,
-    shouldUnselect: hasMultiplePartsWithFormattingSelected
+    hasMultiplePartsWithFormattingSelected: hasMultiplePartsWithFormattingSelected
   }), jsx(FormattingTextDropdownMenu, {
     editorView: editorView,
     items: items,
@@ -183,7 +191,7 @@ const FloatingToolbarTextFormat = ({
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
     toolbarType: FloatingToolbarSettings.toolbarType,
-    shouldUnselect: hasMultiplePartsWithFormattingSelected
+    hasMultiplePartsWithFormattingSelected: hasMultiplePartsWithFormattingSelected
   }));
 };
 export const FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);

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

@@ -19,7 +19,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
   hasMoreButton,
   intl,
   toolbarType,
-  shouldUnselect
+  hasMultiplePartsWithFormattingSelected
 }) => {
   var _items$0$items$, _items$0$items$2;
   const [isMenuOpen, toggleMenu, closeMenu] = useMenuState();
@@ -40,7 +40,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
   const defaultIconName = (_items$0$items$2 = items[0].items[0]) === null || _items$0$items$2 === void 0 ? void 0 : _items$0$items$2.value.name;
   let iconBefore;
   let activeIconName = defaultIconName;
-  if (shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
+  if (hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
     iconBefore = defaultIcon;
   } else {
     iconBefore = activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon;

package/dist/es2019/ui/Toolbar/formatting-in-selection-utils.js

@@ -16,4 +16,23 @@ export const hasMultiplePartsWithFormattingInSelection = ({
   }
   const marks = selectedContent.map(child => isMarkInIconTypes(child) ? child.marks : undefined).filter(Boolean);
   return marks.length > 1;
+};
+export const getCommonActiveMarks = ({
+  selectedContent
+}) => {
+  if (!selectedContent) {
+    return [];
+  }
+  // filter out fragment node contains only spaces
+  const filteredSelectedContent = selectedContent.filter(child => {
+    var _child$text;
+    return ((_child$text = child.text) === null || _child$text === void 0 ? void 0 : _child$text.trim()) !== '';
+  });
+
+  // find the active mark type in first part
+  const firstPartMarks = selectedContent[0].marks.map(mark => mark.type.name);
+
+  // check if all other parts have the same mark type as the first part and return the common mark types
+  const commonMarkTypes = firstPartMarks.filter(mark => filteredSelectedContent.every(child => child.marks.some(m => m.type.name === mark)));
+  return commonMarkTypes;
 };

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

@@ -15,6 +15,7 @@ import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--edi
 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 { fg } from '@atlaskit/platform-feature-flags';
 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';
@@ -164,7 +165,7 @@ const IconsMarkSchema = {
   [IconTypes.superscript]: 'subsup',
   [IconTypes.subscript]: 'subsup'
 };
-const buildMenuIconState = iconMark => ({
+const buildMenuIconState = (iconMark, hasMultiplePartsWithFormattingSelected, commonActiveMarks) => ({
   schema,
   textFormattingState
 }) => {
@@ -179,7 +180,7 @@ const buildMenuIconState = iconMark => ({
       hasSchemaMark
     };
   }
-  const isActive = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Active`];
+  const isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_10') ? false : textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Active`];
   const isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Disabled`];
   const isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Hidden`];
   return {
@@ -189,8 +190,8 @@ const buildMenuIconState = iconMark => ({
     hasSchemaMark
   };
 };
-const buildIcon = (iconMark, editorAnalyticsAPI, toolbarType) => {
-  const getState = buildMenuIconState(iconMark);
+const buildIcon = (iconMark, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks) => {
+  const getState = buildMenuIconState(iconMark, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
   return ({
     schema,
     textFormattingState,
@@ -225,22 +226,26 @@ export const useFormattingIcons = ({
   schema,
   intl,
   editorAnalyticsAPI,
-  toolbarType
+  toolbarType,
+  hasMultiplePartsWithFormattingSelected,
+  commonActiveMarks
 }) => {
   const props = {
     schema,
     textFormattingState,
     intl,
     isToolbarDisabled: Boolean(isToolbarDisabled),
-    toolbarType
+    toolbarType,
+    hasMultiplePartsWithFormattingSelected,
+    commonActiveMarks
   };
-  const buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI, toolbarType);
-  const buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI, toolbarType);
-  const buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI, toolbarType);
-  const buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI, toolbarType);
-  const buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI, toolbarType);
-  const buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI, toolbarType);
-  const buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI, toolbarType);
+  const buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  const buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  const buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  const buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  const buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  const buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  const buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
   const strongIcon = buildStrongIcon(props);
   const emIcon = buildEmIcon(props);
   const underlineIcon = buildUnderlineIcon(props);

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

@@ -11,7 +11,9 @@ export const useIconList = ({
       if (!icon || !icon.iconMark) {
         return acc;
       }
-      if (shouldUnselect && icon.isActive && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
+      if (
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      shouldUnselect && icon.isActive && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') && !fg('platform_editor_controls_patch_10')) {
         icon.isActive = false;
       }
       const isIconSingleButton = iconTypeList.includes(icon.iconMark);

package/dist/es2019/ui/Toolbar/single-toolbar-buttons.js

@@ -14,7 +14,7 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
   items,
   isReducedSpacing,
   editorView,
-  shouldUnselect
+  hasMultiplePartsWithFormattingSelected
 }) => {
   const onClick = useCallback(command => {
     return () => {
@@ -40,11 +40,15 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
         buttonId: item.buttonId,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: onClick(item.command),
-        selected: shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') ? false : item.isActive,
+        selected:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') && !fg('platform_editor_controls_patch_10') ? false : item.isActive,
         disabled: item.isDisabled,
         title: item.tooltipElement,
         iconBefore: item.iconElement,
-        "aria-pressed": shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') ? false : item.isActive,
+        "aria-pressed":
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') && !fg('platform_editor_controls_patch_10') ? false : item.isActive,
         "aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
         "aria-keyshortcuts": item['aria-keyshortcuts']
       });

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

@@ -7,6 +7,8 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { shallowEqual } from '@atlaskit/editor-common/utils';
 import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInlineCodeFromTextInputWithAnalytics } from '../editor-commands/text-formatting';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
@@ -93,12 +95,16 @@ export var plugin = function plugin(dispatch, editorAnalyticsAPI) {
     key: pluginKey,
     props: {
       handleKeyDown: function handleKeyDown(view, event) {
+        var _pluginKey$getState;
         var state = view.state,
           dispatch = view.dispatch;
         if (event.key === keymapMoveRight.common && !event.metaKey) {
           return commands.moveRight()(state, dispatch);
         } else if (event.key === keymapMoveLeft.common && !event.metaKey) {
           return commands.moveLeft()(state, dispatch);
+        } else if (event.key === 'u' && event.metaKey && (_pluginKey$getState = pluginKey.getState(state)) !== null && _pluginKey$getState !== void 0 && _pluginKey$getState.underlineDisabled && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_9')) {
+          // This is a workaround for browser behaviour with cmd+u (in Chrome only) where the underline mark being applied around the selection
+          event.preventDefault();
         }
         return false;
       },

package/dist/esm/ui/FloatingToolbarComponent.js

@@ -17,7 +17,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DefaultFloatingToolbarButtonsNext } from './Toolbar/constants';
 import { FormattingTextDropdownMenu } from './Toolbar/dropdown-menu';
-import { hasMultiplePartsWithFormattingInSelection } from './Toolbar/formatting-in-selection-utils';
+import { getCommonActiveMarks, hasMultiplePartsWithFormattingInSelection } from './Toolbar/formatting-in-selection-utils';
 import { useClearIcon } from './Toolbar/hooks/clear-formatting-icon';
 import { useFormattingIcons } from './Toolbar/hooks/formatting-icons';
 import { useIconList } from './Toolbar/hooks/use-icon-list';
@@ -118,15 +118,8 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
   var textFormattingState = useSharedState(api);
   var formattingIsPresent = textFormattingState.formattingIsPresent,
     formattingIconState = _objectWithoutProperties(textFormattingState, _excluded);
-  var defaultIcons = useFormattingIcons({
-    schema: editorView.state.schema,
-    intl: intl,
-    isToolbarDisabled: FloatingToolbarSettings.disabled,
-    editorAnalyticsAPI: editorAnalyticsAPI,
-    textFormattingState: formattingIconState,
-    toolbarType: FloatingToolbarSettings.toolbarType
-  });
   var hasMultiplePartsWithFormattingSelected;
+  var commonActiveMarks = [];
   if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
     var selection = editorView.state.selection;
     var from = selection.from,
@@ -135,7 +128,22 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     hasMultiplePartsWithFormattingSelected = hasMultiplePartsWithFormattingInSelection({
       selectedContent: selectedContent
     });
+    if (fg('platform_editor_controls_patch_10')) {
+      commonActiveMarks = getCommonActiveMarks({
+        selectedContent: selectedContent
+      });
+    }
   }
+  var defaultIcons = useFormattingIcons({
+    schema: editorView.state.schema,
+    intl: intl,
+    isToolbarDisabled: FloatingToolbarSettings.disabled,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    textFormattingState: formattingIconState,
+    toolbarType: FloatingToolbarSettings.toolbarType,
+    hasMultiplePartsWithFormattingSelected: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_10') ? hasMultiplePartsWithFormattingSelected : undefined,
+    commonActiveMarks: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_10') ? commonActiveMarks : undefined
+  });
   var _useIconList = useIconList({
       icons: defaultIcons,
       iconTypeList: DefaultFloatingToolbarButtonsNext,
@@ -166,7 +174,7 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     items: singleItems,
     editorView: editorView,
     isReducedSpacing: false,
-    shouldUnselect: hasMultiplePartsWithFormattingSelected
+    hasMultiplePartsWithFormattingSelected: hasMultiplePartsWithFormattingSelected
   }), jsx(FormattingTextDropdownMenu, {
     editorView: editorView,
     items: items,
@@ -176,7 +184,7 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
     toolbarType: FloatingToolbarSettings.toolbarType,
-    shouldUnselect: hasMultiplePartsWithFormattingSelected
+    hasMultiplePartsWithFormattingSelected: hasMultiplePartsWithFormattingSelected
   }));
 };
 export var FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);

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

@@ -21,7 +21,7 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
     hasMoreButton = _ref.hasMoreButton,
     intl = _ref.intl,
     toolbarType = _ref.toolbarType,
-    shouldUnselect = _ref.shouldUnselect;
+    hasMultiplePartsWithFormattingSelected = _ref.hasMultiplePartsWithFormattingSelected;
   var _useMenuState = useMenuState(),
     _useMenuState2 = _slicedToArray(_useMenuState, 3),
     isMenuOpen = _useMenuState2[0],
@@ -49,7 +49,7 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
   var defaultIconName = (_items$0$items$2 = items[0].items[0]) === null || _items$0$items$2 === void 0 ? void 0 : _items$0$items$2.value.name;
   var iconBefore;
   var activeIconName = defaultIconName;
-  if (shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
+  if (hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
     iconBefore = defaultIcon;
   } else {
     iconBefore = activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon;

package/dist/esm/ui/Toolbar/formatting-in-selection-utils.js

@@ -23,4 +23,30 @@ export var hasMultiplePartsWithFormattingInSelection = function hasMultipleParts
     return isMarkInIconTypes(child) ? child.marks : undefined;
   }).filter(Boolean);
   return marks.length > 1;
+};
+export var getCommonActiveMarks = function getCommonActiveMarks(_ref2) {
+  var selectedContent = _ref2.selectedContent;
+  if (!selectedContent) {
+    return [];
+  }
+  // filter out fragment node contains only spaces
+  var filteredSelectedContent = selectedContent.filter(function (child) {
+    var _child$text;
+    return ((_child$text = child.text) === null || _child$text === void 0 ? void 0 : _child$text.trim()) !== '';
+  });
+
+  // find the active mark type in first part
+  var firstPartMarks = selectedContent[0].marks.map(function (mark) {
+    return mark.type.name;
+  });
+
+  // check if all other parts have the same mark type as the first part and return the common mark types
+  var commonMarkTypes = firstPartMarks.filter(function (mark) {
+    return filteredSelectedContent.every(function (child) {
+      return child.marks.some(function (m) {
+        return m.type.name === mark;
+      });
+    });
+  });
+  return commonMarkTypes;
 };

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

@@ -16,6 +16,7 @@ import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--edi
 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 { fg } from '@atlaskit/platform-feature-flags';
 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';
@@ -164,7 +165,7 @@ var getIcon = function getIcon(_ref) {
   };
 };
 var IconsMarkSchema = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, IconTypes.strong, 'strong'), IconTypes.em, 'em'), IconTypes.strike, 'strike'), IconTypes.code, 'code'), IconTypes.underline, 'underline'), IconTypes.superscript, 'subsup'), IconTypes.subscript, 'subsup');
-var buildMenuIconState = function buildMenuIconState(iconMark) {
+var buildMenuIconState = function buildMenuIconState(iconMark, hasMultiplePartsWithFormattingSelected, commonActiveMarks) {
   return function (_ref2) {
     var schema = _ref2.schema,
       textFormattingState = _ref2.textFormattingState;
@@ -179,7 +180,7 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
         hasSchemaMark: hasSchemaMark
       };
     }
-    var isActive = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
+    var isActive = hasMultiplePartsWithFormattingSelected && !(commonActiveMarks !== null && commonActiveMarks !== void 0 && commonActiveMarks.includes(iconMark)) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_10') ? false : textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
     var isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Disabled")];
     var isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Hidden")];
     return {
@@ -190,8 +191,8 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
     };
   };
 };
-var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI, toolbarType) {
-  var getState = buildMenuIconState(iconMark);
+var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks) {
+  var getState = buildMenuIconState(iconMark, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
   return function (_ref3) {
     var schema = _ref3.schema,
       textFormattingState = _ref3.textFormattingState,
@@ -227,21 +228,25 @@ export var useFormattingIcons = function useFormattingIcons(_ref4) {
     schema = _ref4.schema,
     intl = _ref4.intl,
     editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
-    toolbarType = _ref4.toolbarType;
+    toolbarType = _ref4.toolbarType,
+    hasMultiplePartsWithFormattingSelected = _ref4.hasMultiplePartsWithFormattingSelected,
+    commonActiveMarks = _ref4.commonActiveMarks;
   var props = {
     schema: schema,
     textFormattingState: textFormattingState,
     intl: intl,
     isToolbarDisabled: Boolean(isToolbarDisabled),
-    toolbarType: toolbarType
+    toolbarType: toolbarType,
+    hasMultiplePartsWithFormattingSelected: hasMultiplePartsWithFormattingSelected,
+    commonActiveMarks: commonActiveMarks
   };
-  var buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI, toolbarType);
-  var buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI, toolbarType);
-  var buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI, toolbarType);
-  var buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI, toolbarType);
-  var buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI, toolbarType);
-  var buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI, toolbarType);
-  var buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI, toolbarType);
+  var buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
+  var buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks);
   var strongIcon = buildStrongIcon(props);
   var emIcon = buildEmIcon(props);
   var underlineIcon = buildUnderlineIcon(props);

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

@@ -11,7 +11,9 @@ export var useIconList = function useIconList(_ref) {
       if (!icon || !icon.iconMark) {
         return acc;
       }
-      if (shouldUnselect && icon.isActive && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
+      if (
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      shouldUnselect && icon.isActive && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') && !fg('platform_editor_controls_patch_10')) {
         icon.isActive = false;
       }
       var isIconSingleButton = iconTypeList.includes(icon.iconMark);

package/dist/esm/ui/Toolbar/single-toolbar-buttons.js

@@ -14,7 +14,7 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
     isReducedSpacing = _ref.isReducedSpacing,
     editorView = _ref.editorView,
-    shouldUnselect = _ref.shouldUnselect;
+    hasMultiplePartsWithFormattingSelected = _ref.hasMultiplePartsWithFormattingSelected;
   var onClick = useCallback(function (command) {
     return function () {
       command(editorView.state, editorView.dispatch);
@@ -39,11 +39,15 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
         buttonId: item.buttonId,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: onClick(item.command),
-        selected: shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') ? false : item.isActive,
+        selected:
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') && !fg('platform_editor_controls_patch_10') ? false : item.isActive,
         disabled: item.isDisabled,
         title: item.tooltipElement,
         iconBefore: item.iconElement,
-        "aria-pressed": shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') ? false : item.isActive,
+        "aria-pressed":
+        // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+        hasMultiplePartsWithFormattingSelected && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') && !fg('platform_editor_controls_patch_10') ? false : item.isActive,
         "aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
         "aria-keyshortcuts": item['aria-keyshortcuts']
       });

package/dist/types/ui/Toolbar/dropdown-menu.d.ts

@@ -15,7 +15,7 @@ type DropdownMenuProps = {
     popupsScrollableElement?: HTMLElement;
     hasMoreButton: boolean;
     toolbarType: ToolbarType;
-    shouldUnselect?: boolean;
+    hasMultiplePartsWithFormattingSelected?: boolean;
 } & WrappedComponentProps;
-export declare const FormattingTextDropdownMenu: React.MemoExoticComponent<({ editorView, moreButtonLabel, isReducedSpacing, items, hasFormattingActive, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, hasMoreButton, intl, toolbarType, shouldUnselect, }: DropdownMenuProps) => React.JSX.Element>;
+export declare const FormattingTextDropdownMenu: React.MemoExoticComponent<({ editorView, moreButtonLabel, isReducedSpacing, items, hasFormattingActive, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, hasMoreButton, intl, toolbarType, hasMultiplePartsWithFormattingSelected, }: DropdownMenuProps) => React.JSX.Element>;
 export {};

package/dist/types/ui/Toolbar/formatting-in-selection-utils.d.ts

@@ -2,3 +2,6 @@ import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 export declare const hasMultiplePartsWithFormattingInSelection: ({ selectedContent, }: {
     selectedContent?: PMNode[] | undefined;
 }) => boolean;
+export declare const getCommonActiveMarks: ({ selectedContent }: {
+    selectedContent?: PMNode[] | undefined;
+}) => string[];

package/dist/types/ui/Toolbar/hooks/formatting-icons.d.ts

@@ -8,8 +8,10 @@ interface FormattingIconHookProps extends IconHookProps {
     textFormattingState: TextFormattingState | undefined;
     schema: Schema;
     toolbarType: ToolbarType;
+    hasMultiplePartsWithFormattingSelected?: boolean;
+    commonActiveMarks?: string[];
 }
-export declare const useFormattingIcons: ({ isToolbarDisabled, textFormattingState, schema, intl, editorAnalyticsAPI, toolbarType, }: FormattingIconHookProps) => Array<MenuIconItem | null>;
+export declare const useFormattingIcons: ({ isToolbarDisabled, textFormattingState, schema, intl, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks, }: FormattingIconHookProps) => Array<MenuIconItem | null>;
 type Props = {
     textFormattingState: TextFormattingState | undefined;
     iconTypeList: IconTypes[];

package/dist/types/ui/Toolbar/single-toolbar-buttons.d.ts

@@ -6,9 +6,9 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MenuIconItem } from './types';
-export declare const SingleToolbarButtons: React.MemoExoticComponent<({ items, isReducedSpacing, editorView, shouldUnselect, }: {
+export declare const SingleToolbarButtons: React.MemoExoticComponent<({ items, isReducedSpacing, editorView, hasMultiplePartsWithFormattingSelected, }: {
     items: MenuIconItem[];
     isReducedSpacing: boolean;
     editorView: EditorView;
-    shouldUnselect?: boolean | undefined;
+    hasMultiplePartsWithFormattingSelected?: boolean | undefined;
 }) => jsx.JSX.Element>;

package/dist/types-ts4.5/ui/Toolbar/dropdown-menu.d.ts

@@ -15,7 +15,7 @@ type DropdownMenuProps = {
     popupsScrollableElement?: HTMLElement;
     hasMoreButton: boolean;
     toolbarType: ToolbarType;
-    shouldUnselect?: boolean;
+    hasMultiplePartsWithFormattingSelected?: boolean;
 } & WrappedComponentProps;
-export declare const FormattingTextDropdownMenu: React.MemoExoticComponent<({ editorView, moreButtonLabel, isReducedSpacing, items, hasFormattingActive, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, hasMoreButton, intl, toolbarType, shouldUnselect, }: DropdownMenuProps) => React.JSX.Element>;
+export declare const FormattingTextDropdownMenu: React.MemoExoticComponent<({ editorView, moreButtonLabel, isReducedSpacing, items, hasFormattingActive, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, hasMoreButton, intl, toolbarType, hasMultiplePartsWithFormattingSelected, }: DropdownMenuProps) => React.JSX.Element>;
 export {};

package/dist/types-ts4.5/ui/Toolbar/formatting-in-selection-utils.d.ts

@@ -2,3 +2,6 @@ import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 export declare const hasMultiplePartsWithFormattingInSelection: ({ selectedContent, }: {
     selectedContent?: PMNode[] | undefined;
 }) => boolean;
+export declare const getCommonActiveMarks: ({ selectedContent }: {
+    selectedContent?: PMNode[] | undefined;
+}) => string[];

package/dist/types-ts4.5/ui/Toolbar/hooks/formatting-icons.d.ts

@@ -8,8 +8,10 @@ interface FormattingIconHookProps extends IconHookProps {
     textFormattingState: TextFormattingState | undefined;
     schema: Schema;
     toolbarType: ToolbarType;
+    hasMultiplePartsWithFormattingSelected?: boolean;
+    commonActiveMarks?: string[];
 }
-export declare const useFormattingIcons: ({ isToolbarDisabled, textFormattingState, schema, intl, editorAnalyticsAPI, toolbarType, }: FormattingIconHookProps) => Array<MenuIconItem | null>;
+export declare const useFormattingIcons: ({ isToolbarDisabled, textFormattingState, schema, intl, editorAnalyticsAPI, toolbarType, hasMultiplePartsWithFormattingSelected, commonActiveMarks, }: FormattingIconHookProps) => Array<MenuIconItem | null>;
 type Props = {
     textFormattingState: TextFormattingState | undefined;
     iconTypeList: IconTypes[];

package/dist/types-ts4.5/ui/Toolbar/single-toolbar-buttons.d.ts

@@ -6,9 +6,9 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MenuIconItem } from './types';
-export declare const SingleToolbarButtons: React.MemoExoticComponent<({ items, isReducedSpacing, editorView, shouldUnselect, }: {
+export declare const SingleToolbarButtons: React.MemoExoticComponent<({ items, isReducedSpacing, editorView, hasMultiplePartsWithFormattingSelected, }: {
     items: MenuIconItem[];
     isReducedSpacing: boolean;
     editorView: EditorView;
-    shouldUnselect?: boolean | undefined;
+    hasMultiplePartsWithFormattingSelected?: boolean | undefined;
 }) => jsx.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-formatting",
-	"version": "2.2.6",
+	"version": "2.2.8",
 	"description": "Text-formatting plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.2.0",
+		"@atlaskit/editor-common": "^105.8.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-base": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
@@ -42,11 +42,11 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^26.0.0",
+		"@atlaskit/icon": "^26.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
-		"@atlaskit/tmp-editor-statsig": "^4.21.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/tmp-editor-statsig": "^4.24.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -110,6 +110,12 @@
 		"platform_editor_controls_patch_8": {
 			"type": "boolean"
 		},
+		"platform_editor_controls_patch_9": {
+			"type": "boolean"
+		},
+		"platform_editor_controls_patch_10": {
+			"type": "boolean"
+		},
 		"editor_inline_comments_on_inline_nodes": {
 			"type": "boolean"
 		},