React-m-editor NPM

react-m-editor

A markdown editor with React.js

GitHub package.json version GitHub

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

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:

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

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