Added find and replace functionality, with case sensitivity functionality

index.html

@@ -118,6 +118,65 @@
             align-items: center;
         }
 
+        /* Search Toolbar Styles */
+        .search-toolbar {
+            background-color: #ecf0f1;
+            padding: 8px 15px;
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            border-bottom: 1px solid #bdc3c7;
+        }
+
+        .search-toolbar input[type="text"] {
+            padding: 4px 8px;
+            border: 1px solid #bdc3c7;
+            border-radius: 3px;
+            font-size: 13px;
+            width: 140px;
+        }
+
+        .search-toolbar button {
+            padding: 4px 10px;
+            background-color: #fff;
+            border: 1px solid #bdc3c7;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 12px;
+            color: #2c3e50;
+            transition: all 0.2s;
+        }
+
+        .search-toolbar button:hover:not(:disabled) {
+            background-color: #e8e8e8;
+            border-color: #95a5a6;
+        }
+
+        .search-toolbar button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .search-toolbar label {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 12px;
+            color: #2c3e50;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .search-toolbar input[type="checkbox"] {
+            cursor: pointer;
+        }
+
+        .search-msg {
+            font-size: 12px;
+            color: #7f8c8d;
+            margin-left: auto;
+        }
+
         .pdf-controls {
             display: flex;
             gap: 10px;
@@ -350,6 +409,21 @@
                     <button class="export-btn" id="export-btn" disabled>Export Text</button>
                 </div>
             </div>
+            
+            <!-- Added Search Toolbar -->
+            <div class="search-toolbar">
+                <input type="text" id="find-input" placeholder="Find..." disabled>
+                <input type="text" id="replace-input" placeholder="Replace with..." disabled>
+                <button id="find-next-btn" disabled title="Find Next Occurrence">Find Next</button>
+                <button id="replace-btn" disabled title="Replace Current Selection">Replace</button>
+                <button id="replace-all-btn" disabled title="Replace All Occurrences">Replace All</button>
+                <label>
+                    <input type="checkbox" id="case-sensitive-cb" disabled>
+                    Match Case
+                </label>
+                <span id="search-msg" class="search-msg"></span>
+            </div>
+
             <div class="panel-content">
                 <textarea 
                     id="ocr-text" 
@@ -388,6 +462,15 @@
         const zoomResetBtn = document.getElementById('zoom-reset-btn');
         const zoomLevel = document.getElementById('zoom-level');
 
+        // Search DOM elements
+        const findInput = document.getElementById('find-input');
+        const replaceInput = document.getElementById('replace-input');
+        const findNextBtn = document.getElementById('find-next-btn');
+        const replaceBtn = document.getElementById('replace-btn');
+        const replaceAllBtn = document.getElementById('replace-all-btn');
+        const caseSensitiveCb = document.getElementById('case-sensitive-cb');
+        const searchMsg = document.getElementById('search-msg');
+
         // Initialize application
         async function init() {
             try {
@@ -463,10 +546,154 @@
             zoomOutBtn.addEventListener('click', () => zoomPdf(-0.25));
             zoomResetBtn.addEventListener('click', () => resetZoom());
 
+            // Search controls
+            findNextBtn.addEventListener('click', findNext);
+            replaceBtn.addEventListener('click', replaceCurrent);
+            replaceAllBtn.addEventListener('click', replaceAll);
+            
+            // Allow "Enter" key in find input to trigger Find Next
+            findInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    findNext();
+                }
+            });
+
             // Pan functionality
             setupPanControls();
         }
 
