How to bind and watch for outside input


I would like to create a “placeholder” type of a node that is bound and watches changes to outside input. ie: I want to be able to type [companyName] (or anyting inside []) and bind it to data outside prosemirror (for example a companyName field in a json object.) When i change the data in the json object, prosemirror should render the [companyName] with the new value.

imagine it as a dynamic invoice editor when you can set a template with your placeholders that read and watch your database and render the changes but you can also write your context.

I that possible with prosemirror? Any ideas on how to go about this?


The easiest way to do this is to have node views for the placeholder node type register themselves somewhere (and deregister themselves in their destroy method), and just imperatively update their DOM whenever the data changes. A somewhat clearer way would be to have a plugin that maintains node decorations on all instances of that nodes, with the decorations containing the current data, and the node view inspecting its decorations (which are passed to its create function and update method) to decide how to render itself.