@atlaskit/editor-plugin-text-color 6.1.2 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-text-color
 
+## 6.2.0
+
+### Minor Changes
+
+- [`872bd8d576773`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/872bd8d576773) -
+  [ux] ED-29272 Add missing tooltip and shortcut for TextColorDropdownMenu
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.2
 
 ### Patch Changes

package/dist/cjs/editor-commands/palette.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.togglePalette = exports.setPalette = void 0;
+var _main = require("../pm-plugins/main");
+var togglePalette = exports.togglePalette = function togglePalette(api) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    var pluginState = api === null || api === void 0 ? void 0 : api.textColor.sharedState.currentState();
+    var isPaletteOpen = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPaletteOpen;
+    tr.setMeta(_main.pluginKey, {
+      action: _main.ACTIONS.SET_PALETTE,
+      isPaletteOpen: !isPaletteOpen
+    });
+    return tr;
+  };
+};
+var setPalette = exports.setPalette = function setPalette(isPaletteOpen) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    tr.setMeta(_main.pluginKey, {
+      action: _main.ACTIONS.SET_PALETTE,
+      isPaletteOpen: isPaletteOpen
+    });
+    return tr;
+  };
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.keymapPlugin = keymapPlugin;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _palette = require("../editor-commands/palette");
+function keymapPlugin(_ref) {
+  var api = _ref.api;
+  var list = {};
+  if (_keymaps.toggleHighlightPalette.common) {
+    (0, _keymaps.bindKeymapWithEditorCommand)(_keymaps.toggleHighlightPalette.common, (0, _palette.togglePalette)(api), list);
+  }
+  return (0, _keymaps.keymap)(list);
+}

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

@@ -28,7 +28,8 @@ function createInitialPluginState(editorState, pluginConfig) {
     color: (0, _color.getActiveColor)(editorState),
     disabled: (0, _disabled.getDisabledState)(editorState),
     palette: palette,
-    defaultColor: defaultColor.color
+    defaultColor: defaultColor.color,
+    isPaletteOpen: false
   };
   return state;
 }
@@ -36,6 +37,7 @@ var ACTIONS = exports.ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS[ACTIONS["RESET_COLOR"] = 0] = "RESET_COLOR";
   ACTIONS[ACTIONS["SET_COLOR"] = 1] = "SET_COLOR";
   ACTIONS[ACTIONS["DISABLE"] = 2] = "DISABLE";
+  ACTIONS[ACTIONS["SET_PALETTE"] = 3] = "SET_PALETTE";
   return ACTIONS;
 }({});
 var pluginKey = exports.pluginKey = new _state.PluginKey('textColorPlugin');
@@ -58,7 +60,8 @@ function createPlugin(dispatch, pluginConfig) {
           case ACTIONS.SET_COLOR:
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: meta.color,
-              disabled: false
+              disabled: false,
+              isPaletteOpen: false
             });
             break;
           case ACTIONS.DISABLE:
@@ -66,13 +69,18 @@ function createPlugin(dispatch, pluginConfig) {
               disabled: true
             });
             break;
+          case ACTIONS.SET_PALETTE:
+            nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              isPaletteOpen: meta.isPaletteOpen
+            });
+            break;
           default:
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: (0, _color.getActiveColor)(newState),
               disabled: (0, _disabled.getDisabledState)(newState)
             });
         }
-        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled) {
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
           dispatch(pluginKey, nextState);
           return nextState;
         }

package/dist/cjs/textColorPlugin.js

@@ -8,9 +8,12 @@ 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("./editor-commands/change-color");
+var _palette = require("./editor-commands/palette");
 var _changeColor3 = require("./pm-plugins/commands/change-color");
+var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
 var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
