diff --git a/src/components/Editor/MonacoEditor.tsx b/src/components/Editor/MonacoEditor.tsx index 12f11e0..5d8d95b 100644 --- a/src/components/Editor/MonacoEditor.tsx +++ b/src/components/Editor/MonacoEditor.tsx @@ -12,7 +12,8 @@ type Props = { const MonacoEditor: FC = (props) => { const { updateFile, getFile } = useProject(); - const { run, update, updateImageDecorations, getRuntime } = useEditor(); + const { run, update, updateImageDecorations, getRuntime, setRuntime } = + useEditor(); const handleEditorBeforeMount = (monaco: Monaco) => { configMonaco(monaco); @@ -22,8 +23,7 @@ const MonacoEditor: FC = (props) => { editor: editor.IStandaloneCodeEditor, monaco: Monaco, ) => { - getRuntime().editor = editor; - getRuntime().monaco = monaco; + setRuntime({ editor, monaco }); const currentFile = getRuntime().currentFile; props.onMount?.(); diff --git a/src/components/FileTree/FileEntry.tsx b/src/components/FileTree/FileEntry.tsx index 97d8ed1..0219330 100644 --- a/src/components/FileTree/FileEntry.tsx +++ b/src/components/FileTree/FileEntry.tsx @@ -20,10 +20,10 @@ const logoByKind = { const FileEntry: FC = ({ file }) => { const { removeFile } = useProject(); - const { getRuntime } = useEditor(); + const { getRuntime, setCurrentFile } = useEditor(); const handleClick: MouseEventHandler = () => { - getRuntime().currentFile = file.path; + setCurrentFile(file.path); }; const handleDelete: MouseEventHandler = (e) => { @@ -35,7 +35,7 @@ const FileEntry: FC = ({ file }) => { if (confirm("Are you sure you want to remove this scene?")) { removeFile(file.path); - getRuntime().currentFile = "main.js"; + setCurrentFile("main.js"); } }; diff --git a/src/hooks/useEditor.ts b/src/hooks/useEditor.ts index 900e313..e778980 100644 --- a/src/hooks/useEditor.ts +++ b/src/hooks/useEditor.ts @@ -26,6 +26,8 @@ type EditorStore = { update: (value?: string) => void; run: () => void; getRuntime: () => EditorRuntime; + setRuntime: (runtime: Partial) => void; + setCurrentFile: (currentFile: string) => void; setTheme: (theme: string) => void; updateImageDecorations: () => void; showNotification: (message: string) => void; @@ -34,7 +36,7 @@ type EditorStore = { loadProject: (project: string) => void; }; -export const useEditor = create((_set, get) => ({ +export const useEditor = create((set, get) => ({ runtime: { editor: null, monaco: null, @@ -43,7 +45,25 @@ export const useEditor = create((_set, get) => ({ iframe: createRef() as MutableRefObject, isDefaultExample: false, }, + setRuntime: (runtime) => { + set((state) => ({ + runtime: { + ...state.runtime, + ...runtime, + }, + })); + }, getRuntime: () => get().runtime, + setCurrentFile: (currentFile) => { + set((state) => ({ + runtime: { + ...state.runtime, + currentFile, + }, + })); + + get().update(); + }, update: (customValue?: string) => { if (customValue) { debug(0, "Editor value updated with custom value");