Draft-js: How can I update block atomic:image src later on for example article save?

[snaerth]

Hi all

I am having trouble updating my image blocks in editorState.
I want to change atomic:image src on button save.
So the src is for example now blob:http://localhost:3000/7661d307-871b-4039-b7dd-6efc2701b623
but I would like to update to src to for example /uploads-from-my-server/test.png

This is what I have so far

onSave(e) {
    e.preventDefault();
    const { editorState } = this.state;
    const contentState = editorState.getCurrentContent();

    editorState.getCurrentContent().getBlockMap().map((block) => {
      const type = block.getType();

      if (type === 'atomic:image') {
        const rangeToReplace = new SelectionState({
          anchorKey: block.getKey(),
          focusKey: block.getKey(),
        });

        Modifier.replaceText(contentState, rangeToReplace, '/uploads-from-my-server/test.png');
        const newContentState = editorState.getCurrentContent();
        this.setState({ editorState: newContentState });
      }

      return true;
    });

I know I can access src string with block.getData().get('src') but I cant set it though

Thank you for your awesome editor

[Hongbo-Miao]

Hi @snaerth check my answer on Stack Overflow
https://stackoverflow.com/a/47614259/2000548

It might help.

[zry754331875]

I have the same requirements, I need to replace the src in the img tag after uploading the img tag to my own server. My approach is to convert html to src and then convert to editState, but undo will not. If I use EditorState.push(editorState, newContentState, 'insert-fragment');, the undo function is valid.

[xiaoxfan]

I have the same requirements, I need to replace the src in the img tag after uploading the img tag to my own server. My approach is to convert html to src and then convert to editState, but undo will not. If I use EditorState.push(editorState, newContentState, 'insert-fragment');, the undo function is valid.

Hi. Have you solved this problem? I paste some richtext content from webpages,it contains some images or videos,I want to upload this images/videos to my own server,then replace the src to my own server's URI. thanks!