@atlaskit/editor-plugin-text-color 3.1.2 → 3.1.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-text-color
 
+## 3.1.4
+
+### Patch Changes
+
+- [#197017](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197017)
+  [`5ef01d09bada1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ef01d09bada1) -
+  [ux] ED-28687 [Register] Text colour + highlight
+- Updated dependencies
+
+## 3.1.3
+
+### Patch Changes
+
+- [#195649](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195649)
+  [`231bb33e06dfe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/231bb33e06dfe) -
+  EDITOR-1131 Bump adf-schema version to 50.2.0
+- Updated dependencies
+
 ## 3.1.2
 
 ### Patch Changes

package/dist/cjs/textColorPlugin.js

@@ -8,11 +8,13 @@ exports.textColorPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _changeColor2 = require("./pm-plugins/commands/change-color");
 var _main = require("./pm-plugins/main");
 var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
 var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
+var _toolbarComponents = require("./ui/toolbar-components");
 var pluginConfig = function pluginConfig(textColorConfig) {
   if (!textColorConfig || typeof textColorConfig === 'boolean') {
     return undefined;
@@ -20,9 +22,9 @@ var pluginConfig = function pluginConfig(textColorConfig) {
   return textColorConfig;
 };
 var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
-  var _api$primaryToolbar;
   var textColorConfig = _ref.config,
     api = _ref.api;
+  var isToolbarAifcEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true);
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var editorView = _ref2.editorView,
       popupsMountPoint = _ref2.popupsMountPoint,
@@ -42,10 +44,18 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
       api: api
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'textColor',
-    component: primaryToolbarComponent
-  });
+  if (isToolbarAifcEnabled) {
+    var _api$toolbar;
+    if (api !== null && api !== void 0 && (_api$toolbar = api.toolbar) !== null && _api$toolbar !== void 0 && _api$toolbar.actions.registerComponents) {
+      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.actions.registerComponent({
+      name: 'textColor',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'textColor',
     marks: function marks() {
@@ -75,7 +85,7 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
         return (0, _changeColor2.changeColor)(color, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
       }
     },
-    pluginsOptions: {
+    pluginsOptions: !isToolbarAifcEnabled ? {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.currentState()) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.preferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
@@ -106,7 +116,7 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
           return undefined;
         }
       }
-    },
+    } : {},
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

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

@@ -0,0 +1,4 @@
+._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)}

package/dist/cjs/ui/TextColorHighlightMenu.js

@@ -0,0 +1,42 @@
+/* TextColorHighlightMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextColorHighlightMenu = void 0;
+require("./TextColorHighlightMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  menu: "_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+};
+var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
+  var children = _ref.children,
+    api = _ref.api;
+  var isTextColorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.disabled');
+  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)"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {
+      label: formatMessage(_messages.textColorMessages.textColorTooltip),
+      iconColor: "var(--ds-text-accent-magenta, #943D73)",
+      shouldRecommendSmallIcon: true,
+      size: 'small',
+      isDisabled: isTextColorDisabled,
+      spacing: 'compact'
+    })),
+    isDisabled: isTextColorDisabled,
+    testId: "text-color-highlight-menu"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.menu
+  }, children));
+};

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

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

package/dist/cjs/ui/TextColorMenuItem.js

@@ -0,0 +1,54 @@
+/* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+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");
+var styles = {
+  container: "_zulpu2gc",
+  colorPalette: "_18u0x0bf"
+};
+function TextColorMenuItem(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor'], function (states) {
+      var _states$textColorStat, _states$textColorStat2, _states$textColorStat3;
+      return {
+        color: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.color,
+        defaultColor: ((_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.defaultColor) || null,
+        palette: ((_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.palette) || []
+      };
+    }),
+    color = _useSharedPluginState.color,
+    defaultColor = _useSharedPluginState.defaultColor,
+    palette = _useSharedPluginState.palette;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, null, /*#__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() {},
+    selectedColor: color || defaultColor,
+    paletteOptions: {
+      palette: palette,
+      hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
+      paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
+    }
+  }))));
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _TextColorHighlightMenu = require("./TextColorHighlightMenu");
+var _TextColorMenuItem = require("./TextColorMenuItem");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+  return [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_GROUP), {}, {
+    parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_SECTION), {}, {
+      rank: _toolbar.TEXT_SECTION_RANK[_toolbar.TEXT_COLOR_HIGHLIGHT_GROUP.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU), {}, {
+    parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_GROUP), {}, {
+      rank: _toolbar.TEXT_COLOR_HIGHLIGHT_GROUP_RANK[_toolbar.TEXT_COLOR_HIGHLIGHT_MENU.key]
+    })],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react.default.createElement(_TextColorHighlightMenu.TextColorHighlightMenu, {
+        api: api
+      }, children);
+    }
+  }), _objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+    parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU), {}, {
+      rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_RANK[_toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
+    })]
+  }), _objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_MENU_ITEM), {}, {
+    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() {
+      return /*#__PURE__*/_react.default.createElement(_TextColorMenuItem.TextColorMenuItem, {
+        api: api
+      });
+    }
+  })];
+};

