@atlaskit/editor-plugin-highlight 1.0.5 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-highlight
 
+## 1.1.1
+
+### Patch Changes
+
+-   Updated dependencies
+
+## 1.1.0
+
+### Minor Changes
+
+-   [#98130](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98130)
+    [`6a3c0d9d6382`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6a3c0d9d6382) -
+    [ED-23154] Add highlight option to main toolbar in editor
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 1.0.5
 
 ### Patch Changes

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.changeColor = void 0;
+var _pmPlugin = require("../pm-plugin");
+// import {
+//   ACTION,
+//   ACTION_SUBJECT,
+//   ACTION_SUBJECT_ID,
+//   EVENT_TYPE,
+// } from '@atlaskit/editor-common/analytics';
+
+var changeColor = exports.changeColor = function changeColor(_editorAnalyticsAPI) {
+  return function (_ref) {
+    var color = _ref.color;
+    return function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(_pmPlugin.highlightPluginKey, {
+        type: _pmPlugin.HighlightPluginAction.CHANGE_COLOR,
+        color: color
+      });
+
+      // editorAnalyticsAPI?.attachAnalyticsEvent({
+      //   action: ACTION.FORMATTED,
+      //   actionSubject: ACTION_SUBJECT.TEXT,
+      //   actionSubjectId: ACTION_SUBJECT_ID.HIGHLIGHT,
+      //   eventType: EVENT_TYPE.TRACK,
+      // })(tr);
+
+      return tr;
+    };
+  };
+};

package/dist/cjs/commands/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "changeColor", {
+  enumerable: true,
+  get: function get() {
+    return _changeColor.changeColor;
+  }
+});
+var _changeColor = require("./change-color");

package/dist/cjs/plugin.js

@@ -1,15 +1,24 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.highlightPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _commands = require("./commands");
 var _pmPlugin = require("./pm-plugin");
+var _ToolbarHighlightColor = require("./ui/ToolbarHighlightColor");
 var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
+  var _api$analytics;
   var api = _ref.api;
+  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {
     name: 'highlight',
+    commands: {
+      changeColor: (0, _commands.changeColor)(editorAnalyticsAPI)
+    },
     marks: function marks() {
       return [{
         name: 'backgroundColor',
@@ -31,9 +40,24 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
         return;
       }
       return _pmPlugin.highlightPluginKey.getState(editorState);
-    } // Add highlight toolbar button to primary toolbar
-    // primaryToolbarComponent({ disabled }) {
-    // TODO: Implement primary toolbar UI
-    // },
+    },
+    primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
+      var editorView = _ref2.editorView,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsBoundariesElement = _ref2.popupsBoundariesElement,
+        popupsScrollableElement = _ref2.popupsScrollableElement,
+        disabled = _ref2.disabled,
+        isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
+        dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+      return /*#__PURE__*/_react.default.createElement(_ToolbarHighlightColor.ToolbarHighlightColorWithIntl, {
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        disabled: disabled,
+        isToolbarReducedSpacing: isToolbarReducedSpacing,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        pluginInjectionApi: api
+      });
+    }
   };
 };

package/dist/cjs/pm-plugin.js

@@ -1,15 +1,47 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightPluginKey = exports.createPlugin = void 0;
+exports.highlightPluginKey = exports.createPlugin = exports.HighlightPluginAction = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _state = require("@atlaskit/editor-prosemirror/state");
+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 initialState = {
+  activeColor: _uiColor.REMOVE_HIGHLIGHT_COLOR,
+  disabled: false // TODO: Should probably be true, but we can tackle it once we tackle disabled state
+};
+var HighlightPluginAction = exports.HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
+  HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
+  return HighlightPluginAction;
+}({});
 var createPlugin = exports.createPlugin = function createPlugin(_ref) {
   var api = _ref.api;
   return new _safePlugin.SafePlugin({
-    key: highlightPluginKey
+    key: highlightPluginKey,
+    state: {
+      init: function init() {
+        return initialState;
+      },
+      apply: function apply(tr, pluginState) {
+        var _tr$getMeta;
+        var action = (_tr$getMeta = tr.getMeta(highlightPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type;
+        switch (action) {
+          case HighlightPluginAction.CHANGE_COLOR:
+            var _tr$getMeta2 = tr.getMeta(highlightPluginKey),
+              color = _tr$getMeta2.color;
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              activeColor: color
+            });
+          default:
+            return pluginState;
+        }
+      }
+    }
   });
 };

