CODEWITHSUNDEEP
javascriptreactjsnext.jswysiwygsimplemde
InterstellarX
InterstellarX

Reputation: 794

How can I show the generated HTML instead of the Markdown in react-simplemde-editor for a blog/writing application?

Hi Stackoverflow — I am trying to render SimpleMDE (https://github.com/sparksuite/simplemde-markdown-editor) but in the editing window, I want to show the user their generated HTML rather than the Markdown. For the people that are editing the text input, I don't want them to see **this is bolded now** but rather: this is bolded now

Is there a way to render the SimpleMDE component but edit the properties to remove the Markdown formatting, but just show exactly what the formatting does?

I am using NEXTjs and here is a bit of what I have so far:

import dynamic from 'next/dynamic'
const SimpleMDE = dynamic(() => import('react-simplemde-editor'), {
    ssr: false,
});
import 'easymde/dist/easymde.min.css'

function CreatePost() {
   return (
        <div>
            <h1 className="text-3xl font-semibold tracking-wide mt-6">Create New Post</h1>
            <SimpleMDE 
                value={post.content}
                onChange={(value) => setPost({...post, content: value})}
            />
            
            <button 
                type="button"
                className="mb-4 bg-blue-600 text-white font-semibold px-8 py-2 rounded-lg"
                onClick={createNewPost}
            >
                Create Post
            </button>
        </div>
        
    )

Upvotes: 0

Views: 1085

Answers (0)

Related Questions