Feature: Support manual redaction

[omar-ahmed42]

Description

Manual Redaction:

• Text Selection-based redaction:

  • 
  • Users can now redact currently selected text by selecting the text then clicking ctrl + s shortcut or by pressing on apply/save/disk icon in the toolbar.
  • Users can delete/cancel the redacted area by clicking on the box containing the text, then clicking on delete/trash icon or by using the shortcut delete.
  • Users can customize the color of the redacted area/text (after the redaction was applied) by simply clicking on the box containing the text/area then clicking on the color palette icon and choosing the color they want.
  • Users can choose to select the color of redaction before redacting text or applying changes (this only affects newly created redaction areas, to change the color of an existing one; check the previous bullet point).

• Draw/Area-based redaction:

  • 
  • Users can now redact an area in the page by selecting the then clicking ctrl + s shortcut or by pressing on apply/save/disk icon in the toolbar.
  • Users can delete/cancel the redacted area by clicking on the drawn box, then clicking on delete/trash icon or by using the shortcut delete (requires temporarily turning off drawing mode).
  • Users can customize the color of the redacted area (after the redaction was applied) by simply clicking on the box containing the area then clicking on the color palette icon and choosing the color they want.
  • Users can choose to select the color of redaction before drawing the box or applying changes (this only affects newly created redaction areas, to change the color of an existing one; check the previous bullet point).

