Feature: Add validation in visual editor yaml frontmatter (#744)

* Add working prototype of validation in visual editor yaml frontmatter

* Add validation on update

* Pass diagnostics

* Fix build, move LintItem defn, change literal to constant `kCodeViewGetDiagnostics`

* Update validation to be and use diagnostics instead

* Fix duplicate error icon in tooltip

* format: add semicolons, and remove old code and comment

* Cleanup a little more

* Add changelog entry

Author: vezwork

apps/lsp/src/custom.ts

@@ -22,16 +22,16 @@ import {
   EditorServerOptions,
   sourceServerMethods,
   editorServerDocuments,
-} from "editor-server"
+} from "editor-server";
 
 import { LspConnection, registerLspServerMethods } from "core-node";
 import { userDictionaryDir, Document } from "quarto-core";
 import { CompletionList } from "vscode-languageserver-types";
 import { Hover, Position, TextDocuments } from "vscode-languageserver";
-import { CodeViewCellContext, CodeViewCompletionContext, kCodeViewAssist, kCodeViewGetCompletions } from "editor-types";
+import { CodeViewCellContext, CodeViewCompletionContext, kCodeViewAssist, kCodeViewGetDiagnostics, kCodeViewGetCompletions, LintItem } from "editor-types";
 import { yamlCompletions } from "./service/providers/completion/completion-yaml";
 import { yamlHover } from "./service/providers/hover/hover-yaml";
-import { Quarto, codeEditorContext } from "./service/quarto";
+import { EditorContext, Quarto, codeEditorContext } from "./service/quarto";
 
 export function registerCustomMethods(
   quarto: Quarto,
@@ -63,9 +63,31 @@ export function registerCustomMethods(
     // we have the yaml hover and completions here so provide entry points for them
     [kCodeViewAssist]: args => codeViewAssist(quarto, args[0]),
     [kCodeViewGetCompletions]: args => codeViewCompletions(quarto, args[0]),
+    [kCodeViewGetDiagnostics]: args => codeViewDiagnostics(quarto, args[0])
   });
 }
 
+async function codeViewDiagnostics(quarto: Quarto, context: CodeViewCellContext): Promise<LintItem[] | undefined> {
+  const edContext = codeEditorContext(
+    context.filepath,
+    context.language == "yaml" ? "yaml" : "script",
+    context.code.join("\n"),
+    Position.create(0, 0),
+    false
+  );
+
+  return await diagnostics(quarto, edContext) ?? undefined;
+
+}
+export async function diagnostics(quarto: Quarto, context: EditorContext): Promise<LintItem[] | null> {
+  if (!quarto?.getYamlDiagnostics) return null;
+
+  try {
+    return await quarto.getYamlDiagnostics(context);
+  } catch {
+    return null;
+  }
+}
 
 async function codeViewAssist(quarto: Quarto, context: CodeViewCellContext): Promise<Hover | undefined> {
 
@@ -94,5 +116,5 @@ async function codeViewCompletions(quarto: Quarto, context: CodeViewCompletionCo
   return {
     isIncomplete: false,
     items: completions || []
-  }
+  };
 }

apps/lsp/src/quarto.ts

@@ -35,12 +35,12 @@ import {
   CompletionResult,
   EditorContext,
   HoverResult,
-  LintItem,
   AttrContext,
   AttrToken,
   kContextDiv,
   kContextDivSimple
 } from "./service/quarto";
+import { LintItem } from "editor-types";
 
 export async function initializeQuarto(context: QuartoContext): Promise<Quarto> {
   const quartoModule = await initializeQuartoYamlModule(context.resourcePath) as QuartoYamlModule;

apps/lsp/src/service/providers/diagnostics-yaml.ts

@@ -24,14 +24,10 @@ import {
 import { Document } from "quarto-core";
 
 import {
-  kEndColumn,
-  kEndRow,
-  kStartColumn,
-  kStartRow,
-  LintItem,
   Quarto,
   docEditorContext
 } from "../quarto";
+import { kEndColumn, kEndRow, kStartColumn, kStartRow, LintItem } from "editor-types";
 
 export async function provideYamlDiagnostics(
   quarto: Quarto,

apps/lsp/src/service/quarto.ts

@@ -18,21 +18,7 @@ import { CompletionItem, Position } from "vscode-languageserver-types";
 import { QuartoContext, Document, filePathForDoc, isQuartoDoc, isQuartoRevealDoc, isQuartoYaml, isQuartoDashboardDoc } from "quarto-core";
 
 import { lines } from "core";
-
-
-export const kStartRow = "start.row";
-export const kStartColumn = "start.column";
-export const kEndRow = "end.row";
-export const kEndColumn = "end.column";
-
-export interface LintItem {
-  [kStartRow]: number;
-  [kStartColumn]: number;
-  [kEndRow]: number;
-  [kEndColumn]: number;
-  text: string;
-  type: string;
-}
+import { LintItem } from "editor-types";
 
 export interface CompletionResult {
   token: string;

apps/vscode/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 1.124.0 (unreleased)
 
+- Add yaml frontmatter validation to visual editor (<https://github.com/quarto-dev/quarto/pull/744>).
 
 ## 1.123.0 (Release on 2025-06-17)
 

apps/vscode/src/providers/editor/codeview.ts

@@ -43,6 +43,8 @@ import {
   CodeViewServer,
   DiagramState,
   kCodeViewGetCompletions,
+  kCodeViewGetDiagnostics,
+  LintItem
 } from "editor-types";
 
 import { hasHooks } from "../../host/hooks";
@@ -73,6 +75,12 @@ export function vscodeCodeViewServer(_engine: MarkdownEngine, document: TextDocu
           break;
       }
     },
+    async codeViewDiagnostics(context: CodeViewCellContext): Promise<LintItem[] | undefined> {
+      // if this is yaml then call the lsp directly
+      if (context.language === "yaml") {
+        return lspRequest(kCodeViewGetDiagnostics, [context]);
+      }
+    },
     async codeViewCompletions(context: CodeViewCompletionContext): Promise<CompletionList> {
       // if this is yaml then call the lsp directly
       if (context.language === "yaml") {
@@ -205,7 +213,7 @@ export function vsCompletionItemToLsCompletionItem(item: VCompletionItem): Compl
 
 }
 
-export function labelWithDetails(item: VCompletionItem): { label: string, labelWithDetails: CompletionItemLabelDetails } {
+export function labelWithDetails(item: VCompletionItem): { label: string, labelWithDetails: CompletionItemLabelDetails; } {
   if (typeof (item.label) === "string") {
     return {
       label: item.label,