update project config to match official create vue recommendations

src/ckeditor/ContextedPlugin.ts

@@ -87,7 +87,7 @@ export default class ContextedLinkEditing extends Plugin {
         model.createRange(model.createPositionAt(block, 0), focus),
         model
       )
-      const inputText = (text as string).split(']]').at(-1)
+      const inputText = (text as string).split(']]').slice(-1)[0]
       const autocompleteText = (inputText as string).match(/(?<=\[\[).*/g)
       const cursorNodes = [focus.textNode, focus.nodeBefore, focus.nodeAfter]
       const autocompleteNode: any = cursorNodes.find((node) =>

src/components/Note/Autocomplete.vue

@@ -59,6 +59,7 @@ defineExpose({ handleKeypress })
     </li>
     <SearchResult
       v-for="result in results"
+      :key="result.id"
       :result="result"
       :active-result="activeResult"
       @go-to-note="emit('createLink', result.title)"

src/components/Note/NoteReferences.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
             <div class="badge-outline badge">{{ props.references.length }}</div>
           </span>
         </li>
-        <li v-for="reference in props.references">
+        <li v-for="reference in props.references" :key="reference.id">
           <a class="rounded-md" @click="setActiveNote(reference.id)">
             <i class="far fa-file-alt fa-fw" />
             {{ reference.title }}

src/components/Search/SearchBar.vue

@@ -56,17 +56,16 @@ const handleKeydown = (event: KeyboardEvent) => {
       @keydown="handleKeydown"
     />
     <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"
-      >
-        <SearchResult
-          v-for="result in results"
-          v-if="results.length > 0"
-          :result="result"
-          :active-result="activeResult"
-          @go-to-note="() => goToNote(result)"
-        />
+      <ul tabindex="0" class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
+        <template v-if="results.length > 0">
+          <SearchResult
+            v-for="result in results"
+            :key="result.id"
+            :result="result"
+            :active-result="activeResult"
+            @go-to-note="() => goToNote(result)"
+          />
+        </template>
         <li v-else><a>No notes found</a></li>
       </ul>
     </div>

src/components/SideBar.vue

@@ -32,6 +32,7 @@ const emit = defineEmits<{
       <template #items>
         <SideBarMenuItem
           v-for="viewMode in props.viewModes"
+          :key="viewMode.name"
           :icon="viewMode.icon"
           :active="viewMode.name === activeViewMode.name"
           @click="emit('setViewMode', viewMode)"
@@ -48,6 +49,7 @@ const emit = defineEmits<{
       <template #items>
         <SideBarMenuItem
           v-for="note in notes"
+          :key="note.id"
           icon="far fa-file-alt fa-fw"
           @click="setActiveNote(note.id)"
           :title="rootNote?.title"

src/components/ViewModes/ListView.vue

@@ -3,27 +3,29 @@ const rows = [
   {
     noteTitle: 'Cy Ganderton',
     references: 'Quality Control Specialist',
-    modified: 'Blue',
+    modified: 'Blue'
   },
   {
     noteTitle: 'Hart Hagerty',
     references: 'Desktop Support Technician',
     modified: 'Purple',
+    rootNote: true
   },
   {
     noteTitle: 'Brice Swyre',
     references: 'Tax Accountant',
-    modified: 'Red',
-  },
+    modified: 'Red'
+  }
 ].map((row) => ({
   ...row,
-  selected: false,
+  selected: false
 }))
 
 const checkedRows = ref<{ [key: string]: Boolean }>({})
 
-const toggleRow = (rowId: string) =>
-  (checkedRows.value[rowId] = !checkedRows.value[rowId])
+const toggleRow = (row: any) => {
+  if (!row.rootNote) checkedRows.value[row.noteTitle] = !checkedRows.value[row.noteTitle]
+}
 </script>
 <template>
   <div class="overflow-x-auto">
@@ -45,9 +47,10 @@ const toggleRow = (rowId: string) =>
       </thead>
       <tbody>
         <tr
-          class="hover hover:cursor-pointer"
           v-for="row in rows"
-          @click="toggleRow(row.noteTitle)"
+          :key="row.noteTitle"
+          class="hover hover:cursor-pointer"
+          @click="toggleRow(row)"
         >
           <th>
             <label>
@@ -55,6 +58,7 @@ const toggleRow = (rowId: string) =>
                 type="checkbox"
                 class="checkbox-primary checkbox checkbox-sm border-secondary"
                 v-model="checkedRows[row.noteTitle]"
+                :disabled="row.rootNote"
               />
             </label>
           </th>

src/composables/useNotes.ts

@@ -8,7 +8,7 @@ const baseNotes = reactive<{ [noteId: string]: BaseNote }>({})
 
 export const notes = computed<Note[]>(() => {
   return Object.entries(baseNotes)
-    .map(([_, note]) => ({
+    .map(([, note]) => ({
       ...note,
       wordCount: note.content.split(' ').filter((word) => word.length > 0).length,
     }))