autocomplete vertical bounding box

src/components/Autocomplete.vue

@@ -38,7 +38,6 @@ const handleKeypress = (event: { [key: string]: number }) => {
   }
   if (keyCodes.cycle.includes(keyCode)) {
     const direction = keyCode === 38 ? -1 : 1
-    console.log(direction)
     changeActiveResult(direction)
   } else if (keyCodes.confirm.includes(keyCode)) {
     const contextedLink = activeResult.value

src/components/NoteEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 import CKEditor from '@/ckeditor/CKEditor'
 import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
@@ -68,8 +68,9 @@ const autocompleteRef = ref<InstanceType<typeof Autocomplete> | null>(null)
 const showAutocomplete = ref(false)
 const autocompleteStyle = ref({})
 const autocompleteText = ref('')
+const autocompleteReverse = ref(false)
 
-const handleAutocomplete = (event: AutocompleteEvent) => {
+const handleAutocomplete = async (event: AutocompleteEvent) => {
   const position = event.position
   if (position && editorElement.value) {
     const rect: any = editorElement.value?.getBoundingClientRect()
@@ -83,6 +84,27 @@ const handleAutocomplete = (event: AutocompleteEvent) => {
   }
   autocompleteText.value = event.autocompleteText || ''
   showAutocomplete.value = event.show
+  await nextTick()
+  const autocompleteElem = autocompleteRef.value?.$el
+  const autocompleteRect = autocompleteRef.value?.$el.getBoundingClientRect()
+  const editorRect = editorElement.value?.getBoundingClientRect()
+  if (
+    autocompleteElem &&
+    autocompleteRect &&
+    editorRect &&
+    autocompleteRect.bottom > editorRect.bottom
+  ) {
+    const autocompleteHeight = parseFloat(
+      window.getComputedStyle(autocompleteElem).height
+    )
+    autocompleteStyle.value = {
+      ...autocompleteStyle.value,
+      top: `${position.top - editorRect.top - autocompleteHeight}px`,
+    }
+    autocompleteReverse.value = true
+  } else {
+    autocompleteReverse.value = false
+  }
 }
 
 const handleContextedKeypress = (event: any) => {
@@ -111,6 +133,7 @@ const createLink = (link: string) => {
       :style="autocompleteStyle"
       @create-link="createLink"
       class="absolute w-[250px]"
+      :class="autocompleteReverse && 'flex-col-reverse'"
     />
   </div>
 </template>