How to Debug Javascript in a Rails Gem

Jens — Fri, 16 Feb 2024 11:08:38 +0000

I encountered the issue when trying to get the morph feature of Turbo 8 to work. The page just kept refreshing and I didn't understand why. There were no good tutorials yet so I had to dig into the gem.

First, I opened it with

bundle open turbo-rails

There is see that the gem has 3 javascript files:

app/assets/javascripts/turbo.js
app/assets/javascripts/turbo.min.js
app/assets/javascripts/turbo.min.js.map

I added some log statements in turbo.js but realized that I have to change the minified version turbo.min.js. For convenience, I changed the turbo.js file as it's easier to read and recompiled the min.js file with terser.

npm install terser -g

terser turbo.js -o turbo.min.js --compress --mangle

After that I was able to add log statements to the gem's javascript and figure out the issue.

After you play with a gem don't forget to reset its code.

Replacing Trix with Tinymce in Rails 6.1 ActionText

Jens — Wed, 03 Aug 2022 12:51:00 +0000

Summary:
If you want to replace Trix you should not use ActionText. It works kind of but adds a lot of Trix-specific content (like the "trix-content" blocks around your edit text which you don't need.

The easiest way is to just add a text-field to your model and use <%= sanitize content %> in your view.

Tinymce was very easy to install. See my summary here.

As Trix is very limited in scope and doesn't allow you to add attributes to elements (for example you can't add target="_blank" to a link to open it in a new tab) and it doesn't allow you to add classes and in general has a lot of problems as it's seems not to be actively maintained it makes sense to look for other options.

After looking around I started to experiment to replace Trix with Tinymce, but was wondering if it makes sense to keep ActionText.

It was surprisingly easy to replace Trix with TinyMCE which was recommended to me in a Reddit Thread.

My Stack:

Rails 6.1.4
Ruby 3.0
jsbundling-rails with esbuild
Turbo and Stimulus

You just add tinymce to your package.json and run yarn install

You want to wrap Tinymce in a Stimulus controller to easily be able to add it to any textfield.

rails generate stimulus tinymce

This will make every textfield a Tinymce editor.

import tinymce from 'tinymce/tinymce'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/models/dom';

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="tinymce"
export default class extends Controller {
  connect() {
    tinymce.init({
      selector: 'textarea',  // change this value according to your HTML
    });
  }

  disconnect () {
    tinymce.remove()
  }
}

After that you just add the stimulus controller to the encapsulating block and change the rich_text_area to a text_area (here my views using HAML and Tailwind)

    .flex.flex-col.gap-3.mb-3
      = f.label :add_text_block, class: "font-bold text-xl"
      = f.rich_text_area :text, class: "", id: "editor_#{block.id}"

    .flex.flex-col.gap-3.mb-3{ data: { controller: "tinymce" } }
      = f.label :add_text_block, class: "font-bold text-xl"
      = f.text_area :text, class: "", id: "editor_#{block.id}"

Now your view will show Tinymce Editor instead of Trix editor. And the best part is that all changes get automatically saved. So has_rich_text :text in the model works also with other editors.

Now I just need to figure out how to add links and images to Tinymce and how to customize the elements with attributes and classes. The main reason Trix didn't work for me.

So, the next step is to figure out how plugins work with Tinymce.

Plugins are also quite easy to add. Just import:

import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/image';

And customize it in the intializer:

      plugins: 'link image',  // note the comma at the end of the line!
      toolbar: 'h2 link image',

DEV Community: Jens

How to Debug Javascript in a Rails Gem

Replacing Trix with Tinymce in Rails 6.1 ActionText