fix(toc): should focus when toc item clicked

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

Author: Innei

apps/renderer/src/components/ui/markdown/components/Toc.tsx

@@ -42,13 +42,19 @@ export interface ITocItem {
   $heading: HTMLHeadingElement
 }
 
+interface TocProps {
+  onItemClick?: (index: number, $el: HTMLElement | null, anchorId: string) => void
+}
+
 const WiderTocStyle = {
   width: 200,
 } satisfies React.CSSProperties
-export const Toc: Component = ({ className }) => {
+export const Toc: Component<TocProps> = ({ className, onItemClick }) => {
   const markdownElement = useContext(MarkdownRenderContainerRefContext)
   const { toc, rootDepth } = useTocItems(markdownElement)
-  const { currentScrollRange, handleScrollTo } = useScrollTracking(toc)
+  const { currentScrollRange, handleScrollTo } = useScrollTracking(toc, {
+    onItemClick,
+  })
 
   const renderContentElementPosition = useWrappedElementPosition()
   const renderContentElementSize = useWrappedElementSize()
@@ -269,7 +275,7 @@ const useTocItems = (markdownElement: HTMLElement | null) => {
   return { toc, rootDepth }
 }
 
-const useScrollTracking = (toc: ITocItem[]) => {
+const useScrollTracking = (toc: ITocItem[], options: Pick<TocProps, "onItemClick">) => {
   const scrollContainerElement = useScrollViewElement()
   const [currentScrollRange, setCurrentScrollRange] = useState([-1, 0] as [number, number])
   const { h } = useWrappedElementSize()
@@ -361,6 +367,7 @@ const useScrollTracking = (toc: ITocItem[]) => {
 
   const handleScrollTo = useEventCallback(
     (i: number, $el: HTMLElement | null, _anchorId: string) => {
+      options.onItemClick?.(i, $el, _anchorId)
       if ($el) {
         const handle = () => {
           springScrollToElement($el, -100, scrollContainerElement!).then(() => {

apps/renderer/src/modules/entry-content/hooks.tsx

@@ -0,0 +1,16 @@
+import { EventBus } from "@follow/utils/event-bus"
+import { useEffect } from "react"
+
+declare module "@follow/utils/event-bus" {
+  export interface CustomEvent {
+    FOCUS_ENTRY_CONTAINER: never
+  }
+}
+
+export const useFocusEntryContainerSubscriptions = (ref: React.RefObject<HTMLDivElement>) => {
+  useEffect(() => {
+    return EventBus.subscribe("FOCUS_ENTRY_CONTAINER", () => {
+      ref.current?.focus()
+    })
+  }, [ref])
+}

apps/renderer/src/modules/entry-content/index.tsx

@@ -6,6 +6,7 @@ import { useTitle } from "@follow/hooks"
 import type { FeedModel, InboxModel } from "@follow/models/types"
 import { IN_ELECTRON } from "@follow/shared/constants"
 import { stopPropagation } from "@follow/utils/dom"
+import { EventBus } from "@follow/utils/event-bus"
 import { cn } from "@follow/utils/utils"
 import type { FallbackRender } from "@sentry/react"
 import { ErrorBoundary } from "@sentry/react"
@@ -51,6 +52,7 @@ import { EntryTitle } from "./components/EntryTitle"
 import { SourceContentPanel } from "./components/SourceContentView"
 import { SupportCreator } from "./components/SupportCreator"
 import { EntryHeader } from "./header"
+import { useFocusEntryContainerSubscriptions } from "./hooks"
 import { EntryContentLoading } from "./loading"
 
 export interface EntryContentClassNames {
@@ -129,6 +131,7 @@ export const EntryContentRender: Component<{
     () => (isPeekModal ? undefined : <ContainerToc key={entryId} />),
     [entryId, isPeekModal],
   )
+  useFocusEntryContainerSubscriptions(scrollerRef)
   const stableRenderStyle = useMemo(
     () =>
       readerFontFamily
@@ -457,11 +460,15 @@ const RenderError: FallbackRender = ({ error }) => {
 
 const ContainerToc: FC = memo(() => {
   const wrappedElement = useWrappedElement()
+
   return (
     <RootPortal to={wrappedElement!}>
       <div className="group absolute right-[-130px] top-0 h-full w-[100px]">
         <div className="sticky top-0">
           <Toc
+            onItemClick={() => {
+              EventBus.dispatch("FOCUS_ENTRY_CONTAINER")
+            }}
             className={cn(
               "flex flex-col items-end animate-in fade-in-0 slide-in-from-bottom-12 easing-spring spring-soft",
               "max-h-[calc(100vh-100px)] overflow-auto scrollbar-none",

packages/utils/src/event-bus.ts

@@ -13,7 +13,9 @@ class EventBusEvent extends Event {
 }
 type AnyObject = Record<string, any>
 class EventBusStatic<E extends AnyObject> {
-  dispatch<T extends keyof E>(event: T, data: E[T]) {
+  dispatch<T extends keyof E>(event: T, data: E[T]): void
+  dispatch<T extends keyof E>(event: T): void
+  dispatch<T extends keyof E>(event: T, data?: E[T]) {
     window.dispatchEvent(new EventBusEvent(event as string, data))
   }