From 94d47663b0d382d9b0ae3dfa2f6ee08c0a129134 Mon Sep 17 00:00:00 2001 From: Innei Date: Wed, 31 Jan 2024 14:29:33 +0800 Subject: [PATCH] fix: excalidraw theme Signed-off-by: Innei --- src/app/(app)/feed/route.tsx | 13 +++++++++++- src/components/ui/excalidraw/Excalidraw.tsx | 22 ++++++++++++++++++++- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/app/(app)/feed/route.tsx b/src/app/(app)/feed/route.tsx index 1d60921492..af86d26d56 100644 --- a/src/app/(app)/feed/route.tsx +++ b/src/app/(app)/feed/route.tsx @@ -155,7 +155,18 @@ ${ReactDOM.renderToString( }) } -const NotSupportRender = () =>
这个内容只能在原文中查看哦
+const NotSupportRender = () => ( +
+ 这个内容只能在原文中查看哦 +
+) const ALERT_BLOCKQUOTE_R = /^(> \[!(?NOTE|IMPORTANT|WARNING)\].*?)(?(?:\n *>.*?)*)(?=\n{2,}|$)/ diff --git a/src/components/ui/excalidraw/Excalidraw.tsx b/src/components/ui/excalidraw/Excalidraw.tsx index 68541cb089..c25ea1fd94 100644 --- 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 (
{ 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', + )} >