Create your own Notion like WYSIWYG editor with Editor.JS!!

hey everyone in this video we'll be talking about something I just found out um it's a busy week editor as they say like I wouldn't classify it as a specific editor uh but it's something along those lines so I found this out while working on a project recently and it just blew my mind on how simplistic and modular this is it is a visible editor a free block style editor with a universal Json input they say I'll talk about what this is in a second but the blog style editor is something like this so each of these um text elements or a heading or a list is a block it's something very similar to if you use notion you would say so if I open my notion I have have my editor JS over here so each of these is a block so I can add a block of text over here so this is the text I can add a Blog with a page or a heading which is a heading one all these are separate blocks so this is very similar to that so I can classify it as a notion copy like such so uh we'll talk about what the Json output in a second uh and it is open source and it is so modular that you can write your own tools uh which come up over here as well so let's just look at the documentation um if you I'll in this video I'll add a um I'll talk about some a little bit about how it is used in next years but you can use it with basically any JavaScript framework uh but uh basically it is a basic blog style Rich editor the other visibility editors if you've used they use divs and then they set it to content editable and work with those but it causes a lot of issues when you're working with it now what editor.js does differently is it just consists of separate blocks and each of them is an independent content editable element as they have used over here the thing with this is let's talk about clean data in a second but the thing with this is each of these now the text The Heading the list the images the attachments all of these are separate plugins and you can just plug in whatever you need uh um separately and that will just make it so much more modular and talk but just you know uh you just use whatever you need for example if you just go down over here they have the Tools installation over here and they describe the base Concepts where they use header link embeds Etc and they just install header separately the list separately and then specify those inside tools now what this enables you to do is just use whatever you need and not install any other things so and the thing with this is so if I open just the GitHub over here uh you can see the tools which they have but they also have some other tools which are open source and you can just instantiate those tools directly for example inline image crucial latex uh mermaid block editor Etc you can just install these and they will just work so I just got a basic setup with uh editor.js working uh so if I just go over here I have the text of heading and the table over here I I can add the heading heading one I can just click on Tab and it will open the menu again I can click on text um let me just fill some Laura mips from over here and the thing is like I have four paragraphs over here if I just paste this it will generate four different blocks this is very interesting and if I select something over here I can look at Bolding it it lizing it or linking it so I can bold this I can say link something over here to say and if I click on this again it will show me that it has linked so it works very similar to how notion works you can also add the table like I've added this tool so I can add the table name age something like that um so how this works is basically um I'll just go over this code base in a second uh I have this app directory this is an XTS directory and I have the editor slash page.tsx over here which is a server component now I'm just uh having the contain this basic attailment to Center the um editor and this editor over here is a client component and I'm getting the editor.js the header and the table dynamically because esm Imports is needed over here uh basically what I'm doing over here is I'm waiting for the window object to be set this is specific only to next years because it um by default runs on the server so you need to wait for the window object to load uh so bit to make editor JS work so we wait for the window object load and set is mounted state to true and whenever is mounted changes if it's mounted is true then we initialize this so basically what that is doing is initializing the editor we're getting editor.js working uh we're instantiating this class and setting this folder but the holder is is this div over here has the editor JS folder um ID so basically what that is is if I go back and look at this over here it's inside this container and look at this div ID this is the whole div which is uh working with the Codex editor so it basically got an injected all the Codex um editor code inside this so that is what the folder is for by default editor JS you don't even need to set this but look at this this is the main part so I'm instantiating two tools over here the header and the table the text is there by default I'm getting header and table items installed these before and then got these two tools working that is all you need to do to get the heading and the table working and this makes it so modular like I said just use what you need you you don't need even need to install what you don't need for example let's add lists over here so for that if I go back to the GitHub you can see that nested list is an item over here so if I click on that I can install nested list over here or well let's look at lists if that is a separate thing I'm pretty sure there isn't this separately documentation let's look at getting started Tools installation list yeah list is a separate thing so I can just install this and using pnpm use npm whatever you want PM can add this uh that will just take a second or two and well these don't have types so that is uh you don't need those specifically but yeah it does give me still it still gives me the error that I couldn't find the Declaration if I just ignore it or you can just ignore this block and over here all I need to do is set list list look at this now right I go to my next yes I refresh this and see what happens this is a loader and if I click on this and click on this I have the list working now just item one list item two Etc and this is all one block and what you can do is click on this and you can change this to unordered these are all the inline tools items that they say uh so you can customize all of these if you're writing your own plugins itself so you can write your own blog tool as well you can write um say a simple image a plugin so you can use a simple image this already exists you don't need to write this but you can write your own plugin which renders stuff uh you I talk about save in a second that is a very important thing but you can write your own plugin I won't go into too much detail over here but just showing you how capable uh editor.js actually is you can also write inline tools which is for example if I select this well the text will be here if I just uh create a new blog over here the text and hello world and if I select this this is the inline tool over here you can also convert this to a heading or a list like they've said over here now it is so cool how this works um now going to the most important part about editor Js so see this button over here I have over here after this over here this is the save button uh why do I have a semicolon input oh yeah we can remove that right so I have this button over here basically it is calling the save function the save function is calling the save method on ref.current ref dot current is this editor basically so if I go to this editor this editor has that um function here so basically will call the save function if I go to the documentation on what the save function is um where was it saving data so it basically Returns the key in data uh the promise that resolves with the clean data the output data and this is just our adjacent it returns time uh when the saving the timestamp if you need it somewhere inside your um database uh you the version that of both of these are pretty Irrelevant in our case but look at this blocks all right now the blocks what that does is each and every block is an object inside this array so if I just look at this over here I have this alerting uh the json.string if I actually let's let's just have that I had that for a separate reason but uh if I just click on this over here let me just refresh and try this out in a second let's have a heading headings uh it's added text so by default it is a text you don't even need to set anything but you can change what the default is later you can add a table that is your name is coming in um if I enter now keyboard uh function keyboard support is very good as well you can actually also I think do that I just did a command b or a control B in case of Windows and that work keyboard support is brilliant you can set your own keyboard shortcuts and change those Zone on 24 right uh I can have a list okay pretty relevant I just wanted some items over here to show what this can do and see I hit Tab and I can actually look at these over here this is ordered by default I hit tab again I can change it to unordered all these things over here I can move this up I can move this down all these things now the relevant part is if I go to my console and clear everything over here check this out already should I zoom in yeah I can zoom in the console thankfully uh now if I click on Save to get this one right the article data it has ignore the time and the version it's not needed this is on apoc time with the blocks it has four blocks like we have four blocks over here it gives all of these a separate ID again not very relevant look at the type now the type for this is a header the data it has a text and a level I think you can change the heading level so if I change this to heading 1 and then click on Save again if I look at the blocks again the first one the data uh well the level by default is one so it doesn't give anything but if I change this to header heading 3 save this blocks zero data level three uh it has all these customizations over here and you can write your own renderer for this if you want later if you're making something like notion you don't even need a renderer in that case but um basically have this text it just gives the relevant data to you uh with headings false uh I think you can set the headings over here for example uh add a row below Etc uh with headings if you set that to so this becomes a heading of its own you don't even need to do this in that case I think okay anyways so you can set these two with headings without headings Etc um have these B tags over here for the HTML and the three is the ordered list of style with the items so you can render these on your own and this Json is so um nice to have okay not sure if you could see all that Json because my face was in there but um hopefully you could uh see a bit of how that works now you cannot uh in some cases if you're writing like a busy pick editor you would ideally want it to be in the case where you can output the data somewhere right so for that I made an output output slash page.ts so this is what this is doing is this is calling this over here so this is from components output.ts another use client I installed something called editor.js react Dash renderer again a dynamic import is needed because this needs to be on the client and let's see content uh you can style this uh with the editor output types that is fine um basically what I'm doing is having this output over here setting some custom styles for the paragraph and having a class name for text SM and the data is the content this is the main part now the data is the content and this content is coming as props so if I look at the references to this I am passing a Content I got from a previous one over here basically what we want to do is let's actually try everything about that if you heard that um so basically what I want to do is let's Json dot stringify this so that I can copy this output data let's save that and let's refresh this uh let's just add a bunch of stuff really quickly list one list two uh let's go tab over here uh well text text here let's just add a table really quickly table it will go the keyboard support is so good which is a very important part of like my workflow like I definitely want keyboard support in my application um okay that's it I'm not going to do too much stuff over here um so now what I'm going to do is click on Save and I have this over here I'm going to copy this Json trade I'm going to copy this Json go back to the renderer and I'm passing this content over here so I'll just pass an independent again over here sorry content and then paste that Json and I'm going to delete this part basically this has a timed blocks and the version that is relevant irrelevant but I have the blocks over here with the list the paragraph and the table now if I go back and go to localhost 3000 slash output that there it is it has a list one list two texture and you can write custom renderers for these as well so for example uh I I was using this with code um the code plugin over here and it didn't have a renderer for code and I just wrote a render for it by myself and it is very simple to write that uh so basically you could just go uh which one was this in yeah so you can make these own renderers and you can call the renderer superher uh and basically this will work you can custom code render you need to find out what data is being passed in the data is basically the data which is coming in here so if you look at this the data is this data which is going in over here so for code it was something like data.org I don't remember exactly but I use that code and wrapped it inside a pre-ender code a tag and then styled it accordingly so you can write custom renders if you want you can write this custom render for list itself to have this as a better list but that's just Tailwind doing its thing of removing the LI uh tag the um the text decoration list decoration yeah something like that anyways so that is it for this video there's a lot more things going on on around editor.js you can write your own plugins like I said and all these things but I wouldn't go into too much detail over here because this video was just to introduce you to editor.js and I hope this was a useful video for you all and uh I will be coming up with more videos regularly now and soon so to look out for more such videos uh please like share and subscribe and keep watching goodbye

Channel: LiveCode247

Views: 19,628

Keywords: webdevelopment, web development

Id: e7tj1m-4Nhw

Length: 17min 50sec (1070 seconds)

Published: Sun Jun 04 2023