Use code editor in diagnostics tab (#1024)

skyvern-frontend/src/routes/workflows/components/CodeEditor.tsx

@@ -1,13 +1,25 @@
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { json } from "@codemirror/lang-json";
 import { python } from "@codemirror/lang-python";
+import { html } from "@codemirror/lang-html";
 import { tokyoNightStorm } from "@uiw/codemirror-theme-tokyo-night-storm";
 import { cn } from "@/util/utils";
 
+function getLanguageExtension(language: "python" | "json" | "html") {
+  switch (language) {
+    case "python":
+      return python();
+    case "json":
+      return json();
+    case "html":
+      return html();
+  }
+}
+
 type Props = {
   value: string;
   onChange?: (value: string) => void;
-  language: "python" | "json";
+  language?: "python" | "json" | "html";
   readOnly?: boolean;
   minHeight?: string;
   maxHeight?: string;
@@ -25,10 +37,10 @@ function CodeEditor({
   readOnly = false,
   fontSize = 12,
 }: Props) {
-  const extensions =
-    language === "json"
-      ? [json(), EditorView.lineWrapping]
-      : [python(), EditorView.lineWrapping];
+  const extensions = language
+    ? [getLanguageExtension(language), EditorView.lineWrapping]
+    : [EditorView.lineWrapping];
+
   return (
     <CodeMirror
       value={value}