Allow link editing in Bubble theme

[eamodio]

Currently you can't edit a link in the Bubble theme -- the tooltip appears clickable (shows pointer cursor -- not sure why exactly as I don't see in the the CSS). So currently with Bubble you can't edit a link at all -- since if you reselect the link text and click the link button it will just remove the link.

Steps for Reproduction

1. Using the Bubble theme, add text, select it, turn it into a link
2. Click on the newly linkified text

Expected behavior: Tooltip with link url shows, but is editable

Actual behavior: Tooltip with link url shows

Platforms: Chrome 57

Version: 1.2.2

[bribar]

@jhchen although the edit feature will be cool. Users would expect clicking the tooltip would open the link in a new window with the pointer displaying. Currently, it doesn't. Is this a bug or simply a display tooltip? I tried clicking all over the tooltip. Snow theme works as expected.

[jhchen]

This is simply a display tooltip at the moment.

[saralnigam]

@jhchen I would love to take this up, what should be the behavior of the tooltip should it be just clickable or should it have edit options as well? Any pointers from your end?

[jhchen]

Behavior-wise it should work like Medium's.

[mfjordvald]

Any update on this?

For behaviour I would expect clicking the actual link going to the link destination. The on-hover tooltip could have an edit link if needed, most important thing is that links actually work.

[annezhou920]

Reiterating @mfjordvald's sentiment, any updates on this feature?

[fxmontigny]

Yes, please !!! <3

[ghost]

@mfjordvald @eamodio @annezhou920 made it work with custom solution, no theme updates required, check the gif below. I can share my solution if anyone is interested

[dnp1204]

@DenisBun can you please share your solution? I am interested in. Thanks in advance

[ghost]

@dnp1204 it requires some event manipulations, u may check my repo https://github.com/DenisBun/react-text-editor (src/Editor.js)

[anumysore5]

@jhchen Is there any update on this feature? When can we expect this to be coming?

Anyone has any update on this feature?

[cmditch]

I ended up creating this link module extension to allow link editing.

Default Quill behavior: Clicking the link icon while linked text is selected will simply remove the link. New behavior: Clicking the link icon while linked text is selected will behave more like a link editor. To remove the link, just delete the url text and hit enter.

  const toolbar = quill.getModule('toolbar');
  toolbar.addHandler('link', formatTextToLink => {
    if (formatTextToLink) {
      quill.theme.tooltip.edit();
    } else {
      quill.theme.tooltip.edit('link', quill.getFormat().link);
    }
  });

[alexparker]

I actually just used the snow theme, and absolute positioned the toolbar, hid it, then positioned the toolbar and made it display when selection change. Pulled logic inspiration from the bubble source code.

This way i got the minimalism of the bubble theme, with the link friendliness of the snow theme. Yay.

So this is the snow theme with the customizations:

[imran-momin4041]

I actually just used the snow theme, and absolute positioned the toolbar, hid it, then positioned the toolbar and made it display when selection change. Pulled logic inspiration from the bubble source code.

This way i got the minimalism of the bubble theme, with the link friendliness of the snow theme. Yay.

So this is the snow theme with the customizations:

Hi Can you share your code ?

[sjoerdvanderhoorn]

Another method would be to add a simple onclick event to the main editor's container to intercept clicks on anchor elements:

onclick="if(event.target.tagName=='A'&&event.target.rel=='noopener noreferrer'){event.target.href=window.prompt('URL:', event.target.href)??event.target.href;}"

Example:

[mohanraj31521]

@dnp1204 it requires some event manipulations, u may check my repo https://github.com/DenisBun/react-text-editor (src/Editor.js)

could you pinpoint the exact line of code

[sergomen]

I was only able to hide the toolbar. globals.css: .ql-toolbar.ql-snow { position: absolute; display: none; }

But I could not write the appearance of the toolbar at the moment of selection. I think you need to understand this part of source code: https://github.com/quilljs/quill/blob/develop/packages/quill/src/themes/bubble.ts And it's still hard to me to understand it. I think I have to use snow theme. And, of course, I have to start learning TS.