feat(redaction): improve manual redaction with color selection and updated UI elements (#5679)

# Description of Changes <img width="1920" height="977" alt="image" src="https://github.com/user-attachments/assets/17e451b7-df2b-4097-b8aa-66954d89b935" />  --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Signed-off-by: Balázs Szücs <[email protected]>
2026-07-16 11:23:10 +02:00 · 2026-02-12 19:26:26 +00:00
parent 4b14ddfb37
commit f3a4dbc903
6 changed files with 113 additions and 105 deletions
@@ -131,7 +131,10 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, enableReda

      // Register redaction plugin (depends on InteractionManager, Selection, History)
      // Always register for redaction functionality
-      createPluginRegistration(RedactionPluginPackage),
+      createPluginRegistration(RedactionPluginPackage, {
+        useAnnotationMode: true,
+        drawBlackBoxes: false,
+      }),

      // Register pan plugin (depends on Viewport, InteractionManager)
      createPluginRegistration(PanPluginPackage, {
@@ -645,7 +648,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, enableReda
        {(enableAnnotations || enableRedaction || isManualRedactionMode) && <SignatureAPIBridge ref={signatureApiRef} />}
        {(enableRedaction || isManualRedactionMode) && <RedactionPendingTracker ref={redactionTrackerRef} />}
        {enableAnnotations && <AnnotationAPIBridge ref={annotationApiRef} />}
-        
+
        <ExportAPIBridge />
        <BookmarkAPIBridge />
        <PrintAPIBridge />
@@ -706,12 +709,13 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, enableReda

                          <SelectionLayer documentId={documentId} pageIndex={pageIndex} />

-                          {/* AnnotationLayer for annotation editing (only when enabled) */}
-                          {enableAnnotations && (
+                          {/* AnnotationLayer for annotation editing and annotation-based redactions */}
+                          {(enableAnnotations || enableRedaction) && (
                            <AnnotationLayer
                              documentId={documentId}
                              pageIndex={pageIndex}
                              selectionOutlineColor="#007ACC"
+                              selectionMenu={(props) => <RedactionSelectionMenu {...props} />}
                            />
                          )}

@@ -1,7 +1,9 @@
 import { useEffect, useImperativeHandle } from 'react';
 import { useRedaction as useEmbedPdfRedaction } from '@embedpdf/plugin-redaction/react';
+import { PdfAnnotationSubtype } from '@embedpdf/models';
 import { useRedaction } from '@app/contexts/RedactionContext';
 import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
+import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';

 /**
 * RedactionAPIBridge - Uses embedPDF v2.5.0
@@ -10,24 +12,25 @@ import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId'
 */
 export function RedactionAPIBridge() {
  const activeDocumentId = useActiveDocumentId();
-  
+
  // Don't render the inner component until we have a valid document ID
  if (!activeDocumentId) {
    return null;
  }
-  
+
  return <RedactionAPIBridgeInner documentId={activeDocumentId} />;
 }

 function RedactionAPIBridgeInner({ documentId }: { documentId: string }) {
-  const { state, provides } = useEmbedPdfRedaction(documentId);
-  const { 
-    redactionApiRef, 
-    setPendingCount, 
-    setActiveType, 
+  const { state, provides: redactionProvides } = useEmbedPdfRedaction(documentId);
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const {
+    redactionApiRef,
+    setPendingCount,
+    setActiveType,
    setIsRedacting,
-    setRedactionsApplied,
-    setBridgeReady
+    setBridgeReady,
+    manualRedactColor
  } = useRedaction();

  // Mark bridge as ready on mount, not ready on unmount
@@ -45,34 +48,51 @@ function RedactionAPIBridgeInner({ documentId }: { documentId: string }) {
      setActiveType(state.activeType ?? null);
      setIsRedacting(state.isRedacting ?? false);
    }
-  }, [state?.pendingCount, state?.activeType, state?.isRedacting, setPendingCount, setActiveType, setIsRedacting]);
+  }, [state, setPendingCount, setActiveType, setIsRedacting]);
+
+  // Synchronize manual redaction color with EmbedPDF
+  // Manual redaction uses the 'redact' annotation tool internally
+  useEffect(() => {
+    const annotationApi = annotationProvides as any;
+    if (annotationApi?.setToolDefaults) {
+      annotationApi.setToolDefaults('redact', {
+        type: PdfAnnotationSubtype.REDACT,
+        strokeColor: manualRedactColor,
+        color: manualRedactColor,
+        overlayColor: manualRedactColor,
+        fillColor: manualRedactColor,
+        interiorColor: manualRedactColor,
+        backgroundColor: manualRedactColor,
+        opacity: 1
+      });
+    }
+  }, [annotationProvides, manualRedactColor]);

  // Expose the EmbedPDF API through our context's ref
  // Uses v2.5.0 unified redaction mode
  useImperativeHandle(redactionApiRef, () => ({
    // Unified redaction methods (v2.5.0)
    toggleRedact: () => {
-      provides?.toggleRedact();
+      redactionProvides?.toggleRedact();
    },
    enableRedact: () => {
-      provides?.enableRedact();
+      redactionProvides?.enableRedact();
    },
    isRedactActive: () => {
-      return provides?.isRedactActive() ?? false;
+      return redactionProvides?.isRedactActive() ?? false;
    },
    endRedact: () => {
-      provides?.endRedact();
+      redactionProvides?.endRedact();
    },
    // Common methods
    commitAllPending: () => {
-      provides?.commitAllPending();
+      redactionProvides?.commitAllPending();
      // Don't set redactionsApplied here - it should only be set after the file is saved
      // The save operation in applyChanges will handle setting/clearing this flag
    },
    getActiveType: () => state?.activeType ?? null,
    getPendingCount: () => state?.pendingCount ?? 0,
-  }), [provides, state, setRedactionsApplied]);
+  }), [redactionProvides, state]);

  return null;
 }
