From cb40ff62283ebd29a3668f783479fab783fcb17a Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Mon, 18 Mar 2024 16:53:54 +0800
Subject: [PATCH] fix: tab content cls

Signed-off-by: Innei <i@innei.in>
---
 src/components/modules/shared/CodeBlock.tsx   | 18 +++++++++----
 .../code-highlighter/shiki/Shiki.module.css   | 12 ---------
 .../ui/code-highlighter/shiki/Shiki.tsx       |  4 +--
 src/components/ui/markdown/renderers/tabs.tsx | 26 +++++++++++--------
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/modules/shared/CodeBlock.tsx b/src/components/modules/shared/CodeBlock.tsx
index 4a117a0378..2bae2233a7 100644
--- a/src/components/modules/shared/CodeBlock.tsx
+++ b/src/components/modules/shared/CodeBlock.tsx
@@ -7,6 +7,7 @@ import type { ReactNode } from 'react'
 import { HighLighterPrismCdn } from '~/components/ui/code-highlighter'
 import { isSupportedShikiLang } from '~/components/ui/code-highlighter/shiki/utils'
 import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading'
+import { isClientSide } from '~/lib/env'
 
 import { BlockLoading } from './BlockLoading'
 
@@ -29,6 +30,8 @@ const ExcalidrawLazy = ({ data }: any) => {
     </Suspense>
   )
 }
+
+let shikiImport: ComponentType<any>
 export const CodeBlockRender = (props: {
   lang: string | undefined
   content: string
@@ -56,11 +59,16 @@ export const CodeBlockRender = (props: {
       default: {
         const lang = props.lang
         if (lang && isSupportedShikiLang(lang)) {
-          const ShikiHighLighter = dynamic(() =>
-            import('~/components/ui/code-highlighter/shiki/Shiki').then(
-              (mod) => mod.ShikiHighLighter,
-            ),
-          )
+          const ShikiHighLighter =
+            shikiImport ??
+            dynamic(() =>
+              import('~/components/ui/code-highlighter/shiki/Shiki').then(
+                (mod) => mod.ShikiHighLighter,
+              ),
+            )
+          if (isClientSide) {
+            shikiImport = ShikiHighLighter
+          }
           return <ShikiHighLighter {...props} />
         }
 
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.module.css b/src/components/ui/code-highlighter/shiki/Shiki.module.css
index 3ac8983791..cdc6e2cd04 100644
--- a/src/components/ui/code-highlighter/shiki/Shiki.module.css
+++ b/src/components/ui/code-highlighter/shiki/Shiki.module.css
@@ -16,18 +16,6 @@
       counter-increment: step 0;
     }
 
-    code .line::before {
-      content: counter(step);
-      counter-increment: step;
-      width: 1.5rem;
-      margin: 0 6px;
-      display: inline-block;
-      text-align: right;
-      opacity: 0.3;
-      padding-right: 6px;
-      /* border-right: 1px solid currentColor; */
-    }
-
     .shiki,
     code {
       @apply !bg-transparent;
diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx
index 8cfcb4ca59..c58a05847d 100644
--- a/src/components/ui/code-highlighter/shiki/Shiki.tsx
+++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -165,8 +165,8 @@ export const ShikiHighLighter: FC<Props> = (props) => {
             }
           >
             {renderedHtml ? undefined : (
-              <pre className="bg-transparent">
-                <code className="px-4">{value}</code>
+              <pre className="bg-transparent px-4">
+                <code className="!px-4">{value}</code>
               </pre>
             )}
           </div>
diff --git a/src/components/ui/markdown/renderers/tabs.tsx b/src/components/ui/markdown/renderers/tabs.tsx
index 36048fe1c5..a9638d8af1 100644
--- a/src/components/ui/markdown/renderers/tabs.tsx
+++ b/src/components/ui/markdown/renderers/tabs.tsx
@@ -7,6 +7,7 @@ import {
   useId,
   useState,
 } from 'react'
+import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import { m } from 'framer-motion'
 import type { FC, PropsWithChildren } from 'react'
 
@@ -19,20 +20,23 @@ export const Tabs: FC<PropsWithChildren> = ({ children }) => {
   const [tabs, setTabs] = useState<string[]>([])
   const [activeTab, setActiveTab] = useState<string | null>(null)
   const id = useId()
+
+  useEffect(() => {
+    if (!tabs.length) return
+    if (!activeTab) {
+      setActiveTab(tabs[0])
+    }
+  }, [tabs.length])
   return (
     <TabActionContext.Provider
       value={{
-        addTab: useCallback(
-          (label) => {
-            setTabs((tabs) => [...tabs, label])
+        addTab: useCallback((label) => {
+          setTabs((tabs) => [...tabs, label])
 
-            if (!activeTab) setActiveTab(label)
-            return () => {
-              setTabs((tabs) => tabs.filter((tab) => tab !== label))
-            }
-          },
-          [activeTab],
-        ),
+          return () => {
+            setTabs((tabs) => tabs.filter((tab) => tab !== label))
+          }
+        }, []),
       }}
     >
       <RadixTabs.Root value={activeTab || ''} onValueChange={setActiveTab}>
@@ -72,7 +76,7 @@ export const Tab: FC<{
   children: React.ReactNode
 }> = ({ label, children }) => {
   const { addTab } = useContext(TabActionContext)
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     return addTab(label)
   }, [])