Skip to content

Redaction

Inkbar lets people mark what should be redacted and review suggested redactions one by one. It does not yet remove anything from the file.

Until then, the marks are a review record: who marked what, where and why. Export them as JSON with the rest of the annotations, or send them to a service that applies redactions on your server.

The redact-area tool, labelled “Mark for redaction” on its tool button, makes two kinds of mark:

  • Area marks. Drag a box over any part of the page, including images. With the select tool you can then move it and resize it by its corner handles, or from the keyboard.
  • Text marks. Select text with the view tool, switch to redact-area, then click inside the selection or press Enter. The mark follows the lines of the selection.

Both are redact annotations with origin: 'user'. fill is the colour the area will be filled with once redactions are applied. It defaults to --ink-redact-fill.

A suggested redaction is a redact annotation with origin: 'suggested' and a suggestion. Inkbar has no detector of its own. Run yours, on your server or in the browser, and add what it finds:

doc.history.batch(() => {
for (const match of matches) {
doc.annotations.add({
type: 'redact',
page: match.page,
quads: match.quads, // or rect for an area
origin: 'suggested',
suggestion: {
confidence: match.confidence, // 0 to 1
reason: 'Email address',
explanation: `Matched ${match.text}`,
recommendation: 'redact', // or 'review' or 'keep'
},
})
}
})

batch makes the whole set one undo step. In a framework app, use batch from useHistory() instead, which also works in controlled mode. doc.text(page) returns a page’s text runs with their positions in PDF user space, which is what you need to turn a match into quads.

The sandbox has a working example: its “Suggest redactions” button runs a small pattern matcher for email addresses, UK phone numbers and National Insurance numbers. The source is in apps/sandbox/src/shared/suggest.ts.

Each suggestion takes its colour from its confidence: below 0.5 is low, below 0.8 is medium, and the rest are high. The colours come from --ink-suggestion-low, --ink-suggestion-medium and --ink-suggestion-high, and the mark carries data-origin="suggested" and data-confidence="low|medium|high" for your own CSS.

Activating a suggestion opens InkSuggestionCard (or the card createViewer adds). It shows the reason, the confidence level and the explanation, with two actions:

  • Accept turns it into an ordinary mark: origin becomes 'user' and it takes the normal redaction colour. It keeps its suggestion, so you can still see where it came from.
  • Dismiss removes it.

Both are undoable. To do the same from your own UI, call accept(id) and dismiss(id) from useAnnotations(), or acceptSuggestion(doc.annotations, id) from @inkbar/core.

To render the card yourself, use its scoped default slot in Vue, a function as children in React, or a children snippet in Svelte. It receives annotation, suggestion, bucket, accept, dismiss and close, typed as SuggestionCardSlotProps.