@atlaskit/editor-plugin-highlight 3.0.8 → 3.0.10

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-highlight
 
+## 3.0.10
+
+### Patch Changes
+
+- [#197017](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197017)
+  [`5ef01d09bada1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ef01d09bada1) -
+  [ux] ED-28687 [Register] Text colour + highlight
+- Updated dependencies
+
+## 3.0.9
+
+### Patch Changes
+
+- [#195649](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195649)
+  [`231bb33e06dfe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/231bb33e06dfe) -
+  EDITOR-1131 Bump adf-schema version to 50.2.0
+- Updated dependencies
+
 ## 3.0.8
 
 ### Patch Changes

package/dist/cjs/highlightPlugin.js

@@ -8,17 +8,20 @@ exports.highlightPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _changeColor = require("./editor-commands/change-color");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _FloatingToolbarHighlightColor = require("./ui/FloatingToolbarHighlightColor");
 var _PrimaryToolbarHighlightColor = require("./ui/PrimaryToolbarHighlightColor");
+var _toolbarComponent = require("./ui/toolbar-component");
 var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
-  var _api$analytics, _api$primaryToolbar;
+  var _api$analytics;
   var api = _ref.api,
     options = _ref.config;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var isToolbarAifcEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true);
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var popupsMountPoint = _ref2.popupsMountPoint,
       popupsBoundariesElement = _ref2.popupsBoundariesElement,
@@ -36,10 +39,16 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
       editorView: editorView
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'highlight',
-    component: primaryToolbarComponent
-  });
+  if (!isToolbarAifcEnabled) {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'highlight',
+      component: primaryToolbarComponent
+    });
+  } else {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponent.getToolbarComponent)(api));
+  }
   return {
     name: 'highlight',
     marks: function marks() {
@@ -74,7 +83,7 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
       }
       return _main.highlightPluginKey.getState(editorState);
     },
-    pluginsOptions: {
+    pluginsOptions: !isToolbarAifcEnabled ? {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
@@ -103,7 +112,7 @@ var highlightPlugin = exports.highlightPlugin = function highlightPlugin(_ref) {
           return undefined;
         }
       }
-    },
+    } : {},
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/cjs/ui/HighlightColorMenuItem.compiled.css

@@ -0,0 +1,7 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}

package/dist/cjs/ui/HighlightColorMenuItem.js

@@ -0,0 +1,51 @@
+/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HighlightColorMenuItem = HighlightColorMenuItem;
+require("./HighlightColorMenuItem.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  container: "_zulpu2gc _19pkpxbi",
+  colorPalette: "_18u0x0bf",
+  removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
+};
+var colorPalette = _uiColor.highlightColorPaletteNext.filter(function (color) {
+  return color.label !== 'No color';
+});
+function HighlightColorMenuItem(_ref) {
+  var api = _ref.api;
+  var activeColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
+  return /*#__PURE__*/React.createElement(_editorToolbar.ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(_compiled.Stack, {
+    xcss: styles.container,
+    testId: "highlight-color-menu-item"
+  }, /*#__PURE__*/React.createElement(_compiled.Text, {
+    weight: "bold"
+  }, "Highlight color"), /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.colorPalette
+  }, /*#__PURE__*/React.createElement(_uiColor.ColorPalette, {
+    onClick: function onClick() {},
+    selectedColor: activeColor || null,
+    paletteOptions: {
+      palette: colorPalette || [],
+      hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.removeHighlightButton])
+  }, /*#__PURE__*/React.createElement(_new.default, {
+    shouldFitContainer: true,
+    appearance: "subtle"
+  }, "Remove highlight"))));
+}

package/dist/cjs/ui/toolbar-component.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponent = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _HighlightColorMenuItem = require("./HighlightColorMenuItem");
+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 getToolbarComponent = exports.getToolbarComponent = function getToolbarComponent(api) {
+  return [_objectSpread(_objectSpread({}, _toolbar.HIGHLIGHT_MENU_ITEM), {}, {
+    parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+      rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[_toolbar.HIGHLIGHT_MENU_ITEM.key]
+    })],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_HighlightColorMenuItem.HighlightColorMenuItem, {
+        api: api
+      });
+    }
+  })];
+};

package/dist/es2019/highlightPlugin.js

@@ -1,18 +1,21 @@
 import React from 'react';
 import { backgroundColor } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeColor } from './editor-commands/change-color';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, highlightPluginKey } from './pm-plugins/main';
 import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
 import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
