From ee1894c2d0c420ecf0e63a6dd6bafda57a25a6e3 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 4 Sep 2024 20:00:56 +0800
Subject: [PATCH] fix: toc not responsive in dev mode

Signed-off-by: Innei <i@innei.in>
---
 src/renderer/src/components/ui/markdown/Markdown.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/ui/markdown/Markdown.tsx b/src/renderer/src/components/ui/markdown/Markdown.tsx
index c3cdb57947..afd3d52cab 100644
--- a/src/renderer/src/components/ui/markdown/Markdown.tsx
+++ b/src/renderer/src/components/ui/markdown/Markdown.tsx
@@ -47,9 +47,15 @@ export const HTML = <A extends keyof JSX.IntrinsicElements = "div">(
 ) => {
   const { children, renderInlineStyle, as = "div", accessory, ...rest } = props
   const [remarkOptions, setRemarkOptions] = useState({ renderInlineStyle })
+  const [shouldForceReMountKey, setShouldForceReMountKey] = useState(0)
 
   useEffect(() => {
-    setRemarkOptions({ renderInlineStyle })
+    setRemarkOptions((options) => {
+      if (renderInlineStyle === options.renderInlineStyle) return options
+
+      setShouldForceReMountKey((key) => key + 1)
+      return { ...options, renderInlineStyle }
+    })
   }, [renderInlineStyle])
 
   const [refElement, setRefElement] = useState<HTMLElement | null>(null)
@@ -67,7 +73,7 @@ export const HTML = <A extends keyof JSX.IntrinsicElements = "div">(
   return (
     <MarkdownRenderContainerRefContext.Provider value={refElement}>
       {createElement(as, { ...rest, ref: setRefElement }, markdownElement)}
-      {accessory && <Fragment key={children}>{accessory}</Fragment>}
+      {accessory && <Fragment key={shouldForceReMountKey}>{accessory}</Fragment>}
     </MarkdownRenderContainerRefContext.Provider>
   )
 }