Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with quotes in inline styles and image backgrounds #28

Closed
manuelro opened this issue Jun 2, 2017 · 7 comments
Closed

Issues with quotes in inline styles and image backgrounds #28

manuelro opened this issue Jun 2, 2017 · 7 comments

Comments

@manuelro
Copy link

manuelro commented Jun 2, 2017

This little snippet does a great job reconciling ReactJS with any static HTML from the server without having to use NodeJS server rendering -although that would be the best thing to do- however, not in my case since I am using Drupal as the back-end and I simply need to get the server produced HTML, combine it with ReactJS components and create a new components tree. The webpage works even without JS (as an edge case). But I'm having some issues with inline styles and quotes escaping, more exactly when I pass in a static image URL to the background property of a div:

The HTML

<div class="page-section--teaser__image" style="background-image: url(http://lorempixel.com/400/200)"></div>

The error

GET http://localhost:3000/http 404 (Not Found)

The component

class App extends Component{
  render(){
    var html = $('#container').html();
    var reactElement = htmlToReactParser.parse(html);

    return (
      <div>
        <Nav/>
        This is a React App
        {reactElement}
      </div>
    )
  }
}

As you can see this is trimming the URL and removing everything after the first :, therefore the URL address which should be treated as an external URL is being treated as a relative path. Any ideas of what's going on? I guess it has to do with escaping issues.

@aknuds1
Copy link
Owner

aknuds1 commented Jun 2, 2017

The fastest would be if you could make a PR with a simple test reproducing your issues.

@brett-nuske-alliancesoftware
Copy link

brett-nuske-alliancesoftware commented Jun 9, 2017

+1

My first guess is that it has to do with the split(:) in createStyleJsonFromString in utils.js so a style definition like "background-image: url(http://mydomain.com/file.jpg)" is being broken up.

@aleemb
Copy link

aleemb commented Jun 12, 2017

I ran into the same thing. Fails with URLs as well as inlined base64 images:

<div style="background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC);width:100px;height:100px"></div>

@aleemb
Copy link

aleemb commented Jun 12, 2017

The error occurs in createStyleJsonFromString

Uncaught TypeError: Cannot read property 'length' of undefined
    at createStyleJsonFromString (all.e42a346….js:7280)
    at XWrap.f (all.e42a346….js:7297)
    at XWrap.webpackJsonp../node_modules/ramda/src/internal/_xwrap.js.module.exports.XWrap.@@transducer/step (all.e42a346….js:14396)
    at _arrayReduce (all.e42a346….js:14217)
    at _reduce (all.e42a346….js:14250)
    at f3 (all.e42a346….js:13931)
    at Object.createElement (all.e42a346….js:7292)
    at Object.processDefaultNode [as processNode] (all.e42a346….js:7207)
    at traverseDom (all.e42a346….js:7144)
    at all.e42a346….js:7157

@aknuds1
Copy link
Owner

aknuds1 commented Jun 12, 2017

Could someone submit a PR including a simple test please? It'd be resolved faster like this.

@brett-nuske-alliancesoftware
Copy link

brett-nuske-alliancesoftware commented Jun 12, 2017

Submitted a pull request for you @aknuds1 ... #31

@aknuds1
Copy link
Owner

aknuds1 commented Jun 13, 2017

Fixed by #31, thanks @brett-nuske-alliancesoftware!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants