fix: Critical editor bugs - Dropdowns now visible (remove overflow:hidden from editor-shell) - Font/size/color menus z-index 200 (above editor) - Selection collapses after formatting (no more blue highlight) - Spelling overlay uses textContent for consistent offsets - Correction preserves formatting (replaces inside parent node) - Alt correction same fix - Fallback finds span by matching original text

src/css/components.css

@@ -244,8 +244,17 @@
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-card);
-  overflow: hidden;
+  overflow: visible;
   box-shadow: var(--shadow-card);
+  position: relative;
+}
+
+.editor-shell > *:first-child {
+  border-radius: var(--radius-card) var(--radius-card) 0 0;
+}
+
+.editor-shell > *:last-child {
+  border-radius: 0 0 var(--radius-card) var(--radius-card);
 }
 
 .editor-toolbar {
@@ -292,13 +301,10 @@
   padding: 8px var(--spacing-md);
   border-bottom: 1px solid var(--color-border);
   background: var(--color-surface);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-
-.format-toolbar::-webkit-scrollbar {
-  display: none;
+  overflow: visible;
+  position: relative;
+  z-index: 50;
+  flex-shrink: 0;
 }
 
 .fmt-group {
@@ -418,7 +424,7 @@
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0,0,0,0.15);
   padding: 4px;
-  z-index: 100;
+  z-index: 200;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);

src/js/editor.js

@@ -307,16 +307,35 @@ function applySuggestionAtOffsets(suggestion) {
   const errorSpan = idx >= 0 ? document.querySelector(`[data-suggestion-id="${idx}"]`) : null;
 
   if (errorSpan) {
-    // Replace the error span with the corrected text node
+    // Replace the error span's text content with the correction
+    // while keeping it inside its formatting parent
+    const parent = errorSpan.parentNode;
     const correctedNode = document.createTextNode(suggestion.correction);
-    errorSpan.replaceWith(correctedNode);
+    parent.insertBefore(correctedNode, errorSpan);
+    parent.removeChild(errorSpan);
+    parent.normalize();
   } else {
-    // Fallback: use offset-based replacement
-    const text = getEditorText();
-    const before = text.substring(0, suggestion.start);
-    const after = text.substring(suggestion.end);
-    const newText = before + suggestion.correction + after;
-    setEditorHTML(escapeHtml(newText));
+    // Fallback: find span by matching original text
+    const allErrorSpans = document.querySelectorAll('.spelling-error, .grammar-error, .punctuation-suggestion');
+    let found = false;
+    allErrorSpans.forEach(span => {
+      if (!found && span.textContent === suggestion.original) {
+        const p = span.parentNode;
+        const correctedNode = document.createTextNode(suggestion.correction);
+        p.insertBefore(correctedNode, span);
+        p.removeChild(span);
+        p.normalize();
+        found = true;
+      }
+    });
+    if (!found) {
+      // Last resort: offset-based replacement
+      const text = getEditorText();
+      const before = text.substring(0, suggestion.start);
+      const after = text.substring(suggestion.end);
+      const newText = before + suggestion.correction + after;
+      setEditorHTML(escapeHtml(newText));
+    }
   }
   hideTooltip();
   analyzeTextDelayed();
@@ -332,14 +351,31 @@ function applyAlternativeCorrection(suggestion, correctionText) {
   const errorSpan = idx >= 0 ? document.querySelector(`[data-suggestion-id="${idx}"]`) : null;
 
   if (errorSpan) {
+    const parent = errorSpan.parentNode;
     const correctedNode = document.createTextNode(correctionText);
-    errorSpan.replaceWith(correctedNode);
+    parent.insertBefore(correctedNode, errorSpan);
+    parent.removeChild(errorSpan);
+    parent.normalize();
   } else {
-    const text = getEditorText();
-    const before = text.substring(0, suggestion.start);
-    const after = text.substring(suggestion.end);
-    const newText = before + correctionText + after;
-    setEditorHTML(escapeHtml(newText));
+    const allErrorSpans = document.querySelectorAll('.spelling-error, .grammar-error, .punctuation-suggestion');
+    let found = false;
+    allErrorSpans.forEach(span => {
+      if (!found && span.textContent === suggestion.original) {
+        const p = span.parentNode;
+        const correctedNode = document.createTextNode(correctionText);
+        p.insertBefore(correctedNode, span);
+        p.removeChild(span);
+        p.normalize();
+        found = true;
+      }
+    });
+    if (!found) {
+      const text = getEditorText();
+      const before = text.substring(0, suggestion.start);
+      const after = text.substring(suggestion.end);
+      const newText = before + correctionText + after;
+      setEditorHTML(escapeHtml(newText));
+    }
   }
   hideTooltip();
   analyzeTextDelayed();

src/js/format.js

@@ -3,11 +3,23 @@
 
 /**
  * Execute a formatting command on the current selection
+ * @param {string} command - execCommand name
+ * @param {string} [value] - optional value
+ * @param {boolean} [keepSelection] - if true, don't collapse selection
  */
-function execFormat(command, value) {
-  document.execCommand(command, false, value || null);
+function execFormat(command, value, keepSelection) {
+  document.execCommand(command, false, value !== undefined ? value : null);
   const editor = getEditorElement();
   if (editor) editor.focus();
+  
+  // Collapse selection after formatting so text doesn't stay highlighted
+  if (!keepSelection) {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0 && !sel.isCollapsed) {
+      sel.collapseToEnd();
+    }
+  }
+  
   updateFormatState();
 }
 
@@ -18,10 +30,10 @@ function formatUnderline() { execFormat('underline'); }
 function formatStrikethrough() { execFormat('strikethrough'); }
 
 /* ── Undo / Redo (handles both typing and formatting) ── */
-function formatUndo() { execFormat('undo'); }
-function formatRedo() { execFormat('redo'); }
+function formatUndo() { execFormat('undo', undefined, true); }
+function formatRedo() { execFormat('redo', undefined, true); }
 
-/* ── Alignment (applies to paragraph containing selection) ── */
+/* ── Alignment (applies to paragraph containing selection/cursor) ── */
 function formatAlignRight() { execFormat('justifyRight'); }
 function formatAlignCenter() { execFormat('justifyCenter'); }
 function formatAlignLeft() { execFormat('justifyLeft'); }

src/js/selection.js

@@ -187,7 +187,9 @@ function setCaretOffset(offset) {
 function getEditorText() {
   const editor = document.getElementById('editor-container');
   if (!editor) return '';
-  return editor.innerText || editor.textContent || '';
+  // MUST use textContent to match the offset calculation in overlaySuggestions
+  // innerText adds '\n' for block elements which causes offset mismatch
+  return editor.textContent || '';
 }
 
 /**