Fix footnote jump behavior on the issue page.

models/renderhelper/repo_comment.go

@@ -44,6 +44,7 @@ type RepoCommentOptions struct {
 	DeprecatedRepoName  string // it is only a patch for the non-standard "markup" api
 	DeprecatedOwnerName string // it is only a patch for the non-standard "markup" api
 	CurrentRefPath      string // eg: "branch/main" or "commit/11223344"
+	FootnoteContextID   string // the extra context ID for footnotes, used to avoid conflicts with other footnotes in the same page
 }
 
 func NewRenderContextRepoComment(ctx context.Context, repo *repo_model.Repository, opts ...RepoCommentOptions) *markup.RenderContext {
@@ -66,6 +67,8 @@ func NewRenderContextRepoComment(ctx context.Context, repo *repo_model.Repositor
 
 			"markdownNewLineHardBreak":     "true",
 			"markupAllowShortIssuePattern": "true",
+
+			"footnoteContextId": helper.opts.FootnoteContextID,
 		})
 	}
 	rctx = rctx.WithHelper(helper)

modules/markup/html.go

@@ -320,6 +320,7 @@ func visitNode(ctx *RenderContext, procs []processor, node *html.Node) *html.Nod
 	}
 
 	processNodeAttrID(node)
+	processFootnoteNode(ctx, node) // FIXME: the footnote processing should be done in the "footnote.go" renderer directly
 
 	if isEmojiNode(node) {
 		// TextNode emoji will be converted to `<span class="emoji">`, then the next iteration will visit the "span"

modules/markup/html_issue_test.go

@@ -30,6 +30,7 @@ func TestRender_IssueList(t *testing.T) {
 		rctx := markup.NewTestRenderContext(markup.TestAppURL, map[string]string{
 			"user": "test-user", "repo": "test-repo",
 			"markupAllowShortIssuePattern": "true",
+			"footnoteContextId":            "12345",
 		})
 		out, err := markdown.RenderString(rctx, input)
 		require.NoError(t, err)
@@ -69,4 +70,22 @@ func TestRender_IssueList(t *testing.T) {
 </ul>`,
 		)
 	})
+
+	t.Run("IssueFootnote", func(t *testing.T) {
+		test(
+			"foo[^1][^2]\n\n[^1]: bar\n[^2]: baz",
+			`<p>foo<sup id="fnref:user-content-1-12345"><a href="#fn:user-content-1-12345" rel="nofollow">1</a></sup><sup id="fnref:user-content-2-12345"><a href="#fn:user-content-2-12345" rel="nofollow">2</a></sup></p>
+<div>
+<hr/>
+<ol>
+<li id="fn:user-content-1-12345">
+<p>bar <a href="#fnref:user-content-1-12345" rel="nofollow">↩︎</a></p>
+</li>
+<li id="fn:user-content-2-12345">
+<p>baz <a href="#fnref:user-content-2-12345" rel="nofollow">↩︎</a></p>
+</li>
+</ol>
+</div>`,
+		)
+	})
 }

modules/markup/html_node.go

@@ -15,6 +15,14 @@ func isAnchorIDUserContent(s string) bool {
 	return strings.HasPrefix(s, "user-content-") || strings.Contains(s, ":user-content-")
 }
 
+func isAnchorIDFootnote(s string) bool {
+	return strings.HasPrefix(s, "fnref:user-content-") || strings.HasPrefix(s, "fn:user-content-")
+}
+
+func isAnchorHrefFootnote(s string) bool {
+	return strings.HasPrefix(s, "#fnref:user-content-") || strings.HasPrefix(s, "#fn:user-content-")
+}
+
 func processNodeAttrID(node *html.Node) {
 	// Add user-content- to IDs and "#" links if they don't already have them,
 	// and convert the link href to a relative link to the host root
@@ -27,6 +35,18 @@ func processNodeAttrID(node *html.Node) {
 	}
 }
 
+func processFootnoteNode(ctx *RenderContext, node *html.Node) {
+	for idx, attr := range node.Attr {
+		if (attr.Key == "id" && isAnchorIDFootnote(attr.Val)) ||
+			(attr.Key == "href" && isAnchorHrefFootnote(attr.Val)) {
+			if footnoteContextID, ok := ctx.RenderOptions.Metas["footnoteContextId"]; ok {
+				node.Attr[idx].Val = attr.Val + "-" + footnoteContextID
+			}
+			continue
+		}
+	}
+}
+
 func processNodeA(ctx *RenderContext, node *html.Node) {
 	for idx, attr := range node.Attr {
 		if attr.Key == "href" {

routers/web/repo/issue_view.go

@@ -9,6 +9,7 @@ import (
 	"net/http"
 	"net/url"
 	"sort"
+	"strconv"
 
 	activities_model "code.gitea.io/gitea/models/activities"
 	"code.gitea.io/gitea/models/db"
@@ -624,7 +625,9 @@ func prepareIssueViewCommentsAndSidebarParticipants(ctx *context.Context, issue
 		comment.Issue = issue
 
 		if comment.Type == issues_model.CommentTypeComment || comment.Type == issues_model.CommentTypeReview {
-			rctx := renderhelper.NewRenderContextRepoComment(ctx, issue.Repo)
+			rctx := renderhelper.NewRenderContextRepoComment(ctx, issue.Repo, renderhelper.RepoCommentOptions{
+				FootnoteContextID: strconv.FormatInt(comment.ID, 10),
+			})
 			comment.RenderedContent, err = markdown.RenderString(rctx, comment.Content)
 			if err != nil {
 				ctx.ServerError("RenderString", err)
@@ -981,7 +984,9 @@ func preparePullViewReviewAndMerge(ctx *context.Context, issue *issues_model.Iss
 
 func prepareIssueViewContent(ctx *context.Context, issue *issues_model.Issue) {
 	var err error
-	rctx := renderhelper.NewRenderContextRepoComment(ctx, ctx.Repo.Repository)
+	rctx := renderhelper.NewRenderContextRepoComment(ctx, ctx.Repo.Repository, renderhelper.RepoCommentOptions{
+		FootnoteContextID: "0", // Set footnote context ID to 0 for the issue content
+	})
 	issue.RenderedContent, err = markdown.RenderString(rctx, issue.Content)
 	if err != nil {
 		ctx.ServerError("RenderString", err)

web_src/js/markup/anchors.ts

@@ -5,21 +5,24 @@ const removePrefix = (str: string): string => str.replace(/^user-content-/, '');
 const hasPrefix = (str: string): boolean => str.startsWith('user-content-');
 
 // scroll to anchor while respecting the `user-content` prefix that exists on the target
-function scrollToAnchor(encodedId: string): void {
-  if (!encodedId) return;
-  const id = decodeURIComponent(encodedId);
-  const prefixedId = addPrefix(id);
-  let el = document.querySelector(`#${prefixedId}`);
+function scrollToAnchor(encodedId?: string): void {
+  // FIXME: need to rewrite this function with new a better "footnote.go" logic, too many tricks here
+  let elemId: string;
+  try {
+    elemId = decodeURIComponent(encodedId ?? '');
+  } catch {} // ignore the errors, since the "encodedId" is from user's input
+  if (!elemId) return;
+
+  const prefixedId = addPrefix(elemId);
+  // eslint-disable-next-line unicorn/prefer-query-selector
+  let el = document.getElementById(prefixedId);
 
   // check for matching user-generated `a[name]`
-  if (!el) {
-    el = document.querySelector(`a[name="${CSS.escape(prefixedId)}"]`);
-  }
+  el = el ?? document.querySelector(`a[name="${CSS.escape(prefixedId)}"]`);
 
   // compat for links with old 'user-content-' prefixed hashes
-  if (!el && hasPrefix(id)) {
-    return document.querySelector(`#${id}`)?.scrollIntoView();
-  }
+  // eslint-disable-next-line unicorn/prefer-query-selector
+  el = (!el && hasPrefix(elemId)) ? document.getElementById(elemId) : el;
 
   el?.scrollIntoView();
 }