visualjerk / quill-magic-url

Automatically convert URLs to links in Quill
MIT License
125 stars 43 forks source link

Question: support for Quill 2.x #94

Open stephanstapel opened 1 month ago

stephanstapel commented 1 month ago

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 commented 1 month ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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

omgoshjosh commented 2 weeks ago

EDIT: this seems to be the exact same issue -> https://github.com/slab/quill/issues/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.