Paste and upload image into Trix editor from Clipboard #1278
Conversation
| <%=t 'spina.media_library.upload_from_device' %> | ||
| </button> | ||
| <% end %> | ||
| <%= render Spina::Forms::FileUploadComponent.new(origin: 'media-picker', media_folder: @media_folder, turbo_frame: 'media_picker') %> |
There was a problem hiding this comment.
Refactored the media picker file upload functionality into its own component, which is reused by the automatic file uploader. There is similar code on the media library page which could be refactored to use this component as well.
There was a problem hiding this comment.
The only thing getting in the way of converting the upload form on app/views/spina/admin/images/index.html.erb so that it uses the same component is the styling of the button, which I'd either have to make consistent or do a block to allow dependency injection for customization of its appearance.
| Spina::Forms::EditorInsertImagesMetaComponent | ||
| .new(images: @images, trix_target_id: params[:trix_target_id]) | ||
| .render_in(view_context) | ||
| ) | ||
| else | ||
| render turbo_stream: turbo_stream.prepend("images", partial: "image", collection: @images) |
There was a problem hiding this comment.
Makes use of existing ImagesController to perform the same processing logic, just rerouting the output depending on where the upload originated from:
- Media Picker Page
- Media Libary Page
- Auto File Upload Component
| @@ -13,6 +13,8 @@ | |||
|
|
|||
| <!-- Make sure all modals are rendered in this frame --> | |||
| <%= turbo_frame_tag "modal" %> | |||
|
|
|||
| <%= render Spina::Forms::AutoFileUploadComponent.new %> | |||
There was a problem hiding this comment.
This sits at the bottom of every page like the modal section and just listens for the auto-file-upload:start event to do its thing. It takes the file which should be included in that event, puts it into the file component form, and automates a Turbo request to ImagesController.
There was a problem hiding this comment.
Is it necessary to put this in the layout? Now it's also rendered on pages without Trix where it's not being used.
There was a problem hiding this comment.
I tried to include that within page parts that just use Trix, but that did not work because it uses a hidden <form> to submit the dropped file. The form did not work because the entire page is wrapped within its own <form> and you can't have a form nested within a form.
I could not come up with a simple way to put the AutoFileUploadComponent outside of the page <form> and have it intelligent enough to know whether Trix was used somewhere in that form or not.
|
👏👏👏 |
|
Anything in particular that needs some reviewing before we merge this into Spina? |
I don't think so. It works as much as I've been able to test it. I will make a followup PR tweaking the event handlers in I tried to write a Capybara test for this, but simulating the paste into the headless browser did not seem possible. |
| </div> | ||
| <%#= render Spina::Forms::FileUploadComponent.new(id: f.object.object_id, css_classes: 'hidden', turbo_frame: 'page_content') %> |
There was a problem hiding this comment.
Whoops. That's an artifact of my earlier attempt to contain the auto upload form to the Trix-related components only. Didn't work here because of the form that encloses the whole page content editing sections. I'll remove this.
There was a problem hiding this comment.
It's removed
|
|
||
| insertImages() { | ||
| const imagesMetadata = this.element.querySelectorAll('div.trix-insert-image') | ||
| console.log('Inserting images', imagesMetadata) |
There was a problem hiding this comment.
Maybe remove this console.log call
|
Thank you very much @wakproductions! 👏 |
Context
As an author using the Trix rich text editor, I would like to insert images into my page content by copy/paste or drag-and-drop directly into the editor.
Changes proposed in this pull request
Reads the Trix file-accept event to read the details of any pasted file and:
Guidance to review
Give it a spin!