Fix: nodeInputRule() support for group match

[nokola]

Fixes in nodeInputRule()

• add support for "first group match, if any" similar to https://prosemirror.net/docs/ref/#inputrules
• fix issue where rewriting includes extra unnecessary character from the match

[philippkuehn]

Hey, sorry for that delay. Can you please show me a code example of what your PR is trying to fix? Thanks!

[nokola]

No problem!
Here's a description of what I was trying to do and the part that didn't work before and works now:
I was trying to add a custom task input rule where when I type "--" and press space, a new "task" node is created.
Steps to reproduce:

1. Type "--". Press space.

Expected:
A task is created and space persists as well. Click on the images - they are animated gifs, to see the video:

Actual:
task is created, but the space between it and the task text is "eaten" by nodeInputRule:

Fixed by the change in this PR: If nodeInputRule detects a group, it will create the node in-place of the group and leave the other text (in this case the "space") unchanged.

Here's my code, removed some of it for brevity:

declare module '@tiptap/core' {
    interface Commands<ReturnType> {
        scribeTask: {
            /** 
             * Add a scribe task
             */
            setScribeTask: () => ReturnType,
        }
    }
}

export interface ScribeTaskOptions {
    HTMLAttributes: Record<string, any>,
}

export const ScribeTask = Node.create<ScribeTaskOptions>({
    name: 'scribeTask',
    group: 'inline',
    inline: true,

    defaultOptions: {
        HTMLAttributes: {},
    },

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

    renderHTML({ HTMLAttributes }) {
        return ['task', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
    },

    addNodeView() {
        return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => {
            const dom = document.createElement('span');

            const toc = new ScribeTaskUI({
                target: dom,
                props: {
                    state: node.attrs.state,
                    // attrs: HTMLAttributes,
                }
            });

            return { dom };
        }
    },

    addCommands() {
// ... removed ...
        };
    },

    addAttributes() {
        return {
            state: {
                default: TaskState.TODO,
                parseHTML: element => (element.getAttribute('data-state') ?? TaskState.TODO),
                renderHTML: attributes => ({
                    'data-state': attributes.state,
                }),
                keepOnSplit: false,
            },
        }
    },

    addInputRules() {
        return [
            nodeInputRule(/^\s*((?:DONE|CUT)?\s*(?:--))\s+$/, this.type as any, parseState),
        ];
    },

    addPasteRules() {
        return [
            nodePasteRule(/^\s*((?:DONE|CUT)?\s*(?:--))\s+.*$/gm, this.type as any, parseState),
        ];
    },
});

enum TaskState {
    TODO = "TODO",
    DONE = "DONE",
    CUT = "CUT"
}

function parseState(match: string[]): { state: string } {
    if (match[1].indexOf(TaskState.DONE) >= 0) {
        return { state: TaskState.DONE };
    }
    if (match[1].indexOf(TaskState.CUT) >= 0) {
        return { state: TaskState.CUT };
    }
    return { state: TaskState.TODO };
}

[sald19]

Hi there 👋🏽, I made a hashtag extension using Node.create() and I am having the same problem, which removes a space before the text that is wrapped in the extension <span>

I also have problems adding extra space after the span that creates the extension

[philippkuehn]

@nokola This explains why you replaced start - 1 with start, great.

I’m currently on a rewrite of inputrules and pasterules so things may change anytime soon.

[nokola]

I ended up extending nodeInputRule() even further to support any text passed by user to replace in replaceText. This makes the rule more stable and easy to understand by callers. Feel free to use this code if it's useful in your updates:

import type { NodeType } from 'prosemirror-model'
import { InputRule } from 'prosemirror-inputrules'

export type NodeMatchInfo = {
    replaceText?: string,
    attrs: Record<string, any>,
};

export default function (regexp: RegExp, type: NodeType, getMatchInfo?: ((match: RegExpExecArray) => NodeMatchInfo)): InputRule {
    return new InputRule(regexp, (state, match, start, end) => {
        const info: NodeMatchInfo | null = getMatchInfo == null ? null : getMatchInfo(match as RegExpExecArray);
        const { tr } = state;

        if (info?.replaceText) {
            const offset = match[0].lastIndexOf(info.replaceText);
            let matchStart = start + offset;
            if (matchStart > end) {
                matchStart = end;
            }
            else {
                end = matchStart + info.replaceText.length;
            }

            // insert last typed character
            const lastChar = match[0][match[0].length - 1];
            tr.insertText(lastChar, start + match[0].length - 1);

            // insert node from input rule
            tr.replaceWith(matchStart, end, type.create(info?.attrs));
        } else if (match[0]) {
            tr.replaceWith(start, end, type.create(info?.attrs));
        }

        return tr;
    })
}

sample use:

    addInputRules() {
        return [
            nodeInputRule(/^\s*((?:DONE|CUT)?\s*(?:--))\s+$/, this.type as any, parseState),
        ];
    },

enum TaskState {
    TODO = "TODO",
    DONE = "DONE",
    CUT = "CUT"
}

function parseState(match: RegExpExecArray): NodeMatchInfo {
    if (match[1].indexOf(TaskState.DONE) >= 0) {
        return {
            replaceText: match[1],
            attrs: { state: TaskState.DONE },
        };
    }
    if (match[1].indexOf(TaskState.CUT) >= 0) {
        return {
            replaceText: match[1],
            attrs: { state: TaskState.CUT },
        };
    }
    return {
        replaceText: match[1],
        attrs: { state: TaskState.TODO },
    };

}

Tasks look like:

-- task 1
DONE-- task 2
CUT-- task 3