From 875e76ed763cfb18e93cbeb6d1ca3d0ae7d3c54b Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 10 Jul 2024 12:40:52 +0800
Subject: [PATCH] feat: link with tooltip

Signed-off-by: Innei <i@innei.in>
---
 src/renderer/src/components/ui/link/index.tsx | 19 +++++++++++++++++++
 src/renderer/src/lib/parse-html.ts            |  3 ++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/src/components/ui/link/index.tsx

diff --git a/src/renderer/src/components/ui/link/index.tsx b/src/renderer/src/components/ui/link/index.tsx
new file mode 100644
index 0000000000..9a11799bd4
--- /dev/null
+++ b/src/renderer/src/components/ui/link/index.tsx
@@ -0,0 +1,19 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip"
+
+interface LinkProps {
+  href: string
+  title: string
+  children: React.ReactNode
+  target: string
+}
+
+export const LinkWithTooltip = (props: LinkProps) => (
+  <Tooltip delayDuration={0}>
+    <TooltipTrigger>
+      <a href={props.href} title={props.title} target={props.target}>{props.children}</a>
+    </TooltipTrigger>
+    <TooltipContent align="start" side="bottom">
+      {props.href}
+    </TooltipContent>
+  </Tooltip>
+)
diff --git a/src/renderer/src/lib/parse-html.ts b/src/renderer/src/lib/parse-html.ts
index bc890dfc24..bd794e8def 100644
--- a/src/renderer/src/lib/parse-html.ts
+++ b/src/renderer/src/lib/parse-html.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ShikiHighLighter } from "@renderer/components/ui/code-highlighter"
 import { Image } from "@renderer/components/ui/image"
+import { LinkWithTooltip } from "@renderer/components/ui/link"
 import { toJsxRuntime } from "hast-util-to-jsx-runtime"
 import { createElement } from "react"
 import { Fragment, jsx, jsxs } from "react/jsx-runtime"
@@ -69,6 +70,7 @@ export const parseHtml = async (
       jsxs: (type, props, key) => jsxs(type as any, props, key),
       passNode: true,
       components: {
+        a: ({ node, ...props }) => createElement(LinkWithTooltip, { ...props } as any),
         img: ({ node, ...props }) => createElement(Image, { ...props, popper: true }),
         pre: ({ node, ...props }) => {
           if (!props.children) return null
@@ -102,7 +104,6 @@ export const parseHtml = async (
           }
 
           if (!codeString) return null
-          // return createElement("pre", { ...props, className: "shiki" })
           return createElement(ShikiHighLighter, {
             code: codeString,
             language: language.toLowerCase(),