feat: Autodetect Syntax Language

Author: camielvs

src/components/shared/Dialogs/MultilineTextInputDialog.tsx

@@ -19,18 +19,10 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
+import { detectLanguage, 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,7 +49,9 @@ export const MultilineTextInputDialog = ({
   onConfirm,
 }: MultilineTextInputDialogProps) => {
   const [value, setValue] = useState(initialValue);
-  const [selectedLanguage, setSelectedLanguage] = useState("plaintext");
+  const [selectedLanguage, setSelectedLanguage] = useState(() =>
+    detectLanguage(initialValue),
+  );
 
   const handleConfirm = useCallback(() => {
     onConfirm(value);
@@ -83,8 +77,8 @@ export const MultilineTextInputDialog = ({
   }, [initialValue]);
 
   useEffect(() => {
-    setSelectedLanguage("plaintext");
-  }, [highlightSyntax]);
+    setSelectedLanguage(detectLanguage(initialValue));
+  }, [initialValue]);
 
   return (
     <Dialog open={open} onOpenChange={onCancel}>
@@ -112,7 +106,7 @@ export const MultilineTextInputDialog = ({
             </Select>
           )}
         </InlineStack>
-        {highlightSyntax ? (
+        {highlightSyntax && selectedLanguage !== "plaintext" ? (
           <div className="h-64">
             <CodeEditor
               value={value}
@@ -133,15 +127,15 @@ export const MultilineTextInputDialog = ({
         )}
         <DialogFooter>
           <InlineStack gap="2" align="space-between" className="w-full">
-            {!highlightSyntax && maxLength && value.length >= maxLength && (
+            {maxLength && value.length >= maxLength && (
               <Paragraph tone="warning" size="xs">
                 Maximum length {maxLength} characters
               </Paragraph>
             )}
             <InlineStack
               gap="2"
               align="end"
-              className={cn((highlightSyntax || !maxLength) && "w-full")}
+              className={cn(!maxLength && "w-full")}
             >
               <Button variant="outline" onClick={handleCancel}>
                 Cancel

src/utils/detectLanguage.ts

@@ -0,0 +1,74 @@
+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" },
+];
+
+type LanguageOption = (typeof LANGUAGE_OPTIONS)[number]["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";
+}