How to make a textarea take markdown properties (HTML) - html

Question

How do I use markdown properties in a HTML text area, a little like stack overflow's body area?
Of course I have my standard text area made out like this:
<textarea className="form__input form__group"
value={body}
onChange={e => setBody(e.target.value)} />
But I would like to be able to use markup/markdown tags in my text area to then get an output for when the post is made.
for example:
# Hello there,
> I want to be able to make mytext area be able to take this and then output markdown style body.
Hello there,
I want to be able to make mytext area be able to take this and then output markdown style body.

Answer 1

I would suggest using a library to assist with the markdown. I have used this one before and it works quite well: https://uiwjs.github.io/react-md-editor/
install: npm i #uiw/react-md-editor
Import into react: import MEditor from "#uiw/react-md-editor";
Then just use the MEditor and MEditor.markdown components to input and show your markdown.
There is way more info in the docs so just read https://uiwjs.github.io/react-md-editor/

Answer 2

I also use #uiw/react-md-editor as Croc suggested.
I would also recommend taking care of malicious scripts that untrusted bad actors/users may abuse.
Unfortunately, that's not well documented in the library documentation so here's how you may want to do it:
In edit mode:
<MDEditor
value={value}
autoFocus={false}
onChange={handleChange}
previewOptions={{ skipHtml: true, escapeHtml: true, transformLinkUri: null, linkTarget: '_blank' }}
/>
In preview/read-only mode:
<MDEditor.Markdown source={value} escapeHtml={true} skipHtml={true} transformLinkUri={null} />

Answer 3

Please try this code, To How to make a textarea take markdown properties (HTML).
<form>
<input name="title" type="text" placeholder="Title?" />
<textarea name="content" data-provide="markdown" rows="10"></textarea>
<label class="checkbox">
<input name="publish" type="checkbox"> Publish
</label>
<hr/>
<button type="submit" class="btn">Submit</button>
</form>
I hope this code will be useful to you.
Thank you.

Answer 4

I use react-markdown-editor-lite in most of my projects.
// import react, react-markdown-editor-lite, and a markdown parser you like
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
// import style manually
import 'react-markdown-editor-lite/lib/index.css';
// Register plugins if required
// MdEditor.use(YOUR_PLUGINS_HERE);
// Initialize a markdown parser
const mdParser = new MarkdownIt(/* Markdown-it options */);
// Finish!
function handleEditorChange({html, text}) {
console.log('handleEditorChange', html, text)
//You can use the text props to save it to your database
}
export default (props) => {
return (
<MdEditor
style={{ height: "500px" }}
renderHTML={(text) => mdParser.render(text)}
onChange={handleEditorChange}
/>
)
}