From 42f6f917c9f0eeaa46efcb92eccb5cafb278aa61 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 9 Jan 2025 10:44:07 +0000
Subject: [PATCH] MonacoEditor: set font to Roboto mono (#98672)

set default code editor font to roboto mono
---
 .../src/components/Monaco/ReactMonacoEditor.tsx      | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx
index b447fabf164..2a5dfa1ea85 100644
--- a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx
+++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx
@@ -11,7 +11,7 @@ import type { ReactMonacoEditorProps } from './types';
 monacoEditorLoader.config({ monaco });
 
 export const ReactMonacoEditor = (props: ReactMonacoEditorProps) => {
-  const { beforeMount } = props;
+  const { beforeMount, options, ...restProps } = props;
 
   const theme = useTheme2();
   const onMonacoBeforeMount = useCallback(
@@ -23,6 +23,14 @@ export const ReactMonacoEditor = (props: ReactMonacoEditorProps) => {
   );
 
   return (
-    <Editor {...props} theme={theme.isDark ? 'grafana-dark' : 'grafana-light'} beforeMount={onMonacoBeforeMount} />
+    <Editor
+      {...restProps}
+      options={{
+        ...options,
+        fontFamily: theme.typography.code.fontFamily,
+      }}
+      theme={theme.isDark ? 'grafana-dark' : 'grafana-light'}
+      beforeMount={onMonacoBeforeMount}
+    />
   );
 };