@bigbinary/neeto-editor 1.47.0 → 1.47.1

package/dist/FormikEditor.js

@@ -8,7 +8,7 @@ import Editor from './Editor.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/slicedToArray';
-import './chunk-BWTtXW7N.js';
+import './chunk-CeFnZWjP.js';
 import './chunk-DmrvuTKK.js';
 import 'i18next';
 import '@bigbinary/neeto-icons/TextH1';

package/dist/Menu.js

@@ -3,7 +3,7 @@ import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react';
 import 'ramda';
-export { M as default } from './chunk-BWTtXW7N.js';
+export { M as default } from './chunk-CeFnZWjP.js';
 import './chunk-CftSm0ZU.js';
 import 'react/jsx-runtime';
 import './chunk-DmrvuTKK.js';

package/dist/{chunk-BWTtXW7N.js → chunk-CeFnZWjP.js}

@@ -15699,8 +15699,8 @@ var emojiPickerApi = {
   fetch: fetch
 };
 
-function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn$1(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var EmojiPickerMenu = /*#__PURE__*/function (_React$Component) {
@@ -15752,7 +15752,7 @@ var EmojiPickerMenu = /*#__PURE__*/function (_React$Component) {
   return _createClass$1(EmojiPickerMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      new Picker(_objectSpread$b(_objectSpread$b({}, this.props), {}, {
+      new Picker(_objectSpread$c(_objectSpread$c({}, this.props), {}, {
         onEmojiSelect: this.handleSelect,
         style: {
           maxWidth: "100%"
@@ -15810,8 +15810,8 @@ var useEditorStore = create(withImmutableActions(function (set) {
   };
 }));
 
-function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MenuButton = function MenuButton(_ref) {
   var icon = _ref.icon,
     command = _ref.command,
@@ -15830,7 +15830,7 @@ var MenuButton = function MenuButton(_ref) {
     isActive = _useEditorStore.isActive,
     _useEditorStore$disab = _useEditorStore.disabled,
     disabled = _useEditorStore$disab === void 0 ? isButtonDisabled : _useEditorStore$disab;
-  return /*#__PURE__*/jsx(Button$1, _objectSpread$a({
+  return /*#__PURE__*/jsx(Button$1, _objectSpread$b({
     disabled: disabled,
     icon: icon,
     className: "neeto-editor-fixed-menu__item",
@@ -16041,8 +16041,8 @@ var TableOption$2 = function TableOption(_ref) {
   });
 };
 
-function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createMenuOptions$2 = function createMenuOptions(_ref) {
   var tooltips = _ref.tooltips,
     editor = _ref.editor,
@@ -16286,7 +16286,7 @@ var renderOptionButton = function renderOptionButton(_ref4) {
     active = _ref4.active,
     optionName = _ref4.optionName,
     highlight = _ref4.highlight;
-  return /*#__PURE__*/jsx(Button$1, _objectSpread$9({
+  return /*#__PURE__*/jsx(Button$1, _objectSpread$a({
     "data-cy": "neeto-editor-bubble-menu-".concat(optionName, "-option"),
     icon: Icon,
     size: "small",
@@ -18099,8 +18099,8 @@ var LinkAddPopOver = function LinkAddPopOver(_ref) {
 };
 
 var _excluded$3 = ["type"];
-function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Menu$3 = Dropdown$1.Menu,
   MenuItem$1 = Dropdown$1.MenuItem;
 var MoreMenu = function MoreMenu(_ref) {
@@ -18121,18 +18121,18 @@ var MoreMenu = function MoreMenu(_ref) {
           var Component = MENU_ELEMENTS[type];
           if (type === MENU_ELEMENT_TYPES.BUTTON) {
             var Icon = props.icon;
-            return /*#__PURE__*/jsxs(MenuItem$1.Button, _objectSpread$8(_objectSpread$8({
+            return /*#__PURE__*/jsxs(MenuItem$1.Button, _objectSpread$9(_objectSpread$9({
               "data-cy": "neeto-editor-fixed-menu-".concat(props.optionName, "-option"),
               isActive: editor.isActive(props.optionName),
               tabIndex: "-1",
               onClick: props.command
-            }, _objectSpread$8(_objectSpread$8(_objectSpread$8({}, generateFocusProps(props.highlight)), props), {}, {
+            }, _objectSpread$9(_objectSpread$9(_objectSpread$9({}, generateFocusProps(props.highlight)), props), {}, {
               editor: editor
             })), {}, {
               children: [/*#__PURE__*/jsx(Icon, {}), " ", props.label]
             }), props.optionName);
           }
-          return /*#__PURE__*/jsx(Component, _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, props), {}, {
+          return /*#__PURE__*/jsx(Component, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, props), {}, {
             editor: editor
           }, generateFocusProps(props.highlight))), {}, {
             isSecondaryMenu: true
@@ -18145,8 +18145,8 @@ var MoreMenu = function MoreMenu(_ref) {
 
 var EDITOR_MARKS = [EDITOR_OPTIONS.UNDO, EDITOR_OPTIONS.REDO, "fontSizeOptions", EDITOR_OPTIONS.BOLD, EDITOR_OPTIONS.ITALIC, EDITOR_OPTIONS.UNDERLINE, EDITOR_OPTIONS.LINK, EDITOR_OPTIONS.STRIKETHROUGH, EDITOR_OPTIONS.HIGHLIGHT, "bulletList", "orderedList", "blockquote", EDITOR_OPTIONS.CODE, "codeBlock", EDITOR_OPTIONS.TABLE, EDITOR_OPTIONS.ATTACHMENTS, EDITOR_OPTIONS.IMAGE_UPLOAD, EDITOR_OPTIONS.VIDEO_UPLOAD, EDITOR_OPTIONS.VIDEO_EMBED, EDITOR_OPTIONS.TEXT_COLOR, EDITOR_OPTIONS.EMOJI, "mentions"];
 
-function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useEditorState = function useEditorState(_ref) {
   var editor = _ref.editor;
   var _useEditorStore = useEditorStore(function (store) {
@@ -18182,7 +18182,7 @@ var useEditorState = function useEditorState(_ref) {
     var redoOptionState = {
       disabled: !editor.can().redo()
     };
-    var updatedMarksState = _objectSpread$7(_objectSpread$7({}, marksState), {}, _defineProperty(_defineProperty({}, EDITOR_OPTIONS.UNDO, undoOptionState), EDITOR_OPTIONS.REDO, redoOptionState));
+    var updatedMarksState = _objectSpread$8(_objectSpread$8({}, marksState), {}, _defineProperty(_defineProperty({}, EDITOR_OPTIONS.UNDO, undoOptionState), EDITOR_OPTIONS.REDO, redoOptionState));
     setMarksState(updatedMarksState);
   }, [marksState, setMarksState]);
   useEffect(function () {
@@ -18202,8 +18202,8 @@ var useEditorState = function useEditorState(_ref) {
 };
 
 var _excluded$2 = ["type"];
-function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Fixed = function Fixed(_ref) {
   var editor = _ref.editor,
     options = _ref.options,
@@ -18302,7 +18302,8 @@ var Fixed = function Fixed(_ref) {
       mentions: mentions,
       addonCommands: addonCommands,
       setIsEmojiPickerActive: setIsEmojiPickerActive,
-      isEmojiPickerActive: isEmojiPickerActive
+      isEmojiPickerActive: isEmojiPickerActive,
+      editor: editor
     });
   }, [isEmojiPickerActive, mentions]);
   var handleResize = useCallback(function () {
@@ -18354,7 +18355,7 @@ var Fixed = function Fixed(_ref) {
             props = _objectWithoutProperties$1(_ref2, _excluded$2);
           var Component = MENU_ELEMENTS[type];
           if (!Component) return null;
-          return /*#__PURE__*/jsx(Component, _objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, props), {}, {
+          return /*#__PURE__*/jsx(Component, _objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, props), {}, {
             editor: editor,
             options: options
           })), props.optionName);
@@ -18403,8 +18404,8 @@ var Fixed = function Fixed(_ref) {
 };
 
 var _excluded$1 = ["icon", "onClick", "disabled", "className", "tooltipProps"];
-function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Button = function Button(_ref) {
   var _ref$icon = _ref.icon,
     icon = _ref$icon === void 0 ? null : _ref$icon,
@@ -18416,16 +18417,16 @@ var Button = function Button(_ref) {
     tooltipProps = _ref.tooltipProps,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$1);
   var Icon = icon;
-  return /*#__PURE__*/jsx(Tooltip, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsx(Tooltip, _objectSpread$6(_objectSpread$6({
     disabled: !tooltipProps,
     onClick: function onClick() {
       return _onClick();
     }
   }, tooltipProps), {}, {
-    children: /*#__PURE__*/jsx("button", _objectSpread$5(_objectSpread$5({
+    children: /*#__PURE__*/jsx("button", _objectSpread$6(_objectSpread$6({
       className: classnames("ne-headless-btn", _defineProperty({}, className, className)),
       type: "button"
-    }, _objectSpread$5({
+    }, _objectSpread$6({
       disabled: disabled,
       onClick: _onClick
     }, otherProps)), {}, {
@@ -18438,8 +18439,8 @@ var Button = function Button(_ref) {
 };
 
 var _excluded = ["icon", "isOpen", "onClose", "children", "className", "onClick", "buttonProps"];
-function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var hideOnEsc = {
   name: "hideOnEsc",
   defaultValue: true,
@@ -18478,7 +18479,7 @@ var Dropdown = function Dropdown(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     mounted = _useState2[0],
     setMounted = _useState2[1];
-  return /*#__PURE__*/jsx(Tippy, _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsx(Tippy, _objectSpread$5(_objectSpread$5({
     onClose: onClose,
     hideOnEsc: true,
     interactive: true,
@@ -18510,7 +18511,7 @@ var Dropdown = function Dropdown(_ref2) {
     }
   }, otherProps), {}, {
     children: /*#__PURE__*/jsx("span", {
-      children: /*#__PURE__*/jsx(Button, _objectSpread$4({}, _objectSpread$4({
+      children: /*#__PURE__*/jsx(Button, _objectSpread$5({}, _objectSpread$5({
         icon: icon,
         onClick: onClick
       }, buttonProps)))
@@ -18583,8 +18584,8 @@ var Option = function Option(_ref) {
   });
 };
 
-function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var t = i18n.t;
 var createMenuOptions$1 = function createMenuOptions(_ref) {
   var editor = _ref.editor,
@@ -18743,7 +18744,7 @@ var buildOptionsFromAddonCommands$1 = function buildOptionsFromAddonCommands(_re
   var to = editor.state.selection.to;
   return commands.map(function (option) {
     var _option$active;
-    return _objectSpread$3(_objectSpread$3({}, option), {}, {
+    return _objectSpread$4(_objectSpread$4({}, option), {}, {
       active: (_option$active = option.active) === null || _option$active === void 0 ? void 0 : _option$active.call(option, {
         editor: editor
       }),
@@ -18785,8 +18786,8 @@ var buildMenuOptions$1 = function buildMenuOptions(_ref3) {
   }).filter(Boolean);
 };
 
-function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Headless = function Headless(_ref) {
   var editor = _ref.editor,
     options = _ref.options,
@@ -18824,7 +18825,7 @@ var Headless = function Headless(_ref) {
   return /*#__PURE__*/jsxs("div", {
     className: classnames("ne-headless", _defineProperty({}, className, className)),
     children: [allOptions.map(function (option) {
-      return /*#__PURE__*/createElement(Option, _objectSpread$2({
+      return /*#__PURE__*/createElement(Option, _objectSpread$3({
         editor: editor,
         key: option.optionName
       }, option));
@@ -18964,6 +18965,166 @@ var FontSizeOption = function FontSizeOption(_ref) {
 };
 var FontSizeOption$1 = /*#__PURE__*/memo(FontSizeOption);
 
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ColorDot = function ColorDot(_ref) {
+  var colorVar = _ref.colorVar,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    isTextColor = _ref.isTextColor;
+  var dotClass = classnames("neeto-editor-highlight-dropdown__color-dot", {
+    "neeto-editor-highlight-dropdown__color-dot--selected": isSelected,
+    "neeto-editor-highlight-dropdown__color-dot--background": !isTextColor
+  });
+  var dotStyle = _objectSpread$2({}, isTextColor ? {
+    color: "var(".concat(colorVar, ")")
+  } : {
+    backgroundColor: "var(".concat(colorVar, ")")
+  });
+  return /*#__PURE__*/jsx("div", {
+    onClick: onClick,
+    className: dotClass,
+    style: dotStyle,
+    children: isTextColor && /*#__PURE__*/jsx(Typography, {
+      className: "neeto-editor-highlight-dropdown__color-dot-text",
+      style: "body2",
+      weight: "semibold",
+      children: "A"
+    })
+  });
+};
+
+var ColorDotIcon = function ColorDotIcon(_ref) {
+  var textColor = _ref.textColor,
+    backgroundColor = _ref.backgroundColor;
+  var dotClass = classnames("neeto-editor-highlight-dropdown__color-dot", {});
+  var dotStyle = {
+    color: "var(".concat(textColor, ")"),
+    backgroundColor: "var(".concat(backgroundColor, ")")
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: dotClass,
+    style: dotStyle,
+    children: /*#__PURE__*/jsx(Typography, {
+      className: "neeto-editor-highlight-dropdown__color-dot-text",
+      style: "body2",
+      weight: "semibold",
+      children: "A"
+    })
+  });
+};
+
+var COLORS = {
+  recent: ["--neeto-editor-highlight-bg-yellow-light"],
+  text: ["--neeto-editor-highlight-text-1", "--neeto-editor-highlight-text-2", "--neeto-editor-highlight-text-3", "--neeto-editor-highlight-text-4", "--neeto-editor-highlight-text-5", "--neeto-editor-highlight-text-6", "--neeto-editor-highlight-text-7", "--neeto-editor-highlight-text-8", "--neeto-editor-highlight-text-9", "--neeto-editor-highlight-text-10"],
+  background: ["--neeto-editor-highlight-bg-1", "--neeto-editor-highlight-bg-2", "--neeto-editor-highlight-bg-3", "--neeto-editor-highlight-bg-4", "--neeto-editor-highlight-bg-5", "--neeto-editor-highlight-bg-6", "--neeto-editor-highlight-bg-7", "--neeto-editor-highlight-bg-8", "--neeto-editor-highlight-bg-9", "--neeto-editor-highlight-bg-10"]
+};
+
+var colorSections = [{
+  title: "Text color",
+  colors: COLORS.text,
+  isTextColor: true
+}, {
+  title: "Background color",
+  colors: COLORS.background,
+  isTextColor: false
+}];
+var HighlightDropdown = function HighlightDropdown(_ref) {
+  var editor = _ref.editor,
+    label = _ref.label,
+    tooltipContent = _ref.tooltipContent,
+    runEditorCommand = _ref.runEditorCommand;
+  var dropdownRef = useRef(null);
+  var textColor = editor.getAttributes("textStyle").color;
+  var backgroundColor = editor.getAttributes("textStyle").backgroundColor;
+  var updateBackgroundColor = function updateBackgroundColor(value) {
+    runEditorCommand(function (editor) {
+      return editor.chain().focus().setMark("textStyle", {
+        backgroundColor: value
+      }).run();
+    })();
+  };
+  var handleBackgroundColorClick = function handleBackgroundColorClick(colorVar) {
+    if (backgroundColor === "var(".concat(colorVar, ")")) {
+      updateBackgroundColor(null);
+    } else {
+      updateBackgroundColor("var(".concat(colorVar, ")"));
+    }
+  };
+  var handleTextColorClick = function handleTextColorClick(colorVar) {
+    if (textColor === "var(".concat(colorVar, ")")) {
+      editor.chain().focus().unsetColor().run();
+    } else {
+      editor.chain().focus().setColor("var(".concat(colorVar, ")")).run();
+    }
+  };
+  var renderColorDots = function renderColorDots(colorList) {
+    var isTextColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return colorList.map(function (colorVar, idx) {
+      return /*#__PURE__*/createElement(ColorDot, {
+        colorVar: colorVar,
+        isTextColor: isTextColor,
+        key: idx,
+        isSelected: isTextColor ? textColor === "var(".concat(colorVar, ")") : backgroundColor === "var(".concat(colorVar, ")"),
+        onClick: function onClick() {
+          return isTextColor ? handleTextColorClick(colorVar) : handleBackgroundColorClick(colorVar);
+        }
+      });
+    });
+  };
+  return /*#__PURE__*/jsx(Dropdown$1, {
+    autoWidth: true,
+    placement: "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      icon: function icon() {
+        return /*#__PURE__*/jsx(ColorDotIcon, {
+          backgroundColor: backgroundColor,
+          textColor: textColor
+        });
+      },
+      iconPosition: "left",
+      iconSize: 20,
+      label: /*#__PURE__*/jsx(Down, {
+        size: 12
+      }),
+      ref: dropdownRef,
+      "data-cy": "neeto-editor-fixed-menu-highlight-option",
+      onKeyDown: function onKeyDown(event) {
+        var _dropdownRef$current;
+        return event.key === "ArrowDown" && ((_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.click());
+      },
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      style: "text",
+      size: "small",
+      className: "neeto-editor-fixed-menu__item"
+    },
+    children: /*#__PURE__*/jsx(Dropdown$1.Menu, {
+      className: "neeto-editor-highlight-dropdown",
+      children: colorSections.map(function (_ref2) {
+        var title = _ref2.title,
+          colors = _ref2.colors,
+          isTextColor = _ref2.isTextColor;
+        return /*#__PURE__*/jsxs("div", {
+          className: "neeto-editor-highlight-dropdown__section",
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "neeto-editor-highlight-dropdown__section-title",
+            style: "body2",
+            weight: "normal",
+            children: title
+          }), /*#__PURE__*/jsx("div", {
+            className: "neeto-editor-highlight-dropdown__color-grid",
+            children: renderColorDots(colors, isTextColor)
+          })]
+        }, title);
+      })
+    })
+  });
+};
+
 var Menu$1 = Dropdown$1.Menu;
 var TableOption = function TableOption(_ref) {
   var editor = _ref.editor,
@@ -19067,7 +19228,8 @@ var MENU_ELEMENT_TYPES = {
   TABLE: "table",
   TEXT_COLOR: "textColor",
   EMOJI: "emoji",
-  MENTIONS: "mentions"
+  MENTIONS: "mentions",
+  HIGHLIGHT: "highlight"
 };
 var SHORTCUTS = (_SHORTCUTS = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_SHORTCUTS, EDITOR_OPTIONS.BOLD, {
   mac: "⌘B",
@@ -19103,13 +19265,13 @@ var SHORTCUTS = (_SHORTCUTS = {}, _defineProperty(_defineProperty(_definePropert
   mac: "⌘⇧7",
   win: "Ctrl+Shift+7"
 }));
-var MENU_ELEMENTS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MENU_ELEMENT_TYPES.BUTTON, MenuButton$1), MENU_ELEMENT_TYPES.FONT_SIZE, FontSizeOption$1), MENU_ELEMENT_TYPES.TABLE, TableOption$1), MENU_ELEMENT_TYPES.TEXT_COLOR, TextColorOption), MENU_ELEMENT_TYPES.EMOJI, EmojiOption$1), MENU_ELEMENT_TYPES.MENTIONS, Mentions$1);
-var MENU_ELEMENT_WIDTHS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MENU_ELEMENT_TYPES.BUTTON, 36), MENU_ELEMENT_TYPES.FONT_SIZE, 103), MENU_ELEMENT_TYPES.TABLE, 36), MENU_ELEMENT_TYPES.TEXT_COLOR, 36), MENU_ELEMENT_TYPES.EMOJI, 36), MENU_ELEMENT_TYPES.MENTIONS, 36);
+var MENU_ELEMENTS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MENU_ELEMENT_TYPES.BUTTON, MenuButton$1), MENU_ELEMENT_TYPES.FONT_SIZE, FontSizeOption$1), MENU_ELEMENT_TYPES.TABLE, TableOption$1), MENU_ELEMENT_TYPES.TEXT_COLOR, TextColorOption), MENU_ELEMENT_TYPES.EMOJI, EmojiOption$1), MENU_ELEMENT_TYPES.MENTIONS, Mentions$1), MENU_ELEMENT_TYPES.HIGHLIGHT, HighlightDropdown);
+var MENU_ELEMENT_WIDTHS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MENU_ELEMENT_TYPES.BUTTON, 36), MENU_ELEMENT_TYPES.FONT_SIZE, 103), MENU_ELEMENT_TYPES.TABLE, 36), MENU_ELEMENT_TYPES.TEXT_COLOR, 36), MENU_ELEMENT_TYPES.EMOJI, 36), MENU_ELEMENT_TYPES.MENTIONS, 36), MENU_ELEMENT_TYPES.HIGHLIGHT, 103);
 
 function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createMenuOptions = function createMenuOptions(_ref) {
-  var _tooltips$undo, _tooltips$redo, _tooltips$fontSize, _tooltips$bold, _tooltips$italic, _tooltips$link, _tooltips$strike, _tooltips$highlight, _tooltips$bulletList, _tooltips$orderedList, _tooltips$blockQuote, _tooltips$table, _tooltips$attachments, _tooltips$imageUpload, _tooltips$videoEmbed, _tooltips$textColor, _tooltips$emoji, _tooltips$mention, _tooltips$code, _tooltips$codeBlock, _tooltips$videoUpload, _tooltips$underline;
+  var _tooltips$undo, _tooltips$redo, _tooltips$fontSize, _tooltips$bold, _tooltips$italic, _tooltips$link, _tooltips$strike, _tooltips$highlight, _tooltips$highlight2, _tooltips$bulletList, _tooltips$orderedList, _tooltips$blockQuote, _tooltips$table, _tooltips$attachments, _tooltips$imageUpload, _tooltips$videoEmbed, _tooltips$textColor, _tooltips$emoji, _tooltips$mention, _tooltips$code, _tooltips$codeBlock, _tooltips$videoUpload, _tooltips$underline;
   var tooltips = _ref.tooltips,
     setMediaUploader = _ref.setMediaUploader,
     attachmentProps = _ref.attachmentProps,
@@ -19120,7 +19282,8 @@ var createMenuOptions = function createMenuOptions(_ref) {
     addonCommandOptions = _ref.addonCommandOptions,
     setIsEmojiPickerActive = _ref.setIsEmojiPickerActive,
     isEmojiPickerActive = _ref.isEmojiPickerActive,
-    runEditorCommand = _ref.runEditorCommand;
+    runEditorCommand = _ref.runEditorCommand,
+    editor = _ref.editor;
   var fontSizeOptions = options.filter(function (option) {
     return option.match(/^h[1-6]$/);
   });
@@ -19190,14 +19353,14 @@ var createMenuOptions = function createMenuOptions(_ref) {
     optionName: EDITOR_OPTIONS.STRIKETHROUGH,
     label: (_tooltips$strike = tooltips.strike) !== null && _tooltips$strike !== void 0 ? _tooltips$strike : t$1("neetoEditor.menu.strike")
   }, {
-    type: MENU_ELEMENT_TYPES.BUTTON,
+    type: MENU_ELEMENT_TYPES.HIGHLIGHT,
     icon: Highlight,
+    label: (_tooltips$highlight = tooltips.highlight) !== null && _tooltips$highlight !== void 0 ? _tooltips$highlight : t$1("neetoEditor.menu.highlight"),
     isEnabled: options.includes(EDITOR_OPTIONS.HIGHLIGHT),
-    command: runEditorCommand(function (editor) {
-      return editor.chain().focus().toggleHighlight().run();
-    }),
     optionName: EDITOR_OPTIONS.HIGHLIGHT,
-    label: (_tooltips$highlight = tooltips.highlight) !== null && _tooltips$highlight !== void 0 ? _tooltips$highlight : t$1("neetoEditor.menu.highlight")
+    editor: editor,
+    runEditorCommand: runEditorCommand,
+    tooltipContent: (_tooltips$highlight2 = tooltips.highlight) !== null && _tooltips$highlight2 !== void 0 ? _tooltips$highlight2 : t$1("neetoEditor.menu.highlight")
   }],
   // list
   [{
@@ -19357,7 +19520,8 @@ var buildMenuOptions = function buildMenuOptions(_ref3) {
     addonCommands = _ref3.addonCommands,
     setIsEmojiPickerActive = _ref3.setIsEmojiPickerActive,
     isEmojiPickerActive = _ref3.isEmojiPickerActive,
-    runEditorCommand = _ref3.runEditorCommand;
+    runEditorCommand = _ref3.runEditorCommand,
+    editor = _ref3.editor;
   var addonCommandOptions = buildOptionsFromAddonCommands({
     commands: addonCommands,
     runEditorCommand: runEditorCommand
@@ -19373,7 +19537,8 @@ var buildMenuOptions = function buildMenuOptions(_ref3) {
     addonCommandOptions: addonCommandOptions,
     setIsEmojiPickerActive: setIsEmojiPickerActive,
     isEmojiPickerActive: isEmojiPickerActive,
-    runEditorCommand: runEditorCommand
+    runEditorCommand: runEditorCommand,
+    editor: editor
   });
   return menuOptions.map(function (option) {
     return option.filter(prop("isEnabled"));
@@ -19529,4 +19694,4 @@ var Menu = function Menu(props) {
 };
 
 export { combineTransactionSteps as A, getChangedRanges as B, findChildrenInRange as C, DecorationSet as D, Extension as E, getMarksBetween as F, getAttributes as G, highlightFocussedNode as H, InputRule as I, resetFocussedNode as J, findParentNodeClosestToPos as K, BubbleMenu as L, Menu as M, Node as N, getLinkPopoverPosition as O, PasteRule as P, getMarkType as Q, ReactNodeViewRenderer as R, getMarkRange as S, useEditor as T, useEditorState$1 as U, EditorContent as V, MediaUploader as W, EmbedOption as X, EditorView as Y, Mark as a, markInputRule as b, markPasteRule as c, Decoration as d, isAtStartOfNode as e, isAtEndOfNode as f, getMarkAttributes as g, getNodeType$1 as h, isNodeActive as i, getNodeAtPosition as j, keydownHandler as k, callOrReturn as l, mergeAttributes as m, getExtensionField as n, isNodeSelection as o, nodeInputRule as p, findChildren as q, NodeViewWrapper as r, NodeViewContent as s, textblockTypeInputRule as t, escapeForRegEx as u, validateUrl as v, wrappingInputRule as w, ReactRenderer as x, EmojiPickerMenu as y, emojiPickerApi as z };
-//# sourceMappingURL=chunk-BWTtXW7N.js.map
+//# sourceMappingURL=chunk-CeFnZWjP.js.map