autocomplete cycle logic

src/ckeditor/ContextedPlugin.ts

@@ -130,7 +130,6 @@ export default class ContextedLinkEditing extends Plugin {
               ?.textNode as any
             fireAutocompleteEvent(editor, true, autocompleteNode)
           }
-          console.log(keyCode)
           this.editor.model.document.fire('contextedKeypress', { keyCode })
           data.preventDefault(evt.stop())
         }

src/components/Autocomplete.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import SearchResult from '@/components/Search/SearchResult.vue'
 import { notes, findNotesByByTitle, activeNote } from '@/composables/useNotes'
 
@@ -7,12 +7,29 @@ const props = defineProps<{
   autocompleteText: string
 }>()
 
+const emit = defineEmits<{
+  (e: 'createLink', title: string): void
+}>()
+
 const results = computed<Note[]>(() => {
   return (
     props.autocompleteText ? findNotesByByTitle(props.autocompleteText) : notes.value
   ).filter((note) => note.id !== activeNote.value?.id)
 })
 
+const activeResult = ref<Note>()
+
+const changeActiveResult = (direction: number) => {
+  const index = results.value.findIndex((note) => note.id === activeResult.value?.id)
+  const newIndex =
+    index + direction < results.value.length
+      ? index + direction >= -1
+        ? index + direction
+        : results.value.length - 1
+      : -1
+  activeResult.value = newIndex >= 0 ? results.value[newIndex] : undefined
+}
+
 const handleKeypress = (event: { [key: string]: number }) => {
   const keyCode = event.keyCode
   const keyCodes = {
@@ -21,9 +38,13 @@ const handleKeypress = (event: { [key: string]: number }) => {
   }
   if (keyCodes.cycle.includes(keyCode)) {
     const direction = keyCode === 38 ? -1 : 1
-    // console.log(direction)
+    console.log(direction)
+    changeActiveResult(direction)
   } else if (keyCodes.confirm.includes(keyCode)) {
-    // console.log('confirm')
+    const contextedLink = activeResult.value
+      ? activeResult.value.title
+      : props.autocompleteText
+    emit('createLink', contextedLink)
   }
 }
 defineExpose({ handleKeypress })
@@ -34,11 +55,15 @@ defineExpose({ handleKeypress })
     class="menu rounded-md border-[1px] bg-base-100 p-2 text-[0.875rem] text-black shadow-md"
   >
     <li class="flex flex-row">
-      <a class="active flex-1 px-2 py-1">
+      <a class="flex-1 px-2 py-1" :class="!activeResult && 'active'">
         <span class="flex-1">{{ props.autocompleteText }}</span>
         <i class="fas fa-plus-circle ml-auto text-white" />
       </a>
     </li>
-    <SearchResult v-for="result in results" :result="result" />
+    <SearchResult
+      v-for="result in results"
+      :result="result"
+      :active-result="activeResult"
+    />
   </ul>
 </template>

src/components/NoteEditor.vue

@@ -88,6 +88,10 @@ const handleAutocomplete = (event: AutocompleteEvent) => {
 const handleContextedKeypress = (event: any) => {
   if (autocompleteRef.value) autocompleteRef.value.handleKeypress(event)
 }
+
+const createLink = (link: string) => {
+  console.log(link)
+}
 </script>
 <template>
   <div class="relative" ref="editorElement">
@@ -105,6 +109,7 @@ const handleContextedKeypress = (event: any) => {
       ref="autocompleteRef"
       :autocomplete-text="autocompleteText"
       :style="autocompleteStyle"
+      @create-link="createLink"
       class="absolute w-[250px]"
     />
   </div>