Пользовательский блок с использованием blockRendererFn с DraftJS

Question

Можно ли визуализировать пользовательский блок, где некоторые его части доступны для редактирования, а другие нет?

Вот пример того, чего я пытаюсь достичь. Компонент ReadOnlyComponent должен быть доступен только для чтения, а компонент WriteComponent содержит данные, которые можно редактировать.

class CustomBlock extends React.Component {
  props: Props;
  render() {
    return (
      <Layout>
        <LeftColumn>
          <ReadOnlyComponent>
            {this.props.block.getData().get('speaker')}
          </ReadOnlyComponent>
        </LeftColumn>
        <RightColumn>
          <WriteComponent>
            <EditorBlock {...this.props} />
          </WriteComponent>
        </RightColumn>
      </Layout>
    );
  }
}

Вот реквизит blockRendererFn, который мы передаем в редактор для создания пользовательских компонентов блока:

<Editor
  editorState={this.state.editorState}
  blockRendererFn={() => ({
    component: CustomBlock,
  })}
/>

Answer 1

Установка атрибута contenteditable="true" в WriteComponent должна делать то, что вы хотите.

class CustomBlock extends React.Component {
  ...
        <RightColumn>
          <WriteComponent contenteditable="true">
            <EditorBlock {...this.props} />
          </WriteComponent>
        </RightColumn>
      </Layout>
    );
  }
}

Также вы должны установить оставшийся элемент в contenteditable="false". Вы можете сделать это, установив атрибут "редактируемый" для вашего пользовательского блока в вашем рендерере.

<Editor
  editorState={this.state.editorState}
  blockRendererFn={() => ({
    component: CustomBlock,
    editable: false,
  })}
/>

Теперь ваш пользовательский блок должен отображаться как недоступный для редактирования, за исключением всего, что находится в WriteComponent.