autocomplete styling

src/components/Autocomplete.vue

@@ -16,7 +16,7 @@ const results = computed<Note[]>(() => {
 <template>
   <ul
     tabindex="0"
-    class="menu mt-2 w-full rounded-md border-[1px] bg-base-100 p-2 text-[0.875rem] text-black shadow-md"
+    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">

src/components/NoteEditor.vue

@@ -65,21 +65,21 @@ const handleClick = ({ data }: { data: any }) => {
 }
 
 const showAutocomplete = ref(false)
-const autocompleteStyle = ref<any>({})
+const autocompleteStyle = ref({})
 const autocompleteText = ref('')
-const handleAutocomplete = (event: any) => {
+const handleAutocomplete = (event: AutocompleteEvent) => {
   const position = event.position
   if (position && editorElement.value) {
     const rect: any = editorElement.value?.getBoundingClientRect()
-    const fontSize = parseFloat(
-      window.getComputedStyle(editorElement.value, null).getPropertyValue('font-size')
+    const lineHeight = parseFloat(
+      window.getComputedStyle(event.domElement || editorElement.value).lineHeight
     )
     autocompleteStyle.value = {
-      top: `${position.top - rect.top + fontSize}` + 'px',
-      left: `${position.left - rect.left}` + 'px',
+      top: `${position.top - rect.top + lineHeight}px`,
+      left: `${position.left - rect.left}px`,
     }
   }
-  autocompleteText.value = event.autocompleteText
+  autocompleteText.value = event.autocompleteText || ''
   showAutocomplete.value = event.show
 }
 </script>
@@ -97,7 +97,7 @@ const handleAutocomplete = (event: any) => {
       v-if="showAutocomplete"
       :autocomplete-text="autocompleteText"
       :style="autocompleteStyle"
-      class="absolute mt-1 w-[250px]"
+      class="absolute w-[250px]"
     />
   </div>
 </template>