package/dist/cjs/ui/EditorHighlightIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorHighlightIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@atlaskit/editor-common/icons");
+var _editFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/edit-filled"));
+var _primitives = require("@atlaskit/primitives");
+var EditorHighlightIcon = exports.EditorHighlightIcon = function EditorHighlightIcon(_ref) {
+  var disabled = _ref.disabled,
+    selectedColor = _ref.selectedColor;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    paddingInline: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_icons.SteppedRainbowIconDecoration, {
+    selectedColor: selectedColor,
+    disabled: disabled,
+    icon: /*#__PURE__*/_react.default.createElement(_editFilled.default, {
+      size: "small",
+      label: ""
+    })
+  }));
+};

package/dist/cjs/ui/ToolbarHighlightColor.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarHighlightColorWithIntl = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _primitives = require("@atlaskit/primitives");
+var _commands = require("../commands");
+var _EditorHighlightIcon = require("./EditorHighlightIcon");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @jsx jsx */
+
+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;
+  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];
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
+    highlightState = _useSharedPluginState.highlightState;
+  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.HIGHLIGHT,
+      eventType: _analytics.EVENT_TYPE.TRACK
+    });
+    setIsDropdownOpen(isOpen);
+  };
+  var toggleDropdown = function toggleDropdown() {
+    return setDropdownOpen(!isDropdownOpen);
+  };
+  var handleClick = function handleClick() {
+    setIsOpenedByKeyboard(false);
+    toggleDropdown();
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setIsOpenedByKeyboard(true);
+      toggleDropdown();
+    }
+  };
+  var handleClickOutside = function handleClickOutside() {
+    if (isDropdownOpen) {
+      setDropdownOpen(false);
+      setIsOpenedByKeyboard(false);
+    }
+  };
+  var handleEscapeKeydown = function handleEscapeKeydown() {
+    if (isDropdownOpen) {
+      var _toolbarItemRef$curre;
+      setDropdownOpen(false);
+      setIsOpenedByKeyboard(false);
+      toolbarItemRef === null || toolbarItemRef === void 0 || (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 || _toolbarItemRef$curre.focus();
+    }
+  };
+  var handleColorChange = function handleColorChange(color) {
+    var _pluginInjectionApi$c, _pluginInjectionApi$a;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute((0, _commands.changeColor)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
+      color: color
+    }));
+    setDropdownOpen(false);
+  };
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  var toolbarButtonLabel = formatMessage(_messages.highlightMessages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  var activeColorToken = highlightState.activeColor === _uiColor.REMOVE_HIGHLIGHT_COLOR ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
+
+  // 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 = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.highlightColorPalette, highlightState.activeColor),
+    selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+    selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
+  return (0, _react2.jsx)(_primitives.Flex, {
+    alignItems: "center"
+  }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown,
+    zIndex: _editorSharedStyles.akEditorMenuZIndex,
+    fitWidth: fitWidth,
+    closeOnTab: true,
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.COLOR,
+      selectedRowIndex: selectedRowIndex,
+      selectedColumnIndex: selectedColumnIndex,
+      isOpenedByKeyboard: isOpenedByKeyboard,
+      isPopupPositioned: true
+    },
+    trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+      buttonId: _uiMenu.TOOLBAR_BUTTON.HIGHLIGHT,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": toolbarButtonLabel,
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: toolbarButtonLabel,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), (0, _react2.jsx)("span", {
+        css: _styles.expandIconWrapperStyle
+      }, (0, _react2.jsx)(_chevronDown.default, {
+        label: ""
+      })))
+    })
+  }, (0, _react2.jsx)("div", {
+    "data-testid": "highlight-color-palette"
+  }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+    onClick: function onClick(color) {
+      return handleColorChange(color);
+    },
+    selectedColor: highlightState.activeColor,
+    paletteOptions: {
+      palette: _uiColor.highlightColorPalette,
+      hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
+    }
+  }))), (0, _react2.jsx)("span", {
+    css: _styles.separatorStyles
+  }));
+};
+var ToolbarHighlightColorWithIntl = exports.ToolbarHighlightColorWithIntl = (0, _reactIntlNext.injectIntl)(ToolbarHighlightColor);

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

