emit autocomplete text

src/ckeditor/CKEditor.ts

@@ -56,7 +56,16 @@ export default defineComponent({
     },
   },
 
-  emits: ['ready', 'destroy', 'blur', 'focus', 'input', 'update:modelValue', 'click'],
+  emits: [
+    'ready',
+    'destroy',
+    'blur',
+    'focus',
+    'input',
+    'update:modelValue',
+    'click',
+    'contextedLinkAutocomplete',
+  ],
 
   data(): CKEditorComponentData {
     return {
@@ -214,6 +223,10 @@ export default defineComponent({
       editor.editing.view.document.on('click', (evt, data) => {
         this.$emit('click', { evt, data }, editor)
       })
+
+      editor.model.document.on('contextedLinkAutocomplete', (evt, data) => {
+        this.$emit('contextedLinkAutocomplete', { evt, data })
+      })
     },
   },
 

src/ckeditor/ContextedPlugin.ts

@@ -88,7 +88,13 @@ export default class ContextedLinkEditing extends Plugin {
         model.createRange(model.createPositionAt(block, 0), focus),
         model
       )
-      console.log(text, range)
+      const inputText = (text as string).split(']]').at(-1)
+      const autocompleteOpenMatch = (inputText as string).match(/(?<=\[\[).+/g)
+      const autocompleteCloseMatch = (inputText as string).match(/(?<=\[\[).+?(?=]])/g)
+      const openAutocomplete = autocompleteOpenMatch && !autocompleteCloseMatch
+      if (openAutocomplete) {
+        editor.model.document.fire('contextedLinkAutocomplete', autocompleteOpenMatch)
+      }
     })
   }
 }

src/components/NoteEditor.vue

@@ -59,6 +59,10 @@ const handleClick = ({ data }: { data: any }) => {
   const note = getNoteByTitle(noteTitle)
   if (note) activeNote.value = note
 }
+
+const handleAutocomplete = (event: any) => {
+  console.log(event.data)
+}
 </script>
 <template>
   <div>
@@ -68,6 +72,7 @@ const handleClick = ({ data }: { data: any }) => {
       v-model="editorData"
       :config="editorConfig"
       @click="handleClick"
+      @contexted-link-autocomplete="handleAutocomplete"
     ></CKEditor>
   </div>
 </template>