Supporto <span data-attribute> nell'editor ricco

Se seleziono del testo su una singola riga e applico un wrap tramite il pulsante del composer, viene applicato un wrap inline. Questo funziona, anche se l’ultima lettera del testo selezionato viene parzialmente tagliata:

image

Questo è un modo per creare wrap inline e verrà automaticamente convertito in un wrap a blocco se non c’è altro contenuto scritto sulla stessa riga.

L’altro metodo è <span data-attribute> e non è supportato nell’editor ricco (data-attribute viene rimosso), sebbene sia pienamente supportato nell’editor markdown. Interessante notare che questa sintassi consentita non è elencata in discourse/frontend/pretty-text/addon/allow-lister.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub, ma piuttosto in discourse/frontend/discourse-markdown-it/src/features/d-wrap.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub :slight_smile:

<span data-attribute> è documentato su meta e probabilmente utilizzato anche al di fuori del mio forum. Ha il vantaggio di non essere mai convertito in un elemento a blocco, anche se non c’è altro contenuto sulla stessa riga.

Un wrap regolare da solo su una riga come questo:

[wrap="fish"]testo[/wrap]

Verrà renderizzato come un blocco:

<div class="d-wrap" data-wrap="fish">
<p>testo</p>
</div>

Le uniche modalità, a mia conoscenza, per evitare questo comportamento sono:

  • Utilizzare <span data-attribute>:

    <span data-fish>testo</span>
    

    viene renderizzato come:

    <span data-fish="">testo</span>
    
  • Aggiungere uno spazio non eliminabile (idealmente a larghezza zero) come &ZeroWidthSpace; all’inizio o alla fine della riga.

    &ZeroWidthSpace;[wrap=fish]Pescepesce[/wrap]
    

    viene renderizzato come:

    &ZeroWidthSpace;<span class="d-wrap" data-wrap="fish">Pescepesce</span>
    

La seconda opzione è un po’ un workaround.

Preferirei poter utilizzare la prima soluzione nell’editor ricco. In generale, qualsiasi metodo semplice per creare un wrap inline sarebbe utile.