Better content-type detection for editor

src-web/components/core/Editor/Editor.tsx

@@ -42,7 +42,7 @@ export interface EditorProps {
   type?: 'text' | 'password';
   className?: string;
   heightMode?: 'auto' | 'full';
-  contentType?: string | null;
+  language?: 'javascript' | 'json' | 'html' | 'xml' | 'graphql' | 'url' | 'pairs' | 'text';
   forceUpdateKey?: string | number;
   autoFocus?: boolean;
   autoSelect?: boolean;
@@ -71,7 +71,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     readOnly,
     type = 'text',
     heightMode,
-    contentType,
+    language = 'text',
     autoFocus,
     autoSelect,
     placeholder,
@@ -226,12 +226,12 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     [dialog],
   );
 
-  // Update language extension when contentType changes
+  // Update the language extension when the language changes
   useEffect(() => {
     if (cm.current === null) return;
     const { view, languageCompartment } = cm.current;
     const ext = getLanguageExtension({
-      contentType,
+      language,
       environmentVariables,
       useTemplating,
       autocomplete,
@@ -242,7 +242,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     });
     view.dispatch({ effects: languageCompartment.reconfigure(ext) });
   }, [
-    contentType,
+    language,
     autocomplete,
     useTemplating,
     environmentVariables,
@@ -265,7 +265,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
       try {
         const languageCompartment = new Compartment();
         const langExt = getLanguageExtension({
-          contentType,
+          language,
           useTemplating,
           autocomplete,
           environmentVariables,

src-web/components/core/Editor/extensions.ts

@@ -32,7 +32,7 @@ import {
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
 import type { EnvironmentVariable, TemplateFunction } from '@yaakapp/api';
-import { graphql, graphqlLanguageSupport } from 'cm6-graphql';
+import { graphql } from 'cm6-graphql';
 import { EditorView } from 'codemirror';
 import type { EditorProps } from './index';
 import { pairs } from './pairs/extension';
@@ -64,19 +64,19 @@ export const syntaxHighlightStyle = HighlightStyle.define([
 
 const syntaxTheme = EditorView.theme({}, { dark: true });
 
-const syntaxExtensions: Record<string, LanguageSupport> = {
-  'application/graphql': graphqlLanguageSupport(),
-  'application/json': json(),
-  'application/javascript': javascript(),
-  'text/html': xml(), // HTML as XML because HTML is oddly slow
-  'application/xml': xml(),
-  'text/xml': xml(),
+const syntaxExtensions: Record<NonNullable<EditorProps['language']>, LanguageSupport | null> = {
+  graphql: null,
+  json: json(),
+  javascript: javascript(),
+  html: xml(), // HTML as XML because HTML is oddly slow
+  xml: xml(),
   url: url(),
   pairs: pairs(),
+  text: text(),
 };
 
 export function getLanguageExtension({
-  contentType,
+  language,
   useTemplating = false,
   environmentVariables,
   autocomplete,
@@ -90,12 +90,12 @@ export function getLanguageExtension({
   onClickFunction: (option: TemplateFunction, tagValue: string, startPos: number) => void;
   onClickVariable: (option: EnvironmentVariable, tagValue: string, startPos: number) => void;
   onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void;
-} & Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete'>) {
-  const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
-  if (justContentType === 'application/graphql') {
+} & Pick<EditorProps, 'language' | 'useTemplating' | 'autocomplete'>) {
+  if (language === 'graphql') {
     return graphql();
   }
-  const base = syntaxExtensions[justContentType] ?? text();
+
+  const base = syntaxExtensions[language ?? 'text'] ?? text();
   if (!useTemplating) {
     return base;
   }