npm i @sonwonjae/react-markdownareaimport { Markdownarea } from '@sonwonjae/react-markdownarea';
export default function Component() {
const [value, setValue] = useState('');
return (
<Markdownarea
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
onKeyDown={(e) => {
setValue(e.currentTarget.value);
}}
/>
);
}Markdownarea is just textarea.
but you can use textarea with markdown syntax
| Element | Markdown Syntax | Shortcut |
|---|---|---|
| Heading 1 | # H1 | - |
| Heading 2 | ## H2 | - |
| Heading 3 | ### H3 | - |
| Bold | **bold text** | CMD/CTRL + B |
| Italic | *italicized text* | CMD/CTRL + I |
| Bold-Italic | ***bold italicized text*** | - |
| Blockquote | > blockquote | - |
| Ordered List | 1. First item | - |
| Unordered List | - First item | - |
| Code | code |
CMD/CTRL + E |
| Horizontal Rule | --- | - |
| Link | title | CMD/CTRL + K |
| Image |  |
- |
| Element | Markdown Syntax | Shortcut |
|---|---|---|
| Code Block | ``` ... ``` | - |
| Strikethrough | ~~strike through text~~ | CMD/CTRL + D |
| Task List | - [ ] task item | - |
| Highlight | ==highlight text== | - |
-
tab
// 1. make blockquote > content // 2. press tab key >> content // 3. press tab key >>> content -
shift tab
// 1. make blockquote >> content // 2. press shift+tab key > content // 3. press shift+tab key // The shift+tab only works until only one blockquote remains. > content -
enter with blockquote has content
// 1. make blockquote > content // 2. press enter key // If you press Enter when you have content, a blockquote will be created at the bottom. > content > -
enter with blockquote has not content
// 1. make blockquote > content // 2. press enter key // If you press Enter when you have content, a blockquote will be created at the bottom. > content > // 3. press enter key // If you press Enter when you have not content, remove the blockquote from the current row. > content
Markdownarea provides the automatic ordering function of the order list.
-
tab
// 1. make ordered list 1. content 1 2. content 2 3. content 3 // 2. press tab key with second row 1. content 1 1. content 2 2. content 3 // 3. press tab key with third row 1. content 1 1. content 2 2. content 3 -
shift tab
// 1. make ordered list 1. content 1 1. content 2 2. content 3 // 2. press shift+tab key with second row 1. content 1 2. content 2 1. content 3 // 3. press tab key with third row 1. content 1 2. content 2 3. content 3 -
enter with order list has content
// 1. make ordered list 1. content 1 // 2. press enter key 1. content 1 2. content 2 // 3. press enter key 1. content 1 2. content 2 3. content 3 // 4. press tab key 1. content 1 2. content 2 1. content 3 // 5. press enter key 1. content 1 2. content 2 1. content 3 2. content 4 // 6. press enter key 1. content 1 2. content 2 1. content 3 3. content 4 // 7. press enter key 1. content 1 2. content 2 1. content 3 3. content 4 4. content 5 -
enter with order list has not content
// 1. make ordered list 1. content 1 // 2. press enter key 1. content 1 2. // 3. press enter key // If you press Enter when you have not content, remove the order list from the current row. 1. content 1
An Unordered List behaves similarly to an Ordered List.
-
tab
// 1. make ordered list - content 1 - content 2 - content 3 // 2. press tab key with second row - content 1 - content 2 - content 3 // 3. press tab key with third row - content 1 - content 2 - content 3 -
shift tab
// 1. make ordered list - content 1 - content 2 - content 3 // 2. press shift+tab key with second row - content 1 - content 2 - content 3 // 3. press tab key with third row - content 1 - content 2 - content 3 -
enter with order list has content
// 1. make ordered list - content 1 // 2. press enter key - content 1 - content 2 // 3. press enter key - content 1 - content 2 - content 3 // 4. press tab key - content 1 - content 2 - content 3 // 5. press enter key - content 1 - content 2 - content 3 - content 4 // 6. press enter key - content 1 - content 2 - content 3 - content 4 // 7. press enter key - content 1 - content 2 - content 3 - content 4 - content 5 -
enter with order list has not content
// 1. make ordered list - content 1 // 2. press enter key - content 1 - // 3. press enter key // If you press Enter when you have not content, remove the order list from the current row. - content 1
An Task List behaves similarly to an Unordered list.
-
tab
// 1. make ordered list - [ ] content 1 - [ ] content 2 - [ ] content 3 // 2. press tab key with second row - [ ] content 1 - [ ] content 2 - [ ] content 3 // 3. press tab key with third row - [ ] content 1 - [ ] content 2 - [ ] content 3 -
shift tab
// 1. make ordered list - [ ] content 1 - [ ] content 2 - [ ] content 3 // 2. press shift+tab key with second row - [ ] content 1 - [ ] content 2 - [ ] content 3 // 3. press tab key with third row - [ ] content 1 - [ ] content 2 - [ ] content 3 -
enter with order list has content
// 1. make ordered list - [ ] content 1 // 2. press enter key - [ ] content 1 - [ ] content 2 // 3. press enter key - [ ] content 1 - [ ] content 2 - [ ] content 3 // 4. press tab key - [ ] content 1 - [ ] content 2 - [ ] content 3 // 5. press enter key - [ ] content 1 - [ ] content 2 - [ ] content 3 - [ ] content 4 // 6. press enter key - [ ] content 1 - [ ] content 2 - [ ] content 3 - [ ] content 4 // 7. press enter key - [ ] content 1 - [ ] content 2 - [ ] content 3 - [ ] content 4 - [ ] content 5 -
enter with order list has not content
// 1. make ordered list - [ ] content 1 // 2. press enter key - [ ] content 1 - [ ] // 3. press enter key // If you press Enter when you have not content, remove the order list from the current row. - [ ] content 1
Licensed under the MIT license.