@atlaskit/editor-plugin-toolbar 1.2.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 2.1.0
+
+### Minor Changes
+
+- [`4edb2aee0da9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4edb2aee0da9c) -
+  Add conditionalHooksFactory and migrate usage of useSharedPluginStateSelector to useEditorToolbar
+  and useSharedPluginStateWithSelector
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../../editor-toolbar-model/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/ui/Section.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDocking, disableSelectionToolbar) {
   if (editMode === 'view') {
     return false;
@@ -24,6 +26,29 @@ var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDoc
   }
   return false;
 };
+var usePluginState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true);
+}, function (api) {
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorViewMode = _useEditorToolbar.editorViewMode,
+    editorToolbarDockingPreference = _useEditorToolbar.editorToolbarDockingPreference,
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  return {
+    editorViewMode: editorViewMode,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    editorAppearance: editorAppearance
+  };
+}, function (api) {
+  var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
+  var editorToolbarDockingPreference = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var _useEditorToolbar2 = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar2.editorAppearance;
+  return {
+    editorViewMode: editorViewMode,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    editorAppearance: editorAppearance
+  };
+});
 var Section = exports.Section = function Section(_ref) {
   var children = _ref.children,
     parents = _ref.parents,
@@ -33,14 +58,14 @@ var Section = exports.Section = function Section(_ref) {
     _ref$isSharedSection = _ref.isSharedSection,
     isSharedSection = _ref$isSharedSection === void 0 ? true : _ref$isSharedSection,
     disableSelectionToolbar = _ref.disableSelectionToolbar;
-  var editMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
-  var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var _usePluginState = usePluginState(api),
+    editorViewMode = _usePluginState.editorViewMode,
+    editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
+    editorAppearance = _usePluginState.editorAppearance;
   var toolbar = parents.find(function (parent) {
     return parent.type === 'toolbar';
   });
-  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
-    editorAppearance = _useEditorToolbar.editorAppearance;
-  if (isSharedSection && !shouldShowSection(editMode, toolbar, toolbarDocking, disableSelectionToolbar)) {
+  if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, disableSelectionToolbar)) {
     return null;
   }
   var isFullPage = editorAppearance === 'full-page';

package/dist/cjs/ui/SelectionToolbar/index.js

@@ -16,6 +16,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _consts = require("../consts");
@@ -23,30 +24,59 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
+var usePluginState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true);
+}, function (api) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'userPreferences', 'toolbar', 'selection', 'userIntent', 'editorViewMode'], function (state) {
+    var _state$connectivitySt, _state$userPreference, _state$toolbarState, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
+    return {
+      connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
+      editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 || (_state$userPreference = _state$userPreference.preferences) === null || _state$userPreference === void 0 ? void 0 : _state$userPreference.toolbarDockingPosition,
+      shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar,
+      selection: (_state$selectionState = state.selectionState) === null || _state$selectionState === void 0 ? void 0 : _state$selectionState.selection,
+      currentUserIntent: (_state$userIntentStat = state.userIntentState) === null || _state$userIntentStat === void 0 ? void 0 : _state$userIntentStat.currentUserIntent,
+      editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode
+    };
+  });
+}, function (api) {
+  var connectivityStateMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  var editorToolbarDockingPreference = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var currentUserIntent = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userIntent.currentUserIntent');
+  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['toolbar'], function (state) {
+      var _state$toolbarState2;
+      return {
+        shouldShowToolbar: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.shouldShowToolbar
+      };
+    }),
+    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
+  return {
+    connectivityStateMode: connectivityStateMode,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    currentUserIntent: currentUserIntent,
+    shouldShowToolbar: shouldShowToolbar,
+    selection: selection,
+    editorViewMode: undefined
+  };
+});
 var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
   var _api$toolbar;
   var api = _ref.api,
     editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
     disableSelectionToolbarWhenPinned = _ref.disableSelectionToolbarWhenPinned;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['toolbar'], function (state) {
-      var _state$toolbarState;
-      return {
-        shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar
-      };
-    }),
-    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
+  var _usePluginState = usePluginState(api),
+    connectivityStateMode = _usePluginState.connectivityStateMode,
+    editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
+    currentUserIntent = _usePluginState.currentUserIntent,
+    shouldShowToolbar = _usePluginState.shouldShowToolbar,
+    editorViewMode = _usePluginState.editorViewMode,
+    selection = _usePluginState.selection;
   var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return isToolbarComponent(component);
   });
-  var currentUserIntent = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userIntent.currentUserIntent');
-  var connectivityStateMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
-  var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
   var isOffline = connectivityStateMode === 'offline';
-  // TODO: ED-28735 - figure out a better way to control this - needed to re-render on selection change
-  // @ts-expect-error
-  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.TextSelection;
   var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.AllSelection && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
   var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
@@ -62,7 +92,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     var calc = _utils.calculateToolbarPositionTrackHead;
     return calc(toolbarTitle)(editorView, position);
   }, [editorView]);
-  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && toolbarDocking === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
   if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || currentUserIntent && currentUserIntent !== 'default' && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true) || (0, _coreUtils.isSSR)()) {
@@ -74,7 +104,9 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     onPositionCalculated: onPositionCalculated,
     mountTo: mountPoint
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
-    editorView: editorView
+    editorView: editorView,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    editorViewMode: editorViewMode
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
     api: api,
     isDisabled: isOffline

package/dist/es2019/ui/Section.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { TOOLBARS, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ToolbarSection } from '@atlaskit/editor-toolbar';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const shouldShowSection = (editMode, toolbar, toolbarDocking, disableSelectionToolbar) => {
   if (editMode === 'view') {
     return false;
@@ -17,6 +19,29 @@ const shouldShowSection = (editMode, toolbar, toolbarDocking, disableSelectionTo
   }
   return false;
 };
+const usePluginState = conditionalHooksFactory(() => expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true), api => {
+  const {
+    editorViewMode,
+    editorToolbarDockingPreference,
+    editorAppearance
+  } = useEditorToolbar();
+  return {
+    editorViewMode,
+    editorToolbarDockingPreference,
+    editorAppearance
+  };
+}, api => {
+  const editorViewMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  const editorToolbarDockingPreference = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  const {
+    editorAppearance
+  } = useEditorToolbar();
+  return {
+    editorViewMode,
+    editorToolbarDockingPreference,
+    editorAppearance
+  };
+});
 export const Section = ({
   children,
   parents,
@@ -26,13 +51,13 @@ export const Section = ({
   isSharedSection = true,
   disableSelectionToolbar
 }) => {
-  const editMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
-  const toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
-  const toolbar = parents.find(parent => parent.type === 'toolbar');
   const {
+    editorViewMode,
+    editorToolbarDockingPreference,
     editorAppearance
-  } = useEditorToolbar();
-  if (isSharedSection && !shouldShowSection(editMode, toolbar, toolbarDocking, disableSelectionToolbar)) {
+  } = usePluginState(api);
+  const toolbar = parents.find(parent => parent.type === 'toolbar');
+  if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, disableSelectionToolbar)) {
     return null;
   }
   const isFullPage = editorAppearance === 'full-page';

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

@@ -9,12 +9,47 @@ import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state'
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
 const isToolbarComponent = component => {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
+const usePluginState = conditionalHooksFactory(() => expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true), api => {
+  return useSharedPluginStateWithSelector(api, ['connectivity', 'userPreferences', 'toolbar', 'selection', 'userIntent', 'editorViewMode'], state => {
+    var _state$connectivitySt, _state$userPreference, _state$userPreference2, _state$toolbarState, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
+    return {
+      connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
+      editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 ? void 0 : (_state$userPreference2 = _state$userPreference.preferences) === null || _state$userPreference2 === void 0 ? void 0 : _state$userPreference2.toolbarDockingPosition,
+      shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar,
+      selection: (_state$selectionState = state.selectionState) === null || _state$selectionState === void 0 ? void 0 : _state$selectionState.selection,
+      currentUserIntent: (_state$userIntentStat = state.userIntentState) === null || _state$userIntentStat === void 0 ? void 0 : _state$userIntentStat.currentUserIntent,
+      editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode
+    };
+  });
+}, api => {
+  const connectivityStateMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  const editorToolbarDockingPreference = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  const currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
+  const selection = useSharedPluginStateSelector(api, 'selection.selection');
+  const {
+    shouldShowToolbar
+  } = useSharedPluginStateWithSelector(api, ['toolbar'], state => {
+    var _state$toolbarState2;
+    return {
+      shouldShowToolbar: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.shouldShowToolbar
+    };
+  });
+  return {
+    connectivityStateMode,
+    editorToolbarDockingPreference,
+    currentUserIntent,
+    shouldShowToolbar,
+    selection,
+    editorViewMode: undefined
+  };
+});
 export const SelectionToolbar = ({
   api,
   editorView,
@@ -23,22 +58,17 @@ export const SelectionToolbar = ({
 }) => {
   var _api$toolbar;
   const {
-    shouldShowToolbar
-  } = useSharedPluginStateWithSelector(api, ['toolbar'], state => {
-    var _state$toolbarState;
-    return {
-      shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar
-    };
-  });
+    connectivityStateMode,
+    editorToolbarDockingPreference,
+    currentUserIntent,
+    shouldShowToolbar,
+    editorViewMode,
+    // @ts-expect-error
+    selection
+  } = usePluginState(api);
   const components = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   const toolbar = components === null || components === void 0 ? void 0 : components.find(component => isToolbarComponent(component));
-  const currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
-  const connectivityStateMode = useSharedPluginStateSelector(api, 'connectivity.mode');
-  const toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
   const isOffline = connectivityStateMode === 'offline';
-  // TODO: ED-28735 - figure out a better way to control this - needed to re-render on selection change
-  // @ts-expect-error
-  const selection = useSharedPluginStateSelector(api, 'selection.selection');
   const isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
   const isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection && expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
   const isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
@@ -54,7 +84,7 @@ export const SelectionToolbar = ({
     const calc = calculateToolbarPositionTrackHead;
     return calc(toolbarTitle)(editorView, position);
   }, [editorView]);
-  if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && toolbarDocking === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
+  if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
   if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || currentUserIntent && currentUserIntent !== 'default' && expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true) || isSSR()) {
@@ -66,7 +96,9 @@ export const SelectionToolbar = ({
     onPositionCalculated: onPositionCalculated,
     mountTo: mountPoint
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView
+    editorView: editorView,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    editorViewMode: editorViewMode
   }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
     api: api,
     isDisabled: isOffline

package/dist/esm/ui/Section.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { TOOLBARS, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { ToolbarSection } from '@atlaskit/editor-toolbar';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDocking, disableSelectionToolbar) {
   if (editMode === 'view') {
     return false;
@@ -17,6 +19,29 @@ var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDoc
   }
   return false;
 };
+var usePluginState = conditionalHooksFactory(function () {
+  return expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true);
+}, function (api) {
+  var _useEditorToolbar = useEditorToolbar(),
+    editorViewMode = _useEditorToolbar.editorViewMode,
+    editorToolbarDockingPreference = _useEditorToolbar.editorToolbarDockingPreference,
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  return {
+    editorViewMode: editorViewMode,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    editorAppearance: editorAppearance
+  };
+}, function (api) {
+  var editorViewMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  var editorToolbarDockingPreference = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var _useEditorToolbar2 = useEditorToolbar(),
+    editorAppearance = _useEditorToolbar2.editorAppearance;
+  return {
+    editorViewMode: editorViewMode,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    editorAppearance: editorAppearance
+  };
+});
 export var Section = function Section(_ref) {
   var children = _ref.children,
     parents = _ref.parents,
@@ -26,14 +51,14 @@ export var Section = function Section(_ref) {
     _ref$isSharedSection = _ref.isSharedSection,
     isSharedSection = _ref$isSharedSection === void 0 ? true : _ref$isSharedSection,
     disableSelectionToolbar = _ref.disableSelectionToolbar;
-  var editMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
-  var toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var _usePluginState = usePluginState(api),
+    editorViewMode = _usePluginState.editorViewMode,
+    editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
+    editorAppearance = _usePluginState.editorAppearance;
   var toolbar = parents.find(function (parent) {
     return parent.type === 'toolbar';
   });
-  var _useEditorToolbar = useEditorToolbar(),
-    editorAppearance = _useEditorToolbar.editorAppearance;
-  if (isSharedSection && !shouldShowSection(editMode, toolbar, toolbarDocking, disableSelectionToolbar)) {
+  if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, disableSelectionToolbar)) {
     return null;
   }
   var isFullPage = editorAppearance === 'full-page';

package/dist/esm/ui/SelectionToolbar/index.js

@@ -9,36 +9,66 @@ import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state'
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
 var isToolbarComponent = function isToolbarComponent(component) {
   return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
 };
+var usePluginState = conditionalHooksFactory(function () {
+  return expValEquals('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true);
+}, function (api) {
+  return useSharedPluginStateWithSelector(api, ['connectivity', 'userPreferences', 'toolbar', 'selection', 'userIntent', 'editorViewMode'], function (state) {
+    var _state$connectivitySt, _state$userPreference, _state$toolbarState, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
+    return {
+      connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
+      editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 || (_state$userPreference = _state$userPreference.preferences) === null || _state$userPreference === void 0 ? void 0 : _state$userPreference.toolbarDockingPosition,
+      shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar,
+      selection: (_state$selectionState = state.selectionState) === null || _state$selectionState === void 0 ? void 0 : _state$selectionState.selection,
+      currentUserIntent: (_state$userIntentStat = state.userIntentState) === null || _state$userIntentStat === void 0 ? void 0 : _state$userIntentStat.currentUserIntent,
+      editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode
+    };
+  });
+}, function (api) {
+  var connectivityStateMode = useSharedPluginStateSelector(api, 'connectivity.mode');
+  var editorToolbarDockingPreference = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
+  var selection = useSharedPluginStateSelector(api, 'selection.selection');
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['toolbar'], function (state) {
+      var _state$toolbarState2;
+      return {
+        shouldShowToolbar: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.shouldShowToolbar
+      };
+    }),
+    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
+  return {
+    connectivityStateMode: connectivityStateMode,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    currentUserIntent: currentUserIntent,
+    shouldShowToolbar: shouldShowToolbar,
+    selection: selection,
+    editorViewMode: undefined
+  };
+});
 export var SelectionToolbar = function SelectionToolbar(_ref) {
   var _api$toolbar;
   var api = _ref.api,
     editorView = _ref.editorView,
     mountPoint = _ref.mountPoint,
     disableSelectionToolbarWhenPinned = _ref.disableSelectionToolbarWhenPinned;
-  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['toolbar'], function (state) {
-      var _state$toolbarState;
-      return {
-        shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar
-      };
-    }),
-    shouldShowToolbar = _useSharedPluginState.shouldShowToolbar;
+  var _usePluginState = usePluginState(api),
+    connectivityStateMode = _usePluginState.connectivityStateMode,
+    editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
+    currentUserIntent = _usePluginState.currentUserIntent,
+    shouldShowToolbar = _usePluginState.shouldShowToolbar,
+    editorViewMode = _usePluginState.editorViewMode,
+    selection = _usePluginState.selection;
   var components = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.getComponents();
   var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
     return isToolbarComponent(component);
   });
-  var currentUserIntent = useSharedPluginStateSelector(api, 'userIntent.currentUserIntent');
-  var connectivityStateMode = useSharedPluginStateSelector(api, 'connectivity.mode');
-  var toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
   var isOffline = connectivityStateMode === 'offline';
-  // TODO: ED-28735 - figure out a better way to control this - needed to re-render on selection change
-  // @ts-expect-error
-  var selection = useSharedPluginStateSelector(api, 'selection.selection');
   var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
   var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof AllSelection && expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true);
   var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
@@ -54,7 +84,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     var calc = calculateToolbarPositionTrackHead;
     return calc(toolbarTitle)(editorView, position);
   }, [editorView]);
-  if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && toolbarDocking === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
+  if (expValEquals('platform_editor_toolbar_aifc_template_editor', 'isEnabled', true) && editorToolbarDockingPreference === 'top' && disableSelectionToolbarWhenPinned || !components || !toolbar) {
     return null;
   }
   if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || currentUserIntent && currentUserIntent !== 'default' && expValEquals('platform_editor_toolbar_aifc_patch_2', 'isEnabled', true) || isSSR()) {
@@ -66,7 +96,9 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     onPositionCalculated: onPositionCalculated,
     mountTo: mountPoint
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView
+    editorView: editorView,
+    editorToolbarDockingPreference: editorToolbarDockingPreference,
+    editorViewMode: editorViewMode
   }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
     api: api,
     isDisabled: isOffline

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "1.2.0",
+	"version": "2.1.0",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,21 +28,22 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/editor-plugin-connectivity": "^4.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^6.0.0",
-		"@atlaskit/editor-plugin-selection": "^4.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^2.0.0",
-		"@atlaskit/editor-plugin-user-preferences": "^2.0.0",
+		"@atlaskit/editor-plugin-connectivity": "^5.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^7.0.0",
+		"@atlaskit/editor-plugin-selection": "^5.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^3.0.0",
+		"@atlaskit/editor-plugin-user-preferences": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-toolbar": "^0.8.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^12.8.0",
+		"@atlaskit/platform-feature-flags-react": "^0.3.0",
+		"@atlaskit/tmp-editor-statsig": "^12.10.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^108.6.0",
+		"@atlaskit/editor-common": "^109.1.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {