@atlaskit/editor-plugin-highlight 1.11.2 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-highlight
 
+## 1.12.0
+
+### Minor Changes
+
+- [#116586](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116586)
+  [`3e6333e4a0fbd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3e6333e4a0fbd) -
+  [ED-23761] Add analytics for floating toolbar text highlighting experiment
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.11.3
+
+### Patch Changes
+
+- [#114293](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114293)
+  [`7bc5c84260d3d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7bc5c84260d3d) -
+  [ux] [ED-23902] Moving dropdown caret of floating toolbar Highlight button to the right hand side
+  of the button
+
 ## 1.11.2
 
 ### Patch Changes

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

@@ -11,14 +11,15 @@ var _main = require("../pm-plugins/main");
 var _color = require("../utils/color");
 var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI) {
   return function (_ref) {
-    var color = _ref.color;
+    var color = _ref.color,
+      inputMethod = _ref.inputMethod;
     return function (_ref2) {
       var tr = _ref2.tr;
       var backgroundColor = tr.doc.type.schema.marks.backgroundColor;
       if (!backgroundColor) {
         return null;
       }
-      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, tr))(tr);
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, inputMethod, tr))(tr);
       tr.scrollIntoView();
       if (color === _uiColor.REMOVE_HIGHLIGHT_COLOR) {
         (0, _mark.removeMark)(backgroundColor)({
@@ -39,7 +40,7 @@ var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI)
     };
   };
 };
-var createAnalyticsEvent = function createAnalyticsEvent(color, tr) {
+var createAnalyticsEvent = function createAnalyticsEvent(color, inputMethod, tr) {
   var _getActiveColor;
   var previousColor = (_getActiveColor = (0, _color.getActiveColor)(tr)) !== null && _getActiveColor !== void 0 ? _getActiveColor : _uiColor.REMOVE_HIGHLIGHT_COLOR;
   // get color names from palette
@@ -60,7 +61,8 @@ var createAnalyticsEvent = function createAnalyticsEvent(color, tr) {
     eventType: _analytics.EVENT_TYPE.TRACK,
     attributes: {
       newColor: newColorLabel.toLowerCase(),
-      previousColor: previousColorLabel ? previousColorLabel.toLowerCase() : ''
+      previousColor: previousColorLabel ? previousColorLabel.toLowerCase() : '',
+      inputMethod: inputMethod
     }
   };
 };

package/dist/cjs/commands/index.js

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

package/dist/cjs/commands/palette.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.togglePalette = exports.setPalette = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _main = require("../pm-plugins/main");
+var togglePalette = exports.togglePalette = function togglePalette(api) {
+  return function (_ref) {
+    var inputMethod = _ref.inputMethod;
+    return function (state, dispatch) {
+      var _highlightPluginKey$g;
+      var isPaletteOpen = (_highlightPluginKey$g = _main.highlightPluginKey.getState(state)) === null || _highlightPluginKey$g === void 0 ? void 0 : _highlightPluginKey$g.isPaletteOpen;
+      return setPalette(api)({
+        isPaletteOpen: !isPaletteOpen,
+        inputMethod: inputMethod
+      })(state, dispatch);
+    };
+  };
+};
+var setPalette = exports.setPalette = function setPalette(api) {
+  return function (_ref2) {
+    var isPaletteOpen = _ref2.isPaletteOpen,
+      inputMethod = _ref2.inputMethod;
+    return function (state, dispatch) {
+      var _highlightPluginKey$g2;
+      var isDisabled = (_highlightPluginKey$g2 = _main.highlightPluginKey.getState(state)) === null || _highlightPluginKey$g2 === void 0 ? void 0 : _highlightPluginKey$g2.disabled;
+      if (!isDisabled) {
+        var _api$analytics;
+        var tr = state.tr;
+        tr.setMeta(_main.highlightPluginKey, {
+          type: _main.HighlightPluginAction.SET_PALETTE,
+          isPaletteOpen: isPaletteOpen
+        });
+        (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent(createAnalyticsEvent(isPaletteOpen, inputMethod))(tr);
+        if (dispatch) {
+          dispatch(tr);
+        }
+        return true;
+      }
+      return false;
+    };
+  };
+};
+var createAnalyticsEvent = function createAnalyticsEvent(isPaletteOpen, inputMethod) {
+  return {
+    action: isPaletteOpen ? _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: inputMethod
+    }
+  };
+};

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

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.keymapPlugin = keymapPlugin;
+var _analytics = require("@atlaskit/editor-common/analytics");
 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);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleHighlightPalette.common, (0, _commands.togglePalette)(api)({
+    inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+  }), list);
   return (0, _keymaps.keymap)(list);
 }

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

