feat: 拓展md header

Author: coderz-w

src/app/(app)/notes/[nid]/page.tsx

@@ -29,6 +29,7 @@ const PageTransition = ({ children }: PropsWithChildren) => {
         opacity: 1,
         transition: { duration: 0.5, type: 'spring', damping: 20, stiffness: 200 },
       }}
+      className=" min-w-0"
     >
       {children}
     </m.div>

src/app/(app)/notes/[nid]/test.md

@@ -3,6 +3,7 @@
 # 结构
 
 整个博客，不仅仅由 yyblog 组成，还有 ybg-cli 脚手架，用于自动创建删除文章以及编译文章。
+![Minion](https://octodex.github.com/images/minion.png)
 
 - **yyblog**
 
@@ -20,6 +21,12 @@
 
 采用`Nextjs`+`Typescript`+`Tailwindw`为主要技术。
 
+<details>
+  <summary>点击展开更多信息</summary>
+  这是详细的内容，可以在点击时展开。
+</details>
+
+
 效仿 Hexo 采用纯前端，文章编写删除编译都在本地运行，对前端工程师更友好。
 Nextjs 同时也支持全栈开发。简单的 sql 语句也能够对文章进行增删改查。
 

src/components/ui/markdown/Markdown.tsx

@@ -9,6 +9,7 @@ import type { FC, PropsWithChildren } from 'react';
 import { memo, Suspense, useMemo, useRef } from 'react';
 
 import { MParagraph } from './renderbers/paragraph';
+import { MHeader } from './renderbers/heading';
 
 export interface MdProps {
   value?: string;
@@ -59,11 +60,19 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren &
           ...overrides,
         },
         extendsRules: {
+          heading: {
+            react(node, output, state) {
+              return (
+                <MHeader id={node.id} level={node.level} key={state?.key}>
+                  {output(node.content, state!)}
+                </MHeader>
+              );
+            },
+          },
           ...extendsRules,
           ...renderers,
         },
         additionalParserRules: {
-          // Additional parser rules can be defined here
           ...additionalParserRules,
         },
         ...rest,

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

@@ -0,0 +1,50 @@
+import type { DOMAttributes } from 'react';
+import { createElement, useId } from 'react';
+
+import useIsClient from '@/hooks/common/use-is-client';
+import { springScrollToElement } from '@/lib/scroller';
+
+interface HeadingProps {
+  id: string;
+  className?: string;
+  children: React.ReactNode;
+  level: number;
+}
+
+export const MHeader = (props: HeadingProps) => {
+  const { children, id, level } = props;
+
+  const rid = useId();
+
+  const isClient = useIsClient();
+
+  const nextId = `${rid}${id}`;
+
+  return createElement<DOMAttributes<HTMLHeadingElement>, HTMLHeadingElement>(
+    `h${level}`,
+    {
+      id: nextId,
+      className: 'group flex items-center',
+
+      'data-markdown-heading': true,
+    } as any,
+    null,
+    <>
+      <span>{children}</span>
+      {isClient && (
+        <span
+          className="center ml-2 inline-flex cursor-pointer select-none text-accent opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            const { state } = history;
+            history.replaceState(state, '', `#${nextId}`);
+            springScrollToElement(document.getElementById(nextId)!, -100);
+          }}
+        >
+          <i className="i-mingcute-hashtag-line" />
+        </span>
+      )}
+    </>,
+  );
+};

src/lib/scroller.ts

@@ -0,0 +1,65 @@
+'use client';
+
+import type { Spring } from 'framer-motion';
+import { animateValue } from 'framer-motion';
+
+const spring: Spring = {
+  type: 'spring',
+  stiffness: 1000,
+  damping: 250,
+};
+
+export const springScrollTo = (y: number) => {
+  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+
+  const stopSpringScrollHandler = () => {
+    animation.stop();
+  };
+  const animation = animateValue({
+    keyframes: [scrollTop + 1, y],
+    autoplay: true,
+    ...spring,
+    onPlay() {
+      window.addEventListener('wheel', stopSpringScrollHandler);
+      window.addEventListener('touchmove', stopSpringScrollHandler);
+    },
+
+    onUpdate(latest) {
+      if (latest <= 0) {
+        animation.stop();
+      }
+
+      window.scrollTo(0, latest);
+    },
+  });
+
+  animation.then(() => {
+    window.removeEventListener('wheel', stopSpringScrollHandler);
+    window.removeEventListener('touchmove', stopSpringScrollHandler);
+  });
+
+  return animation;
+};
+
+export const springScrollToTop = () => {
+  return springScrollTo(0);
+};
+
+export const springScrollToElement = (element: HTMLElement, delta = 40) => {
+  const y = calculateElementTop(element);
+
+  const to = y + delta;
+
+  return springScrollTo(to);
+};
+
+const calculateElementTop = (el: HTMLElement) => {
+  let top = 0;
+
+  while (el) {
+    top += el.offsetTop;
+    el = el.offsetParent as HTMLElement;
+  }
+
+  return top;
+};