Remove CodeMirror wrapper

Author: TheKodeToad

frontend/src/component/common/CodeMirror.tsx

@@ -1,9 +1,8 @@
-import { createResource, createSignal, getOwner, runWithOwner } from "solid-js";
+import { createEffect, createResource, createSignal, getOwner, on, runWithOwner } from "solid-js";
 import { baseExtensions } from ".";
 import { getGuildConfig, writeGuildConfig } from "../../client";
 import { account } from "../../state/account";
 import { useGuild } from "../../state/guilds";
-import { CodeMirror } from "../common/CodeMirror";
 import { StatusFallback } from "../common/StatusFallback";
 import { Button } from "../common/Button";
 import { EditorView } from "codemirror";
@@ -19,13 +18,12 @@ export function ConfigEditor(props: { guildID: string; plugin: string; }) {
 			return undefined;
 	});
 
-
-	let view: EditorView;
-
 	const [saving, setSaving] = createSignal(false);
 	const saveDisabled = () => saving() || resource.loading || resource() === undefined;
 
-	const save = async () => {
+	const owner = getOwner();
+
+	const save = () => runWithOwner(owner, async () => {
 		setSaving(true);
 
 		const lastLine = view.state.doc.line(view.state.doc.lines).text;
@@ -47,22 +45,28 @@ export function ConfigEditor(props: { guildID: string; plugin: string; }) {
 		} finally {
 			setSaving(false);
 		}
-	};
+	});
 
-	const owner = getOwner();
+	const view = new EditorView({
+		extensions: baseExtensions({
+			save: () => (save(), true)
+		})
+	});
+
+	createEffect(on(resource, () => {
+		view.update([
+			view.state.update({
+				changes: { from: 0, to: view.state.doc.length, insert: resource() }
+			})
+		]);
+	}, { defer: true }));
 
 	return (
 		<div class="configEditor">
 			<div class="hbox">
-				<Button color="success" onClick={() => runWithOwner(owner, save)} disabled={saveDisabled()} icon={IconDeviceFloppy}>Save</Button>
+				<Button color="success" onClick={save} disabled={saveDisabled()} icon={IconDeviceFloppy}>Save</Button>
 			</div>
-			<StatusFallback resource={resource}>
-				<CodeMirror
-					value={resource()!}
-					viewRef={v => view = v}
-					extensions={baseExtensions(() => (runWithOwner(owner, save), true))}
-				/>
-			</StatusFallback>
+			<StatusFallback resource={resource}>{view.dom}</StatusFallback>
 		</div>
 	);
 }

frontend/src/component/config/ConfigEditor.tsx

@@ -16,7 +16,9 @@ const toml = LRLanguage.define({
 	}
 });
 
-export function baseExtensions(saveAction: Command) {
+export function baseExtensions(options: {
+	save: Command
+}) {
 	return [
 		basicSetup,
 		toml,
@@ -27,7 +29,7 @@ export function baseExtensions(saveAction: Command) {
 		}]),
 		keymap.of([{
 			key: "Mod-s",
-			run: saveAction,
+			run: options.save,
 		}]),
 		indentUnit.of("\t"),
 		gruvboxDark,