@atlaskit/editor-plugin-track-changes 5.0.34 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-track-changes
 
+## 5.1.0
+
+### Minor Changes
+
+- [`3246746518cdf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3246746518cdf) -
+  [ux] Add the ability to supply a ButtonWrapper to track-changes plugin via options
+
 ## 5.0.34
 
 ### Patch Changes

package/dist/cjs/trackChangesPlugin.js

@@ -22,7 +22,7 @@ var trackChangesPlugin = exports.trackChangesPlugin = function trackChangesPlugi
   if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
     if (isToolbarAIFCEnabled) {
       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));
+      api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api, options));
     } 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({

package/dist/cjs/ui/TrackChangesToolbarButton.js

@@ -12,7 +12,8 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var TrackChangesToolbarButton = exports.TrackChangesToolbarButton = function TrackChangesToolbarButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    Wrapper = _ref.wrapper;
   var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['trackChanges'], function (states) {
       var _states$trackChangesS, _states$trackChangesS2;
@@ -34,9 +35,21 @@ var TrackChangesToolbarButton = exports.TrackChangesToolbarButton = function Tra
       api === null || api === void 0 || api.core.actions.focus();
     }
   }, [api, isDisplayingChanges]);
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+  if (!isToolbarAIFCEnabled) {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+      content: formatMessage(_messages.trackChangesMessages.toolbarIconLabel)
+    }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+      icon: _editorToolbar.HistoryIcon,
+      label: formatMessage(_messages.trackChangesMessages.toolbarIconLabel),
+      appearance: "subtle",
+      isDisabled: !isShowDiffAvailable,
+      isSelected: isDisplayingChanges,
+      onClick: handleClick
+    }));
+  }
+  var button = /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
     content: formatMessage(_messages.trackChangesMessages.toolbarIconLabel)
-  }, isToolbarAIFCEnabled ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.HistoryIcon, {
       label: formatMessage(_messages.trackChangesMessages.toolbarIconLabel),
       size: "small"
@@ -44,12 +57,6 @@ var TrackChangesToolbarButton = exports.TrackChangesToolbarButton = function Tra
     onClick: handleClick,
     isDisabled: !isShowDiffAvailable,
     isSelected: isDisplayingChanges
-  }) : /*#__PURE__*/_react.default.createElement(_new.IconButton, {
-    icon: _editorToolbar.HistoryIcon,
-    label: formatMessage(_messages.trackChangesMessages.toolbarIconLabel),
-    appearance: "subtle",
-    isDisabled: !isShowDiffAvailable,
-    isSelected: isDisplayingChanges,
-    onClick: handleClick
   }));
+  return Wrapper ? /*#__PURE__*/_react.default.createElement(Wrapper, null, button) : button;
 };

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

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _TrackChangesToolbarButton = require("./TrackChangesToolbarButton");
-var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api, options) {
   return [].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_undo_redo_confluence') ? [] : [{
     type: _toolbar.TRACK_CHANGES_SECTION.type,
     key: _toolbar.TRACK_CHANGES_SECTION.key,
@@ -37,7 +37,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
     }],
     component: function component() {
       return /*#__PURE__*/_react.default.createElement(_TrackChangesToolbarButton.TrackChangesToolbarButton, {
-        api: api
+        api: api,
+        wrapper: options === null || options === void 0 ? void 0 : options.ButtonWrapper
       });
     }
   }]);

package/dist/es2019/trackChangesPlugin.js

@@ -16,7 +16,7 @@ export const trackChangesPlugin = ({
   if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
     if (isToolbarAIFCEnabled) {
       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));
+      api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api, options));
     } 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({

package/dist/es2019/ui/TrackChangesToolbarButton.js

@@ -5,7 +5,8 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton, ToolbarTooltip, HistoryIcon } from '@atlaskit/editor-toolbar';
 export const TrackChangesToolbarButton = ({
-  api
+  api,
+  wrapper: Wrapper
 }) => {
   const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
   const {
@@ -30,9 +31,21 @@ export const TrackChangesToolbarButton = ({
       api === null || api === void 0 ? void 0 : api.core.actions.focus();
     }
   }, [api, isDisplayingChanges]);
-  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+  if (!isToolbarAIFCEnabled) {
+    return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: formatMessage(trackChangesMessages.toolbarIconLabel)
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      icon: HistoryIcon,
+      label: formatMessage(trackChangesMessages.toolbarIconLabel),
+      appearance: "subtle",
+      isDisabled: !isShowDiffAvailable,
+      isSelected: isDisplayingChanges,
+      onClick: handleClick
+    }));
+  }
+  const button = /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: formatMessage(trackChangesMessages.toolbarIconLabel)
-  }, isToolbarAIFCEnabled ? /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(HistoryIcon, {
       label: formatMessage(trackChangesMessages.toolbarIconLabel),
       size: "small"
@@ -40,12 +53,6 @@ export const TrackChangesToolbarButton = ({
     onClick: handleClick,
     isDisabled: !isShowDiffAvailable,
     isSelected: isDisplayingChanges
-  }) : /*#__PURE__*/React.createElement(IconButton, {
-    icon: HistoryIcon,
-    label: formatMessage(trackChangesMessages.toolbarIconLabel),
-    appearance: "subtle",
-    isDisabled: !isShowDiffAvailable,
-    isSelected: isDisplayingChanges,
-    onClick: handleClick
   }));
+  return Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, button) : button;
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { TOOLBAR_RANK, TOOLBARS, TRACK_CHANGES_BUTTON, TRACK_CHANGES_GROUP, TRACK_CHANGES_SECTION_RANK, TRACK_CHANGES_SECTION, TRACK_CHANGES_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { TrackChangesToolbarButton } from './TrackChangesToolbarButton';
-export const getToolbarComponents = api => {
+export const getToolbarComponents = (api, options) => {
   return [...(fg('platform_editor_toolbar_aifc_undo_redo_confluence') ? [] : [{
     type: TRACK_CHANGES_SECTION.type,
     key: TRACK_CHANGES_SECTION.key,
@@ -28,7 +28,8 @@ export const getToolbarComponents = api => {
       rank: TRACK_CHANGES_GROUP_RANK[TRACK_CHANGES_BUTTON.key]
     }],
     component: () => /*#__PURE__*/React.createElement(TrackChangesToolbarButton, {
-      api: api
+      api: api,
+      wrapper: options === null || options === void 0 ? void 0 : options.ButtonWrapper
     })
   }];
 };

package/dist/esm/trackChangesPlugin.js

@@ -15,7 +15,7 @@ export var trackChangesPlugin = function trackChangesPlugin(_ref) {
   if ((options === null || options === void 0 ? void 0 : options.showOnToolbar) === true) {
     if (isToolbarAIFCEnabled) {
       var _api$toolbar;
-      api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+      api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api, options));
     } 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({

package/dist/esm/ui/TrackChangesToolbarButton.js

@@ -5,7 +5,8 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { trackChangesMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarButton, ToolbarTooltip, HistoryIcon } from '@atlaskit/editor-toolbar';
 export var TrackChangesToolbarButton = function TrackChangesToolbarButton(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    Wrapper = _ref.wrapper;
   var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['trackChanges'], function (states) {
       var _states$trackChangesS, _states$trackChangesS2;
@@ -27,9 +28,21 @@ export var TrackChangesToolbarButton = function TrackChangesToolbarButton(_ref)
       api === null || api === void 0 || api.core.actions.focus();
     }
   }, [api, isDisplayingChanges]);
-  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+  if (!isToolbarAIFCEnabled) {
+    return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: formatMessage(trackChangesMessages.toolbarIconLabel)
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      icon: HistoryIcon,
+      label: formatMessage(trackChangesMessages.toolbarIconLabel),
+      appearance: "subtle",
+      isDisabled: !isShowDiffAvailable,
+      isSelected: isDisplayingChanges,
+      onClick: handleClick
+    }));
+  }
+  var button = /*#__PURE__*/React.createElement(ToolbarTooltip, {
     content: formatMessage(trackChangesMessages.toolbarIconLabel)
-  }, isToolbarAIFCEnabled ? /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
     iconBefore: /*#__PURE__*/React.createElement(HistoryIcon, {
       label: formatMessage(trackChangesMessages.toolbarIconLabel),
       size: "small"
@@ -37,12 +50,6 @@ export var TrackChangesToolbarButton = function TrackChangesToolbarButton(_ref)
     onClick: handleClick,
     isDisabled: !isShowDiffAvailable,
     isSelected: isDisplayingChanges
-  }) : /*#__PURE__*/React.createElement(IconButton, {
-    icon: HistoryIcon,
-    label: formatMessage(trackChangesMessages.toolbarIconLabel),
-    appearance: "subtle",
-    isDisabled: !isShowDiffAvailable,
-    isSelected: isDisplayingChanges,
-    onClick: handleClick
   }));
+  return Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, button) : button;
 };

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { TOOLBAR_RANK, TOOLBARS, TRACK_CHANGES_BUTTON, TRACK_CHANGES_GROUP, TRACK_CHANGES_SECTION_RANK, TRACK_CHANGES_SECTION, TRACK_CHANGES_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { TrackChangesToolbarButton } from './TrackChangesToolbarButton';
-export var getToolbarComponents = function getToolbarComponents(api) {
+export var getToolbarComponents = function getToolbarComponents(api, options) {
   return [].concat(_toConsumableArray(fg('platform_editor_toolbar_aifc_undo_redo_confluence') ? [] : [{
     type: TRACK_CHANGES_SECTION.type,
     key: TRACK_CHANGES_SECTION.key,
@@ -30,7 +30,8 @@ export var getToolbarComponents = function getToolbarComponents(api) {
     }],
     component: function component() {
       return /*#__PURE__*/React.createElement(TrackChangesToolbarButton, {
-        api: api
+        api: api,
+        wrapper: options === null || options === void 0 ? void 0 : options.ButtonWrapper
       });
     }
   }]);

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { trackChangesPlugin } from './trackChangesPlugin';
 export type { TrackChangesPlugin } from './trackChangesPluginType';
+export type { TrackChangesPluginOptions } from './trackChangesPluginType';

package/dist/types/trackChangesPluginType.d.ts

@@ -3,6 +3,19 @@ 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 interface TrackChangesPluginOptions {
+    /**
+     * Custom wrapper component for the track changes button.
+     */
+    ButtonWrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    /**
+     * Whether the track changes button should be shown on the toolbar.
+     * Defaults to false.
+     */
+    showOnToolbar?: boolean;
+}
 export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
     commands: {
         /**
@@ -29,13 +42,7 @@ export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
         ShowDiffPlugin,
         OptionalPlugin<ToolbarPlugin>
     ];
-    pluginConfiguration?: {
-        /**
-         * Whether the track changes button should be shown on the toolbar.
-         * Defaults to false.
-         */
-        showOnToolbar?: boolean;
-    };
+    pluginConfiguration?: TrackChangesPluginOptions | undefined;
     sharedState: {
         /**
          * Whether the track changes feature is currently displaying changes.

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

@@ -3,6 +3,9 @@ import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type TrackChangesPlugin } from '../trackChangesPluginType';
 type TrackChangesToolbarButtonProps = {
     api: ExtractInjectionAPI<TrackChangesPlugin> | undefined;
+    wrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
 };
-export declare const TrackChangesToolbarButton: ({ api }: TrackChangesToolbarButtonProps) => React.JSX.Element;
+export declare const TrackChangesToolbarButton: ({ api, wrapper: Wrapper, }: TrackChangesToolbarButtonProps) => React.JSX.Element;
 export {};

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

@@ -1,4 +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[];
+import type { TrackChangesPlugin, TrackChangesPluginOptions } from '../trackChangesPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<TrackChangesPlugin>, options?: TrackChangesPluginOptions) => RegisterComponent[];

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

@@ -1,2 +1,3 @@
 export { trackChangesPlugin } from './trackChangesPlugin';
 export type { TrackChangesPlugin } from './trackChangesPluginType';
+export type { TrackChangesPluginOptions } from './trackChangesPluginType';

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

@@ -3,6 +3,19 @@ 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 interface TrackChangesPluginOptions {
+    /**
+     * Custom wrapper component for the track changes button.
+     */
+    ButtonWrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    /**
+     * Whether the track changes button should be shown on the toolbar.
+     * Defaults to false.
+     */
+    showOnToolbar?: boolean;
+}
 export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
     commands: {
         /**
@@ -29,13 +42,7 @@ export type TrackChangesPlugin = NextEditorPlugin<'trackChanges', {
         ShowDiffPlugin,
         OptionalPlugin<ToolbarPlugin>
     ];
-    pluginConfiguration?: {
-        /**
-         * Whether the track changes button should be shown on the toolbar.
-         * Defaults to false.
-         */
-        showOnToolbar?: boolean;
-    };
+    pluginConfiguration?: TrackChangesPluginOptions | undefined;
     sharedState: {
         /**
          * Whether the track changes feature is currently displaying changes.

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

@@ -3,6 +3,9 @@ import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type TrackChangesPlugin } from '../trackChangesPluginType';
 type TrackChangesToolbarButtonProps = {
     api: ExtractInjectionAPI<TrackChangesPlugin> | undefined;
+    wrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
 };
-export declare const TrackChangesToolbarButton: ({ api }: TrackChangesToolbarButtonProps) => React.JSX.Element;
+export declare const TrackChangesToolbarButton: ({ api, wrapper: Wrapper, }: TrackChangesToolbarButtonProps) => React.JSX.Element;
 export {};

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

@@ -1,4 +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[];
+import type { TrackChangesPlugin, TrackChangesPluginOptions } from '../trackChangesPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<TrackChangesPlugin>, options?: TrackChangesPluginOptions) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-track-changes",
-	"version": "5.0.34",
+	"version": "5.1.0",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",