Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SamyPesse/draft-js-code
Collection of utilities to make code blocks edition easy in DraftJS
https://github.com/SamyPesse/draft-js-code
Last synced: 3 months ago
JSON representation
Collection of utilities to make code blocks edition easy in DraftJS
- Host: GitHub
- URL: https://github.com/SamyPesse/draft-js-code
- Owner: SamyPesse
- License: apache-2.0
- Created: 2016-06-07T21:05:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-22T02:35:52.000Z (over 6 years ago)
- Last Synced: 2024-07-26T13:17:20.448Z (4 months ago)
- Language: JavaScript
- Homepage: http://samypesse.github.io/draft-js-code/
- Size: 503 KB
- Stars: 107
- Watchers: 3
- Forks: 25
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-draft-js - Draft.js Code - A collection of low-level utilities for nicer code editing (Plugins and Decorators Built for Draft.js)
README
# draft-js-code
[](http://badge.fury.io/js/draft-js-code)
[](https://coveralls.io/github/SamyPesse/draft-js-code?branch=master)
`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`](https://github.com/SamyPesse/draft-js-prism) or [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin).
Demo: [samypesse.github.io/draft-js-code/](http://samypesse.github.io/draft-js-code/)
### Features
- [x] Indent with TAB
- [x] Insert new line with correct indentation with ENTER
- [x] Remove indentation with DELETE
- [ ] Remove indentation with SHIFT+TAB ([#6](https://github.com/SamyPesse/draft-js-code/issues/6))
- [ ] Handle input of pair characters like `()`, `[]`, `{}`, `""`, etc. ([#3](https://github.com/SamyPesse/draft-js-code/issues/3))
### Installation
```
$ npm install draft-js-code --save
```
### API
##### `CodeUtils.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`.
##### `CodeUtils.handleKeyCommand(editorState, command)`
Handle key command for code blocks, returns a new `EditorState` or `null`.
##### `CodeUtils.onTab(e, editorState)`
Handle user pressing tab, to insert indentation, it returns a new `EditorState`.
##### `CodeUtils.handleReturn(e, editorState)`
Handle user pressing return, to insert a new line inside the code block, it returns a new `EditorState`.
### Usage
```js
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 (
);
}
}
```