package/dist/es2019/textColorPlugin.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { textColor } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeColor } from './pm-plugins/commands/change-color';
 import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { getToolbarComponents } from './ui/toolbar-components';
 const pluginConfig = textColorConfig => {
   if (!textColorConfig || typeof textColorConfig === 'boolean') {
     return undefined;
@@ -16,7 +18,7 @@ export const textColorPlugin = ({
   config: textColorConfig,
   api
 }) => {
-  var _api$primaryToolbar;
+  const isToolbarAifcEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   const primaryToolbarComponent = ({
     editorView,
     popupsMountPoint,
@@ -37,10 +39,18 @@ export const textColorPlugin = ({
       api: api
     });
   };
-  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
-    name: 'textColor',
-    component: primaryToolbarComponent
-  });
+  if (isToolbarAifcEnabled) {
+    var _api$toolbar;
+    if (api !== null && api !== void 0 && (_api$toolbar = api.toolbar) !== null && _api$toolbar !== void 0 && _api$toolbar.actions.registerComponents) {
+      api.toolbar.actions.registerComponents(getToolbarComponents(api));
+    }
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+      name: 'textColor',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'textColor',
     marks() {
@@ -69,7 +79,7 @@ export const textColorPlugin = ({
         return changeColor(color, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
       }
     },
-    pluginsOptions: {
+    pluginsOptions: !isToolbarAifcEnabled ? {
       selectionToolbar: () => {
         var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
         const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.currentState()) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.preferences.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
@@ -100,7 +110,7 @@ export const textColorPlugin = ({
           return undefined;
         }
       }
-    },
+    } : {},
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

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

@@ -0,0 +1,4 @@
+._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)}

package/dist/es2019/ui/TextColorHighlightMenu.js

@@ -0,0 +1,37 @@
+/* TextColorHighlightMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./TextColorHighlightMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  menu: "_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+};
+export const TextColorHighlightMenu = ({
+  children,
+  api
+}) => {
+  const isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
+      highlightColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
+    }, /*#__PURE__*/React.createElement(TextColorIcon, {
+      label: formatMessage(messages.textColorTooltip),
+      iconColor: "var(--ds-text-accent-magenta, #943D73)",
+      shouldRecommendSmallIcon: true,
+      size: 'small',
+      isDisabled: isTextColorDisabled,
+      spacing: 'compact'
+    })),
+    isDisabled: isTextColorDisabled,
+    testId: "text-color-highlight-menu"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.menu
+  }, children));
+};

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

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

package/dist/es2019/ui/TextColorMenuItem.js

