@simple-m-editor/react

A markdown editor with React.js

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

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:

// 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

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