@@ -0,0 +1,27 @@
+// import {
+//   ACTION,
+//   ACTION_SUBJECT,
+//   ACTION_SUBJECT_ID,
+//   EVENT_TYPE,
+// } from '@atlaskit/editor-common/analytics';
+
+import { HighlightPluginAction, highlightPluginKey } from '../pm-plugin';
+export const changeColor = _editorAnalyticsAPI => ({
+  color
+}) => ({
+  tr
+}) => {
+  tr.setMeta(highlightPluginKey, {
+    type: HighlightPluginAction.CHANGE_COLOR,
+    color
+  });
+
+  // editorAnalyticsAPI?.attachAnalyticsEvent({
+  //   action: ACTION.FORMATTED,
+  //   actionSubject: ACTION_SUBJECT.TEXT,
+  //   actionSubjectId: ACTION_SUBJECT_ID.HIGHLIGHT,
+  //   eventType: EVENT_TYPE.TRACK,
+  // })(tr);
+
+  return tr;
+};

package/dist/es2019/commands/index.js

@@ -0,0 +1 @@
+export { changeColor } from './change-color';

package/dist/es2019/plugin.js

@@ -1,30 +1,52 @@
+import React from 'react';
 import { backgroundColor } from '@atlaskit/adf-schema';
+import { changeColor } from './commands';
 import { createPlugin, highlightPluginKey } from './pm-plugin';
+import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
 export const highlightPlugin = ({
   api
-}) => ({
-  name: 'highlight',
-  marks() {
-    return [{
-      name: 'backgroundColor',
-      mark: backgroundColor
-    }];
-  },
-  pmPlugins: () => [{
+}) => {
+  var _api$analytics;
+  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  return {
     name: 'highlight',
-    plugin: () => createPlugin({
-      api
+    commands: {
+      changeColor: changeColor(editorAnalyticsAPI)
+    },
+    marks() {
+      return [{
+        name: 'backgroundColor',
+        mark: backgroundColor
+      }];
+    },
+    pmPlugins: () => [{
+      name: 'highlight',
+      plugin: () => createPlugin({
+        api
+      })
+    }],
+    getSharedState(editorState) {
+      if (!editorState) {
+        return;
+      }
+      return highlightPluginKey.getState(editorState);
+    },
+    primaryToolbarComponent: ({
+      editorView,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      disabled,
+      isToolbarReducedSpacing,
+      dispatchAnalyticsEvent
+    }) => /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      disabled: disabled,
+      isToolbarReducedSpacing: isToolbarReducedSpacing,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: api
     })
-  }],
-  getSharedState(editorState) {
-    if (!editorState) {
-      return;
-    }
-    return highlightPluginKey.getState(editorState);
-  }
-
-  // Add highlight toolbar button to primary toolbar
-  // primaryToolbarComponent({ disabled }) {
-  // TODO: Implement primary toolbar UI
-  // },
-});
+  };
+};

package/dist/es2019/pm-plugin.js

