@atlaskit/editor-plugin-text-formatting 2.2.0 → 2.2.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 2.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.2.1
+
+### Patch Changes
+
+- [#147651](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147651)
+  [`a17e1c3a38139`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a17e1c3a38139) -
+  [ux] Unselect text formatting icon in floating toolbar when multiple parts with format in
+  selection
+- Updated dependencies
+
 ## 2.2.0
 
 ### Minor Changes

package/dist/cjs/ui/FloatingToolbarComponent.js

@@ -10,9 +10,12 @@ 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 _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("./Toolbar/constants");
 var _dropdownMenu = require("./Toolbar/dropdown-menu");
+var _formattingInSelectionUtils = require("./Toolbar/formatting-in-selection-utils");
 var _clearFormattingIcon = require("./Toolbar/hooks/clear-formatting-icon");
 var _formattingIcons = require("./Toolbar/hooks/formatting-icons");
 var _useIconList2 = require("./Toolbar/hooks/use-icon-list");
@@ -51,9 +54,20 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     textFormattingState: textFormattingState,
     toolbarType: FloatingToolbarSettings.toolbarType
   });
+  var hasMultiplePartsWithFormattingSelected;
+  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,
+      to = selection.to;
+    var selectedContent = selection instanceof _state.TextSelection ? editorView.state.doc.slice(from, to).content.content.slice() : undefined;
+    hasMultiplePartsWithFormattingSelected = (0, _formattingInSelectionUtils.hasMultiplePartsWithFormattingInSelection)({
+      selectedContent: selectedContent
+    });
+  }
   var _useIconList = (0, _useIconList2.useIconList)({
       icons: defaultIcons,
-      iconTypeList: _constants.DefaultFloatingToolbarButtonsNext
+      iconTypeList: _constants.DefaultFloatingToolbarButtonsNext,
+      shouldUnselect: hasMultiplePartsWithFormattingSelected
     }),
     dropdownItems = _useIconList.dropdownItems,
     singleItems = _useIconList.singleItems;
@@ -78,7 +92,8 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
   return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_singleToolbarButtons.SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
-    isReducedSpacing: false
+    isReducedSpacing: false,
+    shouldUnselect: hasMultiplePartsWithFormattingSelected
   }), (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
     editorView: editorView,
     items: items,
@@ -87,7 +102,8 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     hasFormattingActive: FloatingToolbarSettings.hasMoreButton,
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
-    toolbarType: FloatingToolbarSettings.toolbarType
+    toolbarType: FloatingToolbarSettings.toolbarType,
+    shouldUnselect: hasMultiplePartsWithFormattingSelected
   }));
 };
 var FloatingToolbarTextFormalWithIntl = exports.FloatingToolbarTextFormalWithIntl = (0, _reactIntlNext.injectIntl)(FloatingToolbarTextFormat);

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

@@ -19,7 +19,7 @@ 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); }
 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; }
 var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
-  var _items$0$items$;
+  var _items$0$items$, _items$0$items$2;
   var editorView = _ref.editorView,
     moreButtonLabel = _ref.moreButtonLabel,
     isReducedSpacing = _ref.isReducedSpacing,
@@ -30,7 +30,8 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
     popupsScrollableElement = _ref.popupsScrollableElement,
     hasMoreButton = _ref.hasMoreButton,
     intl = _ref.intl,
-    toolbarType = _ref.toolbarType;
+    toolbarType = _ref.toolbarType,
+    shouldUnselect = _ref.shouldUnselect;
   var _useMenuState = (0, _menuState.useMenuState)(),
     _useMenuState2 = (0, _slicedToArray2.default)(_useMenuState, 3),
     isMenuOpen = _useMenuState2[0],
@@ -55,6 +56,15 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
     return item.isActive;
   });
   var defaultIcon = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? (_items$0$items$ = items[0].items[0]) === null || _items$0$items$ === void 0 ? void 0 : _items$0$items$.elemBefore : undefined;
+  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')) {
+    iconBefore = defaultIcon;
+  } else {
+    iconBefore = activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon;
+    activeIconName = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.value.name) || defaultIconName;
+  }
   return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -112,6 +122,7 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
       }
     },
     toolbarType: toolbarType,
-    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon
+    iconBefore: iconBefore,
+    activeIconName: activeIconName
   }));
 });

package/dist/cjs/ui/Toolbar/dropdown-toolbar-button.js

