Skip to content

Instantly share code, notes, and snippets.

@anansilva
Last active September 23, 2019 21:04
Show Gist options
  • Save anansilva/7b7279747859ee4253dfceb00ab95dc1 to your computer and use it in GitHub Desktop.
Save anansilva/7b7279747859ee4253dfceb00ab95dc1 to your computer and use it in GitHub Desktop.
Add ActionText to a Rails 6 project

Setting up ActionText

Requirements

ActionText requires a project using rails >= 6.0.0

Install

$ rails action_text:install

This install will add:

  • Two migrations that will add an ActionText table and a ActiveStorage table in you app's schema
  • ActionText specific styles (created by the Basecamp team) under actiontext.scss
  • Two JS packages: @rails/actiontext and trix

Generate a Post model

$ rails generate model Post title:string

We are not adding body at this point, that will be ActionText's job.

Update schema

$ rake db:migrate

Your schema should now have three new tables:

  • action_text_rich_texts
  • active_storage_attachments
  • active_storage_blobs
  # db/schema.rb
  
  create_table "action_text_rich_texts", force: :cascade do |t|
    t.string "name", null: false
    t.text "body"
    t.string "record_type", null: false
    t.bigint "record_id", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.index ["record_type", "record_id", "name"], name: "index_action_text_rich_texts_uniqueness", unique: true
  end
  
  create_table "active_storage_attachments", force: :cascade do |t|
    t.string "name", null: false
    t.string "record_type", null: false
    t.bigint "record_id", null: false
    t.bigint "blob_id", null: false
    t.datetime "created_at", null: false
    t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id"
    t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness",   unique: true
  end
  
  create_table "active_storage_blobs", force: :cascade do |t|
    t.string "key", null: false
    t.string "filename", null: false
    t.string "content_type"
    t.text "metadata"
    t.bigint "byte_size", null: false
    t.string "checksum", null: false
    t.datetime "created_at", null: false
    t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true
  end
  
  create_table "posts", force: :cascade do |t|
    t.string "title"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end
  
  add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"

Add a rich text field to an existing model

# app/models/post.rb
class Post < ApplicationRecord
  has_rich_text :body
end

Note that the posts table (schema.rb) does not have a body field. When calling post.body we are actually calling body on an ActionTextRichText instance with a record_id that is equal to post.id

Add actions to create and show Post

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])
  end

  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to post_path(@post), notice: 'Post was successfully created.'
    else
      render :new
    end
  end
 end

Add a form with the body as rich_text_area

# app/views/posts/new.html.erb
<h1>New Post</h1>
<%= form_with(model: @post) do |form| %>
  <div class="form-group">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="form-group">
    <%= form.label :body %>
    <%= form.rich_text_area :body %>
    <%= form.submit %>
  </div>
<% end %>

Add image_processing gem

image_processing is a variant to ActiveStorage - allows image transformation and image rendering

# Gemfile
gem 'image_processing', '~> 1.2'
$ bundle
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment