autocomplete styling

src/components/NoteEditor.vue

@@ -15,6 +15,7 @@ import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
 import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml } from '@/utils/markdown'
 import { activeNote, getNoteByTitle } from '@/composables/useNotes'
+import Autocomplete from '@/components/Autocomplete.vue'
 
 const props = defineProps<{
   note: Note
@@ -92,13 +93,12 @@ const handleAutocomplete = (event: any) => {
       @click="handleClick"
       @contexted-link-autocomplete="handleAutocomplete"
     ></CKEditor>
-    <div
-      class="absolute mt-1 border-red-500 bg-primary text-white"
-      :style="autocompleteStyle"
+    <Autocomplete
       v-if="showAutocomplete"
-    >
-      {{ autocompleteText }}
-    </div>
+      :autocomplete-text="autocompleteText"
+      :style="autocompleteStyle"
+      class="absolute mt-1 w-[250px]"
+    />
   </div>
 </template>
 <style>