+        // --- Search Functions ---
+
+        function findNext() {
+            const query = findInput.value;
+            if (!query) return;
+
+            const isCaseSensitive = caseSensitiveCb.checked;
+            const text = ocrText.value;
+            const startPos = ocrText.selectionEnd; // Start searching from after current cursor/selection
+            
+            let nextPos = -1;
+            
+            // Perform search based on case sensitivity
+            if (isCaseSensitive) {
+                nextPos = text.indexOf(query, startPos);
+                if (nextPos === -1) {
+                    nextPos = text.indexOf(query, 0); // Wrap
+                    searchMsg.textContent = nextPos !== -1 ? "Wrapped to top" : "Not found";
+                } else {
+                    searchMsg.textContent = "";
+                }
+            } else {
+                const lowerText = text.toLowerCase();
+                const lowerQuery = query.toLowerCase();
+                nextPos = lowerText.indexOf(lowerQuery, startPos);
+                if (nextPos === -1) {
+                    nextPos = lowerText.indexOf(lowerQuery, 0); // Wrap
+                    searchMsg.textContent = nextPos !== -1 ? "Wrapped to top" : "Not found";
+                } else {
+                    searchMsg.textContent = "";
+                }
+            }
+
+            if (nextPos !== -1) {
+                // Select the found text
+                ocrText.focus();
+                ocrText.setSelectionRange(nextPos, nextPos + query.length);
+                
+                // Enhanced Scroll to selection logic
+                // Calculate percentage position of the match
+                const progress = nextPos / text.length;
+                // Set scroll top based on percentage of total scroll height
+                // Offset by half container height to try and center it
+                const scrollTarget = (ocrText.scrollHeight * progress) - (ocrText.clientHeight / 2);
+                
+                ocrText.scrollTop = scrollTarget;
+                
+                // Fallback: Trigger blur/focus which forces browser to scroll to cursor
+                // This handles edge cases where the calculation might be slightly off due to variable line wrapping
+                // setTimeout ensures the scroll calculation happens first, then the browser creates final view
+                setTimeout(() => {
+                    ocrText.blur();
+                    ocrText.focus();
+                }, 10);
+            }
+        }
+
+        function replaceCurrent() {
+            const query = findInput.value;
+            const replacement = replaceInput.value;
+            if (!query) return;
+
+            const isCaseSensitive = caseSensitiveCb.checked;
+            
+            // Check if current selection matches the find query
+            const start = ocrText.selectionStart;
+            const end = ocrText.selectionEnd;
+            const selectedText = ocrText.value.substring(start, end);
+            
+            let match = false;
+            if (isCaseSensitive) {
+                match = selectedText === query;
+            } else {
+                match = selectedText.toLowerCase() === query.toLowerCase();
+            }
+
+            if (match) {
+                // Perform replacement
+                ocrText.setRangeText(replacement, start, end, 'end');
+                state.hasEdits = true;
+                searchMsg.textContent = "Replaced";
+                
+                // Automatically find next
+                findNext();
+            } else {
+                // If text isn't selected or doesn't match, try to find next occurrence first
+                findNext();
+            }
+        }
+
+        function replaceAll() {
+            const query = findInput.value;
+            const replacement = replaceInput.value;
+            if (!query) return;
+
+            const isCaseSensitive = caseSensitiveCb.checked;
+            const text = ocrText.value;
+            
+            // Escape special regex characters to perform a literal "Replace All"
+            const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); 
+            const flags = isCaseSensitive ? 'g' : 'gi';
+            const regex = new RegExp(escapedQuery, flags);
+            
+            const matchCount = (text.match(regex) || []).length;
+            
+            if (matchCount > 0) {
+                const newText = text.replace(regex, replacement);
+                ocrText.value = newText;
+                state.hasEdits = true;
+                searchMsg.textContent = `Replaced ${matchCount} occurrences`;
+            } else {
+                searchMsg.textContent = "0 matches found";
+            }
+        }
+
+        function updateSearchControls(enabled) {
+            findInput.disabled = !enabled;
+            replaceInput.disabled = !enabled;
+            findNextBtn.disabled = !enabled;
+            replaceBtn.disabled = !enabled;
+            replaceAllBtn.disabled = !enabled;
+            caseSensitiveCb.disabled = !enabled;
+            if (!enabled) {
+                findInput.value = '';
+                replaceInput.value = '';
+                caseSensitiveCb.checked = false;
+                searchMsg.textContent = '';
+            }
+        }
+
+        // --- End Search Functions ---
+
         async function loadRecord(record) {
             state.currentRecord = record;
             state.hasEdits = false;
@@ -543,6 +770,7 @@
             ocrText.value = '';
             ocrText.disabled = true;
             exportBtn.disabled = true;
+            updateSearchControls(false); // Disable search controls while loading
             state.hasEdits = false;
             
             const loadingDiv = document.createElement('div');
@@ -563,6 +791,7 @@
                 ocrText.value = text;
                 ocrText.disabled = false;
                 exportBtn.disabled = false;
+                updateSearchControls(true); // Enable search controls
                 loadingDiv.remove();
             } catch (error) {
                 console.error('OCR loading error:', error);