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)

[reecebrowne]

I'm thinking more of a dropdown? this way the user would know what this option does (if it's just a button the user might not figure out what it does without a tutorial)

Convert to image should be a simple enough concept to convey via a tooltip, we also have an existing icon for it so I wouldn't be too worried about this.

or we can have 2 buttons, 1 for page based redactions (the one above), and the other would be a generic button containing options and fields related to the file or the operations in general, why? We might need in the future to integrate extra features that might not have a specific category into the feature, example: output filename, in this case, the user will find the generic ones over there, what do you think?

Page based redactions should definitely be it's own thing, some kind of dropdown or submenu is necessary for functionality but it's not really something I think should be bundled into a settings/properties menu.
If you think there's some value in a settings menu for other reasons in additional features I'm not against the menu existing but I think you're bundling key features away in a slightly confusing place with the stuff that's already in. Stuff like output filename is a good example of something that would make sense in such a submenu, key redaction features should be directly in the toolbar

I think I managed to accomplish that after reading your instructions, thanks for your help!

Code looks good, thanks for sorting that.

[omar-ahmed42]

I agree with you everything you mentioned.

Toolbar: You can see that I added a new button as instructed, when it's in green it indicates being "checked" when in red, it indicates being unchecked:

Page based redaction:

[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]

Looking good!

Thinking the following icon for full page redaction
https://fonts.google.com/icons?selected=Material+Symbols+Outlined:document_scanner:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=page&icon.size=24&icon.color=%23e8eaed

Rotated pages aren't working at the moment, see below.

I know we use it elsewhere but the drag box for box selection isn't great, it would be much better if it was click then drag, the current behaviour was weird. There may be some library out there you could use instead. Would be great if you can look into this but it is a bit out of scope so no pressure if you don't fancy it.

[reecebrowne]

Additional issue, if you do some redactions, download that redacted pdf then upload a new pdf and do redactions on that the redactions from the first pdf will apply to the second but don't show up in the UI

[omar-ahmed42]

Thinking the following icon for full page redaction
https://fonts.google.com/icons?selected=Material+Symbols+Outlined:document_scanner:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=page&icon.size=24&icon.color=%23e8eaed

I think either the icon you suggested or this one https://fonts.google.com/icons?selected=Material+Symbols+Outlined:post_add:FILL@0;wght@400;GRAD@0;opsz@20&icon.query=page&icon.size=16&icon.color=%23e8eaed

Rotated pages aren't working at the moment, see below.

I will take a look at it, worst case scenario, might disable pdf rotation until the issue is resolved.

Additional issue, if you do some redactions, download that redacted pdf then upload a new pdf and do redactions on that the redactions from the first pdf will apply to the second but don't show up in the UI

I will take a look at this one as well but I think I have an idea why it happens

I know we use it elsewhere but the drag box for box selection isn't great, it would be much better if it was click then drag, the current behaviour was weird. There may be some library out there you could use instead. Would be great if you can look into this but it is a bit out of scope so no pressure if you don't fancy it.

I know we use it elsewhere but the drag box for box selection isn't great, it would be much better if it was click then drag, the current behaviour was weird. There may be some library out there you could use instead. Would be great if you can look into this but it is a bit out of scope so no pressure if you don't fancy it.

It's okay I can take a look at it, but I will prioritize the issues mentioned earlier in this thread/conversation then I will start looking into it

[omar-ahmed42]

• Updated the icon using https://fonts.google.com/icons?selected=Material+Symbols+Outlined:document_scanner:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=page&icon.size=24&icon.color=%23e8eaed (the one you suggested)

Additional issue, if you do some redactions, download that redacted pdf then upload a new pdf and do redactions on that the redactions from the first pdf will apply to the second but don't show up in the UI
Fixed it

• Temporarily disabled rotation shortcut until I work on its bug (I might start working on it tomorrow, in the mean time, I have it disabled).

[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]

The toolbar doesn't resize very well, this all overlaps on my vertical monitor

Temporarily disabled rotation shortcut until I work on its bug (I might start working on it tomorrow, in the mean time, I have it disabled).

Disabling rotation on this page doesn't really solve anything as this bug exists if the user wants to redact a pdf already rotated to landscape before upload so it will have to be sorted before release

Other bug fixes look good. Keep it up!

[omar-ahmed42]

Fixed the rotation bug, I'm currently in the process of fixing the toolbar and the overlapping issue

[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]

Rotation fix for text selection world really well, still bugged for box select though.

[omar-ahmed42]

still bugged for box select though.

Can you explain the issue in box select? because it seems to be working in my case, I tried box redacting at 0, 90, 180, 270 angles and it is somehow working, unless there's a specific use case that I'm missing.