fix: excalidraw preview button logic in mobile

Signed-off-by: Innei <i@innei.in>
Innei · Feb 4, 2024 · 06e8284 · 06e8284
1 parent 2504d2d
commit 06e8284
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 41 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -12,7 +12,7 @@ const isProd = process.env.NODE_ENV === 'production'
 // eslint-disable-next-line import/no-mutable-exports
 let nextConfig = {
   reactStrictMode: true,
-  productionBrowserSourceMaps: true,
+  productionBrowserSourceMaps: false,
   output: 'standalone',
   assetPrefix: isProd ? env.ASSETPREFIX || undefined : undefined,
   compiler: {

diff --git a/src/components/ui/excalidraw/Excalidraw.tsx b/src/components/ui/excalidraw/Excalidraw.tsx
@@ -8,13 +8,8 @@ import type {
   ExcalidrawImperativeAPI,
 } from '@excalidraw/excalidraw/types/types'
 import type { Delta } from 'jsondiffpatch'
-import type { FC } from 'react'
 
-import {
-  Excalidraw as Board,
-  exportToBlob,
-  exportToSvg,
-} from '@excalidraw/excalidraw'
+import { Excalidraw as Board, exportToBlob } from '@excalidraw/excalidraw'
 
 import { useIsMobile } from '~/atoms'
 import { API_URL } from '~/constants/env'
@@ -203,47 +198,40 @@ const ExcalidrawImpl = forwardRef<InternelExcalidrawRefObject, ExcalidrawProps>(
 
         {viewModeEnabled && showExtendButton && (
           <MotionButtonBase
-            onClick={async () => {
+            onClick={() => {
               if (!excalidrawAPIRef.current) {
                 toast.error('Excalidraw API not ready')
                 return
               }
 
               const elements = excalidrawAPIRef.current.getSceneElements()
               if (isMobile) {
-                const blob = await exportToBlob({
+                const win = window.open()
+                const blob = exportToBlob({
                   elements,
                   files: null,
                 })
-
-                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,
+                blob.then((blob) => {
+                  win?.location.replace(URL.createObjectURL(blob))
                 })
-
+              } else {
                 modal.present({
                   title: 'Preview',
-                  content: () => <SvgPreview svgElement={$svg} />,
+                  content: () => (
+                    <ExcalidrawImpl
+                      data={data}
+                      className="h-full"
+                      showExtendButton={false}
+                    />
+                  ),
                   clickOutsideToDismiss: true,
+                  max: true,
                 })
               }
             }}
             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',
+              'border-zinc-200 bg-base-100 text-zinc-600',
               'dark:border-neutral-800 dark:text-zinc-500',
             )}
           >
@@ -255,15 +243,3 @@ const ExcalidrawImpl = forwardRef<InternelExcalidrawRefObject, ExcalidrawProps>(
   },
 )
 ExcalidrawImpl.displayName = 'ExcalidrawImpl'
-const SvgPreview: FC<{
-  svgElement: SVGSVGElement
-}> = ({ svgElement }) => {
-  return (
-    <div
-      className="relative w-full overflow-auto [&>svg]:!h-full [&>svg]:!w-full [&>svg]:max-w-full"
-      dangerouslySetInnerHTML={{
-        __html: svgElement.outerHTML,
-      }}
-    />
-  )
-}