Getting Started with Rails 7 Episode 24: Use ActionText for Rich Text Content

This is the 24th video in the Getting Started with Rails 7 series. In this video Mike installs Rails ActionText. By default, this uses the Trix editor and Rails ActiveStorage to allow for “what I see is what I get” (WISIWIG) editing and display of a field.

Mike installs the prerequisites, installs ActionText, and runs the migrations. The actual implementation of converting the Article and Comment body fields to ActionText is fairly easy, but adapting the tests presents some challenges.

This video covers:

• 00:00:10 Introduction
• 00:01:43 Install prerequisites to the system (Ubuntu) sudo apt install -f libvips-tools libvips-dev libvips42
• 00:03:00 Install action_text and examine what gets generated
• 00:06:00 Run bundle install and rails db:migrate
• 00:06:49 Add has_rich_text to Article and Comment models
• 00:07:40 Run tests. Broken in many places. Populate rich text fixtures and remove body from article and comment fixtures.
• 00:09:33 Tests still failing, look at some of the failures in more detail
• 00:10:59 Change the view forms to use rich_text_area instead of text_area
• 00:11:48 Launch the server and test in a browser. Working as intended, including drag and drop for images.
• 00:14:55 Start working on the failing tests one-by-one. Remove validations from rich text fields and tests for the those validations.
• 00:18:59 Fix failures that are trying to compare rich text body to plain text by calling .to_plain_text in the assertion
• 00:22:39 Fix failing controller tests
• 00:25:37 Troubleshoot failing automated browser tests
• 00:37:40 Create and run a migration to remove the old body text fields from articles and comments tables
• 00:39:30 Solve browser test issue by creating a new record instead of relying on the fixture
• 00:45:44 Commit and push the code from this video and the last one

The code for this series is open source and available on GitHub. View the commit for this video (shared commit between this video and the previous video) here.