Feels like somethings missing.. Trying to add into fresh astro project. 'Editor' cannot be used as a JSX component. Its type 'typeof Editor' is not a valid JSX element type. Types of construct signatures are incompatible. Type 'new (options?: Partial) => Editor' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component'. Type 'Editor' is missing the following properties from type 'Component': context, setState, forceUpdate, render, and 2 more.ts(2786) (alias) class Editor import Editor
I also got this error. I installed the latest novel version and got the same problem. When you restore to the older version, the problem will no longer occur
@@anhkhoavu6693 found this issue: github.com/steven-tey/novel/issues/296 - it looks like there have been some breaking changes from the new maintainer that haven't been properly documented / sorted out with updated instructions - there are links to examples in there, hope that helps
I am getting this error : Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
@@colbyfayock I got it working I am using remix js. They no longer export as a single component. Their doc is only for next js. And uses shadcn/ui and tailwind(I use them, too so no problem there). But it takes so much more effort than this. Tippy.js gives warning continuously . And Image can not be resized after that saved status changes. It gives warning like "image edit is only available in html mode". No idea how to get it. I couldn't save the image in local dir[/public/img]. But after some tweak got it to based64. then got the json to db. But couldn't generate html from that. No video preview or facebook or twitter embed. A lot less setup than plate js though. But plate js got a lot of options.
@@FzsHotDogInDonut bummer sorry to hear that. im confused though, i was able to see that they recently merged in their headless components work which i assume is ultimately a good thing, but it looks like the basic example stil lworks according to the homepage: novel.sh/ - do you mean for more advanced use cases I guess? still, i wouldn't expect the setup to be much different between Next.js, Remix, or any other React-based framework. sounds like maybe it may make sense to consider TipTap directly? would take more work to get it to the point you need, especially visually, but may give you more flexibility: github.com/ueberdosis/tiptap havent heard of platejs, looks nice too
yup so in this video i show grabbing it as HTML via getHTML and do exactly that, store it inside of a database. which i prefer. you can also grab it as a JSON format. i prefer the HTML as it feels like its more transportable to any other platform/framework instead of having to maintain code to parse the JSON or use the TipTap tools to do so
@@adamboucek7437 in React you would render it using dangerouslySetInnerHTML={{ __html: content }} though keep in mind as it notes, its "dangerously" setting it as if you don't know the source of the HTML, someone could exploit that as a security issue, but in the context of bringing in content from a CMS that you own that's usually okay you also have the opportunity to use something like Rehype if you'd like to transform that HTML, such as turning particular elements into React components ruclips.net/video/LFNMs8iEgXM/видео.html
People are having issues with their recent updates that broke backwards compatibility. I'm working to create a PR to show the updated code when I have time
@@dirtybeans69 you could install this version for now if you want to work based off of this video, but of course wouldnt be able to get the latest updates to the library www.npmjs.com/package/novel/v/0.1.22
havent tried, but i would expect you could use it with anything tha can result in the same streaming response. fwiw the video is outdated and the library is very different now
generally speaking yeah, and the example was without locking down the app which i think i mentioned would need to happen, but the Appwrite Web SDK when coupled with their authentication model allows you to interact based on an authenticated session
novel is free - the AI aspect depends on what you use. my example here is openai which has a cost. if you run your own AI service then it would be whatver the cost is of that infrastructure, which would likely be cheaper than openai
@@CanRau i think that's only if you use more advanced features that are opt-in, unless im mistaken. i believe the tool as shown has no price tag associated with it (aside from the AI endpoint), but again i may be missing something?
Honestly, the Novel docs are some of the worst I've seen. No idea how they made it to 10k stars. Your tutorial video is great anyway. Too bad it's outdated and the Novel team kept their docs as vague as it could possibly be.
yeah that parts a bit challenging right now unfortunately. is the video unusable with the recent updates? i plan to create a PR into my code demo to show the updated code, but i have to imagine most of the same concepts still apply
since u are a prominent youtube teacher, pls make a tutorial on Novel along with storing them on database and cloud(aws s3, mongoose) will be a great great great help for everyone.
@@codinglyio since u are a prominent youtube teacher, pls make a tutorial on Novel along with storing them on database and cloud(aws s3, mongoose) will be a great great great help for everyone
![Digital Circus Episode 4 [TRAILER]](http://i.ytimg.com/vi/abZtsmMUbJo/mqdefault.jpg)
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Feels like somethings missing.. Trying to add into fresh astro project.
'Editor' cannot be used as a JSX component.
Its type 'typeof Editor' is not a valid JSX element type.
Types of construct signatures are incompatible.
Type 'new (options?: Partial) => Editor' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component'.
Type 'Editor' is missing the following properties from type 'Component': context, setState, forceUpdate, render, and 2 more.ts(2786)
(alias) class Editor
import Editor
hey did you install React? here's my code: github.com/colbyfayock/my-astro-ai-editor
I also got this error. I installed the latest novel version and got the same problem. When you restore to the older version, the problem will no longer occur
@@anhkhoavu6693 found this issue: github.com/steven-tey/novel/issues/296 - it looks like there have been some breaking changes from the new maintainer that haven't been properly documented / sorted out with updated instructions - there are links to examples in there, hope that helps
I am getting this error : Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Using novel editor can i get content in mdx format I was trying so badly but not able to implement can somebody help me
the problem with thos editor all are not supporting images upload
I got it working with remix js. But never got that ui. Or blocks to drag and drop.
can you elaborate on the working but not the UI? which part is working as i'd assume the UI is part of it?
do you see any console errors?
@@colbyfayock I got it working I am using remix js. They no longer export as a single component. Their doc is only for next js. And uses shadcn/ui and tailwind(I use them, too so no problem there). But it takes so much more effort than this. Tippy.js gives warning continuously . And Image can not be resized after that saved status changes. It gives warning like "image edit is only available in html mode". No idea how to get it. I couldn't save the image in local dir[/public/img]. But after some tweak got it to based64. then got the json to db. But couldn't generate html from that. No video preview or facebook or twitter embed. A lot less setup than plate js though. But plate js got a lot of options.
@@FzsHotDogInDonut bummer sorry to hear that. im confused though, i was able to see that they recently merged in their headless components work which i assume is ultimately a good thing, but it looks like the basic example stil lworks according to the homepage: novel.sh/ - do you mean for more advanced use cases I guess?
still, i wouldn't expect the setup to be much different between Next.js, Remix, or any other React-based framework.
sounds like maybe it may make sense to consider TipTap directly? would take more work to get it to the point you need, especially visually, but may give you more flexibility: github.com/ueberdosis/tiptap
havent heard of platejs, looks nice too
hay! i have my own project and in backend it takes string so im wondaring will this output string or any thing else
yup so in this video i show grabbing it as HTML via getHTML and do exactly that, store it inside of a database. which i prefer. you can also grab it as a JSON format. i prefer the HTML as it feels like its more transportable to any other platform/framework instead of having to maintain code to parse the JSON or use the TipTap tools to do so
@@colbyfayock Hey! but then you display it as raw data? I don't know astro but how would you do it in react? Thanks!
@@adamboucek7437 in React you would render it using dangerouslySetInnerHTML={{ __html: content }} though keep in mind as it notes, its "dangerously" setting it as if you don't know the source of the HTML, someone could exploit that as a security issue, but in the context of bringing in content from a CMS that you own that's usually okay
you also have the opportunity to use something like Rehype if you'd like to transform that HTML, such as turning particular elements into React components ruclips.net/video/LFNMs8iEgXM/видео.html
This doesn't seem to work on for me
People are having issues with their recent updates that broke backwards compatibility. I'm working to create a PR to show the updated code when I have time
@@colbyfayock Could really use an update video. My final project relies on this 😭
@@dirtybeans69 you could install this version for now if you want to work based off of this video, but of course wouldnt be able to get the latest updates to the library www.npmjs.com/package/novel/v/0.1.22
I can use this with Gemini?
havent tried, but i would expect you could use it with anything tha can result in the same streaming response. fwiw the video is outdated and the library is very different now
Does it work for react application
yes!! it sounds like the API for Novel has changed a bit so you'll need to work through their documentation, but i built this in React!
using database connection in client side === bad idea as I know?
generally speaking yeah, and the example was without locking down the app which i think i mentioned would need to happen, but the Appwrite Web SDK when coupled with their authentication model allows you to interact based on an authenticated session
Do I need to pay TipTap for using Novel?
not that im aware of, i didnt touch TipTap directly through this. i believe paying TipTap is for further TipTap features
This really got my hopes up but unfortunately, it no longer works.
Is Novel and its AI components free to use tho ?
novel is free - the AI aspect depends on what you use. my example here is openai which has a cost. if you run your own AI service then it would be whatver the cost is of that infrastructure, which would likely be cheaper than openai
I’d say I’ve got to consider TipTap’s pricing as well
@@CanRau i think that's only if you use more advanced features that are opt-in, unless im mistaken. i believe the tool as shown has no price tag associated with it (aside from the AI endpoint), but again i may be missing something?
Honestly, the Novel docs are some of the worst I've seen. No idea how they made it to 10k stars. Your tutorial video is great anyway. Too bad it's outdated and the Novel team kept their docs as vague as it could possibly be.
yeah that parts a bit challenging right now unfortunately. is the video unusable with the recent updates? i plan to create a PR into my code demo to show the updated code, but i have to imagine most of the same concepts still apply
@@colbyfayock Unfortunately I could not get it to work with your video. And I'd consider myself decently technical and familiar with React etc.
since u are a prominent youtube teacher, pls make a tutorial on Novel along with storing them on database and cloud(aws s3, mongoose)
will be a great great great help for everyone.
@@codinglyio since u are a prominent youtube teacher, pls make a tutorial on Novel along with storing them on database and cloud(aws s3, mongoose)
will be a great great great help for everyone
@@colbyfayock Yes the video is unuseable with the recent updates