- grammar check v0.8

TobiasMue91 · TobiasMue91 · commit 5064afc136ea · 2025-02-14T17:13:48.000+01:00
diff --git a/tools/grammar_check.html b/tools/grammar_check.html
@@ -82,8 +82,7 @@
     <div class="flex items-center justify-between mb-6">
         <div class="flex items-center gap-2"><h1
                 class="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 text-transparent bg-clip-text dark:from-indigo-400 dark:to-purple-400">
-            AI Grammar Checker</h1>
-        </div>
+            AI Grammar Checker</h1></div>
         <select id="mode-select"
                 class="px-3 py-1 border rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-colors duration-200">
             <option value="standard">Standard Mode</option>
@@ -117,19 +116,28 @@
                 </svg>
                 Clear
             </button>
-            <button id="copy-corrected"
-                    class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors duration-200 flex items-center gap-2">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
-                </svg>
-                Copy
-            </button>
         </div>
     </div>
     <div id="result"
          class="p-4 border rounded-md min-h-[100px] bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 transition-colors duration-200"></div>
-    <button id="show-all-errors" class="mt-4 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Show All Errors</button>
+    <div class="mt-4 flex flex-wrap gap-3">
+        <button id="show-all-errors"
+                class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            Show All Errors
+        </button>
+        <button id="copy-corrected"
+                class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors duration-200 flex items-center gap-2">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
+            </svg>
+            Copy
+        </button>
+    </div>
     <div id="history" class="mt-4 space-y-2">
         <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -142,29 +150,52 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-cen
     </div>
     <div id="error-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
         <div class="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full mx-4 max-h-[90vh] flex flex-col">
-            <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">All Detected Errors</h3>
-                <button id="close-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center"><h3
+                    class="text-lg font-semibold text-gray-900 dark:text-gray-100">All Detected Errors</h3>
+                <button id="close-modal"
+                        class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M6 18L18 6M6 6l12 12"></path>
                     </svg>
                 </button>
             </div>
             <div class="p-4 overflow-y-auto flex-1">
-                <div id="error-list" class="space-y-4">
-                    <!-- Errors will be inserted here -->
-                </div>
+                <div id="error-list" class="space-y-4"></div>
             </div>
         </div>
     </div>
 </div>
 <script>let errorHistory = [];
 let currentText = '';
 let lastCheckTimestamp = 0;
+let window
+.errors = [];
 document.getElementById('check-grammar').addEventListener('click', checkGrammar);
 document.getElementById('clear-text').addEventListener('click', clearText);
 document.getElementById('copy-corrected').addEventListener('click', copyCorrectText);
 document.getElementById('input').addEventListener('input', updateWordCount);
+const showAllErrorsBtn = document.getElementById('show-all-errors');
+showAllErrorsBtn.disabled = true;
+const errorModal = document.getElementById('error-modal');
+const closeModal = document.getElementById('close-modal');
+showAllErrorsBtn.addEventListener('click', showErrorModal);
+closeModal.addEventListener('click', function () {
+    errorModal.classList.add('hidden');
+    errorModal.classList.remove('flex');
+});
+errorModal.addEventListener('click', function (e) {
+    if (e.target === errorModal) {
+        errorModal.classList.add('hidden');
+        errorModal.classList.remove('flex');
+    }
+});
+document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !errorModal.classList.contains('hidden')) {
+        errorModal.classList.add('hidden');
+        errorModal.classList.remove('flex');
+    }
+});
 
 function updateWordCount() {
     const text = document.getElementById('input').value;
@@ -176,6 +207,8 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">All Detected
 function clearText() {
     document.getElementById('input').value = '';
     document.getElementById('result').innerHTML = '';
+    window.errors = [];
+    showAllErrorsBtn.disabled = true;
     updateWordCount();
 }
 
@@ -240,14 +273,14 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">All Detected
         const jsonMatch = responseContent.match(/\{[\s\S]*\}/);
         if (!jsonMatch) throw new Error('Invalid response format');
         const grammarData = JSON5.parse(jsonMatch[0]);
+        window.errors = grammarData.errors;
+        showAllErrorsBtn.disabled = window.errors.length === 0;
         displayResults(inputText, grammarData.errors);
         addToHistory(inputText, grammarData.errors);
     } catch (error) {
         console.error('Error:', error);
         resultContainer.textContent = 'An error occurred while checking the text. Please try again.';
         showNotification('Error checking grammar', 'error');
-        window.errors = grammarData.errors;
-        document.getElementById('show-all-errors').disabled = grammarData.errors.length === 0;
     } finally {
         button.disabled = false;
         button.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>Check Grammar';
@@ -297,31 +330,26 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">All Detected
     });
 }
 
