medium-draft - demo

A medium like rich text editor built upon draft-js with an emphasis on eliminating mouse usage by adding relevant keyboard shortcuts.

Features

Focus on keyboard shortcuts and auto transform of text blocks.
Image addition with support for rich text captioning.
Minimize mouse usage.
Autolists.
Proper handling of RETURN presses.
It also has implementations of some custom blocks like:
- caption - Can be used as a caption for media blocks like image or video instead of nested draft-js instances for simplicity.
- block-quote-caption - Caption for blockquotes.
- todo - Todo text with a checkbox.

Following are the keyboard shortcuts to toggle block types (`Alt and CTRL` for Windows/Linux and `Option and Command` for OSX)

Alt/Option +
- 1 - Toggle Ordered list item
- * - Toggle Unordered list item
- @ - Add link to selected text.
- # - Toggle Header-three.
- < - Toggle Caption block.
- > - Toggle unstyled or paragraph block.
- H - Highlight selection.

Editor level commands

These commands are not a part of the core editor but have been implemented in the example code that uses the medium-draft editor.

Command/CTRL + S - Save current data to localstorage.
Alt + Shift + L - Load previously saved data from localstorage.

Special characters while typing: While typing in an empty block, if the content matches one of the following, that particular block's type and look will be changed to the corresponding block specified below

-- - If current block is blockquote, it will be changed to block-quote-caption, else caption.
*. (An asterisk and a period) - unordered-list-item.
*<SPACE> (An asterisk and a space) - unordered-list-item.
-<SPACE> (A hyphen and a space) - unordered-list-item.
1. (The number 1 and a period) - unordered-list-item.
## - header-two.
[] - todo.
== - unstyled.

Installation

npm.
- npm install medium-draft.
- import Editor from 'medium-draft'
Browser
- Include <link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css"> in <head>
- Include <script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script>. medium-draft is available in the global object as MediumDraft.

Usage

medium-draft sits on top of draft-js with some built in functionalities and blocks. Its API is almost the same as that of draft-js. You can take a look at the demo editor's code to see the implementation.

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,
  createEditorState,
} from 'medium-draft';

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

    this.state = {
      editorState: createEditorState(), // for empty content
    };

    /*
    this.state = {
      editorState: createEditorState(data), // with content
    };
    */

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

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

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

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

Issues

Figure out a way to show placeholder text for empty image captions.
Currently, the toolbar that appears when text is selected needs to be fixed regarding its position in the viewport.

Developer

Clone this repo git clone https://github.com/brijeshb42/medium-draft.git.
Install node packages npm install.
Start local demo npm run dev. This will start a local server on port 8080.
Build using npm run build.

LICENSE

MIT

bansicloud2/medium-draft