From de670975262c9a8d7f1f89d5796f36ded5207f72 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 18 Apr 2024 22:51:59 +0800
Subject: [PATCH] fix: storybook

Signed-off-by: Innei <i@innei.in>
---
 src/components/ui/code-highlighter/index.demo.tsx | 1 +
 src/components/ui/excalidraw/index.demo.tsx       | 7 ++++++-
 src/components/ui/markdown/index.demo.tsx         | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/code-highlighter/index.demo.tsx b/src/components/ui/code-highlighter/index.demo.tsx
index d7f47dc9c0..af7a870aa5 100644
--- a/src/components/ui/code-highlighter/index.demo.tsx
+++ b/src/components/ui/code-highlighter/index.demo.tsx
@@ -4,6 +4,7 @@ import type { DocumentComponent } from 'storybook/typings'
 import { ShikiHighLighter as Shiki } from './shiki/Shiki'
 
 export const ShikiHighLighter: DocumentComponent = () => {
+  return 'React 18 is not support this component, becuase of the `use` is only support in React 19'
   return (
     <Suspense>
       <Shiki
diff --git a/src/components/ui/excalidraw/index.demo.tsx b/src/components/ui/excalidraw/index.demo.tsx
index d4791adb03..e4409fa6be 100644
--- a/src/components/ui/excalidraw/index.demo.tsx
+++ b/src/components/ui/excalidraw/index.demo.tsx
@@ -1,7 +1,10 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ToastContainer } from 'react-toastify'
 import { ThemeProvider } from 'next-themes'
 import type { DocumentComponent } from 'storybook/typings'
 
+import { useRefValue } from '~/hooks/common/use-ref-value'
+
 import { ModalStackProvider } from '../modal'
 import demo from './demo.json'
 import { Excalidraw } from './Excalidraw'
@@ -12,7 +15,9 @@ export const Draw: DocumentComponent = () => {
       {/* <EventProvider key="viewportProvider" /> */}
       <ModalStackProvider>
         <main className="relative m-auto mt-6 max-w-[800px]">
-          <Excalidraw data={JSON.stringify(demo)} />
+          <QueryClientProvider client={useRefValue(() => new QueryClient())}>
+            <Excalidraw data={JSON.stringify(demo)} />
+          </QueryClientProvider>
         </main>
       </ModalStackProvider>
 
diff --git a/src/components/ui/markdown/index.demo.tsx b/src/components/ui/markdown/index.demo.tsx
index 44f92d9da3..9c3a06ddac 100644
--- a/src/components/ui/markdown/index.demo.tsx
+++ b/src/components/ui/markdown/index.demo.tsx
@@ -12,7 +12,7 @@ import { BlockLoading } from '~/components/modules/shared/BlockLoading'
 import { Mermaid } from '~/components/modules/shared/Mermaid'
 import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading'
 
-import { ShikiHighLighter } from '../code-highlighter/shiki/Shiki'
+import { HighLighterPrismCdn } from '../code-highlighter'
 // @ts-expect-error
 import customize from './customize.md?raw'
 import { Markdown } from './Markdown'
@@ -56,7 +56,7 @@ const CodeBlockRender = (props: {
         return <ReactComponentRender dls={props.content} />
       }
       default: {
-        return <ShikiHighLighter {...props} />
+        return <HighLighterPrismCdn {...props} />
       }
     }
   }, [props])