Grafana-UI: allow pass through of monaco options (#32763)

packages/grafana-ui/src/components/Monaco/CodeEditor.tsx

@@ -64,7 +64,7 @@ class UnthemedCodeEditor extends React.PureComponent<Props> {
   };
 
   render() {
-    const { theme, language, width, height, showMiniMap, showLineNumbers, readOnly } = this.props;
+    const { theme, language, width, height, showMiniMap, showLineNumbers, readOnly, monacoOptions } = this.props;
     const value = this.props.value ?? '';
     const longText = value.length > 100;
 
@@ -97,7 +97,10 @@ class UnthemedCodeEditor extends React.PureComponent<Props> {
           language={language}
           theme={theme.isDark ? 'vs-dark' : 'vs-light'}
           value={value}
-          options={options}
+          options={{
+            ...options,
+            ...(monacoOptions ?? {}),
+          }}
           editorWillMount={this.editorWillMount}
           editorDidMount={this.editorDidMount}
         />

packages/grafana-ui/src/components/Monaco/types.ts

@@ -1,3 +1,5 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
 export type CodeEditorChangeHandler = (value: string) => void;
 export type CodeEditorSuggestionProvider = () => CodeEditorSuggestionItem[];
 
@@ -10,6 +12,7 @@ export interface CodeEditorProps {
   readOnly?: boolean;
   showMiniMap?: boolean;
   showLineNumbers?: boolean;
+  monacoOptions?: monaco.editor.IEditorConstructionOptions;
 
   /**
    * Callback after the editor has mounted that gives you raw access to monaco