chore(monorepo/client): move client source files

apps/client/src/services/note_tooltip.ts

@@ -0,0 +1,186 @@
+import treeService from "./tree.js";
+import linkService from "./link.js";
+import froca from "./froca.js";
+import utils from "./utils.js";
+import attributeRenderer from "./attribute_renderer.js";
+import contentRenderer from "./content_renderer.js";
+import appContext from "../components/app_context.js";
+import type FNote from "../entities/fnote.js";
+import { t } from "./i18n.js";
+
+function setupGlobalTooltip() {
+    $(document).on("mouseenter", "a", mouseEnterHandler);
+
+    // close any note tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
+    $(document).on("click", (e) => {
+        if ($(e.target).closest(".note-tooltip").length) {
+            // click within the tooltip shouldn't close it
+            return;
+        }
+
+        dismissAllTooltips();
+    });
+}
+
+function dismissAllTooltips() {
+    $(".note-tooltip").remove();
+}
+
+function setupElementTooltip($el: JQuery<HTMLElement>) {
+    $el.on("mouseenter", mouseEnterHandler);
+}
+
+async function mouseEnterHandler(this: HTMLElement) {
+    const $link = $(this);
+
+    if ($link.hasClass("no-tooltip-preview") || $link.hasClass("disabled")) {
+        return;
+    } else if ($link.closest(".ck-link-actions").length) {
+        // this is to avoid showing tooltip from inside the CKEditor link editor dialog
+        return;
+    } else if ($link.closest(".note-tooltip").length) {
+        // don't show tooltip for links within tooltip
+        return;
+    }
+
+    const url = $link.attr("href") || $link.attr("data-href");
+    const { notePath, noteId, viewScope } = linkService.parseNavigationStateFromUrl(url);
+
+    if (url?.startsWith("#fnref")) {
+        // The "^" symbol from footnotes within text notes, doesn't require a tooltip.
+        return;
+    }
+
+    if (!notePath || !noteId || viewScope?.viewMode !== "default") {
+        return;
+    }
+
+    const linkId = $link.attr("data-link-id") || `link-${Math.floor(Math.random() * 1000000)}`;
+    $link.attr("data-link-id", linkId);
+
+    if ($(`.${linkId}`).is(":visible")) {
+        // tooltip is already open for this link
+        return;
+    }
+
+    let renderPromise;
+    if (url?.startsWith("#fn")) {
+        renderPromise = renderFootnote($link, url);
+    } else {
+        renderPromise = renderTooltip(await froca.getNote(noteId));
+    }
+
+    const [content] = await Promise.all([
+        renderPromise,
+        // to reduce flicker due to accidental mouseover, cursor must stay for a bit over the link for tooltip to appear
+        new Promise((res) => setTimeout(res, 500))
+    ]);
+
+    if (!content || utils.isHtmlEmpty(content)) {
+        return;
+    }
+
+    const html = `<div class="note-tooltip-content">${content}</div>`;
+    const tooltipClass = "tooltip-" + Math.floor(Math.random() * 999_999_999);
+
+    // we need to check if we're still hovering over the element
+    // since the operation to get tooltip content was async, it is possible that
+    // we now create tooltip which won't close because it won't receive mouseleave event
+    if ($(this).filter(":hover").length > 0) {
+        $(this).tooltip({
+            container: "body",
+            // https://github.com/zadam/trilium/issues/2794 https://github.com/zadam/trilium/issues/2988
+            // with bottom this flickering happens a bit less
+            placement: "bottom",
+            trigger: "manual",
+            //TODO: boundary No longer applicable?
+            //boundary: 'window',
+            title: html,
+            html: true,
+            template: `<div class="tooltip note-tooltip ${tooltipClass}" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>`,
+            sanitize: false,
+            customClass: linkId
+        });
+
+        dismissAllTooltips();
+        $(this).tooltip("show");
+
+        // Dismiss the tooltip immediately if a link was clicked inside the tooltip.
+        $(`.${tooltipClass} a`).on("click", (e) => {
+            dismissAllTooltips();
+        });
+
+        // the purpose of the code below is to:
+        // - allow user to go from hovering the link to hovering the tooltip to be able to scroll,
+        //   click on links within tooltip etc. without tooltip disappearing
+        // - once the user moves the cursor away from both link and the tooltip, hide the tooltip
+        const checkTooltip = () => {
+            if (!$(this).filter(":hover").length && !$(`.${linkId}:hover`).length) {
+                // cursor is neither over the link nor over the tooltip, user likely is not interested
+                dismissAllTooltips();
+            } else {
+                setTimeout(checkTooltip, 1000);
+            }
+        };
+
+        setTimeout(checkTooltip, 1000);
+    }
+}
+
+async function renderTooltip(note: FNote | null) {
+    if (!note) {
+        return `<div>${t("note_tooltip.note-has-been-deleted")}</div>`;
+    }
+
+    const hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId;
+    const bestNotePath = note.getBestNotePathString(hoistedNoteId);
+
+    if (!bestNotePath) {
+        return;
+    }
+
+    const noteTitleWithPathAsSuffix = await treeService.getNoteTitleWithPathAsSuffix(bestNotePath);
+
+    const { $renderedAttributes } = await attributeRenderer.renderNormalAttributes(note);
+
+    const { $renderedContent } = await contentRenderer.getRenderedContent(note, {
+        tooltip: true,
+        trim: true
+    });
+    const isContentEmpty = $renderedContent[0].innerHTML.length === 0;
+
+    let content = "";
+    if (noteTitleWithPathAsSuffix) {
+        const classes = ["note-tooltip-title"];
+        if (isContentEmpty) {
+            classes.push("note-no-content");
+        }
+        content = `<h5 class="${classes.join(" ")}"><a href="#${note.noteId}" data-no-context-menu="true">${noteTitleWithPathAsSuffix.prop("outerHTML")}</a></h5>`;
+    }
+
+    content = `${content}<div class="note-tooltip-attributes">${$renderedAttributes[0].outerHTML}</div>`;
+    if (!isContentEmpty) {
+        content += $renderedContent[0].outerHTML;
+    }
+
+    return content;
+}
+
+function renderFootnote($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
+
+    return $footnoteContent.html() || "";
+}
+
+export default {
+    setupGlobalTooltip,
+    setupElementTooltip,
+    dismissAllTooltips
+};