Tiptap: Auto link feature implementation

[zmts]

Hi here!

I have very common case.
1) user pasted link _or type_ as text
2) user press space or enter button
3) pasted url should transform into <a href="pasted_link">pasted_link</a>

There is code...

import { Mark } from 'tiptap'
import { markInputRule } from 'tiptap-commands'

export default class AutoLinkMark extends Mark {
  get name () {
    return 'auto-link'
  }

  get schema () {
    return {
      attrs: {
        href: {
          default: null
        }
      },
      parseDOM: [
        {
          tag: 'a[href]',
          getAttrs: dom => ({
            href: dom.getAttribute('href')
          })
        }
      ],
      toDOM: node => [
        'a',
        { href: 'pasted_url' }, // how make it ?
        0
      ]
    }
  }

  inputRules ({ type }) {
    return [
      markInputRule(/((((http|https):\/\/)|(www\.))[^\s]+)\s$/g, type)
    ]
  }
}

As result this code wrap pasted code as <a>pasted_link</a>
But I don't imagine how to insert pasted url into href prop.

Hope somebody have some thoughts about it.

[philippkuehn]

Hey, I would also like to see this! Unfortunately input rules are only for typed text. Pasted text isn't working here 😕

[zmts]

Yes, as pasted text nothing isn't fires. All fine work after user paste some link and then press space key, then pasted text successfully trigger inputRules. But anyway I can't handle fired content.

@philippkuehn or maybe you have some alternative approach to implement auto link feature ?

[philippkuehn]

You could try to add a plugin for this. There is a transformPasted event, where you have access to pasted text.

[zmts]

I hear about it but how use it with tiptap ?

[philippkuehn]

You can create a custom extension with a prosemirror plugin like this:

import { Extension, Plugin } from 'tiptap'

export default class CustomExtension extends Extension {

  get name() {
    return 'custom_extension'
  }

  get plugins() {
    return [
      new Plugin({
        props: {
          transformPasted() => {
            // handle pasted links
          },
        },
      }),
    ]
  }

}

[zmts]

tnx!

[christophermiles]

Hi @zmts, are you able to share any progress with this? Looking to implement this functionality and would be interested to see how you've gone with it. I'm just getting my head around tiptap (the Suggestions plugin is great).

[zmts]

@christophermiles currently I paused this feature and use native link node. Anyway when I found good solution I will commit to this thread.

[philippkuehn]

I found a way to get this working. Coming in the next release. 👍

[philippkuehn]

You can use pasteRules in tiptap v1.3.0. 🎉

This paste rule is defined for links now:

import { Mark } from 'tiptap'
import { pasteRule } from 'tiptap-commands'

export default class Link extends Mark {

  pasteRules({ type }) {
    return [
      pasteRule(
        /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g,
        type,
        url => ({ href: url }),
      ),
    ]
  }

}

[roybekhuis]

@philippkuehn, thank you for implementing this. I don't quite understand how to use the pasteRules though, could you provide an example?

[zmts]

@roybekhuis check https://github.com/heyscrumpy/tiptap/blob/master/packages/tiptap-extensions/src/marks/Link.js

[roybekhuis]

@zmts thanks, somehow I missed that...

[MrBuggy]

Hi,
I managed to implement the pasteRules and it works. Now I'm struggling with implementing the inputRules. So I would like to define a regex and force an auto-link, when during typing the typed string is matching the regex.

This is what I tried so far:

  // eslint-disable-next-line
  inputRules({ type }) {
    return [
      markInputRule(
        /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-zA-Z]{2,}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)(\s|\n)/g,
        type,
        (url) => ({ href: url }),
      ),
    ];
  }

At the moment, when I type in https://www.google it forces an auto-link. But when I add .com at the end, it changes the link text to www instead of https://www.google.com. When inspecting the rendered element in the dev tools, the href has this value https://www.google.com.www. I don't know how to fix this. Any ideas?

I took the schema etc. from here: https://github.com/heyscrumpy/tiptap/blob/master/packages/tiptap-extensions/src/marks/Link.js

[rdlh]

Hi @MrBuggy

I've found a way to enable auto-linking with this code:

link.js

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

Known issue:

You've got to double-press the key, first press will trigger Mark creation, second one will add a "real" space.
I'm currently trying to find a way to prevent inputRules.handleTextInput to cancel the input or to dispatch the Transaction inlinkInputRule.InputRule
Some info here and here

[Amfishers]

Hi @rdlh
are you able to share any progress with this?

You've got to double-press the key, first press will trigger Mark creation, second one will add a "real" space.
I'm currently trying to find a way to prevent inputRules.handleTextInput to cancel the input or to dispatch the Transaction inlinkInputRule.InputRule
Some info here and here

[rdlh]

Hi @Amfishers, we haven't found any "good" way to prevent this.
Looks like our users are used to double tap space bar now haha.

[DebaPrasad14]

Hi @rdlh @philippkuehn, I am trying to implement CustomLink extension without changing your code where I am adding a feature taget="_blank" as well as auto-linking. but I m getting error while adding inputRules for auto linking as above mentioned by @rdlh.