Inline suggested texts

We’re trying to implement a feature that suggests codes in a similar way as GitHub Copilot, i.e. a multiline plain-text code snippet is “inserted” after the cursor position but it is greyed out and not committed to the doc yet, pending a keyboard action (Tab). What is the right way to implement this?

Did u try CodeMirror Reference Manual?

view/placeholder.ts at main · codemirror/view · GitHub looks like a simple decoration, I’d say copy it for that usecase so it’s not the same css, it doesn’t handle wrapping nor new line characters anyway.

One more option is to insert the text and decorate it with a classname

Should this non-committed text produce line numbers? If so, that might be difficult, because line numbers are based on the document structure, and a widget like that wouldn’t change that. If not, you should be able to add an inline widget with line breaks (and side: 1 so it’s drawn after the cursor).

1 Like

Mentioned this in another thread, but I created a small extension to help with this. I took the approach mentioned above and could serve as a good starting point

It seems like your extension works well but my concern is that it uses the editor state as input rather than integrating with the autocompletion extension that provides matches:

 /**
    Get the match of the given expression directly before the
    cursor.
    */
    matchBefore(expr: RegExp): {
        from: number;
        to: number;
        text: string;
    } | null;

Do you think there’s a good way to adapt your inline functionality to work with autocompletion? I want to be able to base suggestions only on the current match rather than the entire text of the editor or have to process the editor text to figure out what text is relevant.