enhance admin leaderboard and previews

frontend-web/src/core/utils/markdown.ts

@@ -3,8 +3,8 @@ export function extractTitleFromMarkdown(markdown: string) {
     let title = markdown.split("\n")[0]!.trim();
     if (title.startsWith("# ")) {
       title = title.slice(2).trim();
-    }
-    return title;
+    }
+    return title;
   }
   return undefined;
 }
@@ -52,6 +52,36 @@ function decodeLinkPart(value: string): string {
   }
 }
 
+/** True for hrefs that point to an anchor within the current document (`#section`). */
+export function isInPageAnchor(href: string | undefined | null): href is string {
+  return !!href && href.startsWith("#") && !href.startsWith("#reference-");
+}
+
+function escapeAttrValue(value: string): string {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+/**
+ * Scrolls to an in-page anchor by id without mutating `window.location.hash`.
+ *
+ * The app runs under a HashRouter, so letting an `<a href="#...">` click change
+ * the hash would be interpreted as a route change and 404. We resolve the target
+ * element ourselves and scroll to it instead. Scoped to the nearest
+ * `[data-markdown-anchor-root]` so headings in other messages don't collide.
+ */
+export function scrollToInPageAnchor(anchor: HTMLElement, href: string | undefined | null): void {
+  if (!isInPageAnchor(href)) return;
+  const id = decodeLinkPart(href.slice(1)).trim();
+  if (!id) return;
+  const scope = anchor.closest<HTMLElement>("[data-markdown-anchor-root]");
+  const selector = `[id="${escapeAttrValue(id)}"]`;
+  const target =
+    (scope?.querySelector<HTMLElement>(selector) ?? null) ??
+    document.getElementById(id) ??
+    document.querySelector<HTMLElement>(selector);
+  target?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
 function normalizeLookupKey(value: string): string {
   return markdownSlug(decodeLinkPart(value).replace(/^#+/, ""));
 }
@@ -68,6 +98,45 @@ function candidateTextFromHref(href: string): string {
   return decodeLinkPart(lastSegment).replace(/\.(md|markdown)$/i, "");
 }
 
+/**
+ * Injects a small runtime script into generated HTML so that clicking an
+ * in-page anchor (`<a href="#section">`) scrolls within the iframe instead of
+ * navigating it. The preview iframe loads from a sandboxed `blob:` URL, where a
+ * fragment navigation blanks the frame; intercepting the click avoids that.
+ */
+export function injectInPageAnchorHandler(html: string): string {
+  const script = `<script>(function(){
+  function decode(v){try{return decodeURIComponent(v);}catch(e){return v;}}
+  function bySelector(id){
+    if(!document.querySelector)return null;
+    var esc=window.CSS&&CSS.escape?CSS.escape(id):id.replace(/["\\\\]/g,"\\\\$&");
+    try{return document.querySelector("#"+esc+",[name=\\""+esc+"\\"]");}catch(e){return null;}
+  }
+  document.addEventListener("click",function(e){
+    var el=e.target;
+    while(el&&el.tagName!=="A"){el=el.parentElement;}
+    if(!el)return;
+    var href=el.getAttribute("href");
+    if(!href||href.charAt(0)!=="#"||href.length<2)return;
+    e.preventDefault();
+    var id=decode(href.slice(1));
+    var raw=href.slice(1);
+    var target=
+      document.getElementById(id)||
+      document.getElementById(raw)||
+      document.getElementsByName(id)[0]||
+      document.getElementsByName(raw)[0]||
+      bySelector(id)||
+      bySelector(raw);
+    if(target){target.scrollIntoView({behavior:"smooth",block:"start"});}
+  },true);
+})();</script>`;
+  if (/<\/body>/i.test(html)) {
+    return html.replace(/<\/body>/i, `${script}</body>`);
+  }
+  return html + script;
+}
+
 export function createMarkdownAnchorResolver(markdown: string): MarkdownAnchorResolver {
   const headings: MarkdownHeadingAnchor[] = [];
   const idsByLookup = new Map<string, string>();