@bigbinary/neeto-editor-frontend 0.0.0-stage → 2.0.2

package/dist/chunk-DsAUS6bL.js

@@ -0,0 +1,3464 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default, { memo, createElement, useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { isEmpty, prop, fromPairs, assoc, not, last } from 'ramda';
+import i18n, { t as t$1 } from 'i18next';
+import * as yup from 'yup';
+import { A as ALL_PROTOCOL_URL_REGEXP, E as EDITOR_OPTIONS, b as URL_VALIDATORS } from './chunk-DrHVV_g1.js';
+import { Megaphone, Info, AlertTriangle, AlertOctagon, CheckCircle2, AtSign, Flag, Smile, Check, X, RotateCw, Baseline, Heading1, Heading2, Heading3, Pilcrow, Undo, Redo, Paperclip, ImageUp, Video, List, ListOrdered, Quote, Code, SquareCode, Bold, Italic, Underline, Link, Strikethrough, Highlighter, ChevronDown, Table, Ellipsis, FileText, Heading4, Heading5, ListChecks } from 'lucide-react';
+import { e as emojiPickerApi, u as useEditorStore, g as generateFocusProps, B as BubbleMenu } from './chunk-Di3ipdfT.js';
+import classnames from 'classnames';
+import { isNotEmpty, findBy, isNotPresent, noop, hyphenate, filterBy } from '@bigbinary/neeto-cist';
+import { DropdownMenu, Avatar, Button as Button$1, Input, Label, Typography, Tooltip, Dialog, Tabs, Toastr, Checkbox } from '@bigbinary/neeto-atoms';
+import { Popover, PopoverTrigger, PopoverContent } from '@bigbinary/neeto-atoms/primitives/Popover';
+import { useTranslation } from 'react-i18next';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
+import _inherits from '@babel/runtime/helpers/inherits';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { Picker } from 'emoji-mart';
+import { withEventTargetValue, hyphenize } from '@bigbinary/neeto-commons-frontend/v2/utils';
+import { HexColorPicker } from 'react-colorful';
+import { N as Node, F as Fragment, S as Slice, a as Selection } from './chunk-DgZGzqPs.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/v2/ImageUploader';
+import { u as useDropFiles, d as directUploadsApi } from './chunk-BFKmIsWV.js';
+import { F as File, u as useFileUploader, b as ALLOWED_IMAGE_TYPES, d as ALLOWED_VIDEO_TYPES, c as convertToFileSize, e as DEFAULT_IMAGE_UPLOAD_CONFIG, f as DEFAULT_VIDEO_UPLOAD_CONFIG, V as VIDEO_EMBED_FORM_VALIDATION_SCHEMA, g as getTabs } from './chunk-1NlIGj6C.js';
+import { withT, useOnClickOutside } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import { Form, Input as Input$1, ActionBlock } from '@bigbinary/neeto-atoms/formik';
+import { createPortal } from 'react-dom';
+import { shallow } from 'zustand/shallow';
+import DynamicVariables from '@bigbinary/neeto-molecules/v2/DynamicVariables';
+import Tippy from '@tippyjs/react';
+
+var DEFAULT_EDITOR_OPTIONS = [EDITOR_OPTIONS.BOLD, EDITOR_OPTIONS.ITALIC, EDITOR_OPTIONS.UNDERLINE, EDITOR_OPTIONS.STRIKETHROUGH, EDITOR_OPTIONS.LINK, EDITOR_OPTIONS.PARAGRAPH, EDITOR_OPTIONS.H1, EDITOR_OPTIONS.H2, EDITOR_OPTIONS.H3, EDITOR_OPTIONS.H4, EDITOR_OPTIONS.H5, EDITOR_OPTIONS.H6, EDITOR_OPTIONS.LIST_BULLETS, EDITOR_OPTIONS.LIST_ORDERED, EDITOR_OPTIONS.CODE];
+var EDITOR_PADDING_SIZE = 12;
+var EDITOR_BORDER_SIZE = 1;
+var EDITOR_LINE_HEIGHT = 21;
+var IMAGE_REGEX = new RegExp(/(<img[^>]*?>)(?![\s\S]*<\/figure>)/g);
+var IMAGE_REPLACEMENT_PATTERN = "<figure>$1</figure>";
+var EMPTY_DIV_REGEX = new RegExp(/<div[^>]*?>\s*(?:<br[^>]*?>)\s*<\/div>/g);
+var TRAILING_BR_REGEX = new RegExp(/\s*(?:<br[^>]*?>)+\s*$/);
+var LINK_VALIDATION_SCHEMA = yup.object().shape({
+  textContent: yup.string().required(t$1("neetoEditor.error.textRequired")),
+  urlString: yup.string().matches(ALL_PROTOCOL_URL_REGEXP, t$1("neetoEditor.error.invalidUrl")).required(t$1("neetoEditor.error.urlRequired"))
+});
+
+var getEditorStyles = function getEditorStyles(_ref) {
+  var rows = _ref.rows;
+  var editorHeight = rows * EDITOR_LINE_HEIGHT + 2 * (EDITOR_PADDING_SIZE + EDITOR_BORDER_SIZE);
+  return "min-height: ".concat(editorHeight, "px;");
+};
+var clipboardTextParser = function clipboardTextParser(text, context) {
+  var nodes = [];
+  var blocks = text.split(/\n/);
+  blocks.forEach(function (line) {
+    var nodeJson = {
+      type: "paragraph"
+    };
+    if (isNotEmpty(line)) {
+      nodeJson.content = [{
+        type: "text",
+        text: line
+      }];
+    }
+    var node = Node.fromJSON(context.doc.type.schema, nodeJson);
+    nodes.push(node);
+  });
+  var fragment = Fragment.fromArray(nodes);
+  return Slice.maxOpen(fragment);
+};
+var setInitialPosition = function setInitialPosition(editor) {
+  var state = editor.state,
+    view = editor.view;
+  var endPosition = Selection.atEnd(state.doc);
+  var transaction = state.tr;
+  transaction.setSelection(endPosition);
+  view.dispatch(transaction);
+};
+var isEditorOverlaysActive = function isEditorOverlaysActive() {
+  return document.querySelector(".ne-media-uploader,.ne-embed-modal,.tippy-content,.ne-link-popover");
+};
+var validateAndFormatUrl = function validateAndFormatUrl(url) {
+  if (!ALL_PROTOCOL_URL_REGEXP.test(url)) {
+    return null;
+  }
+  if (!/^[a-zA-Z]\w*:/i.test(url)) {
+    return "https://".concat(url);
+  }
+  return url;
+};
+var transformEditorContent = function transformEditorContent(content) {
+  var _content$replaceAll;
+  return content === null || content === void 0 || (_content$replaceAll = content.replaceAll(IMAGE_REGEX, IMAGE_REPLACEMENT_PATTERN)) === null || _content$replaceAll === void 0 || (_content$replaceAll = _content$replaceAll.replaceAll(EMPTY_DIV_REGEX, "")) === null || _content$replaceAll === void 0 ? void 0 : _content$replaceAll.replace(TRAILING_BR_REGEX, "");
+};
+var isEmojiSuggestionsMenuActive = function isEmojiSuggestionsMenuActive() {
+  return !!document.querySelector(".neeto-editor-emoji-suggestion");
+};
+var transformPastedHTML = function transformPastedHTML(content) {
+  var contentWithoutBr = content.replaceAll("<br />", "<p></p>");
+  var doc = new DOMParser().parseFromString(contentWithoutBr, "text/html");
+
+  // ProseMirror tags clipboard output from any TipTap/ProseMirror editor with
+  // `data-pm-slice`. When present, the paste is coming from another
+  // neeto-editor instance and we preserve the author's color choices. When
+  // absent, the source is external (Word, websites, customer messages) and we
+  // strip inline colors so foreign theming does not bleed into the editor.
+  var isInternalPaste = doc.querySelector("[data-pm-slice]") !== null;
+  if (!isInternalPaste) {
+    doc.querySelectorAll("[style]").forEach(function (el) {
+      el.style.color = "";
+      el.style.backgroundColor = "";
+    });
+  }
+  return doc.body.innerHTML;
+};
+var handlePaste = function handlePaste(view, event, slice) {
+  try {
+    view.state.tr.replaceSelection(slice);
+    return false;
+  } catch (_unused) {
+    var _event$clipboardData;
+    var text = ((_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData("text/plain")) || slice.content.textBetween(0, slice.content.size, "\n").trim();
+    if (text) view.dispatch(view.state.tr.insertText(text).scrollIntoView());
+    return true;
+  }
+};
+var buildLevelsFromOptions = function buildLevelsFromOptions(options) {
+  var levels = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EDITOR_OPTIONS.H1, 1), EDITOR_OPTIONS.H2, 2), EDITOR_OPTIONS.H3, 3), EDITOR_OPTIONS.H4, 4), EDITOR_OPTIONS.H5, 5), EDITOR_OPTIONS.H6, 6);
+  return Object.entries(levels).filter(function (heading) {
+    return options.includes(heading[0]);
+  }).map(function (heading) {
+    return heading[1];
+  });
+};
+
+// Suggestion popups (slash, mention, emoji) append to the editor container by
+// default so they stay usable inside a Radix Dialog, whose focus trap excludes
+// document.body. An editor docked at the viewport bottom (e.g. a chat composer)
+// can opt into appending to body via the Editor `appendSuggestionsToBody` prop,
+// so the popup escapes the container's clipping and stacking context and can
+// flip upward into the available space.
+var getSuggestionAppendTo = function getSuggestionAppendTo(editor) {
+  return function () {
+    var _editor$storage, _container$containerR, _container$containerR2;
+    var container = editor === null || editor === void 0 || (_editor$storage = editor.storage) === null || _editor$storage === void 0 ? void 0 : _editor$storage.editorContainer;
+    return container !== null && container !== void 0 && container.appendSuggestionsToBody ? document.body : (_container$containerR = container === null || container === void 0 || (_container$containerR2 = container.containerRef) === null || _container$containerR2 === void 0 ? void 0 : _container$containerR2.current) !== null && _container$containerR !== void 0 ? _container$containerR : document.body;
+  };
+};
+
+var CALLOUT_TYPES = [{
+  type: "default",
+  label: t$1("neetoEditor.menu.calloutDefault"),
+  icon: Megaphone,
+  bgColor: "--neeto-editor-gray-100"
+}, {
+  type: "info",
+  label: t$1("neetoEditor.menu.calloutInfo"),
+  icon: Info,
+  bgColor: "--neeto-editor-info-100",
+  iconColor: "var(--ne-editor-content-callout-info-foreground-color)"
+}, {
+  type: "warning",
+  label: t$1("neetoEditor.menu.calloutWarning"),
+  icon: AlertTriangle,
+  bgColor: "--neeto-editor-warning-100",
+  iconColor: "var(--ne-editor-content-callout-warning-foreground-color)"
+}, {
+  type: "error",
+  label: t$1("neetoEditor.menu.calloutError"),
+  icon: AlertOctagon,
+  bgColor: "--neeto-editor-error-100",
+  iconColor: "var(--ne-editor-content-callout-error-foreground-color)"
+}, {
+  type: "success",
+  label: t$1("neetoEditor.menu.calloutSuccess"),
+  icon: CheckCircle2,
+  bgColor: "--neeto-editor-success-100",
+  iconColor: "var(--ne-editor-content-callout-success-foreground-color)"
+}];
+
+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), true).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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(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) {
+  function EmojiPickerMenu() {
+    var _this;
+    _classCallCheck(this, EmojiPickerMenu);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, EmojiPickerMenu, [].concat(args));
+    _defineProperty(_this, "ref", /*#__PURE__*/React__default.createRef());
+    _defineProperty(_this, "fetchEmojiData", /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _yield$emojiPickerApi, data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return emojiPickerApi.fetch();
+          case 3:
+            _yield$emojiPickerApi = _context.sent;
+            data = _yield$emojiPickerApi.data;
+            return _context.abrupt("return", data);
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](0);
+            return _context.abrupt("return", {});
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 8]]);
+    })));
+    _defineProperty(_this, "onKeyDown", function (_ref2) {
+      var event = _ref2.event;
+      if (event.key === "Escape") {
+        _this.props.editor.chain().focus().deleteRange(_this.props.range).run();
+        return true;
+      }
+      return false;
+    });
+    _defineProperty(_this, "handleSelect", function (emoji) {
+      var _this$props$setActive, _this$props;
+      _this.props.editor.chain().focus().deleteRange(_this.props.range).setEmoji(emoji).run();
+      (_this$props$setActive = (_this$props = _this.props).setActive) === null || _this$props$setActive === void 0 || _this$props$setActive.call(_this$props, false);
+    });
+    return _this;
+  }
+  _inherits(EmojiPickerMenu, _React$Component);
+  return _createClass(EmojiPickerMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      new Picker(_objectSpread$b(_objectSpread$b({}, this.props), {}, {
+        onEmojiSelect: this.handleSelect,
+        style: {
+          maxWidth: "100%"
+        },
+        theme: "light",
+        "native": true,
+        previewPosition: "none",
+        showSkinTones: false,
+        data: this.fetchEmojiData,
+        ref: this.ref
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/jsx("div", {
+        "data-testid": "neeto-editor-emoji-picker",
+        ref: this.ref,
+        style: {
+          minWidth: "350px"
+        }
+      });
+    }
+  }]);
+}(React__default.Component);
+EmojiPickerMenu.defaultProps = {
+  editor: {},
+  range: {}
+};
+
+var validateUrl = function validateUrl(url) {
+  if (!url) return false;
+  for (var _i = 0, _Object$values = Object.values(URL_VALIDATORS); _i < _Object$values.length; _i++) {
+    var validator = _Object$values[_i];
+    var result = validator(url);
+    if (result) return result;
+  }
+  return false;
+};
+
+var Menu$4 = DropdownMenu.Menu,
+  MenuItem$3 = DropdownMenu.MenuItem;
+var Mentions = function Mentions(_ref) {
+  var editor = _ref.editor,
+    mentions = _ref.mentions,
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
+    label = _ref.label;
+  if (isEmpty(mentions)) return null;
+  var renderItems = mentions.map(function (_ref2) {
+    var key = _ref2.key,
+      name = _ref2.name,
+      imageUrl = _ref2.imageUrl;
+    return /*#__PURE__*/jsx(MenuItem$3, {
+      "data-testid": "neeto-editor-mention-option-".concat(key),
+      prefix: /*#__PURE__*/jsx(Avatar, {
+        size: "sm",
+        user: {
+          name: name,
+          imageUrl: imageUrl
+        }
+      }),
+      onClick: function onClick() {
+        return editor.commands.setMention({
+          id: key,
+          label: name
+        });
+      },
+      children: name
+    }, key);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown min-w-56"
+      },
+      icon: AtSign,
+      triggerProps: {
+        "data-testid": "neeto-editor-mention-option"
+      },
+      children: renderItems
+    });
+  }
+  return /*#__PURE__*/jsx(DropdownMenu, {
+    "data-testid": "neeto-editor-mention-option",
+    dropdownProps: {
+      className: "ne-editor-dropdown min-w-56"
+    },
+    icon: AtSign,
+    position: "bottom-start",
+    buttonProps: {
+      variant: "ghost",
+      size: "sm",
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      className: "ne-toolbar-item ne-toolbar-dropdown"
+    },
+    children: /*#__PURE__*/jsx(Menu$4, {
+      children: renderItems
+    })
+  });
+};
+var Mentions$1 = /*#__PURE__*/memo(Mentions);
+
+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), true).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 MenuButton = function MenuButton(_ref) {
+  var icon = _ref.icon,
+    command = _ref.command,
+    optionName = _ref.optionName,
+    highlight = _ref.highlight,
+    _ref$disabled = _ref.disabled,
+    isButtonDisabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    label = _ref.label;
+  var _useEditorStore = useEditorStore(function (store) {
+      var _store$marksState, _store$marksState2;
+      return {
+        isActive: (_store$marksState = store["marksState"]) === null || _store$marksState === void 0 || (_store$marksState = _store$marksState[optionName]) === null || _store$marksState === void 0 ? void 0 : _store$marksState["isActive"],
+        disabled: (_store$marksState2 = store["marksState"]) === null || _store$marksState2 === void 0 || (_store$marksState2 = _store$marksState2[optionName]) === null || _store$marksState2 === void 0 ? void 0 : _store$marksState2["disabled"]
+      };
+    }, shallow),
+    isActive = _useEditorStore.isActive,
+    _useEditorStore$disab = _useEditorStore.disabled,
+    disabled = _useEditorStore$disab === void 0 ? isButtonDisabled : _useEditorStore$disab;
+  return /*#__PURE__*/jsx(Button$1, _objectSpread$a({
+    disabled: disabled,
+    icon: icon,
+    className: "ne-toolbar-item",
+    "data-testid": "neeto-editor-fixed-menu-".concat(optionName, "-option"),
+    tabIndex: "-1",
+    variant: isActive ? "secondary" : "ghost",
+    tooltipProps: {
+      content: renderTooltipContent(label, optionName),
+      position: "bottom"
+    },
+    onClick: command
+  }, generateFocusProps(highlight)));
+};
+var MenuButton$1 = /*#__PURE__*/memo(MenuButton);
+
+var CalloutIcon = function CalloutIcon(_ref) {
+  var _currentType$icon;
+  var currentType = _ref.currentType;
+  var Icon = (_currentType$icon = currentType === null || currentType === void 0 ? void 0 : currentType.icon) !== null && _currentType$icon !== void 0 ? _currentType$icon : Flag;
+  return /*#__PURE__*/jsx(Icon, {
+    size: 16
+  });
+};
+
+var MenuItem$2 = DropdownMenu.MenuItem;
+var CalloutTypeOption = function CalloutTypeOption(_ref) {
+  var calloutType = _ref.calloutType,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick;
+  var Icon = calloutType.icon;
+  return /*#__PURE__*/jsx(MenuItem$2, {
+    onClick: onClick,
+    "data-testid": "callout-type-option",
+    isActive: isSelected,
+    prefix: /*#__PURE__*/jsx(Icon, {
+      "data-testid": "callout-type-emoji",
+      size: 16,
+      style: {
+        stroke: calloutType.iconColor
+      }
+    }),
+    children: calloutType.label
+  });
+};
+
+var RenderCalloutOptions = function RenderCalloutOptions(_ref) {
+  var isInCallout = _ref.isInCallout,
+    currentCalloutAttrs = _ref.currentCalloutAttrs,
+    handleCalloutTypeClick = _ref.handleCalloutTypeClick;
+  return CALLOUT_TYPES.map(function (calloutType, idx) {
+    return /*#__PURE__*/createElement(CalloutTypeOption, {
+      calloutType: calloutType,
+      isSelected: isInCallout && (currentCalloutAttrs === null || currentCalloutAttrs === void 0 ? void 0 : currentCalloutAttrs.type) === calloutType.type,
+      key: idx,
+      onClick: function onClick() {
+        return handleCalloutTypeClick(calloutType);
+      }
+    });
+  });
+};
+
+var CalloutDropdown = function CalloutDropdown(_ref) {
+  var editor = _ref.editor,
+    label = _ref.label,
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var dropdownRef = useRef(null);
+  var isInCallout = editor.isActive("callout");
+  var currentCalloutAttrs = isInCallout ? editor.getAttributes("callout") : null;
+  var currentType = findBy({
+    type: currentCalloutAttrs === null || currentCalloutAttrs === void 0 ? void 0 : currentCalloutAttrs.type
+  }, CALLOUT_TYPES) || CALLOUT_TYPES[0];
+  var handleCalloutTypeClick = function handleCalloutTypeClick(calloutType) {
+    var editorChain = editor.chain().focus();
+    var isSameType = isInCallout && (currentCalloutAttrs === null || currentCalloutAttrs === void 0 ? void 0 : currentCalloutAttrs.type) === calloutType.type;
+    if (isSameType) {
+      editorChain.lift("callout").run();
+    } else if (isInCallout) {
+      editorChain.updateAttributes("callout", {
+        type: calloutType.type,
+        emoji: calloutType.emoji
+      }).run();
+    } else {
+      editorChain.setCallout({
+        type: calloutType.type,
+        emoji: calloutType.emoji
+      }).run();
+    }
+  };
+  var renderOptions = /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(DropdownMenu.Label, {
+      children: t("neetoEditor.menu.selectCalloutType")
+    }), /*#__PURE__*/jsx(RenderCalloutOptions, {
+      currentCalloutAttrs: currentCalloutAttrs,
+      handleCalloutTypeClick: handleCalloutTypeClick,
+      isInCallout: isInCallout
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown w-[200px] p-2"
+      },
+      icon: isInCallout ? currentType.icon : Flag,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-callout-option"
+      },
+      children: renderOptions
+    });
+  }
+  return /*#__PURE__*/jsx(DropdownMenu, {
+    dropdownProps: {
+      className: "ne-editor-dropdown w-[200px] p-2"
+    },
+    icon: /*#__PURE__*/jsx(CalloutIcon, {
+      currentType: isInCallout ? currentType : null
+    }),
+    position: "bottom-start",
+    triggerRef: dropdownRef,
+    buttonProps: {
+      "data-testid": "neeto-editor-fixed-menu-callout-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"
+      },
+      variant: isInCallout ? "secondary" : "ghost",
+      className: "ne-toolbar-item ne-toolbar-dropdown"
+    },
+    children: /*#__PURE__*/jsx(DropdownMenu.Menu, {
+      children: renderOptions
+    })
+  });
+};
+
+var EmojiOption = function EmojiOption(_ref) {
+  var editor = _ref.editor,
+    setActive = _ref.setActive,
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
+    label = _ref.label;
+  // Bumping this key remounts the DropdownMenu, which closes it after an
+  // emoji is picked. The wrapper exposes onClose for the close direction
+  // but no programmatic close, and going controlled via isOpen + onClick
+  // flips the wrapper into SplitTrigger mode (a two-button ButtonGroup).
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    resetKey = _useState2[0],
+    setResetKey = _useState2[1];
+  var handlePicked = function handlePicked() {
+    setActive(false);
+    setResetKey(function (k) {
+      return k + 1;
+    });
+  };
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/createElement(DropdownMenu.SubMenu, {
+      label: label,
+      icon: Smile,
+      key: resetKey,
+      contentProps: {
+        className: "ne-editor-dropdown neeto-editor-fixed-menu__emoji-dropdown min-w-[350px] p-0"
+      },
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-emoji-option"
+      }
+    }, /*#__PURE__*/jsx(EmojiPickerMenu, {
+      editor: editor,
+      setActive: handlePicked
+    }));
+  }
+  return /*#__PURE__*/jsx(DropdownMenu, {
+    closeOnSelect: false,
+    icon: Smile,
+    position: "bottom-start",
+    buttonProps: {
+      variant: "ghost",
+      tabIndex: -1,
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      className: "ne-toolbar-item ne-toolbar-dropdown",
+      "data-testid": "neeto-editor-fixed-menu-emoji-option"
+    },
+    dropdownProps: {
+      className: "ne-editor-dropdown neeto-editor-fixed-menu__emoji-dropdown min-w-[350px] p-0"
+    },
+    onClose: function onClose() {
+      return setActive(false);
+    },
+    children: /*#__PURE__*/jsx(EmojiPickerMenu, {
+      editor: editor,
+      setActive: handlePicked
+    })
+  }, resetKey);
+};
+var EmojiOption$1 = /*#__PURE__*/memo(EmojiOption);
+
+var TextColorOption = function TextColorOption(_ref) {
+  var editor = _ref.editor,
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
+    label = _ref.label;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  // Bumping this key remounts the DropdownMenu, which closes it after the
+  // user clicks Save / Reset / Cancel. See the analogous comment in
+  // TableOption for why we close via remount instead of controlled isOpen.
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resetKey = _useState4[0],
+    setResetKey = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var closeMenu = function closeMenu() {
+    return setResetKey(function (k) {
+      return k + 1;
+    });
+  };
+  var handleSave = function handleSave() {
+    editor.chain().focus().setColor(color).run();
+    closeMenu();
+  };
+  var handleUnset = function handleUnset() {
+    editor.chain().focus().unsetColor().run();
+    setColor(null);
+    closeMenu();
+  };
+  useEffect(function () {
+    setColor(editor.getAttributes("textStyle").color);
+  }, [resetKey, editor.getAttributes("textStyle").color]);
+  var pickerContent = /*#__PURE__*/jsxs("div", {
+    style: {
+      minWidth: "236px"
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsx(HexColorPicker, {
+      color: color || "#000000",
+      onChange: setColor
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-editor-text-color-option__options-group",
+      children: [/*#__PURE__*/jsx(Input, {
+        autoFocus: true,
+        className: "neeto-editor-text-color-option__options-group__input",
+        placeholder: t("neetoEditor.placeholders.pickColor"),
+        size: "small",
+        value: color,
+        onChange: withEventTargetValue(setColor),
+        onClick: function onClick(event) {
+          return event.stopPropagation();
+        }
+      }), /*#__PURE__*/jsx(Button$1, {
+        icon: Check,
+        size: "sm",
+        onClick: handleSave
+      }), /*#__PURE__*/jsx(Button$1, {
+        icon: X,
+        size: "sm",
+        variant: "ghost",
+        onClick: function onClick() {
+          editor.commands.focus();
+          closeMenu();
+        }
+      }), /*#__PURE__*/jsx(Button$1, {
+        icon: RotateCw,
+        size: "sm",
+        variant: "ghost",
+        tooltipProps: {
+          content: t("neetoEditor.common.resetToDefault"),
+          position: "top"
+        },
+        onClick: handleUnset
+      })]
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/createElement(DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown w-[260px] p-2"
+      },
+      icon: Baseline,
+      key: resetKey,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-text-color-option"
+      }
+    }, pickerContent);
+  }
+  return /*#__PURE__*/jsx(DropdownMenu, {
+    closeOnSelect: false,
+    dropdownProps: {
+      className: "ne-editor-dropdown w-[260px] p-2"
+    },
+    icon: Baseline,
+    position: "bottom-start",
+    buttonProps: {
+      variant: color ? "secondary" : "ghost",
+      tabIndex: -1,
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      className: "ne-toolbar-item ne-toolbar-dropdown neeto-editor-text-color-option",
+      "data-testid": "neeto-editor-fixed-menu-text-color-option"
+    },
+    children: pickerContent
+  }, resetKey);
+};
+
+var LinkOption = function LinkOption(_ref) {
+  var editor = _ref.editor,
+    handleClose = _ref.handleClose,
+    handleAnimateInvalidLink = _ref.handleAnimateInvalidLink;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    link = _useState2[0],
+    setLink = _useState2[1];
+  useEffect(function () {
+    setLink(editor.getAttributes("link").href || "");
+  }, [editor]);
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      handleClose();
+    } else if (event.key === "Enter") {
+      handleSubmit();
+    }
+  };
+  var handleSubmit = function handleSubmit() {
+    if (ALL_PROTOCOL_URL_REGEXP.test(link)) {
+      editor.chain().focus().setLink({
+        href: link
+      }).run();
+      handleClose();
+    } else if (isNotPresent(link)) {
+      editor.chain().focus().unsetLink().run();
+      handleClose();
+    } else {
+      setLink("");
+      handleAnimateInvalidLink();
+    }
+  };
+  var handleReset = function handleReset() {
+    if (link) {
+      setLink("");
+      editor.chain().focus().unsetLink().run();
+    } else {
+      handleClose();
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-editor-bubble-menu__link",
+    onKeyDown: handleKeyDown,
+    children: [/*#__PURE__*/jsx("input", {
+      autoFocus: true,
+      className: "neeto-editor-bubble-menu-link__input",
+      "data-testid": "neeto-editor-link-input",
+      name: "url",
+      placeholder: t("neetoEditor.placeholders.linkInput"),
+      value: link,
+      onChange: function onChange(_ref2) {
+        var value = _ref2.target.value;
+        return setLink(validateAndFormatUrl(value));
+      }
+    }), /*#__PURE__*/jsx(Button$1, {
+      "data-testid": "neeto-editor-link-cancel-button",
+      icon: X,
+      size: "sm",
+      variant: "secondary",
+      onClick: handleReset
+    })]
+  });
+};
+
+var TableOption$2 = function TableOption(_ref) {
+  var editor = _ref.editor,
+    handleClose = _ref.handleClose;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(3),
+    _useState2 = _slicedToArray(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
+  var _useState3 = useState(3),
+    _useState4 = _slicedToArray(_useState3, 2),
+    columns = _useState4[0],
+    setColumns = _useState4[1];
+  var handleSubmit = function handleSubmit() {
+    editor.chain().focus().insertTable({
+      rows: rows,
+      cols: columns,
+      withHeaderRow: true
+    }).run(), setRows(3);
+    setColumns(3);
+    handleClose();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-editor-bubble-menu__table",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-editor-bubble-menu__table__menu-item",
+      children: [/*#__PURE__*/jsx(Label, {
+        className: "neeto-editor-bubble-menu__table__input-label",
+        children: t("neetoEditor.menu.rows")
+      }), /*#__PURE__*/jsx("input", {
+        autoFocus: true,
+        "data-testid": "neeto-editor-bubble-menu-table-rows-input",
+        min: "1",
+        type: "number",
+        value: rows,
+        onChange: withEventTargetValue(setRows)
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-editor-bubble-menu__table__menu-item",
+      children: [/*#__PURE__*/jsx(Label, {
+        className: "neeto-editor-bubble-menu__table__input-label",
+        children: t("neetoEditor.menu.columns")
+      }), /*#__PURE__*/jsx("input", {
+        "data-testid": "neeto-editor-bubble-menu-table-option-input",
+        min: "1",
+        type: "number",
+        value: columns,
+        onChange: withEventTargetValue(setColumns)
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-editor-bubble-menu__table__buttons",
+      children: [/*#__PURE__*/jsx(Button$1, {
+        "data-testid": "neeto-editor-bubble-menu-table-option-create-button",
+        icon: Check,
+        size: "sm",
+        variant: "secondary",
+        onClick: handleSubmit
+      }), /*#__PURE__*/jsx(Button$1, {
+        "data-testid": "neeto-editor-bubble-menu-table-option-close-button",
+        icon: X,
+        size: "sm",
+        variant: "secondary",
+        onClick: handleClose
+      })]
+    })]
+  });
+};
+
+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), true).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 createMenuOptions$2 = function createMenuOptions(_ref) {
+  var tooltips = _ref.tooltips,
+    editor = _ref.editor,
+    setMediaUploader = _ref.setMediaUploader,
+    attachmentProps = _ref.attachmentProps,
+    setIsAddLinkActive = _ref.setIsAddLinkActive;
+  return {
+    font: [{
+      Icon: Bold,
+      command: function command() {
+        return editor.chain().focus().toggleBold().run();
+      },
+      active: editor.isActive("bold"),
+      optionName: "bold",
+      tooltip: tooltips.bold || t$1("neetoEditor.menu.bold")
+    }, {
+      Icon: Italic,
+      command: function command() {
+        return editor.chain().focus().toggleItalic().run();
+      },
+      active: editor.isActive("italic"),
+      optionName: "italic",
+      tooltip: tooltips.italic || t$1("neetoEditor.menu.italic")
+    }, {
+      Icon: Underline,
+      command: function command() {
+        return editor.chain().focus().toggleUnderline().run();
+      },
+      active: editor.isActive("underline"),
+      optionName: "underline",
+      tooltip: tooltips.underline || t$1("neetoEditor.menu.underline")
+    }, {
+      Icon: Link,
+      command: function command() {
+        return setIsAddLinkActive(not);
+      },
+      optionName: "link",
+      tooltip: "Link"
+    }, {
+      Icon: Strikethrough,
+      command: function command() {
+        return editor.chain().focus().toggleStrike().run();
+      },
+      active: editor.isActive("strike"),
+      optionName: "strike",
+      tooltip: tooltips.strike || t$1("neetoEditor.menu.strike")
+    }, {
+      Icon: Highlighter,
+      command: function command() {
+        return editor.chain().focus().toggleHighlight().run();
+      },
+      active: editor.isActive("highlight"),
+      optionName: "highlight",
+      tooltip: tooltips.highlight || t$1("neetoEditor.menu.highlight")
+    }],
+    block: [{
+      Icon: Quote,
+      command: function command() {
+        return editor.chain().focus().toggleBlockquote().run();
+      },
+      active: editor.isActive("blockquote"),
+      optionName: "block-quote",
+      highlight: true,
+      tooltip: tooltips.blockQuote || t$1("neetoEditor.menu.blockQuote")
+    }, {
+      Icon: Code,
+      command: function command() {
+        return editor.chain().focus().toggleCode().run();
+      },
+      active: editor.isActive("code"),
+      optionName: "code",
+      tooltip: tooltips.code || t$1("neetoEditor.menu.code")
+    }, {
+      Icon: SquareCode,
+      command: function command() {
+        return editor.chain().focus().toggleCodeBlock().run();
+      },
+      active: editor.isActive("codeBlock"),
+      optionName: "code-block",
+      tooltip: tooltips.codeBlock || t$1("neetoEditor.menu.codeBlock")
+    }],
+    list: [{
+      Icon: List,
+      command: function command() {
+        return editor.chain().focus().toggleBulletList().run();
+      },
+      active: editor.isActive("bulletList"),
+      optionName: "bullet-list",
+      highlight: true,
+      tooltip: tooltips.bulletList || t$1("neetoEditor.menu.bulletedList")
+    }, {
+      Icon: ListOrdered,
+      command: function command() {
+        return editor.chain().focus().toggleOrderedList().run();
+      },
+      active: editor.isActive("orderedList"),
+      optionName: "ordered-list",
+      highlight: true,
+      tooltip: tooltips.orderedList || t$1("neetoEditor.menu.orderedList")
+    }],
+    misc: [{
+      Icon: Paperclip,
+      command: attachmentProps === null || attachmentProps === void 0 ? void 0 : attachmentProps.handleUploadAttachments,
+      disabled: attachmentProps === null || attachmentProps === void 0 ? void 0 : attachmentProps.isDisabled,
+      active: false,
+      optionName: "attachments",
+      tooltip: tooltips.attachments || t$1("neetoEditor.menu.attachments")
+    }, {
+      Icon: ImageUp,
+      command: function command() {
+        return setMediaUploader(assoc("image", true));
+      },
+      optionName: "image-upload",
+      tooltip: tooltips.imageUpload || t$1("neetoEditor.menu.imageUpload")
+    }, {
+      Icon: Video,
+      command: function command() {
+        return setMediaUploader(assoc("video", true));
+      },
+      optionName: "video-upload",
+      tooltip: tooltips.videoUpload || t$1("neetoEditor.menu.videoUpload")
+    }],
+    right: [{
+      Icon: Undo,
+      command: function command() {
+        return editor.chain().focus().undo().run();
+      },
+      active: false,
+      disabled: !editor.can().undo(),
+      optionName: "undo",
+      tooltip: tooltips.undo || t$1("neetoEditor.menu.undo")
+    }, {
+      Icon: Redo,
+      command: function command() {
+        return editor.chain().focus().redo().run();
+      },
+      active: false,
+      disabled: !editor.can().redo(),
+      optionName: "redo",
+      tooltip: tooltips.redo || t$1("neetoEditor.menu.redo")
+    }]
+  };
+};
+var buildBubbleMenuOptions = function buildBubbleMenuOptions(_ref2) {
+  var tooltips = _ref2.tooltips,
+    editor = _ref2.editor,
+    options = _ref2.options,
+    setMediaUploader = _ref2.setMediaUploader,
+    attachmentProps = _ref2.attachmentProps,
+    setIsAddLinkActive = _ref2.setIsAddLinkActive;
+  var menuOptions = createMenuOptions$2({
+    tooltips: tooltips,
+    editor: editor,
+    setMediaUploader: setMediaUploader,
+    attachmentProps: attachmentProps,
+    setIsAddLinkActive: setIsAddLinkActive
+  });
+  return fromPairs(["font", "block", "list", "misc", "right"].map(function (option) {
+    return [option, menuOptions[option].filter(function (item) {
+      return options.includes(item.optionName);
+    })];
+  }));
+};
+var getTextMenuDropdownOptions = function getTextMenuDropdownOptions(_ref3) {
+  var editor = _ref3.editor,
+    options = _ref3.options;
+  var textOptions = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EDITOR_OPTIONS.H1, {
+    optionName: "Heading 1",
+    icon: Heading1,
+    active: editor.isActive("heading", {
+      level: 1
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 1
+      }).run();
+    }
+  }), EDITOR_OPTIONS.H2, {
+    optionName: "Heading 2",
+    icon: Heading2,
+    active: editor.isActive("heading", {
+      level: 2
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 2
+      }).run();
+    }
+  }), EDITOR_OPTIONS.H3, {
+    optionName: "Heading 3",
+    icon: Heading3,
+    active: editor.isActive("heading", {
+      level: 3
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 3
+      }).run();
+    }
+  }), EDITOR_OPTIONS.PARAGRAPH, {
+    optionName: "Text",
+    icon: Pilcrow,
+    active: editor.isActive("paragraph"),
+    command: function command() {
+      return editor.chain().focus().setNode("paragraph").run();
+    }
+  });
+  var result = [];
+  options.forEach(function (option) {
+    if (!textOptions[option]) return;
+    result.push(textOptions[option]);
+  });
+  return result;
+};
+var getNodeIcon = function getNodeIcon(options) {
+  var _options$find;
+  return ((_options$find = options.find(prop("active"))) === null || _options$find === void 0 ? void 0 : _options$find.icon) || Pilcrow;
+};
+var renderOptionButton = function renderOptionButton(_ref4) {
+  var tooltip = _ref4.tooltip,
+    Icon = _ref4.Icon,
+    command = _ref4.command,
+    active = _ref4.active,
+    optionName = _ref4.optionName,
+    highlight = _ref4.highlight;
+  return /*#__PURE__*/jsx(Button$1, _objectSpread$9({
+    className: "ne-toolbar-item",
+    "data-testid": "neeto-editor-bubble-menu-".concat(optionName, "-option"),
+    icon: Icon,
+    size: "default",
+    tooltipProps: {
+      content: tooltip,
+      position: "bottom"
+    },
+    variant: active ? "secondary" : "ghost",
+    onClick: command
+  }, generateFocusProps(highlight)), optionName);
+};
+
+var Options = function Options(_ref) {
+  var editor = _ref.editor,
+    options = _ref.options,
+    mentions = _ref.mentions,
+    tooltips = _ref.tooltips,
+    setIsInvalidLink = _ref.setIsInvalidLink,
+    isLinkOptionActive = _ref.isLinkOptionActive,
+    isTableOptionActive = _ref.isTableOptionActive,
+    setIsLinkOptionActive = _ref.setIsLinkOptionActive,
+    setIsTableOptionActive = _ref.setIsTableOptionActive,
+    setMediaUploader = _ref.setMediaUploader,
+    attachmentProps = _ref.attachmentProps,
+    isEmojiPickerActive = _ref.isEmojiPickerActive,
+    setIsEmojiPickerActive = _ref.setIsEmojiPickerActive;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var dropdownOptions = getTextMenuDropdownOptions({
+    editor: editor,
+    options: options
+  });
+  var Icon = getNodeIcon(dropdownOptions);
+  var isEmojiActive = options.includes(EDITOR_OPTIONS.EMOJI);
+  var isTextColorOptionActive = options.includes(EDITOR_OPTIONS.TEXT_COLOR);
+  var isLinkActive = options.includes(EDITOR_OPTIONS.LINK);
+  var isTableActive = options.includes(EDITOR_OPTIONS.TABLE);
+  var _buildBubbleMenuOptio = buildBubbleMenuOptions({
+      editor: editor,
+      options: options,
+      setMediaUploader: setMediaUploader,
+      tooltips: tooltips,
+      attachmentProps: attachmentProps,
+      setIsAddLinkActive: setIsLinkOptionActive
+    }),
+    fontStyleOptions = _buildBubbleMenuOptio.font,
+    blockStyleOptions = _buildBubbleMenuOptio.block,
+    listStyleOptions = _buildBubbleMenuOptio.list;
+  var handleAnimateInvalidLink = function handleAnimateInvalidLink() {
+    setIsInvalidLink(true);
+    setTimeout(function () {
+      setIsInvalidLink(false);
+    }, 1000);
+  };
+  if (isLinkOptionActive) {
+    return /*#__PURE__*/jsx(LinkOption, {
+      editor: editor,
+      handleAnimateInvalidLink: handleAnimateInvalidLink,
+      handleClose: function handleClose() {
+        return setIsLinkOptionActive(false);
+      }
+    });
+  }
+  if (isTableOptionActive) {
+    return /*#__PURE__*/jsx(TableOption$2, {
+      editor: editor,
+      handleClose: function handleClose() {
+        return setIsTableOptionActive(false);
+      }
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsxs(Popover, {
+      children: [/*#__PURE__*/jsx(PopoverTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(Button$1, {
+          className: "ne-toolbar-item ne-toolbar-dropdown neeto-editor-font-size__wrapper",
+          "data-testid": "neeto-editor-fixed-menu-font-size-option",
+          icon: Icon,
+          iconPosition: "left",
+          trailing: /*#__PURE__*/jsx(ChevronDown, {}),
+          variant: "ghost"
+        })
+      }), /*#__PURE__*/jsx(PopoverContent, {
+        align: "start",
+        className: "ne-editor-dropdown w-32 gap-0 p-1 data-[state=closed]:hidden",
+        side: "bottom",
+        onOpenAutoFocus: function onOpenAutoFocus(e) {
+          return e.preventDefault();
+        },
+        children: dropdownOptions.map(function (_ref2) {
+          var optionName = _ref2.optionName,
+            command = _ref2.command,
+            Icon = _ref2.icon;
+          return /*#__PURE__*/jsx(Button$1, {
+            fullWidth: true,
+            className: "justify-start",
+            icon: /*#__PURE__*/jsx(Icon, {
+              size: 16
+            }),
+            iconPosition: "left",
+            label: optionName,
+            size: "sm",
+            variant: "ghost",
+            onClick: command
+          }, optionName);
+        })
+      })]
+    }), fontStyleOptions.map(renderOptionButton), blockStyleOptions.map(renderOptionButton), isTextColorOptionActive && /*#__PURE__*/jsx(TextColorOption, {
+      editor: editor,
+      tooltipContent: tooltips.textColor || t("neetoEditor.menu.textColor")
+    }), isEmojiActive && /*#__PURE__*/jsx(EmojiOption$1, {
+      editor: editor,
+      isActive: isEmojiPickerActive,
+      setActive: setIsEmojiPickerActive,
+      tooltipContent: tooltips.emoji || t("neetoEditor.menu.emoji")
+    }), listStyleOptions.map(renderOptionButton), isLinkActive && renderOptionButton({
+      Icon: Link,
+      command: function command() {
+        return setIsLinkOptionActive(true);
+      },
+      active: editor.isActive("link"),
+      optionName: "link",
+      highlight: false,
+      tooltip: tooltips.link || t("neetoEditor.menu.link")
+    }), isTableActive && renderOptionButton({
+      Icon: Table,
+      command: function command() {
+        return setIsTableOptionActive(true);
+      },
+      active: editor.isActive("table"),
+      optionName: "table",
+      highlight: false,
+      tooltip: tooltips.table || t("neetoEditor.menu.table")
+    }), /*#__PURE__*/jsx(Mentions$1, {
+      editor: editor,
+      mentions: mentions,
+      tooltipContent: tooltips.mention || t("neetoEditor.menu.mention")
+    })]
+  });
+};
+
+var Bubble = function Bubble(_ref) {
+  var editor = _ref.editor,
+    textOptions = _ref.options,
+    _ref$mentions = _ref.mentions,
+    mentions = _ref$mentions === void 0 ? [] : _ref$mentions,
+    setMediaUploader = _ref.setMediaUploader,
+    _ref$tooltips = _ref.tooltips,
+    tooltips = _ref$tooltips === void 0 ? {} : _ref$tooltips,
+    attachmentProps = _ref.attachmentProps,
+    isEmojiPickerActive = _ref.isEmojiPickerActive,
+    setIsEmojiPickerActive = _ref.setIsEmojiPickerActive;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInvalidLink = _useState2[0],
+    setIsInvalidLink = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLinkOptionActive = _useState4[0],
+    setIsLinkOptionActive = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isTableOptionActive = _useState6[0],
+    setIsTableOptionActive = _useState6[1];
+  var selectedNode = editor && editor.view.state.selection.node;
+  var isImageNodeSelected = selectedNode && selectedNode.type.name === "image";
+  var bubbleMenuOptions = [EDITOR_OPTIONS.BOLD, EDITOR_OPTIONS.ITALIC, EDITOR_OPTIONS.UNDERLINE, EDITOR_OPTIONS.STRIKETHROUGH, EDITOR_OPTIONS.LINK];
+  var noTextOptions = isNotPresent(textOptions.filter(function (option) {
+    return bubbleMenuOptions.includes(option);
+  }));
+  if (!editor || !isImageNodeSelected && noTextOptions) {
+    return null;
+  }
+  return /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsx(BubbleMenu, {
+      editor: editor,
+      style: {
+        zIndex: 99999,
+        maxWidth: 500
+      },
+      className: classnames("neeto-editor-bubble-menu", {
+        "neeto-editor-bubble-menu-animate-shake": isInvalidLink
+      }),
+      options: {
+        offset: 10,
+        onHide: function onHide() {
+          setIsLinkOptionActive(false);
+          setIsTableOptionActive(false);
+        }
+      },
+      children: /*#__PURE__*/jsx(Options, {
+        attachmentProps: attachmentProps,
+        editor: editor,
+        isEmojiPickerActive: isEmojiPickerActive,
+        isLinkOptionActive: isLinkOptionActive,
+        isTableOptionActive: isTableOptionActive,
+        mentions: mentions,
+        setIsEmojiPickerActive: setIsEmojiPickerActive,
+        setIsInvalidLink: setIsInvalidLink,
+        setIsLinkOptionActive: setIsLinkOptionActive,
+        setIsTableOptionActive: setIsTableOptionActive,
+        setMediaUploader: setMediaUploader,
+        tooltips: tooltips,
+        options: textOptions
+      })
+    })
+  });
+};
+
+var EmptyMenu = function EmptyMenu() {
+  return /*#__PURE__*/jsx("div", {});
+};
+
+var Progress = withT(function (_ref) {
+  var t = _ref.t,
+    queuedFiles = _ref.queuedFiles,
+    cancelUpload = _ref.cancelUpload;
+  return /*#__PURE__*/jsx("div", {
+    className: "ne-media-uploader__wrapper",
+    children: queuedFiles.map(function (_ref2) {
+      var id = _ref2.id,
+        filename = _ref2.filename,
+        _ref2$progress = _ref2.progress,
+        progress = _ref2$progress === void 0 ? 0 : _ref2$progress;
+      return /*#__PURE__*/jsxs("div", {
+        className: "ne-media-uploader__media",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "ne-media-uploader__media__cancel-button-wrapper",
+          children: /*#__PURE__*/jsx(Button$1, {
+            "data-testid": "neeto-editor-image-upload-cancel-button",
+            icon: X,
+            size: "sm",
+            variant: "ghost",
+            onClick: function onClick() {
+              return cancelUpload(id);
+            }
+          })
+        }), /*#__PURE__*/jsx(File, {
+          className: "ne-media-uploader__media__info__icon",
+          fileName: filename
+        }), /*#__PURE__*/jsxs("div", {
+          className: "ne-media-uploader__media__info",
+          children: [/*#__PURE__*/jsxs(Typography, {
+            variant: "body3",
+            children: [progress === 100 && t("neetoEditor.localUploader.completed"), progress !== 100 && /*#__PURE__*/jsxs(Fragment$1, {
+              children: [progress, "%"]
+            })]
+          }), /*#__PURE__*/jsx("div", {
+            className: "ne-media-uploader__media__progress",
+            children: /*#__PURE__*/jsx("div", {
+              className: "ne-media-uploader__media__progress-bar",
+              style: {
+                width: "".concat(progress, "%")
+              }
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            content: filename,
+            position: "top",
+            children: /*#__PURE__*/jsx(Typography, {
+              variant: "body3",
+              children: filename
+            })
+          })]
+        })]
+      }, id);
+    })
+  });
+});
+
+var LocalUploader = function LocalUploader(_ref) {
+  var isImage = _ref.isImage,
+    onClose = _ref.onClose,
+    insertMediaToEditor = _ref.insertMediaToEditor,
+    setIsUploading = _ref.setIsUploading;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var uploadConfig = isImage ? DEFAULT_IMAGE_UPLOAD_CONFIG : DEFAULT_VIDEO_UPLOAD_CONFIG;
+  var fileInputRef = useRef(null);
+  var dropTargetRef = useRef(null);
+  var _useFileUploader = useFileUploader({
+      config: uploadConfig,
+      setIsUploadingOnHost: setIsUploading
+    }),
+    addFiles = _useFileUploader.addFiles,
+    uploadFiles = _useFileUploader.uploadFiles,
+    queuedFiles = _useFileUploader.queuedFiles,
+    cancelUpload = _useFileUploader.cancelUpload,
+    isUploading = _useFileUploader.isUploading;
+  var handleFilesDrop = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(files) {
+      var uploadedFiles;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            addFiles(files);
+            _context.next = 3;
+            return uploadFiles();
+          case 3:
+            uploadedFiles = _context.sent;
+            uploadedFiles.forEach(insertMediaToEditor);
+            onClose();
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleFilesDrop(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useDropFiles({
+    dropTargetRef: dropTargetRef,
+    onDrop: handleFilesDrop
+  });
+  setIsUploading(isUploading);
+  var handleAddFile = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref3) {
+      var files, uploadedFiles;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            files = _ref3.target.files;
+            addFiles(files);
+            _context2.next = 4;
+            return uploadFiles();
+          case 4:
+            uploadedFiles = _context2.sent;
+            uploadedFiles.forEach(insertMediaToEditor);
+            onClose();
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleAddFile(_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  return !isEmpty(queuedFiles) || isUploading ? /*#__PURE__*/jsx(Progress, {
+    cancelUpload: cancelUpload,
+    queuedFiles: queuedFiles
+  }) : /*#__PURE__*/jsxs("div", {
+    className: "ne-media-uploader__dnd",
+    "data-testid": "neeto-editor-media-uploader-dnd",
+    ref: dropTargetRef,
+    tabIndex: 0,
+    onClick: function onClick() {
+      var _fileInputRef$current;
+      return (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
+    },
+    children: [/*#__PURE__*/jsx("input", {
+      multiple: true,
+      className: "ne-media-uploader__dnd-input",
+      "data-testid": "neeto-editor-media-uploader-input",
+      ref: fileInputRef,
+      type: "file",
+      accept: isImage ? ALLOWED_IMAGE_TYPES.join(",") : ALLOWED_VIDEO_TYPES.join(","),
+      onChange: handleAddFile
+    }), /*#__PURE__*/jsx(ImageUp, {
+      className: "ne-media-uploader__dnd-icon",
+      size: 24
+    }), /*#__PURE__*/jsx(Typography, {
+      variant: "body2",
+      children: t("neetoEditor.localUploader.dropFilesHere")
+    }), /*#__PURE__*/jsx(Typography, {
+      variant: "body3",
+      children: t("neetoEditor.localUploader.maxFileSize", {
+        entity: convertToFileSize(uploadConfig.restrictions.maxFileSize)
+      })
+    })]
+  });
+};
+
+var VideoEmbedForm = function VideoEmbedForm(_ref) {
+  var onEmbedVideo = _ref.onEmbedVideo,
+    onAttachVideo = _ref.onAttachVideo,
+    onClose = _ref.onClose;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var initialValues = {
+    url: ""
+  };
+  var onSubmit = function onSubmit(_ref2) {
+    var url = _ref2.url;
+    var embedUrl = validateUrl(url);
+    if (embedUrl) onEmbedVideo(url, embedUrl);else onAttachVideo(url);
+    onClose();
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: "ne-video-embed-form",
+    children: /*#__PURE__*/jsx(Form, {
+      formikProps: {
+        initialValues: initialValues,
+        validationSchema: VIDEO_EMBED_FORM_VALIDATION_SCHEMA,
+        onSubmit: onSubmit
+      },
+      children: function children(_ref3) {
+        var dirty = _ref3.dirty,
+          isSubmitting = _ref3.isSubmitting,
+          resetForm = _ref3.resetForm;
+        return /*#__PURE__*/jsxs(Fragment$1, {
+          children: [/*#__PURE__*/jsx("div", {
+            className: "ne-video-embed-form__content",
+            children: /*#__PURE__*/jsx(Input$1, {
+              autoFocus: true,
+              unlimitedChars: true,
+              "data-testid": "neeto-editor-video-embed-input",
+              label: t("neetoEditor.common.videoUrl"),
+              name: "url",
+              placeholder: t("neetoEditor.placeholders.embedUrl"),
+              size: "medium",
+              type: "text"
+            })
+          }), /*#__PURE__*/jsx(ActionBlock, {
+            cancelButtonProps: {
+              "data-testid": "neeto-editor-video-embed-cancel",
+              label: t("neetoEditor.common.cancel"),
+              size: "sm",
+              onClick: function onClick() {
+                resetForm();
+                onClose();
+              }
+            },
+            submitButtonProps: {
+              "data-testid": "neeto-editor-video-embed-submit",
+              disabled: !dirty,
+              label: t("neetoEditor.common.saveChanges"),
+              loading: isSubmitting,
+              size: "sm"
+            }
+          })]
+        });
+      }
+    })
+  });
+};
+
+var MediaUploader = function MediaUploader(_ref) {
+  var mediaUploader = _ref.mediaUploader,
+    onClose = _ref.onClose,
+    editor = _ref.editor,
+    _ref$showAssetLibrary = _ref.showAssetLibrary,
+    showAssetLibrary = _ref$showAssetLibrary === void 0 ? true : _ref$showAssetLibrary;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState("local"),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isUploading = _useState4[0],
+    setIsUploading = _useState4[1];
+  var isOpen = mediaUploader.image || mediaUploader.video;
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tabs = _useState6[0],
+    setTabs = _useState6[1];
+  useEffect(function () {
+    isOpen && setTabs(getTabs(mediaUploader));
+  }, [mediaUploader]);
+  var handleClose = function handleClose() {
+    onClose();
+    setActiveTab("local");
+    editor.commands.focus();
+  };
+  var insertMediaToEditor = function insertMediaToEditor(file) {
+    if (!editor) return;
+    var url = file.url,
+      _file$filename = file.filename,
+      filename = _file$filename === void 0 ? "image" : _file$filename,
+      _file$caption = file.caption,
+      caption = _file$caption === void 0 ? "" : _file$caption;
+    var mediaAttrs = {
+      src: url,
+      caption: caption,
+      alt: filename
+    };
+    var setMedia = mediaUploader.image ? editor.chain().setFigure(mediaAttrs) : editor.chain().setVideo(mediaAttrs);
+    setMedia.focus().command(function (_ref2) {
+      var tr = _ref2.tr,
+        commands = _ref2.commands;
+      var doc = tr.doc,
+        selection = tr.selection;
+      var position = doc.resolve(selection.to).end() + 1;
+      var safePosition = Math.min(position, doc.content.size);
+      return commands.insertContentAt(safePosition, "<p></p>");
+    }).run();
+  };
+  var onUploadComplete = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(isNotPresent(file.id) && isNotPresent(file.signedId))) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.prev = 2;
+            _context.next = 5;
+            return directUploadsApi.attach({
+              id: file.id,
+              signed_id: file.signedId
+            });
+          case 5:
+            insertMediaToEditor(file);
+            handleClose();
+            _context.next = 12;
+            break;
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](2);
+            Toastr.error(_context.t0);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 9]]);
+    }));
+    return function onUploadComplete(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var onAttachVideo = function onAttachVideo(url) {
+    var file = {
+      url: url};
+    insertMediaToEditor(file);
+  };
+  var onEmbedVideo = function onEmbedVideo(originalUrl, embedUrl) {
+    if (!editor) return;
+    editor.chain().focus().setExternalVideo({
+      src: embedUrl,
+      originalUrl: originalUrl
+    }).run();
+  };
+  var allowDismiss = not(isUploading);
+  return /*#__PURE__*/jsx(Dialog, {
+    isOpen: isOpen,
+    className: "ne-media-uploader-modal",
+    closeButton: allowDismiss,
+    onClose: allowDismiss ? handleClose : undefined,
+    children: /*#__PURE__*/jsxs("div", {
+      className: "ne-media-uploader",
+      children: [(mediaUploader.video || mediaUploader.image) && /*#__PURE__*/jsx("div", {
+        className: "ne-media-uploader__header",
+        children: /*#__PURE__*/jsxs("h2", {
+          className: "ne-media-uploader__header-title",
+          children: [mediaUploader.video && t("neetoEditor.menu.addVideo"), mediaUploader.image && t("neetoEditor.menu.addImage")]
+        })
+      }), !isNotPresent(tabs) && /*#__PURE__*/jsx(Tabs, {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        children: /*#__PURE__*/jsx(Tabs.List, {
+          children: tabs.map(function (_ref4) {
+            var key = _ref4.key,
+              title = _ref4.title;
+            return /*#__PURE__*/jsx(Tabs.Item, {
+              "data-testid": "neeto-editor-media-uploader-".concat(key, "-tab"),
+              value: key,
+              children: title
+            }, key);
+          })
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "ne-media-uploader__content",
+        children: [mediaUploader.image && /*#__PURE__*/jsx(ImageUploader, {
+          onUploadComplete: onUploadComplete,
+          showAssetLibrary: showAssetLibrary,
+          className: "ne-media-uploader__image-uploader"
+        }), mediaUploader.video && /*#__PURE__*/jsxs(Fragment$1, {
+          children: [activeTab === "local" && /*#__PURE__*/jsx(LocalUploader, {
+            insertMediaToEditor: insertMediaToEditor,
+            setIsUploading: setIsUploading,
+            isImage: false,
+            onClose: handleClose
+          }), activeTab === "embed" && /*#__PURE__*/jsx(VideoEmbedForm, {
+            onAttachVideo: onAttachVideo,
+            onEmbedVideo: onEmbedVideo,
+            onClose: handleClose
+          })]
+        })]
+      })]
+    })
+  });
+};
+
+var LinkAddPopOver = function LinkAddPopOver(_ref) {
+  var _containerRef$current;
+  var isAddLinkActive = _ref.isAddLinkActive,
+    setIsAddLinkActive = _ref.setIsAddLinkActive,
+    editor = _ref.editor,
+    openLinkInNewTab = _ref.openLinkInNewTab,
+    containerRef = _ref.containerRef;
+  var _editor$state$selecti = editor.state.selection,
+    from = _editor$state$selecti.from,
+    to = _editor$state$selecti.to;
+  var text = editor.state.doc.textBetween(from, to, "");
+  var _useState = useState(text),
+    _useState2 = _slicedToArray(_useState, 2),
+    linkText = _useState2[0],
+    setLinkText = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    linkUrl = _useState4[0],
+    setLinkUrl = _useState4[1];
+  var _useState5 = useState(openLinkInNewTab),
+    _useState6 = _slicedToArray(_useState5, 2),
+    openInNewTab = _useState6[0],
+    setOpenInNewTab = _useState6[1];
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
+  var _useState9 = useState(getCursorPos(editor, to)),
+    _useState0 = _slicedToArray(_useState9, 2),
+    popoverPosition = _useState0[0],
+    setPopoverPosition = _useState0[1];
+  var _useState1 = useState({
+      top: 0,
+      left: 0
+    }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    arrowPosition = _useState10[0],
+    setArrowPosition = _useState10[1];
+  var popoverRef = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isLinkTextPresent = !isNotPresent(linkText);
+  var isLinlUrlPresent = !isNotPresent(linkUrl);
+  var isSubmitDisabled = !isLinkTextPresent || !isLinlUrlPresent;
+  var popoverStyle = {
+    display: "block",
+    position: "fixed",
+    top: popoverPosition.top,
+    left: popoverPosition.left,
+    transform: "translateY(52px) translateX(8px)"
+  };
+  var handleAddLink = function handleAddLink() {
+    var _editor$view = editor.view,
+      state = _editor$view.state,
+      dispatch = _editor$view.dispatch;
+    var _state$selection = state.selection,
+      from = _state$selection.from,
+      to = _state$selection.to;
+    var formattedUrl = validateAndFormatUrl(linkUrl);
+    if (!ALL_PROTOCOL_URL_REGEXP.test(formattedUrl)) {
+      setError(t("neetoEditor.error.invalidUrl"));
+      return;
+    }
+    var attrs = {
+      href: formattedUrl,
+      target: openInNewTab ? "_blank" : "_self"
+    };
+    var linkMark = state.schema.marks.link.create(attrs);
+    var linkTextWithMark = state.schema.text(linkText, [linkMark]);
+    var tr = state.tr.replaceWith(from, to, linkTextWithMark);
+    dispatch(tr);
+    removePopover();
+  };
+  var removePopover = function removePopover() {
+    editor.view.focus();
+    setIsAddLinkActive(false);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAddLink();
+    } else if (e.key === "Escape") {
+      removePopover();
+    }
+  };
+  var updatePopoverPosition = function updatePopoverPosition() {
+    var _getLinkPopoverPositi = getLinkPopoverPosition(editor, popoverRef),
+      arrowPosition = _getLinkPopoverPositi.arrowPosition,
+      popoverPosition = _getLinkPopoverPositi.popoverPosition;
+    setPopoverPosition(popoverPosition);
+    setArrowPosition(arrowPosition);
+  };
+  useOnClickOutside(popoverRef, removePopover);
+  useEffect(function () {
+    if (editor && isAddLinkActive) {
+      updatePopoverPosition();
+    }
+    window.addEventListener("resize", removePopover);
+    window.addEventListener("wheel", removePopover);
+    return function () {
+      window.removeEventListener("resize", removePopover);
+      window.removeEventListener("wheel", removePopover);
+    };
+  }, []);
+  return isAddLinkActive ? /*#__PURE__*/createPortal(/*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: "ne-link-arrow fade-in",
+      style: {
+        top: arrowPosition.top,
+        left: arrowPosition.left
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: "ne-link-popover fade-in",
+      id: "ne-link-add-popover",
+      ref: popoverRef,
+      style: popoverStyle,
+      children: [/*#__PURE__*/jsx(Input, {
+        required: true,
+        autoFocus: !isLinkTextPresent,
+        "data-testid": "neeto-editor-add-link-text-input",
+        label: t("neetoEditor.common.text"),
+        placeholder: t("neetoEditor.placeholders.enterText"),
+        size: "small",
+        style: {
+          width: "250px"
+        },
+        value: linkText,
+        onChange: function onChange(_ref2) {
+          var value = _ref2.target.value;
+          return setLinkText(value);
+        },
+        onKeyDown: handleKeyDown
+      }), /*#__PURE__*/jsx(Input, {
+        error: error,
+        required: true,
+        autoFocus: isLinkTextPresent,
+        className: "ne-link-popover__url-input",
+        "data-testid": "neeto-editor-add-link-url-input",
+        label: t("neetoEditor.common.url"),
+        placeholder: t("neetoEditor.placeholders.url"),
+        size: "small",
+        style: {
+          width: "250px"
+        },
+        value: linkUrl,
+        onChange: function onChange(_ref3) {
+          var value = _ref3.target.value;
+          return setLinkUrl(value);
+        },
+        onFocus: function onFocus() {
+          return setError("");
+        },
+        onKeyDown: handleKeyDown
+      }), /*#__PURE__*/jsx(Checkbox, {
+        checked: openInNewTab,
+        className: "ne-link-popover__checkbox",
+        "data-testid": "neeto-editor-add-link-open-in-new-tab-switch",
+        label: t("neetoEditor.common.openInNewTab"),
+        onCheckedChange: function onCheckedChange() {
+          return setOpenInNewTab(not);
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: "ne-link-popover__edit-prompt-buttons",
+        children: [/*#__PURE__*/jsx(Button$1, {
+          "data-testid": "neeto-editor-add-link",
+          disabled: isSubmitDisabled,
+          label: t("neetoEditor.common.done"),
+          size: "sm",
+          onClick: handleAddLink
+        }), /*#__PURE__*/jsx(Button$1, {
+          "data-testid": "neeto-editor-link-popover-cancel",
+          label: t("neetoEditor.common.cancel"),
+          size: "sm",
+          variant: "ghost",
+          onClick: removePopover
+        })]
+      })]
+    })]
+  }), (_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : document.body) : null;
+};
+
+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), true).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 Menu$3 = DropdownMenu.Menu,
+  MenuItem$1 = DropdownMenu.MenuItem;
+var MoreMenu = function MoreMenu(_ref) {
+  var groups = _ref.groups,
+    editor = _ref.editor;
+  return /*#__PURE__*/jsx(DropdownMenu, {
+    dropdownProps: {
+      className: "ne-editor-dropdown"
+    },
+    customTarget: /*#__PURE__*/jsx(Button$1, {
+      className: "flex-shrink-0",
+      "data-testid": "neeto-editor-fixed-menu-more-option",
+      icon: Ellipsis,
+      variant: "ghost"
+    }),
+    children: /*#__PURE__*/jsx(Menu$3, {
+      children: groups.map(function (group) {
+        return group.map(function (_ref2) {
+          var type = _ref2.type,
+            props = _objectWithoutProperties(_ref2, _excluded$3);
+          var Component = MENU_ELEMENTS[type];
+          if (type === MENU_ELEMENT_TYPES.BUTTON) {
+            var Icon = props.icon;
+            return /*#__PURE__*/jsx(MenuItem$1, _objectSpread$8(_objectSpread$8({
+              "data-testid": "neeto-editor-fixed-menu-".concat(props.optionName, "-option"),
+              isActive: editor.isActive(props.optionName),
+              prefix: /*#__PURE__*/jsx(Icon, {
+                size: 16
+              }),
+              tabIndex: "-1",
+              onClick: props.command
+            }, _objectSpread$8(_objectSpread$8(_objectSpread$8({}, generateFocusProps(props.highlight)), props), {}, {
+              editor: editor
+            })), {}, {
+              children: props.label
+            }), props.optionName);
+          }
+          return /*#__PURE__*/jsx(Component, _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, props), {}, {
+            editor: editor
+          }, generateFocusProps(props.highlight))), {}, {
+            isSecondaryMenu: true
+          }), props.optionName);
+        });
+      })
+    })
+  });
+};
+
+var EDITOR_MARKS = [EDITOR_OPTIONS.UNDO, EDITOR_OPTIONS.REDO, "fontSizeOptions", EDITOR_OPTIONS.BOLD, EDITOR_OPTIONS.ITALIC, EDITOR_OPTIONS.UNDERLINE, EDITOR_OPTIONS.LINK, EDITOR_OPTIONS.STRIKETHROUGH, EDITOR_OPTIONS.HIGHLIGHT, EDITOR_OPTIONS.CALLOUT, "bulletList", "orderedList", "todoList", "blockquote", EDITOR_OPTIONS.CODE, "codeBlock", EDITOR_OPTIONS.TABLE, EDITOR_OPTIONS.ATTACHMENTS, EDITOR_OPTIONS.IMAGE_UPLOAD, EDITOR_OPTIONS.VIDEO_UPLOAD, EDITOR_OPTIONS.TEXT_COLOR, EDITOR_OPTIONS.EMOJI, EDITOR_OPTIONS.NEETO_KB_ARTICLE, "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), true).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 useEditorState = function useEditorState(_ref) {
+  var editor = _ref.editor,
+    neetoKbArticleState = _ref.neetoKbArticleState;
+  var _useEditorStore = useEditorStore(function (store) {
+      return {
+        setMarksState: store["setMarksState"],
+        marksState: store["marksState"]
+      };
+    }, shallow),
+    setMarksState = _useEditorStore.setMarksState,
+    marksState = _useEditorStore.marksState;
+  var handleSelectionUpdate = useCallback(function (_ref2) {
+    var editor = _ref2.editor;
+    var activeMarks = {};
+    EDITOR_MARKS.forEach(function (mark) {
+      if (mark === EDITOR_OPTIONS.NEETO_KB_ARTICLE) {
+        activeMarks[mark] = {
+          isActive: (neetoKbArticleState === null || neetoKbArticleState === void 0 ? void 0 : neetoKbArticleState.active) || false
+        };
+      } else {
+        activeMarks[mark] = {
+          isActive: editor.isActive(mark)
+        };
+      }
+    });
+    var activeFontSizeOption = FONT_SIZE_OPTIONS.find(function (_ref3) {
+      var level = _ref3.value;
+      return editor.isActive("heading", {
+        level: level
+      });
+    }) || last(FONT_SIZE_OPTIONS);
+    activeMarks["fontSizeOption"] = activeFontSizeOption;
+    setMarksState(activeMarks);
+  }, [setMarksState, neetoKbArticleState === null || neetoKbArticleState === void 0 ? void 0 : neetoKbArticleState.active]);
+  var updateHistoryOptionsState = useCallback(function (_ref4) {
+    var editor = _ref4.editor;
+    var undoOptionState = {
+      disabled: !editor.can().undo()
+    };
+    var redoOptionState = {
+      disabled: !editor.can().redo()
+    };
+    var updatedMarksState = _objectSpread$7(_objectSpread$7({}, marksState), {}, _defineProperty(_defineProperty({}, EDITOR_OPTIONS.UNDO, undoOptionState), EDITOR_OPTIONS.REDO, redoOptionState));
+    setMarksState(updatedMarksState);
+  }, [marksState, setMarksState]);
+  useEffect(function () {
+    if (!editor) return noop;
+    updateHistoryOptionsState({
+      editor: editor
+    });
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    editor.on("update", handleSelectionUpdate);
+    editor.on("transaction", handleSelectionUpdate);
+    return function () {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+      editor.off("update", handleSelectionUpdate);
+      editor.off("transaction", handleSelectionUpdate);
+    };
+  }, [editor, handleSelectionUpdate]);
+  useEffect(function () {
+    if (!editor) return;
+    handleSelectionUpdate({
+      editor: editor
+    });
+  }, [editor, neetoKbArticleState === null || neetoKbArticleState === void 0 ? void 0 : neetoKbArticleState.active, handleSelectionUpdate]);
+};
+
+var MenuDynamicVariables = function MenuDynamicVariables(_ref) {
+  var editor = _ref.editor,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    _ref$standalone = _ref.standalone,
+    standalone = _ref$standalone === void 0 ? false : _ref$standalone;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (isEmpty(variables)) return null;
+  var handleVariableClick = function handleVariableClick(item) {
+    var category = item.category,
+      categoryLabel = item.categoryLabel,
+      key = item.key,
+      label = item.label;
+    var variableName = category ? "".concat(category, ".").concat(key) : key;
+    var variableLabel = category ? "".concat(categoryLabel || category, ":").concat(label) : label;
+    editor.chain().focus().setVariable({
+      id: variableName,
+      label: variableLabel
+    }).run();
+  };
+  return /*#__PURE__*/jsx("div", {
+    "data-testid": "neeto-editor-fixed-menu-variables",
+    className: classnames("neeto-editor-fixed-menu__variables", {
+      "neeto-editor-fixed-menu__variables--standalone": standalone
+    }),
+    children: /*#__PURE__*/jsx(DynamicVariables, {
+      variables: variables,
+      buttonSize: "small",
+      dropdownProps: {
+        classNames: "ne-editor-variables-popup"
+      },
+      buttonProps: {
+        tooltipProps: {
+          content: t("neetoEditor.menu.dynamicVariables"),
+          position: "bottom"
+        }
+      },
+      onVariableClick: handleVariableClick
+    })
+  });
+};
+
+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), true).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 Fixed = function Fixed(_ref) {
+  var editor = _ref.editor,
+    options = _ref.options,
+    mentions = _ref.mentions,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    setMediaUploader = _ref.setMediaUploader,
+    mediaUploader = _ref.mediaUploader,
+    _ref$addonCommands = _ref.addonCommands,
+    addonCommands = _ref$addonCommands === void 0 ? [] : _ref$addonCommands,
+    _ref$isIndependant = _ref.isIndependant,
+    isIndependant = _ref$isIndependant === void 0 ? true : _ref$isIndependant,
+    className = _ref.className,
+    _ref$tooltips = _ref.tooltips,
+    tooltips = _ref$tooltips === void 0 ? {} : _ref$tooltips,
+    attachmentProps = _ref.attachmentProps,
+    isEmojiPickerActive = _ref.isEmojiPickerActive,
+    setIsEmojiPickerActive = _ref.setIsEmojiPickerActive,
+    openLinkInNewTab = _ref.openLinkInNewTab,
+    setIsNeetoKbArticleActive = _ref.setIsNeetoKbArticleActive,
+    neetoKbArticleState = _ref.neetoKbArticleState,
+    _ref$showAssetLibrary = _ref.showAssetLibrary,
+    showAssetLibrary = _ref$showAssetLibrary === void 0 ? true : _ref$showAssetLibrary,
+    containerRef = _ref.containerRef;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedButtonIndex = _useState2[0],
+    setFocusedButtonIndex = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAddLinkActive = _useState4[0],
+    setIsAddLinkActive = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    menuItems = _useState6[0],
+    setMenuItems = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    moreMenuItems = _useState8[0],
+    setMoreMenuItems = _useState8[1];
+  useEditorState({
+    editor: editor,
+    neetoKbArticleState: neetoKbArticleState
+  });
+  var editorRef = useRef(editor);
+  useEffect(function () {
+    editorRef.current = editor;
+  }, [editor]);
+  var menuRef = useRef(null);
+  var menuContainerRef = useRef(null);
+  var runEditorCommand = useCallback(function (command) {
+    return function () {
+      return command(editorRef.current);
+    };
+  }, []);
+  var handleArrowNavigation = function handleArrowNavigation(event) {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      setFocusedButtonIndex(function (prevIndex) {
+        return (prevIndex + 1) % menuButtons.length;
+      });
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      setFocusedButtonIndex(function (prevIndex) {
+        return (prevIndex - 1 + menuButtons.length) % menuButtons.length;
+      });
+    }
+  };
+  var menuButtons = useMemo(function () {
+    var _menuRef$current;
+    return (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.querySelectorAll(".ne-toolbar-item");
+  }, [menuRef.current]);
+  useEffect(function () {
+    menuButtons === null || menuButtons === void 0 || menuButtons[focusedButtonIndex].focus();
+  }, [focusedButtonIndex]);
+  useEffect(function () {
+    menuButtons === null || menuButtons === void 0 || menuButtons.forEach(function (menuItem) {
+      return menuItem.addEventListener("keydown", handleArrowNavigation);
+    });
+    return function () {
+      return menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuItem) {
+        return menuItem.removeEventListener("keydown", handleArrowNavigation);
+      });
+    };
+  }, [menuButtons]);
+  var menuGroups = useMemo(function () {
+    return buildMenuOptions({
+      tooltips: tooltips,
+      runEditorCommand: runEditorCommand,
+      options: options,
+      setMediaUploader: setMediaUploader,
+      attachmentProps: attachmentProps,
+      setIsAddLinkActive: setIsAddLinkActive,
+      mentions: mentions,
+      addonCommands: addonCommands,
+      setIsEmojiPickerActive: setIsEmojiPickerActive,
+      isEmojiPickerActive: isEmojiPickerActive,
+      editor: editor,
+      setIsNeetoKbArticleActive: setIsNeetoKbArticleActive
+    });
+  }, [isEmojiPickerActive, mentions]);
+  var handleResize = useCallback(function () {
+    if (!menuRef.current) return;
+    var _reGroupMenuItems = reGroupMenuItems(menuRef, menuGroups),
+      visibleMenuGroups = _reGroupMenuItems.visibleMenuGroups,
+      invisibleMenuGroups = _reGroupMenuItems.invisibleMenuGroups;
+    setMenuItems(visibleMenuGroups);
+    setMoreMenuItems(invisibleMenuGroups);
+  }, [setMenuItems, menuGroups, menuRef.current]);
+  useEffect(function () {
+    handleResize();
+    var menuContainer = menuContainerRef.current;
+    var resizeObserver = new ResizeObserver(handleResize);
+    if (menuContainer) {
+      resizeObserver.observe(menuContainer);
+    }
+    return function () {
+      if (menuContainer) resizeObserver.unobserve(menuContainer);
+    };
+  }, [menuContainerRef.current, handleResize, menuGroups]);
+  if (!editor) return null;
+  var isMediaUploaderActive = options.includes(EDITOR_OPTIONS.IMAGE_UPLOAD) || options.includes(EDITOR_OPTIONS.VIDEO_UPLOAD);
+  return /*#__PURE__*/jsxs("div", {
+    ref: menuContainerRef,
+    className: classnames("neeto-editor-fixed-menu", _defineProperty({
+      "neeto-editor-fixed-menu--independant": isIndependant
+    }, className, className)),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-editor-fixed-menu__wrapper ne-fixed-menu--v2",
+      "data-testid": "neeto-editor-fixed-menu-wrapper",
+      ref: menuRef,
+      children: [menuItems.map(function (group) {
+        return group.map(function (_ref2) {
+          var type = _ref2.type,
+            props = _objectWithoutProperties(_ref2, _excluded$2);
+          var Component = MENU_ELEMENTS[type];
+          if (!Component) return null;
+          return /*#__PURE__*/jsx(Component, _objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, props), {}, {
+            editor: editor,
+            options: options
+          })), props.optionName);
+        });
+      }), isNotEmpty(moreMenuItems) && /*#__PURE__*/jsx(MoreMenu, {
+        editor: editor,
+        groups: moreMenuItems
+      })]
+    }), /*#__PURE__*/jsx(MenuDynamicVariables, {
+      editor: editor,
+      variables: variables
+    }), isAddLinkActive && /*#__PURE__*/jsx(LinkAddPopOver, {
+      containerRef: containerRef,
+      editor: editor,
+      isAddLinkActive: isAddLinkActive,
+      openLinkInNewTab: openLinkInNewTab,
+      setIsAddLinkActive: setIsAddLinkActive
+    }), isMediaUploaderActive && /*#__PURE__*/jsx(MediaUploader, {
+      editor: editor,
+      mediaUploader: mediaUploader,
+      showAssetLibrary: showAssetLibrary,
+      onClose: function onClose() {
+        return setMediaUploader({
+          image: false,
+          video: false
+        });
+      }
+    })]
+  });
+};
+
+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), true).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 Button = function Button(_ref) {
+  var _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    tooltipProps = _ref.tooltipProps,
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  var Icon = icon;
+  return /*#__PURE__*/jsx(Tooltip, _objectSpread$5(_objectSpread$5({
+    disabled: !tooltipProps,
+    onClick: function onClick() {
+      return _onClick();
+    }
+  }, tooltipProps), {}, {
+    children: /*#__PURE__*/jsx("button", _objectSpread$5(_objectSpread$5({
+      className: classnames("ne-headless-btn", _defineProperty({}, className, className)),
+      type: "button"
+    }, _objectSpread$5({
+      disabled: disabled,
+      onClick: _onClick
+    }, otherProps)), {}, {
+      children: icon && /*#__PURE__*/jsx(Icon, {
+        "aria-hidden": "true",
+        size: 18
+      }, "2")
+    }))
+  }));
+};
+
+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), true).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 hideOnEsc = {
+  name: "hideOnEsc",
+  defaultValue: true,
+  fn: function fn(_ref) {
+    var hide = _ref.hide,
+      _ref$props = _ref.props,
+      hideOnEsc = _ref$props.hideOnEsc,
+      onClose = _ref$props.onClose;
+    function onKeyDown(event) {
+      if (!(event.key.toLowerCase() === "escape" && hideOnEsc)) return;
+      onClose();
+      hide();
+    }
+    return {
+      onShow: function onShow() {
+        document.addEventListener("keydown", onKeyDown);
+      },
+      onHide: function onHide() {
+        document.removeEventListener("keydown", onKeyDown);
+      }
+    };
+  }
+};
+var Dropdown = function Dropdown(_ref2) {
+  var icon = _ref2.icon,
+    isOpen = _ref2.isOpen,
+    _ref2$onClose = _ref2.onClose,
+    onClose = _ref2$onClose === void 0 ? noop : _ref2$onClose,
+    children = _ref2.children,
+    className = _ref2.className,
+    onClick = _ref2.onClick,
+    _ref2$buttonProps = _ref2.buttonProps,
+    buttonProps = _ref2$buttonProps === void 0 ? {} : _ref2$buttonProps,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    mounted = _useState2[0],
+    setMounted = _useState2[1];
+  return /*#__PURE__*/jsx(Tippy, _objectSpread$4(_objectSpread$4({
+    onClose: onClose,
+    hideOnEsc: true,
+    interactive: true,
+    animation: false,
+    arrow: false,
+    duration: 0,
+    hideOnClick: false,
+    maxWidth: "none",
+    offset: 0,
+    plugins: [hideOnEsc],
+    popperOptions: {
+      strategy: "fixed"
+    },
+    role: "dropdown",
+    theme: "light",
+    trigger: "click",
+    visible: isOpen,
+    className: classnames("ne-headless-dropdown", _defineProperty({}, className, className)),
+    content: mounted && /*#__PURE__*/jsx("div", {
+      className: "ne-headless-dropdown__popup",
+      children: children
+    }),
+    onClickOutside: onClose,
+    onHidden: function onHidden() {
+      return setMounted(false);
+    },
+    onMount: function onMount() {
+      return setMounted(true);
+    }
+  }, otherProps), {}, {
+    children: /*#__PURE__*/jsx("span", {
+      children: /*#__PURE__*/jsx(Button, _objectSpread$4({}, _objectSpread$4({
+        icon: icon,
+        onClick: onClick
+      }, buttonProps)))
+    })
+  }));
+};
+
+var Emoji = function Emoji(_ref) {
+  var editor = _ref.editor,
+    isActive = _ref.isActive,
+    setActive = _ref.setActive,
+    tooltipContent = _ref.tooltipContent;
+  return /*#__PURE__*/jsx(Dropdown, {
+    className: "ne-headless__emoji",
+    icon: Smile,
+    isOpen: isActive,
+    buttonProps: {
+      tooltipProps: {
+        content: tooltipContent,
+        delay: [500],
+        position: "bottom"
+      },
+      "data-testid": "ne-emoji-picker"
+    },
+    onClick: function onClick() {
+      return setActive(function (active) {
+        return !active;
+      });
+    },
+    onClose: function onClose() {
+      return setActive(false);
+    },
+    children: /*#__PURE__*/jsx(EmojiPickerMenu, {
+      editor: editor,
+      setActive: setActive
+    })
+  });
+};
+
+var Option = function Option(_ref) {
+  var editor = _ref.editor,
+    optionName = _ref.optionName,
+    command = _ref.command,
+    disabled = _ref.disabled,
+    Icon = _ref.Icon,
+    isActive = _ref.isActive,
+    setActive = _ref.setActive,
+    tooltip = _ref.tooltip;
+  if (optionName === EDITOR_OPTIONS.EMOJI) {
+    return /*#__PURE__*/jsx(Emoji, {
+      editor: editor,
+      isActive: isActive,
+      setActive: setActive,
+      tooltipContent: tooltip || "Emoji"
+    });
+  }
+  return /*#__PURE__*/jsx(Button, {
+    disabled: disabled,
+    className: classnames({
+      "ne-headless-btn--active": isActive
+    }),
+    "data-testid": hyphenate(optionName),
+    icon: Icon,
+    tooltipProps: {
+      content: tooltip,
+      delay: [500],
+      position: "bottom"
+    },
+    onClick: command
+  });
+};
+
+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), true).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 t = i18n.t;
+var createMenuOptions$1 = function createMenuOptions(_ref) {
+  var editor = _ref.editor,
+    tooltips = _ref.tooltips,
+    setMediaUploader = _ref.setMediaUploader,
+    attachmentProps = _ref.attachmentProps,
+    isEmojiPickerActive = _ref.isEmojiPickerActive,
+    setIsEmojiPickerActive = _ref.setIsEmojiPickerActive;
+  return [{
+    Icon: Bold,
+    command: function command() {
+      return editor.chain().focus().toggleBold().run();
+    },
+    active: editor.isActive("bold"),
+    optionName: "bold",
+    tooltip: tooltips.bold || t("neetoEditor.menu.bold")
+  }, {
+    Icon: Italic,
+    command: function command() {
+      return editor.chain().focus().toggleItalic().run();
+    },
+    active: editor.isActive("italic"),
+    optionName: "italic",
+    tooltip: tooltips.italic || t("neetoEditor.menu.italic")
+  }, {
+    Icon: Underline,
+    command: function command() {
+      return editor.chain().focus().toggleUnderline().run();
+    },
+    active: editor.isActive("underline"),
+    optionName: "underline",
+    tooltip: tooltips.underline || t("neetoEditor.menu.underline")
+  }, {
+    Icon: Strikethrough,
+    command: function command() {
+      return editor.chain().focus().toggleStrike().run();
+    },
+    active: editor.isActive("strike"),
+    optionName: "strike",
+    tooltip: tooltips.strike || t("neetoEditor.menu.strike")
+  }, {
+    Icon: Highlighter,
+    command: function command() {
+      return editor.chain().focus().toggleHighlight().run();
+    },
+    active: editor.isActive("highlight"),
+    optionName: "highlight",
+    tooltip: tooltips.highlight || t("neetoEditor.menu.highlight")
+  }, {
+    Icon: Quote,
+    command: function command() {
+      return editor.chain().focus().toggleBlockquote().run();
+    },
+    active: editor.isActive("blockquote"),
+    optionName: "block-quote",
+    tooltip: tooltips.blockQuote || t("neetoEditor.menu.blockQuote")
+  }, {
+    Icon: Code,
+    command: function command() {
+      return editor.chain().focus().toggleCode().run();
+    },
+    active: editor.isActive("code"),
+    optionName: "code",
+    tooltip: tooltips.code || t("neetoEditor.menu.code")
+  }, {
+    Icon: SquareCode,
+    command: function command() {
+      return editor.chain().focus().toggleCodeBlock().run();
+    },
+    active: editor.isActive("codeBlock"),
+    optionName: "code-block",
+    tooltip: tooltips.codeBlock || t("neetoEditor.menu.codeBlock")
+  }, {
+    Icon: List,
+    command: function command() {
+      return editor.chain().focus().toggleBulletList().run();
+    },
+    active: editor.isActive("bulletList"),
+    optionName: "bullet-list",
+    tooltip: tooltips.bulletList || t("neetoEditor.menu.bulletedList")
+  }, {
+    Icon: ListOrdered,
+    command: function command() {
+      return editor.chain().focus().toggleOrderedList().run();
+    },
+    active: editor.isActive("orderedList"),
+    optionName: "ordered-list",
+    tooltip: tooltips.orderedList || t("neetoEditor.menu.orderedList")
+  }, {
+    Icon: FileText,
+    command: attachmentProps === null || attachmentProps === void 0 ? void 0 : attachmentProps.handleUploadAttachments,
+    disabled: attachmentProps === null || attachmentProps === void 0 ? void 0 : attachmentProps.isDisabled,
+    optionName: "attachments",
+    tooltip: tooltips.attachments || t("neetoEditor.menu.attachments")
+  }, {
+    Icon: ImageUp,
+    command: function command() {
+      return setMediaUploader(assoc("image", true));
+    },
+    optionName: "image-upload",
+    tooltip: tooltips.imageUpload || t("neetoEditor.menu.imageUpload")
+  }, {
+    Icon: Video,
+    command: function command() {
+      return setMediaUploader(assoc("video", true));
+    },
+    optionName: "video-upload",
+    tooltip: tooltips.videoUpload || t("neetoEditor.menu.videoUpload")
+  }, {
+    Icon: Smile,
+    command: noop,
+    optionName: "emoji",
+    tooltip: tooltips.emoji || t("neetoEditor.menu.emoji"),
+    isActive: isEmojiPickerActive,
+    setActive: setIsEmojiPickerActive
+  }, {
+    Icon: Table,
+    command: function command() {
+      return editor.chain().focus().insertTable({
+        rows: 3,
+        cols: 3,
+        withHeaderRow: true
+      }).run();
+    },
+    optionName: "table",
+    tooltip: tooltips.table || t("neetoEditor.menu.table")
+  }, {
+    Icon: Undo,
+    command: function command() {
+      return editor.chain().focus().undo().run();
+    },
+    disabled: !editor.can().undo(),
+    optionName: "undo",
+    tooltip: tooltips.undo || t("neetoEditor.menu.undo")
+  }, {
+    Icon: Redo,
+    command: function command() {
+      return editor.chain().focus().redo().run();
+    },
+    disabled: !editor.can().redo(),
+    optionName: "redo",
+    tooltip: tooltips.redo || t("neetoEditor.menu.redo")
+  }];
+};
+var buildOptionsFromAddonCommands$1 = function buildOptionsFromAddonCommands(_ref2) {
+  var editor = _ref2.editor,
+    commands = _ref2.commands;
+  var to = editor.state.selection.to;
+  return commands.map(function (option) {
+    var _option$active;
+    return _objectSpread$3(_objectSpread$3({}, option), {}, {
+      active: (_option$active = option.active) === null || _option$active === void 0 ? void 0 : _option$active.call(option, {
+        editor: editor
+      }),
+      command: function command() {
+        var _option$command;
+        return (_option$command = option.command) === null || _option$command === void 0 ? void 0 : _option$command.call(option, {
+          editor: editor,
+          range: {
+            from: to,
+            to: to
+          }
+        });
+      }
+    });
+  });
+};
+var buildMenuOptions$1 = function buildMenuOptions(_ref3) {
+  var tooltips = _ref3.tooltips,
+    editor = _ref3.editor,
+    options = _ref3.options,
+    setMediaUploader = _ref3.setMediaUploader,
+    attachmentProps = _ref3.attachmentProps,
+    isEmojiPickerActive = _ref3.isEmojiPickerActive,
+    setIsEmojiPickerActive = _ref3.setIsEmojiPickerActive;
+  var menuOptions = createMenuOptions$1({
+    editor: editor,
+    tooltips: tooltips,
+    setMediaUploader: setMediaUploader,
+    attachmentProps: attachmentProps,
+    isEmojiPickerActive: isEmojiPickerActive,
+    setIsEmojiPickerActive: setIsEmojiPickerActive
+  });
+  return options.map(function (option) {
+    return findBy({
+      optionName: option
+    }, menuOptions);
+  }).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), true).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 Headless = function Headless(_ref) {
+  var editor = _ref.editor,
+    options = _ref.options,
+    _ref$tooltips = _ref.tooltips,
+    tooltips = _ref$tooltips === void 0 ? {} : _ref$tooltips,
+    setMediaUploader = _ref.setMediaUploader,
+    mediaUploader = _ref.mediaUploader,
+    _ref$addonCommands = _ref.addonCommands,
+    addonCommands = _ref$addonCommands === void 0 ? [] : _ref$addonCommands,
+    className = _ref.className,
+    attachmentProps = _ref.attachmentProps,
+    isEmojiPickerActive = _ref.isEmojiPickerActive,
+    setIsEmojiPickerActive = _ref.setIsEmojiPickerActive,
+    _ref$showAssetLibrary = _ref.showAssetLibrary,
+    showAssetLibrary = _ref$showAssetLibrary === void 0 ? true : _ref$showAssetLibrary;
+  if (!editor) {
+    return null;
+  }
+  var isMediaUploaderActive = options.includes(EDITOR_OPTIONS.IMAGE_UPLOAD) || options.includes(EDITOR_OPTIONS.VIDEO_UPLOAD);
+  var menuOptions = buildMenuOptions$1({
+    tooltips: tooltips,
+    editor: editor,
+    options: options,
+    setMediaUploader: setMediaUploader,
+    attachmentProps: attachmentProps,
+    isEmojiPickerActive: isEmojiPickerActive,
+    setIsEmojiPickerActive: setIsEmojiPickerActive
+  });
+  var addonCommandOptions = buildOptionsFromAddonCommands$1({
+    editor: editor,
+    commands: addonCommands
+  });
+  var allOptions = [].concat(_toConsumableArray(menuOptions), _toConsumableArray(addonCommandOptions));
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("ne-headless ne-headless--v2", _defineProperty({}, className, className)),
+    children: [allOptions.map(function (option) {
+      return /*#__PURE__*/createElement(Option, _objectSpread$2({
+        editor: editor,
+        key: option.optionName
+      }, option));
+    }), isMediaUploaderActive && /*#__PURE__*/jsx(MediaUploader, {
+      editor: editor,
+      mediaUploader: mediaUploader,
+      showAssetLibrary: showAssetLibrary,
+      onClose: function onClose() {
+        return setMediaUploader({
+          image: false,
+          video: false
+        });
+      }
+    })]
+  });
+};
+
+var FONT_SIZE_OPTIONS = [{
+  label: t$1("neetoEditor.menu.heading1"),
+  value: 1,
+  key: "h1",
+  icon: Heading1
+}, {
+  label: t$1("neetoEditor.menu.heading2"),
+  value: 2,
+  key: "h2",
+  icon: Heading2
+}, {
+  label: t$1("neetoEditor.menu.heading3"),
+  value: 3,
+  key: "h3",
+  icon: Heading3
+}, {
+  label: t$1("neetoEditor.menu.heading4"),
+  value: 4,
+  key: "h4",
+  icon: Heading4
+}, {
+  label: t$1("neetoEditor.menu.heading5"),
+  value: 5,
+  key: "h5",
+  icon: Heading5
+}, {
+  label: t$1("neetoEditor.menu.normalText"),
+  value: 0,
+  key: "body2",
+  icon: Pilcrow
+}];
+var MENU_COMPONENTS = {
+  fixed: Fixed,
+  bubble: Bubble,
+  headless: Headless,
+  none: EmptyMenu
+};
+
+var Menu$2 = DropdownMenu.Menu,
+  MenuItem = DropdownMenu.MenuItem;
+var FontSizeOption = function FontSizeOption(_ref) {
+  var runEditorCommand = _ref.runEditorCommand,
+    tooltipContent = _ref.tooltipContent,
+    label = _ref.label,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu;
+  var dropdownRef = useRef(null);
+  var lastOption = last(FONT_SIZE_OPTIONS);
+  var _useEditorStore = useEditorStore(function (store) {
+      var _store$marksState;
+      return {
+        fontSizeOption: (_store$marksState = store["marksState"]) === null || _store$marksState === void 0 ? void 0 : _store$marksState["fontSizeOption"]
+      };
+    }, shallow),
+    _useEditorStore$fontS = _useEditorStore.fontSizeOption,
+    activeOption = _useEditorStore$fontS === void 0 ? lastOption : _useEditorStore$fontS;
+  var handleClick = function handleClick(level) {
+    return level ? runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleHeading({
+        level: level
+      }).run();
+    })() : runEditorCommand(function (editor) {
+      return editor.chain().focus().setNode("paragraph").run();
+    })();
+  };
+  var menuOptions = [].concat(_toConsumableArray(filterBy({
+    key: function key(_key) {
+      return options.includes(_key);
+    }
+  }, FONT_SIZE_OPTIONS)), [FONT_SIZE_OPTIONS[FONT_SIZE_OPTIONS.length - 1]]);
+  var renderItems = menuOptions.map(function (_ref2) {
+    var itemLabel = _ref2.label,
+      Icon = _ref2.icon,
+      value = _ref2.value,
+      key = _ref2.key;
+    return /*#__PURE__*/jsx(MenuItem, {
+      "data-testid": "neeto-editor-fixed-menu-font-size-option-".concat(key),
+      isActive: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value) === value,
+      prefix: /*#__PURE__*/jsx(Icon, {
+        size: 16
+      }),
+      onClick: function onClick() {
+        return handleClick(value);
+      },
+      children: itemLabel
+    }, value);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown"
+      },
+      icon: activeOption === null || activeOption === void 0 ? void 0 : activeOption.icon,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-font-size-option"
+      },
+      children: renderItems
+    });
+  }
+  return /*#__PURE__*/jsx(DropdownMenu, {
+    dropdownProps: {
+      className: "ne-editor-dropdown"
+    },
+    icon: activeOption === null || activeOption === void 0 ? void 0 : activeOption.icon,
+    position: "bottom-start",
+    triggerRef: dropdownRef,
+    buttonProps: {
+      "data-testid": "neeto-editor-fixed-menu-font-size-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"
+      },
+      variant: "ghost",
+      className: "ne-toolbar-item ne-toolbar-dropdown neeto-editor-font-size__wrapper"
+    },
+    children: /*#__PURE__*/jsx(Menu$2, {
+      children: renderItems
+    })
+  });
+};
+var FontSizeOption$1 = /*#__PURE__*/memo(FontSizeOption);
+
+var ColorDot = function ColorDot(_ref) {
+  var _colorVar$match;
+  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
+  });
+  var dotStyle = {
+    backgroundColor: "var(".concat(colorVar, ")")
+  };
+  var colorNumber = ((_colorVar$match = colorVar.match(/\d+$/)) === null || _colorVar$match === void 0 ? void 0 : _colorVar$match[0]) || colorVar;
+  return /*#__PURE__*/jsx("div", {
+    onClick: onClick,
+    className: dotClass,
+    style: dotStyle,
+    "data-testid": "neeto-editor-highlight-".concat(hyphenize(isTextColor ? "text" : "background"), "-color-dot-").concat(colorNumber)
+  });
+};
+
+var COLORS = {
+  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", "--neeto-editor-highlight-text-11", "--neeto-editor-highlight-text-12", "--neeto-editor-highlight-text-13", "--neeto-editor-highlight-text-14", "--neeto-editor-highlight-text-15", "--neeto-editor-highlight-text-16"],
+  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", "--neeto-editor-highlight-bg-11", "--neeto-editor-highlight-bg-12", "--neeto-editor-highlight-bg-13", "--neeto-editor-highlight-bg-14", "--neeto-editor-highlight-bg-15", "--neeto-editor-highlight-bg-16"]
+};
+
+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,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu;
+  var dropdownRef = useRef(null);
+  var textColor = editor.getAttributes("textStyle").color;
+  var backgroundColor = editor.getAttributes("textStyle").backgroundColor;
+  var updateBackgroundColor = function updateBackgroundColor(value) {
+    runEditorCommand(function (editor) {
+      return editor.chain().focus().setMark("textStyle", {
+        backgroundColor: value
+      }).run();
+    })();
+  };
+  var handleBackgroundColorClick = function handleBackgroundColorClick(colorVar, event) {
+    event.stopPropagation();
+    if (backgroundColor === "var(".concat(colorVar, ")")) {
+      updateBackgroundColor(null);
+    } else {
+      updateBackgroundColor("var(".concat(colorVar, ")"));
+    }
+  };
+  var handleTextColorClick = function handleTextColorClick(colorVar, event) {
+    event.stopPropagation();
+    if (textColor === "var(".concat(colorVar, ")")) {
+      editor.chain().focus().unsetColor().run();
+    } else {
+      editor.chain().focus().setColor("var(".concat(colorVar, ")")).run();
+    }
+  };
+  var renderColorDots = function renderColorDots(colorList) {
+    var isTextColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return colorList.map(function (colorVar, idx) {
+      return /*#__PURE__*/createElement(ColorDot, {
+        colorVar: colorVar,
+        isTextColor: isTextColor,
+        key: idx,
+        isSelected: isTextColor ? textColor === "var(".concat(colorVar, ")") : backgroundColor === "var(".concat(colorVar, ")"),
+        onClick: function onClick(event) {
+          return isTextColor ? handleTextColorClick(colorVar, event) : handleBackgroundColorClick(colorVar, event);
+        }
+      });
+    });
+  };
+  var renderSections = colorSections.map(function (_ref2) {
+    var title = _ref2.title,
+      colors = _ref2.colors,
+      isTextColor = _ref2.isTextColor;
+    return /*#__PURE__*/jsxs("div", {
+      className: "neeto-editor-highlight-dropdown__section",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-editor-highlight-dropdown__section-title",
+        variant: "body2",
+        weight: "medium",
+        children: title
+      }), /*#__PURE__*/jsx("div", {
+        className: "neeto-editor-highlight-dropdown__color-grid",
+        "data-testid": "neeto-editor-highlight-".concat(hyphenize(title), "-grid"),
+        children: renderColorDots(colors, isTextColor)
+      })]
+    }, title);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+      label: label,
+      icon: Highlighter,
+      contentProps: {
+        className: "ne-editor-dropdown neeto-editor-highlight-dropdown w-[280px] p-3"
+      },
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-highlight-option"
+      },
+      children: renderSections
+    });
+  }
+  return /*#__PURE__*/jsx(DropdownMenu, {
+    dropdownProps: {
+      className: "ne-editor-dropdown w-[280px] p-3"
+    },
+    icon: Highlighter,
+    position: "bottom-start",
+    triggerRef: dropdownRef,
+    buttonProps: {
+      "data-testid": "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"
+      },
+      variant: "ghost",
+      className: "ne-toolbar-item ne-toolbar-dropdown"
+    },
+    children: /*#__PURE__*/jsx(DropdownMenu.Menu, {
+      className: "neeto-editor-highlight-dropdown",
+      children: renderSections
+    })
+  });
+};
+
+var Menu$1 = DropdownMenu.Menu;
+var TableOption = function TableOption(_ref) {
+  var editor = _ref.editor,
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
+    label = _ref.label;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(3),
+    _useState2 = _slicedToArray(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
+  var _useState3 = useState(3),
+    _useState4 = _slicedToArray(_useState3, 2),
+    columns = _useState4[0],
+    setColumns = _useState4[1];
+  // Bumping this key remounts DropdownMenu, which closes it after submit.
+  // The wrapper exposes onClose for the close direction but no programmatic
+  // open control: passing controlled isOpen breaks open clicks (the wrapper's
+  // handleOpenChange ignores open events when controlled), and passing
+  // onClick to drive isOpen flips the wrapper into SplitTrigger mode
+  // (a two-button ButtonGroup) which we don't want here.
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    resetKey = _useState6[0],
+    setResetKey = _useState6[1];
+  var handleClose = function handleClose() {
+    setRows(3);
+    setColumns(3);
+  };
+  var handleSubmit = function handleSubmit() {
+    editor.chain().focus().insertTable({
+      rows: rows,
+      cols: columns,
+      withHeaderRow: true
+    }).run();
+    handleClose();
+    setResetKey(function (k) {
+      return k + 1;
+    });
+  };
+  var formContent = /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(Input, {
+      autoFocus: true,
+      "data-testid": "neeto-editor-fixed-menu-table-rows-input",
+      label: t("neetoEditor.menu.rows"),
+      min: "1",
+      placeholder: t("neetoEditor.placeholders.rows"),
+      size: "small",
+      type: "number",
+      value: rows,
+      onChange: withEventTargetValue(setRows)
+    }), /*#__PURE__*/jsx(Input, {
+      "data-testid": "neeto-editor-fixed-menu-table-columns-input",
+      label: t("neetoEditor.menu.columns"),
+      min: "1",
+      placeholder: t("neetoEditor.placeholders.columns"),
+      size: "small",
+      type: "number",
+      value: columns,
+      onChange: withEventTargetValue(setColumns)
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-editor-table-menu__button",
+      children: /*#__PURE__*/jsx(Button$1, {
+        className: "mt-auto",
+        "data-testid": "neeto-editor-fixed-menu-table-option-create-button",
+        label: t("neetoEditor.common.create"),
+        size: "sm",
+        onClick: handleSubmit
+      })
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/createElement(DropdownMenu.SubMenu, {
+      label: label,
+      icon: Table,
+      key: resetKey,
+      contentProps: {
+        className: "ne-editor-dropdown neeto-editor-table__item w-auto p-2 flex flex-col"
+      },
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-table-option"
+      }
+    }, formContent);
+  }
+  return /*#__PURE__*/jsx(DropdownMenu, {
+    closeOnSelect: false,
+    dropdownProps: {
+      className: "ne-editor-dropdown w-auto p-2"
+    },
+    icon: Table,
+    position: "bottom",
+    buttonProps: {
+      tabIndex: -1,
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      variant: "ghost",
+      className: "ne-toolbar-item ne-toolbar-dropdown",
+      "data-testid": "neeto-editor-fixed-menu-table-option"
+    },
+    onClose: handleClose,
+    children: /*#__PURE__*/jsx(Menu$1, {
+      className: "neeto-editor-table__item",
+      children: formContent
+    })
+  }, resetKey);
+};
+var TableOption$1 = /*#__PURE__*/memo(TableOption);
+
+var _SHORTCUTS;
+var MENU_ELEMENT_TYPES = {
+  BUTTON: "button",
+  CALLOUT: "callout",
+  FONT_SIZE: "fontSize",
+  TABLE: "table",
+  TEXT_COLOR: "textColor",
+  EMOJI: "emoji",
+  MENTIONS: "mentions",
+  HIGHLIGHT: "highlight"
+};
+var SHORTCUTS = (_SHORTCUTS = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_SHORTCUTS, EDITOR_OPTIONS.BOLD, {
+  mac: "⌘B",
+  win: "Ctrl+B"
+}), EDITOR_OPTIONS.ITALIC, {
+  mac: "⌘I",
+  win: "Ctrl+I"
+}), EDITOR_OPTIONS.UNDERLINE, {
+  mac: "⌘U",
+  win: "Ctrl+U"
+}), EDITOR_OPTIONS.STRIKETHROUGH, {
+  mac: "⌘⇧S or ⌘⇧X",
+  win: "Ctrl+Shift+S or Ctrl+Shift+X"
+}), EDITOR_OPTIONS.CODE, {
+  mac: "⌘E",
+  win: "Ctrl+E"
+}), EDITOR_OPTIONS.UNDO, {
+  mac: "⌘Z",
+  win: "Ctrl+Z"
+}), EDITOR_OPTIONS.REDO, {
+  mac: "⌘⇧Z",
+  win: "Ctrl+Shift+Z"
+}), EDITOR_OPTIONS.LINK, {
+  mac: "⌘K",
+  win: "Ctrl+K"
+}), EDITOR_OPTIONS.HIGHLIGHT, {
+  mac: "⌘⇧H",
+  win: "Ctrl+Shift+H"
+}), "bulletList", {
+  mac: "⌘⇧8",
+  win: "Ctrl+Shift+8"
+}), _defineProperty(_defineProperty(_SHORTCUTS, "orderedList", {
+  mac: "⌘⇧7",
+  win: "Ctrl+Shift+7"
+}), "todoList", {
+  mac: "⌘⇧9",
+  win: "Ctrl+Shift+9"
+}));
+var MENU_ELEMENTS = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MENU_ELEMENT_TYPES.BUTTON, MenuButton$1), MENU_ELEMENT_TYPES.CALLOUT, CalloutDropdown), 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(_defineProperty({}, MENU_ELEMENT_TYPES.BUTTON, 36), MENU_ELEMENT_TYPES.CALLOUT, 23), 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), true).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$fontSize, _tooltips$bold, _tooltips$italic, _tooltips$link, _tooltips$strike, _tooltips$highlight, _tooltips$highlight2, _tooltips$bulletList, _tooltips$orderedList, _tooltips$todoList, _tooltips$blockQuote, _tooltips$callout, _tooltips$callout2, _tooltips$table, _tooltips$attachments, _tooltips$neetoKbArti, _tooltips$imageUpload, _tooltips$textColor, _tooltips$emoji, _tooltips$mention, _tooltips$code, _tooltips$codeBlock, _tooltips$videoUpload, _tooltips$underline, _tooltips$undo, _tooltips$redo;
+  var tooltips = _ref.tooltips,
+    setMediaUploader = _ref.setMediaUploader,
+    attachmentProps = _ref.attachmentProps,
+    setIsAddLinkActive = _ref.setIsAddLinkActive,
+    options = _ref.options,
+    mentions = _ref.mentions,
+    addonCommandOptions = _ref.addonCommandOptions,
+    setIsEmojiPickerActive = _ref.setIsEmojiPickerActive,
+    isEmojiPickerActive = _ref.isEmojiPickerActive,
+    runEditorCommand = _ref.runEditorCommand,
+    editor = _ref.editor,
+    setIsNeetoKbArticleActive = _ref.setIsNeetoKbArticleActive;
+  var fontSizeOptions = options.filter(function (option) {
+    return option.match(/^h[1-6]$/);
+  });
+  return [[{
+    type: MENU_ELEMENT_TYPES.FONT_SIZE,
+    options: fontSizeOptions,
+    label: (_tooltips$fontSize = tooltips.fontSize) !== null && _tooltips$fontSize !== void 0 ? _tooltips$fontSize : t$1("neetoEditor.menu.fontSize"),
+    isEnabled: isNotEmpty(fontSizeOptions),
+    optionName: "fontSizeOptions",
+    runEditorCommand: runEditorCommand
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Bold,
+    isEnabled: options.includes(EDITOR_OPTIONS.BOLD),
+    command: runEditorCommand(function (editor) {
+      return editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run();
+    }),
+    optionName: EDITOR_OPTIONS.BOLD,
+    label: (_tooltips$bold = tooltips.bold) !== null && _tooltips$bold !== void 0 ? _tooltips$bold : t$1("neetoEditor.menu.bold")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Italic,
+    isEnabled: options.includes(EDITOR_OPTIONS.ITALIC),
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleItalic().run();
+    }),
+    optionName: EDITOR_OPTIONS.ITALIC,
+    label: (_tooltips$italic = tooltips.italic) !== null && _tooltips$italic !== void 0 ? _tooltips$italic : t$1("neetoEditor.menu.italic")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Link,
+    isEnabled: options.includes(EDITOR_OPTIONS.LINK),
+    command: function command() {
+      return setIsAddLinkActive(not);
+    },
+    optionName: EDITOR_OPTIONS.LINK,
+    label: (_tooltips$link = tooltips.link) !== null && _tooltips$link !== void 0 ? _tooltips$link : t$1("neetoEditor.menu.link")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Strikethrough,
+    isEnabled: options.includes(EDITOR_OPTIONS.STRIKETHROUGH),
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleStrike().run();
+    }),
+    optionName: EDITOR_OPTIONS.STRIKETHROUGH,
+    label: (_tooltips$strike = tooltips.strike) !== null && _tooltips$strike !== void 0 ? _tooltips$strike : t$1("neetoEditor.menu.strike")
+  }, {
+    type: MENU_ELEMENT_TYPES.HIGHLIGHT,
+    icon: Highlighter,
+    label: (_tooltips$highlight = tooltips.highlight) !== null && _tooltips$highlight !== void 0 ? _tooltips$highlight : t$1("neetoEditor.menu.highlight"),
+    isEnabled: options.includes(EDITOR_OPTIONS.HIGHLIGHT),
+    optionName: EDITOR_OPTIONS.HIGHLIGHT,
+    editor: editor,
+    runEditorCommand: runEditorCommand,
+    tooltipContent: (_tooltips$highlight2 = tooltips.highlight) !== null && _tooltips$highlight2 !== void 0 ? _tooltips$highlight2 : t$1("neetoEditor.menu.highlight")
+  }], [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: List,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleBulletList().run();
+    }),
+    isEnabled: options.includes(EDITOR_OPTIONS.LIST_BULLETS),
+    optionName: "bulletList",
+    highlight: true,
+    label: (_tooltips$bulletList = tooltips.bulletList) !== null && _tooltips$bulletList !== void 0 ? _tooltips$bulletList : t$1("neetoEditor.menu.bulletedList")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: ListOrdered,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleOrderedList().run();
+    }),
+    isEnabled: options.includes(EDITOR_OPTIONS.LIST_ORDERED),
+    optionName: "orderedList",
+    highlight: true,
+    label: (_tooltips$orderedList = tooltips.orderedList) !== null && _tooltips$orderedList !== void 0 ? _tooltips$orderedList : t$1("neetoEditor.menu.orderedList")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: ListChecks,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleTaskList().run();
+    }),
+    isEnabled: options.includes(EDITOR_OPTIONS.TODO_LIST),
+    optionName: "todoList",
+    highlight: true,
+    label: (_tooltips$todoList = tooltips.todoList) !== null && _tooltips$todoList !== void 0 ? _tooltips$todoList : t$1("neetoEditor.menu.todoList")
+  }], [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Quote,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleBlockquote().run();
+    }),
+    isEnabled: options.includes(EDITOR_OPTIONS.BLOCKQUOTE),
+    optionName: "blockquote",
+    highlight: true,
+    label: (_tooltips$blockQuote = tooltips.blockQuote) !== null && _tooltips$blockQuote !== void 0 ? _tooltips$blockQuote : t$1("neetoEditor.menu.blockQuote")
+  }, {
+    type: MENU_ELEMENT_TYPES.CALLOUT,
+    label: (_tooltips$callout = tooltips.callout) !== null && _tooltips$callout !== void 0 ? _tooltips$callout : t$1("neetoEditor.menu.callout"),
+    isEnabled: options.includes(EDITOR_OPTIONS.CALLOUT),
+    optionName: EDITOR_OPTIONS.CALLOUT,
+    editor: editor,
+    runEditorCommand: runEditorCommand,
+    tooltipContent: (_tooltips$callout2 = tooltips.callout) !== null && _tooltips$callout2 !== void 0 ? _tooltips$callout2 : t$1("neetoEditor.menu.callout")
+  }], [{
+    type: MENU_ELEMENT_TYPES.TABLE,
+    label: (_tooltips$table = tooltips.table) !== null && _tooltips$table !== void 0 ? _tooltips$table : t$1("neetoEditor.menu.table"),
+    isEnabled: options.includes(EDITOR_OPTIONS.TABLE),
+    optionName: EDITOR_OPTIONS.TABLE
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Paperclip,
+    command: function command() {
+      return attachmentProps === null || attachmentProps === void 0 ? void 0 : attachmentProps.handleUploadAttachments();
+    },
+    disabled: attachmentProps === null || attachmentProps === void 0 ? void 0 : attachmentProps.isDisabled,
+    isEnabled: options.includes(EDITOR_OPTIONS.ATTACHMENTS),
+    optionName: EDITOR_OPTIONS.ATTACHMENTS,
+    label: (_tooltips$attachments = tooltips.attachments) !== null && _tooltips$attachments !== void 0 ? _tooltips$attachments : t$1("neetoEditor.menu.attachments")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: FileText,
+    command: function command() {
+      if (!editor || !setIsNeetoKbArticleActive) return;
+      var _editor$state$selecti = editor.state.selection,
+        from = _editor$state$selecti.from,
+        to = _editor$state$selecti.to;
+      var cursorPos = editor.view.coordsAtPos(from);
+      setIsNeetoKbArticleActive({
+        active: true,
+        editor: editor,
+        range: {
+          from: from,
+          to: to
+        },
+        cursorPos: cursorPos
+      });
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.NEETO_KB_ARTICLE),
+    optionName: EDITOR_OPTIONS.NEETO_KB_ARTICLE,
+    label: (_tooltips$neetoKbArti = tooltips.neetoKbArticle) !== null && _tooltips$neetoKbArti !== void 0 ? _tooltips$neetoKbArti : t$1("neetoEditor.menu.linkToNeetoKbArticle")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: ImageUp,
+    command: function command() {
+      return setMediaUploader(assoc("image", true));
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.IMAGE_UPLOAD),
+    optionName: EDITOR_OPTIONS.IMAGE_UPLOAD,
+    label: (_tooltips$imageUpload = tooltips.imageUpload) !== null && _tooltips$imageUpload !== void 0 ? _tooltips$imageUpload : t$1("neetoEditor.menu.imageUpload")
+  }], [{
+    type: MENU_ELEMENT_TYPES.TEXT_COLOR,
+    label: (_tooltips$textColor = tooltips.textColor) !== null && _tooltips$textColor !== void 0 ? _tooltips$textColor : t$1("neetoEditor.menu.textColor"),
+    isEnabled: options.includes(EDITOR_OPTIONS.TEXT_COLOR),
+    optionName: EDITOR_OPTIONS.TEXT_COLOR
+  }, {
+    type: MENU_ELEMENT_TYPES.EMOJI,
+    label: (_tooltips$emoji = tooltips.emoji) !== null && _tooltips$emoji !== void 0 ? _tooltips$emoji : t$1("neetoEditor.menu.emoji"),
+    isEnabled: options.includes(EDITOR_OPTIONS.EMOJI),
+    optionName: EDITOR_OPTIONS.EMOJI,
+    setActive: setIsEmojiPickerActive,
+    isActive: isEmojiPickerActive
+  }, {
+    type: MENU_ELEMENT_TYPES.MENTIONS,
+    label: (_tooltips$mention = tooltips.mention) !== null && _tooltips$mention !== void 0 ? _tooltips$mention : t$1("neetoEditor.menu.mention"),
+    isEnabled: 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(EDITOR_OPTIONS.CODE),
+    optionName: EDITOR_OPTIONS.CODE,
+    label: (_tooltips$code = tooltips.code) !== null && _tooltips$code !== void 0 ? _tooltips$code : t$1("neetoEditor.menu.code")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: SquareCode,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleCodeBlock().run();
+    }),
+    isEnabled: options.includes(EDITOR_OPTIONS.CODE_BLOCK),
+    optionName: "codeBlock",
+    label: (_tooltips$codeBlock = tooltips.codeBlock) !== null && _tooltips$codeBlock !== void 0 ? _tooltips$codeBlock : t$1("neetoEditor.menu.codeBlock")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Video,
+    command: function command() {
+      return setMediaUploader(assoc("video", true));
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.VIDEO_UPLOAD),
+    optionName: EDITOR_OPTIONS.VIDEO_UPLOAD,
+    label: (_tooltips$videoUpload = tooltips.videoUpload) !== null && _tooltips$videoUpload !== void 0 ? _tooltips$videoUpload : t$1("neetoEditor.menu.videoUpload")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Underline,
+    isEnabled: options.includes(EDITOR_OPTIONS.UNDERLINE),
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleUnderline().run();
+    }),
+    optionName: EDITOR_OPTIONS.UNDERLINE,
+    label: (_tooltips$underline = tooltips.underline) !== null && _tooltips$underline !== void 0 ? _tooltips$underline : t$1("neetoEditor.menu.underline")
+  }], _toConsumableArray(addonCommandOptions), [{
+    icon: Undo,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().undo().run();
+    }),
+    isEnabled: options.includes(EDITOR_OPTIONS.UNDO),
+    optionName: EDITOR_OPTIONS.UNDO,
+    label: (_tooltips$undo = tooltips.undo) !== null && _tooltips$undo !== void 0 ? _tooltips$undo : t$1("neetoEditor.menu.undo"),
+    type: MENU_ELEMENT_TYPES.BUTTON
+  }, {
+    icon: Redo,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().redo().run();
+    }),
+    isEnabled: options.includes(EDITOR_OPTIONS.REDO),
+    optionName: EDITOR_OPTIONS.REDO,
+    label: (_tooltips$redo = tooltips.redo) !== null && _tooltips$redo !== void 0 ? _tooltips$redo : t$1("neetoEditor.menu.redo"),
+    type: MENU_ELEMENT_TYPES.BUTTON
+  }]];
+};
+var buildOptionsFromAddonCommands = function buildOptionsFromAddonCommands(_ref2) {
+  var commands = _ref2.commands,
+    runEditorCommand = _ref2.runEditorCommand;
+  return commands.map(function (option) {
+    return _objectSpread$1(_objectSpread$1({}, option), {}, {
+      type: MENU_ELEMENT_TYPES.BUTTON,
+      command: runEditorCommand(function (editor) {
+        var _option$command, _editor$state, _editor$state2;
+        return (_option$command = option.command) === null || _option$command === void 0 ? void 0 : _option$command.call(option, {
+          editor: editor,
+          range: {
+            from: (_editor$state = editor.state) === null || _editor$state === void 0 || (_editor$state = _editor$state.selection) === null || _editor$state === void 0 ? void 0 : _editor$state.to,
+            to: (_editor$state2 = editor.state) === null || _editor$state2 === void 0 ? void 0 : _editor$state2.selection.to
+          }
+        });
+      })
+    });
+  });
+};
+var buildMenuOptions = function buildMenuOptions(_ref3) {
+  var tooltips = _ref3.tooltips,
+    options = _ref3.options,
+    setMediaUploader = _ref3.setMediaUploader,
+    attachmentProps = _ref3.attachmentProps,
+    setIsAddLinkActive = _ref3.setIsAddLinkActive,
+    _ref3$mentions = _ref3.mentions,
+    mentions = _ref3$mentions === void 0 ? [] : _ref3$mentions,
+    addonCommands = _ref3.addonCommands,
+    setIsEmojiPickerActive = _ref3.setIsEmojiPickerActive,
+    isEmojiPickerActive = _ref3.isEmojiPickerActive,
+    runEditorCommand = _ref3.runEditorCommand,
+    editor = _ref3.editor,
+    setIsNeetoKbArticleActive = _ref3.setIsNeetoKbArticleActive;
+  var addonCommandOptions = buildOptionsFromAddonCommands({
+    commands: addonCommands,
+    runEditorCommand: runEditorCommand
+  });
+  var menuOptions = createMenuOptions({
+    tooltips: tooltips,
+    setMediaUploader: setMediaUploader,
+    attachmentProps: attachmentProps,
+    setIsAddLinkActive: setIsAddLinkActive,
+    options: options,
+    mentions: mentions,
+    addonCommandOptions: addonCommandOptions,
+    setIsEmojiPickerActive: setIsEmojiPickerActive,
+    isEmojiPickerActive: isEmojiPickerActive,
+    runEditorCommand: runEditorCommand,
+    editor: editor,
+    setIsNeetoKbArticleActive: setIsNeetoKbArticleActive
+  });
+  return menuOptions.map(function (option) {
+    return option.filter(prop("isEnabled"));
+  });
+};
+var getCursorPos = function getCursorPos(editor, to) {
+  return editor === null || editor === void 0 ? void 0 : editor.view.coordsAtPos(to);
+};
+var reGroupMenuItems = function reGroupMenuItems(menuRef, menuGroups) {
+  var toolbarWidth = menuRef.current.offsetWidth;
+  var totalWidth = 0;
+  var visibleMenuGroups = [];
+  var invisibleMenuGroups = [];
+  menuGroups.forEach(function (group, groupIndex) {
+    group.forEach(function (item, itemIndex) {
+      var width = MENU_ELEMENT_WIDTHS[item.type];
+      if (totalWidth + width < toolbarWidth) {
+        var _visibleMenuGroups$gr;
+        totalWidth += width;
+        visibleMenuGroups[groupIndex] = (_visibleMenuGroups$gr = visibleMenuGroups[groupIndex]) !== null && _visibleMenuGroups$gr !== void 0 ? _visibleMenuGroups$gr : [];
+        visibleMenuGroups[groupIndex][itemIndex] = item;
+      } else {
+        var _invisibleMenuGroups$;
+        var visibleMenuGroupsLength = visibleMenuGroups.length;
+        var index = groupIndex - visibleMenuGroupsLength + 1;
+        invisibleMenuGroups[index] = (_invisibleMenuGroups$ = invisibleMenuGroups[index]) !== null && _invisibleMenuGroups$ !== void 0 ? _invisibleMenuGroups$ : [];
+        invisibleMenuGroups[index][itemIndex] = item;
+      }
+    });
+  });
+  return {
+    visibleMenuGroups: visibleMenuGroups,
+    invisibleMenuGroups: invisibleMenuGroups
+  };
+};
+var getLinkPopoverPosition = function getLinkPopoverPosition(editor, popoverRef) {
+  var _editor$view$state$se = editor.view.state.selection,
+    selectionEnd = _editor$view$state$se.$to.pos,
+    selectionStart = _editor$view$state$se.$from.pos;
+  var selectionLength = selectionEnd - selectionStart;
+  var offset = 0;
+  if (selectionLength > 1) offset = Math.round(selectionLength / 2);
+  if (selectionLength === 1) offset = 1;
+  var arrowCoords = editor.view.coordsAtPos(selectionStart + offset);
+  var arrowPosition = {
+    top: "".concat(arrowCoords.top + 21, "px"),
+    left: "".concat(arrowCoords.left - 8.5, "px")
+  };
+  var popoverCoords = editor.view.coordsAtPos(selectionStart);
+  var adjustedLeft = popoverCoords === null || popoverCoords === void 0 ? void 0 : popoverCoords.left,
+    adjustedTop = popoverCoords === null || popoverCoords === void 0 ? void 0 : popoverCoords.top;
+  if (popoverRef !== null && popoverRef !== void 0 && popoverRef.current) {
+    var _popoverRef$current;
+    var popoverRect = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.getBoundingClientRect();
+    var screenWidth = window.innerWidth;
+    var screenHeight = window.innerHeight;
+    var maxLeft = screenWidth - popoverRect.width;
+    var maxTop = screenHeight - popoverRect.height - 50;
+    adjustedLeft = popoverCoords !== null && popoverCoords !== void 0 && popoverCoords.left ? Math.min(popoverCoords.left - 50, maxLeft) : 0;
+    adjustedTop = popoverCoords !== null && popoverCoords !== void 0 && popoverCoords.top ? Math.min(popoverCoords.top - 22, maxTop) : 0;
+  } else {
+    adjustedLeft = popoverCoords.left - 50;
+    adjustedTop = popoverCoords.top - 22;
+  }
+  var popoverPosition = {
+    top: "".concat(adjustedTop, "px"),
+    left: "".concat(adjustedLeft, "px")
+  };
+  return {
+    arrowPosition: arrowPosition,
+    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, ")");
+}
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Menu = function Menu(props) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEmojiPickerActive = _useState2[0],
+    setIsEmojiPickerActive = _useState2[1];
+  var _useState3 = useState({
+      image: false,
+      video: false
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mediaUploader = _useState4[0],
+    setMediaUploader = _useState4[1];
+  var _props$menuType = props.menuType,
+    menuType = _props$menuType === void 0 ? "fixed" : _props$menuType,
+    _props$addons = props.addons,
+    addons = _props$addons === void 0 ? [] : _props$addons,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    _props$editorSecrets = props.editorSecrets,
+    editorSecrets = _props$editorSecrets === void 0 ? {} : _props$editorSecrets,
+    attachmentProps = props.attachmentProps,
+    _props$defaults = props.defaults,
+    defaults = _props$defaults === void 0 ? DEFAULT_EDITOR_OPTIONS : _props$defaults;
+  var MenuComponent = useMemo(function () {
+    return MENU_COMPONENTS[menuType];
+  }, [menuType]);
+  var menuOptions = isEmpty(options) ? [].concat(_toConsumableArray(defaults), _toConsumableArray(addons)) : options;
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && e.altKey) {
+        if (e.code === "KeyE") {
+          setIsEmojiPickerActive(function (prevState) {
+            return !prevState;
+          });
+        } else if (e.code === "KeyA") {
+          not(attachmentProps === null || attachmentProps === void 0 ? void 0 : attachmentProps.isDisabled) && (attachmentProps === null || attachmentProps === void 0 ? void 0 : attachmentProps.handleUploadAttachments());
+        } else if (e.code === "KeyK") {
+          setMediaUploader(assoc("image", true));
+        } else if (e.code === "KeyV") {
+          setMediaUploader(assoc("video", true));
+        }
+      }
+    };
+    if (menuType !== "none") {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return function () {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  return /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, props), {}, {
+    attachmentProps: attachmentProps,
+    isEmojiPickerActive: isEmojiPickerActive,
+    mediaUploader: mediaUploader,
+    setIsEmojiPickerActive: setIsEmojiPickerActive,
+    setMediaUploader: setMediaUploader
+  })), {}, {
+    options: menuOptions,
+    unsplashApiKey: editorSecrets.unsplash
+  }));
+};
+
+export { CALLOUT_TYPES as C, DEFAULT_EDITOR_OPTIONS as D, EmojiPickerMenu as E, LINK_VALIDATION_SCHEMA as L, Menu as M, isEmojiSuggestionsMenuActive as a, buildLevelsFromOptions as b, getLinkPopoverPosition as c, validateAndFormatUrl as d, getEditorStyles as e, MenuDynamicVariables as f, getSuggestionAppendTo as g, MediaUploader as h, isEditorOverlaysActive as i, LinkAddPopOver as j, transformPastedHTML as k, handlePaste as l, clipboardTextParser as m, setInitialPosition as s, transformEditorContent as t, validateUrl as v };
+//# sourceMappingURL=chunk-DsAUS6bL.js.map