Allow preview component to accept React object

[ramast]

I use react-markdown to turn markdown text into html native react component.
When passing this to generateMarkdownPreview function, it render it as [Object].

Is there a possibility to make a simple check if the data is string then assume it's html and handle it as you do now, if it's instance of Component then render it as it is?

[andrerpena]

I think it makes sense and I will do it.. But question. Why do you use React mde to turn markdown into React Component? You should not do that. If you want to convert markdown into React, just use Showdown to get the HTML and then set the HTML into a div or whatever using dangeriouslySetHtml like this: https://github.com/andrerpena/react-mde/blob/master/src/components/MdePreview.tsx#L47

[ramast]

Thank you!

When a user enter markdown text (through react mde or any other means), I'd eventually need to render his text in my webpage.

I could use Showdown as you mentioned but a much simpler solution in my opinion is using native react component to render markdown. Like that:

import ReactMarkdown from "react-markdown"
 .....
 <ReactMarkdown source={user_input} />

Super simple and safe because html escaping is on by default.
So that's why I chose ReactMarkdown.

Now another feature is being able to show the user a live preview of what he is typing. I could accomplish that by installing yet another dependency Showdown but I obviously would rather avoid that.

[andrerpena]

Sorry for the delay but it is now released on 7.4

[andrerpena]

Wow I really liked the idea of ReactMarkdown. The fact it has XSS protection is amazing. I will update the documentation now that it is possible. Thank you very much

[andrerpena]

Fixed on 4ce9778

[oskarleonard]

@andrerpena seems like that commit is not related to this issue.

How would one use this with ReactMarkdown. It now says in the readme "Starting from version 7.4, it is also possible to return a React Element from generateMarkdownPreview"
So the api now looks like:
generateMarkdownPreview: (markdown: string) => Promise;
or
generateMarkdownPreview: React Element

So an example with ReactMarkdown would be

      <ReactMde
        value={value}
        generateMarkdownPreview={<ReactMarkdown source={value} />}
      />

or

      <ReactMde
        value={value}
        generateMarkdownPreview={(markdown) => <ReactMarkdown source={markdown} />}
      />

[andrerpena]

@oskarleonard It's the second one. This is so that you have the opportunity to make Ajax calls to resolve the promise, if you want

[andrerpena]

@oskarleonard, also, I updated the ReadMe to make it clearer that you should always return a Promise

[Android3000]

Just to be clear since this post is linked on the main page, oskarleonard's second example is almost there:

<ReactMde
        value={value}
        generateMarkdownPreview={(markdown) => 
                  Promise.resolve(<ReactMarkdown source={markdown} />)
        }
/>

As it states in the docs, it must always return a promise.