1

My second-level comments, created using ActionText / Trix Editor are not displaying in my rails app. The original post displays fine as do first-level comments. But, comments on comments will not display.

I created an app using Rails 6 that has posts and nested comments. The posts and comments are working on the database side of things. However, after I installed ActionText so I could allow users to post and comment using rich-text only the post and first-level comments display their respective body content.

The posts and first-level comments render post.body and comment.body wrapped in a "trix-content" div. However, the output for the second-level, nested comment just doesn't seem to be grabbing the comment.body.

Comment Model Code:

class Comment < ApplicationRecord
  has_rich_text :body
  belongs_to :user
  belongs_to :commentable, polymorphic: true
  belongs_to :parent, optional: true, class_name: "Comment"


  def comments
    Comment.where(commentable: commentable, parent_id: id)
  end
end

Comment Controller Code:

class CommentsController < ApplicationController
  before_action :authenticate_user!

  def create
    @comment = @commentable.comments.new(comment_params)
    @comment.user = current_user
    if @comment.save
      redirect_to @commentable, notice: "Comment was successfully created."
    else
      redirect_to @commentable, alert: "Something went wrong"
    end
  end

  def destroy
    @comment = @commentable.comments.find(params[:id])
    @comment.destroy
    redirect_to @commentable
  end

  private
  def comment_params
    params.require(:comment).permit(:body, :parent_id)
  end

end

Comment Form Code:

<%= form_with model: [commentable, Comment.new], local: true, html: { class: local_assigns[:class], data: { target: local_assigns[:target]}} do |form| %>

<div class="form-group">
  <%= form.rich_text_area :body, placeholder: "Add a comment", class: "form-control" %>
</div>

<div class="form-group">
  <%= form.hidden_field :parent_id, value: local_assigns[:parent_id] %>
  <%= form.submit class: "btn btn-primary" %>
</div>

<% end %>


Comment View/Show Page Code:

<% nesting = local_assigns.fetch(:nesting, 1) %>
<% max_nesting = local_assigns[:max_nesting] %>

<div <div class="col-lg-3">

</div>

<div class="col-lg-7">
  <ul class="media-list media-list-stream mb-2">
    <li class="media list-group-item mb-2">

  <img class="mr-0">
    <%= image_tag user_avatar(comment.user, 60), class: "rounded-circle" %>
  </img>

<div class="media-body">
  <div class="media-heading">
    <small class="float-right text-muted"> <%= comment.created_at.strftime("%b %e, %Y") %> </small>
  <h6 class="ml-3"><%= comment.user.name %></h6>
  </div>
  <div class="media ml-3">
    <p><%= comment.body %></p>
  </div>
  <div class="media-footer ml-3">




    <div data-controller="reply">
    <small>
      <%= link_to "Reply", "#", data: { action: "click->reply#toggle" } %>
      <%= link_to "Delete", [comment.commentable, comment], method: :delete, data: {confirm: "Are you sure?"} if comment.user == current_user%>
    </small>

    <%= render partial: "comments/form", locals: {
      commentable: comment.commentable,
      parent_id: reply_to_comment_id(comment, nesting, max_nesting),
      class: "d-none",
      target: "reply.form"
    } %>

    </div>
    </div>
    </div>
</li>
    <%= render comment.comments, nesting: nesting + 1, max_nesting: local_assigns[:max_nesting] %>
  </ul>
  </div>

I suspect the issue has something to do with the association of comments on comments because when I remove the nesting and comment on a comment I see the same result. It looks like someone posted a blank comment.

Mike Langford
  • 51
  • 3

1 Answers1

4

So, Chris Oliver from GoRails helped me solve this problem. I had to add an input ID for each Trix Editor form. Basically, Rails wasn't recognizing the second level comment forms correctly.

All I had to do was something like this:

<%= form.rich_text_area :body, placeholder: "Add a comment", class: "form-control", id: form.object.object_id %>
Mike Langford
  • 51
  • 3