draft-js-code 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.
Demo: samypesse.github.io/draft-js-code/
- Indent with TAB
- Insert new line with correct indentation with ENTER
- Remove indentation with DELETE
- Remove indentation with SHIFT+TAB (#6)
- Handle input of pair characters like
(),[],{},"", etc. (#3)
$ npm install draft-js-code --save
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.
Handle key command for code blocks, returns a new EditorState or null.
Handle user pressing tab, to insert indentation, it returns a new EditorState.
Handle user pressing return, to insert a new line inside the code block, it returns a new EditorState.
import React from 'react'; import Draft from 'draft-js'; import CodeUtils from 'draft-js-code'; class Editor extends React.Component { constructor(props) { super(props); this.state = { editorState: Draft.EditorState.createEmpty() }; } onChange = (editorState) => { this.setState({ editorState }) } handleKeyCommand = (command) => { const { editorState } = this.state; let newState; if (CodeUtils.hasSelectionInBlock(editorState)) { newState = CodeUtils.handleKeyCommand(editorState, command); } if (!newState) { newState = RichUtils.handleKeyCommand(editorState, command); } if (newState) { this.onChange(newState); return 'handled'; } return 'not-handled'; } keyBindingFn = (evt) => { const { editorState } = this.state; if (!CodeUtils.hasSelectionInBlock(editorState)) return Draft.getDefaultKeyBinding(evt); const command = CodeUtils.getKeyBinding(evt); return command || Draft.getDefaultKeyBinding(evt); } handleReturn = (evt) => { const { editorState } = this.state; if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled'; this.onChange(CodeUtils.handleReturn(evt, editorState)); return 'handled'; } onTab = (evt) => { const { editorState } = this.state; if (!CodeUtils.hasSelectionInBlock(editorState)) return 'not-handled'; this.onChange(CodeUtils.onTab(evt, editorState)); return 'handled'; } render() { return ( <Draft.Editor editorState={this.state.editorState} onChange={this.onChange} keyBindingFn={this.keyBindingFn} handleKeyCommand={this.handleKeyCommand} handleReturn={this.handleReturn} onTab={this.onTab} /> ); } }