@bigbinary/neeto-editor 1.36.1 → 1.36.2-beta1

package/dist/{chunk-e82a361e.js → chunk-cde7e5cb.js}

@@ -2,20 +2,21 @@ import _extends$1 from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo } from 'react';
-import { isEmpty, concat, isNil, not, prop, fromPairs, assoc, last } from 'ramda';
+import React__default, { forwardRef, createContext, useRef, useState, useEffect, useContext, useMemo, useCallback } from 'react';
+import { isEmpty, last, not, prop, assoc, concat, isNil, fromPairs } from 'ramda';
 import { n } from './chunk-15c449f1.js';
 import { T as TextSelection, N as NodeSelection, S as Selection, c as Slice, d as dropPoint, j as DOMSerializer, F as Fragment, k as DOMParser, A as AllSelection, l as Mark$1, P as Plugin, m as liftTarget, r as replaceStep, R as ReplaceStep, n as canJoin, o as joinPoint, p as canSplit, q as ReplaceAroundStep, u as findWrapping, w as NodeRange, b as PluginKey, f as Transform, E as EditorState, x as Schema, v as validateAndFormatUrl, D as DEFAULT_EDITOR_OPTIONS } from './chunk-e876ad10.js';
 import tippy, { roundArrow } from 'tippy.js';
 import ReactDOM, { flushSync, createPortal } from 'react-dom';
 import classnames from 'classnames';
-import { Y as YOUTUBE_URL_REGEXP, V as VIMEO_URL_REGEXP, L as LOOM_URL_REGEXP, N as NEETO_RECORD_URL_REGEXP, a as UNSPLASH_BASE_URL, U as URL_REGEXP, E as EDITOR_OPTIONS } from './chunk-edd8b9fe.js';
-import { removeById, isNotPresent, isNotEmpty, noop, hyphenate, findBy } from '@bigbinary/neeto-cist';
+import { Y as YOUTUBE_URL_REGEXP, V as VIMEO_URL_REGEXP, L as LOOM_URL_REGEXP, N as NEETO_RECORD_URL_REGEXP, E as EDITOR_OPTIONS, a as UNSPLASH_BASE_URL, U as URL_REGEXP } from './chunk-edd8b9fe.js';
+import { isNotEmpty, removeById, isNotPresent, noop, hyphenate, findBy } from '@bigbinary/neeto-cist';
 import 'tippy.js/dist/svg-arrow.css';
-import { Close, ImageUpload, Check, Email, Smiley, Customize, Refresh, TextBold, TextItalic, Underline, Link, TextCross, Highlight, Quote, Code, CodeBlock, ListDot, ListNumber, Attachment, Video, MediaVideo, Undo, Redo, Column, Left, Right, File } from '@bigbinary/neeto-icons';
-import { Modal, Typography, Input, Button as Button$1, Toastr, Spinner, Tab, Dropdown as Dropdown$1, Avatar, Checkbox, Tooltip } from '@bigbinary/neetoui';
+import { Smiley, Column, Customize, Check, Close, Refresh, Email, Undo, Redo, TextBold, TextItalic, Underline, Link, TextCross, Highlight, ListDot, ListNumber, Quote, Code, CodeBlock, Attachment, ImageUpload, Video, MediaVideo, MenuHorizontal, File } from '@bigbinary/neeto-icons';
+import { Modal, Typography, Input, Button as Button$1, Dropdown as Dropdown$1, Avatar, Toastr, Spinner, Tab, Checkbox, Tooltip } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
 import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
+import i18n, { t as t$1 } from 'i18next';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _classCallCheck$1 from '@babel/runtime/helpers/classCallCheck';
 import _createClass$1 from '@babel/runtime/helpers/createClass';
@@ -27,11 +28,10 @@ import { Picker } from 'emoji-mart';
 import axios from 'axios';
 import { useOnClickOutside } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { HexColorPicker } from 'react-colorful';
-import i18n, { t as t$1 } from 'i18next';
+import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import DynamicVariables from '@bigbinary/neeto-molecules/DynamicVariables';
 import { c as DEFAULT_IMAGE_UPPY_CONFIG, e as DEFAULT_VIDEO_UPPY_CONFIG, u as useUppyUploader, D as DropTarget, A as ALLOWED_IMAGE_TYPES, f as ALLOWED_VIDEO_TYPES, g as convertToFileSize, p as propTypesExports, h as getTabs } from './chunk-3aa8ee50.js';
 import { a as getAugmentedNamespace } from './chunk-65f73e5a.js';
-import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import Tippy from '@tippyjs/react';
 
 const domIndex = function (node) {
@@ -6645,6 +6645,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;
@@ -6811,6 +6816,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);
@@ -7055,6 +7067,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);
@@ -7156,6 +7174,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;
 }
@@ -7172,6 +7196,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;
@@ -7379,6 +7409,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;
@@ -7577,57 +7611,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));
@@ -7638,6 +7629,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 => {
@@ -7655,6 +7651,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) => {
@@ -7669,6 +7670,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 = {
@@ -7688,6 +7693,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.
@@ -7750,9 +7759,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);
@@ -7785,6 +7802,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
@@ -7818,6 +7891,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';
@@ -7855,6 +7932,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,
@@ -7881,19 +7959,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,
@@ -7908,16 +7992,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)
@@ -8300,15 +8384,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 Fragment.fromArray(content.map(item => schema.nodeFromJSON(item)));
             }
             return schema.nodeFromJSON(content);
@@ -8318,7 +8413,7 @@ function createNodeFromContent(content, schema, options) {
             return createNodeFromContent('', schema, options);
         }
     }
-    if (typeof content === 'string') {
+    if (isTextContent) {
         const parser = DOMParser.fromSchema(schema);
         return options.slice
             ? parser.parseSlice(elementFromString(content), options.parseOptions).content
@@ -8618,6 +8713,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';
@@ -8715,6 +8816,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 });
 }
@@ -8752,6 +8860,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 Transform(oldDoc);
@@ -8763,6 +8874,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);
@@ -8773,6 +8889,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) => {
@@ -8788,6 +8910,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 = [];
@@ -8811,6 +8937,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);
@@ -8825,6 +8960,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);
 }
