feat: Autodetect Syntax Language

Author: camielvs

react-compiler.config.js

@@ -56,6 +56,7 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/components/shared/ReactFlow/FlowCanvas/TaskNode/ArgumentsEditor/DynamicDataDropdown.tsx",
   "src/components/shared/ReactFlow/FlowCanvas/Multiselect",
   "src/components/shared/CodeViewer/CodeEditor.tsx",
+  "src/components/shared/Dialogs/MultilineTextInputDialog.tsx",
   "src/components/shared/HighlightText.tsx",
   "src/components/shared/AnnouncementBanners.tsx",
 

src/components/shared/Dialogs/MultilineTextInputDialog.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -19,18 +19,14 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
+import {
+  detectLanguage,
+  isLanguageOption,
+  LANGUAGE_OPTIONS,
+} from "@/utils/detectLanguage";
 
 import CodeEditor from "../CodeViewer/CodeEditor";
 
-const LANGUAGE_OPTIONS = [
-  { value: "plaintext", label: "Plain Text" },
-  { value: "yaml", label: "YAML" },
-  { value: "python", label: "Python" },
-  { value: "javascript", label: "JavaScript" },
-  { value: "json", label: "JSON" },
-  { value: "sql", label: "SQL" },
-];
-
 interface MultilineTextInputDialogProps {
   title: ReactNode;
   description?: string;
@@ -57,34 +53,39 @@ export const MultilineTextInputDialog = ({
   onConfirm,
 }: MultilineTextInputDialogProps) => {
   const [value, setValue] = useState(initialValue);
-  const [selectedLanguage, setSelectedLanguage] = useState("plaintext");
+  const [selectedLanguage, setSelectedLanguage] = useState(() =>
+    detectLanguage(initialValue),
+  );
 
-  const handleConfirm = useCallback(() => {
+  const handleConfirm = () => {
     onConfirm(value);
-  }, [value, onConfirm]);
+  };
 
-  const handleCancel = useCallback(() => {
+  const handleCancel = () => {
     setValue(initialValue);
     onCancel();
-  }, [initialValue, onCancel]);
+  };
 
-  const setCursorToEnd = useCallback(
-    (ref: HTMLTextAreaElement | null) => {
-      if (ref && open) {
-        ref.focus();
-        ref.setSelectionRange(ref.value.length, ref.value.length);
-      }
-    },
-    [open],
-  );
+  const handleSelectValueChange = (v: string) => {
+    if (isLanguageOption(v)) {
+      setSelectedLanguage(v);
+    }
+  };
+
+  const setCursorToEnd = (ref: HTMLTextAreaElement | null) => {
+    if (ref && open) {
+      ref.focus();
+      ref.setSelectionRange(ref.value.length, ref.value.length);
+    }
+  };
 
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
 
   useEffect(() => {
-    setSelectedLanguage("plaintext");
-  }, [highlightSyntax]);
+    setSelectedLanguage(detectLanguage(initialValue));
+  }, [initialValue]);
 
   return (
     <Dialog open={open} onOpenChange={onCancel}>
@@ -97,7 +98,7 @@ export const MultilineTextInputDialog = ({
           {highlightSyntax && (
             <Select
               value={selectedLanguage}
-              onValueChange={setSelectedLanguage}
+              onValueChange={handleSelectValueChange}
             >
               <SelectTrigger className="w-40">
                 <SelectValue />

src/utils/detectLanguage.ts

@@ -0,0 +1,78 @@
+export const LANGUAGE_OPTIONS = [
+  { value: "plaintext", label: "Plain Text" },
+  { value: "yaml", label: "YAML" },
+  { value: "python", label: "Python" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "json", label: "JSON" },
+  { value: "sql", label: "SQL" },
+] as const;
+
+type LanguageOption = (typeof LANGUAGE_OPTIONS)[number]["value"];
+
+export function isLanguageOption(value: string): value is LanguageOption {
+  return LANGUAGE_OPTIONS.some((opt) => opt.value === value);
+}
+
+/**
+ * Heuristically detects the language of a string from the supported Monaco
+ * language set: json, sql, python, javascript, yaml, plaintext.
+ *
+ * Detection is ordered from most-certain to least-certain.
+ */
+export function detectLanguage(value: string): LanguageOption {
+  const trimmed = value.trim();
+
+  if (!trimmed) return "plaintext";
+
+  // JSON — most definitive: valid parse + structural start character
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    try {
+      JSON.parse(trimmed);
+      return "json";
+    } catch {
+      // not valid json, fall through
+    }
+  }
+
+  // SQL — distinctive opening keywords
+  if (
+    /^(SELECT|INSERT|UPDATE|DELETE|CREATE|ALTER|DROP|WITH|TRUNCATE|MERGE)\b/im.test(
+      trimmed,
+    )
+  ) {
+    return "sql";
+  }
+
+  // Python — function/class definitions, module imports, decorators, docstrings
+  if (
+    /^(def |async def |class \w+\s*[:(])/m.test(trimmed) ||
+    /^from\s+\S+\s+import\s/m.test(trimmed) ||
+    /^import\s+\w[\w., ]*$/m.test(trimmed) ||
+    /^@\w+/m.test(trimmed) ||
+    /^if\s+__name__\s*==\s*["']__main__["']/m.test(trimmed)
+  ) {
+    return "python";
+  }
+
+  // JavaScript — const/let/var declarations, arrow functions, CommonJS/ESM imports
+  if (
+    /^(const|let|var)\s+\w/m.test(trimmed) ||
+    /^(export\s+(default\s+)?|import\s+.*\s+from\s+['"])/m.test(trimmed) ||
+    /^function\s+\w/m.test(trimmed) ||
+    /\brequire\s*\(/.test(trimmed) ||
+    /=>/.test(trimmed)
+  ) {
+    return "javascript";
+  }
+
+  // YAML — document separator, key: value pairs, or list items
+  if (
+    /^---/.test(trimmed) ||
+    /^\w[\w\s-]*:\s/m.test(trimmed) ||
+    /^- /m.test(trimmed)
+  ) {
+    return "yaml";
+  }
+
+  return "plaintext";
+}