feat(ui): improve multiline file preview and anchor detection (#9145)

This PR solves some little annoyance for me by allowing line ranges for inline file previews and source links to be of the form `L1-9` instead of necessarily `L1-L9`.
For links to source files it allows also `n1-9` or `n1-n9` in agreement with already allowed single line anchors `n1`.

### Tests

- I added test coverage for Go changes...
  - [x] in their respective `*_test.go` for unit tests.
  - [ ] in the `tests/integration` directory if it involves interactions with a live Forgejo server.
- I added test coverage for JavaScript changes...
  - [x] in `web_src/js/*.test.js` if it can be unit tested.
  - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [ ] I do not want this change to show in the release notes.
- [x] I want the title to show in the release notes with a link to this pull request.
- [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9145
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Robert Wolff <mahlzahn@posteo.de>
Co-committed-by: Robert Wolff <mahlzahn@posteo.de>

modules/markup/file_preview.go

@@ -25,7 +25,7 @@ import (
 )
 
 // filePreviewPattern matches "http://domain/org/repo/src/commit/COMMIT/filepath#L1-L2"
-var filePreviewPattern = regexp.MustCompile(`https?://((?:\S+/){3})src/commit/([0-9a-f]{4,64})/(\S+)#(L\d+(?:-L\d+)?)`)
+var filePreviewPattern = regexp.MustCompile(`https?://((?:\S+/){3})src/commit/([0-9a-f]{4,64})/(\S+)#(L\d+(?:-L?\d+)?)`)
 
 type FilePreview struct {
 	fileContent []template.HTML
@@ -78,17 +78,17 @@ func newFilePreview(ctx *RenderContext, node *html.Node, locale translation.Loca
 
 	commitSha := node.Data[m[4]:m[5]]
 	filePath := node.Data[m[6]:m[7]]
+	hash := node.Data[m[8]:m[9]]
 	urlFullSource := urlFull
 	if strings.HasSuffix(filePath, "?display=source") {
 		filePath = strings.TrimSuffix(filePath, "?display=source")
 	} else if Type(filePath) != "" {
-		urlFullSource = node.Data[m[0]:m[6]] + filePath + "?display=source#" + node.Data[m[8]:m[1]]
+		urlFullSource = node.Data[m[0]:m[6]] + filePath + "?display=source#" + hash
 	}
 	filePath, err := url.QueryUnescape(filePath)
 	if err != nil {
 		return nil
 	}
-	hash := node.Data[m[8]:m[9]]
 
 	preview.start = m[0]
 	preview.end = m[1]

modules/markup/html_test.go

@@ -1109,6 +1109,39 @@ func TestRender_FilePreview(t *testing.T) {
 		)
 	})
 
+	t.Run("rendered file with lines L1-2 instead of L1-L2", func(t *testing.T) {
+		testRender(
+			commitFileURL+"#L1-2",
+			`<p></p>`+
+				`<div class="file-preview-box">`+
+				`<div class="header">`+
+				`<div>`+
+				`<a href="http://localhost:3000/gogits/gogs/src/commit/c9913120ed2c1e27c1d7752ecdb7a504dc7cf6be/path/to/file.md?display=source#L1-2" class="muted" rel="nofollow">path/to/file.md</a>`+
+				`</div>`+
+				`<span class="text grey">`+
+				`Lines 1 to 2 in <a href="http://localhost:3000/gogits/gogs/src/commit/c9913120ed2c1e27c1d7752ecdb7a504dc7cf6be" class="text black" rel="nofollow">c991312</a>`+
+				`</span>`+
+				`</div>`+
+				`<div class="ui table">`+
+				`<table class="file-preview">`+
+				`<tbody>`+
+				`<tr>`+
+				`<td class="lines-num"><span data-line-number="1"></span></td>`+
+				`<td class="lines-code chroma"><code class="code-inner"><span class="gh"># A`+"\n"+`</span></code></td>`+
+				`</tr>`+
+				`<tr>`+
+				`<td class="lines-num"><span data-line-number="2"></span></td>`+
+				`<td class="lines-code chroma"><code class="code-inner"><span class="gh"></span>B`+"\n"+`</code></td>`+
+				`</tr>`+
+				`</tbody>`+
+				`</table>`+
+				`</div>`+
+				`</div>`+
+				`<p></p>`,
+			localMetas,
+		)
+	})
+
 	commitFileURL = util.URLJoin(markup.TestRepoURL, "src", "commit", "190d9492934af498c3f669d6a2431dc5459e5b20", "path", "to", "file.go")
 
 	t.Run("normal file with ?display=source", func(t *testing.T) {

web_src/js/features/repo-code.js

@@ -5,8 +5,8 @@ import {createTippy} from '../modules/tippy.js';
 import {clippie} from 'clippie';
 import {toAbsoluteUrl} from '../utils.js';
 
-export const singleAnchorRegex = /^#(L|n)([1-9][0-9]*)$/;
+export const singleAnchorRegex = /^#[Ln]([1-9][0-9]*)$/;
-export const rangeAnchorRegex = /^#(L[1-9][0-9]*)-(L[1-9][0-9]*)$/;
+export const rangeAnchorRegex = /^#[Ln]([1-9][0-9]*)-[Ln]?([1-9][0-9]*)$/;
 
 function changeHash(hash) {
   if (window.history.pushState) {
@@ -156,9 +156,9 @@ export function initRepoCodeView() {
       const $linesEls = $(getLineEls());
       let $first;
       if (m) {
-        $first = $linesEls.filter(`[rel=${m[1]}]`);
+        $first = $linesEls.filter(`[rel=L${m[1]}]`);
         if ($first.length) {
-          const $last = $linesEls.filter(`[rel=${m[2]}]`);
+          const $last = $linesEls.filter(`[rel=L${m[2]}]`);
           selectRange($linesEls, $first, $last.length ? $last : $linesEls.last());
 
           // show code view menu marker (don't show in blame page)
@@ -172,7 +172,7 @@ export function initRepoCodeView() {
       }
       m = window.location.hash.match(singleAnchorRegex);
       if (m) {
-        $first = $linesEls.filter(`[rel=L${m[2]}]`);
+        $first = $linesEls.filter(`[rel=L${m[1]}]`);
         if ($first.length) {
           selectRange($linesEls, $first);
 

web_src/js/features/repo-code.test.js

@@ -14,4 +14,7 @@ test('rangeAnchorRegex', () => {
   expect(rangeAnchorRegex.test('#L1-L10')).toEqual(true);
   expect(rangeAnchorRegex.test('#L01-L10')).toEqual(false);
   expect(rangeAnchorRegex.test('#L1-L01')).toEqual(false);
+  expect(rangeAnchorRegex.test('#L1-10')).toEqual(true);
+  expect(rangeAnchorRegex.test('#n1-n10')).toEqual(true);
+  expect(rangeAnchorRegex.test('#n1-10')).toEqual(true);
 });