🐛 (#2842): use menu bar as container for emoji and list actions

Signed-off-by: Vinicius Reis <[email protected]>

src/components/Menu/ActionList.vue

@@ -25,6 +25,7 @@
 		class="entry-list-action entry-action"
 		role="menu"
 		v-bind="state"
+		:container="menuIDSelector"
 		:aria-label="actionEntry.label"
 		:title="actionEntry.label"
 		:data-text-action-entry="actionEntry.key"
@@ -48,12 +49,13 @@ import ActionSingle from './ActionSingle.vue'
 import { getIsActive } from './utils.js'
 import { useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
 import useStore from '../../mixins/store.js'
+import { useMenuIDMixin } from './MenuBar.provider.js'
 
 export default {
 	name: 'ActionList',
 	components: { NcActions, ActionSingle },
 	extends: BaseActionEntry,
-	mixins: [useStore, useOutlineStateMixin],
+	mixins: [useStore, useOutlineStateMixin, useMenuIDMixin],
 	computed: {
 		currentChild() {
 			const {

src/components/Menu/EmojiPickerAction.vue

@@ -22,6 +22,7 @@
 <template>
 	<NcEmojiPicker class="entry-action entry-action__emoji"
 		:data-text-action-entry="actionEntry.key"
+		:container="menuIDSelector"
 		@selectData="addEmoji">
 		<NcButton v-tooltip="actionEntry.label"
 			class="entry-action__button"
@@ -39,6 +40,7 @@
 <script>
 import { BaseActionEntry } from './BaseActionEntry.js'
 import { NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { useMenuIDMixin } from './MenuBar.provider.js'
 
 export default {
 	name: 'EmojiPickerAction',
@@ -47,11 +49,10 @@ export default {
 		NcButton,
 	},
 	extends: BaseActionEntry,
+	mixins: [useMenuIDMixin],
 	methods: {
-		toggleChildMenu() {
-
-		},
 		addEmoji({ id, native }) {
+			console.log({ id, native })
 			this.actionEntry
 				.action(this.$editor.chain(), { id, native })
 				.focus()

src/components/Menu/MenuBar.provider.js

@@ -0,0 +1,12 @@
+export const MENU_ID = Symbol('menu::id')
+
+export const useMenuIDMixin = {
+	inject: {
+		$menuID: { from: MENU_ID, default: null },
+	},
+	computed: {
+		menuIDSelector() {
+			return `#${this.$menuID}`
+		},
+	},
+}

src/components/Menu/MenuBar.vue

@@ -22,7 +22,8 @@
   -->
 
 <template>
-	<div class="text-menubar"
+	<div :id="randomID"
+		class="text-menubar"
 		data-text-el="menubar"
 		role="menubar"
 		:aria-label="t('text', 'Formatting menu bar')"
@@ -57,6 +58,7 @@ import debounce from 'debounce'
 import HelpModal from '../HelpModal.vue'
 import actionsFullEntries from './entries.js'
 import ActionEntry from './ActionEntry.js'
+import { MENU_ID } from './MenuBar.provider.js'
 import { DotsHorizontal } from '../icons.js'
 import {
 	useEditorMixin,
@@ -72,6 +74,17 @@ export default {
 		useIsRichEditorMixin,
 		useIsRichWorkspaceMixin,
 	],
+	provide() {
+		const val = {}
+
+		Object.defineProperties(val, {
+			[MENU_ID]: {
+				get: () => this.randomID,
+			},
+		})
+
+		return val
+	},
 	props: {
 		autohide: {
 			type: Boolean,
@@ -80,6 +93,7 @@ export default {
 	},
 	data() {
 		return {
+			randomID: `menu-bar-${(Math.ceil((Math.random() * 10000) + 500)).toString(16)}`,
 			displayHelp: false,
 			forceRecompute: 0,
 			isReady: false,