Vue.js Editor Components
Components

Best React.js Editor Components 2021

joel

Best React.js Editor Components

In this piece we want to explore some cool editor components for React.js. Editors allows us give users a mechanism of inputting content.

(a). Draft.js

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

Draft.js Demo

  • Extensible and Customizable: We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media.
  • Declarative Rich Text: Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
  • Immutable Editor State: The Draft.js model is built with immutable-js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage.

Installation

Via NPM or Yarn:

npm install --save draft-js react react-dom

or

yarn add draft-js react react-dom

Draft.js depends on React and React DOM which must also be installed.

Using Draft.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

function MyEditor() {

  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
    this.setEditor = (editor) => {
      this.editor = editor;
    };
    this.focusEditor = () => {
      if (this.editor) {
        this.editor.focus();
      }
    };
  }

  componentDidMount() {
    this.focusEditor();
  }

  render() {
    return (
      <div style={styles.editor} onClick={this.focusEditor}>
        <Editor
          ref={this.setEditor}
          editorState={this.state.editorState}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

const styles = {
  editor: {
    border: '1px solid gray',
    minHeight: '6em'
  }
};

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

Since the release of React 16.8, you can use Hooks as a way to work with EditorState without using a class.

import React from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";

export default function MyEditor() {
  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createEmpty()
  );

  const editor = React.useRef(null);
  function focusEditor() {
    editor.current.focus();
  }

  return (
    <div
      style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
      onClick={focusEditor}
    >
      <Editor
        ref={editor}
        editorState={editorState}
        onChange={setEditorState}
        placeholder="Write something!"
      />
    </div>
  );
}

Note that the editor itself is only as tall as its contents. In order to give users a visual cue, we recommend setting a border and a minimum height via the .DraftEditor-root CSS selector, or using a wrapper div like in the above example.

Because Draft.js supports unicode, you must have the following meta tag in the <head> </head> block of your HTML file:

<meta charset="utf-8" />

Further examples of how Draft.js can be used are provided in the /examples directory of this repo.

Documentation

Find complete documentation here.

(b). ReactPage

ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of contenteditable, you are in the right place.

ReactPage Demo

Installation

yarn add @react-page/editor

or

npm install --save @react-page/editor

There is also a beta release channel, which might contain unstable features:

yarn add @react-page/[email protected]

or

npm install --save @react-page/[email protected]

Demo

A demo can be found on Demo which reflects the stable release channel on npm.

the current beta version is also available as a demo: beta Demo

Documentation

The documentation is available at docs

Documentation for the current beta is at beta docs

(c). React Monaco Editor

Monaco Editor for React.

Examples

To build the examples locally, run:

yarn
cd example
yarn
yarn start

Then open http://localhost:8886 in a browser.

Installation

yarn add react-monaco-editor

Using with Webpack

import React from 'react';
import { render } from 'react-dom';
import MonacoEditor from 'react-monaco-editor';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '// type your code...',
    }
  }
  editorDidMount(editor, monaco) {
    console.log('editorDidMount', editor);
    editor.focus();
  }
  onChange(newValue, e) {
    console.log('onChange', newValue, e);
  }
  render() {
    const code = this.state.code;
    const options = {
      selectOnLineNumbers: true
    };
    return (
      <MonacoEditor
        width="800"
        height="600"
        language="javascript"
        theme="vs-dark"
        value={code}
        options={options}
        onChange={::this.onChange}
        editorDidMount={::this.editorDidMount}
      />
    );
  }
}

render(
  <App />,
  document.getElementById('root')
);

Add the Monaco Webpack plugin monaco-editor-webpack-plugin to your webpack.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['json']
    })
  ]
};

Sidenote: Monaco Editor uses CSS imports internally, so if you're using CSS Modules in your project - you're likely to get conflict by default. In order to avoid that - separate css-loader for app and monaco-editor package:

// Specify separate paths
const path = require('path');
const APP_DIR = path.resolve(__dirname, './src');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');

{
  test: /\.css$/,
  include: APP_DIR,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      namedExport: true,
    },
  }],
}, {
  test: /\.css$/,
  include: MONACO_DIR,
  use: ['style-loader', 'css-loader'],
}

Properties

All the properties below are optional.

  • width width of editor. Defaults to 100%.
  • height height of editor. Defaults to 100%.
  • value value of the auto created model in the editor.
  • defaultValue the initial value of the auto created model in the editor.
  • language the initial language of the auto created model in the editor.
  • theme the theme of the editor
  • options refer to Monaco interface IEditorConstructionOptions.
  • overrideServices refer to Monaco Interface IEditorOverrideServices. It depends on Monaco's internal implementations and may change over time, check github issue for more details.
  • onChange(newValue, event) an event emitted when the content of the current model has changed.
  • editorWillMount(monaco) an event emitted before the editor mounted (similar to componentWillMount of React).
  • editorDidMount(editor, monaco) an event emitted when the editor has been mounted (similar to componentDidMount of React).

Events & Methods

Refer to Monaco interface IEditor.

The monaco interfaces available by import

import { monaco } from 'react-monaco-editor';

Reference

Find complete reference [here](Monaco Editor).

Related Posts

React Tooltips Example and Libraries
Components

React.js Tooltip – Examples and Libraries

joel
React Facebook
Components

Best React.js Facebook Components 2021

joel

Leave a Reply

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