feat: Premium formatting toolbar redesign - Custom dropdown menus for font family and size (animated, styled) - Pill-shaped button groups with gradient active states - Alignment applies to paragraph with selection (standard behavior) - Undo/Redo works for typing + formatting (browser native stack) - Font preview in size dropdown - Professional visual polish

src/css/components.css

@@ -288,8 +288,8 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 4px;
-  padding: 6px var(--spacing-md);
+  gap: 6px;
+  padding: 8px var(--spacing-md);
   border-bottom: 1px solid var(--color-border);
   background: var(--color-surface);
 }
@@ -297,23 +297,32 @@
 .fmt-group {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 1px;
+  background: var(--color-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.fmt-group--font {
+  background: transparent;
+  gap: 6px;
+  overflow: visible;
 }
 
 .fmt-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   border: none;
-  border-radius: var(--radius-sm, 4px);
-  background: transparent;
+  background: var(--color-surface);
   color: var(--color-text-secondary);
   cursor: pointer;
   font-family: 'Georgia', 'Times New Roman', serif;
   font-size: 14px;
-  transition: all var(--transition-base);
+  transition: all 0.15s ease;
+  position: relative;
 }
 
 .fmt-btn:hover {
@@ -322,9 +331,8 @@
 }
 
 .fmt-btn.fmt-active {
-  background: var(--color-primary);
-  color: var(--color-text-inverse);
-  border-radius: var(--radius-sm, 4px);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+  color: #fff;
 }
 
 .fmt-btn svg {
@@ -333,33 +341,134 @@
 
 .fmt-divider {
   width: 1px;
-  height: 24px;
+  height: 28px;
   background: var(--color-border);
-  margin: 0 4px;
+  margin: 0 2px;
+  flex-shrink: 0;
 }
 
-.fmt-select {
-  padding: 4px 8px;
+/* ── Custom Dropdowns ── */
+.fmt-dropdown {
+  position: relative;
+}
+
+.fmt-dropdown__trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm, 4px);
+  border-radius: 6px;
   background: var(--color-surface);
   color: var(--color-text-primary);
   font-family: inherit;
-  font-size: var(--font-size-label, 12px);
+  font-size: 13px;
+  font-weight: 500;
   cursor: pointer;
-  height: 32px;
-  min-width: 100px;
-  transition: border-color var(--transition-base);
+  height: 34px;
+  min-width: 120px;
+  transition: all 0.15s ease;
+  white-space: nowrap;
 }
 
-.fmt-select:hover,
-.fmt-select:focus {
+.fmt-dropdown__trigger:hover {
   border-color: var(--color-primary);
-  outline: none;
+  background: var(--color-surface-elevated);
+}
+
+.fmt-dropdown__trigger--size {
+  min-width: 56px;
+  justify-content: center;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.fmt-dropdown__icon {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+.fmt-dropdown__chevron {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  transition: transform 0.2s ease;
+  margin-inline-start: auto;
+}
+
+.fmt-dropdown.open .fmt-dropdown__chevron {
+  transform: rotate(180deg);
+}
+
+.fmt-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 180px;
+  max-height: 280px;
+  overflow-y: auto;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  padding: 4px;
+  z-index: 100;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all 0.2s ease;
+}
+
+.fmt-dropdown.open .fmt-dropdown__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.fmt-dropdown__menu--size {
+  min-width: 100px;
+}
+
+.fmt-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+  text-align: right;
+}
+
+.fmt-dropdown__item:hover {
+  background: var(--color-surface-elevated);
+}
+
+.fmt-dropdown__item--active {
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+  color: #fff;
+}
+
+.fmt-dropdown__item--active:hover {
+  opacity: 0.9;
+}
+
+.fmt-size-preview {
+  display: inline-block;
+  width: 24px;
+  text-align: center;
+  font-weight: 700;
+  color: var(--color-text-secondary);
+  line-height: 1;
 }
 
-.fmt-select--size {
-  min-width: 80px;
+.fmt-dropdown__item--active .fmt-size-preview {
+  color: #fff;
 }
 
 .editor-surface {

src/index.html

@@ -492,6 +492,41 @@
          </div>
          <!-- Formatting Toolbar -->
          <div class="format-toolbar" id="format-toolbar">
+          <!-- Font group -->
+          <div class="fmt-group fmt-group--font">
+           <div class="fmt-dropdown" id="fmt-font-wrap">
+            <button class="fmt-dropdown__trigger" type="button" id="fmt-font-trigger" aria-haspopup="true" aria-expanded="false">
+             <svg class="fmt-dropdown__icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>
+             <span id="fmt-font-label">Cairo</span>
+             <svg class="fmt-dropdown__chevron" width="10" height="10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
+            </button>
+            <div class="fmt-dropdown__menu" id="fmt-font-menu" role="menu">
+             <button class="fmt-dropdown__item" data-font="Cairo" role="menuitem" style="font-family:Cairo">Cairo</button>
+             <button class="fmt-dropdown__item" data-font="Arial" role="menuitem" style="font-family:Arial">Arial</button>
+             <button class="fmt-dropdown__item" data-font="Times New Roman" role="menuitem" style="font-family:'Times New Roman'">Times New Roman</button>
+             <button class="fmt-dropdown__item" data-font="Tahoma" role="menuitem" style="font-family:Tahoma">Tahoma</button>
+             <button class="fmt-dropdown__item" data-font="Simplified Arabic" role="menuitem" style="font-family:'Simplified Arabic'">Simplified Arabic</button>
+             <button class="fmt-dropdown__item" data-font="Traditional Arabic" role="menuitem" style="font-family:'Traditional Arabic'">Traditional Arabic</button>
+             <button class="fmt-dropdown__item" data-font="Courier New" role="menuitem" style="font-family:'Courier New'">Courier New</button>
+            </div>
+           </div>
+           <div class="fmt-dropdown" id="fmt-size-wrap">
+            <button class="fmt-dropdown__trigger fmt-dropdown__trigger--size" type="button" id="fmt-size-trigger" aria-haspopup="true" aria-expanded="false">
+             <span id="fmt-size-label">16</span>
+             <svg class="fmt-dropdown__chevron" width="10" height="10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
+            </button>
+            <div class="fmt-dropdown__menu fmt-dropdown__menu--size" id="fmt-size-menu" role="menu">
+             <button class="fmt-dropdown__item" data-size="12px" role="menuitem"><span class="fmt-size-preview" style="font-size:12px">أ</span> 12</button>
+             <button class="fmt-dropdown__item fmt-dropdown__item--active" data-size="16px" role="menuitem"><span class="fmt-size-preview" style="font-size:16px">أ</span> 16</button>
+             <button class="fmt-dropdown__item" data-size="20px" role="menuitem"><span class="fmt-size-preview" style="font-size:18px">أ</span> 20</button>
+             <button class="fmt-dropdown__item" data-size="24px" role="menuitem"><span class="fmt-size-preview" style="font-size:20px">أ</span> 24</button>
+             <button class="fmt-dropdown__item" data-size="32px" role="menuitem"><span class="fmt-size-preview" style="font-size:24px">أ</span> 32</button>
+             <button class="fmt-dropdown__item" data-size="48px" role="menuitem"><span class="fmt-size-preview" style="font-size:28px">أ</span> 48</button>
+            </div>
+           </div>
+          </div>
+          <div class="fmt-divider"></div>
+          <!-- Text style group -->
           <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>
@@ -499,8 +534,9 @@
            <button id="fmt-strikethrough" class="fmt-btn" onclick="formatStrikethrough()" type="button" title="يتوسطه خط"><s>S</s></button>
           </div>
           <div class="fmt-divider"></div>
+          <!-- Alignment group -->
           <div class="fmt-group">
-           <button id="fmt-align-right" class="fmt-btn" onclick="formatAlignRight()" type="button" title="محاذاة لليمين">
+           <button id="fmt-align-right" class="fmt-btn fmt-active" 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="توسيط">
@@ -511,6 +547,7 @@
            </button>
           </div>
           <div class="fmt-divider"></div>
+          <!-- Undo/Redo group -->
           <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>
@@ -519,26 +556,6 @@
             <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">

src/js/format.js

@@ -17,11 +17,11 @@ function formatItalic() { execFormat('italic'); }
 function formatUnderline() { execFormat('underline'); }
 function formatStrikethrough() { execFormat('strikethrough'); }
 
-/* ── Undo / Redo ── */
+/* ── Undo / Redo (handles both typing and formatting) ── */
 function formatUndo() { execFormat('undo'); }
 function formatRedo() { execFormat('redo'); }
 
-/* ── Alignment ── */
+/* ── Alignment (applies to paragraph containing selection) ── */
 function formatAlignRight() { execFormat('justifyRight'); }
 function formatAlignCenter() { execFormat('justifyCenter'); }
 function formatAlignLeft() { execFormat('justifyLeft'); }
@@ -29,36 +29,64 @@ function formatAlignLeft() { execFormat('justifyLeft'); }
 /* ── Font family ── */
 function formatFont(fontName) {
   execFormat('fontName', fontName);
+  // Update the dropdown label
+  const label = document.getElementById('fmt-font-label');
+  if (label) label.textContent = fontName;
+  closeAllFmtDropdowns();
 }
 
 /* ── 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);
-      });
+  if (range.collapsed) {
+    // No selection — size will apply to next typed text
+    // Use a zero-width space trick
+    const span = document.createElement('span');
+    span.style.fontSize = size;
+    span.textContent = '\u200B';
+    range.insertNode(span);
+    // Place cursor after the span
+    const newRange = document.createRange();
+    newRange.setStartAfter(span);
+    newRange.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+  } else {
+    // Wrap selected text
+    const span = document.createElement('span');
+    span.style.fontSize = size;
+    try {
+      range.surroundContents(span);
+    } catch (e) {
+      // Fallback: use execCommand
+      execFormat('fontSize', '4');
+      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);
+        });
+      }
     }
   }
+
+  // Update label
+  const label = document.getElementById('fmt-size-label');
+  if (label) label.textContent = parseInt(size);
+  
+  // Update active item
+  document.querySelectorAll('#fmt-size-menu .fmt-dropdown__item').forEach(item => {
+    item.classList.toggle('fmt-dropdown__item--active', item.dataset.size === size);
+  });
+
+  closeAllFmtDropdowns();
+  const editor = getEditorElement();
+  if (editor) editor.focus();
   updateFormatState();
 }
 
@@ -71,33 +99,45 @@ function updateFormatState() {
     '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);
+      btn.classList.toggle('fmt-active', document.queryCommandState(command));
     }
   });
 
-  // 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;
-        }
-      }
+  // Alignment — mutually exclusive
+  const alignMap = {
+    'fmt-align-right': 'justifyRight',
+    'fmt-align-center': 'justifyCenter',
+    'fmt-align-left': 'justifyLeft',
+  };
+  Object.entries(alignMap).forEach(([id, command]) => {
+    const btn = document.getElementById(id);
+    if (btn) {
+      btn.classList.toggle('fmt-active', document.queryCommandState(command));
     }
-  }
+  });
+}
+
+/**
+ * Close all formatting dropdowns
+ */
+function closeAllFmtDropdowns() {
+  document.querySelectorAll('.fmt-dropdown').forEach(d => d.classList.remove('open'));
+}
+
+/**
+ * Toggle a specific dropdown
+ */
+function toggleFmtDropdown(wrapperId) {
+  const wrap = document.getElementById(wrapperId);
+  if (!wrap) return;
+  const isOpen = wrap.classList.contains('open');
+  closeAllFmtDropdowns();
+  if (!isOpen) wrap.classList.add('open');
 }
 
 /**
@@ -114,19 +154,47 @@ function initFormatToolbar() {
     }
   });
 
-  // Font family change
-  const fontSelect = document.getElementById('fmt-font-family');
-  if (fontSelect) {
-    fontSelect.addEventListener('change', () => {
-      formatFont(fontSelect.value);
+  // Font dropdown trigger
+  const fontTrigger = document.getElementById('fmt-font-trigger');
+  if (fontTrigger) {
+    fontTrigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleFmtDropdown('fmt-font-wrap');
     });
   }
 
-  // Font size change
-  const sizeSelect = document.getElementById('fmt-font-size');
-  if (sizeSelect) {
-    sizeSelect.addEventListener('change', () => {
-      formatFontSize(sizeSelect.value);
+  // Font items
+  document.querySelectorAll('#fmt-font-menu .fmt-dropdown__item').forEach(item => {
+    item.addEventListener('click', () => {
+      formatFont(item.dataset.font);
+    });
+  });
+
+  // Size dropdown trigger
+  const sizeTrigger = document.getElementById('fmt-size-trigger');
+  if (sizeTrigger) {
+    sizeTrigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleFmtDropdown('fmt-size-wrap');
     });
   }
+
+  // Size items
+  document.querySelectorAll('#fmt-size-menu .fmt-dropdown__item').forEach(item => {
+    item.addEventListener('click', () => {
+      formatFontSize(item.dataset.size);
+    });
+  });
+
+  // Close dropdowns when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.fmt-dropdown')) {
+      closeAllFmtDropdowns();
+    }
+  });
+
+  // Close dropdowns on Escape
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeAllFmtDropdowns();
+  });
 }