Is there an api to add or change the redaction presets in the dropdown when using the redaction tool? I want to give users a set of predefined redaction labels/colors, is this possible?
Hi Mark,
We have two APIs to achieve what you want.
- addRedactionSearchPatter: This API allows you to set your custom search pattern with your custom label/icon/regex.
- replaceRedactionSearchPattern: This one allows you to override the regex of one of the built-in search patterns, if for example, you wanted to tweak the phone number search pattern to match a particular region.
Additionally, we have a third API to remove any search patterns:
Let me know if you have any further questions.
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
Mark,
I may have misunderstood your question and thought you were referring to the preset redaction search patterns in our redaction panel.
If you just need to change the presets of the Redaction tool you can use the setStyles API.
The viewer ships with four instances of the tool (four tools shown in the tools preset) - let’s say you wanted to change the default text for the first one. This is how I would achieve that:
const { documentViewer, Annotations, annotationManager, Tools } = instance.Core;
const redactionTool = documentViewer.getTool(Tools.ToolNames.REDACTION);
redactionTool.setStyles({
OverlayText: 'My Text'
});
The styles object also accepts properties like StrokeColor etc. I’ll leave my first response up in case you find it useful, but let me know if I actually got it right this time.
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
Hi Armando, I think the second one is more what I want, is it limited to the four shown in the tools preset or can you add more than that?
Hey Mark,
So as I mentioned the viewer comes with four instances of the redaction tool:
However, there’s nothing stopping you from adding additional tools if you wish to do so. Here is a quick example of how I would add a fifth tool:
const { documentViewer, Annotations, annotationManager, Tools } = instance.Core;
// Create new instance of the tool
const redactionTool5 = new Tools.RedactionCreateTool(documentViewer);
// Registed it with the viewer
instance.UI.registerTool({
toolName: 'AnnotationCreateRedaction5',
toolObject: redactionTool5,
buttonImage: 'icon-tool-select-area-redaction',
buttonName: 'redactionButton5',
})
// Link the tool to a button and add it to the header
const redactionToolButton5 = {
type: 'toolButton',
toolName: 'AnnotationCreateRedaction5',
}
instance.UI.setHeaderItems(header => {
header.push(redactionToolButton5);
});
I just pushed it to the top level but here is how it looks:
The only limitation here is that the tools preset only fits four tools max, but there’s nothing limiting you from placing extra tools elsewhere.
Here are some relevant APIs for you and a guide on customizing headers:
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
This is helpful! Would you know if theres restrictions on if you can put a tool button like that into a custom left panel? It looks like I can add it to the redaction toolbar, but if the list gets longer I would prefer to put it into a custom panel if possible.
Hey Mark,
While that technically is possible, you won’t be able to use the nice buttons abstractions that are supported in the header. That’s because panels can only accept:
- HTML Elements
- React components
So you could most definitely define your own button to active a tool from the panel, but you’d have to set it up from scratch. You’d have to wire the onclick to activate a particular tool. You would also have to handle its state to determine its styling based on which tool is active.
Some relevant APIs to activate tool modes and listen to tool changes are here:
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
Hi Armando, last question, is it possible to trigger the redaction search programmatically instead of the main search feature: i.e instance.UI.searchTextFull opens the full text search panel, but Id like to trigger the redaction search panel if possible.
Hi Mark,
We actually have no exposed API to run redaction searches programatically like we do for the method you shared. This could be something we can add to the backlog if you have a use case for it. Alternatively, you could always run the lower level search with the document viewer, and create redaction annotations for each result. You can see how the document viewer search is done in this guide:
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
I do have a client that has a use case for redaction searches, they allow users to create custom regex search patterns to later search documents that require redaction. I’ve hooked up a search icon to the context menu when selecting text and they would like that to trigger the redaction search rather than the full text search. Does that make sense?
Also in the redaction demo on the website, there is a custom sidebar that has two search boxes, they both trigger the redaction search programmatically here: JS PDF Redaction Demo | PDFTron WebViewer
Hey Mark,
Thanks for clarifying. I was referring to the redaction search panel - the one that shows search results but doesn’t add redaction annotations unless done so by the user.
If your flow is to simply search a term and automatically add a redaction annotation to it, you can do the same thing the demo is doing, which is running a programatic search and then adding a redaction annotation to each result.
From the guide I linked above, this is what the code could look like:
const searchText = 'TEXT TO SEARCH';
const mode = Search.Mode.PAGE_STOP | Search.Mode.HIGHLIGHT;
const searchOptions = {
// If true, a search of the entire document will be performed. Otherwise, a single search will be performed.
fullSearch: true,
// The callback function that is called when the search returns a result.
onResult: result => {
// with 'PAGE_STOP' mode, the callback is invoked after each page has been searched.
if (result.resultCode === Search.ResultCode.FOUND) {
const textQuad = result.quads[0].getPoints(); // getPoints will return Quad objects
// now that we have the result Quads, it's possible to create redaction annotations with these results
// for example this is the code that adds redactions to search results in the panel
// const redaction = new Annotations.RedactionAnnotation();
// redaction.PageNumber = result.page_num;
// redaction.Quads = result.quads.map((quad) => quad.getPoints());
// redaction.StrokeColor = StrokeColor;
// redaction.OverlayText = OverlayText;
// redaction.FillColor = FillColor;
// redaction.setContents(result.result_str);
// redaction.Author = 'some user'
// Now that you have an annotation add it to the annotation manager as usual
}
}
};
documentViewer.textSearchInit(searchText, mode, searchOptions);
If you want a closer look at how search results are turned into redaction annotations here is how we do it.
Anytime you add a redaction the panel will automatically open so there is no need to handle that yourself.
I think that should cover your use case - you could just wire the search to the button you specify.
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
Close but what they really want is the search to actually populate the redaction search result panel so that they can see all instances of the result easily and use the check boxes to optionally mark certain results as ready for redaction.
So that is the flow that is currently not fully supported via APIs. If you notice the demo you linked creates the redaction annotations for all hits. As a side effect is also shows the search results if you activate the redaction search panel, but if you go back to the panel you will notice that it will have created annotations for all the results without first giving users a chance to review the results.
I can add an item to our backlog to enable just the search portion via an API for the redaction panel.
Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.
1 Like
Thanks, Very much appreciated!