How to replace text with nodes on the fly

Could someone please point me in the direction of an example or perhaps just the general gist of how I would set up prosemirror to replace certain strings with my own custom atomic nodes on the fly? I want a text field where a person can type or paste a “token” which would be any string wrapped in braces, e.g. “{item1.variable1}”, which will be detected on the fly with and replaced with an atomic span node with some custom CSS and “item1.variable” written inside of it.

For anyone else looking, I found a crude answer myself. Every onChange, just running the field’s value through the DOM parser and replacing the doc works for now

Hi @lukecaan

using onChange on the dom instead of dispatchTransaction (EditorView) could get you out of sync with the document (say transaction one happens and you change the doc, then while you do that transaction two happens). You update the doc with the result from transaction one and might see parts of transaction two lost (just guessing from your description).

Are you aware of InputRules? Those combined with a paste handler could do the trick.


I’ll look out for that, I’m using KendoReact’s ProseMirror editor though which has an onChange which I think is different to vanilla ProseMirror OnChange (which I should have been more specific about!) … also I wasn’t aware of InputRules but that looks like it would be a much better solution. I’m definitely going to try that out, thanks heaps!!