From 3e0c8157a67d90cf347e6bde8671280aa12670c8 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Sun, 18 Jun 2023 11:00:44 +0800
Subject: [PATCH] feat: to top

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/app/notes/[id]/page.tsx                   |  5 ++++
 src/components/ui/fab/BackToTopFAB.tsx        |  2 +-
 src/components/widgets/toc/Toc.tsx            | 27 +++++++++++++++----
 src/components/widgets/toc/TocAutoScroll.tsx  |  6 ++---
 src/components/widgets/toc/TocItem.tsx        | 12 ++++-----
 src/components/widgets/toc/escapeSelector.tsx |  3 +++
 src/utils/{spring.ts => scroller.ts}          | 12 +++++----
 7 files changed, 45 insertions(+), 22 deletions(-)
 create mode 100644 src/components/widgets/toc/escapeSelector.tsx
 rename src/utils/{spring.ts => scroller.ts} (81%)

diff --git a/src/app/notes/[id]/page.tsx b/src/app/notes/[id]/page.tsx
index a6032091b5..b61372a4e7 100644
--- a/src/app/notes/[id]/page.tsx
+++ b/src/app/notes/[id]/page.tsx
@@ -25,6 +25,7 @@ import { MarkdownImageRecordProvider } from '~/providers/article/markdown-image-
 import { useSetCurrentNoteId } from '~/providers/note/current-note-id-provider'
 import { NoteLayoutRightSidePortal } from '~/providers/note/right-side-provider'
 import { parseDate } from '~/utils/datetime'
+import { springScrollToTop } from '~/utils/scroller'
 
 import styles from './page.module.css'
 
@@ -162,5 +163,9 @@ const Markdownrenderers: { [name: string]: Partial<MarkdownToJSX.Rule> } = {
 
 export default PageDataHolder(PageImpl, () => {
   const { id } = useParams() as { id: string }
+
+  useEffect(() => {
+    springScrollToTop()
+  }, [id])
   return useNoteByNidQuery(id)
 })
diff --git a/src/components/ui/fab/BackToTopFAB.tsx b/src/components/ui/fab/BackToTopFAB.tsx
index 628e9f8395..3113871397 100644
--- a/src/components/ui/fab/BackToTopFAB.tsx
+++ b/src/components/ui/fab/BackToTopFAB.tsx
@@ -2,7 +2,7 @@
 
 import { useViewport } from '~/atoms'
 import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider'
-import { springScrollToTop } from '~/utils/spring'
+import { springScrollToTop } from '~/utils/scroller'
 
 import { FABBase } from './FABContainer'
 
diff --git a/src/components/widgets/toc/Toc.tsx b/src/components/widgets/toc/Toc.tsx
index 948ecbfc8f..af954e77f1 100644
--- a/src/components/widgets/toc/Toc.tsx
+++ b/src/components/widgets/toc/Toc.tsx
@@ -1,11 +1,13 @@
-import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { motion } from 'framer-motion'
+import { atom, useAtom } from 'jotai'
 import type { ITocItem } from './TocItem'
 
 import { RightToLeftTransitionView } from '~/components/ui/transition/RightToLeftTransitionView'
 import { throttle } from '~/lib/_'
 import { useArticleElement } from '~/providers/article/article-element-provider'
 import { clsxm } from '~/utils/helper'
+import { springScrollToElement } from '~/utils/scroller'
 
 import { TocItem } from './TocItem'
 
@@ -28,6 +30,7 @@ export const Toc: Component<TocProps> = ({ useAsWeight, className }) => {
       ...$article.querySelectorAll('h1,h2,h3,h4,h5,h6'),
     ] as HTMLHeadingElement[]
   }, [$article])