@@ -70,12 +73,25 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
       }];
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      return (0, _experiments.editorExperiment)('platform_editor_toolbar_aifc', true) && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? [{
         name: 'textColor',
         plugin: function plugin(_ref3) {
           var dispatch = _ref3.dispatch;
           return (0, _main.createPlugin)(dispatch, pluginConfig(textColorConfig));
         }
+      }, {
+        name: 'textColorKeymap',
+        plugin: function plugin() {
+          return (0, _keymap.keymapPlugin)({
+            api: api
+          });
+        }
+      }] : [{
+        name: 'textColor',
+        plugin: function plugin(_ref4) {
+          var dispatch = _ref4.dispatch;
+          return (0, _main.createPlugin)(dispatch, pluginConfig(textColorConfig));
+        }
       }];
     },
     getSharedState: function getSharedState(editorState) {
@@ -93,6 +109,9 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
     commands: {
       changeColor: function changeColor(color, inputMethod) {
         return (0, _changeColor2.changeColor)(color, api, inputMethod);
+      },
+      setPalette: function setPalette(isPaletteOpen) {
+        return (0, _palette.setPalette)(isPaletteOpen);
       }
     },
     pluginsOptions: !isToolbarAIFCEnabled ? {

package/dist/cjs/ui/TextColorHighlightMenu.js

@@ -1,21 +1,23 @@
 /* TextColorHighlightMenu.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 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 _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 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 styles = {
   menu: "_1rjcv77o _18zru2gc"
 };
@@ -26,6 +28,7 @@ var getIconColor = function getIconColor(textColor, defaultColor, highlightColor
   return (0, _editorPalette.hexToEditorTextPaletteColor)(textColor) || "var(--ds-text, #172B4D)";
 };
 var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
+  var _api$textColor2;
   var children = _ref.children,
     api = _ref.api;
   var isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
@@ -38,11 +41,30 @@ var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColor
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var defaultColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.defaultColor');
+  var isPaletteOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.isPaletteOpen');
+  var setIsPaletteOpen = (0, _react.useCallback)(function (isOpen) {
+    var _api$textColor;
+    if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.commands) !== null && _api$textColor !== void 0 && _api$textColor.setPalette) {
+      api.core.actions.execute(function (_ref2) {
+        var tr = _ref2.tr;
+        api.textColor.commands.setPalette(isOpen)({
+          tr: tr
+        });
+        return tr;
+      });
+    }
+  }, [api === null || api === void 0 || (_api$textColor2 = api.textColor) === null || _api$textColor2 === void 0 ? void 0 : _api$textColor2.commands, api === null || api === void 0 ? void 0 : api.core.actions]);
   var iconColor = getIconColor(textColor, defaultColor, highlightColor);
   var highlightColorIcon = highlightColor ? highlightColor : (0, _editorToolbar.getContrastingBackgroundColor)(iconColor);
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
-    content: formatMessage(isHighlightPluginExisted ? _messages.textColorMessages.textColorHighlightTooltip : _messages.textColorMessages.textColorTooltip)
-  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, null, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: formatMessage(isHighlightPluginExisted ? _messages.textColorMessages.textColorHighlightTooltip : _messages.textColorMessages.textColorTooltip),
+      keymap: _keymaps.toggleHighlightPalette
+    })
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
+    isOpen: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? isPaletteOpen : undefined,
+    setIsOpen: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? setIsPaletteOpen : undefined
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarColorSwatch, {
       highlightColor: highlightColorIcon
     }, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {

package/dist/es2019/editor-commands/palette.js

@@ -0,0 +1,21 @@
+import { pluginKey, ACTIONS } from '../pm-plugins/main';
+export const togglePalette = api => ({
+  tr
+}) => {
+  const pluginState = api === null || api === void 0 ? void 0 : api.textColor.sharedState.currentState();
+  const isPaletteOpen = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPaletteOpen;
+  tr.setMeta(pluginKey, {
+    action: ACTIONS.SET_PALETTE,
+    isPaletteOpen: !isPaletteOpen
+  });
+  return tr;
+};
+export const setPalette = isPaletteOpen => ({
+  tr
+}) => {
+  tr.setMeta(pluginKey, {
+    action: ACTIONS.SET_PALETTE,
+    isPaletteOpen
+  });
+  return tr;
+};

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

@@ -0,0 +1,11 @@
+import { bindKeymapWithEditorCommand, keymap, toggleHighlightPalette } from '@atlaskit/editor-common/keymaps';
+import { togglePalette } from '../editor-commands/palette';
+export function keymapPlugin({
+  api
+}) {
+  const list = {};
+  if (toggleHighlightPalette.common) {
+    bindKeymapWithEditorCommand(toggleHighlightPalette.common, togglePalette(api), list);
+  }
+  return keymap(list);
+}

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

@@ -15,7 +15,8 @@ function createInitialPluginState(editorState, pluginConfig) {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),
     palette,
-    defaultColor: defaultColor.color
+    defaultColor: defaultColor.color,
+    isPaletteOpen: false
   };
   return state;
 }
@@ -23,6 +24,7 @@ export let ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS[ACTIONS["RESET_COLOR"] = 0] = "RESET_COLOR";
   ACTIONS[ACTIONS["SET_COLOR"] = 1] = "SET_COLOR";
   ACTIONS[ACTIONS["DISABLE"] = 2] = "DISABLE";
+  ACTIONS[ACTIONS["SET_PALETTE"] = 3] = "SET_PALETTE";
   return ACTIONS;
 }({});
 export const pluginKey = new PluginKey('textColorPlugin');
@@ -47,7 +49,8 @@ export function createPlugin(dispatch, pluginConfig) {
             nextState = {
               ...pluginState,
               color: meta.color,
-              disabled: false
+              disabled: false,
+              isPaletteOpen: false
             };
             break;
           case ACTIONS.DISABLE:
@@ -56,6 +59,12 @@ export function createPlugin(dispatch, pluginConfig) {
               disabled: true
             };
             break;
+          case ACTIONS.SET_PALETTE:
+            nextState = {
+              ...pluginState,
+              isPaletteOpen: meta.isPaletteOpen
+            };
+            break;
           default:
             nextState = {
               ...pluginState,
@@ -63,7 +72,7 @@ export function createPlugin(dispatch, pluginConfig) {
               disabled: getDisabledState(newState)
             };
         }
-        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled) {
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
           dispatch(pluginKey, nextState);
           return nextState;
         }

package/dist/es2019/textColorPlugin.js

@@ -1,9 +1,12 @@
 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 changeColorCommand } from './editor-commands/change-color';
+import { setPalette } from './editor-commands/palette';
 import { changeColor } from './pm-plugins/commands/change-color';
+import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
@@ -65,7 +68,17 @@ export const textColorPlugin = ({
       }];
     },
     pmPlugins() {
-      return [{
+      return editorExperiment('platform_editor_toolbar_aifc', true) && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? [{
+        name: 'textColor',
+        plugin: ({
+          dispatch
+        }) => createPlugin(dispatch, pluginConfig(textColorConfig))
+      }, {
+        name: 'textColorKeymap',
+        plugin: () => keymapPlugin({
+          api
+        })
+      }] : [{
         name: 'textColor',
         plugin: ({
           dispatch
@@ -87,6 +100,9 @@ export const textColorPlugin = ({
     commands: {
       changeColor: (color, inputMethod) => {
         return changeColorCommand(color, api, inputMethod);
+      },
+      setPalette: isPaletteOpen => {
+        return setPalette(isPaletteOpen);
       }
     },
     pluginsOptions: !isToolbarAIFCEnabled ? {

package/dist/es2019/ui/TextColorHighlightMenu.js

@@ -1,8 +1,9 @@
 /* TextColorHighlightMenu.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./TextColorHighlightMenu.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 { toggleHighlightPalette, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
@@ -22,6 +23,7 @@ export const TextColorHighlightMenu = ({
   children,
   api
 }) => {
+  var _api$textColor2;
   const isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
   const isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
   const {
@@ -34,11 +36,31 @@ export const TextColorHighlightMenu = ({
     formatMessage
   } = useIntl();
   const defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
+  const isPaletteOpen = useSharedPluginStateSelector(api, 'textColor.isPaletteOpen');
+  const setIsPaletteOpen = useCallback(isOpen => {
+    var _api$textColor, _api$textColor$comman;
+    if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor$comman = _api$textColor.commands) !== null && _api$textColor$comman !== void 0 && _api$textColor$comman.setPalette) {
+      api.core.actions.execute(({
+        tr
+      }) => {
+        api.textColor.commands.setPalette(isOpen)({
+          tr
+        });
+        return tr;
+      });
+    }
+  }, [api === null || api === void 0 ? void 0 : (_api$textColor2 = api.textColor) === null || _api$textColor2 === void 0 ? void 0 : _api$textColor2.commands, api === null || api === void 0 ? void 0 : api.core.actions]);
   const iconColor = getIconColor(textColor, defaultColor, highlightColor);
   const highlightColorIcon = highlightColor ? highlightColor : getContrastingBackgroundColor(iconColor);
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip)
-  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip),
+      keymap: toggleHighlightPalette
+    })
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
+    isOpen: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? isPaletteOpen : undefined,
+    setIsOpen: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? setIsPaletteOpen : undefined
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
       highlightColor: highlightColorIcon
     }, /*#__PURE__*/React.createElement(TextColorIcon, {

package/dist/esm/editor-commands/palette.js

@@ -0,0 +1,23 @@
+import { pluginKey, ACTIONS } from '../pm-plugins/main';
+export var togglePalette = function togglePalette(api) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    var pluginState = api === null || api === void 0 ? void 0 : api.textColor.sharedState.currentState();
+    var isPaletteOpen = pluginState === null || pluginState === void 0 ? void 0 : pluginState.isPaletteOpen;
+    tr.setMeta(pluginKey, {
+      action: ACTIONS.SET_PALETTE,
+      isPaletteOpen: !isPaletteOpen
+    });
+    return tr;
+  };
+};
+export var setPalette = function setPalette(isPaletteOpen) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    tr.setMeta(pluginKey, {
+      action: ACTIONS.SET_PALETTE,
+      isPaletteOpen: isPaletteOpen
+    });
+    return tr;
+  };
+};

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

