@atlaskit/editor-plugin-track-changes 2.6.4 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-track-changes
 
+## 2.7.0
+
+### Minor Changes
+
+- [`f78a34afab8d4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f78a34afab8d4) -
+  [ux] ED-28961 register undo redo and track changes buttons to new toolbar behind
+  platform_editor_toolbar_aifc. adds ai buttons into comment toolbar.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.6.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -34,9 +34,21 @@
 		{
 			"path": "../../editor-plugin-show-diff/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-toolbar/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}

package/afm-dev-agents/tsconfig.json

@@ -34,9 +34,21 @@
 		{
 			"path": "../../editor-plugin-show-diff/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-toolbar/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-dev-agents/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon-lab/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-dev-agents/tsconfig.json"
 		}

package/afm-jira/tsconfig.json

@@ -34,9 +34,21 @@
 		{
 			"path": "../../editor-plugin-show-diff/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-toolbar/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-jira/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon-lab/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-jira/tsconfig.json"
 		}

package/afm-passionfruit/tsconfig.json

@@ -34,9 +34,21 @@
 		{
 			"path": "../../editor-plugin-show-diff/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-toolbar/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon-lab/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
 		}

package/afm-post-office/tsconfig.json

@@ -34,9 +34,21 @@
 		{
 			"path": "../../editor-plugin-show-diff/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-toolbar/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-post-office/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon-lab/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-post-office/tsconfig.json"
 		}

package/afm-rovo-extension/tsconfig.json

@@ -34,9 +34,21 @@
 		{
 			"path": "../../editor-plugin-show-diff/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-toolbar/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-rovo-extension/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon-lab/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-rovo-extension/tsconfig.json"
 		}

package/afm-townsquare/tsconfig.json

@@ -34,9 +34,21 @@
 		{
 			"path": "../../editor-plugin-show-diff/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-toolbar/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar/afm-townsquare/tsconfig.json"
+		},
+		{
+			"path": "../../editor-toolbar-model/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/icon-lab/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../tmp-editor-statsig/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-townsquare/tsconfig.json"
 		}

package/dist/cjs/trackChangesPlugin.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.trackChangesPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("./pm-plugins/main");
 var _types = require("./pm-plugins/types");
+var _toolbarComponents = require("./ui/toolbar-components");
 var _TrackChangesToolbarButton = require("./ui/TrackChangesToolbarButton");
 var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugin(_ref) {
   var api = _ref.api,
@@ -18,11 +20,16 @@ var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugi
     });
   };
   if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
-    var _api$primaryToolbar;
-    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || (_api$primaryToolbar = _api$primaryToolbar.actions) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.registerComponent({
-      name: 'trackChanges',
-      component: primaryToolbarComponent
-    });
+    if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+      var _api$toolbar;
+      api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
+    } else {
+      var _api$primaryToolbar;
+      api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || (_api$primaryToolbar = _api$primaryToolbar.actions) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.registerComponent({
+        name: 'trackChanges',
+        component: primaryToolbarComponent
+      });
+    }
   }
   return {
     name: 'trackChanges',

package/dist/cjs/ui/TrackChangesButtonNew.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrackChangesButtonNew = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var TrackChangesButtonNew = exports.TrackChangesButtonNew = function TrackChangesButtonNew(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['trackChanges'], function (states) {
+      var _states$trackChangesS, _states$trackChangesS2;
+      return {
+        isDisplayingChanges: (_states$trackChangesS = states.trackChangesState) === null || _states$trackChangesS === void 0 ? void 0 : _states$trackChangesS.isDisplayingChanges,
+        isShowDiffAvailable: (_states$trackChangesS2 = states.trackChangesState) === null || _states$trackChangesS2 === void 0 ? void 0 : _states$trackChangesS2.isShowDiffAvailable
+      };
+    }),
+    isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
+    isShowDiffAvailable = _useSharedPluginState.isShowDiffAvailable;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var handleClick = _react.default.useCallback(function () {
+    var _api$trackChanges;
+    var wasShowingDiffSelected = isDisplayingChanges;
+    var result = api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 || (_api$trackChanges = api.trackChanges) === null || _api$trackChanges === void 0 ? void 0 : _api$trackChanges.commands.toggleChanges);
+    // On de-selection - focus back on the editor
+    if (result && wasShowingDiffSelected) {
+      api === null || api === void 0 || api.core.actions.focus();
+    }
+  }, [api, isDisplayingChanges]);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatMessage(_messages.trackChangesMessages.toolbarIconLabel)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.HistoryIcon, {
+      label: formatMessage(_messages.trackChangesMessages.toolbarIconLabel)
+    }),
+    onClick: handleClick,
+    isDisabled: !isShowDiffAvailable,
+    isSelected: isDisplayingChanges
+  }));
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _TrackChangesButtonNew = require("./TrackChangesButtonNew");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+  return [{
+    type: _toolbar.TRACK_CHANGES_SECTION.type,
+    key: _toolbar.TRACK_CHANGES_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.TRACK_CHANGES_SECTION.key]
+    }]
+  }, {
+    type: _toolbar.TRACK_CHANGES_GROUP.type,
+    key: _toolbar.TRACK_CHANGES_GROUP.key,
+    parents: [{
+      type: _toolbar.TRACK_CHANGES_SECTION.type,
+      key: _toolbar.TRACK_CHANGES_SECTION.key,
+      rank: _toolbar.TRACK_CHANGES_SECTION_RANK[_toolbar.TRACK_CHANGES_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.TRACK_CHANGES_BUTTON.type,
+    key: _toolbar.TRACK_CHANGES_BUTTON.key,
+    parents: [{
+      type: _toolbar.TRACK_CHANGES_GROUP.type,
+      key: _toolbar.TRACK_CHANGES_GROUP.key,
+      rank: _toolbar.TRACK_CHANGES_GROUP_RANK[_toolbar.TRACK_CHANGES_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_TrackChangesButtonNew.TrackChangesButtonNew, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/es2019/trackChangesPlugin.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createTrackChangesPlugin, trackChangesPluginKey } from './pm-plugins/main';
 import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './pm-plugins/types';
+import { getToolbarComponents } from './ui/toolbar-components';
 import { TrackChangesToolbarButton } from './ui/TrackChangesToolbarButton';
 export const trackChangesPlugin = ({
   api,
@@ -12,11 +14,16 @@ export const trackChangesPlugin = ({
     });
   };
   if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
-    var _api$primaryToolbar, _api$primaryToolbar$a;
-    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : (_api$primaryToolbar$a = _api$primaryToolbar.actions) === null || _api$primaryToolbar$a === void 0 ? void 0 : _api$primaryToolbar$a.registerComponent({
-      name: 'trackChanges',
-      component: primaryToolbarComponent
-    });
+    if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+      var _api$toolbar;
+      api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+    } else {
+      var _api$primaryToolbar, _api$primaryToolbar$a;
+      api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : (_api$primaryToolbar$a = _api$primaryToolbar.actions) === null || _api$primaryToolbar$a === void 0 ? void 0 : _api$primaryToolbar$a.registerComponent({
+        name: 'trackChanges',
+        component: primaryToolbarComponent
+      });
+    }
   }
   return {
     name: 'trackChanges',

package/dist/es2019/ui/TrackChangesButtonNew.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { trackChangesMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarButton, ToolbarTooltip, HistoryIcon } from '@atlaskit/editor-toolbar';
+export const TrackChangesButtonNew = ({
+  api
+}) => {
+  const {
+    isDisplayingChanges,
+    isShowDiffAvailable
+  } = useSharedPluginStateWithSelector(api, ['trackChanges'], states => {
+    var _states$trackChangesS, _states$trackChangesS2;
+    return {
+      isDisplayingChanges: (_states$trackChangesS = states.trackChangesState) === null || _states$trackChangesS === void 0 ? void 0 : _states$trackChangesS.isDisplayingChanges,
+      isShowDiffAvailable: (_states$trackChangesS2 = states.trackChangesState) === null || _states$trackChangesS2 === void 0 ? void 0 : _states$trackChangesS2.isShowDiffAvailable
+    };
+  });
+  const {
+    formatMessage
+  } = useIntl();
+  const handleClick = React.useCallback(() => {
+    var _api$trackChanges;
+    const wasShowingDiffSelected = isDisplayingChanges;
+    const result = api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$trackChanges = api.trackChanges) === null || _api$trackChanges === void 0 ? void 0 : _api$trackChanges.commands.toggleChanges);
+    // On de-selection - focus back on the editor
+    if (result && wasShowingDiffSelected) {
+      api === null || api === void 0 ? void 0 : api.core.actions.focus();
+    }
+  }, [api, isDisplayingChanges]);
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(trackChangesMessages.toolbarIconLabel)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(HistoryIcon, {
+      label: formatMessage(trackChangesMessages.toolbarIconLabel)
+    }),
+    onClick: handleClick,
+    isDisabled: !isShowDiffAvailable,
+    isSelected: isDisplayingChanges
+  }));
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TOOLBAR_RANK, TOOLBARS, TRACK_CHANGES_BUTTON, TRACK_CHANGES_GROUP, TRACK_CHANGES_GROUP_RANK, TRACK_CHANGES_SECTION, TRACK_CHANGES_SECTION_RANK } from "@atlaskit/editor-common/toolbar";
+import { TrackChangesButtonNew } from "./TrackChangesButtonNew";
+export const getToolbarComponents = api => {
+  return [{
+    type: TRACK_CHANGES_SECTION.type,
+    key: TRACK_CHANGES_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[TRACK_CHANGES_SECTION.key]
+    }]
+  }, {
+    type: TRACK_CHANGES_GROUP.type,
+    key: TRACK_CHANGES_GROUP.key,
+    parents: [{
+      type: TRACK_CHANGES_SECTION.type,
+      key: TRACK_CHANGES_SECTION.key,
+      rank: TRACK_CHANGES_SECTION_RANK[TRACK_CHANGES_GROUP.key]
+    }]
+  }, {
+    type: TRACK_CHANGES_BUTTON.type,
+    key: TRACK_CHANGES_BUTTON.key,
+    parents: [{
+      type: TRACK_CHANGES_GROUP.type,
+      key: TRACK_CHANGES_GROUP.key,
+      rank: TRACK_CHANGES_GROUP_RANK[TRACK_CHANGES_BUTTON.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(TrackChangesButtonNew, {
+      api: api
+    })
+  }];
+};

package/dist/esm/trackChangesPlugin.js

@@ -1,6 +1,8 @@
 import React from 'react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { createTrackChangesPlugin, trackChangesPluginKey } from './pm-plugins/main';
 import { TOGGLE_TRACK_CHANGES_ACTION as ACTION } from './pm-plugins/types';
+import { getToolbarComponents } from './ui/toolbar-components';
 import { TrackChangesToolbarButton } from './ui/TrackChangesToolbarButton';
 export var trackChangesPlugin = function trackChangesPlugin(_ref) {
   var api = _ref.api,
@@ -11,11 +13,16 @@ export var trackChangesPlugin = function trackChangesPlugin(_ref) {
     });
   };
   if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
-    var _api$primaryToolbar;
-    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || (_api$primaryToolbar = _api$primaryToolbar.actions) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.registerComponent({
-      name: 'trackChanges',
-      component: primaryToolbarComponent
-    });
+    if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+      var _api$toolbar;
+      api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+    } else {
+      var _api$primaryToolbar;
+      api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || (_api$primaryToolbar = _api$primaryToolbar.actions) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.registerComponent({
+        name: 'trackChanges',
+        component: primaryToolbarComponent
+      });
+    }
   }
   return {
     name: 'trackChanges',

package/dist/esm/ui/TrackChangesButtonNew.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { trackChangesMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarButton, ToolbarTooltip, HistoryIcon } from '@atlaskit/editor-toolbar';
+export var TrackChangesButtonNew = function TrackChangesButtonNew(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['trackChanges'], function (states) {
+      var _states$trackChangesS, _states$trackChangesS2;
+      return {
+        isDisplayingChanges: (_states$trackChangesS = states.trackChangesState) === null || _states$trackChangesS === void 0 ? void 0 : _states$trackChangesS.isDisplayingChanges,
+        isShowDiffAvailable: (_states$trackChangesS2 = states.trackChangesState) === null || _states$trackChangesS2 === void 0 ? void 0 : _states$trackChangesS2.isShowDiffAvailable
+      };
+    }),
+    isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
+    isShowDiffAvailable = _useSharedPluginState.isShowDiffAvailable;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var handleClick = React.useCallback(function () {
+    var _api$trackChanges;
+    var wasShowingDiffSelected = isDisplayingChanges;
+    var result = api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 || (_api$trackChanges = api.trackChanges) === null || _api$trackChanges === void 0 ? void 0 : _api$trackChanges.commands.toggleChanges);
+    // On de-selection - focus back on the editor
+    if (result && wasShowingDiffSelected) {
+      api === null || api === void 0 || api.core.actions.focus();
+    }
+  }, [api, isDisplayingChanges]);
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatMessage(trackChangesMessages.toolbarIconLabel)
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(HistoryIcon, {
+      label: formatMessage(trackChangesMessages.toolbarIconLabel)
+    }),
+    onClick: handleClick,
+    isDisabled: !isShowDiffAvailable,
+    isSelected: isDisplayingChanges
+  }));
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { TOOLBAR_RANK, TOOLBARS, TRACK_CHANGES_BUTTON, TRACK_CHANGES_GROUP, TRACK_CHANGES_GROUP_RANK, TRACK_CHANGES_SECTION, TRACK_CHANGES_SECTION_RANK } from "@atlaskit/editor-common/toolbar";
+import { TrackChangesButtonNew } from "./TrackChangesButtonNew";
+export var getToolbarComponents = function getToolbarComponents(api) {
+  return [{
+    type: TRACK_CHANGES_SECTION.type,
+    key: TRACK_CHANGES_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[TRACK_CHANGES_SECTION.key]
+    }]
+  }, {
+    type: TRACK_CHANGES_GROUP.type,
+    key: TRACK_CHANGES_GROUP.key,
+    parents: [{
+      type: TRACK_CHANGES_SECTION.type,
+      key: TRACK_CHANGES_SECTION.key,
+      rank: TRACK_CHANGES_SECTION_RANK[TRACK_CHANGES_GROUP.key]
+    }]
+  }, {
+    type: TRACK_CHANGES_BUTTON.type,
+    key: TRACK_CHANGES_BUTTON.key,
+    parents: [{
+      type: TRACK_CHANGES_GROUP.type,
+      key: TRACK_CHANGES_GROUP.key,
+      rank: TRACK_CHANGES_GROUP_RANK[TRACK_CHANGES_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(TrackChangesButtonNew, {
+        api: api
+      });
+    }
+  }];
+};

package/dist/types/trackChangesPluginType.d.ts

@@ -2,6 +2,7 @@ import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/
 import type { HistoryPlugin } from '@atlaskit/editor-plugin-history';
 import { type PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ShowDiffPlugin } from '@atlaskit/editor-plugin-show-diff';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
     commands: {
         /**
@@ -25,7 +26,8 @@ export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
         /**
          * Show diff plugin for showing the changes in a diff view.
          */
-        ShowDiffPlugin
+        ShowDiffPlugin,
+        OptionalPlugin<ToolbarPlugin>
     ];
     pluginConfiguration?: {
         /**

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TrackChangesPlugin } from '../trackChangesPluginType';
+type TrackChangesButtonNewProps = {
+    api?: ExtractInjectionAPI<TrackChangesPlugin>;
+};
+export declare const TrackChangesButtonNew: ({ api }: TrackChangesButtonNewProps) => React.JSX.Element;
+export {};

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

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

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

@@ -2,6 +2,7 @@ import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/
 import type { HistoryPlugin } from '@atlaskit/editor-plugin-history';
 import { type PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { ShowDiffPlugin } from '@atlaskit/editor-plugin-show-diff';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
     commands: {
         /**
@@ -25,7 +26,8 @@ export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
         /**
          * Show diff plugin for showing the changes in a diff view.
          */
-        ShowDiffPlugin
+        ShowDiffPlugin,
+        OptionalPlugin<ToolbarPlugin>
     ];
     pluginConfiguration?: {
         /**

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TrackChangesPlugin } from '../trackChangesPluginType';
+type TrackChangesButtonNewProps = {
+    api?: ExtractInjectionAPI<TrackChangesPlugin>;
+};
+export declare const TrackChangesButtonNew: ({ api }: TrackChangesButtonNewProps) => React.JSX.Element;
+export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-track-changes",
-	"version": "2.6.4",
+	"version": "2.7.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,13 +35,17 @@
 		"@atlaskit/editor-plugin-history": "3.1.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
 		"@atlaskit/editor-plugin-show-diff": "0.1.3",
+		"@atlaskit/editor-plugin-toolbar": "^0.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/editor-toolbar": "^0.3.0",
+		"@atlaskit/editor-toolbar-model": "^0.1.0",
 		"@atlaskit/icon-lab": "^5.6.0",
+		"@atlaskit/tmp-editor-statsig": "^11.3.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.25.0",
+		"@atlaskit/editor-common": "^107.26.0",
 		"react": "^18.2.0"
 	},
 	"techstack": {