RichTextField not visible when used as a field on custom Image model

[eyemyth]

Issue Summary

RichTextField fields are not visible in the CMS when used as a field on custom Image model.

Steps to Reproduce

I set up a custom image model as described here. I added a wagtail.core.fields.RichTextField as one of the fields, and added that field name to admin_form_fields. I expected the field to appear at /cms/images/{pk} but it does not. Other standard-issue Django fields added in the same way do appear in the CMS.

Technical details

• Python version: Python 3.6.4
• Django version: Django 2.0.4
• Wagtail version: Wagtail 2.0.1
• Browser version: Safari 11.1; Chrome 65.0.3325.181

[thibaudcolas]

Hey @eyemyth, could you:

• See if there is a JS error (or multiple ones) in the browser console when you open the pages where the field is meant to be.
• View the HTML source of the page and see whether there is any HTML output for the field.
• Share the code of your image model.

[eyemyth]

@thibaudcolas I do get errors in the console, and they seem to correlate directly to the form field, which does appear in the HTML.

HTML:

 <input type="hidden" name="caption" value="{
    &quot;blocks&quot;: [
        {
            &quot;key&quot;: &quot;ugovi&quot;,
            &quot;type&quot;: &quot;unstyled&quot;,
            &quot;depth&quot;: 0,
            &quot;text&quot;: &quot;&quot;,
            &quot;inlineStyleRanges&quot;: [],
            &quot;entityRanges&quot;: []
        }
    ],
    &quot;entityMap&quot;: {}
}" id="id_caption" data-draftail-input /><script>window.draftail.initEditor('#id_caption', {"entityTypes": [{"type": "EMBED", "icon": "media", "description": "Embed"}, {"type": "LINK", "icon": "link", "description": "Link", "attributes": ["url", "id", "parentId"], "whitelist": {"href": "^(http:|https:|undefined$)"}}, {"type": "DOCUMENT", "icon": "doc-full", "description": "Document"}, {"type": "IMAGE", "icon": "image", "description": "Image", "attributes": ["id", "src", "alt", "format"], "whitelist": {"id": true}}], "enableHorizontalRule": true, "inlineStyles": [{"type": "BOLD", "icon": "bold", "description": "Bold"}, {"type": "ITALIC", "icon": "italic", "description": "Italic"}], "blockTypes": [{"label": "H2", "type": "header-two", "description": "Heading 2"}, {"label": "H3", "type": "header-three", "description": "Heading 3"}, {"label": "H4", "type": "header-four", "description": "Heading 4"}, {"type": "ordered-list-item", "icon": "list-ol", "description": "Numbered list"}, {"type": "unordered-list-item", "icon": "list-ul", "description": "Bulleted list"}]}, document.currentScript)</script>

The error I see in the console is TypeError: undefined is not an object (evaluating 'window.draftail.initEditor')

Here is my Image model:

class InlineImage(AbstractImage):
    title = models.CharField(max_length=200, blank=True)
    caption = RichTextField(blank=True)
    credit = RichTextField(blank=True)
    legacy_page_id = models.PositiveSmallIntegerField(
        null=True,
        default=None,
    )
    legacy_order = models.PositiveSmallIntegerField(
        null=True,
        default=None,
    )

    admin_form_fields = Image.admin_form_fields + (
        'caption', 'credit',
    )

[thibaudcolas]

@eyemyth 👍 this looks like a cache issue but would you mind copying the full log so I can confirm?

[eyemyth]

The actual error as printed in the Safari console is:

[Error] TypeError: undefined is not an object (evaluating 'window.draftail.initEditor')
	Global Code (4482:384)

[thibaudcolas]

I get the same error when the editor's code isn't loaded on the page. There are two things that I think might cause this:

• Most likely – An outdated cache. Please have a look at Wagtail admin static assets should be cache busted to prevent outdated cache issues #3700 (comment) (and the linked SO answers) to find cache-clearing instructions.
• Potentially – the draftail.js file isn't loading on the page where your field is defined for some other reason.

Once you've tried clearing browser / static file caches, have a look at the HTML source for your page and make sure it contains <script type="text/javascript" src="/static/wagtailadmin/js/draftail.js"></script>. This line should be before the actual content of the page (on my test site it's line 185, towards the end of the list of <script> tags at the start of the <body>.

If the <script> is not there, I would suspect that for some reason the admin_form_fields doesn't properly handle the field's widget's media.

[eyemyth]

Hm, yeah that script tag is definitely not in my page. I emptied my browser caches too.

Here's the complete HTML output from the Safari Resources tab: https://gist.github.com/eyemyth/685344a45652ff871ce0047712f87d72

[thibaudcolas]

Ok, the problem is easier to understand now. This page template (https://github.com/wagtail/wagtail/blob/master/wagtail/images/templates/wagtailimages/images/edit.html) does not load the required JS and CSS for the widgets rendered there, nor any of the other requirements for rich text editor fields in Wagtail.

A quick fix might be to override this template's extra_js block to load the _editor_js.html template (eg. https://github.com/wagtail/wagtail/blame/master/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/add.html#L40), but I think this will be a bit brittle. Looking at the code, I doubt what you're trying to do has ever worked, so I'm also worried that even if you do manage to get the field to display you will run into more issues down the line.

Let's way to hear from others who may be more knowledgeable about image overrides. In the meantime, if possible I would suggest you use a field that does not need any extra JS or CSS instead.

[eyemyth]

I managed to get the fields to render on the page, although oddly they do not have the field names listed. Here's a screenshot.

I overrode the edit.html template and added <link rel="stylesheet" href="{% static 'wagtailadmin/css/panels/draftail.css' %}" type="text/css"> to the extra_css block, and <script src="{% static 'wagtailadmin/js/draftail.js' %}"></script> to the extra_js block.

I would be nice to have native/out of the box RichTextField functionality here. Our editors will want to have some basic text formatting tools for image captions.

[gasman]

I think the 'proper' fix for this will be to ensure that the edit form's media property is output onto the page - this should include the necessary draftail.css and draftail.js includes. (However, it may still be lacking some of the additional includes normally found in _editor_js.html, such as modal-workflow.js, and so you might find that some functionality is missing, such as chooser popups.)

Note that having a rich text field within the image model could also cause problems with the 'upload' tab of the image chooser popup, because the rich text field may itself trigger popups, and a popup within a popup isn't officially supported...

[lb-]

Aside from the caveats mentioned by @gasman - this has now been fixed.

Merged #5286 via eaad013

[sir-sigurd]

I have the same problem, but with custom Document model, and it seems that #5286 has fixes only for Image model, so should it be fixed for Document separately?

[gasman]

@sir-sigurd Yes - a similar fix for custom document models would be very welcome, and will probably look a lot like this one.

(As I recall, I considered fixing documents at the same time as doing this, but eventually decided it was best not to get carried away doing too much in one PR :-) )

[sir-sigurd]

@gasman, OK, I’ll probably have time to fix it.

[urlsangel]

If anyone else is looking for an answer to this question, I’ve fixed it by implementing the fix from here:

• (6.0.2) Backport - Move modal-workflow.js script to admin_base.html (#11620) #11754
• https://github.com/wagtail/wagtail/pull/11803/files#diff-4ee7f72163f125b407b463a6a0318dfed050983223c9af385be2f8fa631bea28

Essentially, the old implementation should be replaced with this:

{% block extra_js %}
    {{ block.super }}
    {{ media.js }}
    {% include "wagtailadmin/pages/_editor_js.html" %}
{% endblock %}