@bigbinary/neeto-editor 1.36.2 → 1.37.0

package/dist/cjs/{chunk-e1b45d60.cjs.js → chunk-b40b9bbf.cjs.js}

@@ -18,6 +18,7 @@ var neetoIcons = require('@bigbinary/neeto-icons');
 var neetoui = require('@bigbinary/neetoui');
 var reactI18next = require('react-i18next');
 var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
+var i18n = require('i18next');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _classCallCheck$1 = require('@babel/runtime/helpers/classCallCheck');
 var _createClass$1 = require('@babel/runtime/helpers/createClass');
@@ -29,11 +30,10 @@ var emojiMart = require('emoji-mart');
 var axios = require('axios');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var reactColorful = require('react-colorful');
-var i18n = require('i18next');
+var _objectWithoutProperties$1 = require('@babel/runtime/helpers/objectWithoutProperties');
 var DynamicVariables = require('@bigbinary/neeto-molecules/DynamicVariables');
 var useUppyUploader = require('./chunk-7f205514.cjs.js');
 var _commonjsHelpers = require('./chunk-1b36f0ca.cjs.js');
-var _objectWithoutProperties$1 = require('@babel/runtime/helpers/objectWithoutProperties');
 var Tippy = require('@tippyjs/react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -46,6 +46,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var tippy__default = /*#__PURE__*/_interopDefaultLegacy(tippy);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck$1);
 var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass$1);
@@ -54,9 +55,8 @@ var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeO
 var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits$1);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
-var DynamicVariables__default = /*#__PURE__*/_interopDefaultLegacy(DynamicVariables);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties$1);
+var DynamicVariables__default = /*#__PURE__*/_interopDefaultLegacy(DynamicVariables);
 var Tippy__default = /*#__PURE__*/_interopDefaultLegacy(Tippy);
 
 const domIndex = function (node) {
@@ -6670,6 +6670,11 @@ function sinkListItem$1(itemType) {
     };
 }
 
+/**
+ * Takes a Transaction & Editor State and turns it into a chainable state object
+ * @param config The transaction and state to create the chainable state from
+ * @returns A chainable Editor state object
+ */
 function createChainableState(config) {
     const { state, transaction } = config;
     let { selection } = transaction;
@@ -6836,6 +6841,13 @@ class EventEmitter {
     }
 }
 
+/**
+ * Returns a field from an extension
+ * @param extension The Tiptap extension
+ * @param field The field, for example `renderHTML` or `priority`
+ * @param context The context object that should be passed as `this` into the function
+ * @returns The field value
+ */
 function getExtensionField(extension, field, context) {
     if (extension.config[field] === undefined && extension.parent) {
         return getExtensionField(extension.parent, field, context);
@@ -7080,6 +7092,12 @@ function cleanUpSchemaItem(data) {
         return value !== null && value !== undefined;
     }));
 }
+/**
+ * Creates a new Prosemirror schema based on the given extensions.
+ * @param extensions An array of Tiptap extensions
+ * @param editor The editor instance
+ * @returns A Prosemirror schema
+ */
 function getSchemaByResolvedExtensions(extensions, editor) {
     var _a;
     const allAttributes = getAttributesFromExtensions(extensions);
@@ -7181,6 +7199,12 @@ function getSchemaByResolvedExtensions(extensions, editor) {
     });
 }
 
+/**
+ * Tries to get a node or mark type by its name.
+ * @param name The name of the node or mark type
+ * @param schema The Prosemiror schema to search in
+ * @returns The node or mark type, or null if it doesn't exist
+ */
 function getSchemaTypeByName(name, schema) {
     return schema.nodes[name] || schema.marks[name] || null;
 }
@@ -7197,6 +7221,12 @@ function isExtensionRulesEnabled(extension, enabled) {
     return enabled;
 }
 
