feat: support multi-line selection with URL parameters

Author: kerwin612

templates/repo/view_file.tmpl

@@ -108,7 +108,7 @@
 					{{range $idx, $code := .FileContent}}
 						{{$line := Eval $idx "+" 1}}
 						<tr>
-							<td id="L{{$line}}" class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td>
+							<td id="L{{$line}}" class="lines-num"><span data-line-number="{{$line}}"></span></td>
 							{{if $.EscapeStatus.Escaped}}
 								<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{ctx.Locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{ctx.Locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
 							{{end}}

web_src/js/features/repo-code.ts

@@ -14,7 +14,7 @@ function changeHash(hash: string) {
 // it selects the code lines defined by range: `L1-L3` (3 lines) or `L2` (singe line)
 function selectRange(range: string): Element {
   for (const el of document.querySelectorAll('.code-view tr.active')) el.classList.remove('active');
-  const elLineNums = document.querySelectorAll(`.code-view td.lines-num span[data-line-number]`);
+  const elLineNums = document.querySelectorAll(`.code-view td.lines-num[id^="L"]`);
 
   const refInNewIssue = document.querySelector('a.ref-in-new-issue');
   const copyPermalink = document.querySelector('a.copy-line-permalink');
@@ -81,11 +81,12 @@ function showLineButton() {
     el.remove();
   }
 
-  // find active row and add button
-  const tr = document.querySelector('.code-view tr.active');
-  if (!tr) return;
+  // Find first active row and add button
+  const activeRows = document.querySelectorAll('.code-view tr.active');
+  if (activeRows.length === 0) return;
 
-  const td = tr.querySelector('td.lines-num');
+  const firstActiveRow = activeRows[0];
+  const td = firstActiveRow.querySelector('td.lines-num');
   const btn = document.createElement('button');
   btn.classList.add('code-line-button', 'ui', 'basic', 'button');
   btn.innerHTML = svg('octicon-kebab-horizontal');
@@ -96,16 +97,30 @@ function showLineButton() {
 
   createTippy(btn, {
     theme: 'menu',
-    trigger: 'click',
-    hideOnClick: true,
+    trigger: 'manual', // Use manual trigger
     content: menu,
     placement: 'right-start',
     interactive: true,
-    onShow: (tippy) => {
-      tippy.popper.addEventListener('click', () => {
-        tippy.hide();
-      }, {once: true});
-    },
+    appendTo: () => document.body,
+  });
+
+  // Handle menu button click manually
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const tippyInstance = btn._tippy;
+    if (tippyInstance && tippyInstance.state.isVisible) {
+      tippyInstance.hide();
+    } else if (tippyInstance) {
+      tippyInstance.show();
+    }
+  });
+
+  // Hide menu when clicking menu items
+  menu.addEventListener('click', () => {
+    const tippyInstance = btn._tippy;
+    if (tippyInstance) {
+      tippyInstance.hide();
+    }
   });
 }
 
@@ -118,7 +133,7 @@ export function initRepoCodeView() {
 
   // "file code view" and "blame" pages need this "line number button" feature
   let selRangeStart: string;
-  addDelegatedEventListener(document, 'click', '.code-view .lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
+  addDelegatedEventListener(document, 'click', '.code-view .lines-num', (el: HTMLElement, e: KeyboardEvent) => {
     if (!selRangeStart || !e.shiftKey) {
       selRangeStart = el.getAttribute('id');
       selectRange(selRangeStart);