@@ -8837,6 +8980,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,
@@ -8859,6 +9011,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') {
@@ -8980,6 +9138,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)
@@ -9803,7 +9968,12 @@ const Keymap = Extension.create({
                 const isAtStart = (parentIsIsolating && $parentPos.parent.childCount === 1)
                     ? parentPos === $anchor.pos
                     : 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();
@@ -10055,28 +10225,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;
     }
@@ -10563,6 +10735,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({
@@ -10606,6 +10779,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({
@@ -10644,6 +10818,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({
@@ -10674,6 +10849,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({
@@ -10713,6 +10889,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';
@@ -10796,6 +10976,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';
@@ -10863,6 +11047,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;
@@ -11053,6 +11241,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({
@@ -11274,6 +11463,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() {
@@ -11302,41 +11495,20 @@ Extension.create({
     },
 });
 
-const BubbleMenu = (props) => {
-    const [element, setElement] = useState(null);
-    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.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.createElement(React__default.Fragment, null, Array.from(renderers).map(([key, renderer]) => {
+    return (React__default.createElement(React__default.Fragment, null, Object.entries(renderers).map(([key, renderer]) => {
         return ReactDOM.createPortal(renderer.reactElement, renderer.element, key);
     })));
 };
@@ -11344,8 +11516,9 @@ class PureEditorContent extends React__default.Component {
     constructor(props) {
         super(props);
         this.editorContentRef = React__default.createRef();
+        this.initialized = false;
         this.state = {
-            renderers: new Map(),
+            renderers: {},
         };
     }
     componentDidMount() {
@@ -11367,13 +11540,46 @@ class PureEditorContent extends React__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) {
+            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: {},
@@ -11390,49 +11596,213 @@ class PureEditorContent extends React__default.Component {
         });
     }
     render() {
-        const { editor, ...rest } = this.props;
+        const { editor, innerRef, ...rest } = this.props;
         return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { ref: this.editorContentRef, ...rest }),
+            React__default.createElement("div", { ref: mergeRefs(innerRef, this.editorContentRef), ...rest }),
             React__default.createElement(Portals, { renderers: this.state.renderers })));
     }
 }
-const EditorContent = React__default.memo(PureEditorContent);
-
-const ReactNodeViewContext = createContext({
-    onDragStart: undefined,
+// EditorContent should be re-created whenever the Editor instance changes
+const EditorContentWithKey = forwardRef((props, ref) => {
+    const key = React__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.createElement(PureEditorContent, {
+        key,
+        innerRef: ref,
+        ...props,
+    });
 });
-const useReactNodeView = () => useContext(ReactNodeViewContext);
-
-const NodeViewContent = props => {
-    const Tag = props.as || 'div';
-    const { nodeViewContentRef } = useReactNodeView();
-    return (React__default.createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
-            whiteSpace: 'pre-wrap',
-            ...props.style,
-        } }));
-};
+const EditorContent = React__default.memo(EditorContentWithKey);
 
-const NodeViewWrapper = React__default.forwardRef((props, ref) => {
-    const { onDragStart } = useReactNodeView();
-    const Tag = props.as || 'div';
-    return (React__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;
+    }
+}
 
-function isClassComponent(Component) {
-    return !!(typeof Component === 'function'
-        && Component.prototype
-        && Component.prototype.isReactComponent);
+/**
+ * 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 = useRef(null);
+    const [, forceUpdate] = useState({});
+    const { onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate, } = options;
+    const onBeforeCreateRef = useRef(onBeforeCreate);
+    const onBlurRef = useRef(onBlur);
+    const onCreateRef = useRef(onCreate);
+    const onDestroyRef = useRef(onDestroy);
+    const onFocusRef = useRef(onFocus);
+    const onSelectionUpdateRef = useRef(onSelectionUpdate);
+    const onTransactionRef = useRef(onTransaction);
+    const onUpdateRef = useRef(onUpdate);
+    // This effect will handle updating the editor instance
+    // when the event handlers change.
+    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]);
+    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 = createContext({
+    editor: null,
+});
+EditorContext.Consumer;
+const useCurrentEditor = () => useContext(EditorContext);
+
+const BubbleMenu = (props) => {
+    const [element, setElement] = useState(null);
+    const { editor: currentEditor } = useCurrentEditor();
+    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.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+};
+
+const ReactNodeViewContext = createContext({
+    onDragStart: undefined,
+});
+const useReactNodeView = () => useContext(ReactNodeViewContext);
+
+const NodeViewContent = props => {
+    const Tag = props.as || 'div';
+    const { nodeViewContentRef } = useReactNodeView();
+    return (React__default.createElement(Tag, { ...props, ref: nodeViewContentRef, "data-node-view-content": "", style: {
+            whiteSpace: 'pre-wrap',
+            ...props.style,
+        } }));
+};
+
+const NodeViewWrapper = React__default.forwardRef((props, ref) => {
+    const { onDragStart } = useReactNodeView();
+    const Tag = props.as || 'div';
+    return (React__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;
@@ -11443,9 +11813,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)) {
@@ -11454,16 +11830,7 @@ class ReactRenderer {
             };
         }
         this.reactElement = React__default.createElement(Component, { ...props });
-        queueMicrotask(() => {
-            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 = {
@@ -11473,18 +11840,8 @@ class ReactRenderer {
         this.render();
     }
     destroy() {
-        queueMicrotask(() => {
-            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);
     }
 }
 
@@ -11514,13 +11871,20 @@ class ReactNodeView extends NodeView {
                     element.appendChild(this.contentDOMElement);
                 }
             };
-            return (React__default.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
-                React__default.createElement(Component, { ...componentProps })));
+            return (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(ReactNodeViewContext.Provider, { value: { onDragStart, nodeViewContentRef } },
+                    React__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
@@ -11532,11 +11896,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() {
@@ -11553,6 +11920,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);
@@ -11585,14 +11967,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;
     }
 }
@@ -11608,34 +11993,6 @@ function ReactNodeViewRenderer(component, options) {
     };
 }
 
-function useForceUpdate() {
-    const [, setValue] = useState(0);
-    return () => setValue(value => value + 1);
-}
-const useEditor = (options = {}, deps = []) => {
-    const [editor, setEditor] = useState(null);
-    const forceUpdate = useForceUpdate();
-    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;
 };
@@ -11749,8 +12106,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(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(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(o), _possibleConstructorReturn$1(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var EmojiPickerMenu = /*#__PURE__*/function (_React$Component) {
@@ -11802,7 +12159,7 @@ var EmojiPickerMenu = /*#__PURE__*/function (_React$Component) {
   return _createClass$1(EmojiPickerMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      new Picker(_objectSpread$5(_objectSpread$5({}, this.props), {}, {
+      new Picker(_objectSpread$7(_objectSpread$7({}, this.props), {}, {
         onEmojiSelect: this.handleSelect,
         style: {
           maxWidth: "100%"
@@ -11848,55 +12205,825 @@ 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(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 = 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.createElement(Button$1, _extends$1({
+    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 = Dropdown$1.MenuItem;
+var SecondaryMenuTarget = function SecondaryMenuTarget(_ref) {
+  var Icon = _ref.icon,
+    label = _ref.label;
+  return /*#__PURE__*/React__default.createElement(MenuItem$3.Button, null, /*#__PURE__*/React__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.createElement(Dropdown$1, {
+    buttonStyle: "text",
+    closeOnSelect: false,
+    dropdownProps: {
+      classNames: "neeto-editor-fixed-menu__emoji-dropdown"
+    },
+    icon: 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.createElement(SecondaryMenuTarget, {
+      label: label,
+      icon: Smiley
+    }),
+    onClose: function onClose() {
+      return setActive(false);
+    },
+    onClick: function onClick(e) {
+      setActive(function (active) {
+        return !active;
       });
+      isSecondaryMenu && e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement(EmojiPickerMenu, {
+    editor: editor,
+    setActive: setActive
+  }));
+};
+
+var Menu$4 = Dropdown$1.Menu,
+  MenuItem$2 = Dropdown$1.MenuItem;
+var FontSizeOption = function FontSizeOption(_ref) {
+  var editor = _ref.editor,
+    tooltipContent = _ref.tooltipContent,
+    label = _ref.label;
+  var dropdownRef = 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 removeById(id, prevState);
-    });
+  var activeOption = FONT_SIZE_OPTIONS.find(function (_ref2) {
+    var value = _ref2.value;
+    return isActive(value);
+  }) || last(FONT_SIZE_OPTIONS);
+  var handleClick = function handleClick(level) {
+    return level ? editor.chain().focus().toggleHeading({
+      level: level
+    }).run() : editor.chain().focus().setNode("paragraph").run();
   };
-  useEffect(function () {
-    uppy.on("upload-progress", handleUploadProgress);
-    return function () {
-      uppy.off("upload-progress", handleUploadProgress);
-    };
-  }, [uppy]);
-  return /*#__PURE__*/React__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.createElement("div", {
-      className: "ne-media-uploader__media",
-      key: id
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "ne-media-uploader__media__info"
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      style: "body2"
-    }, filename), /*#__PURE__*/React__default.createElement(Button$1, {
-      "data-cy": "neeto-editor-image-upload-cancel-button",
-      icon: Close,
-      size: "small",
+  return /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    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.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.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);
+      }
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      style: key
+    }, label));
+  })));
+};
+
+var Menu$3 = Dropdown$1.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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(3),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rows = _useState4[0],
+    setRows = _useState4[1];
+  var _useState5 = useState(3),
+    _useState6 = _slicedToArray(_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(not);
+  };
+  return /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    isOpen: isOpen,
+    buttonStyle: isOpen ? "secondary" : "text",
+    closeOnSelect: false,
+    "data-cy": "neeto-editor-fixed-menu-link-option",
+    icon: 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.createElement(SecondaryMenuTarget, {
+      label: label,
+      icon: Column
+    }),
+    onClick: handleDropdownClick,
+    onClose: handleClose
+  }, /*#__PURE__*/React__default.createElement(Menu$3, {
+    className: "neeto-editor-table__item"
+  }, /*#__PURE__*/React__default.createElement(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: withEventTargetValue(setRows)
+  }), /*#__PURE__*/React__default.createElement(Input, {
+    "data-cy": "neeto-editor-fixed-menu-table-option-input",
+    min: "1",
+    placeholder: t("neetoEditor.placeholders.rows"),
+    size: "small",
+    type: "number",
+    value: columns,
+    onChange: withEventTargetValue(setColumns)
+  }), /*#__PURE__*/React__default.createElement(Button$1, {
+    "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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    color = _useState4[0],
+    setColor = _useState4[1];
+  var dropdownWrapperRef = useRef(null);
+  var _useTranslation = 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);
+  };
+  useOnClickOutside(dropdownWrapperRef, function (event) {
+    if (!isOpen) return;
+    event.preventDefault();
+    editor.commands.focus();
+    setIsOpen(false);
+  });
+  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(not);
+  };
+  return /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    isOpen: isOpen,
+    buttonStyle: isOpen || color ? "secondary" : "text",
+    icon: 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.createElement(SecondaryMenuTarget, {
+      label: label,
+      icon: Customize
+    }),
+    onClick: openColorPicker
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: dropdownWrapperRef,
+    style: {
+      "min-width": "236px"
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement(HexColorPicker, {
+    color: color || "#000000",
+    onChange: setColor
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-editor-text-color-option__options-group"
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    autoFocus: true,
+    className: "neeto-editor-text-color-option__options-group__input",
+    placeholder: t("neetoEditor.placeholders.pickColor"),
+    size: "small",
+    value: color,
+    onChange: withEventTargetValue(setColor),
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }), /*#__PURE__*/React__default.createElement(Button$1, {
+    icon: Check,
+    size: "small",
+    onClick: handleSave
+  }), /*#__PURE__*/React__default.createElement(Button$1, {
+    icon: Close,
+    size: "small",
+    style: "text",
+    onClick: function onClick() {
+      editor.commands.focus();
+      setIsOpen(false);
+    }
+  }), /*#__PURE__*/React__default.createElement(Button$1, {
+    icon: Refresh,
+    size: "small",
+    style: "text",
+    tooltipProps: {
+      content: t("neetoEditor.common.resetToDefault"),
+      position: "top"
+    },
+    onClick: handleUnset
+  }))));
+};
+
+var Menu$2 = Dropdown$1.Menu,
+  MenuItem$1 = Dropdown$1.MenuItem;
+var Mentions = function Mentions(_ref) {
+  var editor = _ref.editor,
+    mentions = _ref.mentions,
+    tooltipContent = _ref.tooltipContent,
+    _ref$isSecondaryMenu = _ref.isSecondaryMenu,
+    isSecondaryMenu = _ref$isSecondaryMenu === void 0 ? false : _ref$isSecondaryMenu,
+    label = _ref.label;
+  if (isEmpty(mentions)) return null;
+  return /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    buttonStyle: "text",
+    "data-cy": "neeto-editor-mention-option",
+    icon: 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.createElement(SecondaryMenuTarget, {
+      label: label,
+      icon: Email
+    }),
+    onClick: function onClick(e) {
+      return isSecondaryMenu && e.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement(Menu$2, null, mentions.map(function (_ref2) {
+    var key = _ref2.key,
+      name = _ref2.name,
+      imageUrl = _ref2.imageUrl;
+    return /*#__PURE__*/React__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.createElement(Avatar, {
+      size: "small",
+      user: {
+        name: name,
+        imageUrl: imageUrl
+      }
+    }), /*#__PURE__*/React__default.createElement(Typography, {
+      style: "body2"
+    }, name));
+  })));
+};
+
+var FONT_SIZE_OPTIONS = [{
+  label: t$1("neetoEditor.menu.heading1"),
+  value: 1,
+  key: "h1"
+}, {
+  label: t$1("neetoEditor.menu.heading2"),
+  value: 2,
+  key: "h2"
+}, {
+  label: t$1("neetoEditor.menu.heading3"),
+  value: 3,
+  key: "h3"
+}, {
+  label: t$1("neetoEditor.menu.heading4"),
+  value: 4,
+  key: "h4"
+}, {
+  label: t$1("neetoEditor.menu.heading5"),
+  value: 5,
+  key: "h5"
+}, {
+  label: t$1("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(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, 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(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, MENU_ELEMENT_TYPES.BUTTON, 36), MENU_ELEMENT_TYPES.FONT_SIZE, 103), MENU_ELEMENT_TYPES.TABLE, 36), MENU_ELEMENT_TYPES.TEXT_COLOR, 36), MENU_ELEMENT_TYPES.EMOJI, 36), MENU_ELEMENT_TYPES.MENTIONS, 36);
+
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var 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: Undo,
+    command: function command() {
+      return editor.chain().focus().undo().run();
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.UNDO),
+    disabled: !editor.can().undo(),
+    optionName: EDITOR_OPTIONS.UNDO,
+    label: (_tooltips$undo = tooltips.undo) !== null && _tooltips$undo !== void 0 ? _tooltips$undo : t$1("neetoEditor.menu.undo"),
+    type: MENU_ELEMENT_TYPES.BUTTON
+  }, {
+    icon: Redo,
+    command: function command() {
+      return editor.chain().focus().redo().run();
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.REDO),
+    disabled: !editor.can().redo(),
+    optionName: EDITOR_OPTIONS.REDO,
+    label: (_tooltips$redo = tooltips.redo) !== null && _tooltips$redo !== void 0 ? _tooltips$redo : t$1("neetoEditor.menu.redo"),
+    type: MENU_ELEMENT_TYPES.BUTTON
+  }],
+  // font
+  [{
+    type: MENU_ELEMENT_TYPES.FONT_SIZE,
+    options: fontSizeOptions,
+    label: (_tooltips$fontSize = tooltips.fontSize) !== null && _tooltips$fontSize !== void 0 ? _tooltips$fontSize : t$1("neetoEditor.menu.fontSize"),
+    isEnabled: isNotEmpty(fontSizeOptions),
+    optionName: "fontSizeOptions"
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: TextBold,
+    isEnabled: options.includes(EDITOR_OPTIONS.BOLD),
+    command: function command() {
+      return editor.chain().focus().toggleBold().run();
+    },
+    optionName: EDITOR_OPTIONS.BOLD,
+    label: (_tooltips$bold = tooltips.bold) !== null && _tooltips$bold !== void 0 ? _tooltips$bold : t$1("neetoEditor.menu.bold")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: TextItalic,
+    isEnabled: options.includes(EDITOR_OPTIONS.ITALIC),
+    command: function command() {
+      return editor.chain().focus().toggleItalic().run();
+    },
+    optionName: EDITOR_OPTIONS.ITALIC,
+    label: (_tooltips$italic = tooltips.italic) !== null && _tooltips$italic !== void 0 ? _tooltips$italic : t$1("neetoEditor.menu.italic")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Underline,
+    isEnabled: options.includes(EDITOR_OPTIONS.UNDERLINE),
+    command: function command() {
+      return editor.chain().focus().toggleUnderline().run();
+    },
+    optionName: EDITOR_OPTIONS.UNDERLINE,
+    label: (_tooltips$underline = tooltips.underline) !== null && _tooltips$underline !== void 0 ? _tooltips$underline : t$1("neetoEditor.menu.underline")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Link,
+    isEnabled: options.includes(EDITOR_OPTIONS.LINK),
+    command: function command() {
+      return setIsAddLinkActive(not);
+    },
+    optionName: EDITOR_OPTIONS.LINK,
+    label: (_tooltips$link = tooltips.link) !== null && _tooltips$link !== void 0 ? _tooltips$link : t$1("neetoEditor.menu.link")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: TextCross,
+    isEnabled: options.includes(EDITOR_OPTIONS.STRIKETHROUGH),
+    command: function command() {
+      return editor.chain().focus().toggleStrike().run();
+    },
+    optionName: EDITOR_OPTIONS.STRIKETHROUGH,
+    label: (_tooltips$strike = tooltips.strike) !== null && _tooltips$strike !== void 0 ? _tooltips$strike : t$1("neetoEditor.menu.strike")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Highlight,
+    isEnabled: options.includes(EDITOR_OPTIONS.HIGHLIGHT),
+    command: function command() {
+      return editor.chain().focus().toggleHighlight().run();
+    },
+    optionName: EDITOR_OPTIONS.HIGHLIGHT,
+    label: (_tooltips$highlight = tooltips.highlight) !== null && _tooltips$highlight !== void 0 ? _tooltips$highlight : t$1("neetoEditor.menu.highlight")
+  }],
+  // list
+  [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: ListDot,
+    command: function command() {
+      return editor.chain().focus().toggleBulletList().run();
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.LIST_BULLETS),
+    optionName: "bulletList",
+    highlight: true,
+    label: (_tooltips$bulletList = tooltips.bulletList) !== null && _tooltips$bulletList !== void 0 ? _tooltips$bulletList : t$1("neetoEditor.menu.bulletedList")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: ListNumber,
+    command: function command() {
+      return editor.chain().focus().toggleOrderedList().run();
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.LIST_ORDERED),
+    optionName: "orderedList",
+    highlight: true,
+    label: (_tooltips$orderedList = tooltips.orderedList) !== null && _tooltips$orderedList !== void 0 ? _tooltips$orderedList : t$1("neetoEditor.menu.orderedList")
+  }],
+  // block
+  [{
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Quote,
+    command: function command() {
+      return editor.chain().focus().toggleBlockquote().run();
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.BLOCKQUOTE),
+    optionName: "blockquote",
+    highlight: true,
+    label: (_tooltips$blockQuote = tooltips.blockQuote) !== null && _tooltips$blockQuote !== void 0 ? _tooltips$blockQuote : t$1("neetoEditor.menu.blockQuote")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Code,
+    command: function command() {
+      return editor.chain().focus().toggleCode().run();
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.CODE),
+    optionName: EDITOR_OPTIONS.CODE,
+    label: (_tooltips$code = tooltips.code) !== null && _tooltips$code !== void 0 ? _tooltips$code : t$1("neetoEditor.menu.code")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: CodeBlock,
+    command: function command() {
+      return editor.chain().focus().toggleCodeBlock().run();
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.CODE_BLOCK),
+    optionName: "codeBlock",
+    label: (_tooltips$codeBlock = tooltips.codeBlock) !== null && _tooltips$codeBlock !== void 0 ? _tooltips$codeBlock : t$1("neetoEditor.menu.codeBlock")
+  }],
+  // misc
+  [{
+    type: MENU_ELEMENT_TYPES.TABLE,
+    label: (_tooltips$table = tooltips.table) !== null && _tooltips$table !== void 0 ? _tooltips$table : t$1("neetoEditor.menu.table"),
+    isEnabled: options.includes(EDITOR_OPTIONS.TABLE),
+    optionName: EDITOR_OPTIONS.TABLE
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: 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(EDITOR_OPTIONS.ATTACHMENTS),
+    optionName: EDITOR_OPTIONS.ATTACHMENTS,
+    label: (_tooltips$attachments = tooltips.attachments) !== null && _tooltips$attachments !== void 0 ? _tooltips$attachments : t$1("neetoEditor.menu.attachments")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: ImageUpload,
+    command: function command() {
+      return setMediaUploader(assoc("image", true));
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.IMAGE_UPLOAD),
+    optionName: EDITOR_OPTIONS.IMAGE_UPLOAD,
+    label: (_tooltips$imageUpload = tooltips.imageUpload) !== null && _tooltips$imageUpload !== void 0 ? _tooltips$imageUpload : t$1("neetoEditor.menu.imageUpload")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: Video,
+    command: function command() {
+      return setMediaUploader(assoc("video", true));
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.VIDEO_UPLOAD),
+    optionName: EDITOR_OPTIONS.VIDEO_UPLOAD,
+    label: (_tooltips$videoUpload = tooltips.videoUpload) !== null && _tooltips$videoUpload !== void 0 ? _tooltips$videoUpload : t$1("neetoEditor.menu.videoUpload")
+  }, {
+    type: MENU_ELEMENT_TYPES.BUTTON,
+    icon: MediaVideo,
+    command: function command() {
+      return setIsEmbedModalOpen(true);
+    },
+    isEnabled: options.includes(EDITOR_OPTIONS.VIDEO_EMBED),
+    optionName: EDITOR_OPTIONS.VIDEO_EMBED,
+    label: (_tooltips$videoEmbed = tooltips.videoEmbed) !== null && _tooltips$videoEmbed !== void 0 ? _tooltips$videoEmbed : t$1("neetoEditor.menu.videoEmbed")
+  }],
+  // extras
+  [{
+    type: MENU_ELEMENT_TYPES.TEXT_COLOR,
+    label: (_tooltips$textColor = tooltips.textColor) !== null && _tooltips$textColor !== void 0 ? _tooltips$textColor : t$1("neetoEditor.menu.textColor"),
+    isEnabled: options.includes(EDITOR_OPTIONS.TEXT_COLOR),
+    optionName: EDITOR_OPTIONS.TEXT_COLOR
+  }, {
+    type: MENU_ELEMENT_TYPES.EMOJI,
+    label: (_tooltips$emoji = tooltips.emoji) !== null && _tooltips$emoji !== void 0 ? _tooltips$emoji : t$1("neetoEditor.menu.emoji"),
+    isEnabled: options.includes(EDITOR_OPTIONS.EMOJI),
+    optionName: EDITOR_OPTIONS.EMOJI,
+    setActive: setIsEmojiPickerActive,
+    isActive: isEmojiPickerActive
+  }, {
+    type: MENU_ELEMENT_TYPES.MENTIONS,
+    label: (_tooltips$mention = tooltips.mention) !== null && _tooltips$mention !== void 0 ? _tooltips$mention : t$1("neetoEditor.menu.mention"),
+    isEnabled: isNotEmpty(mentions),
+    optionName: "mentions",
+    mentions: mentions
+  }], //addons
+  _toConsumableArray(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(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(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 = 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 removeById(id, prevState);
+    });
+  };
+  useEffect(function () {
+    uppy.on("upload-progress", handleUploadProgress);
+    return function () {
+      uppy.off("upload-progress", handleUploadProgress);
+    };
+  }, [uppy]);
+  return /*#__PURE__*/React__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.createElement("div", {
+      className: "ne-media-uploader__media",
+      key: id
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "ne-media-uploader__media__info"
+    }, /*#__PURE__*/React__default.createElement(Typography, {
+      style: "body2"
+    }, filename), /*#__PURE__*/React__default.createElement(Button$1, {
+      "data-cy": "neeto-editor-image-upload-cancel-button",
+      icon: Close,
+      size: "small",
+      style: "text",
+      onClick: function onClick() {
+        return removeUploadingFile(id);
       }
     })), progress !== 100 ? /*#__PURE__*/React__default.createElement("div", {
       className: "ne-media-uploader__media__progress"
@@ -13148,7 +14275,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}";
 n(css,{});
 
 var LinkOption = function LinkOption(_ref) {
@@ -13168,360 +14295,108 @@ var LinkOption = function LinkOption(_ref) {
     if (event.key === "Escape") {
       handleClose();
     } else if (event.key === "Enter") {
-      handleSubmit();
-    }
-  };
-  var handleSubmit = function handleSubmit() {
-    if (URL_REGEXP.test(link)) {
-      editor.chain().focus().setLink({
-        href: link
-      }).run();
-      handleClose();
-    } else if (isNotPresent(link)) {
-      editor.chain().focus().unsetLink().run();
-      handleClose();
-    } else {
-      setLink("");
-      handleAnimateInvalidLink();
-    }
-  };
-  var handleReset = function handleReset() {
-    if (link) {
-      setLink("");
-      editor.chain().focus().unsetLink().run();
-    } else {
-      handleClose();
-    }
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-bubble-menu__link",
-    onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React__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.createElement(Button$1, {
-    "data-cy": "neeto-editor-link-cancel-button",
-    icon: Close,
-    size: "small",
-    style: "secondary",
-    onClick: handleReset
-  }));
-};
-
-var TableOption$1 = function TableOption(_ref) {
-  var editor = _ref.editor,
-    handleClose = _ref.handleClose;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(3),
-    _useState2 = _slicedToArray(_useState, 2),
-    rows = _useState2[0],
-    setRows = _useState2[1];
-  var _useState3 = useState(3),
-    _useState4 = _slicedToArray(_useState3, 2),
-    columns = _useState4[0],
-    setColumns = _useState4[1];
-  var handleSubmit = function handleSubmit() {
-    editor.chain().focus().insertTable({
-      rows: rows,
-      cols: columns,
-      withHeaderRow: true
-    }).run(), setRows(3);
-    setColumns(3);
-    handleClose();
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-bubble-menu__table"
-  }, /*#__PURE__*/React__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: withEventTargetValue(setRows)
-  }), /*#__PURE__*/React__default.createElement("input", {
-    "data-cy": "neeto-editor-bubble-menu-table-option-input",
-    min: "1",
-    placeholder: t("neetoEditor.placeholders.columns"),
-    type: "number",
-    value: columns,
-    onChange: withEventTargetValue(setColumns)
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-bubble-menu__table__buttons"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
-    icon: Check,
-    style: "secondary",
-    onClick: handleSubmit
-  }), /*#__PURE__*/React__default.createElement(Button$1, {
-    "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
-    icon: 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(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.createElement(Button$1, _extends$1({
-    "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 = Dropdown$1.Menu,
-    MenuItem = Dropdown$1.MenuItem;
-  if (isEmpty(mentions)) return null;
-  return /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    buttonStyle: "text",
-    "data-cy": "neeto-editor-mention-option",
-    icon: Email,
-    strategy: "fixed",
-    buttonProps: {
-      tooltipProps: {
-        content: tooltipContent,
-        position: "bottom"
-      },
-      className: "neeto-editor-fixed-menu__item"
-    }
-  }, /*#__PURE__*/React__default.createElement(Menu, null, mentions.map(function (_ref2) {
-    var key = _ref2.key,
-      name = _ref2.name,
-      imageUrl = _ref2.imageUrl;
-    return /*#__PURE__*/React__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.createElement(Avatar, {
-      size: "small",
-      user: {
-        name: name,
-        imageUrl: imageUrl
-      }
-    }), /*#__PURE__*/React__default.createElement(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.createElement(Dropdown$1, {
-    buttonStyle: "text",
-    closeOnSelect: false,
-    dropdownProps: {
-      classNames: "neeto-editor-fixed-menu__emoji-dropdown"
-    },
-    icon: 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);
+      handleSubmit();
     }
-  }, /*#__PURE__*/React__default.createElement(EmojiPickerMenu, {
-    editor: editor,
-    setActive: setActive
+  };
+  var handleSubmit = function handleSubmit() {
+    if (URL_REGEXP.test(link)) {
+      editor.chain().focus().setLink({
+        href: link
+      }).run();
+      handleClose();
+    } else if (isNotPresent(link)) {
+      editor.chain().focus().unsetLink().run();
+      handleClose();
+    } else {
+      setLink("");
+      handleAnimateInvalidLink();
+    }
+  };
+  var handleReset = function handleReset() {
+    if (link) {
+      setLink("");
+      editor.chain().focus().unsetLink().run();
+    } else {
+      handleClose();
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-editor-bubble-menu__link",
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React__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.createElement(Button$1, {
+    "data-cy": "neeto-editor-link-cancel-button",
+    icon: 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 = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    color = _useState4[0],
-    setColor = _useState4[1];
-  var dropdownWrapperRef = useRef(null);
+    handleClose = _ref.handleClose;
   var _useTranslation = 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 = useState(3),
+    _useState2 = _slicedToArray(_useState, 2),
+    rows = _useState2[0],
+    setRows = _useState2[1];
+  var _useState3 = useState(3),
+    _useState4 = _slicedToArray(_useState3, 2),
+    columns = _useState4[0],
+    setColumns = _useState4[1];
+  var handleSubmit = function handleSubmit() {
+    editor.chain().focus().insertTable({
+      rows: rows,
+      cols: columns,
+      withHeaderRow: true
+    }).run(), setRows(3);
+    setColumns(3);
+    handleClose();
   };
-  useOnClickOutside(dropdownWrapperRef, function (event) {
-    if (isOpen) {
-      event.preventDefault();
-      editor.commands.focus();
-      setIsOpen(false);
-    }
-  });
-  useEffect(function () {
-    setColor(editor.getAttributes("textStyle").color);
-  }, [isOpen, editor.getAttributes("textStyle").color]);
   return /*#__PURE__*/React__default.createElement("div", {
-    ref: dropdownWrapperRef
-  }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    buttonStyle: isOpen || color ? "secondary" : "text",
-    icon: 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(not);
-    }
-  }, /*#__PURE__*/React__default.createElement(HexColorPicker, {
-    color: color || "#000000",
-    onChange: setColor
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-text-color-option__options-group"
-  }, /*#__PURE__*/React__default.createElement(Input, {
+    className: "neeto-editor-bubble-menu__table"
+  }, /*#__PURE__*/React__default.createElement("input", {
     autoFocus: true,
-    className: "neeto-editor-text-color-option__options-group__input",
-    placeholder: t("neetoEditor.placeholders.pickColor"),
-    size: "small",
-    value: color,
-    onChange: withEventTargetValue(setColor),
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    }
-  }), /*#__PURE__*/React__default.createElement(Button$1, {
+    "data-cy": "neeto-editor-fixed-menu-table-option-input",
+    min: "1",
+    placeholder: t("neetoEditor.placeholders.rows"),
+    type: "number",
+    value: rows,
+    onChange: withEventTargetValue(setRows)
+  }), /*#__PURE__*/React__default.createElement("input", {
+    "data-cy": "neeto-editor-bubble-menu-table-option-input",
+    min: "1",
+    placeholder: t("neetoEditor.placeholders.columns"),
+    type: "number",
+    value: columns,
+    onChange: withEventTargetValue(setColumns)
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-editor-bubble-menu__table__buttons"
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
     icon: Check,
-    size: "small",
-    onClick: handleSave
+    style: "secondary",
+    onClick: handleSubmit
   }), /*#__PURE__*/React__default.createElement(Button$1, {
+    "data-cy": "neeto-editor-bubble-menu-table-option-create-button",
     icon: Close,
-    size: "small",
-    style: "text",
-    onClick: function onClick() {
-      editor.commands.focus();
-      setIsOpen(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Button$1, {
-    icon: 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(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,
@@ -13673,7 +14548,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,
@@ -13695,54 +14570,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;
-  return /*#__PURE__*/React__default.createElement(Button$1, _extends$1({
-    disabled: disabled,
-    className: "neeto-editor-fixed-menu__item",
-    "data-cy": "neeto-editor-fixed-menu-".concat(optionName, "-option"),
-    icon: Icon,
-    key: optionName,
-    style: active ? "secondary" : "text",
-    tabIndex: "-1",
-    tooltipProps: {
-      content: tooltip,
-      position: "bottom"
-    },
-    onClick: command
-  }, generateFocusProps(highlight)));
+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 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 getNodeType = function getNodeType(options) {
+  var _options$find;
+  return ((_options$find = options.find(prop("active"))) === null || _options$find === void 0 ? void 0 : _options$find.optionName) || "Text";
 };
-var getCursorPos = function getCursorPos(editor, to) {
-  return editor === null || editor === void 0 ? void 0 : editor.view.coordsAtPos(to);
+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.createElement(Button$1, _extends$1({
+    "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 Options = function Options(_ref) {
@@ -13773,7 +14677,7 @@ var Options = function Options(_ref) {
   var isTextColorOptionActive = options.includes(EDITOR_OPTIONS.TEXT_COLOR);
   var isLinkActive = options.includes(EDITOR_OPTIONS.LINK);
   var isTableActive = options.includes(EDITOR_OPTIONS.TABLE);
-  var _buildMenuOptions = buildMenuOptions$1({
+  var _buildBubbleMenuOptio = buildBubbleMenuOptions({
       editor: editor,
       options: options,
       setMediaUploader: setMediaUploader,
@@ -13782,9 +14686,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 () {
@@ -13801,7 +14705,7 @@ var Options = function Options(_ref) {
     });
   }
   if (isTableOptionActive) {
-    return /*#__PURE__*/React__default.createElement(TableOption$1, {
+    return /*#__PURE__*/React__default.createElement(TableOption, {
       editor: editor,
       handleClose: function handleClose() {
         return setIsTableOptionActive(false);
@@ -13820,7 +14724,7 @@ var Options = function Options(_ref) {
       key: optionName,
       onClick: command
     }, optionName);
-  }))), fontStyleOptions.map(renderOptionButton$1), blockStyleOptions.map(renderOptionButton$1), isTextColorOptionActive && /*#__PURE__*/React__default.createElement(TextColorOption, {
+  }))), fontStyleOptions.map(renderOptionButton), blockStyleOptions.map(renderOptionButton), isTextColorOptionActive && /*#__PURE__*/React__default.createElement(TextColorOption, {
     editor: editor,
     tooltipContent: tooltips.textColor || t("neetoEditor.menu.textColor")
   }), isEmojiActive && /*#__PURE__*/React__default.createElement(EmojiOption, {
@@ -13828,7 +14732,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: Link,
     command: function command() {
       return setIsLinkOptionActive(true);
@@ -13837,7 +14741,7 @@ var Options = function Options(_ref) {
     optionName: "link",
     highlight: false,
     tooltip: tooltips.link || t("neetoEditor.menu.link")
-  }), isTableActive && renderOptionButton$1({
+  }), isTableActive && renderOptionButton({
     Icon: Column,
     command: function command() {
       return setIsTableOptionActive(true);
@@ -13920,93 +14824,6 @@ var Bubble = function Bubble(_ref) {
   }, children)));
 };
 
-var FONT_SIZE_OPTIONS = [{
-  label: t$1("neetoEditor.menu.heading1"),
-  value: 1,
-  key: "h1"
-}, {
-  label: t$1("neetoEditor.menu.heading2"),
-  value: 2,
-  key: "h2"
-}, {
-  label: t$1("neetoEditor.menu.heading3"),
-  value: 3,
-  key: "h3"
-}, {
-  label: t$1("neetoEditor.menu.heading4"),
-  value: 4,
-  key: "h4"
-}, {
-  label: t$1("neetoEditor.menu.heading5"),
-  value: 5,
-  key: "h5"
-}, {
-  label: t$1("neetoEditor.menu.normalText"),
-  value: 0,
-  key: "body2"
-}];
-
-var Menu$2 = Dropdown$1.Menu,
-  MenuItem = Dropdown$1.MenuItem;
-var FontSizeOption = function FontSizeOption(_ref) {
-  var editor = _ref.editor,
-    tooltipContent = _ref.tooltipContent;
-  var dropdownRef = 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);
-  }) || 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.createElement(Dropdown$1, {
-    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.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.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.createElement(Typography, {
-      style: key
-    }, label));
-  })));
-};
-
 var LinkAddPopOver = function LinkAddPopOver(_ref) {
   var isAddLinkActive = _ref.isAddLinkActive,
     setIsAddLinkActive = _ref.setIsAddLinkActive,
@@ -14043,7 +14860,7 @@ var LinkAddPopOver = function LinkAddPopOver(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     arrowPosition = _useState12[0],
     setArrowPosition = _useState12[1];
-  var popOverRef = useRef(null);
+  var popoverRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var isLinkTextPresent = !isNotPresent(linkText);
@@ -14092,26 +14909,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);
   };
-  useOnClickOutside(popOverRef, removePopover);
+  useOnClickOutside(popoverRef, removePopover);
   useEffect(function () {
     if (editor && isAddLinkActive) {
       updatePopoverPosition();
@@ -14124,15 +14928,15 @@ var LinkAddPopOver = function LinkAddPopOver(_ref) {
     };
   }, []);
   return isAddLinkActive ? /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "ne-link-arrow",
+    className: "ne-link-arrow fade-in",
     style: {
       top: arrowPosition.top,
       left: arrowPosition.left
     }
   }), /*#__PURE__*/React__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.createElement(Input, {
     required: true,
@@ -14196,85 +15000,52 @@ var LinkAddPopOver = function LinkAddPopOver(_ref) {
   })))), document.body) : null;
 };
 
-var Menu$1 = Dropdown$1.Menu;
-var TableOption = function TableOption(_ref) {
-  var editor = _ref.editor,
-    tooltipContent = _ref.tooltipContent;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = useState(3),
-    _useState4 = _slicedToArray(_useState3, 2),
-    rows = _useState4[0],
-    setRows = _useState4[1];
-  var _useState5 = useState(3),
-    _useState6 = _slicedToArray(_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(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 = Dropdown$1.Menu,
+  MenuItem = Dropdown$1.MenuItem;
+var MoreMenu = function MoreMenu(_ref) {
+  var groups = _ref.groups,
+    editor = _ref.editor;
   return /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    isOpen: isOpen,
-    buttonStyle: isOpen ? "secondary" : "text",
-    closeOnSelect: false,
-    "data-cy": "neeto-editor-fixed-menu-link-option",
-    icon: Column,
-    position: "bottom",
     buttonProps: {
-      tabIndex: -1,
-      tooltipProps: {
-        content: tooltipContent,
-        position: "bottom"
-      },
-      className: "neeto-editor-fixed-menu__item"
+      className: "flex-shrink-0"
     },
-    onClick: function onClick() {
-      return setIsOpen(function (isOpen) {
-        return !isOpen;
-      });
-    },
-    onClose: handleClose
-  }, /*#__PURE__*/React__default.createElement(Menu$1, {
-    className: "neeto-editor-table__item"
-  }, /*#__PURE__*/React__default.createElement(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: withEventTargetValue(setRows)
-  }), /*#__PURE__*/React__default.createElement(Input, {
-    "data-cy": "neeto-editor-fixed-menu-table-option-input",
-    min: "1",
-    placeholder: t("neetoEditor.placeholders.rows"),
-    size: "small",
-    type: "number",
-    value: columns,
-    onChange: withEventTargetValue(setColumns)
-  }), /*#__PURE__*/React__default.createElement(Button$1, {
-    "data-cy": "neeto-editor-fixed-menu-table-option-create-button",
-    label: t("neetoEditor.common.create"),
-    size: "small",
-    onClick: handleSubmit
+    buttonStyle: "text",
+    icon: MenuHorizontal,
+    strategy: "fixed"
+  }, /*#__PURE__*/React__default.createElement(Menu$1, null, groups.map(function (group) {
+    return group.map(function (_ref2) {
+      var type = _ref2.type,
+        props = _objectWithoutProperties$1(_ref2, _excluded$3);
+      var Component = MENU_ELEMENTS[type];
+      if (type === MENU_ELEMENT_TYPES.BUTTON) {
+        var Icon = props.icon;
+        return /*#__PURE__*/React__default.createElement(MenuItem.Button, _extends$1({
+          "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.createElement(Icon, null), " ", props.label);
+      }
+      return /*#__PURE__*/React__default.createElement(Component, _extends$1({
+        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(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,
@@ -14287,8 +15058,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,
@@ -14305,16 +15074,20 @@ var Fixed = function Fixed(_ref) {
     setFocusedButtonIndex = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isMenuExpanded = _useState4[0],
-    setIsMenuExpanded = _useState4[1];
+    isEmbedModalOpen = _useState4[0],
+    setIsEmbedModalOpen = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isEmbedModalOpen = _useState6[0],
-    setIsEmbedModalOpen = _useState6[1];
-  var _useState7 = useState(false),
+    isAddLinkActive = _useState6[0],
+    setIsAddLinkActive = _useState6[1];
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    isAddLinkActive = _useState8[0],
-    setIsAddLinkActive = _useState8[1];
+    menuItems = _useState8[0],
+    setMenuItems = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    moreMenuItems = _useState10[0],
+    setMoreMenuItems = _useState10[1];
   var menuRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -14348,36 +15121,39 @@ var Fixed = function Fixed(_ref) {
       });
     };
   }, [menuButtons]);
-  if (!editor) {
-    return null;
-  }
-  var _buildMenuOptions = buildMenuOptions$1({
+  var menuGroups = 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 = isNotEmpty(fontSizeOptions);
-  var isEmojiActive = options.includes(EDITOR_OPTIONS.EMOJI);
-  var isTableActive = options.includes(EDITOR_OPTIONS.TABLE);
-  var isTextColorOptionActive = options.includes(EDITOR_OPTIONS.TEXT_COLOR);
+      setIsAddLinkActive: setIsAddLinkActive,
+      mentions: mentions,
+      addonCommands: addonCommands,
+      setIsEmojiPickerActive: setIsEmojiPickerActive,
+      isEmojiPickerActive: isEmojiPickerActive
+    });
+  }, [editor, isEmojiPickerActive, mentions]);
+  var handleResize = useCallback(function () {
+    if (!menuRef.current) return;
+    var _reGroupMenuItems = reGroupMenuItems(menuRef, menuGroups),
+      visibleMenuGroups = _reGroupMenuItems.visibleMenuGroups,
+      invisibleMenuGroups = _reGroupMenuItems.invisibleMenuGroups;
+    setMenuItems(visibleMenuGroups);
+    setMoreMenuItems(invisibleMenuGroups);
+  }, [menuGroups]);
+  useEffect(function () {
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handleResize, menuGroups]);
+  if (!editor) return null;
   var isEmbedOptionActive = options.includes(EDITOR_OPTIONS.VIDEO_EMBED);
-  var isMediaUploaderActive = options.includes(EDITOR_OPTIONS.IMAGE_UPLOAD );
-  var addonCommandOptions = buildOptionsFromAddonCommands({
-    editor: editor,
-    commands: addonCommands
-  });
+  var isMediaUploaderActive = options.includes(EDITOR_OPTIONS.IMAGE_UPLOAD) || options.includes(EDITOR_OPTIONS.VIDEO_UPLOAD);
   var handleVariableClick = function handleVariableClick(item) {
     var category = item.category,
       key = item.key;
@@ -14395,39 +15171,41 @@ var Fixed = function Fixed(_ref) {
     className: "neeto-editor-fixed-menu__wrapper",
     "data-cy": "neeto-editor-fixed-menu-wrapper",
     ref: menuRef
-  }, isNotEmpty(rightOptions) && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-fixed-menu__right-options"
-  }, rightOptions.map(renderOptionButton)), isFontSizeActive && /*#__PURE__*/React__default.createElement(FontSizeOption, {
+  }, menuItems.map(function (group) {
+    return group.map(function (_ref2) {
+      var type = _ref2.type,
+        props = _objectWithoutProperties$1(_ref2, _excluded$2);
+      var Component = MENU_ELEMENTS[type];
+      if (!Component) return null;
+      return /*#__PURE__*/React__default.createElement(Component, _extends$1({
+        key: props.optionName
+      }, _objectSpread$3(_objectSpread$3({}, props), {}, {
+        editor: editor
+      })));
+    });
+  }), isNotEmpty(moreMenuItems) && /*#__PURE__*/React__default.createElement(MoreMenu, {
     editor: editor,
-    tooltipContent: tooltips.fontSize || t("neetoEditor.menu.fontSize")
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-fixed-menu__wrapper__button-group"
-  }, fontStyleOptions.map(renderOptionButton)), isAddLinkActive && /*#__PURE__*/React__default.createElement(LinkAddPopOver, {
+    groups: moreMenuItems
+  }), children), !isEmpty(variables) && /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-editor-fixed-menu__variables",
+    "data-cy": "neeto-editor-fixed-menu-variables"
+  }, /*#__PURE__*/React__default.createElement(DynamicVariables, {
+    variables: variables,
+    dropdownProps: {
+      buttonSize: "small",
+      buttonProps: {
+        tooltipProps: {
+          content: t("neetoEditor.menu.dynamicVariables"),
+          position: "bottom"
+        }
+      }
+    },
+    onVariableClick: handleVariableClick
+  })), isAddLinkActive && /*#__PURE__*/React__default.createElement(LinkAddPopOver, {
     editor: editor,
     isAddLinkActive: isAddLinkActive,
     openLinkInNewTab: openLinkInNewTab,
     setIsAddLinkActive: setIsAddLinkActive
-  }), (isMenuExpanded || not(isMenuCollapsible)) && /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("neeto-editor-fixed-menu__wrapper--collapsible", {
-      "neeto-editor-fixed-menu__wrapper--collapsible--fade": isMenuCollapsible
-    })
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-fixed-menu__wrapper__button-group"
-  }, listStyleOptions.map(renderOptionButton)), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-fixed-menu__wrapper__button-group"
-  }, blockStyleOptions.map(renderOptionButton)), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-fixed-menu__wrapper__button-group"
-  }, isTableActive && /*#__PURE__*/React__default.createElement(TableOption, {
-    editor: editor,
-    tooltipContent: tooltips.table || t("neetoEditor.menu.table")
-  }), miscOptions.map(renderOptionButton), isTextColorOptionActive && /*#__PURE__*/React__default.createElement(TextColorOption, {
-    editor: editor,
-    tooltipContent: tooltips.textColor || t("neetoEditor.menu.textColor")
-  }), isEmojiActive && /*#__PURE__*/React__default.createElement(EmojiOption, {
-    editor: editor,
-    isActive: isEmojiPickerActive,
-    setActive: setIsEmojiPickerActive,
-    tooltipContent: tooltips.emoji || t("neetoEditor.menu.emoji")
   }), isMediaUploaderActive && /*#__PURE__*/React__default.createElement(MediaUploader, {
     editor: editor,
     mediaUploader: mediaUploader,
@@ -14442,38 +15220,7 @@ var Fixed = function Fixed(_ref) {
     editor: editor,
     isEmbedModalOpen: isEmbedModalOpen,
     setIsEmbedModalOpen: setIsEmbedModalOpen
-  }), /*#__PURE__*/React__default.createElement(Mentions, {
-    editor: editor,
-    mentions: mentions,
-    tooltipContent: tooltips.mention || t("neetoEditor.menu.mention")
-  }), addonCommandOptions.map(renderOptionButton)), children), isMenuCollapsible && /*#__PURE__*/React__default.createElement(Button$1, {
-    className: "neeto-editor-fixed-menu__item",
-    "data-cy": "neeto-editor-fixed-menu-arrow",
-    icon: isMenuExpanded ? Left : Right,
-    style: "text",
-    tooltipProps: {
-      content: isMenuExpanded ? t("neetoEditor.menu.collapse") : t("neetoEditor.menu.expand"),
-      position: "bottom"
-    },
-    onClick: function onClick() {
-      return setIsMenuExpanded(not);
-    }
-  })), !isEmpty(variables) && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-editor-fixed-menu__variables",
-    "data-cy": "neeto-editor-fixed-menu-variables"
-  }, /*#__PURE__*/React__default.createElement(DynamicVariables, {
-    variables: variables,
-    dropdownProps: {
-      buttonSize: "small",
-      buttonProps: {
-        tooltipProps: {
-          content: t("neetoEditor.menu.dynamicVariables"),
-          position: "bottom"
-        }
-      }
-    },
-    onVariableClick: handleVariableClick
-  })));
+  }));
 };
 
 var _excluded$1 = ["icon", "onClick", "disabled", "className", "tooltipProps"];
@@ -14949,5 +15696,5 @@ var Menu = function Menu(props) {
   }));
 };
 
-export { highlightFocussedNode as A, resetFocussedNode as B, findParentNodeClosestToPos as C, DecorationSet as D, Extension as E, BubbleMenu as F, getMarkType as G, getMarkRange as H, InputRule as I, useEditor as J, EditorContent as K, MediaUploader as L, Menu as M, Node as N, EmbedOption as O, PasteRule as P, EditorView as Q, ReactNodeViewRenderer as R, Mark as a, markInputRule as b, markPasteRule as c, Decoration as d, callOrReturn as e, getExtensionField as f, getMarkAttributes as g, findChildren as h, isMacOS as i, NodeViewWrapper as j, keydownHandler as k, NodeViewContent as l, mergeAttributes as m, nodeInputRule as n, escapeForRegEx as o, ReactRenderer as p, EmojiPickerMenu as q, emojiPickerApi as r, combineTransactionSteps as s, textblockTypeInputRule as t, getChangedRanges as u, validateUrl as v, wrappingInputRule as w, getMarksBetween as x, findChildrenInRange as y, getAttributes as z };
-//# sourceMappingURL=chunk-e82a361e.js.map
+export { getLinkPopoverPosition as A, BubbleMenu as B, getMarkType as C, DecorationSet as D, Extension as E, getMarkRange as F, useEditor as G, EditorContent as H, InputRule as I, MediaUploader as J, EmbedOption as K, EditorView as L, Menu as M, Node as N, PasteRule as P, ReactNodeViewRenderer as R, Mark as a, markInputRule as b, markPasteRule as c, Decoration as d, callOrReturn as e, getExtensionField as f, getMarkAttributes as g, findChildren as h, NodeViewWrapper as i, NodeViewContent as j, keydownHandler as k, escapeForRegEx as l, mergeAttributes as m, nodeInputRule as n, ReactRenderer as o, EmojiPickerMenu as p, emojiPickerApi as q, combineTransactionSteps as r, getChangedRanges as s, textblockTypeInputRule as t, findChildrenInRange as u, validateUrl as v, wrappingInputRule as w, getMarksBetween as x, getAttributes as y, findParentNodeClosestToPos as z };
+//# sourceMappingURL=chunk-cde7e5cb.js.map