I’m new to CodeMirror 6 and have a simple autocomplete where each option has a unique ID. When a user selects an option, I want the inserted text to be wrapped in a single span with a data-reference-id attribute containing that ID. The challenges I’m facing are: how to store the metadata (ID) in the completion objects, how to make the selected completion render as a single span in the DOM, and how to add the ID to that span. I’ve checked the documentation for ViewPlugin and Decorations but I’m not sure if this is even possible or what the right approach is. Is this achievable in CodeMirror 6? Any ideas on how to approach this would be appreciated!
You can use a completion’s apply property define what should happen when the user picks that completion. Since CodeMirror stores only test, not spans, in its document model, you’ll have to write a plugin that stores this information in a state field, probably as a decoration set, and makes sure the text is rendered the way you want.
Thanks @marijn it really helped!