Sharedb React

[pedr...@gmail.com]

Hi all.

I'm new in development on React, and i need to build a simple rich-text collaboration editor.

I found this library very interesting, and helpful.

I´m trying to build the examples and i only make work the rich-text. The other examples don´t work for me.

My question is if its possible to port the client code to a React component, i´m trying but with no success.

Any one have some topic of help?

Thanks.

Pedro. 

[Curran Kelleher]

Greetings,

I've had success encapsulating codemirror-binding as a React component. Perhaps you could adapt this approach for rich text.

Here's the code:

/**

 * This component encapsulates codemirror-binding as a React component.

 * Derived from the original ShareDB textarea example found at

 * https://github.com/share/sharedb/blob/master/examples/textarea/client.js

 */

import React, { Component } from 'react'

import ShareDBCodeMirrorBinding from 'codemirror-binding'

export default class CodeMirrorBinding extends Component {

  componentDidMount () {

    if (process.browser) {

      const { doc, path, mode, inlet = true, height = 500 } = this.props

      // Static import breaks the server, see https://github.com/codemirror/CodeMirror/issues/3701

      const CodeMirror = require('codemirror')

      require('codemirror/mode/javascript/javascript')

      require('codemirror/mode/jsx/jsx')

      require('codemirror/mode/xml/xml')

      require('codemirror/mode/css/css')

      require('codemirror/mode/htmlmixed/htmlmixed')

      require('codemirror/addon/comment/comment')

      const codeMirror = CodeMirror(this.el, { mode })

      codeMirror.setSize(null, height)

      this.binding = new ShareDBCodeMirrorBinding(codeMirror, doc, path)

      this.binding.setup()

    }

  }

  componentWillUnmount () {

    if (this.binding) {

      this.binding.destroy()

    }

  }

  render () {

    return <div ref={el => { this.el = el }} />

  }

}

Good luck!

Best regards,

Curran

P. S. I'd advise against using the word "simple" in your requirements definition ;) A collaborative rich text editor is anything but simple.