@@ -1,10 +1,38 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export const highlightPluginKey = new PluginKey('highlight');
+const initialState = {
+  activeColor: REMOVE_HIGHLIGHT_COLOR,
+  disabled: false // TODO: Should probably be true, but we can tackle it once we tackle disabled state
+};
+export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
+  HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
+  return HighlightPluginAction;
+}({});
 export const createPlugin = ({
   api
 }) => {
   return new SafePlugin({
-    key: highlightPluginKey
+    key: highlightPluginKey,
+    state: {
+      init: () => initialState,
+      apply: (tr, pluginState) => {
+        var _tr$getMeta;
+        const action = (_tr$getMeta = tr.getMeta(highlightPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type;
+        switch (action) {
+          case HighlightPluginAction.CHANGE_COLOR:
+            const {
+              color
+            } = tr.getMeta(highlightPluginKey);
+            return {
+              ...pluginState,
+              activeColor: color
+            };
+          default:
+            return pluginState;
+        }
+      }
+    }
   });
 };

package/dist/es2019/ui/EditorHighlightIcon.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SteppedRainbowIconDecoration } from '@atlaskit/editor-common/icons';
+import EditFilledIcon from '@atlaskit/icon/glyph/edit-filled';
+import { Box } from '@atlaskit/primitives';
+export const EditorHighlightIcon = ({
+  disabled,
+  selectedColor
+}) => /*#__PURE__*/React.createElement(Box, {
+  paddingInline: "space.050"
+}, /*#__PURE__*/React.createElement(SteppedRainbowIconDecoration, {
+  selectedColor: selectedColor,
+  disabled: disabled,
+  icon: /*#__PURE__*/React.createElement(EditFilledIcon, {
+    size: "small",
+    label: ""
+  })
+}));

package/dist/es2019/ui/ToolbarHighlightColor.js

@@ -0,0 +1,148 @@
+/** @jsx jsx */
+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 { highlightMessages as messages } from '@atlaskit/editor-common/messages';
+import { expandIconWrapperStyle, separatorStyles } from '@atlaskit/editor-common/styles';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } 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 { Flex } from '@atlaskit/primitives';
+import { changeColor } from '../commands';
+import { EditorHighlightIcon } from './EditorHighlightIcon';
+const ToolbarHighlightColor = ({
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  isToolbarReducedSpacing,
+  dispatchAnalyticsEvent,
+  disabled,
+  pluginInjectionApi,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const toolbarItemRef = useRef(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
+  const {
+    highlightState
+  } = useSharedPluginState(pluginInjectionApi, ['highlight']);
+  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.HIGHLIGHT,
+      eventType: EVENT_TYPE.TRACK
+    });
+    setIsDropdownOpen(isOpen);
+  };
+  const toggleDropdown = () => setDropdownOpen(!isDropdownOpen);
+  const handleClick = () => {
+    setIsOpenedByKeyboard(false);
+    toggleDropdown();
+  };
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setIsOpenedByKeyboard(true);
+      toggleDropdown();
+    }
+  };
+  const handleClickOutside = () => {
+    if (isDropdownOpen) {
+      setDropdownOpen(false);
+      setIsOpenedByKeyboard(false);
+    }
+  };
+  const handleEscapeKeydown = () => {
+    if (isDropdownOpen) {
+      var _toolbarItemRef$curre;
+      setDropdownOpen(false);
+      setIsOpenedByKeyboard(false);
+      toolbarItemRef === null || toolbarItemRef === void 0 ? void 0 : (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 ? void 0 : _toolbarItemRef$curre.focus();
+    }
+  };
+  const handleColorChange = color => {
+    var _pluginInjectionApi$c, _pluginInjectionApi$a;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(changeColor(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
+      color
+    }));
+    setDropdownOpen(false);
+  };
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  const toolbarButtonLabel = formatMessage(messages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  const activeColorToken = highlightState.activeColor === REMOVE_HIGHLIGHT_COLOR ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
+
+  // 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 {
+    selectedRowIndex,
+    selectedColumnIndex
+  } = getSelectedRowAndColumnFromPalette(highlightColorPalette, highlightState.activeColor);
+  return jsx(Flex, {
+    alignItems: "center"
+  }, jsx(Dropdown, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown,
+    zIndex: akEditorMenuZIndex,
+    fitWidth: fitWidth,
+    closeOnTab: true,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.COLOR,
+      selectedRowIndex,
+      selectedColumnIndex,
+      isOpenedByKeyboard,
+      isPopupPositioned: true
+    },
+    trigger: jsx(ToolbarButton, {
+      buttonId: TOOLBAR_BUTTON.HIGHLIGHT,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": toolbarButtonLabel,
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: toolbarButtonLabel,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), jsx("span", {
+        css: expandIconWrapperStyle
+      }, jsx(ExpandIcon, {
+        label: ""
+      })))
+    })
+  }, jsx("div", {
+    "data-testid": "highlight-color-palette"
+  }, jsx(ColorPalette, {
+    onClick: color => handleColorChange(color),
+    selectedColor: highlightState.activeColor,
+    paletteOptions: {
+      palette: highlightColorPalette,
+      hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
+    }
+  }))), jsx("span", {
+    css: separatorStyles
+  }));
+};
+export const ToolbarHighlightColorWithIntl = injectIntl(ToolbarHighlightColor);

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

