Merge pull request #10 from mohamedatef24/extention

extension/content-inline.js

@@ -634,6 +634,12 @@
 
     field.addEventListener('input', onFieldInput);
     field.addEventListener('keydown', onFieldKeydown);
+    // Track the user's selection within the field so a later "apply" from the
+    // side panel can splice the result into exactly that range — even when the
+    // panel was opened via the FAB or was already open (not just right-click).
+    field.addEventListener('mouseup', onFieldSelect);
+    field.addEventListener('keyup', onFieldSelect);
+    field.addEventListener('select', onFieldSelect);
     // FIX-20: Removed redundant 'keyup' listener (input event already fires on every change)
 
     if (BayanController.hasArabic(getFieldText(field))) {
@@ -645,6 +651,9 @@
     if (activeField) {
       activeField.removeEventListener('input', onFieldInput);
       activeField.removeEventListener('keydown', onFieldKeydown);
+      activeField.removeEventListener('mouseup', onFieldSelect);
+      activeField.removeEventListener('keyup', onFieldSelect);
+      activeField.removeEventListener('select', onFieldSelect);
       // FIX-20: keyup listener no longer attached
       activeField.removeEventListener('scroll', syncOverlay);
     }
@@ -669,6 +678,24 @@
 
   const NON_CORRECTION_SOURCES = ['summarize', 'dialect', 'quran'];
 
+  // Snapshot the active field's selection whenever the user changes it. We keep
+  // the LAST non-empty selection so that when focus later moves to the side
+  // panel (which collapses the field's visible selection) we still know which
+  // range the user meant to replace. A collapsed selection does NOT clear the
+  // snapshot — only a real edit (handled in onFieldInput) or a fresh write does.
+  function onFieldSelect(e) {
+    const field = e && e.currentTarget;
+    if (!field) return;
+    const tag = field.tagName.toLowerCase();
+    if (tag !== 'textarea' && tag !== 'input') return;
+    const start = field.selectionStart;
+    const end = field.selectionEnd;
+    if (typeof start === 'number' && typeof end === 'number' && start !== end) {
+      pendingSelection = { field, type: 'input', start, end };
+      lastInteractedField = field;
+    }
+  }
+
   // Capture the field + selection range at right-click time. The context menu
   // flow always acts on the selected text, so we remember exactly what was
   // selected and splice the result into THAT range on write-back (Bug 2).

extension/sidepanel/sidepanel.html

@@ -274,9 +274,14 @@
         <div class="sp-result is-hidden" id="quran-translation-result" style="margin-top:8px;">
           <div class="sp-result-header">
             <span>الترجمة</span>
-            <button class="sp-btn-icon" id="btn-copy-quran-translation" title="نسخ الترجمة">
-              <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
-            </button>
+            <div class="sp-result-actions">
+              <button class="sp-btn-icon" id="btn-apply-quran-translation" title="تطبيق في الصفحة">
+                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+              </button>
+              <button class="sp-btn-icon" id="btn-copy-quran-translation" title="نسخ الترجمة">
+                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+              </button>
+            </div>
           </div>
           <div class="sp-result-text" id="quran-translation-text" dir="auto"></div>
           <div class="sp-summary-meta" id="quran-translation-ref"></div>

extension/sidepanel/sidepanel.js

@@ -499,6 +499,7 @@ document.addEventListener('DOMContentLoaded', () => {
   const quranTranslationText = document.getElementById('quran-translation-text');
   const quranTranslationRef = document.getElementById('quran-translation-ref');
   const btnCopyQuranTranslation = document.getElementById('btn-copy-quran-translation');
+  const btnApplyQuranTranslation = document.getElementById('btn-apply-quran-translation');
   let lastQuranQuery = '';
 
   // Parse the API's "(verse text) 【surah:ayah】" segment into {text, ref}.
@@ -581,6 +582,16 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     }
 
+    // Apply the translated verse straight into the page field (Req 2).
+    // Routed as 'quran' so the content script suppresses correction re-analysis.
+    if (btnApplyQuranTranslation) {
+      btnApplyQuranTranslation.addEventListener('click', () => {
+        const text = (quranTranslationText.textContent || '').trim();
+        if (!text) { showToast('لا توجد ترجمة للتطبيق'); return; }
+        writeBackToPage(text, 'auto', 'quran');
+      });
+    }
+
     btnCopyQuran.addEventListener('click', () => {
       navigator.clipboard.writeText(quranText.textContent || '')
         .then(() => showToast('✓ تم النسخ'))