slate-md-editor
A markdown editor, that allows you to edit live. This project is built on top of slate framework. Support markdown syntax and hot keys.
Live
DEMO: https://canner.github.io/slate-md-editor/
Usage
There is two ways to use, you could use it as a complete markdown editor or use as a slate plugin in your editor.
Complete markdown editor
npm install slate-md-editor
Render the complete markdown editor
;const MdEditor = ; <MdEditor value=value onChange=thisonChange/>
Options
Pass your customized settings here.
slate-md-editor
build on top of various slate plugins, [xxxxOption]
will pass it's settings directly to corresponding plugins.
// default settings markdownOption: blocks: BLOCKS // https://github.com/GitbookIO/markup-it/blob/master/src/constants/blocks.js marks: MARKS // https://github.com/GitbookIO/markup-it/blob/master/src/constants/marks.js inlines: INLINES // https://github.com/GitbookIO/markup-it/blob/master/src/constants/inlines.js prismOption: // https://github.com/GitbookIO/slate-prism nodetype === 'code_block' nodedata codeOption: // https://github.com/GitbookIO/slate-edit-code nodetype === 'code_block' blockquoteOption: // https://github.com/GitbookIO/slate-edit-blockquote listOption: // https://github.com/GitbookIO/slate-edit-list types: 'ordered_list' 'unordered_list' typeItem: 'list_item' typeDefault: 'paragraph'
Props
- value: Slate
Value
- onChange:
(Change) => void
As slate plugin
;const plugins = <Editor value=value onChange=thisonChange plugins=plugins/>
Options
MarkdownPlugin
also use many other plugins as dependencies, and allows you to pass their customized settings.
Additionally, blocks, marks, inlines default types are the same as Markup-it.
// Default settings blocks: BLOCKS // https://github.com/GitbookIO/markup-it/blob/master/src/constants/blocks.js marks: MARKS // https://github.com/GitbookIO/markup-it/blob/master/src/constants/marks.js inlines: INLINES // https://github.com/GitbookIO/markup-it/blob/master/src/constants/inlines.js codeOption: // https://github.com/GitbookIO/slate-edit-code nodetype === BLOCKSCODE blockquoteOption: // https://github.com/GitbookIO/slate-edit-blockquote listOption: // https://github.com/GitbookIO/slate-edit-list
If you want to change a type, you could set that specific key type alone, without all types.
For example, you want to change BOLD
default type to bold_type
. Just pass object as below
marks: BOLD: 'bold_type'
This will replace default BOLD
setting to your new setting.
Feature TOC
- Blockquote
- Code block (inline)
- Code block (triple backticks)
- Header
- Bold
- Italic
- Bold + Italic
- Strikethrough
- Hr
- Link
- Image
- Unordered List
- Ordered List
Support
Blockquote
In editor enter:
>[space]Blockquote
Hot key
Ctrl+opt+q
Code block (inline)
In editor enter:
[space * 4]Code block
Code block (triple backticks)
In editor enter:
[` * 3][space] Code block
Use specific language:
[` * 3][lang][space] Code block
for example:
const wow =
Hot key
CMD+Enter: to exit code block
Header
In editor enter:
[# * 1~6][space] Header
Example
# h1
## h2
### h3
#### h4
##### h5
###### h6
Hot keys
Header 1
Ctrl+opt+1
Header 2
Ctrl+opt+2
Header 3
Ctrl+opt+3
Header 4
Ctrl+opt+4
Header 5
Ctrl+opt+5
Header 6
Ctrl+opt+6
Bold
In editor enter:
**strong**[space]
or
__strong__[space]
Hot key
CMD+b
Italic
In editor enter:
_italic_[space]
or
*italic*[space]
Hot key
CMD+i
Bold + Italic
In editor enter:
___[strong + italic]___[space]
or
***[strong + italic]***[space]
Strikethrough
In editor enter:
~[strikethrough]~[space]
Hot key
Ctrl+Opt+d
Hr
In editor enter:
***
or
---
Link
In editor enter:
[example](http://example.com "Optional title")[space]
Image
In editor enter:
![example](http://example.com "Optional title")[space]
Unordered list
In editor enter:
*[space]
or
+[space]
or
-[space]
Ordered List
In editor enter:
1.[space]
Related projects
- Another rich text editor using Slate framework, with beautiful design: https://github.com/Canner/canner-slate-editor
- 20+ shared slate icons, selectors and helpers for Slate editors, in a monorepo: https://github.com/Canner/slate-editor-icons
- Quick and customizable way to implement medium like toolbar in your slate editor: https://github.com/Canner/slate-toolbar