search

progital / gatsby-wpgraphql-inline-images

Solution for Gatsby and WPGraphQL sourced content. Downloads images locally.
MIT License
35 stars 12 forks source link

Cleaned up   in decoded html #13

Closed robmarshall closed 5 years ago

robmarshall commented 5 years ago

Due to Cheerio needing the content to be decoded to work its replace magic, I was not able to use the decodeEntities: false flag. I have had to make a slight work around to replace with spaces.

It is a relatively small change, but fixes this issue :)

Cheers, Rob

progital commented 5 years ago

I'm curious if someone would need   to be preserved. How would we go about it?

progital commented 5 years ago

closes #12

robmarshall commented 5 years ago

It is preserved. Or rather, replaced.

Cheerio decodes the entities into elements, meaning the browser sees the &nsbp; entity as '&nsbp;'. I have just replaced the string with a space in JSX, which is exactly what a &nsbp; is before being decoded.

Make sense?

progital commented 5 years ago

I finally got to testing this. My concern is that   is not simply a whitespace and replacing it with a whitespace may be an issue for some users. I tried adding decodeEntities: false to https://github.com/progital/gatsby-wpgraphql-inline-images/blob/6c360a75202e5f9bdff92a3f092e5290da42dcc2/src/sourceParser.js#L73 and   were properly processed. Could you confirm if it solves your issue?

robmarshall commented 5 years ago

It works perfectly on pages that have an   within the content, but pages that don't get an error in the contentParser function.

I wonder if using something like he combined with Cheerio, or in the contentParser would clear this up?

progital commented 5 years ago

What error? Could you elaborate? No errors for me.

robmarshall commented 5 years ago

I was trying to work out the solution. A bit confusing.

It seems that when the sourceParser doesnt decode entities, it turns any image strings into objects.

When the contentParser tries to get the the fluidData, it can only get the first curly bracket of the object, as apposed to the whole string.

https://github.com/progital/gatsby-wpgraphql-inline-images/blob/6c360a75202e5f9bdff92a3f092e5290da42dcc2/src/contentParser.js#L88

This then kills the whole process with this error: Uncaught SyntaxError: Unexpected end of JSON input

An example of the image node being returned correctly: {"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUBAwT/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAdtK+BuLjE//xAAZEAACAwEAAAAAAAAAAAAAAAABAgAQEwP/2gAIAQEAAQUC1SaKemi0pNf/xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8BTJ//xAAWEQEBAQAAAAAAAAAAAAAAAAAAERL/2gAIAQIBAT8Brb//xAAXEAADAQAAAAAAAAAAAAAAAAAAEDER/9oACAEBAAY/AqaVRf/EABoQAQEAAgMAAAAAAAAAAAAAABEBABAhQeH/2gAIAQEAAT8hbzgF0J3ocyWmKKXX/9oADAMBAAIAAwAAABDML//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxBlk//EABYRAQEBAAAAAAAAAAAAAAAAAAARcf/aAAgBAgEBPxCIy//EABsQAQEAAgMBAAAAAAAAAAAAAAERACExQWFx/9oACAEBAAE/EF9Od5WEEMA0R3rKbDH7gE78s7zRbTGjk8z/2Q==","aspectRatio":1.3333333333333333,"src":"/static/dc87865f12686f7f0bc7485dcb41096b/a296c/endure-24-1-2.jpg","srcSet":"/static/dc87865f12686f7f0bc7485dcb41096b/0fa0d/endure-24-1-2.jpg 345w,\n/static/dc87865f12686f7f0bc7485dcb41096b/8c996/endure-24-1-2.jpg 690w,\n/static/dc87865f12686f7f0bc7485dcb41096b/a296c/endure-24-1-2.jpg 800w","srcSetType":"image/jpeg","sizes":"(max-width: 800px) 100vw, 800px","originalImg":"/static/dc87865f12686f7f0bc7485dcb41096b/a296c/endure-24-1-2.jpg","originalName":"endure-24-1-2.jpg","presentationWidth":800,"presentationHeight":600,"srcSetWebp":"/static/dc87865f12686f7f0bc7485dcb41096b/fdd64/endure-24-1-2.webp 345w,\n/static/dc87865f12686f7f0bc7485dcb41096b/de8ee/endure-24-1-2.webp 690w,\n/static/dc87865f12686f7f0bc7485dcb41096b/0cbce/endure-24-1-2.webp 800w"}

When decoded, it returns this as an object. Which means the code on line 88: https://github.com/progital/gatsby-wpgraphql-inline-images/blob/6c360a75202e5f9bdff92a3f092e5290da42dcc2/src/contentParser.js#L88

Returns {

I think we need to let the content stay handled by the sourceParser as it currently is.

Maybe run a encode on entities right before the contentParser drops the content into the page?

progital commented 5 years ago

Thanks for explaining. I'm looking at it.

robmarshall commented 5 years ago

Not saying this is the final solution, but the example commit above removes any errors and allows correct   enitites.

I think that is the right direction. But we need to include other entities as well (maybe?)

progital commented 5 years ago

Ok, my solution is escaping the attribute value there https://github.com/progital/gatsby-wpgraphql-inline-images/blob/6c360a75202e5f9bdff92a3f092e5290da42dcc2/src/sourceParser.js#L207 Could you change that to $(item).attr('data-gts-encfluid', swapVal.encoded.replace(/"/g, '"')); and see if it helps.

edit: keeping decodeEntities: false

progital commented 5 years ago

Using he could be a more comprehensive solution but adding a package just for escaping may be too much.

robmarshall commented 5 years ago

Nice! Perfect.

This is why I love open source. Didn't thing of that.

progital commented 5 years ago

Can I ask you to reset your branch and just add the necessary changes because the changed files tab contains package.json right now (and it wasn't changed). It's confusing.

progital commented 5 years ago

I prefer this approach git reset <commit hash> <-- commit before changes make changes, commit force push

robmarshall commented 5 years ago

Still getting to grips with console git. Give me 5

robmarshall commented 5 years ago

That should be good...

progital commented 5 years ago

Perfect. We don't need that commit history that nets zero changes. Only confuses someone who would look into it. Another way of doing this could be squashing commits when merging with other branch.

progital commented 5 years ago

published