Zen-editor NPM

Zen Editor

Custom editor for Clai's Cuest Project

KEY COMMANDS

Following are the keyboard shortcuts (Alt and CTRL for Windows/Linux and Control and Command for OSX)

Alt/Control +
- 1 - H1
- 2 - H2
- ` - code-block
- ' - blockquote
- * - unordered-list-item.

CTRL/Command +
- O - Open finder
- L - Add URL (embedded link)
- B - make selection bold
- I - make selection italic
- U - underline selection

Markdown-like special characters:

# <SPACE> - H1.
## - H2.
1. - OL.
* <SPACE> - UL.
` - CODE.
# <SPACE> - BLOCKQUOTE.

Installation

npm.
- npm install zen-editor.
- import Editor from 'zen-editor'

JS (ES6)

At the minimum, you need to provide editorState and onChange props, the same as draft-js.

import React from 'react';
import ReactDOM from 'react-dom';

import { Editor, decorator } from 'zen-editor';
import { EditorState } from 'draft-js';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editorState: EditorState.createWithContent(decorator)
    };

    this.onChange = editorState => this.setState({ editorState });
  }

  componentDidMount() {
    this.editor.focus();
  }

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        ref={editor => { this.editor = editor; }}
        editorState={editorState}
        onChange={this.onChange} />
    );
  }
};

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