be able to edit the initial value of the editor

[pauloancheta]

Summary

Hello rails team! I've been trying to add a rich text area that is not backed by a model. Here I'm proposing to add functionality with the same behaviour as text_area where we can add a value through input_html would solve the problem.

At the moment this snippet:

<%= f.rich_text_area :description, input_html: { value: "<h1>hello world</h1>" } %>

yields this:

<form action="/messages" accept-charset="UTF-8" data-remote="true" method="post">
  <input type="hidden" name="message[title]" id="message_title_trix_input_message" />
  <trix-editor input_html="value &lt;h1&gt;hello world&lt;/h1&gt;" id="message_title" input="message_title_trix_input_message" class="trix-content" data-direct-upload-url="http://test.host/rails/active_storage/direct_uploads" data-blob-url-template="http://test.host/rails/active_storage/blobs/redirect/:signed_id/:filename">
  </trix-editor>
</form>

With the changes in this pull-request, it should add the correct hidden_input

<input type="hidden" name="message[title]" id="message_title_trix_input_message" value="<h1>hello world</h1>" />

Other Information

Please let me know if there are other ways to do this currently or if there's better ways that I can improve the code

[georgeclaghorn]

How about accepting a non-nested :value option to FormBuilder#rich_text_area instead, to match FormBuilder#text_area and others?

[pauloancheta]

You're absolutely right @georgeclaghorn, I've updated the pull request to have non-nested value. I also tried to add the value inside the trix-editor component as well to show it on view. I'm not too sure if this is the right way. What do you think?

[georgeclaghorn]

I also tried to add the value inside the trix-editor component as well to show it on view.

Hmm, I don’t think you have to do that. The <trix-editor> gets its initial value from the input.

As for how this is implemented, we can confine :value option handling to ActionView::Helpers::Tags::RichText. rich_text_area_tag doesn’t need to know about it. The passed value should also take precedence over the original value from the model. Something like this:

def render
  # ...
  @template_object.rich_text_area_tag(options.delete("name"), options.fetch("value") { editable_value }, options.except("value"))
end

def editable_value
  value&.body.try(:to_trix_html)
end

[pauloancheta]

I've followed your recommendation and have cleaned up the commit as well to preserve history from the other lines.

[georgeclaghorn]

input_html should be value here.

[georgeclaghorn]

This needs API doc updates here and a CHANGELOG entry.

[fydelio]

Found a bug using the value attribute implementation, especially when rendering persisted values from the database with a custom attachment

I've created an action text implementation with a custom attachment (similar to the mention implementation from Chris from GoRails) and used the attribute value to assign a default value in case the field is empty. What I've encountered was, if a value is passed in using the attribute value the custom attachments would be rendered out as editable text and not as a custom attachment!

For the test scenario: Some value with a custom attachment is already persisted in the database.

Like this, the custom attachment is properly displayed. (see screenshot for output)
Case 1: <%= f.rich_text_area :invitation_text %>

But like this, the custom attachment is outputted as editable HTML (no <figure> tag)!
Case 2: <%= f.rich_text_area :invitation_text, value: @training.invitation_text.presence || render(partial: 'personnel/trainings/invitation_text', locals: { training: @training} ) %>

Actual HTML (as you can see, no '<figure'> tag anywhere)
<div><!--block--><br><br><br><strong>Bezeichnung</strong><br>AuS-Arbeiten unter Spannung<br><strong>Start</strong><br> Dienstag, 7. April 2020, 08:00 Uhr <br><strong>Ende</strong><br> Mittwoch, 8. April 2020, 15:00 Uhr <br><strong>Ort</strong><br>Ludwigstr. 70, Worms</div>

[georgeclaghorn]

It’s a little gross, but you’ll want to call ActionText::Content#to_trix_html to get something suitable for Trix.

<%= f.rich_text_area :invitation_text, value: @training.invitation_text.body.presence&.to_trix_html ||
      render(partial: 'personnel/trainings/invitation_text', locals: { training: @training }) %>

Arguably rich_text_area should do this if given an ActionText::RichText.

[fydelio]

Just tried it. Interestingly I get a NoMethodError: undefined method `to_trix_html' for #ActionText::RichText:0x00007fe33ae8fdf8

[georgeclaghorn]

Note the added .body before .presence.

[georgeclaghorn]

That makes .presence not work, though. The .body needs to come after:

@training.invitation_text.presence&.body&.to_trix_html

[fydelio]

@geoffharcourt : Awesome stuff, thx for your help.
I must say, ActionText is quite powerful and allows you to build cool stuff. If this all (the whole ActionText part) were a bit better documented...