Validate DAG schema on Monaco (#659)

Co-authored-by: vhespanha <[email protected]>
Co-authored-by: Yota Hamada <[email protected]>

Makefile

@@ -182,7 +182,7 @@ gomerger: ${LOCAL_DIR}/merged
 ${LOCAL_DIR}/merged:
 	@mkdir -p ${LOCAL_DIR}/merged
 
-# addlicnese adds license header to all files.
+# addlicense adds license header to all files.
 .PHONY: addlicense
 addlicense:
 	@echo "${COLOR_GREEN}Adding license headers...${COLOR_RESET}"

schemas/dag.schema.json

@@ -2,6 +2,7 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "description": "Schema for Dagu DAG YAML format. Dagu uses YAML files to define Directed Acyclic Graphs (DAGs) for workflow orchestration.",
+  "additionalProperties": false,
   "properties": {
     "name": {
       "type": "string",
@@ -230,6 +231,7 @@
     "step": {
       "type": "object",
       "required": ["name"],
+      "additionalProperties": false,
       "properties": {
         "name": {
           "type": "string",

ui/package.json

@@ -72,15 +72,14 @@
     "moment": "^2.29.3",
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.46",
-    "monaco-editor": "^0.41.0",
+    "monaco-editor": "^0.52.2",
     "monaco-loader": "^1.0.0",
-    "monaco-react": "^1.1.0",
-    "monaco-yaml": "^4.0.4",
+    "@monaco-editor/react": "^4.6.0",
+    "monaco-yaml": "^5.2.3",
     "prism": "^4.1.2",
     "react": "^18.3.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.1.0",
-    "react-monaco-editor": "^0.54.0",
     "react-router-dom": "^6.3.0",
     "recharts": "^2.13.0",
     "swr": "^1.3.0",

ui/src/components/atoms/DAGEditor.tsx

@@ -1,18 +1,65 @@
-import React from 'react';
-import MonacoEditor from 'react-monaco-editor';
+import React, { useEffect, useRef } from 'react';
+import MonacoEditor, { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import { configureMonacoYaml } from 'monaco-yaml';
+
+// Configure schema at module level (before editor initialization)
+configureMonacoYaml(monaco, {
+  enableSchemaRequest: true,
+  hover: true,
+  completion: true,
+  validate: true,
+  format: true,
+  schemas: [
+    {
+      uri: 'https://raw.githubusercontent.com/daguflow/dagu/main/schemas/dag.schema.json',
+      fileMatch: ['*'], // Match all YAML files
+    },
+  ],
+});
+
+loader.config({ monaco });
 
 type Props = {
   value: string;
-  onChange: (value: string) => void;
+  onChange: (value?: string) => void;
 };
 
 function DAGEditor({ value, onChange }: Props) {
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+
+  useEffect(() => {
+    return () => {
+      editorRef.current?.dispose();
+    };
+  }, []);
+
+  const editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
+    editorRef.current = editor;
+
+    setTimeout(() => {
+      editor.getAction('editor.action.formatDocument')?.run();
+    }, 100);
+  };
+
   return (
     <MonacoEditor
       height="60vh"
+      language="yaml"
       value={value}
       onChange={onChange}
-      language="yaml"
+      onMount={editorDidMount}
+      options={{
+        automaticLayout: true,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        quickSuggestions: { other: true, comments: false, strings: true },
+        formatOnType: true,
+        formatOnPaste: true,
+        renderValidationDecorations: 'on',
+        lineNumbers: 'on',
+        glyphMargin: true,
+      }}
     />
   );
 }