@@ -29,7 +29,8 @@ var DropdownToolbarButton = exports.DropdownToolbarButton = function DropdownToo
     onClick = _ref.onClick,
     onKeyDown = _ref.onKeyDown,
     toolbarType = _ref.toolbarType,
-    iconBefore = _ref.iconBefore;
+    iconBefore = _ref.iconBefore,
+    activeIconName = _ref.activeIconName;
   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,8 @@ var DropdownToolbarButton = exports.DropdownToolbarButton = function DropdownToo
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       _styles.triggerWrapperStylesWithPadding :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
-      _styles.triggerWrapperStyles
+      _styles.triggerWrapperStyles,
+      "data-testid": activeIconName ? "editor-toolbar__".concat(activeIconName) : undefined
     }, iconBefore ? iconBefore : (0, _react2.jsx)(_textItalicEditorItalic.default, {
       color: "currentColor",
       spacing: "spacious",

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasMultiplePartsWithFormattingInSelection = void 0;
+var _types = require("./types");
+var isMarkInIconTypes = function isMarkInIconTypes(node) {
+  return node.marks.some(function (mark) {
+    return Object.values(_types.IconTypes).includes(mark.type.name);
+  });
+};
+var hasMultiplePartsWithFormattingInSelection = exports.hasMultiplePartsWithFormattingInSelection = function hasMultiplePartsWithFormattingInSelection(_ref) {
+  var selectedContent = _ref.selectedContent;
+  if (!selectedContent) {
+    return false;
+  }
+  var marks = selectedContent.map(function (child) {
+    return isMarkInIconTypes(child) ? child.marks : undefined;
+  }).filter(Boolean);
+  return marks.length > 1;
+};

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

@@ -7,14 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.useIconList = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var useIconList = exports.useIconList = function useIconList(_ref) {
   var icons = _ref.icons,
-    iconTypeList = _ref.iconTypeList;
+    iconTypeList = _ref.iconTypeList,
+    shouldUnselect = _ref.shouldUnselect;
   return (0, _react.useMemo)(function () {
     return icons.reduce(function (acc, icon) {
       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')) {
+        icon.isActive = false;
+      }
       var isIconSingleButton = iconTypeList.includes(icon.iconMark);
       if (isIconSingleButton) {
         return {
@@ -30,5 +36,5 @@ var useIconList = exports.useIconList = function useIconList(_ref) {
       dropdownItems: [],
       singleItems: []
     });
-  }, [icons, iconTypeList]);
+  }, [icons, shouldUnselect, iconTypeList]);
 };

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

@@ -10,6 +10,7 @@ var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 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; }
 /**
@@ -22,7 +23,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var SingleToolbarButtons = exports.SingleToolbarButtons = /*#__PURE__*/_react.default.memo(function (_ref) {
   var items = _ref.items,
     isReducedSpacing = _ref.isReducedSpacing,
-    editorView = _ref.editorView;
+    editorView = _ref.editorView,
+    shouldUnselect = _ref.shouldUnselect;
   var onClick = (0, _react.useCallback)(function (command) {
     return function () {
       command(editorView.state, editorView.dispatch);
@@ -47,11 +49,11 @@ var SingleToolbarButtons = exports.SingleToolbarButtons = /*#__PURE__*/_react.de
         buttonId: item.buttonId,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: onClick(item.command),
-        selected: item.isActive,
+        selected: shouldUnselect && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? false : item.isActive,
         disabled: item.isDisabled,
         title: item.tooltipElement,
         iconBefore: item.iconElement,
-        "aria-pressed": item.isActive,
+        "aria-pressed": shouldUnselect && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? 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/ui/FloatingToolbarComponent.js

@@ -9,9 +9,12 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+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 { useClearIcon } from './Toolbar/hooks/clear-formatting-icon';
 import { useFormattingIcons } from './Toolbar/hooks/formatting-icons';
 import { useIconList } from './Toolbar/hooks/use-icon-list';
@@ -43,12 +46,27 @@ const FloatingToolbarTextFormat = ({
     textFormattingState,
     toolbarType: FloatingToolbarSettings.toolbarType
   });
+  let hasMultiplePartsWithFormattingSelected;
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
+    const {
+      selection
+    } = editorView.state;
+    const {
+      from,
+      to
+    } = selection;
+    const selectedContent = selection instanceof TextSelection ? editorView.state.doc.slice(from, to).content.content.slice() : undefined;
+    hasMultiplePartsWithFormattingSelected = hasMultiplePartsWithFormattingInSelection({
+      selectedContent
+    });
+  }
   const {
     dropdownItems,
     singleItems
   } = useIconList({
     icons: defaultIcons,
-    iconTypeList: DefaultFloatingToolbarButtonsNext
+    iconTypeList: DefaultFloatingToolbarButtonsNext,
+    shouldUnselect: hasMultiplePartsWithFormattingSelected
   });
   const clearIcon = useClearIcon({
     textFormattingState,
@@ -71,7 +89,8 @@ const FloatingToolbarTextFormat = ({
   return jsx(React.Fragment, null, jsx(SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
-    isReducedSpacing: false
+    isReducedSpacing: false,
+    shouldUnselect: hasMultiplePartsWithFormattingSelected
   }), jsx(FormattingTextDropdownMenu, {
     editorView: editorView,
     items: items,
@@ -80,7 +99,8 @@ const FloatingToolbarTextFormat = ({
     hasFormattingActive: FloatingToolbarSettings.hasMoreButton,
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
-    toolbarType: FloatingToolbarSettings.toolbarType
+    toolbarType: FloatingToolbarSettings.toolbarType,
+    shouldUnselect: hasMultiplePartsWithFormattingSelected
   }));
 };
 export const FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);

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

@@ -18,9 +18,10 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
   popupsScrollableElement,
   hasMoreButton,
   intl,
-  toolbarType
+  toolbarType,
+  shouldUnselect
 }) => {
-  var _items$0$items$;
+  var _items$0$items$, _items$0$items$2;
   const [isMenuOpen, toggleMenu, closeMenu] = useMenuState();
   const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
   const onItemActivated = useCallback(({
@@ -36,6 +37,15 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
   }, [editorView.state, editorView.dispatch, closeMenu]);
   const activeItem = items[0].items.find(item => item.isActive);
   const defaultIcon = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') ? (_items$0$items$ = items[0].items[0]) === null || _items$0$items$ === void 0 ? void 0 : _items$0$items$.elemBefore : undefined;
+  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')) {
+    iconBefore = defaultIcon;
+  } else {
+    iconBefore = activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon;
+    activeIconName = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.value.name) || defaultIconName;
+  }
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -93,6 +103,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
       }
     },
     toolbarType: toolbarType,
-    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon
+    iconBefore: iconBefore,
+    activeIconName: activeIconName
   }));
 });

