How to focus cursor after adding node?

1

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

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.

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

image
image917Ă—64 962 Bytes
image
image950Ă—51 691 Bytes
image
image836Ă—55 995 Bytes
image
image900Ă—57 1.07 KB
image

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

image
image898Ă—60 1.79 KB
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:

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

Expected: image image image

How can we reach our expected solution?

2

Try chaining commands? Commands – Tiptap Editor

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

1 Like
3

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

4

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

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

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.

1 Like
5

It’s don’t work