feat: md 拓展 link

Author: coderz-w

src/components/ui/markdown/Markdown.tsx

@@ -2,7 +2,7 @@
 
 import { clsx } from 'clsx';
 import type { MarkdownToJSX } from 'markdown-to-jsx';
-import { compiler } from 'markdown-to-jsx';
+import { compiler, sanitizeUrl } from 'markdown-to-jsx';
 import Script from 'next/script';
 import type React from 'react';
 import type { FC, PropsWithChildren } from 'react';
@@ -11,6 +11,7 @@ import { memo, Suspense, useMemo, useRef } from 'react';
 import { MParagraph } from './renderbers/paragraph';
 import { MHeader } from './renderbers/heading';
 import { MarkdownImage } from './renderbers/images';
+import { MLink } from './renderbers/Mlink';
 
 export interface MdProps {
   value?: string;
@@ -71,6 +72,26 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren &
               );
             },
           },
+          link: {
+            react(node, output, state) {
+              const { target, title } = node;
+
+              let realText = '';
+
+              for (const child of node.content) {
+                if (child.type === 'text') {
+                  realText += child.content;
+                }
+              }
+
+              return (
+                <MLink href={sanitizeUrl(target)!} title={title} key={state?.key} text={realText}>
+                  {output(node.content, state!)}
+                </MLink>
+              );
+            },
+          },
+
           ...extendsRules,
           ...renderers,
         },

src/components/ui/markdown/renderbers/Mlink.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import type { FC, ReactNode } from 'react';
+import { memo, useCallback } from 'react';
+
+import { FloatPopover } from '@/components/ui/float-popover';
+
+export const MLink: FC<{
+  href: string;
+  title?: string;
+  children?: ReactNode;
+  text?: string;
+  popper?: boolean;
+}> = memo(({ href, children, title, popper = true }) => {
+  const router = useRouter();
+
+  const handleRedirect = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+      const toUrlParser = new URL(href);
+
+      e.preventDefault();
+
+      window.open(toUrlParser.pathname);
+    },
+    [href, router],
+  );
+
+  const el = (
+    <span className="inline items-center font-sans px-1 cursor-pointer">
+      <span
+        className=" relative before:content-[''] before:absolute before:bottom-[-2px] before:w-[0px] hover:before:w-[100%] before:h-[2px] before:bg-[var(--accent-color)] before:transition-all before:duration-300"
+        onClick={handleRedirect}
+        title={title}
+        rel="noreferrer"
+      >
+        {children}
+      </span>
+
+      <i className="i-mingcute-arrow-right-up-line ml-[1px] translate-y-[2px] opacity-70" />
+    </span>
+  );
+  if (!popper) return el;
+
+  return (
+    <FloatPopover as="span" wrapperClassName="!inline" type="tooltip" triggerElement={el}>
+      <a href={href} target="_blank" rel="noreferrer">
+        <span>{href}</span>
+      </a>
+    </FloatPopover>
+  );
+});

src/styles/mdContainer.css

@@ -21,8 +21,8 @@
 .mdImg span {
   display: inline-block !important;
   margin-left: 0 !important;
-  margin-right: 0 auto; 
-  padding: 0; 
+  margin-right: 0 auto;
+  padding: 0;
   text-align: center;
 }