Torna alla Documentazione

Editor Markdown

L'Editor Markdown di Sutram permette di creare e modificare documenti di testo formattato direttamente nel browser. È un editor visuale (WYSIWYG) dove si vede il risultato finale mentre si modifica, senza bisogno di conoscere la sintassi markdown.

Creazione di un File Markdown

  1. Navigare fino a una cartella nel proprio progetto
  2. Fare clic sul menu ⋮ (tre puntini) nell'angolo in alto a destra
  3. Selezionare Aggiungi File Markdown
  4. Digitare un nome per il file
  5. L'editor si apre automaticamente con il titolo già inserito

Nota: Questa opzione appare solo all'interno delle cartelle (non nella radice del progetto) e richiede un piano PRO o superiore.

Modifica di un File Esistente

  1. Fare clic su qualsiasi file .md nell'elenco dei contenuti
  2. Nella visualizzazione, fare clic sul pulsante Modifica o sull'icona di espansione
  3. L'editor si apre con il contenuto attuale del file

Importante: Per modificare, è necessario effettuare il "check-out" del file. Questo riserva il file per sé, impedendo ad altre persone di modificarlo contemporaneamente.

Barra degli Strumenti

La barra degli strumenti si trova nella parte superiore dell'editor. Ogni pulsante applica una formattazione specifica.

Formattazione del Testo

Pulsante Nome Comportamento
B Grassetto Toggle - Fare clic una volta per attivare, fare clic di nuovo per disattivare. Funziona con il testo selezionato o alla posizione corrente del cursore. Scorciatoia: Ctrl+B (Windows) o Cmd+B (Mac)
I Corsivo Toggle - Funziona come il grassetto. Scorciatoia: Ctrl+I o Cmd+I
S Barrato Toggle - Aggiunge o rimuove una linea sopra il testo selezionato
<> Codice inline Toggle - Formatta il testo come codice (carattere a spaziatura fissa)

Titoli

Pulsante Nome Comportamento
H1 Titolo 1 Toggle - Trasforma la riga corrente in titolo grande. Se è già H1, torna a paragrafo normale
H2 Titolo 2 Toggle - Titolo medio. Se è già H2, torna a paragrafo
H3 Titolo 3 Toggle - Titolo piccolo. Se è già H3, torna a paragrafo

Suggerimento: Posizionare il cursore su qualsiasi riga e fare clic su H1, H2 o H3 per trasformarla in titolo.

Elenchi

Pulsante Nome Comportamento
• Elenco puntato Toggle - Crea un elenco con punti. Fare clic di nuovo per tornare a paragrafo
1. Elenco numerato Toggle - Crea un elenco numerato automaticamente

Creazione di sotto-elementi: All'interno di un elenco, premere Tab per creare un sotto-elemento (rientrare) o Shift+Tab per tornare al livello precedente.

Blocchi Speciali

Pulsante Nome Comportamento
" Citazione Toggle - Crea un blocco di citazione (con barra laterale). Utile per evidenziare passaggi importanti
[ ] Blocco di codice Inserimento - Crea un'area per codice con righe multiple

Tabelle

Il pulsante tabella (icona griglia) apre un menu a discesa con tutte le opzioni per creare e modificare tabelle.

Opzione Comportamento
Inserisci tabella Crea una tabella 3x3 alla posizione del cursore
Aggiungi riga sopra Inserisce una nuova riga sopra la riga corrente
Aggiungi riga sotto Inserisce una nuova riga sotto la riga corrente
Aggiungi colonna a sinistra Inserisce una nuova colonna a sinistra della colonna corrente
Aggiungi colonna a destra Inserisce una nuova colonna a destra della colonna corrente
Elimina riga Rimuove la riga dove si trova il cursore
Elimina colonna Rimuove la colonna dove si trova il cursore
Elimina tabella Rimuove l'intera tabella