@@ -15,7 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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";
+  HighlightPluginAction[HighlightPluginAction["SET_PALETTE"] = 1] = "SET_PALETTE";
   return HighlightPluginAction;
 }({});
 var createPlugin = exports.createPlugin = function createPlugin(_ref) {
@@ -40,7 +40,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
             return _objectSpread(_objectSpread({}, pluginState), {}, {
               activeColor: color
             });
-          case HighlightPluginAction.TOGGLE_PALETTE:
+          case HighlightPluginAction.SET_PALETTE:
             var _tr$getMeta3 = tr.getMeta(highlightPluginKey),
               isPaletteOpen = _tr$getMeta3.isPaletteOpen;
             return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/cjs/ui/FloatingToolbarHighlightColor.js

@@ -9,13 +9,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = 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 _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _primitives = require("@atlaskit/primitives");
 var _EditorHighlightIcon = require("./shared/EditorHighlightIcon");
 var _PaletteDropdown = require("./shared/PaletteDropdown");
 var _useDropdownEvents2 = require("./shared/useDropdownEvents");
@@ -23,19 +22,38 @@ var _useDropdownEvents2 = require("./shared/useDropdownEvents");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var expandIconContainerStyle = (0, _react2.css)({
+  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+});
+var highlightIconContainerStyle = (0, _react2.css)({
+  marginTop: "var(--ds-space-negative-050, -4px)"
+});
 var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     formatMessage = _ref.intl.formatMessage;
   var toolbarItemRef = (0, _react.useRef)(null);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
-    highlightState = _useSharedPluginState.highlightState;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isDropdownOpen = _useState2[0],
     setIsDropdownOpen = _useState2[1];
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
+    highlightState = _useSharedPluginState.highlightState;
+  var setDropdownOpen = function setDropdownOpen(isOpen) {
+    var _pluginInjectionApi$a;
+    setIsDropdownOpen(isOpen);
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.fireAnalyticsEvent({
+      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.FLOATING_TB
+      }
+    });
+  };
   var _useDropdownEvents = (0, _useDropdownEvents2.useDropdownEvents)({
       toolbarItemRef: toolbarItemRef,
-      setIsDropdownOpen: setIsDropdownOpen,
+      setIsDropdownOpen: setDropdownOpen,
       isDropdownOpen: isDropdownOpen,
       pluginInjectionApi: pluginInjectionApi
     }),
@@ -55,9 +73,7 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
   // 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 === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
