From e9e06c72d24c4fca42789d5fc82a7597389483d5 Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Wed, 19 Jun 2024 14:09:32 -0500
Subject: [PATCH] refactor: Better editor mount/unmount setup

---
 src/components/code-editor/index.jsx      | 24 ++++++++++++++---------
 src/components/controllers/repl/index.jsx |  2 ++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/code-editor/index.jsx b/src/components/code-editor/index.jsx
index 2877b379c..d91a2776f 100644
--- a/src/components/code-editor/index.jsx
+++ b/src/components/code-editor/index.jsx
@@ -27,11 +27,15 @@ const highlightStyle = HighlightStyle.define([
 ]);
 
 export default function CodeEditor(props) {
-	const ref = useRef(null);
+	const editorParent = useRef(null);
+	const editor = useRef(null);
 	// eslint-disable-next-line no-unused-vars
 	const [_, setEditor] = useState(null);
 
 	useEffect(() => {
+		if (editor.current && !props.baseExampleSlug) return;
+		if (editor.current) editor.current.destroy();
+
 		const theme = EditorView.theme({}, { dark: true });
 
 		const state = EditorState.create({
@@ -56,18 +60,20 @@ export default function CodeEditor(props) {
 			]
 		});
 
-		const view = new EditorView({
+		editor.current = new EditorView({
 			state,
-			parent: ref.current
+			parent: editorParent.current
 		});
 
-		setEditor(view);
+		setEditor(editor.current);
+	}, [props.baseExampleSlug]);
 
-		return () => {
-			view.destroy();
+	useEffect(() => (
+		() => {
+			editor.current.destroy();
 			setEditor(null);
-		};
-	}, [props.baseExampleSlug]);
+		}
+	), []);
 
-	return <div ref={ref} class={cx(style.codeEditor, props.class)} />;
+	return <div ref={editorParent} class={cx(style.codeEditor, props.class)} />;
 }
diff --git a/src/components/controllers/repl/index.jsx b/src/components/controllers/repl/index.jsx
index 9ddcb6719..81ec14997 100644
--- a/src/components/controllers/repl/index.jsx
+++ b/src/components/controllers/repl/index.jsx
@@ -193,6 +193,8 @@ export class Repl extends Component {
 		if (this.state.exampleSlug) {
 			const example = getExample(this.state.exampleSlug, EXAMPLES);
 			if (code !== example.code && this.state.exampleSlug !== '') {
+				// eslint-disable-next-line react/no-did-update-set-state
+				this.setState({ exampleSlug: '' });
 				history.replaceState(null, null, '/repl');
 			}
 		}