diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue index 519386f089..9beb71661b 100644 --- a/src/components/NcRichContenteditable/NcRichContenteditable.vue +++ b/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) {