Bloc personnalisé utilisant blockRendererFn avec DraftJS

Question

Est-il possible de rendre un bloc personnalisé où certaines parties sont éditables et d'autres non?

Voici un exemple de ce que j'essaie d'accomplir. Le composant ReadOnlyComponent doit être en lecture seule, tandis que WriteComponent contient des données modifiables.

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

Voici le blockRendererFn prop que nous passons à l'Editor pour créer des composants de bloc personnalisé:

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

Answer 1

paramètre d'attribut contenteditable = "true" sur WriteComponent devrait faire ce que vous voulez .

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

Vous devez également définir l'élément restant contented = "false". Vous pouvez le faire en définissant l'attribut 'editable' pour votre bloc personnalisé dans votre moteur de rendu. Maintenant, votre bloc personnalisé doit être rendu non modifiable sauf pour tout ce qui est dans WriteComponent.