-  return (0, _react2.jsx)(_primitives.Flex, {
-    alignItems: "center"
-  }, (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
+  return (0, _react2.jsx)(_PaletteDropdown.PaletteDropdown, {
     isOpen: isDropdownOpen && !highlightState.disabled,
     activeColor: highlightState.activeColor,
     trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
@@ -72,21 +88,27 @@ var FloatingToolbarHighlightColor = function FloatingToolbarHighlightColor(_ref)
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
-      iconBefore: (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
+      iconBefore: (0, _react2.jsx)("span", {
+        css: highlightIconContainerStyle
+      }, (0, _react2.jsx)(_EditorHighlightIcon.EditorHighlightIcon, {
         selectedColor: activeColorToken,
         disabled: highlightState.disabled
-      }), (0, _react2.jsx)("span", {
-        css: _styles.expandIconWrapperStyle
+      })),
+      iconAfter: (0, _react2.jsx)("span", {
+        css: expandIconContainerStyle
       }, (0, _react2.jsx)(_chevronDown.default, {
         label: ""
-      })))
+      }))
     }, formatMessage(_messages.highlightMessages.highlightFloatingToolbar)),
     onColorChange: function onColorChange(color) {
-      return handleColorChange(color);
+      return handleColorChange({
+        color: color,
+        inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
+      });
     },
     isOpenedByKeyboard: isOpenedByKeyboard,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: handleEscapeKeydown
-  }));
+  });
 };
 var FloatingToolbarHighlightColorWithIntl = exports.FloatingToolbarHighlightColorWithIntl = (0, _reactIntlNext.injectIntl)(FloatingToolbarHighlightColor);

package/dist/cjs/ui/PrimaryToolbarHighlightColor.js

@@ -8,6 +8,7 @@ exports.PrimaryToolbarHighlightColorWithIntl = void 0;
 var _react = 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");
@@ -36,17 +37,20 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
   var toolbarItemRef = (0, _react.useRef)(null);
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['highlight']),
     highlightState = _useSharedPluginState.highlightState;
-  var setDropdownOpen = function setDropdownOpen(isOpen) {
+  var setIsDropdownOpen = function setIsDropdownOpen(isOpen) {
     if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      (0, _commands.setPalette)(pluginInjectionApi, isOpen)(state, dispatch);
+      (0, _commands.setPalette)(pluginInjectionApi)({
+        isPaletteOpen: isOpen,
+        inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+      })(state, dispatch);
     }
   };
   var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
   var _useDropdownEvents = (0, _useDropdownEvents2.useDropdownEvents)({
       toolbarItemRef: toolbarItemRef,
-      setIsDropdownOpen: setDropdownOpen,
+      setIsDropdownOpen: setIsDropdownOpen,
       isDropdownOpen: isDropdownOpen,
       pluginInjectionApi: pluginInjectionApi
     }),
@@ -97,7 +101,10 @@ var PrimaryToolbarHighlightColor = function PrimaryToolbarHighlightColor(_ref) {
       })))
     }),
     onColorChange: function onColorChange(color) {
-      return handleColorChange(color);
+      return handleColorChange({
+        color: color,
+        inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+      });
     },
     isOpenedByKeyboard: isOpenedByKeyboard,
     handleClickOutside: handleClickOutside,

package/dist/cjs/ui/ToolbarHighlightColor.js

@@ -10,6 +10,7 @@ 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");
@@ -45,14 +46,17 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
     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) {
     if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      (0, _commands.setPalette)(pluginInjectionApi, isOpen)(state, dispatch);
+      (0, _commands.setPalette)(pluginInjectionApi)({
+        isPaletteOpen: isOpen,
+        inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+      })(state, dispatch);
     }
   };
+  var isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
   var toggleDropdown = function toggleDropdown() {
     return setDropdownOpen(!isDropdownOpen);
   };
@@ -84,7 +88,8 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
   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
+      color: color,
+      inputMethod: _analytics.INPUT_METHOD.TOOLBAR
     }));
     setDropdownOpen(false);
   };

package/dist/cjs/ui/shared/useDropdownEvents.js

@@ -43,10 +43,13 @@ var useDropdownEvents = exports.useDropdownEvents = function useDropdownEvents(a
         toolbarItemRef === null || toolbarItemRef === void 0 || (_toolbarItemRef$curre = toolbarItemRef.current) === null || _toolbarItemRef$curre === void 0 || _toolbarItemRef$curre.focus();
       }
     },
