Refined-github: Auto-linking is not correctly applied to links in diffs

[OmgImAlexis]

Ref: https://github.com/Homebrew/homebrew-core/pull/18015/files

 url "https://github.com/mholt/caddy/archive/v0.10.9.tar.gz"

[arungalva]

I think it isn't picking up anything after "10." because the whole url isn't in the same element. since you edited part of the url, GitHub adds the 'x' class to it giving it the green background colour to show code addition

The same link is working in the original file here

Here is how the css looks like on original GitHub when you change something in the url

<span class="pl-s">
    <span class="pl-pds">"</span>
    https://github.com/mholt/caddy/archive/v0.10.
    <span class="x x-first x-last">9</span>
    .tar.gz<span class="pl-pds">"</span>
</span>

If the Url isn't changed, this is the css that is rendered

<span class="pl-s">
    <span class="pl-pds">"</span>
    https://caddyserver.com/
    <span class="pl-pds">"</span>
</span>

[OmgImAlexis]

This may be related to this and #703.

This is from the screenshot yet if you look at the file here the slash is missing where it changed github.com into a link.

[fregante]

Yeah it’s not the characters but the diff: The color change breaks the url in multiple textNodes. #703 already takes this into consideration.

[fregante]

Thinking out loud. Discarding tags while parsing the URLs and preserving them in the output is a pain, especially if they need to be split (e.g. half linked, half not linked)

So here's a possible solution, drawn. This shows the old, line-by-line parsing (instead of textnode-by-textnode). It pushed a flat text for each line linkifyUrls(line.textContent), therefore initially discarding all extra elements in the line.

Legend:

• (spaces) are irrelevant characters
• - is a URL that should be linked
• # is an element in the URL, like a <span class="x"> for diffs
• A is a linked URL, like <a href="----------">

Input, text with `span`:
       --####----

Output, text with `a` but not `span`:
       AAAAAAAAAA

How do we merge the two?

Character data has not been changed, so it can _somehow_ zipped together.

The question now is: how do we zip them?

1. Select N characters in the input element, where N is the first non-linked characters in the output.
2. Copy them to the output fragment.
3. Repeat, alternating non-linked and linked characters.

This is the API: Selection.prototype.modify('extend', 'forward', 'character'). Demo

Final output, text with `span` inside `a`, where it belongs:
       AA####AAAA

Edit: I've done this "zipping" in another project. Ping me if anyone's interested.

Edit: a year later, here it is: https://github.com/bfred-it/zip-text-nodes

[wearhere]

Related problem: https://github.com/sindresorhus/refined-github/issues/1499