@atlaskit/editor-plugin-floating-toolbar 4.1.4 → 4.1.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 4.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.5
+
+### Patch Changes
+
+- [#147357](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147357)
+  [`1eab8cfeaf029`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1eab8cfeaf029) -
+  Migrate extensions and floating toolbar plugins to use useSharedPluginStateSelector hook
+- Updated dependencies
+
 ## 4.1.4
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -19,6 +19,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -212,6 +213,62 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
     }
   };
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  // floatingToolbar
+  var configWithNodeInfo = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'floatingToolbar.configWithNodeInfo');
+  var floatingToolbarData = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'floatingToolbar.floatingToolbarData');
+
+  // editorDisabled
+  var editorDisabledState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled');
+
+  // editorViewMode
+  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+  var contentMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.contentMode');
+  var isConsumption = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.isConsumption');
+
+  // userIntent
+  var currentUserIntent = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'userIntent.currentUserIntent');
+
+  // blockControls
+  var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi,
+  // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
+  'blockControls.isDragging');
+  // isMenuOpen
+  var isMenuOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi,
+  // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
+  'blockControls.isMenuOpen');
+  return {
+    configWithNodeInfo: configWithNodeInfo,
+    floatingToolbarData: floatingToolbarData,
+    editorDisabled: editorDisabledState,
+    mode: mode,
+    contentMode: contentMode,
+    isConsumption: isConsumption,
+    currentUserIntent: currentUserIntent,
+    isDragging: isDragging,
+    isMenuOpen: isMenuOpen
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'userIntent',
+    // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
+    'blockControls']),
+    floatingToolbarState = _useSharedPluginState.floatingToolbarState,
+    editorDisabledState = _useSharedPluginState.editorDisabledState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    userIntentState = _useSharedPluginState.userIntentState,
+    blockControlsState = _useSharedPluginState.blockControlsState;
+  return {
+    configWithNodeInfo: floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.configWithNodeInfo,
+    floatingToolbarData: floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.floatingToolbarData,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    contentMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.contentMode,
+    isConsumption: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.isConsumption,
+    currentUserIntent: userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent,
+    isDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging,
+    isMenuOpen: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen
+  };
+});
 function ContentComponent(_ref5) {
   var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
   var pluginInjectionApi = _ref5.pluginInjectionApi,
@@ -221,22 +278,21 @@ function ContentComponent(_ref5) {
     popupsScrollableElement = _ref5.popupsScrollableElement,
     providerFactory = _ref5.providerFactory,
     dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'userIntent',
-    // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
-    'blockControls']),
-    floatingToolbarState = _useSharedPluginState.floatingToolbarState,
-    editorDisabledState = _useSharedPluginState.editorDisabledState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState,
-    userIntentState = _useSharedPluginState.userIntentState,
-    blockControlsState = _useSharedPluginState.blockControlsState;
-  var _ref6 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
-    configWithNodeInfo = _ref6.configWithNodeInfo,
-    floatingToolbarData = _ref6.floatingToolbarData;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    configWithNodeInfo = _useSharedState.configWithNodeInfo,
+    contentMode = _useSharedState.contentMode,
+    currentUserIntent = _useSharedState.currentUserIntent,
+    editorDisabled = _useSharedState.editorDisabled,
+    floatingToolbarData = _useSharedState.floatingToolbarData,
+    isConsumption = _useSharedState.isConsumption,
+    isDragging = _useSharedState.isDragging,
+    isMenuOpen = _useSharedState.isMenuOpen,
+    mode = _useSharedState.mode;
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }
   if ((0, _platformFeatureFlags.fg)('platform_editor_user_intent_plugin')) {
-    if ((userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent) === 'dragging') {
+    if (currentUserIntent === 'dragging') {
       return null;
     }
 
@@ -245,10 +301,10 @@ function ContentComponent(_ref5) {
     // 	return null;
     // }
   } else {
-    if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging) {
+    if (isDragging) {
       return null;
     }
-    if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    if (isMenuOpen && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
       return null;
     }
   }
@@ -284,9 +340,8 @@ function ContentComponent(_ref5) {
     _config$stick = config.stick,
     stick = _config$stick === void 0 ? true : _config$stick;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-  var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
-  var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (!targetRef || isEditorDisabled && !isInViewMode) {
+  var isInViewMode = mode === 'view';
+  if (!targetRef || editorDisabled && !isInViewMode) {
     return null;
   }
 
@@ -336,7 +391,7 @@ function ContentComponent(_ref5) {
     }
   });
   if (!(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') && viewModeToolbarEntry !== 'none') {
-    if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.contentMode) === 'live-edit' && editorViewModeState !== null && editorViewModeState !== void 0 && editorViewModeState.isConsumption) {
+    if (contentMode === 'live-edit' && isConsumption) {
       var hasOtherToolbarItems = toolbarItems && toolbarItems.length !== 0;
       var shouldAddToolbarItems = viewModeToolbarEntry === 'expand-existing-only' ? hasOtherToolbarItems : true;
       if (shouldAddToolbarItems) {
@@ -372,8 +427,8 @@ function ContentComponent(_ref5) {
   };
 
   // Confirm dialog
-  var _ref7 = floatingToolbarData || {},
-    confirmDialogForItem = _ref7.confirmDialogForItem;
+  var _ref6 = floatingToolbarData || {},
+    confirmDialogForItem = _ref6.confirmDialogForItem;
   var confirmButtonItem = confirmDialogForItem ?
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/cjs/ui/EmojiPickerButton.js

@@ -13,6 +13,7 @@ var _new = require("@atlaskit/button/new");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _emoji = require("@atlaskit/emoji");
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/emoji-add"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -62,11 +63,17 @@ var emojiPickerButtonWrapperVisualRefresh = (0, _react2.css)({
     }
   }
 });
-var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.pluginInjectionApi, ['emoji']),
+var useEmojiProvider = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var emojiProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
+  return emojiProvider ? Promise.resolve(emojiProvider) : undefined;
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['emoji']),
     emojiState = _useSharedPluginState.emojiState;