@@ -0,0 +1,10 @@
+import { bindKeymapWithEditorCommand, keymap, toggleHighlightPalette } from '@atlaskit/editor-common/keymaps';
+import { togglePalette } from '../editor-commands/palette';
+export function keymapPlugin(_ref) {
+  var api = _ref.api;
+  var list = {};
+  if (toggleHighlightPalette.common) {
+    bindKeymapWithEditorCommand(toggleHighlightPalette.common, togglePalette(api), list);
+  }
+  return keymap(list);
+}

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

@@ -19,7 +19,8 @@ function createInitialPluginState(editorState, pluginConfig) {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),
     palette: palette,
-    defaultColor: defaultColor.color
+    defaultColor: defaultColor.color,
+    isPaletteOpen: false
   };
   return state;
 }
@@ -27,6 +28,7 @@ export var ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS[ACTIONS["RESET_COLOR"] = 0] = "RESET_COLOR";
   ACTIONS[ACTIONS["SET_COLOR"] = 1] = "SET_COLOR";
   ACTIONS[ACTIONS["DISABLE"] = 2] = "DISABLE";
+  ACTIONS[ACTIONS["SET_PALETTE"] = 3] = "SET_PALETTE";
   return ACTIONS;
 }({});
 export var pluginKey = new PluginKey('textColorPlugin');
