diff --git a/package-lock.json b/package-lock.json
index 3bbe87fd565..db2e795651e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,6 +49,7 @@
 				"@tiptap/suggestion": "^2.0.0-beta.91",
 				"@tiptap/vue-2": "^2.0.0-beta.78",
 				"core-js": "^3.22.3",
+				"debounce": "^1.2.1",
 				"escape-html": "^1.0.3",
 				"highlight.js": "^10.7.2",
 				"lowlight": "^1.20.0",
diff --git a/package.json b/package.json
index bf4bba30add..8e70129ee7b 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
 		"@tiptap/suggestion": "^2.0.0-beta.91",
 		"@tiptap/vue-2": "^2.0.0-beta.78",
 		"core-js": "^3.22.3",
+		"debounce": "^1.2.1",
 		"escape-html": "^1.0.3",
 		"highlight.js": "^10.7.2",
 		"lowlight": "^1.20.0",
diff --git a/src/components/EditorDraggable.provider.js b/src/components/EditorDraggable.provider.js
new file mode 100644
index 00000000000..2bb879a3d2a
--- /dev/null
+++ b/src/components/EditorDraggable.provider.js
@@ -0,0 +1,21 @@
+export const IS_UPLOADING_IMAGES = Symbol('editor:is-uploading-images')
+export const ACTION_IMAGE_PROMPT = Symbol('editor:action:image-prompt')
+export const ACTION_CHOOSE_LOCAL_IMAGE = Symbol('editor:action:upload-image')
+
+export const useIsUploadingImagesMixin = {
+	inject: {
+		$isUploadingImages: { from: IS_UPLOADING_IMAGES, default: false },
+	},
+}
+
+export const useActionImagePromptMixin = {
+	inject: {
+		$callImagePrompt: { from: ACTION_IMAGE_PROMPT, default: () => {} },
+	},
+}
+
+export const useActionChooseLocalImageMixin = {
+	inject: {
+		$callChooseLocalImage: { from: ACTION_CHOOSE_LOCAL_IMAGE, default: () => {} },
+	},
+}
diff --git a/src/components/EditorDraggable.vue b/src/components/EditorDraggable.vue
new file mode 100644
index 00000000000..2928ba038a3
--- /dev/null
+++ b/src/components/EditorDraggable.vue
@@ -0,0 +1,193 @@
+<!--
+  - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @author Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="editor editor-draggable"
+		:class="{ draggedOver }"
+		@image-paste="onPaste"
+		@dragover.prevent.stop="setDraggedOver(true)"
+		@dragleave.prevent.stop="setDraggedOver(false)"
+		@image-drop="onEditorDrop">
+		<input ref="imageFileInput"
+			data-ref="image-file-input"
+			type="file"
+			accept="image/*"
+			aria-hidden="true"
+			class="hidden-visually"
+			multiple
+			@change="onImageUploadFilePicked">
+		<slot />
+	</div>
+</template>
+
+<script>
+import { getCurrentUser } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+
+import {
+	useEditorMixin,
+	useFileMixin,
+	useSyncServiceMixin,
+} from './EditorWrapper.provider.js'
+
+import {
+	ACTION_IMAGE_PROMPT,
+	ACTION_CHOOSE_LOCAL_IMAGE,
+	IS_UPLOADING_IMAGES,
+} from './EditorDraggable.provider.js'
+
+const IMAGE_MIMES = [
+	'image/png',
+	'image/jpeg',
+	'image/jpg',
+	'image/gif',
+	'image/x-xbitmap',
+	'image/x-ms-bmp',
+	'image/bmp',
+	'image/svg+xml',
+	'image/webp',
+]
+
+export default {
+	name: 'EditorDraggable',
+	mixins: [useEditorMixin, useFileMixin, useSyncServiceMixin],
+	provide() {
+		const val = {}
+
+		Object.defineProperties(val, {
+			[ACTION_IMAGE_PROMPT]: {
+				get: () => this.showImagePrompt,
+			},
+			[ACTION_CHOOSE_LOCAL_IMAGE]: {
+				get: () => this.chooseLocalImage,
+			},
+			[IS_UPLOADING_IMAGES]: {
+				get: () => this.isUploadingImages,
+			},
+		})
+
+		return val
+	},
+	data: () => ({
+		draggedOver: false,
+		isUploadingImages: false,
+	}),
+	computed: {
+		imagePath() {
+			return this.$file.relativePath.split('/').slice(0, -1).join('/')
+		},
+	},
+	methods: {
+		setDraggedOver(val) {
+			this.draggedOver = val
+		},
+		onPaste(e) {
+			this.uploadImageFiles(e.detail.files)
+		},
+		onEditorDrop(e) {
+			this.uploadImageFiles(e.detail.files, e.detail.position)
+			this.draggedOver = false
+		},
+		onImageUploadFilePicked(event) {
+			this.uploadImageFiles(event.target.files)
+			// Clear input to ensure that the change event will be emitted if
+			// the same file is picked again.
+			event.target.value = ''
+		},
+		chooseLocalImage() {
+			this.$refs.imageFileInput.click()
+		},
+		async uploadImageFiles(files, position = null) {
+			if (!files) {
+				return
+			}
+
+			this.uploadingImages = true
+
+			const uploadPromises = [...files].map((file) => {
+				return this.uploadImageFile(file, position)
+			})
+
+			return Promise.all(uploadPromises)
+				.catch(err => {
+					console.error(err)
+					showError(err?.response?.data?.error || err.message)
+				})
+				.then(() => {
+					this.uploadingImages = false
+				})
+		},
+		async uploadImageFile(file, position = null) {
+			if (!IMAGE_MIMES.includes(file.type)) {
+				showError(t('text', 'Image file format not supported'))
+				return
+			}
+
+			return this.$syncService.uploadImage(file).then((response) => {
+				this.insertAttachmentImage(response.data?.name, response.data?.id, position)
+			}).catch((error) => {
+				console.error(error)
+				showError(error?.response?.data?.error)
+			})
+		},
+		showImagePrompt() {
+			const currentUser = getCurrentUser()
+			if (!currentUser) {
+				return
+			}
+
+			OC.dialogs.filepicker(t('text', 'Insert an image'), (filePath) => {
+				this.insertImagePath(filePath)
+			}, false, [], true, undefined, this.imagePath)
+		},
+		insertImagePath(imagePath) {
+			this.isUploadingImages = true
+
+			return this.$syncService.insertImageFile(imagePath).then((response) => {
+				this.insertAttachmentImage(response.data?.name, response.data?.id)
+			}).catch((error) => {
+				console.error(error)
+				showError(error?.response?.data?.error || error.message)
+			}).then(() => {
+				this.isUploadingImages = false
+			})
+		},
+		insertAttachmentImage(name, fileId, position = null) {
+			// inspired by the fixedEncodeURIComponent function suggested in
+			// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+			const src = 'text://image?imageFileName='
+				+ encodeURIComponent(name).replace(/[!'()*]/g, (c) => {
+					return '%' + c.charCodeAt(0).toString(16).toUpperCase()
+				})
+			// simply get rid of brackets to make sure link text is valid
+			// as it does not need to be unique and matching the real file name
+			const alt = name.replaceAll(/[[\]]/g, '')
+
+			const chain = position
+				? this.$editor.chain()
+				: this.$editor.chain().focus(position)
+
+			chain.setImage({ src, alt }).focus().run()
+		},
+	},
+}
+</script>
diff --git a/src/components/EditorWrapper.provider.js b/src/components/EditorWrapper.provider.js
index c19ebdc0dbc..ccdb2408b18 100644
--- a/src/components/EditorWrapper.provider.js
+++ b/src/components/EditorWrapper.provider.js
@@ -1,13 +1,93 @@
+/*
+ * @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @author Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 export const EDITOR = Symbol('tiptap:editor')
 export const SYNC_SERVICE = Symbol('sync:service')
+export const DOCUMENT = Symbol('editor:document')
+export const IS_PUBLIC = Symbol('editor:is-public')
+export const FILE = Symbol('editor:file')
+export const IS_RICH_EDITOR = Symbol('editor:is-rich-editor')
+export const IS_MOBILE = Symbol('editor:is-mobile')
+export const RELATIVE_PATH = Symbol('editor:relative-path')
+export const IS_UPLOADING_IMAGES = Symbol('editor:is-uploading-images')
+export const ACTION_IMAGE_PROMPT = Symbol('action:image-prompt')
 
 export const useEditorMixin = {
 	inject: {
 		$editor: { from: EDITOR, default: null },
 	},
 }
+
 export const useSyncServiceMixin = {
 	inject: {
 		$syncService: { from: SYNC_SERVICE, default: null },
 	},
 }
+
+export const useIsPublic = {
+	inject: {
+		$isPublic: { from: IS_PUBLIC, default: false },
+	},
+}
+
+export const useIsRichEditorMixin = {
+	inject: {
+		$isRichEditor: { from: IS_RICH_EDITOR, default: false },
+	},
+}
+
+export const useIsMobileMixin = {
+	inject: {
+		$isMobile: { from: IS_MOBILE, default: false },
+	},
+}
+
+export const useDocumentMixin = {
+	inject: {
+		$document: { from: DOCUMENT, default: null },
+	},
+}
+
+export const useIsUploadingImagesMixin = {
+	inject: {
+		$isUploadingImages: { from: IS_UPLOADING_IMAGES, default: false },
+	},
+}
+
+export const useRelativePathMixin = {
+	inject: {
+		$relativePath: { from: RELATIVE_PATH, default: null },
+	},
+}
+
+export const useFileMixin = {
+	inject: {
+		$file: {
+			from: FILE,
+			default: () => ({
+				fileId: 0,
+				relativePath: null,
+				document: null,
+			}),
+		},
+	},
+}
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index d3ebf7d3d4c..d81468d333a 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -37,19 +37,12 @@
 			</p>
 		</div>
 		<div v-if="displayed" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !contentLoaded && !hasConnectionIssue, 'richEditor': isRichEditor, 'show-color-annotations': showAuthorAnnotations}">
-			<div v-if="$editor"
-				id="editor"
-				:class="{ draggedOver }"
-				@image-paste="onPaste"
-				@dragover.prevent.stop="draggedOver = true"
-				@dragleave.prevent.stop="draggedOver = false"
-				@image-drop="onEditorDrop">
+			<EditorDraggable v-if="$editor"
+				id="editor">
 				<MenuBar v-if="renderMenus"
 					ref="menubar"
 					:file-path="relativePath"
 					:file-id="fileId"
-					:is-rich-editor="isRichEditor"
-					:is-public="isPublic"
 					:autohide="autohide"
 					:loaded.sync="menubarLoaded"
 					:uploading-images="uploadingImages"
@@ -75,7 +68,7 @@
 						class="editor__content"
 						:editor="$editor" />
 				</div>
-			</div>
+			</EditorDraggable>
 			<ReadOnlyEditor v-if="hasSyncCollission"
 				:content="syncError.data.outsideChange"
 				:is-rich-editor="isRichEditor" />
@@ -90,9 +83,20 @@
 import Vue from 'vue'
 import escapeHtml from 'escape-html'
 import moment from '@nextcloud/moment'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { showError } from '@nextcloud/dialogs'
+import { EditorContent } from '@tiptap/vue-2'
+import { getCurrentUser } from '@nextcloud/auth'
+import { getVersion, receiveTransaction } from 'prosemirror-collab'
 
-import { EDITOR, SYNC_SERVICE } from './EditorWrapper.provider.js'
+import {
+	EDITOR,
+	SYNC_SERVICE,
+	IS_PUBLIC,
+	IS_RICH_EDITOR,
+	IS_MOBILE,
+	FILE,
+} from './EditorWrapper.provider.js'
 
 import { SyncService, ERROR_TYPE, IDLE_TIMEOUT } from './../services/SyncService.js'
 import { endpointUrl, getRandomGuestName } from './../helpers/index.js'
@@ -101,14 +105,14 @@ import { createEditor, serializePlainText, loadSyntaxHighlight } from './../Edit
 import { createMarkdownSerializer } from './../extensions/Markdown.js'
 import markdownit from './../markdownit/index.js'
 
-import { EditorContent } from '@tiptap/vue-2'
 import { Collaboration, Keymap, UserColor } from './../extensions/index.js'
 import isMobile from './../mixins/isMobile.js'
 import store from './../mixins/store.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import { getVersion, receiveTransaction } from 'prosemirror-collab'
 import { Step } from 'prosemirror-transform'
 import Lock from 'vue-material-design-icons/Lock'
+// import MenuBar from './Menu/Bar.vue'
+import EditorDraggable from './EditorDraggable.vue'
+
 const EDITOR_PUSH_DEBOUNCE = 200
 
 const IMAGE_MIMES = [
@@ -127,6 +131,7 @@ export default {
 	name: 'EditorWrapper',
 	components: {
 		EditorContent,
+		EditorDraggable,
 		MenuBar: () => import(/* webpackChunkName: "editor-rich" */'./Menu/Bar.vue'),
 		MenuBubble: () => import(/* webpackChunkName: "editor-rich" */'./MenuBubble.vue'),
 		ReadOnlyEditor: () => import(/* webpackChunkName: "editor" */'./ReadOnlyEditor.vue'),
