0

Using Draft-js, I'm inserting an atomic block into the editor via an entity:

const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
      'IMAGE',
      'IMMUTABLE',
      {src: 'https://some.image.png' }
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set(
  editorState,
  {currentContent: contentStateWithEntity}
);

// causes re-render with editorState
this.onChange(
    AtomicBlockUtils.insertAtomicBlock(
      newEditorState,
      entityKey,
      ' '
    )
);

Using a blockRendererFn, I render a custom component to render the image in a div, using the entity data:

render() {
  return (
    <div><img src={src} /></div>
  );
}

I'd like the ability to put a caption with the image (entity). I tried having an input box hooked up to state in my component, which would merge the entity data, however it seems to just remove the entity if any sort of input box text is triggered.

render() {
  return (
    <div>
       <img src={src} />
       <input placeholder="Caption" onChange={this.updateCaption} />
    </div>
  );
}

Does anyone know how to have a custom input area within a custom block?

Roy Scheffers
  • 3,832
  • 11
  • 31
  • 36
Alias
  • 2,983
  • 7
  • 39
  • 62
  • I am looking to achieve the exact same thing. Did you manage to get it working? – Damien Monni Mar 27 '18 at 17:04
  • Yeah in the end I decided entity wasn't right for my use case - I moved the logic to a custom atomic block, and now have way more functionality. – Alias Mar 29 '18 at 19:17

0 Answers0