Merge pull request #8424 from nextcloud-libraries/backport/8417/stable8

Author: Antreesy

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -381,11 +381,12 @@ export default {
 		},
 
 		/**
-		 * The containing element for the menu popover
+		 * The containing element or selector for the tribute (menu popover)
+		 * Defaults to `body` element
 		 */
 		menuContainer: {
-			type: Element,
-			default: () => document.body,
+			type: [String, Element, null],
+			default: null,
 		},
 
 		/**
@@ -601,11 +602,6 @@ export default {
 
 		// Update default value
 		this.updateContent(this.model)
-
-		// Tribute.js library ensures that `el.contentEditable = true` when attaching to element.
-		// This overwrites the template binding.
-		// Set the contenteditable attribute to actual value afterward
-		this.$refs.contenteditable.contentEditable = this.contenteditableAttributeValue
 	},
 
 	beforeDestroy() {
@@ -722,15 +718,26 @@ export default {
 				})
 			}
 
+			// Resolve container for Tribute.js to be mounted to (default - `null`)
+			const menuContainer = (typeof this.menuContainer === 'string')
+				? document.querySelector(this.menuContainer)
+				: this.menuContainer
+
 			this.tribute = new Tribute({
 				collection: tributesCollection,
 				// FIXME: tributejs doesn't support allowSpaces as a collection option, only as a global one
 				// Requires to fork a library to allow spaces only in the middle of mentions ('@' trigger)
 				allowSpaces: false,
 				// Where to inject the menu popup
-				menuContainer: this.menuContainer,
+				menuContainer,
 			})
 			this.tribute.attach(this.$refs.contenteditable)
+
+			// Tribute.js library v5.1.3 ensures that `el.contentEditable = true` when attaching to element.
+			// This overwrites the template binding.
+			// Set the contenteditable attribute to actual value afterward
+			// TODO remove when Tribute.js library v5.1.4 is published on npm (or fork it)
+			this.$refs.contenteditable.contentEditable = this.contenteditableAttributeValue
 		},
 
 		getLink(item) {