Demo + API for loading and saving state

[YousefED]

I think this is an important basic req: https://discord.com/channels/928190961455087667/1015169282444894219/1085917095583297606

[slyguy5646]

Hey there, I wanted this feature for a project I'm working on so that I could load the state of the editor based on a DB and things like that. I think I have coded up a pretty decent solution if there isn't one already.

[YousefED]

This should have been closed here: #154

See docs @ https://www.blocknotejs.org/docs/editor

[slyguy5646]

Is there a way to load this initial content from raw html or the json that tiptap gives back? For me it was a little awkard having to create the blocks and then pass it to the editor as the initial content. And if so, is this content easily storable in a database or the like to load later?

[YousefED]

It's possible to convert to/from HTML, but not recommended. See https://www.blocknotejs.org/docs/converting-blocks

[slyguy5646]

This should have been closed here: #154

See docs @ https://www.blocknotejs.org/docs/editor

This shows how to store it, thanks.

[slyguy5646]

Hey there, sorry to bother again. The only problem I see with this method of loading initial data is doing it with asynchronous data. I tried it utilizing a useEffect hook for data fetching which then sets the data to a state variable. This doesn't load as initial content because the editor is done being instantiated before the data can be fetched. Is there a better way to accomplish this?

[YousefED]

two options

a) you could create the editor only after the data has been fetched
b) you could replace the initial content with replaceblocks when the data has been loaded: https://www.blocknotejs.org/docs/manipulating-blocks#replacing-blocks (little less nice imo)

[slyguy5646]

Got it thanks so much.