How to render JSON output in React/Vue components?

1

I am using prosemirror in Vue project to build an editor. Working with Prosemirror has been great until I had to create a node that has an input field, which receives an ID for a product we sell. The point I struggled was, the node, when later rendered as a part of a document, has to fetch the data for the product with the ID and display the information in a shape of a card.

In short, this node has two different views on editing surface, and on plain document state.

At first, I thought maybe looping through the doc.content to create Vue components based on the types of the contents could solve. However I could not move on as soon as I started to wonder about applying some long concatenated marks on a text.

How have you all been rendering the output on your React or Vue projects? I doubt simply innerHTML-ing the generated HTML is not how you did…

2

You can make a single NodeView that renders based on the node attributes. Or you can make two different NodeViews (image / image_editable) and then change the node type to switch between them OR set the nodeViews property - cant remember which was the easiest. You can set the attributes to the node and then, to customize the serialization, add a toDOM method that uses them to generate whatever HTML you want.