Make link placeholder change possible

[Salvador Subarroca]

Make link placeholder change possible

Expected behavior:
Being able to set a different placeholder for links

Actual behavior:
quilljs.com is shown

Version:
1.1.3

[benbro]

The link placeholder is hard coded here.

Temp workaround:

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block', 'link']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});
// change the link placeholder to www.github.com
var tooltip = quill.theme.tooltip;
var input = tooltip.root.querySelector("input[data-link]");
input.dataset.link = 'www.github.com';

[Sam Bleckley]

The ability to change it would be amazing -- and even then, the default should have a 'http://' in front, please! Right now it is a incorrect example, and users that follow it will make broken links.

[Alex Krolick]

Is defaulting to relative links considered a feature or a bug here? I have a lot of people complaining about this in our app and I'm wondering if we should patch locally or upstream.

[Jason Chen]

This particular issue is about the default placeholder text, which the ability to customize is more a feature than a bug. I did just make a change to add https:// in front of the placeholder text as well.

Interpreting what the user enters as a link or not, relative or absolute is already customizable: #550.

[Ashok]

Has this been added? I can't seem to find a way to customize the link placeholder..

[Andy]

Would it be an option to make the default value an empty text or https://example.com (a domain created for this purpose)?

[Vitaliy Komarov]

This is absolutely weird and ridiculous to add https://quilljs.com as a placeholder for users who are not developers and never knew about it.

[alex-sourceandsummit]

@benbro's workaround didn't quite work for me (using react-quill), so here is an alternative workaround using Quill's extension API, for anyone still looking:

const SnowTheme = Quill.import('themes/snow');

class SnowThemeFix extends SnowTheme {
  extendToolbar(toolbar) {
    super.extendToolbar(toolbar);
    this.tooltip.textbox.dataset.link = ""; // you can set the placeholder to whatever you want here
  }
}

Quill.register('themes/snow', SnowThemeFix, true);