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:
![]()
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 ![]()
<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
​at the beginning or the end of the line.​[wrap=fish]Fishyfishy[/wrap]renders as:
​<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.