feat(print/pdf): disable selection in preview

This commit is contained in:
Elian Doran
2026-04-15 17:14:44 +03:00
parent 3a1f0b2be1
commit f68a481edc
2 changed files with 13 additions and 5 deletions

View File

@@ -310,7 +310,7 @@ export default function PrintPreviewDialog() {
<span class="bx bx-loader-circle bx-spin" style={{ fontSize: "2rem" }} />
</div>
)}
{pdfUrl && <PdfViewer pdfUrl={pdfUrl} />}
{pdfUrl && <PdfViewer pdfUrl={pdfUrl} disableSelection />}
</div>
</Modal>
);

View File

@@ -22,16 +22,18 @@ interface PdfViewerProps extends Pick<HTMLAttributes<HTMLIFrameElement>, "tabInd
* If set, enables editable mode which includes persistence of user settings, annotations as well as specific features such as sending table of contents data for the sidebar.
*/
editable?: boolean;
/** If set, disables text selection in the rendered PDF. */
disableSelection?: boolean;
}
/**
* Reusable component displaying a PDF. The PDF needs to be provided via a URL.
*/
export default function PdfViewer({ iframeRef: externalIframeRef, pdfUrl, onLoad, editable }: PdfViewerProps) {
export default function PdfViewer({ iframeRef: externalIframeRef, pdfUrl, onLoad, editable, disableSelection }: PdfViewerProps) {
const iframeRef = useSyncedRef(externalIframeRef, null);
const [ locale ] = useTriliumOption("locale");
const [ newLayout ] = useTriliumOptionBool("newLayout");
const injectStyles = useStyleInjection(iframeRef);
const injectStyles = useStyleInjection(iframeRef, disableSelection);
return (
<iframe
@@ -47,7 +49,7 @@ export default function PdfViewer({ iframeRef: externalIframeRef, pdfUrl, onLoad
);
}
function useStyleInjection(iframeRef: RefObject<HTMLIFrameElement>) {
function useStyleInjection(iframeRef: RefObject<HTMLIFrameElement>, disableSelection?: boolean) {
const styleRef = useRef<HTMLStyleElement | null>(null);
// First load.
@@ -65,7 +67,13 @@ function useStyleInjection(iframeRef: RefObject<HTMLIFrameElement>) {
fontStyles.textContent = FONTS.map(injectFont).join("\n");
doc.head.appendChild(fontStyles);
}, [ iframeRef ]);
if (disableSelection) {
const selectionStyles = doc.createElement("style");
selectionStyles.textContent = `.textLayer, .textLayer * { user-select: none !important; cursor: default !important; }`;
doc.head.appendChild(selectionStyles);
}
}, [ iframeRef, disableSelection ]);
// React to changes.
useEffect(() => {