insert new link with autocomplete

src/ckeditor/CKEditor.ts

@@ -64,6 +64,7 @@ export default defineComponent({
     'input',
     'update:modelValue',
     'click',
+    'editorReady',
     'contextedLinkAutocomplete',
     'contextedKeypress',
   ],
@@ -182,6 +183,7 @@ export default defineComponent({
   methods: {
     setUpEditorEvents() {
       const editor = this.instance!
+      this.$emit('editorReady', editor)
 
       // Use the leading edge so the first event in the series is emitted immediately.
       // Failing to do so leads to race conditions, for instance, when the component modelValue

src/ckeditor/ContextedPlugin.ts

@@ -126,12 +126,16 @@ export default class ContextedLinkEditing extends Plugin {
         )
         if (selectionInContextedLink && keyCodes.includes(keyCode)) {
           if (selection.hasAttribute('contextedLink')) {
-            const autocompleteNode = editor.model.document.selection.focus
-              ?.textNode as any
+            const autocompleteNode = [
+              selection.focus?.nodeBefore,
+              selection.focus?.textNode,
+              selection.focus?.nodeAfter,
+            ].find((node) => Boolean(node))
             fireAutocompleteEvent(editor, true, autocompleteNode)
           }
           this.editor.model.document.fire('contextedKeypress', { keyCode })
-          data.preventDefault(evt.stop())
+          data.preventDefault()
+          evt.stop()
         }
       },
       { priority: 'highest' }

src/components/Note/NoteEditor.vue

@@ -59,6 +59,7 @@ const editorConfig = {
 
 const editorElement = ref<HTMLInputElement | null>(null)
 watch(editorData, () => emit('update', htmlToMd(editorData.value)))
+let editorInstance: any
 
 const handleClick = ({ data }: { data: any }) => {
   const noteTitle = data.domTarget.textContent as string
@@ -114,7 +115,50 @@ const handleContextedKeypress = (event: any) => {
 }
 
 const createLink = (link: string) => {
-  console.log(link)
+  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 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
+  })
 }
 </script>
 <template>
@@ -124,6 +168,7 @@ const createLink = (link: string) => {
       :editor="editor"
       v-model="editorData"
       :config="editorConfig"
+      @editor-ready="(editor) => (editorInstance = editor)"
       @click="handleClick"
       @contexted-link-autocomplete="handleAutocomplete"
       @contexted-keypress="handleContextedKeypress"

src/composables/useNotes.ts

@@ -91,7 +91,6 @@ export const updateNote = (noteId: string, note: BaseNote) => {
     modified: new Date().getTime(),
   }
   baseNotes[noteId] = updatedNote
-  console.log(note)
 }
 
 export const addNote = (title: string, content: string, goToNote: boolean = false) => {