Search code examples
reactjsmonaco-editorreact-monaco-editor

How to refresh code lenses in monaco editor


I adding custom CodeLenseProvider to my React Monaco Editor, which works great in general:

{
    provideCodeLenses(model: monaco.editor.ITextModel, token: monaco.CancellationToken): monaco.languages.ProviderResult<monaco.languages.CodeLensList> {
      const lenses: monaco.languages.CodeLens[] = [];
      lenses.push(...getLenses());
      return {
        lenses,
        dispose: () => {},
      };
    },
  }

The problem is that my method getLenses is time consuming and asynchronous. Ideally I'd like to e.g. fetch some data when provideCodeLenses is called, or even better, I'd like to be able to call provideCodeLenses manually refresh the lenses.

The steps would be:

  • I have onChange listetener on
<MonacoEditor onChange={onChange} .../>
  • this onChange is doing some async action
  • once the action is finished, I'd like to refresh code lenses

How can I achieve that? I know code lense provider has onDidChange property but it is not really clear to me how to use it or if it helps my case


Solution

  • By exploring codelensController.js to schedule code lens update manually, you have to use onDidChange function that will be called once during initialization of the provider with the argument being a function which can be called to signal for the update.

    let scheduleCodeLensUpdate: () => void;
    
    languages.registerCodeLensProvider("[language]", {
            onDidChange(cb) {
                // types are incorrect, the function doesn't actually take any arguments
                scheduleCodeLensUpdate = cb as any;
    
                return {
                    dispose() {}
                }
            },
            provideCodeLenses(model, token) { /*...*/ }
    }
    
    // do something
    
    // trigger code lens update
    scheduleCodeLensUpdate();