Build a Rich Text Editor in Next 13 Tutorial

Рет қаралды 87,766

9 ай бұрын

Check out my web dev courses below🔥
developedbyed.com
-------------------------------------------------------------------------------------------------
Have you ever wanted to implement a rich text editor in your react or next 13 apps. You can do that easily with TipTap and react hook form. In this tutorial I will show you how you can build one out that looks and copies the same styles as shadcns UI.
-------------------------------------------------------------------------------------------------
👨‍💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
-------------------------------------------------------------------------------------------------
🎶 Dope tracks🔥
Leavv - Roam chll.to/15c396e0
Leavv, Midan - Bloom chll.to/0b3ee665
Leavv, dennisivnvc - Coast chll.to/e77956eb
C Y G N - Sunset Drive chll.to/d66020b5
#react #tailwindcss #shadcn

Пікірлер: 95

@therealdevopsintern 9 ай бұрын

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

@pirateg3cko 9 ай бұрын

*cease to amaze

@licokr 8 ай бұрын

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

@joaomarcelofurtadoromero8277 8 ай бұрын

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

@joaofreire1478 8 ай бұрын

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

@selfmotivation77736 5 ай бұрын

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

@scientificshiv 4 ай бұрын

This is amazing!

@GuilhermeSiebert 2 ай бұрын

Awesome contento man!

@misap123 6 ай бұрын

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 8 ай бұрын

WHERE IS THE GITHUB REPO PLEASE SHARE

@datoubi 9 ай бұрын

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

@redwansikder3847 Ай бұрын

🔥 Explanation.

@maskman4821 9 ай бұрын

Great intro 👍

@user-lz4uw5vu6o 7 ай бұрын

Thank you

@emmanuel8944 9 ай бұрын

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❤

@matt3441 7 ай бұрын

Is the course coming out anytime soon?

@user-bx3jy6xe2s 8 ай бұрын

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

@sherumov6472 2 ай бұрын

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] } }, ...

@DejayClayton 9 ай бұрын

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

@aarongregory1806 3 ай бұрын

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

@NlaakALD 7 ай бұрын

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$

@frackinfamous6126 4 ай бұрын

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 19 күн бұрын

please tell that right side content

@vigneshgupta23 20 күн бұрын

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

@migaratennakoon5439 Ай бұрын

Thank you.

@dannjohnrem 9 ай бұрын

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

@stanleychukwu7424 7 ай бұрын

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

@abdallahissaal-kass9092 4 ай бұрын

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

@aarongregory1806 3 ай бұрын

Looks like Fira Code to me

@jellyfish1772 8 ай бұрын

Hihi.learned a few stuff while smiling.❤

@irfansaeedkhan7242 8 ай бұрын

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!

@nmdpa3 Ай бұрын

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

@user-kj4ii8tt6n 7 ай бұрын

Can u show the source code ?😃

@timeforrice 2 ай бұрын

Has the course he motioned in the video out yet?

@abuzeralaca 7 ай бұрын

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

@memesserfully 5 ай бұрын

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

@ameykhandar889 9 ай бұрын

Hello, Could you please create yarn or npm tutorial

@pushkarkathayat7893 5 ай бұрын

is it possible to add images & videos?

@hubesh716 9 ай бұрын

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

@Ashish_singh_dev 9 ай бұрын

How can we make this with editorjs?

@YannAriell 8 ай бұрын

Does it exist for react native?

@melvinrex9151 8 ай бұрын

Can you share the code

@ilkou 9 ай бұрын

great video! btw already has a in it

@developedbyed 9 ай бұрын

Whoops! Well done for catching that!

@ahmeddotgg 9 ай бұрын

But why chadcn using both in his docs 🤔

@euanmorgann 6 ай бұрын

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

@dwisetyoaji5007 9 ай бұрын

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

@vzdev9978 9 ай бұрын

How about lexical?

@pranshusati5818 7 ай бұрын

How to integrate it with formik?

@anshulsoni653 9 ай бұрын

Small components tutorial are better bring em

@tareqmahmud3902 6 ай бұрын

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

@LotsOfFunyoutubechannel 9 ай бұрын

Next 13 tutorial in 13 min

@andrewsjose4228 9 ай бұрын

0:04 😂😂

@badr9032 9 ай бұрын

please put source code next time

@ivankraev4264 4 ай бұрын

Can you please share the code ?

@64revolt 8 ай бұрын

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

@mohammadaghayari3661 28 күн бұрын

What about adding link?

@apjs77 7 ай бұрын

source code please ?

@andrewwoodward5274 8 ай бұрын

My bulletList and orderList is not working. Everything else works

@monstarbog3049 4 ай бұрын

code source?

@milodevs 3 ай бұрын

Sure they are 😏

@dude101cool 3 ай бұрын

how do i clear the tiptap form after submit

@arupdey5811 3 ай бұрын

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.

@user-zw9st4px2q 8 ай бұрын

which vs code theme

@xen.sky_8674 8 ай бұрын

Tokyo Night

@theclip810 2 күн бұрын

please provide code link

@janipartanen3162 2 ай бұрын

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

@games4fun538 8 ай бұрын

PLEASE REPLY WITH A GITHUB REPO WITH CODE PLEASEEE

@2an_sound 6 ай бұрын

the prints. I'm dead.

@anshulsoni653 9 ай бұрын

Hmm

@senorfavorita7457 8 ай бұрын

What about lexical? Have anyone tried lexical before?

@nagato6819 7 ай бұрын

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 7 ай бұрын

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

@nagato6819 7 ай бұрын

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

@arukigaming2621 Ай бұрын

source code please

@__________________________6910 9 ай бұрын

Hello there, how are you ?

@sanjeevkumar-wf5lr 9 ай бұрын

First viewer of this video 😊

@games4fun538 8 ай бұрын

PLEASE

@kacperkepinski4990 4 ай бұрын

zooming code is annoying

@amritadas1128 9 ай бұрын

Hiii

@klkiessertggksmsmsjfldd 3 ай бұрын

english humor

@vinniv6806 9 ай бұрын

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

@douglascolin3562 8 ай бұрын

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.