+import { getToolbarComponent } from './ui/toolbar-component';
 export const highlightPlugin = ({
   api,
   config: options
 }) => {
-  var _api$analytics, _api$primaryToolbar;
+  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;
+  const isToolbarAifcEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   const primaryToolbarComponent = ({
     popupsMountPoint,
     popupsBoundariesElement,
@@ -31,10 +34,16 @@ export const highlightPlugin = ({
       editorView: editorView
     });
   };
-  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
-    name: 'highlight',
-    component: primaryToolbarComponent
-  });
+  if (!isToolbarAifcEnabled) {
+    var _api$primaryToolbar;
+    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+      name: 'highlight',
+      component: primaryToolbarComponent
+    });
+  } else {
+    var _api$toolbar;
+    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponent(api));
+  }
   return {
     name: 'highlight',
     marks() {
@@ -63,7 +72,7 @@ export const highlightPlugin = ({
       }
       return highlightPluginKey.getState(editorState);
     },
-    pluginsOptions: {
+    pluginsOptions: !isToolbarAifcEnabled ? {
       selectionToolbar() {
         var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
         const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
@@ -90,7 +99,7 @@ export const highlightPlugin = ({
           return undefined;
         }
       }
-    },
+    } : {},
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/es2019/ui/HighlightColorMenuItem.compiled.css

@@ -0,0 +1,7 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}

package/dist/es2019/ui/HighlightColorMenuItem.js

@@ -0,0 +1,41 @@
+/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./HighlightColorMenuItem.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Button from '@atlaskit/button/new';
+import { ColorPalette, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { Stack, Box, Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_zulpu2gc _19pkpxbi",
+  colorPalette: "_18u0x0bf",
+  removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
+};
+const colorPalette = highlightColorPaletteNext.filter(color => color.label !== 'No color');
+export function HighlightColorMenuItem({
+  api
+}) {
+  const activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.container,
+    testId: "highlight-color-menu-item"
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, "Highlight color"), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.colorPalette
+  }, /*#__PURE__*/React.createElement(ColorPalette, {
+    onClick: () => {},
+    selectedColor: activeColor || null,
+    paletteOptions: {
+      palette: colorPalette || [],
+      hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.removeHighlightButton])
+  }, /*#__PURE__*/React.createElement(Button, {
+    shouldFitContainer: true,
+    appearance: "subtle"
+  }, "Remove highlight"))));
+}

package/dist/es2019/ui/toolbar-component.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { HIGHLIGHT_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { HighlightColorMenuItem } from './HighlightColorMenuItem';
+export const getToolbarComponent = api => {
+  return [{
+    ...HIGHLIGHT_MENU_ITEM,
+    parents: [{
+      ...TEXT_COLOR_HIGHLIGHT_MENU_SECTION,
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[HIGHLIGHT_MENU_ITEM.key]
+    }],
+    component: () => /*#__PURE__*/React.createElement(HighlightColorMenuItem, {
+      api: api
+    })
+  }];
+};

package/dist/esm/highlightPlugin.js

@@ -1,17 +1,20 @@
 import React from 'react';
 import { backgroundColor } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeColor } from './editor-commands/change-color';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, highlightPluginKey } from './pm-plugins/main';
 import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
 import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
+import { getToolbarComponent } from './ui/toolbar-component';
 export var highlightPlugin = function highlightPlugin(_ref) {
-  var _api$analytics, _api$primaryToolbar;
+  var _api$analytics;
   var api = _ref.api,
     options = _ref.config;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var isToolbarAifcEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var popupsMountPoint = _ref2.popupsMountPoint,
       popupsBoundariesElement = _ref2.popupsBoundariesElement,
@@ -29,10 +32,16 @@ export var highlightPlugin = function highlightPlugin(_ref) {
       editorView: editorView
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'highlight',
-    component: primaryToolbarComponent
-  });
+  if (!isToolbarAifcEnabled) {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'highlight',
+      component: primaryToolbarComponent
+    });
+  } else {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponent(api));
+  }
   return {
     name: 'highlight',
     marks: function marks() {
@@ -67,7 +76,7 @@ export var highlightPlugin = function highlightPlugin(_ref) {
       }
       return highlightPluginKey.getState(editorState);
     },
-    pluginsOptions: {
+    pluginsOptions: !isToolbarAifcEnabled ? {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
@@ -96,7 +105,7 @@ export var highlightPlugin = function highlightPlugin(_ref) {
           return undefined;
         }
       }
-    },
+    } : {},
     primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };

package/dist/esm/ui/HighlightColorMenuItem.compiled.css

@@ -0,0 +1,7 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}

package/dist/esm/ui/HighlightColorMenuItem.js

