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

package/dist/cjs/chunk-DM1lUvXy.cjs.js

@@ -0,0 +1,3525 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var ramda = require('ramda');
+var i18n = require('i18next');
+var yup = require('yup');
+var constants = require('./chunk-Bmjmsp-E.cjs.js');
+var lucideReact = require('lucide-react');
+var useEditorStore = require('./chunk-CohcWDmm.cjs.js');
+var classnames = require('classnames');
+var neetoCist = require('@bigbinary/neeto-cist');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var Popover = require('@bigbinary/neeto-atoms/primitives/Popover');
+var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+var _inherits = require('@babel/runtime/helpers/inherits');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var emojiMart = require('emoji-mart');
+var utils = require('@bigbinary/neeto-commons-frontend/v2/utils');
+var reactColorful = require('react-colorful');
+var index = require('./chunk-Crp27WMe.cjs.js');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/v2/ImageUploader');
+var reactFileIcon_esm = require('./chunk-D3Unocnm.cjs.js');
+var FileIcon = require('./chunk-D6ygkQBu.cjs.js');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
+var formik = require('@bigbinary/neeto-atoms/formik');
+var ReactDOM = require('react-dom');
+var shallow = require('zustand/shallow');
+var DynamicVariables = require('@bigbinary/neeto-molecules/v2/DynamicVariables');
+var Tippy = require('@tippyjs/react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefault(_asyncToGenerator);
+var _classCallCheck__default = /*#__PURE__*/_interopDefault(_classCallCheck);
+var _createClass__default = /*#__PURE__*/_interopDefault(_createClass);
+var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefault(_possibleConstructorReturn);
+var _getPrototypeOf__default = /*#__PURE__*/_interopDefault(_getPrototypeOf);
+var _inherits__default = /*#__PURE__*/_interopDefault(_inherits);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefault(_regeneratorRuntime);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+var ImageUploader__default = /*#__PURE__*/_interopDefault(ImageUploader);
+var DynamicVariables__default = /*#__PURE__*/_interopDefault(DynamicVariables);
+var Tippy__default = /*#__PURE__*/_interopDefault(Tippy);
+
+var DEFAULT_EDITOR_OPTIONS = [constants.EDITOR_OPTIONS.BOLD, constants.EDITOR_OPTIONS.ITALIC, constants.EDITOR_OPTIONS.UNDERLINE, constants.EDITOR_OPTIONS.STRIKETHROUGH, constants.EDITOR_OPTIONS.LINK, constants.EDITOR_OPTIONS.PARAGRAPH, constants.EDITOR_OPTIONS.H1, constants.EDITOR_OPTIONS.H2, constants.EDITOR_OPTIONS.H3, constants.EDITOR_OPTIONS.H4, constants.EDITOR_OPTIONS.H5, constants.EDITOR_OPTIONS.H6, constants.EDITOR_OPTIONS.LIST_BULLETS, constants.EDITOR_OPTIONS.LIST_ORDERED, constants.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__namespace.object().shape({
+  textContent: yup__namespace.string().required(i18n.t("neetoEditor.error.textRequired")),
+  urlString: yup__namespace.string().matches(constants.ALL_PROTOCOL_URL_REGEXP, i18n.t("neetoEditor.error.invalidUrl")).required(i18n.t("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 (neetoCist.isNotEmpty(line)) {
+      nodeJson.content = [{
+        type: "text",
+        text: line
+      }];
+    }
+    var node = index.Node.fromJSON(context.doc.type.schema, nodeJson);
+    nodes.push(node);
+  });
+  var fragment = index.Fragment.fromArray(nodes);
+  return index.Slice.maxOpen(fragment);
+};
+var setInitialPosition = function setInitialPosition(editor) {
+  var state = editor.state,
+    view = editor.view;
+  var endPosition = index.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 (!constants.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__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.EDITOR_OPTIONS.H1, 1), constants.EDITOR_OPTIONS.H2, 2), constants.EDITOR_OPTIONS.H3, 3), constants.EDITOR_OPTIONS.H4, 4), constants.EDITOR_OPTIONS.H5, 5), constants.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: i18n.t("neetoEditor.menu.calloutDefault"),
+  icon: lucideReact.Megaphone,
+  bgColor: "--neeto-editor-gray-100"
+}, {
+  type: "info",
+  label: i18n.t("neetoEditor.menu.calloutInfo"),
+  icon: lucideReact.Info,
+  bgColor: "--neeto-editor-info-100",
+  iconColor: "var(--ne-editor-content-callout-info-foreground-color)"
+}, {
+  type: "warning",
+  label: i18n.t("neetoEditor.menu.calloutWarning"),
+  icon: lucideReact.AlertTriangle,
+  bgColor: "--neeto-editor-warning-100",
+  iconColor: "var(--ne-editor-content-callout-warning-foreground-color)"
+}, {
+  type: "error",
+  label: i18n.t("neetoEditor.menu.calloutError"),
+  icon: lucideReact.AlertOctagon,
+  bgColor: "--neeto-editor-error-100",
+  iconColor: "var(--ne-editor-content-callout-error-foreground-color)"
+}, {
+  type: "success",
+  label: i18n.t("neetoEditor.menu.calloutSuccess"),
+  icon: lucideReact.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__default.default(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__default.default(o), _possibleConstructorReturn__default.default(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf__default.default(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__default.default(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__default.default(_this, "ref", /*#__PURE__*/React__default.default.createRef());
+    _defineProperty__default.default(_this, "fetchEmojiData", /*#__PURE__*/_asyncToGenerator__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee() {
+      var _yield$emojiPickerApi, data;
+      return _regeneratorRuntime__default.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return useEditorStore.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__default.default(_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__default.default(_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__default.default(EmojiPickerMenu, _React$Component);
+  return _createClass__default.default(EmojiPickerMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      new emojiMart.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__*/jsxRuntime.jsx("div", {
+        "data-testid": "neeto-editor-emoji-picker",
+        ref: this.ref,
+        style: {
+          minWidth: "350px"
+        }
+      });
+    }
+  }]);
+}(React__default.default.Component);
+EmojiPickerMenu.defaultProps = {
+  editor: {},
+  range: {}
+};
+
+var validateUrl = function validateUrl(url) {
+  if (!url) return false;
+  for (var _i = 0, _Object$values = Object.values(constants.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 = neetoAtoms.DropdownMenu.Menu,
+  MenuItem$3 = neetoAtoms.DropdownMenu.MenuItem;
+var Mentions$1 = 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 (ramda.isEmpty(mentions)) return null;
+  var renderItems = mentions.map(function (_ref2) {
+    var key = _ref2.key,
+      name = _ref2.name,
+      imageUrl = _ref2.imageUrl;
+    return /*#__PURE__*/jsxRuntime.jsx(MenuItem$3, {
+      "data-testid": "neeto-editor-mention-option-".concat(key),
+      prefix: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown min-w-56"
+      },
+      icon: lucideReact.AtSign,
+      triggerProps: {
+        "data-testid": "neeto-editor-mention-option"
+      },
+      children: renderItems
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
+    "data-testid": "neeto-editor-mention-option",
+    dropdownProps: {
+      className: "ne-editor-dropdown min-w-56"
+    },
+    icon: lucideReact.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__*/jsxRuntime.jsx(Menu$4, {
+      children: renderItems
+    })
+  });
+};
+var Mentions = /*#__PURE__*/React.memo(Mentions$1);
+
+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__default.default(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$1 = 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.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.shallow),
+    isActive = _useEditorStore.isActive,
+    _useEditorStore$disab = _useEditorStore.disabled,
+    disabled = _useEditorStore$disab === void 0 ? isButtonDisabled : _useEditorStore$disab;
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, _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
+  }, useEditorStore.generateFocusProps(highlight)));
+};
+var MenuButton = /*#__PURE__*/React.memo(MenuButton$1);
+
+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 : lucideReact.Flag;
+  return /*#__PURE__*/jsxRuntime.jsx(Icon, {
+    size: 16
+  });
+};
+
+var MenuItem$2 = neetoAtoms.DropdownMenu.MenuItem;
+var CalloutTypeOption = function CalloutTypeOption(_ref) {
+  var calloutType = _ref.calloutType,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick;
+  var Icon = calloutType.icon;
+  return /*#__PURE__*/jsxRuntime.jsx(MenuItem$2, {
+    onClick: onClick,
+    "data-testid": "callout-type-option",
+    isActive: isSelected,
+    prefix: /*#__PURE__*/jsxRuntime.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__*/React.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var dropdownRef = React.useRef(null);
+  var isInCallout = editor.isActive("callout");
+  var currentCalloutAttrs = isInCallout ? editor.getAttributes("callout") : null;
+  var currentType = neetoCist.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.Label, {
+      children: t("neetoEditor.menu.selectCalloutType")
+    }), /*#__PURE__*/jsxRuntime.jsx(RenderCalloutOptions, {
+      currentCalloutAttrs: currentCalloutAttrs,
+      handleCalloutTypeClick: handleCalloutTypeClick,
+      isInCallout: isInCallout
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown w-[200px] p-2"
+      },
+      icon: isInCallout ? currentType.icon : lucideReact.Flag,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-callout-option"
+      },
+      children: renderOptions
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
+    dropdownProps: {
+      className: "ne-editor-dropdown w-[200px] p-2"
+    },
+    icon: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.Menu, {
+      children: renderOptions
+    })
+  });
+};
+
+var EmojiOption$1 = 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 = React.useState(0),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    resetKey = _useState2[0],
+    setResetKey = _useState2[1];
+  var handlePicked = function handlePicked() {
+    setActive(false);
+    setResetKey(function (k) {
+      return k + 1;
+    });
+  };
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/React.createElement(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      icon: lucideReact.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__*/jsxRuntime.jsx(EmojiPickerMenu, {
+      editor: editor,
+      setActive: handlePicked
+    }));
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
+    closeOnSelect: false,
+    icon: lucideReact.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__*/jsxRuntime.jsx(EmojiPickerMenu, {
+      editor: editor,
+      setActive: handlePicked
+    })
+  }, resetKey);
+};
+var EmojiOption = /*#__PURE__*/React.memo(EmojiOption$1);
+
+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 = React.useState(null),
+    _useState2 = _slicedToArray__default.default(_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 = React.useState(0),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    resetKey = _useState4[0],
+    setResetKey = _useState4[1];
+  var _useTranslation = reactI18next.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();
+  };
+  React.useEffect(function () {
+    setColor(editor.getAttributes("textStyle").color);
+  }, [resetKey, editor.getAttributes("textStyle").color]);
+  var pickerContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      minWidth: "236px"
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactColorful.HexColorPicker, {
+      color: color || "#000000",
+      onChange: setColor
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-text-color-option__options-group",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Input, {
+        autoFocus: true,
+        className: "neeto-editor-text-color-option__options-group__input",
+        placeholder: t("neetoEditor.placeholders.pickColor"),
+        size: "small",
+        value: color,
+        onChange: utils.withEventTargetValue(setColor),
+        onClick: function onClick(event) {
+          return event.stopPropagation();
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        icon: lucideReact.Check,
+        size: "sm",
+        onClick: handleSave
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        icon: lucideReact.X,
+        size: "sm",
+        variant: "ghost",
+        onClick: function onClick() {
+          editor.commands.focus();
+          closeMenu();
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        icon: lucideReact.RotateCw,
+        size: "sm",
+        variant: "ghost",
+        tooltipProps: {
+          content: t("neetoEditor.common.resetToDefault"),
+          position: "top"
+        },
+        onClick: handleUnset
+      })]
+    })]
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/React.createElement(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      contentProps: {
+        className: "ne-editor-dropdown w-[260px] p-2"
+      },
+      icon: lucideReact.Baseline,
+      key: resetKey,
+      triggerProps: {
+        "data-testid": "neeto-editor-fixed-menu-text-color-option"
+      }
+    }, pickerContent);
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
+    closeOnSelect: false,
+    dropdownProps: {
+      className: "ne-editor-dropdown w-[260px] p-2"
+    },
+    icon: lucideReact.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    link = _useState2[0],
+    setLink = _useState2[1];
+  React.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 (constants.ALL_PROTOCOL_URL_REGEXP.test(link)) {
+      editor.chain().focus().setLink({
+        href: link
+      }).run();
+      handleClose();
+    } else if (neetoCist.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__*/jsxRuntime.jsxs("div", {
+    className: "neeto-editor-bubble-menu__link",
+    onKeyDown: handleKeyDown,
+    children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      "data-testid": "neeto-editor-link-cancel-button",
+      icon: lucideReact.X,
+      size: "sm",
+      variant: "secondary",
+      onClick: handleReset
+    })]
+  });
+};
+
+var TableOption$2 = function TableOption(_ref) {
+  var editor = _ref.editor,
+    handleClose = _ref.handleClose;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(3),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
+  var _useState3 = React.useState(3),
+    _useState4 = _slicedToArray__default.default(_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__*/jsxRuntime.jsxs("div", {
+    className: "neeto-editor-bubble-menu__table",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-bubble-menu__table__menu-item",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
+        className: "neeto-editor-bubble-menu__table__input-label",
+        children: t("neetoEditor.menu.rows")
+      }), /*#__PURE__*/jsxRuntime.jsx("input", {
+        autoFocus: true,
+        "data-testid": "neeto-editor-bubble-menu-table-rows-input",
+        min: "1",
+        type: "number",
+        value: rows,
+        onChange: utils.withEventTargetValue(setRows)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-bubble-menu__table__menu-item",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Label, {
+        className: "neeto-editor-bubble-menu__table__input-label",
+        children: t("neetoEditor.menu.columns")
+      }), /*#__PURE__*/jsxRuntime.jsx("input", {
+        "data-testid": "neeto-editor-bubble-menu-table-option-input",
+        min: "1",
+        type: "number",
+        value: columns,
+        onChange: utils.withEventTargetValue(setColumns)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-bubble-menu__table__buttons",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        "data-testid": "neeto-editor-bubble-menu-table-option-create-button",
+        icon: lucideReact.Check,
+        size: "sm",
+        variant: "secondary",
+        onClick: handleSubmit
+      }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        "data-testid": "neeto-editor-bubble-menu-table-option-close-button",
+        icon: lucideReact.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__default.default(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: lucideReact.Bold,
+      command: function command() {
+        return editor.chain().focus().toggleBold().run();
+      },
+      active: editor.isActive("bold"),
+      optionName: "bold",
+      tooltip: tooltips.bold || i18n.t("neetoEditor.menu.bold")
+    }, {
+      Icon: lucideReact.Italic,
+      command: function command() {
+        return editor.chain().focus().toggleItalic().run();
+      },
+      active: editor.isActive("italic"),
+      optionName: "italic",
+      tooltip: tooltips.italic || i18n.t("neetoEditor.menu.italic")
+    }, {
+      Icon: lucideReact.Underline,
+      command: function command() {
+        return editor.chain().focus().toggleUnderline().run();
+      },
+      active: editor.isActive("underline"),
+      optionName: "underline",
+      tooltip: tooltips.underline || i18n.t("neetoEditor.menu.underline")
+    }, {
+      Icon: lucideReact.Link,
+      command: function command() {
+        return setIsAddLinkActive(ramda.not);
+      },
+      optionName: "link",
+      tooltip: "Link"
+    }, {
+      Icon: lucideReact.Strikethrough,
+      command: function command() {
+        return editor.chain().focus().toggleStrike().run();
+      },
+      active: editor.isActive("strike"),
+      optionName: "strike",
+      tooltip: tooltips.strike || i18n.t("neetoEditor.menu.strike")
+    }, {
+      Icon: lucideReact.Highlighter,
+      command: function command() {
+        return editor.chain().focus().toggleHighlight().run();
+      },
+      active: editor.isActive("highlight"),
+      optionName: "highlight",
+      tooltip: tooltips.highlight || i18n.t("neetoEditor.menu.highlight")
+    }],
+    block: [{
+      Icon: lucideReact.Quote,
+      command: function command() {
+        return editor.chain().focus().toggleBlockquote().run();
+      },
+      active: editor.isActive("blockquote"),
+      optionName: "block-quote",
+      highlight: true,
+      tooltip: tooltips.blockQuote || i18n.t("neetoEditor.menu.blockQuote")
+    }, {
+      Icon: lucideReact.Code,
+      command: function command() {
+        return editor.chain().focus().toggleCode().run();
+      },
+      active: editor.isActive("code"),
+      optionName: "code",
+      tooltip: tooltips.code || i18n.t("neetoEditor.menu.code")
+    }, {
+      Icon: lucideReact.SquareCode,
+      command: function command() {
+        return editor.chain().focus().toggleCodeBlock().run();
+      },
+      active: editor.isActive("codeBlock"),
+      optionName: "code-block",
+      tooltip: tooltips.codeBlock || i18n.t("neetoEditor.menu.codeBlock")
+    }],
+    list: [{
+      Icon: lucideReact.List,
+      command: function command() {
+        return editor.chain().focus().toggleBulletList().run();
+      },
+      active: editor.isActive("bulletList"),
+      optionName: "bullet-list",
+      highlight: true,
+      tooltip: tooltips.bulletList || i18n.t("neetoEditor.menu.bulletedList")
+    }, {
+      Icon: lucideReact.ListOrdered,
+      command: function command() {
+        return editor.chain().focus().toggleOrderedList().run();
+      },
+      active: editor.isActive("orderedList"),
+      optionName: "ordered-list",
+      highlight: true,
+      tooltip: tooltips.orderedList || i18n.t("neetoEditor.menu.orderedList")
+    }],
+    misc: [{
+      Icon: lucideReact.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 || i18n.t("neetoEditor.menu.attachments")
+    }, {
+      Icon: lucideReact.ImageUp,
+      command: function command() {
+        return setMediaUploader(ramda.assoc("image", true));
+      },
+      optionName: "image-upload",
+      tooltip: tooltips.imageUpload || i18n.t("neetoEditor.menu.imageUpload")
+    }, {
+      Icon: lucideReact.Video,
+      command: function command() {
+        return setMediaUploader(ramda.assoc("video", true));
+      },
+      optionName: "video-upload",
+      tooltip: tooltips.videoUpload || i18n.t("neetoEditor.menu.videoUpload")
+    }],
+    right: [{
+      Icon: lucideReact.Undo,
+      command: function command() {
+        return editor.chain().focus().undo().run();
+      },
+      active: false,
+      disabled: !editor.can().undo(),
+      optionName: "undo",
+      tooltip: tooltips.undo || i18n.t("neetoEditor.menu.undo")
+    }, {
+      Icon: lucideReact.Redo,
+      command: function command() {
+        return editor.chain().focus().redo().run();
+      },
+      active: false,
+      disabled: !editor.can().redo(),
+      optionName: "redo",
+      tooltip: tooltips.redo || i18n.t("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 ramda.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__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.EDITOR_OPTIONS.H1, {
+    optionName: "Heading 1",
+    icon: lucideReact.Heading1,
+    active: editor.isActive("heading", {
+      level: 1
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 1
+      }).run();
+    }
+  }), constants.EDITOR_OPTIONS.H2, {
+    optionName: "Heading 2",
+    icon: lucideReact.Heading2,
+    active: editor.isActive("heading", {
+      level: 2
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 2
+      }).run();
+    }
+  }), constants.EDITOR_OPTIONS.H3, {
+    optionName: "Heading 3",
+    icon: lucideReact.Heading3,
+    active: editor.isActive("heading", {
+      level: 3
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 3
+      }).run();
+    }
+  }), constants.EDITOR_OPTIONS.PARAGRAPH, {
+    optionName: "Text",
+    icon: lucideReact.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(ramda.prop("active"))) === null || _options$find === void 0 ? void 0 : _options$find.icon) || lucideReact.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__*/jsxRuntime.jsx(neetoAtoms.Button, _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
+  }, useEditorStore.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var dropdownOptions = getTextMenuDropdownOptions({
+    editor: editor,
+    options: options
+  });
+  var Icon = getNodeIcon(dropdownOptions);
+  var isEmojiActive = options.includes(constants.EDITOR_OPTIONS.EMOJI);
+  var isTextColorOptionActive = options.includes(constants.EDITOR_OPTIONS.TEXT_COLOR);
+  var isLinkActive = options.includes(constants.EDITOR_OPTIONS.LINK);
+  var isTableActive = options.includes(constants.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__*/jsxRuntime.jsx(LinkOption, {
+      editor: editor,
+      handleAnimateInvalidLink: handleAnimateInvalidLink,
+      handleClose: function handleClose() {
+        return setIsLinkOptionActive(false);
+      }
+    });
+  }
+  if (isTableOptionActive) {
+    return /*#__PURE__*/jsxRuntime.jsx(TableOption$2, {
+      editor: editor,
+      handleClose: function handleClose() {
+        return setIsTableOptionActive(false);
+      }
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Popover.Popover, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Popover.PopoverTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          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__*/jsxRuntime.jsx(lucideReact.ChevronDown, {}),
+          variant: "ghost"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Popover.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__*/jsxRuntime.jsx(neetoAtoms.Button, {
+            fullWidth: true,
+            className: "justify-start",
+            icon: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+              size: 16
+            }),
+            iconPosition: "left",
+            label: optionName,
+            size: "sm",
+            variant: "ghost",
+            onClick: command
+          }, optionName);
+        })
+      })]
+    }), fontStyleOptions.map(renderOptionButton), blockStyleOptions.map(renderOptionButton), isTextColorOptionActive && /*#__PURE__*/jsxRuntime.jsx(TextColorOption, {
+      editor: editor,
+      tooltipContent: tooltips.textColor || t("neetoEditor.menu.textColor")
+    }), isEmojiActive && /*#__PURE__*/jsxRuntime.jsx(EmojiOption, {
+      editor: editor,
+      isActive: isEmojiPickerActive,
+      setActive: setIsEmojiPickerActive,
+      tooltipContent: tooltips.emoji || t("neetoEditor.menu.emoji")
+    }), listStyleOptions.map(renderOptionButton), isLinkActive && renderOptionButton({
+      Icon: lucideReact.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: lucideReact.Table,
+      command: function command() {
+        return setIsTableOptionActive(true);
+      },
+      active: editor.isActive("table"),
+      optionName: "table",
+      highlight: false,
+      tooltip: tooltips.table || t("neetoEditor.menu.table")
+    }), /*#__PURE__*/jsxRuntime.jsx(Mentions, {
+      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 = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    isInvalidLink = _useState2[0],
+    setIsInvalidLink = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    isLinkOptionActive = _useState4[0],
+    setIsLinkOptionActive = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray__default.default(_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 = [constants.EDITOR_OPTIONS.BOLD, constants.EDITOR_OPTIONS.ITALIC, constants.EDITOR_OPTIONS.UNDERLINE, constants.EDITOR_OPTIONS.STRIKETHROUGH, constants.EDITOR_OPTIONS.LINK];
+  var noTextOptions = neetoCist.isNotPresent(textOptions.filter(function (option) {
+    return bubbleMenuOptions.includes(option);
+  }));
+  if (!editor || !isImageNodeSelected && noTextOptions) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: /*#__PURE__*/jsxRuntime.jsx(useEditorStore.BubbleMenu, {
+      editor: editor,
+      style: {
+        zIndex: 99999,
+        maxWidth: 500
+      },
+      className: classnames__default.default("neeto-editor-bubble-menu", {
+        "neeto-editor-bubble-menu-animate-shake": isInvalidLink
+      }),
+      options: {
+        offset: 10,
+        onHide: function onHide() {
+          setIsLinkOptionActive(false);
+          setIsTableOptionActive(false);
+        }
+      },
+      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {});
+};
+
+var Progress = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    queuedFiles = _ref.queuedFiles,
+    cancelUpload = _ref.cancelUpload;
+  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+        className: "ne-media-uploader__media",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "ne-media-uploader__media__cancel-button-wrapper",
+          children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+            "data-testid": "neeto-editor-image-upload-cancel-button",
+            icon: lucideReact.X,
+            size: "sm",
+            variant: "ghost",
+            onClick: function onClick() {
+              return cancelUpload(id);
+            }
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(FileIcon.File, {
+          className: "ne-media-uploader__media__info__icon",
+          fileName: filename
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "ne-media-uploader__media__info",
+          children: [/*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Typography, {
+            variant: "body3",
+            children: [progress === 100 && t("neetoEditor.localUploader.completed"), progress !== 100 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [progress, "%"]
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "ne-media-uploader__media__progress",
+            children: /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "ne-media-uploader__media__progress-bar",
+              style: {
+                width: "".concat(progress, "%")
+              }
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
+            content: filename,
+            position: "top",
+            children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var uploadConfig = isImage ? FileIcon.DEFAULT_IMAGE_UPLOAD_CONFIG : FileIcon.DEFAULT_VIDEO_UPLOAD_CONFIG;
+  var fileInputRef = React.useRef(null);
+  var dropTargetRef = React.useRef(null);
+  var _useFileUploader = FileIcon.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__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee(files) {
+      var uploadedFiles;
+      return _regeneratorRuntime__default.default.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);
+    };
+  }();
+  reactFileIcon_esm.useDropFiles({
+    dropTargetRef: dropTargetRef,
+    onDrop: handleFilesDrop
+  });
+  setIsUploading(isUploading);
+  var handleAddFile = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee2(_ref3) {
+      var files, uploadedFiles;
+      return _regeneratorRuntime__default.default.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 !ramda.isEmpty(queuedFiles) || isUploading ? /*#__PURE__*/jsxRuntime.jsx(Progress, {
+    cancelUpload: cancelUpload,
+    queuedFiles: queuedFiles
+  }) : /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("input", {
+      multiple: true,
+      className: "ne-media-uploader__dnd-input",
+      "data-testid": "neeto-editor-media-uploader-input",
+      ref: fileInputRef,
+      type: "file",
+      accept: isImage ? FileIcon.ALLOWED_IMAGE_TYPES.join(",") : FileIcon.ALLOWED_VIDEO_TYPES.join(","),
+      onChange: handleAddFile
+    }), /*#__PURE__*/jsxRuntime.jsx(lucideReact.ImageUp, {
+      className: "ne-media-uploader__dnd-icon",
+      size: 24
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      variant: "body2",
+      children: t("neetoEditor.localUploader.dropFilesHere")
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      variant: "body3",
+      children: t("neetoEditor.localUploader.maxFileSize", {
+        entity: FileIcon.convertToFileSize(uploadConfig.restrictions.maxFileSize)
+      })
+    })]
+  });
+};
+
+var VideoEmbedForm = function VideoEmbedForm(_ref) {
+  var onEmbedVideo = _ref.onEmbedVideo,
+    onAttachVideo = _ref.onAttachVideo,
+    onClose = _ref.onClose;
+  var _useTranslation = reactI18next.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__*/jsxRuntime.jsx("div", {
+    className: "ne-video-embed-form",
+    children: /*#__PURE__*/jsxRuntime.jsx(formik.Form, {
+      formikProps: {
+        initialValues: initialValues,
+        validationSchema: FileIcon.VIDEO_EMBED_FORM_VALIDATION_SCHEMA,
+        onSubmit: onSubmit
+      },
+      children: function children(_ref3) {
+        var dirty = _ref3.dirty,
+          isSubmitting = _ref3.isSubmitting,
+          resetForm = _ref3.resetForm;
+        return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "ne-video-embed-form__content",
+            children: /*#__PURE__*/jsxRuntime.jsx(formik.Input, {
+              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__*/jsxRuntime.jsx(formik.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState("local"),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    isUploading = _useState4[0],
+    setIsUploading = _useState4[1];
+  var isOpen = mediaUploader.image || mediaUploader.video;
+  var _useState5 = React.useState([]),
+    _useState6 = _slicedToArray__default.default(_useState5, 2),
+    tabs = _useState6[0],
+    setTabs = _useState6[1];
+  React.useEffect(function () {
+    isOpen && setTabs(FileIcon.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__default.default(/*#__PURE__*/_regeneratorRuntime__default.default.mark(function _callee(file) {
+      return _regeneratorRuntime__default.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(neetoCist.isNotPresent(file.id) && neetoCist.isNotPresent(file.signedId))) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.prev = 2;
+            _context.next = 5;
+            return reactFileIcon_esm.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);
+            neetoAtoms.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 = ramda.not(isUploading);
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Dialog, {
+    isOpen: isOpen,
+    className: "ne-media-uploader-modal",
+    closeButton: allowDismiss,
+    onClose: allowDismiss ? handleClose : undefined,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "ne-media-uploader",
+      children: [(mediaUploader.video || mediaUploader.image) && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "ne-media-uploader__header",
+        children: /*#__PURE__*/jsxRuntime.jsxs("h2", {
+          className: "ne-media-uploader__header-title",
+          children: [mediaUploader.video && t("neetoEditor.menu.addVideo"), mediaUploader.image && t("neetoEditor.menu.addImage")]
+        })
+      }), !neetoCist.isNotPresent(tabs) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs, {
+        value: activeTab,
+        onValueChange: setActiveTab,
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.List, {
+          children: tabs.map(function (_ref4) {
+            var key = _ref4.key,
+              title = _ref4.title;
+            return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.Item, {
+              "data-testid": "neeto-editor-media-uploader-".concat(key, "-tab"),
+              value: key,
+              children: title
+            }, key);
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ne-media-uploader__content",
+        children: [mediaUploader.image && /*#__PURE__*/jsxRuntime.jsx(ImageUploader__default.default, {
+          onUploadComplete: onUploadComplete,
+          showAssetLibrary: showAssetLibrary,
+          className: "ne-media-uploader__image-uploader"
+        }), mediaUploader.video && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [activeTab === "local" && /*#__PURE__*/jsxRuntime.jsx(LocalUploader, {
+            insertMediaToEditor: insertMediaToEditor,
+            setIsUploading: setIsUploading,
+            isImage: false,
+            onClose: handleClose
+          }), activeTab === "embed" && /*#__PURE__*/jsxRuntime.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 = React.useState(text),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    linkText = _useState2[0],
+    setLinkText = _useState2[1];
+  var _useState3 = React.useState(""),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    linkUrl = _useState4[0],
+    setLinkUrl = _useState4[1];
+  var _useState5 = React.useState(openLinkInNewTab),
+    _useState6 = _slicedToArray__default.default(_useState5, 2),
+    openInNewTab = _useState6[0],
+    setOpenInNewTab = _useState6[1];
+  var _useState7 = React.useState(""),
+    _useState8 = _slicedToArray__default.default(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
+  var _useState9 = React.useState(getCursorPos(editor, to)),
+    _useState0 = _slicedToArray__default.default(_useState9, 2),
+    popoverPosition = _useState0[0],
+    setPopoverPosition = _useState0[1];
+  var _useState1 = React.useState({
+      top: 0,
+      left: 0
+    }),
+    _useState10 = _slicedToArray__default.default(_useState1, 2),
+    arrowPosition = _useState10[0],
+    setArrowPosition = _useState10[1];
+  var popoverRef = React.useRef(null);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isLinkTextPresent = !neetoCist.isNotPresent(linkText);
+  var isLinlUrlPresent = !neetoCist.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 (!constants.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);
+  };
+  reactUtils.useOnClickOutside(popoverRef, removePopover);
+  React.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__*/ReactDOM.createPortal(/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "ne-link-arrow fade-in",
+      style: {
+        top: arrowPosition.top,
+        left: arrowPosition.left
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "ne-link-popover fade-in",
+      id: "ne-link-add-popover",
+      ref: popoverRef,
+      style: popoverStyle,
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(neetoAtoms.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(ramda.not);
+        }
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ne-link-popover__edit-prompt-buttons",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          "data-testid": "neeto-editor-add-link",
+          disabled: isSubmitDisabled,
+          label: t("neetoEditor.common.done"),
+          size: "sm",
+          onClick: handleAddLink
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          "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__default.default(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 = neetoAtoms.DropdownMenu.Menu,
+  MenuItem$1 = neetoAtoms.DropdownMenu.MenuItem;
+var MoreMenu = function MoreMenu(_ref) {
+  var groups = _ref.groups,
+    editor = _ref.editor;
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
+    dropdownProps: {
+      className: "ne-editor-dropdown"
+    },
+    customTarget: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      className: "flex-shrink-0",
+      "data-testid": "neeto-editor-fixed-menu-more-option",
+      icon: lucideReact.Ellipsis,
+      variant: "ghost"
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx(Menu$3, {
+      children: groups.map(function (group) {
+        return group.map(function (_ref2) {
+          var type = _ref2.type,
+            props = _objectWithoutProperties__default.default(_ref2, _excluded$3);
+          var Component = MENU_ELEMENTS[type];
+          if (type === MENU_ELEMENT_TYPES.BUTTON) {
+            var Icon = props.icon;
+            return /*#__PURE__*/jsxRuntime.jsx(MenuItem$1, _objectSpread$8(_objectSpread$8({
+              "data-testid": "neeto-editor-fixed-menu-".concat(props.optionName, "-option"),
+              isActive: editor.isActive(props.optionName),
+              prefix: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+                size: 16
+              }),
+              tabIndex: "-1",
+              onClick: props.command
+            }, _objectSpread$8(_objectSpread$8(_objectSpread$8({}, useEditorStore.generateFocusProps(props.highlight)), props), {}, {
+              editor: editor
+            })), {}, {
+              children: props.label
+            }), props.optionName);
+          }
+          return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, props), {}, {
+            editor: editor
+          }, useEditorStore.generateFocusProps(props.highlight))), {}, {
+            isSecondaryMenu: true
+          }), props.optionName);
+        });
+      })
+    })
+  });
+};
+
+var EDITOR_MARKS = [constants.EDITOR_OPTIONS.UNDO, constants.EDITOR_OPTIONS.REDO, "fontSizeOptions", constants.EDITOR_OPTIONS.BOLD, constants.EDITOR_OPTIONS.ITALIC, constants.EDITOR_OPTIONS.UNDERLINE, constants.EDITOR_OPTIONS.LINK, constants.EDITOR_OPTIONS.STRIKETHROUGH, constants.EDITOR_OPTIONS.HIGHLIGHT, constants.EDITOR_OPTIONS.CALLOUT, "bulletList", "orderedList", "todoList", "blockquote", constants.EDITOR_OPTIONS.CODE, "codeBlock", constants.EDITOR_OPTIONS.TABLE, constants.EDITOR_OPTIONS.ATTACHMENTS, constants.EDITOR_OPTIONS.IMAGE_UPLOAD, constants.EDITOR_OPTIONS.VIDEO_UPLOAD, constants.EDITOR_OPTIONS.TEXT_COLOR, constants.EDITOR_OPTIONS.EMOJI, constants.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__default.default(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.useEditorStore(function (store) {
+      return {
+        setMarksState: store["setMarksState"],
+        marksState: store["marksState"]
+      };
+    }, shallow.shallow),
+    setMarksState = _useEditorStore.setMarksState,
+    marksState = _useEditorStore.marksState;
+  var handleSelectionUpdate = React.useCallback(function (_ref2) {
+    var editor = _ref2.editor;
+    var activeMarks = {};
+    EDITOR_MARKS.forEach(function (mark) {
+      if (mark === constants.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
+      });
+    }) || ramda.last(FONT_SIZE_OPTIONS);
+    activeMarks["fontSizeOption"] = activeFontSizeOption;
+    setMarksState(activeMarks);
+  }, [setMarksState, neetoKbArticleState === null || neetoKbArticleState === void 0 ? void 0 : neetoKbArticleState.active]);
+  var updateHistoryOptionsState = React.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__default.default(_defineProperty__default.default({}, constants.EDITOR_OPTIONS.UNDO, undoOptionState), constants.EDITOR_OPTIONS.REDO, redoOptionState));
+    setMarksState(updatedMarksState);
+  }, [marksState, setMarksState]);
+  React.useEffect(function () {
+    if (!editor) return neetoCist.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]);
+  React.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  if (ramda.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__*/jsxRuntime.jsx("div", {
+    "data-testid": "neeto-editor-fixed-menu-variables",
+    className: classnames__default.default("neeto-editor-fixed-menu__variables", {
+      "neeto-editor-fixed-menu__variables--standalone": standalone
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx(DynamicVariables__default.default, {
+      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__default.default(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 = React.useState(0),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    focusedButtonIndex = _useState2[0],
+    setFocusedButtonIndex = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    isAddLinkActive = _useState4[0],
+    setIsAddLinkActive = _useState4[1];
+  var _useState5 = React.useState([]),
+    _useState6 = _slicedToArray__default.default(_useState5, 2),
+    menuItems = _useState6[0],
+    setMenuItems = _useState6[1];
+  var _useState7 = React.useState([]),
+    _useState8 = _slicedToArray__default.default(_useState7, 2),
+    moreMenuItems = _useState8[0],
+    setMoreMenuItems = _useState8[1];
+  useEditorState({
+    editor: editor,
+    neetoKbArticleState: neetoKbArticleState
+  });
+  var editorRef = React.useRef(editor);
+  React.useEffect(function () {
+    editorRef.current = editor;
+  }, [editor]);
+  var menuRef = React.useRef(null);
+  var menuContainerRef = React.useRef(null);
+  var runEditorCommand = React.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 = React.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]);
+  React.useEffect(function () {
+    menuButtons === null || menuButtons === void 0 || menuButtons[focusedButtonIndex].focus();
+  }, [focusedButtonIndex]);
+  React.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 = React.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 = React.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]);
+  React.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(constants.EDITOR_OPTIONS.IMAGE_UPLOAD) || options.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: menuContainerRef,
+    className: classnames__default.default("neeto-editor-fixed-menu", _defineProperty__default.default({
+      "neeto-editor-fixed-menu--independant": isIndependant
+    }, className, className)),
+    children: [/*#__PURE__*/jsxRuntime.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__default.default(_ref2, _excluded$2);
+          var Component = MENU_ELEMENTS[type];
+          if (!Component) return null;
+          return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, props), {}, {
+            editor: editor,
+            options: options
+          })), props.optionName);
+        });
+      }), neetoCist.isNotEmpty(moreMenuItems) && /*#__PURE__*/jsxRuntime.jsx(MoreMenu, {
+        editor: editor,
+        groups: moreMenuItems
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(MenuDynamicVariables, {
+      editor: editor,
+      variables: variables
+    }), isAddLinkActive && /*#__PURE__*/jsxRuntime.jsx(LinkAddPopOver, {
+      containerRef: containerRef,
+      editor: editor,
+      isAddLinkActive: isAddLinkActive,
+      openLinkInNewTab: openLinkInNewTab,
+      setIsAddLinkActive: setIsAddLinkActive
+    }), isMediaUploaderActive && /*#__PURE__*/jsxRuntime.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__default.default(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 ? neetoCist.noop : _ref$onClick,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    tooltipProps = _ref.tooltipProps,
+    otherProps = _objectWithoutProperties__default.default(_ref, _excluded$1);
+  var Icon = icon;
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, _objectSpread$5(_objectSpread$5({
+    disabled: !tooltipProps,
+    onClick: function onClick() {
+      return _onClick();
+    }
+  }, tooltipProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread$5(_objectSpread$5({
+      className: classnames__default.default("ne-headless-btn", _defineProperty__default.default({}, className, className)),
+      type: "button"
+    }, _objectSpread$5({
+      disabled: disabled,
+      onClick: _onClick
+    }, otherProps)), {}, {
+      children: icon && /*#__PURE__*/jsxRuntime.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__default.default(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 ? neetoCist.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__default.default(_ref2, _excluded);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    mounted = _useState2[0],
+    setMounted = _useState2[1];
+  return /*#__PURE__*/jsxRuntime.jsx(Tippy__default.default, _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__default.default("ne-headless-dropdown", _defineProperty__default.default({}, className, className)),
+    content: mounted && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("span", {
+      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Dropdown, {
+    className: "ne-headless__emoji",
+    icon: lucideReact.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__*/jsxRuntime.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 === constants.EDITOR_OPTIONS.EMOJI) {
+    return /*#__PURE__*/jsxRuntime.jsx(Emoji, {
+      editor: editor,
+      isActive: isActive,
+      setActive: setActive,
+      tooltipContent: tooltip || "Emoji"
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Button, {
+    disabled: disabled,
+    className: classnames__default.default({
+      "ne-headless-btn--active": isActive
+    }),
+    "data-testid": neetoCist.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__default.default(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__default.default.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: lucideReact.Bold,
+    command: function command() {
+      return editor.chain().focus().toggleBold().run();
+    },
+    active: editor.isActive("bold"),
+    optionName: "bold",
+    tooltip: tooltips.bold || t("neetoEditor.menu.bold")
+  }, {
+    Icon: lucideReact.Italic,
+    command: function command() {
+      return editor.chain().focus().toggleItalic().run();
+    },
+    active: editor.isActive("italic"),
+    optionName: "italic",
+    tooltip: tooltips.italic || t("neetoEditor.menu.italic")
+  }, {
+    Icon: lucideReact.Underline,
+    command: function command() {
+      return editor.chain().focus().toggleUnderline().run();
+    },
+    active: editor.isActive("underline"),
+    optionName: "underline",
+    tooltip: tooltips.underline || t("neetoEditor.menu.underline")
+  }, {
+    Icon: lucideReact.Strikethrough,
+    command: function command() {
+      return editor.chain().focus().toggleStrike().run();
+    },
+    active: editor.isActive("strike"),
+    optionName: "strike",
+    tooltip: tooltips.strike || t("neetoEditor.menu.strike")
+  }, {
+    Icon: lucideReact.Highlighter,
+    command: function command() {
+      return editor.chain().focus().toggleHighlight().run();
+    },
+    active: editor.isActive("highlight"),
+    optionName: "highlight",
+    tooltip: tooltips.highlight || t("neetoEditor.menu.highlight")
+  }, {
+    Icon: lucideReact.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: lucideReact.Code,
+    command: function command() {
+      return editor.chain().focus().toggleCode().run();
+    },
+    active: editor.isActive("code"),
+    optionName: "code",
+    tooltip: tooltips.code || t("neetoEditor.menu.code")
+  }, {
+    Icon: lucideReact.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: lucideReact.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: lucideReact.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: lucideReact.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: lucideReact.ImageUp,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("image", true));
+    },
+    optionName: "image-upload",
+    tooltip: tooltips.imageUpload || t("neetoEditor.menu.imageUpload")
+  }, {
+    Icon: lucideReact.Video,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("video", true));
+    },
+    optionName: "video-upload",
+    tooltip: tooltips.videoUpload || t("neetoEditor.menu.videoUpload")
+  }, {
+    Icon: lucideReact.Smile,
+    command: neetoCist.noop,
+    optionName: "emoji",
+    tooltip: tooltips.emoji || t("neetoEditor.menu.emoji"),
+    isActive: isEmojiPickerActive,
+    setActive: setIsEmojiPickerActive
+  }, {
+    Icon: lucideReact.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: lucideReact.Undo,
+    command: function command() {
+      return editor.chain().focus().undo().run();
+    },
+    disabled: !editor.can().undo(),
+    optionName: "undo",
+    tooltip: tooltips.undo || t("neetoEditor.menu.undo")
+  }, {
+    Icon: lucideReact.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 neetoCist.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__default.default(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(constants.EDITOR_OPTIONS.IMAGE_UPLOAD) || options.includes(constants.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__default.default(menuOptions), _toConsumableArray__default.default(addonCommandOptions));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classnames__default.default("ne-headless ne-headless--v2", _defineProperty__default.default({}, className, className)),
+    children: [allOptions.map(function (option) {
+      return /*#__PURE__*/React.createElement(Option, _objectSpread$2({
+        editor: editor,
+        key: option.optionName
+      }, option));
+    }), isMediaUploaderActive && /*#__PURE__*/jsxRuntime.jsx(MediaUploader, {
+      editor: editor,
+      mediaUploader: mediaUploader,
+      showAssetLibrary: showAssetLibrary,
+      onClose: function onClose() {
+        return setMediaUploader({
+          image: false,
+          video: false
+        });
+      }
+    })]
+  });
+};
+
+var FONT_SIZE_OPTIONS = [{
+  label: i18n.t("neetoEditor.menu.heading1"),
+  value: 1,
+  key: "h1",
+  icon: lucideReact.Heading1
+}, {
+  label: i18n.t("neetoEditor.menu.heading2"),
+  value: 2,
+  key: "h2",
+  icon: lucideReact.Heading2
+}, {
+  label: i18n.t("neetoEditor.menu.heading3"),
+  value: 3,
+  key: "h3",
+  icon: lucideReact.Heading3
+}, {
+  label: i18n.t("neetoEditor.menu.heading4"),
+  value: 4,
+  key: "h4",
+  icon: lucideReact.Heading4
+}, {
+  label: i18n.t("neetoEditor.menu.heading5"),
+  value: 5,
+  key: "h5",
+  icon: lucideReact.Heading5
+}, {
+  label: i18n.t("neetoEditor.menu.normalText"),
+  value: 0,
+  key: "body2",
+  icon: lucideReact.Pilcrow
+}];
+var MENU_COMPONENTS = {
+  fixed: Fixed,
+  bubble: Bubble,
+  headless: Headless,
+  none: EmptyMenu
+};
+
+var Menu$2 = neetoAtoms.DropdownMenu.Menu,
+  MenuItem = neetoAtoms.DropdownMenu.MenuItem;
+var FontSizeOption$1 = 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 = React.useRef(null);
+  var lastOption = ramda.last(FONT_SIZE_OPTIONS);
+  var _useEditorStore = useEditorStore.useEditorStore(function (store) {
+      var _store$marksState;
+      return {
+        fontSizeOption: (_store$marksState = store["marksState"]) === null || _store$marksState === void 0 ? void 0 : _store$marksState["fontSizeOption"]
+      };
+    }, shallow.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__default.default(neetoCist.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__*/jsxRuntime.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__*/jsxRuntime.jsx(Icon, {
+        size: 16
+      }),
+      onClick: function onClick() {
+        return handleClick(value);
+      },
+      children: itemLabel
+    }, value);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(neetoAtoms.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__*/jsxRuntime.jsx(Menu$2, {
+      children: renderItems
+    })
+  });
+};
+var FontSizeOption = /*#__PURE__*/React.memo(FontSizeOption$1);
+
+var ColorDot = function ColorDot(_ref) {
+  var _colorVar$match;
+  var colorVar = _ref.colorVar,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    isTextColor = _ref.isTextColor;
+  var dotClass = classnames__default.default("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__*/jsxRuntime.jsx("div", {
+    onClick: onClick,
+    className: dotClass,
+    style: dotStyle,
+    "data-testid": "neeto-editor-highlight-".concat(utils.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 = React.useRef(null);
+  var textColor = editor.getAttributes("textStyle").color;
+  var backgroundColor = editor.getAttributes("textStyle").backgroundColor;
+  var updateBackgroundColor = function updateBackgroundColor(value) {
+    runEditorCommand(function (editor) {
+      return editor.chain().focus().setMark("textStyle", {
+        backgroundColor: value
+      }).run();
+    })();
+  };
+  var handleBackgroundColorClick = function handleBackgroundColorClick(colorVar, 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__*/React.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__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-highlight-dropdown__section",
+      children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "neeto-editor-highlight-dropdown__section-title",
+        variant: "body2",
+        weight: "medium",
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-editor-highlight-dropdown__color-grid",
+        "data-testid": "neeto-editor-highlight-".concat(utils.hyphenize(title), "-grid"),
+        children: renderColorDots(colors, isTextColor)
+      })]
+    }, title);
+  });
+  if (isSecondaryMenu) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      icon: lucideReact.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
+    dropdownProps: {
+      className: "ne-editor-dropdown w-[280px] p-3"
+    },
+    icon: lucideReact.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu.Menu, {
+      className: "neeto-editor-highlight-dropdown",
+      children: renderSections
+    })
+  });
+};
+
+var Menu$1 = neetoAtoms.DropdownMenu.Menu;
+var TableOption$1 = 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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(3),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
+  var _useState3 = React.useState(3),
+    _useState4 = _slicedToArray__default.default(_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 = React.useState(0),
+    _useState6 = _slicedToArray__default.default(_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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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: utils.withEventTargetValue(setRows)
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.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: utils.withEventTargetValue(setColumns)
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-editor-table-menu__button",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        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__*/React.createElement(neetoAtoms.DropdownMenu.SubMenu, {
+      label: label,
+      icon: lucideReact.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__*/jsxRuntime.jsx(neetoAtoms.DropdownMenu, {
+    closeOnSelect: false,
+    dropdownProps: {
+      className: "ne-editor-dropdown w-auto p-2"
+    },
+    icon: lucideReact.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__*/jsxRuntime.jsx(Menu$1, {
+      className: "neeto-editor-table__item",
+      children: formContent
+    })
+  }, resetKey);
+};
+var TableOption = /*#__PURE__*/React.memo(TableOption$1);
+
+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__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_SHORTCUTS, constants.EDITOR_OPTIONS.BOLD, {
+  mac: "⌘B",
+  win: "Ctrl+B"
+}), constants.EDITOR_OPTIONS.ITALIC, {
+  mac: "⌘I",
+  win: "Ctrl+I"
+}), constants.EDITOR_OPTIONS.UNDERLINE, {
+  mac: "⌘U",
+  win: "Ctrl+U"
+}), constants.EDITOR_OPTIONS.STRIKETHROUGH, {
+  mac: "⌘⇧S or ⌘⇧X",
+  win: "Ctrl+Shift+S or Ctrl+Shift+X"
+}), constants.EDITOR_OPTIONS.CODE, {
+  mac: "⌘E",
+  win: "Ctrl+E"
+}), constants.EDITOR_OPTIONS.UNDO, {
+  mac: "⌘Z",
+  win: "Ctrl+Z"
+}), constants.EDITOR_OPTIONS.REDO, {
+  mac: "⌘⇧Z",
+  win: "Ctrl+Shift+Z"
+}), constants.EDITOR_OPTIONS.LINK, {
+  mac: "⌘K",
+  win: "Ctrl+K"
+}), constants.EDITOR_OPTIONS.HIGHLIGHT, {
+  mac: "⌘⇧H",
+  win: "Ctrl+Shift+H"
+}), "bulletList", {
+  mac: "⌘⇧8",
+  win: "Ctrl+Shift+8"
+}), _defineProperty__default.default(_defineProperty__default.default(_SHORTCUTS, "orderedList", {
+  mac: "⌘⇧7",
+  win: "Ctrl+Shift+7"
+}), "todoList", {
+  mac: "⌘⇧9",
+  win: "Ctrl+Shift+9"
+}));
+var MENU_ELEMENTS = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, MENU_ELEMENT_TYPES.BUTTON, MenuButton), MENU_ELEMENT_TYPES.CALLOUT, CalloutDropdown), MENU_ELEMENT_TYPES.FONT_SIZE, FontSizeOption), MENU_ELEMENT_TYPES.TABLE, TableOption), MENU_ELEMENT_TYPES.TEXT_COLOR, TextColorOption), MENU_ELEMENT_TYPES.EMOJI, EmojiOption), MENU_ELEMENT_TYPES.MENTIONS, Mentions), MENU_ELEMENT_TYPES.HIGHLIGHT, HighlightDropdown);
+var MENU_ELEMENT_WIDTHS = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, 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__default.default(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 : i18n.t("neetoEditor.menu.fontSize"),
+    isEnabled: neetoCist.isNotEmpty(fontSizeOptions),
+    optionName: "fontSizeOptions",
+    runEditorCommand: runEditorCommand
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.Bold,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.BOLD),
+    command: runEditorCommand(function (editor) {
+      return editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run();
+    }),
+    optionName: constants.EDITOR_OPTIONS.BOLD,
+    label: (_tooltips$bold = tooltips.bold) !== null && _tooltips$bold !== void 0 ? _tooltips$bold : i18n.t("neetoEditor.menu.bold")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.Italic,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.ITALIC),
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleItalic().run();
+    }),
+    optionName: constants.EDITOR_OPTIONS.ITALIC,
+    label: (_tooltips$italic = tooltips.italic) !== null && _tooltips$italic !== void 0 ? _tooltips$italic : i18n.t("neetoEditor.menu.italic")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.Link,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.LINK),
+    command: function command() {
+      return setIsAddLinkActive(ramda.not);
+    },
+    optionName: constants.EDITOR_OPTIONS.LINK,
+    label: (_tooltips$link = tooltips.link) !== null && _tooltips$link !== void 0 ? _tooltips$link : i18n.t("neetoEditor.menu.link")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.Strikethrough,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.STRIKETHROUGH),
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleStrike().run();
+    }),
+    optionName: constants.EDITOR_OPTIONS.STRIKETHROUGH,
+    label: (_tooltips$strike = tooltips.strike) !== null && _tooltips$strike !== void 0 ? _tooltips$strike : i18n.t("neetoEditor.menu.strike")
+  }, {
+    type: MENU_ELEMENT_TYPES.HIGHLIGHT,
+    icon: lucideReact.Highlighter,
+    label: (_tooltips$highlight = tooltips.highlight) !== null && _tooltips$highlight !== void 0 ? _tooltips$highlight : i18n.t("neetoEditor.menu.highlight"),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.HIGHLIGHT),
+    optionName: constants.EDITOR_OPTIONS.HIGHLIGHT,
+    editor: editor,
+    runEditorCommand: runEditorCommand,
+    tooltipContent: (_tooltips$highlight2 = tooltips.highlight) !== null && _tooltips$highlight2 !== void 0 ? _tooltips$highlight2 : i18n.t("neetoEditor.menu.highlight")
+  }], [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.List,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleBulletList().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.LIST_BULLETS),
+    optionName: "bulletList",
+    highlight: true,
+    label: (_tooltips$bulletList = tooltips.bulletList) !== null && _tooltips$bulletList !== void 0 ? _tooltips$bulletList : i18n.t("neetoEditor.menu.bulletedList")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.ListOrdered,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleOrderedList().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.LIST_ORDERED),
+    optionName: "orderedList",
+    highlight: true,
+    label: (_tooltips$orderedList = tooltips.orderedList) !== null && _tooltips$orderedList !== void 0 ? _tooltips$orderedList : i18n.t("neetoEditor.menu.orderedList")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.ListChecks,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleTaskList().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.TODO_LIST),
+    optionName: "todoList",
+    highlight: true,
+    label: (_tooltips$todoList = tooltips.todoList) !== null && _tooltips$todoList !== void 0 ? _tooltips$todoList : i18n.t("neetoEditor.menu.todoList")
+  }], [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.Quote,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleBlockquote().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.BLOCKQUOTE),
+    optionName: "blockquote",
+    highlight: true,
+    label: (_tooltips$blockQuote = tooltips.blockQuote) !== null && _tooltips$blockQuote !== void 0 ? _tooltips$blockQuote : i18n.t("neetoEditor.menu.blockQuote")
+  }, {
+    type: MENU_ELEMENT_TYPES.CALLOUT,
+    label: (_tooltips$callout = tooltips.callout) !== null && _tooltips$callout !== void 0 ? _tooltips$callout : i18n.t("neetoEditor.menu.callout"),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.CALLOUT),
+    optionName: constants.EDITOR_OPTIONS.CALLOUT,
+    editor: editor,
+    runEditorCommand: runEditorCommand,
+    tooltipContent: (_tooltips$callout2 = tooltips.callout) !== null && _tooltips$callout2 !== void 0 ? _tooltips$callout2 : i18n.t("neetoEditor.menu.callout")
+  }], [{
+    type: MENU_ELEMENT_TYPES.TABLE,
+    label: (_tooltips$table = tooltips.table) !== null && _tooltips$table !== void 0 ? _tooltips$table : i18n.t("neetoEditor.menu.table"),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.TABLE),
+    optionName: constants.EDITOR_OPTIONS.TABLE
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.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(constants.EDITOR_OPTIONS.ATTACHMENTS),
+    optionName: constants.EDITOR_OPTIONS.ATTACHMENTS,
+    label: (_tooltips$attachments = tooltips.attachments) !== null && _tooltips$attachments !== void 0 ? _tooltips$attachments : i18n.t("neetoEditor.menu.attachments")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.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(constants.EDITOR_OPTIONS.NEETO_KB_ARTICLE),
+    optionName: constants.EDITOR_OPTIONS.NEETO_KB_ARTICLE,
+    label: (_tooltips$neetoKbArti = tooltips.neetoKbArticle) !== null && _tooltips$neetoKbArti !== void 0 ? _tooltips$neetoKbArti : i18n.t("neetoEditor.menu.linkToNeetoKbArticle")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.ImageUp,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("image", true));
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.IMAGE_UPLOAD),
+    optionName: constants.EDITOR_OPTIONS.IMAGE_UPLOAD,
+    label: (_tooltips$imageUpload = tooltips.imageUpload) !== null && _tooltips$imageUpload !== void 0 ? _tooltips$imageUpload : i18n.t("neetoEditor.menu.imageUpload")
+  }], [{
+    type: MENU_ELEMENT_TYPES.TEXT_COLOR,
+    label: (_tooltips$textColor = tooltips.textColor) !== null && _tooltips$textColor !== void 0 ? _tooltips$textColor : i18n.t("neetoEditor.menu.textColor"),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.TEXT_COLOR),
+    optionName: constants.EDITOR_OPTIONS.TEXT_COLOR
+  }, {
+    type: MENU_ELEMENT_TYPES.EMOJI,
+    label: (_tooltips$emoji = tooltips.emoji) !== null && _tooltips$emoji !== void 0 ? _tooltips$emoji : i18n.t("neetoEditor.menu.emoji"),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.EMOJI),
+    optionName: constants.EDITOR_OPTIONS.EMOJI,
+    setActive: setIsEmojiPickerActive,
+    isActive: isEmojiPickerActive
+  }, {
+    type: MENU_ELEMENT_TYPES.MENTIONS,
+    label: (_tooltips$mention = tooltips.mention) !== null && _tooltips$mention !== void 0 ? _tooltips$mention : i18n.t("neetoEditor.menu.mention"),
+    isEnabled: neetoCist.isNotEmpty(mentions),
+    optionName: "mentions",
+    mentions: mentions
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.Code,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleCode().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE),
+    optionName: constants.EDITOR_OPTIONS.CODE,
+    label: (_tooltips$code = tooltips.code) !== null && _tooltips$code !== void 0 ? _tooltips$code : i18n.t("neetoEditor.menu.code")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.SquareCode,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleCodeBlock().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE_BLOCK),
+    optionName: "codeBlock",
+    label: (_tooltips$codeBlock = tooltips.codeBlock) !== null && _tooltips$codeBlock !== void 0 ? _tooltips$codeBlock : i18n.t("neetoEditor.menu.codeBlock")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.Video,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("video", true));
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD),
+    optionName: constants.EDITOR_OPTIONS.VIDEO_UPLOAD,
+    label: (_tooltips$videoUpload = tooltips.videoUpload) !== null && _tooltips$videoUpload !== void 0 ? _tooltips$videoUpload : i18n.t("neetoEditor.menu.videoUpload")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: lucideReact.Underline,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.UNDERLINE),
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleUnderline().run();
+    }),
+    optionName: constants.EDITOR_OPTIONS.UNDERLINE,
+    label: (_tooltips$underline = tooltips.underline) !== null && _tooltips$underline !== void 0 ? _tooltips$underline : i18n.t("neetoEditor.menu.underline")
+  }], _toConsumableArray__default.default(addonCommandOptions), [{
+    icon: lucideReact.Undo,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().undo().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.UNDO),
+    optionName: constants.EDITOR_OPTIONS.UNDO,
+    label: (_tooltips$undo = tooltips.undo) !== null && _tooltips$undo !== void 0 ? _tooltips$undo : i18n.t("neetoEditor.menu.undo"),
+    type: MENU_ELEMENT_TYPES.BUTTON
+  }, {
+    icon: lucideReact.Redo,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().redo().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.REDO),
+    optionName: constants.EDITOR_OPTIONS.REDO,
+    label: (_tooltips$redo = tooltips.redo) !== null && _tooltips$redo !== void 0 ? _tooltips$redo : i18n.t("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(ramda.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__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Menu = function Menu(props) {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    isEmojiPickerActive = _useState2[0],
+    setIsEmojiPickerActive = _useState2[1];
+  var _useState3 = React.useState({
+      image: false,
+      video: false
+    }),
+    _useState4 = _slicedToArray__default.default(_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 = React.useMemo(function () {
+    return MENU_COMPONENTS[menuType];
+  }, [menuType]);
+  var menuOptions = ramda.isEmpty(options) ? [].concat(_toConsumableArray__default.default(defaults), _toConsumableArray__default.default(addons)) : options;
+  React.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") {
+          ramda.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(ramda.assoc("image", true));
+        } else if (e.code === "KeyV") {
+          setMediaUploader(ramda.assoc("video", true));
+        }
+      }
+    };
+    if (menuType !== "none") {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return function () {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, props), {}, {
+    attachmentProps: attachmentProps,
+    isEmojiPickerActive: isEmojiPickerActive,
+    mediaUploader: mediaUploader,
+    setIsEmojiPickerActive: setIsEmojiPickerActive,
+    setMediaUploader: setMediaUploader
+  })), {}, {
+    options: menuOptions,
+    unsplashApiKey: editorSecrets.unsplash
+  }));
+};
+
+exports.CALLOUT_TYPES = CALLOUT_TYPES;
+exports.DEFAULT_EDITOR_OPTIONS = DEFAULT_EDITOR_OPTIONS;
+exports.EmojiPickerMenu = EmojiPickerMenu;
+exports.LINK_VALIDATION_SCHEMA = LINK_VALIDATION_SCHEMA;
+exports.LinkAddPopOver = LinkAddPopOver;
+exports.MediaUploader = MediaUploader;
+exports.Menu = Menu;
+exports.MenuDynamicVariables = MenuDynamicVariables;
+exports.buildLevelsFromOptions = buildLevelsFromOptions;
+exports.clipboardTextParser = clipboardTextParser;
+exports.getEditorStyles = getEditorStyles;
+exports.getLinkPopoverPosition = getLinkPopoverPosition;
+exports.getSuggestionAppendTo = getSuggestionAppendTo;
+exports.handlePaste = handlePaste;
+exports.isEditorOverlaysActive = isEditorOverlaysActive;
+exports.isEmojiSuggestionsMenuActive = isEmojiSuggestionsMenuActive;
+exports.setInitialPosition = setInitialPosition;
+exports.transformEditorContent = transformEditorContent;
+exports.transformPastedHTML = transformPastedHTML;
+exports.validateAndFormatUrl = validateAndFormatUrl;
+exports.validateUrl = validateUrl;
+//# sourceMappingURL=chunk-DM1lUvXy.cjs.js.map