feat: clickable entry id in ai daily

package.json

@@ -114,6 +114,8 @@
     "rehype-parse": "9.0.0",
     "rehype-sanitize": "6.0.0",
     "rehype-stringify": "10.0.0",
+    "remark-parse": "11.0.0",
+    "remark-rehype": "11.1.0",
     "semver": "7.6.3",
     "shiki": "1.12.0",
     "sonner": "^1.5.0",

src/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx

@@ -1,5 +1,8 @@
+import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
 import { FeedViewType } from "@renderer/lib/enum"
 import { useEntryContentContext } from "@renderer/modules/entry-content/hooks"
+import { useEntry } from "@renderer/store/entry"
+import { useCallback } from "react"
 
 import type { LinkProps } from "../../link"
 import {
@@ -13,6 +16,19 @@ import { ensureAndRenderTimeStamp } from "../utils"
 export const MarkdownLink = (props: LinkProps) => {
   const { view } = useEntryContentContext()
 
+  const entryId = (/^\w{17}$/.test(props.href)) ? props.href : null
+  const entry = useEntry(entryId)
+
+  const navigate = useNavigateEntry()
+  const onClick = useCallback((e: React.MouseEvent) => {
+    if (entryId) {
+      e.preventDefault()
+      navigate({
+        entryId,
+      })
+    }
+  }, [entryId, navigate])
+
   const parseTimeStamp = view === FeedViewType.Audios
   if (parseTimeStamp) {
     const childrenText = props.children
@@ -22,6 +38,7 @@ export const MarkdownLink = (props: LinkProps) => {
       if (renderer) return renderer
     }
   }
+
   return (
     <Tooltip delayDuration={0}>
       <TooltipTrigger asChild>
@@ -30,6 +47,7 @@ export const MarkdownLink = (props: LinkProps) => {
           href={props.href}
           title={props.title}
           target="_blank"
+          onClick={onClick}
         >
           {props.children}
 
@@ -41,7 +59,7 @@ export const MarkdownLink = (props: LinkProps) => {
       {!!props.href && (
         <TooltipPortal>
           <TooltipContent align="start" className="break-all" side="bottom">
-            {props.href}
+            {entry?.entries.title || props.href}
           </TooltipContent>
         </TooltipPortal>
       )}

src/renderer/src/lib/parse-markdown.ts

@@ -0,0 +1,42 @@
+import {
+  MarkdownLink,
+} from "@renderer/components/ui/markdown/renderers"
+import { toJsxRuntime } from "hast-util-to-jsx-runtime"
+import { createElement } from "react"
+import { Fragment, jsx, jsxs } from "react/jsx-runtime"
+import rehypeSanitize from "rehype-sanitize"
+import rehypeStringify from "rehype-stringify"
+import remarkParse from "remark-parse"
+import remarkRehype from "remark-rehype"
+import { unified } from "unified"
+import { VFile } from "vfile"
+
+export const parseMarkdown = async (
+  content: string,
+) => {
+  const file = new VFile(content)
+
+  const pipeline = unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeSanitize)
+    .use(rehypeStringify)
+
+  const tree = pipeline.parse(content)
+
+  const hastTree = pipeline.runSync(tree, file)
+
+  return {
+    content: toJsxRuntime(hastTree, {
+      Fragment,
+      ignoreInvalidStyle: true,
+      jsx: (type, props, key) => jsx(type as any, props, key),
+      jsxs: (type, props, key) => jsxs(type as any, props, key),
+      passNode: true,
+      components: {
+        a: ({ node, ...props }) =>
+          createElement(MarkdownLink, { ...props } as any),
+      },
+    }),
+  }
+}

src/renderer/src/modules/entry-content/daily.tsx

@@ -1,7 +1,6 @@
 import { Card, CardHeader } from "@renderer/components/ui/card"
 import { Collapse, CollapseGroup } from "@renderer/components/ui/collapse"
 import { LoadingCircle } from "@renderer/components/ui/loading"
-import { Markdown } from "@renderer/components/ui/markdown"
 import { ScrollArea } from "@renderer/components/ui/scroll-area"
 import {
   Tooltip,
@@ -12,10 +11,11 @@ import { useAuthQuery } from "@renderer/hooks/common"
 import { apiClient } from "@renderer/lib/api-fetch"
 import { defineQuery } from "@renderer/lib/defineQuery"
 import type { FeedViewType } from "@renderer/lib/enum"
+import { parseMarkdown } from "@renderer/lib/parse-markdown"
 import { cn } from "@renderer/lib/utils"
 import { MarkAllButton } from "@renderer/modules/entry-column/mark-all-button"
 import type { FC } from "react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 type DailyView = Extract<
   FeedViewType,
@@ -153,6 +153,15 @@ const DailyReportContent: FC<{
   const [markAllButtonRef, setMarkAllButtonRef] =
     useState<HTMLButtonElement | null>(null)
 
+  const [eleContent, setEleContent] = useState<JSX.Element>()
+  useEffect(() => {
+    if (content.data) {
+      parseMarkdown(content.data).then(({ content }) => {
+        setEleContent(content)
+      })
+    }
+  }, [content.data])
+
   return (
     <Card className="border-none bg-transparent">
       <CardHeader className="space-y-0 p-0">
@@ -164,14 +173,14 @@ const DailyReportContent: FC<{
           {content.isLoading ? (
             <LoadingCircle size="large" className="mt-8 text-center" />
           ) : (
-            content.data && (
-              <Markdown className="prose-sm mt-4 px-6 prose-p:my-1 prose-ul:my-1">
-                {content.data}
-              </Markdown>
+            eleContent && (
+              <div className="prose-sm mt-4 px-6 prose-p:my-1 prose-ul:my-1">
+                {eleContent}
+              </div>
             )
           )}
         </ScrollArea.ScrollArea>
-        {content.data && (
+        {eleContent && (
           <button
             type="button"
             onClick={() => {