Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2026-02-17 13:52:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

PrivateContent Wrapper

Browse Source
This commit is contained in:
Connor Yoh
2025-10-31 16:03:34 +00:00
parent 85ec882950
commit 5bd28889b6
14 changed files with 190 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
View File

@@ -21,6 +21,7 @@ import { FileId } from '@app/types/file';
import { formatFileSize } from '@app/utils/fileUtils';
import ToolChain from '@app/components/shared/ToolChain';
import HoverActionMenu, { HoverAction } from '@app/components/shared/HoverActionMenu';
import { PrivateContent } from '@app/components/shared/PrivateContent';
@@ -328,8 +329,8 @@ const FileEditorThumbnail = ({
marginTop: '0.5rem',
marginBottom: '0.5rem',
}}>
<Text size="lg" fw={700} className={`${styles.title} ph-no-capture `} lineClamp={2}>
{file.name}
<Text size="lg" fw={700} className={styles.title} lineClamp={2}>
<PrivateContent>{file.name}</PrivateContent>
</Text>
<Text
size="sm"
@@ -353,20 +354,20 @@ const FileEditorThumbnail = ({
>
<div className={styles.previewPaper}>
{file.thumbnailUrl && (
<img
className="ph-no-capture"
src={file.thumbnailUrl}
alt={file.name}
draggable={false}
loading="lazy"
decoding="async"
onError={(e) => {
const img = e.currentTarget;
img.style.display = 'none';
img.parentElement?.setAttribute('data-thumb-missing', 'true');
}}
style={{
maxWidth: '80%',
<PrivateContent>
<img
src={file.thumbnailUrl}
alt={file.name}
draggable={false}
loading="lazy"
decoding="async"
onError={(e) => {
const img = e.currentTarget;
img.style.display = 'none';
img.parentElement?.setAttribute('data-thumb-missing', 'true');
}}
style={{
maxWidth: '80%',
maxHeight: '80%',
objectFit: 'contain',
borderRadius: 0,
@@ -378,6 +379,7 @@ const FileEditorThumbnail = ({
alignSelf: 'start'
}}
/>
</PrivateContent>
)}
</div>

30
frontend/src/core/components/fileManager/CompactFileDetails.tsx
View File

@@ -6,6 +6,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { useTranslation } from 'react-i18next';
import { getFileSize } from '@app/utils/fileUtils';
import { StirlingFileStub } from '@app/types/fileContext';
import { PrivateContent } from '@app/components/shared/PrivateContent';
interface CompactFileDetailsProps {
currentFile: StirlingFileStub | null;
@@ -41,18 +42,19 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
{/* Small preview */}
<Box style={{ width: '7.5rem', height: '9.375rem', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
{currentFile && thumbnail ? (
<img
className='ph-no-capture'
src={thumbnail}
alt={currentFile.name}
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
borderRadius: '0.25rem',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
}}
/>
<PrivateContent>
<img
src={thumbnail}
alt={currentFile.name}
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
borderRadius: '0.25rem',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
}}
/>
</PrivateContent>
) : currentFile ? (
<Center style={{
width: '100%',
@@ -67,8 +69,8 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
{/* File info */}
<Box style={{ flex: 1, minWidth: 0 }}>
<Text className='ph-no-capture' size="sm" fw={500} truncate>
{currentFile ? currentFile.name : 'No file selected'}
<Text size="sm" fw={500} truncate>
<PrivateContent>{currentFile ? currentFile.name : 'No file selected'}</PrivateContent>
</Text>
<Text size="xs" c="dimmed">
{currentFile ? getFileSize(currentFile) : ''}

5
frontend/src/core/components/fileManager/FileInfoCard.tsx
View File

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
import { detectFileExtension, getFileSize } from '@app/utils/fileUtils';
import { StirlingFileStub } from '@app/types/fileContext';
import ToolChain from '@app/components/shared/ToolChain';
import { PrivateContent } from '@app/components/shared/PrivateContent';
interface FileInfoCardProps {
currentFile: StirlingFileStub | null;
@@ -26,7 +27,9 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
<ScrollArea style={{ flex: 1 }} p="md">
<Stack gap="sm">
<Group justify="space-between" py="xs">
<Text className='ph-no-capture' size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
<Text size="sm" c="dimmed">
<PrivateContent>{t('fileManager.fileName', 'Name')}</PrivateContent>
</Text>
<Text size="sm" fw={500} style={{ maxWidth: '60%', textAlign: 'right' }} truncate>
{currentFile ? currentFile.name : ''}
</Text>

5
frontend/src/core/components/fileManager/FileListItem.tsx
View File

@@ -13,6 +13,7 @@ import { useFileManagerContext } from '@app/contexts/FileManagerContext';
import { zipFileService } from '@app/services/zipFileService';
import ToolChain from '@app/components/shared/ToolChain';
import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
import { PrivateContent } from '@app/components/shared/PrivateContent';
interface FileListItemProps {
file: StirlingFileStub;
@@ -99,7 +100,9 @@ const FileListItem: React.FC<FileListItemProps> = ({
<Box style={{ flex: 1, minWidth: 0 }}>
<Group gap="xs" align="center">
<Text size="sm" fw={500} className='ph-no-capture' truncate style={{ flex: 1 }}>{file.name}</Text>
<Text size="sm" fw={500} truncate style={{ flex: 1 }}>
<PrivateContent>{file.name}</PrivateContent>
</Text>
<Badge size="xs" variant="light" color={"blue"}>
v{currentVersion}
</Badge>

46
frontend/src/core/components/pageEditor/FileThumbnail.tsx
View File

@@ -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>

32
frontend/src/core/components/pageEditor/PageThumbnail.tsx
View File

@@ -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>

9
frontend/src/core/components/shared/FileDropdownMenu.tsx
View File

@@ -3,6 +3,7 @@ import { Menu, Loader, Group, Text } from '@mantine/core';
import VisibilityIcon from '@mui/icons-material/Visibility';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import FitText from '@app/components/shared/FitText';
import { PrivateContent } from '@app/components/shared/PrivateContent';
interface FileDropdownMenuProps {
displayName: string;
@@ -31,7 +32,9 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
) : (
<VisibilityIcon fontSize="small" />
)}
<FitText text={displayName} fontSize={14} minimumFontScale={0.6} className="ph-no-capture" />
<PrivateContent>
<FitText text={displayName} fontSize={14} minimumFontScale={0.6} />
</PrivateContent>
<KeyboardArrowDownIcon fontSize="small" />
</div>
</Menu.Target>
@@ -61,7 +64,9 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
>
<Group gap="xs" style={{ width: '100%', justifyContent: 'space-between' }}>
<div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
<FitText text={itemName} fontSize={14} minimumFontScale={0.7} className="ph-no-capture" />
<PrivateContent>
<FitText text={itemName} fontSize={14} minimumFontScale={0.7} />
</PrivateContent>
</div>
{file.versionNumber && file.versionNumber > 1 && (
<Text size="xs" c="dimmed">

42
frontend/src/core/components/shared/PrivateContent.tsx Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
type PrivateContentProps = {
children: React.ReactNode;
as?: 'span' | 'div';
} & (
| React.HTMLAttributes<HTMLSpanElement>
| React.HTMLAttributes<HTMLDivElement>
);
/**
* Wrapper component for content that should not be captured by analytics tools.
* Currently applies the 'ph-no-capture' className to prevent PostHog capture.
*
* Use this component to wrap any content containing sensitive or private information
* that should be excluded from analytics tracking.
*
* @example
* // For inline content (default):
* <PrivateContent>
* <Text>Sensitive filename.pdf</Text>
* </PrivateContent>
*
* // For block-level content:
* <PrivateContent as="div">
* <div style={{ height: '100%' }}>Block content</div>
* </PrivateContent>
*/
export const PrivateContent: React.FC<PrivateContentProps> = ({
children,
as: Component = 'span',
className = '',
...props
}) => {
const combinedClassName = `ph-no-capture${className ? ` ${className}` : ''}`;
return (
<Component className={combinedClassName} {...props}>
{children}
</Component>
);
};

3
frontend/src/core/components/shared/TopControls.tsx
View File

@@ -9,6 +9,7 @@ import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
import { WorkbenchType, isValidWorkbench } from '@app/types/workbench';
import type { CustomWorkbenchViewInstance } from '@app/contexts/ToolWorkflowContext';
import { FileDropdownMenu } from '@app/components/shared/FileDropdownMenu';
import { PrivateContent } from '@app/components/shared/PrivateContent';
const viewOptionStyle: React.CSSProperties = {
@@ -54,7 +55,7 @@ const createViewOptions = (
) : (
<VisibilityIcon fontSize="small" />
)}
<span className="ph-no-capture">{displayName}</span>
<PrivateContent>{displayName}</PrivateContent>
</div>
),
value: "viewer",

31
frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { Box, Center, Image } from '@mantine/core';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import { StirlingFileStub } from '@app/types/fileContext';
import { PrivateContent } from '@app/components/shared/PrivateContent';
export interface DocumentThumbnailProps {
file: File | StirlingFileStub | null;
@@ -35,13 +36,14 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
if (thumbnail) {
return (
<Box style={containerStyle} onClick={onClick}>
<Image
className='ph-no-capture'
src={thumbnail}
alt={`Preview of ${file.name}`}
fit="contain"
style={{ maxWidth: '100%', maxHeight: '100%' }}
/>
<PrivateContent>
<Image
src={thumbnail}
alt={`Preview of ${file.name}`}
fit="contain"
style={{ maxWidth: '100%', maxHeight: '100%' }}
/>
</PrivateContent>
{children}
</Box>
);
@@ -50,13 +52,14 @@ 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
className='ph-no-capture'
style={{
fontSize: '2rem',
color: 'var(--mantine-color-gray-6)'
}}
/>
<PrivateContent>
<PictureAsPdfIcon
style={{
fontSize: '2rem',
color: 'var(--mantine-color-gray-6)'
}}
/>
</PrivateContent>
</Center>
{children}
</Box>

15
frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
View File

@@ -4,6 +4,7 @@ import { AddPageNumbersParameters } from '@app/components/tools/addPageNumbers/u
import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
import styles from '@app/components/tools/addPageNumbers/PageNumberPreview.module.css';
import { PrivateContent } from '@app/components/shared/PrivateContent';
// Simple utilities for page numbers (adapted from stamp)
const A4_ASPECT_RATIO = 0.707;
@@ -197,12 +198,14 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
style={containerStyle}
>
{pageThumbnail && (
<img
src={pageThumbnail}
alt="page preview"
className={`${styles.pageThumbnail} ph-no-capture`}
draggable={false}
/>
<PrivateContent>
<img
src={pageThumbnail}
alt="page preview"
className={styles.pageThumbnail}
draggable={false}
/>
</PrivateContent>
)}
{/* Quick position overlay grid - EXACT copy from stamp */}

4
frontend/src/core/components/tools/shared/ResultsPreview.tsx
View File

@@ -3,6 +3,7 @@ import { Box, Text, Loader, Stack, Center, Flex } from '@mantine/core';
import FilePreview from '@app/components/shared/FilePreview';
import FileMetadata from '@app/components/tools/shared/FileMetadata';
import NavigationControls from '@app/components/tools/shared/NavigationControls';
import { PrivateContent } from '@app/components/shared/PrivateContent';
export interface ReviewFile {
file: File;
@@ -62,7 +63,6 @@ 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={{
@@ -71,7 +71,7 @@ const ResultsPreview = ({
}}
title={currentFile.file.name}
>
{currentFile.file.name}
<PrivateContent>{currentFile.file.name}</PrivateContent>
</Text>
</Box>

27
frontend/src/core/components/viewer/LocalEmbedPDF.tsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { createPluginRegistration } from '@embedpdf/core';
import { EmbedPDF } from '@embedpdf/core/react';
import { usePdfiumEngine } from '@embedpdf/engines/react';
import { PrivateContent } from '@app/components/shared/PrivateContent';
// Import the essential plugins
import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react';
@@ -184,18 +185,17 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
// Wrap your UI with the <EmbedPDF> provider
return (
<div
className='ph-no-capture'
style={{
height: '100%',
width: '100%',
position: 'relative',
overflow: 'hidden',
flex: 1,
minHeight: 0,
minWidth: 0,
}}>
<PrivateContent as="div">
<div
style={{
height: '100%',
width: '100%',
position: 'relative',
overflow: 'hidden',
flex: 1,
minHeight: 0,
minWidth: 0,
}}>
<EmbedPDF
engine={engine}
plugins={plugins}
@@ -338,6 +338,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
</Viewport>
</GlobalPointerProvider>
</EmbedPDF>
</div>
</div>
</PrivateContent>
);
}

26
frontend/src/core/components/viewer/ThumbnailSidebar.tsx
View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { Box, ScrollArea } from '@mantine/core';
import { useViewer } from '@app/contexts/ViewerContext';
import { PrivateContent } from '@app/components/shared/PrivateContent';
interface ThumbnailSidebarProps {
visible: boolean;
@@ -145,18 +146,19 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex
>
{/* Thumbnail Image */}
{thumbnails[pageIndex] && thumbnails[pageIndex] !== 'error' ? (
<img
className='ph-no-capture'
src={thumbnails[pageIndex]}
alt={`Page ${pageIndex + 1} thumbnail`}
style={{
maxWidth: '100%',
height: 'auto',
borderRadius: '4px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
border: '1px solid var(--border-subtle)'
}}
/>
<PrivateContent>
<img
src={thumbnails[pageIndex]}
alt={`Page ${pageIndex + 1} thumbnail`}
style={{
maxWidth: '100%',
height: 'auto',
borderRadius: '4px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
border: '1px solid var(--border-subtle)'
}}
/>
</PrivateContent>
) : thumbnails[pageIndex] === 'error' ? (
<div style={{
width: '11.5rem',