Add support for React/JSX in the editor #377
Conversation
timothycpoon
commented
Oct 29, 2020
timothycpoon
commented
- Add support for React/JSX in the editor
- Use constants for language names throughout code
timothycpoon
force-pushed
the
tpoon/react_editor
branch
2 times, most recently
from
d8ffff3
to
70a12ef
Compare
There was a problem hiding this comment.
Hey Timothy, thanks for digging into the editor code to make this happen. This looks good to me right now, but I would like to wait until the backend changes are merged to give it the good-to-go.
Only comment I have is that I wish we could avoid inline styling in the React container. Any thoughts?
There was a problem hiding this comment.
Hey Timothy thank you for all your work! Sorry for the slowdown. Here's what I got for you:
- MaterialUI would be nice to have, but right now for some reason it isn't keeping the script tag in the output (see below).
- It would be nice if the iframe that the React was drawn into had a more obvious box. Give it a background and some minimum dimensions and it should be okay. My only concern here is that right now it isn't very obvious where your code output is, and it gives a strange vibe that the console is our output.
Here's the screenshot for the MaterialUI business:
The <head> tag for the iframe shows up like this:
<head>
<style>html,body: {margin:0, width:100%}</style>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin=""></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin=""></script>
<style>
#inner {
height:100px;
background-color:#222;
color: #DDD;
font-family: monospace;
word-wrap:break-word;
overflow:auto;
margin: 10px auto;
position:relative;
padding: 10px 35px 10px 10px;
width: 100%;
box-sizing: border-box; /* For IE and modern versions of Chrome */
-moz-box-sizing: border-box; /* For Firefox */
-webkit-box-sizing: border-box; /* For Safari */
}
#output { margin: 0px 10px; display: block; position: relative;}
#closeConsoleButton { position: fixed; top: 20px; right: 30px; color: #ddd;}
</style>
<script>"use strict";
<!-- ... -->
</script>
</head>
timothycpoon
force-pushed
the
tpoon/react_editor
branch
from
f58c90e
to
69c6f03
Compare
|
Added a simple white box around the output. Not sure what the issue is with MaterialUI, but I cannot reproduce it on my end. Maybe it's a caching issue or something like that? |
There was a problem hiding this comment.
Maybe it's a caching issue or something like that?
I test with cache disabled, so I'm quite sure it isn't. I think the issue is the Netlify deploy, since I think it is deploying the go-requests commit. Testing locally, I see your changes, and see the output working as expected. Only thing that will need a little changing is the output window:
- The output should be flush to the console edges (remove margin)
- The output container should keep a small amount of padding (we use
10px 35px 10px 10pxfor the console output)
Other than that, you're good to go. Thanks Timothy!
