Prise en charge de <span data-attribute> dans l'éditeur enrichi

Si je sélectionne du texte sur une seule ligne et que j’applique un wrap via le bouton de l’éditeur, un wrap en ligne est appliqué. Cela fonctionne, mais la dernière lettre du texte sélectionné est partiellement coupée :

image

C’est l’une des façons de créer des wraps en ligne, et ils seront automatiquement convertis en wraps de bloc s’il n’y a aucun autre contenu écrit sur la même ligne.

L’autre méthode consiste à utiliser <span data-attribute>, qui n’est pas prise en charge dans l’éditeur riche (data-attribute est supprimé), bien qu’elle soit entièrement supportée dans l’éditeur Markdown. Fait intéressant, cette syntaxe autorisée n’est pas répertoriée dans discourse/frontend/pretty-text/addon/allow-lister.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub, mais plutôt dans discourse/frontend/discourse-markdown-it/src/features/d-wrap.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub :slight_smile:

<span data-attribute> est documenté sur Meta et probablement utilisé ailleurs que sur mon forum. Son avantage est de ne jamais être converti en élément de bloc, même s’il n’y a aucun autre contenu sur la même ligne.

Un wrap régulier seul sur une ligne comme ceci :

[wrap="fish"]texte[/wrap]

Serra rendu comme un bloc :

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

À ma connaissance, les seules façons d’éviter ce comportement sont :

  • Utiliser <span data-attribute> :

    <span data-fish>texte</span>
    

    est rendu comme :

    <span data-fish="">texte</span>
    
  • Ajouter un espace non supprimé (idéalement de largeur nulle) comme &ZeroWidthSpace; au début ou à la fin de la ligne.

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

    est rendu comme :

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

Cette dernière option étant un peu bricolée.

Je préférerais pouvoir utiliser la première solution dans l’éditeur riche. Plus généralement, n’importe quelle méthode simple pour créer un wrap en ligne serait bienvenue.