Draftjs Elements with Props

Question

I am new to draftjs and I was wondering if there is a way to make my own components inline in the editor.

I have a line with twitter pens. I use a decorator to detect the regular expression @ [{handle}], which replaces the handle and displays the inline component. However, my handle component needs properties such as a callback function and URL.

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

I'm sure I just missed something. I checked contentState.getEntity(entityKey).getType() , but it only sees the content that I pass to the composite decorator as unpainted, and not the decorated parts as separate blocks.

I saw that you can change 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 provide 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 am sorry that the document is missing it. You can provide props in CompositeDecorator as CompositeDecorator({strategy:xxx,component:xxx,props:{...}}) Source check