I am using CodeMirror 6 to do something, and I want to implement a code hinting style similar to the GitHub Copilot extension in VSCode, as shown in the figure below.
I have tried using the @codemirror/autocomplete package, but it is a dropdown list style, which is not what I want. The style I expect is that when I input a piece of code, it will prompt the recommend code with a light gray inline style behind it.
Should I modify the css for CodeMirror or any other good methods?
Since that only shows a single suggestion, rather than a list of them, I think it is different enough from what the autocompletion package is doing to go with a completely separate implementation.
Showing the completion in the document like that is a bit tricky, since inline widget decorations can’t span lines. Maybe use inline decorations for the first and last lines of the completion, and block decorations for any completely new lines.
@marijn Thanks for the tip about using inline/block decorations. Could you please elaborate a bit about how to create inline/block widget decorations. Some examples would be great.
Recent versions of @codemirror/view allow you to have line breaks in (inline-styled) widgets, so that tricks with block widgets should no longer be necessary (see WidgetType.lineBreaks).