Auto-linking is not correctly applied to links in diffs

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

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

[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

[rooneyg21]

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>