Fix bug 1563677: Escape selectors in data-expression attributes

[mathjazz]

Translating a string like this in the rich editor is not possible - it results in an Expected literal error upon saving:

number =
    { NUMBER($var, type: "ordinal") ->
        [1] first
        [one] { $var }st
       *[other] { $var }nd
    }

What's going on?

Pontoon doesn't show selectors (in this case NUMBER($var, type: "ordinal")) in the rich editor, but still stores them in DOM to help with serialization. Specifically, it naïvely puts them in data-expression attributes, without any escaping.

So when the selector contains quotes, like in our example, content gets stripped upon serialization, resulting in the above error. The serialized string looks like this:

number =
    { NUMBER($var, type:  ->
        [1] first
        [one] { $var }st
       *[other] { $var }nd
    }

A test case:
https://github.com/mozilla-l10n/pontoon-ftl/blob/master/en-US/demo.ftl#L53

[jamesking]

My colleague @elisehein would be best placed to do a review :)

[elisehein]

Thank you for this, it looks good to me! Tested and entering a translation with an ordinal number selector works as expected 👍

[mathjazz]

Thanks for the review, I'm glad this is helpful! :)