Focus on EditorBlock

[alihaddadkar]

Hi. How to focus textarea when add new block?

I want autofocus EditorBlock

<EditorBlock {...Object.assign({}, this.props, {
              "editable": true })
} />

[nsfmc]

if you have some setup like this, where you wrap a draft component in some other larger component but you want to make the outer element focus draft

const WrappedDraft = () => (
  <div>
    <Editor ... />
  </div>
)

you can focus the editor when clicking the outer div by doing something like

class WrappedDraft extends React.Component {
  render() {
    return <div onClick={() => this.editor.focus()}>
      <Editor ref={elt => this.editor = elt;} ... />
    </div>
  }
}

having that ref to the draft component will allow you to call .focus() on it from all over.

good luck.

[alihaddadkar]

@nsfmc

I want autofocus EditorBlock

<EditorBlock {...Object.assign({}, this.props, {
              "editable": true })
} />

[nsfmc]

you can autofocus in much the same way using componentDidMount or however

class WrappedDraft extends React.Component {
  componentDidMount() {
    this.editor && this.editor.focus(); // or however you want
  }
  render() {
    return <div>
      <Editor ref={elt => this.editor = elt;} ... />
    </div>
  }
}

[alihaddadkar]

@nsfmc I used this method in the main component, but I can not use it for custom component.

[michelson]

@nsfmc I think that @alihaddadkar is asking on how to do the focus on EditorBlock not Editor

[nsfmc]

Sorry i misread the issue, do you mean that when adding a new custom editorblock to your editor you want the editor to be focused and the selection to be moved to a location in the new editorblock?

[alihaddadkar]

@nsfmc Yes, I want to do the same.

[divyenduz]

I can also use this, ref approach won't work on EditorBlock yet as it does not forward the ref using innerRef or something like the new React 16.3 ref API.

I will be happy to contribute if we can agree on an API.

Thanks! :)

[weeebdev]

Any news or workarounds?