Feature request: Add ability to edit images and embeds in rich text editor

[riceyrice]

This is something we've implemented in the TinyMCE editor and would like to see in Hallo editor too. The current TinyMCE implementation relies on pull request #2672 to work properly - this adds the ability to push parameters to the chooser views.

To implement this for Hallo editor requires moving a line of JavaScript from the TinyMCE editor into Hallo to set a global window.chooserUrls.imageChooserSelectFormat value:
https://github.com/isotoma/wagtailtinymce/blob/master/wagtailtinymce/wagtail_hooks.py#L89-94

Then follow the same general approach in image and embed plugins to detect and amend the current selection. I'm afraid this is beyond my Hallo JavaScript powers but someone else may wish to take up the challenge.
https://github.com/isotoma/wagtailtinymce/blob/master/wagtailtinymce/static/wagtailtinymce/js/tinymce-plugins/

[thibaudcolas]

This is unlikely to happen for Hallo, but Draftail nearly has this in place.

There are a few pieces missing:

• The changes in Allow editing of images and embeds by passing params in querystring #2672 don't give enough control for images, not all fields are editable
• The chooser workflow isn't designed for edits (eg. buttons say "Insert" instead of "Edit")
• The Draftail integration isn't finished (editor needs to switch to readOnly mode while doing those edits).

[thibaudcolas]

Adding my feature request text from #4588:

Issue Summary

At the moment, images and embeds in rich text (Draftail) are not editable. They can be inserted, and removed, but there is no way to edit an existing image/embed reference like we can for links and documents.

It would be nice if the Draftail image and embed blocks were enhanced to support editing – at the minimum, have an "Edit" button in the tooltip that opens the correct chooser pre-filled with current data, like for links and documents.

Steps to Reproduce

1. Open an edit page that contains rich text using Draftail
2. Insert an image or embed in the content, using the toolbar.
3. Try to replace the image or embed with another one (for now, this means "Delete" then insert a new one)

---

We had already started work on this while replacing Hallo.js with Draftail, but decided to go without it to concentrate on replacing the existing. The two specific commits where the WIP editing was removed were 19a6189, and 9f17026.

When implementing this, some more things to worry about:

• Ideal approach: If this is made as an "Edit" button opening the choosers, we need to check whether those choosers do support pre-filling the fields with the existing data, and whether the labels within the chooser’s UI are clear enough for the "edit" flow.
• Alternative: If this is made as input fields within the tooltip, we need to check how events on those fields may be propagated to the rich text editor – stopping the propagation where appropriate, and potentially managing focus in a neat way. Also locking the editor.

[thibaudcolas]

For reference, here are examples of image / embed blocks that support editing: https://demo.draftail.org/storybook/?selectedKind=Docs&selectedStory=Entities, https://demo.draftail.org/storybook/?selectedKind=Examples&selectedStory=Custom%20formats.

Source: https://github.com/springload/draftail/blob/master/examples/blocks/ImageBlock.js

Within Wagtail, it would probably easier to start with embeds first since their chooser modal is much simpler.

[thibaudcolas]

Thank you @maylonpedroso for making this happen, this is a pretty cool feature 🤘 This will be released in Wagtail 2.10.