Custom render function per Completion in @codemirror/autocomplete

Hi!

The existing @codemirror/autocomplete plugin allows for some customisation via the addToOptions function. However, there’s two limitations:

  1. It’s part of the extension config, so it can’t (easily) be configured per source
  2. It can only access data on the Completion item, which only has a few string fields (label, type, detail, etc) to choose from.

It’d be convenient if Completions could provide a render: () => Node function that would be called in CompletionTooltip.createListBox rather than the individual sources/columns provided by default by the extension/config.

I considered if CompletionSources should be providing the render function instead, but we run into the same problem (2) that we can only access data that exists on Completions. With the render function per Completion you can capture the relevant information in a closure.

I’ve found some related discussions around this, but they seem slightly different:

Of course this can be implemented with tooltips, but I’d end up re-implementing much of @codemirror/autocomplete just to change the look of the completions.

Let me know what you think

You can make your extra widgets conditional on the type of completions they are passed. And you’re allowed to pass in multiple autocompletion(...) extensions, so there’s no need to hook into whatever code produces the main configuration in order to add more widgets.

You can easily add extra fields to your completion objects.

A complete override of the completion option rendering isn’t something the library supports. This would make it really hard to display the matched text. By using displayLabel and addToOptions you should be able to customize the look of your completions pretty radically already.

Yes I was expecting do to manual highlighting in that case.

Ah - I hadn’t realised. That certainly makes that a more appealing option. Thanks!

I think I can get this approach close enough for my use case. Thanks for your help.