From a56e1d316bb5cac3e3a62e72321efa8607fbb432 Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Fri, 23 Feb 2024 12:47:28 +0300
Subject: [PATCH] fixup! Update useEditor

---
 src/application/services/useEditor.ts         | 48 ++++++-------------
 src/infrastructure/utils/load-script.ts       | 15 ++++++
 src/presentation/components/editor/Editor.vue |  2 +-
 3 files changed, 31 insertions(+), 34 deletions(-)
 create mode 100644 src/infrastructure/utils/load-script.ts

diff --git a/src/application/services/useEditor.ts b/src/application/services/useEditor.ts
index f43a7cc6..c8f6477d 100644
--- a/src/application/services/useEditor.ts
+++ b/src/application/services/useEditor.ts
@@ -1,20 +1,20 @@
+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';
+import { loadScript } from '@/infrastructure/utils/load-script';
 
 /**
- * Editor.js tool
- */
-type Tool = any;
-
-/**
- * Editorjs params
+ * UseEditor composable params
  */
 interface UseEditorParams {
-  /** Host element id */
+  /**
+   * Host element id
+   */
   id: string;
 
   /**
@@ -33,21 +33,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,14 +55,14 @@ 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] };
   }
 
   /**
@@ -85,17 +70,14 @@ export function useEditor({ id, content, isReadOnly, onChange }: UseEditorParams
    *
    * @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;
     }, {});
diff --git a/src/infrastructure/utils/load-script.ts b/src/infrastructure/utils/load-script.ts
new file mode 100644
index 00000000..603f9cd6
--- /dev/null
+++ b/src/infrastructure/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);
+  });
+}
diff --git a/src/presentation/components/editor/Editor.vue b/src/presentation/components/editor/Editor.vue
index a177f250..8937abf1 100644
--- a/src/presentation/components/editor/Editor.vue
+++ b/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