draft-js-checkable-list-item
v3.0.4
Published
Checkable list item for Draft.js
Downloads
8,352
Maintainers
Readme
draft-js-checkable-list-item
Checkable list item for Draft.js
npm i draft-js-checkable-list-item
Usage
Example
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 (
<div>
<div>
<span onMouseDown={this.createMouseDownHandler(CHECKABLE_LIST_ITEM)}>✔</span>
</div>
<Editor
blockRendererFn={this.blockRendererFn}
blockRenderMap={DefaultDraftBlockRenderMap.merge(blockRenderMap)}
blockStyleFn={this.blockStyleFn}
editorState={this.state.editorState}
onChange={this.changeEditorState}
onTab={this.handleTab}
/>
</div>
)
}
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
}
}
Contributing
- Fork it!
- Create your feature branch: git checkout -b my-new-feature
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request :D
License
© sugarshin