Make link placeholder change possible

[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';

[diiq]

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.

[alexkrolick]

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.

[jhchen]

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.

[bobbyflowstate]

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

[andys8]

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

[Webbrother]

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);

[newdisease]

I updated the placeholders in react-quill using ref. It's not an ideal solution, but it works for me. It also has a benefit as it isn't globally overridden as in the example above.

Something like this:

  ...
  const quillRef = useRef<ReactQuill>(null);
  const quillInstance = quillRef.current?.getEditor();
  const tooltip = quillInstance.theme?.tooltip;
  tooltip.textbox.setAttribute("data-link", "https://...");
  ...