Draftjs components with props

Question

I'm new to draftjs and I was wondering if there was a way to render my custom components inline in the editor.

I have a string with twitter handles. I use the decorator to detect regex @[{handle}] which replaces the handle and renders the component inline. However my handle component needs properties such as a callback function and a URL.

I'm not too sure how to pass my component the URL and callback function which I pass into my ContentEditable component.

I'm sure I'm just missing something. I've checked the contentState.getEntity(entityKey).getType() but it only sees the content I pass into the composite decorator as unstyled and not the decorated parts as separate blocks.

I've seen that you can modify the entity map, but I'm not sure if this is the right approach or how to define my own entity in the entity map

Does anyone know what I am missing to give properties to my component?

const decorator = new CompositeDecorator([
  {
    strategy: handleStrategy,
    component: Handle,
  },
]);


export default class ContentEditable extends component {
    const content = 'some messages and my handle @[handle]';
    if (this.props.content.trim() !== '') {
      const processedHTML = DraftPasteProcessor.processHTML(content);
      const entityMap = processedHTML.entityMap;
      const contentState = ContentState.createFromBlockArray(processedHTML.contentBlocks, entityMap);
      // Create with content with decorator
      editorState = EditorState.createWithContent(contentState, decorator);
    } else {
      // Create empty content with decorator
      editorState = EditorState.createEmpty(decorator);
    }
    this.state = {
      editorState,
    }
}

render() {
    return (
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          ref="editor"
        />
    );
  }

Answer 1

I'm sorry the document is missing it. You can provide props in CompositeDecorator like CompositeDecorator({strategy:xxx,component:xxx,props:{...}}) Checking the source