Hello campers,
This is my second front end libraries project I did a couple weeks ago. Actually I’m already working on the fourth project, but I just don’t want to missed opportunity to get some feedback from you guys, which I always found really helpful. Hope you guys would give some of your thoughts about it. Thank you in advance 
Link: FCC - Markdown Previewer
Hi @dwisatriow !
I think your page looks good!
I don’t know how you are building the calculator project but I would challenge you to consider using hooks for one of these projects.
So maybe for the clock you can play around with using hooks instead of classes.
Hooks are not taught in the current curriculum but I think it would be good to be familiar with it.
This is just my opinion and completely optional but maybe something you would want to consider.
I’m trying to paste markdown text that I have into your editor and instead of anything being pasted the entire page “disappears”. That is, all I see is the background and the FCC test menu. The header, editor, previewer and footer all disappear. Not a good UX.
Edit: I can paste four lines. When I try and paste 5 (or more) lines that’s when everything is wiped out.
Hi @jwilkins.oboe,
Thanks for the feedback. I agree it’s a good thing to be familiar with hooks. And I actually have used it from my third project onward. And it make things easier.
Thank you
Hi @Roma,
Thanks for the nice review, but sadly I can’t reproduce the issue, I’ve pasted dozens line of markdown text and in my case everything woks fine. I’m not sure why does it happened. Can you suggest something to test out?
Thank you.
So that helped me and I tried a few things. This is the line that causes it go go south
-Your page passes <span style="color: red;">**xx/xx**</span> user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
To narrow it even further when I type that line in, it fails as soon as I type the angle bracket to close the opening span tag.
In other words, the failure occurs when the last character here is typed;
-Your page passes <span style="color: red;">
I’ve never had this happen with any previewer I’ve tested or used.
Thanks @Roma, I finally can reproduce the issue on the codepen.
But when I tried to paste the text you gave to the app on the local environment, the app page doesn’t dissappear, but I don’t know if it previewing the right output, the image will be given below.
And initially, I build the app on the local environment first with react-html-parser to parse the html but then when I moved the code to codepen the parser doesn’t works, so I use html-react-parser (note that the name quite similiar with the previous one) on the codepen to make the app works.
So probably the error is caused by the parser. Here is the output on local environement which use the different parser than the one on the codepen, does it showing the right output or should it displaying the span tag too?
That output that you show is correct.
Ok @Roma, I think I will just try to change the html parser on the codepen with another one. Thank you
I think there is something funky with the html-react-parser library. When I set a CSS style on an element your app crashes and I get the following console error:
Uncaught TypeError: styleToJS is not a function
The error is pointing to line 53 in html-react-parser.js. Looking at html-react-parser.js I see the following near the top:
import require$$0 from "/-/style-to-js@v1.1.0-D4OLrVO2GnUfbfWScQQj/dist=es2020,mode=imports/optimized/style-to-js.js";
var styleToJS = require$$0.default;
Obviously something is not working right because styleToJS is being reported as not a function in the error message.
I was able to work around this by removing html-react-parser and using dompurify instead (it’s what I used in my version of this project).