+/**
+ * Returns the text content of a resolved prosemirror position
+ * @param $from The resolved position to get the text content from
+ * @param maxMatch The maximum number of characters to match
+ * @returns The text content
+ */
 const getTextContentFromNodes = ($from, maxMatch = 500) => {
     let textBefore = '';
     const sliceEndPos = $from.parentOffset;
@@ -7404,6 +7434,10 @@ function isNumber(value) {
     return typeof value === 'number';
 }
 
+/**
+ * Paste rules are used to react to pasted content.
+ * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ */
 class PasteRule {
     constructor(config) {
         this.find = config.find;
@@ -7602,57 +7636,14 @@ class ExtensionManager {
         this.editor = editor;
         this.extensions = ExtensionManager.resolve(extensions);
         this.schema = getSchemaByResolvedExtensions(this.extensions, editor);
-        this.extensions.forEach(extension => {
-            var _a;
-            // store extension storage in editor
-            this.editor.extensionStorage[extension.name] = extension.storage;
-            const context = {
-                name: extension.name,
-                options: extension.options,
-                storage: extension.storage,
-                editor: this.editor,
-                type: getSchemaTypeByName(extension.name, this.schema),
-            };
-            if (extension.type === 'mark') {
-                const keepOnSplit = (_a = callOrReturn(getExtensionField(extension, 'keepOnSplit', context))) !== null && _a !== void 0 ? _a : true;
-                if (keepOnSplit) {
-                    this.splittableMarks.push(extension.name);
-                }
-            }
-            const onBeforeCreate = getExtensionField(extension, 'onBeforeCreate', context);
-            if (onBeforeCreate) {
-                this.editor.on('beforeCreate', onBeforeCreate);
-            }
-            const onCreate = getExtensionField(extension, 'onCreate', context);
-            if (onCreate) {
-                this.editor.on('create', onCreate);
-            }
-            const onUpdate = getExtensionField(extension, 'onUpdate', context);
-            if (onUpdate) {
-                this.editor.on('update', onUpdate);
-            }
-            const onSelectionUpdate = getExtensionField(extension, 'onSelectionUpdate', context);
-            if (onSelectionUpdate) {
-                this.editor.on('selectionUpdate', onSelectionUpdate);
-            }
-            const onTransaction = getExtensionField(extension, 'onTransaction', context);
-            if (onTransaction) {
-                this.editor.on('transaction', onTransaction);
-            }
-            const onFocus = getExtensionField(extension, 'onFocus', context);
-            if (onFocus) {
-                this.editor.on('focus', onFocus);
-            }
-            const onBlur = getExtensionField(extension, 'onBlur', context);
-            if (onBlur) {
-                this.editor.on('blur', onBlur);
-            }
-            const onDestroy = getExtensionField(extension, 'onDestroy', context);
-            if (onDestroy) {
-                this.editor.on('destroy', onDestroy);
-            }
-        });
+        this.setupExtensions();
     }
+    /**
+     * Returns a flattened and sorted extension list while
+     * also checking for duplicated extensions and warns the user.
+     * @param extensions An array of Tiptap extensions
+     * @returns An flattened and sorted array of Tiptap extensions
+     */
     static resolve(extensions) {
         const resolvedExtensions = ExtensionManager.sort(ExtensionManager.flatten(extensions));
         const duplicatedNames = findDuplicates(resolvedExtensions.map(extension => extension.name));
@@ -7663,6 +7654,11 @@ class ExtensionManager {
         }
         return resolvedExtensions;
     }
+    /**
+     * Create a flattened array of extensions by traversing the `addExtensions` field.
+     * @param extensions An array of Tiptap extensions
+     * @returns A flattened array of Tiptap extensions
+     */
     static flatten(extensions) {
         return (extensions
             .map(extension => {
@@ -7680,6 +7676,11 @@ class ExtensionManager {
             // `Infinity` will break TypeScript so we set a number that is probably high enough
             .flat(10));
     }
+    /**
+     * Sort extensions by priority.
+     * @param extensions An array of Tiptap extensions
+     * @returns A sorted array of Tiptap extensions by priority
+     */
     static sort(extensions) {
         const defaultPriority = 100;
         return extensions.sort((a, b) => {
@@ -7694,6 +7695,10 @@ class ExtensionManager {
             return 0;
         });
     }
+    /**
+     * Get all commands from the extensions.
+     * @returns An object with all commands where the key is the command name and the value is the command function
+     */
     get commands() {
         return this.extensions.reduce((commands, extension) => {
             const context = {
@@ -7713,6 +7718,10 @@ class ExtensionManager {
             };
         }, {});
     }
+    /**
+     * Get all registered Prosemirror plugins from the extensions.
+     * @returns An array of Prosemirror plugins
+     */
     get plugins() {
         const { editor } = this;
         // With ProseMirror, first plugins within an array are executed first.
@@ -7775,9 +7784,17 @@ class ExtensionManager {
             ...allPlugins,
         ];
     }
+    /**
+     * Get all attributes from the extensions.
+     * @returns An array of attributes
+     */
     get attributes() {
         return getAttributesFromExtensions(this.extensions);
     }
+    /**
+     * Get all node views from the extensions.
+     * @returns An object with all node views where the key is the node name and the value is the node view function
+     */
     get nodeViews() {
         const { editor } = this;
         const { nodeExtensions } = splitExtensions(this.extensions);
@@ -7810,6 +7827,62 @@ class ExtensionManager {
             return [extension.name, nodeview];
         }));
     }
+    /**
+     * Go through all extensions, create extension storages & setup marks
+     * & bind editor event listener.
+     */
+    setupExtensions() {
+        this.extensions.forEach(extension => {
+            var _a;
+            // store extension storage in editor
+            this.editor.extensionStorage[extension.name] = extension.storage;
+            const context = {
+                name: extension.name,
+                options: extension.options,
+                storage: extension.storage,
+                editor: this.editor,
+                type: getSchemaTypeByName(extension.name, this.schema),
+            };
+            if (extension.type === 'mark') {
+                const keepOnSplit = (_a = callOrReturn(getExtensionField(extension, 'keepOnSplit', context))) !== null && _a !== void 0 ? _a : true;
+                if (keepOnSplit) {
+                    this.splittableMarks.push(extension.name);
+                }
+            }
+            const onBeforeCreate = getExtensionField(extension, 'onBeforeCreate', context);
+            const onCreate = getExtensionField(extension, 'onCreate', context);
+            const onUpdate = getExtensionField(extension, 'onUpdate', context);
+            const onSelectionUpdate = getExtensionField(extension, 'onSelectionUpdate', context);
+            const onTransaction = getExtensionField(extension, 'onTransaction', context);
+            const onFocus = getExtensionField(extension, 'onFocus', context);
+            const onBlur = getExtensionField(extension, 'onBlur', context);
+            const onDestroy = getExtensionField(extension, 'onDestroy', context);
+            if (onBeforeCreate) {
+                this.editor.on('beforeCreate', onBeforeCreate);
+            }
+            if (onCreate) {
+                this.editor.on('create', onCreate);
+            }
+            if (onUpdate) {
+                this.editor.on('update', onUpdate);
+            }
+            if (onSelectionUpdate) {
+                this.editor.on('selectionUpdate', onSelectionUpdate);
+            }
+            if (onTransaction) {
+                this.editor.on('transaction', onTransaction);
+            }
+            if (onFocus) {
+                this.editor.on('focus', onFocus);
+            }
+            if (onBlur) {
+                this.editor.on('blur', onBlur);
+            }
+            if (onDestroy) {
+                this.editor.on('destroy', onDestroy);
+            }
+        });
+    }
 }
 
 // see: https://github.com/mesqueeb/is-what/blob/88d6e4ca92fb2baab6003c54e02eedf4e729e5ab/src/index.ts
@@ -7843,6 +7916,10 @@ function mergeDeep(target, source) {
     return output;
 }
 
+/**
+ * The Extension class is the base class for all extensions.
+ * @see https://tiptap.dev/api/extensions#create-a-new-extension
+ */
 class Extension {
     constructor(config = {}) {
         this.type = 'extension';
@@ -7880,6 +7957,7 @@ class Extension {
         // return a new instance so we can use the same extension
         // with different calls of `configure`
         const extension = this.extend();
+        extension.parent = this.parent;
         extension.options = mergeDeep(this.options, options);
         extension.storage = callOrReturn(getExtensionField(extension, 'addStorage', {
             name: extension.name,
@@ -7906,19 +7984,25 @@ class Extension {
     }
 }
 
+/**
+ * Gets the text between two positions in a Prosemirror node
+ * and serializes it using the given text serializers and block separator (see getText)
+ * @param startNode The Prosemirror node to start from
+ * @param range The range of the text to get
+ * @param options Options for the text serializer & block separator
+ * @returns The text between the two positions
+ */
 function getTextBetween(startNode, range, options) {
     const { from, to } = range;
     const { blockSeparator = '\n\n', textSerializers = {} } = options || {};
     let text = '';
-    let separated = true;
     startNode.nodesBetween(from, to, (node, pos, parent, index) => {
         var _a;
+        if (node.isBlock && pos > from) {
+            text += blockSeparator;
+        }
         const textSerializer = textSerializers === null || textSerializers === void 0 ? void 0 : textSerializers[node.type.name];
         if (textSerializer) {
-            if (node.isBlock && !separated) {
-                text += blockSeparator;
-                separated = true;
-            }
             if (parent) {
                 text += textSerializer({
                     node,
@@ -7933,16 +8017,16 @@ function getTextBetween(startNode, range, options) {
         }
         if (node.isText) {
             text += (_a = node === null || node === void 0 ? void 0 : node.text) === null || _a === void 0 ? void 0 : _a.slice(Math.max(from, pos) - pos, to - pos); // eslint-disable-line
-            separated = false;
-        }
-        else if (node.isBlock && !separated) {
-            text += blockSeparator;
-            separated = true;
         }
     });
     return text;
 }
 
+/**
+ * Find text serializers `toText` in a Prosemirror schema
+ * @param schema The Prosemirror schema to search in
+ * @returns A record of text serializers by node name
+ */
 function getTextSerializersFromSchema(schema) {
     return Object.fromEntries(Object.entries(schema.nodes)
         .filter(([, node]) => node.spec.toText)
@@ -8325,15 +8409,26 @@ function elementFromString(value) {
     return removeWhitespaces(html);
 }
 
+/**
+ * Takes a JSON or HTML content and creates a Prosemirror node or fragment from it.
+ * @param content The JSON or HTML content to create the node from
+ * @param schema The Prosemirror schema to use for the node
+ * @param options Options for the parser
+ * @returns The created Prosemirror node or fragment
+ */
 function createNodeFromContent(content, schema, options) {
     options = {
         slice: true,
         parseOptions: {},
         ...options,
     };
-    if (typeof content === 'object' && content !== null) {
+    const isJSONContent = typeof content === 'object' && content !== null;
+    const isTextContent = typeof content === 'string';
+    if (isJSONContent) {
         try {
-            if (Array.isArray(content) && content.length > 0) {
+            const isArrayContent = Array.isArray(content) && content.length > 0;
+            // if the JSON Content is an array of nodes, create a fragment for each node
+            if (isArrayContent) {
                 return utils.Fragment.fromArray(content.map(item => schema.nodeFromJSON(item)));
             }
             return schema.nodeFromJSON(content);
@@ -8343,7 +8438,7 @@ function createNodeFromContent(content, schema, options) {
             return createNodeFromContent('', schema, options);
         }
     }
-    if (typeof content === 'string') {
+    if (isTextContent) {
         const parser = utils.DOMParser.fromSchema(schema);
         return options.slice
             ? parser.parseSlice(elementFromString(content), options.parseOptions).content
@@ -8643,6 +8738,12 @@ const newlineInCode = () => ({ state, dispatch }) => {
     return newlineInCode$1(state, dispatch);
 };
 
+/**
+ * Get the type of a schema item by its name.
+ * @param name The name of the schema item
+ * @param schema The Prosemiror schema to search in
+ * @returns The type of the schema item (`node` or `mark`), or null if it doesn't exist
+ */
 function getSchemaTypeNameByName(name, schema) {
     if (schema.nodes[name]) {
         return 'node';
@@ -8740,6 +8841,13 @@ const selectTextblockStart = () => ({ state, dispatch }) => {
     return selectTextblockStart$1(state, dispatch);
 };
 
+/**
+ * Create a new Prosemirror document node from content.
+ * @param content The JSON or HTML content to create the document from
+ * @param schema The Prosemirror schema to use for the document
+ * @param parseOptions Options for the parser
+ * @returns The created Prosemirror document node
+ */
 function createDocument(content, schema, parseOptions = {}) {
     return createNodeFromContent(content, schema, { slice: false, parseOptions });
 }
@@ -8777,6 +8885,9 @@ function getMarkAttributes(state, typeOrName) {
 
 /**
  * Returns a new `Transform` based on all steps of the passed transactions.
+ * @param oldDoc The Prosemirror node to start from
+ * @param transactions The transactions to combine
+ * @returns A new `Transform` with all steps of the passed transactions
  */
 function combineTransactionSteps(oldDoc, transactions) {
     const transform = new utils.Transform(oldDoc);
@@ -8788,6 +8899,11 @@ function combineTransactionSteps(oldDoc, transactions) {
     return transform;
 }
 
+/**
+ * Gets the default block type at a given match
+ * @param match The content match to get the default block type from
+ * @returns The default block type or null
+ */
 function defaultBlockAt(match) {
     for (let i = 0; i < match.edgeCount; i += 1) {
         const { type } = match.edge(i);
@@ -8798,6 +8914,12 @@ function defaultBlockAt(match) {
     return null;
 }
 
+/**
+ * Find children inside a Prosemirror node that match a predicate.
+ * @param node The Prosemirror node to search in
+ * @param predicate The predicate to match
+ * @returns An array of nodes with their positions
+ */
 function findChildren(node, predicate) {
     const nodesWithPos = [];
     node.descendants((child, pos) => {
@@ -8813,6 +8935,10 @@ function findChildren(node, predicate) {
 
 /**
  * Same as `findChildren` but searches only within a `range`.
+ * @param node The Prosemirror node to search in
+ * @param range The range to search in
+ * @param predicate The predicate to match
+ * @returns An array of nodes with their positions
  */
 function findChildrenInRange(node, range, predicate) {
     const nodesWithPos = [];
@@ -8836,6 +8962,15 @@ function findChildrenInRange(node, range, predicate) {
     return nodesWithPos;
 }
 
+/**
+ * Finds the closest parent node to a resolved position that matches a predicate.
+ * @param $pos The resolved position to search from
+ * @param predicate The predicate to match
+ * @returns The closest parent node to the resolved position that matches the predicate
+ * @example ```js
+ * findParentNodeClosestToPos($from, node => node.type.name === 'paragraph')
+ * ```
+ */
 function findParentNodeClosestToPos($pos, predicate) {
     for (let i = $pos.depth; i > 0; i -= 1) {
         const node = $pos.node(i);
@@ -8850,6 +8985,14 @@ function findParentNodeClosestToPos($pos, predicate) {
     }
 }
 
+/**
+ * Finds the closest parent node to the current selection that matches a predicate.
+ * @param predicate The predicate to match
+ * @returns A command that finds the closest parent node to the current selection that matches the predicate
+ * @example ```js
+ * findParentNode(node => node.type.name === 'paragraph')
+ * ```
+ */
 function findParentNode(predicate) {
     return (selection) => findParentNodeClosestToPos(selection.$from, predicate);
 }
@@ -8862,6 +9005,15 @@ function getHTMLFromFragment(fragment, schema) {
     return container.innerHTML;
 }
 
+/**
+ * Gets the text of a Prosemirror node
+ * @param node The Prosemirror node
+ * @param options Options for the text serializer & block separator
+ * @returns The text of the node
+ * @example ```js
+ * const text = getText(node, { blockSeparator: '\n' })
+ * ```
+ */
 function getText(node, options) {
     const range = {
         from: 0,
@@ -8884,6 +9036,12 @@ function getNodeAttributes(state, typeOrName) {
     return { ...node.attrs };
 }
 
+/**
+ * Get node or mark attributes by type or name on the current editor state
+ * @param state The current editor state
+ * @param typeOrName The node or mark type or name
+ * @returns The attributes of the node or mark or an empty object
+ */
 function getAttributes(state, typeOrName) {
     const schemaType = getSchemaTypeNameByName(typeof typeOrName === 'string' ? typeOrName : typeOrName.name, state.schema);
     if (schemaType === 'node') {
@@ -9005,6 +9163,13 @@ function getMarksBetween(from, to, doc) {
     return marks;
 }
 
+/**
+ * Return attributes of an extension that should be splitted by keepOnSplit flag
+ * @param extensionAttributes Array of extension attributes
+ * @param typeName The type of the extension
+ * @param attributes The attributes of the extension
+ * @returns The splitted attributes
+ */
 function getSplittedAttributes(extensionAttributes, typeName, attributes) {
     return Object.fromEntries(Object
         .entries(attributes)
@@ -9828,7 +9993,12 @@ const Keymap = Extension.create({
                 const isAtStart = (parentIsIsolating && $parentPos.parent.childCount === 1)
                     ? parentPos === $anchor.pos
                     : utils.Selection.atStart(doc).from === pos;
-                if (!empty || !isAtStart || !parent.type.isTextblock || parent.textContent.length) {
+                if (!empty
+                    || !parent.type.isTextblock
+                    || parent.textContent.length
+                    || !isAtStart
+                    || (isAtStart && $anchor.parent.type.name === 'paragraph') // prevent clearNodes when no nodes to clear, otherwise history stack is appended
+                ) {
                     return false;
                 }
                 return commands.clearNodes();
@@ -10080,28 +10250,30 @@ class NodePos {
     }
     querySelectorAll(selector, attributes = {}, firstItemOnly = false) {
         let nodes = [];
-        // iterate through children recursively finding all nodes which match the selector with the node name
         if (!this.children || this.children.length === 0) {
             return nodes;
         }
+        const attrKeys = Object.keys(attributes);
+        /**
+         * Finds all children recursively that match the selector and attributes
+         * If firstItemOnly is true, it will return the first item found
+         */
         this.children.forEach(childPos => {
+            // If we already found a node and we only want the first item, we dont need to keep going
+            if (firstItemOnly && nodes.length > 0) {
+                return;
+            }
             if (childPos.node.type.name === selector) {
-                if (Object.keys(attributes).length > 0) {
-                    const nodeAttributes = childPos.node.attrs;
-                    const attrKeys = Object.keys(attributes);
-                    for (let index = 0; index < attrKeys.length; index += 1) {
-                        const key = attrKeys[index];
-                        if (nodeAttributes[key] !== attributes[key]) {
-                            return;
-                        }
-                    }
-                }
-                nodes.push(childPos);
-                if (firstItemOnly) {
-                    return;
+                const doesAllAttributesMatch = attrKeys.every(key => attributes[key] === childPos.node.attrs[key]);
+                if (doesAllAttributesMatch) {
+                    nodes.push(childPos);
                 }
             }
-            nodes = nodes.concat(childPos.querySelectorAll(selector));
+            // If we already found a node and we only want the first item, we can stop here and skip the recursion
+            if (firstItemOnly && nodes.length > 0) {
+                return;
+            }
+            nodes = nodes.concat(childPos.querySelectorAll(selector, attributes, firstItemOnly));
         });
         return nodes;
     }
@@ -10588,6 +10760,7 @@ class Editor$1 extends EventEmitter {
 /**
  * Build an input rule that adds a mark when the
  * matched text is typed into it.
+ * @see https://tiptap.dev/guide/custom-extensions/#input-rules
  */
 function markInputRule(config) {
     return new InputRule({
@@ -10631,6 +10804,7 @@ function markInputRule(config) {
 /**
  * Build an input rule that adds a node when the
  * matched text is typed into it.
+ * @see https://tiptap.dev/guide/custom-extensions/#input-rules
  */
 function nodeInputRule(config) {
     return new InputRule({
@@ -10669,6 +10843,7 @@ function nodeInputRule(config) {
  * matched text is typed into it. When using a regular expresion you’ll
  * probably want the regexp to start with `^`, so that the pattern can
  * only occur at the start of a textblock.
+ * @see https://tiptap.dev/guide/custom-extensions/#input-rules
  */
 function textblockTypeInputRule(config) {
     return new InputRule({
@@ -10699,6 +10874,7 @@ function textblockTypeInputRule(config) {
  * two nodes. You can pass a join predicate, which takes a regular
  * expression match and the node before the wrapped node, and can
  * return a boolean to indicate whether a join should happen.
+ * @see https://tiptap.dev/guide/custom-extensions/#input-rules
  */
 function wrappingInputRule(config) {
     return new InputRule({
@@ -10738,6 +10914,10 @@ function wrappingInputRule(config) {
     });
 }
 
+/**
+ * The Mark class is used to create custom mark extensions.
+ * @see https://tiptap.dev/api/extensions#create-a-new-extension
+ */
 class Mark {
     constructor(config = {}) {
         this.type = 'mark';
@@ -10821,6 +11001,10 @@ class Mark {
     }
 }
 
+/**
+ * The Node class is used to create custom node extensions.
+ * @see https://tiptap.dev/api/extensions#create-a-new-extension
+ */
 class Node {
     constructor(config = {}) {
         this.type = 'node';
@@ -10888,6 +11072,10 @@ function isAndroid() {
     return navigator.platform === 'Android' || /android/i.test(navigator.userAgent);
 }
 
+/**
+ * Node views are used to customize the rendered DOM structure of a node.
+ * @see https://tiptap.dev/guide/node-views
+ */
 class NodeView {
     constructor(component, props, options) {
         this.isDragging = false;
@@ -11078,6 +11266,7 @@ class NodeView {
 /**
  * Build an paste rule that adds a mark when the
  * matched text is pasted into it.
+ * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
  */
 function markPasteRule(config) {
     return new PasteRule({
@@ -11299,6 +11488,10 @@ const BubbleMenuPlugin = (options) => {
     });
 };
 
+/**
+ * This extension allows you to create a bubble menu.
+ * @see https://tiptap.dev/api/extensions/bubble-menu
+ */
 Extension.create({
     name: 'bubbleMenu',
     addOptions() {
@@ -11327,41 +11520,20 @@ Extension.create({
     },
 });
 
-const BubbleMenu = (props) => {
-    const [element, setElement] = React.useState(null);
-    React.useEffect(() => {
-        if (!element) {
-            return;
-        }
-        if (props.editor.isDestroyed) {
-            return;
-        }
-        const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, shouldShow = null, } = props;
-        const plugin = BubbleMenuPlugin({
-            pluginKey,
-            editor,
-            element,
-            tippyOptions,
-            shouldShow,
+const mergeRefs = (...refs) => {
+    return (node) => {
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
         });
-        editor.registerPlugin(plugin);
-        return () => editor.unregisterPlugin(pluginKey);
-    }, [
-        props.editor,
-        element,
-    ]);
-    return (React__default["default"].createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
-};
-
-class Editor extends Editor$1 {
-    constructor() {
-        super(...arguments);
-        this.contentComponent = null;
-    }
-}
-
+    };
+};
 const Portals = ({ renderers }) => {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, Array.from(renderers).map(([key, renderer]) => {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
         return ReactDOM__default["default"].createPortal(renderer.reactElement, renderer.element, key);
     })));
 };
@@ -11369,8 +11541,9 @@ class PureEditorContent extends React__default["default"].Component {
     constructor(props) {
         super(props);
         this.editorContentRef = React__default["default"].createRef();
+        this.initialized = false;
         this.state = {
-            renderers: new Map(),
+            renderers: {},
         };
     }
     componentDidMount() {
@@ -11392,13 +11565,46 @@ class PureEditorContent extends React__default["default"].Component {
             });
             editor.contentComponent = this;
             editor.createNodeViews();
+            this.initialized = true;
+        }
+    }
+    maybeFlushSync(fn) {
+        // Avoid calling flushSync until the editor is initialized.
+        // Initialization happens during the componentDidMount or componentDidUpdate
+        // lifecycle methods, and React doesn't allow calling flushSync from inside
+        // a lifecycle method.
+        if (this.initialized) {
+            ReactDOM.flushSync(fn);
+        }
+        else {
+            fn();
         }
     }
+    setRenderer(id, renderer) {
+        this.maybeFlushSync(() => {
+            this.setState(({ renderers }) => ({
+                renderers: {
+                    ...renderers,
+                    [id]: renderer,
+                },
+            }));
+        });
+    }
+    removeRenderer(id) {
+        this.maybeFlushSync(() => {
+            this.setState(({ renderers }) => {
+                const nextRenderers = { ...renderers };
+                delete nextRenderers[id];
+                return { renderers: nextRenderers };
+            });
+        });
+    }
     componentWillUnmount() {
         const { editor } = this.props;
         if (!editor) {
             return;
         }
+        this.initialized = false;
         if (!editor.isDestroyed) {
             editor.view.setProps({
                 nodeViews: {},
@@ -11415,49 +11621,213 @@ class PureEditorContent extends React__default["default"].Component {
         });
     }
     render() {
-        const { editor, ...rest } = this.props;
+        const { editor, innerRef, ...rest } = this.props;
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { ref: this.editorContentRef, ...rest }),
+            React__default["default"].createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
             React__default["default"].createElement(Portals, { renderers: this.state.renderers })));
     }
 }
-const EditorContent = React__default["default"].memo(PureEditorContent);
-
-const ReactNodeViewContext = React.createContext({
-    onDragStart: undefined,
+// EditorContent should be re-created whenever the Editor instance changes
+const EditorContentWithKey = React.forwardRef((props, ref) => {
+    const key = React__default["default"].useMemo(() => {
+        return Math.floor(Math.random() * 0xFFFFFFFF).toString();
+    }, [props.editor]);
+    // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
+    return React__default["default"].createElement(PureEditorContent, {
+        key,
+        innerRef: ref,
+        ...props,
+    });
 });
-const useReactNodeView = () => React.useContext(ReactNodeViewContext);
-
-const NodeViewContent = props => {
-    const Tag = props.as || 'div';
-    const { nodeViewContentRef } = useReactNodeView();
-    return (React__default["default"].createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
-            whiteSpace: 'pre-wrap',
-            ...props.style,
-        } }));
-};
+const EditorContent = React__default["default"].memo(EditorContentWithKey);
 
-const NodeViewWrapper = React__default["default"].forwardRef((props, ref) => {
-    const { onDragStart } = useReactNodeView();
-    const Tag = props.as || 'div';
-    return (React__default["default"].createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
-            whiteSpace: 'normal',
-            ...props.style,
-        } }));
-});
+class Editor extends Editor$1 {
+    constructor() {
+        super(...arguments);
+        this.contentComponent = null;
+    }
+}
 
+/**
+ * This hook allows you to create an editor instance.
+ * @param options The editor options
+ * @param deps The dependencies to watch for changes
+ * @returns The editor instance
+ * @example const editor = useEditor({ extensions: [...] })
+ */
+const useEditor = (options = {}, deps = []) => {
+    const editorRef = React.useRef(null);
+    const [, forceUpdate] = React.useState({});
+    const { onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, } = options;
+    const onBeforeCreateRef = React.useRef(onBeforeCreate);
+    const onBlurRef = React.useRef(onBlur);
+    const onCreateRef = React.useRef(onCreate);
+    const onDestroyRef = React.useRef(onDestroy);
+    const onFocusRef = React.useRef(onFocus);
+    const onSelectionUpdateRef = React.useRef(onSelectionUpdate);
+    const onTransactionRef = React.useRef(onTransaction);
+    const onUpdateRef = React.useRef(onUpdate);
+    // This effect will handle updating the editor instance
+    // when the event handlers change.
+    React.useEffect(() => {
+        if (!editorRef.current) {
+            return;
+        }
+        if (onBeforeCreate) {
+            editorRef.current.off('beforeCreate', onBeforeCreateRef.current);
+            editorRef.current.on('beforeCreate', onBeforeCreate);
+            onBeforeCreateRef.current = onBeforeCreate;
+        }
+        if (onBlur) {
+            editorRef.current.off('blur', onBlurRef.current);
+            editorRef.current.on('blur', onBlur);
+            onBlurRef.current = onBlur;
+        }
+        if (onCreate) {
+            editorRef.current.off('create', onCreateRef.current);
+            editorRef.current.on('create', onCreate);
+            onCreateRef.current = onCreate;
+        }
+        if (onDestroy) {
+            editorRef.current.off('destroy', onDestroyRef.current);
+            editorRef.current.on('destroy', onDestroy);
+            onDestroyRef.current = onDestroy;
+        }
+        if (onFocus) {
+            editorRef.current.off('focus', onFocusRef.current);
+            editorRef.current.on('focus', onFocus);
+            onFocusRef.current = onFocus;
+        }
+        if (onSelectionUpdate) {
+            editorRef.current.off('selectionUpdate', onSelectionUpdateRef.current);
+            editorRef.current.on('selectionUpdate', onSelectionUpdate);
+            onSelectionUpdateRef.current = onSelectionUpdate;
+        }
+        if (onTransaction) {
+            editorRef.current.off('transaction', onTransactionRef.current);
+            editorRef.current.on('transaction', onTransaction);
+            onTransactionRef.current = onTransaction;
+        }
+        if (onUpdate) {
+            editorRef.current.off('update', onUpdateRef.current);
+            editorRef.current.on('update', onUpdate);
+            onUpdateRef.current = onUpdate;
+        }
+    }, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, editorRef.current]);
+    React.useEffect(() => {
+        let isMounted = true;
+        const editor = new Editor(options);
+        editorRef.current = editor;
+        editorRef.current.on('transaction', () => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    if (isMounted) {
+                        forceUpdate({});
+                    }
+                });
+            });
+        });
+        return () => {
+            isMounted = false;
+            editor.destroy();
+        };
+    }, deps);
+    return editorRef.current;
+};
+
+const EditorContext = React.createContext({
+    editor: null,
+});
+EditorContext.Consumer;
+const useCurrentEditor = () => React.useContext(EditorContext);
+
+const BubbleMenu = (props) => {
+    const [element, setElement] = React.useState(null);
+    const { editor: currentEditor } = useCurrentEditor();
+    React.useEffect(() => {
+        var _a;
+        if (!element) {
+            return;
+        }
+        if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
+            return;
+        }
+        const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null, } = props;
+        const menuEditor = editor || currentEditor;
+        if (!menuEditor) {
+            console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.');
+            return;
+        }
+        const plugin = BubbleMenuPlugin({
+            updateDelay,
+            editor: menuEditor,
+            element,
+            pluginKey,
+            shouldShow,
+            tippyOptions,
+        });
+        menuEditor.registerPlugin(plugin);
+        return () => menuEditor.unregisterPlugin(pluginKey);
+    }, [props.editor, currentEditor, element]);
+    return (React__default["default"].createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+};
+
+const ReactNodeViewContext = React.createContext({
+    onDragStart: undefined,
+});
+const useReactNodeView = () => React.useContext(ReactNodeViewContext);
+
+const NodeViewContent = props => {
+    const Tag = props.as || 'div';
+    const { nodeViewContentRef } = useReactNodeView();
+    return (React__default["default"].createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
+            whiteSpace: 'pre-wrap',
+            ...props.style,
+        } }));
+};
+
+const NodeViewWrapper = React__default["default"].forwardRef((props, ref) => {
+    const { onDragStart } = useReactNodeView();
+    const Tag = props.as || 'div';
+    return (React__default["default"].createElement(Tag, { ...props, ref: ref, "data-node-view-wrapper": "", onDragStart: onDragStart, style: {
+            whiteSpace: 'normal',
+            ...props.style,
+        } }));
+});
+
+/**
+ * Check if a component is a class component.
+ * @param Component
+ * @returns {boolean}
+ */
 function isClassComponent(Component) {
     return !!(typeof Component === 'function'
         && Component.prototype
         && Component.prototype.isReactComponent);
 }
+/**
+ * Check if a component is a forward ref component.
+ * @param Component
+ * @returns {boolean}
+ */
 function isForwardRefComponent(Component) {
     var _a;
     return !!(typeof Component === 'object'
         && ((_a = Component.$$typeof) === null || _a === void 0 ? void 0 : _a.toString()) === 'Symbol(react.forward_ref)');
 }
+/**
+ * The ReactRenderer class. It's responsible for rendering React components inside the editor.
+ * @example
+ * new ReactRenderer(MyComponent, {
+ *   editor,
+ *   props: {
+ *     foo: 'bar',
+ *   },
+ *   as: 'span',
+ * })
+*/
 class ReactRenderer {
-    constructor(component, { editor, props = {}, as = 'div', className = '', }) {
+    constructor(component, { editor, props = {}, as = 'div', className = '', attrs, }) {
         this.ref = null;
         this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString();
         this.component = component;
@@ -11468,9 +11838,15 @@ class ReactRenderer {
         if (className) {
             this.element.classList.add(...className.split(' '));
         }
+        if (attrs) {
+            Object.keys(attrs).forEach(key => {
+                this.element.setAttribute(key, attrs[key]);
+            });
+        }
         this.render();
     }
     render() {
+        var _a, _b;
         const Component = this.component;
         const props = this.props;
         if (isClassComponent(Component) || isForwardRefComponent(Component)) {
@@ -11479,16 +11855,7 @@ class ReactRenderer {
             };
         }
         this.reactElement = React__default["default"].createElement(Component, { ...props });
-        queueMicrotask(() => {
-            ReactDOM.flushSync(() => {
-                var _a;
-                if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) {
-                    this.editor.contentComponent.setState({
-                        renderers: this.editor.contentComponent.state.renderers.set(this.id, this),
-                    });
-                }
-            });
-        });
+        (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.setRenderer(this.id, this);
     }
     updateProps(props = {}) {
         this.props = {
@@ -11498,18 +11865,8 @@ class ReactRenderer {
         this.render();
     }
     destroy() {
-        queueMicrotask(() => {
-            ReactDOM.flushSync(() => {
-                var _a;
-                if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) {
-                    const { renderers } = this.editor.contentComponent.state;
-                    renderers.delete(this.id);
-                    this.editor.contentComponent.setState({
-                        renderers,
-                    });
-                }
-            });
-        });
+        var _a, _b;
+        (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.contentComponent) === null || _b === void 0 ? void 0 : _b.removeRenderer(this.id);
     }
 }
 
@@ -11539,13 +11896,20 @@ class ReactNodeView extends NodeView {
                     element.appendChild(this.contentDOMElement);
                 }
             };
-            return (React__default["default"].createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
-                React__default["default"].createElement(Component, { ...componentProps })));
+            return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
+                    React__default["default"].createElement(Component, { ...componentProps }))));
         };
         ReactNodeViewProvider.displayName = 'ReactNodeView';
-        this.contentDOMElement = this.node.isLeaf
-            ? null
-            : document.createElement(this.node.isInline ? 'span' : 'div');
+        if (this.node.isLeaf) {
+            this.contentDOMElement = null;
+        }
+        else if (this.options.contentDOMElementTag) {
+            this.contentDOMElement = document.createElement(this.options.contentDOMElementTag);
+        }
+        else {
+            this.contentDOMElement = document.createElement(this.node.isInline ? 'span' : 'div');
+        }
         if (this.contentDOMElement) {
             // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
             // With this fix it seems to work fine
@@ -11557,11 +11921,14 @@ class ReactNodeView extends NodeView {
             as = this.options.as;
         }
         const { className = '' } = this.options;
+        this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this);
+        this.editor.on('selectionUpdate', this.handleSelectionUpdate);
         this.renderer = new ReactRenderer(ReactNodeViewProvider, {
             editor: this.editor,
             props,
             as,
             className: `node-${this.node.type.name} ${className}`.trim(),
+            attrs: this.options.attrs,
         });
     }
     get dom() {
@@ -11578,6 +11945,21 @@ class ReactNodeView extends NodeView {
         }
         return this.contentDOMElement;
     }
+    handleSelectionUpdate() {
+        const { from, to } = this.editor.state.selection;
+        if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+            if (this.renderer.props.selected) {
+                return;
+            }
+            this.selectNode();
+        }
+        else {
+            if (!this.renderer.props.selected) {
+                return;
+            }
+            this.deselectNode();
+        }
+    }
     update(node, decorations) {
         const updateProps = (props) => {
             this.renderer.updateProps(props);
@@ -11610,14 +11992,17 @@ class ReactNodeView extends NodeView {
         this.renderer.updateProps({
             selected: true,
         });
+        this.renderer.element.classList.add('ProseMirror-selectednode');
     }
     deselectNode() {
         this.renderer.updateProps({
             selected: false,
         });
+        this.renderer.element.classList.remove('ProseMirror-selectednode');
     }
     destroy() {
         this.renderer.destroy();
+        this.editor.off('selectionUpdate', this.handleSelectionUpdate);
         this.contentDOMElement = null;
     }
 }
@@ -11633,34 +12018,6 @@ function ReactNodeViewRenderer(component, options) {
     };
 }
 
-function useForceUpdate() {
-    const [, setValue] = React.useState(0);
-    return () => setValue(value => value + 1);
-}
-const useEditor = (options = {}, deps = []) => {
-    const [editor, setEditor] = React.useState(null);
-    const forceUpdate = useForceUpdate();
-    React.useEffect(() => {
-        let isMounted = true;
-        const instance = new Editor(options);
-        setEditor(instance);
-        instance.on('transaction', () => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    if (isMounted) {
-                        forceUpdate();
-                    }
-                });
-            });
-        });
-        return () => {
-            instance.destroy();
-            isMounted = false;
-        };
-    }, deps);
-    return editor;
-};
-
 var validateUrl = function validateUrl(url) {
   return url ? validateNeetoRecordUrl(url) || validateYouTubeUrl(url) || validateLoomUrl(url) || validateVimeoUrl(url) : false;
 };
@@ -11774,8 +12131,8 @@ var emojiPickerApi = {
   fetch: fetch
 };
 
-function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty__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; }
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty__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; }
 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) {
@@ -11827,7 +12184,7 @@ var EmojiPickerMenu = /*#__PURE__*/function (_React$Component) {
   return _createClass__default["default"](EmojiPickerMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      new emojiMart.Picker(_objectSpread$5(_objectSpread$5({}, this.props), {}, {
+      new emojiMart.Picker(_objectSpread$7(_objectSpread$7({}, this.props), {}, {
         onEmojiSelect: this.handleSelect,
         style: {
           maxWidth: "100%"
@@ -11873,59 +12230,829 @@ var generateFocusProps = function generateFocusProps() {
   return highlight ? focusProps : {};
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty__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 Progress = function Progress(_ref) {
-  var uppy = _ref.uppy,
-    pendingUploads = _ref.pendingUploads,
-    setPendingUploads = _ref.setPendingUploads;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var handleUploadProgress = function handleUploadProgress(file, progress) {
-    setPendingUploads(function (prevState) {
-      return prevState.map(function (uploadingFile) {
-        return _objectSpread$4(_objectSpread$4({}, uploadingFile), {}, {
-          progress: uploadingFile.filename !== file.name ? uploadingFile.progress : progress.progress
-        });
+var MenuButton = function MenuButton(_ref) {
+  var icon = _ref.icon,
+    command = _ref.command,
+    optionName = _ref.optionName,
+    highlight = _ref.highlight,
+    disabled = _ref.disabled,
+    label = _ref.label,
+    editor = _ref.editor;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends__default["default"]({
+    disabled: disabled,
+    icon: icon,
+    className: "neeto-editor-fixed-menu__item",
+    "data-cy": "neeto-editor-fixed-menu-".concat(optionName, "-option"),
+    style: editor.isActive(optionName) ? "secondary" : "text",
+    tabIndex: "-1",
+    tooltipProps: {
+      content: label,
+      position: "bottom"
+    },
+    onClick: command
+  }, generateFocusProps(highlight)));
+};
+
+var MenuItem$3 = neetoui.Dropdown.MenuItem;
+var SecondaryMenuTarget = function SecondaryMenuTarget(_ref) {
+  var Icon = _ref.icon,
+    label = _ref.label;
+  return /*#__PURE__*/React__default["default"].createElement(MenuItem$3.Button, null, /*#__PURE__*/React__default["default"].createElement(Icon, null), " ", label);
+};
+
+var EmojiOption = 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__*/React__default["default"].createElement(neetoui.Dropdown, {
+    buttonStyle: "text",
+    closeOnSelect: false,
+    dropdownProps: {
+      classNames: "neeto-editor-fixed-menu__emoji-dropdown"
+    },
+    icon: neetoIcons.Smiley,
+    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"
+    },
+    customTarget: isSecondaryMenu && /*#__PURE__*/React__default["default"].createElement(SecondaryMenuTarget, {
+      label: label,
+      icon: neetoIcons.Smiley
+    }),
+    onClose: function onClose() {
+      return setActive(false);
+    },
+    onClick: function onClick(e) {
+      setActive(function (active) {
+        return !active;
       });
+      isSecondaryMenu && e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(EmojiPickerMenu, {
+    editor: editor,
+    setActive: setActive
+  }));
+};
+
+var Menu$4 = neetoui.Dropdown.Menu,
+  MenuItem$2 = neetoui.Dropdown.MenuItem;
+var FontSizeOption = function FontSizeOption(_ref) {
+  var editor = _ref.editor,
+    tooltipContent = _ref.tooltipContent,
+    label = _ref.label;
+  var dropdownRef = React.useRef(null);
+  var isActive = function isActive(level) {
+    return editor.isActive("heading", {
+      level: level
     });
   };
-  var removeUploadingFile = function removeUploadingFile(id) {
-    uppy.removeFile(id);
-    setPendingUploads(function (prevState) {
-      return neetoCist.removeById(id, prevState);
-    });
+  var activeOption = FONT_SIZE_OPTIONS.find(function (_ref2) {
+    var value = _ref2.value;
+    return isActive(value);
+  }) || ramda.last(FONT_SIZE_OPTIONS);
+  var handleClick = function handleClick(level) {
+    return level ? editor.chain().focus().toggleHeading({
+      level: level
+    }).run() : editor.chain().focus().setNode("paragraph").run();
   };
-  React.useEffect(function () {
-    uppy.on("upload-progress", handleUploadProgress);
-    return function () {
-      uppy.off("upload-progress", handleUploadProgress);
-    };
-  }, [uppy]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "ne-media-uploader__wrapper"
-  }, pendingUploads.map(function (_ref2) {
-    var id = _ref2.id,
-      filename = _ref2.filename,
-      progress = _ref2.progress;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "ne-media-uploader__media",
-      key: id
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "ne-media-uploader__media__info"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: "body2"
-    }, filename), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "neeto-editor-image-upload-cancel-button",
-      icon: neetoIcons.Close,
-      size: "small",
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+    autoWidth: true,
+    "data-cy": "neeto-editor-fixed-menu-font-size-option",
+    label: activeOption === null || activeOption === void 0 ? void 0 : activeOption.label,
+    placement: "bottom-start",
+    strategy: "fixed",
+    buttonProps: {
+      ref: dropdownRef,
+      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"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Menu$4, {
+    onKeyDown: function onKeyDown(event) {
+      var _editor$commands;
+      return event.key === "Escape" && ((_editor$commands = editor.commands) === null || _editor$commands === void 0 ? void 0 : _editor$commands.focus());
+    }
+  }, FONT_SIZE_OPTIONS.map(function (_ref3) {
+    var label = _ref3.label,
+      value = _ref3.value,
+      key = _ref3.key;
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem$2.Button, {
+      "data-cy": "neeto-editor-fixed-menu-font-size-option-".concat(key),
+      key: value,
       onClick: function onClick() {
-        return removeUploadingFile(id);
+        return handleClick(value);
       }
-    })), progress !== 100 ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "ne-media-uploader__media__progress"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      style: key
+    }, label));
+  })));
+};
+
+var Menu$3 = neetoui.Dropdown.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__*/React__default["default"].createElement(neetoui.Dropdown, {
+    isOpen: isOpen,
+    buttonStyle: isOpen ? "secondary" : "text",
+    closeOnSelect: false,
+    "data-cy": "neeto-editor-fixed-menu-link-option",
+    icon: neetoIcons.Column,
+    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"
+    },
+    customTarget: isSecondaryMenu && /*#__PURE__*/React__default["default"].createElement(SecondaryMenuTarget, {
+      label: label,
+      icon: neetoIcons.Column
+    }),
+    onClick: handleDropdownClick,
+    onClose: handleClose
+  }, /*#__PURE__*/React__default["default"].createElement(Menu$3, {
+    className: "neeto-editor-table__item"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    autoFocus: true,
+    "data-cy": "neeto-editor-fixed-menu-table-option-input",
+    min: "1",
+    placeholder: t("neetoEditor.placeholders.rows"),
+    size: "small",
+    type: "number",
+    value: rows,
+    onChange: utils$1.withEventTargetValue(setRows)
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    "data-cy": "neeto-editor-fixed-menu-table-option-input",
+    min: "1",
+    placeholder: t("neetoEditor.placeholders.rows"),
+    size: "small",
+    type: "number",
+    value: columns,
+    onChange: utils$1.withEventTargetValue(setColumns)
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-editor-fixed-menu-table-option-create-button",
+    label: t("neetoEditor.common.create"),
+    size: "small",
+    onClick: handleSubmit
+  })));
+};
+
+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__*/React__default["default"].createElement(neetoui.Dropdown, {
+    isOpen: isOpen,
+    buttonStyle: isOpen || color ? "secondary" : "text",
+    icon: neetoIcons.Customize,
+    position: isSecondaryMenu ? "left-start" : "bottom-start",
+    buttonProps: {
+      tabIndex: -1,
+      tooltipProps: {
+        content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label
+      },
+      className: "neeto-editor-fixed-menu__item neeto-editor-text-color-option"
+    },
+    customTarget: isSecondaryMenu && /*#__PURE__*/React__default["default"].createElement(SecondaryMenuTarget, {
+      label: label,
+      icon: neetoIcons.Customize
+    }),
+    onClick: openColorPicker
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: dropdownWrapperRef,
+    style: {
+      "min-width": "236px"
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(reactColorful.HexColorPicker, {
+    color: color || "#000000",
+    onChange: setColor
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-editor-text-color-option__options-group"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    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__*/React__default["default"].createElement(neetoui.Button, {
+    icon: neetoIcons.Check,
+    size: "small",
+    onClick: handleSave
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    icon: neetoIcons.Close,
+    size: "small",
+    style: "text",
+    onClick: function onClick() {
+      editor.commands.focus();
+      setIsOpen(false);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    icon: neetoIcons.Refresh,
+    size: "small",
+    style: "text",
+    tooltipProps: {
+      content: t("neetoEditor.common.resetToDefault"),
+      position: "top"
+    },
+    onClick: handleUnset
+  }))));
+};
+
+var Menu$2 = neetoui.Dropdown.Menu,
+  MenuItem$1 = neetoui.Dropdown.MenuItem;
+var Mentions = function Mentions(_ref) {
+  var editor = _ref.editor,
+    mentions = _ref.mentions,
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
+    label = _ref.label;
+  if (ramda.isEmpty(mentions)) return null;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+    buttonStyle: "text",
+    "data-cy": "neeto-editor-mention-option",
+    icon: neetoIcons.Email,
+    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__*/React__default["default"].createElement(SecondaryMenuTarget, {
+      label: label,
+      icon: neetoIcons.Email
+    }),
+    onClick: function onClick(e) {
+      return isSecondaryMenu && e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Menu$2, null, mentions.map(function (_ref2) {
+    var key = _ref2.key,
+      name = _ref2.name,
+      imageUrl = _ref2.imageUrl;
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem$1.Button, {
+      "data-cy": "neeto-editor-mention-option-".concat(key),
+      key: key,
+      onClick: function onClick() {
+        return editor.commands.setMention({
+          id: key,
+          label: name
+        });
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Avatar, {
+      size: "small",
+      user: {
+        name: name,
+        imageUrl: imageUrl
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      style: "body2"
+    }, name));
+  })));
+};
+
+var FONT_SIZE_OPTIONS = [{
+  label: i18n.t("neetoEditor.menu.heading1"),
+  value: 1,
+  key: "h1"
+}, {
+  label: i18n.t("neetoEditor.menu.heading2"),
+  value: 2,
+  key: "h2"
+}, {
+  label: i18n.t("neetoEditor.menu.heading3"),
+  value: 3,
+  key: "h3"
+}, {
+  label: i18n.t("neetoEditor.menu.heading4"),
+  value: 4,
+  key: "h4"
+}, {
+  label: i18n.t("neetoEditor.menu.heading5"),
+  value: 5,
+  key: "h5"
+}, {
+  label: i18n.t("neetoEditor.menu.normalText"),
+  value: 0,
+  key: "body2"
+}];
+var MENU_ELEMENT_TYPES = {
+  BUTTON: "button",
+  FONT_SIZE: "fontSize",
+  TABLE: "table",
+  TEXT_COLOR: "textColor",
+  EMOJI: "emoji",
+  MENTIONS: "mentions"
+};
+var MENU_ELEMENTS = _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.FONT_SIZE, FontSizeOption), MENU_ELEMENT_TYPES.TABLE, TableOption$1), MENU_ELEMENT_TYPES.TEXT_COLOR, TextColorOption), MENU_ELEMENT_TYPES.EMOJI, EmojiOption), MENU_ELEMENT_TYPES.MENTIONS, Mentions);
+var MENU_ELEMENT_WIDTHS = _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.FONT_SIZE, 103), MENU_ELEMENT_TYPES.TABLE, 36), MENU_ELEMENT_TYPES.TEXT_COLOR, 36), MENU_ELEMENT_TYPES.EMOJI, 36), MENU_ELEMENT_TYPES.MENTIONS, 36);
+
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty__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 createMenuOptions$2 = function createMenuOptions(_ref) {
+  var _tooltips$undo, _tooltips$redo, _tooltips$fontSize, _tooltips$bold, _tooltips$italic, _tooltips$underline, _tooltips$link, _tooltips$strike, _tooltips$highlight, _tooltips$bulletList, _tooltips$orderedList, _tooltips$blockQuote, _tooltips$code, _tooltips$codeBlock, _tooltips$table, _tooltips$attachments, _tooltips$imageUpload, _tooltips$videoUpload, _tooltips$videoEmbed, _tooltips$textColor, _tooltips$emoji, _tooltips$mention;
+  var tooltips = _ref.tooltips,
+    editor = _ref.editor,
+    setMediaUploader = _ref.setMediaUploader,
+    attachmentProps = _ref.attachmentProps,
+    setIsEmbedModalOpen = _ref.setIsEmbedModalOpen,
+    setIsAddLinkActive = _ref.setIsAddLinkActive,
+    options = _ref.options,
+    mentions = _ref.mentions,
+    addonCommandOptions = _ref.addonCommandOptions,
+    setIsEmojiPickerActive = _ref.setIsEmojiPickerActive,
+    isEmojiPickerActive = _ref.isEmojiPickerActive;
+  var fontSizeOptions = options.filter(function (option) {
+    return option.match(/^h[1-6]$/);
+  });
+  return [
+  // history
+  [{
+    icon: neetoIcons.Undo,
+    command: function command() {
+      return editor.chain().focus().undo().run();
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.UNDO),
+    disabled: !editor.can().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: neetoIcons.Redo,
+    command: function command() {
+      return editor.chain().focus().redo().run();
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.REDO),
+    disabled: !editor.can().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
+  }],
+  // 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"
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: neetoIcons.TextBold,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.BOLD),
+    command: function command() {
+      return 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: neetoIcons.TextItalic,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.ITALIC),
+    command: function command() {
+      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: neetoIcons.Underline,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.UNDERLINE),
+    command: function command() {
+      return editor.chain().focus().toggleUnderline().run();
+    },
+    optionName: constants.EDITOR_OPTIONS.UNDERLINE,
+    label: (_tooltips$underline = tooltips.underline) !== null && _tooltips$underline !== void 0 ? _tooltips$underline : i18n.t("neetoEditor.menu.underline")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: neetoIcons.Link,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.LINK),
+    command: function command() {
+      return setIsAddLinkActive(ramda.not);
+    },
+    optionName: constants.EDITOR_OPTIONS.LINK,
+    label: (_tooltips$link = tooltips.link) !== null && _tooltips$link !== void 0 ? _tooltips$link : i18n.t("neetoEditor.menu.link")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: neetoIcons.TextCross,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.STRIKETHROUGH),
+    command: function command() {
+      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.BUTTON,
+    icon: neetoIcons.Highlight,
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.HIGHLIGHT),
+    command: function command() {
+      return editor.chain().focus().toggleHighlight().run();
+    },
+    optionName: constants.EDITOR_OPTIONS.HIGHLIGHT,
+    label: (_tooltips$highlight = tooltips.highlight) !== null && _tooltips$highlight !== void 0 ? _tooltips$highlight : i18n.t("neetoEditor.menu.highlight")
+  }],
+  // list
+  [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: neetoIcons.ListDot,
+    command: function command() {
+      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: neetoIcons.ListNumber,
+    command: function command() {
+      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")
+  }],
+  // block
+  [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: neetoIcons.Quote,
+    command: function command() {
+      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.BUTTON,
+    icon: neetoIcons.Code,
+    command: function command() {
+      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: neetoIcons.CodeBlock,
+    command: function command() {
+      return editor.chain().focus().toggleCodeBlock().run();
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.CODE_BLOCK),
+    optionName: "codeBlock",
+    label: (_tooltips$codeBlock = tooltips.codeBlock) !== null && _tooltips$codeBlock !== void 0 ? _tooltips$codeBlock : i18n.t("neetoEditor.menu.codeBlock")
+  }],
+  // misc
+  [{
+    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: neetoIcons.Attachment,
+    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: neetoIcons.ImageUpload,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("image", true));
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.IMAGE_UPLOAD),
+    optionName: constants.EDITOR_OPTIONS.IMAGE_UPLOAD,
+    label: (_tooltips$imageUpload = tooltips.imageUpload) !== null && _tooltips$imageUpload !== void 0 ? _tooltips$imageUpload : i18n.t("neetoEditor.menu.imageUpload")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: neetoIcons.Video,
+    command: function command() {
+      return setMediaUploader(ramda.assoc("video", true));
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD),
+    optionName: constants.EDITOR_OPTIONS.VIDEO_UPLOAD,
+    label: (_tooltips$videoUpload = tooltips.videoUpload) !== null && _tooltips$videoUpload !== void 0 ? _tooltips$videoUpload : i18n.t("neetoEditor.menu.videoUpload")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: neetoIcons.MediaVideo,
+    command: function command() {
+      return setIsEmbedModalOpen(true);
+    },
+    isEnabled: options.includes(constants.EDITOR_OPTIONS.VIDEO_EMBED),
+    optionName: constants.EDITOR_OPTIONS.VIDEO_EMBED,
+    label: (_tooltips$videoEmbed = tooltips.videoEmbed) !== null && _tooltips$videoEmbed !== void 0 ? _tooltips$videoEmbed : i18n.t("neetoEditor.menu.videoEmbed")
+  }],
+  // 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
+  }], //addons
+  _toConsumableArray__default["default"](addonCommandOptions)];
+};
+var buildMenuOptions$1 = function buildMenuOptions(_ref2) {
+  var tooltips = _ref2.tooltips,
+    editor = _ref2.editor,
+    options = _ref2.options,
+    setMediaUploader = _ref2.setMediaUploader,
+    attachmentProps = _ref2.attachmentProps,
+    setIsEmbedModalOpen = _ref2.setIsEmbedModalOpen,
+    setIsAddLinkActive = _ref2.setIsAddLinkActive,
+    mentions = _ref2.mentions,
+    addonCommands = _ref2.addonCommands,
+    setIsEmojiPickerActive = _ref2.setIsEmojiPickerActive,
+    isEmojiPickerActive = _ref2.isEmojiPickerActive;
+  if (!editor) return [];
+  var addonCommandOptions = buildOptionsFromAddonCommands({
+    editor: editor,
+    commands: addonCommands
+  });
+  var menuOptions = createMenuOptions$2({
+    tooltips: tooltips,
+    editor: editor,
+    setMediaUploader: setMediaUploader,
+    attachmentProps: attachmentProps,
+    setIsEmbedModalOpen: setIsEmbedModalOpen,
+    setIsAddLinkActive: setIsAddLinkActive,
+    options: options,
+    mentions: mentions,
+    addonCommandOptions: addonCommandOptions,
+    setIsEmojiPickerActive: setIsEmojiPickerActive,
+    isEmojiPickerActive: isEmojiPickerActive
+  });
+  return menuOptions.map(function (option) {
+    return option.filter(ramda.prop("isEnabled"));
+  });
+};
+var buildOptionsFromAddonCommands = function buildOptionsFromAddonCommands(_ref3) {
+  var editor = _ref3.editor,
+    commands = _ref3.commands;
+  var to = editor.state.selection.to;
+  return commands.map(function (option) {
+    var _option$active;
+    return _objectSpread$6(_objectSpread$6({}, option), {}, {
+      type: MENU_ELEMENT_TYPES.BUTTON,
+      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 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 ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty__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 Progress = function Progress(_ref) {
+  var uppy = _ref.uppy,
+    pendingUploads = _ref.pendingUploads,
+    setPendingUploads = _ref.setPendingUploads;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleUploadProgress = function handleUploadProgress(file, progress) {
+    setPendingUploads(function (prevState) {
+      return prevState.map(function (uploadingFile) {
+        return _objectSpread$5(_objectSpread$5({}, uploadingFile), {}, {
+          progress: uploadingFile.filename !== file.name ? uploadingFile.progress : progress.progress
+        });
+      });
+    });
+  };
+  var removeUploadingFile = function removeUploadingFile(id) {
+    uppy.removeFile(id);
+    setPendingUploads(function (prevState) {
+      return neetoCist.removeById(id, prevState);
+    });
+  };
+  React.useEffect(function () {
+    uppy.on("upload-progress", handleUploadProgress);
+    return function () {
+      uppy.off("upload-progress", handleUploadProgress);
+    };
+  }, [uppy]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "ne-media-uploader__wrapper"
+  }, pendingUploads.map(function (_ref2) {
+    var id = _ref2.id,
+      filename = _ref2.filename,
+      progress = _ref2.progress;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "ne-media-uploader__media",
+      key: id
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "ne-media-uploader__media__info"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      style: "body2"
+    }, filename), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      "data-cy": "neeto-editor-image-upload-cancel-button",
+      icon: neetoIcons.Close,
+      size: "small",
+      style: "text",
+      onClick: function onClick() {
+        return removeUploadingFile(id);
+      }
+    })), progress !== 100 ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "ne-media-uploader__media__progress"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ne-media-uploader__media__progress-bar",
       style: {
         width: "".concat(progress, "%")
@@ -13173,7 +14300,7 @@ var MediaUploader = function MediaUploader(_ref) {
   }))));
 };
 
-var css = ".neeto-editor-fixed-menu{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-gray-300));border-bottom:none;border-radius:var(--neeto-ui-rounded) var(--neeto-ui-rounded) 0 0;position:relative}.neeto-editor-fixed-menu--independant{border-bottom:thin solid rgb(var(--neeto-ui-gray-300));border-radius:0;border-radius:initial}.neeto-editor-fixed-menu--independant .neeto-editor-fixed-menu__wrapper{border-bottom:0!important}.neeto-editor-fixed-menu__item{border-radius:0}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item{align-items:center;height:36px;justify-content:center;min-width:-moz-fit-content;min-width:fit-content;padding:0;width:36px;--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}.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.8px}.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-primary-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-primary-800))}.neeto-editor-fixed-menu__wrapper{align-items:center;border-bottom:thin solid rgb(var(--neeto-ui-gray-300));display:flex;justify-content:flex-start;overflow:auto;padding:0;width:100%}.neeto-editor-fixed-menu__wrapper--collapsible{align-items:center;display:flex;flex-grow:1}.neeto-editor-fixed-menu__wrapper--collapsible--fade button.neeto-editor-fixed-menu__item{animation:fade-in .3s ease-in}.neeto-editor-fixed-menu__wrapper__button-group{display:flex}.neeto-editor-fixed-menu__variables{bottom:-24px;position:absolute;right:8px;z-index:10}.neeto-editor-fixed-menu__variables .neeto-editor-menu__item{background-color:rgb(var(--neeto-ui-gray-700));border-radius:var(--neeto-ui-rounded-sm);padding:4px}.neeto-editor-fixed-menu__variables .neeto-editor-menu__item.active,.neeto-editor-fixed-menu__variables .neeto-editor-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-600))}.neeto-editor-fixed-menu__right-options{display:flex}.neeto-editor-fixed-menu__emoji-dropdown{max-height:none!important}.neeto-editor-fixed-menu__separator{display:flex;height:28px;width:32px}.neeto-editor-fixed-menu__separator span{width:100%}.neeto-editor-fixed-menu__separator span:first-child{border-right:1px solid rgb(var(--neeto-ui-gray-200))}.neeto-editor-text-color-option__options-group{align-items:center;display:flex;gap:8px;margin:8px 4px}.neeto-editor-text-color-option__options-group__input{max-width:120px}.neeto-editor-text-color-option__options-group__reset-button{align-self:center}.react-colorful{width:100%!important}.neeto-editor-menu__item{align-items:center;border-radius:2px;cursor:pointer;display:flex;flex-direction:row;gap:4px;justify-content:center;padding:8px;transition:var(--neeto-ui-transition)}.neeto-editor-menu__item p{color:rgb(var(--neeto-ui-gray-600));font-size:var(--neeto-ui-text-xs);line-height:1;white-space:nowrap}.neeto-editor-menu__item.active,.neeto-editor-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-editor-menu__item:focus,.neeto-editor-menu__item:focus-visible{outline:rgb(var(--neeto-ui-gray-300)) auto 1px}.neeto-editor-menu__item input[type=color]{height:0;visibility:hidden;width:0}.neeto-editor-menu__item:disabled{background-color:rgb(var(--neeto-ui-gray-100));opacity:.5}.neeto-editor-link__item{align-items:flex-start;justify-content:flex-start}.neeto-editor-link__item,.neeto-editor-table__item{display:flex!important;flex-direction:row;gap:8px;padding:8px!important}.neeto-editor-table__item 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-weight:var(--neeto-ui-font-normal)!important;padding-left:4px!important;padding-right:4px!important}.neeto-editor-bubble-menu{align-items:center;background:rgb(var(--neeto-ui-gray-800));border-radius:var(--neeto-ui-rounded);display:flex;flex-direction:row;gap:1px;justify-content:flex-start;padding:0 4px;position:relative}.neeto-editor-bubble-menu button.neeto-ui-btn--style-text{color:rgb(var(--neeto-ui-gray-200));min-width:-moz-fit-content;min-width:fit-content}.neeto-editor-bubble-menu button.neeto-ui-btn--style-text.active,.neeto-editor-bubble-menu button.neeto-ui-btn--style-text:active,.neeto-editor-bubble-menu button.neeto-ui-btn--style-text:hover{background-color:rgb(var(--neeto-ui-gray-600))!important;color:rgb(var(--neeto-ui-gray-200))!important}.neeto-editor-bubble-menu button.neeto-ui-btn--style-secondary{background-color:rgb(var(--neeto-ui-gray-400));min-width:-moz-fit-content;min-width:fit-content}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup{background-color:rgb(var(--neeto-ui-gray-700))}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn{background-color:inherit!important;color:rgb(var(--neeto-ui-gray-200))!important}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn.active,.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn:active,.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn:hover{background-color:rgb(var(--neeto-ui-gray-600))!important}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link{align-items:center;display:flex;gap:8px;justify-content:space-between;padding:6px;width:256px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input{background-color:transparent;color:rgb(var(--neeto-ui-gray-200));line-height:20px;outline:none;width:100%}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input::-moz-placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input::placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .ne-btn--icon-only{min-height:0;opacity:.8;padding:0}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .ne-btn--icon-only:hover{opacity:1}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table{align-items:center;display:flex;gap:6px;justify-content:space-between;max-width:256px;padding:4px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input{background-color:rgba(var(--neeto-ui-gray-400),.2);height:24px;line-height:20px;outline:none;width:60px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::-moz-placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__buttons{align-items:center;display:flex;gap:4px;justify-content:space-between}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__options{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow:scroll}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown-target{align-items:center;display:flex;font-size:var(--neeto-ui-text-xs);gap:4px;line-height:var(--neeto-ui-leading-normal);white-space:nowrap}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown{align-items:flex-start;display:flex;flex-direction:column}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item{font-size:var(--neeto-ui-text-xs);padding:8px 12px;text-align:left;width:100%}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item:first-child{border-top-left-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item:last-child{border-bottom-left-radius:var(--neeto-ui-rounded);border-bottom-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu-animate-shake{animation:shake 1s linear infinite alternate both}.neeto-editor__image-menu .neeto-ui-dropdown__popup{display:flex;min-width:0;min-width:auto}.neeto-editor__image-menu .neeto-ui-dropdown__popup .neeto-ui-btn .neeto-ui-btn__icon{height:18px!important;width:18px!important}.neeto-editor__image-menu-btn{border-radius:100%;position:absolute!important;right:6px;top:6px;z-index:1}";
+var css = ".neeto-editor-fixed-menu{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-gray-300));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-300));border-radius:0;border-radius:initial}.neeto-editor-fixed-menu--independant .neeto-editor-fixed-menu__wrapper{border-bottom:0!important}.neeto-editor-fixed-menu__item{border-radius:0}.neeto-editor-fixed-menu button.neeto-editor-fixed-menu__item{align-items:center;height:36px;justify-content:center;min-width:-moz-fit-content;min-width:fit-content;padding:0;width:36px;--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}.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.8px}.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-primary-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-primary-800))}.neeto-editor-fixed-menu__wrapper{align-items:center;border-bottom:thin solid rgb(var(--neeto-ui-gray-300));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:-24px;position:absolute;right:8px;z-index:10}.neeto-editor-fixed-menu__variables .neeto-editor-menu__item{background-color:rgb(var(--neeto-ui-gray-700));border-radius:var(--neeto-ui-rounded-sm);padding:4px}.neeto-editor-fixed-menu__variables .neeto-editor-menu__item.active,.neeto-editor-fixed-menu__variables .neeto-editor-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-600))}.neeto-editor-fixed-menu__right-options{display:flex}.neeto-editor-fixed-menu__emoji-dropdown{max-height:none!important}.neeto-editor-fixed-menu__separator{display:flex;height:28px;width:32px}.neeto-editor-fixed-menu__separator span{width:100%}.neeto-editor-fixed-menu__separator span:first-child{border-right:1px solid rgb(var(--neeto-ui-gray-200))}.neeto-editor-text-color-option__options-group{align-items:center;display:flex;gap:8px;margin:8px 4px}.neeto-editor-text-color-option__options-group__input{max-width:120px}.neeto-editor-text-color-option__options-group__reset-button{align-self:center}.react-colorful{width:100%!important}.neeto-editor-menu__item{align-items:center;border-radius:2px;cursor:pointer;display:flex;flex-direction:row;gap:4px;justify-content:center;padding:8px;transition:var(--neeto-ui-transition)}.neeto-editor-menu__item p{color:rgb(var(--neeto-ui-gray-600));font-size:var(--neeto-ui-text-xs);line-height:1;white-space:nowrap}.neeto-editor-menu__item.active,.neeto-editor-menu__item:hover{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-editor-menu__item:focus,.neeto-editor-menu__item:focus-visible{outline:rgb(var(--neeto-ui-gray-300)) auto 1px}.neeto-editor-menu__item input[type=color]{height:0;visibility:hidden;width:0}.neeto-editor-menu__item:disabled{background-color:rgb(var(--neeto-ui-gray-100));opacity:.5}.neeto-editor-link__item{align-items:flex-start;justify-content:flex-start}.neeto-editor-link__item,.neeto-editor-table__item{display:flex!important;flex-direction:row;gap:8px;padding:8px!important}.neeto-editor-table__item{min-width:210px}.neeto-editor-table__item input{max-width:60px!important}.neeto-editor-table__options-menu{display:flex;flex-direction:column;gap:8px;max-height:150px!important;overflow:scroll;padding:8px!important}.neeto-editor-font-size__wrapper{font-weight:var(--neeto-ui-font-normal)!important;padding-left:4px!important;padding-right:4px!important}.neeto-editor-bubble-menu{align-items:center;background:rgb(var(--neeto-ui-gray-800));border-radius:var(--neeto-ui-rounded);display:flex;flex-direction:row;gap:1px;justify-content:flex-start;padding:0 4px;position:relative}.neeto-editor-bubble-menu button.neeto-ui-btn--style-text{color:rgb(var(--neeto-ui-gray-200));min-width:-moz-fit-content;min-width:fit-content}.neeto-editor-bubble-menu button.neeto-ui-btn--style-text.active,.neeto-editor-bubble-menu button.neeto-ui-btn--style-text:active,.neeto-editor-bubble-menu button.neeto-ui-btn--style-text:hover{background-color:rgb(var(--neeto-ui-gray-600))!important;color:rgb(var(--neeto-ui-gray-200))!important}.neeto-editor-bubble-menu button.neeto-ui-btn--style-secondary{background-color:rgb(var(--neeto-ui-gray-400));min-width:-moz-fit-content;min-width:fit-content}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup{background-color:rgb(var(--neeto-ui-gray-700))}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn{background-color:inherit!important;color:rgb(var(--neeto-ui-gray-200))!important}.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn.active,.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn:active,.neeto-editor-bubble-menu .neeto-ui-dropdown__popup-menu-item-btn:hover{background-color:rgb(var(--neeto-ui-gray-600))!important}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link{align-items:center;display:flex;gap:8px;justify-content:space-between;padding:6px;width:256px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input{background-color:transparent;color:rgb(var(--neeto-ui-gray-200));line-height:20px;outline:none;width:100%}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input::-moz-placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .neeto-editor-bubble-menu-link__input::placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .ne-btn--icon-only{min-height:0;opacity:.8;padding:0}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__link .ne-btn--icon-only:hover{opacity:1}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table{align-items:center;display:flex;gap:6px;justify-content:space-between;max-width:256px;padding:4px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input{background-color:rgba(var(--neeto-ui-gray-400),.2);height:24px;line-height:20px;outline:none;width:60px}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::-moz-placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table input::placeholder{color:rgba(.4);color:rgba(var(--neeto-ui-white,.4))}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__buttons{align-items:center;display:flex;gap:4px;justify-content:space-between}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__table__options{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow:scroll}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown-target{align-items:center;display:flex;font-size:var(--neeto-ui-text-xs);gap:4px;line-height:var(--neeto-ui-leading-normal);white-space:nowrap}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown{align-items:flex-start;display:flex;flex-direction:column}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item{font-size:var(--neeto-ui-text-xs);padding:8px 12px;text-align:left;width:100%}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item:first-child{border-top-left-radius:var(--neeto-ui-rounded);border-top-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu .neeto-editor-bubble-menu__dropdown .neeto-editor-bubble-menu__dropdown-item:last-child{border-bottom-left-radius:var(--neeto-ui-rounded);border-bottom-right-radius:var(--neeto-ui-rounded)}.neeto-editor-bubble-menu-animate-shake{animation:shake 1s linear infinite alternate both}.neeto-editor__image-menu .neeto-ui-dropdown__popup{display:flex;min-width:0;min-width:auto}.neeto-editor__image-menu .neeto-ui-dropdown__popup .neeto-ui-btn .neeto-ui-btn__icon{height:18px!important;width:18px!important}.neeto-editor__image-menu-btn{border-radius:100%;position:absolute!important;right:6px;top:6px;z-index:1}";
 injectCss.n(css,{});
 
 var LinkOption = function LinkOption(_ref) {
@@ -13192,361 +14319,109 @@ var LinkOption = function LinkOption(_ref) {
   var handleKeyDown = function handleKeyDown(event) {
     if (event.key === "Escape") {
       handleClose();
-    } else if (event.key === "Enter") {
-      handleSubmit();
-    }
-  };
-  var handleSubmit = function handleSubmit() {
-    if (constants.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__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-bubble-menu__link",
-    onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React__default["default"].createElement("input", {
-    autoFocus: true,
-    className: "neeto-editor-bubble-menu-link__input",
-    "data-cy": "neeto-editor-link-input",
-    name: "url",
-    placeholder: t("neetoEditor.placeholders.linkInput"),
-    value: link,
-    onChange: function onChange(_ref2) {
-      var value = _ref2.target.value;
-      return setLink(value);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "neeto-editor-link-cancel-button",
-    icon: neetoIcons.Close,
-    size: "small",
-    style: "secondary",
-    onClick: handleReset
-  }));
-};
-
-var TableOption$1 = 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__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-bubble-menu__table"
-  }, /*#__PURE__*/React__default["default"].createElement("input", {
-    autoFocus: true,
-    "data-cy": "neeto-editor-fixed-menu-table-option-input",
-    min: "1",
-    placeholder: t("neetoEditor.placeholders.rows"),
-    type: "number",
-    value: rows,
-    onChange: utils$1.withEventTargetValue(setRows)
-  }), /*#__PURE__*/React__default["default"].createElement("input", {
-    "data-cy": "neeto-editor-bubble-menu-table-option-input",
-    min: "1",
-    placeholder: t("neetoEditor.placeholders.columns"),
-    type: "number",
-    value: columns,
-    onChange: utils$1.withEventTargetValue(setColumns)
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-bubble-menu__table__buttons"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
-    icon: neetoIcons.Check,
-    style: "secondary",
-    onClick: handleSubmit
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
-    icon: neetoIcons.Close,
-    style: "secondary",
-    onClick: handleClose
-  })));
-};
-
-var getTextMenuDropdownOptions = function getTextMenuDropdownOptions(_ref2) {
-  var editor = _ref2.editor;
-  return [{
-    optionName: "Heading 1",
-    active: editor.isActive("heading", {
-      level: 1
-    }),
-    command: function command() {
-      return editor.chain().focus().setNode("heading", {
-        level: 1
-      }).run();
-    }
-  }, {
-    optionName: "Heading 2",
-    active: editor.isActive("heading", {
-      level: 2
-    }),
-    command: function command() {
-      return editor.chain().focus().setNode("heading", {
-        level: 2
-      }).run();
-    }
-  }, {
-    optionName: "Heading 3",
-    active: editor.isActive("heading", {
-      level: 3
-    }),
-    command: function command() {
-      return editor.chain().focus().setNode("heading", {
-        level: 3
-      }).run();
-    }
-  }, {
-    optionName: "Ordered List",
-    active: editor.isActive("orderedList"),
-    command: function command() {
-      return editor.chain().focus().toggleOrderedList().run();
-    }
-  }, {
-    optionName: "Bulleted List",
-    active: editor.isActive("bulletList"),
-    command: function command() {
-      return editor.chain().focus().toggleBulletList().run();
-    }
-  }, {
-    optionName: "Text",
-    active: editor.isActive("paragraph"),
-    command: function command() {
-      return editor.chain().focus().setNode("paragraph").run();
-    }
-  }];
-};
-var getNodeType = function getNodeType(options) {
-  var _options$find;
-  return ((_options$find = options.find(ramda.prop("active"))) === null || _options$find === void 0 ? void 0 : _options$find.optionName) || "Text";
-};
-var renderOptionButton$1 = function renderOptionButton(_ref3) {
-  var tooltip = _ref3.tooltip,
-    Icon = _ref3.Icon,
-    command = _ref3.command,
-    active = _ref3.active,
-    optionName = _ref3.optionName,
-    highlight = _ref3.highlight;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends__default["default"]({
-    "data-cy": "neeto-editor-bubble-menu-".concat(optionName, "-option"),
-    icon: Icon,
-    key: optionName,
-    size: "small",
-    style: active ? "secondary" : "text",
-    tooltipProps: {
-      content: tooltip,
-      position: "bottom",
-      theme: "dark",
-      delay: [500]
-    },
-    onClick: command
-  }, generateFocusProps(highlight)));
-};
-
-var Mentions = function Mentions(_ref) {
-  var editor = _ref.editor,
-    mentions = _ref.mentions,
-    tooltipContent = _ref.tooltipContent;
-  var Menu = neetoui.Dropdown.Menu,
-    MenuItem = neetoui.Dropdown.MenuItem;
-  if (ramda.isEmpty(mentions)) return null;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    buttonStyle: "text",
-    "data-cy": "neeto-editor-mention-option",
-    icon: neetoIcons.Email,
-    strategy: "fixed",
-    buttonProps: {
-      tooltipProps: {
-        content: tooltipContent,
-        position: "bottom"
-      },
-      className: "neeto-editor-fixed-menu__item"
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, mentions.map(function (_ref2) {
-    var key = _ref2.key,
-      name = _ref2.name,
-      imageUrl = _ref2.imageUrl;
-    return /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-      "data-cy": "neeto-editor-mention-option-".concat(key),
-      key: key,
-      onClick: function onClick() {
-        return editor.commands.setMention({
-          id: key,
-          label: name
-        });
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Avatar, {
-      size: "small",
-      user: {
-        name: name,
-        imageUrl: imageUrl
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: "body2"
-    }, name));
-  })));
-};
-
-var EmojiOption = function EmojiOption(_ref) {
-  var editor = _ref.editor,
-    isActive = _ref.isActive,
-    setActive = _ref.setActive,
-    tooltipContent = _ref.tooltipContent;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    buttonStyle: "text",
-    closeOnSelect: false,
-    dropdownProps: {
-      classNames: "neeto-editor-fixed-menu__emoji-dropdown"
-    },
-    icon: neetoIcons.Smiley,
-    isOpen: isActive,
-    position: "bottom-start",
-    strategy: "fixed",
-    buttonProps: {
-      tabIndex: -1,
-      tooltipProps: {
-        content: tooltipContent,
-        position: "bottom"
-      },
-      className: "neeto-editor-fixed-menu__item"
-    },
-    onClick: function onClick() {
-      return setActive(function (active) {
-        return !active;
-      });
-    },
-    onClose: function onClose() {
-      return setActive(false);
+    } else if (event.key === "Enter") {
+      handleSubmit();
     }
-  }, /*#__PURE__*/React__default["default"].createElement(EmojiPickerMenu, {
-    editor: editor,
-    setActive: setActive
+  };
+  var handleSubmit = function handleSubmit() {
+    if (constants.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__*/React__default["default"].createElement("div", {
+    className: "neeto-editor-bubble-menu__link",
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    autoFocus: true,
+    className: "neeto-editor-bubble-menu-link__input",
+    "data-cy": "neeto-editor-link-input",
+    name: "url",
+    placeholder: t("neetoEditor.placeholders.linkInput"),
+    value: link,
+    onChange: function onChange(_ref2) {
+      var value = _ref2.target.value;
+      return setLink(value);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-editor-link-cancel-button",
+    icon: neetoIcons.Close,
+    size: "small",
+    style: "secondary",
+    onClick: handleReset
   }));
 };
 
-var TextColorOption = function TextColorOption(_ref) {
+var TableOption = function TableOption(_ref) {
   var editor = _ref.editor,
-    tooltipContent = _ref.tooltipContent;
-  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);
+    handleClose = _ref.handleClose;
   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);
+  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();
   };
-  reactUtils.useOnClickOutside(dropdownWrapperRef, function (event) {
-    if (isOpen) {
-      event.preventDefault();
-      editor.commands.focus();
-      setIsOpen(false);
-    }
-  });
-  React.useEffect(function () {
-    setColor(editor.getAttributes("textStyle").color);
-  }, [isOpen, editor.getAttributes("textStyle").color]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: dropdownWrapperRef
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    buttonStyle: isOpen || color ? "secondary" : "text",
-    icon: neetoIcons.Customize,
-    isOpen: isOpen,
-    buttonProps: {
-      tabIndex: -1,
-      tooltipProps: {
-        content: tooltipContent,
-        position: "bottom"
-      },
-      className: "neeto-editor-fixed-menu__item neeto-editor-text-color-option"
-    },
-    onClick: function onClick() {
-      setColor(editor.getAttributes("textStyle").color);
-      setIsOpen(ramda.not);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(reactColorful.HexColorPicker, {
-    color: color || "#000000",
-    onChange: setColor
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-text-color-option__options-group"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    className: "neeto-editor-bubble-menu__table"
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
     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__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-editor-fixed-menu-table-option-input",
+    min: "1",
+    placeholder: t("neetoEditor.placeholders.rows"),
+    type: "number",
+    value: rows,
+    onChange: utils$1.withEventTargetValue(setRows)
+  }), /*#__PURE__*/React__default["default"].createElement("input", {
+    "data-cy": "neeto-editor-bubble-menu-table-option-input",
+    min: "1",
+    placeholder: t("neetoEditor.placeholders.columns"),
+    type: "number",
+    value: columns,
+    onChange: utils$1.withEventTargetValue(setColumns)
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-editor-bubble-menu__table__buttons"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
     icon: neetoIcons.Check,
-    size: "small",
-    onClick: handleSave
+    style: "secondary",
+    onClick: handleSubmit
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
     icon: neetoIcons.Close,
-    size: "small",
-    style: "text",
-    onClick: function onClick() {
-      editor.commands.focus();
-      setIsOpen(false);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    icon: neetoIcons.Refresh,
-    size: "small",
-    style: "text",
-    tooltipProps: {
-      content: t("neetoEditor.common.resetToDefault"),
-      position: "top"
-    },
-    onClick: handleUnset
-  }))));
+    style: "secondary",
+    onClick: handleClose
+  })));
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty__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 createMenuOptions$1 = function createMenuOptions(_ref) {
   var tooltips = _ref.tooltips,
     editor = _ref.editor,
@@ -13698,7 +14573,7 @@ var createMenuOptions$1 = function createMenuOptions(_ref) {
     }]
   };
 };
-var buildMenuOptions$1 = function buildMenuOptions(_ref2) {
+var buildBubbleMenuOptions = function buildBubbleMenuOptions(_ref2) {
   var tooltips = _ref2.tooltips,
     editor = _ref2.editor,
     options = _ref2.options,
@@ -13720,54 +14595,83 @@ var buildMenuOptions$1 = function buildMenuOptions(_ref2) {
     })];
   }));
 };
-var renderOptionButton = function renderOptionButton(_ref3) {
-  var Icon = _ref3.Icon,
-    command = _ref3.command,
-    active = _ref3.active,
-    optionName = _ref3.optionName,
-    highlight = _ref3.highlight,
-    disabled = _ref3.disabled,
-    tooltip = _ref3.tooltip;
+var getTextMenuDropdownOptions = function getTextMenuDropdownOptions(_ref3) {
+  var editor = _ref3.editor;
+  return [{
+    optionName: "Heading 1",
+    active: editor.isActive("heading", {
+      level: 1
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 1
+      }).run();
+    }
+  }, {
+    optionName: "Heading 2",
+    active: editor.isActive("heading", {
+      level: 2
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 2
+      }).run();
+    }
+  }, {
+    optionName: "Heading 3",
+    active: editor.isActive("heading", {
+      level: 3
+    }),
+    command: function command() {
+      return editor.chain().focus().setNode("heading", {
+        level: 3
+      }).run();
+    }
+  }, {
+    optionName: "Ordered List",
+    active: editor.isActive("orderedList"),
+    command: function command() {
+      return editor.chain().focus().toggleOrderedList().run();
+    }
+  }, {
+    optionName: "Bulleted List",
+    active: editor.isActive("bulletList"),
+    command: function command() {
+      return editor.chain().focus().toggleBulletList().run();
+    }
+  }, {
+    optionName: "Text",
+    active: editor.isActive("paragraph"),
+    command: function command() {
+      return editor.chain().focus().setNode("paragraph").run();
+    }
+  }];
+};
+var getNodeType = function getNodeType(options) {
+  var _options$find;
+  return ((_options$find = options.find(ramda.prop("active"))) === null || _options$find === void 0 ? void 0 : _options$find.optionName) || "Text";
+};
+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__*/React__default["default"].createElement(neetoui.Button, _extends__default["default"]({
-    disabled: disabled,
-    className: "neeto-editor-fixed-menu__item",
-    "data-cy": "neeto-editor-fixed-menu-".concat(optionName, "-option"),
+    "data-cy": "neeto-editor-bubble-menu-".concat(optionName, "-option"),
     icon: Icon,
     key: optionName,
-    style: active ? "secondary" : "text",
-    tabIndex: "-1",
-    tooltipProps: {
-      content: tooltip,
-      position: "bottom"
-    },
-    onClick: command
-  }, generateFocusProps(highlight)));
-};
-var buildOptionsFromAddonCommands = function buildOptionsFromAddonCommands(_ref4) {
-  var editor = _ref4.editor,
-    commands = _ref4.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 getCursorPos = function getCursorPos(editor, to) {
-  return editor === null || editor === void 0 ? void 0 : editor.view.coordsAtPos(to);
+    size: "small",
+    style: active ? "secondary" : "text",
+    tooltipProps: {
+      content: tooltip,
+      position: "bottom",
+      theme: "dark",
+      delay: [500]
+    },
+    onClick: command
+  }, generateFocusProps(highlight)));
 };
 
 var Options = function Options(_ref) {
@@ -13798,7 +14702,7 @@ var Options = function Options(_ref) {
   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 _buildMenuOptions = buildMenuOptions$1({
+  var _buildBubbleMenuOptio = buildBubbleMenuOptions({
       editor: editor,
       options: options,
       setMediaUploader: setMediaUploader,
@@ -13807,9 +14711,9 @@ var Options = function Options(_ref) {
       setIsEmbedModalOpen: setIsEmbedModalOpen,
       setIsAddLinkActive: setIsLinkOptionActive
     }),
-    fontStyleOptions = _buildMenuOptions.font,
-    blockStyleOptions = _buildMenuOptions.block,
-    listStyleOptions = _buildMenuOptions.list;
+    fontStyleOptions = _buildBubbleMenuOptio.font,
+    blockStyleOptions = _buildBubbleMenuOptio.block,
+    listStyleOptions = _buildBubbleMenuOptio.list;
   var handleAnimateInvalidLink = function handleAnimateInvalidLink() {
     setIsInvalidLink(true);
     setTimeout(function () {
@@ -13826,7 +14730,7 @@ var Options = function Options(_ref) {
     });
   }
   if (isTableOptionActive) {
-    return /*#__PURE__*/React__default["default"].createElement(TableOption$1, {
+    return /*#__PURE__*/React__default["default"].createElement(TableOption, {
       editor: editor,
       handleClose: function handleClose() {
         return setIsTableOptionActive(false);
@@ -13845,7 +14749,7 @@ var Options = function Options(_ref) {
       key: optionName,
       onClick: command
     }, optionName);
-  }))), fontStyleOptions.map(renderOptionButton$1), blockStyleOptions.map(renderOptionButton$1), isTextColorOptionActive && /*#__PURE__*/React__default["default"].createElement(TextColorOption, {
+  }))), fontStyleOptions.map(renderOptionButton), blockStyleOptions.map(renderOptionButton), isTextColorOptionActive && /*#__PURE__*/React__default["default"].createElement(TextColorOption, {
     editor: editor,
     tooltipContent: tooltips.textColor || t("neetoEditor.menu.textColor")
   }), isEmojiActive && /*#__PURE__*/React__default["default"].createElement(EmojiOption, {
@@ -13853,7 +14757,7 @@ var Options = function Options(_ref) {
     isActive: isEmojiPickerActive,
     setActive: setIsEmojiPickerActive,
     tooltipContent: tooltips.emoji || t("neetoEditor.menu.emoji")
-  }), listStyleOptions.map(renderOptionButton$1), isLinkActive && renderOptionButton$1({
+  }), listStyleOptions.map(renderOptionButton), isLinkActive && renderOptionButton({
     Icon: neetoIcons.Link,
     command: function command() {
       return setIsLinkOptionActive(true);
@@ -13862,7 +14766,7 @@ var Options = function Options(_ref) {
     optionName: "link",
     highlight: false,
     tooltip: tooltips.link || t("neetoEditor.menu.link")
-  }), isTableActive && renderOptionButton$1({
+  }), isTableActive && renderOptionButton({
     Icon: neetoIcons.Column,
     command: function command() {
       return setIsTableOptionActive(true);
@@ -13945,93 +14849,6 @@ var Bubble = function Bubble(_ref) {
   }, children)));
 };
 
-var FONT_SIZE_OPTIONS = [{
-  label: i18n.t("neetoEditor.menu.heading1"),
-  value: 1,
-  key: "h1"
-}, {
-  label: i18n.t("neetoEditor.menu.heading2"),
-  value: 2,
-  key: "h2"
-}, {
-  label: i18n.t("neetoEditor.menu.heading3"),
-  value: 3,
-  key: "h3"
-}, {
-  label: i18n.t("neetoEditor.menu.heading4"),
-  value: 4,
-  key: "h4"
-}, {
-  label: i18n.t("neetoEditor.menu.heading5"),
-  value: 5,
-  key: "h5"
-}, {
-  label: i18n.t("neetoEditor.menu.normalText"),
-  value: 0,
-  key: "body2"
-}];
-
-var Menu$2 = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var FontSizeOption = function FontSizeOption(_ref) {
-  var editor = _ref.editor,
-    tooltipContent = _ref.tooltipContent;
-  var dropdownRef = React.useRef(null);
-  var isActive = function isActive(level) {
-    return editor.isActive("heading", {
-      level: level
-    });
-  };
-  var activeOption = FONT_SIZE_OPTIONS.find(function (_ref2) {
-    var value = _ref2.value;
-    return isActive(value);
-  }) || ramda.last(FONT_SIZE_OPTIONS);
-  var handleClick = function handleClick(level) {
-    return level ? editor.chain().focus().toggleHeading({
-      level: level
-    }).run() : editor.chain().focus().setNode("paragraph").run();
-  };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    autoWidth: true,
-    "data-cy": "neeto-editor-fixed-menu-font-size-option",
-    label: activeOption === null || activeOption === void 0 ? void 0 : activeOption.label,
-    placement: "bottom-start",
-    strategy: "fixed",
-    buttonProps: {
-      ref: dropdownRef,
-      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,
-        position: "bottom"
-      },
-      style: "text",
-      size: "small",
-      className: "neeto-editor-fixed-menu__item neeto-editor-font-size__wrapper"
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Menu$2, {
-    onKeyDown: function onKeyDown(event) {
-      var _editor$commands;
-      return event.key === "Escape" && ((_editor$commands = editor.commands) === null || _editor$commands === void 0 ? void 0 : _editor$commands.focus());
-    }
-  }, FONT_SIZE_OPTIONS.map(function (_ref3) {
-    var label = _ref3.label,
-      value = _ref3.value,
-      key = _ref3.key;
-    return /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-      "data-cy": "neeto-editor-fixed-menu-font-size-option-".concat(key),
-      key: value,
-      onClick: function onClick() {
-        return handleClick(value);
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: key
-    }, label));
-  })));
-};
-
 var LinkAddPopOver = function LinkAddPopOver(_ref) {
   var isAddLinkActive = _ref.isAddLinkActive,
     setIsAddLinkActive = _ref.setIsAddLinkActive,
@@ -14068,7 +14885,7 @@ var LinkAddPopOver = function LinkAddPopOver(_ref) {
     _useState12 = _slicedToArray__default["default"](_useState11, 2),
     arrowPosition = _useState12[0],
     setArrowPosition = _useState12[1];
-  var popOverRef = React.useRef(null);
+  var popoverRef = React.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var isLinkTextPresent = !neetoCist.isNotPresent(linkText);
@@ -14117,26 +14934,13 @@ var LinkAddPopOver = function LinkAddPopOver(_ref) {
     }
   };
   var updatePopoverPosition = function updatePopoverPosition() {
-    var _popOverRef$current;
-    if (!popOverRef.current) return;
-    var newPos = editor.view.coordsAtPos(editor.view.state.selection.$to.pos);
-    setArrowPosition({
-      top: "".concat(newPos.top + 20, "px"),
-      left: "".concat(newPos.left - 10, "px")
-    });
-    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;
-    var adjustedLeft = newPos !== null && newPos !== void 0 && newPos.left ? Math.min(newPos.left - 50, maxLeft) : 0;
-    var adjustedTop = newPos !== null && newPos !== void 0 && newPos.top ? Math.min(newPos.top - 22, maxTop) : 0;
-    setPopoverPosition({
-      top: "".concat(adjustedTop, "px"),
-      left: "".concat(adjustedLeft, "px")
-    });
+    var _getLinkPopoverPositi = getLinkPopoverPosition(editor, popoverRef),
+      arrowPosition = _getLinkPopoverPositi.arrowPosition,
+      popoverPosition = _getLinkPopoverPositi.popoverPosition;
+    setPopoverPosition(popoverPosition);
+    setArrowPosition(arrowPosition);
   };
-  reactUtils.useOnClickOutside(popOverRef, removePopover);
+  reactUtils.useOnClickOutside(popoverRef, removePopover);
   React.useEffect(function () {
     if (editor && isAddLinkActive) {
       updatePopoverPosition();
@@ -14149,15 +14953,15 @@ var LinkAddPopOver = function LinkAddPopOver(_ref) {
     };
   }, []);
   return isAddLinkActive ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "ne-link-arrow",
+    className: "ne-link-arrow fade-in",
     style: {
       top: arrowPosition.top,
       left: arrowPosition.left
     }
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "ne-link-popover",
+    className: "ne-link-popover fade-in",
     id: "ne-link-add-popover",
-    ref: popOverRef,
+    ref: popoverRef,
     style: popoverStyle
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
     required: true,
@@ -14221,85 +15025,52 @@ var LinkAddPopOver = function LinkAddPopOver(_ref) {
   })))), document.body) : null;
 };
 
-var Menu$1 = neetoui.Dropdown.Menu;
-var TableOption = function TableOption(_ref) {
-  var editor = _ref.editor,
-    tooltipContent = _ref.tooltipContent;
-  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 _excluded$3 = ["type"];
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty__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 Menu$1 = neetoui.Dropdown.Menu,
+  MenuItem = neetoui.Dropdown.MenuItem;
+var MoreMenu = function MoreMenu(_ref) {
+  var groups = _ref.groups,
+    editor = _ref.editor;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    isOpen: isOpen,
-    buttonStyle: isOpen ? "secondary" : "text",
-    closeOnSelect: false,
-    "data-cy": "neeto-editor-fixed-menu-link-option",
-    icon: neetoIcons.Column,
-    position: "bottom",
     buttonProps: {
-      tabIndex: -1,
-      tooltipProps: {
-        content: tooltipContent,
-        position: "bottom"
-      },
-      className: "neeto-editor-fixed-menu__item"
-    },
-    onClick: function onClick() {
-      return setIsOpen(function (isOpen) {
-        return !isOpen;
-      });
+      className: "flex-shrink-0"
     },
-    onClose: handleClose
-  }, /*#__PURE__*/React__default["default"].createElement(Menu$1, {
-    className: "neeto-editor-table__item"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
-    autoFocus: true,
-    "data-cy": "neeto-editor-fixed-menu-table-option-input",
-    min: "1",
-    placeholder: t("neetoEditor.placeholders.rows"),
-    size: "small",
-    type: "number",
-    value: rows,
-    onChange: utils$1.withEventTargetValue(setRows)
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
-    "data-cy": "neeto-editor-fixed-menu-table-option-input",
-    min: "1",
-    placeholder: t("neetoEditor.placeholders.rows"),
-    size: "small",
-    type: "number",
-    value: columns,
-    onChange: utils$1.withEventTargetValue(setColumns)
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    "data-cy": "neeto-editor-fixed-menu-table-option-create-button",
-    label: t("neetoEditor.common.create"),
-    size: "small",
-    onClick: handleSubmit
+    buttonStyle: "text",
+    icon: neetoIcons.MenuHorizontal,
+    strategy: "fixed"
+  }, /*#__PURE__*/React__default["default"].createElement(Menu$1, null, 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__*/React__default["default"].createElement(MenuItem.Button, _extends__default["default"]({
+          "data-cy": "neeto-editor-fixed-menu-".concat(props.optionName, "-option"),
+          isActive: editor.isActive(props.optionName),
+          key: props.optionName,
+          tabIndex: "-1",
+          onClick: props.command
+        }, _objectSpread$4(_objectSpread$4(_objectSpread$4({}, generateFocusProps(props.highlight)), props), {}, {
+          editor: editor
+        })), /*#__PURE__*/React__default["default"].createElement(Icon, null), " ", props.label);
+      }
+      return /*#__PURE__*/React__default["default"].createElement(Component, _extends__default["default"]({
+        key: props.optionName
+      }, _objectSpread$4(_objectSpread$4({}, props), {}, {
+        editor: editor
+      }, generateFocusProps(props.highlight)), {
+        isSecondaryMenu: true
+      }));
+    });
   })));
 };
 
+var _excluded$2 = ["type"];
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty__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 Fixed = function Fixed(_ref) {
   var editor = _ref.editor,
     options = _ref.options,
@@ -14312,8 +15083,6 @@ var Fixed = function Fixed(_ref) {
     unsplashApiKey = _ref.unsplashApiKey,
     _ref$addonCommands = _ref.addonCommands,
     addonCommands = _ref$addonCommands === void 0 ? [] : _ref$addonCommands,
-    _ref$isMenuCollapsibl = _ref.isMenuCollapsible,
-    isMenuCollapsible = _ref$isMenuCollapsibl === void 0 ? false : _ref$isMenuCollapsibl,
     _ref$isIndependant = _ref.isIndependant,
     isIndependant = _ref$isIndependant === void 0 ? true : _ref$isIndependant,
     className = _ref.className,
@@ -14330,17 +15099,22 @@ var Fixed = function Fixed(_ref) {
     setFocusedButtonIndex = _useState2[1];
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    isMenuExpanded = _useState4[0],
-    setIsMenuExpanded = _useState4[1];
+    isEmbedModalOpen = _useState4[0],
+    setIsEmbedModalOpen = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    isEmbedModalOpen = _useState6[0],
-    setIsEmbedModalOpen = _useState6[1];
-  var _useState7 = React.useState(false),
+    isAddLinkActive = _useState6[0],
+    setIsAddLinkActive = _useState6[1];
+  var _useState7 = React.useState([]),
     _useState8 = _slicedToArray__default["default"](_useState7, 2),
-    isAddLinkActive = _useState8[0],
-    setIsAddLinkActive = _useState8[1];
+    menuItems = _useState8[0],
+    setMenuItems = _useState8[1];
+  var _useState9 = React.useState([]),
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    moreMenuItems = _useState10[0],
+    setMoreMenuItems = _useState10[1];
   var menuRef = React.useRef(null);
+  var menuContainerRef = React.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var handleArrowNavigation = function handleArrowNavigation(event) {
@@ -14373,36 +15147,43 @@ var Fixed = function Fixed(_ref) {
       });
     };
   }, [menuButtons]);
-  if (!editor) {
-    return null;
-  }
-  var _buildMenuOptions = buildMenuOptions$1({
+  var menuGroups = React.useMemo(function () {
+    return buildMenuOptions$1({
       tooltips: tooltips,
       editor: editor,
       options: options,
       setMediaUploader: setMediaUploader,
       attachmentProps: attachmentProps,
       setIsEmbedModalOpen: setIsEmbedModalOpen,
-      setIsAddLinkActive: setIsAddLinkActive
-    }),
-    fontStyleOptions = _buildMenuOptions.font,
-    blockStyleOptions = _buildMenuOptions.block,
-    listStyleOptions = _buildMenuOptions.list,
-    miscOptions = _buildMenuOptions.misc,
-    rightOptions = _buildMenuOptions.right;
-  var fontSizeOptions = options.filter(function (option) {
-    return option.match(/^h[1-6]$/);
-  });
-  var isFontSizeActive = neetoCist.isNotEmpty(fontSizeOptions);
-  var isEmojiActive = options.includes(constants.EDITOR_OPTIONS.EMOJI);
-  var isTableActive = options.includes(constants.EDITOR_OPTIONS.TABLE);
-  var isTextColorOptionActive = options.includes(constants.EDITOR_OPTIONS.TEXT_COLOR);
+      setIsAddLinkActive: setIsAddLinkActive,
+      mentions: mentions,
+      addonCommands: addonCommands,
+      setIsEmojiPickerActive: setIsEmojiPickerActive,
+      isEmojiPickerActive: isEmojiPickerActive
+    });
+  }, [editor, 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);
+  }, [menuGroups]);
+  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, handleResize, menuGroups]);
+  if (!editor) return null;
   var isEmbedOptionActive = options.includes(constants.EDITOR_OPTIONS.VIDEO_EMBED);
