@atlaskit/editor-plugin-toolbar 3.3.3 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 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/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) {

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/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) {

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;
 };

package/dist/esm/toolbarPlugin.js

@@ -71,9 +71,11 @@ export var 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 = createComponentRegistry();
-  registry.register(getToolbarComponents(api, disableSelectionToolbar));
+  registry.register(getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar));
   return {
     name: 'toolbar',
     actions: {
@@ -87,6 +89,9 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
       },
       getComponents: function getComponents() {
         return registry.components;
+      },
+      contextualFormattingMode: function contextualFormattingMode() {
+        return contextualFormattingEnabled;
       }
     },
     getSharedState: function getSharedState(editorState) {

package/dist/esm/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';
 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 (!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/esm/ui/toolbar-components.js

@@ -3,6 +3,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';
@@ -10,8 +11,8 @@ import { OverflowSection } from './OverflowSection';
 import { PrimaryToolbar } from './PrimaryToolbar';
 import { Section } from './Section';
 import { TextCollapsedMenu } from './TextCollapsedMenu';
-export var getToolbarComponents = function getToolbarComponents(api, disableSelectionToolbar) {
-  var components = [{
+var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
+  return [{
     type: 'toolbar',
     key: TOOLBARS.INLINE_TEXT_TOOLBAR,
     component: function component(_ref) {
@@ -22,7 +23,10 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
         testId: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? 'editor-floating-toolbar' : undefined
       }, children);
     }
-  }, {
+  }];
+};
+var getPrimaryToolbarComponents = function getPrimaryToolbarComponents() {
+  return [{
     type: 'toolbar',
     key: TOOLBARS.PRIMARY_TOOLBAR,
     component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : function (_ref2) {
@@ -32,7 +36,10 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
         testId: "primary-toolbar"
       }, children);
     }
-  }, {
+  }];
+};
+export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, disableSelectionToolbar) {
+  var components = [{
     type: TEXT_SECTION.type,
     key: TEXT_SECTION.key,
     parents: [{
@@ -242,5 +249,22 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
       }
     });
   }
+  if (fg('platform_editor_toolbar_aifc_placement_config')) {
+    switch (contextualFormattingEnabled) {
+      case 'always-inline':
+        components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
+        break;
+      case 'always-pinned':
+        components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
+        break;
+      case 'controlled':
+        components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
+        components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
+        break;
+    }
+  } else {
+    components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
+    components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents()));
+  }
   return components;
 };

package/dist/types/toolbarPluginType.d.ts

@@ -1,3 +1,4 @@
+import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
@@ -19,6 +20,18 @@ export type EditorToolbarPluginState = {
 };
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     actions: {
+        /**
+         * Returns the current contextual formatting toolbar mode configuration.
+         *
+         * This method retrieves the active setting that determines the behavior and placement
+         * of the contextual formatting toolbar in the editor.
+         *
+         * @returns The active contextual formatting mode:
+         * - `always-inline`: Formatting controls appear in a floating toolbar near selected text
+         * - `always-pinned`: Formatting controls are pinned to the top toolbar (default)
+         * - `controlled`: Both inline and primary toolbars are available
+         */
+        contextualFormattingMode: () => ContextualFormattingEnabledOptions;
         getComponents: () => Array<RegisterComponent>;
         registerComponents: RegisterComponentsAction;
     };

package/dist/types/types/index.d.ts

