fix(checkable-list-example): use custom mergeBlockData to avoid update

issue and add Draft.css

Author: freedomlang

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

@@ -6,7 +6,6 @@ import {
   ContentBlock,
   DefaultDraftBlockRenderMap,
   RichUtils,
-  Modifier,
 } from 'draft-js'
 import { withPluginContext } from '@djsp/core'
 import type { PluginProps } from '@djsp/core'
@@ -18,40 +17,53 @@ import {
   CheckableListItemUtils,
 } from 'draft-js-checkable-list-item'
 
+function mergeBlockData(
+  editorState: EditorState,
+  block: ContentBlock,
+  data: { [id: string]: any }
+): EditorState {
+  const content = editorState.getCurrentContent()
+  const updatedBlock = block.mergeIn(['data'], data)
+  const blockKey = block.getKey()
+  const blockMap = content.getBlockMap().merge({ [blockKey]: updatedBlock })
+  return EditorState.push(
+    editorState,
+    content.merge({ blockMap }),
+    'change-block-data'
+  )
+}
+
 class CheckableList extends Component<PluginProps> {
   _unregister: () => void
 
+  updateEditorState = (newEditorState: EditorState) => {
+    const { setEditorState, editorState } = this.props
+    setEditorState(
+      EditorState.forceSelection(newEditorState, editorState.getSelection())
+    )
+  }
+
   onClick = event => {
     event.stopPropagation()
 
-    const { setEditorState, editorState } = this.props
+    const { editorState } = this.props
     const newEditorState = RichUtils.toggleBlockType(
       editorState,
       CHECKABLE_LIST_ITEM
     )
-    setEditorState(
-      EditorState.forceSelection(newEditorState, editorState.getSelection())
-    )
+    this.updateEditorState(newEditorState)
   }
 
   toggleChecked = (block: ContentBlock) => {
-    const { setEditorState, editorState } = this.props
-    let newContentState = Modifier.mergeBlockData(
-      editorState.getCurrentContent(),
-      editorState.getSelection(),
-      {
-        checked: !block.getData().get('checked'),
-      }
-    )
-    let newEditorState = EditorState.push(
-      editorState,
-      newContentState,
-      'change-block-data'
-    )
-    setEditorState(newEditorState)
+    const { editorState } = this.props
+    let newEditorState = mergeBlockData(editorState, block, {
+      checked: !block.getData().get('checked'),
+    })
+    this.updateEditorState(newEditorState)
   }
 
   handleTab = (event: SyntheticKeyboardEvent): ?boolean => {
+    // debugger
     if (this.adjustBlockDepth(event)) {
       return true
     }
@@ -93,7 +105,7 @@ class CheckableList extends Component<PluginProps> {
           return CHECKABLE_LIST_ITEM
         }
       },
-      // handleTab: this.handleTab
+      onTab: this.handleTab,
     })
   }
 

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

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import { EditorState, convertFromRaw } from 'draft-js'
 import { EditorContainer, Editor } from '@djsp/core'
 import CheckableList from './CheckableList'
+import 'draft-js/dist/Draft.css'
 import 'draft-js-checkable-list-item/lib/CheckableListItem.css'
 import './styles.css'