Redaction Preview Mode Using Custom CSS

loading...
// Initialize PDF viewer with default configuration
window.onload = function () {
    // Configuration constants
    const CONFIG = {
        initialDocument: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/redact-preview.pdf",
        userName: "Document Reviewer"
    };

    // State management
    const state = {
        viewer: null,
        React: null,
        isRedactionPreview: false
    };

    try {
        // 1. Initialize viewer and setup interface
        state.viewer = new DsPdfViewer("#viewer", {
            userName: CONFIG.userName
        });

        // 2. Set up default interface
        state.viewer.addDefaultPanels();
        state.viewer.toggleSidebar(false);

        // 3. Get React instance
        state.React = state.viewer.getType("React");
        if (!state.React) {
            console.warn("React instance not found in viewer");
            return;
        }

        // Create eye icon SVG for the toggle button
        const createEyeIcon = () => state.React.createElement(
            "svg",
            { 
                xmlns: "http://www.w3.org/2000/svg", 
                width: "24", 
                height: "24", 
                viewBox: "0 0 24 24", 
                fill: state.isRedactionPreview ? "#ff0000" : "#008000",
                "aria-hidden": "true"
            },
            state.React.createElement("path", {
                d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
            })
        );

        // Toggle redaction preview mode
        const toggleRedactionPreview = () => {
            state.isRedactionPreview = !state.isRedactionPreview;
            
            state.viewer.removeViewAreaStyle("redaction-preview-style");
            
            if (state.isRedactionPreview) {
                state.viewer.addViewAreaStyle(`
                    .redactAnnotation .trigger { 
                        background: none !important;
                        border: 2px dashed rgba(255, 0, 0, 0.5) !important;
                        box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.3);
                    }
                    .redactAnnotation .trigger *, 
                    .redactAnnotation .trigger img { 
                        display: none !important;
                    }
                `, "redaction-preview-style");
            }
            
            state.viewer.toolbar.updateItem("preview-content", {
                icon: { 
                    type: "svg", 
                    content: createEyeIcon() 
                },
                title: state.isRedactionPreview 
                    ? "Hide redacted content (secure mode)" 
                    : "Preview redacted content (review mode)"
            });
        };

        // Add custom preview button to toolbar
        state.viewer.toolbar.addItem({
            key: "preview-content",
            icon: { 
                type: "svg", 
                content: createEyeIcon() 
            },
            title: "Preview redacted content (review mode)",
            enabled: true,
            action: toggleRedactionPreview
        });

        // Position the button
        state.viewer.toolbarLayout.viewer.default.unshift("preview-content");
        state.viewer.toolbarLayout.viewer.mobile.unshift("preview-content");

        // Load initial document
        state.viewer.open(CONFIG.initialDocument);

    } catch (error) {
        console.error("PDF viewer initialization error:", error);
    }
};