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>
);
};- headingLevel1
- headingLevel2
- headingLevel3
- headingLevel4
- headingLevel5
- headingLevel6
- quote
- checkedList
- orderedList
- unorderedList
- bold
- code
- codeBlock
- italic
- strikethrough
- image
- link
New API discussion here
- Undo/Redo commands
- Check execution on SSR (For example, Next.js) and, if necessary, regenerate eslint config, taking into account execution on node.js
- peerDependencies React?
- Undo for
- 1st priority
- all headers
quotestrikethrough
- 2nd priority
orderedListunorderedListcheckedListcodeBlock
- 1st priority
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.