Rails actiontext/trix display issues

Question

I'm trying to incorporate a rich text editor into my app and am having no luck. I was going to go with CKEditor, but ran across the fact that Rails 6 has actiontext/trix integrated pretty well.... or so I thought.

I followed the standard installation steps from https://edgeguides.rubyonrails.org/action_text_overview.html

So, unless I missed something, I now have the following code in these files:

app/javascript/packs/actiontext.scss

@import "trix/dist/trix";

.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }
}

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

$(document).on('turbolinks:load', function() {
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    container: 'body',
  });

  $('body').popover({
    selector: '[data-toggle="popover"]',
    container: 'body',
    html: true,
    trigger: 'hover',
  });
});

require("trix")
require("@rails/actiontext")

app/javascript/packs/application.scss

@import "./actiontext.scss";

The model that I want the editor to show up for is: app/models/note.rb

class Note < ApplicationRecord
  has_rich_text :comment
end

And the associated view/form is now below, with only the comment field being the rich enabled one: app/views/notes/edit.html.erb

<%= form_for @note, url: project_target_note_path(id: @note.id) do |f| %>
    <div class="form-group">
        <%= f.label :title %>
        <%= f.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
        <%= f.label :comment %>
        <%= f.rich_text_area :comment, cols: 20, rows: 40, class: "form-control" %>
    </div>
    <div>
        <%= f.submit "Update", class: "btn btn-success" %>
    </div>
<% end %>

I'm at a loss here ... no buttons show up at all:

What have I missed?

Update 1: I moved actiontext.scss from .../packs/ and put it in app/assets/stylesheets/ and changed some of the imports:

So, now app/assets/stylesheets/application.scss is simply:

//= require actiontext

I restarted webpacker and my rails server:

> bin/webpack-dev-server
> rails s

and now I am getting the buttons, but they do not have icons:

Update 2:

Got the buttons to show with icons... finally. Not sure if this is correct, since it's not documented, but I had to manually import application.scss.

../layouts/application.html.erb I added:

<%= stylesheet_link_tag "application" %>

Answer 1

If anyone lands here with the same problem: For me it helped to import both the trix style and the new actiontext style sheet in application.scss (not only the stylesheet like advised in the Rails guides). And for me the order also mattered!

// application.scss
@import "trix/dist/trix";
@import "./actiontext.scss";

Answer 2

For rails 6, you need to require import 'trix/dist/trix.css'; inside javascript/packs/application.js (for the css styling)