@@ -0,0 +1,29 @@
+// import {
+//   ACTION,
+//   ACTION_SUBJECT,
+//   ACTION_SUBJECT_ID,
+//   EVENT_TYPE,
+// } from '@atlaskit/editor-common/analytics';
+
+import { HighlightPluginAction, highlightPluginKey } from '../pm-plugin';
+export var changeColor = function changeColor(_editorAnalyticsAPI) {
+  return function (_ref) {
+    var color = _ref.color;
+    return function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(highlightPluginKey, {
+        type: HighlightPluginAction.CHANGE_COLOR,
+        color: color
+      });
+
+      // editorAnalyticsAPI?.attachAnalyticsEvent({
+      //   action: ACTION.FORMATTED,
+      //   actionSubject: ACTION_SUBJECT.TEXT,
+      //   actionSubjectId: ACTION_SUBJECT_ID.HIGHLIGHT,
+      //   eventType: EVENT_TYPE.TRACK,
+      // })(tr);
+
+      return tr;
+    };
+  };
+};

package/dist/esm/commands/index.js

@@ -0,0 +1 @@
+export { changeColor } from './change-color';

package/dist/esm/plugin.js

@@ -1,9 +1,17 @@
+import React from 'react';
 import { backgroundColor } from '@atlaskit/adf-schema';
+import { changeColor } from './commands';
 import { createPlugin, highlightPluginKey } from './pm-plugin';
+import { ToolbarHighlightColorWithIntl as ToolbarHighlightColor } from './ui/ToolbarHighlightColor';
 export var highlightPlugin = function highlightPlugin(_ref) {
+  var _api$analytics;
   var api = _ref.api;
+  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {
     name: 'highlight',
+    commands: {
+      changeColor: changeColor(editorAnalyticsAPI)
+    },
     marks: function marks() {
       return [{
         name: 'backgroundColor',
@@ -25,9 +33,24 @@ export var highlightPlugin = function highlightPlugin(_ref) {
         return;
       }
       return highlightPluginKey.getState(editorState);
-    } // Add highlight toolbar button to primary toolbar
-    // primaryToolbarComponent({ disabled }) {
-    // TODO: Implement primary toolbar UI
-    // },
+    },
+    primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
+      var editorView = _ref2.editorView,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsBoundariesElement = _ref2.popupsBoundariesElement,
+        popupsScrollableElement = _ref2.popupsScrollableElement,
+        disabled = _ref2.disabled,
+        isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
+        dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+      return /*#__PURE__*/React.createElement(ToolbarHighlightColor, {
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        disabled: disabled,
+        isToolbarReducedSpacing: isToolbarReducedSpacing,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        pluginInjectionApi: api
+      });
+    }
   };
 };

package/dist/esm/pm-plugin.js

@@ -1,9 +1,40 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 export var highlightPluginKey = new PluginKey('highlight');
+var initialState = {
+  activeColor: REMOVE_HIGHLIGHT_COLOR,
+  disabled: false // TODO: Should probably be true, but we can tackle it once we tackle disabled state
+};
+export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
+  HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
+  return HighlightPluginAction;
+}({});
 export var createPlugin = function createPlugin(_ref) {
   var api = _ref.api;
   return new SafePlugin({
-    key: highlightPluginKey
+    key: highlightPluginKey,
+    state: {
+      init: function init() {
+        return initialState;
+      },
+      apply: function apply(tr, pluginState) {
+        var _tr$getMeta;
+        var action = (_tr$getMeta = tr.getMeta(highlightPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type;
+        switch (action) {
+          case HighlightPluginAction.CHANGE_COLOR:
+            var _tr$getMeta2 = tr.getMeta(highlightPluginKey),
+              color = _tr$getMeta2.color;
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              activeColor: color
+            });
+          default:
+            return pluginState;
+        }
+      }
+    }
   });
 };

package/dist/esm/ui/EditorHighlightIcon.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SteppedRainbowIconDecoration } from '@atlaskit/editor-common/icons';
+import EditFilledIcon from '@atlaskit/icon/glyph/edit-filled';
+import { Box } from '@atlaskit/primitives';
+export var EditorHighlightIcon = function EditorHighlightIcon(_ref) {
+  var disabled = _ref.disabled,
+    selectedColor = _ref.selectedColor;
+  return /*#__PURE__*/React.createElement(Box, {
+    paddingInline: "space.050"
+  }, /*#__PURE__*/React.createElement(SteppedRainbowIconDecoration, {
+    selectedColor: selectedColor,
+    disabled: disabled,
+    icon: /*#__PURE__*/React.createElement(EditFilledIcon, {
+      size: "small",
+      label: ""
+    })
+  }));
+};

