Links in bubble mode are not opened on click and their tooltip is hidden behind other elements.

[devozerov]

Looks like "link" feature is unusable at the moment due to several critical usability issues - click on a link does nothing and tooltip with href field is hidden behind other elements and does not respect "bounds" property. To the contrast, tooltip during creation works fine because at first basic tooltip is opened (correct stacking context and correct behavior of "border") and when link button is clicked basic tooltip is replaced with link tooltip.

Both issues should be very easy to fix. I am not JS professional, but I am likely to be able to fix it. Would appreciate if you point me on relevant code pieces where I could start. Having this issue at the heart of

Steps for Reproduction

1. Open https://quilljs.com/standalone/bubble/
2. Type a word
3. Select that word, then click on a link button and add some hyperlynk
4. Hover a mouse pointer on the link and try clicking it

Expected behavior:

1. When link is clicked page is opened in a new window
2. Tooltip is visible

Actual behavior:

1. Chrome - pointer appears, but click on a link does nothing, other browser - no pointer, click does nothing
2. Tooltip is not visible

Platforms: Windows 10, Chrome/Mozilla/IE (all latest)

Version: 1.3.5

[devozerov]

Another problem mentioned in another PRs - when pointer is clicked somewhere else, link is not saved. Proposed fix:

1. Remove current link tooltip
2. Hovering a link should convert cursor to pointer
3. Click on a link does nothing because user typically doesn't want to navigate to the link in edit mode
4. Double click should make "ql-tooltip" visible and switch it to "ql-editing" mode right away showing current href
5. Ctrl+click on the link should navigate user to the link in a new window (Word-like behavior).

Thoughts?

[timothyallan]

The initial tooltip on the first line is cut off because of the overflow settings on .ql-editor. If you go down a line (or turn off the overflow-y) and repeat the same steps, you can see the tooltip.

[shyamal890]

+1

[lucsky]

@devozerov Here's a temporary hack that I am using to make links clickable, it's a short module which injects an event listener on the Quill container which disables the contenteditable property of <a> tags on mouseover (and re-enables it whenever another element is mouseover-ed).

Quill.register('modules/clink', (quill) => {
    let currentLink = null;
    quill.container.addEventListener('mouseover', (evt) => {
        if (evt.target.tagName === 'A') {
            currentLink = evt.target;
            currentLink.setAttribute('contenteditable', false);
        } else if (currentLink) {
            currentLink.removeAttribute('contenteditable');
            currentLink = null;
        }
    });
});

const quill = new Quill('#container', {
    modules: {
        clink: true
    }
});

There are a couple edge cases which should be handled to make it more robust but it works pretty nicely for me.

Also, it does make it a bit harder to remove links since simply clicking on them triggers the href, but it is still possible by selecting from the left or right boundary.

[AlesJiranek]

another possible approach is to override default link and add content editable attribute from beginning, not only on mouseover, because that will not work for touch devices

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

class ClickableLink extends Link {
  public static create(value: string): ClickableLink {
    const node = super.create(value);
    node.setAttribute('href', Link.sanitize(value));
    node.setAttribute('target', '_blank');
    node.setAttribute('contenteditable', 'false');

    return node;
  }
}

Quill.register('formats/link', ClickableLink, true);

[cliftonlabrum]

Shouldn't the link tooltip (popup) just be clickable somehow instead of the link itself? It looks like the popup is generated purely in CSS which is likely the problem.

The Snow link functionality seems like it should also be used with Bubble since it provides link editing options and a separate Visit URL: link.

[wooolfgang]

Shouldn't the link tooltip (popup) just be clickable somehow instead of the link itself? It looks like the popup is generated purely in CSS which is likely the problem.

The Snow link functionality seems like it should also be used with Bubble since it provides link editing options and a separate Visit URL: link.

Agree, in terms of functionality the current link tooltip (for bubble) is pretty much useless. I'd argue that most people would rather have the snow link functionality as default for both snow and bubble themes.

[introvert]

Are there any news in regards to fixing this issue? @wooolfgang has a good point.

[VictorLeach96]

My solution to a clickable tooltip above the link.

Quill.register('modules/linkTooltip', (quill: any) => {
  quill.container.addEventListener('click', (evt: any) => {
    if (evt.target.tagName === 'A' && (quill.options.readOnly || evt.offsetY < -5)) {
      window.open(evt.target.href)?.focus()
    }
  })
})

[TivoSoho]

This is still very much an issue and none of the solutions above work anymore

[aimerie]

I couldn't agree with @TivoSoho more. What's the status on this??

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide :pray: