From 994a6e174951db5479961a8d3bab427a5f7b367d Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Tue, 16 Jun 2026 10:59:58 -0400
Subject: [PATCH] fix: dropdown autocomplete centre sous textarea + code
 nettoye

---
 frontend/editor-poc.html | 32 +++++++-------------------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/frontend/editor-poc.html b/frontend/editor-poc.html
index 02013a9..54c4c35 100644
--- a/frontend/editor-poc.html
+++ b/frontend/editor-poc.html
@@ -1654,11 +1654,13 @@ body { font-family: var(--sans); background: var(--bg); color: var(--text); heig
     acItems = items;
     acIdx = -1;
     if (!items.length) { hideAutocomplete(); return; }
-    // Position near cursor (fixed positioning relative to viewport)
-    var pos = getCaretCoordinates(ta);
+    // Position: centered below the textarea (simple, reliable)
     var rect = ta.getBoundingClientRect();
-    acDropdown.style.left = (rect.left + pos.left + 24) + 'px';
-    acDropdown.style.top = (rect.top + pos.top + 20) + 'px';
+    acDropdown.style.left = (rect.left + rect.width / 2) + 'px';
+    acDropdown.style.top = (rect.bottom + 6) + 'px';
+    acDropdown.style.transform = 'translateX(-50%)';
+    // Keep dropdown within viewport
+    acDropdown.style.maxWidth = Math.min(380, rect.width - 32) + 'px';
 
     var html = context ? '<div class="ac-item-context">' + context + '</div>' : '';
     items.forEach(function(item, i) {
@@ -1761,27 +1763,7 @@ body { font-family: var(--sans); background: var(--bg); color: var(--text); heig
     loadAndTrigger();
   }
 
-  function getCaretCoordinates(textarea) {
-    var div = document.createElement('div');
-    var style = div.style;
-    var computed = window.getComputedStyle(textarea);
-    for (var key of computed) {
-      try { style[key] = computed[key]; } catch(e) {}
-    }
-    style.position = 'absolute';
-    style.visibility = 'hidden';
-    style.whiteSpace = 'pre-wrap';
-    style.overflow = 'visible';
-    style.wordWrap = 'break-word';
-    style.width = textarea.clientWidth + 'px';
-    style.height = 'auto';
-    var pos = textarea.selectionStart;
-    div.textContent = textarea.value.slice(0, pos) + '.';
-    document.body.appendChild(div);
-    var rect = div.getBoundingClientRect();
-    document.body.removeChild(div);
-    return { left: rect.width, top: rect.height };
-  }
+  function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
 
   ta.addEventListener('keydown', function(e) {
     if (acDropdown.classList.contains('active')) {