Build a Rich Text Editor in Next 13 Tutorial

[@therealdevopsintern]

You never cease to amaze me with your humor: "Do we have a sponsor for this video- No"😅😅

[@pirateg3cko]

*cease to amaze

[@licokr]

When I think of implementing rich editor, my headache starts but wow, of course, there are still many things to do but it's way easier than I thought. There are so many libraries. I learned a lot. I also didn't know hook form validation with zod. Awesome, thank you!!

[@misap123]

If youre getting a error like context can only be used in client components or useform is not a function, add "use client" to the form component and the page.tsx

[@games4fun538]

WHERE IS THE GITHUB REPO PLEASE SHARE

[@sherumov6472]

Some fixes: Do not import extensions like heading if you are using starter kit, you should configure all extensions right in the starter kit, because if you adding seperate extension it creates duplicates and you're getting this error - [tiptap warn]: Duplicate extension names found example: extensions: [ StarterKit.configure({ heading:{ HTMLAttributes: { class: 'text-xl font-bold', levels: [2] } }, ...

[@Andrew_Donelson]

You definatly know what your doing but you where zipping around the editor so fast and the right side of the code was cutoff that i could not follow. I tried going to your github as last resort and out of 75 repositories did not find this one.

[@frackinfamous6126]

On IPhone or mac screenshot and select text. On windows, screen shot, get windows power tools. Press ‘win shift t’ . Watch video at 75 or 50% speed on parts that are too fast. Hope that helps some. 😀 Also with typescript, VSCode and copilot the line will usually autocomplete once you type a few words.

[@staraquarium6555]

please tell that right side content

[@datoubi]

Hahahahahaha. Do we have a sponsor for this episode? No. Absolutely hilarious

[@joaomarcelofurtadoromero8277]

such a glow up of a content, fr man, been watching you for a while your videos deserve recognition. You sure have mine, congrats

[@aarongregory1806]

Nice video! I noticed the validation doesn't truly work because the output of the editor will not be the length you would expect, unless you are taking into account the format it's returning. You would have to return `editor.getText()` instead of `editor.getHTML()` and of course this results in you not receiving the formatted text which defeats the purpose. You can see this at the 09:45 mark where there are only 2 characters in the input when the constraints specify at least 5, and the same later when the maximum character length of 100 is exceeded with less visible characters than that. There's ways around it though, of course. Unless I've missed a section of the video that addresses this :D

[@DejayClayton]

Will the text editor be so rich that it can lend me money?

[@TonyLeung-e5u]

Can u show the source code ?😃

[@selfmotivation77736]

❤️Thank you for teaching us how to make our content better ❤️😊

[@IJDKno1Fan]

lost around 4. I'm still learning, and you go so fast :(

[@turokII]

This was very helpful, thank you!

[@melvinrex9151]

Can you share the code

[@joaofreire1478]

Great videos! Nice work. Any particular reason you're not using Yup schema for validations?

[@stanleychukwu7424]

men. you're such a funny guy, almost all of your intro's are funny!! what a guy, you're wife is damm lucky!

[@scientificshiv]

This is amazing!

[@timeforrice]

Has the course he motioned in the video out yet?

[@vigneshgupta23]

Great content! Can we have the code because for me tailwind is not allowing any styling

[@matt3441]

Is the course coming out anytime soon?

[@SajjatHossain-e3q]

I like your desktop wallpaper. Can you please share the source?

[@abdallahissaal-kass9092]

which font are you using for vscode? I loved it.

[@aarongregory1806]

Looks like Fira Code to me

[@pushkarkathayat7893]

is it possible to add images & videos?

[@redwansikder3847]

🔥 Explanation.

[@ivankraev4264]

Can you please share the code ?

[@nmdpa3]

Nice overview thanks. Struggling to clear the rich text field after a form submit. Anyone have a solution for that?

[@dwisetyoaji5007]

Anyone know how to upload an image to a storage like S3 in Next, Is it same like form?

[@vampirekabir]

looking for it for a long time, everyone skips this critical feature, all youtuber are similar

[@Daniel-x4u1j]

How can I put different classes to h1, h2, h3 for example: h1 "text-xl4 font-bold"; h2 "text-xl3 font-bold"; h3 "text-xl2 font-bold";

[@GuilhermeSiebert]

Awesome contento man!

[@emmanuel8944]

Please can you make a tutorial on how to integrate Redux toolkit with Next13 app directory. You could make a simple e-commerce cart. Much love from Nigeria! all my developer friends are your fans, Ed❤

[@maskman4821]

Great intro 👍

[@memesserfully]

Please bro, would do a tut on how to upload a file and/or an image file wih next js 14 server actions, typescript, shadcn ui, tanstack and postgressql (supabase), using zod for validation along with react hook form, the goal here is to build an onboarding page that contain multistep form to onboard the user. getting their information to update several db tables related, like profiles, subscribing to tags, etc... Plesae I really like the way you present your videos very informative

[@badr9032]

please put source code next time

