Advanced dino case - different rendering in editor and in website

Hello everyone,

I’m starting with prosemirror and would need some advices concerning best practices for a specific usecase close to but a bit more complex. I have a menu button that opens a modal. In that modal users can search for website specific content (items that can be images, videos etc. - stored in db with id and many other attributes). When a user click on an item, the idea is to render a simple version of the item in the editor, which would be different that the one I’d display on my website pages as it is a complex node with multiple buttons/events.

In markdown it would output something like a link with just the item id (the only thing I need to get all the item data server side). The editor html would be something like: <div id={itemId}><img src={itemSrc} /><p class="caption">{caption}<p></div>

Now I’m wondering when and how to retrieve data. To render the editor html, I can in the search results return just the item data required (image src in that case). Then save the document in JSON in the database. I could then have a background job to render full document html based on the json thanks to a DOMserializer. In that case I’d parse the JSON to extract all items ids, and query their data in a single DB call. The advantage is that I can easily rerender the full document html if I needed to change the item rendering (the thing is I’d prefer not to load the editor javascript in the read only part of the website - but even if I’d do, it would not help that much since in the editor I’m just rendering a simple version of the item).

Now lets say that I return in the search result the itemSrc (which at the time the user creates his document is <image_name-300x300>), so it is in the markdown/JSON of the editor, but then later decide to change the editor html rendering and want <image_name-250x250>, I now have to update all documents. The ideal would be to store only the item id, but then each time I load a document in the editor, I’d need to get all the document items and query the DB to return the required data to render those custom elements. Is this a good practice and where would be a good place to fetch those initial data ? Apologies for the lengthy post.

HI @trompx,

what we do in our app ( is to save a base64 encoded representation of the image (small scale) and save it directly to the image in ProseMirror (the image will have an id and src attribute).

ProseMirror will then render the image like this (I am simplifying):

<img id="image-id" src="data:image/png,%89PNG%0D%0A..." />

When we run an export of that document we go through the document and replace the src attribute with the actual url of the image (in the large version). We do not generate HTML versions before they are needed but only when requested - this is usually quick enough and has the advantage that your image dimensions will always be up to date.



Hi @frederik,

Thanks for your input! I tested your editor, it is intuitive with a nice UI, great job. So I could test to upload an image, the base64 encoded version was like 5ko. I’m afraid this solution wouldn’t work for me, I’ll have many thousands documents with between 5-30 images per/doc, my database would grow way too fast. Besides my editor from now is less directive, more like a medium version so having low quality images could worry some users.

I won’t have an export function but will need to pre render the documents for fast access like a blog so not really the same usecase.

Anyway thanks for the tip, really appreciate!

1 Like