Come usare le tabelle:

  1. Creare una tabella: Fare clic sul pulsante tabella e selezionare "Inserisci tabella". Verrà creata una tabella 3x3.

  2. Modificare le celle: Fare clic su qualsiasi cella e digitare il contenuto. Usare Tab per passare alla cella successiva o Shift+Tab per tornare indietro.

  3. Aggiungere righe/colonne: Posizionare il cursore nella cella di riferimento, fare clic sul pulsante tabella e scegliere dove aggiungere (sopra, sotto, sinistra o destra).

  4. Eliminare righe/colonne: Posizionare il cursore nella riga o colonna da rimuovere, fare clic sul pulsante tabella e scegliere "Elimina riga" o "Elimina colonna".

  5. Eliminare l'intera tabella: Con il cursore in qualsiasi cella della tabella, fare clic sul pulsante tabella e scegliere "Elimina tabella".

Suggerimento: La prima riga della tabella viene automaticamente formattata come intestazione (testo in grassetto con sfondo evidenziato).

Link e Media

Pulsante Nome Comportamento
🔗 (globo) Link esterno Inserimento - Apre una casella per digitare un URL. Crea un link cliccabile nel testo
🔗 (catena) Link web del progetto Selezione - Mostra i link web salvati nella cartella corrente tra cui scegliere
🖼️ (paesaggio) Immagine da URL Inserimento - Apre una casella per incollare l'indirizzo di un'immagine da internet
🖼️ (cartella) Immagine del progetto Selezione - Mostra le immagini della cartella corrente tra cui scegliere e inserire
📹 Video del progetto Selezione - Mostra i link video della cartella corrente (YouTube, Vimeo, ecc.)
🎵 Audio del progetto Selezione - Mostra i link audio della cartella corrente (SoundCloud, Spotify, ecc.)

Come Inserire Link e Media

Link esterno (qualsiasi URL):

  1. Selezionare il testo che diventerà il link (opzionale)
  2. Fare clic sul pulsante del globo
  3. Digitare o incollare l'URL
  4. Se non è stato selezionato del testo, digitare il testo del link

Link web del progetto:

  1. Fare clic sul pulsante della catena
  2. Un elenco mostra i link salvati nella cartella
  3. Fare clic sul link desiderato per inserirlo

Immagine del progetto:

  1. Fare clic sul pulsante della cartella con immagine
  2. Un elenco mostra le immagini della cartella
  3. Fare clic sull'immagine desiderata per inserirla

Video o audio:

  1. Fare clic sul pulsante video o audio
  2. Scegliere dall'elenco dei media della cartella
  3. Il link viene inserito nel documento

Come Eliminare Link e Media

Per rimuovere un link, immagine, video o audio inserito:

  1. Posizionare il cursore alla fine del link/media
  2. Premere Backspace (o Canc) per cancellare carattere per carattere
  3. Oppure selezionare l'intero elemento (clic e trascinamento) e premere Canc o Backspace

Suggerimento: Per i link testuali, è possibile anche selezionare il testo del link e semplicemente digitare qualcosa di nuovo per sostituirlo.

Salvataggio Automatico

L'editor salva il lavoro automaticamente ogni 60 secondi, a condizione che ci siano modifiche non salvate. Si vedrà brevemente un indicatore "Salvataggio in corso..." quando questo accade.

Importante: Il salvataggio automatico salva una bozza. Affinché le altre persone vedano le modifiche, è necessario pubblicare il file.

Pubblicazione delle Modifiche

Al termine della modifica:

  1. Fare clic sul pulsante Termina Modifica (angolo in alto a destra)
  2. Il file viene pubblicato e reso disponibile agli altri utenti
  3. Le modifiche diventano visibili a tutto il team

Nota: Se si esce dall'editor senza terminare, le modifiche vengono salvate come bozza, ma il file rimane riservato (check-out).

Assistente IA per le Sezioni

L'editor include un assistente di intelligenza artificiale che può aiutare a migliorare, riassumere o espandere sezioni del documento. Le azioni IA sono disponibili su qualsiasi titolo (H1, H2, H3, ecc.).

Come Accedere

Esistono due modi per accedere alle azioni IA:

  1. Clic destro su un titolo: Appare un menu contestuale con le opzioni disponibili
  2. Pulsante sul titolo: Passando il mouse su un titolo, appare un pulsante ⋮ a destra. Fare clic su di esso per vedere le opzioni

