Trix: Wrong figcaption used when editing captions of ActiveText Attachments

[matthee]

Trix attaches the caption editor to the wrong figcaption element, if the attachment itself contains a figcaption element.

Steps to Reproduce

1. Setup a new rails project with ActionText
2. Create a form with a rich text field
3. Upload an image
4. Save the record
5. Reopen the form by editing the record once again
6. Edit the image caption
7. Observe the DOM elements of the attachment in the web inspector of choice

Details

Instead of using the outer-most figcaption element created by Trix, the figcaption element of the attachment is used to present the editor.

I suspect the following line to match the wrong figcaption element, but did not actually verify:

https://github.com/basecamp/trix/blob/master/src/trix/controllers/attachment_editor_controller.coffee#L97

• Trix version: 1.2.1
• Rails version: 6.0.1
• Browser name and version: Safari Version 13.0.3 (14608.3.10.10.1)
• Operating system: Mac OSX 10.14.6 (18G1012)

[javan]

if the attachment itself contains a figcaption element

What do you mean by that, exactly?

1. Edit the image caption
2. Observe the DOM elements of the attachment in the web inspector of choice

Are your changes to the caption saved after you stop editing the attachment?

[matthee]

Thank you for getting back to me so quickly!

if the attachment itself contains a figcaption element

What do you mean by that, exactly?

ActionText image attachments are rendered as figure elements which in essence look like:

<figure>
  <img src="..." />
  <figcaption>Some Caption</figcaption>
</figure>

Since Trix wraps attachments in a figure element as well, the resulting DOM stucture looks something like that:

<figure>
  <figure>
    <img src="..." />
    <figcaption>Some Caption</figcaption>  // This figcaption is used by Trix to attach the editor
  </figure>
  <figcaption>Some Caption</figcaption>    // This figcaption was created by Trix when wrapping the attachment 
</figure>

The attachment editor is attached to the inner figcaption element. However, I would expect Trix to attach the editor to the outer figcaption.

Are your changes to the caption saved after you stop editing the attachment?

Yes, the changes are saved after editing. While the core functionality might not be impacted, it makes it hard to manage the CSS of both Trix and the attachment.

[javan]

Since Trix wraps attachments in a figure element as well, the resulting DOM stucture looks something like that:
```html

…

Trix doesn't re-wrap attachment <figure>s like that. Try opening your browser console and inspecting the <trix-editor>'s contents on step 6. Edit the image caption. Are there actually nested <figure> elements? If so, please send me a screenshot.

[matthee]

At least in Safari this seems to be the case.

I'm not sure what you are looking for, so I am attaching several Screenshots. For context, I have created a new rails project (v6.0.1) and did a basic action_text setup:

1. rails new ...
2. rails action_text:install
3. rails generate scaffold post
4. Add action_text via has_rich_text :body
5. Add the body field to both form and permitted params

If you want me to, I am glad to upload this demo project to GitHub.

Results

The first image upload works flawlessly. Trix accepts the file, uploads it to the server, and inserts a simple <figure> tag. Next, save the record, and click on "Edit" once again. (Important! Trix loads the previously uploaded attachment from the DOM). Both captions are shown, and Trix attaches the caption editor to the inner figcaption element. In these screenshots I am changing the caption from "Original Caption" to "Edited Caption":

After pressing enter, Trix updates the contents of outer figcaption element and unhides the inner figcaption element:

[javan]

Well that's not right. Congrats, you found a Rails bug! 🙃

I've opened https://github.com/rails/rails/pull/37868 upstream with a fix. Until it's released, you can apply the same fix to your app by adding an initializer like: config/initializers/action_text_blobs.rb⤵

# Fix ActiveStorage::Blob → ActionText::TrixAttachment conversion (using this
# patch until https://github.com/rails/rails/pull/37868 lands).
ActiveSupport.on_load(:active_storage_blob) do
  def to_trix_content_attachment_partial_path
    nil
  end
end

[javan]

Thanks for the report! Closing since this technically isn't a Trix issue.

[matthee]

Great, thanks for the fix!