package/dist/es2019/ui/Toolbar/dropdown-toolbar-button.js

@@ -21,7 +21,8 @@ export const DropdownToolbarButton = ({
   onClick,
   onKeyDown,
   toolbarType,
-  iconBefore
+  iconBefore,
+  activeIconName
 }) => {
   const reducedSpacing = toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
   return jsx(ToolbarButton
@@ -45,7 +46,8 @@ export const DropdownToolbarButton = ({
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       triggerWrapperStylesWithPadding :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
-      triggerWrapperStyles
+      triggerWrapperStyles,
+      "data-testid": activeIconName ? `editor-toolbar__${activeIconName}` : undefined
     }, iconBefore ? iconBefore : jsx(ItalicIcon, {
       color: "currentColor",
       spacing: "spacious",

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

@@ -0,0 +1,11 @@
+import { IconTypes } from './types';
+const isMarkInIconTypes = node => node.marks.some(mark => Object.values(IconTypes).includes(mark.type.name));
+export const hasMultiplePartsWithFormattingInSelection = ({
+  selectedContent
+}) => {
+  if (!selectedContent) {
+    return false;
+  }
+  const marks = selectedContent.map(child => isMarkInIconTypes(child) ? child.marks : undefined).filter(Boolean);
+  return marks.length > 1;
+};

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

@@ -1,13 +1,19 @@
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const useIconList = ({
   icons,
-  iconTypeList
+  iconTypeList,
+  shouldUnselect
 }) => {
   return useMemo(() => {
     return icons.reduce((acc, icon) => {
       if (!icon || !icon.iconMark) {
         return acc;
       }
+      if (shouldUnselect && icon.isActive && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
+        icon.isActive = false;
+      }
       const isIconSingleButton = iconTypeList.includes(icon.iconMark);
       if (isIconSingleButton) {
         return {
@@ -23,5 +29,5 @@ export const useIconList = ({
       dropdownItems: [],
       singleItems: []
     });
-  }, [icons, iconTypeList]);
+  }, [icons, shouldUnselect, iconTypeList]);
 };

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

@@ -9,10 +9,12 @@ import { jsx } from '@emotion/react';
 import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
   items,
   isReducedSpacing,
-  editorView
+  editorView,
+  shouldUnselect
 }) => {
   const onClick = useCallback(command => {
     return () => {
@@ -38,11 +40,11 @@ export const SingleToolbarButtons = /*#__PURE__*/React.memo(({
         buttonId: item.buttonId,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: onClick(item.command),
-        selected: item.isActive,
+        selected: shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') ? false : item.isActive,
         disabled: item.isDisabled,
         title: item.tooltipElement,
         iconBefore: item.iconElement,
-        "aria-pressed": item.isActive,
+        "aria-pressed": shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') ? 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/ui/FloatingToolbarComponent.js

@@ -9,9 +9,12 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+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 { useClearIcon } from './Toolbar/hooks/clear-formatting-icon';
 import { useFormattingIcons } from './Toolbar/hooks/formatting-icons';
 import { useIconList } from './Toolbar/hooks/use-icon-list';
@@ -41,9 +44,20 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     textFormattingState: textFormattingState,
     toolbarType: FloatingToolbarSettings.toolbarType
   });
+  var hasMultiplePartsWithFormattingSelected;
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
+    var selection = editorView.state.selection;
+    var from = selection.from,
+      to = selection.to;
+    var selectedContent = selection instanceof TextSelection ? editorView.state.doc.slice(from, to).content.content.slice() : undefined;
+    hasMultiplePartsWithFormattingSelected = hasMultiplePartsWithFormattingInSelection({
+      selectedContent: selectedContent
+    });
+  }
   var _useIconList = useIconList({
       icons: defaultIcons,
-      iconTypeList: DefaultFloatingToolbarButtonsNext
+      iconTypeList: DefaultFloatingToolbarButtonsNext,
+      shouldUnselect: hasMultiplePartsWithFormattingSelected
     }),
     dropdownItems = _useIconList.dropdownItems,
     singleItems = _useIconList.singleItems;
@@ -68,7 +82,8 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
   return jsx(React.Fragment, null, jsx(SingleToolbarButtons, {
     items: singleItems,
     editorView: editorView,
-    isReducedSpacing: false
+    isReducedSpacing: false,
+    shouldUnselect: hasMultiplePartsWithFormattingSelected
   }), jsx(FormattingTextDropdownMenu, {
     editorView: editorView,
     items: items,
@@ -77,7 +92,8 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     hasFormattingActive: FloatingToolbarSettings.hasMoreButton,
     hasMoreButton: FloatingToolbarSettings.hasMoreButton,
     intl: intl,
-    toolbarType: FloatingToolbarSettings.toolbarType
+    toolbarType: FloatingToolbarSettings.toolbarType,
+    shouldUnselect: hasMultiplePartsWithFormattingSelected
   }));
 };
 export var FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);

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

@@ -9,7 +9,7 @@ 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) {
-  var _items$0$items$;
+  var _items$0$items$, _items$0$items$2;
   var editorView = _ref.editorView,
     moreButtonLabel = _ref.moreButtonLabel,
     isReducedSpacing = _ref.isReducedSpacing,
@@ -20,7 +20,8 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
     popupsScrollableElement = _ref.popupsScrollableElement,
     hasMoreButton = _ref.hasMoreButton,
     intl = _ref.intl,
-    toolbarType = _ref.toolbarType;
+    toolbarType = _ref.toolbarType,
+    shouldUnselect = _ref.shouldUnselect;
   var _useMenuState = useMenuState(),
     _useMenuState2 = _slicedToArray(_useMenuState, 3),
     isMenuOpen = _useMenuState2[0],
@@ -45,6 +46,15 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
     return item.isActive;
   });
   var defaultIcon = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') ? (_items$0$items$ = items[0].items[0]) === null || _items$0$items$ === void 0 ? void 0 : _items$0$items$.elemBefore : undefined;
+  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')) {
+    iconBefore = defaultIcon;
+  } else {
+    iconBefore = activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon;
+    activeIconName = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.value.name) || defaultIconName;
+  }
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -102,6 +112,7 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
       }
     },
     toolbarType: toolbarType,
-    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon
+    iconBefore: iconBefore,
+    activeIconName: activeIconName
   }));
 });