-
@@ -1,4 +1,5 @@
 import { useRedaction as useEmbedPdfRedaction, RedactionSelectionMenuProps } from '@embedpdf/plugin-redaction/react';
+import { PdfAnnotationSubtype } from '@embedpdf/models';
 import { ActionIcon, Tooltip, Button, Group } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
@@ -10,7 +11,7 @@ import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId'

 export type { RedactionSelectionMenuProps };

-export function RedactionSelectionMenu(props: RedactionSelectionMenuProps) {
+export function RedactionSelectionMenu(props: any) {
  const activeDocumentId = useActiveDocumentId();

  // Don't render until we have a valid document ID
@@ -32,7 +33,12 @@ function RedactionSelectionMenuInner({
  selected,
  menuWrapperProps,
 }: RedactionSelectionMenuProps & { documentId: string }) {
-  const item = context?.item;
+  const item = context?.type === 'redaction'
+    ? context.item
+    : (context?.type === 'annotation' ? (context as any).annotation?.object : null);
+
+  const isRedaction = context?.type === 'redaction' || (context?.type === 'annotation' && item?.type === PdfAnnotationSubtype.REDACT);
+
  const pageIndex = context?.pageIndex;
  const { t } = useTranslation();
  const { provides } = useEmbedPdfRedaction(documentId);
@@ -64,7 +70,7 @@ function RedactionSelectionMenuInner({

  // Calculate position for portal based on wrapper element
  useEffect(() => {
-    if (!selected || !item || !wrapperRef.current) {
+    if (!selected || !isRedaction || !item || !wrapperRef.current) {
      setMenuPosition(null);
      return;
    }
@@ -99,7 +105,7 @@ function RedactionSelectionMenuInner({
  }, [selected, item]);

  // Early return AFTER all hooks have been called
-  if (!selected || !item) return null;
+  if (!selected || !isRedaction || !item) return null;

  const menuContent = menuPosition ? (
    <div