# react-m-editor

> > A markdown editor with React.js

Latest version **3.1.1** (published 2024-02-28) · 0 weekly downloads

## Install

```sh
npm install react-m-editor
pnpm add react-m-editor
yarn add react-m-editor
bun add react-m-editor
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.1 |
| Published | 2024-02-28 |
| First published | 2019-08-21 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 415.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yeachan |

## Links

- npm: https://www.npmjs.com/package/react-m-editor
- npm.io page: https://npm.io/package/react-m-editor

## Dependencies (8)

- [ahooks](https://npm.io/package/ahooks.md) ^3.7.10
- [marked](https://npm.io/package/marked.md) ^12.0.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.9.0
- [marked-highlight](https://npm.io/package/marked-highlight.md) ^2.1.1

## Recent versions

- 3.1.1 (latest) — 2024-02-28
- 3.1.0 — 2024-02-27
- 3.0.7 — 2021-10-26
- 3.0.6 — 2021-10-25
- 3.0.5 — 2021-10-22
- 3.0.4 — 2021-10-22
- 3.0.3 — 2021-10-22
- 3.0.2 — 2021-10-09
- 3.0.1 — 2021-09-30
- 2.0.0 — 2021-08-15
- 1.0.9 — 2020-04-15
- 1.0.8 — 2020-04-14
- 1.0.7 — 2019-10-18
- 1.0.6 — 2019-08-26
- 1.0.5 — 2019-08-23
- … 5 more at https://npm.io/package/react-m-editor/versions

## README

# react-m-editor

> A markdown editor with React.js

![GitHub package.json version](https://img.shields.io/github/package-json/v/hellomrbigshot/react-m-editor)
![GitHub](https://img.shields.io/github/license/hellomrbigshot/react-m-editor)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)


## Install

```
// npm
npm install -S react-m-editor highlight.js marked prop-types

// yarn
yarn add react-m-editor highlight.js marked prop-types

// pnpm
pnpm install react-m-editor highlight.js marked prop-types
```

## Usage with React

Use the component

```jsx
import React, { useState } from 'react'

import { MEditor } from 'react-m-editor'
import 'react-m-editor/dist/index.min.css'

function Example () {
  const [value, setValue] = useState('')
  const handleChange = ({ content, htmlContent }) => {
    setValue(content)
    console.log(htmlContent)
  }
  return (
    <MEditor
      theme='dark'
      showLineNum={false}
      onChange={() => handleChange(contentObj)}
    />
  )
}
```

The component also exports ```marked``` function:

```javascript
// The marked funciton will replace
// <code> or <code class="language-*"> tag
// to <code class="hljs">

import { marked } from 'react-m-editor'

let a = '```console.log('hello world')```'
console.log(marked(a)) // <p><code class="hljs">console.log(&#39;hello world&#39;)</code></p>

```

## Preview

[address](https://hellomrbigshot.github.io/react-m-editor)

## Api

### props

| name       | type   | default     | description     |
| ---------- | -------| ----------- | --------------- |
| value      | string |   -         | value           |
| placeholder| string |   -         | placehoder      |
| mode       | live \| edit \| preview | live      | edit mode |
| fullScreen | boolean| false       | full screen     |
| showLineNum| boolean| true        | show side line number |
| theme      | string | light       | light or dark   |
| autoScroll | boolean| true        | auto sroll or not |
| debounceRender   | boolean | false | debounce render html when edit |
| debounceRenderWait | number | 200 | debounce wait time |
| onChange   | function ({ content, htmlContent }) | - | callback when editor changes |
| onModeChange | function (mode, oldMode) | - | callback when editor's mode changes |
| onFullScreenChange | function (isFullScreen) | - | callback when editor's fullscreen changes |

## License

MIT © [hellomrbigshot](https://github.com/hellomrbigshot)

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