@fc-components/monaco-editor

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

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

  return (
    <div style={{ padding: 16 }}>
      <PromQLMonacoEditor
        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;
        }}
      />
      <div style={{ marginTop: 16 }}>
        <label>
          <input type='checkbox' checked={enableAutocomplete} onChange={(e) => setEnableAutocomplete(e.target.checked)} /> Enable Autocomplete
        </label>
        <label style={{ marginLeft: 16 }}>
          <a
            onClick={() => {
              setVariablesNames(['$job', '$instance', '$newVariable']);
            }}
          >
            Update Variables
          </a>
        </label>
        <label style={{ marginLeft: 16 }}>
          <a
            onClick={() => {
              setPlaceholder('New Placeholder Text');
            }}
          >
            Update Placeholder
          </a>
        </label>
        <label style={{ marginLeft: 16 }}>
          <a
            onClick={() => {
              setTheme(theme === 'light' ? 'dark' : 'light');
            }}
          >
            Switch theme
          </a>
        </label>
        <label style={{ marginLeft: 16 }}>
          <a
            onClick={() => {
              setReadOnly(!readOnly);
            }}
          >
            Switch Read-Only Mode
          </a>
        </label>
        <label style={{ marginLeft: 16 }}>
          <a
            onClick={() => {
              setDisabled(!disabled);
            }}
          >
            Switch Disabled Mode
          </a>
        </label>
      </div>
      <div>
        <a
          onClick={() => {
            if (editorRef.current) {
              const editor = editorRef.current;
              editor.trigger('keyboard', 'type', { text: 'Insert Text' });
              editor.focus();
            }
          }}
        >
          Click to insert text after the cursor
        </a>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));