How to combine @codemirror/autocomplete and EditorView.atomicRanges

v6
1

Hello!
I used autocomplete as a prompt, and I also want the selected result to be highlighted as an atomicRanges. How should I combine the two plugins?

When using regexp for matching, a space is required, and I hope to highlight the selected data directly.

Thanks! :heart:

Example code

2

You could use a transaction extender that looks for the pickedCompletion annotation and, when appropriate (possibly determined via some metadata on the completion object) attaches a state effect that tells whatever logic you store these ranges in (a state field, I’d assume) to add the range for the completion.

3

Thank you very much.
I can now know that the selection has been completed. What I expect is that the selected result can be displayed on the page in a special style (or a widget), and it is atomicRanges.