How to insert / upload image (update entity and blocks) in Draft.js?

Question

I am trying to insert image to Draft.js editor.

Based on my understanding, I need update entity by mergeData and blocks by mergeBlockData. (I am not sure)

Now I am trying to use mergeBlockData to insert a block.

mergeBlockData(
  contentState: ContentState,
  selectionState: SelectionState,
  blockData: Map<any, any>
): ContentState

Please read comment in the code.

import { Map } from 'immutable';

const selection = this.state.editorState.getSelection();
const contentState = this.state.editorState.getCurrentContent();

console.log(convertToRaw(contentState));  // for example, I have 3 blocks

const blockData = Map({ ov72: {  // here how to generate a random valid key?
  "key": "ov72",
  "text": " ",
  "type": "atomic",
  "depth": 0,
  "inlineStyleRanges": [],
  "entityRanges": [{
    "offset": 0,
    "length": 1,
    "key": 1
  }],
  "data": {}
}});
const newContentState = Modifier.mergeBlockData(contentState, selection, blockData);

console.log(convertToRaw(newContentState));  // here is wrong, still 3 blocks. Also original blocks have no change

const newEditorState = EditorState.push(this.state.editorState, newContentState);

York

You are merging blockData why would the size of blocks increase? – Larousse

@NanduKalidindi assume mergeBlockData is neither replace or add, what is the function of it? And which correct API should I use? – York

I am working on a snippet. But I guess you should use ContentBlock if you want to add new blocks. – Larousse

@NanduKalidindi would u mind adding a demo for how to use ContentBlock to add new block in answer? thanks – York

Answer 1

Took a while to figure out how to insert image.

  insertImage = (editorState, base64) => {
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
      'image',
      'IMMUTABLE',
      { src: base64 },
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newEditorState = EditorState.set(
      editorState,
      { currentContent: contentStateWithEntity },
    );
    return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
  };

Then you can use

const base64 = 'aValidBase64String';
const newEditorState = this.insertImage(this.state.editorState, base64);
this.setState({ editorState: newEditorState });

For render image, you can use Draft.js image plugin.

Live demo: codesandbox

The demo inserts a Twitter logo image.

---

If you want to insert a image from local file, you can try to use FileReader API to get that base64.

For how to get base64, it is simple, check

Live demo: jsbin

Now go ahead to put them together, you can upload image from local file!

York

Atomic block is not erasable – Collateral

Thanks @Hongbo, by the way the string 'image' in createEntity is case sensitive. you need to use IMAGE or it won't work. – Gertrude

Answer 2

If you are using draft-js image plugin, you can achieve this as follows.

Get the base64 of your image as @Hongbo Miao explained.

const imagePlugin = createImagePlugin();//initialize image plugin
const base64 = 'aValidBase64String';
const newEditorState = imagePlugin.addImage(this.state.editorState, base64);
this.setState({ editorState: newEditorState });

Dionysian

Answer 3

If you want to insert a new Block then you probably would want to use ContentBlock and not mergeBlockData.

ContentBlock: https://draftjs.org/docs/api-reference-content-block.html#content

Please give this snippet a try.

import { genKey } from 'draft-js'

addNewBlock(editorState) {
  const text = 'Alpha';
  const block = new ContentBlock({
    key: genKey(),
    type: 'unstyled',
    text,
  });

  const contentState = editorState.getCurrentContent();
  const blockMap = contentState.getBlockMap().set(block.key, block);                   

  return EditorState.push(editorState, contentState.set('blockMap', blockMap));
}

Larousse

Really appreciate, I just found the solution after checking source code, I will post another answer including updating both entity and blocks to insert a image soon. – York

Where is defined the genKey() method? – Wheeze

@DimitriosDesyllas It's an imported method from DraftJS library. Please check the updated snippet. – Larousse