@@ -1,5 +1,58 @@
+import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 export type ToolbarPluginOptions = {
+    /**
+     * Controls which toolbars are available for in the editor.
+     *
+     * The contextual formatting toolbar provides text formatting options (bold, italic, links, etc.)
+     * that appear contextually based on user selection and interaction.
+     *
+     * @remarks
+     * This option determines where and when the formatting toolbar is displayed:
+     * - **Primary Toolbar**: The toolbar mounted at the top of the editor that is always visible
+     * - **Inline Text Toolbar**: A floating toolbar that appears near the selected text
+     *
+     * @example
+     * ```tsx
+     * // Always show formatting controls in a floating (inline) toolbar near selection
+     * const toolbarPlugin = createToolbarPlugin({
+     *   contextualFormattingEnabled: 'always-inline',
+     * });
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Always show formatting controls pinned to the top (primary) toolbar
+     * const toolbarPlugin = createToolbarPlugin({
+     *   contextualFormattingEnabled: 'always-pinned',
+     * });
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Allow dynamic control of toolbar placement (both inline and primary available)
+     * const toolbarPlugin = createToolbarPlugin({
+     *   contextualFormattingEnabled: 'controlled',
+     * });
+     * ```
+     *
+     * @public
+     */
+    contextualFormattingEnabled?: ContextualFormattingEnabledOptions;
+    /**
+     * @private
+     * @deprecated
+     * @description
+     * This option is deprecated and will be removed in the future, replaced with `contextualFormattingEnabled`.
+     *
+     * To disable the selection toolbar (so only the primary toolbar is shown), use `contextualFormattingEnabled: 'always-pinned'`.
+     * @example
+     * ```ts
+     * const toolbarPlugin = createToolbarPlugin({
+     *   contextualFormattingEnabled: 'always-inline',
+     * });
+     * ```
+     */
     disableSelectionToolbar?: boolean;
     disableSelectionToolbarWhenPinned?: boolean;
     /**

package/dist/types/ui/toolbar-components.d.ts

@@ -1,4 +1,5 @@
+import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { ToolbarPlugin } from '../toolbarPluginType';
-export declare const getToolbarComponents: (api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
+export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];

package/dist/types-ts4.5/toolbarPluginType.d.ts

@@ -1,3 +1,4 @@
+import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
@@ -19,6 +20,18 @@ export type EditorToolbarPluginState = {
 };
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     actions: {
+        /**
+         * Returns the current contextual formatting toolbar mode configuration.
+         *
+         * This method retrieves the active setting that determines the behavior and placement
+         * of the contextual formatting toolbar in the editor.
+         *
+         * @returns The active contextual formatting mode:
+         * - `always-inline`: Formatting controls appear in a floating toolbar near selected text
+         * - `always-pinned`: Formatting controls are pinned to the top toolbar (default)
+         * - `controlled`: Both inline and primary toolbars are available
+         */
+        contextualFormattingMode: () => ContextualFormattingEnabledOptions;
         getComponents: () => Array<RegisterComponent>;
         registerComponents: RegisterComponentsAction;
     };

package/dist/types-ts4.5/types/index.d.ts

@@ -1,5 +1,58 @@
+import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 export type ToolbarPluginOptions = {
+    /**
+     * Controls which toolbars are available for in the editor.
+     *
+     * The contextual formatting toolbar provides text formatting options (bold, italic, links, etc.)
+     * that appear contextually based on user selection and interaction.
+     *
+     * @remarks
+     * This option determines where and when the formatting toolbar is displayed:
+     * - **Primary Toolbar**: The toolbar mounted at the top of the editor that is always visible
+     * - **Inline Text Toolbar**: A floating toolbar that appears near the selected text
+     *
+     * @example
+     * ```tsx
+     * // Always show formatting controls in a floating (inline) toolbar near selection
+     * const toolbarPlugin = createToolbarPlugin({
+     *   contextualFormattingEnabled: 'always-inline',
+     * });
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Always show formatting controls pinned to the top (primary) toolbar
+     * const toolbarPlugin = createToolbarPlugin({
+     *   contextualFormattingEnabled: 'always-pinned',
+     * });
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Allow dynamic control of toolbar placement (both inline and primary available)
+     * const toolbarPlugin = createToolbarPlugin({
+     *   contextualFormattingEnabled: 'controlled',
+     * });
+     * ```
+     *
+     * @public
+     */
+    contextualFormattingEnabled?: ContextualFormattingEnabledOptions;
+    /**
+     * @private
+     * @deprecated
+     * @description
+     * This option is deprecated and will be removed in the future, replaced with `contextualFormattingEnabled`.
+     *
+     * To disable the selection toolbar (so only the primary toolbar is shown), use `contextualFormattingEnabled: 'always-pinned'`.
+     * @example
+     * ```ts
+     * const toolbarPlugin = createToolbarPlugin({
+     *   contextualFormattingEnabled: 'always-inline',
+     * });
+     * ```
+     */
     disableSelectionToolbar?: boolean;
     disableSelectionToolbarWhenPinned?: boolean;
     /**

package/dist/types-ts4.5/ui/toolbar-components.d.ts

@@ -1,4 +1,5 @@
+import type { ContextualFormattingEnabledOptions } from '@atlaskit/editor-common/toolbar';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { ToolbarPlugin } from '../toolbarPluginType';
-export declare const getToolbarComponents: (api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];
+export declare const getToolbarComponents: (contextualFormattingEnabled: ContextualFormattingEnabledOptions, api?: ExtractInjectionAPI<ToolbarPlugin>, disableSelectionToolbar?: boolean) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "3.3.3",
+	"version": "3.4.0",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.17.0",
+		"@atlaskit/editor-common": "^110.18.0",
 		"react": "^18.2.0"
 	},
 	"platform-feature-flags": {
@@ -55,6 +55,9 @@
 		},
 		"platform_editor_toolbar_aifc_user_intent_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_toolbar_aifc_placement_config": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {