Data HTML attributes mangled when publishing post

Developer help
1

I am using the hosted version of Ghost. I am using a piece of custom code to render interactive graphs inside the body of the text.

To do this, I am setting the data attributes of an HTML element that the custom code can read to set the values of a graph. This is working perfectly when I am previewing my posts, however when I publish the code, the values of the HTML data attributes are getting mangled and converted into lower case (which means my code can’t read them).

For example, I am adding this to an HTML block in the editor:

<div class="blog-graph-root" data-graph-type="pie" data-graph-name='The "all-in" cost of a grant'
  data-graph-data='[   {     "name": "Not applying",     "value": 1700   },   {     "name": "Applicants",     "value": 1400   },   {     "name": "Reporting",     "value": 500   },   {     "name": "Funder  Costs",     "value": 3000   } ]'></div>

This is then being converted into:

<div class="blog-graph-root" data-graph-type="pie" data-graph-name="The " all-in"="" cost="" of="" a="" grant"="" data-graph-data="[   {     " name":="" "not="" applying",="" "value":="" 1700="" },="" {="" "name":="" "applicants",="" 1400="" "reporting",="" 500="" "funder="" costs",="" 3000="" }="" ]"=""></div>
2

Looks like Ghost is rewriting outer ' ' marks to be " " marks.

If you can move your quotes around, this gets through unchanged:

<div data-graph="The 'all-in' cost">hello</div>

While this gets rewritten:

<div data-graph='The "all-in" cost'>hello</div>

to

<div data-graph="The "all-in" cost">hello</div>

Another option if that string is just for display would be to use a different quote that’s /not/ understood by HTML, or to encode the quote. Unicode.Category.QuoteMarks — Unicode v1.12.0
Example

<div data-graph='The “all-in” cost'>hello</div>

after rewrite by Ghost:

<div data-graph="The “all-in” cost">hello</div>
3

Thanks for the report. This is a bug somewhere between the HTML card rendering and Ghost outputting the final page, it looks like we have a parse+edit+re-render step that is not handling the quotes properly. I’ve created an issue to track the fix.

In the meantime, you could try using a Markdown card instead, or fully escaping your content with HTML entities, e.g:

<div class="blog-graph-root" data-graph-type="pie" data-graph-name="The &quot;all-in&quot; cost of a grant" ...
1 Like
4

Yes, I have fixed this by base64 encoding my values, but thought I would flag.

2 Likes