From 06b4c147bd635f9e833865e75104b0e4e3b905aa Mon Sep 17 00:00:00 2001
From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Date: Thu, 2 Oct 2025 11:36:11 +0100
Subject: [PATCH] ph-no-capture tags (#4579)

added no capture tags to stop posthog capturing recordings of pdf
content

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
---
 .../fileEditor/FileEditorThumbnail.tsx        |  3 ++-
 .../components/fileManager/FileInfoCard.tsx   |  2 +-
 .../components/fileManager/FileListItem.tsx   |  2 +-
 .../components/pageEditor/FileThumbnail.tsx   |  1 +
 .../components/pageEditor/PageThumbnail.tsx   |  1 +
 .../shared/filePreview/DocumentThumbnail.tsx  | 16 +++++++-------
 .../addPageNumbers/PageNumberPreview.tsx      |  4 ++--
 .../tools/shared/ResultsPreview.tsx           |  1 +
 .../src/components/viewer/LocalEmbedPDF.tsx   | 21 +++++++++++--------
 .../components/viewer/ThumbnailSidebar.tsx    |  1 +
 10 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/fileEditor/FileEditorThumbnail.tsx b/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
index 355d37c51..e8f102101 100644
--- a/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
+++ b/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
@@ -324,7 +324,7 @@ const FileEditorThumbnail = ({
         marginTop: '0.5rem',
         marginBottom: '0.5rem',
       }}>
-        <Text size="lg" fw={700} className={styles.title} lineClamp={2}>
+        <Text  size="lg" fw={700} className={`${styles.title}  ph-no-capture `}  lineClamp={2}>
           {file.name}
         </Text>
         <Text
@@ -350,6 +350,7 @@ const FileEditorThumbnail = ({
         <div className={styles.previewPaper}>
           {file.thumbnailUrl && (
             <img
+              className="ph-no-capture"
               src={file.thumbnailUrl}
               alt={file.name}
               draggable={false}
diff --git a/frontend/src/components/fileManager/FileInfoCard.tsx b/frontend/src/components/fileManager/FileInfoCard.tsx
index f53a2f6ee..160ddcc62 100644
--- a/frontend/src/components/fileManager/FileInfoCard.tsx
+++ b/frontend/src/components/fileManager/FileInfoCard.tsx
@@ -26,7 +26,7 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
       <ScrollArea style={{ flex: 1 }} p="md">
         <Stack gap="sm">
           <Group justify="space-between" py="xs">
-            <Text size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
+            <Text className='ph-no-capture' size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
             <Text size="sm" fw={500} style={{ maxWidth: '60%', textAlign: 'right' }} truncate>
               {currentFile ? currentFile.name : ''}
             </Text>
diff --git a/frontend/src/components/fileManager/FileListItem.tsx b/frontend/src/components/fileManager/FileListItem.tsx
index 7296fa956..11fbc20af 100644
--- a/frontend/src/components/fileManager/FileListItem.tsx
+++ b/frontend/src/components/fileManager/FileListItem.tsx
@@ -93,7 +93,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
 
           <Box style={{ flex: 1, minWidth: 0 }}>
             <Group gap="xs" align="center">
-              <Text size="sm" fw={500} truncate style={{ flex: 1 }}>{file.name}</Text>
+              <Text size="sm" fw={500} className='ph-no-capture' truncate style={{ flex: 1 }}>{file.name}</Text>
               <Badge size="xs" variant="light" color={"blue"}>
                 v{currentVersion}
               </Badge>
diff --git a/frontend/src/components/pageEditor/FileThumbnail.tsx b/frontend/src/components/pageEditor/FileThumbnail.tsx
index be926f85d..b7b18e239 100644
--- a/frontend/src/components/pageEditor/FileThumbnail.tsx
+++ b/frontend/src/components/pageEditor/FileThumbnail.tsx
@@ -317,6 +317,7 @@ const FileThumbnail = ({
         >
           {file.thumbnail && (
             <img
+              className="ph-no-capture"
               src={file.thumbnail}
               alt={file.name}
               draggable={false}
diff --git a/frontend/src/components/pageEditor/PageThumbnail.tsx b/frontend/src/components/pageEditor/PageThumbnail.tsx
index dfa098af1..6abda0c78 100644
--- a/frontend/src/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/components/pageEditor/PageThumbnail.tsx
@@ -371,6 +371,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
             </div>
           ) : thumbnailUrl ? (
             <img
+              className="ph-no-capture"
               src={thumbnailUrl}
               alt={`Page ${page.pageNumber}`}
               draggable={false}
diff --git a/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx b/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx
index 4f87e7f3e..71b95db27 100644
--- a/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx
+++ b/frontend/src/components/shared/filePreview/DocumentThumbnail.tsx
@@ -19,7 +19,7 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
   children
 }) => {
   if (!file) return null;
-  
+
   const containerStyle = {
     position: 'relative' as const,
     cursor: onClick ? 'pointer' : 'default',
@@ -36,6 +36,7 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
     return (
       <Box style={containerStyle} onClick={onClick}>
         <Image
+          className='ph-no-capture'
           src={thumbnail}
           alt={`Preview of ${file.name}`}
           fit="contain"
@@ -49,11 +50,12 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
   return (
     <Box style={containerStyle} onClick={onClick}>
       <Center style={{ width: '100%', height: '100%', backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: '0.25rem' }}>
-        <PictureAsPdfIcon 
-          style={{ 
-            fontSize: '2rem', 
-            color: 'var(--mantine-color-gray-6)' 
-          }} 
+        <PictureAsPdfIcon
+          className='ph-no-capture'
+          style={{
+            fontSize: '2rem',
+            color: 'var(--mantine-color-gray-6)'
+          }}
         />
       </Center>
       {children}
@@ -61,4 +63,4 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
   );
 };
 
-export default DocumentThumbnail;
\ No newline at end of file
+export default DocumentThumbnail;
diff --git a/frontend/src/components/tools/addPageNumbers/PageNumberPreview.tsx b/frontend/src/components/tools/addPageNumbers/PageNumberPreview.tsx
index 0e31f426d..8a762278a 100644
--- a/frontend/src/components/tools/addPageNumbers/PageNumberPreview.tsx
+++ b/frontend/src/components/tools/addPageNumbers/PageNumberPreview.tsx
@@ -200,7 +200,7 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
           <img
             src={pageThumbnail}
             alt="page preview"
-            className={styles.pageThumbnail}
+            className={`${styles.pageThumbnail} ph-no-capture`}
             draggable={false}
           />
         )}
@@ -238,4 +238,4 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/tools/shared/ResultsPreview.tsx b/frontend/src/components/tools/shared/ResultsPreview.tsx
index 586700b85..399a3ab5d 100644
--- a/frontend/src/components/tools/shared/ResultsPreview.tsx
+++ b/frontend/src/components/tools/shared/ResultsPreview.tsx
@@ -62,6 +62,7 @@ const ResultsPreview = ({
       {/* File name at the top */}
       <Box mb="sm" style={{ minHeight: '3rem', display: 'flex', alignItems: 'flex-start' }}>
         <Text
+          className='ph-no-capture'
           size="sm"
           fw={500}
           style={{
diff --git a/frontend/src/components/viewer/LocalEmbedPDF.tsx b/frontend/src/components/viewer/LocalEmbedPDF.tsx
index 842c62945..c0ef68990 100644
--- a/frontend/src/components/viewer/LocalEmbedPDF.tsx
+++ b/frontend/src/components/viewer/LocalEmbedPDF.tsx
@@ -182,14 +182,17 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
 
   // Wrap your UI with the <EmbedPDF> provider
   return (
-    <div style={{
-      height: '100%',
-      width: '100%',
-      position: 'relative',
-      overflow: 'hidden',
-      flex: 1,
-      minHeight: 0,
-      minWidth: 0
+    <div
+      className='ph-no-capture'
+
+      style={{
+        height: '100%',
+        width: '100%',
+        position: 'relative',
+        overflow: 'hidden',
+        flex: 1,
+        minHeight: 0,
+        minWidth: 0,
     }}>
       <EmbedPDF
         engine={engine}
@@ -310,7 +313,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
                     <CustomSearchLayer pageIndex={pageIndex} scale={scale} />
 
                     {/* Selection layer for text interaction */}
-                    <SelectionLayer pageIndex={pageIndex} scale={scale} />
+                    <SelectionLayer  pageIndex={pageIndex} scale={scale} />
                     {/* Annotation layer for signatures (only when enabled) */}
                     {enableAnnotations && (
                       <AnnotationLayer
diff --git a/frontend/src/components/viewer/ThumbnailSidebar.tsx b/frontend/src/components/viewer/ThumbnailSidebar.tsx
index 2f65505c8..6c3422d36 100644
--- a/frontend/src/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/components/viewer/ThumbnailSidebar.tsx
@@ -134,6 +134,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
                     {/* Thumbnail Image */}
                     {thumbnails[pageIndex] && thumbnails[pageIndex] !== 'error' ? (
                       <img
+                        className='ph-no-capture'
                         src={thumbnails[pageIndex]}
                         alt={`Page ${pageIndex + 1} thumbnail`}
                         style={{