caret jumping to the beginning after Node Transforms to add emoji

[tilxyz]

I'm trying to support emoji in my lexical editor. Followed some example in the playground repo, got it working, but ran into an issue that: after the new emoji node replaces the text, the caret jumps back to the beginning, see the screen recording. Any idea how do I correctly move the caret to the end of the newly added emoji? Thanks in advance!

jumpping.caret.mov

Here's the relevant emoji plugin code:

function textNodeTransform(node: TextNode): void {
    if (!node.isSimpleText() || node.hasFormat('code')) {
        return;
    }

    const text = node.getTextContent();
    // Find only 1st occurrence as transform will be re-run anyway for the rest
    // because newly inserted nodes are considered to be dirty
    const emojiMatch = findEmoji(text);
    if (emojiMatch === null) {
        return;
    }

    let targetNode;
    if (emojiMatch.position === 0) {
        // First text chunk within string, splitting into 2 parts
        [targetNode] = node.splitText(
            emojiMatch.position + emojiMatch.shortcode.length,
        );
    } else {
        // In the middle of a string
        [targetNode] = node.splitText(
            emojiMatch.position,
            emojiMatch.position + emojiMatch.shortcode.length,
        );
    }
    if (targetNode) {
        const emojiNode = $createEmojiNode(emojiMatch.unifiedID);
        targetNode.replace(emojiNode);
    }
}

function useEmojis(editor: LexicalEditor): void {
    useEffect(() => {
        if (!editor.hasNodes([EmojiNode])) {
            throw new Error('EmojisPlugin: EmojiNode not registered on editor');
        }

        return editor.registerNodeTransform(TextNode, textNodeTransform);
    }, [editor]);
}

export default function EmojiPlugin(): JSX.Element | null {
    const [editor] = useLexicalComposerContext();
    useEmojis(editor);
    return null;
}

[ivailop7]

Already discussed in #5757