When adding links with the Quill editor I must include the protocol or the link is treated as a relative link.

When someone clicks to add a link I would like to have the field prepopulate with http:// so when a user types google it will create a link to instead of .

Stack overflow does this...

When adding links with the Quill editor I must include the protocol or the link is treated as a relative link.

When someone clicks to add a link I would like to have the field prepopulate with http:// so when a user types google.com it will create a link to http://google.com instead of http://myapp.net/something/google.com.

Stack overflow does this...

• javascript
• wysiwyg
• quill

3 Answers 3

The above solution won't work when you try to save an existing link. Also, it ignores other protocols such as (mailto, tel, https)

Here is a better solution:

let Link = window.Quill.import('formats/link');

class CustomLink extends Link {
      
  static sanitize(url) {
    let value = super.sanitize(url);
    if (value) {
      for (let i = 0; i < this.PROTOCOL_WHITELIST.length; i++)
        if(value.startsWith(this.PROTOCOL_WHITELIST[i]))
          return value;

        return `http://${value}`
    }
    return value;
  }
}
Quill.register(CustomLink);

You can extend the link format with custom logic:

var Link = Quill.import('formats/link');

class MyLink extends Link {
  static create(value) {
    let node = super.create(value);
    value = this.sanitize(value);
    if(!value.startsWith("http")) {
      value = "http://" + value;
    }
    node.setAttribute('href', value);
    return node;
  }
}

Quill.register(MyLink);

You can prefill the tooltip by overriding the theme's default module handler for "link".

If you use the snow theme, all you need to do is retrieve the existing piece of code and adjust it as needed.

Here is an example:

const SnowTheme = Quill.import("themes/snow")
SnowTheme.DEFAULTS.modules.toolbar.handlers.link = function newLink(value: boolean) {
  // Copy-pasted and adjusted from:
  // https://github.com/quilljs/quill/blob/aad907d246c19083edcbf956e7376e2519fd1a73/themes/snow.ts#L110-L126
  if (value) {
    const range = this.quill.getSelection()
    if (range == null || range.length == 0) return
    let preview = this.quill.getText(range)
    if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf("mailto:") !== 0) {
      preview = "mailto:" + preview
    } else if (!/^(https?|tel):/.test(preview)) {
      // Change HERE: prefix with https if none of the expected schemes is present
      preview = "https://" + preview
    }
    const tooltip = this.quill.theme.tooltip
    tooltip.edit("link", preview)
  } else {
    this.quill.format("link", false)
  }
}

This is a little cumbersome, but I didn't find a better way.

With this, at least, the user immediately sees the prefix. I think this is a better user experience than having silent modifications.