Draft.js在自定义块内的渲​​染选择

Question

让我们直接解决问题。

我有编辑器，包括实体，自定义渲染器等，我试图添加背景颜色功能。 我正在寻找一种在自定义块中渲染所选块的方法。

应用流程应该如下所示：

1. 用户选择段落，标题等元素
2. 用户点击按钮
3. 选择正在自定义块内移动并在内部呈现。

在阅读了一些例子后，我提出了这个解决方案：

按钮：

type: 'ACTION_TOGGLE_BLOCK',
action: "background"

阻止渲染器：

editorBlockRenderer = (block) => {
  if (block.getType() === 'background') {
    return {
      component: BackgroundComponent,
      editable: true,
      props: {
        onRemove: blockKey => this.editorRemoveBlock(blockKey),
      },
    }
  }
}

渲染地图：

const blockRenderMap = Immutable.Map({
  'background': {
    element: 'section',
    wrapper: <div className="cutomBackground"> {this.props.children} </div>
  }
});
const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);

组件：

class CustomBlock extends React.Component {

  render() {
    return (
      <div>
        { this.props.children }
      </div>
    )
  }
}

class BackgroundComponent extends React.Component {
  render() {

    return(
      <div className="customBackground">
        test
      </div>
    )
  }
}

不幸的是我不知道如何在BackgroundComponent中渲染选择。在包含SelectionState的道具中有一个选择变量。

我试图使用blockRenderMap进行解决方法，但不幸的是它仅适用于insline样式元素，不适用于其他块。

const blockRenderMap = Immutable.Map({
  'background': {
    element: 'section',
    wrapper: <div className="cutomBackground"> {this.props.children} </div>
  }
});
const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);

总结一下：我希望能够在自定义块中包装选定的块。 谢谢你的帮助。