Opening this PR to track the work on:

• ⚠️ All linkifier features broken on new file viewer #6336

Findings:

• ✅ I found a way to parse and visually linkify code
• ❌ there's no way to bring only the linkified code to a higher z-index; The whole "file" lives in a position: relative. My previous :hover demo no longer works
• 👍 There's a way to match a click on the textarea to a specific element under it: https://gist.github.com/kiliman/5d7a3826bc16f5967978336d026805a3

Next steps for the POC

• Integrate click handler as shown in the gist
• Add full-file parser helpers
  • linkify via indexes rather than keyword (fullSourceText.slice(30, 35)) because keywords may appear multiply times on the same line
  • run parser(s) on raw text but alter the syntax-highlighted DOM (e.g. fullSourceText.replace(urlRegex, () => linkifier on indexes found))

Wishlist

• Investigate CSS anchor usage to provide hover state and/or a real link above the text area. This is a superior option to the click handler, but Firefox and Safari are left behind as usual

Test URL

Related

• Support linking to packages in .[c|m]?[j|t]s[x]? files uncenter/npm-on-github#10