diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue index bcff801ccf..898b76c1c7 100644 --- a/src/components/NcRichContenteditable/NcRichContenteditable.vue +++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue @@ -210,6 +210,48 @@ export default { ``` +### Using methods + +```vue + + + + Slash commands + Focus on input + + + + + + +``` + @@ -922,6 +964,8 @@ export default { this.getTributeContainer().setAttribute('class', this.tribute.current.collection.containerClass || this.$style['tribute-container']) this.setupTributeIntegration() + // Remove the event handler if any + document.removeEventListener('click', this.hideTribute) } else { // Cancel loading data for autocomplete // Otherwise it could be received when another autocomplete is already opened @@ -1001,6 +1045,28 @@ export default { this.getTributeContainer().classList.remove(this.$style['tribute-container--focus-visible']) } }, + + /** + * Show tribute menu programmatically. If using a click event, stop propagation to prevent closing the menu + * @param {string} trigger - trigger character, can be '/', '@', or ':' + * + * @public + */ + showTribute(trigger) { + this.focus() + const index = this.tribute.collection.findIndex(collection => collection.trigger === trigger) + this.tribute.showMenuForCollection(this.$refs.contenteditable, index) + document.addEventListener('click', this.hideTribute) + }, + + /** + * Hide tribute menu programmatically + * + */ + hideTribute() { + this.tribute.hideMenu() + document.removeEventListener('click', this.hideTribute) + }, }, }