Redact a document

[eyeseast]

Draw a black box on a document, triggering a server-side reprocess. We need to render the PDF to do this.

API docs: https://www.documentcloud.org/help/api#redactions

[eyeseast]

For both redaction and annotation, we need to make the cursor a crosshair to indicate that a user can drag a box on a document. We also need to handle the events to draw that box. How do we manage this?

The obvious place for a lot of this interaction is the PDFPage.svelte component, which is already the most complicated part of the viewer. Can we stack another thing on top of it?

Some ideas:

• Overload the ViewerMode type with redacting and annotating modes, and handle those like document
• Add a ViewerAction type with redacting, modifying, annotating
• Conditionally render another pane, like the selectable text container, on top of everything else
• Add a slot that handles redaction and annotation events, and handle that higher up (I guess in PDF.svelte)

[eyeseast]

I'm going to add properties for annotations and redactions in progress, both so we can demo it in Storybook and also as a way to pass data into the PDF components.

When we send a redaction to the API, it sends back the same data on success, so we can re-render the viewer with that data on the next request.

[eyeseast]

Another idea: What if there's a RedactionPane component that renders a transparent canvas element I can draw boxes on, and it exports a store for active redactions? That might let me bundle some data and UI together.

The downside to this is that canvas is entirely imperative: I probably need to erase and redraw the whole canvas on each update. But maybe it's just a div with span elements. Boxes are easy to draw.