2.0b1 Bug: Draftail crash when rich text field is named "description"

Issue Summary

If a richtext field is called “description” (and presumably also “viewport”) the script fails, because the following

const field = document.querySelector(`[name="${fieldName}"]`);

matches the first element on the page with the attribute name matching fieldName. Since the admin template contains the following

    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

If a rich text field is named “description” or presumably also “viewport” the query selector will match these meta tags instead of the correct input field. Then it will crash when it tries to parse undefined at

const rawContentState = JSON.parse(field.value);

since the meta tag is not the correct input tag and does not have a value attribute.

Steps to Reproduce

Make a model with a rich text field named description:

    description = RichTextField(_('description'))

Open the editor

Technical details

• Python version: 3.6.3 (irrelevant since this is a js bug)
• Django version: 1.11.10 (irrelevant since this is a js bug)
• Wagtail version: Version: 2.0b1
• Browser version: Google Chrome 64.0.3282.140 (though JSON.parse(undefined) will fail in any browser)

Proposed fix

The minimal fix is simply to add the tagname to the querySelector string like so (assuming rich text fields are always input tags):

const field = document.querySelector(`input[name="${fieldName}"]`);

(I’m testing this fix now, by modifying the minified file directly on localhost, so I can see if it causes any other issues; if it doesn’t I’m happy to make a PR for it later)

Alternatively the script could be modified to use getElementById instead of queryselector, which is slightly faster and less likely to accidentally match a random tag on the page.

[jeromelebleu]

Hi, I’m far away from Wagtail’s source code but @thibaudcolas 's fix works for me. I now have the Draftail editor on my description field, thanks!

[thibaudcolas]

I agree that it seems fragile on principle, but this is the one thing Wagtail enforces (via WidgetWithScript).

It would break if this code is refactored willy-nilly, but document.currentScript is used at the call site rather than in the init function’s implementation so hopefully it’s clear enough that script location matters.

As far as I know, there is no particular enforcement of ID uniqueness.