feat: support common languages in codemirror (#159)

This add syntax highlighting, not LSPs. Styling looks horrible but that's for another PR.  
  
![image.png](https://app.graphite.com/user-attachments/assets/3cb1be6a-c45e-4db7-9ea6-fa40ab4da164.png)

Author: jonathanlab

apps/array/package.json

@@ -68,6 +68,27 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^2.0.52",
+    "@codemirror/lang-angular": "^0.1.4",
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-jinja": "^6.0.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-liquid": "^6.3.0",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-php": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sass": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-vue": "^0.1.3",
+    "@codemirror/lang-wast": "^6.0.2",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.11.3",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.8",
     "@dnd-kit/react": "^0.1.21",

apps/array/src/renderer/features/code-editor/components/CodeEditorPanel.tsx

@@ -73,7 +73,7 @@ export function CodeEditorPanel({
 
   return (
     <Box height="100%" style={{ overflow: "hidden" }}>
-      <CodeMirrorEditor content={fileContent} readOnly />
+      <CodeMirrorEditor content={fileContent} filePath={filePath} readOnly />
     </Box>
   );
 }

apps/array/src/renderer/features/code-editor/components/CodeMirrorEditor.tsx

@@ -1,3 +1,7 @@
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+} from "@codemirror/language";
 import type { Extension } from "@codemirror/state";
 import { EditorState } from "@codemirror/state";
 import {
@@ -6,14 +10,17 @@ import {
   lineNumbers,
 } from "@codemirror/view";
 import { useEffect, useRef } from "react";
+import { getLanguageExtension } from "../utils/languages";
 
 interface CodeMirrorEditorProps {
   content: string;
+  filePath?: string;
   readOnly?: boolean;
 }
 
 export function CodeMirrorEditor({
   content,
+  filePath,
   readOnly = false,
 }: CodeMirrorEditorProps) {
   const editorRef = useRef<HTMLDivElement>(null);
@@ -24,10 +31,14 @@ export function CodeMirrorEditor({
       return;
     }
 
+    const languageExtension = filePath ? getLanguageExtension(filePath) : null;
+
     const extensions: Extension[] = [
       lineNumbers(),
       highlightActiveLineGutter(),
+      syntaxHighlighting(defaultHighlightStyle),
       EditorView.editable.of(!readOnly),
+      ...(languageExtension ? [languageExtension] : []),
       EditorView.theme({
         "&": {
           height: "100%",
@@ -69,7 +80,7 @@ export function CodeMirrorEditor({
       viewRef.current?.destroy();
       viewRef.current = null;
     };
-  }, [content, readOnly]);
+  }, [content, filePath, readOnly]);
 
   return <div ref={editorRef} style={{ height: "100%", width: "100%" }} />;
 }

apps/array/src/renderer/features/code-editor/utils/languages.ts

@@ -0,0 +1,80 @@
+import { angular } from "@codemirror/lang-angular";
+import { cpp } from "@codemirror/lang-cpp";
+import { css } from "@codemirror/lang-css";
+import { go } from "@codemirror/lang-go";
+import { html } from "@codemirror/lang-html";
+import { java } from "@codemirror/lang-java";
+import { javascript } from "@codemirror/lang-javascript";
+import { jinja } from "@codemirror/lang-jinja";
+import { json } from "@codemirror/lang-json";
+import { liquid } from "@codemirror/lang-liquid";
+import { markdown } from "@codemirror/lang-markdown";
+import { php } from "@codemirror/lang-php";
+import { python } from "@codemirror/lang-python";
+import { rust } from "@codemirror/lang-rust";
+import { sass } from "@codemirror/lang-sass";
+import { sql } from "@codemirror/lang-sql";
+import { vue } from "@codemirror/lang-vue";
+import { wast } from "@codemirror/lang-wast";
+import { xml } from "@codemirror/lang-xml";
+import { yaml } from "@codemirror/lang-yaml";
+import type { Extension } from "@codemirror/state";
+
+type LanguageExtension = () => Extension;
+
+const LANGUAGE_MAP: Record<string, LanguageExtension> = {
+  // JavaScript/TypeScript
+  js: () => javascript({ jsx: true }),
+  jsx: () => javascript({ jsx: true }),
+  mjs: () => javascript(),
+  ts: () => javascript({ jsx: true, typescript: true }),
+  tsx: () => javascript({ jsx: true, typescript: true }),
+
+  // Web
+  html: html,
+  htm: html,
+  css: css,
+  scss: () => sass({ indented: false }),
+  sass: () => sass({ indented: true }),
+  vue: vue,
+  component: angular,
+
+  // Data formats
+  json: json,
+  xml: xml,
+  svg: xml,
+  yaml: yaml,
+  yml: yaml,
+
+  // Programming languages
+  py: python,
+  rs: rust,
+  go: go,
+  java: java,
+  cpp: cpp,
+  c: cpp,
+  h: cpp,
+  hpp: cpp,
+  php: php,
+  sql: sql,
+  wast: wast,
+  wat: wast,
+
+  // Templates
+  jinja: jinja,
+  jinja2: jinja,
+  j2: jinja,
+  liquid: liquid,
+
+  // Docs
+  md: markdown,
+  markdown: markdown,
+};
+
+export function getLanguageExtension(filePath: string): Extension | null {
+  const ext = filePath.split(".").pop()?.toLowerCase();
+  if (!ext) return null;
+
+  const factory = LANGUAGE_MAP[ext];
+  return factory ? factory() : null;
+}