@@ -149,16 +154,25 @@ export default {
 		// providers aren't naturally reactive
 		// and $editor will start as null
 		// using getters we can always provide the
-		// actual $editor without being reactive
-		Object.defineProperty(val, EDITOR, {
-			get: () => {
-				return this.$editor
+		// actual $editor, and other values without being reactive
+		Object.defineProperties(val, {
+			[EDITOR]: {
+				get: () => this.$editor,
 			},
-		})
-
-		Object.defineProperty(val, SYNC_SERVICE, {
-			get: () => {
-				return this.$syncService
+			[SYNC_SERVICE]: {
+				get: () => this.$syncService,
+			},
+			[FILE]: {
+				get: () => this.fileData,
+			},
+			[IS_PUBLIC]: {
+				get: () => this.isPublic,
+			},
+			[IS_RICH_EDITOR]: {
+				get: () => this.isRichEditor,
+			},
+			[IS_MOBILE]: {
+				get: () => this.isMobile,
 			},
 		})
 
@@ -295,6 +309,18 @@ export default {
 				&& !this.syncError
 				&& !this.readOnly
 		},
+		imagePath() {
+			return this.relativePath.split('/').slice(0, -1).join('/')
+		},
+		fileData() {
+			return {
+				fileId: this.fileId,
+				relativePath: this.relativePath,
+				document: {
+					...this.document,
+				},
+			}
+		},
 	},
 	watch: {
 		lastSavedStatus() {
@@ -591,6 +617,7 @@ export default {
 			this.displayHelp = false
 		},
 		onPaste(e) {
+			// emit('files:past-files', e)
 			this.uploadImageFiles(e.detail.files)
 		},
 		onEditorDrop(e) {
@@ -622,9 +649,20 @@ export default {
 				showError(error?.response?.data?.error)
 			})
 		},
+		showImagePrompt() {
+			const currentUser = getCurrentUser()
+			if (!currentUser) {
+				return
+			}
+
+			OC.dialogs.filepicker(t('text', 'Insert an image'), (filePath) => {
+				this.insertImagePath(filePath)
+			}, false, [], true, undefined, this.imagePath)
+		},
 		insertImagePath(imagePath) {
 			this.uploadingImages = true
-			this.$syncService.insertImageFile(imagePath).then((response) => {
+
+			return this.$syncService.insertImageFile(imagePath).then((response) => {
 				this.insertAttachmentImage(response.data?.name, response.data?.id)
 			}).catch((error) => {
 				console.error(error)
diff --git a/src/components/Menu/ActionEntry.js b/src/components/Menu/ActionEntry.js
new file mode 100644
index 00000000000..928110a7044
--- /dev/null
+++ b/src/components/Menu/ActionEntry.js
@@ -0,0 +1,37 @@
+/*
+ * @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @author Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import SingleAction from './SingleAction.vue'
+
+export default {
+	name: 'ActionEntry',
+	functional: true,
+	render(h, ctx) {
+		const { actionEntry } = ctx.props
+
+		if (actionEntry.component) {
+			return h(actionEntry.component, ctx)
+		}
+
+		return h(SingleAction, ctx)
+	},
+}
diff --git a/src/components/Menu/ActionEntry.mixin.js b/src/components/Menu/ActionEntry.mixin.js
new file mode 100644
index 00000000000..ccb86748017
--- /dev/null
+++ b/src/components/Menu/ActionEntry.mixin.js
@@ -0,0 +1,74 @@
+/*
+ * @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @author Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/* eslint-disable jsdoc/valid-types */
+
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import debounce from 'debounce'
+
+import { useDocumentMixin, useEditorMixin, useIsMobileMixin } from '../EditorWrapper.provider.js'
+import { getActionState, getKeys } from './utils.js'
+
+/**
+ * @type {import("vue").ComponentOptions} BaseActionEntry
+ */
+const BaseActionEntry = {
+	directives: {
+		Tooltip,
+	},
+	mixins: [useEditorMixin, useIsMobileMixin, useDocumentMixin],
+	props: {
+		actionEntry: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			state: getActionState(this.actionEntry, this.$editor),
+		}
+	},
+	computed: {
+		icon() {
+			return this.actionEntry.icon
+		},
+		tooltip() {
+			return [this.actionEntry.label, getKeys(this.isMobile, this.actionEntry)].join(' ')
+		},
+	},
+	mounted() {
+		this.$_updateState = debounce(this.updateState.bind(this), 50)
+		this.$editor.on('update', this.$_updateState)
+		this.$editor.on('selectionUpdate', this.$_updateState)
+	},
+	beforeDestroy() {
+		this.$editor.off('update', this.$_updateState)
+		this.$editor.off('selectionUpdate', this.$_updateState)
+	},
+	methods: {
+		updateState() {
+			this.state = getActionState(this.actionEntry, this.$editor)
+		},
+	},
+}
+
+export { BaseActionEntry }
diff --git a/src/components/Menu/ActionEntry.scss b/src/components/Menu/ActionEntry.scss
new file mode 100644
index 00000000000..d69baf1d037
--- /dev/null
+++ b/src/components/Menu/ActionEntry.scss
@@ -0,0 +1,40 @@
+button.entry-action,
+.entry-action > button,
+.entry-action > div > button {
+	position: relative;
+	width: 44px;
+	height: 44px;
+	margin: 0;
+	background-size: 16px;
+	border: 0;
+	background-color: transparent;
+	opacity: .5;
+	color: var(--color-main-text);
+	background-position: center center;
+	vertical-align: top;
+	padding: 0.7em;
+	&:hover,
+	&:focus,
+	&:active {
+		background-color: var(--color-background-dark);
+	}
+
+	&.is-active::before {
+		transform: translateX(-50%);
+		border-radius: 100%;
+		position: absolute;
+		background: var(--color-primary-element);
+		bottom: 3px;
+		height: 6px;
+		width: 6px;
+		content: '';
+		left: 50%;
+
+	}
+
+	&.is-active,
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
+}
diff --git a/src/components/Menu/Bar.vue b/src/components/Menu/Bar.vue
index 3c6df47a35e..4d965256d4a 100644
--- a/src/components/Menu/Bar.vue
+++ b/src/components/Menu/Bar.vue
@@ -1,6 +1,7 @@
 <!--
   - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
   -
+  - @author Vinicius Reis <vinicius@nextcloud.com>
   - @author Julius Härtl <jus@bitgrid.net>
   -
   - @license GNU AGPL version 3 or any later version
@@ -22,285 +23,105 @@
 
 <template>
 	<div class="menubar" :class="{ 'show': isVisible, 'autohide': autohide }">
-		<input ref="imageFileInput"
-			type="file"
-			accept="image/*"
-			aria-hidden="true"
-			class="hidden-visually"
-			multiple
-			@change="onImageUploadFilePicked">
-		<div v-if="isRichEditor" ref="menubar" class="menubar-icons">
-			<template v-for="(icon) in icons">
-				<EmojiPicker v-if="icon.class === 'icon-emoji'"
-					v-show="icon.priority <= iconCount"
-					:key="icon.label"
-					class="menuitem-emoji action-menu-emoji"
-					@selectData="emojiObject => addEmoji(icon, emojiObject)">
-					<button v-tooltip="t('text', 'Insert emoji')"
-						:aria-label="t('text', 'Insert emoji')"
-						:aria-haspopup="true"
-						@click="toggleChildMenu(icon)">
-						<component :is="icon.icon" />
-					</button>
-				</EmojiPicker>
-				<Actions v-else-if="icon.class === 'icon-image'"
-					:key="`action-images-${icon.label}`"
-					ref="imageActions"
-					class="submenu action-menu-image"
-					:title="icon.label"
-					:aria-label="icon.label"
-					:aria-haspopup="true"
-					@open="toggleChildMenu(icon)"
-					@close="toggleChildMenu(icon)">
-					<template #icon>
-						<component :is="uploadingImages ? 'Loading' : icon.icon"
-							:title="icon.label"
-							:aria-label="icon.label"
-							:aria-haspopup="true" />
-					</template>
-					<ActionButton :close-after-click="true"
-						:disabled="uploadingImages"
-						@click="onUploadImage()">
-						<template #icon>
-							<Upload />
-						</template>
-						{{ t('text', 'Upload from computer') }}
-					</ActionButton>
-					<ActionButton v-if="!isPublic"
-						:close-after-click="true"
-						:disabled="uploadingImages"
-						@click="showImagePrompt()">
-						<template #icon>
-							<Folder />
-						</template>
-						{{ t('text', 'Insert from Files') }}
-					</ActionButton>
-				</Actions>
-				<button v-else-if="icon.class"
-					v-show="icon.priority <= iconCount"
-					:key="`action-${icon.label}`"
-					v-tooltip="getLabelAndKeys(icon)"
-					class="action-menu-icon"
-					:class="getIconClasses(icon)"
-					:disabled="disabled(icon)"
-					@click="clickIcon(icon)">
-					<component :is="icon.icon" />
-				</button>
-				<template v-else>
-					<Actions v-show="icon.priority <= iconCount"
-						:key="icon.label"
-						:title="icon.label"
-						class="action-menu-sub">
-						<template #icon>
-							<component :is="icon.icon" />
-						</template>
-						<ActionButton v-for="child in childPopoverMenu(icon.children, icon)"
-							:key="child.label"
-							@click="child.action">
-							<template #icon>
-								<component :is="child.icon" />
-							</template>
-							{{ child.label }}
-						</ActionButton>
-					</Actions>
-				</template>
-			</template>
-			<Actions class="remaining-actions"
-				@open="toggleChildMenu({ label: 'Remaining Actions' })"
-				@close="toggleChildMenu({ label: 'Remaining Actions' })">
-				<template v-for="(icon) in icons">
-					<ActionButton v-if="icon.class && isHiddenInMenu(icon) && !hasSubmenu(icon)"
-						:key="`remaining-action-${icon.class}`"
-						v-tooltip="getKeys(icon)"
-						:close-after-click="true"
-						@click="clickIcon(icon)">
-						<template #icon>
-							<component :is="icon.icon" />
-						</template>
-						{{ icon.label }}
-					</ActionButton>
-				</template>
-			</Actions>
+		<div v-if="$isRichEditor" ref="menubar" class="menubar-entries">
+			<ActionEntry v-for="actionEntry of visibleEntries"
+				v-bind="{ actionEntry }"
+				:key="`single-action-${actionEntry._key}`" />
 		</div>
-		<slot />
 	</div>
 </template>
 
 <script>
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
-import menuBarIcons from './../../mixins/menubar.js'
-import isMobile from './../../mixins/isMobile.js'
-import { Loading, Folder, Upload } from '../../components/icons.js'
-import { useEditorMixin } from '../EditorWrapper.provider.js'
-
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
-import ClickOutside from 'vue-click-outside'
-import { getCurrentUser } from '@nextcloud/auth'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
+import actionsFullEntries from './entries.js'
+import ActionEntry from './ActionEntry.js'
+import { useIsRichEditorMixin, useEditorMixin } from '../EditorWrapper.provider.js'
+
 export default {
 	// eslint-disable-next-line vue/match-component-file-name
 	name: 'MenuBar',
-	components: {
-		ActionButton,
-		PopoverMenu,
-		Actions,
-		EmojiPicker,
-		Loading,
-		Folder,
-		Upload,
-	},
-	directives: {
-		Tooltip,
-		ClickOutside,
-	},
-	mixins: [
-		isMobile,
-		useEditorMixin,
-	],
+	components: { ActionEntry },
+	mixins: [useIsRichEditorMixin, useEditorMixin],
 	props: {
-		isRichEditor: {
-			type: Boolean,
-			default: true,
-		},
 		autohide: {
 			type: Boolean,
 			default: false,
 		},
-		isPublic: {
-			type: Boolean,
-			default: false,
-		},
-		filePath: {
-			type: String,
-			required: false,
-			default: '',
-		},
-		fileId: {
-			type: Number,
-			required: false,
-			default: 0,
-		},
-		uploadingImages: {
-			type: Boolean,
-			default: false,
-		},
 	},
-	data: () => {
+	data() {
 		return {
-			windowWidth: 0,
-			windowHeight: 0,
 			forceRecompute: 0,
-			submenuVisibility: {},
-			lastImagePath: null,
-			// @deprecated
-			icons: [...menuBarIcons],
+			windowWidth: 0,
+			isVisible: this.$editor.isFocused,
 		}
 	},
 	computed: {
-		menuEntries() {
-			return [...menuBarIcons]
-		},
-		isHiddenInMenu() {
-			return (icon) => icon.priority > this.iconCount
-		},
-		getIconClasses() {
-			return (icon) => {
-				const classes = {}
-				classes[icon.class] = true
-				classes['is-active'] = this.isActive(icon)
-				return classes
-			}
-		},
-		isActive() {
-			return ({ isActive }) => {
-				if (!isActive) {
-					return false
-				}
-				const args = Array.isArray(isActive) ? isActive : [isActive]
-				return this.$editor.isActive(...args)
-			}
-		},
-		isVisible() {
-			return this.$editor.isFocused
-				|| Object.values(this.submenuVisibility).find((v) => v)
-		},
-		disabled() {
-			return (menuItem) => {
-				return menuItem.action && !menuItem.action(this.$editor.can())
-			}
-		},
-		isChildMenuVisible() {
-			return (icon) => {
-				return Object.prototype.hasOwnProperty.call(this.submenuVisibility, icon.label) ? this.submenuVisibility[icon.label] : false
-			}
-		},
-		childPopoverMenu() {
-			return (icons, parent) => {
-				return icons.map(icon => {
-					return {
-						label: icon.label,
-						class: icon.class,
-						icon: icon.icon,
-						active: this.isActive(icon),
-						action: () => {
-							this.clickIcon(icon)
-							this.hideChildMenu(parent)
-						},
-					}
-				})
-			}
-		},
-		childIconClasses() {
-			return (icons) => {
-				const icon = this.childIcon(icons)
-				return this.getIconClasses(icon)
-			}
-		},
-		childIcon() {
-			return (icons) => icons.find(icon => this.isActive(icon)) || icons[0]
-		},
-		iconCount() {
-			this.forceRecompute // eslint-disable-line
-			this.windowWidth // eslint-disable-line
-			const menuBarWidth = this.$refs.menubar && this.$refs.menubar.clientWidth > 200
-				? this.$refs.menubar.clientWidth
+		iconsLimit() {
+			// just force this computed to run again
+			// eslint-disable-next-line no-unused-expressions
+			(
+				this.forceRecompute,
+				this.windowWidth
+			)
+			const { menubar } = this.$refs
+			const menuBarWidth = menubar && menubar.clientWidth > 200
+				? menubar.clientWidth
 				: 200
+
 			// leave some buffer - this is necessary so the bar does not wrap during resizing
 			const spaceToFill = menuBarWidth - 4
 			const slots = Math.floor(spaceToFill / 44)
+
 			// Leave one slot empty for the three dot menu
 			return slots - 1
 		},
-		imagePath() {
-			return this.lastImagePath
-				|| this.filePath.split('/').slice(0, -1).join('/')
+		visibleEntries() {
+			return [...actionsFullEntries].filter(entry => {
+				return entry.priority <= this.iconsLimit
+			})
 		},
 	},
 	mounted() {
 		window.addEventListener('resize', this.getWindowWidth)
 		subscribe('files:sidebar:opened', this.redrawAfterTransition)
 		subscribe('files:sidebar:closed', this.redrawAfterTransition)
-		this.checkInterval = setInterval(() => {
-			const isWidthAvailable = (this.$refs.menubar && this.$refs.menubar.clientWidth > 0)
-			if (this.isRichEditor && isWidthAvailable) {
+
+		this.$onFocusChange = () => {
+			this.isVisible = this.$editor.isFocused
+		}
+
+		this.$editor.on('focus', this.$onFocusChange)
+		this.$editor.on('blur', this.$onFocusChange)
+
+		this.$checkInterval = setInterval(() => {
+			const { menubar } = this.$refs
+			const isWidthAvailable = (menubar && menubar.clientWidth > 0)
+
+			if (this.$isRichEditor && isWidthAvailable) {
 				this.redrawMenuBar()
 			}
-			if (!this.isRichEditor || isWidthAvailable) {
-				clearInterval(this.checkInterval)
+
+			if (!this.$isRichEditor || isWidthAvailable) {
+				clearInterval(this.$checkInterval)
 			}
 		}, 100)
+
 		this.$emit('update:loaded', true)
 	},
 	beforeDestroy() {
 		window.removeEventListener('resize', this.getWindowWidth)
+
 		unsubscribe('files:sidebar:opened', this.redrawAfterTransition)
 		unsubscribe('files:sidebar:closed', this.redrawAfterTransition)
+
+		this.$editor.off('focus', this.$onFocusChange)
+		this.$editor.off('blur', this.$onFocusChange)
 	},
 	methods: {
+		getWindowWidth() {
+			this.windowWidth = document.documentElement.clientWidth
+		},
 		redrawAfterTransition() {
 			// wait for transition to complete (100ms)
 			setTimeout(this.redrawMenuBar, 110)
@@ -311,98 +132,6 @@ export default {
 				this.forceRecompute++
 			})
 		},
-		refocus() {
-			this.$editor.chain().focus().run()
-		},
-		clickIcon(icon) {
-			if (icon.click) {
-				return icon.click(this)
-			}
-			// Some actions run themselves.
-			// others still need to have .run() called upon them.
-			const action = icon.action(this.$editor.chain().focus())
-			action && action.run()
-		},
-		getWindowWidth(event) {
-			this.windowWidth = document.documentElement.clientWidth
-		},
-		getWindowHeight(event) {
-			this.windowHeight = document.documentElement.clientHeight
-		},
-		hideChildMenu({ label }) {
-			this.$set(this.submenuVisibility, label, false)
-		},
-		hasSubmenu(icon) {
-			return icon.class === 'icon-emoji'
-				|| icon.children
-		},
-		toggleChildMenu({ label }) {
-			const lastValue = Object.prototype.hasOwnProperty.call(this.submenuVisibility, label) ? this.submenuVisibility[label] : false
-			this.$set(this.submenuVisibility, label, !lastValue)
-			if (lastValue) {
-				this.refocus()
-			}
-		},
-		onUploadImage() {
-			this.$refs.imageFileInput.click()
-		},
-		onImageUploadFilePicked(event) {
-			this.$emit('image-upload', event.target.files)
-			// Clear input to ensure that the change event will be emitted if
-			// the same file is picked again.
-			event.target.value = ''
-		},
-		showImagePrompt() {
-			const currentUser = getCurrentUser()
-			if (!currentUser) {
-				return
-			}
-			OC.dialogs.filepicker(t('text', 'Insert an image'), (filePath) => {
-				this.$emit('image-insert', filePath)
-			}, false, [], true, undefined, this.imagePath)
-		},
-		optimalPathTo(targetFile) {
-			const absolutePath = targetFile.split('/')
-			const relativePath = this.relativePathTo(targetFile).split('/')
-			return relativePath.length < absolutePath.length
-				? relativePath.join('/')
-				: targetFile
-		},
-		relativePathTo(targetFile) {
-			const current = this.filePath.split('/')
-			const target = targetFile.split('/')
-			current.pop() // ignore filename
-			while (current[0] === target[0]) {
-				current.shift()
-				target.shift()
-			}
-			return current.fill('..').concat(target).join('/')
-		},
-		addEmoji(icon, emojiObject) {
-			return icon.action(this.$editor.chain(), { id: emojiObject.id, native: emojiObject.native })
-				.focus()
-				.run()
-		},
-		keysString(keyChar, modifiers = []) {
-			const translations = {
-				ctrl: t('text', 'Ctrl'),
-				alt: t('text', 'Alt'),
-				shift: t('text', 'Shift'),
-			}
-			return Object.entries(translations)
-				.filter(([k, v]) => modifiers.includes(k))
-				.map(([k, v]) => v)
-				.concat(keyChar.toUpperCase())
-				.join('+')
-		},
-		getKeys(icon) {
-			return (icon.keyChar && !this.isMobile)
-				? `(${this.keysString(icon.keyChar, icon.keyModifiers)})`
-				: ''
-		},
-		getLabelAndKeys(icon) {
-			return [icon.label, this.getKeys(icon)].join(' ')
-		},
 	},
 }
 </script>
@@ -410,15 +139,10 @@ export default {
 <style scoped lang="scss">
 	.menubar {
 		--background-blur: blur(10px);
-		position: fixed;
-		position: -webkit-sticky;
 		position: sticky;
 		top: 0;
-		display: flex;
-		justify-content: flex-end;
 		z-index: 10021; // above modal-header and menububble so menubar is always on top
 		background-color: var(--color-main-background-translucent);
-		-webkit-backdrop-filter: var(--background-blur);
 		backdrop-filter: var(--background-blur);
 		max-height: 44px; // important for mobile so that the buttons are always inside the container
 		padding-top:3px;
@@ -433,76 +157,14 @@ export default {
 				opacity: 1;
 			}
 		}
-		.menubar-icons {
-			flex-grow: 1;
-			margin-left: calc((100% - 660px) / 2);
+		.menubar-entries {
+			display: flex;
+			justify-content: flex-start;
 		}
 		@media (max-width: 660px) {
-			.menubar-icons {
+			.menubar-entries {
 				margin-left: 0;
 			}
 		}
-		&::v-deep .action-item__menu ul {
-			max-height: calc(100vh - 88px);
-			overflow: scroll;
-		}
-
-		.remaining-actions ::v-deep .material-design-icon {
-			height: auto;
-			width: auto;
-		}
-	}
-
-	.menubar button {
-		position: relative;
-		width: 44px;
-		height: 44px;
-		margin: 0;
-		background-size: 16px;
-		border: 0;
-		background-color: transparent;
-		opacity: .5;
-		color: var(--color-main-text);
-		background-position: center center;
-		vertical-align: top;
-		padding: 0.7em;
-		&:hover, &:focus, &:active {
-			background-color: var(--color-background-dark);
-		}
-
-		&.is-active::before {
-			transform: translateX(-50%);
-			border-radius: 100%;
-			position: absolute;
-			background: var(--color-primary-element);
-			bottom: 3px;
-			height: 6px;
-			width: 6px;
-			content: '';
-			left: 50%;
-
-		}
-		&.is-active,
-		&:hover,
-		&:focus {
-			opacity: 1;
-		}
-
-		&.icon-undo,
-		&.icon-redo {
-			opacity: .8;
-
-			&:disabled {
-				opacity: .4;
-			}
-		}
-	}
-
-	.menubar .submenu, .menubar .menuitem-emoji {
-		display: inline-block;
-		width: 44px;
-		height: 44px;
-		position: relative;
-		vertical-align: top;
 	}
 </style>
diff --git a/src/components/Menu/EmojiPickerAction.vue b/src/components/Menu/EmojiPickerAction.vue
new file mode 100644
index 00000000000..eaa4f29b705
--- /dev/null
+++ b/src/components/Menu/EmojiPickerAction.vue
@@ -0,0 +1,59 @@
+<!--
+  - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @author Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+<template>
+	<EmojiPicker class="entry-emoji-action entry-action"
+		:data-action-entry="actionEntry._key"
+		@selectData="addEmoji">
+		<button v-tooltip="actionEntry.label"
+			:title="actionEntry.label"
+			:aria-label="actionEntry.label"
+			:aria-haspopup="true">
+			<component :is="icon" />
+		</button>
+	</EmojiPicker>
+</template>
+
+<script>
+import { BaseActionEntry } from './ActionEntry.mixin.js'
+import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker'
+
+export default {
+	name: 'EmojiPickerAction',
+	components: {
+		EmojiPicker,
+	},
+	extends: BaseActionEntry,
+	methods: {
+		toggleChildMenu() {
+
+		},
+		addEmoji({ id, native }) {
+			this.actionEntry
+				.action(this.$editor.chain(), { id, native })
+				.focus()
+				.run()
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss" src="./ActionEntry.scss" />
diff --git a/src/components/Menu/ImageUploadAction.vue b/src/components/Menu/ImageUploadAction.vue
new file mode 100644
index 00000000000..9888629f155
--- /dev/null
+++ b/src/components/Menu/ImageUploadAction.vue
@@ -0,0 +1,84 @@
+<!--
+  - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @author Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+<template>
+	<Actions class="entry-image-upload-action entry-action"
+		:data-action-entry="actionEntry._key"
+		:title="actionEntry.label"
+		:aria-label="actionEntry.label"
+		aria-haspopup>
+		<template #icon>
+			<component :is="$isUploadingImages ? 'Loading' : actionEntry.icon"
+				:title="actionEntry.label"
+				:aria-label="actionEntry.label"
+				aria-haspopup />
+		</template>
+		<ActionButton close-after-click
+			:disabled="$isUploadingImages"
+			@click="$callChooseLocalImage">
+			<template #icon>
+				<Upload />
+			</template>
+			{{ t('text', 'Upload from computer') }}
+		</ActionButton>
+		<ActionButton v-if="!$isPublic"
+			close-after-click
+			:disabled="$isUploadingImages"
+			@click="$callImagePrompt">
+			<template #icon>
+				<Folder />
+			</template>
+			{{ t('text', 'Insert from Files') }}
+		</ActionButton>
+	</Actions>
+</template>
+
+<script>
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+
+import { Loading, Folder, Upload } from '../../components/icons.js'
+import { useIsPublic } from '../EditorWrapper.provider.js'
+import { BaseActionEntry } from './ActionEntry.mixin.js'
+import {
+	useActionImagePromptMixin,
+	useIsUploadingImagesMixin,
+	useActionChooseLocalImageMixin,
+} from '../EditorDraggable.provider.js'
+
+export default {
+	name: 'ImageUploadAction',
+	components: {
+		Actions,
+		ActionButton,
+		Loading,
+		Folder,
+		Upload,
+	},
+	extends: BaseActionEntry,
+	mixins: [
+		useIsPublic,
+		useActionImagePromptMixin,
+		useIsUploadingImagesMixin,
+		useActionChooseLocalImageMixin,
+	],
+}
+</script>
diff --git a/src/components/Menu/SingleAction.vue b/src/components/Menu/SingleAction.vue
new file mode 100644
index 00000000000..5d0651782d6
--- /dev/null
+++ b/src/components/Menu/SingleAction.vue
@@ -0,0 +1,56 @@
+<!--
+  - @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @author Vinicius Reis <vinicius@nextcloud.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<button v-tooltip="tooltip"
+		class="entry-single-action entry-action"
+		v-bind="state"
+		:title="actionEntry.label"
+		:data-action-entry="actionEntry._key"
+		v-on="$listeners"
+		@click="runAction">
+		<component :is="icon" />
+	</button>
+</template>
+
+<script>
+import { BaseActionEntry } from './ActionEntry.mixin.js'
+
+export default {
+	name: 'SingleAction',
+	extends: BaseActionEntry,
+	methods: {
+		runAction() {
+			const { actionEntry } = this
+			if (actionEntry.click) {
+				return actionEntry.click(this)
+			}
+
+			// Some actions run themselves.
+			// others still need to have .run() called upon them.
+			actionEntry.action(this.$editor.chain().focus())?.run()
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss" src="./ActionEntry.scss" />
diff --git a/src/mixins/menubar.js b/src/components/Menu/entries.js
similarity index 88%
rename from src/mixins/menubar.js
rename to src/components/Menu/entries.js
index 26f6f6fe801..2a70f9e595a 100644
--- a/src/mixins/menubar.js
+++ b/src/components/Menu/entries.js
@@ -46,10 +46,13 @@ import {
 	Emoticon,
 	Help,
 	Images,
-} from '../components/icons.js'
+} from '../icons.js'
+import EmojiPickerAction from './EmojiPickerAction.vue'
+import ImageUploadAction from './ImageUploadAction.vue'
 
 export default [
 	{
+		_key: 'undo',
 		label: t('text', 'Undo'),
 		keyChar: 'z',
 		keyModifiers: ['ctrl'],
@@ -59,6 +62,7 @@ export default [
 		priority: 5,
 	},
 	{
+		_key: 'redo',
 		label: t('text', 'Redo'),
 		keyChar: 'y',
 		keyModifiers: ['ctrl'],
@@ -68,6 +72,7 @@ export default [
 		priority: 11,
 	},
 	{
+		_key: 'bold',
 		label: t('text', 'Bold'),
 		keyChar: 'b',
 		keyModifiers: ['ctrl'],
@@ -80,6 +85,7 @@ export default [
 		priority: 6,
 	},
 	{
+		_key: 'italic',
 		label: t('text', 'Italic'),
 		keyChar: 'i',
 		keyModifiers: ['ctrl'],
@@ -92,6 +98,7 @@ export default [
 		priority: 7,
 	},
 	{
+		_key: 'underline',
 		label: t('text', 'Underline'),
 		keyChar: 'u',
 		keyModifiers: ['ctrl'],
@@ -104,6 +111,7 @@ export default [
 		priority: 14,
 	},
 	{
+		_key: 'strikethrough',
 		label: t('text', 'Strikethrough'),
 		keyChar: 'd',
 		keyModifiers: ['ctrl'],
@@ -116,6 +124,7 @@ export default [
 		priority: 15,
 	},
 	{
+		_key: 'headings',
 		label: t('text', 'Headings'),
 		keyChar: '1…6',
 		keyModifiers: ['ctrl', 'shift'],
@@ -123,6 +132,7 @@ export default [
 		icon: FormatHeader1,
 		children: [
 			{
+				_key: 'headings-01',
 				label: t('text', 'Heading 1'),
 				class: 'icon-h1',
 				icon: FormatHeader1,
@@ -132,6 +142,7 @@ export default [
 				},
 			},
 			{
+				_key: 'headings-02',
 				label: t('text', 'Heading 2'),
 				class: 'icon-h2',
 				icon: FormatHeader2,
@@ -141,6 +152,7 @@ export default [
 				},
 			},
 			{
+				_key: 'headings-03',
 				label: t('text', 'Heading 3'),
 				class: 'icon-h3',
 				icon: FormatHeader3,
@@ -150,6 +162,7 @@ export default [
 				},
 			},
 			{
+				_key: 'headings-04',
 				label: t('text', 'Heading 4'),
 				class: 'icon-h4',
 				isActive: ['heading', { level: 4 }],
@@ -159,6 +172,7 @@ export default [
 				},
 			},
 			{
+				_key: 'headings-05',
 				label: t('text', 'Heading 5'),
 				class: 'icon-h5',
 				isActive: ['heading', { level: 5 }],
@@ -168,6 +182,7 @@ export default [
 				},
 			},
 			{
+				_key: 'headings-06',
 				label: t('text', 'Heading 6'),
 				class: 'icon-h6',
 				isActive: ['heading', { level: 6 }],
@@ -180,6 +195,7 @@ export default [
 		priority: 1,
 	},
 	{
+		_key: 'unordered-list',
 		label: t('text', 'Unordered list'),
 		keyChar: '8',
 		keyModifiers: ['ctrl', 'shift'],
@@ -192,6 +208,7 @@ export default [
 		priority: 8,
 	},
 	{
+		_key: 'ordered-list',
 		label: t('text', 'Ordered list'),
 		keyChar: '9',
 		keyModifiers: ['ctrl', 'shift'],
@@ -204,6 +221,7 @@ export default [
 		priority: 9,
 	},
 	{
+		_key: 'todo-list',
 		label: t('text', 'ToDo list'),
 		class: 'icon-tasklist',
 		isActive: 'taskList',
@@ -212,6 +230,7 @@ export default [
 		priority: 10,
 	},
 	{
+		_key: 'blockquote',
 		label: t('text', 'Blockquote'),
 		keyChar: '>',
 		keyModifiers: ['ctrl'],
@@ -224,11 +243,13 @@ export default [
 		priority: 12,
 	},
 	{
+		_key: 'callouts',
 		label: t('text', 'Callouts'),
 		visible: false,
 		icon: Info,
 		children: [
 			{
+				_key: 'info',
 				label: t('text', 'Info'),
 				class: 'icon-info',
 				isActive: ['callout', { type: 'info' }],
@@ -238,6 +259,7 @@ export default [
 				},
 			},
 			{
+				_key: 'success',
 				label: t('text', 'Success'),
 				class: 'icon-success',
 				isActive: ['callout', { type: 'success' }],
@@ -247,6 +269,7 @@ export default [
 				},
 			},
 			{
+				_key: 'warning',
 				label: t('text', 'Warning'),
 				class: 'icon-warn',
 				isActive: ['callout', { type: 'warn' }],
@@ -256,6 +279,7 @@ export default [
 				},
 			},
 			{
+				_key: 'danger',
 				label: t('text', 'Danger'),
 				class: 'icon-error',
 				isActive: ['callout', { type: 'error' }],
@@ -268,6 +292,7 @@ export default [
 		priority: 3,
 	},
 	{
+		_key: 'code-block',
 		label: t('text', 'Code block'),
 		class: 'icon-code',
 		isActive: 'codeBlock',
@@ -278,6 +303,7 @@ export default [
 		priority: 13,
 	},
 	{
+		_key: 'table',
 		label: t('text', 'Table'),
 		class: 'icon-table',
 		isActive: 'table',
@@ -288,21 +314,26 @@ export default [
 		priority: 16,
 	},
 	{
-		label: t('text', 'Emoji picker'),
+		_key: 'emoji-picker',
+		label: t('text', 'Insert emoji'),
 		class: 'icon-emoji',
 		icon: Emoticon,
-		action: (command, emojiObject) => {
+		component: EmojiPickerAction,
+		action: (command, emojiObject = {}) => {
 			return command.emoji(emojiObject)
 		},
 		priority: 4,
 	},
 	{
+		_key: 'insert-image',
 		label: t('text', 'Insert image'),
 		class: 'icon-image',
 		icon: Images,
+		component: ImageUploadAction,
 		priority: 2,
 	},
 	{
+		_key: 'formatting-help',
 		label: t('text', 'Formatting help'),
 		class: 'icon-help',
 		icon: Help,
diff --git a/src/components/Menu/utils.js b/src/components/Menu/utils.js
new file mode 100644
index 00000000000..896230fc854
--- /dev/null
+++ b/src/components/Menu/utils.js
@@ -0,0 +1,80 @@
+/*
+ * @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @author Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+const translations = {
+	ctrl: t('text', 'Ctrl'),
+	alt: t('text', 'Alt'),
+	shift: t('text', 'Shift'),
+}
+
+const getEntryClasses = (actionEntry, isActive) => {
+	return {
+		'is-active': isActive,
+		[`action-menu-${actionEntry._key}`]: true,
+	}
+}
+
+const keysString = (keyChar, modifiers = []) => {
+	return Object.entries(translations)
+		.filter(([k, v]) => modifiers.includes(k))
+		.map(([k, v]) => v)
+		.concat(keyChar.toUpperCase())
+		.join('+')
+}
+
+const getKeys = (isMobile, { keyChar, keyModifiers }) => {
+	return (!isMobile && keyChar)
+		? `(${keysString(keyChar, keyModifiers)})`
+		: ''
+}
+
+const isDisabled = (actionEntry, $editor) => {
+	return actionEntry.action && !actionEntry.action($editor.can())
+}
+
+const getIsActive = ({ isActive }, $editor) => {
+	if (!isActive) {
+		return false
+	}
+
+	const args = Array.isArray(isActive)
+		? isActive
+		: [isActive]
+
+	return $editor.isActive(...args)
+}
+
+const getActionState = (actionEntry, $editor) => {
+	const active = getIsActive(actionEntry, $editor)
+
+	return {
+		disabled: isDisabled(actionEntry, $editor),
+		class: getEntryClasses(actionEntry, active),
+	}
+}
+
+export {
+	isDisabled,
+	getKeys,
+	getEntryClasses,
+	getActionState,
+}
diff --git a/src/components/icons.js b/src/components/icons.js
index 43e63bfd132..bfc53cde2e3 100644
--- a/src/components/icons.js
+++ b/src/components/icons.js
@@ -1,3 +1,25 @@
+/*
+ * @copyright Copyright (c) 2022 Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @author Vinicius Reis <vinicius@nextcloud.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 import MdiLoading from 'vue-material-design-icons/Loading'
 
 export { default as Lock } from 'vue-material-design-icons/Lock'