Notion-style Rich Text Editor in NextJs

Рет қаралды 47,586

Күн бұрын

Пікірлер: 46

@valostudent6074 6 ай бұрын

you are the only youtuber that got deep into the practical implementation, i was looking for such tutorial for months now, even posted for a tutorial in their repo, but finally you posted it, thank you so much Hamed

@hamedbahram 6 ай бұрын

You're welcome! Happy to hear that!

@Corey3D 6 ай бұрын

Glad you made a video on this. Currently working on a NextJS questions & answers forum and I wasnt't sure what text editor should I go for, this ones really promising.

@hamedbahram 6 ай бұрын

Absolutely!

@Corey3D 6 ай бұрын

Would you have any recommendation on how to validate the editor's output on the server, for example, limited character count or words?

@zalaam_0 6 ай бұрын

One of the best editor. I've tried to use this sometime but I failed to integrate it as its documentation on that time was so lacking so lets give it another try

@hamedbahram 6 ай бұрын

Absolutely

@muhammadisa440 6 ай бұрын

Thanks for making this video. It's a time and life saver for me. 😊

@hamedbahram 6 ай бұрын

Glad it was helpful!

@amirjamshidi5027 6 ай бұрын

King Hamed ❤ Thanks

@hamedbahram 6 ай бұрын

My pleasure 🫡

@MTLai 15 күн бұрын

Thank you for sharing. Wondering what's the pro and cons to set model Post.const to be JSON or String ? You are using String, but Novel need json

@hamedbahram 14 күн бұрын

I like the json even though I used the string in this example.

@alexdin1565 5 ай бұрын

thanks for sharing but the only problem is baby one can get your prisma endpoint from the server action

@hamedbahram 5 ай бұрын

not true. show me how.

@mohammadabbas1623 6 ай бұрын

That's amazing. gentle reminder for that pdf editor project sir 😄

@hamedbahram 6 ай бұрын

Thanks!

@ecnirpjodhani3522 5 ай бұрын

I implemented but when I clicked heading 1 or 2 and write the text, its not showing big text. Its simply shows as normal plain texts. Please guide me what's wrong?

@hamedbahram 5 ай бұрын

Seems like you haven't included the `prosemirror.css` file.

@heisend4rk 2 ай бұрын

require('@tailwindcss/typography')

@UCnhHegbqCv6_CnRAETfCSsA 5 ай бұрын

King Hamed

@hamedbahram 5 ай бұрын

Respect 🫡

@codedusting 5 ай бұрын

Do you have to do sanitization for the content before storing it in your DB or is it all taken care by the editor itself during submission?

@hamedbahram 5 ай бұрын

You need to always sanitize whatever that comes from the client-side.

@codedusting 5 ай бұрын

@@hamedbahram Yes, but do we have something to sanitize incoming rich texts with images here?

@kemmouneismail3087 2 ай бұрын

Hello, Im having an issue which is makes all my content inside the editor with the same font size, even if I try to add a header 1 or 2, everything the same font size

@hamedbahram 2 ай бұрын

Have you added the `prosemirror.css` file?

@kemmouneismail3087 2 ай бұрын

@@hamedbahram yes, but there is no heading styling in the prosemirror file, how could this affect the headings?

@hamedbahram 2 ай бұрын

@@kemmouneismail3087 Have you installed the `@tailwindcss/typography` package?

@GreatAdib 6 ай бұрын

how to add image link or embed video in this editor ?

@hamedbahram 6 ай бұрын

Look at the full example on the repo!

@danipram710 5 ай бұрын

Hi, I get the error: "TypeError: editor.chain(...).focus(...).toggleUnderline is not a function" when underlining a word and "TypeError: editor.commands.unsetColor is not a function" when trying to give another color. What can I do?

@hamedbahram 5 ай бұрын

I've update the code to fix the errors.

@danipram710 5 ай бұрын

@@hamedbahram cool thank you :)

@IkraamDev 6 ай бұрын

This is perfect for my side project. It just needs a video and audio uploader and player.

@hamedbahram 6 ай бұрын

Absolutely! I'd look at Tiptap documentation for extra functionality. I'd use Mux for video.

@bgdnsr 6 ай бұрын

Storing the html directly in the db, not a smart move

@hamedbahram 6 ай бұрын

Why not?

@ayushchauhan7592 6 ай бұрын

how can i set html value from db

@hamedbahram 5 ай бұрын

You can store the content as json or html string and then use it on the client-side. In case of json you can use the `editor` to generate the html from json data and in the case of html string you can pass it to react components. Just make sure that you sanitize the html coming from the client.