From 06728824add32f59b7d0158722dfc51d0581a906 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 17:02:03 +0100
Subject: [PATCH] refactoring

---
 docs/src/demos/Nodes/Mention/MentionList.vue | 23 ++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index 6812eef29..5a6257514 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="items">
-    <div
+    <button
       class="item"
       :class="{ 'is-selected': index === selectedIndex }"
       v-for="(item, index) in items"
       :key="index"
+      @click="selectItem(index)"
     >
       {{ item }}
-    </div>
+    </button>
   </div>
 </template>
 
@@ -18,6 +19,11 @@ export default {
       type: Array,
       default: () => [],
     },
+
+    command: {
+      type: Function,
+      default: () => true,
+    },
   },
 
   data() {
@@ -61,10 +67,14 @@ export default {
     },
 
     enterHandler() {
-      const item = this.items[this.selectedIndex]
+      this.selectItem(this.selectedIndex)
+    },
+
+    selectItem(index) {
+      const item = this.items[index]
 
       if (item) {
-        console.log('select', item)
+        this.command(item)
       }
     },
   },
@@ -85,6 +95,11 @@ export default {
   ;
 }
 .item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
   padding: 0.2rem 0.5rem;
 
   &.is-selected,