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
  }