Custom render function per Completion in @codemirror/autocomplete

[hrjakobsen]

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:

• need help about highly customized codemirror/autocomplete (a completely different interaction model)
• Custom renderer for Autocomplete (a bit vague - maybe related to code snippets too?)

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

[marijn]

@hrjakobsen

It’s part of the extension config, so it can’t (easily) be configured per source

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.

@hrjakobsen

• It can only access data on the Completion item, which only has a few string fields (label, type, detail, etc) to choose from.

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.

[hrjakobsen]

@marijn

This would make it really hard to display the matched text

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

@marijn

you’re allowed to pass in multiple autocompletion(...) extensions

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

@marijn

By using displayLabel and addToOptions you should be able to customize the look of your completions pretty radically already.

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