improve autocomplete working

src/components/Autocomplete.vue

@@ -12,6 +12,21 @@ const results = computed<Note[]>(() => {
     props.autocompleteText ? findNotesByByTitle(props.autocompleteText) : notes.value
   ).filter((note) => note.id !== activeNote.value?.id)
 })
+
+const handleKeypress = (event: { [key: string]: number }) => {
+  const keyCode = event.keyCode
+  const keyCodes = {
+    cycle: [38, 40],
+    confirm: [13],
+  }
+  if (keyCodes.cycle.includes(keyCode)) {
+    const direction = keyCode === 38 ? -1 : 1
+    // console.log(direction)
+  } else if (keyCodes.confirm.includes(keyCode)) {
+    // console.log('confirm')
+  }
+}
+defineExpose({ handleKeypress })
 </script>
 <template>
   <ul

src/components/NoteEditor.vue

@@ -64,9 +64,11 @@ const handleClick = ({ data }: { data: any }) => {
   if (note) activeNote.value = note
 }
 
+const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null)
 const showAutocomplete = ref(false)
 const autocompleteStyle = ref({})
 const autocompleteText = ref('')
+
 const handleAutocomplete = (event: AutocompleteEvent) => {
   const position = event.position
   if (position && editorElement.value) {
@@ -82,6 +84,10 @@ const handleAutocomplete = (event: AutocompleteEvent) => {
   autocompleteText.value = event.autocompleteText || ''
   showAutocomplete.value = event.show
 }
+
+const handleContextedKeypress = (event: any) => {
+  if (autocompleteRef.value) autocompleteRef.value.handleKeypress(event)
+}
 </script>
 <template>
   <div class="relative" ref="editorElement">
@@ -92,9 +98,11 @@ const handleAutocomplete = (event: AutocompleteEvent) => {
       :config="editorConfig"
       @click="handleClick"
       @contexted-link-autocomplete="handleAutocomplete"
+      @contexted-keypress="handleContextedKeypress"
     ></CKEditor>
     <Autocomplete
       v-if="showAutocomplete"
+      ref="autocompleteRef"
       :autocomplete-text="autocompleteText"
       :style="autocompleteStyle"
       class="absolute w-[250px]"