autocompletion feature request: allow label to be dom constructor

v6
1

Hey, I love CodeMirror! We are building an IDE for our custom language using it. This is how we are using CodeMirror for the “command palette” feature, with autocomplete:

Screenshot 2024-08-10 at 12.49.17 PM
Screenshot 2024-08-10 at 12.49.17 PM2198×1646 279 KB

As you see we have overridden the info of completion (the UI is written in fastn language and integrates smoothly, kudos to the design btw!).

I want to also overwrite the way we show the label. Would you be interested in this?

If you think this is something core autocomplete package can benefit from, I could take a stab at a PR.

2

What are you trying to make the completion look like?

3

For each command I want to show the short description of the command, and the keyboard shortcut in the completion menu.

The UI is designed for non technical users, and teaching command is hard enough, so want to be as helpful as we can.

4

Are you aware of the addToOptions control, which allows you to render additional elements in each option?

5

Thanks, it will work for me for the current purpose.

Also: do you have any advice on debugging/working with CSS? The autocomplete menu is pretty shy, and goes away as soon as I interact with the browser. I have tried the closeOnBlur, but its still tricky.

6

You can freeze the DOM by entering the JS debugger (for example by running setTimeout(() => {debugger}, 2000) in the browser console, and then creating the situation you want to inspect).

2 Likes