open-index/open-npm huggingface dataset:
npm package: @simple-m-editor/react
Description: > A markdown editor with React.js
Latest version: 0.0.10

# @simple-m-editor/react

> A markdown editor with React.js

[![npm](https://img.shields.io/npm/v/@simple-m-editor/react)](https://www.npmjs.com/package/@simple-m-editor/react)
![GitHub](https://img.shields.io/github/license/hellomrbigshot/m-editor)


## Install

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

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

// pnpm
pnpm add @simple-m-editor/react highlight.js marked marked-highlight prop-types
```

## Usage with React

Use the component

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

import { MEditor } from '@simple-m-editor/react'
import '@simple-m-editor/react/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 '@simple-m-editor/react'

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/@simple-m-editor/react)

## 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)
npm package: @simple-m-editor/vue
Description: > A markdown editor with Vue
Latest version: 0.0.6

# @simple-m-editor/vue

> A markdown editor with Vue


![GitHub package.json version](https://img.shields.io/github/package-json/v/hellomrbigshot/@simple-m-editor/vue)
![GitHub](https://img.shields.io/github/license/hellomrbigshot/@simple-m-editor/vue)

## Install

```
// npm
npm install --save @simple-m-editor/vue highlight.js marked marked-highlight

// yarn
yarn add @simple-m-editor/vue highlight.js marked marked-highlight

// pnpm
pnpm add @simple-m-editor/vue highlight.js marked marked-highlight
```

## Usage with Vue.js

```
// you can add class "m-editor-preview" to your element to
// use the same style as the editor shows
<script setup>
import { MEditor, marked } from '@simple-m-editor/vue'
import '@simple-m-editor/vue/dist/style.css'
const text = ref('')
const markdownContent = ref('')
const handleChange = (data) => {
  markdownContent.value = data.htmlContent
}
</script>
<template>
  <div>
    <m-editor
      v-model="text"
      :debounce-render="true"
      :debounce-render-wait="500"
      @on-change="handleChange"
    />
    <div class="m-editor-preview" v-html="markdownContent"></div>
  </div>
</template>
```
<!--
## Preview

[address](https://hellomrbigshot.github.io/simple-m-editor/index.html) -->

## Api

### props

| name       | type   | default     | description     |
| ---------- | -------| ----------- | --------------- |
| value      | String |             | value           |
| placeholder| String | ''     | placehoder      |
| mode       | String | live        | one of ['live', 'edit', 'preview']|
| full-screen | Boolean| false       | full screen or not |
| show-line-num| Boolean| true        | show side line number or not |
| theme      | String | light       | light or dark   |
| auto-scroll| Boolean| true        | auto sroll or not |
| debounce-render | Boolean | false | debounce render html when edit |
| debounce-render-wait | Number | 200 | debounce wait time |



### event

| event name | description | return value |
| -------  | ------ | -----------    |
| on-change | callback when editor is changed | Object: { content, htmlContent } |
| on-mode-change | callback when editor's mode is change | mode, one of ['live', 'edit', 'preview']; oldMode, one of ['live', 'edit', 'preview'] |
| on-full-screen-change | callback when editor's fullscreen change | fullscreen status, true or false |


## Licence

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