From f7ff0f65cbd97c28877e068746cd346edf4aca06 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Wed, 29 Jan 2025 11:53:03 -0300 Subject: [PATCH] save width and height on the search params --- packages/react-email/package.json | 6 +++- .../src/app/preview/[...slug]/preview.tsx | 36 ++++++++++++++++--- .../src/components/resizable-wrapper.tsx | 3 ++ pnpm-lock.yaml | 13 +++++++ 4 files changed, 53 insertions(+), 5 deletions(-) diff --git a/packages/react-email/package.json b/packages/react-email/package.json index f1b6c8fc57..e35c63c98a 100644 --- a/packages/react-email/package.json +++ b/packages/react-email/package.json @@ -18,7 +18,10 @@ "url": "https://github.com/resend/react-email.git", "directory": "packages/react-email" }, - "keywords": ["react", "email"], + "keywords": [ + "react", + "email" + ], "engines": { "node": ">=18.0.0" }, @@ -83,6 +86,7 @@ "tsup": "7.2.0", "tsx": "4.9.0", "typescript": "5.1.6", + "use-debounce": "10.0.4", "vitest": "1.1.3" } } diff --git a/packages/react-email/src/app/preview/[...slug]/preview.tsx b/packages/react-email/src/app/preview/[...slug]/preview.tsx index b0b5f2d414..15ad435f9f 100644 --- a/packages/react-email/src/app/preview/[...slug]/preview.tsx +++ b/packages/react-email/src/app/preview/[...slug]/preview.tsx @@ -2,6 +2,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { Toaster } from 'sonner'; +import { useDebouncedCallback } from 'use-debounce'; import type { EmailRenderingResult } from '../../../actions/render-email-by-path'; import { CodeContainer } from '../../../components/code-container'; import { @@ -15,6 +16,7 @@ import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-resu import { useHotreload } from '../../../hooks/use-hot-reload'; import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata'; import { RenderingError } from './rendering-error'; +import { flushSync } from 'react-dom'; interface PreviewProps { slug: string; @@ -83,13 +85,26 @@ const Preview = ({ let maxHeight = Number.POSITIVE_INFINITY; const minWidth = 350; const minHeight = 600; - const [width, setWidth] = useClampedState(600, 350, Number.POSITIVE_INFINITY); + const storedWidth = searchParams.get('width'); + const storedHeight = searchParams.get('height'); + const [width, setWidth] = useClampedState( + storedWidth ? Number.parseInt(storedWidth) : 600, + 350, + Number.POSITIVE_INFINITY, + ); const [height, setHeight] = useClampedState( - 1024, + storedHeight ? Number.parseInt(storedHeight) : 1024, 600, Number.POSITIVE_INFINITY, ); + const handleSaveViewSize = useDebouncedCallback(() => { + const params = new URLSearchParams(searchParams); + params.set('width', width.toString()); + params.set('height', height.toString()); + router.push(`${pathname}?${params.toString()}`); + }, 300); + return ( { + setHeight(height); + flushSync(() => { + handleSaveViewSize(); + }); + }} + setViewWidth={(width) => { + setWidth(width); + flushSync(() => { + handleSaveViewSize(); + }); + }} viewHeight={height} viewWidth={width} > @@ -125,6 +150,9 @@ const Preview = ({ maxHeight={maxHeight} maxWidth={maxWidth} height={height} + onResizeEnd={() => { + handleSaveViewSize(); + }} onResize={(difference, direction) => { switch (direction) { case 'north': diff --git a/packages/react-email/src/components/resizable-wrapper.tsx b/packages/react-email/src/components/resizable-wrapper.tsx index c54abdba8c..8c538cc598 100644 --- a/packages/react-email/src/components/resizable-wrapper.tsx +++ b/packages/react-email/src/components/resizable-wrapper.tsx @@ -12,6 +12,7 @@ interface ResizableWarpperProps { minHeight: number; onResize: (difference: number, direction: Direction) => void; + onResizeEnd?: () => void; children: React.ReactNode; } @@ -35,6 +36,7 @@ export const ResizableWarpper = ({ width, height, onResize, + onResizeEnd, children, maxHeight, @@ -49,6 +51,7 @@ export const ResizableWarpper = ({ document.removeEventListener('mousemove', mouseMoveListener); } document.removeEventListener('mouseup', handleStopResizing); + onResizeEnd?.(); }; const handleStartResizing = (direction: Direction) => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26efc45a1f..1b6830cf87 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1000,6 +1000,9 @@ importers: typescript: specifier: 5.1.6 version: 5.1.6 + use-debounce: + specifier: 10.0.4 + version: 10.0.4(react@19.0.0) vitest: specifier: 1.1.3 version: 1.1.3(@edge-runtime/vm@3.1.8)(@types/node@22.10.2)(happy-dom@15.10.2)(jsdom@23.0.1)(terser@5.37.0) @@ -7799,6 +7802,12 @@ packages: '@types/react': optional: true + use-debounce@10.0.4: + resolution: {integrity: sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==} + engines: {node: '>= 16.0.0'} + peerDependencies: + react: '*' + use-sidecar@1.1.3: resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==} engines: {node: '>=10'} @@ -15763,6 +15772,10 @@ snapshots: optionalDependencies: '@types/react': 19.0.1 + use-debounce@10.0.4(react@19.0.0): + dependencies: + react: 19.0.0 + use-sidecar@1.1.3(@types/react@18.3.17)(react@18.3.1): dependencies: detect-node-es: 1.1.0