A simple yet powerful and extensible React Markdown Editor that aims to have feature parity with the Github Markdown editor. React-mde-headless has no 3rd party dependencies.
npm i react-headless-mde
import { boldCommand, italicCommand, linkCommand, useTextAreaMarkdownEditor } from 'react-headless-mde';
export const MarkdownEditor = () => {
const { ref, commandController } = useTextAreaMarkdownEditor({
commandMap: {
bold: boldCommand,
italic: italicCommand,
link: linkCommand,
},
});
return (
<div>
<button
onClick={() => {
commandController.executeCommand('bold');
}}
>
B
</button>
<textarea ref={ref} />
</div>
);
};
quote
strikethrough
orderedList
unorderedList
checkedList
codeBlock
PR's are welcome!
React-mde-headless does not automatically sanitize the HTML preview. If you are using Showdown, this has been taken from their documentation:
Cross-side scripting is a well known technique to gain access to private information of the users of a website. The attacker injects spurious HTML content (a script) on the web page which will read the user’s cookies and do something bad with it (like steal credentials). As a countermeasure, you should filter any suspicious content coming from user input. Showdown does not include an XSS filter, so you must provide your own. But be careful in how you do it…
You might want to take a look at
React-mde-headless is MIT licensed.
Created by André Pena. Maintained and developed by https://github.com/webbrother.