docs(checkable-list): use contentBlock instead atomicBlock

Author: freedomlang

examples/checkable-list-example/src/CheckableList.js

@@ -1,81 +1,60 @@
 // @flow
 
 import React, { Component, Fragment } from 'react'
-import { EditorState, ContentBlock, DefaultDraftBlockRenderMap } from 'draft-js'
-import { Plugin, withPluginContext } from '@djsp/core'
-import { insertEntityBlock, mergeEntityData } from '@djsp/utils'
+import { EditorState, ContentBlock, DefaultDraftBlockRenderMap, RichUtils } from 'draft-js'
+import { withPluginContext } from '@djsp/core'
+import type { PluginProps } from '@djsp/core'
+import { mergeBlockData } from '@djsp/utils'
 import { CheckableListItem, CheckableListItemBlock, CHECKABLE_LIST_ITEM, blockRenderMap } from 'draft-js-checkable-list-item'
 
-
-type Props = {
-  block: Object,
-  blockProps: {
-    editorState: EditorState,
-    setEditorState: EditorState => void,
-  },
-}
-
-class CheckableList extends Component<Props> {
+class CheckableList extends Component<PluginProps> {
   _unregister: () => void
 
   onClick = event => {
     event.stopPropagation()
 
     const { setEditorState, editorState } = this.props
-    setEditorState(insertEntityBlock(editorState, CHECKABLE_LIST_ITEM, {
-      checked: false
-    }))
+    setEditorState(RichUtils.toggleBlockType(editorState, CHECKABLE_LIST_ITEM))
   }
 
-  toggleChecked = (block) => {
+  toggleChecked = (block: ContentBlock) => {
     const { setEditorState, editorState } = this.props
-    const content = editorState.getCurrentContent();
-    const entityKey = block.getEntityAt(0);
-    const data = content.getEntity(entityKey).getData();
 
-    let newEditorState = mergeEntityData(editorState, entityKey, { checked: !data.checked })
+    let newEditorState = mergeBlockData(editorState, block, { checked: !block.getData().get('checked') })
     setEditorState(EditorState.forceSelection(
       newEditorState,
       editorState.getSelection()
     ));
   }
 
-  blockRendererFn = (block: ContentBlock): ?CheckableListItemBlock => {
-    const { editorState } = this.props;
-    var content = editorState.getCurrentContent();
-    
-    if (block.getType() === 'atomic') {
-      var entity = block.getEntityAt(0);
-      if (!entity) return null;
-      var entityType = content.getEntity(entity).getType();
-      var data = content.getEntity(entity).getData();
-
-      if (entityType === CHECKABLE_LIST_ITEM) {
-        return {
-          component: CheckableListItem,
-          props: {
-            onChangeChecked: () => this.toggleChecked(block),
-            checked: !!data.checked,
-          },
+  componentDidMount() {
+    const { registerPlugin } = this.props
+
+    this._unregister = registerPlugin({
+      blockRendererFn: (block: ContentBlock): ?CheckableListItemBlock => {
+        if (block.getType() === CHECKABLE_LIST_ITEM) {
+          return {
+            component: CheckableListItem,
+            props: {
+              onChangeChecked: () => this.toggleChecked(block),
+              checked: !!block.getData().get('checked'),
+            },
+          }
+        }
+      },
+      blockRenderMap: DefaultDraftBlockRenderMap.merge(blockRenderMap),
+      blockStyleFn: (block: ContentBlock): ?string => {
+        if (block.getType() === CHECKABLE_LIST_ITEM) {
+          return CHECKABLE_LIST_ITEM
         }
       }
-    }
-  }
-
-  blockStyleFn(block: ContentBlock): ?string {
-    if (block.getType() === CHECKABLE_LIST_ITEM) {
-      return CHECKABLE_LIST_ITEM
-    }
+    })
   }
 
   render() {
     return (<Fragment>
-      <Plugin
-        blockRendererFn={this.blockRendererFn}
-        blockRenderMap={DefaultDraftBlockRenderMap.merge(blockRenderMap)}
-        blockStyleFn={this.blockStyleFn} />
       <button type="button" onClick={this.onClick}>
-        Insert checkable-list
+        Toggle checkable-list
       </button>
     </Fragment>)
   }

examples/checkable-list-example/src/styles.css

@@ -12,33 +12,3 @@ body {
   border: #555;
   background: #244a46;
 }
-
-
-.divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  margin: 32px 0;
-  border: none; /* strip default hr styling */
-  text-align: center;
-}
-
-.divider::after {
-  margin-left: 48px;
-  color: rgba(0, 0, 0, 0.26); /* pick a color */
-  font-size: 2.125rem;
-  letter-spacing: 48px; /* increase space between dots */
-  content: '•••';
-}
-
-.divider:hover {
-  border-radius: 2px;
-  box-shadow: 0 0 0 2px #D2E3F7;
-}
-
-.divider.focused {
-  border-radius: 2px;
-  box-shadow: 0 0 0 2px #ACCEF7;
-}