@atlaskit/editor-plugin-text-color 12.0.2 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-text-color
 
+## 12.1.0
+
+### Minor Changes
+
+- [`1498129c7eef2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1498129c7eef2) -
+  [EDITOR-7591] adds updated text color and highlight color palettes behind the
+  `platform_editor_lovability_text_bg_color` experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -12,6 +12,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _color = require("./utils/color");
 var _constants = require("./utils/constants");
 var _disabled = require("./utils/disabled");
@@ -19,11 +20,12 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 function createInitialPluginState(editorState, pluginConfig) {
   var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || _constants.DEFAULT_COLOR;
+  var paletteColors = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? _uiColor.textColorPaletteNew : _uiColor.textColorPalette;
   var palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
     border: "var(--ds-border, #0B120E24)"
-  }].concat((0, _toConsumableArray2.default)(_uiColor.textColorPalette));
+  }].concat((0, _toConsumableArray2.default)(paletteColors));
   var state = {
     color: (0, _color.getActiveColor)(editorState),
     disabled: (0, _disabled.getDisabledState)(editorState),

package/dist/cjs/ui/TextColorMenuItem.js

@@ -21,6 +21,7 @@ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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 TEXT_COLOR_PICKER_COLUMNS = 10;
 var styles = {
   container: "_zulp12x7"
 };
@@ -42,6 +43,9 @@ function TextColorMenuItem(_ref) {
     editorView = _useEditorToolbar.editorView;
   var context = (0, _editorToolbar.useToolbarDropdownMenu)();
   var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var isNewColorPaletteEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true);
   var handleTextColorChange = (0, _react.useCallback)(function (color, event) {
     var _api$textColor;
     if (!(editorView !== null && editorView !== void 0 && editorView.state) || !(editorView !== null && editorView !== void 0 && editorView.dispatch)) {
@@ -49,21 +53,20 @@ function TextColorMenuItem(_ref) {
     }
     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))(editorView.state, editorView.dispatch);
-      if (!(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+      if (!isNewColorPaletteEnabled) {
         closeMenu === null || closeMenu === void 0 || closeMenu(event);
       }
     }
-  }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu]);
-  var _useIntl = (0, _reactIntl.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
+  }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu, isNewColorPaletteEnabled]);
   return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     xcss: styles.container,
     testId: "text-color-menu-item"
   }, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "xxsmall"
-  }, formatMessage(_messages.textColorMessages.textColorTooltip)), /*#__PURE__*/_react.default.createElement(_editorToolbar.ColorPalette
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , {
+  }, formatMessage(_messages.textColorMessages.textColorTooltip)), /*#__PURE__*/_react.default.createElement(_editorToolbar.ColorPalette, {
+    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onClick: function onClick(color, _, event) {
       handleTextColorChange(color, event);
     },

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

@@ -143,13 +143,16 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
         disabled = _this$props.disabled,
         pluginInjectionApi = _this$props.pluginInjectionApi;
       var palette = pluginState.palette;
+      var isNewColorPaletteEnabled = (0, _experiments.editorExperiment)('platform_editor_lovability_text_bg_color', true);
+      var colorPickerColumns = isNewColorPaletteEnabled ? 10 : undefined;
       var fitWidth;
       if (document.body.clientWidth <= 740) {
         // This was originally hard-coded, but moved here to a const
         // My guess is it's based off (width of button * columns) + left/right padding
-        // 240 = (32 * 7) + (8 + 8)
+        // 7 cols: 240 = (32 * 7) + (8 + 8)
+        // 10 cols: 338 = (32 * 10) + (8 + 8)
         // Not sure where the extra 2px comes from
-        fitWidth = 242;
+        fitWidth = isNewColorPaletteEnabled ? 338 : 242;
       }
       var selectedColor = this.getSelectedColor(pluginState);
       // TODO: ED-26959 - This doesn't work, the label isn't translated
@@ -161,7 +164,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
         selectedColorName: selectedColorPaletteItemLabelText
       });
       var tooltipTextColor = formatMessage(_messages.textColorMessages.textColorTooltip);
-      var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(palette, pluginState.color),
+      var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(palette, pluginState.color, colorPickerColumns),
         selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
         selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
       var reducedSpacing = this.props.toolbarType === _types.ToolbarType.FLOATING ? 'compact' : 'none';
@@ -224,9 +227,10 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
         })
       }, (0, _react2.jsx)("div", {
         "data-testid": "text-color-palette"
-      }, (0, _react2.jsx)(_uiColor.ColorPalette
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      , {
+      }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+        cols: colorPickerColumns
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+        ,
         onClick: function onClick(color) {
           var _pluginInjectionApi$a;
           return _this2.changeTextColor(color, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginState.disabled);

package/dist/es2019/pm-plugins/main.js

@@ -1,16 +1,18 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { textColorPalette } from '@atlaskit/editor-common/ui-color';
+import { textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getActiveColor } from './utils/color';
 import { DEFAULT_COLOR } from './utils/constants';
 import { getDisabledState } from './utils/disabled';
 function createInitialPluginState(editorState, pluginConfig) {
   const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
+  const paletteColors = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? textColorPaletteNew : textColorPalette;
   const palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
     border: "var(--ds-border, #0B120E24)"
-  }, ...textColorPalette];
+  }, ...paletteColors];
   const state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),

package/dist/es2019/ui/TextColorMenuItem.js

@@ -12,6 +12,7 @@ import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
 import Heading from '@atlaskit/heading';
 import { Stack } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+const TEXT_COLOR_PICKER_COLUMNS = 10;
 const styles = {
   container: "_zulp12x7"
 };
@@ -36,6 +37,10 @@ export function TextColorMenuItem({
   } = useEditorToolbar();
   const context = useToolbarDropdownMenu();
   const closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
+  const {
+    formatMessage
+  } = useIntl();
+  const isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
   const handleTextColorChange = useCallback((color, event) => {
     var _api$textColor, _api$textColor$action;
     if (!(editorView !== null && editorView !== void 0 && editorView.state) || !(editorView !== null && editorView !== void 0 && editorView.dispatch)) {
@@ -43,22 +48,20 @@ export function TextColorMenuItem({
     }
     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))(editorView.state, editorView.dispatch);
-      if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+      if (!isNewColorPaletteEnabled) {
         closeMenu === null || closeMenu === void 0 ? void 0 : closeMenu(event);
       }
     }
-  }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu]);
-  const {
-    formatMessage
-  } = useIntl();
+  }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu, isNewColorPaletteEnabled]);
   return /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.container,
     testId: "text-color-menu-item"
   }, /*#__PURE__*/React.createElement(Heading, {
     size: "xxsmall"
-  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , {
+  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette, {
+    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onClick: (color, _, event) => {
       handleTextColorChange(color, event);
     },

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

@@ -124,13 +124,16 @@ export class ToolbarTextColor extends React.Component {
       pluginInjectionApi
     } = this.props;
     const palette = pluginState.palette;
+    const isNewColorPaletteEnabled = editorExperiment('platform_editor_lovability_text_bg_color', true);
+    const colorPickerColumns = isNewColorPaletteEnabled ? 10 : undefined;
     let fitWidth;
     if (document.body.clientWidth <= 740) {
       // This was originally hard-coded, but moved here to a const
       // My guess is it's based off (width of button * columns) + left/right padding
-      // 240 = (32 * 7) + (8 + 8)
+      // 7 cols: 240 = (32 * 7) + (8 + 8)
+      // 10 cols: 338 = (32 * 10) + (8 + 8)
       // Not sure where the extra 2px comes from
-      fitWidth = 242;
+      fitWidth = isNewColorPaletteEnabled ? 338 : 242;
     }
     const selectedColor = this.getSelectedColor(pluginState);
     // TODO: ED-26959 - This doesn't work, the label isn't translated
@@ -143,7 +146,7 @@ export class ToolbarTextColor extends React.Component {
     const {
       selectedRowIndex,
       selectedColumnIndex
-    } = getSelectedRowAndColumnFromPalette(palette, pluginState.color);
+    } = getSelectedRowAndColumnFromPalette(palette, pluginState.color, colorPickerColumns);
     const reducedSpacing = this.props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
     return jsx("span", {
       css:
@@ -204,9 +207,10 @@ export class ToolbarTextColor extends React.Component {
       })
     }, jsx("div", {
       "data-testid": "text-color-palette"
-    }, jsx(ColorPalette
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    , {
+    }, jsx(ColorPalette, {
+      cols: colorPickerColumns
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+      ,
       onClick: color => {
         var _pluginInjectionApi$a;
         return this.changeTextColor(color, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginState.disabled);

package/dist/esm/pm-plugins/main.js

@@ -3,18 +3,20 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { textColorPalette } from '@atlaskit/editor-common/ui-color';
+import { textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getActiveColor } from './utils/color';
 import { DEFAULT_COLOR } from './utils/constants';
 import { getDisabledState } from './utils/disabled';
 function createInitialPluginState(editorState, pluginConfig) {
   var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
+  var paletteColors = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? textColorPaletteNew : textColorPalette;
   var palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
     border: "var(--ds-border, #0B120E24)"
-  }].concat(_toConsumableArray(textColorPalette));
+  }].concat(_toConsumableArray(paletteColors));
   var state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),

package/dist/esm/ui/TextColorMenuItem.js

@@ -12,6 +12,7 @@ import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
 import Heading from '@atlaskit/heading';
 import { Stack } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+var TEXT_COLOR_PICKER_COLUMNS = 10;
 var styles = {
   container: "_zulp12x7"
 };
@@ -33,6 +34,9 @@ export function TextColorMenuItem(_ref) {
     editorView = _useEditorToolbar.editorView;
   var context = useToolbarDropdownMenu();
   var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
   var handleTextColorChange = useCallback(function (color, event) {
     var _api$textColor;
     if (!(editorView !== null && editorView !== void 0 && editorView.state) || !(editorView !== null && editorView !== void 0 && editorView.dispatch)) {
@@ -40,21 +44,20 @@ export function TextColorMenuItem(_ref) {
     }
     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))(editorView.state, editorView.dispatch);
-      if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+      if (!isNewColorPaletteEnabled) {
         closeMenu === null || closeMenu === void 0 || closeMenu(event);
       }
     }
-  }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu]);
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
+  }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu, isNewColorPaletteEnabled]);
   return /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.container,
     testId: "text-color-menu-item"
   }, /*#__PURE__*/React.createElement(Heading, {
     size: "xxsmall"
-  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , {
+  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette, {
+    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onClick: function onClick(color, _, event) {
       handleTextColorChange(color, event);
     },

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

@@ -139,13 +139,16 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         disabled = _this$props.disabled,
         pluginInjectionApi = _this$props.pluginInjectionApi;
       var palette = pluginState.palette;
+      var isNewColorPaletteEnabled = editorExperiment('platform_editor_lovability_text_bg_color', true);
+      var colorPickerColumns = isNewColorPaletteEnabled ? 10 : undefined;
       var fitWidth;
       if (document.body.clientWidth <= 740) {
         // This was originally hard-coded, but moved here to a const
         // My guess is it's based off (width of button * columns) + left/right padding
-        // 240 = (32 * 7) + (8 + 8)
+        // 7 cols: 240 = (32 * 7) + (8 + 8)
+        // 10 cols: 338 = (32 * 10) + (8 + 8)
         // Not sure where the extra 2px comes from
-        fitWidth = 242;
+        fitWidth = isNewColorPaletteEnabled ? 338 : 242;
       }
       var selectedColor = this.getSelectedColor(pluginState);
       // TODO: ED-26959 - This doesn't work, the label isn't translated
@@ -157,7 +160,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         selectedColorName: selectedColorPaletteItemLabelText
       });
       var tooltipTextColor = formatMessage(messages.textColorTooltip);
-      var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(palette, pluginState.color),
+      var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(palette, pluginState.color, colorPickerColumns),
         selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
         selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
       var reducedSpacing = this.props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
@@ -220,9 +223,10 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         })
       }, jsx("div", {
         "data-testid": "text-color-palette"
-      }, jsx(ColorPalette
-      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-      , {
+      }, jsx(ColorPalette, {
+        cols: colorPickerColumns
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+        ,
         onClick: function onClick(color) {
           var _pluginInjectionApi$a;
           return _this2.changeTextColor(color, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginState.disabled);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "12.0.2",
+	"version": "12.1.0",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -21,12 +21,12 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^55.0.0",
+		"@atlaskit/adf-schema": "^55.2.0",
 		"@atlaskit/button": "^24.0.0",
 		"@atlaskit/css": "^1.0.0",
-		"@atlaskit/editor-palette": "^3.0.0",
+		"@atlaskit/editor-palette": "^3.1.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
-		"@atlaskit/editor-plugin-highlight": "^12.0.0",
+		"@atlaskit/editor-plugin-highlight": "^12.1.0",
 		"@atlaskit/editor-plugin-interaction": "^21.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^13.0.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^13.0.0",
@@ -41,13 +41,13 @@
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/platform-feature-flags-react": "^1.0.0",
 		"@atlaskit/primitives": "^20.0.0",
-		"@atlaskit/tmp-editor-statsig": "^106.0.0",
+		"@atlaskit/tmp-editor-statsig": "^107.1.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.2.0",
+		"@atlaskit/editor-common": "^116.3.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"