diff --git a/frontend/src/core/components/annotation/shared/ImageUploader.tsx b/frontend/src/core/components/annotation/shared/ImageUploader.tsx index aabca815c..d339eb4be 100644 --- a/frontend/src/core/components/annotation/shared/ImageUploader.tsx +++ b/frontend/src/core/components/annotation/shared/ImageUploader.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { FileInput, Text, Stack } from '@mantine/core'; import { useTranslation } from 'react-i18next'; +import { PrivateContent } from '@app/components/shared/PrivateContent'; interface ImageUploaderProps { onImageChange: (file: File | null) => void; @@ -40,13 +41,15 @@ export const ImageUploader: React.FC = ({ return ( - + + + {hint || t('sign.image.hint', 'Upload an image of your signature')} diff --git a/frontend/src/core/components/shared/PrivateContent.tsx b/frontend/src/core/components/shared/PrivateContent.tsx index 208b0c0b2..3ed11bfc6 100644 --- a/frontend/src/core/components/shared/PrivateContent.tsx +++ b/frontend/src/core/components/shared/PrivateContent.tsx @@ -1,42 +1,40 @@ import React from 'react'; -type PrivateContentProps = { +interface PrivateContentProps extends React.HTMLAttributes { children: React.ReactNode; - as?: 'span' | 'div'; -} & ( - | React.HTMLAttributes - | React.HTMLAttributes -); +} /** * Wrapper component for content that should not be captured by analytics tools. * Currently applies the 'ph-no-capture' className to prevent PostHog capture. * + * Uses `display: contents` to be layout-invisible - the wrapper exists in the DOM + * for analytics filtering, but doesn't affect layout, flexbox, grid, or styling. + * * Use this component to wrap any content containing sensitive or private information * that should be excluded from analytics tracking. * * @example - * // For inline content (default): * * Sensitive filename.pdf * * - * // For block-level content: - * - *
Block content
+ * + * preview * */ export const PrivateContent: React.FC = ({ children, - as: Component = 'span', className = '', + style, ...props }) => { const combinedClassName = `ph-no-capture${className ? ` ${className}` : ''}`; + const combinedStyle = { display: 'contents' as const, ...style }; return ( - + {children} - + ); }; diff --git a/frontend/src/core/components/viewer/LocalEmbedPDF.tsx b/frontend/src/core/components/viewer/LocalEmbedPDF.tsx index bd9af743f..0d963eeca 100644 --- a/frontend/src/core/components/viewer/LocalEmbedPDF.tsx +++ b/frontend/src/core/components/viewer/LocalEmbedPDF.tsx @@ -185,7 +185,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur // Wrap your UI with the provider return ( - +