Quill: Inserting new URL shows "about:blank"

Created on 16 Jan 2017 · 7Comments · Source: quilljs/quill

This is the smallest code you need to replicate this issue:

<html>
<head>
    <link rel="stylesheet" href="http://cdn.quilljs.com/1.1.10/quill.snow.css">
    <script src="http://cdn.quilljs.com/1.1.10/quill.js"></script>
    <script>
    window.onload = function() {
        var qui = new Quill("#editor", {
            modules: { toolbar: [ ['link'] ] },
            placeholder: "Expansion text goes here...",
            theme: 'snow'
        });
    };
    </script>
</head>
<body>
    <div id="editor"></div>
</body>
</html>

Surprisingly, the issue only occurs when you save this file as .html on your PC and then run it on your browser. This issue doesn't occur on Codepen or JSFiddle. Maybe that's because they run it in an iframe but I'm not sure.

Steps for Reproduction

Write some text into the editor.
Select some text and press link button.
Type any random link value and hit enter.
Then click the hyperlink.

Expected behavior:
The link value is shown.

Actual behavior:
"about:blank" is shown.

Platforms:
Latest Win10 and Chrome and Firefox and MS Edge.

Version: Quill 1.1.10

Any idea why this is happening?

Source

GaurangTandon

Most helpful comment

@jhchen Thanks. I somehow didn't realize thats what I could do. I already modified Block.tagName to use div instead of p. My brain just didn't go down the road to do same thing for Link.sanitize.

As a reference for others, this is what I end up doing.

var Link = Quill.import('formats/link');
Link.sanitize = function(url) {
  // prefix default protocol.
  let protocol = url.slice(0, url.indexOf(':'));
  if (this.PROTOCOL_WHITELIST.indexOf(protocol) === -1) {
    url = 'http://' + url;
  }
  // Link._sanitize function
  let anchor = document.createElement('a');
  anchor.href = url;
  protocol = anchor.href.slice(0, anchor.href.indexOf(':'));
  return (this.PROTOCOL_WHITELIST.indexOf(protocol) > -1) ? url : this.SANITIZED_URL;
}
Quill.register(Link, true);

jozefvaclavik on 20 May 2018

👍4

All 7 comments

This happens when an inputted link fails sanitization, which means its protocol was not http/https/mailto. If you just typed something random (not a full url), it will be a relative link and if you are running it from an .html file, the url protocol will be file:. In a web environment you do not need to worry about this.

jhchen on 16 Jan 2017

Hi @jhchen , thanks for the comprehensive reply! Could you add it to the official docs? I mean, if this thing that you've just told me had been there in the official docs, it would've saved me an hour of debugging.

GaurangTandon on 17 Jan 2017

👍1

@jhchen Is there a way to automatically prefix http:// if it's missing? I know I can use custom handler, but I cannot customize snow handler, which leaves me with half baked fix.

If I enter apple.com the anchor.href returns http://localhost:4000/apple.com in sanitize function

function _sanitize(url, protocols) {
  var anchor = document.createElement('a');
  anchor.href = url;
  var protocol = anchor.href.slice(0, anchor.href.indexOf(':'));
  return protocols.indexOf(protocol) > -1;
}

jozefvaclavik on 9 May 2018

👍1

You can modify Link.sanitize with a custom function. You can get Link from Quill.import('formats/link'). This is not officially documented as the API may change.

jhchen on 14 May 2018

🎉2

As a reference for others, this is what I end up doing.

var Link = Quill.import('formats/link');
Link.sanitize = function(url) {
  // prefix default protocol.
  let protocol = url.slice(0, url.indexOf(':'));
  if (this.PROTOCOL_WHITELIST.indexOf(protocol) === -1) {
    url = 'http://' + url;
  }
  // Link._sanitize function
  let anchor = document.createElement('a');
  anchor.href = url;
  protocol = anchor.href.slice(0, anchor.href.indexOf(':'));
  return (this.PROTOCOL_WHITELIST.indexOf(protocol) > -1) ? url : this.SANITIZED_URL;
}
Quill.register(Link, true);

jozefvaclavik on 20 May 2018

👍4

@jozefvaclavik Thank you for that!