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

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

@@ -0,0 +1,3450 @@
+'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 injectCss = require('./chunk-B6qYtOJe.cjs.js');
+var i18n = require('i18next');
+var TextH1 = require('@bigbinary/neeto-icons/TextH1');
+var TextH2 = require('@bigbinary/neeto-icons/TextH2');
+var TextH3 = require('@bigbinary/neeto-icons/TextH3');
+var TextH4 = require('@bigbinary/neeto-icons/TextH4');
+var TextH5 = require('@bigbinary/neeto-icons/TextH5');
+var TextP = require('@bigbinary/neeto-icons/TextP');
+var useEditorStore = require('./chunk-CohcWDmm.cjs.js');
+var classnames = require('classnames');
+var neetoCist = require('@bigbinary/neeto-cist');
+var constants = require('./chunk-Bmjmsp-E.cjs.js');
+var Link = require('@bigbinary/neeto-icons/Link');
+var Column = require('@bigbinary/neeto-icons/Column');
+var Down = require('@bigbinary/neeto-icons/Down');
+var Dropdown$1 = require('@bigbinary/neetoui/Dropdown');
+var reactI18next = require('react-i18next');
+var Close = require('@bigbinary/neeto-icons/Close');
+var Button$1 = require('@bigbinary/neetoui/Button');
+var utils = require('./chunk-D7p10rIr.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
+var Check = require('@bigbinary/neeto-icons/Check');
+var Label = require('@bigbinary/neetoui/Label');
+var Quote = require('@bigbinary/neeto-icons/Quote');
+var Attachment = require('@bigbinary/neeto-icons/Attachment');
+var CodeBlock = require('@bigbinary/neeto-icons/CodeBlock');
+var Code = require('@bigbinary/neeto-icons/Code');
+var Highlight = require('@bigbinary/neeto-icons/Highlight');
+var TextBold = require('@bigbinary/neeto-icons/TextBold');
+var TextCross = require('@bigbinary/neeto-icons/TextCross');
+var TextItalic = require('@bigbinary/neeto-icons/TextItalic');
+var Underline = require('@bigbinary/neeto-icons/Underline');
+var ListDot = require('@bigbinary/neeto-icons/ListDot');
+var ListNumber = require('@bigbinary/neeto-icons/ListNumber');
+var ImageUpload = require('@bigbinary/neeto-icons/ImageUpload');
+var Video = require('@bigbinary/neeto-icons/Video');
+var Undo = require('@bigbinary/neeto-icons/Undo');
+var Redo = require('@bigbinary/neeto-icons/Redo');
+var Email = require('@bigbinary/neeto-icons/Email');
+var Avatar = require('@bigbinary/neetoui/Avatar');
+var Typography = require('@bigbinary/neetoui/Typography');
+var Smiley = require('@bigbinary/neeto-icons/Smiley');
+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 reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var Customize = require('@bigbinary/neeto-icons/Customize');
+var Refresh = require('@bigbinary/neeto-icons/Refresh');
+var Input = require('@bigbinary/neetoui/Input');
+var reactColorful = require('react-colorful');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var ImageUploader = require('@bigbinary/neeto-image-uploader-frontend/ImageUploader');
+var Modal = require('@bigbinary/neetoui/Modal');
+var Tab = require('@bigbinary/neetoui/Tab');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var reactFileIcon_esm = require('./chunk-D3Unocnm.cjs.js');
+var FileIcon = require('./chunk-cwORbcv3.cjs.js');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var Form = require('@bigbinary/neetoui/formik/Form');
+var Input$1 = require('@bigbinary/neetoui/formik/Input');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var Checkbox = require('@bigbinary/neetoui/Checkbox');
+var ReactDOM = require('react-dom');
+var Checkbox$1 = require('@bigbinary/neeto-icons/Checkbox');
+var File = require('@bigbinary/neeto-icons/File');
+var shallow = require('zustand/shallow');
+var Flag = require('@bigbinary/neeto-icons/Flag');
+var Info = require('@bigbinary/neeto-icons/misc/Info');
+var Warning = require('@bigbinary/neeto-icons/misc/Warning');
+var Danger = require('@bigbinary/neeto-icons/misc/Danger');
+var Megaphone = require('@bigbinary/neeto-icons/misc/Megaphone');
+var Success = require('@bigbinary/neeto-icons/misc/Success');
+var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
+var DynamicVariables = require('@bigbinary/neeto-molecules/DynamicVariables');
+var Tippy = require('@tippyjs/react');
+var constants$1 = require('./chunk-CNIzgxEP.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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 TextH1__default = /*#__PURE__*/_interopDefault(TextH1);
+var TextH2__default = /*#__PURE__*/_interopDefault(TextH2);
+var TextH3__default = /*#__PURE__*/_interopDefault(TextH3);
+var TextH4__default = /*#__PURE__*/_interopDefault(TextH4);
+var TextH5__default = /*#__PURE__*/_interopDefault(TextH5);
+var TextP__default = /*#__PURE__*/_interopDefault(TextP);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var Link__default = /*#__PURE__*/_interopDefault(Link);
+var Column__default = /*#__PURE__*/_interopDefault(Column);
+var Down__default = /*#__PURE__*/_interopDefault(Down);
+var Dropdown__default = /*#__PURE__*/_interopDefault(Dropdown$1);
+var Close__default = /*#__PURE__*/_interopDefault(Close);
+var Button__default = /*#__PURE__*/_interopDefault(Button$1);
+var Check__default = /*#__PURE__*/_interopDefault(Check);
+var Label__default = /*#__PURE__*/_interopDefault(Label);
+var Quote__default = /*#__PURE__*/_interopDefault(Quote);
+var Attachment__default = /*#__PURE__*/_interopDefault(Attachment);
+var CodeBlock__default = /*#__PURE__*/_interopDefault(CodeBlock);
+var Code__default = /*#__PURE__*/_interopDefault(Code);
+var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
+var TextBold__default = /*#__PURE__*/_interopDefault(TextBold);
+var TextCross__default = /*#__PURE__*/_interopDefault(TextCross);
+var TextItalic__default = /*#__PURE__*/_interopDefault(TextItalic);
+var Underline__default = /*#__PURE__*/_interopDefault(Underline);
+var ListDot__default = /*#__PURE__*/_interopDefault(ListDot);
+var ListNumber__default = /*#__PURE__*/_interopDefault(ListNumber);
+var ImageUpload__default = /*#__PURE__*/_interopDefault(ImageUpload);
+var Video__default = /*#__PURE__*/_interopDefault(Video);
+var Undo__default = /*#__PURE__*/_interopDefault(Undo);
+var Redo__default = /*#__PURE__*/_interopDefault(Redo);
+var Email__default = /*#__PURE__*/_interopDefault(Email);
+var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
+var Typography__default = /*#__PURE__*/_interopDefault(Typography);
+var Smiley__default = /*#__PURE__*/_interopDefault(Smiley);
+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 Customize__default = /*#__PURE__*/_interopDefault(Customize);
+var Refresh__default = /*#__PURE__*/_interopDefault(Refresh);
+var Input__default = /*#__PURE__*/_interopDefault(Input);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+var ImageUploader__default = /*#__PURE__*/_interopDefault(ImageUploader);
+var Modal__default = /*#__PURE__*/_interopDefault(Modal);
+var Tab__default = /*#__PURE__*/_interopDefault(Tab);
+var Toastr__default = /*#__PURE__*/_interopDefault(Toastr);
+var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
+var Form__default = /*#__PURE__*/_interopDefault(Form);
+var Input__default$1 = /*#__PURE__*/_interopDefault(Input$1);
+var ActionBlock__default = /*#__PURE__*/_interopDefault(ActionBlock);
+var Checkbox__default = /*#__PURE__*/_interopDefault(Checkbox);
+var Checkbox__default$1 = /*#__PURE__*/_interopDefault(Checkbox$1);
+var File__default = /*#__PURE__*/_interopDefault(File);
+var Flag__default = /*#__PURE__*/_interopDefault(Flag);
+var Info__default = /*#__PURE__*/_interopDefault(Info);
+var Warning__default = /*#__PURE__*/_interopDefault(Warning);
+var Danger__default = /*#__PURE__*/_interopDefault(Danger);
+var Megaphone__default = /*#__PURE__*/_interopDefault(Megaphone);
+var Success__default = /*#__PURE__*/_interopDefault(Success);
+var MenuHorizontal__default = /*#__PURE__*/_interopDefault(MenuHorizontal);
+var DynamicVariables__default = /*#__PURE__*/_interopDefault(DynamicVariables);
+var Tippy__default = /*#__PURE__*/_interopDefault(Tippy);
+
+var CALLOUT_TYPES = [{
+  type: "default",
+  label: i18n.t("neetoEditor.menu.calloutDefault"),
+  icon: Megaphone__default.default,
+  bgColor: "--neeto-editor-gray-100"
+}, {
+  type: "info",
+  label: i18n.t("neetoEditor.menu.calloutInfo"),
+  icon: Info__default.default,
+  bgColor: "--neeto-editor-info-100"
+}, {
+  type: "warning",
+  label: i18n.t("neetoEditor.menu.calloutWarning"),
+  icon: Warning__default.default,
+  bgColor: "--neeto-editor-warning-100"
+}, {
+  type: "error",
+  label: i18n.t("neetoEditor.menu.calloutError"),
+  icon: Danger__default.default,
+  bgColor: "--neeto-editor-error-100"
+}, {
+  type: "success",
+  label: i18n.t("neetoEditor.menu.calloutSuccess"),
+  icon: Success__default.default,
+  bgColor: "--neeto-editor-success-100"
+}];
+
+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;
+};
+
+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(Button__default.default, _objectSpread$a({
+    disabled: disabled,
+    icon: icon,
+    className: "neeto-editor-fixed-menu__item",
+    "data-testid": "neeto-editor-fixed-menu-".concat(optionName, "-option"),
+    style: isActive ? "secondary" : "text",
+    tabIndex: "-1",
+    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 = _ref.currentType;
+  if (currentType !== null && currentType !== void 0 && currentType.icon) {
+    var Icon = currentType.icon;
+    return /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "neeto-editor-callout-dropdown__current-emoji",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        size: 22
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Flag__default.default, {
+    size: 16
+  });
+};
+
+var CalloutTypeOption = function CalloutTypeOption(_ref) {
+  var calloutType = _ref.calloutType,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick;
+  var optionClass = classnames__default.default("neeto-editor-callout-dropdown__type-option", {
+    "neeto-editor-callout-dropdown__type-option--selected": isSelected
+  });
+  var Icon = calloutType.icon;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    onClick: onClick,
+    className: optionClass,
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "neeto-editor-callout-dropdown__type-emoji",
+      "data-testid": "callout-type-emoji",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
+      className: "neeto-editor-callout-dropdown__type-label",
+      style: "body2",
+      weight: "medium",
+      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;
+  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();
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
+    autoWidth: true,
+    placement: "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      icon: function icon() {
+        return /*#__PURE__*/jsxRuntime.jsx(CalloutIcon, {
+          currentType: isInCallout ? currentType : null
+        });
+      },
+      iconPosition: "left",
+      iconSize: 20,
+      label: /*#__PURE__*/jsxRuntime.jsx(Down__default.default, {
+        size: 12
+      }),
+      ref: dropdownRef,
+      "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"
+      },
+      style: isInCallout ? "secondary" : "text",
+      size: "small",
+      className: "neeto-editor-fixed-menu__item"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default.Menu, {
+      className: "neeto-editor-callout-dropdown",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-editor-callout-dropdown__section",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
+          className: "neeto-editor-callout-dropdown__section-title",
+          style: "body2",
+          weight: "normal",
+          children: t("neetoEditor.menu.selectCalloutType")
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-editor-callout-dropdown__options-grid",
+          children: /*#__PURE__*/jsxRuntime.jsx(RenderCalloutOptions, {
+            currentCalloutAttrs: currentCalloutAttrs,
+            handleCalloutTypeClick: handleCalloutTypeClick,
+            isInCallout: isInCallout
+          })
+        })]
+      })
+    })
+  });
+};
+
+var MenuItem$3 = Dropdown__default.default.MenuItem;
+var SecondaryMenuTarget = function SecondaryMenuTarget(_ref) {
+  var Icon = _ref.icon,
+    label = _ref.label;
+  return /*#__PURE__*/jsxRuntime.jsxs(MenuItem$3.Button, {
+    "data-testid": "neeto-editor-fixed-menu-".concat(neetoCist.hyphenate(label), "-option"),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {}), " ", label]
+  });
+};
+
+var EmojiOption$1 = function EmojiOption(_ref) {
+  var editor = _ref.editor,
+    isActive = _ref.isActive,
+    setActive = _ref.setActive,
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
+    label = _ref.label;
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
+    buttonStyle: "text",
+    closeOnSelect: false,
+    icon: Smiley__default.default,
+    isOpen: isActive,
+    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      tabIndex: -1,
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      className: "neeto-editor-fixed-menu__item",
+      "data-testid": "neeto-editor-fixed-menu-emoji-option"
+    },
+    customTarget: isSecondaryMenu && /*#__PURE__*/jsxRuntime.jsx(SecondaryMenuTarget, {
+      label: label,
+      icon: Smiley__default.default
+    }),
+    dropdownProps: {
+      classNames: "neeto-editor-fixed-menu__emoji-dropdown",
+      onClick: function onClick(e) {
+        return isSecondaryMenu && e.stopPropagation();
+      }
+    },
+    onClose: function onClose() {
+      return setActive(false);
+    },
+    onClick: function onClick(e) {
+      setActive(function (active) {
+        return !active;
+      });
+      isSecondaryMenu && e.stopPropagation();
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(EmojiPickerMenu, {
+      editor: editor,
+      setActive: setActive
+    })
+  });
+};
+var EmojiOption = /*#__PURE__*/React.memo(EmojiOption$1);
+
+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(utils.validateAndFormatUrl(value));
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+      "data-testid": "neeto-editor-link-cancel-button",
+      icon: Close__default.default,
+      size: "small",
+      style: "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(Label__default.default, {
+        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$1.withEventTargetValue(setRows)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-bubble-menu__table__menu-item",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label__default.default, {
+        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$1.withEventTargetValue(setColumns)
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-editor-bubble-menu__table__buttons",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+        "data-testid": "neeto-editor-bubble-menu-table-option-create-button",
+        icon: Check__default.default,
+        size: "small",
+        style: "secondary",
+        onClick: handleSubmit
+      }), /*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+        "data-testid": "neeto-editor-bubble-menu-table-option-close-button",
+        icon: Close__default.default,
+        size: "small",
+        style: "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: TextBold__default.default,
+      command: function command() {
+        return editor.chain().focus().toggleBold().run();
+      },
+      active: editor.isActive("bold"),
+      optionName: "bold",
+      tooltip: tooltips.bold || i18n.t("neetoEditor.menu.bold")
+    }, {
+      Icon: TextItalic__default.default,
+      command: function command() {
+        return editor.chain().focus().toggleItalic().run();
+      },
+      active: editor.isActive("italic"),
+      optionName: "italic",
+      tooltip: tooltips.italic || i18n.t("neetoEditor.menu.italic")
+    }, {
+      Icon: Underline__default.default,
+      command: function command() {
+        return editor.chain().focus().toggleUnderline().run();
+      },
+      active: editor.isActive("underline"),
+      optionName: "underline",
+      tooltip: tooltips.underline || i18n.t("neetoEditor.menu.underline")
+    }, {
+      Icon: Link__default.default,
+      command: function command() {
+        return setIsAddLinkActive(ramda.not);
+      },
+      optionName: "link",
+      tooltip: "Link"
+    }, {
+      Icon: TextCross__default.default,
+      command: function command() {
+        return editor.chain().focus().toggleStrike().run();
+      },
+      active: editor.isActive("strike"),
+      optionName: "strike",
+      tooltip: tooltips.strike || i18n.t("neetoEditor.menu.strike")
+    }, {
+      Icon: Highlight__default.default,
+      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: Quote__default.default,
+      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: Code__default.default,
+      command: function command() {
+        return editor.chain().focus().toggleCode().run();
+      },
+      active: editor.isActive("code"),
+      optionName: "code",
+      tooltip: tooltips.code || i18n.t("neetoEditor.menu.code")
+    }, {
+      Icon: CodeBlock__default.default,
+      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: ListDot__default.default,
+      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: ListNumber__default.default,
+      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: Attachment__default.default,
+      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: ImageUpload__default.default,
+      command: function command() {
+        return setMediaUploader(ramda.assoc("image", true));
+      },
+      optionName: "image-upload",
+      tooltip: tooltips.imageUpload || i18n.t("neetoEditor.menu.imageUpload")
+    }, {
+      Icon: Video__default.default,
+      command: function command() {
+        return setMediaUploader(ramda.assoc("video", true));
+      },
+      optionName: "video-upload",
+      tooltip: tooltips.videoUpload || i18n.t("neetoEditor.menu.videoUpload")
+    }],
+    right: [{
+      Icon: Undo__default.default,
+      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: Redo__default.default,
+      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: TextH1__default.default,
+    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: TextH2__default.default,
+    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: TextH3__default.default,
+    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: TextP__default.default,
+    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) || TextP__default.default;
+};
+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(Button__default.default, _objectSpread$9({
+    className: "neeto-editor-bubble-menu__item",
+    "data-testid": "neeto-editor-bubble-menu-".concat(optionName, "-option"),
+    icon: Icon,
+    size: "medium",
+    style: active ? "secondary" : "text",
+    tooltipProps: {
+      content: tooltip,
+      position: "bottom",
+      theme: "dark"
+    },
+    onClick: command
+  }, useEditorStore.generateFocusProps(highlight)), optionName);
+};
+
+var Menu$4 = Dropdown__default.default.Menu,
+  MenuItem$2 = Dropdown__default.default.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;
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
+    buttonStyle: "text",
+    "data-testid": "neeto-editor-mention-option",
+    icon: Email__default.default,
+    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      className: "neeto-editor-fixed-menu__item"
+    },
+    customTarget: isSecondaryMenu && /*#__PURE__*/jsxRuntime.jsx(SecondaryMenuTarget, {
+      label: label,
+      icon: Email__default.default
+    }),
+    onClick: function onClick(e) {
+      return isSecondaryMenu && e.stopPropagation();
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(Menu$4, {
+      children: mentions.map(function (_ref2) {
+        var key = _ref2.key,
+          name = _ref2.name,
+          imageUrl = _ref2.imageUrl;
+        return /*#__PURE__*/jsxRuntime.jsxs(MenuItem$2.Button, {
+          "data-testid": "neeto-editor-mention-option-".concat(key),
+          onClick: function onClick() {
+            return editor.commands.setMention({
+              id: key,
+              label: name
+            });
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(Avatar__default.default, {
+            size: "small",
+            user: {
+              name: name,
+              imageUrl: imageUrl
+            }
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
+            style: "body2",
+            children: name
+          })]
+        }, key);
+      })
+    })
+  });
+};
+var Mentions = /*#__PURE__*/React.memo(Mentions$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(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    color = _useState4[0],
+    setColor = _useState4[1];
+  var dropdownWrapperRef = React.useRef(null);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleSave = function handleSave() {
+    editor.chain().focus().setColor(color).run();
+    setIsOpen(false);
+  };
+  var handleUnset = function handleUnset() {
+    editor.chain().focus().unsetColor().run();
+    setColor(null);
+    setIsOpen(false);
+  };
+  reactUtils.useOnClickOutside(dropdownWrapperRef, function (event) {
+    if (!isOpen) return;
+    event.preventDefault();
+    editor.commands.focus();
+    setIsOpen(false);
+  });
+  React.useEffect(function () {
+    setColor(editor.getAttributes("textStyle").color);
+  }, [isOpen, editor.getAttributes("textStyle").color]);
+  var openColorPicker = function openColorPicker(e) {
+    isSecondaryMenu && e.stopPropagation();
+    setColor(editor.getAttributes("textStyle").color);
+    setIsOpen(ramda.not);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
+    isOpen: isOpen,
+    buttonStyle: isOpen || color ? "secondary" : "text",
+    icon: Customize__default.default,
+    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    buttonProps: {
+      tabIndex: -1,
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      className: "neeto-editor-fixed-menu__item neeto-editor-text-color-option",
+      "data-testid": "neeto-editor-fixed-menu-text-color-option"
+    },
+    customTarget: isSecondaryMenu && /*#__PURE__*/jsxRuntime.jsx(SecondaryMenuTarget, {
+      label: label,
+      icon: Customize__default.default
+    }),
+    onClick: openColorPicker,
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      ref: dropdownWrapperRef,
+      style: {
+        "min-width": "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(Input__default.default, {
+          autoFocus: true,
+          className: "neeto-editor-text-color-option__options-group__input",
+          placeholder: t("neetoEditor.placeholders.pickColor"),
+          size: "small",
+          value: color,
+          onChange: utils$1.withEventTargetValue(setColor),
+          onClick: function onClick(event) {
+            return event.stopPropagation();
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+          icon: Check__default.default,
+          size: "small",
+          onClick: handleSave
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+          icon: Close__default.default,
+          size: "small",
+          style: "text",
+          onClick: function onClick() {
+            editor.commands.focus();
+            setIsOpen(false);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+          icon: Refresh__default.default,
+          size: "small",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoEditor.common.resetToDefault"),
+            position: "top"
+          },
+          onClick: handleUnset
+        })]
+      })]
+    })
+  });
+};
+
+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 Menu = Dropdown__default.default.Menu,
+    MenuItem = Dropdown__default.default.MenuItem;
+  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.jsx(Dropdown__default.default, {
+      buttonSize: "small",
+      buttonStyle: "text",
+      label: Icon,
+      strategy: "fixed",
+      buttonProps: {
+        icon: Icon,
+        iconPosition: "left",
+        iconSize: 22,
+        label: /*#__PURE__*/jsxRuntime.jsx(Down__default.default, {
+          size: 12
+        }),
+        "data-testid": "neeto-editor-fixed-menu-font-size-option",
+        style: "text",
+        size: "small",
+        className: "neeto-editor-bubble-menu__item neeto-editor-font-size__wrapper"
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
+        className: "neeto-ui-flex neeto-ui-gap-1 neeto-editor-menu-font-size-options",
+        children: dropdownOptions.map(function (_ref2) {
+          var optionName = _ref2.optionName,
+            command = _ref2.command,
+            Icon = _ref2.icon;
+          return /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+            className: "neeto-editor-menu-font-size-options__item-btn",
+            tooltipProps: {
+              content: optionName,
+              position: "bottom"
+            },
+            onClick: command,
+            children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+              size: 22
+            })
+          }, 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: Link__default.default,
+      command: function command() {
+        return setIsLinkOptionActive(true);
+      },
+      active: editor.isActive("link"),
+      optionName: "link",
+      highlight: false,
+      tooltip: tooltips.link || t("neetoEditor.menu.link")
+    }), isTableActive && renderOptionButton({
+      Icon: Column__default.default,
+      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(Button__default.default, {
+            "data-testid": "neeto-editor-image-upload-cancel-button",
+            icon: Close__default.default,
+            iconSize: 18,
+            size: "small",
+            style: "text",
+            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(Typography__default.default, {
+            style: "nano",
+            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(Tooltip__default.default, {
+            content: filename,
+            position: "top",
+            children: /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
+              style: "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(ImageUpload__default.default, {
+      className: "ne-media-uploader__dnd-icon",
+      size: 24
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
+      style: "body2",
+      children: t("neetoEditor.localUploader.dropFilesHere")
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
+      style: "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); // False when current url is not "embeddable"
+    if (embedUrl) onEmbedVideo(url, embedUrl);else onAttachVideo(url);
+    onClose();
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "ne-video-embed-form",
+    children: /*#__PURE__*/jsxRuntime.jsx(Form__default.default, {
+      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(Input__default$1.default, {
+              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(ActionBlock__default.default, {
+            cancelButtonProps: {
+              "data-testid": "neeto-editor-video-embed-cancel",
+              label: t("neetoEditor.common.cancel"),
+              size: "small",
+              onClick: function onClick() {
+                resetForm();
+                onClose();
+              }
+            },
+            submitButtonProps: {
+              "data-testid": "neeto-editor-video-embed-submit",
+              disabled: !dirty,
+              label: t("neetoEditor.common.saveChanges"),
+              loading: isSubmitting,
+              size: "small"
+            }
+          })]
+        });
+      }
+    })
+  });
+};
+
+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);
+            Toastr__default.default.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();
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Modal__default.default, {
+    isOpen: isOpen,
+    className: "ne-media-uploader-modal",
+    closeButton: ramda.not(isUploading),
+    closeOnOutsideClick: ramda.not(isUploading),
+    onClose: handleClose,
+    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(Tab__default.default, {
+        children: tabs.map(function (_ref4) {
+          var key = _ref4.key,
+            title = _ref4.title;
+          return /*#__PURE__*/jsxRuntime.jsx(Tab__default.default.Item, {
+            active: activeTab === key,
+            "data-testid": "neeto-editor-media-uploader-".concat(key, "-tab"),
+            onClick: function onClick() {
+              return setActiveTab(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 isAddLinkActive = _ref.isAddLinkActive,
+    setIsAddLinkActive = _ref.setIsAddLinkActive,
+    editor = _ref.editor,
+    openLinkInNewTab = _ref.openLinkInNewTab;
+  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 = utils.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(Input__default.default, {
+        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(Input__default.default, {
+        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(Checkbox__default.default, {
+        checked: openInNewTab,
+        className: "ne-link-popover__checkbox",
+        "data-testid": "neeto-editor-add-link-open-in-new-tab-switch",
+        label: t("neetoEditor.common.openInNewTab"),
+        onChange: function onChange() {
+          return setOpenInNewTab(ramda.not);
+        }
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ne-link-popover__edit-prompt-buttons",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+          "data-testid": "neeto-editor-add-link",
+          disabled: isSubmitDisabled,
+          label: t("neetoEditor.common.done"),
+          size: "small",
+          onClick: handleAddLink
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+          "data-testid": "neeto-editor-link-popover-cancel",
+          label: t("neetoEditor.common.cancel"),
+          size: "small",
+          style: "text",
+          onClick: removePopover
+        })]
+      })]
+    })]
+  }), 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 = Dropdown__default.default.Menu,
+  MenuItem$1 = Dropdown__default.default.MenuItem;
+var MoreMenu = function MoreMenu(_ref) {
+  var groups = _ref.groups,
+    editor = _ref.editor;
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
+    buttonProps: {
+      className: "flex-shrink-0"
+    },
+    buttonStyle: "text",
+    icon: MenuHorizontal__default.default,
+    strategy: "fixed",
+    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.jsxs(MenuItem$1.Button, _objectSpread$8(_objectSpread$8({
+              "data-testid": "neeto-editor-fixed-menu-".concat(props.optionName, "-option"),
+              isActive: editor.isActive(props.optionName),
+              tabIndex: "-1",
+              onClick: props.command
+            }, _objectSpread$8(_objectSpread$8(_objectSpread$8({}, useEditorStore.generateFocusProps(props.highlight)), props), {}, {
+              editor: editor
+            })), {}, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {}), " ", props.label]
+            }), props.optionName);
+          }
+          return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$8(_objectSpread$8({}, _objectSpread$8(_objectSpread$8({}, props), {}, {
+            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]);
+
+  // Update editor state when neetoKbArticleState changes
+  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,
+      dropdownProps: {
+        buttonSize: "small",
+        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;
+  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(".neeto-editor-fixed-menu__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",
+      "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, {
+      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(Tooltip__default.default, _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: Smiley__default.default,
+    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: TextBold__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleBold().run();
+    },
+    active: editor.isActive("bold"),
+    optionName: "bold",
+    tooltip: tooltips.bold || t("neetoEditor.menu.bold")
+  }, {
+    Icon: TextItalic__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleItalic().run();
+    },
+    active: editor.isActive("italic"),
+    optionName: "italic",
+    tooltip: tooltips.italic || t("neetoEditor.menu.italic")
+  }, {
+    Icon: Underline__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleUnderline().run();
+    },
+    active: editor.isActive("underline"),
+    optionName: "underline",
+    tooltip: tooltips.underline || t("neetoEditor.menu.underline")
+  }, {
+    Icon: TextCross__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleStrike().run();
+    },
+    active: editor.isActive("strike"),
+    optionName: "strike",
+    tooltip: tooltips.strike || t("neetoEditor.menu.strike")
+  }, {
+    Icon: Highlight__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleHighlight().run();
+    },
+    active: editor.isActive("highlight"),
+    optionName: "highlight",
+    tooltip: tooltips.highlight || t("neetoEditor.menu.highlight")
+  }, {
+    Icon: Quote__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleBlockquote().run();
+    },
+    active: editor.isActive("blockquote"),
+    optionName: "block-quote",
+    tooltip: tooltips.blockQuote || t("neetoEditor.menu.blockQuote")
+  }, {
+    Icon: Code__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleCode().run();
+    },
+    active: editor.isActive("code"),
+    optionName: "code",
+    tooltip: tooltips.code || t("neetoEditor.menu.code")
+  }, {
+    Icon: CodeBlock__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleCodeBlock().run();
+    },
+    active: editor.isActive("codeBlock"),
+    optionName: "code-block",
+    tooltip: tooltips.codeBlock || t("neetoEditor.menu.codeBlock")
+  }, {
+    Icon: ListDot__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleBulletList().run();
+    },
+    active: editor.isActive("bulletList"),
+    optionName: "bullet-list",
+    tooltip: tooltips.bulletList || t("neetoEditor.menu.bulletedList")
+  }, {
+    Icon: ListNumber__default.default,
+    command: function command() {
+      return editor.chain().focus().toggleOrderedList().run();
+    },
+    active: editor.isActive("orderedList"),
+    optionName: "ordered-list",
+    tooltip: tooltips.orderedList || t("neetoEditor.menu.orderedList")
+  }, {
+    Icon: File__default.default,
+    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: ImageUpload__default.default,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("image", true));
+    },
+    optionName: "image-upload",
+    tooltip: tooltips.imageUpload || t("neetoEditor.menu.imageUpload")
+  }, {
+    Icon: Video__default.default,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("video", true));
+    },
+    optionName: "video-upload",
+    tooltip: tooltips.videoUpload || t("neetoEditor.menu.videoUpload")
+  }, {
+    Icon: Smiley__default.default,
+    command: neetoCist.noop,
+    optionName: "emoji",
+    tooltip: tooltips.emoji || t("neetoEditor.menu.emoji"),
+    isActive: isEmojiPickerActive,
+    setActive: setIsEmojiPickerActive
+  }, {
+    Icon: Column__default.default,
+    command: function command() {
+      return editor.chain().focus().insertTable({
+        rows: 3,
+        cols: 3,
+        withHeaderRow: true
+      }).run();
+    },
+    optionName: "table",
+    tooltip: tooltips.table || t("neetoEditor.menu.table")
+  }, {
+    Icon: Undo__default.default,
+    command: function command() {
+      return editor.chain().focus().undo().run();
+    },
+    disabled: !editor.can().undo(),
+    optionName: "undo",
+    tooltip: tooltips.undo || t("neetoEditor.menu.undo")
+  }, {
+    Icon: Redo__default.default,
+    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", _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: TextH1__default.default
+}, {
+  label: i18n.t("neetoEditor.menu.heading2"),
+  value: 2,
+  key: "h2",
+  icon: TextH2__default.default
+}, {
+  label: i18n.t("neetoEditor.menu.heading3"),
+  value: 3,
+  key: "h3",
+  icon: TextH3__default.default
+}, {
+  label: i18n.t("neetoEditor.menu.heading4"),
+  value: 4,
+  key: "h4",
+  icon: TextH4__default.default
+}, {
+  label: i18n.t("neetoEditor.menu.heading5"),
+  value: 5,
+  key: "h5",
+  icon: TextH5__default.default
+}, {
+  label: i18n.t("neetoEditor.menu.normalText"),
+  value: 0,
+  key: "body2",
+  icon: TextP__default.default
+}];
+var MENU_COMPONENTS = {
+  fixed: Fixed,
+  bubble: Bubble,
+  headless: Headless,
+  none: EmptyMenu
+};
+
+var Menu$2 = Dropdown__default.default.Menu,
+  MenuItem = Dropdown__default.default.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;
+  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]]);
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
+    autoWidth: true,
+    placement: "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      icon: activeOption === null || activeOption === void 0 ? void 0 : activeOption.icon,
+      iconPosition: "left",
+      iconSize: 22,
+      label: /*#__PURE__*/jsxRuntime.jsx(Down__default.default, {
+        size: 12
+      }),
+      ref: dropdownRef,
+      "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"
+      },
+      style: "text",
+      size: "small",
+      className: "neeto-editor-fixed-menu__item neeto-editor-font-size__wrapper"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(Menu$2, {
+      className: "neeto-ui-flex neeto-ui-gap-1 neeto-editor-menu-font-size-options",
+      children: menuOptions.map(function (_ref2) {
+        var label = _ref2.label,
+          Icon = _ref2.icon,
+          value = _ref2.value,
+          key = _ref2.key;
+        return /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+          className: "neeto-editor-menu-font-size-options__item-btn",
+          "data-testid": "neeto-editor-fixed-menu-font-size-option-".concat(key),
+          tooltipProps: {
+            content: label,
+            position: "bottom"
+          },
+          onClick: function onClick() {
+            return handleClick(value);
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+            size: 22
+          })
+        }, value);
+      })
+    })
+  });
+};
+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$1.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;
+  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);
+        }
+      });
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
+    autoWidth: true,
+    placement: "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      icon: function icon() {
+        return /*#__PURE__*/jsxRuntime.jsx(Highlight__default.default, {
+          size: 18
+        });
+      },
+      iconPosition: "left",
+      iconSize: 16,
+      label: /*#__PURE__*/jsxRuntime.jsx(Down__default.default, {
+        size: 12
+      }),
+      ref: dropdownRef,
+      "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"
+      },
+      style: "text",
+      size: "small",
+      className: "neeto-editor-fixed-menu__item"
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default.Menu, {
+      className: "neeto-editor-highlight-dropdown",
+      children: colorSections.map(function (_ref2) {
+        var title = _ref2.title,
+          colors = _ref2.colors,
+          isTextColor = _ref2.isTextColor;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "neeto-editor-highlight-dropdown__section",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default.default, {
+            className: "neeto-editor-highlight-dropdown__section-title",
+            style: "body2",
+            weight: "medium",
+            children: title
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "neeto-editor-highlight-dropdown__color-grid",
+            "data-testid": "neeto-editor-highlight-".concat(utils$1.hyphenize(title), "-grid"),
+            children: renderColorDots(colors, isTextColor)
+          })]
+        }, title);
+      })
+    })
+  });
+};
+
+var Menu$1 = Dropdown__default.default.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(false),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = React.useState(3),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    rows = _useState4[0],
+    setRows = _useState4[1];
+  var _useState5 = React.useState(3),
+    _useState6 = _slicedToArray__default.default(_useState5, 2),
+    columns = _useState6[0],
+    setColumns = _useState6[1];
+  var handleClose = function handleClose() {
+    setRows(3);
+    setColumns(3);
+    setIsOpen(false);
+  };
+  var handleSubmit = function handleSubmit() {
+    editor.chain().focus().insertTable({
+      rows: rows,
+      cols: columns,
+      withHeaderRow: true
+    }).run();
+    handleClose();
+  };
+  var handleDropdownClick = function handleDropdownClick(e) {
+    isSecondaryMenu && e.stopPropagation();
+    setIsOpen(ramda.not);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown__default.default, {
+    isOpen: isOpen,
+    buttonStyle: isOpen ? "secondary" : "text",
+    closeOnSelect: false,
+    "data-testid": "neeto-editor-fixed-menu-link-option",
+    icon: Column__default.default,
+    position: isSecondaryMenu ? "left-start" : "bottom",
+    buttonProps: {
+      tabIndex: -1,
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label,
+        position: "bottom"
+      },
+      className: "neeto-editor-fixed-menu__item",
+      "data-testid": "neeto-editor-fixed-menu-table-option"
+    },
+    customTarget: isSecondaryMenu && /*#__PURE__*/jsxRuntime.jsx(SecondaryMenuTarget, {
+      label: label,
+      icon: Column__default.default
+    }),
+    onClick: handleDropdownClick,
+    onClose: handleClose,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Menu$1, {
+      className: "neeto-editor-table__item",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Input__default.default, {
+        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$1.withEventTargetValue(setRows)
+      }), /*#__PURE__*/jsxRuntime.jsx(Input__default.default, {
+        "data-testid": "neeto-editor-fixed-menu-table-columns-input",
+        label: t("neetoEditor.menu.columns"),
+        min: "1",
+        placeholder: t("neetoEditor.placeholders.rows"),
+        size: "small",
+        type: "number",
+        value: columns,
+        onChange: utils$1.withEventTargetValue(setColumns)
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-editor-table-menu__button",
+        children: /*#__PURE__*/jsxRuntime.jsx(Button__default.default, {
+          className: "mt-auto",
+          "data-testid": "neeto-editor-fixed-menu-table-option-create-button",
+          label: t("neetoEditor.common.create"),
+          size: "small",
+          onClick: handleSubmit
+        })
+      })]
+    })
+  });
+};
+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 [
+  // font
+  [{
+    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: TextBold__default.default,
+    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: TextItalic__default.default,
+    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: Link__default.default,
+    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: TextCross__default.default,
+    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: Highlight__default.default,
+    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")
+  }],
+  // list
+  [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: ListDot__default.default,
+    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: ListNumber__default.default,
+    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: Checkbox__default$1.default,
+    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")
+  }],
+  // block
+  [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Quote__default.default,
+    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")
+  }],
+  // misc
+  [{
+    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: Attachment__default.default,
+    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: File__default.default,
+    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: ImageUpload__default.default,
+    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")
+  }],
+  // extras
+  [{
+    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: Code__default.default,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleCode().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE),
+    optionName: constants.EDITOR_OPTIONS.CODE,
+    label: (_tooltips$code = tooltips.code) !== null && _tooltips$code !== void 0 ? _tooltips$code : i18n.t("neetoEditor.menu.code")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: CodeBlock__default.default,
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleCodeBlock().run();
+    }),
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE_BLOCK),
+    optionName: "codeBlock",
+    label: (_tooltips$codeBlock = tooltips.codeBlock) !== null && _tooltips$codeBlock !== void 0 ? _tooltips$codeBlock : i18n.t("neetoEditor.menu.codeBlock")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Video__default.default,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("video", true));
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD),
+    optionName: constants.EDITOR_OPTIONS.VIDEO_UPLOAD,
+    label: (_tooltips$videoUpload = tooltips.videoUpload) !== null && _tooltips$videoUpload !== void 0 ? _tooltips$videoUpload : i18n.t("neetoEditor.menu.videoUpload")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Underline__default.default,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.UNDERLINE),
+    command: runEditorCommand(function (editor) {
+      return editor.chain().focus().toggleUnderline().run();
+    }),
+    optionName: constants.EDITOR_OPTIONS.UNDERLINE,
+    label: (_tooltips$underline = tooltips.underline) !== null && _tooltips$underline !== void 0 ? _tooltips$underline : i18n.t("neetoEditor.menu.underline")
+  }], //addons
+  _toConsumableArray__default.default(addonCommandOptions),
+  // history
+  [{
+    icon: Undo__default.default,
+    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: Redo__default.default,
+    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;
+
+  // Calculate the arrow position
+  var arrowCoords = editor.view.coordsAtPos(selectionStart + offset);
+  var arrowPosition = {
+    top: "".concat(arrowCoords.top + 21, "px"),
+    left: "".concat(arrowCoords.left - 8.5, "px")
+  };
+
+  // Calculate the popover position
+  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, ")");
+}
+
+var css = ".neeto-editor-fixed-menu{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-gray-400));border-bottom:none;border-radius:var(--neeto-ui-rounded) var(--neeto-ui-rounded) 0 0;display:flex;position:relative}.neeto-editor-fixed-menu--independant{border-bottom:thin solid rgb(var(--neeto-ui-gray-400));border-radius:0;border-radius:initial}.neeto-editor-fixed-menu--independant .neeto-editor-fixed-menu__wrapper{border-bottom:0!important}.neeto-editor-fixed-menu--independant .neeto-editor-fixed-menu__wrapper button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon path{stroke-width:1.8px}.neeto-editor-fixed-menu__item{border-radius:0}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item{--neeto-ui-btn-border-radius:0;--neeto-ui-btn-icon-size:22px;--neeto-ui-btn-padding-x:0;--neeto-ui-btn-padding-y:0;--neeto-ui-btn-focus-box-shadow:none;align-items:center;height:36px;justify-content:center;min-width:-moz-fit-content;min-width:fit-content;padding:0;width:36px}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon{color:rgb(var(--neeto-ui-black))}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon path{stroke-width:1.5px}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-100))}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item.neeto-ui-btn--style-secondary{background-color:rgb(var(--neeto-ui-accent-100))}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item.neeto-ui-btn--style-secondary .neeto-ui-btn__icon{color:rgb(var(--neeto-ui-accent-800))}.neeto-editor-fixed-menu__wrapper{align-items:center;border-bottom:thin solid rgb(var(--neeto-ui-gray-400));display:flex;flex-grow:1;justify-content:flex-start;padding:0 2px;width:100%}.neeto-editor-fixed-menu__wrapper__button-group{display:flex}.neeto-editor-fixed-menu__variables{bottom:-42px;inset-inline-end:8px;position:absolute;z-index:10}.neeto-editor-fixed-menu__variables .neeto-editor-menu__item{background-color:rgb(var(--neeto-ui-gray-700));border-radius:var(--neeto-ui-rounded-sm);padding:4px}.neeto-editor-fixed-menu__variables .neeto-editor-menu__item.active,.neeto-editor-fixed-menu__variables .neeto-editor-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-600))}.neeto-editor-fixed-menu__variables--standalone{bottom:auto;inset-inline-end:0;position:absolute;top:8px;z-index:10}.neeto-editor-fixed-menu__right-options{display:flex}.neeto-editor-fixed-menu__emoji-dropdown{max-height:none!important}.neeto-editor-fixed-menu__separator{display:flex;height:28px;width:32px}.neeto-editor-fixed-menu__separator span{width:100%}.neeto-editor-fixed-menu__separator span:first-child{border-inline-end:1px solid rgb(var(--neeto-ui-gray-200))}.neeto-editor-text-color-option__options-group{align-items:center;display:flex;gap:8px;margin-block:8px;margin-inline:4px}.neeto-editor-text-color-option__options-group__input{max-width:120px}.neeto-editor-text-color-option__options-group__reset-button{align-self:center}.react-colorful{width:100%!important}.neeto-editor-menu__item{align-items:center;border-radius:2px;cursor:pointer;display:flex;flex-direction:row;gap:4px;justify-content:center;padding:8px;transition:var(--neeto-ui-transition)}.neeto-editor-menu__item p{color:rgb(var(--neeto-ui-gray-600));font-size:var(--neeto-ui-text-xs);line-height:1;white-space:nowrap}.neeto-editor-menu__item.active,.neeto-editor-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-editor-menu__item:focus,.neeto-editor-menu__item:focus-visible{outline:rgb(var(--neeto-ui-gray-300)) auto 1px}.neeto-editor-menu__item input[type=color]{height:0;visibility:hidden;width:0}.neeto-editor-menu__item:disabled{background-color:rgb(var(--neeto-ui-gray-100));opacity:.5}.neeto-editor-link__item{align-items:flex-start;justify-content:flex-start}.neeto-editor-link__item,.neeto-editor-table__item{display:flex!important;flex-direction:row;gap:8px;padding:8px!important}.neeto-editor-table__item{min-width:210px}.neeto-editor-table__item input{max-width:60px!important}.neeto-editor-table__options-menu{display:flex;flex-direction:column;gap:8px;max-height:150px!important;overflow:scroll;padding:8px!important}.neeto-editor-font-size__wrapper{font-size:16px;font-weight:var(--neeto-ui-font-normal)!important;padding-inline-end:4px!important;padding-inline-start:4px!important}.tippy-box[data-theme~=neeto-editor-bubble-menu-tippy-box]{box-shadow:none!important}.tippy-box[data-theme~=neeto-editor-bubble-menu-tippy-box] .tippy-content{padding:0!important}.tippy-box[data-theme~=neeto-editor-common-submenu-tippy-box]{box-shadow:none!important}.tippy-box[data-theme~=neeto-editor-common-submenu-tippy-box] .tippy-content{padding:0!important}.neeto-editor-bubble-menu{align-items:center;background:rgb(var(--neeto-ui-white));border:1px solid rgb(var(--neeto-ui-gray-400));border-radius:var(--neeto-ui-rounded);display:flex;flex-direction:row;gap:0;justify-content:flex-start;overflow-x:auto;padding:0;position:relative}.neeto-editor-bubble-menu>.neeto-editor-bubble-menu__item:first-child,.neeto-editor-bubble-menu>.neeto-editor-fixed-menu__item:first-child,.neeto-editor-bubble-menu>.neeto-editor-table-bubble-menu__item:first-child{border-bottom-left-radius:var(--neeto-ui-rounded);border-top-left-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu>.neeto-editor-bubble-menu__item:last-child,.neeto-editor-bubble-menu>.neeto-editor-fixed-menu__item:last-child,.neeto-editor-bubble-menu>.neeto-editor-table-bubble-menu__item:last-child{border-bottom-right-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item,.neeto-editor-bubble-menu button.neeto-editor-table-bubble-menu__item{--neeto-ui-btn-border-radius:0;--neeto-ui-btn-icon-size:22px;--neeto-ui-btn-padding-x:0;--neeto-ui-btn-padding-y:0;--neeto-ui-btn-focus-box-shadow:none;align-items:center;color:rgb(var(--neeto-ui-black))!important;flex-shrink:0;height:36px;justify-content:center;min-width:-moz-fit-content;min-width:fit-content;width:36px}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item .neeto-ui-btn__icon,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon,.neeto-editor-bubble-menu button.neeto-editor-table-bubble-menu__item .neeto-ui-btn__icon{color:rgb(var(--neeto-ui-black))}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item .neeto-ui-btn__icon path,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item .neeto-ui-btn__icon path,.neeto-editor-bubble-menu button.neeto-editor-table-bubble-menu__item .neeto-ui-btn__icon path{stroke-width:1.5px}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item.active,.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item:active,.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item:hover,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item.active,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item:active,.neeto-editor-bubble-menu button.neeto-editor-fixed-menu__item:hover,.neeto-editor-bubble-menu button.neeto-editor-table-bubble-menu__item.active,.neeto-editor-bubble-menu button.neeto-editor-table-bubble-menu__item:active,.neeto-editor-bubble-menu button.neeto-editor-table-bubble-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-100))}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item.neeto-ui-btn--style-secondary{background-color:rgb(var(--neeto-ui-accent-100))!important}.neeto-editor-bubble-menu button.neeto-editor-bubble-menu__item.neeto-ui-btn--style-secondary .neeto-ui-btn__icon{color:rgb(var(--neeto-ui-accent-800))!important}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link{align-items:center;display:flex;gap:6px;justify-content:space-between;padding:6px;width:256px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input{background-color:transparent;background-color:var(--neeto-ui-input-bg-color);border:var(--neeto-ui-input-border-width) solid var(--neeto-ui-input-border-color);border-radius:var(--neeto-ui-input-border-radius);color:var(--neeto-ui-input-color);font-size:var(--neeto-ui-input-font-size);height:28px;line-height:1.2;outline:none;transition:var(--neeto-ui-transition);width:100%}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input::-moz-placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input::placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .ne-btn--icon-only{min-height:0;opacity:.8;padding:0}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .ne-btn--icon-only:hover{opacity:1}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table{align-items:flex-start;display:flex;gap:6px;justify-content:space-between;max-width:256px;padding:4px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input{background-color:var(--neeto-ui-input-bg-color);border:var(--neeto-ui-input-border-width) solid var(--neeto-ui-input-border-color);border-radius:var(--neeto-ui-input-border-radius);color:var(--neeto-ui-input-color);font-size:var(--neeto-ui-input-font-size);height:28px;line-height:1.2;outline:none;padding-block:3px;padding-inline:5px;transition:var(--neeto-ui-transition);width:60px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::-moz-placeholder{color:rgb(var(--neeto-ui-gray-500))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::placeholder{color:rgb(var(--neeto-ui-gray-500))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__menu-item{display:flex;flex-direction:column;gap:6px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__input-label{color:rgb(var(--neeto-ui-gray-800))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__buttons{align-self:flex-end;display:flex;gap:4px;justify-content:space-between}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__options{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow:scroll}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown-target{align-items:center;display:flex;font-size:var(--neeto-ui-text-xs);gap:4px;line-height:var(--neeto-ui-leading-normal);white-space:nowrap}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown{align-items:flex-start;display:flex;flex-direction:column}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item{font-size:var(--neeto-ui-text-xs);padding-block:8px;padding-inline:12px;text-align:start;width:100%}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item:first-child{border-top-left-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item:last-child{border-bottom-left-radius:var(--neeto-ui-rounded);border-bottom-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu-animate-shake{animation:shake 1s linear infinite alternate both}.neeto-editor-table-menu__button{align-items:flex-end;display:flex}.neeto-editor__image-menu .neeto-ui-dropdown__popup{display:flex;min-width:0;min-width:auto}.neeto-editor__image-menu .neeto-ui-dropdown__popup .neeto-ui-btn .neeto-ui-btn__icon{height:18px!important;width:18px!important}.neeto-editor__image-menu-btn{border-radius:100%;inset-inline-end:6px;position:absolute!important;top:6px;z-index:1}.neeto-editor-menu-font-size-options{padding:8px!important}.neeto-editor-menu-font-size-options .neeto-ui-dropdown__popup-menu-item{background-color:transparent!important}.neeto-editor-menu-font-size-options .neeto-editor-menu-font-size-options__item-btn{border-radius:var(--neeto-ui-btn-border-radius)!important;justify-content:center;min-height:34px;min-width:34px;overflow:hidden;padding-inline-end:0!important;padding-inline-start:0!important;text-align:center}.neeto-editor-menu-font-size-options .neeto-editor-menu-font-size-options__item-btn--selected{background-color:rgb(var(--neeto-ui-accent-100))!important;color:rgb(var(--neeto-ui-accent-800))!important}.neeto-editor-table-bubble-menu__dropdown .neeto-ui-dropdown__popup{min-width:auto}.neeto-editor-table-bubble-menu__dropdown .neeto-ui-dropdown__popup .neeto-ui-dropdown__popup-menu{--neeto-ui-btn-border-radius:0;padding:0}.neeto-editor-fixed-menu-standalone-variables-wrapper{position:relative}";
+injectCss.n(css,{});
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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 ? constants$1.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.EmojiPickerMenu = EmojiPickerMenu;
+exports.LinkAddPopOver = LinkAddPopOver;
+exports.MediaUploader = MediaUploader;
+exports.Menu = Menu;
+exports.MenuDynamicVariables = MenuDynamicVariables;
+exports.getLinkPopoverPosition = getLinkPopoverPosition;
+exports.validateUrl = validateUrl;
+//# sourceMappingURL=chunk-BlWQNLLE.cjs.js.map