fix: Excalidraw render in ssr

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

package.json

@@ -26,7 +26,8 @@
     "prepare": "pnpm exec simple-git-hooks && test -f .env || cp .env.template .env",
     "start": "npm run dev",
     "prebuild": "rimraf .next || exit 0",
-    "dev": "cross-env NODE_ENV=development next dev -p 2323 --turbo",
+    "dev": "cross-env NODE_ENV=development next dev -p 2323",
+    "dev:turbo": "cross-env NODE_ENV=development next dev -p 2323 --turbo",
     "analyze": "cross-env NODE_ENV=production ANALYZE=true BUNDLE_ANALYZE=browser next build",
     "build": "cross-env NODE_ENV=production next build",
     "build:ci": "cross-env NODE_ENV=production CI=true next build",

src/components/modules/dashboard/post-editing/sidebar/index.tsx

@@ -1,3 +1,4 @@
+import { XLogEnable } from '../../crossbell/XLogEnabled'
 import { ImageDetailSection } from '../../writing/ImageDetailSection'
 import { MetaKeyValueEditSection } from '../../writing/MetaKeyValueEditSection'
 import { PresentComponentFab } from '../../writing/PresentComponentFab'
@@ -17,6 +18,7 @@ const Sidebar = () => {
       <TagsInput />
       <PostCombinedSwitch />
       <SummaryInput />
+      <XLogEnable />
       <PostImageSection />
       <PostMetaSection />
     </SidebarWrapper>

src/components/modules/shared/BlockLoading.tsx

@@ -0,0 +1,9 @@
+import type { FC, PropsWithChildren } from 'react'
+
+export const BlockLoading: FC<PropsWithChildren> = (props) => {
+  return (
+    <div className="flex h-[500px] items-center justify-center rounded-lg bg-slate-100 text-sm dark:bg-neutral-800">
+      {props.children}
+    </div>
+  )
+}

src/components/modules/shared/CodeBlock.tsx

@@ -1,37 +1,55 @@
-import { Suspense, useMemo } from 'react'
+import { lazy, Suspense, useMemo, useState } from 'react'
+import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import dynamic from 'next/dynamic'
+import type { ReactNode } from 'react'
 
-const Mermaid = dynamic(() => import('./Mermaid').then((mod) => mod.Mermaid))
-const HighLighter = dynamic(() =>
-  import('~/components/ui/code-highlighter/CodeHighlighter').then(
-    (mod) => mod.HighLighter,
-  ),
-)
-const Excalidraw = dynamic(() =>
-  import('~/components/ui/excalidraw').then((mod) => mod.Excalidraw),
-)
+import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading'
+
+import { BlockLoading } from './BlockLoading'
+
+const ExcalidrawLazy = ({ data }: any) => {
+  const [Excalidraw, setComponent] = useState(null as ReactNode)
+
+  useIsomorphicLayoutEffect(() => {
+    const Component = lazy(() =>
+      import('~/components/ui/excalidraw').then((mod) => ({
+        default: mod.Excalidraw,
+      })),
+    )
+
+    setComponent(<Component data={JSON.parse(data)} />)
+  }, [data])
+
+  return (
+    <Suspense fallback={<ExcalidrawLoading />}>
+      {Excalidraw ?? <ExcalidrawLoading />}
+    </Suspense>
+  )
+}
 export const CodeBlock = (props: {
   lang: string | undefined
   content: string
 }) => {
   const Content = useMemo(() => {
     if (props.lang === 'mermaid') {
+      const Mermaid = dynamic(() =>
+        import('./Mermaid').then((mod) => mod.Mermaid),
+      )
       return <Mermaid {...props} />
     } else if (props.lang === 'excalidraw') {
-      return <Excalidraw data={JSON.parse(props.content)} />
+      return <ExcalidrawLazy data={props.content} />
     } else {
+      const HighLighter = dynamic(() =>
+        import('~/components/ui/code-highlighter/CodeHighlighter').then(
+          (mod) => mod.HighLighter,
+        ),
+      )
       return <HighLighter {...props} />
     }
   }, [props])
 
   return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-[50px] items-center justify-center rounded-lg bg-slate-100 text-sm dark:bg-neutral-800">
-          CodeBlock Loading...
-        </div>
-      }
-    >
+    <Suspense fallback={<BlockLoading>CodeBlock Loading...</BlockLoading>}>
       {Content}
     </Suspense>
   )

src/components/modules/shared/Mermaid.tsx

@@ -5,6 +5,7 @@ import { useIsDark } from '~/hooks/common/use-is-dark'
 import { useWrappedElementSize } from '~/providers/shared/WrappedElementProvider'
 
 import { FixedZoomedImage } from '../../ui/image'
+import { BlockLoading } from './BlockLoading'
 
 export const Mermaid: FC<{
   content: string
@@ -80,9 +81,7 @@ export const Mermaid: FC<{
   const imgSrc = `data:image/svg+xml;base64,${base64EncodedString}`
 
   return loading ? (
-    <div className="flex min-h-[50px] items-center justify-center rounded-lg bg-slate-100 text-sm dark:bg-neutral-800">
-      Mermaid Loading...
-    </div>
+    <BlockLoading>Mermaid Loading...</BlockLoading>
   ) : svg ? (
     <div>
       <FixedZoomedImage

src/components/ui/excalidraw/Excalidraw.tsx

@@ -20,6 +20,7 @@ export const Excalidraw: FC<{
   const excalidrawAPIRef = React.useRef<ExcalidrawImperativeAPI>()
   const modal = useModalStack()
   const isMobile = useIsMobile()
+
   return (
     <div className="relative h-[500px] w-full">
       <Board
@@ -77,7 +78,7 @@ const SvgPreview: FC<{
 }> = ({ svgElement }) => {
   return (
     <div
-      className="relative h-[80vh] w-full overflow-auto [&>svg]:max-w-full"
+      className="relative w-full overflow-auto [&>svg]:max-w-full"
       dangerouslySetInnerHTML={{
         __html: svgElement.outerHTML,
       }}

src/components/ui/excalidraw/ExcalidrawLoading.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import { BlockLoading } from '~/components/modules/shared/BlockLoading'
+
+export const ExcalidrawLoading = () => {
+  return <BlockLoading>Excalidraw Loading...</BlockLoading>
+}