Upload voice to text.html

Speech to text/voice to text.html

@@ -622,6 +622,11 @@
         
         // Cursor position
         var cursorPosition = 0;
+        var cursorEndPosition = 0;
+        var editorScrollTop = 0;
+        var editorScrollLeft = 0;
+        var speechInsertLock = false;
+        var micTransitionLock = false;
         
         // 36 Years in milliseconds
         var RETENTION_TIME = 1135296000000;
@@ -648,9 +653,15 @@
             var editor = document.getElementById('textEditor');
             editor.addEventListener('input', updateCounts);
             editor.addEventListener('input', scheduleDraftSave);
+            editor.addEventListener('input', saveCursorPosition);
             editor.addEventListener('click', saveCursorPosition);
             editor.addEventListener('keyup', saveCursorPosition);
             editor.addEventListener('keydown', saveCursorPosition);
+            editor.addEventListener('select', saveCursorPosition);
+            editor.addEventListener('mouseup', saveCursorPosition);
+            editor.addEventListener('touchend', saveCursorPosition);
+            editor.addEventListener('scroll', rememberEditorScrollPosition);
+            editor.addEventListener('blur', saveCursorPosition);
             
             // Initialize undo/redo
             saveToHistoryStack();
@@ -717,38 +728,7 @@
                 }
                 
                 if (final) {
-                    var editor = document.getElementById('textEditor');
-                    var text = editor.value;
-                    
-                    // Insert at cursor position
-                    var beforeCursor = text.substring(0, cursorPosition);
-                    var afterCursor = text.substring(cursorPosition);
-                    
-                    // Add space before if needed
-                    if (beforeCursor.length > 0 && !beforeCursor.endsWith(' ') && !beforeCursor.endsWith('\n')) {
-                        final = ' ' + final;
-                    }
-                    
-                    // Add space after if needed
-                    if (final.length > 0 && !final.endsWith(' ') && !final.endsWith('\n')) {
-                        final = final + ' ';
-                    }
-                    
-                    editor.value = beforeCursor + final + afterCursor;
-                    
-                    // Move cursor to after inserted text
-                    cursorPosition = beforeCursor.length + final.length;
-                    editor.selectionStart = cursorPosition;
-                    editor.selectionEnd = cursorPosition;
-                    
-                    updateCounts();
-                    saveToHistoryStack();
-                    scheduleDraftSave();
-                    
-                    // Scroll to cursor position
-                    if (editor.value.length > 0) {
-                        editor.scrollTop = editor.scrollHeight * (cursorPosition / editor.value.length);
-                    }
+                    insertSpeechTextAtSavedCursor(final);
                 }
             };
 
