feat: add replaceWith param to apply event (#61)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
Akryum · Dec 8, 2021 · 62e5f24 · 62e5f24
1 parent 6404052
commit 62e5f24
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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()
     },