@atlaskit/editor-plugin-toolbar 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.0
+
+### Minor Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`54098ba4cc83c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54098ba4cc83c) -
+  Add LinkSection and TextSection and add logic to hide them when toolbar is pinned. Add
+  UserPreferencesPlugin and EditorViewModePlugin as a dependency to editor-plugin-toolbar.
+
+### Patch Changes
+
+- [#199353](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199353)
+  [`22cab8325fc62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22cab8325fc62) -
+  [ux] [ED-28760] Fix editor lose focus and hence editing flow is interrupted. This is done for 2
+  components
+
+  - Dropdown
+    - Create context ToolbarUIContext for toolbar consumers to access consumer specific state and
+      callbacks
+    - Define onDropdownOpenChanged callback for selection toolbars so that editor regains focus
+      after dropdown is closed
+  - Button
+    - Call preventDefault on mouseDown to prevent button takes away focus
+
+- Updated dependencies
+
 ## 0.1.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -17,12 +17,18 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-cc/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -17,12 +17,18 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-dev-agents/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -17,12 +17,18 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-jira/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,42 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/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": "../../editor-plugin-editor-viewmode/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-selection/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/afm-post-office/tsconfig.json

@@ -17,12 +17,18 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-post-office/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -17,12 +17,18 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-rovo-extension/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -17,12 +17,18 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../editor-plugin-editor-viewmode/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-selection/afm-townsquare/tsconfig.json"
 		},
 		{
 			"path": "../../editor-plugin-user-intent/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-user-preferences/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-townsquare/tsconfig.json"
 		},

package/afm-volt/tsconfig.json

@@ -0,0 +1,36 @@
+{
+	"extends": "../../../../tsconfig.entry-points.volt.json",
+	"compilerOptions": {
+		"target": "es5",
+		"outDir": "../../../../../volt/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": "../../editor-plugin-selection/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../editor-plugin-user-intent/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-volt/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-volt/tsconfig.json"
+		}
+	]
+}

package/dist/cjs/toolbarPlugin.js

@@ -12,7 +12,7 @@ var _toolbarComponents = require("./ui/toolbar-components");
 var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
   var api = _ref.api;
   var registry = (0, _editorToolbarModel.createComponentRegistry)();
-  registry.register((0, _toolbarComponents.getToolbarComponents)());
+  registry.register((0, _toolbarComponents.getToolbarComponents)(api));
   return {
     name: 'toolbar',
     actions: {

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

@@ -45,6 +45,8 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     }
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
     editorView: editorView
+  }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
+    api: api
   }, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -53,7 +55,7 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
       menuSection: _editorToolbar.ToolbarDropdownItemSection,
       group: _editorToolbar.ToolbarButtonGroup
     }
-  })));
+  }))));
 };
 var getDomRefFromSelection = function getDomRefFromSelection(view
 // dispatchAnalyticsEvent?: DispatchAnalyticsEvent,

package/dist/cjs/ui/TextSection.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextSection = void 0;
+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 shouldShowTextSection = function shouldShowTextSection(editMode, toolbar, toolbarDocking) {
+  if (editMode === 'view') {
+    return false;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
+    return true;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === _toolbar.TOOLBARS.PRIMARY_TOOLBAR && toolbarDocking !== 'none') {
+    return true;
+  }
+  return false;
+};
+var TextSection = exports.TextSection = function TextSection(_ref) {
+  var children = _ref.children,
+    parents = _ref.parents,
+    api = _ref.api;
+  var editMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
+  var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var toolbar = parents.find(function (parent) {
+    return parent.type === 'toolbar';
+  });
+  if (!shouldShowTextSection(editMode, toolbar, toolbarDocking)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarSection, {
+    testId: "text-section"
+  }, children);
+};

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

@@ -10,7 +10,8 @@ var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _consts = require("./consts");
 var _OverflowMenu = require("./OverflowMenu");
-var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents() {
+var _TextSection = require("./TextSection");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
   return [{
     type: 'toolbar',
     key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
@@ -21,13 +22,34 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       }, children);
     }
   }, {
-    type: 'section',
-    key: 'text-section',
+    type: 'toolbar',
+    key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
+        label: "Primary Toolbar"
+      }, children);
+    }
+  }, {
+    type: _toolbar.TEXT_SECTION.type,
+    key: _toolbar.TEXT_SECTION.key,
     parents: [{
       type: 'toolbar',
-      key: 'inline-text-toolbar',
-      rank: 200
-    }]
+      key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION.key]
+    }],
+    component: function component(_ref3) {
+      var children = _ref3.children,
+        parents = _ref3.parents;
+      return /*#__PURE__*/_react.default.createElement(_TextSection.TextSection, {
+        parents: parents,
+        api: api
+      }, children);
+    }
   }, {
     type: _toolbar.OVERFLOW_SECTION.type,
     key: _toolbar.OVERFLOW_SECTION.key,
@@ -52,8 +74,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.OVERFLOW_GROUP.key,
       rank: _toolbar.OVERFLOW_GROUP_RANK[_toolbar.OVERFLOW_MENU.key]
     }],
-    component: function component(_ref2) {
-      var children = _ref2.children;
+    component: function component(_ref4) {
+      var children = _ref4.children;
       return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
     }
   }];

package/dist/es2019/toolbarPlugin.js

@@ -6,7 +6,7 @@ export const toolbarPlugin = ({
   api
 }) => {
   const registry = createComponentRegistry();
-  registry.register(getToolbarComponents());
+  registry.register(getToolbarComponents(api));
   return {
     name: 'toolbar',
     actions: {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
+import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
@@ -35,6 +35,8 @@ export const SelectionToolbar = ({
     onPositionCalculated: position => calculateToolbarPositionTrackHead(TOOLBAR_LABEL)(editorView, position)
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView
+  }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
+    api: api
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -43,7 +45,7 @@ export const SelectionToolbar = ({
       menuSection: ToolbarDropdownItemSection,
       group: ToolbarButtonGroup
     }
-  })));
+  }))));
 };
 const getDomRefFromSelection = (view
 // dispatchAnalyticsEvent?: DispatchAnalyticsEvent,

package/dist/es2019/ui/TextSection.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarSection } from '@atlaskit/editor-toolbar';
+const shouldShowTextSection = (editMode, toolbar, toolbarDocking) => {
+  if (editMode === 'view') {
+    return false;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
+    return true;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.PRIMARY_TOOLBAR && toolbarDocking !== 'none') {
+    return true;
+  }
+  return false;
+};
+export const TextSection = ({
+  children,
+  parents,
+  api
+}) => {
+  const editMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  const toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  const toolbar = parents.find(parent => parent.type === 'toolbar');
+  if (!shouldShowTextSection(editMode, toolbar, toolbarDocking)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarSection, {
+    testId: "text-section"
+  }, children);
+};

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
-import { Toolbar } from '@atlaskit/editor-toolbar';
+import { OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { PrimaryToolbar, Toolbar } from '@atlaskit/editor-toolbar';
 import { TOOLBAR_LABEL } from './consts';
 import { OverflowMenu } from './OverflowMenu';
-export const getToolbarComponents = () => {
+import { TextSection } from './TextSection';
+export const getToolbarComponents = api => {
   return [{
     type: 'toolbar',
     key: TOOLBARS.INLINE_TEXT_TOOLBAR,
@@ -15,13 +16,34 @@ export const getToolbarComponents = () => {
       }, children);
     }
   }, {
-    type: 'section',
-    key: 'text-section',
+    type: 'toolbar',
+    key: TOOLBARS.PRIMARY_TOOLBAR,
+    component: ({
+      children
+    }) => /*#__PURE__*/React.createElement(PrimaryToolbar, {
+      label: "Primary Toolbar"
+    }, children)
+  }, {
+    type: TEXT_SECTION.type,
+    key: TEXT_SECTION.key,
     parents: [{
       type: 'toolbar',
-      key: 'inline-text-toolbar',
-      rank: 200
-    }]
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION.key]
+    }],
+    component: ({
+      children,
+      parents
+    }) => {
+      return /*#__PURE__*/React.createElement(TextSection, {
+        parents: parents,
+        api: api
+      }, children);
+    }
   }, {
     type: OVERFLOW_SECTION.type,
     key: OVERFLOW_SECTION.key,

package/dist/esm/toolbarPlugin.js

@@ -5,7 +5,7 @@ import { getToolbarComponents } from './ui/toolbar-components';
 export var toolbarPlugin = function toolbarPlugin(_ref) {
   var api = _ref.api;
   var registry = createComponentRegistry();
-  registry.register(getToolbarComponents());
+  registry.register(getToolbarComponents(api));
   return {
     name: 'toolbar',
     actions: {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
+import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
@@ -38,6 +38,8 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     }
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView
+  }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
+    api: api
   }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
     toolbar: toolbar,
     components: components,
@@ -46,7 +48,7 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
       menuSection: ToolbarDropdownItemSection,
       group: ToolbarButtonGroup
     }
-  })));
+  }))));
 };
 var getDomRefFromSelection = function getDomRefFromSelection(view
 // dispatchAnalyticsEvent?: DispatchAnalyticsEvent,

package/dist/esm/ui/TextSection.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarSection } from '@atlaskit/editor-toolbar';
+var shouldShowTextSection = function shouldShowTextSection(editMode, toolbar, toolbarDocking) {
+  if (editMode === 'view') {
+    return false;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
+    return true;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.PRIMARY_TOOLBAR && toolbarDocking !== 'none') {
+    return true;
+  }
+  return false;
+};
+export var TextSection = function TextSection(_ref) {
+  var children = _ref.children,
+    parents = _ref.parents,
+    api = _ref.api;
+  var editMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  var toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var toolbar = parents.find(function (parent) {
+    return parent.type === 'toolbar';
+  });
+  if (!shouldShowTextSection(editMode, toolbar, toolbarDocking)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarSection, {
+    testId: "text-section"
+  }, children);
+};

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
-import { Toolbar } from '@atlaskit/editor-toolbar';
+import { OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { PrimaryToolbar, Toolbar } from '@atlaskit/editor-toolbar';
 import { TOOLBAR_LABEL } from './consts';
 import { OverflowMenu } from './OverflowMenu';
-export var getToolbarComponents = function getToolbarComponents() {
+import { TextSection } from './TextSection';
+export var getToolbarComponents = function getToolbarComponents(api) {
   return [{
     type: 'toolbar',
     key: TOOLBARS.INLINE_TEXT_TOOLBAR,
@@ -14,13 +15,34 @@ export var getToolbarComponents = function getToolbarComponents() {
       }, children);
     }
   }, {
-    type: 'section',
-    key: 'text-section',
+    type: 'toolbar',
+    key: TOOLBARS.PRIMARY_TOOLBAR,
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/React.createElement(PrimaryToolbar, {
+        label: "Primary Toolbar"
+      }, children);
+    }
+  }, {
+    type: TEXT_SECTION.type,
+    key: TEXT_SECTION.key,
     parents: [{
       type: 'toolbar',
-      key: 'inline-text-toolbar',
-      rank: 200
-    }]
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[TEXT_SECTION.key]
+    }],
+    component: function component(_ref3) {
+      var children = _ref3.children,
+        parents = _ref3.parents;
+      return /*#__PURE__*/React.createElement(TextSection, {
+        parents: parents,
+        api: api
+      }, children);
+    }
   }, {
     type: OVERFLOW_SECTION.type,
     key: OVERFLOW_SECTION.key,
@@ -45,8 +67,8 @@ export var getToolbarComponents = function getToolbarComponents() {
       key: OVERFLOW_GROUP.key,
       rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
     }],
-    component: function component(_ref2) {
-      var children = _ref2.children;
+    component: function component(_ref4) {
+      var children = _ref4.children;
       return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
     }
   }];

package/dist/types/toolbarPluginType.d.ts

@@ -1,9 +1,16 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
+import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
-    dependencies: [OptionalPlugin<UserIntentPlugin>, OptionalPlugin<SelectionPlugin>];
+    dependencies: [
+        OptionalPlugin<UserIntentPlugin>,
+        OptionalPlugin<SelectionPlugin>,
+        OptionalPlugin<UserPreferencesPlugin>,
+        OptionalPlugin<EditorViewModePlugin>
+    ];
     actions: {
         registerComponents: (toolbarComponents: Array<RegisterComponent>) => void;
         getComponents: () => Array<RegisterComponent>;

package/dist/types/ui/TextSection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { ToolbarPlugin } from '../toolbarPluginType';
+type TextSectionProps = {
+    children: React.ReactNode;
+    parents: ToolbarComponentTypes;
+    api?: ExtractInjectionAPI<ToolbarPlugin>;
+};
+export declare const TextSection: ({ children, parents, api }: TextSectionProps) => React.JSX.Element | null;
+export {};

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

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

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

@@ -1,11 +1,15 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
+import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 export type ToolbarPlugin = NextEditorPlugin<'toolbar', {
     dependencies: [
         OptionalPlugin<UserIntentPlugin>,
-        OptionalPlugin<SelectionPlugin>
+        OptionalPlugin<SelectionPlugin>,
+        OptionalPlugin<UserPreferencesPlugin>,
+        OptionalPlugin<EditorViewModePlugin>
     ];
     actions: {
         registerComponents: (toolbarComponents: Array<RegisterComponent>) => void;

package/dist/types-ts4.5/ui/TextSection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { ToolbarPlugin } from '../toolbarPluginType';
+type TextSectionProps = {
+    children: React.ReactNode;
+    parents: ToolbarComponentTypes;
+    api?: ExtractInjectionAPI<ToolbarPlugin>;
+};
+export declare const TextSection: ({ children, parents, api }: TextSectionProps) => React.JSX.Element | null;
+export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "0.1.0",
+	"version": "0.2.1",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,16 +31,18 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
+		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
 		"@atlaskit/editor-plugin-selection": "^3.0.0",
 		"@atlaskit/editor-plugin-user-intent": "^1.1.0",
+		"@atlaskit/editor-plugin-user-preferences": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-toolbar": "^0.1.0",
-		"@atlaskit/editor-toolbar-model": "^0.0.4",
+		"@atlaskit/editor-toolbar": "^0.3.0",
+		"@atlaskit/editor-toolbar-model": "^0.1.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.19.0",
+		"@atlaskit/editor-common": "^107.23.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {