fix: include cmaps for pdf viewer (#2177)

We were previously omitting cmaps meaning that
when signing documents with certain UTF-8 characters or CJK characters
they would appear as outlined squares in the pdf viewer despite the
actual pdf looking as expected with the characters displaying correctly.

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

@@ -1,5 +1,7 @@
-import Konva from 'konva';
+// sort-imports-ignore
 import 'konva/skia-backend';
+
+import Konva from 'konva';
 import path from 'node:path';
 import type { Canvas } from 'skia-canvas';
 import { FontLibrary } from 'skia-canvas';
@@ -21,13 +23,13 @@ export const insertFieldInPDFV2 = async ({
 }: InsertFieldInPDFV2Options) => {
   const fontPath = path.join(process.cwd(), 'public/fonts');
 
-  FontLibrary.use([
-    path.join(fontPath, 'caveat.ttf'),
-    path.join(fontPath, 'noto-sans.ttf'),
-    path.join(fontPath, 'noto-sans-japanese.ttf'),
-    path.join(fontPath, 'noto-sans-chinese.ttf'),
-    path.join(fontPath, 'noto-sans-korean.ttf'),
-  ]);
+  FontLibrary.use({
+    ['Caveat']: [path.join(fontPath, 'caveat.ttf')],
+    ['Noto Sans']: [path.join(fontPath, 'noto-sans.ttf')],
+    ['Noto Sans Japanese']: [path.join(fontPath, 'noto-sans-japanese.ttf')],
+    ['Noto Sans Chinese']: [path.join(fontPath, 'noto-sans-chinese.ttf')],
+    ['Noto Sans Korean']: [path.join(fontPath, 'noto-sans-korean.ttf')],
+  });
 
   const stage = new Konva.Stage({ width: pageWidth, height: pageHeight });
   const layer = new Konva.Layer();

packages/lib/universal/field-renderer/field-generic-items.ts

@@ -9,7 +9,7 @@ import type { FieldToRender, RenderFieldElementOptions } from './field-renderer'
 import { calculateFieldPosition } from './field-renderer';
 
 export const konvaTextFontFamily =
-  'Noto Sans, Noto Sans Japanese, Noto Sans Chinese, Noto Sans Korean, sans-serif';
+  '"Noto Sans", "Noto Sans Japanese", "Noto Sans Chinese", "Noto Sans Korean", sans-serif';
 export const konvaTextFill = 'black';
 
 export const upsertFieldGroup = (

packages/ui/components/pdf-viewer/pdf-viewer-konva.tsx

@@ -9,6 +9,7 @@ import { type PDFDocumentProxy } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 
@@ -22,6 +23,10 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   import.meta.url,
 ).toString();
 
+const pdfViewerOptions = {
+  cMapUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/static/cmaps`,
+};
+
 const PDFLoader = () => (
   <>
     <Loader className="text-documenso h-12 w-12 animate-spin" />
@@ -167,6 +172,7 @@ export const PdfViewerKonva = ({
               </div>
             </div>
           }
+          // options={pdfViewerOptions}
         >
           {Array(numPages)
             .fill(null)

packages/ui/primitives/pdf-viewer.tsx

@@ -8,9 +8,10 @@ import { base64 } from '@scure/base';
 import { Loader } from 'lucide-react';
 import { type PDFDocumentProxy } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import 'react-pdf/dist/esm/Page/TextLayer.css';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+// import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+// import 'react-pdf/dist/esm/Page/TextLayer.css';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { getEnvelopeItemPdfUrl } from '@documenso/lib/utils/envelope-download';
 
@@ -27,6 +28,10 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   import.meta.url,
 ).toString();
 
+const pdfViewerOptions = {
+  cMapUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/static/cmaps`,
+};
+
 export type OnPDFViewerPageClick = (_event: {
   pageNumber: number;
   numPages: number;
@@ -234,6 +239,7 @@ export const PDFViewer = ({
                 </div>
               </div>
             }
+            // options={pdfViewerOptions}
           >
             {Array(numPages)
               .fill(null)