fix: toc highlight

Signed-off-by: Innei <i@innei.in>

src/app/notes/[id]/loading.tsx

@@ -1,3 +1,3 @@
-import { Loading } from '~/components/ui/loading'
+import NoteLoading from '../loading'
 
-export default () => <Loading useDefaultLoadingText />
+export default () => <NoteLoading />

src/app/notes/loading.tsx

@@ -0,0 +1,5 @@
+import { Loading } from '~/components/ui/loading'
+
+export default function NoteLoading() {
+  return <Loading useDefaultLoadingText className="h-[80vh]" />
+}

src/app/notes/redirect.tsx

@@ -3,10 +3,10 @@
 import { useLayoutEffect } from 'react'
 import { useRouter } from 'next/navigation'
 
-import { Paper } from '~/components/layout/container/Paper'
-import { Loading } from '~/components/ui/loading'
 import { routeBuilder, Routes } from '~/lib/route-builder'
 
+import NoteLoading from './loading'
+
 export default function NodeRedirect({ nid }: { nid: number }) {
   const router = useRouter()
   useLayoutEffect(() => {
@@ -16,9 +16,5 @@ export default function NodeRedirect({ nid }: { nid: number }) {
       }),
     )
   }, [nid])
-  return (
-    <Paper>
-      <Loading useDefaultLoadingText />
-    </Paper>
-  )
+  return <NoteLoading />
 }

src/components/layout/header/internal/Activity.tsx

@@ -117,7 +117,7 @@ export const Activity = memo(() => {
   const { processName, media } = activity
   const debounceProcess = useDebounceValue(processName, 800)
 
-  if (!appLabels[debounceProcess]) {
+  if (debounceProcess && !appLabels[debounceProcess]) {
     console.log('Not collected process name: ', debounceProcess)
   }
 

src/components/widgets/shared/WithArticleSelectionAction.tsx

@@ -5,6 +5,7 @@ import { AnimatePresence, m } from 'framer-motion'
 import { useIsMobile } from '~/atoms'
 import { MotionButtonBase } from '~/components/ui/button'
 import { DividerVertical } from '~/components/ui/divider'
+import { DOMCustomEvents } from '~/constants/event'
 import { useIsClient } from '~/hooks/common/use-is-client'
 import { stopPropagation } from '~/lib/dom'
 import { useModalStack } from '~/providers/root/modal-stack-provider'
@@ -44,6 +45,13 @@ export const WithArticleSelectionAction: Component<{
   const isClient = useIsClient()
   const { present } = useModalStack()
 
+  useEffect(() => {
+    // wait for toc listener to be registered
+    setTimeout(() => {
+      document.dispatchEvent(new CustomEvent(DOMCustomEvents.RefreshToc))
+    }, 1000)
+  }, [])
+
   if (isMobile || !isClient) return children
   return (
     <div

src/components/widgets/toc/TocAside.tsx

@@ -2,12 +2,15 @@
 
 import React, {
   forwardRef,
+  startTransition,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
 } from 'react'
+import { useForceUpdate } from 'framer-motion'
 
+import { DOMCustomEvents } from '~/constants/event'
 import { throttle } from '~/lib/_'
 import { clsxm } from '~/lib/helper'
 import { useWrappedElement } from '~/providers/shared/WrappedElementProvider'
@@ -37,6 +40,20 @@ export const TocAside = forwardRef<
     const containerRef = useRef<HTMLUListElement>(null)
     const $article = useWrappedElement()
 
+    const [forceUpdate, updated] = useForceUpdate()
+
+    useEffect(() => {
+      const handler = () => {
+        startTransition(() => {
+          forceUpdate()
+        })
+      }
+      document.addEventListener(DOMCustomEvents.RefreshToc, handler)
+      return () => {
+        document.removeEventListener(DOMCustomEvents.RefreshToc, handler)
+      }
+    }, [])
+
     useImperativeHandle(ref, () => ({
       getContainer: () => containerRef.current,
     }))
@@ -48,11 +65,10 @@ export const TocAside = forwardRef<
       if (!$article) {
         return []
       }
-
       return [
         ...$article.querySelectorAll('h1,h2,h3,h4,h5,h6'),
       ] as HTMLHeadingElement[]
-    }, [$article])
+    }, [$article, updated])
 
     useEffect(() => {
       const setMaxWidth = throttle(() => {

src/components/widgets/toc/TocTree.tsx

@@ -43,10 +43,6 @@ function useActiveId($headings: HTMLHeadingElement[]) {
       observer.observe($heading)
     })
     return () => {
-      $headings.forEach(($heading) => {
-        observer.unobserve($heading)
-      })
-
       observer.disconnect()
     }
   }, [$headings])

src/constants/event.ts

@@ -0,0 +1,3 @@
+export const enum DOMCustomEvents {
+  RefreshToc = 'refresh-toc',
+}

src/socket/handler.ts

@@ -20,6 +20,7 @@ import {
   IcTwotoneSignpost,
   MdiLightbulbOn20,
 } from '~/components/icons/menu-collection'
+import { DOMCustomEvents } from '~/constants/event'
 import { TrackerAction } from '~/constants/tracker'
 import { isDev } from '~/lib/env'
 import { routeBuilder, Routes } from '~/lib/route-builder'
@@ -64,15 +65,25 @@ export const eventHandler = (
 
     case EventTypes.POST_UPDATE: {
       const post = data as PostModel
-      if (getGlobalCurrentPostData()?.id === post.id) {
-        setGlobalCurrentPostData((draft) => {
-          const nextPost = { ...data }
-          Reflect.deleteProperty(nextPost, 'category')
-          Object.assign(draft, nextPost)
-        })
-        toast('文章已更新')
-        trackerRealtimeEvent()
+      const currentData = getGlobalCurrentPostData()
+
+      if (!currentData) break
+      if (currentData.id !== post.id) {
+        break
       }
+
+      setGlobalCurrentPostData((draft) => {
+        const nextPost = { ...data }
+        Reflect.deleteProperty(nextPost, 'category')
+        Object.assign(draft, nextPost)
+      })
+      toast('文章已更新')
+      trackerRealtimeEvent()
+
+      if (currentData.text !== post.text) {
+        document.dispatchEvent(new CustomEvent(DOMCustomEvents.RefreshToc))
+      }
+
       break
     }
 
@@ -95,15 +106,25 @@ export const eventHandler = (
       break
     }
 
-    case 'NOTE_UPDATE': {
+    case EventTypes.NOTE_UPDATE: {
       const note = data as NoteModel
-      if (getCurrentNoteData()?.data.id === note.id) {
-        setCurrentNoteData((draft) => {
-          Object.assign(draft.data, note)
-        })
-        toast('手记已更新')
-        trackerRealtimeEvent()
+      const currentData = getCurrentNoteData()?.data
+
+      if (!currentData) break
+      if (currentData.id !== note.id) {
+        break
       }
+
+      setCurrentNoteData((draft) => {
+        Object.assign(draft.data, note)
+      })
+      toast('手记已更新')
+      trackerRealtimeEvent()
+
+      if (currentData.text !== note.text) {
+        document.dispatchEvent(new CustomEvent(DOMCustomEvents.RefreshToc))
+      }
+
       break
     }