@bigbinary/neeto-editor 1.47.0 → 1.47.2

package/dist/cjs/{chunk-DutgnIWp.cjs.js → chunk-BxEO1Xq_.cjs.js}

@@ -22,6 +22,7 @@ var neetoCist = require('@bigbinary/neeto-cist');
 require('tippy.js/dist/svg-arrow.css');
 var Link = require('@bigbinary/neeto-icons/Link');
 var Column = require('@bigbinary/neeto-icons/Column');
+var Down = require('@bigbinary/neeto-icons/Down');
 var Dropdown$1 = require('@bigbinary/neetoui/Dropdown');
 var reactI18next = require('react-i18next');
 var Close = require('@bigbinary/neeto-icons/Close');
@@ -75,7 +76,6 @@ var _commonjsHelpers = require('./chunk-B83fTs8d.cjs.js');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var shallow = require('zustand/shallow');
 var zustand = require('zustand');
-var Down = require('@bigbinary/neeto-icons/Down');
 var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
 var Tippy = require('@tippyjs/react');
 var File = require('@bigbinary/neeto-icons/File');
@@ -9994,7 +9994,7 @@ function getAttributesFromExtensions(extensions) {
     return extensionAttributes;
 }
 
-function getNodeType$1(nameOrType, schema) {
+function getNodeType(nameOrType, schema) {
     if (typeof nameOrType === 'string') {
         if (!schema.nodes[nameOrType]) {
             throw Error(`There is no node type named '${nameOrType}'. Maybe you forgot to add the extension?`);
@@ -10847,7 +10847,7 @@ class ExtensionManager {
                 options: extension.options,
                 storage: extension.storage,
                 editor,
-                type: getNodeType$1(extension.name, this.schema),
+                type: getNodeType(extension.name, this.schema),
             };
             const addNodeView = getExtensionField(extension, 'addNodeView', context);
             if (!addNodeView) {
@@ -11194,7 +11194,7 @@ const deleteCurrentNode = () => ({ tr, dispatch }) => {
 };
 
 const deleteNode = typeOrName => ({ tr, state, dispatch }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     const $pos = tr.selection.$anchor;
     for (let depth = $pos.depth; depth > 0; depth -= 1) {
         const node = $pos.node(depth);
@@ -11782,7 +11782,7 @@ const keyboardShortcut = name => ({ editor, view, tr, dispatch, }) => {
 
 function isNodeActive(state, typeOrName, attributes = {}) {
     const { from, to, empty } = state.selection;
-    const type = typeOrName ? getNodeType$1(typeOrName, state.schema) : null;
+    const type = typeOrName ? getNodeType(typeOrName, state.schema) : null;
     const nodeRanges = [];
     state.doc.nodesBetween(from, to, (node, pos) => {
         if (node.isText) {
@@ -11813,7 +11813,7 @@ function isNodeActive(state, typeOrName, attributes = {}) {
 }
 
 const lift = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     const isActive = isNodeActive(state, type, attributes);
     if (!isActive) {
         return false;
@@ -11826,7 +11826,7 @@ const liftEmptyBlock = () => ({ state, dispatch }) => {
 };
 
 const liftListItem = typeOrName => ({ state, dispatch }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     return liftListItem$1(type)(state, dispatch);
 };
 
@@ -11877,7 +11877,7 @@ const resetAttributes = (typeOrName, attributes) => ({ tr, state, dispatch }) =>
         return false;
     }
     if (schemaType === 'node') {
-        nodeType = getNodeType$1(typeOrName, state.schema);
+        nodeType = getNodeType(typeOrName, state.schema);
     }
     if (schemaType === 'mark') {
         markType = getMarkType(typeOrName, state.schema);
@@ -12139,7 +12139,7 @@ function getText(node, options) {
 }
 
 function getNodeAttributes(state, typeOrName) {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     const { from, to } = state.selection;
     const nodes = [];
     state.doc.nodesBetween(from, to, node => {
@@ -12602,7 +12602,7 @@ const setMeta = (key, value) => ({ tr }) => {
 };
 
 const setNode = (typeOrName, attributes = {}) => ({ state, dispatch, chain }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     // TODO: use a fallback like insertContent?
     if (!type.isTextblock) {
         console.warn('[tiptap warn]: Currently "setNode()" only supports text block nodes.');
@@ -12648,7 +12648,7 @@ const setTextSelection = position => ({ tr, dispatch }) => {
 };
 
 const sinkListItem = typeOrName => ({ state, dispatch }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     return sinkListItem$1(type)(state, dispatch);
 };
 
@@ -12729,7 +12729,7 @@ const splitBlock = ({ keepMarks = true } = {}) => ({ tr, state, dispatch, editor
 
 const splitListItem = (typeOrName, overrideAttrs = {}) => ({ tr, state, dispatch, editor, }) => {
     var _a;
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     const { $from, $to } = state.selection;
     // @ts-ignore
     // eslint-disable-next-line
@@ -12856,8 +12856,8 @@ const joinListForwards = (tr, listType) => {
 };
 const toggleList = (listTypeOrName, itemTypeOrName, keepMarks, attributes = {}) => ({ editor, tr, state, dispatch, chain, commands, can, }) => {
     const { extensions, splittableMarks } = editor.extensionManager;
-    const listType = getNodeType$1(listTypeOrName, state.schema);
-    const itemType = getNodeType$1(itemTypeOrName, state.schema);
+    const listType = getNodeType(listTypeOrName, state.schema);
+    const itemType = getNodeType(itemTypeOrName, state.schema);
     const { selection, storedMarks } = state;
     const { $from, $to } = selection;
     const range = $from.blockRange($to);
@@ -12928,8 +12928,8 @@ const toggleMark = (typeOrName, attributes = {}, options = {}) => ({ state, comm
 };
 
 const toggleNode = (typeOrName, toggleTypeOrName, attributes = {}) => ({ state, commands }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
-    const toggleType = getNodeType$1(toggleTypeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
+    const toggleType = getNodeType(toggleTypeOrName, state.schema);
     const isActive = isNodeActive(state, type, attributes);
     if (isActive) {
         return commands.setNode(toggleType);
@@ -12938,7 +12938,7 @@ const toggleNode = (typeOrName, toggleTypeOrName, attributes = {}) => ({ state,
 };
 
 const toggleWrap = (typeOrName, attributes = {}) => ({ state, commands }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     const isActive = isNodeActive(state, type, attributes);
     if (isActive) {
         return commands.lift(type);
@@ -13024,7 +13024,7 @@ const updateAttributes = (typeOrName, attributes = {}) => ({ tr, state, dispatch
         return false;
     }
     if (schemaType === 'node') {
-        nodeType = getNodeType$1(typeOrName, state.schema);
+        nodeType = getNodeType(typeOrName, state.schema);
     }
     if (schemaType === 'mark') {
         markType = getMarkType(typeOrName, state.schema);
@@ -13059,12 +13059,12 @@ const updateAttributes = (typeOrName, attributes = {}) => ({ tr, state, dispatch
 };
 
 const wrapIn = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     return wrapIn$1(type, attributes)(state, dispatch);
 };
 
 const wrapInList = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
-    const type = getNodeType$1(typeOrName, state.schema);
+    const type = getNodeType(typeOrName, state.schema);
     return wrapInList$1(type, attributes)(state, dispatch);
 };
 
@@ -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",
@@ -16008,7 +16008,6 @@ var TableOption$2 = function TableOption(_ref) {
         autoFocus: true,
         "data-cy": "neeto-editor-fixed-menu-table-option-input",
         min: "1",
-        placeholder: t("neetoEditor.placeholders.rows"),
         type: "number",
         value: rows,
         onChange: utils$1.withEventTargetValue(setRows)
@@ -16021,7 +16020,6 @@ var TableOption$2 = function TableOption(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx("input", {
         "data-cy": "neeto-editor-bubble-menu-table-option-input",
         min: "1",
-        placeholder: t("neetoEditor.placeholders.columns"),
         type: "number",
         value: columns,
         onChange: utils$1.withEventTargetValue(setColumns)
@@ -16031,11 +16029,13 @@ var TableOption$2 = function TableOption(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx(Button$1, {
         "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
         icon: Check,
+        size: "small",
         style: "secondary",
         onClick: handleSubmit
       }), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
         "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
         icon: Close,
+        size: "small",
         style: "secondary",
         onClick: handleClose
       })]
@@ -16043,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,
@@ -16221,8 +16221,9 @@ var buildBubbleMenuOptions = function buildBubbleMenuOptions(_ref2) {
 var getTextMenuDropdownOptions = function getTextMenuDropdownOptions(_ref3) {
   var editor = _ref3.editor,
     options = _ref3.options;
-  var textOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, constants.EDITOR_OPTIONS.H1, {
+  var textOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, constants.EDITOR_OPTIONS.H1, {
     optionName: "Heading 1",
+    icon: TextH1,
     active: editor.isActive("heading", {
       level: 1
     }),
@@ -16233,6 +16234,7 @@ var getTextMenuDropdownOptions = function getTextMenuDropdownOptions(_ref3) {
     }
   }), constants.EDITOR_OPTIONS.H2, {
     optionName: "Heading 2",
+    icon: TextH2,
     active: editor.isActive("heading", {
       level: 2
     }),
@@ -16243,6 +16245,7 @@ var getTextMenuDropdownOptions = function getTextMenuDropdownOptions(_ref3) {
     }
   }), constants.EDITOR_OPTIONS.H3, {
     optionName: "Heading 3",
+    icon: TextH3,
     active: editor.isActive("heading", {
       level: 3
     }),
@@ -16251,20 +16254,9 @@ var getTextMenuDropdownOptions = function getTextMenuDropdownOptions(_ref3) {
         level: 3
       }).run();
     }
-  }), constants.EDITOR_OPTIONS.LIST_ORDERED, {
-    optionName: "Ordered List",
-    active: editor.isActive("orderedList"),
-    command: function command() {
-      return editor.chain().focus().toggleOrderedList().run();
-    }
-  }), constants.EDITOR_OPTIONS.LIST_BULLETS, {
-    optionName: "Bulleted List",
-    active: editor.isActive("bulletList"),
-    command: function command() {
-      return editor.chain().focus().toggleBulletList().run();
-    }
   }), constants.EDITOR_OPTIONS.PARAGRAPH, {
     optionName: "Text",
+    icon: TextP,
     active: editor.isActive("paragraph"),
     command: function command() {
       return editor.chain().focus().setNode("paragraph").run();
@@ -16277,9 +16269,9 @@ var getTextMenuDropdownOptions = function getTextMenuDropdownOptions(_ref3) {
   });
   return result;
 };
-var getNodeType = function getNodeType(options) {
+var getNodeIcon = function getNodeIcon(options) {
   var _options$find;
-  return ((_options$find = options.find(ramda.prop("active"))) === null || _options$find === void 0 ? void 0 : _options$find.optionName) || "Text";
+  return ((_options$find = options.find(ramda.prop("active"))) === null || _options$find === void 0 ? void 0 : _options$find.icon) || TextP;
 };
 var renderOptionButton = function renderOptionButton(_ref4) {
   var tooltip = _ref4.tooltip,
@@ -16288,16 +16280,16 @@ 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({
+    className: "neeto-editor-bubble-menu__item",
     "data-cy": "neeto-editor-bubble-menu-".concat(optionName, "-option"),
     icon: Icon,
-    size: "small",
+    size: "medium",
     style: active ? "secondary" : "text",
     tooltipProps: {
       content: tooltip,
       position: "bottom",
-      theme: "dark",
-      delay: [500]
+      theme: "dark"
     },
     onClick: command
   }, generateFocusProps(highlight)), optionName);
@@ -16411,7 +16403,8 @@ var TextColorOption = function TextColorOption(_ref) {
     buttonProps: {
       tabIndex: -1,
       tooltipProps: {
-        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
       },
       className: "neeto-editor-fixed-menu__item neeto-editor-text-color-option"
     },
@@ -16493,7 +16486,7 @@ var Options = function Options(_ref) {
     editor: editor,
     options: options
   });
-  var nodeType = getNodeType(dropdownOptions);
+  var Icon = getNodeIcon(dropdownOptions);
   var isEmojiActive = options.includes(constants.EDITOR_OPTIONS.EMOJI);
   var isTextColorOptionActive = options.includes(constants.EDITOR_OPTIONS.TEXT_COLOR);
   var isLinkActive = options.includes(constants.EDITOR_OPTIONS.LINK);
@@ -16537,15 +16530,36 @@ var Options = function Options(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsx(Dropdown$1, {
       buttonSize: "small",
       buttonStyle: "text",
-      label: nodeType,
+      label: Icon,
       strategy: "fixed",
+      buttonProps: {
+        icon: Icon,
+        iconPosition: "left",
+        iconSize: 22,
+        label: /*#__PURE__*/jsxRuntime.jsx(Down, {
+          size: 12
+        }),
+        "data-cy": "neeto-editor-fixed-menu-font-size-option",
+        style: "text",
+        size: "small",
+        className: "neeto-editor-bubble-menu__item neeto-editor-font-size__wrapper"
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
+        className: "neeto-ui-flex neeto-ui-gap-1 neeto-editor-menu-font-size-options",
         children: dropdownOptions.map(function (_ref2) {
           var optionName = _ref2.optionName,
-            command = _ref2.command;
+            command = _ref2.command,
+            Icon = _ref2.icon;
           return /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+            className: "neeto-editor-menu-font-size-options__item-btn",
+            tooltipProps: {
+              content: optionName,
+              position: "bottom"
+            },
             onClick: command,
-            children: optionName
+            children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+              size: 22
+            })
           }, optionName);
         })
       })
@@ -16629,7 +16643,7 @@ var Bubble = function Bubble(_ref) {
           setIsLinkOptionActive(false);
           setIsTableOptionActive(false);
         },
-        theme: "neeto-editor-bubble-menu",
+        theme: "light neeto-editor-bubble-menu-tippy-box",
         maxWidth: 500
       },
       children: /*#__PURE__*/jsxRuntime.jsx(Options, {
@@ -18101,8 +18115,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) {
@@ -18123,18 +18137,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
@@ -18147,8 +18161,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) {
@@ -18184,7 +18198,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 () {
@@ -18204,8 +18218,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,
@@ -18304,7 +18318,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 () {
@@ -18356,7 +18371,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);
@@ -18405,8 +18420,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,
@@ -18418,16 +18433,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)), {}, {
@@ -18440,8 +18455,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,
@@ -18480,7 +18495,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,
@@ -18512,7 +18527,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)))
@@ -18585,8 +18600,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,
@@ -18745,7 +18760,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
       }),
@@ -18787,8 +18802,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,
@@ -18826,7 +18841,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));
@@ -18966,6 +18981,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,
@@ -19069,7 +19244,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, constants.EDITOR_OPTIONS.BOLD, {
   mac: "⌘B",
@@ -19105,13 +19281,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,
@@ -19122,7 +19298,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]$/);
   });
@@ -19192,14 +19369,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
   [{
@@ -19359,7 +19536,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
@@ -19375,7 +19553,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"));
@@ -19463,7 +19642,7 @@ function renderTooltipContent(label, optionName) {
   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}";
+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}.tippy-box[data-theme~=neeto-editor-bubble-menu-tippy-box]{box-shadow:none!important}.tippy-box[data-theme~=neeto-editor-bubble-menu-tippy-box] .tippy-content{padding:0!important}.neeto-editor-bubble-menu{align-items:center;background:rgb(var(--neeto-ui-white));border:1px solid rgb(var(--neeto-ui-gray-400));border-radius:var(--neeto-ui-rounded);display:flex;flex-direction:row;gap:0;justify-content:flex-start;overflow-x:auto;padding:0;position:relative}.neeto-editor-bubble-menu>.neeto-editor-bubble-menu__item:first-child,.neeto-editor-bubble-menu>.neeto-editor-fixed-menu__item:first-child{border-bottom-left-radius:var(--neeto-ui-rounded);border-top-left-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu>.neeto-editor-bubble-menu__item:last-child,.neeto-editor-bubble-menu>.neeto-editor-fixed-menu__item:last-child{border-bottom-right-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item,.neeto-editor-bubble-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;color:rgb(var(--neeto-ui-black))!important;flex-shrink:0;height:36px;justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:36px}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item .neeto-ui-btn__icon,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon{color:rgb(var(--neeto-ui-black))}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item .neeto-ui-btn__icon path,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon path{stroke-width:1.5px}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item.active,.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item:active,.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item:hover,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item.active,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item:active,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-100))}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item.neeto-ui-btn--style-secondary{background-color:rgb(var(--neeto-ui-accent-100))!important}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item.neeto-ui-btn--style-secondary .neeto-ui-btn__icon{color:rgb(var(--neeto-ui-accent-800))!important}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link{align-items:center;display:flex;gap:6px;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;background-color:var(--neeto-ui-input-bg-color);border:var(--neeto-ui-input-border-width) solid var(--neeto-ui-input-border-color);border-radius:var(--neeto-ui-input-border-radius);color:var(--neeto-ui-input-color);font-size:var(--neeto-ui-input-font-size);height:28px;line-height:1.2;outline:none;transition:var(--neeto-ui-transition);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:start;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:var(--neeto-ui-input-bg-color);border:var(--neeto-ui-input-border-width) solid var(--neeto-ui-input-border-color);border-radius:var(--neeto-ui-input-border-radius);color:var(--neeto-ui-input-color);font-size:var(--neeto-ui-input-font-size);height:28px;line-height:1.2;outline:none;padding:3px 5px;transition:var(--neeto-ui-transition);width:60px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::-moz-placeholder{color:rgb(var(--neeto-ui-gray-500))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::placeholder{color:rgb(var(--neeto-ui-gray-500))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__menu-item{display:flex;flex-direction:column;gap:6px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__input-label{color:rgb(var(--neeto-ui-gray-800))}.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,{});
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -19564,7 +19743,7 @@ exports.getMarkRange = getMarkRange;
 exports.getMarkType = getMarkType;
 exports.getMarksBetween = getMarksBetween;
 exports.getNodeAtPosition = getNodeAtPosition;
-exports.getNodeType = getNodeType$1;
+exports.getNodeType = getNodeType;
 exports.highlightFocussedNode = highlightFocussedNode;
 exports.isAtEndOfNode = isAtEndOfNode;
 exports.isAtStartOfNode = isAtStartOfNode;
@@ -19581,4 +19760,4 @@ exports.useEditor = useEditor;
 exports.useEditorState = useEditorState$1;
 exports.validateUrl = validateUrl;
 exports.wrappingInputRule = wrappingInputRule;
-//# sourceMappingURL=chunk-DutgnIWp.cjs.js.map
+//# sourceMappingURL=chunk-BxEO1Xq_.cjs.js.map