Enable left click in edit mode for linkify plugin for draftjs

Question

I was trying draft-js-linkify-plugin for creating a simple rich text editor. I have a requirement that link should be clickable while I am editing the content.

Is there any way to do it?

Answer 1

What you want is a WYSIWYG editor type functionality. You can use readOnly mode on draftJS. It will convert your text to corresponding html and it wont be editable. Basically it works like a preview mode. You will need two instances of the same component to make it work. isReadOnly will be true for preview mode and isReadOnly will be false for edit mode.

Like so:

<Editor editorState={this.state.editorState}
                        placeholder={placeholderLabel}
                        handleKeyCommand={this.handleKeyCommand}
                        keyBindingFn={this.keyBindingFunction}
                        onChange={this.onChange}
                        readOnly={isReadOnly}
                        onEscape={this.onEscape}
                        plugins={this.state.plugins}
                        ref={this.editorRef}/>