Looking for a good text editor in React?

Looking for a good text editor in React?

During the last few weeks, we have been working on a new app for Jira Service Desk. A core feature of the app is based on text edition, and that’s why we needed a good editor that supports the most known capabilities in a modern editor (basically a wysiwyg editor).

During our search for a good component compatible with our app, we found this one https://github.com/jpuri/react-draft-wysiwyg

To get started with the component is really easy and we have to say that the documentation is complete in order to solve, for us, the most common questions about this component. Like any other component, if we need something more complex or “special”, you can always build on top of it 😉

Here at Regos we always want to share knowledge with others, so we built a super basic example of the usage of the component. The idea of the example is to set up the basics of how to read and save content in the editor.

You can check out the example in this gist:

import React from 'react'

import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import convertFromHTML from 'html-to-draftjs';

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        editorState: null
    };
  }
  
  /*
  get initial content and load it into the state
  */
  componentDidMount() {
    const initialState = getEditorState();
    this.setState({
      editorState: initialState
    });
  }
  
  /*
  read content from api and parse it
  */
  getEditorState() {
    const savedContent = //get content from your api
    if (savedContent) {
        const contentBlock = convertFromHTML(savedContent);

        if (contentBlock) {
            const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
            return EditorState.createWithContent(contentState);
        }
    } else
        return EditorState.createEmpty();
    }
  }

  /*
  update the state as the content changes
  */
  onEditorStateChange() {
      return (nextState) => {
          this.setState({
              editorState: nextState
          });
      }
  }

  /*
  function responding to submit event or similar
  */
  save() {
    const contentAsHTML = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()));
    //save your content
  }
  
  /*
  render the actual editor
  */
  render() {
    <Editor
        editorState={this.state.editorState}
        onEditorStateChange={this.onEditorStateChange()}
        toolbar={{
          options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker']
        }}
    />
  }
}

If you have any comment or suggestions please let us know and let’s start the conversation!


Regos Dev Studio is a product development company that builds add-ons for Jira, Confluence, and LiveChat, combined with the development of custom solutions in a variety of languages.

Don’t forget to check out our website, visit our Atlassian marketplace listing and our apps for LiveChat. You can also follow us on Twitter and stay tuned for updates!

Leave a Reply

Your email address will not be published. Required fields are marked *