How to save these in a database with all the styles, is there a specific method to follow since content is passed to backend as array object How should I save that kind of data in a column in a database.
You can serialize the content using `JSON.stringify(editor.document)`, then take that string and store in your backend. The BlockNote docs have some more details you can checkout.
The BlockNote docs have some good examples for the editor methods. For the onChange, you would get the latest content from editor.document and then do whatever you want (e.g., serialize to JSON, then save to a db).
Could you please show an example of how to write the onChange function that saves the passed content into a database? For everyone having the same issue, here's the code I used: const editor: BlockNoteEditor | null = useCreateBlockNote({ initialContent: initialContent ? (JSON.parse(initialContent) as PartialBlock[]) : undefined, uploadFile: handleUpload }); const uploadToDatabase = useCallback(() => { if (onChange) { setTimeout(() => { onChange(JSON.stringify(editor.document)); }, 1000); } }, [editor, onChange]);
These types of videos are really valuable. Not too long, yet super impactful! Thanks a lot!
Glad it was helpful!
Pretty neat and to the point. Great work!
Thanks a lot for this tutorial ! Keep going
Great tutorial 🔥🔥
I notice that with all the wysiwyg 's and next js the link doesn't render correctly. how would you render a link that works with next
Great thanks for sharing
How to save these in a database with all the styles, is there a specific method to follow since content is passed to backend as array object How should I save that kind of data in a column in a database.
You can serialize the content using `JSON.stringify(editor.document)`, then take that string and store in your backend. The BlockNote docs have some more details you can checkout.
Noice reverb
please can you make a crash course about NextJs and Typescript because I don't know how we can find correct type as you do etc....
you can hover over the error and click to go for its .d.ts file and copy paste
Great tutorial! But how can we setup the onChange(), and use funcs like editor.removeBlocks in the page.tsx?
The BlockNote docs have some good examples for the editor methods. For the onChange, you would get the latest content from editor.document and then do whatever you want (e.g., serialize to JSON, then save to a db).
Thanks
please help it shows -> TypeError: Cannot read properties of undefined (reading 'SideMenu')
same issue coming
by the way you resolved it?
iy yes then please tell me too
@@Manishchauhan70630 I fixed this
Let's connect to descord
Good stuff!
Can we have the final source code please?
GitHub repo is in the description, the “main” branch is the final code
@@builtwithcode oh i see, thanks!
Could you please show an example of how to write the onChange function that saves the passed content into a database?
For everyone having the same issue, here's the code I used:
const editor: BlockNoteEditor | null = useCreateBlockNote({
initialContent: initialContent
? (JSON.parse(initialContent) as PartialBlock[])
: undefined,
uploadFile: handleUpload
});
const uploadToDatabase = useCallback(() => {
if (onChange) {
setTimeout(() => {
onChange(JSON.stringify(editor.document));
}, 1000);
}
}, [editor, onChange]);
Hey, did you figure it out, how to implement onChange function?
Please I am equally having the same challenge, were you able to figure it how on how to save into a database?
@@vivekjadav7789 Hey, just updated my comment with the code. Sorry, I don't read notifications here
@@edetedikan1063 Yes, just attached the code above
How to delete inline uploaded image from bucket storage ?