Improvement/V2/generic_obscure_component_wrapper (#4794)

Created PrivateContent Component to be used as wrapper. 

This way all tools that need to obscure contents can update this
wrapper.

---------

Co-authored-by: Connor Yoh <[email protected]>
Co-authored-by: James Brunton <[email protected]>

frontend/src/core/components/pageEditor/FileThumbnail.tsx

@@ -12,6 +12,7 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import styles from '@app/components/pageEditor/PageEditor.module.css';
 import { useFileContext } from '@app/contexts/FileContext';
 import { FileId } from '@app/types/file';
+import { PrivateContent } from '@app/components/shared/PrivateContent';
 
 interface FileItem {
   id: FileId;
@@ -316,29 +317,30 @@ const FileThumbnail = ({
           }}
         >
           {file.thumbnail && (
-            <img
-              className="ph-no-capture"
-              src={file.thumbnail}
-              alt={file.name}
-              draggable={false}
-              onError={(e) => {
-                // Hide broken image if blob URL was revoked
-                const img = e.target as HTMLImageElement;
-                img.style.display = 'none';
+            <PrivateContent>
+              <img
+                src={file.thumbnail}
+                alt={file.name}
+                draggable={false}
+                onError={(e) => {
+                  // Hide broken image if blob URL was revoked
+                  const img = e.target as HTMLImageElement;
+                  img.style.display = 'none';
+                }}
+              style={{
+                maxWidth: '80%',
+                maxHeight: '80%',
+                objectFit: 'contain',
+                borderRadius: 0,
+                background: '#ffffff',
+                border: '1px solid var(--border-default)',
+                display: 'block',
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                alignSelf: 'start'
               }}
-            style={{
-              maxWidth: '80%',
-              maxHeight: '80%',
-              objectFit: 'contain',
-              borderRadius: 0,
-              background: '#ffffff',
-              border: '1px solid var(--border-default)',
-              display: 'block',
-              marginLeft: 'auto',
-              marginRight: 'auto',
-              alignSelf: 'start'
-            }}
-          />
+            />
+            </PrivateContent>
           )}
         </div>
 

frontend/src/core/components/pageEditor/PageThumbnail.tsx

@@ -14,6 +14,7 @@ import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
 import { useFilesModalContext } from '@app/contexts/FilesModalContext';
 import styles from '@app/components/pageEditor/PageEditor.module.css';
 import HoverActionMenu, { HoverAction } from '@app/components/shared/HoverActionMenu';
+import { PrivateContent } from '@app/components/shared/PrivateContent';
 
 
 interface PageThumbnailProps {
@@ -442,21 +443,22 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
               }}></div>
             </div>
           ) : thumbnailUrl ? (
-            <img
-              className="ph-no-capture"
-              src={thumbnailUrl}
-              alt={`Page ${page.pageNumber}`}
-              draggable={false}
-              data-original-rotation={page.rotation}
-              style={{
-                width: '100%',
-                height: '100%',
-                objectFit: 'contain',
-                borderRadius: 2,
-                transform: `rotate(${page.rotation}deg)`,
-                transition: 'transform 0.3s ease-in-out'
-              }}
-            />
+            <PrivateContent>
+              <img
+                src={thumbnailUrl}
+                alt={`Page ${page.pageNumber}`}
+                draggable={false}
+                data-original-rotation={page.rotation}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'contain',
+                  borderRadius: 2,
+                  transform: `rotate(${page.rotation}deg)`,
+                  transition: 'transform 0.3s ease-in-out'
+                }}
+              />
+            </PrivateContent>
           ) : (
             <div style={{ textAlign: 'center' }}>
               <Text size="lg" c="dimmed">📄</Text>