Markdown Previewer Help

JavaScript
1

Hello,

I’ve been stuck on this project for a couple days now and not sure if I can figure out the issues all on my own. I decided to take the React and Redux route to solve the challenge.

Here is my CodePen for reference: https://codepen.io/kwasek14/pen/YzvyPwO?editors=1111

Here are the issues I am facing:

  1. Test 3: #preview updates as text is entered into #editor. I don’t understand why this test does not pass. I am able to type various things inside the editor and the results appear in #preview. What am I missing?

  2. Tests 4 and 6: The #preview should render text as HTML. As mentioned in the User Story, we can just used marked.js . So whatever text I receive from the editor through Redux gets passed to marked.parse() on line 275. I then assign the HTML that was outputted to the dangerouslySetInnerHTML property. I assume that marked is doing its job under the hood and properly converting the markdown. From the looks of it, #preview is showing certain things, like headers, properly and others, like lists with indentations, not. When printing the parsed markdown to console, it shows HTML elements as a string. I also call setOptions() on marked to set breaks to true with no visible difference. Is there an issue with marked or am I using it incorrectly/not defining options properly? Also, if I’m able to print out HTML elements to the console, then why aren’t the tests recognizing the contents of #preview as HTML?

  3. Also related to marked is how #preview is appearing. Bullet points and numbers of lists are outside of the preview, as well as the FCC logo, which is gigantic. I don’t understand why it’s not contained within the preview. Is this a side-effect of using dangerouslySetInnerHTML?

Thanks in advance.

2

Hey, I haven’t been able to make complete sense of the code yet… lots of custom variables and multiple app containers, but did notice something that may be causing some of the failures… seems you are updating the Preview ONLY when a keyboard key is released.

For example, in the FCC sample page, if you hold down a key, say ‘d’, you’ll notice that d’s start writing across the editor, and it updates instantly in the preview. On yours though, the d’s print in the editor, but the preview won’t update until you let the d key go. Also, if you use the mouse to cut and paste something into your editor, the preview won’t update because there was never a keyboard up event.

I know in the tests it does mention (should update on every keyup), but I think you may actually want the preview to update anytime the content of the editor is changed, not only when someone releases a keyboard key (especially sense the tests may not be using simulated keyboard strokes to change your editor content).

Can’t guarantee that’s causing the failures, but something you may want to look into.

3

If you switch to the older render method it will pass.

ReactDOM.render(<AppWrapper />, document.getElementById("root"))

Or you can remove the keyUp code and just call updateNewPreview inside handleChange

handleChange(event) {
  this.props.updateNewPreview(event.target.value);
  this.setState({
    value: event.target.value
  });
}
4

@kinome79 and @lasjorg ,

Thank you for your help! The tests passed. The “key up” term in the test results confused me.

Also, I think specifically passing event.target.value instead of this.state.value into updateNewPreview() did the trick. Do you think this is because the old state value was being passed instead of the new text that the event was passing along from the textarea?

Thank you again!

5

Seeing as the initial code works with what is essentially React 17 (old render method) I’m guessing it is related to the batching they do now. So the state is stale but the event.target.value isn’t. The state is probably just a bit behind.

We did add delays to the tests to help with this but it often doesn’t seem to work (they might need to be longer).

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.