Wagtail: No longer possible to make an image a link within rich text

[gasman]

As reported at https://groups.google.com/d/msg/wagtail/FA9qu7R2mCA/CayK-NrQBAAJ - since the updates to rich text link handling in Wagtail 1.5 (#2417), it's not possible to make an image into a link by highlighting it and using the link button on the toolbar. This now causes the image to be removed.

I believe this is because the new code passes 'link text' as a URL parameter to the chooser modal and uses that to construct an HTML fragment to replace the selected text, rather than wrapping the existing selected text in a tag - this won't work if the link includes non-text content such as images.

[Pomax]

this seems to affect the new draftail based rich text editor too, should that be a new issue or a reopening of this one?

[thibaudcolas]

@Pomax for the new editor this is intentional. There is no easy way to build this reliably enough, so we left it out.

The recommended course of action is to use a StreamField block (see https://github.com/wagtail/wagtail/issues/4428#issuecomment-376502298, and #3023).

[Pomax]

Thanks, that was what I'd implemented in the mean time (A figure block with image/caption/url fields), but that's probably also good to add a small bit in the docs about? (especially for devs/content creators used to things like tinymce?)

[thibaudcolas]

Indeed, it's a common question / requirement. Here's the page this would probably go on: http://docs.wagtail.io/en/v2.0.1/editor_manual/new_pages/creating_body_content.html – do you have a suggestion of how to cover this? Add a "Things to know section" at the end with some gotchas?

[Pomax]

That would have been my suggestion, honestly =)

Maybe "Things to look out for", but a section specifically about what draftail does differently from "common" expectation wrt rich text editors like "even if you provide an empty feature list, it will still have ...", "links can only contain text, not images", "the newline icon button inserts a linebreak, not set up a new paragraph, but typing enter in the textfield sets up a new paragraph, not a linebreak", and maybe a few of the most pertinent known bugs/shortcomings atm like "you can't copy-past from one rich text field to another without links becoming plain text" etc?

[nek4life]

Hi, is this fix still off the table? This seems like basic functionality a rich text editor should support. We're trying to keep things simple for one of our remote offices and converting the body field into a stream field adds an additional level of support and training that could potentially be difficult to manage.

[thibaudcolas]

Hey @nek4life. I'd agree with your point when considering editors in isolation, but here the main reason why we didn't invest time in supporting this is that Wagtail already has a competing API – StreamField – to do this type of content formatting. Both approaches have their ups and downs of course. I don't think any change is off the table as long as the effort can be justified.

I think a minimal version of having links on images would be to limit support to links on the image only (not on a combination of text + image), displaying a link chooser UI within the image block, storing the link data together with the image data. This should all be doable as a custom implementation of the IMAGE format in rich text, similarly to what https://docs.wagtail.io/en/v2.4/advanced_topics/customisation/extending_draftail.html#creating-new-entities describes. The only thing I'm unsure of is how this should be stored in Wagtail's rich text representation so it can be rendered as <a><img/></a> in HTML.

This override process isn't well documented (because StreamField is generally more appropriate for those scenarios), but if you're willing to try it out I'm happy to help.