package/dist/esm/ui/ToolbarHighlightColor.js

@@ -0,0 +1,154 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+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 { highlightMessages as messages } from '@atlaskit/editor-common/messages';
+import { expandIconWrapperStyle, separatorStyles } from '@atlaskit/editor-common/styles';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } 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 { Flex } from '@atlaskit/primitives';
+import { changeColor } 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;
+  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];
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['highlight']),
+    highlightState = _useSharedPluginState.highlightState;
+  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.HIGHLIGHT,
+      eventType: EVENT_TYPE.TRACK
+    });
+    setIsDropdownOpen(isOpen);
+  };
+  var toggleDropdown = function toggleDropdown() {
+    return setDropdownOpen(!isDropdownOpen);
+  };
+  var handleClick = function handleClick() {
+    setIsOpenedByKeyboard(false);
+    toggleDropdown();
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setIsOpenedByKeyboard(true);
+      toggleDropdown();
+    }
+  };
+  var handleClickOutside = function handleClickOutside() {
+    if (isDropdownOpen) {
+      setDropdownOpen(false);
+      setIsOpenedByKeyboard(false);
+    }
+  };
+  var handleEscapeKeydown = function handleEscapeKeydown() {
+    if (isDropdownOpen) {
+      var _toolbarItemRef$curre;
+      setDropdownOpen(false);
+      setIsOpenedByKeyboard(false);
+      toolbarItemRef === null || toolbarItemRef === void 0 || (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 || _toolbarItemRef$curre.focus();
+    }
+  };
+  var handleColorChange = function handleColorChange(color) {
+    var _pluginInjectionApi$c, _pluginInjectionApi$a;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(changeColor(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)({
+      color: color
+    }));
+    setDropdownOpen(false);
+  };
+
+  // Don't render the toolbar option while the plugin is initialising
+  if (!highlightState) {
+    return null;
+  }
+  var toolbarButtonLabel = formatMessage(messages.highlight);
+
+  // Get the design token for the  active color (if it exists) to modify the toolbar
+  // icon, but show the nice rainbow if none is selected
+  var activeColorToken = highlightState.activeColor === REMOVE_HIGHLIGHT_COLOR ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
+
+  // 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),
+    selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
+    selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
+  return jsx(Flex, {
+    alignItems: "center"
+  }, jsx(Dropdown, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    isOpen: isDropdownOpen && !highlightState.disabled,
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: handleEscapeKeydown,
+    zIndex: akEditorMenuZIndex,
+    fitWidth: fitWidth,
+    closeOnTab: true,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.COLOR,
+      selectedRowIndex: selectedRowIndex,
+      selectedColumnIndex: selectedColumnIndex,
+      isOpenedByKeyboard: isOpenedByKeyboard,
+      isPopupPositioned: true
+    },
+    trigger: jsx(ToolbarButton, {
+      buttonId: TOOLBAR_BUTTON.HIGHLIGHT,
+      spacing: isToolbarReducedSpacing ? 'none' : 'default',
+      disabled: disabled || highlightState.disabled,
+      selected: isDropdownOpen,
+      "aria-label": toolbarButtonLabel,
+      "aria-expanded": isDropdownOpen,
+      "aria-haspopup": true,
+      title: toolbarButtonLabel,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: toolbarItemRef,
+      iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
+        selectedColor: activeColorToken,
+        disabled: highlightState.disabled
+      }), jsx("span", {
+        css: expandIconWrapperStyle
+      }, jsx(ExpandIcon, {
+        label: ""
+      })))
+    })
+  }, jsx("div", {
+    "data-testid": "highlight-color-palette"
+  }, jsx(ColorPalette, {
+    onClick: function onClick(color) {
+      return handleColorChange(color);
+    },
+    selectedColor: highlightState.activeColor,
+    paletteOptions: {
+      palette: highlightColorPalette,
+      hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
+    }
+  }))), jsx("span", {
+    css: separatorStyles
+  }));
+};
+export var ToolbarHighlightColorWithIntl = injectIntl(ToolbarHighlightColor);

package/dist/types/commands/change-color.d.ts

@@ -0,0 +1,5 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const changeColor: (_editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ color }: {
+    color: string;
+}) => EditorCommand;

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

