fix: attachment can't be added in new editor instance

apps/web/src/components/editor/context.ts

@@ -1,8 +1,8 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { IEditor, NoteStatistics } from "./types";
 import createStore from "../../common/store";
 import BaseStore from "../../stores";
-import { UseStore } from "zustand";
+import { UseBoundStore } from "zustand";
 import shallow from "zustand/shallow";
 import type { ToolbarDefinition } from "@streetwriters/editor";
 
@@ -27,16 +27,22 @@ class EditorContext extends BaseStore {
         typeof partial === "function" ? partial(state.subState) : partial;
       state.subState = { ...state.subState, ...newPartialState };
     });
+    console.log("Configuring editor context", this.get().subState.editor);
   };
 }
 
 const [useEditorContext] = createStore(EditorContext) as [
-  UseStore<EditorContext>,
+  UseBoundStore<EditorContext>,
   EditorContext
 ];
 
 export function useEditorInstance() {
-  return useEditorContext((store) => store.subState.editor);
+  const editor = useEditorContext((store) => store.subState.editor);
+  const editorRef = useRef(editor);
+  useEffect(() => {
+    editorRef.current = editor;
+  }, [editor]);
+  return editorRef;
 }
 
 export function useConfigureEditor() {

apps/web/src/components/editor/index.tsx

@@ -185,12 +185,12 @@ export function Editor(props: EditorProps) {
   const editor = useEditorInstance();
 
   useEffect(() => {
-    if (!editor) return;
+    if (!editor.current) return;
 
     const event = AppEventManager.subscribe(
       AppEvents.UPDATE_ATTACHMENT_PROGRESS,
       ({ hash, loaded, total, type }: AttachmentProgress) => {
-        editor.sendAttachmentProgress(
+        editor.current?.sendAttachmentProgress(
           hash,
           type,
           Math.round((loaded / total) * 100)
@@ -210,7 +210,7 @@ export function Editor(props: EditorProps) {
         src: string;
       }) => {
         if (groupId?.startsWith("monograph")) return;
-        editor.loadImage(hash, src);
+        editor.current?.loadImage(hash, src);
       }
     );
 
@@ -241,13 +241,13 @@ export function Editor(props: EditorProps) {
           const mime = type === "file" ? "*/*" : "image/*";
           insertAttachment(mime).then((file) => {
             if (!file) return;
-            editor?.attachFile(file);
+            editor.current?.attachFile(file);
           });
         }}
         onAttachFile={async (file) => {
           const result = await attachFile(file);
           if (!result) return;
-          editor?.attachFile(result);
+          editor.current?.attachFile(result);
         }}
       />
     </EditorChrome>
@@ -417,7 +417,7 @@ function DropZone(props: DropZoneProps) {
         for (let file of e.dataTransfer.files) {
           const result = await attachFile(file);
           if (!result) continue;
-          editor.attachFile(result);
+          editor.current?.attachFile(result);
         }
       }}
     >

apps/web/src/components/editor/toolbar.js

@@ -85,7 +85,7 @@ function Toolbar(props) {
             exitFullscreen(document);
             setIsFullscreen(false);
           }
-          if (editor) editor.focus();
+          if (editor) editor.current.focus();
         },
       },
       {