Block editor in Next.js using BlockNote and UploadThing

[@spaceghost166]

These types of videos are really valuable. Not too long, yet super impactful! Thanks a lot!

[@builtwithcode]

Glad it was helpful!

[@akshatdubey4421]

Pretty neat and to the point. Great work!

[@senurakalubovila5330]

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.

[@aashiqdurga]

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

[@alexg7282]

Thanks a lot for this tutorial ! Keep going

[@collinsk8754]

Great tutorial 🔥🔥

[@alexdin1565]

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....

[@harshitpant07]

you can hover over the error and click to go for its .d.ts file and copy paste

[@RedVelocityTV]

Good stuff!

[@jarvis2545]

Great tutorial! But how can we setup the onChange(), and use funcs like editor.removeBlocks in the page.tsx?

[@builtwithcode]

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).

[@prashlovessamosa]

Great thanks for sharing

[@munna5553]

please help it shows -> TypeError: Cannot read properties of undefined (reading 'SideMenu')

[@Manishchauhan70630]

same issue coming
by the way you resolved it?
iy yes then please tell me too

[@munna5553]

@@Manishchauhan70630 I fixed this
Let's connect to descord

[@codesnippet_by_anabel]

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]);

[@vivekjadav7789]

Hey, did you figure it out, how to implement onChange function?

[@edetedikan1063]

Please I am equally having the same challenge, were you able to figure it how on how to save into a database?

[@codesnippet_by_anabel]

@@vivekjadav7789 Hey, just updated my comment with the code. Sorry, I don't read notifications here

[@codesnippet_by_anabel]

@@edetedikan1063 Yes, just attached the code above

[@shantanukumar-qh5ei]

Thanks

[@carrettariccardo]

Can we have the final source code please?

[@builtwithcode]

GitHub repo is in the description, the “main” branch is the final code

[@carrettariccardo]

​@@builtwithcode oh i see, thanks!

[@Code-sz9db]

Noice reverb

[@gasal.c3675]

How to delete inline uploaded image from bucket storage ?