npm package: @davides98/md-editor
Description: Un editor Markdown moderno e potente costruito con React, progettato per offrire un'esperienza di scrittura fluida e ricca di funzionalità.
Latest version: 1.0.2

# 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~~, <u>Sottolineato</u>
    *   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:
    ```bash
    npm install
    ```
3.  Avvia il server di sviluppo:
    ```bash
    npm run dev
    ```
4.  Compila per la produzione:
    ```bash
    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>` | <u>Testo</u> |
| Evidenziato | `<mark>Testo</mark>` | <mark>Testo</mark> |
| Apice | `^Testo^` | ^Testo^ |
| Pedice | `~Testo~` | ~Testo~ |
| Interruzione Pagina | `---` | (Linea/Pagina Nuova) |
| Commento | `<!-- Nota -->` | *(Invisibile)* |

### Intestazioni
```markdown
# Titolo H1
## Titolo H2
### Titolo H3
#### Titolo H4
```

### Liste
**Puntata**
```markdown
- Elemento 1
- Elemento 2
  - Sotto-elemento
```
**Numerata**
```markdown
1. Primo
2. Secondo
```
**Task List**
```markdown
- [ ] Da fare
- [x] Completato
```

### Codice
Inline: \`codice\`
Blocco:
\`\`\`javascript
console.log("Hello World");
\`\`\`

### Tabelle
```markdown
| Intestazione 1 | Intestazione 2 |
| :--- | :--- |
| Cella 1 | Cella 2 |
```

### Matematica (LaTeX)
Inline: `$E=mc^2$` -> $E=mc^2$

Blocco:
```markdown
$$
\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}
$$
```

### Diagrammi (Mermaid)
```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)
```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
```html
<div class="row">
  <div class="col">Colonna 1</div>
  <div class="col">Colonna 2</div>
</div>
```

### Toggle (Collapsible)
```html
<details>
<summary>Clicca per espandere</summary>
Contenuto nascosto
</details>
```