
# Focus on the editor

There some cases that you need to return the user focus on the editor. For
example there may be an upload box and you need to jump back to the editor
just right after the upload process.

## focusOnEditor

To return the focus on the editor you can use `focusOnEditor` utility.

```ts
focusOnEditor(ref: EditorRef) => void;
```

## Example

An example of `focusOnEditor` usage:

```ts
import { useState, useRef } from 'react';
import { EditorState } from 'draft-js';
import { Editor, focusOnEditor } from 'contenido';

const Demo = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const editorRef = useRef(null);

  return (
    <>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        editorRef={editorRef}
      >
      <button
        onClick={() => focusOnEditor(editorRef)}
      >
        Focus on editor
      </button>
    </>
  )
}

export default Demo;
```


Focus On The Editor

overview

installation

getting-started

custom-styles

bold

italic

underline

line-through

overline

superscript

subscript

color

transform

inline-styles

custom-block-type

heading-1-to-6

paragraph

list

blockquote

text-alignment

block-types

link

decorators

custom-atomic-block

image-block

video-block

audio-block

file-block

atomic-count

image-count

video-count

audio-count

file-count

atomic-blocks

focus-on-editor

empty-raw-content-state

selected-blocks-map

clear-inline-styles

clear-block-types

soft-newline

clear-entities

clear

character-count

plain-text

word-array

word-count

find-entities

find-link-entities

entity-count

generate-key

helpers

shortcuts

shortcuts-map

Focus on the editor

focusOnEditor #

Example #