Draft.js drawing selection inside custom block

Question

Let's get back to the problem.

I have an editor full of objects, custom renders, etc., and I'm trying to add background color functionality. I am looking for a way to render the selected block inside a custom block.

The application flow should look like this:

• User selection items such as paragraphs, headings, etc.
• User presses a button
• The selection moves inside the custom block and is displayed inside.

After reading some examples, I came up with this solution:

Button

type: 'ACTION_TOGGLE_BLOCK',
action: "background"

Block handler:

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

Render map:

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

Components:

class CustomBlock extends React.Component {

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

class BackgroundComponent extends React.Component {
  render() {

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

Unfortunately, I have no idea how to make the selection inside the BackgroundComponent. In the details containing the SelectionState, there is a selection variable.

, blockRenderMap, , , insline, .

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

: . .