[@irfansaeedkhan7242]

please make video on lexical rich text editor with mentions and hashtags please

[@eliaspaulinho8435]

magnificent!! would have been even better with a link to a repo for this code 😅

[@developedbyed]

whoops added it now!

[@cipherdeprogres3198]

@@developedbyed Where? Couldn't find the codes on your GitHub.

[@abuzeralaca]

Hi thanks for sharing this great vieo. Can you share the source code as well?

[@ilkou]

great video! btw already has a in it

[@developedbyed]

Whoops! Well done for catching that!

[@ahmeddotgg]

But why chadcn using both in his docs 🤔

[@euanmorgann]

@@ahmeddotgg is actually a from react-hook-form. It doesn't render a native tag but just provides context which react-hook-form uses so you do need both

[@dannjohnrem]

Question why we don't need src directory in next js?

[@apjs77]

source code please ?

[@LotsOfFunyoutubechannel]

Next 13 tutorial in 13 min

[@monstarbog3049]

code source?

[@bangunny]

tiptap lacks lots of feature that a rich text editor should have

[@jellyfish1772]

Hihi.learned a few stuff while smiling.❤

[@ИванПроцко-э4ц]

Thank you

[@mohammadaghayari3661]

What about adding link?

[@VanQuangTrieu-up1uo]

How to upload image in editor?

[@ameykhandar889]

Hello, Could you please create yarn or npm tutorial

[@YannAriell]

Does it exist for react native?

[@hubesh716]

need redux toolkit tutorial plz make a playlist or a complete video

[@64revolt]

Do we have a sponsor for this episode? No. HAHA

[@Ashish_singh_dev]

How can we make this with editorjs?

[@migaratennakoon5439]

Thank you.

[@senorfavorita7457]

What about lexical? Have anyone tried lexical before?

[@nagato6819]

I'm thinking to try implement, if you already try it please let me know how you find it, good, bad, not good and not bad ?

[@senorfavorita7457]

@@nagato6819 I'm planning to do it soon. Maybe next week. If i did, I'll paste the repo-link here...

[@nagato6819]

@@senorfavorita7457 okey thank and if I implement it, i'm gonna past the repo link here for you.

[@pranshusati5818]

How to integrate it with formik?

[@andrewwoodward5274]

My bulletList and orderList is not working. Everything else works

[@games4fun538]

PLEASE REPLY WITH A GITHUB REPO WITH CODE PLEASEEE

[@dude101cool]

how do i clear the tiptap form after submit

[@arupdey5811]

same question. During edit, I found this issue. Once I prefill the data and submit it, the editor data is not getting cleared.

[@nmdpa3]

@@arupdey5811 Same question here as well, have tried everything I can think of and no luck.

[@nmdpa3]

@@arupdey5811 Found it...look at react "useImperativeHandle" and "forwardRef" ...works great.

[@tareqmahmud3902]

you do somewhat look like jack harlow you know that right? Btw, good content!

[@vnxcius]

good video but L for not sharing the source code

[@mrtinythumb5363]

wheres the source code at ?

[@vzdev9978]

How about lexical?

[@janipartanen3162]

you just have to pay $149+ VAT every month for tiptap so that your app doesn't pause every now and then 😅

[@andrewsjose4228]

0:04 😂😂

[@theclip810]

please provide code link

[@anshulsoni653]

Small components tutorial are better bring em

[@2an_sound]

the prints. I'm dead.

[@milodevs]

Sure they are 😏

[@HarsheelKashyap]

which vs code theme

[@xen.sky_8674]

Tokyo Night

[@arukigaming2621]

source code please

[@sanjeevkumar-wf5lr]

First viewer of this video 😊

[@JobHelen-q1n]

Considine Ridges

[@anshulsoni653]

Hmm

[@games4fun538]

PLEASE

[@kacperkepinski4990]

zooming code is annoying

[@__________________________6910]

Hello there, how are you ?

[@brandon400]

you dont share the code to your people, you are like this?

[@sigmaroll9802]

I’m lost bro

[@codedusting]

It's no longer free I think.

[@samoltman]

english humor

[@codeneverlies1010]

I am first

[@developedbyed]

blame serverless cold boots ✌️

[@vinniv6806]

yeah... tiptap is asking for 999$/month :) so .....

[@douglascolin3562]

Right. And the free tier is limited to one user, so for personal projects only. Alternatives that I've worked with (free & open-source): Plate- a plugin system for Slate RTE; headless but has shadcn components if you'd like. Powerful, feature-rich, pretty; documentation can be challenging, boilerplate. MDXeditor- Markdown editor with WYSIWIG formatting built on Lexical (from Meta so seamless with React). Good docs, lighter package. Less boilerplate, simpler to work with. No shadcn but it looks good. Toolbar features images & code editing plus live coding environment.

[@mheetu3909]

Downvoted because title is misleading... you didn't build a rich text editor, you assembled a form /using/ a rich text editor component/library.

[@amritadas1128]

Hiii

[@NickAtNet]

NSFW