fix: excalidraw theme

Signed-off-by: Innei <i@innei.in>
Innei · Jan 31, 2024 · 94d4766 · 94d4766
1 parent 0ab7f0d
commit 94d4766
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/src/app/(app)/feed/route.tsx b/src/app/(app)/feed/route.tsx
@@ -155,7 +155,18 @@ ${ReactDOM.renderToString(
   })
 }
 
-const NotSupportRender = () => <div>这个内容只能在原文中查看哦</div>
+const NotSupportRender = () => (
+  <blockquote
+    style={{
+      textAlign: 'center',
+      margin: '1rem 0',
+      backgroundColor: '#f5f5f5',
+      borderRadius: '0.5rem',
+    }}
+  >
+    <em>这个内容只能在原文中查看哦</em>
+  </blockquote>
+)
 
 const ALERT_BLOCKQUOTE_R =
   /^(> \[!(?<type>NOTE|IMPORTANT|WARNING)\].*?)(?<body>(?:\n *>.*?)*)(?=\n{2,}|$)/

diff --git a/src/components/ui/excalidraw/Excalidraw.tsx b/src/components/ui/excalidraw/Excalidraw.tsx
@@ -9,6 +9,8 @@ import {
 } from '@excalidraw/excalidraw'
 
 import { useIsMobile } from '~/atoms'
+import { useIsDark } from '~/hooks/common/use-is-dark'
+import { clsxm } from '~/lib/helper'
 import { toast } from '~/lib/toast'
 
 import { MotionButtonBase } from '../button'
@@ -21,11 +23,14 @@ export const Excalidraw: FC<{
   const modal = useModalStack()
   const isMobile = useIsMobile()
 
+  const isDarkMode = useIsDark()
   return (
     <div className="relative h-[500px] w-full">
       <Board
+        theme={isDarkMode ? 'dark' : 'light'}
         initialData={data}
         zenModeEnabled
+        detectScroll={false}
         viewModeEnabled
         excalidrawAPI={(api) => {
           excalidrawAPIRef.current = api
@@ -54,9 +59,20 @@ export const Excalidraw: FC<{
 
             window.open(window.URL.createObjectURL(blob))
           } else {
+            const windowRect = {
+              w: window.innerWidth,
+              h: window.innerHeight,
+            }
+
             const $svg = await exportToSvg({
               elements,
               files: null,
+              maxWidthOrHeight: Math.min(
+                windowRect.h * 0.7,
+                windowRect.w * 0.9,
+              ),
+              appState: { theme: isDarkMode ? 'dark' : 'light' },
+              exportPadding: 12,
             })
 
             modal.present({
@@ -65,7 +81,11 @@ export const Excalidraw: FC<{
             })
           }
         }}
-        className="absolute bottom-2 right-2 z-10 box-content flex h-5 w-5 rounded-md border border-zinc-200 p-2 text-zinc-600 center"
+        className={clsxm(
+          'absolute bottom-2 right-2 z-10 box-content flex h-5 w-5 rounded-md border p-2 center',
+          'border-zinc-200 text-zinc-600',
+          'dark:border-neutral-800 dark:text-zinc-500',
+        )}
       >
         <i className="icon-[mingcute--external-link-line]" />
       </MotionButtonBase>