@@ -0,0 +1,42 @@
+/* HighlightColorMenuItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./HighlightColorMenuItem.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Button from '@atlaskit/button/new';
+import { ColorPalette, highlightColorPaletteNext } from '@atlaskit/editor-common/ui-color';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { Stack, Box, Text } from '@atlaskit/primitives/compiled';
+var styles = {
+  container: "_zulpu2gc _19pkpxbi",
+  colorPalette: "_18u0x0bf",
+  removeHighlightButton: "_2rkoglpi _189ee4h9 _1dqonqa1 _1h6dmuej"
+};
+var colorPalette = highlightColorPaletteNext.filter(function (color) {
+  return color.label !== 'No color';
+});
+export function HighlightColorMenuItem(_ref) {
+  var api = _ref.api;
+  var activeColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.container,
+    testId: "highlight-color-menu-item"
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, "Highlight color"), /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.colorPalette
+  }, /*#__PURE__*/React.createElement(ColorPalette, {
+    onClick: function onClick() {},
+    selectedColor: activeColor || null,
+    paletteOptions: {
+      palette: colorPalette || [],
+      hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.removeHighlightButton])
+  }, /*#__PURE__*/React.createElement(Button, {
+    shouldFitContainer: true,
+    appearance: "subtle"
+  }, "Remove highlight"))));
+}

package/dist/esm/ui/toolbar-component.js

@@ -0,0 +1,18 @@
+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 React from 'react';
+import { HIGHLIGHT_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { HighlightColorMenuItem } from './HighlightColorMenuItem';
+export var getToolbarComponent = function getToolbarComponent(api) {
+  return [_objectSpread(_objectSpread({}, HIGHLIGHT_MENU_ITEM), {}, {
+    parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[HIGHLIGHT_MENU_ITEM.key]
+    })],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(HighlightColorMenuItem, {
+        api: api
+      });
+    }
+  })];
+};

package/dist/types/highlightPluginType.d.ts

@@ -4,6 +4,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
 import type { TextFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { HighlightPluginState } from './pm-plugins/main';
 export type HighlightPlugin = NextEditorPlugin<'highlight', {
@@ -11,6 +12,7 @@ export type HighlightPlugin = NextEditorPlugin<'highlight', {
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<TextFormattingPlugin>,
         OptionalPlugin<PrimaryToolbarPlugin>,
+        OptionalPlugin<ToolbarPlugin>,
         OptionalPlugin<SelectionToolbarPlugin>,
         OptionalPlugin<UserPreferencesPlugin>
     ];

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

@@ -0,0 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { HighlightPlugin } from '../highlightPluginType';
+interface HighlightMenuItemProps {
+    api: ExtractInjectionAPI<HighlightPlugin> | undefined;
+}
+export declare function HighlightColorMenuItem({ api }: HighlightMenuItemProps): JSX.Element;
+export {};

package/dist/types/ui/toolbar-component.d.ts

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { HighlightPlugin } from '../highlightPluginType';
+export declare const getToolbarComponent: (api: ExtractInjectionAPI<HighlightPlugin> | undefined) => RegisterComponent[];

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

@@ -4,6 +4,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
 import type { TextFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { HighlightPluginState } from './pm-plugins/main';
 export type HighlightPlugin = NextEditorPlugin<'highlight', {
@@ -11,6 +12,7 @@ export type HighlightPlugin = NextEditorPlugin<'highlight', {
         OptionalPlugin<AnalyticsPlugin>,
         OptionalPlugin<TextFormattingPlugin>,
         OptionalPlugin<PrimaryToolbarPlugin>,
+        OptionalPlugin<ToolbarPlugin>,
         OptionalPlugin<SelectionToolbarPlugin>,
         OptionalPlugin<UserPreferencesPlugin>
     ];

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { HighlightPlugin } from '../highlightPluginType';
+interface HighlightMenuItemProps {
+    api: ExtractInjectionAPI<HighlightPlugin> | undefined;
+}
+export declare function HighlightColorMenuItem({ api }: HighlightMenuItemProps): JSX.Element;
+export {};

package/dist/types-ts4.5/ui/toolbar-component.d.ts

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { HighlightPlugin } from '../highlightPluginType';
+export declare const getToolbarComponent: (api: ExtractInjectionAPI<HighlightPlugin> | undefined) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-highlight",
-	"version": "3.0.8",
+	"version": "3.0.10",
 	"description": "Highlight plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,31 +35,33 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^50.0.1",
+		"@atlaskit/adf-schema": "^50.2.0",
+		"@atlaskit/button": "^23.3.0",
+		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^4.2.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
 		"@atlaskit/editor-plugin-text-formatting": "^3.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.5.0",
+		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/editor-toolbar": "^0.1.0",
+		"@atlaskit/editor-toolbar-model": "^0.0.4",
+		"@atlaskit/icon": "^27.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/tmp-editor-statsig": "^9.22.0",
+		"@atlaskit/tmp-editor-statsig": "^9.25.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.16.0",
+		"@atlaskit/editor-common": "^107.19.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
-	"devDependencies": {
-		"typescript": "~5.4.2"
-	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": [