• Page-based redaction:

  • 
  • Users can now redact ENTIRE pages by specifying the page number(s), range(s) or functions.
  • Users can customize the color of page-based redaction (doesn't affect text-based nor draw-based redactions).

Redaction modes:

There are three modes of redaction/operation currently supported

• Text Selection-based redaction (TEXT)
• Draw/Area-based redaction (DRAWING)
• None - by simply not choosing any of the above modes (NONE).

How to use:

• Text Selection-based redaction: click on this icon in the toolbar to enable text-selection redaction mode then select the text you want to redact then press ctrl + s or click on the disk/save icon .

• Draw/Area-based redaction: click on this icon in the toolbar to enable draw/area-based redaction then left mouse click (LMB) on the starting point of the rectangle, then once you are satisfied with the rectangle's placement/dimensions then left mouse click (LMB) again to apply the redaction.

  • Example: Left mouse click (LMB) then move mouse to the right then bottom then Left mouse click (LMB).
  • Note: Red box/rectangle borders indicate that you have not yet saved (you need to left click on the page to save) once saved the borders will become green (they also become clickable/hover-able when drawing mode is off).

• Page-based redactions:: Insert the page number(s), range(s) and/or functions (separated by ,) then select your preferred color and click on Redact to submit.
  

• Color Customizations:

  • You can change the redaction color for new redactions by clicking on this icon in the toolbar .
  • You can change the redaction color for existing redactions by hovering over the redaction box then clicking on it (Left mouse click LMB) then clicking on color palette (highlighted in red in the picture) then select your preferred color.

• Deletions:

  • You can delete a redacted area by hovering over the redaction box then clicking on it (Left mouse click LMB) then clicking on the trash icon (highlighted in red in the picture) .

Card in the home page:

Closes #465

Checklist

• I have read the Contribution Guidelines
• I have performed a self-review of my own code
• I have attached images of the change if it is UI based
• I have commented my code, particularly in hard-to-understand areas
• If my code has heavily changed functionality I have updated relevant docs on Stirling-PDFs doc repo
• My changes generate no new warnings
• I have read the section Add New Translation Tags (for new translation tags only)

[omar-ahmed42]

Could we get the page based redaction to have an "apply" button instead of just close and have it be reflected in the preview? Close should be to close that window without applying a redaction.

Sure, but a few questions regarding this point:

• by "Preview", do you mean somewhat similar to box redactions, so the page would be surrounded with a border and upon hover it turns into the selected color or the page would be filled with the selected color without the need for hover?

Would be good if the colour picker was displayed just below the button in the toolbar rather than the top corner too
Can you elaborate on that? At the moment, there are 3 color pickers, each with different purpose:

1. Toolbar's color picker: this one is mainly used to select a generic color to be used in text/box redactions (In short, the color that would be used on future text/box redactions).
2. Page-based redaction color picker: this one is mainly used to select a color for page redactions, it's separate from the toolbar's color picker, why? to give the user the flexibility to choose the color fitting for the user's use case.
3. Custom color picker for existing redactions: this one is used to allow user's to change the color of specific box/text redactions.

Could you please explain what the issue was and how you fixed it for other browsers so I can help out sorting it for Safari?
If I could remember correctly, basically, there's a function called "setMousePosition(e)" its responsibility is simply setting the mouse position details in the current text layer, so I had the following code:
let ev = e || window.event; if (ev.pageX) { mouse.x = e.layerX; mouse.y = e.layerY; }

This code worked like a charm for Firefox but I forgot to take into account chromium browsers and Safari, so I added the following:
if (!isChromium && ev.pageX) { mouse.x = e.layerX; mouse.y = e.layerY; } else if (isChromium) { mouse.x = e.offsetX; mouse.y = e.offsetY; } else { let rect = (e.target || e.srcElement).getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; }

and added the following line early when window receives 'load' event:
let isChromium = !!window.chrome || (!!navigator.userAgentData && navigator.userAgentData.brands.some((data) => data.brand == "Chromium"));

On second look, it should be as follows:
`
if (isChromium || isSafari || isWebkit){
mouse.x = e.offsetX;
mouse.y = e.offsetY;
} else if (isFirefox || isGecko)
{
mouse.x = e.layerX;
mouse.y = e.layerY;
} else {

    // Would not work correctly in the case of "other browsers" for rotated pdfs
    let rect = (e.target || e.srcElement).getBoundingClientRect();
      mouse.x = e.clientX - rect.left;
      mouse.y = e.clientY - rect.top;
    }

`

This should make it work for most major browsers, be it based on webkit/gecko, or just a Chromium/Firefox browser.

This feature is getting really close to release ready and is looking really good!
Glad to hear that!

Let me know if there's any work on it you'd like to hand off to me.

Sure! I will let you know if anything comes up, thank you!

[omar-ahmed42]

After applying these changes, It should work now on Safari, I have tested it again on Chrome, Firefox and Edge. Opera should not be affected by these changes considering that it's working on Edge and Chrome, as for Safari, it should work now.

[reecebrowne]

• by "Preview", do you mean somewhat similar to box redactions, so the page would be surrounded with a border and upon hover it turns into the selected color or the page would be filled with the selected color without the need for hover?

Yeah not 100% sure on the implementation but we need sth that indicates to the user that the full page redaction is going to happen, right now they don't know it has applied, or perhaps even what the feature does, until after they download. I think perhaps a border to the page and a fill on hover like you suggest would work nicely

Would be good if the colour picker was displayed just below the button in the toolbar rather than the top corner too
Can you elaborate on that? At the moment, there are 3 color pickers, each with different purpose:

The colour picker in the main toolbar, it opens right in the corner

compared to this which opens right beneath the button to open it

Note:we perhaps should have all the colour picker buttons match the one in the toolbar with the icon, for consistency.

Thanks for the prompt reply, we will test Safari out with the new fix and see if it works.

[omar-ahmed42]

Yeah not 100% sure on the implementation but we need sth that indicates to the user that the full page redaction is going to happen, right now they don't know it has applied, or perhaps even what the feature does, until after they download. I think perhaps a border to the page and a fill on hover like you suggest would work nicely

I agree, we can also add some explanation somewhere in this form later on.

The colour picker in the main toolbar, it opens right in the corner

Oh, I see now, I will see what I can do.

Note:we perhaps should have all the colour picker buttons match the one in the toolbar with the icon, for consistency.

Sure, we can try going for it, if it felt off then we can go back to previous one.

Thanks for the prompt reply, we will test Safari out with the new fix and see if it works.

Thanks!

[omar-ahmed42]

• Validation has been added to "pages" field in the form along with error messages that might be helpful to the user.
• Added apply button to save changes to page based redaction.
• Added preview to redacted pages, now, redacted pages have a blue border (different color compared to normal redactions to make it easier for users to differentiate between the two), and on hover, the page switches to selected color for page redactions.
• Color picker now is displayed below the color selection button in Chrome and Microsoft Edge (Does not work in Firefox, I will explain below).
• Shortened "Page Redaction Color" to "Redaction Color" in Page-based Redaction overlay.
• Appended a "palette" icon next to "Redaction Color" in Page-based Redaction overlay.

FAQ:

• Why is the color picker not displayed below the button in Firefox even though it is working in Chrome and Edge?

  • In general, there's no actual way to change the color picker's location in any browser, but there's a work around for it in Chrome and Edge, how? by simply hiding the input button, changing its position to absolute, set height to 0, change the "left" and "top" values for it, example: left: 0, top: 24px to place it below a button of height 24px. But this work around doesn't work Firefox, thus, there's no way change its placement in Firefox, unless we manually implement color picker's in general as divs but this might take a very long time and at the same time is error-prone.

• Why did you not use palette button in the page based redaction overlay instead of appending it to existing text "Redaction Color"?

  • It might not fit the current overall design of form/overlay as it would be a vertical button floating in the form, might make the feeling off to the user.

Validation errors:

If you have any feedback, ideas or notes, let me know! and also, let me know what you think!

[reecebrowne]

/deploypr

[github-actions]

🚀 PR Test Deployment

Your PR has been deployed for testing!

🔗 Test URL: http://185.252.234.121:2433

This deployment will be automatically cleaned up when the PR is closed.

[reecebrowne]

Hey mate, great updates! We have tested on Safari and your fix is working perfectly now.

Is there any chance you could look in to improving the tool for creating box redactions? The click and drag mechanic as it is isn't very user friendly.

[omar-ahmed42]

Hey mate, great updates! We have tested on Safari and your fix is working perfectly now.

Is there any chance you could look in to improving the tool for creating box redactions? The click and drag mechanic as it is isn't very user friendly.

Hey, sure! I will look into it.

[github-actions]

🚀 Translation Verification Summary

🔄 Reference Branch: pr-branch-messages_en_GB.properties

📃 File Check: messages_en_GB.properties

1. Test Status: ✅ Passed
2. Test Status: ✅ Passed

---

✅ Overall Check Status: Success

Thanks @omar-ahmed42 for your help in keeping the translations up to date.

[omar-ahmed42]

Now, you can use click and drag mechanism.