improved autocomplete

src/components/Autocomplete.vue

@@ -51,7 +51,7 @@ defineExpose({ handleKeypress })
     tabindex="0"
     class="menu rounded-md border-[1px] bg-base-100 p-2 text-[0.875rem] text-black shadow-md"
   >
-    <li class="flex flex-row">
+    <li class="flex flex-row" @click="emit('createLink', props.autocompleteText)">
       <a class="flex-1 px-2 py-1" :class="!activeResult && 'active'">
         <span class="flex-1">{{ props.autocompleteText }}</span>
         <i class="fas fa-plus-circle ml-auto text-white" />
@@ -61,6 +61,7 @@ defineExpose({ handleKeypress })
       v-for="result in results"
       :result="result"
       :active-result="activeResult"
+      @go-to-note="emit('createLink', result.title)"
     />
   </ul>
 </template>

src/components/Note/NoteEditor.vue

@@ -117,47 +117,44 @@ const handleContextedKeypress = (event: any) => {
 const createLink = (link: string) => {
   if (!editor) return
   const model = editorInstance.model
-  model.change((writer: any) => {
-    const currentPosition = model.document.selection.getFirstPosition()
-    // const node = [currentPosition.textNode, currentPosition.nodeBefore, currentPosition.nodeAfter]
-    // console.log(currentPosition, node)
-    // writer.insertText(link, currentPosition)
-    console.log(model.document.selection.getFirstPosition())
-    writer.insertText(
-      link,
-      { contextedLink: true },
-      currentPosition.nodeBefore,
-      'after'
-    )
-    model.enqueueChange((writer: any) => {
-      // const { nextSibling } = contextedLinkTextNode
-      // if (!nextSibling || !nextSibling.data || !nextSibling.data.startsWith(']]'))
-      writer.insertText(']]', model.document.selection.getFirstPosition())
-    })
-    writer.remove(currentPosition.nodeBefore)
-    showAutocomplete.value = false
+  const getPosition = () => model.document.selection.anchor
+  // const getNodes = () => {
+  //   const nodes = [
+  //     getPosition().nodeBefore,
+  //     getPosition().nodeAfter,
+  //     getPosition().textNnode,
+  //   ]
+  //   return nodes.map((node) => ({
+  //     data: node?.data,
+  //     attrs: Array.from(node?.getAttributes() || []),
+  //   }))
+  // }
+  // console.log(getNodes())
+  let nodeToRemove: any
+  if (getPosition().nodeBefore?.hasAttribute('autocomplete')) {
+    // Insert new link
+    nodeToRemove = getPosition().nodeBefore
+  } else if (getPosition().nodeBefore?.hasAttribute('contextedLink')) {
+    // Update existing link from end of existing link (backspace)
+    nodeToRemove = getPosition().nodeBefore
+  } else if (getPosition().textNode?.hasAttribute('contextedLink')) {
+    // Update existing link from middle of existing link
+    nodeToRemove = getPosition().textNode
+  } else if (getPosition().nodeAfter?.hasAttribute('contextedLink')) {
+    // Update existing link from beginning (delete)
+    nodeToRemove = getPosition().nodeAfter
+  }
 
-    // const node = [
-    //   currentPosition.textNode,
-    //   currentPosition.nodeBefore,
-    //   currentPosition.nodeAfter,
-    // ].find(
-    //   (node) =>
-    //     node &&
-    //     (node.hasAttribute('contextedLinkAutocomplete') ||
-    //       node.hasAttribute('contextedLink'))
-    // )
-    // const contextedLinkTextNode = writer.createText(title, { contextedLink: true })
-    // writer.insert(contextedLinkTextNode, node, 'after')
-    // model.enqueueChange((writer) => {
-    //   const { nextSibling } = contextedLinkTextNode
-    //   if (!nextSibling || !nextSibling.data || !nextSibling.data.startsWith(']]'))
-    //     writer.insertText(']]', model.document.selection.getFirstPosition())
-    // })
-    // if (node) writer.remove(node)
-    // writer.removeSelectionAttribute('contextedLink')
-    // writer.removeSelectionAttribute('contextedLinkAutocomplete')
-    // this.autocompleteText = null
+  model.change((writer: any) => {
+    if (nodeToRemove) writer.remove(nodeToRemove)
+    writer.insertText(link, { contextedLink: true }, getPosition(), 'after')
+    model.enqueueChange((writer: any) => {
+      const nodeAfter = getPosition().nodeAfter
+      if (!nodeAfter || (nodeAfter && !nodeAfter.data.startsWith(']]'))) {
+        writer.insertText(']]', model.document.selection.getFirstPosition())
+      }
+    })
+    showAutocomplete.value = false
   })
 }
 </script>