Live stream🔴 A journey into the rich text editor w/ Lo & Tim

[Music] all right we did it all right hey how's it going it's all good um it was just like the nicest weather we were having a little chat and then suddenly it was lightning and now I don't see anything out of my window anymore it's like intense yes it happens fast in the spring well let's jump into it welcome everyone to pulse for developers um it's Tim and I what a stream is this this is number three right um it's only the third I know um but today we're going to talk about all things Rich Text Editor we'll get into how you set it up we'll get into some Advanced configuration we'll do a couple entries perhaps and then we'll get into the code side and how the the rich teex editor content ends up on a front end yeah that's the fastest way everybody anybody's ever spoken about a rich deex I love that I know it's a it's a complex topic and we get a lot of questions about it so we thought we would do a stream about it exactly because I don't know probably like I because of my role in developer um experience I work a lot with our customers and our partners as well as developers in the community and probably every meeting I have like with a partner or customer the rich text comes up and not in a bad way it's just hey I want to do this can I do it or why does this work that way or don't you have this feature and we're like yes we do but this is just it's a big topic and so yes it is just time for a stream where we just I think we'll just add it to a page we go over all the options we look at our extensibility and then we just look at the code because Rich Text is important for Content editors but it's equally important to developers and if you don't do it right your content editor can destroy your website but also the developer can set up some rules to really make the life of a Content editor completely miserable and so we we need to find our balance between let's not make each other's lives you know miserable but kind of just what is the best way you know to fight our battle here between editors and developers it's always like that right yeah it is it's a it's definitely a push and pull but you want to maximize benefits on both sides because then it helps you know both content editors and developers be able to iterate right and innovate and you can't do that if you're constantly sort of fixing and tweaking this one particular aspect exactly so let's just let me just put my screen there yeah is this zoomed in enough I I hope it is because it's huge with my screen um I think it yeah I think that that's even better yeah let's do it so um I have like I just made like this is a super simple project it's just a page content type with a title and a rich text editor on it nothing else and so when we actually have a look at like our properties here for the Rich Text Editor you can see of course there's all the default stuff that we always talk about you know your unique ID your name you might not want to call it this but for purpose you know it's kind of a lovely open door shall we say yeah um and so usually you would change that to like maybe cont and also just like the unique ID or body or something that is a little bit more readable yes and so the first thing that's different than normal is what you find here so there's this plugin so it's a super extensible system so when you hit this there are a bunch of different plugins that you can actually get from our Marketplace so I for example set up a cloudinary image picker we have an AI assistant to help you write um you can create image um presets for like crops and stuff and you can see this is my own custom app even that I can put in um there's something you can set up with variables but we won't go into that too deep today but it's we will use let's say we'll use cloud energy just show you that you can actually have a lot of extensibility and you yourself can code it as well for your project right and it would make sense that you you know if you have a lot of assets to maintain that you might choose to use an external asset manager exactly you don't have to but you can and so now when you go to advanc now the fund begins you can actually set the minimum and maximum height of this field because if it's like not high enough it's really awkward to edit in right so I just said it I just want it always to be the max which is 600 so even when I open it it has to be big because I feel like I cannot breathe otherwise you know editing and so the editor has a bunch of types and so let's just go to Basics and so when I do that there there's literally nothing you can change here like this is the most out of the box and so this is also how you get it when you normally set it up and um for a lot of people using this this is probably fine yeah however you can also go to Advanced and then you have um all these Basics but you get you get like the basics of basic plus a few other things like you can suddenly insert images and videos and tables and links but also we can now Ed Ed objects as well and so embed objects is anything that's a content type in your system you can actually add it so I only have pages in this project so I can actually reference a page inside my content editor now which is or in my Rich Text Editor which is really handy because you might want to link somewhere let's say a blog post well you don't have to remember the URL you just say Ed is link find the blog post hit go that's pretty nice it is yeah and especially if you're doing something like a knowledge base right like there may be other documentation or pieces of information that you would want to embed here or anything like um other content models like you are embedding this sort of making it making it possible to embed the page but it might be product right maybe you want to embed some products exactly you can and that that's a question we get all the time like hey I'm writing like a behind the scenes of of a certain product and now I want to ref some other products but not like in a in a list but I actually want to have it in my copy well you can use this um and then you might want to go and click on custom and then you can do even more then you can actually completely curate what you want to show to content editors which is actually pretty important and so um lo you spoke about like these headers right like what did you mean with that so in terms of accessibility right and curating an editor experience in general readability and sort of scanning most people who read um sort of blogs or articles or landing pages they are they are scanning the information via the headline and in particular with that um when I'm configuring the rich teex editor I always deselect H1 because there should only ever be one aheading one um on a page and that is really sort of the main it should be the main title main theme of whatever entry you're making it lets people know that within this content I am going to find information about whatever the title tells me um and that's important for screen readers but it's also just generally important for General outlining and readability um and you know additionally SEO like if you have one text Google says no basically no yeah again you're establishing one main theme in which you were talking about through that title exactly and so we have a bunch of other stuff like bold underline and you might want to remove a few things but most of this is actually pretty handy to have like an inline code one or like a video or an asset or if you have a bunch of stuff and so um you know what we'll just select it like this without the header one because that actually makes sense of course you can make it mandatory or nonlocalizable but that's just all content stack stuff right close well let's have a little look at like you see I have two two page types or one page type and two entries off type page so let's just go to the homepage and of course right now I I just put in test but that's it there's nothing always need something right I just want to I have like 40 test pages in my it's how this goes right so there's a few fun things like it is this height of 600 by default now even if it's empty which is kind of nice like we could poten say well let let's change that and say well the default needs to be like 50 if it's empty right let's say I see now it starts just and I can I can make it bigger and it will expand yeah exactly which is pretty cool and so you can also of course always expand and just kind of Go full screen and um as you the people with the Keen Eye probably have seen that I installed a few plugins right so we have our cloudinary here we have our AI assistant here as well and so when I write and and I actually double click on this I can actually say well AI assistant please optimize my text obviously this is kind of test there's not much we can yeah there's not it's like what do you want from me you only wrote test but that is pretty cool right so you could also add your own stuff here which is kind of cool and so let's just go over this like these are all like the normal ones right so let me just start typing something um for example this needs to be of course bold so you get a popup here but you can also of course just go from here right and keyboard everything works and so there's all these other things that you can also turn off if you want we might not want subscript here or whatever right um and then you can also say well maybe uh let's not do this otherwise like if you do this now there's just an empty paragraph and this is can be by choice or we can actually decide in code not to allow for that so we'll look at code later how we can actually control what out of this thing and so here we can just say well there's no header one obviously but we can make it a code snippit if we want or we can make it a header three that's pretty cool right and so this has its default styling here so you can at least see what you're doing in your front end you might change up that styling if you wanted to yeah and then the important thing to remember about headings too is you don't want to choose a heading just because you want a bigger font size right like if you want more variability in your font size that is something that needs to be controlled um Whenever Wherever You output that right exactly and so uh let's see we can make it lists and and you see that was pretty clean right so now it's no longer a heading three when you put it in a list because HTML that that's just not correct HTML and so it kind of just solves that stuff and as far as I know there's also a remove formatting button so let's see if it does that well it doesn't seem to behave maybe I have to select it certainly not well there you go that's rich text editor for you we learn as you go um so and then there's this other like these are the default stuff this is what you have in word and you know you know this yeah default formatting now it gets interesting we can actually just select an image and now of course it's huge but you can just say well let's just make this small and I can even edit some of the properties right so you what you could choose to do which we probably won't tell you you should but what you could do is make it in line so you can have text flowing around it nowadays in modern design we don't see that much so I tend not to do it because it will add the the image into a paragraph So the image becomes an inline object in which text you know can flow around inside the paragraph which we used to do back in the day but not really but you could actually which is pretty cool you can actually just have a different alt text here to another context where you use this image and that is actually where it gets pretty important so you have to do some of that stuff right right and then this you know the distinction with sort of adding as assets to the Rich Text Editor is if it's embedded it will treat it as a reference it's because that's what it is it is you were referencing the image in the assets you know folder or assets area um and that means it will dynamically update versus you doing you just adding the image directly to the RT if you make changes to that asset in the assets pipeline or the asset model um it won't update in the RTE exactly and so that that's interesting to to know and so I just click on video I'm just going to put the live stream to this in here let's see what that looks like so we're like doing oh Inception because we're losing at the same live stream as we're we're literally doing right now there we go oh let's not hit play by the way that I should not have done that okay so the fact is you can just add this stuff right and so uh this is a special social embed that you can do you can make a table but also and now it starts to become pretty interesting let's embed an entry so what I can do now is actually say well the homepage now so let's let add a link to the about page and so I have now chosen to just embed the about page but you can also um create a new one or you can actually link to an entry which is pretty handy but you can also embed an asset as a link this is what you were just is talking about L right and so or you just do a normal URL and so you can see if I hit edit here they actually wants to go to the about page to now start editing which is pretty nifty um how about now let's just add a cloudinary image as well so later on in the code I can show you how that actually works so the other ones are um kind of oh that was a little error there and how I set it up but those are super um comp let's not go there now because we have a lot to go over still so this is my personal cloud andary so let's just select you know what let's do a toad back with a corgi on it with a hat on yes because why who doesn't love corgis look at this and I'm just GNA make it a little smaller and you can see in this one we can also do some editing here and also I personally don't want it to be like an inline one so so what we've done now let's see oh you know what let's keep this thing here so what we have is a title with a bit of like um you know italic bold an image from our own Library we have an embedded page from an entry reference then there's an empty line and then there's an image from cloud andary well let's just hit publish and see how this actually looks on my page oh there we go there go excellent of course I created like a local host quick code thing that queries that homepage entry and then does something with it which obviously is what we're seeing seeing here so let's have a look and what this HTML actually looks like and so this header one is coded in my front end code this does not come out of the rich text and we tend to want to do that because header ones are so important for SEO and Page structure we don't want to be touching that too much so I coded that myself yeah then here is our div and there's a pre here that's empty now I'll show you why after this when we start to do code we'll show you what comes out of the um the Rich Text Editor and how you make that into HTML because actually that it doesn't output the HTML that you put in it outputs Json and that might make it complex but also super fun because suddenly you have all this ability of stuff that you can do in your front end anyways so yeah that's what makes like Json makes it essentially more and more f ible in terms of what you can do when you just complex but it yeah but ultimately gives you more it's a complex and strict structure that allows you the freedom to do just about anything on a front end exactly and so what you see here now is already going through that that Json goes to my code and I do something with it and now we have HTML we can also choose not to do anything with it and then it just outputs default HTML from the package that we use so what you see here now now this paragraph actually has its you know emphasis which is italic and strong which is bold then we have our image with a bunch of parameters like this is the alt Tech that we set right I just typed something random yeah don't do that folks no in real life please don't just please don't however you can also see loading width and height sizes and a class name and a fetch priority I added that myself because I find that is important um so later on I'll show you in code how that actually works well then we have our header three then we have our empty line um which is not really something we want but we can show later how to clean it up potentially and then um here we have our cloudinary image which actually has its URL as you can see this is a cloud Ander URL here and it's just embedded and it doesn't have an ALT because I don't think we added it let's say no we didn't um it the this is where it gets interesting like I can actually just type an ALT here and get the alt from here but if cloudinary has an ALT specified in the cloudinary dam in the code you can get that and apply it so let's have a look later if I actually did that and if not we can still add it um and that's it and so this was a relatively simple one obviously um but if you look at for example the content stack documentation website is is all this is in there as well you know what how about we add like some we can actually in this empty one do some code block or something yeah let's do a code block of course this now won't be a code block let's see what it let's see what it outputs now so if I just type HTML oh it I don't think it like oh it strips it out I might have to refresh this was a Quirk we saw the other day oh there we go it did save it okay so so oh that's very interesting it is does it wow it actually renders the header one as an header wow maybe we should show this was fully unexpected I thought it would just write me a string yeah that's what I assume too interesting okay so well let let's just make it a go block before you know let's make it inline goat let's see what it does now I fully did not expect it would just add me neither okay let's refresh and so okay so it didn't basically very interesting okay I'm going to have a look at maybe I shouldn't have done a header one maybe I should just do some yeah something like this and it's inline code right you see this is why why does it Let me refresh okay there it is okay so now it didn't actually make that JavaScript and it now said span data type inline code well right I think we would might we might want to have that as a like a code tag right or maybe even PR tag so what we do later on is also have a look at like how we can solve that um because well we can do something with this later on um with our CSS or whatever but it's kind of nicer if this actually becomes a code tag because it is what it it's exactly what right and this is like uh possibly if you know that this is going to be a regular occurrence you would want to control from that from like a creating a function to control that for instance yeah yeah exactly so we could do normal text oh didn't I say that this has to be normal text and not inline code okay and now we do this as inline code let's see what it what it shows now this popup go way so if I select something okay uh oh code snippet is it's not what we need here I think we need inline code yeah I forgot it selection inline the code creates like a block yeah exactly all right let's have a look what it what it did now okay so we have the paragraph okay there's our span with inine code so this we probably want to have like a code block right so later on we can do that one and let's add like an empty paragraph so we can also solve that one in the code later on yeah which by the way um here we go this is inspect in Google Chrome browser but most modern browsers now have an inspect feature um and it's really great for debugging and looking at things like this especially because this shows you the generated code because you can also do this and basically see just the normal like few Source but that's a little challenging to look at you can see oh you can actually see that it's there right in the paragraph because we're doing servers at rendering now so it this will just be the same as whatever we see in here but if we had some fancy JavaScript that would change the Dom this one shows that generated one as well which is super handy um all right so we have a look at the code now for how this all works yes maybe get into it good way to start is just saying this um Json or we call it also the Json Rich Text Editor for a reason it outputs a Json structure that represent HTML and then you can hook into all these structures to say this is what I want the HTML to look like and if you don't push into it or when you don't hook into it the package from content stack will just create the HTML that it thinks is great for example this empty paragraph because you wanted empty space right well maybe an empty paragraph does give you empty space so maybe that's what you want it so this is the default here that makes sense I personally don't want it so now I can make code for a P tag that if there's no content you're not gonna render it for example all right so before I show all that I'm just going to turn it off so now this is what it looks like when it turned off this is actually what's coming out of our Rich Text um y element and you can see it's the type of a document and it has children inside and so all these elements are children and each child has like um it's it's like an object like it's an array of children and so there's a text this is a space and then there's another object that says well the text is Rich but it has to be italic yeah the attributes exactly and then there's a space with nothing and then text editor has to be bold well that's exactly adjacent representation of this thing right so we have this is a rich text editor you know italic and then text editor is Boldt and then the rest is normal that's exactly this is just a little language to say do with this what you will render some HTML with it if you want and of course content stack has an npm package in its as a pack package on its own but it also that package is also loaded in our delivery SDK so you can just grab it and work with it right interesting sorry go on low I was just gonna say um also if you want to see your Json output you can install the developer tools from Marketplace and it will show you the Json of all fields in your in your injury exactly um we let's let's crack on with this for a sec but later on we might be able to we might exactly and so the interesting bit here is that we actually as contents like created this package to Standalone as well so if you have HTML and you want to have this HTML let's say it's on WordPress or something and you want to move it into content stack this package also does HTML to Json and then your Rich Text field can just be filled with that Json from your old HTML right which is pretty nifty um we can also do it with markdown if you want to but that's a little deep for now we're talking about the basics but so it's really quite flexible so then the next element if we have a look is actually our image and so it actually says it's a type of reference refence because an image lives as a separated element somewhere that you connect to your page so we have now connected this uh you know this asset which is here this asset has now been connected to this entry in the r text so that's why this is a reference and you can actually see there's like a uid and the URL the title all the things we might need even with the styling applied that we actually well we this is that styling that's applied right yeah it remembers that and it seems it can seem sort of convoluted or complex about why images um embedded assets why why would that be a reference why isn't it just in there but it makes sense if you know and you want to go in and you change that original image in the assets right it will update everywhere and that's what you want if you go now here and you actually say well can I just know replace this thing with something else that will then also be reflected inside your wrist text which is oh that's super handy that's what you want because data is a graph okay but that's too deep for now but yeah let's not get into thetical right now the image reference doesn't have text or children but so it just says it's nothing so then the our next reference is actually that page right so we selected the about page the about page yeah and so that's another reference in the type of block and it's an entry which is our about page entry which is this one and um it has a bunch of like little CSS classes that it gives it by default that we might not use but the most important part is entry uid as you can see there's no title or descriptor or anything in here yet there is like the the moment we morph this into HTML through whatever functions we have it actually queries it for you and gives you that based on the fact that you say in your you know query include my embedded items please the moment we use J into HTML to make HTML happen and you have this it will query it for you so that's super handy right and that's all from the utils SDK right exactly yeah we'll show you in a sec um then our next part part what is our next part oh this is the about page let me just go to the homepage again um so then we have normal text with our inline code and normal text and then another cloudinary image so normal text and then there's the text in alert one and it says inline code is true so that's exactly that bit and then here is the cloudinary one oh that's fun this is actually that empti paragraph that there's just a nothing so um and then there's cloud AR and so this is the type Cloud inary because it's an installed Marketplace app so it's not type reference or type Block it's type cloud inary and all these attributes that are in here are given by the cloudinary integration so you get it URLs width and height you can do all the kind of fun stuff that you would normally do with Cloud andary we also have this for binder for example there's a bunch of different ones here um I actually have a config label in there from and this but this is actually cloudinary metadata you're getting a bunch of fun stuff here does it when you embed like a external image like from cloudinary or somewhere else does it bring the image over in the original size that you put it in there like just originally Without You controlling for or transform you can choose that of course like this is I think the original from cloudinary itself but there's also this thing this extra little style thing that comes out of content stack okay so I actually when I maybe change this up let's see what comes out of content stack or even maybe I might have actually had to wait is there anything here I should type no okay well let's just do our own alt let's see what's coming back from um from content here okay so you see our own Alt is added now and the maximum 128 pixels so you get this from content stack but the orig oh this is interesting the attributes coming from cloudinary are actually also updated somehow I did not expect interesting so it transforms on because this public ID also kind of looks different than than I would consider it normally to be so I think content stack is adding a little bit of additional data and juice on top of whatever they yes which is fine but we can be you know opinionated because you don't really have to use these because as you know when we just go to the cloudinary image here this URL of it is just its original you see that's huge yeah so what you should probably use this for is say hey now I know my ratio so I know it's a square and based on that you can do whatever you want right all right enough talking let's let's have a look at whatever that code looks like so now let's go back to this and now suddenly oh you see it actually rendered it like super small that's interesting let's make it bigger again the fact that it's that like responsive to it it's pretty cool because I think too because it sets the exact height and width and then you also give it a Max width so it's never going to go past and so we can change that in code so let's first look at what I've what I've done now in this code and then we just add some other stuff just for fun so let's go for it essentially what you do is you query your page and so in my page HTML here I just have get page please for this uid which is this uid so I just query that and then I get page and then I just show the HTML like this because what I get back now it has HTML and so um dangerously set in HTML way well there is another way but that's too deep for this stream yeah let's not get into it what you could potentially do is that Json that we just looked at you can par that in react and then for all the things that you encounter you just make a react component and render it like that you can of course also do that but this now actually just returns an HTML string that you can just embed like this so what we have is you just query the thing of course we talked about the include embedded it items because you know it's nice to be able to fetch that stuff and then if there's a result that comes back we can actually use our utility functions for Json to HTML and you just give it that entry and so in this case I called this result I could also just called this the entry that I got back and then got to change it every whatever yeah so I just call it result and so but it needs an entry point and I've used some um script here you don't have to I just did it and then so the path is content what this means is this is the the the the name of the field inside your schema so if you have two Rich Text Fields it could also [Music] be number two right so now if I had two Rich Text fields in here it would do everything for both so that's pretty nifty as well yeah so um you can just tell it hey which R text field you do want to do something with and then you have this render option and so this is essentially this Loops over that or this function Loops over that Json and then it says you can now overwrite what I do for a link or you can overwrite what I do for a cloudinary image I don't think I've ever asked you this Tim but how do you feel like always setting um like your a tag or your link tag as uh Target blank like meaning it always opens in a new tab are you for or again it against but everybody's different I'm one of those people that I want to decide what I do with my personal tabs and I never have browsers with lots of tabs open then there are other people that have 16,000 tabs open and are F you mean me I didn't say anything as long as your computer has enough memory like I'm one of those people that when there's like a notification I have to clear it you know one of those yeah so if I tap if I read want to open a tab to remember it and do something with I will and then close it so no target blank for me unless I just click like third Mouse button and then it opens in a new tab but I see yeah if you wanted in your website that everything always opens in a new tab you would do this yep blank and now every link from your Rich Text will always open in a new tab so you have that control yeah and so I did this because I wanted this one for Google uh yes that's why I added this but if you potentially have something like nextjs and you want to make this a next link so it can actually prefetch stuff that you might want to link to you can make this a next link here yeah you can really choose what you do with that stuff and so you get the note and then you get the next is like a function because it just now Loops over all the children because potentially there might be more children in this a tag of course you don't want that because it's an a it's in line but it could be possible so that's why you use that function right and so if it encounters another Link in here it just renders this again that's what that next is so it just Loops over the children to do the same render option so my next one here is like you can have Block Level and inline level elements inside your R text and so in our case that page reference that we have to the about page is a block level one and here I just get the entry and so I even console log it so we can actually have a look there if you want yes let's look at the console that's this and so I'm actually getting my title about page and its uid but when we looked at that Json before you didn't get that like title and all these other things like the publish details and whatever because um or or even it's children like you wouldn't get this uh content um because that only works if you fire this thing off so if we don't don't do this it becomes Jason again right and then it's only like this is your or this is the image so this is our reference and you only get the entry ID that's it right it doesn't dreference it so you don't get all of it doesn't basically it does nothing it just says this is the thing you referenced and then the moment you you use this function it actually in the background queries it for you and you get all this information and funnily enough this content field in our about page is also Rich text right and so that Json that we were just looking at for the homepage I have it here for the about page and so I could even run that same functionality again to just render this whole about page with its Rich text right here but I chose to only just do the header you just wanted the title for now yeah that's it sorry the title yeah so a header three but I could potentially now do other stuff here with whatever is in that entry like if it has an image at that you can show that here so then we have cloud andera and so let's just have a look at what we well we just saw the Json for cloud lary right and so I'm just grabbing whatever in these attributes is width and height it's URL and it's alt and that's showing and of course you can do all the fun cloudinary stuff here with the source if you wanted to right you can add like the quality or the file type settings or any fancy stuff cloudinary gives you you can do that here and if you set it up slightly differently than this you can also use like the react cloudinary component that you might have installed and do whatever you want with it you just give it the attributes yeah basically any attributes that you can change in Cloud andur you can pull that down on your with yeah and so then the last one I did is for display which is actually either an embedded item or an entry node and so here I showed you like this one is slightly more complex just to show you right so for a display which is just the normal image in content stack that's this one I have a little function that says create inline article image okay sure so what does that do so I give it the asset in the metadata and so I create like my base URL and that can come from different places so I kind of just figured out if I have this one sure let's grab that otherwise it might be from other stuff and so this is just because data can look slightly different and so then I created so I click the link to the image and I add a bunch of stuff here because content has all these formatting options to like let's make it an aif with quality 90 and don't UPS skill please but make it 800 by 450 like you can choose that in content stack and so I just you know what like for all my images in my rich text I want this right so I kind of just hardcode that add the link and then make my own image tag for it like the thing is I don't have to do this right like if I don't it will still render the image but then whatever comes out of the mpm package which is slightly different but not too much so as you can see let me just make it slightly like this one has an alt and a source that's it well mine we actually look at it I do a bunch more loading lazy sizes a class fetch priority so now you see I just refreshed and now I have all the things that I wanted to have so you can completely choose how you render this stuff right and it makes sense because um sometimes you use images for different purposes right so you would want to control the size like let's say that you wanted more of a hero image and you had a defined sort of component to do that with you would control the sides of that versus oh this is just an image that accompanies you know a paragraph that I wrote exactly that and so um let's have a look at well didn't we add like an empty IM empty paragraph maybe we can I think so was it in the about page or the homepage no well let's oh it it doesn't seem like we have it so let's add some of that let's say so I can just grab some code I have in another project to quickly steal and okay so now you can see there's a bunch of empty paragraphs and I personally don't like having these because it's kind of like hey they have a margin for if they're Stacks I can of added a margin and so you see there's like these weird empty lines but margin without content in it sometimes doesn't work as you can see this this one is much bigger than this so let's remove those so I have another function here somewhere that I coded recently in my render option for paragraph so let me just well we're not going to grab everything but we start small let's start small so for paragraphs let's remove this stuff I think it should probably be this I'm just adapting from whatever I had yeah so for every paragraph that I find I have node and next right if my children my first child inside this paragraph is nothing just return nothing and otherwise return the paragraph itself with whatever children are inside children yeah um let's have a look what that looks like now so now you see there's just a paragraph with the D inside and the other ones are gone because they were empty so if I remove this um they're all back now and so if there are children it renders that into P but I can also just say we can just do some fun stuff here whatever I can if I have some fancy stuff I want with my P tag you know I can add that as you can see but if now it adds all of them because also the empty ones so I can just say you know what I don't want these empty ones right and so now if you know this you can clean up a bunch of stuff right and this is the kind of thing that really sort of improves editor experience right like it seems small but it's really like if you have empty P tags that can be very frustrating when you're entering content and then if you know that that you want that to be stripped out you can do it sort of globally so it just doesn't happen this is just cleanup but there's there's also this other one where sometimes when you're editing something and you do something maybe like this and you do like what all these developers always do right when you add this then this needs to become a code block right so now we have two ways of doing a code block so we have this one but we also actually have an in line here so let's publish this and make let's make both of those a code block because this is what I was facing when I oh sometimes it loses this uh it loses itself so I have to refresh and then probably oh we're back now there so when I ported all my articles from my old website to my new one in content stack I had this all over the place so it's like okay so this is a weird artifact of something I did in the past can we now make this something that works and so let's first have a look at how we do that inline one and I also I think in this utils one I actually have this somewhere you see there's this code thing and so um let's see if well I wonder if this one is doing the inline code one or not it might actually not this might code blocks yeah because you have you have code blocks a block level and inline level right let's let's just add it and see what this does let's see yeah let's see what happens um I don't think this will do it no it's not likely I think this is more for like okay so this is not for the inline code this is for like the code block so what we can potentially do is well why don't we just no you know we just well let's grab this and say okay I want a code snippet with this in it let's see if it does it now let's publish here we go let's have a look at what this is and you see precode so it did it so this was actually a code in a block level so it it found okay I have a block level code let me just add a pre and a code and so what happens if I don't do this my on my own what what does content Stacks okay so it's the normal package just renders code code and I wanted to pre around it right and so it doesn't look that much different now but imagine that oh it actually has a double one that's very interesting H it might just that might just be my my stuff going on here the thing is the fact that if you have the opportunity to change this if you have syntax highlighting on your blog for example this is where you inject that here you can add like a JavaScript function that does syntax highlighting for you you put it on and then now all your code blocks have syntax highlighting but in here you don't need to know any of that it just works right and so those are pretty interesting things and so maybe um well time is flying we only have 15 minutes yeah should we have a look if we have like this some weird custom thing we can solve that one as well yeah let's do it you want to handle the back ticks yeah so let's handle the back ticks because let's say you have some sort of historical thing that you moved over and you kind of want to clean that up well let's do that here and I also have that in my because this is the code for my personal side you can see there's a bunch of additional things that I do and so here I have this function replace back ticks in object because in this paragraph potentially there could be 20 of those with the back ticks right and so we kind of need to find all the places where there are big this back ticks and add like a code block instead and so well let's first just grab this and put it in here well now it's going to just bork and not work because I don't have these functions but we're just going to copy paste them and so this function is a little intense so we won't go too deep but what this does it Loops over all the potential children this age HTML Dom node can have and it finds if it's an object I'm just going to Loop over it and if I find it it becomes a string so I'm just going deeper deeper deeper oh now it's a string let's see if there's back ticks yes or no and if so then there's another function it fires and it fires itself all the time until it finds oh now it's a line instead of an array with four lines of children right if you know react children is very normal but in this case um let let's just not go to and then you're just having that string go into directly into a P tag right uh yes exactly and so then once it becomes a line then there's this replace back ticks with code Texs so that's yet another function which is very simple right it just finds all the back ticks in that string globally and replaces with code and so even though this looks quite daunting this is a relatively simple example of it and you see there's normal text now it's code normal text and so in this paragraph it just replaced those two back ticks with code yep and now I have kind of solved that because in my CSS I can just do some fun stuff for code like well we can do that maybe we can say let's see well that worked for one second and then it stopped working working oh no oh that might not be uh interesting no it's you know what we just do color yeah I was like this this little example I have has has um DWI four so it might just be like okay I don't like that um there you go so I just went back to normal CSS and it works and so essentially now I can just do whatever I want with that code and so if we have like additional ones that actually have these back dicks um let's see what this does now interestingly that did not work because this oh this is so much okaycome toex editing it just saw oh and it also I published and it just gone Let me refresh it just saw I used to and it made it online code block for me by defaut but on this one it didn't and so this is sometimes when you're dealing with with Rich Text a little bit it's like it's super smart but in this time in this case I didn't want it to be smart but it did and so um what we might have to figure out is like okay so now this one had made a code block with my own fancy code right but then this one is now this span data type inline code again the thing that we saw before and so what we might need to do is actually go back here and say you know what we have block right but we can also go for inline and then we just need to figure out so not page here not AI stop it we just have to go to the docs consult the docks folks here we go um I think this one we'll just open both so we also have it on npm with like some fallback documentation here but I think oh yeah so this one goes slightly deeper because this is the package on its own where you can also say oh I want to go from HTML to Jason as well all that blah blah we don't have to go there but we can go here is this it let's say this doesn't give me too much maybe here oh it goes here directly directly to the package um let me have a look because I I recently found um a really good doc that actually showed me like a bunch of options as well uh that you could just cut and paste the snippet or copy and paste the snippet yeah I'm not sure I can find it now oh wait here maybe here I wish I just had this like I could just um okay so this is not so this this seems like more users that use it wait um yeah and maybe this is it or were we just here I think we were just there right Groundhog Day yeah this one I think nope there promise and now it just gives me the benefits okay you know what for now it is fine what this thing well what we should find is it's probably something like something like inline code or something but yeah it's let's maybe we should not be guessing this but documentation is sometimes hard to find well you know what maybe this is it oh it's it's starting to work now like because of course I don't think it knows what this is yeah not compatible yeah it just doesn't know what inline code is um would co-pilot be able to find out I don't know I don't trust it it just does in line no no this is definitely not yeah so it could just be code because it's code that's in line it also is not happy with that anyways um You probably get the gist of how you could make that happen right this is um so you have lots of these options to do stuff with and so we're we're nearing the end here of our stream and I think one of the things I'll just add really quickly before we jump off is like setting up these render options sort of in this way right like doing it programmatically also helps editors be able to actually live preview or visual build this right like so if you control these render options um you can really s of help editors in terms of previewing it beforehand they don't even have to go in the browser they can see it right there inside of the CMS oh Ramina says hi hi Rina are yeah so Romina this is the moment we were actually looking at the dog so we couldn't find what we were looking for we might need your help anyway so Romina is an incredible dogs writer um what I still wanted to say is like I didn't build that into my little app now but all this also works with visual preview and visual Builder y right so if you wanted to edit your um your Rich Text in the CMS you can directly see that update in your front end code as well which is very interesting and I just didn't set it up for this one but that's that's trivial to do and so then you can even see how the CSS looks on your own website when you start editing stuff and um I think that's about it we spoke 55 minutes about rich text about that yes and we could talk several hours more because Rich Text editors are very complex yeah very few of them work the same and this one actually works pretty well because the Jason that comes out is super stable it's always the same we we always know how it works which makes this super cool and um if I had found that docs page we would have relatively easily actually put in that little code thing that we were just talking about um maybe my next project will be to build a whole page just with Rich Text no other stuff just to see if it can put it off I probably can yeah well yes but also still have a title field maybe have okay sure if you want to you know how I am like you always always have a title field um all right so thanks for watching everyone um do we have a little Banner for our Discord we do do how about that um so we have a Discord Community please join it we're doing lots of activities we do live stream we do open Office hours we have some fun things coming up like a raffle all sorts of stuff and we're doing lots more programming but again you can go to community. content stack.com and the Discord invite is there and then you can join the community we'll be in there you can talk to us you can talk to other folks from content stack and other fellow um content stack users so join the community all our um tech people are in there so any question you have we will likely be able to find an answer and so this is like one of those safe spaces any question goes this also this stream felt like a safe space because had a few frustrations and who cares we work together yeah we learn together right that's the best way all right um cheers everyone uh see you soon all right bye take care this is the