@fc-components/monaco-editor

``js import { PromQLMonacoEditor } from '@fc-components/monaco-editor';

const App = () => { const [value, setValue] = React.useState(); const [enableAutocomplete, setEnableAutocomplete] = React.useState(true); const [variablesNames, setVariablesNames] = React.useState(['$job', '$instance']); const [placeholder, setPlaceholder] = React.useState('Enter your PromQL query here...'); const [theme, setTheme] = React.useState<'light' | 'dark'>('light'); const [readOnly, setReadOnly] = React.useState(false); const [disabled, setDisabled] = React.useState(false); const editorRef = React.useRef(null);

return (


              readOnly={readOnly} // Set to true to make the editor read-only
        disabled={disabled} // Set to true to disable the editor
        theme={theme} // or 'dark'
        size='middle' // 'small', 'middle', or 'large'
        placeholder={placeholder}
        variablesNames={variablesNames} // Example variable names
        apiPrefix='/api/n9e/proxy/1/api/v1'
        request={(resource, options) => {
          const params = options?.body?.toString();
          const search = params ?

?${params}

 : '';
          return fetch(resource + search, {
            method: 'Get',
            headers: new Headers({
              Authorization:

Bearer ${localStorage.getItem('access_token') || ''}

,
            }),
          });
        }}
        value={value}
        enableAutocomplete={enableAutocomplete} // Enable completion
        durationVariablesCompletion={false} // Disable duration variables completion. eg. $__interval, $__range, $__rate_interval
        interpolateString={(query) => {
          // Interpolate variables in the query string
          return query.replace(/\$__interval/g, '10s');
        }}
        onEnter={(value) => {
          console.log('Enter pressed, current value:', value);
        }}
        onBlur={(value) => {
          console.log('Editor lost focus, current value:', value);
        }}
        onChange={(value) => {
          console.log('Value changed:', value);
          setValue(value);
        }}
        editorDidMount={(editor) => {
          editorRef.current = editor;
        }}
      />
      
        
           setEnableAutocomplete(e.target.checked)} /> Enable Autocomplete
        
        
                      onClick={() => {
              setVariablesNames(['$job', '$instance', '$newVariable']);
            }}
          >
            Update Variables
          
        
        
                      onClick={() => {
              setPlaceholder('New Placeholder Text');
            }}
          >
            Update Placeholder
          
        
        
                      onClick={() => {
              setTheme(theme === 'light' ? 'dark' : 'light');
            }}
          >
            Switch theme
          
        
        
                      onClick={() => {
              setReadOnly(!readOnly);
            }}
          >
            Switch Read-Only Mode
          
        
        
                      onClick={() => {
              setDisabled(!disabled);
            }}
          >
            Switch Disabled Mode
          
        
      

      
                  onClick={() => {
            if (editorRef.current) {
              const editor = editorRef.current;
              editor.trigger('keyboard', 'type', { text: 'Insert Text' });
              editor.focus();
            }
          }}
        >
          Click to insert text after the cursor


  );
};

ReactDOM.render(, document.getElementById('root'));``

@fc-components/monaco-editor

js
import { PromQLMonacoEditor } from '@fc-components/monaco-editor';

const App = () => {
  const [value, setValue] = React.useState();
  const [enableAutocomplete, setEnableAutocomplete] = React.useState(true);
  const [variablesNames, setVariablesNames] = React.useState(['$job', '$instance']);
  const [placeholder, setPlaceholder] = React.useState('Enter your PromQL query here...');
  const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
  const [readOnly, setReadOnly] = React.useState(false);
  const [disabled, setDisabled] = React.useState(false);
  const editorRef = React.useRef(null);

  return (


              readOnly={readOnly} // Set to true to make the editor read-only
        disabled={disabled} // Set to true to disable the editor
        theme={theme} // or 'dark'
        size='middle' // 'small', 'middle', or 'large'
        placeholder={placeholder}
        variablesNames={variablesNames} // Example variable names
        apiPrefix='/api/n9e/proxy/1/api/v1'
        request={(resource, options) => {
          const params = options?.body?.toString();
          const search = params ?

?${params}

 : '';
          return fetch(resource + search, {
            method: 'Get',
            headers: new Headers({
              Authorization:

Bearer ${localStorage.getItem('access_token') || ''}

,
            }),
          });
        }}
        value={value}
        enableAutocomplete={enableAutocomplete} // Enable completion
        durationVariablesCompletion={false} // Disable duration variables completion. eg. $__interval, $__range, $__rate_interval
        interpolateString={(query) => {
          // Interpolate variables in the query string
          return query.replace(/\$__interval/g, '10s');
        }}
        onEnter={(value) => {
          console.log('Enter pressed, current value:', value);
        }}
        onBlur={(value) => {
          console.log('Editor lost focus, current value:', value);
        }}
        onChange={(value) => {
          console.log('Value changed:', value);
          setValue(value);
        }}
        editorDidMount={(editor) => {
          editorRef.current = editor;
        }}
      />
      
        
           setEnableAutocomplete(e.target.checked)} /> Enable Autocomplete
        
        
                      onClick={() => {
              setVariablesNames(['$job', '$instance', '$newVariable']);
            }}
          >
            Update Variables
          
        
        
                      onClick={() => {
              setPlaceholder('New Placeholder Text');
            }}
          >
            Update Placeholder
          
        
        
                      onClick={() => {
              setTheme(theme === 'light' ? 'dark' : 'light');
            }}
          >
            Switch theme
          
        
        
                      onClick={() => {
              setReadOnly(!readOnly);
            }}
          >
            Switch Read-Only Mode
          
        
        
                      onClick={() => {
              setDisabled(!disabled);
            }}
          >
            Switch Disabled Mode
          
        
      

      
                  onClick={() => {
            if (editorRef.current) {
              const editor = editorRef.current;
              editor.trigger('keyboard', 'type', { text: 'Insert Text' });
              editor.focus();
            }
          }}
        >
          Click to insert text after the cursor

);
};

ReactDOM.render(, document.getElementById('root'));