@@ -0,0 +1,50 @@
+/* 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 { 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 { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { Stack, Box, Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_zulpu2gc",
+  colorPalette: "_18u0x0bf"
+};
+export function TextColorMenuItem({
+  api
+}) {
+  const {
+    color,
+    defaultColor,
+    palette
+  } = useSharedPluginStateWithSelector(api, ['textColor'], states => {
+    var _states$textColorStat, _states$textColorStat2, _states$textColorStat3;
+    return {
+      color: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.color,
+      defaultColor: ((_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.defaultColor) || null,
+      palette: ((_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.palette) || []
+    };
+  });
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__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: () => {},
+    selectedColor: color || defaultColor,
+    paletteOptions: {
+      palette: palette,
+      hexToPaletteColor: hexToEditorTextPaletteColor,
+      paletteColorTooltipMessages: textPaletteTooltipMessages
+    }
+  }))));
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK } from '@atlaskit/editor-common/toolbar';
+import { TextColorHighlightMenu } from './TextColorHighlightMenu';
+import { TextColorMenuItem } from './TextColorMenuItem';
+export const getToolbarComponents = api => {
+  return [{
+    ...TEXT_COLOR_HIGHLIGHT_GROUP,
+    parents: [{
+      ...TEXT_SECTION,
+      rank: TEXT_SECTION_RANK[TEXT_COLOR_HIGHLIGHT_GROUP.key]
+    }]
+  }, {
+    ...TEXT_COLOR_HIGHLIGHT_MENU,
+    parents: [{
+      ...TEXT_COLOR_HIGHLIGHT_GROUP,
+      rank: TEXT_COLOR_HIGHLIGHT_GROUP_RANK[TEXT_COLOR_HIGHLIGHT_MENU.key]
+    }],
+    component: ({
+      children
+    }) => /*#__PURE__*/React.createElement(TextColorHighlightMenu, {
+      api: api
+    }, children)
+  }, {
+    ...TEXT_COLOR_HIGHLIGHT_MENU_SECTION,
+    parents: [{
+      ...TEXT_COLOR_HIGHLIGHT_MENU,
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_RANK[TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
+    }]
+  }, {
+    ...TEXT_COLOR_MENU_ITEM,
+    parents: [{
+      ...TEXT_COLOR_HIGHLIGHT_MENU_SECTION,
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[TEXT_COLOR_MENU_ITEM.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(TextColorMenuItem, {
+      api: api
+    })
+  }];
+};

package/dist/esm/textColorPlugin.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { textColor } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeColor as _changeColor } from './pm-plugins/commands/change-color';
 import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { getToolbarComponents } from './ui/toolbar-components';
 var pluginConfig = function pluginConfig(textColorConfig) {
   if (!textColorConfig || typeof textColorConfig === 'boolean') {
     return undefined;
@@ -13,9 +15,9 @@ var pluginConfig = function pluginConfig(textColorConfig) {
   return textColorConfig;
 };
 export var textColorPlugin = function textColorPlugin(_ref) {
-  var _api$primaryToolbar;
   var textColorConfig = _ref.config,
     api = _ref.api;
+  var isToolbarAifcEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var editorView = _ref2.editorView,
       popupsMountPoint = _ref2.popupsMountPoint,
@@ -35,10 +37,18 @@ export var textColorPlugin = function textColorPlugin(_ref) {
       api: api
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'textColor',
-    component: primaryToolbarComponent
-  });
+  if (isToolbarAifcEnabled) {
+    var _api$toolbar;
+    if (api !== null && api !== void 0 && (_api$toolbar = api.toolbar) !== null && _api$toolbar !== void 0 && _api$toolbar.actions.registerComponents) {
+      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.actions.registerComponent({
+      name: 'textColor',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'textColor',
     marks: function marks() {
@@ -68,7 +78,7 @@ export var textColorPlugin = function textColorPlugin(_ref) {
         return _changeColor(color, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
       }
     },
-    pluginsOptions: {
+    pluginsOptions: !isToolbarAifcEnabled ? {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.currentState()) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.preferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
@@ -99,7 +109,7 @@ export var textColorPlugin = function textColorPlugin(_ref) {
           return undefined;
         }
       }
-    },
+    } : {},
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

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

@@ -0,0 +1,4 @@
+._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)}

package/dist/esm/ui/TextColorHighlightMenu.js

@@ -0,0 +1,35 @@
+/* TextColorHighlightMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./TextColorHighlightMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  menu: "_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc"
+};
+export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
+  var children = _ref.children,
+    api = _ref.api;
+  var isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
+      highlightColor: "var(--ds-background-accent-blue-subtlest, #E9F2FF)"
+    }, /*#__PURE__*/React.createElement(TextColorIcon, {
+      label: formatMessage(messages.textColorTooltip),
+      iconColor: "var(--ds-text-accent-magenta, #943D73)",
+      shouldRecommendSmallIcon: true,
+      size: 'small',
+      isDisabled: isTextColorDisabled,
+      spacing: 'compact'
+    })),
+    isDisabled: isTextColorDisabled,
+    testId: "text-color-highlight-menu"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.menu
+  }, children));
+};

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

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

package/dist/esm/ui/TextColorMenuItem.js

