All linkifier features broken on new file viewer

[fregante]

Description

Screenshot

How to replicate the issue + URL

It's not enabled on
https://github.com/refined-github/refined-github/blob/be756e68dd4bf24d53e802e1fec126506979fa80/test/linkify-urls-in-code.js

But you can see it working in this live code embed:

refined-github/test/linkify-urls-in-code.js

Lines 32 to 51 in be756e6

	test('isIssue', batchTestText, linkifyURLsInCode.hasIssue, [
	'#1',
	'#12',
	'an issue in the middle #123 of some text' // Only link to issues in comments, see #381
	], [
	'#a',
	'1234'
	]);
	test('findURLs', batchTestArray, linkifyURLsInCode.findURLs, [
	'http://github.com/',
	'https://www.github.com',
	'https://github.com/orgs/test/dashboard',
	'a long string of text with a url at the end: https://github.com/dashboard?param=test'
	], [
	'https://github',
	'github',
	'github.com',
	'github/whatever/text'
	]);

Extension version

23.2.1

Browser(s) used

Safari

[amanmalh]

Hi @fregante, I need more clarification on this. I tested this on chrome, as well as safari. The URLs under 'findURLs' test seem to be working fine for me. The issue reference in the comment is working fine as well. What exactly is broken?

[fregante]

Thank you for looking into this! It's related to the new code view, you'll have to enable it to see the issue: https://docs.github.com/en/search-github/github-code-search/about-github-code-search#enabling-and-disabling-the-new-code-search-and-code-view-beta

[StefanLobbenmeierObjego]

Might be nice in general to have refined-github check if preview features are enabled, and if it does not work properly instead have a message that reminds you to try turnin off the preview-features

[fregante]

Easier said than done 😅

Given they just enabled the beta for everyone, I think the opposite should be suggested.

1. We fix the feature on the new view
2. User notices it's broken
3. We suggest switching to the new view

[kidonng]

This seems tricky because there's a <textarea> overlay above the actual code. We can linkify the code but no one is able to click them 😅

Or alternatively, we catch the click events and re-dispatch them ourselves 🤔

[fregante]

🤔 what's that textarea for? Is the code inside it? How is the user able to select it?

[kidonng]

Presumably for getting cursor position and acting on it, as it is easier than dealing with text nodes.

The real bummer is that the highlighted code is now pseudo-elements:

.react-file-line [data-code-text]::before {
    content: attr(data-code-text);
}

Which means in addition to dealing with clicks, we need to construct the DOM back ourselves. And a11y will suffer.

I can't think of an efficient way to do all these without breaking GitHub functionality.

[kidonng]

What's the output of $('#read-only-cursor-text-area') in your console?

[fregante]

Always null, even on repos I can't modify and regardless of isPermalink status

Edit: it's there now

[fregante]

This CSS successfully brings the element back to the surface:

[data-code-text="'https://www.github.com'"] {
    background: red;
    z-index: 10000;
    pointer-events: all
}
[data-code-text="'https://www.github.com'"]:hover {
    background: yellow
}

The issue is that those elements aren't easily editable.

I think CSS anchoring (2024) will be another way to overlay content without altering the DOM, but it's not here yet:

• https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning/

[tonglil]

Perhaps this is also the issue with symbolic links not linking any more.

[fregante]

Yes

[134130]

🤔 We can implement in two ways.

• Just re-using GitHub's highlighting elements.
  • Simple and light way. Not harming GitHub's text editor
• Overlaying with display: absolute | related
  • Looks more pretty since we can use anchor tag with hovering css.

And this is my rough implement with first way.

[fregante]

How does the first way work? Can you send a minimal PR? Or demo code?

Edit: I think you're suggesting the demo GIF I used earlier. The problem is that that could only highlight the entire string instead of just the URL. This would not work if a comment has a link and especially if it has more than one link.

The second suggestion would work if we add a single clickable icon somewhere nearby, but we cannot highlight the exact text or potentially even the exact line (if a comment wraps)

[134130]

Exactly.