Manual Redaction: Text based redaction configured by default (#3317)

Redaction applied as soon as text highlighted
Removed  Apply button

# Description of Changes

Manual redaction: 
- Text based redaction configured by default
- Redaction applied as soon as text highlighted
- Removed  Apply button

Closes #(2704)

---

## Checklist

### General

- [x ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x ] I have performed a self-review of my own code
- [x ] 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/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### 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)

- [x ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

src/main/resources/static/css/redact.css

@@ -172,26 +172,6 @@ html {
   height: 0;
 }
 
-#apply-redaction {
-  height: var(--toolButton-height);
-  width: var(--toolButton-width);
-
-  border-radius: var(--toolButton-border-radius);
-}
-
-#apply-redaction[disabled=true], #apply-redaction:disabled:not([disabled=false]) {
-  color: rgb(147, 149, 153);
-  box-shadow: none !important;
-}
-
-#apply-redaction:is(:hover):not([disabled=true], :disabled:not([disabled=false])) {
-  cursor: pointer;
-  background-color: rgba(6, 114, 197, 0.82);
-  color: rgb(14, 12, 12);
-  outline:rgba(6, 114, 197, 0.82) !important;
-  border-color: rgba(6, 114, 197, 0.82) !important;
-}
-
 .toolbar-btn-hover:hover {
   cursor: pointer;
   background-color: rgba(6, 114, 197, 0.82) !important;
@@ -200,15 +180,6 @@ html {
   border-color: rgba(6, 114, 197, 0.82) !important;
 }
 
-#apply-redaction-icon {
-  font-size: var(--toolButton-icon-font-size);
-}
-
-#apply-redaction > span {
-  user-select: none;
-  pointer-events: none;
-}
-
 #pageRedactColor, input[data-for=pageRedactColor] {
   flex: 1;
   padding: 1px;

src/main/resources/static/js/redact.js

@@ -206,8 +206,6 @@ window.addEventListener('load', (e) => {
 
   let redactionsPaletteContainer = document.getElementById('redactionsPaletteContainer');
 
-  let applyRedactionBtn = document.getElementById('apply-redaction');
-
   let redactedPagesDetails = {
     numbers: new Set(),
     ranges: new Set(),
@@ -249,7 +247,6 @@ window.addEventListener('load', (e) => {
           displayFieldErrorMessages(input, errors);
         } else {
           pageBasedRedactionOverlay.classList.add('d-none');
-          applyRedactionBtn.removeAttribute('disabled');
           input.classList.remove('is-valid');
 
           let totalPagesCount = PDFViewerApplication.pdfViewer.pagesCount;
@@ -320,19 +317,28 @@ window.addEventListener('load', (e) => {
 
   redactionsPaletteContainer.onclick = (e) => redactionsPalette.click();
 
+  function clearSelection() {
+    if (window.getSelection) {
+      if (window.getSelection().empty) {
+        // Chrome
+        window.getSelection().empty();
+      } else if (window.getSelection().removeAllRanges) {
+        // Firefox
+        window.getSelection().removeAllRanges();
+      }
+    } else if (document.selection) {
+      // IE?
+      document.selection.empty();
+    }
+  }
+  
   viewer.onmouseup = (e) => {
     if (redactionMode !== RedactionModes.TEXT) return;
     const containsText = window.getSelection() && window.getSelection().toString() != '';
-    applyRedactionBtn.disabled = !containsText;
+    if(containsText){
-  };
+      redactTextSelection();
-
+      clearSelection();
-  applyRedactionBtn.onclick = (e) => {
-    if (redactionMode !== RedactionModes.TEXT) {
-      applyRedactionBtn.disabled = true;
-      return;
     }
-    redactTextSelection();
-    applyRedactionBtn.disabled = true;
   };
 
   redactionsPaletteInput.onchange = (e) => {
@@ -413,41 +419,28 @@ window.addEventListener('load', (e) => {
     };
 
     initDraw(layer, redactionsContainer);
+    enableTextRedactionMode();
 
     function _handleTextSelectionRedactionBtnClick(e) {
       if (textSelectionRedactionBtn.classList.contains('toggled')) {
         resetTextSelection();
       } else {
-        resetDrawRedactions();
+        enableTextRedactionMode();
-        textSelectionRedactionBtn.classList.add('toggled');
-        redactionMode = RedactionModes.TEXT;
-        const containsText = window.getSelection() && window.getSelection().toString() != '';
-        applyRedactionBtn.disabled = !containsText;
-        applyRedactionBtn.classList.remove('d-none');
       }
     }
 
+    function enableTextRedactionMode() {
+      if(!textSelectionRedactionBtn.classList.contains('toggled')){
+        textSelectionRedactionBtn.classList.add('toggled');
+      }
+      resetDrawRedactions();
+      redactionMode = RedactionModes.TEXT;
+    };
+
     function resetTextSelection() {
       textSelectionRedactionBtn.classList.remove('toggled');
       redactionMode = RedactionModes.NONE;
       clearSelection();
-      applyRedactionBtn.disabled = true;
-      applyRedactionBtn.classList.add('d-none');
-    }
-
-    function clearSelection() {
-      if (window.getSelection) {
-        if (window.getSelection().empty) {
-          // Chrome
-          window.getSelection().empty();
-        } else if (window.getSelection().removeAllRanges) {
-          // Firefox
-          window.getSelection().removeAllRanges();
-        }
-      } else if (document.selection) {
-        // IE?
-        document.selection.empty();
-      }
     }
 
     function _handleDrawRedactionBtnClick(e) {
@@ -791,7 +784,6 @@ window.addEventListener('load', (e) => {
     }
 
     _setRedactionsInput(redactions);
-    applyRedactionBtn.disabled = true;
   }
 
   function _scaleToDisplay(value) {

src/main/resources/templates/security/redact.html

@@ -453,11 +453,6 @@
                   <input type="color" name="color-picker">
                 </label>
               </button>
-              <button id="apply-redaction" th:title="#{redact.applyChanges}" class="btn-success d-none" disabled>
-                <span id="apply-redaction-icon" class="material-symbols-rounded">
-                  check
-                </span>
-              </button>
             </div>
             <div id="toolbarViewerRight">
               <div class="splitToolbarButton">