@@ -0,0 +1 @@
+export { changeColor } from './change-color';

package/dist/types/index.d.ts

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

package/dist/types/pm-plugin.d.ts

@@ -2,9 +2,14 @@ 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';
-export interface HighlightPluginState {
-}
 export declare const highlightPluginKey: PluginKey<HighlightPluginState>;
+export type HighlightPluginState = {
+    activeColor: string;
+    disabled: boolean;
+};
+export declare enum HighlightPluginAction {
+    CHANGE_COLOR = 0
+}
 export declare const createPlugin: ({ api, }: {
     api: ExtractInjectionAPI<HighlightPlugin> | undefined;
-}) => SafePlugin<any>;
+}) => SafePlugin<HighlightPluginState>;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type EditorHighlightIconProps = {
+    disabled: boolean;
+    selectedColor?: string | null;
+};
+export declare const EditorHighlightIcon: ({ disabled, selectedColor, }: EditorHighlightIconProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+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 { HighlightPlugin } from '../plugin';
+export declare const ToolbarHighlightColorWithIntl: React.FC<import("react-intl-next").WithIntlProps<{
+    popupsMountPoint?: HTMLElement | undefined;
+    popupsBoundariesElement?: HTMLElement | undefined;
+    popupsScrollableElement?: HTMLElement | undefined;
+    disabled: boolean;
+    isToolbarReducedSpacing: boolean;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<{
+        popupsMountPoint?: HTMLElement | undefined;
+        popupsBoundariesElement?: HTMLElement | undefined;
+        popupsScrollableElement?: HTMLElement | undefined;
+        disabled: boolean;
+        isToolbarReducedSpacing: boolean;
+        dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+        pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    } & WrappedComponentProps>;
+};

package/dist/types-ts4.5/commands/change-color.d.ts

@@ -0,0 +1,5 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const changeColor: (_editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ color }: {
+    color: string;
+}) => EditorCommand;

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

@@ -0,0 +1 @@
+export { changeColor } from './change-color';

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

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

package/dist/types-ts4.5/pm-plugin.d.ts

@@ -2,9 +2,14 @@ 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';
-export interface HighlightPluginState {
-}
 export declare const highlightPluginKey: PluginKey<HighlightPluginState>;
+export type HighlightPluginState = {
+    activeColor: string;
+    disabled: boolean;
+};
+export declare enum HighlightPluginAction {
+    CHANGE_COLOR = 0
+}
 export declare const createPlugin: ({ api, }: {
     api: ExtractInjectionAPI<HighlightPlugin> | undefined;
-}) => SafePlugin<any>;
+}) => SafePlugin<HighlightPluginState>;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type EditorHighlightIconProps = {
+    disabled: boolean;
+    selectedColor?: string | null;
+};
+export declare const EditorHighlightIcon: ({ disabled, selectedColor, }: EditorHighlightIconProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+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 { HighlightPlugin } from '../plugin';
+export declare const ToolbarHighlightColorWithIntl: React.FC<import("react-intl-next").WithIntlProps<{
+    popupsMountPoint?: HTMLElement | undefined;
+    popupsBoundariesElement?: HTMLElement | undefined;
+    popupsScrollableElement?: HTMLElement | undefined;
+    disabled: boolean;
+    isToolbarReducedSpacing: boolean;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+    pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<{
+        popupsMountPoint?: HTMLElement | undefined;
+        popupsBoundariesElement?: HTMLElement | undefined;
+        popupsScrollableElement?: HTMLElement | undefined;
+        disabled: boolean;
+        isToolbarReducedSpacing: boolean;
+        dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+        pluginInjectionApi: ExtractInjectionAPI<HighlightPlugin> | undefined;
+    } & WrappedComponentProps>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-highlight",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "description": "Highlight plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -39,17 +39,23 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^36.1.0",
-    "@atlaskit/editor-common": "^79.2.0",
+    "@atlaskit/editor-common": "^80.0.0",
+    "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
     "@atlaskit/editor-plugin-text-formatting": "^1.4.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
-    "@babel/runtime": "^7.0.0"
+    "@atlaskit/editor-shared-styles": "^2.10.0",
+    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/primitives": "^6.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0",
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/tokens": "^1.46.0",
+    "@atlaskit/tokens": "^1.48.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "typescript": "~5.4.2"
   },