-    handleColorChange: function handleColorChange(color) {
+    handleColorChange: function handleColorChange(_ref) {
       var _pluginInjectionApi$c, _pluginInjectionApi$a;
+      var color = _ref.color,
+        inputMethod = _ref.inputMethod;
       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
+        color: color,
+        inputMethod: inputMethod
       }));
       setIsDropdownOpen(false);
     },

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

@@ -4,7 +4,8 @@ import { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-
 import { HighlightPluginAction, highlightPluginKey } from '../pm-plugins/main';
 import { getActiveColor } from '../utils/color';
 export const changeColor = editorAnalyticsAPI => ({
-  color
+  color,
+  inputMethod
 }) => ({
   tr
 }) => {
@@ -14,7 +15,7 @@ export const changeColor = editorAnalyticsAPI => ({
   if (!backgroundColor) {
     return null;
   }
-  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, tr))(tr);
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, inputMethod, tr))(tr);
   tr.scrollIntoView();
   if (color === REMOVE_HIGHLIGHT_COLOR) {
     removeMark(backgroundColor)({
@@ -33,7 +34,7 @@ export const changeColor = editorAnalyticsAPI => ({
   }
   return tr;
 };
-const createAnalyticsEvent = (color, tr) => {
+const createAnalyticsEvent = (color, inputMethod, tr) => {
   var _getActiveColor;
   const previousColor = (_getActiveColor = getActiveColor(tr)) !== null && _getActiveColor !== void 0 ? _getActiveColor : REMOVE_HIGHLIGHT_COLOR;
   // get color names from palette
@@ -52,7 +53,8 @@ const createAnalyticsEvent = (color, tr) => {
     eventType: EVENT_TYPE.TRACK,
     attributes: {
       newColor: newColorLabel.toLowerCase(),
-      previousColor: previousColorLabel ? previousColorLabel.toLowerCase() : ''
+      previousColor: previousColorLabel ? previousColorLabel.toLowerCase() : '',
+      inputMethod
     }
   };
 };

package/dist/es2019/commands/index.js

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

package/dist/es2019/commands/palette.js

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

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

@@ -1,9 +1,12 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 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);
+  bindKeymapWithCommand(toggleHighlightPalette.common, togglePalette(api)({
+    inputMethod: INPUT_METHOD.SHORTCUT
+  }), list);
   return keymap(list);
 }

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

@@ -5,7 +5,7 @@ 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";
+  HighlightPluginAction[HighlightPluginAction["SET_PALETTE"] = 1] = "SET_PALETTE";
   return HighlightPluginAction;
 }({});
 export const createPlugin = ({
@@ -31,7 +31,7 @@ export const createPlugin = ({
               ...pluginState,
               activeColor: color
             };
-          case HighlightPluginAction.TOGGLE_PALETTE:
+          case HighlightPluginAction.SET_PALETTE:
             const {
               isPaletteOpen
             } = tr.getMeta(highlightPluginKey);

package/dist/es2019/ui/FloatingToolbarHighlightColor.js

@@ -2,18 +2,23 @@
 import { useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
-import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
 import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { Flex } from '@atlaskit/primitives';
 import { EditorHighlightIcon } from './shared/EditorHighlightIcon';
 import { PaletteDropdown } from './shared/PaletteDropdown';
 import { useDropdownEvents } from './shared/useDropdownEvents';
+const expandIconContainerStyle = css({
+  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
+});
+const highlightIconContainerStyle = css({
+  marginTop: "var(--ds-space-negative-050, -4px)"
+});
 const FloatingToolbarHighlightColor = ({
   pluginInjectionApi,
   intl: {
@@ -21,10 +26,23 @@ const FloatingToolbarHighlightColor = ({
   }
 }) => {
   const toolbarItemRef = useRef(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const {
     highlightState
   } = useSharedPluginState(pluginInjectionApi, ['highlight']);
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const setDropdownOpen = isOpen => {
+    var _pluginInjectionApi$a;
+    setIsDropdownOpen(isOpen);
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent({
+      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.FLOATING_TB
+      }
+    });
+  };
   const {
     handleClick,
     handleKeyDown,
@@ -34,7 +52,7 @@ const FloatingToolbarHighlightColor = ({
     isOpenedByKeyboard
   } = useDropdownEvents({
     toolbarItemRef,
-    setIsDropdownOpen,
+    setIsDropdownOpen: setDropdownOpen,
     isDropdownOpen,
     pluginInjectionApi
   });
@@ -48,9 +66,7 @@ const FloatingToolbarHighlightColor = ({
   // 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 === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
-  return jsx(Flex, {
-    alignItems: "center"
-  }, jsx(PaletteDropdown, {
+  return jsx(PaletteDropdown, {
     isOpen: isDropdownOpen && !highlightState.disabled,
     activeColor: highlightState.activeColor,
     trigger: jsx(ToolbarButton, {
@@ -65,19 +81,25 @@ const FloatingToolbarHighlightColor = ({
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       ref: toolbarItemRef,
-      iconBefore: jsx(Flex, null, jsx(EditorHighlightIcon, {
+      iconBefore: jsx("span", {
+        css: highlightIconContainerStyle
+      }, jsx(EditorHighlightIcon, {
         selectedColor: activeColorToken,
         disabled: highlightState.disabled
-      }), jsx("span", {
-        css: expandIconWrapperStyle
+      })),
+      iconAfter: jsx("span", {
+        css: expandIconContainerStyle
       }, jsx(ExpandIcon, {
         label: ""
-      })))
+      }))
     }, formatMessage(messages.highlightFloatingToolbar)),
-    onColorChange: color => handleColorChange(color),
+    onColorChange: color => handleColorChange({
+      color,
+      inputMethod: INPUT_METHOD.FLOATING_TB
+    }),
     isOpenedByKeyboard: isOpenedByKeyboard,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: handleEscapeKeydown
-  }));
+  });
 };
 export const FloatingToolbarHighlightColorWithIntl = injectIntl(FloatingToolbarHighlightColor);

package/dist/es2019/ui/PrimaryToolbarHighlightColor.js

@@ -4,6 +4,7 @@ import { useRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
+import { INPUT_METHOD } 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';
@@ -32,13 +33,16 @@ const PrimaryToolbarHighlightColor = ({
   const {
     highlightState
   } = useSharedPluginState(pluginInjectionApi, ['highlight']);
-  const setDropdownOpen = isOpen => {
+  const setIsDropdownOpen = isOpen => {
     if (!(highlightState !== null && highlightState !== void 0 && highlightState.disabled)) {
       const {
         state,
         dispatch
       } = editorView;
-      setPalette(pluginInjectionApi, isOpen)(state, dispatch);
+      setPalette(pluginInjectionApi)({
+        isPaletteOpen: isOpen,
+        inputMethod: INPUT_METHOD.TOOLBAR
+      })(state, dispatch);
     }
   };
   const isDropdownOpen = !!(highlightState !== null && highlightState !== void 0 && highlightState.isPaletteOpen);
@@ -51,7 +55,7 @@ const PrimaryToolbarHighlightColor = ({
     isOpenedByKeyboard
   } = useDropdownEvents({
     toolbarItemRef,
-    setIsDropdownOpen: setDropdownOpen,
+    setIsDropdownOpen,
     isDropdownOpen,
     pluginInjectionApi
   });
@@ -95,7 +99,10 @@ const PrimaryToolbarHighlightColor = ({
         label: ""
       })))
     }),
-    onColorChange: color => handleColorChange(color),
+    onColorChange: color => handleColorChange({
+      color,
+      inputMethod: INPUT_METHOD.TOOLBAR
+    }),
     isOpenedByKeyboard: isOpenedByKeyboard,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: handleEscapeKeydown