Question: support for Quill 2.x

[stephanstapel]

Hi @visualjerk,
sorry to ask a question as an issue, hope this is ok for you.
Actually I just wanted to ask if you tested your magic URL module with Quill 2.0. I can't get it working and wanted to know if it's just me or if this 'is as it is'.

Cheers,
Stephan

[visualjerk]

Hi! Currently I do not have any capacity to do work on this plugin, so the answer is "is as it is" unfortunately. I would be grateful, if anyone forks it and creates a version von Quill 2.0.

[bzk1994]

Hi! @stephanstapel @visualjerk ,I've integrated this module into my project that is using Quill 2.x for testing. Currently, I've noticed that pasting doesn't work. Have you encountered any other issues?

[stephanstapel]

I just needed pasting and also found out that it didn't work with :(

[omgoshjosh]

EDIT: this seems to be the exact same issue -> slab/quill#2706

i've done some debugging, in a nutshell quill no longer sends a url like https://google.com/ through the matchers because it's not detected as text/html, it's detected as text/plain. sorry for wall of text, i just need to vent lol

in the following snippet (from quill v1.3.7), you can see the only way to return early from the convert function is if there is html or there's a code block format. in other words, we're gonna hit the matcher, even if there's no html detected from the browser paste event.

    if (typeof html === 'string') {
      this.container.innerHTML = html.replace(/\>\r?\n +\</g, '><'); // Remove spaces between tags
      return this.convert();
    }
    const formats = this.quill.getFormat(this.quill.selection.savedRange.index);
    if (formats[CodeBlock.blotName]) {
      const text = this.container.innerText;
      this.container.innerHTML = '';
      return new Delta().insert(text, { [CodeBlock.blotName]: formats[CodeBlock.blotName] });
    }
    let [elementMatchers, textMatchers] = this.prepareMatching();
    let delta = traverse(this.container, elementMatchers, textMatchers);

however, in the next snippet (from the latest version of quill), you can see that there is a !html check that returns early just passing the text through without calling convertHTML.

  convert(
    { html, text }: { html?: string; text?: string },
    formats: Record<string, unknown> = {},
  ) {
    if (formats[CodeBlock.blotName]) {
      return new Delta().insert(text || '', {
        [CodeBlock.blotName]: formats[CodeBlock.blotName],
      });
    }
    if (!html) {
      return new Delta().insert(text || '', formats);
    }
    const delta = this.convertHTML(html);

and finally, in the new protected converHTML function, you can see where the code path needs to reach in order to run the matcher. seems kinda like a bug in quill...

  protected convertHTML(html: string) {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    this.normalizeHTML(doc);
    const container = doc.body;
    const nodeMatches = new WeakMap();
    const [elementMatchers, textMatchers] = this.prepareMatching(
      container,
      nodeMatches,
    );
    return traverse(
      this.quill.scroll,
      container,
      elementMatchers,
      textMatchers,
      nodeMatches,
    );
  }

maybe there's a new, different way to get the formats to change the resulting delta from a simple { insert: 'the_link' } to the "correct" { insert: 'the_link', attributes: { link: 'the_link' } }. i think i'm gonna report this on quill if i can't find or figure something out.

[dancrew32]

Leaving this hack here for future travelers.

// Pick your favorite regexp for url detection e.g. https://stackoverflow.com/a/3809435/
// use at your own risk... 
const QUILL_URL_REGEXP =
  /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/gi;

export const autoFormatUrls = (quillInstance: Quill): void => {
  const text = quillInstance.getText();
  const matches = text.matchAll(QUILL_URL_REGEXP); // find all urls in text.

  // Save current cursor position
  const range = quillInstance.getSelection();
  const cursorPosition = range ? range.index : null;

  for (const match of matches) {
    const url = match[0];
    const index = match.index ?? 0; // Ensure index isn't undefined

    // Ensure URL is not already a link
    const formats = quillInstance.getFormat(index, url.length);
    if (!formats.link) {
      quillInstance.formatText(index, url.length, 'link', url, 'silent');
    }
  }

  // Restore cursor position if it was moved
  if (cursorPosition !== null) {
    quillInstance.setSelection(cursorPosition);
  }
};

Then over in quill's quillInstance.on('text-change', ... (or your react-quill-new's onChange), throw this at the end:

requestAnimationFrame(() => {
  autoFormatUrls(quillInstance);
});

Basically anything that is a URL that isn't already linked gets formatted as a link. It's not perfect but it's better than nothing!

Also don't forget to npm uninstall quill-magic-url 😉