From 73f4b3613f2e5c6f760c9ee87f35fc300d8a94fa Mon Sep 17 00:00:00 2001
From: dependentmadani <madani.badaoui12@gmail.com>
Date: Thu, 7 Nov 2024 13:46:31 +0100
Subject: [PATCH 1/8] feat: display the note parents structure

---
 src/application/services/useNote.ts | 25 +++++++++++++++++++++++++
 src/domain/entities/NoteDTO.ts      |  5 +++++
 2 files changed, 30 insertions(+)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index 938fbc0f..d77956be 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -158,6 +158,13 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const parentNote = ref<Note | undefined>(undefined);
 
+  /**
+   * Note parents of the actual note
+   *
+   * Actual note by default
+   */
+  const noteParents = ref<Note[]>([]);
+
   /**
    * Load note by id
    * @param id - Note identifier got from composable argument
@@ -172,6 +179,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     canEdit.value = response.accessRights.canEdit;
     noteTools.value = response.tools;
     parentNote.value = response.parentNote;
+    noteParents.value = response.parents;
   }
 
   /**
@@ -265,6 +273,23 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     parentNote.value = undefined;
   }
 
+  /**
+   * Format the received note parents into presentation format
+   */
+  async function formatNoteParents(): Promise<string> {
+    if (currentId.value === null) {
+      throw new Error('note id is not defined');
+    }
+    let presentationFormat = '';
+    
+    for (let value of noteParents.value) {
+      presentationFormat += getTitle(value.content) + ' > ';
+    }
+    presentationFormat += noteTitle.value;
+
+    return presentationFormat;
+  }
+
   /**
    * Get note by custom hostname
    */
diff --git a/src/domain/entities/NoteDTO.ts b/src/domain/entities/NoteDTO.ts
index 986c3ca7..b0cedc12 100644
--- a/src/domain/entities/NoteDTO.ts
+++ b/src/domain/entities/NoteDTO.ts
@@ -25,4 +25,9 @@ export interface NoteDTO {
    * Editor tools
    */
   tools: EditorTool[];
+
+  /**
+   * Note parents
+   */
+  parents: Note[];
 }

From 6ba36acaf80729c1f7c487f71bcd2ffcd3c998f3 Mon Sep 17 00:00:00 2001
From: dependentmadani <madani.badaoui12@gmail.com>
Date: Thu, 7 Nov 2024 14:34:42 +0100
Subject: [PATCH 2/8] fix: lint and build errors

---
 src/application/services/useNote.ts                          | 5 +++--
 .../transport/notes-api/types/GetNoteResponsePayload.ts      | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index d77956be..2539e9f3 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -276,12 +276,12 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   /**
    * Format the received note parents into presentation format
    */