package/dist/esm/ui/Toolbar/dropdown-toolbar-button.js

@@ -21,7 +21,8 @@ export var DropdownToolbarButton = function DropdownToolbarButton(_ref) {
     onClick = _ref.onClick,
     onKeyDown = _ref.onKeyDown,
     toolbarType = _ref.toolbarType,
-    iconBefore = _ref.iconBefore;
+    iconBefore = _ref.iconBefore,
+    activeIconName = _ref.activeIconName;
   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,8 @@ export var DropdownToolbarButton = function DropdownToolbarButton(_ref) {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
       triggerWrapperStylesWithPadding :
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
-      triggerWrapperStyles
+      triggerWrapperStyles,
+      "data-testid": activeIconName ? "editor-toolbar__".concat(activeIconName) : undefined
     }, iconBefore ? iconBefore : jsx(ItalicIcon, {
       color: "currentColor",
       spacing: "spacious",

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

@@ -0,0 +1,16 @@
+import { IconTypes } from './types';
+var isMarkInIconTypes = function isMarkInIconTypes(node) {
+  return node.marks.some(function (mark) {
+    return Object.values(IconTypes).includes(mark.type.name);
+  });
+};
+export var hasMultiplePartsWithFormattingInSelection = function hasMultiplePartsWithFormattingInSelection(_ref) {
+  var selectedContent = _ref.selectedContent;
+  if (!selectedContent) {
+    return false;
+  }
+  var marks = selectedContent.map(function (child) {
+    return isMarkInIconTypes(child) ? child.marks : undefined;
+  }).filter(Boolean);
+  return marks.length > 1;
+};

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

@@ -1,13 +1,19 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var useIconList = function useIconList(_ref) {
   var icons = _ref.icons,
-    iconTypeList = _ref.iconTypeList;
+    iconTypeList = _ref.iconTypeList,
+    shouldUnselect = _ref.shouldUnselect;
   return useMemo(function () {
     return icons.reduce(function (acc, icon) {
       if (!icon || !icon.iconMark) {
         return acc;
       }
+      if (shouldUnselect && icon.isActive && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7')) {
+        icon.isActive = false;
+      }
       var isIconSingleButton = iconTypeList.includes(icon.iconMark);
       if (isIconSingleButton) {
         return {
@@ -23,5 +29,5 @@ export var useIconList = function useIconList(_ref) {
       dropdownItems: [],
       singleItems: []
     });
-  }, [icons, iconTypeList]);
+  }, [icons, shouldUnselect, iconTypeList]);
 };

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

@@ -9,10 +9,12 @@ import { jsx } from '@emotion/react';
 import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
     isReducedSpacing = _ref.isReducedSpacing,
-    editorView = _ref.editorView;
+    editorView = _ref.editorView,
+    shouldUnselect = _ref.shouldUnselect;
   var onClick = useCallback(function (command) {
     return function () {
       command(editorView.state, editorView.dispatch);
@@ -37,11 +39,11 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
         buttonId: item.buttonId,
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: onClick(item.command),
-        selected: item.isActive,
+        selected: shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') ? false : item.isActive,
         disabled: item.isDisabled,
         title: item.tooltipElement,
         iconBefore: item.iconElement,
-        "aria-pressed": item.isActive,
+        "aria-pressed": shouldUnselect && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_7') ? 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,6 +15,7 @@ type DropdownMenuProps = {
     popupsScrollableElement?: HTMLElement;
     hasMoreButton: boolean;
     toolbarType: ToolbarType;
+    shouldUnselect?: boolean;
 } & WrappedComponentProps;
-export declare const FormattingTextDropdownMenu: React.MemoExoticComponent<({ editorView, moreButtonLabel, isReducedSpacing, items, hasFormattingActive, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, hasMoreButton, intl, toolbarType, }: DropdownMenuProps) => React.JSX.Element>;
+export declare const FormattingTextDropdownMenu: React.MemoExoticComponent<({ editorView, moreButtonLabel, isReducedSpacing, items, hasFormattingActive, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, hasMoreButton, intl, toolbarType, shouldUnselect, }: DropdownMenuProps) => React.JSX.Element>;
 export {};

package/dist/types/ui/Toolbar/dropdown-toolbar-button.d.ts

@@ -15,6 +15,7 @@ type DropdownButtonProps = {
     onKeyDown?: (event: React.KeyboardEvent) => void;
     toolbarType: ToolbarType;
     iconBefore?: ReactElement;
+    activeIconName?: string;
 };
-export declare const DropdownToolbarButton: ({ label, isReducedSpacing, isDisabled, isSelected, "aria-expanded": ariaExpanded, onClick, onKeyDown, toolbarType, iconBefore, }: DropdownButtonProps) => jsx.JSX.Element;
+export declare const DropdownToolbarButton: ({ label, isReducedSpacing, isDisabled, isSelected, "aria-expanded": ariaExpanded, onClick, onKeyDown, toolbarType, iconBefore, activeIconName, }: DropdownButtonProps) => jsx.JSX.Element;
 export {};

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

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

package/dist/types/ui/Toolbar/hooks/use-icon-list.d.ts

@@ -2,10 +2,11 @@ import type { IconTypes, MenuIconItem } from '../types';
 interface UseIconsParams {
     icons: Array<MenuIconItem | null>;
     iconTypeList: IconTypes[];
+    shouldUnselect?: boolean;
 }
 export type IconsPositions = {
     dropdownItems: Array<MenuIconItem>;
     singleItems: Array<MenuIconItem>;
 };
-export declare const useIconList: ({ icons, iconTypeList }: UseIconsParams) => IconsPositions;
+export declare const useIconList: ({ icons, iconTypeList, shouldUnselect }: UseIconsParams) => IconsPositions;
 export {};

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

@@ -6,8 +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, }: {
+export declare const SingleToolbarButtons: React.MemoExoticComponent<({ items, isReducedSpacing, editorView, shouldUnselect, }: {
     items: MenuIconItem[];
     isReducedSpacing: boolean;
     editorView: EditorView;
+    shouldUnselect?: boolean | undefined;
 }) => jsx.JSX.Element>;

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

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

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

@@ -15,6 +15,7 @@ type DropdownButtonProps = {
     onKeyDown?: (event: React.KeyboardEvent) => void;
     toolbarType: ToolbarType;
     iconBefore?: ReactElement;
+    activeIconName?: string;
 };
-export declare const DropdownToolbarButton: ({ label, isReducedSpacing, isDisabled, isSelected, "aria-expanded": ariaExpanded, onClick, onKeyDown, toolbarType, iconBefore, }: DropdownButtonProps) => jsx.JSX.Element;
+export declare const DropdownToolbarButton: ({ label, isReducedSpacing, isDisabled, isSelected, "aria-expanded": ariaExpanded, onClick, onKeyDown, toolbarType, iconBefore, activeIconName, }: DropdownButtonProps) => jsx.JSX.Element;
 export {};

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

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

package/dist/types-ts4.5/ui/Toolbar/hooks/use-icon-list.d.ts

@@ -2,10 +2,11 @@ import type { IconTypes, MenuIconItem } from '../types';
 interface UseIconsParams {
     icons: Array<MenuIconItem | null>;
     iconTypeList: IconTypes[];
+    shouldUnselect?: boolean;
 }
 export type IconsPositions = {
     dropdownItems: Array<MenuIconItem>;
     singleItems: Array<MenuIconItem>;
 };
-export declare const useIconList: ({ icons, iconTypeList }: UseIconsParams) => IconsPositions;
+export declare const useIconList: ({ icons, iconTypeList, shouldUnselect }: UseIconsParams) => IconsPositions;
 export {};

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

@@ -6,8 +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, }: {
+export declare const SingleToolbarButtons: React.MemoExoticComponent<({ items, isReducedSpacing, editorView, shouldUnselect, }: {
     items: MenuIconItem[];
     isReducedSpacing: boolean;
     editorView: EditorView;
+    shouldUnselect?: boolean | undefined;
 }) => jsx.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-formatting",
-	"version": "2.2.0",
+	"version": "2.2.2",
 	"description": "Text-formatting plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,19 +34,19 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.4.0",
+		"@atlaskit/editor-common": "^104.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^3.4.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^3.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
-		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.16.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -112,6 +112,9 @@
 		},
 		"platform_editor_controls_patch_4": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_7": {
+			"type": "boolean"
 		}
 	}
 }