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.
Thanks for the tip, I’ll try
Hello! did you ever get this to work?
@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).
I submit a PR to a inline-suggestion extension to support the block suggestion: feat: support block suggestion by baurine · Pull Request #2 · saminzadeh/codemirror-extension-inline-suggestion · GitHub
Preview:
Hope this is helpful for you.
