David Turnbull

Setting up Lexxy, 37signals new rich text editor

#ruby_on_rails

Lexxy is a new rich text editor for Action Text from the team at 37signals.

It’s designed as a replacement for Trix and features a number of improvements, like better HTML semantics (eg. using <p> for paragraphs rather than <div>), markdown support, and real-time code syntax highlighting.

I’ve been having issues with Trix recently in one of my Rails apps so I decided to give Lexxy a try.

Installation

I started by adding the gem to my Gemfile:

gem 'lexxy', '~> 0.1.4.beta'

Then running bundle:

 bundle install

Import maps and Sprockets

Lexxy’s documentation outlines how to set up the gem for import maps and Propshaft.

My Rails app still uses Sprockets, which requires a slight change to the example code for importmap.rb:

# importmap.rb
pin "lexxy"
pin "@rails/activestorage", to: "activestorage.esm.js" # to support attachments

To get the gem working with Sprockets, I also needed to add the following to my manifest.js file:

//= link lexxy.js
//= link lexxy.css

Import it into application.js:

// app/javascript/application.js
import "lexxy"

And include the css in my application layout:

# application.html.erb
<%= stylesheet_link_tag "lexxy" %>

Using Lexxy and Trix

Since Lexxy is still in early beta, I decided to test its editor on rich text fields in my app’s admin dashboard, and to continue using Trix to handle user-facing rich text.

By default, Lexxy overrides Action Text form helpers like form.rich_text_area.

I disabled this behaviour by adding the following to application.rb:

config.lexxy.override_action_text_defaults = false

I then swapped form.rich_text_area for form.lexxy_rich_text_area on my form field, and added lexxy-content to the field class to ensure the Action Text content rendered correctly.

<%= form.lexxy_rich_text_area :body,
  placeholder: "Placeholder text...",
  required: true,
  class: "lexxy-content form-input" %>

The last step was adding the lexxy-content class to the field on show.html.erb:

<div class="lexxy-content">
  <%= @example.body %>
</div>

Wrapping up

I’m impressed with what I’ve seen of Lexxy so far. It’s easier to style the rendered Action Text thanks to the HTML semantics improvements, and it’s great to be able to paste markdown straight in to the editor.

I look forward to fully replacing Trix once the gem reaches a stable release.

Recent posts