show autocomplete

src/components/NoteEditor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import CKEditor from '@/ckeditor/CKEditor'
 import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
@@ -54,18 +55,35 @@ const editorConfig = {
   },
 }
 
+const editorElement = ref<HTMLInputElement | null>(null)
+
 const handleClick = ({ data }: { data: any }) => {
   const noteTitle = data.domTarget.textContent as string
   const note = getNoteByTitle(noteTitle)
   if (note) activeNote.value = note
 }
 
+const showAutocomplete = ref(false)
+const autocompleteStyle = ref<any>({})
+const autocompleteText = ref('')
 const handleAutocomplete = (event: any) => {
-  console.log(event.data)
+  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')
+    )
+    autocompleteStyle.value = {
+      top: `${position.top - rect.top + fontSize}` + 'px',
+      left: `${position.left - rect.left}` + 'px',
+    }
+  }
+  autocompleteText.value = event.autocompleteText
+  showAutocomplete.value = event.show
 }
 </script>
 <template>
-  <div>
+  <div class="relative" ref="editorElement">
     <CKEditor
       class="h-full"
       :editor="editor"
@@ -74,6 +92,13 @@ 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"
+      v-if="showAutocomplete"
+    >
+      {{ autocompleteText }}
+    </div>
   </div>
 </template>
 <style>