React Markdown Editor

Un editor Markdown moderno e potente costruito con React, progettato per offrire un'esperienza di scrittura fluida e ricca di funzionalità.

🚀 Caratteristiche Principali

📝 Editing e Formattazione

• Editor Split-View: Modalità di visualizzazione flessibile (Solo Editor, Solo Anteprima, Split View 50/50).
• Sincronizzazione Scorrimento: Lo scroll dell'editor e dell'anteprima sono perfettamente sincronizzati.
• Formattazione Ricca: Supporto completo per:
  • Grassetto, Corsivo, ~~Barrato~~, Sottolineato
  • Testo ^Apice^ e ~Pedice~
  • Evidenziazione testuale con selezione colore
  • Quote e Blocchi di codice

🛠 Strumenti Avanzati

• Inserimento Tabelle: Selettore visuale a griglia per creare tabelle al volo. Formattazione automatica del codice Markdown.
• Gestione Immagini:
  • Caricamento immagini locali (Drag & Drop o Selettore file).
  • Image Editor Integrato: Ritaglia (Crop), Ruota e Zoomma le immagini prima di inserirle.
• Diagrammi Mermaid: Editor visuale dedicato per creare diagrammi di flusso, grafici sequence, Gantt, ecc. con rendering in tempo reale.
• Grafici Dati (Recharts): Strumento per inserire grafici a barre, linee, area e torta direttamente nel documento tramite una semplice configurazione JSON.
• Formule Matematiche: Supporto per LaTeX (KaTeX) per formule inline ($E=mc^2$) e a blocco.

✨ UX e Produttività

• Toolbar Flottante (Inline): Selezionando del testo appare una toolbar contestuale per formattazione rapida.
• Emoji Picker: Ampia selezione di emoji inseribili con un click.
• Task List: Supporto per liste di controllo interattive (- [ ] task).
• Commenti: Inserimento rapido di commenti HTML invisibili nel render finale.
• Layout a Colonne: Possibilità di inserire layout a 2, 3 o 4 colonne per impaginazioni avanzate.
• Toggle/Collapse: Creazione di sezioni di contenuto espandibili/collassabili.

💾 Gestione File

• File System Access API: Apre e Salva i file direttamente sul disco locale del computer (senza dover scaricare una copia).

🛠 Tecnologie Utilizzate

• React 19 & Vite
• CodeMirror 6: Per l'editor di codice sorgente.
• React-Markdown: Per il rendering dell'anteprima.
• Mermaid & Recharts: Per diagrammi e visualizzazione dati.
• React-Easy-Crop: Per l'editing delle immagini.
• Lucide React: Per le icone moderne.
• GitHub Flavored Markdown (GFM): Supporto esteso per tabelle, task list, ecc.

📦 Installazione e Avvio

1. Clona il repository.
2. Installa le dipendenze:

   npm install

3. Avvia il server di sviluppo:

   npm run dev

4. Compila per la produzione:

   npm run build

📖 Guida alla Sintassi

Formattazione Base

| Stile | Sintassi Desktop | Risultato | | :--- | :--- | :--- | | Grassetto | **Testo** | Testo | | Corsivo | *Testo* | Testo | | Barrato | ~~Testo~~ | ~~Testo~~ | | Sottolineato | <u>Testo</u> | Testo | | Evidenziato | <mark>Testo</mark> | Testo | | Apice | ^Testo^ | ^Testo^ | | Pedice | ~Testo~ | ~Testo~ | | Interruzione Pagina | --- | (Linea/Pagina Nuova) | | Commento | <!-- Nota --> | (Invisibile) |

Intestazioni

# Titolo H1
## Titolo H2
### Titolo H3
#### Titolo H4

Liste

Puntata

- Elemento 1
- Elemento 2
  - Sotto-elemento

Numerata

1. Primo
2. Secondo

Task List

- [ ] Da fare
- [x] Completato

Codice

Inline: `codice` Blocco: ```javascript console.log("Hello World"); ```

Tabelle

| Intestazione 1 | Intestazione 2 |
| :--- | :--- |
| Cella 1 | Cella 2 |

Matematica (LaTeX)

Inline: $E=mc^2$ -> $E=mc^2$

Blocco:

$$
\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}
$$

Diagrammi (Mermaid)

graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Debug];

(Usa il pulsante Mermaid nella toolbar per l'editor visuale)

Grafici (Recharts)

{
  "type": "bar",
  "data": [
    { "name": "A", "val": 10 },
    { "name": "B", "val": 20 }
  ],
  "xKey": "name",
  "series": [
    { "key": "val", "color": "#8884d8" }
  ]
}

(Usa il menu "Insert Chart" per modelli pronti di Bar, Line, Area, Pie)

Colonne

<div class="row">
  <div class="col">Colonna 1</div>
  <div class="col">Colonna 2</div>
</div>

Toggle (Collapsible)

<details>
<summary>Clicca per espandere</summary>
Contenuto nascosto
</details>