Whoops. I posted it so often recently and forgot to add it here. My apologies.
The problem is likely that I am not using “marked” for the markdown because the moment I looked it up I found out that it shouldn’t be used at all because of the “dangerouslySetInnerHTML” thing, which I know nothing about other than to avoid it.
So, I used the most popular one, react-markdown. Maybe FCC just hasn’t updated their test suite in awhile?
I have no idea how the react-markdown component is dealing with keyup.
I was thinking how strange it is that there is so little information about each React component on https://www.npmjs.com when I remembered something lasjorg said about looking in the node_modules folder. I found the react-markdown folder and looked all around for anything useful. Nothing.
This is getting weird. When I was learning about SwiftUI it was like this too… kind of mysterious and hard to just go look things up when you need to.
Anyone know anything about that? Maybe I just don’t know where to look yet.
Ya, there is a chance that the tests do not work properly with the react-markdown component. I think using that component might perhaps violate the “spirit” of the challenge. I’m not saying you are cheating in any way. The rules don’t necessarily appear to prohibit it. But I think the intention was to have you create the markdown editor and previewer yourself instead of just adding one with react-markdown.
So if you want to pass all of the tests then you might need to ditch react-markdown and go with the marked library instead.
At this point it looks like it would be quicker to just make another stripped down version using the obsolete methods described by FCC and put on codepen or something.
I think my mistake was thinking that these FCC projects could be used to build more fleshed out apps for a portfolio. I mean, maybe they could. But, only after creating some simple version to pass the tests? Okay. Well, now I know so if I do any more they’ll be a breeze.
That’s weird. You were able to make a quote. The last two I tried failed. This post has a quote too. Let’s see if it works this time.
I don’t understand why the people here would gang up on me like this. All I said was it is a bit alarming to hear the c word in this context. It seems over the top and extreme to even imply it by saying it like, "I’m not saying this… but, "
And, then he proceeds to say something I did is out of the spirit of the test, which is like another weak way of implying the same thing.
It’s pretty obvious if you aren’t trying to defend ugly behavior like that.
But, I really don’t care and I humbly ask everyone to stop trying to sabotage this thread with misunderstandings. I would like to get to the bottom of why the FCC test suite is apparently not working, or why my code doesn’t pass when the app does what is required as far as I can tell.
I think it was just a misunderstanding. As said, there really isn’t much difference between using a plain lib or a component lib. Although, I’d prefer a component lib with React so I’d say your solution is if anything “better”.
I can sort of fix the issue.
Switch to the old React render (or downgrade to React 17). It is also possible that using the flushSync hook might work (it has to be used by wrapping the setters).
I believe the preview id has to be on the direct parent of the markdown. But the component library does not support passing ids (which is a bit sad). If you use the components prop you can pass the id and class from the parent container. It is pretty convoluted. Below is an example.
For the last test you can add the remark-breaks plug-in (used in the example above).
The initial load test still fails. Not sure if it is just the fetch that is too slow or what, but if I replace the markdown file with just some inline markdown inside a template string it passes the test. Anyway, I didn’t yet find a solution to using the markdown file and still have it pass the test. I guess you might have two versions of the project (with the test and not a markdown file, and without the test and with the markdown file).
Edit remarks: I had written about the highlighter not working but I now see why the highlighter didn’t work for me, it has to be a code fence with the language specified.