Alpha preview: Action Text for Rails 6

hey this is David hi Mary Hansen I am here today to show you action text a brand new framework we're building for rails 6 this is an early alpha preview I've basically just made repository and working on public so this isn't something you necessarily you're going to use in your main app tomorrow but if you're interested then you certainly can start using it and I'd actually encourage people to do so because that's the way we're going to build it up and make this framework something that is totally solid by the time we release rails 6 to everyone this is pretty much the same process we followed with active storage that went into rails 5 - we built the extraction from Basecamp into a private repository and when that was just in a very rough state we moved it over to a public repository which we then iterated on for a couple of months and once we felt that that was in a good condition in the good shape we turned it into a pull request for the rails rails repo which then ended up making it out into the final release so that's the process for action text but if are you asking what is action text well that is a good question action text is a rich text framework for rails which makes it easy to display edit and create rich text in rails applications it uses the tricks rich editor that we've been working on for many years now at Basecamp we use it to drive virtually every text area in the Basecamp three application tricks just hit version 107 and Sam have been doing an absolutely phenomenal job on that and it's really a pleasure to be able to bundle that wonderful editor up into an incredibly easy to use framework for rails applications something where everything will just work straight out of the box including file previews file image galleries all the delicious features we have in Trix are simply there for very easy you in rails now I'm going to show you how to use action text as a standalone framework in a rails master that is the git version of rails application I'm creating here from scratch once we release rails 6 the intention is to include action text in the box so there will be even less setup work than the very minimal set of work I'm going to show you today but let's get started so I'm going to start the demonstration today by creating a sample app block this sample app is going to be generated from the git version of rails that is of course the latest and greatest and that version changes every day so if you are trying to recreate what I'm doing here things might have changed in the future as I'm generating the app I'm also going to generate it as an edge app that's the - - edge you see on the command line that simply just tells rails that we want to use the good version of rails itself and I also want to be used a good version of web Packer the JavaScript bundler that we're going to use to include tricks a JavaScript library Internet application - here we go so this is simply just a standard rails skeleton if you haven't worked with it yet you'll see that there's a new step here that is the web Packer install which just sets up web Packer and does a yarn setup for all the dependencies that we need most importantly we're of course going to need the tricks framework and we're gonna get to that in just a second so we have our new blog here and the first thing I'm going to do is I'm going to add our action text framework and include that in here so that is a gem called action text it currently resides on get up as rails action text and because we have this sort of naming convention the action text and the action anything the activating is in a single word we have to kind of do a little dance here on the require when this is included in rail six of course we won't have to do that we're also going to include our image processing gem that allows active storage our back-end for all the uploads for tricks editor to do transformations on it to the previews now we have those things let's let's bundle and include them in after we bundle this stuff in we're going to run and install our command again this is stuff that won't be necessary in once action text that's included in rails six but for now it is so we have the action text install which will basically just give us a few assets it will install a couple of migrations and it will also make sure that we have setup active storage which it's its own set of migrations so as you can see it did all that it added tricks to the bundle that we're using tricks from one over lease that we talked about earlier and then action text is currently not on NPM it is just a git repository included in any case let's just migrate our database since then we get those two migration run and you'll see that that created just a couple of tables we can actually have a quick look at them here and see what they look like for action text see an action text it's basically a record that allows us to say where it belongs to what the body of that text is going to be and the record that it's associated with but we're kind of getting ahead of ourselves a little bit let's create just the basics of that blog we're going to use which will be a scaffold we use a generator for a scaffold I'm going to call that post it's going to have just a title now look it's not going to have a content because that content is what we're going to add with the action text so let's run this and let's again run the migration because we of course added a post table here for back in this model that we have and then let's let's run our server and just start that up and have a have a look as you can see yay we're on Rails version six alpha and if we go to slash posts we have the standard scaffolding UI that you would see for anything now one interesting part here we saw web Packer said it was compiling so it compiled everything that we had in the in the pack into a single asset that can be downloaded and of course included in that pack now is tricks that was added as part of the the on install now actually look at this it's just as the title what we were interested in is having posts that have rich content so let's start by amending our post model to say has rich text content so this is the new class method that you get when you have action text installed and that will make an association to a new rich text record under the name of content which means that you could have multiple rich text of course per model they would be differentiated and that isn't saved in relation to this post so we're keeping all the rich text content away from the main tables that you're using for your models that has some neat benefits that you keep your models smaller usually if you have a text field for a as a column as part of that table that table is going to be pretty large we found that it's actually better to split those heavy elements out and keep the model tables smaller they're going to be faster the index is everything just gets easier you can even take this and move it to a to a separate database and keep your main database smaller now that's kind of off on a rail here continue to add what we need for this rich text content to be included in the post the first thing we're going to do is we're going to mint amend the post controller to accept that there's going to be a content attribute as well then let's add it to the form we're going to use for this post and this is a rich text area you see it's basically the same as a text area just say rich text area instead and you're gonna get all the magic and we're also going to show that on the display of the individual post here so we have posts and we simply output content now that's pretty much it let's go back to our application and see what happens if we post something new here you see the editor appears right away it's already styled we shipped with styling in the box you can of course overwrite those Styles if you want your order to look differently but this is our first test this field is Auto expanding which is kind of neat and of course it has all the formatting that you get from the Trix text editor this is going to the italics shameless self-promotion yes and then let's see what we could drop in here as a as an image goes right here oh look at dad that is my new book that just got released yesterday I wrote with Jason this is the moment of shameless self-promotion you see it this image of course is relatively large it'll just fill the width of the feel and scale to hide approp of me we have caption editing in in tricks so that's pretty neat and then we also have image galleries which is which is kind of cool what you'll see behind me here is that there's a bunch of going on and what's going on is that the tricks editor when we dropped this file in created a blob using active storage and created a preview that it can display inside the editor as well all this stuff is just happening in the background it's all pre-configured so whatever your active storage is configured to use whether you're storing that on AWS or GCS or sure records you have it this is just going to work we're building on top of the frameworks that we have already action text builds on top of active record to be able to provide the integration to your existing model it's very easily just with the has rich text class method and then it builds on top of active storage to give you just all this drag-and-drop image galleries all the good stuff that you can see here in the editor just by default let me show you these image galleries which was something we just added to tricks editor fairly recently and it's pretty neat it'll basically just align the images side by side it wraps really nicely it'll do three wide if you drop in five holders three and two it's a pretty neat addition and all the HTML that's being generated by tricks for this when we then save it we have an entire framework behind it that does all the processing you see that processing then filtered out here asked the final rendered piece of HTML with caption as we had with the image gallery it is what you see is what you get editing so you're going to get what you edited and we keep the styles in sync between the tricks editor and the display of it again you can change any of them as you please and all this stuff is just going on at the background where we're using active storage to deal with the uploads deal with the file previews it's building on top of that and we're just going one step further up the chain here with action text and building on already relatively high level frameworks as active storages that already included active records and I think that this is just an exciting new chapter for rails that we're getting an ambition level to go ever higher up the stack and get ever closer to the end things we want to do with the framework without dictating what things need to look like you can style everything in this tricks editor you can get your own tool bar you can change how the toolbar works you can cut down on the number of formatting options or whatever you want to offer in your application but the plumbing is there and that's a that's a pretty exciting step to be in action text itself as I said there's not that much to it the bulk of the work in this is the is the tricks editor which as I said Sam and Javon has been working on for years it's all written in JavaScript and hopefully we're going to get this out to a much larger audience now that it's so easy to use it in rails with file backing and all the things that you get from from tricks so this has just been a short little preview of how action text is going to work in rails 6 it is mainly an appetizer and an invitation to anyone who's interested in rich tech editing in rails to get involved start playing with the framework you start figuring out all the areas we hadn't considered and help us make it great for when rails 6 is going to be released sometime in 2019 so thanks a lot for watching this and I hope to see you participating on get

https://github.com/rails/actiontext/