I can validate formatting in editor

src/myfasthtml/assets/myfasthtml.js

@@ -2141,9 +2141,11 @@ function initDslEditor(config) {
     textareaId,
     lineNumbers,
     autocompletion,
+    linting,
     placeholder,
     readonly,
     updateCommandId,
+    dslId,
     dsl
   } = config;
 
@@ -2162,68 +2164,146 @@ function initDslEditor(config) {
   }
 
   /* --------------------------------------------------
-   * Build completion list from DSL config
+   * DSL autocompletion hint (async via server)
    * -------------------------------------------------- */
 
-  const completionItems = [];
+  // Characters that trigger auto-completion
+  const AUTO_TRIGGER_CHARS = [".", "(", '"', " "];
 
-  if (dsl && dsl.completions) {
-    const pushAll = (items) => {
-      if (!Array.isArray(items)) return;
-      items.forEach(item => completionItems.push(item));
-    };
+  function dslHint(cm, callback) {
+    const cursor = cm.getCursor();
+    const text = cm.getValue();
 
-    pushAll(dsl.completions.keywords);
-    pushAll(dsl.completions.operators);
-    pushAll(dsl.completions.functions);
-    pushAll(dsl.completions.types);
-    pushAll(dsl.completions.literals);
+    // Build URL with query params
+    const params = new URLSearchParams({
+      e_id: dslId,
+      text: text,
+      line: cursor.line,
+      ch: cursor.ch
+    });
+
+    fetch(`/myfasthtml/completions?${params}`)
+      .then(response => response.json())
+      .then(data => {
+        if (!data || !data.suggestions || data.suggestions.length === 0) {
+          callback(null);
+          return;
+        }
+
+        callback({
+          list: data.suggestions.map(s => ({
+            text: s.label,
+            displayText: s.detail ? `${s.label} - ${s.detail}` : s.label
+          })),
+          from: CodeMirror.Pos(data.from.line, data.from.ch),
+          to: CodeMirror.Pos(data.to.line, data.to.ch)
+        });
+      })
+      .catch(err => {
+        console.error("DslEditor: Completion error", err);
+        callback(null);
+      });
   }
 
+  // Mark hint function as async for CodeMirror
+  dslHint.async = true;
+
   /* --------------------------------------------------
-   * DSL autocompletion hint
+   * DSL linting (async via server)
    * -------------------------------------------------- */
 
-  function dslHint(cm) {
+  function dslLint(text, updateOutput, options, cm) {
     const cursor = cm.getCursor();
-    const line = cm.getLine(cursor.line);
-    const ch = cursor.ch;
 
-    let start = ch;
-    while (start > 0 && /\w/.test(line.charAt(start - 1))) {
-      start--;
-    }
+    const params = new URLSearchParams({
+      e_id: dslId,
+      text: text,
+      line: cursor.line,
+      ch: cursor.ch
+    });
 
-    const word = line.slice(start, ch);
+    fetch(`/myfasthtml/validations?${params}`)
+      .then(response => response.json())
+      .then(data => {
+        if (!data || !data.errors || data.errors.length === 0) {
+          updateOutput([]);
+          return;
+        }
 
-    const matches = completionItems.filter(item =>
-      item.startsWith(word)
-    );
+        // Convert server errors to CodeMirror lint format
+        // Server returns 1-based positions, CodeMirror expects 0-based
+        const annotations = data.errors.map(err => ({
+          from: CodeMirror.Pos(err.line - 1, Math.max(0, err.column - 1)),
+          to: CodeMirror.Pos(err.line - 1, err.column),
+          message: err.message,
+          severity: err.severity || "error"
+        }));
 
-    return {
-      list: matches,
-      from: CodeMirror.Pos(cursor.line, start),
-      to: CodeMirror.Pos(cursor.line, ch)
-    };
+        updateOutput(annotations);
+      })
+      .catch(err => {
+        console.error("DslEditor: Linting error", err);
+        updateOutput([]);
+      });
   }
 
+  // Mark lint function as async for CodeMirror
+  dslLint.async = true;
+
   /* --------------------------------------------------
    * Create CodeMirror editor
    * -------------------------------------------------- */
 
-  const editor = CodeMirror(editorContainer, {
+  const enableCompletion = autocompletion && dslId;
+  // Only enable linting if the lint addon is loaded
+  const lintAddonLoaded = typeof CodeMirror.lint !== "undefined" ||
+    (CodeMirror.defaults && "lint" in CodeMirror.defaults);
+  const enableLinting = linting && dslId && lintAddonLoaded;
+
+  const editorOptions = {
     value: textarea.value || "",
     lineNumbers: !!lineNumbers,
     readOnly: !!readonly,
     placeholder: placeholder || "",
-    extraKeys: autocompletion ? {
+    extraKeys: enableCompletion ? {
       "Ctrl-Space": "autocomplete"
     } : {},
-    hintOptions: autocompletion ? {
+    hintOptions: enableCompletion ? {
       hint: dslHint,
       completeSingle: false
     } : undefined
-  });
+  };
+
+  // Add linting options if enabled and addon is available
+  if (enableLinting) {
+    // Include linenumbers gutter if lineNumbers is enabled
+    editorOptions.gutters = lineNumbers
+      ? ["CodeMirror-linenumbers", "CodeMirror-lint-markers"]
+      : ["CodeMirror-lint-markers"];
+    editorOptions.lint = {
+      getAnnotations: dslLint,
+      async: true
+    };
+  }
+
+  const editor = CodeMirror(editorContainer, editorOptions);
+
+  /* --------------------------------------------------
+   * Auto-trigger completion on specific characters
+   * -------------------------------------------------- */
+
+  if (enableCompletion) {
+    editor.on("inputRead", function (cm, change) {
+      if (change.origin !== "+input") return;
+
+      const lastChar = change.text[change.text.length - 1];
+      const lastCharOfInput = lastChar.slice(-1);
+
+      if (AUTO_TRIGGER_CHARS.includes(lastCharOfInput)) {
+        cm.showHint({completeSingle: false});
+      }
+    });
+  }
 
   /* --------------------------------------------------
    * Debounced update + HTMX transport
@@ -2278,11 +2358,10 @@ function initDslEditor(config) {
     setContent: (content) => editor.setValue(content)
   };
 
-  console.debug(`DslEditor initialized (CM5 + HTMX): ${elementId} with ${dsl?.name || "DSL"}`);
+  console.debug(`DslEditor initialized: ${elementId}, DSL=${dsl?.name || "unknown"}, dsl_id=${dslId}, completion=${enableCompletion ? "enabled" : "disabled"}, linting=${enableLinting ? "enabled" : "disabled"}`);
 }
 
 
-
 function updateDatagridSelection(datagridId) {
   const selectionManager = document.getElementById(`tsm_${datagridId}`);
   if (!selectionManager) return;