draft-js-checkable-list-item

3.0.4 • Public • Published

draft-js-checkable-list-item

CircleCI Coverage Status

Dependency Status npm version License

Checkable list item for Draft.js

npm i draft-js-checkable-list-item

Live demo

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

  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

License

MIT

© sugarshin

Package Sidebar

Install

npm i draft-js-checkable-list-item

Weekly Downloads

5,328

Version

3.0.4

License

MIT

Unpacked Size

28 kB

Total Files

13

Last publish

Collaborators

  • sugarshin