Better support for HTML tags inside translated strings #58
Description
(This is a followup to Polyconseil/vue-gettext#93.)
As an example, let's look at the following simple Vue template:
<template>
<translate>
XXX
<div translate-name="NNN">foo</div>
YYY
</translate>
</template>Currently this is extracted as:
msgid ""
"XXX\n"
" <div translate-name=\"NNN\">foo</div>\n"
" YYY"
I would propose that instead of requiring HTML to be embedded inside translation, which opens your to XSS attacks, and which makes it possible only to use standard HTML but not things like Vue components inside translations, we would parse such string in a smarter way to allow Vue library like vue-gettext to render those HTML segments through Vue.
I would suggest that the above is parsed as:
msgid "XXX %{NNN} YYY"
Because it is HTML, we can collapse whitespace. Moreover, we provide a placeholder to interpolate the internal HTML in. So in a way, only top-level text nodes would be used and everything else would be delegated to placeholder and library to fill. translate-name can be used to control the name of the placeholder (otherwise by default we could use some sequence number).
We should also support parsing the case where internal <div> is translated as well. In that case foo should become another msgId.