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

package/dist/es2019/ui/FloatingToolbarComponent.js

@@ -7,8 +7,9 @@ import React, { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -29,21 +30,102 @@ const FloatingToolbarSettings = {
   moreButtonLabel: '',
   toolbarType: ToolbarType.FLOATING
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const isInitialised = useSharedPluginStateSelector(api, 'textFormatting.isInitialised');
+  const formattingIsPresent = useSharedPluginStateSelector(api, 'textFormatting.formattingIsPresent');
+  const emActive = useSharedPluginStateSelector(api, 'textFormatting.emActive');
+  const emDisabled = useSharedPluginStateSelector(api, 'textFormatting.emDisabled');
+  const emHidden = useSharedPluginStateSelector(api, 'textFormatting.emHidden');
+  const codeActive = useSharedPluginStateSelector(api, 'textFormatting.codeActive');
+  const codeDisabled = useSharedPluginStateSelector(api, 'textFormatting.codeDisabled');
+  const codeHidden = useSharedPluginStateSelector(api, 'textFormatting.codeHidden');
+  const underlineActive = useSharedPluginStateSelector(api, 'textFormatting.underlineActive');
+  const underlineDisabled = useSharedPluginStateSelector(api, 'textFormatting.underlineDisabled');
+  const underlineHidden = useSharedPluginStateSelector(api, 'textFormatting.underlineHidden');
+  const strikeActive = useSharedPluginStateSelector(api, 'textFormatting.strikeActive');
+  const strikeDisabled = useSharedPluginStateSelector(api, 'textFormatting.strikeDisabled');
+  const strikeHidden = useSharedPluginStateSelector(api, 'textFormatting.strikeHidden');
+  const strongActive = useSharedPluginStateSelector(api, 'textFormatting.strongActive');
+  const strongDisabled = useSharedPluginStateSelector(api, 'textFormatting.strongDisabled');
+  const strongHidden = useSharedPluginStateSelector(api, 'textFormatting.strongHidden');
+  const superscriptActive = useSharedPluginStateSelector(api, 'textFormatting.superscriptActive');
+  const superscriptDisabled = useSharedPluginStateSelector(api, 'textFormatting.superscriptDisabled');
+  const superscriptHidden = useSharedPluginStateSelector(api, 'textFormatting.superscriptHidden');
+  const subscriptActive = useSharedPluginStateSelector(api, 'textFormatting.subscriptActive');
+  const subscriptDisabled = useSharedPluginStateSelector(api, 'textFormatting.subscriptDisabled');
+  const subscriptHidden = useSharedPluginStateSelector(api, 'textFormatting.subscriptHidden');
+  return {
+    isInitialised: Boolean(isInitialised),
+    formattingIsPresent,
+    emActive,
+    emDisabled,
+    emHidden,
+    codeActive,
+    codeDisabled,
+    codeHidden,
+    underlineActive,
+    underlineDisabled,
+    underlineHidden,
+    strikeActive,
+    strikeDisabled,
+    strikeHidden,
+    strongActive,
+    strongDisabled,
+    strongHidden,
+    superscriptActive,
+    superscriptDisabled,
+    superscriptHidden,
+    subscriptActive,
+    subscriptDisabled,
+    subscriptHidden
+  };
+}, api => {
+  const {
+    textFormattingState
+  } = useSharedPluginState(api, ['textFormatting']);
+  return {
+    isInitialised: Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.isInitialised),
+    formattingIsPresent: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent,
+    emActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emActive,
+    emDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emDisabled,
+    emHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emHidden,
+    codeActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeActive,
+    codeDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeDisabled,
+    codeHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeHidden,
+    underlineActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineActive,
+    underlineDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineDisabled,
+    underlineHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineHidden,
+    strikeActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeActive,
+    strikeDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeDisabled,
+    strikeHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeHidden,
+    strongActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongActive,
+    strongDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongDisabled,
+    strongHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongHidden,
+    superscriptActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptActive,
+    superscriptDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptDisabled,
+    superscriptHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptHidden,
+    subscriptActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptActive,
+    subscriptDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptDisabled,
+    subscriptHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptHidden
+  };
+});
 const FloatingToolbarTextFormat = ({
   api,
   editorAnalyticsAPI,
   editorView,
   intl
 }) => {
+  const textFormattingState = useSharedState(api);
   const {
-    textFormattingState
-  } = useSharedPluginState(api, ['textFormatting']);
+    formattingIsPresent,
+    ...formattingIconState
+  } = textFormattingState;
   const defaultIcons = useFormattingIcons({
     schema: editorView.state.schema,
     intl,
     isToolbarDisabled: FloatingToolbarSettings.disabled,
     editorAnalyticsAPI,
-    textFormattingState,
+    textFormattingState: formattingIconState,
     toolbarType: FloatingToolbarSettings.toolbarType
   });
   let hasMultiplePartsWithFormattingSelected;
