@atlaskit/editor-plugin-highlight 1.7.4 → 1.8.0

package/dist/es2019/ui/ToolbarHighlightColor.js

@@ -2,44 +2,45 @@
 import React, { useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
 import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
 import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
-import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteWithTokenBorders } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
-import { changeColor } from '../commands';
+import { changeColor, setPalette } from '../commands';
 import { EditorHighlightIcon } from './EditorHighlightIcon';
 const ToolbarHighlightColor = ({
   popupsMountPoint,
   popupsBoundariesElement,
   popupsScrollableElement,
   isToolbarReducedSpacing,
-  dispatchAnalyticsEvent,
   disabled,
   pluginInjectionApi,
   intl: {
     formatMessage
-  }
+  },
+  editorView
 }) => {
   const toolbarItemRef = useRef(null);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
   const {
     highlightState
   } = useSharedPluginState(pluginInjectionApi, ['highlight']);
+  const isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
   const setDropdownOpen = isOpen => {
-    dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
-      action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
-      actionSubject: ACTION_SUBJECT.TOOLBAR,
-      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
-      eventType: EVENT_TYPE.TRACK
-    });
-    setIsDropdownOpen(isOpen);
+    if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
+      const {
+        state,
+        dispatch
+      } = editorView;
+      setPalette(pluginInjectionApi, isOpen)(state, dispatch);
+    }
   };
   const toggleDropdown = () => setDropdownOpen(!isDropdownOpen);
   const handleClick = () => {
@@ -88,10 +89,11 @@ const ToolbarHighlightColor = ({
   // pixels, used to determine where to horizontally position the dropdown when space is limited
   // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
   const fitWidth = 242;
+  const palette = getBooleanFF('platform.editor.dynamic-palette-borders') ? highlightColorPaletteWithTokenBorders : highlightColorPalette;
   const {
     selectedRowIndex,
     selectedColumnIndex
-  } = getSelectedRowAndColumnFromPalette(highlightColorPalette, highlightState.activeColor);
+  } = getSelectedRowAndColumnFromPalette(palette, highlightState.activeColor);
   return jsx(Flex, {
     alignItems: "center"
   }, jsx(Dropdown, {
@@ -116,10 +118,11 @@ const ToolbarHighlightColor = ({
       spacing: isToolbarReducedSpacing ? 'none' : 'default',
       disabled: disabled || highlightState.disabled,
       selected: isDropdownOpen,
-      "aria-label": toolbarButtonLabel,
+      "aria-label": tooltip(toggleHighlightPalette, toolbarButtonLabel),
+      "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
       "aria-expanded": isDropdownOpen,
       "aria-haspopup": true,
-      title: toolbarButtonLabel,
+      title: tooltip(toggleHighlightPalette, toolbarButtonLabel),
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
@@ -138,7 +141,7 @@ const ToolbarHighlightColor = ({
     onClick: color => handleColorChange(color),
     selectedColor: highlightState.activeColor,
     paletteOptions: {
-      palette: highlightColorPalette,
+      palette,
       hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
     }
   }))));

package/dist/es2019/utils/color.js

@@ -1,5 +1,4 @@
 import { entireSelectionContainsMark } from '@atlaskit/editor-common/mark';
-import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 const getAllUniqueBackgroundColorMarksInRange = (from, to, tr) => {
@@ -45,23 +44,24 @@ const getAllUniqueBackgroundColorMarksInCellSelection = (selection, tr) => {
 const getColorFromCellSelection = (selection, tr) => {
   const marks = getAllUniqueBackgroundColorMarksInCellSelection(selection, tr);
   if (marks.length > 1) {
-    return null;
+    return 'multiple';
   }
   const firstColorMark = marks.at(0);
-  let foundNonColoredNode = false;
-  if (firstColorMark) {
-    selection.forEachCell((cell, cellPos) => {
-      if (foundNonColoredNode) {
-        return;
-      }
-      const from = cellPos;
-      const to = cellPos + cell.nodeSize;
-      if (!entireSelectionContainsMark(firstColorMark, tr.doc, from, to)) {
-        foundNonColoredNode = true;
-      }
-    });
+  if (!firstColorMark) {
+    return null;
   }
-  return foundNonColoredNode ? REMOVE_HIGHLIGHT_COLOR : firstColorMark === null || firstColorMark === void 0 ? void 0 : firstColorMark.attrs.color;
+  let foundUncolouredNode = false;
+  selection.forEachCell((cell, cellPos) => {
+    if (foundUncolouredNode) {
+      return;
+    }
+    const from = cellPos;
+    const to = cellPos + cell.nodeSize;
+    if (!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
@@ -70,28 +70,29 @@ const getColorFromCellSelection = (selection, tr) => {
 const getColorFromRange = (from, to, tr) => {
   const marks = getAllUniqueBackgroundColorMarksInRange(from, to, tr);
   if (marks.length > 1) {
-    return null;
+    return 'multiple';
   }
   const firstColorMark = marks.at(0);
   if (firstColorMark && entireSelectionContainsMark(firstColorMark, tr.doc, from, to)) {
     return firstColorMark.attrs.color;
   }
-  return REMOVE_HIGHLIGHT_COLOR;
+  return null;
 };
 
 // For Cursor selections - set color if it is found in the storedMarks or $cursor.marks
 const getColorFromCursor = (selection, tr) => {
+  var _mark$attrs$color;
   if (!selection.$cursor) {
-    return REMOVE_HIGHLIGHT_COLOR;
+    return null;
   }
   const mark = tr.doc.type.schema.marks.backgroundColor.isInSet([...(tr.storedMarks ? tr.storedMarks : []), ...selection.$cursor.marks()]);
-  return (mark === null || mark === void 0 ? void 0 : mark.attrs.color) || 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;
 };
 export const getActiveColor = tr => {
   const {
     selection
   } = tr;
-  let color;
+  let color = null;
   if (selection instanceof CellSelection) {
     color = getColorFromCellSelection(selection, tr);
   } else if (selection instanceof TextSelection && selection.$cursor) {
@@ -99,5 +100,5 @@ export const getActiveColor = tr => {
   } else {
     color = getColorFromRange(selection.from, selection.to, tr);
   }
-  return color === undefined ? REMOVE_HIGHLIGHT_COLOR : color;
+  return color;
 };

package/dist/esm/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 var changeColor = function changeColor(editorAnalyticsAPI) {
   return function (_ref) {
@@ -34,7 +34,8 @@ export var changeColor = function changeColor(editorAnalyticsAPI) {
   };
 };
 var createAnalyticsEvent = function createAnalyticsEvent(color, tr) {
-  var previousColor = getActiveColor(tr);
+  var _getActiveColor;
+  var previousColor = (_getActiveColor = getActiveColor(tr)) !== null && _getActiveColor !== void 0 ? _getActiveColor : REMOVE_HIGHLIGHT_COLOR;
   // get color names from palette
   var newColorFromPalette = highlightColorPalette.find(function (_ref3) {
     var value = _ref3.value;

package/dist/esm/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/esm/commands/set-palette.js

@@ -0,0 +1,33 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
+export var setPalette = function setPalette(api, isPaletteOpen) {
+  return function (state, dispatch) {
+    var _highlightPluginKey$g;
+    var isDisabled = (_highlightPluginKey$g = 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(highlightPluginKey, {
+        type: HighlightPluginAction.TOGGLE_PALETTE,
+        isPaletteOpen: isPaletteOpen
+      });
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var createAnalyticsEvent = function 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/esm/commands/toggle-palette.js

@@ -0,0 +1,34 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
+export var togglePalette = function togglePalette(api) {
+  return function (state, dispatch) {
+    var _highlightPluginKey$g, _highlightPluginKey$g2;
+    var isDisabled = (_highlightPluginKey$g = highlightPluginKey.getState(state)) === null || _highlightPluginKey$g === void 0 ? void 0 : _highlightPluginKey$g.disabled;
+    var isPaletteOpen = (_highlightPluginKey$g2 = 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(highlightPluginKey, {
+        type: HighlightPluginAction.TOGGLE_PALETTE,
+        isPaletteOpen: !isPaletteOpen
+      });
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var createAnalyticsEvent = function 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/esm/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 var highlightPlugin = function highlightPlugin(_ref) {
   var _api$analytics;
@@ -12,7 +13,8 @@ export var 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.createElement(ToolbarHighlightColor, {
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
@@ -20,7 +22,8 @@ export var highlightPlugin = function highlightPlugin(_ref) {
       disabled: disabled,
       isToolbarReducedSpacing: isToolbarReducedSpacing,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      pluginInjectionApi: api
+      pluginInjectionApi: api,
+      editorView: editorView
     });
   };
   return {
@@ -36,6 +39,13 @@ export var highlightPlugin = function highlightPlugin(_ref) {
             api: api
           });
         }
+      }, {
+        name: 'highlightKeymap',
+        plugin: function plugin() {
+          return keymapPlugin({
+            api: api
+          });
+        }
       }];
     },
     getSharedState: function getSharedState(editorState) {

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

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

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

@@ -3,11 +3,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) { _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 { 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 var highlightPluginKey = new PluginKey('highlight');
 export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
   HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
+  HighlightPluginAction[HighlightPluginAction["TOGGLE_PALETTE"] = 1] = "TOGGLE_PALETTE";
   return HighlightPluginAction;
 }({});
 export var createPlugin = function createPlugin(_ref) {
@@ -18,7 +19,8 @@ export var createPlugin = function createPlugin(_ref) {
       init: function init(_, editorState) {
         return {
           activeColor: null,
-          disabled: getDisabledState(editorState)
+          disabled: getDisabledState(editorState),
+          isPaletteOpen: false
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -31,6 +33,12 @@ export var 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: getActiveColor(tr),

package/dist/esm/ui/ToolbarHighlightColor.js

@@ -3,46 +3,42 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
 import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
 import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
-import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteWithTokenBorders } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
-import { changeColor } from '../commands';
+import { changeColor, setPalette } from '../commands';
 import { EditorHighlightIcon } from './EditorHighlightIcon';
 var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
   var popupsMountPoint = _ref.popupsMountPoint,
     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 = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isDropdownOpen = _useState2[0],
-    setIsDropdownOpen = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isOpenedByKeyboard = _useState4[0],
-    setIsOpenedByKeyboard = _useState4[1];
+    isOpenedByKeyboard = _useState2[0],
+    setIsOpenedByKeyboard = _useState2[1];
   var _useSharedPluginState = 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 ? ACTION.OPENED : ACTION.CLOSED,
-      actionSubject: ACTION_SUBJECT.TOOLBAR,
-      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
-      eventType: EVENT_TYPE.TRACK
-    });
-    setIsDropdownOpen(isOpen);
+    if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      setPalette(pluginInjectionApi, isOpen)(state, dispatch);
+    }
   };
   var toggleDropdown = function toggleDropdown() {
     return setDropdownOpen(!isDropdownOpen);
@@ -93,7 +89,8 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
   // pixels, used to determine where to horizontally position the dropdown when space is limited
   // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
   var fitWidth = 242;
-  var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(highlightColorPalette, highlightState.activeColor),
+  var palette = getBooleanFF('platform.editor.dynamic-palette-borders') ? highlightColorPaletteWithTokenBorders : highlightColorPalette;
+  var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(palette, highlightState.activeColor),
     selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
     selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
   return jsx(Flex, {
@@ -120,10 +117,11 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
       spacing: isToolbarReducedSpacing ? 'none' : 'default',
       disabled: disabled || highlightState.disabled,
       selected: isDropdownOpen,
-      "aria-label": toolbarButtonLabel,
+      "aria-label": tooltip(toggleHighlightPalette, toolbarButtonLabel),
+      "aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
       "aria-expanded": isDropdownOpen,
       "aria-haspopup": true,
-      title: toolbarButtonLabel,
+      title: tooltip(toggleHighlightPalette, toolbarButtonLabel),
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
@@ -144,7 +142,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
     },
     selectedColor: highlightState.activeColor,
     paletteOptions: {
-      palette: highlightColorPalette,
+      palette: palette,
       hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
     }
   }))));

package/dist/esm/utils/color.js

@@ -1,6 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { entireSelectionContainsMark } from '@atlaskit/editor-common/mark';
-import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 var getAllUniqueBackgroundColorMarksInRange = function getAllUniqueBackgroundColorMarksInRange(from, to, tr) {
@@ -42,23 +41,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 (!entireSelectionContainsMark(firstColorMark, tr.doc, from, to)) {
-        foundNonColoredNode = true;
-      }
-    });
+  if (!firstColorMark) {
+    return null;
   }
-  return foundNonColoredNode ? 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 (!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
@@ -67,26 +67,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 && entireSelectionContainsMark(firstColorMark, tr.doc, from, to)) {
     return firstColorMark.attrs.color;
   }
-  return 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 REMOVE_HIGHLIGHT_COLOR;
+    return null;
   }
   var mark = tr.doc.type.schema.marks.backgroundColor.isInSet([].concat(_toConsumableArray(tr.storedMarks ? tr.storedMarks : []), _toConsumableArray(selection.$cursor.marks())));
-  return (mark === null || mark === void 0 ? void 0 : mark.attrs.color) || 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;
 };
 export var getActiveColor = function getActiveColor(tr) {
   var selection = tr.selection;
-  var color;
+  var color = null;
   if (selection instanceof CellSelection) {
     color = getColorFromCellSelection(selection, tr);
   } else if (selection instanceof TextSelection && selection.$cursor) {
@@ -94,5 +95,5 @@ export var getActiveColor = function getActiveColor(tr) {
   } else {
     color = getColorFromRange(selection.from, selection.to, tr);
   }
-  return color === undefined ? REMOVE_HIGHLIGHT_COLOR : color;
+  return color;
 };

package/dist/types/commands/index.d.ts

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

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

@@ -0,0 +1,3 @@
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type HighlightPlugin } from '../plugin';
+export declare const setPalette: (api: ExtractInjectionAPI<HighlightPlugin>, isPaletteOpen: boolean) => Command;

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

@@ -0,0 +1,3 @@
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type HighlightPlugin } from '../plugin';
+export declare const togglePalette: (api: ExtractInjectionAPI<HighlightPlugin>) => Command;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { highlightPlugin } from './plugin';
 export type { HighlightPlugin } from './plugin';
-export type { HighlightPluginState } from './pm-plugin';
+export type { HighlightPluginState } from './pm-plugins/main';

package/dist/types/plugin.d.ts

@@ -3,7 +3,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BackgroundColorPlugin } from '@atlaskit/editor-plugin-background-color';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { TextFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
-import type { HighlightPluginState } from './pm-plugin';
+import type { HighlightPluginState } from './pm-plugins/main';
 export type HighlightPlugin = NextEditorPlugin<'highlight', {
     dependencies: [
         BackgroundColorPlugin,

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 { HighlightPlugin } from '../plugin';
+export declare function keymapPlugin({ api }: {
+    api: ExtractInjectionAPI<HighlightPlugin> | undefined;
+}): SafePlugin<any>;

package/dist/{types-ts4.5/pm-plugin.d.ts → types/pm-plugins/main.d.ts}

@@ -1,14 +1,16 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { HighlightPlugin } from './plugin';
+import type { HighlightPlugin } from '../plugin';
 export declare const highlightPluginKey: PluginKey<HighlightPluginState>;
 export type HighlightPluginState = {
     activeColor: string | null;
     disabled: boolean;
+    isPaletteOpen: boolean;
 };
 export declare enum HighlightPluginAction {
-    CHANGE_COLOR = 0
+    CHANGE_COLOR = 0,
+    TOGGLE_PALETTE = 1
 }
 export declare const createPlugin: ({ api, }: {
     api: ExtractInjectionAPI<HighlightPlugin> | undefined;

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

@@ -3,6 +3,7 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { HighlightPlugin } from '../plugin';
 export declare const ToolbarHighlightColorWithIntl: React.FC<import("react-intl-next").WithIntlProps<{
     popupsMountPoint?: HTMLElement | undefined;
@@ -12,6 +13,7 @@ export declare const ToolbarHighlightColorWithIntl: React.FC<import("react-intl-
     isToolbarReducedSpacing: boolean;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
     pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    editorView: EditorView;
 } & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<{
         popupsMountPoint?: HTMLElement | undefined;
@@ -21,5 +23,6 @@ export declare const ToolbarHighlightColorWithIntl: React.FC<import("react-intl-
         isToolbarReducedSpacing: boolean;
         dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
         pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+        editorView: EditorView;
     } & WrappedComponentProps>;
 };

package/dist/types-ts4.5/commands/index.d.ts

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

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

@@ -0,0 +1,3 @@
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type HighlightPlugin } from '../plugin';
+export declare const setPalette: (api: ExtractInjectionAPI<HighlightPlugin>, isPaletteOpen: boolean) => Command;

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

@@ -0,0 +1,3 @@
+import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type HighlightPlugin } from '../plugin';
+export declare const togglePalette: (api: ExtractInjectionAPI<HighlightPlugin>) => Command;