@@ -49,7 +51,8 @@ export function createPlugin(dispatch, pluginConfig) {
           case ACTIONS.SET_COLOR:
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: meta.color,
-              disabled: false
+              disabled: false,
+              isPaletteOpen: false
             });
             break;
           case ACTIONS.DISABLE:
@@ -57,13 +60,18 @@ export function createPlugin(dispatch, pluginConfig) {
               disabled: true
             });
             break;
+          case ACTIONS.SET_PALETTE:
+            nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              isPaletteOpen: meta.isPaletteOpen
+            });
+            break;
           default:
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: getActiveColor(newState),
               disabled: getDisabledState(newState)
             });
         }
-        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled) {
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
           dispatch(pluginKey, nextState);
           return nextState;
         }

package/dist/esm/textColorPlugin.js

@@ -1,9 +1,12 @@
 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 changeColorCommand } from './editor-commands/change-color';
+import { setPalette as _setPalette } from './editor-commands/palette';
 import { changeColor as _changeColor } from './pm-plugins/commands/change-color';
+import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, pluginKey as textColorPluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
@@ -63,12 +66,25 @@ export var textColorPlugin = function textColorPlugin(_ref) {
       }];
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      return editorExperiment('platform_editor_toolbar_aifc', true) && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? [{
         name: 'textColor',
         plugin: function plugin(_ref3) {
           var dispatch = _ref3.dispatch;
           return createPlugin(dispatch, pluginConfig(textColorConfig));
         }
+      }, {
+        name: 'textColorKeymap',
+        plugin: function plugin() {
+          return keymapPlugin({
+            api: api
+          });
+        }
+      }] : [{
+        name: 'textColor',
+        plugin: function plugin(_ref4) {
+          var dispatch = _ref4.dispatch;
+          return createPlugin(dispatch, pluginConfig(textColorConfig));
+        }
       }];
     },
     getSharedState: function getSharedState(editorState) {
@@ -86,6 +102,9 @@ export var textColorPlugin = function textColorPlugin(_ref) {
     commands: {
       changeColor: function changeColor(color, inputMethod) {
         return changeColorCommand(color, api, inputMethod);
+      },
+      setPalette: function setPalette(isPaletteOpen) {
+        return _setPalette(isPaletteOpen);
       }
     },
     pluginsOptions: !isToolbarAIFCEnabled ? {

package/dist/esm/ui/TextColorHighlightMenu.js

@@ -1,8 +1,9 @@
 /* TextColorHighlightMenu.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./TextColorHighlightMenu.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 { toggleHighlightPalette, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
@@ -19,6 +20,7 @@ var getIconColor = function getIconColor(textColor, defaultColor, highlightColor
   return hexToEditorTextPaletteColor(textColor) || "var(--ds-text, #172B4D)";
 };
 export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
+  var _api$textColor2;
   var children = _ref.children,
     api = _ref.api;
   var isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
@@ -31,11 +33,30 @@ export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
+  var isPaletteOpen = useSharedPluginStateSelector(api, 'textColor.isPaletteOpen');
+  var setIsPaletteOpen = useCallback(function (isOpen) {
+    var _api$textColor;
+    if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.commands) !== null && _api$textColor !== void 0 && _api$textColor.setPalette) {
+      api.core.actions.execute(function (_ref2) {
+        var tr = _ref2.tr;
+        api.textColor.commands.setPalette(isOpen)({
+          tr: tr
+        });
+        return tr;
+      });
+    }
+  }, [api === null || api === void 0 || (_api$textColor2 = api.textColor) === null || _api$textColor2 === void 0 ? void 0 : _api$textColor2.commands, api === null || api === void 0 ? void 0 : api.core.actions]);
   var iconColor = getIconColor(textColor, defaultColor, highlightColor);
   var highlightColorIcon = highlightColor ? highlightColor : getContrastingBackgroundColor(iconColor);
   return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip)
-  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip),
+      keymap: toggleHighlightPalette
+    })
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
+    isOpen: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? isPaletteOpen : undefined,
+    setIsOpen: expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) ? setIsPaletteOpen : undefined
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
       highlightColor: highlightColorIcon
     }, /*#__PURE__*/React.createElement(TextColorIcon, {

package/dist/types/editor-commands/palette.d.ts

@@ -0,0 +1,4 @@
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+export declare const togglePalette: (api: ExtractInjectionAPI<TextColorPlugin> | undefined) => EditorCommand;
+export declare const setPalette: (isPaletteOpen: boolean) => EditorCommand;

package/dist/types/pm-plugins/keymap.d.ts

@@ -0,0 +1,6 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+export declare function keymapPlugin({ api }: {
+    api: ExtractInjectionAPI<TextColorPlugin> | undefined;
+}): SafePlugin;

package/dist/types/pm-plugins/main.d.ts

@@ -6,6 +6,7 @@ export type TextColorPluginState = {
     color: string | null;
     defaultColor: string;
     disabled?: boolean;
+    isPaletteOpen?: boolean;
     palette: Array<PaletteColor>;
 };
 type TextColorDefaultColor = {
@@ -18,7 +19,8 @@ export interface TextColorPluginConfig {
 export declare enum ACTIONS {
     RESET_COLOR = 0,
     SET_COLOR = 1,
-    DISABLE = 2
+    DISABLE = 2,
+    SET_PALETTE = 3
 }
 export declare const pluginKey: PluginKey<TextColorPluginState>;
 export declare function createPlugin(dispatch: Dispatch, pluginConfig?: TextColorPluginConfig): SafePlugin;

package/dist/types/textColorPluginType.d.ts

@@ -22,6 +22,7 @@ export type TextColorPlugin = NextEditorPlugin<'textColor', {
     };
     commands: {
         changeColor: (color: string, inputMethod?: TextColorInputMethod) => EditorCommand;
+        setPalette: (isPaletteOpen: boolean) => EditorCommand;
     };
     dependencies: Dependencies;
     pluginConfiguration: TextColorPluginOptions | undefined;

package/dist/types-ts4.5/editor-commands/palette.d.ts

@@ -0,0 +1,4 @@
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+export declare const togglePalette: (api: ExtractInjectionAPI<TextColorPlugin> | undefined) => EditorCommand;
+export declare const setPalette: (isPaletteOpen: boolean) => EditorCommand;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -0,0 +1,6 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+export declare function keymapPlugin({ api }: {
+    api: ExtractInjectionAPI<TextColorPlugin> | undefined;
+}): SafePlugin;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -6,6 +6,7 @@ export type TextColorPluginState = {
     color: string | null;
     defaultColor: string;
     disabled?: boolean;
+    isPaletteOpen?: boolean;
     palette: Array<PaletteColor>;
 };
 type TextColorDefaultColor = {
@@ -18,7 +19,8 @@ export interface TextColorPluginConfig {
 export declare enum ACTIONS {
     RESET_COLOR = 0,
     SET_COLOR = 1,
-    DISABLE = 2
+    DISABLE = 2,
+    SET_PALETTE = 3
 }
 export declare const pluginKey: PluginKey<TextColorPluginState>;
 export declare function createPlugin(dispatch: Dispatch, pluginConfig?: TextColorPluginConfig): SafePlugin;

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

@@ -22,6 +22,7 @@ export type TextColorPlugin = NextEditorPlugin<'textColor', {
     };
     commands: {
         changeColor: (color: string, inputMethod?: TextColorInputMethod) => EditorCommand;
+        setPalette: (isPaletteOpen: boolean) => EditorCommand;
     };
     dependencies: Dependencies;
     pluginConfiguration: TextColorPluginOptions | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "6.1.2",
+	"version": "6.2.0",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,14 +34,14 @@
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^6.1.0",
-		"@atlaskit/editor-plugin-highlight": "^6.1.0",
+		"@atlaskit/editor-plugin-highlight": "^6.2.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^7.0.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^7.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^3.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/editor-toolbar": "^0.13.0",
+		"@atlaskit/editor-toolbar": "^0.14.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.4.0",