autocomplete styling

src/ckeditor/ContextedPlugin.ts

@@ -101,11 +101,6 @@ export default class ContextedLinkEditing extends Plugin {
         node?.hasAttribute('autocomplete')
       )
 
-      interface AutocompleteEvent {
-        position?: any
-        autocompleteText?: string
-        show: boolean
-      }
       if (Boolean(autocompleteText) || Boolean(autocompleteNode)) {
         if (Boolean(autocompleteText) !== Boolean(autocompleteNode)) {
           editor.execute('autocomplete')
@@ -117,6 +112,12 @@ export default class ContextedLinkEditing extends Plugin {
           }
         } else {
           showAutocomplete = true
+          const view = editor.editing.view
+          const viewPosition = view.document.selection.focus
+          const viewNode = viewPosition?.parent.parent
+          const domElement = viewNode
+            ? (view.domConverter.mapViewToDom(viewNode) as HTMLElement)
+            : undefined
           const event: AutocompleteEvent = {
             position: getNodePosition(
               editor,
@@ -126,6 +127,7 @@ export default class ContextedLinkEditing extends Plugin {
               )
             ),
             autocompleteText: autocompleteNode.data,
+            domElement,
             show: showAutocomplete,
           }
           editor.model.document.fire('contextedLinkAutocomplete', event)
@@ -148,7 +150,7 @@ function getNodePosition(editor: any, modelPosition: any) {
     const viewRange = editor.editing.view.createRange(viewPosition)
     const domConverter = editor.editing.view.domConverter
     const rangeRects = Rect.getDomRangeRects(
-      domConverter.viewRangeToDom(viewRange)
+      domConverter.viewRangeToDom(viewRange) 
     ).pop()
     return rangeRects
   } catch (e) {

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>

src/global.d.ts

@@ -16,5 +16,12 @@ declare global {
     name: string
     icon: string
   }
+
+  interface AutocompleteEvent {
+    position?: any
+    autocompleteText?: string
+    domElement?: HTMLElement
+    show: boolean
+  }
 }
 export {}