feat(note): Merge user and note tools

src/application/services/useNote.ts

@@ -2,12 +2,8 @@ import { onMounted, ref, type Ref, type MaybeRefOrGetter, computed, toValue, wat
 import { noteService } from '@/domain';
 import type { Note, NoteContent, NoteId } from '@/domain/entities/Note';
 import { useRouter } from 'vue-router';
-
-/**
- * On new note creation, we use predefined structure of the Editor: header + paragraph
- * We call it NoteDraft
- */
-type NoteDraft = Pick<Note, 'content'>;
+import type { NoteDraft } from '@/domain/entities/NoteDraft';
+import type EditorTool from '@/domain/entities/EditorTool';
 
 /**
  * Creates base structure for the empty note:
@@ -46,6 +42,11 @@ interface UseNoteComposableState {
    */
   note: Ref<Note | NoteDraft | null>;
 
+  /**
+   * List of tools used in the note
+   */
+  noteTools: Ref<EditorTool[]>;
+
   /**
    * Creates/updates the note
    */
@@ -102,6 +103,11 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const note = ref<Note | NoteDraft | null>(currentId.value === null ? createDraft() : null);
 
+  /**
+   * List of tools used in the note
+   */
+  const noteTools = ref<EditorTool[]>([]);
+
   /**
    * Router instance used to replace the current route with note id
    */
@@ -149,6 +155,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
 
     note.value = response.note;
     canEdit.value = response.accessRights.canEdit;
+    noteTools.value = response.tools;
     parentNote.value = response.parentNote;
   }
 
