add autoFocus option, close #149

README.md

@@ -69,6 +69,7 @@ useBuiltInExtensions
 | --- | :---: | :---: | --- |
 | `content` | `Object\|String` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
 | `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
+| `autoFocus` | `Boolean` | `false` | Focus the editor on init. |
 | `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
 | `useBuiltInExtensions` | `Boolean` | `true` | By default tiptap adds a `Doc`, `Paragraph` and `Text` node to the Prosemirror schema. |
 | `dropCursor` | `Object` | `{}` | Config for `prosemirror-dropcursor`. |

packages/tiptap/src/Editor.js

@@ -15,6 +15,7 @@ export default class Editor {
   constructor(options = {}) {
     this.defaultOptions = {
       editable: true,
+      autoFocus: false,
       extensions: [],
       content: '',
       emptyDocument: {
@@ -52,6 +53,13 @@ export default class Editor {
     this.view = this.createView()
     this.commands = this.createCommands()
     this.setActiveNodesAndMarks()
+
+    if (this.options.autoFocus) {
+      setTimeout(() => {
+        this.focus()
+      }, 10)
+    }
+
     this.options.onInit({
       view: this.view,
       state: this.state,