Azioni Disponibili

Azione Descrizione
Riassumi Sezione Condensa il contenuto della sezione, mantenendo i punti principali
Espandi Sezione Aggiunge maggiori dettagli e profondità al contenuto esistente
Migliora Sezione Migliora la qualità della scrittura (chiarezza, fluidità, grammatica)
Genera Sommario Esecutivo Crea un sommario di alto livello del documento (disponibile solo su titoli H1)
Elimina Sezione Rimuove la sezione e tutto il suo contenuto (non usa l'IA)

Flusso di Utilizzo

  1. Scegliere un'azione: Fare clic destro sul titolo o usare il pulsante ⋮ e selezionare l'azione desiderata
  2. Attendere l'elaborazione: Appare un indicatore di caricamento mentre l'IA elabora. È possibile annullare in qualsiasi momento
  3. Rivedere il risultato: Un pannello di confronto mostra il testo originale (a sinistra) e il suggerimento dell'IA (a destra), affiancati
  4. Decidere: Fare clic su Applica per accettare il suggerimento o Annulla per scartarlo

Nessuna modifica viene effettuata senza la propria approvazione. Si visualizza sempre il risultato prima di applicarlo.

Sommario Esecutivo (TLDR)

L'azione "Genera Sommario Esecutivo" funziona diversamente dalle altre:

  • Disponibile solo su titoli H1
  • Invece di sostituire il contenuto, inserisce una nuova sezione subito sotto l'H1
  • Il titolo della sezione è localizzato nella lingua del documento (es. "Sommario Esecutivo (TLDR)" in italiano)

Elimina Sezione

L'eliminazione della sezione non usa l'IA e funziona così:

  1. Una finestra di conferma mostra il contenuto che verrà rimosso
  2. Fare clic su Elimina Sezione per confermare o Annulla per mantenere

Attenzione: L'eliminazione rimuove l'intera sezione (titolo e tutto il contenuto fino al titolo successivo). Questa azione non può essere annullata direttamente — usare il pulsante Annulla (versione precedente) per ripristinare il documento.

Pulsante Annulla (Versione Precedente)

Il pulsante Annulla appare quando esiste una versione precedente del file. Facendo clic su di esso:

  1. Ripristina la versione precedente completa del file
  2. La versione attuale diventa il nuovo backup

Attenzione: Questo annulla ripristina l'intero file alla versione precedente, non solo l'ultima digitazione. Per annullare la digitazione recente, usare Ctrl+Z (Windows) o Cmd+Z (Mac).

Download del File

Nell'elenco dei contenuti, fare clic sul menu ⋮ del file markdown per vedere le opzioni:

  • Scarica: Scarica solo il file .md
  • Scarica con immagini: Scarica un file ZIP contenente il markdown e tutte le immagini di Sutram presenti nel documento. I link delle immagini vengono convertiti in percorsi relativi, rendendo il pacchetto portatile.

Nota: L'opzione "Scarica con immagini" appare solo per i file pubblicati. Se non ci sono immagini di Sutram nel documento, un messaggio informerà che si deve usare l'opzione di download normale.

Scorciatoie da Tastiera

Scorciatoia Azione
Ctrl/Cmd + Z Annulla ultima digitazione
Ctrl/Cmd + Shift + Z Ripeti
Ctrl/Cmd + B Grassetto
Ctrl/Cmd + I Corsivo
Enter Nuovo paragrafo
Shift + Enter Interruzione di riga (stesso paragrafo)
Tab Rientra elemento dell'elenco
Shift + Tab Rimuovi rientro elemento dell'elenco

Modalità Commenti

L'editor markdown include una modalità commenti integrata che permette di visualizzare, gestire e riposizionare gli indicatori dei commenti mentre si modifica il documento.

Due Modalità di Funzionamento

L'editor alterna tra due modalità:

Modalità Descrizione
Modifica (predefinita) Editor WYSIWYG Milkdown normale, senza indicatori visibili
Commenti Anteprima renderizzata con overlay commenti e pannello laterale

Accesso alla Modalità Commenti

  1. Nell'editor, fare clic sul pulsante Commenti nell'intestazione (accanto al pulsante "Invia")
  2. Il badge mostra la quantità di commenti esistenti (es. "8")
  3. L'editor passa alla modalità di visualizzazione con gli indicatori visibili
  4. Per tornare alla modalità di modifica, fare clic nuovamente sul pulsante Commenti

Restrizione: La modalità commenti non è disponibile su dispositivi mobili piccoli (viewport < 768px). Funziona su tablet (iPad, Android) e desktop. Un tooltip sul pulsante disabilitato spiega: "Usa un computer desktop per gestire i commenti".

Layout della Modalità Commenti

┌─────────────────────────────────────────────────────────────────┐
│  ← Indietro         [💬 Commenti 8]    [Invia]      │ Intestazione │
├─────────────────────────────────────┬───────────────────────────┤
│                                     │ 💬 3 commenti             │
│   Anteprima Markdown                │ ─────────────────────────│
│   (sola lettura)                    │ ◉ Tutti ○ Aperti ○ Risolti│
│                                     │ ─────────────────────────│
│        📍 Indicatore 1              │ [1] Giovanni · 2h fa      │
│                                     │     Verificare questa sezione│
│        📍 Indicatore 2              │     "brano del testo..."  │
│                                     │     [Vai a]               │
│                                     │ ─────────────────────────│
│                                     │ [2] Maria · 1g fa    ✅   │
│                                     │     Corretto              │
└─────────────────────────────────────┴───────────────────────────┘

Funzionalità del Pannello Commenti

Il pannello laterale destro offre:

Funzionalità Descrizione
Filtri Tutti / Aperti / Risolti
Lista commenti Tutti i commenti del documento con autore, data e anteprima del testo selezionato
Vai a Scorre la visualizzazione fino all'indicatore corrispondente
Apri thread Fare clic sul commento per vedere le risposte e interagire

Risoluzione dei Commenti

Nella modalità commenti, è possibile risolvere le discussioni direttamente:

  1. Fare clic su un commento nel pannello o sull'indicatore nel documento
  2. La finestra modale del thread si apre mostrando il commento originale e le risposte
  3. Fare clic su "Segna come risolto" per indicare che la questione è stata trattata
  4. L'indicatore cambia da viola (aperto) a verde (risolto)
  5. Il commento può essere filtrato dalla scheda "Risolti"

Per riaprire un commento risolto, aprire il thread e fare clic su "Riapri".

Differenza tra Visualizzatore ed Editor

Aspetto Visualizzatore (Anteprima Modale) Editor (Modalità Commenti)
Creare commenti Si, selezionare il testo per commentare No, non disponibile
Vedere commenti Si, indicatori visibili Si, indicatori visibili
Risolvere/Rispondere Si, tramite finestra modale del thread Si, tramite finestra modale del thread
Modificare contenuto No, sola lettura Si, nella modalità Modifica

Flusso consigliato:

  1. Visualizzatore: Usare per creare nuovi commenti (selezionare testo)
  2. Editor - Modalità Modifica: Usare per modificare il contenuto markdown
  3. Editor - Modalità Commenti: Usare per rivedere e risolvere commenti esistenti

Suggerimenti Utili

  1. Organizzare con i titoli: Usare H1 per il titolo principale, H2 per le sezioni e H3 per le sottosezioni. Questo facilita la lettura.

  2. Salvare regolarmente: Sebbene ci sia il salvataggio automatico, è possibile fare clic su "Termina Modifica" in qualsiasi momento per pubblicare.

  3. Avviso di uscita: Se si tenta di lasciare la pagina con modifiche non salvate, il browser mostrerà un avviso.

  4. Immagini del progetto: Preferire l'uso di immagini già caricate nel progetto. Queste sono archiviate in modo sicuro e possono essere scaricate insieme al documento.

  5. Link media: Per video e audio, prima aggiungere il link nella cartella usando "Aggiungi link video" o "Aggiungi link audio", poi inserirlo nel documento.

  6. Risolvere prima di pubblicare: Prima di terminare la modifica, verificare nella modalità Commenti se ci sono discussioni aperte che devono essere risolte o a cui rispondere.

Torna alla Documentazione