-  async function formatNoteParents(): Promise<string> {
+  function formatNoteParents(): string {
     if (currentId.value === null) {
       throw new Error('note id is not defined');
     }
     let presentationFormat = '';
-    
+
     for (let value of noteParents.value) {
       presentationFormat += getTitle(value.content) + ' > ';
     }
@@ -340,6 +340,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   });
 
   watch(noteTitle, (currentNoteTitle) => {
+    formatNoteParents();
     patchOpenedPageByUrl(
       route.path,
       {
diff --git a/src/infrastructure/transport/notes-api/types/GetNoteResponsePayload.ts b/src/infrastructure/transport/notes-api/types/GetNoteResponsePayload.ts
index b43dff21..bee38d7f 100644
--- a/src/infrastructure/transport/notes-api/types/GetNoteResponsePayload.ts
+++ b/src/infrastructure/transport/notes-api/types/GetNoteResponsePayload.ts
@@ -10,4 +10,5 @@ export type GetNoteResponsePayload = {
   accessRights: NoteAccessRights;
   parentNote: Note | undefined;
   tools: EditorTool[];
+  parents: Note[];
 };

From d9988fb79c7bb1d48ba4c8d30eef12fdcccff2b0 Mon Sep 17 00:00:00 2001
From: dependentmadani <madani.badaoui12@gmail.com>
Date: Fri, 8 Nov 2024 16:13:48 +0100
Subject: [PATCH 3/8] update: few modification of format function as well the
 docs

---
 src/application/services/useNote.ts | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index 2539e9f3..d3b33383 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -163,7 +163,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    *
    * Actual note by default
    */
-  const noteParents = ref<Note[]>([]);
+  let noteParents: Note[] = [];
 
   /**
    * Load note by id
@@ -179,7 +179,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     canEdit.value = response.accessRights.canEdit;
     noteTools.value = response.tools;
     parentNote.value = response.parentNote;
-    noteParents.value = response.parents;
+    noteParents = response.parents;
   }
 
   /**
@@ -274,18 +274,24 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   }
 
   /**
-   * Format the received note parents into presentation format
+   * Reform the received note parents from api into presentation format.
+   * @returns An array of Note objects representing the formatted note parents.
+   * @throws {Error} If the note id is not defined.
    */
-  function formatNoteParents(): string {
+  function formatNoteParents(): Note[] {
     if (currentId.value === null) {
       throw new Error('note id is not defined');
     }
-    let presentationFormat = '';
+    let presentationFormat: Note[] = [];
 
-    for (let value of noteParents.value) {
-      presentationFormat += getTitle(value.content) + ' > ';
+    if (noteParents.length > 2) {
+      presentationFormat = [noteParents[0]];
+      presentationFormat.push({ id: currentId.value,
+        content: note.value?.content as NoteContent });
+    } else {
+      presentationFormat = [...noteParents, { id: currentId.value,
+        content: note.value?.content as NoteContent }];
     }
-    presentationFormat += noteTitle.value;
 
     return presentationFormat;
   }

From 7baf8f1f7cc574e0b97398dbd0042298452e8122 Mon Sep 17 00:00:00 2001
From: Madani Badaoui <mbadaoui@e2r1p4.1337.ma>
Date: Sun, 24 Nov 2024 17:40:16 +0100
Subject: [PATCH 4/8] update (useNote): small modification in format function,
 and update in useNoteComposableState interface

---
 src/application/services/useNote.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index d3b33383..c9c5655c 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -70,6 +70,11 @@ interface UseNoteComposableState {
    */
   unlinkParent: () => Promise<void>;
 
+  /**
+   * Get the format of note parents
+   */
+  formatNoteParents: () => Note[];
+
   /**
    * Defines if user can edit note
    */
@@ -284,13 +289,13 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     }
     let presentationFormat: Note[] = [];
 
-    if (noteParents.length > 2) {
-      presentationFormat = [noteParents[0]];
-      presentationFormat.push({ id: currentId.value,
-        content: note.value?.content as NoteContent });
+    if (noteParents.length === 0) {
+      presentationFormat.push({
+        id: currentId.value,
+        content: note.value?.content as NoteContent,
+      });
     } else {
-      presentationFormat = [...noteParents, { id: currentId.value,
-        content: note.value?.content as NoteContent }];
+      presentationFormat = noteParents;
     }
 
     return presentationFormat;
@@ -364,6 +369,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     resolveToolsByContent,
     save,
     unlinkParent,
+    formatNoteParents,
     parentNote,
   };
 }

From 931460d55419ead879f0c948b75319c693b0170f Mon Sep 17 00:00:00 2001
From: dependentmadani <madani.badaoui12@gmail.com>
Date: Wed, 27 Nov 2024 17:48:41 +0100
Subject: [PATCH 5/8] update: fix description of a doc

---
 src/application/services/useNote.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index c9c5655c..0f1cfdf5 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -71,7 +71,7 @@ interface UseNoteComposableState {
   unlinkParent: () => Promise<void>;
 
   /**
-   * Get the format of note parents
+   * Returns an array of Note objects representing the formatted note parents.
    */
   formatNoteParents: () => Note[];
 

From 441586db34758eb26f4c574c43d3f958276faff8 Mon Sep 17 00:00:00 2001
From: dependentmadani <madani.badaoui12@gmail.com>
Date: Sun, 8 Dec 2024 21:45:24 +0100
Subject: [PATCH 6/8] update: few changes on how to display the note structure,
 still need work to be done

---
 src/presentation/pages/Note.vue | 35 +++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index d0cd75aa..d811be12 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -4,11 +4,18 @@
       :style="{ '--opacity': id && note ? 1 : 0 }"
     >
       <template #left>
-        {{
-          note && 'updatedAt' in note && note.updatedAt
-            ? t('note.lastEdit') + ' ' + getTimeFromNow(note.updatedAt)
-            : t('note.lastEdit') + ' ' + 'a few seconds ago'
-        }}
+        <div v-if="noteParents.length">
+          <span
+            v-for="(parent, index) in noteParents"
+            :key="parent.id"
+          >
+            <a @click="navigateToParent(parent.id)">{{ t(`${getTitle(parent.content)}`) }}</a>
+            <span v-if="index < noteParents.length - 1"> > </span>
+          </span>
+        </div>
+        <div v-else>
+          {{ t('note.lastEdit') + ' ' + 'a few seconds ago' }}
+        </div>
       </template>
       <template #right>
         <Button
@@ -52,14 +59,14 @@ import { ref, toRef, watch } from 'vue';
 import { Button, Editor } from 'codex-ui/vue';
 import useNote from '@/application/services/useNote';
 import { useRouter } from 'vue-router';
-import { NoteContent } from '@/domain/entities/Note';
+import { Note, NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
-import { getTimeFromNow } from '@/infrastructure/utils/date';
 import { makeElementScreenshot } from '@/infrastructure/utils/screenshot';
 import useNoteSettings from '@/application/services/useNoteSettings';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
+import { getTitle } from '@/infrastructure/utils/note';
 
 const { t } = useI18n();
 
@@ -79,10 +86,12 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, formatNoteParents } = useNote({
   id: noteId,
 });
 
+const noteParents = ref<Note[]>([]);
+
 /**
  * Create new child note
  */
@@ -103,6 +112,15 @@ function redirectToNoteSettings(): void {
   router.push(`/note/${props.id}/settings`);
 }
 
+/**
+ * Navigate to a specific note
+ *
+ * @param {number} parentId - The ID of the parent note to navigate to
+ */
+function navigateToParent(parentId: string): void {
+  router.push(`/note/${parentId}`);
+}
+
 const { updateCover } = useNoteSettings();
 
 const { isEditorReady, editorConfig } = useNoteEditor({
@@ -133,6 +151,7 @@ async function noteChanged(data: NoteContent): Promise<void> {
   const editorElement = editor.value ? editor.value.element : null;
 
   if (!isEmpty) {
+    noteParents.value = formatNoteParents();
     await save(data, props.parentId);
     /**
      * In case if we do not have note id, we can change its cover, and we need successful data for cover

From 04e849fd68c32ffb06b70a01fd9f375f7e591866 Mon Sep 17 00:00:00 2001
From: dependentmadani <madani.badaoui12@gmail.com>
Date: Mon, 9 Dec 2024 22:40:02 +0100
Subject: [PATCH 7/8] update (note parent strcuture): update the presentation
 form, logic applied, still need work to be done

---
 src/application/services/useNote.ts |  8 +++-
 src/presentation/pages/Note.vue     | 60 +++++++++++++++++++++++++----
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index 0f1cfdf5..1432c429 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -285,7 +285,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   function formatNoteParents(): Note[] {
     if (currentId.value === null) {
-      throw new Error('note id is not defined');
+      return [];
     }
     let presentationFormat: Note[] = [];
 
@@ -296,6 +296,12 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
       });
     } else {
       presentationFormat = noteParents;
+      if (noteParents.find(noteItem => noteItem.id === currentId.value) === undefined) {
+        presentationFormat.push({
+          id: currentId.value,
+          content: note.value?.content as NoteContent,
+        });
+      }
     }
 
     return presentationFormat;
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index d811be12..9301e7de 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -6,11 +6,11 @@
       <template #left>
         <div v-if="noteParents.length">
           <span
-            v-for="(parent, index) in noteParents"
+            v-for="(parent, index) in displayedParents"
             :key="parent.id"
           >
-            <a @click="navigateToParent(parent.id)">{{ t(`${getTitle(parent.content)}`) }}</a>
-            <span v-if="index < noteParents.length - 1"> > </span>
+            <a @click="handleParentClick(parent)">{{ newGetTitle(parent.content) }}</a>
+            <span v-if="index < displayedParents.length - 1"> > </span>
           </span>
         </div>
         <div v-else>
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRef, watch } from 'vue';
+import { computed, ref, toRef, watch } from 'vue';
 import { Button, Editor } from 'codex-ui/vue';
 import useNote from '@/application/services/useNote';
 import { useRouter } from 'vue-router';
@@ -66,7 +66,7 @@ import { makeElementScreenshot } from '@/infrastructure/utils/screenshot';
 import useNoteSettings from '@/application/services/useNoteSettings';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
-import { getTitle } from '@/infrastructure/utils/note';
+import { OutputData } from '@editorjs/editorjs';
 
 const { t } = useI18n();
 
@@ -90,7 +90,7 @@ const { note, noteTools, save, noteTitle, canEdit, formatNoteParents } = useNote
   id: noteId,
 });
 
-const noteParents = ref<Note[]>([]);
+let noteParents: Note[] = [];
 
 /**
  * Create new child note
@@ -121,6 +121,52 @@ function navigateToParent(parentId: string): void {
   router.push(`/note/${parentId}`);
 }
 
+/**
+ * Handle parent click
+ *
+ * @param {object} parent - The parent object
+ * @param {string} parent.id - The ID of the parent note
+ */
+function handleParentClick(parent: { id: string }): void {
+  if (parent.id !== 'ellipsis') {
+    navigateToParent(parent.id);
+  }
+}
+
+/**
+ * Displayed parents
+ */
+const displayedParents = computed(() => {
+  if (noteParents.length > 3) {
+    return [
+      noteParents[0],
+      {
+        id: 'ellipsis',
+        content: {
+          title: '...',
+        },
+      },
+      noteParents[noteParents.length - 1],
+    ];
+  }
+
+  return noteParents;
+});
+
+/**
+ * Update note cover
+ *
+ * @param {OutputData | { title: string }} content - The content of the note
+ * @returns {string} - The title of the note
+ */
+function newGetTitle(content: OutputData | { title: string }): string {
+  if ('blocks' in content) {
+    return content.blocks[0]?.data.text || 'Untitled';
+  }
+
+  return content.title;
+}
+
 const { updateCover } = useNoteSettings();
 
 const { isEditorReady, editorConfig } = useNoteEditor({
@@ -151,7 +197,6 @@ async function noteChanged(data: NoteContent): Promise<void> {
   const editorElement = editor.value ? editor.value.element : null;
 
   if (!isEmpty) {
-    noteParents.value = formatNoteParents();
     await save(data, props.parentId);
     /**
      * In case if we do not have note id, we can change its cover, and we need successful data for cover
@@ -188,6 +233,7 @@ watch(
 );
 
 watch(noteTitle, () => {
+  noteParents = formatNoteParents();
   if (props.id !== null) {
     useHead({
       title: noteTitle.value,

From e78539c7672bb180aa1d6ba2b97a7f3cb67cad9e Mon Sep 17 00:00:00 2001
From: dependentmadani <madani.badaoui12@gmail.com>
Date: Tue, 17 Dec 2024 21:02:38 +0100
Subject: [PATCH 8/8] update: changes based on the reviews, make things work as
 it should

---
 src/application/services/useNote.ts | 20 ++++-----
 src/presentation/pages/Note.vue     | 67 ++++++++++++-----------------
 2 files changed, 37 insertions(+), 50 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index 1432c429..355d80b1 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -71,9 +71,9 @@ interface UseNoteComposableState {
   unlinkParent: () => Promise<void>;
 
   /**
-   * Returns an array of Note objects representing the formatted note parents.
+   * Returns an array of note parents for the current note.
    */
-  formatNoteParents: () => Note[];
+  noteParents: Ref<Note[]>;
 
   /**
    * Defines if user can edit note
@@ -168,7 +168,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    *
    * Actual note by default
    */
-  let noteParents: Note[] = [];
+  const noteParents = ref<Note[]>([]);
 
   /**
    * Load note by id
@@ -184,7 +184,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     canEdit.value = response.accessRights.canEdit;
     noteTools.value = response.tools;
     parentNote.value = response.parentNote;
-    noteParents = response.parents;
+    noteParents.value = response.parents;
   }
 
   /**
@@ -279,7 +279,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   }
 
   /**
-   * Reform the received note parents from api into presentation format.
+   * Reform the array of note parents by adding the actual note id and content.
    * @returns An array of Note objects representing the formatted note parents.
    * @throws {Error} If the note id is not defined.
    */
@@ -289,14 +289,14 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     }
     let presentationFormat: Note[] = [];
 
-    if (noteParents.length === 0) {
+    if (noteParents.value.length === 0) {
       presentationFormat.push({
         id: currentId.value,
         content: note.value?.content as NoteContent,
       });
     } else {
-      presentationFormat = noteParents;
-      if (noteParents.find(noteItem => noteItem.id === currentId.value) === undefined) {
+      presentationFormat = noteParents.value;
+      if (noteParents.value.find(noteItem => noteItem.id === currentId.value) === undefined) {
         presentationFormat.push({
           id: currentId.value,
           content: note.value?.content as NoteContent,
@@ -357,7 +357,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   });
 
   watch(noteTitle, (currentNoteTitle) => {
-    formatNoteParents();
+    noteParents.value = formatNoteParents();
     patchOpenedPageByUrl(
       route.path,
       {
@@ -375,7 +375,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     resolveToolsByContent,
     save,
     unlinkParent,
-    formatNoteParents,
+    noteParents,
     parentNote,
   };
 }
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index 9301e7de..0de370e0 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -4,17 +4,16 @@
       :style="{ '--opacity': id && note ? 1 : 0 }"
     >
       <template #left>
-        <div v-if="noteParents.length">
-          <span
+        <div>
+          <RouterLink
             v-for="(parent, index) in displayedParents"
-            :key="parent.id"
+            :key="index"
+            :to="{ path: `/note/${parent.id ? parent.id : noteId}` }"
+            @click.prevent="handleParentClick($event, parent)"
           >
-            <a @click="handleParentClick(parent)">{{ newGetTitle(parent.content) }}</a>
+            {{ getTitle(parent.content) }}
             <span v-if="index < displayedParents.length - 1"> > </span>
-          </span>
-        </div>
-        <div v-else>
-          {{ t('note.lastEdit') + ' ' + 'a few seconds ago' }}
+          </RouterLink>
         </div>
       </template>
       <template #right>
@@ -56,9 +55,10 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef, watch } from 'vue';
+import { OutputData } from '@editorjs/editorjs';
 import { Button, Editor } from 'codex-ui/vue';
 import useNote from '@/application/services/useNote';
-import { useRouter } from 'vue-router';
+import { RouterLink, useRouter } from 'vue-router';
 import { Note, NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
@@ -66,7 +66,7 @@ import { makeElementScreenshot } from '@/infrastructure/utils/screenshot';
 import useNoteSettings from '@/application/services/useNoteSettings';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
-import { OutputData } from '@editorjs/editorjs';
+import { getTitle } from '@/infrastructure/utils/note';
 
 const { t } = useI18n();
 
@@ -86,12 +86,10 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit, formatNoteParents } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents } = useNote({
   id: noteId,
 });
 
-let noteParents: Note[] = [];
-
 /**
  * Create new child note
  */
@@ -124,12 +122,15 @@ function navigateToParent(parentId: string): void {
 /**
  * Handle parent click
  *
+ * @param {Event} event - The click event
  * @param {object} parent - The parent object
  * @param {string} parent.id - The ID of the parent note
  */
-function handleParentClick(parent: { id: string }): void {
-  if (parent.id !== 'ellipsis') {
+function handleParentClick(event: Event, parent: Note): void {
+  if (getTitle(parent.content) !== '...') {
     navigateToParent(parent.id);
+  } else {
+    event.preventDefault();
   }
 }
 
@@ -137,36 +138,23 @@ function handleParentClick(parent: { id: string }): void {
  * Displayed parents
  */
 const displayedParents = computed(() => {
-  if (noteParents.length > 3) {
+  if (noteParents.value.length > 3) {
+    const newNoteContent = { blocks: [] } as OutputData;
+
+    newNoteContent.blocks.push({ type: 'paraghraph',
+      data: { text: '...' } });
+
     return [
-      noteParents[0],
-      {
-        id: 'ellipsis',
-        content: {
-          title: '...',
-        },
-      },
-      noteParents[noteParents.length - 1],
+      noteParents.value[0],
+      { id: '',
+        content: newNoteContent },
+      noteParents.value[noteParents.value.length - 1],
     ];
   }
 
-  return noteParents;
+  return noteParents.value;
 });
 
-/**
- * Update note cover
- *
- * @param {OutputData | { title: string }} content - The content of the note
- * @returns {string} - The title of the note
- */
-function newGetTitle(content: OutputData | { title: string }): string {
-  if ('blocks' in content) {
-    return content.blocks[0]?.data.text || 'Untitled';
-  }
-
-  return content.title;
-}
-
 const { updateCover } = useNoteSettings();
 
 const { isEditorReady, editorConfig } = useNoteEditor({
@@ -233,7 +221,6 @@ watch(
 );
 
 watch(noteTitle, () => {
-  noteParents = formatNoteParents();
   if (props.id !== null) {
     useHead({
       title: noteTitle.value,