|
4 | 4 | [](https://bundlephobia.com/result?p=react-mde) |
5 | 5 | [](https://twitter.com/andrerpena) |
6 | 6 |
|
7 | | -A simple yet powerful and extensible **React Markdown Editor**. React-mde has no 3rd party dependencies. |
8 | | - |
9 | | -- Check the 10.0.0 breaking changes on how to migrate from 9.*: https://github.com/andrerpena/react-mde/releases/tag/10.0.0 |
10 | | -- Check the 9.0.0 breaking changes on how to migrate from 8.*: https://github.com/andrerpena/react-mde/releases/tag/9.0.0. |
| 7 | +A simple yet powerful and extensible **React Markdown Editor** that aims to have feature parity with the Github Markdown editor. React-mde has no 3rd party dependencies. |
11 | 8 |
|
12 | 9 | ## Demo |
13 | 10 |
|
14 | 11 | - [Demo](http://andrerpena.me/react-mde/) |
15 | 12 | - [CodeSandbox Demo JSX ](https://codesandbox.io/s/react-mde-latest-5i5ov?file=/src/index.js) |
| 13 | +- [CodeSandbox Demo JSX - Using ReactMarkdown instead of Showdown](https://codesandbox.io/s/react-mde-latest-forked-f9ti5?file=/src/index.js) |
16 | 14 | - [CodeSandbox Demo TSX ](https://codesandbox.io/s/react-typescript-i3wju?file=/src/index.tsx) |
17 | 15 | - [CodeSandbox Demo TSX - Customized toolbar](https://codesandbox.io/s/react-typescript-m7cbx?file=/src/index.tsx) |
18 | 16 | - [CodeSandbox Demo TSX - Custom command](https://codesandbox.io/s/react-typescript-icqgv?file=/src/index.tsx) |
19 | 17 |
|
20 | | -## Goal |
21 | | - |
22 | | -The goal is to make react-mde to look and behave like the Github's Markdown editor. These are the major remaining features/changes. I plan to tackle them in orde but if you want to help, that would be amazing. |
23 | | - |
24 | | -- [ ] [Design improvements](https://github.com/andrerpena/react-mde/issues/207) |
25 | | -- [ ] [Image upload support](https://github.com/andrerpena/react-mde/issues/189) |
26 | | - |
27 | 18 |
|
28 | 19 | ## Installing |
29 | 20 |
|
30 | 21 | npm i react-mde |
31 | 22 |
|
32 | | -## Markdown Preview |
33 | | - |
34 | | -React-mde is agnostic regarding how to preview Markdown. The examples will use [Showdown](https://github.com/showdownjs/showdown) |
35 | | - |
36 | | - npm install showdown |
37 | | - |
38 | | -It is also possible to return a Promise to React Element from `generateMarkdownPreview`, which makes |
39 | | -it possible to use [ReactMarkdown](https://github.com/rexxars/react-markdown) as a preview. [View issue](https://github.com/andrerpena/react-mde/issues/161). |
40 | | - |
41 | 23 | ## Using |
42 | 24 |
|
43 | 25 | React-mde is a completely controlled component. |
@@ -75,6 +57,13 @@ export default function App() { |
75 | 57 | } |
76 | 58 | ``` |
77 | 59 |
|
| 60 | +## Markdown Preview |
| 61 | + |
| 62 | +React-mde is agnostic regarding how to preview Markdown. The prop `generateMarkdownPreview` should return a Promise of either a string or a `ReactElement`. |
| 63 | +- [Demo using Showdown ](https://codesandbox.io/s/react-mde-latest-5i5ov?file=/src/index.js) |
| 64 | +- [Demo using ReactMarkdown](https://codesandbox.io/s/react-mde-latest-forked-f9ti5?file=/src/index.js) |
| 65 | + |
| 66 | + |
78 | 67 | ### Customizing Icons |
79 | 68 |
|
80 | 69 | React-mde comes with SVG icons extracted from [FontAwesome](https://fontawesome.com/). |
|
0 commit comments