notes search

package-lock.json

@@ -20,10 +20,12 @@
         "font-awesome": "^4.7.0",
         "hamburgers": "^1.2.1",
         "marked": "^4.3.0",
+        "shortid": "^2.2.16",
         "vue": "^3.2.47"
       },
       "devDependencies": {
         "@types/dompurify": "^3.0.2",
+        "@types/shortid": "^0.0.29",
         "@vitejs/plugin-vue": "^4.1.0",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.23",
@@ -1140,6 +1142,12 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz",
       "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA=="
     },
+    "node_modules/@types/shortid": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
+      "integrity": "sha512-9BCYD9btg2CY4kPcpMQ+vCR8U6V8f/KvixYD5ZbxoWlkhddNF5IeZMVL3p+QFUkg+Hb+kPAG9Jgk4bnnF1v/Fw==",
+      "dev": true
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
@@ -2767,6 +2775,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "dependencies": {
+        "nanoid": "^2.1.0"
+      }
+    },
+    "node_modules/shortid/node_modules/nanoid": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -3966,6 +3987,12 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz",
       "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA=="
     },
+    "@types/shortid": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
+      "integrity": "sha512-9BCYD9btg2CY4kPcpMQ+vCR8U6V8f/KvixYD5ZbxoWlkhddNF5IeZMVL3p+QFUkg+Hb+kPAG9Jgk4bnnF1v/Fw==",
+      "dev": true
+    },
     "@types/trusted-types": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
@@ -5035,6 +5062,21 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "requires": {
+        "nanoid": "^2.1.0"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "2.1.11",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+          "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+        }
+      }
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",

package.json

@@ -21,10 +21,12 @@
     "font-awesome": "^4.7.0",
     "hamburgers": "^1.2.1",
     "marked": "^4.3.0",
+    "shortid": "^2.2.16",
     "vue": "^3.2.47"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.2",
+    "@types/shortid": "^0.0.29",
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",

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,
+}))