Update editor styles

src-web/hooks/useCodemirror.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { EditorView, minimalSetup } from 'codemirror';
+import { EditorView, basicSetup } from 'codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
 import { html } from '@codemirror/lang-html';
@@ -12,30 +12,37 @@ const myHighlightStyle = HighlightStyle.define([
     tag: [tags.documentMeta, tags.blockComment, tags.lineComment, tags.docComment, tags.comment],
     color: '#757b93',
   },
-  { tag: tags.name, color: '#4b92ff' },
+  { tag: tags.name, color: '#4dafff' },
   { tag: tags.variableName, color: '#4bff4e' },
   { tag: tags.attributeName, color: '#b06fff' },
   { tag: tags.attributeValue, color: '#ff964b' },
-  { tag: tags.keyword, color: '#fc6' },
+  { tag: [tags.keyword, tags.string], color: '#fc6' },
   { tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
 ]);
 
-const extensions = [
-  minimalSetup,
-  syntaxHighlighting(myHighlightStyle),
-  html(),
-  javascript(),
-  json(),
-];
+const syntaxExtensions = {
+  'application/json': json(),
+  'application/javascript': javascript(),
+  'text/html': html(),
+};
 
-export default function useCodeMirror({ value }: { value: string }) {
+const extensions = [basicSetup, syntaxHighlighting(myHighlightStyle)];
+export type EditorLanguage = keyof typeof syntaxExtensions;
+
+export default function useCodeMirror({
+  value,
+  language,
+}: {
+  value: string;
+  language: EditorLanguage;
+}) {
   const [cm, setCm] = useState<EditorView | null>(null);
   const ref = useRef(null);
   useEffect(() => {
     if (ref.current === null) return;
 
     const view = new EditorView({
-      extensions,
+      extensions: [...extensions, syntaxExtensions[language]],
       parent: ref.current,
     });
 
@@ -47,7 +54,10 @@ export default function useCodeMirror({ value }: { value: string }) {
   useEffect(() => {
     if (cm === null) return;
 
-    const newState = EditorState.create({ doc: value, extensions });
+    const newState = EditorState.create({
+      doc: value,
+      extensions: [...extensions, syntaxExtensions[language]],
+    });
     cm.setState(newState);
   }, [cm, value]);