feat: Rich text formatting toolbar + formatting-preserving renderer - Bold, Italic, Underline, Strikethrough, Alignment, Undo/Redo - Font family and font size dropdowns - New DOM-level overlay renderer (preserves formatting during analysis) - Apply/dismiss corrections keep original formatting

src/css/components.css

@@ -283,6 +283,85 @@
   color: var(--color-text-inverse);
 }
 
+/* ── Formatting Toolbar ── */
+.format-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 6px var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface);
+}
+
+.fmt-group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.fmt-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-family: 'Georgia', 'Times New Roman', serif;
+  font-size: 14px;
+  transition: all var(--transition-base);
+}
+
+.fmt-btn:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.fmt-btn.fmt-active {
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+  border-radius: var(--radius-sm, 4px);
+}
+
+.fmt-btn svg {
+  flex-shrink: 0;
+}
+
+.fmt-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--color-border);
+  margin: 0 4px;
+}
+
+.fmt-select {
+  padding: 4px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm, 4px);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: var(--font-size-label, 12px);
+  cursor: pointer;
+  height: 32px;
+  min-width: 100px;
+  transition: border-color var(--transition-base);
+}
+
+.fmt-select:hover,
+.fmt-select:focus {
+  border-color: var(--color-primary);
+  outline: none;
+}
+
+.fmt-select--size {
+  min-width: 80px;
+}
+
 .editor-surface {
   background: var(--color-editor);
   color: var(--color-text-primary);

src/index.html

@@ -33,6 +33,7 @@
   <script src="/js/ui.js"></script>
   <script src="/js/documents/doc-utils.js"></script>
   <script src="/js/editor.js"></script>
+  <script src="/js/format.js"></script>
   <script src="/js/documents/import.js"></script>
   <script src="/js/documents/export.js?v=20260615d"></script>
   <script src="/js/documents/documents.js"></script>
@@ -489,6 +490,56 @@
            </button>
           </div>
          </div>
+         <!-- Formatting Toolbar -->
+         <div class="format-toolbar" id="format-toolbar">
+          <div class="fmt-group">
+           <button id="fmt-bold" class="fmt-btn" onclick="formatBold()" type="button" title="غامق (Ctrl+B)"><b>B</b></button>
+           <button id="fmt-italic" class="fmt-btn" onclick="formatItalic()" type="button" title="مائل (Ctrl+I)"><i>I</i></button>
+           <button id="fmt-underline" class="fmt-btn" onclick="formatUnderline()" type="button" title="تحته خط (Ctrl+U)"><u>U</u></button>
+           <button id="fmt-strikethrough" class="fmt-btn" onclick="formatStrikethrough()" type="button" title="يتوسطه خط"><s>S</s></button>
+          </div>
+          <div class="fmt-divider"></div>
+          <div class="fmt-group">
+           <button id="fmt-align-right" class="fmt-btn" onclick="formatAlignRight()" type="button" title="محاذاة لليمين">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm4 4h14v2H7V9zm-4 4h18v2H3v-2zm4 4h14v2H7v-2z"/></svg>
+           </button>
+           <button id="fmt-align-center" class="fmt-btn" onclick="formatAlignCenter()" type="button" title="توسيط">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm3 4h12v2H6V9zm-3 4h18v2H3v-2zm3 4h12v2H6v-2z"/></svg>
+           </button>
+           <button id="fmt-align-left" class="fmt-btn" onclick="formatAlignLeft()" type="button" title="محاذاة لليسار">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 4h14v2H3V9zm0 4h18v2H3v-2zm0 4h14v2H3v-2z"/></svg>
+           </button>
+          </div>
+          <div class="fmt-divider"></div>
+          <div class="fmt-group">
+           <button class="fmt-btn" onclick="formatUndo()" type="button" title="تراجع (Ctrl+Z)">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a5 5 0 015 5v2M3 10l4-4M3 10l4 4"/></svg>
+           </button>
+           <button class="fmt-btn" onclick="formatRedo()" type="button" title="إعادة (Ctrl+Y)">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10H11a5 5 0 00-5 5v2M21 10l-4-4M21 10l-4 4"/></svg>
+           </button>
+          </div>
+          <div class="fmt-divider"></div>
+          <div class="fmt-group">
+           <select id="fmt-font-family" class="fmt-select" title="نوع الخط">
+            <option value="Cairo" selected>Cairo</option>
+            <option value="Arial">Arial</option>
+            <option value="Times New Roman">Times New Roman</option>
+            <option value="Courier New">Courier New</option>
+            <option value="Tahoma">Tahoma</option>
+            <option value="Simplified Arabic">Simplified Arabic</option>
+            <option value="Traditional Arabic">Traditional Arabic</option>
+           </select>
+           <select id="fmt-font-size" class="fmt-select fmt-select--size" title="حجم الخط">
+            <option value="12px">صغير</option>
+            <option value="16px" selected>عادي</option>
+            <option value="20px">فوق المتوسط</option>
+            <option value="24px">كبير</option>
+            <option value="32px">كبير جداً</option>
+            <option value="48px">الأقصى</option>
+           </select>
+          </div>
+         </div>
          <input type="file" id="doc-import-input" class="sr-only" accept=".txt,.docx,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document" aria-hidden="true">
          <div id="write-area">
           <div id="analysis-limit-banner" class="analysis-limit-banner is-hidden" role="status" aria-live="polite"></div>
@@ -996,6 +1047,7 @@
       initTheme();
       initUI();
       initEditor();
+      if (typeof initFormatToolbar === 'function') initFormatToolbar();
       initDocuments();
       updateSuggestionsList([]);
       // Phase 7 — Sync System
@@ -1006,12 +1058,6 @@
       initDocumentsCloud();
       initSummaries();
 
-      const mobileImport = document.getElementById('doc-import-btn-mobile');
-      const importInput = document.getElementById('doc-import-input');
-      if (mobileImport && importInput) {
-        mobileImport.addEventListener('click', () => importInput.click());
-      }
-
       try {
         const savedPage = sessionStorage.getItem('bayan_current_page');
         if (savedPage) {

src/js/editor.js

@@ -137,7 +137,6 @@ async function analyzeText() {
 
   try {
     const savedSelection = saveSelection();
-    const currentCaretOffset = getCaretOffset();
 
     const response = await fetch('/api/analyze', {
       method: 'POST',
@@ -161,17 +160,12 @@ async function analyzeText() {
 
     window.currentSuggestions = sortSuggestions(data.suggestions || []);
 
-    const highlightedHtml = render({
-      text: text,
-      suggestions: window.currentSuggestions
-    });
-
-    setEditorHTML(highlightedHtml);
+    // Use DOM overlay instead of innerHTML replacement to preserve formatting
+    const editor = getEditorElement();
+    overlaySuggestions(editor, window.currentSuggestions);
 
     if (savedSelection) {
       restoreSelection(savedSelection);
-    } else {
-      setCaretOffset(currentCaretOffset);
     }
 
     const spellingCount = window.currentSuggestions.filter((s) => s.type === 'spelling').length;
@@ -193,7 +187,8 @@ async function analyzeText() {
 function renderWithoutSuggestions(text) {
   const editor = getEditorElement();
   if (!editor) return;
-  editor.textContent = text;
+  // Just clear overlays, don't replace content (preserves formatting)
+  clearOverlays(editor);
   updatePlaceholder();
 }
 
@@ -302,11 +297,23 @@ function hideTooltip() {
 }
 
 function applySuggestionAtOffsets(suggestion) {
-  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));
+  // Find the error span in the DOM and replace its text content
+  // This preserves formatting (bold, italic, etc.) around/inside the span
+  const idx = (window.currentSuggestions || []).indexOf(suggestion);
+  const errorSpan = idx >= 0 ? document.querySelector(`[data-suggestion-id="${idx}"]`) : null;
+
+  if (errorSpan) {
+    // Replace the error span with the corrected text node
+    const correctedNode = document.createTextNode(suggestion.correction);
+    errorSpan.replaceWith(correctedNode);
+  } 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));
+  }
   hideTooltip();
   analyzeTextDelayed();
 }
@@ -317,29 +324,43 @@ function applyCorrection() {
 }
 
 function applyAlternativeCorrection(suggestion, correctionText) {
-  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 idx = (window.currentSuggestions || []).indexOf(suggestion);
+  const errorSpan = idx >= 0 ? document.querySelector(`[data-suggestion-id="${idx}"]`) : null;
+
+  if (errorSpan) {
+    const correctedNode = document.createTextNode(correctionText);
+    errorSpan.replaceWith(correctedNode);
+  } 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));
+  }
   hideTooltip();
   analyzeTextDelayed();
 }
 
 function dismissSuggestion(suggestion) {
-  // Remove this suggestion from the list (keep the word as-is)
+  // Remove the error highlight but keep the text as-is
+  const idx = (window.currentSuggestions || []).indexOf(suggestion);
+  const errorSpan = idx >= 0 ? document.querySelector(`[data-suggestion-id="${idx}"]`) : null;
+
+  if (errorSpan) {
+    // Unwrap: replace span with its text content
+    const parent = errorSpan.parentNode;
+    while (errorSpan.firstChild) {
+      parent.insertBefore(errorSpan.firstChild, errorSpan);
+    }
+    parent.removeChild(errorSpan);
+    parent.normalize();
+  }
+
   if (window.currentSuggestions) {
     window.currentSuggestions = window.currentSuggestions.filter(
       s => !(s.start === suggestion.start && s.end === suggestion.end)
     );
-    // Re-render without this suggestion
-    const text = getEditorText();
-    const highlightedHtml = render({
-      text: text,
-      suggestions: window.currentSuggestions
-    });
-    setEditorHTML(highlightedHtml);
-    
+
     const spellingCount = window.currentSuggestions.filter(s => s.type === 'spelling').length;
     const grammarCount = window.currentSuggestions.filter(s => s.type === 'grammar').length;
     const punctuationCount = window.currentSuggestions.filter(s => s.type === 'punctuation').length;

src/js/format.js

@@ -0,0 +1,132 @@
+// src/js/format.js
+// Rich text formatting commands for the editor
+
+/**
+ * Execute a formatting command on the current selection
+ */
+function execFormat(command, value) {
+  document.execCommand(command, false, value || null);
+  const editor = getEditorElement();
+  if (editor) editor.focus();
+  updateFormatState();
+}
+
+/* ── Text style ── */
+function formatBold() { execFormat('bold'); }
+function formatItalic() { execFormat('italic'); }
+function formatUnderline() { execFormat('underline'); }
+function formatStrikethrough() { execFormat('strikethrough'); }
+
+/* ── Undo / Redo ── */
+function formatUndo() { execFormat('undo'); }
+function formatRedo() { execFormat('redo'); }
+
+/* ── Alignment ── */
+function formatAlignRight() { execFormat('justifyRight'); }
+function formatAlignCenter() { execFormat('justifyCenter'); }
+function formatAlignLeft() { execFormat('justifyLeft'); }
+
+/* ── Font family ── */
+function formatFont(fontName) {
+  execFormat('fontName', fontName);
+}
+
+/* ── Font size ── */
+// execCommand fontSize only supports 1-7, so we use CSS instead
+function formatFontSize(size) {
+  const sel = window.getSelection();
+  if (!sel.rangeCount) return;
+
+  const range = sel.getRangeAt(0);
+  if (range.collapsed) return; // no selection
+
+  // Wrap selected text in a span with the font size
+  const span = document.createElement('span');
+  span.style.fontSize = size;
+  try {
+    range.surroundContents(span);
+  } catch (e) {
+    // If selection crosses elements, use execCommand as fallback
+    execFormat('fontSize', '4');
+    // Then find the font element and fix the size
+    const editor = getEditorElement();
+    if (editor) {
+      editor.querySelectorAll('font[size="4"]').forEach(f => {
+        const s = document.createElement('span');
+        s.style.fontSize = size;
+        s.innerHTML = f.innerHTML;
+        f.replaceWith(s);
+      });
+    }
+  }
+  updateFormatState();
+}
+
+/**
+ * Update toolbar button active states based on current selection
+ */
+function updateFormatState() {
+  const btnMap = {
+    'fmt-bold': 'bold',
+    'fmt-italic': 'italic',
+    'fmt-underline': 'underline',
+    'fmt-strikethrough': 'strikeThrough',
+    'fmt-align-right': 'justifyRight',
+    'fmt-align-center': 'justifyCenter',
+    'fmt-align-left': 'justifyLeft',
+  };
+
+  Object.entries(btnMap).forEach(([id, command]) => {
+    const btn = document.getElementById(id);
+    if (btn) {
+      const isActive = document.queryCommandState(command);
+      btn.classList.toggle('fmt-active', isActive);
+    }
+  });
+
+  // Font family
+  const fontSelect = document.getElementById('fmt-font-family');
+  if (fontSelect) {
+    const currentFont = document.queryCommandValue('fontName').replace(/['"]/g, '');
+    if (currentFont) {
+      // Try to match
+      for (let i = 0; i < fontSelect.options.length; i++) {
+        if (fontSelect.options[i].value === currentFont) {
+          fontSelect.selectedIndex = i;
+          break;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Initialize formatting toolbar events
+ */
+function initFormatToolbar() {
+  const editor = getEditorElement();
+  if (!editor) return;
+
+  // Update button states on selection change
+  document.addEventListener('selectionchange', () => {
+    if (editor.contains(document.activeElement) || editor === document.activeElement) {
+      updateFormatState();
+    }
+  });
+
+  // Font family change
+  const fontSelect = document.getElementById('fmt-font-family');
+  if (fontSelect) {
+    fontSelect.addEventListener('change', () => {
+      formatFont(fontSelect.value);
+    });
+  }
+
+  // Font size change
+  const sizeSelect = document.getElementById('fmt-font-size');
+  if (sizeSelect) {
+    sizeSelect.addEventListener('change', () => {
+      formatFontSize(sizeSelect.value);
+    });
+  }
+}

src/js/renderer.js

@@ -200,6 +200,151 @@ function render(input) {
   return renderHighlightedText(text, suggestions);
 }
 
+/**
+ * Walk all text nodes in a DOM subtree in document order
+ */
+function walkTextNodes(root, callback) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
+  let node;
+  while ((node = walker.nextNode())) {
+    callback(node);
+  }
+}
+
+/**
+ * Remove existing error highlight spans without destroying content
+ * Unwraps the spans back to plain text nodes
+ */
+function clearOverlays(editor) {
+  const errorSpans = editor.querySelectorAll('.spelling-error, .grammar-error, .punctuation-suggestion');
+  errorSpans.forEach(span => {
+    const parent = span.parentNode;
+    while (span.firstChild) {
+      parent.insertBefore(span.firstChild, span);
+    }
+    parent.removeChild(span);
+  });
+  editor.normalize(); // merge adjacent text nodes
+}
+
+/**
+ * Overlay suggestion highlights on the editor DOM without replacing innerHTML.
+ * This preserves all formatting (bold, italic, underline, font, etc.)
+ *
+ * @param {HTMLElement} editor - The editor element
+ * @param {Array} suggestions - Sorted array of suggestions with { start, end, original, correction, type }
+ */
+function overlaySuggestions(editor, suggestions) {
+  // 1. Clear old overlays
+  clearOverlays(editor);
+
+  if (!suggestions || suggestions.length === 0) return;
+
+  // 2. Collect text nodes with their character offsets
+  const textNodes = [];
+  let offset = 0;
+  walkTextNodes(editor, (node) => {
+    textNodes.push({ node, start: offset, end: offset + node.length });
+    offset += node.length;
+  });
+
+  if (textNodes.length === 0) return;
+
+  // 3. Process suggestions in REVERSE order to avoid offset shifts
+  const sorted = [...suggestions].sort((a, b) => b.start - a.start);
+
+  sorted.forEach((suggestion, reverseIdx) => {
+    const realIdx = suggestions.length - 1 - reverseIdx;
+    const { start, end } = suggestion;
+    const errorClass = getErrorClass(suggestion.type);
+
+    // Find text nodes that overlap with this suggestion range
+    const overlapping = textNodes.filter(tn => tn.start < end && tn.end > start);
+    if (overlapping.length === 0) return;
+
+    // Create the wrapper span
+    const wrapper = document.createElement('span');
+    wrapper.className = errorClass;
+    wrapper.dataset.suggestionId = String(realIdx);
+    wrapper.dataset.original = suggestion.original || '';
+    wrapper.dataset.correction = suggestion.correction || '';
+    wrapper.dataset.type = suggestion.type || 'spelling';
+    wrapper.title = `${suggestion.type}: ${suggestion.correction}`;
+
+    if (overlapping.length === 1) {
+      // Simple case: suggestion falls within a single text node
+      const tn = overlapping[0];
+      const localStart = Math.max(0, start - tn.start);
+      const localEnd = Math.min(tn.node.length, end - tn.start);
+
+      // Split the text node
+      const textContent = tn.node.textContent;
+      const beforeText = textContent.slice(0, localStart);
+      const errorText = textContent.slice(localStart, localEnd);
+      const afterText = textContent.slice(localEnd);
+
+      const parent = tn.node.parentNode;
+      const errorTextNode = document.createTextNode(errorText);
+      wrapper.appendChild(errorTextNode);
+
+      // Replace the original text node
+      if (afterText) {
+        parent.insertBefore(document.createTextNode(afterText), tn.node.nextSibling);
+      }
+      parent.insertBefore(wrapper, tn.node.nextSibling || null);
+      if (beforeText) {
+        parent.insertBefore(document.createTextNode(beforeText), wrapper);
+      }
+      parent.removeChild(tn.node);
+
+    } else {
+      // Complex case: suggestion spans multiple text nodes
+      // We use a Range to extract and wrap the content
+      try {
+        const range = document.createRange();
+
+        const firstTN = overlapping[0];
+        const lastTN = overlapping[overlapping.length - 1];
+        const rangeStart = Math.max(0, start - firstTN.start);
+        const rangeEnd = Math.min(lastTN.node.length, end - lastTN.start);
+
+        range.setStart(firstTN.node, rangeStart);
+        range.setEnd(lastTN.node, rangeEnd);
+
+        range.surroundContents(wrapper);
+      } catch (e) {
+        // surroundContents can fail if the range crosses element boundaries
+        // In that case, just wrap the text of the first overlapping node
+        const tn = overlapping[0];
+        const localStart = Math.max(0, start - tn.start);
+        const localEnd = Math.min(tn.node.length, end - tn.start);
+
+        if (localEnd > localStart) {
+          const textContent = tn.node.textContent;
+          const beforeText = textContent.slice(0, localStart);
+          const errorText = textContent.slice(localStart, localEnd);
+          const afterText = textContent.slice(localEnd);
+
+          const parent = tn.node.parentNode;
+          wrapper.appendChild(document.createTextNode(errorText));
+          if (afterText) parent.insertBefore(document.createTextNode(afterText), tn.node.nextSibling);
+          parent.insertBefore(wrapper, tn.node.nextSibling || null);
+          if (beforeText) parent.insertBefore(document.createTextNode(beforeText), wrapper);
+          parent.removeChild(tn.node);
+        }
+      }
+    }
+
+    // Rebuild textNodes array after modification (for next iteration)
+    textNodes.length = 0;
+    offset = 0;
+    walkTextNodes(editor, (node) => {
+      textNodes.push({ node, start: offset, end: offset + node.length });
+      offset += node.length;
+    });
+  });
+}
+
 // Export for use in modules (if using ES6 modules)
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
@@ -208,6 +353,8 @@ if (typeof module !== 'undefined' && module.exports) {
     escapeHtml,
     createSegments,
     sortSuggestions,
-    getErrorClass
+    getErrorClass,
+    overlaySuggestions,
+    clearOverlays
   };
 }