added Span node, but need to move cursor? inside the new Span node

[devjk1]

How my implementation currently works.
User types "sentence 1" => <p><span>"sentence 1"</span></p>
On hotkey "." a new span node is created at end => <p><span>"sentence 1"</span><span></span></p> works fine.
After new span is created, "sentence 2" should be in the new span, but it remains in the original span. Maybe cursor hasn't moved.
<p><span>"sentence 1""sentence 2"</span><span>..should be here..</span></p>

I tried chaining setTextSelection(this.editor.state.selection.anchor + 1) and focus(this.editor.state.selection.anchor + 1) but first way is just appending to sentence 1 and focus() is throwing Selection passed to setSelection must point at the current document
Chaining in my custom command works without the addition of setTextSelection() or focus()
Thank you for any help or pointers you can offer. I appreciate it very much!

export const CustomSpan = Node.create({
    name: "span",
    group: "inline",
    content: "inline*",
    inline: true,
    parseHTML() {
        return [
            { tag: "span" }
        ];
    },
    renderHTML({ HTMLAttributes }) {
        return ["span", HTMLAttributes, 0];
    },
    addCommands() {
        return {
            setSpan: () => ({ chain }) => {
                return chain().insertContentAt(this.editor.state.selection.anchor + 1, [
                    {
                        type: "span",
                    },
                ])
                    // .setTextSelection(this.editor.state.selection.anchor + 1)
                    .run();
            }
        };
    },
    addKeyboardShortcuts() {
        return {
            ".": () => this.editor.commands.setSpan(),
        };
    }
});

export const CustomParagraph = Paragraph.extend({
    content: "span*",

[philippkuehn]

Don’t use this.editor.state within commands as described here.

Instead of this:

setSpan: () => ({ chain }) => {
                return chain().insertContentAt(this.editor.state.selection.anchor + 1, [
                    {
                        type: "span",
                    },
                ])
                    // .setTextSelection(this.editor.state.selection.anchor + 1)
                    .run();
            }

do this:

setSpan: () => ({ chain, state }) => {
                return chain().insertContentAt(state.selection.anchor + 1, [
                    {
                        type: "span",
                    },
                ])
                    // .setTextSelection(state.selection.anchor + 1)
                    .run();
            }

[devjk1]

Hey Philipp, I tried it out and it seems as if the cursor is resetting after setTextSelection is called.

setSpan: () => ({ chain, state }) => {
    console.log("setSpan called")
    return chain()
        .insertContentAt(state.selection.anchor + 1, [
            {
                type: "span",
            },
        ])
        .setTextSelection(state.selection.anchor + 2)
        .run();
}

I type AB, call setSpan, cursor resets when I type C

onUpdate: () => {
    console.log(this.editor.getHTML())
    console.log("cursor=" + this.editor.state.selection.anchor)
}

<p><span>A</span></p>
cursor=3

<p><span>AB</span></p>
cursor=4

setSpan called
<p><span>AB</span><span></span></p>
cursor=6

// cursor resets and appends "C" to "AB"
<p><span>ABC</span><span></span></p>
cursor=5

https://stackoverflow.com/questions/63082976/prosemirror-set-caret-position-to-end-of-selected-node
https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/commands/setTextSelection.ts

[jelling]

Here's what worked for me, building on @philippkuehn's answer:

  addCommands() {
    return {
      splitSentence:
        () =>
        ({ chain }: any) => {
          return chain()
            .insertContent(".")
            .insertContent({
              type: "actionSentence",
              // must put empty text node for content
              // otherwise text appears on-screen
              // but editor state is not updated
              content: [{ content: "text", text: "" }],
            })
            .setTextSelection(this.editor.state.selection.anchor + 2)
            .run();
        },
    };
  },
  addKeyboardShortcuts() {
    return {
      ".": () => this.editor.commands.splitSentence(),
    };
  },

[rastapopougros]

Hello,
I have the same kind of prob but after an input rule, that I added with the helper "nodeInputRule" : when I type the find pattern, it perfectly creates the right (inline) node at the right place BUT… with the cursor AFTER the node (after the <span data-xxx></span>).

Impossible to have the cursor directly inside after the creation. And also impossible to move the cursor inside it, nor with mouse click, nor with arrow keys. When there is already a content inside, not with input rule but after first importation with content for ex, I can perfectly enter inside with mouse and keys.
(and yes my node got content: "inline*", and atomic false…)

So how to have the cursor inside the node (= inside the span) just after creation by input rule ?
And how to be able to move inside even if empty ?