Build a Rich Text Editor in Next 13 Tutorial
Vložit
- čas přidán 15. 10. 2023
- 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 - Věda a technologie
You never cease to amaze me with your humor: "Do we have a sponsor for this video- No"😅😅
*cease to amaze
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!!
such a glow up of a content, fr man, been watching you for a while your videos deserve recognition. You sure have mine, congrats
WHERE IS THE GITHUB REPO PLEASE SHARE
❤️Thank you for teaching us how to make our content better ❤️😊
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.
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.
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
Great videos! Nice work. Any particular reason you're not using Yup schema for validations?
This is amazing!
Awesome contento man!
Hahahahahaha. Do we have a sponsor for this episode? No. Absolutely hilarious
🔥 Explanation.
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]
}
},
...
Thank you.
Great intro 👍
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❤
Thank you
Nice overview thanks. Struggling to clear the rich text field after a form submit. Anyone have a solution for that?
I like your desktop wallpaper. Can you please share the source?
men. you're such a funny guy, almost all of your intro's are funny!! what a guy, you're wife is damm lucky!
Is the course coming out anytime soon?
Question why we don't need src directory in next js?
Hihi.learned a few stuff while smiling.❤
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
please make video on lexical rich text editor with mentions and hashtags please
magnificent!!
would have been even better with a link to a repo for this code 😅
whoops added it now!
Has the course he motioned in the video out yet?
Can u show the source code ?😃
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
Can you share the code
Hello,
Could you please create yarn or npm tutorial
Hi thanks for sharing this great vieo. Can you share the source code as well?
need redux toolkit tutorial plz make a playlist or a complete video
is it possible to add images & videos?
great video!
btw already has a in it
Whoops! Well done for catching that!
But why chadcn using both in his docs 🤔
@@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
which font are you using for vscode? I loved it.
Looks like Fira Code to me
Will the text editor be so rich that it can lend me money?
How can we make this with editorjs?
Does it exist for react native?
Anyone know how to upload an image to a storage like S3 in Next, Is it same like form?
looking for it for a long time, everyone skips this critical feature, all youtuber are similar
Can you please share the code ?
How about lexical?
How to integrate it with formik?
Small components tutorial are better bring em
Next 13 tutorial in 13 min
0:04 😂😂
you do somewhat look like jack harlow you know that right?
Btw, good content!
My bulletList and orderList is not working. Everything else works
source code please ?
First viewer of this video 😊
Do we have a sponsor for this episode?
No.
HAHA
code source?
Sure they are 😏
please put source code next time
Hmm
the prints. I'm dead.
which vs code theme
Tokyo Night
how do i clear the tiptap form after submit
same question. During edit, I found this issue. Once I prefill the data and submit it, the editor data is not getting cleared.
@@arupdey5811 Same question here as well, have tried everything I can think of and no luck.
@@arupdey5811 Found it...look at react "useImperativeHandle" and "forwardRef" ...works great.
What about lexical? Have anyone tried lexical before?
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 ?
@@nagato6819 I'm planning to do it soon. Maybe next week.
If i did, I'll paste the repo-link here...
@@senorfavorita7457 okey thank and if I implement it, i'm gonna past the repo link here for you.
you just have to pay $149+ VAT every month for tiptap so that your app doesn't pause every now and then 😅
PLEASE REPLY WITH A GITHUB REPO WITH CODE PLEASEEE
source code please
PLEASE
Hello there, how are you ?
I am first
blame serverless cold boots ✌️
Hiii
zooming code is annoying
yeah... tiptap is asking for 999$/month :) so .....
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.
NSFW
english humor