How to get started in React

[andrewbudikusuma]

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?

[sametcodes]

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

[andrewbudikusuma]

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

[andrewbudikusuma]

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

[andrewbudikusuma]

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

[gauravsoti1]

`import { useEffect, useRef, useState } from "react"; import "./styles.css"; import SimpleMDE from "simplemde"; import "simplemde/dist/simplemde.min.css";

export default function App() { const textareaRef = useRef(); const [instance, setInstance] = useState(); function onChange() { console.log(instance?.value()); }

useEffect(() => { if (textareaRef?.current && !instance) { var simplemde = new SimpleMDE({ element: textareaRef.current, toolbar: [ "bold", "code", "italic", "heading", "|", "quote", "horizontal-rule", "clean-block", "side-by-side", "preview", "table", "link", "ordered-list", "fullscreen", "guide" ] }); simplemde.value("Initial text"); setInstance(simplemde); simplemde.codemirror.on("change", onChange); } }, [textareaRef?.current]);

return ( <div className="App"> ); } `