@@ -0,0 +1,47 @@
+/* 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 { 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 { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { Stack, Box, Text } from '@atlaskit/primitives/compiled';
+var styles = {
+  container: "_zulpu2gc",
+  colorPalette: "_18u0x0bf"
+};
+export function TextColorMenuItem(_ref) {
+  var api = _ref.api;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['textColor'], function (states) {
+      var _states$textColorStat, _states$textColorStat2, _states$textColorStat3;
+      return {
+        color: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.color,
+        defaultColor: ((_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.defaultColor) || null,
+        palette: ((_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.palette) || []
+      };
+    }),
+    color = _useSharedPluginState.color,
+    defaultColor = _useSharedPluginState.defaultColor,
+    palette = _useSharedPluginState.palette;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__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() {},
+    selectedColor: color || defaultColor,
+    paletteOptions: {
+      palette: palette,
+      hexToPaletteColor: hexToEditorTextPaletteColor,
+      paletteColorTooltipMessages: textPaletteTooltipMessages
+    }
+  }))));
+}

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

@@ -0,0 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK } from '@atlaskit/editor-common/toolbar';
+import { TextColorHighlightMenu } from './TextColorHighlightMenu';
+import { TextColorMenuItem } from './TextColorMenuItem';
+export var getToolbarComponents = function getToolbarComponents(api) {
+  return [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_GROUP), {}, {
+    parents: [_objectSpread(_objectSpread({}, TEXT_SECTION), {}, {
+      rank: TEXT_SECTION_RANK[TEXT_COLOR_HIGHLIGHT_GROUP.key]
+    })]
+  }), _objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU), {}, {
+    parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_GROUP), {}, {
+      rank: TEXT_COLOR_HIGHLIGHT_GROUP_RANK[TEXT_COLOR_HIGHLIGHT_MENU.key]
+    })],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(TextColorHighlightMenu, {
+        api: api
+      }, children);
+    }
+  }), _objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+    parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU), {}, {
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_RANK[TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
+    })]
+  }), _objectSpread(_objectSpread({}, TEXT_COLOR_MENU_ITEM), {}, {
+    parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[TEXT_COLOR_MENU_ITEM.key]
+    })],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(TextColorMenuItem, {
+        api: api
+      });
+    }
+  })];
+};

package/dist/types/textColorPluginType.d.ts

@@ -2,6 +2,7 @@ import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 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';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { TextColorPluginConfig, TextColorPluginState } from './pm-plugins/main';
 import type { TextColorInputMethod } from './types';
@@ -10,6 +11,7 @@ export type Dependencies = [
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<SelectionToolbarPlugin>,
+    OptionalPlugin<ToolbarPlugin>,
     OptionalPlugin<UserPreferencesPlugin>
 ];
 export type TextColorPlugin = NextEditorPlugin<'textColor', {

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+interface TextColorHighlightMenuProps {
+    api: ExtractInjectionAPI<TextColorPlugin> | undefined;
+    children: React.ReactNode;
+}
+export declare const TextColorHighlightMenu: ({ children, api }: TextColorHighlightMenuProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+export declare function TextColorMenuItem({ api, }: {
+    api: ExtractInjectionAPI<TextColorPlugin> | undefined;
+}): React.JSX.Element;

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 { TextColorPlugin } from '../textColorPluginType';
+export declare const getToolbarComponents: (api: ExtractInjectionAPI<TextColorPlugin> | undefined) => RegisterComponent[];

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

@@ -2,6 +2,7 @@ import type { Command, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 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';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { TextColorPluginConfig, TextColorPluginState } from './pm-plugins/main';
 import type { TextColorInputMethod } from './types';
@@ -10,6 +11,7 @@ export type Dependencies = [
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<SelectionToolbarPlugin>,
+    OptionalPlugin<ToolbarPlugin>,
     OptionalPlugin<UserPreferencesPlugin>
 ];
 export type TextColorPlugin = NextEditorPlugin<'textColor', {

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+interface TextColorHighlightMenuProps {
+    api: ExtractInjectionAPI<TextColorPlugin> | undefined;
+    children: React.ReactNode;
+}
+export declare const TextColorHighlightMenu: ({ children, api }: TextColorHighlightMenuProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+export declare function TextColorMenuItem({ api, }: {
+    api: ExtractInjectionAPI<TextColorPlugin> | undefined;
+}): React.JSX.Element;

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 { 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.2",
+	"version": "3.1.4",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,24 +32,29 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^50.0.1",
+		"@atlaskit/adf-schema": "^50.2.0",
+		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^4.2.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.5.0",
+		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/editor-toolbar": "^0.1.0",
+		"@atlaskit/editor-toolbar-model": "^0.0.4",
+		"@atlaskit/icon": "^27.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.22.0",
+		"@atlaskit/tmp-editor-statsig": "^9.25.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.16.0",
+		"@atlaskit/editor-common": "^107.19.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -59,7 +64,6 @@
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
-		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {