draft-js-code-custom
This is a fork of draft-js-code
Attention
It differs from the original package by slanting to work in conditions where each line is a separate CodeBlock
. You must provide such conditions by yourself.
draft-js-code-custom
is a collection of low-level utilities to make code block editing in DraftJS editors nicer.
It works well with draft-js-prism
or draft-js-prism-plugin
.
Features
- Indent with TAB
- Indent with TAB then several lines selected
- Insert new line with correct indentation with ENTER
- Remove indentation from text beginning (if needed) with backspace
- Return from indentation to previous line with backspace if the context assumes this
- Remove indentation with SHIFT+TAB (#6)
- Remove indentation with SHIFT+TAB for several lines
- Handle input of pair characters like
()
,[]
,{}
,""
,''
,``
, etc. (#3) - Implement code block depth based on pair characters
- Move cursor to the text beginning with HOME
- Duplicate current line or selected block with CTRL+D
- Delete line at caret with CTRL+Y
Installation
$ npm install draft-js-code-custom --save
API
hasSelectionInBlock(editorState)
Returns true if user is editing a code block. You should call this method to encapsulate all other methods when limiting code edition behaviour to code-block
.
handleKeyCommand(editorState, command)
Handle key command for code blocks, returns a new EditorState
or undefined
.
onTab(e, editorState)
Handle user pressing tab, to insert indentation, it returns a new EditorState
.
handleReturn(e, editorState)
Handle user pressing return, to insert a new line inside the code block, it returns a new EditorState
.
handleBeforeInput(char, editorState)
Handle inserting pair of special characters, line ()
, ""
, etc. Returns a new EditorState
or undefined
.
Usage
;;; Component { superprops; thisstate = editorState: DraftEditorState ; } { this } { const newState = ; if newState this; return 'handled'; return 'not-handled'; }; { const editorState = thisstate; let newState; if CodeUtils newState = CodeUtils; if !newState newState = RichUtils; if newState this; return 'handled'; return 'not-handled'; } { const editorState = thisstate; if !CodeUtils return Draft; const command = CodeUtils; return command || Draft; } { const editorState = thisstate; if !CodeUtils return 'not-handled'; this; return 'handled'; } { const editorState = thisstate; if !CodeUtils return 'not-handled'; const newState = CodeUtils; if newState this; return 'handled'; return 'not-handled'; } { return <DraftEditor editorState=thisstateeditorState onChange=thisonChange keyBindingFn=thiskeyBindingFn handleBeforeInput=thisonBeforeInput handleKeyCommand=thishandleKeyCommand handleReturn=thishandleReturn onTab=thisonTab /> ; }