Tiptap: Link: Support `inputRules`

[michalsnik]

Is your feature request related to a problem? Please describe.
Currently Link node only supports pasting, that is when I paste link in the editor I get a nicely formatted tag. It doesn't however work if I try to write the link myself, either directly or by using Markdown syntax.

Describe the solution you'd like
I would like to see two inputRules added in Link node:

• one that transforms typed URL automatically
• second that transforms markdown syntax to Link node ([Example link](http://google.com))

Additional context
I tried to implement it myself in the project I'm working on, however it's not entirely clear for me if it's doable without additional changes in the underlying logic. Hence I'm asking for your help.

The first inputRule that I considered is as follows:

const LINK_NODE_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-zA-Z]{2,}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/;

// ...

inputRules({ type }) {
    return [
      markInputRule(LINK_NODE_REGEX, type, match => {
          return { src: match[0] };
      }),
      // second rule
    ]
}

I used markInputRule in order to just add mark around the matched text. This partially works, however after typing URL that matches the REGEX, I can't type more text - it immediately transforms the text to link and prevents me from finishing typing the proper URL. Adding white space at the end of the regex results in similar behavior. Do I miss something here?

For the second inputRule, I would use nodeInputRule to transform [Text](http://google.com) into Link node, however I don't see how this method would set innerText on the Link node. Is there a more proper method for achieving desired effect?

I'm not expecting you implementing all of it, guidance would be more than enough. I'm happy to contribute and help making this project even better :)

[MrBuggy]

Hi @michalsnik
Can you show us the whole code (also commands, schema etc.) and if possible the markup.
Cheers.

[rdlh]

Hi @michalsnik,

Could you please try with this regex:

/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-zA-Z]{2,}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)(\s|\n)$/g

The ending $ is doing the trick in our own app code.

[dougalg]

For anyone else who comes here, I was able to get it to work with:

/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-zA-Z]{2,}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)[\s\n]$/g

It seems like the final matching group must be empty, otherwise it will use the length of that group as the length of text to mark.

[hanspagel]

Thanks for sharing @rdlh and @dougalg! I’m closing this here for now, but plan to add this as an example to the new documentation. 🙌

[dougalg]

Thanks, @hanspagel ! Really looking forward to TipTap 2!