Checks for URLs and mail addresses during typing and pasting and automatically converts them to links and normalizes the links URL.

Thanks to @LFDM for the groundwork with quill-auto-links.

You can find a demo page here.

<!-- After quill script includes -->
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>

npm install quill-magic-url --save

import Quill from 'quill'
import MagicUrl from 'quill-magic-url'

Quill.register('modules/magicUrl', MagicUrl)

Basic usage with default options:

const quill = new Quill(editor, {
  modules: {
    magicUrl: true,
  },
})

Usage with custom options:

const quill = new Quill(editor, {
  modules: {
    magicUrl: {
      // Regex used to check URLs during typing
      urlRegularExpression: /(https?:\/\/[\S]+)|(www.[\S]+)|(tel:[\S]+)/,
      // Regex used to check URLs on paste
      globalRegularExpression: /(https?:\/\/|www\.|tel:)[\S]+/g,
    },
  },
})

Regex used to check for URLs during typing.

Default: /(https?:\/\/|www\.)[\w-\.]+\.[\w-\.]+(\/([\S]+)?)?/i

Example with custom Regex

magicUrl: {
  urlRegularExpression: /(https?:\/\/[\S]+)|(www.[\S]+)|(tel:[\S]+)/
}

Regex used to check for URLs on paste.

Default: /(https?:\/\/|www\.)[\w-\.]+\.[\w-\.]+(\/([\S]+)?)?/gi

Example with custom Regex

magicUrl: {
  globalRegularExpression: /(https?:\/\/|www\.|tel:)[\S]+/g
}

Regex used to check for mail addresses during typing. Set to null to disable conversion of mail addresses.

Default: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/i

Example with custom Regex

magicUrl: {
  mailRegularExpression: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/i
}

Regex used to check for mail addresses on paste. Set to null to disable conversion of mail addresses.

Default: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi

Example with custom Regex

magicUrl: {
  globalMailRegularExpression: /([\w-\.]+@[\w-\.]+\.[\w-\.]+)/gi
}

Regex used to check for URLs to be normalized.

Default: /(https?:\/\/|www\.)[\S]+/i

You will most likely want to keep this options default value.

Options for normalizing the URL

Default:

{
  stripWWW: false
}

Example with custom options

magicUrl: {
  normalizeUrlOptions: {
    stripHash: true,
    stripWWW: false,
    normalizeProtocol: false
  }
}

Available options

We use normalize-url for normalizing URLs. You can find a detailed description of the possible options here.

For some advanced URL Regex check this out.