Create your own AI text editor with Tiptap and Novel.sh

No video

Create your own AI text editor with Tiptap and Novel.sh

Рет қаралды 12,942

Жыл бұрын

In this episode of Open Source Explored we cover Novel.sh, an open-source Notion-style WYSIWYG editor with AI-powered autocompletions.
In the video we'll create our own editor using Tiptap and cover the code used to create Novel.sh and it's AI autocompletion functionality.
The code in the video uses TypeScript, Next.js, and Tailwind.
Links from the video:
Novel: novel.sh/
Novel GitHub: novel.sh/github
Tiptap: tiptap.dev/
Demo project: github.com/eli...
#ai #code #nextjs #tiptap #react #openai #opensource #tutorial

Пікірлер: 31

@vampirekabir8356 8 ай бұрын

u r a pro,u got in-depth knowledge,blessed to have ur videos

@elie2222 8 ай бұрын

appreciate the support!

@eyalcohen2029 Жыл бұрын

Awesome overview!

@xl0xl0xl0 10 ай бұрын

Very nice, but please use a higher resolution screen grab in the future.

@elie2222 10 ай бұрын

Will do! I know it’s a mistake I’ve made a few times especially when recording with loom and I start a new recording :(

@maxbrych7354 11 ай бұрын

hey, great video! I learned a lot but what I still can't figure out is how to "extract" the json value of the editor. There is this thing called "onUpdate" but do you know how I can for example have a submit button that let's me export the input and display it?

@LEDsellers 8 ай бұрын

I'm having trouble using the shadcn dropdown component in the bubble-menu extension. Any idea of how to implement it without getting the dropdown menu to run over to the right?

@elie2222 8 ай бұрын

Check the Radix UI docs on positioning. That's what Shadcn uses under the hood.

@raphauy 9 ай бұрын

Thank you!!!

@elie2222 9 ай бұрын

Glad you found it helpful!

@user-ss5pl9sm9j 5 ай бұрын

Will this work with html (for use as a headless wordpress editor)?

@elie2222 5 ай бұрын

You can export the data as HTML, yes. Although not sure I'd see much benefit to it compared to existing editors.

@leibelhecht 5 ай бұрын

I’m having more trouble with importing html thank exporting. You essentially need to define every type of node and add styling to the editor. I was trying with novel and with lexical. I’ll probably end up with tip tap and then I’ll copy over just the ai plug-in from novel

@Fathorrrr-st3ou 6 ай бұрын

can i customize the command menu, like remove "Continue Writing" or "Send Feedback" ?

@elie2222 6 ай бұрын

Hey, I'm not sure the level of customisation. We've also had issues here. You may need to make a PR or clone it yourself.

@chrisalupului 9 ай бұрын

Thanks for the video! Trying to figure out how to remove the default text of novel initial load of a post that is in the platforms kit.

@elie2222 9 ай бұрын

How are you using it? You’re using novel as a package?

@elie2222 9 ай бұрын

When I recorded the video it wasn’t yet available as a package btw. You just cloned the repo and could change anything you want about it.

@chrisalupului 9 ай бұрын

@@elie2222 Yes as a package within vercel platforms kit, I'm assuming its probably in node_modules/novel/dist/index ? or am I looking in wrong spot

@anversadutt 10 ай бұрын

quality of the video is crap but good work, keep pushing

@elie2222 10 ай бұрын

😅😅😅 I know I need to do a better job in the future. I’ve been improving since. Was using loom and they don’t have an easy way to keep it at high quality. Always resets on video restart. Lesson learnt

@PriyankaBisen-cq8kw 10 ай бұрын

how to add + button along with drag and drop

@elie2222 10 ай бұрын

it's regular react. so you can add a button as you usually would. for drag and drop there are libraries that can help with that too

@irfansaeedkhan7242 5 ай бұрын

brother if quality can be 1080 atleast that would be great

@elie2222 5 ай бұрын

Thanks! I don’t make this mistake on my more recent videos :)

@irfansaeedkhan7242 4 ай бұрын

@@elie2222 awesome

@AjarnSpencer 7 ай бұрын

god im in webmastery and authoring 30 years and this is a piece of crap

@elie2222 6 ай бұрын

Hope to get to your level in another 15 years or so 😅 I put more time into the videos these days so hopefully the newer ones serve you better :)

@chukwukamorka5055 9 ай бұрын

Hi the demo project link in the description doesn't have the same complete code as the one in the video @elie2222

@elie2222 9 ай бұрын

Hey, I should have linked to an exact commit. It's been updated since I created the video: github.com/steven-tey/novel/releases/tag/1.0.16 If you download the zip here that should match up closer with what I show in the video (before they migrated to Turborepo)