How to Use ActionText in Rails 6

[Music] we're diving into a new series on action text this is a new feature of rail six that allows you to render and save rich content in your rails apps but there's also a lot more to it so the way that this normally works is you create a WYSIWYG editor and you make things bold and add links and you just save that HTML to your database and then you rerender it out and sanitize that well action text actually is more of the back-end processing for the HTML so what you can do is you can actually upload attachments with your action text stuff and it will go ahead and process the HTML look for all the attachments and then minify them and save references to those attachments in the database then when you render out your action text rich text and will go and look for each of those attachments query the database and find your images your user mentions your other files that you might have added or other kinds of attachments and then it will render that out so you always get the latest version of that so for example if you did a user mentioned you might have a situation where users avatar changed in the old style of doing things you would always get their old avatar in the new way with action text you actually get the users current avatar because it's always processing the HTML when it renders it and when it's saving to the database so this is a really awesome feature but it's not heavily documented yet so I am hoping to cover that as best I can in this series so this video we're gonna go dive into setting up action text and getting the basic functionality working with active storage so we get file uploads and all of that now the front end for all this is tricks this is the JavaScript WYSIWYG that Basecamp created it generates HTML like you said and this is automatically set up to hook in with the active storage JavaScript and rails endpoints so we can just simply drag and drop images on to tricks and voila we'll upload the rails active storage and then be rendered out whenever you want to render that so let's dive in and set up active storage and action text and our rails app so first things first we're going to create a new rails 6 application it's currently beta 2 and release key maybe at one should come out very shortly and this is something that might be able to work on rails 5.2 but you might also run into some issues you're gonna for sure need to be using web Packer for your JavaScript for this so keep that in mind if you try to use rails 5.2 for this so we're going to create let's just call our app mentions we're gonna use the jump start template for this this is going to make sure web Packer is installed and just have our basic set up so we're going to take afterwards we're gonna take a step to install stimulus because we're gonna use stimulus to build out our app mention JavaScript functionality and we're going to be using serbs tribute j/s library to actually build out our autocomplete drop-down functionality for the user names so that's going to take care of listening for the @ symbol or maybe a hashtag symbol or whatever you might want to use it's going to look for that then go and fetch a request to find users to put in our autocomplete drop-down and then we can style that and then when we select one of those we go and tell tricks to go and create an attachment for that user so we're gonna have to set this up in a way that's compatible with action text because it expects a few different things but it's very cool and very easy to setup once you get your head wrapped around how all of this works so first things first we need to go into our mentions directory here and we want to run rails web Packer calling install pullin stimulus we're gonna write a stimulus controller for our app mentions to integrate with that then we're going to run to install scripts one good install activex storage if you haven't done that already in your app and one to install action text so we can run rails active underscore storage : install that we'll go ahead and create a migration for us and install activex storage then we'll do the exact same thing for action text and that will go ahead and install it as well so once we have both of these installed we can run rails DB migrate to go ahead and migrate our database with our new models this is going to create a table for active storage and a table for action text and so our models don't need to contain the content anymore those are actually stored in separate tables so now that we have those two set up let's go and create a scaffold for some sort of model we can test this with so let's go ahead and make a scaffold for say a post and we'll allow you to define a body for the post but we don't need to call them for this anymore because it's actually going to be stored in the action text rich text table for us so we're just going to create a post with a title by itself we can run rails DB migrate to create that and then inside of our post model so we can go to models post RB we can has rich text body in order to tell that model that it means the action text functionality for it so then our post controller we can do the same thing as you would expect we can now permit that body to be sent over and that will be a loud as a parameter and then we can go to post form and go edit our form for this and we basically need to grab a section like this we'll do the body and we'll have a rich text area so instead of doing a regular text area for a text column you want to do a rich text area and we're using the sort of virtual attribute for the body because it's actually associated to the action text table so with that done we can go and run our rails app so let's open up that in the browser will go to localhost 3000 and once a rails server started up we can go to localhost 3000 slash posts and take a look at that so this should get us the basic action text setup so we have file uploading and we can render out that automatically so we'll go test this out and see how it goes so now we can go to add new post and we'll see that trick sort of rendered here but it didn't quite work correctly and the reason for that is because we are importing or we need to import the action text CSS in our asset so we're going to go to app assets stylesheets and we're going to go to application scss and rather than doing an at important we want to go up to the top and use one of those special comments and we'll say require action text that's going to load this action text s CSS file which will load up tricks of CSS and then define a little bit of custom CSS for the attachment galleries so if you upload multiple files at once you can be put in a gallery and that comes with action text so now if we refresh this page we'll get the new CSS for this and we get icons for everything so here we can say let's bold STF let's make italic and bold we can strike out there's all kinds of things you can do with this so if you say create post we now need to render that out in our show and so if we go to post show we can come down here at the bottom let's just copy this and we'll say body is post body and this will call the helpers from action text automatically and render this out as HTML on to your page you can click Edit and it's going to be reread nerd in Trix with HTML as well so this is kind of where we're going to hook in with all the app mentions in just a minute but let's also while we're here test file uploading so if you drag and drop a file onto here there's a little bit of bootstrap CSS messing up this as it's not expanding vertically but if we update our post you'll see that we have our image here and it's been created now it's not currently working because it uses image magic behind the scenes to go and process our image so one additional thing you need to add to your gem file is the image processing gem so the active storage can resize images it expects you to be able to do that so go ahead and uncomment that line or add image processing to your gem file if you need to do that run bundle to install it and restart your server so now for you refresh this page once the server's restarted we'll be able to see that image again and everything works as we expect it to so the last thing we need to do here is actually just adjust the bootstrap styling for this form now because the original input that we have is actually being replaced with the trix editor so the height calculation CSS that they use is not needed anymore and we can reset that height to automatic so what we'll do is we'll just go into action text CSS and we'll say tricks editor and we can inside of here say ampersand dot form control and we'll just say hi Auto and if we save that that should do the trick so basically we're just saying whenever there is a tricks editor tag on the page and it has the class of form control then we want to remove that height setting so that takes care of it for us and does everything that we want one other thing I'm going to do here is we're gonna correct this image not being in the center it kind of expects it to be in the center with the default trick CSS and so it being left aligned here with the image is kind of off so what I'm going to do is just paste in a little bit of CSS to make that work so this is just going to make sure that the attachment previews are full width and their text aligned to the center so those images displayed in the center and that is because we have an attachment being in line block position relative max width of 100 and zero padding and margin so that's going to take care of that for us and give us something that works a lot more consistently like the Trix example that you see on their website so this is action text basic so we have everything set up now so that we can go and add attachments save them we can render those out and display them and everything works as you would expect it to so this is all connected but now we need to go and build custom attachments so every time that you have something that works is like a block inside of Trix it's considered an attachment and that's what we're going to do with our user mentions wherever we want to display the avatar and the users name all in the in the rich text area so we will cover that in part two and I'll see you guys in the next episode [Music]

Channel: GoRails

Views: 13,080

Rating: 5 out of 5

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, Screencast, Tutorial, ActionText, Rails 6, Rails ActionText, How to use actiontext, Action text, Rails 6 Action Text

Id: 5V7wcDdK9sM

Length: 12min 8sec (728 seconds)

Published: Thu Mar 07 2019