chore: move editor instance out of zustand

Author: brettkolodny

src/client/Editor.tsx

@@ -31,6 +31,7 @@ import {
 	ZapIcon,
 } from "lucide-react";
 import { type FC, useEffect, useRef, useState } from "react";
+import { useEditor } from "@/client/contexts/editor";
 
 type EditorProps = {
 	code: string;
@@ -39,6 +40,7 @@ type EditorProps = {
 
 export const Editor: FC<EditorProps> = ({ code, setCode }) => {
 	const { appliedTheme } = useTheme();
+	const editorRef = useEditor();
 
 	const [codeCopied, setCodeCopied] = useState(() => false);
 	const copyTimeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(
@@ -159,7 +161,7 @@ export const Editor: FC<EditorProps> = ({ code, setCode }) => {
 						<MonacoEditor
 							value={code}
 							onMount={(editor) => {
-								// $setEditor(editor);
+								editorRef.current = editor;
 							}}
 							onChange={(code) => {
 								if (code !== undefined) {

src/client/components/DynamicParameter.tsx

@@ -42,7 +42,7 @@ import {
 } from "lucide-react";
 import { type FC, useEffect, useId, useRef, useState } from "react";
 import * as Yup from "yup";
-import { useStore } from "@/client/store";
+import { useEditor } from "@/client/contexts/editor";
 
 interface WorkspaceBuildParameter {
 	readonly name: string;
@@ -127,17 +127,17 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 	autofill,
 	id,
 }) => {
-	const $editor = useStore((state) => state.editor);
+	const ediorRef = useEditor();
 
 	const onGoToDefinition = () => {
-		$editor?.revealLine(parameter.def_range.Start.Line);
-		$editor?.setSelection({
+		ediorRef.current?.revealLine(parameter.def_range.Start.Line);
+		ediorRef.current?.setSelection({
 			startLineNumber: parameter.def_range.Start.Line,
 			startColumn: parameter.def_range.Start.Column,
 			endColumn: parameter.def_range.End.Column,
 			endLineNumber: parameter.def_range.End.Line,
 		});
-		$editor?.focus()
+		ediorRef.current?.focus();
 	};
 
 	const displayName = parameter.display_name

src/client/contexts/editor.tsx

@@ -0,0 +1,31 @@
+import type { editor as monaco } from "monaco-editor";
+import {
+	type FC,
+	type PropsWithChildren,
+	createContext,
+	useContext,
+	useRef,
+} from "react";
+
+type EditorContext =
+	React.RefObject<monaco.IStandaloneCodeEditor | null> | null;
+
+const EditorContext = createContext<EditorContext>(null);
+
+export const EditorProvider: FC<PropsWithChildren> = ({ children }) => {
+	const editor = useRef<monaco.IStandaloneCodeEditor>(null);
+
+	return (
+		<EditorContext.Provider value={editor}>{children}</EditorContext.Provider>
+	);
+};
+
+export const useEditor = () => {
+	const editor = useContext(EditorContext);
+
+	if (!editor) {
+		throw new Error("useEditor must eb used within an EditorProvider");
+	}
+
+	return editor;
+};

src/client/index.tsx

@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { RouterProvider, createBrowserRouter, redirect } from "react-router";
 import { App, loader as appLoader } from "./App.tsx";
 import "@/client/index.css";
+import { EditorProvider } from "./contexts/editor.tsx";
 
 const router = createBrowserRouter([
 	{
@@ -27,11 +28,13 @@ if (!root) {
 } else {
 	createRoot(root).render(
 		<StrictMode>
-			<ThemeProvider>
-				<TooltipProvider>
-					<RouterProvider router={router} />
-				</TooltipProvider>
-			</ThemeProvider>
+			<EditorProvider>
+				<ThemeProvider>
+					<TooltipProvider>
+						<RouterProvider router={router} />
+					</TooltipProvider>
+				</ThemeProvider>
+			</EditorProvider>
 		</StrictMode>,
 	);
 }

src/client/store.tsx

@@ -30,7 +30,6 @@
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": false,
-    "noUncheckedIndexedAccess": true
   },
   "include": [
     "src"