previewRender should allow a react component as return value

[sakulstra]

Hello, I tried to integrate this in a project where we use react-markdown and would like to use the ReactMarkdown Component in previewRender to keep preview and live rendering consistent - sadly previewRender expects a string as far as i can see. So sth like:

<SimpleMDE
          value={this.state.text}
          onChange={this.setText}
          options={{
            previewRender (text) {
              return <ReactMarkdown
                source={text}
                renderers={{
                  CodeBlock: CodeRenderer,
                  Code: CodeRenderer
                }}
              />
            }
          }}
        />

is currently not possible.

[RIP21]

@sakulstra Hi. I took over this project. If you have any workarounds to PR I will be more than happy to support that. If I will have time to watch into this I will let you know. But if you already have a solution please PR welcome!

[binaryhq]

Any update on this?

[RIP21]

@ningappa unfortunately not. I'm still very busy, and having hard times in private life. You can take a look, code is quite simple. Maybe somewhere in April I'll have time for that, but I cannot guarantee anything, sorry

[btzr-io]

Workaround ( I didn't test this ) :upside_down_face:

   previewRender(plainText) {
     const preview = <MarkdownPreview content={plainText}/>;
     return ReactDOMServer.renderToString(preview);
   }

@RIP21 Is there a better way to do this ?

[RIP21]

@btzr-io :D Should work tho.

@ningappa Make JSX in the preview seems impossible for me. We just expose here an option object here that basically create a new instance of SimpleMDE that we make controllable using React, we are unable to intervene into the previewRenderer here to make it JSX controllable. I will dig into the docs of SimpleMDE now but I'm not sure whether it's possible. A workaround of @btzr-io looks good, not sure about the performance of such tho, and whether this function works on non-Node.js environment but web :)

[RIP21]

@btzr-io Just tested it. WORKS PERFECTLY :D

import ReactDOMServer from "react-dom/server";

<SimpleMDEReact
          label="Markdown Editor"
          value={this.state.textValue1}
          onChange={this.handleChange1}
          options={{
            previewRender(plainText) {
              return ReactDOMServer.renderToString(<div>LOL</div>);
            }
          }}
        />

Giving me perfect LOL in the preview :D

@ningappa use code above to solve your issue :)

Will update Readme.md now.

[msrshahrukh100]

Hi! Is there any way I can use a component as previewRender which has javascript and somehow not using the renderToString as it makes it a plain html?

[btzr-io]

The solution posted above won't work for redux connected components: https://github.com/RIP21/react-simplemde-editor/issues/47#issuecomment-396070490

[btzr-io]

@msrshahrukh100 I think this can be achived with react portals api, look for the .editor-preview element.

[RIP21]

As we have a pretty good workaround I guess this shall be closed. If anyone wants to improve it, welcome to the codebase :)