@@ -790,32 +770,47 @@
         }
 
         function toggleMic() {
-            if (!recognition) {
-                recognition = initSpeech();
-            }
-            
-            if (!recognition) return;
+            if (micTransitionLock) return;
+            micTransitionLock = true;
 
-            if (isRecording) {
-                isRecording = false;
-                try {
-                    recognition.stop();
-                } catch(e) {}
-                updateMicUI(false);
-                showToast("⏹️ Recording stopped");
-            } else {
-                try {
-                    recognition.start();
-                    showToast("🎤 Recording... Speak now!");
-                } catch(e) {
-                    console.error(e);
-                    showToast("⚠️ Error starting microphone");
-                    // Try re-initializing
+            try {
+                saveCursorPosition();
+
+                if (!recognition) {
                     recognition = initSpeech();
-                    setTimeout(function() {
-                        try { recognition.start(); } catch(e2) {}
-                    }, 500);
                 }
+
+                if (!recognition) {
+                    micTransitionLock = false;
+                    return;
+                }
+
+                if (isRecording) {
+                    isRecording = false;
+                    try {
+                        recognition.stop();
+                    } catch(e) {}
+                    updateMicUI(false);
+                    showToast("⏹️ Recording stopped");
+                    setTimeout(function() { micTransitionLock = false; }, 250);
+                } else {
+                    try {
+                        recognition.start();
+                        showToast("🎤 Recording... Speak now!");
+                        setTimeout(function() { micTransitionLock = false; }, 250);
+                    } catch(e) {
+                        console.error(e);
+                        showToast("⚠️ Error starting microphone");
+                        recognition = initSpeech();
+                        setTimeout(function() {
+                            try { recognition.start(); } catch(e2) {}
+                            micTransitionLock = false;
+                        }, 500);
+                    }
+                }
+            } catch(error) {
+                console.error(error);
+                micTransitionLock = false;
             }
         }
 
@@ -943,8 +938,10 @@
                 editor.value = payload.text;
                 currentTextState = payload.text;
                 cursorPosition = payload.text.length;
+                cursorEndPosition = cursorPosition;
                 editor.selectionStart = cursorPosition;
                 editor.selectionEnd = cursorPosition;
+                saveCursorPosition();
 
                 if (payload.lang === 'ur-PK' || payload.lang === 'en-US' || payload.lang === 'en-PK') {
                     setLang(payload.lang);
@@ -1058,27 +1055,215 @@
             document.getElementById('redoBtn').disabled = redoStack.length === 0;
         }
 
-        // --- CURSOR POSITION TRACKING ---
+        // ═══════════════════════════════════════════════════════════════════════════════
+        //  کرسر اور اسکرول لاک سسٹم - جاوا اسکرپٹ
+        //  CURSOR AND SCROLL LOCK SYSTEM - JAVASCRIPT
+        // ═══════════════════════════════════════════════════════════════════════════════
+        function rememberEditorScrollPosition() {
+            var editor = document.getElementById('textEditor');
+            if (!editor) return;
+
+            editorScrollTop = editor.scrollTop || 0;
+            editorScrollLeft = editor.scrollLeft || 0;
+        }
+
         function saveCursorPosition() {
             var editor = document.getElementById('textEditor');
-            cursorPosition = editor.selectionStart;
-            document.getElementById('cursorPos').textContent = cursorPosition;
+            if (!editor) return;
+
+            cursorPosition = typeof editor.selectionStart === 'number' ? editor.selectionStart : cursorPosition;
+            cursorEndPosition = typeof editor.selectionEnd === 'number' ? editor.selectionEnd : cursorPosition;
+            editorScrollTop = editor.scrollTop || 0;
+            editorScrollLeft = editor.scrollLeft || 0;
+
+            var cursorLabel = document.getElementById('cursorPos');
+            if (cursorLabel) cursorLabel.textContent = cursorPosition;
+        }
+
+        function getTextareaCaretPixelTop(editor, caretPos) {
+            if (!editor) return 0;
+
+            var style = window.getComputedStyle(editor);
+            var mirror = document.createElement('div');
+            var marker = document.createElement('span');
+            var properties = [
+                'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth',
+                'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'paddingTop',
+                'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant',
+                'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight',
+                'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration',
+                'letterSpacing', 'wordSpacing', 'tabSize', 'MozTabSize', 'direction',
+                'whiteSpace', 'wordBreak', 'overflowWrap'
+            ];
+
+            mirror.style.position = 'absolute';
+            mirror.style.visibility = 'hidden';
+            mirror.style.left = '-99999px';
+            mirror.style.top = '0';
+            mirror.style.whiteSpace = 'pre-wrap';
+            mirror.style.wordBreak = 'break-word';
+            mirror.style.overflowWrap = 'break-word';
+
+            properties.forEach(function(prop) {
+                try { mirror.style[prop] = style[prop]; } catch (error) {}
+            });
+
+            mirror.style.width = editor.offsetWidth + 'px';
+            mirror.textContent = editor.value.substring(0, caretPos);
+            marker.textContent = editor.value.substring(caretPos, caretPos + 1) || '.';
+            mirror.appendChild(marker);
+            document.body.appendChild(mirror);
+
+            var top = marker.offsetTop;
+            document.body.removeChild(mirror);
+            return top;
+        }
+
+        function keepCaretVisibleWithoutJump(editor, caretPos) {
+            if (!editor) return;
+
+            var style = window.getComputedStyle(editor);
+            var lineHeight = parseFloat(style.lineHeight);
+            if (!lineHeight || isNaN(lineHeight)) {
+                lineHeight = Math.max(18, parseFloat(style.fontSize) * 1.6);
+            }
+
+            var paddingTop = parseFloat(style.paddingTop) || 0;
+            var paddingBottom = parseFloat(style.paddingBottom) || 0;
+            var caretTop = getTextareaCaretPixelTop(editor, caretPos);
+            var visibleTop = editor.scrollTop + paddingTop;
+            var visibleBottom = editor.scrollTop + editor.clientHeight - paddingBottom - lineHeight;
+
+            if (caretTop < visibleTop) {
+                editor.scrollTop = Math.max(0, caretTop - paddingTop - lineHeight);
+            } else if (caretTop > visibleBottom) {
+                editor.scrollTop = Math.max(0, caretTop - editor.clientHeight + paddingBottom + (lineHeight * 2));
+            }
+
+            editorScrollTop = editor.scrollTop || 0;
+            editorScrollLeft = editor.scrollLeft || 0;
+        }
+
+        function restoreEditorViewportAndCaret(startPos, endPos, keepFocus, scrollMode) {
+            var editor = document.getElementById('textEditor');
+            if (!editor) return;
+
+            var safeStart = Math.max(0, Math.min(startPos, editor.value.length));
+            var safeEnd = Math.max(0, Math.min(endPos, editor.value.length));
+
+            editor.selectionStart = safeStart;
+            editor.selectionEnd = safeEnd;
+            editor.scrollTop = editorScrollTop;
+            editor.scrollLeft = editorScrollLeft;
+
+            if (scrollMode === 'keep-caret-visible') {
+                keepCaretVisibleWithoutJump(editor, safeStart);
+            }
+
+            if (keepFocus) {
+                try {
+                    editor.focus({ preventScroll: true });
+                } catch (error) {
+                    editor.focus();
+                    editor.scrollTop = editorScrollTop;
+                    editor.scrollLeft = editorScrollLeft;
+                    if (scrollMode === 'keep-caret-visible') {
+                        keepCaretVisibleWithoutJump(editor, safeStart);
+                    }
+                }
+            }
+
+            requestAnimationFrame(function() {
+                editor.selectionStart = safeStart;
+                editor.selectionEnd = safeEnd;
+                editor.scrollTop = editorScrollTop;
+                editor.scrollLeft = editorScrollLeft;
+
+                if (scrollMode === 'keep-caret-visible') {
+                    keepCaretVisibleWithoutJump(editor, safeStart);
+                }
+            });
+        }
+
+        function normalizeInsertedSpeechText(text, beforeText, afterText) {
+            var cleanText = (text || '').replace(/\s+/g, ' ').trim();
+            if (!cleanText) return '';
+
+            if (beforeText.length > 0 && !/[\s\n]$/.test(beforeText)) {
+                cleanText = ' ' + cleanText;
+            }
+
+            if (afterText.length > 0 && !/^[\s\n.,!?;:،۔؟]/.test(afterText)) {
+                cleanText = cleanText + ' ';
+            } else if (afterText.length === 0) {
+                cleanText = cleanText + ' ';
+            }
+
+            return cleanText;
+        }
+
+        function insertSpeechTextAtSavedCursor(text) {
+            if (speechInsertLock) return;
+            speechInsertLock = true;
+
+            try {
+                var editor = document.getElementById('textEditor');
+                if (!editor) return;
+
+                var savedScrollTop = editorScrollTop;
+                var savedScrollLeft = editorScrollLeft;
+                var start = Math.max(0, Math.min(cursorPosition, editor.value.length));
+                var end = Math.max(start, Math.min(cursorEndPosition || start, editor.value.length));
+                var beforeCursor = editor.value.substring(0, start);
+                var afterCursor = editor.value.substring(end);
+                var finalText = normalizeInsertedSpeechText(text, beforeCursor, afterCursor);
+
+                if (!finalText) return;
+
+                editorScrollTop = savedScrollTop;
+                editorScrollLeft = savedScrollLeft;
+                editor.value = beforeCursor + finalText + afterCursor;
+
+                cursorPosition = beforeCursor.length + finalText.length;
+                cursorEndPosition = cursorPosition;
+
+                restoreEditorViewportAndCaret(cursorPosition, cursorPosition, true, 'keep-caret-visible');
+                updateCounts();
+                saveToHistoryStack();
+                scheduleDraftSave();
+            } finally {
+                speechInsertLock = false;
+            }
         }
 
         function insertAtCursor(text) {
             var editor = document.getElementById('textEditor');
-            var beforeCursor = editor.value.substring(0, cursorPosition);
-            var afterCursor = editor.value.substring(cursorPosition);
-            
+            if (!editor) return;
+
+            saveCursorPosition();
+
+            var savedScrollTop = editorScrollTop;
+            var savedScrollLeft = editorScrollLeft;
+            var start = Math.max(0, Math.min(cursorPosition, editor.value.length));
+            var end = Math.max(start, Math.min(cursorEndPosition || start, editor.value.length));
+            var beforeCursor = editor.value.substring(0, start);
+            var afterCursor = editor.value.substring(end);
+
             editor.value = beforeCursor + text + afterCursor;
             cursorPosition = beforeCursor.length + text.length;
-            editor.selectionStart = cursorPosition;
-            editor.selectionEnd = cursorPosition;
-            
+            cursorEndPosition = cursorPosition;
+            editorScrollTop = savedScrollTop;
+            editorScrollLeft = savedScrollLeft;
+
+            restoreEditorViewportAndCaret(cursorPosition, cursorPosition, true, 'keep-caret-visible');
             updateCounts();
             saveToHistoryStack();
             scheduleDraftSave();
         }
+        // ═══════════════════════════════════════════════════════════════════════════════
+        //  ختم کرسر اور اسکرول لاک سسٹم - جاوا اسکرپٹ
+        //  END CURSOR AND SCROLL LOCK SYSTEM - JAVASCRIPT
+        // ═══════════════════════════════════════════════════════════════════════════════
 
         // --- SHARE FUNCTIONALITY ---
         function shareText() {
@@ -1298,6 +1483,10 @@
                 saveToHistoryStack();
                 scheduleDraftSave();
                 cursorPosition = item.text.length;
+                cursorEndPosition = cursorPosition;
+                document.getElementById('textEditor').selectionStart = cursorPosition;
+                document.getElementById('textEditor').selectionEnd = cursorPosition;
+                saveCursorPosition();
             }
         }
         
@@ -1396,6 +1585,8 @@
             saveToHistoryStack();
             clearDraftText();
             cursorPosition = 0;
+            cursorEndPosition = 0;
+            saveCursorPosition();
             showToast("🗑️ Text cleared");
         }