Draft.js. Как я могу позже обновить блок atomic:image src, например, сохранить статью?

Question

У меня проблемы с обновлением блоков изображений в editorState в draft.js. Я хочу изменить атомное: src изображения на кнопку сохранить. Таким образом, src, например, теперь blob: http://localhost:3000/7661d307-871b-4039-b7dd-6efc2701b623 но я хотел бы обновить src, например, до /uploads-from-my-server/test.png

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;
});

Я знаю, что могу получить доступ к строке src с помощью block.getData(). Get('src'), но не могу установить

Спасибо за ваш замечательный редактор

Answer 1

Я боролся с подобной проблемой, я закончил преобразование состояния содержимого в необработанный массив, используя convertToRaw а затем обновить его вручную и использовать convertFromRaw и установите новое состояние:

import {EditorState, ContentState, convertToRaw, convertFromRaw /*, ...*/} from 'draft-js';

// ...

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

  let rawContent = convertToRaw(contentState);

  for(let i = 0; i < rawContent.blocks.length; i++) {
      let b = rawContent.blocks[i];
      if(b['type'] !== "unstyled" && b.entityRanges.length === 1) {
        const entityKey = b['entityRanges'][0]['key'];
        const entityMap = rawContent['entityMap'][entityKey];
        if(entityMap["type"] === "image") {
          rawContent['entityMap'][entityKey]['data']['src'] = '/uploads-from-my-server/test.png';         
        }
      }      
  } 

  const newContentState = convertFromRaw(rawContent);  
  const newEditorState = EditorState.push(this.state.editorState, newContentState, 'update-contentState');
  this.setState({editorState: newEditorState});
}

Примечание: это не полностью рабочий пример, это просто отправная точка. Надеюсь, поможет:)