From 12041956b08285c3ecbdef75a8044ce520a0790c Mon Sep 17 00:00:00 2001
From: Ricardo Arturo Cabral Mejia <me@ricardocabral.io>
Date: Sun, 30 Jan 2022 02:12:52 +0000
Subject: [PATCH] feat: add mention menu to publish & replies

---
 src/components/Publish.vue | 21 ++++++++++++++++++++-
 src/components/Reply.vue   | 18 ++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/Publish.vue b/src/components/Publish.vue
index cc1aad1..ac1fac5 100644
--- a/src/components/Publish.vue
+++ b/src/components/Publish.vue
@@ -3,6 +3,7 @@
     <q-card-section>
       <q-form @submit="sendPost">
         <q-input
+          ref="input"
           v-model="text"
           autogrow
           autofocus
@@ -44,9 +45,27 @@ export default {
 
   data() {
     return {
-      text: ''
+      text: '',
     }
   },
+
+  computed: {
+    textarea() {
+      return this.$refs.input.$el.querySelector('textarea')
+    },
+    mentions() {
+      return this.createMentionsProvider()
+    }
+  },
+
+  mounted() {
+    this.mentions.attach(this.textarea)
+  },
+
+  beforeUnmount() {
+    this.mentions.detach(this.textarea)
+  },
+
   methods: {
     async sendPost() {
       if (!this.text.length) {
diff --git a/src/components/Reply.vue b/src/components/Reply.vue
index c2cfd93..2a384d9 100644
--- a/src/components/Reply.vue
+++ b/src/components/Reply.vue
@@ -1,6 +1,7 @@
 <template>
   <q-form class="px-24" @submit="sendReply">
     <q-input
+      ref="input"
       v-model="text"
       autogrow
       autofocus
@@ -32,6 +33,23 @@ export default {
     }
   },
 
+  computed: {
+    textarea() {
+      return this.$refs.input.$el.querySelector('textarea')
+    },
+    mentions() {
+      return this.createMentionsProvider()
+    }
+  },
+
+  mounted() {
+    this.mentions.attach(this.textarea)
+  },
+
+  beforeUnmount() {
+    this.mentions.detach(this.textarea)
+  },
+
   methods: {
     async sendReply() {
       if (!this.text.length) {