contexted link highlight + adjust prettier

.prettierrc

@@ -3,6 +3,8 @@
   "useTabs": false,
   "semi": false,
   "singleQuote": true,
+  "printWidth": 88,
+  "htmlWhitespaceSensitivity": "ignore",
   "plugins": [
     "prettier-plugin-tailwindcss"
   ]

Makefile

@@ -0,0 +1,2 @@
+pretty:
+	npx prettier --write "./src/**/*.(ts|vue)"

src/ckeditor/CKEditor.ts

@@ -56,15 +56,7 @@ export default defineComponent({
     },
   },
 
-  emits: [
+  emits: ['ready', 'destroy', 'blur', 'focus', 'input', 'update:modelValue', 'click'],
-    'ready',
-    'destroy',
-    'blur',
-    'focus',
-    'input',
-    'update:modelValue',
-    'click',
-  ],
 
   data(): CKEditorComponentData {
     return {

src/ckeditor/ContextedPlugin.ts

@@ -1,9 +1,16 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
+import { TwoStepCaretMovement, inlineHighlight } from 'ckeditor5/src/typing'
+
+const HIGHLIGHT_CLASS = 'ck-link_selected'
 
 export default class ContextedLinkEditing extends Plugin {
   init() {
     this._defineSchema() // ADDED
     this._defineConverters() // ADDED
+    const twoStepCaretMovementPlugin = this.editor.plugins.get(TwoStepCaretMovement)
+    twoStepCaretMovementPlugin.registerAttribute('contextedLink')
+
+    inlineHighlight(this.editor, 'contextedLink', 'a', HIGHLIGHT_CLASS)
   }
   _defineSchema() {
     // ADDED

src/components/Note.vue

@@ -32,12 +32,14 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
   <div class="flex flex-col">
-    <h1 class="mb-2 flex items-center rounded-md font-semibold text-3xl hover:bg-gray-200">
+    <h1
+      class="mb-2 flex items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
+    >
       <i
         class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
         v-if="props.note.isRoot"
-      ></i
+      ></i>
-      ><input
+      <input
         type="text"
         class="flex-1 bg-transparent py-1 outline-none"
         v-model="noteTitle"
@@ -52,25 +54,23 @@ const references = computed<Note[]>(() => {
       <div class="card-body px-3 py-3">
         <ul class="menu rounded-md">
           <li class="menu-title !opacity-100">
-            <span class="card-title text-secondary"
+            <span class="card-title text-secondary">
-              >References
+              References
               <div class="badge-outline badge">{{ references.length }}</div>
             </span>
           </li>
           <li v-for="reference in references">
-            <a class="rounded-md" @click="activeNote = reference"
+            <a class="rounded-md" @click="activeNote = reference">
-              ><i class="far fa-file-alt fa-fw" />{{ reference.title }}</a
+              <i class="far fa-file-alt fa-fw" />
-            >
+              {{ reference.title }}
+            </a>
           </li>
         </ul>
       </div>
     </div>
     <hr class="my-3" />
     <div class="flex text-sm text-secondary">
-      <span
+      <span>{{ note.wordCount }} {{ note.wordCount === 1 ? 'word' : 'words' }}</span>
-        >{{ note.wordCount }}
-        {{ note.wordCount === 1 ? 'word' : 'words' }}</span
-      >
       <span class="ml-auto">Last modified {{ formatDate(note.modified) }}</span>
     </div>
   </div>

src/components/SearchBar.vue

@@ -28,9 +28,7 @@ const activeResult = ref<Note>()
 const handleKeydown = (event: KeyboardEvent) => {
   const code = event.code
   if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code)) {
-    let index = results.value.findIndex(
+    let index = results.value.findIndex((note) => note.id === activeResult.value?.id)
-      (note) => note.id === activeResult.value?.id
-    )
     if (['ArrowDown', 'Tab'].includes(code)) {
       index++
     } else if (['ArrowUp'].includes(code)) {
@@ -59,19 +57,12 @@ const handleKeydown = (event: KeyboardEvent) => {
       ref="queryElem"
       @keydown="handleKeydown"
     />
-    <div
+    <div class="z-1000 dropdown absolute left-0 right-0 top-[100%]" v-if="active">
-      class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
-      v-if="active"
-    >
       <ul
         tabindex="0"
         class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow"
       >
-        <li
+        <li v-for="result in results" v-if="results.length > 0" class="flex flex-row">
-          v-for="result in results"
-          v-if="results.length > 0"
-          class="flex flex-row"
-        >
           <a
             class="flex-1 items-center px-2 py-1"
             @click.stop.prevent="() => goToNote(result)"
@@ -84,11 +75,12 @@ const handleKeydown = (event: KeyboardEvent) => {
             <span
               class="badge-ghost badge badge-sm mr-0.5"
               v-if="activeNote?.id === result.id"
-              >current</span
             >
-            <span class="flex-1">{{ result.title }} </span>
+              current
-            <span>{{ formatDate(result.modified) }}</span></a
+            </span>
-          >
+            <span class="flex-1">{{ result.title }}</span>
+            <span>{{ formatDate(result.modified) }}</span>
+          </a>
         </li>
         <li v-else><a>No notes found</a></li>
       </ul>

src/components/SideBar.vue

@@ -20,11 +20,9 @@ const emit = defineEmits<{
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
-        <SideBarMenuItem
+        <SideBarMenuItem icon="fas fa-fw fa-home" @click="activeNote = rootNote">
-          icon="fas fa-fw fa-home"
+          {{ rootNote?.title }}
-          @click="activeNote = rootNote"
+        </SideBarMenuItem>
-          >{{ rootNote?.title }}</SideBarMenuItem
-        >
       </template>
     </SideBarMenu>
     <SideBarMenu>
@@ -35,21 +33,24 @@ const emit = defineEmits<{
           :icon="viewMode.icon"
           :active="viewMode.name === activeViewMode.name"
           @click="emit('setViewMode', viewMode)"
-          >{{ viewMode.name }}</SideBarMenuItem
         >
+          {{ viewMode.name }}
+        </SideBarMenuItem>
       </template>
     </SideBarMenu>
     <SideBarMenu>
-      <template #header
+      <template #header>
-        ><i class="far fa-clock fa-fw mr-2" />Recent notes</template
+        <i class="far fa-clock fa-fw mr-2" />
-      >
+        Recent notes
+      </template>
       <template #items>
         <SideBarMenuItem
           v-for="note in notes"
           icon="far fa-file-alt fa-fw"
           @click="activeNote = note"
-          >{{ note.title }}</SideBarMenuItem
         >
+          {{ note.title }}
+        </SideBarMenuItem>
       </template>
     </SideBarMenu>
   </div>

src/components/SideBar/SideBarMenuItem.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
     class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
     :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
-    <i :class="props.icon" class="mr-2" v-if="props.icon"></i><slot></slot>
+    <i :class="props.icon" class="mr-2" v-if="props.icon"></i>
+    <slot></slot>
   </a>
 </template>

src/components/TopBar.vue

@@ -13,13 +13,8 @@ const emit = defineEmits<{
 </script>
 <template>
   <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
-    <div
+    <div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
-      class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white"
+      <div class="flex pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
-    >
-      <div
-        class="flex pl-3"
-        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
-      >
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
@@ -38,9 +33,7 @@ const emit = defineEmits<{
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <button class="btn-outline btn-sm btn h-full text-white">
+        <button class="btn-outline btn-sm btn h-full text-white">Sign in</button>
-          Sign in
-        </button>
       </div>
     </div>
   </div>

src/composables/useNotes.ts

@@ -15,8 +15,7 @@ export const notes = computed<Note[]>(() => {
     .sort((a, b) => b.modified - a.modified) as Note[]
 })
 watch(notes, () => {
-  if (notes.value.length > 0 && !activeNote.value)
+  if (notes.value.length > 0 && !activeNote.value) activeNote.value = rootNote.value
-    activeNote.value = rootNote.value
 })
 
 export const activeNote = ref<Note>()
@@ -66,11 +65,7 @@ export const updateNote = (noteId: string, note: Note) => {
   baseNotes[noteId] = updatedNote
 }
 
-export const addNote = (
+export const addNote = (title: string, content: string, goToNote: boolean = false) => {
-  title: string,
-  content: string,
-  goToNote: boolean = false
-) => {
   const id = shortid.generate()
   const newNote: BaseNote = {
     id,
@@ -80,8 +75,7 @@ export const addNote = (
     modified: new Date().getTime(),
   }
   baseNotes[id] = newNote
-  if (goToNote)
+  if (goToNote) activeNote.value = notes.value.find((note) => note.id === newNote.id)
-    activeNote.value = notes.value.find((note) => note.id === newNote.id)
 }
 
 const getNoteLinksByNoteId = (noteId: string): string[] => {

src/utils/helpers.ts

@@ -6,15 +6,10 @@ export const formatDate = (date: Date | number): string => {
     : date
   const dateDistanceInWords = formatDistance(dateToFormat, new Date()) + ' ago'
 
-  return isToday(date)
+  return isToday(date) ? dateDistanceInWords : format(date, 'D MMMM [at] HH:mm ')
-    ? dateDistanceInWords
-    : format(date, 'D MMMM [at] HH:mm ')
 }
 
-export const getAllMatches = (
+export const getAllMatches = (regex: RegExp, input: string): RegExpExecArray[] => {
-  regex: RegExp,
-  input: string
-): RegExpExecArray[] => {
   const matches = []
   let m
   do {