@@ -69,7 +151,8 @@ const FloatingToolbarTextFormat = ({
     shouldUnselect: hasMultiplePartsWithFormattingSelected
   });
   const clearIcon = useClearIcon({
-    textFormattingState,
+    formattingPluginInitialised: textFormattingState.isInitialised,
+    formattingIsPresent,
     intl,
     editorAnalyticsAPI,
     toolbarType: FloatingToolbarSettings.toolbarType

package/dist/es2019/ui/PrimaryToolbarComponent.js

@@ -1,7 +1,87 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import Toolbar from './Toolbar';
 import { ToolbarType } from './Toolbar/types';
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const isInitialised = useSharedPluginStateSelector(api, 'textFormatting.isInitialised');
+  const formattingIsPresent = useSharedPluginStateSelector(api, 'textFormatting.formattingIsPresent');
+  const emActive = useSharedPluginStateSelector(api, 'textFormatting.emActive');
+  const emDisabled = useSharedPluginStateSelector(api, 'textFormatting.emDisabled');
+  const emHidden = useSharedPluginStateSelector(api, 'textFormatting.emHidden');
+  const codeActive = useSharedPluginStateSelector(api, 'textFormatting.codeActive');
+  const codeDisabled = useSharedPluginStateSelector(api, 'textFormatting.codeDisabled');
+  const codeHidden = useSharedPluginStateSelector(api, 'textFormatting.codeHidden');
+  const underlineActive = useSharedPluginStateSelector(api, 'textFormatting.underlineActive');
+  const underlineDisabled = useSharedPluginStateSelector(api, 'textFormatting.underlineDisabled');
+  const underlineHidden = useSharedPluginStateSelector(api, 'textFormatting.underlineHidden');
+  const strikeActive = useSharedPluginStateSelector(api, 'textFormatting.strikeActive');
+  const strikeDisabled = useSharedPluginStateSelector(api, 'textFormatting.strikeDisabled');
+  const strikeHidden = useSharedPluginStateSelector(api, 'textFormatting.strikeHidden');
+  const strongActive = useSharedPluginStateSelector(api, 'textFormatting.strongActive');
+  const strongDisabled = useSharedPluginStateSelector(api, 'textFormatting.strongDisabled');
+  const strongHidden = useSharedPluginStateSelector(api, 'textFormatting.strongHidden');
+  const superscriptActive = useSharedPluginStateSelector(api, 'textFormatting.superscriptActive');
+  const superscriptDisabled = useSharedPluginStateSelector(api, 'textFormatting.superscriptDisabled');
+  const superscriptHidden = useSharedPluginStateSelector(api, 'textFormatting.superscriptHidden');
+  const subscriptActive = useSharedPluginStateSelector(api, 'textFormatting.subscriptActive');
+  const subscriptDisabled = useSharedPluginStateSelector(api, 'textFormatting.subscriptDisabled');
+  const subscriptHidden = useSharedPluginStateSelector(api, 'textFormatting.subscriptHidden');
+  return {
+    isInitialised: Boolean(isInitialised),
+    formattingIsPresent,
+    emActive,
+    emDisabled,
+    emHidden,
+    codeActive,
+    codeDisabled,
+    codeHidden,
+    underlineActive,
+    underlineDisabled,
+    underlineHidden,
+    strikeActive,
+    strikeDisabled,
+    strikeHidden,
+    strongActive,
+    strongDisabled,
+    strongHidden,
+    superscriptActive,
+    superscriptDisabled,
+    superscriptHidden,
+    subscriptActive,
+    subscriptDisabled,
+    subscriptHidden
+  };
+}, api => {
+  const {
+    textFormattingState
+  } = useSharedPluginState(api, ['textFormatting']);
+  return {
+    isInitialised: Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.isInitialised),
+    formattingIsPresent: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent,
+    emActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emActive,
+    emDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emDisabled,
+    emHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emHidden,
+    codeActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeActive,
+    codeDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeDisabled,
+    codeHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeHidden,
+    underlineActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineActive,
+    underlineDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineDisabled,
+    underlineHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineHidden,
+    strikeActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeActive,
+    strikeDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeDisabled,
+    strikeHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeHidden,
+    strongActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongActive,
+    strongDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongDisabled,
+    strongHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongHidden,
+    superscriptActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptActive,
+    superscriptDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptDisabled,
+    superscriptHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptHidden,
+    subscriptActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptActive,
+    subscriptDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptDisabled,
+    subscriptHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptHidden
+  };
+});
 export function PrimaryToolbarComponent({
   api,
   popupsMountPoint,
@@ -13,9 +93,7 @@ export function PrimaryToolbarComponent({
   shouldUseResponsiveToolbar
 }) {
   var _api$analytics;
-  const {
-    textFormattingState
-  } = useSharedPluginState(api, ['textFormatting']);
+  const textFormattingState = useSharedState(api);
   return /*#__PURE__*/React.createElement(Toolbar, {
     textFormattingState: textFormattingState,
     popupsMountPoint: popupsMountPoint,

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

@@ -15,12 +15,13 @@ import { clearFormattingWithAnalytics } from '../../../editor-commands/clear-for
 import { getInputMethod } from '../input-method-utils';
 export const useClearIcon = ({
   intl,
-  textFormattingState,
+  formattingPluginInitialised,
+  formattingIsPresent: formattingPresent,
   editorAnalyticsAPI,
   toolbarType
 }) => {
-  const isPluginAvailable = Boolean(textFormattingState);
-  const formattingIsPresent = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent);
+  const isPluginAvailable = Boolean(formattingPluginInitialised);
+  const formattingIsPresent = Boolean(formattingPresent);
   const clearFormattingLabel = intl.formatMessage(toolbarMessages.clearFormatting);
   const clearFormattingToolbar = useCallback((state, dispatch) => clearFormattingWithAnalytics(getInputMethod(toolbarType), editorAnalyticsAPI)(state, dispatch), [editorAnalyticsAPI, toolbarType]);
   return useMemo(() => {

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

@@ -168,7 +168,7 @@ const buildMenuIconState = iconMark => ({
   schema,
   textFormattingState
 }) => {
-  const hasPluginState = Boolean(Object.keys(textFormattingState || {}).length);
+  const hasPluginState = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.isInitialised);
   const markSchema = IconsMarkSchema[iconMark];
   const hasSchemaMark = Boolean(schema.marks[markSchema]);
   if (!hasPluginState) {
@@ -256,7 +256,7 @@ export const useHasFormattingActived = ({
   textFormattingState
 }) => {
   const hasActiveFormatting = useMemo(() => {
-    if (!textFormattingState) {
+    if (!(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.isInitialised)) {
       return false;
     }
     return iconTypeList.some(iconType => textFormattingState[`${iconType}Active`]);

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

@@ -37,16 +37,21 @@ const ToolbarFormatting = ({
 }) => {
   var _usePreviousState;
   const [message, setMessage] = useState('');
+  const {
+    formattingIsPresent,
+    ...formattingIconState
+  } = textFormattingState;
   const defaultIcons = useFormattingIcons({
     schema: editorView.state.schema,
     intl,
     isToolbarDisabled,
     editorAnalyticsAPI,
-    textFormattingState,
+    textFormattingState: formattingIconState,
     toolbarType
   });
   const clearIcon = useClearIcon({
-    textFormattingState,
+    formattingPluginInitialised: textFormattingState.isInitialised,
+    formattingIsPresent,
     intl,
     editorAnalyticsAPI,
     toolbarType

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

@@ -2,7 +2,10 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { bindKeymapWithEditorCommand, isCapsLockOnAndModifyKeyboardEvent, toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline } from '@atlaskit/editor-common/keymaps';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './commands';
+import { pluginKey } from './plugin-key';
 export default function keymapPlugin(schema, editorAnalyticsAPI) {
   var list = {};
   if (schema.marks.strong) {
@@ -47,11 +50,59 @@ export default function keymapPlugin(schema, editorAnalyticsAPI) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     toggleUnderline.common, toggleUnderlineWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
   }
+  var getEnabledKeylist = function getEnabledKeylist(view) {
+    var textFormattingState = pluginKey.getState(view.state);
+    var list = {};
+    if (schema.marks.strong && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.strongDisabled)) {
+      bindKeymapWithEditorCommand(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      toggleBold.common, toggleStrongWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
+    }
+    if (schema.marks.em && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.emDisabled)) {
+      bindKeymapWithEditorCommand(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      toggleItalic.common, toggleEmWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
+    }
+    if (schema.marks.code && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.codeDisabled)) {
+      bindKeymapWithEditorCommand(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      toggleCode.common, toggleCodeWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
+    }
+    if (schema.marks.strike && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.strikeDisabled)) {
+      bindKeymapWithEditorCommand(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      toggleStrikethrough.common, toggleStrikeWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
+    }
+    if (schema.marks.subsup && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.subscriptDisabled)) {
+      bindKeymapWithEditorCommand(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      toggleSubscript.common, toggleSubscriptWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
+    }
+    if (schema.marks.subsup && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.superscriptDisabled)) {
+      bindKeymapWithEditorCommand(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      toggleSuperscript.common, toggleSuperscriptWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
+    }
+    if (schema.marks.underline && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.underlineDisabled)) {
+      bindKeymapWithEditorCommand(
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      toggleUnderline.common, toggleUnderlineWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
+    }
+    return list;
+  };
   return new SafePlugin({
     props: {
       handleKeyDown: function handleKeyDown(view, event) {
         var keyboardEvent = isCapsLockOnAndModifyKeyboardEvent(event);
-        return keydownHandler(list)(view, keyboardEvent);
+        var keymapList = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_8') ? getEnabledKeylist(view) : list;
+        return keydownHandler(keymapList)(view, keyboardEvent);
       }
     }
   });

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

@@ -38,7 +38,9 @@ var getTextFormattingState = function getTextFormattingState(editorState, editor
     strong = _editorState$schema$m.strong,
     subsup = _editorState$schema$m.subsup,
     underline = _editorState$schema$m.underline;
-  var state = {};
+  var state = {
+    isInitialised: true
+  };
   if (code) {
     state.codeActive = anyMarkActive(editorState, code.create());
     state.codeDisabled = !checkNodeSelection(code, editorState);

package/dist/esm/textFormattingPlugin.js

@@ -121,8 +121,10 @@ export var textFormattingPlugin = function textFormattingPlugin(_ref) {
       if (!editorState) {
         return undefined;
       }
-      return _objectSpread(_objectSpread({}, textFormattingPluginKey.getState(editorState)), {}, {
-        formattingIsPresent: (_clearFormattingPlugi = clearFormattingPluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent
+      var textFormattingState = textFormattingPluginKey.getState(editorState);
+      return _objectSpread(_objectSpread({}, textFormattingState), {}, {
+        formattingIsPresent: (_clearFormattingPlugi = clearFormattingPluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent,
+        isInitialised: !!(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.isInitialised)
       });
     },
     pluginsOptions: {

package/dist/esm/ui/FloatingToolbarComponent.js

@@ -1,3 +1,5 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["formattingIsPresent"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -7,8 +9,9 @@ import React, { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -29,19 +32,98 @@ var FloatingToolbarSettings = {
   moreButtonLabel: '',
   toolbarType: ToolbarType.FLOATING
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var isInitialised = useSharedPluginStateSelector(api, 'textFormatting.isInitialised');
+  var formattingIsPresent = useSharedPluginStateSelector(api, 'textFormatting.formattingIsPresent');
+  var emActive = useSharedPluginStateSelector(api, 'textFormatting.emActive');
+  var emDisabled = useSharedPluginStateSelector(api, 'textFormatting.emDisabled');
+  var emHidden = useSharedPluginStateSelector(api, 'textFormatting.emHidden');
+  var codeActive = useSharedPluginStateSelector(api, 'textFormatting.codeActive');
+  var codeDisabled = useSharedPluginStateSelector(api, 'textFormatting.codeDisabled');
+  var codeHidden = useSharedPluginStateSelector(api, 'textFormatting.codeHidden');
+  var underlineActive = useSharedPluginStateSelector(api, 'textFormatting.underlineActive');
+  var underlineDisabled = useSharedPluginStateSelector(api, 'textFormatting.underlineDisabled');
+  var underlineHidden = useSharedPluginStateSelector(api, 'textFormatting.underlineHidden');
+  var strikeActive = useSharedPluginStateSelector(api, 'textFormatting.strikeActive');
+  var strikeDisabled = useSharedPluginStateSelector(api, 'textFormatting.strikeDisabled');
+  var strikeHidden = useSharedPluginStateSelector(api, 'textFormatting.strikeHidden');
+  var strongActive = useSharedPluginStateSelector(api, 'textFormatting.strongActive');
+  var strongDisabled = useSharedPluginStateSelector(api, 'textFormatting.strongDisabled');
+  var strongHidden = useSharedPluginStateSelector(api, 'textFormatting.strongHidden');
+  var superscriptActive = useSharedPluginStateSelector(api, 'textFormatting.superscriptActive');
+  var superscriptDisabled = useSharedPluginStateSelector(api, 'textFormatting.superscriptDisabled');
+  var superscriptHidden = useSharedPluginStateSelector(api, 'textFormatting.superscriptHidden');
+  var subscriptActive = useSharedPluginStateSelector(api, 'textFormatting.subscriptActive');
+  var subscriptDisabled = useSharedPluginStateSelector(api, 'textFormatting.subscriptDisabled');
+  var subscriptHidden = useSharedPluginStateSelector(api, 'textFormatting.subscriptHidden');
+  return {
+    isInitialised: Boolean(isInitialised),
+    formattingIsPresent: formattingIsPresent,
+    emActive: emActive,
+    emDisabled: emDisabled,
+    emHidden: emHidden,
+    codeActive: codeActive,
+    codeDisabled: codeDisabled,
+    codeHidden: codeHidden,
+    underlineActive: underlineActive,
+    underlineDisabled: underlineDisabled,
+    underlineHidden: underlineHidden,
+    strikeActive: strikeActive,
+    strikeDisabled: strikeDisabled,
+    strikeHidden: strikeHidden,
+    strongActive: strongActive,
+    strongDisabled: strongDisabled,
+    strongHidden: strongHidden,
+    superscriptActive: superscriptActive,
+    superscriptDisabled: superscriptDisabled,
+    superscriptHidden: superscriptHidden,
+    subscriptActive: subscriptActive,
+    subscriptDisabled: subscriptDisabled,
+    subscriptHidden: subscriptHidden
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['textFormatting']),
+    textFormattingState = _useSharedPluginState.textFormattingState;
+  return {
+    isInitialised: Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.isInitialised),
+    formattingIsPresent: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent,
+    emActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emActive,
+    emDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emDisabled,
+    emHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emHidden,
+    codeActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeActive,
+    codeDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeDisabled,
+    codeHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeHidden,
+    underlineActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineActive,
+    underlineDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineDisabled,
+    underlineHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineHidden,
+    strikeActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeActive,
+    strikeDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeDisabled,
+    strikeHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeHidden,
+    strongActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongActive,
+    strongDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongDisabled,
+    strongHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongHidden,
+    superscriptActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptActive,
+    superscriptDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptDisabled,
+    superscriptHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptHidden,
+    subscriptActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptActive,
+    subscriptDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptDisabled,
+    subscriptHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptHidden
+  };
+});
 var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
   var api = _ref.api,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     editorView = _ref.editorView,
     intl = _ref.intl;
-  var _useSharedPluginState = useSharedPluginState(api, ['textFormatting']),
-    textFormattingState = _useSharedPluginState.textFormattingState;
+  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: textFormattingState,
+    textFormattingState: formattingIconState,
     toolbarType: FloatingToolbarSettings.toolbarType
   });
   var hasMultiplePartsWithFormattingSelected;
@@ -62,7 +144,8 @@ var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
     dropdownItems = _useIconList.dropdownItems,
     singleItems = _useIconList.singleItems;
   var clearIcon = useClearIcon({
-    textFormattingState: textFormattingState,
+    formattingPluginInitialised: textFormattingState.isInitialised,
+    formattingIsPresent: formattingIsPresent,
     intl: intl,
     editorAnalyticsAPI: editorAnalyticsAPI,
     toolbarType: FloatingToolbarSettings.toolbarType

package/dist/esm/ui/PrimaryToolbarComponent.js

@@ -1,7 +1,86 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import Toolbar from './Toolbar';
 import { ToolbarType } from './Toolbar/types';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+  var isInitialised = useSharedPluginStateSelector(api, 'textFormatting.isInitialised');
+  var formattingIsPresent = useSharedPluginStateSelector(api, 'textFormatting.formattingIsPresent');
+  var emActive = useSharedPluginStateSelector(api, 'textFormatting.emActive');
+  var emDisabled = useSharedPluginStateSelector(api, 'textFormatting.emDisabled');
+  var emHidden = useSharedPluginStateSelector(api, 'textFormatting.emHidden');
+  var codeActive = useSharedPluginStateSelector(api, 'textFormatting.codeActive');
+  var codeDisabled = useSharedPluginStateSelector(api, 'textFormatting.codeDisabled');
+  var codeHidden = useSharedPluginStateSelector(api, 'textFormatting.codeHidden');
+  var underlineActive = useSharedPluginStateSelector(api, 'textFormatting.underlineActive');
+  var underlineDisabled = useSharedPluginStateSelector(api, 'textFormatting.underlineDisabled');
+  var underlineHidden = useSharedPluginStateSelector(api, 'textFormatting.underlineHidden');
+  var strikeActive = useSharedPluginStateSelector(api, 'textFormatting.strikeActive');
+  var strikeDisabled = useSharedPluginStateSelector(api, 'textFormatting.strikeDisabled');
+  var strikeHidden = useSharedPluginStateSelector(api, 'textFormatting.strikeHidden');
+  var strongActive = useSharedPluginStateSelector(api, 'textFormatting.strongActive');
+  var strongDisabled = useSharedPluginStateSelector(api, 'textFormatting.strongDisabled');
+  var strongHidden = useSharedPluginStateSelector(api, 'textFormatting.strongHidden');
+  var superscriptActive = useSharedPluginStateSelector(api, 'textFormatting.superscriptActive');
+  var superscriptDisabled = useSharedPluginStateSelector(api, 'textFormatting.superscriptDisabled');
+  var superscriptHidden = useSharedPluginStateSelector(api, 'textFormatting.superscriptHidden');
+  var subscriptActive = useSharedPluginStateSelector(api, 'textFormatting.subscriptActive');
+  var subscriptDisabled = useSharedPluginStateSelector(api, 'textFormatting.subscriptDisabled');
+  var subscriptHidden = useSharedPluginStateSelector(api, 'textFormatting.subscriptHidden');
+  return {
+    isInitialised: Boolean(isInitialised),
+    formattingIsPresent: formattingIsPresent,
+    emActive: emActive,
+    emDisabled: emDisabled,
+    emHidden: emHidden,
+    codeActive: codeActive,
+    codeDisabled: codeDisabled,
+    codeHidden: codeHidden,
+    underlineActive: underlineActive,
+    underlineDisabled: underlineDisabled,
+    underlineHidden: underlineHidden,
+    strikeActive: strikeActive,
+    strikeDisabled: strikeDisabled,
+    strikeHidden: strikeHidden,
+    strongActive: strongActive,
+    strongDisabled: strongDisabled,
+    strongHidden: strongHidden,
+    superscriptActive: superscriptActive,
+    superscriptDisabled: superscriptDisabled,
+    superscriptHidden: superscriptHidden,
+    subscriptActive: subscriptActive,
+    subscriptDisabled: subscriptDisabled,
+    subscriptHidden: subscriptHidden
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['textFormatting']),
+    textFormattingState = _useSharedPluginState.textFormattingState;
+  return {
+    isInitialised: Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.isInitialised),
+    formattingIsPresent: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent,
+    emActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emActive,
+    emDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emDisabled,
+    emHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.emHidden,
+    codeActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeActive,
+    codeDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeDisabled,
+    codeHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.codeHidden,
+    underlineActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineActive,
+    underlineDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineDisabled,
+    underlineHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.underlineHidden,
+    strikeActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeActive,
+    strikeDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeDisabled,
+    strikeHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strikeHidden,
+    strongActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongActive,
+    strongDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongDisabled,
+    strongHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.strongHidden,
+    superscriptActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptActive,
+    superscriptDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptDisabled,
+    superscriptHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.superscriptHidden,
+    subscriptActive: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptActive,
+    subscriptDisabled: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptDisabled,
+    subscriptHidden: textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.subscriptHidden
+  };
+});
 export function PrimaryToolbarComponent(_ref) {
   var _api$analytics;
   var api = _ref.api,
@@ -12,8 +91,7 @@ export function PrimaryToolbarComponent(_ref) {
     disabled = _ref.disabled,
     isReducedSpacing = _ref.isReducedSpacing,
     shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar;
-  var _useSharedPluginState = useSharedPluginState(api, ['textFormatting']),
-    textFormattingState = _useSharedPluginState.textFormattingState;
+  var textFormattingState = useSharedState(api);
   return /*#__PURE__*/React.createElement(Toolbar, {
     textFormattingState: textFormattingState,
     popupsMountPoint: popupsMountPoint,

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

@@ -15,11 +15,12 @@ import { clearFormattingWithAnalytics } from '../../../editor-commands/clear-for
 import { getInputMethod } from '../input-method-utils';
 export var useClearIcon = function useClearIcon(_ref) {
   var intl = _ref.intl,
-    textFormattingState = _ref.textFormattingState,
+    formattingPluginInitialised = _ref.formattingPluginInitialised,
+    formattingPresent = _ref.formattingIsPresent,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     toolbarType = _ref.toolbarType;
-  var isPluginAvailable = Boolean(textFormattingState);
-  var formattingIsPresent = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent);
+  var isPluginAvailable = Boolean(formattingPluginInitialised);
+  var formattingIsPresent = Boolean(formattingPresent);
   var clearFormattingLabel = intl.formatMessage(toolbarMessages.clearFormatting);
   var clearFormattingToolbar = useCallback(function (state, dispatch) {
     return clearFormattingWithAnalytics(getInputMethod(toolbarType), editorAnalyticsAPI)(state, dispatch);