React-draft-wysiwyg: using ref in new Editor

[nadunindunil]

Hi,
I am extending the editor to add new custom blocks and i faced a problem when I use

this.refs.editor.focus();

where actually ref is editor,

<div >
     <Editor 
          ref = "editor"
          editorState={editorState}
          onEditorStateChange={this.onEditorStateChange}
        />
</div>

and the error is -
TypeError: this.refs.editor.focus is not a function

could you please help me with this problem?

[jpuri]

Hello @nadunindunil ,

Editor atm does not supports ref property. But from your request I think I should add it soon.

[nadunindunil]

Hi @jpuri ,
thank you very much for your quick reply!
will you add the ref for editor soon ?

there is another problem which I came across when I was using the react-draft-wysiwyg ,

• before I add the plugin I could create an exact same type block by pressing the "enter" button.(as an example I created a todo block and when the cursor is inside the todo block I could simply create another one by pressing the enter key)
• but after react-draft-wysiwyg added I couldn't find a way to achieve that. (and I need this feature for my project)

question is - doesn't react-draft-wysiwyg support that feature? if so anyway to fix that?
or am I doing something wrong when using the plugin?

Thank you.

[jpuri]

@nadunindunil : yes I will add ref soon.

On Enter key press react-draft-wysiwyg inserts a paragraph. You can change it by passing property handleReturn. It will be passed to the editor as here: https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L450

[nadunindunil]

@jpuri ,
Thank you very much that's all I wanted to know.

[PrimeLens]

Hi @nadunindunil I was able to set focus by using an internal method. see code here
https://github.com/jpuri/react-draft-wysiwyg/issues/476
hope it helps