How to use Action Text in Rails 6

Build Blog with Ruby on Rails (Part 5)
Luan Nguyen
Luan Nguyen
Sep 09, 2020 · 3 min read

In this article, I'm going to share with you about Action Text - a component which helps us easy to add a rich-text-editor for writing Post in Blog application.

What'll we learn:

  • What is Action Text and Trix Editor?
  • Install Action Text 
  • How to use Action Text to edit the content of Post
  • Solution to N + 1 queries
  • Conclusion

Source: unsplash.com/@yoal_des


This is part 5 in Project: Build Blog with Ruby on Rails

What is Action Text?

  • Action Text is a new cool feature in Rails 6.0, which helps to build a rich text editor (WYSIWYG editor) easily in Rails application.
  • It includes the Trix editor that handles everything from formatted text to links or embedded images.
  • Trix is a rich text editor for everyday writing. Compose beautifully formatted text in your web application. 
  • Action Text is automatically store images or files through Active Storage and associated with the included RichText model.

Action Text

Installation
Run:
rails action_text:install

The command will add the Yarn package and add necessary files as:
  - Yarn package: Add packages for actiontext and trix to package.json
  - CSS : app/assets/stylesheets/actiontext.scss - Add this css file to on the top application.scss 
# app/assets/stylesheets/application.scss
//= require actiontext

  - JS :
  • Adding trix to app/javascript/packs/application.js
  • Adding @rails/actiontext to app/javascript/packs/application.js
# app/javascript/packs/application.js
[...]
require("trix")
require("@rails/actiontext")

  - Migration : Create a new migration to store editing content
db/migrate/20200905150522_create_action_text_tables.action_text.rb

  - View : Create a blob view to show attachments
app/views/active_storage/blobs/_blob.html.erb

Run migration to create action_text_tables:
rails db:migrate

Using Action Text to edit the content of Post:
In the Post model, add has_rich_text  for content  field which we want to edit:
class Post < ApplicationRecord
  has_rich_text :content
end

In Form, using rich_text_area helper to edit content:
<%= form.rich_text_area :content, class: 'form-control'  %>

Reload edit Post page and see the editor like that:
Rich-Editor by Action Text


Try to edit some text or upload images to content, and see how it work!


Upload Images in Action Text

In action text, images are automatically stored using Active Storage and associated with the included RichText model.
Because of Action Text is using direct uploads, so we have to configure the service (Amazon S3) to allow cross-origin requests (Cross-Origin Resource Sharing) from our Blog application.

Example of S3 CORS configuration:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3600</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>


Deep understand to Action Text

Get a Post which has already added content with uploaded images to try on console:

ActionText::RichText
post.content
=> #<ActionText::RichText id: 53, name: "content", 
body: #<ActionText::Content "<div class=\"trix-conte...">, 
record_type: "Post", 
record_id: 22, 
created_at: "2020-09-13 08:02:37", 
updated_at: "2020-09-20 07:25:32">

You can see it return an ActionText::RichText object. The RichText record holds the content and attachement files which are stored using Active Storage.

We can get attachment files through RichText object by:
post.content.embeds
=> #<ActiveStorage::Attached::Many:0x00007f8411eed490 @name="embeds", 
@record=#<ActionText::RichText id: 53, name: "content", 
body: #<ActionText::Content "<div class=\"trix-conte...">, 
record_type: "Post", record_id: 22, 
created_at: "2020-09-13 08:02:37", updated_at: "2020-09-20 07:25:32">>

ActionText::Content
post.content.body
#=> #<ActionText::Content "<div class=\"trix-conte...">

It return an ActionText::Content object. In there, you can get list attachment files by:
post.content.body.attachments
#=> List ActionText::Attachment

Beside, you can get all links in content by:
post.content.body.links
#=> [
"https://fullstackrubyonrails.com", 
"https://fullstackrubyonrails.com/about"
]


Eager loading Action Text

  • Avoids N+1 queries when you want the body, not the attachments.
Post.all.with_rich_text_content

  • Avoids N+1 queries when you want the body and attachments.
Post.all.with_rich_text_content_and_embeds 


Conclusion

In this article, I guide you on how to use Action Text to add rich-text-editor in Rails application.
In the next article, I'm going to share about how to add authentication functions by using Devise gem in Rails application.

References: