Draft.js rendering selection inside a custom block

Question

Let's go straight to the problem.

I have editor full of entities, custom renderers etc and I'm trying to add Background color functionality. I'm looking for a way to render selected block inside custom block.

App flow should look like this:

User select elements like paragraphs, headings etc
User clicks the button
Selection is being moved inside custom block and rendered inside.

After reading some examples I came up with this solution:

Button:

type: 'ACTION_TOGGLE_BLOCK',
action: "background"

Block renderer:

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 render selection inside BackgroundComponent. There is a selection variable inside props containing SelectionState.

I was trying to do workaround using blockRenderMap but unfortunately it works only with insline styled elements, doesn't work with another blocks.

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

To sum it up: I want to be able to wrap selected blocks in custom block. Thanks for any help.

Draft.js rendering selection inside a custom block

0 Answers0