-  var isMediaUploaderActive = options.includes(constants.EDITOR_OPTIONS.IMAGE_UPLOAD );
-  var addonCommandOptions = buildOptionsFromAddonCommands({
-    editor: editor,
-    commands: addonCommands
-  });
+  var isMediaUploaderActive = options.includes(constants.EDITOR_OPTIONS.IMAGE_UPLOAD) || options.includes(constants.EDITOR_OPTIONS.VIDEO_UPLOAD);
   var handleVariableClick = function handleVariableClick(item) {
     var category = item.category,
       key = item.key;
@@ -14412,7 +15193,7 @@ var Fixed = function Fixed(_ref) {
     }).run();
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: menuRef,
+    ref: menuContainerRef,
     className: classnames__default["default"]("neeto-editor-fixed-menu", _defineProperty__default["default"]({
       "neeto-editor-fixed-menu--independant": isIndependant
     }, className, className))
@@ -14420,39 +15201,41 @@ var Fixed = function Fixed(_ref) {
     className: "neeto-editor-fixed-menu__wrapper",
     "data-cy": "neeto-editor-fixed-menu-wrapper",
     ref: menuRef
-  }, neetoCist.isNotEmpty(rightOptions) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-fixed-menu__right-options"
-  }, rightOptions.map(renderOptionButton)), isFontSizeActive && /*#__PURE__*/React__default["default"].createElement(FontSizeOption, {
+  }, 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__*/React__default["default"].createElement(Component, _extends__default["default"]({
+        key: props.optionName
+      }, _objectSpread$3(_objectSpread$3({}, props), {}, {
+        editor: editor
+      })));
+    });
+  }), neetoCist.isNotEmpty(moreMenuItems) && /*#__PURE__*/React__default["default"].createElement(MoreMenu, {
     editor: editor,
-    tooltipContent: tooltips.fontSize || t("neetoEditor.menu.fontSize")
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-fixed-menu__wrapper__button-group"
-  }, fontStyleOptions.map(renderOptionButton)), isAddLinkActive && /*#__PURE__*/React__default["default"].createElement(LinkAddPopOver, {
+    groups: moreMenuItems
+  }), children), !ramda.isEmpty(variables) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-editor-fixed-menu__variables",
+    "data-cy": "neeto-editor-fixed-menu-variables"
+  }, /*#__PURE__*/React__default["default"].createElement(DynamicVariables__default["default"], {
+    variables: variables,
+    dropdownProps: {
+      buttonSize: "small",
+      buttonProps: {
+        tooltipProps: {
+          content: t("neetoEditor.menu.dynamicVariables"),
+          position: "bottom"
+        }
+      }
+    },
+    onVariableClick: handleVariableClick
+  })), isAddLinkActive && /*#__PURE__*/React__default["default"].createElement(LinkAddPopOver, {
     editor: editor,
     isAddLinkActive: isAddLinkActive,
     openLinkInNewTab: openLinkInNewTab,
     setIsAddLinkActive: setIsAddLinkActive
-  }), (isMenuExpanded || ramda.not(isMenuCollapsible)) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("neeto-editor-fixed-menu__wrapper--collapsible", {
-      "neeto-editor-fixed-menu__wrapper--collapsible--fade": isMenuCollapsible
-    })
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-fixed-menu__wrapper__button-group"
-  }, listStyleOptions.map(renderOptionButton)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-fixed-menu__wrapper__button-group"
-  }, blockStyleOptions.map(renderOptionButton)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-fixed-menu__wrapper__button-group"
-  }, isTableActive && /*#__PURE__*/React__default["default"].createElement(TableOption, {
-    editor: editor,
-    tooltipContent: tooltips.table || t("neetoEditor.menu.table")
-  }), miscOptions.map(renderOptionButton), isTextColorOptionActive && /*#__PURE__*/React__default["default"].createElement(TextColorOption, {
-    editor: editor,
-    tooltipContent: tooltips.textColor || t("neetoEditor.menu.textColor")
-  }), isEmojiActive && /*#__PURE__*/React__default["default"].createElement(EmojiOption, {
-    editor: editor,
-    isActive: isEmojiPickerActive,
-    setActive: setIsEmojiPickerActive,
-    tooltipContent: tooltips.emoji || t("neetoEditor.menu.emoji")
   }), isMediaUploaderActive && /*#__PURE__*/React__default["default"].createElement(MediaUploader, {
     editor: editor,
     mediaUploader: mediaUploader,
@@ -14467,38 +15250,7 @@ var Fixed = function Fixed(_ref) {
     editor: editor,
     isEmbedModalOpen: isEmbedModalOpen,
     setIsEmbedModalOpen: setIsEmbedModalOpen
-  }), /*#__PURE__*/React__default["default"].createElement(Mentions, {
-    editor: editor,
-    mentions: mentions,
-    tooltipContent: tooltips.mention || t("neetoEditor.menu.mention")
-  }), addonCommandOptions.map(renderOptionButton)), children), isMenuCollapsible && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "neeto-editor-fixed-menu__item",
-    "data-cy": "neeto-editor-fixed-menu-arrow",
-    icon: isMenuExpanded ? neetoIcons.Left : neetoIcons.Right,
-    style: "text",
-    tooltipProps: {
-      content: isMenuExpanded ? t("neetoEditor.menu.collapse") : t("neetoEditor.menu.expand"),
-      position: "bottom"
-    },
-    onClick: function onClick() {
-      return setIsMenuExpanded(ramda.not);
-    }
-  })), !ramda.isEmpty(variables) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-editor-fixed-menu__variables",
-    "data-cy": "neeto-editor-fixed-menu-variables"
-  }, /*#__PURE__*/React__default["default"].createElement(DynamicVariables__default["default"], {
-    variables: variables,
-    dropdownProps: {
-      buttonSize: "small",
-      buttonProps: {
-        tooltipProps: {
-          content: t("neetoEditor.menu.dynamicVariables"),
-          position: "bottom"
-        }
-      }
-    },
-    onVariableClick: handleVariableClick
-  })));
+  }));
 };
 
 var _excluded$1 = ["icon", "onClick", "disabled", "className", "tooltipProps"];
