# How to focus cursor after adding node?

**URL:** https://discuss.prosemirror.net/t/how-to-focus-cursor-after-adding-node/4482
**Category:** Uncategorized
**Created:** [March 14, 2022, 11:32am UTC](https://discuss.prosemirror.net/t/how-to-focus-cursor-after-adding-node/4482 "2022-03-14T11:32:02Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![tilyupomax](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/tilyupomax/32/2702_2.png) [@tilyupomax](https://discuss.prosemirror.net/u/tilyupomax)
#### Post date: [March 14, 2022, 11:32am UTC](https://discuss.prosemirror.net/t/how-to-focus-cursor-after-adding-node/4482/1 "2022-03-14T11:32:02Z")

</div>

We are using React, Tiptap, ProseMirror. This is code of custom node:

```auto
const InputEditNode = Node.create({
  name: InputNodeName,
  group: 'inline',
  inline: true,
  atom: true,
  selectable: true,
  showGapCursor: true,
  // @ts-ignore
  addCommands() {
    return {
      addInput: (attrs: InputAttr) => ({ commands }: CommandProps) => {
        commands.insertContent({
          type: InputNodeName,
          attrs,
        });
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: InputNodeName,
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    const newAttr = {
      ...HTMLAttributes,
      id: v4(),
      className: 'default',
    };

    return [InputNodeName, mergeAttributes(newAttr)];
  },

  addNodeView() {
    return ReactNodeViewRenderer(InputEditView);
  },
});

export default InputEditNode;

```

This is code where we add node to editor. Here we add one space before and after node. The problem is focus. It doesn’t work as we expected. We need to show focusing after the added node, but in our case it seems stay in the same position, even after add node.

```auto
 editor?.commands.insertContent('<span> </span>', {
              parseOptions: {
                preserveWhitespace: true,
              },
            });
editor?.commands.addInput();
editor?.commands.insertContent('<span> </span>', {
              parseOptions: {
                preserveWhitespace: true,
              },
});
editor?.commands.focus();

```

 ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/d/d13ddd75e93d937ba54a608299eb73bb5faa0559.png) ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/c/c425af74dbf9add2651930d8449a06f4290b38b5.png) ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/3/35677d1612de6076e73762a6db690139f1a031f1.png) ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/0/04016861a414d77016b179ff40999ad31b04987f.png) ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/b/b8c4f22ac2fcd0f84a1a52f4c27dfd96b875a78b.png)

But it works well if we don’t use editor.commands.focus(), but in this case we don’t see focus.

 ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/7/74b1b4e9d505c6894cc631044c4f84e96a676523.png)we have checked all of these nodes go one by one. Also we tried to use position of focus, but in this case focus does’t see spaces that we have added and it jumped like crazy:

```auto
editor?.commands.focus(editor?.state.selection.anchor + 3);

```

Expected: ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/8/8b387f05d8ebecfc455e20b4d80ce0d8d0a5d989.png) ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/c/c18ebb0578c9b84192ebf195979cd45ddd963753.png) ![image](https://discuss.prosemirror.net/uploads/secondsite/original/2X/b/b3e08e909986f3a44448698f9ae8bd95156d087a.png)

How can we reach our expected solution?

---

<div class="post-metadata">

### Author: ![bhl](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bhl/32/4074_2.png) [@bhl](https://discuss.prosemirror.net/u/bhl)
#### Post date: [March 17, 2022, 7:20am UTC](https://discuss.prosemirror.net/t/how-to-focus-cursor-after-adding-node/4482/2 "2022-03-17T07:20:30Z")

</div>

Try chaining commands? [Commands – Tiptap Editor](https://tiptap.dev/api/commands#chain-commands)

Would ask on TipTap’s Github though not here since TipTap’s `commands` are slightly different than ProseMirror’s.

---

<div class="post-metadata">

### Author: ![jmichael22](https://discuss.prosemirror.net/letter_avatar_proxy/v4/letter/j/a8b319/32.png) [@jmichael22](https://discuss.prosemirror.net/u/jmichael22)
#### Post date: [April 27, 2022, 8:39pm UTC](https://discuss.prosemirror.net/t/how-to-focus-cursor-after-adding-node/4482/3 "2022-04-27T20:39:28Z")

</div>

were you able to figure this out? I’ve been trying for days to solve this…would appreciate any help!

---

<div class="post-metadata">

### Author: ![mmulqueen](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/mmulqueen/32/3716_2.png) [@mmulqueen](https://discuss.prosemirror.net/u/mmulqueen)
#### Post date: [October 20, 2023, 1:35pm UTC](https://discuss.prosemirror.net/t/how-to-focus-cursor-after-adding-node/4482/4 "2023-10-20T13:35:43Z")

</div>

I can’t say whether this works for the OP’s case, but after wasting a load of time on this, this simple solution seems to work for me.

`editor.chain().focus().insertContentAt(pos, node).run()`

insertContentAt has an option called updateSelection which defaults to true and this takes care of moving the cursor to the end of whatever has just been inserted (which is usually what you want). Having focus first seems to be recommended by the docs: [Create menus – Tiptap](https://tiptap.dev/guide/menus#keep-the-focus)

Using chain causes it all to be run in one transaction according to the docs, perhaps that’s important for consistent behaviour.

Here’s how the insertContentAt command figures out the position: [https://github.com/ueberdosis/tiptap/blob/42039c05f0894a2730a7b8f1b943ddb22d52a824/packages/core/src/commands/insertContentAt.ts#L29](https://github.com/ueberdosis/tiptap/blob/42039c05f0894a2730a7b8f1b943ddb22d52a824/packages/core/src/commands/insertContentAt.ts#L29)

You should be able to use insertContent in place of insertContentAt because it uses insertContentAt internally. I’ve not confirmed this though.

The cursor seems to be at the end, inside what’s just been inserted, so if you wanted it to be outside, you may need to move it afterwards.

---

<div class="post-metadata">

### Author: ![BartSps](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/bartsps/32/3771_2.png) [@BartSps](https://discuss.prosemirror.net/u/BartSps)
#### Post date: [November 10, 2023, 7:25am UTC](https://discuss.prosemirror.net/t/how-to-focus-cursor-after-adding-node/4482/5 "2023-11-10T07:25:05Z")

</div>

It’s don’t work
