diff --git a/apps/web/src/components/editor/context.ts b/apps/web/src/components/editor/context.ts index 4b3118a3f..de3823008 100644 --- a/apps/web/src/components/editor/context.ts +++ b/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, + UseBoundStore, 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() { diff --git a/apps/web/src/components/editor/index.tsx b/apps/web/src/components/editor/index.tsx index 841742bb4..8013204c8 100644 --- a/apps/web/src/components/editor/index.tsx +++ b/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); }} /> @@ -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); } }} > diff --git a/apps/web/src/components/editor/toolbar.js b/apps/web/src/components/editor/toolbar.js index e528b0491..90fc6957b 100644 --- a/apps/web/src/components/editor/toolbar.js +++ b/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(); }, }, {