Rails actiontext/trix display issues

user_688071 0
Viewed 2991

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:

form with no buttons!

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: update1

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" %>
actiontext trix ruby-on-rails
3 Answers

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";
user_95956530

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

enter image description here

user_104288450

While I don't think this is an ideal resolution, I provided 2 updates above that seems to resolve my issue.

1: keep actiontext.scss in app/assets/stylesheets (where it was originally generated).

2: manually import application.scss in ..layouts/application.html.erb

user_6880710
Related