# @tracoco/slate-md-editor

> Add live markdown preview and edit to your Slate editor.

Latest version **1.5.4** (published 2019-10-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tracoco/slate-md-editor
pnpm add @tracoco/slate-md-editor
yarn add @tracoco/slate-md-editor
bun add @tracoco/slate-md-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.4 |
| Published | 2019-10-21 |
| First published | 2019-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 27 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1141 |
| Maintainers | haymant |
| Keywords | slate, plugin, markdown |

## Links

- npm: https://www.npmjs.com/package/@tracoco/slate-md-editor
- Repository: https://github.com/canner/slate-md-editor
- npm.io page: https://npm.io/package/@tracoco/slate-md-editor

## Dependencies (27)

- [prismjs](https://npm.io/package/prismjs.md) ^1.13.0
- [markup-it](https://npm.io/package/markup-it.md) ^7.0.0
- [slate-prism](https://npm.io/package/slate-prism.md) ^0.4.0
- [slate-edit-code](https://npm.io/package/slate-edit-code.md) ^0.15.0
- [slate-edit-list](https://npm.io/package/slate-edit-list.md) ^0.11.2
- [slate-soft-break](https://npm.io/package/slate-soft-break.md) ^0.6.0
- [styled-components](https://npm.io/package/styled-components.md) ^3.2.1
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^2.10.0
- [slate-edit-blockquote](https://npm.io/package/slate-edit-blockquote.md) ^0.6.0
- [@tracoco/slate-icon-hr](https://npm.io/package/@tracoco/slate-icon-hr.md) ^1.5.0
- [@tracoco/slate-icon-bold](https://npm.io/package/@tracoco/slate-icon-bold.md) ^1.5.0
- [@tracoco/slate-icon-code](https://npm.io/package/@tracoco/slate-icon-code.md) ^1.5.0
- [@tracoco/slate-icon-link](https://npm.io/package/@tracoco/slate-icon-link.md) ^1.5.0
- [@tracoco/slate-icon-list](https://npm.io/package/@tracoco/slate-icon-list.md) ^1.5.0
- [@tracoco/slate-md-plugin](https://npm.io/package/@tracoco/slate-md-plugin.md) ^1.5.4
- [@tracoco/slate-icon-image](https://npm.io/package/@tracoco/slate-icon-image.md) ^1.5.0
- [@tracoco/slate-editor-help](https://npm.io/package/@tracoco/slate-editor-help.md) ^1.5.2
- [@tracoco/slate-icon-header](https://npm.io/package/@tracoco/slate-icon-header.md) ^1.5.0
- [@tracoco/slate-icon-italic](https://npm.io/package/@tracoco/slate-icon-italic.md) ^1.5.0
- [@tracoco/slate-icon-shared](https://npm.io/package/@tracoco/slate-icon-shared.md) ^1.5.0
- [@tracoco/slate-icon-codeblock](https://npm.io/package/@tracoco/slate-icon-codeblock.md) ^1.5.0
- [@tracoco/slate-icon-underline](https://npm.io/package/@tracoco/slate-icon-underline.md) ^1.5.0
- [@tracoco/slate-icon-blockquote](https://npm.io/package/@tracoco/slate-icon-blockquote.md) ^1.5.0
- [@tracoco/slate-helper-block-list](https://npm.io/package/@tracoco/slate-helper-block-list.md) ^1.5.0
- [@tracoco/slate-paste-html-plugin](https://npm.io/package/@tracoco/slate-paste-html-plugin.md) ^1.5.2
- [@tracoco/slate-icon-strikethrough](https://npm.io/package/@tracoco/slate-icon-strikethrough.md) ^1.5.0
- [@tracoco/slate-helper-mark-removeall](https://npm.io/package/@tracoco/slate-helper-mark-removeall.md) ^1.5.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.5.4 (latest) — 2019-10-21

## README

# slate-md-editor

A markdown editor, that allows you to edit live. Support markdown syntax and hot keys.

## 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.

## Usage

Render the complete markdown editor

```js
import Editor from "slate-md-editor";
const MdEditor = Editor(options);

<MdEditor value={value} onChange={this.onChange} />;
```

### 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.

```js
// 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
    onlyIn: node => node.type === 'code_block',
    getSyntax: node => node.data.get('syntax')
  },
  codeOption: {
    // https://github.com/GitbookIO/slate-edit-code
    onlyIn: node => node.type === '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

Learn more [here](../../plugins/markdown)

---
_Source: https://npm.io/package/@tracoco/slate-md-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._