From 62e5f24d680978778e6aec79093cff8f65f772df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20Villeneuve?= <mvilleneuve.pro@gmail.com>
Date: Wed, 8 Dec 2021 13:50:11 +0100
Subject: [PATCH] feat: add replaceWith param to apply event (#61)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
---
 packages/docs/src/README.md                 | 5 +++++
 packages/test-e2e/src/views/Events.vue      | 8 ++++++--
 packages/test-e2e/tests/e2e/specs/events.js | 1 +
 packages/vue-mention/src/Mentionable.vue    | 2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/README.md b/packages/docs/src/README.md
index f0b7212..68f26b3 100644
--- a/packages/docs/src/README.md
+++ b/packages/docs/src/README.md
@@ -73,6 +73,10 @@ export default {
     onOpen (key) {
       this.items = key === '@' ? users : issues
     },
+
+    onApply (item, key, replacedWith) {
+      console.log(item, `has been replaced with ${replacedWith}`)
+    }
   },
 }
 </script>
@@ -84,6 +88,7 @@ export default {
     offset="6"
     insert-space
     @open="onOpen"
+    @apply="onApply"
   >
     <textarea
       v-model="text"
diff --git a/packages/test-e2e/src/views/Events.vue b/packages/test-e2e/src/views/Events.vue
index 42d2e1d..76c82d3 100644
--- a/packages/test-e2e/src/views/Events.vue
+++ b/packages/test-e2e/src/views/Events.vue
@@ -36,7 +36,7 @@ export default {
       @search="searchText = $event"
       @open="openKey = $event"
       @close="closeKey = $event"
-      @apply="(item, key) => applyEvent = { item, key }"
+      @apply="(item, key, replacedWith) => applyEvent = { item, key, replacedWith }"
     >
       <textarea
         v-model="text"
@@ -48,6 +48,10 @@ export default {
     <div class="search">{{ searchText }}</div>
     <div class="open">{{ openKey }}</div>
     <div class="close">{{ closeKey }}</div>
-    <div class="apply">value: {{ applyEvent ? applyEvent.item.value : null }} key: {{ applyEvent ? applyEvent.key : null }}</div>
+    <div class="apply">
+      value: {{ applyEvent ? applyEvent.item.value : null }}
+      key: {{ applyEvent ? applyEvent.key : null }}
+      replacedWith: {{ applyEvent ? applyEvent.replacedWith : null }}
+    </div>
   </div>
 </template>
diff --git a/packages/test-e2e/tests/e2e/specs/events.js b/packages/test-e2e/tests/e2e/specs/events.js
index e8a41cb..1f425e5 100644
--- a/packages/test-e2e/tests/e2e/specs/events.js
+++ b/packages/test-e2e/tests/e2e/specs/events.js
@@ -25,5 +25,6 @@ describe('events', () => {
     cy.get('.input').type('{downArrow}{enter}')
     cy.get('.apply').should('contain', 'value: posva')
       .should('contain', 'key: @')
+      .should('contain', 'replacedWith: @posva')
   })
 })
diff --git a/packages/vue-mention/src/Mentionable.vue b/packages/vue-mention/src/Mentionable.vue
index 0596ad1..f1c4a44 100644
--- a/packages/vue-mention/src/Mentionable.vue
+++ b/packages/vue-mention/src/Mentionable.vue
@@ -333,7 +333,7 @@ export default {
         this.setValue(this.replaceText(this.getValue(), this.searchText, value, this.keyIndex))
         this.setCaretPosition(this.keyIndex + value.length)
       }
-      this.$emit('apply', item, this.key)
+      this.$emit('apply', item, this.key, value)
       this.closeMenu()
     },