/medium-draft

A medium like Rich Text Editor built on draft-js with a focus on keyboard shortcuts.

Primary LanguageJavaScriptMIT LicenseMIT

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