@atlaskit/editor-plugin-text-color 3.1.5 → 3.1.7

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-text-color
 
+## 3.1.7
+
+### Patch Changes
+
+- [`3145f278b1f7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3145f278b1f7a) -
+  [ux] [ED-28473] minor UI updates for editor-toolbar
+
+  - Use ADS ButtonGroup for ToolbarButtonGroup
+  - Remove groupLocation prop and use CSS instead
+  - Use DropdownItemGroup for ToolbarDropdownItemSection and expand props for section separator and
+    title
+  - Support ReactNode as content for ToolbarTooltip and add missing shortcuts in tooltips
+  - Center Icons for split buttons and make chevron icon 24px wide
+  - Align dropdown menu UI with current editor design
+
+- Updated dependencies
+
+## 3.1.6
+
+### Patch Changes
+
+- [`4d47716053c75`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4d47716053c75) -
+  [ux] ED-28799 Complete text colour / highlight menu items
+- Updated dependencies
+
 ## 3.1.5
 
 ### Patch Changes

package/dist/cjs/ui/TextColorHighlightMenu.compiled.css

@@ -1,4 +1,2 @@
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}

package/dist/cjs/ui/TextColorHighlightMenu.js

@@ -15,27 +15,30 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  menu: "_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+  menu: "_1rjcv77o _18zru2gc"
 };
 var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
   var children = _ref.children,
     api = _ref.api;
   var isTextColorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.disabled');
+  var highlightColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
+  var textColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.color');
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarColorSwatch, {
-      highlightColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
+      highlightColor: highlightColor || ''
     }, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {
       label: formatMessage(_messages.textColorMessages.textColorTooltip),
-      iconColor: "var(--ds-text-accent-magenta, #943D73)",
+      iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
       shouldRecommendSmallIcon: true,
       size: 'small',
       isDisabled: isTextColorDisabled,
       spacing: 'compact'
     })),
     isDisabled: isTextColorDisabled,
-    testId: "text-color-highlight-menu"
+    testId: "text-color-highlight-menu",
+    hasSectionMargin: false
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.menu
   }, children));

package/dist/cjs/ui/TextColorMenuItem.compiled.css

@@ -1,2 +1 @@
-
-._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}

package/dist/cjs/ui/TextColorMenuItem.js

@@ -1,27 +1,29 @@
 /* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TextColorMenuItem = TextColorMenuItem;
 require("./TextColorMenuItem.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  container: "_zulpu2gc",
-  colorPalette: "_18u0x0bf"
+  container: "_zulpu2gc"
 };
 function TextColorMenuItem(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    parents = _ref.parents;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor'], function (states) {
       var _states$textColorStat, _states$textColorStat2, _states$textColorStat3;
       return {
@@ -33,22 +35,42 @@ function TextColorMenuItem(_ref) {
     color = _useSharedPluginState.color,
     defaultColor = _useSharedPluginState.defaultColor,
     palette = _useSharedPluginState.palette;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var _ref2 = editorView !== null && editorView !== void 0 ? editorView : {
+      state: null,
+      dispatch: null
+    },
+    state = _ref2.state,
+    dispatch = _ref2.dispatch;
+  var _useToolbarDropdownMe = (0, _editorToolbar.useToolbarDropdownMenu)(),
+    closeMenu = _useToolbarDropdownMe.closeMenu;
+  var handleTextColorChange = (0, _react.useCallback)(function (color) {
+    var _api$textColor;
+    if (!state || !dispatch) {
+      return;
+    }
+    if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.actions) !== null && _api$textColor !== void 0 && _api$textColor.changeColor) {
+      api.textColor.actions.changeColor(color, (0, _toolbar.getInputMethodFromParentKeys)(parents))(state, dispatch);
+      closeMenu();
+    }
+  }, [api, state, dispatch, closeMenu, parents]);
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     xcss: styles.container,
     testId: "text-color-menu-item"
   }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     weight: "bold"
-  }, formatMessage(_messages.textColorMessages.textColorTooltip)), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.colorPalette
-  }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
-    onClick: function onClick() {},
+  }, formatMessage(_messages.textColorMessages.textColorTooltip)), /*#__PURE__*/_react.default.createElement(_editorToolbar.ColorPalette, {
+    onClick: function onClick(color) {
+      handleTextColorChange(color);
+    },
     selectedColor: color || defaultColor,
     paletteOptions: {
       palette: palette,
       hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
       paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
     }
-  }))));
+  }));
 }

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

@@ -35,9 +35,11 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
     parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
       rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[_toolbar.TEXT_COLOR_MENU_ITEM.key]
     })],
-    component: function component() {
+    component: function component(_ref2) {
+      var parents = _ref2.parents;
       return /*#__PURE__*/_react.default.createElement(_TextColorMenuItem.TextColorMenuItem, {
-        api: api
+        api: api,
+        parents: parents
       });
     }
   })];

package/dist/es2019/ui/TextColorHighlightMenu.compiled.css

@@ -1,4 +1,2 @@
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}

package/dist/es2019/ui/TextColorHighlightMenu.js

@@ -8,29 +8,32 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  menu: "_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+  menu: "_1rjcv77o _18zru2gc"
 };
 export const TextColorHighlightMenu = ({
   children,
   api
 }) => {
   const isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
+  const highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
+  const textColor = useSharedPluginStateSelector(api, 'textColor.color');
   const {
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
-      highlightColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
+      highlightColor: highlightColor || ''
     }, /*#__PURE__*/React.createElement(TextColorIcon, {
       label: formatMessage(messages.textColorTooltip),
-      iconColor: "var(--ds-text-accent-magenta, #943D73)",
+      iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
       shouldRecommendSmallIcon: true,
       size: 'small',
       isDisabled: isTextColorDisabled,
       spacing: 'compact'
     })),
     isDisabled: isTextColorDisabled,
-    testId: "text-color-highlight-menu"
+    testId: "text-color-highlight-menu",
+    hasSectionMargin: false
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.menu
   }, children));

package/dist/es2019/ui/TextColorMenuItem.compiled.css

@@ -1,2 +1 @@
-
-._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}

package/dist/es2019/ui/TextColorMenuItem.js

@@ -1,20 +1,21 @@
 /* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./TextColorMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
-import { ColorPalette, textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
+import { getInputMethodFromParentKeys, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
-import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
-import { Stack, Box, Text } from '@atlaskit/primitives/compiled';
+import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+import { Stack, Text } from '@atlaskit/primitives/compiled';
 const styles = {
-  container: "_zulpu2gc",
-  colorPalette: "_18u0x0bf"
+  container: "_zulpu2gc"
 };
 export function TextColorMenuItem({
-  api
+  api,
+  parents
 }) {
   const {
     color,
@@ -28,23 +29,46 @@ export function TextColorMenuItem({
       palette: ((_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.palette) || []
     };
   });
+  const {
+    editorView
+  } = useEditorToolbar();
+  const {
+    state,
+    dispatch
+  } = editorView !== null && editorView !== void 0 ? editorView : {
+    state: null,
+    dispatch: null
+  };
+  const {
+    closeMenu
+  } = useToolbarDropdownMenu();
+  const handleTextColorChange = useCallback(color => {
+    var _api$textColor, _api$textColor$action;
+    if (!state || !dispatch) {
+      return;
+    }
+    if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor$action = _api$textColor.actions) !== null && _api$textColor$action !== void 0 && _api$textColor$action.changeColor) {
+      api.textColor.actions.changeColor(color, getInputMethodFromParentKeys(parents))(state, dispatch);
+      closeMenu();
+    }
+  }, [api, state, dispatch, closeMenu, parents]);
   const {
     formatMessage
   } = useIntl();
-  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.container,
     testId: "text-color-menu-item"
   }, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
-  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.colorPalette
-  }, /*#__PURE__*/React.createElement(ColorPalette, {
-    onClick: () => {},
+  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette, {
+    onClick: color => {
+      handleTextColorChange(color);
+    },
     selectedColor: color || defaultColor,
     paletteOptions: {
       palette: palette,
       hexToPaletteColor: hexToEditorTextPaletteColor,
       paletteColorTooltipMessages: textPaletteTooltipMessages
     }
-  }))));
+  }));
 }

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

@@ -32,8 +32,11 @@ export const getToolbarComponents = api => {
       ...TEXT_COLOR_HIGHLIGHT_MENU_SECTION,
       rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[TEXT_COLOR_MENU_ITEM.key]
     }],
-    component: () => /*#__PURE__*/React.createElement(TextColorMenuItem, {
-      api: api
+    component: ({
+      parents
+    }) => /*#__PURE__*/React.createElement(TextColorMenuItem, {
+      api: api,
+      parents: parents
     })
   }];
 };

package/dist/esm/ui/TextColorHighlightMenu.compiled.css

@@ -1,4 +1,2 @@
-._19bvu2gc{padding-left:var(--ds-space-100,8px)}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}

package/dist/esm/ui/TextColorHighlightMenu.js

@@ -8,27 +8,30 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  menu: "_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+  menu: "_1rjcv77o _18zru2gc"
 };
 export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
   var children = _ref.children,
     api = _ref.api;
   var isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
+  var highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
+  var textColor = useSharedPluginStateSelector(api, 'textColor.color');
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
-      highlightColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
+      highlightColor: highlightColor || ''
     }, /*#__PURE__*/React.createElement(TextColorIcon, {
       label: formatMessage(messages.textColorTooltip),
-      iconColor: "var(--ds-text-accent-magenta, #943D73)",
+      iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
       shouldRecommendSmallIcon: true,
       size: 'small',
       isDisabled: isTextColorDisabled,
       spacing: 'compact'
     })),
     isDisabled: isTextColorDisabled,
-    testId: "text-color-highlight-menu"
+    testId: "text-color-highlight-menu",
+    hasSectionMargin: false
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.menu
   }, children));

package/dist/esm/ui/TextColorMenuItem.compiled.css

@@ -1,2 +1 @@
-
-._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}

package/dist/esm/ui/TextColorMenuItem.js

@@ -1,20 +1,21 @@
 /* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./TextColorMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
-import { ColorPalette, textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
+import { getInputMethodFromParentKeys, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
-import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
-import { Stack, Box, Text } from '@atlaskit/primitives/compiled';
+import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+import { Stack, Text } from '@atlaskit/primitives/compiled';
 var styles = {
-  container: "_zulpu2gc",
-  colorPalette: "_18u0x0bf"
+  container: "_zulpu2gc"
 };
 export function TextColorMenuItem(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    parents = _ref.parents;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['textColor'], function (states) {
       var _states$textColorStat, _states$textColorStat2, _states$textColorStat3;
       return {
@@ -26,22 +27,42 @@ export function TextColorMenuItem(_ref) {
     color = _useSharedPluginState.color,
     defaultColor = _useSharedPluginState.defaultColor,
     palette = _useSharedPluginState.palette;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var _ref2 = editorView !== null && editorView !== void 0 ? editorView : {
+      state: null,
+      dispatch: null
+    },
+    state = _ref2.state,
+    dispatch = _ref2.dispatch;
+  var _useToolbarDropdownMe = useToolbarDropdownMenu(),
+    closeMenu = _useToolbarDropdownMe.closeMenu;
+  var handleTextColorChange = useCallback(function (color) {
+    var _api$textColor;
+    if (!state || !dispatch) {
+      return;
+    }
+    if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.actions) !== null && _api$textColor !== void 0 && _api$textColor.changeColor) {
+      api.textColor.actions.changeColor(color, getInputMethodFromParentKeys(parents))(state, dispatch);
+      closeMenu();
+    }
+  }, [api, state, dispatch, closeMenu, parents]);
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.container,
     testId: "text-color-menu-item"
   }, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
-  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.colorPalette
-  }, /*#__PURE__*/React.createElement(ColorPalette, {
-    onClick: function onClick() {},
+  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette, {
+    onClick: function onClick(color) {
+      handleTextColorChange(color);
+    },
     selectedColor: color || defaultColor,
     paletteOptions: {
       palette: palette,
       hexToPaletteColor: hexToEditorTextPaletteColor,
       paletteColorTooltipMessages: textPaletteTooltipMessages
     }
-  }))));
+  }));
 }

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

@@ -28,9 +28,11 @@ export var getToolbarComponents = function getToolbarComponents(api) {
     parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
       rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[TEXT_COLOR_MENU_ITEM.key]
     })],
-    component: function component() {
+    component: function component(_ref2) {
+      var parents = _ref2.parents;
       return /*#__PURE__*/React.createElement(TextColorMenuItem, {
-        api: api
+        api: api,
+        parents: parents
       });
     }
   })];

package/dist/types/textColorPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -12,7 +13,8 @@ export type Dependencies = [
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<SelectionToolbarPlugin>,
     OptionalPlugin<ToolbarPlugin>,
-    OptionalPlugin<UserPreferencesPlugin>
+    OptionalPlugin<UserPreferencesPlugin>,
+    OptionalPlugin<HighlightPlugin>
 ];
 export type TextColorPlugin = NextEditorPlugin<'textColor', {
     pluginConfiguration: TextColorPluginOptions | undefined;

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
 import type { TextColorPlugin } from '../textColorPluginType';
-export declare function TextColorMenuItem({ api, }: {
+interface TextColorMenuItemProps {
     api: ExtractInjectionAPI<TextColorPlugin> | undefined;
-}): React.JSX.Element;
+    parents: ToolbarComponentTypes;
+}
+export declare function TextColorMenuItem({ api, parents }: TextColorMenuItemProps): 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 { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { TextColorPlugin } from '../textColorPluginType';
 export declare const getToolbarComponents: (api: ExtractInjectionAPI<TextColorPlugin> | undefined) => RegisterComponent[];

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

@@ -1,5 +1,6 @@
 import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -12,7 +13,8 @@ export type Dependencies = [
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<SelectionToolbarPlugin>,
     OptionalPlugin<ToolbarPlugin>,
-    OptionalPlugin<UserPreferencesPlugin>
+    OptionalPlugin<UserPreferencesPlugin>,
+    OptionalPlugin<HighlightPlugin>
 ];
 export type TextColorPlugin = NextEditorPlugin<'textColor', {
     pluginConfiguration: TextColorPluginOptions | undefined;

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
 import type { TextColorPlugin } from '../textColorPluginType';
-export declare function TextColorMenuItem({ api, }: {
+interface TextColorMenuItemProps {
     api: ExtractInjectionAPI<TextColorPlugin> | undefined;
-}): React.JSX.Element;
+    parents: ToolbarComponentTypes;
+}
+export declare function TextColorMenuItem({ api, parents }: TextColorMenuItemProps): 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 { RegisterComponent } from '@atlaskit/editor-toolbar-model';
 import type { TextColorPlugin } from '../textColorPluginType';
 export declare const getToolbarComponents: (api: ExtractInjectionAPI<TextColorPlugin> | undefined) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "3.1.5",
+	"version": "3.1.7",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,25 +36,26 @@
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
+		"@atlaskit/editor-plugin-highlight": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
 		"@atlaskit/editor-plugin-toolbar": "^0.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/editor-toolbar": "^0.2.0",
+		"@atlaskit/editor-toolbar": "^0.3.0",
 		"@atlaskit/editor-toolbar-model": "^0.1.0",
-		"@atlaskit/icon": "^27.11.0",
+		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.27.0",
+		"@atlaskit/tmp-editor-statsig": "^9.29.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.20.0",
+		"@atlaskit/editor-common": "^107.24.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"