prepare_original() mangles HTML tags if glossary entry for & exists

[ocean90]

Original report: https://meta.trac.wordpress.org/ticket/3344

Example: https://translate.wordpress.org/projects/wp-plugins/insert-headers-and-footers/dev/sv/default?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=693346&filters%5Btranslation_id%5D=53182480

Screenshots:

The HTML:

<p class="original">These scripts will be printed above the &lt;code<span class="glossary-word" data-translations="[{&quot;translation&quot;:&quot;och&quot;,&quot;pos&quot;:&quot;noun&quot;,&quot;comment&quot;:&quot;&quot;,&quot;locale_entry&quot;:&quot;&quot;}]">&</span>gt;&amp;lt;/body<span class="glossary-word" data-translations="[{&quot;translation&quot;:&quot;och&quot;,&quot;pos&quot;:&quot;noun&quot;,&quot;comment&quot;:&quot;&quot;,&quot;locale_entry&quot;:&quot;&quot;}]">&</span>amp;gt;&lt;/code<span class="glossary-word" data-translations="[{&quot;translation&quot;:&quot;och&quot;,&quot;pos&quot;:&quot;noun&quot;,&quot;comment&quot;:&quot;&quot;,&quot;locale_entry&quot;:&quot;&quot;}]">&</span>gt; tag.</p>

[jyourstone]

Any progress on this?

If it can't get fixed in the near future I'll remove the glossary entry for "&" in the meantime.

[toolstack]

No motion at this time, I'd remove the glossary term for now.

[toolstack]

The mangling is caused because we escape the translation before processing the glossary entries. The causes some of the html entities to get identified as a term instead of being left alone.

The obvious solution (of not escaping until after the glossary terms have been added) doesn't work as we would then escape the spans used for the glossary terms, breaking the popups.

The solution is to process the original a chunk at a time, I'll have a PR shortly to implement this.

[toolstack]

The PR will now show the original as:

Note the ampersand near the end is correctly highlight without mangling the code tags.

And by correctly I mean that since the original contains html entities, and the & is a valid word break character (think of something like Proctor&Gamble) it will get highlighted as a glossary term (body&gt gets split in to two words "body" and "gt").

Note: I added a couple of extra glossary terms to my test install which is why; these, the and will are marked as terms as well in the screenshot.