notes search

src/App.vue

@@ -28,10 +28,10 @@ const activeViewMode = ref(viewModes[0])
       class="mt-[50px] px-3 py-6"
     />
     <main
-      class="transition[margin-left] absolute bottom-0 right-0 top-[50px] flex-1 overflow-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
+      class="transition[margin-left] absolute bottom-0 left-0 right-0 top-[50px] flex overflow-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
     >
-      <Note v-if="activeNote" :note="activeNote" />
+      <Note v-if="activeNote" :note="activeNote" class="w-full" />
     </main>
   </div>
 </template>

src/components/Note.vue

@@ -4,9 +4,14 @@ defineProps<{
 }>()
 </script>
 <template>
-  <h1 class="flex items-center text-3xl pb-2">
-    <i class="bi bi-house mr-2 text-secondary text-base" v-if="note.isRoot"></i
-    >{{ note.title }}
-  </h1>
-  <div>{{ note.content }}</div>
+  <div>
+    <h1 class="flex items-center pb-2 text-3xl">
+      <i
+        class="bi bi-house mr-2 text-base text-secondary"
+        v-if="note.isRoot"
+      ></i
+      >{{ note.title }}
+    </h1>
+    <div>{{ note.content }}</div>
+  </div>
 </template>

src/components/SearchBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import { notes, findNotes } from '@/composables/useNotes'
+import { notes, findNotes, activeNote } from '@/composables/useNotes'
 
 const active = ref(false)
 watch(active, () => {
@@ -13,7 +13,8 @@ const results = computed<Note[]>(() => {
 })
 
 const click = (note: Note) => {
-  console.log(note.title)
+  activeNote.value = note
+  active.value = false
 }
 </script>
 <template>
@@ -29,20 +30,33 @@ const click = (note: Note) => {
     />
     <div
       class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
-      v-if="active && results.length > 0"
+      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="note in results">
+        <li
+          v-for="note in results"
+          v-if="results.length > 0"
+          class="flex flex-row"
+          :class="{ disabled: activeNote?.id === note.id }"
+        >
           <a
-            class="px-2 py-1"
+            class="flex-1 items-center px-2 py-1"
             @click.stop.prevent="() => click(note)"
             @mousedown.prevent
-            >{{ note.title }}</a
+            :class="{ disabled: activeNote?.id === note.id }"
+          >
+            <span
+              class="badge-ghost badge badge-sm mr-0.5"
+              v-if="activeNote?.id === note.id"
+              >current</span
+            >
+            {{ note.title }}</a
           >
         </li>
+        <li v-else><a>No notes found</a></li>
       </ul>
     </div>
   </div>

src/composables/useNotes.ts

@@ -25,13 +25,7 @@ watch(
 )
 
 export const setDefaultNotes = (defaultNotes: BaseNote[]) => {
-  baseNotes.value = defaultNotes.map(
-    (note): BaseNote => ({
-      ...note,
-      created: new Date().getTime(),
-      modified: new Date().getTime(),
-    })
-  )
+  baseNotes.value = defaultNotes
 }
 
 export const getNoteById = (noteId: string) => {
@@ -41,7 +35,7 @@ export const getNoteById = (noteId: string) => {
 export const findNotes = (query: string): Note[] => {
   const removeMdFromText = (mdText: string): string => {
     const div = document.createElement('div')
-    div.innerHTML = mdToHtml(mdText, 'c@')
+    div.innerHTML = mdToHtml(mdText, 'c@', getNoteById)
     const textWithoutMd = div.textContent || div.innerText || ''
     return textWithoutMd
   }

src/global.d.ts

@@ -1,6 +1,6 @@
 declare global {
   interface BaseNote {
-    id?: string
+    id: string
     title: string
     content: string
     created: number

src/utils/defaultNotes.ts

@@ -1,3 +1,5 @@
+import shortid from 'shortid'
+
 export const defaultNotes: BaseNote[] = [
   {
     isRoot: true,
@@ -8,13 +10,14 @@ export const defaultNotes: BaseNote[] = [
 *   Click on **Mindmap mode** in the menu left to visualize your notes
 \n
 Let's get started!`,
-    created: 0,
-    modified: 0,
   },
   {
     title: 'brackets',
     content: `If you type square brackets around text a link is created automatically. Like magic!`,
-    created: 0,
-    modified: 0,
   },
-]
+].map((note) => ({
+  id: shortid.generate(),
+  created: new Date().getTime(),
+  modified: new Date().getTime(),
+  ...note,
+}))