Simplemde-markdown-editor: How to get started in React

[andrewkusuma]

how to start simplemde in react?

I try to do this https://gist.github.com/andrewkusuma/378355f54d2dee7267c3fcc94121fd9b but not working. Any idea to get started in react?

[selmansamet]

https://github.com/RIP21/react-simplemde-editor
I tried that, it's working.

[andrewkusuma]

https://github.com/RIP21/react-simplemde-editor
I tried that, it's working.

basically use other npm library. I tried react simplemde editor too and it works, I am just want to know if using raw simplemde is support or not

[kaisanjay]

/*global SimpleMDE */
import React from 'react'
require('script!../../node_modules/simplemde/dist/simplemde.min.js')

// Styles
import '../../node_modules/simplemde/dist/simplemde.min.css'
// import '../scss/components/_markdownEditor'

export default class MarkdownEditor extends React.Component {
  constructor (props) {
    super(props)
    this._onSave = this._onSave.bind(this)
  }

  _onSave (editor) {
    let fragment = Object.assign(this.props.fragment, {
      source: editor.value(),
      presentation: editor.options.previewRender(editor.value())
    })
    this.props.actions.updateFragment(fragment)
  }

  _onFileUpload (file, callback) {
    return callback(null, null)
  }

  componentDidMount () {
    if (this.props.fragment) {
      var editor = new SimpleMDE({
        element: document.getElementById('editor')
      })
      editor.value(this.props.fragment.source)

      editor.codemirror.on('change', function () {
        this._onSave(editor)
      }.bind(this))
    }
  }

  componentWillUnmount () {
    var classes = ['editor-toolbar', 'CodeMirror',
      'editor-preview-side', 'editor-statusbar']
    var parent = document.getElementById('editor').parentNode
    for (var i in classes) {
      var elementToRemove = parent.querySelector('.' + classes[i])
      elementToRemove && elementToRemove.remove()
    }
  }

  render () {
    return (
      <textarea id='editor'/>
    )
  }
}

MarkdownEditor.propTypes = {
  fragment: React.PropTypes.object,
  actions: React.PropTypes.object
}

function mapStateToProps (state) {
  console.log(state)
  return {
    fragment: _.find(state.fragments, function (f) {
      return f._id === state.router.params.id
    })
  }
}

function mapDispatchToProps (dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MarkdownEditor)

[TingLen]

i got same problem just now,
Finally I solved the problem
componentDidMount(){ var simplemde = new SimpleMDE({ element: document.getElementById("myId") }) }
the element i was use 'div'
<div id="myId" />
change it to 'textarea',it's ok
<textarea id="myId" />

[andrewkusuma]

i got same problem just now,
Finally I solved the problem
componentDidMount(){ var simplemde = new SimpleMDE({ element: document.getElementById("myId") }) }
the element i was use 'div'
<div id="myId" />
change it to 'textarea',it's ok
<textarea id="myId" />

this worked

and import js and css like this

import SimpleMDE from 'simplemde/dist/simplemde.min.js'
import 'simplemde/dist/simplemde.min.css'

updated

seems my state not updated when used that step. When i remove id for textarea, just default text area with value and onChange. my state always change based on typing

[andrewkusuma]

I found solution for my problem

import React, { Component } from 'react'
import SimpleMDE from 'simplemde/dist/simplemde.min.js'
import 'simplemde/dist/simplemde.min.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: ''
    }
  }
  componentDidMount() {
    var simplemde = new SimpleMDE({})
    simplemde.codemirror.on('change', () => {
      this.setState({
        value: simplemde.value()
      })
    })
  }

  render() {
    return (
      <div className="App">
        <textarea />
      </div>
    )
  }
}

export default App

I don't know this is best practice or not