@bigbinary/neeto-editor 1.46.1 → 1.47.1

package/dist/cjs/{chunk-DWmDAnNq.cjs.js → chunk-kKbY2sPw.cjs.js}

@@ -15701,8 +15701,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) {
@@ -15754,7 +15754,7 @@ var EmojiPickerMenu = /*#__PURE__*/function (_React$Component) {
   return _createClass$1(EmojiPickerMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      new emojiMart.Picker(_objectSpread$b(_objectSpread$b({}, this.props), {}, {
+      new emojiMart.Picker(_objectSpread$c(_objectSpread$c({}, this.props), {}, {
         onEmojiSelect: this.handleSelect,
         style: {
           maxWidth: "100%"
@@ -15812,8 +15812,8 @@ var useEditorStore = zustand.create(reactUtils.withImmutableActions(function (se
   };
 }));
 
-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,
@@ -15832,7 +15832,7 @@ var MenuButton = function MenuButton(_ref) {
     isActive = _useEditorStore.isActive,
     _useEditorStore$disab = _useEditorStore.disabled,
     disabled = _useEditorStore$disab === void 0 ? isButtonDisabled : _useEditorStore$disab;
-  return /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread$a({
+  return /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread$b({
     disabled: disabled,
     icon: icon,
     className: "neeto-editor-fixed-menu__item",
@@ -15840,7 +15840,7 @@ var MenuButton = function MenuButton(_ref) {
     style: isActive ? "secondary" : "text",
     tabIndex: "-1",
     tooltipProps: {
-      content: label,
+      content: renderTooltipContent(label, optionName),
       position: "bottom"
     },
     onClick: command
@@ -15869,9 +15869,6 @@ var EmojiOption = function EmojiOption(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(Dropdown$1, {
     buttonStyle: "text",
     closeOnSelect: false,
-    dropdownProps: {
-      classNames: "neeto-editor-fixed-menu__emoji-dropdown"
-    },
     icon: Smiley,
     isOpen: isActive,
     position: isSecondaryMenu ? "left-start" : "bottom-start",
@@ -15889,6 +15886,12 @@ var EmojiOption = function EmojiOption(_ref) {
       label: label,
       icon: Smiley
     }),
+    dropdownProps: {
+      classNames: "neeto-editor-fixed-menu__emoji-dropdown",
+      onClick: function onClick(e) {
+        return isSecondaryMenu && e.stopPropagation();
+      }
+    },
     onClose: function onClose() {
       return setActive(false);
     },
@@ -16040,8 +16043,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,
@@ -16285,7 +16288,7 @@ var renderOptionButton = function renderOptionButton(_ref4) {
     active = _ref4.active,
     optionName = _ref4.optionName,
     highlight = _ref4.highlight;
-  return /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread$9({
+  return /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread$a({
     "data-cy": "neeto-editor-bubble-menu-".concat(optionName, "-option"),
     icon: Icon,
     size: "small",
@@ -18098,8 +18101,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) {
@@ -18120,18 +18123,18 @@ var MoreMenu = function MoreMenu(_ref) {
           var Component = MENU_ELEMENTS[type];
           if (type === MENU_ELEMENT_TYPES.BUTTON) {
             var Icon = props.icon;
-            return /*#__PURE__*/jsxRuntime.jsxs(MenuItem$1.Button, _objectSpread$8(_objectSpread$8({
+            return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Icon, {}), " ", props.label]
             }), props.optionName);
           }
-          return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, props), {}, {
+          return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$9(_objectSpread$9({}, _objectSpread$9(_objectSpread$9({}, props), {}, {
             editor: editor
           }, generateFocusProps(props.highlight))), {}, {
             isSecondaryMenu: true
@@ -18144,8 +18147,8 @@ var MoreMenu = function MoreMenu(_ref) {
 
 var EDITOR_MARKS = [constants.EDITOR_OPTIONS.UNDO, constants.EDITOR_OPTIONS.REDO, "fontSizeOptions", constants.EDITOR_OPTIONS.BOLD, constants.EDITOR_OPTIONS.ITALIC, constants.EDITOR_OPTIONS.UNDERLINE, constants.EDITOR_OPTIONS.LINK, constants.EDITOR_OPTIONS.STRIKETHROUGH, constants.EDITOR_OPTIONS.HIGHLIGHT, "bulletList", "orderedList", "blockquote", constants.EDITOR_OPTIONS.CODE, "codeBlock", constants.EDITOR_OPTIONS.TABLE, constants.EDITOR_OPTIONS.ATTACHMENTS, constants.EDITOR_OPTIONS.IMAGE_UPLOAD, constants.EDITOR_OPTIONS.VIDEO_UPLOAD, constants.EDITOR_OPTIONS.VIDEO_EMBED, constants.EDITOR_OPTIONS.TEXT_COLOR, constants.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) {
@@ -18181,7 +18184,7 @@ var useEditorState = function useEditorState(_ref) {
     var redoOptionState = {
       disabled: !editor.can().redo()
     };
-    var updatedMarksState = _objectSpread$7(_objectSpread$7({}, marksState), {}, _defineProperty(_defineProperty({}, constants.EDITOR_OPTIONS.UNDO, undoOptionState), constants.EDITOR_OPTIONS.REDO, redoOptionState));
+    var updatedMarksState = _objectSpread$8(_objectSpread$8({}, marksState), {}, _defineProperty(_defineProperty({}, constants.EDITOR_OPTIONS.UNDO, undoOptionState), constants.EDITOR_OPTIONS.REDO, redoOptionState));
     setMarksState(updatedMarksState);
   }, [marksState, setMarksState]);
   React.useEffect(function () {
@@ -18201,8 +18204,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,
@@ -18301,7 +18304,8 @@ var Fixed = function Fixed(_ref) {
       mentions: mentions,
       addonCommands: addonCommands,
       setIsEmojiPickerActive: setIsEmojiPickerActive,
-      isEmojiPickerActive: isEmojiPickerActive
+      isEmojiPickerActive: isEmojiPickerActive,
+      editor: editor
     });
   }, [isEmojiPickerActive, mentions]);
   var handleResize = React.useCallback(function () {
@@ -18353,7 +18357,7 @@ var Fixed = function Fixed(_ref) {
             props = _objectWithoutProperties$1(_ref2, _excluded$2);
           var Component = MENU_ELEMENTS[type];
           if (!Component) return null;
-          return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, props), {}, {
+          return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, props), {}, {
             editor: editor,
             options: options
           })), props.optionName);
@@ -18402,8 +18406,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,
@@ -18415,16 +18419,16 @@ var Button = function Button(_ref) {
     tooltipProps = _ref.tooltipProps,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$1);
   var Icon = icon;
-  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, _objectSpread$6(_objectSpread$6({
     disabled: !tooltipProps,
     onClick: function onClick() {
       return _onClick();
     }
   }, tooltipProps), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread$5(_objectSpread$5({
+    children: /*#__PURE__*/jsxRuntime.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)), {}, {
@@ -18437,8 +18441,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,
@@ -18477,7 +18481,7 @@ var Dropdown = function Dropdown(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     mounted = _useState2[0],
     setMounted = _useState2[1];
-  return /*#__PURE__*/jsxRuntime.jsx(Tippy, _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsxRuntime.jsx(Tippy, _objectSpread$5(_objectSpread$5({
     onClose: onClose,
     hideOnEsc: true,
     interactive: true,
@@ -18509,7 +18513,7 @@ var Dropdown = function Dropdown(_ref2) {
     }
   }, otherProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("span", {
-      children: /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$4({}, _objectSpread$4({
+      children: /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$5({}, _objectSpread$5({
         icon: icon,
         onClick: onClick
       }, buttonProps)))
@@ -18582,8 +18586,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,
@@ -18742,7 +18746,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
       }),
@@ -18784,8 +18788,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,
@@ -18823,7 +18827,7 @@ var Headless = function Headless(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: classnames("ne-headless", _defineProperty({}, className, className)),
     children: [allOptions.map(function (option) {
-      return /*#__PURE__*/React.createElement(Option, _objectSpread$2({
+      return /*#__PURE__*/React.createElement(Option, _objectSpread$3({
         editor: editor,
         key: option.optionName
       }, option));
@@ -18963,6 +18967,166 @@ var FontSizeOption = function FontSizeOption(_ref) {
 };
 var FontSizeOption$1 = /*#__PURE__*/React.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__*/jsxRuntime.jsx("div", {
+    onClick: onClick,
+    className: dotClass,
+    style: dotStyle,
+    children: isTextColor && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+    className: dotClass,
+    style: dotStyle,
+    children: /*#__PURE__*/jsxRuntime.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 = React.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__*/React.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__*/jsxRuntime.jsx(Dropdown$1, {
+    autoWidth: true,
+    placement: "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      icon: function icon() {
+        return /*#__PURE__*/jsxRuntime.jsx(ColorDotIcon, {
+          backgroundColor: backgroundColor,
+          textColor: textColor
+        });
+      },
+      iconPosition: "left",
+      iconSize: 20,
+      label: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+          className: "neeto-editor-highlight-dropdown__section",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-editor-highlight-dropdown__section-title",
+            style: "body2",
+            weight: "normal",
+            children: title
+          }), /*#__PURE__*/jsxRuntime.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,
@@ -19059,21 +19223,57 @@ var TableOption = function TableOption(_ref) {
 };
 var TableOption$1 = /*#__PURE__*/React.memo(TableOption);
 
+var _SHORTCUTS;
 var MENU_ELEMENT_TYPES = {
   BUTTON: "button",
   FONT_SIZE: "fontSize",
   TABLE: "table",
   TEXT_COLOR: "textColor",
   EMOJI: "emoji",
-  MENTIONS: "mentions"
+  MENTIONS: "mentions",
+  HIGHLIGHT: "highlight"
 };
-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 SHORTCUTS = (_SHORTCUTS = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_SHORTCUTS, constants.EDITOR_OPTIONS.BOLD, {
+  mac: "⌘B",
+  win: "Ctrl+B"
+}), constants.EDITOR_OPTIONS.ITALIC, {
+  mac: "⌘I",
+  win: "Ctrl+I"
+}), constants.EDITOR_OPTIONS.UNDERLINE, {
+  mac: "⌘U",
+  win: "Ctrl+U"
+}), constants.EDITOR_OPTIONS.STRIKETHROUGH, {
+  mac: "⌘⇧S or ⌘⇧X",
+  win: "Ctrl+Shift+S or Ctrl+Shift+X"
+}), constants.EDITOR_OPTIONS.CODE, {
+  mac: "⌘E",
+  win: "Ctrl+E"
+}), constants.EDITOR_OPTIONS.UNDO, {
+  mac: "⌘Z",
+  win: "Ctrl+Z"
+}), constants.EDITOR_OPTIONS.REDO, {
+  mac: "⌘⇧Z",
+  win: "Ctrl+Shift+Z"
+}), constants.EDITOR_OPTIONS.LINK, {
+  mac: "⌘K",
+  win: "Ctrl+K"
+}), constants.EDITOR_OPTIONS.HIGHLIGHT, {
+  mac: "⌘⇧H",
+  win: "Ctrl+Shift+H"
+}), "bulletList", {
+  mac: "⌘⇧8",
+  win: "Ctrl+Shift+8"
+}), _defineProperty(_SHORTCUTS, "orderedList", {
+  mac: "⌘⇧7",
+  win: "Ctrl+Shift+7"
+}));
+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$underline, _tooltips$link, _tooltips$strike, _tooltips$highlight, _tooltips$bulletList, _tooltips$orderedList, _tooltips$blockQuote, _tooltips$code, _tooltips$codeBlock, _tooltips$table, _tooltips$attachments, _tooltips$imageUpload, _tooltips$videoUpload, _tooltips$videoEmbed, _tooltips$textColor, _tooltips$emoji, _tooltips$mention;
+  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,
@@ -19084,7 +19284,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]$/);
   });
@@ -19135,15 +19336,6 @@ var createMenuOptions = function createMenuOptions(_ref) {
     }),
     optionName: constants.EDITOR_OPTIONS.ITALIC,
     label: (_tooltips$italic = tooltips.italic) !== null && _tooltips$italic !== void 0 ? _tooltips$italic : i18n.t("neetoEditor.menu.italic")
-  }, {
-    type: MENU_ELEMENT_TYPES.BUTTON,
-    icon: Underline,
-    isEnabled: options.includes(constants.EDITOR_OPTIONS.UNDERLINE),
-    command: runEditorCommand(function (editor) {
-      return editor.chain().focus().toggleUnderline().run();
-    }),
-    optionName: constants.EDITOR_OPTIONS.UNDERLINE,
-    label: (_tooltips$underline = tooltips.underline) !== null && _tooltips$underline !== void 0 ? _tooltips$underline : i18n.t("neetoEditor.menu.underline")
   }, {
     type: MENU_ELEMENT_TYPES.BUTTON,
     icon: Link,
@@ -19163,14 +19355,14 @@ var createMenuOptions = function createMenuOptions(_ref) {
     optionName: constants.EDITOR_OPTIONS.STRIKETHROUGH,
     label: (_tooltips$strike = tooltips.strike) !== null && _tooltips$strike !== void 0 ? _tooltips$strike : i18n.t("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 : i18n.t("neetoEditor.menu.highlight"),
     isEnabled: options.includes(constants.EDITOR_OPTIONS.HIGHLIGHT),
-    command: runEditorCommand(function (editor) {
-      return editor.chain().focus().toggleHighlight().run();
-    }),
     optionName: constants.EDITOR_OPTIONS.HIGHLIGHT,
-    label: (_tooltips$highlight = tooltips.highlight) !== null && _tooltips$highlight !== void 0 ? _tooltips$highlight : i18n.t("neetoEditor.menu.highlight")
+    editor: editor,
+    runEditorCommand: runEditorCommand,
+    tooltipContent: (_tooltips$highlight2 = tooltips.highlight) !== null && _tooltips$highlight2 !== void 0 ? _tooltips$highlight2 : i18n.t("neetoEditor.menu.highlight")
   }],
   // list
   [{
@@ -19205,24 +19397,6 @@ var createMenuOptions = function createMenuOptions(_ref) {
     optionName: "blockquote",
     highlight: true,
     label: (_tooltips$blockQuote = tooltips.blockQuote) !== null && _tooltips$blockQuote !== void 0 ? _tooltips$blockQuote : i18n.t("neetoEditor.menu.blockQuote")
-  }, {
-    type: MENU_ELEMENT_TYPES.BUTTON,
-    icon: Code,
-    command: runEditorCommand(function (editor) {
-      return editor.chain().focus().toggleCode().run();
-    }),
-    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE),
-    optionName: constants.EDITOR_OPTIONS.CODE,
-    label: (_tooltips$code = tooltips.code) !== null && _tooltips$code !== void 0 ? _tooltips$code : i18n.t("neetoEditor.menu.code")
-  }, {
-    type: MENU_ELEMENT_TYPES.BUTTON,
-    icon: CodeBlock,
-    command: runEditorCommand(function (editor) {
-      return editor.chain().focus().toggleCodeBlock().run();
-    }),
-    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE_BLOCK),
-    optionName: "codeBlock",
-    label: (_tooltips$codeBlock = tooltips.codeBlock) !== null && _tooltips$codeBlock !== void 0 ? _tooltips$codeBlock : i18n.t("neetoEditor.menu.codeBlock")
   }],
   // misc
   [{
@@ -19249,15 +19423,6 @@ var createMenuOptions = function createMenuOptions(_ref) {
     isEnabled: options.includes(constants.EDITOR_OPTIONS.IMAGE_UPLOAD),
     optionName: constants.EDITOR_OPTIONS.IMAGE_UPLOAD,
     label: (_tooltips$imageUpload = tooltips.imageUpload) !== null && _tooltips$imageUpload !== void 0 ? _tooltips$imageUpload : i18n.t("neetoEditor.menu.imageUpload")
-  }, {
-    type: MENU_ELEMENT_TYPES.BUTTON,
-    icon: Video,
-    command: function command() {
-      return setMediaUploader(ramda.assoc("video", true));
-    },
-    isEnabled: options.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD),
-    optionName: constants.EDITOR_OPTIONS.VIDEO_UPLOAD,
-    label: (_tooltips$videoUpload = tooltips.videoUpload) !== null && _tooltips$videoUpload !== void 0 ? _tooltips$videoUpload : i18n.t("neetoEditor.menu.videoUpload")
   }, {
     type: MENU_ELEMENT_TYPES.BUTTON,
     icon: MediaVideo,
@@ -19287,6 +19452,42 @@ var createMenuOptions = function createMenuOptions(_ref) {
     isEnabled: neetoCist.isNotEmpty(mentions),
     optionName: "mentions",
     mentions: mentions
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Code,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleCode().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE),
+    optionName: constants.EDITOR_OPTIONS.CODE,
+    label: (_tooltips$code = tooltips.code) !== null && _tooltips$code !== void 0 ? _tooltips$code : i18n.t("neetoEditor.menu.code")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: CodeBlock,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleCodeBlock().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE_BLOCK),
+    optionName: "codeBlock",
+    label: (_tooltips$codeBlock = tooltips.codeBlock) !== null && _tooltips$codeBlock !== void 0 ? _tooltips$codeBlock : i18n.t("neetoEditor.menu.codeBlock")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Video,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("video", true));
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD),
+    optionName: constants.EDITOR_OPTIONS.VIDEO_UPLOAD,
+    label: (_tooltips$videoUpload = tooltips.videoUpload) !== null && _tooltips$videoUpload !== void 0 ? _tooltips$videoUpload : i18n.t("neetoEditor.menu.videoUpload")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Underline,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.UNDERLINE),
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleUnderline().run();
+    }),
+    optionName: constants.EDITOR_OPTIONS.UNDERLINE,
+    label: (_tooltips$underline = tooltips.underline) !== null && _tooltips$underline !== void 0 ? _tooltips$underline : i18n.t("neetoEditor.menu.underline")
   }], //addons
   _toConsumableArray(addonCommandOptions)];
 };
@@ -19321,7 +19522,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
@@ -19337,7 +19539,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(ramda.prop("isEnabled"));
@@ -19415,6 +19618,15 @@ var getLinkPopoverPosition = function getLinkPopoverPosition(editor, popoverRef)
     popoverPosition: popoverPosition
   };
 };
+function renderTooltipContent(label, optionName) {
+  var shortcut = SHORTCUTS[optionName];
+  if (!shortcut) return label;
+  var isMac = function isMac() {
+    return typeof window !== "undefined" && /Mac|iPod|iPhone|iPad/.test(window.navigator.userAgent);
+  };
+  var key = isMac() ? shortcut.mac : shortcut.win;
+  return "".concat(label, " (").concat(key, ")");
+}
 
 var css = ".neeto-editor-fixed-menu{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-gray-400));border-bottom:none;border-radius:var(--neeto-ui-rounded) var(--neeto-ui-rounded) 0 0;display:flex;position:relative}.neeto-editor-fixed-menu--independant{border-bottom:thin solid rgb(var(--neeto-ui-gray-400));border-radius:0;border-radius:initial}.neeto-editor-fixed-menu--independant .neeto-editor-fixed-menu__wrapper{border-bottom:0!important}.neeto-editor-fixed-menu--independant .neeto-editor-fixed-menu__wrapper button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon path{stroke-width:1.8px}.neeto-editor-fixed-menu__item{border-radius:0}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item{--neeto-ui-btn-border-radius:0;--neeto-ui-btn-icon-size:22px;--neeto-ui-btn-padding-x:0;--neeto-ui-btn-padding-y:0;--neeto-ui-btn-focus-box-shadow:none;align-items:center;height:36px;justify-content:center;min-width:-moz-fit-content;min-width:fit-content;padding:0;width:36px}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon{color:rgb(var(--neeto-ui-black))}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon path{stroke-width:1.5px}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-100))}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item.neeto-ui-btn--style-secondary{background-color:rgb(var(--neeto-ui-accent-100))}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item.neeto-ui-btn--style-secondary .neeto-ui-btn__icon{color:rgb(var(--neeto-ui-accent-800))}.neeto-editor-fixed-menu__wrapper{align-items:center;border-bottom:thin solid rgb(var(--neeto-ui-gray-400));display:flex;flex-grow:1;justify-content:flex-start;padding:0 2px;width:100%}.neeto-editor-fixed-menu__wrapper__button-group{display:flex}.neeto-editor-fixed-menu__variables{bottom:-42px;position:absolute;right:8px;z-index:10}.neeto-editor-fixed-menu__variables .neeto-editor-menu__item{background-color:rgb(var(--neeto-ui-gray-700));border-radius:var(--neeto-ui-rounded-sm);padding:4px}.neeto-editor-fixed-menu__variables .neeto-editor-menu__item.active,.neeto-editor-fixed-menu__variables .neeto-editor-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-600))}.neeto-editor-fixed-menu__right-options{display:flex}.neeto-editor-fixed-menu__emoji-dropdown{max-height:none!important}.neeto-editor-fixed-menu__separator{display:flex;height:28px;width:32px}.neeto-editor-fixed-menu__separator span{width:100%}.neeto-editor-fixed-menu__separator span:first-child{border-right:1px solid rgb(var(--neeto-ui-gray-200))}.neeto-editor-text-color-option__options-group{align-items:center;display:flex;gap:8px;margin:8px 4px}.neeto-editor-text-color-option__options-group__input{max-width:120px}.neeto-editor-text-color-option__options-group__reset-button{align-self:center}.react-colorful{width:100%!important}.neeto-editor-menu__item{align-items:center;border-radius:2px;cursor:pointer;display:flex;flex-direction:row;gap:4px;justify-content:center;padding:8px;transition:var(--neeto-ui-transition)}.neeto-editor-menu__item p{color:rgb(var(--neeto-ui-gray-600));font-size:var(--neeto-ui-text-xs);line-height:1;white-space:nowrap}.neeto-editor-menu__item.active,.neeto-editor-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-editor-menu__item:focus,.neeto-editor-menu__item:focus-visible{outline:rgb(var(--neeto-ui-gray-300)) auto 1px}.neeto-editor-menu__item input[type=color]{height:0;visibility:hidden;width:0}.neeto-editor-menu__item:disabled{background-color:rgb(var(--neeto-ui-gray-100));opacity:.5}.neeto-editor-link__item{align-items:flex-start;justify-content:flex-start}.neeto-editor-link__item,.neeto-editor-table__item{display:flex!important;flex-direction:row;gap:8px;padding:8px!important}.neeto-editor-table__item{min-width:210px}.neeto-editor-table__item input{max-width:60px!important}.neeto-editor-table__options-menu{display:flex;flex-direction:column;gap:8px;max-height:150px!important;overflow:scroll;padding:8px!important}.neeto-editor-font-size__wrapper{font-size:16px;font-weight:var(--neeto-ui-font-normal)!important;padding-left:4px!important;padding-right:4px!important}.neeto-editor-bubble-menu{align-items:center;background:rgb(var(--neeto-ui-gray-800));border-radius:var(--neeto-ui-rounded);display:flex;flex-direction:row;gap:1px;justify-content:flex-start;padding:0 4px;position:relative}.neeto-editor-bubble-menu button.neeto-ui-btn--style-text{color:rgb(var(--neeto-ui-gray-200));min-width:-moz-fit-content;min-width:fit-content}.neeto-editor-bubble-menu button.neeto-ui-btn--style-text.active,.neeto-editor-bubble-menu button.neeto-ui-btn--style-text:active,.neeto-editor-bubble-menu button.neeto-ui-btn--style-text:hover{background-color:rgb(var(--neeto-ui-gray-600))!important;color:rgb(var(--neeto-ui-gray-200))!important}.neeto-editor-bubble-menu button.neeto-ui-btn--style-secondary{background-color:rgb(var(--neeto-ui-gray-400));min-width:-moz-fit-content;min-width:fit-content}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup{background-color:rgb(var(--neeto-ui-gray-700))}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn{background-color:inherit!important;color:rgb(var(--neeto-ui-gray-200))!important}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn.active,.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn:active,.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn:hover{background-color:rgb(var(--neeto-ui-gray-600))!important}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link{align-items:center;display:flex;gap:8px;justify-content:space-between;padding:6px;width:256px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input{background-color:transparent;color:rgb(var(--neeto-ui-gray-200));line-height:20px;outline:none;width:100%}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input::-moz-placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input::placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .ne-btn--icon-only{min-height:0;opacity:.8;padding:0}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .ne-btn--icon-only:hover{opacity:1}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table{align-items:center;display:flex;gap:6px;justify-content:space-between;max-width:256px;padding:4px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input{background-color:rgba(var(--neeto-ui-gray-400),.2);height:24px;line-height:20px;outline:none;padding:3px 5px;width:60px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::-moz-placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__menu-item{display:flex;flex-direction:column;gap:4px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__input-label{color:#fff}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__buttons{align-self:flex-end;display:flex;gap:4px;justify-content:space-between}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__options{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow:scroll}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown-target{align-items:center;display:flex;font-size:var(--neeto-ui-text-xs);gap:4px;line-height:var(--neeto-ui-leading-normal);white-space:nowrap}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown{align-items:flex-start;display:flex;flex-direction:column}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item{font-size:var(--neeto-ui-text-xs);padding:8px 12px;text-align:left;width:100%}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item:first-child{border-top-left-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item:last-child{border-bottom-left-radius:var(--neeto-ui-rounded);border-bottom-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu-animate-shake{animation:shake 1s linear infinite alternate both}.neeto-editor-table-menu__button{align-items:flex-end;display:flex}.neeto-editor__image-menu .neeto-ui-dropdown__popup{display:flex;min-width:0;min-width:auto}.neeto-editor__image-menu .neeto-ui-dropdown__popup .neeto-ui-btn .neeto-ui-btn__icon{height:18px!important;width:18px!important}.neeto-editor__image-menu-btn{border-radius:100%;position:absolute!important;right:6px;top:6px;z-index:1}.neeto-editor-menu-font-size-options{padding:8px!important}.neeto-editor-menu-font-size-options .neeto-ui-dropdown__popup-menu-item{background-color:transparent!important}.neeto-editor-menu-font-size-options .neeto-editor-menu-font-size-options__item-btn{border-radius:var(--neeto-ui-btn-border-radius)!important;justify-content:center;min-height:34px;min-width:34px;overflow:hidden;padding-left:0!important;padding-right:0!important;text-align:center}.neeto-editor-menu-font-size-options .neeto-editor-menu-font-size-options__item-btn--selected{background-color:rgb(var(--neeto-ui-accent-100))!important;color:rgb(var(--neeto-ui-accent-800))!important}";
 injectCss.n(css,{});
@@ -19534,4 +19746,4 @@ exports.useEditor = useEditor;
 exports.useEditorState = useEditorState$1;
 exports.validateUrl = validateUrl;
 exports.wrappingInputRule = wrappingInputRule;
-//# sourceMappingURL=chunk-DWmDAnNq.cjs.js.map
+//# sourceMappingURL=chunk-kKbY2sPw.cjs.js.map