CODEWITHSUNDEEP
ruby-on-railsactiontext
DavidM
DavidM

Reputation: 173

Upgrading to ActionText - editor not working/appearing properly

I'm trying to implement ActionText on my app that's been upgraded to Rails 6.0.1.

I ran rails action_text:install and migrated, then added has_rich_text :content to my comment model. Then in the form I've switched f.text_area :content to f.rich_text_area :content.

However the editor that appears looks like this and can't attach files. What am I doing wrong?

enter image description here

Upvotes: 8

Views: 5072

Answers (8)

mahfuz
mahfuz

Reputation: 3223

in Rails 7 with cssbundling-rails

I needed to rename actiontext.css to actiontext.scss

Then I added @import './actiontext.scss'; in application.scss file.

Again: actiontext file should have .scss extension

actiontext.scss file:

/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *
 *= require trix
*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

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

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

Upvotes: 0

Sasha Stadnik
Sasha Stadnik

Reputation: 532

Solution for rails 7

Add actiontext to the top of application.scss

@import "actiontext.css";

...
...
...

Also you can find more details here

Be careful using <%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %> in your layout for solving this issue. In my case, this was a reason why link_to triggered GET request twice.

Upvotes: 0

Stephane Paquet
Stephane Paquet

Reputation: 2343

Rails 6.1 Webpacker Tailwind 2.1 with JIT

I added @import 'trix/dist/trix.css'; to application.scss to have Trix working as expected.

Upvotes: 3

Piyush Chaudhary
Piyush Chaudhary

Reputation: 313

I am not sure why this resolved by adding

@import "trix/dist/trix.css";

to application.scss because I am in the full doubt that actiontext.scss line no 6

//= require trix/dist/trix

is also does the same but not sure why it's not pulling the css.

SOLUTION - Add @import "trix/dist/trix.css"; to application.scss.

Upvotes: 1

Lam Phan
Lam Phan

Reputation: 3801

you can refer to this : https://github.com/rails/webpacker/issues/2059

basically the build chain works like this:

(if extract_css == true) -> application stylesheet -> MiniCssExtractPlugin -> application.css -> stylesheet_pack_tag 'application'

(if extract_css == false) -> application stylesheet -> style-loader -> application.js (loads css in head)

So that if you want to use stylesheet_pack_tag then following steps maybe help you:

  1. set extract_css: true for development in webpacker.yml
  2. @import "trix/dist/trix"; into javascript/stylesheets/application.scss
  3. import "../stylesheets/application"; into javascript/stylesheets/application.js
  4. <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> into application.html.erb
  5. run ./bin/webpack && rails s

Upvotes: 2

Enow B. Mbi
Enow B. Mbi

Reputation: 319

I had a similar problem after upgrading from Rails 5.2 to Rails 6.0. Please add the following line in your application.scss:

@import 'trix/dist/trix.css'

@import 'actiontext'

checkout these blogs for more details:

https://blog.rubynetti.it/i/how-to-add-action-text-in-rails-6:

https://blog.francium.tech/action-text-in-rails-6-a-brief-intro-dd33fb412eb5

Hope it helps.

Upvotes: 10

Dan Engel
Dan Engel

Reputation: 117

To fix the problem of the rich text areas not showing, you probably need to add <%= javascript_pack_tag "application" %> if you're loading assets with Webpack, <%= javascript_include_tag "application" %> if using asset pipeline (as someone helpfully recommended in my similar question).

But I'm not sure this will fix the toolbar button styling, since I still have that issue. Will come back to this if I find a fix.

EDIT I have fixed the broken styling by adding the full contents of the trix editor stylesheet to the actiontext.scss file then explicitly pulling the stylesheet into my layout file with <%= stylesheet_link_tag 'actiontext' %> note: doing it this way you will also have to define it in your assets precompile line in config/initializers/assets.rb line:

Rails.application.config.assets.precompile += %w( sidenav.css editor.css form.css actiontext.css )

Upvotes: 0

Tensai
Tensai

Reputation: 43

The one part I was missing after upgrading was this:

<%= javascript_pack_tag 'application' %>

Mine is placed in app/views/layouts/application.html.erb. Just make sure it is included somewhere.

It it isn't that, check to make sure the stylesheets for actiontext are being included as well.

Upvotes: 1

Related Questions