@prunkstation/draft-js-editor
v0.0.1
Published
A draft-js based rich text block editor.
Downloads
15
Readme
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 nesteddraft-js
instances for simplicity.block-quote-caption
- Caption forblockquote
s.
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 isblockquote
, it will be changed toblock-quote-caption
, elsecaption
.''
(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