Draft-js-plugins: Cannot click Button in Block on draft-js-plugins-editor

[joehua87]

It works well with original Draft-js Editor
I've provide the example in https://github.com/joehua87/draft-js-example
Live link: https://joehua87.github.io/draft-js-example/

[nikgraf]

oh, thx for reporting! this definitely looks like a bug!

[mzbac]

this is not a draft-js-plugin issue I guess. the cause of click button doesn't work is in your plugin-editor you used decorateComponentWithProps to wrapped your Button component.. if you try to use a decorator to wrapped up your custom component in blockRendererFn on draft-js editor, it will stop the click event as well.

function blockRendererFn (contentBlock) {
  const blockType = contentBlock.getType()
  if (blockType === 'atomic') {
    const entity = Entity.get(contentBlock.getEntityAt(0))
    const type = entity.getType()
    if (type === 'button') {
      console.log('rendering block')
      return {
        component: decorateComponentWithProps(ButtonBlock,{}),// doesn't work
        component: ButtonBlock, // works
        editable: false,
      }
    }
  }
  return null
}

[mzbac]

@joehua87 after got support from draft Js team, it caused by creating decorated component in blockRenderFn. that means the decorated component is unmounting and remounting ench blockRender time. you can solve this by change your code in createButtonPlugin as below example:

import decorateComponentWithProps from 'decorateComponentWithProps'
import { Entity } from 'draft-js'
import ButtonBlock from '../../components/ButtonBlock'

export default function createButtonPlugin(config = {}) {
  // const theme = config.theme ? config.theme : {}
  const store = {
    getEditorState: undefined,
    setEditorState: undefined,
  };
 const decoratedComponent =decorateComponentWithProps(ButtonBlock, { editorStore: store });
  return {
    initialize: ({ getEditorState, setEditorState, setReadOnly, getReadOnly }) => {
      store.getEditorState = getEditorState
      store.setEditorState = setEditorState
      store.setReadOnly = setReadOnly
      store.getReadOnly = getReadOnly
    },
    blockRendererFn: (contentBlock) => {
      const blockType = contentBlock.getType()
      if (blockType === 'atomic') {
        const entity = Entity.get(contentBlock.getEntityAt(0))
        const type = entity.getType()
        if (type === 'button') {
          return {
            component: decoratedComponent,
            editable: false,
          }
        }
      }
      return null
    },
  }
}

[tbohlen]

A question about this issue - why is it that we cannot simply pass setEditorState, getEditorState, setReadOnly, and getReadOnly in via the props key of the return value of blockRendererFn. In my own code I found that, somehow, all functions were stripped out of blockProps when I used the strategy. Would you mind sharing why or where that is happening?