feat(NcRichContenteditable): programmatically show tributes

Signed-off-by: DorraJaouad <[email protected]>

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -32,7 +32,9 @@ Try mentioning user @Test01 or inserting emoji :smile
 ```vue
 <template>
 	<div>
+		<NcButton class="show-slash-button" @click.stop="showSlashCommands('/')">Slash commands</NcButton>
 		<NcRichContenteditable
+			ref="contenteditable"
 			label="Write a comment"
 			:value.sync="message"
 			:auto-complete="autoComplete"
@@ -194,7 +196,10 @@ export default {
 		},
 		onSubmit() {
 			alert(this.message)
-		}
+		},
+		showSlashCommands(trigger) {
+			this.$refs.contenteditable.showTribute(trigger)
+		},
 	}
 }
 </script>
@@ -922,6 +927,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 +1008,28 @@ export default {
 				this.getTributeContainer().classList.remove(this.$style['tribute-container--focus-visible'])
 			}
 		},
+
+		/**
+		 * show tribute menu programmatically
+		 * @param {string} trigger - trigger character
+		 *
+		 * @public
+		 */
+		showTribute(trigger) {
+			this.$refs.contenteditable.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)
+		},
 	},
 }
 </script>