remark-editor.js

const React = require('react')
const ReactDOM = require('react-dom')
const unified = require('unified')
const markdown = require('remark-parse')
const math = require('remark-math')
const emoji = require('remark-emoji')
const remark2rehype = require('remark-rehype')
const highlight = require('rehype-highlight')
const katex = require('rehype-katex')
const rehype2react = require('rehype-react')

// renderer
const processor = unified()
  // markdown parser
  .use(markdown)
  .use(math)
  .use(emoji)
  // hast
  .use(remark2rehype)
  .use(highlight)
  .use(katex)
  .use(rehype2react, {
    createElement: React.createElement
  })

function renderToReact(text) {
  const { contents } = processor.processSync(text)
  return contents
}

const raw = `
# hello

- a
- b
`

class App extends React.Component {
  state = {
    text: raw
  }

  render() {
    return (
      <div>
        <div style={{ display: 'flex' }}>
          <div style={{ flex: 1 }}>
            <div style={{ width: '100%' }}>
              <textarea
                value={this.state.text}
                onChange={ev => this.setState({ text: ev.target.value })}
                style={{ width: '100%', height: '600px' }}
              />
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ padding: '0 16px' }}>
              {renderToReact(this.state.text)}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('main'))