+function showErrorModal() {
+    const errorList = document.getElementById('error-list');
+    errorList.innerHTML = window.errors.map((error, index) => `<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600"><div class="flex justify-between items-start"><div class="font-medium text-gray-900 dark:text-gray-100">Error ${index + 1}</div><button onclick="applyCorrection('${error.text}','${error.suggestion}')" class="text-sm px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200">Apply Fix</button></div><div class="mt-2 space-y-2"><div class="text-sm"><span class="text-gray-500 dark:text-gray-400">Original text: </span><span class="text-red-600 dark:text-red-400">${error.text}</span></div><div class="text-sm"><span class="text-gray-500 dark:text-gray-400">Suggestion: </span><span class="text-green-600 dark:text-green-400">${error.suggestion}</span></div><div class="text-sm"><span class="text-gray-500 dark:text-gray-400">Description: </span><span class="text-gray-900 dark:text-gray-100">${error.description}</span></div></div></div>`).join('');
+    errorModal.classList.remove('hidden');
+    errorModal.classList.add('flex');
+}
+
+function applyCorrection(original, suggestion) {
+    const input = document.getElementById('input');
+    input.value = input.value.replace(original, suggestion);
+    displayResults(input.value, window.errors.filter(e => e.text !== original));
+    updateWordCount();
+    showNotification(`Corrected: ${original} → ${suggestion}`, 'success');
+}
+
 function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
 updateWordCount();
-document.addEventListener('keydown', function (e) {
-    if (e.ctrlKey || e.metaKey) {
-        switch (e.key) {
-            case'Enter':
-                e.preventDefault();
-                checkGrammar();
-                break;
-            case'l':
-                e.preventDefault();
-                clearText();
-                break;
-            case'c':
-                if (document.activeElement !== document.getElementById('input')) {
-                    e.preventDefault();
-                    copyCorrectText();
-                }
-                break;
-        }
-    }
-});
 let autoSaveTimeout;
 document.getElementById('input').addEventListener('input', function () {
     clearTimeout(autoSaveTimeout);
@@ -335,85 +363,6 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">All Detected
         document.getElementById('input').value = savedText;
         updateWordCount();
     }
-});
-
-// Initialize button state
-const showAllErrorsBtn = document.getElementById('show-all-errors');
-showAllErrorsBtn.disabled = true;
-
-// Add modal functionality
-const errorModal = document.getElementById('error-modal');
-const closeModal = document.getElementById('close-modal');
-
-showAllErrorsBtn.addEventListener('click', function() {
-    showErrorModal();
-});
-
-closeModal.addEventListener('click', function() {
-    errorModal.classList.add('hidden');
-    errorModal.classList.remove('flex');
-});
-
-// Close modal when clicking outside
-errorModal.addEventListener('click', function(e) {
-    if (e.target === errorModal) {
-        errorModal.classList.add('hidden');
-        errorModal.classList.remove('flex');
-    }
-});
-
-// Close modal with Escape key
-document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape' && !errorModal.classList.contains('hidden')) {
-        errorModal.classList.add('hidden');
-        errorModal.classList.remove('flex');
-    }
-});
-
-function showErrorModal() {
-    const errorList = document.getElementById('error-list');
-    errorList.innerHTML = errors.map((error, index) => `
-        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
-            <div class="flex justify-between items-start">
-                <div class="font-medium text-gray-900 dark:text-gray-100">Error ${index + 1}</div>
-                <button onclick="applyCorrection('${error.text}', '${error.suggestion}')"
-                        class="text-sm px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200">
-                    Apply Fix
-                </button>
-            </div>
-            <div class="mt-2 space-y-2">
-                <div class="text-sm">
-                    <span class="text-gray-500 dark:text-gray-400">Original text: </span>
-                    <span class="text-red-600 dark:text-red-400">${error.text}</span>
-                </div>
-                <div class="text-sm">
-                    <span class="text-gray-500 dark:text-gray-400">Suggestion: </span>
-                    <span class="text-green-600 dark:text-green-400">${error.suggestion}</span>
-                </div>
-                <div class="text-sm">
-                    <span class="text-gray-500 dark:text-gray-400">Description: </span>
-                    <span class="text-gray-900 dark:text-gray-100">${error.description}</span>
-                </div>
-            </div>
-        </div>
-    `).join('');
-
-    errorModal.classList.remove('hidden');
-    errorModal.classList.add('flex');
-}
-
-function applyCorrection(original, suggestion) {
-    const input = document.getElementById('input');
-    input.value = input.value.replace(original, suggestion);
-    displayResults(input.value, errors.filter(e => e.text !== original));
-    updateWordCount();
-    showNotification(`Corrected: ${original} → ${suggestion}`, 'success');
-}
-
-// Add this to your existing checkGrammar function, right after parsing the grammarData:
-window.errors = grammarData.errors; // Make errors globally available
-showAllErrorsBtn.disabled = grammarData.errors.length === 0;
-</script>
-<script src="../sidebar.js"></script>
+});</script>
 </body>
 </html>
