Merge branch 'main' into feat/separate-document-page

packages/ui/components/document/document-share-button.tsx

@@ -7,6 +7,7 @@ import { Copy, Sparkles } from 'lucide-react';
 import { FaXTwitter } from 'react-icons/fa6';
 
 import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import {
   TOAST_DOCUMENT_SHARE_ERROR,
   TOAST_DOCUMENT_SHARE_SUCCESS,
@@ -68,7 +69,7 @@ export const DocumentShareButton = ({
 
   const onCopyClick = async () => {
     if (shareLink) {
-      await copyShareLink(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${shareLink.slug}`);
+      await copyShareLink(`${NEXT_PUBLIC_WEBAPP_URL()}/share/${shareLink.slug}`);
     } else {
       await createAndCopyShareLink({
         token,
@@ -92,7 +93,7 @@ export const DocumentShareButton = ({
     }
 
     // Ensuring we've prewarmed the opengraph image for the Twitter
-    await fetch(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}/opengraph`, {
+    await fetch(`${NEXT_PUBLIC_WEBAPP_URL()}/share/${slug}/opengraph`, {
       // We don't care about the response, so we can use no-cors
       mode: 'no-cors',
     });
@@ -100,7 +101,7 @@ export const DocumentShareButton = ({
     window.open(
       generateTwitterIntent(
         `I just ${token ? 'signed' : 'sent'} a document in style with @documenso. Check it out!`,
-        `${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`,
+        `${NEXT_PUBLIC_WEBAPP_URL()}/share/${slug}`,
       ),
       '_blank',
     );
@@ -148,7 +149,7 @@ export const DocumentShareButton = ({
                 'animate-pulse': !shareLink?.slug,
               })}
             >
-              {process.env.NEXT_PUBLIC_WEBAPP_URL}/share/{shareLink?.slug || '...'}
+              {NEXT_PUBLIC_WEBAPP_URL()}/share/{shareLink?.slug || '...'}
             </span>
             <div
               className={cn(
@@ -160,7 +161,7 @@ export const DocumentShareButton = ({
             >
               {shareLink?.slug && (
                 <img
-                  src={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${shareLink.slug}/opengraph`}
+                  src={`${NEXT_PUBLIC_WEBAPP_URL()}/share/${shareLink.slug}/opengraph`}
                   alt="sharing link"
                   className="h-full w-full object-cover"
                 />

packages/ui/primitives/command.tsx

@@ -121,7 +121,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}

packages/ui/primitives/document-flow/add-fields.tsx

@@ -380,7 +380,7 @@ export const AddFieldsFormPartial = ({
               </PopoverTrigger>
 
               <PopoverContent className="p-0" align="start">
-                <Command>
+                <Command value={selectedSigner?.email}>
                   <CommandInput />
 
                   <CommandEmpty>

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -7,6 +7,8 @@ import { Undo2 } from 'lucide-react';
 import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
 
+import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+
 import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
 import { Point } from './point';
@@ -28,6 +30,7 @@ export const SignaturePad = ({
   ...props
 }: SignaturePadProps) => {
   const $el = useRef<HTMLCanvasElement>(null);
+  const $imageData = useRef<ImageData | null>(null);
 
   const [isPressed, setIsPressed] = useState(false);
   const [lines, setLines] = useState<Point[][]>([]);
@@ -134,7 +137,6 @@ export const SignaturePad = ({
         });
 
         onChange?.($el.current.toDataURL());
-
         ctx.save();
       }
     }
@@ -163,6 +165,7 @@ export const SignaturePad = ({
       const ctx = $el.current.getContext('2d');
 
       ctx?.clearRect(0, 0, $el.current.width, $el.current.height);
+      $imageData.current = null;
     }
 
     onChange?.(null);
@@ -176,19 +179,25 @@ export const SignaturePad = ({
       return;
     }
 
-    const newLines = [...lines];
-    newLines.pop(); // Remove the last line
+    const newLines = lines.slice(0, -1);
     setLines(newLines);
 
     // Clear the canvas
     if ($el.current) {
       const ctx = $el.current.getContext('2d');
-      ctx?.clearRect(0, 0, $el.current.width, $el.current.height);
+      const { width, height } = $el.current;
+      ctx?.clearRect(0, 0, width, height);
+
+      if (typeof defaultValue === 'string' && $imageData.current) {
+        ctx?.putImageData($imageData.current, 0, 0);
+      }
 
       newLines.forEach((line) => {
         const pathData = new Path2D(getSvgPathFromStroke(getStroke(line, perfectFreehandOptions)));
         ctx?.fill(pathData);
       });
+
+      onChange?.($el.current.toDataURL());
     }
   };
 
@@ -199,7 +208,7 @@ export const SignaturePad = ({
     }
   }, []);
 
-  useEffect(() => {
+  unsafe_useEffectOnce(() => {
     if ($el.current && typeof defaultValue === 'string') {
       const ctx = $el.current.getContext('2d');
 
@@ -209,11 +218,15 @@ export const SignaturePad = ({
 
       img.onload = () => {
         ctx?.drawImage(img, 0, 0, Math.min(width, img.width), Math.min(height, img.height));
+
+        const defaultImageData = ctx?.getImageData(0, 0, width, height) || null;
+
+        $imageData.current = defaultImageData;
       };
 
       img.src = defaultValue;
     }
-  }, [defaultValue]);
+  });
 
   return (
     <div