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.

• 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.

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.

Editor level commands

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

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

• -- (2 hyphens) - If current block is blockquote, it will be changed to block-quote-caption, else caption.
• '' (2 single or double quotes) - blockquote.
• *. (An asterisk and a period) - unordered-list-item.
• 1. (The number 1 and a period) - unordered-list-item.
• ## - header-three.
• == - unstyled.

Issues

Currently, the toolbar that appears when text is selected needs to be fixed regrading its position in the viewport.

LICENSE

MIT