@atlaskit/editor-plugin-highlight 1.7.4 → 1.7.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-highlight
 
+## 1.7.5
+
+### Patch Changes
+
+- [#107302](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107302)
+  [`b1279657d678b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b1279657d678b) -
+  [ux] [ED-23162] Add keyboard shortcut to toggle highlight color palette
+- [#107453](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107453)
+  [`30d2c10cc823d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/30d2c10cc823d) -
+  [ED-23515] Remove selected state for "Remove highlight" option, added multiple color nuance to
+  change color analytics
+- Updated dependencies
+
 ## 1.7.4
 
 ### Patch Changes

package/dist/cjs/commands/change-color.js

@@ -7,7 +7,7 @@ exports.changeColor = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _mark = require("@atlaskit/editor-common/mark");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
-var _pmPlugin = require("../pm-plugin");
+var _main = require("../pm-plugins/main");
 var _color = require("../utils/color");
 var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI) {
   return function (_ref) {
@@ -25,8 +25,8 @@ var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI)
           tr: tr
         });
       } else {
-        tr.setMeta(_pmPlugin.highlightPluginKey, {
-          type: _pmPlugin.HighlightPluginAction.CHANGE_COLOR,
+        tr.setMeta(_main.highlightPluginKey, {
+          type: _main.HighlightPluginAction.CHANGE_COLOR,
           color: color
         });
         (0, _mark.toggleMark)(backgroundColor, {
@@ -40,7 +40,8 @@ var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI)
   };
 };
 var createAnalyticsEvent = function createAnalyticsEvent(color, tr) {
-  var previousColor = (0, _color.getActiveColor)(tr);
+  var _getActiveColor;
+  var previousColor = (_getActiveColor = (0, _color.getActiveColor)(tr)) !== null && _getActiveColor !== void 0 ? _getActiveColor : _uiColor.REMOVE_HIGHLIGHT_COLOR;
   // get color names from palette
   var newColorFromPalette = _uiColor.highlightColorPalette.find(function (_ref3) {
     var value = _ref3.value;

package/dist/cjs/commands/index.js

@@ -9,4 +9,18 @@ Object.defineProperty(exports, "changeColor", {
     return _changeColor.changeColor;
   }
 });
-var _changeColor = require("./change-color");
+Object.defineProperty(exports, "setPalette", {
+  enumerable: true,
+  get: function get() {
+    return _setPalette.setPalette;
+  }
+});
+Object.defineProperty(exports, "togglePalette", {
+  enumerable: true,
+  get: function get() {
+    return _togglePalette.togglePalette;
+  }
+});
+var _changeColor = require("./change-color");
+var _togglePalette = require("./toggle-palette");
+var _setPalette = require("./set-palette");

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setPalette = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _main = require("../pm-plugins/main");
+var setPalette = exports.setPalette = function setPalette(api, isPaletteOpen) {
+  return function (state, dispatch) {
+    var _highlightPluginKey$g;
+    var isDisabled = (_highlightPluginKey$g = _main.highlightPluginKey.getState(state)) === null || _highlightPluginKey$g === void 0 ? void 0 : _highlightPluginKey$g.disabled;
+    if (!isDisabled) {
+      var _api$analytics;
+      var tr = state.tr;
+      (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent(createAnalyticsEvent(isPaletteOpen))(tr);
+      tr.setMeta(_main.highlightPluginKey, {
+        type: _main.HighlightPluginAction.TOGGLE_PALETTE,
+        isPaletteOpen: isPaletteOpen
+      });
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var createAnalyticsEvent = function createAnalyticsEvent(isOpen) {
+  return {
+    action: isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED,
+    actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+    }
+  };
+};

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.togglePalette = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _main = require("../pm-plugins/main");
+var togglePalette = exports.togglePalette = function togglePalette(api) {
+  return function (state, dispatch) {
+    var _highlightPluginKey$g, _highlightPluginKey$g2;
+    var isDisabled = (_highlightPluginKey$g = _main.highlightPluginKey.getState(state)) === null || _highlightPluginKey$g === void 0 ? void 0 : _highlightPluginKey$g.disabled;
+    var isPaletteOpen = (_highlightPluginKey$g2 = _main.highlightPluginKey.getState(state)) === null || _highlightPluginKey$g2 === void 0 ? void 0 : _highlightPluginKey$g2.isPaletteOpen;
+    var tr = state.tr;
+    if (!isDisabled) {
+      var _api$analytics;
+      (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent(createAnalyticsEvent(!isPaletteOpen))(tr);
+      tr.setMeta(_main.highlightPluginKey, {
+        type: _main.HighlightPluginAction.TOGGLE_PALETTE,
+        isPaletteOpen: !isPaletteOpen
+      });
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var createAnalyticsEvent = function createAnalyticsEvent(isOpen) {
+  return {
+    action: isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED,
+    actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+    }
+  };
+};

package/dist/cjs/plugin.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.highlightPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _commands = require("./commands");
-var _pmPlugin = require("./pm-plugin");
+var _keymap = require("./pm-plugins/keymap");
+var _main = require("./pm-plugins/main");
 var _ToolbarHighlightColor = require("./ui/ToolbarHighlightColor");
 var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
   var _api$analytics;
@@ -19,7 +20,8 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
       popupsScrollableElement = _ref2.popupsScrollableElement,
       disabled = _ref2.disabled,
       isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
-      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+      editorView = _ref2.editorView;
     return /*#__PURE__*/_react.default.createElement(_ToolbarHighlightColor.ToolbarHighlightColorWithIntl, {
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
@@ -27,7 +29,8 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
       disabled: disabled,
       isToolbarReducedSpacing: isToolbarReducedSpacing,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      pluginInjectionApi: api
+      pluginInjectionApi: api,
+      editorView: editorView
     });
   };
   return {
@@ -39,7 +42,14 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
       return [{
         name: 'highlight',
         plugin: function plugin() {
-          return (0, _pmPlugin.createPlugin)({
+          return (0, _main.createPlugin)({
+            api: api
+          });
+        }
+      }, {
+        name: 'highlightKeymap',
+        plugin: function plugin() {
+          return (0, _keymap.keymapPlugin)({
             api: api
           });
         }
@@ -49,7 +59,7 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
       if (!editorState) {
         return;
       }
-      return _pmPlugin.highlightPluginKey.getState(editorState);
+      return _main.highlightPluginKey.getState(editorState);
     },
     usePluginHook: function usePluginHook() {
       var _api$core, _api$primaryToolbar;

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

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

package/dist/cjs/{pm-plugin.js → pm-plugins/main.js}

@@ -8,13 +8,14 @@ exports.highlightPluginKey = exports.createPlugin = exports.HighlightPluginActio
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _color = require("./utils/color");
-var _disabled = require("./utils/disabled");
+var _color = require("../utils/color");
+var _disabled = require("../utils/disabled");
 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 highlightPluginKey = exports.highlightPluginKey = new _state.PluginKey('highlight');
 var HighlightPluginAction = exports.HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
   HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
+  HighlightPluginAction[HighlightPluginAction["TOGGLE_PALETTE"] = 1] = "TOGGLE_PALETTE";
   return HighlightPluginAction;
 }({});
 var createPlugin = exports.createPlugin = function createPlugin(_ref) {
@@ -25,7 +26,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
       init: function init(_, editorState) {
         return {
           activeColor: null,
-          disabled: (0, _disabled.getDisabledState)(editorState)
+          disabled: (0, _disabled.getDisabledState)(editorState),
+          isPaletteOpen: false
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -38,6 +40,12 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeColor: color
             });
+          case HighlightPluginAction.TOGGLE_PALETTE:
+            var _tr$getMeta3 = tr.getMeta(highlightPluginKey),
+              isPaletteOpen = _tr$getMeta3.isPaletteOpen;
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              isPaletteOpen: isPaletteOpen
+            });
           default:
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeColor: (0, _color.getActiveColor)(tr),

package/dist/cjs/ui/ToolbarHighlightColor.js

@@ -10,8 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
@@ -31,29 +31,24 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
     isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
     disabled = _ref.disabled,
     pluginInjectionApi = _ref.pluginInjectionApi,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    editorView = _ref.editorView;
   var toolbarItemRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isDropdownOpen = _useState2[0],
-    setIsDropdownOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isOpenedByKeyboard = _useState4[0],
-    setIsOpenedByKeyboard = _useState4[1];
+    isOpenedByKeyboard = _useState2[0],
+    setIsOpenedByKeyboard = _useState2[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
     highlightState = _useSharedPluginState.highlightState;
+  var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
   var setDropdownOpen = function setDropdownOpen(isOpen) {
-    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
-      action: isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED,
-      actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
-      eventType: _analytics.EVENT_TYPE.TRACK
-    });
-    setIsDropdownOpen(isOpen);
+    if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      (0, _commands.setPalette)(pluginInjectionApi, isOpen)(state, dispatch);
+    }
   };
   var toggleDropdown = function toggleDropdown() {
     return setDropdownOpen(!isDropdownOpen);
@@ -131,10 +126,11 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
       spacing: isToolbarReducedSpacing ? 'none' : 'default',
       disabled: disabled || highlightState.disabled,
       selected: isDropdownOpen,
-      "aria-label": toolbarButtonLabel,
+      "aria-label": (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel),
+      "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleHighlightPalette),
       "aria-expanded": isDropdownOpen,
       "aria-haspopup": true,
-      title: toolbarButtonLabel,
+      title: (0, _keymaps.tooltip)(_keymaps.toggleHighlightPalette, toolbarButtonLabel),
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,

package/dist/cjs/utils/color.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.getActiveColor = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _mark = require("@atlaskit/editor-common/mark");
-var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var getAllUniqueBackgroundColorMarksInRange = function getAllUniqueBackgroundColorMarksInRange(from, to, tr) {
@@ -49,23 +48,24 @@ var getAllUniqueBackgroundColorMarksInCellSelection = function getAllUniqueBackg
 var getColorFromCellSelection = function getColorFromCellSelection(selection, tr) {
   var marks = getAllUniqueBackgroundColorMarksInCellSelection(selection, tr);
   if (marks.length > 1) {
-    return null;
+    return 'multiple';
   }
   var firstColorMark = marks.at(0);
-  var foundNonColoredNode = false;
-  if (firstColorMark) {
-    selection.forEachCell(function (cell, cellPos) {
-      if (foundNonColoredNode) {
-        return;
-      }
-      var from = cellPos;
-      var to = cellPos + cell.nodeSize;
-      if (!(0, _mark.entireSelectionContainsMark)(firstColorMark, tr.doc, from, to)) {
-        foundNonColoredNode = true;
-      }
-    });
+  if (!firstColorMark) {
+    return null;
   }
-  return foundNonColoredNode ? _uiColor.REMOVE_HIGHLIGHT_COLOR : firstColorMark === null || firstColorMark === void 0 ? void 0 : firstColorMark.attrs.color;
+  var foundUncolouredNode = false;
+  selection.forEachCell(function (cell, cellPos) {
+    if (foundUncolouredNode) {
+      return;
+    }
+    var from = cellPos;
+    var to = cellPos + cell.nodeSize;
+    if (!(0, _mark.entireSelectionContainsMark)(firstColorMark, tr.doc, from, to)) {
+      foundUncolouredNode = true;
+    }
+  });
+  return foundUncolouredNode ? null : firstColorMark.attrs.color;
 };
 
 // All other selections - find the first instance of a backgroundColor mark
@@ -74,26 +74,27 @@ var getColorFromCellSelection = function getColorFromCellSelection(selection, tr
 var getColorFromRange = function getColorFromRange(from, to, tr) {
   var marks = getAllUniqueBackgroundColorMarksInRange(from, to, tr);
   if (marks.length > 1) {
-    return null;
+    return 'multiple';
   }
   var firstColorMark = marks.at(0);
   if (firstColorMark && (0, _mark.entireSelectionContainsMark)(firstColorMark, tr.doc, from, to)) {
     return firstColorMark.attrs.color;
   }
-  return _uiColor.REMOVE_HIGHLIGHT_COLOR;
+  return null;
 };
 
 // For Cursor selections - set color if it is found in the storedMarks or $cursor.marks
 var getColorFromCursor = function getColorFromCursor(selection, tr) {
+  var _mark$attrs$color;
   if (!selection.$cursor) {
-    return _uiColor.REMOVE_HIGHLIGHT_COLOR;
+    return null;
   }
   var mark = tr.doc.type.schema.marks.backgroundColor.isInSet([].concat((0, _toConsumableArray2.default)(tr.storedMarks ? tr.storedMarks : []), (0, _toConsumableArray2.default)(selection.$cursor.marks())));
-  return (mark === null || mark === void 0 ? void 0 : mark.attrs.color) || _uiColor.REMOVE_HIGHLIGHT_COLOR;
+  return (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : null;
 };
 var getActiveColor = exports.getActiveColor = function getActiveColor(tr) {
   var selection = tr.selection;
-  var color;
+  var color = null;
   if (selection instanceof _cellSelection.CellSelection) {
     color = getColorFromCellSelection(selection, tr);
   } else if (selection instanceof _state.TextSelection && selection.$cursor) {
@@ -101,5 +102,5 @@ var getActiveColor = exports.getActiveColor = function getActiveColor(tr) {
   } else {
     color = getColorFromRange(selection.from, selection.to, tr);
   }
-  return color === undefined ? _uiColor.REMOVE_HIGHLIGHT_COLOR : color;
+  return color;
 };

package/dist/es2019/commands/change-color.js

@@ -1,7 +1,7 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
 import { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
-import { HighlightPluginAction, highlightPluginKey } from '../pm-plugin';
+import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
 import { getActiveColor } from '../utils/color';
 export const changeColor = editorAnalyticsAPI => ({
   color
@@ -34,7 +34,8 @@ export const changeColor = editorAnalyticsAPI => ({
   return tr;
 };
 const createAnalyticsEvent = (color, tr) => {
-  const previousColor = getActiveColor(tr);
+  var _getActiveColor;
+  const previousColor = (_getActiveColor = getActiveColor(tr)) !== null && _getActiveColor !== void 0 ? _getActiveColor : REMOVE_HIGHLIGHT_COLOR;
   // get color names from palette
   const newColorFromPalette = highlightColorPalette.find(({
     value

package/dist/es2019/commands/index.js

@@ -1 +1,3 @@
-export { changeColor } from './change-color';
+export { changeColor } from './change-color';
+export { togglePalette } from './toggle-palette';
+export { setPalette } from './set-palette';

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

@@ -0,0 +1,31 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
+export const setPalette = (api, isPaletteOpen) => (state, dispatch) => {
+  var _highlightPluginKey$g;
+  const isDisabled = (_highlightPluginKey$g = highlightPluginKey.getState(state)) === null || _highlightPluginKey$g === void 0 ? void 0 : _highlightPluginKey$g.disabled;
+  if (!isDisabled) {
+    var _api$analytics;
+    const tr = state.tr;
+    (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent(createAnalyticsEvent(isPaletteOpen))(tr);
+    tr.setMeta(highlightPluginKey, {
+      type: HighlightPluginAction.TOGGLE_PALETTE,
+      isPaletteOpen
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+const createAnalyticsEvent = isOpen => {
+  return {
+    action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
+    actionSubject: ACTION_SUBJECT.TOOLBAR,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    }
+  };
+};

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

@@ -0,0 +1,32 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
+export const togglePalette = api => (state, dispatch) => {
+  var _highlightPluginKey$g, _highlightPluginKey$g2;
+  const isDisabled = (_highlightPluginKey$g = highlightPluginKey.getState(state)) === null || _highlightPluginKey$g === void 0 ? void 0 : _highlightPluginKey$g.disabled;
+  const isPaletteOpen = (_highlightPluginKey$g2 = highlightPluginKey.getState(state)) === null || _highlightPluginKey$g2 === void 0 ? void 0 : _highlightPluginKey$g2.isPaletteOpen;
+  const tr = state.tr;
+  if (!isDisabled) {
+    var _api$analytics;
+    (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent(createAnalyticsEvent(!isPaletteOpen))(tr);
+    tr.setMeta(highlightPluginKey, {
+      type: HighlightPluginAction.TOGGLE_PALETTE,
+      isPaletteOpen: !isPaletteOpen
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+const createAnalyticsEvent = isOpen => {
+  return {
+    action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
+    actionSubject: ACTION_SUBJECT.TOOLBAR,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }
+  };
+};

package/dist/es2019/plugin.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { changeColor } from './commands';
-import { createPlugin, highlightPluginKey } from './pm-plugin';
+import { keymapPlugin } from './pm-plugins/keymap';
+import { createPlugin, highlightPluginKey } from './pm-plugins/main';
 import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
 export const highlightPlugin = ({
   api
@@ -13,7 +14,8 @@ export const highlightPlugin = ({
     popupsScrollableElement,
     disabled,
     isToolbarReducedSpacing,
-    dispatchAnalyticsEvent
+    dispatchAnalyticsEvent,
+    editorView
   }) => /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
@@ -21,7 +23,8 @@ export const highlightPlugin = ({
     disabled: disabled,
     isToolbarReducedSpacing: isToolbarReducedSpacing,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    pluginInjectionApi: api
+    pluginInjectionApi: api,
+    editorView: editorView
   });
   return {
     name: 'highlight',
@@ -33,6 +36,11 @@ export const highlightPlugin = ({
       plugin: () => createPlugin({
         api
       })
+    }, {
+      name: 'highlightKeymap',
+      plugin: () => keymapPlugin({
+        api
+      })
     }],
     getSharedState(editorState) {
       if (!editorState) {

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

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

package/dist/es2019/{pm-plugin.js → pm-plugins/main.js}

@@ -1,10 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { getActiveColor } from './utils/color';
-import { getDisabledState } from './utils/disabled';
+import { getActiveColor } from '../utils/color';
+import { getDisabledState } from '../utils/disabled';
 export const highlightPluginKey = new PluginKey('highlight');
 export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
   HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
+  HighlightPluginAction[HighlightPluginAction["TOGGLE_PALETTE"] = 1] = "TOGGLE_PALETTE";
   return HighlightPluginAction;
 }({});
 export const createPlugin = ({
@@ -15,7 +16,8 @@ export const createPlugin = ({
     state: {
       init: (_, editorState) => ({
         activeColor: null,
-        disabled: getDisabledState(editorState)
+        disabled: getDisabledState(editorState),
+        isPaletteOpen: false
       }),
       apply: (tr, pluginState, _oldState, newState) => {
         var _tr$getMeta;
@@ -29,6 +31,14 @@ export const createPlugin = ({
               ...pluginState,
               activeColor: color
             };
+          case HighlightPluginAction.TOGGLE_PALETTE:
+            const {
+              isPaletteOpen
+            } = tr.getMeta(highlightPluginKey);
+            return {
+              ...pluginState,
+              isPaletteOpen
+            };
           default:
             return {
               ...pluginState,