@atlaskit/editor-plugin-toolbar 3.3.3 → 3.4.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 3.4.1
+
+### Patch Changes
+
+- [`7aff1e36b43e1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aff1e36b43e1) -
+  Improve editor selection toolbar experience tracking
+- Updated dependencies
+
+## 3.4.0
+
+### Minor Changes
+
+- [`301c7dd0ccdd2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/301c7dd0ccdd2) -
+  Adds new `contextualFormattingEnabled` plugin option to editor-plugin-toolbar. This has 3 options
+  (always-inline, always-pinned and controlled) to allow direct control over toolbar placement in
+  the editor.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.3.3
 
 ### Patch Changes

package/afm-products/tsconfig.json

@@ -0,0 +1,60 @@
+{
+	"extends": "../../../../tsconfig.entry-points.products.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-toolbar/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*"
+	],
+	"references": [
+		{
+			"path": "../../../helpers/browser-apis/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-analytics/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-connectivity/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../tmp-editor-statsig/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-products/tsconfig.json"
+		}
+	]
+}

package/dist/cjs/pm-plugins/experiences/SelectionToolbarOpenExperience.js

@@ -1,22 +1,56 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _experiences = require("@atlaskit/editor-common/experiences");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var pluginKey = new _state.PluginKey('selectionToolbarOpenExperience');
+var START_METHOD = {
+  MOUSE_UP: 'mouse-up',
+  KEY_DOWN: 'key-down'
+};
+var ABORT_REASON = {
+  SELECTION_CLEARED: 'selection-cleared',
+  BLOCK_MENU_OPENED: 'block-menu-opened',
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+/**
+ * This experience tracks when the selection toolbar is opened.
+ *
+ * Start: When user makes a selection via mouseup or shift+arrow key down
+ * Success: When the selection toolbar is added to the DOM within 500ms of start
+ * Abort: When selection transition to empty or block menu is opened
+ */
 var _default = exports.default = function _default(_ref) {
   var popupsMountPointRef = _ref.popupsMountPointRef,
     editorViewDomRef = _ref.editorViewDomRef;
+  var cachedTarget = null;
   var getTarget = function getTarget() {
-    var _editorViewDomRef$cur;
-    return popupsMountPointRef.current || ((_editorViewDomRef$cur = editorViewDomRef.current) === null || _editorViewDomRef$cur === void 0 ? void 0 : _editorViewDomRef$cur.closest('.ak-editor-content-area'));
+    if (!cachedTarget) {
+      var _editorViewDomRef$cur;
+      cachedTarget = popupsMountPointRef.current || ((_editorViewDomRef$cur = editorViewDomRef.current) === null || _editorViewDomRef$cur === void 0 || (_editorViewDomRef$cur = _editorViewDomRef$cur.closest('.ak-editor-content-area')) === null || _editorViewDomRef$cur === void 0 ? void 0 : _editorViewDomRef$cur.querySelector(':scope > [data-testid="plugins-components-wrapper"]')) || null;
+    }
+    return cachedTarget;
   };
   var experience = new _experiences.Experience('selection-toolbar-open', {
-    checks: [new _experiences.ExperienceCheckTimeout(500), new _experiences.ExperienceCheckDomMutation({
+    checks: [new _experiences.ExperienceCheckTimeout({
+      durationMs: 500,
+      onTimeout: function onTimeout() {
+        if (isBlockMenuWithinNode(getTarget())) {
+          return {
+            status: 'abort',
+            metadata: {
+              reason: ABORT_REASON.BLOCK_MENU_OPENED
+            }
+          };
+        }
+      }
+    }), new _experiences.ExperienceCheckDomMutation({
       onDomMutation: function onDomMutation(_ref2) {
         var mutations = _ref2.mutations;
         if (mutations.some(isSelectionToolbarAddedInMutation)) {
@@ -29,8 +63,7 @@ var _default = exports.default = function _default(_ref) {
         return {
           target: getTarget(),
           options: {
-            childList: true,
-            subtree: true
+            childList: true
           }
         };
       }
@@ -44,7 +77,11 @@ var _default = exports.default = function _default(_ref) {
       },
       apply: function apply(_tr, pluginState, oldState, newState) {
         if (!oldState.selection.empty && newState.selection.empty) {
-          experience.abort();
+          experience.abort({
+            metadata: {
+              reason: ABORT_REASON.SELECTION_CLEARED
+            }
+          });
         }
         return pluginState;
       }
@@ -52,15 +89,23 @@ var _default = exports.default = function _default(_ref) {
     props: {
       handleDOMEvents: {
         mouseup: function mouseup(view) {
-          if (!view.state.selection.empty) {
-            experience.start();
+          if (!view.state.selection.empty && !isSelectionToolbarWithinNode(getTarget())) {
+            experience.start({
+              metadata: {
+                method: START_METHOD.MOUSE_UP
+              }
+            });
           }
         },
         keydown: function keydown(_view, _ref3) {
           var shiftKey = _ref3.shiftKey,
             key = _ref3.key;
           if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
-            experience.start();
+            experience.start({
+              metadata: {
+                method: START_METHOD.KEY_DOWN
+              }
+            });
           }
         }
       }
@@ -68,7 +113,11 @@ var _default = exports.default = function _default(_ref) {
     view: function view() {
       return {
         destroy: function destroy() {
-          experience.abort();
+          experience.abort({
+            metadata: {
+              reason: ABORT_REASON.EDITOR_DESTROYED
+            }
+          });
         }
       };
     }
@@ -77,8 +126,24 @@ var _default = exports.default = function _default(_ref) {
 var isSelectionToolbarAddedInMutation = function isSelectionToolbarAddedInMutation(_ref4) {
   var type = _ref4.type,
     addedNodes = _ref4.addedNodes;
-  return type === 'childList' && Array.from(addedNodes).some(isSelectionToolbarWithinNode);
+  return type === 'childList' && (0, _toConsumableArray2.default)(addedNodes).some(isSelectionToolbarWithinNode);
 };
 var isSelectionToolbarWithinNode = function isSelectionToolbarWithinNode(node) {
-  return node instanceof HTMLElement && !!node.querySelector('[data-testid="editor-floating-toolbar"]');
+  return containsPopupWithNestedTestId(node, 'editor-floating-toolbar');
+};
+var isBlockMenuWithinNode = function isBlockMenuWithinNode(node) {
+  return containsPopupWithNestedTestId(node, 'editor-block-menu');
+};
+var containsPopupWithNestedTestId = function containsPopupWithNestedTestId(node, testId) {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+
+  // Check if node itself has the popup attribute and contains the element with testId
+  if (node.matches('[data-editor-popup="true"]')) {
+    return !!node.querySelector("[data-testid=\"".concat(testId, "\"]"));
+  }
+
+  // Check if any direct child with popup attribute contains the element with testId
+  return !!node.querySelector(":scope > [data-editor-popup=\"true\"] [data-testid=\"".concat(testId, "\"]"));
 };

package/dist/cjs/toolbarPlugin.js

@@ -78,9 +78,11 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
   var popupsMountPointRef = {};
   var editorViewDomRef = {};
   var disableSelectionToolbar = config.disableSelectionToolbar,
-    disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned;
+    disableSelectionToolbarWhenPinned = config.disableSelectionToolbarWhenPinned,
+    _config$contextualFor = config.contextualFormattingEnabled,
+    contextualFormattingEnabled = _config$contextualFor === void 0 ? 'always-pinned' : _config$contextualFor;
   var registry = (0, _editorToolbarModel.createComponentRegistry)();
-  registry.register((0, _toolbarComponents.getToolbarComponents)(api, disableSelectionToolbar));
+  registry.register((0, _toolbarComponents.getToolbarComponents)(contextualFormattingEnabled, api, disableSelectionToolbar));
   return {
     name: 'toolbar',
     actions: {
@@ -94,6 +96,9 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
       },
       getComponents: function getComponents() {
         return registry.components;
+      },
+      contextualFormattingMode: function contextualFormattingMode() {
+        return contextualFormattingEnabled;
       }
     },
     getSharedState: function getSharedState(editorState) {
@@ -182,7 +187,7 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
             }
           });
         }
-      }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_experience_tracking', 'isEnabled', true) ? [{
+      }].concat((0, _toConsumableArray2.default)(!disableSelectionToolbar && (0, _expValEquals.expValEquals)('platform_editor_experience_tracking', 'isEnabled', true) ? [{
         name: 'selectionToolbarOpenExperience',
         plugin: function plugin() {
           return (0, _SelectionToolbarOpenExperience.default)({

package/dist/cjs/ui/Section.js

@@ -9,14 +9,22 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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;
   }
-  if (disableSelectionToolbar) {
-    return true;
+
+  /**
+   * This check is no longer needed with plugin config changes, the selection toolbar will not be registered and so
+   * no components will render
+   */
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_placement_config')) {
+    if (disableSelectionToolbar) {
+      return true;
+    }
   }
   if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
     return true;

package/dist/cjs/ui/toolbar-components.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("./consts");
 var _OverflowMenu = require("./OverflowMenu");
@@ -17,8 +18,8 @@ var _OverflowSection = require("./OverflowSection");
 var _PrimaryToolbar = require("./PrimaryToolbar");
 var _Section = require("./Section");
 var _TextCollapsedMenu = require("./TextCollapsedMenu");
-var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api, disableSelectionToolbar) {
-  var components = [{
+var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
+  return [{
     type: 'toolbar',
     key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
     component: function component(_ref) {
@@ -29,7 +30,10 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         testId: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
       }, children);
     }
-  }, {
+  }];
+};
+var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
+  return [{
     type: 'toolbar',
     key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
     component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _PrimaryToolbar.PrimaryToolbar : function (_ref2) {
@@ -39,7 +43,10 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         testId: "primary-toolbar"
       }, children);
     }
-  }, {
+  }];
+};
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar) {
+  var components = [{
     type: _toolbar.TEXT_SECTION.type,
     key: _toolbar.TEXT_SECTION.key,
     parents: [{
@@ -249,5 +256,22 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       }
     });
   }
+  if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_placement_config')) {
+    switch (contextualFormattingEnabled) {
+      case 'always-inline':
+        components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
+        break;
+      case 'always-pinned':
+        components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
+        break;
+      case 'controlled':
+        components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
+        components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
+        break;
+    }
+  } else {
+    components.unshift.apply(components, (0, _toConsumableArray2.default)(getInlineTextToolbarComponents()));
+    components.unshift.apply(components, (0, _toConsumableArray2.default)(getPrimaryToolbarComponents()));
+  }
   return components;
 };

package/dist/es2019/pm-plugins/experiences/SelectionToolbarOpenExperience.js

@@ -2,16 +2,48 @@ import { Experience, ExperienceCheckDomMutation, ExperienceCheckTimeout } from '
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 const pluginKey = new PluginKey('selectionToolbarOpenExperience');
+const START_METHOD = {
+  MOUSE_UP: 'mouse-up',
+  KEY_DOWN: 'key-down'
+};
+const ABORT_REASON = {
+  SELECTION_CLEARED: 'selection-cleared',
+  BLOCK_MENU_OPENED: 'block-menu-opened',
+  EDITOR_DESTROYED: 'editor-destroyed'
+};
+/**
+ * This experience tracks when the selection toolbar is opened.
+ *
+ * Start: When user makes a selection via mouseup or shift+arrow key down
+ * Success: When the selection toolbar is added to the DOM within 500ms of start
+ * Abort: When selection transition to empty or block menu is opened
+ */
 export default (({
   popupsMountPointRef,
   editorViewDomRef
 }) => {
+  let cachedTarget = null;
   const getTarget = () => {
-    var _editorViewDomRef$cur;
-    return popupsMountPointRef.current || ((_editorViewDomRef$cur = editorViewDomRef.current) === null || _editorViewDomRef$cur === void 0 ? void 0 : _editorViewDomRef$cur.closest('.ak-editor-content-area'));
+    if (!cachedTarget) {
+      var _editorViewDomRef$cur, _editorViewDomRef$cur2;
+      cachedTarget = popupsMountPointRef.current || ((_editorViewDomRef$cur = editorViewDomRef.current) === null || _editorViewDomRef$cur === void 0 ? void 0 : (_editorViewDomRef$cur2 = _editorViewDomRef$cur.closest('.ak-editor-content-area')) === null || _editorViewDomRef$cur2 === void 0 ? void 0 : _editorViewDomRef$cur2.querySelector(':scope > [data-testid="plugins-components-wrapper"]')) || null;
+    }
+    return cachedTarget;
   };
   const experience = new Experience('selection-toolbar-open', {
-    checks: [new ExperienceCheckTimeout(500), new ExperienceCheckDomMutation({
+    checks: [new ExperienceCheckTimeout({
+      durationMs: 500,
+      onTimeout: () => {
+        if (isBlockMenuWithinNode(getTarget())) {
+          return {
+            status: 'abort',
+            metadata: {
+              reason: ABORT_REASON.BLOCK_MENU_OPENED
+            }
+          };
+        }
+      }
+    }), new ExperienceCheckDomMutation({
       onDomMutation: ({
         mutations
       }) => {
@@ -24,8 +56,7 @@ export default (({
       observeConfig: () => ({
         target: getTarget(),
         options: {
-          childList: true,
-          subtree: true
+          childList: true
         }
       })
     })]
@@ -36,7 +67,11 @@ export default (({
       init: () => ({}),
       apply: (_tr, pluginState, oldState, newState) => {
         if (!oldState.selection.empty && newState.selection.empty) {
-          experience.abort();
+          experience.abort({
+            metadata: {
+              reason: ABORT_REASON.SELECTION_CLEARED
+            }
+          });
         }
         return pluginState;
       }
@@ -44,8 +79,12 @@ export default (({
     props: {
       handleDOMEvents: {
         mouseup: view => {
-          if (!view.state.selection.empty) {
-            experience.start();
+          if (!view.state.selection.empty && !isSelectionToolbarWithinNode(getTarget())) {
+            experience.start({
+              metadata: {
+                method: START_METHOD.MOUSE_UP
+              }
+            });
           }
         },
         keydown: (_view, {
@@ -53,7 +92,11 @@ export default (({
           key
         }) => {
           if (shiftKey && key.includes('Arrow') && !isSelectionToolbarWithinNode(getTarget())) {
-            experience.start();
+            experience.start({
+              metadata: {
+                method: START_METHOD.KEY_DOWN
+              }
+            });
           }
         }
       }
@@ -61,7 +104,11 @@ export default (({
     view: () => {
       return {
         destroy: () => {
-          experience.abort();
+          experience.abort({
+            metadata: {
+              reason: ABORT_REASON.EDITOR_DESTROYED
+            }
+          });
         }
       };
     }
@@ -71,8 +118,24 @@ const isSelectionToolbarAddedInMutation = ({
   type,
   addedNodes
 }) => {
-  return type === 'childList' && Array.from(addedNodes).some(isSelectionToolbarWithinNode);
+  return type === 'childList' && [...addedNodes].some(isSelectionToolbarWithinNode);
 };
 const isSelectionToolbarWithinNode = node => {
-  return node instanceof HTMLElement && !!node.querySelector('[data-testid="editor-floating-toolbar"]');
+  return containsPopupWithNestedTestId(node, 'editor-floating-toolbar');
+};
+const isBlockMenuWithinNode = node => {
+  return containsPopupWithNestedTestId(node, 'editor-block-menu');
+};
+const containsPopupWithNestedTestId = (node, testId) => {
+  if (!(node instanceof HTMLElement)) {
+    return false;
+  }
+
+  // Check if node itself has the popup attribute and contains the element with testId
+  if (node.matches('[data-editor-popup="true"]')) {
+    return !!node.querySelector(`[data-testid="${testId}"]`);
+  }
+
+  // Check if any direct child with popup attribute contains the element with testId
+  return !!node.querySelector(`:scope > [data-editor-popup="true"] [data-testid="${testId}"]`);
 };

package/dist/es2019/toolbarPlugin.js

@@ -64,10 +64,11 @@ export const toolbarPlugin = ({
   const editorViewDomRef = {};
   const {
     disableSelectionToolbar,
-    disableSelectionToolbarWhenPinned
+    disableSelectionToolbarWhenPinned,
+    contextualFormattingEnabled = 'always-pinned'
   } = config;
   const registry = createComponentRegistry();
-  registry.register(getToolbarComponents(api, disableSelectionToolbar));
+  registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar));
   return {
     name: 'toolbar',
     actions: {
@@ -80,6 +81,9 @@ export const toolbarPlugin = ({
       },
       getComponents: () => {
         return registry.components;
+      },
+      contextualFormattingMode: () => {
+        return contextualFormattingEnabled;
       }
     },
     getSharedState(editorState) {
@@ -173,7 +177,7 @@ export const toolbarPlugin = ({
             }
           });
         }
-      }, ...(expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
+      }, ...(!disableSelectionToolbar && expValEquals('platform_editor_experience_tracking', 'isEnabled', true) ? [{
         name: 'selectionToolbarOpenExperience',
         plugin: () => selectionToolbarOpenExperience({
           popupsMountPointRef,

package/dist/es2019/ui/Section.js

@@ -2,14 +2,22 @@ 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, SeparatorPosition } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 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;
   }
-  if (disableSelectionToolbar) {
-    return true;
+
+  /**
+   * This check is no longer needed with plugin config changes, the selection toolbar will not be registered and so
+   * no components will render
+   */
+  if (!fg('platform_editor_toolbar_aifc_placement_config')) {
+    if (disableSelectionToolbar) {
+      return true;
+    }
   }
   if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
     return true;

package/dist/es2019/ui/toolbar-components.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
 import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { SELECTION_TOOLBAR_LABEL } from './consts';
 import { OverflowMenu } from './OverflowMenu';
@@ -9,8 +10,8 @@ import { OverflowSection } from './OverflowSection';
 import { PrimaryToolbar } from './PrimaryToolbar';
 import { Section } from './Section';
 import { TextCollapsedMenu } from './TextCollapsedMenu';
-export const getToolbarComponents = (api, disableSelectionToolbar) => {
-  const components = [{
+const getInlineTextToolbarComponents = () => {
+  return [{
     type: 'toolbar',
     key: TOOLBARS.INLINE_TEXT_TOOLBAR,
     component: ({
@@ -22,7 +23,10 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
         testId: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
       }, children);
     }
-  }, {
+  }];
+};
+const getPrimaryToolbarComponents = () => {
+  return [{
     type: 'toolbar',
     key: TOOLBARS.PRIMARY_TOOLBAR,
     component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : ({
@@ -31,7 +35,10 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
       label: "Primary Toolbar",
       testId: "primary-toolbar"
     }, children)
-  }, {
+  }];
+};
+export const getToolbarComponents = (contextualFormattingEnabled, api, disableSelectionToolbar) => {
+  const components = [{
     type: TEXT_SECTION.type,
     key: TEXT_SECTION.key,
     parents: [{
@@ -245,5 +252,22 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
       }
     });
   }
+  if (fg('platform_editor_toolbar_aifc_placement_config')) {
+    switch (contextualFormattingEnabled) {
+      case 'always-inline':
+        components.unshift(...getInlineTextToolbarComponents());
+        break;
+      case 'always-pinned':
+        components.unshift(...getPrimaryToolbarComponents());
+        break;
+      case 'controlled':
+        components.unshift(...getInlineTextToolbarComponents());
+        components.unshift(...getPrimaryToolbarComponents());
+        break;
+    }
+  } else {
+    components.unshift(...getInlineTextToolbarComponents());
+    components.unshift(...getPrimaryToolbarComponents());
+  }
   return components;
 };