How to focus cursor after adding node?

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

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

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?

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

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