+  return emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState.emojiProvider) : undefined;
+});
+var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
+  var emojiProvider = useEmojiProvider(props.pluginInjectionApi);
   var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
-  var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
   if (!emojiProvider) {
     return null;
   }

package/dist/cjs/ui/Toolbar.js

@@ -584,8 +584,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
   (0, _inherits2.default)(Toolbar, _Component);
   return (0, _createClass2.default)(Toolbar, [{
-    key: "resetStyling",
-    value: function resetStyling(_ref3) {
+    key: "resetStylingLegacy",
+    value: function resetStylingLegacy(_ref3) {
       var table = _ref3.table;
       if (this.props.editorView) {
         var _this$props$api;
@@ -598,6 +598,20 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         (_this$props$api = this.props.api) === null || _this$props$api === void 0 || (_this$props$api = _this$props$api.decorations) === null || _this$props$api === void 0 || _this$props$api.actions.removeDecoration(state, dispatch);
       }
     }
+
+    // remove any decorations added by toolbar buttons i.e danger and selected styling
+    // this prevents https://product-fabric.atlassian.net/browse/ED-10207
+  }, {
+    key: "resetStyling",
+    value: function resetStyling() {
+      if (this.props.editorView) {
+        var _this$props$api2;
+        var _this$props$editorVie3 = this.props.editorView,
+          state = _this$props$editorVie3.state,
+          dispatch = _this$props$editorVie3.dispatch;
+        (_this$props$api2 = this.props.api) === null || _this$props$api2 === void 0 || (_this$props$api2 = _this$props$api2.decorations) === null || _this$props$api2 === void 0 || _this$props$api2.actions.removeDecoration(state, dispatch);
+      }
+    }
   }, {
     key: "setDisableScroll",
     value: function setDisableScroll(disabled) {
@@ -627,10 +641,16 @@ var Toolbar = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate(prevProps) {
       var _this$props;
       (0, _forceFocus.checkShouldForceFocusAndApply)((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.editorView);
-      if (this.props.node !== prevProps.node) {
-        this.resetStyling({
-          table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
-        });
+      if ((0, _platformFeatureFlags.fg)('platform_editor_remove_slow_table_transactions')) {
+        if (this.props.node !== prevProps.node) {
+          this.resetStyling();
+        }
+      } else {
+        if (this.props.node !== prevProps.node) {
+          this.resetStylingLegacy({
+            table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
+          });
+        }
       }
     }
   }, {
@@ -642,9 +662,13 @@ var Toolbar = /*#__PURE__*/function (_Component) {
           dispatch = editorView.dispatch;
         dispatch((0, _forceFocus.forceFocusSelector)(null)(tr));
       }
-      this.resetStyling({
-        table: this.props.node.type.name === 'table'
-      });
+      if ((0, _platformFeatureFlags.fg)('platform_editor_remove_slow_table_transactions')) {
+        this.resetStyling();
+      } else {
+        this.resetStylingLegacy({
+          table: this.props.node.type.name === 'table'
+        });
+      }
     }
   }, {
     key: "render",

package/dist/es2019/floatingToolbarPlugin.js

@@ -2,10 +2,11 @@ import React from 'react';
 import camelCase from 'lodash/camelCase';
 import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -195,16 +196,42 @@ export const floatingToolbarPlugin = ({
     }
   };
 };
-export function ContentComponent({
-  pluginInjectionApi,
-  editorView,
-  popupsMountPoint,
-  popupsBoundariesElement,
-  popupsScrollableElement,
-  providerFactory,
-  dispatchAnalyticsEvent
-}) {
-  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  // floatingToolbar
+  const configWithNodeInfo = useSharedPluginStateSelector(pluginInjectionApi, 'floatingToolbar.configWithNodeInfo');
+  const floatingToolbarData = useSharedPluginStateSelector(pluginInjectionApi, 'floatingToolbar.floatingToolbarData');
+
+  // editorDisabled
+  const editorDisabledState = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled');
+
+  // editorViewMode
+  const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  const contentMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.contentMode');
+  const isConsumption = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.isConsumption');
+
+  // userIntent
+  const currentUserIntent = useSharedPluginStateSelector(pluginInjectionApi, 'userIntent.currentUserIntent');
+
+  // blockControls
+  const isDragging = useSharedPluginStateSelector(pluginInjectionApi,
+  // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
+  'blockControls.isDragging');
+  // isMenuOpen
+  const isMenuOpen = useSharedPluginStateSelector(pluginInjectionApi,
+  // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
+  'blockControls.isMenuOpen');
+  return {
+    configWithNodeInfo,
+    floatingToolbarData,
+    editorDisabled: editorDisabledState,
+    mode,
+    contentMode,
+    isConsumption,
+    currentUserIntent,
+    isDragging,
+    isMenuOpen
+  };
+}, pluginInjectionApi => {
   const {
     floatingToolbarState,
     editorDisabledState,
@@ -215,15 +242,44 @@ export function ContentComponent({
   } = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'userIntent',
   // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
   'blockControls']);
+  return {
+    configWithNodeInfo: floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.configWithNodeInfo,
+    floatingToolbarData: floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.floatingToolbarData,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    contentMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.contentMode,
+    isConsumption: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.isConsumption,
+    currentUserIntent: userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent,
+    isDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging,
+    isMenuOpen: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen
+  };
+});
+export function ContentComponent({
+  pluginInjectionApi,
+  editorView,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  providerFactory,
+  dispatchAnalyticsEvent
+}) {
+  var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
   const {
     configWithNodeInfo,
-    floatingToolbarData
-  } = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {};
+    contentMode,
+    currentUserIntent,
+    editorDisabled,
+    floatingToolbarData,
+    isConsumption,
+    isDragging,
+    isMenuOpen,
+    mode
+  } = useSharedState(pluginInjectionApi);
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }
   if (fg('platform_editor_user_intent_plugin')) {
-    if ((userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent) === 'dragging') {
+    if (currentUserIntent === 'dragging') {
       return null;
     }
 
@@ -232,10 +288,10 @@ export function ContentComponent({
     // 	return null;
     // }
   } else {
-    if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging) {
+    if (isDragging) {
       return null;
     }
-    if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen && editorExperiment('platform_editor_controls', 'variant1')) {
+    if (isMenuOpen && editorExperiment('platform_editor_controls', 'variant1')) {
       return null;
     }
   }
@@ -272,9 +328,8 @@ export function ContentComponent({
     stick = true
   } = config;
   const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-  const isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
-  const isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (!targetRef || isEditorDisabled && !isInViewMode) {
+  const isInViewMode = mode === 'view';
+  if (!targetRef || editorDisabled && !isInViewMode) {
     return null;
   }
 
@@ -316,7 +371,7 @@ export function ContentComponent({
     typeGuard: value => typeof value === 'string' && ['text', 'nodes'].includes(value)
   });
   if (!editorExperiment('live_pages_graceful_edit', 'control') && viewModeToolbarEntry !== 'none') {
-    if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.contentMode) === 'live-edit' && editorViewModeState !== null && editorViewModeState !== void 0 && editorViewModeState.isConsumption) {
+    if (contentMode === 'live-edit' && isConsumption) {
       const hasOtherToolbarItems = toolbarItems && toolbarItems.length !== 0;
       const shouldAddToolbarItems = viewModeToolbarEntry === 'expand-existing-only' ? hasOtherToolbarItems : true;
       if (shouldAddToolbarItems) {

package/dist/es2019/ui/EmojiPickerButton.js

@@ -7,9 +7,10 @@ import React, { useCallback, useContext } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { IconButton } from '@atlaskit/button/new';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { EmojiPicker } from '@atlaskit/emoji';
 import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -51,12 +52,18 @@ const emojiPickerButtonWrapperVisualRefresh = css({
     }
   }
 });
-const EmojiPickerWithProvider = props => {
+const useEmojiProvider = sharedPluginStateHookMigratorFactory(api => {
+  const emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
+  return emojiProvider ? Promise.resolve(emojiProvider) : undefined;
+}, api => {
   const {
     emojiState
-  } = useSharedPluginState(props.pluginInjectionApi, ['emoji']);
+  } = useSharedPluginState(api, ['emoji']);
+  return emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState.emojiProvider) : undefined;
+});
+const EmojiPickerWithProvider = props => {
+  const emojiProvider = useEmojiProvider(props.pluginInjectionApi);
   const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
-  const emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
   if (!emojiProvider) {
     return null;
   }

package/dist/es2019/ui/Toolbar.js

@@ -541,7 +541,7 @@ class Toolbar extends Component {
   }
   // remove any decorations added by toolbar buttons i.e danger and selected styling
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
-  resetStyling({
+  resetStylingLegacy({
     table
   }) {
     if (this.props.editorView) {
@@ -556,6 +556,19 @@ class Toolbar extends Component {
       (_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : (_this$props$api$decor = _this$props$api.decorations) === null || _this$props$api$decor === void 0 ? void 0 : _this$props$api$decor.actions.removeDecoration(state, dispatch);
     }
   }
+
+  // remove any decorations added by toolbar buttons i.e danger and selected styling
+  // this prevents https://product-fabric.atlassian.net/browse/ED-10207
+  resetStyling() {
+    if (this.props.editorView) {
+      var _this$props$api2, _this$props$api2$deco;
+      const {
+        state,
+        dispatch
+      } = this.props.editorView;
+      (_this$props$api2 = this.props.api) === null || _this$props$api2 === void 0 ? void 0 : (_this$props$api2$deco = _this$props$api2.decorations) === null || _this$props$api2$deco === void 0 ? void 0 : _this$props$api2$deco.actions.removeDecoration(state, dispatch);
+    }
+  }
   setDisableScroll(disabled) {
     // wait before setting disabled state incase users jumping from one popup to another
     if (disabled) {
@@ -578,10 +591,16 @@ class Toolbar extends Component {
   componentDidUpdate(prevProps) {
     var _this$props;
     checkShouldForceFocusAndApply((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.editorView);
-    if (this.props.node !== prevProps.node) {
-      this.resetStyling({
-        table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
-      });
+    if (fg('platform_editor_remove_slow_table_transactions')) {
+      if (this.props.node !== prevProps.node) {
+        this.resetStyling();
+      }
+    } else {
+      if (this.props.node !== prevProps.node) {
+        this.resetStylingLegacy({
+          table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
+        });
+      }
     }
   }
   componentWillUnmount() {
@@ -597,9 +616,13 @@ class Toolbar extends Component {
       } = editorView;
       dispatch(forceFocusSelector(null)(tr));
     }
-    this.resetStyling({
-      table: this.props.node.type.name === 'table'
-    });
+    if (fg('platform_editor_remove_slow_table_transactions')) {
+      this.resetStyling();
+    } else {
+      this.resetStylingLegacy({
+        table: this.props.node.type.name === 'table'
+      });
+    }
   }
   render() {
     const {

package/dist/esm/floatingToolbarPlugin.js

@@ -6,10 +6,11 @@ import React from 'react';
 import camelCase from 'lodash/camelCase';
 import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -200,6 +201,62 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
     }
   };
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  // floatingToolbar
+  var configWithNodeInfo = useSharedPluginStateSelector(pluginInjectionApi, 'floatingToolbar.configWithNodeInfo');
+  var floatingToolbarData = useSharedPluginStateSelector(pluginInjectionApi, 'floatingToolbar.floatingToolbarData');
+
+  // editorDisabled
+  var editorDisabledState = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled');
+
+  // editorViewMode
+  var mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  var contentMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.contentMode');
+  var isConsumption = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.isConsumption');
+
+  // userIntent
+  var currentUserIntent = useSharedPluginStateSelector(pluginInjectionApi, 'userIntent.currentUserIntent');
+
+  // blockControls
+  var isDragging = useSharedPluginStateSelector(pluginInjectionApi,
+  // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
+  'blockControls.isDragging');
+  // isMenuOpen
+  var isMenuOpen = useSharedPluginStateSelector(pluginInjectionApi,
+  // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
+  'blockControls.isMenuOpen');
+  return {
+    configWithNodeInfo: configWithNodeInfo,
+    floatingToolbarData: floatingToolbarData,
+    editorDisabled: editorDisabledState,
+    mode: mode,
+    contentMode: contentMode,
+    isConsumption: isConsumption,
+    currentUserIntent: currentUserIntent,
+    isDragging: isDragging,
+    isMenuOpen: isMenuOpen
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'userIntent',
+    // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
+    'blockControls']),
+    floatingToolbarState = _useSharedPluginState.floatingToolbarState,
+    editorDisabledState = _useSharedPluginState.editorDisabledState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    userIntentState = _useSharedPluginState.userIntentState,
+    blockControlsState = _useSharedPluginState.blockControlsState;
+  return {
+    configWithNodeInfo: floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.configWithNodeInfo,
+    floatingToolbarData: floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.floatingToolbarData,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    contentMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.contentMode,
+    isConsumption: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.isConsumption,
+    currentUserIntent: userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent,
+    isDragging: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isDragging,
+    isMenuOpen: blockControlsState === null || blockControlsState === void 0 ? void 0 : blockControlsState.isMenuOpen
+  };
+});
 export function ContentComponent(_ref5) {
   var _configWithNodeInfo$c, _configWithNodeInfo$c2, _items, _pluginInjectionApi$c, _pluginInjectionApi$d;
   var pluginInjectionApi = _ref5.pluginInjectionApi,
@@ -209,22 +266,21 @@ export function ContentComponent(_ref5) {
     popupsScrollableElement = _ref5.popupsScrollableElement,
     providerFactory = _ref5.providerFactory,
     dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent;
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled', 'editorViewMode', 'userIntent',
-    // @ts-expect-error - excluded from FloatingToolbarPlugin dependencies to avoid circular dependency
-    'blockControls']),
-    floatingToolbarState = _useSharedPluginState.floatingToolbarState,
-    editorDisabledState = _useSharedPluginState.editorDisabledState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState,
-    userIntentState = _useSharedPluginState.userIntentState,
-    blockControlsState = _useSharedPluginState.blockControlsState;
-  var _ref6 = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {},
-    configWithNodeInfo = _ref6.configWithNodeInfo,
-    floatingToolbarData = _ref6.floatingToolbarData;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    configWithNodeInfo = _useSharedState.configWithNodeInfo,
+    contentMode = _useSharedState.contentMode,
+    currentUserIntent = _useSharedState.currentUserIntent,
+    editorDisabled = _useSharedState.editorDisabled,
+    floatingToolbarData = _useSharedState.floatingToolbarData,
+    isConsumption = _useSharedState.isConsumption,
+    isDragging = _useSharedState.isDragging,
+    isMenuOpen = _useSharedState.isMenuOpen,
+    mode = _useSharedState.mode;
   if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
     return null;
   }
   if (fg('platform_editor_user_intent_plugin')) {
-    if ((userIntentState === null || userIntentState === void 0 ? void 0 : userIntentState.currentUserIntent) === 'dragging') {
+    if (currentUserIntent === 'dragging') {
       return null;
     }
 
@@ -233,10 +289,10 @@ export function ContentComponent(_ref5) {
     // 	return null;
     // }
   } else {
-    if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isDragging) {
+    if (isDragging) {
       return null;
     }
-    if (blockControlsState !== null && blockControlsState !== void 0 && blockControlsState.isMenuOpen && editorExperiment('platform_editor_controls', 'variant1')) {
+    if (isMenuOpen && editorExperiment('platform_editor_controls', 'variant1')) {
       return null;
     }
   }
@@ -272,9 +328,8 @@ export function ContentComponent(_ref5) {
     _config$stick = config.stick,
     stick = _config$stick === void 0 ? true : _config$stick;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-  var isEditorDisabled = editorDisabledState && editorDisabledState.editorDisabled;
-  var isInViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  if (!targetRef || isEditorDisabled && !isInViewMode) {
+  var isInViewMode = mode === 'view';
+  if (!targetRef || editorDisabled && !isInViewMode) {
     return null;
   }
 
@@ -324,7 +379,7 @@ export function ContentComponent(_ref5) {
     }
   });
   if (!editorExperiment('live_pages_graceful_edit', 'control') && viewModeToolbarEntry !== 'none') {
-    if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.contentMode) === 'live-edit' && editorViewModeState !== null && editorViewModeState !== void 0 && editorViewModeState.isConsumption) {
+    if (contentMode === 'live-edit' && isConsumption) {
       var hasOtherToolbarItems = toolbarItems && toolbarItems.length !== 0;
       var shouldAddToolbarItems = viewModeToolbarEntry === 'expand-existing-only' ? hasOtherToolbarItems : true;
       if (shouldAddToolbarItems) {
@@ -360,8 +415,8 @@ export function ContentComponent(_ref5) {
   };
 
   // Confirm dialog
-  var _ref7 = floatingToolbarData || {},
-    confirmDialogForItem = _ref7.confirmDialogForItem;
+  var _ref6 = floatingToolbarData || {},
+    confirmDialogForItem = _ref6.confirmDialogForItem;
   var confirmButtonItem = confirmDialogForItem ?
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/esm/ui/EmojiPickerButton.js

@@ -8,9 +8,10 @@ import React, { useCallback, useContext } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { IconButton } from '@atlaskit/button/new';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { EmojiPicker } from '@atlaskit/emoji';
 import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -52,11 +53,17 @@ var emojiPickerButtonWrapperVisualRefresh = css({
     }
   }
 });
-var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
-  var _useSharedPluginState = useSharedPluginState(props.pluginInjectionApi, ['emoji']),
+var useEmojiProvider = sharedPluginStateHookMigratorFactory(function (api) {
+  var emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
+  return emojiProvider ? Promise.resolve(emojiProvider) : undefined;
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['emoji']),
     emojiState = _useSharedPluginState.emojiState;
+  return emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState.emojiProvider) : undefined;
+});
+var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
+  var emojiProvider = useEmojiProvider(props.pluginInjectionApi);
   var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
-  var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
   if (!emojiProvider) {
     return null;
   }

package/dist/esm/ui/Toolbar.js

@@ -577,8 +577,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
   _inherits(Toolbar, _Component);
   return _createClass(Toolbar, [{
-    key: "resetStyling",
-    value: function resetStyling(_ref3) {
+    key: "resetStylingLegacy",
+    value: function resetStylingLegacy(_ref3) {
       var table = _ref3.table;
       if (this.props.editorView) {
         var _this$props$api;
@@ -591,6 +591,20 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         (_this$props$api = this.props.api) === null || _this$props$api === void 0 || (_this$props$api = _this$props$api.decorations) === null || _this$props$api === void 0 || _this$props$api.actions.removeDecoration(state, dispatch);
       }
     }
+
+    // remove any decorations added by toolbar buttons i.e danger and selected styling
+    // this prevents https://product-fabric.atlassian.net/browse/ED-10207
+  }, {
+    key: "resetStyling",
+    value: function resetStyling() {
+      if (this.props.editorView) {
+        var _this$props$api2;
+        var _this$props$editorVie3 = this.props.editorView,
+          state = _this$props$editorVie3.state,
+          dispatch = _this$props$editorVie3.dispatch;
+        (_this$props$api2 = this.props.api) === null || _this$props$api2 === void 0 || (_this$props$api2 = _this$props$api2.decorations) === null || _this$props$api2 === void 0 || _this$props$api2.actions.removeDecoration(state, dispatch);
+      }
+    }
   }, {
     key: "setDisableScroll",
     value: function setDisableScroll(disabled) {
@@ -620,10 +634,16 @@ var Toolbar = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate(prevProps) {
       var _this$props;
       checkShouldForceFocusAndApply((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.editorView);
-      if (this.props.node !== prevProps.node) {
-        this.resetStyling({
-          table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
-        });
+      if (fg('platform_editor_remove_slow_table_transactions')) {
+        if (this.props.node !== prevProps.node) {
+          this.resetStyling();
+        }
+      } else {
+        if (this.props.node !== prevProps.node) {
+          this.resetStylingLegacy({
+            table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
+          });
+        }
       }
     }
   }, {
@@ -635,9 +655,13 @@ var Toolbar = /*#__PURE__*/function (_Component) {
           dispatch = editorView.dispatch;
         dispatch(forceFocusSelector(null)(tr));
       }
-      this.resetStyling({
-        table: this.props.node.type.name === 'table'
-      });
+      if (fg('platform_editor_remove_slow_table_transactions')) {
+        this.resetStyling();
+      } else {
+        this.resetStylingLegacy({
+          table: this.props.node.type.name === 'table'
+        });
+      }
     }
   }, {
     key: "render",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "4.1.4",
+	"version": "4.1.6",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,9 +28,9 @@
 		"@atlaskit/adf-utils": "^19.19.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/checkbox": "^17.1.0",
-		"@atlaskit/editor-common": "^105.0.0",
+		"@atlaskit/editor-common": "^105.5.0",
 		"@atlaskit/editor-palette": "^2.1.0",
-		"@atlaskit/editor-plugin-analytics": "^2.2.0",
+		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-context-panel": "^4.1.0",
 		"@atlaskit/editor-plugin-copy-button": "^2.0.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
@@ -42,15 +42,15 @@
 		"@atlaskit/editor-plugin-table": "^10.9.0",
 		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/emoji": "^69.1.0",
+		"@atlaskit/emoji": "^69.2.0",
 		"@atlaskit/icon": "^26.0.0",
-		"@atlaskit/menu": "^5.0.0",
-		"@atlaskit/modal-dialog": "^14.1.0",
+		"@atlaskit/menu": "^6.0.0",
+		"@atlaskit/modal-dialog": "^14.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/select": "^20.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.19.0",
+		"@atlaskit/tmp-editor-statsig": "^4.22.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -137,6 +137,9 @@
 		"platform_editor_no_selection_until_interaction": {
 			"type": "boolean"
 		},
+		"platform_editor_remove_slow_table_transactions": {
+			"type": "boolean"
+		},
 		"platform_editor_user_intent_plugin": {
 			"type": "boolean"
 		},