Link: Support `inputRules`
See original GitHub issueIs 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 😃
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:7 (2 by maintainers)
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. 🙌
@07akioni no, but you can follow up here https://github.com/ueberdosis/tiptap/issues/1209