Auto link feature

[clemishow]

I cannot reproduce this behaviour with my code. It always create a new block.
Can someone help me ?

import { Node } from 'tiptap';
import { textblockTypeInputRule } from 'tiptap-commands';

export default class Bookmark extends Node {
  get name() {
    return 'bookmark';
  }

  get schema() {
    return {
      attrs: {
        href: {
          default: null,
        },
      },
      content: 'inline*',
      group: 'block',
      marks: '',
      defining: true,
      inclusive: false,
      atom: true,
      parseDOM: [
        { 
          tag: 'a[href]',
          getAttrs: dom => ({
            href: dom.href,
          }),
        },
      ],
      toDOM: node => ['a',
          {
            href: node.attrs.href.input,
          },
          node.attrs.href.input,
        ],
    };
  }

  inputRules({ type }) {
    return [
      textblockTypeInputRule(
        /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/g, 
        type,
        url => ({ href: url })
      ),
    ];
  }
}

[lvmorgaut2]

Interested !

[dominik-bln]

I think this might be what you need (or at least close):

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

[clemishow]

I got this error

mark.isInSet is not a function

[dominik-bln]

Here is the full code of our plugin:

import { markInputRule } from 'tiptap-commands'
import { Link } from 'tiptap-extensions'

/**
 * Plugin for the tiptap editor that sets link targets as blank and allows
 * to manually enter URLs as text.
 *
 * @see https://github.com/heyscrumpy/tiptap/blob/master/packages/tiptap-extensions/src/marks/Link.js
 */
export default class BlankAutoLink extends Link {
  get schema () {
    return {
      ...super.schema,
      toDOM: node => ['a', {
        ...node.attrs,
        rel: 'noopener noreferrer nofollow',
        target: '_blank',
      }, 0],
    }
  }

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

[clemishow]

Okay great, it almost works!
When I write and the link is recognized, I make a space and it is deleted (as in the video).
Do you have any ideas?

[rdlh]

Hi @clemishow

Got same issue here.
Looks like it's coming from this line: https://github.com/ProseMirror/prosemirror-inputrules/blob/master/src/inputrules.js#L91
Inputed text is removed when a transaction is created in a Rule ..

[hanspagel]

A solution seems to be here: #337 (comment) ✌️