Closed sakulstra closed 3 years ago
@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!
Any update on this?
@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
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 ?
@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 :)
@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.
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?
The solution posted above won't work for redux
connected components: https://github.com/RIP21/react-simplemde-editor/issues/47#issuecomment-396070490
@msrshahrukh100 I think this can be achived with react
portals api,
look for the .editor-preview
element.
As we have a pretty good workaround I guess this shall be closed. If anyone wants to improve it, welcome to the codebase :)
Hello, I tried to integrate this in a project where we use
react-markdown
and would like to use theReactMarkdown
Component inpreviewRender
to keep preview and live rendering consistent - sadlypreviewRender
expects astring
as far as i can see. So sth like:is currently not possible.