Support <span data-attribute> in the rich editor

If I select some text on a single line and apply a wrap through the composer button, an inline wrap is applied. This works, though the last letter of the selected text is partially cropped out:

image

This is one way to create inline wraps, and it will be automatically converted as a block wrap if there’s no other content written on the same line.

The other one is <span data-attribute> and isn’t supported in the rich editor (data-attribute is being stripped out), though it’s fully supported in the markdown editor. Interestingly, this allowed syntax is not listed in discourse/frontend/pretty-text/addon/allow-lister.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub but rather in discourse/frontend/discourse-markdown-it/src/features/d-wrap.js at 3b13aaa003332e7bf056a6cbb2c0da0cf107a0fd · discourse/discourse · GitHub :slight_smile:

<span data-attribute> is documented on meta, and probably used in the wild outside my forum. It has the advantage of never being converted to a block element, even if there’s no other content on the same line.

A regular wrap alone on a line like this:

[wrap="fish"]text[/wrap]

Will be rendered as a block:

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

The only ways, to my knowledge, to avoid this behavior are:

  • Using <span data-attribute>:

    <span data-fish>text</span>
    

    renders as:

    <span data-fish="">text</span>
    
  • Add a non-trimmed (ideally zero-width) space like &ZeroWidthSpace; at the beginning or the end of the line.

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

    renders as:

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

The latter being a bit hacky.

I’d prefer being able to use the first solution in the rich editor. More generally, any kind of easy way to create an inline wrap would be good.