@tracoco/slate-md-plugin

A markdown plugin for slate framework

Install

npm i @tracoco/slate-md-plugin

Usage

import MarkdownPlugin from '@tracoco/slate-md-plugin';
const plugins = [
  MarkdownPlugin(options)
]

<Editor
  value={value}
  onChange={this.onChange}
  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
    onlyIn: node => node.type === BLOCKS.CODE
  },
  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 = test();

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]