From 941d0d45f85de02e41c4bd80d731f3965a63be5a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 7 Jun 2025 00:02:33 +0300
Subject: [PATCH] feat(client): render tooltips for bookmarks

---
 apps/client/src/services/note_tooltip.ts | 44 ++++++++++++++++--------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/services/note_tooltip.ts b/apps/client/src/services/note_tooltip.ts
index 8ea7ac88f..4a2b88bb6 100644
--- a/apps/client/src/services/note_tooltip.ts
+++ b/apps/client/src/services/note_tooltip.ts
@@ -73,8 +73,8 @@ async function mouseEnterHandler(this: HTMLElement) {
     }
 
     let renderPromise;
-    if (url?.startsWith("#fn")) {
-        renderPromise = renderFootnote($link, url);
+    if (url && url.startsWith("#") && !url.startsWith("#root/")) {
+        renderPromise = renderFootnoteOrAnchor($link, url);
     } else {
         renderPromise = renderTooltip(await froca.getNote(noteId));
     }
@@ -178,33 +178,47 @@ async function renderTooltip(note: FNote | null) {
     return content;
 }
 
-function renderFootnote($link: JQuery<HTMLElement>, url: string) {
+function renderFootnoteOrAnchor($link: JQuery<HTMLElement>, url: string) {
     // A footnote text reference
     const footnoteRef = url.substring(3);
-    const $footnoteContent = $link
-        .closest(".ck-content") // find the parent CK content
-        .find("> .footnote-section") // find the footnote section
-        .find(`a[href="#fnref${footnoteRef}"]`) // find the footnote link
-        .closest(".footnote-item") // find the parent container of the footnote
-        .find(".footnote-content"); // find the actual text content of the footnote
+    let $targetContent: JQuery<HTMLElement>;
+
+    if (url.startsWith("#fn")) {
+        $targetContent = $link
+            .closest(".ck-content") // find the parent CK content
+            .find("> .footnote-section") // find the footnote section
+            .find(`a[href="#fnref${footnoteRef}"]`) // find the footnote link
+            .closest(".footnote-item") // find the parent container of the footnote
+            .find(".footnote-content"); // find the actual text content of the footnote
+    } else {
+        $targetContent = $link
+            .closest(".ck-content")
+            .find(url)
+            .closest("p");
+    }
+
+    if (!$targetContent.length) {
+        // If the target content is not found, return an empty string
+        return "";
+    }
 
     const isEditable = $link.closest(".ck-content").hasClass("note-detail-editable-text-editor");
     if (isEditable) {
         /* Remove widget buttons for tables, formulas, and images in editable notes. */
-        $footnoteContent.find('.ck-widget__selection-handle').remove();
-        $footnoteContent.find('.ck-widget__type-around').remove();
-        $footnoteContent.find('.ck-widget__resizer').remove();
+        $targetContent.find('.ck-widget__selection-handle').remove();
+        $targetContent.find('.ck-widget__type-around').remove();
+        $targetContent.find('.ck-widget__resizer').remove();
 
         /* Handling in-line math formulas */
-        $footnoteContent.find('.ck-math-tex.ck-math-tex-inline.ck-widget').each(function () {
+        $targetContent.find('.ck-math-tex.ck-math-tex-inline.ck-widget').each(function () {
             const $katex = $(this).find('.katex').first();
             if ($katex.length) {
                 $(this).replaceWith($('<span class="math-tex"></span>').append($('<span></span>').append($katex.clone())));
             }
         });
     }
-    
-    let footnoteContent = $footnoteContent.html();
+
+    let footnoteContent = $targetContent.html();
     footnoteContent = `<div class="ck-content">${footnoteContent}</div>`
     return footnoteContent || "";
 }