contexted link styling

src/components/NoteEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CKEditor from '@/components/CKEditor'
+import CKEditor from '@/ckeditor/CKEditor'
 import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
 import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
@@ -11,16 +11,18 @@ import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading'
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
 import ListPlugin from '@ckeditor/ckeditor5-list/src/list'
 import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
-
+import ContextedPlugin from '@/ckeditor/ContextedPlugin'
 import { mdToHtml } from '@/utils/markdown'
-import { getNoteById } from '@/composables/useNotes'
+import { activeNote, getNoteByTitle } from '@/composables/useNotes'
 
 const props = defineProps<{
   note: Note
 }>()
 
+const html = mdToHtml(props.note.content)
+
 const editor = BalloonEditor
-const editorData = mdToHtml(props.note.content, 'c@', getNoteById)
+const editorData = html
 const editorConfig = {
   plugins: [
     EssentialsPlugin,
@@ -33,6 +35,7 @@ const editorConfig = {
     ParagraphPlugin,
     ListPlugin,
     AutoformatPlugin,
+    ContextedPlugin,
   ],
 
   toolbar: {
@@ -50,6 +53,12 @@ const editorConfig = {
     ],
   },
 }
+
+const handleClick = ({ data }: { data: any }) => {
+  const noteTitle = data.domTarget.textContent as string
+  const note = getNoteByTitle(noteTitle)
+  if (note) activeNote.value = note
+}
 </script>
 <template>
   <div>
@@ -58,6 +67,7 @@ const editorConfig = {
       :editor="editor"
       v-model="editorData"
       :config="editorConfig"
+      @click="handleClick"
     ></CKEditor>
   </div>
 </template>
@@ -68,4 +78,7 @@ const editorConfig = {
   outline: none !important;
   box-shadow: none !important;
 }
+.ck-content a[data-contexted-link='true'] {
+  @apply cursor-pointer font-semibold text-primary hover:bg-gray-200;
+}
 </style>