Checkable list item for Draft.js
npm install draft-js-checkable-list-item-besiege[![CircleCI][circleci-image]][circleci-url]
[![Coverage Status][coveralls-image]][coveralls-url]
[![Dependency Status][david-image]][david-url]
[![npm version][npm-image]][npm-url]
[![License][license-image]][license-url]
Checkable list item for Draft.js
``sh`
npm i draft-js-checkable-list-item
Example
`js
import React, { Component } from 'react'
import { Editor, EditorState, RichUtils, DefaultDraftBlockRenderMap } from 'draft-js'
import {
blockRenderMap, CheckableListItem, CheckableListItemBlock, CheckableListItemUtils, CHECKABLE_LIST_ITEM
} from 'draft-js-checkable-list-item'
import 'draft-js/dist/Draft.css'
import 'draft-js-checkable-list-item/lib/CheckableListItem.css'
import type ContentBlock from 'draft-js/lib/ContentBlock'
export default class App extends Component {
editor: Editor
state: { editorState: EditorState }
blockRendererFn = (block: ContentBlock): ?CheckableListItemBlock => {
if (block.getType() === CHECKABLE_LIST_ITEM) {
return {
component: CheckableListItem,
props: {
onChangeChecked: () => this.changeEditorState(
CheckableListItemUtils.toggleChecked(this.state.editorState, block)
),
checked: !!block.getData().get('checked'),
},
}
}
}
handleTab = (ev: SyntheticKeyboardEvent): ?boolean => {
if (this.adjustBlockDepth(ev)) {
return true
}
const { editorState } = this.state
const newEditorState = RichUtils.onTab(ev, editorState, 4)
if (newEditorState !== editorState) {
this.changeEditorState(newEditorState)
}
}
changeEditorState = (editorState: EditorState): void => this.setState({ editorState })
state = { editorState: EditorState.createEmpty() }
render() {
return (
createMouseDownHandler(type: string): Function {
return (ev: SyntheticEvent) => {
ev.preventDefault()
this.changeEditorState(RichUtils.toggleBlockType(this.state.editorState, type))
}
}
blockStyleFn(block: ContentBlock): ?string {
if (block.getType() === CHECKABLE_LIST_ITEM) {
return CHECKABLE_LIST_ITEM
}
}
adjustBlockDepth(ev: SyntheticKeyboardEvent): boolean {
const { editorState } = this.state
const newEditorState = CheckableListItemUtils.onTab(ev, editorState, 4)
if (newEditorState !== editorState) {
this.changeEditorState(newEditorState)
return true
}
return false
}
}
``
1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D
[MIT][license-url]
© sugarshin
[circleci-image]: https://circleci.com/gh/sugarshin/draft-js-checkable-list-item/tree/master.svg?style=svg&circle-token=b4cb74ab6a5a470fd7a6752d755ecb271db448e5
[circleci-url]: https://circleci.com/gh/sugarshin/draft-js-checkable-list-item/tree/master
[coveralls-image]: https://coveralls.io/repos/github/sugarshin/draft-js-checkable-list-item/badge.svg?branch=master
[coveralls-url]: https://coveralls.io/github/sugarshin/draft-js-checkable-list-item?branch=master
[npm-image]: https://img.shields.io/npm/v/draft-js-checkable-list-item.svg?style=flat-square
[npm-url]: https://www.npmjs.org/package/draft-js-checkable-list-item
[david-image]: https://david-dm.org/sugarshin/draft-js-checkable-list-item.svg?style=flat-square
[david-url]: https://david-dm.org/sugarshin/draft-js-checkable-list-item
[license-image]: https://img.shields.io/:license-mit-blue.svg?style=flat-square
[license-url]: https://sugarshin.mit-license.org/