From bb71cf597e22fd33fc9408549614e1dd6a5071b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 18 Jan 2021 16:45:49 +0100
Subject: [PATCH] add basic keyboard navigation

---
 docs/src/demos/Nodes/Mention/MentionList.vue | 71 +++++++++++++++++++-
 docs/src/demos/Nodes/Mention/index.vue       |  3 +
 packages/suggestion/src/suggestion.ts        |  8 +--
 3 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/docs/src/demos/Nodes/Mention/MentionList.vue b/docs/src/demos/Nodes/Mention/MentionList.vue
index ef9f6b98..09ae201e 100644
--- a/docs/src/demos/Nodes/Mention/MentionList.vue
+++ b/docs/src/demos/Nodes/Mention/MentionList.vue
@@ -1,6 +1,11 @@
 <template>
-  <div>
-    <div v-for="(item, index) in items" :key="index">
+  <div class="items">
+    <div
+      class="item"
+      :class="{ 'is-selected': index === selectedIndex }"
+      v-for="(item, index) in items"
+      :key="index"
+    >
       {{ item }}
     </div>
   </div>
@@ -14,9 +19,69 @@ export default {
       default: () => [],
     },
   },
+
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+
+  watch: {
+    items() {
+      this.selectedIndex = 0
+    },
+  },
+
+  methods: {
+    onKeyDown({ event }) {
+      if (event.key === 'ArrowUp') {
+        this.upHandler()
+        return true
+      }
+
+      if (event.key === 'ArrowDown') {
+        this.downHandler()
+        return true
+      }
+
+      if (event.key === 'Enter') {
+        this.enterHandler()
+        return true
+      }
+
+      return false
+    },
+
+    upHandler() {
+      this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length
+    },
+
+    downHandler() {
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length
+    },
+
+    enterHandler() {
+      const item = this.items[this.selectedIndex]
+
+      if (item) {
+        console.log('select', item)
+      }
+    },
+  },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.items {
+  position: relative;
+}
+.item {
+  background: white;
+  color: black;
+  padding: 0.5rem;
 
+  &.is-selected {
+    background: #ccc;
+  }
+}
 </style>
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index dd671d14..de380edc 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -58,6 +58,9 @@ export default {
               onUpdate(props) {
                 component.updateProps(props)
               },
+              onKeyDown(props) {
+                return component.vm.onKeyDown(props)
+              },
               onExit() {
                 popup[0].destroy()
                 component.destroy()
diff --git a/packages/suggestion/src/suggestion.ts b/packages/suggestion/src/suggestion.ts
index 809547af..baa0898c 100644
--- a/packages/suggestion/src/suggestion.ts
+++ b/packages/suggestion/src/suggestion.ts
@@ -13,10 +13,10 @@ export interface SuggestionOptions {
   command?: () => any,
   items?: (query: string) => any[],
   renderer?: () => {
-    onStart?: (props: any) => any,
-    onUpdate?: (props: any) => any,
-    onExit?: (props: any) => any,
-    onKeyDown?: (props: any) => any,
+    onStart?: (props: any) => void,
+    onUpdate?: (props: any) => void,
+    onExit?: (props: any) => void,
+    onKeyDown?: (props: any) => boolean,
   },
 }