How to use ActionText in Rails 6 Discussion

Great stuff Chris! Very exciting. I also just watched the @mention episode too.

To anyone reading this, a few questions:

1. Do you think we can get @mentions working on our Rails 5.2 app that has the Trix editor installed?
2. Can we install the Trix editor on comments too, so that the @mentions would work there as well?
3. What about on the live chat with actioncable? Are we in trouble there because the live chat doesn't use the Trix editor?
4. When do you think Rails 6 will be stable?
   
5. Would it make sense to upgrade our current rails 5.2 app to 6, or is that trouble?

Thanks much!

What a great addition to Rails. Thanks for documenting it Chris!

In case this helps anyone (I had a hell of time troubleshooting this):

I ran into a really frustrating issue when I pushed to Heroku. Rich text (trix) with image uploading was all working fine locally, but on Heroku dropped-in images weren't saving, and the issue had to do with my using Amazon S3.

Turns out it was a CORS issue, which Chris made a video about here:
https://gorails.com/episodes/cross-origin-resource-sharing-with-rails?autoplay=1

In addition to that, I had to set my CORS configuration in my S3 bucket settings. This was the configuration that ended working for me:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

I have been following the tutorial closely, however, I was not able to resolve the issue which you resolved purely by uncommenting gem 'image_processing', '~> 1.2'. Picture in my post would still remain broken.

I am running Rails 5.2.2, Ruby 2.6.0, and I am also using mini_magick gem after following your other tutorial on user avatars. Any chance that this can cause the problem?

Is there a way to limit the formatting options in the Trix editor? For example, if I don’t want users to enter links or upload images, is there a way I can configure the editor so that those options are disabled and not just not shown (I can do the latter via CSS).

After uncommenting image_processing gem I still have broken image :(
Will post fix when I find it.

Great video. With the abstration in ActionText, what's the best pattern for something like pg_search? Does ActionText provide clear cut way to access the association and search against the content from the model to which it belongs?

Hi Chris,

I've run into a weird problem after adding ActionText to my app. The second level nested comments (I followed your tutorial) on my posts will not display text for some reason. The original post displays rich text. Then, I can comment on it and the first level comment displays fine. But, if I comment on a comment no text will show up.

The old plain text, second level comments also dissappeared.

I inspected the element and it looks my code pulls in class="trix-content" and then the comment body. for the first level comment. But, on the second level there is no body being pulled in.

It's weird because these comments worked before ActionText. Any thoughts?

a

Anybody know how to make the trix editor look fine on mobile?

Thanks, Chris!

It would be very useful if you'll published a lesson how to embed youtube, twitter, facebook posts into Trix editor.

Great tutorial Chris,

I could not get the image preview centre aligned till I changed my css to the following

.```
// actiontext.scss
form-control {

.attachment--content {
margin: 0.6em 0;
}

.attachment--content {
width: 100%;
text-align: center;
}

.attachment {
display: inline-block;
position: relative;
max-width: 100%;
margin: 0;
padding: 0;
}
}

How do you limit images uploaded size? or how can you resize them if to big?

So, I'm trying to set up ActionText to create a WYSIWYG editor on my blog, but I'm running into a bit of a strange bug - I noticed that ActionText allows me to add any number of attachments when I make a Post or edit a post for the first time, thereafter any attachments I try to add on any posts are not saved until I restart the server (either by making changes to the code and saving or shutting down the server and re-starting it)

All I see is the new image with a "progress bar" - see screenshot below - and when I save the post, it does not save the new image. enter image description here

[![error image][(https://i.stack.imgur.com/bcV9F.png)]]

The output on the console looks like this the first time.

and like this the second time

I'm not sure what the issue is - any idea what I am missing?

How can I customize the default size of the rich_text_area field, so that it displays longer vertically even before anything is typed in, and still retain the height: auto; scaling feature?

It doesn't seem like rich_text_area has any parameters like the regular text_area has.

Here is what I have so far:

<div class="form-inputs">
    <%= f.form_group :body, class: 'row' do |f| %>
      <%= f.label :body, class: 'control-label col-md-2' %>
      <div class='col-12 col-md-10'>
        <%= f.rich_text_area :body, class: 'form-control' %>
        <%= f.error_messages %>
      </div>
    <% end %>

trix-editor {
  &.form-control {
    height: auto;
  }
}

.form-control {
  .attachment--preview {
    margin: 0.6em 0;
  }

  .attachment--preview {
    width: 100%;
    text-align: center;
  }

  .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

This is the first time I'm running into this, but I can't seem to get images I've uploaded in the rich_text to show in the view. I don't see this issue with active storage outside of actiontext, but I get the following error with any image I attach to the rich_text:

MiniMagick::Error (magick convert /tmp/ActiveStorage-16-20201214-20428-b3u29b.jpeg[0] -auto-orient -resize 1024x768> /tmp/image_processing20201214-20428-1ce1eqd.jpeg failed with error:
convert: no decode delegate for this image format JPEG' @ error/constitute.c/ReadImage/572.
convert: no images defined/tmp/image_processing20201214-20428-1ce1eqd.jpeg' @ error/convert.c/ConvertImageCommand/3285.
):

This is with any image I try. Any ideas?

Hi anyone know's how to add richtext in madmin gem that Chris created? thanks in advance for answer.