@@ -244,6 +251,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
 
   return {
     note,
+    noteTools,
     noteTitle,
     canEdit,
     resolveHostname,

src/application/services/useTools.ts

@@ -0,0 +1,82 @@
+import { type Ref, ref, watch } from 'vue';
+import { useAppState } from './useAppState';
+import type EditorTool from '@/domain/entities/EditorTool';
+import { loadScript } from '@/infrastructure/utils/load-script';
+import type { EditorConfig } from '@editorjs/editorjs';
+
+/**
+ * Downloaded tools data structure
+ */
+type DownloadedTools = EditorConfig['tools'];
+
+/**
+ * Service for load user tools
+ *
+ * @param noteTools - note tools
+ */
+export function useTools(noteTools: Ref<EditorTool[]>): {
+  tools: Ref<DownloadedTools | undefined>;
+} {
+  /**
+   * User notes tools
+   */
+  const { userEditorTools } = useAppState();
+  const tools = ref<DownloadedTools | undefined>();
+
+  /**
+   * Download all the user tools and return a map
+   *
+   * @param toolsList - tools data
+   */
+  async function downloadTools(toolsList: EditorTool[]): Promise<DownloadedTools> {
+    const downloadedTools: DownloadedTools = {};
+
+    for (const tool of toolsList) {
+      if (tool.source.cdn === undefined) {
+        continue;
+      }
+
+      await loadScript(tool.source.cdn);
+
+      downloadedTools[tool.name] = window[tool.exportName as keyof typeof window];
+    }
+
+    return downloadedTools;
+  }
+
+  /**
+   * Merge two arrays of tools, removing duplicates
+   *
+   * @param toolsA – first array of tools
+   * @param toolsB – second array of tools
+   */
+  function mergeTools(toolsA: EditorTool[], toolsB: EditorTool[]): EditorTool[] {
+    const uniqueTools = new Map<string, EditorTool>();
+
+    [...toolsA, ...toolsB].forEach((tool) => {
+      uniqueTools.set(tool.name, tool);
+    });
+
+    return Array.from(uniqueTools.values());
+  }
+
+  watch(
+    [userEditorTools, noteTools],
+    async () => {
+      const allTools = mergeTools(userEditorTools.value || [], noteTools.value);
+
+      /**
+       * If tools are not loaded yet or empty, skip downloading their scripts
+       */
+      if (allTools.length === 0) {
+        return;
+      }
+      tools.value = await downloadTools(allTools);
+    },
+    { immediate: true }
+  );
+
+  return {
+    tools,
+  };
+}

src/domain/entities/NoteDraft.ts

@@ -0,0 +1,7 @@
+import type { Note } from './Note';
+
+/**
+ * On new note creation, we use predefined structure of the Editor: header + paragraph
+ * We call it NoteDraft
+ */
+export type NoteDraft = Pick<Note, 'content'>;

src/domain/note.repository.interface.ts

@@ -1,6 +1,7 @@
 import type { Note, NoteContent, NoteId } from '@/domain/entities/Note';
 import type { NoteList } from './entities/NoteList';
 import type NoteAccessRights from '@/domain/entities/NoteAccessRights';
+import type EditorTool from './entities/EditorTool';
 
 /**
  * Repository interface describes the methods that required by domain for its business logic implementation
@@ -13,7 +14,9 @@ export default interface NoteRepositoryInterface {
    * @returns {{ note: Note, accessRights: NoteAccessRights, parentNote: Note | undefined }} - Returns a Note, NoteAccessRights and parent note (if exists) by id
    * @throws NotFoundError
    */
-  getNoteById(publicId: string): Promise<{ note: Note; accessRights: NoteAccessRights; parentNote: Note | undefined }>;
+  getNoteById(
+    publicId: string
+  ): Promise<{ note: Note; accessRights: NoteAccessRights; parentNote: Note | undefined; tools: EditorTool[] }>;
 
   /**
    * Returns a Note and NoteAccessRights by hostname

src/domain/note.service.ts

@@ -1,6 +1,7 @@
 import type NoteRepository from '@/domain/note.repository.interface';
 import type { Note, NoteContent, NoteId } from '@/domain/entities/Note';
 import type NoteAccessRights from '@/domain/entities/NoteAccessRights';
+import type EditorTool from './entities/EditorTool';
 
 /**
  * Note Service
@@ -30,7 +31,7 @@ export default class NoteService {
    */
   public async getNoteById(
     id: string
-  ): Promise<{ note: Note; accessRights: NoteAccessRights; parentNote: Note | undefined }> {
+  ): Promise<{ note: Note; accessRights: NoteAccessRights; parentNote: Note | undefined; tools: EditorTool[] }> {
     return await this.noteRepository.getNoteById(id);
   }
 

src/infrastructure/note.repository.ts

@@ -5,6 +5,7 @@ import type NoteStorage from '@/infrastructure/storage/note.js';
 import type NotesApiTransport from '@/infrastructure/transport/notes-api';
 import type { GetNoteResponsePayload } from '@/infrastructure/transport/notes-api/types/GetNoteResponsePayload';
 import type { NoteList } from '@/domain/entities/NoteList';
+import type EditorTool from '@/domain/entities/EditorTool';
 
 /**
  * Note repository
@@ -41,7 +42,7 @@ export default class NoteRepository implements NoteRepositoryInterface {
    */
   public async getNoteById(
     id: string
-  ): Promise<{ note: Note; accessRights: NoteAccessRights; parentNote: Note | undefined }> {
+  ): Promise<{ note: Note; accessRights: NoteAccessRights; parentNote: Note | undefined; tools: EditorTool[] }> {
     /**
      * Get note data from API
      */

src/infrastructure/transport/notes-api/types/GetNoteResponsePayload.ts

@@ -1,3 +1,4 @@
+import type EditorTool from '@/domain/entities/EditorTool';
 import type { Note } from '@/domain/entities/Note';
 import type NoteAccessRights from '@/domain/entities/NoteAccessRights.ts';
 
@@ -8,4 +9,5 @@ export type GetNoteResponsePayload = {
   note: Note;
   accessRights: NoteAccessRights;
   parentNote: Note | undefined;
+  tools: EditorTool[];
 };

src/presentation/pages/Note.vue

@@ -8,6 +8,7 @@
       >
         {{ t('note.createChildNote') }}
       </Button>
+
       <Button
         v-if="parentNote != undefined"
         @click="unlinkButton"
@@ -17,9 +18,9 @@
     </div>
 
     <Editor
-      v-if="userTools !== undefined"
+      v-if="tools !== undefined"
       ref="editor"
-      :tools="userTools"
+      :tools="tools"
       :content="note.content"
       :read-only="!canEdit"
       @change="noteChanged"
@@ -31,14 +32,13 @@
 import { ref, toRef, watch } from 'vue';
 import { Button, Editor } from 'codex-ui/vue';
 import useNote from '@/application/services/useNote';
-import { useUserTools } from '@/application/services/useUserTools.ts';
+import { useTools } from '@/application/services/useTools.ts';
 import { useRouter } from 'vue-router';
 import { NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const { userTools } = useUserTools();
 
 const router = useRouter();
 
@@ -56,10 +56,12 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, save, noteTitle, canEdit, unlinkParent, parentNote } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, unlinkParent, parentNote } = useNote({
   id: noteId,
 });
 
+const { tools } = useTools(noteTools);
+
 /**
  * Editor component reference
  */
@@ -124,3 +126,4 @@ watch(noteTitle, () => {
 </script>
 
 <style scoped></style>
+@/application/services/useTools