@@ -15002,20 +15754,18 @@ exports.findParentNodeClosestToPos = findParentNodeClosestToPos;
 exports.getAttributes = getAttributes;
 exports.getChangedRanges = getChangedRanges;
 exports.getExtensionField = getExtensionField;
+exports.getLinkPopoverPosition = getLinkPopoverPosition;
 exports.getMarkAttributes = getMarkAttributes;
 exports.getMarkRange = getMarkRange;
 exports.getMarkType = getMarkType;
 exports.getMarksBetween = getMarksBetween;
-exports.highlightFocussedNode = highlightFocussedNode;
-exports.isMacOS = isMacOS;
 exports.keydownHandler = keydownHandler;
 exports.markInputRule = markInputRule;
 exports.markPasteRule = markPasteRule;
 exports.mergeAttributes = mergeAttributes;
 exports.nodeInputRule = nodeInputRule;
-exports.resetFocussedNode = resetFocussedNode;
 exports.textblockTypeInputRule = textblockTypeInputRule;
 exports.useEditor = useEditor;
 exports.validateUrl = validateUrl;
 exports.wrappingInputRule = wrappingInputRule;
-//# sourceMappingURL=chunk-e1b45d60.cjs.js.map
+//# sourceMappingURL=chunk-b40b9bbf.cjs.js.map