How can I prefill links with http in a Quill editor?

Question

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...

Answer 1

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);

Answer 2

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);