Hello everyone,
I’m starting with prosemirror and would need some advices concerning best practices for a specific usecase close to https://prosemirror.net/examples/dino/ 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.