From 8db4583b0b6194e890dea23759738e6841783b12 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Sun, 30 Apr 2023 16:57:50 +0200
Subject: [PATCH] contexted link highlight + adjust prettier

---
 .prettierrc                                |  2 ++
 Makefile                                   |  2 ++
 src/ckeditor/CKEditor.ts                   | 10 +--------
 src/ckeditor/ContextedPlugin.ts            |  7 +++++++
 src/components/Note.vue                    | 24 +++++++++++-----------
 src/components/SearchBar.vue               | 24 ++++++++--------------
 src/components/SideBar.vue                 | 21 ++++++++++---------
 src/components/SideBar/SideBarMenuItem.vue |  3 ++-
 src/components/TopBar.vue                  | 13 +++---------
 src/composables/useNotes.ts                | 12 +++--------
 src/utils/helpers.ts                       |  9 ++------
 11 files changed, 53 insertions(+), 74 deletions(-)
 create mode 100644 Makefile

diff --git a/.prettierrc b/.prettierrc
index d2662f8..c6ff043 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,6 +3,8 @@
   "useTabs": false,
   "semi": false,
   "singleQuote": true,
+  "printWidth": 88,
+  "htmlWhitespaceSensitivity": "ignore",
   "plugins": [
     "prettier-plugin-tailwindcss"
   ]
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..29602a0
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,2 @@
+pretty:
+	npx prettier --write "./src/**/*.(ts|vue)"
diff --git a/src/ckeditor/CKEditor.ts b/src/ckeditor/CKEditor.ts
index 1e770a1..f84d02b 100644
--- a/src/ckeditor/CKEditor.ts
+++ b/src/ckeditor/CKEditor.ts
@@ -56,15 +56,7 @@ export default defineComponent({
     },
   },
 
-  emits: [
-    'ready',
-    'destroy',
-    'blur',
-    'focus',
-    'input',
-    'update:modelValue',
-    'click',
-  ],
+  emits: ['ready', 'destroy', 'blur', 'focus', 'input', 'update:modelValue', 'click'],
 
   data(): CKEditorComponentData {
     return {
diff --git a/src/ckeditor/ContextedPlugin.ts b/src/ckeditor/ContextedPlugin.ts
index 924c1ce..3c25e3f 100644
--- a/src/ckeditor/ContextedPlugin.ts
+++ b/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
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 846d4cb..128a5ee 100644
--- a/src/components/Note.vue
+++ b/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
-      ><input
+      ></i>
+      <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"
-              >References
+            <span class="card-title text-secondary">
+              References
               <div class="badge-outline badge">{{ references.length }}</div>
             </span>
           </li>
           <li v-for="reference in references">
-            <a class="rounded-md" @click="activeNote = reference"
-              ><i class="far fa-file-alt fa-fw" />{{ reference.title }}</a
-            >
+            <a class="rounded-md" @click="activeNote = reference">
+              <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
-        >{{ note.wordCount }}
-        {{ note.wordCount === 1 ? 'word' : 'words' }}</span
-      >
+      <span>{{ note.wordCount }} {{ note.wordCount === 1 ? 'word' : 'words' }}</span>
       <span class="ml-auto">Last modified {{ formatDate(note.modified) }}</span>
     </div>
   </div>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index d496b45..005b635 100644
--- a/src/components/SearchBar.vue
+++ b/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(
-      (note) => note.id === activeResult.value?.id
-    )
+    let index = results.value.findIndex((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
-      class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
-      v-if="active"
-    >
+    <div 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
-          v-for="result in results"
-          v-if="results.length > 0"
-          class="flex flex-row"
-        >
+        <li 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>
-            <span>{{ formatDate(result.modified) }}</span></a
-          >
+              current
+            </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>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 17a756e..69cb60a 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -20,11 +20,9 @@ const emit = defineEmits<{
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
-        <SideBarMenuItem
-          icon="fas fa-fw fa-home"
-          @click="activeNote = rootNote"
-          >{{ rootNote?.title }}</SideBarMenuItem
-        >
+        <SideBarMenuItem icon="fas fa-fw fa-home" @click="activeNote = rootNote">
+          {{ 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
-        ><i class="far fa-clock fa-fw mr-2" />Recent notes</template
-      >
+      <template #header>
+        <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>
diff --git a/src/components/SideBar/SideBarMenuItem.vue b/src/components/SideBar/SideBarMenuItem.vue
index 6f75fd0..2baaaae 100644
--- a/src/components/SideBar/SideBarMenuItem.vue
+++ b/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>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 45deb6a..f44d0bf 100644
--- a/src/components/TopBar.vue
+++ b/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
-      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="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'">
         <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">
-          Sign in
-        </button>
+        <button class="btn-outline btn-sm btn h-full text-white">Sign in</button>
       </div>
     </div>
   </div>
diff --git a/src/composables/useNotes.ts b/src/composables/useNotes.ts
index 42fd5c6..4375132 100644
--- a/src/composables/useNotes.ts
+++ b/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)
-    activeNote.value = rootNote.value
+  if (notes.value.length > 0 && !activeNote.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 = (
-  title: string,
-  content: string,
-  goToNote: boolean = false
-) => {
+export const addNote = (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)
-    activeNote.value = notes.value.find((note) => note.id === newNote.id)
+  if (goToNote) activeNote.value = notes.value.find((note) => note.id === newNote.id)
 }
 
 const getNoteLinksByNoteId = (noteId: string): string[] => {
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 418c3bd..59b378f 100644
--- a/src/utils/helpers.ts
+++ b/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)
-    ? dateDistanceInWords
-    : format(date, 'D MMMM [at] HH:mm ')
+  return isToday(date) ? dateDistanceInWords : format(date, 'D MMMM [at] HH:mm ')
 }
 
-export const getAllMatches = (
-  regex: RegExp,
-  input: string
-): RegExpExecArray[] => {
+export const getAllMatches = (regex: RegExp, input: string): RegExpExecArray[] => {
   const matches = []
   let m
   do {