quill: Link button broken

The link button on my toolbar is failing to link the selected text.

Steps for Reproduction

// Toolbar Options.
[
  [{ header: [false, 1, 2] }],
  ["bold", "italic", "underline"],
  ["blockquote"],
  ["link"]
]

Create new Quill editor with the above toolbar options.
Insert text and then select it.
Click the ‘link’ toolbar button.

Expected behavior: Highlighted text is converted into an anchor tag.

Actual behavior: Highlighted text is unaffected and the following error appears in the console

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null.

If you refer to the js/quill.js file in the 1.0.3 release tarball, the error is happening around line 9420 (which seems to originate here).

Platforms: Google Chrome 53.0.2785.101 (64-bit) running on OSX 10.11.6

Version: 1.0.3

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 17 (7 by maintainers)

Most upvoted comments

Ahh, that makes sense. Modified my toolbar options to the following and the link tooltip is now working as expected:

// Toolbar Options.
{
  modules: {
    toolbar: [
      [{ header: [false, 1, 2] }],
      ["bold", "italic", "underline"],
      ["blockquote"],
      ["link"]
    ]
  },
  bounds: document.body,
  theme: "snow"
}

Thanks for the insight!

mpriscella on Sep 9, 2016

I’m not seeing any errors on Mac + Chrome (same version is reported). Codepen displays errors to the console. You can just create an error to confirm.

There is a bounds property to tell Quill where it can show up horizontally. By default it is the whole page and from the screenshot it looks like you have something with a higher z-index covering it. If there’s not space to show the tooltip vertically, it is by default hidden. You can overwrite the CSS rule if you plan to have the editing container autogrow, but will cause problems when you scroll:

.ql-snow .ql-out-bottom {
  visibility: visible;
}

jhchen on Sep 8, 2016