+
   const toc: ITocItem[] = useMemo(() => {
     return Array.from($headings).map((el, idx) => {
       const depth = +el.tagName.slice(1)
@@ -76,8 +79,18 @@ export const Toc: Component<TocProps> = ({ useAsWeight, className }) => {
     [toc],
   )
 
-  const activeId = useActiveId($headings)
+  const [activeId, setActiveId] = useActiveId($headings)
 
+  const handleScrollTo = useCallback(
+    (i: number, $el: HTMLElement | null, anchorId: string) => {
+      if ($el) {
+        springScrollToElement($el, -100).then(() => {
+          setActiveId(anchorId)
+        })
+      }
+    },
+    [],
+  )
   return (
     <aside className={clsxm('st-toc z-[3]', 'relative font-sans', className)}>
       <ul
@@ -92,6 +105,7 @@ export const Toc: Component<TocProps> = ({ useAsWeight, className }) => {
               isActive={heading.anchorId === activeId}
               key={heading.title}
               rootDepth={rootDepth}
+              onClick={handleScrollTo}
             />
           )
         })}
@@ -104,7 +118,7 @@ const MemoedItem = memo<{
   isActive: boolean
   heading: ITocItem
   rootDepth: number
-  onClick?: (i: number) => void
+  onClick?: (i: number, $el: HTMLElement | null, anchorId: string) => void
   // containerRef: any
 }>((props) => {
   const {
@@ -151,8 +165,10 @@ const MemoedItem = memo<{
 
 MemoedItem.displayName = 'MemoedItem'
 
+const tocActiveIdAtom = atom<string | null>(null)
+
 function useActiveId($headings: HTMLHeadingElement[]) {
-  const [activeId, setActiveId] = useState<string | null>()
+  const [activeId, setActiveId] = useAtom(tocActiveIdAtom)
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
@@ -177,5 +193,6 @@ function useActiveId($headings: HTMLHeadingElement[]) {
       observer.disconnect()
     }
   }, [$headings])
-  return activeId
+
+  return [activeId, setActiveId] as const
 }
diff --git a/src/components/widgets/toc/TocAutoScroll.tsx b/src/components/widgets/toc/TocAutoScroll.tsx
index 4e30bb1155..3615729cc6 100644
--- a/src/components/widgets/toc/TocAutoScroll.tsx
+++ b/src/components/widgets/toc/TocAutoScroll.tsx
@@ -2,6 +2,8 @@ import { useEffect } from 'react'
 
 import { useArticleElement } from '~/providers/article/article-element-provider'
 
+import { escapeSelector } from './escapeSelector'
+
 export const TocAutoScroll: Component = () => {
   const articleElement = useArticleElement()
 
@@ -22,7 +24,3 @@ export const TocAutoScroll: Component = () => {
 
   return null
 }
-
-function escapeSelector(selector: string) {
-  return selector.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, '\\$&')
-}
diff --git a/src/components/widgets/toc/TocItem.tsx b/src/components/widgets/toc/TocItem.tsx
index 06c938f9cc..7f5689d675 100644
--- a/src/components/widgets/toc/TocItem.tsx
+++ b/src/components/widgets/toc/TocItem.tsx
@@ -4,7 +4,8 @@ import type { FC, MouseEvent } from 'react'
 
 import { useArticleElement } from '~/providers/article/article-element-provider'
 import { clsxm } from '~/utils/helper'
-import { springScrollToElement } from '~/utils/spring'
+
+import { escapeSelector } from './escapeSelector'
 
 const styles = tv({
   base: clsxm(
@@ -30,7 +31,7 @@ export const TocItem: FC<{
   depth: number
   active: boolean
   rootDepth: number
-  onClick?: (i: number) => void
+  onClick?: (i: number, $el: HTMLElement | null, anchorId: string) => void
   index: number
   // containerRef?: RefObject<HTMLDivElement>
 }> = memo((props) => {
@@ -71,14 +72,11 @@ export const TocItem: FC<{
       onClick={useCallback(
         (e: MouseEvent) => {
           e.preventDefault()
-          onClick?.(index)
           const $el = $article?.querySelector(
-            `#${anchorId}`,
+            `#${escapeSelector(anchorId)}`,
           ) as any as HTMLElement
 
-          if ($el) {
-            springScrollToElement($el, -100)
-          }
+          onClick?.(index, $el, anchorId)
         },
         [onClick, index, $article, anchorId],
       )}
diff --git a/src/components/widgets/toc/escapeSelector.tsx b/src/components/widgets/toc/escapeSelector.tsx
new file mode 100644
index 0000000000..716bd20196
--- /dev/null
+++ b/src/components/widgets/toc/escapeSelector.tsx
@@ -0,0 +1,3 @@
+export function escapeSelector(selector: string) {
+  return selector.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, '\\$&')
+}
diff --git a/src/utils/spring.ts b/src/utils/scroller.ts
similarity index 81%
rename from src/utils/spring.ts
rename to src/utils/scroller.ts
index ac6de406c7..aa4129fecf 100644
--- a/src/utils/spring.ts
+++ b/src/utils/scroller.ts
@@ -7,29 +7,31 @@ import { microdampingPreset } from '~/constants/spring'
 export const springScrollTo = (y: number) => {
   const scrollTop =
     // FIXME latest version framer will ignore keyframes value `0`
-    (document.documentElement.scrollTop || document.body.scrollTop) + 1
+    document.documentElement.scrollTop || document.body.scrollTop
   const animation = animateValue({
-    keyframes: [scrollTop, y],
+    keyframes: [scrollTop + 1, y],
     autoplay: true,
     ...microdampingPreset,
+
     onUpdate(latest) {
-      console.log(latest, 'latest')
       if (latest <= 0) {
         animation.stop()
       }
       window.scrollTo(0, latest)
     },
   })
+  return animation
 }
+
 export const springScrollToTop = () => {
-  springScrollTo(0)
+  return springScrollTo(0)
 }
 
 export const springScrollToElement = (element: HTMLElement, delta = 40) => {
   const y = calculateElementTop(element)
 
   const to = y + delta
-  springScrollTo(to)
+  return springScrollTo(to)
 }
 
 const calculateElementTop = (el: HTMLElement) => {