Markdown muharrir

1. root.fx-markdownşart
2. bar.fx-markdown__barixtiyoriy
3. tool.fx-markdown__toolixtiyoriy
4. panel.fx-markdown__panelşart
5. input.fx-markdown__inputşart
6. preview.fx-markdown__previewixtiyoriy
7. empty.fx-markdown__emptyixtiyoriy
8. mention.fx-markdown__mentionixtiyoriy
9. task.fx-markdown__taskixtiyoriy
10. foot.fx-markdown__footixtiyoriy
11. attach.fx-markdown__attachixtiyoriy

Rejim — APG tabs (← →), formatlaş paneli — APG toolbar (bitta Tab nuqtasi, ← → Home End). Har tugmada aria-label. Textarea role=combobox (@ eslatiş röyxati). «Köriş» paneli tabindex=0, vazifa bandlari sr-only «Bajarilgan:» matni bilan. Köriş rejimida formatlaş tugmalari öçiriladi.

Naqş: WAI-ARIA APG toolbar · rol group

npx foxui add markdown

<div class="fx-markdown" data-fx-markdown>
  <div class="fx-markdown__bar">
    <div class="fx-tabs" role="tablist" aria-label="Muharrir rejimi" data-variant="pill" data-fx-tabs>
      <button class="fx-tabs__tab" role="tab" id="md-t1" aria-controls="md-p1" aria-selected="true">Yoziş</button>
      <button class="fx-tabs__tab" role="tab" id="md-t2" aria-controls="md-p2" aria-selected="false">Köriş</button>
    </div>
    <div class="fx-toolbar" data-variant="flat" role="toolbar" aria-label="Formatlaş" aria-controls="md-in" data-fx-toolbar><button class="fx-markdown__tool" data-md="bold" aria-label="Qalin (Ctrl+B)" title="Qalin (Ctrl+B)"><b aria-hidden="true">B</b></button><button class="fx-markdown__tool" data-md="italic" aria-label="Qiya (Ctrl+I)" title="Qiya (Ctrl+I)"><i aria-hidden="true">I</i></button><button class="fx-markdown__tool" data-md="heading" aria-label="Sarlavha" title="Sarlavha"><b aria-hidden="true">H</b></button><button class="fx-markdown__tool" data-md="link" aria-label="Havola (Ctrl+K)" title="Havola (Ctrl+K)"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M8.5 11.5a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-.9.9M11.5 8.5a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l.9-.9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button><button class="fx-markdown__tool" data-md="code" aria-label="Kod" title="Kod"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7 6l-4 4 4 4M13 6l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button><button class="fx-markdown__tool" data-md="quote" aria-label="Iqtibos" title="Iqtibos"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 6h12M4 10h8M4 14h10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button><button class="fx-markdown__tool" data-md="ul" aria-label="Röyxat" title="Röyxat"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M8 6h9M8 10h9M8 14h9M4 6h.01M4 10h.01M4 14h.01" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button><button class="fx-markdown__tool" data-md="ol" aria-label="Raqamli röyxat" title="Raqamli röyxat"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M8 6h9M8 10h9M8 14h9M3.5 5l1-1v4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button><button class="fx-markdown__tool" data-md="task" aria-label="Vazifalar röyxati" title="Vazifalar röyxati"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5.5l1.5 1.5L7 4.5M9 6h8M3 12h4v4H3zM9 14h8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button><button class="fx-markdown__tool" data-md="mention" aria-label="Odamni eslatiş (@)" title="Odamni eslatiş (@)"><span aria-hidden="true">@</span></button></div>
  </div>
  <div class="fx-markdown__panel" role="tabpanel" id="md-p1" aria-labelledby="md-t1">
    <div class="fx-mention" data-fx-mention>
      <textarea class="fx-markdown__input" id="md-in" aria-label="Izoh matni (Markdown)" role="combobox" aria-expanded="false" aria-controls="md-ml" aria-autocomplete="list" placeholder="Bitim boʻyicha izoh yozing… (@ bilan hamkasbni eslating)">### Uchrashuv natijasi
Mijoz **yillik tarif**ga qiziqdi, narxni _chegirma bilan_ soʻradi.

- [x] Taklifnoma yuborildi
- [ ] Shartnoma loyihasi — @dilnoza
- [ ] Juma kuni qayta qoʻngʻiroq

Batafsil: [narxlar jadvali](https://misol.uz/narxlar)</textarea>
      <div class="fx-mention__popup" hidden><ul class="fx-listbox" role="listbox" id="md-ml" aria-label="Hamkasblar"><li class="fx-option" role="option" id="md-m1" data-value="dilnoza">Dilnoza Rahimova</li><li class="fx-option" role="option" id="md-m2" data-value="bobur">Bobur Toshmatov</li><li class="fx-option" role="option" id="md-m3" data-value="madina">Madina Yusupova</li><li class="fx-listbox__empty" hidden>Topilmadi</li></ul></div>
    </div>
  </div>
  <div class="fx-markdown__panel" role="tabpanel" id="md-p2" aria-labelledby="md-t2" tabindex="0" hidden><div class="fx-markdown__preview fx-prose" data-size="sm"></div></div>
  <div class="fx-markdown__foot"><span>Markdown qöllanadi · rasmni taşlang yoki joylang · Ctrl+Enter — yuboriş</span><label class="fx-markdown__attach"><input type="file" multiple><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M13.5 7.5l-5 5a2 2 0 0 1-2.8-2.8l5.5-5.5a3.5 3.5 0 0 1 5 5l-5.7 5.7a5 5 0 0 1-7-7L8 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Fayl biriktiriş</label></div>
</div>

Tokenlar: --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-border-color-default --fx-border-color-field --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-font-adjust-mono --fx-font-adjust-sans --fx-font-family-mono --fx-font-family-sans --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-badge --fx-radius-control --fx-radius-field-multiline --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-brand --fx-text-disabled --fx-text-primary --fx-text-secondary --fx-text-tertiary