springload / draftail

I can't find a prop that will make the editor as read-only.

Hey @TheWebDevel, there isn't any so that's expected.

@thibaudcolas
i have seen that in

draftail/lib/components/DraftailEditor.js

Lines 593 to 647 in d48d667

    
           <Toolbar 
        
             currentStyles={editorState.getCurrentInlineStyle()} 
        
             currentBlock={DraftUtils.getSelectedBlock(editorState).getType()} 
        
             enableHorizontalRule={enableHorizontalRule} 
        
             enableLineBreak={enableLineBreak} 
        
             showUndoControl={showUndoControl} 
        
             showRedoControl={showRedoControl} 
        
             blockTypes={blockTypes} 
        
             inlineStyles={inlineStyles} 
        
             entityTypes={entityTypes} 
        
             controls={controls} 
        
             readOnly={readOnly} 
        
             toggleBlockType={this.toggleBlockType} 
        
             toggleInlineStyle={this.toggleInlineStyle} 
        
             addHR={this.addHR} 
        
             addBR={this.addBR} 
        
             onUndoRedo={this.onUndoRedo} 
        
             onRequestSource={this.onRequestSource} 
        
             getEditorState={this.getEditorState} 
        
             onChange={this.onChange} 
        
           /> 
        
           <Editor 
        
             customStyleMap={behavior.getCustomStyleMap(inlineStyles)} 
        
             ref={(ref) => { 
        
               this.editorRef = ref; 
        
             }} 
        
             editorState={editorState} 
        
             onChange={this.onChange} 
        
             placeholder={placeholder} 
        
             readOnly={readOnly} 
        
             stripPastedStyles={stripPastedStyles} 
        
             spellCheck={spellCheck} 
        
             textAlignment={textAlignment} 
        
             textDirectionality={textDirectionality} 
        
             autoCapitalize={autoCapitalize} 
        
             autoComplete={autoComplete} 
        
             autoCorrect={autoCorrect} 
        
             ariaDescribedBy={ariaDescribedBy} 
        
             handleReturn={this.handleReturn} 
        
             keyBindingFn={behavior.getKeyBindingFn( 
        
               blockTypes, 
        
               inlineStyles, 
        
               entityTypes, 
        
             )} 
        
             handleKeyCommand={this.handleKeyCommand} 
        
             handleBeforeInput={this.handleBeforeInput} 
        
             handlePastedText={this.handlePastedText} 
        
             onFocus={this.onFocus} 
        
             onBlur={this.onBlur} 
        
             onTab={this.onTab} 
        
             blockRendererFn={this.blockRenderer} 
        
             blockRenderMap={behavior.getBlockRenderMap(blockTypes)} 
        
             blockStyleFn={behavior.blockStyleFn} 
        
           />

but the version on NPM is so old
is there any plan to publish the latest version?

@kkshyu what's on npm is up to date, except for the two things I merged last week which are in the "Unreleased" section in the CHANGELOG: https://github.com/springload/draftail/blob/master/CHANGELOG.md#unreleased.

Is there anything else you're missing?

@kkshyu what's on npm is up to date, except for the two things I merged last week which are in the "Unreleased" section in the CHANGELOG: https://github.com/springload/draftail/blob/master/CHANGELOG.md#unreleased.

Is there anything else you're missing?

I thought it is my misunderstanding. I just saw that there is readOnly state in DraftailEditor.
Is there any plan to expose to the props like this:

<DraftailEditor
    readOnly={true}
    ...
/>

or is there any suggestion to render the readonly editor?

👌 gotcha. There is no plan to expose this as a prop at the moment, but if you have a use case for this and willingness to make a PR we can definitely consider it, it shouldn't be that much work if it's just a prop forwarded to the Draft.js readOnly prop.

Alternatively, you can probably achieve the same effect by using a ref on the editor, and calling its lockEditor function (undocumented, might break in a future release, but that's very unlikely). Something like:

componentDidMount() {
  if (this.editor) {
    this.editor.lockEditor();
  }
}

render() {
  return (
    <DraftailEditor
      ref={(editor) => { this.editor = editor; }}
      ...
    />    
  );
}

	<Toolbar
	currentStyles={editorState.getCurrentInlineStyle()}
	currentBlock={DraftUtils.getSelectedBlock(editorState).getType()}
	enableHorizontalRule={enableHorizontalRule}
	enableLineBreak={enableLineBreak}
	showUndoControl={showUndoControl}
	showRedoControl={showRedoControl}
	blockTypes={blockTypes}
	inlineStyles={inlineStyles}
	entityTypes={entityTypes}
	controls={controls}
	readOnly={readOnly}
	toggleBlockType={this.toggleBlockType}
	toggleInlineStyle={this.toggleInlineStyle}
	addHR={this.addHR}
	addBR={this.addBR}
	onUndoRedo={this.onUndoRedo}
	onRequestSource={this.onRequestSource}
	getEditorState={this.getEditorState}
	onChange={this.onChange}
	/>

	<Editor
	customStyleMap={behavior.getCustomStyleMap(inlineStyles)}
	ref={(ref) => {
	this.editorRef = ref;
	}}
	editorState={editorState}
	onChange={this.onChange}
	placeholder={placeholder}
	readOnly={readOnly}
	stripPastedStyles={stripPastedStyles}
	spellCheck={spellCheck}
	textAlignment={textAlignment}
	textDirectionality={textDirectionality}
	autoCapitalize={autoCapitalize}
	autoComplete={autoComplete}
	autoCorrect={autoCorrect}
	ariaDescribedBy={ariaDescribedBy}
	handleReturn={this.handleReturn}
	keyBindingFn={behavior.getKeyBindingFn(
	blockTypes,
	inlineStyles,
	entityTypes,
	)}
	handleKeyCommand={this.handleKeyCommand}
	handleBeforeInput={this.handleBeforeInput}
	handlePastedText={this.handlePastedText}
	onFocus={this.onFocus}
	onBlur={this.onBlur}
	onTab={this.onTab}
	blockRendererFn={this.blockRenderer}
	blockRenderMap={behavior.getBlockRenderMap(blockTypes)}
	blockStyleFn={behavior.blockStyleFn}
	/>

Readonly Editor