Contenuto HTML
Cosa entra e cosa esce
WikiEditor riceve ed emette HTML. L'HTML in ingresso passa dallo schema dell'editor:
- un elemento che l'editor non sa rappresentare viene scartato (il suo testo resta, come paragrafo);
- un link con indirizzo non ammesso perde il link e resta testo;
- un'immagine con
srcnon ammesso viene scartata.
L'HTML emesso contiene quindi solo gli elementi qui sotto, ed è lo stesso a prescindere da come era scritto quello in ingresso. Un documento vuoto è ''.
Indirizzi ammessi
| Dove | Ammessi | Scartati |
|---|---|---|
Link (href) | http:, https:, mailto:, tel:, relativi (/…, #…, ../…) | javascript:, data:, vbscript: e ogni altro schema |
Immagini (src) | http:, https:, blob:, relativi | data:, javascript: e ogni altro schema |
Il controllo ignora spazi e caratteri di controllo dentro lo schema, come fa il browser (java\tscript: è javascript:). I link hanno sempre rel="noopener noreferrer nofollow" e nessun target.
Elementi
| Elemento | HTML |
|---|---|
| Paragrafo, titoli | <p>, <h1>…<h6> |
| Formattazione | <strong>, <em>, <u>, <s>, <code> |
| Link | <a href="…" rel="noopener noreferrer nofollow"> |
| Elenchi | <ul>, <ol>, <li> |
| Citazione, separatore | <blockquote>, <hr> |
| Blocco di codice | <pre spellcheck="false"><code class="language-sql">…</code></pre> (senza class se il linguaggio è automatico) |
| Tabella | <table><colgroup>…</colgroup><tbody><tr><th>/<td>…</td></tr></tbody></table> |
| Immagine | <img src="…" alt="…" data-id="id allegato"> |
| Callout | <div data-callout="info|success|warn|danger">…</div> |
| Sezione richiudibile | <details data-sezione open><summary>Titolo</summary><div>…</div></details> (open se aperta) |
| Blocco personalizzato | <div data-blocco="tipo" data-dati="{json}"></div> |
| Ancora di commento | <span data-commento="ancora">…</span> |
Un <details> arrivato da fuori, senza il <div> interno, viene letto lo stesso: il <summary> diventa il titolo e il resto il contenuto. Un tipo di callout sconosciuto diventa info.
Stile
La shell non carica il CSS della libreria, e il CSS di un microfrontend non arriva al browser. Per questo lo stile del contenuto non sta in un foglio di stile (niente prose, niente regole .ProseMirror …) ma in classi Tailwind standard scritte sui nodi, anche nell'HTML emesso:
<h2 class="mt-5 mb-2 text-2xl font-semibold">Passaggi</h2>
<ol class="my-2 list-decimal pl-6"><li class="-my-1"><p class="my-2 leading-relaxed">Registra il reso</p></li></ol>
| Nodo | Classi |
|---|---|
| Paragrafo | my-2 leading-relaxed |
| Titoli H1–H6 | da text-3xl font-bold (H1) a text-sm font-semibold uppercase tracking-wide (H6), con margini decrescenti |
| Elenchi | my-2 list-disc pl-6 / my-2 list-decimal pl-6; voce -my-1 |
| Citazione | border-l-4 border-gray-300 pl-4 italic text-gray-600 |
| Codice in linea | rounded bg-gray-100 px-1 font-mono text-sm text-pink-700 |
| Blocco di codice | rounded-md bg-gray-900 p-4 font-mono text-sm text-gray-100 (scuro in entrambi i temi) |
| Link | text-primary-600 underline |
| Tabella, celle | w-full border-collapse text-sm; border border-gray-300 px-3 py-1 align-top; intestazione bg-gray-50 font-semibold |
| Immagine | my-3 h-auto max-w-full rounded-md |
| Callout | border-l-4 rounded-md con border-*-500 bg-*-50 text-*-900 della palette semantica info, success, warn, danger |
| Sezione richiudibile | rounded-md border border-gray-200 |
I colori hanno la variante dark: (omessa nella tabella). Sono solo utility standard, tutte presenti nella safelist della shell: niente valori arbitrari, e i colori semantici sono warn-, non warning-.
I token del codice seguono la stessa regola: l'evidenziazione (lowlight / highlight.js) assegnerebbe classi hljs-* che richiedono un tema CSS, e l'editor le sostituisce con colori Tailwind (parole chiave text-purple-300, stringhe text-green-300, numeri text-orange-300, commenti italic text-gray-400…). Il colore dei token esiste solo nell'editor: nell'HTML salvato il codice è testo semplice dentro <code class="language-…">.
Mostrare il contenuto
| Modo | Quando |
|---|---|
<WikiEditor readonly> | Consigliato. Mostra tutto: blocchi del modulo (con lo stesso slot), token del codice, commenti nel margine, link con apriLink, sezioni che si aprono |
v-html dopo un sanitizer | Anteprime, email, export: niente blocchi del modulo né colori del codice |
Con v-html il sanitizer del modulo deve conservare, oltre ai tag sopra:
- l'attributo
classsu tutti gli elementi, altrimenti il contenuto perde lo stile; hreferelsui link,src,altedata-idsulle immagini,opensu<details>;data-callout,data-sezione,data-commento(edata-blocco/data-dati, se il modulo li gestisce a parte).
Gli indirizzi sono già filtrati dall'editor, ma un HTML arrivato da altre fonti (RPC, import) va comunque sanitizzato prima di un v-html.