feat: sign document with text

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",

apps/marketing/src/components/(marketing)/widget.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { HTMLAttributes, KeyboardEvent, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
+import type { HTMLAttributes, KeyboardEvent } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -4,8 +4,10 @@ import { useMemo, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
@@ -28,6 +30,19 @@ export type SigningFormProps = {
   fields: Field[];
 };
 
+const ZSigningpadSchema = z.union([
+  z.object({
+    signatureDataUrl: z.string().min(1),
+    signatureText: z.null().or(z.string().max(0)),
+  }),
+  z.object({
+    signatureDataUrl: z.null().or(z.string().max(0)),
+    signatureText: z.string().trim().min(1),
+  }),
+]);
+
+export type TSigningpadSchema = z.infer<typeof ZSigningpadSchema>;
+
 export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
@@ -40,9 +55,22 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
   const {
+    register,
     handleSubmit,
+    setValue,
+    watch,
     formState: { isSubmitting },
-  } = useForm();
+  } = useForm<TSigningpadSchema>({
+    mode: 'onChange',
+    defaultValues: {
+      signatureDataUrl: signature || null,
+      signatureText: '',
+    },
+    resolver: zodResolver(ZSigningpadSchema),
+  });
+
+  const signatureDataUrl = watch('signatureDataUrl');
+  const signatureText = watch('signatureText');
 
   const uninsertedFields = useMemo(() => {
     return sortFieldsByPosition(fields.filter((field) => !field.inserted));
@@ -118,15 +146,69 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
               <div>
                 <Label htmlFor="Signature">Signature</Label>
 
-                <Card className="mt-2" gradient degrees={-120}>
+                <Card id="signature" className="mt-4" degrees={-120} gradient>
-                  <CardContent className="p-0">
+                  <CardContent role="button" className="relative cursor-pointer pt-6">
-                    <SignaturePad
+                    <div className="flex h-44 items-center justify-center pb-6">
-                      className="h-44 w-full"
+                      {!signatureText && signature && (
-                      defaultValue={signature ?? undefined}
+                        <SignaturePad
-                      onChange={(value) => {
+                          className="h-44 w-full"
-                        setSignature(value);
+                          defaultValue={signature ?? undefined}
-                      }}
+                          onChange={(value) => {
-                    />
+                            setSignature(value);
+                          }}
+                        />
+                      )}
+
+                      {signatureText && (
+                        <p
+                          className={cn(
+                            'text-foreground text-4xl font-semibold [font-family:var(--font-caveat)]',
+                          )}
+                        >
+                          {signatureText}
+                        </p>
+                      )}
+                    </div>
+
+                    <div
+                      className="absolute inset-x-0 bottom-0 flex cursor-auto items-end justify-between px-4 pb-1 pt-2"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Input
+                        id="signatureText"
+                        className="text-foreground placeholder:text-muted-foreground border-none bg-transparent p-0 text-sm focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-0"
+                        placeholder="Draw or type name here"
+                        // disabled={isSubmitting || signature !== null}
+                        disabled={isSubmitting}
+                        {...register('signatureText', {
+                          onChange: (e) => {
+                            if (e.target.value !== '') {
+                              setValue('signatureDataUrl', null);
+                            }
+
+                            setValue('signatureText', e.target.value);
+                          },
+
+                          onBlur: (e) => {
+                            if (e.target.value === '') {
+                              return setValue('signatureText', '');
+                            }
+
+                            setSignature(e.target.value.trimStart());
+                          },
+                        })}
+                      />
+
+                      {/* <div className="absolute bottom-3 right-4">
+                        <button
+                          type="button"
+                          className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
+                          onClick={() => console.log('clear')}
+                        >
+                          Clear Signature
+                        </button>
+                      </div> */}
+                    </div>
                   </CardContent>
                 </Card>
               </div>

apps/web/src/app/(signing)/sign/[token]/sign-dialog.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Document, Field } from '@documenso/prisma/client';
+import type { Document, Field } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -86,7 +86,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         token: recipient.token,
         fieldId: field.id,
         value,
-        isBase64: true,
+        isBase64: typeof value === 'string' && value.startsWith('data:image/png;base64,'),
       });
 
       if (source === 'local' && !providedSignature) {

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
 
 export type SignatureFieldProps = {

packages/lib/constants/pdf.ts

@@ -1,7 +1,7 @@
 import { APP_BASE_URL } from './app';
 
 export const DEFAULT_STANDARD_FONT_SIZE = 15;
-export const DEFAULT_HANDWRITING_FONT_SIZE = 50;
+export const DEFAULT_HANDWRITING_FONT_SIZE = 30;
 
 export const MIN_STANDARD_FONT_SIZE = 8;
 export const MIN_HANDWRITING_FONT_SIZE = 20;

packages/lib/server-only/document/seal-document.ts

@@ -69,6 +69,8 @@ export const sealDocument = async ({ documentId, sendEmail = true }: SealDocumen
 
   const doc = await PDFDocument.load(pdfData);
 
+  console.log('Fields to insert into PDF: ', fields);
+
   for (const field of fields) {
     await insertFieldInPDF(doc, field);
   }

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -46,8 +46,12 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     await pdf.embedFont(fontCaveat);
   }
 
+  const CUSTOM_TEXT = field.customText || field.Signature?.typedSignature || '';
+
   const isInsertingImage =
-    isSignatureField && typeof field.Signature?.signatureImageAsBase64 === 'string';
+    isSignatureField &&
+    typeof field.Signature?.signatureImageAsBase64 === 'string' &&
+    field.Signature?.signatureImageAsBase64.startsWith('data:image/png;base64,');
 
   if (isSignatureField && isInsertingImage) {
     const image = await pdf.embedPng(field.Signature?.signatureImageAsBase64 ?? '');
@@ -73,13 +77,13 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
       height: imageHeight,
     });
   } else {
-    let textWidth = font.widthOfTextAtSize(field.customText, fontSize);
+    let textWidth = font.widthOfTextAtSize(CUSTOM_TEXT, fontSize);
     const textHeight = font.heightAtSize(fontSize);
 
     const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
 
     fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
-    textWidth = font.widthOfTextAtSize(field.customText, fontSize);
+    textWidth = font.widthOfTextAtSize(CUSTOM_TEXT, fontSize);
 
     const textX = fieldX + (fieldWidth - textWidth) / 2;
     let textY = fieldY + (fieldHeight - textHeight) / 2;
@@ -87,7 +91,7 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     // Invert the Y axis since PDFs use a bottom-left coordinate system
     textY = pageHeight - textY - textHeight;
 
-    page.drawText(field.customText, {
+    page.drawText(CUSTOM_TEXT, {
       x: textX,
       y: textY,
       size: fontSize,

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

@@ -15,12 +15,14 @@ const DPI = 2;
 export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
   onChange?: (_signatureDataUrl: string | null) => void;
   containerClassName?: string;
+  clearSignatureClassName?: string;
 };
 
 export const SignaturePad = ({
   className,
   containerClassName,
   defaultValue,
+  clearSignatureClassName,
   onChange,
   ...props
 }: SignaturePadProps) => {
@@ -217,7 +219,7 @@ export const SignaturePad = ({
         {...props}
       />
 
-      <div className="absolute bottom-4 right-4">
+      <div className={cn('absolute bottom-4 right-4', clearSignatureClassName)}>
         <button
           type="button"
           className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"