fixup! Update useEditor

src/application/services/useEditor.ts

@@ -1,14 +1,12 @@
+import type { BlockTool } from '@editorjs/editorjs';
 import Editor, { type OutputData, type API } from '@editorjs/editorjs';
+// @ts-expect-error editor plugins have no types
 import Header from '@editorjs/header';
 import type { Ref } from 'vue';
 import { onBeforeUnmount, onMounted } from 'vue';
 import { useAppState } from './useAppState';
 import type EditorTool from '@/domain/entities/EditorTool';
-
-/**
- * Editor.js tool
- */
-type Tool = any;
+import { loadScript } from '@/application/utils/load-script';
 
 /**
  * Editorjs params
@@ -33,21 +31,6 @@ interface UseEditorParams {
   onChange?: (api: API) => void;
 }
 
-/**
- * Add promise which is rejected after loading is complete
- *
- * @param src - source path to tool
- */
-function loadScript(src: string): Promise<Event> {
-  return new Promise(function (resolve, reject) {
-    const script = document.createElement('script');
-
-    script.src = src;
-    script.onload = resolve;
-    script.onerror = reject;
-    document.head.appendChild(script);
-  });
-}
 
 /**
  * Handles Editor.js instance creation
@@ -70,32 +53,29 @@ export function useEditor({ id, content, isReadOnly, onChange }: UseEditorParams
    *
    * @param tool - tool - data
    */
-  async function downloadTool(tool: EditorTool): Promise<[string, Tool] | undefined> {
+  async function downloadTool(tool: EditorTool): Promise<Record<string, BlockTool> | undefined> {
     if (tool.source.cdn === undefined) {
       return;
     }
 
     await loadScript(tool.source.cdn);
 
-    return [tool.title, window[tool.exportName]];
+    return { [tool.title]: window[tool.exportName as keyof typeof window] };
   }
 
   /**
    * Download all the user tools
    *
    * @param tools - tools data
    */
-  async function downloadTools(tools: Ref<EditorTool[]>): Promise<Record<string, Tool>> {
+  async function downloadTools(tools: Ref<EditorTool[]>): Promise<Record<string, BlockTool> | undefined> {
     const toolsData = await Promise.all(tools.value.map(downloadTool));
 
-    return toolsData.reduce((acc, curr) => {
-      if (curr === undefined) {
-        return acc;
-      }
-      const name = curr[0];
-      const obj = curr[1];
-
-      acc[name] = obj;
+    return toolsData.filter(item => item !== undefined).reduce((acc, curr) => {
+      return {
+        ...acc,
+        ...curr,
+      };
 
       return acc;
     }, {});

src/application/utils/load-script.ts

@@ -0,0 +1,15 @@
+/**
+ * Loads script by specified url
+ *
+ * @param src - script source url
+ */
+export function loadScript(src: string): Promise<Event> {
+  return new Promise(function (resolve, reject) {
+    const script = document.createElement('script');
+
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}

src/presentation/components/editor/Editor.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { type OutputData, type API } from '@editorjs/editorjs';
-import { useEditor } from '@/application/services/useEditor2';
+import { useEditor } from '@/application/services/useEditor';
 
 /**
  * Define the props for the component