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')
);

LICENSE

MIT