question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Link: Support `inputRules`

See original GitHub issue

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 😃

github_iconTop GitHub Comments

hanspagelcommented, Jan 7, 2021

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. 🙌

1reaction
philippkuehncommented, Nov 8, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

Link: Support `inputRules` · Issue #337 · ueberdosis/tiptap
Currently Link node only supports pasting, that is when I paste link in the editor I get a nicely formatted tag. It doesn't...
Read more >
Autolinker - Discuss - ProseMirror
I am trying to implement an input rule that automatically replaces typed links with anchor tags. However, my function cuts off the last ......
Read more >
Custom extensions – Tiptap Editor
Commands; Keyboard shortcuts; Input rules; Paste rules; Events; What's available in this? ... import Link from '@tiptap/extension-link' const CustomLink ...
Read more >
<input type="url"> - HTML: HyperText Markup Language | MDN
On browsers that don't support inputs of type url , a url input falls back to being a standard text input. Value. The...
Read more >
Validating parameters (“input rules”)
Host: in the HTTP header; URL. as defined in the input rule. Inputs are typically the < input> tags in an HTML form....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found