ReactJS: ascii art issue after JSX transformation #4698
Description
I'm trying to get an ascii art to be properly rendered by my React application.
After jsx-transformer is executed my art looses the format and renders pretty strange in the browser. It seems to be related to not identifying line breaks properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var App = React.createClass({
render: function() {
return (
<pre>
<code>
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
This is just an example, and the real context is in a website generator that starts with markdown -> html -> jsx. That said, I cannot change the React.createClass element.
Someone proposed this:
var App = React.createClass({
render: function() {
var ascii = [
"+--------+ +-------+ +-------+",
"| | + ditaa + | |",
"| Text | +-------+ |diagram|",
"|Document| |!magic!| | |",
"| | | | | |",
"+---+----+ +-------+ +-------+",
].join('\n');
return (
<pre>
<code>
{ascii}
</code>
</pre>
);
}
});
It fixes the problem, but I cannot edit the markdown elements to reflect this. I'm more interested to know why JSX transformation is not identifying to line breaks inside code blocks.
Alan